labels: per-label color
CI & Build / Python lint (push) Successful in 3s
CI & Build / TypeScript typecheck (push) Successful in 8s
CI & Build / Python tests (push) Successful in 10s
CI & Build / Build & push image (push) Successful in 32s

Give labels a color (migration 0011 adds labels.color, server_default
'default' so existing labels keep the neutral chip). The PATCH endpoint now
updates name and/or color; note serialization carries each label's color.
Frontend: a swatch picker per label in the Edit-labels modal, colored chips
on cards + in the editor (LABEL_CHIP_CLASSES), and a color dot on each
sidebar label. Reuses the note color vocabulary. (Graph node coloring rides
this in the graph-liveliness task.)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm
This commit is contained in:
2026-07-20 13:11:50 -04:00
co-authored by Claude Opus 4.8
parent f3145a5e3f
commit f321c2bf70
11 changed files with 133 additions and 22 deletions
+10 -1
View File
@@ -8,6 +8,7 @@ import { useUiStore } from "../stores/ui";
import CommandPalette from "./CommandPalette.vue";
import Icon from "./Icon.vue";
import LabelsModal from "./LabelsModal.vue";
import { NOTE_SWATCH_CLASSES, type NoteColor } from "../notes/colors";
const route = useRoute();
const router = useRouter();
@@ -127,6 +128,10 @@ onBeforeUnmount(() => window.removeEventListener("keydown", onKeydown));
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;
}
function onSearch(value: string) {
searchText.value = value;
clearTimeout(searchTimer);
@@ -226,7 +231,11 @@ async function signOut() {
class="nav-link"
:class="currentLabelId === lb.id ? 'nav-link-active' : ''"
>
<Icon name="tag" /> <span class="truncate">{{ lb.name }}</span>
<span
class="h-2.5 w-2.5 shrink-0 rounded-full border border-black/10 dark:border-white/15"
:class="labelDot(lb.color)"
></span>
<span class="truncate">{{ lb.name }}</span>
</RouterLink>
<RouterLink to="/archive" class="nav-link mt-3" :class="route.name === 'archive' ? 'nav-link-active' : ''">