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

Mobile and style improvements

Browse Source
This commit is contained in:
Sean Edmunds
2025-03-28 14:25:33 -05:00
parent e935b13baf
commit 332c759ed0
23 changed files with 743 additions and 572 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
package-lock.json generated
View File

@@ -10,12 +10,12 @@
"dependencies": { "dependencies": {
"@hello-pangea/dnd": "^18.0.1", "@hello-pangea/dnd": "^18.0.1",
"@iconify/react": "^5.2.0", "@iconify/react": "^5.2.0",
"@mantine/core": "^7.17.2", "@mantine/core": "^7.17.3",
"@mantine/hooks": "^7.17.2", "@mantine/hooks": "^7.17.3",
"@tabler/icons-react": "^3.31.0", "@tabler/icons-react": "^3.31.0",
"@tanstack/react-query": "^5.69.0", "@tanstack/react-query": "^5.69.3",
"@tanstack/react-query-devtools": "^5.69.0", "@tanstack/react-query-devtools": "^5.69.3",
"@tanstack/react-query-persist-client": "^5.69.0", "@tanstack/react-query-persist-client": "^5.69.3",
"idb-keyval": "^6.2.1", "idb-keyval": "^6.2.1",
"jotai": "^2.12.2", "jotai": "^2.12.2",
"react": "^19.0.0", "react": "^19.0.0",
@@ -27,11 +27,11 @@
"recharts": "^2.15.1" "recharts": "^2.15.1"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^22.13.11", "@types/node": "^22.13.14",
"@types/react": "^19.0.12", "@types/react": "^19.0.12",
"@types/react-dom": "^19.0.4", "@types/react-dom": "^19.0.4",
"@typescript-eslint/eslint-plugin": "^8.27.0", "@typescript-eslint/eslint-plugin": "^8.28.0",
"@typescript-eslint/parser": "^8.27.0", "@typescript-eslint/parser": "^8.28.0",
"@vitejs/plugin-react": "^4.3.4", "@vitejs/plugin-react": "^4.3.4",
"@vitest/coverage-v8": "^3.0.9", "@vitest/coverage-v8": "^3.0.9",
"@vitest/ui": "^3.0.9", "@vitest/ui": "^3.0.9",
@@ -39,7 +39,7 @@
"eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19", "eslint-plugin-react-refresh": "^0.4.19",
"typescript": "^5.8.2", "typescript": "^5.8.2",
"vite": "^6.2.2", "vite": "^6.2.3",
"vite-plugin-dts": "~4.5.3", "vite-plugin-dts": "~4.5.3",
"vite-plugin-eslint": "^1.8.1", "vite-plugin-eslint": "^1.8.1",
"vite-tsconfig-paths": "^5.1.4", "vite-tsconfig-paths": "^5.1.4",
@@ -1180,9 +1180,10 @@
} }
}, },
"node_modules/@mantine/core": { "node_modules/@mantine/core": {
"version": "7.17.2", "version": "7.17.3",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.17.2.tgz", "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.17.3.tgz",
"integrity": "sha512-R6MYhitJ0JEgrhadd31Nw9FhRaQwDHjXUs5YIlitKH/fTOz9gKSxKjzmNng3bEBQCcbEDOkZj3FRcBgTUh/F0Q==", "integrity": "sha512-N/AfV5eMnfEMx9WzI7AU5pNFBEzAfT/KtE2XDKS+0ht6RifUmolIxyIvoGMYz2yUEsCBMJZqmBq33Rabf5W7Ug==",
"license": "MIT",
"dependencies": { "dependencies": {
"@floating-ui/react": "^0.26.28", "@floating-ui/react": "^0.26.28",
"clsx": "^2.1.1", "clsx": "^2.1.1",
@@ -1192,15 +1193,16 @@
"type-fest": "^4.27.0" "type-fest": "^4.27.0"
}, },
"peerDependencies": { "peerDependencies": {
"@mantine/hooks": "7.17.2", "@mantine/hooks": "7.17.3",
"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/hooks": { "node_modules/@mantine/hooks": {
"version": "7.17.2", "version": "7.17.3",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.17.2.tgz", "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.17.3.tgz",
"integrity": "sha512-tbErVcGZu0E4dSmE6N0k6Tv1y9R3SQmmQgwqorcc+guEgKMdamc36lucZGlJnSGUmGj+WLUgELkEQ0asdfYBDA==", "integrity": "sha512-6o65Rbfl8jd1C1nF9icvungqL0qZViEOmrZgkyKXxBYkC3x91fz4zftwQgNjt1tZHWDNO6Bo4GpRjJyAdwl48g==",
"license": "MIT",
"peerDependencies": { "peerDependencies": {
"react": "^18.x || ^19.x" "react": "^18.x || ^19.x"
} }
@@ -1349,6 +1351,7 @@
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@nodelib/fs.stat": "2.0.5", "@nodelib/fs.stat": "2.0.5",
"run-parallel": "^1.1.9" "run-parallel": "^1.1.9"
@@ -1362,6 +1365,7 @@
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
"dev": true, "dev": true,
"license": "MIT",
"engines": { "engines": {
"node": ">= 8" "node": ">= 8"
} }
@@ -1371,6 +1375,7 @@
"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@nodelib/fs.scandir": "2.1.5", "@nodelib/fs.scandir": "2.1.5",
"fastq": "^1.6.0" "fastq": "^1.6.0"
@@ -1608,9 +1613,10 @@
} }
}, },
"node_modules/@tanstack/query-core": { "node_modules/@tanstack/query-core": {
"version": "5.69.0", "version": "5.69.2",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.69.0.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.69.2.tgz",
"integrity": "sha512-Kn410jq6vs1P8Nm+ZsRj9H+U3C0kjuEkYLxbiCyn3MDEiYor1j2DGVULqAz62SLZtUZ/e9Xt6xMXiJ3NJ65WyQ==", "integrity": "sha512-+spKBqGMSxVMhYPMHr4L7efc4CDdb0Y8nE4UxP/FjV4V3ajP3uhBsh0T7pSuObBgYkU+nY1PRkJhKNmwlHmkUg==",
"license": "MIT",
"funding": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
@@ -1626,11 +1632,12 @@
} }
}, },
"node_modules/@tanstack/query-persist-client-core": { "node_modules/@tanstack/query-persist-client-core": {
"version": "5.69.0", "version": "5.69.2",
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.69.0.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.69.2.tgz",
"integrity": "sha512-OisxDgcDH0ajswGBA+TXXSn5uzll1EaCB6/MQH+2+t4JqR/qq5TS8nh6A7pas/GBFB01kNpgKRYmZp0tkKVtOg==", "integrity": "sha512-RxKv+FTKzRMtL3veHvLjQdy+kaYHxAyfV+Gg/1Lj/t61iUqdhzF4lFFctfGDSKrzvEIsg/JwJDfmYvScjNloMw==",
"license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-core": "5.69.0" "@tanstack/query-core": "5.69.2"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1638,11 +1645,12 @@
} }
}, },
"node_modules/@tanstack/react-query": { "node_modules/@tanstack/react-query": {
"version": "5.69.0", "version": "5.69.3",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.69.0.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.69.3.tgz",
"integrity": "sha512-Ift3IUNQqTcaFa1AiIQ7WCb/PPy8aexZdq9pZWLXhfLcLxH0+PZqJ2xFImxCpdDZrFRZhLJrh76geevS5xjRhA==", "integrity": "sha512-EozCj1aFM/c827GQbVnvEt2x80oBax1vd2e5s/2EDeD469AZW9BPAyRK9VVyD0I1yvO6vOI+tPKXXFcadbSXvA==",
"license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-core": "5.69.0" "@tanstack/query-core": "5.69.2"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1653,9 +1661,10 @@
} }
}, },
"node_modules/@tanstack/react-query-devtools": { "node_modules/@tanstack/react-query-devtools": {
"version": "5.69.0", "version": "5.69.3",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.69.0.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.69.3.tgz",
"integrity": "sha512-sYklnou3IKAemqB5wJeBwjmG5bUGDKAL5/I4pVA+aqSnsNibVLt8/pAU976uuJ5K71w71bHtI/AMxiIs3gtkEA==", "integrity": "sha512-BQ37OAnG4+2zZjz7ot2A6FIerOOVMTQaMgAgcZYyxKNHrwTEsQ4e+vpmticBig4NUSK3CNSD4wGPVqSEppe+Bw==",
"license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-devtools": "5.67.2" "@tanstack/query-devtools": "5.67.2"
}, },
@@ -1664,23 +1673,24 @@
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
}, },
"peerDependencies": { "peerDependencies": {
"@tanstack/react-query": "^5.69.0", "@tanstack/react-query": "^5.69.3",
"react": "^18 || ^19" "react": "^18 || ^19"
} }
}, },
"node_modules/@tanstack/react-query-persist-client": { "node_modules/@tanstack/react-query-persist-client": {
"version": "5.69.0", "version": "5.69.3",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.69.0.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.69.3.tgz",
"integrity": "sha512-/uIblBRwnpms6Xu+71Jy+2V+iuWrSyDfeYVNp8kbyYOKP9135ii/S80+EXBGeM/jx7+vizRGORaq4kKuKXo6Sw==", "integrity": "sha512-7grYKVT4JwjlGHv0aFVefcWjU9TSF0N6h4pwEEszlByvr2105j78f/hJLypASk4o661YlNLnm+5sLaAc94q7wA==",
"license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-persist-client-core": "5.69.0" "@tanstack/query-persist-client-core": "5.69.2"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
}, },
"peerDependencies": { "peerDependencies": {
"@tanstack/react-query": "^5.69.0", "@tanstack/react-query": "^5.69.3",
"react": "^18 || ^19" "react": "^18 || ^19"
} }
}, },
@@ -1813,10 +1823,11 @@
"dev": true "dev": true
}, },
"node_modules/@types/node": { "node_modules/@types/node": {
"version": "22.13.11", "version": "22.13.14",
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.11.tgz", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.14.tgz",
"integrity": "sha512-iEUCUJoU0i3VnrCmgoWCXttklWcvoCIx4jzcP22fioIVSdTmjgoEvmAO/QPw6TcS9k5FrNgn4w7q5lGOd1CT5g==", "integrity": "sha512-Zs/Ollc1SJ8nKUAgc7ivOEdIBM8JAKgrqqUYi2J997JuKO7/tpQC+WCetQ1sypiKCQWHdvdg9wBNpUPEWZae7w==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"undici-types": "~6.20.0" "undici-types": "~6.20.0"
} }
@@ -1846,16 +1857,17 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@typescript-eslint/eslint-plugin": { "node_modules/@typescript-eslint/eslint-plugin": {
"version": "8.27.0", "version": "8.28.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.27.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.28.0.tgz",
"integrity": "sha512-4henw4zkePi5p252c8ncBLzLce52SEUz2Ebj8faDnuUXz2UuHEONYcJ+G0oaCF+bYCWVZtrGzq3FD7YXetmnSA==", "integrity": "sha512-lvFK3TCGAHsItNdWZ/1FkvpzCxTHUVuFrdnOGLMa0GGCFIbCgQWVk3CzCGdA7kM3qGVc+dfW9tr0Z/sHnGDFyg==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@eslint-community/regexpp": "^4.10.0", "@eslint-community/regexpp": "^4.10.0",
"@typescript-eslint/scope-manager": "8.27.0", "@typescript-eslint/scope-manager": "8.28.0",
"@typescript-eslint/type-utils": "8.27.0", "@typescript-eslint/type-utils": "8.28.0",
"@typescript-eslint/utils": "8.27.0", "@typescript-eslint/utils": "8.28.0",
"@typescript-eslint/visitor-keys": "8.27.0", "@typescript-eslint/visitor-keys": "8.28.0",
"graphemer": "^1.4.0", "graphemer": "^1.4.0",
"ignore": "^5.3.1", "ignore": "^5.3.1",
"natural-compare": "^1.4.0", "natural-compare": "^1.4.0",
@@ -1875,15 +1887,16 @@
} }
}, },
"node_modules/@typescript-eslint/parser": { "node_modules/@typescript-eslint/parser": {
"version": "8.27.0", "version": "8.28.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.27.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.28.0.tgz",
"integrity": "sha512-XGwIabPallYipmcOk45DpsBSgLC64A0yvdAkrwEzwZ2viqGqRUJ8eEYoPz0CWnutgAFbNMPdsGGvzjSmcWVlEA==", "integrity": "sha512-LPcw1yHD3ToaDEoljFEfQ9j2xShY367h7FZ1sq5NJT9I3yj4LHer1Xd1yRSOdYy9BpsrxU7R+eoDokChYM53lQ==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@typescript-eslint/scope-manager": "8.27.0", "@typescript-eslint/scope-manager": "8.28.0",
"@typescript-eslint/types": "8.27.0", "@typescript-eslint/types": "8.28.0",
"@typescript-eslint/typescript-estree": "8.27.0", "@typescript-eslint/typescript-estree": "8.28.0",
"@typescript-eslint/visitor-keys": "8.27.0", "@typescript-eslint/visitor-keys": "8.28.0",
"debug": "^4.3.4" "debug": "^4.3.4"
}, },
"engines": { "engines": {
@@ -1899,13 +1912,14 @@
} }
}, },
"node_modules/@typescript-eslint/scope-manager": { "node_modules/@typescript-eslint/scope-manager": {
"version": "8.27.0", "version": "8.28.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.27.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.28.0.tgz",
"integrity": "sha512-8oI9GwPMQmBryaaxG1tOZdxXVeMDte6NyJA4i7/TWa4fBwgnAXYlIQP+uYOeqAaLJ2JRxlG9CAyL+C+YE9Xknw==", "integrity": "sha512-u2oITX3BJwzWCapoZ/pXw6BCOl8rJP4Ij/3wPoGvY8XwvXflOzd1kLrDUUUAIEdJSFh+ASwdTHqtan9xSg8buw==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@typescript-eslint/types": "8.27.0", "@typescript-eslint/types": "8.28.0",
"@typescript-eslint/visitor-keys": "8.27.0" "@typescript-eslint/visitor-keys": "8.28.0"
}, },
"engines": { "engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0" "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -1916,13 +1930,14 @@
} }
}, },
"node_modules/@typescript-eslint/type-utils": { "node_modules/@typescript-eslint/type-utils": {
"version": "8.27.0", "version": "8.28.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.27.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.28.0.tgz",
"integrity": "sha512-wVArTVcz1oJOIEJxui/nRhV0TXzD/zMSOYi/ggCfNq78EIszddXcJb7r4RCp/oBrjt8n9A0BSxRMKxHftpDxDA==", "integrity": "sha512-oRoXu2v0Rsy/VoOGhtWrOKDiIehvI+YNrDk5Oqj40Mwm0Yt01FC/Q7nFqg088d3yAsR1ZcZFVfPCTTFCe/KPwg==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@typescript-eslint/typescript-estree": "8.27.0", "@typescript-eslint/typescript-estree": "8.28.0",
"@typescript-eslint/utils": "8.27.0", "@typescript-eslint/utils": "8.28.0",
"debug": "^4.3.4", "debug": "^4.3.4",
"ts-api-utils": "^2.0.1" "ts-api-utils": "^2.0.1"
}, },
@@ -1939,10 +1954,11 @@
} }
}, },
"node_modules/@typescript-eslint/types": { "node_modules/@typescript-eslint/types": {
"version": "8.27.0", "version": "8.28.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.27.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.28.0.tgz",
"integrity": "sha512-/6cp9yL72yUHAYq9g6DsAU+vVfvQmd1a8KyA81uvfDE21O2DwQ/qxlM4AR8TSdAu+kJLBDrEHKC5/W2/nxsY0A==", "integrity": "sha512-bn4WS1bkKEjx7HqiwG2JNB3YJdC1q6Ue7GyGlwPHyt0TnVq6TtD/hiOdTZt71sq0s7UzqBFXD8t8o2e63tXgwA==",
"dev": true, "dev": true,
"license": "MIT",
"engines": { "engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0" "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
}, },
@@ -1952,13 +1968,14 @@
} }
}, },
"node_modules/@typescript-eslint/typescript-estree": { "node_modules/@typescript-eslint/typescript-estree": {
"version": "8.27.0", "version": "8.28.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.27.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.28.0.tgz",
"integrity": "sha512-BnKq8cqPVoMw71O38a1tEb6iebEgGA80icSxW7g+kndx0o6ot6696HjG7NdgfuAVmVEtwXUr3L8R9ZuVjoQL6A==", "integrity": "sha512-H74nHEeBGeklctAVUvmDkxB1mk+PAZ9FiOMPFncdqeRBXxk1lWSYraHw8V12b7aa6Sg9HOBNbGdSHobBPuQSuA==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@typescript-eslint/types": "8.27.0", "@typescript-eslint/types": "8.28.0",
"@typescript-eslint/visitor-keys": "8.27.0", "@typescript-eslint/visitor-keys": "8.28.0",
"debug": "^4.3.4", "debug": "^4.3.4",
"fast-glob": "^3.3.2", "fast-glob": "^3.3.2",
"is-glob": "^4.0.3", "is-glob": "^4.0.3",
@@ -1978,15 +1995,16 @@
} }
}, },
"node_modules/@typescript-eslint/utils": { "node_modules/@typescript-eslint/utils": {
"version": "8.27.0", "version": "8.28.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.27.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.28.0.tgz",
"integrity": "sha512-njkodcwH1yvmo31YWgRHNb/x1Xhhq4/m81PhtvmRngD8iHPehxffz1SNCO+kwaePhATC+kOa/ggmvPoPza5i0Q==", "integrity": "sha512-OELa9hbTYciYITqgurT1u/SzpQVtDLmQMFzy/N8pQE+tefOyCWT79jHsav294aTqV1q1u+VzqDGbuujvRYaeSQ==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@eslint-community/eslint-utils": "^4.4.0", "@eslint-community/eslint-utils": "^4.4.0",
"@typescript-eslint/scope-manager": "8.27.0", "@typescript-eslint/scope-manager": "8.28.0",
"@typescript-eslint/types": "8.27.0", "@typescript-eslint/types": "8.28.0",
"@typescript-eslint/typescript-estree": "8.27.0" "@typescript-eslint/typescript-estree": "8.28.0"
}, },
"engines": { "engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0" "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -2001,12 +2019,13 @@
} }
}, },
"node_modules/@typescript-eslint/visitor-keys": { "node_modules/@typescript-eslint/visitor-keys": {
"version": "8.27.0", "version": "8.28.0",
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.27.0.tgz", "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.28.0.tgz",
"integrity": "sha512-WsXQwMkILJvffP6z4U3FYJPlbf/j07HIxmDjZpbNvBJkMfvwXj5ACRkkHwBDvLBbDbtX5TdU64/rcvKJ/vuInQ==", "integrity": "sha512-hbn8SZ8w4u2pRwgQ1GlUrPKE+t2XvcCW5tTRF7j6SMYIuYG37XuzIW44JCZPa36evi0Oy2SnM664BlIaAuQcvg==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@typescript-eslint/types": "8.27.0", "@typescript-eslint/types": "8.28.0",
"eslint-visitor-keys": "^4.2.0" "eslint-visitor-keys": "^4.2.0"
}, },
"engines": { "engines": {
@@ -2022,6 +2041,7 @@
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz", "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
"integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==", "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
"dev": true, "dev": true,
"license": "Apache-2.0",
"engines": { "engines": {
"node": "^18.18.0 || ^20.9.0 || >=21.1.0" "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
}, },
@@ -2455,6 +2475,7 @@
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"fill-range": "^7.1.1" "fill-range": "^7.1.1"
}, },
@@ -3225,6 +3246,7 @@
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
"integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.stat": "^2.0.2",
"@nodelib/fs.walk": "^1.2.3", "@nodelib/fs.walk": "^1.2.3",
@@ -3241,6 +3263,7 @@
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true, "dev": true,
"license": "ISC",
"dependencies": { "dependencies": {
"is-glob": "^4.0.1" "is-glob": "^4.0.1"
}, },
@@ -3282,6 +3305,7 @@
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
"integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==", "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
"dev": true, "dev": true,
"license": "ISC",
"dependencies": { "dependencies": {
"reusify": "^1.0.4" "reusify": "^1.0.4"
} }
@@ -3323,6 +3347,7 @@
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"to-regex-range": "^5.0.1" "to-regex-range": "^5.0.1"
}, },
@@ -3674,6 +3699,7 @@
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true, "dev": true,
"license": "MIT",
"engines": { "engines": {
"node": ">=0.12.0" "node": ">=0.12.0"
} }
@@ -4011,6 +4037,7 @@
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
"dev": true, "dev": true,
"license": "MIT",
"engines": { "engines": {
"node": ">= 8" "node": ">= 8"
} }
@@ -4020,6 +4047,7 @@
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"braces": "^3.0.3", "braces": "^3.0.3",
"picomatch": "^2.3.1" "picomatch": "^2.3.1"
@@ -4425,7 +4453,8 @@
"type": "consulting", "type": "consulting",
"url": "https://feross.org/support" "url": "https://feross.org/support"
} }
] ],
"license": "MIT"
}, },
"node_modules/raf-schd": { "node_modules/raf-schd": {
"version": "4.0.3", "version": "4.0.3",
@@ -4786,6 +4815,7 @@
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz", "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
"integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==", "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
"dev": true, "dev": true,
"license": "MIT",
"engines": { "engines": {
"iojs": ">=1.0.0", "iojs": ">=1.0.0",
"node": ">=0.10.0" "node": ">=0.10.0"
@@ -4862,6 +4892,7 @@
"url": "https://feross.org/support" "url": "https://feross.org/support"
} }
], ],
"license": "MIT",
"dependencies": { "dependencies": {
"queue-microtask": "^1.2.2" "queue-microtask": "^1.2.2"
} }
@@ -5222,6 +5253,7 @@
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"is-number": "^7.0.0" "is-number": "^7.0.0"
}, },
@@ -5499,10 +5531,11 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "6.2.2", "version": "6.2.3",
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.2.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-6.2.3.tgz",
"integrity": "sha512-yW7PeMM+LkDzc7CgJuRLMW2Jz0FxMOsVJ8Lv3gpgW9WLcb9cTW+121UEr1hvmfR7w3SegR5ItvYyzVz1vxNJgQ==", "integrity": "sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"esbuild": "^0.25.0", "esbuild": "^0.25.0",
"postcss": "^8.5.3", "postcss": "^8.5.3",

18
package.json
View File

@@ -12,12 +12,12 @@
"dependencies": { "dependencies": {
"@hello-pangea/dnd": "^18.0.1", "@hello-pangea/dnd": "^18.0.1",
"@iconify/react": "^5.2.0", "@iconify/react": "^5.2.0",
"@mantine/core": "^7.17.2", "@mantine/core": "^7.17.3",
"@mantine/hooks": "^7.17.2", "@mantine/hooks": "^7.17.3",
"@tabler/icons-react": "^3.31.0", "@tabler/icons-react": "^3.31.0",
"@tanstack/react-query": "^5.69.0", "@tanstack/react-query": "^5.69.3",
"@tanstack/react-query-devtools": "^5.69.0", "@tanstack/react-query-devtools": "^5.69.3",
"@tanstack/react-query-persist-client": "^5.69.0", "@tanstack/react-query-persist-client": "^5.69.3",
"idb-keyval": "^6.2.1", "idb-keyval": "^6.2.1",
"jotai": "^2.12.2", "jotai": "^2.12.2",
"react": "^19.0.0", "react": "^19.0.0",
@@ -29,11 +29,11 @@
"recharts": "^2.15.1" "recharts": "^2.15.1"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^22.13.11", "@types/node": "^22.13.14",
"@types/react": "^19.0.12", "@types/react": "^19.0.12",
"@types/react-dom": "^19.0.4", "@types/react-dom": "^19.0.4",
"@typescript-eslint/eslint-plugin": "^8.27.0", "@typescript-eslint/eslint-plugin": "^8.28.0",
"@typescript-eslint/parser": "^8.27.0", "@typescript-eslint/parser": "^8.28.0",
"@vitejs/plugin-react": "^4.3.4", "@vitejs/plugin-react": "^4.3.4",
"@vitest/coverage-v8": "^3.0.9", "@vitest/coverage-v8": "^3.0.9",
"@vitest/ui": "^3.0.9", "@vitest/ui": "^3.0.9",
@@ -41,7 +41,7 @@
"eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19", "eslint-plugin-react-refresh": "^0.4.19",
"typescript": "^5.8.2", "typescript": "^5.8.2",
"vite": "^6.2.2", "vite": "^6.2.3",
"vite-plugin-dts": "~4.5.3", "vite-plugin-dts": "~4.5.3",
"vite-plugin-eslint": "^1.8.1", "vite-plugin-eslint": "^1.8.1",
"vite-tsconfig-paths": "^5.1.4", "vite-tsconfig-paths": "^5.1.4",

78
src/components/WeatherModal/CurrentWeather.tsx
View File

@@ -7,7 +7,7 @@ import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
import WeatherIcon from './WeatherIcon'; import WeatherIcon from './WeatherIcon';
export default function CurrentWeather({ current }: any) { export default function CurrentWeather({ current }: any) {
const { currentLocation } = useCommonHooks(); const { currentLocation, isMobile } = useCommonHooks();
const { data: sunStateData } = useSunStateAPI({ const { data: sunStateData } = useSunStateAPI({
lat: currentLocation.lat, lat: currentLocation.lat,
lon: currentLocation.lon, lon: currentLocation.lon,
@@ -56,7 +56,7 @@ export default function CurrentWeather({ current }: any) {
</Text> </Text>
</Group> </Group>
<Group gap={8} w={'100%'} justify='space-between'> <Group gap={8} w={'100%'} justify='space-between'>
<Stack gap={0} w={'45%'}> <Stack gap={0} w={isMobile ? '40%' : '45%'}>
<Group gap={0} justify='flex-end'> <Group gap={0} justify='flex-end'>
<WeatherIcon <WeatherIcon
textDescription={`${ textDescription={`${
@@ -73,7 +73,7 @@ export default function CurrentWeather({ current }: any) {
: current.textDescription : current.textDescription
}`} }`}
/> />
<Text fz={'7rem'} fw={200}> <Text fz={isMobile ? '5rem' : '7rem'} fw={200}>
{current.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup> {current.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
</Text> </Text>
</Group> </Group>
@@ -89,7 +89,7 @@ export default function CurrentWeather({ current }: any) {
{current.textDescription} {current.textDescription}
</Text> </Text>
</Stack> </Stack>
<Stack gap={4} w={'45%'}> <Stack gap={4} w={isMobile ? '50%' : '45%'}>
<Text> <Text>
Feels like {current.heatIndex ?? current.windChill ?? current.temperature} Feels like {current.heatIndex ?? current.windChill ?? current.temperature}
°<sup>F</sup> °<sup>F</sup>
@@ -105,7 +105,12 @@ export default function CurrentWeather({ current }: any) {
<FaLongArrowAltUp size={32} /> <FaLongArrowAltUp size={32} />
</ThemeIcon> </ThemeIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={3}> <Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text> <Text>
{current.highTemp}°<sup>F</sup> {current.highTemp}°<sup>F</sup>
</Text> </Text>
@@ -120,7 +125,12 @@ export default function CurrentWeather({ current }: any) {
<FaLongArrowAltDown size={32} /> <FaLongArrowAltDown size={32} />
</ThemeIcon> </ThemeIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={1}> <Grid.Col
span={1}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text> <Text>
{current.lowTemp}°<sup>F</sup> {current.lowTemp}°<sup>F</sup>
</Text> </Text>
@@ -137,7 +147,12 @@ export default function CurrentWeather({ current }: any) {
<WiSunrise size={32} /> <WiSunrise size={32} />
</ThemeIcon> </ThemeIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={3}> <Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{sunStates[0]?.sunrise}</Text> <Text>{sunStates[0]?.sunrise}</Text>
</Grid.Col> </Grid.Col>
<Grid.Col span={1}> <Grid.Col span={1}>
@@ -150,7 +165,12 @@ export default function CurrentWeather({ current }: any) {
<WiSunset size={32} /> <WiSunset size={32} />
</ThemeIcon> </ThemeIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={3}> <Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{sunStates[0]?.sunset}</Text> <Text>{sunStates[0]?.sunset}</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
@@ -165,10 +185,20 @@ export default function CurrentWeather({ current }: any) {
<WiHumidity size={32} /> <WiHumidity size={32} />
</ThemeIcon> </ThemeIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={3}> <Grid.Col
span={isMobile ? 4 : 3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>Humidity</Text> <Text>Humidity</Text>
</Grid.Col> </Grid.Col>
<Grid.Col span={2}> <Grid.Col
span={2}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{current.humidity}%</Text> <Text>{current.humidity}%</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
@@ -183,10 +213,20 @@ export default function CurrentWeather({ current }: any) {
<FaWind size={32} /> <FaWind size={32} />
</ThemeIcon> </ThemeIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={3}> <Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>Wind</Text> <Text>Wind</Text>
</Grid.Col> </Grid.Col>
<Grid.Col span={2}> <Grid.Col
span={isMobile ? 4 : 3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{current.windSpeed}mph</Text> <Text>{current.windSpeed}mph</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>
@@ -201,10 +241,20 @@ export default function CurrentWeather({ current }: any) {
<WiBarometer size={32} /> <WiBarometer size={32} />
</ThemeIcon> </ThemeIcon>
</Grid.Col> </Grid.Col>
<Grid.Col span={3}> <Grid.Col
span={3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>Pressure</Text> <Text>Pressure</Text>
</Grid.Col> </Grid.Col>
<Grid.Col span={2}> <Grid.Col
span={isMobile ? 4 : 3}
style={{
marginInlineStart: isMobile ? '1rem' : undefined,
}}
>
<Text>{current.pressure} in</Text> <Text>{current.pressure} in</Text>
</Grid.Col> </Grid.Col>
</Grid> </Grid>

35
src/components/WeatherModal/ExtendedForecast.tsx
View File

@@ -1,9 +1,12 @@
import { Group, Stack, Text } from '@mantine/core'; import { Group, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { textClasses } from 'styles';
import WeatherIcon from './WeatherIcon'; import WeatherIcon from './WeatherIcon';
export default function ExtendedForecast({ forecast }: any) { export default function ExtendedForecast({ forecast }: any) {
const day = forecast.slice(2, 14).filter((item: any) => item.isDaytime); const day = forecast.slice(2, 14).filter((item: any) => item.isDaytime);
const night = forecast.slice(2, 14).filter((item: any) => !item.isDaytime); const night = forecast.slice(2, 14).filter((item: any) => !item.isDaytime);
const { isMobile } = useCommonHooks();
return ( return (
<Stack <Stack
gap={0} gap={0}
@@ -16,7 +19,7 @@ export default function ExtendedForecast({ forecast }: any) {
paddingBottom: '.5rem', paddingBottom: '.5rem',
}} }}
> >
<Group gap={0} px={16} w={'100%'}> <Group gap={0} px={16} mb={8} w={'100%'}>
<Text <Text
c={'var(--color-text-pri)'} c={'var(--color-text-pri)'}
style={{ style={{
@@ -34,11 +37,37 @@ export default function ExtendedForecast({ forecast }: any) {
: item.shortForecast.includes('then') : item.shortForecast.includes('then')
? item.shortForecast.substring(0, item.shortForecast.indexOf('then')) ? item.shortForecast.substring(0, item.shortForecast.indexOf('then'))
: item.shortForecast; : item.shortForecast;
return ( return (
<Stack key={item.name} gap={0} align='center'> <Stack
w={isMobile ? '30%' : '15%'}
key={item.name}
gap={0}
align='center'
bg={'var(--color-background)'}
style={{
borderRadius: '8px',
}}
>
<Text>{item.name}</Text> <Text>{item.name}</Text>
<WeatherIcon textDescription={short} /> <WeatherIcon textDescription={short} />
<Text>{short}</Text> <Group
justify={short.length > 15 ? 'flex-start' : 'center'}
style={{
width: '100%',
whiteSpace: 'nowrap',
overflow: 'hidden',
boxSizing: 'border-box',
position: 'relative',
}}
>
<Text
className={short.length > 15 ? textClasses.autoScrollText : undefined}
classNames={textClasses}
>
{short}
</Text>
</Group>
<Text> <Text>
{item.temperature}°{item.temperatureUnit}/{night[index].temperature}° {item.temperature}°{item.temperatureUnit}/{night[index].temperature}°
{item.temperatureUnit} {item.temperatureUnit}

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

@@ -58,7 +58,11 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
}); });
}} }}
/> />
<YAxis stroke={theme.primaryColor} unit={'°F'} dataKey={'temperature'} /> <YAxis
stroke={theme.primaryColor}
unit={'°F'}
domain={['dataMin', 'dataMax']}
/>
<CartesianGrid stroke='#f5f5f522' /> <CartesianGrid stroke='#f5f5f522' />
<Tooltip content={<CustomTooltip />} /> <Tooltip content={<CustomTooltip />} />
<Line <Line
@@ -105,7 +109,7 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
return data.probabilityOfPrecipitation.value; return data.probabilityOfPrecipitation.value;
}} }}
stroke={theme.primaryColor} stroke={theme.primaryColor}
fill={theme.accentColor} fill={theme.primaryColor}
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }} dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
/> />
<Area <Area

17
src/components/WeatherModal/WeatherModal.tsx
View File

@@ -9,20 +9,15 @@ import ExtendedForecast from './ExtendedForecast';
import WeatherGraphs from './WeatherGraphs'; import WeatherGraphs from './WeatherGraphs';
export function WeatherModal({ export function WeatherModal({
setSearchValue,
setProviderLabel,
setProviderURL,
current, current,
extendedForecast, extendedForecast,
closeWeatherModal, closeWeatherModal,
weatherModalOpened, weatherModalOpened,
}: any) { }: any) {
const { const { theme, isMobile, currentUser, currentLocation } = useCommonHooks();
theme,
isMobile,
setProviderLabel,
setSearchValue,
setProviderURL,
currentUser,
currentLocation,
} = useCommonHooks();
const { data: hourly } = useWeatherAPI({ const { data: hourly } = useWeatherAPI({
endpoint: 'hourly', endpoint: 'hourly',
office: currentLocation.office, office: currentLocation.office,
@@ -45,10 +40,10 @@ export function WeatherModal({
classNames={modalClasses} classNames={modalClasses}
opened={weatherModalOpened} opened={weatherModalOpened}
onClose={() => { onClose={() => {
closeWeatherModal();
setProviderLabel('Google Search');
setSearchValue(''); setSearchValue('');
setProviderLabel('Google Search');
setProviderURL('https://www.google.com/search?q='); setProviderURL('https://www.google.com/search?q=');
closeWeatherModal();
}} }}
style={{ style={{
'--color-text-pri': theme.primaryColor, '--color-text-pri': theme.primaryColor,

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

@@ -1,5 +1,4 @@
import { Group, Stack, Text } from '@mantine/core'; import { Group, Stack, Text } from '@mantine/core';
import { WeatherModal } from 'components';
import { useCommonHooks } from 'hooks'; import { useCommonHooks } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { textClasses } from 'styles'; import { textClasses } from 'styles';
@@ -9,12 +8,8 @@ function Header({
date, date,
current, current,
setCurrent, setCurrent,
outlook,
extendedForecast,
weather, weather,
basicWeather, basicWeather,
weatherModalOpened,
closeWeatherModal,
openWeatherModal, openWeatherModal,
}: any) { }: any) {
const [time, setTime] = useState(new Date()); const [time, setTime] = useState(new Date());
@@ -127,6 +122,7 @@ function Header({
position: 'absolute', position: 'absolute',
bottom: isMobile ? -32 : 0, bottom: isMobile ? -32 : 0,
right: 16, right: 16,
cursor: 'pointer',
}} }}
onClick={openWeatherModal} onClick={openWeatherModal}
> >
@@ -158,13 +154,6 @@ function Header({
</Text> </Text>
</Group> </Group>
</Stack> </Stack>
<WeatherModal
current={current}
outlook={outlook}
extendedForecast={extendedForecast}
closeWeatherModal={closeWeatherModal}
weatherModalOpened={weatherModalOpened}
/>
</Stack> </Stack>
); );
} }

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

@@ -43,6 +43,7 @@ export default function Search({
const [listIndex, setListIndex] = useState(0); const [listIndex, setListIndex] = useState(0);
const { const {
theme, theme,
isMobile,
urlPattern, urlPattern,
providerLabel, providerLabel,
setProviderLabel, setProviderLabel,
@@ -263,7 +264,13 @@ export default function Search({
const [showFillButton, setShowFillButton] = useState(false); const [showFillButton, setShowFillButton] = useState(false);
if (item.option.searchTerm !== undefined) { if (item.option.searchTerm !== undefined) {
const m = new Date(item.option.dateTimeStamp); const m = new Date(item.option.dateTimeStamp);
const dateString = `${m.getUTCFullYear()}/${`0${m.getUTCMonth() + 1}`.slice(-2)}/${`0${m.getUTCDate()}`.slice(-2)} ${`0${m.getUTCHours()}`.slice(-2)}:${`0${m.getUTCMinutes()}`.slice(-2)}:${`0${m.getUTCSeconds()}`.slice(-2)}`; const year = m.getUTCFullYear();
const month = `0${m.getUTCMonth() + 1}`.slice(-2);
const day = `0${m.getUTCDate()}`.slice(-2);
const hours = `0${m.getUTCHours()}`.slice(-2);
const minutes = `0${m.getUTCMinutes()}`.slice(-2);
const seconds = `0${m.getUTCSeconds()}`.slice(-2);
const dateString = `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
return ( return (
<Group <Group
w={'100%'} w={'100%'}
@@ -446,7 +453,7 @@ export default function Search({
}} }}
spellCheck='true' spellCheck='true'
searchable searchable
autoFocus autoFocus={!isMobile}
leftSection={providerLabel} leftSection={providerLabel}
rightSection={<Stack />} rightSection={<Stack />}
renderOption={RenderOption} renderOption={RenderOption}
@@ -478,6 +485,9 @@ export default function Search({
closeProviderModal={closeProviderModal} closeProviderModal={closeProviderModal}
/> />
<WeatherModal <WeatherModal
setSearchValue={setSearchValue}
setProviderLabel={setProviderLabel}
setProviderURL={setProviderURL}
current={current} current={current}
outlook={outlook} outlook={outlook}
extendedForecast={extendedForecast} extendedForecast={extendedForecast}

6
src/pages/settings/Settings.tsx
View File

@@ -1,9 +1,9 @@
import { ActionIcon, Group, Stack, Tabs, Text } from '@mantine/core'; import { ActionIcon, Group, Stack, Tabs, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks'; import { useCommonHooks } from 'hooks';
import { FaPaintBrush, FaRegListAlt } from 'react-icons/fa';
import { import {
FiArrowLeftCircle, FiArrowLeftCircle,
FiBookmark, FiBookmark,
FiEdit,
FiGlobe, FiGlobe,
FiMail, FiMail,
FiMonitor, FiMonitor,
@@ -65,10 +65,10 @@ export function Settings() {
{isMobile ? <FiBookmark /> : 'Bookmarks'} {isMobile ? <FiBookmark /> : 'Bookmarks'}
</Tabs.Tab> </Tabs.Tab>
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themes'> <Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themes'>
{isMobile ? <FiEdit /> : 'Themes'} {isMobile ? <FaPaintBrush /> : 'Themes'}
</Tabs.Tab> </Tabs.Tab>
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themePlaylists'> <Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themePlaylists'>
{isMobile ? <FiEdit /> : 'Theme Playlists'} {isMobile ? <FaRegListAlt /> : 'Theme Playlists'}
</Tabs.Tab> </Tabs.Tab>
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='providers'> <Tabs.Tab px={isMobile ? '.9rem' : undefined} value='providers'>
{isMobile ? <FiSearch /> : 'Search Providers'} {isMobile ? <FiSearch /> : 'Search Providers'}

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

@@ -2,6 +2,7 @@ import {
ActionIcon, ActionIcon,
Box, Box,
Button, Button,
Card,
Divider, Divider,
Grid, Grid,
GridCol, GridCol,
@@ -20,6 +21,7 @@ import { FiHelpCircle, FiPlus } from 'react-icons/fi';
import { import {
actionIconClasses, actionIconClasses,
buttonClasses, buttonClasses,
cardClasses,
modalClasses, modalClasses,
textClasses, textClasses,
textInputClasses, textInputClasses,
@@ -81,108 +83,111 @@ const ApplicationSettings = () => {
<Modal.CloseButton /> <Modal.CloseButton />
</Modal.Header> </Modal.Header>
<Modal.Body pb={'2rem'}> <Modal.Body pb={'2rem'}>
<Stack gap={0} w={'100%'} align='center'> <Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Group w={'100%'} justify='center'> <Stack gap={0} align='center'>
<TextInput <Group justify='center'>
label={'Name'} <TextInput
className={textInputClasses.settingsItem} label={'Name'}
pt={16} className={textInputClasses.settingsItem}
classNames={textInputClasses} pt={16}
defaultValue={newApplication.name} classNames={textInputClasses}
onChange={(event) => { defaultValue={newApplication.name}
setNewApplication({ onChange={(event) => {
...newApplication, setNewApplication({
name: event.target.value, ...newApplication,
}); name: event.target.value,
}}
/>
<TextInput
label={'Base URL'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newApplication.baseUrl}
onChange={(event) => {
setNewApplication({
...newApplication,
baseUrl: event.target.value,
});
}}
/>
</Group>
<Group w={'100%'} justify='center'>
<TextInput
label={'URL'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newApplication.url}
onChange={(event) => {
setNewApplication({
...newApplication,
url: event.target.value,
});
}}
/>
</Group>
<Group w={'100%'} justify='center'>
<TextInput
label={'Icon'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newApplication.icon}
onChange={(event) => {
setNewApplication({
...newApplication,
icon: event.target.value,
});
}}
/>
<TextInput
label={'Filter'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newApplication.filterName}
onChange={(event) => {
setNewApplication({
...newApplication,
filterName: event.target.value,
});
}}
/>
</Group>
<Divider color='black' my='sm' />
<Group pos={'absolute'} bottom={8}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => {
if (newApplication) {
mutateAsync({
method: 'POST',
endpoint: endpoint,
body: newApplication,
}); });
}}
/>
<TextInput
label={'Base URL'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newApplication.baseUrl}
onChange={(event) => {
setNewApplication({
...newApplication,
baseUrl: event.target.value,
});
}}
/>
</Group>
<Group w={isMobile ? undefined : '60%'} justify='center'>
<TextInput
label={'URL'}
className={textInputClasses.settingsItem}
pt={16}
w={isMobile ? undefined : '91%'}
classNames={textInputClasses}
defaultValue={newApplication.url}
onChange={(event) => {
setNewApplication({
...newApplication,
url: event.target.value,
});
}}
/>
</Group>
<Group justify='center'>
<TextInput
label={'Icon'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newApplication.icon}
onChange={(event) => {
setNewApplication({
...newApplication,
icon: event.target.value,
});
}}
/>
<TextInput
label={'Filter'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newApplication.filterName}
onChange={(event) => {
setNewApplication({
...newApplication,
filterName: event.target.value,
});
}}
/>
</Group>
<Divider color='black' my='lg' />
<Group pos={'absolute'} bottom={8}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => {
if (newApplication) {
mutateAsync({
method: 'POST',
endpoint: endpoint,
body: newApplication,
});
closeModal();
}
}}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal(); closeModal();
} }}
}} >
> Cancel
Save </Button>
</Button> </Group>
<Button </Stack>
color={'red'} </Card>
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
</Modal.Body> </Modal.Body>
</Modal.Content> </Modal.Content>
</Modal.Root> </Modal.Root>
@@ -252,7 +257,7 @@ const ApplicationSettings = () => {
pos={isMobile ? undefined : 'absolute'} pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
classNames={textInputClasses} classNames={textInputClasses}
autoFocus autoFocus={!isMobile}
placeholder='Search...' placeholder='Search...'
value={searchValue} value={searchValue}
onInput={(event: any) => { onInput={(event: any) => {

4
src/pages/settings/components/Applications/DebouncedApplication.tsx
View File

@@ -26,13 +26,13 @@ function DebouncedApplication({ application }: { application: Application }) {
const [debounced] = useDebouncedValue(update, 1000); const [debounced] = useDebouncedValue(update, 1000);
useEffect(() => { useEffect(() => {
if (Object.keys(debounced).length) { if (debounced && Object.keys(debounced).length > 0) {
mutateAsync({ method: 'PATCH', endpoint: 'api/apps', body: debounced }); mutateAsync({ method: 'PATCH', endpoint: 'api/apps', body: debounced });
} }
}, [debounced]); }, [debounced]);
useEffect(() => { useEffect(() => {
if (update !== app && Object.keys(update).length) { if (update && update !== app && Object.keys(update).length) {
setApp(update); setApp(update);
} }
}, [update]); }, [update]);

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

@@ -21,6 +21,7 @@ import { FiHelpCircle, FiPlus } from 'react-icons/fi';
import { import {
actionIconClasses, actionIconClasses,
buttonClasses, buttonClasses,
cardClasses,
modalClasses, modalClasses,
textClasses, textClasses,
textInputClasses, textInputClasses,
@@ -125,65 +126,67 @@ const BookmarkSettings = () => {
<Modal.CloseButton /> <Modal.CloseButton />
</Modal.Header> </Modal.Header>
<Modal.Body pb={'2rem'}> <Modal.Body pb={'2rem'}>
<Stack gap={0} w={'100%'} align='center'> <Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Group w={'100%'} justify='center'> <Stack gap={0} w={'100%'} align='center'>
<TextInput <Group w={'100%'} justify='center'>
label={'Category Name'} <TextInput
className={textInputClasses.settingsItem} label={'Category Name'}
pt={16} className={textInputClasses.settingsItem}
classNames={textInputClasses} pt={16}
defaultValue={newGroup.categoryName} classNames={textInputClasses}
onChange={(event) => { defaultValue={newGroup.categoryName}
setNewGroup({ onChange={(event) => {
...newGroup, setNewGroup({
categoryName: event.target.value, ...newGroup,
}); categoryName: event.target.value,
}}
/>
<TextInput
label={'Filter Name'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newGroup.filterName}
onChange={(event) => {
setNewGroup({
...newGroup,
filterName: event.target.value,
});
}}
/>
</Group>
<Divider color='black' my='sm' />
<Group pos={'absolute'} bottom={8}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => {
if (newGroup) {
mutateAsync({
method: 'POST',
endpoint: 'api/categories',
body: { ...newGroup, categoryIndex: groups.length },
}); });
}}
/>
<TextInput
label={'Filter Name'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newGroup.filterName}
onChange={(event) => {
setNewGroup({
...newGroup,
filterName: event.target.value,
});
}}
/>
</Group>
<Divider color='black' my='lg' />
<Group pos={'absolute'} bottom={8}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => {
if (newGroup) {
mutateAsync({
method: 'POST',
endpoint: 'api/categories',
body: { ...newGroup, categoryIndex: groups.length },
});
closeModal();
}
}}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal(); closeModal();
} }}
}} >
> Cancel
Save </Button>
</Button> </Group>
<Button </Stack>
color={'red'} </Card>
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
</Modal.Body> </Modal.Body>
</Modal.Content> </Modal.Content>
</Modal.Root> </Modal.Root>
@@ -253,7 +256,7 @@ const BookmarkSettings = () => {
pos={isMobile ? undefined : 'absolute'} pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
classNames={textInputClasses} classNames={textInputClasses}
autoFocus autoFocus={!isMobile}
placeholder='Search...' placeholder='Search...'
value={searchValue} value={searchValue}
onInput={(event: any) => { onInput={(event: any) => {
@@ -261,16 +264,23 @@ const BookmarkSettings = () => {
}} }}
/> />
<Switch <Switch
label={'Reorder'} label={<Text c={theme.primaryColor}>Reorder</Text>}
labelPosition='left' labelPosition='left'
pos={'absolute'} pos={'absolute'}
right={isMobile ? '2rem' : '1rem'} right={isMobile ? '2rem' : '1rem'}
top={isMobile ? '9.5rem' : undefined} top={isMobile ? '10rem' : undefined}
onChange={(e) => { onChange={(e) => {
setDragging(e.target.checked); setDragging(e.target.checked);
}} }}
color={theme.primaryColor} color={theme.primaryColor}
styles={{ label: { color: theme.primaryColor } }} styles={{
label: {
color: theme.primaryColor,
top: isMobile ? -22 : 0,
left: isMobile ? -8 : 0,
position: isMobile ? 'absolute' : undefined,
},
}}
/> />
</Group> </Group>
{dragging ? ( {dragging ? (
@@ -352,7 +362,7 @@ const BookmarkSettings = () => {
</DragDropContext> </DragDropContext>
) : ( ) : (
<Stack w={'100%'} align='center'> <Stack w={'100%'} align='center'>
<Group w={'75%'} align='start'> <Group w={isMobile ? undefined : '75%'} align='start'>
{groups?.map((group: BookmarkGroup) => ( {groups?.map((group: BookmarkGroup) => (
<DebouncedGroupSettingsItem <DebouncedGroupSettingsItem
key={group.id} key={group.id}

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

@@ -311,99 +311,101 @@ function DebouncedGroupSettingsItem({
'--image-background': `url(${theme.backgroundImage})`, '--image-background': `url(${theme.backgroundImage})`,
}} }}
> >
<Stack w={'100%'} display={'flex'} pos={'relative'}> <Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Group w={'100%'} justify='center'> <Stack w={'100%'} display={'flex'} pos={'relative'}>
<TextInput <Group w={'100%'} justify='center'>
label={'Name'} <TextInput
labelProps={{ label={'Name'}
style: { labelProps={{
color: theme.primaryColor, style: {
}, color: theme.primaryColor,
}} },
className={textInputClasses.settingsItem} }}
pt={16} className={textInputClasses.settingsItem}
classNames={textInputClasses} pt={16}
onChange={(event) => { classNames={textInputClasses}
setNewBookmark({ onChange={(event) => {
...newBookmark, setNewBookmark({
name: event.target.value, ...newBookmark,
}); name: event.target.value,
}}
/>
<TextInput
label={'Category'}
labelProps={{
style: {
color: theme.primaryColor,
},
}}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
disabled
defaultValue={group.categoryName}
onChange={(event) => {
setNewBookmark({
...newBookmark,
category: event.target.value,
});
}}
/>
</Group>
<Group w={'100%'} justify='center' mb={60}>
<TextInput
label={'URL'}
labelProps={{
style: {
color: theme.primaryColor,
},
}}
className={textInputClasses.settingsItem}
w={'100%'}
pt={16}
classNames={textInputClasses}
onChange={(event) => {
setNewBookmark({
...newBookmark,
url: event.target.value,
});
}}
/>
</Group>
<Group
w={'100%'}
pos={'absolute'}
bottom={8}
align='center'
justify='center'
>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => {
if (newBookmark) {
mutateAsync({
method: 'POST',
endpoint: 'api/links',
body: { ...newBookmark, index: bookmarks.length },
}); });
}}
/>
<TextInput
label={'Category'}
labelProps={{
style: {
color: theme.primaryColor,
},
}}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
disabled
defaultValue={group.categoryName}
onChange={(event) => {
setNewBookmark({
...newBookmark,
category: event.target.value,
});
}}
/>
</Group>
<Group w={'100%'} justify='center' mb={60}>
<TextInput
label={'URL'}
labelProps={{
style: {
color: theme.primaryColor,
},
}}
className={textInputClasses.settingsItem}
w={'100%'}
pt={16}
classNames={textInputClasses}
onChange={(event) => {
setNewBookmark({
...newBookmark,
url: event.target.value,
});
}}
/>
</Group>
<Group
w={'100%'}
pos={'absolute'}
bottom={8}
align='center'
justify='center'
>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => {
if (newBookmark) {
mutateAsync({
method: 'POST',
endpoint: 'api/links',
body: { ...newBookmark, index: bookmarks.length },
});
setPopoverOpened(false);
}
}}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
setPopoverOpened(false); setPopoverOpened(false);
} }}
}} >
> Cancel
Save </Button>
</Button> </Group>
<Button </Stack>
color={'red'} </Card>
styles={{ label: { color: 'black' } }}
onClick={() => {
setPopoverOpened(false);
}}
>
Cancel
</Button>
</Group>
</Stack>
</Popover.Dropdown> </Popover.Dropdown>
</Popover> </Popover>
</Group> </Group>

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

@@ -1,6 +1,7 @@
import { import {
ActionIcon, ActionIcon,
Button, Button,
Card,
Divider, Divider,
Grid, Grid,
GridCol, GridCol,
@@ -20,6 +21,7 @@ import { FiHelpCircle, FiPlus } from 'react-icons/fi';
import { import {
actionIconClasses, actionIconClasses,
buttonClasses, buttonClasses,
cardClasses,
modalClasses, modalClasses,
textClasses, textClasses,
textInputClasses, textInputClasses,
@@ -79,48 +81,51 @@ const MessageSettings = () => {
<Modal.CloseButton /> <Modal.CloseButton />
</Modal.Header> </Modal.Header>
<Modal.Body pb={'2rem'}> <Modal.Body pb={'2rem'}>
<Stack gap={0} w={'100%'} align='center'> <Card className={cardClasses.settingsItem} classNames={cardClasses}>
<TextInput <Stack gap={0} w={'100%'} align='center'>
autoFocus <TextInput
w={'75%'} label='Message text'
className={textInputClasses.settingsItem} autoFocus={!isMobile}
classNames={textInputClasses} w={'75%'}
onChange={(event) => { className={textInputClasses.settingsItem}
setNewMessage(event.target.value); classNames={textInputClasses}
}} onChange={(event) => {
error={newMessageError} setNewMessage(event.target.value);
/> }}
<Divider color='black' my='sm' /> error={newMessageError}
<Group pos={'absolute'} bottom={8}> />
<Button <Divider color='black' my='lg' />
color={'green'} <Group pos={'absolute'} bottom={8}>
styles={{ label: { color: 'black' } }} <Button
onClick={() => { color={'green'}
if (newMessage) { styles={{ label: { color: 'black' } }}
mutateAsync({ onClick={() => {
method: 'POST', if (newMessage) {
endpoint: endpoint, mutateAsync({
body: { message: newMessage }, method: 'POST',
}); endpoint: endpoint,
body: { message: newMessage },
});
closeModal();
} else {
setNewMessageError('Please enter a message');
}
}}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal(); closeModal();
} else { }}
setNewMessageError('Please enter a message'); >
} Cancel
}} </Button>
> </Group>
Save </Stack>
</Button> </Card>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
</Modal.Body> </Modal.Body>
</Modal.Content> </Modal.Content>
</Modal.Root> </Modal.Root>
@@ -183,7 +188,7 @@ const MessageSettings = () => {
pos={isMobile ? undefined : 'absolute'} pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
classNames={textInputClasses} classNames={textInputClasses}
autoFocus autoFocus={!isMobile}
placeholder='Search...' placeholder='Search...'
value={searchValue} value={searchValue}
onInput={(event: any) => { onInput={(event: any) => {

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

@@ -2,6 +2,7 @@ import {
ActionIcon, ActionIcon,
Box, Box,
Button, Button,
Card,
Divider, Divider,
Grid, Grid,
GridCol, GridCol,
@@ -20,6 +21,7 @@ import { FiHelpCircle, FiPlus } from 'react-icons/fi';
import { import {
actionIconClasses, actionIconClasses,
buttonClasses, buttonClasses,
cardClasses,
modalClasses, modalClasses,
textClasses, textClasses,
textInputClasses, textInputClasses,
@@ -78,79 +80,81 @@ const SearchProviderSettings = () => {
<Modal.CloseButton /> <Modal.CloseButton />
</Modal.Header> </Modal.Header>
<Modal.Body pb={'2rem'}> <Modal.Body pb={'2rem'}>
<Stack gap={0} w={'100%'} align='center'> <Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Stack> <Stack gap={0} w={'100%'} align='center'>
<Group w={'100%'} justify='center'> <Stack>
<Group w={'100%'} justify='center'>
<TextInput
label={'Name'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newProvider.name}
onChange={(event) => {
setNewProvider({
...newProvider,
name: event.target.value,
});
}}
/>
<TextInput
label={'Prefix'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newProvider.prefix}
onChange={(event) => {
setNewProvider({
...newProvider,
prefix: event.target.value,
});
}}
/>
</Group>
<TextInput <TextInput
label={'Name'} label={'Url'}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
pt={16} pt={16}
classNames={textInputClasses} classNames={textInputClasses}
defaultValue={newProvider.name} defaultValue={newProvider.url}
onChange={(event) => { onChange={(event) => {
setNewProvider({ setNewProvider({
...newProvider, ...newProvider,
name: event.target.value, url: event.target.value,
}); });
}} }}
/> />
<TextInput </Stack>
label={'Prefix'} <Divider color='black' my='lg' />
className={textInputClasses.settingsItem} <Group pos={'absolute'} bottom={8}>
pt={16} <Button
classNames={textInputClasses} color={'green'}
defaultValue={newProvider.prefix} styles={{ label: { color: 'black' } }}
onChange={(event) => { onClick={() => {
setNewProvider({ if (newProvider) {
...newProvider, mutateAsync({
prefix: event.target.value, method: 'POST',
}); endpoint: endpoint,
body: newProvider,
});
closeModal();
}
}} }}
/> >
</Group> Save
<TextInput </Button>
label={'Url'} <Button
className={textInputClasses.settingsItem} color={'red'}
pt={16} styles={{ label: { color: 'black' } }}
classNames={textInputClasses} onClick={() => {
defaultValue={newProvider.url}
onChange={(event) => {
setNewProvider({
...newProvider,
url: event.target.value,
});
}}
/>
</Stack>
<Divider color='black' my='sm' />
<Group pos={'absolute'} bottom={8}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => {
if (newProvider) {
mutateAsync({
method: 'POST',
endpoint: endpoint,
body: newProvider,
});
closeModal(); closeModal();
} }}
}} >
> Cancel
Save </Button>
</Button> </Group>
<Button </Stack>
color={'red'} </Card>
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
</Modal.Body> </Modal.Body>
</Modal.Content> </Modal.Content>
</Modal.Root> </Modal.Root>
@@ -211,7 +215,7 @@ const SearchProviderSettings = () => {
pos={isMobile ? undefined : 'absolute'} pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
classNames={textInputClasses} classNames={textInputClasses}
autoFocus autoFocus={!isMobile}
placeholder='Search...' placeholder='Search...'
value={searchValue} value={searchValue}
onInput={(event: any) => { onInput={(event: any) => {

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

@@ -221,7 +221,7 @@ function ThemeModal({
</Group> </Group>
</Group> </Group>
) : ( ) : (
<Stack h={256} justify='center'> <Stack h={isMobile ? '100%' : 256} justify='center'>
<Group justify='space-between'> <Group justify='space-between'>
<Text className={textClasses.label} classNames={textClasses}> <Text className={textClasses.label} classNames={textClasses}>
Primary Color Primary Color
@@ -383,7 +383,7 @@ function ThemeModal({
</Stack> </Stack>
</Group> </Group>
<Divider color='black' my='sm' /> <Divider color='black' my='sm' />
<Group pos={'absolute'} bottom={8}> <Group pos={'absolute'} bottom={isMobile ? -64 : 8}>
<Button <Button
color={'green'} color={'green'}
styles={{ label: { color: 'black' } }} styles={{ label: { color: 'black' } }}

13
src/pages/settings/components/Theming/ThemePlaylistCard.tsx
View File

@@ -249,10 +249,19 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
}} }}
> >
{hover && <Overlay opacity={0.5} zIndex={1} />} {hover && <Overlay opacity={0.5} zIndex={1} />}
<Stack h={'100%'} w={'100%'}> <Stack h={'100%'} w={'100%'} align='center'>
{cardPlaylist.name !== 'Time of Day' ? ( {cardPlaylist.name !== 'Time of Day' ? (
<> <>
<Text mt={8} mb={-8}> <Text
px={8}
mt={8}
mb={-8}
style={{
color: theme.backgroundColor,
backgroundColor: theme.primaryColor,
borderRadius: '4px',
}}
>
Count: {themeList.length} Count: {themeList.length}
</Text> </Text>
<ScrollArea h={'255px'} w={'100%'} style={{ zIndex: 2 }}> <ScrollArea h={'255px'} w={'100%'} style={{ zIndex: 2 }}>

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

@@ -126,7 +126,7 @@ function ThemePlaylists() {
pos={isMobile ? undefined : 'absolute'} pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
classNames={textInputClasses} classNames={textInputClasses}
autoFocus autoFocus={!isMobile}
placeholder='Search...' placeholder='Search...'
value={searchValue} value={searchValue}
onInput={(event: any) => { onInput={(event: any) => {

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

@@ -153,7 +153,7 @@ function ThemesSettings() {
pos={isMobile ? undefined : 'absolute'} pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
classNames={textInputClasses} classNames={textInputClasses}
autoFocus autoFocus={!isMobile}
placeholder='Search...' placeholder='Search...'
value={searchValue} value={searchValue}
onInput={(event: any) => { onInput={(event: any) => {
@@ -180,7 +180,7 @@ function ThemesSettings() {
color={theme.primaryColor} color={theme.primaryColor}
/> />
</Group> </Group>
<Group justify='center' align='center' pos={'relative'}> <Group justify='center' align='center' pos={'relative'} mt={'1rem'}>
<Overlay <Overlay
display={currentTheme === 'random' ? 'flex' : 'none'} display={currentTheme === 'random' ? 'flex' : 'none'}
blur={5} blur={5}

4
src/pages/settings/components/WoL/WolClientSettingsItem.tsx
View File

@@ -1,16 +1,14 @@
import { Card, Stack, Text } from '@mantine/core'; import { Card, Stack, Text } from '@mantine/core';
import { useCommonHooks } from 'hooks';
import { FaLaptop } from 'react-icons/fa'; import { FaLaptop } from 'react-icons/fa';
import { cardClasses } from 'styles'; import { cardClasses } from 'styles';
function WolClientSettingsItem({ client }: any) { function WolClientSettingsItem({ client }: any) {
const { isMobile } = useCommonHooks();
return ( return (
<Card <Card
className={cardClasses.settingsItemHover} className={cardClasses.settingsItemHover}
classNames={cardClasses} classNames={cardClasses}
h={200} h={200}
w={isMobile ? '100%' : 200} w={'100%'}
> >
<Stack align='center' gap={0}> <Stack align='center' gap={0}>
<FaLaptop fontSize={100} /> <FaLaptop fontSize={100} />

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

@@ -1,7 +1,7 @@
import { import {
ActionIcon, ActionIcon,
Box,
Button, Button,
Card,
Divider, Divider,
Grid, Grid,
GridCol, GridCol,
@@ -20,6 +20,7 @@ import { FiHelpCircle, FiPlus } from 'react-icons/fi';
import { import {
actionIconClasses, actionIconClasses,
buttonClasses, buttonClasses,
cardClasses,
modalClasses, modalClasses,
textClasses, textClasses,
textInputClasses, textInputClasses,
@@ -77,64 +78,66 @@ const WolClientSettings = () => {
<Modal.CloseButton /> <Modal.CloseButton />
</Modal.Header> </Modal.Header>
<Modal.Body pb={'2rem'}> <Modal.Body pb={'2rem'}>
<Stack gap={0} w={'100%'} align='center'> <Card className={cardClasses.settingsItem} classNames={cardClasses}>
<Group w={'100%'} justify='center'> <Stack gap={0} w={'100%'} align='center'>
<TextInput <Group w={'100%'} justify='center'>
label={'Hostname'} <TextInput
className={textInputClasses.settingsItem} label={'Hostname'}
pt={16} className={textInputClasses.settingsItem}
classNames={textInputClasses} pt={16}
defaultValue={newWolClient.hostname} classNames={textInputClasses}
onChange={(event) => { defaultValue={newWolClient.hostname}
setNewWolClient({ onChange={(event) => {
...newWolClient, setNewWolClient({
hostname: event.target.value, ...newWolClient,
}); hostname: event.target.value,
}}
/>
<TextInput
label={'MAC Address'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newWolClient.macAddress}
onChange={(event) => {
setNewWolClient({
...newWolClient,
macAddress: event.target.value,
});
}}
/>
</Group>
<Divider color='black' my='sm' />
<Group pos={'absolute'} bottom={8}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => {
if (newWolClient) {
mutateAsync({
method: 'POST',
endpoint: endpoint,
body: newWolClient,
}); });
}}
/>
<TextInput
label={'MAC Address'}
className={textInputClasses.settingsItem}
pt={16}
classNames={textInputClasses}
defaultValue={newWolClient.macAddress}
onChange={(event) => {
setNewWolClient({
...newWolClient,
macAddress: event.target.value,
});
}}
/>
</Group>
<Divider color='black' my='lg' />
<Group pos={'absolute'} bottom={8}>
<Button
color={'green'}
styles={{ label: { color: 'black' } }}
onClick={() => {
if (newWolClient) {
mutateAsync({
method: 'POST',
endpoint: endpoint,
body: newWolClient,
});
closeModal();
}
}}
>
Save
</Button>
<Button
color={'red'}
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal(); closeModal();
} }}
}} >
> Cancel
Save </Button>
</Button> </Group>
<Button </Stack>
color={'red'} </Card>
styles={{ label: { color: 'black' } }}
onClick={() => {
closeModal();
}}
>
Cancel
</Button>
</Group>
</Stack>
</Modal.Body> </Modal.Body>
</Modal.Content> </Modal.Content>
</Modal.Root> </Modal.Root>
@@ -193,7 +196,7 @@ const WolClientSettings = () => {
pos={isMobile ? undefined : 'absolute'} pos={isMobile ? undefined : 'absolute'}
className={textInputClasses.settingsItem} className={textInputClasses.settingsItem}
classNames={textInputClasses} classNames={textInputClasses}
autoFocus autoFocus={!isMobile}
placeholder='Search...' placeholder='Search...'
value={searchValue} value={searchValue}
onInput={(event: any) => { onInput={(event: any) => {
@@ -204,16 +207,17 @@ const WolClientSettings = () => {
<Stack w={'100%'} align='center'> <Stack w={'100%'} align='center'>
<Grid columns={18} w={'75%'}> <Grid columns={18} w={'75%'}>
{wolClients?.map((client: WolClient) => ( {wolClients?.map((client: WolClient) => (
<GridCol span={isMobile ? 18 : 6} key={client.id}> <GridCol w={'100%'} span={isMobile ? 18 : 6} key={client.id}>
<Popover withArrow withOverlay withinPortal={false}> <Popover withArrow withOverlay withinPortal={false}>
<Popover.Target> <Popover.Target>
<Box <Group
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); e.stopPropagation();
}} }}
justify='center'
> >
<WolClientSettingsItem client={client} /> <WolClientSettingsItem client={client} />
</Box> </Group>
</Popover.Target> </Popover.Target>
<Popover.Dropdown> <Popover.Dropdown>
<DebouncedWolClient wolClient={client} /> <DebouncedWolClient wolClient={client} />

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

@@ -113,6 +113,27 @@
} }
} }
.autoScrollText {
&.root {
display: inline-block;
animation: carousel 8s ease-in-out infinite;
position: relative;
padding-inline: 1rem;
}
}
@keyframes carousel {
25% {
transform: translate(0, 0);
left: 0%;
}
75%,
100% {
transform: translate(-100%, 0);
left: 100%;
}
}
a { a {
color: var(--color-text-pri); color: var(--color-text-pri);
text-decoration: none; text-decoration: none;

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

@@ -38,6 +38,9 @@
padding-left: .5rem; padding-left: .5rem;
opacity: 1; opacity: 1;
} }
::placeholder {
color: var(--color-text-acc) !important;
}
} }
} }
} }