Refactor now playing route with controls

packages/renderer/src/features/now-playing/components/now-playing-header.tsx

@@ -27,7 +27,10 @@ export const NowPlayingHeader = () => {
         })
         .then((color) => {
           const isDark = color.isDark;
-          setHeaderColor({ isDark, value: getHeaderColor(color.rgb, theme === 'dark' ? 0.3 : 1) });
+          setHeaderColor({
+            isDark,
+            value: getHeaderColor(color.rgb, theme === 'dark' ? 0.3 : 0.8),
+          });
         })
         .catch((e) => {
           console.log(e);

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

@@ -1,18 +1,34 @@
-import { Box } from '@mantine/core';
-import styled from 'styled-components';
+import { useRef } from 'react';
+import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
+import { Stack } from '@mantine/core';
+import { NowPlayingHeader } from '/@/features/now-playing/components/now-playing-header';
 import { PlayQueue } from '/@/features/now-playing/components/play-queue';
-
-const QueueContainer = styled(Box)`
-  position: relative;
-  width: 100%;
-  height: 100%;
-`;
+import { PlayQueueListControls } from '/@/features/now-playing/components/play-queue-list-controls';
+import type { Song } from '/@/api/types';
+import { AnimatedPage } from '/@/features/shared';
 
 const NowPlayingRoute = () => {
+  const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
+
   return (
-    <QueueContainer>
-      <PlayQueue type="nowPlaying" />
-    </QueueContainer>
+    <AnimatedPage>
+      <Stack
+        pb="1rem"
+        spacing={0}
+        sx={{ height: '100%' }}
+      >
+        <NowPlayingHeader />
+        <PlayQueue
+          ref={queueRef}
+          type="nowPlaying"
+        />
+
+        <PlayQueueListControls
+          tableRef={queueRef}
+          type="nowPlaying"
+        />
+      </Stack>
+    </AnimatedPage>
   );
 };