apps/web/src/features/auth · scn-chat · Tangled

ATProto-based AI Assistant Chat interface.

scn-chat apps web src features auth

3 folders · 3 files

pouriade.com · Share one layout between the account card's states · 4d ago

Share one layout between the account card's states

Consolidate the web app's session hooks and simplify the conversation hooks. Signing out and ending a session share signOut and toLogin in features/auth/sign-out.ts, used by useSignOut, which now returns its mutation, the viewer's sign-out, and endSession, keeping their difference: signing out shows a failed delete of the local copy, while an ended session logs it and leaves. StoreProvider reports the store's sync finding the session ended through the same listeners as a request's 401, so one useEndSessionOnUnauthorized in the signed-in layout handles both, and the chat layout keeps no Effect. A test covers it. The store's query hooks share useActiveStore, session.tsx becomes session.ts with Me an interface, replyStreamQuery moves to the conversation's queries.ts, useBranch and useReplyStream drop the useCallbacks React Compiler now covers, and useStickToBottom returns a callback ref that follows the content's scrolling parent while it is mounted, in place of an Effect bound to a ref once.

Snap spacing to whole and half steps

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.

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

Consolidate the web app's session hooks and simplify the conversation hooks. Signing out and ending a session share signOut and toLogin in features/auth/sign-out.ts, used by useSignOut, which now returns its mutation, the viewer's sign-out, and endSession, keeping their difference: signing out shows a failed delete of the local copy, while an ended session logs it and leaves. StoreProvider reports the store's sync finding the session ended through the same listeners as a request's 401, so one useEndSessionOnUnauthorized in the signed-in layout handles both, and the chat layout keeps no Effect. A test covers it. The store's query hooks share useActiveStore, session.tsx becomes session.ts with Me an interface, replyStreamQuery moves to the conversation's queries.ts, useBranch and useReplyStream drop the useCallbacks React Compiler now covers, and useStickToBottom returns a callback ref that follows the content's scrolling parent while it is mounted, in place of an Effect bound to a ref once.