design(auth): make the backup sign-in methods a plain list, one choice at a time

The disclosure hid three methods behind a summary, then swapped the whole
card when one was chosen and offered no way back. It read as a pile of links.

- Backup methods are now a grouped list: leading symbol, succinct title, one
  line of detail, chevron. Apple's "Lists and tables" guidance asks for a
  disclosure indicator on a row that opens a view, and for a clear press
  state; both are there.
- Choosing a row opens that method alone, with "All sign-in options" to step
  back. No screen shows two ways in at once.
- With no provider enabled, the same list is the landing instead of dropping
  people straight into code entry.
- The heading explains why to sign in rather than how identifiers work.

Refs #45

Author: gbrlpzz

docs/design.md

@@ -122,8 +122,12 @@ applies.
   `#747775` border (light) or a `#131314` button with a `#8e918f` border
   (dark).
 
-Backup methods live under one **Other ways to sign in** disclosure, so the
-first screen stays two decisions wide.
+Backup methods are a grouped list under **Other ways to sign in**: a leading
+symbol, a succinct title, one line of detail, and a chevron, following the
+["Lists and tables"](https://developer.apple.com/design/human-interface-guidelines/lists-and-tables)
+rule that a row which opens a view carries a disclosure indicator. Choosing a
+row opens that method alone, with **All sign-in options** to step back, so no
+screen ever presents two ways in at once.
 
 ---
 

src/components/auth/AuthScreen.tsx

@@ -6,7 +6,7 @@ import {
   type AuthProvider,
 } from "../../lib/supabaseClient";
 import { CollectBrand } from "../CollectBrand";
-import { Icon } from "../Icon";
+import { Icon, type IconName } from "../Icon";
 import { isAppleMobileBrowser, isStandaloneApp } from "../../lib/platform";
 import { CodeSignIn } from "./CodeSignIn";
 import { EmailLinkForm } from "./EmailLinkForm";
@@ -23,22 +23,42 @@ interface AuthScreenProps {
   onPasswordSet?: () => void;
 }
 
-/** Sign-in methods, in the order the screen offers them. */
-type EntryMode = "provider" | "link" | "password" | "code";
+/** The backup methods, in the order the list offers them. */
+type BackupMethod = "link" | "password" | "code";
 
-const modeTitle: Record<EntryMode, string> = {
-  provider: "Sign in.",
-  link: "Sign in with a link.",
-  password: "Sign in with a password.",
-  code: "Sign in with a code.",
-};
-
-const modeAction: Record<EntryMode, string> = {
-  provider: "Continue with Google or Apple",
-  link: "Email me a sign-in link",
-  password: "Use an email address and password",
-  code: "Use a code from your administrator or another device",
-};
+const backupMethods: {
+  id: BackupMethod;
+  icon: IconName;
+  title: string;
+  detail: string;
+  heading: string;
+  lede: string;
+}[] = [
+  {
+    id: "link",
+    icon: "send",
+    title: "Email me a sign-in link",
+    detail: "Opens collect from your inbox.",
+    heading: "Sign in with a link.",
+    lede: "We send a one-time link to the address on your account.",
+  },
+  {
+    id: "password",
+    icon: "key",
+    title: "Sign in with a password",
+    detail: "For an account that already has one.",
+    heading: "Sign in with a password.",
+    lede: "Use the email address and password on your account.",
+  },
+  {
+    id: "code",
+    icon: "phone",
+    title: "Sign in with a code",
+    detail: "Eight characters, from your administrator or a signed-in device.",
+    heading: "Sign in with a code.",
+    lede: "Enter the code you were given, or request a fresh one below.",
+  },
+];
 
 function isLocalDevelopmentOrigin(): boolean {
   if (typeof window === "undefined") return false;
@@ -51,11 +71,10 @@ function isLocalDevelopmentOrigin(): boolean {
 /**
  * The single sign-in surface for both installed apps.
  *
- * Providers come first: they need no email, so a deployment never depends on a
- * mail quota to admit people. Every other method stays available underneath,
- * each named after the authentication it performs, as Apple's "Managing
- * accounts" guidance requires. Only methods this deployment actually offers
- * are shown.
+ * One decision at a time. Providers come first: they need no email, so a
+ * deployment never depends on a mail quota to admit people. Everything else
+ * sits in one list of named methods, and choosing one opens that method alone
+ * with an explicit way back — no screen ever shows two ways in at once.
  */
 export function AuthScreen({
   configured,
@@ -71,7 +90,7 @@ export function AuthScreen({
     configured ? knownAuthProviders() : [],
   );
   const [providersChecked, setProvidersChecked] = useState(false);
-  const [mode, setMode] = useState<EntryMode | null>(null);
+  const [method, setMethod] = useState<BackupMethod | null>(null);
   const [callbackIssue, setCallbackIssue] = useState<string | null>(() =>
     authCallbackError(),
   );
@@ -92,18 +111,7 @@ export function AuthScreen({
     };
   }, [configured]);
 
-  // Before the deployment answers, keep the screen quiet rather than guessing
-  // a method that may not exist here.
-  const entryMode: EntryMode =
-    mode ??
-    (providers.length ? "provider" : role === "admin" ? "link" : "code");
-  const alternatives = (
-    ["provider", "link", "password", "code"] as const
-  ).filter(
-    (candidate) =>
-      candidate !== entryMode &&
-      (candidate !== "provider" || providers.length > 0),
-  );
+  const chosen = backupMethods.find((candidate) => candidate.id === method);
 
   if (requirePasswordSetup) {
     return (
@@ -122,19 +130,34 @@ export function AuthScreen({
         <CollectBrand />
       </div>
       <section className="auth-card" aria-labelledby="auth-title">
+        {chosen && (
+          <button
+            type="button"
+            className="text-button auth-back"
+            onClick={() => {
+              setMethod(null);
+              setCallbackIssue(null);
+            }}
+          >
+            <Icon name="chevron-left" size={16} /> All sign-in options
+          </button>
+        )}
+
         <h1 id="auth-title">
-          {role === "admin" && entryMode === "provider"
-            ? "Admin sign in."
-            : modeTitle[entryMode]}
+          {chosen
+            ? chosen.heading
+            : role === "admin"
+              ? "Admin sign in."
+              : "Sign in."}
         </h1>
         <p>
           {!configured
             ? "Authentication is not configured for this deployment."
-            : entryMode === "provider"
-              ? "Sign in to reach the projects you contribute to. Your email address stays your identifier."
-              : entryMode === "code"
-                ? "Enter the code your administrator issued, or request a new one below."
-                : "Use the email address your invitation was sent to."}
+            : chosen
+              ? chosen.lede
+              : providers.length
+                ? "Sign in to reach the projects you contribute to."
+                : "Choose how to sign in."}
         </p>
 
         {configured && (
@@ -145,48 +168,64 @@ export function AuthScreen({
               </p>
             )}
 
-            {entryMode === "provider" && (
-              <ProviderSignIn
-                providers={providers}
-                surface={role}
-                onFailure={() => setCallbackIssue(null)}
-              />
-            )}
-            {entryMode === "link" && (
-              <EmailLinkForm showLocalRedirectHint={showLocalRedirectHint} />
-            )}
-            {entryMode === "password" && <PasswordForm />}
-            {entryMode === "code" && <CodeSignIn autoFocus={mode === "code"} />}
-
-            {entryMode === "provider" && standalone && (
-              <p className="auth-config-note">
-                <Icon name="info" size={16} />
-                <span>
-                  The provider opens in the browser. If it does not return to
-                  this app, sign in there and use a code from the signed-in
-                  browser.
-                </span>
-              </p>
-            )}
+            {chosen ? (
+              <>
+                {chosen.id === "link" && (
+                  <EmailLinkForm
+                    showLocalRedirectHint={showLocalRedirectHint}
+                  />
+                )}
+                {chosen.id === "password" && <PasswordForm />}
+                {chosen.id === "code" && <CodeSignIn autoFocus />}
+              </>
+            ) : (
+              <>
+                <ProviderSignIn
+                  providers={providers}
+                  surface={role}
+                  onFailure={() => setCallbackIssue(null)}
+                />
+
+                {providers.length > 0 && standalone && (
+                  <p className="auth-config-note">
+                    <Icon name="info" size={16} />
+                    <span>
+                      The provider opens in the browser. If it does not return
+                      to this app, sign in there and use a code from the
+                      signed-in browser.
+                    </span>
+                  </p>
+                )}
 
-            {providersChecked && alternatives.length > 0 && (
-              <details className="auth-alternatives">
-                <summary>Other ways to sign in</summary>
-                {alternatives.map((candidate) => (
-                  <button
-                    key={candidate}
-                    type="button"
-                    className="text-button"
-                    onClick={() => {
-                      setMode(candidate);
-                      setCallbackIssue(null);
-                    }}
-                  >
-                    {modeAction[candidate]}{" "}
-                    <Icon name="arrow-right" size={15} />
-                  </button>
-                ))}
-              </details>
+                {providersChecked && (
+                  <>
+                    {providers.length > 0 && (
+                      <p className="auth-list-heading">Other ways to sign in</p>
+                    )}
+                    <ul className="auth-method-list">
+                      {backupMethods.map((candidate) => (
+                        <li key={candidate.id}>
+                          <button
+                            type="button"
+                            className="auth-method"
+                            onClick={() => {
+                              setMethod(candidate.id);
+                              setCallbackIssue(null);
+                            }}
+                          >
+                            <Icon name={candidate.icon} size={19} />
+                            <span className="auth-method-copy">
+                              <strong>{candidate.title}</strong>
+                              <span>{candidate.detail}</span>
+                            </span>
+                            <Icon name="chevron-right" size={17} />
+                          </button>
+                        </li>
+                      ))}
+                    </ul>
+                  </>
+                )}
+              </>
             )}
           </>
         )}
@@ -197,7 +236,7 @@ export function AuthScreen({
           </button>
         )}
 
-        {showInstallHint && (
+        {showInstallHint && !chosen && (
           <details className="auth-install-help">
             <summary>
               <Icon name="plus" size={16} /> Add collect to Home Screen

src/styles/foundation.css

@@ -1956,6 +1956,78 @@ p {
 .auth-sent .text-button {
   margin-top: 20px;
 }
+/* Backup methods.
+   A grouped list in the platform idiom: a leading symbol, a succinct title
+   with one line of detail, and a chevron for the row that opens a view.
+   Apple HIG "Lists and tables": use a disclosure indicator for rows that
+   drill in, and give every row a clear press state. */
+.auth-list-heading {
+  margin: 26px 0 8px;
+  color: var(--secondary);
+  font-size: 0.75rem;
+  font-weight: 650;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+}
+.auth-method-list {
+  margin: 14px 0 0;
+  padding: 0;
+  border: 1px solid var(--separator-light);
+  border-radius: 14px;
+  list-style: none;
+  overflow: hidden;
+}
+.auth-method-list li + li {
+  border-top: 1px solid var(--separator-light);
+}
+.auth-method {
+  width: 100%;
+  min-height: 60px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 14px;
+  border: 0;
+  background: transparent;
+  color: var(--text);
+  text-align: left;
+  transition: background 0.16s ease;
+}
+.auth-method:hover {
+  background: var(--grouped);
+}
+.auth-method:active {
+  background: var(--grouped-strong);
+}
+.auth-method > svg:first-child {
+  flex: 0 0 auto;
+  color: var(--secondary);
+}
+.auth-method > svg:last-child {
+  flex: 0 0 auto;
+  margin-left: auto;
+  color: var(--tertiary);
+}
+.auth-method-copy {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.auth-method-copy strong {
+  font-size: 0.9375rem;
+  font-weight: 600;
+}
+.auth-method-copy span {
+  color: var(--secondary);
+  font-size: 0.8125rem;
+  line-height: 1.35;
+}
+.auth-back {
+  margin: -6px 0 6px;
+  color: var(--secondary);
+}
+
 .auth-install-help,
 .auth-alternatives {
   margin-top: 22px;