Skip to content

Editor: visual colour picker for widget background #115

Description

@jonocodes

Problem

In the editor's properties panel, the widget Color field is a plain text input (PropertiesPanel.tsx:167) — the user has to know and type a CSS colour string (e.g. #1e3a8a) to set a button background. There's no visual way to pick a colour, so choosing one requires input the author has to source elsewhere. Compare the Icon field, which got a searchable visual picker in #102.

What to build

Add a visual colour picker to the Color field so a background can be chosen by sight, not typed.

  • A colour swatch / picker alongside the field — at minimum a native <input type="color"> swatch, ideally with a small palette of sensible presets for one-tap selection.
  • Keep the text input as the authoritative value and escape hatch: the schema accepts any CSS colour string (#1e3a8a, rebeccapurple, hsl(...) — see layouts.py::Widget.color), which a bare type="color" (hex-only) can't represent. The picker and the text field stay in sync; typing a non-hex value the swatch can't show should not be clobbered.
  • Clearing the colour sets color back to null (current behaviour — updateField(widget, "color", e.target.value || null)), so an unset widget stays unset in the YAML.
  • The live canvas cell already reflects widget.color (EditorCanvas.tsx:139); the picker should drive the same round-trip.

Acceptance criteria

  • The Color field offers a visual swatch/picker; selecting a colour updates the widget and the canvas preview live.
  • The free-text CSS input remains and stays in sync with the picker; non-hex CSS values (named colours, hsl(...)) are preserved, not overwritten by the swatch.
  • Clearing the field sets color to null and the widget renders with no background override.
  • Saving round-trips the chosen colour through the write API unchanged.
  • Only applies where color is valid (buttons; ignored on jogstrips), matching the current field's visibility.

Notes

Small, self-contained UI enhancement to the existing properties panel (#103). Colour lives at Widget.color in daemon/deckd/layouts.py; the field editor is in client/src/PropertiesPanel.tsx.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestready-for-agentFully specified, ready for an AFK agent

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions