Merge remote-tracking branch 'origin/main' into localize-dates

* origin/main: (520 commits)
  Fix language filtering for feeds (#5026)
  Enable show_follow_back_label_v2 (#5022)
  Remove logging of following prefs (#5021)
  Remove new_user_guided_tour and tour code (#5023)
  [Video] Remove old env var (#5018)
  Profile screen performance tweak - Adjust initial num to render based on header height (#5005)
  [Video] Make compress/upload cancelable (#4996)
  [Video] Add uploaded video to post (#4884)
  [Video] Add `timeRemainingChange` event to `player` in `expo-video` (#5013)
  [Video] Lexicon implementation (#4881)
  Hide quote counts for quotegated posts (#5011)
  Ensure captcha verification code gets submitted in signup request (#5010)
  clean up languages (#5007)
  [Video] 🫧 Move logic around by platform (#5003)
  bump 1.91.0 (#5002)
  add indicator of time remaining (#5000)
  [Video] add scrubber to the web player (#4943)
  Release 1.90 prep (#4988)
  Use moderatePost_wrapped for post embeds (#4981)
  Update Indonesian translation (#4875)
  ...

src/view/shell/Composer.ios.tsx

@@ -0,0 +1,81 @@
+import React, {useLayoutEffect} from 'react'
+import {Modal, View} from 'react-native'
+import {StatusBar} from 'expo-status-bar'
+import * as SystemUI from 'expo-system-ui'
+import {observer} from 'mobx-react-lite'
+
+import {useComposerState} from '#/state/shell/composer'
+import {atoms as a, useTheme} from '#/alf'
+import {getBackgroundColor, useThemeName} from '#/alf/util/useColorModeTheme'
+import {ComposePost, useComposerCancelRef} from '../com/composer/Composer'
+
+export const Composer = observer(function ComposerImpl({}: {
+  winHeight: number
+}) {
+  const t = useTheme()
+  const state = useComposerState()
+  const ref = useComposerCancelRef()
+
+  const open = !!state
+
+  return (
+    <Modal
+      aria-modal
+      accessibilityViewIsModal
+      visible={open}
+      presentationStyle="pageSheet"
+      animationType="slide"
+      onRequestClose={() => ref.current?.onPressCancel()}>
+      <View style={[t.atoms.bg, a.flex_1]}>
+        <Providers open={open}>
+          <ComposePost
+            cancelRef={ref}
+            replyTo={state?.replyTo}
+            onPost={state?.onPost}
+            quote={state?.quote}
+            quoteCount={state?.quoteCount}
+            mention={state?.mention}
+            text={state?.text}
+            imageUris={state?.imageUris}
+          />
+        </Providers>
+      </View>
+    </Modal>
+  )
+})
+
+function Providers({
+  children,
+  open,
+}: {
+  children: React.ReactNode
+  open: boolean
+}) {
+  // on iOS, it's a native formSheet. We use FullWindowOverlay to make
+  // the dialogs appear over it
+  return (
+    <>
+      {children}
+      <IOSModalBackground active={open} />
+    </>
+  )
+}
+
+// Generally, the backdrop of the app is the theme color, but when this is open
+// we want it to be black due to the modal being a form sheet.
+function IOSModalBackground({active}: {active: boolean}) {
+  const theme = useThemeName()
+
+  useLayoutEffect(() => {
+    SystemUI.setBackgroundColorAsync('black')
+
+    return () => {
+      SystemUI.setBackgroundColorAsync(getBackgroundColor(theme))
+    }
+  }, [theme])
+
+  // Set the status bar to light - however, only if the modal is active
+  // If we rely on this component being mounted to set this,
+  // there'll be a delay before it switches back to default.
+  return active ? <StatusBar style="light" animated /> : null
+}

src/view/shell/Composer.tsx

@@ -1,10 +1,11 @@
 import React, {useEffect} from 'react'
+import {Animated, Easing, StyleSheet, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
-import {Animated, Easing, Platform, StyleSheet, View} from 'react-native'
-import {ComposePost} from '../com/composer/Composer'
-import {useComposerState} from 'state/shell/composer'
+
 import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
 import {usePalette} from 'lib/hooks/usePalette'
+import {useComposerState} from 'state/shell/composer'
+import {ComposePost} from '../com/composer/Composer'
 
 export const Composer = observer(function ComposerImpl({
   winHeight,
@@ -54,6 +55,7 @@ export const Composer = observer(function ComposerImpl({
         replyTo={state.replyTo}
         onPost={state.onPost}
         quote={state.quote}
+        quoteCount={state.quoteCount}
         mention={state.mention}
         text={state.text}
         imageUris={state.imageUris}
@@ -68,10 +70,5 @@ const styles = StyleSheet.create({
     top: 0,
     bottom: 0,
     width: '100%',
-    ...Platform.select({
-      ios: {
-        paddingTop: 24,
-      },
-    }),
   },
 })

src/view/shell/Composer.web.tsx

@@ -1,21 +1,20 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
-import Animated, {FadeIn, FadeInDown, FadeOut} from 'react-native-reanimated'
-import {ComposePost} from '../com/composer/Composer'
-import {useComposerState} from 'state/shell/composer'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+
 import {useWebBodyScrollLock} from '#/lib/hooks/useWebBodyScrollLock'
+import {useComposerState} from 'state/shell/composer'
 import {
   EmojiPicker,
   EmojiPickerState,
 } from 'view/com/composer/text-input/web/EmojiPicker.web'
+import {useBreakpoints, useTheme} from '#/alf'
+import {ComposePost} from '../com/composer/Composer'
 
 const BOTTOM_BAR_HEIGHT = 61
 
 export function Composer({}: {winHeight: number}) {
-  const pal = usePalette('default')
-  const {isMobile} = useWebMediaQueries()
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
   const state = useComposerState()
   const isActive = !!state
   useWebBodyScrollLock(isActive)
@@ -48,32 +47,26 @@ export function Composer({}: {winHeight: number}) {
   }
 
   return (
-    <Animated.View
-      style={styles.mask}
-      aria-modal
-      accessibilityViewIsModal
-      entering={FadeIn.duration(100)}
-      exiting={FadeOut}>
-      <Animated.View
-        entering={FadeInDown.duration(150)}
-        exiting={FadeOut}
+    <View style={styles.mask} aria-modal accessibilityViewIsModal>
+      <View
         style={[
           styles.container,
-          isMobile && styles.containerMobile,
-          pal.view,
-          pal.border,
+          !gtMobile && styles.containerMobile,
+          t.atoms.bg,
+          t.atoms.border_contrast_medium,
         ]}>
         <ComposePost
           replyTo={state.replyTo}
           quote={state.quote}
+          quoteCount={state?.quoteCount}
           onPost={state.onPost}
           mention={state.mention}
           openPicker={onOpenPicker}
           text={state.text}
         />
-      </Animated.View>
+      </View>
       <EmojiPicker state={pickerState} close={onClosePicker} />
-    </Animated.View>
+    </View>
   )
 }
 
@@ -93,12 +86,12 @@ const styles = StyleSheet.create({
     maxWidth: 600,
     width: '100%',
     paddingVertical: 0,
-    paddingHorizontal: 2,
     borderRadius: 8,
     marginBottom: 0,
     borderWidth: 1,
     // @ts-ignore web only
     maxHeight: 'calc(100% - (40px * 2))',
+    overflow: 'hidden',
   },
   containerMobile: {
     borderRadius: 0,

src/view/shell/Drawer.tsx

@@ -9,10 +9,7 @@ import {
   View,
   ViewStyle,
 } from 'react-native'
-import {
-  FontAwesomeIcon,
-  FontAwesomeIconStyle,
-} from '@fortawesome/react-native-fontawesome'
+import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
 import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {StackActions, useNavigation} from '@react-navigation/native'
@@ -36,7 +33,9 @@ import {NavSignupCard} from '#/view/shell/NavSignupCard'
 import {formatCount} from 'view/com/util/numeric/format'
 import {Text} from 'view/com/util/text/Text'
 import {UserAvatar} from 'view/com/util/UserAvatar'
+import {atoms as a} from '#/alf'
 import {useTheme as useAlfTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {
   Bell_Filled_Corner0_Rounded as BellFilled,
   Bell_Stroke2_Corner0_Rounded as Bell,
@@ -52,6 +51,7 @@ import {
 } from '#/components/icons/HomeOpen'
 import {MagnifyingGlass_Filled_Stroke2_Corner0_Rounded as MagnifyingGlassFilled} from '#/components/icons/MagnifyingGlass'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
+import {Message_Stroke2_Corner0_Rounded as Message} from '#/components/icons/Message'
 import {SettingsGear2_Stroke2_Corner0_Rounded as Settings} from '#/components/icons/SettingsGear2'
 import {
   UserCircle_Filled_Corner0_Rounded as UserCircleFilled,
@@ -97,29 +97,42 @@ let DrawerProfileCard = ({
         numberOfLines={1}>
         @{account.handle}
       </Text>
-      <Text type="xl" style={[pal.textLight, styles.profileCardFollowers]}>
-        <Trans>
-          <Text type="xl-medium" style={pal.text}>
-            {formatCount(i18n, profile?.followersCount ?? 0)}
-          </Text>{' '}
-          <Plural
-            value={profile?.followersCount || 0}
-            one="follower"
-            other="followers"
-          />
-        </Trans>{' '}
-        &middot;{' '}
-        <Trans>
-          <Text type="xl-medium" style={pal.text}>
-            {formatCount(i18n, profile?.followsCount ?? 0)}
-          </Text>{' '}
-          <Plural
-            value={profile?.followsCount || 0}
-            one="following"
-            other="following"
-          />
-        </Trans>
-      </Text>
+      <View
+        style={[
+          styles.profileCardFollowers,
+          a.gap_xs,
+          a.flex_row,
+          a.align_center,
+          a.flex_wrap,
+        ]}>
+        <Text type="xl" style={pal.textLight}>
+          <Trans>
+            <Text type="xl-medium" style={pal.text}>
+              {formatCount(i18n, profile?.followersCount ?? 0)}
+            </Text>{' '}
+            <Plural
+              value={profile?.followersCount || 0}
+              one="follower"
+              other="followers"
+            />
+          </Trans>
+        </Text>
+        <Text type="xl" style={pal.textLight}>
+          &middot;
+        </Text>
+        <Text type="xl" style={pal.textLight}>
+          <Trans>
+            <Text type="xl-medium" style={pal.text}>
+              {formatCount(i18n, profile?.followsCount ?? 0)}
+            </Text>{' '}
+            <Plural
+              value={profile?.followsCount || 0}
+              one="following"
+              other="following"
+            />
+          </Trans>
+        </Text>
+      </View>
     </TouchableOpacity>
   )
 }
@@ -186,10 +199,11 @@ let DrawerContent = ({}: {}): React.ReactNode => {
     onPressTab('MyProfile')
   }, [onPressTab])
 
-  const onPressMyFeeds = React.useCallback(
-    () => onPressTab('Feeds'),
-    [onPressTab],
-  )
+  const onPressMyFeeds = React.useCallback(() => {
+    track('Menu:ItemClicked', {url: 'Feeds'})
+    navigation.navigate('Feeds')
+    setDrawerOpen(false)
+  }, [navigation, setDrawerOpen, track])
 
   const onPressLists = React.useCallback(() => {
     track('Menu:ItemClicked', {url: 'Lists'})
@@ -318,42 +332,33 @@ let DrawerFooter = ({
   onPressFeedback: () => void
   onPressHelp: () => void
 }): React.ReactNode => {
-  const theme = useTheme()
-  const pal = usePalette('default')
   const {_} = useLingui()
   return (
     <View style={styles.footer}>
-      <TouchableOpacity
-        accessibilityRole="link"
-        accessibilityLabel={_(msg`Send feedback`)}
-        accessibilityHint=""
-        onPress={onPressFeedback}
-        style={[
-          styles.footerBtn,
-          styles.footerBtnFeedback,
-          theme.colorScheme === 'light'
-            ? styles.footerBtnFeedbackLight
-            : styles.footerBtnFeedbackDark,
-        ]}>
-        <FontAwesomeIcon
-          style={pal.link as FontAwesomeIconStyle}
-          size={18}
-          icon={['far', 'message']}
-        />
-        <Text type="lg-medium" style={[pal.link, s.pl10]}>
+      <Button
+        label={_(msg`Send feedback`)}
+        size="small"
+        variant="solid"
+        color="secondary"
+        onPress={onPressFeedback}>
+        <ButtonIcon icon={Message} position="left" />
+        <ButtonText>
           <Trans>Feedback</Trans>
-        </Text>
-      </TouchableOpacity>
-      <TouchableOpacity
-        accessibilityRole="link"
-        accessibilityLabel={_(msg`Send feedback`)}
-        accessibilityHint=""
+        </ButtonText>
+      </Button>
+      <Button
+        label={_(msg`Get help`)}
+        size="small"
+        variant="outline"
+        color="secondary"
         onPress={onPressHelp}
-        style={[styles.footerBtn]}>
-        <Text type="lg-medium" style={[pal.link, s.pl10]}>
+        style={{
+          backgroundColor: 'transparent',
+        }}>
+        <ButtonText>
           <Trans>Help</Trans>
-        </Text>
-      </TouchableOpacity>
+        </ButtonText>
+      </Button>
     </View>
   )
 }
@@ -619,7 +624,7 @@ const styles = StyleSheet.create({
     backgroundColor: '#1B1919',
   },
   main: {
-    paddingLeft: 20,
+    paddingHorizontal: 20,
     paddingTop: 20,
   },
   smallSpacer: {
@@ -636,14 +641,12 @@ const styles = StyleSheet.create({
   },
   profileCardFollowers: {
     marginTop: 16,
-    paddingRight: 10,
   },
 
   menuItem: {
     flexDirection: 'row',
     alignItems: 'center',
     paddingVertical: 16,
-    paddingRight: 10,
   },
   menuItemIconWrapper: {
     width: 24,

src/view/shell/bottom-bar/BottomBar.tsx

@@ -10,7 +10,7 @@ import {StackActions} from '@react-navigation/native'
 import {useAnalytics} from '#/lib/analytics/analytics'
 import {useHaptics} from '#/lib/haptics'
 import {useDedupe} from '#/lib/hooks/useDedupe'
-import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
+import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
 import {useNavigationTabState} from '#/lib/hooks/useNavigationTabState'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {clamp} from '#/lib/numbers'
@@ -66,7 +66,7 @@ export function BottomBar({navigation}: BottomTabBarProps) {
     useNavigationTabState()
   const numUnreadNotifications = useUnreadNotifications()
   const numUnreadMessages = useUnreadMessageCount()
-  const {footerMinimalShellTransform} = useMinimalShellMode()
+  const footerMinimalShellTransform = useMinimalShellFooterTransform()
   const {data: profile} = useProfileQuery({did: currentAccount?.did})
   const {requestSwitchToAccount} = useLoggedOutViewControls()
   const closeAllActiveElements = useCloseAllActiveElements()

src/view/shell/bottom-bar/BottomBarStyles.tsx

@@ -9,7 +9,7 @@ export const styles = StyleSheet.create({
     left: 0,
     right: 0,
     flexDirection: 'row',
-    borderTopWidth: 1,
+    borderTopWidth: StyleSheet.hairlineWidth,
     paddingLeft: 5,
     paddingRight: 10,
   },

src/view/shell/bottom-bar/BottomBarWeb.tsx

@@ -6,7 +6,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigationState} from '@react-navigation/native'
 
-import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
+import {useMinimalShellFooterTransform} from '#/lib/hooks/useMinimalShellTransform'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {clamp} from '#/lib/numbers'
 import {getCurrentRoute, isTab} from '#/lib/routes/helpers'
@@ -16,6 +16,8 @@ import {s} from '#/lib/styles'
 import {useSession} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import {useCloseAllActiveElements} from '#/state/util'
+import {useUnreadMessageCount} from 'state/queries/messages/list-converations'
+import {useUnreadNotifications} from 'state/queries/notifications/unread'
 import {Button} from '#/view/com/util/forms/Button'
 import {Text} from '#/view/com/util/text/Text'
 import {Logo} from '#/view/icons/Logo'
@@ -46,11 +48,14 @@ export function BottomBarWeb() {
   const {hasSession, currentAccount} = useSession()
   const pal = usePalette('default')
   const safeAreaInsets = useSafeAreaInsets()
-  const {footerMinimalShellTransform} = useMinimalShellMode()
+  const footerMinimalShellTransform = useMinimalShellFooterTransform()
   const {requestSwitchToAccount} = useLoggedOutViewControls()
   const closeAllActiveElements = useCloseAllActiveElements()
   const iconWidth = 26
 
+  const unreadMessageCount = useUnreadMessageCount()
+  const notificationCountStr = useUnreadNotifications()
+
   const showSignIn = React.useCallback(() => {
     closeAllActiveElements()
     requestSwitchToAccount({requestedAccount: 'none'})
@@ -103,10 +108,19 @@ export function BottomBarWeb() {
                 {({isActive}) => {
                   const Icon = isActive ? MessageFilled : Message
                   return (
-                    <Icon
-                      width={iconWidth - 1}
-                      style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
-                    />
+                    <>
+                      <Icon
+                        width={iconWidth - 1}
+                        style={[styles.ctrlIcon, pal.text, styles.messagesIcon]}
+                      />
+                      {unreadMessageCount.count > 0 && (
+                        <View style={styles.notificationCount}>
+                          <Text style={styles.notificationCountLabel}>
+                            {unreadMessageCount.numUnread}
+                          </Text>
+                        </View>
+                      )}
+                    </>
                   )
                 }}
               </NavItem>
@@ -114,10 +128,19 @@ export function BottomBarWeb() {
                 {({isActive}) => {
                   const Icon = isActive ? BellFilled : Bell
                   return (
-                    <Icon
-                      width={iconWidth}
-                      style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
-                    />
+                    <>
+                      <Icon
+                        width={iconWidth}
+                        style={[styles.ctrlIcon, pal.text, styles.bellIcon]}
+                      />
+                      {notificationCountStr !== '' && (
+                        <View style={styles.notificationCount}>
+                          <Text style={styles.notificationCountLabel}>
+                            {notificationCountStr}
+                          </Text>
+                        </View>
+                      )}
+                    </>
                   )
                 }}
               </NavItem>

src/view/shell/createNativeStackNavigatorWithAuth.tsx

@@ -29,9 +29,10 @@ import {
   useLoggedOutView,
   useLoggedOutViewControls,
 } from '#/state/shell/logged-out'
-import {isWeb} from 'platform/detection'
+import {isNative, isWeb} from 'platform/detection'
 import {Deactivated} from '#/screens/Deactivated'
 import {Onboarding} from '#/screens/Onboarding'
+import {SignupQueued} from '#/screens/SignupQueued'
 import {LoggedOut} from '../com/auth/LoggedOut'
 import {BottomBarWeb} from './bottom-bar/BottomBarWeb'
 import {DesktopLeftNav} from './desktop/LeftNav'
@@ -99,15 +100,18 @@ function NativeStackNavigator({
   const {showLoggedOut} = useLoggedOutView()
   const {setShowLoggedOut} = useLoggedOutViewControls()
   const {isMobile, isTabletOrMobile} = useWebMediaQueries()
-  if ((!PWI_ENABLED || activeRouteRequiresAuth) && !hasSession) {
+  if (!hasSession && (!PWI_ENABLED || activeRouteRequiresAuth || isNative)) {
     return <LoggedOut />
   }
-  if (hasSession && currentAccount?.deactivated) {
-    return <Deactivated />
+  if (hasSession && currentAccount?.signupQueued) {
+    return <SignupQueued />
   }
   if (showLoggedOut) {
     return <LoggedOut onDismiss={() => setShowLoggedOut(false)} />
   }
+  if (currentAccount?.status === 'deactivated') {
+    return <Deactivated />
+  }
   if (onboardingState.isActive) {
     return <Onboarding />
   }

src/view/shell/desktop/LeftNav.tsx

@@ -100,12 +100,18 @@ function ProfileCard() {
   )
 }
 
+const HIDDEN_BACK_BNT_ROUTES = ['StarterPackWizard', 'StarterPackEdit']
+
 function BackBtn() {
   const {isTablet} = useWebMediaQueries()
   const pal = usePalette('default')
   const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
-  const shouldShow = useNavigationState(state => !isStateAtTabRoot(state))
+  const shouldShow = useNavigationState(
+    state =>
+      !isStateAtTabRoot(state) &&
+      !HIDDEN_BACK_BNT_ROUTES.includes(getCurrentRoute(state).name),
+  )
 
   const onPressBack = React.useCallback(() => {
     if (navigation.canGoBack()) {

src/view/shell/desktop/RightNav.tsx

@@ -11,6 +11,8 @@ import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {s} from 'lib/styles'
 import {TextLink} from 'view/com/util/Link'
 import {Text} from 'view/com/util/text/Text'
+import {atoms as a} from '#/alf'
+import {ProgressGuideList} from '#/components/ProgressGuide/List'
 import {DesktopFeeds} from './Feeds'
 import {DesktopSearch} from './Search'
 
@@ -38,9 +40,12 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
             <DesktopSearch />
 
             {hasSession && (
-              <View style={[pal.border, styles.desktopFeedsContainer]}>
-                <DesktopFeeds />
-              </View>
+              <>
+                <ProgressGuideList style={[{marginTop: 22, marginBottom: 8}]} />
+                <View style={[pal.border, styles.desktopFeedsContainer]}>
+                  <DesktopFeeds />
+                </View>
+              </>
             )}
           </>
         )}
@@ -52,7 +57,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
               paddingTop: hasSession ? 0 : 18,
             },
           ]}>
-          <View style={[{flexWrap: 'wrap'}, s.flexRow]}>
+          <View style={[{flexWrap: 'wrap'}, s.flexRow, a.gap_xs]}>
             {hasSession && (
               <>
                 <TextLink
@@ -65,7 +70,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
                   text={_(msg`Feedback`)}
                 />
                 <Text type="md" style={pal.textLight}>
-                  &nbsp;&middot;&nbsp;
+                  &middot;
                 </Text>
               </>
             )}
@@ -76,7 +81,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
               text={_(msg`Privacy`)}
             />
             <Text type="md" style={pal.textLight}>
-              &nbsp;&middot;&nbsp;
+              &middot;
             </Text>
             <TextLink
               type="md"
@@ -85,7 +90,7 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
               text={_(msg`Terms`)}
             />
             <Text type="md" style={pal.textLight}>
-              &nbsp;&middot;&nbsp;
+              &middot;
             </Text>
             <TextLink
               type="md"
@@ -130,8 +135,8 @@ const styles = StyleSheet.create({
     marginBottom: 10,
   },
   desktopFeedsContainer: {
-    borderTopWidth: 1,
-    borderBottomWidth: 1,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderBottomWidth: StyleSheet.hairlineWidth,
     marginTop: 18,
     marginBottom: 18,
   },

src/view/shell/desktop/Search.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import {
   ActivityIndicator,
   StyleSheet,
-  TextInput,
   TouchableOpacity,
   View,
   ViewStyle,
@@ -12,7 +11,7 @@ import {
   moderateProfile,
   ModerationDecision,
 } from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
+import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {StackActions, useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'
@@ -24,12 +23,13 @@ import {s} from '#/lib/styles'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
 import {usePalette} from 'lib/hooks/usePalette'
-import {MagnifyingGlassIcon2} from 'lib/icons'
 import {NavigationProp} from 'lib/routes/types'
 import {precacheProfile} from 'state/queries/profile'
 import {Link} from '#/view/com/util/Link'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {SearchInput} from 'view/com/util/forms/SearchInput'
 import {Text} from 'view/com/util/text/Text'
+import {atoms as a} from '#/alf'
 
 let SearchLinkCard = ({
   label,
@@ -127,7 +127,7 @@ let SearchProfileCard = ({
         <View style={{flex: 1}}>
           <Text
             type="lg"
-            style={[s.bold, pal.text]}
+            style={[s.bold, pal.text, a.self_start]}
             numberOfLines={1}
             lineHeight={1.2}>
             {sanitizeDisplayName(
@@ -182,47 +182,12 @@ export function DesktopSearch() {
 
   return (
     <View style={[styles.container, pal.view]}>
-      <View
-        style={[{backgroundColor: pal.colors.backgroundLight}, styles.search]}>
-        <View style={[styles.inputContainer]}>
-          <MagnifyingGlassIcon2
-            size={18}
-            style={[pal.textLight, styles.iconWrapper]}
-          />
-          <TextInput
-            testID="searchTextInput"
-            placeholder={_(msg`Search`)}
-            placeholderTextColor={pal.colors.textLight}
-            selectTextOnFocus
-            returnKeyType="search"
-            value={query}
-            style={[pal.textLight, styles.input]}
-            onChangeText={onChangeText}
-            onSubmitEditing={onSubmit}
-            accessibilityRole="search"
-            accessibilityLabel={_(msg`Search`)}
-            accessibilityHint=""
-            autoCorrect={false}
-            autoComplete="off"
-            autoCapitalize="none"
-          />
-          {query ? (
-            <View style={styles.cancelBtn}>
-              <TouchableOpacity
-                onPress={onPressCancelSearch}
-                accessibilityRole="button"
-                accessibilityLabel={_(msg`Cancel search`)}
-                accessibilityHint={_(msg`Exits inputting search query`)}
-                onAccessibilityEscape={onPressCancelSearch}>
-                <Text type="lg" style={[pal.link]}>
-                  <Trans>Cancel</Trans>
-                </Text>
-              </TouchableOpacity>
-            </View>
-          ) : undefined}
-        </View>
-      </View>
-
+      <SearchInput
+        query={query}
+        onChangeQuery={onChangeText}
+        onPressCancelSearch={onPressCancelSearch}
+        onSubmitQuery={onSubmit}
+      />
       {query !== '' && isActive && moderationOpts && (
         <View style={[pal.view, pal.borderDark, styles.resultsContainer]}>
           {isFetching && !autocompleteData?.length ? (
@@ -261,33 +226,6 @@ const styles = StyleSheet.create({
     position: 'relative',
     width: 300,
   },
-  search: {
-    paddingHorizontal: 16,
-    paddingVertical: 2,
-    width: 300,
-    borderRadius: 20,
-  },
-  inputContainer: {
-    flexDirection: 'row',
-  },
-  iconWrapper: {
-    position: 'relative',
-    top: 2,
-    paddingVertical: 7,
-    marginRight: 8,
-  },
-  input: {
-    flex: 1,
-    fontSize: 18,
-    width: '100%',
-    paddingTop: 7,
-    paddingBottom: 7,
-  },
-  cancelBtn: {
-    paddingRight: 4,
-    paddingLeft: 10,
-    paddingVertical: 7,
-  },
   resultsContainer: {
     marginTop: 10,
     flexDirection: 'column',
@@ -295,8 +233,4 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderRadius: 6,
   },
-  noResults: {
-    textAlign: 'center',
-    paddingVertical: 10,
-  },
 })

src/view/shell/index.tsx

@@ -33,7 +33,6 @@ import {ErrorBoundary} from 'view/com/util/ErrorBoundary'
 import {MutedWordsDialog} from '#/components/dialogs/MutedWords'
 import {SigninDialog} from '#/components/dialogs/Signin'
 import {Outlet as PortalOutlet} from '#/components/Portal'
-import {NativeTranslationView} from '../../../modules/expo-bluesky-translate'
 import {RoutesContainer, TabsNavigator} from '../../Navigation'
 import {Composer} from './Composer'
 import {DrawerContent} from './Drawer'
@@ -94,7 +93,6 @@ function ShellInner() {
           </Drawer>
         </ErrorBoundary>
       </Animated.View>
-      <NativeTranslationView />
       <Composer winHeight={winDim.height} />
       <ModalsContainer />
       <MutedWordsDialog />