Popover menus and export functionality

nukeop · nukeop · commit f229fb0550e3 · 2026-02-21T22:51:24.000+01:00
diff --git a/packages/player/src/components/ConnectedQueuePanel.tsx b/packages/player/src/components/ConnectedQueuePanel.tsx
@@ -94,13 +94,14 @@ export const QueueHeaderActions: FC = () => {
         }
         anchor="bottom end"
       >
-        <button
-          className="hover:bg-background-secondary flex w-full cursor-pointer items-center gap-2 rounded px-3 py-1.5 text-left text-sm whitespace-nowrap"
-          onClick={() => setSaveDialogOpen(true)}
-          data-testid="save-queue-as-playlist"
-        >
-          {t('actions.saveAsPlaylist')}
-        </button>
+        <Popover.Menu>
+          <Popover.Item
+            onClick={() => setSaveDialogOpen(true)}
+            data-testid="save-queue-as-playlist"
+          >
+            {t('actions.saveAsPlaylist')}
+          </Popover.Item>
+        </Popover.Menu>
       </Popover>
       <Dialog.Root
         isOpen={saveDialogOpen}
diff --git a/packages/player/src/hooks/usePlaylistExport.ts b/packages/player/src/hooks/usePlaylistExport.ts
@@ -0,0 +1,34 @@
+import { save } from '@tauri-apps/plugin-dialog';
+import { writeTextFile } from '@tauri-apps/plugin-fs';
+import { useCallback } from 'react';
+
+import { usePlaylistStore } from '../stores/playlistStore';
+import { reportError } from '../utils/logging';
+
+export const usePlaylistExport = (playlistId: string) => {
+  const playlist = usePlaylistStore((state) => state.playlists.get(playlistId));
+
+  const exportAsJson = useCallback(async () => {
+    try {
+      const filePath = await save({
+        defaultPath: `${playlist?.name ?? 'playlist'}.json`,
+        filters: [{ name: 'JSON Files', extensions: ['json'] }],
+      });
+
+      if (!filePath) {
+        return;
+      }
+
+      const { items, ...rest } = playlist!;
+      const exportData = { ...rest, tracks: items };
+      await writeTextFile(filePath, JSON.stringify(exportData, null, 2));
+    } catch (error) {
+      await reportError('playlists', {
+        userMessage: 'Failed to export playlist',
+        error,
+      });
+    }
+  }, [playlist]);
+
+  return { exportAsJson };
+};
diff --git a/packages/player/src/views/PlaylistDetail/components/PlaylistDetailActions.tsx b/packages/player/src/views/PlaylistDetail/components/PlaylistDetailActions.tsx
@@ -1,11 +1,17 @@
 import { useNavigate } from '@tanstack/react-router';
-import { EllipsisVerticalIcon, PlayIcon, Trash2Icon } from 'lucide-react';
+import {
+  EllipsisVerticalIcon,
+  PlayIcon,
+  ShareIcon,
+  Trash2Icon,
+} from 'lucide-react';
 import { useState, type FC } from 'react';
 
 import { useTranslation } from '@nuclearplayer/i18n';
 import type { Track } from '@nuclearplayer/model';
 import { Button, Dialog, Popover } from '@nuclearplayer/ui';
 
+import { usePlaylistExport } from '../../../hooks/usePlaylistExport';
 import { useQueueActions } from '../../../hooks/useQueueActions';
 import { usePlaylistStore } from '../../../stores/playlistStore';
 import { useSoundStore } from '../../../stores/soundStore';
@@ -24,6 +30,7 @@ export const PlaylistDetailActions: FC<PlaylistDetailActionsProps> = ({
   const { addToQueue, clearQueue } = useQueueActions();
   const deletePlaylist = usePlaylistStore((state) => state.deletePlaylist);
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const { exportAsJson } = usePlaylistExport(playlistId);
 
   const handlePlayAll = () => {
     clearQueue();
@@ -50,31 +57,37 @@ export const PlaylistDetailActions: FC<PlaylistDetailActionsProps> = ({
         </Button>
         <Popover
           className="relative"
-          panelClassName="bg-background px-0 py-1"
+          panelClassName="bg-background px-0 py-0"
           trigger={
             <Button size="icon" data-testid="playlist-actions-button">
               <EllipsisVerticalIcon size={16} />
             </Button>
           }
           anchor="bottom start"
         >
-          <div className="flex flex-col">
-            <button
-              className="hover:border-border hover:bg-background-secondary flex w-full cursor-pointer items-center gap-3 border-t border-transparent px-3 py-2 text-left text-sm not-last:border-b"
+          <Popover.Menu>
+            <Popover.Item
               onClick={handleAddToQueue}
               data-testid="add-to-queue-action"
             >
               {t('addToQueue')}
-            </button>
-            <button
-              className="text-accent-red hover:border-border hover:bg-background-secondary flex w-full cursor-pointer items-center gap-3 border-t border-transparent px-3 py-2 text-left text-sm not-last:border-b"
+            </Popover.Item>
+            <Popover.Item
+              icon={<ShareIcon size={16} />}
+              onClick={exportAsJson}
+              data-testid="export-json-action"
+            >
+              {t('exportJson')}
+            </Popover.Item>
+            <Popover.Item
+              intent="danger"
+              icon={<Trash2Icon size={16} />}
               onClick={() => setIsDeleteDialogOpen(true)}
               data-testid="delete-playlist-action"
             >
-              <Trash2Icon size={16} />
               {t('delete')}
-            </button>
-          </div>
+            </Popover.Item>
+          </Popover.Menu>
         </Popover>
       </div>
       <Dialog.Root
diff --git a/packages/player/src/views/Playlists/Playlists.tsx b/packages/player/src/views/Playlists/Playlists.tsx
@@ -34,23 +34,22 @@ const PlaylistsContent: FC = () => {
         </Button>
         <Popover
           className="relative"
-          panelClassName="bg-background px-0 py-1"
+          panelClassName="bg-background px-0 py-0"
           trigger={
             <Button size="icon" data-testid="import-playlist-button">
               <Import size={16} />
             </Button>
           }
           anchor="bottom start"
         >
-          <div className="flex flex-col">
-            <button
-              className="hover:border-border hover:bg-background-secondary flex w-full cursor-pointer items-center gap-3 border-t border-transparent px-3 py-2 text-left text-sm not-last:border-b"
+          <Popover.Menu>
+            <Popover.Item
               onClick={importFromJson}
               data-testid="import-json-option"
             >
               {t('importJson')}
-            </button>
-          </div>
+            </Popover.Item>
+          </Popover.Menu>
         </Popover>
       </div>
 
diff --git a/packages/player/vite.config.ts b/packages/player/vite.config.ts
@@ -43,6 +43,7 @@ export default defineConfig(() => ({
   },
   test: {
     globals: true,
+    clearMocks: true,
     environment: 'jsdom',
     setupFiles: ['./src/test/setup.ts'],
     coverage: {
diff --git a/packages/storybook/src/Popover.stories.tsx b/packages/storybook/src/Popover.stories.tsx
@@ -1,4 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react-vite';
+import { PencilIcon, Trash2Icon } from 'lucide-react';
 
 import { Button, Popover } from '@nuclearplayer/ui';
 
@@ -52,3 +53,33 @@ export const AllAnchors: Story = {
     </div>
   ),
 };
+
+export const DropdownMenu: Story = {
+  render: () => (
+    <Popover
+      className="relative"
+      panelClassName="bg-background px-0 py-0"
+      trigger={<Button>Actions</Button>}
+      anchor="bottom"
+    >
+      <Popover.Menu>
+        <Popover.Item
+          icon={<PencilIcon size={16} />}
+          onClick={() => console.log('edit')}
+        >
+          Edit
+        </Popover.Item>
+        <Popover.Item onClick={() => console.log('duplicate')}>
+          Duplicate
+        </Popover.Item>
+        <Popover.Item
+          intent="danger"
+          icon={<Trash2Icon size={16} />}
+          onClick={() => console.log('delete')}
+        >
+          Delete
+        </Popover.Item>
+      </Popover.Menu>
+    </Popover>
+  ),
+};
diff --git a/packages/ui/src/components/Popover/Popover.test.tsx b/packages/ui/src/components/Popover/Popover.test.tsx
@@ -30,4 +30,33 @@ describe('Popover', () => {
     await screen.findByText('Popover Content');
     expect(document.body).toMatchSnapshot();
   });
+
+  it('(Snapshot) renders menu with items', async () => {
+    render(
+      <Popover trigger={<Button>Open</Button>} anchor="bottom">
+        <Popover.Menu>
+          <Popover.Item>Action One</Popover.Item>
+          <Popover.Item>Action Two</Popover.Item>
+          <Popover.Item intent="danger">Delete</Popover.Item>
+        </Popover.Menu>
+      </Popover>,
+    );
+    await userEvent.click(screen.getByText('Open'));
+    await screen.findByText('Action One');
+    expect(document.body).toMatchSnapshot();
+  });
+
+  it('calls onClick when a menu item is clicked', async () => {
+    const handleClick = vi.fn();
+    render(
+      <Popover trigger={<Button>Open</Button>} anchor="bottom">
+        <Popover.Menu>
+          <Popover.Item onClick={handleClick}>Action</Popover.Item>
+        </Popover.Menu>
+      </Popover>,
+    );
+    await userEvent.click(screen.getByText('Open'));
+    await userEvent.click(screen.getByText('Action'));
+    expect(handleClick).toHaveBeenCalledOnce();
+  });
 });
diff --git a/packages/ui/src/components/Popover/Popover.tsx b/packages/ui/src/components/Popover/Popover.tsx
@@ -9,6 +9,8 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { FC, ReactNode } from 'react';
 
 import { cn } from '../../utils';
+import { PopoverItem } from './PopoverItem';
+import { PopoverMenu } from './PopoverMenu';
 
 export type PopoverProps = {
   trigger: ReactNode;
@@ -19,7 +21,12 @@ export type PopoverProps = {
   backdrop?: boolean;
 };
 
-export const Popover: FC<PopoverProps> = ({
+type PopoverComponent = FC<PopoverProps> & {
+  Item: typeof PopoverItem;
+  Menu: typeof PopoverMenu;
+};
+
+const PopoverImpl: FC<PopoverProps> = ({
   trigger,
   children,
   className,
@@ -71,3 +78,7 @@ export const Popover: FC<PopoverProps> = ({
     </HeadlessPopover>
   );
 };
+
+export const Popover = PopoverImpl as PopoverComponent;
+Popover.Item = PopoverItem;
+Popover.Menu = PopoverMenu;
diff --git a/packages/ui/src/components/Popover/PopoverItem.tsx b/packages/ui/src/components/Popover/PopoverItem.tsx
@@ -0,0 +1,38 @@
+import { cva, VariantProps } from 'class-variance-authority';
+import { ComponentProps, FC, ReactNode } from 'react';
+
+import { cn } from '../../utils';
+
+const popoverItemVariants = cva(
+  'hover:bg-background-secondary hover:border-border flex w-full cursor-pointer items-center gap-3 border-t border-transparent px-3 py-2 text-left text-sm outline-none not-last:border-b first:border-t-0 last:border-b-0',
+  {
+    variants: {
+      intent: {
+        default: '',
+        danger: 'text-accent-red',
+      },
+    },
+    defaultVariants: {
+      intent: 'default',
+    },
+  },
+);
+
+type PopoverItemProps = Omit<ComponentProps<'button'>, 'children'> &
+  VariantProps<typeof popoverItemVariants> & {
+    icon?: ReactNode;
+    children: ReactNode;
+  };
+
+export const PopoverItem: FC<PopoverItemProps> = ({
+  className,
+  intent,
+  icon,
+  children,
+  ...props
+}) => (
+  <button className={cn(popoverItemVariants({ intent, className }))} {...props}>
+    <span className="shrink-0">{icon}</span>
+    <span>{children}</span>
+  </button>
+);
diff --git a/packages/ui/src/components/Popover/PopoverMenu.tsx b/packages/ui/src/components/Popover/PopoverMenu.tsx
@@ -0,0 +1,12 @@
+import { ComponentProps, FC } from 'react';
+
+import { cn } from '../../utils';
+
+type PopoverMenuProps = ComponentProps<'div'>;
+
+export const PopoverMenu: FC<PopoverMenuProps> = ({ className, ...props }) => (
+  <div
+    className={cn('flex min-w-48 flex-col overflow-hidden', className)}
+    {...props}
+  />
+);
diff --git a/packages/ui/src/components/Popover/__snapshots__/Popover.test.tsx.snap b/packages/ui/src/components/Popover/__snapshots__/Popover.test.tsx.snap
