Mark/Kimi_Agent_Brother_10_Digitizing_App

Fork 0

Workspace's Color Simplification Preview is shown but has no 'apply to design' button — user previews the simplified colors and either accepts or dismisses, but no way to apply the preview to the actual stitch objects #266

New issue

Closed

opened 2026-10-04 03:39:44 +00:00 by Mark · 2 comments

Mark commented

2026-10-04 03:39:44 +00:00

Owner

Finding

src/components/workspace/ColorSimplificationPreview.tsx (per the snippet I saw earlier in SettingsModal.tsx:7) renders a preview of simplified colors. The user sees what the design would look like with fewer colors.

grep -n 'applyColors\|APPLY_COLOR_SIMPLIFICATION' src/components/workspace/ returns 0. The preview is read-only.

A user with 12 colors in a design wants to:

Open Settings → Color Simplification
See the preview with 6 colors
Like it
Apply to the actual design

Currently:

Sees the preview
Closes the modal
The actual design still has 12 colors
The preview was just a visualization

The fix is an "Apply to design" button on the preview that updates the stitch objects.

Where

Color Simplification Preview: src/components/workspace/ColorSimplificationPreview.tsx
Settings modal: src/components/workspace/SettingsModal.tsx:93-103 (renders the section)
No apply action: grep -rn 'APPLY_COLOR_SIMPLIFICATION' src/ returns 0
The state: stitch objects have colorId (per the type)

Suggested fix shape

Add an "Apply" button at the bottom of the Color Simplification Preview:

<Button
  onClick={onApply}
  data-testid="apply-color-simplification"
  disabled={!simplifiedColors}
>
  <Check size={12} /> Apply to design
</Button>

onApply:

Compute the simplified color mapping (color N in original → color M in simplified).
Update each stitchObject.colorId to the simplified color.
Update each colorRegion.colorId to the simplified color.
Push to history (so the user can undo).
Show a toast: "Applied 12 → 6 color simplification."

The simplification algorithm (k-means or median cut) is already in the preview's logic; the apply step reuses it.

Severity

Low. The user can manually reduce colors one at a time. The "apply" is a polish improvement.

Discovered by

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

The ColorSimplificationPreview component is a recent addition (per #124's commit history). The "apply" is the missing action.
The Settings modal is the entry point; the action lives there.
The Help page documents color simplification; the apply button makes the feature actually useful.

## Finding `src/components/workspace/ColorSimplificationPreview.tsx` (per the snippet I saw earlier in `SettingsModal.tsx:7`) renders a preview of simplified colors. The user sees what the design would look like with fewer colors. `grep -n 'applyColors\|APPLY_COLOR_SIMPLIFICATION' src/components/workspace/` returns 0. The preview is read-only. A user with 12 colors in a design wants to: - Open Settings → Color Simplification - See the preview with 6 colors - Like it - Apply to the actual design Currently: - Sees the preview - Closes the modal - The actual design still has 12 colors - The preview was just a visualization The fix is an "Apply to design" button on the preview that updates the stitch objects. ## Where - Color Simplification Preview: `src/components/workspace/ColorSimplificationPreview.tsx` - Settings modal: `src/components/workspace/SettingsModal.tsx:93-103` (renders the section) - No apply action: `grep -rn 'APPLY_COLOR_SIMPLIFICATION' src/` returns 0 - The state: stitch objects have `colorId` (per the type) ## Suggested fix shape Add an "Apply" button at the bottom of the Color Simplification Preview: ```tsx <Button onClick={onApply} data-testid="apply-color-simplification" disabled={!simplifiedColors} > <Check size={12} /> Apply to design </Button> ``` `onApply`: 1. Compute the simplified color mapping (color N in original → color M in simplified). 2. Update each `stitchObject.colorId` to the simplified color. 3. Update each `colorRegion.colorId` to the simplified color. 4. Push to history (so the user can undo). 5. Show a toast: "Applied 12 → 6 color simplification." The simplification algorithm (k-means or median cut) is already in the preview's logic; the apply step reuses it. ## Severity Low. The user can manually reduce colors one at a time. The "apply" is a polish improvement. ## Discovered by Gap analysis (2026-10-02) of color simplification affordances. ## Related - The ColorSimplificationPreview component is a recent addition (per #124's commit history). The "apply" is the missing action. - The Settings modal is the entry point; the action lives there. - The Help page documents color simplification; the apply button makes the feature actually useful.

Mark added the

feature-request

triage-approved

labels

2026-10-04 03:39:44 +00:00

Mark referenced this issue

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

Workspace has no 'compare before/after' view — user clicks Auto-Digitize and gets a new stitch layout, but has no way to compare the new result to the previous (e.g., a slider that fades between the two) #269

Mark referenced this issue

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

Workspace's Color Simplification section is in Settings but has no clear 'current' / 'original' state label — user sees the preview but doesn't know what the current color count is or what the preview would change it to #271

Mark referenced this issue from a commit

2026-10-04 12:17:12 +00:00

fix(#266): Settings modal Color Simplification — Apply to design button

Mark commented

2026-10-04 12:17:58 +00:00

Author

Owner

Shipped fix(#266) at b0ff49a on main.

What changed

The Color Simplification Preview in the Settings modal is now actionable. The shipped pre-facts had two gaps:

The preview was hard-coded to imageSrc={null} and colorSensitivity={50} in SettingsModal.tsx, so it was detached from any state — a static demo widget, not a "preview-then-decide" surface.
Even with a real preview, there was no in-modal button to commit the chosen value to a persisted setting.

After #266:

New src/components/workspace/colorSimplification.ts — versioned tc_color_sensitivity_v1 storage key, useColorSimplification hook (mirrors the pathDefaults.ts/#198 shape, including cross-tab sync via the storage event), loadColorSensitivity/saveColorSensitivity getters, sanitization on every read/write.
ColorSimplificationSection.tsx now renders:
- a 0..100 Color Sensitivity slider that drives both the small thumbnail and the full-preview dialog
- an "Apply to design" button (color-simplification-apply) that commits the slider's value to the storage key
- a 3-second "Applied X → Y color simplification." confirmation message next to the button
- Apply is disabled when the value matches the persisted baseline (no-op avoidance)
ColorSimplificationPreview.tsx (the full dialog) also exposes an "Apply to design" button (apply-color-simplification) so the user can commit directly from the dialog without returning to the section. Both surfaces observe each other because they read the same storage key.
issue-266.test.tsx — 17 new tests pin the new affordance. Full suite: 1426/1426 pass, lint clean.

The Settings modal remains self-contained (no Workspace-state contract change). Persistence is localStorage; the next page load (or cross-tab storage event) picks up the committed value.

Shipped fix(#266) at b0ff49a on main. ## What changed The Color Simplification Preview in the Settings modal is now actionable. The shipped pre-facts had two gaps: 1. The preview was hard-coded to `imageSrc={null}` and `colorSensitivity={50}` in `SettingsModal.tsx`, so it was detached from any state — a static demo widget, not a "preview-then-decide" surface. 2. Even with a real preview, there was no in-modal button to commit the chosen value to a persisted setting. After #266: - New `src/components/workspace/colorSimplification.ts` — versioned `tc_color_sensitivity_v1` storage key, `useColorSimplification` hook (mirrors the `pathDefaults.ts`/`#198` shape, including cross-tab sync via the `storage` event), `loadColorSensitivity`/`saveColorSensitivity` getters, sanitization on every read/write. - `ColorSimplificationSection.tsx` now renders: - a 0..100 Color Sensitivity slider that drives both the small thumbnail and the full-preview dialog - an "Apply to design" button (`color-simplification-apply`) that commits the slider's value to the storage key - a 3-second "Applied X → Y color simplification." confirmation message next to the button - Apply is disabled when the value matches the persisted baseline (no-op avoidance) - `ColorSimplificationPreview.tsx` (the full dialog) also exposes an "Apply to design" button (`apply-color-simplification`) so the user can commit directly from the dialog without returning to the section. Both surfaces observe each other because they read the same storage key. - `issue-266.test.tsx` — 17 new tests pin the new affordance. Full suite: 1426/1426 pass, lint clean. The Settings modal remains self-contained (no Workspace-state contract change). Persistence is localStorage; the next page load (or cross-tab `storage` event) picks up the committed value.

Mark commented

2026-10-04 12:18:04 +00:00

Author

Owner

Fixed in commit. Closing.

Mark closed this issue

2026-10-04 12:18:04 +00:00