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

Table fixes

Browse Source
This commit is contained in:
Sean Edmunds
2025-11-07 14:15:54 -06:00
parent 1b23933875
commit f37cf84a61
10 changed files with 238 additions and 170 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
package-lock.json generated
View File

@@ -32,13 +32,13 @@
"@types/react": "^19.2.2", "@types/react": "^19.2.2",
"@types/react-dom": "^19.2.2", "@types/react-dom": "^19.2.2",
"@vitejs/plugin-react": "^5.1.0", "@vitejs/plugin-react": "^5.1.0",
"@vitest/coverage-v8": "^4.0.7", "@vitest/coverage-v8": "^4.0.8",
"@vitest/ui": "^4.0.7", "@vitest/ui": "^4.0.8",
"typescript": "^5.9.3", "typescript": "^5.9.3",
"vite": "^7.2.1", "vite": "^7.2.2",
"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": "^4.0.7" "vitest": "^4.0.8"
} }
}, },
"node_modules/@babel/code-frame": { "node_modules/@babel/code-frame": {
@@ -215,9 +215,9 @@
} }
}, },
"node_modules/@babel/helper-validator-identifier": { "node_modules/@babel/helper-validator-identifier": {
"version": "7.27.1", "version": "7.28.5",
"resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz",
"integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==",
"devOptional": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"engines": { "engines": {
@@ -249,13 +249,13 @@
} }
}, },
"node_modules/@babel/parser": { "node_modules/@babel/parser": {
"version": "7.28.4", "version": "7.28.5",
"resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz", "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz",
"integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==", "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==",
"devOptional": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/types": "^7.28.4" "@babel/types": "^7.28.5"
}, },
"bin": { "bin": {
"parser": "bin/babel-parser.js" "parser": "bin/babel-parser.js"
@@ -344,14 +344,14 @@
} }
}, },
"node_modules/@babel/types": { "node_modules/@babel/types": {
"version": "7.28.4", "version": "7.28.5",
"resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz", "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz",
"integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==", "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==",
"devOptional": true, "devOptional": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@babel/helper-string-parser": "^7.27.1", "@babel/helper-string-parser": "^7.27.1",
"@babel/helper-validator-identifier": "^7.27.1" "@babel/helper-validator-identifier": "^7.28.5"
}, },
"engines": { "engines": {
"node": ">=6.9.0" "node": ">=6.9.0"
@@ -1916,30 +1916,30 @@
} }
}, },
"node_modules/@vitest/coverage-v8": { "node_modules/@vitest/coverage-v8": {
"version": "4.0.7", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.0.7.tgz", "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.0.8.tgz",
"integrity": "sha512-MXc+kEA5EUwMMGmNt1S6CIOEl/iCmAhGZQq1QgMNC3/QpYSOxkysEi6pxWhkqJ7YT/RduoVEV5rxFxHG18V3LA==", "integrity": "sha512-wQgmtW6FtPNn4lWUXi8ZSYLpOIb92j3QCujxX3sQ81NTfQ/ORnE0HtK7Kqf2+7J9jeveMGyGyc4NWc5qy3rC4A==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@bcoe/v8-coverage": "^1.0.2", "@bcoe/v8-coverage": "^1.0.2",
"@vitest/utils": "4.0.7", "@vitest/utils": "4.0.8",
"ast-v8-to-istanbul": "^0.3.5", "ast-v8-to-istanbul": "^0.3.8",
"debug": "^4.4.3", "debug": "^4.4.3",
"istanbul-lib-coverage": "^3.2.2", "istanbul-lib-coverage": "^3.2.2",
"istanbul-lib-report": "^3.0.1", "istanbul-lib-report": "^3.0.1",
"istanbul-lib-source-maps": "^5.0.6", "istanbul-lib-source-maps": "^5.0.6",
"istanbul-reports": "^3.2.0", "istanbul-reports": "^3.2.0",
"magicast": "^0.3.5", "magicast": "^0.5.1",
"std-env": "^3.9.0", "std-env": "^3.10.0",
"tinyrainbow": "^3.0.3" "tinyrainbow": "^3.0.3"
}, },
"funding": { "funding": {
"url": "https://opencollective.com/vitest" "url": "https://opencollective.com/vitest"
}, },
"peerDependencies": { "peerDependencies": {
"@vitest/browser": "4.0.7", "@vitest/browser": "4.0.8",
"vitest": "4.0.7" "vitest": "4.0.8"
}, },
"peerDependenciesMeta": { "peerDependenciesMeta": {
"@vitest/browser": { "@vitest/browser": {
@@ -1948,17 +1948,17 @@
} }
}, },
"node_modules/@vitest/expect": { "node_modules/@vitest/expect": {
"version": "4.0.7", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.7.tgz", "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.8.tgz",
"integrity": "sha512-jGRG6HghnJDjljdjYIoVzX17S6uCVCBRFnsgdLGJ6CaxfPh8kzUKe/2n533y4O/aeZ/sIr7q7GbuEbeGDsWv4Q==", "integrity": "sha512-Rv0eabdP/xjAHQGr8cjBm+NnLHNoL268lMDK85w2aAGLFoVKLd8QGnVon5lLtkXQCoYaNL0wg04EGnyKkkKhPA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@standard-schema/spec": "^1.0.0", "@standard-schema/spec": "^1.0.0",
"@types/chai": "^5.2.2", "@types/chai": "^5.2.2",
"@vitest/spy": "4.0.7", "@vitest/spy": "4.0.8",
"@vitest/utils": "4.0.7", "@vitest/utils": "4.0.8",
"chai": "^6.0.1", "chai": "^6.2.0",
"tinyrainbow": "^3.0.3" "tinyrainbow": "^3.0.3"
}, },
"funding": { "funding": {
@@ -1966,15 +1966,15 @@
} }
}, },
"node_modules/@vitest/mocker": { "node_modules/@vitest/mocker": {
"version": "4.0.7", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.7.tgz", "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.8.tgz",
"integrity": "sha512-OsDwLS7WnpuNslOV6bJkXVYVV/6RSc4eeVxV7h9wxQPNxnjRvTTrIikfwCbMyl8XJmW6oOccBj2Q07YwZtQcCw==", "integrity": "sha512-9FRM3MZCedXH3+pIh+ME5Up2NBBHDq0wqwhOKkN4VnvCiKbVxddqH9mSGPZeawjd12pCOGnl+lo/ZGHt0/dQSg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vitest/spy": "4.0.7", "@vitest/spy": "4.0.8",
"estree-walker": "^3.0.3", "estree-walker": "^3.0.3",
"magic-string": "^0.30.19" "magic-string": "^0.30.21"
}, },
"funding": { "funding": {
"url": "https://opencollective.com/vitest" "url": "https://opencollective.com/vitest"
@@ -2003,9 +2003,9 @@
} }
}, },
"node_modules/@vitest/pretty-format": { "node_modules/@vitest/pretty-format": {
"version": "4.0.7", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.7.tgz", "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.8.tgz",
"integrity": "sha512-YY//yxqTmk29+/pK+Wi1UB4DUH3lSVgIm+M10rAJ74pOSMgT7rydMSc+vFuq9LjZLhFvVEXir8EcqMke3SVM6Q==", "integrity": "sha512-qRrjdRkINi9DaZHAimV+8ia9Gq6LeGz2CgIEmMLz3sBDYV53EsnLZbJMR1q84z1HZCMsf7s0orDgZn7ScXsZKg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
@@ -2016,13 +2016,13 @@
} }
}, },
"node_modules/@vitest/runner": { "node_modules/@vitest/runner": {
"version": "4.0.7", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.7.tgz", "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.8.tgz",
"integrity": "sha512-orU1lsu4PxLEcDWfjVCNGIedOSF/YtZ+XMrd1PZb90E68khWCNzD8y1dtxtgd0hyBIQk8XggteKN/38VQLvzuw==", "integrity": "sha512-mdY8Sf1gsM8hKJUQfiPT3pn1n8RF4QBcJYFslgWh41JTfrK1cbqY8whpGCFzBl45LN028g0njLCYm0d7XxSaQQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vitest/utils": "4.0.7", "@vitest/utils": "4.0.8",
"pathe": "^2.0.3" "pathe": "^2.0.3"
}, },
"funding": { "funding": {
@@ -2030,14 +2030,14 @@
} }
}, },
"node_modules/@vitest/snapshot": { "node_modules/@vitest/snapshot": {
"version": "4.0.7", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.7.tgz", "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.8.tgz",
"integrity": "sha512-xJL+Nkw0OjaUXXQf13B8iKK5pI9QVtN9uOtzNHYuG/o/B7fIEg0DQ+xOe0/RcqwDEI15rud1k7y5xznBKGUXAA==", "integrity": "sha512-Nar9OTU03KGiubrIOFhcfHg8FYaRaNT+bh5VUlNz8stFhCZPNrJvmZkhsr1jtaYvuefYFwK2Hwrq026u4uPWCw==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vitest/pretty-format": "4.0.7", "@vitest/pretty-format": "4.0.8",
"magic-string": "^0.30.19", "magic-string": "^0.30.21",
"pathe": "^2.0.3" "pathe": "^2.0.3"
}, },
"funding": { "funding": {
@@ -2045,9 +2045,9 @@
} }
}, },
"node_modules/@vitest/spy": { "node_modules/@vitest/spy": {
"version": "4.0.7", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.7.tgz", "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.8.tgz",
"integrity": "sha512-FW4X8hzIEn4z+HublB4hBF/FhCVaXfIHm8sUfvlznrcy1MQG7VooBgZPMtVCGZtHi0yl3KESaXTqsKh16d8cFg==", "integrity": "sha512-nvGVqUunyCgZH7kmo+Ord4WgZ7lN0sOULYXUOYuHr55dvg9YvMz3izfB189Pgp28w0vWFbEEfNc/c3VTrqrXeA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"funding": { "funding": {
@@ -2055,14 +2055,14 @@
} }
}, },
"node_modules/@vitest/ui": { "node_modules/@vitest/ui": {
"version": "4.0.7", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-4.0.7.tgz", "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-4.0.8.tgz",
"integrity": "sha512-aIFPci9xoTmVkxpqsSKcRG/Hn0lTy421jsCehHydYeIMd+getn0Pue0JqY5cW8yZglZjMeX0YfIy5wDtQDHEcA==", "integrity": "sha512-F9jI5rSstNknPlTlPN2gcc4gpbaagowuRzw/OJzl368dvPun668Q182S8Q8P9PITgGCl5LAKXpzuue106eM4wA==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true, "peer": true,
"dependencies": { "dependencies": {
"@vitest/utils": "4.0.7", "@vitest/utils": "4.0.8",
"fflate": "^0.8.2", "fflate": "^0.8.2",
"flatted": "^3.3.3", "flatted": "^3.3.3",
"pathe": "^2.0.3", "pathe": "^2.0.3",
@@ -2074,17 +2074,17 @@
"url": "https://opencollective.com/vitest" "url": "https://opencollective.com/vitest"
}, },
"peerDependencies": { "peerDependencies": {
"vitest": "4.0.7" "vitest": "4.0.8"
} }
}, },
"node_modules/@vitest/utils": { "node_modules/@vitest/utils": {
"version": "4.0.7", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.7.tgz", "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.8.tgz",
"integrity": "sha512-HNrg9CM/Z4ZWB6RuExhuC6FPmLipiShKVMnT9JlQvfhwR47JatWLChA6mtZqVHqypE6p/z6ofcjbyWpM7YLxPQ==", "integrity": "sha512-pdk2phO5NDvEFfUTxcTP8RFYjVj/kfLSPIN5ebP2Mu9kcIMeAQTbknqcFEyBcC4z2pJlJI9aS5UQjcYfhmKAow==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@vitest/pretty-format": "4.0.7", "@vitest/pretty-format": "4.0.8",
"tinyrainbow": "^3.0.3" "tinyrainbow": "^3.0.3"
}, },
"funding": { "funding": {
@@ -3136,14 +3136,15 @@
} }
}, },
"node_modules/magicast": { "node_modules/magicast": {
"version": "0.3.5", "version": "0.5.1",
"resolved": "https://registry.npmjs.org/magicast/-/magicast-0.3.5.tgz", "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.1.tgz",
"integrity": "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==", "integrity": "sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==",
"dev": true, "dev": true,
"license": "MIT",
"dependencies": { "dependencies": {
"@babel/parser": "^7.25.4", "@babel/parser": "^7.28.5",
"@babel/types": "^7.25.4", "@babel/types": "^7.28.5",
"source-map-js": "^1.2.0" "source-map-js": "^1.2.1"
} }
}, },
"node_modules/make-dir": { "node_modules/make-dir": {
@@ -4144,9 +4145,9 @@
} }
}, },
"node_modules/vite": { "node_modules/vite": {
"version": "7.2.1", "version": "7.2.2",
"resolved": "https://registry.npmjs.org/vite/-/vite-7.2.1.tgz", "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
"integrity": "sha512-qTl3VF7BvOupTR85Zc561sPEgxyUSNSvTQ9fit7DEMP7yPgvvIGm5Zfa1dOM+kOwWGNviK9uFM9ra77+OjK7lQ==", "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true, "peer": true,
@@ -4266,27 +4267,27 @@
} }
}, },
"node_modules/vitest": { "node_modules/vitest": {
"version": "4.0.7", "version": "4.0.8",
"resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.7.tgz", "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.8.tgz",
"integrity": "sha512-xQroKAadK503CrmbzCISvQUjeuvEZzv6U0wlnlVFOi5i3gnzfH4onyQ29f3lzpe0FresAiTAd3aqK0Bi/jLI8w==", "integrity": "sha512-urzu3NCEV0Qa0Y2PwvBtRgmNtxhj5t5ULw7cuKhIHh3OrkKTLlut0lnBOv9qe5OvbkMH2g38G7KPDCTpIytBVg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"peer": true, "peer": true,
"dependencies": { "dependencies": {
"@vitest/expect": "4.0.7", "@vitest/expect": "4.0.8",
"@vitest/mocker": "4.0.7", "@vitest/mocker": "4.0.8",
"@vitest/pretty-format": "4.0.7", "@vitest/pretty-format": "4.0.8",
"@vitest/runner": "4.0.7", "@vitest/runner": "4.0.8",
"@vitest/snapshot": "4.0.7", "@vitest/snapshot": "4.0.8",
"@vitest/spy": "4.0.7", "@vitest/spy": "4.0.8",
"@vitest/utils": "4.0.7", "@vitest/utils": "4.0.8",
"debug": "^4.4.3", "debug": "^4.4.3",
"es-module-lexer": "^1.7.0", "es-module-lexer": "^1.7.0",
"expect-type": "^1.2.2", "expect-type": "^1.2.2",
"magic-string": "^0.30.19", "magic-string": "^0.30.21",
"pathe": "^2.0.3", "pathe": "^2.0.3",
"picomatch": "^4.0.3", "picomatch": "^4.0.3",
"std-env": "^3.9.0", "std-env": "^3.10.0",
"tinybench": "^2.9.0", "tinybench": "^2.9.0",
"tinyexec": "^0.3.2", "tinyexec": "^0.3.2",
"tinyglobby": "^0.2.15", "tinyglobby": "^0.2.15",
@@ -4307,10 +4308,10 @@
"@edge-runtime/vm": "*", "@edge-runtime/vm": "*",
"@types/debug": "^4.1.12", "@types/debug": "^4.1.12",
"@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0",
"@vitest/browser-playwright": "4.0.7", "@vitest/browser-playwright": "4.0.8",
"@vitest/browser-preview": "4.0.7", "@vitest/browser-preview": "4.0.8",
"@vitest/browser-webdriverio": "4.0.7", "@vitest/browser-webdriverio": "4.0.8",
"@vitest/ui": "4.0.7", "@vitest/ui": "4.0.8",
"happy-dom": "*", "happy-dom": "*",
"jsdom": "*" "jsdom": "*"
}, },

8
package.json
View File

@@ -34,12 +34,12 @@
"@types/react": "^19.2.2", "@types/react": "^19.2.2",
"@types/react-dom": "^19.2.2", "@types/react-dom": "^19.2.2",
"@vitejs/plugin-react": "^5.1.0", "@vitejs/plugin-react": "^5.1.0",
"@vitest/coverage-v8": "^4.0.7", "@vitest/coverage-v8": "^4.0.8",
"@vitest/ui": "^4.0.7", "@vitest/ui": "^4.0.8",
"typescript": "^5.9.3", "typescript": "^5.9.3",
"vite": "^7.2.1", "vite": "^7.2.2",
"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": "^4.0.7" "vitest": "^4.0.8"
} }
} }

6
src/App.tsx
View File

@@ -80,11 +80,11 @@ function App() {
useEffect(() => { useEffect(() => {
if (allThemes && themeName) { if (allThemes && themeName) {
if (currentThemePlaylist === 'All') { if (currentThemePlaylist === 'All') {
if (themeName !== 'random') { if (themeName === 'random') {
handleThemeChange(allThemes, false);
} else {
const temp = allThemes.find((t: Theme) => t.name === themeName); const temp = allThemes.find((t: Theme) => t.name === themeName);
setTheme(temp); setTheme(temp);
} else {
handleThemeChange(allThemes, false);
} }
} else if (currentThemePlaylist === 'Time of Day') { } else if (currentThemePlaylist === 'Time of Day') {
const themeList = JSON.parse( const themeList = JSON.parse(

34
src/components/Columns/SearchHistoryColumns.tsx
View File

@@ -45,8 +45,11 @@ export const SearchHistoryColumns = (
</Box> </Box>
</Group> </Group>
), ),
size: 64, meta: {
maxSize: 64, filterVariant: 'counter',
},
size: 32,
maxSize: 32,
enableSorting: false, enableSorting: false,
}), }),
columnHelper.accessor('prefix', { columnHelper.accessor('prefix', {
@@ -64,26 +67,43 @@ export const SearchHistoryColumns = (
if (value === null) return true; if (value === null) return true;
return row.getValue(id) === value; return row.getValue(id) === value;
}, },
size: 32,
maxSize: 32,
}), }),
columnHelper.accessor('provider', { columnHelper.accessor('provider', {
id: 'provider', id: 'provider',
cell: ({ cell }: any) => <Text mx={8}>{cell.getValue()}</Text>, cell: ({ cell }: any) => (
<Text mx={8} style={{ textAlign: 'center' }}>
{cell.getValue()}
</Text>
),
header: () => <Text fw={600}>Provider</Text>, header: () => <Text fw={600}>Provider</Text>,
meta: { meta: {
filterVariant: 'mantineSelect', filterVariant: 'mantineSelect',
}, },
size: 128,
maxSize: 128,
}), }),
columnHelper.accessor('searchTerm', { columnHelper.accessor('searchTerm', {
id: 'searchTerm', id: 'searchTerm',
cell: ({ cell }: any) => ( cell: ({ cell }: any) => (
<Text w={'100%'} mx={8} style={{ justifySelf: 'center' }}> <Group
{cell.getValue()} style={{
</Text> overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
}}
>
<Text w={'100%'} mx={8} style={{ justifySelf: 'center' }}>
{cell.getValue()}
</Text>
</Group>
), ),
header: () => <Text fw={600}>Search String</Text>, header: () => <Text fw={600}>Search String</Text>,
meta: { meta: {
filterVariant: 'text', filterVariant: 'text',
}, },
maxSize: 1920,
}), }),
columnHelper.accessor('dateTimeStamp', { columnHelper.accessor('dateTimeStamp', {
id: 'dateTimeStamp', id: 'dateTimeStamp',
@@ -115,5 +135,7 @@ export const SearchHistoryColumns = (
} }
return true; return true;
}, },
size: 132,
maxSize: 132,
}), }),
]; ];

57
src/components/DataTable/DataTable.tsx
View File

@@ -1,4 +1,4 @@
import { Button, Group } from '@mantine/core'; import { Button, Group, Text } from '@mantine/core';
import { import {
type ColumnFiltersState, type ColumnFiltersState,
flexRender, flexRender,
@@ -10,7 +10,7 @@ import {
type SortingState, type SortingState,
useReactTable, useReactTable,
} from '@tanstack/react-table'; } from '@tanstack/react-table';
import { type Dispatch, type SetStateAction, useState } from 'react'; import { type Dispatch, type SetStateAction, useEffect, useState } from 'react';
import { Filter } from './components'; import { Filter } from './components';
export function DataTable({ export function DataTable({
@@ -55,32 +55,47 @@ export function DataTable({
globalFilterFn: 'includesString', globalFilterFn: 'includesString',
onGlobalFilterChange: setGlobalFilter, onGlobalFilterChange: setGlobalFilter,
}); });
useEffect(() => {
if (!filtersEnabled) {
setColumnFilters([]);
}
}, [filtersEnabled]);
return ( return (
<table style={{ width: '100%', backgroundColor: 'var(--mantine-color-primary-0)' }}> <table
style={{
borderSpacing: '2px 0px',
backgroundColor: 'var(--mantine-color-accent-0)',
}}
>
<thead <thead
style={{ style={{
position: 'sticky', position: 'sticky',
top: 0, top: 0,
zIndex: 1, zIndex: 1,
backgroundColor: 'var(--mantine-color-primary-0)', backgroundColor: 'var(--mantine-color-primary-0)',
borderTopLeftRadius: '1rem',
borderTopRightRadius: '1rem',
}} }}
> >
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}> <tr key={headerGroup.id}>
{headerGroup.headers.map((header) => ( {headerGroup.headers.map((header) => (
<th key={header.id}> <th
key={header.id}
style={{
width: header.getSize(),
padding: 0,
}}
>
{header.isPlaceholder ? null : ( {header.isPlaceholder ? null : (
<> <>
<Button <Button
{...{ {...{
style: { style: {
cursor: 'pointer', cursor: 'pointer',
width: '100%',
borderRadius: '0px', borderRadius: '0px',
backgroundColor: 'transparent', backgroundColor: 'transparent',
}, },
px: 0,
onClick: () => { onClick: () => {
if (header.column.getCanSort()) { if (header.column.getCanSort()) {
if (sorting[0].id === header.id) { if (sorting[0].id === header.id) {
@@ -114,6 +129,7 @@ export function DataTable({
<Filter <Filter
column={header.column} column={header.column}
options={[...new Set(data.map((item: any) => item[header.id]))]} options={[...new Set(data.map((item: any) => item[header.id]))]}
resultCount={table.getFilteredRowModel().rows.length}
/> />
) : null} ) : null}
</> </>
@@ -139,7 +155,12 @@ export function DataTable({
}} }}
> >
{row.getVisibleCells().map((cell) => ( {row.getVisibleCells().map((cell) => (
<td key={cell.id}> <td
key={cell.id}
style={{
width: cell.column.getSize(),
}}
>
{flexRender(cell.column.columnDef.cell, cell.getContext())} {flexRender(cell.column.columnDef.cell, cell.getContext())}
</td> </td>
))} ))}
@@ -158,6 +179,26 @@ export function DataTable({
))} ))}
</tr> </tr>
))} ))}
<tr
style={{
width: '100%',
backgroundColor: 'var(--mantine-color-primary-0)',
position: 'sticky',
bottom: 0,
}}
>
<td colSpan={5}>
<Text
style={{
color: 'var(--mantine-color-background-0)',
fontWeight: 'bold',
textAlign: 'center',
}}
>
Total Entries: {table.getRowCount()}
</Text>
</td>
</tr>
</tfoot> </tfoot>
</table> </table>
); );

30
src/components/DataTable/components/Filter.tsx
View File

@@ -8,6 +8,7 @@ import {
RangeSlider, RangeSlider,
Select, Select,
Stack, Stack,
Text,
} from '@mantine/core'; } from '@mantine/core';
import { DatePickerInput } from '@mantine/dates'; import { DatePickerInput } from '@mantine/dates';
import type { Column, RowData } from '@tanstack/react-table'; import type { Column, RowData } from '@tanstack/react-table';
@@ -26,11 +27,20 @@ declare module '@tanstack/react-table' {
| 'multiSelect' | 'multiSelect'
| 'slider' | 'slider'
| 'checkbox' | 'checkbox'
| 'counter'
| 'none'; | 'none';
} }
} }
export function Filter({ column, options }: { column: Column<unknown>; options: any }) { export function Filter({
column,
options,
resultCount,
}: {
column: Column<unknown>;
options: any;
resultCount?: number;
}) {
const columnFilterValue = column.getFilterValue(); const columnFilterValue = column.getFilterValue();
const { filterVariant } = column.columnDef.meta ?? {}; const { filterVariant } = column.columnDef.meta ?? {};
const optionsFilter: OptionsFilter = ({ options, search }) => { const optionsFilter: OptionsFilter = ({ options, search }) => {
@@ -88,12 +98,15 @@ export function Filter({ column, options }: { column: Column<unknown>; options:
label: selectClasses.menuSelectLabel, label: selectClasses.menuSelectLabel,
options: selectClasses.menuSelectOptions, options: selectClasses.menuSelectOptions,
option: selectClasses.menuSelectOption, option: selectClasses.menuSelectOption,
dropdown: selectClasses.dropdown,
}} }}
data={options.map((option: ComboboxItem) => { data={options
return { value: option, label: option }; .map((option: ComboboxItem) => {
})} return { value: option, label: option };
})
.sort((a: ComboboxItem, b: ComboboxItem) => a.label.localeCompare(b.label))}
onChange={(e: any) => column.setFilterValue(e)} onChange={(e: any) => column.setFilterValue(e)}
w={'auto'}
clearable
/> />
) : filterVariant === 'multiSelect' ? ( ) : filterVariant === 'multiSelect' ? (
<MultiSelect <MultiSelect
@@ -149,6 +162,13 @@ export function Filter({ column, options }: { column: Column<unknown>; options:
<Checkbox onChange={(value) => column.setFilterValue(value.target.checked)} /> <Checkbox onChange={(value) => column.setFilterValue(value.target.checked)} />
</Group> </Group>
// See faceted column filters example for datalist search suggestions // See faceted column filters example for datalist search suggestions
) : filterVariant === 'counter' ? (
<Group h={36} align='center' justify='center'>
<Text c={'var(--mantine-color-background-0)'}>
{resultCount}/{options.length}
</Text>
</Group>
// See faceted column filters example for datalist search suggestions
) : ( ) : (
<Box <Box
style={{ style={{

1
src/pages/homepage/components/SettingsButton/SettingsCard.tsx
View File

@@ -132,6 +132,7 @@ function SettingsCard({
placeholder={`Sort ${sectionTitle}...`} placeholder={`Sort ${sectionTitle}...`}
value={sort} value={sort}
data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']} data={['Custom', 'A>Z', 'Z>A', 'Newest', 'Oldest']}
className={selectClasses.settingsItem}
classNames={{ classNames={{
wrapper: selectClasses.menuSelectWrapper, wrapper: selectClasses.menuSelectWrapper,
root: selectClasses.menuSelectRoot, root: selectClasses.menuSelectRoot,

17
src/pages/settings/components/Search/SearchHistory.tsx
View File

@@ -108,23 +108,6 @@ const SearchHistory = () => {
setGlobalFilter={setGlobalFilter} setGlobalFilter={setGlobalFilter}
/> />
</Stack> </Stack>
<Group
w={'100%'}
style={{
backgroundColor: 'var(--mantine-color-primary-0)',
}}
align='center'
justify='center'
>
<Text
style={{
color: 'var(--mantine-color-background-0)',
fontWeight: 'bold',
}}
>
Results: {searchHistory.length}
</Text>
</Group>
</Stack> </Stack>
</Stack> </Stack>
</Stack> </Stack>

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

@@ -221,15 +221,15 @@ export function ThemePlaylists() {
<ThemePlaylistCard <ThemePlaylistCard
cardPlaylist={{ cardPlaylist={{
id: id:
themePlaylists?.filter( themePlaylists?.find(
(a: ThemePlaylist) => a.name === 'Time of Day', (a: ThemePlaylist) => a.name === 'Time of Day',
)[0]?.id ?? undefined, )?.id ?? undefined,
name: 'Time of Day', name: 'Time of Day',
default: 1, default: 1,
themeList: themeList:
themePlaylists?.filter( themePlaylists?.find(
(a: ThemePlaylist) => a.name === 'Time of Day', (a: ThemePlaylist) => a.name === 'Time of Day',
)[0]?.themeList ?? '[]', )?.themeList ?? '[]',
}} }}
handleOpen={handleOpen} handleOpen={handleOpen}
allThemes={allThemeData} allThemes={allThemeData}

78
src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistCard.tsx
View File

@@ -67,7 +67,7 @@ export function ThemePlaylistCard({
paddingLeft: '.25rem', paddingLeft: '.25rem',
backgroundColor: 'var(--mantine-color-border-0)', backgroundColor: 'var(--mantine-color-border-0)',
borderRadius: '4px', borderRadius: '4px',
color: 'var(--mantine-color-background-0)', color: 'var(--mantine-color-primary-0)',
zIndex: 3, zIndex: 3,
}} }}
> >
@@ -130,44 +130,7 @@ export function ThemePlaylistCard({
> >
{hover && <Overlay opacity={0.5} zIndex={1} />} {hover && <Overlay opacity={0.5} zIndex={1} />}
<Stack h={'100%'} w={'100%'} align='center' mt={'.75rem'}> <Stack h={'100%'} w={'100%'} align='center' mt={'.75rem'}>
{cardPlaylist.name !== 'Time of Day' ? ( {cardPlaylist.name === 'Time of Day' ? (
<>
<Text
px={'.5rem'}
mt={'.5rem'}
mb={'-.5rem'}
style={{
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
borderRadius: '4px',
zIndex: 160,
}}
>
Count: {themeList.length}
</Text>
<ScrollArea
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
h={'255px'}
w={'100%'}
style={{ zIndex: 2 }}
>
<Stack gap={4}>
{themeList.length > 0 &&
themeList
.sort((a: number, b: number) => (a > b ? 1 : -1))
.map((item: number) => {
const miniTheme: any = allThemes.find(
(theme: Theme) => theme.id === item,
);
return (
<ThemeMiniCard key={miniTheme?.id} miniTheme={miniTheme} />
);
})}
</Stack>
</ScrollArea>
</>
) : (
<> <>
<Text <Text
px={'.5rem'} px={'.5rem'}
@@ -207,6 +170,43 @@ export function ThemePlaylistCard({
</Stack> </Stack>
</ScrollArea> </ScrollArea>
</> </>
) : (
<>
<Text
px={'.5rem'}
mt={'.5rem'}
mb={'-.5rem'}
style={{
color: 'var(--mantine-color-background-0)',
backgroundColor: 'var(--mantine-color-primary-0)',
borderRadius: '4px',
zIndex: 160,
}}
>
Count: {themeList.length}
</Text>
<ScrollArea
className={scrollAreaClasses.default}
classNames={scrollAreaClasses}
h={'255px'}
w={'100%'}
style={{ zIndex: 2 }}
>
<Stack gap={4}>
{themeList.length > 0 &&
themeList
.sort((a: number, b: number) => (a > b ? 1 : -1))
.map((item: number) => {
const miniTheme: any = allThemes.find(
(theme: Theme) => theme.id === item,
);
return (
<ThemeMiniCard key={miniTheme?.id} miniTheme={miniTheme} />
);
})}
</Stack>
</ScrollArea>
</>
)} )}
</Stack> </Stack>
</Button> </Button>