Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor shows a tiny 'No paths loaded' text in the right panel when paths.length === 0 — the user has no actionable affordance (no 'Draw your first path' prompt, no link to a tutorial, no upload shortcut) #225

New issue

Open

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

src/components/editor/EditorRightPanel.tsx:137 (per the snippet I saw earlier) renders a <div>No paths loaded</div> when paths.length === 0. That's the only empty-state affordance in the editor for the path list.

A user who opens the editor with an empty design (e.g., from the URL /editor without a loadedDesignId):

Sees an empty canvas
Sees "No paths loaded" in the right panel
Has no idea what to do next

The canvas itself is empty (no drawing guides, no "click to start" prompt). The toolbar has the path-draw tool active, but a new user wouldn't know that clicking on the canvas draws a path.

grep -rn 'firstPath\|emptyState.*editor' src/components/editor/ returns 0 hits.

Where

Right panel: src/components/editor/EditorRightPanel.tsx:137 (the "No paths loaded" div)
No first-path prompt: grep -rn 'Draw your first path' src/components/editor/ returns 0
Canvas empty state: src/components/editor/EditorCanvas.tsx (no empty state rendering)

Suggested fix shape

Two changes:

Right panel: replace "No paths loaded" with a richer prompt:

{paths.length === 0 ? (
  <div className="p-4 text-center">
    <PlusCircle size={24} className="mx-auto mb-2" style={{ color: '#A8A29E' }} />
    <p className="text-sm font-medium" style={{ color: '#1A1A1A' }}>No paths yet</p>
    <p className="text-[11px] mt-1" style={{ color: '#6B6560' }}>
      Select the Path tool from the left toolbar, then click on the canvas to draw your first path.
    </p>
  </div>
) : ...}

Canvas: overlay a small "Click to start drawing" hint when the user has been idle for 5+ seconds in path-draw mode (mirrors the Workspace's "Drop an image to get started" hint).
First-run tooltip: when the editor first mounts with no paths and no loadedDesignId, show a one-time tooltip near the path-draw tool explaining the workflow.

Severity

Low. The user can figure out the workflow from the toolbar icons. The empty state is a polish improvement.

Discovered by

Gap analysis (2026-10-02) of editor first-run experience.

The Gallery's EmptyState component is a reference implementation (per #224).
The Workspace has a similar gap (the "Drop an image here" empty state).

## Finding `src/components/editor/EditorRightPanel.tsx:137` (per the snippet I saw earlier) renders a `<div>No paths loaded</div>` when `paths.length === 0`. That's the only empty-state affordance in the editor for the path list. A user who opens the editor with an empty design (e.g., from the URL `/editor` without a `loadedDesignId`): - Sees an empty canvas - Sees "No paths loaded" in the right panel - Has no idea what to do next The canvas itself is empty (no drawing guides, no "click to start" prompt). The toolbar has the path-draw tool active, but a new user wouldn't know that clicking on the canvas draws a path. `grep -rn 'firstPath\|emptyState.*editor' src/components/editor/` returns 0 hits. ## Where - Right panel: `src/components/editor/EditorRightPanel.tsx:137` (the "No paths loaded" div) - No first-path prompt: `grep -rn 'Draw your first path' src/components/editor/` returns 0 - Canvas empty state: `src/components/editor/EditorCanvas.tsx` (no empty state rendering) ## Suggested fix shape Two changes: 1. **Right panel**: replace "No paths loaded" with a richer prompt: ```tsx {paths.length === 0 ? ( <div className="p-4 text-center"> <PlusCircle size={24} className="mx-auto mb-2" style={{ color: '#A8A29E' }} /> <p className="text-sm font-medium" style={{ color: '#1A1A1A' }}>No paths yet</p> <p className="text-[11px] mt-1" style={{ color: '#6B6560' }}> Select the Path tool from the left toolbar, then click on the canvas to draw your first path. </p> </div> ) : ...} ``` 2. **Canvas**: overlay a small "Click to start drawing" hint when the user has been idle for 5+ seconds in path-draw mode (mirrors the Workspace's "Drop an image to get started" hint). 3. **First-run tooltip**: when the editor first mounts with no paths and no `loadedDesignId`, show a one-time tooltip near the path-draw tool explaining the workflow. ## Severity Low. The user can figure out the workflow from the toolbar icons. The empty state is a polish improvement. ## Discovered by Gap analysis (2026-10-02) of editor first-run experience. ## Related - The Gallery's `EmptyState` component is a reference implementation (per #224). - The Workspace has a similar gap (the "Drop an image here" empty state).

Mark added the

feature-request

triage-approved

labels

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

Mark referenced this issue

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

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

Mark referenced this issue

2026-10-04 03:40:50 +00:00

Editor's Path Properties section is hidden when no path is selected — user without a selection sees no path-related controls, no hint that selecting a path would reveal them #272

Mark referenced this issue

2026-10-04 03:40:50 +00:00

Editor's Node Properties section is hidden when no node is selected — user selecting a path but no node sees no node-related controls, no hint that Tab or click would reveal them #273

Mark referenced this issue from a commit

2026-10-04 05:00:49 +00:00

feat(#225): Editor Paths list gets an actionable empty-state prompt

Mark commented

2026-10-04 05:12:30 +00:00

Author

Owner

Shipped in commit bcaeec2 (origin/main).

Replaced the bare "No paths loaded" string with an icon + headline + body empty-state prompt that names the toolbar location and the next action ("Select the Path tool from the left toolbar, then click on the canvas to draw your first path"). Mirrors the gallery EmptyState shape at a tighter size for the 280px right-panel column.

Files: src/components/editor/EditorRightPanel.tsx, src/components/editor/EditorRightPanel.test.tsx.

Typecheck, lint, 122/122 vitest, and npm run build all green locally.

Shipped in commit `bcaeec2` (origin/main). Replaced the bare "No paths loaded" string with an icon + headline + body empty-state prompt that names the toolbar location and the next action ("Select the Path tool from the left toolbar, then click on the canvas to draw your first path"). Mirrors the gallery EmptyState shape at a tighter size for the 280px right-panel column. Files: `src/components/editor/EditorRightPanel.tsx`, `src/components/editor/EditorRightPanel.test.tsx`. Typecheck, lint, 122/122 vitest, and `npm run build` all green locally.

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 referenced this issue

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

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

Mark referenced this issue from a commit

2026-10-04 13:39:39 +00:00

fix(#272): Path Properties empty-state — 'Select a path to edit its properties'

Mark referenced this issue

2026-10-04 13:40:15 +00:00

Editor's Path Properties section is hidden when no path is selected — user without a selection sees no path-related controls, no hint that selecting a path would reveal them #272