feat(inventory): multi-colour gradients, transparency, visual effects (#1154)

Spool and color_catalog rows carry extra_colors (comma-separated hex
  stops) and effect_type (14 visual variants: surface effects, sheen,
  structural). The shared FilamentSwatch component renders gradient,
  conic, effect overlay, and alpha-checkerboard consistently across the
  inventory grid, table, group banner, card, ColorSection preview, and
  catalog editor. Catalog hex_color accepts #RRGGBBAA so catalog entries
  can carry transparency too.

  The paste field accepts the exact format 3dfilamentprofiles.com puts on
  its filament details pages, so users can copy a multi-colour combo
  directly. The effect dropdown spans the full filament-variant
  vocabulary -- surface effects (sparkle/wood/marble/glow/matte), sheen
  variants (silk/galaxy/rainbow/metal/translucent), and structural
  variants (gradient/dual-color/tri-color/multicolor). None of these
  fields touch MQTT/firmware -- pure visual hint.

  Spool group-key extended to include extra_colors + effect_type so
  "Group similar" no longer collapses visually distinct spools.

  Migrations: 4 idempotent ALTER TABLE ADD COLUMN (Postgres-safe), plus
  ALTER COLUMN hex_color TYPE VARCHAR(9) on Postgres only (SQLite ignores
  VARCHAR length).

  Tests: 42 new backend (35 unit + 7 integration), 20 new frontend (14
  FilamentSwatch + 3 ColorCatalogSettings + 3 InventoryPageGrouping
  regression). 3522 backend + 1582 frontend tests pass; ruff clean.
  Localised across all 8 UI locales.
This commit is contained in:
maziggy
2026-04-29 09:13:33 +02:00
parent 57af8a1c19
commit a34beaa599
34 changed files with 2054 additions and 491 deletions
+26 -3
View File
@@ -1063,6 +1063,9 @@ export interface ColorCatalogEntry {
hex_color: string;
material: string | null;
is_default: boolean;
// #1154: optional multi-colour gradient stops + visual effect.
extra_colors?: string | null;
effect_type?: string | null;
}
export interface ColorLookupResult {
@@ -2235,6 +2238,10 @@ export interface InventorySpool {
subtype: string | null;
color_name: string | null;
rgba: string | null;
// Multi-colour gradient stops (#1154): comma-separated 6/8-char hex.
extra_colors: string | null;
// Visual effect overlay: sparkle | wood | marble | glow | matte.
effect_type: string | null;
brand: string | null;
label_weight: number;
core_weight: number;
@@ -4346,10 +4353,26 @@ export const api = {
request<ColorCatalogEntry[]>('/inventory/colors'),
getColorNameMap: () =>
request<{ colors: Record<string, string> }>('/inventory/colors/map'),
addColorEntry: (data: { manufacturer: string; color_name: string; hex_color: string; material: string | null }) =>
addColorEntry: (data: {
manufacturer: string;
color_name: string;
hex_color: string;
material: string | null;
extra_colors?: string | null;
effect_type?: string | null;
}) =>
request<ColorCatalogEntry>('/inventory/colors', { method: 'POST', body: JSON.stringify(data) }),
updateColorEntry: (id: number, data: { manufacturer: string; color_name: string; hex_color: string; material: string | null }) =>
request<ColorCatalogEntry>(`/inventory/colors/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
updateColorEntry: (
id: number,
data: {
manufacturer: string;
color_name: string;
hex_color: string;
material: string | null;
extra_colors?: string | null;
effect_type?: string | null;
},
) => request<ColorCatalogEntry>(`/inventory/colors/${id}`, { method: 'PUT', body: JSON.stringify(data) }),
deleteColorEntry: (id: number) =>
request<{ status: string }>(`/inventory/colors/${id}`, { method: 'DELETE' }),
bulkDeleteColorEntries: (ids: number[]) =>