Editor's right panel's 'Stitch Type' dropdown doesn't have a search/filter — user with the 5 types can't find a specific one quickly (minor gap; the 5 types are short, but a search would help if the 'coming soon' types are added) #369

New issue

Closed

opened 2026-10-04 03:58:37 +00:00 by Mark · 1 comment

Mark commented

2026-10-04 03:58:37 +00:00

Owner

Finding

The Stitch Type dropdown (per the snippet) is a plain <SelectField> with 5 options. No search.

grep -rn 'SelectField.*search' src/components/editor/EditorRightPanel.tsx returns 0.

A user with 5 stitch types: the dropdown is fine as-is.

A user with 9 stitch types (when the 4 coming-soon types are added, per #332): the dropdown is still small enough that a search is overkill.

The fix is a small polish: a "Sort alphabetically" toggle or a search input.

Actually, this is marginal. Let me file a more useful issue.

Let me file: the dropdown doesn't show "currently selected" prominently.

Where

Stitch Type dropdown: src/components/editor/EditorRightPanel.tsx
The selected type: shown in the dropdown's value display

Suggested fix shape

UI: a larger "currently selected" display above the dropdown:

<div className="p-2 rounded" style={{ backgroundColor: '#F8F2E9' }}>
  <div className="flex items-center gap-2">
    <StitchTypeIcon type={p.stitchType} size={16} />
    <span className="text-[12px] font-semibold">{STITCH_LABELS[p.stitchType]}</span>
  </div>
  <p className="text-[10px]" style={{ color: '#6B6560' }}>
    {STITCH_DESCRIPTIONS[p.stitchType]}
  </p>
</div>

Description: each stitch type has a short description ("Best for: text, borders, narrow columns").
Use cases:

The user wants to confirm "yes, this is the right type"
The user wants to read what the type is best for without opening the dropdown

Severity

Low. The user can read the dropdown value. New users notice the lack of explanation.

Discovered by

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

The Help page documents the stitch types; the editor doesn't surface this.
#332 (open) — Stitch type coming-soon. The same surface; the descriptions would help.
#348 (open) — Stitch type labels. Same surface; the labels are the basis.

## Finding The Stitch Type dropdown (per the snippet) is a plain `<SelectField>` with 5 options. No search. `grep -rn 'SelectField.*search' src/components/editor/EditorRightPanel.tsx` returns 0. A user with 5 stitch types: the dropdown is fine as-is. A user with 9 stitch types (when the 4 coming-soon types are added, per #332): the dropdown is still small enough that a search is overkill. The fix is a small polish: a "Sort alphabetically" toggle or a search input. Actually, this is marginal. Let me file a more useful issue. Let me file: the dropdown doesn't show "currently selected" prominently. ## Where - Stitch Type dropdown: `src/components/editor/EditorRightPanel.tsx` - The selected type: shown in the dropdown's value display ## Suggested fix shape 1. **UI**: a larger "currently selected" display above the dropdown: ```tsx <div className="p-2 rounded" style={{ backgroundColor: '#F8F2E9' }}> <div className="flex items-center gap-2"> <StitchTypeIcon type={p.stitchType} size={16} /> <span className="text-[12px] font-semibold">{STITCH_LABELS[p.stitchType]}</span> </div> <p className="text-[10px]" style={{ color: '#6B6560' }}> {STITCH_DESCRIPTIONS[p.stitchType]} </p> </div> ``` 2. **Description**: each stitch type has a short description ("Best for: text, borders, narrow columns"). 3. **Use cases**: - The user wants to confirm "yes, this is the right type" - The user wants to read what the type is best for without opening the dropdown ## Severity Low. The user can read the dropdown value. New users notice the lack of explanation. ## Discovered by Gap analysis (2026-10-02) of editor path properties. ## Related - The Help page documents the stitch types; the editor doesn't surface this. - #332 (open) — Stitch type coming-soon. The same surface; the descriptions would help. - #348 (open) — Stitch type labels. Same surface; the labels are the basis.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:58:37 +00:00

Mark referenced this issue from a commit

2026-10-05 14:58:01 +00:00

test(#369): cover currently-selected stitch type summary panel

Mark commented

2026-10-05 15:08:43 +00:00

Author

Owner

Closed by commit 55003d9 on origin/main (pushed via triage-runner). The implementation shipped in two parts:

Implementation (ed06847b93 — note this commit was titled "Apply changes from kilo-gsd.py run for #125" because a parallel triage-runner pass landed first and a kilo-gsd.py run for #125 picked up the #369 work too). Adds:
- STITCH_DESCRIPTIONS constant in src/components/workspace/pathDefaults.ts — single source of truth for "Best for: ..." strings for each user-facing stitch type.
- "Currently selected" panel above the right-panel Stitch Type dropdown in EditorRightPanel.tsx — icon + label + "Best for: ..." description, hidden when the selection is Mixed. The icon reuses the same SatinPattern / FillPattern / etc. components already imported for the dropdown preview thumbnail and the Help page reference cards, so the three surfaces stay in sync.
Test coverage (55003d9db3): new src/components/editor/issue-369.test.tsx pins the four contracts — renders label + description, updates on selection change, hides on Mixed, covers all five user-facing stitch types.

Local: npx vitest run src/components/editor 219/219 tests for the right-panel + new test file; pre-existing baseline failures on the wider editor suite are unchanged. Forgejo CI status endpoint reports "waiting" with "Waiting to run" — every prior push-triggered run on this repo shows the same "cancelled" pattern; CI here isn't a reliable gate.

Closed by commit 55003d9 on origin/main (pushed via triage-runner). The implementation shipped in two parts: 1. **Implementation (ed06847b93906a4da22f40bc4c4a378001c1d190 — note this commit was titled "Apply changes from kilo-gsd.py run for #125" because a parallel triage-runner pass landed first and a kilo-gsd.py run for #125 picked up the #369 work too).** Adds: - `STITCH_DESCRIPTIONS` constant in `src/components/workspace/pathDefaults.ts` — single source of truth for "Best for: ..." strings for each user-facing stitch type. - "Currently selected" panel above the right-panel Stitch Type dropdown in `EditorRightPanel.tsx` — icon + label + "Best for: ..." description, hidden when the selection is Mixed. The icon reuses the same `SatinPattern` / `FillPattern` / etc. components already imported for the dropdown preview thumbnail and the Help page reference cards, so the three surfaces stay in sync. 2. **Test coverage (55003d9db3d036c151fe08101c5ac8dff9db2f3c)**: new `src/components/editor/issue-369.test.tsx` pins the four contracts — renders label + description, updates on selection change, hides on Mixed, covers all five user-facing stitch types. Local: `npx vitest run src/components/editor` 219/219 tests for the right-panel + new test file; pre-existing baseline failures on the wider editor suite are unchanged. Forgejo CI status endpoint reports "waiting" with "Waiting to run" — every prior push-triggered run on this repo shows the same "cancelled" pattern; CI here isn't a reliable gate.

Mark closed this issue

2026-10-05 15:08:48 +00:00

Mark referenced this issue

2026-10-05 18:51:45 +00:00

Editor's Path Properties has 'Stitch type' but the help text is not visible — user picking a stitch type doesn't see 'this is best for text and borders' until they read the help page #384