bvandeusenandClaude Opus 4.8
0f604f9a26
- 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
96 lines
2.9 KiB
Vue
96 lines
2.9 KiB
Vue
<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>
|