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>
     );