From 41ad09b05f1864f796497547d0ae161def9aab46 Mon Sep 17 00:00:00 2001
From: Aaron Gabriel <ag@unforced.org>
Date: Sat, 18 Apr 2026 15:43:55 -0600
Subject: [PATCH] Add /new create flow and two-intent delete on note
 view/editor

- /new route: path, optional summary, tag chip editor, CodeMirror content editor; POSTs to /api/notes and navigates to /notes/<new-id>
- Delete button on NoteView + NoteEditor: modal gate requires typing the note path before the destructive button enables
- Minimal toast store + Toaster for success/error feedback after create/delete
- TagEditor extracted so /new and /edit share the same chip input
- VaultClient gains createNote + deleteNote; useCreateNote/useDeleteNote invalidate notes/tags/vaultInfo and remove the deleted note's cache entry
- Home and /notes empty-state "Create one" now links to /new

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/app/App.tsx                          |   4 +
 src/app/routes/NoteEditor.tsx            |  61 +------
 src/app/routes/NoteNew.test.tsx          | 196 ++++++++++++++++++++++
 src/app/routes/NoteNew.tsx               | 197 +++++++++++++++++++++++
 src/app/routes/NoteView.tsx              |  10 +-
 src/app/routes/Notes.tsx                 |  33 ++--
 src/components/DeleteNoteButton.test.tsx | 165 +++++++++++++++++++
 src/components/DeleteNoteButton.tsx      | 137 ++++++++++++++++
 src/components/TagEditor.tsx             |  54 +++++++
 src/components/Toaster.tsx               |  49 ++++++
 src/lib/toast/store.ts                   |  31 ++++
 src/lib/vault/client.test.ts             |  76 +++++++++
 src/lib/vault/client.ts                  |  21 +++
 src/lib/vault/queries.ts                 |  41 ++++-
 14 files changed, 1000 insertions(+), 75 deletions(-)
 create mode 100644 src/app/routes/NoteNew.test.tsx
 create mode 100644 src/app/routes/NoteNew.tsx
 create mode 100644 src/components/DeleteNoteButton.test.tsx
 create mode 100644 src/components/DeleteNoteButton.tsx
 create mode 100644 src/components/TagEditor.tsx
 create mode 100644 src/components/Toaster.tsx
 create mode 100644 src/lib/toast/store.ts

diff --git a/src/app/App.tsx b/src/app/App.tsx
index e0dae9c..60e2f89 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -1,9 +1,11 @@
 import { Header } from "@/components/Header";
+import { Toaster } from "@/components/Toaster";
 import { QueryProvider } from "@/providers/QueryProvider";
 import { BrowserRouter, Route, Routes } from "react-router";
 import { AddVault } from "./routes/AddVault";
 import { Home } from "./routes/Home";
 import { NoteEditor } from "./routes/NoteEditor";
+import { NoteNew } from "./routes/NoteNew";
 import { NoteView } from "./routes/NoteView";
 import { Notes } from "./routes/Notes";
 import { OAuthCallback } from "./routes/OAuthCallback";
@@ -14,11 +16,13 @@ export function App() {
     <QueryProvider>
       <BrowserRouter>
         <div className="min-h-dvh bg-bg text-fg">
+          <Toaster />
           <Header />
           <main>
             <Routes>
               <Route path="/" element={<Home />} />
               <Route path="/notes" element={<Notes />} />
+              <Route path="/new" element={<NoteNew />} />
               <Route path="/notes/:id" element={<NoteView />} />
               <Route path="/notes/:id/edit" element={<NoteEditor />} />
               <Route path="/add" element={<AddVault />} />
diff --git a/src/app/routes/NoteEditor.tsx b/src/app/routes/NoteEditor.tsx
index 863205f..f89ecc7 100644
--- a/src/app/routes/NoteEditor.tsx
+++ b/src/app/routes/NoteEditor.tsx
@@ -1,5 +1,7 @@
 import { CodeMirrorEditor } from "@/components/CodeMirrorEditor";
+import { DeleteNoteButton } from "@/components/DeleteNoteButton";
 import { MarkdownView, buildWikilinkResolver } from "@/components/MarkdownView";
+import { TagEditor, normalizeTag } from "@/components/TagEditor";
 import { relativeTime } from "@/lib/time";
 import { useNote, useUpdateNote, useVaultStore } from "@/lib/vault";
 import { type UpdateNotePayload, VaultAuthError, VaultConflictError } from "@/lib/vault/client";
@@ -136,7 +138,7 @@ function EditorSurface({ note }: { note: Note }) {
   const pathChanged = draft.path !== baseline.path;
 
   const addTag = (raw: string) => {
-    const t = raw.trim().replace(/^#/, "");
+    const t = normalizeTag(raw);
     if (!t) return;
     if (draft.tags.includes(t)) return;
     setDraft((d) => ({ ...d, tags: [...d.tags, t] }));
@@ -169,6 +171,8 @@ function EditorSurface({ note }: { note: Note }) {
             )}
           </div>
           <div className="flex items-center gap-2">
+            <DeleteNoteButton note={note} />
+            <span className="mx-1 h-5 w-px bg-border" aria-hidden="true" />
             <button
               type="button"
               onClick={handleRevert}
@@ -253,61 +257,6 @@ function EditorSurface({ note }: { note: Note }) {
   );
 }
 
-function TagEditor({
-  tags,
-  input,
-  onInputChange,
-  onAdd,
-  onRemove,
-}: {
-  tags: string[];
-  input: string;
-  onInputChange(v: string): void;
-  onAdd(raw: string): void;
-  onRemove(name: string): void;
-}) {
-  return (
-    <div className="flex flex-wrap items-center gap-1.5 text-sm">
-      <span className="shrink-0 text-xs uppercase tracking-wider text-fg-dim">Tags</span>
-      {tags.map((t) => (
-        <span
-          key={t}
-          className="inline-flex items-center gap-1 rounded-full border border-border bg-bg/60 px-2 py-0.5 text-xs text-fg-muted"
-        >
-          {t}
-          <button
-            type="button"
-            onClick={() => onRemove(t)}
-            aria-label={`Remove tag ${t}`}
-            className="text-fg-dim hover:text-red-400"
-          >
-            ×
-          </button>
-        </span>
-      ))}
-      <input
-        type="text"
-        value={input}
-        onChange={(e) => onInputChange(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === ",") {
-            e.preventDefault();
-            onAdd(input);
-          } else if (e.key === "Backspace" && input === "" && tags.length > 0) {
-            onRemove(tags[tags.length - 1]!);
-          }
-        }}
-        onBlur={() => {
-          if (input.trim()) onAdd(input);
-        }}
-        placeholder="add tag…"
-        className="min-w-24 flex-1 rounded-md border border-transparent bg-transparent px-1 py-0.5 text-xs text-fg focus:border-border focus:outline-none"
-        aria-label="Add tag"
-      />
-    </div>
-  );
-}
-
 function ConflictBanner({
   conflict,
   onReload,
diff --git a/src/app/routes/NoteNew.test.tsx b/src/app/routes/NoteNew.test.tsx
new file mode 100644
index 0000000..5eee759
--- /dev/null
+++ b/src/app/routes/NoteNew.test.tsx
@@ -0,0 +1,196 @@
+import { NoteNew } from "@/app/routes/NoteNew";
+import { useToastStore } from "@/lib/toast/store";
+import { useVaultStore } from "@/lib/vault/store";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+vi.mock("@/components/CodeMirrorEditor", () => ({
+  CodeMirrorEditor: ({
+    value,
+    onChange,
+  }: { value: string; onChange(next: string): void; onSave?(): void; onCancel?(): void }) => (
+    <textarea data-testid="cm-editor" value={value} onChange={(e) => onChange(e.target.value)} />
+  ),
+}));
+
+interface FetchEntry {
+  status?: number;
+  body: unknown;
+  text?: string;
+}
+type FetchMap = Record<string, FetchEntry | FetchEntry[]>;
+
+function installFetch(map: FetchMap) {
+  const cursors = new Map<string, number>();
+  const fetchImpl = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = typeof input === "string" ? input : input.toString();
+    const method = (init?.method ?? "GET").toUpperCase();
+    for (const matcher of Object.keys(map)) {
+      const [wantMethod, wantFragment] = matcher.includes(" ")
+        ? matcher.split(" ", 2)
+        : ["GET", matcher];
+      if (method !== wantMethod) continue;
+      if (!url.includes(wantFragment!)) continue;
+      const entry = map[matcher]!;
+      const list = Array.isArray(entry) ? entry : [entry];
+      const idx = Math.min(cursors.get(matcher) ?? 0, list.length - 1);
+      cursors.set(matcher, idx + 1);
+      const hit = list[idx]!;
+      return {
+        ok: (hit.status ?? 200) < 400,
+        status: hit.status ?? 200,
+        json: async () => hit.body,
+        text: async () => hit.text ?? "",
+      } as Response;
+    }
+    return { ok: false, status: 404, json: async () => null, text: async () => "" } as Response;
+  });
+  vi.stubGlobal("fetch", fetchImpl);
+  return fetchImpl;
+}
+
+function seedStore() {
+  useVaultStore.setState({
+    vaults: {
+      dev: {
+        id: "dev",
+        url: "http://localhost:1940",
+        name: "dev",
+        issuer: "http://localhost:1940",
+        clientId: "client-test",
+        scope: "full",
+        addedAt: "2026-04-18T00:00:00.000Z",
+        lastUsedAt: "2026-04-18T00:00:00.000Z",
+      },
+    },
+    activeVaultId: "dev",
+  });
+  localStorage.setItem(
+    "lens:token:dev",
+    JSON.stringify({ accessToken: "pvt_abc", scope: "full", vault: "default" }),
+  );
+}
+
+function Wrapper({ children }: { children: ReactNode }) {
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 } } });
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}
+
+function renderAt(path: string) {
+  return render(
+    <MemoryRouter initialEntries={[path]}>
+      <Routes>
+        <Route path="/new" element={<NoteNew />} />
+        <Route path="/notes/:id" element={<div>NoteViewPage</div>} />
+        <Route path="/notes" element={<div>NotesListPage</div>} />
+      </Routes>
+    </MemoryRouter>,
+    { wrapper: Wrapper },
+  );
+}
+
+describe("NoteNew route", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useVaultStore.setState({ vaults: {}, activeVaultId: null });
+    useToastStore.setState({ toasts: [] });
+    seedStore();
+    vi.spyOn(window, "confirm").mockImplementation(() => true);
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it("Create is disabled until both path and content are present", async () => {
+    installFetch({});
+    renderAt("/new");
+
+    const create = screen.getByRole("button", { name: /^create$/i });
+    expect(create).toBeDisabled();
+
+    const pathInput = screen.getByLabelText(/note path/i);
+    fireEvent.change(pathInput, { target: { value: "Projects/README" } });
+    expect(create).toBeDisabled(); // still need content
+
+    const cm = screen.getByTestId("cm-editor");
+    fireEvent.change(cm, { target: { value: "# hello" } });
+    expect(create).not.toBeDisabled();
+  });
+
+  it("happy path: POSTs payload and navigates to /notes/<new-id>", async () => {
+    const fetchImpl = installFetch({
+      "POST /api/notes": {
+        status: 201,
+        body: {
+          id: "new-note-id",
+          path: "Projects/README",
+          createdAt: "2026-04-18T12:00:00Z",
+          content: "# hi",
+          tags: ["docs"],
+        },
+      },
+    });
+
+    renderAt("/new");
+
+    fireEvent.change(screen.getByLabelText(/note path/i), {
+      target: { value: "Projects/README" },
+    });
+    fireEvent.change(screen.getByLabelText(/note summary/i), {
+      target: { value: "A readme" },
+    });
+    const tagInput = screen.getByLabelText(/add tag/i);
+    fireEvent.change(tagInput, { target: { value: "docs" } });
+    fireEvent.keyDown(tagInput, { key: "Enter" });
+    fireEvent.change(screen.getByTestId("cm-editor"), { target: { value: "# hi" } });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: /^create$/i }));
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("NoteViewPage")).toBeInTheDocument();
+    });
+
+    const postCall = fetchImpl.mock.calls.find(
+      ([, init]) => (init as RequestInit | undefined)?.method === "POST",
+    );
+    expect(postCall).toBeDefined();
+    const body = JSON.parse((postCall![1] as RequestInit).body as string);
+    expect(body).toEqual({
+      content: "# hi",
+      path: "Projects/README",
+      tags: ["docs"],
+      metadata: { summary: "A readme" },
+    });
+
+    expect(useToastStore.getState().toasts[0]?.message).toContain("Created");
+  });
+
+  it("duplicate path: error is visible and content/path are preserved", async () => {
+    installFetch({
+      "POST /api/notes": {
+        status: 500,
+        body: null,
+        text: '{"error":"Internal server error"}',
+      },
+    });
+
+    renderAt("/new");
+
+    fireEvent.change(screen.getByLabelText(/note path/i), { target: { value: "dup" } });
+    fireEvent.change(screen.getByTestId("cm-editor"), { target: { value: "keep me" } });
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: /^create$/i }));
+    });
+
+    expect(await screen.findByRole("alert")).toHaveTextContent(/500|path is taken/i);
+    expect((screen.getByLabelText(/note path/i) as HTMLInputElement).value).toBe("dup");
+    expect((screen.getByTestId("cm-editor") as HTMLTextAreaElement).value).toBe("keep me");
+  });
+});
diff --git a/src/app/routes/NoteNew.tsx b/src/app/routes/NoteNew.tsx
new file mode 100644
index 0000000..b2053a6
--- /dev/null
+++ b/src/app/routes/NoteNew.tsx
@@ -0,0 +1,197 @@
+import { CodeMirrorEditor } from "@/components/CodeMirrorEditor";
+import { MarkdownView, buildWikilinkResolver } from "@/components/MarkdownView";
+import { TagEditor, normalizeTag } from "@/components/TagEditor";
+import { useToastStore } from "@/lib/toast/store";
+import { useCreateNote, useVaultStore } from "@/lib/vault";
+import { type CreateNotePayload, VaultAuthError } from "@/lib/vault/client";
+import type { Note } from "@/lib/vault/types";
+import { useCallback, useEffect, useState } from "react";
+import { Link, Navigate, useNavigate } from "react-router";
+
+interface DraftState {
+  content: string;
+  path: string;
+  tags: string[];
+  summary: string;
+}
+
+const EMPTY_DRAFT: DraftState = { content: "", path: "", tags: [], summary: "" };
+
+export function NoteNew() {
+  const activeVault = useVaultStore((s) => s.getActiveVault());
+  const navigate = useNavigate();
+  const pushToast = useToastStore((s) => s.push);
+  const mutation = useCreateNote();
+  const [draft, setDraft] = useState<DraftState>(EMPTY_DRAFT);
+  const [tagInput, setTagInput] = useState("");
+  const [saveError, setSaveError] = useState<string | null>(null);
+
+  if (!activeVault) return <Navigate to="/" replace />;
+
+  const isDirty =
+    draft.content.length > 0 ||
+    draft.path.length > 0 ||
+    draft.tags.length > 0 ||
+    draft.summary.length > 0;
+
+  const isValid = draft.content.trim().length > 0 && draft.path.trim().length > 0;
+
+  const handleCreate = useCallback(() => {
+    if (!isValid || mutation.isPending) return;
+    const payload: CreateNotePayload = {
+      content: draft.content,
+      path: draft.path.trim(),
+    };
+    if (draft.tags.length) payload.tags = draft.tags;
+    const summary = draft.summary.trim();
+    if (summary) payload.metadata = { summary };
+
+    setSaveError(null);
+    mutation.mutate(payload, {
+      onSuccess: (created: Note) => {
+        pushToast(`Created ${created.path ?? created.id}`, "success");
+        navigate(`/notes/${encodeURIComponent(created.id)}`);
+      },
+      onError: (err) => {
+        if (err instanceof VaultAuthError) {
+          setSaveError("Session expired. Reconnect to save.");
+        } else {
+          // Vault returns 500 with "Internal server error" on duplicate paths;
+          // surface whatever message we got so the user can adjust the path.
+          setSaveError(
+            err instanceof Error
+              ? `${err.message} — if the path is taken, try a different one.`
+              : "Create failed",
+          );
+        }
+      },
+    });
+  }, [draft, isValid, mutation, navigate, pushToast]);
+
+  const handleCancel = useCallback(() => {
+    if (isDirty && !confirm("Discard this draft?")) return;
+    navigate("/notes");
+  }, [isDirty, navigate]);
+
+  useEffect(() => {
+    if (!isDirty) return;
+    const onBeforeUnload = (e: BeforeUnloadEvent) => {
+      e.preventDefault();
+      e.returnValue = "";
+    };
+    window.addEventListener("beforeunload", onBeforeUnload);
+    return () => window.removeEventListener("beforeunload", onBeforeUnload);
+  }, [isDirty]);
+
+  const addTag = (raw: string) => {
+    const t = normalizeTag(raw);
+    if (!t || draft.tags.includes(t)) return;
+    setDraft((d) => ({ ...d, tags: [...d.tags, t] }));
+    setTagInput("");
+  };
+  const removeTag = (name: string) => {
+    setDraft((d) => ({ ...d, tags: d.tags.filter((x) => x !== name) }));
+  };
+
+  const resolver = buildWikilinkResolver({
+    id: "__new__",
+    createdAt: new Date().toISOString(),
+  } as Note);
+
+  return (
+    <div className="mx-auto max-w-6xl px-6 py-8">
+      <nav className="mb-4 text-sm text-fg-dim">
+        <Link to="/notes" className="hover:text-accent">
+          ← All notes
+        </Link>
+      </nav>
+
+      <article>
+        <header className="mb-4 border-b border-border pb-4">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-2 text-sm">
+              <span className="text-xs uppercase tracking-wider text-fg-dim">New note</span>
+            </div>
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={handleCancel}
+                className="rounded-md border border-border bg-card px-3 py-1.5 text-sm text-fg-muted hover:text-accent"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                onClick={handleCreate}
+                disabled={!isValid || mutation.isPending}
+                className="rounded-md bg-accent px-4 py-1.5 text-sm font-medium text-white hover:bg-accent-hover disabled:opacity-40"
+                title="Create (⌘S)"
+              >
+                {mutation.isPending ? "Creating…" : "Create"}
+              </button>
+            </div>
+          </div>
+
+          <div className="mt-3 flex flex-col gap-2">
+            <label className="flex items-baseline gap-3 text-sm">
+              <span className="shrink-0 text-xs uppercase tracking-wider text-fg-dim">Path</span>
+              <input
+                type="text"
+                value={draft.path}
+                onChange={(e) => setDraft((d) => ({ ...d, path: e.target.value }))}
+                className="flex-1 rounded-md border border-border bg-card px-2.5 py-1 font-mono text-sm text-fg focus:border-accent focus:outline-none"
+                aria-label="Note path"
+                placeholder="e.g. Projects/README"
+              />
+            </label>
+            <label className="flex items-baseline gap-3 text-sm">
+              <span className="shrink-0 text-xs uppercase tracking-wider text-fg-dim">Summary</span>
+              <input
+                type="text"
+                value={draft.summary}
+                onChange={(e) => setDraft((d) => ({ ...d, summary: e.target.value }))}
+                className="flex-1 rounded-md border border-border bg-card px-2.5 py-1 text-sm text-fg focus:border-accent focus:outline-none"
+                aria-label="Note summary"
+                placeholder="(optional one-line description)"
+              />
+            </label>
+            <TagEditor
+              tags={draft.tags}
+              input={tagInput}
+              onInputChange={setTagInput}
+              onAdd={addTag}
+              onRemove={removeTag}
+            />
+          </div>
+        </header>
+
+        {saveError ? (
+          <div
+            role="alert"
+            className="mb-4 rounded-md border border-red-500/30 bg-red-500/5 p-3 text-sm text-red-400"
+          >
+            {saveError}
+          </div>
+        ) : null}
+
+        <div className="grid min-h-[60vh] gap-4 lg:grid-cols-2">
+          <div className="min-w-0 rounded-md border border-border bg-card">
+            <CodeMirrorEditor
+              value={draft.content}
+              onChange={(content) => setDraft((d) => ({ ...d, content }))}
+              onSave={handleCreate}
+              onCancel={handleCancel}
+            />
+          </div>
+          <div className="min-w-0 overflow-auto rounded-md border border-border bg-card p-4">
+            {draft.content.trim() ? (
+              <MarkdownView content={draft.content} resolve={resolver} />
+            ) : (
+              <p className="text-sm text-fg-dim">Preview appears here as you type.</p>
+            )}
+          </div>
+        </div>
+      </article>
+    </div>
+  );
+}
diff --git a/src/app/routes/NoteView.tsx b/src/app/routes/NoteView.tsx
index eb82148..a246441 100644
--- a/src/app/routes/NoteView.tsx
+++ b/src/app/routes/NoteView.tsx
@@ -1,3 +1,4 @@
+import { DeleteNoteButton } from "@/components/DeleteNoteButton";
 import { MarkdownView, buildWikilinkResolver } from "@/components/MarkdownView";
 import { relativeTime } from "@/lib/time";
 import { useActiveVaultClient, useNote, useVaultStore } from "@/lib/vault";
@@ -75,14 +76,7 @@ function NoteBody({ note }: { note: Note }) {
             >
               Edit
             </Link>
-            <button
-              type="button"
-              disabled
-              className="rounded-md border border-border bg-card px-3 py-1.5 text-sm text-fg-dim opacity-50"
-              title="Delete lands in PR #6"
-            >
-              Delete
-            </button>
+            <DeleteNoteButton note={note} />
           </div>
         </header>
 
diff --git a/src/app/routes/Notes.tsx b/src/app/routes/Notes.tsx
index cba2396..6fd7372 100644
--- a/src/app/routes/Notes.tsx
+++ b/src/app/routes/Notes.tsx
@@ -65,14 +65,22 @@ export function Notes() {
           <p className="text-xs uppercase tracking-wider text-fg-dim">{activeVault.name}</p>
           <h1 className="font-serif text-3xl tracking-tight">Notes</h1>
         </div>
-        <button
-          type="button"
-          onClick={() => setSort((s) => (s === "desc" ? "asc" : "desc"))}
-          className="text-sm text-fg-muted hover:text-accent"
-          aria-label="Toggle sort direction"
-        >
-          Sort: {sort === "desc" ? "newest" : "oldest"} first
-        </button>
+        <div className="flex items-center gap-4">
+          <button
+            type="button"
+            onClick={() => setSort((s) => (s === "desc" ? "asc" : "desc"))}
+            className="text-sm text-fg-muted hover:text-accent"
+            aria-label="Toggle sort direction"
+          >
+            Sort: {sort === "desc" ? "newest" : "oldest"} first
+          </button>
+          <Link
+            to="/new"
+            className="rounded-md bg-accent px-3 py-1.5 text-sm font-medium text-white hover:bg-accent-hover"
+          >
+            New note
+          </Link>
+        </div>
       </header>
 
       <div className="mb-6 space-y-3">
@@ -303,8 +311,13 @@ function EmptyBlock({ filtering }: { filtering: boolean }) {
         <p className="text-fg-muted">No notes match these filters.</p>
       ) : (
         <>
-          <p className="mb-1 text-fg-muted">This vault has no notes yet.</p>
-          <p className="text-sm text-fg-dim">Creating notes lands in a later PR.</p>
+          <p className="mb-3 text-fg-muted">This vault has no notes yet.</p>
+          <Link
+            to="/new"
+            className="inline-block rounded-md bg-accent px-4 py-2 text-sm font-medium text-white hover:bg-accent-hover"
+          >
+            Create one
+          </Link>
         </>
       )}
     </div>
diff --git a/src/components/DeleteNoteButton.test.tsx b/src/components/DeleteNoteButton.test.tsx
new file mode 100644
index 0000000..fc911c5
--- /dev/null
+++ b/src/components/DeleteNoteButton.test.tsx
@@ -0,0 +1,165 @@
+import { DeleteNoteButton } from "@/components/DeleteNoteButton";
+import { useToastStore } from "@/lib/toast/store";
+import { useVaultStore } from "@/lib/vault/store";
+import type { Note } from "@/lib/vault/types";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { act, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import type { ReactNode } from "react";
+import { MemoryRouter, Route, Routes } from "react-router";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+interface FetchEntry {
+  status?: number;
+  body: unknown;
+}
+type FetchMap = Record<string, FetchEntry>;
+
+function installFetch(map: FetchMap) {
+  const fetchImpl = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+    const url = typeof input === "string" ? input : input.toString();
+    const method = (init?.method ?? "GET").toUpperCase();
+    for (const matcher of Object.keys(map)) {
+      const [wantMethod, wantFragment] = matcher.includes(" ")
+        ? matcher.split(" ", 2)
+        : ["GET", matcher];
+      if (method !== wantMethod) continue;
+      if (!url.includes(wantFragment!)) continue;
+      const entry = map[matcher]!;
+      return {
+        ok: (entry.status ?? 200) < 400,
+        status: entry.status ?? 200,
+        json: async () => entry.body,
+        text: async () => "",
+      } as Response;
+    }
+    return { ok: false, status: 404, json: async () => null, text: async () => "" } as Response;
+  });
+  vi.stubGlobal("fetch", fetchImpl);
+  return fetchImpl;
+}
+
+function seedStore() {
+  useVaultStore.setState({
+    vaults: {
+      dev: {
+        id: "dev",
+        url: "http://localhost:1940",
+        name: "dev",
+        issuer: "http://localhost:1940",
+        clientId: "client-test",
+        scope: "full",
+        addedAt: "2026-04-18T00:00:00.000Z",
+        lastUsedAt: "2026-04-18T00:00:00.000Z",
+      },
+    },
+    activeVaultId: "dev",
+  });
+  localStorage.setItem(
+    "lens:token:dev",
+    JSON.stringify({ accessToken: "pvt_abc", scope: "full", vault: "default" }),
+  );
+}
+
+function Wrapper({ children }: { children: ReactNode }) {
+  const client = new QueryClient({ defaultOptions: { queries: { retry: false, gcTime: 0 } } });
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
+}
+
+const note: Note = {
+  id: "note-abc",
+  path: "Canon/Aaron",
+  createdAt: "2026-04-16T00:00:00Z",
+  updatedAt: "2026-04-17T00:00:00Z",
+  tags: [],
+};
+
+function renderButton() {
+  return render(
+    <MemoryRouter initialEntries={["/notes/note-abc"]}>
+      <Routes>
+        <Route path="/notes/note-abc" element={<DeleteNoteButton note={note} />} />
+        <Route path="/notes" element={<div>NotesListPage</div>} />
+      </Routes>
+    </MemoryRouter>,
+    { wrapper: Wrapper },
+  );
+}
+
+describe("DeleteNoteButton", () => {
+  beforeEach(() => {
+    localStorage.clear();
+    useVaultStore.setState({ vaults: {}, activeVaultId: null });
+    useToastStore.setState({ toasts: [] });
+    seedStore();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    vi.restoreAllMocks();
+  });
+
+  it("single click opens the confirmation dialog but does not delete", async () => {
+    const fetchImpl = installFetch({});
+    renderButton();
+
+    fireEvent.click(screen.getByRole("button", { name: /^delete$/i }));
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    expect(
+      fetchImpl.mock.calls.some(
+        ([, init]) => (init as RequestInit | undefined)?.method === "DELETE",
+      ),
+    ).toBe(false);
+  });
+
+  it("confirm button stays disabled until path is typed exactly; Enter without match is no-op", async () => {
+    const fetchImpl = installFetch({
+      "DELETE /api/notes/": { body: { deleted: true, id: "note-abc" } },
+    });
+    renderButton();
+
+    fireEvent.click(screen.getByRole("button", { name: /^delete$/i }));
+    const confirm = screen.getByRole("button", { name: /delete permanently/i });
+    expect(confirm).toBeDisabled();
+
+    const input = screen.getByLabelText(/type note path to confirm/i);
+
+    // Enter with partial text doesn't trigger delete.
+    fireEvent.change(input, { target: { value: "Canon/" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+    expect(confirm).toBeDisabled();
+    expect(
+      fetchImpl.mock.calls.some(
+        ([, init]) => (init as RequestInit | undefined)?.method === "DELETE",
+      ),
+    ).toBe(false);
+
+    fireEvent.change(input, { target: { value: "Canon/Aaron" } });
+    expect(confirm).not.toBeDisabled();
+  });
+
+  it("happy path: fires DELETE, navigates to /notes, pushes a success toast", async () => {
+    const fetchImpl = installFetch({
+      "DELETE /api/notes/": { body: { deleted: true, id: "note-abc" } },
+    });
+    renderButton();
+
+    fireEvent.click(screen.getByRole("button", { name: /^delete$/i }));
+    fireEvent.change(screen.getByLabelText(/type note path to confirm/i), {
+      target: { value: "Canon/Aaron" },
+    });
+
+    await act(async () => {
+      fireEvent.click(screen.getByRole("button", { name: /delete permanently/i }));
+    });
+
+    await waitFor(() => {
+      expect(screen.getByText("NotesListPage")).toBeInTheDocument();
+    });
+
+    const deleteCall = fetchImpl.mock.calls.find(
+      ([, init]) => (init as RequestInit | undefined)?.method === "DELETE",
+    );
+    expect(deleteCall?.[0]).toContain("/api/notes/note-abc");
+    expect(useToastStore.getState().toasts[0]?.message).toContain("Deleted Canon/Aaron");
+  });
+});
diff --git a/src/components/DeleteNoteButton.tsx b/src/components/DeleteNoteButton.tsx
new file mode 100644
index 0000000..4b8d5f7
--- /dev/null
+++ b/src/components/DeleteNoteButton.tsx
@@ -0,0 +1,137 @@
+import { useToastStore } from "@/lib/toast/store";
+import { useDeleteNote } from "@/lib/vault";
+import { VaultAuthError } from "@/lib/vault/client";
+import type { Note } from "@/lib/vault/types";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useNavigate } from "react-router";
+
+interface Props {
+  note: Note;
+  className?: string;
+  label?: string;
+}
+
+export function DeleteNoteButton({ note, className, label = "Delete" }: Props) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className={
+          className ??
+          "rounded-md border border-red-500/40 bg-transparent px-3 py-1.5 text-sm text-red-400 hover:bg-red-500/10"
+        }
+        title="Delete this note"
+      >
+        {label}
+      </button>
+      {open ? <ConfirmDeleteDialog note={note} onClose={() => setOpen(false)} /> : null}
+    </>
+  );
+}
+
+function ConfirmDeleteDialog({ note, onClose }: { note: Note; onClose(): void }) {
+  const navigate = useNavigate();
+  const pushToast = useToastStore((s) => s.push);
+  const mutation = useDeleteNote();
+  const confirmLabel = note.path ?? note.id;
+  const [typed, setTyped] = useState("");
+  const [err, setErr] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const canConfirm = typed === confirmLabel && !mutation.isPending;
+
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  const handleConfirm = useCallback(() => {
+    if (!canConfirm) return;
+    setErr(null);
+    mutation.mutate(note.id, {
+      onSuccess: () => {
+        pushToast(`Deleted ${confirmLabel}`, "success");
+        navigate("/notes");
+      },
+      onError: (e) => {
+        if (e instanceof VaultAuthError) {
+          setErr("Session expired. Reconnect to delete.");
+        } else {
+          setErr(e instanceof Error ? e.message : "Delete failed");
+        }
+      },
+    });
+  }, [canConfirm, confirmLabel, mutation, navigate, note.id, pushToast]);
+
+  return (
+    <dialog
+      open
+      aria-labelledby="confirm-delete-title"
+      className="fixed inset-0 z-40 m-0 flex h-full max-h-full w-full max-w-full items-center justify-center bg-black/60 p-4"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) onClose();
+      }}
+    >
+      <div className="w-full max-w-md rounded-md border border-border bg-card p-6 shadow-xl">
+        <h2 id="confirm-delete-title" className="mb-2 font-serif text-xl text-red-400">
+          Delete this note?
+        </h2>
+        <p className="mb-3 text-sm text-fg-muted">
+          This permanently removes the note, its tags, and its links. This cannot be undone.
+        </p>
+        <p className="mb-3 text-sm text-fg-muted">
+          Type{" "}
+          <span className="rounded bg-bg/60 px-1 py-0.5 font-mono text-xs text-fg">
+            {confirmLabel}
+          </span>{" "}
+          to confirm:
+        </p>
+        <input
+          ref={inputRef}
+          type="text"
+          value={typed}
+          onChange={(e) => setTyped(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && canConfirm) handleConfirm();
+          }}
+          aria-label="Type note path to confirm"
+          className="mb-3 w-full rounded-md border border-border bg-bg/40 px-2.5 py-1.5 font-mono text-sm text-fg focus:border-red-400 focus:outline-none"
+          placeholder={confirmLabel}
+          autoComplete="off"
+          spellCheck={false}
+        />
+        {err ? (
+          <p role="alert" className="mb-3 text-sm text-red-400">
+            {err}
+          </p>
+        ) : null}
+        <div className="flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={onClose}
+            className="rounded-md border border-border bg-card px-3 py-1.5 text-sm text-fg-muted hover:text-fg"
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleConfirm}
+            disabled={!canConfirm}
+            className="rounded-md bg-red-500 px-4 py-1.5 text-sm font-medium text-white hover:bg-red-600 disabled:opacity-40"
+          >
+            {mutation.isPending ? "Deleting…" : "Delete permanently"}
+          </button>
+        </div>
+      </div>
+    </dialog>
+  );
+}
diff --git a/src/components/TagEditor.tsx b/src/components/TagEditor.tsx
new file mode 100644
index 0000000..b51e722
--- /dev/null
+++ b/src/components/TagEditor.tsx
@@ -0,0 +1,54 @@
+interface Props {
+  tags: string[];
+  input: string;
+  onInputChange(v: string): void;
+  onAdd(raw: string): void;
+  onRemove(name: string): void;
+}
+
+export function TagEditor({ tags, input, onInputChange, onAdd, onRemove }: Props) {
+  return (
+    <div className="flex flex-wrap items-center gap-1.5 text-sm">
+      <span className="shrink-0 text-xs uppercase tracking-wider text-fg-dim">Tags</span>
+      {tags.map((t) => (
+        <span
+          key={t}
+          className="inline-flex items-center gap-1 rounded-full border border-border bg-bg/60 px-2 py-0.5 text-xs text-fg-muted"
+        >
+          {t}
+          <button
+            type="button"
+            onClick={() => onRemove(t)}
+            aria-label={`Remove tag ${t}`}
+            className="text-fg-dim hover:text-red-400"
+          >
+            ×
+          </button>
+        </span>
+      ))}
+      <input
+        type="text"
+        value={input}
+        onChange={(e) => onInputChange(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === ",") {
+            e.preventDefault();
+            onAdd(input);
+          } else if (e.key === "Backspace" && input === "" && tags.length > 0) {
+            onRemove(tags[tags.length - 1]!);
+          }
+        }}
+        onBlur={() => {
+          if (input.trim()) onAdd(input);
+        }}
+        placeholder="add tag…"
+        className="min-w-24 flex-1 rounded-md border border-transparent bg-transparent px-1 py-0.5 text-xs text-fg focus:border-border focus:outline-none"
+        aria-label="Add tag"
+      />
+    </div>
+  );
+}
+
+export function normalizeTag(raw: string): string {
+  return raw.trim().replace(/^#/, "");
+}
diff --git a/src/components/Toaster.tsx b/src/components/Toaster.tsx
new file mode 100644
index 0000000..3145e80
--- /dev/null
+++ b/src/components/Toaster.tsx
@@ -0,0 +1,49 @@
+import { useToastStore } from "@/lib/toast/store";
+import { useEffect } from "react";
+
+const AUTO_DISMISS_MS = 4000;
+
+export function Toaster() {
+  const toasts = useToastStore((s) => s.toasts);
+  const dismiss = useToastStore((s) => s.dismiss);
+
+  useEffect(() => {
+    if (toasts.length === 0) return;
+    const timers = toasts.map((t) => window.setTimeout(() => dismiss(t.id), AUTO_DISMISS_MS));
+    return () => {
+      for (const t of timers) window.clearTimeout(t);
+    };
+  }, [toasts, dismiss]);
+
+  if (toasts.length === 0) return null;
+
+  return (
+    <output
+      aria-live="polite"
+      className="pointer-events-none fixed bottom-6 left-1/2 z-50 flex -translate-x-1/2 flex-col items-center gap-2"
+    >
+      {toasts.map((t) => (
+        <div
+          key={t.id}
+          className={`pointer-events-auto flex max-w-md items-center gap-3 rounded-md border px-4 py-2 text-sm shadow-lg backdrop-blur ${
+            t.tone === "error"
+              ? "border-red-500/40 bg-red-500/10 text-red-400"
+              : t.tone === "success"
+                ? "border-accent/40 bg-accent/10 text-accent"
+                : "border-border bg-card text-fg-muted"
+          }`}
+        >
+          <span>{t.message}</span>
+          <button
+            type="button"
+            onClick={() => dismiss(t.id)}
+            aria-label="Dismiss"
+            className="text-fg-dim hover:text-fg"
+          >
+            ×
+          </button>
+        </div>
+      ))}
+    </output>
+  );
+}
diff --git a/src/lib/toast/store.ts b/src/lib/toast/store.ts
new file mode 100644
index 0000000..b0c805c
--- /dev/null
+++ b/src/lib/toast/store.ts
@@ -0,0 +1,31 @@
+import { create } from "zustand";
+
+export interface Toast {
+  id: number;
+  message: string;
+  tone: "success" | "error" | "info";
+}
+
+interface ToastState {
+  toasts: Toast[];
+  push(message: string, tone?: Toast["tone"]): number;
+  dismiss(id: number): void;
+  clear(): void;
+}
+
+let nextId = 1;
+
+export const useToastStore = create<ToastState>((set) => ({
+  toasts: [],
+  push(message, tone = "info") {
+    const id = nextId++;
+    set((s) => ({ toasts: [...s.toasts, { id, message, tone }] }));
+    return id;
+  },
+  dismiss(id) {
+    set((s) => ({ toasts: s.toasts.filter((t) => t.id !== id) }));
+  },
+  clear() {
+    set({ toasts: [] });
+  },
+}));
diff --git a/src/lib/vault/client.test.ts b/src/lib/vault/client.test.ts
index f871f8e..d874f75 100644
--- a/src/lib/vault/client.test.ts
+++ b/src/lib/vault/client.test.ts
@@ -215,6 +215,82 @@ describe("VaultClient", () => {
     await expect(client.updateNote("a", { content: "x" })).rejects.toBeInstanceOf(VaultAuthError);
   });
 
+  it("createNote POSTs JSON to /api/notes and returns the created note", async () => {
+    const fetchImpl = mockFetch({
+      status: 201,
+      json: {
+        id: "new-id",
+        path: "Projects/README",
+        createdAt: "2026-04-18T12:00:00Z",
+        content: "# hello",
+        tags: ["docs"],
+      },
+    });
+    const client = new VaultClient({
+      vaultUrl: "http://localhost:1940",
+      accessToken: "pvt_abc",
+      fetchImpl,
+    });
+
+    const note = await client.createNote({
+      content: "# hello",
+      path: "Projects/README",
+      tags: ["docs"],
+      metadata: { summary: "A readme" },
+    });
+
+    expect(note.id).toBe("new-id");
+    const call = fetchImpl.mock.calls[0];
+    expect(call?.[0]).toBe("http://localhost:1940/api/notes");
+    const init = call?.[1] as RequestInit;
+    expect(init.method).toBe("POST");
+    expect(new Headers(init.headers).get("Content-Type")).toBe("application/json");
+    const body = JSON.parse(init.body as string);
+    expect(body).toEqual({
+      content: "# hello",
+      path: "Projects/README",
+      tags: ["docs"],
+      metadata: { summary: "A readme" },
+    });
+  });
+
+  it("createNote surfaces a generic failure so callers can hint at duplicate paths", async () => {
+    const fetchImpl = mockFetch({
+      ok: false,
+      status: 500,
+      text: '{"error":"Internal server error"}',
+    });
+    const client = new VaultClient({
+      vaultUrl: "http://localhost:1940",
+      accessToken: "pvt_abc",
+      fetchImpl,
+    });
+    await expect(client.createNote({ content: "hi", path: "dup" })).rejects.toThrow(/500/);
+  });
+
+  it("deleteNote sends DELETE to /api/notes/:id and resolves void", async () => {
+    const fetchImpl = mockFetch({ json: { deleted: true, id: "abc" } });
+    const client = new VaultClient({
+      vaultUrl: "http://localhost:1940",
+      accessToken: "pvt_abc",
+      fetchImpl,
+    });
+    await expect(client.deleteNote("abc-123")).resolves.toBeUndefined();
+    const call = fetchImpl.mock.calls[0];
+    expect(call?.[0]).toBe("http://localhost:1940/api/notes/abc-123");
+    expect((call?.[1] as RequestInit).method).toBe("DELETE");
+  });
+
+  it("deleteNote propagates 401 as VaultAuthError", async () => {
+    const fetchImpl = mockFetch({ ok: false, status: 401 });
+    const client = new VaultClient({
+      vaultUrl: "http://localhost:1940",
+      accessToken: "pvt_abc",
+      fetchImpl,
+    });
+    await expect(client.deleteNote("abc")).rejects.toBeInstanceOf(VaultAuthError);
+  });
+
   it("listTags hits /api/tags and returns the summary array", async () => {
     const fetchImpl = mockFetch({
       json: [
diff --git a/src/lib/vault/client.ts b/src/lib/vault/client.ts
index 8947b01..b8f3169 100644
--- a/src/lib/vault/client.ts
+++ b/src/lib/vault/client.ts
@@ -36,6 +36,13 @@ export interface UpdateNotePayload {
   if_updated_at?: string;
 }
 
+export interface CreateNotePayload {
+  content: string;
+  path?: string;
+  tags?: string[];
+  metadata?: Record<string, unknown>;
+}
+
 export class VaultClient {
   private readonly baseUrl: string;
   private readonly token: string;
@@ -106,6 +113,20 @@ export class VaultClient {
     });
   }
 
+  async createNote(payload: CreateNotePayload): Promise<Note> {
+    return this.request<Note>("/api/notes", {
+      method: "POST",
+      body: JSON.stringify(payload),
+    });
+  }
+
+  async deleteNote(id: string): Promise<void> {
+    await this.request<{ deleted: boolean; id: string } | undefined>(
+      `/api/notes/${encodeURIComponent(id)}`,
+      { method: "DELETE" },
+    );
+  }
+
   async listTags(): Promise<TagSummary[]> {
     return this.request<TagSummary[]>("/api/tags");
   }
diff --git a/src/lib/vault/queries.ts b/src/lib/vault/queries.ts
index 93c4020..a69a640 100644
--- a/src/lib/vault/queries.ts
+++ b/src/lib/vault/queries.ts
@@ -1,6 +1,6 @@
 import { keepPreviousData, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useMemo } from "react";
-import { type UpdateNotePayload, VaultClient } from "./client";
+import { type CreateNotePayload, type UpdateNotePayload, VaultClient } from "./client";
 import { type NoteQueryState, buildNoteQueryParams } from "./note-query";
 import { loadToken } from "./storage";
 import { useVaultStore } from "./store";
@@ -86,3 +86,42 @@ export function useUpdateNote(id: string | undefined) {
     },
   });
 }
+
+export function useCreateNote() {
+  const client = useActiveVaultClient();
+  const activeId = useVaultStore((s) => s.activeVaultId);
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (payload: CreateNotePayload) => {
+      if (!client) throw new Error("No active vault");
+      return client.createNote(payload);
+    },
+    onSuccess: (created) => {
+      qc.setQueryData(["note", activeId, created.id], created);
+      qc.invalidateQueries({ queryKey: ["notes", activeId] });
+      qc.invalidateQueries({ queryKey: ["tags", activeId] });
+      qc.invalidateQueries({ queryKey: ["vaultInfo", activeId] });
+    },
+  });
+}
+
+export function useDeleteNote() {
+  const client = useActiveVaultClient();
+  const activeId = useVaultStore((s) => s.activeVaultId);
+  const qc = useQueryClient();
+
+  return useMutation({
+    mutationFn: async (id: string) => {
+      if (!client) throw new Error("No active vault");
+      await client.deleteNote(id);
+      return id;
+    },
+    onSuccess: (id) => {
+      qc.removeQueries({ queryKey: ["note", activeId, id] });
+      qc.invalidateQueries({ queryKey: ["notes", activeId] });
+      qc.invalidateQueries({ queryKey: ["tags", activeId] });
+      qc.invalidateQueries({ queryKey: ["vaultInfo", activeId] });
+    },
+  });
+}