Bugfixes and updates
This commit is contained in:
Sean Edmunds
319
package-lock.json
generated
319
package-lock.json
generated
@@ -13,26 +13,26 @@
|
||||
"@mantine/form": "^8.1.1",
|
||||
"@mantine/hooks": "^8.1.1",
|
||||
"@mantine/notifications": "^8.1.1",
|
||||
"@tanstack/react-query": "^5.80.10",
|
||||
"@tanstack/react-query-devtools": "^5.80.10",
|
||||
"@tanstack/react-query-persist-client": "^5.80.10",
|
||||
"@tanstack/react-query": "^5.81.2",
|
||||
"@tanstack/react-query-devtools": "^5.81.2",
|
||||
"@tanstack/react-query-persist-client": "^5.81.2",
|
||||
"idb-keyval": "^6.2.2",
|
||||
"jotai": "^2.12.5",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^7.6.2",
|
||||
"recharts": "^2.15.3"
|
||||
"recharts": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.0.3",
|
||||
"@types/node": "^24.0.4",
|
||||
"@types/react": "^19.1.8",
|
||||
"@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/ui": "^3.2.4",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.5",
|
||||
"vite": "^7.0.0",
|
||||
"vite-plugin-dts": "~4.5.4",
|
||||
"vite-tsconfig-paths": "^5.1.4",
|
||||
"vitest": "^3.2.4"
|
||||
@@ -1160,10 +1160,36 @@
|
||||
"dev": true,
|
||||
"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": {
|
||||
"version": "1.0.0-beta.11",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.11.tgz",
|
||||
"integrity": "sha512-L/gAA/hyCSuzTF1ftlzUSI/IKr2POHsv1Dd78GfqkR83KMNuswWD61JxGV2L7nRwBBBSDr6R1gCkdTmoN7W4ag==",
|
||||
"version": "1.0.0-beta.19",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.19.tgz",
|
||||
"integrity": "sha512-3FL3mnMbPu0muGOCaKAhhFEYmqv9eTfPSJRJmANrCwtgK8VuxpsZDGK+m0LYAGoyO8+0j5uRe4PeyPDK1yA/hA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
@@ -1591,10 +1617,22 @@
|
||||
"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": {
|
||||
"version": "5.80.10",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.80.10.tgz",
|
||||
"integrity": "sha512-mUNQOtzxkjL6jLbyChZoSBP6A5gQDVRUiPvW+/zw/9ftOAz+H754zCj3D8PwnzPKyHzGkQ9JbH48ukhym9LK1Q==",
|
||||
"version": "5.81.2",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.2.tgz",
|
||||
"integrity": "sha512-QLYkPdrudoMATDFa3MiLEwRhNnAlzHWDf0LKaXUqJd0/+QxN8uTPi7bahRlxoAyH0UbLMBdeDbYzWALj7THOtw==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@@ -1602,9 +1640,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/query-devtools": {
|
||||
"version": "5.80.0",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.80.0.tgz",
|
||||
"integrity": "sha512-D6gH4asyjaoXrCOt5vG5Og/YSj0D/TxwNQgtLJIgWbhbWCC/emu2E92EFoVHh4ppVWg1qT2gKHvKyQBEFZhCuA==",
|
||||
"version": "5.81.2",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-devtools/-/query-devtools-5.81.2.tgz",
|
||||
"integrity": "sha512-jCeJcDCwKfoyyBXjXe9+Lo8aTkavygHHsUHAlxQKKaDeyT0qyQNLKl7+UyqYH2dDF6UN/14873IPBHchcsU+Zg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@@ -1612,12 +1650,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/query-persist-client-core": {
|
||||
"version": "5.80.10",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.80.10.tgz",
|
||||
"integrity": "sha512-3fcLDW4hDkiGfG/NRj6hgl/+G94lsgtx/Wj9jxuUN0LiawKpIMfGrSNCERFPYpJMuTtCyX9A2mqHE++sV13lsA==",
|
||||
"version": "5.81.2",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.81.2.tgz",
|
||||
"integrity": "sha512-FSLHr3DL+eezaKNiAexM7+KdgpXvLmUuMQhtORPIC7QuhemM6kfzcrQC5AN34zhvVh2PZXRcib2JnHKeTMjyyg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-core": "5.80.10"
|
||||
"@tanstack/query-core": "5.81.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@@ -1625,12 +1663,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query": {
|
||||
"version": "5.80.10",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.80.10.tgz",
|
||||
"integrity": "sha512-6zM098J8sLy9oU60XAdzUlAH4wVzoMVsWUWiiE/Iz4fd67PplxeyL4sw/MPcVJJVhbwGGXCsHn9GrQt2mlAzig==",
|
||||
"version": "5.81.2",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.2.tgz",
|
||||
"integrity": "sha512-pe8kFlTrL2zFLlcAj2kZk9UaYYHDk9/1hg9EBaoO3cxDhOZf1FRGJeziSXKrVZyxIfs7b3aoOj/bw7Lie0mDUg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-core": "5.80.10"
|
||||
"@tanstack/query-core": "5.81.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@@ -1641,36 +1679,36 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query-devtools": {
|
||||
"version": "5.80.10",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.80.10.tgz",
|
||||
"integrity": "sha512-6JL63fSc7kxyGOLV2w466SxhMn/m7LZk/ximQciy6OpVt+n2A8Mq3S0QwhIzfm4WEwLK/F3OELfzRToQburnYA==",
|
||||
"version": "5.81.2",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.81.2.tgz",
|
||||
"integrity": "sha512-TX0OQ4cbgX6z2uN8c9x0QUNbyePGyUGdcgrGnV6TYEJc7KPT8PqeASuzoA5NGw1CiMGvyFAkIGA2KipvhM9d1g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-devtools": "5.80.0"
|
||||
"@tanstack/query-devtools": "5.81.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tanstack/react-query": "^5.80.10",
|
||||
"@tanstack/react-query": "^5.81.2",
|
||||
"react": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query-persist-client": {
|
||||
"version": "5.80.10",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.80.10.tgz",
|
||||
"integrity": "sha512-0LcPhQElmffSNXh+omPOOZJnutk7Z7NMTrWl9WP3aH7Xn4OaFXImkyey1ajez5o23D8TFwj3kHmi/85J+E6sgQ==",
|
||||
"version": "5.81.2",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.81.2.tgz",
|
||||
"integrity": "sha512-HUlnB7FGqN/he4AOvR0vNA06Wn4dg3rEK7EgzenWfc0gQ9Aa6thqTWgT3Q27CnKiTkzhRn2uZJKRseTP4g54LQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-persist-client-core": "5.80.10"
|
||||
"@tanstack/query-persist-client-core": "5.81.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tanstack/react-query": "^5.80.10",
|
||||
"@tanstack/react-query": "^5.81.2",
|
||||
"react": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
@@ -1734,22 +1772,26 @@
|
||||
"node_modules/@types/d3-array": {
|
||||
"version": "3.2.1",
|
||||
"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": {
|
||||
"version": "3.1.3",
|
||||
"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": {
|
||||
"version": "3.0.2",
|
||||
"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": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
|
||||
"integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-color": "*"
|
||||
}
|
||||
@@ -1757,12 +1799,14 @@
|
||||
"node_modules/@types/d3-path": {
|
||||
"version": "3.1.1",
|
||||
"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": {
|
||||
"version": "4.0.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
|
||||
"integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-time": "*"
|
||||
}
|
||||
@@ -1771,6 +1815,7 @@
|
||||
"version": "3.1.7",
|
||||
"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==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/d3-path": "*"
|
||||
}
|
||||
@@ -1778,12 +1823,14 @@
|
||||
"node_modules/@types/d3-time": {
|
||||
"version": "3.0.4",
|
||||
"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": {
|
||||
"version": "3.0.2",
|
||||
"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": {
|
||||
"version": "4.0.2",
|
||||
@@ -1800,9 +1847,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "24.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.3.tgz",
|
||||
"integrity": "sha512-R4I/kzCYAdRLzfiCabn9hxWfbuHS573x+r0dJMkkzThEa7pbrcDWK+9zu3e7aBOouf+rQAciqPFMnxwr0aWgKg==",
|
||||
"version": "24.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.4.tgz",
|
||||
"integrity": "sha512-ulyqAkrhnuNq9pB76DRBTkcS6YsmDALy6Ua63V8OhrOBgbcYt6IOdzpw5P1+dyRIyMerzLkeYWBeOXPpA9GMAA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -1836,16 +1883,16 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vitejs/plugin-react": {
|
||||
"version": "4.5.2",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.5.2.tgz",
|
||||
"integrity": "sha512-QNVT3/Lxx99nMQWJWF7K4N6apUEuT0KlZA3mx/mVaoGj3smm/8rc8ezz15J1pcbcjDK0V15rpHetVfya08r76Q==",
|
||||
"version": "4.6.0",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.6.0.tgz",
|
||||
"integrity": "sha512-5Kgff+m8e2PB+9j51eGHEpn5kUzRKH2Ry0qGoe8ItJg7pqnkPrYPkDQZGgGmTa0EGarHrkjLvOdU3b1fzI8otQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.27.4",
|
||||
"@babel/plugin-transform-react-jsx-self": "^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",
|
||||
"react-refresh": "^0.17.0"
|
||||
},
|
||||
@@ -2456,6 +2503,7 @@
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
|
||||
"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"internmap": "1 - 2"
|
||||
},
|
||||
@@ -2467,6 +2515,7 @@
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
|
||||
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
@@ -2475,6 +2524,7 @@
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
|
||||
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
@@ -2483,6 +2533,7 @@
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
|
||||
"integrity": "sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
@@ -2491,6 +2542,7 @@
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3"
|
||||
},
|
||||
@@ -2502,6 +2554,7 @@
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
|
||||
"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
@@ -2510,6 +2563,7 @@
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
|
||||
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2.10.0 - 3",
|
||||
"d3-format": "1 - 3",
|
||||
@@ -2525,6 +2579,7 @@
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
|
||||
"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-path": "^3.1.0"
|
||||
},
|
||||
@@ -2536,6 +2591,7 @@
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
|
||||
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2 - 3"
|
||||
},
|
||||
@@ -2547,6 +2603,7 @@
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
|
||||
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-time": "1 - 3"
|
||||
},
|
||||
@@ -2558,6 +2615,7 @@
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
|
||||
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
@@ -2589,7 +2647,8 @@
|
||||
"node_modules/decimal.js-light": {
|
||||
"version": "2.5.1",
|
||||
"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": {
|
||||
"version": "5.0.2",
|
||||
@@ -2653,6 +2712,16 @@
|
||||
"dev": true,
|
||||
"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": {
|
||||
"version": "0.25.1",
|
||||
"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.1.tgz",
|
||||
@@ -2710,9 +2779,10 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/eventemitter3": {
|
||||
"version": "4.0.7",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz",
|
||||
"integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw=="
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
|
||||
"integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/expect-type": {
|
||||
"version": "1.2.1",
|
||||
@@ -2735,14 +2805,6 @@
|
||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||
"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": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/fast-uri/-/fast-uri-3.0.6.tgz",
|
||||
@@ -2760,9 +2822,9 @@
|
||||
]
|
||||
},
|
||||
"node_modules/fdir": {
|
||||
"version": "6.4.4",
|
||||
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.4.tgz",
|
||||
"integrity": "sha512-1NZP+GK4GfuAv3PqKvxQRDMjdSRZjnkq7KfhlNrCNNlZ0ygQFpebfrnfnq/W7fpUnAv9aGWmY1zKx7FYL3gwhg==",
|
||||
"version": "6.4.6",
|
||||
"resolved": "https://registry.npmjs.org/fdir/-/fdir-6.4.6.tgz",
|
||||
"integrity": "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
@@ -2923,6 +2985,16 @@
|
||||
"integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==",
|
||||
"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": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
|
||||
@@ -2936,6 +3008,7 @@
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
@@ -3159,7 +3232,8 @@
|
||||
"node_modules/lodash": {
|
||||
"version": "4.17.21",
|
||||
"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": {
|
||||
"version": "1.4.0",
|
||||
@@ -3310,6 +3384,7 @@
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.cjs"
|
||||
},
|
||||
@@ -3428,9 +3503,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.5.3",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.3.tgz",
|
||||
"integrity": "sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==",
|
||||
"version": "8.5.6",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
|
||||
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@@ -3446,8 +3521,9 @@
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.8",
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
},
|
||||
@@ -3655,20 +3731,6 @@
|
||||
"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": {
|
||||
"version": "2.2.3",
|
||||
"resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
|
||||
@@ -3723,47 +3785,47 @@
|
||||
}
|
||||
},
|
||||
"node_modules/recharts": {
|
||||
"version": "2.15.3",
|
||||
"resolved": "https://registry.npmjs.org/recharts/-/recharts-2.15.3.tgz",
|
||||
"integrity": "sha512-EdOPzTwcFSuqtvkDoaM5ws/Km1+WTAO2eizL7rqiG0V2UVhTnz0m7J2i0CjVPUCdEkZImaWvXLbZDS2H5t6GFQ==",
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.0.0.tgz",
|
||||
"integrity": "sha512-GODedlXZEOQ/KN15puHqaEk9JaiUvFr+Wef/nSagi7g9wHPFLB7prH1/J8vyEBtA2Es6r8qGY1t2OqkuAIpgBg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"clsx": "^2.0.0",
|
||||
"eventemitter3": "^4.0.1",
|
||||
"lodash": "^4.17.21",
|
||||
"react-is": "^18.3.1",
|
||||
"react-smooth": "^4.0.4",
|
||||
"recharts-scale": "^0.4.4",
|
||||
"tiny-invariant": "^1.3.1",
|
||||
"victory-vendor": "^36.6.8"
|
||||
"@reduxjs/toolkit": "1.x.x || 2.x.x",
|
||||
"clsx": "^2.1.1",
|
||||
"decimal.js-light": "^2.5.1",
|
||||
"es-toolkit": "^1.39.3",
|
||||
"eventemitter3": "^5.0.1",
|
||||
"immer": "^10.1.1",
|
||||
"react-redux": "8.x.x || 9.x.x",
|
||||
"reselect": "5.1.1",
|
||||
"tiny-invariant": "^1.3.3",
|
||||
"use-sync-external-store": "^1.2.2",
|
||||
"victory-vendor": "^37.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
"node": ">=18"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^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": "^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-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": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"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": {
|
||||
"version": "0.14.1",
|
||||
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
|
||||
@@ -3778,6 +3840,12 @@
|
||||
"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": {
|
||||
"version": "1.22.10",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
|
||||
@@ -4427,9 +4495,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/victory-vendor": {
|
||||
"version": "36.9.2",
|
||||
"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-36.9.2.tgz",
|
||||
"integrity": "sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==",
|
||||
"version": "37.3.6",
|
||||
"resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
|
||||
"integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
|
||||
"license": "MIT AND ISC",
|
||||
"dependencies": {
|
||||
"@types/d3-array": "^3.0.3",
|
||||
"@types/d3-ease": "^3.0.0",
|
||||
@@ -4448,24 +4517,24 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.3.5",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz",
|
||||
"integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==",
|
||||
"version": "7.0.0",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.0.0.tgz",
|
||||
"integrity": "sha512-ixXJB1YRgDIw2OszKQS9WxGHKwLdCsbQNkpJN171udl6szi/rIySHL6/Os3s2+oE4P/FLD4dxg4mD7Wust+u5g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.4.4",
|
||||
"fdir": "^6.4.6",
|
||||
"picomatch": "^4.0.2",
|
||||
"postcss": "^8.5.3",
|
||||
"rollup": "^4.34.9",
|
||||
"tinyglobby": "^0.2.13"
|
||||
"postcss": "^8.5.6",
|
||||
"rollup": "^4.40.0",
|
||||
"tinyglobby": "^0.2.14"
|
||||
},
|
||||
"bin": {
|
||||
"vite": "bin/vite.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.0.0 || ^20.0.0 || >=22.0.0"
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/vitejs/vite?sponsor=1"
|
||||
@@ -4474,14 +4543,14 @@
|
||||
"fsevents": "~2.3.3"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/node": "^18.0.0 || ^20.0.0 || >=22.0.0",
|
||||
"@types/node": "^20.19.0 || >=22.12.0",
|
||||
"jiti": ">=1.21.0",
|
||||
"less": "*",
|
||||
"less": "^4.0.0",
|
||||
"lightningcss": "^1.21.0",
|
||||
"sass": "*",
|
||||
"sass-embedded": "*",
|
||||
"stylus": "*",
|
||||
"sugarss": "*",
|
||||
"sass": "^1.70.0",
|
||||
"sass-embedded": "^1.70.0",
|
||||
"stylus": ">=0.54.8",
|
||||
"sugarss": "^5.0.0",
|
||||
"terser": "^5.16.0",
|
||||
"tsx": "^4.8.1",
|
||||
"yaml": "^2.4.2"
|
||||
|
||||
14
package.json
14
package.json
@@ -15,26 +15,26 @@
|
||||
"@mantine/form": "^8.1.1",
|
||||
"@mantine/hooks": "^8.1.1",
|
||||
"@mantine/notifications": "^8.1.1",
|
||||
"@tanstack/react-query": "^5.80.10",
|
||||
"@tanstack/react-query-devtools": "^5.80.10",
|
||||
"@tanstack/react-query-persist-client": "^5.80.10",
|
||||
"@tanstack/react-query": "^5.81.2",
|
||||
"@tanstack/react-query-devtools": "^5.81.2",
|
||||
"@tanstack/react-query-persist-client": "^5.81.2",
|
||||
"idb-keyval": "^6.2.2",
|
||||
"jotai": "^2.12.5",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^7.6.2",
|
||||
"recharts": "^2.15.3"
|
||||
"recharts": "^3.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.0.3",
|
||||
"@types/node": "^24.0.4",
|
||||
"@types/react": "^19.1.8",
|
||||
"@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/ui": "^3.2.4",
|
||||
"typescript": "^5.8.3",
|
||||
"vite": "^6.3.5",
|
||||
"vite": "^7.0.0",
|
||||
"vite-plugin-dts": "~4.5.4",
|
||||
"vite-tsconfig-paths": "^5.1.4",
|
||||
"vitest": "^3.2.4"
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Divider, Modal, Stack } from '@mantine/core';
|
||||
import { Modal, Stack } from '@mantine/core';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { modalClasses } from 'styles';
|
||||
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
|
||||
name={'Available Applications'}
|
||||
items={applicationData.map((application: Application) => {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { Divider, Group } from '@mantine/core';
|
||||
import { Group } from '@mantine/core';
|
||||
import type { SearchShortcut } from 'types';
|
||||
import HintItem from './HintItem';
|
||||
|
||||
@@ -10,7 +10,7 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
|
||||
zIndex: 0,
|
||||
padding: '.5rem',
|
||||
marginTop: 0,
|
||||
marginBottom: '-2rem',
|
||||
marginBottom: '-1.25rem',
|
||||
borderRadius: '8px',
|
||||
color: 'var(--mantine-color-background-0)',
|
||||
backgroundColor: 'var(--mantine-color-border-0)',
|
||||
@@ -18,7 +18,6 @@ function HelpSection({ name, items }: { name: string; items: SearchShortcut[] })
|
||||
>
|
||||
{name}
|
||||
</h3>
|
||||
<Divider py={'.5rem'} color={'var(--mantine-color-accent-0)'} />
|
||||
<Group
|
||||
style={{
|
||||
width: '100%',
|
||||
|
||||
@@ -42,7 +42,6 @@ function AppItem({ url, icon, name }: { url: string; icon: string; name: string
|
||||
align={isMobile ? 'center' : undefined}
|
||||
justify={isMobile ? 'center' : undefined}
|
||||
style={{
|
||||
height: '64px',
|
||||
width: isMobile ? '100%' : undefined,
|
||||
marginRight: isMobile ? 0 : '1rem',
|
||||
marginLeft: isMobile ? 0 : '1rem',
|
||||
|
||||
@@ -72,7 +72,7 @@ function Header({
|
||||
<Stack
|
||||
style={{
|
||||
borderBottom: '0px solid',
|
||||
zIndex: '1',
|
||||
zIndex: 1,
|
||||
clear: 'both',
|
||||
display: 'flex',
|
||||
flexDirection: isMobile ? 'column' : 'row',
|
||||
@@ -123,7 +123,6 @@ function Header({
|
||||
}}
|
||||
>
|
||||
<Group
|
||||
gap={0}
|
||||
align='end'
|
||||
style={{
|
||||
display: 'flex',
|
||||
@@ -131,6 +130,7 @@ function Header({
|
||||
bottom: isMobile ? -32 : 0,
|
||||
right: 16,
|
||||
cursor: 'pointer',
|
||||
gap: 0,
|
||||
}}
|
||||
onClick={openWeatherModal}
|
||||
>
|
||||
|
||||
@@ -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 { HelpModal, WeatherModal } from 'components';
|
||||
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
||||
@@ -61,7 +61,7 @@ export default function Search({
|
||||
searchValue,
|
||||
setSearchValue,
|
||||
} = useCommonHooks();
|
||||
const [placeholderValue, setPlaceholderValue] = useState('');
|
||||
const [placeholderValue, setPlaceholderValue] = useState<string>('');
|
||||
const [value, setValue] = useState(0);
|
||||
|
||||
const handleSearchHistoryItem = ({ option }: { option: SearchHistoryItem }) => {
|
||||
@@ -322,118 +322,125 @@ export default function Search({
|
||||
}, [searchValue]);
|
||||
|
||||
return (
|
||||
<Stack
|
||||
style={{
|
||||
height: '100px',
|
||||
backgroundColor: 'transparent',
|
||||
textAlign: 'center',
|
||||
position: 'relative',
|
||||
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 },
|
||||
<>
|
||||
{dropdownOpened && <Overlay pos={'absolute'} h={'100%'} w={'100%'} blur={1} />}
|
||||
<Stack
|
||||
style={{
|
||||
height: '100px',
|
||||
backgroundColor: 'transparent',
|
||||
textAlign: 'center',
|
||||
position: 'relative',
|
||||
padding: '.3rem',
|
||||
display: 'inline-block',
|
||||
gap: 0,
|
||||
}}
|
||||
spellCheck='true'
|
||||
searchable
|
||||
autoFocus={!isMobile}
|
||||
leftSection={providerLabel}
|
||||
rightSection={<Stack />}
|
||||
renderOption={(item: any) => {
|
||||
const Icon = allIcons[item.option.icon];
|
||||
return !searchValue.startsWith('!') ? (
|
||||
<SearchSelectItem
|
||||
item={item}
|
||||
handleSearchHistoryItem={handleSearchHistoryItem}
|
||||
searchEndpoint={searchEndpoint}
|
||||
/>
|
||||
) : (
|
||||
<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();
|
||||
>
|
||||
<Select
|
||||
classNames={selectClasses}
|
||||
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>
|
||||
}
|
||||
}}
|
||||
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>
|
||||
data-active={searchValue !== ''}
|
||||
dropdownOpened={dropdownOpened}
|
||||
comboboxProps={{
|
||||
transitionProps: { transition: 'fade', duration: 200 },
|
||||
}}
|
||||
styles={{
|
||||
input: {
|
||||
zIndex: 1000,
|
||||
},
|
||||
}}
|
||||
spellCheck={true}
|
||||
searchable
|
||||
autoFocus={!isMobile}
|
||||
leftSection={providerLabel}
|
||||
rightSection={<div />}
|
||||
renderOption={(item: any) => {
|
||||
const Icon = allIcons[item.option.icon];
|
||||
return !searchValue.startsWith('!') ? (
|
||||
<SearchSelectItem
|
||||
item={item}
|
||||
handleSearchHistoryItem={handleSearchHistoryItem}
|
||||
searchEndpoint={searchEndpoint}
|
||||
/>
|
||||
) : (
|
||||
<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();
|
||||
}
|
||||
}}
|
||||
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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,32 +1,13 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
type ComboboxItem,
|
||||
Group,
|
||||
Menu,
|
||||
MultiSelect,
|
||||
Overlay,
|
||||
Select,
|
||||
Slider,
|
||||
Stack,
|
||||
Text,
|
||||
Tooltip,
|
||||
} from '@mantine/core';
|
||||
import { Button, Group, Menu, Stack } from '@mantine/core';
|
||||
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FaDice } from 'react-icons/fa';
|
||||
import { FiMenu, FiPower, FiSettings, FiShuffle } from 'react-icons/fi';
|
||||
import { FiMenu, FiSettings } from 'react-icons/fi';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
actionIconClasses,
|
||||
buttonClasses,
|
||||
menuClasses,
|
||||
multiSelectClasses,
|
||||
selectClasses,
|
||||
sliderClasses,
|
||||
stackClasses,
|
||||
} from 'styles';
|
||||
import type { AppCategory, Theme, ThemePlaylist, WolClient } from 'types';
|
||||
import { buttonClasses, menuClasses } from 'styles';
|
||||
import type { AppCategory, WolClient } from 'types';
|
||||
import SettingsCard from './SettingsCard';
|
||||
import ThemingCard from './ThemingCard';
|
||||
import WakeOnLan from './WakeOnLanCard';
|
||||
|
||||
function SettingsButton() {
|
||||
const { data: appCategoryData, isFetched: appCategoryDataIsFetched } = useQueryAPI({
|
||||
@@ -36,24 +17,14 @@ function SettingsButton() {
|
||||
endpoint: 'api/wolClients',
|
||||
});
|
||||
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 [allThemes, setAllThemes] = useState<Theme[]>([]);
|
||||
const [categories, setCategories] = useState([{ value: 'All', label: 'All' }]);
|
||||
const [selectedClient] = useState<WolClient>(wolClientData?.[0]);
|
||||
const [overlayOpened, setOverlayOpened] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const {
|
||||
currentTheme,
|
||||
setCurrentTheme,
|
||||
setThemeName,
|
||||
handleThemeChange,
|
||||
theme,
|
||||
isMobile,
|
||||
appFilter,
|
||||
setAppFilter,
|
||||
appSort,
|
||||
@@ -66,10 +37,8 @@ function SettingsButton() {
|
||||
setBookmarkFilter,
|
||||
bookmarkDensity,
|
||||
setBookmarkDensity,
|
||||
isMobile,
|
||||
currentThemePlaylist,
|
||||
setCurrentThemePlaylist,
|
||||
} = useCommonHooks();
|
||||
|
||||
const handleWakeRequest = () => {
|
||||
mutateAsync({
|
||||
method: 'POST',
|
||||
@@ -94,459 +63,84 @@ function SettingsButton() {
|
||||
}
|
||||
}, [wolClientData, wolClientDataIsFetched]);
|
||||
|
||||
useEffect(() => {
|
||||
if (allThemeData && allThemeDataIsFetched) {
|
||||
setAllThemes(allThemeData);
|
||||
}
|
||||
}, [allThemeData, allThemeDataIsFetched]);
|
||||
return (
|
||||
<>
|
||||
{overlayOpened && (
|
||||
<Overlay
|
||||
pos={'fixed'}
|
||||
blur={3}
|
||||
onTouchStart={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<Menu
|
||||
classNames={menuClasses}
|
||||
width={isMobile ? '98%' : 'auto'}
|
||||
withArrow
|
||||
shadow='md'
|
||||
position='top'
|
||||
onOpen={() => setOverlayOpened(true)}
|
||||
onClose={() => setOverlayOpened(false)}
|
||||
<Menu
|
||||
classNames={menuClasses}
|
||||
width={isMobile ? '98%' : 'auto'}
|
||||
withArrow
|
||||
shadow='md'
|
||||
position='top'
|
||||
withOverlay
|
||||
overlayProps={{
|
||||
blur: 5,
|
||||
}}
|
||||
>
|
||||
<Menu.Target>
|
||||
<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
|
||||
<FiMenu />
|
||||
</Button>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown
|
||||
style={{
|
||||
backgroundColor:
|
||||
theme.backgroundImage.toLowerCase() !== 'none' &&
|
||||
theme.backgroundImage !== undefined
|
||||
? 'transparent'
|
||||
: 'var(--mantine-color-background-0)',
|
||||
}}
|
||||
>
|
||||
<Menu.Target>
|
||||
<Button className={buttonClasses.settingsButton} classNames={buttonClasses}>
|
||||
<FiMenu />
|
||||
<Group p={'1rem'} gap={12}>
|
||||
<Stack
|
||||
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>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown
|
||||
style={{
|
||||
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>
|
||||
</>
|
||||
</Group>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
121
src/pages/homepage/components/SettingsButton/SettingsCard.tsx
Normal file
121
src/pages/homepage/components/SettingsButton/SettingsCard.tsx
Normal 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
201
src/pages/homepage/components/SettingsButton/ThemingCard.tsx
Normal 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;
|
||||
@@ -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;
|
||||
@@ -4,7 +4,6 @@ import {
|
||||
Button,
|
||||
type ComboboxItem,
|
||||
type ComboboxLikeRenderOptionInput,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
@@ -223,14 +222,8 @@ const ApplicationSettings = () => {
|
||||
withAsterisk
|
||||
/>
|
||||
</Group>
|
||||
|
||||
<Divider color='black' my='lg' />
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
type='submit'
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
>
|
||||
<Group mt={'1rem'}>
|
||||
<Button type='submit' color={'green'}>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
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 { useDebouncedValue, useDisclosure } from '@mantine/hooks';
|
||||
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
||||
@@ -160,14 +160,8 @@ const BookmarkSettings = () => {
|
||||
withAsterisk
|
||||
/>
|
||||
</Group>
|
||||
|
||||
<Divider color='black' my='lg' />
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
type='submit'
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
>
|
||||
<Group mt={'1rem'}>
|
||||
<Button type='submit' color={'green'}>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
|
||||
@@ -388,11 +388,7 @@ function DebouncedGroupSettingsItem({
|
||||
align='center'
|
||||
justify='center'
|
||||
>
|
||||
<Button
|
||||
type='submit'
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
>
|
||||
<Button type='submit' color={'green'}>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
|
||||
@@ -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 { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
@@ -92,11 +92,9 @@ const MessageSettings = () => {
|
||||
}}
|
||||
error={newMessageError}
|
||||
/>
|
||||
<Divider color='black' my='lg' />
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Group mt={'1rem'}>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
if (newMessage) {
|
||||
mutateAsync({
|
||||
|
||||
@@ -76,7 +76,7 @@ const PersonalizationSettings = () => {
|
||||
style={{
|
||||
borderRadius: '10px',
|
||||
margin: '-.5rem',
|
||||
backdropFilter: 'blur(10px) brightness(1.2)',
|
||||
backdropFilter: 'blur(5px) brightness(1.2)',
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
@@ -121,13 +120,8 @@ const SearchProviderSettings = () => {
|
||||
withAsterisk
|
||||
/>
|
||||
</Stack>
|
||||
<Divider color='black' my='lg' />
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
type='submit'
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
>
|
||||
<Group mt={'1rem'}>
|
||||
<Button type='submit' color={'green'}>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
|
||||
@@ -27,8 +27,8 @@ function AddItemModal({
|
||||
closeOnClickOutside
|
||||
centered
|
||||
>
|
||||
<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} />
|
||||
<Modal.Content style={{ zIndex: 1000 }} h={'auto'}>
|
||||
<Modal.Overlay />
|
||||
<Modal.Content h={'auto'}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>{title}</Modal.Title>
|
||||
<Modal.CloseButton />
|
||||
|
||||
@@ -28,7 +28,7 @@ function DeleteItemModal({
|
||||
closeOnClickOutside
|
||||
centered
|
||||
>
|
||||
<Modal.Overlay style={{ zIndex: 999, backdropFilter: 'blur(5px)' }} />
|
||||
<Modal.Overlay />
|
||||
<Modal.Content style={{ zIndex: 1000 }} h={'auto'}>
|
||||
<Modal.Header>
|
||||
<Modal.Title>{title}</Modal.Title>
|
||||
|
||||
@@ -53,7 +53,7 @@ function SettingsHeader({
|
||||
align='center'
|
||||
justify='center'
|
||||
style={{
|
||||
backdropFilter: 'blur(10px) brightness(.75)',
|
||||
backdropFilter: 'blur(5px) brightness(.75)',
|
||||
zIndex: 199,
|
||||
paddingTop: '1.5rem',
|
||||
paddingBottom: '1.5rem',
|
||||
|
||||
@@ -63,7 +63,7 @@ function BackgroundModal({
|
||||
fullScreen={isMobile}
|
||||
centered
|
||||
>
|
||||
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header style={{ justifyContent: 'center' }}>
|
||||
<Group pos={'absolute'}>
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useDisclosure } from '@mantine/hooks';
|
||||
import { useCommonHooks, useMutationAPI } from 'hooks';
|
||||
import { useState } from 'react';
|
||||
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 DeleteItemModal from '../Shared/DeleteItemModal';
|
||||
|
||||
@@ -143,7 +143,7 @@ function ThemeCard({
|
||||
<Group w={'100%'}>
|
||||
<Box
|
||||
style={{
|
||||
height: '5px',
|
||||
height: '.25rem',
|
||||
width: '40px',
|
||||
backgroundColor: cardTheme.primaryColor,
|
||||
borderRadius: '4px',
|
||||
@@ -152,42 +152,24 @@ function ThemeCard({
|
||||
</Group>
|
||||
<Group w={'100%'}>
|
||||
<Box
|
||||
className={boxClasses.appItemExampleText}
|
||||
style={{
|
||||
height: '10px',
|
||||
width: '40px',
|
||||
borderRadius: '4px',
|
||||
backdropFilter: 'blur(10px) brightness(1.5)',
|
||||
fontSize: '.375rem',
|
||||
justifyContent: 'center',
|
||||
alignContent: 'center',
|
||||
color: cardTheme.primaryColor,
|
||||
}}
|
||||
>
|
||||
lorem ipsum
|
||||
</Box>
|
||||
<Box
|
||||
className={boxClasses.appItemExampleText}
|
||||
style={{
|
||||
height: '10px',
|
||||
width: '40px',
|
||||
borderRadius: '4px',
|
||||
backdropFilter: 'blur(10px) brightness(1.5)',
|
||||
fontSize: '.375rem',
|
||||
justifyContent: 'center',
|
||||
alignContent: 'center',
|
||||
color: cardTheme.primaryColor,
|
||||
}}
|
||||
>
|
||||
lorem ipsum
|
||||
</Box>
|
||||
<Box
|
||||
className={boxClasses.appItemExampleText}
|
||||
style={{
|
||||
height: '10px',
|
||||
width: '40px',
|
||||
borderRadius: '4px',
|
||||
backdropFilter: 'blur(10px) brightness(1.5)',
|
||||
fontSize: '.375rem',
|
||||
justifyContent: 'center',
|
||||
alignContent: 'center',
|
||||
color: cardTheme.primaryColor,
|
||||
}}
|
||||
>
|
||||
@@ -230,6 +212,7 @@ function ThemeCard({
|
||||
fontSize: '2rem',
|
||||
fontWeight: 'bold',
|
||||
color: shiftEdit === 0 ? 'black' : 'var(--mantine-color-primary-0)',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
@@ -291,6 +274,7 @@ function ThemeCard({
|
||||
fontSize: '2rem',
|
||||
fontWeight: 'bold',
|
||||
color: shiftShuffle === 0 ? 'black' : 'var(--mantine-color-primary-0)',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import {
|
||||
Button,
|
||||
ColorPicker,
|
||||
ColorSwatch,
|
||||
Divider,
|
||||
Group,
|
||||
Modal,
|
||||
ScrollArea,
|
||||
@@ -14,8 +12,9 @@ import {
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
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 ThemeModalColorSwatches from './ThemeModalColorSwatches';
|
||||
import ThemeModalContent from './ThemeModalContent';
|
||||
|
||||
function ThemeModal({
|
||||
@@ -86,7 +85,7 @@ function ThemeModal({
|
||||
<Text
|
||||
style={{
|
||||
width: 'min-content',
|
||||
backdropFilter: 'blur(10px) brightness(.25)',
|
||||
backdropFilter: 'blur(5px) brightness(.25)',
|
||||
padding: '.5rem',
|
||||
borderBottomRightRadius: 4,
|
||||
marginTop: '-2.15rem',
|
||||
@@ -100,7 +99,7 @@ function ThemeModal({
|
||||
<Text
|
||||
style={{
|
||||
width: 'min-content',
|
||||
backdropFilter: 'blur(10px) brightness(.25)',
|
||||
backdropFilter: 'blur(5px) brightness(.25)',
|
||||
padding: '.5rem',
|
||||
marginTop: '2rem',
|
||||
marginBottom: -1,
|
||||
@@ -136,7 +135,7 @@ function ThemeModal({
|
||||
fullScreen={isMobile}
|
||||
centered
|
||||
>
|
||||
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header style={{ justifyContent: 'center' }}>
|
||||
<Group pos={'absolute'}>
|
||||
@@ -164,7 +163,6 @@ function ThemeModal({
|
||||
</Modal.Header>
|
||||
<Modal.Body p={'2rem'}>
|
||||
<ThemeModalContent selectedTheme={selectedTheme} />
|
||||
<Divider color='black' my='sm' />
|
||||
<Group
|
||||
w={'100%'}
|
||||
h={'100%'}
|
||||
@@ -191,7 +189,6 @@ function ThemeModal({
|
||||
/>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
switch (colorId) {
|
||||
case 'primaryColor':
|
||||
@@ -241,103 +238,12 @@ function ThemeModal({
|
||||
</Group>
|
||||
</Group>
|
||||
) : (
|
||||
<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);
|
||||
}}
|
||||
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>
|
||||
<ThemeModalColorSwatches
|
||||
selectedTheme={selectedTheme}
|
||||
openPicker={openPicker}
|
||||
setColorId={setColorId}
|
||||
setColorValue={setColorValue}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
<Stack
|
||||
@@ -409,13 +315,8 @@ function ThemeModal({
|
||||
</ScrollArea.Autosize>
|
||||
</Stack>
|
||||
</Group>
|
||||
<Divider color='black' my='sm' />
|
||||
<Group pos={'absolute'} bottom={isMobile ? -72 : 8}>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={handleSaveTheme}
|
||||
>
|
||||
<Group>
|
||||
<Button color={'green'} onClick={handleSaveTheme}>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
|
||||
@@ -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;
|
||||
@@ -1,12 +1,4 @@
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Group,
|
||||
Modal,
|
||||
SimpleGrid,
|
||||
Text,
|
||||
TextInput,
|
||||
} from '@mantine/core';
|
||||
import { Button, Group, Modal, SimpleGrid, Text, TextInput } from '@mantine/core';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { modalClasses, textInputClasses } from 'styles';
|
||||
@@ -59,7 +51,7 @@ function ThemePlaylistModal({
|
||||
setThemeList('[]');
|
||||
}}
|
||||
>
|
||||
<Modal.Overlay style={{ backdropFilter: 'blur(5px)' }} />
|
||||
<Modal.Overlay />
|
||||
<Modal.Content>
|
||||
<Modal.Header style={{ justifyContent: 'center' }}>
|
||||
<Group pos={'absolute'}>
|
||||
@@ -113,13 +105,8 @@ function ThemePlaylistModal({
|
||||
);
|
||||
})}
|
||||
</SimpleGrid>
|
||||
<Divider color='black' my='sm' />
|
||||
<Group>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={handleSavePlaylist}
|
||||
>
|
||||
<Group mt={'1rem'}>
|
||||
<Button color={'green'} onClick={handleSavePlaylist}>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
|
||||
@@ -252,7 +252,7 @@ function ThemesSettings() {
|
||||
</Group>
|
||||
<Group
|
||||
style={{
|
||||
backdropFilter: 'blur(10px) brightness(.75)',
|
||||
backdropFilter: 'blur(5px) brightness(.75)',
|
||||
zIndex: 199,
|
||||
paddingTop: isMobile ? '.5rem' : '1.5rem',
|
||||
paddingBottom: '1.5rem',
|
||||
|
||||
@@ -1,13 +1,4 @@
|
||||
import {
|
||||
Button,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
Group,
|
||||
Popover,
|
||||
Stack,
|
||||
TextInput,
|
||||
} from '@mantine/core';
|
||||
import { Button, Grid, GridCol, Group, Popover, Stack, TextInput } from '@mantine/core';
|
||||
import { isNotEmpty, matches, useForm } from '@mantine/form';
|
||||
import { useDebouncedValue, useDisclosure } from '@mantine/hooks';
|
||||
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
||||
@@ -105,13 +96,8 @@ const WolClientSettings = () => {
|
||||
withAsterisk
|
||||
/>
|
||||
</Group>
|
||||
<Divider color='black' my='lg' />
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
type='submit'
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
>
|
||||
<Group mt={'1rem'}>
|
||||
<Button type='submit' color={'green'}>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
flex-wrap: wrap;
|
||||
height: 128px;
|
||||
margin: 0;
|
||||
backdrop-filter: blur(10px) brightness(1.2);
|
||||
backdrop-filter: blur(5px) brightness(1.2);
|
||||
border-radius: 6px;
|
||||
font-size: 2rem;
|
||||
font-weight: 400;
|
||||
@@ -34,7 +34,7 @@
|
||||
}
|
||||
|
||||
.appItemBox rect::after {
|
||||
filter: blur(10px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
|
||||
@keyframes svgAnimation {
|
||||
@@ -45,3 +45,13 @@
|
||||
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;
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
&.root {
|
||||
color: var(--mantine-color-primary-0);
|
||||
background-color: transparent;
|
||||
backdrop-filter: blur(10px) brightness(1.25) !important;
|
||||
backdrop-filter: blur(5px) brightness(1.25) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
&.root {
|
||||
color: var(--mantine-color-primary-0);
|
||||
background-color: transparent;
|
||||
backdrop-filter: blur(10px) brightness(1.25) !important;
|
||||
backdrop-filter: blur(5px) brightness(1.25) !important;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: var(--mantine-color-accent-0);
|
||||
|
||||
21
src/styles/ColorSwatch.module.css
Normal file
21
src/styles/ColorSwatch.module.css
Normal 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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
.dropdown {
|
||||
color: var(--mantine-color-primary-0);
|
||||
border-color: var(--mantine-color-primary-0) !important;
|
||||
backdrop-filter: blur(10px) brightness(3) !important;
|
||||
backdrop-filter: blur(5px) brightness(3) !important;
|
||||
}
|
||||
.item {
|
||||
&:hover {
|
||||
|
||||
@@ -12,8 +12,6 @@
|
||||
.close {
|
||||
color: white;
|
||||
background-color: var(--mantine-color-red-6);
|
||||
max-width: 20px !important;
|
||||
max-height: 20px !important;
|
||||
&:hover {
|
||||
color: var(--mantine-color-red-1);
|
||||
background-color: var(--mantine-color-red-4);
|
||||
@@ -24,6 +22,9 @@
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
.overlay {
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.editThemeModal {
|
||||
@@ -39,8 +40,6 @@
|
||||
.close {
|
||||
color: white;
|
||||
background-color: var(--mantine-color-red-6);
|
||||
max-width: 20px !important;
|
||||
max-height: 20px !important;
|
||||
&:hover {
|
||||
color: var(--mantine-color-red-1);
|
||||
background-color: var(--mantine-color-red-4);
|
||||
@@ -53,5 +52,8 @@
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.overlay {
|
||||
backdrop-filter: blur(5px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,7 @@
|
||||
.dropdown {
|
||||
border: solid 2px var(--mantine-color-border-0) !important;
|
||||
}
|
||||
|
||||
.overlay {
|
||||
backdrop-filter: blur(5px) !important;
|
||||
}
|
||||
@@ -45,7 +45,7 @@
|
||||
.dropdown {
|
||||
border: none !important;
|
||||
background-color: var(--mantine-color-search-0) !important;
|
||||
backdrop-filter: blur(10px) !important;
|
||||
backdrop-filter: blur(5px) !important;
|
||||
}
|
||||
|
||||
.options {
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
flex-wrap: wrap;
|
||||
height: 64px;
|
||||
margin: 0;
|
||||
backdrop-filter: blur(10px) brightness(1.2);
|
||||
backdrop-filter: blur(5px) brightness(1.2);
|
||||
border-radius: 6px;
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
@@ -35,7 +35,7 @@
|
||||
}
|
||||
|
||||
.appItemBox rect::after {
|
||||
filter: blur(10px);
|
||||
filter: blur(5px);
|
||||
}
|
||||
|
||||
@keyframes svgAnimation {
|
||||
|
||||
@@ -2,6 +2,7 @@ import actionIconClasses from './ActionIcon.module.css';
|
||||
import boxClasses from './Box.module.css';
|
||||
import buttonClasses from './Button.module.css';
|
||||
import cardClasses from './Card.module.css';
|
||||
import colorSwatchClasses from './ColorSwatch.module.css';
|
||||
import menuClasses from './Menu.module.css';
|
||||
import modalClasses from './Modal.module.css';
|
||||
import multiSelectClasses from './MultiSelect.module.css';
|
||||
@@ -21,6 +22,7 @@ export {
|
||||
boxClasses,
|
||||
buttonClasses,
|
||||
cardClasses,
|
||||
colorSwatchClasses,
|
||||
menuClasses,
|
||||
modalClasses,
|
||||
multiSelectClasses,
|
||||
|
||||
Reference in New Issue
Block a user