Replace project color dropdown with native color picker

[Copilot]

Projects were limited to 5 hardcoded color choices. This replaces the <select> with a native <input type="color"> picker, giving users full-spectrum color freedom.

Changes

• index.html — Swap <select id="projectColor"> for <input type="color" id="projectColor" value="#3b82f6">
• src/app.ts
  • Add normalizeColor(): maps legacy named colors (blue, red, etc.) to hex, validates output against /^#[0-9a-fA-F]{3,6}$/ to prevent CSS injection, falls back to #3b82f6
  • renderProjectCard(): apply color via style="border-top-color: <hex>" instead of CSS class
  • openProjectModal() / saveProject(): cast #projectColor as HTMLInputElement
• css/styles.css — Add border-top: 4px solid #3b82f6 default to .project-card for cards without a stored color

Existing projects stored with named colors are transparently migrated through normalizeColor().

Screenshot

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Add a project color picker</issue_title>
<issue_description>Users would like to be able to choose more variety with their project colors. Instead of only having a few options, let's add a color picker</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Add a project color picker #53

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[JoeProgrammer88]

The e2e tests regarding creating a project while picking a named color need to be updated

[Copilot]

The e2e tests regarding creating a project while picking a named color need to be updated

Updated in commit 2d9fb3a. Replaced page.selectOption('#projectColor', 'green') with page.fill('#projectColor', '#10b981') (the hex equivalent of green) to match the new <input type="color"> element.