feat: add filtering for now playing view and sidebar

src/renderer/features/now-playing/components/drawer-play-queue.tsx

@@ -1,6 +1,6 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
@@ -9,6 +9,7 @@ import { Song } from '/@/shared/types/domain-types';
 
 export const DrawerPlayQueue = () => {
     const queueRef = useRef<null | { grid: AgGridReactType<Song> }>(null);
+    const [search, setSearch] = useState<string | undefined>(undefined);
 
     return (
         <Flex direction="column" h="100%">
@@ -18,10 +19,15 @@ export const DrawerPlayQueue = () => {
                     borderRadius: '10px',
                 }}
             >
-                <PlayQueueListControls tableRef={queueRef} type="sideQueue" />
+                <PlayQueueListControls
+                    handleSearch={setSearch}
+                    searchTerm={search}
+                    tableRef={queueRef}
+                    type="sideQueue"
+                />
             </div>
             <Flex bg="var(--theme-colors-background)" h="100%" mb="0.6rem">
-                <PlayQueue ref={queueRef} type="sideQueue" />
+                <PlayQueue ref={queueRef} searchTerm={search} type="sideQueue" />
             </Flex>
         </Flex>
     );

src/renderer/features/now-playing/components/play-queue-list-controls.tsx

@@ -1,11 +1,12 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import type { MutableRefObject } from 'react';
 
 import isElectron from 'is-electron';
+import { type MutableRefObject, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { TableConfigDropdown } from '/@/renderer/components/virtual-table';
 import { updateSong } from '/@/renderer/features/player/update-remote-song';
+import { SearchInput } from '/@/renderer/features/shared/components/search-input';
 import { usePlayerControls, useQueueControls } from '/@/renderer/store';
 import { usePlayerStore, useSetCurrentTime } from '/@/renderer/store/player.store';
 import { usePlaybackType } from '/@/renderer/store/settings.store';
@@ -19,11 +20,18 @@ import { PlaybackType, TableType } from '/@/shared/types/types';
 const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
 
 interface PlayQueueListOptionsProps {
+    handleSearch: (value: string) => void;
+    searchTerm?: string;
     tableRef: MutableRefObject<null | { grid: AgGridReactType<Song> }>;
     type: TableType;
 }
 
-export const PlayQueueListControls = ({ tableRef, type }: PlayQueueListOptionsProps) => {
+export const PlayQueueListControls = ({
+    handleSearch,
+    searchTerm,
+    tableRef,
+    type,
+}: PlayQueueListOptionsProps) => {
     const { t } = useTranslation();
     const {
         clearQueue,
@@ -119,6 +127,14 @@ export const PlayQueueListControls = ({ tableRef, type }: PlayQueueListOptionsPr
         }
     };
 
+    const handleSearchTerm = useCallback(
+        (term: string) => {
+            handleSearch(term);
+            tableRef.current?.grid.api.redrawRows();
+        },
+        [handleSearch, tableRef],
+    );
+
     return (
         <Group
             justify="space-between"
@@ -172,6 +188,10 @@ export const PlayQueueListControls = ({ tableRef, type }: PlayQueueListOptionsPr
                     tooltip={{ label: t('action.clearQueue', { postProcess: 'sentenceCase' }) }}
                     variant="subtle"
                 />
+                <SearchInput
+                    onChange={(e) => handleSearchTerm(e.target.value)}
+                    value={searchTerm}
+                />
             </Group>
             <Group>
                 <Popover position="top-end" transitionProps={{ transition: 'fade' }}>

src/renderer/features/now-playing/components/play-queue.tsx

@@ -39,6 +39,7 @@ import {
     useSettingsStoreActions,
     useTableSettings,
 } from '/@/renderer/store/settings.store';
+import { searchSongs } from '/@/renderer/utils/search-songs';
 import { setQueue, setQueueNext } from '/@/renderer/utils/set-transcoded-queue-data';
 import { LibraryItem, QueueSong } from '/@/shared/types/domain-types';
 import { PlaybackType, TableType } from '/@/shared/types/types';
@@ -46,10 +47,11 @@ import { PlaybackType, TableType } from '/@/shared/types/types';
 const mpvPlayer = isElectron() ? window.api.mpvPlayer : null;
 
 type QueueProps = {
+    searchTerm?: string;
     type: TableType;
 };
 
-export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
+export const PlayQueue = forwardRef(({ searchTerm, type }: QueueProps, ref: Ref<any>) => {
     const tableRef = useRef<AgGridReactType | null>(null);
     const mergedRef = useMergedRef(ref, tableRef);
     const queue = useDefaultQueue();
@@ -67,6 +69,14 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
     const isFocused = useAppFocus();
     const isFocusedRef = useRef<boolean>(isFocused);
 
+    const songs = useMemo(() => {
+        if (searchTerm) {
+            return searchSongs(queue, searchTerm);
+        }
+
+        return queue;
+    }, [queue, searchTerm]);
+
     useEffect(() => {
         if (tableRef.current) {
             setGridApi(tableRef.current);
@@ -276,7 +286,7 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
                     ref={mergedRef}
                     rowBuffer={50}
                     rowClassRules={rowClassRules}
-                    rowData={queue}
+                    rowData={songs}
                     rowDragEntireRow
                     rowDragMultiRow
                     rowHeight={tableConfig.rowHeight || 40}

src/renderer/features/now-playing/components/sidebar-play-queue.tsx

@@ -1,6 +1,6 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 
 import { PlayQueueListControls } from './play-queue-list-controls';
 
@@ -13,15 +13,21 @@ import { Platform } from '/@/shared/types/types';
 
 export const SidebarPlayQueue = () => {
     const queueRef = useRef<null | { grid: AgGridReactType<Song> }>(null);
+    const [search, setSearch] = useState<string | undefined>(undefined);
     const { windowBarStyle } = useWindowSettings();
 
     const isWeb = windowBarStyle === Platform.WEB;
     return (
         <VirtualGridContainer>
             <Box display={!isWeb ? 'flex' : undefined} h="65px">
-                <PlayQueueListControls tableRef={queueRef} type="sideQueue" />
+                <PlayQueueListControls
+                    handleSearch={setSearch}
+                    searchTerm={search}
+                    tableRef={queueRef}
+                    type="sideQueue"
+                />
             </Box>
-            <PlayQueue ref={queueRef} type="sideQueue" />
+            <PlayQueue ref={queueRef} searchTerm={search} type="sideQueue" />
         </VirtualGridContainer>
     );
 };

src/renderer/features/now-playing/routes/now-playing-route.tsx

@@ -1,7 +1,7 @@
 import type { Song } from '/@/shared/types/domain-types';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 
-import { useRef } from 'react';
+import { useRef, useState } from 'react';
 
 import { VirtualGridContainer } from '/@/renderer/components/virtual-grid';
 import { NowPlayingHeader } from '/@/renderer/features/now-playing/components/now-playing-header';
@@ -11,13 +11,19 @@ import { AnimatedPage } from '/@/renderer/features/shared';
 
 const NowPlayingRoute = () => {
     const queueRef = useRef<null | { grid: AgGridReactType<Song> }>(null);
+    const [search, setSearch] = useState<string | undefined>(undefined);
 
     return (
         <AnimatedPage>
             <VirtualGridContainer>
                 <NowPlayingHeader />
-                <PlayQueueListControls tableRef={queueRef} type="nowPlaying" />
+                <PlayQueueListControls
-                <PlayQueue ref={queueRef} type="nowPlaying" />
+                    handleSearch={setSearch}
+                    searchTerm={search}
+                    tableRef={queueRef}
+                    type="nowPlaying"
+                />
+                <PlayQueue ref={queueRef} searchTerm={search} type="nowPlaying" />
             </VirtualGridContainer>
         </AnimatedPage>
     );

src/renderer/features/playlists/routes/playlist-detail-song-list-route.tsx

@@ -1,7 +1,6 @@
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 
 import { closeAllModals, openModal } from '@mantine/modals';
-import Fuse from 'fuse.js';
 import { motion } from 'motion/react';
 import { useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -19,6 +18,7 @@ import { usePlaylistSongList } from '/@/renderer/features/playlists/queries/play
 import { AnimatedPage } from '/@/renderer/features/shared';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useCurrentServer, usePlaylistDetailStore } from '/@/renderer/store';
+import { searchSongs } from '/@/renderer/utils/search-songs';
 import { ActionIcon } from '/@/shared/components/action-icon/action-icon';
 import { Box } from '/@/shared/components/box/box';
 import { Group } from '/@/shared/components/group/group';
@@ -162,20 +162,7 @@ const PlaylistDetailSongListRoute = () => {
             const searchTerm = page?.table.id[playlistId]?.filter?.searchTerm;
 
             if (searchTerm) {
-                const fuse = new Fuse(items, {
+                items = searchSongs(items, searchTerm);
-                    fieldNormWeight: 1,
-                    ignoreLocation: true,
-                    keys: [
-                        'name',
-                        'album',
-                        {
-                            getFn: (song) => song.artists.map((artist) => artist.name),
-                            name: 'artist',
-                        },
-                    ],
-                    threshold: 0,
-                });
-                items = fuse.search(searchTerm).map((item) => item.item);
             }
 
             const sortBy = page?.table.id[playlistId]?.filter?.sortBy || SongListSort.ID;

src/renderer/utils/search-songs.ts

@@ -0,0 +1,20 @@
+import Fuse from 'fuse.js';
+
+import { Song } from '/@/shared/types/domain-types';
+
+export const searchSongs = (songs: Song[], searchTerm: string) => {
+    const fuse = new Fuse(songs, {
+        fieldNormWeight: 1,
+        ignoreLocation: true,
+        keys: [
+            'name',
+            'album',
+            {
+                getFn: (song) => song.artists.map((artist) => artist.name),
+                name: 'artist',
+            },
+        ],
+        threshold: 0,
+    });
+    return fuse.search(searchTerm).map((item) => item.item);
+};