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

@@ -1,13 +1,49 @@
+import { MouseEvent, useState } 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) => {
+  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,
+      },
+    });
+
+    setRatingValue(rating);
+  };
+
+  const handleClearRating = (e: MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    updateRatingMutation.mutate({
+      _serverId: value?.serverId,
+      query: {
+        item: [value],
+        rating: 0,
+      },
+    });
+
+    setRatingValue(0);
+  };
+
   return (
     <CellContainer position="center">
       <Rating
+        defaultValue={value?.userRating || 0}
         size="xs"
-        value={value}
+        value={ratingValue}
+        onChange={handleUpdateRating}
+        onClick={handleClearRating}
       />
     </CellContainer>
   );