From f37cf84a61ed605ee89ddebe88d94eeb3682abea Mon Sep 17 00:00:00 2001 From: Sean Edmunds Date: Fri, 7 Nov 2025 14:15:54 -0600 Subject: [PATCH] Table fixes --- package-lock.json | 169 +++++++++--------- package.json | 8 +- src/App.tsx | 6 +- .../Columns/SearchHistoryColumns.tsx | 34 +++- src/components/DataTable/DataTable.tsx | 57 +++++- .../DataTable/components/Filter.tsx | 30 +++- .../SettingsButton/SettingsCard.tsx | 1 + .../components/Search/SearchHistory.tsx | 17 -- .../Theming/ThemePlaylists/ThemePlaylists.tsx | 8 +- .../components/ThemePlaylistCard.tsx | 78 ++++---- 10 files changed, 238 insertions(+), 170 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9e40550..c438761 100644 --- a/package-lock.json +++ b/package-lock.json @@ -32,13 +32,13 @@ "@types/react": "^19.2.2", "@types/react-dom": "^19.2.2", "@vitejs/plugin-react": "^5.1.0", - "@vitest/coverage-v8": "^4.0.7", - "@vitest/ui": "^4.0.7", + "@vitest/coverage-v8": "^4.0.8", + "@vitest/ui": "^4.0.8", "typescript": "^5.9.3", - "vite": "^7.2.1", + "vite": "^7.2.2", "vite-plugin-dts": "~4.5.4", "vite-tsconfig-paths": "^5.1.4", - "vitest": "^4.0.7" + "vitest": "^4.0.8" } }, "node_modules/@babel/code-frame": { @@ -215,9 +215,9 @@ } }, "node_modules/@babel/helper-validator-identifier": { - "version": "7.27.1", - "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz", - "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==", + "version": "7.28.5", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.28.5.tgz", + "integrity": "sha512-qSs4ifwzKJSV39ucNjsvc6WVHs6b7S03sOh2OcHF9UHfVPqWWALUsNUVzhSBiItjRZoLHx7nIarVjqKVusUZ1Q==", "devOptional": true, "license": "MIT", "engines": { @@ -249,13 +249,13 @@ } }, "node_modules/@babel/parser": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.4.tgz", - "integrity": "sha512-yZbBqeM6TkpP9du/I2pUZnJsRMGGvOuIrhjzC1AwHwW+6he4mni6Bp/m8ijn0iOuZuPI2BfkCoSRunpyjnrQKg==", + "version": "7.28.5", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.5.tgz", + "integrity": "sha512-KKBU1VGYR7ORr3At5HAtUQ+TV3SzRCXmA/8OdDZiLDBIZxVyzXuztPjfLd3BV1PRAQGCMWWSHYhL0F8d5uHBDQ==", "devOptional": true, "license": "MIT", "dependencies": { - "@babel/types": "^7.28.4" + "@babel/types": "^7.28.5" }, "bin": { "parser": "bin/babel-parser.js" @@ -344,14 +344,14 @@ } }, "node_modules/@babel/types": { - "version": "7.28.4", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.4.tgz", - "integrity": "sha512-bkFqkLhh3pMBUQQkpVgWDWq/lqzc2678eUyDlTBhRqhCHFguYYGM0Efga7tYk4TogG/3x0EEl66/OQ+WGbWB/Q==", + "version": "7.28.5", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.5.tgz", + "integrity": "sha512-qQ5m48eI/MFLQ5PxQj4PFaprjyCTLI37ElWMmNs0K8Lk3dVeOdNpB3ks8jc7yM5CDmVC73eMVk/trk3fgmrUpA==", "devOptional": true, "license": "MIT", "dependencies": { "@babel/helper-string-parser": "^7.27.1", - "@babel/helper-validator-identifier": "^7.27.1" + "@babel/helper-validator-identifier": "^7.28.5" }, "engines": { "node": ">=6.9.0" @@ -1916,30 +1916,30 @@ } }, "node_modules/@vitest/coverage-v8": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.0.7.tgz", - "integrity": "sha512-MXc+kEA5EUwMMGmNt1S6CIOEl/iCmAhGZQq1QgMNC3/QpYSOxkysEi6pxWhkqJ7YT/RduoVEV5rxFxHG18V3LA==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@vitest/coverage-v8/-/coverage-v8-4.0.8.tgz", + "integrity": "sha512-wQgmtW6FtPNn4lWUXi8ZSYLpOIb92j3QCujxX3sQ81NTfQ/ORnE0HtK7Kqf2+7J9jeveMGyGyc4NWc5qy3rC4A==", "dev": true, "license": "MIT", "dependencies": { "@bcoe/v8-coverage": "^1.0.2", - "@vitest/utils": "4.0.7", - "ast-v8-to-istanbul": "^0.3.5", + "@vitest/utils": "4.0.8", + "ast-v8-to-istanbul": "^0.3.8", "debug": "^4.4.3", "istanbul-lib-coverage": "^3.2.2", "istanbul-lib-report": "^3.0.1", "istanbul-lib-source-maps": "^5.0.6", "istanbul-reports": "^3.2.0", - "magicast": "^0.3.5", - "std-env": "^3.9.0", + "magicast": "^0.5.1", + "std-env": "^3.10.0", "tinyrainbow": "^3.0.3" }, "funding": { "url": "https://opencollective.com/vitest" }, "peerDependencies": { - "@vitest/browser": "4.0.7", - "vitest": "4.0.7" + "@vitest/browser": "4.0.8", + "vitest": "4.0.8" }, "peerDependenciesMeta": { "@vitest/browser": { @@ -1948,17 +1948,17 @@ } }, "node_modules/@vitest/expect": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.7.tgz", - "integrity": "sha512-jGRG6HghnJDjljdjYIoVzX17S6uCVCBRFnsgdLGJ6CaxfPh8kzUKe/2n533y4O/aeZ/sIr7q7GbuEbeGDsWv4Q==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@vitest/expect/-/expect-4.0.8.tgz", + "integrity": "sha512-Rv0eabdP/xjAHQGr8cjBm+NnLHNoL268lMDK85w2aAGLFoVKLd8QGnVon5lLtkXQCoYaNL0wg04EGnyKkkKhPA==", "dev": true, "license": "MIT", "dependencies": { "@standard-schema/spec": "^1.0.0", "@types/chai": "^5.2.2", - "@vitest/spy": "4.0.7", - "@vitest/utils": "4.0.7", - "chai": "^6.0.1", + "@vitest/spy": "4.0.8", + "@vitest/utils": "4.0.8", + "chai": "^6.2.0", "tinyrainbow": "^3.0.3" }, "funding": { @@ -1966,15 +1966,15 @@ } }, "node_modules/@vitest/mocker": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.7.tgz", - "integrity": "sha512-OsDwLS7WnpuNslOV6bJkXVYVV/6RSc4eeVxV7h9wxQPNxnjRvTTrIikfwCbMyl8XJmW6oOccBj2Q07YwZtQcCw==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@vitest/mocker/-/mocker-4.0.8.tgz", + "integrity": "sha512-9FRM3MZCedXH3+pIh+ME5Up2NBBHDq0wqwhOKkN4VnvCiKbVxddqH9mSGPZeawjd12pCOGnl+lo/ZGHt0/dQSg==", "dev": true, "license": "MIT", "dependencies": { - "@vitest/spy": "4.0.7", + "@vitest/spy": "4.0.8", "estree-walker": "^3.0.3", - "magic-string": "^0.30.19" + "magic-string": "^0.30.21" }, "funding": { "url": "https://opencollective.com/vitest" @@ -2003,9 +2003,9 @@ } }, "node_modules/@vitest/pretty-format": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.7.tgz", - "integrity": "sha512-YY//yxqTmk29+/pK+Wi1UB4DUH3lSVgIm+M10rAJ74pOSMgT7rydMSc+vFuq9LjZLhFvVEXir8EcqMke3SVM6Q==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@vitest/pretty-format/-/pretty-format-4.0.8.tgz", + "integrity": "sha512-qRrjdRkINi9DaZHAimV+8ia9Gq6LeGz2CgIEmMLz3sBDYV53EsnLZbJMR1q84z1HZCMsf7s0orDgZn7ScXsZKg==", "dev": true, "license": "MIT", "dependencies": { @@ -2016,13 +2016,13 @@ } }, "node_modules/@vitest/runner": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.7.tgz", - "integrity": "sha512-orU1lsu4PxLEcDWfjVCNGIedOSF/YtZ+XMrd1PZb90E68khWCNzD8y1dtxtgd0hyBIQk8XggteKN/38VQLvzuw==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@vitest/runner/-/runner-4.0.8.tgz", + "integrity": "sha512-mdY8Sf1gsM8hKJUQfiPT3pn1n8RF4QBcJYFslgWh41JTfrK1cbqY8whpGCFzBl45LN028g0njLCYm0d7XxSaQQ==", "dev": true, "license": "MIT", "dependencies": { - "@vitest/utils": "4.0.7", + "@vitest/utils": "4.0.8", "pathe": "^2.0.3" }, "funding": { @@ -2030,14 +2030,14 @@ } }, "node_modules/@vitest/snapshot": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.7.tgz", - "integrity": "sha512-xJL+Nkw0OjaUXXQf13B8iKK5pI9QVtN9uOtzNHYuG/o/B7fIEg0DQ+xOe0/RcqwDEI15rud1k7y5xznBKGUXAA==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@vitest/snapshot/-/snapshot-4.0.8.tgz", + "integrity": "sha512-Nar9OTU03KGiubrIOFhcfHg8FYaRaNT+bh5VUlNz8stFhCZPNrJvmZkhsr1jtaYvuefYFwK2Hwrq026u4uPWCw==", "dev": true, "license": "MIT", "dependencies": { - "@vitest/pretty-format": "4.0.7", - "magic-string": "^0.30.19", + "@vitest/pretty-format": "4.0.8", + "magic-string": "^0.30.21", "pathe": "^2.0.3" }, "funding": { @@ -2045,9 +2045,9 @@ } }, "node_modules/@vitest/spy": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.7.tgz", - "integrity": "sha512-FW4X8hzIEn4z+HublB4hBF/FhCVaXfIHm8sUfvlznrcy1MQG7VooBgZPMtVCGZtHi0yl3KESaXTqsKh16d8cFg==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@vitest/spy/-/spy-4.0.8.tgz", + "integrity": "sha512-nvGVqUunyCgZH7kmo+Ord4WgZ7lN0sOULYXUOYuHr55dvg9YvMz3izfB189Pgp28w0vWFbEEfNc/c3VTrqrXeA==", "dev": true, "license": "MIT", "funding": { @@ -2055,14 +2055,14 @@ } }, "node_modules/@vitest/ui": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-4.0.7.tgz", - "integrity": "sha512-aIFPci9xoTmVkxpqsSKcRG/Hn0lTy421jsCehHydYeIMd+getn0Pue0JqY5cW8yZglZjMeX0YfIy5wDtQDHEcA==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@vitest/ui/-/ui-4.0.8.tgz", + "integrity": "sha512-F9jI5rSstNknPlTlPN2gcc4gpbaagowuRzw/OJzl368dvPun668Q182S8Q8P9PITgGCl5LAKXpzuue106eM4wA==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@vitest/utils": "4.0.7", + "@vitest/utils": "4.0.8", "fflate": "^0.8.2", "flatted": "^3.3.3", "pathe": "^2.0.3", @@ -2074,17 +2074,17 @@ "url": "https://opencollective.com/vitest" }, "peerDependencies": { - "vitest": "4.0.7" + "vitest": "4.0.8" } }, "node_modules/@vitest/utils": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.7.tgz", - "integrity": "sha512-HNrg9CM/Z4ZWB6RuExhuC6FPmLipiShKVMnT9JlQvfhwR47JatWLChA6mtZqVHqypE6p/z6ofcjbyWpM7YLxPQ==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/@vitest/utils/-/utils-4.0.8.tgz", + "integrity": "sha512-pdk2phO5NDvEFfUTxcTP8RFYjVj/kfLSPIN5ebP2Mu9kcIMeAQTbknqcFEyBcC4z2pJlJI9aS5UQjcYfhmKAow==", "dev": true, "license": "MIT", "dependencies": { - "@vitest/pretty-format": "4.0.7", + "@vitest/pretty-format": "4.0.8", "tinyrainbow": "^3.0.3" }, "funding": { @@ -3136,14 +3136,15 @@ } }, "node_modules/magicast": { - "version": "0.3.5", - "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.3.5.tgz", - "integrity": "sha512-L0WhttDl+2BOsybvEOLK7fW3UA0OQ0IQ2d6Zl2x/a6vVRs3bAY0ECOSHHeL5jD+SbOpOCUEi0y1DgHEn9Qn1AQ==", + "version": "0.5.1", + "resolved": "https://registry.npmjs.org/magicast/-/magicast-0.5.1.tgz", + "integrity": "sha512-xrHS24IxaLrvuo613F719wvOIv9xPHFWQHuvGUBmPnCA/3MQxKI3b+r7n1jAoDHmsbC5bRhTZYR77invLAxVnw==", "dev": true, + "license": "MIT", "dependencies": { - "@babel/parser": "^7.25.4", - "@babel/types": "^7.25.4", - "source-map-js": "^1.2.0" + "@babel/parser": "^7.28.5", + "@babel/types": "^7.28.5", + "source-map-js": "^1.2.1" } }, "node_modules/make-dir": { @@ -4144,9 +4145,9 @@ } }, "node_modules/vite": { - "version": "7.2.1", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.1.tgz", - "integrity": "sha512-qTl3VF7BvOupTR85Zc561sPEgxyUSNSvTQ9fit7DEMP7yPgvvIGm5Zfa1dOM+kOwWGNviK9uFM9ra77+OjK7lQ==", + "version": "7.2.2", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz", + "integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==", "dev": true, "license": "MIT", "peer": true, @@ -4266,27 +4267,27 @@ } }, "node_modules/vitest": { - "version": "4.0.7", - "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.7.tgz", - "integrity": "sha512-xQroKAadK503CrmbzCISvQUjeuvEZzv6U0wlnlVFOi5i3gnzfH4onyQ29f3lzpe0FresAiTAd3aqK0Bi/jLI8w==", + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/vitest/-/vitest-4.0.8.tgz", + "integrity": "sha512-urzu3NCEV0Qa0Y2PwvBtRgmNtxhj5t5ULw7cuKhIHh3OrkKTLlut0lnBOv9qe5OvbkMH2g38G7KPDCTpIytBVg==", "dev": true, "license": "MIT", "peer": true, "dependencies": { - "@vitest/expect": "4.0.7", - "@vitest/mocker": "4.0.7", - "@vitest/pretty-format": "4.0.7", - "@vitest/runner": "4.0.7", - "@vitest/snapshot": "4.0.7", - "@vitest/spy": "4.0.7", - "@vitest/utils": "4.0.7", + "@vitest/expect": "4.0.8", + "@vitest/mocker": "4.0.8", + "@vitest/pretty-format": "4.0.8", + "@vitest/runner": "4.0.8", + "@vitest/snapshot": "4.0.8", + "@vitest/spy": "4.0.8", + "@vitest/utils": "4.0.8", "debug": "^4.4.3", "es-module-lexer": "^1.7.0", "expect-type": "^1.2.2", - "magic-string": "^0.30.19", + "magic-string": "^0.30.21", "pathe": "^2.0.3", "picomatch": "^4.0.3", - "std-env": "^3.9.0", + "std-env": "^3.10.0", "tinybench": "^2.9.0", "tinyexec": "^0.3.2", "tinyglobby": "^0.2.15", @@ -4307,10 +4308,10 @@ "@edge-runtime/vm": "*", "@types/debug": "^4.1.12", "@types/node": "^20.0.0 || ^22.0.0 || >=24.0.0", - "@vitest/browser-playwright": "4.0.7", - "@vitest/browser-preview": "4.0.7", - "@vitest/browser-webdriverio": "4.0.7", - "@vitest/ui": "4.0.7", + "@vitest/browser-playwright": "4.0.8", + "@vitest/browser-preview": "4.0.8", + "@vitest/browser-webdriverio": "4.0.8", + "@vitest/ui": "4.0.8", "happy-dom": "*", "jsdom": "*" }, diff --git a/package.json b/package.json index 2d64bf3..00d6063 100644 --- a/package.json +++ b/package.json @@ -34,12 +34,12 @@ "@types/react": "^19.2.2", "@types/react-dom": "^19.2.2", "@vitejs/plugin-react": "^5.1.0", - "@vitest/coverage-v8": "^4.0.7", - "@vitest/ui": "^4.0.7", + "@vitest/coverage-v8": "^4.0.8", + "@vitest/ui": "^4.0.8", "typescript": "^5.9.3", - "vite": "^7.2.1", + "vite": "^7.2.2", "vite-plugin-dts": "~4.5.4", "vite-tsconfig-paths": "^5.1.4", - "vitest": "^4.0.7" + "vitest": "^4.0.8" } } diff --git a/src/App.tsx b/src/App.tsx index 4c93138..33cc913 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -80,11 +80,11 @@ function App() { useEffect(() => { if (allThemes && themeName) { if (currentThemePlaylist === 'All') { - if (themeName !== 'random') { + if (themeName === 'random') { + handleThemeChange(allThemes, false); + } else { const temp = allThemes.find((t: Theme) => t.name === themeName); setTheme(temp); - } else { - handleThemeChange(allThemes, false); } } else if (currentThemePlaylist === 'Time of Day') { const themeList = JSON.parse( diff --git a/src/components/Columns/SearchHistoryColumns.tsx b/src/components/Columns/SearchHistoryColumns.tsx index 09c5c73..6d1946f 100644 --- a/src/components/Columns/SearchHistoryColumns.tsx +++ b/src/components/Columns/SearchHistoryColumns.tsx @@ -45,8 +45,11 @@ export const SearchHistoryColumns = ( ), - size: 64, - maxSize: 64, + meta: { + filterVariant: 'counter', + }, + size: 32, + maxSize: 32, enableSorting: false, }), columnHelper.accessor('prefix', { @@ -64,26 +67,43 @@ export const SearchHistoryColumns = ( if (value === null) return true; return row.getValue(id) === value; }, + size: 32, + maxSize: 32, }), columnHelper.accessor('provider', { id: 'provider', - cell: ({ cell }: any) => {cell.getValue()}, + cell: ({ cell }: any) => ( + + {cell.getValue()} + + ), header: () => Provider, meta: { filterVariant: 'mantineSelect', }, + size: 128, + maxSize: 128, }), columnHelper.accessor('searchTerm', { id: 'searchTerm', cell: ({ cell }: any) => ( - - {cell.getValue()} - + + + {cell.getValue()} + + ), header: () => Search String, meta: { filterVariant: 'text', }, + maxSize: 1920, }), columnHelper.accessor('dateTimeStamp', { id: 'dateTimeStamp', @@ -115,5 +135,7 @@ export const SearchHistoryColumns = ( } return true; }, + size: 132, + maxSize: 132, }), ]; diff --git a/src/components/DataTable/DataTable.tsx b/src/components/DataTable/DataTable.tsx index 6d1734a..e0d23b1 100644 --- a/src/components/DataTable/DataTable.tsx +++ b/src/components/DataTable/DataTable.tsx @@ -1,4 +1,4 @@ -import { Button, Group } from '@mantine/core'; +import { Button, Group, Text } from '@mantine/core'; import { type ColumnFiltersState, flexRender, @@ -10,7 +10,7 @@ import { type SortingState, useReactTable, } 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'; export function DataTable({ @@ -55,32 +55,47 @@ export function DataTable({ globalFilterFn: 'includesString', onGlobalFilterChange: setGlobalFilter, }); + + useEffect(() => { + if (!filtersEnabled) { + setColumnFilters([]); + } + }, [filtersEnabled]); return ( - +
{table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( - ))} @@ -158,6 +179,26 @@ export function DataTable({ ))} ))} + + +
+ {header.isPlaceholder ? null : ( <> + {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ + Total Entries: {table.getRowCount()} + +
); diff --git a/src/components/DataTable/components/Filter.tsx b/src/components/DataTable/components/Filter.tsx index ed7ec84..5ca40f3 100644 --- a/src/components/DataTable/components/Filter.tsx +++ b/src/components/DataTable/components/Filter.tsx @@ -8,6 +8,7 @@ import { RangeSlider, Select, Stack, + Text, } from '@mantine/core'; import { DatePickerInput } from '@mantine/dates'; import type { Column, RowData } from '@tanstack/react-table'; @@ -26,11 +27,20 @@ declare module '@tanstack/react-table' { | 'multiSelect' | 'slider' | 'checkbox' + | 'counter' | 'none'; } } -export function Filter({ column, options }: { column: Column; options: any }) { +export function Filter({ + column, + options, + resultCount, +}: { + column: Column; + options: any; + resultCount?: number; +}) { const columnFilterValue = column.getFilterValue(); const { filterVariant } = column.columnDef.meta ?? {}; const optionsFilter: OptionsFilter = ({ options, search }) => { @@ -88,12 +98,15 @@ export function Filter({ column, options }: { column: Column; options: label: selectClasses.menuSelectLabel, options: selectClasses.menuSelectOptions, option: selectClasses.menuSelectOption, - dropdown: selectClasses.dropdown, }} - data={options.map((option: ComboboxItem) => { - return { value: option, label: option }; - })} + data={options + .map((option: ComboboxItem) => { + return { value: option, label: option }; + }) + .sort((a: ComboboxItem, b: ComboboxItem) => a.label.localeCompare(b.label))} onChange={(e: any) => column.setFilterValue(e)} + w={'auto'} + clearable /> ) : filterVariant === 'multiSelect' ? ( ; options: column.setFilterValue(value.target.checked)} /> // See faceted column filters example for datalist search suggestions + ) : filterVariant === 'counter' ? ( + + + {resultCount}/{options.length} + + + // See faceted column filters example for datalist search suggestions ) : ( Z', 'Z>A', 'Newest', 'Oldest']} + className={selectClasses.settingsItem} classNames={{ wrapper: selectClasses.menuSelectWrapper, root: selectClasses.menuSelectRoot, diff --git a/src/pages/settings/components/Search/SearchHistory.tsx b/src/pages/settings/components/Search/SearchHistory.tsx index 210f400..47c1fc8 100644 --- a/src/pages/settings/components/Search/SearchHistory.tsx +++ b/src/pages/settings/components/Search/SearchHistory.tsx @@ -108,23 +108,6 @@ const SearchHistory = () => { setGlobalFilter={setGlobalFilter} /> - - - Results: {searchHistory.length} - - diff --git a/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx b/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx index d93a354..41dc9e4 100644 --- a/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx +++ b/src/pages/settings/components/Theming/ThemePlaylists/ThemePlaylists.tsx @@ -221,15 +221,15 @@ export function ThemePlaylists() { a.name === 'Time of Day', - )[0]?.id ?? undefined, + )?.id ?? undefined, name: 'Time of Day', default: 1, themeList: - themePlaylists?.filter( + themePlaylists?.find( (a: ThemePlaylist) => a.name === 'Time of Day', - )[0]?.themeList ?? '[]', + )?.themeList ?? '[]', }} handleOpen={handleOpen} allThemes={allThemeData} diff --git a/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistCard.tsx b/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistCard.tsx index ca7e807..862019a 100644 --- a/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistCard.tsx +++ b/src/pages/settings/components/Theming/ThemePlaylists/components/ThemePlaylistCard.tsx @@ -67,7 +67,7 @@ export function ThemePlaylistCard({ paddingLeft: '.25rem', backgroundColor: 'var(--mantine-color-border-0)', borderRadius: '4px', - color: 'var(--mantine-color-background-0)', + color: 'var(--mantine-color-primary-0)', zIndex: 3, }} > @@ -130,44 +130,7 @@ export function ThemePlaylistCard({ > {hover && } - {cardPlaylist.name !== 'Time of Day' ? ( - <> - - Count: {themeList.length} - - - - {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 ( - - ); - })} - - - - ) : ( + {cardPlaylist.name === 'Time of Day' ? ( <> + ) : ( + <> + + Count: {themeList.length} + + + + {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 ( + + ); + })} + + + )}