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:
@@ -5,6 +5,11 @@ import type { NoteColor } from "../notes/colors";
|
||||
|
||||
export type NoteView = "active" | "archived" | "trash";
|
||||
|
||||
export interface NoteLabel {
|
||||
id: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
export interface Note {
|
||||
id: string;
|
||||
title: string | null;
|
||||
@@ -13,34 +18,36 @@ export interface Note {
|
||||
pinned: boolean;
|
||||
archived: boolean;
|
||||
trashed: boolean;
|
||||
labels: NoteLabel[];
|
||||
created_at: string | null;
|
||||
updated_at: string | null;
|
||||
}
|
||||
|
||||
function belongsToView(n: Note, v: NoteView): boolean {
|
||||
if (v === "trash") return n.trashed;
|
||||
if (v === "archived") return !n.trashed && n.archived;
|
||||
return !n.trashed && !n.archived;
|
||||
}
|
||||
|
||||
export const useNotesStore = defineStore("notes", () => {
|
||||
const items = ref<Note[]>([]);
|
||||
const loading = ref(false);
|
||||
const view = ref<NoteView>("active");
|
||||
const activeLabel = ref<string | null>(null);
|
||||
|
||||
function sortItems(): void {
|
||||
// Pinned first, then most-recently-updated.
|
||||
items.value.sort((a, b) => {
|
||||
if (a.pinned !== b.pinned) return a.pinned ? -1 : 1;
|
||||
return (b.updated_at ?? "").localeCompare(a.updated_at ?? "");
|
||||
});
|
||||
}
|
||||
|
||||
// Put the server's version of a note where it belongs for the current view, or
|
||||
// remove it if it no longer belongs (e.g. archived while viewing the board).
|
||||
function belongsHere(n: Note): boolean {
|
||||
const v = view.value;
|
||||
const inView =
|
||||
v === "trash" ? n.trashed : v === "archived" ? !n.trashed && n.archived : !n.trashed && !n.archived;
|
||||
if (!inView) return false;
|
||||
if (activeLabel.value) return n.labels.some((lb) => lb.id === activeLabel.value);
|
||||
return true;
|
||||
}
|
||||
|
||||
function reconcile(note: Note): void {
|
||||
const idx = items.value.findIndex((n) => n.id === note.id);
|
||||
if (belongsToView(note, view.value)) {
|
||||
if (belongsHere(note)) {
|
||||
if (idx >= 0) items.value[idx] = note;
|
||||
else items.value.push(note);
|
||||
sortItems();
|
||||
@@ -49,11 +56,13 @@ export const useNotesStore = defineStore("notes", () => {
|
||||
}
|
||||
}
|
||||
|
||||
async function load(v: NoteView): Promise<void> {
|
||||
async function load(v: NoteView, labelId: string | null = null): Promise<void> {
|
||||
view.value = v;
|
||||
activeLabel.value = labelId;
|
||||
loading.value = true;
|
||||
try {
|
||||
const res = await api.get<{ notes: Note[] }>(`/api/notes?filter=${v}`);
|
||||
const query = labelId ? `/api/notes?filter=${v}&label=${labelId}` : `/api/notes?filter=${v}`;
|
||||
const res = await api.get<{ notes: Note[] }>(query);
|
||||
items.value = res.notes;
|
||||
sortItems();
|
||||
} finally {
|
||||
@@ -77,6 +86,10 @@ export const useNotesStore = defineStore("notes", () => {
|
||||
const setColor = (id: string, color: NoteColor) => mutate(id, { color });
|
||||
const saveEdit = (id: string, changes: { title: string; body: string; color: NoteColor }) => mutate(id, changes);
|
||||
|
||||
async function setLabels(id: string, labelIds: string[]): Promise<void> {
|
||||
reconcile(await api.put<Note>(`/api/notes/${id}/labels`, { label_ids: labelIds }));
|
||||
}
|
||||
|
||||
async function trash(id: string): Promise<void> {
|
||||
reconcile(await api.post<Note>(`/api/notes/${id}/trash`));
|
||||
}
|
||||
@@ -95,12 +108,14 @@ export const useNotesStore = defineStore("notes", () => {
|
||||
items,
|
||||
loading,
|
||||
view,
|
||||
activeLabel,
|
||||
load,
|
||||
create,
|
||||
setPinned,
|
||||
setArchived,
|
||||
setColor,
|
||||
saveEdit,
|
||||
setLabels,
|
||||
trash,
|
||||
restore,
|
||||
deleteForever,
|
||||
|
||||
Reference in New Issue
Block a user