From 6d50454e723d821b732144ba9f26e41ebfce6c20 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sat, 15 Nov 2025 13:14:56 -0800
Subject: [PATCH] reimplement now playing route

---
 .../now-playing/routes/now-playing-route.tsx  | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/src/renderer/features/now-playing/routes/now-playing-route.tsx b/src/renderer/features/now-playing/routes/now-playing-route.tsx
index c68f9c3f0..028739de7 100644
--- a/src/renderer/features/now-playing/routes/now-playing-route.tsx
+++ b/src/renderer/features/now-playing/routes/now-playing-route.tsx
@@ -1,21 +1,26 @@
-import type { Song } from '/@/shared/types/domain-types';
-import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-
 import { useRef, useState } from 'react';
 
+import { ItemListHandle } from '/@/renderer/components/item-list/types';
+import { NowPlayingHeader } from '/@/renderer/features/now-playing/components/now-playing-header';
+import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
+import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
 import { AnimatedPage } from '/@/renderer/features/shared/components/animated-page';
+import { ItemListKey } from '/@/shared/types/types';
 
 const NowPlayingRoute = () => {
-    const queueRef = useRef<null | { grid: AgGridReactType<Song> }>(null);
+    const queueRef = useRef<ItemListHandle | null>(null);
     const [search, setSearch] = useState<string | undefined>(undefined);
 
     return (
         <AnimatedPage>
-            {/* <VirtualGridContainer>
-                <NowPlayingHeader />
-                <PlayQueueListControls tableRef={queueRef} type="nowPlaying" />
-                <PlayQueue ref={queueRef} type="nowPlaying" />
-            </VirtualGridContainer> */}
+            <NowPlayingHeader />
+            <PlayQueueListControls
+                handleSearch={setSearch}
+                searchTerm={search}
+                tableRef={queueRef}
+                type={ItemListKey.QUEUE_SONG}
+            />
+            <PlayQueue listKey={ItemListKey.QUEUE_SONG} searchTerm={search} />
         </AnimatedPage>
     );
 };