add new context menu implementation

2026-06-18 01:14:22 +02:00 · 2025-11-15 04:22:06 -08:00
parent ec0590c79a
commit 8eb90ebf06
47 changed files with 2826 additions and 1593 deletions
@@ -0,0 +1,96 @@
+import { useCallback, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { generatePath, useNavigate } from 'react-router';
+
+import { AppRoute } from '/@/renderer/router/routes';
+import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
+import {
+    Album,
+    AlbumArtist,
+    Artist,
+    LibraryItem,
+    QueueSong,
+    Song,
+} from '/@/shared/types/domain-types';
+
+interface GoToActionProps {
+    items: Album[] | AlbumArtist[] | Artist[] | QueueSong[] | Song[];
+}
+
+export const GoToAction = ({ items }: GoToActionProps) => {
+    const { t } = useTranslation();
+    const navigate = useNavigate();
+
+    const { albumArtists, albumId } = useMemo(() => {
+        const firstItem = items[0];
+
+        if (firstItem._itemType === LibraryItem.ALBUM) {
+            return {
+                albumArtists: firstItem.albumArtists || [],
+                albumId: firstItem.id,
+            };
+        } else if (firstItem._itemType === LibraryItem.SONG) {
+            return {
+                albumArtists: firstItem.albumArtists || [],
+                albumId: firstItem.albumId,
+            };
+        } else if (
+            firstItem._itemType === LibraryItem.ARTIST ||
+            firstItem._itemType === LibraryItem.ALBUM_ARTIST
+        ) {
+            return {
+                albumArtists: [{ id: firstItem.id, name: firstItem.name }],
+                albumId: null,
+            };
+        }
+
+        return {
+            albumArtists: [],
+            albumId: null,
+        };
+    }, [items]);
+
+    const handleGoToAlbum = useCallback(() => {
+        if (!albumId) return;
+        navigate(generatePath(AppRoute.LIBRARY_ALBUMS_DETAIL, { albumId }));
+    }, [albumId, navigate]);
+
+    const handleGoToAlbumArtist = useCallback(
+        (albumArtistId: string) => {
+            navigate(generatePath(AppRoute.LIBRARY_ALBUM_ARTISTS_DETAIL, { albumArtistId }));
+        },
+        [navigate],
+    );
+
+    const hasAlbum = !!albumId;
+
+    return (
+        <ContextMenu.Submenu disabled={items.length !== 1}>
+            <ContextMenu.SubmenuTarget>
+                <ContextMenu.Item
+                    leftIcon="externalLink"
+                    onSelect={(e) => e.preventDefault()}
+                    rightIcon="arrowRightS"
+                >
+                    {t('page.contextMenu.goTo', { postProcess: 'sentenceCase' })}
+                </ContextMenu.Item>
+            </ContextMenu.SubmenuTarget>
+            <ContextMenu.SubmenuContent>
+                {hasAlbum && (
+                    <ContextMenu.Item leftIcon="album" onSelect={handleGoToAlbum}>
+                        {t('page.contextMenu.goToAlbum', { postProcess: 'sentenceCase' })}
+                    </ContextMenu.Item>
+                )}
+                {albumArtists.map((albumArtist) => (
+                    <ContextMenu.Item
+                        key={albumArtist.id}
+                        leftIcon="artist"
+                        onSelect={() => handleGoToAlbumArtist(albumArtist.id)}
+                    >
+                        {`${t('page.contextMenu.goTo', { postProcess: 'sentenceCase' })} ${albumArtist.name}`}
+                    </ContextMenu.Item>
+                ))}
+            </ContextMenu.SubmenuContent>
+        </ContextMenu.Submenu>
+    );
+};