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/shared/components/library-header-bar.tsx

@@ -15,6 +15,7 @@ export const LibraryHeaderBar = ({ children }: LibraryHeaderBarProps) => {
       h="100%"
       px="1rem"
       spacing="md"
+      w="100%"
     >
       {children}
     </Group>

src/renderer/features/shared/components/library-header.tsx

@@ -90,12 +90,12 @@ export const LibraryHeader = forwardRef(
       : cq.isLg
       ? '5.5rem'
       : cq.isMd
-      ? '4.5rem'
+      ? '5rem'
       : cq.isSm
-      ? '3.5rem'
-      : '2rem';
+      ? '4.5rem'
+      : '3rem';
 
-    const imageSize = cq.isLg ? 225 : cq.isMd ? 200 : cq.isSm ? 175 : 150;
+    const imageSize = cq.isLg ? 250 : cq.isMd ? 225 : cq.isSm ? 200 : 175;
 
     return (
       <HeaderContainer
@@ -142,10 +142,10 @@ export const LibraryHeader = forwardRef(
             </Text>
           </Group>
           <TextTitle
-            lh="5.1rem"
+            lh={1.15}
             lineClamp={2}
-            mb="1rem"
             overflow="hidden"
+            pb={cq.isXs ? '0' : cq.isSm ? '0.2rem' : '0.36rem'}
             sx={{ fontSize: titleSize, overflow: 'hidden' }}
             weight={900}
           >

src/renderer/features/shared/mutations/create-favorite-mutation.ts

@@ -7,12 +7,17 @@ import { queryKeys } from '/@/renderer/api/query-keys';
 import { SSAlbumArtistDetail, SSAlbumDetail } from '/@/renderer/api/subsonic.types';
 import { FavoriteArgs, LibraryItem, RawFavoriteResponse, ServerType } from '/@/renderer/api/types';
 import { MutationOptions } from '/@/renderer/lib/react-query';
-import { useCurrentServer, useSetAlbumListItemDataById } from '/@/renderer/store';
+import {
+  useCurrentServer,
+  useSetAlbumListItemDataById,
+  useSetQueueFavorite,
+} from '/@/renderer/store';
 
 export const useCreateFavorite = (options?: MutationOptions) => {
   const queryClient = useQueryClient();
   const server = useCurrentServer();
   const setAlbumListData = useSetAlbumListItemDataById();
+  const setQueueFavorite = useSetQueueFavorite();
 
   return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
     mutationFn: (args) => api.controller.createFavorite({ ...args, server }),
@@ -24,6 +29,10 @@ export const useCreateFavorite = (options?: MutationOptions) => {
         }
       }
 
+      if (variables.query.type === LibraryItem.SONG) {
+        setQueueFavorite(variables.query.id, true);
+      }
+
       // We only need to set if we're already on the album detail page
       if (variables.query.type === LibraryItem.ALBUM && variables.query.id.length === 1) {
         const queryKey = queryKeys.albums.detail(server?.id || '', { id: variables.query.id[0] });

src/renderer/features/shared/mutations/delete-favorite-mutation.ts

@@ -7,12 +7,17 @@ import { queryKeys } from '/@/renderer/api/query-keys';
 import { SSAlbumArtistDetail, SSAlbumDetail } from '/@/renderer/api/subsonic.types';
 import { FavoriteArgs, LibraryItem, RawFavoriteResponse, ServerType } from '/@/renderer/api/types';
 import { MutationOptions } from '/@/renderer/lib/react-query';
-import { useCurrentServer, useSetAlbumListItemDataById } from '/@/renderer/store';
+import {
+  useCurrentServer,
+  useSetAlbumListItemDataById,
+  useSetQueueFavorite,
+} from '/@/renderer/store';
 
 export const useDeleteFavorite = (options?: MutationOptions) => {
   const queryClient = useQueryClient();
   const server = useCurrentServer();
   const setAlbumListData = useSetAlbumListItemDataById();
+  const setQueueFavorite = useSetQueueFavorite();
 
   return useMutation<RawFavoriteResponse, HTTPError, Omit<FavoriteArgs, 'server'>, null>({
     mutationFn: (args) => api.controller.deleteFavorite({ ...args, server }),
@@ -24,6 +29,10 @@ export const useDeleteFavorite = (options?: MutationOptions) => {
         }
       }
 
+      if (variables.query.type === LibraryItem.SONG) {
+        setQueueFavorite(variables.query.id, false);
+      }
+
       // We only need to set if we're already on the album detail page
       if (variables.query.type === LibraryItem.ALBUM && variables.query.id.length === 1) {
         const queryKey = queryKeys.albums.detail(server?.id || '', { id: variables.query.id[0] });