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/components/virtual-table/cells/favorite-cell.tsx

@@ -6,11 +6,7 @@ import { useMutation } from '@tanstack/react-query';
 import { HTTPError } from 'ky';
 import { api } from '/@/renderer/api';
 import { RawFavoriteResponse, FavoriteArgs, LibraryItem } from '/@/renderer/api/types';
-import {
-  useCurrentServer,
-  useSetAlbumListItemDataById,
-  useSetQueueFavorite,
-} from '/@/renderer/store';
+import { useCurrentServer, useSetAlbumListItemDataById } from '/@/renderer/store';
 
 const useCreateFavorite = () => {
   const server = useCurrentServer();
@@ -50,9 +46,6 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
   const createMutation = useCreateFavorite();
   const deleteMutation = useDeleteFavorite();
 
-  // Since the queue is using client-side state, we need to update it manually
-  const setFavorite = useSetQueueFavorite();
-
   const handleToggleFavorite = () => {
     const newFavoriteValue = !value;
 
@@ -66,10 +59,6 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
         },
         {
           onSuccess: () => {
-            if (data.itemType === LibraryItem.SONG) {
-              setFavorite([data.id], newFavoriteValue);
-            }
-
             node.setData({ ...data, userFavorite: newFavoriteValue });
           },
         },
@@ -84,10 +73,6 @@ export const FavoriteCell = ({ value, data, node }: ICellRendererParams) => {
         },
         {
           onSuccess: () => {
-            if (data.itemType === LibraryItem.SONG) {
-              setFavorite([data.id], newFavoriteValue);
-            }
-
             node.setData({ ...data, userFavorite: newFavoriteValue });
           },
         },

src/renderer/components/virtual-table/cells/rating-cell.tsx

@@ -1,47 +1,55 @@
-import { MouseEvent, useState } from 'react';
+import { MouseEvent } from 'react';
 import type { ICellRendererParams } from '@ag-grid-community/core';
 import { Rating } from '/@/renderer/components/rating';
 import { CellContainer } from '/@/renderer/components/virtual-table/cells/generic-cell';
 import { useUpdateRating } from '/@/renderer/components/virtual-table/hooks/use-rating';
 
-export const RatingCell = ({ value }: ICellRendererParams) => {
+export const RatingCell = ({ value, node }: ICellRendererParams) => {
   const updateRatingMutation = useUpdateRating();
-  const [ratingValue, setRatingValue] = useState(value?.userRating);
 
   const handleUpdateRating = (rating: number) => {
     if (!value) return;
 
-    updateRatingMutation.mutate({
-      _serverId: value?.serverId,
-      query: {
-        item: [value],
-        rating,
+    updateRatingMutation.mutate(
+      {
+        _serverId: value?.serverId,
+        query: {
+          item: [value],
+          rating,
+        },
       },
-    });
-
-    setRatingValue(rating);
+      {
+        onSuccess: () => {
+          node.setData({ ...node.data, userRating: rating });
+        },
+      },
+    );
   };
 
   const handleClearRating = (e: MouseEvent<HTMLDivElement>) => {
     e.preventDefault();
     e.stopPropagation();
-    updateRatingMutation.mutate({
-      _serverId: value?.serverId,
-      query: {
-        item: [value],
-        rating: 0,
+    updateRatingMutation.mutate(
+      {
+        _serverId: value?.serverId,
+        query: {
+          item: [value],
+          rating: 0,
+        },
       },
-    });
-
-    setRatingValue(0);
+      {
+        onSuccess: () => {
+          node.setData({ ...node.data, userRating: 0 });
+        },
+      },
+    );
   };
 
   return (
     <CellContainer position="center">
       <Rating
-        defaultValue={value?.userRating || 0}
         size="xs"
-        value={ratingValue}
+        value={value?.userRating}
         onChange={handleUpdateRating}
         onClick={handleClearRating}
       />

src/renderer/components/virtual-table/index.tsx

@@ -254,6 +254,7 @@ const tableColumns: { [key: string]: ColDef } = {
     colId: TableColumn.TITLE_COMBINED,
     headerName: 'Title',
     initialWidth: 500,
+    minWidth: 150,
     valueGetter: (params: ValueGetterParams) =>
       params.data
         ? {
@@ -292,7 +293,7 @@ const tableColumns: { [key: string]: ColDef } = {
     width: 50,
   },
   userRating: {
-    cellClass: (params) => (params.value ? 'visible ag-cell-rating' : 'ag-cell-rating'),
+    cellClass: (params) => (params.value.userRating ? 'visible ag-cell-rating' : 'ag-cell-rating'),
     cellRenderer: RatingCell,
     colId: TableColumn.USER_RATING,
     field: 'userRating',
@@ -427,6 +428,7 @@ export const VirtualTable = forwardRef(
           ref={mergedRef}
           animateRows
           maintainColumnOrder
+          suppressAsyncEvents
           suppressContextMenu
           suppressCopyRowsToClipboard
           suppressMoveWhenRowDragging