Add ratings support (#21)

* Update rating types for multiserver support

* Add rating mutation

* Add rating support to table views

* Add rating support on playerbar

* Add hovercard component

* Handle rating from context menu

- Improve context menu components
- Allow left / right icons
- Allow nested menus

* Add selected item count

* Fix context menu auto direction

* Add transition and move portal for context menu

* Re-use context menu for all item dropdowns

* Add ratings to detail pages / double click to clear

* Bump react-query package

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

@@ -1,3 +1,4 @@
+import { MouseEvent } from 'react';
 import { Flex, Group } from '@mantine/core';
 import { HiOutlineQueueList } from 'react-icons/hi2';
 import {
@@ -19,7 +20,7 @@ import {
 import { useRightControls } from '../hooks/use-right-controls';
 import { PlayerButton } from './player-button';
 import { LibraryItem, ServerType } from '/@/renderer/api/types';
-import { useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
+import { useCreateFavorite, useDeleteFavorite, useUpdateRating } from '/@/renderer/features/shared';
 import { Rating } from '/@/renderer/components';
 import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
 
@@ -32,6 +33,7 @@ export const RightControls = () => {
   const { rightExpanded: isQueueExpanded } = useSidebarStore();
   const { handleVolumeSlider, handleVolumeWheel, handleMute } = useRightControls();
 
+  const updateRatingMutation = useUpdateRating();
   const addToFavoritesMutation = useCreateFavorite();
   const removeFromFavoritesMutation = useDeleteFavorite();
   const setFavorite = useSetQueueFavorite();
@@ -54,6 +56,30 @@ export const RightControls = () => {
     );
   };
 
+  const handleUpdateRating = (rating: number) => {
+    if (!currentSong) return;
+
+    updateRatingMutation.mutate({
+      _serverId: currentSong?.serverId,
+      query: {
+        item: [currentSong],
+        rating,
+      },
+    });
+  };
+
+  const handleClearRating = (_e: MouseEvent<HTMLDivElement>, rating?: number) => {
+    if (!currentSong || !rating) return;
+
+    updateRatingMutation.mutate({
+      _serverId: currentSong?.serverId,
+      query: {
+        item: [currentSong],
+        rating: 0,
+      },
+    });
+  };
+
   const handleRemoveFromFavorites = () => {
     if (!currentSong) return;
 
@@ -96,9 +122,10 @@ export const RightControls = () => {
       <Group h="calc(100% / 3)">
         {showRating && (
           <Rating
-            readOnly
             size="sm"
-            value={currentSong?.userRating ?? 0}
+            value={currentSong?.userRating || 0}
+            onChange={handleUpdateRating}
+            onClick={handleClearRating}
           />
         )}
       </Group>