Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Editor has no search/filter in the thread color picker — user with the full Robison-Anton 60-color catalog (or larger custom library) has to scroll through dozens of swatches to find a specific color #256

New issue

Closed

opened 2026-10-04 03:36:54 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:36:54 +00:00

Owner

Finding

src/components/editor/EditorRightPanel.tsx's Thread Color picker (per #185 fix) renders a 5-column grid of the catalog colors. The catalog can be the Robison-Anton 60+ colors plus any custom user-added colors. With 80+ swatches in a 5-column grid, the picker is 16+ rows tall.

grep -n 'threadLibrary.*search\|search.*thread' src/components/editor/ returns 0. No search input.

A user wants to find "the red color that matches PR-10 cartridge slot 14":

Scrolls through 80+ swatches
Tries to match by visual perception
Picks the closest one, hopes it's right

Or a user wants to use a specific Pantone color:

Knows the name
Scrolls looking for it
May not be in the catalog

The fix is a search input at the top of the picker that filters by name (case-insensitive substring match) and by hex (e.g., "ff0000" finds all colors whose hex contains that substring).

Where

Thread color picker: src/components/editor/EditorRightPanel.tsx (the 5-column grid)
The catalog: useThreadLibrary().colors (passed in as a prop)
No search: grep -n 'search' src/components/editor/EditorRightPanel.tsx returns 0

Suggested fix shape

Add a search input above the grid:

<input
  type="text"
  value={colorSearch}
  onChange={(e) => setColorSearch(e.target.value)}
  placeholder="Search by name or hex..."
  className="..."
/>

The filtered catalog:

const filteredCatalog = colorSearch
  ? catalog.filter((c) =>
      c.name.toLowerCase().includes(colorSearch.toLowerCase()) ||
      c.hex.toLowerCase().includes(colorSearch.toLowerCase().replace('#', ''))
    )
  : catalog;

The grid renders filteredCatalog instead of the full catalog. The user can type "PR" to see only Robison-Anton colors, "ff0" to see all yellow-red colors, etc.

When the user adds a custom color (per #233), it appears in the catalog and the search includes it.

Severity

Low. The user can scroll. Power users with large catalogs notice.

Discovered by

Gap analysis (2026-10-02) of thread color picker affordances.

#233 (open) — Editor has no way to add a custom thread color. Same picker; the search is the discoverability on top of the addition.
The workspace's "Catalog" (per useThreadLibrary) is shared between editor and workspace.
The picker is one of the highest-frequency UI elements; the search is a high-leverage improvement.

## Finding `src/components/editor/EditorRightPanel.tsx`'s Thread Color picker (per #185 fix) renders a 5-column grid of the catalog colors. The catalog can be the Robison-Anton 60+ colors plus any custom user-added colors. With 80+ swatches in a 5-column grid, the picker is 16+ rows tall. `grep -n 'threadLibrary.*search\|search.*thread' src/components/editor/` returns 0. No search input. A user wants to find "the red color that matches PR-10 cartridge slot 14": - Scrolls through 80+ swatches - Tries to match by visual perception - Picks the closest one, hopes it's right Or a user wants to use a specific Pantone color: - Knows the name - Scrolls looking for it - May not be in the catalog The fix is a search input at the top of the picker that filters by name (case-insensitive substring match) and by hex (e.g., "ff0000" finds all colors whose hex contains that substring). ## Where - Thread color picker: `src/components/editor/EditorRightPanel.tsx` (the 5-column grid) - The catalog: `useThreadLibrary().colors` (passed in as a prop) - No search: `grep -n 'search' src/components/editor/EditorRightPanel.tsx` returns 0 ## Suggested fix shape Add a search input above the grid: ```tsx <input type="text" value={colorSearch} onChange={(e) => setColorSearch(e.target.value)} placeholder="Search by name or hex..." className="..." /> ``` The filtered catalog: ```ts const filteredCatalog = colorSearch ? catalog.filter((c) => c.name.toLowerCase().includes(colorSearch.toLowerCase()) || c.hex.toLowerCase().includes(colorSearch.toLowerCase().replace('#', '')) ) : catalog; ``` The grid renders `filteredCatalog` instead of the full `catalog`. The user can type "PR" to see only Robison-Anton colors, "ff0" to see all yellow-red colors, etc. When the user adds a custom color (per #233), it appears in the catalog and the search includes it. ## Severity Low. The user can scroll. Power users with large catalogs notice. ## Discovered by Gap analysis (2026-10-02) of thread color picker affordances. ## Related - #233 (open) — Editor has no way to add a custom thread color. Same picker; the search is the discoverability on top of the addition. - The workspace's "Catalog" (per `useThreadLibrary`) is shared between editor and workspace. - The picker is one of the highest-frequency UI elements; the search is a high-leverage improvement.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:36:54 +00:00

Mark referenced this issue

2026-10-04 03:36:54 +00:00

Editor's thread color picker shows every catalog color in a uniform grid — no visual differentiation by thread line / brand / type, the user can't tell at a glance which colors are 'standard Robison-Anton' vs 'Brother PR-10' vs 'custom' #257

Mark referenced this issue

2026-10-04 03:54:49 +00:00

Editor's Path Properties section's 'Color' picker shows a 'matching' indicator for similar colors — user wanting to find an exact match has no 'close enough' visual cue #341

Mark referenced this issue

2026-10-04 03:55:54 +00:00

Editor's Path Properties section has no 'thread color by number' input — user wanting to enter a specific Robison-Anton code (e.g., '9012') has to scroll the catalog and find it by eye #349

Mark referenced this issue

2026-10-04 04:01:21 +00:00

Editor's Path Properties has 'Color' but the color picker is a simple grid — user with 60+ catalog colors has to scroll the picker to find a specific one (no virtualized scrolling) #386

Mark referenced this issue from a commit

2026-10-04 10:38:28 +00:00

fix(#256): Thread color picker — search by name or hex (#e639 finds red)

Mark commented

2026-10-04 10:38:41 +00:00

Author

Owner

Shipped at commit 0d69fb1 (push c7e3c88..0d69fb1).

The Thread Color picker now has a search input above the grid:

Substring match on name (case-insensitive)
Substring match on hex (# is stripped so users can paste a bare 6-digit hex)
Empty matches show a No thread colors match "<query>". hint
Search resets when a swatch is picked (next open starts fresh)
The + Custom color tile stays available below the grid so users can still grow the catalog they are searching

Try it with a Robison-Anton catalog of 60+ colors:

nav → Navy
#e639 → Bright Red (substring of #E63946)
1d3557 → Navy (bare hex, no #)
pantone 18-1664 → if the catalog has the color, this surfaces it

Shipped at commit 0d69fb1 (push c7e3c88..0d69fb1). The Thread Color picker now has a search input above the grid: - Substring match on `name` (case-insensitive) - Substring match on `hex` (`#` is stripped so users can paste a bare 6-digit hex) - Empty matches show a `No thread colors match "<query>".` hint - Search resets when a swatch is picked (next open starts fresh) - The `+ Custom color` tile stays available below the grid so users can still grow the catalog they are searching Try it with a Robison-Anton catalog of 60+ colors: - `nav` → Navy - `#e639` → Bright Red (substring of `#E63946`) - `1d3557` → Navy (bare hex, no `#`) - `pantone 18-1664` → if the catalog has the color, this surfaces it

Mark closed this issue

2026-10-04 10:38:44 +00:00