Mobile and style improvements
This commit is contained in:
Sean Edmunds
203
package-lock.json
generated
203
package-lock.json
generated
@@ -10,12 +10,12 @@
|
||||
"dependencies": {
|
||||
"@hello-pangea/dnd": "^18.0.1",
|
||||
"@iconify/react": "^5.2.0",
|
||||
"@mantine/core": "^7.17.2",
|
||||
"@mantine/hooks": "^7.17.2",
|
||||
"@mantine/core": "^7.17.3",
|
||||
"@mantine/hooks": "^7.17.3",
|
||||
"@tabler/icons-react": "^3.31.0",
|
||||
"@tanstack/react-query": "^5.69.0",
|
||||
"@tanstack/react-query-devtools": "^5.69.0",
|
||||
"@tanstack/react-query-persist-client": "^5.69.0",
|
||||
"@tanstack/react-query": "^5.69.3",
|
||||
"@tanstack/react-query-devtools": "^5.69.3",
|
||||
"@tanstack/react-query-persist-client": "^5.69.3",
|
||||
"idb-keyval": "^6.2.1",
|
||||
"jotai": "^2.12.2",
|
||||
"react": "^19.0.0",
|
||||
@@ -27,11 +27,11 @@
|
||||
"recharts": "^2.15.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.13.11",
|
||||
"@types/node": "^22.13.14",
|
||||
"@types/react": "^19.0.12",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@typescript-eslint/eslint-plugin": "^8.27.0",
|
||||
"@typescript-eslint/parser": "^8.27.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.28.0",
|
||||
"@typescript-eslint/parser": "^8.28.0",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"@vitest/coverage-v8": "^3.0.9",
|
||||
"@vitest/ui": "^3.0.9",
|
||||
@@ -39,7 +39,7 @@
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.2",
|
||||
"vite": "^6.2.3",
|
||||
"vite-plugin-dts": "~4.5.3",
|
||||
"vite-plugin-eslint": "^1.8.1",
|
||||
"vite-tsconfig-paths": "^5.1.4",
|
||||
@@ -1180,9 +1180,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/core": {
|
||||
"version": "7.17.2",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.17.2.tgz",
|
||||
"integrity": "sha512-R6MYhitJ0JEgrhadd31Nw9FhRaQwDHjXUs5YIlitKH/fTOz9gKSxKjzmNng3bEBQCcbEDOkZj3FRcBgTUh/F0Q==",
|
||||
"version": "7.17.3",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.17.3.tgz",
|
||||
"integrity": "sha512-N/AfV5eMnfEMx9WzI7AU5pNFBEzAfT/KtE2XDKS+0ht6RifUmolIxyIvoGMYz2yUEsCBMJZqmBq33Rabf5W7Ug==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "^0.26.28",
|
||||
"clsx": "^2.1.1",
|
||||
@@ -1192,15 +1193,16 @@
|
||||
"type-fest": "^4.27.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mantine/hooks": "7.17.2",
|
||||
"@mantine/hooks": "7.17.3",
|
||||
"react": "^18.x || ^19.x",
|
||||
"react-dom": "^18.x || ^19.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/hooks": {
|
||||
"version": "7.17.2",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.17.2.tgz",
|
||||
"integrity": "sha512-tbErVcGZu0E4dSmE6N0k6Tv1y9R3SQmmQgwqorcc+guEgKMdamc36lucZGlJnSGUmGj+WLUgELkEQ0asdfYBDA==",
|
||||
"version": "7.17.3",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.17.3.tgz",
|
||||
"integrity": "sha512-6o65Rbfl8jd1C1nF9icvungqL0qZViEOmrZgkyKXxBYkC3x91fz4zftwQgNjt1tZHWDNO6Bo4GpRjJyAdwl48g==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^18.x || ^19.x"
|
||||
}
|
||||
@@ -1349,6 +1351,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
|
||||
"integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@nodelib/fs.stat": "2.0.5",
|
||||
"run-parallel": "^1.1.9"
|
||||
@@ -1362,6 +1365,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
|
||||
"integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
@@ -1371,6 +1375,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
|
||||
"integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@nodelib/fs.scandir": "2.1.5",
|
||||
"fastq": "^1.6.0"
|
||||
@@ -1608,9 +1613,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/query-core": {
|
||||
"version": "5.69.0",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.69.0.tgz",
|
||||
"integrity": "sha512-Kn410jq6vs1P8Nm+ZsRj9H+U3C0kjuEkYLxbiCyn3MDEiYor1j2DGVULqAz62SLZtUZ/e9Xt6xMXiJ3NJ65WyQ==",
|
||||
"version": "5.69.2",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.69.2.tgz",
|
||||
"integrity": "sha512-+spKBqGMSxVMhYPMHr4L7efc4CDdb0Y8nE4UxP/FjV4V3ajP3uhBsh0T7pSuObBgYkU+nY1PRkJhKNmwlHmkUg==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
@@ -1626,11 +1632,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/query-persist-client-core": {
|
||||
"version": "5.69.0",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.69.0.tgz",
|
||||
"integrity": "sha512-OisxDgcDH0ajswGBA+TXXSn5uzll1EaCB6/MQH+2+t4JqR/qq5TS8nh6A7pas/GBFB01kNpgKRYmZp0tkKVtOg==",
|
||||
"version": "5.69.2",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.69.2.tgz",
|
||||
"integrity": "sha512-RxKv+FTKzRMtL3veHvLjQdy+kaYHxAyfV+Gg/1Lj/t61iUqdhzF4lFFctfGDSKrzvEIsg/JwJDfmYvScjNloMw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-core": "5.69.0"
|
||||
"@tanstack/query-core": "5.69.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@@ -1638,11 +1645,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query": {
|
||||
"version": "5.69.0",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.69.0.tgz",
|
||||
"integrity": "sha512-Ift3IUNQqTcaFa1AiIQ7WCb/PPy8aexZdq9pZWLXhfLcLxH0+PZqJ2xFImxCpdDZrFRZhLJrh76geevS5xjRhA==",
|
||||
"version": "5.69.3",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.69.3.tgz",
|
||||
"integrity": "sha512-EozCj1aFM/c827GQbVnvEt2x80oBax1vd2e5s/2EDeD469AZW9BPAyRK9VVyD0I1yvO6vOI+tPKXXFcadbSXvA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-core": "5.69.0"
|
||||
"@tanstack/query-core": "5.69.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@@ -1653,9 +1661,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query-devtools": {
|
||||
"version": "5.69.0",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.69.0.tgz",
|
||||
"integrity": "sha512-sYklnou3IKAemqB5wJeBwjmG5bUGDKAL5/I4pVA+aqSnsNibVLt8/pAU976uuJ5K71w71bHtI/AMxiIs3gtkEA==",
|
||||
"version": "5.69.3",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.69.3.tgz",
|
||||
"integrity": "sha512-BQ37OAnG4+2zZjz7ot2A6FIerOOVMTQaMgAgcZYyxKNHrwTEsQ4e+vpmticBig4NUSK3CNSD4wGPVqSEppe+Bw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-devtools": "5.67.2"
|
||||
},
|
||||
@@ -1664,23 +1673,24 @@
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tanstack/react-query": "^5.69.0",
|
||||
"@tanstack/react-query": "^5.69.3",
|
||||
"react": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query-persist-client": {
|
||||
"version": "5.69.0",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.69.0.tgz",
|
||||
"integrity": "sha512-/uIblBRwnpms6Xu+71Jy+2V+iuWrSyDfeYVNp8kbyYOKP9135ii/S80+EXBGeM/jx7+vizRGORaq4kKuKXo6Sw==",
|
||||
"version": "5.69.3",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.69.3.tgz",
|
||||
"integrity": "sha512-7grYKVT4JwjlGHv0aFVefcWjU9TSF0N6h4pwEEszlByvr2105j78f/hJLypASk4o661YlNLnm+5sLaAc94q7wA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-persist-client-core": "5.69.0"
|
||||
"@tanstack/query-persist-client-core": "5.69.2"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tanstack/react-query": "^5.69.0",
|
||||
"@tanstack/react-query": "^5.69.3",
|
||||
"react": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
@@ -1813,10 +1823,11 @@
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/node": {
|
||||
"version": "22.13.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.11.tgz",
|
||||
"integrity": "sha512-iEUCUJoU0i3VnrCmgoWCXttklWcvoCIx4jzcP22fioIVSdTmjgoEvmAO/QPw6TcS9k5FrNgn4w7q5lGOd1CT5g==",
|
||||
"version": "22.13.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-22.13.14.tgz",
|
||||
"integrity": "sha512-Zs/Ollc1SJ8nKUAgc7ivOEdIBM8JAKgrqqUYi2J997JuKO7/tpQC+WCetQ1sypiKCQWHdvdg9wBNpUPEWZae7w==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"undici-types": "~6.20.0"
|
||||
}
|
||||
@@ -1846,16 +1857,17 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@typescript-eslint/eslint-plugin": {
|
||||
"version": "8.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.27.0.tgz",
|
||||
"integrity": "sha512-4henw4zkePi5p252c8ncBLzLce52SEUz2Ebj8faDnuUXz2UuHEONYcJ+G0oaCF+bYCWVZtrGzq3FD7YXetmnSA==",
|
||||
"version": "8.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.28.0.tgz",
|
||||
"integrity": "sha512-lvFK3TCGAHsItNdWZ/1FkvpzCxTHUVuFrdnOGLMa0GGCFIbCgQWVk3CzCGdA7kM3qGVc+dfW9tr0Z/sHnGDFyg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@eslint-community/regexpp": "^4.10.0",
|
||||
"@typescript-eslint/scope-manager": "8.27.0",
|
||||
"@typescript-eslint/type-utils": "8.27.0",
|
||||
"@typescript-eslint/utils": "8.27.0",
|
||||
"@typescript-eslint/visitor-keys": "8.27.0",
|
||||
"@typescript-eslint/scope-manager": "8.28.0",
|
||||
"@typescript-eslint/type-utils": "8.28.0",
|
||||
"@typescript-eslint/utils": "8.28.0",
|
||||
"@typescript-eslint/visitor-keys": "8.28.0",
|
||||
"graphemer": "^1.4.0",
|
||||
"ignore": "^5.3.1",
|
||||
"natural-compare": "^1.4.0",
|
||||
@@ -1875,15 +1887,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/parser": {
|
||||
"version": "8.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.27.0.tgz",
|
||||
"integrity": "sha512-XGwIabPallYipmcOk45DpsBSgLC64A0yvdAkrwEzwZ2viqGqRUJ8eEYoPz0CWnutgAFbNMPdsGGvzjSmcWVlEA==",
|
||||
"version": "8.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.28.0.tgz",
|
||||
"integrity": "sha512-LPcw1yHD3ToaDEoljFEfQ9j2xShY367h7FZ1sq5NJT9I3yj4LHer1Xd1yRSOdYy9BpsrxU7R+eoDokChYM53lQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@typescript-eslint/scope-manager": "8.27.0",
|
||||
"@typescript-eslint/types": "8.27.0",
|
||||
"@typescript-eslint/typescript-estree": "8.27.0",
|
||||
"@typescript-eslint/visitor-keys": "8.27.0",
|
||||
"@typescript-eslint/scope-manager": "8.28.0",
|
||||
"@typescript-eslint/types": "8.28.0",
|
||||
"@typescript-eslint/typescript-estree": "8.28.0",
|
||||
"@typescript-eslint/visitor-keys": "8.28.0",
|
||||
"debug": "^4.3.4"
|
||||
},
|
||||
"engines": {
|
||||
@@ -1899,13 +1912,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/scope-manager": {
|
||||
"version": "8.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.27.0.tgz",
|
||||
"integrity": "sha512-8oI9GwPMQmBryaaxG1tOZdxXVeMDte6NyJA4i7/TWa4fBwgnAXYlIQP+uYOeqAaLJ2JRxlG9CAyL+C+YE9Xknw==",
|
||||
"version": "8.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.28.0.tgz",
|
||||
"integrity": "sha512-u2oITX3BJwzWCapoZ/pXw6BCOl8rJP4Ij/3wPoGvY8XwvXflOzd1kLrDUUUAIEdJSFh+ASwdTHqtan9xSg8buw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@typescript-eslint/types": "8.27.0",
|
||||
"@typescript-eslint/visitor-keys": "8.27.0"
|
||||
"@typescript-eslint/types": "8.28.0",
|
||||
"@typescript-eslint/visitor-keys": "8.28.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
@@ -1916,13 +1930,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/type-utils": {
|
||||
"version": "8.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.27.0.tgz",
|
||||
"integrity": "sha512-wVArTVcz1oJOIEJxui/nRhV0TXzD/zMSOYi/ggCfNq78EIszddXcJb7r4RCp/oBrjt8n9A0BSxRMKxHftpDxDA==",
|
||||
"version": "8.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.28.0.tgz",
|
||||
"integrity": "sha512-oRoXu2v0Rsy/VoOGhtWrOKDiIehvI+YNrDk5Oqj40Mwm0Yt01FC/Q7nFqg088d3yAsR1ZcZFVfPCTTFCe/KPwg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@typescript-eslint/typescript-estree": "8.27.0",
|
||||
"@typescript-eslint/utils": "8.27.0",
|
||||
"@typescript-eslint/typescript-estree": "8.28.0",
|
||||
"@typescript-eslint/utils": "8.28.0",
|
||||
"debug": "^4.3.4",
|
||||
"ts-api-utils": "^2.0.1"
|
||||
},
|
||||
@@ -1939,10 +1954,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/types": {
|
||||
"version": "8.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.27.0.tgz",
|
||||
"integrity": "sha512-/6cp9yL72yUHAYq9g6DsAU+vVfvQmd1a8KyA81uvfDE21O2DwQ/qxlM4AR8TSdAu+kJLBDrEHKC5/W2/nxsY0A==",
|
||||
"version": "8.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.28.0.tgz",
|
||||
"integrity": "sha512-bn4WS1bkKEjx7HqiwG2JNB3YJdC1q6Ue7GyGlwPHyt0TnVq6TtD/hiOdTZt71sq0s7UzqBFXD8t8o2e63tXgwA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
},
|
||||
@@ -1952,13 +1968,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/typescript-estree": {
|
||||
"version": "8.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.27.0.tgz",
|
||||
"integrity": "sha512-BnKq8cqPVoMw71O38a1tEb6iebEgGA80icSxW7g+kndx0o6ot6696HjG7NdgfuAVmVEtwXUr3L8R9ZuVjoQL6A==",
|
||||
"version": "8.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.28.0.tgz",
|
||||
"integrity": "sha512-H74nHEeBGeklctAVUvmDkxB1mk+PAZ9FiOMPFncdqeRBXxk1lWSYraHw8V12b7aa6Sg9HOBNbGdSHobBPuQSuA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@typescript-eslint/types": "8.27.0",
|
||||
"@typescript-eslint/visitor-keys": "8.27.0",
|
||||
"@typescript-eslint/types": "8.28.0",
|
||||
"@typescript-eslint/visitor-keys": "8.28.0",
|
||||
"debug": "^4.3.4",
|
||||
"fast-glob": "^3.3.2",
|
||||
"is-glob": "^4.0.3",
|
||||
@@ -1978,15 +1995,16 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/utils": {
|
||||
"version": "8.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.27.0.tgz",
|
||||
"integrity": "sha512-njkodcwH1yvmo31YWgRHNb/x1Xhhq4/m81PhtvmRngD8iHPehxffz1SNCO+kwaePhATC+kOa/ggmvPoPza5i0Q==",
|
||||
"version": "8.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.28.0.tgz",
|
||||
"integrity": "sha512-OELa9hbTYciYITqgurT1u/SzpQVtDLmQMFzy/N8pQE+tefOyCWT79jHsav294aTqV1q1u+VzqDGbuujvRYaeSQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.4.0",
|
||||
"@typescript-eslint/scope-manager": "8.27.0",
|
||||
"@typescript-eslint/types": "8.27.0",
|
||||
"@typescript-eslint/typescript-estree": "8.27.0"
|
||||
"@typescript-eslint/scope-manager": "8.28.0",
|
||||
"@typescript-eslint/types": "8.28.0",
|
||||
"@typescript-eslint/typescript-estree": "8.28.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
@@ -2001,12 +2019,13 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@typescript-eslint/visitor-keys": {
|
||||
"version": "8.27.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.27.0.tgz",
|
||||
"integrity": "sha512-WsXQwMkILJvffP6z4U3FYJPlbf/j07HIxmDjZpbNvBJkMfvwXj5ACRkkHwBDvLBbDbtX5TdU64/rcvKJ/vuInQ==",
|
||||
"version": "8.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.28.0.tgz",
|
||||
"integrity": "sha512-hbn8SZ8w4u2pRwgQ1GlUrPKE+t2XvcCW5tTRF7j6SMYIuYG37XuzIW44JCZPa36evi0Oy2SnM664BlIaAuQcvg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@typescript-eslint/types": "8.27.0",
|
||||
"@typescript-eslint/types": "8.28.0",
|
||||
"eslint-visitor-keys": "^4.2.0"
|
||||
},
|
||||
"engines": {
|
||||
@@ -2022,6 +2041,7 @@
|
||||
"resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
|
||||
"integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"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",
|
||||
"integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fill-range": "^7.1.1"
|
||||
},
|
||||
@@ -3225,6 +3246,7 @@
|
||||
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
|
||||
"integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@nodelib/fs.stat": "^2.0.2",
|
||||
"@nodelib/fs.walk": "^1.2.3",
|
||||
@@ -3241,6 +3263,7 @@
|
||||
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
|
||||
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"is-glob": "^4.0.1"
|
||||
},
|
||||
@@ -3282,6 +3305,7 @@
|
||||
"resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
|
||||
"integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
|
||||
"dev": true,
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"reusify": "^1.0.4"
|
||||
}
|
||||
@@ -3323,6 +3347,7 @@
|
||||
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
|
||||
"integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"to-regex-range": "^5.0.1"
|
||||
},
|
||||
@@ -3674,6 +3699,7 @@
|
||||
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
|
||||
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=0.12.0"
|
||||
}
|
||||
@@ -4011,6 +4037,7 @@
|
||||
"resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
|
||||
"integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 8"
|
||||
}
|
||||
@@ -4020,6 +4047,7 @@
|
||||
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
|
||||
"integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"braces": "^3.0.3",
|
||||
"picomatch": "^2.3.1"
|
||||
@@ -4425,7 +4453,8 @@
|
||||
"type": "consulting",
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
]
|
||||
],
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/raf-schd": {
|
||||
"version": "4.0.3",
|
||||
@@ -4786,6 +4815,7 @@
|
||||
"resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
|
||||
"integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"iojs": ">=1.0.0",
|
||||
"node": ">=0.10.0"
|
||||
@@ -4862,6 +4892,7 @@
|
||||
"url": "https://feross.org/support"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"queue-microtask": "^1.2.2"
|
||||
}
|
||||
@@ -5222,6 +5253,7 @@
|
||||
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
|
||||
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-number": "^7.0.0"
|
||||
},
|
||||
@@ -5499,10 +5531,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.2.tgz",
|
||||
"integrity": "sha512-yW7PeMM+LkDzc7CgJuRLMW2Jz0FxMOsVJ8Lv3gpgW9WLcb9cTW+121UEr1hvmfR7w3SegR5ItvYyzVz1vxNJgQ==",
|
||||
"version": "6.2.3",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-6.2.3.tgz",
|
||||
"integrity": "sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"postcss": "^8.5.3",
|
||||
|
||||
18
package.json
18
package.json
@@ -12,12 +12,12 @@
|
||||
"dependencies": {
|
||||
"@hello-pangea/dnd": "^18.0.1",
|
||||
"@iconify/react": "^5.2.0",
|
||||
"@mantine/core": "^7.17.2",
|
||||
"@mantine/hooks": "^7.17.2",
|
||||
"@mantine/core": "^7.17.3",
|
||||
"@mantine/hooks": "^7.17.3",
|
||||
"@tabler/icons-react": "^3.31.0",
|
||||
"@tanstack/react-query": "^5.69.0",
|
||||
"@tanstack/react-query-devtools": "^5.69.0",
|
||||
"@tanstack/react-query-persist-client": "^5.69.0",
|
||||
"@tanstack/react-query": "^5.69.3",
|
||||
"@tanstack/react-query-devtools": "^5.69.3",
|
||||
"@tanstack/react-query-persist-client": "^5.69.3",
|
||||
"idb-keyval": "^6.2.1",
|
||||
"jotai": "^2.12.2",
|
||||
"react": "^19.0.0",
|
||||
@@ -29,11 +29,11 @@
|
||||
"recharts": "^2.15.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^22.13.11",
|
||||
"@types/node": "^22.13.14",
|
||||
"@types/react": "^19.0.12",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@typescript-eslint/eslint-plugin": "^8.27.0",
|
||||
"@typescript-eslint/parser": "^8.27.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.28.0",
|
||||
"@typescript-eslint/parser": "^8.28.0",
|
||||
"@vitejs/plugin-react": "^4.3.4",
|
||||
"@vitest/coverage-v8": "^3.0.9",
|
||||
"@vitest/ui": "^3.0.9",
|
||||
@@ -41,7 +41,7 @@
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.19",
|
||||
"typescript": "^5.8.2",
|
||||
"vite": "^6.2.2",
|
||||
"vite": "^6.2.3",
|
||||
"vite-plugin-dts": "~4.5.3",
|
||||
"vite-plugin-eslint": "^1.8.1",
|
||||
"vite-tsconfig-paths": "^5.1.4",
|
||||
|
||||
@@ -7,7 +7,7 @@ import { WiBarometer, WiHumidity, WiSunrise, WiSunset } from 'react-icons/wi';
|
||||
import WeatherIcon from './WeatherIcon';
|
||||
|
||||
export default function CurrentWeather({ current }: any) {
|
||||
const { currentLocation } = useCommonHooks();
|
||||
const { currentLocation, isMobile } = useCommonHooks();
|
||||
const { data: sunStateData } = useSunStateAPI({
|
||||
lat: currentLocation.lat,
|
||||
lon: currentLocation.lon,
|
||||
@@ -56,7 +56,7 @@ export default function CurrentWeather({ current }: any) {
|
||||
</Text>
|
||||
</Group>
|
||||
<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'>
|
||||
<WeatherIcon
|
||||
textDescription={`${
|
||||
@@ -73,7 +73,7 @@ export default function CurrentWeather({ current }: any) {
|
||||
: current.textDescription
|
||||
}`}
|
||||
/>
|
||||
<Text fz={'7rem'} fw={200}>
|
||||
<Text fz={isMobile ? '5rem' : '7rem'} fw={200}>
|
||||
{current.temperature}°<sup style={{ fontSize: '3rem' }}>F</sup>
|
||||
</Text>
|
||||
</Group>
|
||||
@@ -89,7 +89,7 @@ export default function CurrentWeather({ current }: any) {
|
||||
{current.textDescription}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Stack gap={4} w={'45%'}>
|
||||
<Stack gap={4} w={isMobile ? '50%' : '45%'}>
|
||||
<Text>
|
||||
Feels like {current.heatIndex ?? current.windChill ?? current.temperature}
|
||||
°<sup>F</sup>
|
||||
@@ -105,7 +105,12 @@ export default function CurrentWeather({ current }: any) {
|
||||
<FaLongArrowAltUp size={32} />
|
||||
</ThemeIcon>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={3}>
|
||||
<Grid.Col
|
||||
span={3}
|
||||
style={{
|
||||
marginInlineStart: isMobile ? '1rem' : undefined,
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
{current.highTemp}°<sup>F</sup>
|
||||
</Text>
|
||||
@@ -120,7 +125,12 @@ export default function CurrentWeather({ current }: any) {
|
||||
<FaLongArrowAltDown size={32} />
|
||||
</ThemeIcon>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={1}>
|
||||
<Grid.Col
|
||||
span={1}
|
||||
style={{
|
||||
marginInlineStart: isMobile ? '1rem' : undefined,
|
||||
}}
|
||||
>
|
||||
<Text>
|
||||
{current.lowTemp}°<sup>F</sup>
|
||||
</Text>
|
||||
@@ -137,7 +147,12 @@ export default function CurrentWeather({ current }: any) {
|
||||
<WiSunrise size={32} />
|
||||
</ThemeIcon>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={3}>
|
||||
<Grid.Col
|
||||
span={3}
|
||||
style={{
|
||||
marginInlineStart: isMobile ? '1rem' : undefined,
|
||||
}}
|
||||
>
|
||||
<Text>{sunStates[0]?.sunrise}</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={1}>
|
||||
@@ -150,7 +165,12 @@ export default function CurrentWeather({ current }: any) {
|
||||
<WiSunset size={32} />
|
||||
</ThemeIcon>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={3}>
|
||||
<Grid.Col
|
||||
span={3}
|
||||
style={{
|
||||
marginInlineStart: isMobile ? '1rem' : undefined,
|
||||
}}
|
||||
>
|
||||
<Text>{sunStates[0]?.sunset}</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
@@ -165,10 +185,20 @@ export default function CurrentWeather({ current }: any) {
|
||||
<WiHumidity size={32} />
|
||||
</ThemeIcon>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={3}>
|
||||
<Grid.Col
|
||||
span={isMobile ? 4 : 3}
|
||||
style={{
|
||||
marginInlineStart: isMobile ? '1rem' : undefined,
|
||||
}}
|
||||
>
|
||||
<Text>Humidity</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Grid.Col
|
||||
span={2}
|
||||
style={{
|
||||
marginInlineStart: isMobile ? '1rem' : undefined,
|
||||
}}
|
||||
>
|
||||
<Text>{current.humidity}%</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
@@ -183,10 +213,20 @@ export default function CurrentWeather({ current }: any) {
|
||||
<FaWind size={32} />
|
||||
</ThemeIcon>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={3}>
|
||||
<Grid.Col
|
||||
span={3}
|
||||
style={{
|
||||
marginInlineStart: isMobile ? '1rem' : undefined,
|
||||
}}
|
||||
>
|
||||
<Text>Wind</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Grid.Col
|
||||
span={isMobile ? 4 : 3}
|
||||
style={{
|
||||
marginInlineStart: isMobile ? '1rem' : undefined,
|
||||
}}
|
||||
>
|
||||
<Text>{current.windSpeed}mph</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
@@ -201,10 +241,20 @@ export default function CurrentWeather({ current }: any) {
|
||||
<WiBarometer size={32} />
|
||||
</ThemeIcon>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={3}>
|
||||
<Grid.Col
|
||||
span={3}
|
||||
style={{
|
||||
marginInlineStart: isMobile ? '1rem' : undefined,
|
||||
}}
|
||||
>
|
||||
<Text>Pressure</Text>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2}>
|
||||
<Grid.Col
|
||||
span={isMobile ? 4 : 3}
|
||||
style={{
|
||||
marginInlineStart: isMobile ? '1rem' : undefined,
|
||||
}}
|
||||
>
|
||||
<Text>{current.pressure} in</Text>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import { Group, Stack, Text } from '@mantine/core';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { textClasses } from 'styles';
|
||||
import WeatherIcon from './WeatherIcon';
|
||||
|
||||
export default function ExtendedForecast({ forecast }: any) {
|
||||
const day = forecast.slice(2, 14).filter((item: any) => item.isDaytime);
|
||||
const night = forecast.slice(2, 14).filter((item: any) => !item.isDaytime);
|
||||
const { isMobile } = useCommonHooks();
|
||||
return (
|
||||
<Stack
|
||||
gap={0}
|
||||
@@ -16,7 +19,7 @@ export default function ExtendedForecast({ forecast }: any) {
|
||||
paddingBottom: '.5rem',
|
||||
}}
|
||||
>
|
||||
<Group gap={0} px={16} w={'100%'}>
|
||||
<Group gap={0} px={16} mb={8} w={'100%'}>
|
||||
<Text
|
||||
c={'var(--color-text-pri)'}
|
||||
style={{
|
||||
@@ -34,11 +37,37 @@ export default function ExtendedForecast({ forecast }: any) {
|
||||
: item.shortForecast.includes('then')
|
||||
? item.shortForecast.substring(0, item.shortForecast.indexOf('then'))
|
||||
: item.shortForecast;
|
||||
|
||||
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>
|
||||
<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>
|
||||
{item.temperature}°{item.temperatureUnit}/{night[index].temperature}°
|
||||
{item.temperatureUnit}
|
||||
|
||||
@@ -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' />
|
||||
<Tooltip content={<CustomTooltip />} />
|
||||
<Line
|
||||
@@ -105,7 +109,7 @@ export default function WeatherGraphs({ hourlyForecast }: any) {
|
||||
return data.probabilityOfPrecipitation.value;
|
||||
}}
|
||||
stroke={theme.primaryColor}
|
||||
fill={theme.accentColor}
|
||||
fill={theme.primaryColor}
|
||||
dot={{ stroke: theme.primaryColor, strokeWidth: 1 }}
|
||||
/>
|
||||
<Area
|
||||
|
||||
@@ -9,20 +9,15 @@ import ExtendedForecast from './ExtendedForecast';
|
||||
import WeatherGraphs from './WeatherGraphs';
|
||||
|
||||
export function WeatherModal({
|
||||
setSearchValue,
|
||||
setProviderLabel,
|
||||
setProviderURL,
|
||||
current,
|
||||
extendedForecast,
|
||||
closeWeatherModal,
|
||||
weatherModalOpened,
|
||||
}: any) {
|
||||
const {
|
||||
theme,
|
||||
isMobile,
|
||||
setProviderLabel,
|
||||
setSearchValue,
|
||||
setProviderURL,
|
||||
currentUser,
|
||||
currentLocation,
|
||||
} = useCommonHooks();
|
||||
const { theme, isMobile, currentUser, currentLocation } = useCommonHooks();
|
||||
const { data: hourly } = useWeatherAPI({
|
||||
endpoint: 'hourly',
|
||||
office: currentLocation.office,
|
||||
@@ -45,10 +40,10 @@ export function WeatherModal({
|
||||
classNames={modalClasses}
|
||||
opened={weatherModalOpened}
|
||||
onClose={() => {
|
||||
closeWeatherModal();
|
||||
setProviderLabel('Google Search');
|
||||
setSearchValue('');
|
||||
setProviderLabel('Google Search');
|
||||
setProviderURL('https://www.google.com/search?q=');
|
||||
closeWeatherModal();
|
||||
}}
|
||||
style={{
|
||||
'--color-text-pri': theme.primaryColor,
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import { Group, Stack, Text } from '@mantine/core';
|
||||
import { WeatherModal } from 'components';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { textClasses } from 'styles';
|
||||
@@ -9,12 +8,8 @@ function Header({
|
||||
date,
|
||||
current,
|
||||
setCurrent,
|
||||
outlook,
|
||||
extendedForecast,
|
||||
weather,
|
||||
basicWeather,
|
||||
weatherModalOpened,
|
||||
closeWeatherModal,
|
||||
openWeatherModal,
|
||||
}: any) {
|
||||
const [time, setTime] = useState(new Date());
|
||||
@@ -127,6 +122,7 @@ function Header({
|
||||
position: 'absolute',
|
||||
bottom: isMobile ? -32 : 0,
|
||||
right: 16,
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={openWeatherModal}
|
||||
>
|
||||
@@ -158,13 +154,6 @@ function Header({
|
||||
</Text>
|
||||
</Group>
|
||||
</Stack>
|
||||
<WeatherModal
|
||||
current={current}
|
||||
outlook={outlook}
|
||||
extendedForecast={extendedForecast}
|
||||
closeWeatherModal={closeWeatherModal}
|
||||
weatherModalOpened={weatherModalOpened}
|
||||
/>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -43,6 +43,7 @@ export default function Search({
|
||||
const [listIndex, setListIndex] = useState(0);
|
||||
const {
|
||||
theme,
|
||||
isMobile,
|
||||
urlPattern,
|
||||
providerLabel,
|
||||
setProviderLabel,
|
||||
@@ -263,7 +264,13 @@ export default function Search({
|
||||
const [showFillButton, setShowFillButton] = useState(false);
|
||||
if (item.option.searchTerm !== undefined) {
|
||||
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 (
|
||||
<Group
|
||||
w={'100%'}
|
||||
@@ -446,7 +453,7 @@ export default function Search({
|
||||
}}
|
||||
spellCheck='true'
|
||||
searchable
|
||||
autoFocus
|
||||
autoFocus={!isMobile}
|
||||
leftSection={providerLabel}
|
||||
rightSection={<Stack />}
|
||||
renderOption={RenderOption}
|
||||
@@ -478,6 +485,9 @@ export default function Search({
|
||||
closeProviderModal={closeProviderModal}
|
||||
/>
|
||||
<WeatherModal
|
||||
setSearchValue={setSearchValue}
|
||||
setProviderLabel={setProviderLabel}
|
||||
setProviderURL={setProviderURL}
|
||||
current={current}
|
||||
outlook={outlook}
|
||||
extendedForecast={extendedForecast}
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import { ActionIcon, Group, Stack, Tabs, Text } from '@mantine/core';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { FaPaintBrush, FaRegListAlt } from 'react-icons/fa';
|
||||
import {
|
||||
FiArrowLeftCircle,
|
||||
FiBookmark,
|
||||
FiEdit,
|
||||
FiGlobe,
|
||||
FiMail,
|
||||
FiMonitor,
|
||||
@@ -65,10 +65,10 @@ export function Settings() {
|
||||
{isMobile ? <FiBookmark /> : 'Bookmarks'}
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themes'>
|
||||
{isMobile ? <FiEdit /> : 'Themes'}
|
||||
{isMobile ? <FaPaintBrush /> : 'Themes'}
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='themePlaylists'>
|
||||
{isMobile ? <FiEdit /> : 'Theme Playlists'}
|
||||
{isMobile ? <FaRegListAlt /> : 'Theme Playlists'}
|
||||
</Tabs.Tab>
|
||||
<Tabs.Tab px={isMobile ? '.9rem' : undefined} value='providers'>
|
||||
{isMobile ? <FiSearch /> : 'Search Providers'}
|
||||
|
||||
@@ -2,6 +2,7 @@ import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
@@ -20,6 +21,7 @@ import { FiHelpCircle, FiPlus } from 'react-icons/fi';
|
||||
import {
|
||||
actionIconClasses,
|
||||
buttonClasses,
|
||||
cardClasses,
|
||||
modalClasses,
|
||||
textClasses,
|
||||
textInputClasses,
|
||||
@@ -81,108 +83,111 @@ const ApplicationSettings = () => {
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pb={'2rem'}>
|
||||
<Stack gap={0} w={'100%'} align='center'>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<TextInput
|
||||
label={'Name'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={newApplication.name}
|
||||
onChange={(event) => {
|
||||
setNewApplication({
|
||||
...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,
|
||||
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
|
||||
<Stack gap={0} align='center'>
|
||||
<Group justify='center'>
|
||||
<TextInput
|
||||
label={'Name'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={newApplication.name}
|
||||
onChange={(event) => {
|
||||
setNewApplication({
|
||||
...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={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();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
@@ -252,7 +257,7 @@ const ApplicationSettings = () => {
|
||||
pos={isMobile ? undefined : 'absolute'}
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
autoFocus
|
||||
autoFocus={!isMobile}
|
||||
placeholder='Search...'
|
||||
value={searchValue}
|
||||
onInput={(event: any) => {
|
||||
|
||||
@@ -26,13 +26,13 @@ function DebouncedApplication({ application }: { application: Application }) {
|
||||
const [debounced] = useDebouncedValue(update, 1000);
|
||||
|
||||
useEffect(() => {
|
||||
if (Object.keys(debounced).length) {
|
||||
if (debounced && Object.keys(debounced).length > 0) {
|
||||
mutateAsync({ method: 'PATCH', endpoint: 'api/apps', body: debounced });
|
||||
}
|
||||
}, [debounced]);
|
||||
|
||||
useEffect(() => {
|
||||
if (update !== app && Object.keys(update).length) {
|
||||
if (update && update !== app && Object.keys(update).length) {
|
||||
setApp(update);
|
||||
}
|
||||
}, [update]);
|
||||
|
||||
@@ -21,6 +21,7 @@ import { FiHelpCircle, FiPlus } from 'react-icons/fi';
|
||||
import {
|
||||
actionIconClasses,
|
||||
buttonClasses,
|
||||
cardClasses,
|
||||
modalClasses,
|
||||
textClasses,
|
||||
textInputClasses,
|
||||
@@ -125,65 +126,67 @@ const BookmarkSettings = () => {
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pb={'2rem'}>
|
||||
<Stack gap={0} w={'100%'} align='center'>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<TextInput
|
||||
label={'Category Name'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={newGroup.categoryName}
|
||||
onChange={(event) => {
|
||||
setNewGroup({
|
||||
...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 },
|
||||
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
|
||||
<Stack gap={0} w={'100%'} align='center'>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<TextInput
|
||||
label={'Category Name'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={newGroup.categoryName}
|
||||
onChange={(event) => {
|
||||
setNewGroup({
|
||||
...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='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();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
@@ -253,7 +256,7 @@ const BookmarkSettings = () => {
|
||||
pos={isMobile ? undefined : 'absolute'}
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
autoFocus
|
||||
autoFocus={!isMobile}
|
||||
placeholder='Search...'
|
||||
value={searchValue}
|
||||
onInput={(event: any) => {
|
||||
@@ -261,16 +264,23 @@ const BookmarkSettings = () => {
|
||||
}}
|
||||
/>
|
||||
<Switch
|
||||
label={'Reorder'}
|
||||
label={<Text c={theme.primaryColor}>Reorder</Text>}
|
||||
labelPosition='left'
|
||||
pos={'absolute'}
|
||||
right={isMobile ? '2rem' : '1rem'}
|
||||
top={isMobile ? '9.5rem' : undefined}
|
||||
top={isMobile ? '10rem' : undefined}
|
||||
onChange={(e) => {
|
||||
setDragging(e.target.checked);
|
||||
}}
|
||||
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>
|
||||
{dragging ? (
|
||||
@@ -352,7 +362,7 @@ const BookmarkSettings = () => {
|
||||
</DragDropContext>
|
||||
) : (
|
||||
<Stack w={'100%'} align='center'>
|
||||
<Group w={'75%'} align='start'>
|
||||
<Group w={isMobile ? undefined : '75%'} align='start'>
|
||||
{groups?.map((group: BookmarkGroup) => (
|
||||
<DebouncedGroupSettingsItem
|
||||
key={group.id}
|
||||
|
||||
@@ -311,99 +311,101 @@ function DebouncedGroupSettingsItem({
|
||||
'--image-background': `url(${theme.backgroundImage})`,
|
||||
}}
|
||||
>
|
||||
<Stack w={'100%'} display={'flex'} pos={'relative'}>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<TextInput
|
||||
label={'Name'}
|
||||
labelProps={{
|
||||
style: {
|
||||
color: theme.primaryColor,
|
||||
},
|
||||
}}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
onChange={(event) => {
|
||||
setNewBookmark({
|
||||
...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 },
|
||||
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
|
||||
<Stack w={'100%'} display={'flex'} pos={'relative'}>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<TextInput
|
||||
label={'Name'}
|
||||
labelProps={{
|
||||
style: {
|
||||
color: theme.primaryColor,
|
||||
},
|
||||
}}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
onChange={(event) => {
|
||||
setNewBookmark({
|
||||
...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 },
|
||||
});
|
||||
setPopoverOpened(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
setPopoverOpened(false);
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
setPopoverOpened(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Popover.Dropdown>
|
||||
</Popover>
|
||||
</Group>
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Button,
|
||||
Card,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
@@ -20,6 +21,7 @@ import { FiHelpCircle, FiPlus } from 'react-icons/fi';
|
||||
import {
|
||||
actionIconClasses,
|
||||
buttonClasses,
|
||||
cardClasses,
|
||||
modalClasses,
|
||||
textClasses,
|
||||
textInputClasses,
|
||||
@@ -79,48 +81,51 @@ const MessageSettings = () => {
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pb={'2rem'}>
|
||||
<Stack gap={0} w={'100%'} align='center'>
|
||||
<TextInput
|
||||
autoFocus
|
||||
w={'75%'}
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
onChange={(event) => {
|
||||
setNewMessage(event.target.value);
|
||||
}}
|
||||
error={newMessageError}
|
||||
/>
|
||||
<Divider color='black' my='sm' />
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
if (newMessage) {
|
||||
mutateAsync({
|
||||
method: 'POST',
|
||||
endpoint: endpoint,
|
||||
body: { message: newMessage },
|
||||
});
|
||||
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
|
||||
<Stack gap={0} w={'100%'} align='center'>
|
||||
<TextInput
|
||||
label='Message text'
|
||||
autoFocus={!isMobile}
|
||||
w={'75%'}
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
onChange={(event) => {
|
||||
setNewMessage(event.target.value);
|
||||
}}
|
||||
error={newMessageError}
|
||||
/>
|
||||
<Divider color='black' my='lg' />
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
if (newMessage) {
|
||||
mutateAsync({
|
||||
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();
|
||||
} else {
|
||||
setNewMessageError('Please enter a message');
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
@@ -183,7 +188,7 @@ const MessageSettings = () => {
|
||||
pos={isMobile ? undefined : 'absolute'}
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
autoFocus
|
||||
autoFocus={!isMobile}
|
||||
placeholder='Search...'
|
||||
value={searchValue}
|
||||
onInput={(event: any) => {
|
||||
|
||||
@@ -2,6 +2,7 @@ import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
@@ -20,6 +21,7 @@ import { FiHelpCircle, FiPlus } from 'react-icons/fi';
|
||||
import {
|
||||
actionIconClasses,
|
||||
buttonClasses,
|
||||
cardClasses,
|
||||
modalClasses,
|
||||
textClasses,
|
||||
textInputClasses,
|
||||
@@ -78,79 +80,81 @@ const SearchProviderSettings = () => {
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pb={'2rem'}>
|
||||
<Stack gap={0} w={'100%'} align='center'>
|
||||
<Stack>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
|
||||
<Stack gap={0} w={'100%'} align='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
|
||||
label={'Name'}
|
||||
label={'Url'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={newProvider.name}
|
||||
defaultValue={newProvider.url}
|
||||
onChange={(event) => {
|
||||
setNewProvider({
|
||||
...newProvider,
|
||||
name: event.target.value,
|
||||
url: event.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<TextInput
|
||||
label={'Prefix'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={newProvider.prefix}
|
||||
onChange={(event) => {
|
||||
setNewProvider({
|
||||
...newProvider,
|
||||
prefix: event.target.value,
|
||||
});
|
||||
</Stack>
|
||||
<Divider color='black' my='lg' />
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
if (newProvider) {
|
||||
mutateAsync({
|
||||
method: 'POST',
|
||||
endpoint: endpoint,
|
||||
body: newProvider,
|
||||
});
|
||||
closeModal();
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Group>
|
||||
<TextInput
|
||||
label={'Url'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
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,
|
||||
});
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
@@ -211,7 +215,7 @@ const SearchProviderSettings = () => {
|
||||
pos={isMobile ? undefined : 'absolute'}
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
autoFocus
|
||||
autoFocus={!isMobile}
|
||||
placeholder='Search...'
|
||||
value={searchValue}
|
||||
onInput={(event: any) => {
|
||||
|
||||
@@ -221,7 +221,7 @@ function ThemeModal({
|
||||
</Group>
|
||||
</Group>
|
||||
) : (
|
||||
<Stack h={256} justify='center'>
|
||||
<Stack h={isMobile ? '100%' : 256} justify='center'>
|
||||
<Group justify='space-between'>
|
||||
<Text className={textClasses.label} classNames={textClasses}>
|
||||
Primary Color
|
||||
@@ -383,7 +383,7 @@ function ThemeModal({
|
||||
</Stack>
|
||||
</Group>
|
||||
<Divider color='black' my='sm' />
|
||||
<Group pos={'absolute'} bottom={8}>
|
||||
<Group pos={'absolute'} bottom={isMobile ? -64 : 8}>
|
||||
<Button
|
||||
color={'green'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
|
||||
@@ -249,10 +249,19 @@ function ThemePlaylistCard({ cardPlaylist, handleOpen, allThemes }: any) {
|
||||
}}
|
||||
>
|
||||
{hover && <Overlay opacity={0.5} zIndex={1} />}
|
||||
<Stack h={'100%'} w={'100%'}>
|
||||
<Stack h={'100%'} w={'100%'} align='center'>
|
||||
{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}
|
||||
</Text>
|
||||
<ScrollArea h={'255px'} w={'100%'} style={{ zIndex: 2 }}>
|
||||
|
||||
@@ -126,7 +126,7 @@ function ThemePlaylists() {
|
||||
pos={isMobile ? undefined : 'absolute'}
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
autoFocus
|
||||
autoFocus={!isMobile}
|
||||
placeholder='Search...'
|
||||
value={searchValue}
|
||||
onInput={(event: any) => {
|
||||
|
||||
@@ -153,7 +153,7 @@ function ThemesSettings() {
|
||||
pos={isMobile ? undefined : 'absolute'}
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
autoFocus
|
||||
autoFocus={!isMobile}
|
||||
placeholder='Search...'
|
||||
value={searchValue}
|
||||
onInput={(event: any) => {
|
||||
@@ -180,7 +180,7 @@ function ThemesSettings() {
|
||||
color={theme.primaryColor}
|
||||
/>
|
||||
</Group>
|
||||
<Group justify='center' align='center' pos={'relative'}>
|
||||
<Group justify='center' align='center' pos={'relative'} mt={'1rem'}>
|
||||
<Overlay
|
||||
display={currentTheme === 'random' ? 'flex' : 'none'}
|
||||
blur={5}
|
||||
|
||||
@@ -1,16 +1,14 @@
|
||||
import { Card, Stack, Text } from '@mantine/core';
|
||||
import { useCommonHooks } from 'hooks';
|
||||
import { FaLaptop } from 'react-icons/fa';
|
||||
import { cardClasses } from 'styles';
|
||||
|
||||
function WolClientSettingsItem({ client }: any) {
|
||||
const { isMobile } = useCommonHooks();
|
||||
return (
|
||||
<Card
|
||||
className={cardClasses.settingsItemHover}
|
||||
classNames={cardClasses}
|
||||
h={200}
|
||||
w={isMobile ? '100%' : 200}
|
||||
w={'100%'}
|
||||
>
|
||||
<Stack align='center' gap={0}>
|
||||
<FaLaptop fontSize={100} />
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Button,
|
||||
Card,
|
||||
Divider,
|
||||
Grid,
|
||||
GridCol,
|
||||
@@ -20,6 +20,7 @@ import { FiHelpCircle, FiPlus } from 'react-icons/fi';
|
||||
import {
|
||||
actionIconClasses,
|
||||
buttonClasses,
|
||||
cardClasses,
|
||||
modalClasses,
|
||||
textClasses,
|
||||
textInputClasses,
|
||||
@@ -77,64 +78,66 @@ const WolClientSettings = () => {
|
||||
<Modal.CloseButton />
|
||||
</Modal.Header>
|
||||
<Modal.Body pb={'2rem'}>
|
||||
<Stack gap={0} w={'100%'} align='center'>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<TextInput
|
||||
label={'Hostname'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={newWolClient.hostname}
|
||||
onChange={(event) => {
|
||||
setNewWolClient({
|
||||
...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,
|
||||
<Card className={cardClasses.settingsItem} classNames={cardClasses}>
|
||||
<Stack gap={0} w={'100%'} align='center'>
|
||||
<Group w={'100%'} justify='center'>
|
||||
<TextInput
|
||||
label={'Hostname'}
|
||||
className={textInputClasses.settingsItem}
|
||||
pt={16}
|
||||
classNames={textInputClasses}
|
||||
defaultValue={newWolClient.hostname}
|
||||
onChange={(event) => {
|
||||
setNewWolClient({
|
||||
...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='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();
|
||||
}
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
<Button
|
||||
color={'red'}
|
||||
styles={{ label: { color: 'black' } }}
|
||||
onClick={() => {
|
||||
closeModal();
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Card>
|
||||
</Modal.Body>
|
||||
</Modal.Content>
|
||||
</Modal.Root>
|
||||
@@ -193,7 +196,7 @@ const WolClientSettings = () => {
|
||||
pos={isMobile ? undefined : 'absolute'}
|
||||
className={textInputClasses.settingsItem}
|
||||
classNames={textInputClasses}
|
||||
autoFocus
|
||||
autoFocus={!isMobile}
|
||||
placeholder='Search...'
|
||||
value={searchValue}
|
||||
onInput={(event: any) => {
|
||||
@@ -204,16 +207,17 @@ const WolClientSettings = () => {
|
||||
<Stack w={'100%'} align='center'>
|
||||
<Grid columns={18} w={'75%'}>
|
||||
{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.Target>
|
||||
<Box
|
||||
<Group
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
}}
|
||||
justify='center'
|
||||
>
|
||||
<WolClientSettingsItem client={client} />
|
||||
</Box>
|
||||
</Group>
|
||||
</Popover.Target>
|
||||
<Popover.Dropdown>
|
||||
<DebouncedWolClient wolClient={client} />
|
||||
|
||||
@@ -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 {
|
||||
color: var(--color-text-pri);
|
||||
text-decoration: none;
|
||||
|
||||
@@ -38,6 +38,9 @@
|
||||
padding-left: .5rem;
|
||||
opacity: 1;
|
||||
}
|
||||
::placeholder {
|
||||
color: var(--color-text-acc) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user