apps/web/src/routes · scn-chat · Tangled

ATProto-based AI Assistant Chat interface.

scn-chat apps web src routes

2 folders · 3 files

pouriade.com · Keep the chat list mounted between chats · 4d ago

Keep the chat list mounted between chats

The app has a description, set in the admin area beside its name, which the login page shows under the name in place of its fixed tagline. Every page carries it as its meta description and in Open Graph tags for link previews, with robots noindex, since each page is someone's own. A page's title is its route's staticData.title, such as Settings, Admin, or Shared chat, before the app name. The login page is the one page search engines may list: it overrides robots and names its canonical URL and og:url under PUBLIC_URL, which the server now passes with each request. /robots.txt keeps crawlers out of /api, /oauth, and /xrpc. shared/app-name.ts becomes shared/site.ts, which reads the name and description from the rendered page in the browser.

Add a PNG favicon and the manifest's lang

Settings forms take one save prop, add forms get their own AddBar, and contexts use React 19's use() and <Context value>.

The sign-in field suggests accounts as you type a handle, from Bluesky's public searchActorsTypeahead, which the browser asks itself without a referrer after a 150 ms pause, skipping a DID or PDS URL. Each suggestion shows the account's avatar thumbnail, display name, and handle, and picking one by click or with the arrow keys and Enter fills in its handle, with its avatar in place of the @ until the field is edited, while Enter with nothing picked signs in as before. The panel shows skeleton rows once a first search takes the quiet wait, keeps the last accounts with a spinner in the field while a later one loads, and says when nothing matches or the search failed, with a hint to type the full handle, and screen readers hear how many accounts were found. The login page preconnects to the typeahead and Bluesky's image CDN, the field turns off the browser's own autocomplete, and Avatar is its own component, shared with the account card. The auth spec describes it, with tests and acceptance criteria.