Gallery has no 'compare two designs side-by-side' view — user with two design variants wanting to see the differences at a glance has to flip between them #321

New issue

Closed

opened 2026-10-04 03:51:57 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:51:57 +00:00

Owner

Finding

grep -rn 'compare.*design\|designCompare' src/components/gallery/ returns 0. The Gallery has no compare view.

A user with 2 design variants:

"Logo - red" and "Logo - blue"
Wants to see them side-by-side
Currently: opens one, looks at it, goes back to gallery, opens the other
4 navigation hops

The fix is a compare view in the Gallery.

Where

Gallery: src/pages/Gallery.tsx
No compare: grep -rn 'designCompare' src/components/gallery/ returns 0

Suggested fix shape

UI: a "Compare" button in the multi-select toolbar (per #179). When 2 designs are selected, the button enables.
View: clicking opens a side-by-side view:

Two large thumbnails (or full design previews) side by side
Each labeled with the design's name, dimensions, stitch count
A "View in Workspace" / "View in Editor" button for each
A "Close" button to return to the gallery

Differences: a small diff section showing:

Different colors used
Different stitch counts
Different paths

Implementation: a new page /gallery/compare?ids=1,2 that renders the two designs.

Severity

Low. The user can open both in tabs. Power users comparing variants notice.

Discovered by

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

#179 (open) — Multi-select. The selection is the prerequisite.
The editor's compare (per #269) is the workspace's version.
Figma has "Compare frames." Standard.

## Finding `grep -rn 'compare.*design\|designCompare' src/components/gallery/` returns 0. The Gallery has no compare view. A user with 2 design variants: - "Logo - red" and "Logo - blue" - Wants to see them side-by-side - Currently: opens one, looks at it, goes back to gallery, opens the other - 4 navigation hops The fix is a compare view in the Gallery. ## Where - Gallery: `src/pages/Gallery.tsx` - No compare: `grep -rn 'designCompare' src/components/gallery/` returns 0 ## Suggested fix shape 1. **UI**: a "Compare" button in the multi-select toolbar (per #179). When 2 designs are selected, the button enables. 2. **View**: clicking opens a side-by-side view: - Two large thumbnails (or full design previews) side by side - Each labeled with the design's name, dimensions, stitch count - A "View in Workspace" / "View in Editor" button for each - A "Close" button to return to the gallery 3. **Differences**: a small diff section showing: - Different colors used - Different stitch counts - Different paths 4. **Implementation**: a new page `/gallery/compare?ids=1,2` that renders the two designs. ## Severity Low. The user can open both in tabs. Power users comparing variants notice. ## Discovered by Gap analysis (2026-10-02) of gallery affordances. ## Related - #179 (open) — Multi-select. The selection is the prerequisite. - The editor's compare (per #269) is the workspace's version. - Figma has "Compare frames." Standard.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:51:57 +00:00

Mark referenced this issue from a commit

2026-10-05 00:42:33 +00:00

fix(#321): Gallery compare-two side-by-side view + test coverage

Mark commented

2026-10-05 00:42:42 +00:00

Author

Owner

Closed by fix(#321) — fe0a3cb fix(#321): Gallery compare-two side-by-side view + test coverage.

Adds a Compare button to the multi-select toolbar (gated by count === 2) and a new /gallery/compare?ids=<a>,<b> page with side-by-side previews, per-side Open-in-Workspace/Editor buttons, and a focused diff panel that hides equal rows.

24 new tests + 5 updates. All 165 test files / 2024 tests pass; 3 pre-existing test failures in issue-275.test.tsx (subtitle format drift from #317) are unrelated to this change.

Closed by fix(#321) — `fe0a3cb fix(#321): Gallery compare-two side-by-side view + test coverage`. Adds a Compare button to the multi-select toolbar (gated by count === 2) and a new `/gallery/compare?ids=<a>,<b>` page with side-by-side previews, per-side Open-in-Workspace/Editor buttons, and a focused diff panel that hides equal rows. 24 new tests + 5 updates. All 165 test files / 2024 tests pass; 3 pre-existing test failures in `issue-275.test.tsx` (subtitle format drift from #317) are unrelated to this change.

Mark closed this issue

2026-10-05 00:42:47 +00:00