smedmunds/TriggerFrontend
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Wiki Activity

State management

Browse Source
This commit is contained in:
Sean Edmunds
2025-05-02 14:50:14 -05:00
parent 16787969fc
commit 97a59d6a15
21 changed files with 525 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
biome.json
View File

@@ -1,5 +1,4 @@
{
"$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
"organizeImports": {
"enabled": true
},

2
index.html
View File

@@ -3,6 +3,8 @@
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/gun.jpg" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap" rel="stylesheet"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Pull the Trigger</title>
</head>

220
package-lock.json generated
View File

@@ -9,27 +9,27 @@
"version": "0.1.0",
"dependencies": {
"@hello-pangea/dnd": "^18.0.1",
"@mantine/core": "^7.17.5",
"@mantine/hooks": "^7.17.5",
"@mantine/notifications": "^7.17.5",
"@tanstack/react-query": "^5.74.4",
"@tanstack/react-query-devtools": "^5.74.6",
"@tanstack/react-query-persist-client": "^5.74.6",
"@mantine/core": "^7.17.7",
"@mantine/hooks": "^7.17.7",
"@mantine/notifications": "^7.17.7",
"@tanstack/react-query": "^5.75.1",
"@tanstack/react-query-devtools": "^5.75.1",
"@tanstack/react-query-persist-client": "^5.75.1",
"idb-keyval": "^6.2.1",
"jotai": "^2.12.3",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",
"react-query": "^3.39.3",
"react-router-dom": "^7.5.2",
"react-router-dom": "^7.5.3",
"recharts": "^2.15.3"
},
"devDependencies": {
"@types/node": "^22.15.2",
"@types/node": "^22.15.3",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@typescript-eslint/eslint-plugin": "^8.31.0",
"@typescript-eslint/parser": "^8.31.0",
"@types/react-dom": "^19.1.3",
"@typescript-eslint/eslint-plugin": "^8.31.1",
"@typescript-eslint/parser": "^8.31.1",
"@vitejs/plugin-react": "^4.4.1",
"@vitest/coverage-v8": "^3.1.2",
"@vitest/ui": "^3.1.2",
@@ -37,7 +37,7 @@
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"typescript": "^5.8.3",
"vite": "^6.3.3",
"vite": "^6.3.4",
"vite-plugin-dts": "~4.5.3",
"vite-plugin-eslint": "^1.8.1",
"vite-tsconfig-paths": "^5.1.4",
@@ -1198,9 +1198,9 @@
}
},
"node_modules/@mantine/core": {
"version": "7.17.5",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.17.5.tgz",
"integrity": "sha512-66g/lr281cDPfucjtPw8gFo/yNS9G5iSKqysvPGuDpUBG2bEw8FsJMIsU0bMXtravToIpa3vJRrFUuPndPGnpQ==",
"version": "7.17.7",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.17.7.tgz",
"integrity": "sha512-JMyV4/jPATXxmE31g8TJxsrH7XvdrA5pwT4gg25zBl1KE5vLBpBLLjsHG728+bDKuf+bDV+8lw+1kqgW7FcplQ==",
"license": "MIT",
"dependencies": {
"@floating-ui/react": "^0.26.28",
@@ -1211,40 +1211,40 @@
"type-fest": "^4.27.0"
},
"peerDependencies": {
"@mantine/hooks": "7.17.5",
"@mantine/hooks": "7.17.7",
"react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x"
}
},
"node_modules/@mantine/hooks": {
"version": "7.17.5",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.17.5.tgz",
"integrity": "sha512-Q/3AHI1fjl+W7xQ3jEoMmSoTxLqxMI2gPfxIjd73OPmRpPenYWR1zk/diirXXm2t7JOrAbmpA3/O1gzmgqzc/Q==",
"version": "7.17.7",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.17.7.tgz",
"integrity": "sha512-5MIvN/YAcewc97nG3jVrlnFqAExnJRBNWmV6UgGHWbiZiPSCh5o2RJE/5ZVGSfkexDpav9gkm2jkWkIbemVqVA==",
"license": "MIT",
"peerDependencies": {
"react": "^18.x || ^19.x"
}
},
"node_modules/@mantine/notifications": {
"version": "7.17.5",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-7.17.5.tgz",
"integrity": "sha512-dLbrSm7ct97fb0Yv8ImVj9mVNkjnD/xkDCP1PANt/shM9xDh0TguqQTvborb+8Wxh1g+RtWVML/an5rVsHbKmg==",
"version": "7.17.7",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-7.17.7.tgz",
"integrity": "sha512-T6m4uUPEkPcTdo7J29lDey5YDJkVh/t6kWaCGQ0xDX1tzGGGPtaf1Exj1N0EtrIetbXPuEE8+yvq5P7wUJ3t9w==",
"license": "MIT",
"dependencies": {
"@mantine/store": "7.17.5",
"@mantine/store": "7.17.7",
"react-transition-group": "4.4.5"
},
"peerDependencies": {
"@mantine/core": "7.17.5",
"@mantine/hooks": "7.17.5",
"@mantine/core": "7.17.7",
"@mantine/hooks": "7.17.7",
"react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x"
}
},
"node_modules/@mantine/store": {
"version": "7.17.5",
"resolved": "https://registry.npmjs.org/@mantine/store/-/store-7.17.5.tgz",
"integrity": "sha512-HQzy4rBlUFyw+39TgiAV+TGuQivMWYeQlnMctKJlaxwVY5ZTdF2IpJ/JZcjkGrmrZvBwUQ8IOMFvt2eZc20P1Q==",
"version": "7.17.7",
"resolved": "https://registry.npmjs.org/@mantine/store/-/store-7.17.7.tgz",
"integrity": "sha512-a2XmX6/ixuT+q1H7uNZq3opKZWlxS67XWU2fxCc/E/XHbzik25i2oj9inFpIZMT7UmhUkxj4/pbJQGMs3T5liw==",
"license": "MIT",
"peerDependencies": {
"react": "^18.x || ^19.x"
@@ -1876,9 +1876,9 @@
}
},
"node_modules/@tanstack/query-core": {
"version": "5.74.4",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.74.4.tgz",
"integrity": "sha512-YuG0A0+3i9b2Gfo9fkmNnkUWh5+5cFhWBN0pJAHkHilTx6A0nv8kepkk4T4GRt4e5ahbtFj2eTtkiPcVU1xO4A==",
"version": "5.75.0",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.75.0.tgz",
"integrity": "sha512-rk8KQuCdhoRkzjRVF3QxLgAfFUyS0k7+GCQjlGEpEGco+qazJ0eMH6aO1DjDjibH7/ik383nnztua3BG+lOnwg==",
"license": "MIT",
"funding": {
"type": "github",
@@ -1886,9 +1886,9 @@
}
},
"node_modules/@tanstack/query-devtools": {
"version": "5.74.6",
"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.74.6.tgz",
"integrity": "sha512-djaFT11mVCOW3e0Ezfyiq7T6OoHy2LRI1fUFQvj+G6+/4A1FkuRMNUhQkdP1GXlx8id0f1/zd5fgDpIy5SU/Iw==",
"version": "5.74.7",
"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.74.7.tgz",
"integrity": "sha512-nSNlfuGdnHf4yB0S+BoNYOE1o3oAH093weAYZolIHfS2stulyA/gWfSk/9H4ZFk5mAAHb5vNqAeJOmbdcGPEQw==",
"license": "MIT",
"funding": {
"type": "github",
@@ -1896,12 +1896,12 @@
}
},
"node_modules/@tanstack/query-persist-client-core": {
"version": "5.74.6",
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.74.6.tgz",
"integrity": "sha512-9OJ4tz4evC53tS4NfxaohctFjE9/sqvK4U5HlUBsBcQRI/fn+75lIpD9RcLIbUPcx78hPC35NSUKD7OX6YNw4Q==",
"version": "5.75.0",
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.75.0.tgz",
"integrity": "sha512-/EeURZCen5hw1u4B7s/UbbwrtvNBX/VNWhR8rNtXvXmY9020YtvRd95SCblUVd8kcia4knPM+T+UThskowKmVA==",
"license": "MIT",
"dependencies": {
"@tanstack/query-core": "5.74.4"
"@tanstack/query-core": "5.75.0"
},
"funding": {
"type": "github",
@@ -1909,12 +1909,12 @@
}
},
"node_modules/@tanstack/react-query": {
"version": "5.74.4",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.74.4.tgz",
"integrity": "sha512-mAbxw60d4ffQ4qmRYfkO1xzRBPUEf/72Dgo3qqea0J66nIKuDTLEqQt0ku++SDFlMGMnB6uKDnEG1xD/TDse4Q==",
"version": "5.75.1",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.75.1.tgz",
"integrity": "sha512-tN+gG+eXCHYm+VpmdXUP1rfE9LUrRzgYozTkBZtJV1/WFM3vwWNKQC8G6b2RKcs+2cPg+hdToZHZfjL3bF4yIQ==",
"license": "MIT",
"dependencies": {
"@tanstack/query-core": "5.74.4"
"@tanstack/query-core": "5.75.0"
},
"funding": {
"type": "github",
@@ -1925,36 +1925,36 @@
}
},
"node_modules/@tanstack/react-query-devtools": {
"version": "5.74.6",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.74.6.tgz",
"integrity": "sha512-vlsDwz4/FsblK0h7VAlXUdJ+9OV+i1n8OLb8CLLAZqu0M9GCnbajytZwsRmns33PXBZ6wQBJ859kg6aajx+e9Q==",
"version": "5.75.1",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.75.1.tgz",
"integrity": "sha512-6S71fJRBlb0adlG5z/OHRqZqtHoPYVCklf/KCnOoZ3vdx9O/K9BLvqeeDeMUkZ6Rak/IupbEbvBsFoUiMHwZiQ==",
"license": "MIT",
"dependencies": {
"@tanstack/query-devtools": "5.74.6"
"@tanstack/query-devtools": "5.74.7"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"@tanstack/react-query": "^5.74.4",
"@tanstack/react-query": "^5.75.1",
"react": "^18 || ^19"
}
},
"node_modules/@tanstack/react-query-persist-client": {
"version": "5.74.6",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.74.6.tgz",
"integrity": "sha512-gGJ+4IKIRWC9JeChBOvGgZj1lQcP3bAT8Kofv1Csx4CbqkyhbALlUkpiUXYyVpeS60acXS6NRAajlfzRtfsE+Q==",
"version": "5.75.1",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.75.1.tgz",
"integrity": "sha512-o7Dqw2Moon+4BtjT0+sizrRP8jFv2CNOOFicRWsmEsjA4qRi6H+9JXYtakayLh4xNhD5V4IDJ1817ZfhBsXqeQ==",
"license": "MIT",
"dependencies": {
"@tanstack/query-persist-client-core": "5.74.6"
"@tanstack/query-persist-client-core": "5.75.0"
},
"funding": {
"type": "github",
"url": "https://github.com/sponsors/tannerlinsley"
},
"peerDependencies": {
"@tanstack/react-query": "^5.74.4",
"@tanstack/react-query": "^5.75.1",
"react": "^18 || ^19"
}
},
@@ -2083,9 +2083,9 @@
"dev": true
},
"node_modules/@types/node": {
"version": "22.15.2",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.2.tgz",
"integrity": "sha512-uKXqKN9beGoMdBfcaTY1ecwz6ctxuJAcUlwE55938g0ZJ8lRxwAZqRz2AJ4pzpt5dHdTPMB863UZ0ESiFUcP7A==",
"version": "22.15.3",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.3.tgz",
"integrity": "sha512-lX7HFZeHf4QG/J7tBZqrCAXwz9J5RD56Y6MpP0eJkka8p+K0RY/yBTW7CYFJ4VGCclxqOLKmiGP5juQc6MKgcw==",
"dev": true,
"license": "MIT",
"dependencies": {
@@ -2103,9 +2103,9 @@
}
},
"node_modules/@types/react-dom": {
"version": "19.1.2",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.2.tgz",
"integrity": "sha512-XGJkWF41Qq305SKWEILa1O8vzhb3aOo3ogBlSmiqNko/WmRb6QIaweuZCXjKygVDXpzXb5wyxKTSOsmkuqj+Qw==",
"version": "19.1.3",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.3.tgz",
"integrity": "sha512-rJXC08OG0h3W6wDMFxQrZF00Kq6qQvw0djHRdzl3U5DnIERz0MRce3WVc7IS6JYBwtaP/DwYtRRjVlvivNveKg==",
"dev": true,
"license": "MIT",
"peerDependencies": {
@@ -2119,17 +2119,17 @@
"license": "MIT"
},
"node_modules/@typescript-eslint/eslint-plugin": {
"version": "8.31.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.31.0.tgz",
"integrity": "sha512-evaQJZ/J/S4wisevDvC1KFZkPzRetH8kYZbkgcTRyql3mcKsf+ZFDV1BVWUGTCAW5pQHoqn5gK5b8kn7ou9aFQ==",
"version": "8.31.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.31.1.tgz",
"integrity": "sha512-oUlH4h1ABavI4F0Xnl8/fOtML/eu8nI2A1nYd+f+55XI0BLu+RIqKoCiZKNo6DtqZBEQm5aNKA20G3Z5w3R6GQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@eslint-community/regexpp": "^4.10.0",
"@typescript-eslint/scope-manager": "8.31.0",
"@typescript-eslint/type-utils": "8.31.0",
"@typescript-eslint/utils": "8.31.0",
"@typescript-eslint/visitor-keys": "8.31.0",
"@typescript-eslint/scope-manager": "8.31.1",
"@typescript-eslint/type-utils": "8.31.1",
"@typescript-eslint/utils": "8.31.1",
"@typescript-eslint/visitor-keys": "8.31.1",
"graphemer": "^1.4.0",
"ignore": "^5.3.1",
"natural-compare": "^1.4.0",
@@ -2149,16 +2149,16 @@
}
},
"node_modules/@typescript-eslint/parser": {
"version": "8.31.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.31.0.tgz",
"integrity": "sha512-67kYYShjBR0jNI5vsf/c3WG4u+zDnCTHTPqVMQguffaWWFs7artgwKmfwdifl+r6XyM5LYLas/dInj2T0SgJyw==",
"version": "8.31.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.31.1.tgz",
"integrity": "sha512-oU/OtYVydhXnumd0BobL9rkJg7wFJ9bFFPmSmB/bf/XWN85hlViji59ko6bSKBXyseT9V8l+CN1nwmlbiN0G7Q==",
"dev": true,
"license": "MIT",
"dependencies": {
"@typescript-eslint/scope-manager": "8.31.0",
"@typescript-eslint/types": "8.31.0",
"@typescript-eslint/typescript-estree": "8.31.0",
"@typescript-eslint/visitor-keys": "8.31.0",
"@typescript-eslint/scope-manager": "8.31.1",
"@typescript-eslint/types": "8.31.1",
"@typescript-eslint/typescript-estree": "8.31.1",
"@typescript-eslint/visitor-keys": "8.31.1",
"debug": "^4.3.4"
},
"engines": {
@@ -2174,14 +2174,14 @@
}
},
"node_modules/@typescript-eslint/scope-manager": {
"version": "8.31.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.31.0.tgz",
"integrity": "sha512-knO8UyF78Nt8O/B64i7TlGXod69ko7z6vJD9uhSlm0qkAbGeRUSudcm0+K/4CrRjrpiHfBCjMWlc08Vav1xwcw==",
"version": "8.31.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.31.1.tgz",
"integrity": "sha512-BMNLOElPxrtNQMIsFHE+3P0Yf1z0dJqV9zLdDxN/xLlWMlXK/ApEsVEKzpizg9oal8bAT5Sc7+ocal7AC1HCVw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@typescript-eslint/types": "8.31.0",
"@typescript-eslint/visitor-keys": "8.31.0"
"@typescript-eslint/types": "8.31.1",
"@typescript-eslint/visitor-keys": "8.31.1"
},
"engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2192,14 +2192,14 @@
}
},
"node_modules/@typescript-eslint/type-utils": {
"version": "8.31.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.31.0.tgz",
"integrity": "sha512-DJ1N1GdjI7IS7uRlzJuEDCgDQix3ZVYVtgeWEyhyn4iaoitpMBX6Ndd488mXSx0xah/cONAkEaYyylDyAeHMHg==",
"version": "8.31.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.31.1.tgz",
"integrity": "sha512-fNaT/m9n0+dpSp8G/iOQ05GoHYXbxw81x+yvr7TArTuZuCA6VVKbqWYVZrV5dVagpDTtj/O8k5HBEE/p/HM5LA==",
"dev": true,
"license": "MIT",
"dependencies": {
"@typescript-eslint/typescript-estree": "8.31.0",
"@typescript-eslint/utils": "8.31.0",
"@typescript-eslint/typescript-estree": "8.31.1",
"@typescript-eslint/utils": "8.31.1",
"debug": "^4.3.4",
"ts-api-utils": "^2.0.1"
},
@@ -2216,9 +2216,9 @@
}
},
"node_modules/@typescript-eslint/types": {
"version": "8.31.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.31.0.tgz",
"integrity": "sha512-Ch8oSjVyYyJxPQk8pMiP2FFGYatqXQfQIaMp+TpuuLlDachRWpUAeEu1u9B/v/8LToehUIWyiKcA/w5hUFRKuQ==",
"version": "8.31.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.31.1.tgz",
"integrity": "sha512-SfepaEFUDQYRoA70DD9GtytljBePSj17qPxFHA/h3eg6lPTqGJ5mWOtbXCk1YrVU1cTJRd14nhaXWFu0l2troQ==",
"dev": true,
"license": "MIT",
"engines": {
@@ -2230,14 +2230,14 @@
}
},
"node_modules/@typescript-eslint/typescript-estree": {
"version": "8.31.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.31.0.tgz",
"integrity": "sha512-xLmgn4Yl46xi6aDSZ9KkyfhhtnYI15/CvHbpOy/eR5NWhK/BK8wc709KKwhAR0m4ZKRP7h07bm4BWUYOCuRpQQ==",
"version": "8.31.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.31.1.tgz",
"integrity": "sha512-kaA0ueLe2v7KunYOyWYtlf/QhhZb7+qh4Yw6Ni5kgukMIG+iP773tjgBiLWIXYumWCwEq3nLW+TUywEp8uEeag==",
"dev": true,
"license": "MIT",
"dependencies": {
"@typescript-eslint/types": "8.31.0",
"@typescript-eslint/visitor-keys": "8.31.0",
"@typescript-eslint/types": "8.31.1",
"@typescript-eslint/visitor-keys": "8.31.1",
"debug": "^4.3.4",
"fast-glob": "^3.3.2",
"is-glob": "^4.0.3",
@@ -2257,16 +2257,16 @@
}
},
"node_modules/@typescript-eslint/utils": {
"version": "8.31.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.31.0.tgz",
"integrity": "sha512-qi6uPLt9cjTFxAb1zGNgTob4x9ur7xC6mHQJ8GwEzGMGE9tYniublmJaowOJ9V2jUzxrltTPfdG2nKlWsq0+Ww==",
"version": "8.31.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.31.1.tgz",
"integrity": "sha512-2DSI4SNfF5T4oRveQ4nUrSjUqjMND0nLq9rEkz0gfGr3tg0S5KB6DhwR+WZPCjzkZl3cH+4x2ce3EsL50FubjQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@eslint-community/eslint-utils": "^4.4.0",
"@typescript-eslint/scope-manager": "8.31.0",
"@typescript-eslint/types": "8.31.0",
"@typescript-eslint/typescript-estree": "8.31.0"
"@typescript-eslint/scope-manager": "8.31.1",
"@typescript-eslint/types": "8.31.1",
"@typescript-eslint/typescript-estree": "8.31.1"
},
"engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2281,13 +2281,13 @@
}
},
"node_modules/@typescript-eslint/visitor-keys": {
"version": "8.31.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.31.0.tgz",
"integrity": "sha512-QcGHmlRHWOl93o64ZUMNewCdwKGU6WItOU52H0djgNmn1EOrhVudrDzXz4OycCRSCPwFCDrE2iIt5vmuUdHxuQ==",
"version": "8.31.1",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.31.1.tgz",
"integrity": "sha512-I+/rgqOVBn6f0o7NDTmAPWWC6NuqhV174lfYvAm9fUaWeiefLdux9/YI3/nLugEn9L8fcSi0XmpKi/r5u0nmpw==",
"dev": true,
"license": "MIT",
"dependencies": {
"@typescript-eslint/types": "8.31.0",
"@typescript-eslint/types": "8.31.1",
"eslint-visitor-keys": "^4.2.0"
},
"engines": {
@@ -4933,9 +4933,9 @@
}
},
"node_modules/react-router": {
"version": "7.5.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.5.2.tgz",
"integrity": "sha512-9Rw8r199klMnlGZ8VAsV/I8WrIF6IyJ90JQUdboupx1cdkgYqwnrYjH+I/nY/7cA1X5zia4mDJqH36npP7sxGQ==",
"version": "7.5.3",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.5.3.tgz",
"integrity": "sha512-3iUDM4/fZCQ89SXlDa+Ph3MevBrozBAI655OAfWQlTm9nBR0IKlrmNwFow5lPHttbwvITZfkeeeZFP6zt3F7pw==",
"license": "MIT",
"dependencies": {
"cookie": "^1.0.1",
@@ -4956,12 +4956,12 @@
}
},
"node_modules/react-router-dom": {
"version": "7.5.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.2.tgz",
"integrity": "sha512-yk1XW8Fj7gK7flpYBXF3yzd2NbX6P7Kxjvs2b5nu1M04rb5pg/Zc4fGdBNTeT4eDYL2bvzWNyKaIMJX/RKHTTg==",
"version": "7.5.3",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.5.3.tgz",
"integrity": "sha512-cK0jSaTyW4jV9SRKAItMIQfWZ/D6WEZafgHuuCb9g+SjhLolY78qc+De4w/Cz9ybjvLzShAmaIMEXt8iF1Cm+A==",
"license": "MIT",
"dependencies": {
"react-router": "7.5.2"
"react-router": "7.5.3"
},
"engines": {
"node": ">=20.0.0"
@@ -5851,9 +5851,9 @@
}
},
"node_modules/vite": {
"version": "6.3.3",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.3.tgz",
"integrity": "sha512-5nXH+QsELbFKhsEfWLkHrvgRpTdGJzqOZ+utSdmPTvwHmvU6ITTm3xx+mRusihkcI8GeC7lCDyn3kDtiki9scw==",
"version": "6.3.4",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.4.tgz",
"integrity": "sha512-BiReIiMS2fyFqbqNT/Qqt4CVITDU9M9vE+DKcVAsB+ZV0wvTKd+3hMbkpxz1b+NmEDMegpVbisKiAZOnvO92Sw==",
"dev": true,
"license": "MIT",
"dependencies": {

24
package.json
View File

@@ -11,27 +11,27 @@
},
"dependencies": {
"@hello-pangea/dnd": "^18.0.1",
"@mantine/core": "^7.17.5",
"@mantine/hooks": "^7.17.5",
"@mantine/notifications": "^7.17.5",
"@tanstack/react-query": "^5.74.4",
"@tanstack/react-query-devtools": "^5.74.6",
"@tanstack/react-query-persist-client": "^5.74.6",
"@mantine/core": "^7.17.7",
"@mantine/hooks": "^7.17.7",
"@mantine/notifications": "^7.17.7",
"@tanstack/react-query": "^5.75.1",
"@tanstack/react-query-devtools": "^5.75.1",
"@tanstack/react-query-persist-client": "^5.75.1",
"idb-keyval": "^6.2.1",
"jotai": "^2.12.3",
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-icons": "^5.5.0",
"react-query": "^3.39.3",
"react-router-dom": "^7.5.2",
"react-router-dom": "^7.5.3",
"recharts": "^2.15.3"
},
"devDependencies": {
"@types/node": "^22.15.2",
"@types/node": "^22.15.3",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@typescript-eslint/eslint-plugin": "^8.31.0",
"@typescript-eslint/parser": "^8.31.0",
"@types/react-dom": "^19.1.3",
"@typescript-eslint/eslint-plugin": "^8.31.1",
"@typescript-eslint/parser": "^8.31.1",
"@vitejs/plugin-react": "^4.4.1",
"@vitest/coverage-v8": "^3.1.2",
"@vitest/ui": "^3.1.2",
@@ -39,7 +39,7 @@
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.20",
"typescript": "^5.8.3",
"vite": "^6.3.3",
"vite": "^6.3.4",
"vite-plugin-dts": "~4.5.3",
"vite-plugin-eslint": "^1.8.1",
"vite-tsconfig-paths": "^5.1.4",

1
src/App.tsx
View File

@@ -19,7 +19,6 @@ import { Loading, MainLayout } from './components';
import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import './index.css';
import { Homepage, Settings } from 'pages';
import type { Theme, ThemePlaylist } from 'types';

3
src/components/WeatherModal/WeatherGraphs.tsx
View File

@@ -29,7 +29,8 @@ export default function WeatherGraphs({
{payload.map((item: any) => (
<Text
key={item.name}
size='sm'
size='md'
c={item.stroke}
>{`${item.name} - ${item.value}${item.unit}`}</Text>
))}
</Stack>

1
src/hooks/useCommonHooks.ts
View File

@@ -41,7 +41,6 @@ export function useCommonHooks() {
key: 'theme',
defaultValue: 'blackboard',
});
const [currentThemePlaylist, setCurrentThemePlaylist] = useLocalStorage<string>({
key: 'themePlaylist',
defaultValue: 'All',

1
src/index.css
View File

@@ -1 +0,0 @@
@import url("https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,400;1,100;1,200&display=swap");

34
src/pages/settings/components/Applications/Applications.tsx
View File

@@ -24,6 +24,7 @@ import * as vsc from 'react-icons/vsc';
import { popoverClasses, selectClasses, textInputClasses } from 'styles';
import type { Application } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import NoItemsFound from '../Shared/NoItemsFound';
import SettingsHeader from '../Shared/SettingsHeader';
import AppSettingsItem from './AppSettingsItem';
import DebouncedApplication from './DebouncedApplication';
@@ -54,6 +55,7 @@ const ApplicationSettings = () => {
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const [dragging, setDragging] = useState(false);
const [isOpen, setIsOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
function onDragEnd(result: any) {
if (!result.destination) {
@@ -81,17 +83,22 @@ const ApplicationSettings = () => {
closeModal();
setNewApplication(defaultApplication);
};
useEffect(() => {
if (applicationData && !isAppsFetching) {
setApplications(
applicationData
.filter((a: Application) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
.filter(
(a: Application) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
a.url.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
a.baseUrl.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.sort((a: Application, b: Application) => (a.index > b.index ? 1 : -1)),
);
}
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [applicationData, isAppsFetching, debouncedSearch]);
useEffect(() => {
@@ -103,7 +110,6 @@ const ApplicationSettings = () => {
});
}
}, [applicationList]);
return (
<Stack w={'100%'}>
<AddItemModal
@@ -253,11 +259,13 @@ const ApplicationSettings = () => {
title={'Applications'}
tooltip={{
title:
'Applications are the applicationData that will be displayed on the homepage.',
'Applications are the app buttons that will be displayed on the homepage.',
highlightList: [
'Applications',
'applicationData',
'application',
'app',
'apps',
'name',
'base url',
'url',
@@ -270,6 +278,8 @@ const ApplicationSettings = () => {
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Applications...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>
@@ -361,7 +371,8 @@ const ApplicationSettings = () => {
align='center'
>
<Grid columns={18} w={'75%'}>
{applications?.map((application: Application) => (
{applications.length > 0 ? (
applications?.map((application: Application) => (
<GridCol span={6} key={application.id}>
<Popover
withArrow
@@ -393,7 +404,16 @@ const ApplicationSettings = () => {
</Popover.Dropdown>
</Popover>
</GridCol>
))}
))
) : (
<GridCol
w={'100%'}
span={18}
style={{ display: 'flex', justifyContent: 'center' }}
>
<NoItemsFound />
</GridCol>
)}
</Grid>
</Stack>
)}

17
src/pages/settings/components/Bookmarks/Bookmarks.tsx
View File

@@ -6,6 +6,7 @@ import { useEffect, useState } from 'react';
import { textInputClasses } from 'styles';
import type { Bookmark, BookmarkGroup } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import NoItemsFound from '../Shared/NoItemsFound';
import SettingsHeader from '../Shared/SettingsHeader';
import DebouncedGroupSettingsItem from './DebouncedGroupSettingsItem';
const BookmarkSettings = () => {
@@ -33,6 +34,7 @@ const BookmarkSettings = () => {
const [searchValue, setSearchValue] = useState('');
const [debouncedGroupSearch] = useDebouncedValue(searchValue, 500);
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [isLoading, setIsLoading] = useState(false);
const handleClose = () => {
setNewGroup(defaultGroup);
@@ -94,6 +96,9 @@ const BookmarkSettings = () => {
);
setGroups(groupList);
}
if (debouncedGroupSearch === searchValue) {
setIsLoading(false);
}
}, [groupData, groupsIsFetched, debouncedGroupSearch]);
useEffect(() => {
@@ -194,6 +199,8 @@ const BookmarkSettings = () => {
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Bookmark Groups...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
{dragging ? (
<DragDropContext onDragEnd={onDragEnd}>
@@ -285,7 +292,8 @@ const BookmarkSettings = () => {
align='center'
>
<Group w={isMobile ? undefined : '75%'} align='start' justify='center'>
{groups?.map((group: BookmarkGroup) => (
{groups.length > 0 ? (
groups?.map((group: BookmarkGroup) => (
<DebouncedGroupSettingsItem
key={group.id}
bookmarkGroup={group}
@@ -294,7 +302,12 @@ const BookmarkSettings = () => {
.sort((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1))}
searchTerm={searchValue}
/>
))}
))
) : (
<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
<NoItemsFound />
</Group>
)}
</Group>
</Stack>
)}

2
src/pages/settings/components/Bookmarks/DebouncedGroupSettingsItem.tsx
View File

@@ -286,7 +286,7 @@ function DebouncedGroupSettingsItem({
>
<Popover.Target>
<Button
className={buttonClasses.tableButton}
className={buttonClasses.newItemButton}
classNames={buttonClasses}
w={'min-content'}
onClick={() => {

21
src/pages/settings/components/Messages/Messages.tsx
View File

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
import { textInputClasses } from 'styles';
import type { Message } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import NoItemsFound from '../Shared/NoItemsFound';
import SettingsHeader from '../Shared/SettingsHeader';
import DebouncedMessage from './DebouncedMessage';
@@ -23,6 +24,7 @@ const MessageSettings = () => {
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const [modalOpened, { open: openModal, close: closeModal }] = useDisclosure(false);
const [isLoading, setIsLoading] = useState(false);
const handleClose = () => {
setNewMessage('');
@@ -38,6 +40,9 @@ const MessageSettings = () => {
),
);
}
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [messageData, isMessagesFetched, debouncedSearch]);
useEffect(() => {
@@ -67,6 +72,8 @@ const MessageSettings = () => {
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Message content...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<AddItemModal
modalOpened={modalOpened}
@@ -122,7 +129,8 @@ const MessageSettings = () => {
align='center'
>
<Grid w={'75%'}>
{messages?.map((message: Message) => (
{messages.length > 0 ? (
messages?.map((message: Message) => (
<GridCol span={isMobile ? 12 : 6} key={message.id}>
<DebouncedMessage
label={`ID# ${message.id}`}
@@ -130,7 +138,16 @@ const MessageSettings = () => {
setMessage={setMessage}
/>
</GridCol>
))}
))
) : (
<GridCol
w={'100%'}
span={12}
style={{ display: 'flex', justifyContent: 'center' }}
>
<NoItemsFound />
</GridCol>
)}
</Grid>
</Stack>
</Stack>

7
src/pages/settings/components/Personalization/Personalization.tsx
View File

@@ -17,8 +17,9 @@ const PersonalizationSettings = () => {
const [personal, setPersonal] = useState<PersonalData>();
const [update, setUpdate] = useState<any>({});
const [debounced] = useDebouncedValue(update, 1000);
const { mutateAsync: editRow } = useMutationAPI();
const { mutateAsync } = useMutationAPI();
const { isMobile } = useCommonHooks();
useEffect(() => {
if (personalData && personalIsFetched) {
setPersonal(personalData[0]);
@@ -28,7 +29,7 @@ const PersonalizationSettings = () => {
useEffect(() => {
if (Object.keys(debounced).length) {
setPersonal(update);
editRow({ method: 'PATCH', endpoint: endpoint, body: debounced });
mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced });
setUpdate({});
}
}, [debounced]);
@@ -61,6 +62,8 @@ const PersonalizationSettings = () => {
searchValue={undefined}
setSearchValue={() => {}}
searchPlaceholder={undefined}
isLoading={false}
setIsLoading={() => {}}
/>
<Stack
align='center'

33
src/pages/settings/components/Search/SearchProviders.tsx
View File

@@ -15,6 +15,7 @@ import { useEffect, useState } from 'react';
import { popoverClasses, textInputClasses } from 'styles';
import type { Provider } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import NoItemsFound from '../Shared/NoItemsFound';
import SettingsHeader from '../Shared/SettingsHeader';
import DebouncedSearchProvider from './DebouncedSearchProvider';
import SearchProviderSettingsItem from './SearchProviderSettingsItem';
@@ -38,6 +39,7 @@ const SearchProviderSettings = () => {
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const [isOpen, setIsOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const handleClose = () => {
setNewProvider(defaultProvider);
@@ -48,12 +50,17 @@ const SearchProviderSettings = () => {
if (providerData && providerDataIsFetched) {
setProviders(
providerData
.filter((a: Provider) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
.filter(
(a: Provider) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()) ||
a.url.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.sort((a: Provider, b: Provider) => (a.prefix > b.prefix ? 1 : -1)),
);
}
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [providerData, providerDataIsFetched, debouncedSearch]);
return (
@@ -138,16 +145,18 @@ const SearchProviderSettings = () => {
<SettingsHeader
setDragging={undefined}
openModal={openModal}
title={'Search providerData'}
title={'Search Providers'}
tooltip={{
title: 'Search providerData and shortcuts can be configured here.',
title: 'Search providers and shortcuts can be configured here.',
highlightList: ['providerData', 'search', 'provider', 'prefix'],
description:
'providerData can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
'Providers can be used in the search bar. By starting a search with the prefix, it will be redirected to the url of the provider to complete the search.',
}}
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Search providerData...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack
mt={isMobile ? '9rem' : '6rem'}
@@ -156,7 +165,8 @@ const SearchProviderSettings = () => {
align='center'
>
<Grid columns={18} w={'75%'}>
{providers?.map((provider: Provider) => (
{providers.length > 0 ? (
providers?.map((provider: Provider) => (
<GridCol span={isMobile ? 18 : 6} key={provider.id}>
<Popover
withArrow
@@ -181,7 +191,16 @@ const SearchProviderSettings = () => {
</Popover.Dropdown>
</Popover>
</GridCol>
))}
))
) : (
<GridCol
w={'100%'}
span={18}
style={{ display: 'flex', justifyContent: 'center' }}
>
<NoItemsFound />
</GridCol>
)}
</Grid>
</Stack>
</Stack>

22
src/pages/settings/components/Shared/NoItemsFound.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { Card, Text } from '@mantine/core';
import { cardClasses } from 'styles';
function NoItemsFound() {
return (
<Card
className={cardClasses.settingsItem}
classNames={cardClasses}
w={'50%'}
h={'100%'}
p={'xl'}
m={'xl'}
style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}
>
<Text fw={300} size={'xl'}>
No items found
</Text>
</Card>
);
}
export default NoItemsFound;

19
src/pages/settings/components/Shared/SettingsHeader.tsx
View File

@@ -10,7 +10,7 @@ import {
TextInput,
} from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { FiHelpCircle, FiPlus } from 'react-icons/fi';
import { FiHelpCircle, FiLoader, FiPlus } from 'react-icons/fi';
import {
actionIconClasses,
buttonClasses,
@@ -28,6 +28,8 @@ function SettingsHeader({
searchValue,
setSearchValue,
searchPlaceholder,
isLoading,
setIsLoading,
}: {
setDragging: undefined | ((dragging: boolean) => void);
openModal: () => void;
@@ -40,6 +42,8 @@ function SettingsHeader({
searchValue: string | undefined;
setSearchValue: (searchValue: string) => void;
searchPlaceholder: string | undefined;
isLoading: boolean;
setIsLoading: (isLoading: boolean) => void;
}) {
const { isMobile } = useCommonHooks();
return (
@@ -105,7 +109,7 @@ function SettingsHeader({
</Popover>
{searchValue !== undefined && (
<Button
className={buttonClasses.tableButton}
className={buttonClasses.newItemButton}
classNames={buttonClasses}
onClick={openModal}
>
@@ -123,11 +127,22 @@ function SettingsHeader({
placeholder={searchPlaceholder ?? 'Search...'}
value={searchValue}
onInput={(event: any) => {
setIsLoading(true);
setSearchValue(event.target.value);
}}
style={{
zIndex: 100,
}}
rightSection={
isLoading && (
<ActionIcon
className={actionIconClasses.loadingSpinner}
classNames={actionIconClasses}
>
<FiLoader />
</ActionIcon>
)
}
/>
)}
{setDragging && (

52
src/pages/settings/components/Theming/ThemePlaylists.tsx
View File

@@ -1,10 +1,11 @@
import { Box, Group, Stack, Text } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useState } from 'react';
import { useEffect, useState } from 'react';
import { FiChevronRight } from 'react-icons/fi';
import { textClasses } from 'styles';
import type { ThemePlaylist } from 'types';
import NoItemsFound from '../Shared/NoItemsFound';
import SettingsHeader from '../Shared/SettingsHeader';
import ThemePlaylistCard from './ThemePlaylistCard';
import ThemePlaylistModal from './ThemePlaylistModal';
@@ -15,9 +16,10 @@ function ThemePlaylists() {
endpoint: themesEndpoint,
});
const themePlaylistsEndpoint = 'api/themePlaylists';
const { data: themePlaylistData } = useQueryAPI({
const { data: themePlaylistData, isFetched: isThemePlaylistDataFetched } = useQueryAPI({
endpoint: themePlaylistsEndpoint,
});
const [themePlaylists, setThemePlaylists] = useState<ThemePlaylist[]>([]);
const defaultPlaylist = {
id: undefined,
default: 0,
@@ -31,6 +33,7 @@ function ThemePlaylists() {
const { currentThemePlaylist, theme, isMobile } = useCommonHooks();
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const [isLoading, setIsLoading] = useState(false);
const handleOpen = (playlist: ThemePlaylist) => {
setSelectedPlaylist(playlist);
@@ -51,6 +54,19 @@ function ThemePlaylists() {
close();
};
useEffect(() => {
if (themePlaylistData && isThemePlaylistDataFetched) {
setThemePlaylists(
themePlaylistData.filter((a: ThemePlaylist) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
),
);
}
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [themePlaylistData, isThemePlaylistDataFetched, debouncedSearch]);
return (
<Stack>
<ThemePlaylistModal
@@ -77,6 +93,8 @@ function ThemePlaylists() {
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Theme Playlists...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Group mt={'6rem'} justify='center' align='center' pos={'relative'}>
<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -84,11 +102,9 @@ function ThemePlaylists() {
</Text>
</Group>
<Group justify='center' align='center' pos={'relative'}>
{themePlaylistData
?.filter((playlist: ThemePlaylist) => playlist.default === 1)
?.filter((a: ThemePlaylist) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
{themePlaylists.length > 0 ? (
themePlaylists
.filter((playlist: ThemePlaylist) => playlist.default === 1)
.map((cardPlaylist: ThemePlaylist) => {
return (
<Group key={cardPlaylist.name} pos={'relative'}>
@@ -118,7 +134,12 @@ function ThemePlaylists() {
</Box>
</Group>
);
})}
})
) : (
<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
<NoItemsFound />
</Group>
)}
</Group>
<Group justify='center' align='center' pos={'relative'}>
<Text p={0} className={textClasses.settingsSubTitle} classNames={textClasses}>
@@ -131,11 +152,9 @@ function ThemePlaylists() {
pos={'relative'}
mb={isMobile ? '6rem' : undefined}
>
{themePlaylistData
?.filter((playlist: ThemePlaylist) => playlist.default === 0)
?.filter((a: ThemePlaylist) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
{themePlaylists.length > 0 ? (
themePlaylists
.filter((playlist: ThemePlaylist) => playlist.default === 0)
.sort((a: ThemePlaylist, b: ThemePlaylist) => (a.name > b.name ? 1 : -1))
.map((cardPlaylist: ThemePlaylist) => {
return (
@@ -166,7 +185,12 @@ function ThemePlaylists() {
</Box>
</Group>
);
})}
})
) : (
<Group w={'100%'} style={{ display: 'flex', justifyContent: 'center' }}>
<NoItemsFound />
</Group>
)}
</Group>
</Stack>
</Stack>

39
src/pages/settings/components/Theming/Themes.tsx
View File

@@ -6,6 +6,7 @@ import { FaDice } from 'react-icons/fa';
import { FiChevronRight } from 'react-icons/fi';
import { switchClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
import NoItemsFound from '../Shared/NoItemsFound';
import SettingsHeader from '../Shared/SettingsHeader';
import ThemeCard from './ThemeCard';
import ThemeModal from './ThemeModal';
@@ -13,9 +14,10 @@ import ThemeModal from './ThemeModal';
function ThemesSettings() {
const themesEndpoint = 'api/themes';
const backgroundsEndpoint = 'api/backgrounds';
const { data: allThemeData } = useQueryAPI({
const { data: allThemeData, isFetched: isAllThemeDataFetched } = useQueryAPI({
endpoint: 'api/themes',
});
const [allThemes, setAllThemes] = useState<Theme[]>([]);
const { data: backgroundData, isFetched: isBackgroundFetched } = useQueryAPI({
endpoint: backgroundsEndpoint,
});
@@ -42,6 +44,7 @@ function ThemesSettings() {
const [pickerOpen, { open: openPicker, close: closePicker }] = useDisclosure(false);
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const [isLoading, setIsLoading] = useState(false);
const { currentTheme, setCurrentTheme, theme, isMobile, setCurrentThemePlaylist } =
useCommonHooks();
@@ -87,6 +90,19 @@ function ThemesSettings() {
}
}, [themePlaylistData]);
useEffect(() => {
if (allThemeData && isAllThemeDataFetched) {
setAllThemes(
allThemeData.filter((a: Theme) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
),
);
}
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [allThemeData, isAllThemeDataFetched, debouncedSearch]);
return (
<Stack w={'100%'} align='center'>
<ThemeModal
@@ -117,6 +133,8 @@ function ThemesSettings() {
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Themes...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Switch
label={
@@ -150,7 +168,7 @@ function ThemesSettings() {
mb={isMobile ? '6rem' : '1rem'}
>
<Overlay
display={currentTheme === 'random' ? 'flex' : 'none'}
display={currentTheme === 'random' && debouncedSearch === '' ? 'flex' : 'none'}
blur={5}
style={{
zIndex: 190,
@@ -161,11 +179,8 @@ function ThemesSettings() {
}}
pos={'absolute'}
/>
{allThemeData
?.filter((a: Theme) =>
a.name.toLowerCase().includes(debouncedSearch.toLowerCase()),
)
.map((cardTheme: Theme) => (
{allThemes.length > 0 ? (
allThemes.map((cardTheme: Theme) => (
<Group key={cardTheme.name} pos={'relative'}>
{cardTheme.name === currentTheme && (
<FiChevronRight
@@ -198,7 +213,15 @@ function ThemesSettings() {
/>
</Box>
</Group>
))}
))
) : (
<Group
w={'100%'}
style={{ zIndex: 1000, display: 'flex', justifyContent: 'center' }}
>
<NoItemsFound />
</Group>
)}
</Group>
</Stack>
);

21
src/pages/settings/components/WoL/WolClients.tsx
View File

@@ -14,6 +14,7 @@ import { useEffect, useState } from 'react';
import { popoverClasses, textInputClasses } from 'styles';
import type { WolClient } from 'types';
import AddItemModal from '../Shared/AddItemModal';
import NoItemsFound from '../Shared/NoItemsFound';
import SettingsHeader from '../Shared/SettingsHeader';
import DebouncedWolClient from './DebouncedWolClient';
import WolClientSettingsItem from './WolClientSettingsItem';
@@ -36,6 +37,7 @@ const WolClientSettings = () => {
const [searchValue, setSearchValue] = useState('');
const [debouncedSearch] = useDebouncedValue(searchValue, 500);
const [isOpen, setIsOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const handleClose = () => {
setNewWolClient(defaultWolClient);
@@ -50,6 +52,9 @@ const WolClientSettings = () => {
),
);
}
if (debouncedSearch === searchValue) {
setIsLoading(false);
}
}, [wolClientsData, wolClientsIsFetched, debouncedSearch]);
return (
@@ -131,6 +136,8 @@ const WolClientSettings = () => {
searchValue={searchValue}
setSearchValue={setSearchValue}
searchPlaceholder={'Search Clients...'}
isLoading={isLoading}
setIsLoading={setIsLoading}
/>
<Stack
mt={isMobile ? '9rem' : '6rem'}
@@ -139,7 +146,8 @@ const WolClientSettings = () => {
align='center'
>
<Grid columns={18} w={'75%'}>
{wolClients?.map((client: WolClient) => (
{wolClients.length > 0 ? (
wolClients?.map((client: WolClient) => (
<GridCol w={'100%'} span={isMobile ? 18 : 6} key={client.id}>
<Popover
withArrow
@@ -162,7 +170,16 @@ const WolClientSettings = () => {
</Popover.Dropdown>
</Popover>
</GridCol>
))}
))
) : (
<GridCol
w={'100%'}
span={18}
style={{ display: 'flex', justifyContent: 'center' }}
>
<NoItemsFound />
</GridCol>
)}
</Grid>
</Stack>
</Stack>

33
src/styles/ActionIcon.module.css
View File

@@ -93,3 +93,36 @@
}
}
}
.loadingSpinner {
&.root {
transition: all .1s ease;
width: 30px;
height: 30px;
border-radius: 100%;
border: none;
background-color: transparent;
color: var(--mantine-color-primary-0);
.icon {
font-size: 24px;
}
.loader {
display: none;
}
:hover {
background-color: var(--mantine-color-primary-0) !important;
color: var(--mantine-color-accent-0) !important;
transition: all .1s ease;
}
animation: rotation 1s linear infinite;
}
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

2
src/styles/Button.module.css
View File

@@ -42,7 +42,7 @@
}
}
.tableButton {
.newItemButton {
&.root {
&.loader {
display: none;