diff --git a/apps/mobile/src/features/settings/ClaudeAccounts.tsx b/apps/mobile/src/features/settings/ClaudeAccounts.tsx index 9b41e2a6b35b..85f898ba1f76 100644 --- a/apps/mobile/src/features/settings/ClaudeAccounts.tsx +++ b/apps/mobile/src/features/settings/ClaudeAccounts.tsx @@ -10,7 +10,7 @@ import { type ServerProvider, } from "@t3tools/contracts"; import { useRef, useState } from "react"; -import { TextInput, View } from "react-native"; +import { TextInput, useWindowDimensions, View } from "react-native"; import * as Dialog from "../../components/ui/Dialog"; import { AppText as Text } from "../../components/ui/AppText"; @@ -68,15 +68,18 @@ export function ClaudeAccount({ const instance = environment.serverConfig.settings.providerInstances[provider.instanceId]; const configDir = claudeConfigDir(instance); const name = provider.displayName ?? "Claude"; + // A signed-in account needs no label; the row only speaks up when something is off. const status = !provider.enabled ? "Turned off" : provider.auth.status === "authenticated" - ? "Signed in" + ? null : provider.auth.status === "unauthenticated" ? "Not signed in" : !provider.installed ? "Not installed" - : null; + : "Sign-in not checked"; + // Matches ListRowLayout: large text stacks the status below instead of squeezing the name. + const stacked = useWindowDimensions().fontScale >= 1.5; const removable = provider.instanceId !== DEFAULT_CLAUDE_INSTANCE_ID && !isManagedSettingPath( @@ -114,14 +117,26 @@ export function ClaudeAccount({ } return ( - - - + + + {name} - - {[status, configDir || "Default config folder"].filter(Boolean).join(" · ")} - + {status ? ( + + {status} + + ) : null} {editing ? null : ( setAdding(false)} /> ) : ( - setAdding(true)} - /> + setAdding(true)} /> )} ); diff --git a/apps/mobile/src/features/settings/SettingsProviderAccountsRouteScreen.tsx b/apps/mobile/src/features/settings/SettingsProviderAccountsRouteScreen.tsx index a3b698dd9aff..f7e6be33055e 100644 --- a/apps/mobile/src/features/settings/SettingsProviderAccountsRouteScreen.tsx +++ b/apps/mobile/src/features/settings/SettingsProviderAccountsRouteScreen.tsx @@ -243,22 +243,23 @@ function ProviderAccount({ const usesCredentials = provider.driver === "antigravity" && (provider.auth.type === "gemini-api-key" || provider.auth.type === "agent-platform"); - const status = - active || state?.phase === "failed" || state?.phase === "cancelled" - ? state.message - : !provider.enabled - ? "Turned off" - : signedIn - ? "Signed in" - : isDiscovering - ? "Discovering sign-in methods…" - : needsExternalSetup - ? "No in-app sign-in advertised. Follow the provider's docs to finish setup." - : !provider.installed - ? "Not installed" - : usesCredentials - ? "Connect to load models" - : "Not signed in"; + const showsFlow = active || state?.phase === "failed" || state?.phase === "cancelled"; + const turnedOff = !showsFlow && !provider.enabled; + const status = showsFlow + ? state.message + : turnedOff + ? "Turned off" + : signedIn + ? "Signed in" + : isDiscovering + ? "Discovering sign-in methods…" + : needsExternalSetup + ? "No in-app sign-in advertised. Follow the provider's docs to finish setup." + : !provider.installed + ? "Not installed" + : usesCredentials + ? "Connect to load models" + : "Not signed in"; // A provider with several sign-in methods picks one from a menu on the same control. const methodActions: MenuAction[] = methods.map((method) => ({ id: `method:${method.id}`, @@ -402,10 +403,18 @@ function ProviderAccount({ className={ stacked ? "min-h-16 items-start gap-3 px-4 py-3" - : "min-h-16 flex-row items-center gap-3 px-4 py-3" + : turnedOff + ? "min-h-14 flex-row items-center gap-3 px-4 py-1.5" + : "min-h-16 flex-row items-center gap-3 px-4 py-3" } > - + {trailing} {interaction?.type === "deviceCode" || @@ -511,15 +520,25 @@ function ProviderAccountSummary({ name, status, email, + inline, }: { readonly name: string; readonly status: string | null | undefined; readonly email: string | undefined; + /** Puts a short status beside the name, so the row is one line tall. */ + readonly inline: boolean; }) { const [revealed, setRevealed] = useState(false); + const layout = inline + ? "min-w-0 shrink grow flex-row items-center gap-3" + : "min-w-0 shrink grow gap-0.5"; const content = ( <> - + {name} @@ -532,7 +551,7 @@ function ProviderAccountSummary({ {content} @@ -544,7 +563,7 @@ function ProviderAccountSummary({ accessibilityLabel={[name, status, revealed ? email : null].filter(Boolean).join(", ")} accessibilityHint={revealed ? "Hides the account email" : "Reveals the account email"} onPress={() => setRevealed((value) => !value)} - className="min-w-0 shrink grow gap-0.5" + className={layout} > {content}