Updates to search component
This commit is contained in:
Sean Edmunds
161
package-lock.json
generated
161
package-lock.json
generated
@@ -8,31 +8,32 @@
|
||||
"name": "triggerfrontend",
|
||||
"version": "1.0.0",
|
||||
"dependencies": {
|
||||
"@gfazioli/mantine-text-animate": "^2.2.5",
|
||||
"@hello-pangea/dnd": "^18.0.1",
|
||||
"@mantine/core": "^8.2.7",
|
||||
"@mantine/form": "^8.2.7",
|
||||
"@mantine/hooks": "^8.2.7",
|
||||
"@mantine/notifications": "^8.2.7",
|
||||
"@tanstack/react-query": "^5.85.5",
|
||||
"@tanstack/react-query-devtools": "^5.85.5",
|
||||
"@tanstack/react-query-persist-client": "^5.85.5",
|
||||
"@mantine/core": "^8.2.8",
|
||||
"@mantine/form": "^8.2.8",
|
||||
"@mantine/hooks": "^8.2.8",
|
||||
"@mantine/notifications": "^8.2.8",
|
||||
"@tanstack/react-query": "^5.85.9",
|
||||
"@tanstack/react-query-devtools": "^5.85.9",
|
||||
"@tanstack/react-query-persist-client": "^5.85.9",
|
||||
"idb-keyval": "^6.2.2",
|
||||
"jotai": "^2.13.1",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^7.8.1",
|
||||
"react-router-dom": "^7.8.2",
|
||||
"recharts": "^3.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.3.0",
|
||||
"@types/react": "^19.1.9",
|
||||
"@types/react-dom": "^19.1.7",
|
||||
"@vitejs/plugin-react": "^5.0.1",
|
||||
"@types/react": "^19.1.12",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@vitejs/plugin-react": "^5.0.2",
|
||||
"@vitest/coverage-v8": "^3.2.4",
|
||||
"@vitest/ui": "^3.2.4",
|
||||
"typescript": "^5.9.2",
|
||||
"vite": "^7.1.3",
|
||||
"vite": "^7.1.4",
|
||||
"vite-plugin-dts": "~4.5.4",
|
||||
"vite-tsconfig-paths": "^5.1.4",
|
||||
"vitest": "^3.2.4"
|
||||
@@ -822,6 +823,18 @@
|
||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
|
||||
"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": {
|
||||
"version": "18.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@hello-pangea/dnd/-/dnd-18.0.1.tgz",
|
||||
@@ -930,9 +943,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/core": {
|
||||
"version": "8.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.2.7.tgz",
|
||||
"integrity": "sha512-gfVDf/qFxt66PrsktYEJt/MZbiNo3KCx6PxKKcskSe/J2g5g1kf4nhhvBFlYaicDX93PfT4MgTnipyfJQ09NDA==",
|
||||
"version": "8.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/core/-/core-8.2.8.tgz",
|
||||
"integrity": "sha512-dybAXrlQ+QiIhpnVCkdH6P4Sjm9I9RymYXfDp97oj9KfGRMEJGLDdPAwp/2GhXe7UdDkzqD48JCkbfRWF2Q+qA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@floating-ui/react": "^0.26.28",
|
||||
@@ -943,15 +956,15 @@
|
||||
"type-fest": "^4.27.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mantine/hooks": "8.2.7",
|
||||
"@mantine/hooks": "8.2.8",
|
||||
"react": "^18.x || ^19.x",
|
||||
"react-dom": "^18.x || ^19.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/form": {
|
||||
"version": "8.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.2.7.tgz",
|
||||
"integrity": "sha512-bhOygfZMo+vOX37xBhUCCiOdudNMFQzxm/DOHzwIhGsrmgdhyV0Kof/+zDEfj1/09GtjFP9ecYvmnL5zhZv+6w==",
|
||||
"version": "8.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/form/-/form-8.2.8.tgz",
|
||||
"integrity": "sha512-edigaUCmyxoPcqhMgkgJHXRgbzR1tym88xQNNgfGA1KYc9gr0BTk/3dOa5B93HIVdO9/DEXZwYKN4cjrKPDY+g==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
@@ -962,34 +975,34 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/hooks": {
|
||||
"version": "8.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.2.7.tgz",
|
||||
"integrity": "sha512-DV0RdFBI0g0Bu7CWipIIiPK6d8+pTNXTbIOF4N+VZ6LAIpZPk5ldtb8sGaTVyQtQhEjrChrCxfkrLiNGTOAwiw==",
|
||||
"version": "8.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-8.2.8.tgz",
|
||||
"integrity": "sha512-KK1krCcXizWT6JF8gWexv58imQBbviylAJqSqdZ4zUPgrpe81ehMyfxo5Z9EZsnSwMxkB4RLMhCCJhC5g8GvLA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^18.x || ^19.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/notifications": {
|
||||
"version": "8.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.2.7.tgz",
|
||||
"integrity": "sha512-KXtueabwBIbgl1M5vmjzGBt88AOwhxkhmvQhEDC6UvGPtIlf4jw0BT0i3a54AKc1YwSCs0bUd91jKg5Oem2wpw==",
|
||||
"version": "8.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-8.2.8.tgz",
|
||||
"integrity": "sha512-luNksAUkROoMzKCB/30nQ8o38wt54ktylbpBcTrAcjE1q00nH/IEYLS58iUYGf8l/xGBV1KH8jgSik58iqk++A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@mantine/store": "8.2.7",
|
||||
"@mantine/store": "8.2.8",
|
||||
"react-transition-group": "4.4.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mantine/core": "8.2.7",
|
||||
"@mantine/hooks": "8.2.7",
|
||||
"@mantine/core": "8.2.8",
|
||||
"@mantine/hooks": "8.2.8",
|
||||
"react": "^18.x || ^19.x",
|
||||
"react-dom": "^18.x || ^19.x"
|
||||
}
|
||||
},
|
||||
"node_modules/@mantine/store": {
|
||||
"version": "8.2.7",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.2.7.tgz",
|
||||
"integrity": "sha512-TQye6nRFDOQ+HQovQSjQlFHrivn6NqdiZAuytszOnB9jqgKSzPqQxK0mEynAxJsomaO9K1rrj7clZcPNgZc+Pw==",
|
||||
"version": "8.2.8",
|
||||
"resolved": "https://registry.npmjs.org/@mantine/store/-/store-8.2.8.tgz",
|
||||
"integrity": "sha512-xma5vcJlcR2UN6NZj0Rhskfppmz6wUTY/52EBU9sKZw60e1iiuTX2Bk/sfUa34VKZF4cRS46VLz2qstyCJne4Q==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^18.x || ^19.x"
|
||||
@@ -1186,9 +1199,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@rolldown/pluginutils": {
|
||||
"version": "1.0.0-beta.32",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.32.tgz",
|
||||
"integrity": "sha512-QReCdvxiUZAPkvp1xpAg62IeNzykOFA6syH2CnClif4YmALN1XKpB39XneL80008UbtMShthSVDKmrx05N1q/g==",
|
||||
"version": "1.0.0-beta.34",
|
||||
"resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.34.tgz",
|
||||
"integrity": "sha512-LyAREkZHP5pMom7c24meKmJCdhf2hEyvam2q0unr3or9ydwDL+DJ8chTF6Av/RFPb3rH8UFBdMzO5MxTZW97oA==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
@@ -1629,9 +1642,9 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@tanstack/query-core": {
|
||||
"version": "5.85.5",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.5.tgz",
|
||||
"integrity": "sha512-KO0WTob4JEApv69iYp1eGvfMSUkgw//IpMnq+//cORBzXf0smyRwPLrUvEe5qtAEGjwZTXrjxg+oJNP/C00t6w==",
|
||||
"version": "5.85.9",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.85.9.tgz",
|
||||
"integrity": "sha512-5fxb9vwyftYE6KFLhhhDyLr8NO75+Wpu7pmTo+TkwKmMX2oxZDoLwcqGP8ItKSpUMwk3urWgQDZfyWr5Jm9LsQ==",
|
||||
"license": "MIT",
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@@ -1649,12 +1662,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/query-persist-client-core": {
|
||||
"version": "5.85.5",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.85.5.tgz",
|
||||
"integrity": "sha512-2JQiyiTVaaUu8pwPqOp6tjNa64ZN+0T9eZ3lfksV4le1VuG99fTcAYmZFIydvzwWlSM7GEF/1kpl5bwW2Y1qfQ==",
|
||||
"version": "5.85.9",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.85.9.tgz",
|
||||
"integrity": "sha512-er7HfMjn6TQanWG5nudjRNZbo7ahf7IIdWN5kU7L2qRZ2kcw89TQZAZ74GIQsumOXZD7sUcHG2dylveFZNxlZA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-core": "5.85.5"
|
||||
"@tanstack/query-core": "5.85.9"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@@ -1662,12 +1675,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query": {
|
||||
"version": "5.85.5",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.5.tgz",
|
||||
"integrity": "sha512-/X4EFNcnPiSs8wM2v+b6DqS5mmGeuJQvxBglmDxl6ZQb5V26ouD2SJYAcC3VjbNwqhY2zjxVD15rDA5nGbMn3A==",
|
||||
"version": "5.85.9",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.85.9.tgz",
|
||||
"integrity": "sha512-2T5zgSpcOZXGkH/UObIbIkGmUPQqZqn7esVQFXLOze622h4spgWf5jmvrqAo9dnI13/hyMcNsF1jsoDcb59nJQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-core": "5.85.5"
|
||||
"@tanstack/query-core": "5.85.9"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
@@ -1678,9 +1691,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query-devtools": {
|
||||
"version": "5.85.5",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.85.5.tgz",
|
||||
"integrity": "sha512-6Ol6Q+LxrCZlQR4NoI5181r+ptTwnlPG2t7H9Sp3klxTBhYGunONqcgBn2YKRPsaKiYM8pItpKMdMXMEINntMQ==",
|
||||
"version": "5.85.9",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.85.9.tgz",
|
||||
"integrity": "sha512-BAdhgwpzxkC1vdyCfiPbbC7FU/t/x6q2d9ZyhON/WykVUdznD69nlppuWpSIlIGipdRG7sF6tRZ6x3GtSq0EUQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-devtools": "5.84.0"
|
||||
@@ -1690,24 +1703,24 @@
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tanstack/react-query": "^5.85.5",
|
||||
"@tanstack/react-query": "^5.85.9",
|
||||
"react": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
"node_modules/@tanstack/react-query-persist-client": {
|
||||
"version": "5.85.5",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.85.5.tgz",
|
||||
"integrity": "sha512-KzISZPtJtWZAwH/Ln1FclaiHVwdeV04WX7wUYLe1vw7zyfcPljHeyXlmVf8nxhFm8ujMBdGQVzP2iNn6ehzjQA==",
|
||||
"version": "5.85.9",
|
||||
"resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.85.9.tgz",
|
||||
"integrity": "sha512-h75Xyt/XDtk1oRmli5znQRXclT/iZpseTK7ScqEjaiZmPSREgg2mJb1blo2SB1swSidDNsCtnENLNH43PP0/9w==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tanstack/query-persist-client-core": "5.85.5"
|
||||
"@tanstack/query-persist-client-core": "5.85.9"
|
||||
},
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/tannerlinsley"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@tanstack/react-query": "^5.85.5",
|
||||
"@tanstack/react-query": "^5.85.9",
|
||||
"react": "^18 || ^19"
|
||||
}
|
||||
},
|
||||
@@ -1856,9 +1869,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react": {
|
||||
"version": "19.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.9.tgz",
|
||||
"integrity": "sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==",
|
||||
"version": "19.1.12",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
|
||||
"integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
@@ -1866,9 +1879,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-dom": {
|
||||
"version": "19.1.7",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.7.tgz",
|
||||
"integrity": "sha512-i5ZzwYpqjmrKenzkoLM2Ibzt6mAsM7pxB6BCIouEVVmgiqaMj1TjaK7hnA36hbW5aZv20kx7Lw6hWzPWg0Rurw==",
|
||||
"version": "19.1.9",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.9.tgz",
|
||||
"integrity": "sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
@@ -1882,16 +1895,16 @@
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@vitejs/plugin-react": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.0.1.tgz",
|
||||
"integrity": "sha512-DE4UNaBXwtVoDJ0ccBdLVjFTWL70NRuWNCxEieTI3lrq9ORB9aOCQEKstwDXBl87NvFdbqh/p7eINGyj0BthJA==",
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.0.2.tgz",
|
||||
"integrity": "sha512-tmyFgixPZCx2+e6VO9TNITWcCQl8+Nl/E8YbAyPVv85QCc7/A3JrdfG2A8gIzvVhWuzMOVrFW1aReaNxrI6tbw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.28.3",
|
||||
"@babel/plugin-transform-react-jsx-self": "^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",
|
||||
"react-refresh": "^0.17.0"
|
||||
},
|
||||
@@ -3694,9 +3707,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-router": {
|
||||
"version": "7.8.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.1.tgz",
|
||||
"integrity": "sha512-5cy/M8DHcG51/KUIka1nfZ2QeylS4PJRs6TT8I4PF5axVsI5JUxp0hC0NZ/AEEj8Vw7xsEoD7L/6FY+zoYaOGA==",
|
||||
"version": "7.8.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router/-/react-router-7.8.2.tgz",
|
||||
"integrity": "sha512-7M2fR1JbIZ/jFWqelpvSZx+7vd7UlBTfdZqf6OSdF9g6+sfdqJDAWcak6ervbHph200ePlu+7G8LdoiC3ReyAQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"cookie": "^1.0.1",
|
||||
@@ -3716,12 +3729,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/react-router-dom": {
|
||||
"version": "7.8.1",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.1.tgz",
|
||||
"integrity": "sha512-NkgBCF3sVgCiAWIlSt89GR2PLaksMpoo3HDCorpRfnCEfdtRPLiuTf+CNXvqZMI5SJLZCLpVCvcZrTdtGW64xQ==",
|
||||
"version": "7.8.2",
|
||||
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.8.2.tgz",
|
||||
"integrity": "sha512-Z4VM5mKDipal2jQ385H6UBhiiEDlnJPx6jyWsTYoZQdl5TrjxEV2a9yl3Fi60NBJxYzOTGTTHXPi0pdizvTwow==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"react-router": "7.8.1"
|
||||
"react-router": "7.8.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0"
|
||||
@@ -4517,9 +4530,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/vite": {
|
||||
"version": "7.1.3",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.3.tgz",
|
||||
"integrity": "sha512-OOUi5zjkDxYrKhTV3V7iKsoS37VUM7v40+HuwEmcrsf11Cdx9y3DIr2Px6liIcZFwt3XSRpQvFpL3WVy7ApkGw==",
|
||||
"version": "7.1.4",
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.1.4.tgz",
|
||||
"integrity": "sha512-X5QFK4SGynAeeIt+A7ZWnApdUyHYm+pzv/8/A57LqSGcI88U6R6ipOs3uCesdc6yl7nl+zNO0t8LmqAdXcQihw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
|
||||
25
package.json
25
package.json
@@ -10,31 +10,32 @@
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@gfazioli/mantine-text-animate": "^2.2.5",
|
||||
"@hello-pangea/dnd": "^18.0.1",
|
||||
"@mantine/core": "^8.2.7",
|
||||
"@mantine/form": "^8.2.7",
|
||||
"@mantine/hooks": "^8.2.7",
|
||||
"@mantine/notifications": "^8.2.7",
|
||||
"@tanstack/react-query": "^5.85.5",
|
||||
"@tanstack/react-query-devtools": "^5.85.5",
|
||||
"@tanstack/react-query-persist-client": "^5.85.5",
|
||||
"@mantine/core": "^8.2.8",
|
||||
"@mantine/form": "^8.2.8",
|
||||
"@mantine/hooks": "^8.2.8",
|
||||
"@mantine/notifications": "^8.2.8",
|
||||
"@tanstack/react-query": "^5.85.9",
|
||||
"@tanstack/react-query-devtools": "^5.85.9",
|
||||
"@tanstack/react-query-persist-client": "^5.85.9",
|
||||
"idb-keyval": "^6.2.2",
|
||||
"jotai": "^2.13.1",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-icons": "^5.5.0",
|
||||
"react-router-dom": "^7.8.1",
|
||||
"react-router-dom": "^7.8.2",
|
||||
"recharts": "^3.1.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^24.3.0",
|
||||
"@types/react": "^19.1.9",
|
||||
"@types/react-dom": "^19.1.7",
|
||||
"@vitejs/plugin-react": "^5.0.1",
|
||||
"@types/react": "^19.1.12",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@vitejs/plugin-react": "^5.0.2",
|
||||
"@vitest/coverage-v8": "^3.2.4",
|
||||
"@vitest/ui": "^3.2.4",
|
||||
"typescript": "^5.9.2",
|
||||
"vite": "^7.1.3",
|
||||
"vite": "^7.1.4",
|
||||
"vite-plugin-dts": "~4.5.4",
|
||||
"vite-tsconfig-paths": "^5.1.4",
|
||||
"vitest": "^3.2.4"
|
||||
|
||||
@@ -18,6 +18,7 @@ import {
|
||||
import { Loading, MainLayout } from './components';
|
||||
import '@mantine/core/styles.css';
|
||||
import '@mantine/notifications/styles.css';
|
||||
import '@gfazioli/mantine-text-animate/styles.css';
|
||||
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
|
||||
import { Homepage, Settings } from 'pages';
|
||||
import type { Theme, ThemePlaylist } from 'types';
|
||||
|
||||
@@ -10,7 +10,7 @@ export function MainLayout() {
|
||||
className={boxClasses.layoutContainer}
|
||||
style={{
|
||||
'--image-background':
|
||||
theme.backgroundImage === 'none'
|
||||
theme.backgroundImage.toLocaleLowerCase() === 'none'
|
||||
? undefined
|
||||
: `linear-gradient(${theme.backgroundColor}33, ${theme.backgroundColor}33), url(../../api/backgroundImages/${theme.backgroundImage})`,
|
||||
}}
|
||||
|
||||
@@ -8,7 +8,7 @@ import { useMutationAPI } from './useAPI';
|
||||
export function useCommonHooks() {
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
const isMobile = window.matchMedia('(max-width: 600px)').matches;
|
||||
const [theme, setTheme] = useAtom(appTheme);
|
||||
const [theme, setTheme] = useAtom<Theme>(appTheme);
|
||||
const [themeName, setThemeName] = useLocalStorage<string>({
|
||||
key: 'theme',
|
||||
defaultValue: 'random',
|
||||
|
||||
@@ -1,5 +1,13 @@
|
||||
import { Group, type OptionsFilter, Overlay, Select, Stack, Text } from '@mantine/core';
|
||||
import { useDisclosure } from '@mantine/hooks';
|
||||
import {
|
||||
Card,
|
||||
Group,
|
||||
type OptionsFilter,
|
||||
Overlay,
|
||||
Select,
|
||||
Stack,
|
||||
Text,
|
||||
} from '@mantine/core';
|
||||
import { useDisclosure, useElementSize } from '@mantine/hooks';
|
||||
import { HelpModal, WeatherModal } from 'components';
|
||||
import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
@@ -9,6 +17,7 @@ import * as vsc from 'react-icons/vsc';
|
||||
import { selectClasses } from 'styles';
|
||||
import type {
|
||||
Application,
|
||||
Bookmark,
|
||||
CurrentWeather,
|
||||
ExtendedForecast,
|
||||
Provider,
|
||||
@@ -29,6 +38,7 @@ export default function Search({
|
||||
closeWeatherModal: () => void;
|
||||
openWeatherModal: () => void;
|
||||
}) {
|
||||
const { ref, height } = useElementSize();
|
||||
const allIcons: any = { ...fa6, ...vsc, ...si };
|
||||
const { data: providerData, isFetched: providerDataIsFetched } = useQueryAPI({
|
||||
endpoint: 'api/providers',
|
||||
@@ -37,11 +47,15 @@ export default function Search({
|
||||
const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({
|
||||
endpoint: 'api/enabledApplications',
|
||||
});
|
||||
const { data: bookmarkData, isFetched: bookmarksIsFetched } = useQueryAPI({
|
||||
endpoint: 'api/bookmarks',
|
||||
});
|
||||
const { data: defaultProviderData, isFetched: defaultProviderDataIsFetched } =
|
||||
useQueryAPI({
|
||||
endpoint: 'api/providers/default',
|
||||
});
|
||||
const [applications, setApplications] = useState<Application[]>([]);
|
||||
const [bookmarks, setBookmarks] = useState<Bookmark[]>([]);
|
||||
const searchEndpoint = 'api/searchHistory';
|
||||
const { data: historyData, isFetched: historyDataIsFetched } = useQueryAPI({
|
||||
endpoint: searchEndpoint,
|
||||
@@ -52,7 +66,7 @@ export default function Search({
|
||||
const [providerModalOpened, { open: openProviderModal, close: closeProviderModal }] =
|
||||
useDisclosure(false);
|
||||
const [dropdownOpened, { open: openDropdown, close: closeDropdown }] = useDisclosure();
|
||||
const [listIndex, setListIndex] = useState(0);
|
||||
const [listIndex, setListIndex] = useState(-1);
|
||||
const {
|
||||
isMobile,
|
||||
urlPattern,
|
||||
@@ -73,9 +87,12 @@ export default function Search({
|
||||
} = useCommonHooks();
|
||||
const [placeholderValue, setPlaceholderValue] = useState<string>('');
|
||||
const [value, setValue] = useState(0);
|
||||
const [historyMult, setHistoryMult] = useState(1);
|
||||
|
||||
const handleResetSearch = () => {
|
||||
setSearchValue('');
|
||||
setListIndex(-1);
|
||||
setHistoryMult(1);
|
||||
setProviderLabel(defaultProviderLabel);
|
||||
setProviderURL(defaultProviderURL);
|
||||
};
|
||||
@@ -137,7 +154,7 @@ export default function Search({
|
||||
if (/^(https?:\/\/).*/i.test(item.target.value))
|
||||
window.location = item.target.value;
|
||||
else open(`https://${item.target.value}`, '_self');
|
||||
} else {
|
||||
} else if (item.target.value !== '') {
|
||||
mutateAsync({
|
||||
method: 'POST',
|
||||
endpoint: searchEndpoint,
|
||||
@@ -145,13 +162,15 @@ export default function Search({
|
||||
}).then(() => {
|
||||
open(`${providerURL}${subtext}`, '_self');
|
||||
});
|
||||
} else {
|
||||
open(`${providerURL}${subtext}`, '_self');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const handleKeyUp = (item: any) => {
|
||||
if (item.code === 'Escape') {
|
||||
setListIndex(0);
|
||||
setListIndex(-1);
|
||||
handleResetSearch();
|
||||
setPlaceholderValue('');
|
||||
if (dropdownOpened) {
|
||||
@@ -277,7 +296,8 @@ export default function Search({
|
||||
};
|
||||
});
|
||||
}
|
||||
return options
|
||||
return [
|
||||
...options
|
||||
.filter((option: any) => {
|
||||
return splittedSearch.every((searchWord) =>
|
||||
option.value
|
||||
@@ -287,7 +307,17 @@ export default function Search({
|
||||
.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(() => {
|
||||
@@ -302,11 +332,23 @@ export default function Search({
|
||||
}
|
||||
}, [applicationData, isApplicationDataFetching]);
|
||||
|
||||
useEffect(() => {
|
||||
if (bookmarkData && bookmarksIsFetched) {
|
||||
setBookmarks(
|
||||
bookmarkData.filter(
|
||||
(bookmark: Bookmark) =>
|
||||
bookmark.enabled === 1 &&
|
||||
bookmark.name.toLowerCase().includes(searchValue.toLowerCase()),
|
||||
),
|
||||
);
|
||||
}
|
||||
}, [bookmarksIsFetched, bookmarkData, searchValue]);
|
||||
|
||||
useEffect(() => {
|
||||
if (historyData && historyDataIsFetched) {
|
||||
setSearchHistory(historyData);
|
||||
if (filteredHistory.length === 0) {
|
||||
setFilteredHistory(historyData.slice(0, 10));
|
||||
setFilteredHistory(historyData.slice(0, 10 * historyMult));
|
||||
}
|
||||
}
|
||||
}, [historyData, historyDataIsFetched]);
|
||||
@@ -323,15 +365,13 @@ export default function Search({
|
||||
|
||||
useEffect(() => {
|
||||
const splittedSearch = searchValue.toLowerCase().trim().split(' ');
|
||||
const filtered = searchHistory
|
||||
.filter((item: SearchHistoryItem) => {
|
||||
const filtered = searchHistory.filter((item: SearchHistoryItem) => {
|
||||
const option = `${item.prefix} ${item.searchTerm}`;
|
||||
const words = option.toLowerCase().trim().split(' ');
|
||||
return splittedSearch.every((searchWord) =>
|
||||
words.some((word: string) => word.includes(searchWord)),
|
||||
);
|
||||
})
|
||||
.slice(0, 10);
|
||||
});
|
||||
setFilteredHistory(filtered);
|
||||
}, [searchValue]);
|
||||
|
||||
@@ -344,7 +384,6 @@ export default function Search({
|
||||
setDefaultProviderLabel(defaultProviderData[0]?.name ?? 'Google Search');
|
||||
}
|
||||
}, [defaultProviderData, defaultProviderDataIsFetched]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{dropdownOpened && <Overlay blur={5} />}
|
||||
@@ -358,8 +397,12 @@ export default function Search({
|
||||
display: 'inline-block',
|
||||
gap: 0,
|
||||
}}
|
||||
align='center'
|
||||
justify='center'
|
||||
w={'100%'}
|
||||
>
|
||||
<Select
|
||||
ref={ref}
|
||||
classNames={selectClasses}
|
||||
data={searchHistory.map((item: SearchHistoryItem) => ({
|
||||
label: `${item.provider}`,
|
||||
@@ -387,15 +430,47 @@ export default function Search({
|
||||
searchable
|
||||
autoFocus={!isMobile}
|
||||
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) => {
|
||||
const Icon = allIcons[item.option.icon];
|
||||
return !searchValue.startsWith('!') ? (
|
||||
item.option.value === 'load' ? (
|
||||
<Group
|
||||
pos={'relative'}
|
||||
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
|
||||
pos={'relative'}
|
||||
@@ -430,7 +505,7 @@ export default function Search({
|
||||
}}
|
||||
onBlur={() => {
|
||||
setPlaceholderValue('');
|
||||
setListIndex(0);
|
||||
setListIndex(-1);
|
||||
closeDropdown();
|
||||
}}
|
||||
onFocus={() => {
|
||||
@@ -443,9 +518,80 @@ export default function Search({
|
||||
e.preventDefault();
|
||||
}
|
||||
}}
|
||||
onDoubleClick={() => {
|
||||
dropdownOpened ? closeDropdown() : openDropdown();
|
||||
}}
|
||||
onInput={onInput}
|
||||
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
|
||||
handleResetSearch={handleResetSearch}
|
||||
applicationData={applications}
|
||||
|
||||
@@ -1,11 +1,16 @@
|
||||
import { ActionIcon, Group, Text } from '@mantine/core';
|
||||
import { useCommonHooks, useMutationAPI } from 'hooks';
|
||||
import { useState } from 'react';
|
||||
import { FiEdit, FiTrash } from 'react-icons/fi';
|
||||
import { FiArrowUpRight, FiTrash } from 'react-icons/fi';
|
||||
import { actionIconClasses } from 'styles';
|
||||
|
||||
function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any) {
|
||||
const { isMobile, theme, setSearchValue } = useCommonHooks();
|
||||
function SearchSelectItem({
|
||||
item,
|
||||
handleSearchHistoryItem,
|
||||
searchEndpoint,
|
||||
setSearchValue,
|
||||
}: any) {
|
||||
const { isMobile, theme } = useCommonHooks();
|
||||
const { mutateAsync } = useMutationAPI();
|
||||
const [showFillButton, setShowFillButton] = useState(false);
|
||||
const m = new Date(item.option.dateTimeStamp);
|
||||
@@ -17,11 +22,11 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
|
||||
const dateString = isMobile
|
||||
? `${month}/${day}/${year}`
|
||||
: `${month}/${day}/${year} ${hours}:${minutes}`;
|
||||
|
||||
return (
|
||||
<Group
|
||||
w={'100%'}
|
||||
display={'flex'}
|
||||
justify={'space-between'}
|
||||
gap={0}
|
||||
onClick={() => {
|
||||
handleSearchHistoryItem(item);
|
||||
@@ -33,7 +38,7 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
|
||||
setShowFillButton(false);
|
||||
}}
|
||||
>
|
||||
<Group m={0} p={0} miw={'160px'}>
|
||||
<Group m={0} p={0} w={'160px'}>
|
||||
<Text
|
||||
style={{
|
||||
backgroundColor: `${theme.primaryColor}33`,
|
||||
@@ -44,25 +49,13 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
|
||||
>
|
||||
{item.option.provider}
|
||||
</Text>
|
||||
{showFillButton && (
|
||||
<ActionIcon
|
||||
className={actionIconClasses.selectOptionActions}
|
||||
classNames={actionIconClasses}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setSearchValue(`${item.option.prefix} ${item.option.searchTerm}`);
|
||||
}}
|
||||
>
|
||||
<FiEdit />
|
||||
</ActionIcon>
|
||||
)}
|
||||
</Group>
|
||||
<Group
|
||||
m={0}
|
||||
p={0}
|
||||
gap={0}
|
||||
justify='space-between'
|
||||
w={'65%'}
|
||||
w={'calc(100% - 160px)'}
|
||||
style={{
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
@@ -90,8 +83,19 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
|
||||
{dateString}
|
||||
</Text>
|
||||
</Group>
|
||||
<Group m={0} p={0} right={'1rem'} w={'24px'}>
|
||||
{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
|
||||
className={actionIconClasses.selectOptionActions}
|
||||
classNames={actionIconClasses}
|
||||
@@ -106,8 +110,8 @@ function SearchSelectItem({ item, handleSearchHistoryItem, searchEndpoint }: any
|
||||
>
|
||||
<FiTrash />
|
||||
</ActionIcon>
|
||||
)}
|
||||
</Group>
|
||||
)}
|
||||
</Group>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { useTextTicker } from '@gfazioli/mantine-text-animate';
|
||||
import {
|
||||
ActionIcon,
|
||||
type ComboboxItem,
|
||||
@@ -12,7 +13,7 @@ import { useCommonHooks, useQueryAPI } from 'hooks';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FaDice } from 'react-icons/fa';
|
||||
import { FiShuffle } from 'react-icons/fi';
|
||||
import { actionIconClasses, selectClasses, stackClasses } from 'styles';
|
||||
import { actionIconClasses, selectClasses, stackClasses, textClasses } from 'styles';
|
||||
import type { Theme, ThemePlaylist } from 'types';
|
||||
|
||||
function ThemingCard() {
|
||||
@@ -38,43 +39,46 @@ function ThemingCard() {
|
||||
currentThemePlaylist,
|
||||
setCurrentThemePlaylist,
|
||||
} = 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 (
|
||||
<Stack
|
||||
gap={0}
|
||||
justify='space-between'
|
||||
className={stackClasses.menuStack}
|
||||
classNames={stackClasses}
|
||||
pos={'relative'}
|
||||
style={{ aspectRatio: isMobile ? undefined : '1/1' }}
|
||||
>
|
||||
<Menu.Label pb={'.25rem'}>Themes</Menu.Label>
|
||||
<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} justify='space-between'>
|
||||
<Tooltip
|
||||
label='Shuffle Themes'
|
||||
c={'var(--mantine-color-primary-0)'}
|
||||
bg={'var(--mantine-color-background-0)'}
|
||||
withArrow
|
||||
>
|
||||
<ActionIcon
|
||||
className={actionIconClasses.menuActions}
|
||||
classNames={actionIconClasses}
|
||||
disabled={currentThemePlaylist === 'Time of Day'}
|
||||
style={{
|
||||
backgroundColor:
|
||||
currentTheme === 'random'
|
||||
? `${theme?.searchColor === theme?.primaryColor ? theme.searchColor?.substring(0, 7) : theme.primaryColor?.substring(0, 7)}88`
|
||||
: 'transparent',
|
||||
color:
|
||||
currentTheme === 'random'
|
||||
? 'var(--mantine-color-accent-0)'
|
||||
: 'var(--mantine-color-primary-0)',
|
||||
}}
|
||||
onClick={() => {
|
||||
setCurrentTheme(currentTheme === 'random' ? theme.name : 'random');
|
||||
setCurrentThemePlaylist('All');
|
||||
}}
|
||||
>
|
||||
<FiShuffle />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
<Menu.Label pb={'2rem'}>Themes</Menu.Label>
|
||||
<Group mt={'-1.5rem'} mb={'-.25rem'} w={'95%'} h={'100%'} gap={0}>
|
||||
<Stack gap={0}>
|
||||
<Text className={textClasses.currentTheme} classNames={textClasses}>
|
||||
Current theme:
|
||||
</Text>
|
||||
<Text className={textClasses.themeName} classNames={textClasses}>
|
||||
{text}
|
||||
</Text>
|
||||
</Stack>
|
||||
<Tooltip
|
||||
label='Random Theme'
|
||||
c={'var(--mantine-color-primary-0)'}
|
||||
@@ -84,11 +88,29 @@ function ThemingCard() {
|
||||
<ActionIcon
|
||||
className={actionIconClasses.menuActions}
|
||||
classNames={actionIconClasses}
|
||||
h={40}
|
||||
style={{
|
||||
backgroundColor: 'transparent',
|
||||
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={() => {
|
||||
const themeList = JSON.parse(
|
||||
themePlaylistData?.find(
|
||||
@@ -119,20 +141,16 @@ function ThemingCard() {
|
||||
}
|
||||
}}
|
||||
>
|
||||
<FaDice />
|
||||
<FaDice size={20} />
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
</Group>
|
||||
<Text fw={'bold'} fz={'1.125rem'}>
|
||||
Currently:{' '}
|
||||
</Text>
|
||||
{theme.name}
|
||||
<Text fw={'bold'} fz={'1.125rem'}>
|
||||
Playlist:{' '}
|
||||
</Text>
|
||||
<Group justify='space-between' pos={'relative'} gap={0}>
|
||||
<Select
|
||||
labelProps={{ display: 'none' }}
|
||||
label='Current Playlist:'
|
||||
placeholder='Pick a playlist...'
|
||||
mb={'.25rem'}
|
||||
ml={'.25rem'}
|
||||
value={currentThemePlaylist}
|
||||
data={[
|
||||
{ value: 'All', label: 'All' },
|
||||
@@ -164,18 +182,31 @@ function ThemingCard() {
|
||||
a.label.localeCompare(b.label),
|
||||
) ?? []),
|
||||
]}
|
||||
w='92%'
|
||||
classNames={{
|
||||
wrapper: selectClasses.menuSelectWrapper,
|
||||
root: selectClasses.menuSelectRoot,
|
||||
input: selectClasses.menuSelectInput,
|
||||
label: selectClasses.menuSelectLabel,
|
||||
options: selectClasses.menuSelectOptions,
|
||||
option: selectClasses.menuSelectOption,
|
||||
}}
|
||||
labelProps={{ top: 8, left: 12 }}
|
||||
comboboxProps={{
|
||||
withinPortal: false,
|
||||
position: 'top',
|
||||
width: '100%',
|
||||
}}
|
||||
w={'70%'}
|
||||
style={{
|
||||
zIndex: 2,
|
||||
}}
|
||||
styles={
|
||||
theme.textShadowsEnabled
|
||||
? {
|
||||
label: { boxShadow: '2px 2px var(--mantine-color-border-0)' },
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
onChange={(_value, option: ComboboxItem) => {
|
||||
setCurrentThemePlaylist(option.value);
|
||||
if (option.value !== 'Time of Day') {
|
||||
@@ -194,6 +225,55 @@ function ThemingCard() {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
&.root {
|
||||
display: inline-block;
|
||||
|
||||
Reference in New Issue
Block a user