Merge branch 'main' into app-1934

src/components/ProfileBadges.tsx

@@ -1,7 +1,7 @@
-import {View} from 'react-native'
+import {useWindowDimensions, View} from 'react-native'
 
 import {useProfileShadow} from '#/state/cache/profile-shadow'
-import {atoms as a, type ViewStyleProp} from '#/alf'
+import {atoms as a, useAlf, type ViewStyleProp} from '#/alf'
 import {BotBadge, BotBadgeButton, isBotAccount} from '#/components/BotBadge'
 import {useSimpleVerificationState} from '#/components/verification'
 import {VerificationCheck} from '#/components/verification/VerificationCheck'
@@ -38,12 +38,21 @@ export function ProfileBadges({
 }) {
   const shadowed = useProfileShadow(profile)
   const verification = useSimpleVerificationState({profile})
+  const {fontScale: nativeScaleMultiplier} = useWindowDimensions()
+  const {
+    fonts: {scaleMultiplier: alfScaleMultiplier},
+  } = useAlf()
 
   // if nothing to show, don't render the container at all
   if (!verification.showBadge && !isBotAccount(shadowed)) return null
 
   const isOnTheSmallSide = size === 'xs' || size === 'sm'
 
+  const verificationIconWidth =
+    verificationIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
+  const botIconWidth =
+    botIconSizes[size] * nativeScaleMultiplier * alfScaleMultiplier
+
   return (
     <View
       style={[
@@ -56,19 +65,19 @@ export function ProfileBadges({
         <>
           <VerificationCheckButton
             profile={shadowed}
-            width={verificationIconSizes[size]}
+            width={verificationIconWidth}
           />
-          <BotBadgeButton profile={shadowed} width={botIconSizes[size]} />
+          <BotBadgeButton profile={shadowed} width={botIconWidth} />
         </>
       ) : (
         <>
           {verification.showBadge && (
             <VerificationCheck
               verifier={verification.role === 'verifier'}
-              width={verificationIconSizes[size]}
+              width={verificationIconWidth}
             />
           )}
-          <BotBadge profile={shadowed} width={botIconSizes[size]} />
+          <BotBadge profile={shadowed} width={botIconWidth} />
         </>
       )}
     </View>

src/components/ageAssurance/AgeAssuranceInitDialog.tsx

@@ -1,6 +1,6 @@
 import {useState} from 'react'
 import {View} from 'react-native'
-import {XRPCError} from '@atproto/xrpc'
+import {XRPCError} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'

src/components/dialogs/EmailDialog/events.ts

@@ -1,5 +1,5 @@
 import {useEffect} from 'react'
-import EventEmitter from 'eventemitter3'
+import {EventEmitter} from 'eventemitter3'
 
 const events = new EventEmitter<{
   emailVerified: void

src/components/forms/SearchInput.tsx

@@ -1,8 +1,9 @@
-import {forwardRef} from 'react'
+import {useEffect, useRef} from 'react'
 import {type TextInput, View} from 'react-native'
 import {useLingui} from '@lingui/react/macro'
 
 import {HITSLOP_10} from '#/lib/constants'
+import {listenFocusSearch} from '#/state/events'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import * as TextField from '#/components/forms/TextField'
@@ -10,73 +11,89 @@ import {MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#/
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {IS_NATIVE} from '#/env'
 
-type SearchInputProps = Omit<TextField.InputProps, 'label'> & {
+type Props = Omit<TextField.InputProps, 'label'> & {
   label?: TextField.InputProps['label']
   /**
    * Called when the user presses the (X) button
    */
   onClearText?: () => void
+  hotkey?: boolean
+  ref?: React.RefObject<TextInput | null>
 }
 
-export const SearchInput = forwardRef<TextInput, SearchInputProps>(
-  function SearchInput({value, label, onClearText, ...rest}, ref) {
-    const t = useTheme()
-    const {t: l} = useLingui()
-    const showClear = value && value.length > 0
+export function SearchInput({
+  value,
+  label,
+  onClearText,
+  hotkey,
+  ref,
+  ...rest
+}: Props) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+  const showClear = value && value.length > 0
+  const internalRef = useRef<TextInput>(null)
+  const inputRef = ref ?? internalRef
 
-    return (
-      <View style={[a.w_full, a.relative]}>
-        <TextField.Root>
-          <TextField.Icon icon={MagnifyingGlassIcon} />
-          <TextField.Input
-            inputRef={ref}
-            label={label || l`Search`}
-            value={value}
-            placeholder={l`Search`}
-            returnKeyType="search"
-            keyboardAppearance={t.scheme}
-            selectTextOnFocus={IS_NATIVE}
-            autoFocus={false}
-            accessibilityRole="search"
-            autoCorrect={false}
-            autoComplete="off"
-            autoCapitalize="none"
-            style={[
-              showClear
-                ? {
-                    paddingRight: 24,
-                  }
-                : {},
-            ]}
-            {...rest}
-          />
-        </TextField.Root>
+  useEffect(() => {
+    if (!hotkey) return
+    return listenFocusSearch(() => {
+      inputRef.current?.focus()
+    })
+  }, [hotkey, inputRef])
 
-        {showClear && (
-          <View
-            style={[
-              a.absolute,
-              a.z_20,
-              a.my_auto,
-              a.inset_0,
-              a.justify_center,
-              a.pr_sm,
-              {left: 'auto'},
-            ]}>
-            <Button
-              testID="searchTextInputClearBtn"
-              onPress={onClearText}
-              label={l`Clear search query`}
-              hitSlop={HITSLOP_10}
-              size="tiny"
-              shape="round"
-              variant="ghost"
-              color="secondary">
-              <ButtonIcon icon={X} size="xs" />
-            </Button>
-          </View>
-        )}
-      </View>
-    )
-  },
-)
+  return (
+    <View style={[a.w_full, a.relative]}>
+      <TextField.Root>
+        <TextField.Icon icon={MagnifyingGlassIcon} />
+        <TextField.Input
+          inputRef={inputRef}
+          label={label || l`Search`}
+          value={value}
+          placeholder={l`Search`}
+          returnKeyType="search"
+          keyboardAppearance={t.scheme}
+          selectTextOnFocus={IS_NATIVE}
+          autoFocus={false}
+          accessibilityRole="search"
+          autoCorrect={false}
+          autoComplete="off"
+          autoCapitalize="none"
+          style={[
+            showClear
+              ? {
+                  paddingRight: 24,
+                }
+              : {},
+          ]}
+          {...rest}
+        />
+      </TextField.Root>
+
+      {showClear && (
+        <View
+          style={[
+            a.absolute,
+            a.z_20,
+            a.my_auto,
+            a.inset_0,
+            a.justify_center,
+            a.pr_sm,
+            {left: 'auto'},
+          ]}>
+          <Button
+            testID="searchTextInputClearBtn"
+            onPress={onClearText}
+            label={l`Clear search query`}
+            hitSlop={HITSLOP_10}
+            size="tiny"
+            shape="round"
+            variant="ghost"
+            color="secondary">
+            <ButtonIcon icon={X} size="xs" />
+          </Button>
+        </View>
+      )}
+    </View>
+  )
+}

src/components/moderation/LabelsOnMeDialog.tsx

@@ -1,7 +1,7 @@
 import {useCallback, useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {type ComAtprotoLabelDefs, ToolsOzoneReportDefs} from '@atproto/api'
-import {XRPCError} from '@atproto/xrpc'
+import {XRPCError} from '@atproto/api'
 import {msg} from '@lingui/core/macro'
 import {useLingui} from '@lingui/react'
 import {Trans} from '@lingui/react/macro'