M1: masonry board UI — quick-add, note cards, editor, views

- notes Pinia store (load/create/pin/archive/color/trash/restore/delete) with view-aware reconcile; api client patch/del methods. - colors.ts palette (10 keys → light/dark card + swatch tints). - QuickAdd (collapsed → expand, title/body/color, click-outside/Esc to save), NoteCard (color tint, click-to-edit, hover action bar), NoteEditor modal, ColorPicker, inline Icon set (no icon dep). - BoardView rewrite: Notes/Archive/Trash routes, CSS-columns masonry, Pinned + Others sections, per-view empty states, sign-out. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01FRgehjoz7Yv8LkUfADxACm
2026-07-19 16:08:53 -04:00
parent df59a30cca
commit 0f604f9a26
11 changed files with 649 additions and 38 deletions
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { NOTE_COLOR_KEYS, NOTE_COLOR_LABELS, NOTE_SWATCH_CLASSES, type NoteColor } from "../notes/colors";
+
+defineProps<{ modelValue: NoteColor }>();
+defineEmits<{ (e: "update:modelValue", value: NoteColor): void }>();
+</script>
+
+<template>
+  <div class="flex flex-wrap items-center gap-1.5">
+    <button
+      v-for="key in NOTE_COLOR_KEYS"
+      :key="key"
+      type="button"
+      :title="NOTE_COLOR_LABELS[key]"
+      :aria-label="NOTE_COLOR_LABELS[key]"
+      :aria-pressed="modelValue === 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 focus-visible:ring-offset-1
+             focus-visible:ring-offset-white dark:focus-visible:ring-offset-neutral-900"
+      :class="[NOTE_SWATCH_CLASSES[key], modelValue === key ? 'ring-2 ring-brand ring-offset-1' : '']"
+      @click="$emit('update:modelValue', key)"
+    />
+  </div>
+</template>
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+// Tiny inline icon set (lucide paths) so we don't pull an icon dependency in M1.
+defineProps<{ name: string }>();
+
+const paths: Record<string, string> = {
+  pin: '<path d="M12 17v5"/><path d="M9 10.76a2 2 0 0 1-1.11 1.79l-1.78.9A2 2 0 0 0 5 15.24V16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-.76a2 2 0 0 0-1.11-1.79l-1.78-.9A2 2 0 0 1 15 10.76V7a1 1 0 0 1 1-1 2 2 0 0 0 0-4H8a2 2 0 0 0 0 4 1 1 0 0 1 1 1Z"/>',
+  archive: '<rect width="20" height="5" x="2" y="3" rx="1"/><path d="M4 8v11a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8"/><path d="M10 12h4"/>',
+  trash: '<path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/>',
+  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"/>',
+};
+</script>
+
+<template>
+  <svg
+    class="h-[18px] w-[18px]"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+    v-html="paths[name] ?? ''"
+  />
+</template>
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useNotesStore } from "../stores/notes";
+import { NOTE_CARD_CLASSES, type NoteColor } from "../notes/colors";
+import type { Note } from "../stores/notes";
+import Icon from "./Icon.vue";
+
+defineProps<{ note: Note }>();
+const emit = defineEmits<{ (e: "open", note: Note): void }>();
+const notes = useNotesStore();
+
+function cardClass(color: NoteColor): string {
+  return NOTE_CARD_CLASSES[color] ?? NOTE_CARD_CLASSES.default;
+}
+</script>
+
+<template>
+  <div
+    class="group relative mb-4 break-inside-avoid rounded-xl border p-3 shadow-sm transition hover:shadow-md"
+    :class="cardClass(note.color)"
+  >
+    <button
+      type="button"
+      class="block w-full cursor-text text-left focus:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-2 focus-visible:ring-offset-transparent rounded"
+      @click="emit('open', note)"
+    >
+      <h3 v-if="note.title" class="mb-1 break-words text-sm font-semibold text-neutral-900 dark:text-neutral-100">
+        {{ note.title }}
+      </h3>
+      <p v-if="note.body" class="whitespace-pre-wrap break-words text-sm text-neutral-700 dark:text-neutral-300">
+        {{ note.body }}
+      </p>
+      <p v-if="!note.title && !note.body" class="text-sm italic text-neutral-400">Empty note</p>
+    </button>
+
+    <div
+      class="mt-2 flex items-center justify-end gap-0.5 opacity-0 transition focus-within:opacity-100 group-hover:opacity-100"
+    >
+      <template v-if="note.trashed">
+        <button type="button" class="icon-btn" title="Restore" aria-label="Restore" @click="notes.restore(note.id)">
+          <Icon name="restore" />
+        </button>
+        <button
+          type="button"
+          class="icon-btn"
+          title="Delete forever"
+          aria-label="Delete forever"
+          @click="notes.deleteForever(note.id)"
+        >
+          <Icon name="trash" />
+        </button>
+      </template>
+      <template v-else>
+        <button
+          type="button"
+          class="icon-btn"
+          :class="note.pinned ? 'text-brand-700 dark:text-brand' : ''"
+          :title="note.pinned ? 'Unpin' : 'Pin'"
+          :aria-label="note.pinned ? 'Unpin' : 'Pin'"
+          :aria-pressed="note.pinned"
+          @click="notes.setPinned(note.id, !note.pinned)"
+        >
+          <Icon name="pin" />
+        </button>
+        <button
+          type="button"
+          class="icon-btn"
+          :title="note.archived ? 'Unarchive' : 'Archive'"
+          :aria-label="note.archived ? 'Unarchive' : 'Archive'"
+          @click="notes.setArchived(note.id, !note.archived)"
+        >
+          <Icon name="archive" />
+        </button>
+        <button
+          type="button"
+          class="icon-btn"
+          title="Move to trash"
+          aria-label="Move to trash"
+          @click="notes.trash(note.id)"
+        >
+          <Icon name="trash" />
+        </button>
+      </template>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+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 type { NoteColor } from "../notes/colors";
+
+const props = defineProps<{ note: Note }>();
+const emit = defineEmits<{ (e: "close"): void }>();
+const notes = useNotesStore();
+
+const title = ref(props.note.title ?? "");
+const body = ref(props.note.body);
+const color = ref<NoteColor>(props.note.color);
+const bodyInput = ref<HTMLTextAreaElement | null>(null);
+
+watch(
+  () => props.note,
+  (n) => {
+    title.value = n.title ?? "";
+    body.value = n.body;
+    color.value = n.color;
+  },
+);
+
+onMounted(async () => {
+  await nextTick();
+  bodyInput.value?.focus();
+});
+
+async function close() {
+  const changed =
+    (title.value.trim() || null) !== (props.note.title ?? null) ||
+    body.value !== props.note.body ||
+    color.value !== props.note.color;
+  if (changed) {
+    await notes.saveEdit(props.note.id, { title: title.value, body: body.value, color: color.value });
+  }
+  emit("close");
+}
+
+async function act(fn: () => Promise<void>) {
+  await fn();
+  emit("close");
+}
+</script>
+
+<template>
+  <div
+    class="fixed inset-0 z-40 flex items-start justify-center overflow-y-auto bg-black/40 p-4 pt-[10vh]"
+    @mousedown.self="close"
+  >
+    <div
+      class="w-full max-w-lg 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="close"
+    >
+      <div class="flex flex-col gap-2 p-4">
+        <input
+          v-model="title"
+          type="text"
+          placeholder="Title"
+          class="w-full bg-transparent text-base font-semibold outline-none placeholder:text-neutral-400"
+        />
+        <textarea
+          ref="bodyInput"
+          v-model="body"
+          rows="8"
+          placeholder="Take a note…"
+          class="w-full resize-none bg-transparent text-sm leading-relaxed outline-none placeholder:text-neutral-400"
+        />
+      </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">
+          <template v-if="!note.trashed">
+            <button
+              type="button"
+              class="icon-btn"
+              :class="note.pinned ? 'text-brand-700 dark:text-brand' : ''"
+              :title="note.pinned ? 'Unpin' : 'Pin'"
+              @click="act(() => notes.setPinned(note.id, !note.pinned))"
+            >
+              <Icon name="pin" />
+            </button>
+            <button
+              type="button"
+              class="icon-btn"
+              :title="note.archived ? 'Unarchive' : 'Archive'"
+              @click="act(() => notes.setArchived(note.id, !note.archived))"
+            >
+              <Icon name="archive" />
+            </button>
+            <button type="button" class="icon-btn" title="Move to trash" @click="act(() => notes.trash(note.id))">
+              <Icon name="trash" />
+            </button>
+          </template>
+          <template v-else>
+            <button type="button" class="icon-btn" title="Restore" @click="act(() => notes.restore(note.id))">
+              <Icon name="restore" />
+            </button>
+            <button
+              type="button"
+              class="icon-btn"
+              title="Delete forever"
+              @click="act(() => notes.deleteForever(note.id))"
+            >
+              <Icon name="trash" />
+            </button>
+          </template>
+          <button
+            type="button"
+            class="rounded-md px-3 py-1.5 text-sm font-semibold text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:text-neutral-200 dark:hover:bg-neutral-800"
+            @click="close"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, nextTick, ref } from "vue";
+import { useNotesStore } from "../stores/notes";
+import ColorPicker from "./ColorPicker.vue";
+import type { NoteColor } from "../notes/colors";
+
+const notes = useNotesStore();
+
+const expanded = ref(false);
+const saving = ref(false);
+const title = ref("");
+const body = ref("");
+const color = ref<NoteColor>("default");
+const root = ref<HTMLElement | null>(null);
+const bodyInput = ref<HTMLTextAreaElement | null>(null);
+
+async function open() {
+  expanded.value = true;
+  await nextTick();
+  bodyInput.value?.focus();
+}
+
+function reset() {
+  expanded.value = false;
+  title.value = "";
+  body.value = "";
+  color.value = "default";
+}
+
+async function commit() {
+  const hasContent = title.value.trim() !== "" || body.value.trim() !== "";
+  if (hasContent) {
+    saving.value = true;
+    try {
+      await notes.create({ title: title.value, body: body.value, color: color.value });
+    } finally {
+      saving.value = false;
+    }
+  }
+  reset();
+}
+
+function onDocumentMousedown(e: MouseEvent) {
+  if (expanded.value && root.value && !root.value.contains(e.target as Node)) {
+    void commit();
+  }
+}
+
+onMounted(() => document.addEventListener("mousedown", onDocumentMousedown));
+onBeforeUnmount(() => document.removeEventListener("mousedown", onDocumentMousedown));
+</script>
+
+<template>
+  <div ref="root" class="mx-auto w-full max-w-xl">
+    <div class="rounded-xl border border-neutral-200 bg-white shadow-sm dark:border-neutral-700 dark:bg-neutral-900">
+      <button
+        v-if="!expanded"
+        type="button"
+        class="w-full rounded-xl px-4 py-3 text-left text-sm text-neutral-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand dark:text-neutral-400"
+        @click="open"
+      >
+        Take a note…
+      </button>
+
+      <div v-else class="flex flex-col gap-2 p-3">
+        <input
+          v-model="title"
+          type="text"
+          placeholder="Title"
+          class="w-full bg-transparent px-1 text-sm font-semibold outline-none placeholder:text-neutral-400"
+          @keydown.enter.prevent="bodyInput?.focus()"
+        />
+        <textarea
+          ref="bodyInput"
+          v-model="body"
+          rows="3"
+          placeholder="Take a note…"
+          class="w-full resize-none bg-transparent px-1 text-sm outline-none placeholder:text-neutral-400"
+          @keydown.esc="commit"
+        />
+        <div class="flex items-center justify-between gap-2 pt-1">
+          <ColorPicker v-model="color" />
+          <button
+            type="button"
+            class="rounded-md px-3 py-1.5 text-sm font-semibold text-neutral-700 hover:bg-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand disabled:opacity-60 dark:text-neutral-200 dark:hover:bg-neutral-800"
+            :disabled="saving"
+            @click="commit"
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>