fix(manage): randomize color picker default on page load

[steilerDev]

Summary

• Introduces generateRandomColor() utility in client/src/lib/colorUtils.ts that returns a random HSL color string on each call
• Updates ManagePage to initialize the color picker state with a random color on every page load, so each new area/category/trade starts with a distinct default color instead of a hardcoded value
• Adds 95%+ unit test coverage for colorUtils.ts via colorUtils.test.ts

Fixes #1093

Test plan

• Unit tests for generateRandomColor pass (valid HSL format, values within range, randomness verified)
• ManagePage renders with a randomly initialized color picker on each load
• Pre-commit hook quality gates pass
• CI Quality Gates pass

Co-Authored-By: Claude dev-team-lead (Sonnet) noreply@anthropic.com

[steilerDev]

[ux-designer]

Reviewed the diff for correctness against design system and visual quality.

Token adherence — No CSS files were modified. The #3b82f6 hardcode was an inline value/style prop fallback in JSX (not a .module.css file), so its removal is the right fix. The DEFAULT_COLOR = '#3b82f6' constant is appropriately retained for existing items with null colors (display fallback path only) — that is an intentional, documented behavior.

Color generation quality — HSL constraints (saturation 65–90%, lightness 40–60%) produce saturated mid-tone colors that avoid near-white, near-black, and washed-out results. The range is suitable for color swatches used as category/area identifiers. No WCAG concerns for the swatch itself (it is decorative, aria-hidden="true"), but labels adjacent to these swatches will need to maintain sufficient contrast against the surrounding surface tokens — this is unchanged from the existing implementation.

No new patterns introduced — generateRandomColor is a pure utility function with no CSS or token implications. The useState(generateRandomColor) lazy initializer pattern (function reference, not call) is correct React idiom.

No findings. Approving.

[steilerDev]

[product-architect]

Architecture review: No issues found. This would be an approve if not for GitHub's self-review restriction.

Verified:

• colorUtils.ts correctly placed in client/src/lib/ per project conventions
• HSL-constrained approach produces visually pleasant colors without needing design token changes
• hslToHex kept as a private helper (not exported) — good encapsulation
• useState<string>(generateRandomColor) correctly passes the function reference (lazy initializer), avoiding re-generation on every render
• Post-create reset calls generateRandomColor() (invocation) which is correct for generating a fresh color
• No shared type changes needed — color is already string | null in the API contract, and this change is purely UI-side default initialization
• Eliminates the DEFAULT_COLOR constant and null coalescing pattern in favor of always having a real color value — simpler state management
• Test coverage is thorough: format validation, uniqueness, deterministic boundary tests with mocked Math.random
• No architecture, schema, or API contract impact

No findings.

[github-actions]

🎉 This PR is included in version 2.1.1-beta.6 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This PR is included in version 2.2.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀