buttons
The calendar shipped its own "quiet control" grammar as a page-local set
of class strings: 28px tall, 13px text, muted ink that darkens under a
light hover wash, ring-free outline focus, and the accent fill reserved
for a pressed or current state. The same look was hand-rolled elsewhere
with drifting values (/65 ink, /50 washes, ring focus) as className
overrides on the kit's Button, against the kit policy.
The grammar now lives in the kit as `variant="quiet"`, with the accent
fill keyed off `aria-pressed`, `aria-current` and `data-popup-open`, so
a
control that is on, current, or holding a popup open fills itself. A
`size="icon-compact"` names the 28px square the sidebar already used for
its compose control; `sm` already had the height for labelled chips.
Kit buttons had no focus treatment of their own, so sites that needed
one
bolted `focus-visible:ring-*` overrides onto the Button. The base now
carries a 2px inset outline from a new `ui/focus.ts` constant that raw
controls (calendar grid cells, the reaction chip) import too, and the
calendar's controls.ts goes away.
With both in place the hand-rolled sites collapse onto the variant: the
calendar's header, month picker and day panel; the statistics month
navigator; the sidebar's section actions and compose and mobile menu
controls; the memo card's trailing actions and its action menu, which no
longer takes a className; the share-image dialog's footer; the memo
outline; and the inactive underline tab. The month title fills while its
picker is open and the outline's current heading fills like every other
current thing. Tests follow the classes they assert.
The user page at /u/:username now opens with a compact identity block
(40px
avatar, name, handle, clamped bio) instead of a hero header with a share
button, and the list beneath it follows the user's column setting like
Explore does. In grid mode the header spans every column via a new
ColumnGrid
header slot, exposed through PagedMemoList.renderHeader. Loading shows a
skeleton after the standard delay, not-found renders a body instead of a
toast fired from render, and visitors get an explicit empty message.
Saved views now apply on profile routes too. A single profile-route
matcher
in lib/memo-views replaces five separate spellings,
isMemoCollectionRoute
names the routes where views, calendar days and tags narrow the list in
place, and the sidebar shows the Views section on every such route for
signed-in users. The never-taken navigation-target branch in the
collection
sidebar is removed along with its props.
The rail used one fill for two meanings: the page you are on and a
filter that is on. A view, a tag and a calendar day could light three
rows like three current pages, while the view itself was never echoed
above the list.
- Split sidebarRowStateClasses into idle / current / checked. Nav pills,
settings sections and list scopes stay filled; views, tags (flat and
tree) and the selected calendar day take the checked look: foreground
text, accent icon and count, a 2px accent mark in the rail inset, no
surface.
- Echo the active view as a filter chip like a tag, and format the day
chip as a date.
- Make the tags list/tree toggle surface-free so only rows carry a fill.
- Tighten rows from 32px to 28px; nav pills keep their 32px square.
