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,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>