Workspace has no empty state for 'no image uploaded' — the canvas is just blank with no prompt, and the right panel's Object List shows the same 'No paths loaded' generic text #226

New issue

Closed

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

Mark commented

2026-10-04 02:11:02 +00:00

Owner

Finding

When a user lands on /workspace with no image uploaded, the canvas is blank. The right panel's Object List section shows whatever its empty state is (let me check). The user has no prompt telling them to upload an image.

grep -rn 'Drop an image\|Upload an image' src/components/workspace/ returns 0 hits.

The workspace's right panel and the editor's right panel both have similar empty states. The workspace is missing the "Drop an image to get started" hint that the rest of the app pattern uses.

Where

Workspace canvas: src/components/workspace/CanvasArea.tsx (no empty state overlay)
Right panel: src/components/workspace/RightPanel.tsx (need to check)
File drop: per #186, the workspace has no clipboard paste; per #148 the gallery has a button; the workspace's dropzone is the entry but there's no "Drop here" visual

Suggested fix shape

Canvas overlay when no image is loaded:

{!loadedImage && !isProcessing && (
  <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
    <div className="text-center">
      <Upload size={48} className="mx-auto mb-3" style={{ color: '#A8A29E' }} />
      <p className="text-base font-medium">Drop an image here</p>
      <p className="text-sm mt-1">or paste from clipboard (Cmd+V)</p>
    </div>
  </div>
)}

Drop zone visual feedback: when a file is being dragged over the canvas, show a dashed gold border (per the gallery's drag-over visual, which is in Gallery.tsx for the drop zone).
Right panel: when stitchObjects.length === 0 and colorRegions.length === 0, show a hint: "Upload an image to start. Use the toolbar or drag-and-drop."

Severity

Low. The user can find the upload affordance via the toolbar. The empty state is a polish improvement.

Discovered by

Gap analysis (2026-10-02) of workspace empty states.

#186 (open) — Workspace clipboard paste. The paste affordance lives in the empty state hint.
The Gallery's EmptyState is the reference for a polished empty state.
The editor's empty state (per #225) is a sibling issue.

## Finding When a user lands on `/workspace` with no image uploaded, the canvas is blank. The right panel's Object List section shows whatever its empty state is (let me check). The user has no prompt telling them to upload an image. `grep -rn 'Drop an image\|Upload an image' src/components/workspace/` returns 0 hits. The workspace's right panel and the editor's right panel both have similar empty states. The workspace is missing the "Drop an image to get started" hint that the rest of the app pattern uses. ## Where - Workspace canvas: `src/components/workspace/CanvasArea.tsx` (no empty state overlay) - Right panel: `src/components/workspace/RightPanel.tsx` (need to check) - File drop: per #186, the workspace has no clipboard paste; per #148 the gallery has a button; the workspace's dropzone is the entry but there's no "Drop here" visual ## Suggested fix shape 1. **Canvas overlay** when no image is loaded: ```tsx {!loadedImage && !isProcessing && ( <div className="absolute inset-0 flex items-center justify-center pointer-events-none"> <div className="text-center"> <Upload size={48} className="mx-auto mb-3" style={{ color: '#A8A29E' }} /> <p className="text-base font-medium">Drop an image here</p> <p className="text-sm mt-1">or paste from clipboard (Cmd+V)</p> </div> </div> )} ``` 2. **Drop zone visual feedback**: when a file is being dragged over the canvas, show a dashed gold border (per the gallery's drag-over visual, which is in `Gallery.tsx` for the drop zone). 3. **Right panel**: when `stitchObjects.length === 0` and `colorRegions.length === 0`, show a hint: "Upload an image to start. Use the toolbar or drag-and-drop." ## Severity Low. The user can find the upload affordance via the toolbar. The empty state is a polish improvement. ## Discovered by Gap analysis (2026-10-02) of workspace empty states. ## Related - #186 (open) — Workspace clipboard paste. The paste affordance lives in the empty state hint. - The Gallery's `EmptyState` is the reference for a polished empty state. - The editor's empty state (per #225) is a sibling issue.

Mark added the

feature-request

triage-approved

labels

2026-10-04 02:11:02 +00:00

Mark referenced this issue from a commit

2026-10-04 05:20:41 +00:00

fix(#226): right-panel empty-state hint mirrors editor (#225) pattern

Mark commented

2026-10-04 05:26:09 +00:00

Author

Owner

Shipped #226 in commit 7bbcb93 (rebased onto origin/main after #223/#224/#225 landed).

Fix applied: Workspace right panel's empty-state placeholder in appState === 'empty' upgraded from a single italic line ("Upload an image to configure stitch parameters") to an icon + headline + body trio:

UploadCloud icon (muted #D9D2C8, matching EmptyState.tsx)
Headline: "Upload an image to get started"
Body: "Drop a file on the canvas, click the upload card, or paste with ⌘V / Ctrl+V"
Format line: "PNG, JPG, SVG, BMP up to 20MB" (matches the canvas UploadCard verbatim)

Mirrors the editor's right-panel upgrade from #225 and the gallery's EmptyState component. 3 new tests added (right-panel-empty-hint testid visible in empty, hidden in image-uploaded and digitized). 462 workspace tests pass; full typecheck + lint pass.

Not changed (issue's premise was incorrect):

The workspace canvas already has a full empty state in CanvasArea.tsx:381-519 (UploadCloud icon, drop zone with drag-over dashed gold border, file-type line, ⌘V paste hint, recent designs row). The grep result the issue cites (Drop an image|Upload an image returning 0 hits) was filtered to src/components/workspace/, but the existing empty state says "Drop your image here" — close enough that a literal grep misses it. The existing canvas empty state is more polished than the issue's proposed snippet (it has the drag-over animated border + recent designs), so duplicating it would have regressed the UX.
The "No paths loaded" string referenced in the title is in the editor's right panel (EditorRightPanel.tsx:392), not the workspace — that was #225, already shipped in bcaeec2.

The actual defect was the right panel's plain italic placeholder, which sat below the always-expanded Design Settings accordion and gave the user no clear pointer to the canvas drop zone. Now resolved.

Shipped #226 in commit 7bbcb93 (rebased onto origin/main after #223/#224/#225 landed). **Fix applied:** Workspace right panel's empty-state placeholder in `appState === 'empty'` upgraded from a single italic line ("Upload an image to configure stitch parameters") to an icon + headline + body trio: - UploadCloud icon (muted #D9D2C8, matching `EmptyState.tsx`) - Headline: "Upload an image to get started" - Body: "Drop a file on the canvas, click the upload card, or paste with ⌘V / Ctrl+V" - Format line: "PNG, JPG, SVG, BMP up to 20MB" (matches the canvas UploadCard verbatim) Mirrors the editor's right-panel upgrade from #225 and the gallery's `EmptyState` component. 3 new tests added (`right-panel-empty-hint` testid visible in `empty`, hidden in `image-uploaded` and `digitized`). 462 workspace tests pass; full typecheck + lint pass. **Not changed (issue's premise was incorrect):** - The workspace canvas **already has** a full empty state in `CanvasArea.tsx:381-519` (UploadCloud icon, drop zone with drag-over dashed gold border, file-type line, ⌘V paste hint, recent designs row). The grep result the issue cites (`Drop an image|Upload an image` returning 0 hits) was filtered to `src/components/workspace/`, but the existing empty state says "Drop your image here" — close enough that a literal grep misses it. The existing canvas empty state is more polished than the issue's proposed snippet (it has the drag-over animated border + recent designs), so duplicating it would have regressed the UX. - The "No paths loaded" string referenced in the title is in the editor's right panel (`EditorRightPanel.tsx:392`), not the workspace — that was #225, already shipped in bcaeec2. The actual defect was the right panel's plain italic placeholder, which sat below the always-expanded Design Settings accordion and gave the user no clear pointer to the canvas drop zone. Now resolved.

Mark closed this issue

2026-10-04 05:26:22 +00:00