Merge branch 'main' of https://github.com/bluesky-social/social-app

package.json

···
     "array.prototype.findlast": "^1.2.3",
     "await-lock": "^2.2.2",
     "babel-plugin-transform-remove-console": "^6.9.4",
-    "base64-js": "^1.5.1",
     "bcp-47": "^2.1.0",
     "bcp-47-match": "^2.0.3",
     "date-fns": "^2.30.0",
···
     "react-native-web-webview": "^1.0.2",
     "react-native-webview": "^13.13.5",
     "react-remove-scroll-bar": "^2.3.8",
-    "react-responsive": "^9.0.2",
+    "react-responsive": "^10.0.1",
     "react-textarea-autosize": "^8.5.3",
     "sonner": "^2.0.7",
     "sonner-native": "^0.21.0",
···
     "@types/lodash.isequal": "^4.5.6",
     "@types/lodash.shuffle": "^4.2.7",
     "@types/psl": "^1.1.1",
-    "@types/react-dom": "^19.1.2",
-    "@types/react-responsive": "^8.0.5",
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.8",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "babel-jest": "^29.7.0",
···
     "@expo/image-utils": "0.6.3",
     "@react-native/babel-preset": "0.79.3",
     "@react-native/normalize-colors": "0.79.3",
-    "@types/react": "^18",
     "**/expo-constants": "17.0.3",
     "**/expo-device": "7.1.4",
     "**/zod": "3.23.8",

patches/@discord+bottom-sheet+4.6.1.patch

···
+diff --git a/node_modules/@discord/bottom-sheet/src/hooks/useStableCallback.ts b/node_modules/@discord/bottom-sheet/src/hooks/useStableCallback.ts
+index 1c788ab..d30f330 100644
+--- a/node_modules/@discord/bottom-sheet/src/hooks/useStableCallback.ts
++++ b/node_modules/@discord/bottom-sheet/src/hooks/useStableCallback.ts
+@@ -6,7 +6,7 @@ type Callback = (...args: any[]) => any;
+  * https://gist.github.com/JakeCoxon/c7ebf6e6496f8468226fd36b596e1985
+  */
+ export const useStableCallback = (callback: Callback) => {
+-  const callbackRef = useRef<Callback>();
++  const callbackRef = useRef<Callback>(undefined);
+   const memoCallback = useCallback(
+     (...args: any) => callbackRef.current && callbackRef.current(...args),
+     []

src/Navigation.tsx

···
-import {useCallback, useRef} from 'react'
+import {type JSX, useCallback, useRef} from 'react'
 import {Linking} from 'react-native'
 import * as Notifications from 'expo-notifications'
 import {i18n, type MessageDescriptor} from '@lingui/core'
···
 import {PrivacyPolicyScreen} from '#/view/screens/PrivacyPolicy'
 import {ProfileScreen} from '#/view/screens/Profile'
 import {ProfileFeedLikedByScreen} from '#/view/screens/ProfileFeedLikedBy'
-import {ProfileListScreen} from '#/view/screens/ProfileList'
-import {SavedFeeds} from '#/view/screens/SavedFeeds'
 import {Storybook} from '#/view/screens/Storybook'
 import {SupportScreen} from '#/view/screens/Support'
 import {TermsOfServiceScreen} from '#/view/screens/TermsOfService'
···
 import {ProfileFollowsScreen} from '#/screens/Profile/ProfileFollows'
 import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
 import {ProfileSearchScreen} from '#/screens/Profile/ProfileSearch'
+import {ProfileListScreen} from '#/screens/ProfileList'
+import {SavedFeeds} from '#/screens/SavedFeeds'
 import {SearchScreen} from '#/screens/Search'
 import {AboutSettingsScreen} from '#/screens/Settings/AboutSettings'
 import {AccessibilitySettingsScreen} from '#/screens/Settings/AccessibilitySettings'

src/Splash.tsx

···
   withTiming,
 } from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import Svg, {Path, SvgProps} from 'react-native-svg'
+import Svg, {Path, type SvgProps} from 'react-native-svg'
 import {Image} from 'expo-image'
 import * as SplashScreen from 'expo-splash-screen'
 

src/alf/types.ts

···
-import {StyleProp, TextStyle, ViewStyle} from 'react-native'
+import {type StyleProp, type TextStyle, type ViewStyle} from 'react-native'
 
 export type TextStyleProp = {
   style?: StyleProp<TextStyle>

src/alf/typography.tsx

···
 import {type StyleProp, type TextStyle} from 'react-native'
 import {UITextView} from 'react-native-uitextview'
 import createEmojiRegex from 'emoji-regex'
-import type React from 'react'
 
 import {isNative} from '#/platform/detection'
 import {isIOS} from '#/platform/detection'

src/alf/util/themeSelector.ts

···
-import {ThemeName} from '#/alf/types'
+import {type ThemeName} from '#/alf/types'
 
 export function select<T>(name: ThemeName, options: Record<ThemeName, T>) {
   switch (name) {

src/alf/util/useColorModeTheme.ts

···
 import React from 'react'
-import {ColorSchemeName, useColorScheme} from 'react-native'
+import {type ColorSchemeName, useColorScheme} from 'react-native'
 
 import {isWeb} from '#/platform/detection'
 import {useThemePrefs} from '#/state/shell'
 import {dark, dim, light} from '#/alf/themes'
-import {ThemeName} from '#/alf/types'
+import {type ThemeName} from '#/alf/types'
 
 export function useColorModeTheme(): ThemeName {
   const theme = useThemeName()

src/alf/util/useGutters.ts

···
 import React from 'react'
 
-import {Breakpoint, useBreakpoints} from '#/alf/breakpoints'
+import {type Breakpoint, useBreakpoints} from '#/alf/breakpoints'
 import * as tokens from '#/alf/tokens'
 
 type Gutter = 'compact' | 'base' | 'wide' | 0

src/components/Button.tsx

···
 export type ButtonContext = VariantProps & ButtonState
 
 type NonTextElements =
-  | React.ReactElement
-  | Iterable<React.ReactElement | null | undefined | boolean>
+  | React.ReactElement<any>
+  | Iterable<React.ReactElement<any> | null | undefined | boolean>
 
 export type ButtonProps = Pick<
   PressableProps,

src/components/ContextMenu/index.tsx

···
   const hoverablesSV = useSharedValue<
     Record<string, {id: string; rect: Measurement}>
   >({})
-  const syncHoverablesThrottleRef = useRef<ReturnType<typeof setTimeout>>()
+  const syncHoverablesThrottleRef =
+    useRef<ReturnType<typeof setTimeout>>(undefined)
   const [hoveredMenuItem, setHoveredMenuItem] = useState<string | null>(null)
 
   const onHoverableTouchUp = useCallback((id: string) => {

src/components/ContextMenu/types.ts

···
   type ViewStyle,
 } from 'react-native'
 import {type SharedValue} from 'react-native-reanimated'
-import type React from 'react'
 
 import type * as Dialog from '#/components/Dialog'
 import {

src/components/Dialog/types.ts

···
   type StyleProp,
   type ViewStyle,
 } from 'react-native'
-import type React from 'react'
 
 import {type ViewStyleProp} from '#/alf'
 import {type BottomSheetViewProps} from '../../../modules/bottom-sheet'
···
  */
 export type DialogControlProps = DialogControlRefProps & {
   id: string
-  ref: React.RefObject<DialogControlRefProps>
+  ref: React.RefObject<DialogControlRefProps | null>
   isOpen?: boolean
 }
 

src/components/Dialog/utils.ts

···
 import React from 'react'
 
-import {DialogControlProps} from '#/components/Dialog/types'
+import {type DialogControlProps} from '#/components/Dialog/types'
 
 export function useAutoOpen(control: DialogControlProps, showTimeout?: number) {
   React.useEffect(() => {

src/components/Fill.tsx

···
-import React from 'react'
 import {View} from 'react-native'
+import type React from 'react'
 
-import {atoms as a, ViewStyleProp} from '#/alf'
+import {atoms as a, type ViewStyleProp} from '#/alf'
 
 export function Fill({
   children,

src/components/GradientFill.tsx

···
 import {LinearGradient} from 'expo-linear-gradient'
 
-import {atoms as a, tokens, ViewStyleProp} from '#/alf'
+import {atoms as a, type tokens, type ViewStyleProp} from '#/alf'
 
 export function GradientFill({
   gradient,

src/components/IconCircle.tsx

···
 import {
   atoms as a,
   flatten,
-  TextStyleProp,
+  type TextStyleProp,
   useTheme,
-  ViewStyleProp,
+  type ViewStyleProp,
 } from '#/alf'
-import {Props} from '#/components/icons/common'
-import {Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth'
+import {type Props} from '#/components/icons/common'
+import {type Growth_Stroke2_Corner0_Rounded as Growth} from '#/components/icons/Growth'
 
 export function IconCircle({
   icon: Icon,

src/components/LabelingServiceCard/index.tsx

···
-import React from 'react'
 import {View} from 'react-native'
-import {AppBskyLabelerDefs} from '@atproto/api'
+import {type AppBskyLabelerDefs} from '@atproto/api'
 import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import type React from 'react'
 
 import {getLabelingServiceTitle} from '#/lib/moderation'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {useLabelerInfoQuery} from '#/state/queries/labeler'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
+import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
 import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
-import {Link as InternalLink, LinkProps} from '#/components/Link'
+import {Link as InternalLink, type LinkProps} from '#/components/Link'
 import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '../icons/Chevron'

src/components/LikedByList.tsx

···
 import React from 'react'
-import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
+import {type AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/components/LinearGradientBackground.tsx

···
-import React from 'react'
-import {StyleProp, ViewStyle} from 'react-native'
+import {type StyleProp, type ViewStyle} from 'react-native'
 import {LinearGradient} from 'expo-linear-gradient'
+import type React from 'react'
 
 import {gradients} from '#/alf/tokens'
 

src/components/Lists.tsx

···
 import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {cleanError} from '#/lib/strings/errors'
 import {CenteredView} from '#/view/com/util/Views'

src/components/Loader.tsx

···
 } from 'react-native-reanimated'
 
 import {atoms as a, flatten, useTheme} from '#/alf'
-import {Props, useCommonSVGProps} from '#/components/icons/common'
+import {type Props, useCommonSVGProps} from '#/components/icons/common'
 import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
 
 export function Loader(props: Props) {

src/components/Loader.web.tsx

···
 import {View} from 'react-native'
 
 import {atoms as a, flatten, useTheme} from '#/alf'
-import {Props, useCommonSVGProps} from '#/components/icons/common'
+import {type Props, useCommonSVGProps} from '#/components/icons/common'
 import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
 
 export function Loader(props: Props) {

src/components/MediaInsetBorder.tsx

···
-import React from 'react'
+import type React from 'react'
 
-import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
+import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
 import {Fill} from '#/components/Fill'
 
 /**

src/components/Menu/types.ts

···
-import React from 'react'
 import {
-  AccessibilityProps,
-  AccessibilityRole,
-  GestureResponderEvent,
-  PressableProps,
+  type AccessibilityProps,
+  type AccessibilityRole,
+  type GestureResponderEvent,
+  type PressableProps,
 } from 'react-native'
+import type React from 'react'
 
-import {TextStyleProp, ViewStyleProp} from '#/alf'
-import * as Dialog from '#/components/Dialog'
-import {Props as SVGIconProps} from '#/components/icons/common'
+import {type TextStyleProp, type ViewStyleProp} from '#/alf'
+import type * as Dialog from '#/components/Dialog'
+import {type Props as SVGIconProps} from '#/components/icons/common'
 
 export type ContextType = {
   control: Dialog.DialogOuterProps['control']

src/components/NewskieDialog.tsx

···
-import React from 'react'
+import {useMemo, useState} from 'react'
 import {View} from 'react-native'
-import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
+import {type AppBskyActorDefs, moderateProfile} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {differenceInSeconds} from 'date-fns'
···
   disabled?: boolean
 }) {
   const {_} = useLingui()
-  const t = useTheme()
-  const moderationOpts = useModerationOpts()
-  const {currentAccount} = useSession()
-  const timeAgo = useGetTimeAgo()
   const control = useDialogControl()
 
-  const isMe = profile.did === currentAccount?.did
   const createdAt = profile.createdAt as string | undefined
 
-  const profileName = React.useMemo(() => {
-    const name = profile.displayName || profile.handle
-
-    if (isMe) {
-      return _(msg`You`)
-    }
-
-    if (!moderationOpts) return name
-    const moderation = moderateProfile(profile, moderationOpts)
-
-    return sanitizeDisplayName(name, moderation.ui('displayName'))
-  }, [_, isMe, moderationOpts, profile])
-
-  const [now] = React.useState(() => Date.now())
-  const daysOld = React.useMemo(() => {
+  const [now] = useState(() => Date.now())
+  const daysOld = useMemo(() => {
     if (!createdAt) return Infinity
     return differenceInSeconds(now, new Date(createdAt)) / 86400
   }, [createdAt, now])
···
         )}
       </Button>
 
-      <Dialog.Outer control={control}>
+      <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
         <Dialog.Handle />
-        <Dialog.ScrollableInner
-          label={_(msg`New user info dialog`)}
-          style={web({width: 'auto', maxWidth: 400, minWidth: 200})}>
-          <View style={[a.gap_md]}>
-            <View style={[a.align_center]}>
-              <View
-                style={[
-                  {
-                    height: 60,
-                    width: 64,
-                  },
-                ]}>
-                <Newskie
-                  width={64}
-                  height={64}
-                  fill="#FFC404"
-                  style={[a.absolute, a.inset_0]}
-                />
-              </View>
-              <Text style={[a.font_bold, a.text_xl]}>
-                {isMe ? (
-                  <Trans>Welcome, friend!</Trans>
-                ) : (
-                  <Trans>Say hello!</Trans>
-                )}
-              </Text>
-            </View>
-            <Text style={[a.text_md, a.text_center, a.leading_snug]}>
-              {profile.joinedViaStarterPack ? (
-                <Trans>
-                  {profileName} joined Bluesky using a starter pack{' '}
-                  {timeAgo(createdAt, now, {format: 'long'})} ago
-                </Trans>
-              ) : (
-                <Trans>
-                  {profileName} joined Bluesky{' '}
-                  {timeAgo(createdAt, now, {format: 'long'})} ago
-                </Trans>
-              )}
-            </Text>
-            {profile.joinedViaStarterPack ? (
-              <StarterPackCard.Link
-                starterPack={profile.joinedViaStarterPack}
-                onPress={() => {
-                  control.close()
-                }}>
-                <View
-                  style={[
-                    a.w_full,
-                    a.mt_sm,
-                    a.p_lg,
-                    a.border,
-                    a.rounded_sm,
-                    t.atoms.border_contrast_low,
-                  ]}>
-                  <StarterPackCard.Card
-                    starterPack={profile.joinedViaStarterPack}
-                  />
-                </View>
-              </StarterPackCard.Link>
-            ) : null}
+        <DialogInner profile={profile} createdAt={createdAt} now={now} />
+      </Dialog.Outer>
+    </View>
+  )
+}
 
-            {isNative && (
-              <Button
-                label={_(msg`Close`)}
-                variant="solid"
-                color="secondary"
-                size="small"
-                style={[a.mt_sm]}
-                onPress={() => control.close()}>
-                <ButtonText>
-                  <Trans>Close</Trans>
-                </ButtonText>
-              </Button>
-            )}
+function DialogInner({
+  profile,
+  createdAt,
+  now,
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+  createdAt: string
+  now: number
+}) {
+  const control = Dialog.useDialogContext()
+  const {_} = useLingui()
+  const t = useTheme()
+  const moderationOpts = useModerationOpts()
+  const {currentAccount} = useSession()
+  const timeAgo = useGetTimeAgo()
+  const isMe = profile.did === currentAccount?.did
+
+  const profileName = useMemo(() => {
+    const name = profile.displayName || profile.handle
+
+    if (isMe) {
+      return _(msg`You`)
+    }
+
+    if (!moderationOpts) return name
+    const moderation = moderateProfile(profile, moderationOpts)
+
+    return sanitizeDisplayName(name, moderation.ui('displayName'))
+  }, [_, isMe, moderationOpts, profile])
+
+  return (
+    <Dialog.ScrollableInner
+      label={_(msg`New user info dialog`)}
+      style={web({maxWidth: 400})}>
+      <View style={[a.gap_md]}>
+        <View style={[a.align_center]}>
+          <View
+            style={[
+              {
+                height: 60,
+                width: 64,
+              },
+            ]}>
+            <Newskie
+              width={64}
+              height={64}
+              fill="#FFC404"
+              style={[a.absolute, a.inset_0]}
+            />
           </View>
+          <Text style={[a.font_bold, a.text_xl]}>
+            {isMe ? <Trans>Welcome, friend!</Trans> : <Trans>Say hello!</Trans>}
+          </Text>
+        </View>
+        <Text style={[a.text_md, a.text_center, a.leading_snug]}>
+          {profile.joinedViaStarterPack ? (
+            <Trans>
+              {profileName} joined Bluesky using a starter pack{' '}
+              {timeAgo(createdAt, now, {format: 'long'})} ago
+            </Trans>
+          ) : (
+            <Trans>
+              {profileName} joined Bluesky{' '}
+              {timeAgo(createdAt, now, {format: 'long'})} ago
+            </Trans>
+          )}
+        </Text>
+        {profile.joinedViaStarterPack ? (
+          <StarterPackCard.Link
+            starterPack={profile.joinedViaStarterPack}
+            onPress={() => control.close()}>
+            <View
+              style={[
+                a.w_full,
+                a.mt_sm,
+                a.p_lg,
+                a.border,
+                a.rounded_sm,
+                t.atoms.border_contrast_low,
+              ]}>
+              <StarterPackCard.Card
+                starterPack={profile.joinedViaStarterPack}
+              />
+            </View>
+          </StarterPackCard.Link>
+        ) : null}
 
-          <Dialog.Close />
-        </Dialog.ScrollableInner>
-      </Dialog.Outer>
-    </View>
+        {isNative && (
+          <Button
+            label={_(msg`Close`)}
+            color="secondary"
+            size="small"
+            style={[a.mt_sm]}
+            onPress={() => control.close()}>
+            <ButtonText>
+              <Trans>Close</Trans>
+            </ButtonText>
+          </Button>
+        )}
+      </View>
+
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
   )
 }

src/components/Pills.tsx

···
 import React from 'react'
 import {View} from 'react-native'
-import {BSKY_LABELER_DID, ModerationCause} from '@atproto/api'
+import {BSKY_LABELER_DID, type ModerationCause} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
+import {atoms as a, useTheme, type ViewStyleProp} from '#/alf'
 import {Button} from '#/components/Button'
 import {
   ModerationDetailsDialog,

src/components/Portal.tsx

···
   useState,
 } from 'react'
 
-type Component = React.ReactElement
+type Component = React.ReactElement<any>
 
 type ContextType = {
   outlet: Component | null

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerWeb.tsx

···
   playlist: string
   setHasSubtitleTrack: (v: boolean) => void
   setError: (v: Error | null) => void
-  videoRef: React.RefObject<HTMLVideoElement>
+  videoRef: React.RefObject<HTMLVideoElement | null>
   setHlsLoading: (v: boolean) => void
 }) {
   const [Hls, setHls] = useState<typeof HlsTypes.default | undefined>(

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoFallback.tsx

···
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/ControlButton.tsx

···
 import {type SvgProps} from 'react-native-svg'
-import type React from 'react'
 
 import {PressableWithHover} from '#/view/com/util/PressableWithHover'
 import {atoms as a, useTheme, web} from '#/alf'

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/Scrubber.tsx

···
 import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {isFirefox, isTouchDevice} from '#/lib/browser'
 import {clamp} from '#/lib/numbers'

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VideoControls.tsx

···
   hlsLoading,
   hasSubtitleTrack,
 }: {
-  videoRef: React.RefObject<HTMLVideoElement>
-  hlsRef: React.RefObject<Hls | undefined>
+  videoRef: React.RefObject<HTMLVideoElement | null>
+  hlsRef: React.RefObject<Hls | undefined | null>
   active: boolean
   setActive: () => void
   focused: boolean
   setFocused: (focused: boolean) => void
   onScreen: boolean
-  fullscreenRef: React.RefObject<HTMLDivElement>
+  fullscreenRef: React.RefObject<HTMLDivElement | null>
   hlsLoading: boolean
   hasSubtitleTrack: boolean
 }) {
···
   }, [onSeek, videoRef])
 
   const [showCursor, setShowCursor] = useState(true)
-  const cursorTimeoutRef = useRef<ReturnType<typeof setTimeout>>()
+  const cursorTimeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined)
   const onPointerMoveEmptySpace = useCallback(() => {
     setShowCursor(true)
     if (cursorTimeoutRef.current) {
···
     [hovered],
   )
 
-  const timeoutRef = useRef<ReturnType<typeof setTimeout>>()
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>(undefined)
 
   const onHoverWithTimeout = useCallback(() => {
     onHover()

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VolumeControl.tsx

···
 import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {isSafari, isTouchDevice} from '#/lib/browser'
 import {atoms as a} from '#/alf'

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/utils.tsx

···
 import {logger} from '#/logger'
 import {useVideoVolumeState} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
 
-export function useVideoElement(ref: RefObject<HTMLVideoElement>) {
+export function useVideoElement(ref: RefObject<HTMLVideoElement | null>) {
   const [playing, setPlaying] = useState(false)
   const [muted, setMuted] = useState(true)
   const [currentTime, setCurrentTime] = useState(0)

src/components/Post/Embed/VideoEmbed/index.web.tsx

···
 import {type AppBskyEmbedVideo} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {isFirefox} from '#/lib/browser'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
···
     useActiveVideoWeb()
   const [onScreen, setOnScreen] = useState(false)
   const [isFullscreen] = useFullscreen()
-  const lastKnownTime = useRef<number | undefined>()
+  const lastKnownTime = useRef<number | undefined>(undefined)
 
   useEffect(() => {
     if (!ref.current) return

src/components/PostControls/PostMenu/index.tsx

···
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {type Shadow} from '#/state/cache/post-shadow'
 import {EventStopper} from '#/view/com/util/EventStopper'

src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx

···
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
-import type React from 'react'
 
 import {makeProfileLink} from '#/lib/routes/links'
 import {type NavigationProp} from '#/lib/routes/types'

src/components/PostControls/ShareMenu/index.tsx

···
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {makeProfileLink} from '#/lib/routes/links'
 import {shareUrl} from '#/lib/sharing'

src/components/ProfileHoverCard/types.ts

···
-import type React from 'react'
-
 import {type ViewStyleProp} from '#/alf'
 
 export type ProfileHoverCardProps = ViewStyleProp & {

src/components/ProgressGuide/FollowDialog.tsx

···
   interestsDisplayNames,
 }: {
   guide: Follow10ProgressGuide
-  inputRef: React.RefObject<TextInput>
-  listRef: React.RefObject<ListMethods>
+  inputRef: React.RefObject<TextInput | null>
+  listRef: React.RefObject<ListMethods | null>
   onSelectTab: (v: string) => void
   searchText: string
   setHeaderHeight: (v: number) => void
···
 }: {
   onChangeText: (text: string) => void
   onEscape: () => void
-  inputRef: React.RefObject<TextInput>
+  inputRef: React.RefObject<TextInput | null>
   defaultValue: string
 }) {
   const t = useTheme()

src/components/ProgressGuide/List.tsx

···
-import {StyleProp, View, ViewStyle} from 'react-native'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/components/ProgressGuide/Toast.tsx

···
 import {isWeb} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {Portal} from '#/components/Portal'
-import {AnimatedCheck, AnimatedCheckRef} from '../anim/AnimatedCheck'
+import {AnimatedCheck, type AnimatedCheckRef} from '../anim/AnimatedCheck'
 import {Text} from '../Typography'
 
 export interface ProgressGuideToastRef {
···
   const translateY = useSharedValue(0)
   const opacity = useSharedValue(0)
   const animatedCheckRef = React.useRef<AnimatedCheckRef | null>(null)
-  const timeoutRef = React.useRef<NodeJS.Timeout | undefined>()
+  const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined)
   const winDim = useWindowDimensions()
 
   /**

src/components/ReportDialog/SelectLabelerView.tsx

···
 import {View} from 'react-native'
-import {AppBskyLabelerDefs} from '@atproto/api'
+import {type AppBskyLabelerDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
···
 import {Divider} from '#/components/Divider'
 import * as LabelingServiceCard from '#/components/LabelingServiceCard'
 import {Text} from '#/components/Typography'
-import {ReportDialogProps} from './types'
+import {type ReportDialogProps} from './types'
 
 export function SelectLabelerView({
   ...props

src/components/ReportDialog/SelectReportOptionView.tsx

···
 import React from 'react'
 import {View} from 'react-native'
-import {AppBskyLabelerDefs} from '@atproto/api'
+import {type AppBskyLabelerDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {ReportOption, useReportOptions} from '#/lib/moderation/useReportOptions'
+import {
+  type ReportOption,
+  useReportOptions,
+} from '#/lib/moderation/useReportOptions'
 import {Link} from '#/components/Link'
 import {DMCA_LINK} from '#/components/ReportDialog/const'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
···
 } from '#/components/icons/Chevron'
 import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from '#/components/icons/SquareArrowTopRight'
 import {Text} from '#/components/Typography'
-import {ReportDialogProps} from './types'
+import {type ReportDialogProps} from './types'
 
 export function SelectReportOptionView(props: {
   params: ReportDialogProps['params']

src/components/ReportDialog/SubmitView.tsx

···
 import React from 'react'
 import {View} from 'react-native'
-import {AppBskyLabelerDefs} from '@atproto/api'
+import {type AppBskyLabelerDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {getLabelingServiceTitle} from '#/lib/moderation'
-import {ReportOption} from '#/lib/moderation/useReportOptions'
+import {type ReportOption} from '#/lib/moderation/useReportOptions'
 import {isAndroid} from '#/platform/detection'
 import {useAgent} from '#/state/session'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
···
 import {PaperPlane_Stroke2_Corner0_Rounded as SendIcon} from '#/components/icons/PaperPlane'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
-import {ReportDialogProps} from './types'
+import {type ReportDialogProps} from './types'
 
 export function SubmitView({
   params,

src/components/ReportDialog/index.tsx

···
 import React from 'react'
 import {Pressable, View} from 'react-native'
-import {ScrollView} from 'react-native-gesture-handler'
+import {type ScrollView} from 'react-native-gesture-handler'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {ReportOption} from '#/lib/moderation/useReportOptions'
+import {type ReportOption} from '#/lib/moderation/useReportOptions'
 import {useMyLabelersQuery} from '#/state/queries/preferences'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
-import {AppBskyLabelerDefs} from '@atproto/api'
+import {type AppBskyLabelerDefs} from '@atproto/api'
 
 import {atoms as a} from '#/alf'
 import * as Dialog from '#/components/Dialog'
···
 import {SelectLabelerView} from './SelectLabelerView'
 import {SelectReportOptionView} from './SelectReportOptionView'
 import {SubmitView} from './SubmitView'
-import {ReportDialogProps} from './types'
+import {type ReportDialogProps} from './types'
 
 export function ReportDialog(props: ReportDialogProps) {
   return (

src/components/ReportDialog/types.ts

···
-import * as Dialog from '#/components/Dialog'
+import type * as Dialog from '#/components/Dialog'
 
 export type ReportDialogProps = {
   control: Dialog.DialogOuterProps['control']

src/components/RichTextTag.tsx

···
 import React from 'react'
-import {StyleProp, Text as RNText, TextStyle} from 'react-native'
+import {type StyleProp, Text as RNText, type TextStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {isInvalidHandle} from '#/lib/strings/handles'
 import {isNative, isWeb} from '#/platform/detection'
 import {

src/components/Select/types.ts

···
     item: T,
     index: number,
     selectedValue?: string | null,
-  ) => React.ReactElement
+  ) => React.ReactElement<any>
   /*
    * Extracts the value from an item. Defaults to `item => item.value`
    */

src/components/StarterPack/Main/PostsList.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {isNative} from '#/platform/detection'
-import {FeedDescriptor} from '#/state/queries/post-feed'
+import {type FeedDescriptor} from '#/state/queries/post-feed'
 import {PostFeed} from '#/view/com/posts/PostFeed'
 import {EmptyState} from '#/view/com/util/EmptyState'
-import {ListRef} from '#/view/com/util/List'
-import {SectionRef} from '#/screens/Profile/Sections/types'
+import {type ListRef} from '#/view/com/util/List'
+import {type SectionRef} from '#/screens/Profile/Sections/types'
 
 interface ProfilesListProps {
   listUri: string

src/components/StarterPack/Main/ProfilesList.tsx

···
 import React, {useCallback} from 'react'
-import {ListRenderItemInfo, View} from 'react-native'
+import {type ListRenderItemInfo, View} from 'react-native'
 import {
-  AppBskyActorDefs,
-  AppBskyGraphGetList,
+  type AppBskyActorDefs,
+  type AppBskyGraphGetList,
   AtUri,
-  ModerationOpts,
+  type ModerationOpts,
 } from '@atproto/api'
-import {InfiniteData, UseInfiniteQueryResult} from '@tanstack/react-query'
+import {
+  type InfiniteData,
+  type UseInfiniteQueryResult,
+} from '@tanstack/react-query'
 
 import {useBottomBarOffset} from '#/lib/hooks/useBottomBarOffset'
 import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
···
 import {isNative, isWeb} from '#/platform/detection'
 import {useAllListMembersQuery} from '#/state/queries/list-members'
 import {useSession} from '#/state/session'
-import {List, ListRef} from '#/view/com/util/List'
-import {SectionRef} from '#/screens/Profile/Sections/types'
+import {List, type ListRef} from '#/view/com/util/List'
+import {type SectionRef} from '#/screens/Profile/Sections/types'
 import {atoms as a, useTheme} from '#/alf'
 import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 import {Default as ProfileCard} from '#/components/ProfileCard'

src/components/StarterPack/QrCode.tsx

···
-import React from 'react'
+import {lazy} from 'react'
 import {View} from 'react-native'
 // @ts-expect-error missing types
 import QRCode from 'react-native-qrcode-styled'
 import type ViewShot from 'react-native-view-shot'
-import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
+import {type AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 
 import {isWeb} from '#/platform/detection'
···
 import {Text} from '#/components/Typography'
 import * as bsky from '#/types/bsky'
 
-const LazyViewShot = React.lazy(
+const LazyViewShot = lazy(
   // @ts-expect-error dynamic import
   () => import('react-native-view-shot/src/index'),
 )
 
-interface Props {
+export function QrCode({
+  starterPack,
+  link,
+  ref,
+}: {
   starterPack: AppBskyGraphDefs.StarterPackView
   link: string
-}
-
-export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
-  {starterPack, link},
-  ref,
-) {
+  ref: React.Ref<ViewShot>
+}) {
   const {record} = starterPack
 
   if (
···
       </LinearGradientBackground>
     </LazyViewShot>
   )
-})
+}
 
 export function QrCodeInner({link}: {link: string}) {
   const t = useTheme()

src/components/StarterPack/QrCodeDialog.tsx

···
-import React from 'react'
+import {Suspense, useRef, useState} from 'react'
 import {View} from 'react-native'
 import type ViewShot from 'react-native-view-shot'
 import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
···
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
-import * as Toast from '#/view/com/util/Toast'
-import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {atoms as a, useBreakpoints} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {type DialogControlProps} from '#/components/Dialog'
+import {ArrowOutOfBoxModified_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowOutOfBox'
+import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink'
+import {FloppyDisk_Stroke2_Corner0_Rounded as FloppyDiskIcon} from '#/components/icons/FloppyDisk'
 import {Loader} from '#/components/Loader'
 import {QrCode} from '#/components/StarterPack/QrCode'
+import * as Toast from '#/components/Toast'
 import * as bsky from '#/types/bsky'
 
 export function QrCodeDialog({
···
   control: DialogControlProps
 }) {
   const {_} = useLingui()
-  const [isProcessing, setIsProcessing] = React.useState(false)
+  const {gtMobile} = useBreakpoints()
+  const [isSaveProcessing, setIsSaveProcessing] = useState(false)
+  const [isCopyProcessing, setIsCopyProcessing] = useState(false)
 
-  const ref = React.useRef<ViewShot>(null)
+  const ref = useRef<ViewShot>(null)
 
   const getCanvas = (base64: string): Promise<HTMLCanvasElement> => {
     return new Promise(resolve => {
···
         try {
           await createAssetAsync(`file://${uri}`)
         } catch (e: unknown) {
-          Toast.show(
-            _(msg`An error occurred while saving the QR code!`),
-            'xmark',
-          )
+          Toast.show(_(msg`An error occurred while saving the QR code!`), {
+            type: 'error',
+          })
           logger.error('Failed to save QR code', {error: e})
           return
         }
       } else {
-        setIsProcessing(true)
+        setIsSaveProcessing(true)
 
         if (
           !bsky.validate(
···
         link.click()
       }
 
-      logEvent('starterPack:share', {
+      logger.metric('starterPack:share', {
         starterPack: starterPack.uri,
         shareType: 'qrcode',
         qrShareType: 'save',
       })
-      setIsProcessing(false)
+      setIsSaveProcessing(false)
       Toast.show(
         isWeb
           ? _(msg`QR code has been downloaded!`)
···
   }
 
   const onCopyPress = async () => {
-    setIsProcessing(true)
+    setIsCopyProcessing(true)
     ref.current?.capture?.().then(async (uri: string) => {
       const canvas = await getCanvas(uri)
       // @ts-expect-error web only
···
         navigator.clipboard.write([item])
       })
 
-      logEvent('starterPack:share', {
+      logger.metric('starterPack:share', {
         starterPack: starterPack.uri,
         shareType: 'qrcode',
         qrShareType: 'copy',
       })
       Toast.show(_(msg`QR code copied to your clipboard!`))
-      setIsProcessing(false)
+      setIsCopyProcessing(false)
       control.close()
     })
   }
···
       control.close(() => {
         Sharing.shareAsync(uri, {mimeType: 'image/png', UTI: 'image/png'}).then(
           () => {
-            logEvent('starterPack:share', {
+            logger.metric('starterPack:share', {
               starterPack: starterPack.uri,
               shareType: 'qrcode',
               qrShareType: 'share',
···
   }
 
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`Create a QR code for a starter pack`)}>
         <View style={[a.flex_1, a.align_center, a.gap_5xl]}>
-          <React.Suspense fallback={<Loading />}>
+          <Suspense fallback={<Loading />}>
             {!link ? (
               <Loading />
             ) : (
               <>
                 <QrCode starterPack={starterPack} link={link} ref={ref} />
-                {isProcessing ? (
-                  <View>
-                    <Loader size="xl" />
-                  </View>
-                ) : (
-                  <View
-                    style={[a.w_full, a.gap_md, isWeb && [a.flex_row_reverse]]}>
-                    <Button
-                      label={_(msg`Copy QR code`)}
-                      variant="solid"
-                      color="secondary"
-                      size="small"
-                      onPress={isWeb ? onCopyPress : onSharePress}>
-                      <ButtonText>
-                        {isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
-                      </ButtonText>
-                    </Button>
-                    <Button
-                      label={_(msg`Save QR code`)}
-                      variant="solid"
-                      color="secondary"
-                      size="small"
-                      onPress={onSavePress}>
-                      <ButtonText>
-                        <Trans>Save</Trans>
-                      </ButtonText>
-                    </Button>
-                  </View>
-                )}
+                <View
+                  style={[
+                    a.w_full,
+                    a.gap_md,
+                    gtMobile && [a.flex_row, a.justify_center, a.flex_wrap],
+                  ]}>
+                  <Button
+                    label={_(msg`Copy QR code`)}
+                    color="primary_subtle"
+                    size="large"
+                    onPress={isWeb ? onCopyPress : onSharePress}>
+                    <ButtonIcon
+                      icon={
+                        isCopyProcessing
+                          ? Loader
+                          : isWeb
+                            ? ChainLinkIcon
+                            : ShareIcon
+                      }
+                    />
+                    <ButtonText>
+                      {isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
+                    </ButtonText>
+                  </Button>
+                  <Button
+                    label={_(msg`Save QR code`)}
+                    color="secondary"
+                    size="large"
+                    onPress={onSavePress}>
+                    <ButtonIcon
+                      icon={isSaveProcessing ? Loader : FloppyDiskIcon}
+                    />
+                    <ButtonText>
+                      <Trans>Save</Trans>
+                    </ButtonText>
+                  </Button>
+                </View>
               </>
             )}
-          </React.Suspense>
+          </Suspense>
         </View>
         <Dialog.Close />
       </Dialog.ScrollableInner>
···
 
 function Loading() {
   return (
-    <View style={[a.align_center, a.p_xl]}>
+    <View style={[a.align_center, a.justify_center, {minHeight: 400}]}>
       <Loader size="xl" />
     </View>
   )

src/components/StarterPack/ShareDialog.tsx

···
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useSaveImageToMediaLibrary} from '#/lib/media/save-image'
 import {shareUrl} from '#/lib/sharing'
-import {logEvent} from '#/lib/statsig/statsig'
 import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
+import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
-import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {type DialogControlProps} from '#/components/Dialog'
 import * as Dialog from '#/components/Dialog'
+import {ChainLink_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink'
+import {Download_Stroke2_Corner0_Rounded as DownloadIcon} from '#/components/icons/Download'
+import {QrCode_Stroke2_Corner0_Rounded as QrCodeIcon} from '#/components/icons/QrCode'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 
···
 
 export function ShareDialog(props: Props) {
   return (
-    <Dialog.Outer control={props.control}>
+    <Dialog.Outer
+      control={props.control}
+      nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <ShareDialogInner {...props} />
     </Dialog.Outer>
···
 }: Props) {
   const {_} = useLingui()
   const t = useTheme()
-  const {isTabletOrDesktop} = useWebMediaQueries()
+  const {gtMobile} = useBreakpoints()
 
   const imageUrl = getStarterPackOgCard(starterPack)
 
   const onShareLink = async () => {
     if (!link) return
     shareUrl(link)
-    logEvent('starterPack:share', {
+    logger.metric('starterPack:share', {
       starterPack: starterPack.uri,
       shareType: 'link',
     })
···
     <>
       <Dialog.ScrollableInner label={_(msg`Share link dialog`)}>
         {!imageLoaded || !link ? (
-          <View style={[a.p_xl, a.align_center]}>
+          <View style={[a.align_center, a.justify_center, {minHeight: 350}]}>
             <Loader size="xl" />
           </View>
         ) : (
-          <View style={[!isTabletOrDesktop && a.gap_lg]}>
-            <View style={[a.gap_sm, isTabletOrDesktop && a.pb_lg]}>
+          <View style={[!gtMobile && a.gap_lg]}>
+            <View style={[a.gap_sm, gtMobile && a.pb_lg]}>
               <Text style={[a.font_bold, a.text_2xl]}>
                 <Trans>Invite people to this starter pack!</Trans>
               </Text>
···
                 a.rounded_sm,
                 {
                   aspectRatio: 1200 / 630,
-                  transform: [{scale: isTabletOrDesktop ? 0.85 : 1}],
-                  marginTop: isTabletOrDesktop ? -20 : 0,
+                  transform: [{scale: gtMobile ? 0.85 : 1}],
+                  marginTop: gtMobile ? -20 : 0,
                 },
               ]}
               accessibilityIgnoresInvertColors={true}
···
             <View
               style={[
                 a.gap_md,
-                isWeb && [a.gap_sm, a.flex_row_reverse, {marginLeft: 'auto'}],
+                gtMobile && [
+                  a.gap_sm,
+                  a.justify_center,
+                  a.flex_row,
+                  a.flex_wrap,
+                ],
               ]}>
               <Button
                 label={isWeb ? _(msg`Copy link`) : _(msg`Share link`)}
-                variant="solid"
-                color="secondary"
-                size="small"
-                style={[isWeb && a.self_center]}
+                color="primary_subtle"
+                size="large"
                 onPress={onShareLink}>
+                <ButtonIcon icon={ChainLinkIcon} />
                 <ButtonText>
                   {isWeb ? <Trans>Copy Link</Trans> : <Trans>Share link</Trans>}
                 </ButtonText>
               </Button>
               <Button
                 label={_(msg`Share QR code`)}
-                variant="solid"
-                color="secondary"
-                size="small"
-                style={[isWeb && a.self_center]}
+                color="primary_subtle"
+                size="large"
                 onPress={() => {
                   control.close(() => {
                     qrDialogControl.open()
                   })
                 }}>
+                <ButtonIcon icon={QrCodeIcon} />
                 <ButtonText>
                   <Trans>Share QR code</Trans>
                 </ButtonText>
···
               {isNative && (
                 <Button
                   label={_(msg`Save image`)}
-                  variant="ghost"
                   color="secondary"
-                  size="small"
-                  style={[isWeb && a.self_center]}
+                  size="large"
                   onPress={onSave}>
+                  <ButtonIcon icon={DownloadIcon} />
                   <ButtonText>
                     <Trans>Save image</Trans>
                   </ButtonText>

src/components/StarterPack/Wizard/ScreenTransition.tsx

···
-import React from 'react'
-import {StyleProp, ViewStyle} from 'react-native'
+import {type StyleProp, type ViewStyle} from 'react-native'
 import Animated, {
   FadeIn,
   FadeOut,
   SlideInLeft,
   SlideInRight,
 } from 'react-native-reanimated'
+import type React from 'react'
 
 import {isWeb} from '#/platform/detection'
 

src/components/SubtleWebHover.tsx

···
-import {ViewStyleProp} from '#/alf'
+import {type ViewStyleProp} from '#/alf'
 
 export function SubtleWebHover({}: ViewStyleProp & {hover: boolean}) {
   return null

src/components/TrendingTopics.tsx

···
 import React from 'react'
 import {View} from 'react-native'
-import {AtUri} from '@atproto/api'
+import {type AtUri} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
···
 // import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
 // import {CloseQuote_Filled_Stroke2_Corner0_Rounded as Quote} from '#/components/icons/Quote'
 // import {UserAvatar} from '#/view/com/util/UserAvatar'
-import type {TrendingTopic} from '#/state/queries/trending/useTrendingTopics'
-import {atoms as a, native, useTheme, ViewStyleProp} from '#/alf'
+import {type TrendingTopic} from '#/state/queries/trending/useTrendingTopics'
+import {atoms as a, native, useTheme, type ViewStyleProp} from '#/alf'
 import {StarterPack as StarterPackIcon} from '#/components/icons/StarterPack'
-import {Link as InternalLink, LinkProps} from '#/components/Link'
+import {Link as InternalLink, type LinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
 export function TrendingTopic({

src/components/anim/AnimatedCheck.tsx

···
 } from 'react-native-reanimated'
 import Svg, {Circle, Path} from 'react-native-svg'
 
-import {Props, useCommonSVGProps} from '#/components/icons/common'
+import {type Props, useCommonSVGProps} from '#/components/icons/common'
 
 const AnimatedPath = Animated.createAnimatedComponent(Path)
 const AnimatedCircle = Animated.createAnimatedComponent(Circle)

src/components/dialogs/Embed.tsx

···
 import {memo, useEffect, useMemo, useState} from 'react'
 import {View} from 'react-native'
-import {AppBskyActorDefs, AppBskyFeedPost, AtUri} from '@atproto/api'
+import {type AppBskyActorDefs, type AppBskyFeedPost, AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/components/dialogs/EmbedConsent.tsx

···
 } from '#/lib/strings/embed-player'
 import {useSetExternalEmbedPref} from '#/state/preferences'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {Button, ButtonText} from '../Button'
-import {Text} from '../Typography'
+import {Text} from '#/components/Typography'
 
 export function EmbedConsentDialog({
   control,
···
   }, [control, setExternalEmbedPref, source])
 
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <Dialog.ScrollableInner
         label={_(msg`External Media`)}

src/components/dialogs/GifSelect.tsx

···
   onClose,
   onSelectGif: onSelectGifProp,
 }: {
-  controlRef: React.RefObject<{open: () => void}>
+  controlRef: React.RefObject<{open: () => void} | null>
   onClose?: () => void
   onSelectGif: (gif: Gif) => void
 }) {

src/components/dialogs/MutedWords.tsx

···
 import React from 'react'
 import {View} from 'react-native'
-import {AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api'
+import {type AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
···
   native,
   useBreakpoints,
   useTheme,
-  ViewStyleProp,
+  type ViewStyleProp,
   web,
 } from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'

src/components/dialogs/SearchablePeopleList.tsx

···
   value: string
   onChangeText: (text: string) => void
   onEscape: () => void
-  inputRef: React.RefObject<TextInput>
+  inputRef: React.RefObject<TextInput | null>
 }) {
   const t = useTheme()
   const {_} = useLingui()

src/components/dms/ActionsWrapper.web.tsx

···
 import {type ChatBskyConvoDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {useConvoActive} from '#/state/messages/convo'
 import {useSession} from '#/state/session'

src/components/dms/BlockedByListDialog.tsx

···
 import React from 'react'
 import {View} from 'react-native'
-import {ModerationCause} from '@atproto/api'
+import {type ModerationCause} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {listUriToHref} from '#/lib/strings/url-helpers'
 import {atoms as a, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
-import {DialogControlProps} from '#/components/Dialog'
+import {type DialogControlProps} from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'

src/components/dms/LeaveConvoPrompt.tsx

···
 import {useLingui} from '@lingui/react'
 import {StackActions, useNavigation} from '@react-navigation/native'
 
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {isNative} from '#/platform/detection'
 import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
 import * as Toast from '#/view/com/util/Toast'
-import {DialogOuterProps} from '#/components/Dialog'
+import {type DialogOuterProps} from '#/components/Dialog'
 import * as Prompt from '#/components/Prompt'
 
 export function LeaveConvoPrompt({

src/components/dms/MessagesListBlockedFooter.tsx

···
 import React from 'react'
 import {View} from 'react-native'
-import {ModerationDecision} from '@atproto/api'
+import {type ModerationDecision} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
···
 import {LeaveConvoPrompt} from '#/components/dms/LeaveConvoPrompt'
 import {ReportConversationPrompt} from '#/components/dms/ReportConversationPrompt'
 import {Text} from '#/components/Typography'
-import * as bsky from '#/types/bsky'
+import type * as bsky from '#/types/bsky'
 
 export function MessagesListBlockedFooter({
   recipient: initialRecipient,

src/components/dms/ReportConversationPrompt.tsx

···
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {DialogControlProps} from '#/components/Dialog'
+import {type DialogControlProps} from '#/components/Dialog'
 import * as Prompt from '#/components/Prompt'
 
 export function ReportConversationPrompt({

src/components/feeds/PostFeedVideoGridRow.tsx

···
 import {AppBskyEmbedVideo} from '@atproto/api'
 
 import {logEvent} from '#/lib/statsig/statsig'
-import {FeedPostSliceItem} from '#/state/queries/post-feed'
-import {VideoFeedSourceContext} from '#/screens/VideoFeed/types'
+import {type FeedPostSliceItem} from '#/state/queries/post-feed'
+import {type VideoFeedSourceContext} from '#/screens/VideoFeed/types'
 import {atoms as a, useGutters} from '#/alf'
 import * as Grid from '#/components/Grid'
 import {

src/components/forms/DateField/index.web.tsx

···
 import React from 'react'
-import {StyleSheet, TextInput, TextInputProps} from 'react-native'
+import {StyleSheet, type TextInput, type TextInputProps} from 'react-native'
 // @ts-expect-error untyped
 import {unstable_createElement} from 'react-native-web'
 
-import {DateFieldProps} from '#/components/forms/DateField/types'
+import {type DateFieldProps} from '#/components/forms/DateField/types'
 import {toSimpleDateString} from '#/components/forms/DateField/utils'
 import * as TextField from '#/components/forms/TextField'
 import {CalendarDays_Stroke2_Corner0_Rounded as CalendarDays} from '#/components/icons/CalendarDays'

src/components/forms/InputGroup.tsx

···
             {React.cloneElement(child, {
               // @ts-ignore
               style: [
+                // @ts-ignore
                 ...(Array.isArray(child.props?.style)
-                  ? child.props.style
-                  : [child.props.style || {}]),
+                  ? // @ts-ignore
+                    child.props.style
+                  : // @ts-ignore
+                    [child.props.style || {}]),
                 {
                   borderTopLeftRadius: i > 0 ? 0 : undefined,
                   borderTopRightRadius: i > 0 ? 0 : undefined,

src/components/forms/SearchInput.tsx

···
 import React from 'react'
-import {TextInput, View} from 'react-native'
+import {type TextInput, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/components/forms/TextField.tsx

···
 import {Text} from '#/components/Typography'
 
 const Context = createContext<{
-  inputRef: React.RefObject<TextInput> | null
+  inputRef: React.RefObject<TextInput | null> | null
   isInvalid: boolean
   hovered: boolean
   onHoverIn: () => void
···
   value?: string
   onChangeText?: (value: string) => void
   isInvalid?: boolean
-  inputRef?: React.RefObject<TextInput> | React.ForwardedRef<TextInput>
+  inputRef?: React.RefObject<TextInput | null> | React.ForwardedRef<TextInput>
 }
 
 export function createInput(Component: typeof TextInput) {

src/components/forms/ToggleButton.tsx

···
 import React from 'react'
-import {AccessibilityProps, TextStyle, View, ViewStyle} from 'react-native'
+import {
+  type AccessibilityProps,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native'
 
 import {atoms as a, native, useTheme} from '#/alf'
 import * as Toggle from '#/components/forms/Toggle'
···
 
 type ItemProps = Omit<Toggle.ItemProps, 'style' | 'role' | 'children'> &
   AccessibilityProps & {
-    children: React.ReactElement
+    children: React.ReactElement<any>
     testID?: string
   }
 

src/components/hooks/useFollowMethods.ts

···
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {LogEvents} from '#/lib/statsig/statsig'
+import {type LogEvents} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
-import {Shadow} from '#/state/cache/types'
+import {type Shadow} from '#/state/cache/types'
 import {useProfileFollowMutationQueue} from '#/state/queries/profile'
 import {useRequireAuth} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
-import * as bsky from '#/types/bsky'
+import type * as bsky from '#/types/bsky'
 
 export function useFollowMethods({
   profile,

src/components/hooks/useFullscreen.ts

···
   return () => document.removeEventListener('fullscreenchange', onChange)
 }
 
-export function useFullscreen(ref?: React.RefObject<HTMLElement>) {
+export function useFullscreen(ref?: React.RefObject<HTMLElement | null>) {
   if (!isWeb) throw new Error("'useFullscreen' is a web-only hook")
   const isFullscreen = useSyncExternalStore(fullscreenSubscribe, () =>
     Boolean(document.fullscreenElement),

src/components/icons/TEMPLATE.tsx

···
 import React from 'react'
 import Svg, {Path} from 'react-native-svg'
 
-import {Props, useCommonSVGProps} from '#/components/icons/common'
+import {type Props, useCommonSVGProps} from '#/components/icons/common'
 
 export const IconTemplate_Stroke2_Corner0_Rounded = React.forwardRef(
   function LogoImpl(props: Props, ref) {

src/components/intents/VerifyEmailIntentDialog.tsx

···
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {DialogControlProps} from '#/components/Dialog'
+import {type DialogControlProps} from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Resend} from '#/components/icons/ArrowRotateCounterClockwise'
 import {useIntentDialogs} from '#/components/intents/IntentDialogs'

src/components/moderation/LabelPreference.tsx

···
 } from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
 import {useLabelBehaviorDescription} from '#/lib/moderation/useLabelBehaviorDescription'

src/components/moderation/LabelsOnMe.tsx

···
-import {StyleProp, View, ViewStyle} from 'react-native'
-import {AppBskyFeedDefs, ComAtprotoLabelDefs} from '@atproto/api'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
+import {type AppBskyFeedDefs, type ComAtprotoLabelDefs} from '@atproto/api'
 import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useSession} from '#/state/session'
 import {atoms as a} from '#/alf'
-import {Button, ButtonIcon, ButtonSize, ButtonText} from '#/components/Button'
+import {
+  Button,
+  ButtonIcon,
+  type ButtonSize,
+  ButtonText,
+} from '#/components/Button'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {
   LabelsOnMeDialog,

src/components/moderation/LabelsOnMeDialog.tsx

···
 import React from 'react'
 import {View} from 'react-native'
-import {ComAtprotoLabelDefs, ComAtprotoModerationDefs} from '@atproto/api'
+import {type ComAtprotoLabelDefs, ComAtprotoModerationDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useMutation} from '@tanstack/react-query'

src/components/moderation/ModerationDetailsDialog.tsx

···
 import {View} from 'react-native'
-import {ModerationCause} from '@atproto/api'
+import {type ModerationCause} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
···
 import {atoms as a, useGutters, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {InlineLinkText} from '#/components/Link'
-import {AppModerationCause} from '#/components/Pills'
+import {type AppModerationCause} from '#/components/Pills'
 import {Text} from '#/components/Typography'
 
 export {useDialogControl as useModerationDetailsDialogControl} from '#/components/Dialog'

src/components/moderation/PostAlerts.tsx

···
-import {StyleProp, ViewStyle} from 'react-native'
-import {ModerationCause, ModerationUI} from '@atproto/api'
+import {type StyleProp, type ViewStyle} from 'react-native'
+import {type ModerationCause, type ModerationUI} from '@atproto/api'
 
 import {getModerationCauseKey, unique} from '#/lib/moderation'
 import * as Pills from '#/components/Pills'

src/components/moderation/ProfileHeaderAlerts.tsx

···
-import {StyleProp, ViewStyle} from 'react-native'
-import {ModerationDecision} from '@atproto/api'
+import {type StyleProp, type ViewStyle} from 'react-native'
+import {type ModerationDecision} from '@atproto/api'
 
 import {getModerationCauseKey, unique} from '#/lib/moderation'
 import * as Pills from '#/components/Pills'

src/components/moderation/ReportDialog/action.ts

···
 import {
-  $Typed,
-  ChatBskyConvoDefs,
-  ComAtprotoModerationCreateReport,
+  type $Typed,
+  type ChatBskyConvoDefs,
+  type ComAtprotoModerationCreateReport,
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
···
 
 import {logger} from '#/logger'
 import {useAgent} from '#/state/session'
-import {ReportState} from './state'
-import {ParsedReportSubject} from './types'
+import {type ReportState} from './state'
+import {type ParsedReportSubject} from './types'
 
 export function useSubmitReportMutation() {
   const {_} = useLingui()

src/components/moderation/ReportDialog/copy.ts

···
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {ParsedReportSubject} from './types'
+import {type ParsedReportSubject} from './types'
 
 export function useCopyForSubject(subject: ParsedReportSubject) {
   const {_} = useLingui()

src/components/moderation/ReportDialog/state.ts

···
-import {AppBskyLabelerDefs, ComAtprotoModerationDefs} from '@atproto/api'
+import {type AppBskyLabelerDefs, ComAtprotoModerationDefs} from '@atproto/api'
 
-import {ReportOption} from './utils/useReportOptions'
+import {type ReportOption} from './utils/useReportOptions'
 
 export type ReportState = {
   selectedOption?: ReportOption

src/components/moderation/ReportDialog/types.ts

···
 import {
-  $Typed,
-  AppBskyActorDefs,
-  AppBskyFeedDefs,
-  AppBskyGraphDefs,
-  ChatBskyConvoDefs,
+  type $Typed,
+  type AppBskyActorDefs,
+  type AppBskyFeedDefs,
+  type AppBskyGraphDefs,
+  type ChatBskyConvoDefs,
 } from '@atproto/api'
 
-import * as Dialog from '#/components/Dialog'
+import type * as Dialog from '#/components/Dialog'
 
 export type ReportSubject =
   | $Typed<AppBskyActorDefs.ProfileViewBasic>

src/components/moderation/ReportDialog/utils/parseReportSubject.ts

···
 } from '@atproto/api'
 
 import {
-  ParsedReportSubject,
-  ReportSubject,
+  type ParsedReportSubject,
+  type ReportSubject,
 } from '#/components/moderation/ReportDialog/types'
 import * as bsky from '#/types/bsky'
 

src/components/moderation/ScreenHider.tsx

···
 import React from 'react'
 import {
-  StyleProp,
+  type StyleProp,
   TouchableWithoutFeedback,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
-import {ModerationUI} from '@atproto/api'
+import {type ModerationUI} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {CenteredView} from '#/view/com/util/Views'
 import {atoms as a, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'

src/components/verification/VerificationCheckButton.tsx

···
   if (size === 'lg') {
     dimensions = gtPhone ? 20 : 18
   } else if (size === 'md') {
-    dimensions = 16
+    dimensions = 14
   }
 
   const verifiedByHidden = !state.profile.showBadge && state.profile.isViewer

src/lib/api/feed/custom.ts

···
 import {
-  AppBskyFeedDefs,
-  AppBskyFeedGetFeed as GetCustomFeed,
+  type AppBskyFeedDefs,
+  type AppBskyFeedGetFeed as GetCustomFeed,
   BskyAgent,
   jsonStringToLex,
 } from '@atproto/api'
···
   getAppLanguageAsContentLanguage,
   getContentLanguages,
 } from '#/state/preferences/languages'
-import {FeedAPI, FeedAPIResponse} from './types'
+import {type FeedAPI, type FeedAPIResponse} from './types'
 import {createBskyTopicsHeader, isBlueskyOwnedFeed} from './utils'
 
 export class CustomFeedAPI implements FeedAPI {

src/lib/api/feed/following.ts

···
-import {AppBskyFeedDefs, BskyAgent} from '@atproto/api'
+import {type AppBskyFeedDefs, type BskyAgent} from '@atproto/api'
 
-import {FeedAPI, FeedAPIResponse} from './types'
+import {type FeedAPI, type FeedAPIResponse} from './types'
 
 export class FollowingFeedAPI implements FeedAPI {
   agent: BskyAgent

src/lib/api/feed/likes.ts

···
 import {
-  AppBskyFeedDefs,
-  AppBskyFeedGetActorLikes as GetActorLikes,
-  BskyAgent,
+  type AppBskyFeedDefs,
+  type AppBskyFeedGetActorLikes as GetActorLikes,
+  type BskyAgent,
 } from '@atproto/api'
 
-import {FeedAPI, FeedAPIResponse} from './types'
+import {type FeedAPI, type FeedAPIResponse} from './types'
 
 export class LikesFeedAPI implements FeedAPI {
   agent: BskyAgent

src/lib/api/feed/merge.ts

···
-import {AppBskyFeedDefs, AppBskyFeedGetTimeline, BskyAgent} from '@atproto/api'
+import {
+  type AppBskyFeedDefs,
+  type AppBskyFeedGetTimeline,
+  type BskyAgent,
+} from '@atproto/api'
 import shuffle from 'lodash.shuffle'
 
 import {bundleAsync} from '#/lib/async/bundle'
 import {timeout} from '#/lib/async/timeout'
 import {feedUriToHref} from '#/lib/strings/url-helpers'
 import {getContentLanguages} from '#/state/preferences/languages'
-import {FeedParams} from '#/state/queries/post-feed'
+import {type FeedParams} from '#/state/queries/post-feed'
 import {FeedTuner} from '../feed-manip'
-import {FeedTunerFn} from '../feed-manip'
-import {FeedAPI, FeedAPIResponse, ReasonFeedSource} from './types'
+import {type FeedTunerFn} from '../feed-manip'
+import {
+  type FeedAPI,
+  type FeedAPIResponse,
+  type ReasonFeedSource,
+} from './types'
 import {createBskyTopicsHeader, isBlueskyOwnedFeed} from './utils'
 
 const REQUEST_WAIT_MS = 500 // 500ms

src/lib/api/feed/types.ts

···
-import {AppBskyFeedDefs} from '@atproto/api'
+import {type AppBskyFeedDefs} from '@atproto/api'
 
 export interface FeedAPIResponse {
   cursor?: string

src/lib/api/feed/utils.ts

···
 
 import {BSKY_FEED_OWNER_DIDS} from '#/lib/constants'
 import {isWeb} from '#/platform/detection'
-import {UsePreferencesQueryResponse} from '#/state/queries/preferences'
+import {type UsePreferencesQueryResponse} from '#/state/queries/preferences'
 
 let debugTopics = ''
 if (isWeb && typeof window !== 'undefined') {

src/lib/api/upload-blob.ts

···
 import {copyAsync} from 'expo-file-system'
-import {BskyAgent, ComAtprotoRepoUploadBlob} from '@atproto/api'
+import {type BskyAgent, type ComAtprotoRepoUploadBlob} from '@atproto/api'
 
 import {safeDeleteAsync} from '#/lib/media/manip'
 

src/lib/api/upload-blob.web.ts

···
-import {BskyAgent, ComAtprotoRepoUploadBlob} from '@atproto/api'
+import {type BskyAgent, type ComAtprotoRepoUploadBlob} from '@atproto/api'
 
 /**
  * @note It is recommended, on web, to use the `file` instance of the file

src/lib/assets.native.ts

···
-import {ImageRequireSource} from 'react-native'
+import {type ImageRequireSource} from 'react-native'
 
 export const DEF_AVATAR: ImageRequireSource = require('../../assets/default-avatar.png')
 export const CLOUD_SPLASH: ImageRequireSource = require('../../assets/splash.png')

src/lib/assets.ts

···
-import {ImageRequireSource} from 'react-native'
+import {type ImageRequireSource} from 'react-native'
 
 // @ts-ignore we need to pretend -prf
 export const DEF_AVATAR: ImageRequireSource = {uri: '/img/default-avatar.png'}

src/lib/custom-animations/GestureActionView.web.tsx

···
-import React from 'react'
+import type React from 'react'
 
 export function GestureActionView({children}: {children: React.ReactNode}) {
   return children

src/lib/custom-animations/PressableScale.tsx

···
-import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
+import {
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
 import Animated, {
   cancelAnimation,
   useAnimatedStyle,

src/lib/hooks/useAccountSwitcher.ts

···
 
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
-import {SessionAccount, useSessionApi} from '#/state/session'
+import {type SessionAccount, useSessionApi} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import * as Toast from '#/view/com/util/Toast'
 import {logEvent} from '../statsig/statsig'
-import {LogEvents} from '../statsig/statsig'
+import {type LogEvents} from '../statsig/statsig'
 
 export function useAccountSwitcher() {
   const [pendingDid, setPendingDid] = useState<string | null>(null)

src/lib/hooks/useAnimatedValue.ts

···
 import {Animated} from 'react-native'
 
 export function useAnimatedValue(initialValue: number) {
-  const lazyRef = React.useRef<Animated.Value>()
+  const lazyRef = React.useRef<Animated.Value>(undefined)
 
   if (lazyRef.current === undefined) {
     lazyRef.current = new Animated.Value(initialValue)

src/lib/hooks/useGoBack.ts

···
 import {StackActions, useNavigation} from '@react-navigation/native'
 
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {router} from '#/routes'
 
 export function useGoBack(onGoBack?: () => unknown) {

src/lib/hooks/useOTAUpdates.ts

···
   const appState = React.useRef<AppStateStatus>('active')
   const lastMinimize = React.useRef(0)
   const ranInitialCheck = React.useRef(false)
-  const timeout = React.useRef<NodeJS.Timeout>()
+  const timeout = React.useRef<NodeJS.Timeout>(undefined)
   const {currentlyRunning, isUpdatePending} = useUpdates()
   const currentChannel = currentlyRunning?.channel
 

src/lib/hooks/useSetTitle.ts

···
 import {useEffect} from 'react'
 import {useNavigation} from '@react-navigation/native'
 
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {bskyTitle} from '#/lib/strings/headings'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 

src/lib/hooks/useTimeAgo.ts

···
 import {useCallback} from 'react'
-import {I18n} from '@lingui/core'
+import {type I18n} from '@lingui/core'
 import {defineMessage, msg, plural} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {differenceInSeconds} from 'date-fns'

src/lib/hooks/useWebScrollRestoration.ts

···
 import {useEffect, useMemo, useState} from 'react'
-import {EventArg, useNavigation} from '@react-navigation/core'
+import {type EventArg, useNavigation} from '@react-navigation/core'
 
 if ('scrollRestoration' in history) {
   // Tell the brower not to mess with the scroll.

src/lib/media/video/compress.web.ts

···
-import {ImagePickerAsset} from 'expo-image-picker'
+import {type ImagePickerAsset} from 'expo-image-picker'
 
 import {VIDEO_MAX_SIZE} from '#/lib/constants'
 import {VideoTooLargeError} from '#/lib/media/video/errors'
-import {CompressedVideo} from './types'
+import {type CompressedVideo} from './types'
 
 // doesn't actually compress, converts to ArrayBuffer
 export async function compressVideo(

src/lib/media/video/upload.shared.ts

···
-import {BskyAgent} from '@atproto/api'
-import {I18n} from '@lingui/core'
+import {type BskyAgent} from '@atproto/api'
+import {type I18n} from '@lingui/core'
 import {msg} from '@lingui/macro'
 
 import {VIDEO_SERVICE_DID} from '#/lib/constants'

src/lib/media/video/upload.ts

···
 import {createUploadTask, FileSystemUploadType} from 'expo-file-system'
-import {AppBskyVideoDefs, BskyAgent} from '@atproto/api'
-import {I18n} from '@lingui/core'
+import {type AppBskyVideoDefs, type BskyAgent} from '@atproto/api'
+import {type I18n} from '@lingui/core'
 import {msg} from '@lingui/macro'
 import {nanoid} from 'nanoid/non-secure'
 
 import {AbortError} from '#/lib/async/cancelable'
 import {ServerError} from '#/lib/media/video/errors'
-import {CompressedVideo} from '#/lib/media/video/types'
+import {type CompressedVideo} from '#/lib/media/video/types'
 import {getServiceAuthToken, getVideoUploadLimits} from './upload.shared'
 import {createVideoEndpointUrl, mimeToExt} from './util'
 

src/lib/media/video/upload.web.ts

···
-import {AppBskyVideoDefs} from '@atproto/api'
-import {BskyAgent} from '@atproto/api'
-import {I18n} from '@lingui/core'
+import {type AppBskyVideoDefs} from '@atproto/api'
+import {type BskyAgent} from '@atproto/api'
+import {type I18n} from '@lingui/core'
 import {msg} from '@lingui/macro'
 import {nanoid} from 'nanoid/non-secure'
 
 import {AbortError} from '#/lib/async/cancelable'
 import {ServerError} from '#/lib/media/video/errors'
-import {CompressedVideo} from '#/lib/media/video/types'
+import {type CompressedVideo} from '#/lib/media/video/types'
 import {getServiceAuthToken, getVideoUploadLimits} from './upload.shared'
 import {createVideoEndpointUrl, mimeToExt} from './util'
 

src/lib/media/video/util.ts

···
 import {AtpAgent} from '@atproto/api'
 
-import {SupportedMimeTypes, VIDEO_SERVICE} from '#/lib/constants'
+import {type SupportedMimeTypes, VIDEO_SERVICE} from '#/lib/constants'
 
 export const createVideoEndpointUrl = (
   route: string,

src/lib/merge-refs.ts

···
  * returns a ref callback function that can be used to merge multiple refs into a single ref.
  */
 export function mergeRefs<T = any>(
-  refs: Array<React.MutableRefObject<T> | React.LegacyRef<T>>,
+  refs: Array<React.MutableRefObject<T> | React.Ref<T>>,
 ): React.RefCallback<T> {
   return value => {
     refs.forEach(ref => {

src/lib/moderation/blocked-and-muted.ts

···
-import * as bsky from '#/types/bsky'
+import type * as bsky from '#/types/bsky'
 
 export function isBlockedOrBlocking(profile: bsky.profile.AnyProfileView) {
   return profile.viewer?.blockedBy || profile.viewer?.blocking

src/lib/moderation/useLabelBehaviorDescription.ts

···
-import {InterpretedLabelValueDefinition, LabelPreference} from '@atproto/api'
+import {
+  type InterpretedLabelValueDefinition,
+  type LabelPreference,
+} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/lib/moderation/useLabelInfo.ts

···
 import {
-  AppBskyLabelerDefs,
-  ComAtprotoLabelDefs,
-  InterpretedLabelValueDefinition,
+  type AppBskyLabelerDefs,
+  type ComAtprotoLabelDefs,
+  type InterpretedLabelValueDefinition,
   interpretLabelValueDefinition,
   LABELS,
 } from '@atproto/api'
···
 import * as bcp47Match from 'bcp-47-match'
 
 import {
-  GlobalLabelStrings,
+  type GlobalLabelStrings,
   useGlobalLabelStrings,
 } from '#/lib/moderation/useGlobalLabelStrings'
 import {useLabelDefinitions} from '#/state/preferences'

src/lib/react-query.tsx

···
-import React, {useRef, useState} from 'react'
-import {AppState, AppStateStatus} from 'react-native'
+import {useRef, useState} from 'react'
+import {AppState, type AppStateStatus} from 'react-native'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import {createAsyncStoragePersister} from '@tanstack/query-async-storage-persister'
 import {focusManager, onlineManager, QueryClient} from '@tanstack/react-query'
 import {
   PersistQueryClientProvider,
-  PersistQueryClientProviderProps,
+  type PersistQueryClientProviderProps,
 } from '@tanstack/react-query-persist-client'
+import type React from 'react'
 
 import {isNative} from '#/platform/detection'
 import {listenNetworkConfirmed, listenNetworkLost} from '#/state/events'

src/lib/routes/helpers.ts

···
-import {NavigationProp} from '@react-navigation/native'
+import {type NavigationProp} from '@react-navigation/native'
 
-import {RouteParams, State} from './types'
+import {type RouteParams, type State} from './types'
 
 export function getRootNavigation<T extends {}>(
   nav: NavigationProp<T>,

src/lib/strings/display-names.ts

···
-import {ModerationUI} from '@atproto/api'
+import {type ModerationUI} from '@atproto/api'
 
 // \u2705 = ✅
 // \u2713 = ✓

src/lib/strings/rich-text-helpers.ts

···
-import {AppBskyRichtextFacet, RichText} from '@atproto/api'
+import {AppBskyRichtextFacet, type RichText} from '@atproto/api'
 
 import {linkRequiresWarning} from './url-helpers'
 

src/lib/strings/rich-text-manip.ts

···
-import {AppBskyRichtextFacet, RichText, UnicodeString} from '@atproto/api'
+import {AppBskyRichtextFacet, type RichText, UnicodeString} from '@atproto/api'
 
 import {toShortUrl} from './url-helpers'
 

src/lib/strings/time.ts

···
-import {I18n} from '@lingui/core'
+import {type I18n} from '@lingui/core'
 
 export function niceDate(i18n: I18n, date: number | string | Date) {
   const d = new Date(date)

src/lib/themes.ts

···
 import {darkPalette, dimPalette, lightPalette} from '#/alf/themes'
 import {fontWeight} from '#/alf/tokens'
 import {colors} from './styles'
-import type {Theme} from './ThemeContext'
+import {type Theme} from './ThemeContext'
 
 export const defaultTheme: Theme = {
   colorScheme: 'light',

src/locale/deviceLocales.ts

···
-import {getLocales as defaultGetLocales, Locale} from 'expo-localization'
+import {getLocales as defaultGetLocales, type Locale} from 'expo-localization'
 
 import {dedupArray} from '#/lib/functions'
 

src/locale/i18nProvider.tsx

···
-import React from 'react'
 import {i18n} from '@lingui/core'
 import {I18nProvider as DefaultI18nProvider} from '@lingui/react'
+import type React from 'react'
 
 import {useLocaleLanguage} from './i18n'
 

src/locale/locales/en/messages.po

···
 msgid "{0, plural, one {# day} other {# days}}"
 msgstr ""
 
-#: src/screens/Profile/ProfileFollowers.tsx:40
+#: src/screens/Profile/ProfileFollowers.tsx:43
 msgid "{0, plural, one {# follower} other {# followers}}"
 msgstr ""
 
-#: src/screens/Profile/ProfileFollows.tsx:40
+#: src/screens/Profile/ProfileFollows.tsx:43
 msgid "{0, plural, one {# following} other {# following}}"
 msgstr ""
 
···
 msgid "{0, plural, one {# hour} other {# hours}}"
 msgstr ""
 
-#: src/components/moderation/LabelsOnMe.tsx:53
+#: src/components/moderation/LabelsOnMe.tsx:58
 msgid "{0, plural, one {# label has} other {# labels have}} been placed on this account"
 msgstr ""
 
-#: src/components/moderation/LabelsOnMe.tsx:62
+#: src/components/moderation/LabelsOnMe.tsx:67
 msgid "{0, plural, one {# label has} other {# labels have}} been placed on this content"
 msgstr ""
 
-#: src/screens/Post/PostLikedBy.tsx:41
+#: src/screens/Post/PostLikedBy.tsx:44
 msgid "{0, plural, one {# like} other {# likes}}"
 msgstr ""
 
···
 msgid "{0, plural, one {# month} other {# months}}"
 msgstr ""
 
-#: src/screens/Post/PostQuotes.tsx:41
+#: src/screens/Post/PostQuotes.tsx:44
 msgid "{0, plural, one {# quote} other {# quotes}}"
 msgstr ""
 
-#: src/screens/Post/PostRepostedBy.tsx:41
+#: src/screens/Post/PostRepostedBy.tsx:44
 msgid "{0, plural, one {# repost} other {# reposts}}"
 msgstr ""
 
···
 msgid "{0} joined this week"
 msgstr ""
 
-#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/Scrubber.tsx:204
+#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/Scrubber.tsx:203
 msgid "{0} of {1}"
 msgstr ""
 
···
 msgid "{0}, a list by {1}"
 msgstr ""
 
-#: src/view/com/util/UserAvatar.tsx:572
-#: src/view/com/util/UserAvatar.tsx:590
+#: src/view/com/util/UserAvatar.tsx:577
+#: src/view/com/util/UserAvatar.tsx:595
 msgid "{0}'s avatar"
 msgstr ""
 
···
 msgid "{notificationCount, plural, one {# unread item} other {# unread items}}"
 msgstr ""
 
-#: src/components/NewskieDialog.tsx:116
+#: src/components/NewskieDialog.tsx:131
 msgid "{profileName} joined Bluesky {0} ago"
 msgstr ""
 
-#: src/components/NewskieDialog.tsx:111
+#: src/components/NewskieDialog.tsx:126
 msgid "{profileName} joined Bluesky using a starter pack {0} ago"
 msgstr ""
 
···
 msgid "Add a temporary live status to your profile. When someone clicks on your avatar, they’ll see information about your live event."
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:924
-#: src/view/screens/ProfileList.tsx:942
+#: src/screens/ProfileList/AboutSection.tsx:62
+#: src/screens/ProfileList/AboutSection.tsx:80
 msgid "Add a user to this list"
 msgstr ""
 
···
 msgid "Add muted words and tags"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:932
-#: src/view/screens/ProfileList.tsx:950
+#: src/screens/ProfileList/AboutSection.tsx:70
+#: src/screens/ProfileList/AboutSection.tsx:88
 msgid "Add people"
 msgstr ""
 
···
 msgid "Add some feeds to your starter pack!"
 msgstr ""
 
-#: src/screens/Feeds/NoFollowingFeed.tsx:41
+#: src/screens/Feeds/NoFollowingFeed.tsx:39
 msgid "Add the default feed of only people you follow"
 msgstr ""
 
···
 msgid "Adult content can only be enabled via the Web at <0>bsky.app</0>."
 msgstr ""
 
-#: src/components/moderation/LabelPreference.tsx:247
+#: src/components/moderation/LabelPreference.tsx:246
 msgid "Adult content is disabled."
 msgstr ""
 
···
 msgid "An error occurred while loading the video. Please try again later."
 msgstr ""
 
-#: src/components/Post/Embed/VideoEmbed/index.web.tsx:227
+#: src/components/Post/Embed/VideoEmbed/index.web.tsx:226
 msgid "An error occurred while loading the video. Please try again."
 msgstr ""
 
-#: src/components/StarterPack/QrCodeDialog.tsx:72
+#: src/components/StarterPack/QrCodeDialog.tsx:75
 msgid "An error occurred while saving the QR code!"
 msgstr ""
 
···
 msgid "Appearance"
 msgstr ""
 
-#: src/screens/Feeds/NoSavedFeedsOfAnyType.tsx:47
+#: src/screens/Feeds/NoSavedFeedsOfAnyType.tsx:51
 #: src/screens/Home/NoFeedsPinned.tsx:93
 msgid "Apply default recommended feeds"
 msgstr ""
···
 msgid "Are you sure?"
 msgstr ""
 
-#: src/view/com/composer/select-language/SuggestedLanguage.tsx:87
+#: src/view/com/composer/select-language/SuggestedLanguage.tsx:89
 msgid "Are you writing in <0>{suggestedLanguageName}</0>?"
 msgstr ""
 
···
 msgid "Block Account?"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:669
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:97
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:100
 msgid "Block accounts"
 msgstr ""
 
···
 msgid "Block and/or delete this conversation"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:789
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:125
 msgid "Block list"
 msgstr ""
 
···
 msgid "Block or report"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:784
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:120
 msgid "Block these accounts?"
 msgstr ""
 
···
 msgid "Blocking does not prevent this labeler from placing labels on your account."
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:786
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:122
 msgid "Blocking is public. Blocked accounts cannot reply in your threads, mention you, or otherwise interact with you."
 msgstr ""
 
···
 msgid "Bluesky+ icons"
 msgstr ""
 
-#: src/lib/moderation/useLabelBehaviorDescription.ts:53
+#: src/lib/moderation/useLabelBehaviorDescription.ts:56
 msgid "Blur images"
 msgstr ""
 
-#: src/lib/moderation/useLabelBehaviorDescription.ts:51
+#: src/lib/moderation/useLabelBehaviorDescription.ts:54
 msgid "Blur images and filter from feeds"
 msgstr ""
 
···
 msgid "Change password dialog"
 msgstr ""
 
-#: src/view/com/composer/select-language/SuggestedLanguage.tsx:98
+#: src/view/com/composer/select-language/SuggestedLanguage.tsx:100
 msgid "Change post language to {suggestedLanguageName}"
 msgstr ""
 
···
 msgid "Click for information"
 msgstr ""
 
-#: src/view/screens/Support.tsx:41
+#: src/view/screens/Support.tsx:44
 msgid "click here"
 msgstr ""
 
···
 #: src/components/dms/ReportDialog.tsx:395
 #: src/components/live/EditLiveDialog.tsx:229
 #: src/components/live/EditLiveDialog.tsx:235
-#: src/components/NewskieDialog.tsx:146
-#: src/components/NewskieDialog.tsx:153
+#: src/components/NewskieDialog.tsx:159
+#: src/components/NewskieDialog.tsx:165
 #: src/components/Post/Embed/ExternalEmbed/Gif.tsx:197
 #: src/components/ProgressGuide/FollowDialog.tsx:379
 #: src/components/StarterPack/Wizard/WizardEditListDialog.tsx:118
···
 msgid "Close alert"
 msgstr ""
 
-#: src/view/com/util/BottomSheetCustomBackdrop.tsx:36
+#: src/view/com/util/BottomSheetCustomBackdrop.tsx:37
 msgid "Close bottom drawer"
 msgstr ""
 
···
 
 #: src/components/PolicyUpdateOverlay/updates/202508/index.tsx:45
 #: src/Navigation.tsx:341
-#: src/view/screens/CommunityGuidelines.tsx:34
+#: src/view/screens/CommunityGuidelines.tsx:37
 msgid "Community Guidelines"
 msgstr ""
 
···
 msgid "Compressing video..."
 msgstr ""
 
-#: src/components/moderation/LabelPreference.tsx:88
+#: src/components/moderation/LabelPreference.tsx:87
 msgid "Configure content filtering setting for category: {name}"
 msgstr ""
 
-#: src/components/moderation/LabelPreference.tsx:249
+#: src/components/moderation/LabelPreference.tsx:248
 msgid "Configured in <0>moderation settings</0>."
 msgstr ""
 
···
 msgid "Copies build version to clipboard"
 msgstr ""
 
-#: src/components/StarterPack/QrCodeDialog.tsx:182
+#: src/components/StarterPack/QrCodeDialog.tsx:192
 msgid "Copy"
 msgstr ""
 
···
 msgid "Copy at:// URI"
 msgstr ""
 
-#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:153
-#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:156
+#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:152
+#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:155
 msgid "Copy author DID"
 msgstr ""
 
···
 msgid "Copy host"
 msgstr ""
 
-#: src/components/StarterPack/ShareDialog.tsx:104
+#: src/components/StarterPack/ShareDialog.tsx:113
 #: src/screens/StarterPack/StarterPackScreen.tsx:617
 msgid "Copy link"
 msgstr ""
 
-#: src/components/StarterPack/ShareDialog.tsx:111
+#: src/components/StarterPack/ShareDialog.tsx:119
 msgid "Copy Link"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:513
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:172
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:176
 msgid "Copy link to list"
 msgstr ""
 
 #: src/components/PostControls/ShareMenu/ShareMenuItems.tsx:127
 #: src/components/PostControls/ShareMenu/ShareMenuItems.tsx:130
-#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:87
-#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:90
+#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:86
+#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:89
 msgid "Copy link to post"
 msgstr ""
 
···
 msgid "Copy message text"
 msgstr ""
 
-#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:144
-#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:147
+#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:143
+#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:146
 msgid "Copy post at:// URI"
 msgstr ""
 
···
 msgid "Copy post text"
 msgstr ""
 
-#: src/components/StarterPack/QrCodeDialog.tsx:176
+#: src/components/StarterPack/QrCodeDialog.tsx:178
 msgid "Copy QR code"
 msgstr ""
 
···
 #: src/components/PolicyUpdateOverlay/updates/202508/index.tsx:40
 #: src/components/PolicyUpdateOverlay/updates/202508/index.tsx:107
 #: src/Navigation.tsx:346
-#: src/view/screens/CopyrightPolicy.tsx:31
+#: src/view/screens/CopyrightPolicy.tsx:34
 msgid "Copyright Policy"
 msgstr ""
 
···
 msgid "Could not load feed"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:1029
+#: src/screens/ProfileList/components/ErrorScreen.tsx:26
+#: src/screens/ProfileList/index.tsx:79
+#: src/screens/ProfileList/index.tsx:101
 msgid "Could not load list"
 msgstr ""
 
···
 msgid "Create"
 msgstr ""
 
-#: src/components/StarterPack/QrCodeDialog.tsx:160
+#: src/components/StarterPack/QrCodeDialog.tsx:163
 msgid "Create a QR code for a starter pack"
 msgstr ""
 
···
 msgstr ""
 
 #: src/components/moderation/ReportDialog/index.tsx:585
-#: src/components/ReportDialog/SelectReportOptionView.tsx:99
+#: src/components/ReportDialog/SelectReportOptionView.tsx:102
 msgid "Create report for {0}"
 msgstr ""
 
···
 #: src/components/dms/MessageContextMenu.tsx:185
 #: src/components/PostControls/PostMenu/PostMenuItems.tsx:704
 #: src/screens/Messages/components/ChatStatusInfo.tsx:55
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:285
 #: src/screens/Settings/AppPasswords.tsx:212
 #: src/screens/StarterPack/StarterPackScreen.tsx:599
 #: src/screens/StarterPack/StarterPackScreen.tsx:688
 #: src/screens/StarterPack/StarterPackScreen.tsx:760
-#: src/view/screens/ProfileList.tsx:768
 msgid "Delete"
 msgstr ""
 
···
 msgid "Delete for me"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:556
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:211
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:214
 msgid "Delete list"
 msgstr ""
 
···
 msgid "Delete starter pack?"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:763
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:280
 msgid "Delete this list?"
 msgstr ""
 
···
 msgid "Disable subtitles"
 msgstr ""
 
-#: src/lib/moderation/useLabelBehaviorDescription.ts:32
-#: src/lib/moderation/useLabelBehaviorDescription.ts:42
-#: src/lib/moderation/useLabelBehaviorDescription.ts:68
+#: src/lib/moderation/useLabelBehaviorDescription.ts:35
+#: src/lib/moderation/useLabelBehaviorDescription.ts:45
+#: src/lib/moderation/useLabelBehaviorDescription.ts:71
 #: src/screens/Messages/Settings.tsx:144
 #: src/screens/Messages/Settings.tsx:147
 #: src/screens/Moderation/index.tsx:413
···
 msgid "Download Bluesky"
 msgstr ""
 
-#: src/screens/Settings/components/ExportCarDialog.tsx:79
-#: src/screens/Settings/components/ExportCarDialog.tsx:84
+#: src/screens/Settings/components/ExportCarDialog.tsx:78
+#: src/screens/Settings/components/ExportCarDialog.tsx:83
 msgid "Download CAR file"
 msgstr ""
 
···
 msgid "Edit interests"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:544
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:203
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:206
 msgid "Edit list details"
 msgstr ""
 
···
 
 #: src/components/dialogs/Embed.tsx:104
 #: src/components/dialogs/Embed.tsx:108
-#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:119
-#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:124
+#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:118
+#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:123
 msgid "Embed post"
 msgstr ""
 
···
 msgid "Failed to accept chat"
 msgstr ""
 
-#: src/components/dms/ActionsWrapper.web.tsx:67
+#: src/components/dms/ActionsWrapper.web.tsx:66
 #: src/components/dms/MessageContextMenu.tsx:99
 msgid "Failed to add emoji reaction"
 msgstr ""
···
 msgid "Failed to pin post"
 msgstr ""
 
-#: src/components/dms/ActionsWrapper.web.tsx:61
+#: src/components/dms/ActionsWrapper.web.tsx:60
 #: src/components/dms/MessageContextMenu.tsx:93
 msgid "Failed to remove emoji reaction"
 msgstr ""
···
 
 #: src/components/PostControls/PostMenu/PostMenuItems.tsx:219
 msgid "Failed to toggle thread mute, please try again"
+msgstr ""
+
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:111
+msgid "Failed to unpin list"
 msgstr ""
 
 #: src/components/dialogs/EmailDialog/screens/Manage2FA/Disable.tsx:149
···
 msgstr ""
 
 #: src/Navigation.tsx:574
+#: src/screens/SavedFeeds.tsx:108
 #: src/screens/Search/SearchResults.tsx:73
 #: src/screens/StarterPack/StarterPackScreen.tsx:190
 #: src/view/screens/Feeds.tsx:511
 #: src/view/screens/Profile.tsx:230
-#: src/view/screens/SavedFeeds.tsx:104
 #: src/view/shell/desktop/LeftNav.tsx:727
 #: src/view/shell/Drawer.tsx:530
 msgid "Feeds"
 msgstr ""
 
-#: src/view/screens/SavedFeeds.tsx:206
-msgid "Feeds are custom algorithms that users build with a little coding expertise. <0/> for more information."
+#: src/screens/SavedFeeds.tsx:215
+msgid "Feeds are custom algorithms that users build with a little coding expertise. <0>See this guide</0> for more information."
 msgstr ""
 
 #: src/components/FeedCard.tsx:282
-#: src/view/screens/SavedFeeds.tsx:86
+#: src/screens/SavedFeeds.tsx:90
 msgctxt "toast"
 msgid "Feeds updated!"
 msgstr ""
···
 msgid "File saved successfully!"
 msgstr ""
 
-#: src/lib/moderation/useLabelBehaviorDescription.ts:66
+#: src/lib/moderation/useLabelBehaviorDescription.ts:69
 msgid "Filter from feeds"
 msgstr ""
 
···
 msgid "Followers of @{0} that you know"
 msgstr ""
 
-#: src/screens/Profile/KnownFollowers.tsx:104
-#: src/screens/Profile/KnownFollowers.tsx:121
+#: src/screens/Profile/KnownFollowers.tsx:107
+#: src/screens/Profile/KnownFollowers.tsx:124
 msgid "Followers you know"
 msgstr ""
 
···
 msgid "Following"
 msgstr ""
 
+#: src/screens/SavedFeeds.tsx:410
 #: src/view/screens/Feeds.tsx:603
-#: src/view/screens/SavedFeeds.tsx:420
 msgctxt "feed-name"
 msgid "Following"
 msgstr ""
···
 #: src/components/moderation/ScreenHider.tsx:163
 #: src/screens/Messages/Inbox.tsx:249
 #: src/screens/Profile/ProfileFeed/index.tsx:92
+#: src/screens/ProfileList/components/ErrorScreen.tsx:34
+#: src/screens/ProfileList/components/ErrorScreen.tsx:40
 #: src/screens/VideoFeed/components/Header.tsx:163
 #: src/screens/VideoFeed/index.tsx:1146
 #: src/screens/VideoFeed/index.tsx:1150
 #: src/view/com/auth/LoggedOut.tsx:72
 #: src/view/screens/NotFound.tsx:57
-#: src/view/screens/ProfileList.tsx:1038
 msgid "Go back"
 msgstr ""
 
···
 #: src/screens/Profile/ProfileFeed/index.tsx:97
 #: src/screens/StarterPack/StarterPackScreen.tsx:773
 #: src/view/screens/NotFound.tsx:56
-#: src/view/screens/ProfileList.tsx:1043
 msgid "Go Back"
 msgstr ""
 
 #: src/components/dms/ReportDialog.tsx:197
-#: src/components/ReportDialog/SelectReportOptionView.tsx:78
+#: src/components/ReportDialog/SelectReportOptionView.tsx:81
 #: src/components/ReportDialog/SubmitView.tsx:110
 #: src/screens/Onboarding/Layout.tsx:121
 #: src/screens/Onboarding/Layout.tsx:214
···
 #: src/components/interstitials/Trending.tsx:131
 #: src/components/interstitials/TrendingVideos.tsx:138
 #: src/components/moderation/ContentHider.tsx:203
-#: src/components/moderation/LabelPreference.tsx:141
+#: src/components/moderation/LabelPreference.tsx:140
 #: src/components/moderation/PostHider.tsx:134
 #: src/components/PostControls/PostMenu/PostMenuItems.tsx:715
-#: src/lib/moderation/useLabelBehaviorDescription.ts:15
-#: src/lib/moderation/useLabelBehaviorDescription.ts:20
-#: src/lib/moderation/useLabelBehaviorDescription.ts:25
-#: src/lib/moderation/useLabelBehaviorDescription.ts:30
+#: src/lib/moderation/useLabelBehaviorDescription.ts:18
+#: src/lib/moderation/useLabelBehaviorDescription.ts:23
+#: src/lib/moderation/useLabelBehaviorDescription.ts:28
+#: src/lib/moderation/useLabelBehaviorDescription.ts:33
 #: src/view/shell/desktop/SidebarTrendingTopics.tsx:111
 msgid "Hide"
 msgstr ""
···
 msgid "If you are not yet an adult according to the laws of your country, your parent or legal guardian must read these Terms on your behalf."
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:765
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:282
 msgid "If you delete this list, you won't be able to recover it."
 msgstr ""
 
···
 msgid "Illegal and Urgent"
 msgstr ""
 
-#: src/view/com/util/images/Gallery.tsx:71
+#: src/view/com/util/images/Gallery.tsx:70
 msgid "Image"
 msgstr ""
 
···
 msgid "Invite codes: 1 available"
 msgstr ""
 
-#: src/components/StarterPack/ShareDialog.tsx:77
+#: src/components/StarterPack/ShareDialog.tsx:81
 msgid "Invite people to this starter pack!"
 msgstr ""
 
···
 msgid "Liked by"
 msgstr ""
 
-#: src/screens/Post/PostLikedBy.tsx:38
-#: src/screens/Profile/ProfileLabelerLikedBy.tsx:29
-#: src/view/screens/ProfileFeedLikedBy.tsx:30
+#: src/screens/Post/PostLikedBy.tsx:41
+#: src/screens/Profile/ProfileLabelerLikedBy.tsx:32
+#: src/view/screens/ProfileFeedLikedBy.tsx:33
 msgid "Liked By"
 msgstr ""
 
···
 msgid "List Avatar"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:438
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:50
 msgctxt "toast"
 msgid "List blocked"
 msgstr ""
···
 msgid "List creator"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:485
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:97
 msgctxt "toast"
 msgid "List deleted"
 msgstr ""
···
 msgid "List has been hidden"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:176
+#: src/screens/ProfileList/index.tsx:172
 msgid "List Hidden"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:402
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:31
 msgctxt "toast"
 msgid "List muted"
 msgstr ""
···
 msgid "List Name"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:456
+#: src/screens/ProfileList/components/Header.tsx:116
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:138
 msgctxt "toast"
 msgid "List unblocked"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:420
+#: src/screens/ProfileList/components/Header.tsx:98
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:120
 msgctxt "toast"
 msgid "List unmuted"
 msgstr ""
···
 
 #: src/screens/Profile/ProfileFeed/index.tsx:224
 #: src/screens/Profile/Sections/Feed.tsx:98
-#: src/view/com/feeds/FeedPage.tsx:162
-#: src/view/screens/ProfileList.tsx:878
+#: src/screens/ProfileList/FeedSection.tsx:105
+#: src/view/com/feeds/FeedPage.tsx:169
 msgid "Load new posts"
 msgstr ""
 
···
 msgid "Looks like XXXXX-XXXXX"
 msgstr ""
 
-#: src/screens/Feeds/NoSavedFeedsOfAnyType.tsx:39
+#: src/screens/Feeds/NoSavedFeedsOfAnyType.tsx:43
 msgid "Looks like you haven't saved any feeds! Use our recommendations or browse more below."
 msgstr ""
 
···
 msgid "Looks like you unpinned all your feeds. But don't worry, you can add some below 😄"
 msgstr ""
 
-#: src/screens/Feeds/NoFollowingFeed.tsx:37
+#: src/screens/Feeds/NoFollowingFeed.tsx:35
 msgid "Looks like you're missing a following feed. <0>Click here to add one.</0>"
 msgstr ""
 
···
 msgid "Moderation Lists"
 msgstr ""
 
-#: src/components/moderation/LabelPreference.tsx:252
+#: src/components/moderation/LabelPreference.tsx:251
 msgid "moderation settings"
 msgstr ""
 
···
 msgid "More languages..."
 msgstr ""
 
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:156
 #: src/view/com/profile/ProfileMenu.tsx:223
 #: src/view/com/profile/ProfileMenu.tsx:229
-#: src/view/screens/ProfileList.tsx:750
 msgid "More options"
 msgstr ""
 
+#: src/screens/SavedFeeds.tsx:329
+msgid "Move feed down"
+msgstr ""
+
+#: src/screens/SavedFeeds.tsx:320
+msgid "Move feed up"
+msgstr ""
+
 #: src/screens/Onboarding/state.ts:113
 msgid "Movies"
 msgstr ""
···
 msgstr ""
 
 #: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerNative.tsx:153
-#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VolumeControl.tsx:96
+#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VolumeControl.tsx:95
 msgctxt "video"
 msgid "Mute"
 msgstr ""
···
 msgid "Mute account"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:657
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:89
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:92
 msgid "Mute accounts"
 msgstr ""
 
···
 msgid "Mute in:"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:779
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:115
 msgid "Mute list"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:774
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:110
 msgid "Mute these accounts?"
 msgstr ""
 
···
 msgid "Muted words & tags"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:776
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:112
 msgid "Muting is private. Muted accounts can interact with you, but you will not see their posts or receive notifications from them."
 msgstr ""
 
···
 msgid "Need to report a copyright violation, legal request, or regulatory compliance issue?"
 msgstr ""
 
-#: src/components/ReportDialog/SelectReportOptionView.tsx:128
+#: src/components/ReportDialog/SelectReportOptionView.tsx:131
 msgid "Need to report a copyright violation?"
 msgstr ""
 
···
 msgstr ""
 
 #: src/screens/Profile/ProfileFeed/index.tsx:241
+#: src/screens/ProfileList/index.tsx:246
+#: src/screens/ProfileList/index.tsx:284
 #: src/view/screens/Feeds.tsx:552
 #: src/view/screens/Notifications.tsx:167
 #: src/view/screens/Profile.tsx:510
-#: src/view/screens/ProfileList.tsx:250
-#: src/view/screens/ProfileList.tsx:288
 msgid "New post"
 msgstr ""
 
-#: src/view/com/feeds/FeedPage.tsx:173
+#: src/view/com/feeds/FeedPage.tsx:180
 msgctxt "action"
 msgid "New post"
 msgstr ""
···
 msgid "New starter pack"
 msgstr ""
 
-#: src/components/NewskieDialog.tsx:83
+#: src/components/NewskieDialog.tsx:102
 msgid "New user info dialog"
 msgstr ""
 
···
 msgid "No results for \"{0}\"."
 msgstr ""
 
-#: src/components/Lists.tsx:190
+#: src/components/Lists.tsx:189
 msgid "No results found"
 msgstr ""
 
···
 msgid "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."
 msgstr ""
 
-#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:134
+#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:133
 msgid "Note: This post is only visible to logged-in users."
 msgstr ""
 
···
 msgid "Nudity or adult content not labeled as such"
 msgstr ""
 
-#: src/lib/moderation/useLabelBehaviorDescription.ts:11
+#: src/lib/moderation/useLabelBehaviorDescription.ts:14
 #: src/screens/Settings/NotificationSettings/index.tsx:291
 msgid "Off"
 msgstr ""
···
 msgid "Only image files are supported"
 msgstr ""
 
-#: src/view/com/composer/videos/SubtitleFilePicker.tsx:40
+#: src/view/com/composer/videos/SubtitleFilePicker.tsx:41
 msgid "Only WebVTT (.vtt) files are supported"
 msgstr ""
 
-#: src/components/Lists.tsx:95
+#: src/components/Lists.tsx:94
 msgid "Oops, something went wrong!"
 msgstr ""
 
-#: src/components/Lists.tsx:174
+#: src/components/Lists.tsx:173
 #: src/components/StarterPack/ProfileStarterPacks.tsx:332
 #: src/components/StarterPack/ProfileStarterPacks.tsx:341
 #: src/screens/Settings/AppPasswords.tsx:59
···
 msgid "Open pack"
 msgstr ""
 
-#: src/components/PostControls/PostMenu/index.tsx:65
+#: src/components/PostControls/PostMenu/index.tsx:64
 msgid "Open post options menu"
 msgstr ""
 
···
 msgid "Open profile"
 msgstr ""
 
-#: src/components/PostControls/ShareMenu/index.tsx:90
+#: src/components/PostControls/ShareMenu/index.tsx:89
 msgid "Open share menu"
 msgstr ""
 
···
 msgid "Opens list of invite codes"
 msgstr ""
 
-#: src/view/com/util/UserAvatar.tsx:576
+#: src/view/com/util/UserAvatar.tsx:581
 msgid "Opens live status dialog"
 msgstr ""
 
···
 msgstr ""
 
 #: src/view/com/notifications/NotificationFeedItem.tsx:906
-#: src/view/com/util/UserAvatar.tsx:594
+#: src/view/com/util/UserAvatar.tsx:599
 msgid "Opens this profile"
 msgstr ""
 
···
 msgid "Our moderators have reviewed reports and decided to disable your access to chats on Bluesky."
 msgstr ""
 
-#: src/components/Lists.tsx:191
+#: src/components/Lists.tsx:190
 #: src/view/screens/NotFound.tsx:47
 msgid "Page not found"
 msgstr ""
···
 msgid "Pause video"
 msgstr ""
 
+#: src/screens/ProfileList/index.tsx:166
 #: src/screens/Search/SearchResults.tsx:67
 #: src/screens/StarterPack/StarterPackScreen.tsx:189
-#: src/view/screens/ProfileList.tsx:170
 msgid "People"
 msgstr ""
 
···
 
 #: src/screens/Profile/components/ProfileFeedHeader.tsx:523
 #: src/screens/Profile/components/ProfileFeedHeader.tsx:530
+#: src/screens/SavedFeeds.tsx:351
 msgid "Pin feed"
 msgstr ""
 
···
 msgid "Pin Feed"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:714
+#: src/screens/ProfileList/components/Header.tsx:156
+#: src/screens/ProfileList/components/Header.tsx:163
 msgid "Pin to home"
 msgstr ""
 
···
 msgid "Pinned {0} to Home"
 msgstr ""
 
-#: src/view/screens/SavedFeeds.tsx:131
+#: src/screens/SavedFeeds.tsx:142
 msgid "Pinned Feeds"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:361
+#: src/screens/ProfileList/components/Header.tsx:74
 msgid "Pinned to your feeds"
 msgstr ""
 
···
 
 #: src/components/activity-notifications/SubscribeProfileDialog.tsx:250
 #: src/components/activity-notifications/SubscribeProfileDialog.tsx:262
+#: src/screens/ProfileList/index.tsx:166
 #: src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx:213
 #: src/screens/StarterPack/StarterPackScreen.tsx:191
 #: src/view/screens/Profile.tsx:225
-#: src/view/screens/ProfileList.tsx:170
 msgid "Posts"
 msgstr ""
 
···
 msgstr ""
 
 #: src/components/Error.tsx:60
-#: src/components/Lists.tsx:100
+#: src/components/Lists.tsx:99
 #: src/screens/Messages/components/MessageListError.tsx:24
 #: src/screens/Signup/BackNextButtons.tsx:47
 msgid "Press to retry"
···
 #: src/Navigation.tsx:331
 #: src/screens/Settings/AboutSettings.tsx:92
 #: src/screens/Settings/AboutSettings.tsx:95
-#: src/view/screens/PrivacyPolicy.tsx:31
+#: src/view/screens/PrivacyPolicy.tsx:34
 #: src/view/shell/Drawer.tsx:704
 #: src/view/shell/Drawer.tsx:705
 msgid "Privacy Policy"
···
 msgid "Push, People you follow"
 msgstr ""
 
-#: src/components/StarterPack/QrCodeDialog.tsx:134
+#: src/components/StarterPack/QrCodeDialog.tsx:137
 msgid "QR code copied to your clipboard!"
 msgstr ""
 
-#: src/components/StarterPack/QrCodeDialog.tsx:112
+#: src/components/StarterPack/QrCodeDialog.tsx:115
 msgid "QR code has been downloaded!"
 msgstr ""
 
-#: src/components/StarterPack/QrCodeDialog.tsx:113
+#: src/components/StarterPack/QrCodeDialog.tsx:116
 msgid "QR code saved to your camera roll!"
 msgstr ""
 
···
 msgstr ""
 
 #: src/lib/hooks/useNotificationHandler.ts:154
-#: src/screens/Post/PostQuotes.tsx:38
+#: src/screens/Post/PostQuotes.tsx:41
 #: src/screens/Settings/NotificationSettings/index.tsx:170
 #: src/screens/Settings/NotificationSettings/QuoteNotificationSettings.tsx:41
 msgid "Quotes"
···
 msgid "Remove Banner"
 msgstr ""
 
-#: src/screens/Messages/components/MessageInputEmbed.tsx:209
+#: src/screens/Messages/components/MessageInputEmbed.tsx:212
 msgid "Remove embed"
 msgstr ""
 
···
 
 #: src/screens/Profile/components/ProfileFeedHeader.tsx:319
 #: src/screens/Profile/components/ProfileFeedHeader.tsx:325
-#: src/view/screens/ProfileList.tsx:528
-#: src/view/screens/SavedFeeds.tsx:350
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:188
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:191
+#: src/screens/SavedFeeds.tsx:340
 msgid "Remove from my feeds"
 msgstr ""
 
···
 msgstr ""
 
 #: src/screens/Profile/components/ProfileFeedHeader.tsx:122
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:74
 #: src/view/com/posts/FeedShutdownMsg.tsx:44
-#: src/view/screens/ProfileList.tsx:392
 msgid "Removed from your feeds"
 msgstr ""
 
···
 msgid "Report feed"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:570
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:222
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:225
 msgid "Report list"
 msgstr ""
 
···
 msgid "Report submitted"
 msgstr ""
 
-#: src/components/ReportDialog/SelectReportOptionView.tsx:41
+#: src/components/ReportDialog/SelectReportOptionView.tsx:44
 msgid "Report this content"
 msgstr ""
 
 #: src/components/moderation/ReportDialog/copy.ts:31
-#: src/components/ReportDialog/SelectReportOptionView.tsx:54
+#: src/components/ReportDialog/SelectReportOptionView.tsx:57
 msgid "Report this feed"
 msgstr ""
 
 #: src/components/moderation/ReportDialog/copy.ts:25
-#: src/components/ReportDialog/SelectReportOptionView.tsx:51
+#: src/components/ReportDialog/SelectReportOptionView.tsx:54
 msgid "Report this list"
 msgstr ""
 
 #: src/components/dms/ReportDialog.tsx:61
 #: src/components/dms/ReportDialog.tsx:185
 #: src/components/moderation/ReportDialog/copy.ts:43
-#: src/components/ReportDialog/SelectReportOptionView.tsx:60
+#: src/components/ReportDialog/SelectReportOptionView.tsx:63
 msgid "Report this message"
 msgstr ""
 
 #: src/components/moderation/ReportDialog/copy.ts:19
-#: src/components/ReportDialog/SelectReportOptionView.tsx:48
+#: src/components/ReportDialog/SelectReportOptionView.tsx:51
 msgid "Report this post"
 msgstr ""
 
 #: src/components/moderation/ReportDialog/copy.ts:37
-#: src/components/ReportDialog/SelectReportOptionView.tsx:57
+#: src/components/ReportDialog/SelectReportOptionView.tsx:60
 msgid "Report this starter pack"
 msgstr ""
 
 #: src/components/moderation/ReportDialog/copy.ts:13
-#: src/components/ReportDialog/SelectReportOptionView.tsx:45
+#: src/components/ReportDialog/SelectReportOptionView.tsx:48
 msgid "Report this user"
 msgstr ""
 
···
 msgid "Repost or quote post"
 msgstr ""
 
-#: src/screens/Post/PostRepostedBy.tsx:38
+#: src/screens/Post/PostRepostedBy.tsx:41
 msgid "Reposted By"
 msgstr ""
 
···
 
 #: src/components/dms/MessageItem.tsx:322
 #: src/components/Error.tsx:65
-#: src/components/Lists.tsx:111
+#: src/components/Lists.tsx:110
 #: src/components/moderation/ReportDialog/index.tsx:229
-#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoFallback.tsx:55
-#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoFallback.tsx:57
+#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoFallback.tsx:54
+#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoFallback.tsx:56
 #: src/components/StarterPack/ProfileStarterPacks.tsx:346
 #: src/screens/Login/LoginForm.tsx:323
 #: src/screens/Login/LoginForm.tsx:330
···
 msgstr ""
 
 #: src/screens/Profile/ProfileFeed/index.tsx:93
+#: src/screens/ProfileList/components/ErrorScreen.tsx:35
 #: src/screens/Settings/components/ChangeHandleDialog.tsx:569
 #: src/screens/VideoFeed/index.tsx:1147
 #: src/view/screens/NotFound.tsx:60
-#: src/view/screens/ProfileList.tsx:1039
 msgid "Returns to previous page"
 msgstr ""
 
···
 #: src/components/dialogs/PostInteractionSettingsDialog.tsx:489
 #: src/components/live/EditLiveDialog.tsx:216
 #: src/components/live/EditLiveDialog.tsx:223
-#: src/components/StarterPack/QrCodeDialog.tsx:192
+#: src/components/StarterPack/QrCodeDialog.tsx:204
 #: src/screens/Profile/Header/EditProfileDialog.tsx:238
 #: src/screens/Profile/Header/EditProfileDialog.tsx:252
+#: src/screens/SavedFeeds.tsx:120
 #: src/screens/Settings/components/ChangeHandleDialog.tsx:267
 #: src/view/com/composer/GifAltText.tsx:193
 #: src/view/com/composer/GifAltText.tsx:202
···
 #: src/view/com/composer/photos/ImageAltTextDialog.tsx:152
 #: src/view/com/composer/photos/ImageAltTextDialog.tsx:162
 #: src/view/com/modals/CreateOrEditList.tsx:315
-#: src/view/screens/SavedFeeds.tsx:117
 msgid "Save"
 msgstr ""
 
···
 
 #: src/components/activity-notifications/SubscribeProfileDialog.tsx:191
 #: src/components/activity-notifications/SubscribeProfileDialog.tsx:200
-#: src/view/screens/SavedFeeds.tsx:113
-#: src/view/screens/SavedFeeds.tsx:117
+#: src/screens/SavedFeeds.tsx:116
+#: src/screens/SavedFeeds.tsx:120
 msgid "Save changes"
 msgstr ""
 
-#: src/components/StarterPack/ShareDialog.tsx:131
 #: src/components/StarterPack/ShareDialog.tsx:138
+#: src/components/StarterPack/ShareDialog.tsx:144
 msgid "Save image"
 msgstr ""
 
···
 msgid "Save new handle"
 msgstr ""
 
-#: src/components/StarterPack/QrCodeDialog.tsx:186
+#: src/components/StarterPack/QrCodeDialog.tsx:196
 msgid "Save QR code"
 msgstr ""
 
···
 msgid "Saved"
 msgstr ""
 
-#: src/view/screens/SavedFeeds.tsx:172
+#: src/screens/SavedFeeds.tsx:184
 msgid "Saved Feeds"
 msgstr ""
 
···
 msgstr ""
 
 #: src/screens/Profile/components/ProfileFeedHeader.tsx:132
-#: src/view/screens/ProfileList.tsx:372
+#: src/screens/ProfileList/components/Header.tsx:85
 msgid "Saved to your feeds"
 msgstr ""
 
···
 msgstr ""
 
 #: src/components/dms/ChatEmptyPill.tsx:33
-#: src/components/NewskieDialog.tsx:105
+#: src/components/NewskieDialog.tsx:121
 #: src/view/com/notifications/NotificationFeedItem.tsx:751
 #: src/view/com/notifications/NotificationFeedItem.tsx:776
 msgid "Say hello!"
···
 msgid "Scroll right"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:996
+#: src/screens/ProfileList/AboutSection.tsx:130
 msgid "Scroll to top"
 msgstr ""
 
···
 msgid "See more suggested profiles on the Explore page"
 msgstr ""
 
-#: src/view/screens/SavedFeeds.tsx:213
+#: src/screens/SavedFeeds.tsx:220
 msgid "See this guide"
 msgstr ""
 
-#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/Scrubber.tsx:197
+#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/Scrubber.tsx:196
 msgid "Seek slider. Use the arrow keys to seek forwards and backwards, and space to play/pause"
 msgstr ""
 
···
 msgid "Select primary language"
 msgstr ""
 
-#: src/view/com/composer/videos/SubtitleFilePicker.tsx:59
-#: src/view/com/composer/videos/SubtitleFilePicker.tsx:66
+#: src/view/com/composer/videos/SubtitleFilePicker.tsx:60
+#: src/view/com/composer/videos/SubtitleFilePicker.tsx:67
 msgid "Select subtitle file (.vtt)"
 msgstr ""
 
···
 
 #: src/components/PostControls/ShareMenu/ShareMenuItems.tsx:101
 #: src/components/PostControls/ShareMenu/ShareMenuItems.tsx:107
-#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:104
-#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:110
+#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:103
+#: src/components/PostControls/ShareMenu/ShareMenuItems.web.tsx:109
 msgid "Send via direct message"
 msgstr ""
 
···
 msgid "Sexually Suggestive"
 msgstr ""
 
-#: src/components/StarterPack/QrCodeDialog.tsx:182
+#: src/components/StarterPack/QrCodeDialog.tsx:192
 #: src/screens/Hashtag.tsx:126
 #: src/screens/StarterPack/StarterPackScreen.tsx:433
 #: src/screens/Topic.tsx:102
-#: src/view/screens/ProfileList.tsx:513
 msgid "Share"
 msgstr ""
 
···
 
 #: src/components/dialogs/LinkWarning.tsx:96
 #: src/components/dialogs/LinkWarning.tsx:104
-#: src/components/StarterPack/ShareDialog.tsx:104
-#: src/components/StarterPack/ShareDialog.tsx:111
+#: src/components/StarterPack/ShareDialog.tsx:113
+#: src/components/StarterPack/ShareDialog.tsx:119
 msgid "Share link"
 msgstr ""
 
-#: src/components/StarterPack/ShareDialog.tsx:68
+#: src/components/StarterPack/ShareDialog.tsx:72
 msgid "Share link dialog"
 msgstr ""
 
···
 msgid "Share post at:// URI"
 msgstr ""
 
-#: src/components/StarterPack/ShareDialog.tsx:115
-#: src/components/StarterPack/ShareDialog.tsx:126
+#: src/components/StarterPack/ShareDialog.tsx:123
+#: src/components/StarterPack/ShareDialog.tsx:133
 msgid "Share QR code"
 msgstr ""
 
···
 msgid "Share this starter pack"
 msgstr ""
 
-#: src/components/StarterPack/ShareDialog.tsx:80
+#: src/components/StarterPack/ShareDialog.tsx:84
 msgid "Share this starter pack and help people join your community on Bluesky."
 msgstr ""
 
 #: src/components/PostControls/ShareMenu/ShareMenuItems.tsx:117
 #: src/components/PostControls/ShareMenu/ShareMenuItems.tsx:120
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:172
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:178
 #: src/screens/StarterPack/StarterPackScreen.tsx:611
 #: src/screens/StarterPack/StarterPackScreen.tsx:619
 #: src/view/com/profile/ProfileMenu.tsx:246
···
 msgstr ""
 
 #: src/components/moderation/ContentHider.tsx:203
-#: src/components/moderation/LabelPreference.tsx:143
+#: src/components/moderation/LabelPreference.tsx:142
 #: src/components/moderation/PostHider.tsx:134
 msgid "Show"
 msgstr ""
···
 msgid "Show anyway"
 msgstr ""
 
-#: src/lib/moderation/useLabelBehaviorDescription.ts:27
-#: src/lib/moderation/useLabelBehaviorDescription.ts:63
+#: src/lib/moderation/useLabelBehaviorDescription.ts:30
+#: src/lib/moderation/useLabelBehaviorDescription.ts:66
 msgid "Show badge"
 msgstr ""
 
-#: src/lib/moderation/useLabelBehaviorDescription.ts:61
+#: src/lib/moderation/useLabelBehaviorDescription.ts:64
 msgid "Show badge and filter from feeds"
 msgstr ""
 
···
 msgid "Show samples of your saved feeds in your Following feed"
 msgstr ""
 
-#: src/lib/moderation/useLabelBehaviorDescription.ts:58
+#: src/lib/moderation/useLabelBehaviorDescription.ts:61
 msgid "Show warning"
 msgstr ""
 
-#: src/lib/moderation/useLabelBehaviorDescription.ts:56
+#: src/lib/moderation/useLabelBehaviorDescription.ts:59
 msgid "Show warning and filter from feeds"
 msgstr ""
 
···
 msgid "Something went wrong, please try again."
 msgstr ""
 
-#: src/components/Lists.tsx:175
+#: src/components/Lists.tsx:174
 msgid "Something went wrong!"
 msgstr ""
 
···
 msgid "Start a new chat"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:846
-#: src/view/screens/ProfileList.tsx:967
+#: src/screens/ProfileList/AboutSection.tsx:102
+#: src/screens/ProfileList/FeedSection.tsx:74
 msgid "Start adding people"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:853
-#: src/view/screens/ProfileList.tsx:974
+#: src/screens/ProfileList/AboutSection.tsx:108
+#: src/screens/ProfileList/FeedSection.tsx:80
 msgid "Start adding people!"
 msgstr ""
 
···
 msgid "Submit report"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:741
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:81
 msgid "Subscribe"
 msgstr ""
 
···
 msgid "Subscribe to this labeler"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:737
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:69
 msgid "Subscribe to this list"
 msgstr ""
 
···
 msgstr ""
 
 #: src/Navigation.tsx:326
-#: src/view/screens/Support.tsx:31
 #: src/view/screens/Support.tsx:34
+#: src/view/screens/Support.tsx:37
 msgid "Support"
 msgstr ""
 
···
 #: src/Navigation.tsx:336
 #: src/screens/Settings/AboutSettings.tsx:84
 #: src/screens/Settings/AboutSettings.tsx:87
-#: src/view/screens/TermsOfService.tsx:31
+#: src/view/screens/TermsOfService.tsx:34
 #: src/view/shell/Drawer.tsx:697
 #: src/view/shell/Drawer.tsx:699
 msgid "Terms of Service"
···
 msgid "The Bluesky web application"
 msgstr ""
 
-#: src/view/screens/CommunityGuidelines.tsx:38
+#: src/view/screens/CommunityGuidelines.tsx:41
 msgid "The Community Guidelines have been moved to <0/>"
 msgstr ""
 
-#: src/view/screens/CopyrightPolicy.tsx:35
+#: src/view/screens/CopyrightPolicy.tsx:38
 msgid "The Copyright Policy has been moved to <0/>"
 msgstr ""
 
···
 msgid "The open social network."
 msgstr ""
 
-#: src/view/screens/PrivacyPolicy.tsx:35
+#: src/view/screens/PrivacyPolicy.tsx:38
 msgid "The Privacy Policy has been moved to <0/>"
 msgstr ""
 
···
 msgid "The starter pack that you are trying to view is invalid. You may delete this starter pack instead."
 msgstr ""
 
-#: src/components/ContextMenu/index.tsx:433
+#: src/components/ContextMenu/index.tsx:434
 msgid "The subject of the context menu"
 msgstr ""
 
-#: src/view/screens/Support.tsx:37
+#: src/view/screens/Support.tsx:40
 msgid "The support form has been moved. If you need help, please <0/> or visit {HELP_DESK_URL} to get in touch with us."
 msgstr ""
 
-#: src/view/screens/TermsOfService.tsx:35
+#: src/view/screens/TermsOfService.tsx:38
 msgid "The Terms of Service have been moved to"
 msgstr ""
 
···
 msgstr ""
 
 #: src/screens/Profile/components/ProfileFeedHeader.tsx:178
-#: src/view/screens/ProfileList.tsx:375
-#: src/view/screens/ProfileList.tsx:394
-#: src/view/screens/SavedFeeds.tsx:93
+#: src/screens/ProfileList/components/Header.tsx:88
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:76
+#: src/screens/SavedFeeds.tsx:97
 msgid "There was an issue contacting the server"
 msgstr ""
 
···
 msgstr ""
 
 #: src/screens/Search/Explore.tsx:986
-#: src/view/com/posts/PostFeed.tsx:701
+#: src/view/com/posts/PostFeed.tsx:709
 msgid "There was an issue fetching posts. Tap here to try again."
 msgstr ""
 
···
 #: src/screens/List/ListHiddenScreen.tsx:63
 #: src/screens/List/ListHiddenScreen.tsx:77
 #: src/screens/List/ListHiddenScreen.tsx:99
-#: src/view/screens/ProfileList.tsx:411
-#: src/view/screens/ProfileList.tsx:429
-#: src/view/screens/ProfileList.tsx:447
-#: src/view/screens/ProfileList.tsx:465
+#: src/screens/ProfileList/components/Header.tsx:107
+#: src/screens/ProfileList/components/Header.tsx:125
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:129
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:147
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:40
+#: src/screens/ProfileList/components/SubscribeMenu.tsx:59
 msgid "There was an issue. Please check your internet connection and try again."
 msgstr ""
 
···
 msgid "This feature allows users to receive notifications for your new posts and replies. Who do you want to enable this for?"
 msgstr ""
 
-#: src/screens/Settings/components/ExportCarDialog.tsx:96
+#: src/screens/Settings/components/ExportCarDialog.tsx:95
 msgid "This feature is in beta. You can read more about repository exports in <0>this blogpost</0>."
 msgstr ""
 
···
 
 #: src/components/StarterPack/Main/PostsList.tsx:36
 #: src/screens/Profile/ProfileFeed/index.tsx:192
-#: src/view/screens/ProfileList.tsx:843
+#: src/screens/ProfileList/FeedSection.tsx:71
 msgid "This feed is empty."
 msgstr ""
 
···
 msgid "This list – created by you – contains possible violations of Bluesky's community guidelines in its name or description."
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:962
+#: src/screens/ProfileList/AboutSection.tsx:98
 msgid "This list is empty."
 msgstr ""
 
···
 msgid "This user is included in the <0>{0}</0> list which you have muted."
 msgstr ""
 
-#: src/components/NewskieDialog.tsx:65
+#: src/components/NewskieDialog.tsx:47
 msgid "This user is new here. Press for more info about when they joined."
 msgstr ""
 
···
 #: src/components/dms/MessagesListBlockedFooter.tsx:119
 #: src/screens/Profile/Header/ProfileHeaderStandard.tsx:208
 #: src/screens/Profile/Header/ProfileHeaderStandard.tsx:328
+#: src/screens/ProfileList/components/Header.tsx:171
+#: src/screens/ProfileList/components/Header.tsx:178
 #: src/view/com/profile/ProfileMenu.tsx:490
-#: src/view/screens/ProfileList.tsx:723
 msgid "Unblock"
 msgstr ""
 
···
 msgid "Unblock Account?"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:620
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:254
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:257
 msgid "Unblock list"
 msgstr ""
 
···
 msgstr ""
 
 #: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerNative.tsx:152
-#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VolumeControl.tsx:95
+#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VolumeControl.tsx:94
 msgctxt "video"
 msgid "Unmute"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:730
+#: src/screens/ProfileList/components/Header.tsx:185
+#: src/screens/ProfileList/components/Header.tsx:192
 msgid "Unmute"
 msgstr ""
 
···
 msgid "Unmute conversation"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:605
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:264
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:267
 msgid "Unmute list"
 msgstr ""
 
···
 msgid "Unmute video"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:714
+#: src/screens/ProfileList/components/Header.tsx:156
+#: src/screens/ProfileList/components/Header.tsx:163
 msgid "Unpin"
 msgstr ""
 
 #: src/screens/Profile/components/ProfileFeedHeader.tsx:523
 #: src/screens/Profile/components/ProfileFeedHeader.tsx:530
+#: src/screens/SavedFeeds.tsx:351
 msgid "Unpin feed"
 msgstr ""
 
···
 msgid "Unpin from profile"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:585
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:237
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:240
 msgid "Unpin moderation list"
 msgstr ""
 
···
 msgid "Unpinned {0} from Home"
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:362
+#: src/screens/ProfileList/components/Header.tsx:75
 msgid "Unpinned from your feeds"
+msgstr ""
+
+#: src/screens/ProfileList/components/MoreOptionsMenu.tsx:109
+msgid "Unpinned list"
 msgstr ""
 
 #: src/screens/Settings/Settings.tsx:474
···
 msgid "Use my default browser"
 msgstr ""
 
-#: src/screens/Feeds/NoSavedFeedsOfAnyType.tsx:53
+#: src/screens/Feeds/NoSavedFeedsOfAnyType.tsx:56
 msgid "Use recommended"
 msgstr ""
 
···
 msgid "Video is playing"
 msgstr ""
 
-#: src/components/Post/Embed/VideoEmbed/index.web.tsx:220
+#: src/components/Post/Embed/VideoEmbed/index.web.tsx:219
 msgid "Video not found."
 msgstr ""
 
···
 msgid "View blocked user's profile"
 msgstr ""
 
-#: src/screens/Settings/components/ExportCarDialog.tsx:100
+#: src/screens/Settings/components/ExportCarDialog.tsx:99
 msgid "View blogpost for more details"
 msgstr ""
 
···
 msgid "View debug entry"
 msgstr ""
 
-#: src/components/ReportDialog/SelectReportOptionView.tsx:137
+#: src/components/ReportDialog/SelectReportOptionView.tsx:140
 #: src/screens/VideoFeed/index.tsx:659
 #: src/screens/VideoFeed/index.tsx:677
 msgid "View details"
 msgstr ""
 
-#: src/components/ReportDialog/SelectReportOptionView.tsx:132
+#: src/components/ReportDialog/SelectReportOptionView.tsx:135
 msgid "View details for reporting a copyright violation"
 msgstr ""
 
···
 msgid "View full thread"
 msgstr ""
 
-#: src/components/moderation/LabelsOnMe.tsx:46
+#: src/components/moderation/LabelsOnMe.tsx:51
 msgid "View information about these labels"
 msgstr ""
 
···
 #: src/components/ProfileHoverCard/index.web.tsx:486
 #: src/components/ProfileHoverCard/index.web.tsx:513
 #: src/view/com/posts/PostFeedErrorMessage.tsx:179
-#: src/view/com/util/PostMeta.tsx:91
-#: src/view/com/util/PostMeta.tsx:128
+#: src/view/com/util/PostMeta.tsx:90
+#: src/view/com/util/PostMeta.tsx:127
 msgid "View profile"
 msgstr ""
 
···
 msgid "View your default post interaction settings"
 msgstr ""
 
-#: src/view/com/home/HomeHeaderLayout.web.tsx:56
-#: src/view/com/home/HomeHeaderLayoutMobile.tsx:71
+#: src/view/com/home/HomeHeaderLayout.web.tsx:57
+#: src/view/com/home/HomeHeaderLayoutMobile.tsx:72
 msgid "View your feeds and explore more"
 msgstr ""
 
···
 msgid "Visit your notification settings"
 msgstr ""
 
-#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VolumeControl.tsx:81
+#: src/components/Post/Embed/VideoEmbed/VideoEmbedInner/web-controls/VolumeControl.tsx:80
 msgid "Volume"
 msgstr ""
 
-#: src/components/moderation/LabelPreference.tsx:142
-#: src/lib/moderation/useLabelBehaviorDescription.ts:17
-#: src/lib/moderation/useLabelBehaviorDescription.ts:22
+#: src/components/moderation/LabelPreference.tsx:141
+#: src/lib/moderation/useLabelBehaviorDescription.ts:20
+#: src/lib/moderation/useLabelBehaviorDescription.ts:25
 msgid "Warn"
 msgstr ""
 
-#: src/lib/moderation/useLabelBehaviorDescription.ts:48
+#: src/lib/moderation/useLabelBehaviorDescription.ts:51
 msgid "Warn content"
 msgstr ""
 
-#: src/lib/moderation/useLabelBehaviorDescription.ts:46
+#: src/lib/moderation/useLabelBehaviorDescription.ts:49
 msgid "Warn content and filter from feeds"
 msgstr ""
 
···
 msgid "We're sorry, but based on your device's location, you are currently located in a region where we cannot provide access at this time."
 msgstr ""
 
-#: src/view/screens/ProfileList.tsx:117
+#: src/screens/ProfileList/index.tsx:87
 msgid "We're sorry, but we were unable to resolve this list. If this persists, please contact the list creator, @{handleOrDid}."
 msgstr ""
 
···
 msgid "We're sorry! The post you are replying to has been deleted."
 msgstr ""
 
-#: src/components/Lists.tsx:195
+#: src/components/Lists.tsx:194
 #: src/view/screens/NotFound.tsx:50
 msgid "We're sorry! We can't find the page you were looking for."
 msgstr ""
···
 msgid "Welcome back!"
 msgstr ""
 
-#: src/components/NewskieDialog.tsx:103
+#: src/components/NewskieDialog.tsx:121
 msgid "Welcome, friend!"
 msgstr ""
 
···
 msgid "Why are you appealing?"
 msgstr ""
 
-#: src/components/ReportDialog/SelectReportOptionView.tsx:42
+#: src/components/ReportDialog/SelectReportOptionView.tsx:45
 msgid "Why should this content be reviewed?"
 msgstr ""
 
 #: src/components/moderation/ReportDialog/copy.ts:32
-#: src/components/ReportDialog/SelectReportOptionView.tsx:55
+#: src/components/ReportDialog/SelectReportOptionView.tsx:58
 msgid "Why should this feed be reviewed?"
 msgstr ""
 
 #: src/components/moderation/ReportDialog/copy.ts:26
-#: src/components/ReportDialog/SelectReportOptionView.tsx:52
+#: src/components/ReportDialog/SelectReportOptionView.tsx:55
 msgid "Why should this list be reviewed?"
 msgstr ""
 
 #: src/components/moderation/ReportDialog/copy.ts:44
-#: src/components/ReportDialog/SelectReportOptionView.tsx:61
+#: src/components/ReportDialog/SelectReportOptionView.tsx:64
 msgid "Why should this message be reviewed?"
 msgstr ""
 
 #: src/components/moderation/ReportDialog/copy.ts:20
-#: src/components/ReportDialog/SelectReportOptionView.tsx:49
+#: src/components/ReportDialog/SelectReportOptionView.tsx:52
 msgid "Why should this post be reviewed?"
 msgstr ""
 
 #: src/components/moderation/ReportDialog/copy.ts:38
-#: src/components/ReportDialog/SelectReportOptionView.tsx:58
+#: src/components/ReportDialog/SelectReportOptionView.tsx:61
 msgid "Why should this starter pack be reviewed?"
 msgstr ""
 
 #: src/components/moderation/ReportDialog/copy.ts:14
-#: src/components/ReportDialog/SelectReportOptionView.tsx:46
+#: src/components/ReportDialog/SelectReportOptionView.tsx:49
 msgid "Why should this user be reviewed?"
 msgstr ""
 
···
 msgid "www.mylivestream.tv"
 msgstr ""
 
-#: src/view/com/composer/select-language/SuggestedLanguage.tsx:100
+#: src/view/com/composer/select-language/SuggestedLanguage.tsx:102
 msgid "Yes"
 msgstr ""
 
···
 msgid "Yesterday"
 msgstr ""
 
-#: src/components/NewskieDialog.tsx:43
+#: src/components/NewskieDialog.tsx:91
 msgid "You"
 msgstr ""
 
···
 msgid "You do not have any followers."
 msgstr ""
 
-#: src/screens/Profile/KnownFollowers.tsx:109
+#: src/screens/Profile/KnownFollowers.tsx:112
 msgid "You don't follow any users who follow @{name}."
 msgstr ""
 
···
 msgid "You don't have any invite codes yet! We'll send you some when you've been on Bluesky for a little longer."
 msgstr ""
 
-#: src/view/screens/SavedFeeds.tsx:145
+#: src/screens/SavedFeeds.tsx:149
 msgid "You don't have any pinned feeds."
 msgstr ""
 
-#: src/view/screens/SavedFeeds.tsx:185
+#: src/screens/SavedFeeds.tsx:191
 msgid "You don't have any saved feeds."
 msgstr ""
 
···
 msgid "You have not muted any accounts yet. To mute an account, go to their profile and select \"Mute account\" from the menu on their account."
 msgstr ""
 
-#: src/components/Lists.tsx:58
+#: src/components/Lists.tsx:57
 msgid "You have reached the end"
 msgstr ""
 
···
 msgid "You must complete age assurance in order to access this screen."
 msgstr ""
 
-#: src/components/StarterPack/QrCodeDialog.tsx:61
+#: src/components/StarterPack/QrCodeDialog.tsx:65
 msgid "You must grant access to your photo library to save a QR code"
 msgstr ""
 
···
 msgid "Your birth date"
 msgstr ""
 
-#: src/components/Post/Embed/VideoEmbed/index.web.tsx:224
+#: src/components/Post/Embed/VideoEmbed/index.web.tsx:223
 msgid "Your browser does not support the video format. Please try a different browser."
 msgstr ""
 

src/logger/__tests__/logDump.test.ts

···
 import {expect, test} from '@jest/globals'
 
-import {add, ConsoleTransportEntry, getEntries} from '#/logger/logDump'
+import {add, type ConsoleTransportEntry, getEntries} from '#/logger/logDump'
 import {LogContext, LogLevel} from '#/logger/types'
 
 test('works', () => {

src/logger/logDump.ts

···
-import type {LogContext, LogLevel, Metadata} from '#/logger/types'
+import {type LogContext, type LogLevel, type Metadata} from '#/logger/types'
 
 export type ConsoleTransportEntry = {
   id: string

src/logger/transports/bitdrift.ts

···
 import {debug, error, info, warn} from '#/logger/bitdrift/lib'
-import {LogLevel, Transport} from '#/logger/types'
+import {LogLevel, type Transport} from '#/logger/types'
 import {prepareMetadata} from '#/logger/util'
 
 const logFunctions = {

src/logger/transports/console.ts

···
 import format from 'date-fns/format'
 
-import {LogLevel, Transport} from '#/logger/types'
+import {LogLevel, type Transport} from '#/logger/types'
 import {prepareMetadata} from '#/logger/util'
 import {isWeb} from '#/platform/detection'
 

src/logger/util.ts

···
-import {LogLevel, Metadata, Serializable} from '#/logger/types'
+import {LogLevel, type Metadata, type Serializable} from '#/logger/types'
 
 export const enabledLogLevels: {
   [key in LogLevel]: LogLevel[]

src/platform/polyfills.ts

···
 import 'react-native-url-polyfill/auto'
 import 'fast-text-encoding'
 export {}
-
-/**
-https://github.com/MaxArt2501/base64-js
-The MIT License (MIT)
-Copyright (c) 2014 MaxArt2501
- */
-
-const b64 = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/='
-// Regular expression to check formal correctness of base64 encoded strings
-const b64re =
-  /^(?:[A-Za-z\d+\/]{4})*?(?:[A-Za-z\d+\/]{2}(?:==)?|[A-Za-z\d+\/]{3}=?)?$/
-
-globalThis.atob = (str: string): string => {
-  // atob can work with strings with whitespaces, even inside the encoded part,
-  // but only \t, \n, \f, \r and ' ', which can be stripped.
-  str = String(str).replace(/[\t\n\f\r ]+/g, '')
-  if (!b64re.test(str)) {
-    throw new TypeError(
-      "Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.",
-    )
-  }
-
-  // Adding the padding if missing, for simplicity
-  str += '=='.slice(2 - (str.length & 3))
-  var bitmap,
-    result = '',
-    r1,
-    r2,
-    i = 0
-  for (; i < str.length; ) {
-    bitmap =
-      (b64.indexOf(str.charAt(i++)) << 18) |
-      (b64.indexOf(str.charAt(i++)) << 12) |
-      ((r1 = b64.indexOf(str.charAt(i++))) << 6) |
-      (r2 = b64.indexOf(str.charAt(i++)))
-
-    result +=
-      r1 === 64
-        ? String.fromCharCode((bitmap >> 16) & 255)
-        : r2 === 64
-          ? String.fromCharCode((bitmap >> 16) & 255, (bitmap >> 8) & 255)
-          : String.fromCharCode(
-              (bitmap >> 16) & 255,
-              (bitmap >> 8) & 255,
-              bitmap & 255,
-            )
-  }
-  return result
-}

src/screens/Feeds/NoFollowingFeed.tsx

···
-import React from 'react'
-import {View} from 'react-native'
+import {type GestureResponderEvent, View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
···
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
-export function NoFollowingFeed() {
+export function NoFollowingFeed({onAddFeed}: {onAddFeed?: () => void}) {
   const t = useTheme()
   const {_} = useLingui()
   const {mutateAsync: addSavedFeeds} = useAddSavedFeedsMutation()
 
-  const addRecommendedFeeds = React.useCallback(
-    (e: any) => {
-      e.preventDefault()
+  const addRecommendedFeeds = (e: GestureResponderEvent) => {
+    e.preventDefault()
 
-      addSavedFeeds([
-        {
-          ...TIMELINE_SAVED_FEED,
-          pinned: true,
-        },
-      ])
+    addSavedFeeds([
+      {
+        ...TIMELINE_SAVED_FEED,
+        pinned: true,
+      },
+    ])
 
-      // prevent navigation
-      return false
-    },
-    [addSavedFeeds],
-  )
+    onAddFeed?.()
+
+    // prevent navigation
+    return false as const
+  }
 
   return (
     <View style={[a.flex_row, a.flex_wrap, a.align_center, a.py_md, a.px_lg]}>
···
         <Trans>
           Looks like you're missing a following feed.{' '}
           <InlineLinkText
-            to="/"
+            to="#"
             label={_(msg`Add the default feed of only people you follow`)}
             onPress={addRecommendedFeeds}
             style={[a.leading_snug]}>

src/screens/Feeds/NoSavedFeedsOfAnyType.tsx

···
-import React from 'react'
 import {View} from 'react-native'
 import {TID} from '@atproto/common-web'
 import {msg, Trans} from '@lingui/macro'
···
  * feeds if pressed. It should only be presented to the user if they actually
  * have no other feeds saved.
  */
-export function NoSavedFeedsOfAnyType() {
+export function NoSavedFeedsOfAnyType({
+  onAddRecommendedFeeds,
+}: {
+  onAddRecommendedFeeds?: () => void
+}) {
   const t = useTheme()
   const {_} = useLingui()
   const {isPending, mutateAsync: overwriteSavedFeeds} =
     useOverwriteSavedFeedsMutation()
 
-  const addRecommendedFeeds = React.useCallback(async () => {
+  const addRecommendedFeeds = async () => {
+    onAddRecommendedFeeds?.()
     await overwriteSavedFeeds(
       RECOMMENDED_SAVED_FEEDS.map(f => ({
         ...f,
         id: TID.nextStr(),
       })),
     )
-  }, [overwriteSavedFeeds])
+  }
 
   return (
     <View
···
         disabled={isPending}
         label={_(msg`Apply default recommended feeds`)}
         size="small"
-        variant="solid"
-        color="primary"
+        color="primary_subtle"
         onPress={addRecommendedFeeds}>
-        <ButtonIcon icon={Plus} position="left" />
+        <ButtonIcon icon={Plus} />
         <ButtonText>{_(msg`Use recommended`)}</ButtonText>
       </Button>
     </View>

src/screens/Home/NoFeedsPinned.tsx

···
 
 import {DISCOVER_SAVED_FEED, TIMELINE_SAVED_FEED} from '#/lib/constants'
 import {useOverwriteSavedFeedsMutation} from '#/state/queries/preferences'
-import {UsePreferencesQueryResponse} from '#/state/queries/preferences'
+import {type UsePreferencesQueryResponse} from '#/state/queries/preferences'
 import {CenteredView} from '#/view/com/util/Views'
 import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'

src/screens/List/ListHiddenScreen.tsx

···
 import {RQKEY_ROOT as listQueryRoot} from '#/state/queries/list'
 import {useListBlockMutation, useListMuteMutation} from '#/state/queries/list'
 import {
-  UsePreferencesQueryResponse,
+  type UsePreferencesQueryResponse,
   useRemoveFeedMutation,
 } from '#/state/queries/preferences'
 import {useSession} from '#/state/session'

src/screens/Login/ChooseAccountForm.tsx

···
 
 import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
-import {SessionAccount, useSession, useSessionApi} from '#/state/session'
+import {type SessionAccount, useSession, useSessionApi} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'

src/screens/Login/FormContainer.tsx

···
-import React from 'react'
 import {type StyleProp, View, type ViewStyle} from 'react-native'
+import type React from 'react'
 
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'

src/screens/Login/ScreenTransition.tsx

···
-import React from 'react'
-import {StyleProp, ViewStyle} from 'react-native'
+import {type StyleProp, type ViewStyle} from 'react-native'
 import Animated, {FadeInRight, FadeOutLeft} from 'react-native-reanimated'
+import type React from 'react'
 
 export function ScreenTransition({
   style,

src/screens/Messages/components/ChatStatusInfo.tsx

···
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {ActiveConvoStates} from '#/state/messages/convo'
+import {type ActiveConvoStates} from '#/state/messages/convo'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'

src/screens/Messages/components/MessageInputEmbed.tsx

···
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {RouteProp, useNavigation, useRoute} from '@react-navigation/native'
+import {type RouteProp, useNavigation, useRoute} from '@react-navigation/native'
 
 import {makeProfileLink} from '#/lib/routes/links'
-import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NavigationProp,
+} from '#/lib/routes/types'
 import {
   convertBskyAppUrlIfNeeded,
   isBskyPostUrl,

src/screens/Messages/components/MessageListError.tsx

···
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {ConvoItem, ConvoItemError} from '#/state/messages/convo/types'
+import {type ConvoItem, ConvoItemError} from '#/state/messages/convo/types'
 import {atoms as a, useTheme} from '#/alf'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {InlineLinkText} from '#/components/Link'

src/screens/ModerationInteractionSettings/index.tsx

···
 import {createPostgateRecord} from '#/state/queries/postgate/util'
 import {
   usePreferencesQuery,
-  UsePreferencesQueryResponse,
+  type UsePreferencesQueryResponse,
 } from '#/state/queries/preferences'
 import {
   threadgateAllowUISettingToAllowRecordValue,

src/screens/Onboarding/StepInterests/InterestButton.tsx

···
 import React from 'react'
-import {TextStyle, View, ViewStyle} from 'react-native'
+import {type TextStyle, View, type ViewStyle} from 'react-native'
 
 import {capitalize} from '#/lib/strings/capitalize'
 import {useInterestsDisplayNames} from '#/screens/Onboarding/state'

src/screens/Onboarding/StepProfile/AvatarCreatorCircle.tsx

···
 import React from 'react'
 import {View} from 'react-native'
 
-import {Avatar} from '#/screens/Onboarding/StepProfile/index'
+import {type Avatar} from '#/screens/Onboarding/StepProfile/index'
 import {atoms as a, useTheme} from '#/alf'
 
 export function AvatarCreatorCircle({

src/screens/Onboarding/StepProfile/AvatarCreatorItems.tsx

···
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {Avatar} from '#/screens/Onboarding/StepProfile/index'
+import {type Avatar} from '#/screens/Onboarding/StepProfile/index'
 import {
-  AvatarColor,
+  type AvatarColor,
   avatarColors,
   emojiItems,
-  EmojiName,
+  type EmojiName,
   emojiNames,
 } from '#/screens/Onboarding/StepProfile/types'
 import {atoms as a, useTheme} from '#/alf'

src/screens/Post/PostLikedBy.tsx

···
 import {Plural, Trans} from '@lingui/macro'
 import {useFocusEffect} from '@react-navigation/native'
 
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
 import {makeRecordUri} from '#/lib/strings/url-helpers'
 import {usePostThreadQuery} from '#/state/queries/post-thread'
 import {useSetMinimalShellMode} from '#/state/shell'

src/screens/Post/PostQuotes.tsx

···
 import {Plural, Trans} from '@lingui/macro'
 import {useFocusEffect} from '@react-navigation/native'
 
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
 import {makeRecordUri} from '#/lib/strings/url-helpers'
 import {usePostThreadQuery} from '#/state/queries/post-thread'
 import {useSetMinimalShellMode} from '#/state/shell'

src/screens/Post/PostRepostedBy.tsx

···
 import {Plural, Trans} from '@lingui/macro'
 import {useFocusEffect} from '@react-navigation/native'
 
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
 import {makeRecordUri} from '#/lib/strings/url-helpers'
 import {usePostThreadQuery} from '#/state/queries/post-thread'
 import {useSetMinimalShellMode} from '#/state/shell'

src/screens/PostThread/components/ThreadItemAnchor.tsx

···
                     )}
                   </Text>
 
-                  <View style={[{paddingLeft: 3, top: -1}]}>
+                  <View style={[a.pl_xs]}>
                     <VerificationCheckButton profile={authorShadow} size="md" />
                   </View>
                 </View>

src/screens/Profile/ErrorState.tsx

···
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'

src/screens/Profile/Header/GrowableAvatar.tsx

···
-import React from 'react'
-import {StyleProp, View, ViewStyle} from 'react-native'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
 import Animated, {
   Extrapolation,
   interpolate,
-  SharedValue,
+  type SharedValue,
   useAnimatedStyle,
 } from 'react-native-reanimated'
+import type React from 'react'
 
 import {isIOS} from '#/platform/detection'
 import {usePagerHeaderContext} from '#/view/com/pager/PagerHeaderContext'

src/screens/Profile/Header/GrowableBanner.tsx

···
-import React, {useEffect, useState} from 'react'
+import {useEffect, useState} from 'react'
 import {View} from 'react-native'
 import {ActivityIndicator} from 'react-native'
 import Animated, {
   Extrapolation,
   interpolate,
   runOnJS,
-  SharedValue,
+  type SharedValue,
   useAnimatedProps,
   useAnimatedReaction,
   useAnimatedStyle,
···
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {BlurView} from 'expo-blur'
 import {useIsFetching} from '@tanstack/react-query'
+import type React from 'react'
 
 import {isIOS} from '#/platform/detection'
 import {RQKEY_ROOT as STARTERPACK_RQKEY_ROOT} from '#/state/queries/actor-starter-packs'

src/screens/Profile/Header/StatusBarShadow.tsx

···
-import Animated, {SharedValue, useAnimatedStyle} from 'react-native-reanimated'
+import Animated, {
+  type SharedValue,
+  useAnimatedStyle,
+} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {LinearGradient} from 'expo-linear-gradient'
 

src/screens/Profile/Header/index.tsx

···
 import React, {memo, useState} from 'react'
-import {LayoutChangeEvent, StyleSheet, View} from 'react-native'
+import {type LayoutChangeEvent, StyleSheet, View} from 'react-native'
 import Animated, {
   runOnJS,
   useAnimatedReaction,
···
 } from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {
-  AppBskyActorDefs,
-  AppBskyLabelerDefs,
-  ModerationOpts,
-  RichText as RichTextAPI,
+  type AppBskyActorDefs,
+  type AppBskyLabelerDefs,
+  type ModerationOpts,
+  type RichText as RichTextAPI,
 } from '@atproto/api'
 import {useIsFocused} from '@react-navigation/native'
 

src/screens/Profile/KnownFollowers.tsx

···
 import React from 'react'
-import {AppBskyActorDefs} from '@atproto/api'
+import {type AppBskyActorDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 
 import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {useProfileKnownFollowersQuery} from '#/state/queries/known-followers'

src/screens/Profile/ProfileFollowers.tsx

···
 import {Plural} from '@lingui/macro'
 import {useFocusEffect} from '@react-navigation/native'
 
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useResolveDidQuery} from '#/state/queries/resolve-uri'

src/screens/Profile/ProfileFollows.tsx

···
 import {Plural} from '@lingui/macro'
 import {useFocusEffect} from '@react-navigation/native'
 
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {useProfileQuery} from '#/state/queries/profile'
 import {useResolveDidQuery} from '#/state/queries/resolve-uri'

src/screens/Profile/ProfileLabelerLikedBy.tsx

···
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
 import {makeRecordUri} from '#/lib/strings/url-helpers'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {ViewHeader} from '#/view/com/util/ViewHeader'

src/screens/ProfileList/AboutSection.tsx

···
+import {useCallback, useImperativeHandle, useState} from 'react'
+import {View} from 'react-native'
+import {type AppBskyGraphDefs} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {isNative} from '#/platform/detection'
+import {useSession} from '#/state/session'
+import {ListMembers} from '#/view/com/lists/ListMembers'
+import {EmptyState} from '#/view/com/util/EmptyState'
+import {type ListRef} from '#/view/com/util/List'
+import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn'
+import {atoms as a, useBreakpoints} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {PersonPlus_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person'
+
+interface SectionRef {
+  scrollToTop: () => void
+}
+
+interface AboutSectionProps {
+  ref?: React.Ref<SectionRef>
+  list: AppBskyGraphDefs.ListView
+  onPressAddUser: () => void
+  headerHeight: number
+  scrollElRef: ListRef
+}
+
+export function AboutSection({
+  ref,
+  list,
+  onPressAddUser,
+  headerHeight,
+  scrollElRef,
+}: AboutSectionProps) {
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const {gtMobile} = useBreakpoints()
+  const [isScrolledDown, setIsScrolledDown] = useState(false)
+  const isOwner = list.creator.did === currentAccount?.did
+
+  const onScrollToTop = useCallback(() => {
+    scrollElRef.current?.scrollToOffset({
+      animated: isNative,
+      offset: -headerHeight,
+    })
+  }, [scrollElRef, headerHeight])
+
+  useImperativeHandle(ref, () => ({
+    scrollToTop: onScrollToTop,
+  }))
+
+  const renderHeader = useCallback(() => {
+    if (!isOwner) {
+      return <View />
+    }
+    if (!gtMobile) {
+      return (
+        <View style={[a.px_sm, a.py_sm]}>
+          <Button
+            testID="addUserBtn"
+            label={_(msg`Add a user to this list`)}
+            onPress={onPressAddUser}
+            color="primary"
+            size="small"
+            variant="outline"
+            style={[a.py_md]}>
+            <ButtonIcon icon={PersonPlusIcon} />
+            <ButtonText>
+              <Trans>Add people</Trans>
+            </ButtonText>
+          </Button>
+        </View>
+      )
+    }
+    return (
+      <View style={[a.px_lg, a.py_md, a.flex_row_reverse]}>
+        <Button
+          testID="addUserBtn"
+          label={_(msg`Add a user to this list`)}
+          onPress={onPressAddUser}
+          color="primary"
+          size="small"
+          variant="ghost"
+          style={[a.py_sm]}>
+          <ButtonIcon icon={PersonPlusIcon} />
+          <ButtonText>
+            <Trans>Add people</Trans>
+          </ButtonText>
+        </Button>
+      </View>
+    )
+  }, [isOwner, _, onPressAddUser, gtMobile])
+
+  const renderEmptyState = useCallback(() => {
+    return (
+      <View style={[a.gap_xl, a.align_center]}>
+        <EmptyState icon="users-slash" message={_(msg`This list is empty.`)} />
+        {isOwner && (
+          <Button
+            testID="emptyStateAddUserBtn"
+            label={_(msg`Start adding people`)}
+            onPress={onPressAddUser}
+            color="primary"
+            size="small">
+            <ButtonIcon icon={PersonPlusIcon} />
+            <ButtonText>
+              <Trans>Start adding people!</Trans>
+            </ButtonText>
+          </Button>
+        )}
+      </View>
+    )
+  }, [_, onPressAddUser, isOwner])
+
+  return (
+    <View>
+      <ListMembers
+        testID="listItems"
+        list={list.uri}
+        scrollElRef={scrollElRef}
+        renderHeader={renderHeader}
+        renderEmptyState={renderEmptyState}
+        headerOffset={headerHeight}
+        onScrolledDownChange={setIsScrolledDown}
+      />
+      {isScrolledDown && (
+        <LoadLatestBtn
+          onPress={onScrollToTop}
+          label={_(msg`Scroll to top`)}
+          showIndicator={false}
+        />
+      )}
+    </View>
+  )
+}

src/screens/ProfileList/FeedSection.tsx

···
+import {useCallback, useEffect, useImperativeHandle, useState} from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useIsFocused} from '@react-navigation/native'
+import {useQueryClient} from '@tanstack/react-query'
+
+import {isNative} from '#/platform/detection'
+import {listenSoftReset} from '#/state/events'
+import {type FeedDescriptor} from '#/state/queries/post-feed'
+import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
+import {PostFeed} from '#/view/com/posts/PostFeed'
+import {EmptyState} from '#/view/com/util/EmptyState'
+import {type ListRef} from '#/view/com/util/List'
+import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {PersonPlus_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person'
+
+interface SectionRef {
+  scrollToTop: () => void
+}
+
+interface FeedSectionProps {
+  ref?: React.Ref<SectionRef>
+  feed: FeedDescriptor
+  headerHeight: number
+  scrollElRef: ListRef
+  isFocused: boolean
+  isOwner: boolean
+  onPressAddUser: () => void
+}
+
+export function FeedSection({
+  ref,
+  feed,
+  scrollElRef,
+  headerHeight,
+  isFocused,
+  isOwner,
+  onPressAddUser,
+}: FeedSectionProps) {
+  const queryClient = useQueryClient()
+  const [hasNew, setHasNew] = useState(false)
+  const [isScrolledDown, setIsScrolledDown] = useState(false)
+  const isScreenFocused = useIsFocused()
+  const {_} = useLingui()
+
+  const onScrollToTop = useCallback(() => {
+    scrollElRef.current?.scrollToOffset({
+      animated: isNative,
+      offset: -headerHeight,
+    })
+    queryClient.resetQueries({queryKey: FEED_RQKEY(feed)})
+    setHasNew(false)
+  }, [scrollElRef, headerHeight, queryClient, feed, setHasNew])
+  useImperativeHandle(ref, () => ({
+    scrollToTop: onScrollToTop,
+  }))
+
+  useEffect(() => {
+    if (!isScreenFocused) {
+      return
+    }
+    return listenSoftReset(onScrollToTop)
+  }, [onScrollToTop, isScreenFocused])
+
+  const renderPostsEmpty = useCallback(() => {
+    return (
+      <View style={[a.gap_xl, a.align_center]}>
+        <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} />
+        {isOwner && (
+          <Button
+            label={_(msg`Start adding people`)}
+            onPress={onPressAddUser}
+            color="primary"
+            size="small">
+            <ButtonIcon icon={PersonPlusIcon} />
+            <ButtonText>
+              <Trans>Start adding people!</Trans>
+            </ButtonText>
+          </Button>
+        )}
+      </View>
+    )
+  }, [_, onPressAddUser, isOwner])
+
+  return (
+    <View>
+      <PostFeed
+        testID="listFeed"
+        enabled={isFocused}
+        feed={feed}
+        pollInterval={60e3}
+        disablePoll={hasNew}
+        scrollElRef={scrollElRef}
+        onHasNew={setHasNew}
+        onScrolledDownChange={setIsScrolledDown}
+        renderEmptyState={renderPostsEmpty}
+        headerOffset={headerHeight}
+      />
+      {(isScrolledDown || hasNew) && (
+        <LoadLatestBtn
+          onPress={onScrollToTop}
+          label={_(msg`Load new posts`)}
+          showIndicator={hasNew}
+        />
+      )}
+    </View>
+  )
+}

src/screens/ProfileList/components/ErrorScreen.tsx

···
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {type NavigationProp} from '#/lib/routes/types'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import {Text} from '#/components/Typography'
+
+export function ErrorScreen({error}: {error: React.ReactNode}) {
+  const t = useTheme()
+  const navigation = useNavigation<NavigationProp>()
+  const {_} = useLingui()
+  const onPressBack = () => {
+    if (navigation.canGoBack()) {
+      navigation.goBack()
+    } else {
+      navigation.navigate('Home')
+    }
+  }
+
+  return (
+    <View style={[a.px_xl, a.py_md, a.gap_md]}>
+      <Text style={[a.text_4xl, a.font_heavy]}>
+        <Trans>Could not load list</Trans>
+      </Text>
+      <Text style={[a.text_md, t.atoms.text_contrast_high, a.leading_snug]}>
+        {error}
+      </Text>
+
+      <View style={[a.flex_row, a.mt_lg]}>
+        <Button
+          label={_(msg`Go back`)}
+          accessibilityHint={_(msg`Returns to previous page`)}
+          onPress={onPressBack}
+          size="small"
+          color="secondary">
+          <ButtonText>
+            <Trans>Go back</Trans>
+          </ButtonText>
+        </Button>
+      </View>
+    </View>
+  )
+}

src/screens/ProfileList/components/Header.tsx

···
+import {useMemo} from 'react'
+import {View} from 'react-native'
+import {AppBskyGraphDefs, RichText as RichTextAPI} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useHaptics} from '#/lib/haptics'
+import {makeListLink} from '#/lib/routes/links'
+import {logger} from '#/logger'
+import {useListBlockMutation, useListMuteMutation} from '#/state/queries/list'
+import {
+  useAddSavedFeedsMutation,
+  type UsePreferencesQueryResponse,
+  useUpdateSavedFeedsMutation,
+} from '#/state/queries/preferences'
+import {useSession} from '#/state/session'
+import {ProfileSubpageHeader} from '#/view/com/profile/ProfileSubpageHeader'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {Pin_Stroke2_Corner0_Rounded as PinIcon} from '#/components/icons/Pin'
+import {Loader} from '#/components/Loader'
+import {RichText} from '#/components/RichText'
+import * as Toast from '#/components/Toast'
+import {MoreOptionsMenu} from './MoreOptionsMenu'
+import {SubscribeMenu} from './SubscribeMenu'
+
+export function Header({
+  rkey,
+  list,
+  preferences,
+}: {
+  rkey: string
+  list: AppBskyGraphDefs.ListView
+  preferences: UsePreferencesQueryResponse
+}) {
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const isCurateList = list.purpose === AppBskyGraphDefs.CURATELIST
+  const isModList = list.purpose === AppBskyGraphDefs.MODLIST
+  const isBlocking = !!list.viewer?.blocked
+  const isMuting = !!list.viewer?.muted
+  const playHaptic = useHaptics()
+
+  const {mutateAsync: muteList, isPending: isMutePending} =
+    useListMuteMutation()
+  const {mutateAsync: blockList, isPending: isBlockPending} =
+    useListBlockMutation()
+  const {mutateAsync: addSavedFeeds, isPending: isAddSavedFeedPending} =
+    useAddSavedFeedsMutation()
+  const {mutateAsync: updateSavedFeeds, isPending: isUpdatingSavedFeeds} =
+    useUpdateSavedFeedsMutation()
+
+  const isPending = isAddSavedFeedPending || isUpdatingSavedFeeds
+
+  const savedFeedConfig = preferences?.savedFeeds?.find(
+    f => f.value === list.uri,
+  )
+  const isPinned = Boolean(savedFeedConfig?.pinned)
+
+  const onTogglePinned = async () => {
+    playHaptic()
+
+    try {
+      if (savedFeedConfig) {
+        const pinned = !savedFeedConfig.pinned
+        await updateSavedFeeds([
+          {
+            ...savedFeedConfig,
+            pinned,
+          },
+        ])
+        Toast.show(
+          pinned
+            ? _(msg`Pinned to your feeds`)
+            : _(msg`Unpinned from your feeds`),
+        )
+      } else {
+        await addSavedFeeds([
+          {
+            type: 'list',
+            value: list.uri,
+            pinned: true,
+          },
+        ])
+        Toast.show(_(msg`Saved to your feeds`))
+      }
+    } catch (e) {
+      Toast.show(_(msg`There was an issue contacting the server`), {
+        type: 'error',
+      })
+      logger.error('Failed to toggle pinned feed', {message: e})
+    }
+  }
+
+  const onUnsubscribeMute = async () => {
+    try {
+      await muteList({uri: list.uri, mute: false})
+      Toast.show(_(msg({message: 'List unmuted', context: 'toast'})))
+      logger.metric(
+        'moderation:unsubscribedFromList',
+        {listType: 'mute'},
+        {statsig: true},
+      )
+    } catch {
+      Toast.show(
+        _(
+          msg`There was an issue. Please check your internet connection and try again.`,
+        ),
+      )
+    }
+  }
+
+  const onUnsubscribeBlock = async () => {
+    try {
+      await blockList({uri: list.uri, block: false})
+      Toast.show(_(msg({message: 'List unblocked', context: 'toast'})))
+      logger.metric(
+        'moderation:unsubscribedFromList',
+        {listType: 'block'},
+        {statsig: true},
+      )
+    } catch {
+      Toast.show(
+        _(
+          msg`There was an issue. Please check your internet connection and try again.`,
+        ),
+      )
+    }
+  }
+
+  const descriptionRT = useMemo(
+    () =>
+      list.description
+        ? new RichTextAPI({
+            text: list.description,
+            facets: list.descriptionFacets,
+          })
+        : undefined,
+    [list],
+  )
+
+  return (
+    <>
+      <ProfileSubpageHeader
+        href={makeListLink(list.creator.handle || list.creator.did || '', rkey)}
+        title={list.name}
+        avatar={list.avatar}
+        isOwner={list.creator.did === currentAccount?.did}
+        creator={list.creator}
+        purpose={list.purpose}
+        avatarType="list">
+        {isCurateList ? (
+          <Button
+            testID={isPinned ? 'unpinBtn' : 'pinBtn'}
+            color={isPinned ? 'secondary' : 'primary_subtle'}
+            label={isPinned ? _(msg`Unpin`) : _(msg`Pin to home`)}
+            onPress={onTogglePinned}
+            disabled={isPending}
+            size="small"
+            style={[a.rounded_full]}>
+            {!isPinned && <ButtonIcon icon={isPending ? Loader : PinIcon} />}
+            <ButtonText>
+              {isPinned ? <Trans>Unpin</Trans> : <Trans>Pin to home</Trans>}
+            </ButtonText>
+          </Button>
+        ) : isModList ? (
+          isBlocking ? (
+            <Button
+              testID="unblockBtn"
+              color="secondary"
+              label={_(msg`Unblock`)}
+              onPress={onUnsubscribeBlock}
+              size="small"
+              style={[a.rounded_full]}
+              disabled={isBlockPending}>
+              {isBlockPending && <ButtonIcon icon={Loader} />}
+              <ButtonText>
+                <Trans>Unblock</Trans>
+              </ButtonText>
+            </Button>
+          ) : isMuting ? (
+            <Button
+              testID="unmuteBtn"
+              color="secondary"
+              label={_(msg`Unmute`)}
+              onPress={onUnsubscribeMute}
+              size="small"
+              style={[a.rounded_full]}
+              disabled={isMutePending}>
+              {isMutePending && <ButtonIcon icon={Loader} />}
+              <ButtonText>
+                <Trans>Unmute</Trans>
+              </ButtonText>
+            </Button>
+          ) : (
+            <SubscribeMenu list={list} />
+          )
+        ) : null}
+        <MoreOptionsMenu list={list} />
+      </ProfileSubpageHeader>
+      {descriptionRT ? (
+        <View style={[a.px_lg, a.pt_sm, a.pb_sm, a.gap_md]}>
+          <RichText value={descriptionRT} style={[a.text_md, a.leading_snug]} />
+        </View>
+      ) : null}
+    </>
+  )
+}

src/screens/ProfileList/components/MoreOptionsMenu.tsx

···
+import {type AppBskyActorDefs, AppBskyGraphDefs, AtUri} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {type NavigationProp} from '#/lib/routes/types'
+import {shareUrl} from '#/lib/sharing'
+import {toShareUrl} from '#/lib/strings/url-helpers'
+import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
+import {useModalControls} from '#/state/modals'
+import {
+  useListBlockMutation,
+  useListDeleteMutation,
+  useListMuteMutation,
+} from '#/state/queries/list'
+import {useRemoveFeedMutation} from '#/state/queries/preferences'
+import {useSession} from '#/state/session'
+import {Button, ButtonIcon} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
+import {ArrowOutOfBoxModified_Stroke2_Corner2_Rounded as ShareIcon} from '#/components/icons/ArrowOutOfBox'
+import {ChainLink_Stroke2_Corner0_Rounded as ChainLink} from '#/components/icons/ChainLink'
+import {DotGrid_Stroke2_Corner0_Rounded as DotGridIcon} from '#/components/icons/DotGrid'
+import {PencilLine_Stroke2_Corner0_Rounded as PencilLineIcon} from '#/components/icons/Pencil'
+import {PersonCheck_Stroke2_Corner0_Rounded as PersonCheckIcon} from '#/components/icons/Person'
+import {Pin_Stroke2_Corner0_Rounded as PinIcon} from '#/components/icons/Pin'
+import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as UnmuteIcon} from '#/components/icons/Speaker'
+import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
+import {Warning_Stroke2_Corner0_Rounded as WarningIcon} from '#/components/icons/Warning'
+import * as Menu from '#/components/Menu'
+import {
+  ReportDialog,
+  useReportDialogControl,
+} from '#/components/moderation/ReportDialog'
+import * as Prompt from '#/components/Prompt'
+import * as Toast from '#/components/Toast'
+
+export function MoreOptionsMenu({
+  list,
+  savedFeedConfig,
+}: {
+  list: AppBskyGraphDefs.ListView
+  savedFeedConfig?: AppBskyActorDefs.SavedFeed
+}) {
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const {openModal} = useModalControls()
+  const deleteListPromptControl = useDialogControl()
+  const reportDialogControl = useReportDialogControl()
+  const navigation = useNavigation<NavigationProp>()
+
+  const {mutateAsync: removeSavedFeed} = useRemoveFeedMutation()
+  const {mutateAsync: deleteList} = useListDeleteMutation()
+  const {mutateAsync: muteList} = useListMuteMutation()
+  const {mutateAsync: blockList} = useListBlockMutation()
+
+  const isCurateList = list.purpose === AppBskyGraphDefs.CURATELIST
+  const isModList = list.purpose === AppBskyGraphDefs.MODLIST
+  const isBlocking = !!list.viewer?.blocked
+  const isMuting = !!list.viewer?.muted
+  const isPinned = Boolean(savedFeedConfig?.pinned)
+  const isOwner = currentAccount?.did === list.creator.did
+
+  const onPressShare = () => {
+    const {rkey} = new AtUri(list.uri)
+    const url = toShareUrl(`/profile/${list.creator.did}/lists/${rkey}`)
+    shareUrl(url)
+  }
+
+  const onRemoveFromSavedFeeds = async () => {
+    if (!savedFeedConfig) return
+    try {
+      await removeSavedFeed(savedFeedConfig)
+      Toast.show(_(msg`Removed from your feeds`))
+    } catch (e) {
+      Toast.show(_(msg`There was an issue contacting the server`), {
+        type: 'error',
+      })
+      logger.error('Failed to remove pinned list', {message: e})
+    }
+  }
+
+  const onPressEdit = () => {
+    openModal({
+      name: 'create-or-edit-list',
+      list,
+    })
+  }
+
+  const onPressDelete = async () => {
+    await deleteList({uri: list.uri})
+
+    if (savedFeedConfig) {
+      await removeSavedFeed(savedFeedConfig)
+    }
+
+    Toast.show(_(msg({message: 'List deleted', context: 'toast'})))
+    if (navigation.canGoBack()) {
+      navigation.goBack()
+    } else {
+      navigation.navigate('Home')
+    }
+  }
+
+  const onUnpinModList = async () => {
+    try {
+      if (!savedFeedConfig) return
+      await removeSavedFeed(savedFeedConfig)
+      Toast.show(_(msg`Unpinned list`))
+    } catch {
+      Toast.show(_(msg`Failed to unpin list`), {
+        type: 'error',
+      })
+    }
+  }
+
+  const onUnsubscribeMute = async () => {
+    try {
+      await muteList({uri: list.uri, mute: false})
+      Toast.show(_(msg({message: 'List unmuted', context: 'toast'})))
+      logger.metric(
+        'moderation:unsubscribedFromList',
+        {listType: 'mute'},
+        {statsig: true},
+      )
+    } catch {
+      Toast.show(
+        _(
+          msg`There was an issue. Please check your internet connection and try again.`,
+        ),
+      )
+    }
+  }
+
+  const onUnsubscribeBlock = async () => {
+    try {
+      await blockList({uri: list.uri, block: false})
+      Toast.show(_(msg({message: 'List unblocked', context: 'toast'})))
+      logger.metric(
+        'moderation:unsubscribedFromList',
+        {listType: 'block'},
+        {statsig: true},
+      )
+    } catch {
+      Toast.show(
+        _(
+          msg`There was an issue. Please check your internet connection and try again.`,
+        ),
+      )
+    }
+  }
+
+  return (
+    <>
+      <Menu.Root>
+        <Menu.Trigger label={_(msg`More options`)}>
+          {({props}) => (
+            <Button
+              label={props.accessibilityLabel}
+              testID="moreOptionsBtn"
+              size="small"
+              color="secondary"
+              shape="round"
+              {...props}>
+              <ButtonIcon icon={DotGridIcon} />
+            </Button>
+          )}
+        </Menu.Trigger>
+        <Menu.Outer>
+          <Menu.Group>
+            <Menu.Item
+              label={isWeb ? _(msg`Copy link to list`) : _(msg`Share via...`)}
+              onPress={onPressShare}>
+              <Menu.ItemText>
+                {isWeb ? (
+                  <Trans>Copy link to list</Trans>
+                ) : (
+                  <Trans>Share via...</Trans>
+                )}
+              </Menu.ItemText>
+              <Menu.ItemIcon
+                position="right"
+                icon={isWeb ? ChainLink : ShareIcon}
+              />
+            </Menu.Item>
+            {savedFeedConfig && (
+              <Menu.Item
+                label={_(msg`Remove from my feeds`)}
+                onPress={onRemoveFromSavedFeeds}>
+                <Menu.ItemText>
+                  <Trans>Remove from my feeds</Trans>
+                </Menu.ItemText>
+                <Menu.ItemIcon position="right" icon={TrashIcon} />
+              </Menu.Item>
+            )}
+          </Menu.Group>
+
+          <Menu.Divider />
+
+          {isOwner ? (
+            <Menu.Group>
+              <Menu.Item
+                label={_(msg`Edit list details`)}
+                onPress={onPressEdit}>
+                <Menu.ItemText>
+                  <Trans>Edit list details</Trans>
+                </Menu.ItemText>
+                <Menu.ItemIcon position="right" icon={PencilLineIcon} />
+              </Menu.Item>
+              <Menu.Item
+                label={_(msg`Delete list`)}
+                onPress={deleteListPromptControl.open}>
+                <Menu.ItemText>
+                  <Trans>Delete list</Trans>
+                </Menu.ItemText>
+                <Menu.ItemIcon position="right" icon={TrashIcon} />
+              </Menu.Item>
+            </Menu.Group>
+          ) : (
+            <Menu.Group>
+              <Menu.Item
+                label={_(msg`Report list`)}
+                onPress={reportDialogControl.open}>
+                <Menu.ItemText>
+                  <Trans>Report list</Trans>
+                </Menu.ItemText>
+                <Menu.ItemIcon position="right" icon={WarningIcon} />
+              </Menu.Item>
+            </Menu.Group>
+          )}
+
+          {isModList && isPinned && (
+            <>
+              <Menu.Divider />
+              <Menu.Group>
+                <Menu.Item
+                  label={_(msg`Unpin moderation list`)}
+                  onPress={onUnpinModList}>
+                  <Menu.ItemText>
+                    <Trans>Unpin moderation list</Trans>
+                  </Menu.ItemText>
+                  <Menu.ItemIcon icon={PinIcon} />
+                </Menu.Item>
+              </Menu.Group>
+            </>
+          )}
+
+          {isCurateList && (isBlocking || isMuting) && (
+            <>
+              <Menu.Divider />
+              <Menu.Group>
+                {isBlocking && (
+                  <Menu.Item
+                    label={_(msg`Unblock list`)}
+                    onPress={onUnsubscribeBlock}>
+                    <Menu.ItemText>
+                      <Trans>Unblock list</Trans>
+                    </Menu.ItemText>
+                    <Menu.ItemIcon icon={PersonCheckIcon} />
+                  </Menu.Item>
+                )}
+                {isMuting && (
+                  <Menu.Item
+                    label={_(msg`Unmute list`)}
+                    onPress={onUnsubscribeMute}>
+                    <Menu.ItemText>
+                      <Trans>Unmute list</Trans>
+                    </Menu.ItemText>
+                    <Menu.ItemIcon icon={UnmuteIcon} />
+                  </Menu.Item>
+                )}
+              </Menu.Group>
+            </>
+          )}
+        </Menu.Outer>
+      </Menu.Root>
+
+      <Prompt.Basic
+        control={deleteListPromptControl}
+        title={_(msg`Delete this list?`)}
+        description={_(
+          msg`If you delete this list, you won't be able to recover it.`,
+        )}
+        onConfirm={onPressDelete}
+        confirmButtonCta={_(msg`Delete`)}
+        confirmButtonColor="negative"
+      />
+
+      <ReportDialog
+        control={reportDialogControl}
+        subject={{
+          ...list,
+          $type: 'app.bsky.graph.defs#listView',
+        }}
+      />
+    </>
+  )
+}

src/screens/ProfileList/components/SubscribeMenu.tsx

···
+import {type AppBskyGraphDefs} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {logger} from '#/logger'
+import {useListBlockMutation, useListMuteMutation} from '#/state/queries/list'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {Mute_Stroke2_Corner0_Rounded as MuteIcon} from '#/components/icons/Mute'
+import {PersonX_Stroke2_Corner0_Rounded as PersonXIcon} from '#/components/icons/Person'
+import {Loader} from '#/components/Loader'
+import * as Menu from '#/components/Menu'
+import * as Prompt from '#/components/Prompt'
+import * as Toast from '#/components/Toast'
+
+export function SubscribeMenu({list}: {list: AppBskyGraphDefs.ListView}) {
+  const {_} = useLingui()
+  const subscribeMutePromptControl = Prompt.usePromptControl()
+  const subscribeBlockPromptControl = Prompt.usePromptControl()
+
+  const {mutateAsync: muteList, isPending: isMutePending} =
+    useListMuteMutation()
+  const {mutateAsync: blockList, isPending: isBlockPending} =
+    useListBlockMutation()
+
+  const isPending = isMutePending || isBlockPending
+
+  const onSubscribeMute = async () => {
+    try {
+      await muteList({uri: list.uri, mute: true})
+      Toast.show(_(msg({message: 'List muted', context: 'toast'})))
+      logger.metric(
+        'moderation:subscribedToList',
+        {listType: 'mute'},
+        {statsig: true},
+      )
+    } catch {
+      Toast.show(
+        _(
+          msg`There was an issue. Please check your internet connection and try again.`,
+        ),
+        {type: 'error'},
+      )
+    }
+  }
+
+  const onSubscribeBlock = async () => {
+    try {
+      await blockList({uri: list.uri, block: true})
+      Toast.show(_(msg({message: 'List blocked', context: 'toast'})))
+      logger.metric(
+        'moderation:subscribedToList',
+        {listType: 'block'},
+        {statsig: true},
+      )
+    } catch {
+      Toast.show(
+        _(
+          msg`There was an issue. Please check your internet connection and try again.`,
+        ),
+        {type: 'error'},
+      )
+    }
+  }
+
+  return (
+    <>
+      <Menu.Root>
+        <Menu.Trigger label={_(msg`Subscribe to this list`)}>
+          {({props}) => (
+            <Button
+              label={props.accessibilityLabel}
+              testID="subscribeBtn"
+              size="small"
+              color="primary_subtle"
+              style={[a.rounded_full]}
+              disabled={isPending}
+              {...props}>
+              {isPending && <ButtonIcon icon={Loader} />}
+              <ButtonText>
+                <Trans>Subscribe</Trans>
+              </ButtonText>
+            </Button>
+          )}
+        </Menu.Trigger>
+        <Menu.Outer showCancel>
+          <Menu.Group>
+            <Menu.Item
+              label={_(msg`Mute accounts`)}
+              onPress={subscribeMutePromptControl.open}>
+              <Menu.ItemText>
+                <Trans>Mute accounts</Trans>
+              </Menu.ItemText>
+              <Menu.ItemIcon position="right" icon={MuteIcon} />
+            </Menu.Item>
+            <Menu.Item
+              label={_(msg`Block accounts`)}
+              onPress={subscribeBlockPromptControl.open}>
+              <Menu.ItemText>
+                <Trans>Block accounts</Trans>
+              </Menu.ItemText>
+              <Menu.ItemIcon position="right" icon={PersonXIcon} />
+            </Menu.Item>
+          </Menu.Group>
+        </Menu.Outer>
+      </Menu.Root>
+
+      <Prompt.Basic
+        control={subscribeMutePromptControl}
+        title={_(msg`Mute these accounts?`)}
+        description={_(
+          msg`Muting is private. Muted accounts can interact with you, but you will not see their posts or receive notifications from them.`,
+        )}
+        onConfirm={onSubscribeMute}
+        confirmButtonCta={_(msg`Mute list`)}
+      />
+
+      <Prompt.Basic
+        control={subscribeBlockPromptControl}
+        title={_(msg`Block these accounts?`)}
+        description={_(
+          msg`Blocking is public. Blocked accounts cannot reply in your threads, mention you, or otherwise interact with you.`,
+        )}
+        onConfirm={onSubscribeBlock}
+        confirmButtonCta={_(msg`Block list`)}
+        confirmButtonColor="negative"
+      />
+    </>
+  )
+}

src/screens/ProfileList/index.tsx

···
+import {useCallback, useMemo, useRef} from 'react'
+import {View} from 'react-native'
+import {useAnimatedRef} from 'react-native-reanimated'
+import {
+  AppBskyGraphDefs,
+  AtUri,
+  moderateUserList,
+  type ModerationOpts,
+} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useFocusEffect, useIsFocused} from '@react-navigation/native'
+import {useQueryClient} from '@tanstack/react-query'
+
+import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
+import {useSetTitle} from '#/lib/hooks/useSetTitle'
+import {ComposeIcon2} from '#/lib/icons'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
+import {cleanError} from '#/lib/strings/errors'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useListQuery} from '#/state/queries/list'
+import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
+import {
+  usePreferencesQuery,
+  type UsePreferencesQueryResponse,
+} from '#/state/queries/preferences'
+import {useResolveUriQuery} from '#/state/queries/resolve-uri'
+import {truncateAndInvalidate} from '#/state/queries/util'
+import {useSession} from '#/state/session'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {PagerWithHeader} from '#/view/com/pager/PagerWithHeader'
+import {FAB} from '#/view/com/util/fab/FAB'
+import {type ListRef} from '#/view/com/util/List'
+import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen'
+import {atoms as a, platform} from '#/alf'
+import {useDialogControl} from '#/components/Dialog'
+import {ListAddRemoveUsersDialog} from '#/components/dialogs/lists/ListAddRemoveUsersDialog'
+import * as Layout from '#/components/Layout'
+import {Loader} from '#/components/Loader'
+import * as Hider from '#/components/moderation/Hider'
+import {AboutSection} from './AboutSection'
+import {ErrorScreen} from './components/ErrorScreen'
+import {Header} from './components/Header'
+import {FeedSection} from './FeedSection'
+
+interface SectionRef {
+  scrollToTop: () => void
+}
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileList'>
+export function ProfileListScreen(props: Props) {
+  return (
+    <Layout.Screen testID="profileListScreen">
+      <ProfileListScreenInner {...props} />
+    </Layout.Screen>
+  )
+}
+
+function ProfileListScreenInner(props: Props) {
+  const {_} = useLingui()
+  const {name: handleOrDid, rkey} = props.route.params
+  const {data: resolvedUri, error: resolveError} = useResolveUriQuery(
+    AtUri.make(handleOrDid, 'app.bsky.graph.list', rkey).toString(),
+  )
+  const {data: preferences} = usePreferencesQuery()
+  const {data: list, error: listError} = useListQuery(resolvedUri?.uri)
+  const moderationOpts = useModerationOpts()
+
+  if (resolveError) {
+    return (
+      <>
+        <Layout.Header.Outer>
+          <Layout.Header.BackButton />
+          <Layout.Header.Content>
+            <Layout.Header.TitleText>
+              <Trans>Could not load list</Trans>
+            </Layout.Header.TitleText>
+          </Layout.Header.Content>
+          <Layout.Header.Slot />
+        </Layout.Header.Outer>
+        <Layout.Content centerContent>
+          <ErrorScreen
+            error={_(
+              msg`We're sorry, but we were unable to resolve this list. If this persists, please contact the list creator, @${handleOrDid}.`,
+            )}
+          />
+        </Layout.Content>
+      </>
+    )
+  }
+  if (listError) {
+    return (
+      <>
+        <Layout.Header.Outer>
+          <Layout.Header.BackButton />
+          <Layout.Header.Content>
+            <Layout.Header.TitleText>
+              <Trans>Could not load list</Trans>
+            </Layout.Header.TitleText>
+          </Layout.Header.Content>
+          <Layout.Header.Slot />
+        </Layout.Header.Outer>
+        <Layout.Content centerContent>
+          <ErrorScreen error={cleanError(listError)} />
+        </Layout.Content>
+      </>
+    )
+  }
+
+  return resolvedUri && list && moderationOpts && preferences ? (
+    <ProfileListScreenLoaded
+      {...props}
+      uri={resolvedUri.uri}
+      list={list}
+      moderationOpts={moderationOpts}
+      preferences={preferences}
+    />
+  ) : (
+    <>
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content />
+        <Layout.Header.Slot />
+      </Layout.Header.Outer>
+      <Layout.Content
+        centerContent
+        contentContainerStyle={platform({
+          web: [a.mx_auto],
+          native: [a.align_center],
+        })}>
+        <Loader size="2xl" />
+      </Layout.Content>
+    </>
+  )
+}
+
+function ProfileListScreenLoaded({
+  route,
+  uri,
+  list,
+  moderationOpts,
+  preferences,
+}: Props & {
+  uri: string
+  list: AppBskyGraphDefs.ListView
+  moderationOpts: ModerationOpts
+  preferences: UsePreferencesQueryResponse
+}) {
+  const {_} = useLingui()
+  const queryClient = useQueryClient()
+  const {openComposer} = useOpenComposer()
+  const setMinimalShellMode = useSetMinimalShellMode()
+  const {currentAccount} = useSession()
+  const {rkey} = route.params
+  const feedSectionRef = useRef<SectionRef>(null)
+  const aboutSectionRef = useRef<SectionRef>(null)
+  const isCurateList = list.purpose === AppBskyGraphDefs.CURATELIST
+  const isScreenFocused = useIsFocused()
+  const isHidden = list.labels?.findIndex(l => l.val === '!hide') !== -1
+  const isOwner = currentAccount?.did === list.creator.did
+  const scrollElRef = useAnimatedRef()
+  const addUserDialogControl = useDialogControl()
+  const sectionTitlesCurate = [_(msg`Posts`), _(msg`People`)]
+
+  const moderation = useMemo(() => {
+    return moderateUserList(list, moderationOpts)
+  }, [list, moderationOpts])
+
+  useSetTitle(isHidden ? _(msg`List Hidden`) : list.name)
+
+  useFocusEffect(
+    useCallback(() => {
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
+  )
+
+  const onChangeMembers = () => {
+    if (isCurateList) {
+      truncateAndInvalidate(queryClient, FEED_RQKEY(`list|${list.uri}`))
+    }
+  }
+
+  const onCurrentPageSelected = useCallback(
+    (index: number) => {
+      if (index === 0) {
+        feedSectionRef.current?.scrollToTop()
+      } else if (index === 1) {
+        aboutSectionRef.current?.scrollToTop()
+      }
+    },
+    [feedSectionRef],
+  )
+
+  const renderHeader = useCallback(() => {
+    return <Header rkey={rkey} list={list} preferences={preferences} />
+  }, [rkey, list, preferences])
+
+  if (isCurateList) {
+    return (
+      <Hider.Outer modui={moderation.ui('contentView')} allowOverride={isOwner}>
+        <Hider.Mask>
+          <ListHiddenScreen list={list} preferences={preferences} />
+        </Hider.Mask>
+        <Hider.Content>
+          <View style={[a.util_screen_outer]}>
+            <PagerWithHeader
+              items={sectionTitlesCurate}
+              isHeaderReady={true}
+              renderHeader={renderHeader}
+              onCurrentPageSelected={onCurrentPageSelected}>
+              {({headerHeight, scrollElRef, isFocused}) => (
+                <FeedSection
+                  ref={feedSectionRef}
+                  feed={`list|${uri}`}
+                  scrollElRef={scrollElRef as ListRef}
+                  headerHeight={headerHeight}
+                  isFocused={isScreenFocused && isFocused}
+                  isOwner={isOwner}
+                  onPressAddUser={addUserDialogControl.open}
+                />
+              )}
+              {({headerHeight, scrollElRef}) => (
+                <AboutSection
+                  ref={aboutSectionRef}
+                  scrollElRef={scrollElRef as ListRef}
+                  list={list}
+                  onPressAddUser={addUserDialogControl.open}
+                  headerHeight={headerHeight}
+                />
+              )}
+            </PagerWithHeader>
+            <FAB
+              testID="composeFAB"
+              onPress={() => openComposer({})}
+              icon={
+                <ComposeIcon2
+                  strokeWidth={1.5}
+                  size={29}
+                  style={{color: 'white'}}
+                />
+              }
+              accessibilityRole="button"
+              accessibilityLabel={_(msg`New post`)}
+              accessibilityHint=""
+            />
+          </View>
+          <ListAddRemoveUsersDialog
+            control={addUserDialogControl}
+            list={list}
+            onChange={onChangeMembers}
+          />
+        </Hider.Content>
+      </Hider.Outer>
+    )
+  }
+  return (
+    <Hider.Outer modui={moderation.ui('contentView')} allowOverride={isOwner}>
+      <Hider.Mask>
+        <ListHiddenScreen list={list} preferences={preferences} />
+      </Hider.Mask>
+      <Hider.Content>
+        <View style={[a.util_screen_outer]}>
+          <Layout.Center>{renderHeader()}</Layout.Center>
+          <AboutSection
+            list={list}
+            scrollElRef={scrollElRef as ListRef}
+            onPressAddUser={addUserDialogControl.open}
+            headerHeight={0}
+          />
+          <FAB
+            testID="composeFAB"
+            onPress={() => openComposer({})}
+            icon={
+              <ComposeIcon2
+                strokeWidth={1.5}
+                size={29}
+                style={{color: 'white'}}
+              />
+            }
+            accessibilityRole="button"
+            accessibilityLabel={_(msg`New post`)}
+            accessibilityHint=""
+          />
+        </View>
+        <ListAddRemoveUsersDialog
+          control={addUserDialogControl}
+          list={list}
+          onChange={onChangeMembers}
+        />
+      </Hider.Content>
+    </Hider.Outer>
+  )
+}

src/screens/SavedFeeds.tsx

···
+import {useCallback, useState} from 'react'
+import {View} from 'react-native'
+import Animated, {LinearTransition} from 'react-native-reanimated'
+import {type AppBskyActorDefs} from '@atproto/api'
+import {TID} from '@atproto/common-web'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useFocusEffect} from '@react-navigation/native'
+import {useNavigation} from '@react-navigation/native'
+import {type NativeStackScreenProps} from '@react-navigation/native-stack'
+
+import {RECOMMENDED_SAVED_FEEDS, TIMELINE_SAVED_FEED} from '#/lib/constants'
+import {useHaptics} from '#/lib/haptics'
+import {
+  type CommonNavigatorParams,
+  type NavigationProp,
+} from '#/lib/routes/types'
+import {logger} from '#/logger'
+import {
+  useOverwriteSavedFeedsMutation,
+  usePreferencesQuery,
+} from '#/state/queries/preferences'
+import {type UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
+import {useSetMinimalShellMode} from '#/state/shell'
+import {FeedSourceCard} from '#/view/com/feeds/FeedSourceCard'
+import * as Toast from '#/view/com/util/Toast'
+import {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed'
+import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Admonition} from '#/components/Admonition'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {
+  ArrowBottom_Stroke2_Corner0_Rounded as ArrowDownIcon,
+  ArrowTop_Stroke2_Corner0_Rounded as ArrowUpIcon,
+} from '#/components/icons/Arrow'
+import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
+import {FloppyDisk_Stroke2_Corner0_Rounded as SaveIcon} from '#/components/icons/FloppyDisk'
+import {Pin_Filled_Corner0_Rounded as PinIcon} from '#/components/icons/Pin'
+import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
+import * as Layout from '#/components/Layout'
+import {InlineLinkText} from '#/components/Link'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
+export function SavedFeeds({}: Props) {
+  const {data: preferences} = usePreferencesQuery()
+  if (!preferences) {
+    return <View />
+  }
+  return <SavedFeedsInner preferences={preferences} />
+}
+
+function SavedFeedsInner({
+  preferences,
+}: {
+  preferences: UsePreferencesQueryResponse
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
+  const setMinimalShellMode = useSetMinimalShellMode()
+  const {mutateAsync: overwriteSavedFeeds, isPending: isOverwritePending} =
+    useOverwriteSavedFeedsMutation()
+  const navigation = useNavigation<NavigationProp>()
+
+  /*
+   * Use optimistic data if exists and no error, otherwise fallback to remote
+   * data
+   */
+  const [currentFeeds, setCurrentFeeds] = useState(
+    () => preferences.savedFeeds || [],
+  )
+  const hasUnsavedChanges = currentFeeds !== preferences.savedFeeds
+  const pinnedFeeds = currentFeeds.filter(f => f.pinned)
+  const unpinnedFeeds = currentFeeds.filter(f => !f.pinned)
+  const noSavedFeedsOfAnyType = pinnedFeeds.length + unpinnedFeeds.length === 0
+  const noFollowingFeed =
+    currentFeeds.every(f => f.type !== 'timeline') && !noSavedFeedsOfAnyType
+
+  useFocusEffect(
+    useCallback(() => {
+      setMinimalShellMode(false)
+    }, [setMinimalShellMode]),
+  )
+
+  const onSaveChanges = async () => {
+    try {
+      await overwriteSavedFeeds(currentFeeds)
+      Toast.show(_(msg({message: 'Feeds updated!', context: 'toast'})))
+      if (navigation.canGoBack()) {
+        navigation.goBack()
+      } else {
+        navigation.navigate('Feeds')
+      }
+    } catch (e) {
+      Toast.show(_(msg`There was an issue contacting the server`), 'xmark')
+      logger.error('Failed to toggle pinned feed', {message: e})
+    }
+  }
+
+  return (
+    <Layout.Screen>
+      <Layout.Header.Outer>
+        <Layout.Header.BackButton />
+        <Layout.Header.Content align="left">
+          <Layout.Header.TitleText>
+            <Trans>Feeds</Trans>
+          </Layout.Header.TitleText>
+        </Layout.Header.Content>
+        <Button
+          testID="saveChangesBtn"
+          size="small"
+          color={hasUnsavedChanges ? 'primary' : 'secondary'}
+          onPress={onSaveChanges}
+          label={_(msg`Save changes`)}
+          disabled={isOverwritePending || !hasUnsavedChanges}>
+          <ButtonIcon icon={isOverwritePending ? Loader : SaveIcon} />
+          <ButtonText>
+            {gtMobile ? <Trans>Save changes</Trans> : <Trans>Save</Trans>}
+          </ButtonText>
+        </Button>
+      </Layout.Header.Outer>
+
+      <Layout.Content>
+        {noSavedFeedsOfAnyType && (
+          <View style={[t.atoms.border_contrast_low, a.border_b]}>
+            <NoSavedFeedsOfAnyType
+              onAddRecommendedFeeds={() =>
+                setCurrentFeeds(
+                  RECOMMENDED_SAVED_FEEDS.map(f => ({
+                    ...f,
+                    id: TID.nextStr(),
+                  })),
+                )
+              }
+            />
+          </View>
+        )}
+
+        <SectionHeaderText>
+          <Trans>Pinned Feeds</Trans>
+        </SectionHeaderText>
+
+        {preferences ? (
+          !pinnedFeeds.length ? (
+            <View style={[a.flex_1, a.p_lg]}>
+              <Admonition type="info">
+                <Trans>You don't have any pinned feeds.</Trans>
+              </Admonition>
+            </View>
+          ) : (
+            pinnedFeeds.map(f => (
+              <ListItem
+                key={f.id}
+                feed={f}
+                isPinned
+                currentFeeds={currentFeeds}
+                setCurrentFeeds={setCurrentFeeds}
+                preferences={preferences}
+              />
+            ))
+          )
+        ) : (
+          <View style={[a.w_full, a.py_2xl, a.align_center]}>
+            <Loader size="xl" />
+          </View>
+        )}
+
+        {noFollowingFeed && (
+          <View style={[t.atoms.border_contrast_low, a.border_b]}>
+            <NoFollowingFeed
+              onAddFeed={() =>
+                setCurrentFeeds(feeds => [
+                  ...feeds,
+                  {...TIMELINE_SAVED_FEED, id: TID.next().toString()},
+                ])
+              }
+            />
+          </View>
+        )}
+
+        <SectionHeaderText>
+          <Trans>Saved Feeds</Trans>
+        </SectionHeaderText>
+
+        {preferences ? (
+          !unpinnedFeeds.length ? (
+            <View style={[a.flex_1, a.p_lg]}>
+              <Admonition type="info">
+                <Trans>You don't have any saved feeds.</Trans>
+              </Admonition>
+            </View>
+          ) : (
+            unpinnedFeeds.map(f => (
+              <ListItem
+                key={f.id}
+                feed={f}
+                isPinned={false}
+                currentFeeds={currentFeeds}
+                setCurrentFeeds={setCurrentFeeds}
+                preferences={preferences}
+              />
+            ))
+          )
+        ) : (
+          <View style={[a.w_full, a.py_2xl, a.align_center]}>
+            <Loader size="xl" />
+          </View>
+        )}
+
+        <View style={[a.px_lg, a.py_xl]}>
+          <Text
+            style={[a.text_sm, t.atoms.text_contrast_medium, a.leading_snug]}>
+            <Trans>
+              Feeds are custom algorithms that users build with a little coding
+              expertise.{' '}
+              <InlineLinkText
+                to="https://github.com/bluesky-social/feed-generator"
+                label={_(msg`See this guide`)}
+                disableMismatchWarning
+                style={[a.leading_snug]}>
+                See this guide
+              </InlineLinkText>{' '}
+              for more information.
+            </Trans>
+          </Text>
+        </View>
+      </Layout.Content>
+    </Layout.Screen>
+  )
+}
+
+function ListItem({
+  feed,
+  isPinned,
+  currentFeeds,
+  setCurrentFeeds,
+}: {
+  feed: AppBskyActorDefs.SavedFeed
+  isPinned: boolean
+  currentFeeds: AppBskyActorDefs.SavedFeed[]
+  setCurrentFeeds: React.Dispatch<AppBskyActorDefs.SavedFeed[]>
+  preferences: UsePreferencesQueryResponse
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const playHaptic = useHaptics()
+  const feedUri = feed.value
+
+  const onTogglePinned = async () => {
+    playHaptic()
+    setCurrentFeeds(
+      currentFeeds.map(f =>
+        f.id === feed.id ? {...feed, pinned: !feed.pinned} : f,
+      ),
+    )
+  }
+
+  const onPressUp = async () => {
+    if (!isPinned) return
+
+    const nextFeeds = currentFeeds.slice()
+    const ids = currentFeeds.map(f => f.id)
+    const index = ids.indexOf(feed.id)
+    const nextIndex = index - 1
+
+    if (index === -1 || index === 0) return
+    ;[nextFeeds[index], nextFeeds[nextIndex]] = [
+      nextFeeds[nextIndex],
+      nextFeeds[index],
+    ]
+
+    setCurrentFeeds(nextFeeds)
+  }
+
+  const onPressDown = async () => {
+    if (!isPinned) return
+
+    const nextFeeds = currentFeeds.slice()
+    const ids = currentFeeds.map(f => f.id)
+    const index = ids.indexOf(feed.id)
+    const nextIndex = index + 1
+
+    if (index === -1 || index >= nextFeeds.filter(f => f.pinned).length - 1)
+      return
+    ;[nextFeeds[index], nextFeeds[nextIndex]] = [
+      nextFeeds[nextIndex],
+      nextFeeds[index],
+    ]
+
+    setCurrentFeeds(nextFeeds)
+  }
+
+  const onPressRemove = async () => {
+    playHaptic()
+    setCurrentFeeds(currentFeeds.filter(f => f.id !== feed.id))
+  }
+
+  return (
+    <Animated.View
+      style={[a.flex_row, a.border_b, t.atoms.border_contrast_low]}
+      layout={LinearTransition.duration(100)}>
+      {feed.type === 'timeline' ? (
+        <FollowingFeedCard />
+      ) : (
+        <FeedSourceCard
+          key={feedUri}
+          feedUri={feedUri}
+          style={[isPinned && a.pr_sm]}
+          showMinimalPlaceholder
+          hideTopBorder={true}
+        />
+      )}
+      <View style={[a.pr_lg, a.flex_row, a.align_center, a.gap_sm]}>
+        {isPinned ? (
+          <>
+            <Button
+              testID={`feed-${feed.type}-moveUp`}
+              label={_(msg`Move feed up`)}
+              onPress={onPressUp}
+              size="small"
+              color="secondary"
+              shape="square">
+              <ButtonIcon icon={ArrowUpIcon} />
+            </Button>
+            <Button
+              testID={`feed-${feed.type}-moveDown`}
+              label={_(msg`Move feed down`)}
+              onPress={onPressDown}
+              size="small"
+              color="secondary"
+              shape="square">
+              <ButtonIcon icon={ArrowDownIcon} />
+            </Button>
+          </>
+        ) : (
+          <Button
+            testID={`feed-${feedUri}-toggleSave`}
+            label={_(msg`Remove from my feeds`)}
+            onPress={onPressRemove}
+            size="small"
+            color="secondary"
+            variant="ghost"
+            shape="square">
+            <ButtonIcon icon={TrashIcon} />
+          </Button>
+        )}
+        <Button
+          testID={`feed-${feed.type}-togglePin`}
+          label={isPinned ? _(msg`Unpin feed`) : _(msg`Pin feed`)}
+          onPress={onTogglePinned}
+          size="small"
+          color={isPinned ? 'primary_subtle' : 'secondary'}
+          shape="square">
+          <ButtonIcon icon={PinIcon} />
+        </Button>
+      </View>
+    </Animated.View>
+  )
+}
+
+function SectionHeaderText({children}: {children: React.ReactNode}) {
+  const t = useTheme()
+  // eslint-disable-next-line bsky-internal/avoid-unwrapped-text
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.flex_1,
+        a.px_lg,
+        a.pt_2xl,
+        a.pb_md,
+        a.border_b,
+        t.atoms.border_contrast_low,
+      ]}>
+      <Text style={[a.text_xl, a.font_heavy, a.leading_snug]}>{children}</Text>
+    </View>
+  )
+}
+
+function FollowingFeedCard() {
+  const t = useTheme()
+  return (
+    <View style={[a.flex_row, a.align_center, a.flex_1, a.p_lg]}>
+      <View
+        style={[
+          a.align_center,
+          a.justify_center,
+          a.rounded_sm,
+          a.mr_md,
+          {
+            width: 36,
+            height: 36,
+            backgroundColor: t.palette.primary_500,
+          },
+        ]}>
+        <FilterTimeline
+          style={[
+            {
+              width: 22,
+              height: 22,
+            },
+          ]}
+          fill={t.palette.white}
+        />
+      </View>
+      <View style={[a.flex_1, a.flex_row, a.gap_sm, a.align_center]}>
+        <Text style={[a.text_sm, a.font_bold, a.leading_snug]}>
+          <Trans context="feed-name">Following</Trans>
+        </Text>
+      </View>
+    </View>
+  )
+}

src/screens/Settings/AppIconSettings/AppIconImage.tsx

···
 import {Image} from 'expo-image'
 
-import {AppIconSet} from '#/screens/Settings/AppIconSettings/types'
+import {type AppIconSet} from '#/screens/Settings/AppIconSettings/types'
 import {atoms as a, platform, useTheme} from '#/alf'
 
 export function AppIconImage({

src/screens/Settings/components/AddAppPasswordDialog.tsx

···
   SlideInRight,
   SlideOutLeft,
 } from 'react-native-reanimated'
-import {ComAtprotoServerCreateAppPassword} from '@atproto/api'
+import {type ComAtprotoServerCreateAppPassword} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useMutation} from '@tanstack/react-query'

src/screens/Settings/components/CopyButton.tsx

···
 import {useCallback, useEffect, useState} from 'react'
-import {GestureResponderEvent, View} from 'react-native'
+import {type GestureResponderEvent, View} from 'react-native'
 import Animated, {
   FadeOutUp,
   useReducedMotion,
···
 import {Trans} from '@lingui/macro'
 
 import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonProps} from '#/components/Button'
+import {Button, type ButtonProps} from '#/components/Button'
 import {Text} from '#/components/Typography'
 
 export function CopyButton({

src/screens/Settings/components/DeactivateAccountDialog.tsx

···
 import {useAgent, useSessionApi} from '#/state/session'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {DialogOuterProps} from '#/components/Dialog'
+import {type DialogOuterProps} from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {Loader} from '#/components/Loader'

src/screens/Settings/components/ExportCarDialog.tsx

···
-import React from 'react'
+import {useCallback, useState} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
···
 export function ExportCarDialog({
   control,
 }: {
-  control: Dialog.DialogOuterProps['control']
+  control: Dialog.DialogControlProps
 }) {
   const {_} = useLingui()
   const t = useTheme()
   const agent = useAgent()
-  const [loading, setLoading] = React.useState(false)
+  const [loading, setLoading] = useState(false)
 
-  const download = React.useCallback(async () => {
+  const download = useCallback(async () => {
     if (!agent.session) {
       return // shouldnt ever happen
     }
···
   }, [_, control, agent])
 
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <Dialog.ScrollableInner
         accessibilityDescribedBy="dialog-description"
···
           </Text>
           <Text
             nativeID="dialog-description"
-            style={[a.text_sm, a.leading_normal, t.atoms.text_contrast_high]}>
+            style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_high]}>
             <Trans>
               Your account repository, containing all public data records, can
               be downloaded as a "CAR" file. This file does not include media
···
           </Text>
 
           <Button
-            variant="solid"
             color="primary"
             size="large"
             label={_(msg`Download CAR file`)}

src/screens/Settings/components/PwiOptOut.tsx

···
 import React from 'react'
 import {View} from 'react-native'
-import {$Typed, ComAtprotoLabelDefs} from '@atproto/api'
+import {type $Typed, ComAtprotoLabelDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/screens/Signup/StepCaptcha/CaptchaWebView.tsx

···
   onError: (error: unknown) => void
 }) {
   const startedAt = useRef(Date.now())
-  const successTo = useRef<NodeJS.Timeout>()
+  const successTo = useRef<NodeJS.Timeout>(undefined)
 
   useEffect(() => {
     return () => {

src/screens/Signup/StepInfo/Policies.tsx

···
     )
   }
 
-  let els: ReactElement
+  let els: ReactElement<any>
   if (tos && pp) {
     els = (
       <Trans>

src/screens/Signup/StepInfo/index.tsx

···
 
   const [hasWarnedEmail, setHasWarnedEmail] = React.useState<boolean>(false)
 
-  const tldtsRef = React.useRef<typeof tldts>()
+  const tldtsRef = React.useRef<typeof tldts>(undefined)
   React.useEffect(() => {
     // @ts-expect-error - valid path
     import('tldts/dist/index.cjs.min.js').then(tldts => {

src/screens/StarterPack/Wizard/StepFeeds.tsx

···
 import {useState} from 'react'
-import {ListRenderItemInfo, View} from 'react-native'
+import {type ListRenderItemInfo, View} from 'react-native'
 import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
-import {AppBskyFeedDefs, ModerationOpts} from '@atproto/api'
+import {type AppBskyFeedDefs, type ModerationOpts} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 
 import {DISCOVER_FEED_URI} from '#/lib/constants'

src/screens/StarterPack/Wizard/StepProfiles.tsx

···
 import {useState} from 'react'
-import {ListRenderItemInfo, View} from 'react-native'
+import {type ListRenderItemInfo, View} from 'react-native'
 import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
-import {AppBskyActorDefs, ModerationOpts} from '@atproto/api'
+import {type AppBskyActorDefs, type ModerationOpts} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 
 import {isNative} from '#/platform/detection'
···
 import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
 import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardListCard'
 import {Text} from '#/components/Typography'
-import * as bsky from '#/types/bsky'
+import type * as bsky from '#/types/bsky'
 
 function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic) {
   return item?.did ?? ''

src/screens/VideoFeed/components/Header.tsx

···
 import {useCallback} from 'react'
-import {GestureResponderEvent, View} from 'react-native'
+import {type GestureResponderEvent, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
 import {HITSLOP_30} from '#/lib/constants'
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {useFeedSourceInfoQuery} from '#/state/queries/feed'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {VideoFeedSourceContext} from '#/screens/VideoFeed/types'
+import {type VideoFeedSourceContext} from '#/screens/VideoFeed/types'
 import {atoms as a, useBreakpoints} from '#/alf'
-import {Button, ButtonProps} from '#/components/Button'
+import {Button, type ButtonProps} from '#/components/Button'
 import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
 import * as Layout from '#/components/Layout'
 import {BUTTON_VISUAL_ALIGNMENT_OFFSET} from '#/components/Layout/const'

src/screens/VideoFeed/types.ts

···
-import {AuthorFilter} from '#/state/queries/post-feed'
+import {type AuthorFilter} from '#/state/queries/post-feed'
 
 /**
  * Kind of like `FeedDescriptor` but not

src/state/messages/convo/util.ts

···
 import {
-  ConvoState,
-  ConvoStateBackgrounded,
-  ConvoStateDisabled,
-  ConvoStateReady,
-  ConvoStateSuspended,
+  type ConvoState,
+  type ConvoStateBackgrounded,
+  type ConvoStateDisabled,
+  type ConvoStateReady,
+  type ConvoStateSuspended,
   ConvoStatus,
 } from './types'
 

src/state/messages/events/types.ts

···
-import {BskyAgent, ChatBskyConvoGetLog} from '@atproto/api'
+import {type BskyAgent, type ChatBskyConvoGetLog} from '@atproto/api'
 
 export type MessagesEventBusParams = {
   agent: BskyAgent

src/state/messages/index.tsx

···
-import React from 'react'
+import type React from 'react'
 
 import {CurrentConvoIdProvider} from '#/state/messages/current-convo-id'
 import {MessagesEventBusProvider} from '#/state/messages/events'

src/state/persisted/index.web.ts

···
 import {logger} from '#/logger'
 import {
   defaults,
-  Schema,
+  type Schema,
   tryParse,
   tryStringify,
 } from '#/state/persisted/schema'
-import {PersistedApi} from './types'
+import {type PersistedApi} from './types'
 import {normalizeData} from './util'
 
 export type {PersistedAccount, Schema} from '#/state/persisted/schema'

src/state/persisted/types.ts

···
-import type {Schema} from './schema'
+import {type Schema} from './schema'
 
 export type PersistedApi = {
   init(): Promise<void>

src/state/persisted/util.ts

···
 
 import {dedupArray} from '#/lib/functions'
 import {logger} from '#/logger'
-import {Schema} from '#/state/persisted/schema'
+import {type Schema} from '#/state/persisted/schema'
 
 export function normalizeData(data: Schema) {
   const next = {...data}

src/state/queries/actor-autocomplete.ts

···
 import React from 'react'
-import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
+import {
+  type AppBskyActorDefs,
+  moderateProfile,
+  type ModerationOpts,
+} from '@atproto/api'
 import {keepPreviousData, useQuery, useQueryClient} from '@tanstack/react-query'
 
 import {isJustAMute, moduiContainsHideableOffense} from '#/lib/moderation'

src/state/queries/app-passwords.ts

···
-import {ComAtprotoServerCreateAppPassword} from '@atproto/api'
+import {type ComAtprotoServerCreateAppPassword} from '@atproto/api'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 
 import {STALE} from '#/state/queries'

src/state/queries/invites.ts

···
-import {ComAtprotoServerDefs} from '@atproto/api'
+import {type ComAtprotoServerDefs} from '@atproto/api'
 import {useQuery} from '@tanstack/react-query'
 
 import {cleanError} from '#/lib/strings/errors'

src/state/queries/known-followers.ts

···
-import {AppBskyActorDefs, AppBskyGraphGetKnownFollowers} from '@atproto/api'
 import {
-  InfiniteData,
-  QueryClient,
-  QueryKey,
+  type AppBskyActorDefs,
+  type AppBskyGraphGetKnownFollowers,
+} from '@atproto/api'
+import {
+  type InfiniteData,
+  type QueryClient,
+  type QueryKey,
   useInfiniteQuery,
 } from '@tanstack/react-query'
 

src/state/queries/my-blocked-accounts.ts

···
-import {AppBskyActorDefs, AppBskyGraphGetBlocks} from '@atproto/api'
+import {type AppBskyActorDefs, type AppBskyGraphGetBlocks} from '@atproto/api'
 import {
-  InfiniteData,
-  QueryClient,
-  QueryKey,
+  type InfiniteData,
+  type QueryClient,
+  type QueryKey,
   useInfiniteQuery,
 } from '@tanstack/react-query'
 

src/state/queries/my-lists.ts

···
-import {AppBskyGraphDefs} from '@atproto/api'
-import {QueryClient, useQuery} from '@tanstack/react-query'
+import {type AppBskyGraphDefs} from '@atproto/api'
+import {type QueryClient, useQuery} from '@tanstack/react-query'
 
 import {accumulate} from '#/lib/async/accumulate'
 import {STALE} from '#/state/queries'

src/state/queries/my-muted-accounts.ts

···
-import {AppBskyActorDefs, AppBskyGraphGetMutes} from '@atproto/api'
+import {type AppBskyActorDefs, type AppBskyGraphGetMutes} from '@atproto/api'
 import {
-  InfiniteData,
-  QueryClient,
-  QueryKey,
+  type InfiniteData,
+  type QueryClient,
+  type QueryKey,
   useInfiniteQuery,
 } from '@tanstack/react-query'
 

src/state/queries/nuxs/types.ts

···
-import {AppBskyActorDefs} from '@atproto/api'
+import {type AppBskyActorDefs} from '@atproto/api'
 
 export type Data = Record<string, unknown> | undefined
 

src/state/queries/nuxs/util.ts

···
-import {AppBskyActorDefs, nuxSchema} from '@atproto/api'
+import {type AppBskyActorDefs, nuxSchema} from '@atproto/api'
 
 import {
-  AppNux,
-  Nux,
+  type AppNux,
+  type Nux,
   nuxNames,
   NuxSchemas,
 } from '#/state/queries/nuxs/definitions'

src/state/queries/post-interaction-settings.ts

···
-import {AppBskyActorDefs} from '@atproto/api'
+import {type AppBskyActorDefs} from '@atproto/api'
 import {useMutation, useQueryClient} from '@tanstack/react-query'
 
 import {preferencesQueryKey} from '#/state/queries/preferences'

src/state/queries/post-liked-by.ts

···
-import {AppBskyActorDefs, AppBskyFeedGetLikes} from '@atproto/api'
+import {type AppBskyActorDefs, type AppBskyFeedGetLikes} from '@atproto/api'
 import {
-  InfiniteData,
-  QueryClient,
-  QueryKey,
+  type InfiniteData,
+  type QueryClient,
+  type QueryKey,
   useInfiniteQuery,
 } from '@tanstack/react-query'
 

src/state/queries/post-quotes.ts

···
 import {
-  AppBskyActorDefs,
+  type AppBskyActorDefs,
   AppBskyEmbedRecord,
-  AppBskyFeedDefs,
-  AppBskyFeedGetQuotes,
+  type AppBskyFeedDefs,
+  type AppBskyFeedGetQuotes,
   AtUri,
 } from '@atproto/api'
 import {
-  InfiniteData,
-  QueryClient,
-  QueryKey,
+  type InfiniteData,
+  type QueryClient,
+  type QueryKey,
   useInfiniteQuery,
 } from '@tanstack/react-query'
 

src/state/queries/post-reposted-by.ts

···
-import {AppBskyActorDefs, AppBskyFeedGetRepostedBy} from '@atproto/api'
 import {
-  InfiniteData,
-  QueryClient,
-  QueryKey,
+  type AppBskyActorDefs,
+  type AppBskyFeedGetRepostedBy,
+} from '@atproto/api'
+import {
+  type InfiniteData,
+  type QueryClient,
+  type QueryKey,
   useInfiniteQuery,
 } from '@tanstack/react-query'
 

src/state/queries/postgate/index.ts

···
   const agent = useAgent()
   const queryClient = useQueryClient()
   const getPosts = useGetPosts()
-  const prevEmbed = React.useRef<AppBskyFeedDefs.PostView['embed']>()
+  const prevEmbed = React.useRef<AppBskyFeedDefs.PostView['embed']>(undefined)
 
   return useMutation({
     mutationFn: async ({

src/state/queries/preferences/types.ts

···
 import {
-  BskyFeedViewPreference,
-  BskyPreferences,
-  BskyThreadViewPreference,
+  type BskyFeedViewPreference,
+  type BskyPreferences,
+  type BskyThreadViewPreference,
 } from '@atproto/api'
 
 export type UsePreferencesQueryResponse = Omit<

src/state/queries/profile-feedgens.ts

···
-import {AppBskyFeedGetActorFeeds, moderateFeedGenerator} from '@atproto/api'
-import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query'
+import {
+  type AppBskyFeedGetActorFeeds,
+  moderateFeedGenerator,
+} from '@atproto/api'
+import {
+  type InfiniteData,
+  type QueryKey,
+  useInfiniteQuery,
+} from '@tanstack/react-query'
 
 import {useAgent} from '#/state/session'
 import {useModerationOpts} from '../preferences/moderation-opts'

src/state/queries/profile-followers.ts

···
-import {AppBskyActorDefs, AppBskyGraphGetFollowers} from '@atproto/api'
 import {
-  InfiniteData,
-  QueryClient,
-  QueryKey,
+  type AppBskyActorDefs,
+  type AppBskyGraphGetFollowers,
+} from '@atproto/api'
+import {
+  type InfiniteData,
+  type QueryClient,
+  type QueryKey,
   useInfiniteQuery,
 } from '@tanstack/react-query'
 

src/state/queries/profile-follows.ts

···
-import {AppBskyActorDefs, AppBskyGraphGetFollows} from '@atproto/api'
+import {type AppBskyActorDefs, type AppBskyGraphGetFollows} from '@atproto/api'
 import {
-  InfiniteData,
-  QueryClient,
-  QueryKey,
+  type InfiniteData,
+  type QueryClient,
+  type QueryKey,
   useInfiniteQuery,
 } from '@tanstack/react-query'
 

src/state/queries/profile-lists.ts

···
-import {AppBskyGraphGetLists, moderateUserList} from '@atproto/api'
-import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query'
+import {type AppBskyGraphGetLists, moderateUserList} from '@atproto/api'
+import {
+  type InfiniteData,
+  type QueryKey,
+  useInfiniteQuery,
+} from '@tanstack/react-query'
 
 import {useAgent} from '#/state/session'
 import {useModerationOpts} from '../preferences/moderation-opts'

src/state/queries/resolve-link.ts

···
-import {QueryClient, useQuery} from '@tanstack/react-query'
+import {type QueryClient, useQuery} from '@tanstack/react-query'
 
 import {STALE} from '#/state/queries/index'
 import {useAgent} from '../session'
···
 const RQKEY_GIF_ROOT = 'resolve-gif'
 export const RQKEY_GIF = (url: string) => [RQKEY_GIF_ROOT, url]
 
-import {BskyAgent} from '@atproto/api'
+import {type BskyAgent} from '@atproto/api'
 
-import {ResolvedLink, resolveGif, resolveLink} from '#/lib/api/resolve'
-import {Gif} from './tenor'
+import {type ResolvedLink, resolveGif, resolveLink} from '#/lib/api/resolve'
+import {type Gif} from './tenor'
 
 export function useResolveLinkQuery(url: string) {
   const agent = useAgent()

src/state/queries/resolve-uri.ts

···
 import {AtUri} from '@atproto/api'
-import {QueryClient, useQuery, UseQueryResult} from '@tanstack/react-query'
+import {
+  type QueryClient,
+  useQuery,
+  type UseQueryResult,
+} from '@tanstack/react-query'
 
 import {STALE} from '#/state/queries'
 import {useAgent} from '#/state/session'

src/state/queries/search-posts.ts

···
 import React from 'react'
 import {
-  AppBskyActorDefs,
-  AppBskyFeedDefs,
-  AppBskyFeedSearchPosts,
+  type AppBskyActorDefs,
+  type AppBskyFeedDefs,
+  type AppBskyFeedSearchPosts,
   AtUri,
   moderatePost,
 } from '@atproto/api'
 import {
-  InfiniteData,
-  QueryClient,
-  QueryKey,
+  type InfiniteData,
+  type QueryClient,
+  type QueryKey,
   useInfiniteQuery,
 } from '@tanstack/react-query'
 

src/state/queries/suggested-feeds.ts

···
-import {AppBskyFeedGetSuggestedFeeds} from '@atproto/api'
-import {InfiniteData, QueryKey, useInfiniteQuery} from '@tanstack/react-query'
+import {type AppBskyFeedGetSuggestedFeeds} from '@atproto/api'
+import {
+  type InfiniteData,
+  type QueryKey,
+  useInfiniteQuery,
+} from '@tanstack/react-query'
 
 import {STALE} from '#/state/queries'
 import {useAgent} from '#/state/session'

src/state/queries/threadgate/index.ts

···
 import {
   AppBskyFeedDefs,
-  AppBskyFeedGetPostThread,
+  type AppBskyFeedGetPostThread,
   AppBskyFeedThreadgate,
   AtUri,
-  BskyAgent,
+  type BskyAgent,
 } from '@atproto/api'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
 
···
 import {until} from '#/lib/async/until'
 import {STALE} from '#/state/queries'
 import {RQKEY_ROOT as postThreadQueryKeyRoot} from '#/state/queries/post-thread'
-import {ThreadgateAllowUISetting} from '#/state/queries/threadgate/types'
+import {type ThreadgateAllowUISetting} from '#/state/queries/threadgate/types'
 import {
   createThreadgateRecord,
   mergeThreadgateRecords,

src/state/queries/threadgate/util.ts

···
-import {AppBskyFeedDefs, AppBskyFeedThreadgate} from '@atproto/api'
+import {type AppBskyFeedDefs, AppBskyFeedThreadgate} from '@atproto/api'
 
-import {ThreadgateAllowUISetting} from '#/state/queries/threadgate/types'
+import {type ThreadgateAllowUISetting} from '#/state/queries/threadgate/types'
 import * as bsky from '#/types/bsky'
 
 export function threadgateViewToAllowUISetting(

src/state/queries/unstable-profile-cache.ts

···
 import {useCallback} from 'react'
-import {QueryClient, useQueryClient} from '@tanstack/react-query'
+import {type QueryClient, useQueryClient} from '@tanstack/react-query'
 
-import * as bsky from '#/types/bsky'
+import type * as bsky from '#/types/bsky'
 
 const unstableProfileViewCacheQueryKeyRoot = 'unstableProfileViewCache'
 export const unstableProfileViewCacheQueryKey = (didOrHandle: string) => [

src/state/queries/util.ts

···
 import {
-  AppBskyActorDefs,
+  type AppBskyActorDefs,
   AppBskyEmbedRecord,
   AppBskyEmbedRecordWithMedia,
-  AppBskyFeedDefs,
+  type AppBskyFeedDefs,
   AppBskyFeedPost,
-  AtUri,
+  type AtUri,
 } from '@atproto/api'
-import {InfiniteData, QueryClient, QueryKey} from '@tanstack/react-query'
+import {
+  type InfiniteData,
+  type QueryClient,
+  type QueryKey,
+} from '@tanstack/react-query'
 
 import * as bsky from '#/types/bsky'
 

src/state/session/__tests__/session-test.ts

···
 import {describe, expect, it, jest} from '@jest/globals'
 
 import {agentToSessionAccountOrThrow} from '../agent'
-import {Action, getInitialState, reducer, State} from '../reducer'
+import {type Action, getInitialState, reducer, type State} from '../reducer'
 
 jest.mock('jwt-decode', () => ({
   jwtDecode(_token: string) {

src/state/session/util.ts

···
 import {hasProp} from '#/lib/type-guards'
 import {logger} from '#/logger'
 import * as persisted from '#/state/persisted'
-import {SessionAccount} from './types'
+import {type SessionAccount} from './types'
 
 export function readLastActiveAccount() {
   const {currentAccount, accounts} = persisted.get('session')

src/state/shell/index.tsx

···
-import type React from 'react'
-
 import {Provider as ColorModeProvider} from './color-mode'
 import {Provider as DrawerOpenProvider} from './drawer-open'
 import {Provider as DrawerSwipableProvider} from './drawer-swipe-disabled'

src/state/shell/reminders.ts

···
 import {simpleAreDatesEqual} from '#/lib/strings/time'
 import {logger} from '#/logger'
 import * as persisted from '#/state/persisted'
-import {SessionAccount} from '../session'
+import {type SessionAccount} from '../session'
 import {isOnboardingActive} from './onboarding'
 
 export function shouldRequestEmailConfirmation(account: SessionAccount) {

src/types/bsky/index.ts

···
-import {ValidationResult} from '@atproto/lexicon'
+import {type ValidationResult} from '@atproto/lexicon'
 
 export * as post from '#/types/bsky/post'
 export * as profile from '#/types/bsky/profile'

src/types/bsky/post.ts

···
 import {
-  $Typed,
+  type $Typed,
   AppBskyEmbedExternal,
   AppBskyEmbedImages,
   AppBskyEmbedRecord,

src/view/com/composer/AltTextCounterWrapper.tsx

···
-import React from 'react'
 import {View} from 'react-native'
+import type React from 'react'
 
 import {MAX_ALT_TEXT} from '#/lib/constants'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'

src/view/com/composer/Composer.tsx

···
   videoUri: initVideoUri,
   cancelRef,
 }: Props & {
-  cancelRef?: React.RefObject<CancelRef>
+  cancelRef?: React.RefObject<CancelRef | null>
 }) => {
   const {currentAccount} = useSession()
   const agent = useAgent()

src/view/com/composer/KeyboardAccessory.tsx

···
-import React from 'react'
 import {View} from 'react-native'
 import {KeyboardStickyView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
+import type React from 'react'
 
 import {isWeb} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'

src/view/com/composer/char-progress/CharProgress.tsx

···
-import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'
+import {
+  type StyleProp,
+  type TextStyle,
+  View,
+  type ViewStyle,
+} from 'react-native'
 // @ts-ignore no type definition -prf
 import ProgressCircle from 'react-native-progress/Circle'
 // @ts-ignore no type definition -prf

src/view/com/composer/photos/EditImageDialog.tsx

···
-import type React from 'react'
-
 import {type ComposerImage} from '#/state/gallery'
 import type * as Dialog from '#/components/Dialog'
 

src/view/com/composer/photos/EditImageDialog.web.tsx

···
   aspectRatio,
 }: Required<Pick<EditImageDialogProps, 'image'>> &
   Omit<EditImageDialogProps, 'control' | 'image'> & {
-    saveRef: React.RefObject<{save: () => Promise<void>}>
+    saveRef: React.RefObject<{save: () => Promise<void>} | null>
   }) {
   const t = useTheme()
   const [isDragging, setIsDragging] = useState(false)

src/view/com/composer/photos/SelectGifBtn.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {logEvent} from '#/lib/statsig/statsig'
-import {Gif} from '#/state/queries/tenor'
+import {type Gif} from '#/state/queries/tenor'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {GifSelectDialog} from '#/components/dialogs/GifSelect'

src/view/com/composer/select-language/SuggestedLanguage.tsx

···
 import {useEffect, useState} from 'react'
 import {View} from 'react-native'
+import {parseLanguage} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import lande from 'lande'
···
 
 export function SuggestedLanguage({
   text,
-  replyToLanguage,
+  replyToLanguage: replyToLanguageProp,
 }: {
   text: string
   replyToLanguage?: string
 }) {
+  const replyToLanguage = cleanUpLanguage(replyToLanguageProp)
   const [suggestedLanguage, setSuggestedLanguage] = useState<
     string | undefined
   >(text.length === 0 ? replyToLanguage : undefined)
···
   }
   return code3ToCode2Strict(lang)
 }
+
+function cleanUpLanguage(text: string | undefined): string | undefined {
+  if (!text) {
+    return undefined
+  }
+
+  return parseLanguage(text)?.language
+}

src/view/com/composer/text-input/text-input-util.ts

···
-import {AppBskyRichtextFacet, RichText} from '@atproto/api'
+import {type AppBskyRichtextFacet, type RichText} from '@atproto/api'
 
 export type LinkFacetMatch = {
   rt: RichText

src/view/com/composer/text-input/web/LinkDecorator.ts

···
 
 import {URL_REGEX} from '@atproto/api'
 import {Mark} from '@tiptap/core'
-import {Node as ProsemirrorNode} from '@tiptap/pm/model'
+import {type Node as ProsemirrorNode} from '@tiptap/pm/model'
 import {Plugin, PluginKey} from '@tiptap/pm/state'
 import {Decoration, DecorationSet} from '@tiptap/pm/view'
 

src/view/com/composer/text-input/web/TagDecorator.ts

···
 
 import {TAG_REGEX, TRAILING_PUNCTUATION_REGEX} from '@atproto/api'
 import {Mark} from '@tiptap/core'
-import {Node as ProsemirrorNode} from '@tiptap/pm/model'
+import {type Node as ProsemirrorNode} from '@tiptap/pm/model'
 import {Plugin, PluginKey} from '@tiptap/pm/state'
 import {Decoration, DecorationSet} from '@tiptap/pm/view'
 

src/view/com/composer/threadgate/ThreadgateBtn.tsx

···
-import {Keyboard, StyleProp, ViewStyle} from 'react-native'
-import {AnimatedStyle} from 'react-native-reanimated'
-import {AppBskyFeedPostgate} from '@atproto/api'
+import {Keyboard, type StyleProp, type ViewStyle} from 'react-native'
+import {type AnimatedStyle} from 'react-native-reanimated'
+import {type AppBskyFeedPostgate} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {isNative} from '#/platform/detection'
-import {ThreadgateAllowUISetting} from '#/state/queries/threadgate'
+import {type ThreadgateAllowUISetting} from '#/state/queries/threadgate'
 import {native} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'

src/view/com/composer/videos/SubtitleFilePicker.tsx

···
-import React, {useRef} from 'react'
+import {useRef} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import type React from 'react'
 
 import {logger} from '#/logger'
 import * as Toast from '#/view/com/util/Toast'

src/view/com/composer/videos/VideoPreview.web.tsx

···
 import {View} from 'react-native'
-import {ImagePickerAsset} from 'expo-image-picker'
+import {type ImagePickerAsset} from 'expo-image-picker'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {CompressedVideo} from '#/lib/media/video/types'
+import {type CompressedVideo} from '#/lib/media/video/types'
 import {clamp} from '#/lib/numbers'
 import {useAutoplayDisabled} from '#/state/preferences'
 import {ExternalEmbedRemoveBtn} from '#/view/com/composer/ExternalEmbedRemoveBtn'

src/view/com/composer/videos/VideoTranscodeProgress.tsx

···
 import {View} from 'react-native'
 // @ts-expect-error no type definition
 import ProgressPie from 'react-native-progress/Pie'
-import {ImagePickerAsset} from 'expo-image-picker'
+import {type ImagePickerAsset} from 'expo-image-picker'
 
 import {clamp} from '#/lib/numbers'
 import {isWeb} from '#/platform/detection'

src/view/com/composer/videos/pickVideo.web.ts

···
-import {ImagePickerAsset, ImagePickerResult} from 'expo-image-picker'
+import {type ImagePickerAsset, type ImagePickerResult} from 'expo-image-picker'
 
 import {SUPPORTED_MIME_TYPES} from '#/lib/constants'
 

src/view/com/feeds/FeedPage.tsx

···
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {
+  type JSX,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {View} from 'react-native'
 import {type AppBskyActorDefs, AppBskyFeedDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'

src/view/com/home/HomeHeaderLayout.web.tsx

···
-import React from 'react'
+import {type JSX} from 'react'
 import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import type React from 'react'
 
 import {useKawaiiMode} from '#/state/preferences/kawaii'
 import {useSession} from '#/state/session'

src/view/com/home/HomeHeaderLayoutMobile.tsx

···
+import {type JSX} from 'react'
 import {View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {msg} from '@lingui/macro'

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

···
  *
  */
 
-import {TransformsStyle} from 'react-native'
-import {MeasuredDimensions} from 'react-native-reanimated'
+import {type TransformsStyle} from 'react-native'
+import {type MeasuredDimensions} from 'react-native-reanimated'
 
 export type Dimensions = {
   width: number

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

···
  * LICENSE file in the root directory of this source tree.
  *
  */
-import {StyleSheet, TouchableOpacity, ViewStyle} from 'react-native'
+import {StyleSheet, TouchableOpacity, type ViewStyle} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'

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

···
 import {
   Gesture,
   GestureDetector,
-  PanGesture,
+  type PanGesture,
 } from 'react-native-gesture-handler'
 import Animated, {
   runOnJS,
-  SharedValue,
+  type SharedValue,
   useAnimatedReaction,
   useAnimatedRef,
   useAnimatedStyle,
···
 } from 'react-native-reanimated'
 import {Image} from 'expo-image'
 
-import type {
-  Dimensions as ImageDimensions,
-  ImageSource,
-  Transform,
+import {
+  type Dimensions as ImageDimensions,
+  type ImageSource,
+  type Transform,
 } from '../../@types'
 import {
   applyRounding,
···
   prependPinch,
   prependTransform,
   readTransform,
-  TransformMatrix,
+  type TransformMatrix,
 } from '../../transforms'
 
 const MIN_SCREEN_ZOOM = 2

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

···
 import {
   Gesture,
   GestureDetector,
-  PanGesture,
+  type PanGesture,
 } from 'react-native-gesture-handler'
 import Animated, {
   runOnJS,
-  SharedValue,
+  type SharedValue,
   useAnimatedProps,
   useAnimatedReaction,
   useAnimatedRef,
···
 
 import {useAnimatedScrollHandler} from '#/lib/hooks/useAnimatedScrollHandler_FIXED'
 import {
-  Dimensions as ImageDimensions,
-  ImageSource,
-  Transform,
+  type Dimensions as ImageDimensions,
+  type ImageSource,
+  type Transform,
 } from '../../@types'
 
 const MAX_ORIGINAL_IMAGE_ZOOM = 2

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

···
 
 import React from 'react'
 import {View} from 'react-native'
-import {PanGesture} from 'react-native-gesture-handler'
-import {SharedValue} from 'react-native-reanimated'
+import {type PanGesture} from 'react-native-gesture-handler'
+import {type SharedValue} from 'react-native-reanimated'
 
-import {Dimensions} from '#/lib/media/types'
+import {type Dimensions} from '#/lib/media/types'
 import {
-  Dimensions as ImageDimensions,
-  ImageSource,
-  Transform,
+  type Dimensions as ImageDimensions,
+  type ImageSource,
+  type Transform,
 } from '../../@types'
 
 type Props = {

src/view/com/lightbox/ImageViewing/transforms.ts

···
-import type {Position} from './@types'
+import {type Position} from './@types'
 
 export type TransformMatrix = [
   number,

src/view/com/lists/ListMembers.tsx

···
-import React, {useCallback} from 'react'
+import React, {type JSX, useCallback} from 'react'
 import {
   Dimensions,
   type GestureResponderEvent,

src/view/com/lists/MyLists.tsx

···
-import React from 'react'
+import React, {type JSX} from 'react'
 import {
   ActivityIndicator,
   FlatList as RNFlatList,
   RefreshControl,
-  StyleProp,
+  type StyleProp,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
-import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
+import {type AppBskyGraphDefs as GraphDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
···
 import {s} from '#/lib/styles'
 import {logger} from '#/logger'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
+import {type MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
 import {atoms as a, useTheme} from '#/alf'
 import {BulletList_Stroke2_Corner0_Rounded as ListIcon} from '#/components/icons/BulletList'
 import * as ListCard from '#/components/ListCard'

src/view/com/modals/InviteCodes.tsx

···
   View,
 } from 'react-native'
 import {setStringAsync} from 'expo-clipboard'
-import {ComAtprotoServerDefs} from '@atproto/api'
+import {type ComAtprotoServerDefs} from '@atproto/api'
 import {
   FontAwesomeIcon,
-  FontAwesomeIconStyle,
+  type FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
···
 import {useInvitesAPI, useInvitesState} from '#/state/invites'
 import {useModalControls} from '#/state/modals'
 import {
-  InviteCodesQueryResponse,
+  type InviteCodesQueryResponse,
   useInviteCodesQuery,
 } from '#/state/queries/invites'
 import {ErrorMessage} from '../util/error/ErrorMessage'

src/view/com/modals/UserAddRemoveLists.tsx

···
   useWindowDimensions,
   View,
 } from 'react-native'
-import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
+import {type AppBskyGraphDefs as GraphDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
···
 import {useModalControls} from '#/state/modals'
 import {
   getMembership,
-  ListMembersip,
+  type ListMembersip,
   useDangerousListMembershipsQuery,
   useListMembershipAddMutation,
   useListMembershipRemoveMutation,

src/view/com/notifications/NotificationFeedItem.tsx

···
     : ''
 
   let a11yLabel = ''
-  let notificationContent: ReactElement
+  let notificationContent: ReactElement<any>
   let icon = (
     <HeartIconFilled
       size="xl"

src/view/com/pager/Pager.tsx

···
 import {
+  type JSX,
   memo,
   useCallback,
   useContext,

src/view/com/pager/Pager.web.tsx

···
 import {
   Children,
+  type JSX,
   useCallback,
   useImperativeHandle,
   useRef,

src/view/com/pager/PagerWithHeader.tsx

···
-import {memo, useCallback, useEffect, useRef, useState} from 'react'
+import {type JSX, memo, useCallback, useEffect, useRef, useState} from 'react'
 import {
   type LayoutChangeEvent,
   type NativeScrollEvent,

src/view/com/pager/PagerWithHeader.web.tsx

···
 import * as React from 'react'
-import {ScrollView, View} from 'react-native'
+import {type JSX} from 'react'
+import {type ScrollView, View} from 'react-native'
 import {useAnimatedRef} from 'react-native-reanimated'
 
-import {Pager, PagerRef, RenderTabBarFnProps} from '#/view/com/pager/Pager'
+import {
+  Pager,
+  type PagerRef,
+  type RenderTabBarFnProps,
+} from '#/view/com/pager/Pager'
 import {atoms as a, web} from '#/alf'
 import * as Layout from '#/components/Layout'
-import {ListMethods} from '../util/List'
+import {type ListMethods} from '../util/List'
 import {TabBar} from './TabBar'
 
 export interface PagerWithHeaderChildParams {

src/view/com/pager/TabBar.web.tsx

···
             <PressableWithHover
               testID={`${testID}-selector-${i}`}
               key={`${item}-${i}`}
-              ref={node => (itemRefs.current[i] = node as any)}
+              ref={node => {
+                itemRefs.current[i] = node as any
+              }}
               style={styles.item}
               hoverStyle={t.atoms.bg_contrast_25}
               onPress={() => onPressItem(i)}

src/view/com/post-thread/PostLikedBy.tsx

···
 import {useCallback, useMemo, useState} from 'react'
-import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
+import {type AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/view/com/post-thread/PostQuotes.tsx

···
 import {useCallback, useState} from 'react'
 import {
-  AppBskyFeedDefs,
+  type AppBskyFeedDefs,
   AppBskyFeedPost,
   moderatePost,
-  ModerationDecision,
+  type ModerationDecision,
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/post-thread/PostRepostedBy.tsx

···
 import {useCallback, useMemo, useState} from 'react'
-import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
+import {type AppBskyActorDefs as ActorDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/view/com/posts/CustomFeedEmptyState.tsx

···
 import {StyleSheet, View} from 'react-native'
 import {
   FontAwesomeIcon,
-  FontAwesomeIconStyle,
+  type FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {Trans} from '@lingui/macro'
 import {useNavigation} from '@react-navigation/native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {MagnifyingGlassIcon} from '#/lib/icons'
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {s} from '#/lib/styles'
 import {isWeb} from '#/platform/detection'
 import {Button} from '../util/forms/Button'

src/view/com/posts/FollowingEmptyState.tsx

···
 import {StyleSheet, View} from 'react-native'
 import {
   FontAwesomeIcon,
-  FontAwesomeIconStyle,
+  type FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {Trans} from '@lingui/macro'
 import {useNavigation} from '@react-navigation/native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 import {MagnifyingGlassIcon} from '#/lib/icons'
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {s} from '#/lib/styles'
 import {isWeb} from '#/platform/detection'
 import {Button} from '../util/forms/Button'

src/view/com/posts/FollowingEndOfFeed.tsx

···
 import {Dimensions, StyleSheet, View} from 'react-native'
 import {
   FontAwesomeIcon,
-  FontAwesomeIconStyle,
+  type FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {Trans} from '@lingui/macro'
 import {useNavigation} from '@react-navigation/native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {s} from '#/lib/styles'
 import {isWeb} from '#/platform/detection'
 import {Button} from '../util/forms/Button'

src/view/com/posts/PostFeed.tsx

···
-import {memo, useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import {
+  type JSX,
+  memo,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {
   ActivityIndicator,
   AppState,

src/view/com/profile/ProfileFollowers.tsx

···
 import React from 'react'
-import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
+import {type AppBskyActorDefs as ActorDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/view/com/profile/ProfileFollows.tsx

···
 import React from 'react'
-import {AppBskyActorDefs as ActorDefs} from '@atproto/api'
+import {type AppBskyActorDefs as ActorDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

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

···
-import {AlertButton, AlertStatic} from 'react-native'
+import {type AlertButton, type AlertStatic} from 'react-native'
 
 class WebAlert implements Pick<AlertStatic, 'alert'> {
   public alert(title: string, message?: string, buttons?: AlertButton[]): void {

src/view/com/util/BottomSheetCustomBackdrop.tsx

···
-import React, {useMemo} from 'react'
+import {useMemo} from 'react'
 import {TouchableWithoutFeedback} from 'react-native'
 import Animated, {
   Extrapolation,
   interpolate,
   useAnimatedStyle,
 } from 'react-native-reanimated'
-import {BottomSheetBackdropProps} from '@discord/bottom-sheet/src'
+import {type BottomSheetBackdropProps} from '@discord/bottom-sheet/src'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import type React from 'react'
 
 export function createCustomBackdrop(
   onClose?: (() => void) | undefined,

src/view/com/util/EmptyState.tsx

···
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
-import {IconProp} from '@fortawesome/fontawesome-svg-core'
+import {type StyleProp, StyleSheet, View, type ViewStyle} from 'react-native'
+import {type IconProp} from '@fortawesome/fontawesome-svg-core'
 import {
   FontAwesomeIcon,
-  FontAwesomeIconStyle,
+  type FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 
 import {usePalette} from '#/lib/hooks/usePalette'

src/view/com/util/EmptyStateWithButton.tsx

···
 import {StyleSheet, View} from 'react-native'
-import {IconProp} from '@fortawesome/fontawesome-svg-core'
+import {type IconProp} from '@fortawesome/fontawesome-svg-core'
 import {
   FontAwesomeIcon,
-  FontAwesomeIconStyle,
+  type FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 
 import {usePalette} from '#/lib/hooks/usePalette'

src/view/com/util/ErrorBoundary.tsx

···
-import {Component, ErrorInfo, ReactNode} from 'react'
-import {StyleProp, ViewStyle} from 'react-native'
+import {Component, type ErrorInfo, type ReactNode} from 'react'
+import {type StyleProp, type ViewStyle} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/view/com/util/EventStopper.tsx

···
 import {View, type ViewStyle} from 'react-native'
-import type React from 'react'
 
 /**
  * This utility function captures events and stops

src/view/com/util/FeedInfoText.tsx

···
-import {StyleProp, StyleSheet, TextStyle} from 'react-native'
+import {type StyleProp, StyleSheet, type TextStyle} from 'react-native'
 
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
-import {TypographyVariant} from '#/lib/ThemeContext'
+import {type TypographyVariant} from '#/lib/ThemeContext'
 import {useFeedSourceInfoQuery} from '#/state/queries/feed'
 import {TextLinkOnWebOnly} from './Link'
 import {LoadingPlaceholder} from './LoadingPlaceholder'

src/view/com/util/Link.tsx

···
-import {memo, useCallback, useMemo} from 'react'
+import {type JSX, memo, useCallback, useMemo} from 'react'
 import {
   type GestureResponderEvent,
   Platform,

src/view/com/util/List.tsx

···
       ...props
     },
     ref,
-  ): React.ReactElement => {
+  ): React.ReactElement<any> => {
     const isScrolledDown = useSharedValue(false)
     const t = useTheme()
     const dedupe = useDedupe(400)

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

···
-import React, {isValidElement, memo, startTransition, useRef} from 'react'
+import React, {
+  isValidElement,
+  type JSX,
+  memo,
+  startTransition,
+  useRef,
+} from 'react'
 import {
   type FlatListProps,
   StyleSheet,
···
             behavior: animated ? 'smooth' : 'instant',
           })
         },
+
         scrollToEnd({animated = true}: {animated?: boolean}) {
           const element = getScrollableNode()
           element?.scrollTo({
···
   containerRef,
   onVisibleChange,
 }: {
-  root?: React.RefObject<HTMLDivElement> | null
+  root?: React.RefObject<HTMLDivElement | null> | null
   topMargin?: string
   bottomMargin?: string
-  containerRef: React.RefObject<Element>
+  containerRef: React.RefObject<Element | null>
   onVisibleChange: (isVisible: boolean) => void
 }) {
   const [containerHeight, setContainerHeight] = React.useState(0)
···
 }
 
 function useResizeObserver(
-  ref: React.RefObject<Element>,
+  ref: React.RefObject<Element | null>,
   onResize: undefined | ((w: number, h: number) => void),
 ) {
   const handleResize = useNonReactiveCallback(onResize ?? (() => {}))
···
   onVisibleChange,
   style,
 }: {
-  root?: React.RefObject<HTMLDivElement> | null
+  root?: React.RefObject<HTMLDivElement | null> | null
   topMargin?: string
   bottomMargin?: string
   onVisibleChange: (isVisible: boolean) => void
···
 
 export const List = memo(React.forwardRef(ListImpl)) as <ItemT>(
   props: ListProps<ItemT> & {ref?: React.Ref<ListMethods>},
-) => React.ReactElement
+) => React.ReactElement<any>
 
 // https://stackoverflow.com/questions/7944460/detect-safari-browser
 

src/view/com/util/LoadMoreRetryBtn.tsx

···
 import {StyleSheet} from 'react-native'
 import {
   FontAwesomeIcon,
-  FontAwesomeIconStyle,
+  type FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 
 import {usePalette} from '#/lib/hooks/usePalette'

src/view/com/util/LoadingScreen.tsx

···
-import {ActivityIndicator, View} from 'react-native'
-
-import {s} from '#/lib/styles'
-import * as Layout from '#/components/Layout'
-
-/**
- * @deprecated use Layout compoenents directly
- */
-export function LoadingScreen() {
-  return (
-    <Layout.Content>
-      <View style={s.p20}>
-        <ActivityIndicator size="large" />
-      </View>
-    </Layout.Content>
-  )
-}

src/view/com/util/MainScrollProvider.tsx

···
 import React, {useCallback, useEffect} from 'react'
-import {NativeScrollEvent} from 'react-native'
+import {type NativeScrollEvent} from 'react-native'
 import {interpolate, useSharedValue, withSpring} from 'react-native-reanimated'
 import EventEmitter from 'eventemitter3'
 

src/view/com/util/PostMeta.tsx

···
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
-import type React from 'react'
 
 import {useActorStatus} from '#/lib/actor-status'
 import {makeProfileLink} from '#/lib/routes/links'

src/view/com/util/PressableWithHover.tsx

···
-import {forwardRef, PropsWithChildren} from 'react'
-import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
-import {View} from 'react-native'
+import {forwardRef, type PropsWithChildren} from 'react'
+import {
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native'
+import {type View} from 'react-native'
 
 import {addStyle} from '#/lib/styles'
 import {useInteractionState} from '#/components/hooks/useInteractionState'

src/view/com/util/TimeElapsed.tsx

···
-import React from 'react'
-import {I18n} from '@lingui/core'
+import React, {type JSX} from 'react'
+import {type I18n} from '@lingui/core'
 import {useLingui} from '@lingui/react'
 
 import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'

src/view/com/util/UserAvatar.tsx

···
-import React, {memo, useCallback, useMemo, useState} from 'react'
+import {memo, useCallback, useMemo, useState} from 'react'
 import {
   Image,
   Pressable,
···
     }
   }, [circular, size])
 
-  const onOpenCamera = React.useCallback(async () => {
+  const onOpenCamera = useCallback(async () => {
     if (!(await requestCameraAccessIfNeeded())) {
       return
     }
···
     )
   }, [onSelectNewAvatar, requestCameraAccessIfNeeded])
 
-  const onOpenLibrary = React.useCallback(async () => {
+  const onOpenLibrary = useCallback(async () => {
     if (!(await requestPhotoAccessIfNeeded())) {
       return
     }
···
     circular,
   ])
 
-  const onRemoveAvatar = React.useCallback(() => {
+  const onRemoveAvatar = useCallback(() => {
     onSelectNewAvatar(null)
   }, [onSelectNewAvatar])
 
···
   disableNavigation,
   onBeforePress,
   live,
-  ...rest
+  ...props
 }: PreviewableUserAvatarProps): React.ReactNode => {
   const {_} = useLingui()
   const queryClient = useQueryClient()
···
       moderation={moderation}
       type={profile.associated?.labeler ? 'labeler' : 'user'}
       live={status.isActive || live}
-      {...rest}
+      {...props}
     />
   )
+
+  const linkStyle =
+    props.type !== 'algo' && props.type !== 'list'
+      ? a.rounded_full
+      : {borderRadius: props.size > 32 ? 8 : 3}
 
   return (
     <ProfileHoverCard did={profile.did} disable={disableHoverCard}>
···
             did: profile.did,
             handle: profile.handle,
           })}
-          onPress={onPress}>
+          onPress={onPress}
+          style={linkStyle}>
           {avatarEl}
         </Link>
       )}

src/view/com/util/ViewHeader.tsx

···
+import {type JSX} from 'react'
+
 import {Header} from '#/components/Layout'
 
 /**

src/view/com/util/ViewSelector.tsx

···
-import React, {useEffect, useState} from 'react'
+import React, {type JSX, useEffect, useState} from 'react'
 import {
-  NativeScrollEvent,
-  NativeSyntheticEvent,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
   Pressable,
   RefreshControl,
   ScrollView,
···
     renderItem: (item: any) => JSX.Element
     ListFooterComponent?:
       | React.ComponentType<any>
-      | React.ReactElement
+      | React.ReactElement<any>
       | null
       | undefined
     onSelectView?: (viewIndex: number) => void

src/view/com/util/Views.tsx

···
 import {forwardRef} from 'react'
-import {FlatListComponent} from 'react-native'
-import {View, ViewProps} from 'react-native'
+import {type FlatListComponent} from 'react-native'
+import {View, type ViewProps} from 'react-native'
 import Animated from 'react-native-reanimated'
-import {FlatListPropsWithLayout} from 'react-native-reanimated'
+import {type FlatListPropsWithLayout} from 'react-native-reanimated'
 
 // If you explode these into functions, don't forget to forwardRef!
 

src/view/com/util/WebAuxClickWrapper.tsx

···
-import React from 'react'
 import {Platform} from 'react-native'
+import type React from 'react'
 
 const onMouseUp = (e: React.MouseEvent & {target: HTMLElement}) => {
   // Only handle whenever it is the middle button

src/view/com/util/error/ErrorMessage.tsx

···
 import {
-  StyleProp,
+  type StyleProp,
   StyleSheet,
   TouchableOpacity,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
 import {
   FontAwesomeIcon,
-  FontAwesomeIconStyle,
+  type FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/util/error/ErrorScreen.tsx

···
 import {View} from 'react-native'
 import {
   FontAwesomeIcon,
-  FontAwesomeIconStyle,
+  type FontAwesomeIconStyle,
 } from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

src/view/com/util/fab/FAB.web.tsx

···
 import {View} from 'react-native'
 
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {FABInner, FABProps} from './FABInner'
+import {FABInner, type FABProps} from './FABInner'
 
 export const FAB = (_opts: FABProps) => {
   const {isDesktop} = useWebMediaQueries()

src/view/com/util/fab/FABInner.tsx

···
-import {ComponentProps} from 'react'
-import {StyleSheet, TouchableWithoutFeedback} from 'react-native'
+import {type ComponentProps, type JSX} from 'react'
+import {
+  type Pressable,
+  type StyleProp,
+  StyleSheet,
+  type ViewStyle,
+} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {LinearGradient} from 'expo-linear-gradient'
···
 import {gradients} from '#/lib/styles'
 import {isWeb} from '#/platform/detection'
 import {ios} from '#/alf'
+import {atoms as a} from '#/alf'
 
-export interface FABProps
-  extends ComponentProps<typeof TouchableWithoutFeedback> {
+export interface FABProps extends ComponentProps<typeof Pressable> {
   testID?: string
   icon: JSX.Element
+  style?: StyleProp<ViewStyle>
 }
 
-export function FABInner({testID, icon, onPress, ...props}: FABProps) {
+export function FABInner({testID, icon, onPress, style, ...props}: FABProps) {
   const insets = useSafeAreaInsets()
   const {isMobile, isTablet} = useWebMediaQueries()
   const playHaptic = useHaptics()
···
           playHaptic('Heavy')
         })}
         targetScale={0.9}
+        style={[a.rounded_full, style]}
         {...props}>
         <LinearGradient
           colors={[gradients.blueLight.start, gradients.blueLight.end]}

src/view/com/util/forms/NativeDropdown.web.tsx

···
   menuRef,
 }: {
   items: DropdownItem[]
-  menuRef: React.RefObject<HTMLDivElement>
+  menuRef: React.RefObject<HTMLDivElement | null>
 }) {
   const pal = usePalette('default')
   const theme = useTheme()

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

···
 import {type AppBskyEmbedImages} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {type Dimensions} from '#/lib/media/types'
 import {

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

···
-import {Image, ImageProps, ImageSource} from 'expo-image'
+import {Image, type ImageProps, type ImageSource} from 'expo-image'
 
 interface HighPriorityImageProps extends ImageProps {
   source: ImageSource

src/view/com/util/layouts/LoggedOutLayout.tsx

···
-import React from 'react'
 import {ScrollView, StyleSheet, View} from 'react-native'
+import type React from 'react'
 
 import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'

src/view/icons/Logomark.tsx

···
-import Svg, {Path, PathProps, SvgProps} from 'react-native-svg'
+import Svg, {Path, type PathProps, type SvgProps} from 'react-native-svg'
 
 import {usePalette} from '#/lib/hooks/usePalette'
 

src/view/screens/CommunityGuidelines.tsx

···
 import {useFocusEffect} from '@react-navigation/native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
 import {s} from '#/lib/styles'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {TextLink} from '#/view/com/util/Link'

src/view/screens/CopyrightPolicy.tsx

···
 import {useFocusEffect} from '@react-navigation/native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
 import {s} from '#/lib/styles'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {TextLink} from '#/view/com/util/Link'

src/view/screens/NotFound.tsx

···
 } from '@react-navigation/native'
 
 import {usePalette} from '#/lib/hooks/usePalette'
-import {NavigationProp} from '#/lib/routes/types'
+import {type NavigationProp} from '#/lib/routes/types'
 import {s} from '#/lib/styles'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {Button} from '#/view/com/util/forms/Button'

src/view/screens/ProfileFeedLikedBy.tsx

···
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
 import {makeRecordUri} from '#/lib/strings/url-helpers'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {PostLikedBy as PostLikedByComponent} from '#/view/com/post-thread/PostLikedBy'

src/view/screens/ProfileList.tsx

···
-import React, {useCallback, useMemo} from 'react'
-import {StyleSheet, View} from 'react-native'
-import {useAnimatedRef} from 'react-native-reanimated'
-import {
-  AppBskyGraphDefs,
-  AtUri,
-  moderateUserList,
-  type ModerationOpts,
-  RichText as RichTextAPI,
-} from '@atproto/api'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useFocusEffect, useIsFocused} from '@react-navigation/native'
-import {useNavigation} from '@react-navigation/native'
-import {useQueryClient} from '@tanstack/react-query'
-
-import {useHaptics} from '#/lib/haptics'
-import {useOpenComposer} from '#/lib/hooks/useOpenComposer'
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useSetTitle} from '#/lib/hooks/useSetTitle'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {ComposeIcon2} from '#/lib/icons'
-import {makeListLink} from '#/lib/routes/links'
-import {
-  type CommonNavigatorParams,
-  type NativeStackScreenProps,
-} from '#/lib/routes/types'
-import {type NavigationProp} from '#/lib/routes/types'
-import {shareUrl} from '#/lib/sharing'
-import {cleanError} from '#/lib/strings/errors'
-import {toShareUrl, toShareUrlBsky} from '#/lib/strings/url-helpers'
-import {s} from '#/lib/styles'
-import {logger} from '#/logger'
-import {isNative, isWeb} from '#/platform/detection'
-import {listenSoftReset} from '#/state/events'
-import {useModalControls} from '#/state/modals'
-import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {
-  useListBlockMutation,
-  useListDeleteMutation,
-  useListMuteMutation,
-  useListQuery,
-} from '#/state/queries/list'
-import {type FeedDescriptor} from '#/state/queries/post-feed'
-import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
-import {
-  useAddSavedFeedsMutation,
-  usePreferencesQuery,
-  type UsePreferencesQueryResponse,
-  useRemoveFeedMutation,
-  useUpdateSavedFeedsMutation,
-} from '#/state/queries/preferences'
-import {useResolveUriQuery} from '#/state/queries/resolve-uri'
-import {truncateAndInvalidate} from '#/state/queries/util'
-import {useSession} from '#/state/session'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {ListMembers} from '#/view/com/lists/ListMembers'
-import {PagerWithHeader} from '#/view/com/pager/PagerWithHeader'
-import {PostFeed} from '#/view/com/posts/PostFeed'
-import {ProfileSubpageHeader} from '#/view/com/profile/ProfileSubpageHeader'
-import {EmptyState} from '#/view/com/util/EmptyState'
-import {FAB} from '#/view/com/util/fab/FAB'
-import {Button} from '#/view/com/util/forms/Button'
-import {
-  type DropdownItem,
-  NativeDropdown,
-} from '#/view/com/util/forms/NativeDropdown'
-import {type ListRef} from '#/view/com/util/List'
-import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn'
-import {LoadingScreen} from '#/view/com/util/LoadingScreen'
-import {Text} from '#/view/com/util/text/Text'
-import * as Toast from '#/view/com/util/Toast'
-import {ListHiddenScreen} from '#/screens/List/ListHiddenScreen'
-import {atoms as a} from '#/alf'
-import {Button as NewButton, ButtonIcon, ButtonText} from '#/components/Button'
-import {useDialogControl} from '#/components/Dialog'
-import {ListAddRemoveUsersDialog} from '#/components/dialogs/lists/ListAddRemoveUsersDialog'
-import {PersonPlus_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person'
-import * as Layout from '#/components/Layout'
-import * as Hider from '#/components/moderation/Hider'
-import {
-  ReportDialog,
-  useReportDialogControl,
-} from '#/components/moderation/ReportDialog'
-import * as Prompt from '#/components/Prompt'
-import {RichText} from '#/components/RichText'
-
-interface SectionRef {
-  scrollToTop: () => void
-}
-
-type Props = NativeStackScreenProps<CommonNavigatorParams, 'ProfileList'>
-export function ProfileListScreen(props: Props) {
-  return (
-    <Layout.Screen testID="profileListScreen">
-      <ProfileListScreenInner {...props} />
-    </Layout.Screen>
-  )
-}
-
-function ProfileListScreenInner(props: Props) {
-  const {_} = useLingui()
-  const {name: handleOrDid, rkey} = props.route.params
-  const {data: resolvedUri, error: resolveError} = useResolveUriQuery(
-    AtUri.make(handleOrDid, 'app.bsky.graph.list', rkey).toString(),
-  )
-  const {data: preferences} = usePreferencesQuery()
-  const {data: list, error: listError} = useListQuery(resolvedUri?.uri)
-  const moderationOpts = useModerationOpts()
-
-  if (resolveError) {
-    return (
-      <Layout.Content>
-        <ErrorScreen
-          error={_(
-            msg`We're sorry, but we were unable to resolve this list. If this persists, please contact the list creator, @${handleOrDid}.`,
-          )}
-        />
-      </Layout.Content>
-    )
-  }
-  if (listError) {
-    return (
-      <Layout.Content>
-        <ErrorScreen error={cleanError(listError)} />
-      </Layout.Content>
-    )
-  }
-
-  return resolvedUri && list && moderationOpts && preferences ? (
-    <ProfileListScreenLoaded
-      {...props}
-      uri={resolvedUri.uri}
-      list={list}
-      moderationOpts={moderationOpts}
-      preferences={preferences}
-    />
-  ) : (
-    <LoadingScreen />
-  )
-}
-
-function ProfileListScreenLoaded({
-  route,
-  uri,
-  list,
-  moderationOpts,
-  preferences,
-}: Props & {
-  uri: string
-  list: AppBskyGraphDefs.ListView
-  moderationOpts: ModerationOpts
-  preferences: UsePreferencesQueryResponse
-}) {
-  const {_} = useLingui()
-  const queryClient = useQueryClient()
-  const {openComposer} = useOpenComposer()
-  const setMinimalShellMode = useSetMinimalShellMode()
-  const {currentAccount} = useSession()
-  const {rkey} = route.params
-  const feedSectionRef = React.useRef<SectionRef>(null)
-  const aboutSectionRef = React.useRef<SectionRef>(null)
-  const isCurateList = list.purpose === AppBskyGraphDefs.CURATELIST
-  const isScreenFocused = useIsFocused()
-  const isHidden = list.labels?.findIndex(l => l.val === '!hide') !== -1
-  const isOwner = currentAccount?.did === list.creator.did
-  const scrollElRef = useAnimatedRef()
-  const addUserDialogControl = useDialogControl()
-  const sectionTitlesCurate = [_(msg`Posts`), _(msg`People`)]
-
-  const moderation = React.useMemo(() => {
-    return moderateUserList(list, moderationOpts)
-  }, [list, moderationOpts])
-
-  useSetTitle(isHidden ? _(msg`List Hidden`) : list.name)
-
-  useFocusEffect(
-    useCallback(() => {
-      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
-  )
-
-  const onChangeMembers = useCallback(() => {
-    if (isCurateList) {
-      truncateAndInvalidate(queryClient, FEED_RQKEY(`list|${list.uri}`))
-    }
-  }, [list.uri, isCurateList, queryClient])
-
-  const onCurrentPageSelected = React.useCallback(
-    (index: number) => {
-      if (index === 0) {
-        feedSectionRef.current?.scrollToTop()
-      } else if (index === 1) {
-        aboutSectionRef.current?.scrollToTop()
-      }
-    },
-    [feedSectionRef],
-  )
-
-  const renderHeader = useCallback(() => {
-    return <Header rkey={rkey} list={list} preferences={preferences} />
-  }, [rkey, list, preferences])
-
-  if (isCurateList) {
-    return (
-      <Hider.Outer modui={moderation.ui('contentView')} allowOverride={isOwner}>
-        <Hider.Mask>
-          <ListHiddenScreen list={list} preferences={preferences} />
-        </Hider.Mask>
-        <Hider.Content>
-          <View style={s.hContentRegion}>
-            <PagerWithHeader
-              items={sectionTitlesCurate}
-              isHeaderReady={true}
-              renderHeader={renderHeader}
-              onCurrentPageSelected={onCurrentPageSelected}>
-              {({headerHeight, scrollElRef, isFocused}) => (
-                <FeedSection
-                  ref={feedSectionRef}
-                  feed={`list|${uri}`}
-                  scrollElRef={scrollElRef as ListRef}
-                  headerHeight={headerHeight}
-                  isFocused={isScreenFocused && isFocused}
-                  isOwner={isOwner}
-                  onPressAddUser={addUserDialogControl.open}
-                />
-              )}
-              {({headerHeight, scrollElRef}) => (
-                <AboutSection
-                  ref={aboutSectionRef}
-                  scrollElRef={scrollElRef as ListRef}
-                  list={list}
-                  onPressAddUser={addUserDialogControl.open}
-                  headerHeight={headerHeight}
-                />
-              )}
-            </PagerWithHeader>
-            <FAB
-              testID="composeFAB"
-              onPress={() => openComposer({})}
-              icon={
-                <ComposeIcon2
-                  strokeWidth={1.5}
-                  size={29}
-                  style={{color: 'white'}}
-                />
-              }
-              accessibilityRole="button"
-              accessibilityLabel={_(msg`New post`)}
-              accessibilityHint=""
-            />
-          </View>
-          <ListAddRemoveUsersDialog
-            control={addUserDialogControl}
-            list={list}
-            onChange={onChangeMembers}
-          />
-        </Hider.Content>
-      </Hider.Outer>
-    )
-  }
-  return (
-    <Hider.Outer modui={moderation.ui('contentView')} allowOverride={isOwner}>
-      <Hider.Mask>
-        <ListHiddenScreen list={list} preferences={preferences} />
-      </Hider.Mask>
-      <Hider.Content>
-        <View style={s.hContentRegion}>
-          <Layout.Center>{renderHeader()}</Layout.Center>
-          <AboutSection
-            list={list}
-            scrollElRef={scrollElRef as ListRef}
-            onPressAddUser={addUserDialogControl.open}
-            headerHeight={0}
-          />
-          <FAB
-            testID="composeFAB"
-            onPress={() => openComposer({})}
-            icon={
-              <ComposeIcon2
-                strokeWidth={1.5}
-                size={29}
-                style={{color: 'white'}}
-              />
-            }
-            accessibilityRole="button"
-            accessibilityLabel={_(msg`New post`)}
-            accessibilityHint=""
-          />
-        </View>
-        <ListAddRemoveUsersDialog
-          control={addUserDialogControl}
-          list={list}
-          onChange={onChangeMembers}
-        />
-      </Hider.Content>
-    </Hider.Outer>
-  )
-}
-
-function Header({
-  rkey,
-  list,
-  preferences,
-}: {
-  rkey: string
-  list: AppBskyGraphDefs.ListView
-  preferences: UsePreferencesQueryResponse
-}) {
-  const pal = usePalette('default')
-  const palInverted = usePalette('inverted')
-  const {_} = useLingui()
-  const navigation = useNavigation<NavigationProp>()
-  const {currentAccount} = useSession()
-  const reportDialogControl = useReportDialogControl()
-  const {openModal} = useModalControls()
-  const listMuteMutation = useListMuteMutation()
-  const listBlockMutation = useListBlockMutation()
-  const listDeleteMutation = useListDeleteMutation()
-  const isCurateList = list.purpose === 'app.bsky.graph.defs#curatelist'
-  const isModList = list.purpose === 'app.bsky.graph.defs#modlist'
-  const isBlocking = !!list.viewer?.blocked
-  const isMuting = !!list.viewer?.muted
-  const isOwner = list.creator.did === currentAccount?.did
-  const playHaptic = useHaptics()
-
-  const {mutateAsync: addSavedFeeds, isPending: isAddSavedFeedPending} =
-    useAddSavedFeedsMutation()
-  const {mutateAsync: removeSavedFeed, isPending: isRemovePending} =
-    useRemoveFeedMutation()
-  const {mutateAsync: updateSavedFeeds, isPending: isUpdatingSavedFeeds} =
-    useUpdateSavedFeedsMutation()
-
-  const isPending =
-    isAddSavedFeedPending || isRemovePending || isUpdatingSavedFeeds
-
-  const deleteListPromptControl = useDialogControl()
-  const subscribeMutePromptControl = useDialogControl()
-  const subscribeBlockPromptControl = useDialogControl()
-
-  const savedFeedConfig = preferences?.savedFeeds?.find(
-    f => f.value === list.uri,
-  )
-  const isPinned = Boolean(savedFeedConfig?.pinned)
-
-  const onTogglePinned = React.useCallback(async () => {
-    playHaptic()
-
-    try {
-      if (savedFeedConfig) {
-        const pinned = !savedFeedConfig.pinned
-        await updateSavedFeeds([
-          {
-            ...savedFeedConfig,
-            pinned,
-          },
-        ])
-        Toast.show(
-          pinned
-            ? _(msg`Pinned to your feeds`)
-            : _(msg`Unpinned from your feeds`),
-        )
-      } else {
-        await addSavedFeeds([
-          {
-            type: 'list',
-            value: list.uri,
-            pinned: true,
-          },
-        ])
-        Toast.show(_(msg`Saved to your feeds`))
-      }
-    } catch (e) {
-      Toast.show(_(msg`There was an issue contacting the server`), 'xmark')
-      logger.error('Failed to toggle pinned feed', {message: e})
-    }
-  }, [
-    playHaptic,
-    addSavedFeeds,
-    updateSavedFeeds,
-    list.uri,
-    _,
-    savedFeedConfig,
-  ])
-
-  const onRemoveFromSavedFeeds = React.useCallback(async () => {
-    playHaptic()
-    if (!savedFeedConfig) return
-    try {
-      await removeSavedFeed(savedFeedConfig)
-      Toast.show(_(msg`Removed from your feeds`))
-    } catch (e) {
-      Toast.show(_(msg`There was an issue contacting the server`), 'xmark')
-      logger.error('Failed to remove pinned list', {message: e})
-    }
-  }, [playHaptic, removeSavedFeed, _, savedFeedConfig])
-
-  const onSubscribeMute = useCallback(async () => {
-    try {
-      await listMuteMutation.mutateAsync({uri: list.uri, mute: true})
-      Toast.show(_(msg({message: 'List muted', context: 'toast'})))
-      logger.metric(
-        'moderation:subscribedToList',
-        {listType: 'mute'},
-        {statsig: true},
-      )
-    } catch {
-      Toast.show(
-        _(
-          msg`There was an issue. Please check your internet connection and try again.`,
-        ),
-      )
-    }
-  }, [list, listMuteMutation, _])
-
-  const onUnsubscribeMute = useCallback(async () => {
-    try {
-      await listMuteMutation.mutateAsync({uri: list.uri, mute: false})
-      Toast.show(_(msg({message: 'List unmuted', context: 'toast'})))
-      logger.metric(
-        'moderation:unsubscribedFromList',
-        {listType: 'mute'},
-        {statsig: true},
-      )
-    } catch {
-      Toast.show(
-        _(
-          msg`There was an issue. Please check your internet connection and try again.`,
-        ),
-      )
-    }
-  }, [list, listMuteMutation, _])
-
-  const onSubscribeBlock = useCallback(async () => {
-    try {
-      await listBlockMutation.mutateAsync({uri: list.uri, block: true})
-      Toast.show(_(msg({message: 'List blocked', context: 'toast'})))
-      logger.metric(
-        'moderation:subscribedToList',
-        {listType: 'block'},
-        {statsig: true},
-      )
-    } catch {
-      Toast.show(
-        _(
-          msg`There was an issue. Please check your internet connection and try again.`,
-        ),
-      )
-    }
-  }, [list, listBlockMutation, _])
-
-  const onUnsubscribeBlock = useCallback(async () => {
-    try {
-      await listBlockMutation.mutateAsync({uri: list.uri, block: false})
-      Toast.show(_(msg({message: 'List unblocked', context: 'toast'})))
-      logger.metric(
-        'moderation:unsubscribedFromList',
-        {listType: 'block'},
-        {statsig: true},
-      )
-    } catch {
-      Toast.show(
-        _(
-          msg`There was an issue. Please check your internet connection and try again.`,
-        ),
-      )
-    }
-  }, [list, listBlockMutation, _])
-
-  const onPressEdit = useCallback(() => {
-    openModal({
-      name: 'create-or-edit-list',
-      list,
-    })
-  }, [openModal, list])
-
-  const onPressDelete = useCallback(async () => {
-    await listDeleteMutation.mutateAsync({uri: list.uri})
-
-    if (savedFeedConfig) {
-      await removeSavedFeed(savedFeedConfig)
-    }
-
-    Toast.show(_(msg({message: 'List deleted', context: 'toast'})))
-    if (navigation.canGoBack()) {
-      navigation.goBack()
-    } else {
-      navigation.navigate('Home')
-    }
-  }, [
-    list,
-    listDeleteMutation,
-    navigation,
-    _,
-    removeSavedFeed,
-    savedFeedConfig,
-  ])
-
-  const onPressReport = useCallback(() => {
-    reportDialogControl.open()
-  }, [reportDialogControl])
-
-  const onPressShare = useCallback(() => {
-    const url = toShareUrl(`/profile/${list.creator.did}/lists/${rkey}`)
-    shareUrl(url)
-  }, [list, rkey])
-
-  const onPressShareBsky = useCallback(() => {
-    const url = toShareUrlBsky(`/profile/${list.creator.did}/lists/${rkey}`)
-    shareUrl(url)
-  }, [list, rkey])
-
-  const dropdownItems: DropdownItem[] = useMemo(() => {
-    let items: DropdownItem[] = [
-      {
-        testID: 'listHeaderDropdownShareBtn',
-        label: isWeb ? _(msg`Copy link to list`) : _(msg`Share`),
-        onPress: onPressShare,
-        icon: {
-          ios: {
-            name: 'square.and.arrow.up',
-          },
-          android: '',
-          web: 'share',
-        },
-      },
-      {
-        testID: 'listHeaderDropdownShareBtn',
-        label: isWeb ? _(msg`Copy via bsky.app`) : _(msg`Share`),
-        onPress: onPressShareBsky,
-        icon: {
-          ios: {
-            name: 'square.and.arrow.up',
-          },
-          android: '',
-          web: 'share',
-        },
-      },
-    ]
-
-    if (savedFeedConfig) {
-      items.push({
-        testID: 'listHeaderDropdownRemoveFromFeedsBtn',
-        label: _(msg`Remove from my feeds`),
-        onPress: onRemoveFromSavedFeeds,
-        icon: {
-          ios: {
-            name: 'trash',
-          },
-          android: '',
-          web: ['far', 'trash-can'],
-        },
-      })
-    }
-
-    if (isOwner) {
-      items.push({label: 'separator'})
-      items.push({
-        testID: 'listHeaderDropdownEditBtn',
-        label: _(msg`Edit list details`),
-        onPress: onPressEdit,
-        icon: {
-          ios: {
-            name: 'pencil',
-          },
-          android: '',
-          web: 'pen',
-        },
-      })
-      items.push({
-        testID: 'listHeaderDropdownDeleteBtn',
-        label: _(msg`Delete list`),
-        onPress: deleteListPromptControl.open,
-        icon: {
-          ios: {
-            name: 'trash',
-          },
-          android: '',
-          web: ['far', 'trash-can'],
-        },
-      })
-    } else {
-      items.push({label: 'separator'})
-      items.push({
-        testID: 'listHeaderDropdownReportBtn',
-        label: _(msg`Report list`),
-        onPress: onPressReport,
-        icon: {
-          ios: {
-            name: 'exclamationmark.triangle',
-          },
-          android: '',
-          web: 'circle-exclamation',
-        },
-      })
-    }
-    if (isModList && isPinned) {
-      items.push({label: 'separator'})
-      items.push({
-        testID: 'listHeaderDropdownUnpinBtn',
-        label: _(msg`Unpin moderation list`),
-        onPress:
-          isPending || !savedFeedConfig
-            ? undefined
-            : () => removeSavedFeed(savedFeedConfig),
-        icon: {
-          ios: {
-            name: 'pin',
-          },
-          android: '',
-          web: 'thumbtack',
-        },
-      })
-    }
-    if (isCurateList && (isBlocking || isMuting)) {
-      items.push({label: 'separator'})
-
-      if (isMuting) {
-        items.push({
-          testID: 'listHeaderDropdownMuteBtn',
-          label: _(msg`Unmute list`),
-          onPress: onUnsubscribeMute,
-          icon: {
-            ios: {
-              name: 'eye',
-            },
-            android: '',
-            web: 'eye',
-          },
-        })
-      }
-
-      if (isBlocking) {
-        items.push({
-          testID: 'listHeaderDropdownBlockBtn',
-          label: _(msg`Unblock list`),
-          onPress: onUnsubscribeBlock,
-          icon: {
-            ios: {
-              name: 'person.fill.xmark',
-            },
-            android: '',
-            web: 'user-slash',
-          },
-        })
-      }
-    }
-    return items
-  }, [
-    _,
-    onPressShare,
-    onPressShareBsky,
-    savedFeedConfig,
-    isOwner,
-    isModList,
-    isPinned,
-    isCurateList,
-    isBlocking,
-    isMuting,
-    onRemoveFromSavedFeeds,
-    onPressEdit,
-    deleteListPromptControl.open,
-    onPressReport,
-    isPending,
-    removeSavedFeed,
-    onUnsubscribeMute,
-    onUnsubscribeBlock,
-  ])
-
-  const subscribeDropdownItems: DropdownItem[] = useMemo(() => {
-    return [
-      {
-        testID: 'subscribeDropdownMuteBtn',
-        label: _(msg`Mute accounts`),
-        onPress: subscribeMutePromptControl.open,
-        icon: {
-          ios: {
-            name: 'speaker.slash',
-          },
-          android: '',
-          web: 'user-slash',
-        },
-      },
-      {
-        testID: 'subscribeDropdownBlockBtn',
-        label: _(msg`Block accounts`),
-        onPress: subscribeBlockPromptControl.open,
-        icon: {
-          ios: {
-            name: 'person.fill.xmark',
-          },
-          android: '',
-          web: 'ban',
-        },
-      },
-    ]
-  }, [_, subscribeMutePromptControl.open, subscribeBlockPromptControl.open])
-
-  const descriptionRT = useMemo(
-    () =>
-      list.description
-        ? new RichTextAPI({
-            text: list.description,
-            facets: list.descriptionFacets,
-          })
-        : undefined,
-    [list],
-  )
-
-  return (
-    <>
-      <ProfileSubpageHeader
-        href={makeListLink(list.creator.handle || list.creator.did || '', rkey)}
-        title={list.name}
-        avatar={list.avatar}
-        isOwner={list.creator.did === currentAccount?.did}
-        creator={list.creator}
-        purpose={list.purpose}
-        avatarType="list">
-        <ReportDialog
-          control={reportDialogControl}
-          subject={{
-            ...list,
-            $type: 'app.bsky.graph.defs#listView',
-          }}
-        />
-        {isCurateList ? (
-          <Button
-            testID={isPinned ? 'unpinBtn' : 'pinBtn'}
-            type={isPinned ? 'default' : 'inverted'}
-            label={isPinned ? _(msg`Unpin`) : _(msg`Pin to home`)}
-            onPress={onTogglePinned}
-            disabled={isPending}
-          />
-        ) : isModList ? (
-          isBlocking ? (
-            <Button
-              testID="unblockBtn"
-              type="default"
-              label={_(msg`Unblock`)}
-              onPress={onUnsubscribeBlock}
-            />
-          ) : isMuting ? (
-            <Button
-              testID="unmuteBtn"
-              type="default"
-              label={_(msg`Unmute`)}
-              onPress={onUnsubscribeMute}
-            />
-          ) : (
-            <NativeDropdown
-              testID="subscribeBtn"
-              items={subscribeDropdownItems}
-              accessibilityLabel={_(msg`Subscribe to this list`)}
-              accessibilityHint="">
-              <View style={[palInverted.view, styles.btn]}>
-                <Text style={palInverted.text}>
-                  <Trans>Subscribe</Trans>
-                </Text>
-              </View>
-            </NativeDropdown>
-          )
-        ) : null}
-        <NativeDropdown
-          testID="headerDropdownBtn"
-          items={dropdownItems}
-          accessibilityLabel={_(msg`More options`)}
-          accessibilityHint="">
-          <View style={[pal.viewLight, styles.btn]}>
-            <FontAwesomeIcon
-              icon="ellipsis"
-              size={20}
-              color={pal.colors.text}
-            />
-          </View>
-        </NativeDropdown>
-
-        <Prompt.Basic
-          control={deleteListPromptControl}
-          title={_(msg`Delete this list?`)}
-          description={_(
-            msg`If you delete this list, you won't be able to recover it.`,
-          )}
-          onConfirm={onPressDelete}
-          confirmButtonCta={_(msg`Delete`)}
-          confirmButtonColor="negative"
-        />
-
-        <Prompt.Basic
-          control={subscribeMutePromptControl}
-          title={_(msg`Mute these accounts?`)}
-          description={_(
-            msg`Muting is private. Muted accounts can interact with you, but you will not see their posts or receive notifications from them.`,
-          )}
-          onConfirm={onSubscribeMute}
-          confirmButtonCta={_(msg`Mute list`)}
-        />
-
-        <Prompt.Basic
-          control={subscribeBlockPromptControl}
-          title={_(msg`Block these accounts?`)}
-          description={_(
-            msg`Blocking is public. Blocked accounts cannot reply in your threads, mention you, or otherwise interact with you.`,
-          )}
-          onConfirm={onSubscribeBlock}
-          confirmButtonCta={_(msg`Block list`)}
-          confirmButtonColor="negative"
-        />
-      </ProfileSubpageHeader>
-      {descriptionRT ? (
-        <View style={[a.px_lg, a.pt_sm, a.pb_sm, a.gap_md]}>
-          <RichText value={descriptionRT} style={[a.text_md, a.leading_snug]} />
-        </View>
-      ) : null}
-    </>
-  )
-}
-
-interface FeedSectionProps {
-  feed: FeedDescriptor
-  headerHeight: number
-  scrollElRef: ListRef
-  isFocused: boolean
-  isOwner: boolean
-  onPressAddUser: () => void
-}
-const FeedSection = React.forwardRef<SectionRef, FeedSectionProps>(
-  function FeedSectionImpl(
-    {feed, scrollElRef, headerHeight, isFocused, isOwner, onPressAddUser},
-    ref,
-  ) {
-    const queryClient = useQueryClient()
-    const [hasNew, setHasNew] = React.useState(false)
-    const [isScrolledDown, setIsScrolledDown] = React.useState(false)
-    const isScreenFocused = useIsFocused()
-    const {_} = useLingui()
-
-    const onScrollToTop = useCallback(() => {
-      scrollElRef.current?.scrollToOffset({
-        animated: isNative,
-        offset: -headerHeight,
-      })
-      queryClient.resetQueries({queryKey: FEED_RQKEY(feed)})
-      setHasNew(false)
-    }, [scrollElRef, headerHeight, queryClient, feed, setHasNew])
-    React.useImperativeHandle(ref, () => ({
-      scrollToTop: onScrollToTop,
-    }))
-
-    React.useEffect(() => {
-      if (!isScreenFocused) {
-        return
-      }
-      return listenSoftReset(onScrollToTop)
-    }, [onScrollToTop, isScreenFocused])
-
-    const renderPostsEmpty = useCallback(() => {
-      return (
-        <View style={[a.gap_xl, a.align_center]}>
-          <EmptyState icon="hashtag" message={_(msg`This feed is empty.`)} />
-          {isOwner && (
-            <NewButton
-              label={_(msg`Start adding people`)}
-              onPress={onPressAddUser}
-              color="primary"
-              size="small"
-              variant="solid">
-              <ButtonIcon icon={PersonPlusIcon} />
-              <ButtonText>
-                <Trans>Start adding people!</Trans>
-              </ButtonText>
-            </NewButton>
-          )}
-        </View>
-      )
-    }, [_, onPressAddUser, isOwner])
-
-    return (
-      <View>
-        <PostFeed
-          testID="listFeed"
-          enabled={isFocused}
-          feed={feed}
-          pollInterval={60e3}
-          disablePoll={hasNew}
-          scrollElRef={scrollElRef}
-          onHasNew={setHasNew}
-          onScrolledDownChange={setIsScrolledDown}
-          renderEmptyState={renderPostsEmpty}
-          headerOffset={headerHeight}
-        />
-        {(isScrolledDown || hasNew) && (
-          <LoadLatestBtn
-            onPress={onScrollToTop}
-            label={_(msg`Load new posts`)}
-            showIndicator={hasNew}
-          />
-        )}
-      </View>
-    )
-  },
-)
-
-interface AboutSectionProps {
-  list: AppBskyGraphDefs.ListView
-  onPressAddUser: () => void
-  headerHeight: number
-  scrollElRef: ListRef
-}
-const AboutSection = React.forwardRef<SectionRef, AboutSectionProps>(
-  function AboutSectionImpl(
-    {list, onPressAddUser, headerHeight, scrollElRef},
-    ref,
-  ) {
-    const {_} = useLingui()
-    const {currentAccount} = useSession()
-    const {isMobile} = useWebMediaQueries()
-    const [isScrolledDown, setIsScrolledDown] = React.useState(false)
-    const isOwner = list.creator.did === currentAccount?.did
-
-    const onScrollToTop = useCallback(() => {
-      scrollElRef.current?.scrollToOffset({
-        animated: isNative,
-        offset: -headerHeight,
-      })
-    }, [scrollElRef, headerHeight])
-
-    React.useImperativeHandle(ref, () => ({
-      scrollToTop: onScrollToTop,
-    }))
-
-    const renderHeader = React.useCallback(() => {
-      if (!isOwner) {
-        return <View />
-      }
-      if (isMobile) {
-        return (
-          <View style={[a.px_sm, a.py_sm]}>
-            <NewButton
-              testID="addUserBtn"
-              label={_(msg`Add a user to this list`)}
-              onPress={onPressAddUser}
-              color="primary"
-              size="small"
-              variant="outline"
-              style={[a.py_md]}>
-              <ButtonIcon icon={PersonPlusIcon} />
-              <ButtonText>
-                <Trans>Add people</Trans>
-              </ButtonText>
-            </NewButton>
-          </View>
-        )
-      }
-      return (
-        <View style={[a.px_lg, a.py_md, a.flex_row_reverse]}>
-          <NewButton
-            testID="addUserBtn"
-            label={_(msg`Add a user to this list`)}
-            onPress={onPressAddUser}
-            color="primary"
-            size="small"
-            variant="ghost"
-            style={[a.py_sm]}>
-            <ButtonIcon icon={PersonPlusIcon} />
-            <ButtonText>
-              <Trans>Add people</Trans>
-            </ButtonText>
-          </NewButton>
-        </View>
-      )
-    }, [isOwner, _, onPressAddUser, isMobile])
-
-    const renderEmptyState = useCallback(() => {
-      return (
-        <View style={[a.gap_xl, a.align_center]}>
-          <EmptyState
-            icon="users-slash"
-            message={_(msg`This list is empty.`)}
-          />
-          {isOwner && (
-            <NewButton
-              testID="emptyStateAddUserBtn"
-              label={_(msg`Start adding people`)}
-              onPress={onPressAddUser}
-              color="primary"
-              size="small"
-              variant="solid">
-              <ButtonIcon icon={PersonPlusIcon} />
-              <ButtonText>
-                <Trans>Start adding people!</Trans>
-              </ButtonText>
-            </NewButton>
-          )}
-        </View>
-      )
-    }, [_, onPressAddUser, isOwner])
-
-    return (
-      <View>
-        <ListMembers
-          testID="listItems"
-          list={list.uri}
-          scrollElRef={scrollElRef}
-          renderHeader={renderHeader}
-          renderEmptyState={renderEmptyState}
-          headerOffset={headerHeight}
-          onScrolledDownChange={setIsScrolledDown}
-        />
-        {isScrolledDown && (
-          <LoadLatestBtn
-            onPress={onScrollToTop}
-            label={_(msg`Scroll to top`)}
-            showIndicator={false}
-          />
-        )}
-      </View>
-    )
-  },
-)
-
-function ErrorScreen({error}: {error: string}) {
-  const pal = usePalette('default')
-  const navigation = useNavigation<NavigationProp>()
-  const {_} = useLingui()
-  const onPressBack = useCallback(() => {
-    if (navigation.canGoBack()) {
-      navigation.goBack()
-    } else {
-      navigation.navigate('Home')
-    }
-  }, [navigation])
-
-  return (
-    <View
-      style={[
-        pal.view,
-        pal.border,
-        {
-          paddingHorizontal: 18,
-          paddingVertical: 14,
-          borderTopWidth: StyleSheet.hairlineWidth,
-        },
-      ]}>
-      <Text type="title-lg" style={[pal.text, s.mb10]}>
-        <Trans>Could not load list</Trans>
-      </Text>
-      <Text type="md" style={[pal.text, s.mb20]}>
-        {error}
-      </Text>
-
-      <View style={{flexDirection: 'row'}}>
-        <Button
-          type="default"
-          accessibilityLabel={_(msg`Go back`)}
-          accessibilityHint={_(msg`Returns to previous page`)}
-          onPress={onPressBack}
-          style={{flexShrink: 1}}>
-          <Text type="button" style={pal.text}>
-            <Trans>Go Back</Trans>
-          </Text>
-        </Button>
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  btn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-    paddingVertical: 7,
-    paddingHorizontal: 14,
-    borderRadius: 50,
-    marginLeft: 6,
-  },
-})

src/view/screens/SavedFeeds.tsx

···
-import React from 'react'
-import {ActivityIndicator, Pressable, StyleSheet, View} from 'react-native'
-import Animated, {LinearTransition} from 'react-native-reanimated'
-import {type AppBskyActorDefs} from '@atproto/api'
-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 {useNavigation} from '@react-navigation/native'
-import {type NativeStackScreenProps} from '@react-navigation/native-stack'
-
-import {useHaptics} from '#/lib/haptics'
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {
-  type CommonNavigatorParams,
-  type NavigationProp,
-} from '#/lib/routes/types'
-import {colors, s} from '#/lib/styles'
-import {logger} from '#/logger'
-import {
-  useOverwriteSavedFeedsMutation,
-  usePreferencesQuery,
-} from '#/state/queries/preferences'
-import {type UsePreferencesQueryResponse} from '#/state/queries/preferences/types'
-import {useSetMinimalShellMode} from '#/state/shell'
-import {FeedSourceCard} from '#/view/com/feeds/FeedSourceCard'
-import {TextLink} from '#/view/com/util/Link'
-import {Text} from '#/view/com/util/text/Text'
-import * as Toast from '#/view/com/util/Toast'
-import {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed'
-import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType'
-import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
-import {FloppyDisk_Stroke2_Corner0_Rounded as SaveIcon} from '#/components/icons/FloppyDisk'
-import * as Layout from '#/components/Layout'
-import {Loader} from '#/components/Loader'
-import {Text as NewText} from '#/components/Typography'
-
-type Props = NativeStackScreenProps<CommonNavigatorParams, 'SavedFeeds'>
-export function SavedFeeds({}: Props) {
-  const {data: preferences} = usePreferencesQuery()
-  if (!preferences) {
-    return <View />
-  }
-  return <SavedFeedsInner preferences={preferences} />
-}
-
-function SavedFeedsInner({
-  preferences,
-}: {
-  preferences: UsePreferencesQueryResponse
-}) {
-  const pal = usePalette('default')
-  const {_} = useLingui()
-  const {isMobile, isDesktop} = useWebMediaQueries()
-  const setMinimalShellMode = useSetMinimalShellMode()
-  const {mutateAsync: overwriteSavedFeeds, isPending: isOverwritePending} =
-    useOverwriteSavedFeedsMutation()
-  const navigation = useNavigation<NavigationProp>()
-
-  /*
-   * Use optimistic data if exists and no error, otherwise fallback to remote
-   * data
-   */
-  const [currentFeeds, setCurrentFeeds] = React.useState(
-    () => preferences.savedFeeds || [],
-  )
-  const hasUnsavedChanges = currentFeeds !== preferences.savedFeeds
-  const pinnedFeeds = currentFeeds.filter(f => f.pinned)
-  const unpinnedFeeds = currentFeeds.filter(f => !f.pinned)
-  const noSavedFeedsOfAnyType = pinnedFeeds.length + unpinnedFeeds.length === 0
-  const noFollowingFeed =
-    currentFeeds.every(f => f.type !== 'timeline') && !noSavedFeedsOfAnyType
-
-  useFocusEffect(
-    React.useCallback(() => {
-      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
-  )
-
-  const onSaveChanges = React.useCallback(async () => {
-    try {
-      await overwriteSavedFeeds(currentFeeds)
-      Toast.show(_(msg({message: 'Feeds updated!', context: 'toast'})))
-      if (navigation.canGoBack()) {
-        navigation.goBack()
-      } else {
-        navigation.navigate('Feeds')
-      }
-    } catch (e) {
-      Toast.show(_(msg`There was an issue contacting the server`), 'xmark')
-      logger.error('Failed to toggle pinned feed', {message: e})
-    }
-  }, [_, overwriteSavedFeeds, currentFeeds, navigation])
-
-  return (
-    <Layout.Screen>
-      <Layout.Header.Outer>
-        <Layout.Header.BackButton />
-        <Layout.Header.Content align="left">
-          <Layout.Header.TitleText>
-            <Trans>Feeds</Trans>
-          </Layout.Header.TitleText>
-        </Layout.Header.Content>
-        <Button
-          testID="saveChangesBtn"
-          size="small"
-          variant={hasUnsavedChanges ? 'solid' : 'solid'}
-          color={hasUnsavedChanges ? 'primary' : 'secondary'}
-          onPress={onSaveChanges}
-          label={_(msg`Save changes`)}
-          disabled={isOverwritePending || !hasUnsavedChanges}>
-          <ButtonIcon icon={isOverwritePending ? Loader : SaveIcon} />
-          <ButtonText>
-            {isDesktop ? <Trans>Save changes</Trans> : <Trans>Save</Trans>}
-          </ButtonText>
-        </Button>
-      </Layout.Header.Outer>
-
-      <Layout.Content>
-        {noSavedFeedsOfAnyType && (
-          <View style={[pal.border, a.border_b]}>
-            <NoSavedFeedsOfAnyType />
-          </View>
-        )}
-
-        <View style={[pal.text, pal.border, styles.title]}>
-          <Text type="title" style={pal.text}>
-            <Trans>Pinned Feeds</Trans>
-          </Text>
-        </View>
-
-        {preferences ? (
-          !pinnedFeeds.length ? (
-            <View
-              style={[
-                pal.border,
-                isMobile && s.flex1,
-                pal.viewLight,
-                styles.empty,
-              ]}>
-              <Text type="lg" style={[pal.text]}>
-                <Trans>You don't have any pinned feeds.</Trans>
-              </Text>
-            </View>
-          ) : (
-            pinnedFeeds.map(f => (
-              <ListItem
-                key={f.id}
-                feed={f}
-                isPinned
-                currentFeeds={currentFeeds}
-                setCurrentFeeds={setCurrentFeeds}
-                preferences={preferences}
-              />
-            ))
-          )
-        ) : (
-          <ActivityIndicator style={{marginTop: 20}} />
-        )}
-
-        {noFollowingFeed && (
-          <View style={[pal.border, a.border_b]}>
-            <NoFollowingFeed />
-          </View>
-        )}
-
-        <View style={[pal.text, pal.border, styles.title]}>
-          <Text type="title" style={pal.text}>
-            <Trans>Saved Feeds</Trans>
-          </Text>
-        </View>
-        {preferences ? (
-          !unpinnedFeeds.length ? (
-            <View
-              style={[
-                pal.border,
-                isMobile && s.flex1,
-                pal.viewLight,
-                styles.empty,
-              ]}>
-              <Text type="lg" style={[pal.text]}>
-                <Trans>You don't have any saved feeds.</Trans>
-              </Text>
-            </View>
-          ) : (
-            unpinnedFeeds.map(f => (
-              <ListItem
-                key={f.id}
-                feed={f}
-                isPinned={false}
-                currentFeeds={currentFeeds}
-                setCurrentFeeds={setCurrentFeeds}
-                preferences={preferences}
-              />
-            ))
-          )
-        ) : (
-          <ActivityIndicator style={{marginTop: 20}} />
-        )}
-
-        <View style={styles.footerText}>
-          <Text type="sm" style={pal.textLight}>
-            <Trans>
-              Feeds are custom algorithms that users build with a little coding
-              expertise.{' '}
-              <TextLink
-                type="sm"
-                style={pal.link}
-                href="https://github.com/bluesky-social/feed-generator"
-                text={_(msg`See this guide`)}
-              />{' '}
-              for more information.
-            </Trans>
-          </Text>
-        </View>
-      </Layout.Content>
-    </Layout.Screen>
-  )
-}
-
-function ListItem({
-  feed,
-  isPinned,
-  currentFeeds,
-  setCurrentFeeds,
-}: {
-  feed: AppBskyActorDefs.SavedFeed
-  isPinned: boolean
-  currentFeeds: AppBskyActorDefs.SavedFeed[]
-  setCurrentFeeds: React.Dispatch<AppBskyActorDefs.SavedFeed[]>
-  preferences: UsePreferencesQueryResponse
-}) {
-  const {_} = useLingui()
-  const pal = usePalette('default')
-  const playHaptic = useHaptics()
-  const feedUri = feed.value
-
-  const onTogglePinned = React.useCallback(async () => {
-    playHaptic()
-    setCurrentFeeds(
-      currentFeeds.map(f =>
-        f.id === feed.id ? {...feed, pinned: !feed.pinned} : f,
-      ),
-    )
-  }, [playHaptic, feed, currentFeeds, setCurrentFeeds])
-
-  const onPressUp = React.useCallback(async () => {
-    if (!isPinned) return
-
-    const nextFeeds = currentFeeds.slice()
-    const ids = currentFeeds.map(f => f.id)
-    const index = ids.indexOf(feed.id)
-    const nextIndex = index - 1
-
-    if (index === -1 || index === 0) return
-    ;[nextFeeds[index], nextFeeds[nextIndex]] = [
-      nextFeeds[nextIndex],
-      nextFeeds[index],
-    ]
-
-    setCurrentFeeds(nextFeeds)
-  }, [feed, isPinned, setCurrentFeeds, currentFeeds])
-
-  const onPressDown = React.useCallback(async () => {
-    if (!isPinned) return
-
-    const nextFeeds = currentFeeds.slice()
-    const ids = currentFeeds.map(f => f.id)
-    const index = ids.indexOf(feed.id)
-    const nextIndex = index + 1
-
-    if (index === -1 || index >= nextFeeds.filter(f => f.pinned).length - 1)
-      return
-    ;[nextFeeds[index], nextFeeds[nextIndex]] = [
-      nextFeeds[nextIndex],
-      nextFeeds[index],
-    ]
-
-    setCurrentFeeds(nextFeeds)
-  }, [feed, isPinned, setCurrentFeeds, currentFeeds])
-
-  const onPressRemove = React.useCallback(async () => {
-    playHaptic()
-    setCurrentFeeds(currentFeeds.filter(f => f.id !== feed.id))
-  }, [playHaptic, feed, currentFeeds, setCurrentFeeds])
-
-  return (
-    <Animated.View
-      style={[styles.itemContainer, pal.border]}
-      layout={LinearTransition.duration(100)}>
-      {feed.type === 'timeline' ? (
-        <FollowingFeedCard />
-      ) : (
-        <FeedSourceCard
-          key={feedUri}
-          feedUri={feedUri}
-          style={[isPinned && a.pr_sm]}
-          showMinimalPlaceholder
-          hideTopBorder={true}
-        />
-      )}
-      {isPinned ? (
-        <>
-          <Pressable
-            accessibilityRole="button"
-            onPress={onPressUp}
-            hitSlop={5}
-            style={state => ({
-              backgroundColor: pal.viewLight.backgroundColor,
-              paddingHorizontal: 12,
-              paddingVertical: 10,
-              borderRadius: 4,
-              marginRight: 8,
-              opacity: state.hovered || state.pressed ? 0.5 : 1,
-            })}
-            testID={`feed-${feed.type}-moveUp`}>
-            <FontAwesomeIcon
-              icon="arrow-up"
-              size={14}
-              style={[pal.textLight]}
-            />
-          </Pressable>
-          <Pressable
-            accessibilityRole="button"
-            onPress={onPressDown}
-            hitSlop={5}
-            style={state => ({
-              backgroundColor: pal.viewLight.backgroundColor,
-              paddingHorizontal: 12,
-              paddingVertical: 10,
-              borderRadius: 4,
-              marginRight: 8,
-              opacity: state.hovered || state.pressed ? 0.5 : 1,
-            })}
-            testID={`feed-${feed.type}-moveDown`}>
-            <FontAwesomeIcon
-              icon="arrow-down"
-              size={14}
-              style={[pal.textLight]}
-            />
-          </Pressable>
-        </>
-      ) : (
-        <Pressable
-          testID={`feed-${feedUri}-toggleSave`}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Remove from my feeds`)}
-          accessibilityHint=""
-          onPress={onPressRemove}
-          hitSlop={5}
-          style={state => ({
-            marginRight: 8,
-            paddingHorizontal: 12,
-            paddingVertical: 10,
-            borderRadius: 4,
-            opacity: state.hovered || state.focused ? 0.5 : 1,
-          })}>
-          <FontAwesomeIcon
-            icon={['far', 'trash-can']}
-            size={19}
-            color={pal.colors.icon}
-          />
-        </Pressable>
-      )}
-      <View style={{paddingRight: 16}}>
-        <Pressable
-          accessibilityRole="button"
-          hitSlop={5}
-          onPress={onTogglePinned}
-          style={state => ({
-            backgroundColor: pal.viewLight.backgroundColor,
-            paddingHorizontal: 12,
-            paddingVertical: 10,
-            borderRadius: 4,
-            opacity: state.hovered || state.focused ? 0.5 : 1,
-          })}
-          testID={`feed-${feed.type}-togglePin`}>
-          <FontAwesomeIcon
-            icon="thumb-tack"
-            size={14}
-            color={isPinned ? colors.blue3 : pal.colors.icon}
-          />
-        </Pressable>
-      </View>
-    </Animated.View>
-  )
-}
-
-function FollowingFeedCard() {
-  const t = useTheme()
-  return (
-    <View style={[a.flex_row, a.align_center, a.flex_1, a.p_lg]}>
-      <View
-        style={[
-          a.align_center,
-          a.justify_center,
-          a.rounded_sm,
-          a.mr_md,
-          {
-            width: 36,
-            height: 36,
-            backgroundColor: t.palette.primary_500,
-          },
-        ]}>
-        <FilterTimeline
-          style={[
-            {
-              width: 22,
-              height: 22,
-            },
-          ]}
-          fill={t.palette.white}
-        />
-      </View>
-      <View style={[a.flex_1, a.flex_row, a.gap_sm, a.align_center]}>
-        <NewText style={[a.text_sm, a.font_bold, a.leading_snug]}>
-          <Trans context="feed-name">Following</Trans>
-        </NewText>
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  empty: {
-    paddingHorizontal: 20,
-    paddingVertical: 20,
-    borderRadius: 8,
-    marginHorizontal: 10,
-    marginTop: 10,
-  },
-  title: {
-    paddingHorizontal: 14,
-    paddingTop: 20,
-    paddingBottom: 10,
-    borderBottomWidth: StyleSheet.hairlineWidth,
-  },
-  itemContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    borderBottomWidth: StyleSheet.hairlineWidth,
-  },
-  footerText: {
-    paddingHorizontal: 26,
-    paddingVertical: 22,
-  },
-})

src/view/screens/Storybook/Dialogs.tsx

···
     React.useState<boolean>()
   const [shouldRenderUnmountTest, setShouldRenderUnmountTest] =
     React.useState(false)
-  const unmountTestInterval = React.useRef<number>()
+  const unmountTestInterval = React.useRef<number>(undefined)
 
   const onUnmountTestStartPressWithClose = () => {
     setShouldRenderUnmountTest(true)

src/view/screens/Storybook/ListContained.tsx

···
 import {View} from 'react-native'
 
 import {ScrollProvider} from '#/lib/ScrollContext'
-import {List, ListMethods} from '#/view/com/util/List'
+import {List, type ListMethods} from '#/view/com/util/List'
 import {Button, ButtonText} from '#/components/Button'
 import * as Toggle from '#/components/forms/Toggle'
 import {Text} from '#/components/Typography'

src/view/screens/Support.tsx

···
 
 import {HELP_DESK_URL} from '#/lib/constants'
 import {usePalette} from '#/lib/hooks/usePalette'
-import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {
+  type CommonNavigatorParams,
+  type NativeStackScreenProps,
+} from '#/lib/routes/types'
 import {s} from '#/lib/styles'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {TextLink} from '#/view/com/util/Link'

src/view/shell/Drawer.tsx

···
-import React, {type ComponentProps} from 'react'
+import React, {type ComponentProps, type JSX} from 'react'
 import {Linking, ScrollView, TouchableOpacity, View} from 'react-native'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg, Plural, plural, Trans} from '@lingui/macro'

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

···
-import {useCallback} from 'react'
+import {type JSX, useCallback} from 'react'
 import {type GestureResponderEvent, View} from 'react-native'
 import Animated from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'

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

···
 }
 
 const NavItem: React.FC<{
-  children: (props: {isActive: boolean}) => React.ReactChild
+  children: (props: {isActive: boolean}) => React.ReactNode
   href: string
   routeName: string
   hasNew?: boolean

src/view/shell/desktop/LeftNav.tsx

···
-import {useCallback, useMemo, useState} from 'react'
+import {type JSX, useCallback, useMemo, useState} from 'react'
 import {StyleSheet, View} from 'react-native'
 import {type AppBskyActorDefs} from '@atproto/api'
 import {msg, plural, Trans} from '@lingui/macro'

yarn.lock

···
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/prop-types@*":
-  version "15.7.5"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
-  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
-
 "@types/psl@^1.1.1":
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/@types/psl/-/psl-1.1.1.tgz#3ba9e6d4bd2a32652a639fd5df7e539151d0a3b2"
···
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@^19.1.2":
-  version "19.1.3"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.3.tgz#3f0c60804441bf34d19f8dd0d44405c0c0e21bfa"
-  integrity sha512-rJXC08OG0h3W6wDMFxQrZF00Kq6qQvw0djHRdzl3U5DnIERz0MRce3WVc7IS6JYBwtaP/DwYtRRjVlvivNveKg==
+"@types/react-dom@^19.1.8":
+  version "19.1.9"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.1.9.tgz#5ab695fce1e804184767932365ae6569c11b4b4b"
+  integrity sha512-qXRuZaOsAdXKFyOhRBg6Lqqc0yay13vN7KrIg4L7N4aaHN68ma9OK3NE1BoDFgFOTfM7zg+3/8+2n8rLUH3OKQ==
 
-"@types/react-responsive@^8.0.5":
-  version "8.0.5"
-  resolved "https://registry.yarnpkg.com/@types/react-responsive/-/react-responsive-8.0.5.tgz#77769862d2a0711434feb972be08e3e6c334440a"
-  integrity sha512-k3gQJgI87oP5IrVZe//3LKJFnAeFaqqWmmtl5eoYL2H3HqFcIhUaE30kRK1CsW3DHdojZxcVj4ZNc2ClsEu2PA==
+"@types/react@^19.1.12":
+  version "19.1.12"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.12.tgz#7bfaa76aabbb0b4fe0493c21a3a7a93d33e8937b"
+  integrity sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==
   dependencies:
-    "@types/react" "*"
-
-"@types/react@*", "@types/react@^18":
-  version "18.2.20"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.20.tgz#1605557a83df5c8a2cc4eeb743b3dfc0eb6aaeb2"
-  integrity sha512-WKNtmsLWJM/3D5mG4U84cysVY31ivmyw85dE84fOCk5Hx78wezB/XEjVPWl2JTZ5FkEeaTJf+VgUAUn3PE7Isw==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
     csstype "^3.0.2"
 
 "@types/retry@0.12.0":
   version "0.12.0"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
   integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
-
-"@types/scheduler@*":
-  version "0.16.3"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.3.tgz#cef09e3ec9af1d63d2a6cc5b383a737e24e6dcf5"
-  integrity sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ==
 
 "@types/semver@^7.3.12":
   version "7.5.0"
···
   resolved "https://registry.yarnpkg.com/marky/-/marky-1.2.5.tgz#55796b688cbd72390d2d399eaaf1832c9413e3c0"
   integrity sha512-q9JtQJKjpsVxCRVgQ+WapguSbKC3SQ5HEzFGPAJMStgh3QjCawp00UKv3MTTAArTmGmmPUvllHZoNbZ3gs0I+Q==
 
-matchmediaquery@^0.3.0:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.3.1.tgz#8247edc47e499ebb7c58f62a9ff9ccf5b815c6d7"
-  integrity sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==
+matchmediaquery@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.4.2.tgz#22582bd4ae63ad9f54c53001bba80cbed0f7eafa"
+  integrity sha512-wrZpoT50ehYOudhDjt/YvUJc6eUzcdFPdmbizfgvswCKNHD1/OBOHYJpHie+HXpu6bSkEGieFMYk6VuutaiRfA==
   dependencies:
     css-mediaquery "^0.1.2"
 
···
     use-callback-ref "^1.3.3"
     use-sidecar "^1.1.3"
 
-react-responsive@^9.0.2:
-  version "9.0.2"
-  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-9.0.2.tgz#34531ca77a61e7a8775714016d21241df7e4205c"
-  integrity sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==
+react-responsive@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-10.0.1.tgz#293d4d2562da93409861216f0110d146c5676eb3"
+  integrity sha512-OM5/cRvbtUWEX8le8RCT8scA8y2OPtb0Q/IViEyCEM5FBN8lRrkUOZnu87I88A6njxDldvxG+rLBxWiA7/UM9g==
   dependencies:
     hyphenate-style-name "^1.0.0"
-    matchmediaquery "^0.3.0"
+    matchmediaquery "^0.4.2"
     prop-types "^15.6.1"
-    shallow-equal "^1.2.1"
+    shallow-equal "^3.1.0"
 
 react-server-dom-webpack@~19.0.0:
   version "19.0.0"
···
   resolved "https://registry.yarnpkg.com/sf-symbols-typescript/-/sf-symbols-typescript-1.0.0.tgz#94e9210bf27e7583f9749a0d07bd4f4937ea488f"
   integrity sha512-DkS7q3nN68dEMb4E18HFPDAvyrjDZK9YAQQF2QxeFu9gp2xRDXFMF8qLJ1EmQ/qeEGQmop4lmMM1WtYJTIcCMw==
 
-shallow-equal@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
-  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+shallow-equal@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-3.1.0.tgz#e7a54bac629c7f248eff6c2f5b63122ba4320bec"
+  integrity sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==
 
 sharp@^0.33.5:
   version "0.33.5"