apps/web/tests/shared · scn-chat · Tangled

ATProto-based AI Assistant Chat interface.

scn-chat apps web tests shared

2 folders · 8 files

pouriade.com · A Select given searchLabel opens a list of eight options or more, about as many as it shows before scrolling, with a search box named by it, and the model select gives "Search models", which finds a model by its name, its ID, or its provider through the options' new keywords. The box takes the focus as the list opens, except on a touch screen, where it waits for a tap so its keyboard doesn't cover the list. Typing narrows the options to those holding every word typed, in any case, moves to the first that matches, and says "No matches" through a status that is there from the start, so screen readers hear it. The arrow keys, Page Up, Page Down, and Enter work from the box while Home, End, and Space stay the field's, Escape closes the list and Tab moves on, each from the button, which takes the focus back as after a pick, and a letter typed on the closed button opens the list searching for it. An option's id comes from its place among every option, so the active id changes with each move and screen readers and the scroll into view follow it. The list's heading and search box sit over the options, which alone scroll, and usePlacement measures the room the reader can see, following the visual viewport as an on-screen keyboard comes and goes. touchOnly is shared with the composer from shared/touch.ts. The styling and web UI specs describe it, with tests and an acceptance criterion. · 2w ago

The schema forms' choices, such as web search's engine, and the API keys page's provider use the app's Select, with the same arrow and open list as the theme's, in place of a native select. The form kit's SelectField takes options and a placeholder rather than option children, and since the Select can't be required as a native one can, adding a key with no provider says to choose one.

A Select given searchLabel opens a list of eight options or more, about as many as it shows before scrolling, with a search box named by it, and the model select gives "Search models", which finds a model by its name, its ID, or its provider through the options' new keywords. The box takes the focus as the list opens, except on a touch screen, where it waits for a tap so its keyboard doesn't cover the list. Typing narrows the options to those holding every word typed, in any case, moves to the first that matches, and says "No matches" through a status that is there from the start, so screen readers hear it. The arrow keys, Page Up, Page Down, and Enter work from the box while Home, End, and Space stay the field's, Escape closes the list and Tab moves on, each from the button, which takes the focus back as after a pick, and a letter typed on the closed button opens the list searching for it. An option's id comes from its place among every option, so the active id changes with each move and screen readers and the scroll into view follow it. The list's heading and search box sit over the options, which alone scroll, and usePlacement measures the room the reader can see, following the visual viewport as an on-screen keyboard comes and goes. touchOnly is shared with the composer from shared/touch.ts. The styling and web UI specs describe it, with tests and an acceptance criterion.

Group the web app's code by feature. Each folder in src/features (auth, chat-list, conversation, sharing, models, settings, admin) holds that feature's pages, layouts included, components, hooks, lib, and queries, and the routes stay thin, rendering a feature's page. Page files are named after the component they export. The query factories split from src/queries.ts into each feature's queries.ts, leaving staleTime in src/shared, which also holds the API client, errors, search params, and the schema forms that admin and settings share. inheritedModel moves from the models module to the conversation's branch module, so models no longer depends on the conversation. Tests mirror the new tree, and the specs, the architecture doc, and CLAUDE.md name the new paths.

The schema forms' choices, such as web search's engine, and the API keys page's provider use the app's Select, with the same arrow and open list as the theme's, in place of a native select. The form kit's SelectField takes options and a placeholder rather than option children, and since the Select can't be required as a native one can, adding a key with no provider says to choose one.

route-states.test.tsx

Add shared primitives for the web component refactor. ErrorAlert renders an error's alert or nothing, LocalTime shows a date in the browser's locale only in the browser, and form.tsx is a createFormHook kit whose text, textarea, checkbox, and select fields bind to their field and label themselves, with a Form that submits through the form API and a SubmitButton disabled while submitting. The router's default error and pending components, RouteError and RoutePending, give every route its own boundaries, so a failed section shows its error inside its layout with a Retry that reloads it, and renderAt uses the same defaults.

search-params.test.ts

Group the web app's code by feature. Each folder in src/features (auth, chat-list, conversation, sharing, models, settings, admin) holds that feature's pages, layouts included, components, hooks, lib, and queries, and the routes stay thin, rendering a feature's page. Page files are named after the component they export. The query factories split from src/queries.ts into each feature's queries.ts, leaving staleTime in src/shared, which also holds the API client, errors, search params, and the schema forms that admin and settings share. inheritedModel moves from the models module to the conversation's branch module, so models no longer depends on the conversation. Tests mirror the new tree, and the specs, the architecture doc, and CLAUDE.md name the new paths.

Lay the styling foundation on Tailwind v4. styles/theme.css holds every token from design-reference under Tailwind's namespaces, with Tailwind's own palette, scales, and breakpoints cleared so utilities can only name the theme, and styles/base.css styles only the document. Main's stand-in look moves to styles/legacy.css, in a layer between the base and the utilities, scoped to stop at any area marked data-ported and restoring the browser defaults Preflight removes, until the port is done. A System, Light, or Dark choice is kept on the device and applied by a script in the head before the first paint, and useInstantThemeSwitch switches without smearing for the system and other tabs. The icons come over from design-reference taking a class, the logo draws inline in theme colors from the favicon's file, cn merges classes knowing the theme's names, Biome sorts classes, and a test keeps raw colors and lengths out of components.

Port the admin area from design-reference. Users is a card to add a person over those waiting to sign in, then a search over a list of accounts, each with its initial, its DID, storage, and last activity, its roles as chips with a picker to add one, and its access at the end, where Suspend asks for a reason first. Roles and plugins are lists whose rows open their pages, which link back above their titles, a plugin's numbered in load order with its status and arrows to move it. A role's page holds its members, then its details with hosts and domains in a mono field. Access picks a registration mode from choices, with invite roles as chips that toggle. Models picks the default by a click anywhere on its row. A plugin's page holds its settings, a list of its provider's models, and a card to tick or type more. A model's capabilities are switches. Removing a role, plugin, or model, and revoking a key, confirm in place, and each sits in a red card. An issued key shows once in a green note with Copy. Cron shows the last run with a badge and the crontab line to copy. General, Turns, and Sync choose their cards per route, and the settings schemas gain clearer titles, descriptions, and units, which SchemaFields shows after a number.

useDocumentTitle.test.tsx

An open chat's browser tab shows its title before the app name, as "Tile quotes · SCN Chat", and so does a shared chat with a title, through useDocumentTitle, since the title lives in the browser store or the shared chat's query, which the router's head never sees. Until the title is known the tab keeps the route's, an untitled chat shows "New chat", and leaving the chat puts back the title it replaced unless the router has set another since, as for Settings. The web UI spec describes it, with tests and an acceptance criterion.

useSidebar.test.tsx

A collapsed sidebar stays collapsed through a reload, never showing open first. The head's script, beside the theme's, reads the stored choice and marks the root with data-sidebar-collapsed before the first paint, which the layout's styles already follow from any ancestor, and toggling keeps that attribute current. The server's frame, which can't know the choice, needs no change on hydrating, so it no longer turns off the slide.