Gallery card has TWO dead "Open in Editor" buttons — onClick is empty () => {} or missing (DesignCard.tsx:226, :363) #111

New issue

Closed

opened 2026-09-25 19:48:10 +00:00 by Mark · 1 comment

Mark commented 2026-09-25 19:48:10 +00:00

Owner

Copy link

Bug: Gallery card has TWO "Open in Editor" buttons that do nothing — onClick is empty or missing

Reproduction

1. cd ~/Projects/Kimi_Agent_Brother_10_Digitizing_App && npm run dev
2. Open http://localhost:3000/gallery (any design exists after the first Workspace save).
3. Hover a design card → reveal the hover overlay with two buttons: "Open in Workspace" + "Open in Editor".
4. Click "Open in Editor".
5. Right-click the card → context menu appears with another "Open in Editor" item.
6. Click that.

Expected

Clicking either "Open in Editor" button loads the design into /editor (or shows "Editor coming soon" disabled state with a tooltip).

Actual

Nothing happens. No navigation, no toast, no error. The click is silently swallowed.

Source

src/components/gallery/DesignCard.tsx:

• Line 226 (context menu via DropdownMenuItem):

  <DropdownMenuItem onClick={() => {}}>
    <PenLine size={14} className="mr-2" />
    Open in Editor
  </DropdownMenuItem>
  

  onClick is an empty arrow function — explicit no-op.

• Line 355-364 (hover overlay):

  <button
    className="px-3 py-1.5 rounded-md text-[12px] font-medium transition-all duration-200 hover:-translate-y-[1px]"
    style={{
      backgroundColor: 'transparent',
      border: '1px solid rgba(248,242,233,0.6)',
      color: '#F8F2E9',
    }}
  >
    Open in Editor
  </button>
  

  No onClick attribute at all.

For comparison, the adjacent "Open in Workspace" button on the same card (line 341-354) DOES have:

<button onClick={(e) => { e.stopPropagation(); onLoad(design); }}>
  Open in Workspace
</button>

So the pattern exists for "Open in Workspace" — just missing for "Open in Editor".

Why this matters

The user-story path "Gallery → Edit stitches" is incomplete. A user who saves a design, returns to it via Gallery, wants to refine stitches — the obvious affordance is "Open in Editor". They click it. Nothing happens. The user assumes the feature doesn't exist or the click missed.

Per the visible UI copy (which I'm screenshotting as evidence), the dev intended "Open in Editor" to work. It's not marked disabled or "coming soon". It looks identical to "Open in Workspace" except for styling. The omission of onClick is a shipping bug, not a deliberate stub.

Suggested fix scope

Minimum viable: Wire onClick to a navigation that loads the design snapshot into the editor. Pattern to follow:

// 1. Add a helper that mirrors onLoad but navigates to /editor
const onLoadInEditor = (design: Design) => {
  sessionStorage.setItem(LOAD_DESIGN_STORAGE_KEY, JSON.stringify(design.snapshot));
  navigate('/editor');
};

// 2. Wire both buttons
<button onClick={(e) => { e.stopPropagation(); onLoadInEditor(design); }}>
  Open in Editor
</button>
// and
<DropdownMenuItem onClick={() => onLoadInEditor(design)}>
  <PenLine size={14} className="mr-2" />
  Open in Editor
</DropdownMenuItem>

Better: Mark the buttons as disabled and add a tooltip "Editor coming soon" if the team isn't ready to wire it. At least the user gets a signal.

Best: Same as above plus an Editor page bug that the loadInitialPaths() already supports tc_workspace_snapshot and LOAD_DESIGN_STORAGE_KEY, so the wiring is essentially free.

Related

• #74 (closed): added "Open in Workspace" quick-load affordance. The "Open in Editor" parallel was not added in the same pass.
• #69 (closed): Editor reads from tc_workspace_snapshot on mount, so the Editor side already supports loading from sessionStorage. Only the Gallery-side onClick wiring is missing.

Labels

• bug
• usability
• triage-approved

Severity

Medium. Visible broken affordance on the primary design-management page. No workaround visible to the user (they don't know "Open in Editor" needs to come from a different path). The user can still navigate manually to /editor, but they need to have first saved the design via Workspace AND the Workspace → Editor bridge (#69) only works for designs that were freshly auto-digitized — not for designs loaded from Gallery via "Open in Workspace".

Filed 2026-09-25 by user-driven bughunt session.

## Bug: Gallery card has TWO "Open in Editor" buttons that do nothing — `onClick` is empty or missing ### Reproduction 1. `cd ~/Projects/Kimi_Agent_Brother_10_Digitizing_App && npm run dev` 2. Open `http://localhost:3000/gallery` (any design exists after the first Workspace save). 3. Hover a design card → reveal the hover overlay with two buttons: "Open in Workspace" + "Open in Editor". 4. Click "Open in Editor". 5. Right-click the card → context menu appears with another "Open in Editor" item. 6. Click that. ### Expected Clicking either "Open in Editor" button loads the design into `/editor` (or shows "Editor coming soon" disabled state with a tooltip). ### Actual **Nothing happens.** No navigation, no toast, no error. The click is silently swallowed. ### Source `src/components/gallery/DesignCard.tsx`: - **Line 226** (context menu via DropdownMenuItem): ```tsx <DropdownMenuItem onClick={() => {}}> <PenLine size={14} className="mr-2" /> Open in Editor </DropdownMenuItem> ``` `onClick` is an empty arrow function — explicit no-op. - **Line 355-364** (hover overlay): ```tsx <button className="px-3 py-1.5 rounded-md text-[12px] font-medium transition-all duration-200 hover:-translate-y-[1px]" style={{ backgroundColor: 'transparent', border: '1px solid rgba(248,242,233,0.6)', color: '#F8F2E9', }} > Open in Editor </button> ``` No `onClick` attribute at all. For comparison, the adjacent "Open in Workspace" button on the same card (line 341-354) DOES have: ```tsx <button onClick={(e) => { e.stopPropagation(); onLoad(design); }}> Open in Workspace </button> ``` So the pattern exists for "Open in Workspace" — just missing for "Open in Editor". ### Why this matters The user-story path "Gallery → Edit stitches" is **incomplete**. A user who saves a design, returns to it via Gallery, wants to refine stitches — the obvious affordance is "Open in Editor". They click it. Nothing happens. The user assumes the feature doesn't exist or the click missed. Per the visible UI copy (which I'm screenshotting as evidence), the dev *intended* "Open in Editor" to work. It's not marked disabled or "coming soon". It looks identical to "Open in Workspace" except for styling. The omission of `onClick` is a shipping bug, not a deliberate stub. ### Suggested fix scope **Minimum viable**: Wire `onClick` to a navigation that loads the design snapshot into the editor. Pattern to follow: ```tsx // 1. Add a helper that mirrors onLoad but navigates to /editor const onLoadInEditor = (design: Design) => { sessionStorage.setItem(LOAD_DESIGN_STORAGE_KEY, JSON.stringify(design.snapshot)); navigate('/editor'); }; // 2. Wire both buttons <button onClick={(e) => { e.stopPropagation(); onLoadInEditor(design); }}> Open in Editor </button> // and <DropdownMenuItem onClick={() => onLoadInEditor(design)}> <PenLine size={14} className="mr-2" /> Open in Editor </DropdownMenuItem> ``` **Better**: Mark the buttons as `disabled` and add a tooltip "Editor coming soon" if the team isn't ready to wire it. At least the user gets a signal. **Best**: Same as above plus an Editor page bug that the `loadInitialPaths()` already supports `tc_workspace_snapshot` and `LOAD_DESIGN_STORAGE_KEY`, so the wiring is essentially free. ### Related - **#74** (closed): added "Open in Workspace" quick-load affordance. The "Open in Editor" parallel was not added in the same pass. - **#69** (closed): Editor reads from `tc_workspace_snapshot` on mount, so the Editor side already supports loading from sessionStorage. Only the Gallery-side `onClick` wiring is missing. ### Labels - bug - usability - triage-approved ### Severity **Medium.** Visible broken affordance on the primary design-management page. No workaround visible to the user (they don't know "Open in Editor" needs to come from a different path). The user can still navigate manually to `/editor`, but they need to have first saved the design via Workspace AND the Workspace → Editor bridge (#69) only works for designs that were freshly auto-digitized — not for designs loaded from Gallery via "Open in Workspace". Filed 2026-09-25 by user-driven bughunt session.

Mark added the

bug

triage-approved

labels 2026-09-25 19:48:10 +00:00

Mark referenced this issue from a commit 2026-09-25 19:53:42 +00:00

fix(#111): Gallery → Editor bridge wires 'Open in Editor' on all three dead buttons

Mark commented 2026-09-25 20:01:37 +00:00

Author

Owner

Copy link

Closed by triage-runner via fix commit 58687ed on main.

Fix scope: All three "Open in Editor" buttons in the Gallery now wire to a sessionStorage bridge that hands design.snapshot to the Editor via the existing tc_workspace_snapshot key (Editor.tsx already consumes it via loadInitialPaths() on mount).

Files changed (267 net lines):

• src/components/gallery/DesignCard.tsx: 12 lines (prop-drill onLoadInEditor; wired the empty onClick={() => {}} DropdownMenuItem at line 226 and the missing-onClick hover overlay button at line 355).
• src/components/gallery/RightClickMenu.tsx: 11 lines (added onLoadInEditor prop; wired the bare <MenuItem label="Open in Editor" /> at line 139 with onClick that closes the menu after navigation).
• src/pages/Gallery.tsx: 32 lines (added handleLoadInEditor callback that mirrors handleLoad but writes to tc_workspace_snapshot and navigates to /editor; passed to all 4 DesignCard/RightClickMenu prop sites).
• src/pages/issue-111.test.tsx: new file (focused tests for happy path + no-snapshot guard).

Verification:

• tsc --noEmit: clean
• npm test: 371/371 pass (including 2 new tests)
• npm run lint: clean
• npm run build: clean
• Forgejo Actions Lint, test, build job (the relevant gate for code changes): Successful in 2m9s
• Downstream jobs Docker image build and Workspace screenshot failed with the same pattern as commit ce57a37 / run #96 — pre-existing infrastructure issue not caused by this fix.

User story now complete: click any "Open in Editor" → Editor opens with the design hydrating from sessionStorage.

Closed by triage-runner via fix commit 58687ed on main. Fix scope: All three "Open in Editor" buttons in the Gallery now wire to a sessionStorage bridge that hands `design.snapshot` to the Editor via the existing `tc_workspace_snapshot` key (Editor.tsx already consumes it via `loadInitialPaths()` on mount). Files changed (267 net lines): - src/components/gallery/DesignCard.tsx: 12 lines (prop-drill `onLoadInEditor`; wired the empty `onClick={() => {}}` DropdownMenuItem at line 226 and the missing-onClick hover overlay button at line 355). - src/components/gallery/RightClickMenu.tsx: 11 lines (added `onLoadInEditor` prop; wired the bare `<MenuItem label="Open in Editor" />` at line 139 with onClick that closes the menu after navigation). - src/pages/Gallery.tsx: 32 lines (added `handleLoadInEditor` callback that mirrors `handleLoad` but writes to `tc_workspace_snapshot` and navigates to `/editor`; passed to all 4 DesignCard/RightClickMenu prop sites). - src/pages/issue-111.test.tsx: new file (focused tests for happy path + no-snapshot guard). Verification: - tsc --noEmit: clean - npm test: 371/371 pass (including 2 new tests) - npm run lint: clean - npm run build: clean - Forgejo Actions `Lint, test, build` job (the relevant gate for code changes): Successful in 2m9s - Downstream jobs `Docker image build` and `Workspace screenshot` failed with the same pattern as commit ce57a37 / run #96 — pre-existing infrastructure issue not caused by this fix. User story now complete: click any "Open in Editor" → Editor opens with the design hydrating from sessionStorage.

Mark closed this issue 2026-09-25 20:01:44 +00:00

Mark referenced this issue 2026-09-25 20:30:59 +00:00

Four icon-only buttons in Gallery have no aria-label / aria-pressed: grid/list view toggle, add-folder, favorite star (WCAG 4.1.2) #112

Mark referenced this issue 2026-10-03 03:58:17 +00:00

DesignCard "Export" menu item has no onClick handler — click does nothing #132

Mark referenced this issue 2026-10-03 23:59:32 +00:00

Editor has no way to load a design back to the workspace for re-digitization — user edits a design, must navigate Gallery → Workspace → Re-Digitize to fix issues #207

Mark referenced this issue 2026-10-04 02:13:18 +00:00

Editor has no way to load a different design without navigating back to the gallery — user has 3 designs open in different tabs, wants to switch; can only navigate back to the gallery #228

Mark referenced this issue 2026-10-04 03:36:29 +00:00

Gallery has no bulk export — user with 5 designs selected can bulk-delete or bulk-favorite but not bulk-export, has to open each one in the workspace to export #254

Mark referenced this issue 2026-10-04 03:49:44 +00:00

Editor has no 'multi-document' or 'tabs' — user working on 3 designs at once has to switch between them in the Gallery, no in-editor tabs #308

Mark referenced this issue from a commit 2026-10-04 05:45:16 +00:00

feat(#228): Editor "Load Design..." dropdown swaps to any gallery row without leaving the editor

Sign in to join this conversation.

No Branch/Tag specified

Branches Tags

main

No results found.

Labels

Clear labels   

blocked:commit-ready-failed

  

blocked:gate-fetch

  

blocked:gate-lint

  

blocked:gate-plan

  

blocked:gate-research

  

blocked:needs-attention

Worker halted; needs human/janitor inspection

  

blocked:needs-decision

  

blocked:needs-human

  

blocked:no-changes

  

blocked:verify-failed

  

bug

  

deferred

  

feature-request

  

in-progress

  

needs-decompose

  

needs-triage

  

quickfix

  

security/medium

  

triage-approved

No labels

blocked:commit-ready-failed

blocked:gate-fetch

blocked:gate-lint

blocked:gate-plan

blocked:gate-research

blocked:needs-attention

blocked:needs-decision

blocked:needs-human

blocked:no-changes

blocked:verify-failed

bug

deferred

feature-request

in-progress

needs-decompose

needs-triage

quickfix

security/medium

triage-approved

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

Mark/Kimi_Agent_Brother_10_Digitizing_App#111

No description provided.