From 0e7c80f387f7b619040e1331d626960ac133656a Mon Sep 17 00:00:00 2001
From: Tim Disney <tim@disnetdev.com>
Date: Wed, 29 Jul 2026 17:20:35 -0700
Subject: [PATCH] Align all sign-in surfaces (#26)

Co-authored-by: codexbot.disnetdev.com (did:plc:hbonvqr5ysrscg5wdyb5klie) <codexbot.disnetdev.com@noreply.radial>
---
 packages/ui/src/app.css                       | 22 +++++++-------
 packages/ui/src/lib/components/Account.svelte |  8 ++---
 .../ui/src/lib/components/SpacePicker.svelte  | 30 +++++++++++++++++--
 packages/ui/test/sign-in-surfaces.test.mjs    | 20 +++++++++++++
 4 files changed, 63 insertions(+), 17 deletions(-)
 create mode 100644 packages/ui/test/sign-in-surfaces.test.mjs

diff --git a/packages/ui/src/app.css b/packages/ui/src/app.css
index 8bdab0b..b5b83ed 100644
--- a/packages/ui/src/app.css
+++ b/packages/ui/src/app.css
@@ -809,24 +809,24 @@ select.sl { resize: none; cursor: pointer; padding-right: 8px; }
 .acct-pop[hidden] { display: none; }
 .acct-pop h3 { margin: 0 0 3px; font-size: 13.5px; font-weight: 600; }
 .acct-pop .hint { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
-.acct-warning {
+.signin-warning {
   margin: 10px 0 12px; padding: 9px 10px; border: 1px solid var(--warn-mark);
   border-radius: 8px; background: var(--warn-wash); color: var(--ink); font-size: 11.5px; line-height: 1.45;
 }
-.acct-warning p { margin: 0; }
-.acct-warning p + p { margin-top: 5px; }
-.acct-recent { display: grid; gap: 4px; margin: 11px 0; }
-.acct-identity {
+.signin-warning p { margin: 0; }
+.signin-warning p + p { margin-top: 5px; }
+.signin-recent { display: grid; gap: 4px; margin: 11px 0; }
+.signin-identity {
   display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
   padding: 7px 8px; border: 0; border-radius: 7px; background: var(--sunk); color: var(--ink);
   cursor: pointer; font: 12px var(--mono); text-align: left;
 }
-.acct-identity span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.acct-identity:hover, .acct-identity:focus-visible { background: var(--hover); outline: 0; }
-.acct-identity:disabled { color: var(--ink-2); cursor: default; }
-.acct-or { display: flex; align-items: center; gap: 8px; margin: 12px 0 9px; color: var(--ink-2); font-size: 10.5px; }
-.acct-or::before, .acct-or::after { content: ''; height: 1px; flex: 1; background: var(--line-soft); }
-.acct-or span { flex: none; }
+.signin-identity span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.signin-identity:hover, .signin-identity:focus-visible { background: var(--hover); outline: 0; }
+.signin-identity:disabled { color: var(--ink-2); cursor: default; }
+.signin-or { display: flex; align-items: center; gap: 8px; margin: 12px 0 9px; color: var(--ink-2); font-size: 10.5px; }
+.signin-or::before, .signin-or::after { content: ''; height: 1px; flex: 1; background: var(--line-soft); }
+.signin-or span { flex: none; }
 .acct-pop .acts { padding-top: 11px; }
 .acct-who { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
 .acct-who .nm { font-size: 13.5px; font-weight: 600; }
diff --git a/packages/ui/src/lib/components/Account.svelte b/packages/ui/src/lib/components/Account.svelte
index 9d43f06..b7e5d7b 100644
--- a/packages/ui/src/lib/components/Account.svelte
+++ b/packages/ui/src/lib/components/Account.svelte
@@ -120,16 +120,16 @@
         <p class="hint">
           Your handle, DID, or the address of your PDS. You authorize this app at your own server.
         </p>
-        <div class="acct-warning" role="note">
+        <div class="signin-warning" role="note">
           <p><strong>Everything you add is public.</strong> Radial records are visible to anyone.</p>
           <p><strong>Radial is beta software.</strong> Expect bugs and rough edges.</p>
         </div>
         {#if rememberedIdentities.length > 0}
-          <div class="acct-recent">
+          <div class="signin-recent">
             <div class="field-label">Continue as</div>
             {#each rememberedIdentities as identity (identity.did)}
               <button
-                class="acct-identity"
+                class="signin-identity"
                 type="button"
                 disabled={account.status === 'signing-in'}
                 title={identity.did}
@@ -140,7 +140,7 @@
               </button>
             {/each}
           </div>
-          <div class="acct-or"><span>or use another identity</span></div>
+          <div class="signin-or"><span>or use another identity</span></div>
         {/if}
         <form onsubmit={submit}>
           <label class="field">
diff --git a/packages/ui/src/lib/components/SpacePicker.svelte b/packages/ui/src/lib/components/SpacePicker.svelte
index b2f5da4..6dc6ab5 100644
--- a/packages/ui/src/lib/components/SpacePicker.svelte
+++ b/packages/ui/src/lib/components/SpacePicker.svelte
@@ -19,7 +19,7 @@
   //
   // "Opened before" is what remains: spaces this browser profile has read without being a member of, and
   // so has no join for. It is a per-profile convenience rather than anything the network knows.
-  import { account, signIn, signOut } from '$lib/auth.svelte.js'
+  import { account, rememberedIdentities, signIn, signOut } from '$lib/auth.svelte.js'
   import { unknownActor } from '$lib/directory.js'
   import { discoverOwned, forgetOwned, owned } from '$lib/owned.svelte.js'
   import { forget, leave, openFixture, openSpace, session } from '$lib/session.svelte.js'
@@ -92,6 +92,28 @@
   {#if !signedIn}
     <!-- The primary act. Not a popover: a popover is for an account you already have on a screen that
          is about something else, and this screen is about the account. -->
+    <div class="signin-warning" role="note">
+      <p><strong>Everything you add is public.</strong> Radial records are visible to anyone.</p>
+      <p><strong>Radial is beta software.</strong> Expect bugs and rough edges.</p>
+    </div>
+    {#if rememberedIdentities.length > 0}
+      <div class="signin-recent">
+        <div class="field-label">Continue as</div>
+        {#each rememberedIdentities as identity (identity.did)}
+          <button
+            class="signin-identity"
+            type="button"
+            disabled={account.status === 'signing-in'}
+            title={identity.did}
+            onclick={() => void signIn(identity.handle ?? identity.did)}
+          >
+            <span>{identity.handle ?? identity.did}</span>
+            <span aria-hidden="true">→</span>
+          </button>
+        {/each}
+      </div>
+      <div class="signin-or"><span>or use another identity</span></div>
+    {/if}
     <form onsubmit={submitSignIn}>
       <label class="field">
         <span class="field-label">Handle, DID, or the address of your PDS</span>
@@ -113,7 +135,11 @@
           type="submit"
           disabled={account.status === 'signing-in' || identifier.trim() === ''}
         >
-          {account.status === 'signing-in' ? 'Redirecting…' : 'Sign in'}
+          {account.status === 'signing-in'
+            ? 'Redirecting…'
+            : rememberedIdentities.length > 0
+              ? 'Continue'
+              : 'Sign in'}
         </button>
       </div>
       <p class="picker-note" style="display:block;margin:10px 0 0;line-height:1.5">
diff --git a/packages/ui/test/sign-in-surfaces.test.mjs b/packages/ui/test/sign-in-surfaces.test.mjs
new file mode 100644
index 0000000..bb5d15e
--- /dev/null
+++ b/packages/ui/test/sign-in-surfaces.test.mjs
@@ -0,0 +1,20 @@
+import assert from 'node:assert/strict'
+import { readFile } from 'node:fs/promises'
+import { describe, it } from 'node:test'
+
+const components = await Promise.all(
+  ['Account.svelte', 'SpacePicker.svelte'].map((name) =>
+    readFile(new URL(`../src/lib/components/${name}`, import.meta.url), 'utf8'),
+  ),
+)
+
+describe('sign-in surfaces', () => {
+  it('offer remembered identities and the public beta warning consistently', () => {
+    for (const component of components) {
+      assert.match(component, /rememberedIdentities/)
+      assert.match(component, /Everything you add is public\./)
+      assert.match(component, /Radial is beta software\./)
+      assert.match(component, /signin-identity/)
+    }
+  })
+})
-- 
2.51.2