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

Customizable fonts

Browse Source
This commit is contained in:
Sean Edmunds
2026-01-28 14:27:27 -06:00
parent f92ee29dfa
commit 983fcbe2ae
7 changed files with 435 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

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

328
package-lock.json generated
View File

@@ -8,37 +8,38 @@
"name": "triggerfrontend", "name": "triggerfrontend",
"version": "1.1.0", "version": "1.1.0",
"dependencies": { "dependencies": {
"@gfazioli/mantine-text-animate": "^2.3.10", "@gfazioli/mantine-text-animate": "^2.3.12",
"@hello-pangea/dnd": "^18.0.1", "@hello-pangea/dnd": "^18.0.1",
"@mantine/core": "^8.3.12", "@mantine/core": "^8.3.13",
"@mantine/dates": "^8.3.12", "@mantine/dates": "^8.3.13",
"@mantine/form": "^8.3.12", "@mantine/form": "^8.3.13",
"@mantine/hooks": "^8.3.12", "@mantine/hooks": "^8.3.13",
"@mantine/notifications": "^8.3.12", "@mantine/notifications": "^8.3.13",
"@tanstack/react-query": "^5.90.16", "@tanstack/react-query": "^5.90.20",
"@tanstack/react-query-devtools": "^5.91.2", "@tanstack/react-query-devtools": "^5.91.2",
"@tanstack/react-query-persist-client": "^5.90.18", "@tanstack/react-query-persist-client": "^5.90.22",
"@tanstack/react-table": "^8.21.3", "@tanstack/react-table": "^8.21.3",
"idb-keyval": "^6.2.2", "idb-keyval": "^6.2.2",
"jotai": "^2.16.1", "jotai": "^2.17.0",
"react": "^19.2.3", "react": "^19.2.4",
"react-dom": "^19.2.3", "react-dom": "^19.2.4",
"react-fontpicker-ts": "^1.3.0",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"react-router-dom": "^7.12.0", "react-router-dom": "^7.13.0",
"recharts": "^3.6.0" "recharts": "^3.7.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^25.0.3", "@types/node": "^25.1.0",
"@types/react": "^19.2.7", "@types/react": "^19.2.10",
"@types/react-dom": "^19.2.3", "@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.2", "@vitejs/plugin-react": "^5.1.2",
"@vitest/coverage-v8": "^4.0.16", "@vitest/coverage-v8": "^4.0.18",
"@vitest/ui": "^4.0.16", "@vitest/ui": "^4.0.18",
"typescript": "^5.9.3", "typescript": "^5.9.3",
"vite": "^7.3.1", "vite": "^7.3.1",
"vite-plugin-dts": "~4.5.4", "vite-plugin-dts": "~4.5.4",
"vite-tsconfig-paths": "^6.0.3", "vite-tsconfig-paths": "^6.0.5",
"vitest": "^4.0.16" "vitest": "^4.0.18"
} }
}, },
"node_modules/@babel/code-frame": { "node_modules/@babel/code-frame": {
@@ -834,9 +835,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@gfazioli/mantine-text-animate": { "node_modules/@gfazioli/mantine-text-animate": {
"version": "2.3.10", "version": "2.3.12",
"resolved": "https://registry.npmjs.org/@gfazioli/mantine-text-animate/-/mantine-text-animate-2.3.10.tgz", "resolved": "https://registry.npmjs.org/@gfazioli/mantine-text-animate/-/mantine-text-animate-2.3.12.tgz",
"integrity": "sha512-2mN/0dN6NteRNdMEC7wKkycJPwTfSO0MoNBzf00tDUk8sBeMQkV+f4bRLw0F7Z0MnbjSafh1bolzdS0uwKvYRw==", "integrity": "sha512-On/IBFHloxPk7ObXys/mcCUe3tuOvg92+BTqh4LIn3KhY7hcfZ8lIGPO8iOMMMN9g63tNH2tTaCwoKFAxr4aZg==",
"peerDependencies": { "peerDependencies": {
"@mantine/core": ">=7.0.0", "@mantine/core": ">=7.0.0",
"@mantine/hooks": ">=7.0.0", "@mantine/hooks": ">=7.0.0",
@@ -911,9 +912,9 @@
} }
}, },
"node_modules/@mantine/core": { "node_modules/@mantine/core": {
"version": "8.3.12", "version": "8.3.13",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.12.tgz", "resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.3.13.tgz",
"integrity": "sha512-bDEoUl4SneltfI1GeEaBk6BVDbLuB/w15YwseAmUvc8ldAbNcsVhxKxY/BdhwqUo6O3L2vhdlb3WwxR1y8741g==", "integrity": "sha512-ZgW4vqN4meaPyIMxzAufBvsgmJRfYZdTpsrAOcS8pWy7m9e8i685E7XsAxnwJCOIHudpvpvt+7Bx7VaIjEsYEw==",
"dependencies": { "dependencies": {
"@floating-ui/react": "^0.27.16", "@floating-ui/react": "^0.27.16",
"clsx": "^2.1.1", "clsx": "^2.1.1",
@@ -923,30 +924,30 @@
"type-fest": "^4.41.0" "type-fest": "^4.41.0"
}, },
"peerDependencies": { "peerDependencies": {
"@mantine/hooks": "8.3.12", "@mantine/hooks": "8.3.13",
"react": "^18.x || ^19.x", "react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x" "react-dom": "^18.x || ^19.x"
} }
}, },
"node_modules/@mantine/dates": { "node_modules/@mantine/dates": {
"version": "8.3.12", "version": "8.3.13",
"resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-8.3.12.tgz", "resolved": "https://registry.npmjs.org/@mantine/dates/-/dates-8.3.13.tgz",
"integrity": "sha512-rL2kYJRTrU29l1KjQt5bdUweiZuJs3DjiIcc6VGHUuj7OwfYZbEpWzMbcu8fSrya/+kZAe8JM0irX22CjmsDGw==", "integrity": "sha512-Fk3k9oUENQQwU2cb1Ir2Q3J17emkYvW8xWaAF3nZC0PEF4KddY/p8bhF4NCxhsRjkvtEJiaAWlEq+6LF6hNxDA==",
"dependencies": { "dependencies": {
"clsx": "^2.1.1" "clsx": "^2.1.1"
}, },
"peerDependencies": { "peerDependencies": {
"@mantine/core": "8.3.12", "@mantine/core": "8.3.13",
"@mantine/hooks": "8.3.12", "@mantine/hooks": "8.3.13",
"dayjs": ">=1.0.0", "dayjs": ">=1.0.0",
"react": "^18.x || ^19.x", "react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x" "react-dom": "^18.x || ^19.x"
} }
}, },
"node_modules/@mantine/form": { "node_modules/@mantine/form": {
"version": "8.3.12", "version": "8.3.13",
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.3.12.tgz", "resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.3.13.tgz",
"integrity": "sha512-bjXL1Ah3lAZYHrjrF37FeHV8DFGeXV+apn0PRQw2MTLpdUSqKsiYIDDgugzRfNXWX1cn1ELtxtDXsMfdj/LI7Q==", "integrity": "sha512-P7Avh24QiL8V517Jxj8JuUbCuSOA1BjwTB8/htH92cRmLoJtWn4ycZYE7ks8v3Hrg8fpd0Xd2O5o9R4+bXwD/A==",
"dependencies": { "dependencies": {
"fast-deep-equal": "^3.1.3", "fast-deep-equal": "^3.1.3",
"klona": "^2.0.6" "klona": "^2.0.6"
@@ -956,32 +957,32 @@
} }
}, },
"node_modules/@mantine/hooks": { "node_modules/@mantine/hooks": {
"version": "8.3.12", "version": "8.3.13",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.12.tgz", "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.3.13.tgz",
"integrity": "sha512-lMMDzDewd3lUNtJCAHDj3g8On9X5aBl4q6EBwgOixKQSby9RG9ASEpK8oYHundHTm9tzo3MDeXWV/z32oSQWuw==", "integrity": "sha512-7YMbMW/tR9E8m/9DbBW01+3RNApm2mE/JbRKXf9s9+KxgbjQvq0FYGWV8Y4+Sjz48AO4vtWk2qBriUTgBMKAyg==",
"peerDependencies": { "peerDependencies": {
"react": "^18.x || ^19.x" "react": "^18.x || ^19.x"
} }
}, },
"node_modules/@mantine/notifications": { "node_modules/@mantine/notifications": {
"version": "8.3.12", "version": "8.3.13",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.3.12.tgz", "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.3.13.tgz",
"integrity": "sha512-lqPPa11XdcndG8ywMao8yVkMA4jg/pBNbS85bR7OwHQa1yUftmfVlqJl9PZZCiWLX2AgKY3+xM5dHo4LidL+DA==", "integrity": "sha512-VgQwA3C4NbjguobobFnqqQyKBWXOfzM8BES1LIX9EyzMwsvGAlShJHrF9/yLS0Jqf5DiZi4L8hxL3wcmmbnljA==",
"dependencies": { "dependencies": {
"@mantine/store": "8.3.12", "@mantine/store": "8.3.13",
"react-transition-group": "4.4.5" "react-transition-group": "4.4.5"
}, },
"peerDependencies": { "peerDependencies": {
"@mantine/core": "8.3.12", "@mantine/core": "8.3.13",
"@mantine/hooks": "8.3.12", "@mantine/hooks": "8.3.13",
"react": "^18.x || ^19.x", "react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x" "react-dom": "^18.x || ^19.x"
} }
}, },
"node_modules/@mantine/store": { "node_modules/@mantine/store": {
"version": "8.3.12", "version": "8.3.13",
"resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.3.12.tgz", "resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.3.13.tgz",
"integrity": "sha512-EC4eIKpm5s7neMbBrWsP6jGKLqrzHf63Ao3penYr7fn25dFXdbXZYw+IG8GYzxOC4yG61b2zTS+bpy5+vwzXpw==", "integrity": "sha512-pnHHwiffGfaqLFxuyJIuU1P6+3zOd7bfBRVFFzIEDyUbPJs7dmVUFt31bry5FokrBfCjNWyg2XfyAQqIwd2LLA==",
"peerDependencies": { "peerDependencies": {
"react": "^18.x || ^19.x" "react": "^18.x || ^19.x"
} }
@@ -1608,9 +1609,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@tanstack/query-core": { "node_modules/@tanstack/query-core": {
"version": "5.90.16", "version": "5.90.20",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.16.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.90.20.tgz",
"integrity": "sha512-MvtWckSVufs/ja463/K4PyJeqT+HMlJWtw6PrCpywznd2NSgO3m4KwO9RqbFqGg6iDE8vVMFWMeQI4Io3eEYww==", "integrity": "sha512-OMD2HLpNouXEfZJWcKeVKUgQ5n+n3A2JFmBaScpNDUqSrQSjiveC7dKMe53uJUg1nDG16ttFPz2xfilz6i2uVg==",
"funding": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
@@ -1626,11 +1627,11 @@
} }
}, },
"node_modules/@tanstack/query-persist-client-core": { "node_modules/@tanstack/query-persist-client-core": {
"version": "5.91.15", "version": "5.91.19",
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.91.15.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.91.19.tgz",
"integrity": "sha512-vnPSfQVo41EKJN8v20nkhWNZPyB1dMJIy5icOvCGzcCJzsmRefYY1owtr63ICOcjOiPPTuNEfPsdjdBhkzYnmA==", "integrity": "sha512-whrASqbVq8261Ue+/ZzpHsrLDYVfRaENs4HTdLuYKxawkGWzdMfV7BmOdWl8ZF0mEBEbrQR8V6oE3R635JF2Fw==",
"dependencies": { "dependencies": {
"@tanstack/query-core": "5.90.16" "@tanstack/query-core": "5.90.20"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1638,11 +1639,11 @@
} }
}, },
"node_modules/@tanstack/react-query": { "node_modules/@tanstack/react-query": {
"version": "5.90.16", "version": "5.90.20",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.16.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.90.20.tgz",
"integrity": "sha512-bpMGOmV4OPmif7TNMteU/Ehf/hoC0Kf98PDc0F4BZkFrEapRMEqI/V6YS0lyzwSV6PQpY1y4xxArUIfBW5LVxQ==", "integrity": "sha512-vXBxa+qeyveVO7OA0jX1z+DeyCA4JKnThKv411jd5SORpBKgkcVnYKCiBgECvADvniBX7tobwBmg01qq9JmMJw==",
"dependencies": { "dependencies": {
"@tanstack/query-core": "5.90.16" "@tanstack/query-core": "5.90.20"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1669,18 +1670,18 @@
} }
}, },
"node_modules/@tanstack/react-query-persist-client": { "node_modules/@tanstack/react-query-persist-client": {
"version": "5.90.18", "version": "5.90.22",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.90.18.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.90.22.tgz",
"integrity": "sha512-ToVRTVpjzTrd9S/p7JIvGdLs+Xtz9aDMM/7+TQGSV9notY8Jt64irfAAAkZ05syftLKS+3KPgyKAnHcVeKVbWQ==", "integrity": "sha512-BrD3Y/SsrSIDl+t/gpYvjvGHXd7m7oF+GIqktKE8LmTgt7bS1lYHd/CLkVxMPixTU53gHHVFfPNGmY7Hv4L/7g==",
"dependencies": { "dependencies": {
"@tanstack/query-persist-client-core": "5.91.15" "@tanstack/query-persist-client-core": "5.91.19"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
}, },
"peerDependencies": { "peerDependencies": {
"@tanstack/react-query": "^5.90.16", "@tanstack/react-query": "^5.90.20",
"react": "^18 || ^19" "react": "^18 || ^19"
} }
}, },
@@ -1851,18 +1852,18 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "25.0.3", "version": "25.1.0",
"resolved": "https://registry.npmjs.org/@types/node/-/node-25.0.3.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-25.1.0.tgz",
"integrity": "sha512-W609buLVRVmeW693xKfzHeIV6nJGGz98uCPfeXI1ELMLXVeKYZ9m15fAMSaUPBHYLGFsVRcMmSCksQOrZV9BYA==", "integrity": "sha512-t7frlewr6+cbx+9Ohpl0NOTKXZNV9xHRmNOvql47BFJKcEG1CxtxlPEEe+gR9uhVWM4DwhnvTF110mIL4yP9RA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"undici-types": "~7.16.0" "undici-types": "~7.16.0"
} }
}, },
"node_modules/@types/react": { "node_modules/@types/react": {
"version": "19.2.7", "version": "19.2.10",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.7.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
"integrity": "sha512-MWtvHrGZLFttgeEj28VXHxpmwYbor/ATPYbBfSFZEIRK0ecCFLl2Qo55z52Hss+UV9CRN7trSeq1zbgx7YDWWg==", "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
"devOptional": true, "devOptional": true,
"dependencies": { "dependencies": {
"csstype": "^3.2.2" "csstype": "^3.2.2"
@@ -1905,17 +1906,16 @@
} }
}, },
"node_modules/@vitest/coverage-v8": { "node_modules/@vitest/coverage-v8": {
"version": "4.0.16", "version": "4.0.18",
"resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.0.16.tgz", "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.0.18.tgz",
"integrity": "sha512-2rNdjEIsPRzsdu6/9Eq0AYAzYdpP6Bx9cje9tL3FE5XzXRQF1fNU9pe/1yE8fCrS0HD+fBtt6gLPh6LI57tX7A==", "integrity": "sha512-7i+N2i0+ME+2JFZhfuz7Tg/FqKtilHjGyGvoHYQ6iLV0zahbsJ9sljC9OcFcPDbhYKCet+sG8SsVqlyGvPflZg==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@bcoe/v8-coverage": "^1.0.2", "@bcoe/v8-coverage": "^1.0.2",
"@vitest/utils": "4.0.16", "@vitest/utils": "4.0.18",
"ast-v8-to-istanbul": "^0.3.8", "ast-v8-to-istanbul": "^0.3.10",
"istanbul-lib-coverage": "^3.2.2", "istanbul-lib-coverage": "^3.2.2",
"istanbul-lib-report": "^3.0.1", "istanbul-lib-report": "^3.0.1",
"istanbul-lib-source-maps": "^5.0.6",
"istanbul-reports": "^3.2.0", "istanbul-reports": "^3.2.0",
"magicast": "^0.5.1", "magicast": "^0.5.1",
"obug": "^2.1.1", "obug": "^2.1.1",
@@ -1926,8 +1926,8 @@
"url": "https://opencollective.com/vitest" "url": "https://opencollective.com/vitest"
}, },
"peerDependencies": { "peerDependencies": {
"@vitest/browser": "4.0.16", "@vitest/browser": "4.0.18",
"vitest": "4.0.16" "vitest": "4.0.18"
}, },
"peerDependenciesMeta": { "peerDependenciesMeta": {
"@vitest/browser": { "@vitest/browser": {
@@ -1936,15 +1936,15 @@
} }
}, },
"node_modules/@vitest/expect": { "node_modules/@vitest/expect": {
"version": "4.0.16", "version": "4.0.18",
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.16.tgz", "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.18.tgz",
"integrity": "sha512-eshqULT2It7McaJkQGLkPjPjNph+uevROGuIMJdG3V+0BSR2w9u6J9Lwu+E8cK5TETlfou8GRijhafIMhXsimA==", "integrity": "sha512-8sCWUyckXXYvx4opfzVY03EOiYVxyNrHS5QxX3DAIi5dpJAAkyJezHCP77VMX4HKA2LDT/Jpfo8i2r5BE3GnQQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@standard-schema/spec": "^1.0.0", "@standard-schema/spec": "^1.0.0",
"@types/chai": "^5.2.2", "@types/chai": "^5.2.2",
"@vitest/spy": "4.0.16", "@vitest/spy": "4.0.18",
"@vitest/utils": "4.0.16", "@vitest/utils": "4.0.18",
"chai": "^6.2.1", "chai": "^6.2.1",
"tinyrainbow": "^3.0.3" "tinyrainbow": "^3.0.3"
}, },
@@ -1953,12 +1953,12 @@
} }
}, },
"node_modules/@vitest/mocker": { "node_modules/@vitest/mocker": {
"version": "4.0.16", "version": "4.0.18",
"resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.16.tgz", "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.18.tgz",
"integrity": "sha512-yb6k4AZxJTB+q9ycAvsoxGn+j/po0UaPgajllBgt1PzoMAAmJGYFdDk0uCcRcxb3BrME34I6u8gHZTQlkqSZpg==", "integrity": "sha512-HhVd0MDnzzsgevnOWCBj5Otnzobjy5wLBe4EdeeFGv8luMsGcYqDuFRMcttKWZA5vVO8RFjexVovXvAM4JoJDQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vitest/spy": "4.0.16", "@vitest/spy": "4.0.18",
"estree-walker": "^3.0.3", "estree-walker": "^3.0.3",
"magic-string": "^0.30.21" "magic-string": "^0.30.21"
}, },
@@ -1988,9 +1988,9 @@
} }
}, },
"node_modules/@vitest/pretty-format": { "node_modules/@vitest/pretty-format": {
"version": "4.0.16", "version": "4.0.18",
"resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.16.tgz", "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.18.tgz",
"integrity": "sha512-eNCYNsSty9xJKi/UdVD8Ou16alu7AYiS2fCPRs0b1OdhJiV89buAXQLpTbe+X8V9L6qrs9CqyvU7OaAopJYPsA==", "integrity": "sha512-P24GK3GulZWC5tz87ux0m8OADrQIUVDPIjjj65vBXYG17ZeU3qD7r+MNZ1RNv4l8CGU2vtTRqixrOi9fYk/yKw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"tinyrainbow": "^3.0.3" "tinyrainbow": "^3.0.3"
@@ -2000,12 +2000,12 @@
} }
}, },
"node_modules/@vitest/runner": { "node_modules/@vitest/runner": {
"version": "4.0.16", "version": "4.0.18",
"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.16.tgz", "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.18.tgz",
"integrity": "sha512-VWEDm5Wv9xEo80ctjORcTQRJ539EGPB3Pb9ApvVRAY1U/WkHXmmYISqU5E79uCwcW7xYUV38gwZD+RV755fu3Q==", "integrity": "sha512-rpk9y12PGa22Jg6g5M3UVVnTS7+zycIGk9ZNGN+m6tZHKQb7jrP7/77WfZy13Y/EUDd52NDsLRQhYKtv7XfPQw==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vitest/utils": "4.0.16", "@vitest/utils": "4.0.18",
"pathe": "^2.0.3" "pathe": "^2.0.3"
}, },
"funding": { "funding": {
@@ -2013,12 +2013,12 @@
} }
}, },
"node_modules/@vitest/snapshot": { "node_modules/@vitest/snapshot": {
"version": "4.0.16", "version": "4.0.18",
"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.16.tgz", "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.18.tgz",
"integrity": "sha512-sf6NcrYhYBsSYefxnry+DR8n3UV4xWZwWxYbCJUt2YdvtqzSPR7VfGrY0zsv090DAbjFZsi7ZaMi1KnSRyK1XA==", "integrity": "sha512-PCiV0rcl7jKQjbgYqjtakly6T1uwv/5BQ9SwBLekVg/EaYeQFPiXcgrC2Y7vDMA8dM1SUEAEV82kgSQIlXNMvA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vitest/pretty-format": "4.0.16", "@vitest/pretty-format": "4.0.18",
"magic-string": "^0.30.21", "magic-string": "^0.30.21",
"pathe": "^2.0.3" "pathe": "^2.0.3"
}, },
@@ -2027,21 +2027,21 @@
} }
}, },
"node_modules/@vitest/spy": { "node_modules/@vitest/spy": {
"version": "4.0.16", "version": "4.0.18",
"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.16.tgz", "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.18.tgz",
"integrity": "sha512-4jIOWjKP0ZUaEmJm00E0cOBLU+5WE0BpeNr3XN6TEF05ltro6NJqHWxXD0kA8/Zc8Nh23AT8WQxwNG+WeROupw==", "integrity": "sha512-cbQt3PTSD7P2OARdVW3qWER5EGq7PHlvE+QfzSC0lbwO+xnt7+XH06ZzFjFRgzUX//JmpxrCu92VdwvEPlWSNw==",
"dev": true, "dev": true,
"funding": { "funding": {
"url": "https://opencollective.com/vitest" "url": "https://opencollective.com/vitest"
} }
}, },
"node_modules/@vitest/ui": { "node_modules/@vitest/ui": {
"version": "4.0.16", "version": "4.0.18",
"resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-4.0.16.tgz", "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-4.0.18.tgz",
"integrity": "sha512-rkoPH+RqWopVxDnCBE/ysIdfQ2A7j1eDmW8tCxxrR9nnFBa9jKf86VgsSAzxBd1x+ny0GC4JgiD3SNfRHv3pOg==", "integrity": "sha512-CGJ25bc8fRi8Lod/3GHSvXRKi7nBo3kxh0ApW4yCjmrWmRmlT53B5E08XRSZRliygG0aVNxLrBEqPYdz/KcCtQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vitest/utils": "4.0.16", "@vitest/utils": "4.0.18",
"fflate": "^0.8.2", "fflate": "^0.8.2",
"flatted": "^3.3.3", "flatted": "^3.3.3",
"pathe": "^2.0.3", "pathe": "^2.0.3",
@@ -2053,16 +2053,16 @@
"url": "https://opencollective.com/vitest" "url": "https://opencollective.com/vitest"
}, },
"peerDependencies": { "peerDependencies": {
"vitest": "4.0.16" "vitest": "4.0.18"
} }
}, },
"node_modules/@vitest/utils": { "node_modules/@vitest/utils": {
"version": "4.0.16", "version": "4.0.18",
"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.16.tgz", "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.18.tgz",
"integrity": "sha512-h8z9yYhV3e1LEfaQ3zdypIrnAg/9hguReGZoS7Gl0aBG5xgA410zBqECqmaF/+RkTggRsfnzc1XaAHA6bmUufA==", "integrity": "sha512-msMRKLMVLWygpK3u2Hybgi4MNjcYJvwTb0Ru09+fOyCXIgT5raYP041DRRdiJiI3k/2U6SEbAETB3YtBrUkCFA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vitest/pretty-format": "4.0.16", "@vitest/pretty-format": "4.0.18",
"tinyrainbow": "^3.0.3" "tinyrainbow": "^3.0.3"
}, },
"funding": { "funding": {
@@ -2234,11 +2234,10 @@
} }
}, },
"node_modules/ast-v8-to-istanbul": { "node_modules/ast-v8-to-istanbul": {
"version": "0.3.8", "version": "0.3.10",
"resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-0.3.8.tgz", "resolved": "https://registry.npmjs.org/ast-v8-to-istanbul/-/ast-v8-to-istanbul-0.3.10.tgz",
"integrity": "sha512-szgSZqUxI5T8mLKvS7WTjF9is+MVbOeLADU73IseOcrqhxr/VAvy6wfoVE39KnKzA7JRhjF5eUagNlHwvZPlKQ==", "integrity": "sha512-p4K7vMz2ZSk3wN8l5o3y2bJAoZXT3VuJI5OLTATY/01CYWumWvwkUw0SqDBnNq6IiTO3qDa1eSQDibAV8g7XOQ==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@jridgewell/trace-mapping": "^0.3.31", "@jridgewell/trace-mapping": "^0.3.31",
"estree-walker": "^3.0.3", "estree-walker": "^3.0.3",
@@ -2250,7 +2249,6 @@
"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz", "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
"integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==", "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@types/estree": "^1.0.0" "@types/estree": "^1.0.0"
} }
@@ -2259,8 +2257,7 @@
"version": "9.0.1", "version": "9.0.1",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-9.0.1.tgz",
"integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==", "integrity": "sha512-mxa9E9ITFOt0ban3j6L5MpjwegGz6lBQmM1IJkWeBZGcMxto50+eWdjC/52xDbS2vy0k7vIMK0Fe2wfL9OQSpQ==",
"dev": true, "dev": true
"license": "MIT"
}, },
"node_modules/balanced-match": { "node_modules/balanced-match": {
"version": "1.0.2", "version": "1.0.2",
@@ -2927,20 +2924,6 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/istanbul-lib-source-maps": {
"version": "5.0.6",
"resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-5.0.6.tgz",
"integrity": "sha512-yg2d+Em4KizZC5niWhQaIomgf5WlL4vOOjZ5xGCmF8SnPE/mDWWXgvRExdcpCgh9lLRRa1/fSYp2ymmbJ1pI+A==",
"dev": true,
"dependencies": {
"@jridgewell/trace-mapping": "^0.3.23",
"debug": "^4.1.1",
"istanbul-lib-coverage": "^3.0.0"
},
"engines": {
"node": ">=10"
}
},
"node_modules/istanbul-reports": { "node_modules/istanbul-reports": {
"version": "3.2.0", "version": "3.2.0",
"resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz", "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-3.2.0.tgz",
@@ -2962,9 +2945,9 @@
"dev": true "dev": true
}, },
"node_modules/jotai": { "node_modules/jotai": {
"version": "2.16.1", "version": "2.17.0",
"resolved": "https://registry.npmjs.org/jotai/-/jotai-2.16.1.tgz", "resolved": "https://registry.npmjs.org/jotai/-/jotai-2.17.0.tgz",
"integrity": "sha512-vrHcAbo3P7Br37C8Bv6JshMtlKMPqqmx0DDREtTjT4nf3QChDrYdbH+4ik/9V0cXA57dK28RkJ5dctYvavcIlg==", "integrity": "sha512-DBPT7Vx7E7R/ZJL7Uq7yUA9+LLR0IRiRM+Bw5ugVwv8L8++RjlXVXZ2//ccucypc5lcyuHOW09rYcW77RurduQ==",
"engines": { "engines": {
"node": ">=12.20.0" "node": ">=12.20.0"
}, },
@@ -3364,22 +3347,30 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/react": { "node_modules/react": {
"version": "19.2.3", "version": "19.2.4",
"resolved": "https://registry.npmjs.org/react/-/react-19.2.3.tgz", "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
"integrity": "sha512-Ku/hhYbVjOQnXDZFv2+RibmLFGwFdeeKHFcOTlrt7xplBnya5OGn/hIRDsqDiSUcfORsDC7MPxwork8jBwsIWA==", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
"engines": { "engines": {
"node": ">=0.10.0" "node": ">=0.10.0"
} }
}, },
"node_modules/react-dom": { "node_modules/react-dom": {
"version": "19.2.3", "version": "19.2.4",
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
"integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
"dependencies": { "dependencies": {
"scheduler": "^0.27.0" "scheduler": "^0.27.0"
}, },
"peerDependencies": { "peerDependencies": {
"react": "^19.2.3" "react": "^19.2.4"
}
},
"node_modules/react-fontpicker-ts": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/react-fontpicker-ts/-/react-fontpicker-ts-1.3.0.tgz",
"integrity": "sha512-3s1wo8LTNGQXWihzGTvTIKvGqo7X4D5vl8Z4nZN7IPwpPd6GRbfXxW4oL2wfECt2Cp8SuCYXGIRtM1OOz21ORg==",
"peerDependencies": {
"react": ">=16.8"
} }
}, },
"node_modules/react-icons": { "node_modules/react-icons": {
@@ -3486,9 +3477,9 @@
} }
}, },
"node_modules/react-router": { "node_modules/react-router": {
"version": "7.12.0", "version": "7.13.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz", "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.13.0.tgz",
"integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==", "integrity": "sha512-PZgus8ETambRT17BUm/LL8lX3Of+oiLaPuVTRH3l1eLvSPpKO3AvhAEb5N7ihAFZQrYDqkvvWfFh9p0z9VsjLw==",
"dependencies": { "dependencies": {
"cookie": "^1.0.1", "cookie": "^1.0.1",
"set-cookie-parser": "^2.6.0" "set-cookie-parser": "^2.6.0"
@@ -3507,11 +3498,11 @@
} }
}, },
"node_modules/react-router-dom": { "node_modules/react-router-dom": {
"version": "7.12.0", "version": "7.13.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.13.0.tgz",
"integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==", "integrity": "sha512-5CO/l5Yahi2SKC6rGZ+HDEjpjkGaG/ncEP7eWFTvFxbHP8yeeI0PxTDjimtpXYlR3b3i9/WIL4VJttPrESIf2g==",
"dependencies": { "dependencies": {
"react-router": "7.12.0" "react-router": "7.13.0"
}, },
"engines": { "engines": {
"node": ">=20.0.0" "node": ">=20.0.0"
@@ -3576,9 +3567,9 @@
} }
}, },
"node_modules/recharts": { "node_modules/recharts": {
"version": "3.6.0", "version": "3.7.0",
"resolved": "https://registry.npmjs.org/recharts/-/recharts-3.6.0.tgz", "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.7.0.tgz",
"integrity": "sha512-L5bjxvQRAe26RlToBAziKUB7whaGKEwD3znoM6fz3DrTowCIC/FnJYnuq1GEzB8Zv2kdTfaxQfi5GoH0tBinyg==", "integrity": "sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew==",
"dependencies": { "dependencies": {
"@reduxjs/toolkit": "1.x.x || 2.x.x", "@reduxjs/toolkit": "1.x.x || 2.x.x",
"clsx": "^2.1.1", "clsx": "^2.1.1",
@@ -4211,9 +4202,9 @@
} }
}, },
"node_modules/vite-tsconfig-paths": { "node_modules/vite-tsconfig-paths": {
"version": "6.0.3", "version": "6.0.5",
"resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-6.0.3.tgz", "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-6.0.5.tgz",
"integrity": "sha512-7bL7FPX/DSviaZGYUKowWF1AiDVWjMjxNbE8lyaVGDezkedWqfGhlnQ4BZXre0ZN5P4kAgIJfAlgFDVyjrCIyg==", "integrity": "sha512-f/WvY6ekHykUF1rWJUAbCU7iS/5QYDIugwpqJA+ttwKbxSbzNlqlE8vZSrsnxNQciUW+z6lvhlXMaEyZn9MSig==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"debug": "^4.1.1", "debug": "^4.1.1",
@@ -4222,26 +4213,21 @@
}, },
"peerDependencies": { "peerDependencies": {
"vite": "*" "vite": "*"
},
"peerDependenciesMeta": {
"vite": {
"optional": true
}
} }
}, },
"node_modules/vitest": { "node_modules/vitest": {
"version": "4.0.16", "version": "4.0.18",
"resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.16.tgz", "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.18.tgz",
"integrity": "sha512-E4t7DJ9pESL6E3I8nFjPa4xGUd3PmiWDLsDztS2qXSJWfHtbQnwAWylaBvSNY48I3vr8PTqIZlyK8TE3V3CA4Q==", "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@vitest/expect": "4.0.16", "@vitest/expect": "4.0.18",
"@vitest/mocker": "4.0.16", "@vitest/mocker": "4.0.18",
"@vitest/pretty-format": "4.0.16", "@vitest/pretty-format": "4.0.18",
"@vitest/runner": "4.0.16", "@vitest/runner": "4.0.18",
"@vitest/snapshot": "4.0.16", "@vitest/snapshot": "4.0.18",
"@vitest/spy": "4.0.16", "@vitest/spy": "4.0.18",
"@vitest/utils": "4.0.16", "@vitest/utils": "4.0.18",
"es-module-lexer": "^1.7.0", "es-module-lexer": "^1.7.0",
"expect-type": "^1.2.2", "expect-type": "^1.2.2",
"magic-string": "^0.30.21", "magic-string": "^0.30.21",
@@ -4269,10 +4255,10 @@
"@edge-runtime/vm": "*", "@edge-runtime/vm": "*",
"@opentelemetry/api": "^1.9.0", "@opentelemetry/api": "^1.9.0",
"@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
"@vitest/browser-playwright": "4.0.16", "@vitest/browser-playwright": "4.0.18",
"@vitest/browser-preview": "4.0.16", "@vitest/browser-preview": "4.0.18",
"@vitest/browser-webdriverio": "4.0.16", "@vitest/browser-webdriverio": "4.0.18",
"@vitest/ui": "4.0.16", "@vitest/ui": "4.0.18",
"happy-dom": "*", "happy-dom": "*",
"jsdom": "*" "jsdom": "*"
}, },

39
package.json
View File

@@ -10,36 +10,37 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@gfazioli/mantine-text-animate": "^2.3.10", "@gfazioli/mantine-text-animate": "^2.3.12",
"@hello-pangea/dnd": "^18.0.1", "@hello-pangea/dnd": "^18.0.1",
"@mantine/core": "^8.3.12", "@mantine/core": "^8.3.13",
"@mantine/dates": "^8.3.12", "@mantine/dates": "^8.3.13",
"@mantine/form": "^8.3.12", "@mantine/form": "^8.3.13",
"@mantine/hooks": "^8.3.12", "@mantine/hooks": "^8.3.13",
"@mantine/notifications": "^8.3.12", "@mantine/notifications": "^8.3.13",
"@tanstack/react-query": "^5.90.16", "@tanstack/react-query": "^5.90.20",
"@tanstack/react-query-devtools": "^5.91.2", "@tanstack/react-query-devtools": "^5.91.2",
"@tanstack/react-query-persist-client": "^5.90.18", "@tanstack/react-query-persist-client": "^5.90.22",
"@tanstack/react-table": "^8.21.3", "@tanstack/react-table": "^8.21.3",
"idb-keyval": "^6.2.2", "idb-keyval": "^6.2.2",
"jotai": "^2.16.1", "jotai": "^2.17.0",
"react": "^19.2.3", "react": "^19.2.4",
"react-dom": "^19.2.3", "react-dom": "^19.2.4",
"react-fontpicker-ts": "^1.3.0",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"react-router-dom": "^7.12.0", "react-router-dom": "^7.13.0",
"recharts": "^3.6.0" "recharts": "^3.7.0"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^25.0.3", "@types/node": "^25.1.0",
"@types/react": "^19.2.7", "@types/react": "^19.2.10",
"@types/react-dom": "^19.2.3", "@types/react-dom": "^19.2.3",
"@vitejs/plugin-react": "^5.1.2", "@vitejs/plugin-react": "^5.1.2",
"@vitest/coverage-v8": "^4.0.16", "@vitest/coverage-v8": "^4.0.18",
"@vitest/ui": "^4.0.16", "@vitest/ui": "^4.0.18",
"typescript": "^5.9.3", "typescript": "^5.9.3",
"vite": "^7.3.1", "vite": "^7.3.1",
"vite-plugin-dts": "~4.5.4", "vite-plugin-dts": "~4.5.4",
"vite-tsconfig-paths": "^6.0.3", "vite-tsconfig-paths": "^6.0.5",
"vitest": "^4.0.16" "vitest": "^4.0.18"
} }
} }

10
src/App.tsx
View File

@@ -19,6 +19,7 @@ import { Loading, MainLayout } from './components';
import '@mantine/core/styles.css'; import '@mantine/core/styles.css';
import '@mantine/dates/styles.css'; import '@mantine/dates/styles.css';
import '@mantine/notifications/styles.css'; import '@mantine/notifications/styles.css';
import 'react-fontpicker-ts/dist/index.css';
import '@gfazioli/mantine-text-animate/styles.css'; import '@gfazioli/mantine-text-animate/styles.css';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
@@ -54,7 +55,7 @@ function App() {
search: colorsTuple(theme.searchColor), search: colorsTuple(theme.searchColor),
}, },
white: theme?.backgroundColor, white: theme?.backgroundColor,
fontFamily: '-apple-system,Jost,BlinkMacSystemFont,Helvetica Neue,Roboto,sans-serif', fontFamily: `${personalData?.[0]?.defaultFont},Helvetica Neue,Roboto,system-ui,sans-serif`,
autoContrast: true, autoContrast: true,
}); });
const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides); const mantineTheme = mergeMantineTheme(DEFAULT_THEME, overrides);
@@ -81,7 +82,12 @@ function App() {
); );
useEffect(() => { useEffect(() => {
if (allThemes && themeName && personalData && isThemePlaylistsFetched) { if (
allThemes &&
themeName &&
Object.keys(personalData).length > 0 &&
isThemePlaylistsFetched
) {
if (currentThemePlaylist === 'All') { if (currentThemePlaylist === 'All') {
if (themeName === 'random') { if (themeName === 'random') {
handleThemeChange(allThemes, false); handleThemeChange(allThemes, false);

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

@@ -12,6 +12,7 @@ import { useDebouncedValue } from '@mantine/hooks';
import { SettingsHeader } from 'components'; import { SettingsHeader } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import FontPicker from 'react-fontpicker-ts';
import { cardClasses, switchClasses, textClasses, textInputClasses } from 'styles'; import { cardClasses, switchClasses, textClasses, textInputClasses } from 'styles';
import type { PersonalData } from 'types'; import type { PersonalData } from 'types';
@@ -20,25 +21,44 @@ const PersonalizationSettings = () => {
const { data: personalData, isFetching: personalDataIsFetching } = useQueryAPI({ const { data: personalData, isFetching: personalDataIsFetching } = useQueryAPI({
endpoint: endpoint, endpoint: endpoint,
}); });
const [personal, setPersonal] = useState<PersonalData>(personalData?.[0] || {}); const personal: PersonalData = personalData?.[0] || {};
const [wolEnabled, setWolEnabled] = useState<boolean>(personal?.enableWol === 1);
const [guacamoleEnabled, setGuacamoleEnabled] = useState<boolean>(
personal?.enableGuacamole === 1,
);
const [defaultFont, setDefaultFont] = useState<string>(personal?.defaultFont);
const [update, setUpdate] = useState<any>({}); const [update, setUpdate] = useState<any>({});
const [debounced] = useDebouncedValue(update, 1000); const [debounced] = useDebouncedValue(update, 1000);
const { mutateAsync } = useMutationAPI(); const { mutateAsync } = useMutationAPI();
const { isMobile, theme } = useCommonHooks(); const { isMobile, theme } = useCommonHooks();
useEffect(() => { useEffect(() => {
if (Object.keys(debounced).length) { if (Object.keys(debounced).length) {
setPersonal(update);
mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced }); mutateAsync({ method: 'PATCH', endpoint: endpoint, body: debounced });
setUpdate({}); setUpdate({});
} }
}, [debounced]); }, [debounced]);
useEffect(() => { useEffect(() => {
if (update !== personal && Object.keys(update).length) { if (Object.keys(personal).length > 0) {
setPersonal(update); setWolEnabled(personal.enableWol === 1);
setGuacamoleEnabled(personal.enableGuacamole === 1);
setDefaultFont(personal.defaultFont);
} }
}, [update]); }, [personal]);
useEffect(() => {
if (
Object.keys(personal).length > 0 &&
defaultFont &&
defaultFont !== personal.defaultFont
) {
setUpdate({
...personal,
defaultFont: defaultFont,
});
}
}, [defaultFont]);
return ( return (
<Stack> <Stack>
<SettingsHeader <SettingsHeader
@@ -76,163 +96,229 @@ const PersonalizationSettings = () => {
}} }}
/> />
<Grid w={'75%'}> <Grid w={'75%'}>
<GridCol span={isMobile ? 12 : 4}> {Object.keys(personal).length > 0 && (
<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}> <>
<TextInput <GridCol span={isMobile ? 12 : 4}>
label={'First Name'} <Card
className={textInputClasses.settingsItem} className={cardClasses.settingsItem}
classNames={textInputClasses} classNames={cardClasses}
defaultValue={personal?.firstName} pt={0}
onChange={(event) => { >
const updatedPersonal = { <TextInput
...personal, label={'First Name'}
firstName: event.currentTarget.value, className={textInputClasses.settingsItem}
}; classNames={textInputClasses}
setUpdate(updatedPersonal); defaultValue={personal?.firstName}
}} onChange={(event) => {
styles={ const updatedPersonal = {
theme.textShadowsEnabled ...personal,
? { firstName: event.currentTarget.value,
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' }, };
} setUpdate(updatedPersonal);
: undefined }}
} styles={
/> theme.textShadowsEnabled
</Card> ? {
</GridCol> label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
<GridCol span={isMobile ? 12 : 4}> }
<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}> : undefined
<TextInput }
label={'Last Name'} />
className={textInputClasses.settingsItem} </Card>
classNames={textInputClasses} </GridCol>
defaultValue={personal?.lastName} <GridCol span={isMobile ? 12 : 4}>
onChange={(event) => { <Card
const updatedPersonal = { className={cardClasses.settingsItem}
...personal, classNames={cardClasses}
lastName: event.currentTarget.value, pt={0}
}; >
setUpdate(updatedPersonal); <TextInput
}} label={'Last Name'}
styles={ className={textInputClasses.settingsItem}
theme.textShadowsEnabled classNames={textInputClasses}
? { defaultValue={personal?.lastName}
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' }, onChange={(event) => {
} const updatedPersonal = {
: undefined ...personal,
} lastName: event.currentTarget.value,
/> };
</Card> setUpdate(updatedPersonal);
</GridCol> }}
<GridCol span={isMobile ? 12 : 4}> styles={
<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}> theme.textShadowsEnabled
<TextInput ? {
label={'Email'} label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
className={textInputClasses.settingsItem} }
classNames={textInputClasses} : undefined
defaultValue={personal?.email} }
onChange={(event) => { />
const updatedPersonal = { </Card>
...personal, </GridCol>
email: event.currentTarget.value, <GridCol span={isMobile ? 12 : 4}>
}; <Card
setUpdate(updatedPersonal); className={cardClasses.settingsItem}
}} classNames={cardClasses}
styles={ pt={0}
theme.textShadowsEnabled >
? { <TextInput
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' }, label={'Email'}
} className={textInputClasses.settingsItem}
: undefined classNames={textInputClasses}
} defaultValue={personal?.email}
/> onChange={(event) => {
</Card> const updatedPersonal = {
</GridCol> ...personal,
<GridCol span={12}> email: event.currentTarget.value,
<Card className={cardClasses.settingsItem} classNames={cardClasses} pt={0}> };
<TextInput setUpdate(updatedPersonal);
label={'Physical Address'} }}
className={textInputClasses.settingsItem} styles={
classNames={textInputClasses} theme.textShadowsEnabled
defaultValue={personal?.physicalAddress} ? {
onChange={(event) => { label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
const updatedPersonal = { }
...personal, : undefined
physicalAddress: event.currentTarget.value, }
}; />
setUpdate(updatedPersonal); </Card>
}} </GridCol>
styles={ <GridCol span={12}>
theme.textShadowsEnabled <Card
? { className={cardClasses.settingsItem}
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' }, classNames={cardClasses}
} pt={0}
: undefined >
} <TextInput
/> label={'Nickname'}
</Card> className={textInputClasses.settingsItem}
</GridCol> classNames={textInputClasses}
defaultValue={personal?.nickname || ''}
onChange={(event) => {
const updatedPersonal = {
...personal,
nickname: event.currentTarget.value,
};
setUpdate(updatedPersonal);
}}
styles={
theme.textShadowsEnabled
? {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
: undefined
}
/>
</Card>
</GridCol>
<GridCol span={12}>
<Card
className={cardClasses.settingsItem}
classNames={cardClasses}
pt={0}
>
<TextInput
label={'Physical Address'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
defaultValue={personal?.physicalAddress}
onChange={(event) => {
const updatedPersonal = {
...personal,
physicalAddress: event.currentTarget.value,
};
setUpdate(updatedPersonal);
}}
styles={
theme.textShadowsEnabled
? {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
: undefined
}
/>
</Card>
</GridCol>
<GridCol span={12}>
<Card
w={'100%'}
className={cardClasses.settingsItem}
classNames={cardClasses}
style={{ overflow: 'visible' }}
>
<Stack w={'100%'} px={16}>
<Text
top={-12}
className={textClasses.currentTheme}
classNames={textClasses}
>
Extras
</Text>
<Text>Font Select</Text>
{defaultFont && (
<FontPicker
autoLoad
defaultValue={defaultFont || 'Jost'}
value={(font: string) => setDefaultFont(font)}
/>
)}
<Switch
label={'Enable Wake on LAN'}
className={switchClasses.default}
classNames={switchClasses}
checked={wolEnabled}
onChange={(event) => {
setWolEnabled(!wolEnabled);
const updatedPersonal = {
...personal,
enableWol: event.target.checked ? 1 : 0,
};
setUpdate(updatedPersonal);
}}
/>
<Switch
label={'Enable Guacamole Clients'}
className={switchClasses.default}
classNames={switchClasses}
checked={guacamoleEnabled}
onChange={(event) => {
setGuacamoleEnabled(!guacamoleEnabled);
const updatedPersonal = {
...personal,
enableGuacamole: event.target.checked ? 1 : 0,
};
setUpdate(updatedPersonal);
}}
/>
{personal?.enableGuacamole === 1 && (
<TextInput
label={'Guacamole Host'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
defaultValue={personal?.guacamoleHost}
onChange={(event) => {
const updatedPersonal = {
...personal,
guacamoleHost: event.currentTarget.value,
};
setUpdate(updatedPersonal);
}}
styles={
theme.textShadowsEnabled
? {
label: {
boxShadow: '2px 2px var(--mantine-color-border-0)',
},
}
: undefined
}
/>
)}
</Stack>
</Card>
</GridCol>
</>
)}
</Grid> </Grid>
<Card
w={'75%'}
className={cardClasses.settingsItem}
classNames={cardClasses}
style={{ overflow: 'visible' }}
>
<Stack w={'100%'} px={16}>
<Text top={-12} className={textClasses.currentTheme} classNames={textClasses}>
Extras
</Text>
<Switch
label={'Enable Wake on LAN'}
className={switchClasses.default}
classNames={switchClasses}
checked={personal?.enableWol === 1}
onChange={(event) => {
const updatedPersonal = {
...personal,
enableWol: event.target.checked ? 1 : 0,
};
setUpdate(updatedPersonal);
}}
/>
<Switch
label={'Enable Guacamole Clients'}
className={switchClasses.default}
classNames={switchClasses}
checked={personal?.enableGuacamole === 1}
onChange={(event) => {
const updatedPersonal = {
...personal,
enableGuacamole: event.target.checked ? 1 : 0,
};
setUpdate(updatedPersonal);
}}
/>
{personal?.enableGuacamole === 1 && (
<TextInput
label={'Guacamole Host'}
className={textInputClasses.settingsItem}
classNames={textInputClasses}
defaultValue={personal?.guacamoleHost}
onChange={(event) => {
const updatedPersonal = {
...personal,
guacamoleHost: event.currentTarget.value,
};
setUpdate(updatedPersonal);
}}
styles={
theme.textShadowsEnabled
? {
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
}
: undefined
}
/>
)}
</Stack>
</Card>
</Stack> </Stack>
</Stack> </Stack>
); );

3
src/styles/Text.module.css
View File

@@ -10,8 +10,6 @@
.dateTime { .dateTime {
&.root { &.root {
display: flex; display: flex;
font-family: -apple-system, Jost, BlinkMacSystemFont, Helvetica Neue, Roboto,
sans-serif !important;
font-size: 1.75rem; font-size: 1.75rem;
margin: 0; margin: 0;
padding: 0; padding: 0;
@@ -78,7 +76,6 @@
font-size: .6875rem; font-size: .6875rem;
font-style: normal; font-style: normal;
color: var(--mantine-color-primary-0); color: var(--mantine-color-primary-0);
font-family: "Jost", sans-serif;
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;

2
src/types/personalData.ts
View File

@@ -6,4 +6,6 @@ export interface PersonalData {
enableWol: number; enableWol: number;
enableGuacamole: number; enableGuacamole: number;
guacamoleHost?: string; guacamoleHost?: string;
nickname?: string;
defaultFont: string;
} }