Merge branch 'main' into hailey/email-verif

.github/workflows/lint.yml

@@ -16,6 +16,10 @@ jobs:
     steps:
       - name: Check out Git repository
         uses: actions/checkout@v3
+      - name: Install node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
       - name: Yarn install
         uses: Wandalen/wretry.action@master
         with:

.nvmrc

@@ -1 +1 @@
-18
+20

Dockerfile

@@ -5,7 +5,7 @@ WORKDIR /usr/src/social-app
 ENV DEBIAN_FRONTEND=noninteractive
 
 # Node
-ENV NODE_VERSION=18
+ENV NODE_VERSION=20
 ENV NVM_DIR=/usr/share/nvm
 
 # Go
@@ -17,7 +17,7 @@ ENV GOEXPERIMENT="loopvar"
 
 # Expo
 ARG EXPO_PUBLIC_BUNDLE_IDENTIFIER
-ENV EXPO_PUBLIC_BUNDLE_IDENTIFIER ${EXPO_PUBLIC_BUNDLE_IDENTIFIER:-dev}
+ENV EXPO_PUBLIC_BUNDLE_IDENTIFIER=${EXPO_PUBLIC_BUNDLE_IDENTIFIER:-dev}
 
 COPY . .
 

app.config.js

@@ -99,6 +99,8 @@ module.exports = function (config) {
           dark: DARK_SPLASH_CONFIG,
         },
         entitlements: {
+          'com.apple.developer.kernel.increased-memory-limit': true,
+          'com.apple.developer.kernel.extended-virtual-addressing': true,
           'com.apple.security.application-groups': 'group.app.bsky',
         },
         privacyManifests: {

modules/bottom-sheet/ios/SheetViewController.swift

@@ -64,11 +64,14 @@ class SheetViewController: UIViewController {
 
   func updateDetents(contentHeight: CGFloat, preventExpansion: Bool) {
     if let sheet = self.sheetPresentationController {
-      sheet.animateChanges {
-        self.setDetents(contentHeight: contentHeight, preventExpansion: preventExpansion)
-        if #available(iOS 16.0, *) {
-          sheet.invalidateDetents()
-        }
+      // Capture `self` weakly to prevent retain cycles.
+      // Also, capture `sheet` weakly to avoid potential strong references held by animateChanges.
+      sheet.animateChanges { [weak self, weak sheet] in
+          guard let weakSelf = self, let weakSheet = sheet else { return }
+          weakSelf.setDetents(contentHeight: contentHeight, preventExpansion: preventExpansion)
+          if #available(iOS 16.0, *) {
+              weakSheet.invalidateDetents()
+          }
       }
     }
   }

modules/bottom-sheet/src/BottomSheet.tsx

@@ -1,24 +1 @@
-import React from 'react'
-
-import {BottomSheetViewProps} from './BottomSheet.types'
-import {BottomSheetNativeComponent} from './BottomSheetNativeComponent'
-import {useBottomSheetPortal_INTERNAL} from './BottomSheetPortal'
-
-export const BottomSheet = React.forwardRef<
-  BottomSheetNativeComponent,
-  BottomSheetViewProps
->(function BottomSheet(props, ref) {
-  const Portal = useBottomSheetPortal_INTERNAL()
-
-  if (__DEV__ && !Portal) {
-    throw new Error(
-      'BottomSheet: You need to wrap your component tree with a <BottomSheetPortalProvider> to use the bottom sheet.',
-    )
-  }
-
-  return (
-    <Portal>
-      <BottomSheetNativeComponent {...props} ref={ref} />
-    </Portal>
-  )
-})
+export {BottomSheetNativeComponent as BottomSheet} from './BottomSheetNativeComponent'

modules/bottom-sheet/src/BottomSheetNativeComponent.tsx

@@ -11,6 +11,7 @@ import {requireNativeModule, requireNativeViewManager} from 'expo-modules-core'
 
 import {BottomSheetState, BottomSheetViewProps} from './BottomSheet.types'
 import {BottomSheetPortalProvider} from './BottomSheetPortal'
+import {Context as PortalContext} from './BottomSheetPortal'
 
 const screenHeight = Dimensions.get('screen').height
 
@@ -34,6 +35,8 @@ export class BottomSheetNativeComponent extends React.Component<
 > {
   ref = React.createRef<any>()
 
+  static contextType = PortalContext
+
   constructor(props: BottomSheetViewProps) {
     super(props)
     this.state = {
@@ -67,6 +70,17 @@ export class BottomSheetNativeComponent extends React.Component<
   }
 
   render() {
+    const Portal = this.context as React.ContextType<typeof PortalContext>
+    if (!Portal) {
+      throw new Error(
+        'BottomSheet: You need to wrap your component tree with a <BottomSheetPortalProvider> to use the bottom sheet.',
+      )
+    }
+
+    if (!this.state.open) {
+      return null
+    }
+
     const {children, backgroundColor, ...rest} = this.props
     const cornerRadius = rest.cornerRadius ?? 0
 
@@ -83,43 +97,41 @@ export class BottomSheetNativeComponent extends React.Component<
       }
     }
 
-    if (!this.state.open) {
-      return null
-    }
-
     return (
-      <NativeView
-        {...rest}
-        onStateChange={this.onStateChange}
-        ref={this.ref}
-        style={{
-          position: 'absolute',
-          height: screenHeight,
-          width: '100%',
-        }}
-        containerBackgroundColor={backgroundColor}>
-        <View
-          style={[
-            {
-              flex: 1,
-              backgroundColor,
-            },
-            Platform.OS === 'android' && {
-              borderTopLeftRadius: cornerRadius,
-              borderTopRightRadius: cornerRadius,
-            },
-            extraStyles,
-          ]}>
+      <Portal>
+        <NativeView
+          {...rest}
+          onStateChange={this.onStateChange}
+          ref={this.ref}
+          style={{
+            position: 'absolute',
+            height: screenHeight,
+            width: '100%',
+          }}
+          containerBackgroundColor={backgroundColor}>
           <View
-            onLayout={e => {
-              const {height} = e.nativeEvent.layout
-              this.setState({viewHeight: height})
-              this.updateLayout()
-            }}>
-            <BottomSheetPortalProvider>{children}</BottomSheetPortalProvider>
+            style={[
+              {
+                flex: 1,
+                backgroundColor,
+              },
+              Platform.OS === 'android' && {
+                borderTopLeftRadius: cornerRadius,
+                borderTopRightRadius: cornerRadius,
+              },
+              extraStyles,
+            ]}>
+            <View
+              onLayout={e => {
+                const {height} = e.nativeEvent.layout
+                this.setState({viewHeight: height})
+                this.updateLayout()
+              }}>
+              <BottomSheetPortalProvider>{children}</BottomSheetPortalProvider>
+            </View>
           </View>
-        </View>
-      </NativeView>
+        </NativeView>
+      </Portal>
     )
   }
 }

modules/bottom-sheet/src/BottomSheetPortal.tsx

@@ -4,7 +4,7 @@ import {createPortalGroup_INTERNAL} from './lib/Portal'
 
 type PortalContext = React.ElementType<{children: React.ReactNode}>
 
-const Context = React.createContext({} as PortalContext)
+export const Context = React.createContext({} as PortalContext)
 
 export const useBottomSheetPortal_INTERNAL = () => React.useContext(Context)
 

package.json

@@ -3,7 +3,7 @@
   "version": "1.94.0",
   "private": true,
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   },
   "packageManager": "yarn@1.22.19",
   "scripts": {
@@ -103,7 +103,7 @@
     "@tiptap/suggestion": "^2.6.6",
     "@types/invariant": "^2.2.37",
     "@types/lodash.throttle": "^4.1.9",
-    "@types/node": "^18.16.2",
+    "@types/node": "^20.14.3",
     "@zxing/text-encoding": "^0.9.0",
     "array.prototype.findlast": "^1.2.3",
     "await-lock": "^2.2.2",

src/Navigation.tsx

@@ -40,14 +40,11 @@ import {
   shouldRequestEmailConfirmation,
   snoozeEmailConfirmationPrompt,
 } from '#/state/shell/reminders'
-import {AccessibilitySettingsScreen} from '#/view/screens/AccessibilitySettings'
-import {AppPasswords} from '#/view/screens/AppPasswords'
 import {CommunityGuidelinesScreen} from '#/view/screens/CommunityGuidelines'
 import {CopyrightPolicyScreen} from '#/view/screens/CopyrightPolicy'
 import {DebugModScreen} from '#/view/screens/DebugMod'
 import {FeedsScreen} from '#/view/screens/Feeds'
 import {HomeScreen} from '#/view/screens/Home'
-import {LanguageSettingsScreen} from '#/view/screens/LanguageSettings'
 import {ListsScreen} from '#/view/screens/Lists'
 import {LogScreen} from '#/view/screens/Log'
 import {ModerationBlockedAccounts} from '#/view/screens/ModerationBlockedAccounts'
@@ -56,9 +53,6 @@ import {ModerationMutedAccounts} from '#/view/screens/ModerationMutedAccounts'
 import {NotFoundScreen} from '#/view/screens/NotFound'
 import {NotificationsScreen} from '#/view/screens/Notifications'
 import {PostThreadScreen} from '#/view/screens/PostThread'
-import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds'
-import {PreferencesFollowingFeed} from '#/view/screens/PreferencesFollowingFeed'
-import {PreferencesThreads} from '#/view/screens/PreferencesThreads'
 import {PrivacyPolicyScreen} from '#/view/screens/PrivacyPolicy'
 import {ProfileScreen} from '#/view/screens/Profile'
 import {ProfileFeedScreen} from '#/view/screens/ProfileFeed'
@@ -68,7 +62,6 @@ import {ProfileFollowsScreen} from '#/view/screens/ProfileFollows'
 import {ProfileListScreen} from '#/view/screens/ProfileList'
 import {SavedFeeds} from '#/view/screens/SavedFeeds'
 import {SearchScreen} from '#/view/screens/Search'
-import {SettingsScreen} from '#/view/screens/Settings'
 import {Storybook} from '#/view/screens/Storybook'
 import {SupportScreen} from '#/view/screens/Support'
 import {TermsOfServiceScreen} from '#/view/screens/TermsOfService'
@@ -96,9 +89,16 @@ import {useTheme} from '#/alf'
 import {router} from '#/routes'
 import {Referrer} from '../modules/expo-bluesky-swiss-army'
 import {AboutSettingsScreen} from './screens/Settings/AboutSettings'
+import {AccessibilitySettingsScreen} from './screens/Settings/AccessibilitySettings'
 import {AccountSettingsScreen} from './screens/Settings/AccountSettings'
+import {AppPasswordsScreen} from './screens/Settings/AppPasswords'
 import {ContentAndMediaSettingsScreen} from './screens/Settings/ContentAndMediaSettings'
+import {ExternalMediaPreferencesScreen} from './screens/Settings/ExternalMediaPreferences'
+import {FollowingFeedPreferencesScreen} from './screens/Settings/FollowingFeedPreferences'
+import {LanguageSettingsScreen} from './screens/Settings/LanguageSettings'
 import {PrivacyAndSecuritySettingsScreen} from './screens/Settings/PrivacyAndSecuritySettings'
+import {SettingsScreen} from './screens/Settings/Settings'
+import {ThreadPreferencesScreen} from './screens/Settings/ThreadPreferences'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -285,7 +285,7 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
       />
       <Stack.Screen
         name="AppPasswords"
-        getComponent={() => AppPasswords}
+        getComponent={() => AppPasswordsScreen}
         options={{title: title(msg`App Passwords`), requireAuth: true}}
       />
       <Stack.Screen
@@ -295,7 +295,7 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
       />
       <Stack.Screen
         name="PreferencesFollowingFeed"
-        getComponent={() => PreferencesFollowingFeed}
+        getComponent={() => FollowingFeedPreferencesScreen}
         options={{
           title: title(msg`Following Feed Preferences`),
           requireAuth: true,
@@ -303,12 +303,12 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
       />
       <Stack.Screen
         name="PreferencesThreads"
-        getComponent={() => PreferencesThreads}
+        getComponent={() => ThreadPreferencesScreen}
         options={{title: title(msg`Threads Preferences`), requireAuth: true}}
       />
       <Stack.Screen
         name="PreferencesExternalEmbeds"
-        getComponent={() => PreferencesExternalEmbeds}
+        getComponent={() => ExternalMediaPreferencesScreen}
         options={{
           title: title(msg`External Media Preferences`),
           requireAuth: true,

src/alf/index.tsx

@@ -103,35 +103,32 @@ export function ThemeProvider({
     })
   }, [])
 
-  return (
-    <Context.Provider
-      value={React.useMemo<Alf>(
-        () => ({
-          themes,
-          themeName: themeName,
-          theme: themes[themeName],
-          fonts: {
-            scale: fontScale,
-            scaleMultiplier: fontScaleMultiplier,
-            family: fontFamily,
-            setFontScale: setFontScaleAndPersist,
-            setFontFamily: setFontFamilyAndPersist,
-          },
-          flags: {},
-        }),
-        [
-          themeName,
-          themes,
-          fontScale,
-          setFontScaleAndPersist,
-          fontFamily,
-          setFontFamilyAndPersist,
-          fontScaleMultiplier,
-        ],
-      )}>
-      {children}
-    </Context.Provider>
+  const value = React.useMemo<Alf>(
+    () => ({
+      themes,
+      themeName: themeName,
+      theme: themes[themeName],
+      fonts: {
+        scale: fontScale,
+        scaleMultiplier: fontScaleMultiplier,
+        family: fontFamily,
+        setFontScale: setFontScaleAndPersist,
+        setFontFamily: setFontFamilyAndPersist,
+      },
+      flags: {},
+    }),
+    [
+      themeName,
+      themes,
+      fontScale,
+      setFontScaleAndPersist,
+      fontFamily,
+      setFontFamilyAndPersist,
+      fontScaleMultiplier,
+    ],
   )
+
+  return <Context.Provider value={value}>{children}</Context.Provider>
 }
 
 export function useAlf() {

src/components/Error.tsx

@@ -32,7 +32,7 @@ export function Error({
   return (
     <CenteredView
       style={[
-        a.flex_1,
+        a.w_full,
         a.align_center,
         a.gap_5xl,
         !gtMobile && a.justify_between,

src/components/dms/MessagesListHeader.tsx

@@ -147,7 +147,7 @@ function HeaderReady({
 
   const isDeletedAccount = profile?.handle === 'missing.invalid'
   const displayName = isDeletedAccount
-    ? 'Deleted Account'
+    ? _(msg`Deleted Account`)
     : sanitizeDisplayName(
         profile.displayName || profile.handle,
         moderation.ui('displayName'),

src/lib/hooks/useCustomPalette.ts

@@ -1,14 +0,0 @@
-import React from 'react'
-
-import {choose} from '#/lib/functions'
-import {useTheme} from '#/lib/ThemeContext'
-
-export function useCustomPalette<T>({light, dark}: {light: T; dark: T}) {
-  const theme = useTheme()
-  return React.useMemo(() => {
-    return choose<T, Record<string, T>>(theme.colorScheme, {
-      dark,
-      light,
-    })
-  }, [theme.colorScheme, dark, light])
-}

src/lib/media/image-sizes.ts

@@ -1,93 +0,0 @@
-import {useEffect, useState} from 'react'
-import {Image} from 'react-native'
-
-import type {Dimensions} from '#/lib/media/types'
-
-type CacheStorageItem<T> = {key: string; value: T}
-const createCache = <T>(cacheSize: number) => ({
-  _storage: [] as CacheStorageItem<T>[],
-  get(key: string) {
-    const {value} =
-      this._storage.find(({key: storageKey}) => storageKey === key) || {}
-    return value
-  },
-  set(key: string, value: T) {
-    if (this._storage.length >= cacheSize) {
-      this._storage.shift()
-    }
-    this._storage.push({key, value})
-  },
-})
-
-const sizes = createCache<Dimensions>(50)
-const activeRequests: Map<string, Promise<Dimensions>> = new Map()
-
-export function get(uri: string): Dimensions | undefined {
-  return sizes.get(uri)
-}
-
-export function fetch(uri: string): Promise<Dimensions> {
-  const dims = sizes.get(uri)
-  if (dims) {
-    return Promise.resolve(dims)
-  }
-  const activeRequest = activeRequests.get(uri)
-  if (activeRequest) {
-    return activeRequest
-  }
-  const prom = new Promise<Dimensions>((resolve, reject) => {
-    Image.getSize(
-      uri,
-      (width: number, height: number) => {
-        const size = {width, height}
-        sizes.set(uri, size)
-        resolve(size)
-      },
-      (err: any) => {
-        console.error('Failed to fetch image dimensions for', uri, err)
-        reject(new Error('Could not fetch dimensions'))
-      },
-    )
-  }).finally(() => {
-    activeRequests.delete(uri)
-  })
-  activeRequests.set(uri, prom)
-  return prom
-}
-
-export function useImageDimensions({
-  src,
-  knownDimensions,
-}: {
-  src: string
-  knownDimensions: Dimensions | null
-}): [number | undefined, Dimensions | undefined] {
-  const [dims, setDims] = useState(() => knownDimensions ?? get(src))
-  const [prevSrc, setPrevSrc] = useState(src)
-  if (src !== prevSrc) {
-    setDims(knownDimensions ?? get(src))
-    setPrevSrc(src)
-  }
-
-  useEffect(() => {
-    let aborted = false
-    if (dims !== undefined) return
-    fetch(src).then(newDims => {
-      if (aborted) return
-      setDims(newDims)
-    })
-    return () => {
-      aborted = true
-    }
-  }, [dims, setDims, src])
-
-  let aspectRatio: number | undefined
-  if (dims) {
-    aspectRatio = dims.width / dims.height
-    if (Number.isNaN(aspectRatio)) {
-      aspectRatio = undefined
-    }
-  }
-
-  return [aspectRatio, dims]
-}

src/screens/Messages/components/ChatListItem.tsx

@@ -104,7 +104,7 @@ function ChatListItemReady({
 
   const isDeletedAccount = profile.handle === 'missing.invalid'
   const displayName = isDeletedAccount
-    ? 'Deleted Account'
+    ? _(msg`Deleted Account`)
     : sanitizeDisplayName(
         profile.displayName || profile.handle,
         moderation.ui('displayName'),

src/screens/Moderation/index.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
 import {Linking, View} from 'react-native'
 import {useSafeAreaFrame} from 'react-native-safe-area-context'
-import {ComAtprotoLabelDefs} from '@atproto/api'
 import {LABELS} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 
-import {IS_INTERNAL} from '#/lib/app-info'
 import {getLabelingServiceTitle} from '#/lib/moderation'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
 import {logger} from '#/logger'
@@ -18,11 +16,6 @@ import {
   UsePreferencesQueryResponse,
   usePreferencesSetAdultContentMutation,
 } from '#/state/queries/preferences'
-import {
-  useProfileQuery,
-  useProfileUpdateMutation,
-} from '#/state/queries/profile'
-import {useSession} from '#/state/session'
 import {isNonConfigurableModerationAuthority} from '#/state/session/additional-moderation-authorities'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
@@ -469,131 +462,7 @@ export function ModerationScreenInner({
           })}
         </View>
       )}
-
-      {!IS_INTERNAL && (
-        <>
-          <Text
-            style={[
-              a.text_md,
-              a.font_bold,
-              a.pt_2xl,
-              a.pb_md,
-              t.atoms.text_contrast_high,
-            ]}>
-            <Trans>Logged-out visibility</Trans>
-          </Text>
-
-          <PwiOptOut />
-        </>
-      )}
-
       <View style={{height: 200}} />
     </ScrollView>
   )
 }
-
-function PwiOptOut() {
-  const t = useTheme()
-  const {_} = useLingui()
-  const {currentAccount} = useSession()
-  const {data: profile} = useProfileQuery({did: currentAccount?.did})
-  const updateProfile = useProfileUpdateMutation()
-
-  const isOptedOut =
-    profile?.labels?.some(l => l.val === '!no-unauthenticated') || false
-  const canToggle = profile && !updateProfile.isPending
-
-  const onToggleOptOut = React.useCallback(() => {
-    if (!profile) {
-      return
-    }
-    let wasAdded = false
-    updateProfile.mutate({
-      profile,
-      updates: existing => {
-        // create labels attr if needed
-        existing.labels = ComAtprotoLabelDefs.isSelfLabels(existing.labels)
-          ? existing.labels
-          : {
-              $type: 'com.atproto.label.defs#selfLabels',
-              values: [],
-            }
-
-        // toggle the label
-        const hasLabel = existing.labels.values.some(
-          l => l.val === '!no-unauthenticated',
-        )
-        if (hasLabel) {
-          wasAdded = false
-          existing.labels.values = existing.labels.values.filter(
-            l => l.val !== '!no-unauthenticated',
-          )
-        } else {
-          wasAdded = true
-          existing.labels.values.push({val: '!no-unauthenticated'})
-        }
-
-        // delete if no longer needed
-        if (existing.labels.values.length === 0) {
-          delete existing.labels
-        }
-        return existing
-      },
-      checkCommitted: res => {
-        const exists = !!res.data.labels?.some(
-          l => l.val === '!no-unauthenticated',
-        )
-        return exists === wasAdded
-      },
-    })
-  }, [updateProfile, profile])
-
-  return (
-    <View style={[a.pt_sm]}>
-      <View style={[a.flex_row, a.align_center, a.justify_between, a.gap_lg]}>
-        <Toggle.Item
-          disabled={!canToggle}
-          value={isOptedOut}
-          onChange={onToggleOptOut}
-          name="logged_out_visibility"
-          style={a.flex_1}
-          label={_(
-            msg`Discourage apps from showing my account to logged-out users`,
-          )}>
-          <Toggle.Switch />
-          <Toggle.LabelText style={[a.text_md, a.flex_1]}>
-            <Trans>
-              Discourage apps from showing my account to logged-out users
-            </Trans>
-          </Toggle.LabelText>
-        </Toggle.Item>
-
-        {updateProfile.isPending && <Loader />}
-      </View>
-
-      <View style={[a.pt_md, a.gap_md, {paddingLeft: 38}]}>
-        <Text style={[a.leading_snug, t.atoms.text_contrast_high]}>
-          <Trans>
-            Bluesky will not show your profile and posts to logged-out users.
-            Other apps may not honor this request. This does not make your
-            account private.
-          </Trans>
-        </Text>
-        <Text style={[a.font_bold, a.leading_snug, t.atoms.text_contrast_high]}>
-          <Trans>
-            Note: Bluesky is an open and public network. This setting only
-            limits the visibility of your content on the Bluesky app and
-            website, and other apps may not respect this setting. Your content
-            may still be shown to logged-out users by other apps and websites.
-          </Trans>
-        </Text>
-
-        <InlineLinkText
-          label={_(msg`Learn more about what is public on Bluesky.`)}
-          to="https://blueskyweb.zendesk.com/hc/en-us/articles/15835264007693-Data-Privacy">
-          <Trans>Learn more about what is public on Bluesky.</Trans>
-        </InlineLinkText>
-      </View>
-    </View>
-  )
-}

src/screens/Profile/Header/Shell.tsx

@@ -1,5 +1,12 @@
 import React, {memo} from 'react'
 import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
+import Animated, {
+  measure,
+  MeasuredDimensions,
+  runOnJS,
+  runOnUI,
+  useAnimatedRef,
+} from 'react-native-reanimated'
 import {AppBskyActorDefs, ModerationDecision} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
@@ -42,6 +49,7 @@ let ProfileHeaderShell = ({
   const {openLightbox} = useLightboxControls()
   const navigation = useNavigation<NavigationProp>()
   const {isDesktop} = useWebMediaQueries()
+  const aviRef = useAnimatedRef()
 
   const onPressBack = React.useCallback(() => {
     if (navigation.canGoBack()) {
@@ -51,27 +59,40 @@ let ProfileHeaderShell = ({
     }
   }, [navigation])
 
-  const onPressAvi = React.useCallback(() => {
-    const modui = moderation.ui('avatar')
-    if (profile.avatar && !(modui.blur && modui.noOverride)) {
+  const _openLightbox = React.useCallback(
+    (uri: string, thumbRect: MeasuredDimensions | null) => {
       openLightbox({
         images: [
           {
-            uri: profile.avatar,
-            thumbUri: profile.avatar,
+            uri,
+            thumbUri: uri,
+            thumbRect,
             dimensions: {
               // It's fine if it's actually smaller but we know it's 1:1.
               height: 1000,
               width: 1000,
             },
+            thumbDimensions: null,
             type: 'circle-avi',
           },
         ],
         index: 0,
-        thumbDims: null,
       })
+    },
+    [openLightbox],
+  )
+
+  const onPressAvi = React.useCallback(() => {
+    const modui = moderation.ui('avatar')
+    const avatar = profile.avatar
+    if (avatar && !(modui.blur && modui.noOverride)) {
+      runOnUI(() => {
+        'worklet'
+        const rect = measure(aviRef)
+        runOnJS(_openLightbox)(avatar, rect)
+      })()
     }
-  }, [openLightbox, profile, moderation])
+  }, [profile, moderation, _openLightbox, aviRef])
 
   const isMe = React.useMemo(
     () => currentAccount?.did === profile.did,
@@ -149,12 +170,14 @@ let ProfileHeaderShell = ({
               styles.avi,
               profile.associated?.labeler && styles.aviLabeler,
             ]}>
-            <UserAvatar
-              type={profile.associated?.labeler ? 'labeler' : 'user'}
-              size={90}
-              avatar={profile.avatar}
-              moderation={moderation.ui('avatar')}
-            />
+            <Animated.View ref={aviRef} collapsable={false}>
+              <UserAvatar
+                type={profile.associated?.labeler ? 'labeler' : 'user'}
+                size={90}
+                avatar={profile.avatar}
+                moderation={moderation.ui('avatar')}
+              />
+            </Animated.View>
           </View>
         </TouchableWithoutFeedback>
       </GrowableAvatar>

src/screens/Settings/AccountSettings.tsx

@@ -6,7 +6,6 @@ import {NativeStackScreenProps} from '@react-navigation/native-stack'
 import {CommonNavigatorParams} from '#/lib/routes/types'
 import {useModalControls} from '#/state/modals'
 import {useSession} from '#/state/session'
-import {ExportCarDialog} from '#/view/screens/Settings/ExportCarDialog'
 import * as SettingsList from '#/screens/Settings/components/SettingsList'
 import {atoms as a, useTheme} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
@@ -24,6 +23,7 @@ import {Verified_Stroke2_Corner2_Rounded as VerifiedIcon} from '#/components/ico
 import * as Layout from '#/components/Layout'
 import {ChangeHandleDialog} from './components/ChangeHandleDialog'
 import {DeactivateAccountDialog} from './components/DeactivateAccountDialog'
+import {ExportCarDialog} from './components/ExportCarDialog'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'AccountSettings'>
 export function AccountSettingsScreen({}: Props) {

src/screens/Settings/ThreadPreferences.tsx

@@ -111,7 +111,7 @@ export function ThreadPreferencesScreen({}: Props) {
               style={[a.w_full, a.gap_md]}>
               <Toggle.LabelText style={[a.flex_1]}>
                 <Trans>
-                  Show replies by people you follow before all other replies.
+                  Show replies by people you follow before all other replies
                 </Trans>
               </Toggle.LabelText>
               <Toggle.Platform />

src/screens/Settings/components/CopyButton.tsx

@@ -1,6 +1,10 @@
 import React, {useCallback, useEffect, useState} from 'react'
 import {GestureResponderEvent, View} from 'react-native'
-import Animated, {FadeOutUp, ZoomIn} from 'react-native-reanimated'
+import Animated, {
+  FadeOutUp,
+  useReducedMotion,
+  ZoomIn,
+} from 'react-native-reanimated'
 import * as Clipboard from 'expo-clipboard'
 import {Trans} from '@lingui/macro'
 
@@ -16,13 +20,17 @@ export function CopyButton({
 }: ButtonProps & {value: string}) {
   const [hasBeenCopied, setHasBeenCopied] = useState(false)
   const t = useTheme()
+  const isReducedMotionEnabled = useReducedMotion()
 
   useEffect(() => {
     if (hasBeenCopied) {
-      const timeout = setTimeout(() => setHasBeenCopied(false), 100)
+      const timeout = setTimeout(
+        () => setHasBeenCopied(false),
+        isReducedMotionEnabled ? 2000 : 100,
+      )
       return () => clearTimeout(timeout)
     }
-  }, [hasBeenCopied])
+  }, [hasBeenCopied, isReducedMotionEnabled])
 
   const onPress = useCallback(
     (evt: GestureResponderEvent) => {

src/screens/Settings/components/Email2FAToggle.tsx

@@ -4,9 +4,9 @@ import {useLingui} from '@lingui/react'
 
 import {useModalControls} from '#/state/modals'
 import {useAgent, useSession} from '#/state/session'
-import {DisableEmail2FADialog} from '#/view/screens/Settings/DisableEmail2FADialog'
 import {useDialogControl} from '#/components/Dialog'
 import * as Prompt from '#/components/Prompt'
+import {DisableEmail2FADialog} from './DisableEmail2FADialog'
 import * as SettingsList from './SettingsList'
 
 export function Email2FAToggle() {

src/state/lightbox.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import type {MeasuredDimensions} from 'react-native-reanimated'
 import {nanoid} from 'nanoid/non-secure'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
@@ -8,7 +7,6 @@ import {ImageSource} from '#/view/com/lightbox/ImageViewing/@types'
 export type Lightbox = {
   id: string
   images: ImageSource[]
-  thumbDims: MeasuredDimensions | null
   index: number
 }
 

src/state/modals/index.tsx

@@ -48,11 +48,6 @@ export interface DeleteAccountModal {
   name: 'delete-account'
 }
 
-export interface ChangeHandleModal {
-  name: 'change-handle'
-  onChanged: () => void
-}
-
 export interface WaitlistModal {
   name: 'waitlist'
 }
@@ -61,10 +56,6 @@ export interface InviteCodesModal {
   name: 'invite-codes'
 }
 
-export interface AddAppPasswordModal {
-  name: 'add-app-password'
-}
-
 export interface ContentLanguagesSettingsModal {
   name: 'content-languages-settings'
 }
@@ -101,8 +92,6 @@ export interface InAppBrowserConsentModal {
 
 export type Modal =
   // Account
-  | AddAppPasswordModal
-  | ChangeHandleModal
   | DeleteAccountModal
   | VerifyEmailModal
   | ChangeEmailModal

src/view/com/composer/labels/LabelsBtn.tsx

@@ -144,19 +144,19 @@ function DialogInner({
                 }}>
                 <View style={[a.gap_sm]}>
                   <Toggle.Item name="sexual" label={_(msg`Suggestive`)}>
-                    <Toggle.Radio />
+                    <Toggle.Checkbox />
                     <Toggle.LabelText>
                       <Trans>Suggestive</Trans>
                     </Toggle.LabelText>
                   </Toggle.Item>
                   <Toggle.Item name="nudity" label={_(msg`Nudity`)}>
-                    <Toggle.Radio />
+                    <Toggle.Checkbox />
                     <Toggle.LabelText>
                       <Trans>Nudity</Trans>
                     </Toggle.LabelText>
                   </Toggle.Item>
                   <Toggle.Item name="porn" label={_(msg`Porn`)}>
-                    <Toggle.Radio />
+                    <Toggle.Checkbox />
                     <Toggle.LabelText>
                       <Trans>Porn</Trans>
                     </Toggle.LabelText>

src/view/com/composer/text-input/TextInput.tsx

@@ -252,7 +252,11 @@ export const TextInput = forwardRef(function TextInputImpl(
         style={[
           inputTextStyle,
           a.w_full,
-          {textAlignVertical: 'top', minHeight: 60},
+          {
+            textAlignVertical: 'top',
+            minHeight: 60,
+            includeFontPadding: false,
+          },
         ]}
         {...props}>
         {textDecorated}

src/view/com/lightbox/ImageViewing/@types/index.ts

@@ -6,6 +6,9 @@
  *
  */
 
+import {TransformsStyle} from 'react-native'
+import {MeasuredDimensions} from 'react-native-reanimated'
+
 export type Dimensions = {
   width: number
   height: number
@@ -18,8 +21,15 @@ export type Position = {
 
 export type ImageSource = {
   uri: string
-  thumbUri: string
-  alt?: string
   dimensions: Dimensions | null
+  thumbUri: string
+  thumbDimensions: Dimensions | null
+  thumbRect: MeasuredDimensions | null
+  alt?: string
   type: 'image' | 'circle-avi' | 'rect-avi'
 }
+
+export type Transform = Exclude<
+  TransformsStyle['transform'],
+  string | undefined
+>

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.android.tsx

@@ -1,23 +1,26 @@
 import React, {useState} from 'react'
-import {ActivityIndicator, StyleProp, StyleSheet, View} from 'react-native'
+import {ActivityIndicator, StyleSheet} from 'react-native'
 import {
   Gesture,
   GestureDetector,
   PanGesture,
 } from 'react-native-gesture-handler'
 import Animated, {
-  AnimatedRef,
-  measure,
   runOnJS,
+  SharedValue,
   useAnimatedReaction,
   useAnimatedRef,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated'
-import {Image, ImageStyle} from 'expo-image'
+import {Image} from 'expo-image'
 
-import type {Dimensions as ImageDimensions, ImageSource} from '../../@types'
+import type {
+  Dimensions as ImageDimensions,
+  ImageSource,
+  Transform,
+} from '../../@types'
 import {
   applyRounding,
   createTransform,
@@ -28,8 +31,6 @@ import {
   TransformMatrix,
 } from '../../transforms'
 
-const AnimatedImage = Animated.createAnimatedComponent(Image)
-
 const MIN_SCREEN_ZOOM = 2
 const MAX_ORIGINAL_IMAGE_ZOOM = 2
 
@@ -40,24 +41,39 @@ type Props = {
   onRequestClose: () => void
   onTap: () => void
   onZoom: (isZoomed: boolean) => void
+  onLoad: (dims: ImageDimensions) => void
   isScrollViewBeingDragged: boolean
   showControls: boolean
-  safeAreaRef: AnimatedRef<View>
+  measureSafeArea: () => {
+    x: number
+    y: number
+    width: number
+    height: number
+  }
   imageAspect: number | undefined
   imageDimensions: ImageDimensions | undefined
-  imageStyle: StyleProp<ImageStyle>
   dismissSwipePan: PanGesture
+  transforms: Readonly<
+    SharedValue<{
+      scaleAndMoveTransform: Transform
+      cropFrameTransform: Transform
+      cropContentTransform: Transform
+      isResting: boolean
+      isHidden: boolean
+    }>
+  >
 }
 const ImageItem = ({
   imageSrc,
   onTap,
   onZoom,
+  onLoad,
   isScrollViewBeingDragged,
-  safeAreaRef,
+  measureSafeArea,
   imageAspect,
   imageDimensions,
-  imageStyle,
   dismissSwipePan,
+  transforms,
 }: Props) => {
   const [isScaled, setIsScaled] = useState(false)
   const committedTransform = useSharedValue(initialTransform)
@@ -95,19 +111,6 @@ const ImageItem = ({
     onZoom(nextIsScaled)
   }
 
-  const animatedStyle = useAnimatedStyle(() => {
-    // Apply the active adjustments on top of the committed transform before the gestures.
-    // This is matrix multiplication, so operations are applied in the reverse order.
-    let t = createTransform()
-    prependPan(t, panTranslation.value)
-    prependPinch(t, pinchScale.value, pinchOrigin.value, pinchTranslation.value)
-    prependTransform(t, committedTransform.value)
-    const [translateX, translateY, scale] = readTransform(t)
-    return {
-      transform: [{translateX}, {translateY: translateY}, {scale}],
-    }
-  })
-
   // On Android, stock apps prevent going "out of bounds" on pan or pinch. You should "bump" into edges.
   // If the user tried to pan too hard, this function will provide the negative panning to stay in bounds.
   function getExtraTranslationToStayInBounds(
@@ -143,10 +146,7 @@ const ImageItem = ({
   const pinch = Gesture.Pinch()
     .onStart(e => {
       'worklet'
-      const screenSize = measure(safeAreaRef)
-      if (!screenSize) {
-        return
-      }
+      const screenSize = measureSafeArea()
       pinchOrigin.value = {
         x: e.focalX - screenSize.width / 2,
         y: e.focalY - screenSize.height / 2,
@@ -154,8 +154,8 @@ const ImageItem = ({
     })
     .onChange(e => {
       'worklet'
-      const screenSize = measure(safeAreaRef)
-      if (!imageDimensions || !screenSize) {
+      const screenSize = measureSafeArea()
+      if (!imageDimensions) {
         return
       }
       // Don't let the picture zoom in so close that it gets blurry.
@@ -213,8 +213,8 @@ const ImageItem = ({
     .minPointers(isScaled ? 1 : 2)
     .onChange(e => {
       'worklet'
-      const screenSize = measure(safeAreaRef)
-      if (!imageDimensions || !screenSize) {
+      const screenSize = measureSafeArea()
+      if (!imageDimensions) {
         return
       }
 
@@ -257,8 +257,8 @@ const ImageItem = ({
     .numberOfTaps(2)
     .onEnd(e => {
       'worklet'
-      const screenSize = measure(safeAreaRef)
-      if (!imageDimensions || !imageAspect || !screenSize) {
+      const screenSize = measureSafeArea()
+      if (!imageDimensions || !imageAspect) {
         return
       }
       const [, , committedScale] = readTransform(committedTransform.value)
@@ -302,11 +302,6 @@ const ImageItem = ({
       committedTransform.value = withClampedSpring(finalTransform)
     })
 
-  const innerStyle = useAnimatedStyle(() => ({
-    width: '100%',
-    aspectRatio: imageAspect,
-  }))
-
   const composedGesture = isScrollViewBeingDragged
     ? // If the parent is not at rest, provide a no-op gesture.
       Gesture.Manual()
@@ -317,29 +312,105 @@ const ImageItem = ({
         singleTap,
       )
 
+  const containerStyle = useAnimatedStyle(() => {
+    const {scaleAndMoveTransform, isHidden} = transforms.value
+    // Apply the active adjustments on top of the committed transform before the gestures.
+    // This is matrix multiplication, so operations are applied in the reverse order.
+    let t = createTransform()
+    prependPan(t, panTranslation.value)
+    prependPinch(t, pinchScale.value, pinchOrigin.value, pinchTranslation.value)
+    prependTransform(t, committedTransform.value)
+    const [translateX, translateY, scale] = readTransform(t)
+    const manipulationTransform = [
+      {translateX},
+      {translateY: translateY},
+      {scale},
+    ]
+    const screenSize = measureSafeArea()
+    return {
+      opacity: isHidden ? 0 : 1,
+      transform: scaleAndMoveTransform.concat(manipulationTransform),
+      width: screenSize.width,
+      maxHeight: screenSize.height,
+      alignSelf: 'center',
+      aspectRatio: imageAspect ?? 1 /* force onLoad */,
+    }
+  })
+
+  const imageCropStyle = useAnimatedStyle(() => {
+    const {cropFrameTransform} = transforms.value
+    return {
+      flex: 1,
+      overflow: 'hidden',
+      transform: cropFrameTransform,
+    }
+  })
+
+  const imageStyle = useAnimatedStyle(() => {
+    const {cropContentTransform} = transforms.value
+    return {
+      flex: 1,
+      transform: cropContentTransform,
+      opacity: imageAspect === undefined ? 0 : 1,
+    }
+  })
+
+  const [showLoader, setShowLoader] = useState(false)
+  const [hasLoaded, setHasLoaded] = useState(false)
+  useAnimatedReaction(
+    () => {
+      return transforms.value.isResting && !hasLoaded
+    },
+    (show, prevShow) => {
+      if (show && !prevShow) {
+        runOnJS(setShowLoader)(false)
+      } else if (!prevShow && show) {
+        runOnJS(setShowLoader)(true)
+      }
+    },
+  )
+
   const type = imageSrc.type
   const borderRadius =
     type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
+
   return (
     <GestureDetector gesture={composedGesture}>
-      <Animated.View style={imageStyle} renderToHardwareTextureAndroid>
-        <Animated.View
-          ref={containerRef}
-          // Necessary to make opacity work for both children together.
-          renderToHardwareTextureAndroid
-          style={[styles.container, animatedStyle]}>
-          <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
-          <AnimatedImage
-            contentFit="contain"
-            source={{uri: imageSrc.uri}}
-            placeholderContentFit="contain"
-            placeholder={{uri: imageSrc.thumbUri}}
-            style={[innerStyle, {borderRadius}]}
-            accessibilityLabel={imageSrc.alt}
-            accessibilityHint=""
-            accessibilityIgnoresInvertColors
-            cachePolicy="memory"
-          />
+      <Animated.View
+        ref={containerRef}
+        style={[styles.container]}
+        renderToHardwareTextureAndroid>
+        <Animated.View style={containerStyle}>
+          {showLoader && (
+            <ActivityIndicator
+              size="small"
+              color="#FFF"
+              style={styles.loading}
+            />
+          )}
+          <Animated.View style={imageCropStyle}>
+            <Animated.View style={imageStyle}>
+              <Image
+                contentFit="cover"
+                source={{uri: imageSrc.uri}}
+                placeholderContentFit="cover"
+                placeholder={{uri: imageSrc.thumbUri}}
+                accessibilityLabel={imageSrc.alt}
+                onLoad={
+                  hasLoaded
+                    ? undefined
+                    : e => {
+                        setHasLoaded(true)
+                        onLoad({width: e.source.width, height: e.source.height})
+                      }
+                }
+                style={{flex: 1, borderRadius}}
+                accessibilityHint=""
+                accessibilityIgnoresInvertColors
+                cachePolicy="memory"
+              />
+            </Animated.View>
+          </Animated.View>
         </Animated.View>
       </Animated.View>
     </GestureDetector>
@@ -358,6 +429,7 @@ const styles = StyleSheet.create({
     right: 0,
     top: 0,
     bottom: 0,
+    justifyContent: 'center',
   },
 })
 

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.ios.tsx

@@ -7,26 +7,28 @@
  */
 
 import React, {useState} from 'react'
-import {ActivityIndicator, StyleProp, StyleSheet, View} from 'react-native'
+import {ActivityIndicator, StyleSheet} from 'react-native'
 import {
   Gesture,
   GestureDetector,
   PanGesture,
 } from 'react-native-gesture-handler'
 import Animated, {
-  AnimatedRef,
-  measure,
   runOnJS,
+  SharedValue,
+  useAnimatedReaction,
   useAnimatedRef,
   useAnimatedStyle,
 } from 'react-native-reanimated'
 import {useSafeAreaFrame} from 'react-native-safe-area-context'
-import {Image, ImageStyle} from 'expo-image'
+import {Image} from 'expo-image'
 
 import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
-import {Dimensions as ImageDimensions, ImageSource} from '../../@types'
-
-const AnimatedImage = Animated.createAnimatedComponent(Image)
+import {
+  Dimensions as ImageDimensions,
+  ImageSource,
+  Transform,
+} from '../../@types'
 
 const MAX_ORIGINAL_IMAGE_ZOOM = 2
 const MIN_SCREEN_ZOOM = 2
@@ -36,25 +38,40 @@ type Props = {
   onRequestClose: () => void
   onTap: () => void
   onZoom: (scaled: boolean) => void
+  onLoad: (dims: ImageDimensions) => void
   isScrollViewBeingDragged: boolean
   showControls: boolean
-  safeAreaRef: AnimatedRef<View>
+  measureSafeArea: () => {
+    x: number
+    y: number
+    width: number
+    height: number
+  }
   imageAspect: number | undefined
   imageDimensions: ImageDimensions | undefined
-  imageStyle: StyleProp<ImageStyle>
   dismissSwipePan: PanGesture
+  transforms: Readonly<
+    SharedValue<{
+      scaleAndMoveTransform: Transform
+      cropFrameTransform: Transform
+      cropContentTransform: Transform
+      isResting: boolean
+      isHidden: boolean
+    }>
+  >
 }
 
 const ImageItem = ({
   imageSrc,
   onTap,
   onZoom,
+  onLoad,
   showControls,
-  safeAreaRef,
+  measureSafeArea,
   imageAspect,
   imageDimensions,
-  imageStyle,
   dismissSwipePan,
+  transforms,
 }: Props) => {
   const scrollViewRef = useAnimatedRef<Animated.ScrollView>()
   const [scaled, setScaled] = useState(false)
@@ -67,16 +84,6 @@ const ImageItem = ({
       : 1,
   )
 
-  const animatedStyle = useAnimatedStyle(() => {
-    const screenSize = measure(safeAreaRef) ?? screenSizeDelayedForJSThreadOnly
-    return {
-      width: screenSize.width,
-      maxHeight: screenSize.height,
-      alignSelf: 'center',
-      aspectRatio: imageAspect,
-    }
-  })
-
   const scrollHandler = useAnimatedScrollHandler({
     onScroll(e) {
       const nextIsScaled = e.zoomScale > 1
@@ -114,10 +121,7 @@ const ImageItem = ({
     .numberOfTaps(2)
     .onEnd(e => {
       'worklet'
-      const screenSize = measure(safeAreaRef)
-      if (!screenSize) {
-        return
-      }
+      const screenSize = measureSafeArea()
       const {absoluteX, absoluteY} = e
       let nextZoomRect = {
         x: 0,
@@ -143,9 +147,58 @@ const ImageItem = ({
     singleTap,
   )
 
+  const containerStyle = useAnimatedStyle(() => {
+    const {scaleAndMoveTransform, isHidden} = transforms.value
+    return {
+      flex: 1,
+      transform: scaleAndMoveTransform,
+      opacity: isHidden ? 0 : 1,
+    }
+  })
+
+  const imageCropStyle = useAnimatedStyle(() => {
+    const screenSize = measureSafeArea()
+    const {cropFrameTransform} = transforms.value
+    return {
+      overflow: 'hidden',
+      transform: cropFrameTransform,
+      width: screenSize.width,
+      maxHeight: screenSize.height,
+      alignSelf: 'center',
+      aspectRatio: imageAspect ?? 1 /* force onLoad */,
+      opacity: imageAspect === undefined ? 0 : 1,
+    }
+  })
+
+  const imageStyle = useAnimatedStyle(() => {
+    const {cropContentTransform} = transforms.value
+    return {
+      transform: cropContentTransform,
+      width: '100%',
+      aspectRatio: imageAspect ?? 1 /* force onLoad */,
+      opacity: imageAspect === undefined ? 0 : 1,
+    }
+  })
+
+  const [showLoader, setShowLoader] = useState(false)
+  const [hasLoaded, setHasLoaded] = useState(false)
+  useAnimatedReaction(
+    () => {
+      return transforms.value.isResting && !hasLoaded
+    },
+    (show, prevShow) => {
+      if (show && !prevShow) {
+        runOnJS(setShowLoader)(false)
+      } else if (!prevShow && show) {
+        runOnJS(setShowLoader)(true)
+      }
+    },
+  )
+
   const type = imageSrc.type
   const borderRadius =
     type === 'circle-avi' ? 1e5 : type === 'rect-avi' ? 20 : 0
+
   return (
     <GestureDetector gesture={composedGesture}>
       <Animated.ScrollView
@@ -156,22 +209,36 @@ const ImageItem = ({
         showsVerticalScrollIndicator={false}
         maximumZoomScale={maxZoomScale}
         onScroll={scrollHandler}
+        style={containerStyle}
         bounces={scaled}
         bouncesZoom={true}
-        style={imageStyle}
         centerContent>
-        <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
-        <AnimatedImage
-          contentFit="contain"
-          source={{uri: imageSrc.uri}}
-          placeholderContentFit="contain"
-          placeholder={{uri: imageSrc.thumbUri}}
-          style={[animatedStyle, {borderRadius}]}
-          accessibilityLabel={imageSrc.alt}
-          accessibilityHint=""
-          enableLiveTextInteraction={showControls && !scaled}
-          accessibilityIgnoresInvertColors
-        />
+        {showLoader && (
+          <ActivityIndicator size="small" color="#FFF" style={styles.loading} />
+        )}
+        <Animated.View style={imageCropStyle}>
+          <Animated.View style={imageStyle}>
+            <Image
+              contentFit="contain"
+              source={{uri: imageSrc.uri}}
+              placeholderContentFit="contain"
+              placeholder={{uri: imageSrc.thumbUri}}
+              style={{flex: 1, borderRadius}}
+              accessibilityLabel={imageSrc.alt}
+              accessibilityHint=""
+              enableLiveTextInteraction={showControls && !scaled}
+              accessibilityIgnoresInvertColors
+              onLoad={
+                hasLoaded
+                  ? undefined
+                  : e => {
+                      setHasLoaded(true)
+                      onLoad({width: e.source.width, height: e.source.height})
+                    }
+              }
+            />
+          </Animated.View>
+        </Animated.View>
       </Animated.ScrollView>
     </GestureDetector>
   )

src/view/com/lightbox/ImageViewing/components/ImageItem/ImageItem.tsx

@@ -1,24 +1,43 @@
 // default implementation fallback for web
 
 import React from 'react'
-import {ImageStyle, StyleProp, View} from 'react-native'
+import {View} from 'react-native'
 import {PanGesture} from 'react-native-gesture-handler'
-import {AnimatedRef} from 'react-native-reanimated'
+import {SharedValue} from 'react-native-reanimated'
 
-import {Dimensions as ImageDimensions, ImageSource} from '../../@types'
+import {Dimensions} from '#/lib/media/types'
+import {
+  Dimensions as ImageDimensions,
+  ImageSource,
+  Transform,
+} from '../../@types'
 
 type Props = {
   imageSrc: ImageSource
   onRequestClose: () => void
   onTap: () => void
   onZoom: (scaled: boolean) => void
+  onLoad: (dims: Dimensions) => void
   isScrollViewBeingDragged: boolean
   showControls: boolean
-  safeAreaRef: AnimatedRef<View>
+  measureSafeArea: () => {
+    x: number
+    y: number
+    width: number
+    height: number
+  }
   imageAspect: number | undefined
   imageDimensions: ImageDimensions | undefined
-  imageStyle: StyleProp<ImageStyle>
   dismissSwipePan: PanGesture
+  transforms: Readonly<
+    SharedValue<{
+      scaleAndMoveTransform: Transform
+      cropFrameTransform: Transform
+      cropContentTransform: Transform
+      isResting: boolean
+      isHidden: boolean
+    }>
+  >
 }
 
 const ImageItem = (_props: Props) => {

src/view/com/lightbox/ImageViewing/index.tsx

@@ -9,44 +9,64 @@
 // https://github.com/jobtoday/react-native-image-viewing
 
 import React, {useCallback, useState} from 'react'
-import {LayoutAnimation, Platform, StyleSheet, View} from 'react-native'
+import {
+  LayoutAnimation,
+  PixelRatio,
+  Platform,
+  StyleSheet,
+  View,
+} from 'react-native'
 import {Gesture} from 'react-native-gesture-handler'
 import PagerView from 'react-native-pager-view'
 import Animated, {
   AnimatedRef,
   cancelAnimation,
+  interpolate,
   measure,
   runOnJS,
   SharedValue,
   useAnimatedReaction,
   useAnimatedRef,
   useAnimatedStyle,
+  useDerivedValue,
   useSharedValue,
   withDecay,
   withSpring,
 } from 'react-native-reanimated'
-import {Edge, SafeAreaView} from 'react-native-safe-area-context'
+import {
+  Edge,
+  SafeAreaView,
+  useSafeAreaFrame,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {Trans} from '@lingui/macro'
 
-import {useImageDimensions} from '#/lib/media/image-sizes'
+import {Dimensions} from '#/lib/media/types'
 import {colors, s} from '#/lib/styles'
 import {isIOS} from '#/platform/detection'
 import {Lightbox} from '#/state/lightbox'
 import {Button} from '#/view/com/util/forms/Button'
 import {Text} from '#/view/com/util/text/Text'
 import {ScrollView} from '#/view/com/util/Views'
-import {ImageSource} from './@types'
+import {PlatformInfo} from '../../../../../modules/expo-bluesky-swiss-army'
+import {ImageSource, Transform} from './@types'
 import ImageDefaultHeader from './components/ImageDefaultHeader'
 import ImageItem from './components/ImageItem/ImageItem'
 
+type Rect = {x: number; y: number; width: number; height: number}
+
+const PIXEL_RATIO = PixelRatio.get()
 const EDGES =
   Platform.OS === 'android'
     ? (['top', 'bottom', 'left', 'right'] satisfies Edge[])
     : (['left', 'right'] satisfies Edge[]) // iOS, so no top/bottom safe area
 
+const SLOW_SPRING = {stiffness: 120}
+const FAST_SPRING = {stiffness: 700}
+
 export default function ImageViewRoot({
-  lightbox,
+  lightbox: nextLightbox,
   onRequestClose,
   onPressSave,
   onPressShare,
@@ -56,24 +76,72 @@ export default function ImageViewRoot({
   onPressSave: (uri: string) => void
   onPressShare: (uri: string) => void
 }) {
+  'use no memo'
   const ref = useAnimatedRef<View>()
+  const [activeLightbox, setActiveLightbox] = useState(nextLightbox)
+  const openProgress = useSharedValue(0)
+
+  if (!activeLightbox && nextLightbox) {
+    setActiveLightbox(nextLightbox)
+  }
+
+  React.useEffect(() => {
+    if (!nextLightbox) {
+      return
+    }
+
+    const canAnimate =
+      !PlatformInfo.getIsReducedMotionEnabled() &&
+      nextLightbox.images.every(
+        img => img.thumbRect && (img.dimensions || img.thumbDimensions),
+      )
+
+    // https://github.com/software-mansion/react-native-reanimated/issues/6677
+    requestAnimationFrame(() => {
+      openProgress.value = canAnimate ? withClampedSpring(1, SLOW_SPRING) : 1
+    })
+    return () => {
+      // https://github.com/software-mansion/react-native-reanimated/issues/6677
+      requestAnimationFrame(() => {
+        openProgress.value = canAnimate ? withClampedSpring(0, SLOW_SPRING) : 0
+      })
+    }
+  }, [nextLightbox, openProgress])
+
+  useAnimatedReaction(
+    () => openProgress.value === 0,
+    (isGone, wasGone) => {
+      if (isGone && !wasGone) {
+        runOnJS(setActiveLightbox)(null)
+      }
+    },
+  )
+
+  const onFlyAway = React.useCallback(() => {
+    'worklet'
+    openProgress.value = 0
+    runOnJS(onRequestClose)()
+  }, [onRequestClose, openProgress])
+
   return (
     // Keep it always mounted to avoid flicker on the first frame.
     <SafeAreaView
-      style={[styles.screen, !lightbox && styles.screenHidden]}
+      style={[styles.screen, !activeLightbox && styles.screenHidden]}
       edges={EDGES}
       aria-modal
       accessibilityViewIsModal
-      aria-hidden={!lightbox}>
+      aria-hidden={!activeLightbox}>
       <Animated.View ref={ref} style={{flex: 1}} collapsable={false}>
-        {lightbox && (
+        {activeLightbox && (
           <ImageView
-            key={lightbox.id}
-            lightbox={lightbox}
+            key={activeLightbox.id}
+            lightbox={activeLightbox}
             onRequestClose={onRequestClose}
             onPressSave={onPressSave}
             onPressShare={onPressShare}
+            onFlyAway={onFlyAway}
             safeAreaRef={ref}
+            openProgress={openProgress}
           />
         )}
       </Animated.View>
@@ -86,13 +154,17 @@ function ImageView({
   onRequestClose,
   onPressSave,
   onPressShare,
+  onFlyAway,
   safeAreaRef,
+  openProgress,
 }: {
   lightbox: Lightbox
   onRequestClose: () => void
   onPressSave: (uri: string) => void
   onPressShare: (uri: string) => void
+  onFlyAway: () => void
   safeAreaRef: AnimatedRef<View>
+  openProgress: SharedValue<number>
 }) {
   const {images, index: initialImageIndex} = lightbox
   const [isScaled, setIsScaled] = useState(false)
@@ -104,33 +176,41 @@ function ImageView({
   const isFlyingAway = useSharedValue(false)
 
   const containerStyle = useAnimatedStyle(() => {
-    if (isFlyingAway.value) {
+    if (openProgress.value < 1 || isFlyingAway.value) {
       return {pointerEvents: 'none'}
     }
     return {pointerEvents: 'auto'}
   })
+
   const backdropStyle = useAnimatedStyle(() => {
     const screenSize = measure(safeAreaRef)
     let opacity = 1
-    if (screenSize) {
+    if (openProgress.value < 1) {
+      opacity = Math.sqrt(openProgress.value)
+    } else if (screenSize) {
       const dragProgress = Math.min(
         Math.abs(dismissSwipeTranslateY.value) / (screenSize.height / 2),
         1,
       )
       opacity -= dragProgress
     }
+    const factor = isIOS ? 100 : 50
     return {
-      opacity,
+      opacity: Math.round(opacity * factor) / factor,
     }
   })
+
   const animatedHeaderStyle = useAnimatedStyle(() => {
     const show = showControls && dismissSwipeTranslateY.value === 0
     return {
       pointerEvents: show ? 'box-none' : 'none',
-      opacity: withClampedSpring(show ? 1 : 0),
+      opacity: withClampedSpring(
+        show && openProgress.value === 1 ? 1 : 0,
+        FAST_SPRING,
+      ),
       transform: [
         {
-          translateY: withClampedSpring(show ? 0 : -30),
+          translateY: withClampedSpring(show ? 0 : -30, FAST_SPRING),
         },
       ],
     }
@@ -140,10 +220,13 @@ function ImageView({
     return {
       flexGrow: 1,
       pointerEvents: show ? 'box-none' : 'none',
-      opacity: withClampedSpring(show ? 1 : 0),
+      opacity: withClampedSpring(
+        show && openProgress.value === 1 ? 1 : 0,
+        FAST_SPRING,
+      ),
       transform: [
         {
-          translateY: withClampedSpring(show ? 0 : 30),
+          translateY: withClampedSpring(show ? 0 : 30, FAST_SPRING),
         },
       ],
     }
@@ -172,7 +255,7 @@ function ImageView({
       if (isOut && !wasOut) {
         // Stop the animation from blocking the screen forever.
         cancelAnimation(dismissSwipeTranslateY)
-        runOnJS(onRequestClose)()
+        onFlyAway()
       }
     },
   )
@@ -209,6 +292,7 @@ function ImageView({
               isFlyingAway={isFlyingAway}
               isActive={i === imageIndex}
               dismissSwipeTranslateY={dismissSwipeTranslateY}
+              openProgress={openProgress}
             />
           </View>
         ))}
@@ -247,6 +331,7 @@ function LightboxImage({
   isActive,
   showControls,
   safeAreaRef,
+  openProgress,
   dismissSwipeTranslateY,
 }: {
   imageSrc: ImageSource
@@ -259,11 +344,76 @@ function LightboxImage({
   isFlyingAway: SharedValue<boolean>
   showControls: boolean
   safeAreaRef: AnimatedRef<View>
+  openProgress: SharedValue<number>
   dismissSwipeTranslateY: SharedValue<number>
 }) {
-  const [imageAspect, imageDimensions] = useImageDimensions({
-    src: imageSrc.uri,
-    knownDimensions: imageSrc.dimensions,
+  const [fetchedDims, setFetchedDims] = React.useState<Dimensions | null>(null)
+  const dims = fetchedDims ?? imageSrc.dimensions ?? imageSrc.thumbDimensions
+  let imageAspect: number | undefined
+  if (dims) {
+    imageAspect = dims.width / dims.height
+    if (Number.isNaN(imageAspect)) {
+      imageAspect = undefined
+    }
+  }
+
+  const safeFrameDelayedForJSThreadOnly = useSafeAreaFrame()
+  const safeInsetsDelayedForJSThreadOnly = useSafeAreaInsets()
+  const measureSafeArea = React.useCallback(() => {
+    'worklet'
+    let safeArea: Rect | null = measure(safeAreaRef)
+    if (!safeArea) {
+      if (_WORKLET) {
+        console.error('Expected to always be able to measure safe area.')
+      }
+      const frame = safeFrameDelayedForJSThreadOnly
+      const insets = safeInsetsDelayedForJSThreadOnly
+      safeArea = {
+        x: frame.x + insets.left,
+        y: frame.y + insets.top,
+        width: frame.width - insets.left - insets.right,
+        height: frame.height - insets.top - insets.bottom,
+      }
+    }
+    return safeArea
+  }, [
+    safeFrameDelayedForJSThreadOnly,
+    safeInsetsDelayedForJSThreadOnly,
+    safeAreaRef,
+  ])
+
+  const {thumbRect} = imageSrc
+  const transforms = useDerivedValue(() => {
+    'worklet'
+    const safeArea = measureSafeArea()
+    const dismissTranslateY =
+      isActive && openProgress.value === 1 ? dismissSwipeTranslateY.value : 0
+
+    if (openProgress.value === 0 && isFlyingAway.value) {
+      return {
+        isHidden: true,
+        isResting: false,
+        scaleAndMoveTransform: [],
+        cropFrameTransform: [],
+        cropContentTransform: [],
+      }
+    }
+
+    if (isActive && thumbRect && imageAspect && openProgress.value < 1) {
+      return interpolateTransform(
+        openProgress.value,
+        thumbRect,
+        safeArea,
+        imageAspect,
+      )
+    }
+    return {
+      isHidden: false,
+      isResting: dismissTranslateY === 0,
+      scaleAndMoveTransform: [{translateY: dismissTranslateY}],
+      cropFrameTransform: [],
+      cropContentTransform: [],
+    }
   })
 
   const dismissSwipePan = Gesture.Pan()
@@ -273,14 +423,14 @@ function LightboxImage({
     .maxPointers(1)
     .onUpdate(e => {
       'worklet'
-      if (isFlyingAway.value) {
+      if (openProgress.value !== 1 || isFlyingAway.value) {
         return
       }
       dismissSwipeTranslateY.value = e.translationY
     })
     .onEnd(e => {
       'worklet'
-      if (isFlyingAway.value) {
+      if (openProgress.value !== 1 || isFlyingAway.value) {
         return
       }
       if (Math.abs(e.velocityY) > 1000) {
@@ -303,24 +453,20 @@ function LightboxImage({
       }
     })
 
-  const imageStyle = useAnimatedStyle(() => {
-    return {
-      transform: [{translateY: dismissSwipeTranslateY.value}],
-    }
-  })
   return (
     <ImageItem
       imageSrc={imageSrc}
       onTap={onTap}
       onZoom={onZoom}
       onRequestClose={onRequestClose}
+      onLoad={setFetchedDims}
       isScrollViewBeingDragged={isScrollViewBeingDragged}
       showControls={showControls}
-      safeAreaRef={safeAreaRef}
+      measureSafeArea={measureSafeArea}
       imageAspect={imageAspect}
-      imageDimensions={imageDimensions}
-      imageStyle={imageStyle}
+      imageDimensions={dims ?? undefined}
       dismissSwipePan={dismissSwipePan}
+      transforms={transforms}
     />
   )
 }
@@ -476,7 +622,91 @@ const styles = StyleSheet.create({
   },
 })
 
-function withClampedSpring(value: any) {
+function interpolatePx(
+  px: number,
+  inputRange: readonly number[],
+  outputRange: readonly number[],
+) {
   'worklet'
-  return withSpring(value, {overshootClamping: true, stiffness: 300})
+  const value = interpolate(px, inputRange, outputRange)
+  return Math.round(value * PIXEL_RATIO) / PIXEL_RATIO
+}
+
+function interpolateTransform(
+  progress: number,
+  thumbnailDims: {
+    pageX: number
+    width: number
+    pageY: number
+    height: number
+  },
+  safeArea: {width: number; height: number; x: number; y: number},
+  imageAspect: number,
+): {
+  scaleAndMoveTransform: Transform
+  cropFrameTransform: Transform
+  cropContentTransform: Transform
+  isResting: boolean
+  isHidden: boolean
+} {
+  'worklet'
+  const thumbAspect = thumbnailDims.width / thumbnailDims.height
+  let uncroppedInitialWidth
+  let uncroppedInitialHeight
+  if (imageAspect > thumbAspect) {
+    uncroppedInitialWidth = thumbnailDims.height * imageAspect
+    uncroppedInitialHeight = thumbnailDims.height
+  } else {
+    uncroppedInitialWidth = thumbnailDims.width
+    uncroppedInitialHeight = thumbnailDims.width / imageAspect
+  }
+  const safeAreaAspect = safeArea.width / safeArea.height
+  let finalWidth
+  let finalHeight
+  if (safeAreaAspect > imageAspect) {
+    finalWidth = safeArea.height * imageAspect
+    finalHeight = safeArea.height
+  } else {
+    finalWidth = safeArea.width
+    finalHeight = safeArea.width / imageAspect
+  }
+  const initialScale = Math.min(
+    uncroppedInitialWidth / finalWidth,
+    uncroppedInitialHeight / finalHeight,
+  )
+  const croppedFinalWidth = thumbnailDims.width / initialScale
+  const croppedFinalHeight = thumbnailDims.height / initialScale
+  const screenCenterX = safeArea.width / 2
+  const screenCenterY = safeArea.height / 2
+  const thumbnailSafeAreaX = thumbnailDims.pageX - safeArea.x
+  const thumbnailSafeAreaY = thumbnailDims.pageY - safeArea.y
+  const thumbnailCenterX = thumbnailSafeAreaX + thumbnailDims.width / 2
+  const thumbnailCenterY = thumbnailSafeAreaY + thumbnailDims.height / 2
+  const initialTranslateX = thumbnailCenterX - screenCenterX
+  const initialTranslateY = thumbnailCenterY - screenCenterY
+  const scale = interpolate(progress, [0, 1], [initialScale, 1])
+  const translateX = interpolatePx(progress, [0, 1], [initialTranslateX, 0])
+  const translateY = interpolatePx(progress, [0, 1], [initialTranslateY, 0])
+  const cropScaleX = interpolate(
+    progress,
+    [0, 1],
+    [croppedFinalWidth / finalWidth, 1],
+  )
+  const cropScaleY = interpolate(
+    progress,
+    [0, 1],
+    [croppedFinalHeight / finalHeight, 1],
+  )
+  return {
+    isHidden: false,
+    isResting: progress === 1,
+    scaleAndMoveTransform: [{translateX}, {translateY}, {scale}],
+    cropFrameTransform: [{scaleX: cropScaleX}, {scaleY: cropScaleY}],
+    cropContentTransform: [{scaleX: 1 / cropScaleX}, {scaleY: 1 / cropScaleY}],
+  }
+}
+
+function withClampedSpring(value: any, {stiffness}: {stiffness: number}) {
+  'worklet'
+  return withSpring(value, {overshootClamping: true, stiffness})
 }

src/view/com/modals/AddAppPasswords.tsx

@@ -1,307 +0,0 @@
-import React, {useState} from 'react'
-import {StyleSheet, TextInput, TouchableOpacity, View} from 'react-native'
-import {setStringAsync} from 'expo-clipboard'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {s} from '#/lib/styles'
-import {logger} from '#/logger'
-import {isNative} from '#/platform/detection'
-import {useModalControls} from '#/state/modals'
-import {
-  useAppPasswordCreateMutation,
-  useAppPasswordsQuery,
-} from '#/state/queries/app-passwords'
-import {Button} from '#/view/com/util/forms/Button'
-import {Text} from '#/view/com/util/text/Text'
-import * as Toast from '#/view/com/util/Toast'
-import {atoms as a} from '#/alf'
-import * as Toggle from '#/components/forms/Toggle'
-
-export const snapPoints = ['90%']
-
-const shadesOfBlue: string[] = [
-  'AliceBlue',
-  'Aqua',
-  'Aquamarine',
-  'Azure',
-  'BabyBlue',
-  'Blue',
-  'BlueViolet',
-  'CadetBlue',
-  'CornflowerBlue',
-  'Cyan',
-  'DarkBlue',
-  'DarkCyan',
-  'DarkSlateBlue',
-  'DeepSkyBlue',
-  'DodgerBlue',
-  'ElectricBlue',
-  'LightBlue',
-  'LightCyan',
-  'LightSkyBlue',
-  'LightSteelBlue',
-  'MediumAquaMarine',
-  'MediumBlue',
-  'MediumSlateBlue',
-  'MidnightBlue',
-  'Navy',
-  'PowderBlue',
-  'RoyalBlue',
-  'SkyBlue',
-  'SlateBlue',
-  'SteelBlue',
-  'Teal',
-  'Turquoise',
-]
-
-export function Component({}: {}) {
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const {closeModal} = useModalControls()
-  const {data: passwords} = useAppPasswordsQuery()
-  const {mutateAsync: mutateAppPassword, isPending} =
-    useAppPasswordCreateMutation()
-  const [name, setName] = useState(
-    shadesOfBlue[Math.floor(Math.random() * shadesOfBlue.length)],
-  )
-  const [appPassword, setAppPassword] = useState<string>()
-  const [wasCopied, setWasCopied] = useState(false)
-  const [privileged, setPrivileged] = useState(false)
-
-  const onCopy = React.useCallback(() => {
-    if (appPassword) {
-      setStringAsync(appPassword)
-      Toast.show(_(msg`Copied to clipboard`), 'clipboard-check')
-      setWasCopied(true)
-    }
-  }, [appPassword, _])
-
-  const onDone = React.useCallback(() => {
-    closeModal()
-  }, [closeModal])
-
-  const createAppPassword = async () => {
-    // if name is all whitespace, we don't allow it
-    if (!name || !name.trim()) {
-      Toast.show(
-        _(
-          msg`Please enter a name for your app password. All spaces is not allowed.`,
-        ),
-        'xmark',
-      )
-      return
-    }
-    // if name is too short (under 4 chars), we don't allow it
-    if (name.length < 4) {
-      Toast.show(
-        _(msg`App Password names must be at least 4 characters long.`),
-        'xmark',
-      )
-      return
-    }
-
-    if (passwords?.find(p => p.name === name)) {
-      Toast.show(_(msg`This name is already in use`), 'xmark')
-      return
-    }
-
-    try {
-      const newPassword = await mutateAppPassword({name, privileged})
-      if (newPassword) {
-        setAppPassword(newPassword.password)
-      } else {
-        Toast.show(_(msg`Failed to create app password.`), 'xmark')
-        // TODO: better error handling (?)
-      }
-    } catch (e) {
-      Toast.show(_(msg`Failed to create app password.`), 'xmark')
-      logger.error('Failed to create app password', {message: e})
-    }
-  }
-
-  const _onChangeText = (text: string) => {
-    // sanitize input
-    // we only all alphanumeric characters, spaces, dashes, and underscores
-    // if the user enters anything else, we ignore it and shake the input container
-    // also, it cannot start with a space
-    if (text.match(/^[a-zA-Z0-9-_ ]*$/)) {
-      setName(text)
-    } else {
-      Toast.show(
-        _(
-          msg`App Password names can only contain letters, numbers, spaces, dashes, and underscores.`,
-        ),
-        'xmark',
-      )
-    }
-  }
-
-  return (
-    <View style={[styles.container, pal.view]} testID="addAppPasswordsModal">
-      {!appPassword ? (
-        <>
-          <View>
-            <Text type="lg" style={[pal.text]}>
-              <Trans>
-                Please enter a unique name for this App Password or use our
-                randomly generated one.
-              </Trans>
-            </Text>
-            <View style={[pal.btn, styles.textInputWrapper]}>
-              <TextInput
-                style={[styles.input, pal.text]}
-                onChangeText={_onChangeText}
-                value={name}
-                placeholder={_(msg`Enter a name for this App Password`)}
-                placeholderTextColor={pal.colors.textLight}
-                autoCorrect={false}
-                autoComplete="off"
-                autoCapitalize="none"
-                autoFocus={true}
-                maxLength={32}
-                selectTextOnFocus={true}
-                blurOnSubmit={true}
-                editable={!isPending}
-                returnKeyType="done"
-                onSubmitEditing={createAppPassword}
-                accessible={true}
-                accessibilityLabel={_(msg`Name`)}
-                accessibilityHint={_(msg`Input name for app password`)}
-              />
-            </View>
-          </View>
-          <Text type="xs" style={[pal.textLight, s.mb10, s.mt2]}>
-            <Trans>
-              Can only contain letters, numbers, spaces, dashes, and
-              underscores. Must be at least 4 characters long, but no more than
-              32 characters long.
-            </Trans>
-          </Text>
-          <Toggle.Item
-            type="checkbox"
-            label={_(msg`Allow access to your direct messages`)}
-            value={privileged}
-            onChange={val => setPrivileged(val)}
-            name="privileged"
-            style={a.my_md}>
-            <Toggle.Checkbox />
-            <Toggle.LabelText>
-              <Trans>Allow access to your direct messages</Trans>
-            </Toggle.LabelText>
-          </Toggle.Item>
-        </>
-      ) : (
-        <>
-          <View>
-            <Text type="lg" style={[pal.text]}>
-              <Text type="lg-bold" style={[pal.text, s.mr5]}>
-                <Trans>Here is your app password.</Trans>
-              </Text>
-              <Trans>
-                Use this to sign into the other app along with your handle.
-              </Trans>
-            </Text>
-            <TouchableOpacity
-              style={[pal.border, styles.passwordContainer, pal.btn]}
-              onPress={onCopy}
-              accessibilityRole="button"
-              accessibilityLabel={_(msg`Copy`)}
-              accessibilityHint={_(msg`Copies app password`)}>
-              <Text type="2xl-bold" style={[pal.text]}>
-                {appPassword}
-              </Text>
-              {wasCopied ? (
-                <Text style={[pal.textLight]}>
-                  <Trans>Copied</Trans>
-                </Text>
-              ) : (
-                <FontAwesomeIcon
-                  icon={['far', 'clone']}
-                  style={pal.text as FontAwesomeIconStyle}
-                  size={18}
-                />
-              )}
-            </TouchableOpacity>
-          </View>
-          <Text type="lg" style={[pal.textLight, s.mb10]}>
-            <Trans>
-              For security reasons, you won't be able to view this again. If you
-              lose this password, you'll need to generate a new one.
-            </Trans>
-          </Text>
-        </>
-      )}
-      <View style={styles.btnContainer}>
-        <Button
-          type="primary"
-          label={!appPassword ? _(msg`Create App Password`) : _(msg`Done`)}
-          style={styles.btn}
-          labelStyle={styles.btnLabel}
-          onPress={!appPassword ? createAppPassword : onDone}
-        />
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingBottom: isNative ? 50 : 0,
-    paddingHorizontal: 16,
-  },
-  textInputWrapper: {
-    borderRadius: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 16,
-    marginBottom: 8,
-  },
-  input: {
-    flex: 1,
-    width: '100%',
-    paddingVertical: 10,
-    paddingHorizontal: 8,
-    fontSize: 17,
-    letterSpacing: 0.25,
-    fontWeight: '400',
-    borderRadius: 10,
-  },
-  passwordContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-    alignItems: 'center',
-    borderRadius: 10,
-    marginTop: 16,
-    marginBottom: 12,
-  },
-  btnContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-    marginTop: 12,
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 32,
-    paddingHorizontal: 60,
-    paddingVertical: 14,
-  },
-  btnLabel: {
-    fontSize: 18,
-  },
-  groupContent: {
-    borderTopWidth: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-})

src/view/com/modals/ChangeHandle.tsx

@@ -1,614 +0,0 @@
-import React, {useState} from 'react'
-import {
-  ActivityIndicator,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
-import {setStringAsync} from 'expo-clipboard'
-import {ComAtprotoServerDescribeServer} from '@atproto/api'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {cleanError} from '#/lib/strings/errors'
-import {createFullHandle, makeValidHandle} from '#/lib/strings/handles'
-import {s} from '#/lib/styles'
-import {useTheme} from '#/lib/ThemeContext'
-import {logger} from '#/logger'
-import {useModalControls} from '#/state/modals'
-import {useFetchDid, useUpdateHandleMutation} from '#/state/queries/handle'
-import {useServiceQuery} from '#/state/queries/service'
-import {SessionAccount, useAgent, useSession} from '#/state/session'
-import {ErrorMessage} from '../util/error/ErrorMessage'
-import {Button} from '../util/forms/Button'
-import {SelectableBtn} from '../util/forms/SelectableBtn'
-import {Text} from '../util/text/Text'
-import * as Toast from '../util/Toast'
-import {ScrollView, TextInput} from './util'
-
-export const snapPoints = ['100%']
-
-export type Props = {onChanged: () => void}
-
-export function Component(props: Props) {
-  const {currentAccount} = useSession()
-  const agent = useAgent()
-  const {
-    isLoading,
-    data: serviceInfo,
-    error: serviceInfoError,
-  } = useServiceQuery(agent.service.toString())
-
-  return isLoading || !currentAccount ? (
-    <View style={{padding: 18}}>
-      <ActivityIndicator />
-    </View>
-  ) : serviceInfoError || !serviceInfo ? (
-    <ErrorMessage message={cleanError(serviceInfoError)} />
-  ) : (
-    <Inner
-      {...props}
-      currentAccount={currentAccount}
-      serviceInfo={serviceInfo}
-    />
-  )
-}
-
-export function Inner({
-  currentAccount,
-  serviceInfo,
-  onChanged,
-}: Props & {
-  currentAccount: SessionAccount
-  serviceInfo: ComAtprotoServerDescribeServer.OutputSchema
-}) {
-  const {_} = useLingui()
-  const pal = usePalette('default')
-  const {closeModal} = useModalControls()
-  const {mutateAsync: updateHandle, isPending: isUpdateHandlePending} =
-    useUpdateHandleMutation()
-  const agent = useAgent()
-
-  const [error, setError] = useState<string>('')
-
-  const [isCustom, setCustom] = React.useState<boolean>(false)
-  const [handle, setHandle] = React.useState<string>('')
-  const [canSave, setCanSave] = React.useState<boolean>(false)
-
-  const userDomain = serviceInfo.availableUserDomains?.[0]
-
-  // events
-  // =
-  const onPressCancel = React.useCallback(() => {
-    closeModal()
-  }, [closeModal])
-  const onToggleCustom = React.useCallback(() => {
-    // toggle between a provided domain vs a custom one
-    setHandle('')
-    setCanSave(false)
-    setCustom(!isCustom)
-  }, [setCustom, isCustom])
-  const onPressSave = React.useCallback(async () => {
-    if (!userDomain) {
-      logger.error(`ChangeHandle: userDomain is undefined`, {
-        service: serviceInfo,
-      })
-      setError(`The service you've selected has no domains configured.`)
-      return
-    }
-
-    try {
-      const newHandle = isCustom ? handle : createFullHandle(handle, userDomain)
-      logger.debug(`Updating handle to ${newHandle}`)
-      await updateHandle({
-        handle: newHandle,
-      })
-      await agent.resumeSession(agent.session!)
-      closeModal()
-      onChanged()
-    } catch (err: any) {
-      setError(cleanError(err))
-      logger.error('Failed to update handle', {handle, message: err})
-    } finally {
-    }
-  }, [
-    setError,
-    handle,
-    userDomain,
-    isCustom,
-    onChanged,
-    closeModal,
-    updateHandle,
-    serviceInfo,
-    agent,
-  ])
-
-  // rendering
-  // =
-  return (
-    <View style={[s.flex1, pal.view]}>
-      <View style={[styles.title, pal.border]}>
-        <View style={styles.titleLeft}>
-          <TouchableOpacity
-            onPress={onPressCancel}
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`Cancel change handle`)}
-            accessibilityHint={_(msg`Exits handle change process`)}
-            onAccessibilityEscape={onPressCancel}>
-            <Text type="lg" style={pal.textLight}>
-              <Trans>Cancel</Trans>
-            </Text>
-          </TouchableOpacity>
-        </View>
-        <Text
-          type="2xl-bold"
-          style={[styles.titleMiddle, pal.text]}
-          numberOfLines={1}>
-          <Trans>Change Handle</Trans>
-        </Text>
-        <View style={styles.titleRight}>
-          {isUpdateHandlePending ? (
-            <ActivityIndicator />
-          ) : canSave ? (
-            <TouchableOpacity
-              onPress={onPressSave}
-              accessibilityRole="button"
-              accessibilityLabel={_(msg`Save handle change`)}
-              accessibilityHint={_(msg`Saves handle change to ${handle}`)}>
-              <Text type="2xl-medium" style={pal.link}>
-                <Trans>Save</Trans>
-              </Text>
-            </TouchableOpacity>
-          ) : undefined}
-        </View>
-      </View>
-      <ScrollView style={styles.inner}>
-        {error !== '' && (
-          <View style={styles.errorContainer}>
-            <ErrorMessage message={error} />
-          </View>
-        )}
-
-        {isCustom ? (
-          <CustomHandleForm
-            currentAccount={currentAccount}
-            handle={handle}
-            isProcessing={isUpdateHandlePending}
-            canSave={canSave}
-            onToggleCustom={onToggleCustom}
-            setHandle={setHandle}
-            setCanSave={setCanSave}
-            onPressSave={onPressSave}
-          />
-        ) : (
-          <ProvidedHandleForm
-            handle={handle}
-            userDomain={userDomain}
-            isProcessing={isUpdateHandlePending}
-            onToggleCustom={onToggleCustom}
-            setHandle={setHandle}
-            setCanSave={setCanSave}
-          />
-        )}
-      </ScrollView>
-    </View>
-  )
-}
-
-/**
- * The form for using a domain allocated by the PDS
- */
-function ProvidedHandleForm({
-  userDomain,
-  handle,
-  isProcessing,
-  setHandle,
-  onToggleCustom,
-  setCanSave,
-}: {
-  userDomain: string
-  handle: string
-  isProcessing: boolean
-  setHandle: (v: string) => void
-  onToggleCustom: () => void
-  setCanSave: (v: boolean) => void
-}) {
-  const pal = usePalette('default')
-  const theme = useTheme()
-  const {_} = useLingui()
-
-  // events
-  // =
-  const onChangeHandle = React.useCallback(
-    (v: string) => {
-      const newHandle = makeValidHandle(v)
-      setHandle(newHandle)
-      setCanSave(newHandle.length > 0)
-    },
-    [setHandle, setCanSave],
-  )
-
-  // rendering
-  // =
-  return (
-    <>
-      <View style={[pal.btn, styles.textInputWrapper]}>
-        <FontAwesomeIcon
-          icon="at"
-          style={[pal.textLight, styles.textInputIcon]}
-        />
-        <TextInput
-          testID="setHandleInput"
-          style={[pal.text, styles.textInput]}
-          placeholder={_(msg`e.g. alice`)}
-          placeholderTextColor={pal.colors.textLight}
-          autoCapitalize="none"
-          keyboardAppearance={theme.colorScheme}
-          value={handle}
-          onChangeText={onChangeHandle}
-          editable={!isProcessing}
-          accessible={true}
-          accessibilityLabel={_(msg`Handle`)}
-          accessibilityHint={_(msg`Sets Bluesky username`)}
-        />
-      </View>
-      <Text type="md" style={[pal.textLight, s.pl10, s.pt10]}>
-        <Trans>
-          Your full handle will be{' '}
-          <Text type="md-bold" style={pal.textLight}>
-            @{createFullHandle(handle, userDomain)}
-          </Text>
-        </Trans>
-      </Text>
-      <TouchableOpacity
-        onPress={onToggleCustom}
-        accessibilityRole="button"
-        accessibilityLabel={_(msg`Hosting provider`)}
-        accessibilityHint={_(msg`Opens modal for using custom domain`)}>
-        <Text type="md-medium" style={[pal.link, s.pl10, s.pt5]}>
-          <Trans>I have my own domain</Trans>
-        </Text>
-      </TouchableOpacity>
-    </>
-  )
-}
-
-/**
- * The form for using a custom domain
- */
-function CustomHandleForm({
-  currentAccount,
-  handle,
-  canSave,
-  isProcessing,
-  setHandle,
-  onToggleCustom,
-  onPressSave,
-  setCanSave,
-}: {
-  currentAccount: SessionAccount
-  handle: string
-  canSave: boolean
-  isProcessing: boolean
-  setHandle: (v: string) => void
-  onToggleCustom: () => void
-  onPressSave: () => void
-  setCanSave: (v: boolean) => void
-}) {
-  const pal = usePalette('default')
-  const palSecondary = usePalette('secondary')
-  const palError = usePalette('error')
-  const theme = useTheme()
-  const {_} = useLingui()
-  const [isVerifying, setIsVerifying] = React.useState(false)
-  const [error, setError] = React.useState<string>('')
-  const [isDNSForm, setDNSForm] = React.useState<boolean>(true)
-  const fetchDid = useFetchDid()
-  // events
-  // =
-  const onPressCopy = React.useCallback(() => {
-    setStringAsync(isDNSForm ? `did=${currentAccount.did}` : currentAccount.did)
-    Toast.show(_(msg`Copied to clipboard`), 'clipboard-check')
-  }, [currentAccount, isDNSForm, _])
-  const onChangeHandle = React.useCallback(
-    (v: string) => {
-      setHandle(v)
-      setCanSave(false)
-    },
-    [setHandle, setCanSave],
-  )
-  const onPressVerify = React.useCallback(async () => {
-    if (canSave) {
-      onPressSave()
-    }
-    try {
-      setIsVerifying(true)
-      setError('')
-      const did = await fetchDid(handle)
-      if (did === currentAccount.did) {
-        setCanSave(true)
-      } else {
-        setError(`Incorrect DID returned (got ${did})`)
-      }
-    } catch (err: any) {
-      setError(cleanError(err))
-      logger.error('Failed to verify domain', {handle, error: err})
-    } finally {
-      setIsVerifying(false)
-    }
-  }, [
-    handle,
-    currentAccount,
-    setIsVerifying,
-    setCanSave,
-    setError,
-    canSave,
-    onPressSave,
-    fetchDid,
-  ])
-
-  // rendering
-  // =
-  return (
-    <>
-      <Text type="md" style={[pal.text, s.pb5, s.pl5]} nativeID="customDomain">
-        <Trans>Enter the domain you want to use</Trans>
-      </Text>
-      <View style={[pal.btn, styles.textInputWrapper]}>
-        <FontAwesomeIcon
-          icon="at"
-          style={[pal.textLight, styles.textInputIcon]}
-        />
-        <TextInput
-          testID="setHandleInput"
-          style={[pal.text, styles.textInput]}
-          placeholder={_(msg`e.g. alice.com`)}
-          placeholderTextColor={pal.colors.textLight}
-          autoCapitalize="none"
-          keyboardAppearance={theme.colorScheme}
-          value={handle}
-          onChangeText={onChangeHandle}
-          editable={!isProcessing}
-          accessibilityLabelledBy="customDomain"
-          accessibilityLabel={_(msg`Custom domain`)}
-          accessibilityHint={_(msg`Input your preferred hosting provider`)}
-        />
-      </View>
-      <View style={styles.spacer} />
-
-      <View style={[styles.selectableBtns]}>
-        <SelectableBtn
-          selected={isDNSForm}
-          label={_(msg`DNS Panel`)}
-          left
-          onSelect={() => setDNSForm(true)}
-          accessibilityHint={_(msg`Use the DNS panel`)}
-          style={s.flex1}
-        />
-        <SelectableBtn
-          selected={!isDNSForm}
-          label={_(msg`No DNS Panel`)}
-          right
-          onSelect={() => setDNSForm(false)}
-          accessibilityHint={_(msg`Use a file on your server`)}
-          style={s.flex1}
-        />
-      </View>
-      <View style={styles.spacer} />
-      {isDNSForm ? (
-        <>
-          <Text type="md" style={[pal.text, s.pb5, s.pl5]}>
-            <Trans>Add the following DNS record to your domain:</Trans>
-          </Text>
-          <View style={[styles.dnsTable, pal.btn]}>
-            <Text type="md-medium" style={[styles.dnsLabel, pal.text]}>
-              <Trans>Host:</Trans>
-            </Text>
-            <View style={[styles.dnsValue]}>
-              <Text type="mono" style={[styles.monoText, pal.text]}>
-                _atproto
-              </Text>
-            </View>
-            <Text type="md-medium" style={[styles.dnsLabel, pal.text]}>
-              <Trans>Type:</Trans>
-            </Text>
-            <View style={[styles.dnsValue]}>
-              <Text type="mono" style={[styles.monoText, pal.text]}>
-                TXT
-              </Text>
-            </View>
-            <Text type="md-medium" style={[styles.dnsLabel, pal.text]}>
-              <Trans>Value:</Trans>
-            </Text>
-            <View style={[styles.dnsValue]}>
-              <Text type="mono" style={[styles.monoText, pal.text]}>
-                did={currentAccount.did}
-              </Text>
-            </View>
-          </View>
-          <Text type="md" style={[pal.text, s.pt20, s.pl5]}>
-            <Trans>This should create a domain record at:</Trans>
-          </Text>
-          <Text type="mono" style={[styles.monoText, pal.text, s.pt5, s.pl5]}>
-            _atproto.{handle}
-          </Text>
-        </>
-      ) : (
-        <>
-          <Text type="md" style={[pal.text, s.pb5, s.pl5]}>
-            <Trans>Upload a text file to:</Trans>
-          </Text>
-          <View style={[styles.valueContainer, pal.btn]}>
-            <View style={[styles.dnsValue]}>
-              <Text type="mono" style={[styles.monoText, pal.text]}>
-                https://{handle}/.well-known/atproto-did
-              </Text>
-            </View>
-          </View>
-          <View style={styles.spacer} />
-          <Text type="md" style={[pal.text, s.pb5, s.pl5]}>
-            <Trans>That contains the following:</Trans>
-          </Text>
-          <View style={[styles.valueContainer, pal.btn]}>
-            <View style={[styles.dnsValue]}>
-              <Text type="mono" style={[styles.monoText, pal.text]}>
-                {currentAccount.did}
-              </Text>
-            </View>
-          </View>
-        </>
-      )}
-
-      <View style={styles.spacer} />
-      <Button type="default" style={[s.p20, s.mb10]} onPress={onPressCopy}>
-        <Text type="xl" style={[pal.link, s.textCenter]}>
-          <Trans>
-            Copy {isDNSForm ? _(msg`Domain Value`) : _(msg`File Contents`)}
-          </Trans>
-        </Text>
-      </Button>
-      {canSave === true && (
-        <View style={[styles.message, palSecondary.view]}>
-          <Text type="md-medium" style={palSecondary.text}>
-            <Trans>Domain verified!</Trans>
-          </Text>
-        </View>
-      )}
-      {error ? (
-        <View style={[styles.message, palError.view]}>
-          <Text type="md-medium" style={palError.text}>
-            {error}
-          </Text>
-        </View>
-      ) : null}
-      <Button
-        type="primary"
-        style={[s.p20, isVerifying && styles.dimmed]}
-        onPress={onPressVerify}>
-        {isVerifying ? (
-          <ActivityIndicator color="white" />
-        ) : (
-          <Text type="xl-medium" style={[s.white, s.textCenter]}>
-            {canSave
-              ? _(msg`Update to ${handle}`)
-              : isDNSForm
-              ? _(msg`Verify DNS Record`)
-              : _(msg`Verify Text File`)}
-          </Text>
-        )}
-      </Button>
-      <View style={styles.spacer} />
-      <TouchableOpacity
-        onPress={onToggleCustom}
-        accessibilityLabel={_(msg`Use default provider`)}
-        accessibilityHint={_(msg`Use bsky.social as hosting provider`)}>
-        <Text type="md-medium" style={[pal.link, s.pl10, s.pt5]}>
-          <Trans>Nevermind, create a handle for me</Trans>
-        </Text>
-      </TouchableOpacity>
-    </>
-  )
-}
-
-const styles = StyleSheet.create({
-  inner: {
-    padding: 14,
-  },
-  footer: {
-    padding: 14,
-  },
-  spacer: {
-    height: 20,
-  },
-  dimmed: {
-    opacity: 0.7,
-  },
-
-  selectableBtns: {
-    flexDirection: 'row',
-  },
-
-  title: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingTop: 25,
-    paddingHorizontal: 20,
-    paddingBottom: 15,
-    borderBottomWidth: 1,
-  },
-  titleLeft: {
-    width: 80,
-  },
-  titleRight: {
-    width: 80,
-    flexDirection: 'row',
-    justifyContent: 'flex-end',
-  },
-  titleMiddle: {
-    flex: 1,
-    textAlign: 'center',
-    fontSize: 21,
-  },
-
-  textInputWrapper: {
-    borderRadius: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  textInputIcon: {
-    marginLeft: 12,
-  },
-  textInput: {
-    flex: 1,
-    width: '100%',
-    paddingVertical: 10,
-    paddingHorizontal: 8,
-    fontSize: 17,
-    letterSpacing: 0.25,
-    fontWeight: '400',
-    borderRadius: 10,
-  },
-
-  valueContainer: {
-    borderRadius: 4,
-    paddingVertical: 16,
-  },
-
-  dnsTable: {
-    borderRadius: 4,
-    paddingTop: 2,
-    paddingBottom: 16,
-  },
-  dnsLabel: {
-    paddingHorizontal: 14,
-    paddingTop: 10,
-  },
-  dnsValue: {
-    paddingHorizontal: 14,
-    borderRadius: 4,
-  },
-  monoText: {
-    fontSize: 18,
-    lineHeight: 20,
-  },
-
-  message: {
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderRadius: 8,
-    marginBottom: 10,
-  },
-
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '100%',
-    borderRadius: 32,
-    padding: 10,
-    marginBottom: 10,
-  },
-  errorContainer: {marginBottom: 10},
-})

src/view/com/modals/Modal.tsx

@@ -7,9 +7,7 @@ import {usePalette} from '#/lib/hooks/usePalette'
 import {useModalControls, useModals} from '#/state/modals'
 import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop'
-import * as AddAppPassword from './AddAppPasswords'
 import * as ChangeEmailModal from './ChangeEmail'
-import * as ChangeHandleModal from './ChangeHandle'
 import * as ChangePasswordModal from './ChangePassword'
 import * as CreateOrEditListModal from './CreateOrEditList'
 import * as DeleteAccountModal from './DeleteAccount'
@@ -69,15 +67,9 @@ export function ModalsContainer() {
   } else if (activeModal?.name === 'delete-account') {
     snapPoints = DeleteAccountModal.snapPoints
     element = <DeleteAccountModal.Component />
-  } else if (activeModal?.name === 'change-handle') {
-    snapPoints = ChangeHandleModal.snapPoints
-    element = <ChangeHandleModal.Component {...activeModal} />
   } else if (activeModal?.name === 'invite-codes') {
     snapPoints = InviteCodesModal.snapPoints
     element = <InviteCodesModal.Component />
-  } else if (activeModal?.name === 'add-app-password') {
-    snapPoints = AddAppPassword.snapPoints
-    element = <AddAppPassword.Component />
   } else if (activeModal?.name === 'content-languages-settings') {
     snapPoints = ContentLanguagesSettingsModal.snapPoints
     element = <ContentLanguagesSettingsModal.Component />

src/view/com/modals/Modal.web.tsx

@@ -7,9 +7,7 @@ import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import type {Modal as ModalIface} from '#/state/modals'
 import {useModalControls, useModals} from '#/state/modals'
-import * as AddAppPassword from './AddAppPasswords'
 import * as ChangeEmailModal from './ChangeEmail'
-import * as ChangeHandleModal from './ChangeHandle'
 import * as ChangePasswordModal from './ChangePassword'
 import * as CreateOrEditListModal from './CreateOrEditList'
 import * as CropImageModal from './CropImage.web'
@@ -74,12 +72,8 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <CropImageModal.Component {...modal} />
   } else if (modal.name === 'delete-account') {
     element = <DeleteAccountModal.Component />
-  } else if (modal.name === 'change-handle') {
-    element = <ChangeHandleModal.Component {...modal} />
   } else if (modal.name === 'invite-codes') {
     element = <InviteCodesModal.Component />
-  } else if (modal.name === 'add-app-password') {
-    element = <AddAppPassword.Component />
   } else if (modal.name === 'content-languages-settings') {
     element = <ContentLanguagesSettingsModal.Component />
   } else if (modal.name === 'post-languages-settings') {

src/view/com/profile/ProfileSubpageHeader.tsx

@@ -1,5 +1,12 @@
 import React from 'react'
 import {Pressable, StyleSheet, View} from 'react-native'
+import Animated, {
+  measure,
+  MeasuredDimensions,
+  runOnJS,
+  runOnUI,
+  useAnimatedRef,
+} from 'react-native-reanimated'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -53,6 +60,7 @@ export function ProfileSubpageHeader({
   const {openLightbox} = useLightboxControls()
   const pal = usePalette('default')
   const canGoBack = navigation.canGoBack()
+  const aviRef = useAnimatedRef()
 
   const onPressBack = React.useCallback(() => {
     if (navigation.canGoBack()) {
@@ -66,28 +74,40 @@ export function ProfileSubpageHeader({
     setDrawerOpen(true)
   }, [setDrawerOpen])
 
-  const onPressAvi = React.useCallback(() => {
-    if (
-      avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride)
-    ) {
+  const _openLightbox = React.useCallback(
+    (uri: string, thumbRect: MeasuredDimensions | null) => {
       openLightbox({
         images: [
           {
-            uri: avatar,
-            thumbUri: avatar,
+            uri,
+            thumbUri: uri,
+            thumbRect,
             dimensions: {
               // It's fine if it's actually smaller but we know it's 1:1.
               height: 1000,
               width: 1000,
             },
+            thumbDimensions: null,
             type: 'rect-avi',
           },
         ],
         index: 0,
-        thumbDims: null,
       })
+    },
+    [openLightbox],
+  )
+
+  const onPressAvi = React.useCallback(() => {
+    if (
+      avatar // TODO && !(view.moderation.avatar.blur && view.moderation.avatar.noOverride)
+    ) {
+      runOnUI(() => {
+        'worklet'
+        const rect = measure(aviRef)
+        runOnJS(_openLightbox)(avatar, rect)
+      })()
     }
-  }, [openLightbox, avatar])
+  }, [_openLightbox, avatar, aviRef])
 
   return (
     <CenteredView style={pal.view}>
@@ -135,19 +155,21 @@ export function ProfileSubpageHeader({
           paddingBottom: 6,
           paddingHorizontal: isMobile ? 12 : 14,
         }}>
-        <Pressable
-          testID="headerAviButton"
-          onPress={onPressAvi}
-          accessibilityRole="image"
-          accessibilityLabel={_(msg`View the avatar`)}
-          accessibilityHint=""
-          style={{width: 58}}>
-          {avatarType === 'starter-pack' ? (
-            <StarterPack width={58} gradient="sky" />
-          ) : (
-            <UserAvatar type={avatarType} size={58} avatar={avatar} />
-          )}
-        </Pressable>
+        <Animated.View ref={aviRef} collapsable={false}>
+          <Pressable
+            testID="headerAviButton"
+            onPress={onPressAvi}
+            accessibilityRole="image"
+            accessibilityLabel={_(msg`View the avatar`)}
+            accessibilityHint=""
+            style={{width: 58}}>
+            {avatarType === 'starter-pack' ? (
+              <StarterPack width={58} gradient="sky" />
+            ) : (
+              <UserAvatar type={avatarType} size={58} avatar={avatar} />
+            )}
+          </Pressable>
+        </Animated.View>
         <View style={{flex: 1}}>
           {isLoading ? (
             <LoadingPlaceholder

src/view/com/util/AccountDropdownBtn.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import {Pressable} from 'react-native'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {s} from '#/lib/styles'
-import {SessionAccount, useSessionApi} from '#/state/session'
-import {useDialogControl} from '#/components/Dialog'
-import * as Prompt from '#/components/Prompt'
-import * as Toast from '../../com/util/Toast'
-import {DropdownItem, NativeDropdown} from './forms/NativeDropdown'
-
-export function AccountDropdownBtn({account}: {account: SessionAccount}) {
-  const pal = usePalette('default')
-  const {removeAccount} = useSessionApi()
-  const removePromptControl = useDialogControl()
-  const {_} = useLingui()
-
-  const items: DropdownItem[] = [
-    {
-      label: _(msg`Remove account`),
-      onPress: removePromptControl.open,
-      icon: {
-        ios: {
-          name: 'trash',
-        },
-        android: 'ic_delete',
-        web: ['far', 'trash-can'],
-      },
-    },
-  ]
-  return (
-    <>
-      <Pressable accessibilityRole="button" style={s.pl10}>
-        <NativeDropdown
-          testID="accountSettingsDropdownBtn"
-          items={items}
-          accessibilityLabel={_(msg`Account options`)}
-          accessibilityHint="">
-          <FontAwesomeIcon
-            icon="ellipsis-h"
-            style={pal.textLight as FontAwesomeIconStyle}
-          />
-        </NativeDropdown>
-      </Pressable>
-      <Prompt.Basic
-        control={removePromptControl}
-        title={_(msg`Remove from quick access?`)}
-        description={_(
-          msg`This will remove @${account.handle} from the quick access list.`,
-        )}
-        onConfirm={() => {
-          removeAccount(account)
-          Toast.show(_(msg`Account removed from quick access`))
-        }}
-        confirmButtonCta={_(msg`Remove`)}
-        confirmButtonColor="negative"
-      />
-    </>
-  )
-}

src/view/com/util/List.web.tsx

@@ -448,7 +448,9 @@ let Row = function RowImpl<ItemT>({
   onItemSeen: ((item: any) => void) | undefined
 }): React.ReactNode {
   const rowRef = React.useRef(null)
-  const intersectionTimeout = React.useRef<NodeJS.Timer | undefined>(undefined)
+  const intersectionTimeout = React.useRef<
+    ReturnType<typeof setTimeout> | undefined
+  >(undefined)
 
   const handleIntersection = useNonReactiveCallback(
     (entries: IntersectionObserverEntry[]) => {
@@ -466,7 +468,7 @@ let Row = function RowImpl<ItemT>({
             }
           } else {
             if (intersectionTimeout.current) {
-              clearTimeout(intersectionTimeout.current)
+              clearTimeout(intersectionTimeout.current as NodeJS.Timeout)
               intersectionTimeout.current = undefined
             }
           }

src/view/com/util/images/AutoSizedImage.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import {DimensionValue, Pressable, View} from 'react-native'
+import Animated, {AnimatedRef, useAnimatedRef} from 'react-native-reanimated'
 import {Image} from 'expo-image'
 import {AppBskyEmbedImages} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useImageDimensions} from '#/lib/media/image-sizes'
-import {Dimensions} from '#/lib/media/types'
+import type {Dimensions} from '#/lib/media/types'
 import {isNative} from '#/platform/detection'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
@@ -14,30 +14,6 @@ import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/compone
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {Text} from '#/components/Typography'
 
-function useImageAspectRatio({
-  src,
-  knownDimensions,
-}: {
-  src: string
-  knownDimensions: Dimensions | null
-}) {
-  const [raw] = useImageDimensions({src, knownDimensions})
-  let constrained: number | undefined
-  let max: number | undefined
-  let isCropped: boolean | undefined
-  if (raw !== undefined) {
-    const ratio = 1 / 2 // max of 1:2 ratio in feeds
-    constrained = Math.max(raw, ratio)
-    max = Math.max(raw, 0.25) // max of 1:4 in thread
-    isCropped = raw < constrained
-  }
-  return {
-    constrained,
-    max,
-    isCropped,
-  }
-}
-
 export function ConstrainedImage({
   aspectRatio,
   fullBleed,
@@ -92,27 +68,44 @@ export function AutoSizedImage({
   image: AppBskyEmbedImages.ViewImage
   crop?: 'none' | 'square' | 'constrained'
   hideBadge?: boolean
-  onPress?: () => void
+  onPress?: (
+    containerRef: AnimatedRef<React.Component<{}, {}, any>>,
+    fetchedDims: Dimensions | null,
+  ) => void
   onLongPress?: () => void
   onPressIn?: () => void
 }) {
   const t = useTheme()
   const {_} = useLingui()
   const largeAlt = useLargeAltBadgeEnabled()
-  const {
-    constrained,
-    max,
-    isCropped: rawIsCropped,
-  } = useImageAspectRatio({
-    src: image.thumb,
-    knownDimensions: image.aspectRatio ?? null,
-  })
+  const containerRef = useAnimatedRef()
+
+  const [fetchedDims, setFetchedDims] = React.useState<Dimensions | null>(null)
+  const dims = fetchedDims ?? image.aspectRatio
+  let aspectRatio: number | undefined
+  if (dims) {
+    aspectRatio = dims.width / dims.height
+    if (Number.isNaN(aspectRatio)) {
+      aspectRatio = undefined
+    }
+  }
+
+  let constrained: number | undefined
+  let max: number | undefined
+  let rawIsCropped: boolean | undefined
+  if (aspectRatio !== undefined) {
+    const ratio = 1 / 2 // max of 1:2 ratio in feeds
+    constrained = Math.max(aspectRatio, ratio)
+    max = Math.max(aspectRatio, 0.25) // max of 1:4 in thread
+    rawIsCropped = aspectRatio < constrained
+  }
+
   const cropDisabled = crop === 'none'
   const isCropped = rawIsCropped && !cropDisabled
   const hasAlt = !!image.alt
 
   const contents = (
-    <>
+    <Animated.View ref={containerRef} collapsable={false} style={{flex: 1}}>
       <Image
         style={[a.w_full, a.h_full]}
         source={image.thumb}
@@ -120,6 +113,13 @@ export function AutoSizedImage({
         accessibilityIgnoresInvertColors
         accessibilityLabel={image.alt}
         accessibilityHint=""
+        onLoad={
+          fetchedDims
+            ? undefined
+            : e => {
+                setFetchedDims({width: e.source.width, height: e.source.height})
+              }
+        }
       />
       <MediaInsetBorder />
 
@@ -185,13 +185,13 @@ export function AutoSizedImage({
           )}
         </View>
       ) : null}
-    </>
+    </Animated.View>
   )
 
   if (cropDisabled) {
     return (
       <Pressable
-        onPress={onPress}
+        onPress={() => onPress?.(containerRef, fetchedDims)}
         onLongPress={onLongPress}
         onPressIn={onPressIn}
         // alt here is what screen readers actually use
@@ -213,7 +213,7 @@ export function AutoSizedImage({
         fullBleed={crop === 'square'}
         aspectRatio={constrained ?? 1}>
         <Pressable
-          onPress={onPress}
+          onPress={() => onPress?.(containerRef, fetchedDims)}
           onLongPress={onLongPress}
           onPressIn={onPressIn}
           // alt here is what screen readers actually use

src/view/com/util/images/Gallery.tsx

@@ -1,11 +1,12 @@
 import React from 'react'
 import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
-import Animated, {AnimatedRef, useAnimatedRef} from 'react-native-reanimated'
+import Animated, {AnimatedRef} from 'react-native-reanimated'
 import {Image, ImageStyle} from 'expo-image'
 import {AppBskyEmbedImages} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {Dimensions} from '#/lib/media/types'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
 import {PostEmbedViewContext} from '#/view/com/util/post-embeds/types'
 import {atoms as a, useTheme} from '#/alf'
@@ -19,13 +20,16 @@ interface Props {
   index: number
   onPress?: (
     index: number,
-    containerRef: AnimatedRef<React.Component<{}, {}, any>>,
+    containerRefs: AnimatedRef<React.Component<{}, {}, any>>[],
+    fetchedDims: (Dimensions | null)[],
   ) => void
   onLongPress?: EventFunction
   onPressIn?: EventFunction
   imageStyle?: StyleProp<ImageStyle>
   viewContext?: PostEmbedViewContext
   insetBorderStyle?: StyleProp<ViewStyle>
+  containerRefs: AnimatedRef<React.Component<{}, {}, any>>[]
+  thumbDimsRef: React.MutableRefObject<(Dimensions | null)[]>
 }
 
 export function GalleryItem({
@@ -37,6 +41,8 @@ export function GalleryItem({
   onLongPress,
   viewContext,
   insetBorderStyle,
+  containerRefs,
+  thumbDimsRef,
 }: Props) {
   const t = useTheme()
   const {_} = useLingui()
@@ -45,11 +51,17 @@ export function GalleryItem({
   const hasAlt = !!image.alt
   const hideBadges =
     viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
-  const containerRef = useAnimatedRef()
   return (
-    <Animated.View style={a.flex_1} ref={containerRef}>
+    <Animated.View
+      style={a.flex_1}
+      ref={containerRefs[index]}
+      collapsable={false}>
       <Pressable
-        onPress={onPress ? () => onPress(index, containerRef) : undefined}
+        onPress={
+          onPress
+            ? () => onPress(index, containerRefs, thumbDimsRef.current.slice())
+            : undefined
+        }
         onPressIn={onPressIn ? () => onPressIn(index) : undefined}
         onLongPress={onLongPress ? () => onLongPress(index) : undefined}
         style={[
@@ -68,6 +80,12 @@ export function GalleryItem({
           accessibilityLabel={image.alt}
           accessibilityHint=""
           accessibilityIgnoresInvertColors
+          onLoad={e => {
+            thumbDimsRef.current[index] = {
+              width: e.source.width,
+              height: e.source.height,
+            }
+          }}
         />
         <MediaInsetBorder style={insetBorderStyle} />
       </Pressable>

src/view/com/util/images/ImageLayoutGrid.tsx

@@ -1,17 +1,19 @@
 import React from 'react'
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
-import {AnimatedRef} from 'react-native-reanimated'
+import {AnimatedRef, useAnimatedRef} from 'react-native-reanimated'
 import {AppBskyEmbedImages} from '@atproto/api'
 
 import {PostEmbedViewContext} from '#/view/com/util/post-embeds/types'
 import {atoms as a, useBreakpoints} from '#/alf'
+import {Dimensions} from '../../lightbox/ImageViewing/@types'
 import {GalleryItem} from './Gallery'
 
 interface ImageLayoutGridProps {
   images: AppBskyEmbedImages.ViewImage[]
   onPress?: (
     index: number,
-    containerRef: AnimatedRef<React.Component<{}, {}, any>>,
+    containerRefs: AnimatedRef<React.Component<{}, {}, any>>[],
+    fetchedDims: (Dimensions | null)[],
   ) => void
   onLongPress?: (index: number) => void
   onPressIn?: (index: number) => void
@@ -41,7 +43,8 @@ interface ImageLayoutGridInnerProps {
   images: AppBskyEmbedImages.ViewImage[]
   onPress?: (
     index: number,
-    containerRef: AnimatedRef<React.Component<{}, {}, any>>,
+    containerRefs: AnimatedRef<React.Component<{}, {}, any>>[],
+    fetchedDims: (Dimensions | null)[],
   ) => void
   onLongPress?: (index: number) => void
   onPressIn?: (index: number) => void
@@ -53,8 +56,15 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
   const gap = props.gap
   const count = props.images.length
 
+  const containerRef1 = useAnimatedRef()
+  const containerRef2 = useAnimatedRef()
+  const containerRef3 = useAnimatedRef()
+  const containerRef4 = useAnimatedRef()
+  const thumbDimsRef = React.useRef<(Dimensions | null)[]>([])
+
   switch (count) {
-    case 2:
+    case 2: {
+      const containerRefs = [containerRef1, containerRef2]
       return (
         <View style={[a.flex_1, a.flex_row, gap]}>
           <View style={[a.flex_1, {aspectRatio: 1}]}>
@@ -62,6 +72,8 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
               {...props}
               index={0}
               insetBorderStyle={noCorners(['topRight', 'bottomRight'])}
+              containerRefs={containerRefs}
+              thumbDimsRef={thumbDimsRef}
             />
           </View>
           <View style={[a.flex_1, {aspectRatio: 1}]}>
@@ -69,12 +81,16 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
               {...props}
               index={1}
               insetBorderStyle={noCorners(['topLeft', 'bottomLeft'])}
+              containerRefs={containerRefs}
+              thumbDimsRef={thumbDimsRef}
             />
           </View>
         </View>
       )
+    }
 
-    case 3:
+    case 3: {
+      const containerRefs = [containerRef1, containerRef2, containerRef3]
       return (
         <View style={[a.flex_1, a.flex_row, gap]}>
           <View style={[a.flex_1, {aspectRatio: 1}]}>
@@ -82,6 +98,8 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
               {...props}
               index={0}
               insetBorderStyle={noCorners(['topRight', 'bottomRight'])}
+              containerRefs={containerRefs}
+              thumbDimsRef={thumbDimsRef}
             />
           </View>
           <View style={[a.flex_1, {aspectRatio: 1}, gap]}>
@@ -94,6 +112,8 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
                   'bottomLeft',
                   'bottomRight',
                 ])}
+                containerRefs={containerRefs}
+                thumbDimsRef={thumbDimsRef}
               />
             </View>
             <View style={[a.flex_1]}>
@@ -105,13 +125,22 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
                   'bottomLeft',
                   'topRight',
                 ])}
+                containerRefs={containerRefs}
+                thumbDimsRef={thumbDimsRef}
               />
             </View>
           </View>
         </View>
       )
+    }
 
-    case 4:
+    case 4: {
+      const containerRefs = [
+        containerRef1,
+        containerRef2,
+        containerRef3,
+        containerRef4,
+      ]
       return (
         <>
           <View style={[a.flex_row, gap]}>
@@ -124,6 +153,8 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
                   'topRight',
                   'bottomRight',
                 ])}
+                containerRefs={containerRefs}
+                thumbDimsRef={thumbDimsRef}
               />
             </View>
             <View style={[a.flex_1, {aspectRatio: 1.5}]}>
@@ -135,6 +166,8 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
                   'bottomLeft',
                   'bottomRight',
                 ])}
+                containerRefs={containerRefs}
+                thumbDimsRef={thumbDimsRef}
               />
             </View>
           </View>
@@ -148,6 +181,8 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
                   'topRight',
                   'bottomRight',
                 ])}
+                containerRefs={containerRefs}
+                thumbDimsRef={thumbDimsRef}
               />
             </View>
             <View style={[a.flex_1, {aspectRatio: 1.5}]}>
@@ -159,11 +194,14 @@ function ImageLayoutGridInner(props: ImageLayoutGridInnerProps) {
                   'bottomLeft',
                   'topRight',
                 ])}
+                containerRefs={containerRefs}
+                thumbDimsRef={thumbDimsRef}
               />
             </View>
           </View>
         </>
       )
+    }
 
     default:
       return null

src/view/com/util/post-embeds/index.tsx

@@ -6,13 +6,12 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import Animated, {
+import {
   AnimatedRef,
   measure,
   MeasuredDimensions,
   runOnJS,
   runOnUI,
-  useAnimatedRef,
 } from 'react-native-reanimated'
 import {Image} from 'expo-image'
 import {
@@ -36,6 +35,7 @@ import {atoms as a, useTheme} from '#/alf'
 import * as ListCard from '#/components/ListCard'
 import {Embed as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
 import {ContentHider} from '../../../../components/moderation/ContentHider'
+import {Dimensions} from '../../lightbox/ImageViewing/@types'
 import {AutoSizedImage} from '../images/AutoSizedImage'
 import {ImageLayoutGrid} from '../images/ImageLayoutGrid'
 import {ExternalLinkEmbed} from './ExternalLinkEmbed'
@@ -69,7 +69,6 @@ export function PostEmbeds({
   viewContext?: PostEmbedViewContext
 }) {
   const {openLightbox} = useLightboxControls()
-  const containerRef = useAnimatedRef()
 
   // quote post with media
   // =
@@ -149,25 +148,28 @@ export function PostEmbeds({
       }))
       const _openLightbox = (
         index: number,
-        thumbDims: MeasuredDimensions | null,
+        thumbRects: (MeasuredDimensions | null)[],
+        fetchedDims: (Dimensions | null)[],
       ) => {
         openLightbox({
-          images: items.map(item => ({
+          images: items.map((item, i) => ({
             ...item,
+            thumbRect: thumbRects[i] ?? null,
+            thumbDimensions: fetchedDims[i] ?? null,
             type: 'image',
           })),
           index,
-          thumbDims,
         })
       }
       const onPress = (
         index: number,
-        ref: AnimatedRef<React.Component<{}, {}, any>>,
+        refs: AnimatedRef<React.Component<{}, {}, any>>[],
+        fetchedDims: (Dimensions | null)[],
       ) => {
         runOnUI(() => {
           'worklet'
-          const dims = measure(ref)
-          runOnJS(_openLightbox)(index, dims)
+          const rects = refs.map(ref => (ref ? measure(ref) : null))
+          runOnJS(_openLightbox)(index, rects, fetchedDims)
         })()
       }
       const onPressIn = (_: number) => {
@@ -180,7 +182,7 @@ export function PostEmbeds({
         const image = images[0]
         return (
           <ContentHider modui={moderation?.ui('contentMedia')}>
-            <Animated.View ref={containerRef} style={[a.mt_sm, style]}>
+            <View style={[a.mt_sm, style]}>
               <AutoSizedImage
                 crop={
                   viewContext === PostEmbedViewContext.ThreadHighlighted
@@ -191,13 +193,15 @@ export function PostEmbeds({
                     : 'constrained'
                 }
                 image={image}
-                onPress={() => onPress(0, containerRef)}
+                onPress={(containerRef, dims) =>
+                  onPress(0, [containerRef], [dims])
+                }
                 onPressIn={() => onPressIn(0)}
                 hideBadge={
                   viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
                 }
               />
-            </Animated.View>
+            </View>
           </ContentHider>
         )
       }

src/view/com/util/text/Text.tsx

@@ -5,7 +5,7 @@ import {UITextView} from 'react-native-uitextview'
 import {lh, s} from '#/lib/styles'
 import {TypographyVariant, useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
-import {isIOS} from '#/platform/detection'
+import {isIOS, isWeb} from '#/platform/detection'
 import {applyFonts, useAlf} from '#/alf'
 import {
   childHasEmoji,
@@ -44,8 +44,6 @@ export function Text({
   ...props
 }: React.PropsWithChildren<CustomTextProps>) {
   const theme = useTheme()
-  const typography = theme.typography[type]
-  const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
   const {fonts} = useAlf()
 
   if (IS_DEV) {
@@ -60,7 +58,10 @@ export function Text({
     }
   }
 
-  if (selectable && isIOS) {
+  const textProps = React.useMemo(() => {
+    const typography = theme.typography[type]
+    const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
+
     const flattened = StyleSheet.flatten([
       s.black,
       typography,
@@ -74,49 +75,47 @@ export function Text({
     // @ts-ignore
     if (flattened.fontSize) {
       // @ts-ignore
-      flattened.fontSize = flattened.fontSize * fonts.scaleMultiplier
+      flattened.fontSize = Math.round(
+        // @ts-ignore
+        flattened.fontSize * fonts.scaleMultiplier,
+      )
     }
 
-    const shared = {
-      uiTextView: true,
+    return {
+      uiTextView: selectable && isIOS,
       selectable,
       style: flattened,
+      dataSet: isWeb
+        ? Object.assign({tooltip: title}, dataSet || {})
+        : undefined,
       ...props,
     }
+  }, [
+    dataSet,
+    fonts.family,
+    fonts.scaleMultiplier,
+    lineHeight,
+    props,
+    selectable,
+    style,
+    theme,
+    title,
+    type,
+  ])
 
+  if (selectable && isIOS) {
     return (
-      <UITextView {...shared}>
-        {isIOS && emoji ? renderChildrenWithEmoji(children, shared) : children}
+      <UITextView {...textProps}>
+        {isIOS && emoji
+          ? renderChildrenWithEmoji(children, textProps)
+          : children}
       </UITextView>
     )
   }
 
-  const flattened = StyleSheet.flatten([
-    s.black,
-    typography,
-    lineHeightStyle,
-    style,
-  ])
-
-  applyFonts(flattened, fonts.family)
-
-  // should always be defined on `typography`
-  // @ts-ignore
-  if (flattened.fontSize) {
-    // @ts-ignore
-    flattened.fontSize = flattened.fontSize * fonts.scaleMultiplier
-  }
-
-  const shared = {
-    selectable,
-    style: flattened,
-    dataSet: Object.assign({tooltip: title}, dataSet || {}),
-    ...props,
-  }
-
   return (
-    <RNText {...shared}>
-      {isIOS && emoji ? renderChildrenWithEmoji(children, shared) : children}
+    <RNText {...textProps}>
+      {isIOS && emoji ? renderChildrenWithEmoji(children, textProps) : children}
     </RNText>
   )
 }

src/view/screens/AccessibilitySettings.tsx

@@ -1,157 +0,0 @@
-import React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useFocusEffect} from '@react-navigation/native'
-
-import {IS_INTERNAL} from '#/lib/app-info'
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
-import {s} from '#/lib/styles'
-import {isNative} from '#/platform/detection'
-import {
-  useAutoplayDisabled,
-  useHapticsDisabled,
-  useRequireAltTextEnabled,
-  useSetAutoplayDisabled,
-  useSetHapticsDisabled,
-  useSetRequireAltTextEnabled,
-} from '#/state/preferences'
-import {
-  useLargeAltBadgeEnabled,
-  useSetLargeAltBadgeEnabled,
-} from '#/state/preferences/large-alt-badge'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
-import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
-import {Text} from '#/view/com/util/text/Text'
-import {ScrollView} from '#/view/com/util/Views'
-import {AccessibilitySettingsScreen as NewAccessibilitySettingsScreen} from '#/screens/Settings/AccessibilitySettings'
-import {atoms as a} from '#/alf'
-import * as Layout from '#/components/Layout'
-
-type Props = NativeStackScreenProps<
-  CommonNavigatorParams,
-  'AccessibilitySettings'
->
-export function AccessibilitySettingsScreen(props: Props) {
-  return IS_INTERNAL ? (
-    <NewAccessibilitySettingsScreen {...props} />
-  ) : (
-    <LegacyAccessibilitySettingsScreen {...props} />
-  )
-}
-
-function LegacyAccessibilitySettingsScreen({}: Props) {
-  const pal = usePalette('default')
-  const setMinimalShellMode = useSetMinimalShellMode()
-  const {isMobile, isTabletOrMobile} = useWebMediaQueries()
-  const {_} = useLingui()
-
-  const requireAltTextEnabled = useRequireAltTextEnabled()
-  const setRequireAltTextEnabled = useSetRequireAltTextEnabled()
-  const autoplayDisabled = useAutoplayDisabled()
-  const setAutoplayDisabled = useSetAutoplayDisabled()
-  const hapticsDisabled = useHapticsDisabled()
-  const setHapticsDisabled = useSetHapticsDisabled()
-  const largeAltBadgeEnabled = useLargeAltBadgeEnabled()
-  const setLargeAltBadgeEnabled = useSetLargeAltBadgeEnabled()
-
-  useFocusEffect(
-    React.useCallback(() => {
-      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
-  )
-
-  return (
-    <Layout.Screen testID="accessibilitySettingsScreen">
-      <SimpleViewHeader
-        showBackButton={isTabletOrMobile}
-        style={[
-          pal.border,
-          a.border_b,
-          !isMobile && {
-            borderLeftWidth: StyleSheet.hairlineWidth,
-            borderRightWidth: StyleSheet.hairlineWidth,
-          },
-        ]}>
-        <View style={a.flex_1}>
-          <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}>
-            <Trans>Accessibility Settings</Trans>
-          </Text>
-        </View>
-      </SimpleViewHeader>
-      <ScrollView
-        // @ts-ignore web only -prf
-        dataSet={{'stable-gutters': 1}}
-        style={s.flex1}
-        contentContainerStyle={[
-          s.flex1,
-          {paddingBottom: 100},
-          isMobile && pal.viewLight,
-        ]}>
-        <Text type="xl-bold" style={[pal.text, styles.heading]}>
-          <Trans>Alt text</Trans>
-        </Text>
-        <View style={[pal.view, styles.toggleCard]}>
-          <ToggleButton
-            type="default-light"
-            label={_(msg`Require alt text before posting`)}
-            labelType="lg"
-            isSelected={requireAltTextEnabled}
-            onPress={() => setRequireAltTextEnabled(!requireAltTextEnabled)}
-          />
-          <ToggleButton
-            type="default-light"
-            label={_(msg`Display larger alt text badges`)}
-            labelType="lg"
-            isSelected={!!largeAltBadgeEnabled}
-            onPress={() => setLargeAltBadgeEnabled(!largeAltBadgeEnabled)}
-          />
-        </View>
-        <Text type="xl-bold" style={[pal.text, styles.heading]}>
-          <Trans>Media</Trans>
-        </Text>
-        <View style={[pal.view, styles.toggleCard]}>
-          <ToggleButton
-            type="default-light"
-            label={_(msg`Disable autoplay for videos and GIFs`)}
-            labelType="lg"
-            isSelected={autoplayDisabled}
-            onPress={() => setAutoplayDisabled(!autoplayDisabled)}
-          />
-        </View>
-        {isNative && (
-          <>
-            <Text type="xl-bold" style={[pal.text, styles.heading]}>
-              <Trans>Haptics</Trans>
-            </Text>
-            <View style={[pal.view, styles.toggleCard]}>
-              <ToggleButton
-                type="default-light"
-                label={_(msg`Disable haptic feedback`)}
-                labelType="lg"
-                isSelected={hapticsDisabled}
-                onPress={() => setHapticsDisabled(!hapticsDisabled)}
-              />
-            </View>
-          </>
-        )}
-      </ScrollView>
-    </Layout.Screen>
-  )
-}
-
-const styles = StyleSheet.create({
-  heading: {
-    paddingHorizontal: 18,
-    paddingTop: 14,
-    paddingBottom: 6,
-  },
-  toggleCard: {
-    paddingVertical: 8,
-    paddingHorizontal: 6,
-    marginBottom: 1,
-  },
-})

src/view/screens/AppPasswords.tsx

@@ -1,375 +0,0 @@
-import React from 'react'
-import {
-  ActivityIndicator,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native'
-import {ScrollView} from 'react-native-gesture-handler'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useFocusEffect} from '@react-navigation/native'
-import {NativeStackScreenProps} from '@react-navigation/native-stack'
-
-import {IS_INTERNAL} from '#/lib/app-info'
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams} from '#/lib/routes/types'
-import {cleanError} from '#/lib/strings/errors'
-import {useModalControls} from '#/state/modals'
-import {
-  useAppPasswordDeleteMutation,
-  useAppPasswordsQuery,
-} from '#/state/queries/app-passwords'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
-import {Button} from '#/view/com/util/forms/Button'
-import {Text} from '#/view/com/util/text/Text'
-import * as Toast from '#/view/com/util/Toast'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {CenteredView} from '#/view/com/util/Views'
-import {AppPasswordsScreen as NewAppPasswordsScreen} from '#/screens/Settings/AppPasswords'
-import {atoms as a} from '#/alf'
-import {useDialogControl} from '#/components/Dialog'
-import * as Layout from '#/components/Layout'
-import * as Prompt from '#/components/Prompt'
-
-type Props = NativeStackScreenProps<CommonNavigatorParams, 'AppPasswords'>
-export function AppPasswords(props: Props) {
-  return IS_INTERNAL ? (
-    <NewAppPasswordsScreen {...props} />
-  ) : (
-    <Layout.Screen testID="AppPasswordsScreen">
-      <AppPasswordsInner />
-    </Layout.Screen>
-  )
-}
-
-function AppPasswordsInner() {
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const setMinimalShellMode = useSetMinimalShellMode()
-  const {isTabletOrDesktop} = useWebMediaQueries()
-  const {openModal} = useModalControls()
-  const {data: appPasswords, error} = useAppPasswordsQuery()
-
-  useFocusEffect(
-    React.useCallback(() => {
-      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
-  )
-
-  const onAdd = React.useCallback(async () => {
-    openModal({name: 'add-app-password'})
-  }, [openModal])
-
-  if (error) {
-    return (
-      <CenteredView
-        style={[
-          styles.container,
-          isTabletOrDesktop && styles.containerDesktop,
-          pal.view,
-          pal.border,
-        ]}
-        testID="appPasswordsScreen">
-        <ErrorScreen
-          title={_(msg`Oops!`)}
-          message={_(msg`There was an issue with fetching your app passwords`)}
-          details={cleanError(error)}
-        />
-      </CenteredView>
-    )
-  }
-
-  // no app passwords (empty) state
-  if (appPasswords?.length === 0) {
-    return (
-      <CenteredView
-        style={[
-          styles.container,
-          isTabletOrDesktop && styles.containerDesktop,
-          pal.view,
-          pal.border,
-        ]}
-        testID="appPasswordsScreen">
-        <AppPasswordsHeader />
-        <View style={[styles.empty, pal.viewLight]}>
-          <Text type="lg" style={[pal.text, styles.emptyText]}>
-            <Trans>
-              You have not created any app passwords yet. You can create one by
-              pressing the button below.
-            </Trans>
-          </Text>
-        </View>
-        {!isTabletOrDesktop && <View style={styles.flex1} />}
-        <View
-          style={[
-            styles.btnContainer,
-            isTabletOrDesktop && styles.btnContainerDesktop,
-          ]}>
-          <Button
-            testID="appPasswordBtn"
-            type="primary"
-            label={_(msg`Add App Password`)}
-            style={styles.btn}
-            labelStyle={styles.btnLabel}
-            onPress={onAdd}
-          />
-        </View>
-      </CenteredView>
-    )
-  }
-
-  if (appPasswords?.length) {
-    // has app passwords
-    return (
-      <CenteredView
-        style={[
-          styles.container,
-          isTabletOrDesktop && styles.containerDesktop,
-          pal.view,
-          pal.border,
-        ]}
-        testID="appPasswordsScreen">
-        <AppPasswordsHeader />
-        <ScrollView
-          style={[
-            styles.scrollContainer,
-            pal.border,
-            !isTabletOrDesktop && styles.flex1,
-          ]}>
-          {appPasswords.map((password, i) => (
-            <AppPassword
-              key={password.name}
-              testID={`appPassword-${i}`}
-              name={password.name}
-              createdAt={password.createdAt}
-              privileged={password.privileged}
-            />
-          ))}
-          {isTabletOrDesktop && (
-            <View style={[styles.btnContainer, styles.btnContainerDesktop]}>
-              <Button
-                testID="appPasswordBtn"
-                type="primary"
-                label={_(msg`Add App Password`)}
-                style={styles.btn}
-                labelStyle={styles.btnLabel}
-                onPress={onAdd}
-              />
-            </View>
-          )}
-        </ScrollView>
-        {!isTabletOrDesktop && (
-          <View style={styles.btnContainer}>
-            <Button
-              testID="appPasswordBtn"
-              type="primary"
-              label={_(msg`Add App Password`)}
-              style={styles.btn}
-              labelStyle={styles.btnLabel}
-              onPress={onAdd}
-            />
-          </View>
-        )}
-      </CenteredView>
-    )
-  }
-
-  return (
-    <CenteredView
-      style={[
-        styles.container,
-        isTabletOrDesktop && styles.containerDesktop,
-        pal.view,
-        pal.border,
-      ]}
-      testID="appPasswordsScreen">
-      <ActivityIndicator />
-    </CenteredView>
-  )
-}
-
-function AppPasswordsHeader() {
-  const {isTabletOrDesktop} = useWebMediaQueries()
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  return (
-    <>
-      <ViewHeader title={_(msg`App Passwords`)} showOnDesktop />
-      <Text
-        type="sm"
-        style={[
-          styles.description,
-          pal.text,
-          isTabletOrDesktop && styles.descriptionDesktop,
-        ]}>
-        <Trans>
-          Use app passwords to login to other Bluesky clients without giving
-          full access to your account or password.
-        </Trans>
-      </Text>
-    </>
-  )
-}
-
-function AppPassword({
-  testID,
-  name,
-  createdAt,
-  privileged,
-}: {
-  testID: string
-  name: string
-  createdAt: string
-  privileged?: boolean
-}) {
-  const pal = usePalette('default')
-  const {_, i18n} = useLingui()
-  const control = useDialogControl()
-  const deleteMutation = useAppPasswordDeleteMutation()
-
-  const onDelete = React.useCallback(async () => {
-    await deleteMutation.mutateAsync({name})
-    Toast.show(_(msg`App password deleted`))
-  }, [deleteMutation, name, _])
-
-  const onPress = React.useCallback(() => {
-    control.open()
-  }, [control])
-
-  return (
-    <TouchableOpacity
-      testID={testID}
-      style={[styles.item, pal.border]}
-      onPress={onPress}
-      accessibilityRole="button"
-      accessibilityLabel={_(msg`Delete app password`)}
-      accessibilityHint="">
-      <View>
-        <Text type="md-bold" style={pal.text}>
-          {name}
-        </Text>
-        <Text type="md" style={[pal.text, styles.pr10]} numberOfLines={1}>
-          <Trans>
-            Created{' '}
-            {i18n.date(createdAt, {
-              year: 'numeric',
-              month: 'numeric',
-              day: 'numeric',
-              hour: '2-digit',
-              minute: '2-digit',
-              second: '2-digit',
-            })}
-          </Trans>
-        </Text>
-        {privileged && (
-          <View style={[a.flex_row, a.gap_sm, a.align_center, a.mt_xs]}>
-            <FontAwesomeIcon
-              icon="circle-exclamation"
-              color={pal.colors.textLight}
-              size={14}
-            />
-            <Text type="md" style={pal.textLight}>
-              <Trans>Allows access to direct messages</Trans>
-            </Text>
-          </View>
-        )}
-      </View>
-      <FontAwesomeIcon icon={['far', 'trash-can']} style={styles.trashIcon} />
-
-      <Prompt.Basic
-        control={control}
-        title={_(msg`Delete app password?`)}
-        description={_(
-          msg`Are you sure you want to delete the app password "${name}"?`,
-        )}
-        onConfirm={onDelete}
-        confirmButtonCta={_(msg`Delete`)}
-        confirmButtonColor="negative"
-      />
-    </TouchableOpacity>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingBottom: 100,
-  },
-  containerDesktop: {
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-    paddingBottom: 0,
-  },
-  title: {
-    textAlign: 'center',
-    marginTop: 12,
-    marginBottom: 12,
-  },
-  description: {
-    textAlign: 'center',
-    paddingHorizontal: 20,
-    marginBottom: 14,
-  },
-  descriptionDesktop: {
-    marginTop: 14,
-  },
-
-  scrollContainer: {
-    borderTopWidth: 1,
-    marginTop: 4,
-    marginBottom: 16,
-  },
-
-  flex1: {
-    flex: 1,
-  },
-  empty: {
-    paddingHorizontal: 20,
-    paddingVertical: 20,
-    borderRadius: 16,
-    marginHorizontal: 24,
-    marginTop: 10,
-  },
-  emptyText: {
-    textAlign: 'center',
-  },
-
-  item: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    borderBottomWidth: 1,
-    paddingHorizontal: 20,
-    paddingVertical: 14,
-  },
-  pr10: {
-    marginRight: 10,
-  },
-  btnContainer: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  btnContainerDesktop: {
-    marginTop: 14,
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 32,
-    paddingHorizontal: 60,
-    paddingVertical: 14,
-  },
-  btnLabel: {
-    fontSize: 18,
-  },
-
-  trashIcon: {
-    color: 'red',
-    minWidth: 16,
-  },
-})

src/view/screens/LanguageSettings.tsx

@@ -1,336 +0,0 @@
-import React from 'react'
-import {StyleSheet, View} from 'react-native'
-import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useFocusEffect} from '@react-navigation/native'
-
-import {APP_LANGUAGES, LANGUAGES} from '#/lib/../locale/languages'
-import {IS_INTERNAL} from '#/lib/app-info'
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
-import {s} from '#/lib/styles'
-import {sanitizeAppLanguageSetting} from '#/locale/helpers'
-import {useModalControls} from '#/state/modals'
-import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {Button} from '#/view/com/util/forms/Button'
-import {Text} from '#/view/com/util/text/Text'
-import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {CenteredView} from '#/view/com/util/Views'
-import {LanguageSettingsScreen as NewLanguageSettingsScreen} from '#/screens/Settings/LanguageSettings'
-import * as Layout from '#/components/Layout'
-
-type Props = NativeStackScreenProps<CommonNavigatorParams, 'LanguageSettings'>
-
-export function LanguageSettingsScreen(props: Props) {
-  return IS_INTERNAL ? (
-    <NewLanguageSettingsScreen {...props} />
-  ) : (
-    <LegacyLanguageSettingsScreen {...props} />
-  )
-}
-
-function LegacyLanguageSettingsScreen(_props: Props) {
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const langPrefs = useLanguagePrefs()
-  const setLangPrefs = useLanguagePrefsApi()
-  const {isTabletOrDesktop} = useWebMediaQueries()
-  const setMinimalShellMode = useSetMinimalShellMode()
-  const {openModal} = useModalControls()
-
-  useFocusEffect(
-    React.useCallback(() => {
-      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
-  )
-
-  const onPressContentLanguages = React.useCallback(() => {
-    openModal({name: 'content-languages-settings'})
-  }, [openModal])
-
-  const onChangePrimaryLanguage = React.useCallback(
-    (value: Parameters<PickerSelectProps['onValueChange']>[0]) => {
-      if (!value) return
-      if (langPrefs.primaryLanguage !== value) {
-        setLangPrefs.setPrimaryLanguage(value)
-      }
-    },
-    [langPrefs, setLangPrefs],
-  )
-
-  const onChangeAppLanguage = React.useCallback(
-    (value: Parameters<PickerSelectProps['onValueChange']>[0]) => {
-      if (!value) return
-      if (langPrefs.appLanguage !== value) {
-        setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
-      }
-    },
-    [langPrefs, setLangPrefs],
-  )
-
-  const myLanguages = React.useMemo(() => {
-    return (
-      langPrefs.contentLanguages
-        .map(lang => LANGUAGES.find(l => l.code2 === lang))
-        .filter(Boolean)
-        // @ts-ignore
-        .map(l => l.name)
-        .join(', ')
-    )
-  }, [langPrefs.contentLanguages])
-
-  return (
-    <Layout.Screen testID="PreferencesLanguagesScreen">
-      <CenteredView
-        style={[
-          pal.view,
-          pal.border,
-          styles.container,
-          isTabletOrDesktop && styles.desktopContainer,
-        ]}>
-        <ViewHeader title={_(msg`Language Settings`)} showOnDesktop />
-
-        <View style={{paddingTop: 20, paddingHorizontal: 20}}>
-          {/* APP LANGUAGE */}
-          <View style={{paddingBottom: 20}}>
-            <Text type="title-sm" style={[pal.text, s.pb5]}>
-              <Trans>App Language</Trans>
-            </Text>
-            <Text style={[pal.text, s.pb10]}>
-              <Trans>
-                Select your app language for the default text to display in the
-                app.
-              </Trans>
-            </Text>
-
-            <View style={{position: 'relative'}}>
-              <RNPickerSelect
-                placeholder={{}}
-                value={sanitizeAppLanguageSetting(langPrefs.appLanguage)}
-                onValueChange={onChangeAppLanguage}
-                items={APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => ({
-                  label: l.name,
-                  value: l.code2,
-                  key: l.code2,
-                }))}
-                style={{
-                  inputAndroid: {
-                    backgroundColor: pal.viewLight.backgroundColor,
-                    color: pal.text.color,
-                    fontSize: 14,
-                    letterSpacing: 0.5,
-                    fontWeight: '600',
-                    paddingHorizontal: 14,
-                    paddingVertical: 8,
-                    borderRadius: 24,
-                  },
-                  inputIOS: {
-                    backgroundColor: pal.viewLight.backgroundColor,
-                    color: pal.text.color,
-                    fontSize: 14,
-                    letterSpacing: 0.5,
-                    fontWeight: '600',
-                    paddingHorizontal: 14,
-                    paddingVertical: 8,
-                    borderRadius: 24,
-                  },
-
-                  inputWeb: {
-                    cursor: 'pointer',
-                    // @ts-ignore web only
-                    '-moz-appearance': 'none',
-                    '-webkit-appearance': 'none',
-                    appearance: 'none',
-                    outline: 0,
-                    borderWidth: 0,
-                    backgroundColor: pal.viewLight.backgroundColor,
-                    color: pal.text.color,
-                    fontSize: 14,
-                    fontFamily: 'inherit',
-                    letterSpacing: 0.5,
-                    fontWeight: '600',
-                    paddingHorizontal: 14,
-                    paddingVertical: 8,
-                    borderRadius: 24,
-                  },
-                }}
-              />
-
-              <View
-                style={{
-                  position: 'absolute',
-                  top: 1,
-                  right: 1,
-                  bottom: 1,
-                  width: 40,
-                  backgroundColor: pal.viewLight.backgroundColor,
-                  borderRadius: 24,
-                  pointerEvents: 'none',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                <FontAwesomeIcon
-                  icon="chevron-down"
-                  style={pal.text as FontAwesomeIconStyle}
-                />
-              </View>
-            </View>
-          </View>
-
-          <View
-            style={{
-              height: 1,
-              backgroundColor: pal.border.borderColor,
-              marginBottom: 20,
-            }}
-          />
-
-          {/* PRIMARY LANGUAGE */}
-          <View style={{paddingBottom: 20}}>
-            <Text type="title-sm" style={[pal.text, s.pb5]}>
-              <Trans>Primary Language</Trans>
-            </Text>
-            <Text style={[pal.text, s.pb10]}>
-              <Trans>
-                Select your preferred language for translations in your feed.
-              </Trans>
-            </Text>
-
-            <View style={{position: 'relative'}}>
-              <RNPickerSelect
-                placeholder={{}}
-                value={langPrefs.primaryLanguage}
-                onValueChange={onChangePrimaryLanguage}
-                items={LANGUAGES.filter(l => Boolean(l.code2)).map(l => ({
-                  label: l.name,
-                  value: l.code2,
-                  key: l.code2 + l.code3,
-                }))}
-                style={{
-                  inputAndroid: {
-                    backgroundColor: pal.viewLight.backgroundColor,
-                    color: pal.text.color,
-                    fontSize: 14,
-                    letterSpacing: 0.5,
-                    fontWeight: '600',
-                    paddingHorizontal: 14,
-                    paddingVertical: 8,
-                    borderRadius: 24,
-                  },
-                  inputIOS: {
-                    backgroundColor: pal.viewLight.backgroundColor,
-                    color: pal.text.color,
-                    fontSize: 14,
-                    letterSpacing: 0.5,
-                    fontWeight: '600',
-                    paddingHorizontal: 14,
-                    paddingVertical: 8,
-                    borderRadius: 24,
-                  },
-                  inputWeb: {
-                    cursor: 'pointer',
-                    // @ts-ignore web only
-                    '-moz-appearance': 'none',
-                    '-webkit-appearance': 'none',
-                    appearance: 'none',
-                    outline: 0,
-                    borderWidth: 0,
-                    backgroundColor: pal.viewLight.backgroundColor,
-                    color: pal.text.color,
-                    fontSize: 14,
-                    fontFamily: 'inherit',
-                    letterSpacing: 0.5,
-                    fontWeight: '600',
-                    paddingHorizontal: 14,
-                    paddingVertical: 8,
-                    borderRadius: 24,
-                  },
-                }}
-              />
-
-              <View
-                style={{
-                  position: 'absolute',
-                  top: 1,
-                  right: 1,
-                  bottom: 1,
-                  width: 40,
-                  backgroundColor: pal.viewLight.backgroundColor,
-                  borderRadius: 24,
-                  pointerEvents: 'none',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                }}>
-                <FontAwesomeIcon
-                  icon="chevron-down"
-                  style={pal.text as FontAwesomeIconStyle}
-                />
-              </View>
-            </View>
-          </View>
-
-          <View
-            style={{
-              height: 1,
-              backgroundColor: pal.border.borderColor,
-              marginBottom: 20,
-            }}
-          />
-
-          {/* CONTENT LANGUAGES */}
-          <View style={{paddingBottom: 20}}>
-            <Text type="title-sm" style={[pal.text, s.pb5]}>
-              <Trans>Content Languages</Trans>
-            </Text>
-            <Text style={[pal.text, s.pb10]}>
-              <Trans>
-                Select which languages you want your subscribed feeds to
-                include. If none are selected, all languages will be shown.
-              </Trans>
-            </Text>
-
-            <Button
-              type="default"
-              onPress={onPressContentLanguages}
-              style={styles.button}>
-              <FontAwesomeIcon
-                icon={myLanguages.length ? 'check' : 'plus'}
-                style={pal.text as FontAwesomeIconStyle}
-              />
-              <Text
-                type="button"
-                style={[pal.text, {flexShrink: 1, overflow: 'hidden'}]}
-                numberOfLines={1}>
-                {myLanguages.length ? myLanguages : _(msg`Select languages`)}
-              </Text>
-            </Button>
-          </View>
-        </View>
-      </CenteredView>
-    </Layout.Screen>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    paddingBottom: 90,
-  },
-  desktopContainer: {
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-    paddingBottom: 40,
-  },
-  button: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-})

src/view/screens/PreferencesExternalEmbeds.tsx

@@ -1,147 +0,0 @@
-import React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {Trans} from '@lingui/macro'
-import {useFocusEffect} from '@react-navigation/native'
-
-import {IS_INTERNAL} from '#/lib/app-info'
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
-import {
-  EmbedPlayerSource,
-  externalEmbedLabels,
-} from '#/lib/strings/embed-player'
-import {
-  useExternalEmbedsPrefs,
-  useSetExternalEmbedPref,
-} from '#/state/preferences'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
-import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
-import {Text} from '#/view/com/util/text/Text'
-import {ScrollView} from '#/view/com/util/Views'
-import {ExternalMediaPreferencesScreen} from '#/screens/Settings/ExternalMediaPreferences'
-import {atoms as a} from '#/alf'
-import * as Layout from '#/components/Layout'
-
-type Props = NativeStackScreenProps<
-  CommonNavigatorParams,
-  'PreferencesExternalEmbeds'
->
-export function PreferencesExternalEmbeds(props: Props) {
-  return IS_INTERNAL ? (
-    <ExternalMediaPreferencesScreen {...props} />
-  ) : (
-    <LegacyPreferencesExternalEmbeds {...props} />
-  )
-}
-
-function LegacyPreferencesExternalEmbeds({}: Props) {
-  const pal = usePalette('default')
-  const setMinimalShellMode = useSetMinimalShellMode()
-  const {isTabletOrMobile} = useWebMediaQueries()
-
-  useFocusEffect(
-    React.useCallback(() => {
-      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
-  )
-
-  return (
-    <Layout.Screen testID="preferencesExternalEmbedsScreen">
-      <ScrollView
-        // @ts-ignore web only -prf
-        dataSet={{'stable-gutters': 1}}
-        contentContainerStyle={[pal.viewLight, {paddingBottom: 75}]}>
-        <SimpleViewHeader
-          showBackButton={isTabletOrMobile}
-          style={[pal.border, a.border_b]}>
-          <View style={a.flex_1}>
-            <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}>
-              <Trans>External Media Preferences</Trans>
-            </Text>
-            <Text style={pal.textLight}>
-              <Trans>Customize media from external sites.</Trans>
-            </Text>
-          </View>
-        </SimpleViewHeader>
-
-        <View style={[pal.view]}>
-          <View style={styles.infoCard}>
-            <Text style={pal.text}>
-              <Trans>
-                External media may allow websites to collect information about
-                you and your device. No information is sent or requested until
-                you press the "play" button.
-              </Trans>
-            </Text>
-          </View>
-        </View>
-        <Text type="xl-bold" style={[pal.text, styles.heading]}>
-          <Trans>Enable media players for</Trans>
-        </Text>
-        {Object.entries(externalEmbedLabels)
-          // TODO: Remove special case when we disable the old integration.
-          .filter(([key]) => key !== 'tenor')
-          .map(([key, label]) => (
-            <PrefSelector
-              source={key as EmbedPlayerSource}
-              label={label}
-              key={key}
-            />
-          ))}
-      </ScrollView>
-    </Layout.Screen>
-  )
-}
-
-function PrefSelector({
-  source,
-  label,
-}: {
-  source: EmbedPlayerSource
-  label: string
-}) {
-  const pal = usePalette('default')
-  const setExternalEmbedPref = useSetExternalEmbedPref()
-  const sources = useExternalEmbedsPrefs()
-
-  return (
-    <View>
-      <View style={[pal.view, styles.toggleCard]}>
-        <ToggleButton
-          type="default-light"
-          label={label}
-          labelType="lg"
-          isSelected={sources?.[source] === 'show'}
-          onPress={() =>
-            setExternalEmbedPref(
-              source,
-              sources?.[source] === 'show' ? 'hide' : 'show',
-            )
-          }
-        />
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  heading: {
-    paddingHorizontal: 18,
-    paddingTop: 14,
-    paddingBottom: 14,
-  },
-  spacer: {
-    height: 8,
-  },
-  infoCard: {
-    paddingHorizontal: 20,
-    paddingVertical: 14,
-  },
-  toggleCard: {
-    paddingVertical: 8,
-    paddingHorizontal: 6,
-    marginBottom: 1,
-  },
-})

src/view/screens/PreferencesFollowingFeed.tsx

@@ -1,249 +0,0 @@
-import React from 'react'
-import {StyleSheet, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {IS_INTERNAL} from '#/lib/app-info'
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
-import {colors, s} from '#/lib/styles'
-import {
-  usePreferencesQuery,
-  useSetFeedViewPreferencesMutation,
-} from '#/state/queries/preferences'
-import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
-import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
-import {Text} from '#/view/com/util/text/Text'
-import {ScrollView} from '#/view/com/util/Views'
-import {FollowingFeedPreferencesScreen} from '#/screens/Settings/FollowingFeedPreferences'
-import {atoms as a} from '#/alf'
-import * as Layout from '#/components/Layout'
-
-type Props = NativeStackScreenProps<
-  CommonNavigatorParams,
-  'PreferencesFollowingFeed'
->
-export function PreferencesFollowingFeed(props: Props) {
-  return IS_INTERNAL ? (
-    <FollowingFeedPreferencesScreen {...props} />
-  ) : (
-    <LegacyPreferencesFollowingFeed {...props} />
-  )
-}
-
-function LegacyPreferencesFollowingFeed({}: Props) {
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const {isTabletOrMobile} = useWebMediaQueries()
-  const {data: preferences} = usePreferencesQuery()
-  const {mutate: setFeedViewPref, variables} =
-    useSetFeedViewPreferencesMutation()
-
-  const showReplies = !(
-    variables?.hideReplies ?? preferences?.feedViewPrefs?.hideReplies
-  )
-
-  return (
-    <Layout.Screen testID="preferencesHomeFeedScreen">
-      <ScrollView
-        // @ts-ignore web only -sfn
-        dataSet={{'stable-gutters': 1}}
-        contentContainerStyle={{paddingBottom: 75}}>
-        <SimpleViewHeader
-          showBackButton={isTabletOrMobile}
-          style={[pal.border, a.border_b]}>
-          <View style={a.flex_1}>
-            <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}>
-              <Trans>Following Feed Preferences</Trans>
-            </Text>
-            <Text style={pal.textLight}>
-              <Trans>
-                Fine-tune the content you see on your Following feed.
-              </Trans>
-            </Text>
-          </View>
-        </SimpleViewHeader>
-        <View style={styles.cardsContainer}>
-          <View style={[pal.viewLight, styles.card]}>
-            <Text type="title-sm" style={[pal.text, s.pb5]}>
-              <Trans>Show Replies</Trans>
-            </Text>
-            <Text style={[pal.text, s.pb10]}>
-              <Trans>
-                Set this setting to "No" to hide all replies from your feed.
-              </Trans>
-            </Text>
-            <ToggleButton
-              testID="toggleRepliesBtn"
-              type="default-light"
-              label={showReplies ? _(msg`Yes`) : _(msg`No`)}
-              isSelected={showReplies}
-              onPress={() =>
-                setFeedViewPref({
-                  hideReplies: !(
-                    variables?.hideReplies ??
-                    preferences?.feedViewPrefs?.hideReplies
-                  ),
-                })
-              }
-            />
-          </View>
-          <View style={[pal.viewLight, styles.card]}>
-            <Text type="title-sm" style={[pal.text, s.pb5]}>
-              <Trans>Show Reposts</Trans>
-            </Text>
-            <Text style={[pal.text, s.pb10]}>
-              <Trans>
-                Set this setting to "No" to hide all reposts from your feed.
-              </Trans>
-            </Text>
-            <ToggleButton
-              type="default-light"
-              label={
-                variables?.hideReposts ??
-                preferences?.feedViewPrefs?.hideReposts
-                  ? _(msg`No`)
-                  : _(msg`Yes`)
-              }
-              isSelected={
-                !(
-                  variables?.hideReposts ??
-                  preferences?.feedViewPrefs?.hideReposts
-                )
-              }
-              onPress={() =>
-                setFeedViewPref({
-                  hideReposts: !(
-                    variables?.hideReposts ??
-                    preferences?.feedViewPrefs?.hideReposts
-                  ),
-                })
-              }
-            />
-          </View>
-
-          <View style={[pal.viewLight, styles.card]}>
-            <Text type="title-sm" style={[pal.text, s.pb5]}>
-              <Trans>Show Quote Posts</Trans>
-            </Text>
-            <Text style={[pal.text, s.pb10]}>
-              <Trans>
-                Set this setting to "No" to hide all quote posts from your feed.
-                Reposts will still be visible.
-              </Trans>
-            </Text>
-            <ToggleButton
-              type="default-light"
-              label={
-                variables?.hideQuotePosts ??
-                preferences?.feedViewPrefs?.hideQuotePosts
-                  ? _(msg`No`)
-                  : _(msg`Yes`)
-              }
-              isSelected={
-                !(
-                  variables?.hideQuotePosts ??
-                  preferences?.feedViewPrefs?.hideQuotePosts
-                )
-              }
-              onPress={() =>
-                setFeedViewPref({
-                  hideQuotePosts: !(
-                    variables?.hideQuotePosts ??
-                    preferences?.feedViewPrefs?.hideQuotePosts
-                  ),
-                })
-              }
-            />
-          </View>
-
-          <View style={[pal.viewLight, styles.card]}>
-            <Text type="title-sm" style={[pal.text, s.pb5]}>
-              <FontAwesomeIcon icon="flask" color={pal.colors.text} />{' '}
-              <Trans>Show Posts from My Feeds</Trans>
-            </Text>
-            <Text style={[pal.text, s.pb10]}>
-              <Trans>
-                Set this setting to "Yes" to show samples of your saved feeds in
-                your Following feed. This is an experimental feature.
-              </Trans>
-            </Text>
-            <ToggleButton
-              type="default-light"
-              label={
-                variables?.lab_mergeFeedEnabled ??
-                preferences?.feedViewPrefs?.lab_mergeFeedEnabled
-                  ? _(msg`Yes`)
-                  : _(msg`No`)
-              }
-              isSelected={
-                !!(
-                  variables?.lab_mergeFeedEnabled ??
-                  preferences?.feedViewPrefs?.lab_mergeFeedEnabled
-                )
-              }
-              onPress={() =>
-                setFeedViewPref({
-                  lab_mergeFeedEnabled: !(
-                    variables?.lab_mergeFeedEnabled ??
-                    preferences?.feedViewPrefs?.lab_mergeFeedEnabled
-                  ),
-                })
-              }
-            />
-          </View>
-        </View>
-      </ScrollView>
-    </Layout.Screen>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  desktopContainer: {
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-  },
-  titleSection: {
-    paddingBottom: 30,
-  },
-  title: {
-    textAlign: 'center',
-    marginBottom: 5,
-  },
-  description: {
-    textAlign: 'center',
-    paddingHorizontal: 32,
-  },
-  cardsContainer: {
-    paddingHorizontal: 20,
-    paddingVertical: 16,
-  },
-  card: {
-    padding: 16,
-    borderRadius: 10,
-    marginBottom: 20,
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 32,
-    padding: 14,
-    backgroundColor: colors.blue3,
-  },
-  btnDesktop: {
-    marginHorizontal: 'auto',
-    paddingHorizontal: 80,
-  },
-  btnContainer: {
-    paddingTop: 20,
-  },
-  dimmed: {
-    opacity: 0.3,
-  },
-})

src/view/screens/PreferencesThreads.tsx

@@ -1,198 +0,0 @@
-import React from 'react'
-import {ActivityIndicator, StyleSheet, View} from 'react-native'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {IS_INTERNAL} from '#/lib/app-info'
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
-import {colors, s} from '#/lib/styles'
-import {
-  usePreferencesQuery,
-  useSetThreadViewPreferencesMutation,
-} from '#/state/queries/preferences'
-import {RadioGroup} from '#/view/com/util/forms/RadioGroup'
-import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
-import {SimpleViewHeader} from '#/view/com/util/SimpleViewHeader'
-import {Text} from '#/view/com/util/text/Text'
-import {ScrollView} from '#/view/com/util/Views'
-import {ThreadPreferencesScreen} from '#/screens/Settings/ThreadPreferences'
-import {atoms as a} from '#/alf'
-import * as Layout from '#/components/Layout'
-
-type Props = NativeStackScreenProps<CommonNavigatorParams, 'PreferencesThreads'>
-export function PreferencesThreads(props: Props) {
-  return IS_INTERNAL ? (
-    <ThreadPreferencesScreen {...props} />
-  ) : (
-    <LegacyPreferencesThreads {...props} />
-  )
-}
-
-function LegacyPreferencesThreads({}: Props) {
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const {isTabletOrMobile} = useWebMediaQueries()
-  const {data: preferences} = usePreferencesQuery()
-  const {mutate: setThreadViewPrefs, variables} =
-    useSetThreadViewPreferencesMutation()
-
-  const prioritizeFollowedUsers = Boolean(
-    variables?.prioritizeFollowedUsers ??
-      preferences?.threadViewPrefs?.prioritizeFollowedUsers,
-  )
-  const treeViewEnabled = Boolean(
-    variables?.lab_treeViewEnabled ??
-      preferences?.threadViewPrefs?.lab_treeViewEnabled,
-  )
-
-  return (
-    <Layout.Screen testID="preferencesThreadsScreen">
-      <ScrollView
-        // @ts-ignore web only -prf
-        dataSet={{'stable-gutters': 1}}
-        contentContainerStyle={{paddingBottom: 75}}>
-        <SimpleViewHeader
-          showBackButton={isTabletOrMobile}
-          style={[pal.border, a.border_b]}>
-          <View style={a.flex_1}>
-            <Text type="title-lg" style={[pal.text, {fontWeight: '600'}]}>
-              <Trans>Thread Preferences</Trans>
-            </Text>
-            <Text style={pal.textLight}>
-              <Trans>Fine-tune the discussion threads.</Trans>
-            </Text>
-          </View>
-        </SimpleViewHeader>
-
-        {preferences ? (
-          <View style={styles.cardsContainer}>
-            <View style={[pal.viewLight, styles.card]}>
-              <Text type="title-sm" style={[pal.text, s.pb5]}>
-                <Trans>Sort Replies</Trans>
-              </Text>
-              <Text style={[pal.text, s.pb10]}>
-                <Trans>Sort replies to the same post by:</Trans>
-              </Text>
-              <View style={[pal.view, {borderRadius: 8, paddingVertical: 6}]}>
-                <RadioGroup
-                  type="default-light"
-                  items={[
-                    {key: 'oldest', label: _(msg`Oldest replies first`)},
-                    {key: 'newest', label: _(msg`Newest replies first`)},
-                    {
-                      key: 'most-likes',
-                      label: _(msg`Most-liked replies first`),
-                    },
-                    {
-                      key: 'random',
-                      label: _(msg`Random (aka "Poster's Roulette")`),
-                    },
-                  ]}
-                  onSelect={key => setThreadViewPrefs({sort: key})}
-                  initialSelection={preferences?.threadViewPrefs?.sort}
-                />
-              </View>
-            </View>
-
-            <View style={[pal.viewLight, styles.card]}>
-              <Text type="title-sm" style={[pal.text, s.pb5]}>
-                <Trans>Prioritize Your Follows</Trans>
-              </Text>
-              <Text style={[pal.text, s.pb10]}>
-                <Trans>
-                  Show replies by people you follow before all other replies.
-                </Trans>
-              </Text>
-              <ToggleButton
-                type="default-light"
-                label={prioritizeFollowedUsers ? _(msg`Yes`) : _(msg`No`)}
-                isSelected={prioritizeFollowedUsers}
-                onPress={() =>
-                  setThreadViewPrefs({
-                    prioritizeFollowedUsers: !prioritizeFollowedUsers,
-                  })
-                }
-              />
-            </View>
-
-            <View style={[pal.viewLight, styles.card]}>
-              <Text type="title-sm" style={[pal.text, s.pb5]}>
-                <FontAwesomeIcon icon="flask" color={pal.colors.text} />{' '}
-                <Trans>Threaded Mode</Trans>
-              </Text>
-              <Text style={[pal.text, s.pb10]}>
-                <Trans>
-                  Set this setting to "Yes" to show replies in a threaded view.
-                  This is an experimental feature.
-                </Trans>
-              </Text>
-              <ToggleButton
-                type="default-light"
-                label={treeViewEnabled ? _(msg`Yes`) : _(msg`No`)}
-                isSelected={treeViewEnabled}
-                onPress={() =>
-                  setThreadViewPrefs({
-                    lab_treeViewEnabled: !treeViewEnabled,
-                  })
-                }
-              />
-            </View>
-          </View>
-        ) : (
-          <ActivityIndicator style={a.flex_1} />
-        )}
-      </ScrollView>
-    </Layout.Screen>
-  )
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  desktopContainer: {
-    borderLeftWidth: 1,
-    borderRightWidth: 1,
-  },
-  titleSection: {
-    paddingBottom: 30,
-  },
-  title: {
-    textAlign: 'center',
-    marginBottom: 5,
-  },
-  description: {
-    textAlign: 'center',
-    paddingHorizontal: 32,
-  },
-  cardsContainer: {
-    paddingHorizontal: 20,
-    paddingVertical: 16,
-  },
-  card: {
-    padding: 16,
-    borderRadius: 10,
-    marginBottom: 20,
-  },
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderRadius: 32,
-    padding: 14,
-    backgroundColor: colors.blue3,
-  },
-  btnDesktop: {
-    marginHorizontal: 'auto',
-    paddingHorizontal: 80,
-  },
-  btnContainer: {
-    paddingTop: 20,
-  },
-  dimmed: {
-    opacity: 0.3,
-  },
-})

src/view/screens/Settings/Email2FAToggle.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useModalControls} from '#/state/modals'
-import {useAgent, useSession} from '#/state/session'
-import {ToggleButton} from '#/view/com/util/forms/ToggleButton'
-import {useDialogControl} from '#/components/Dialog'
-import {DisableEmail2FADialog} from './DisableEmail2FADialog'
-
-export function Email2FAToggle() {
-  const {_} = useLingui()
-  const {currentAccount} = useSession()
-  const {openModal} = useModalControls()
-  const disableDialogCtrl = useDialogControl()
-  const agent = useAgent()
-
-  const enableEmailAuthFactor = React.useCallback(async () => {
-    if (currentAccount?.email) {
-      await agent.com.atproto.server.updateEmail({
-        email: currentAccount.email,
-        emailAuthFactor: true,
-      })
-      await agent.resumeSession(agent.session!)
-    }
-  }, [currentAccount, agent])
-
-  const onToggle = React.useCallback(() => {
-    if (!currentAccount) {
-      return
-    }
-    if (currentAccount.emailAuthFactor) {
-      disableDialogCtrl.open()
-    } else {
-      if (!currentAccount.emailConfirmed) {
-        openModal({
-          name: 'verify-email',
-          onSuccess: enableEmailAuthFactor,
-        })
-        return
-      }
-      enableEmailAuthFactor()
-    }
-  }, [currentAccount, enableEmailAuthFactor, openModal, disableDialogCtrl])
-
-  return (
-    <>
-      <DisableEmail2FADialog control={disableDialogCtrl} />
-      <ToggleButton
-        type="default-light"
-        label={_(msg`Require email code to log into your account`)}
-        labelType="lg"
-        isSelected={!!currentAccount?.emailAuthFactor}
-        onPress={onToggle}
-      />
-    </>
-  )
-}

src/view/shell/index.web.tsx

@@ -32,8 +32,9 @@ function ShellInner() {
   const navigator = useNavigation<NavigationProp>()
   const closeAllActiveElements = useCloseAllActiveElements()
   const {_} = useLingui()
+  const showDrawer = !isDesktop && isDrawerOpen
 
-  useWebBodyScrollLock(isDrawerOpen)
+  useWebBodyScrollLock(showDrawer)
   useComposerKeyboardShortcut()
   useIntentHandler()
 
@@ -56,7 +57,7 @@ function ShellInner() {
       <Lightbox />
       <PortalOutlet />
 
-      {!isDesktop && isDrawerOpen && (
+      {showDrawer && (
         <TouchableWithoutFeedback
           onPress={ev => {
             // Only close if press happens outside of the drawer

yarn.lock

@@ -7523,10 +7523,12 @@
   dependencies:
     undici-types "~5.26.4"
 
-"@types/node@^18.16.2":
-  version "18.17.6"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.17.6.tgz#0296e9a30b22d2a8fcaa48d3c45afe51474ca55b"
-  integrity sha512-fGmT/P7z7ecA6bv/ia5DlaWCH4YeZvAQMNpUhrJjtAhOhZfoxS1VLUgU2pdk63efSjQaOJWdXMuAJsws+8I6dg==
+"@types/node@^20.14.3":
+  version "20.17.6"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.17.6.tgz#6e4073230c180d3579e8c60141f99efdf5df0081"
+  integrity sha512-VEI7OdvK2wP7XHnsuXbAJnEpEkF6NjSN45QJlL4VGqZSXsnicpesdTWsg9RISeSdYd3yeRj/y3k5KGjUXYnFwQ==
+  dependencies:
+    undici-types "~6.19.2"
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -19968,16 +19970,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -20086,7 +20079,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -20100,13 +20093,6 @@ strip-ansi@^5.0.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -20923,6 +20909,11 @@ undici-types@~5.26.4:
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
+undici-types@~6.19.2:
+  version "6.19.8"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.19.8.tgz#35111c9d1437ab83a7cdc0abae2f26d88eda0a02"
+  integrity sha512-ve2KP6f/JnbPBFyobGHuerC9g1FYGn/F8n1LWTwNxCEzd6IfqTwUQcNXgEtmmQ6DlRrC1hrSrBnCZPokRrDHjw==
+
 undici@^5.28.2:
   version "5.28.2"
   resolved "https://registry.yarnpkg.com/undici/-/undici-5.28.2.tgz#fea200eac65fc7ecaff80a023d1a0543423b4c91"
@@ -21835,7 +21826,7 @@ workbox-window@6.6.1:
     "@types/trusted-types" "^2.0.2"
     workbox-core "6.6.1"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -21853,15 +21844,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"