Gallery's `RightClickMenu` component exists but is not used anywhere — `DesignCard`'s `onContextMenu` only calls `e.preventDefault()`, so the menu never opens, the user has no right-click affordance on designs #242

New issue

Closed

opened 2026-10-04 02:36:16 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 02:36:16 +00:00

Owner

Finding

src/components/gallery/RightClickMenu.tsx is a 200+ line component that defines a comprehensive context menu (Open in Workspace, Open in Editor, Rename, Duplicate, Move to folder, Toggle favorite, Export, Download, Delete).

grep -rn 'RightClickMenu' src/ returns matches in:

src/components/gallery/RightClickMenu.tsx (the component itself)
src/pages/issue-132-gallery.test.tsx (a test that mocks it)

No actual usage. The DesignCard.tsx (line 171, 400) has onContextMenu={(e) => e.preventDefault()} — explicitly preventing the browser's default context menu but not opening the custom one.

A user right-clicks a design card:

The browser's default context menu appears (Back, Reload, View Page Source, etc.)
The user has no access to the gallery-specific actions

The component is built; it's just not wired. Same family of bug as #230 (ServiceHealthBanner built but not rendered).

Where

RightClickMenu: src/components/gallery/RightClickMenu.tsx (200+ lines, comprehensive)
DesignCard: src/components/gallery/DesignCard.tsx:171, 400 (just preventDefault)
No caller: grep -rn 'RightClickMenu' src/pages/' src/components/' returns 0
Test mocks it (so the tests assume it would be used): src/pages/issue-132-gallery.test.tsx:5-10

Suggested fix shape

In DesignCard.tsx, wrap the card body in RightClickMenu:

import RightClickMenu from './RightClickMenu';

export default function DesignCard({ ..., onLoad, onLoadInEditor, onExportDesign, ... }) {
  return (
    <motion.div ...>
      <RightClickMenu
        folders={folders}
        design={design}
        onToggleFavorite={onToggleFavorite}
        onDelete={onDelete}
        onDuplicate={onDuplicate}
        onRename={onRename}
        onMoveToFolder={onMoveToFolder}
        onLoad={onLoad}
        onLoadInEditor={onLoadInEditor}
        onExportDesign={onExportDesign}
      >
        <div
          onContextMenu={(e) => e.preventDefault()}
          // ... existing card UI
        >
          {/* card content */}
        </div>
      </RightClickMenu>
    </motion.div>
  );
}

The RightClickMenu component's children prop wraps the card content; its onContextMenu opens the menu. The card's onContextMenu (which currently just preventDefault) is no longer needed; the wrapper handles it.

This is the same pattern as the editor's EditorContextMenu (per #191 fix), the workspace's ContextMenu (per CanvasArea.tsx:366), and the gallery's existing RightClickMenu component (which is built but never wired).

The kanban landed the test for the gallery's right-click export (per issue-132-gallery.test.tsx); this issue is the parallel "wire the menu to the design card" step.

Severity

Medium. The user has no right-click on designs; they have to use the per-card buttons (which are hidden in the list view's compact mode).

Discovered by

Gap analysis (2026-10-02) of gallery right-click affordances.

#230 (open) — ServiceHealthBanner built but not rendered. Same family.
#191 (closed) — Editor right-click context menu. The kanban landed the editor's; the gallery's is the parallel case.
#176 (open) — Workspace's context menu shows shortcut hints that don't work. The gallery's parallel concern.
The test issue-132-gallery.test.tsx mocks RightClickMenu; once this is wired, the test will exercise the actual component.

## Finding `src/components/gallery/RightClickMenu.tsx` is a 200+ line component that defines a comprehensive context menu (Open in Workspace, Open in Editor, Rename, Duplicate, Move to folder, Toggle favorite, Export, Download, Delete). `grep -rn 'RightClickMenu' src/` returns matches in: - `src/components/gallery/RightClickMenu.tsx` (the component itself) - `src/pages/issue-132-gallery.test.tsx` (a test that mocks it) **No actual usage.** The `DesignCard.tsx` (line 171, 400) has `onContextMenu={(e) => e.preventDefault()}` — explicitly preventing the browser's default context menu but not opening the custom one. A user right-clicks a design card: - The browser's default context menu appears (Back, Reload, View Page Source, etc.) - The user has no access to the gallery-specific actions The component is built; it's just not wired. Same family of bug as #230 (ServiceHealthBanner built but not rendered). ## Where - RightClickMenu: `src/components/gallery/RightClickMenu.tsx` (200+ lines, comprehensive) - DesignCard: `src/components/gallery/DesignCard.tsx:171, 400` (just `preventDefault`) - No caller: `grep -rn 'RightClickMenu' src/pages/' src/components/'` returns 0 - Test mocks it (so the tests assume it would be used): `src/pages/issue-132-gallery.test.tsx:5-10` ## Suggested fix shape In `DesignCard.tsx`, wrap the card body in `RightClickMenu`: ```tsx import RightClickMenu from './RightClickMenu'; export default function DesignCard({ ..., onLoad, onLoadInEditor, onExportDesign, ... }) { return ( <motion.div ...> <RightClickMenu folders={folders} design={design} onToggleFavorite={onToggleFavorite} onDelete={onDelete} onDuplicate={onDuplicate} onRename={onRename} onMoveToFolder={onMoveToFolder} onLoad={onLoad} onLoadInEditor={onLoadInEditor} onExportDesign={onExportDesign} > <div onContextMenu={(e) => e.preventDefault()} // ... existing card UI > {/* card content */} </div> </RightClickMenu> </motion.div> ); } ``` The `RightClickMenu` component's `children` prop wraps the card content; its `onContextMenu` opens the menu. The card's `onContextMenu` (which currently just `preventDefault`) is no longer needed; the wrapper handles it. This is the same pattern as the editor's `EditorContextMenu` (per #191 fix), the workspace's `ContextMenu` (per `CanvasArea.tsx:366`), and the gallery's existing `RightClickMenu` component (which is built but never wired). The kanban landed the test for the gallery's right-click export (per `issue-132-gallery.test.tsx`); this issue is the parallel "wire the menu to the design card" step. ## Severity Medium. The user has no right-click on designs; they have to use the per-card buttons (which are hidden in the list view's compact mode). ## Discovered by Gap analysis (2026-10-02) of gallery right-click affordances. ## Related - #230 (open) — ServiceHealthBanner built but not rendered. Same family. - #191 (closed) — Editor right-click context menu. The kanban landed the editor's; the gallery's is the parallel case. - #176 (open) — Workspace's context menu shows shortcut hints that don't work. The gallery's parallel concern. - The test `issue-132-gallery.test.tsx` mocks `RightClickMenu`; once this is wired, the test will exercise the actual component.

Mark added the

bug

triage-approved

labels

2026-10-04 02:36:16 +00:00

Mark commented

2026-10-04 09:03:41 +00:00

Author

Owner

Closing as not-reproducible — wiring already exists

The premise of this issue is stale. RightClickMenu is already wired up in src/pages/Gallery.tsx — both list view (line 1428) and grid view (line 1355) wrap <DesignCard> in <RightClickMenu ...> with all the props this issue suggested adding. The DesignCard.tsx inner onContextMenu={(e) => e.preventDefault()} calls (lines 236 / 502 in the current source, not 171/400 as the issue cites — the file has been edited several times since the gap analysis ran) just suppress the browser default menu; the actual right-click handler lives on RightClickMenu's outer wrapper and fires via DOM bubbling.

Verification

Vitest (jsdom): fired fireEvent.contextMenu(card) on the gallery grid item — RightClickMenu's menu items (Move to Folder, Add to Favorites, Open in Workspace, Open in Editor, Delete, etc.) all render in the DOM after the event.
Playwright (real Chromium): right-click on a real design card in /gallery opens the full menu — screenshot confirmed all items visible: Open in Workspace, Open in Editor, Rename, Duplicate, Move to Folder, Add to Favorites, Export, Delete.

Why the issue text is stale

grep -rn RightClickMenu src/ currently returns:

src/components/gallery/RightClickMenu.tsx (definition)
src/pages/Gallery.tsx (real usage, lines 33 + 1355 + 1428)
src/pages/issue-132-gallery.test.tsx (test mock)

The issue's grep claim ("returns matches in: RightClickMenu.tsx (the component itself) and src/pages/issue-132-gallery.test.tsx (a test that mocks it) — No actual usage") was correct at the time the gap analysis ran on 2026-10-02 but no longer reflects the source tree. The wiring landed before this issue was created today (2026-10-04T02:36:16Z).

Action

No code change needed. Closing as not-reproducible. If a real bug exists around the menu (e.g. a menu item misbehaving on a specific folder state), please file a separate, narrower issue with the reproduction steps — the wiring itself is in place.

## Closing as not-reproducible — wiring already exists The premise of this issue is stale. `RightClickMenu` is already wired up in `src/pages/Gallery.tsx` — both list view (line 1428) and grid view (line 1355) wrap `<DesignCard>` in `<RightClickMenu ...>` with all the props this issue suggested adding. The `DesignCard.tsx` inner `onContextMenu={(e) => e.preventDefault()}` calls (lines 236 / 502 in the current source, not 171/400 as the issue cites — the file has been edited several times since the gap analysis ran) just suppress the browser default menu; the actual right-click handler lives on `RightClickMenu`'s outer wrapper and fires via DOM bubbling. ### Verification - Vitest (jsdom): fired `fireEvent.contextMenu(card)` on the gallery grid item — RightClickMenu's menu items (`Move to Folder`, `Add to Favorites`, `Open in Workspace`, `Open in Editor`, `Delete`, etc.) all render in the DOM after the event. - Playwright (real Chromium): right-click on a real design card in `/gallery` opens the full menu — screenshot confirmed all items visible: Open in Workspace, Open in Editor, Rename, Duplicate, Move to Folder, Add to Favorites, Export, Delete. ### Why the issue text is stale `grep -rn RightClickMenu src/` currently returns: - `src/components/gallery/RightClickMenu.tsx` (definition) - `src/pages/Gallery.tsx` (real usage, lines 33 + 1355 + 1428) - `src/pages/issue-132-gallery.test.tsx` (test mock) The issue's `grep` claim ("returns matches in: RightClickMenu.tsx (the component itself) and src/pages/issue-132-gallery.test.tsx (a test that mocks it) — No actual usage") was correct at the time the gap analysis ran on 2026-10-02 but no longer reflects the source tree. The wiring landed before this issue was created today (2026-10-04T02:36:16Z). ### Action No code change needed. Closing as not-reproducible. If a real bug exists around the menu (e.g. a menu item misbehaving on a specific folder state), please file a separate, narrower issue with the reproduction steps — the wiring itself is in place.

Mark closed this issue

2026-10-04 09:03:44 +00:00