Use ALF for the account quick switch dialog (#3327)

* Use ALF for account quick switch

* clean up modal type

* add haptics to dialog opening

* move account list to it's own component and share

* make tick slightly darker

src/components/dialogs/BirthDateSettings.tsx

@@ -1,23 +1,23 @@
 import React from 'react'
-import {useLingui} from '@lingui/react'
-import {Trans, msg} from '@lingui/macro'
 import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import * as Dialog from '#/components/Dialog'
-import {Text} from '../Typography'
-import {DateInput} from '#/view/com/util/forms/DateInput'
+import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
+import {isIOS, isWeb} from '#/platform/detection'
 import {
   usePreferencesQuery,
-  usePreferencesSetBirthDateMutation,
   UsePreferencesQueryResponse,
+  usePreferencesSetBirthDateMutation,
 } from '#/state/queries/preferences'
-import {Button, ButtonIcon, ButtonText} from '../Button'
-import {atoms as a, useTheme} from '#/alf'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
-import {cleanError} from '#/lib/strings/errors'
-import {isIOS, isWeb} from '#/platform/detection'
+import {DateInput} from '#/view/com/util/forms/DateInput'
+import {atoms as a, useTheme} from '#/alf'
+import * as Dialog from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
+import {Button, ButtonIcon, ButtonText} from '../Button'
+import {Text} from '../Typography'
 
 export function BirthDateSettingsDialog({
   control,

src/components/dialogs/SwitchAccount.tsx

@@ -0,0 +1,61 @@
+import React, {useCallback} from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
+import {type SessionAccount, useSession} from '#/state/session'
+import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import {useCloseAllActiveElements} from '#/state/util'
+import {atoms as a} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import {AccountList} from '../AccountList'
+import {Text} from '../Typography'
+
+export function SwitchAccountDialog({
+  control,
+}: {
+  control: Dialog.DialogControlProps
+}) {
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const {onPressSwitchAccount} = useAccountSwitcher()
+  const {setShowLoggedOut} = useLoggedOutViewControls()
+  const closeAllActiveElements = useCloseAllActiveElements()
+
+  const onSelectAccount = useCallback(
+    (account: SessionAccount) => {
+      if (account.did === currentAccount?.did) {
+        control.close()
+      } else {
+        onPressSwitchAccount(account, 'SwitchAccount')
+      }
+    },
+    [currentAccount, control, onPressSwitchAccount],
+  )
+
+  const onPressAddAccount = useCallback(() => {
+    setShowLoggedOut(true)
+    closeAllActiveElements()
+  }, [setShowLoggedOut, closeAllActiveElements])
+
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner label={_(msg`Switch Account`)}>
+        <View style={[a.gap_lg]}>
+          <Text style={[a.text_2xl, a.font_bold]}>
+            <Trans>Switch Account</Trans>
+          </Text>
+
+          <AccountList
+            onSelectAccount={onSelectAccount}
+            onSelectOther={onPressAddAccount}
+            otherLabel={_(msg`Add account`)}
+          />
+        </View>
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}