Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor's right panel has no search or filter for paths — user with 20+ paths has to scroll through the path list to find the one they want #248

New issue

Closed

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

Mark commented

2026-10-04 02:38:56 +00:00

Owner

Finding

src/components/editor/EditorRightPanel.tsx's Path List section renders one row per path, in array order. There's no:

Search input to filter paths by name
Filter chips to filter by stitch type (satin, fill, etc.)
Sort options (by name, by node count, by color)

grep -n 'search' src/components/editor/EditorRightPanel.tsx returns 0.

A user with 20 paths in a complex design (a quilt pattern, a map, a logo with many sub-shapes) wants to find "the third satin path" or "the leaf" or "the path with 8 nodes." The path list is unscrollable (in the editor's compact right panel, the list is the full panel height and overflows below the fold).

Where

Path list: src/components/editor/EditorRightPanel.tsx:142-180
No search: grep -n 'search' src/components/editor/EditorRightPanel.tsx returns 0
No filter: same

Suggested fix shape

Search input at the top of the path list:

<input
  type="text"
  value={pathSearch}
  onChange={(e) => setPathSearch(e.target.value)}
  placeholder="Search paths..."
  className="..."
/>

pathSearch filters the paths array by name (or, if names are auto-generated like "Path 1", by node count, by color, or by stitch type).

Stitch type filter chips:

<div className="flex items-center gap-1">
  {(['all', 'satin', 'fill', 'running', 'cross-stitch'] as const).map((type) => (
    <button
      key={type}
      onClick={() => setStitchTypeFilter(type)}
      className={stitchTypeFilter === type ? 'active' : ''}
    >
      {stitchTypeIcon(type)} {type}
    </button>
  ))}
</div>

Sort options (by name, by node count asc/desc, by color):

<select value={pathSortMode} onChange={(e) => setPathSortMode(e.target.value as PathSortMode)}>
  <option value="default">Default order</option>
  <option value="name-asc">Name A-Z</option>
  <option value="nodes-desc">Most nodes first</option>
  <option value="nodes-asc">Fewest nodes first</option>
</select>

The filter and sort are local state; the right panel re-renders with the filtered list. The canvas's path rendering is unaffected (the filter is a UI concern, not a data concern).

Severity

Low. The user can scroll. Power users with many paths notice.

Discovered by

Gap analysis (2026-10-02) of editor path list affordances.

The Gallery's search is the parallel concern (per #223's gallery filter).
The path list's compact mode (per #180's) makes scrolling worse, not better.
Multi-select (per #188) lets the user bulk-operate on multiple paths; the search/filter complements the multi-select for finding the right paths to operate on.

## Finding `src/components/editor/EditorRightPanel.tsx`'s Path List section renders one row per path, in array order. There's no: - Search input to filter paths by name - Filter chips to filter by stitch type (satin, fill, etc.) - Sort options (by name, by node count, by color) `grep -n 'search' src/components/editor/EditorRightPanel.tsx` returns 0. A user with 20 paths in a complex design (a quilt pattern, a map, a logo with many sub-shapes) wants to find "the third satin path" or "the leaf" or "the path with 8 nodes." The path list is unscrollable (in the editor's compact right panel, the list is the full panel height and overflows below the fold). ## Where - Path list: `src/components/editor/EditorRightPanel.tsx:142-180` - No search: `grep -n 'search' src/components/editor/EditorRightPanel.tsx` returns 0 - No filter: same ## Suggested fix shape 1. **Search input** at the top of the path list: ```tsx <input type="text" value={pathSearch} onChange={(e) => setPathSearch(e.target.value)} placeholder="Search paths..." className="..." /> ``` `pathSearch` filters the `paths` array by name (or, if names are auto-generated like "Path 1", by node count, by color, or by stitch type). 2. **Stitch type filter chips**: ```tsx <div className="flex items-center gap-1"> {(['all', 'satin', 'fill', 'running', 'cross-stitch'] as const).map((type) => ( <button key={type} onClick={() => setStitchTypeFilter(type)} className={stitchTypeFilter === type ? 'active' : ''} > {stitchTypeIcon(type)} {type} </button> ))} </div> ``` 3. **Sort options** (by name, by node count asc/desc, by color): ```tsx <select value={pathSortMode} onChange={(e) => setPathSortMode(e.target.value as PathSortMode)}> <option value="default">Default order</option> <option value="name-asc">Name A-Z</option> <option value="nodes-desc">Most nodes first</option> <option value="nodes-asc">Fewest nodes first</option> </select> ``` The filter and sort are local state; the right panel re-renders with the filtered list. The canvas's path rendering is unaffected (the filter is a UI concern, not a data concern). ## Severity Low. The user can scroll. Power users with many paths notice. ## Discovered by Gap analysis (2026-10-02) of editor path list affordances. ## Related - The Gallery's search is the parallel concern (per #223's gallery filter). - The path list's compact mode (per #180's) makes scrolling worse, not better. - Multi-select (per #188) lets the user bulk-operate on multiple paths; the search/filter complements the multi-select for finding the right paths to operate on.

Mark added the

feature-request

triage-approved

labels

2026-10-04 02:38:56 +00:00

Mark referenced this issue

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

Editor's Path List doesn't show how many nodes are in each path — user with 10 paths has to click each one to see the node count, no at-a-glance summary #270

Mark referenced this issue

2026-10-04 03:59:53 +00:00

Editor's Path Properties has 'Path Properties' but no 'Notes' field per path — user wanting to leave a comment (e.g., 'this is the outline of the leaf') on a path has no place to write it #378

Mark referenced this issue from a commit

2026-10-04 09:25:47 +00:00

fix(#248): editor right panel adds search, stitch-type filter, and sort for the path list

Mark commented

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

Author

Owner

Shipped fix in commit 446b91e — search input (case-insensitive substring of name), stitch-type filter chips (all / satin / fill / running / cross-stitch / zigzag, reusing the #244 stitch-type glyphs), and sort selector (default / name-asc / nodes-desc / nodes-asc). All three are panel-local state — the canvas and Editor data are unchanged. Filter+sort+search compose; an empty result renders a "Clear search & filter" button so a user with all paths filtered out can recover with one click. 16 new tests cover behavior, edge cases, and that typing in the search input does not fire onSelectPath. Closes #248.

Shipped fix in commit 446b91e — search input (case-insensitive substring of `name`), stitch-type filter chips (all / satin / fill / running / cross-stitch / zigzag, reusing the #244 stitch-type glyphs), and sort selector (default / name-asc / nodes-desc / nodes-asc). All three are panel-local state — the canvas and Editor data are unchanged. Filter+sort+search compose; an empty result renders a "Clear search & filter" button so a user with all paths filtered out can recover with one click. 16 new tests cover behavior, edge cases, and that typing in the search input does not fire `onSelectPath`. Closes #248.

Mark closed this issue

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

Mark referenced this issue from a commit

2026-10-05 17:38:19 +00:00

feat(#378): per-path note textarea in editor Path Properties

Mark referenced this issue

2026-10-05 17:38:34 +00:00

Editor's Path Properties has 'Path Properties' but no 'Notes' field per path — user wanting to leave a comment (e.g., 'this is the outline of the leaf') on a path has no place to write it #378