Skip to content

feat(ui/colors): improve multi-color hex editing and spool/filament previews#863

Open
akira69 wants to merge 5 commits intoDonkie:masterfrom
akira69:feat/ui-color-hex-preview-upstream-split
Open

feat(ui/colors): improve multi-color hex editing and spool/filament previews#863
akira69 wants to merge 5 commits intoDonkie:masterfrom
akira69:feat/ui-color-hex-preview-upstream-split

Conversation

@akira69
Copy link
Copy Markdown

@akira69 akira69 commented Feb 24, 2026

Summary

Improve filament and spool color previews, make multi-color hex values easier to read while editing, and carry forward the shared malformed-saved-state recovery that was dropped during restacking.

What Changed

  • Added a reusable ColorHexPreview so filament and spool show pages render color chips and canonical uppercase hex values the same way.
  • Updated filament editing to show readable single-color hex text, per-swatch multi-color hex labels, and a longitudinal layout that matches the final preview.
  • Carried forward the shared useSavedState guard in client/src/utils/saveload.ts so malformed savedStates-* entries fall back cleanly instead of crashing the page.

Screenshots

Filament edit: single-color + multi-color modes

image image image

Filament show: color/hex preview

image image image

Spool show: color/hex preview

image image image

Testing Performed

  • cd client && ./node_modules/.bin/eslint src/components/colorHexPreview.tsx src/components/multiColorPicker.tsx src/pages/filaments/edit.tsx src/pages/filaments/show.tsx src/pages/spools/show.tsx src/utils/colorFormatting.ts src/utils/saveload.ts
  • client/node_modules/.bin/prettier --check client/src/components/colorHexPreview.tsx client/src/components/multiColorPicker.tsx client/src/pages/filaments/edit.tsx client/src/pages/filaments/show.tsx client/src/pages/spools/show.tsx client/src/utils/colorFormatting.ts client/src/utils/saveload.ts
  • cd client && VITE_APIURL=/api/v1 npm run build
  • PATH=.venv/bin:$PATH SPOOLMAN_DIR_DATA=/tmp/spoolman_pr_863_data uv run uvicorn spoolman.main:app --host 0.0.0.0 --port 9863
  • Playwright against http://localhost:9863 with local seeded vendor/filament/spool data:
  • Verified filament edit shows uppercase single-color hex text.
  • Verified multi-color edit shows per-swatch hex labels.
  • Verified longitudinal multi-color edit uses stacked rows with right-side hex labels.
  • Verified edit-to-show flow persists the updated multi-color state.
  • Verified filament show renders the shared longitudinal multi-color preview and labels.
  • Verified spool show renders the same shared preview for the linked filament.
  • Set localStorage["savedStates-spoolList-showArchived"] = "{bad json" and reloaded /spool; the page still rendered and the saved value recovered to false.

Test Checklist

  • Single-color filament edit shows uppercase hex text under the swatch
  • Multi-color filament edit shows per-swatch hex labels
  • Longitudinal multi-color edit uses stacked rows with right-side hex labels
  • Edit-to-show flow persists the updated multi-color state
  • Filament show renders the shared color/hex preview for a longitudinal multi-color filament
  • Spool show renders the shared color/hex preview for the linked filament
  • Malformed persisted saved state on /spool no longer white-screens the page

@akira69 akira69 mentioned this pull request Mar 5, 2026
akira69 added 3 commits March 13, 2026 20:36
…ormatting

- Created src/utils/colorFormatting.ts with normalizeHex() function
- Moved design comment to utility JSDoc explaining canonical color format reasoning
- Updated colorHexPreview.tsx to import and use shared normalizeHex
- Updated multiColorPicker.tsx to import shared normalizeHex
- Extracted swatchStyle constant for reuse in color swatches
- All code quality checks pass: ESLint ✓, Prettier ✓
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant