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/AppShell.vue

@@ -14,7 +14,7 @@ import ImportNotes from "./ImportNotes.vue";
 import LabelsModal from "./LabelsModal.vue";
 import { isDesktop } from "../desktop/bridge";
 import { facetsToQuery } from "../notes/facets";
-import { NOTE_SWATCH_CLASSES, type NoteColor } from "../notes/colors";
+import { NOTE_SWATCH_CLASSES, resolveLabelColor } from "../notes/colors";
 
 const route = useRoute();
 const router = useRouter();
@@ -173,8 +173,10 @@ onBeforeUnmount(() => {
 
 const currentLabelId = computed(() => (route.name === "label" ? String(route.params.id) : null));
 
-function labelDot(color: string): string {
-  return NOTE_SWATCH_CLASSES[color as NoteColor] ?? NOTE_SWATCH_CLASSES.default;
+// The drawer's tag list. Same resolution as every other chip and dot — a tag that is
+// green on a card must be green here, or the sidebar stops being a way to find it.
+function labelDot(label: { name: string; color: string }): string {
+  return NOTE_SWATCH_CLASSES[resolveLabelColor(label)] ?? NOTE_SWATCH_CLASSES.default;
 }
 
 // The board lenses — the routes a search can happen *within*. Searching while looking
@@ -443,7 +445,7 @@ async function signOut() {
           >
             <span
               class="h-2.5 w-2.5 shrink-0 rounded-full border border-black/10 dark:border-white/15"
-              :class="labelDot(lb.color)"
+              :class="labelDot(lb)"
             ></span>
             <span class="truncate">{{ lb.name }}</span>
           </RouterLink>

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>

frontend/src/components/NoteCard.vue

@@ -7,6 +7,7 @@ import {
   NOTE_COLOR_KEYS,
   NOTE_COLOR_LABELS,
   NOTE_SWATCH_CLASSES,
+  resolveLabelColor,
   resolveNoteColor,
   type NoteColor,
 } from "../notes/colors";
@@ -196,8 +197,10 @@ function cardClass(note: Note): string {
   return NOTE_CARD_CLASSES[resolveNoteColor(note)] ?? NOTE_CARD_CLASSES.default;
 }
 
-function labelChip(color: string): string {
-  return LABEL_CHIP_CLASSES[color as NoteColor] ?? LABEL_CHIP_CLASSES.default;
+// Takes the label, not its colour: a tag nobody has coloured derives one from its
+// name, so chips carry the tag's identity rather than all being the same grey.
+function labelChip(label: { name: string; color: string }): string {
+  return LABEL_CHIP_CLASSES[resolveLabelColor(label)] ?? LABEL_CHIP_CLASSES.default;
 }
 
 // Per-card color popover (recolor without opening the editor).
@@ -300,7 +303,7 @@ onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown))
         v-for="lb in note.labels"
         :key="lb.id"
         class="rounded-full px-2 py-0.5 text-xs"
-        :class="labelChip(lb.color)"
+        :class="labelChip(lb)"
         >{{ lb.via_tag ? "#" + lb.name : lb.name }}</span
       >
     </div>

frontend/src/components/NoteEditor.vue

@@ -9,7 +9,7 @@ import { fromLocalInput, toLocalInput } from "../notes/datetime";
 import { takeMorphOrigin } from "../composables/useEditorMorph";
 import { prefersReducedMotion } from "../composables/useReducedMotion";
 import type { Note, NoteLabel, NoteRevision } from "../stores/notes";
-import { LABEL_CHIP_CLASSES, type NoteColor } from "../notes/colors";
+import { LABEL_CHIP_CLASSES, resolveLabelColor, type NoteColor } from "../notes/colors";
 import {
   afterEnter,
   type EditorBlock,
@@ -358,8 +358,11 @@ async function onLabelsChange(next: NoteLabel[]) {
 async function removeLabel(id: string) {
   await onLabelsChange(labelList.value.filter((lb) => lb.id !== id));
 }
-function labelChip(c: string): string {
-  return LABEL_CHIP_CLASSES[c as NoteColor] ?? LABEL_CHIP_CLASSES.default;
+// Takes the label, not its colour — a tag nobody has coloured derives one from its
+// name. Must match NoteCard's chip exactly: the same tag either side of opening a
+// note changing colour would be worse than both being grey.
+function labelChip(label: { name: string; color: string }): string {
+  return LABEL_CHIP_CLASSES[resolveLabelColor(label)] ?? LABEL_CHIP_CLASSES.default;
 }
 
 // ---- add a checklist ----
@@ -608,7 +611,7 @@ function revPreview(rev: NoteRevision): string {
             v-for="lb in labelList"
             :key="lb.id"
             class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs"
-            :class="labelChip(lb.color)"
+            :class="labelChip(lb)"
           >
             {{ lb.via_tag ? "#" + lb.name : lb.name }}
             <button