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

Updates to search component

Browse Source
This commit is contained in:
Sean Edmunds
2025-09-02 17:13:15 -05:00
parent ef630adcbb
commit 93faf9b02a
9 changed files with 530 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
package-lock.json generated
View File

@@ -8,31 +8,32 @@
"name": "triggerfrontend", "name": "triggerfrontend",
"version": "1.0.0", "version": "1.0.0",
"dependencies": { "dependencies": {
"@gfazioli/mantine-text-animate": "^2.2.5",
"@hello-pangea/dnd": "^18.0.1", "@hello-pangea/dnd": "^18.0.1",
"@mantine/core": "^8.2.7", "@mantine/core": "^8.2.8",
"@mantine/form": "^8.2.7", "@mantine/form": "^8.2.8",
"@mantine/hooks": "^8.2.7", "@mantine/hooks": "^8.2.8",
"@mantine/notifications": "^8.2.7", "@mantine/notifications": "^8.2.8",
"@tanstack/react-query": "^5.85.5", "@tanstack/react-query": "^5.85.9",
"@tanstack/react-query-devtools": "^5.85.5", "@tanstack/react-query-devtools": "^5.85.9",
"@tanstack/react-query-persist-client": "^5.85.5", "@tanstack/react-query-persist-client": "^5.85.9",
"idb-keyval": "^6.2.2", "idb-keyval": "^6.2.2",
"jotai": "^2.13.1", "jotai": "^2.13.1",
"react": "^19.1.1", "react": "^19.1.1",
"react-dom": "^19.1.1", "react-dom": "^19.1.1",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"react-router-dom": "^7.8.1", "react-router-dom": "^7.8.2",
"recharts": "^3.1.2" "recharts": "^3.1.2"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^24.3.0", "@types/node": "^24.3.0",
"@types/react": "^19.1.9", "@types/react": "^19.1.12",
"@types/react-dom": "^19.1.7", "@types/react-dom": "^19.1.9",
"@vitejs/plugin-react": "^5.0.1", "@vitejs/plugin-react": "^5.0.2",
"@vitest/coverage-v8": "^3.2.4", "@vitest/coverage-v8": "^3.2.4",
"@vitest/ui": "^3.2.4", "@vitest/ui": "^3.2.4",
"typescript": "^5.9.2", "typescript": "^5.9.2",
"vite": "^7.1.3", "vite": "^7.1.4",
"vite-plugin-dts": "~4.5.4", "vite-plugin-dts": "~4.5.4",
"vite-tsconfig-paths": "^5.1.4", "vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.2.4" "vitest": "^3.2.4"
@@ -822,6 +823,18 @@
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
"integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==" "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
}, },
"node_modules/@gfazioli/mantine-text-animate": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/@gfazioli/mantine-text-animate/-/mantine-text-animate-2.2.5.tgz",
"integrity": "sha512-g3QhHPn9qmeWr5Xuq59Tze6d4aXI/gyhQkwWWZ64BS1vey9FMms6lsNQm1v4u+p5Uqx/NqrLDDqphn+S0CIgRQ==",
"license": "MIT",
"peerDependencies": {
"@mantine/core": ">=7.0.0",
"@mantine/hooks": ">=7.0.0",
"react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x"
}
},
"node_modules/@hello-pangea/dnd": { "node_modules/@hello-pangea/dnd": {
"version": "18.0.1", "version": "18.0.1",
"resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz", "resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
@@ -930,9 +943,9 @@
} }
}, },
"node_modules/@mantine/core": { "node_modules/@mantine/core": {
"version": "8.2.7", "version": "8.2.8",
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.2.7.tgz", "resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.2.8.tgz",
"integrity": "sha512-gfVDf/qFxt66PrsktYEJt/MZbiNo3KCx6PxKKcskSe/J2g5g1kf4nhhvBFlYaicDX93PfT4MgTnipyfJQ09NDA==", "integrity": "sha512-dybAXrlQ+QiIhpnVCkdH6P4Sjm9I9RymYXfDp97oj9KfGRMEJGLDdPAwp/2GhXe7UdDkzqD48JCkbfRWF2Q+qA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@floating-ui/react": "^0.26.28", "@floating-ui/react": "^0.26.28",
@@ -943,15 +956,15 @@
"type-fest": "^4.27.0" "type-fest": "^4.27.0"
}, },
"peerDependencies": { "peerDependencies": {
"@mantine/hooks": "8.2.7", "@mantine/hooks": "8.2.8",
"react": "^18.x || ^19.x", "react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x" "react-dom": "^18.x || ^19.x"
} }
}, },
"node_modules/@mantine/form": { "node_modules/@mantine/form": {
"version": "8.2.7", "version": "8.2.8",
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.2.7.tgz", "resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.2.8.tgz",
"integrity": "sha512-bhOygfZMo+vOX37xBhUCCiOdudNMFQzxm/DOHzwIhGsrmgdhyV0Kof/+zDEfj1/09GtjFP9ecYvmnL5zhZv+6w==", "integrity": "sha512-edigaUCmyxoPcqhMgkgJHXRgbzR1tym88xQNNgfGA1KYc9gr0BTk/3dOa5B93HIVdO9/DEXZwYKN4cjrKPDY+g==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"fast-deep-equal": "^3.1.3", "fast-deep-equal": "^3.1.3",
@@ -962,34 +975,34 @@
} }
}, },
"node_modules/@mantine/hooks": { "node_modules/@mantine/hooks": {
"version": "8.2.7", "version": "8.2.8",
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.2.7.tgz", "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.2.8.tgz",
"integrity": "sha512-DV0RdFBI0g0Bu7CWipIIiPK6d8+pTNXTbIOF4N+VZ6LAIpZPk5ldtb8sGaTVyQtQhEjrChrCxfkrLiNGTOAwiw==", "integrity": "sha512-KK1krCcXizWT6JF8gWexv58imQBbviylAJqSqdZ4zUPgrpe81ehMyfxo5Z9EZsnSwMxkB4RLMhCCJhC5g8GvLA==",
"license": "MIT", "license": "MIT",
"peerDependencies": { "peerDependencies": {
"react": "^18.x || ^19.x" "react": "^18.x || ^19.x"
} }
}, },
"node_modules/@mantine/notifications": { "node_modules/@mantine/notifications": {
"version": "8.2.7", "version": "8.2.8",
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.2.7.tgz", "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.2.8.tgz",
"integrity": "sha512-KXtueabwBIbgl1M5vmjzGBt88AOwhxkhmvQhEDC6UvGPtIlf4jw0BT0i3a54AKc1YwSCs0bUd91jKg5Oem2wpw==", "integrity": "sha512-luNksAUkROoMzKCB/30nQ8o38wt54ktylbpBcTrAcjE1q00nH/IEYLS58iUYGf8l/xGBV1KH8jgSik58iqk++A==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@mantine/store": "8.2.7", "@mantine/store": "8.2.8",
"react-transition-group": "4.4.5" "react-transition-group": "4.4.5"
}, },
"peerDependencies": { "peerDependencies": {
"@mantine/core": "8.2.7", "@mantine/core": "8.2.8",
"@mantine/hooks": "8.2.7", "@mantine/hooks": "8.2.8",
"react": "^18.x || ^19.x", "react": "^18.x || ^19.x",
"react-dom": "^18.x || ^19.x" "react-dom": "^18.x || ^19.x"
} }
}, },
"node_modules/@mantine/store": { "node_modules/@mantine/store": {
"version": "8.2.7", "version": "8.2.8",
"resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.2.7.tgz", "resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.2.8.tgz",
"integrity": "sha512-TQye6nRFDOQ+HQovQSjQlFHrivn6NqdiZAuytszOnB9jqgKSzPqQxK0mEynAxJsomaO9K1rrj7clZcPNgZc+Pw==", "integrity": "sha512-xma5vcJlcR2UN6NZj0Rhskfppmz6wUTY/52EBU9sKZw60e1iiuTX2Bk/sfUa34VKZF4cRS46VLz2qstyCJne4Q==",
"license": "MIT", "license": "MIT",
"peerDependencies": { "peerDependencies": {
"react": "^18.x || ^19.x" "react": "^18.x || ^19.x"
@@ -1186,9 +1199,9 @@
} }
}, },
"node_modules/@rolldown/pluginutils": { "node_modules/@rolldown/pluginutils": {
"version": "1.0.0-beta.32", "version": "1.0.0-beta.34",
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.32.tgz", "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.34.tgz",
"integrity": "sha512-QReCdvxiUZAPkvp1xpAg62IeNzykOFA6syH2CnClif4YmALN1XKpB39XneL80008UbtMShthSVDKmrx05N1q/g==", "integrity": "sha512-LyAREkZHP5pMom7c24meKmJCdhf2hEyvam2q0unr3or9ydwDL+DJ8chTF6Av/RFPb3rH8UFBdMzO5MxTZW97oA==",
"dev": true, "dev": true,
"license": "MIT" "license": "MIT"
}, },
@@ -1629,9 +1642,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@tanstack/query-core": { "node_modules/@tanstack/query-core": {
"version": "5.85.5", "version": "5.85.9",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.5.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.9.tgz",
"integrity": "sha512-KO0WTob4JEApv69iYp1eGvfMSUkgw//IpMnq+//cORBzXf0smyRwPLrUvEe5qtAEGjwZTXrjxg+oJNP/C00t6w==", "integrity": "sha512-5fxb9vwyftYE6KFLhhhDyLr8NO75+Wpu7pmTo+TkwKmMX2oxZDoLwcqGP8ItKSpUMwk3urWgQDZfyWr5Jm9LsQ==",
"license": "MIT", "license": "MIT",
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1649,12 +1662,12 @@
} }
}, },
"node_modules/@tanstack/query-persist-client-core": { "node_modules/@tanstack/query-persist-client-core": {
"version": "5.85.5", "version": "5.85.9",
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.85.5.tgz", "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.85.9.tgz",
"integrity": "sha512-2JQiyiTVaaUu8pwPqOp6tjNa64ZN+0T9eZ3lfksV4le1VuG99fTcAYmZFIydvzwWlSM7GEF/1kpl5bwW2Y1qfQ==", "integrity": "sha512-er7HfMjn6TQanWG5nudjRNZbo7ahf7IIdWN5kU7L2qRZ2kcw89TQZAZ74GIQsumOXZD7sUcHG2dylveFZNxlZA==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-core": "5.85.5" "@tanstack/query-core": "5.85.9"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1662,12 +1675,12 @@
} }
}, },
"node_modules/@tanstack/react-query": { "node_modules/@tanstack/react-query": {
"version": "5.85.5", "version": "5.85.9",
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.5.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.9.tgz",
"integrity": "sha512-/X4EFNcnPiSs8wM2v+b6DqS5mmGeuJQvxBglmDxl6ZQb5V26ouD2SJYAcC3VjbNwqhY2zjxVD15rDA5nGbMn3A==", "integrity": "sha512-2T5zgSpcOZXGkH/UObIbIkGmUPQqZqn7esVQFXLOze622h4spgWf5jmvrqAo9dnI13/hyMcNsF1jsoDcb59nJQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-core": "5.85.5" "@tanstack/query-core": "5.85.9"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
@@ -1678,9 +1691,9 @@
} }
}, },
"node_modules/@tanstack/react-query-devtools": { "node_modules/@tanstack/react-query-devtools": {
"version": "5.85.5", "version": "5.85.9",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.85.5.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.85.9.tgz",
"integrity": "sha512-6Ol6Q+LxrCZlQR4NoI5181r+ptTwnlPG2t7H9Sp3klxTBhYGunONqcgBn2YKRPsaKiYM8pItpKMdMXMEINntMQ==", "integrity": "sha512-BAdhgwpzxkC1vdyCfiPbbC7FU/t/x6q2d9ZyhON/WykVUdznD69nlppuWpSIlIGipdRG7sF6tRZ6x3GtSq0EUQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-devtools": "5.84.0" "@tanstack/query-devtools": "5.84.0"
@@ -1690,24 +1703,24 @@
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
}, },
"peerDependencies": { "peerDependencies": {
"@tanstack/react-query": "^5.85.5", "@tanstack/react-query": "^5.85.9",
"react": "^18 || ^19" "react": "^18 || ^19"
} }
}, },
"node_modules/@tanstack/react-query-persist-client": { "node_modules/@tanstack/react-query-persist-client": {
"version": "5.85.5", "version": "5.85.9",
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.85.5.tgz", "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.85.9.tgz",
"integrity": "sha512-KzISZPtJtWZAwH/Ln1FclaiHVwdeV04WX7wUYLe1vw7zyfcPljHeyXlmVf8nxhFm8ujMBdGQVzP2iNn6ehzjQA==", "integrity": "sha512-h75Xyt/XDtk1oRmli5znQRXclT/iZpseTK7ScqEjaiZmPSREgg2mJb1blo2SB1swSidDNsCtnENLNH43PP0/9w==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/query-persist-client-core": "5.85.5" "@tanstack/query-persist-client-core": "5.85.9"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
"url": "https://github.com/sponsors/tannerlinsley" "url": "https://github.com/sponsors/tannerlinsley"
}, },
"peerDependencies": { "peerDependencies": {
"@tanstack/react-query": "^5.85.5", "@tanstack/react-query": "^5.85.9",
"react": "^18 || ^19" "react": "^18 || ^19"
} }
}, },
@@ -1856,9 +1869,9 @@
} }
}, },
"node_modules/@types/react": { "node_modules/@types/react": {
"version": "19.1.9", "version": "19.1.12",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
"integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==", "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
"devOptional": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@@ -1866,9 +1879,9 @@
} }
}, },
"node_modules/@types/react-dom": { "node_modules/@types/react-dom": {
"version": "19.1.7", "version": "19.1.9",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.7.tgz", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
"integrity": "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==", "integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peerDependencies": { "peerDependencies": {
@@ -1882,16 +1895,16 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/@vitejs/plugin-react": { "node_modules/@vitejs/plugin-react": {
"version": "5.0.1", "version": "5.0.2",
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.0.1.tgz", "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.0.2.tgz",
"integrity": "sha512-DE4UNaBXwtVoDJ0ccBdLVjFTWL70NRuWNCxEieTI3lrq9ORB9aOCQEKstwDXBl87NvFdbqh/p7eINGyj0BthJA==", "integrity": "sha512-tmyFgixPZCx2+e6VO9TNITWcCQl8+Nl/E8YbAyPVv85QCc7/A3JrdfG2A8gIzvVhWuzMOVrFW1aReaNxrI6tbw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/core": "^7.28.3", "@babel/core": "^7.28.3",
"@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-self": "^7.27.1",
"@babel/plugin-transform-react-jsx-source": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1",
"@rolldown/pluginutils": "1.0.0-beta.32", "@rolldown/pluginutils": "1.0.0-beta.34",
"@types/babel__core": "^7.20.5", "@types/babel__core": "^7.20.5",
"react-refresh": "^0.17.0" "react-refresh": "^0.17.0"
}, },
@@ -3694,9 +3707,9 @@
} }
}, },
"node_modules/react-router": { "node_modules/react-router": {
"version": "7.8.1", "version": "7.8.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.1.tgz", "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.2.tgz",
"integrity": "sha512-5cy/M8DHcG51/KUIka1nfZ2QeylS4PJRs6TT8I4PF5axVsI5JUxp0hC0NZ/AEEj8Vw7xsEoD7L/6FY+zoYaOGA==", "integrity": "sha512-7M2fR1JbIZ/jFWqelpvSZx+7vd7UlBTfdZqf6OSdF9g6+sfdqJDAWcak6ervbHph200ePlu+7G8LdoiC3ReyAQ==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"cookie": "^1.0.1", "cookie": "^1.0.1",
@@ -3716,12 +3729,12 @@
} }
}, },
"node_modules/react-router-dom": { "node_modules/react-router-dom": {
"version": "7.8.1", "version": "7.8.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.1.tgz", "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.2.tgz",
"integrity": "sha512-NkgBCF3sVgCiAWIlSt89GR2PLaksMpoo3HDCorpRfnCEfdtRPLiuTf+CNXvqZMI5SJLZCLpVCvcZrTdtGW64xQ==", "integrity": "sha512-Z4VM5mKDipal2jQ385H6UBhiiEDlnJPx6jyWsTYoZQdl5TrjxEV2a9yl3Fi60NBJxYzOTGTTHXPi0pdizvTwow==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"react-router": "7.8.1" "react-router": "7.8.2"
}, },
"engines": { "engines": {
"node": ">=20.0.0" "node": ">=20.0.0"
@@ -4517,9 +4530,9 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "7.1.3", "version": "7.1.4",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-7.1.4.tgz",
"integrity": "sha512-OOUi5zjkDxYrKhTV3V7iKsoS37VUM7v40+HuwEmcrsf11Cdx9y3DIr2Px6liIcZFwt3XSRpQvFpL3WVy7ApkGw==", "integrity": "sha512-X5QFK4SGynAeeIt+A7ZWnApdUyHYm+pzv/8/A57LqSGcI88U6R6ipOs3uCesdc6yl7nl+zNO0t8LmqAdXcQihw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {

25
package.json
View File

@@ -10,31 +10,32 @@
"preview": "vite preview" "preview": "vite preview"
}, },
"dependencies": { "dependencies": {
"@gfazioli/mantine-text-animate": "^2.2.5",
"@hello-pangea/dnd": "^18.0.1", "@hello-pangea/dnd": "^18.0.1",
"@mantine/core": "^8.2.7", "@mantine/core": "^8.2.8",
"@mantine/form": "^8.2.7", "@mantine/form": "^8.2.8",
"@mantine/hooks": "^8.2.7", "@mantine/hooks": "^8.2.8",
"@mantine/notifications": "^8.2.7", "@mantine/notifications": "^8.2.8",
"@tanstack/react-query": "^5.85.5", "@tanstack/react-query": "^5.85.9",
"@tanstack/react-query-devtools": "^5.85.5", "@tanstack/react-query-devtools": "^5.85.9",
"@tanstack/react-query-persist-client": "^5.85.5", "@tanstack/react-query-persist-client": "^5.85.9",
"idb-keyval": "^6.2.2", "idb-keyval": "^6.2.2",
"jotai": "^2.13.1", "jotai": "^2.13.1",
"react": "^19.1.1", "react": "^19.1.1",
"react-dom": "^19.1.1", "react-dom": "^19.1.1",
"react-icons": "^5.5.0", "react-icons": "^5.5.0",
"react-router-dom": "^7.8.1", "react-router-dom": "^7.8.2",
"recharts": "^3.1.2" "recharts": "^3.1.2"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "^24.3.0", "@types/node": "^24.3.0",
"@types/react": "^19.1.9", "@types/react": "^19.1.12",
"@types/react-dom": "^19.1.7", "@types/react-dom": "^19.1.9",
"@vitejs/plugin-react": "^5.0.1", "@vitejs/plugin-react": "^5.0.2",
"@vitest/coverage-v8": "^3.2.4", "@vitest/coverage-v8": "^3.2.4",
"@vitest/ui": "^3.2.4", "@vitest/ui": "^3.2.4",
"typescript": "^5.9.2", "typescript": "^5.9.2",
"vite": "^7.1.3", "vite": "^7.1.4",
"vite-plugin-dts": "~4.5.4", "vite-plugin-dts": "~4.5.4",
"vite-tsconfig-paths": "^5.1.4", "vite-tsconfig-paths": "^5.1.4",
"vitest": "^3.2.4" "vitest": "^3.2.4"

1
src/App.tsx
View File

@@ -18,6 +18,7 @@ import {
import { Loading, MainLayout } from './components'; import { Loading, MainLayout } from './components';
import '@mantine/core/styles.css'; import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css'; import '@mantine/notifications/styles.css';
import '@gfazioli/mantine-text-animate/styles.css';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { Homepage, Settings } from 'pages'; import { Homepage, Settings } from 'pages';
import type { Theme, ThemePlaylist } from 'types'; import type { Theme, ThemePlaylist } from 'types';

2
src/components/MainLayout.tsx
View File

@@ -10,7 +10,7 @@ export function MainLayout() {
className={boxClasses.layoutContainer} className={boxClasses.layoutContainer}
style={{ style={{
'--image-background': '--image-background':
theme.backgroundImage === 'none' theme.backgroundImage.toLocaleLowerCase() === 'none'
? undefined ? undefined
: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(../../api/backgroundImages/${theme.backgroundImage})`, : `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(../../api/backgroundImages/${theme.backgroundImage})`,
}} }}

2
src/hooks/useCommonHooks.ts
View File

@@ -8,7 +8,7 @@ import { useMutationAPI } from './useAPI';
export function useCommonHooks() { export function useCommonHooks() {
const { mutateAsync } = useMutationAPI(); const { mutateAsync } = useMutationAPI();
const isMobile = window.matchMedia('(max-width: 600px)').matches; const isMobile = window.matchMedia('(max-width: 600px)').matches;
const [theme, setTheme] = useAtom(appTheme); const [theme, setTheme] = useAtom<Theme>(appTheme);
const [themeName, setThemeName] = useLocalStorage<string>({ const [themeName, setThemeName] = useLocalStorage<string>({
key: 'theme', key: 'theme',
defaultValue: 'random', defaultValue: 'random',

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

@@ -1,5 +1,13 @@
import { Group, type OptionsFilter, Overlay, Select, Stack, Text } from '@mantine/core'; import {
import { useDisclosure } from '@mantine/hooks'; Card,
Group,
type OptionsFilter,
Overlay,
Select,
Stack,
Text,
} from '@mantine/core';
import { useDisclosure, useElementSize } from '@mantine/hooks';
import { HelpModal, WeatherModal } from 'components'; import { HelpModal, WeatherModal } from 'components';
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@@ -9,6 +17,7 @@ import * as vsc from 'react-icons/vsc';
import { selectClasses } from 'styles'; import { selectClasses } from 'styles';
import type { import type {
Application, Application,
Bookmark,
CurrentWeather, CurrentWeather,
ExtendedForecast, ExtendedForecast,
Provider, Provider,
@@ -29,6 +38,7 @@ export default function Search({
closeWeatherModal: () => void; closeWeatherModal: () => void;
openWeatherModal: () => void; openWeatherModal: () => void;
}) { }) {
const { ref, height } = useElementSize();
const allIcons: any = { ...fa6, ...vsc, ...si }; const allIcons: any = { ...fa6, ...vsc, ...si };
const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({ const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
endpoint: 'api/providers', endpoint: 'api/providers',
@@ -37,11 +47,15 @@ export default function Search({
const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({ const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
endpoint: 'api/enabledApplications', endpoint: 'api/enabledApplications',
}); });
const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
endpoint: 'api/bookmarks',
});
const { data: defaultProviderData, isFetched: defaultProviderDataIsFetched } = const { data: defaultProviderData, isFetched: defaultProviderDataIsFetched } =
useQueryAPI({ useQueryAPI({
endpoint: 'api/providers/default', endpoint: 'api/providers/default',
}); });
const [applications, setApplications] = useState<Application[]>([]); const [applications, setApplications] = useState<Application[]>([]);
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
const searchEndpoint = 'api/searchHistory'; const searchEndpoint = 'api/searchHistory';
const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({ const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
endpoint: searchEndpoint, endpoint: searchEndpoint,
@@ -52,7 +66,7 @@ export default function Search({
const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] = const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
useDisclosure(false); useDisclosure(false);
const [dropdownOpened, { open: openDropdown, close: closeDropdown }] = useDisclosure(); const [dropdownOpened, { open: openDropdown, close: closeDropdown }] = useDisclosure();
const [listIndex, setListIndex] = useState(0); const [listIndex, setListIndex] = useState(-1);
const { const {
isMobile, isMobile,
urlPattern, urlPattern,
@@ -73,9 +87,12 @@ export default function Search({
} = useCommonHooks(); } = useCommonHooks();
const [placeholderValue, setPlaceholderValue] = useState<string>(''); const [placeholderValue, setPlaceholderValue] = useState<string>('');
const [value, setValue] = useState(0); const [value, setValue] = useState(0);
const [historyMult, setHistoryMult] = useState(1);
const handleResetSearch = () => { const handleResetSearch = () => {
setSearchValue(''); setSearchValue('');
setListIndex(-1);
setHistoryMult(1);
setProviderLabel(defaultProviderLabel); setProviderLabel(defaultProviderLabel);
setProviderURL(defaultProviderURL); setProviderURL(defaultProviderURL);
}; };
@@ -137,7 +154,7 @@ export default function Search({
if (/^(https?:\/\/).*/i.test(item.target.value)) if (/^(https?:\/\/).*/i.test(item.target.value))
window.location = item.target.value; window.location = item.target.value;
else open(`https://${item.target.value}`, '_self'); else open(`https://${item.target.value}`, '_self');
} else { } else if (item.target.value !== '') {
mutateAsync({ mutateAsync({
method: 'POST', method: 'POST',
endpoint: searchEndpoint, endpoint: searchEndpoint,
@@ -145,13 +162,15 @@ export default function Search({
}).then(() => { }).then(() => {
open(`${providerURL}${subtext}`, '_self'); open(`${providerURL}${subtext}`, '_self');
}); });
} else {
open(`${providerURL}${subtext}`, '_self');
} }
} }
}; };
const handleKeyUp = (item: any) => { const handleKeyUp = (item: any) => {
if (item.code === 'Escape') { if (item.code === 'Escape') {
setListIndex(0); setListIndex(-1);
handleResetSearch(); handleResetSearch();
setPlaceholderValue(''); setPlaceholderValue('');
if (dropdownOpened) { if (dropdownOpened) {
@@ -277,17 +296,28 @@ export default function Search({
}; };
}); });
} }
return options return [
.filter((option: any) => { ...options
return splittedSearch.every((searchWord) => .filter((option: any) => {
option.value return splittedSearch.every((searchWord) =>
.toLowerCase() option.value
.trim() .toLowerCase()
.split(' ') .trim()
.some((word: string) => word.includes(searchWord)), .split(' ')
); .some((word: string) => word.includes(searchWord)),
}) );
.slice(0, 10); })
.slice(0, 10 * historyMult),
{
label: 'Load more history...',
value: 'load',
id: 0,
dateTimeStamp: '',
prefix: '',
provider: '',
searchTerm: '',
},
];
}; };
useEffect(() => { useEffect(() => {
@@ -302,11 +332,23 @@ export default function Search({
} }
}, [applicationData, isApplicationDataFetching]); }, [applicationData, isApplicationDataFetching]);
useEffect(() => {
if (bookmarkData && bookmarksIsFetched) {
setBookmarks(
bookmarkData.filter(
(bookmark: Bookmark) =>
bookmark.enabled === 1 &&
bookmark.name.toLowerCase().includes(searchValue.toLowerCase()),
),
);
}
}, [bookmarksIsFetched, bookmarkData, searchValue]);
useEffect(() => { useEffect(() => {
if (historyData && historyDataIsFetched) { if (historyData && historyDataIsFetched) {
setSearchHistory(historyData); setSearchHistory(historyData);
if (filteredHistory.length === 0) { if (filteredHistory.length === 0) {
setFilteredHistory(historyData.slice(0, 10)); setFilteredHistory(historyData.slice(0, 10 * historyMult));
} }
} }
}, [historyData, historyDataIsFetched]); }, [historyData, historyDataIsFetched]);
@@ -323,15 +365,13 @@ export default function Search({
useEffect(() => { useEffect(() => {
const splittedSearch = searchValue.toLowerCase().trim().split(' '); const splittedSearch = searchValue.toLowerCase().trim().split(' ');
const filtered = searchHistory const filtered = searchHistory.filter((item: SearchHistoryItem) => {
.filter((item: SearchHistoryItem) => { const option = `${item.prefix} ${item.searchTerm}`;
const option = `${item.prefix} ${item.searchTerm}`; const words = option.toLowerCase().trim().split(' ');
const words = option.toLowerCase().trim().split(' '); return splittedSearch.every((searchWord) =>
return splittedSearch.every((searchWord) => words.some((word: string) => word.includes(searchWord)),
words.some((word: string) => word.includes(searchWord)), );
); });
})
.slice(0, 10);
setFilteredHistory(filtered); setFilteredHistory(filtered);
}, [searchValue]); }, [searchValue]);
@@ -344,7 +384,6 @@ export default function Search({
setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search'); setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search');
} }
}, [defaultProviderData, defaultProviderDataIsFetched]); }, [defaultProviderData, defaultProviderDataIsFetched]);
return ( return (
<> <>
{dropdownOpened && <Overlay blur={5} />} {dropdownOpened && <Overlay blur={5} />}
@@ -358,8 +397,12 @@ export default function Search({
display: 'inline-block', display: 'inline-block',
gap: 0, gap: 0,
}} }}
align='center'
justify='center'
w={'100%'}
> >
<Select <Select
ref={ref}
classNames={selectClasses} classNames={selectClasses}
data={searchHistory.map((item: SearchHistoryItem) => ({ data={searchHistory.map((item: SearchHistoryItem) => ({
label: `${item.provider}`, label: `${item.provider}`,
@@ -387,15 +430,47 @@ export default function Search({
searchable searchable
autoFocus={!isMobile} autoFocus={!isMobile}
leftSection={providerLabel} leftSection={providerLabel}
rightSection={<div />} rightSection={searchValue === '' ? <div /> : undefined}
clearable
onClear={handleResetSearch}
clearButtonProps={{
'aria-label': 'Clear search',
style: { color: 'var(--mantine-color-accent-0)', marginRight: '.5rem' },
}}
scrollAreaProps={{ viewportRef: ref }}
renderOption={(item: any) => { renderOption={(item: any) => {
const Icon = allIcons[item.option.icon]; const Icon = allIcons[item.option.icon];
return !searchValue.startsWith('!') ? ( return !searchValue.startsWith('!') ? (
<SearchSelectItem item.option.value === 'load' ? (
item={item} <Group
handleSearchHistoryItem={handleSearchHistoryItem} pos={'relative'}
searchEndpoint={searchEndpoint} m={0}
/> p={0}
gap={0}
w={'100%'}
h={'2rem'}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
setHistoryMult((prev: number) => prev + 1);
}}
>
<Text
w={'100%'}
c={'var(--mantine-color-accent-0)'}
style={{ textAlign: 'center' }}
>
{item.option.label}
</Text>
</Group>
) : (
<SearchSelectItem
item={item}
handleSearchHistoryItem={handleSearchHistoryItem}
searchEndpoint={searchEndpoint}
setSearchValue={setSearchValue}
/>
)
) : ( ) : (
<Group <Group
pos={'relative'} pos={'relative'}
@@ -430,7 +505,7 @@ export default function Search({
}} }}
onBlur={() => { onBlur={() => {
setPlaceholderValue(''); setPlaceholderValue('');
setListIndex(0); setListIndex(-1);
closeDropdown(); closeDropdown();
}} }}
onFocus={() => { onFocus={() => {
@@ -443,9 +518,80 @@ export default function Search({
e.preventDefault(); e.preventDefault();
} }
}} }}
onDoubleClick={() => {
dropdownOpened ? closeDropdown() : openDropdown();
}}
onInput={onInput} onInput={onInput}
onKeyUp={handleKeyUp} onKeyUp={handleKeyUp}
/> />
{dropdownOpened && (
<Group w={'100%'} justify='center'>
<Card
w={'100%'}
mt={`calc(${height}px + 1.5rem)`}
pos={'relative'}
style={{
zIndex: 1000,
opacity: searchValue && dropdownOpened && bookmarks.length > 0 ? 1 : 0,
background: 'transparent',
}}
>
<Stack gap={8}>
<Group
w={'100%'}
p={'1rem'}
style={{
backgroundColor: 'var(--mantine-color-search-0)',
backdropFilter: 'blur(15px) brightness(1.75)',
borderRadius: '10px',
}}
>
<Text c={'var(--mantine-color-primary-0)'} fz={'1.5rem'}>
Recommended items:
</Text>
</Group>
<Group
w={'50%'}
p={'1rem'}
justify='center'
style={{
backgroundColor: 'var(--mantine-color-search-0)',
backdropFilter: 'blur(15px) brightness(1.75)',
borderRadius: '10px',
}}
>
<Stack>
<Text
c={'var(--mantine-color-primary-0)'}
fz={'1.25rem'}
style={{ fontWeight: 'bold', textDecoration: 'underline' }}
>
Bookmarks
</Text>
{bookmarks
.map((bookmark: Bookmark) => (
<Text
key={bookmark.name}
component='a'
href={bookmark.url}
c={'var(--mantine-color-primary-0)'}
style={{
backgroundColor: 'var(--mantine-color-search-0)',
padding: '.5rem',
borderRadius: '10px',
}}
>
{bookmark.name}
</Text>
))
.toSorted((a: any, b: any) => (a.key > b.key ? 1 : -1))
.slice(0, 5)}
</Stack>
</Group>
</Stack>
</Card>
</Group>
)}
<HelpModal <HelpModal
handleResetSearch={handleResetSearch} handleResetSearch={handleResetSearch}
applicationData={applications} applicationData={applications}

48
src/pages/homepage/components/Search/SearchSelectItem.tsx
View File

@@ -1,11 +1,16 @@
import { ActionIcon, Group, Text } from '@mantine/core'; import { ActionIcon, Group, Text } from '@mantine/core';
import { useCommonHooks, useMutationAPI } from 'hooks'; import { useCommonHooks, useMutationAPI } from 'hooks';
import { useState } from 'react'; import { useState } from 'react';
import { FiEdit, FiTrash } from 'react-icons/fi'; import { FiArrowUpRight, FiTrash } from 'react-icons/fi';
import { actionIconClasses } from 'styles'; import { actionIconClasses } from 'styles';
function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any) { function SearchSelectItem({
const { isMobile, theme, setSearchValue } = useCommonHooks(); item,
handleSearchHistoryItem,
searchEndpoint,
setSearchValue,
}: any) {
const { isMobile, theme } = useCommonHooks();
const { mutateAsync } = useMutationAPI(); const { mutateAsync } = useMutationAPI();
const [showFillButton, setShowFillButton] = useState(false); const [showFillButton, setShowFillButton] = useState(false);
const m = new Date(item.option.dateTimeStamp); const m = new Date(item.option.dateTimeStamp);
@@ -17,11 +22,11 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
const dateString = isMobile const dateString = isMobile
? `${month}/${day}/${year}` ? `${month}/${day}/${year}`
: `${month}/${day}/${year} ${hours}:${minutes}`; : `${month}/${day}/${year} ${hours}:${minutes}`;
return ( return (
<Group <Group
w={'100%'} w={'100%'}
display={'flex'} display={'flex'}
justify={'space-between'}
gap={0} gap={0}
onClick={() => { onClick={() => {
handleSearchHistoryItem(item); handleSearchHistoryItem(item);
@@ -33,7 +38,7 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
setShowFillButton(false); setShowFillButton(false);
}} }}
> >
<Group m={0} p={0} miw={'160px'}> <Group m={0} p={0} w={'160px'}>
<Text <Text
style={{ style={{
backgroundColor: `${theme.primaryColor}33`, backgroundColor: `${theme.primaryColor}33`,
@@ -44,25 +49,13 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
> >
{item.option.provider} {item.option.provider}
</Text> </Text>
{showFillButton && (
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
}}
>
<FiEdit />
</ActionIcon>
)}
</Group> </Group>
<Group <Group
m={0} m={0}
p={0} p={0}
gap={0} gap={0}
justify='space-between' justify='space-between'
w={'65%'} w={'calc(100% - 160px)'}
style={{ style={{
whiteSpace: 'nowrap', whiteSpace: 'nowrap',
overflow: 'hidden', overflow: 'hidden',
@@ -90,8 +83,19 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
{dateString} {dateString}
</Text> </Text>
</Group> </Group>
<Group m={0} p={0} right={'1rem'} w={'24px'}> {showFillButton && (
{showFillButton && ( <Group m={0} p={0} gap={0} right={'8rem'} w={'fit-content'} pos={'absolute'}>
<ActionIcon
className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses}
onClick={(e) => {
e.stopPropagation();
setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
}}
>
<FiArrowUpRight />
</ActionIcon>
<ActionIcon <ActionIcon
className={actionIconClasses.selectOptionActions} className={actionIconClasses.selectOptionActions}
classNames={actionIconClasses} classNames={actionIconClasses}
@@ -106,8 +110,8 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
> >
<FiTrash /> <FiTrash />
</ActionIcon> </ActionIcon>
)} </Group>
</Group> )}
</Group> </Group>
); );
} }

286
src/pages/homepage/components/SettingsButton/ThemingCard.tsx
View File

@@ -1,3 +1,4 @@
import { useTextTicker } from '@gfazioli/mantine-text-animate';
import { import {
ActionIcon, ActionIcon,
type ComboboxItem, type ComboboxItem,
@@ -12,7 +13,7 @@ import { useCommonHooks, useQueryAPI } from 'hooks';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { FaDice } from 'react-icons/fa'; import { FaDice } from 'react-icons/fa';
import { FiShuffle } from 'react-icons/fi'; import { FiShuffle } from 'react-icons/fi';
import { actionIconClasses, selectClasses, stackClasses } from 'styles'; import { actionIconClasses, selectClasses, stackClasses, textClasses } from 'styles';
import type { Theme, ThemePlaylist } from 'types'; import type { Theme, ThemePlaylist } from 'types';
function ThemingCard() { function ThemingCard() {
@@ -38,43 +39,46 @@ function ThemingCard() {
currentThemePlaylist, currentThemePlaylist,
setCurrentThemePlaylist, setCurrentThemePlaylist,
} = useCommonHooks(); } = useCommonHooks();
const [current, setCurrent] = useState<string>(theme.name);
const { text, isAnimating, start, stop } = useTextTicker({
initialText: 'target',
value: theme.name,
delay: 0,
speed: 1,
easing: 'ease-in-out',
animate: current !== theme.name,
});
useEffect(() => {
if (theme.name !== current) {
start();
} else {
setCurrent(theme.name);
stop();
}
}, [theme]);
return ( return (
<Stack <Stack
gap={0} gap={0}
justify='space-between'
className={stackClasses.menuStack} className={stackClasses.menuStack}
classNames={stackClasses} classNames={stackClasses}
pos={'relative'}
style={{ aspectRatio: isMobile ? undefined : '1/1' }} style={{ aspectRatio: isMobile ? undefined : '1/1' }}
> >
<Menu.Label pb={'.25rem'}>Themes</Menu.Label> <Menu.Label pb={'2rem'}>Themes</Menu.Label>
<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'> <Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} h={'100%'} gap={0}>
<Tooltip <Stack gap={0}>
label='Shuffle Themes' <Text className={textClasses.currentTheme} classNames={textClasses}>
c={'var(--mantine-color-primary-0)'} Current theme:
bg={'var(--mantine-color-background-0)'} </Text>
withArrow <Text className={textClasses.themeName} classNames={textClasses}>
> {text}
<ActionIcon </Text>
className={actionIconClasses.menuActions} </Stack>
classNames={actionIconClasses}
disabled={currentThemePlaylist === 'Time of Day'}
style={{
backgroundColor:
currentTheme === 'random'
? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
: 'transparent',
color:
currentTheme === 'random'
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-primary-0)',
}}
onClick={() => {
setCurrentTheme(currentTheme === 'random' ? theme.name : 'random');
setCurrentThemePlaylist('All');
}}
>
<FiShuffle />
</ActionIcon>
</Tooltip>
<Tooltip <Tooltip
label='Random Theme' label='Random Theme'
c={'var(--mantine-color-primary-0)'} c={'var(--mantine-color-primary-0)'}
@@ -84,11 +88,29 @@ function ThemingCard() {
<ActionIcon <ActionIcon
className={actionIconClasses.menuActions} className={actionIconClasses.menuActions}
classNames={actionIconClasses} classNames={actionIconClasses}
h={40}
style={{ style={{
backgroundColor: 'transparent', backgroundColor: 'transparent',
color: 'var(--mantine-color-primary-0)', color: 'var(--mantine-color-primary-0)',
borderTopRightRadius: 0,
borderTopLeftRadius: 0,
borderBottomLeftRadius: '10px',
borderBottomRightRadius: '10px',
position: 'absolute',
right: 0,
}} }}
disabled={currentThemePlaylist === 'Time of Day'} styles={{
icon: {
width: 'fit-content',
height: 'fit-content',
position: 'absolute',
padding: 8,
right: 2,
bottom: 2,
borderRadius: '50%',
},
}}
disabled={currentThemePlaylist === 'Time of Day' || isAnimating}
onClick={() => { onClick={() => {
const themeList = JSON.parse( const themeList = JSON.parse(
themePlaylistData?.find( themePlaylistData?.find(
@@ -119,81 +141,139 @@ function ThemingCard() {
} }
}} }}
> >
<FaDice /> <FaDice size={20} />
</ActionIcon> </ActionIcon>
</Tooltip> </Tooltip>
</Group> </Group>
<Text fw={'bold'} fz={'1.125rem'}> <Group justify='space-between' pos={'relative'} gap={0}>
Currently:{' '} <Select
</Text> label='Current Playlist:'
{theme.name} placeholder='Pick a playlist...'
<Text fw={'bold'} fz={'1.125rem'}> mb={'.25rem'}
Playlist:{' '} ml={'.25rem'}
</Text> value={currentThemePlaylist}
<Select data={[
labelProps={{ display: 'none' }} { value: 'All', label: 'All' },
placeholder='Pick a playlist...' {
value={currentThemePlaylist} value: 'Backgrounds',
data={[ label: 'Backgrounds',
{ value: 'All', label: 'All' }, disabled:
{ allThemes.filter(
value: 'Backgrounds', (a: any) => !a.backgroundImage.toLowerCase().includes('none'),
label: 'Backgrounds', ).length === 0,
disabled: },
allThemes.filter( {
(a: any) => !a.backgroundImage.toLowerCase().includes('none'), value: 'No Backgrounds',
).length === 0, label: 'No Backgrounds',
}, disabled:
{ allThemes.filter((a: any) =>
value: 'No Backgrounds', a.backgroundImage.toLowerCase().includes('none'),
label: 'No Backgrounds', ).length === 0,
disabled: },
allThemes.filter((a: any) => ...(themePlaylistData
a.backgroundImage.toLowerCase().includes('none'), ?.map((playlist: ThemePlaylist) => {
).length === 0, return {
}, value: playlist.name,
...(themePlaylistData label: playlist.name,
?.map((playlist: ThemePlaylist) => { disabled: JSON.parse(playlist.themeList).length === 0,
return { };
value: playlist.name, })
label: playlist.name, .toSorted((a: ComboboxItem, b: ComboboxItem) =>
disabled: JSON.parse(playlist.themeList).length === 0, a.label.localeCompare(b.label),
}; ) ?? []),
}) ]}
.toSorted((a: ComboboxItem, b: ComboboxItem) => classNames={{
a.label.localeCompare(b.label), wrapper: selectClasses.menuSelectWrapper,
) ?? []), root: selectClasses.menuSelectRoot,
]} input: selectClasses.menuSelectInput,
w='92%' label: selectClasses.menuSelectLabel,
classNames={{ options: selectClasses.menuSelectOptions,
root: selectClasses.menuSelectRoot, option: selectClasses.menuSelectOption,
input: selectClasses.menuSelectInput, }}
label: selectClasses.menuSelectLabel, labelProps={{ top: 8, left: 12 }}
options: selectClasses.menuSelectOptions, comboboxProps={{
option: selectClasses.menuSelectOption, withinPortal: false,
}} position: 'top',
comboboxProps={{ width: '100%',
withinPortal: false, }}
position: 'top', w={'70%'}
}} style={{
onChange={(_value, option: ComboboxItem) => { zIndex: 2,
setCurrentThemePlaylist(option.value); }}
if (option.value !== 'Time of Day') { styles={
setThemeName('random'); theme.textShadowsEnabled
} else { ? {
const themeList = JSON.parse( label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
themePlaylistData.find((t: ThemePlaylist) => t.name === 'Time of Day') }
.themeList, : undefined
);
setThemeName(
allThemeData.find(
(t: Theme) =>
t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
).name,
);
} }
}} onChange={(_value, option: ComboboxItem) => {
/> setCurrentThemePlaylist(option.value);
if (option.value !== 'Time of Day') {
setThemeName('random');
} else {
const themeList = JSON.parse(
themePlaylistData.find((t: ThemePlaylist) => t.name === 'Time of Day')
.themeList,
);
setThemeName(
allThemeData.find(
(t: Theme) =>
t.id === Number(themeList[Math.floor(new Date().getHours() / 6)]),
).name,
);
}
}}
/>
<Tooltip
label='Shuffle Playlist'
c={'var(--mantine-color-primary-0)'}
bg={'var(--mantine-color-background-0)'}
withArrow
>
<ActionIcon
className={actionIconClasses.menuActions}
classNames={actionIconClasses}
disabled={currentThemePlaylist === 'Time of Day' || isAnimating}
h={40}
style={{
backgroundColor: 'transparent',
color:
currentTheme === 'random'
? 'var(--mantine-color-accent-0)'
: 'var(--mantine-color-primary-0)',
borderTopRightRadius: 0,
borderTopLeftRadius: 0,
borderBottomLeftRadius: '10px',
borderBottomRightRadius: '10px',
position: 'absolute',
right: 0,
bottom: 0,
}}
styles={{
icon: {
backgroundColor:
currentTheme === 'random'
? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
: 'transparent',
width: 'fit-content',
height: 'fit-content',
position: 'absolute',
padding: 8,
right: 2,
bottom: 2,
borderRadius: '50%',
},
}}
onClick={() => {
setCurrentTheme(currentTheme === 'random' ? theme.name : 'random');
setCurrentThemePlaylist('All');
}}
>
<FiShuffle size={20} />
</ActionIcon>
</Tooltip>
</Group>
</Stack> </Stack>
); );
} }

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

@@ -141,6 +141,44 @@
} }
} }
.currentTheme {
&.root {
position: absolute;
font-size: .75rem !important;
padding-left: .5rem;
padding-right: .5rem;
padding-top: .125rem;
padding-bottom: .125rem;
margin-left: -8px;
border-radius: 8px;
background-color: var(--mantine-color-primary-0);
color: var(--mantine-color-background-0);
z-index: 1;
top: 24px;
left: 12px;
}
}
.themeName {
&.root {
background-color: var(--mantine-color-background-0);
font-size: 12px;
font-weight: bold;
color: var(--mantine-color-primary-0);
margin-left: 2px;
padding-left: 8px;
padding-right: 8px;
padding-top: 8px;
padding-bottom: 8px;
border: 1px solid var(--mantine-color-border-0);
border-radius: 4px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap !important;
width: 102px;
}
}
.autoScrollText { .autoScrollText {
&.root { &.root {
display: inline-block; display: inline-block;