Editor's stitch type preview (per #297) for the dropdown options is missing — user picking between 'satin' and 'fill' has to remember what each looks like, no visual aid in the dropdown #347

New issue

Closed

opened 2026-10-04 03:55:35 +00:00 by Mark · 0 comments

Mark commented

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

Owner

Finding

The stitch type dropdown in the Path Properties section (per the snippet) shows just the names: "Satin", "Fill", "Running", "Cross-Stitch", "Zigzag".

grep -rn 'previewStitch\|stitchPattern' src/components/editor/EditorRightPanel.tsx returns 0.

The Help page (per Help.tsx:80-100) has visual previews for each stitch type (SatinPattern, FillPattern, etc.). The editor's dropdown doesn't reuse them.

This is filed as #297, but the user is filing similar - the dropdown's preview is a polish improvement.

Where

Dropdown: src/components/editor/EditorRightPanel.tsx (the stitch type SelectField)
Help page patterns: src/pages/Help.tsx:80-100 (SatinPattern, etc.)
No preview in dropdown: grep -rn 'previewStitch' src/components/editor/ returns 0

Suggested fix shape

Component reuse: import the pattern components from Help.tsx and use them in the dropdown:

import { SatinPattern, FillPattern, RunningPattern, CrossStitchPattern, ZigzagPattern } from '@/pages/Help';

const STITCH_PATTERNS = {
  satin: SatinPattern,
  fill: FillPattern,
  running: RunningPattern,
  'cross-stitch': CrossStitchPattern,
  zigzag: ZigzagPattern,
};

// In the dropdown
{USER_FACING_STITCH_TYPES.map((type) => {
  const Pattern = STITCH_PATTERNS[type];
  return (
    <option key={type} value={type}>
      <Pattern size={16} /> {STITCH_LABELS[type]}
    </option>
  );
})}

UI: each option has a 16x16 visual + the name.
Live preview: when the user hovers an option (without selecting), the canvas shows a preview of what the path would look like with that stitch type.
Use cases:

The user can see what each type looks like
The Help page's patterns are the source of truth

Severity

Low. The user can read the help. Power users notice.

Discovered by

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

#297 (open) — Stitch type preview. Same surface; this is the specific implementation.
The Help page (per Help.tsx) is the source of the patterns.
Figma/Illustrator have visual previews in the dropdown. The editor's gap is the parallel.

## Finding The stitch type dropdown in the Path Properties section (per the snippet) shows just the names: "Satin", "Fill", "Running", "Cross-Stitch", "Zigzag". `grep -rn 'previewStitch\|stitchPattern' src/components/editor/EditorRightPanel.tsx` returns 0. The Help page (per `Help.tsx:80-100`) has visual previews for each stitch type (SatinPattern, FillPattern, etc.). The editor's dropdown doesn't reuse them. This is filed as #297, but the user is filing similar - the dropdown's preview is a polish improvement. ## Where - Dropdown: `src/components/editor/EditorRightPanel.tsx` (the stitch type SelectField) - Help page patterns: `src/pages/Help.tsx:80-100` (SatinPattern, etc.) - No preview in dropdown: `grep -rn 'previewStitch' src/components/editor/` returns 0 ## Suggested fix shape 1. **Component reuse**: import the pattern components from Help.tsx and use them in the dropdown: ```tsx import { SatinPattern, FillPattern, RunningPattern, CrossStitchPattern, ZigzagPattern } from '@/pages/Help'; const STITCH_PATTERNS = { satin: SatinPattern, fill: FillPattern, running: RunningPattern, 'cross-stitch': CrossStitchPattern, zigzag: ZigzagPattern, }; // In the dropdown {USER_FACING_STITCH_TYPES.map((type) => { const Pattern = STITCH_PATTERNS[type]; return ( <option key={type} value={type}> <Pattern size={16} /> {STITCH_LABELS[type]} </option> ); })} ``` 2. **UI**: each option has a 16x16 visual + the name. 3. **Live preview**: when the user hovers an option (without selecting), the canvas shows a preview of what the path would look like with that stitch type. 4. **Use cases**: - The user can see what each type looks like - The Help page's patterns are the source of truth ## Severity Low. The user can read the help. Power users notice. ## Discovered by Gap analysis (2026-10-02) of editor path properties. ## Related - #297 (open) — Stitch type preview. Same surface; this is the specific implementation. - The Help page (per `Help.tsx`) is the source of the patterns. - Figma/Illustrator have visual previews in the dropdown. The editor's gap is the parallel.