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/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}
       />