M2 labels frontend: sidebar shell + label filter, chips, picker, manage
- AppShell: persistent left sidebar (Notes · labels · Archive · Trash) + top bar (site name, admin Settings, sign out); BoardView now renders inside it. - labels store (list/create/rename/delete); Note gains labels[]; notes store gains setLabels + label-aware reconcile + /api/notes?label= loading. - /label/:id route → label-filtered board. - LabelPicker (tag a note, create-on-the-fly) in the editor; label chips shown on cards and in the editor; LabelsModal to create/rename/delete labels. - api client PUT; new icons (note/tag/pencil/plus/check); nav-link styles. 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:
Claude Opus 4.8
@@ -0,0 +1,106 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { useSessionStore } from "../stores/session";
|
||||
import { useConfigStore } from "../stores/config";
|
||||
import { useLabelsStore } from "../stores/labels";
|
||||
import Icon from "./Icon.vue";
|
||||
import LabelsModal from "./LabelsModal.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const session = useSessionStore();
|
||||
const config = useConfigStore();
|
||||
const labels = useLabelsStore();
|
||||
|
||||
const managing = ref(false);
|
||||
|
||||
onMounted(() => {
|
||||
if (!labels.loaded) void labels.load();
|
||||
});
|
||||
|
||||
const currentLabelId = computed(() => (route.name === "label" ? String(route.params.id) : null));
|
||||
|
||||
async function signOut() {
|
||||
await session.logout();
|
||||
await router.replace("/login");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="flex min-h-full flex-col">
|
||||
<header
|
||||
class="sticky top-0 z-20 border-b border-neutral-200 bg-neutral-50/90 backdrop-blur dark:border-neutral-800 dark:bg-neutral-950/90"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-4 px-4 py-3">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-brand text-sm font-black text-neutral-900">
|
||||
TS
|
||||
</div>
|
||||
<span class="hidden font-semibold sm:inline">{{ config.siteName }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="hidden text-sm text-neutral-500 sm:inline dark:text-neutral-400">{{
|
||||
session.user?.display_name
|
||||
}}</span>
|
||||
<RouterLink
|
||||
v-if="session.user?.is_admin"
|
||||
to="/settings"
|
||||
class="icon-btn"
|
||||
title="Settings"
|
||||
aria-label="Settings"
|
||||
>
|
||||
<Icon name="settings" />
|
||||
</RouterLink>
|
||||
<button type="button" class="icon-btn" title="Sign out" aria-label="Sign out" @click="signOut">
|
||||
<Icon name="logout" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="flex flex-1">
|
||||
<aside class="hidden w-56 shrink-0 border-r border-neutral-200 p-3 sm:block dark:border-neutral-800">
|
||||
<nav class="flex flex-col gap-0.5 text-sm">
|
||||
<RouterLink to="/" class="nav-link" :class="route.name === 'board' ? 'nav-link-active' : ''">
|
||||
<Icon name="note" /> Notes
|
||||
</RouterLink>
|
||||
|
||||
<div class="mt-3 flex items-center justify-between px-3 pb-1">
|
||||
<span class="text-xs font-semibold uppercase tracking-wide text-neutral-400">Labels</span>
|
||||
<button
|
||||
type="button"
|
||||
class="text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-200"
|
||||
title="Edit labels"
|
||||
aria-label="Edit labels"
|
||||
@click="managing = true"
|
||||
>
|
||||
<Icon name="pencil" />
|
||||
</button>
|
||||
</div>
|
||||
<p v-if="!labels.items.length" class="px-3 py-1 text-xs text-neutral-400">No labels yet</p>
|
||||
<RouterLink
|
||||
v-for="lb in labels.items"
|
||||
:key="lb.id"
|
||||
:to="`/label/${lb.id}`"
|
||||
class="nav-link"
|
||||
:class="currentLabelId === lb.id ? 'nav-link-active' : ''"
|
||||
>
|
||||
<Icon name="tag" /> <span class="truncate">{{ lb.name }}</span>
|
||||
</RouterLink>
|
||||
|
||||
<RouterLink to="/archive" class="nav-link mt-3" :class="route.name === 'archive' ? 'nav-link-active' : ''">
|
||||
<Icon name="archive" /> Archive
|
||||
</RouterLink>
|
||||
<RouterLink to="/trash" class="nav-link" :class="route.name === 'trash' ? 'nav-link-active' : ''">
|
||||
<Icon name="trash" /> Trash
|
||||
</RouterLink>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main class="min-w-0 flex-1"><slot /></main>
|
||||
</div>
|
||||
|
||||
<LabelsModal v-if="managing" @close="managing = false" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -9,6 +9,11 @@ const paths: Record<string, string> = {
|
||||
restore: '<path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/>',
|
||||
logout: '<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" x2="9" y1="12" y2="12"/>',
|
||||
settings: '<path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/>',
|
||||
note: '<path d="M15.5 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h9l7-7V5a2 2 0 0 0-2-2Z"/><path d="M14 21v-5a2 2 0 0 1 2-2h5"/>',
|
||||
tag: '<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/>',
|
||||
pencil: '<path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z"/><path d="m15 5 4 4"/>',
|
||||
plus: '<path d="M5 12h14"/><path d="M12 5v14"/>',
|
||||
check: '<path d="M20 6 9 17l-5-5"/>',
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
<script setup lang="ts">
|
||||
import { computed, onBeforeUnmount, onMounted, ref } from "vue";
|
||||
import { useLabelsStore } from "../stores/labels";
|
||||
import Icon from "./Icon.vue";
|
||||
import type { NoteLabel } from "../stores/notes";
|
||||
|
||||
const props = defineProps<{ modelValue: NoteLabel[] }>();
|
||||
const emit = defineEmits<{ (e: "update:modelValue", value: NoteLabel[]): void }>();
|
||||
const labels = useLabelsStore();
|
||||
|
||||
const open = ref(false);
|
||||
const filter = ref("");
|
||||
const root = ref<HTMLElement | null>(null);
|
||||
|
||||
const selectedIds = computed(() => new Set(props.modelValue.map((lb) => lb.id)));
|
||||
const shown = computed(() =>
|
||||
labels.items.filter((lb) => lb.name.toLowerCase().includes(filter.value.trim().toLowerCase())),
|
||||
);
|
||||
const canCreate = computed(() => {
|
||||
const name = filter.value.trim();
|
||||
return name.length > 0 && !labels.items.some((lb) => lb.name.toLowerCase() === name.toLowerCase());
|
||||
});
|
||||
|
||||
function toggle(lb: NoteLabel) {
|
||||
const next = selectedIds.value.has(lb.id)
|
||||
? props.modelValue.filter((x) => x.id !== lb.id)
|
||||
: [...props.modelValue, lb];
|
||||
emit("update:modelValue", next);
|
||||
}
|
||||
|
||||
async function createAndAdd() {
|
||||
const created = await labels.create(filter.value.trim());
|
||||
filter.value = "";
|
||||
if (!selectedIds.value.has(created.id)) emit("update:modelValue", [...props.modelValue, created]);
|
||||
}
|
||||
|
||||
function onDocMousedown(e: MouseEvent) {
|
||||
if (open.value && root.value && !root.value.contains(e.target as Node)) open.value = false;
|
||||
}
|
||||
onMounted(() => document.addEventListener("mousedown", onDocMousedown));
|
||||
onBeforeUnmount(() => document.removeEventListener("mousedown", onDocMousedown));
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div ref="root" class="relative">
|
||||
<button type="button" class="icon-btn" title="Labels" aria-label="Labels" @click="open = !open">
|
||||
<Icon name="tag" />
|
||||
</button>
|
||||
<div
|
||||
v-if="open"
|
||||
class="absolute bottom-full right-0 z-10 mb-1 w-56 rounded-lg border border-neutral-200 bg-white p-2 shadow-lg dark:border-neutral-700 dark:bg-neutral-800"
|
||||
>
|
||||
<input
|
||||
v-model="filter"
|
||||
type="text"
|
||||
placeholder="Label note…"
|
||||
class="mb-1 w-full rounded-md border border-neutral-300 bg-white px-2 py-1 text-sm outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-600 dark:bg-neutral-900"
|
||||
/>
|
||||
<ul class="max-h-48 overflow-y-auto">
|
||||
<li v-for="lb in shown" :key="lb.id">
|
||||
<button
|
||||
type="button"
|
||||
class="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-neutral-100 dark:hover:bg-neutral-700"
|
||||
@click="toggle(lb)"
|
||||
>
|
||||
<span
|
||||
class="flex h-4 w-4 shrink-0 items-center justify-center rounded border"
|
||||
:class="
|
||||
selectedIds.has(lb.id)
|
||||
? 'border-brand bg-brand text-neutral-900'
|
||||
: 'border-neutral-400 dark:border-neutral-500'
|
||||
"
|
||||
>
|
||||
<svg
|
||||
v-if="selectedIds.has(lb.id)"
|
||||
class="h-3 w-3"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M20 6 9 17l-5-5" />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="truncate">{{ lb.name }}</span>
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<button
|
||||
v-if="canCreate"
|
||||
type="button"
|
||||
class="mt-1 flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-brand-700 hover:bg-neutral-100 dark:text-brand dark:hover:bg-neutral-700"
|
||||
@click="createAndAdd"
|
||||
>
|
||||
<Icon name="plus" /> Create "{{ filter.trim() }}"
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,73 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from "vue";
|
||||
import { useLabelsStore } from "../stores/labels";
|
||||
import Icon from "./Icon.vue";
|
||||
|
||||
const emit = defineEmits<{ (e: "close"): void }>();
|
||||
const labels = useLabelsStore();
|
||||
const newName = ref("");
|
||||
|
||||
async function add() {
|
||||
const name = newName.value.trim();
|
||||
if (!name) return;
|
||||
await labels.create(name);
|
||||
newName.value = "";
|
||||
}
|
||||
|
||||
async function rename(id: string, value: string) {
|
||||
const name = value.trim();
|
||||
if (name) await labels.rename(id, name);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/40 p-4 pt-[12vh]"
|
||||
@mousedown.self="emit('close')"
|
||||
>
|
||||
<div
|
||||
class="w-full max-w-sm rounded-xl border border-neutral-200 bg-white shadow-xl dark:border-neutral-700 dark:bg-neutral-900"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
@keydown.esc="emit('close')"
|
||||
>
|
||||
<div class="flex items-center justify-between border-b border-neutral-100 px-4 py-3 dark:border-neutral-800">
|
||||
<h2 class="text-sm font-semibold">Edit labels</h2>
|
||||
<button type="button" class="icon-btn" aria-label="Close" @click="emit('close')"><Icon name="close" /></button>
|
||||
</div>
|
||||
<div class="flex flex-col gap-2 p-4">
|
||||
<form class="flex items-center gap-2" @submit.prevent="add">
|
||||
<Icon name="plus" />
|
||||
<input
|
||||
v-model="newName"
|
||||
type="text"
|
||||
placeholder="Create label"
|
||||
class="flex-1 rounded-md border border-neutral-300 bg-white px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-brand dark:border-neutral-700 dark:bg-neutral-800"
|
||||
/>
|
||||
</form>
|
||||
<ul class="flex flex-col gap-1 pt-1">
|
||||
<li v-for="lb in labels.items" :key="lb.id" class="flex items-center gap-2">
|
||||
<Icon name="tag" />
|
||||
<input
|
||||
:value="lb.name"
|
||||
class="flex-1 rounded-md bg-transparent px-2 py-1.5 text-sm outline-none focus-visible:ring-2 focus-visible:ring-brand"
|
||||
@change="rename(lb.id, ($event.target as HTMLInputElement).value)"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
class="icon-btn"
|
||||
title="Delete label"
|
||||
aria-label="Delete label"
|
||||
@click="labels.remove(lb.id)"
|
||||
>
|
||||
<Icon name="trash" />
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<p v-if="!labels.items.length" class="py-2 text-center text-xs text-neutral-400">
|
||||
No labels yet — create one above.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -32,6 +32,15 @@ function cardClass(color: NoteColor): string {
|
||||
<p v-if="!note.title && !note.body" class="text-sm italic text-neutral-400">Empty note</p>
|
||||
</button>
|
||||
|
||||
<div v-if="note.labels.length" class="mt-2 flex flex-wrap gap-1">
|
||||
<span
|
||||
v-for="lb in note.labels"
|
||||
:key="lb.id"
|
||||
class="rounded-full bg-black/5 px-2 py-0.5 text-xs text-neutral-600 dark:bg-white/10 dark:text-neutral-300"
|
||||
>{{ lb.name }}</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mt-2 flex items-center justify-end gap-0.5 opacity-0 transition focus-within:opacity-100 group-hover:opacity-100"
|
||||
>
|
||||
|
||||
@@ -3,7 +3,8 @@ import { nextTick, onMounted, ref, watch } from "vue";
|
||||
import { useNotesStore } from "../stores/notes";
|
||||
import ColorPicker from "./ColorPicker.vue";
|
||||
import Icon from "./Icon.vue";
|
||||
import type { Note } from "../stores/notes";
|
||||
import LabelPicker from "./LabelPicker.vue";
|
||||
import type { Note, NoteLabel } from "../stores/notes";
|
||||
import type { NoteColor } from "../notes/colors";
|
||||
|
||||
const props = defineProps<{ note: Note }>();
|
||||
@@ -13,6 +14,7 @@ const notes = useNotesStore();
|
||||
const title = ref(props.note.title ?? "");
|
||||
const body = ref(props.note.body);
|
||||
const color = ref<NoteColor>(props.note.color);
|
||||
const labelList = ref<NoteLabel[]>([...props.note.labels]);
|
||||
const bodyInput = ref<HTMLTextAreaElement | null>(null);
|
||||
|
||||
watch(
|
||||
@@ -21,6 +23,7 @@ watch(
|
||||
title.value = n.title ?? "";
|
||||
body.value = n.body;
|
||||
color.value = n.color;
|
||||
labelList.value = [...n.labels];
|
||||
},
|
||||
);
|
||||
|
||||
@@ -29,6 +32,18 @@ onMounted(async () => {
|
||||
bodyInput.value?.focus();
|
||||
});
|
||||
|
||||
async function onLabelsChange(next: NoteLabel[]) {
|
||||
labelList.value = next;
|
||||
await notes.setLabels(
|
||||
props.note.id,
|
||||
next.map((lb) => lb.id),
|
||||
);
|
||||
}
|
||||
|
||||
async function removeLabel(id: string) {
|
||||
await onLabelsChange(labelList.value.filter((lb) => lb.id !== id));
|
||||
}
|
||||
|
||||
async function close() {
|
||||
const changed =
|
||||
(title.value.trim() || null) !== (props.note.title ?? null) ||
|
||||
@@ -71,10 +86,28 @@ async function act(fn: () => Promise<void>) {
|
||||
placeholder="Take a note…"
|
||||
class="w-full resize-none bg-transparent text-sm leading-relaxed outline-none placeholder:text-neutral-400"
|
||||
/>
|
||||
<div v-if="labelList.length" class="flex flex-wrap gap-1.5 pt-1">
|
||||
<span
|
||||
v-for="lb in labelList"
|
||||
:key="lb.id"
|
||||
class="inline-flex items-center gap-1 rounded-full bg-black/5 px-2 py-0.5 text-xs text-neutral-600 dark:bg-white/10 dark:text-neutral-300"
|
||||
>
|
||||
{{ lb.name }}
|
||||
<button
|
||||
type="button"
|
||||
class="text-neutral-400 hover:text-neutral-700 dark:hover:text-neutral-100"
|
||||
:aria-label="`Remove ${lb.name}`"
|
||||
@click="removeLabel(lb.id)"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between gap-2 border-t border-neutral-100 px-3 py-2 dark:border-neutral-800">
|
||||
<ColorPicker v-model="color" />
|
||||
<div class="flex items-center gap-0.5">
|
||||
<LabelPicker v-if="!note.trashed" :model-value="labelList" @update:model-value="onLabelsChange" />
|
||||
<template v-if="!note.trashed">
|
||||
<button
|
||||
type="button"
|
||||
|
||||
Reference in New Issue
Block a user