Workspace dropzone "Recent designs:" thumbnails are `cursor-not-allowed` (decorative) but the label and hover styles suggest interactivity #166

New issue

Closed

opened 2026-10-03 17:30:28 +00:00 by Mark · 0 comments

Mark commented

2026-10-03 17:30:28 +00:00

Owner

Finding

src/components/workspace/CanvasArea.tsx:340-393 renders a "Recent designs:" section with 3 thumbnail previews:

<motion.div
  key={design.id}
  className="w-16 h-16 rounded-lg cursor-not-allowed transition-all duration-200"
  ...
  title={`${design.filename} — open from the Gallery to edit (preview only)`}
  aria-label={`Recent design: ${design.filename} (preview only)`}
  data-testid={`recent-design-${design.id}`}
>

The thumbnails are cursor-not-allowed (the CSS cursor that says "don't click me") and the title says "open from the Gallery to edit (preview only)". The section is labeled "Recent designs:" — which to a user reads as "here are your recent designs, click one to use it."

The user clicks. Nothing happens. The label and the affordance are mismatched.

Additionally, recentDesigns is computed at mount via loadDesigns().slice(0, 3) (line 83). If the user saves a new design while the Workspace is open, the recent list doesn't update — the thumbnails are a snapshot from when the user landed on the page.

Where

Recent designs section: src/components/workspace/CanvasArea.tsx:340-393
Source data: src/components/workspace/CanvasArea.tsx:83 — const [recentDesigns] = useState<Design[]>(() => loadDesigns().slice(0, 3));

Suggested fix shape

Three options:

Make them clickable. Replace the cursor-not-allowed with cursor-pointer, wrap in a <Link to="/gallery"> or <button onClick={handleLoadInEditor}> that loads the design (same path the Gallery's "Open in Editor" uses). The user's expectation matches the affordance.
Rename the section. Change "Recent designs:" to "Recently saved:" or "Your library (preview):" and remove the hover affordance. The section becomes a passive display of the user's library state, not an entry point.
Update the live list. Change useState(() => loadDesigns().slice(0, 3)) to read from a context or refresh on visibility change. The thumbnails stay current with the user's saves.

Option 1 is the right product move: the Workspace's dropzone is where the user starts a design; showing their recent designs as clickable shortcuts is a natural discovery surface. The Gallery's "Open in Editor" path is already wired; reuse it.

Severity

Low. Cosmetic. The user is confused briefly, then either clicks the Gallery link or gives up.

Discovered by

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

Same shape as the Home page footer's "About/Privacy/Terms" (#159) and the Help page search input (#144, fixed) — UI affordances that don't match user expectations.

## Finding `src/components/workspace/CanvasArea.tsx:340-393` renders a "Recent designs:" section with 3 thumbnail previews: ```tsx <motion.div key={design.id} className="w-16 h-16 rounded-lg cursor-not-allowed transition-all duration-200" ... title={`${design.filename} — open from the Gallery to edit (preview only)`} aria-label={`Recent design: ${design.filename} (preview only)`} data-testid={`recent-design-${design.id}`} > ``` The thumbnails are `cursor-not-allowed` (the CSS cursor that says "don't click me") and the title says "open from the Gallery to edit (preview only)". The section is labeled **"Recent designs:"** — which to a user reads as "here are your recent designs, click one to use it." The user clicks. Nothing happens. The label and the affordance are mismatched. Additionally, `recentDesigns` is computed at mount via `loadDesigns().slice(0, 3)` (line 83). If the user saves a new design while the Workspace is open, the recent list doesn't update — the thumbnails are a snapshot from when the user landed on the page. ## Where - Recent designs section: `src/components/workspace/CanvasArea.tsx:340-393` - Source data: `src/components/workspace/CanvasArea.tsx:83` — `const [recentDesigns] = useState<Design[]>(() => loadDesigns().slice(0, 3));` ## Suggested fix shape Three options: 1. **Make them clickable.** Replace the `cursor-not-allowed` with `cursor-pointer`, wrap in a `<Link to="/gallery">` or `<button onClick={handleLoadInEditor}>` that loads the design (same path the Gallery's "Open in Editor" uses). The user's expectation matches the affordance. 2. **Rename the section.** Change "Recent designs:" to "Recently saved:" or "Your library (preview):" and remove the hover affordance. The section becomes a passive display of the user's library state, not an entry point. 3. **Update the live list.** Change `useState(() => loadDesigns().slice(0, 3))` to read from a context or refresh on visibility change. The thumbnails stay current with the user's saves. Option 1 is the right product move: the Workspace's dropzone is where the user starts a design; showing their recent designs as clickable shortcuts is a natural discovery surface. The Gallery's "Open in Editor" path is already wired; reuse it. ## Severity Low. Cosmetic. The user is confused briefly, then either clicks the Gallery link or gives up. ## Discovered by Gap analysis (2026-10-02) of dropzone affordances. ## Related - Same shape as the Home page footer's "About/Privacy/Terms" (#159) and the Help page search input (#144, fixed) — UI affordances that don't match user expectations.