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/artists/components/album-artist-detail-content.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import {
   Button,
-  DropdownMenu,
   getColumnDefs,
   GridCarousel,
   Text,
@@ -10,8 +9,7 @@ import {
 } from '/@/renderer/components';
 import { ColDef, RowDoubleClickedEvent } from '@ag-grid-community/core';
 import { Box, Group, Stack } from '@mantine/core';
-import { openContextModal } from '@mantine/modals';
-import { RiArrowDownSLine, RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
+import { RiHeartFill, RiHeartLine, RiMoreFill } from 'react-icons/ri';
 import { generatePath, useParams } from 'react-router';
 import { useCurrentServer } from '/@/renderer/store';
 import { createSearchParams, Link } from 'react-router-dom';
@@ -19,15 +17,16 @@ import styled from 'styled-components';
 import { AppRoute } from '/@/renderer/router/routes';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { usePlayButtonBehavior } from '/@/renderer/store/settings.store';
-import { useHandleTableContextMenu } from '/@/renderer/features/context-menu';
-import { Play, TableColumn } from '/@/renderer/types';
-import { SONG_CONTEXT_MENU_ITEMS } from '/@/renderer/features/context-menu/context-menu-items';
 import {
-  PlayButton,
-  PLAY_TYPES,
-  useCreateFavorite,
-  useDeleteFavorite,
-} from '/@/renderer/features/shared';
+  useHandleGeneralContextMenu,
+  useHandleTableContextMenu,
+} from '/@/renderer/features/context-menu';
+import { Play, TableColumn } from '/@/renderer/types';
+import {
+  ARTIST_CONTEXT_MENU_ITEMS,
+  SONG_CONTEXT_MENU_ITEMS,
+} from '/@/renderer/features/context-menu/context-menu-items';
+import { PlayButton, useCreateFavorite, useDeleteFavorite } from '/@/renderer/features/shared';
 import { useAlbumList } from '/@/renderer/features/albums/queries/album-list-query';
 import {
   AlbumListSort,
@@ -267,16 +266,10 @@ export const AlbumArtistDetailContent = () => {
     }
   };
 
-  const handleAddToPlaylist = () => {
-    openContextModal({
-      innerProps: {
-        artistId: [albumArtistId],
-      },
-      modal: 'addToPlaylist',
-      size: 'md',
-      title: 'Add to playlist',
-    });
-  };
+  const handleGeneralContextMenu = useHandleGeneralContextMenu(
+    LibraryItem.ALBUM_ARTIST,
+    ARTIST_CONTEXT_MENU_ITEMS,
+  );
 
   const topSongs = topSongsQuery?.data?.items?.slice(0, 10);
 
@@ -311,28 +304,16 @@ export const AlbumArtistDetailContent = () => {
                 <RiHeartLine size={20} />
               )}
             </Button>
-            <DropdownMenu position="bottom-start">
-              <DropdownMenu.Target>
-                <Button
-                  compact
-                  variant="subtle"
-                >
-                  <RiMoreFill size={20} />
-                </Button>
-              </DropdownMenu.Target>
-              <DropdownMenu.Dropdown>
-                {PLAY_TYPES.filter((type) => type.play !== playButtonBehavior).map((type) => (
-                  <DropdownMenu.Item
-                    key={`playtype-${type.play}`}
-                    onClick={() => handlePlay(type.play)}
-                  >
-                    {type.label}
-                  </DropdownMenu.Item>
-                ))}
-                <DropdownMenu.Divider />
-                <DropdownMenu.Item onClick={handleAddToPlaylist}>Add to playlist</DropdownMenu.Item>
-              </DropdownMenu.Dropdown>
-            </DropdownMenu>
+            <Button
+              compact
+              variant="subtle"
+              onClick={(e) => {
+                if (!detailQuery?.data) return;
+                handleGeneralContextMenu(e, [detailQuery.data!]);
+              }}
+            >
+              <RiMoreFill size={20} />
+            </Button>
             <Button
               compact
               uppercase
@@ -422,22 +403,6 @@ export const AlbumArtistDetailContent = () => {
                 View all
               </Button>
             </Group>
-            <DropdownMenu>
-              <DropdownMenu.Target>
-                <Button
-                  compact
-                  uppercase
-                  rightIcon={<RiArrowDownSLine size={20} />}
-                  variant="subtle"
-                >
-                  Community
-                </Button>
-              </DropdownMenu.Target>
-              <DropdownMenu.Dropdown>
-                <DropdownMenu.Item>Community</DropdownMenu.Item>
-                <DropdownMenu.Item>User</DropdownMenu.Item>
-              </DropdownMenu.Dropdown>
-            </DropdownMenu>
           </Group>
           <VirtualTable
             autoFitColumns

src/renderer/features/artists/components/album-artist-detail-header.tsx

@@ -1,10 +1,10 @@
-import { Group, Stack } from '@mantine/core';
-import { forwardRef, Fragment, Ref } from 'react';
+import { Group, Rating, Stack } from '@mantine/core';
+import { forwardRef, Fragment, Ref, MouseEvent } from 'react';
 import { useParams } from 'react-router';
-import { LibraryItem } from '/@/renderer/api/types';
+import { LibraryItem, ServerType } from '/@/renderer/api/types';
 import { Text } from '/@/renderer/components';
 import { useAlbumArtistDetail } from '/@/renderer/features/artists/queries/album-artist-detail-query';
-import { LibraryHeader } from '/@/renderer/features/shared';
+import { LibraryHeader, useUpdateRating } from '/@/renderer/features/shared';
 import { useContainerQuery } from '/@/renderer/hooks';
 import { AppRoute } from '/@/renderer/router/routes';
 import { formatDurationString } from '/@/renderer/utils';
@@ -37,6 +37,39 @@ export const AlbumArtistDetailHeader = forwardRef(
       },
     ];
 
+    const updateRatingMutation = useUpdateRating();
+
+    const handleUpdateRating = (rating: number) => {
+      if (!detailQuery?.data) return;
+
+      updateRatingMutation.mutate({
+        _serverId: detailQuery?.data.serverId,
+        query: {
+          item: [detailQuery.data],
+          rating,
+        },
+      });
+    };
+
+    const handleClearRating = (_e: MouseEvent<HTMLDivElement>, rating?: number) => {
+      if (!detailQuery?.data || !detailQuery?.data.userRating) return;
+
+      console.log(rating, detailQuery.data.userRating);
+
+      const isSameRatingAsPrevious = rating === detailQuery.data.userRating;
+      if (!isSameRatingAsPrevious) return;
+
+      updateRatingMutation.mutate({
+        _serverId: detailQuery.data.serverId,
+        query: {
+          item: [detailQuery.data],
+          rating: 0,
+        },
+      });
+    };
+
+    const showRating = detailQuery?.data?.serverType === ServerType.NAVIDROME;
+
     return (
       <Stack ref={cq.ref}>
         <LibraryHeader
@@ -56,6 +89,17 @@ export const AlbumArtistDetailHeader = forwardRef(
                     <Text $secondary={item.secondary}>{item.value}</Text>
                   </Fragment>
                 ))}
+              {showRating && (
+                <>
+                  <Text $noSelect>•</Text>
+                  <Rating
+                    readOnly={detailQuery?.isFetching || updateRatingMutation.isLoading}
+                    value={detailQuery?.data?.userRating || 0}
+                    onChange={handleUpdateRating}
+                    onClick={handleClearRating}
+                  />
+                </>
+              )}
             </Group>
             <Group
               sx={{