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

Bugfixes and updates

Browse Source
This commit is contained in:
Sean Edmunds
2025-06-24 16:20:29 -05:00
parent 81aecb261a
commit 9aa8dba56c
36 changed files with 1000 additions and 967 deletions
Download Patch File Download Diff File Expand all files Collapse all files

319
package-lock.json generated
View File

@@ -13,26 +13,26 @@
"@mantine/form": "^8.1.1", "@mantine/form": "^8.1.1",
"@mantine/hooks": "^8.1.1", "@mantine/hooks": "^8.1.1",
"@mantine/notifications": "^8.1.1", "@mantine/notifications": "^8.1.1",
"@tanstack/react-query": "^5.80.10", "@tanstack/react-query": "^5.81.2",
"@tanstack/react-query-devtools": "^5.80.10", "@tanstack/react-query-devtools": "^5.81.2",
"@tanstack/react-query-persist-client": "^5.80.10", "@tanstack/react-query-persist-client": "^5.81.2",
"idb-keyval": "^6.2.2", "idb-keyval": "^6.2.2",
"jotai": "^2.12.5", "jotai": "^2.12.5",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"react-router-dom": "^7.6.2", "react-router-dom": "^7.6.2",
"recharts": "^2.15.3" "recharts": "^3.0.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^24.0.3", "@types/node": "^24.0.4",
"@types/react": "^19.1.8", "@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6", "@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.5.2", "@vitejs/plugin-react": "^4.6.0",
"@vitest/coverage-v8": "^3.2.4", "@vitest/coverage-v8": "^3.2.4",
"@vitest/ui": "^3.2.4", "@vitest/ui": "^3.2.4",
"typescript": "^5.8.3", "typescript": "^5.8.3",
"vite": "^6.3.5", "vite": "^7.0.0",
"vite-plugin-dts": "~4.5.4", "vite-plugin-dts": "~4.5.4",
"vite-tsconfig-paths": "^5.1.4", "vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.2.4" "vitest": "^3.2.4"
@@ -1160,10 +1160,36 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/@reduxjs/toolkit": {
"version": "2.8.2",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.8.2.tgz",
"integrity": "sha512-MYlOhQ0sLdw4ud48FoC5w0dH9VfWQjtCjreKwYTT3l+r427qYC5Y8PihNutepr8XrNaBUDQo9khWUwQxZaqt5A==",
"license": "MIT",
"dependencies": {
"@standard-schema/spec": "^1.0.0",
"@standard-schema/utils": "^0.3.0",
"immer": "^10.0.3",
"redux": "^5.0.1",
"redux-thunk": "^3.1.0",
"reselect": "^5.1.0"
},
"peerDependencies": {
"react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
"react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"react-redux": {
"optional": true
}
}
},
"node_modules/@rolldown/pluginutils": { "node_modules/@rolldown/pluginutils": {
"version": "1.0.0-beta.11", "version": "1.0.0-beta.19",
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.11.tgz", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.19.tgz",
"integrity": "sha512-L/gAA/hyCSuzTF1ftlzUSI/IKr2POHsv1Dd78GfqkR83KMNuswWD61JxGV2L7nRwBBBSDr6R1gCkdTmoN7W4ag==", "integrity": "sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
@@ -1591,10 +1617,22 @@
"sprintf-js": "~1.0.2" "sprintf-js": "~1.0.2"
} }
}, },
"node_modules/@standard-schema/spec": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
"integrity": "sha512-m2bOd0f2RT9k8QJx1JN85cZYyH1RqFBdlwtkSlf4tBDYLCiiZnv1fIIwacK6cqwXavOydf0NPToMQgpKq+dVlA==",
"license": "MIT"
},
"node_modules/@standard-schema/utils": {
"version": "0.3.0",
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
"integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
"license": "MIT"
},
"node_modules/@tanstack/query-core": { "node_modules/@tanstack/query-core": {
"version": "5.80.10", "version": "5.81.2",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.80.10.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.2.tgz",
"integrity": "sha512-mUNQOtzxkjL6jLbyChZoSBP6A5gQDVRUiPvW+/zw/9ftOAz+H754zCj3D8PwnzPKyHzGkQ9JbH48ukhym9LK1Q==", "integrity": "sha512-QLYkPdrudoMATDFa3MiLEwRhNnAlzHWDf0LKaXUqJd0/+QxN8uTPi7bahRlxoAyH0UbLMBdeDbYzWALj7THOtw==",
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1602,9 +1640,9 @@
} }
}, },
"node_modules/@tanstack/query-devtools": { "node_modules/@tanstack/query-devtools": {
"version": "5.80.0", "version": "5.81.2",
"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.80.0.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.81.2.tgz",
"integrity": "sha512-D6gH4asyjaoXrCOt5vG5Og/YSj0D/TxwNQgtLJIgWbhbWCC/emu2E92EFoVHh4ppVWg1qT2gKHvKyQBEFZhCuA==", "integrity": "sha512-jCeJcDCwKfoyyBXjXe9+Lo8aTkavygHHsUHAlxQKKaDeyT0qyQNLKl7+UyqYH2dDF6UN/14873IPBHchcsU+Zg==",
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1612,12 +1650,12 @@
} }
}, },
"node_modules/@tanstack/query-persist-client-core": { "node_modules/@tanstack/query-persist-client-core": {
"version": "5.80.10", "version": "5.81.2",
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.80.10.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.81.2.tgz",
"integrity": "sha512-3fcLDW4hDkiGfG/NRj6hgl/+G94lsgtx/Wj9jxuUN0LiawKpIMfGrSNCERFPYpJMuTtCyX9A2mqHE++sV13lsA==", "integrity": "sha512-FSLHr3DL+eezaKNiAexM7+KdgpXvLmUuMQhtORPIC7QuhemM6kfzcrQC5AN34zhvVh2PZXRcib2JnHKeTMjyyg==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-core": "5.80.10" "@tanstack/query-core": "5.81.2"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1625,12 +1663,12 @@
} }
}, },
"node_modules/@tanstack/react-query": { "node_modules/@tanstack/react-query": {
"version": "5.80.10", "version": "5.81.2",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.80.10.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.2.tgz",
"integrity": "sha512-6zM098J8sLy9oU60XAdzUlAH4wVzoMVsWUWiiE/Iz4fd67PplxeyL4sw/MPcVJJVhbwGGXCsHn9GrQt2mlAzig==", "integrity": "sha512-pe8kFlTrL2zFLlcAj2kZk9UaYYHDk9/1hg9EBaoO3cxDhOZf1FRGJeziSXKrVZyxIfs7b3aoOj/bw7Lie0mDUg==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-core": "5.80.10" "@tanstack/query-core": "5.81.2"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1641,36 +1679,36 @@
} }
}, },
"node_modules/@tanstack/react-query-devtools": { "node_modules/@tanstack/react-query-devtools": {
"version": "5.80.10", "version": "5.81.2",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.80.10.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.81.2.tgz",
"integrity": "sha512-6JL63fSc7kxyGOLV2w466SxhMn/m7LZk/ximQciy6OpVt+n2A8Mq3S0QwhIzfm4WEwLK/F3OELfzRToQburnYA==", "integrity": "sha512-TX0OQ4cbgX6z2uN8c9x0QUNbyePGyUGdcgrGnV6TYEJc7KPT8PqeASuzoA5NGw1CiMGvyFAkIGA2KipvhM9d1g==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-devtools": "5.80.0" "@tanstack/query-devtools": "5.81.2"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
}, },
"peerDependencies": { "peerDependencies": {
"@tanstack/react-query": "^5.80.10", "@tanstack/react-query": "^5.81.2",
"react": "^18 || ^19" "react": "^18 || ^19"
} }
}, },
"node_modules/@tanstack/react-query-persist-client": { "node_modules/@tanstack/react-query-persist-client": {
"version": "5.80.10", "version": "5.81.2",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.80.10.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.81.2.tgz",
"integrity": "sha512-0LcPhQElmffSNXh+omPOOZJnutk7Z7NMTrWl9WP3aH7Xn4OaFXImkyey1ajez5o23D8TFwj3kHmi/85J+E6sgQ==", "integrity": "sha512-HUlnB7FGqN/he4AOvR0vNA06Wn4dg3rEK7EgzenWfc0gQ9Aa6thqTWgT3Q27CnKiTkzhRn2uZJKRseTP4g54LQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-persist-client-core": "5.80.10" "@tanstack/query-persist-client-core": "5.81.2"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
}, },
"peerDependencies": { "peerDependencies": {
"@tanstack/react-query": "^5.80.10", "@tanstack/react-query": "^5.81.2",
"react": "^18 || ^19" "react": "^18 || ^19"
} }
}, },
@@ -1734,22 +1772,26 @@
"node_modules/@types/d3-array": { "node_modules/@types/d3-array": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz", "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
"integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==" "integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
"license": "MIT"
}, },
"node_modules/@types/d3-color": { "node_modules/@types/d3-color": {
"version": "3.1.3", "version": "3.1.3",
"resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
"integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==" "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
"license": "MIT"
}, },
"node_modules/@types/d3-ease": { "node_modules/@types/d3-ease": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
"integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==" "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
"license": "MIT"
}, },
"node_modules/@types/d3-interpolate": { "node_modules/@types/d3-interpolate": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
"integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==", "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
"license": "MIT",
"dependencies": { "dependencies": {
"@types/d3-color": "*" "@types/d3-color": "*"
} }
@@ -1757,12 +1799,14 @@
"node_modules/@types/d3-path": { "node_modules/@types/d3-path": {
"version": "3.1.1", "version": "3.1.1",
"resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz", "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
"integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==" "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
"license": "MIT"
}, },
"node_modules/@types/d3-scale": { "node_modules/@types/d3-scale": {
"version": "4.0.9", "version": "4.0.9",
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz", "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
"integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==", "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
"license": "MIT",
"dependencies": { "dependencies": {
"@types/d3-time": "*" "@types/d3-time": "*"
} }
@@ -1771,6 +1815,7 @@
"version": "3.1.7", "version": "3.1.7",
"resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz", "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.7.tgz",
"integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==", "integrity": "sha512-VLvUQ33C+3J+8p+Daf+nYSOsjB4GXp19/S/aGo60m9h1v6XaxjiT82lKVWJCfzhtuZ3yD7i/TPeC/fuKLLOSmg==",
"license": "MIT",
"dependencies": { "dependencies": {
"@types/d3-path": "*" "@types/d3-path": "*"
} }
@@ -1778,12 +1823,14 @@
"node_modules/@types/d3-time": { "node_modules/@types/d3-time": {
"version": "3.0.4", "version": "3.0.4",
"resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz", "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
"integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==" "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
"license": "MIT"
}, },
"node_modules/@types/d3-timer": { "node_modules/@types/d3-timer": {
"version": "3.0.2", "version": "3.0.2",
"resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz", "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==" "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
"license": "MIT"
}, },
"node_modules/@types/deep-eql": { "node_modules/@types/deep-eql": {
"version": "4.0.2", "version": "4.0.2",
@@ -1800,9 +1847,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "24.0.3", "version": "24.0.4",
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.3.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.4.tgz",
"integrity": "sha512-R4I/kzCYAdRLzfiCabn9hxWfbuHS573x+r0dJMkkzThEa7pbrcDWK+9zu3e7aBOouf+rQAciqPFMnxwr0aWgKg==", "integrity": "sha512-ulyqAkrhnuNq9pB76DRBTkcS6YsmDALy6Ua63V8OhrOBgbcYt6IOdzpw5P1+dyRIyMerzLkeYWBeOXPpA9GMAA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@@ -1836,16 +1883,16 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@vitejs/plugin-react": { "node_modules/@vitejs/plugin-react": {
"version": "4.5.2", "version": "4.6.0",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.5.2.tgz", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.6.0.tgz",
"integrity": "sha512-QNVT3/Lxx99nMQWJWF7K4N6apUEuT0KlZA3mx/mVaoGj3smm/8rc8ezz15J1pcbcjDK0V15rpHetVfya08r76Q==", "integrity": "sha512-5Kgff+m8e2PB+9j51eGHEpn5kUzRKH2Ry0qGoe8ItJg7pqnkPrYPkDQZGgGmTa0EGarHrkjLvOdU3b1fzI8otQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/core": "^7.27.4", "@babel/core": "^7.27.4",
"@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-self": "^7.27.1",
"@babel/plugin-transform-react-jsx-source": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1",
"@rolldown/pluginutils": "1.0.0-beta.11", "@rolldown/pluginutils": "1.0.0-beta.19",
"@types/babel__core": "^7.20.5", "@types/babel__core": "^7.20.5",
"react-refresh": "^0.17.0" "react-refresh": "^0.17.0"
}, },
@@ -2456,6 +2503,7 @@
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
"license": "ISC",
"dependencies": { "dependencies": {
"internmap": "1 - 2" "internmap": "1 - 2"
}, },
@@ -2467,6 +2515,7 @@
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
"license": "ISC",
"engines": { "engines": {
"node": ">=12" "node": ">=12"
} }
@@ -2475,6 +2524,7 @@
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz", "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==", "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
"license": "BSD-3-Clause",
"engines": { "engines": {
"node": ">=12" "node": ">=12"
} }
@@ -2483,6 +2533,7 @@
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz", "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
"integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==", "integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
"license": "ISC",
"engines": { "engines": {
"node": ">=12" "node": ">=12"
} }
@@ -2491,6 +2542,7 @@
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
"license": "ISC",
"dependencies": { "dependencies": {
"d3-color": "1 - 3" "d3-color": "1 - 3"
}, },
@@ -2502,6 +2554,7 @@
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz", "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==", "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
"license": "ISC",
"engines": { "engines": {
"node": ">=12" "node": ">=12"
} }
@@ -2510,6 +2563,7 @@
"version": "4.0.2", "version": "4.0.2",
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
"license": "ISC",
"dependencies": { "dependencies": {
"d3-array": "2.10.0 - 3", "d3-array": "2.10.0 - 3",
"d3-format": "1 - 3", "d3-format": "1 - 3",
@@ -2525,6 +2579,7 @@
"version": "3.2.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz", "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==", "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
"license": "ISC",
"dependencies": { "dependencies": {
"d3-path": "^3.1.0" "d3-path": "^3.1.0"
}, },
@@ -2536,6 +2591,7 @@
"version": "3.1.0", "version": "3.1.0",
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
"license": "ISC",
"dependencies": { "dependencies": {
"d3-array": "2 - 3" "d3-array": "2 - 3"
}, },
@@ -2547,6 +2603,7 @@
"version": "4.1.0", "version": "4.1.0",
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz", "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==", "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
"license": "ISC",
"dependencies": { "dependencies": {
"d3-time": "1 - 3" "d3-time": "1 - 3"
}, },
@@ -2558,6 +2615,7 @@
"version": "3.0.1", "version": "3.0.1",
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz", "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==", "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
"license": "ISC",
"engines": { "engines": {
"node": ">=12" "node": ">=12"
} }
@@ -2589,7 +2647,8 @@
"node_modules/decimal.js-light": { "node_modules/decimal.js-light": {
"version": "2.5.1", "version": "2.5.1",
"resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz", "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
"integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==" "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
"license": "MIT"
}, },
"node_modules/deep-eql": { "node_modules/deep-eql": {
"version": "5.0.2", "version": "5.0.2",
@@ -2653,6 +2712,16 @@
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
"node_modules/es-toolkit": {
"version": "1.39.5",
"resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.39.5.tgz",
"integrity": "sha512-z9V0qU4lx1TBXDNFWfAASWk6RNU6c6+TJBKE+FLIg8u0XJ6Yw58Hi0yX8ftEouj6p1QARRlXLFfHbIli93BdQQ==",
"license": "MIT",
"workspaces": [
"docs",
"benchmarks"
]
},
"node_modules/esbuild": { "node_modules/esbuild": {
"version": "0.25.1", "version": "0.25.1",
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz", "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
@@ -2710,9 +2779,10 @@
"dev": true "dev": true
}, },
"node_modules/eventemitter3": { "node_modules/eventemitter3": {
"version": "4.0.7", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==" "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
"license": "MIT"
}, },
"node_modules/expect-type": { "node_modules/expect-type": {
"version": "1.2.1", "version": "1.2.1",
@@ -2735,14 +2805,6 @@
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==" "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
}, },
"node_modules/fast-equals": {
"version": "5.2.2",
"resolved": "https://registry.npmjs.org/fast-equals/-/fast-equals-5.2.2.tgz",
"integrity": "sha512-V7/RktU11J3I36Nwq2JnZEM7tNm17eBJz+u25qdxBZeCKiX6BkVSZQjwWIr+IobgnZy+ag73tTZgZi7tr0LrBw==",
"engines": {
"node": ">=6.0.0"
}
},
"node_modules/fast-uri": { "node_modules/fast-uri": {
"version": "3.0.6", "version": "3.0.6",
"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz", "resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
@@ -2760,9 +2822,9 @@
] ]
}, },
"node_modules/fdir": { "node_modules/fdir": {
"version": "6.4.4", "version": "6.4.6",
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz", "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
"integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==", "integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peerDependencies": { "peerDependencies": {
@@ -2923,6 +2985,16 @@
"integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==", "integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==",
"license": "Apache-2.0" "license": "Apache-2.0"
}, },
"node_modules/immer": {
"version": "10.1.1",
"resolved": "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz",
"integrity": "sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==",
"license": "MIT",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/immer"
}
},
"node_modules/import-lazy": { "node_modules/import-lazy": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz", "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
@@ -2936,6 +3008,7 @@
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
"license": "ISC",
"engines": { "engines": {
"node": ">=12" "node": ">=12"
} }
@@ -3159,7 +3232,8 @@
"node_modules/lodash": { "node_modules/lodash": {
"version": "4.17.21", "version": "4.17.21",
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
"integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
"dev": true
}, },
"node_modules/loose-envify": { "node_modules/loose-envify": {
"version": "1.4.0", "version": "1.4.0",
@@ -3310,6 +3384,7 @@
"url": "https://github.com/sponsors/ai" "url": "https://github.com/sponsors/ai"
} }
], ],
"license": "MIT",
"bin": { "bin": {
"nanoid": "bin/nanoid.cjs" "nanoid": "bin/nanoid.cjs"
}, },
@@ -3428,9 +3503,9 @@
} }
}, },
"node_modules/postcss": { "node_modules/postcss": {
"version": "8.5.3", "version": "8.5.6",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
"integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==", "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
"dev": true, "dev": true,
"funding": [ "funding": [
{ {
@@ -3446,8 +3521,9 @@
"url": "https://github.com/sponsors/ai" "url": "https://github.com/sponsors/ai"
} }
], ],
"license": "MIT",
"dependencies": { "dependencies": {
"nanoid": "^3.3.8", "nanoid": "^3.3.11",
"picocolors": "^1.1.1", "picocolors": "^1.1.1",
"source-map-js": "^1.2.1" "source-map-js": "^1.2.1"
}, },
@@ -3655,20 +3731,6 @@
"react-dom": ">=18" "react-dom": ">=18"
} }
}, },
"node_modules/react-smooth": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/react-smooth/-/react-smooth-4.0.4.tgz",
"integrity": "sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==",
"dependencies": {
"fast-equals": "^5.0.1",
"prop-types": "^15.8.1",
"react-transition-group": "^4.4.5"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
}
},
"node_modules/react-style-singleton": { "node_modules/react-style-singleton": {
"version": "2.2.3", "version": "2.2.3",
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz", "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
@@ -3723,47 +3785,47 @@
} }
}, },
"node_modules/recharts": { "node_modules/recharts": {
"version": "2.15.3", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.3.tgz", "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.0.0.tgz",
"integrity": "sha512-EdOPzTwcFSuqtvkDoaM5ws/Km1+WTAO2eizL7rqiG0V2UVhTnz0m7J2i0CjVPUCdEkZImaWvXLbZDS2H5t6GFQ==", "integrity": "sha512-GODedlXZEOQ/KN15puHqaEk9JaiUvFr+Wef/nSagi7g9wHPFLB7prH1/J8vyEBtA2Es6r8qGY1t2OqkuAIpgBg==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"clsx": "^2.0.0", "@reduxjs/toolkit": "1.x.x || 2.x.x",
"eventemitter3": "^4.0.1", "clsx": "^2.1.1",
"lodash": "^4.17.21", "decimal.js-light": "^2.5.1",
"react-is": "^18.3.1", "es-toolkit": "^1.39.3",
"react-smooth": "^4.0.4", "eventemitter3": "^5.0.1",
"recharts-scale": "^0.4.4", "immer": "^10.1.1",
"tiny-invariant": "^1.3.1", "react-redux": "8.x.x || 9.x.x",
"victory-vendor": "^36.6.8" "reselect": "5.1.1",
"tiny-invariant": "^1.3.3",
"use-sync-external-store": "^1.2.2",
"victory-vendor": "^37.0.2"
}, },
"engines": { "engines": {
"node": ">=14" "node": ">=18"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
"react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
} }
}, },
"node_modules/recharts-scale": {
"version": "0.4.5",
"resolved": "https://registry.npmjs.org/recharts-scale/-/recharts-scale-0.4.5.tgz",
"integrity": "sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==",
"dependencies": {
"decimal.js-light": "^2.4.1"
}
},
"node_modules/recharts/node_modules/react-is": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
"integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="
},
"node_modules/redux": { "node_modules/redux": {
"version": "5.0.1", "version": "5.0.1",
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz", "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==", "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
"license": "MIT" "license": "MIT"
}, },
"node_modules/redux-thunk": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
"integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
"license": "MIT",
"peerDependencies": {
"redux": "^5.0.0"
}
},
"node_modules/regenerator-runtime": { "node_modules/regenerator-runtime": {
"version": "0.14.1", "version": "0.14.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
@@ -3778,6 +3840,12 @@
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/reselect": {
"version": "5.1.1",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
"license": "MIT"
},
"node_modules/resolve": { "node_modules/resolve": {
"version": "1.22.10", "version": "1.22.10",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -4427,9 +4495,10 @@
} }
}, },
"node_modules/victory-vendor": { "node_modules/victory-vendor": {
"version": "36.9.2", "version": "37.3.6",
"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz", "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
"integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==", "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
"license": "MIT AND ISC",
"dependencies": { "dependencies": {
"@types/d3-array": "^3.0.3", "@types/d3-array": "^3.0.3",
"@types/d3-ease": "^3.0.0", "@types/d3-ease": "^3.0.0",
@@ -4448,24 +4517,24 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "6.3.5", "version": "7.0.0",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.0.tgz",
"integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==", "integrity": "sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"esbuild": "^0.25.0", "esbuild": "^0.25.0",
"fdir": "^6.4.4", "fdir": "^6.4.6",
"picomatch": "^4.0.2", "picomatch": "^4.0.2",
"postcss": "^8.5.3", "postcss": "^8.5.6",
"rollup": "^4.34.9", "rollup": "^4.40.0",
"tinyglobby": "^0.2.13" "tinyglobby": "^0.2.14"
}, },
"bin": { "bin": {
"vite": "bin/vite.js" "vite": "bin/vite.js"
}, },
"engines": { "engines": {
"node": "^18.0.0 || ^20.0.0 || >=22.0.0" "node": "^20.19.0 || >=22.12.0"
}, },
"funding": { "funding": {
"url": "https://github.com/vitejs/vite?sponsor=1" "url": "https://github.com/vitejs/vite?sponsor=1"
@@ -4474,14 +4543,14 @@
"fsevents": "~2.3.3" "fsevents": "~2.3.3"
}, },
"peerDependencies": { "peerDependencies": {
"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0", "@types/node": "^20.19.0 || >=22.12.0",
"jiti": ">=1.21.0", "jiti": ">=1.21.0",
"less": "*", "less": "^4.0.0",
"lightningcss": "^1.21.0", "lightningcss": "^1.21.0",
"sass": "*", "sass": "^1.70.0",
"sass-embedded": "*", "sass-embedded": "^1.70.0",
"stylus": "*", "stylus": ">=0.54.8",
"sugarss": "*", "sugarss": "^5.0.0",
"terser": "^5.16.0", "terser": "^5.16.0",
"tsx": "^4.8.1", "tsx": "^4.8.1",
"yaml": "^2.4.2" "yaml": "^2.4.2"

14
package.json
View File

@@ -15,26 +15,26 @@
"@mantine/form": "^8.1.1", "@mantine/form": "^8.1.1",
"@mantine/hooks": "^8.1.1", "@mantine/hooks": "^8.1.1",
"@mantine/notifications": "^8.1.1", "@mantine/notifications": "^8.1.1",
"@tanstack/react-query": "^5.80.10", "@tanstack/react-query": "^5.81.2",
"@tanstack/react-query-devtools": "^5.80.10", "@tanstack/react-query-devtools": "^5.81.2",
"@tanstack/react-query-persist-client": "^5.80.10", "@tanstack/react-query-persist-client": "^5.81.2",
"idb-keyval": "^6.2.2", "idb-keyval": "^6.2.2",
"jotai": "^2.12.5", "jotai": "^2.12.5",
"react": "^19.1.0", "react": "^19.1.0",
"react-dom": "^19.1.0", "react-dom": "^19.1.0",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"react-router-dom": "^7.6.2", "react-router-dom": "^7.6.2",
"recharts": "^2.15.3" "recharts": "^3.0.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^24.0.3", "@types/node": "^24.0.4",
"@types/react": "^19.1.8", "@types/react": "^19.1.8",
"@types/react-dom": "^19.1.6", "@types/react-dom": "^19.1.6",
"@vitejs/plugin-react": "^4.5.2", "@vitejs/plugin-react": "^4.6.0",
"@vitest/coverage-v8": "^3.2.4", "@vitest/coverage-v8": "^3.2.4",
"@vitest/ui": "^3.2.4", "@vitest/ui": "^3.2.4",
"typescript": "^5.8.3", "typescript": "^5.8.3",
"vite": "^6.3.5", "vite": "^7.0.0",
"vite-plugin-dts": "~4.5.4", "vite-plugin-dts": "~4.5.4",
"vite-tsconfig-paths": "^5.1.4", "vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.2.4" "vitest": "^3.2.4"

4
src/components/HelpModal/HelpModal.tsx
View File

@@ -1,4 +1,4 @@
import { Divider, Modal, Stack } from '@mantine/core'; import { Modal, Stack } from '@mantine/core';
import { useCommonHooks } from 'hooks'; import { useCommonHooks } from 'hooks';
import { modalClasses } from 'styles'; import { modalClasses } from 'styles';
import type { Application, Provider } from 'types'; import type { Application, Provider } from 'types';
@@ -56,7 +56,7 @@ export function HelpModal({
}; };
})} })}
/> />
<Divider my={'.5rem'} color={'var(--mantine-color-accent-0)'} /> <Stack my={'.5rem'} />
<HelpSection <HelpSection
name={'Available Applications'} name={'Available Applications'}
items={applicationData.map((application: Application) => { items={applicationData.map((application: Application) => {

5
src/components/HelpModal/HelpSection.tsx
View File

@@ -1,4 +1,4 @@
import { Divider, Group } from '@mantine/core'; import { Group } from '@mantine/core';
import type { SearchShortcut } from 'types'; import type { SearchShortcut } from 'types';
import HintItem from './HintItem'; import HintItem from './HintItem';
@@ -10,7 +10,7 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
zIndex: 0, zIndex: 0,
padding: '.5rem', padding: '.5rem',
marginTop: 0, marginTop: 0,
marginBottom: '-2rem', marginBottom: '-1.25rem',
borderRadius: '8px', borderRadius: '8px',
color: 'var(--mantine-color-background-0)', color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-border-0)', backgroundColor: 'var(--mantine-color-border-0)',
@@ -18,7 +18,6 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
> >
{name} {name}
</h3> </h3>
<Divider py={'.5rem'} color={'var(--mantine-color-accent-0)'} />
<Group <Group
style={{ style={{
width: '100%', width: '100%',

1
src/pages/homepage/components/Applications/AppItem.tsx
View File

@@ -42,7 +42,6 @@ function AppItem({ url, icon, name }: { url: string; icon: string; name: string
align={isMobile ? 'center' : undefined} align={isMobile ? 'center' : undefined}
justify={isMobile ? 'center' : undefined} justify={isMobile ? 'center' : undefined}
style={{ style={{
height: '64px',
width: isMobile ? '100%' : undefined, width: isMobile ? '100%' : undefined,
marginRight: isMobile ? 0 : '1rem', marginRight: isMobile ? 0 : '1rem',
marginLeft: isMobile ? 0 : '1rem', marginLeft: isMobile ? 0 : '1rem',

4
src/pages/homepage/components/Header/Header.tsx
View File

@@ -72,7 +72,7 @@ function Header({
<Stack <Stack
style={{ style={{
borderBottom: '0px solid', borderBottom: '0px solid',
zIndex: '1', zIndex: 1,
clear: 'both', clear: 'both',
display: 'flex', display: 'flex',
flexDirection: isMobile ? 'column' : 'row', flexDirection: isMobile ? 'column' : 'row',
@@ -123,7 +123,6 @@ function Header({
}} }}
> >
<Group <Group
gap={0}
align='end' align='end'
style={{ style={{
display: 'flex', display: 'flex',
@@ -131,6 +130,7 @@ function Header({
bottom: isMobile ? -32 : 0, bottom: isMobile ? -32 : 0,
right: 16, right: 16,
cursor: 'pointer', cursor: 'pointer',
gap: 0,
}} }}
onClick={openWeatherModal} onClick={openWeatherModal}
> >

233
src/pages/homepage/components/Search/Search.tsx
View File

@@ -1,4 +1,4 @@
import { Group, type OptionsFilter, Select, Stack, Text } from '@mantine/core'; import { Group, type OptionsFilter, Overlay, Select, Stack, Text } from '@mantine/core';
import { useDisclosure } from '@mantine/hooks'; import { useDisclosure } from '@mantine/hooks';
import { HelpModal, WeatherModal } from 'components'; import { HelpModal, WeatherModal } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
@@ -61,7 +61,7 @@ export default function Search({
searchValue, searchValue,
setSearchValue, setSearchValue,
} = useCommonHooks(); } = useCommonHooks();
const [placeholderValue, setPlaceholderValue] = useState(''); const [placeholderValue, setPlaceholderValue] = useState<string>('');
const [value, setValue] = useState(0); const [value, setValue] = useState(0);
const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => { const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => {
@@ -322,118 +322,125 @@ export default function Search({
}, [searchValue]); }, [searchValue]);
return ( return (
<Stack <>
style={{ {dropdownOpened && <Overlay pos={'absolute'} h={'100%'} w={'100%'} blur={1} />}
height: '100px', <Stack
backgroundColor: 'transparent', style={{
textAlign: 'center', height: '100px',
position: 'relative', backgroundColor: 'transparent',
padding: '.3rem', textAlign: 'center',
display: 'inline-block', position: 'relative',
gap: 0, padding: '.3rem',
}} display: 'inline-block',
> gap: 0,
<Select
classNames={selectClasses}
className={selectClasses.search}
data={searchHistory.map((item: SearchHistoryItem) => ({
label: `${item.provider}`,
value: `${item.prefix} ${item.searchTerm} ${item.dateTimeStamp}`,
...item,
}))}
filter={optionsFilter}
value={searchValue}
searchValue={searchValue}
placeholder={placeholderValue}
nothingFoundMessage={
<Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
}
data-active={searchValue !== ''}
dropdownOpened={dropdownOpened}
comboboxProps={{
transitionProps: { transition: 'fade', duration: 200 },
}} }}
spellCheck='true' >
searchable <Select
autoFocus={!isMobile} classNames={selectClasses}
leftSection={providerLabel} data={searchHistory.map((item: SearchHistoryItem) => ({
rightSection={<Stack />} label: `${item.provider}`,
renderOption={(item: any) => { value: `${item.prefix} ${item.searchTerm} ${item.dateTimeStamp}`,
const Icon = allIcons[item.option.icon]; ...item,
return !searchValue.startsWith('!') ? ( }))}
<SearchSelectItem filter={optionsFilter}
item={item} value={searchValue}
handleSearchHistoryItem={handleSearchHistoryItem} searchValue={searchValue}
searchEndpoint={searchEndpoint} placeholder={placeholderValue}
/> nothingFoundMessage={
) : ( <Text c={'var(--mantine-color-primary-0)'}>Nothing found...</Text>
<Group
pos={'relative'}
m={0}
p={0}
gap={0}
justify='center'
w={'100%'}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleAppLaunchItem(item);
}}
>
<Text pos={'absolute'} left={'1rem'} c={'var(--mantine-color-accent-0)'}>
Launch
</Text>
{Icon && (
<Icon
style={{
color: 'var(--mantine-color-primary-0)',
height: '2rem',
width: '2rem',
}}
/>
)}
<Text pos={'absolute'} right={'1rem'} c={'var(--mantine-color-accent-0)'}>
{item.option.name}
</Text>
</Group>
);
}}
onBlur={() => {
setPlaceholderValue('');
setListIndex(0);
closeDropdown();
}}
onFocus={() => {
if (searchValue !== '') {
openDropdown();
} }
}} data-active={searchValue !== ''}
onKeyDown={(e) => { dropdownOpened={dropdownOpened}
if (e.key === 'Tab') { comboboxProps={{
e.preventDefault(); transitionProps: { transition: 'fade', duration: 200 },
} }}
}} styles={{
onInput={onInput} input: {
onKeyUp={handleKeyUp} zIndex: 1000,
/> },
<HelpModal }}
setSearchValue={setSearchValue} spellCheck={true}
setProviderLabel={setProviderLabel} searchable
setProviderURL={setProviderURL} autoFocus={!isMobile}
applicationData={applications} leftSection={providerLabel}
providerData={providers} rightSection={<div />}
providerModalOpened={providerModalOpened} renderOption={(item: any) => {
closeProviderModal={closeProviderModal} const Icon = allIcons[item.option.icon];
/> return !searchValue.startsWith('!') ? (
<WeatherModal <SearchSelectItem
current={current} item={item}
extendedForecast={extendedForecast} handleSearchHistoryItem={handleSearchHistoryItem}
weatherModalOpened={weatherModalOpened} searchEndpoint={searchEndpoint}
setSearchValue={setSearchValue} />
setProviderLabel={setProviderLabel} ) : (
setProviderURL={setProviderURL} <Group
closeWeatherModal={closeWeatherModal} pos={'relative'}
/> m={0}
</Stack> p={0}
gap={0}
justify='center'
w={'100%'}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
handleAppLaunchItem(item);
}}
>
<Text pos={'absolute'} left={'1rem'} c={'var(--mantine-color-accent-0)'}>
Launch
</Text>
{Icon && (
<Icon
style={{
color: 'var(--mantine-color-primary-0)',
height: '2rem',
width: '2rem',
}}
/>
)}
<Text pos={'absolute'} right={'1rem'} c={'var(--mantine-color-accent-0)'}>
{item.option.name}
</Text>
</Group>
);
}}
onBlur={() => {
setPlaceholderValue('');
setListIndex(0);
closeDropdown();
}}
onFocus={() => {
if (searchValue !== '') {
openDropdown();
}
}}
onKeyDown={(e) => {
if (e.key === 'Tab') {
e.preventDefault();
}
}}
onInput={onInput}
onKeyUp={handleKeyUp}
/>
<HelpModal
setSearchValue={setSearchValue}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
applicationData={applications}
providerData={providers}
providerModalOpened={providerModalOpened}
closeProviderModal={closeProviderModal}
/>
<WeatherModal
current={current}
extendedForecast={extendedForecast}
weatherModalOpened={weatherModalOpened}
setSearchValue={setSearchValue}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
closeWeatherModal={closeWeatherModal}
/>
</Stack>
</>
); );
} }

576
src/pages/homepage/components/SettingsButton/SettingsButton.tsx
View File

@@ -1,32 +1,13 @@
import { import { Button, Group, Menu, Stack } from '@mantine/core';
ActionIcon,
Button,
type ComboboxItem,
Group,
Menu,
MultiSelect,
Overlay,
Select,
Slider,
Stack,
Text,
Tooltip,
} from '@mantine/core';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { FaDice } from 'react-icons/fa'; import { FiMenu, FiSettings } from 'react-icons/fi';
import { FiMenu, FiPower, FiSettings, FiShuffle } from 'react-icons/fi';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { import { buttonClasses, menuClasses } from 'styles';
actionIconClasses, import type { AppCategory, WolClient } from 'types';
buttonClasses, import SettingsCard from './SettingsCard';
menuClasses, import ThemingCard from './ThemingCard';
multiSelectClasses, import WakeOnLan from './WakeOnLanCard';
selectClasses,
sliderClasses,
stackClasses,
} from 'styles';
import type { AppCategory, Theme, ThemePlaylist, WolClient } from 'types';
function SettingsButton() { function SettingsButton() {
const { data: appCategoryData, isFetched: appCategoryDataIsFetched } = useQueryAPI({ const { data: appCategoryData, isFetched: appCategoryDataIsFetched } = useQueryAPI({
@@ -36,24 +17,14 @@ function SettingsButton() {
endpoint: 'api/wolClients', endpoint: 'api/wolClients',
}); });
const [wolClients, setWolClients] = useState<WolClient[]>([]); const [wolClients, setWolClients] = useState<WolClient[]>([]);
const { data: allThemeData, isFetched: allThemeDataIsFetched } = useQueryAPI({
endpoint: 'api/themes',
});
const { data: themePlaylistData } = useQueryAPI({
endpoint: 'api/themePlaylists',
});
const { mutateAsync } = useMutationAPI(); const { mutateAsync } = useMutationAPI();
const [allThemes, setAllThemes] = useState<Theme[]>([]);
const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]); const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
const [selectedClient] = useState<WolClient>(wolClientData?.[0]); const [selectedClient] = useState<WolClient>(wolClientData?.[0]);
const [overlayOpened, setOverlayOpened] = useState(false);
const navigate = useNavigate(); const navigate = useNavigate();
const { const {
currentTheme,
setCurrentTheme,
setThemeName,
handleThemeChange,
theme, theme,
isMobile,
appFilter, appFilter,
setAppFilter, setAppFilter,
appSort, appSort,
@@ -66,10 +37,8 @@ function SettingsButton() {
setBookmarkFilter, setBookmarkFilter,
bookmarkDensity, bookmarkDensity,
setBookmarkDensity, setBookmarkDensity,
isMobile,
currentThemePlaylist,
setCurrentThemePlaylist,
} = useCommonHooks(); } = useCommonHooks();
const handleWakeRequest = () => { const handleWakeRequest = () => {
mutateAsync({ mutateAsync({
method: 'POST', method: 'POST',
@@ -94,459 +63,84 @@ function SettingsButton() {
} }
}, [wolClientData, wolClientDataIsFetched]); }, [wolClientData, wolClientDataIsFetched]);
useEffect(() => {
if (allThemeData && allThemeDataIsFetched) {
setAllThemes(allThemeData);
}
}, [allThemeData, allThemeDataIsFetched]);
return ( return (
<> <Menu
{overlayOpened && ( classNames={menuClasses}
<Overlay width={isMobile ? '98%' : 'auto'}
pos={'fixed'} withArrow
blur={3} shadow='md'
onTouchStart={(e) => { position='top'
e.stopPropagation(); withOverlay
}} overlayProps={{
/> blur: 5,
)} }}
<Menu >
classNames={menuClasses} <Menu.Target>
width={isMobile ? '98%' : 'auto'} <Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
withArrow <FiMenu />
shadow='md' </Button>
position='top' </Menu.Target>
onOpen={() => setOverlayOpened(true)} <Menu.Dropdown
onClose={() => setOverlayOpened(false)} style={{
backgroundColor:
theme.backgroundImage.toLowerCase() !== 'none' &&
theme.backgroundImage !== undefined
? 'transparent'
: 'var(--mantine-color-background-0)',
}}
> >
<Menu.Target> <Group p={'1rem'} gap={12}>
<Button className={buttonClasses.settingsButton} classNames={buttonClasses}> <Stack
<FiMenu /> justify='center'
align='center'
style={{
display: 'flex',
flexDirection: isMobile ? 'row' : 'column',
width: isMobile ? '100%' : undefined,
}}
>
<WakeOnLan
wolClients={wolClients}
selectedClient={selectedClient}
handleWakeRequest={handleWakeRequest}
/>
<ThemingCard />
</Stack>
<Stack display={'flex'} align='center'>
<SettingsCard
categories={categories}
sectionTitle={'Applications'}
filter={appFilter}
setFilter={setAppFilter}
sort={appSort}
setSort={setAppSort}
density={appDensity}
setDensity={setAppDensity}
/>
<SettingsCard
categories={categories}
sectionTitle={'Bookmarks'}
filter={bookmarkFilter}
setFilter={setBookmarkFilter}
sort={bookmarkSort}
setSort={setBookmarkSort}
density={bookmarkDensity}
setDensity={setBookmarkDensity}
/>
</Stack>
</Group>
<Group mt={'-.75rem'} w={'100%'} align='center' justify='center'>
<Button
leftSection={<FiSettings />}
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
className={buttonClasses.settingsMenuButton}
classNames={buttonClasses}
>
Settings
</Button> </Button>
</Menu.Target> </Group>
<Menu.Dropdown </Menu.Dropdown>
style={{ </Menu>
backgroundColor:
theme.backgroundImage.toLowerCase() !== 'none' &&
theme.backgroundImage !== undefined
? 'transparent'
: 'var(--mantine-color-background-0)',
}}
>
<Group p={'1rem'} gap={12}>
<Stack
justify='center'
align='center'
style={{
display: 'flex',
flexDirection: isMobile ? 'row' : 'column',
width: isMobile ? '100%' : undefined,
}}
>
<Stack
gap={0}
align='center'
className={stackClasses.menuStack}
classNames={stackClasses}
style={{ aspectRatio: '1/1' }}
>
<Menu.Label>Wake on LAN</Menu.Label>
<Button
classNames={buttonClasses}
className={buttonClasses.wakeButton}
disabled={!wolClients?.length || selectedClient === null}
onClick={() => {
handleWakeRequest();
}}
>
<Stack gap={0} align='center'>
<FiPower size={32} />
</Stack>
</Button>
<Select
labelProps={{ display: 'none' }}
placeholder='Pick a host...'
defaultValue={wolClients?.[0]?.hostname}
data={
wolClients
?.map((wolClient: WolClient) => {
return {
value: wolClient.hostname,
label: `${wolClient.hostname} (${wolClient.macAddress})`,
hostname: wolClient.hostname,
macAddress: wolClient.macAddress,
};
})
.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []
}
w='92%'
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
width: 'fit-content',
}}
/>
</Stack>
<Stack
gap={0}
align='center'
className={stackClasses.menuStack}
classNames={stackClasses}
style={{ aspectRatio: '1/1' }}
>
<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>
<Tooltip
label='Shuffle Themes'
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
withArrow
>
<ActionIcon
className={actionIconClasses.menuActions}
classNames={actionIconClasses}
disabled={currentThemePlaylist === 'Time of Day'}
style={{
backgroundColor:
currentTheme === 'random'
? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
: 'transparent',
color:
currentTheme === 'random'
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-primary-0)',
}}
onClick={() => {
setCurrentTheme(
currentTheme === 'random' ? theme.name : 'random',
);
setCurrentThemePlaylist('All');
}}
>
<FiShuffle />
</ActionIcon>
</Tooltip>
<Tooltip
label='Random Theme'
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
withArrow
>
<ActionIcon
className={actionIconClasses.menuActions}
classNames={actionIconClasses}
style={{
backgroundColor: 'transparent',
color: 'var(--mantine-color-primary-0)',
}}
disabled={currentThemePlaylist === 'Time of Day'}
onClick={() => {
const themeList = JSON.parse(
themePlaylistData?.find(
(t: ThemePlaylist) => t?.name === currentThemePlaylist,
)?.themeList ?? '[]',
);
if (themeList.length > 0) {
const filteredThemes = allThemes.filter((t: Theme) =>
themeList.includes(t.id),
);
handleThemeChange(filteredThemes, false);
} else if (currentThemePlaylist === 'All') {
handleThemeChange(allThemes, false);
} else if (currentThemePlaylist === 'Backgrounds') {
handleThemeChange(
allThemes.filter(
(a: any) =>
!a.backgroundImage.toLowerCase().includes('none'),
),
false,
);
} else if (currentThemePlaylist === 'No Backgrounds') {
handleThemeChange(
allThemes.filter((a: any) =>
a.backgroundImage.toLowerCase().includes('none'),
),
false,
);
}
}}
>
<FaDice />
</ActionIcon>
</Tooltip>
</Group>
<Text fw={'bold'} fz={'1.125rem'}>
Currently:{' '}
</Text>
{theme.name}
<Text fw={'bold'} fz={'1.125rem'}>
Playlist:{' '}
</Text>
<Select
labelProps={{ display: 'none' }}
placeholder='Pick a playlist...'
value={currentThemePlaylist}
data={[
{ value: 'All', label: 'All' },
{
value: 'Backgrounds',
label: 'Backgrounds',
disabled:
allThemes.filter(
(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
).length === 0,
},
{
value: 'No Backgrounds',
label: 'No Backgrounds',
disabled:
allThemes.filter((a: any) =>
a.backgroundImage.toLowerCase().includes('none'),
).length === 0,
},
...(themePlaylistData
?.map((playlist: ThemePlaylist) => {
return {
value: playlist.name,
label: playlist.name,
disabled: JSON.parse(playlist.themeList).length === 0,
};
})
.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []),
]}
w='92%'
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
onChange={(_value, option: ComboboxItem) => {
setCurrentThemePlaylist(option.value);
if (option.value !== 'Time of Day') {
setThemeName('random');
} else {
const themeList = JSON.parse(
themePlaylistData.find(
(t: ThemePlaylist) => t.name === 'Time of Day',
).themeList,
);
setThemeName(
allThemeData.find(
(t: Theme) =>
t.id ===
Number(themeList[Math.floor(new Date().getHours() / 6)]),
).name,
);
}
}}
/>
</Stack>
</Stack>
<Stack display={'flex'} align='center'>
<Stack
gap={0}
align='center'
justify='space-between'
className={stackClasses.menuStack}
classNames={stackClasses}
pos={'relative'}
>
<Text
style={{
fontSize: '.75rem',
paddingLeft: '.5rem',
paddingRight: '.5rem',
paddingTop: '.125rem',
paddingBottom: '.125rem',
borderRadius: 8,
position: 'absolute',
left: -12,
top: -8,
backgroundColor: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
}}
>
Apps
</Text>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
restrictToMarks
value={appDensity}
onChange={(value) => setAppDensity(value)}
min={1}
max={8}
/>
</Stack>
<Group justify='center' mb={'.25rem'}>
<MultiSelect
label='Filter'
data={
categories.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []
}
placeholder={
appFilter.length > 0
? appFilter.length === 1
? appFilter[0]
: `${appFilter.length} apps selected`
: 'No apps selected'
}
defaultValue={appFilter}
onChange={(data: string[]) => {
setAppFilter(data);
}}
classNames={multiSelectClasses}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
/>
<Select
label={'Sorting'}
placeholder='Sort Applications...'
value={appSort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
onChange={(_value, option: ComboboxItem) => {
setAppSort(option.value);
}}
/>
</Group>
</Stack>
<Stack
gap={0}
align='center'
justify='space-between'
className={stackClasses.menuStack}
classNames={stackClasses}
pos={'relative'}
>
<Text
style={{
fontSize: '.75rem',
paddingLeft: '.5rem',
paddingRight: '.5rem',
paddingTop: '.125rem',
paddingBottom: '.125rem',
borderRadius: 8,
position: 'absolute',
left: -12,
top: -8,
backgroundColor: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
}}
>
Bookmarks
</Text>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
restrictToMarks
value={bookmarkDensity}
onChange={(value) => setBookmarkDensity(value)}
min={1}
max={8}
/>
</Stack>
<Group justify='center' mb={'.25rem'}>
<MultiSelect
label='Filter'
data={
categories.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []
}
placeholder={
bookmarkFilter.length > 0
? bookmarkFilter.length === 1
? bookmarkFilter[0]
: `${bookmarkFilter.length} bookmarks selected`
: 'No bookmarks selected'
}
defaultValue={bookmarkFilter}
onChange={(data: string[]) => {
setBookmarkFilter(data);
}}
classNames={multiSelectClasses}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
/>
<Select
label={'Sorting'}
placeholder='Sort Bookmarks...'
value={bookmarkSort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
classNames={{
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
root: selectClasses.menuSelectRoot,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
onChange={(_value, option: ComboboxItem) => {
setBookmarkSort(option.value);
}}
/>
</Group>
</Stack>
</Stack>
</Group>
<Group mt={'-.75rem'} w={'100%'} align='center' justify='center'>
<Button
leftSection={<FiSettings />}
onClick={() => navigate(`/${import.meta.env.VITE_BASE_URL}/settings`)}
className={buttonClasses.settingsMenuButton}
classNames={buttonClasses}
>
Settings
</Button>
</Group>
</Menu.Dropdown>
</Menu>
</>
); );
} }

121
src/pages/homepage/components/SettingsButton/SettingsCard.tsx Normal file
View File

@@ -0,0 +1,121 @@
import {
type ComboboxItem,
Group,
MultiSelect,
Select,
Slider,
Stack,
Text,
} from '@mantine/core';
import { multiSelectClasses, selectClasses, sliderClasses, stackClasses } from 'styles';
function SettingsCard({
categories,
sectionTitle,
filter,
setFilter,
sort,
setSort,
density,
setDensity,
}: {
categories: ComboboxItem[];
sectionTitle: string;
filter: any;
setFilter: any;
sort: any;
setSort: any;
density: any;
setDensity: any;
}) {
return (
<Stack
gap={0}
align='center'
justify='space-between'
className={stackClasses.menuStack}
classNames={stackClasses}
pos={'relative'}
>
<Text
style={{
fontSize: '.75rem',
paddingLeft: '.5rem',
paddingRight: '.5rem',
paddingTop: '.125rem',
paddingBottom: '.125rem',
borderRadius: 8,
position: 'absolute',
left: -12,
top: -8,
backgroundColor: 'var(--mantine-color-primary-0)',
color: 'var(--mantine-color-background-0)',
}}
>
{sectionTitle}
</Text>
<Text fz={'.875rem'} mt={'1rem'}>
Density
</Text>
<Stack m={0} p={0} gap={0} w={'90%'}>
<Slider
className={sliderClasses.default}
classNames={sliderClasses}
restrictToMarks
value={density}
onChange={(value) => setDensity(value)}
min={1}
max={8}
/>
</Stack>
<Group justify='center' mb={'.25rem'}>
<MultiSelect
label='Filter'
data={
categories.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []
}
placeholder={
filter.length > 0
? filter.length === 1
? filter[0]
: `${filter.length} ${sectionTitle.toLocaleLowerCase()}s selected`
: `No ${sectionTitle.toLocaleLowerCase()}s selected`
}
defaultValue={filter}
onChange={(data: string[]) => {
setFilter(data);
}}
classNames={multiSelectClasses}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
/>
<Select
label={'Sorting'}
placeholder={`Sort ${sectionTitle}...`}
value={sort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
onChange={(_value, option: ComboboxItem) => {
setSort(option.value);
}}
/>
</Group>
</Stack>
);
}
export default SettingsCard;

201
src/pages/homepage/components/SettingsButton/ThemingCard.tsx Normal file
View File

@@ -0,0 +1,201 @@
import {
ActionIcon,
type ComboboxItem,
Group,
Menu,
Select,
Stack,
Text,
Tooltip,
} from '@mantine/core';
import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react';
import { FaDice } from 'react-icons/fa';
import { FiShuffle } from 'react-icons/fi';
import { actionIconClasses, selectClasses, stackClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types';
function ThemingCard() {
const { data: themePlaylistData } = useQueryAPI({
endpoint: 'api/themePlaylists',
});
const { data: allThemeData, isFetched: allThemeDataIsFetched } = useQueryAPI({
endpoint: 'api/themes',
});
const [allThemes, setAllThemes] = useState<Theme[]>([]);
useEffect(() => {
if (allThemeData && allThemeDataIsFetched) {
setAllThemes(allThemeData);
}
}, [allThemeData, allThemeDataIsFetched]);
const {
currentTheme,
setCurrentTheme,
setThemeName,
handleThemeChange,
theme,
currentThemePlaylist,
setCurrentThemePlaylist,
} = useCommonHooks();
return (
<Stack
gap={0}
align='center'
className={stackClasses.menuStack}
classNames={stackClasses}
style={{ aspectRatio: '1/1' }}
>
<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>
<Tooltip
label='Shuffle Themes'
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
withArrow
>
<ActionIcon
className={actionIconClasses.menuActions}
classNames={actionIconClasses}
disabled={currentThemePlaylist === 'Time of Day'}
style={{
backgroundColor:
currentTheme === 'random'
? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
: 'transparent',
color:
currentTheme === 'random'
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-primary-0)',
}}
onClick={() => {
setCurrentTheme(currentTheme === 'random' ? theme.name : 'random');
setCurrentThemePlaylist('All');
}}
>
<FiShuffle />
</ActionIcon>
</Tooltip>
<Tooltip
label='Random Theme'
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
withArrow
>
<ActionIcon
className={actionIconClasses.menuActions}
classNames={actionIconClasses}
style={{
backgroundColor: 'transparent',
color: 'var(--mantine-color-primary-0)',
}}
disabled={currentThemePlaylist === 'Time of Day'}
onClick={() => {
const themeList = JSON.parse(
themePlaylistData?.find(
(t: ThemePlaylist) => t?.name === currentThemePlaylist,
)?.themeList ?? '[]',
);
if (themeList.length > 0) {
const filteredThemes = allThemes.filter((t: Theme) =>
themeList.includes(t.id),
);
handleThemeChange(filteredThemes, false);
} else if (currentThemePlaylist === 'All') {
handleThemeChange(allThemes, false);
} else if (currentThemePlaylist === 'Backgrounds') {
handleThemeChange(
allThemes.filter(
(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
),
false,
);
} else if (currentThemePlaylist === 'No Backgrounds') {
handleThemeChange(
allThemes.filter((a: any) =>
a.backgroundImage.toLowerCase().includes('none'),
),
false,
);
}
}}
>
<FaDice />
</ActionIcon>
</Tooltip>
</Group>
<Text fw={'bold'} fz={'1.125rem'}>
Currently:{' '}
</Text>
{theme.name}
<Text fw={'bold'} fz={'1.125rem'}>
Playlist:{' '}
</Text>
<Select
labelProps={{ display: 'none' }}
placeholder='Pick a playlist...'
value={currentThemePlaylist}
data={[
{ value: 'All', label: 'All' },
{
value: 'Backgrounds',
label: 'Backgrounds',
disabled:
allThemes.filter(
(a: any) => !a.backgroundImage.toLowerCase().includes('none'),
).length === 0,
},
{
value: 'No Backgrounds',
label: 'No Backgrounds',
disabled:
allThemes.filter((a: any) =>
a.backgroundImage.toLowerCase().includes('none'),
).length === 0,
},
...(themePlaylistData
?.map((playlist: ThemePlaylist) => {
return {
value: playlist.name,
label: playlist.name,
disabled: JSON.parse(playlist.themeList).length === 0,
};
})
.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []),
]}
w='92%'
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
}}
onChange={(_value, option: ComboboxItem) => {
setCurrentThemePlaylist(option.value);
if (option.value !== 'Time of Day') {
setThemeName('random');
} else {
const themeList = JSON.parse(
themePlaylistData.find((t: ThemePlaylist) => t.name === 'Time of Day')
.themeList,
);
setThemeName(
allThemeData.find(
(t: Theme) =>
t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
).name,
);
}
}}
/>
</Stack>
);
}
export default ThemingCard;

72
src/pages/homepage/components/SettingsButton/WakeOnLanCard.tsx Normal file
View File

@@ -0,0 +1,72 @@
import { Button, type ComboboxItem, Menu, Select, Stack } from '@mantine/core';
import { FiPower } from 'react-icons/fi';
import { buttonClasses, selectClasses, stackClasses } from 'styles';
import type { WolClient } from 'types';
function WakeOnLan({
wolClients,
selectedClient,
handleWakeRequest,
}: {
wolClients: WolClient[];
selectedClient: WolClient | null;
handleWakeRequest: () => void;
}) {
return (
<Stack
gap={0}
align='center'
className={stackClasses.menuStack}
classNames={stackClasses}
style={{ aspectRatio: '1/1' }}
>
<Menu.Label>Wake on LAN</Menu.Label>
<Button
classNames={buttonClasses}
className={buttonClasses.wakeButton}
disabled={!wolClients?.length || selectedClient === null}
onClick={() => {
handleWakeRequest();
}}
>
<Stack gap={0} align='center'>
<FiPower size={32} />
</Stack>
</Button>
<Select
labelProps={{ display: 'none' }}
placeholder='Pick a host...'
defaultValue={wolClients?.[0]?.hostname}
data={
wolClients
?.map((wolClient: WolClient) => {
return {
value: wolClient.hostname,
label: `${wolClient.hostname} (${wolClient.macAddress})`,
hostname: wolClient.hostname,
macAddress: wolClient.macAddress,
};
})
.toSorted((a: ComboboxItem, b: ComboboxItem) =>
a.label.localeCompare(b.label),
) ?? []
}
w='92%'
classNames={{
root: selectClasses.menuSelectRoot,
input: selectClasses.menuSelectInput,
label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption,
}}
comboboxProps={{
withinPortal: false,
position: 'top',
width: 'fit-content',
}}
/>
</Stack>
);
}
export default WakeOnLan;

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

@@ -4,7 +4,6 @@ import {
Button, Button,
type ComboboxItem, type ComboboxItem,
type ComboboxLikeRenderOptionInput, type ComboboxLikeRenderOptionInput,
Divider,
Grid, Grid,
GridCol, GridCol,
Group, Group,
@@ -223,14 +222,8 @@ const ApplicationSettings = () => {
withAsterisk withAsterisk
/> />
</Group> </Group>
<Group mt={'1rem'}>
<Divider color='black' my='lg' /> <Button type='submit' color={'green'}>
<Group pos={'absolute'} bottom={8}>
<Button
type='submit'
color={'green'}
styles={{ label: { color: 'black' } }}
>
Save Save
</Button> </Button>
<Button <Button

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

@@ -1,5 +1,5 @@
import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd'; import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
import { Box, Button, Card, Divider, Group, Stack, Text, TextInput } from '@mantine/core'; import { Box, Button, Card, Group, Stack, Text, TextInput } from '@mantine/core';
import { isNotEmpty, useForm } from '@mantine/form'; import { isNotEmpty, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
@@ -160,14 +160,8 @@ const BookmarkSettings = () => {
withAsterisk withAsterisk
/> />
</Group> </Group>
<Group mt={'1rem'}>
<Divider color='black' my='lg' /> <Button type='submit' color={'green'}>
<Group pos={'absolute'} bottom={8}>
<Button
type='submit'
color={'green'}
styles={{ label: { color: 'black' } }}
>
Save Save
</Button> </Button>
<Button <Button

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

@@ -388,11 +388,7 @@ function DebouncedGroupSettingsItem({
align='center' align='center'
justify='center' justify='center'
> >
<Button <Button type='submit' color={'green'}>
type='submit'
color={'green'}
styles={{ label: { color: 'black' } }}
>
Save Save
</Button> </Button>
<Button <Button

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

@@ -1,4 +1,4 @@
import { Button, Divider, Grid, GridCol, Group, Stack, TextInput } from '@mantine/core'; import { Button, Grid, GridCol, Group, Stack, TextInput } from '@mantine/core';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@@ -92,11 +92,9 @@ const MessageSettings = () => {
}} }}
error={newMessageError} error={newMessageError}
/> />
<Divider color='black' my='lg' /> <Group mt={'1rem'}>
<Group pos={'absolute'} bottom={8}>
<Button <Button
color={'green'} color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => { onClick={() => {
if (newMessage) { if (newMessage) {
mutateAsync({ mutateAsync({

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

@@ -76,7 +76,7 @@ const PersonalizationSettings = () => {
style={{ style={{
borderRadius: '10px', borderRadius: '10px',
margin: '-.5rem', margin: '-.5rem',
backdropFilter: 'blur(10px) brightness(1.2)', backdropFilter: 'blur(5px) brightness(1.2)',
}} }}
/> />
)} )}

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

@@ -1,7 +1,6 @@
import { import {
Box, Box,
Button, Button,
Divider,
Grid, Grid,
GridCol, GridCol,
Group, Group,
@@ -121,13 +120,8 @@ const SearchProviderSettings = () => {
withAsterisk withAsterisk
/> />
</Stack> </Stack>
<Divider color='black' my='lg' /> <Group mt={'1rem'}>
<Group pos={'absolute'} bottom={8}> <Button type='submit' color={'green'}>
<Button
type='submit'
color={'green'}
styles={{ label: { color: 'black' } }}
>
Save Save
</Button> </Button>
<Button <Button

4
src/pages/settings/components/Shared/AddItemModal.tsx
View File

@@ -27,8 +27,8 @@ function AddItemModal({
closeOnClickOutside closeOnClickOutside
centered centered
> >
<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} /> <Modal.Overlay />
<Modal.Content style={{ zIndex: 1000 }} h={'auto'}> <Modal.Content h={'auto'}>
<Modal.Header> <Modal.Header>
<Modal.Title>{title}</Modal.Title> <Modal.Title>{title}</Modal.Title>
<Modal.CloseButton /> <Modal.CloseButton />

2
src/pages/settings/components/Shared/DeleteItemModal.tsx
View File

@@ -28,7 +28,7 @@ function DeleteItemModal({
closeOnClickOutside closeOnClickOutside
centered centered
> >
<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} /> <Modal.Overlay />
<Modal.Content style={{ zIndex: 1000 }} h={'auto'}> <Modal.Content style={{ zIndex: 1000 }} h={'auto'}>
<Modal.Header> <Modal.Header>
<Modal.Title>{title}</Modal.Title> <Modal.Title>{title}</Modal.Title>

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

@@ -53,7 +53,7 @@ function SettingsHeader({
align='center' align='center'
justify='center' justify='center'
style={{ style={{
backdropFilter: 'blur(10px) brightness(.75)', backdropFilter: 'blur(5px) brightness(.75)',
zIndex: 199, zIndex: 199,
paddingTop: '1.5rem', paddingTop: '1.5rem',
paddingBottom: '1.5rem', paddingBottom: '1.5rem',

2
src/pages/settings/components/Theming/BackgroundModal.tsx
View File

@@ -63,7 +63,7 @@ function BackgroundModal({
fullScreen={isMobile} fullScreen={isMobile}
centered centered
> >
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} /> <Modal.Overlay />
<Modal.Content> <Modal.Content>
<Modal.Header style={{ justifyContent: 'center' }}> <Modal.Header style={{ justifyContent: 'center' }}>
<Group pos={'absolute'}> <Group pos={'absolute'}>

30
src/pages/settings/components/Theming/ThemeCard.tsx
View File

@@ -3,7 +3,7 @@ import { useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI } from 'hooks'; import { useCommonHooks, useMutationAPI } from 'hooks';
import { useState } from 'react'; import { useState } from 'react';
import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi'; import { FiEdit, FiShuffle, FiTrash, FiX } from 'react-icons/fi';
import { actionIconClasses } from 'styles'; import { actionIconClasses, boxClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types'; import type { Theme, ThemePlaylist } from 'types';
import DeleteItemModal from '../Shared/DeleteItemModal'; import DeleteItemModal from '../Shared/DeleteItemModal';
@@ -143,7 +143,7 @@ function ThemeCard({
<Group w={'100%'}> <Group w={'100%'}>
<Box <Box
style={{ style={{
height: '5px', height: '.25rem',
width: '40px', width: '40px',
backgroundColor: cardTheme.primaryColor, backgroundColor: cardTheme.primaryColor,
borderRadius: '4px', borderRadius: '4px',
@@ -152,42 +152,24 @@ function ThemeCard({
</Group> </Group>
<Group w={'100%'}> <Group w={'100%'}>
<Box <Box
className={boxClasses.appItemExampleText}
style={{ style={{
height: '10px',
width: '40px',
borderRadius: '4px',
backdropFilter: 'blur(10px) brightness(1.5)',
fontSize: '.375rem',
justifyContent: 'center',
alignContent: 'center',
color: cardTheme.primaryColor, color: cardTheme.primaryColor,
}} }}
> >
lorem ipsum lorem ipsum
</Box> </Box>
<Box <Box
className={boxClasses.appItemExampleText}
style={{ style={{
height: '10px',
width: '40px',
borderRadius: '4px',
backdropFilter: 'blur(10px) brightness(1.5)',
fontSize: '.375rem',
justifyContent: 'center',
alignContent: 'center',
color: cardTheme.primaryColor, color: cardTheme.primaryColor,
}} }}
> >
lorem ipsum lorem ipsum
</Box> </Box>
<Box <Box
className={boxClasses.appItemExampleText}
style={{ style={{
height: '10px',
width: '40px',
borderRadius: '4px',
backdropFilter: 'blur(10px) brightness(1.5)',
fontSize: '.375rem',
justifyContent: 'center',
alignContent: 'center',
color: cardTheme.primaryColor, color: cardTheme.primaryColor,
}} }}
> >
@@ -230,6 +212,7 @@ function ThemeCard({
fontSize: '2rem', fontSize: '2rem',
fontWeight: 'bold', fontWeight: 'bold',
color: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)', color: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
cursor: 'pointer',
}} }}
/> />
</Group> </Group>
@@ -291,6 +274,7 @@ function ThemeCard({
fontSize: '2rem', fontSize: '2rem',
fontWeight: 'bold', fontWeight: 'bold',
color: shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)', color: shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
cursor: 'pointer',
}} }}
/> />
</Group> </Group>

125
src/pages/settings/components/Theming/ThemeModal.tsx
View File

@@ -1,8 +1,6 @@
import { import {
Button, Button,
ColorPicker, ColorPicker,
ColorSwatch,
Divider,
Group, Group,
Modal, Modal,
ScrollArea, ScrollArea,
@@ -14,8 +12,9 @@ import {
import { useCommonHooks } from 'hooks'; import { useCommonHooks } from 'hooks';
import { useEffect, useRef, useState } from 'react'; import { useEffect, useRef, useState } from 'react';
import { FiSave, FiX } from 'react-icons/fi'; import { FiSave, FiX } from 'react-icons/fi';
import { modalClasses, scrollAreaClasses, textClasses, textInputClasses } from 'styles'; import { modalClasses, scrollAreaClasses, textInputClasses } from 'styles';
import type { Theme } from 'types'; import type { Theme } from 'types';
import ThemeModalColorSwatches from './ThemeModalColorSwatches';
import ThemeModalContent from './ThemeModalContent'; import ThemeModalContent from './ThemeModalContent';
function ThemeModal({ function ThemeModal({
@@ -86,7 +85,7 @@ function ThemeModal({
<Text <Text
style={{ style={{
width: 'min-content', width: 'min-content',
backdropFilter: 'blur(10px) brightness(.25)', backdropFilter: 'blur(5px) brightness(.25)',
padding: '.5rem', padding: '.5rem',
borderBottomRightRadius: 4, borderBottomRightRadius: 4,
marginTop: '-2.15rem', marginTop: '-2.15rem',
@@ -100,7 +99,7 @@ function ThemeModal({
<Text <Text
style={{ style={{
width: 'min-content', width: 'min-content',
backdropFilter: 'blur(10px) brightness(.25)', backdropFilter: 'blur(5px) brightness(.25)',
padding: '.5rem', padding: '.5rem',
marginTop: '2rem', marginTop: '2rem',
marginBottom: -1, marginBottom: -1,
@@ -136,7 +135,7 @@ function ThemeModal({
fullScreen={isMobile} fullScreen={isMobile}
centered centered
> >
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} /> <Modal.Overlay />
<Modal.Content> <Modal.Content>
<Modal.Header style={{ justifyContent: 'center' }}> <Modal.Header style={{ justifyContent: 'center' }}>
<Group pos={'absolute'}> <Group pos={'absolute'}>
@@ -164,7 +163,6 @@ function ThemeModal({
</Modal.Header> </Modal.Header>
<Modal.Body p={'2rem'}> <Modal.Body p={'2rem'}>
<ThemeModalContent selectedTheme={selectedTheme} /> <ThemeModalContent selectedTheme={selectedTheme} />
<Divider color='black' my='sm' />
<Group <Group
w={'100%'} w={'100%'}
h={'100%'} h={'100%'}
@@ -191,7 +189,6 @@ function ThemeModal({
/> />
<Button <Button
color={'green'} color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => { onClick={() => {
switch (colorId) { switch (colorId) {
case 'primaryColor': case 'primaryColor':
@@ -241,103 +238,12 @@ function ThemeModal({
</Group> </Group>
</Group> </Group>
) : ( ) : (
<Stack h={isMobile ? '100%' : 256} justify='center'> <ThemeModalColorSwatches
<Group justify='space-between'> selectedTheme={selectedTheme}
<Text className={textClasses.label} classNames={textClasses}> openPicker={openPicker}
Primary Color setColorId={setColorId}
</Text> setColorValue={setColorValue}
<ColorSwatch />
onClick={() => {
setColorId('primaryColor');
openPicker();
setColorValue(selectedTheme.primaryColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.primaryColor}
style={{
cursor: 'pointer',
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Accent Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('accentColor');
openPicker();
setColorValue(selectedTheme.accentColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.accentColor}
style={{
cursor: 'pointer',
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('background');
openPicker();
setColorValue(selectedTheme.backgroundColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.backgroundColor}
style={{
cursor: 'pointer',
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Border Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('borderColor');
openPicker();
setColorValue(selectedTheme.borderColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.borderColor}
style={{
cursor: 'pointer',
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Search Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('searchBackground');
openPicker();
setColorValue(selectedTheme.searchColor);
}}
radius={'sm'}
w={'100px'}
color={selectedTheme.searchColor}
style={{
cursor: 'pointer',
border: '2px dashed var(--mantine-color-primary-0)',
}}
/>
</Group>
</Stack>
)} )}
</Stack> </Stack>
<Stack <Stack
@@ -409,13 +315,8 @@ function ThemeModal({
</ScrollArea.Autosize> </ScrollArea.Autosize>
</Stack> </Stack>
</Group> </Group>
<Divider color='black' my='sm' /> <Group>
<Group pos={'absolute'} bottom={isMobile ? -72 : 8}> <Button color={'green'} onClick={handleSaveTheme}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={handleSaveTheme}
>
Save Save
</Button> </Button>
<Button <Button

99
src/pages/settings/components/Theming/ThemeModalColorSwatches.tsx Normal file
View File

@@ -0,0 +1,99 @@
import { ColorSwatch, Group, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { colorSwatchClasses, textClasses } from 'styles';
import type { Theme } from 'types';
function ThemeModalColorSwatches({
selectedTheme,
openPicker,
setColorId,
setColorValue,
}: {
selectedTheme: Theme;
openPicker: () => void;
setColorId: (colorId: string) => void;
setColorValue: (colorValue: string) => void;
}) {
const { isMobile } = useCommonHooks();
return (
<Stack h={isMobile ? '100%' : 256} justify='center'>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Primary Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('primaryColor');
openPicker();
setColorValue(selectedTheme.primaryColor);
}}
color={selectedTheme.primaryColor}
className={colorSwatchClasses.default}
classNames={colorSwatchClasses}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Accent Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('accentColor');
openPicker();
setColorValue(selectedTheme.accentColor);
}}
color={selectedTheme.accentColor}
className={colorSwatchClasses.default}
classNames={colorSwatchClasses}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('background');
openPicker();
setColorValue(selectedTheme.backgroundColor);
}}
color={selectedTheme.backgroundColor}
className={colorSwatchClasses.default}
classNames={colorSwatchClasses}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Border Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('borderColor');
openPicker();
setColorValue(selectedTheme.borderColor);
}}
color={selectedTheme.borderColor}
className={colorSwatchClasses.default}
classNames={colorSwatchClasses}
/>
</Group>
<Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}>
Search Background Color
</Text>
<ColorSwatch
onClick={() => {
setColorId('searchBackground');
openPicker();
setColorValue(selectedTheme.searchColor);
}}
color={selectedTheme.searchColor}
className={colorSwatchClasses.default}
classNames={colorSwatchClasses}
/>
</Group>
</Stack>
);
}
export default ThemeModalColorSwatches;

21
src/pages/settings/components/Theming/ThemePlaylistModal.tsx
View File

@@ -1,12 +1,4 @@
import { import { Button, Group, Modal, SimpleGrid, Text, TextInput } from '@mantine/core';
Button,
Divider,
Group,
Modal,
SimpleGrid,
Text,
TextInput,
} from '@mantine/core';
import { useCommonHooks } from 'hooks'; import { useCommonHooks } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { modalClasses, textInputClasses } from 'styles'; import { modalClasses, textInputClasses } from 'styles';
@@ -59,7 +51,7 @@ function ThemePlaylistModal({
setThemeList('[]'); setThemeList('[]');
}} }}
> >
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} /> <Modal.Overlay />
<Modal.Content> <Modal.Content>
<Modal.Header style={{ justifyContent: 'center' }}> <Modal.Header style={{ justifyContent: 'center' }}>
<Group pos={'absolute'}> <Group pos={'absolute'}>
@@ -113,13 +105,8 @@ function ThemePlaylistModal({
); );
})} })}
</SimpleGrid> </SimpleGrid>
<Divider color='black' my='sm' /> <Group mt={'1rem'}>
<Group> <Button color={'green'} onClick={handleSavePlaylist}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={handleSavePlaylist}
>
Save Save
</Button> </Button>
<Button <Button

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

@@ -252,7 +252,7 @@ function ThemesSettings() {
</Group> </Group>
<Group <Group
style={{ style={{
backdropFilter: 'blur(10px) brightness(.75)', backdropFilter: 'blur(5px) brightness(.75)',
zIndex: 199, zIndex: 199,
paddingTop: isMobile ? '.5rem' : '1.5rem', paddingTop: isMobile ? '.5rem' : '1.5rem',
paddingBottom: '1.5rem', paddingBottom: '1.5rem',

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

@@ -1,13 +1,4 @@
import { import { Button, Grid, GridCol, Group, Popover, Stack, TextInput } from '@mantine/core';
Button,
Divider,
Grid,
GridCol,
Group,
Popover,
Stack,
TextInput,
} from '@mantine/core';
import { isNotEmpty, matches, useForm } from '@mantine/form'; import { isNotEmpty, matches, useForm } from '@mantine/form';
import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
@@ -105,13 +96,8 @@ const WolClientSettings = () => {
withAsterisk withAsterisk
/> />
</Group> </Group>
<Divider color='black' my='lg' /> <Group mt={'1rem'}>
<Group pos={'absolute'} bottom={8}> <Button type='submit' color={'green'}>
<Button
type='submit'
color={'green'}
styles={{ label: { color: 'black' } }}
>
Save Save
</Button> </Button>
<Button <Button

14
src/styles/Box.module.css
View File

@@ -17,7 +17,7 @@
flex-wrap: wrap; flex-wrap: wrap;
height: 128px; height: 128px;
margin: 0; margin: 0;
backdrop-filter: blur(10px) brightness(1.2); backdrop-filter: blur(5px) brightness(1.2);
border-radius: 6px; border-radius: 6px;
font-size: 2rem; font-size: 2rem;
font-weight: 400; font-weight: 400;
@@ -34,7 +34,7 @@
} }
.appItemBox rect::after { .appItemBox rect::after {
filter: blur(10px); filter: blur(5px);
} }
@keyframes svgAnimation { @keyframes svgAnimation {
@@ -45,3 +45,13 @@
stroke-dashoffset: 1000; stroke-dashoffset: 1000;
} }
} }
.appItemExampleText {
height: 10px;
width: 40px;
border-radius: 4px;
backdrop-filter: blur(5px) brightness(1.5);
font-size: .375rem;
justify-content: center;
align-content: center;
}

4
src/styles/Card.module.css
View File

@@ -2,7 +2,7 @@
&.root { &.root {
color: var(--mantine-color-primary-0); color: var(--mantine-color-primary-0);
background-color: transparent; background-color: transparent;
backdrop-filter: blur(10px) brightness(1.25) !important; backdrop-filter: blur(5px) brightness(1.25) !important;
} }
} }
@@ -10,7 +10,7 @@
&.root { &.root {
color: var(--mantine-color-primary-0); color: var(--mantine-color-primary-0);
background-color: transparent; background-color: transparent;
backdrop-filter: blur(10px) brightness(1.25) !important; backdrop-filter: blur(5px) brightness(1.25) !important;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: var(--mantine-color-accent-0); color: var(--mantine-color-accent-0);

21
src/styles/ColorSwatch.module.css Normal file
View File

@@ -0,0 +1,21 @@
.default {
&.root {
width: 100px;
cursor: pointer;
border: 2px dashed var(--mantine-color-primary-0);
border-radius: .25rem;
.alphaOverlay {
border-radius: .25rem;
}
.colorOverlay {
border-radius: .25rem;
}
.shadowOverlay {
border-radius: .25rem;
}
.childrenOverlay {
border-radius: .25rem;
}
}
}

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

@@ -1,7 +1,7 @@
.dropdown { .dropdown {
color: var(--mantine-color-primary-0); color: var(--mantine-color-primary-0);
border-color: var(--mantine-color-primary-0) !important; border-color: var(--mantine-color-primary-0) !important;
backdrop-filter: blur(10px) brightness(3) !important; backdrop-filter: blur(5px) brightness(3) !important;
} }
.item { .item {
&:hover { &:hover {

10
src/styles/Modal.module.css
View File

@@ -12,8 +12,6 @@
.close { .close {
color: white; color: white;
background-color: var(--mantine-color-red-6); background-color: var(--mantine-color-red-6);
max-width: 20px !important;
max-height: 20px !important;
&:hover { &:hover {
color: var(--mantine-color-red-1); color: var(--mantine-color-red-1);
background-color: var(--mantine-color-red-4); background-color: var(--mantine-color-red-4);
@@ -24,6 +22,9 @@
margin-top: 1rem; margin-top: 1rem;
} }
} }
.overlay {
backdrop-filter: blur(5px);
}
} }
} }
.editThemeModal { .editThemeModal {
@@ -39,8 +40,6 @@
.close { .close {
color: white; color: white;
background-color: var(--mantine-color-red-6); background-color: var(--mantine-color-red-6);
max-width: 20px !important;
max-height: 20px !important;
&:hover { &:hover {
color: var(--mantine-color-red-1); color: var(--mantine-color-red-1);
background-color: var(--mantine-color-red-4); background-color: var(--mantine-color-red-4);
@@ -53,5 +52,8 @@
align-items: center; align-items: center;
} }
} }
.overlay {
backdrop-filter: blur(5px);
}
} }
} }

4
src/styles/Popover.module.css
View File

@@ -1,3 +1,7 @@
.dropdown { .dropdown {
border: solid 2px var(--mantine-color-border-0) !important; border: solid 2px var(--mantine-color-border-0) !important;
} }
.overlay {
backdrop-filter: blur(5px) !important;
}

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

@@ -45,7 +45,7 @@
.dropdown { .dropdown {
border: none !important; border: none !important;
background-color: var(--mantine-color-search-0) !important; background-color: var(--mantine-color-search-0) !important;
backdrop-filter: blur(10px) !important; backdrop-filter: blur(5px) !important;
} }
.options { .options {

4
src/styles/Stack.module.css
View File

@@ -18,7 +18,7 @@
flex-wrap: wrap; flex-wrap: wrap;
height: 64px; height: 64px;
margin: 0; margin: 0;
backdrop-filter: blur(10px) brightness(1.2); backdrop-filter: blur(5px) brightness(1.2);
border-radius: 6px; border-radius: 6px;
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
@@ -35,7 +35,7 @@
} }
.appItemBox rect::after { .appItemBox rect::after {
filter: blur(10px); filter: blur(5px);
} }
@keyframes svgAnimation { @keyframes svgAnimation {

2
src/styles/index.ts
View File

@@ -2,6 +2,7 @@ import actionIconClasses from './ActionIcon.module.css';
import boxClasses from './Box.module.css'; import boxClasses from './Box.module.css';
import buttonClasses from './Button.module.css'; import buttonClasses from './Button.module.css';
import cardClasses from './Card.module.css'; import cardClasses from './Card.module.css';
import colorSwatchClasses from './ColorSwatch.module.css';
import menuClasses from './Menu.module.css'; import menuClasses from './Menu.module.css';
import modalClasses from './Modal.module.css'; import modalClasses from './Modal.module.css';
import multiSelectClasses from './MultiSelect.module.css'; import multiSelectClasses from './MultiSelect.module.css';
@@ -21,6 +22,7 @@ export {
boxClasses, boxClasses,
buttonClasses, buttonClasses,
cardClasses, cardClasses,
colorSwatchClasses,
menuClasses, menuClasses,
modalClasses, modalClasses,
multiSelectClasses, multiSelectClasses,