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/player/components/center-controls.tsx

@@ -227,7 +227,6 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
             onChangeEnd={(e) => {
               handleSeekSlider(e);
               setIsSeeking(false);
-              console.log('end');
             }}
           />
         </SliderWrapper>

src/renderer/features/player/components/playerbar-slider.tsx

@@ -33,6 +33,11 @@ export const PlayerbarSlider = ({ ...props }: SliderProps) => {
           opacity: 0,
           width: '1rem',
         },
+        track: {
+          '&::before': {
+            backgroundColor: 'var(--playerbar-slider-track-bg)',
+          },
+        },
       }}
       {...props}
     />

src/renderer/features/player/components/right-controls.tsx

@@ -13,7 +13,6 @@ import {
   useCurrentServer,
   useCurrentSong,
   useMuted,
-  useSetQueueFavorite,
   useSidebarStore,
   useVolume,
 } from '/@/renderer/store';
@@ -36,24 +35,16 @@ export const RightControls = () => {
   const updateRatingMutation = useUpdateRating();
   const addToFavoritesMutation = useCreateFavorite();
   const removeFromFavoritesMutation = useDeleteFavorite();
-  const setFavorite = useSetQueueFavorite();
 
   const handleAddToFavorites = () => {
     if (!currentSong) return;
 
-    addToFavoritesMutation.mutate(
-      {
-        query: {
-          id: [currentSong.id],
-          type: LibraryItem.SONG,
-        },
+    addToFavoritesMutation.mutate({
+      query: {
+        id: [currentSong.id],
+        type: LibraryItem.SONG,
       },
-      {
-        onSuccess: () => {
-          setFavorite([currentSong.id], true);
-        },
-      },
-    );
+    });
   };
 
   const handleUpdateRating = (rating: number) => {
@@ -83,19 +74,12 @@ export const RightControls = () => {
   const handleRemoveFromFavorites = () => {
     if (!currentSong) return;
 
-    removeFromFavoritesMutation.mutate(
-      {
-        query: {
-          id: [currentSong.id],
-          type: LibraryItem.SONG,
-        },
+    removeFromFavoritesMutation.mutate({
+      query: {
+        id: [currentSong.id],
+        type: LibraryItem.SONG,
       },
-      {
-        onSuccess: () => {
-          setFavorite([currentSong.id], false);
-        },
-      },
-    );
+    });
   };
 
   const handleToggleFavorite = () => {

src/renderer/features/player/hooks/use-right-controls.ts

@@ -34,15 +34,25 @@ export const useRightControls = () => {
   };
 
   const handleVolumeWheel = (e: WheelEvent<HTMLDivElement>) => {
-    let newVolume;
+    let volumeToSet;
     if (e.deltaY > 0) {
-      newVolume = volume - volumeWheelStep;
+      const newVolumeLessThanZero = volume - volumeWheelStep < 0;
+      if (newVolumeLessThanZero) {
+        volumeToSet = 0;
+      } else {
+        volumeToSet = volume - volumeWheelStep;
+      }
     } else {
-      newVolume = volume + volumeWheelStep;
+      const newVolumeGreaterThanHundred = volume + volumeWheelStep > 100;
+      if (newVolumeGreaterThanHundred) {
+        volumeToSet = 100;
+      } else {
+        volumeToSet = volume + volumeWheelStep;
+      }
     }
 
-    mpvPlayer.volume(newVolume);
-    setVolume(newVolume);
+    mpvPlayer.volume(volumeToSet);
+    setVolume(volumeToSet);
   };
 
   const handleMute = () => {