Select account redesign (#8905)

* new designs for select account

* tweak web styles

* add logged out indicator

* unify helper function

* move error, try catch

src/components/AccountList.tsx

@@ -5,18 +5,20 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useActorStatus} from '#/lib/actor-status'
+import {isJwtExpired} from '#/lib/jwt'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {useProfilesQuery} from '#/state/queries/profile'
 import {type SessionAccount, useSession} from '#/state/session'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
-import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {Button} from '#/components/Button'
-import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
+import {CheckThick_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronIcon} from '#/components/icons/Chevron'
+import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
+import {Text} from '#/components/Typography'
 import {useSimpleVerificationState} from '#/components/verification'
 import {VerificationCheck} from '#/components/verification/VerificationCheck'
-import {Button} from './Button'
-import {Text} from './Typography'
 
 export function AccountList({
   onSelectAccount,
@@ -44,9 +46,9 @@ export function AccountList({
     <View
       pointerEvents={pendingDid ? 'none' : 'auto'}
       style={[
-        a.rounded_md,
+        a.rounded_lg,
         a.overflow_hidden,
-        {borderWidth: 1},
+        a.border,
         t.atoms.border_contrast_low,
       ]}>
       {accounts.map(account => (
@@ -58,7 +60,7 @@ export function AccountList({
             isCurrentAccount={account.did === currentAccount?.did}
             isPendingAccount={account.did === pendingDid}
           />
-          <View style={[{borderBottomWidth: 1}, t.atoms.border_contrast_low]} />
+          <View style={[a.border_b, t.atoms.border_contrast_low]} />
         </React.Fragment>
       ))}
       <Button
@@ -72,22 +74,25 @@ export function AccountList({
               a.flex_1,
               a.flex_row,
               a.align_center,
-              {height: 48},
+              a.p_lg,
+              a.gap_sm,
               (hovered || pressed) && t.atoms.bg_contrast_25,
             ]}>
-            <Text
+            <View
               style={[
-                a.font_semi_bold,
+                t.atoms.bg_contrast_25,
-                a.flex_1,
+                a.rounded_full,
-                a.flex_row,
+                {width: 48, height: 48},
-                a.py_sm,
+                a.justify_center,
-                a.leading_tight,
+                a.align_center,
-                t.atoms.text_contrast_medium,
+                (hovered || pressed) && t.atoms.bg_contrast_50,
-                {paddingLeft: 56},
               ]}>
+              <PlusIcon style={[t.atoms.text_contrast_low]} size="md" />
+            </View>
+            <Text style={[a.flex_1, a.leading_tight, a.text_md, a.font_medium]}>
               {otherLabel ?? <Trans>Other account</Trans>}
             </Text>
-            <Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
+            <ChevronIcon size="md" style={[t.atoms.text_contrast_low]} />
           </View>
         )}
       </Button>
@@ -117,6 +122,8 @@ function AccountItem({
     onSelect(account)
   }, [account, onSelect])
 
+  const isLoggedOut = !account.refreshJwt || isJwtExpired(account.refreshJwt)
+
   return (
     <Button
       testID={`chooseAccountBtn-${account.handle}`}
@@ -134,14 +141,13 @@ function AccountItem({
             a.flex_1,
             a.flex_row,
             a.align_center,
-            a.px_md,
+            a.p_lg,
             a.gap_sm,
-            {height: 56},
             (hovered || pressed || isPendingAccount) && t.atoms.bg_contrast_25,
           ]}>
           <UserAvatar
             avatar={profile?.avatar}
-            size={36}
+            size={48}
             type={profile?.associated?.labeler ? 'labeler' : 'user'}
             live={live}
             hideLiveBadge
@@ -151,7 +157,7 @@ function AccountItem({
             <View style={[a.flex_row, a.align_center, a.gap_xs]}>
               <Text
                 emoji
-                style={[a.font_semi_bold, a.leading_tight]}
+                style={[a.font_medium, a.leading_tight, a.text_md]}
                 numberOfLines={1}>
                 {sanitizeDisplayName(
                   profile?.displayName || profile?.handle || account.handle,
@@ -166,15 +172,43 @@ function AccountItem({
                 </View>
               )}
             </View>
-            <Text style={[a.leading_tight, t.atoms.text_contrast_medium]}>
+            <Text
+              style={[
+                a.leading_tight,
+                t.atoms.text_contrast_medium,
+                a.text_sm,
+              ]}>
               {sanitizeHandle(account.handle, '@')}
             </Text>
+            {isLoggedOut && (
+              <Text
+                style={[
+                  a.leading_tight,
+                  a.text_xs,
+                  a.italic,
+                  t.atoms.text_contrast_medium,
+                ]}>
+                <Trans>Logged out</Trans>
+              </Text>
+            )}
           </View>
 
           {isCurrentAccount ? (
-            <Check size="sm" style={[{color: t.palette.positive_500}]} />
+            <View
+              style={[
+                {
+                  width: 20,
+                  height: 20,
+                  backgroundColor: t.palette.positive_500,
+                },
+                a.rounded_full,
+                a.justify_center,
+                a.align_center,
+              ]}>
+              <CheckIcon size="xs" style={[{color: t.palette.white}]} />
+            </View>
           ) : (
-            <Chevron size="sm" style={[t.atoms.text]} />
+            <ChevronIcon size="md" style={[t.atoms.text_contrast_low]} />
           )}
         </View>
       )}

src/components/dialogs/SwitchAccount.tsx

@@ -41,7 +41,7 @@ export function SwitchAccountDialog({
   }, [setShowLoggedOut, control])
 
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <Dialog.ScrollableInner label={_(msg`Switch Account`)}>
         <View style={[a.gap_lg]}>

src/lib/jwt.ts

@@ -0,0 +1,23 @@
+import {jwtDecode} from 'jwt-decode'
+
+import {logger} from '#/logger'
+
+/**
+ * Simple check if a JWT token has expired. Does *not* validate the token or check for revocation status,
+ * just checks the expiration time.
+ *
+ * @param token The JWT token to check.
+ * @returns `true` if the token has expired, `false` otherwise.
+ */
+export function isJwtExpired(token: string) {
+  try {
+    const payload = jwtDecode(token)
+
+    if (!payload.exp) return true
+    const now = Math.floor(Date.now() / 1000)
+    return now >= payload.exp
+  } catch {
+    logger.error(`session: could not decode jwt`)
+    return true // invalid token or parse error
+  }
+}

src/screens/Login/ChooseAccountForm.tsx

@@ -8,7 +8,7 @@ import {logger} from '#/logger'
 import {type SessionAccount, useSession, useSessionApi} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a} from '#/alf'
+import {atoms as a, web} from '#/alf'
 import {AccountList} from '#/components/AccountList'
 import {Button, ButtonText} from '#/components/Button'
 import * as TextField from '#/components/forms/TextField'
@@ -74,7 +74,8 @@ export const ChooseAccountForm = ({
   return (
     <FormContainer
       testID="chooseAccountForm"
-      titleText={<Trans>Select account</Trans>}>
+      titleText={<Trans>Select account</Trans>}
+      style={web([a.py_2xl])}>
       <View>
         <TextField.LabelText>
           <Trans>Sign in as...</Trans>

src/state/session/util.ts

@@ -1,7 +1,7 @@
 import {jwtDecode} from 'jwt-decode'
 
+import {isJwtExpired} from '#/lib/jwt'
 import {hasProp} from '#/lib/type-guards'
-import {logger} from '#/logger'
 import * as persisted from '#/state/persisted'
 import {type SessionAccount} from './types'
 
@@ -22,16 +22,9 @@ export function isSignupQueued(accessJwt: string | undefined) {
 }
 
 export function isSessionExpired(account: SessionAccount) {
-  try {
+  if (account.accessJwt) {
-    if (account.accessJwt) {
+    return isJwtExpired(account.accessJwt)
-      const decoded = jwtDecode(account.accessJwt)
+  } else {
-      if (decoded.exp) {
+    return true
-        const didExpire = Date.now() >= decoded.exp * 1000
-        return didExpire
-      }
-    }
-  } catch (e) {
-    logger.error(`session: could not decode jwt`)
   }
-  return true
 }