Drawer was a fixed right-side <aside> sliding off the chat. Replaces
that with a centered modal dialog overlay that floats on top of the
chat — backdrop click or Escape closes, focus restores to the toggle
button on close.
Aesthetic direction is editorial: warm-paper panel on a deep
ink-blue inky-blur backdrop, a single muted-amber accent (the
hairline rule along the top of the panel and the dot after the
title), Newsreader serif for the title only (body keeps system-ui
for read-flow), controlled motion (no bounce) — translate(8px) +
scale(0.98) to neutral over 180ms, with prefers-reduced-motion
killing the transform entirely.
Implementation:
- chat/templates/base.html: load Newsreader from Google Fonts
(preconnected, swap, only the two weights we use).
- chat/templates/chat.html: replace the <aside id="drawer"> with
modal markup (role="dialog", aria-modal). HTMX trigger swaps
from "revealed" to a custom "drawer-open from:body" event,
dispatched by the open() handler so the drawer body re-fetches
on every open. Escape, backdrop click, and the close × all
close. Focus returns to the toggle on close.
- chat/static/app.css: full drawer-modal stylesheet scoped via a
--paper / --ink / --accent token block on the modal root, with
scoped overrides for the existing .drawer-section / .drawer-row
/ button classes the server renders into the panel body so the
legacy drawer markup still renders cleanly on warm paper.
aria-controls on the toggle now points at the dialog (drawer-modal),
aria-haspopup="dialog" for AT semantics.
Joseph Doherty
50ab0c8229