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/artists/components/album-artist-detail-top-songs-list-header.tsx

@@ -1,16 +1,9 @@
-import { Flex, Group } from '@mantine/core';
-import { RiMoreFill } from 'react-icons/ri';
+import { RiAddBoxFill, RiAddCircleFill, RiMoreFill, RiPlayFill } from 'react-icons/ri';
 import { QueueSong } from '/@/renderer/api/types';
-import {
-  Button,
-  DropdownMenu,
-  PageHeader,
-  TextTitle,
-  Badge,
-  SpinnerIcon,
-} from '/@/renderer/components';
+import { Button, DropdownMenu, PageHeader, SpinnerIcon, Paper } from '/@/renderer/components';
 import { usePlayQueueAdd } from '/@/renderer/features/player';
-import { useContainerQuery } from '/@/renderer/hooks';
+import { LibraryHeaderBar } from '/@/renderer/features/shared';
+import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
 import { Play } from '/@/renderer/types';
 
 interface AlbumArtistDetailTopSongsListHeaderProps {
@@ -25,7 +18,7 @@ export const AlbumArtistDetailTopSongsListHeader = ({
   data,
 }: AlbumArtistDetailTopSongsListHeaderProps) => {
   const handlePlayQueueAdd = usePlayQueueAdd();
-  const cq = useContainerQuery();
+  const playButtonBehavior = usePlayButtonBehavior();
 
   const handlePlay = async (play: Play) => {
     handlePlayQueueAdd?.({
@@ -36,61 +29,49 @@ export const AlbumArtistDetailTopSongsListHeader = ({
 
   return (
     <PageHeader p="1rem">
-      <Flex
-        ref={cq.ref}
-        direction="row"
-        justify="space-between"
-      >
-        <Flex
-          align="center"
-          gap="md"
-          justify="center"
+      <LibraryHeaderBar>
+        <LibraryHeaderBar.PlayButton onClick={() => handlePlay(playButtonBehavior)} />
+        <LibraryHeaderBar.Title>Top songs from {title}</LibraryHeaderBar.Title>
+        <Paper
+          fw="600"
+          px="1rem"
+          py="0.3rem"
+          radius="sm"
         >
-          <Button
-            compact
-            size="xl"
-            sx={{ paddingLeft: 0, paddingRight: 0 }}
-            variant="subtle"
-          >
-            <Group noWrap>
-              <TextTitle
-                maw="20vw"
-                order={2}
-                overflow="hidden"
-                weight={700}
-              >
-                {title}
-              </TextTitle>
-              <Badge
-                radius="xl"
-                size="lg"
-              >
-                {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
-              </Badge>
-            </Group>
-          </Button>
-          <DropdownMenu position="bottom-start">
-            <DropdownMenu.Target>
-              <Button
-                compact
-                fw="600"
-                variant="subtle"
-              >
-                <RiMoreFill size={15} />
-              </Button>
-            </DropdownMenu.Target>
-            <DropdownMenu.Dropdown>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.NOW)}>Play</DropdownMenu.Item>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.LAST)}>
-                Add to queue
-              </DropdownMenu.Item>
-              <DropdownMenu.Item onClick={() => handlePlay(Play.NEXT)}>
-                Add to queue next
-              </DropdownMenu.Item>
-            </DropdownMenu.Dropdown>
-          </DropdownMenu>
-        </Flex>
-      </Flex>
+          {itemCount === null || itemCount === undefined ? <SpinnerIcon /> : itemCount}
+        </Paper>
+        <DropdownMenu position="bottom-start">
+          <DropdownMenu.Target>
+            <Button
+              compact
+              fw="600"
+              variant="subtle"
+            >
+              <RiMoreFill size={15} />
+            </Button>
+          </DropdownMenu.Target>
+          <DropdownMenu.Dropdown>
+            <DropdownMenu.Item
+              icon={<RiPlayFill />}
+              onClick={() => handlePlay(Play.NOW)}
+            >
+              Play
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              icon={<RiAddBoxFill />}
+              onClick={() => handlePlay(Play.LAST)}
+            >
+              Add to queue
+            </DropdownMenu.Item>
+            <DropdownMenu.Item
+              icon={<RiAddCircleFill />}
+              onClick={() => handlePlay(Play.NEXT)}
+            >
+              Add to queue next
+            </DropdownMenu.Item>
+          </DropdownMenu.Dropdown>
+        </DropdownMenu>
+      </LibraryHeaderBar>
     </PageHeader>
   );
 };