feat: notes management and updated UI

web/src/App.tsx

···
 import Library from "$pages/Library";
 import Login from "$pages/Login";
 import NoteNew from "$pages/NoteNew";
+import Notes from "$pages/Notes";
+import NoteView from "$pages/NoteView";
 import NotFound from "$pages/NotFound";
 import Review from "$pages/Review";
 import Search from "$pages/Search";
···
         <Route path="/decks" component={Home} />
         <Route path="/decks/new" component={DeckNew} />
         <Route path="/notes/new" component={NoteNew} />
+        <Route path="/notes/:id" component={NoteView} />
+        <Route path="/notes" component={Notes} />
         <Route path="/decks/:id" component={DeckView} />
         <Route path="/import" component={Import} />
         <Route path="/import/lecture" component={LectureImport} />

web/src/components/NoteCard.tsx

···
+import { useDensity } from "$lib/density-context";
+import type { DensityMode } from "$lib/design-tokens";
+import type { Note } from "$lib/model";
+import { Card } from "$ui/Card";
+import { Tag } from "$ui/Tag";
+import { A } from "@solidjs/router";
+import type { Component } from "solid-js";
+import { For, Show } from "solid-js";
+
+type NoteCardProps = { note: Note; density?: DensityMode };
+
+export const NoteCard: Component<NoteCardProps> = (props) => {
+  const globalDensity = useDensity();
+  const density = () => props.density || globalDensity;
+
+  const truncateBody = (body: string, maxLength: number) => {
+    const plainText = body.replace(/[#*`[\]]/g, "").trim();
+    return plainText.length > maxLength ? plainText.slice(0, maxLength) + "..." : plainText;
+  };
+
+  const paddingClass = () => {
+    const d = density();
+    return d === "compact" ? "p-4" : d === "spacious" ? "p-8" : "p-6";
+  };
+
+  return (
+    <A href={`/notes/${props.note.id}`} class="block h-full no-underline group">
+      <Card class="h-full flex flex-col hover:border-blue-400 dark:hover:border-blue-500 transition-colors">
+        <div class={`${paddingClass()} flex-1 space-y-3`}>
+          <div class="space-y-1">
+            <h3 class="text-lg font-semibold text-slate-900 dark:text-white line-clamp-1 group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors">
+              {props.note.title || "Untitled"}
+            </h3>
+            <p class="text-xs text-slate-500 dark:text-slate-400">
+              {new Date(props.note.updated_at).toLocaleDateString()}
+            </p>
+          </div>
+
+          <p class="text-sm text-slate-600 dark:text-slate-300 line-clamp-3">{truncateBody(props.note.body, 120)}</p>
+
+          <Show when={props.note.tags.length > 0}>
+            <div class="flex flex-wrap gap-1.5 pt-2">
+              <For each={props.note.tags.slice(0, 3)}>
+                {(tag) => <Tag label={tag} color="blue" density={density()} />}
+              </For>
+              <Show when={props.note.tags.length > 3}>
+                <span class="text-xs text-slate-400">+{props.note.tags.length - 3}</span>
+              </Show>
+            </div>
+          </Show>
+        </div>
+      </Card>
+    </A>
+  );
+};

web/src/components/tests/NoteCard.test.tsx

···
+import type { Note } from "$lib/model";
+import { MemoryRouter, Route } from "@solidjs/router";
+import { cleanup, render, screen } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { NoteCard } from "../NoteCard";
+
+vi.mock("$lib/density-context", () => ({ useDensity: vi.fn(() => "comfortable") }));
+
+const mockNote: Note = {
+  id: "note-1",
+  owner_did: "did:plc:test123",
+  title: "Test Note",
+  body: "This is the body of the test note with some **markdown** content.",
+  tags: ["rust", "learning"],
+  visibility: { type: "Private" },
+  created_at: "2026-01-01T10:00:00Z",
+  updated_at: "2026-01-01T12:00:00Z",
+};
+
+describe("NoteCard", () => {
+  afterEach(cleanup);
+
+  it("renders note title", () => {
+    render(() => (
+      <MemoryRouter>
+        <Route path="/" component={() => <NoteCard note={mockNote} />} />
+      </MemoryRouter>
+    ));
+    expect(screen.getByText("Test Note")).toBeInTheDocument();
+  });
+
+  it("renders truncated body preview", () => {
+    render(() => (
+      <MemoryRouter>
+        <Route path="/" component={() => <NoteCard note={mockNote} />} />
+      </MemoryRouter>
+    ));
+    expect(screen.getByText(/This is the body/)).toBeInTheDocument();
+  });
+
+  it("renders tags", () => {
+    render(() => (
+      <MemoryRouter>
+        <Route path="/" component={() => <NoteCard note={mockNote} />} />
+      </MemoryRouter>
+    ));
+    expect(screen.getByText("rust")).toBeInTheDocument();
+    expect(screen.getByText("learning")).toBeInTheDocument();
+  });
+
+  it("links to note view page", () => {
+    render(() => (
+      <MemoryRouter>
+        <Route path="/" component={() => <NoteCard note={mockNote} />} />
+      </MemoryRouter>
+    ));
+    const link = screen.getByRole("link");
+    expect(link).toHaveAttribute("href", "/notes/note-1");
+  });
+
+  it("shows +N for excess tags", () => {
+    const noteWithManyTags: Note = { ...mockNote, tags: ["tag1", "tag2", "tag3", "tag4", "tag5"] };
+    render(() => (
+      <MemoryRouter>
+        <Route path="/" component={() => <NoteCard note={noteWithManyTags} />} />
+      </MemoryRouter>
+    ));
+    expect(screen.getByText("+2")).toBeInTheDocument();
+  });
+});

web/src/lib/api.ts

···
   getUserProfile: (did: string) => apiFetch(`/users/${did}/profile`, { method: "GET" }),
   getRemoteDeck: (uri: string) => apiFetch(`/remote/deck?uri=${encodeURIComponent(uri)}`, { method: "GET" }),
   exportData: (collection: "decks" | "notes") => apiFetch(`/export/${collection}`, { method: "GET" }),
+  getNotes: () => apiFetch("/notes", { method: "GET" }),
+  getNote: (id: string) => apiFetch(`/notes/${id}`, { method: "GET" }),
+  deleteNote: (id: string) => apiFetch(`/notes/${id}`, { method: "DELETE" }),
+  updateNote: (id: string, payload: object) => {
+    return apiFetch(`/notes/${id}`, { method: "PUT", body: JSON.stringify(payload) });
+  },
   createDeck: async (payload: CreateDeckPayload) => {
     const { cards, ...deckPayload } = payload;
     const res = await apiFetch("/decks", { method: "POST", body: JSON.stringify(deckPayload) });
···
       ));
     }
 
-    return {
-      ok: true,
-      json: async () => deck,
-    };
+    return { ok: true, json: async () => deck };
   },
   addComment: (deckId: string, content: string, parentId?: string) => {
     return apiFetch(`/decks/${deckId}/comments`, {

web/src/lib/density-context.tsx

···
 /**
  * Density Context Provider
  *
- * Provides density mode to all child components. Reads from user preferences
- * and applies the appropriate density class to the container.
+ * Provides density mode to all child components.
+ * Reads from user preferences and applies the appropriate density class to the container.
  *
- * Components can override density locally via props, but will default to
- * this global setting.
+ * Components can override density locally via props.
  */
 const DensityContext = createContext<DensityMode>("comfortable");
 

web/src/lib/model.ts

···
   fork_of?: string;
 };
 
+export type Note = {
+  id: string;
+  owner_did: string;
+  title: string;
+  body: string;
+  tags: string[];
+  visibility: Visibility;
+  published_at?: string;
+  created_at: string;
+  updated_at: string;
+};
+
 export type CreateDeckPayload = {
   title: string;
   description: string;

web/src/pages/NoteView.tsx

···
+/* eslint-disable solid/no-innerhtml */
+import { Button } from "$components/ui/Button";
+import { api } from "$lib/api";
+import type { Note } from "$lib/model";
+import { Tag } from "$ui/Tag";
+import { A, useParams } from "@solidjs/router";
+import rehypeExternalLinks from "rehype-external-links";
+import rehypeSanitize from "rehype-sanitize";
+import rehypeStringify from "rehype-stringify";
+import remarkParse from "remark-parse";
+import remarkRehype from "remark-rehype";
+import type { Component } from "solid-js";
+import { createEffect, createResource, createSignal, For, Show } from "solid-js";
+import { unified } from "unified";
+
+const NoteView: Component = () => {
+  const params = useParams<{ id: string }>();
+  const [note] = createResource(() => params.id, async (id: string): Promise<Note | null> => {
+    const res = await api.getNote(id);
+    if (!res.ok) return null;
+    return res.json();
+  });
+  const [renderedContent, setRenderedContent] = createSignal("");
+
+  const processor = unified().use(remarkParse).use(remarkRehype).use(rehypeSanitize).use(rehypeExternalLinks, {
+    target: "_blank",
+    rel: ["nofollow"],
+  }).use(rehypeStringify);
+
+  const updateRenderedContent = async (n: Note) => {
+    const file = await processor.process(n.body);
+    setRenderedContent(String(file));
+  };
+
+  createEffect(() => {
+    const n = note();
+    if (n?.body) {
+      updateRenderedContent(n).catch(console.error);
+    }
+  });
+
+  return (
+    <div class="max-w-5xl mx-auto p-6">
+      <Show
+        when={!note.loading}
+        fallback={
+          <div class="flex justify-center p-12">
+            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+          </div>
+        }>
+        <Show
+          when={note()}
+          fallback={
+            <div class="text-center py-12">
+              <h2 class="text-xl font-semibold text-slate-900 dark:text-white">Note not found</h2>
+              <p class="text-slate-600 dark:text-slate-400 mt-2">
+                This note may have been deleted or you don't have access to it.
+              </p>
+              <A href="/notes" class="text-blue-600 hover:text-blue-500 mt-4 inline-block">← Back to Notes</A>
+            </div>
+          }>
+          {(n) => (
+            <div class="space-y-6">
+              <nav class="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400">
+                <A href="/notes" class="hover:text-blue-600 dark:hover:text-blue-400">Notes</A>
+                <span>›</span>
+                <span class="text-slate-900 dark:text-white">{n().title || "Untitled"}</span>
+              </nav>
+
+              <header class="flex flex-col sm:flex-row sm:items-start sm:justify-between gap-4">
+                <div class="space-y-2">
+                  <h1 class="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">
+                    {n().title || "Untitled"}
+                  </h1>
+                  <div class="flex items-center gap-3 text-sm text-slate-500 dark:text-slate-400">
+                    <span>Updated {new Date(n().updated_at).toLocaleDateString()}</span>
+                    <Show when={n().visibility.type !== "Private"}>
+                      <span class="inline-flex items-center rounded-full bg-green-50 dark:bg-green-900/30 px-2 py-0.5 text-xs font-medium text-green-700 dark:text-green-300">
+                        {n().visibility.type}
+                      </span>
+                    </Show>
+                  </div>
+                </div>
+                <div class="flex gap-2">
+                  <A href={`/notes/edit/${n().id}`}>
+                    <Button variant="secondary">Edit</Button>
+                  </A>
+                </div>
+              </header>
+
+              <Show when={n().tags.length > 0}>
+                <div class="flex flex-wrap gap-2">
+                  <For each={n().tags}>{(tag) => <Tag label={tag} color="blue" />}</For>
+                </div>
+              </Show>
+
+              <article class="prose prose-slate dark:prose-invert max-w-none bg-white dark:bg-slate-800/50 rounded-xl p-8 border border-slate-200 dark:border-slate-700">
+                <div innerHTML={renderedContent()} />
+              </article>
+            </div>
+          )}
+        </Show>
+      </Show>
+    </div>
+  );
+};
+
+export default NoteView;

web/src/pages/Notes.tsx

···
+import { NoteCard } from "$components/NoteCard";
+import { Button } from "$components/ui/Button";
+import { EmptyState } from "$components/ui/EmptyState";
+import { api } from "$lib/api";
+import type { Note } from "$lib/model";
+import { A } from "@solidjs/router";
+import type { Component } from "solid-js";
+import { createMemo, createResource, createSignal, For, Show } from "solid-js";
+
+const fetchNotes = async (): Promise<Note[]> => {
+  const res = await api.getNotes();
+  if (!res.ok) return [];
+  return res.json();
+};
+
+type ViewMode = "grid" | "list";
+
+const Notes: Component = () => {
+  const [notes] = createResource(fetchNotes);
+  const [viewMode, setViewMode] = createSignal<ViewMode>("grid");
+  const [searchQuery, setSearchQuery] = createSignal("");
+
+  const filteredNotes = createMemo(() => {
+    const allNotes = notes() || [];
+    const query = searchQuery().toLowerCase().trim();
+    if (!query) return allNotes;
+    return allNotes.filter((note) =>
+      note.title.toLowerCase().includes(query)
+      || note.body.toLowerCase().includes(query)
+      || note.tags.some((tag) => tag.toLowerCase().includes(query))
+    );
+  });
+
+  return (
+    <div class="max-w-7xl mx-auto p-6 space-y-6">
+      <header class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 class="text-3xl font-bold tracking-tight text-slate-900 dark:text-white">Notes</h1>
+          <p class="text-slate-600 dark:text-slate-400 mt-1">Your personal knowledge base</p>
+        </div>
+        <A href="/notes/new">
+          <Button variant="primary">New Note</Button>
+        </A>
+      </header>
+
+      <div class="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
+        <div class="relative flex-1 max-w-md">
+          <input
+            type="text"
+            placeholder="Search notes..."
+            value={searchQuery()}
+            onInput={(e) => setSearchQuery(e.currentTarget.value)}
+            class="w-full bg-slate-100 dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-lg px-4 py-2 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
+          <svg
+            class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24">
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+          </svg>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <button
+            onClick={() => setViewMode("grid")}
+            class={`p-2 rounded ${
+              viewMode() === "grid" ? "bg-slate-200 dark:bg-slate-700" : "hover:bg-slate-100 dark:hover:bg-slate-800"
+            }`}
+            aria-label="Grid view">
+            <svg
+              class="w-5 h-5 text-slate-600 dark:text-slate-300"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24">
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
+            </svg>
+          </button>
+          <button
+            onClick={() => setViewMode("list")}
+            class={`p-2 rounded ${
+              viewMode() === "list" ? "bg-slate-200 dark:bg-slate-700" : "hover:bg-slate-100 dark:hover:bg-slate-800"
+            }`}
+            aria-label="List view">
+            <svg
+              class="w-5 h-5 text-slate-600 dark:text-slate-300"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <Show
+        when={!notes.loading}
+        fallback={
+          <div class="flex justify-center p-12">
+            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600" />
+          </div>
+        }>
+        <Show
+          when={filteredNotes().length > 0}
+          fallback={
+            <Show
+              when={searchQuery()}
+              fallback={
+                <EmptyState
+                  title="No notes yet"
+                  description="Start capturing your thoughts and ideas"
+                  action={
+                    <A href="/notes/new">
+                      <Button variant="primary">Create your first note</Button>
+                    </A>
+                  } />
+              }>
+              <EmptyState
+                title="No matching notes"
+                description={`No notes found for "${searchQuery()}"`}
+                action={
+                  <button
+                    onClick={() => setSearchQuery("")}
+                    class="text-sm font-medium text-blue-600 hover:text-blue-500 dark:text-blue-400">
+                    Clear search
+                  </button>
+                } />
+            </Show>
+          }>
+          <div
+            class={viewMode() === "grid"
+              ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
+              : "flex flex-col gap-4"}>
+            <For each={filteredNotes()}>{(note) => <NoteCard note={note} />}</For>
+          </div>
+        </Show>
+      </Show>
+    </div>
+  );
+};
+
+export default Notes;

web/src/pages/tests/NoteView.test.tsx

···
+import { api } from "$lib/api";
+import type { Note } from "$lib/model";
+import { cleanup, render, screen, waitFor } from "@solidjs/testing-library";
+import { JSX } from "solid-js";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import NoteView from "../NoteView";
+
+vi.mock("$lib/api", () => ({ api: { getNote: vi.fn() } }));
+
+vi.mock(
+  "@solidjs/router",
+  () => ({
+    useParams: () => ({ id: "note-1" }),
+    A: (props: { href: string; children: JSX.Element }) => <a href={props.href}>{props.children}</a>,
+  }),
+);
+
+const mockNote: Note = {
+  id: "note-1",
+  owner_did: "did:plc:test123",
+  title: "Test Note Title",
+  body: "# Heading\n\nSome **markdown** content.",
+  tags: ["rust", "learning"],
+  visibility: { type: "Public" },
+  created_at: "2026-01-01T10:00:00Z",
+  updated_at: "2026-01-01T12:00:00Z",
+};
+
+describe("NoteView", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("renders note title in heading", async () => {
+    vi.mocked(api.getNote).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockNote) } as unknown as Response,
+    );
+
+    render(() => <NoteView />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("heading", { level: 1, name: "Test Note Title" })).toBeInTheDocument();
+    });
+  });
+
+  it("renders tags", async () => {
+    vi.mocked(api.getNote).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockNote) } as unknown as Response,
+    );
+
+    render(() => <NoteView />);
+
+    await waitFor(() => {
+      expect(screen.getByText("rust")).toBeInTheDocument();
+      expect(screen.getByText("learning")).toBeInTheDocument();
+    });
+  });
+
+  it("has back to notes link", async () => {
+    vi.mocked(api.getNote).mockResolvedValue(
+      { ok: true, json: () => Promise.resolve(mockNote) } as unknown as Response,
+    );
+
+    render(() => <NoteView />);
+
+    await waitFor(() => {
+      expect(screen.getByRole("link", { name: "Notes" })).toBeInTheDocument();
+    });
+  });
+
+  it("renders not found state when note returns error", async () => {
+    vi.mocked(api.getNote).mockResolvedValue({ ok: false } as unknown as Response);
+
+    render(() => <NoteView />);
+
+    await waitFor(() => {
+      expect(screen.getByText("Note not found")).toBeInTheDocument();
+    });
+  });
+});

web/src/pages/tests/Notes.test.tsx

···
+import { api } from "$lib/api";
+import type { Note } from "$lib/model";
+import { MemoryRouter, Route } from "@solidjs/router";
+import { cleanup, render, screen, waitFor } from "@solidjs/testing-library";
+import { afterEach, describe, expect, it, type Mock, vi } from "vitest";
+import Notes from "../Notes";
+
+vi.mock("$lib/api", () => ({ api: { getNotes: vi.fn() } }));
+
+vi.mock("$lib/density-context", () => ({ useDensity: vi.fn(() => "comfortable") }));
+
+const mockNotes: Note[] = [{
+  id: "note-1",
+  owner_did: "did:plc:test123",
+  title: "First Note",
+  body: "Content of first note",
+  tags: ["rust"],
+  visibility: { type: "Private" },
+  created_at: "2026-01-01T10:00:00Z",
+  updated_at: "2026-01-01T12:00:00Z",
+}, {
+  id: "note-2",
+  owner_did: "did:plc:test123",
+  title: "Second Note",
+  body: "Content of second note",
+  tags: ["learning"],
+  visibility: { type: "Public" },
+  created_at: "2026-01-01T11:00:00Z",
+  updated_at: "2026-01-01T13:00:00Z",
+}];
+
+describe("Notes page", () => {
+  afterEach(() => {
+    cleanup();
+    vi.clearAllMocks();
+  });
+
+  it("renders page header", async () => {
+    (api.getNotes as Mock).mockResolvedValue({ ok: true, json: async () => mockNotes });
+    render(() => (
+      <MemoryRouter>
+        <Route path="/" component={Notes} />
+      </MemoryRouter>
+    ));
+    expect(screen.getByRole("heading", { name: "Notes" })).toBeInTheDocument();
+    expect(screen.getByText("Your personal knowledge base")).toBeInTheDocument();
+  });
+
+  it("renders notes from API", async () => {
+    (api.getNotes as Mock).mockResolvedValue({ ok: true, json: async () => mockNotes });
+    render(() => (
+      <MemoryRouter>
+        <Route path="/" component={Notes} />
+      </MemoryRouter>
+    ));
+    await waitFor(() => {
+      expect(screen.getByText("First Note")).toBeInTheDocument();
+      expect(screen.getByText("Second Note")).toBeInTheDocument();
+    });
+  });
+
+  it("shows empty state when no notes", async () => {
+    (api.getNotes as Mock).mockResolvedValue({ ok: true, json: async () => [] });
+    render(() => (
+      <MemoryRouter>
+        <Route path="/" component={Notes} />
+      </MemoryRouter>
+    ));
+    await waitFor(() => {
+      expect(screen.getByText("No notes yet")).toBeInTheDocument();
+    });
+  });
+
+  it("has New Note button", () => {
+    (api.getNotes as Mock).mockResolvedValue({ ok: true, json: async () => [] });
+    render(() => (
+      <MemoryRouter>
+        <Route path="/" component={Notes} />
+      </MemoryRouter>
+    ));
+    expect(screen.getByRole("link", { name: /new note/i })).toBeInTheDocument();
+  });
+
+  it("has search input", () => {
+    (api.getNotes as Mock).mockResolvedValue({ ok: true, json: async () => [] });
+    render(() => (
+      <MemoryRouter>
+        <Route path="/" component={Notes} />
+      </MemoryRouter>
+    ));
+    expect(screen.getByPlaceholderText("Search notes...")).toBeInTheDocument();
+  });
+});