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

ATProto-based AI Assistant Chat interface.

scn-chat apps web tests shared

2 folders · 9 files

at admin-config-export

pouriade.com · Settings and admin forms keep Save disabled until the form differs from what was saved, and say "Unsaved changes" beside it until then. SaveBar reads this from its form's context, and a form that adds, such as Issue key or Add plugin, passes adds so it never says so. Leaving a page doesn't ask. Preferences now starts over from the stored record after a save, as the other forms do. · 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.

Settings and admin forms keep Save disabled until the form differs from what was saved, and say "Unsaved changes" beside it until then. SaveBar reads this from its form's context, and a form that adds, such as Issue key or Add plugin, passes adds so it never says so. Leaving a page doesn't ask. Preferences now starts over from the stored record after a save, as the other forms do.

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.

message.test.ts

The web app's message records are typed as the lexicon's MessageRecord, and a conversation's info as InfoRecord, from the local copy, which holds only records the server validated, through BranchMessage to the message, status, details, part, and tool views, so their reads need no casts. src/shared/message.ts holds what a status means, isPending and isFinished, which counts a status another client wrote that this app doesn't know as neither, along with a message's parts, whether it is encrypted, and who wrote it, in place of the checks written out in the message view, the message actions, the chat, the reply follower, and tool status. Tests build records with messageRecord in tests/helpers/records.ts, and the status rules are tested once.

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.