feat: Board background settings

[knom]

A first draft of a background option for boards.

Adds a settings menu on board (lookout for the three dots).
And let's you pick a background there.

First draft as I said.. The picker UX should probably be better.. But looking to find out if this is the right direction for folks..

Thanks.

[nickmeinhold]

Really nice first slice @knom — keeping it scoped to just the board background is the right call, and a couple of things stood out as genuinely well done:

• The hasOtherUpdates change from input.name || … to input.name !== undefined quietly fixes a latent bug (an empty-string name was previously falsy). Good catch.
• The luminance-based contrast for the empty-state title is a thoughtful touch.

A few suggestions, roughly in priority order:

1. Palette over the raw colour input (the main one). The issue (#155) is really asking for a Trello-style swatch palette, and you flagged the picker UX yourself. There's already a shared palette at @kan/shared/constants (colours) that labels use — offering those swatches as the primary picker (with the native <input type="color"> as an optional "custom" escape hatch) would match the request and stay consistent with the rest of the app. For reference, I just used that palette for card cover colours in #515 if a concrete example helps — and the two PRs are nicely complementary (board background vs card cover, no overlap).

2. Contrast handling on the public board. views/public/board/index.tsx renders the coloured background but doesn't apply the contrast-adjusted text class, so light backgrounds could make text hard to read there. Relatedly, isLightHexColor is inlined in board/index.tsx — might be worth lifting into a small shared util so both views (and the board header text, not just the empty state) can use it.

3. INITIAL_BOARD_BACKGROUND_COLOR = "#0d9488" is exactly the palette's "Teal" — importing it from colours instead of hardcoding the hex would avoid the magic literal.

4. Minor: the useEffect that focuses #board-background-color still references nameElement (copy-paste from a name form), and auto-focusing a colour input is a slightly unusual UX — probably safe to drop.

Happy to help on any of these. Great direction overall.

[knom]

Really nice first slice @knom — keeping it scoped to just the board background is the right call, and a couple of things stood out as genuinely well done:

• The hasOtherUpdates change from input.name || … to input.name !== undefined quietly fixes a latent bug (an empty-string name was previously falsy). Good catch.
• The luminance-based contrast for the empty-state title is a thoughtful touch.

A few suggestions, roughly in priority order:

1. Palette over the raw colour input (the main one). The issue (#155) is really asking for a Trello-style swatch palette, and you flagged the picker UX yourself. There's already a shared palette at @kan/shared/constants (colours) that labels use — offering those swatches as the primary picker (with the native <input type="color"> as an optional "custom" escape hatch) would match the request and stay consistent with the rest of the app. For reference, I just used that palette for card cover colours in #515 if a concrete example helps — and the two PRs are nicely complementary (board background vs card cover, no overlap).

2. Contrast handling on the public board. views/public/board/index.tsx renders the coloured background but doesn't apply the contrast-adjusted text class, so light backgrounds could make text hard to read there. Relatedly, isLightHexColor is inlined in board/index.tsx — might be worth lifting into a small shared util so both views (and the board header text, not just the empty state) can use it.

3. INITIAL_BOARD_BACKGROUND_COLOR = "#0d9488" is exactly the palette's "Teal" — importing it from colours instead of hardcoding the hex would avoid the magic literal.

4. Minor: the useEffect that focuses #board-background-color still references nameElement (copy-paste from a name form), and auto-focusing a colour input is a slightly unusual UX — probably safe to drop.

Happy to help on any of these. Great direction overall.

Great feedback, thank you!

I've started to incorporate it and have just pushed changes for #2.
The rest is to follow!

thx.

[knom]

Okay.. Here's my V1
Text color stays static for now, as I was messing too much with the CSS classes and light/dark system theme.. :-(

Looking forward to advixe on how to do the text color switching best!

@nickmeinhold @hjball please review and let me know what you think!

[NDCallahan]

Wondering if in addition to allowing colors for the board, to allow for a background image to take it a step further?

[knom]

Wondering if in addition to allowing colors for the board, to allow for a background image to take it a step further?

Absolutely!
This is a natural step 2.

But I wanna see with @hjball first what he thinks of the overall approach!