fix: collection color management

[gaspergrom]

Note

Low Risk
UI-only changes to form layout and inputs; no backend/API or data model changes, with minimal risk beyond minor UX/validation regressions.

Overview
Adjusts the admin “Add/Edit collection” form UI for appearance fields.

The Appearance section is repositioned below the category selector, its header styling is updated, and the collection color control changes from a native type="color" picker to a HEX text input with an optional preview swatch prefix (shown only when a color is set).

^{Written by Cursor Bugbot for commit e3c5e88. This will update automatically on new commits. Configure here.}

[github-actions]

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

• feat: add user authentication (CM-123)
• feat: add user authentication (IN-123)

Projects:

• CM: Community Data Platform
• IN: Insights

Please add a Jira issue key to your PR title.

[github-actions]

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

• feat: add user authentication (CM-123)
• feat: add user authentication (IN-123)

Projects:

• CM: Community Data Platform
• IN: Insights

Please add a Jira issue key to your PR title.

[github-actions]

⚠️ Jira Issue Key Missing

Your PR title doesn't contain a Jira issue key. Consider adding it for better traceability.

Example:

• feat: add user authentication (CM-123)
• feat: add user authentication (IN-123)

Projects:

• CM: Community Data Platform
• IN: Insights

Please add a Jira issue key to your PR title.

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

[cursor]

Unreachable fallback due to v-if guard

Low Severity

The v-if="form.color" on line 178 ensures the color preview span only renders when form.color is truthy, which makes the || '#009AFF' fallback in the backgroundColor style binding on line 180 unreachable dead code. If the intent was to show a default color swatch when the field is empty, the v-if prevents that. If the intent was to only show a preview when the user has typed something, the fallback is unnecessary.

 

[cursor]

Empty prefix div renders with padding when color blank

Low Severity

The #prefix slot is always provided to lf-input, so the $slots['prefix'] check inside Input.vue is always truthy — even when form.color is falsy and the inner span doesn't render via v-if. This causes the c-input__prefix wrapper div (which applies pl-2 padding) to always be present in the DOM, resulting in an empty padded area inside the input when no color is entered. The text position also visually shifts when a color is typed and the circle appears.