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/drawer-play-queue.tsx

@@ -1,6 +1,6 @@
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Stack } from '@mantine/core';
+import { Box, Flex } from '@mantine/core';
 import { PlayQueueListControls } from './play-queue-list-controls';
 import { Song } from '/@/renderer/api/types';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
@@ -9,18 +9,29 @@ export const DrawerPlayQueue = () => {
   const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
 
   return (
-    <Stack
+    <Flex
+      direction="column"
       h="100%"
-      spacing={0}
+      sx={{
+        borderTopLeftRadius: '5px',
+        borderTopRightRadius: '5px',
+      }}
     >
-      <PlayQueue
-        ref={queueRef}
-        type="sideQueue"
-      />
-      <PlayQueueListControls
-        tableRef={queueRef}
-        type="sideQueue"
-      />
-    </Stack>
+      <Box
+        bg="var(--main-bg)"
+        sx={{ borderTopLeftRadius: '5px', borderTopRightRadius: '5px' }}
+      >
+        <PlayQueueListControls
+          tableRef={queueRef}
+          type="sideQueue"
+        />
+      </Box>
+      <Flex h="100%">
+        <PlayQueue
+          ref={queueRef}
+          type="sideQueue"
+        />
+      </Flex>
+    </Flex>
   );
 };

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

@@ -1,20 +1,15 @@
-import { Group } from '@mantine/core';
-import { PageHeader, TextTitle } from '/@/renderer/components';
+import { PageHeader } from '/@/renderer/components';
+import { LibraryHeaderBar } from '/@/renderer/features/shared';
 
 export const NowPlayingHeader = () => {
   // const currentSong = useCurrentSong();
   // const theme = useTheme();
 
   return (
-    <PageHeader>
-      <Group p="1rem">
-        <TextTitle
-          order={2}
-          weight={700}
-        >
-          Queue
-        </TextTitle>
-      </Group>
+    <PageHeader backgroundColor="var(--titlebar-bg)">
+      <LibraryHeaderBar>
+        <LibraryHeaderBar.Title>Queue</LibraryHeaderBar.Title>
+      </LibraryHeaderBar>
     </PageHeader>
   );
 };

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

@@ -138,13 +138,16 @@ export const PlayQueueListControls = ({ type, tableRef }: PlayQueueListOptionsPr
         </Button>
       </Group>
       <Group>
-        <Popover transition="fade">
+        <Popover
+          position="top-end"
+          transition="fade"
+        >
           <Popover.Target>
             <Button
               compact
               size="md"
               tooltip={{ label: 'Configure' }}
-              variant="default"
+              variant="subtle"
             >
               <RiListSettingsLine size="1.1rem" />
             </Button>

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

@@ -8,11 +8,7 @@ import type {
 } from '@ag-grid-community/core';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
 import '@ag-grid-community/styles/ag-theme-alpine.css';
-import {
-  VirtualGridAutoSizerContainer,
-  VirtualGridContainer,
-  getColumnDefs,
-} from '/@/renderer/components';
+import { VirtualGridAutoSizerContainer, getColumnDefs } from '/@/renderer/components';
 import {
   useAppStoreActions,
   useCurrentSong,
@@ -190,29 +186,28 @@ export const PlayQueue = forwardRef(({ type }: QueueProps, ref: Ref<any>) => {
 
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback}>
-      <VirtualGridContainer>
-        <VirtualGridAutoSizerContainer>
-          <VirtualTable
-            ref={mergedRef}
-            alwaysShowHorizontalScroll
-            rowDragEntireRow
-            rowDragMultiRow
-            autoFitColumns={tableConfig.autoFit}
-            columnDefs={columnDefs}
-            getRowId={(data) => data.data.uniqueId}
-            rowClassRules={rowClassRules}
-            rowData={queue}
-            rowHeight={tableConfig.rowHeight || 40}
-            onCellDoubleClicked={handleDoubleClick}
-            onColumnMoved={handleColumnChange}
-            onColumnResized={debouncedColumnChange}
-            onDragStarted={handleDragStart}
-            onGridReady={handleGridReady}
-            onGridSizeChanged={handleGridSizeChange}
-            onRowDragEnd={handleDragEnd}
-          />
-        </VirtualGridAutoSizerContainer>
-      </VirtualGridContainer>
+      <VirtualGridAutoSizerContainer>
+        <VirtualTable
+          ref={mergedRef}
+          alwaysShowHorizontalScroll
+          rowDragEntireRow
+          rowDragMultiRow
+          autoFitColumns={tableConfig.autoFit}
+          columnDefs={columnDefs}
+          getRowId={(data) => data.data.uniqueId}
+          rowBuffer={50}
+          rowClassRules={rowClassRules}
+          rowData={queue}
+          rowHeight={tableConfig.rowHeight || 40}
+          onCellDoubleClicked={handleDoubleClick}
+          onColumnMoved={handleColumnChange}
+          onColumnResized={debouncedColumnChange}
+          onDragStarted={handleDragStart}
+          onGridReady={handleGridReady}
+          onGridSizeChanged={handleGridSizeChange}
+          onRowDragEnd={handleDragEnd}
+        />
+      </VirtualGridAutoSizerContainer>
     </ErrorBoundary>
   );
 });

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

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

@@ -1,33 +1,30 @@
 import { useRef } from 'react';
 import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
-import { Flex, Stack } from '@mantine/core';
 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 type { Song } from '/@/renderer/api/types';
 import { AnimatedPage } from '/@/renderer/features/shared';
+import { Paper, VirtualGridContainer } from '/@/renderer/components';
+import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
 
 const NowPlayingRoute = () => {
   const queueRef = useRef<{ grid: AgGridReactType<Song> } | null>(null);
 
   return (
     <AnimatedPage>
-      <Stack
-        h="100%"
-        spacing={0}
-      >
+      <VirtualGridContainer>
         <NowPlayingHeader />
-        <PlayQueue
-          ref={queueRef}
-          type="nowPlaying"
-        />
-        <Flex sx={{ borderTop: '1px solid var(--generic-border-color)' }}>
+        <Paper sx={{ borderTop: '1px solid var(--generic-border-color)' }}>
           <PlayQueueListControls
             tableRef={queueRef}
             type="nowPlaying"
           />
-        </Flex>
-      </Stack>
+        </Paper>
+        <PlayQueue
+          ref={queueRef}
+          type="nowPlaying"
+        />
+      </VirtualGridContainer>
     </AnimatedPage>
   );
 };