A tag with no colour of its own derives one from its name

Every #tag ever typed is `default`. `notes/tags.py` mints one as
`Label(owner_id=…, name=name)` with no colour, so it takes the column default —
which means tag-driven note colour, built on top, would have left the board
exactly as grey as it was. Four #todo notes in the operator's screenshot, four
different colours, because the tint is per-note-id and ignores tags entirely.

DERIVED RATHER THAN PERSISTED AT MINT TIME, reversing the plan in 2965. That plan
wanted a hashed colour written wherever a label is born, and named the risk in
its own body: `find_or_create_label` is "easy to miss, and it is the common one",
because most tags are born from typing `#grocery`, not from a management screen.
Deriving has no mint points to miss, needs no backfill for the tags that already
exist, and reuses the hash and the fixture the notes already have.

The cost is that renaming a tag recolours it. That is defensible — the name IS
the tag — and an explicitly picked colour is still stored and still wins, so tag
colours stay editable exactly as asked.

Lowercased before hashing: tags dedupe case-insensitively, so #Todo and #todo are
one tag and must not be two colours.

All five places a label's colour is drawn now resolve the same way — the card
chip, the editor chip, the drawer's tag list, and the management modal's dot and
swatch ring. The modal's ring follows the resolved colour rather than the stored
one, so opening the picker highlights what you can already see instead of
nothing.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/components/LabelsModal.vue

@@ -1,7 +1,13 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useLabelsStore, type Label } from "../stores/labels";
-import { NOTE_COLOR_KEYS, NOTE_COLOR_LABELS, NOTE_SWATCH_CLASSES, type NoteColor } from "../notes/colors";
+import {
+  NOTE_COLOR_KEYS,
+  NOTE_COLOR_LABELS,
+  NOTE_SWATCH_CLASSES,
+  resolveLabelColor,
+  type NoteColor,
+} from "../notes/colors";
 import BaseModal from "./BaseModal.vue";
 import Icon from "./Icon.vue";
 
@@ -25,8 +31,12 @@ async function rename(id: string, value: string) {
   if (name) await labels.rename(id, name);
 }
 
-function labelDot(color: string): string {
-  return NOTE_SWATCH_CLASSES[color as NoteColor] ?? NOTE_SWATCH_CLASSES.default;
+// Shows the colour the tag ACTUALLY wears, derived from its name when nobody has
+// picked one — so this screen agrees with the chips everywhere else. The ring in the
+// swatch grid below follows the same resolution, so opening the picker highlights
+// what you can already see rather than nothing at all.
+function labelDot(label: { name: string; color: string }): string {
+  return NOTE_SWATCH_CLASSES[resolveLabelColor(label)] ?? NOTE_SWATCH_CLASSES.default;
 }
 
 function openColor(id: string) {
@@ -75,8 +85,8 @@ async function doMerge(sourceId: string, targetId: string) {
             <button
               type="button"
               class="h-4 w-4 shrink-0 rounded-full border border-black/10 transition hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-white/15"
-              :class="labelDot(lb.color)"
-              :title="`Color: ${NOTE_COLOR_LABELS[(lb.color as NoteColor)] ?? lb.color}`"
+              :class="labelDot(lb)"
+              :title="`Color: ${NOTE_COLOR_LABELS[resolveLabelColor(lb)]}`"
               aria-label="Change label color"
               @click="openColor(lb.id)"
             />
@@ -120,7 +130,7 @@ async function doMerge(sourceId: string, targetId: string) {
                 :title="NOTE_COLOR_LABELS[key]"
                 :aria-label="NOTE_COLOR_LABELS[key]"
                 class="h-6 w-6 rounded-full border border-black/10 transition hover:scale-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand"
-                :class="[NOTE_SWATCH_CLASSES[key], lb.color === key ? 'ring-2 ring-brand' : '']"
+                :class="[NOTE_SWATCH_CLASSES[key], resolveLabelColor(lb) === key ? 'ring-2 ring-brand' : '']"
                 @click="pickColor(lb.id, key)"
               />
             </div>
@@ -140,7 +150,7 @@ async function doMerge(sourceId: string, targetId: string) {
                   >
                     <span
                       class="h-2.5 w-2.5 shrink-0 rounded-full border border-black/10 dark:border-white/15"
-                      :class="labelDot(t.color)"
+                      :class="labelDot(t)"
                     ></span>
                     <span class="truncate">{{ t.name }}</span>
                   </button>