Give the dock its own compact notes layout

The dock was showing `NotesPanel`, which is a master/detail layout: a column
of titles beside an editor. The previous commit made that survive dock width;
it did not make it right. At 352px the layout still spends roughly 356px of
height on chrome — dock header, panel header, title strip, a button row that
wraps, and a paragraph of help — before the body gets a pixel.

So the dock now shows one note. The title field names what is open and the
chevron beside it switches; New and Delete move into the overflow menu; the
help text goes. Chrome drops to about 112px and the body takes the rest.

The two surfaces are now different components, which contradicts a docstring
I wrote — "shared so the two cannot drift into different behaviour". That
claim was about behaviour, and behaviour was never in the layout: it is in
`useNotes` for the cache and its write ordering, and now in `useNoteDraft`,
extracted here so when a keystroke becomes a save is defined in exactly one
place. Only the layout diverges. `NotesPanel.shared.test.tsx` gets stronger
for it — it now mounts the dock panel and the tab panel together, which is
what the app actually does, instead of the same component twice.

`NoteSwitcher` is not `OverflowMenu` despite the shape being close: that keys
items by label, and notes are addressed by id, so two untitled notes — the
ordinary case — would collapse into one row. It is also not a `combobox`; an
input plus a listbox button is two honest controls, where the role would owe
active-descendant tracking and filtering that nothing here needs.

`SendToAgentButton` picks up `useUnavailable` from #49, which is what its
`disabled` plus explanatory `title` was already asking for. Four tests moved
from `toBeDisabled()` to the new contract, and one of them — "does nothing for
an empty note" — turned out never to have asserted that it does nothing. It
does now, for click and for Enter, which is the guard the swap needs.

It also gains `dropUp`, and that is load-bearing rather than cosmetic: the
dock clips its own overflow, so a session menu opening downward from a button
on the bottom edge is drawn outside the panel and never seen.

744 tests pass, 62 files. As before, jsdom has no layout engine: that the dock
now reads as compact is not something the suite can tell you.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011YPqHpjV4EL6RNEwrRKqQm

app/src/components/notes/NotesPanel.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useMemo, useState } from "react";
 import { useNotes } from "../../hooks/useNotes";
+import { useNoteDraft } from "./useNoteDraft";
 import NoteEditor from "./NoteEditor";
 import Button from "../ui/Button";
 import SaveIndicator from "../ui/SaveIndicator";
@@ -34,54 +35,16 @@ export default function NotesPanel({ projectId }: Props) {
   const { notes, loading, saveState, createNote, saveNote, deleteNote } =
     useNotes(projectId);
   const [selectedId, setSelectedId] = useState<string | null>(null);
-  const [title, setTitle] = useState("");
-  const [body, setBody] = useState("");
 
   const selected = useMemo(
     () => notes.find((n) => n.id === selectedId) ?? notes[0] ?? null,
     [notes, selectedId],
   );
 
-  // What was last copied out of the store into the draft fields. The draft is
-  // "untouched" exactly while it still matches this, which is how an edit made
-  // somewhere else can be shown without ever discarding something half-typed.
-  const seeded = useRef<{ id: string | null; title: string; body: string }>({
-    id: null,
-    title: "",
-    body: "",
-  });
-
-  // Load the selected note's stored text into the draft — on a change of note,
-  // and on a change to the *stored* text of the note already selected. The
-  // second case is the dock and the tab showing one project at once: an edit
-  // committed in one surface has to reach the other's editor, not just its
-  // list. It never overwrites text the user is part-way through typing; that
-  // blurs into a last-writer-wins save, as any blur-commit editor does.
-  useEffect(() => {
-    if (!selected) {
-      seeded.current = { id: null, title: "", body: "" };
-      setTitle("");
-      setBody("");
-      return;
-    }
-    const untouched =
-      title === seeded.current.title && body === seeded.current.body;
-    if (seeded.current.id !== selected.id || untouched) {
-      seeded.current = { id: selected.id, title: selected.title, body: selected.body };
-      setTitle(selected.title);
-      setBody(selected.body);
-    }
-  }, [selected?.id, selected?.title, selected?.body]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const commit = () => {
-    if (!selected) return;
-    // Reading is not editing: clicking through notes must not rewrite the file.
-    if (title === selected.title && body === selected.body) return;
-    // Mark the draft as matching what was just committed, so the store update
-    // this save produces reads as "no change" rather than as a stale re-seed.
-    seeded.current = { id: selected.id, title, body };
-    void saveNote({ ...selected, title, body });
-  };
+  const { title, body, setTitle, setBody, commit } = useNoteDraft(
+    selected,
+    saveNote,
+  );
 
   const onCreate = async () => {
     const note = await createNote();