apps/web/src/shared/ui · scn-chat · Tangled

ATProto-based AI Assistant Chat interface.

scn-chat apps web src shared ui

35 files

pouriade.com · Open the Add a key form from a button · 3d ago

Snap spacing to whole and half steps

Snap spacing to whole and half steps

Snap spacing to whole and half steps

Layer colors into scales, roles, and components

CloseButton.tsx

Size components on one scale

Share inline code as Code

Layer colors into scales, roles, and components

Cross-fade Send and Stop, and fade the jump button

A thought, a step, or a reply's sources close without settling short and then dropping. The margins at the edges of their content collapsed out through the part that unfolds, so a closing one eased down to its summary and those margins, held there, and lost them at once when the content was hidden. The content is now its own formatting context, so its margins fold away with it.

Share the disclosure chevron with the Thought button

divided-rows.ts

Keep the form kit out of the entry chunk

ExternalLink.tsx

Share links out of the app as ExternalLink

field-description.ts

Add shared Input and TextArea fields

Guard the design system's scales in the theme test

The notice that another tab holds the chats is a card in the middle of the blurred chat panel, as Jump to's layer blurs it, rather than a line of unstyled text, and so is the one for a store that failed to open. The page behind can't be reached by pointer or keyboard, the card's button takes the keyboard, and the card stays up with its button busy while a retry waits. BusyBanner becomes StoreUnavailable, which wraps the page, and the error page's round icon mark becomes IconMark, shared by both.

Cross-fade Send and Stop, and fade the jump button

Fade a deleting item from ItemList's shared row

Port the login page from design-reference: the logo and app name over a tagline, a handle field with its @ inside, Continue that says it is redirecting to the PDS until the page is left, the server's error tied to the field, and a viewer's notice above the form with Sign out as a quiet link under it. The server drops a leading @ from the handle. Button gains a link tone, the theme an underline offset, and the logo is decoration when it has no name.

Snap spacing to whole and half steps

Add shared Input and TextArea fields

Guard the design system's scales in the theme test

The menus on a chat, a reply, a table, and the conversation header are one shared Menu in shared/ui, imported as `import * as Menu`: a Root holding open and onOpenChange, a Trigger that is an IconButton, a Popup, Items, and a Separator, after the WAI-ARIA menu button pattern. The arrow keys, Home, and End move between items, Tab closes a menu and moves on, Escape closes it back on its button, and choosing an item closes it and returns the focus unless the item moved it, even when the focus was on the page, as in Safari. A reply's details now open as their own card from More rather than as a menu view. The account menu stays a popover, now opening on Settings and giving the focus back on Escape. IconButton gains action, row, and firm tones, with toggle, row, and small sizes, which the hand-built sidebar, header, and message action buttons now use, so MenuItem, ToolButton, and iconAction are gone. usePopover takes a Placement of align, anchored, and portal that Menu.Popup shares, along with its dismiss and focus rules.

scroll-fade.css

List provider models to tick as rows, added on Save

Snap spacing to whole and half steps

Open the Add a key form from a button

Layer colors into scales, roles, and components

SettingsPage.tsx

Take ConfirmButton's icon as a plain icon

SettingsPageSkeleton.tsx

Snap spacing to whole and half steps

Guard the design system's scales in the theme test

SidebarToggle.tsx

Size components on one scale

Layer colors into scales, roles, and components

Name text sizes as Tailwind does

Share relative timestamps as TimeAgo

Carry line height and tracking in the type scale

Snap spacing to whole and half steps