Compare commits
3 Commits
6f29a6e009
...
51c95fa19d
| Author | SHA1 | Date | |
|---|---|---|---|
|
51c95fa19d | ||
| 2ee08dc7d8 | |||
| e7fede576c |
@ -29,11 +29,11 @@
|
||||
"ts-proto": "^2.8.3",
|
||||
"typescript": "~5.9.3",
|
||||
"typescript-eslint": "^8.48.1",
|
||||
"vite": "npm:rolldown-vite@7.2.5"
|
||||
"vite": "npm:rolldown-vite@7.3.1"
|
||||
},
|
||||
"pnpm": {
|
||||
"overrides": {
|
||||
"vite": "npm:rolldown-vite@7.2.5"
|
||||
"vite": "npm:rolldown-vite@7.3.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
167
frontend/pnpm-lock.yaml
generated
167
frontend/pnpm-lock.yaml
generated
@ -5,7 +5,7 @@ settings:
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
overrides:
|
||||
vite: npm:rolldown-vite@7.2.5
|
||||
vite: npm:rolldown-vite@7.3.1
|
||||
|
||||
importers:
|
||||
|
||||
@ -38,7 +38,7 @@ importers:
|
||||
version: 19.2.3(@types/react@19.2.7)
|
||||
'@vitejs/plugin-react':
|
||||
specifier: ^5.1.2
|
||||
version: 5.1.2(rolldown-vite@7.2.5(@types/node@24.10.1))
|
||||
version: 5.1.2(rolldown-vite@7.3.1(@types/node@24.10.1))
|
||||
eslint:
|
||||
specifier: ^9.39.1
|
||||
version: 9.39.1
|
||||
@ -61,8 +61,8 @@ importers:
|
||||
specifier: ^8.48.1
|
||||
version: 8.48.1(eslint@9.39.1)(typescript@5.9.3)
|
||||
vite:
|
||||
specifier: npm:rolldown-vite@7.2.5
|
||||
version: rolldown-vite@7.2.5(@types/node@24.10.1)
|
||||
specifier: npm:rolldown-vite@7.3.1
|
||||
version: rolldown-vite@7.3.1(@types/node@24.10.1)
|
||||
|
||||
packages:
|
||||
|
||||
@ -234,99 +234,90 @@ packages:
|
||||
'@napi-rs/wasm-runtime@1.1.0':
|
||||
resolution: {integrity: sha512-Fq6DJW+Bb5jaWE69/qOE0D1TUN9+6uWhCeZpdnSBk14pjLcCWR7Q8n49PTSPHazM37JqrsdpEthXy2xn6jWWiA==}
|
||||
|
||||
'@oxc-project/runtime@0.97.0':
|
||||
resolution: {integrity: sha512-yH0zw7z+jEws4dZ4IUKoix5Lh3yhqIJWF9Dc8PWvhpo7U7O+lJrv7ZZL4BeRO0la8LBQFwcCewtLBnVV7hPe/w==}
|
||||
'@oxc-project/runtime@0.101.0':
|
||||
resolution: {integrity: sha512-t3qpfVZIqSiLQ5Kqt/MC4Ge/WCOGrrcagAdzTcDaggupjiGxUx4nJF2v6wUCXWSzWHn5Ns7XLv13fCJEwCOERQ==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
|
||||
'@oxc-project/types@0.97.0':
|
||||
resolution: {integrity: sha512-lxmZK4xFrdvU0yZiDwgVQTCvh2gHWBJCBk5ALsrtsBWhs0uDIi+FTOnXRQeQfs304imdvTdaakT/lqwQ8hkOXQ==}
|
||||
'@oxc-project/types@0.101.0':
|
||||
resolution: {integrity: sha512-nuFhqlUzJX+gVIPPfuE6xurd4lST3mdcWOhyK/rZO0B9XWMKm79SuszIQEnSMmmDhq1DC8WWVYGVd+6F93o1gQ==}
|
||||
|
||||
'@rolldown/binding-android-arm64@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-XlEkrOIHLyGT3avOgzfTFSjG+f+dZMw+/qd+Y3HLN86wlndrB/gSimrJCk4gOhr1XtRtEKfszpadI3Md4Z4/Ag==}
|
||||
'@rolldown/binding-android-arm64@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-Ok9V8o7o6YfSdTTYA/uHH30r3YtOxLD6G3wih/U9DO0ucBBFq8WPt/DslU53OgfteLRHITZny9N/qCUxMf9kjQ==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
cpu: [arm64]
|
||||
os: [android]
|
||||
|
||||
'@rolldown/binding-darwin-arm64@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-+JRqKJhoFlt5r9q+DecAGPLZ5PxeLva+wCMtAuoFMWPoZzgcYrr599KQ+Ix0jwll4B4HGP43avu9My8KtSOR+w==}
|
||||
'@rolldown/binding-darwin-arm64@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-yIsKqMz0CtRnVa6x3Pa+mzTihr4Ty+Z6HfPbZ7RVbk1Uxnco4+CUn7Qbm/5SBol1JD/7nvY8rphAgyAi7Lj6Vg==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
|
||||
'@rolldown/binding-darwin-x64@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-fFXDjXnuX7/gQZQm/1FoivVtRcyAzdjSik7Eo+9iwPQ9EgtA5/nB2+jmbzaKtMGG3q+BnZbdKHCtOacmNrkIDA==}
|
||||
'@rolldown/binding-darwin-x64@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-GTXe+mxsCGUnJOFMhfGWmefP7Q9TpYUseHvhAhr21nCTgdS8jPsvirb0tJwM3lN0/u/cg7bpFNa16fQrjKrCjQ==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
|
||||
'@rolldown/binding-freebsd-x64@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-F1b6vARy49tjmT/hbloplzgJS7GIvwWZqt+tAHEstCh0JIh9sa8FAMVqEmYxDviqKBaAI8iVvUREm/Kh/PD26Q==}
|
||||
'@rolldown/binding-freebsd-x64@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-9Tmp7bBvKqyDkMcL4e089pH3RsjD3SUungjmqWtyhNOxoQMh0fSmINTyYV8KXtE+JkxYMPWvnEt+/mfpVCkk8w==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
cpu: [x64]
|
||||
os: [freebsd]
|
||||
|
||||
'@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-U6cR76N8T8M6lHj7EZrQ3xunLPxSvYYxA8vJsBKZiFZkT8YV4kjgCO3KwMJL0NOjQCPGKyiXO07U+KmJzdPGRw==}
|
||||
'@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-a1y5fiB0iovuzdbjUxa7+Zcvgv+mTmlGGC4XydVIsyl48eoxgaYkA3l9079hyTyhECsPq+mbr0gVQsFU11OJAQ==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
|
||||
'@rolldown/binding-linux-arm64-gnu@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-ONgyjofCrrE3bnh5GZb8EINSFyR/hmwTzZ7oVuyUB170lboza1VMCnb8jgE6MsyyRgHYmN8Lb59i3NKGrxrYjw==}
|
||||
'@rolldown/binding-linux-arm64-gnu@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-bpIGX+ov9PhJYV+wHNXl9rzq4F0QvILiURn0y0oepbQx+7stmQsKA0DhPGwmhfvF856wq+gbM8L92SAa/CBcLg==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
|
||||
'@rolldown/binding-linux-arm64-musl@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-L0zRdH2oDPkmB+wvuTl+dJbXCsx62SkqcEqdM+79LOcB+PxbAxxjzHU14BuZIQdXcAVDzfpMfaHWzZuwhhBTcw==}
|
||||
'@rolldown/binding-linux-arm64-musl@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-bGe5EBB8FVjHBR1mOLOPEFg1Lp3//7geqWkU5NIhxe+yH0W8FVrQ6WRYOap4SUTKdklD/dC4qPLREkMMQ855FA==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
|
||||
'@rolldown/binding-linux-x64-gnu@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-gyoI8o/TGpQd3OzkJnh1M2kxy1Bisg8qJ5Gci0sXm9yLFzEXIFdtc4EAzepxGvrT2ri99ar5rdsmNG0zP0SbIg==}
|
||||
'@rolldown/binding-linux-x64-gnu@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-qL+63WKVQs1CMvFedlPt0U9PiEKJOAL/bsHMKUDS6Vp2Q+YAv/QLPu8rcvkfIMvQ0FPU2WL0aX4eWwF6e/GAnA==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
|
||||
'@rolldown/binding-linux-x64-musl@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-zti8A7M+xFDpKlghpcCAzyOi+e5nfUl3QhU023ce5NCgUxRG5zGP2GR9LTydQ1rnIPwZUVBWd4o7NjZDaQxaXA==}
|
||||
'@rolldown/binding-linux-x64-musl@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-VGl9JIGjoJh3H8Mb+7xnVqODajBmrdOOb9lxWXdcmxyI+zjB2sux69br0hZJDTyLJfvBoYm439zPACYbCjGRmw==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
|
||||
'@rolldown/binding-openharmony-arm64@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-eZUssog7qljrrRU9Mi0eqYEPm3Ch0UwB+qlWPMKSUXHNqhm3TvDZarJQdTevGEfu3EHAXJvBIe0YFYr0TPVaMA==}
|
||||
'@rolldown/binding-openharmony-arm64@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-B4iIserJXuSnNzA5xBLFUIjTfhNy7d9sq4FUMQY3GhQWGVhS2RWWzzDnkSU6MUt7/aHUrep0CdQfXUJI9D3W7A==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
cpu: [arm64]
|
||||
os: [openharmony]
|
||||
|
||||
'@rolldown/binding-wasm32-wasi@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-nmCN0nIdeUnmgeDXiQ+2HU6FT162o+rxnF7WMkBm4M5Ds8qTU7Dzv2Wrf22bo4ftnlrb2hKK6FSwAJSAe2FWLg==}
|
||||
'@rolldown/binding-wasm32-wasi@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-BUjAEgpABEJXilGq/BPh7jeU3WAJ5o15c1ZEgHaDWSz3LB881LQZnbNJHmUiM4d1JQWMYYyR1Y490IBHi2FPJg==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
cpu: [wasm32]
|
||||
|
||||
'@rolldown/binding-win32-arm64-msvc@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-7kcNLi7Ua59JTTLvbe1dYb028QEPaJPJQHqkmSZ5q3tJueUeb6yjRtx8mw4uIqgWZcnQHAR3PrLN4XRJxvgIkA==}
|
||||
'@rolldown/binding-win32-arm64-msvc@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-s27uU7tpCWSjHBnxyVXHt3rMrQdJq5MHNv3BzsewCIroIw3DJFjMH1dzCPPMUFxnh1r52Nf9IJ/eWp6LDoyGcw==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
cpu: [arm64]
|
||||
os: [win32]
|
||||
|
||||
'@rolldown/binding-win32-ia32-msvc@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-lL70VTNvSCdSZkDPPVMwWn/M2yQiYvSoXw9hTLgdIWdUfC3g72UaruezusR6ceRuwHCY1Ayu2LtKqXkBO5LIwg==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
cpu: [ia32]
|
||||
os: [win32]
|
||||
|
||||
'@rolldown/binding-win32-x64-msvc@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-4qU4x5DXWB4JPjyTne/wBNPqkbQU8J45bl21geERBKtEittleonioACBL1R0PsBu0Aq21SwMK5a9zdBkWSlQtQ==}
|
||||
'@rolldown/binding-win32-x64-msvc@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-cjWL/USPJ1g0en2htb4ssMjIycc36RvdQAx1WlXnS6DpULswiUTVXPDesTifSKYSyvx24E0YqQkEm0K/M2Z/AA==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
'@rolldown/pluginutils@1.0.0-beta.50':
|
||||
resolution: {integrity: sha512-5e76wQiQVeL1ICOZVUg4LSOVYg9jyhGCin+icYozhsUzM+fHE7kddi1bdiE0jwVqTfkjba3jUFbEkoC9WkdvyA==}
|
||||
|
||||
'@rolldown/pluginutils@1.0.0-beta.53':
|
||||
resolution: {integrity: sha512-vENRlFU4YbrwVqNDZ7fLvy+JR1CRkyr01jhSiDpE1u6py3OMzQfztQU2jxykW3ALNxO4kSlqIDeYyD0Y9RcQeQ==}
|
||||
|
||||
@ -425,7 +416,7 @@ packages:
|
||||
resolution: {integrity: sha512-EcA07pHJouywpzsoTUqNh5NwGayl2PPVEJKUSinGGSxFGYn+shYbqMGBg6FXDqgXum9Ou/ecb+411ssw8HImJQ==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
peerDependencies:
|
||||
vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
|
||||
vite: npm:rolldown-vite@7.3.1
|
||||
|
||||
acorn-jsx@5.3.2:
|
||||
resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
|
||||
@ -897,13 +888,13 @@ packages:
|
||||
resolution: {integrity: sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==}
|
||||
engines: {node: '>=4'}
|
||||
|
||||
rolldown-vite@7.2.5:
|
||||
resolution: {integrity: sha512-u09tdk/huMiN8xwoiBbig197jKdCamQTtOruSalOzbqGje3jdHiV0njQlAW0YvzoahkirFePNQ4RYlfnRQpXZA==}
|
||||
rolldown-vite@7.3.1:
|
||||
resolution: {integrity: sha512-LYzdNAjRHhF2yA4JUQm/QyARyi216N2rpJ0lJZb8E9FU2y5v6Vk+xq/U4XBOxMefpWixT5H3TslmAHm1rqIq2w==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
'@types/node': ^20.19.0 || >=22.12.0
|
||||
esbuild: ^0.25.0
|
||||
esbuild: ^0.27.0
|
||||
jiti: '>=1.21.0'
|
||||
less: ^4.0.0
|
||||
sass: ^1.70.0
|
||||
@ -937,8 +928,8 @@ packages:
|
||||
yaml:
|
||||
optional: true
|
||||
|
||||
rolldown@1.0.0-beta.50:
|
||||
resolution: {integrity: sha512-JFULvCNl/anKn99eKjOSEubi0lLmNqQDAjyEMME2T4CwezUDL0i6t1O9xZsu2OMehPnV2caNefWpGF+8TnzB6A==}
|
||||
rolldown@1.0.0-beta.53:
|
||||
resolution: {integrity: sha512-Qd9c2p0XKZdgT5AYd+KgAMggJ8ZmCs3JnS9PTMWkyUfteKlfmKtxJbWTHkVakxwXs1Ub7jrRYVeFeF7N0sQxyw==}
|
||||
engines: {node: ^20.19.0 || >=22.12.0}
|
||||
hasBin: true
|
||||
|
||||
@ -1268,56 +1259,51 @@ snapshots:
|
||||
'@tybys/wasm-util': 0.10.1
|
||||
optional: true
|
||||
|
||||
'@oxc-project/runtime@0.97.0': {}
|
||||
'@oxc-project/runtime@0.101.0': {}
|
||||
|
||||
'@oxc-project/types@0.97.0': {}
|
||||
'@oxc-project/types@0.101.0': {}
|
||||
|
||||
'@rolldown/binding-android-arm64@1.0.0-beta.50':
|
||||
'@rolldown/binding-android-arm64@1.0.0-beta.53':
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-darwin-arm64@1.0.0-beta.50':
|
||||
'@rolldown/binding-darwin-arm64@1.0.0-beta.53':
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-darwin-x64@1.0.0-beta.50':
|
||||
'@rolldown/binding-darwin-x64@1.0.0-beta.53':
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-freebsd-x64@1.0.0-beta.50':
|
||||
'@rolldown/binding-freebsd-x64@1.0.0-beta.53':
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.50':
|
||||
'@rolldown/binding-linux-arm-gnueabihf@1.0.0-beta.53':
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-linux-arm64-gnu@1.0.0-beta.50':
|
||||
'@rolldown/binding-linux-arm64-gnu@1.0.0-beta.53':
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-linux-arm64-musl@1.0.0-beta.50':
|
||||
'@rolldown/binding-linux-arm64-musl@1.0.0-beta.53':
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-linux-x64-gnu@1.0.0-beta.50':
|
||||
'@rolldown/binding-linux-x64-gnu@1.0.0-beta.53':
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-linux-x64-musl@1.0.0-beta.50':
|
||||
'@rolldown/binding-linux-x64-musl@1.0.0-beta.53':
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-openharmony-arm64@1.0.0-beta.50':
|
||||
'@rolldown/binding-openharmony-arm64@1.0.0-beta.53':
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-wasm32-wasi@1.0.0-beta.50':
|
||||
'@rolldown/binding-wasm32-wasi@1.0.0-beta.53':
|
||||
dependencies:
|
||||
'@napi-rs/wasm-runtime': 1.1.0
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-win32-arm64-msvc@1.0.0-beta.50':
|
||||
'@rolldown/binding-win32-arm64-msvc@1.0.0-beta.53':
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-win32-ia32-msvc@1.0.0-beta.50':
|
||||
'@rolldown/binding-win32-x64-msvc@1.0.0-beta.53':
|
||||
optional: true
|
||||
|
||||
'@rolldown/binding-win32-x64-msvc@1.0.0-beta.50':
|
||||
optional: true
|
||||
|
||||
'@rolldown/pluginutils@1.0.0-beta.50': {}
|
||||
|
||||
'@rolldown/pluginutils@1.0.0-beta.53': {}
|
||||
|
||||
'@tybys/wasm-util@0.10.1':
|
||||
@ -1454,7 +1440,7 @@ snapshots:
|
||||
'@typescript-eslint/types': 8.48.1
|
||||
eslint-visitor-keys: 4.2.1
|
||||
|
||||
'@vitejs/plugin-react@5.1.2(rolldown-vite@7.2.5(@types/node@24.10.1))':
|
||||
'@vitejs/plugin-react@5.1.2(rolldown-vite@7.3.1(@types/node@24.10.1))':
|
||||
dependencies:
|
||||
'@babel/core': 7.28.5
|
||||
'@babel/plugin-transform-react-jsx-self': 7.27.1(@babel/core@7.28.5)
|
||||
@ -1462,7 +1448,7 @@ snapshots:
|
||||
'@rolldown/pluginutils': 1.0.0-beta.53
|
||||
'@types/babel__core': 7.20.5
|
||||
react-refresh: 0.18.0
|
||||
vite: rolldown-vite@7.2.5(@types/node@24.10.1)
|
||||
vite: rolldown-vite@7.3.1(@types/node@24.10.1)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
|
||||
@ -1870,38 +1856,37 @@ snapshots:
|
||||
|
||||
resolve-from@4.0.0: {}
|
||||
|
||||
rolldown-vite@7.2.5(@types/node@24.10.1):
|
||||
rolldown-vite@7.3.1(@types/node@24.10.1):
|
||||
dependencies:
|
||||
'@oxc-project/runtime': 0.97.0
|
||||
'@oxc-project/runtime': 0.101.0
|
||||
fdir: 6.5.0(picomatch@4.0.3)
|
||||
lightningcss: 1.30.2
|
||||
picomatch: 4.0.3
|
||||
postcss: 8.5.6
|
||||
rolldown: 1.0.0-beta.50
|
||||
rolldown: 1.0.0-beta.53
|
||||
tinyglobby: 0.2.15
|
||||
optionalDependencies:
|
||||
'@types/node': 24.10.1
|
||||
fsevents: 2.3.3
|
||||
|
||||
rolldown@1.0.0-beta.50:
|
||||
rolldown@1.0.0-beta.53:
|
||||
dependencies:
|
||||
'@oxc-project/types': 0.97.0
|
||||
'@rolldown/pluginutils': 1.0.0-beta.50
|
||||
'@oxc-project/types': 0.101.0
|
||||
'@rolldown/pluginutils': 1.0.0-beta.53
|
||||
optionalDependencies:
|
||||
'@rolldown/binding-android-arm64': 1.0.0-beta.50
|
||||
'@rolldown/binding-darwin-arm64': 1.0.0-beta.50
|
||||
'@rolldown/binding-darwin-x64': 1.0.0-beta.50
|
||||
'@rolldown/binding-freebsd-x64': 1.0.0-beta.50
|
||||
'@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.50
|
||||
'@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.50
|
||||
'@rolldown/binding-linux-arm64-musl': 1.0.0-beta.50
|
||||
'@rolldown/binding-linux-x64-gnu': 1.0.0-beta.50
|
||||
'@rolldown/binding-linux-x64-musl': 1.0.0-beta.50
|
||||
'@rolldown/binding-openharmony-arm64': 1.0.0-beta.50
|
||||
'@rolldown/binding-wasm32-wasi': 1.0.0-beta.50
|
||||
'@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.50
|
||||
'@rolldown/binding-win32-ia32-msvc': 1.0.0-beta.50
|
||||
'@rolldown/binding-win32-x64-msvc': 1.0.0-beta.50
|
||||
'@rolldown/binding-android-arm64': 1.0.0-beta.53
|
||||
'@rolldown/binding-darwin-arm64': 1.0.0-beta.53
|
||||
'@rolldown/binding-darwin-x64': 1.0.0-beta.53
|
||||
'@rolldown/binding-freebsd-x64': 1.0.0-beta.53
|
||||
'@rolldown/binding-linux-arm-gnueabihf': 1.0.0-beta.53
|
||||
'@rolldown/binding-linux-arm64-gnu': 1.0.0-beta.53
|
||||
'@rolldown/binding-linux-arm64-musl': 1.0.0-beta.53
|
||||
'@rolldown/binding-linux-x64-gnu': 1.0.0-beta.53
|
||||
'@rolldown/binding-linux-x64-musl': 1.0.0-beta.53
|
||||
'@rolldown/binding-openharmony-arm64': 1.0.0-beta.53
|
||||
'@rolldown/binding-wasm32-wasi': 1.0.0-beta.53
|
||||
'@rolldown/binding-win32-arm64-msvc': 1.0.0-beta.53
|
||||
'@rolldown/binding-win32-x64-msvc': 1.0.0-beta.53
|
||||
|
||||
scheduler@0.27.0: {}
|
||||
|
||||
|
||||
@ -172,7 +172,7 @@ function App() {
|
||||
</div>
|
||||
<ShaderBackground theme={theme} />
|
||||
<Routes>
|
||||
<Route path="/" element={<PersonList people={people} onShowToast={addToast} />} />
|
||||
<Route path="/" element={<PersonList people={people} loading={isLoading} onShowToast={addToast} />} />
|
||||
<Route path="/games" element={<GameList onShowToast={addToast} />} />
|
||||
<Route path="/filter" element={<GameFilter />} />
|
||||
<Route path="/person/:name" element={<PersonDetails />} />
|
||||
|
||||
48
frontend/src/ErrorBoundary.tsx
Normal file
48
frontend/src/ErrorBoundary.tsx
Normal file
@ -0,0 +1,48 @@
|
||||
import { Component, type ErrorInfo, type ReactNode } from "react";
|
||||
import { ErrorState } from "./components/EmptyState";
|
||||
|
||||
interface Props {
|
||||
children: ReactNode;
|
||||
fallback?: ReactNode;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
export class ErrorBoundary extends Component<Props, State> {
|
||||
public state: State = {
|
||||
hasError: false,
|
||||
error: null
|
||||
};
|
||||
|
||||
public static getDerivedStateFromError(error: Error): State {
|
||||
return { hasError: true, error };
|
||||
}
|
||||
|
||||
public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
|
||||
console.error("ErrorBoundary caught an error:", error, errorInfo);
|
||||
}
|
||||
|
||||
public handleReset = () => {
|
||||
this.setState({ hasError: false, error: null });
|
||||
};
|
||||
|
||||
public render() {
|
||||
if (this.state.hasError) {
|
||||
if (this.props.fallback) {
|
||||
return this.props.fallback;
|
||||
}
|
||||
|
||||
return (
|
||||
<ErrorState
|
||||
message={this.state.error?.message || "An unexpected error occurred"}
|
||||
onRetry={this.handleReset}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return this.props.children;
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { Game, Source } from "../items";
|
||||
import { apiFetch, get_is_admin } from "./api";
|
||||
import { LoadingState, EmptyState, ErrorState } from "./components/EmptyState";
|
||||
|
||||
interface Props {
|
||||
onShowToast?: (message: string, type?: "success" | "error" | "info") => void;
|
||||
@ -11,26 +12,32 @@ export function GameDetails({ onShowToast }: Props) {
|
||||
const { title } = useParams<{ title: string }>();
|
||||
const navigate = useNavigate();
|
||||
const [game, setGame] = useState<Game | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [loading, setLoading] = useState(!!title);
|
||||
const [error, setError] = useState<string | null>(title ? null : "Game title is missing");
|
||||
|
||||
const isAdmin = get_is_admin();
|
||||
|
||||
useEffect(() => {
|
||||
if (!title) return;
|
||||
|
||||
apiFetch(`/api/game/${encodeURIComponent(title)}`)
|
||||
.then(async (res) => {
|
||||
if (!res.ok) throw new Error("Game not found");
|
||||
return Game.decode(new Uint8Array(await res.arrayBuffer()));
|
||||
})
|
||||
.then((data) => {
|
||||
setGame(data);
|
||||
setLoading(false);
|
||||
})
|
||||
.catch((err) => {
|
||||
(async () => {
|
||||
try {
|
||||
const res = await apiFetch(`/api/game/${encodeURIComponent(title)}`);
|
||||
if (!res.ok) {
|
||||
if (res.status === 404) {
|
||||
throw new Error("Game not found");
|
||||
}
|
||||
throw new Error("Failed to load game");
|
||||
}
|
||||
const buffer = await res.arrayBuffer();
|
||||
setGame(Game.decode(new Uint8Array(buffer)));
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
setError(err instanceof Error ? err.message : "Failed to load game");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
});
|
||||
}
|
||||
})();
|
||||
}, [title]);
|
||||
|
||||
const handleDelete = async () => {
|
||||
@ -59,8 +66,9 @@ export function GameDetails({ onShowToast }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div>Loading...</div>;
|
||||
if (!game) return <div>Game not found</div>;
|
||||
if (loading) return <LoadingState message="Loading game details..." />;
|
||||
if (error) return <ErrorState message={error} onRetry={() => window.location.reload()} />;
|
||||
if (!game) return <EmptyState icon="🎮" title="Game not found" description="This game doesn't exist or has been deleted" />;
|
||||
|
||||
const getExternalLink = () => {
|
||||
if (game.source === Source.STEAM) {
|
||||
|
||||
@ -5,9 +5,11 @@ import "./GameFilter.css";
|
||||
import { useGameFilter } from "./hooks/useGameFilter";
|
||||
import { PersonSelector } from "./components/PersonSelector";
|
||||
import { FilteredGamesList } from "./components/FilteredGamesList";
|
||||
import { LoadingState } from "./components/EmptyState";
|
||||
|
||||
export function GameFilter() {
|
||||
const [people, setPeople] = useState<Person[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedPeople, setSelectedPeople] = useState<Set<string>>(new Set());
|
||||
|
||||
const { filteredGames, gameToPositive } = useGameFilter(
|
||||
@ -16,15 +18,22 @@ export function GameFilter() {
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
apiFetch("/api")
|
||||
.then((res) => res.arrayBuffer())
|
||||
.then((buffer) => {
|
||||
(async () => {
|
||||
try {
|
||||
const res = await apiFetch("/api");
|
||||
const buffer = await res.arrayBuffer();
|
||||
const list = PersonListProto.decode(new Uint8Array(buffer));
|
||||
setPeople(list.person);
|
||||
})
|
||||
.catch((err) => console.error("Failed to fetch people:", err));
|
||||
} catch (err) {
|
||||
console.error("Failed to fetch people:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}, []);
|
||||
|
||||
if (loading) return <LoadingState message="Loading people..." />;
|
||||
|
||||
const togglePerson = (name: string) => {
|
||||
const newSelected = new Set(selectedPeople);
|
||||
if (newSelected.has(name)) {
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { useState, useEffect, useMemo, useCallback } from "react";
|
||||
import {
|
||||
Game,
|
||||
Source,
|
||||
@ -12,6 +12,7 @@ import { Link, useLocation } from "react-router-dom";
|
||||
import { apiFetch, get_auth_status } from "./api";
|
||||
import { GameImage } from "./GameImage";
|
||||
import type { ToastType } from "./Toast";
|
||||
import { EmptyState } from "./components/EmptyState";
|
||||
|
||||
interface Props {
|
||||
onShowToast?: (message: string, type?: ToastType) => void;
|
||||
@ -26,10 +27,22 @@ export function GameList({ onShowToast }: Props) {
|
||||
const [price, setPrice] = useState(0);
|
||||
const [remoteId, setRemoteId] = useState(0);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [titleError, setTitleError] = useState("");
|
||||
const [playersError, setPlayersError] = useState("");
|
||||
const [remoteIdError, setRemoteIdError] = useState("");
|
||||
const [opinions, setOpinions] = useState<Opinion[]>([]);
|
||||
const [gamesLoading, setGamesLoading] = useState(true);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
const fetchGames = () => {
|
||||
const filteredGames = useMemo(() => {
|
||||
if (!searchQuery) return games;
|
||||
return games.filter(game =>
|
||||
game.title.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
}, [games, searchQuery]);
|
||||
|
||||
const fetchGames = useCallback(() => {
|
||||
setGamesLoading(true);
|
||||
apiFetch("/api/games")
|
||||
.then((res) => res.arrayBuffer())
|
||||
.then((buffer) => {
|
||||
@ -38,10 +51,15 @@ export function GameList({ onShowToast }: Props) {
|
||||
setGames(list.games);
|
||||
} catch (e) {
|
||||
console.error("Failed to decode games:", e);
|
||||
onShowToast?.("Failed to load games", "error");
|
||||
}
|
||||
})
|
||||
.catch(console.error);
|
||||
};
|
||||
.catch((err) => {
|
||||
console.error(err);
|
||||
onShowToast?.("Failed to fetch games", "error");
|
||||
})
|
||||
.finally(() => setGamesLoading(false));
|
||||
}, [onShowToast]);
|
||||
|
||||
useEffect(() => {
|
||||
get_auth_status().then((user) => {
|
||||
@ -76,20 +94,42 @@ export function GameList({ onShowToast }: Props) {
|
||||
|
||||
useEffect(() => {
|
||||
fetchGames();
|
||||
}, []);
|
||||
}, [fetchGames]);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (remoteId === 0) {
|
||||
setRemoteIdError("Remote ID must be greater than 0");
|
||||
return;
|
||||
setTitleError("");
|
||||
setPlayersError("");
|
||||
setRemoteIdError("");
|
||||
|
||||
let hasErrors = false;
|
||||
|
||||
if (!title.trim()) {
|
||||
setTitleError("Game title is required");
|
||||
hasErrors = true;
|
||||
}
|
||||
|
||||
setRemoteIdError("");
|
||||
if (minPlayers < 1) {
|
||||
setPlayersError("Minimum players must be at least 1");
|
||||
hasErrors = true;
|
||||
}
|
||||
|
||||
if (maxPlayers < minPlayers) {
|
||||
setPlayersError("Maximum players cannot be less than minimum players");
|
||||
hasErrors = true;
|
||||
}
|
||||
|
||||
if (remoteId === 0) {
|
||||
setRemoteIdError("Remote ID must be greater than 0");
|
||||
hasErrors = true;
|
||||
}
|
||||
|
||||
if (hasErrors) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
const game = {
|
||||
title,
|
||||
title: title.trim(),
|
||||
source,
|
||||
minPlayers,
|
||||
maxPlayers,
|
||||
@ -109,14 +149,11 @@ export function GameList({ onShowToast }: Props) {
|
||||
|
||||
if (res.ok) {
|
||||
onShowToast?.("Game added successfully!", "success");
|
||||
setTitle("");
|
||||
setMinPlayers(1);
|
||||
setMaxPlayers(1);
|
||||
setPrice(0);
|
||||
setRemoteId(0);
|
||||
clearForm();
|
||||
fetchGames();
|
||||
} else {
|
||||
onShowToast?.("Failed to add game. Please try again.", "error");
|
||||
const errorText = await res.text();
|
||||
onShowToast?.(errorText || "Failed to add game. Please try again.", "error");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
@ -126,6 +163,17 @@ export function GameList({ onShowToast }: Props) {
|
||||
}
|
||||
};
|
||||
|
||||
const clearForm = () => {
|
||||
setTitle("");
|
||||
setMinPlayers(1);
|
||||
setMaxPlayers(1);
|
||||
setPrice(0);
|
||||
setRemoteId(0);
|
||||
setTitleError("");
|
||||
setPlayersError("");
|
||||
setRemoteIdError("");
|
||||
};
|
||||
|
||||
const formCardStyles: React.CSSProperties = {
|
||||
background:
|
||||
"linear-gradient(135deg, var(--secondary-bg) 0%, var(--secondary-alt-bg) 100%)",
|
||||
@ -307,12 +355,23 @@ export function GameList({ onShowToast }: Props) {
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
onChange={(e) => {
|
||||
setTitle(e.target.value);
|
||||
if (titleError) setTitleError("");
|
||||
}}
|
||||
required
|
||||
placeholder="Enter game title..."
|
||||
style={inputStyles}
|
||||
style={{
|
||||
...inputStyles,
|
||||
borderColor: titleError ? "#f44336" : undefined
|
||||
}}
|
||||
className="add-game-input"
|
||||
/>
|
||||
{titleError && (
|
||||
<div style={{ color: "#f44336", fontSize: "0.75rem", marginTop: "0.25rem" }}>
|
||||
{titleError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={inputGroupStyles}>
|
||||
@ -352,9 +411,15 @@ export function GameList({ onShowToast }: Props) {
|
||||
<input
|
||||
type="number"
|
||||
value={minPlayers}
|
||||
onChange={(e) => setMinPlayers(Number(e.target.value))}
|
||||
onChange={(e) => {
|
||||
setMinPlayers(Number(e.target.value));
|
||||
if (playersError) setPlayersError("");
|
||||
}}
|
||||
min="1"
|
||||
style={inputStyles}
|
||||
style={{
|
||||
...inputStyles,
|
||||
borderColor: playersError ? "#f44336" : undefined
|
||||
}}
|
||||
className="add-game-input"
|
||||
/>
|
||||
</div>
|
||||
@ -363,13 +428,24 @@ export function GameList({ onShowToast }: Props) {
|
||||
<input
|
||||
type="number"
|
||||
value={maxPlayers}
|
||||
onChange={(e) => setMaxPlayers(Number(e.target.value))}
|
||||
onChange={(e) => {
|
||||
setMaxPlayers(Number(e.target.value));
|
||||
if (playersError) setPlayersError("");
|
||||
}}
|
||||
min="1"
|
||||
style={inputStyles}
|
||||
style={{
|
||||
...inputStyles,
|
||||
borderColor: playersError ? "#f44336" : undefined
|
||||
}}
|
||||
className="add-game-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{playersError && (
|
||||
<div style={{ color: "#f44336", fontSize: "0.75rem", marginTop: "0.25rem" }}>
|
||||
{playersError}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={dividerStyles}></div>
|
||||
@ -425,33 +501,47 @@ export function GameList({ onShowToast }: Props) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
style={submitButtonStyles}
|
||||
className="submit-btn"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
width: "18px",
|
||||
height: "18px",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
borderTopColor: "white",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
}}
|
||||
></span>
|
||||
Adding Game...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span style={{ fontSize: "1.1rem" }}>➕</span>
|
||||
Add Game to Collection
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<div style={{ display: "flex", gap: "0.75rem", marginTop: "1rem" }}>
|
||||
<button
|
||||
type="button"
|
||||
onClick={clearForm}
|
||||
disabled={isSubmitting || (!title && minPlayers === 1 && maxPlayers === 1 && price === 0 && remoteId === 0)}
|
||||
style={{
|
||||
...submitButtonStyles,
|
||||
background: "var(--tertiary-bg)",
|
||||
flex: 1
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
style={submitButtonStyles}
|
||||
className="submit-btn"
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
width: "18px",
|
||||
height: "18px",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
borderTopColor: "white",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
}}
|
||||
></span>
|
||||
Adding Game...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span style={{ fontSize: "1.1rem" }}>➕</span>
|
||||
Add Game to Collection
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@ -465,16 +555,89 @@ export function GameList({ onShowToast }: Props) {
|
||||
</style>
|
||||
|
||||
<div style={{ marginTop: "3rem" }}>
|
||||
<h3
|
||||
id="existing-games"
|
||||
<div
|
||||
style={{
|
||||
scrollMarginBottom: "0",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
flexWrap: "wrap",
|
||||
gap: "1rem"
|
||||
}}
|
||||
>
|
||||
Existing Games
|
||||
</h3>
|
||||
<ul className="grid-container">
|
||||
{games.map((game) => {
|
||||
<h3
|
||||
id="existing-games"
|
||||
style={{
|
||||
scrollMarginBottom: "0",
|
||||
margin: 0
|
||||
}}
|
||||
>
|
||||
Existing Games {filteredGames.length > 0 && <span style={{ fontSize: "0.7em", color: "var(--text-muted)" }}>({filteredGames.length})</span>}
|
||||
</h3>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="🔍 Search games..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
style={{
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "0.9rem",
|
||||
minWidth: "200px"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
{gamesLoading ? (
|
||||
<div className="grid-container">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
backgroundColor: "var(--secondary-alt-bg)",
|
||||
border: "1px solid var(--border-color)",
|
||||
borderRadius: "5px",
|
||||
padding: "1rem",
|
||||
minHeight: "100px",
|
||||
animation: "shimmer 1.5s infinite"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "70%",
|
||||
height: "20px",
|
||||
backgroundColor: "var(--tertiary-bg)",
|
||||
borderRadius: "4px",
|
||||
marginBottom: "0.75rem",
|
||||
animation: "shimmer 1.5s infinite"
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
width: "40%",
|
||||
height: "40px",
|
||||
backgroundColor: "var(--tertiary-bg)",
|
||||
borderRadius: "8px",
|
||||
marginTop: "0.5rem",
|
||||
animation: "shimmer 1.5s infinite 0.2s"
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
))}
|
||||
<style>{`
|
||||
@keyframes shimmer {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
) : filteredGames.length === 0 ? (
|
||||
<EmptyState
|
||||
icon="🎮"
|
||||
title={searchQuery ? "No games found" : "No games yet"}
|
||||
description={searchQuery ? "Try a different search term" : "Add your first game to get started"}
|
||||
/>
|
||||
) : (
|
||||
<ul className="grid-container">
|
||||
{filteredGames.map((game) => {
|
||||
const opinion = opinions.find((op) => op.title === game.title);
|
||||
function handleOpinion(title: string, number: number): void {
|
||||
if (number == 2) {
|
||||
@ -628,6 +791,7 @@ export function GameList({ onShowToast }: Props) {
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -9,13 +9,27 @@ export function Login({ onLogin }: LoginProps) {
|
||||
const [username, setUsername] = useState("");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [fieldErrors, setFieldErrors] = useState<{ username?: string, password?: string }>({});
|
||||
|
||||
const validateForm = () => {
|
||||
const errors: { username?: string, password?: string } = {};
|
||||
if (!username.trim()) errors.username = "Username is required";
|
||||
if (!password) errors.password = "Password is required";
|
||||
setFieldErrors(errors);
|
||||
return Object.keys(errors).length === 0;
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError("");
|
||||
|
||||
if (!validateForm()) return;
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const req = LoginRequest.create({ username, password });
|
||||
const req = LoginRequest.create({ username: username.trim(), password });
|
||||
const body = LoginRequest.encode(req).finish();
|
||||
|
||||
const res = await fetch("/auth/login", {
|
||||
@ -32,45 +46,109 @@ export function Login({ onLogin }: LoginProps) {
|
||||
if (response.success) {
|
||||
onLogin(response.token);
|
||||
} else {
|
||||
setError(response.message);
|
||||
setError(response.message || "Login failed");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Login error:", err);
|
||||
setError("Failed to login");
|
||||
setError("An unexpected error occurred. Please try again.");
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card" style={{ maxWidth: "400px", margin: "4rem auto" }}>
|
||||
<h2 style={{ textAlign: "center", marginBottom: "2rem" }}>Login</h2>
|
||||
<h2 style={{ textAlign: "center", marginBottom: "2rem" }}>🎮 Login</h2>
|
||||
<form onSubmit={handleSubmit} className="form-group">
|
||||
<div className="form-group">
|
||||
<label>Username</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
onChange={(e) => {
|
||||
setUsername(e.target.value);
|
||||
if (fieldErrors.username) setFieldErrors({ ...fieldErrors, username: undefined });
|
||||
}}
|
||||
placeholder="Enter your username"
|
||||
style={{
|
||||
borderColor: fieldErrors.username ? "#f44336" : undefined,
|
||||
borderWidth: fieldErrors.username ? "2px" : undefined
|
||||
}}
|
||||
/>
|
||||
{fieldErrors.username && (
|
||||
<span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
|
||||
{fieldErrors.username}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
onChange={(e) => {
|
||||
setPassword(e.target.value);
|
||||
if (fieldErrors.password) setFieldErrors({ ...fieldErrors, password: undefined });
|
||||
}}
|
||||
placeholder="Enter your password"
|
||||
style={{
|
||||
borderColor: fieldErrors.password ? "#f44336" : undefined,
|
||||
borderWidth: fieldErrors.password ? "2px" : undefined
|
||||
}}
|
||||
/>
|
||||
{fieldErrors.password && (
|
||||
<span style={{ color: "#f44336", fontSize: "0.85rem", marginTop: "0.25rem", display: "block" }}>
|
||||
{fieldErrors.password}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<button type="submit" style={{ marginTop: "1rem" }}>
|
||||
Login
|
||||
<button
|
||||
type="submit"
|
||||
style={{ marginTop: "1rem", width: "100%", opacity: isSubmitting ? 0.7 : 1, cursor: isSubmitting ? "not-allowed" : "pointer" }}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
width: "14px",
|
||||
height: "14px",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
borderTopColor: "white",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
display: "inline-block",
|
||||
marginRight: "0.5rem"
|
||||
}}
|
||||
></span>
|
||||
Logging in...
|
||||
</>
|
||||
) : (
|
||||
"Login"
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
{error && (
|
||||
<p style={{ color: "#ff6b6b", marginTop: "1rem", textAlign: "center" }}>
|
||||
{error}
|
||||
</p>
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "rgba(244, 67, 54, 0.1)",
|
||||
border: "1px solid rgba(244, 67, 54, 0.3)",
|
||||
color: "#ff6b6b",
|
||||
padding: "1rem",
|
||||
borderRadius: "8px",
|
||||
marginTop: "1rem",
|
||||
textAlign: "center",
|
||||
fontSize: "0.9rem"
|
||||
}}
|
||||
>
|
||||
⚠️ {error}
|
||||
</div>
|
||||
)}
|
||||
<style>{`
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -3,53 +3,71 @@ import { Link, useParams } from "react-router-dom";
|
||||
import { Person } from "../items";
|
||||
import { apiFetch } from "./api";
|
||||
import { GameImage } from "./GameImage";
|
||||
import { LoadingState, EmptyState } from "./components/EmptyState";
|
||||
|
||||
export const PersonDetails = () => {
|
||||
const { name } = useParams<{ name: string }>();
|
||||
const [person, setPerson] = useState<Person | null>(null);
|
||||
const [loading, setLoading] = useState(!!name);
|
||||
const [error, setError] = useState<string | null>(name ? null : "Person name is missing");
|
||||
|
||||
useEffect(() => {
|
||||
if (name) {
|
||||
apiFetch(`/api/${name}`)
|
||||
.then((res) => res.arrayBuffer())
|
||||
.then((buffer) => {
|
||||
try {
|
||||
setPerson(Person.decode(new Uint8Array(buffer)));
|
||||
} catch (e) {
|
||||
console.error("Failed to decode person:", e);
|
||||
}
|
||||
})
|
||||
.catch(console.error);
|
||||
}
|
||||
if (!name) return;
|
||||
|
||||
(async () => {
|
||||
try {
|
||||
const res = await apiFetch(`/api/${name}`);
|
||||
if (!res.ok) {
|
||||
throw new Error("Person not found");
|
||||
}
|
||||
const buffer = await res.arrayBuffer();
|
||||
setPerson(Person.decode(new Uint8Array(buffer)));
|
||||
} catch (e) {
|
||||
console.error("Failed to decode person:", e);
|
||||
setError(e instanceof Error ? e.message : "Failed to load person data");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
})();
|
||||
}, [name]);
|
||||
|
||||
if (!person) return <div>Loading...</div>;
|
||||
if (loading) return <LoadingState message="Loading person details..." />;
|
||||
if (error) return <EmptyState icon="⚠️" title="Error" description={error} />;
|
||||
if (!person) return <EmptyState icon="👤" title="Person not found" description="This person doesn't exist" />;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div style={{ marginBottom: "2rem" }}>
|
||||
<h2>{person.name}</h2>
|
||||
<ul className="grid-container">
|
||||
{person.opinion.map((op, i) => (
|
||||
<Link
|
||||
to={`/game/${encodeURIComponent(op.title)}`}
|
||||
key={i}
|
||||
className="list-item"
|
||||
style={{
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
borderColor: op.wouldPlay ? "#4caf50" : "#f44336",
|
||||
}}
|
||||
>
|
||||
<strong>{op.title}</strong>
|
||||
{person.opinion.length === 0 ? (
|
||||
<EmptyState
|
||||
icon="🎮"
|
||||
title="No opinions yet"
|
||||
description={`${person.name} hasn't shared any game opinions`}
|
||||
/>
|
||||
) : (
|
||||
<ul className="grid-container">
|
||||
{person.opinion.map((op, i) => (
|
||||
<Link
|
||||
to={`/game/${encodeURIComponent(op.title)}`}
|
||||
key={i}
|
||||
className="list-item"
|
||||
style={{
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
borderColor: op.wouldPlay ? "#4caf50" : "#f44336",
|
||||
}}
|
||||
>
|
||||
<strong>{op.title}</strong>
|
||||
|
||||
<GameImage game={op.title} />
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
<GameImage game={op.title} />
|
||||
</Link>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -1,24 +1,36 @@
|
||||
import { Person } from "../items";
|
||||
import { Link } from "react-router-dom";
|
||||
import { useState } from "react";
|
||||
import { useState, useEffect, useMemo } from "react";
|
||||
import { get_auth_status, refresh_state, get_is_admin } from "./api";
|
||||
import type { ToastType } from "./Toast";
|
||||
import { EmptyState } from "./components/EmptyState";
|
||||
import "./PersonList.css"
|
||||
|
||||
interface Props {
|
||||
people: Person[];
|
||||
loading?: boolean;
|
||||
onShowToast?: (message: string, type?: ToastType) => void;
|
||||
}
|
||||
|
||||
export const PersonList = ({ people, onShowToast }: Props) => {
|
||||
export const PersonList = ({ people, loading = false, onShowToast }: Props) => {
|
||||
const [current_user, set_current_user] = useState<string>("");
|
||||
const [isRefreshing, setIsRefreshing] = useState(false);
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
||||
get_auth_status().then((res) => {
|
||||
if (res) {
|
||||
set_current_user(res.username);
|
||||
}
|
||||
});
|
||||
useEffect(() => {
|
||||
get_auth_status().then((res) => {
|
||||
if (res) {
|
||||
set_current_user(res.username);
|
||||
}
|
||||
});
|
||||
}, []);
|
||||
|
||||
const filteredPeople = useMemo(() => {
|
||||
if (!searchQuery) return people;
|
||||
return people.filter(person =>
|
||||
person.name.toLowerCase().includes(searchQuery.toLowerCase())
|
||||
);
|
||||
}, [people, searchQuery]);
|
||||
|
||||
const handleRefresh = async () => {
|
||||
setIsRefreshing(true);
|
||||
@ -44,53 +56,136 @@ export const PersonList = ({ people, onShowToast }: Props) => {
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
flexWrap: "wrap",
|
||||
gap: "1rem"
|
||||
}}
|
||||
>
|
||||
<h2>People List</h2>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={isRefreshing}
|
||||
className="btn-secondary"
|
||||
<h2>People List {filteredPeople.length > 0 && <span style={{ fontSize: "0.8em", color: "var(--text-muted)" }}>({filteredPeople.length})</span>}</h2>
|
||||
<div style={{ display: "flex", gap: "0.75rem", alignItems: "center" }}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="🔍 Search people..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
style={{
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "0.9rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
opacity: isRefreshing ? 0.7 : 1,
|
||||
cursor: isRefreshing ? "not-allowed" : "pointer",
|
||||
minWidth: "200px"
|
||||
}}
|
||||
>
|
||||
{isRefreshing ? (
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
width: "14px",
|
||||
height: "14px",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
borderTopColor: "currentColor",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
}}
|
||||
></span>
|
||||
Refreshing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>🔄</span>
|
||||
Refresh from File
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
/>
|
||||
{isAdmin && (
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
disabled={isRefreshing}
|
||||
className="btn-secondary"
|
||||
style={{
|
||||
padding: "0.5rem 1rem",
|
||||
fontSize: "0.9rem",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.5rem",
|
||||
opacity: isRefreshing ? 0.7 : 1,
|
||||
cursor: isRefreshing ? "not-allowed" : "pointer",
|
||||
}}
|
||||
>
|
||||
{isRefreshing ? (
|
||||
<>
|
||||
<span
|
||||
style={{
|
||||
width: "14px",
|
||||
height: "14px",
|
||||
border: "2px solid rgba(255,255,255,0.3)",
|
||||
borderTopColor: "currentColor",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
}}
|
||||
></span>
|
||||
Refreshing...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<span>🔄</span>
|
||||
Refresh from File
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid-container">
|
||||
{people.map((person, index) => {
|
||||
if (person.name.toLowerCase() === current_user.toLowerCase()) {
|
||||
{loading ? (
|
||||
<div className="grid-container">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
backgroundColor: "var(--secondary-alt-bg)",
|
||||
border: "1px solid var(--border-color)",
|
||||
borderRadius: "5px",
|
||||
padding: "10px",
|
||||
minHeight: "60px",
|
||||
animation: "shimmer 1.5s infinite"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "60%",
|
||||
height: "20px",
|
||||
backgroundColor: "var(--tertiary-bg)",
|
||||
borderRadius: "4px",
|
||||
marginBottom: "0.5rem",
|
||||
animation: "shimmer 1.5s infinite"
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
width: "40%",
|
||||
height: "16px",
|
||||
backgroundColor: "var(--tertiary-bg)",
|
||||
borderRadius: "4px",
|
||||
animation: "shimmer 1.5s infinite 0.2s"
|
||||
}}
|
||||
></div>
|
||||
</div>
|
||||
))}
|
||||
<style>{`
|
||||
@keyframes shimmer {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
) : filteredPeople.length === 0 ? (
|
||||
<EmptyState
|
||||
icon="👥"
|
||||
title={searchQuery ? "No people found" : "No people in list"}
|
||||
description={searchQuery ? "Try a different search term" : "Add people to get started"}
|
||||
/>
|
||||
) : (
|
||||
<div className="grid-container">
|
||||
{filteredPeople.map((person, index) => {
|
||||
if (person.name.toLowerCase() === current_user.toLowerCase()) {
|
||||
return (
|
||||
<Link
|
||||
to={`/games#existing-games`}
|
||||
key={index}
|
||||
className="list-item"
|
||||
style={{
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
<h3>{person.name}</h3>
|
||||
<div style={{ fontSize: "0.85em", color: "var(--text-muted)", marginTop: "0.25rem" }}>
|
||||
{person.opinion.length} opinion(s)
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`/games#existing-games`}
|
||||
to={`/person/${person.name}`}
|
||||
key={index}
|
||||
className="list-item"
|
||||
style={{
|
||||
@ -100,26 +195,14 @@ export const PersonList = ({ people, onShowToast }: Props) => {
|
||||
}}
|
||||
>
|
||||
<h3>{person.name}</h3>
|
||||
<div style={{ fontSize: "0.85em", color: "var(--text-muted)", marginTop: "0.25rem" }}>
|
||||
{person.opinion.length} opinion(s)
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={`/person/${person.name}`}
|
||||
key={index}
|
||||
className="list-item"
|
||||
style={{
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
display: "block",
|
||||
}}
|
||||
>
|
||||
<h3>{person.name}</h3>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
91
frontend/src/components/EmptyState.tsx
Normal file
91
frontend/src/components/EmptyState.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
import type { ReactNode } from "react";
|
||||
|
||||
interface EmptyStateProps {
|
||||
icon?: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
action?: ReactNode;
|
||||
}
|
||||
|
||||
export function EmptyState({ icon = "📭", title, description, action }: EmptyStateProps) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "3rem 2rem",
|
||||
textAlign: "center",
|
||||
background: "var(--secondary-alt-bg)",
|
||||
borderRadius: "16px",
|
||||
border: "1px dashed var(--border-color)",
|
||||
color: "var(--text-muted)"
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: "3rem", marginBottom: "1rem" }}>{icon}</div>
|
||||
<h3 style={{ margin: "0 0 0.5rem 0", color: "var(--text-color)" }}>{title}</h3>
|
||||
{description && <p style={{ margin: "0 0 1.5rem 0", fontSize: "0.95rem" }}>{description}</p>}
|
||||
{action}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LoadingState({ message = "Loading..." }: { message?: string }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "3rem 2rem",
|
||||
textAlign: "center"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "40px",
|
||||
height: "40px",
|
||||
border: "4px solid rgba(255, 255, 255, 0.2)",
|
||||
borderTopColor: "currentColor",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite",
|
||||
margin: "0 auto 1rem"
|
||||
}}
|
||||
></div>
|
||||
<p style={{ color: "var(--text-muted)", margin: 0 }}>{message}</p>
|
||||
<style>{`
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ErrorState({ message, onRetry }: { message: string, onRetry?: () => void }) {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "3rem 2rem",
|
||||
textAlign: "center",
|
||||
background: "rgba(244, 67, 54, 0.1)",
|
||||
borderRadius: "16px",
|
||||
border: "1px solid rgba(244, 67, 54, 0.3)"
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: "3rem", marginBottom: "1rem" }}>⚠️</div>
|
||||
<h3 style={{ margin: "0 0 0.5rem 0", color: "var(--text-color)" }}>Something went wrong</h3>
|
||||
<p style={{ margin: "0 0 1.5rem 0", color: "var(--text-muted)", fontSize: "0.95rem" }}>{message}</p>
|
||||
{onRetry && (
|
||||
<button
|
||||
onClick={onRetry}
|
||||
style={{
|
||||
background: "var(--accent-color)",
|
||||
border: "none",
|
||||
padding: "0.75rem 1.5rem",
|
||||
borderRadius: "8px",
|
||||
color: "white",
|
||||
fontWeight: 600,
|
||||
cursor: "pointer"
|
||||
}}
|
||||
>
|
||||
🔄 Try Again
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { GameImage } from "../GameImage";
|
||||
import { EmptyState } from "./EmptyState";
|
||||
|
||||
interface FilteredGamesListProps {
|
||||
filteredGames: string[];
|
||||
@ -12,7 +13,15 @@ export function FilteredGamesList({
|
||||
gameToPositive,
|
||||
selectedPeopleCount,
|
||||
}: FilteredGamesListProps) {
|
||||
if (selectedPeopleCount === 0) return null;
|
||||
if (selectedPeopleCount === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon="👥"
|
||||
title="Select people to find games"
|
||||
description="Choose one or more people from the list above to see games they would play"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
@ -66,29 +75,12 @@ export function FilteredGamesList({
|
||||
})}
|
||||
</ul>
|
||||
) : (
|
||||
<EmptyState />
|
||||
<EmptyState
|
||||
icon="🔍"
|
||||
title="No games found"
|
||||
description="Try selecting fewer people or adding more opinions"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
padding: "3rem",
|
||||
textAlign: "center",
|
||||
background: "var(--secondary-alt-bg)",
|
||||
borderRadius: "16px",
|
||||
border: "1px dashed var(--border-color)",
|
||||
color: "var(--text-muted)",
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: "2rem", marginBottom: "1rem" }}>🔍</div>
|
||||
<p>No games found where all selected people would play.</p>
|
||||
<p style={{ fontSize: "0.9rem" }}>
|
||||
Try selecting fewer people or adding more opinions!
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
28
frontend/src/components/LoadingSpinner.tsx
Normal file
28
frontend/src/components/LoadingSpinner.tsx
Normal file
@ -0,0 +1,28 @@
|
||||
export function LoadingSpinner({ size = "medium", text }: { size?: "small" | "medium" | "large", text?: string }) {
|
||||
const sizeMap = {
|
||||
small: "16px",
|
||||
medium: "24px",
|
||||
large: "32px"
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}>
|
||||
<div
|
||||
style={{
|
||||
width: sizeMap[size],
|
||||
height: sizeMap[size],
|
||||
border: `${parseInt(sizeMap[size]) / 4}px solid rgba(255, 255, 255, 0.2)`,
|
||||
borderTopColor: "currentColor",
|
||||
borderRadius: "50%",
|
||||
animation: "spin 0.8s linear infinite"
|
||||
}}
|
||||
></div>
|
||||
{text && <span style={{ color: "var(--text-muted)", fontSize: "0.9rem" }}>{text}</span>}
|
||||
<style>{`
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
65
frontend/src/components/SkeletonLoader.tsx
Normal file
65
frontend/src/components/SkeletonLoader.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
export function SkeletonLoader({ width, height, count = 1 }: { width?: string | number, height?: string | number, count?: number }) {
|
||||
return (
|
||||
<>
|
||||
{Array.from({ length: count }).map((_, i) => (
|
||||
<div
|
||||
key={i}
|
||||
style={{
|
||||
width: width || "100%",
|
||||
height: height || "60px",
|
||||
backgroundColor: "var(--secondary-alt-bg)",
|
||||
borderRadius: "8px",
|
||||
animation: "shimmer 1.5s infinite",
|
||||
marginBottom: count > 1 ? "1rem" : undefined
|
||||
}}
|
||||
></div>
|
||||
))}
|
||||
<style>{`
|
||||
@keyframes shimmer {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
`}</style>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardSkeleton() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
backgroundColor: "var(--secondary-alt-bg)",
|
||||
border: "1px solid var(--border-color)",
|
||||
borderRadius: "5px",
|
||||
padding: "10px",
|
||||
minHeight: "80px"
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: "60%",
|
||||
height: "20px",
|
||||
backgroundColor: "var(--tertiary-bg)",
|
||||
borderRadius: "4px",
|
||||
marginBottom: "0.5rem",
|
||||
animation: "shimmer 1.5s infinite"
|
||||
}}
|
||||
></div>
|
||||
<div
|
||||
style={{
|
||||
width: "40%",
|
||||
height: "16px",
|
||||
backgroundColor: "var(--tertiary-bg)",
|
||||
borderRadius: "4px",
|
||||
animation: "shimmer 1.5s infinite 0.2s"
|
||||
}}
|
||||
></div>
|
||||
<style>{`
|
||||
@keyframes shimmer {
|
||||
0%, 100% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -2,9 +2,12 @@ import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
import { ErrorBoundary } from './ErrorBoundary'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
<ErrorBoundary>
|
||||
<App />
|
||||
</ErrorBoundary>
|
||||
</StrictMode>,
|
||||
)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user