Pare down session as much as possible

src/view/com/auth/login/ChooseAccountForm.tsx

@@ -5,7 +5,6 @@ import {useAnalytics} from 'lib/analytics/analytics'
 import {Text} from '../../util/text/Text'
 import {UserAvatar} from '../../util/UserAvatar'
 import {s} from 'lib/styles'
-import {AccountData} from 'state/models/session'
 import {usePalette} from 'lib/hooks/usePalette'
 import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -62,7 +61,7 @@ export const ChooseAccountForm = ({
   onSelectAccount,
   onPressBack,
 }: {
-  onSelectAccount: (account?: AccountData) => void
+  onSelectAccount: (account?: SessionAccount) => void
   onPressBack: () => void
 }) => {
   const {track, screen} = useAnalytics()

src/view/com/auth/login/Login.tsx

@@ -4,7 +4,6 @@ import {useAnalytics} from 'lib/analytics/analytics'
 import {LoggedOutLayout} from 'view/com/util/layouts/LoggedOutLayout'
 import {useStores, DEFAULT_SERVICE} from 'state/index'
 import {ServiceDescription} from 'state/models/session'
-import {AccountData} from 'state/models/session'
 import {usePalette} from 'lib/hooks/usePalette'
 import {logger} from '#/logger'
 import {ChooseAccountForm} from './ChooseAccountForm'
@@ -14,7 +13,7 @@ import {SetNewPasswordForm} from './SetNewPasswordForm'
 import {PasswordUpdatedForm} from './PasswordUpdatedForm'
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
-import {useSession} from '#/state/session'
+import {useSession, SessionAccount} from '#/state/session'
 
 enum Forms {
   Login,
@@ -41,7 +40,7 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
     accounts.length ? Forms.ChooseAccount : Forms.Login,
   )
 
-  const onSelectAccount = (account?: AccountData) => {
+  const onSelectAccount = (account?: SessionAccount) => {
     if (account?.service) {
       setServiceUrl(account.service)
     }

src/view/com/feeds/FeedPage.tsx

@@ -23,6 +23,7 @@ import useAppState from 'react-native-appstate-hook'
 import {logger} from '#/logger'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useSession} from '#/state/session'
 
 export const FeedPage = observer(function FeedPageImpl({
   testID,
@@ -38,6 +39,7 @@ export const FeedPage = observer(function FeedPageImpl({
   renderEndOfFeed?: () => JSX.Element
 }) {
   const store = useStores()
+  const {isSandbox} = useSession()
   const pal = usePalette('default')
   const {_} = useLingui()
   const {isDesktop} = useWebMediaQueries()
@@ -140,7 +142,7 @@ export const FeedPage = observer(function FeedPageImpl({
             style={[pal.text, {fontWeight: 'bold'}]}
             text={
               <>
-                {store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
+                {isSandbox ? 'SANDBOX' : 'Bluesky'}{' '}
                 {hasNew && (
                   <View
                     style={{
@@ -173,7 +175,16 @@ export const FeedPage = observer(function FeedPageImpl({
       )
     }
     return <></>
-  }, [isDesktop, pal.view, pal.text, pal.textLight, store, hasNew, _])
+  }, [
+    isDesktop,
+    pal.view,
+    pal.text,
+    pal.textLight,
+    store,
+    hasNew,
+    _,
+    isSandbox,
+  ])
 
   return (
     <View testID={testID} style={s.h100pct}>

src/view/com/modals/SwitchAccount.tsx

@@ -64,7 +64,7 @@ function SwitchAccountCard({account}: {account: SessionAccount}) {
           </Text>
         </TouchableOpacity>
       ) : (
-        <AccountDropdownBtn handle={account.handle} />
+        <AccountDropdownBtn account={account} />
       )}
     </View>
   )

src/view/com/pager/FeedsTabBarMobile.tsx

@@ -19,12 +19,14 @@ import {useLingui} from '@lingui/react'
 import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
 import {useSetDrawerOpen} from '#/state/shell/drawer-open'
 import {useShellLayout} from '#/state/shell/shell-layout'
+import {useSession} from '#/state/session'
 
 export const FeedsTabBar = observer(function FeedsTabBarImpl(
   props: RenderTabBarFnProps & {testID?: string; onPressSelected: () => void},
 ) {
   const pal = usePalette('default')
   const store = useStores()
+  const {isSandbox} = useSession()
   const {_} = useLingui()
   const setDrawerOpen = useSetDrawerOpen()
   const items = useHomeTabs(store.preferences.pinnedFeeds)
@@ -59,7 +61,7 @@ export const FeedsTabBar = observer(function FeedsTabBarImpl(
           </TouchableOpacity>
         </View>
         <Text style={[brandBlue, s.bold, styles.title]}>
-          {store.session.isSandbox ? 'SANDBOX' : 'Bluesky'}
+          {isSandbox ? 'SANDBOX' : 'Bluesky'}
         </Text>
         <View style={[pal.view]}>
           <Link

src/view/com/testing/TestCtrls.e2e.tsx

@@ -3,6 +3,7 @@ import {Pressable, View} from 'react-native'
 import {useStores} from 'state/index'
 import {navigate} from '../../../Navigation'
 import {useModalControls} from '#/state/modals'
+import {useSessionApi} from '#/state/session'
 
 /**
  * This utility component is only included in the test simulator
@@ -14,16 +15,17 @@ const BTN = {height: 1, width: 1, backgroundColor: 'red'}
 
 export function TestCtrls() {
   const store = useStores()
+  const {logout, login} = useSessionApi()
   const {openModal} = useModalControls()
   const onPressSignInAlice = async () => {
-    await store.session.login({
+    await login({
       service: 'http://localhost:3000',
       identifier: 'alice.test',
       password: 'hunter2',
     })
   }
   const onPressSignInBob = async () => {
-    await store.session.login({
+    await login({
       service: 'http://localhost:3000',
       identifier: 'bob.test',
       password: 'hunter2',
@@ -45,7 +47,7 @@ export function TestCtrls() {
       />
       <Pressable
         testID="e2eSignOut"
-        onPress={() => store.session.logout()}
+        onPress={() => logout()}
         accessibilityRole="button"
         style={BTN}
       />

src/view/com/util/AccountDropdownBtn.tsx

@@ -8,11 +8,11 @@ import {s} from 'lib/styles'
 import {usePalette} from 'lib/hooks/usePalette'
 import {DropdownItem, NativeDropdown} from './forms/NativeDropdown'
 import * as Toast from '../../com/util/Toast'
-import {useSessionApi} from '#/state/session'
+import {useSessionApi, SessionAccount} from '#/state/session'
 import {useLingui} from '@lingui/react'
 import {msg} from '@lingui/macro'
 
-export function AccountDropdownBtn({handle}: {handle: string}) {
+export function AccountDropdownBtn({account}: {account: SessionAccount}) {
   const pal = usePalette('default')
   const {removeAccount} = useSessionApi()
   const {_} = useLingui()
@@ -21,7 +21,7 @@ export function AccountDropdownBtn({handle}: {handle: string}) {
     {
       label: 'Remove account',
       onPress: () => {
-        removeAccount({handle})
+        removeAccount(account)
         Toast.show('Account removed from quick access')
       },
       icon: {

src/view/com/util/PostSandboxWarning.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
 import {Text} from './text/Text'
-import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useSession} from '#/state/session'
 
 export function PostSandboxWarning() {
-  const store = useStores()
+  const {isSandbox} = useSession()
   const pal = usePalette('default')
-  if (store.session.isSandbox) {
+  if (isSandbox) {
     return (
       <View style={styles.container}>
         <Text

src/view/screens/Settings.tsx

@@ -102,7 +102,7 @@ function SettingsAccountCard({account}: {account: SessionAccount}) {
           </Text>
         </TouchableOpacity>
       ) : (
-        <AccountDropdownBtn handle={account.handle} />
+        <AccountDropdownBtn account={account} />
       )}
     </View>
   )

src/view/shell/Drawer.tsx

@@ -47,6 +47,57 @@ import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useSetDrawerOpen} from '#/state/shell'
 import {useModalControls} from '#/state/modals'
+import {useSession, SessionAccount} from '#/state/session'
+import {useProfileQuery} from '#/state/queries/profile'
+
+export function DrawerProfileCard({
+  account,
+  onPressProfile,
+}: {
+  account: SessionAccount
+  onPressProfile: () => void
+}) {
+  const {_} = useLingui()
+  const pal = usePalette('default')
+  const {data: profile} = useProfileQuery({did: account.did})
+
+  return (
+    <TouchableOpacity
+      testID="profileCardButton"
+      accessibilityLabel={_(msg`Profile`)}
+      accessibilityHint="Navigates to your profile"
+      onPress={onPressProfile}>
+      <UserAvatar
+        size={80}
+        avatar={profile?.avatar}
+        // See https://github.com/bluesky-social/social-app/pull/1801:
+        usePlainRNImage={true}
+      />
+      <Text
+        type="title-lg"
+        style={[pal.text, s.bold, styles.profileCardDisplayName]}
+        numberOfLines={1}>
+        {profile?.displayName || account.handle}
+      </Text>
+      <Text
+        type="2xl"
+        style={[pal.textLight, styles.profileCardHandle]}
+        numberOfLines={1}>
+        @{account.handle}
+      </Text>
+      <Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
+        <Text type="xl-medium" style={pal.text}>
+          {formatCountShortOnly(profile?.followersCount ?? 0)}
+        </Text>{' '}
+        {pluralize(profile?.followersCount || 0, 'follower')} &middot;{' '}
+        <Text type="xl-medium" style={pal.text}>
+          {formatCountShortOnly(profile?.followsCount ?? 0)}
+        </Text>{' '}
+        following
+      </Text>
+    </TouchableOpacity>
+  )
+}
 
 export const DrawerContent = observer(function DrawerContentImpl() {
   const theme = useTheme()
@@ -58,6 +109,7 @@ export const DrawerContent = observer(function DrawerContentImpl() {
   const {track} = useAnalytics()
   const {isAtHome, isAtSearch, isAtFeeds, isAtNotifications, isAtMyProfile} =
     useNavigationTabState()
+  const {currentAccount} = useSession()
 
   const {notifications} = store.me
 
@@ -135,11 +187,11 @@ export const DrawerContent = observer(function DrawerContentImpl() {
     track('Menu:FeedbackClicked')
     Linking.openURL(
       FEEDBACK_FORM_URL({
-        email: store.session.currentSession?.email,
-        handle: store.session.currentSession?.handle,
+        email: currentAccount?.email,
+        handle: currentAccount?.handle,
       }),
     )
-  }, [track, store.session.currentSession])
+  }, [track, currentAccount])
 
   const onPressHelp = React.useCallback(() => {
     track('Menu:HelpClicked')
@@ -159,42 +211,12 @@ export const DrawerContent = observer(function DrawerContentImpl() {
       <SafeAreaView style={s.flex1}>
         <ScrollView style={styles.main}>
           <View style={{}}>
-            <TouchableOpacity
-              testID="profileCardButton"
-              accessibilityLabel={_(msg`Profile`)}
-              accessibilityHint="Navigates to your profile"
-              onPress={onPressProfile}>
-              <UserAvatar
-                size={80}
-                avatar={store.me.avatar}
-                // See https://github.com/bluesky-social/social-app/pull/1801:
-                usePlainRNImage={true}
+            {currentAccount && (
+              <DrawerProfileCard
+                account={currentAccount}
+                onPressProfile={onPressProfile}
               />
-              <Text
-                type="title-lg"
-                style={[pal.text, s.bold, styles.profileCardDisplayName]}
-                numberOfLines={1}>
-                {store.me.displayName || store.me.handle}
-              </Text>
-              <Text
-                type="2xl"
-                style={[pal.textLight, styles.profileCardHandle]}
-                numberOfLines={1}>
-                @{store.me.handle}
-              </Text>
-              <Text
-                type="xl"
-                style={[pal.textLight, styles.profileCardFollowers]}>
-                <Text type="xl-medium" style={pal.text}>
-                  {formatCountShortOnly(store.me.followersCount ?? 0)}
-                </Text>{' '}
-                {pluralize(store.me.followersCount || 0, 'follower')} &middot;{' '}
-                <Text type="xl-medium" style={pal.text}>
-                  {formatCountShortOnly(store.me.followsCount ?? 0)}
-                </Text>{' '}
-                following
-              </Text>
-            </TouchableOpacity>
+            )}
           </View>
 
           <InviteCodes style={{paddingLeft: 0}} />

src/view/shell/desktop/RightNav.tsx

@@ -17,10 +17,9 @@ import {useModalControls} from '#/state/modals'
 import {useSession} from '#/state/session'
 
 export const DesktopRightNav = observer(function DesktopRightNavImpl() {
-  const store = useStores()
   const pal = usePalette('default')
   const palError = usePalette('error')
-  const {hasSession, currentAccount} = useSession()
+  const {isSandbox, hasSession, currentAccount} = useSession()
 
   const {isTablet} = useWebMediaQueries()
   if (isTablet) {
@@ -32,7 +31,7 @@ export const DesktopRightNav = observer(function DesktopRightNavImpl() {
       {hasSession && <DesktopSearch />}
       {hasSession && <DesktopFeeds />}
       <View style={styles.message}>
-        {store.session.isSandbox ? (
+        {isSandbox ? (
           <View style={[palError.view, styles.messageLine, s.p10]}>
             <Text type="md" style={[palError.text, s.bold]}>
               SANDBOX. Posts and accounts are not permanent.