Redesign sidebar / header and other misc. improvements (#24)

* Remove 1920px max width

* Fix position of list controls menu

* Match size and color of search input

* Adjust library header sizing

* Move app menu to sidebar

* Increase row buffer on play queue list

* Fix query builder styles

* Fix playerbar slider track bg

* Adjust titlebar styles

* Fix invalid modal prop

* Various adjustments to detail pages

* Fix sidebar height calculation

* Fix list null indicators, add filter indicator

* Adjust playqueue styles

* Fix jellyfin releaseYear normalization

* Suppress browser context menu on ag-grid

* Add radius to drawer queue -- normalize layout

* Add modal styles to provider theme

* Fix playlist song list pagination

* Add disc number to albums with more than one disc

* Fix query builder boolean values

* Adjust input placeholder color

* Properly handle rating/favorite from context menu on table

* Conform dropdown menu styles to context menu

* Increase sort type select width

* Fix drawer queue radius

* Change primary color

* Prevent volume wheel from invalid values

* Add icons to query builder dropdowns

* Update notification styles

* Update scrollbar thumb styles

* Remove "add to playlist" on smart playlists

* Fix "add to playlist" from context menu

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

@@ -1,58 +1,29 @@
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Flex } from '@mantine/core';
+import { Stack } from '@mantine/core';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
-import styled from 'styled-components';
 import { PlayQueueListControls } from './play-queue-list-controls';
 import { Song } from '/@/renderer/api/types';
-
-const BackgroundImageOverlay = styled.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 10;
-  width: 100%;
-  height: 100%;
-  background: rgba(0, 0, 0, 30%), var(--background-noise);
-`;
+import { PageHeader, Paper, VirtualGridContainer } from '/@/renderer/components';
 
 export const SidebarPlayQueue = () => {
   const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
 
   return (
-    <>
-      <Flex
-        bg="var(--titlebar-bg)"
-        h="65px"
-        sx={{ position: 'relative' }}
-        w="100%"
-      >
-        <BackgroundImageOverlay />
-        <Flex
-          h="100%"
-          mr="160px"
-          sx={{
-            WebkitAppRegion: 'drag',
-            background: 'var(--titlebar-bg)',
-          }}
-          w="100%"
-        />
-      </Flex>
-      <Flex
-        direction="column"
-        h="calc(100% - 65px)"
-        sx={{ borderLeft: '2px solid var(--generic-border-color)' }}
-        w="100%"
-      >
-        <PlayQueue
-          ref={queueRef}
-          type="sideQueue"
-        />
+    <VirtualGridContainer>
+      <Stack>
+        <PageHeader backgroundColor="var(--titlebar-bg)" />
+      </Stack>
+      <Paper>
         <PlayQueueListControls
           tableRef={queueRef}
           type="sideQueue"
         />
-      </Flex>
-    </>
+      </Paper>
+      <PlayQueue
+        ref={queueRef}
+        type="sideQueue"
+      />
+    </VirtualGridContainer>
   );
 };