✨ improved ContextMenu ux

Bakhaw · Jan 14, 2024 · 6b29667 · 6b29667
1 parent efb5d5f
commit 6b29667
Showing 1 changed file with 17 additions and 10 deletions.
diff --git a/components/ContextMenu/index.tsx b/components/ContextMenu/index.tsx
@@ -38,27 +38,34 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
           <ContextMenuSubTrigger inset>Add to a playlist</ContextMenuSubTrigger>
           <ContextMenuSubContent className="w-48">
             {playlists?.items.map((playlist) => (
-              <ContextMenuItem key={playlist.id}>
+              <ContextMenuItem key={playlist.id} className="px-4">
                 {playlist.name}
-                <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
               </ContextMenuItem>
             ))}
           </ContextMenuSubContent>
         </ContextMenuSub>
 
-        <ContextMenuItem inset className="cursor-pointer">
+        <ContextMenuItem inset>
           Add to saved tracks
           <ContextMenuShortcut>⌘S</ContextMenuShortcut>
         </ContextMenuItem>
 
         <ContextMenuSeparator />
 
         {"album" in track && (
-          <ContextMenuItem inset className="cursor-pointer">
-            <AlbumLink albumId={track.album.id} className="hover:no-underline">
-              Go to Album
-            </AlbumLink>
-          </ContextMenuItem>
+          <ContextMenuSub>
+            <ContextMenuSubTrigger inset>Go to Album</ContextMenuSubTrigger>
+            <ContextMenuSubContent className="w-48">
+              <AlbumLink
+                albumId={track.album.id}
+                className="hover:no-underline"
+              >
+                <ContextMenuItem className="px-4 cursor-pointer">
+                  {track.album.name}
+                </ContextMenuItem>
+              </AlbumLink>
+            </ContextMenuSubContent>
+          </ContextMenuSub>
         )}
 
         {"artists" in track && (
@@ -69,10 +76,10 @@ const ContextMenu: React.FC<ContextMenuProps> = ({
                 <Link
                   key={`${artist.id}_${index}`}
                   href={`/artist/${artist.id}`}
+                  className="block"
                 >
-                  <ContextMenuItem className="cursor-pointer">
+                  <ContextMenuItem className="cursor-pointer px-4">
                     {artist.name}
-                    <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
                   </ContextMenuItem>
                 </Link>
               ))}