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

.github/workflows/build-submit-android.yml

···
           distribution: 'temurin'
           java-version: '17'
 
-      - name: "Use upgraded MMKV for Fabric"
-        run: |
-          sed -i 's/"react-native-mmkv": "\^2\.12\.2"/"react-native-mmkv": "^3.3.0"/' package.json
-
       - name: ⚙️ Install dependencies
         run: yarn install
 

.github/workflows/bundle-deploy-eas-update.yml

···
   push:
     branches:
       - main
-      - hailey/eas-fab
   workflow_dispatch:
     inputs:
       channel:
···
 
       - name: 🏗️ Create Bundle
         if: ${{ !steps.fingerprint.outputs.includes-changes }}
-        run: |
-          SENTRY_DIST=${{ steps.sentry.outputs.SENTRY_DIST }} SENTRY_RELEASE=${{ steps.sentry.outputs.SENTRY_RELEASE }} SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} SENTRY_DSN=${{ secrets.SENTRY_DSN }} EXPO_PUBLIC_ENV="${{ inputs.channel || 'testflight' }}" yarn export-ios
-          mv ./dist ./ios-dist
-          sed -i 's/"react-native-mmkv": "\^2\.12\.2"/"react-native-mmkv": "^3.3.0"/' package.json
-          yarn install
-          SENTRY_DIST=${{ steps.sentry.outputs.SENTRY_DIST }} SENTRY_RELEASE=${{ steps.sentry.outputs.SENTRY_RELEASE }} SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} SENTRY_DSN=${{ secrets.SENTRY_DSN }} EXPO_PUBLIC_ENV="${{ inputs.channel || 'testflight' }}" yarn export-android
-          mv ./dist ./android-dist
-
+        run: SENTRY_DIST=${{ steps.sentry.outputs.SENTRY_DIST }} SENTRY_RELEASE=${{ steps.sentry.outputs.SENTRY_RELEASE }} SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} SENTRY_DSN=${{ secrets.SENTRY_DSN }} EXPO_PUBLIC_ENV="${{ inputs.channel || 'testflight' }}" yarn export
 
       - name: 📦 Package Bundle and 🚀 Deploy
         if: ${{ !steps.fingerprint.outputs.includes-changes }}
···
         with:
           distribution: 'temurin'
           java-version: '17'
-
-      - name: "Use upgraded MMKV for Fabric"
-        run: |
-          sed -i 's/"react-native-mmkv": "\^2\.12\.2"/"react-native-mmkv": "^3.3.0"/' package.json
 
       - name: ⚙️ Install dependencies
         run: yarn install

app.config.js

···
               compileSdkVersion: 35,
               targetSdkVersion: 35,
               buildToolsVersion: '35.0.0',
-              newArchEnabled: true,
+              newArchEnabled: false,
             },
           },
         ],

bskyembed/tailwind.config.cjs

···
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
-  darkMode: ['variant', [
-    '&:is(.dark *):not(:is(.dark .light *))',
-  ]],
+  darkMode: ['variant', ['&:is(.dark *):not(:is(.dark .light *))']],
   theme: {
     extend: {
       colors: {

bskyembed/tsconfig.snippet.json

···
-
 {
   "compilerOptions": {
     "target": "ES5",

bskylink/src/db/index.ts

···
 import assert from 'assert'
 import {
   Kysely,
-  KyselyPlugin,
+  type KyselyPlugin,
   Migrator,
-  PluginTransformQueryArgs,
-  PluginTransformResultArgs,
+  type PluginTransformQueryArgs,
+  type PluginTransformResultArgs,
   PostgresDialect,
-  QueryResult,
-  RootOperationNode,
-  UnknownRow,
+  type QueryResult,
+  type RootOperationNode,
+  type UnknownRow,
 } from 'kysely'
 import {default as Pg} from 'pg'
 
 import {dbLogger as log} from '../logger.js'
 import {default as migrations} from './migrations/index.js'
 import {DbMigrationProvider} from './migrations/provider.js'
-import {DbSchema} from './schema.js'
+import {type DbSchema} from './schema.js'
 
 export class Database {
   migrator: Migrator
   destroyed = false
 
-  constructor(public db: Kysely<DbSchema>, public cfg: PgConfig) {
+  constructor(
+    public db: Kysely<DbSchema>,
+    public cfg: PgConfig,
+  ) {
     this.migrator = new Migrator({
       db,
       migrationTableSchema: cfg.schema,

bskylink/src/index.ts

···
 import events from 'node:events'
-import http from 'node:http'
+import type http from 'node:http'
 
 import cors from 'cors'
 import express from 'express'
-import {createHttpTerminator, HttpTerminator} from 'http-terminator'
+import {createHttpTerminator, type HttpTerminator} from 'http-terminator'
 
-import {Config} from './config.js'
+import {type Config} from './config.js'
 import {AppContext} from './context.js'
 import {default as routes, errorHandler} from './routes/index.js'
 
···
   public server?: http.Server
   private terminator?: HttpTerminator
 
-  constructor(public app: express.Application, public ctx: AppContext) {}
+  constructor(
+    public app: express.Application,
+    public ctx: AppContext,
+  ) {}
 
   static async create(cfg: Config): Promise<LinkService> {
     let app = express()

bskyogcard/src/index.ts

···
 import events from 'node:events'
-import http from 'node:http'
+import type http from 'node:http'
 
 import express from 'express'
-import {createHttpTerminator, HttpTerminator} from 'http-terminator'
+import {createHttpTerminator, type HttpTerminator} from 'http-terminator'
 
-import {Config} from './config.js'
+import {type Config} from './config.js'
 import {AppContext} from './context.js'
 import {default as routes, errorHandler} from './routes/index.js'
 
···
   public server?: http.Server
   private terminator?: HttpTerminator
 
-  constructor(public app: express.Application, public ctx: AppContext) {}
+  constructor(
+    public app: express.Application,
+    public ctx: AppContext,
+  ) {}
 
   static async create(cfg: Config): Promise<CardService> {
     let app = express()

modules/expo-emoji-picker/src/EmojiPicker.android.tsx

···
         flex: 1,
         width: '100%',
         backgroundColor: scheme === 'dark' ? '#000' : '#fff',
-      } as const),
+      }) as const,
     [scheme],
   )
 

package.json

···
     "intl:push": "crowdin push translations --verbose -b main",
     "nuke": "rm -rf ./node_modules && rm -rf ./ios && rm -rf ./android",
     "update-extensions": "bash scripts/updateExtensions.sh",
-    "export-ios": "npx expo export --platform ios --dump-sourcemap && yarn upload-native-sourcemaps",
-    "export-android": "npx expo export --platform android --dump-sourcemap && yarn upload-native-sourcemaps",
+    "export": "npx expo export --dump-sourcemap && yarn upload-native-sourcemaps",
     "upload-native-sourcemaps": "npx sentry-expo-upload-sourcemaps dist",
     "make-deploy-bundle": "bash scripts/bundleUpdate.sh",
     "generate-webpack-stats-file": "EXPO_PUBLIC_GENERATE_STATS=1 yarn build-web",
···
     "lint-staged": "^13.2.3",
     "lockfile-lint": "^4.14.0",
     "metro-react-native-babel-preset": "^0.77.0",
-    "prettier": "^2.8.3",
+    "prettier": "^3.6.0",
     "react-native-dotenv": "^3.4.11",
     "react-refresh": "^0.14.0",
     "svgo": "^3.3.2",

scripts/bundleUpdate.js

···
 const fsp = fs.promises
 const path = require('path')
 
-const IOS_DIST_DIR = './ios-dist'
-const ANDROID_DIST_DIR = './android-dist'
-
+const DIST_DIR = './dist'
 const BUNDLES_DIR = '/_expo/static/js'
-
-const IOS_BUNDLE_DIR = path.join(IOS_DIST_DIR, BUNDLES_DIR, '/ios')
-const ANDROID_BUNDLE_DIR = path.join(ANDROID_DIST_DIR, BUNDLES_DIR, '/android')
-
-const IOS_METADATA_PATH = path.join(IOS_DIST_DIR, '/metadata.json')
-const ANDROID_METADATA_PATH = path.join(ANDROID_DIST_DIR, '/metadata.json')
-
+const IOS_BUNDLE_DIR = path.join(DIST_DIR, BUNDLES_DIR, '/ios')
+const ANDROID_BUNDLE_DIR = path.join(DIST_DIR, BUNDLES_DIR, '/android')
+const METADATA_PATH = path.join(DIST_DIR, '/metadata.json')
 const DEST_DIR = './bundleTempDir'
 
 // Weird, don't feel like figuring out _why_ it wants this
-const IOS_METADATA = require(`../${IOS_METADATA_PATH}`)
-const ANDROID_METADATA = require(`../${ANDROID_METADATA_PATH}`)
-
-const IOS_METADATA_ASSETS = IOS_METADATA.fileMetadata.ios.assets
-const ANDROID_METADATA_ASSETS = ANDROID_METADATA.fileMetadata.android.assets
+const METADATA = require(`../${METADATA_PATH}`)
+const IOS_METADATA_ASSETS = METADATA.fileMetadata.ios.assets
+const ANDROID_METADATA_ASSETS = METADATA.fileMetadata.android.assets
 
 const getMd5 = async path => {
   return new Promise(res => {
···
 
   console.log('Getting ios asset md5s and moving them...')
   for (const asset of IOS_METADATA_ASSETS) {
-    const currPath = path.join(IOS_DIST_DIR, asset.path)
+    const currPath = path.join(DIST_DIR, asset.path)
     const md5 = await getMd5(currPath)
     const withExtPath = `assets/${md5}.${asset.ext}`
     iosAssets.push(withExtPath)
···
 
   console.log('Getting android asset md5s and moving them...')
   for (const asset of ANDROID_METADATA_ASSETS) {
-    const currPath = path.join(ANDROID_DIST_DIR, asset.path)
+    const currPath = path.join(DIST_DIR, asset.path)
     const md5 = await getMd5(currPath)
     const withExtPath = `assets/${md5}.${asset.ext}`
     androidAssets.push(withExtPath)

scripts/post-web-build.js

···
   'scripts.html',
 )
 
-const {entrypoints} = require(path.join(
-  projectRoot,
-  'web-build/asset-manifest.json',
-))
+const {entrypoints} = require(
+  path.join(projectRoot, 'web-build/asset-manifest.json'),
+)
 
 console.log(`Found ${entrypoints.length} entrypoints`)
 console.log(`Writing ${templateFile}`)

src/App.native.tsx

···
   ensureGeolocationResolved,
   Provider as GeolocationProvider,
 } from '#/state/geolocation'
+import {GlobalGestureEventsProvider} from '#/state/global-gesture-events'
 import {Provider as HomeBadgeProvider} from '#/state/home-badge'
 import {Provider as InvitesStateProvider} from '#/state/invites'
 import {Provider as LightboxStateProvider} from '#/state/lightbox'
···
                                                 <HideBottomBarBorderProvider>
                                                   <GestureHandlerRootView
                                                     style={s.h100pct}>
-                                                    <IntentDialogProvider>
-                                                      <TestCtrls />
-                                                      <Shell />
-                                                      <NuxDialogs />
-                                                    </IntentDialogProvider>
+                                                    <GlobalGestureEventsProvider>
+                                                      <IntentDialogProvider>
+                                                        <TestCtrls />
+                                                        <Shell />
+                                                        <NuxDialogs />
+                                                      </IntentDialogProvider>
+                                                    </GlobalGestureEventsProvider>
                                                   </GestureHandlerRootView>
                                                 </HideBottomBarBorderProvider>
                                               </ServiceAccountManager>

src/alf/atoms.ts

···
   transition_none: web({
     transitionProperty: 'none',
   }),
+  transition_timing_default: web({
+    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
+    transitionDuration: '100ms',
+  }),
   transition_all: web({
     transitionProperty: 'all',
     transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',

src/components/ContextMenu/index.tsx

···
           if (item) playHaptic('Light')
           setHoveredMenuItem(item)
         },
-      } satisfies ContextType),
+      }) satisfies ContextType,
     [
       measurement,
       setMeasurement,
···
       const xOffset = position
         ? position.x
         : align === 'left'
-        ? measurement.x
-        : measurement.x + measurement.width - layout.width
+          ? measurement.x
+          : measurement.x + measurement.width - layout.width
 
       registerHoverable(
         id,

src/components/Link.tsx

···
     return typeof to === 'string'
       ? convertBskyAppUrlIfNeeded(sanitizeUrl(to))
       : to.screen
-      ? router.matchName(to.screen)?.build(to.params)
-      : to.href
-      ? convertBskyAppUrlIfNeeded(sanitizeUrl(to.href))
-      : undefined
+        ? router.matchName(to.screen)?.build(to.params)
+        : to.href
+          ? convertBskyAppUrlIfNeeded(sanitizeUrl(to.href))
+          : undefined
   }, [to])
 
   if (!href) {

src/components/Post/Embed/ImageEmbed.tsx

···
               rest.viewContext === PostEmbedViewContext.ThreadHighlighted
                 ? 'none'
                 : rest.viewContext ===
-                  PostEmbedViewContext.FeedEmbedRecordWithMedia
-                ? 'square'
-                : 'constrained'
+                    PostEmbedViewContext.FeedEmbedRecordWithMedia
+                  ? 'square'
+                  : 'constrained'
             }
             image={image}
             onPress={(containerRef, dims) => onPress(0, [containerRef], [dims])}

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

···
           !focused
             ? msg`Unmute video`
             : playing
-            ? msg`Pause video`
-            : msg`Play video`,
+              ? msg`Pause video`
+              : msg`Play video`,
         )}
         accessibilityHint=""
         style={[

src/components/PostControls/PostMenu/PostMenuItems.tsx

···
                         isDetachPending
                           ? Loader
                           : quoteEmbed.isDetached
-                          ? Eye
-                          : EyeSlash
+                            ? Eye
+                            : EyeSlash
                       }
                       position="right"
                     />

src/components/Select/index.web.tsx

···
             borderColor: focused
               ? t.palette.primary_500
               : hovered
-              ? t.palette.contrast_100
-              : t.palette.contrast_25,
+                ? t.palette.contrast_100
+                : t.palette.contrast_25,
           },
         ])}>
         {children}

src/components/Tooltip/const.ts

···
+import {atoms as a} from '#/alf'
+
+export const BUBBLE_MAX_WIDTH = 240
+export const ARROW_SIZE = 12
+export const ARROW_HALF_SIZE = ARROW_SIZE / 2
+export const MIN_EDGE_SPACE = a.px_lg.paddingLeft

src/components/Tooltip/index.tsx

···
+import {
+  Children,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {useWindowDimensions, View} from 'react-native'
+import Animated, {Easing, ZoomIn} from 'react-native-reanimated'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+
+import {atoms as a, select, useTheme} from '#/alf'
+import {useOnGesture} from '#/components/hooks/useOnGesture'
+import {Portal} from '#/components/Portal'
+import {
+  ARROW_HALF_SIZE,
+  ARROW_SIZE,
+  BUBBLE_MAX_WIDTH,
+  MIN_EDGE_SPACE,
+} from '#/components/Tooltip/const'
+import {Text} from '#/components/Typography'
+
+/**
+ * These are native specific values, not shared with web
+ */
+const ARROW_VISUAL_OFFSET = ARROW_SIZE / 1.25 // vibes-based, slightly off the target
+const BUBBLE_SHADOW_OFFSET = ARROW_SIZE / 3 // vibes-based, provide more shadow beneath tip
+
+type TooltipContextType = {
+  position: 'top' | 'bottom'
+  ready: boolean
+  onVisibleChange: (visible: boolean) => void
+}
+
+type TargetContextType = {
+  targetMeasurements:
+    | {
+        x: number
+        y: number
+        width: number
+        height: number
+      }
+    | undefined
+  targetRef: React.RefObject<View>
+}
+
+const TooltipContext = createContext<TooltipContextType>({
+  position: 'bottom',
+  ready: false,
+  onVisibleChange: () => {},
+})
+
+const TargetContext = createContext<TargetContextType>({
+  targetMeasurements: undefined,
+  targetRef: {current: null},
+})
+
+export function Outer({
+  children,
+  position = 'bottom',
+  visible: requestVisible,
+  onVisibleChange,
+}: {
+  children: React.ReactNode
+  position?: 'top' | 'bottom'
+  visible: boolean
+  onVisibleChange: (visible: boolean) => void
+}) {
+  /**
+   * Whether we have measured the target and are ready to show the tooltip.
+   */
+  const [ready, setReady] = useState(false)
+  /**
+   * Lagging state to track the externally-controlled visibility of the
+   * tooltip.
+   */
+  const [prevRequestVisible, setPrevRequestVisible] = useState<
+    boolean | undefined
+  >()
+  /**
+   * Needs to reference the element this Tooltip is attached to.
+   */
+  const targetRef = useRef<View>(null)
+  const [targetMeasurements, setTargetMeasurements] = useState<
+    | {
+        x: number
+        y: number
+        width: number
+        height: number
+      }
+    | undefined
+  >(undefined)
+
+  if (requestVisible && !prevRequestVisible) {
+    setPrevRequestVisible(true)
+
+    if (targetRef.current) {
+      /*
+       * Once opened, measure the dimensions and position of the target
+       */
+      targetRef.current.measure((_x, _y, width, height, pageX, pageY) => {
+        if (pageX !== undefined && pageY !== undefined && width && height) {
+          setTargetMeasurements({x: pageX, y: pageY, width, height})
+          setReady(true)
+        }
+      })
+    }
+  } else if (!requestVisible && prevRequestVisible) {
+    setPrevRequestVisible(false)
+    setTargetMeasurements(undefined)
+    setReady(false)
+  }
+
+  const ctx = useMemo(
+    () => ({position, ready, onVisibleChange}),
+    [position, ready, onVisibleChange],
+  )
+  const targetCtx = useMemo(
+    () => ({targetMeasurements, targetRef}),
+    [targetMeasurements, targetRef],
+  )
+
+  return (
+    <TooltipContext.Provider value={ctx}>
+      <TargetContext.Provider value={targetCtx}>
+        {children}
+      </TargetContext.Provider>
+    </TooltipContext.Provider>
+  )
+}
+
+export function Target({children}: {children: React.ReactNode}) {
+  const {targetRef} = useContext(TargetContext)
+
+  return (
+    <View collapsable={false} ref={targetRef}>
+      {children}
+    </View>
+  )
+}
+
+export function Content({
+  children,
+  label,
+}: {
+  children: React.ReactNode
+  label: string
+}) {
+  const {position, ready, onVisibleChange} = useContext(TooltipContext)
+  const {targetMeasurements} = useContext(TargetContext)
+  const requestClose = useCallback(() => {
+    onVisibleChange(false)
+  }, [onVisibleChange])
+
+  if (!ready || !targetMeasurements) return null
+
+  return (
+    <Portal>
+      <Bubble
+        label={label}
+        position={position}
+        /*
+         * Gotta pass these in here. Inside the Bubble, we're Potal-ed outside
+         * the context providers.
+         */
+        targetMeasurements={targetMeasurements}
+        requestClose={requestClose}>
+        {children}
+      </Bubble>
+    </Portal>
+  )
+}
+
+function Bubble({
+  children,
+  label,
+  position,
+  requestClose,
+  targetMeasurements,
+}: {
+  children: React.ReactNode
+  label: string
+  position: TooltipContextType['position']
+  requestClose: () => void
+  targetMeasurements: Exclude<
+    TargetContextType['targetMeasurements'],
+    undefined
+  >
+}) {
+  const t = useTheme()
+  const insets = useSafeAreaInsets()
+  const dimensions = useWindowDimensions()
+  const [bubbleMeasurements, setBubbleMeasurements] = useState<
+    | {
+        width: number
+        height: number
+      }
+    | undefined
+  >(undefined)
+  const coords = useMemo(() => {
+    if (!bubbleMeasurements)
+      return {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+        tipTop: 0,
+        tipLeft: 0,
+      }
+
+    const {width: ww, height: wh} = dimensions
+    const maxTop = insets.top
+    const maxBottom = wh - insets.bottom
+    const {width: cw, height: ch} = bubbleMeasurements
+    const minLeft = MIN_EDGE_SPACE
+    const maxLeft = ww - minLeft
+
+    let computedPosition: 'top' | 'bottom' = position
+    let top = targetMeasurements.y + targetMeasurements.height
+    let left = Math.max(
+      minLeft,
+      targetMeasurements.x + targetMeasurements.width / 2 - cw / 2,
+    )
+    const tipTranslate = ARROW_HALF_SIZE * -1
+    let tipTop = tipTranslate
+
+    if (left + cw > maxLeft) {
+      left -= left + cw - maxLeft
+    }
+
+    let tipLeft =
+      targetMeasurements.x -
+      left +
+      targetMeasurements.width / 2 -
+      ARROW_HALF_SIZE
+
+    let bottom = top + ch
+
+    function positionTop() {
+      top = top - ch - targetMeasurements.height
+      bottom = top + ch
+      tipTop = tipTop + ch
+      computedPosition = 'top'
+    }
+
+    function positionBottom() {
+      top = targetMeasurements.y + targetMeasurements.height
+      bottom = top + ch
+      tipTop = tipTranslate
+      computedPosition = 'bottom'
+    }
+
+    if (position === 'top') {
+      positionTop()
+      if (top < maxTop) {
+        positionBottom()
+      }
+    } else {
+      if (bottom > maxBottom) {
+        positionTop()
+      }
+    }
+
+    if (computedPosition === 'bottom') {
+      top += ARROW_VISUAL_OFFSET
+      bottom += ARROW_VISUAL_OFFSET
+    } else {
+      top -= ARROW_VISUAL_OFFSET
+      bottom -= ARROW_VISUAL_OFFSET
+    }
+
+    return {
+      computedPosition,
+      top,
+      bottom,
+      left,
+      right: left + cw,
+      tipTop,
+      tipLeft,
+    }
+  }, [position, targetMeasurements, bubbleMeasurements, insets, dimensions])
+
+  const requestCloseWrapped = useCallback(() => {
+    setBubbleMeasurements(undefined)
+    requestClose()
+  }, [requestClose])
+
+  useOnGesture(
+    useCallback(
+      e => {
+        const {x, y} = e
+        const isInside =
+          x > coords.left &&
+          x < coords.right &&
+          y > coords.top &&
+          y < coords.bottom
+
+        if (!isInside) {
+          requestCloseWrapped()
+        }
+      },
+      [coords, requestCloseWrapped],
+    ),
+  )
+
+  return (
+    <View
+      accessible
+      role="alert"
+      accessibilityHint=""
+      accessibilityLabel={label}
+      // android
+      importantForAccessibility="yes"
+      // ios
+      accessibilityViewIsModal
+      style={[
+        a.absolute,
+        a.align_start,
+        {
+          width: BUBBLE_MAX_WIDTH,
+          opacity: bubbleMeasurements ? 1 : 0,
+          top: coords.top,
+          left: coords.left,
+        },
+      ]}>
+      <Animated.View
+        entering={ZoomIn.easing(Easing.out(Easing.exp))}
+        style={{transformOrigin: oppposite(position)}}>
+        <View
+          style={[
+            a.absolute,
+            a.top_0,
+            a.z_10,
+            t.atoms.bg,
+            select(t.name, {
+              light: t.atoms.bg,
+              dark: t.atoms.bg_contrast_100,
+              dim: t.atoms.bg_contrast_100,
+            }),
+            {
+              borderTopLeftRadius: a.rounded_2xs.borderRadius,
+              borderBottomRightRadius: a.rounded_2xs.borderRadius,
+              width: ARROW_SIZE,
+              height: ARROW_SIZE,
+              transform: [{rotate: '45deg'}],
+              top: coords.tipTop,
+              left: coords.tipLeft,
+            },
+          ]}
+        />
+        <View
+          style={[
+            a.px_md,
+            a.py_sm,
+            a.rounded_sm,
+            select(t.name, {
+              light: t.atoms.bg,
+              dark: t.atoms.bg_contrast_100,
+              dim: t.atoms.bg_contrast_100,
+            }),
+            t.atoms.shadow_md,
+            {
+              shadowOpacity: 0.2,
+              shadowOffset: {
+                width: 0,
+                height:
+                  BUBBLE_SHADOW_OFFSET *
+                  (coords.computedPosition === 'bottom' ? -1 : 1),
+              },
+            },
+          ]}
+          onLayout={e => {
+            setBubbleMeasurements({
+              width: e.nativeEvent.layout.width,
+              height: e.nativeEvent.layout.height,
+            })
+          }}>
+          {children}
+        </View>
+      </Animated.View>
+    </View>
+  )
+}
+
+function oppposite(position: 'top' | 'bottom') {
+  switch (position) {
+    case 'top':
+      return 'center bottom'
+    case 'bottom':
+      return 'center top'
+    default:
+      return 'center'
+  }
+}
+
+export function TextBubble({children}: {children: React.ReactNode}) {
+  const c = Children.toArray(children)
+  return (
+    <Content label={c.join(' ')}>
+      <View style={[a.gap_xs]}>
+        {c.map((child, i) => (
+          <Text key={i} style={[a.text_sm, a.leading_snug]}>
+            {child}
+          </Text>
+        ))}
+      </View>
+    </Content>
+  )
+}

src/components/Tooltip/index.web.tsx

···
+import {Children, createContext, useContext, useMemo} from 'react'
+import {View} from 'react-native'
+import {Popover} from 'radix-ui'
+
+import {atoms as a, flatten, select, useTheme} from '#/alf'
+import {transparentifyColor} from '#/alf/util/colorGeneration'
+import {
+  ARROW_SIZE,
+  BUBBLE_MAX_WIDTH,
+  MIN_EDGE_SPACE,
+} from '#/components/Tooltip/const'
+import {Text} from '#/components/Typography'
+
+type TooltipContextType = {
+  position: 'top' | 'bottom'
+}
+
+const TooltipContext = createContext<TooltipContextType>({
+  position: 'bottom',
+})
+
+export function Outer({
+  children,
+  position = 'bottom',
+  visible,
+  onVisibleChange,
+}: {
+  children: React.ReactNode
+  position?: 'top' | 'bottom'
+  visible: boolean
+  onVisibleChange: (visible: boolean) => void
+}) {
+  const ctx = useMemo(() => ({position}), [position])
+  return (
+    <Popover.Root open={visible} onOpenChange={onVisibleChange}>
+      <TooltipContext.Provider value={ctx}>{children}</TooltipContext.Provider>
+    </Popover.Root>
+  )
+}
+
+export function Target({children}: {children: React.ReactNode}) {
+  return (
+    <Popover.Trigger asChild>
+      <View collapsable={false}>{children}</View>
+    </Popover.Trigger>
+  )
+}
+
+export function Content({
+  children,
+  label,
+}: {
+  children: React.ReactNode
+  label: string
+}) {
+  const t = useTheme()
+  const {position} = useContext(TooltipContext)
+  return (
+    <Popover.Portal>
+      <Popover.Content
+        className="radix-popover-content"
+        aria-label={label}
+        side={position}
+        sideOffset={4}
+        collisionPadding={MIN_EDGE_SPACE}
+        style={flatten([
+          a.rounded_sm,
+          select(t.name, {
+            light: t.atoms.bg,
+            dark: t.atoms.bg_contrast_100,
+            dim: t.atoms.bg_contrast_100,
+          }),
+          {
+            minWidth: 'max-content',
+            boxShadow: select(t.name, {
+              light: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
+              dark: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
+              dim: `0 0 24px ${transparentifyColor(t.palette.black, 0.2)}`,
+            }),
+          },
+        ])}>
+        <Popover.Arrow
+          width={ARROW_SIZE}
+          height={ARROW_SIZE / 2}
+          fill={select(t.name, {
+            light: t.atoms.bg.backgroundColor,
+            dark: t.atoms.bg_contrast_100.backgroundColor,
+            dim: t.atoms.bg_contrast_100.backgroundColor,
+          })}
+        />
+        <View style={[a.px_md, a.py_sm, {maxWidth: BUBBLE_MAX_WIDTH}]}>
+          {children}
+        </View>
+      </Popover.Content>
+    </Popover.Portal>
+  )
+}
+
+export function TextBubble({children}: {children: React.ReactNode}) {
+  const c = Children.toArray(children)
+  return (
+    <Content label={c.join(' ')}>
+      <View style={[a.gap_xs]}>
+        {c.map((child, i) => (
+          <Text key={i} style={[a.text_sm, a.leading_snug]}>
+            {child}
+          </Text>
+        ))}
+      </View>
+    </Content>
+  )
+}

src/components/WhoCanReply.tsx

···
 import React from 'react'
-import {Keyboard, Platform, StyleProp, View, ViewStyle} from 'react-native'
 import {
-  AppBskyFeedDefs,
+  Keyboard,
+  Platform,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from 'react-native'
+import {
+  type AppBskyFeedDefs,
   AppBskyFeedPost,
-  AppBskyGraphDefs,
+  type AppBskyGraphDefs,
   AtUri,
 } from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
···
 import {makeListLink, makeProfileLink} from '#/lib/routes/links'
 import {isNative} from '#/platform/detection'
 import {
-  ThreadgateAllowUISetting,
+  type ThreadgateAllowUISetting,
   threadgateViewToAllowUISetting,
 } from '#/state/queries/threadgate'
 import {atoms as a, useTheme} from '#/alf'
···
   const description = anyoneCanReply
     ? _(msg`Everybody can reply`)
     : noOneCanReply
-    ? _(msg`Replies disabled`)
-    : _(msg`Some people can reply`)
+      ? _(msg`Replies disabled`)
+      : _(msg`Some people can reply`)
 
   const onPressOpen = () => {
     if (isNative && Keyboard.isVisible()) {

src/components/dialogs/EmailDialog/screens/Manage2FA/Disable.tsx

···
                   state.emailStatus === 'pending'
                     ? Loader
                     : state.emailStatus === 'success'
-                    ? Check
-                    : Envelope
+                      ? Check
+                      : Envelope
                 }
               />
             </Button>

src/components/dialogs/EmailDialog/screens/Manage2FA/Enable.tsx

···
               state.status === 'pending'
                 ? Loader
                 : state.status === 'success'
-                ? Check
-                : ShieldIcon
+                  ? Check
+                  : ShieldIcon
             }
           />
         </Button>

src/components/dialogs/SearchablePeopleList.tsx

···
             !enabled
               ? {opacity: 0.5}
               : pressed || focused || hovered
-              ? t.atoms.bg_contrast_25
-              : t.atoms.bg,
+                ? t.atoms.bg_contrast_25
+                : t.atoms.bg,
           ]}>
           <ProfileCard.Header>
             <ProfileCard.Avatar

src/components/dms/EmojiReactionPicker.tsx

···
                           : t.palette.primary_500,
                       }
                     : alreadyReacted
-                    ? {backgroundColor: t.palette.primary_200}
-                    : bgColor,
+                      ? {backgroundColor: t.palette.primary_200}
+                      : bgColor,
                   {height: 40, width: 40},
                   a.justify_center,
                   a.align_center,

src/components/dms/MessageContextMenu.tsx

···
           label={_(msg`Message options`)}
           contentLabel={_(
             msg`Message from @${
-              sender?.handle ?? // should always be defined
-              'unknown'
+              sender?.handle ?? 'unknown' // should always be defined
             }: ${message.text}`,
           )}>
           {children}

src/components/hooks/useOnGesture/index.ts

···
+import {useEffect} from 'react'
+
+import {
+  type GlobalGestureEvents,
+  useGlobalGestureEvents,
+} from '#/state/global-gesture-events'
+
+/**
+ * Listen for global gesture events. Callback should be wrapped with
+ * `useCallback` or otherwise memoized to avoid unnecessary re-renders.
+ */
+export function useOnGesture(
+  onGestureCallback: (e: GlobalGestureEvents['begin']) => void,
+) {
+  const ctx = useGlobalGestureEvents()
+  useEffect(() => {
+    ctx.register()
+    ctx.events.on('begin', onGestureCallback)
+    return () => {
+      ctx.unregister()
+      ctx.events.off('begin', onGestureCallback)
+    }
+  }, [ctx, onGestureCallback])
+}

src/components/hooks/useOnGesture/index.web.ts

···
+export function useOnGesture() {}

src/components/icons/VerifiedCheck.tsx

···
 
 import {type Props, useCommonSVGProps} from '#/components/icons/common'
 
-export const VerifiedCheck = React.forwardRef<Svg, Props>(function LogoImpl(
-  props,
-  ref,
-) {
-  const {fill, size, style, ...rest} = useCommonSVGProps(props)
+export const VerifiedCheck = React.forwardRef<Svg, Props>(
+  function LogoImpl(props, ref) {
+    const {fill, size, style, ...rest} = useCommonSVGProps(props)
 
-  return (
-    <Svg
-      fill="none"
-      {...rest}
-      ref={ref}
-      viewBox="0 0 24 24"
-      width={size}
-      height={size}
-      style={[style]}>
-      <Circle cx="12" cy="12" r="11.5" fill={fill} />
-      <Path
-        fill="#fff"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17.659 8.175a1.361 1.361 0 0 1 0 1.925l-6.224 6.223a1.361 1.361 0 0 1-1.925 0L6.4 13.212a1.361 1.361 0 0 1 1.925-1.925l2.149 2.148 5.26-5.26a1.361 1.361 0 0 1 1.925 0Z"
-      />
-    </Svg>
-  )
-})
+    return (
+      <Svg
+        fill="none"
+        {...rest}
+        ref={ref}
+        viewBox="0 0 24 24"
+        width={size}
+        height={size}
+        style={[style]}>
+        <Circle cx="12" cy="12" r="11.5" fill={fill} />
+        <Path
+          fill="#fff"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.659 8.175a1.361 1.361 0 0 1 0 1.925l-6.224 6.223a1.361 1.361 0 0 1-1.925 0L6.4 13.212a1.361 1.361 0 0 1 1.925-1.925l2.149 2.148 5.26-5.26a1.361 1.361 0 0 1 1.925 0Z"
+        />
+      </Svg>
+    )
+  },
+)

src/components/icons/VerifierCheck.tsx

···
 
 import {type Props, useCommonSVGProps} from '#/components/icons/common'
 
-export const VerifierCheck = React.forwardRef<Svg, Props>(function LogoImpl(
-  props,
-  ref,
-) {
-  const {fill, size, style, ...rest} = useCommonSVGProps(props)
+export const VerifierCheck = React.forwardRef<Svg, Props>(
+  function LogoImpl(props, ref) {
+    const {fill, size, style, ...rest} = useCommonSVGProps(props)
 
-  return (
-    <Svg
-      fill="none"
-      {...rest}
-      ref={ref}
-      viewBox="0 0 24 24"
-      width={size}
-      height={size}
-      style={[style]}>
-      <Path
-        fill={fill}
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M8.792 1.615a4.154 4.154 0 0 1 6.416 0 4.154 4.154 0 0 0 3.146 1.515 4.154 4.154 0 0 1 4 5.017 4.154 4.154 0 0 0 .777 3.404 4.154 4.154 0 0 1-1.427 6.255 4.153 4.153 0 0 0-2.177 2.73 4.154 4.154 0 0 1-5.781 2.784 4.154 4.154 0 0 0-3.492 0 4.154 4.154 0 0 1-5.78-2.784 4.154 4.154 0 0 0-2.178-2.73A4.154 4.154 0 0 1 .87 11.551a4.154 4.154 0 0 0 .776-3.404A4.154 4.154 0 0 1 5.646 3.13a4.154 4.154 0 0 0 3.146-1.515Z"
-      />
-      <Path
-        fill="#fff"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M17.861 8.26a1.438 1.438 0 0 1 0 2.033l-6.571 6.571a1.437 1.437 0 0 1-2.033 0L5.97 13.58a1.438 1.438 0 0 1 2.033-2.033l2.27 2.269 5.554-5.555a1.437 1.437 0 0 1 2.033 0Z"
-      />
-    </Svg>
-  )
-})
+    return (
+      <Svg
+        fill="none"
+        {...rest}
+        ref={ref}
+        viewBox="0 0 24 24"
+        width={size}
+        height={size}
+        style={[style]}>
+        <Path
+          fill={fill}
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.792 1.615a4.154 4.154 0 0 1 6.416 0 4.154 4.154 0 0 0 3.146 1.515 4.154 4.154 0 0 1 4 5.017 4.154 4.154 0 0 0 .777 3.404 4.154 4.154 0 0 1-1.427 6.255 4.153 4.153 0 0 0-2.177 2.73 4.154 4.154 0 0 1-5.781 2.784 4.154 4.154 0 0 0-3.492 0 4.154 4.154 0 0 1-5.78-2.784 4.154 4.154 0 0 0-2.178-2.73A4.154 4.154 0 0 1 .87 11.551a4.154 4.154 0 0 0 .776-3.404A4.154 4.154 0 0 1 5.646 3.13a4.154 4.154 0 0 0 3.146-1.515Z"
+        />
+        <Path
+          fill="#fff"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M17.861 8.26a1.438 1.438 0 0 1 0 2.033l-6.571 6.571a1.437 1.437 0 0 1-2.033 0L5.97 13.58a1.438 1.438 0 0 1 2.033-2.033l2.27 2.269 5.554-5.555a1.437 1.437 0 0 1 2.033 0Z"
+        />
+      </Svg>
+    )
+  },
+)

src/components/moderation/ContentHider.tsx

···
 import React from 'react'
-import {StyleProp, View, ViewStyle} from 'react-native'
-import {ModerationUI} from '@atproto/api'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
+import {type ModerationUI} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
···
           modui.noOverride
             ? _(msg`Learn more about the moderation applied to this content`)
             : override
-            ? _(msg`Hides the content`)
-            : _(msg`Shows the content`)
+              ? _(msg`Hides the content`)
+              : _(msg`Shows the content`)
         }>
         {state => (
           <View

src/components/moderation/ReportDialog/index.tsx

···
             backgroundColor: active
               ? t.palette.primary_500
               : completed
-              ? t.palette.primary_100
-              : t.atoms.bg_contrast_25.backgroundColor,
+                ? t.palette.primary_100
+                : t.atoms.bg_contrast_25.backgroundColor,
             borderColor: active
               ? t.palette.primary_500
               : completed
-              ? t.palette.primary_400
-              : t.atoms.border_contrast_low.borderColor,
+                ? t.palette.primary_400
+                : t.atoms.border_contrast_low.borderColor,
           },
         ]}>
         {completed ? (
···
                 color: active
                   ? 'white'
                   : completed
-                  ? t.palette.primary_700
-                  : t.atoms.text_contrast_medium.color,
+                    ? t.palette.primary_700
+                    : t.atoms.text_contrast_medium.color,
                 fontVariant: ['tabular-nums'],
                 width: 24,
                 height: 24,

src/components/verification/VerificationCheckButton.tsx

···
                 verifiedByHidden
                   ? t.atoms.bg_contrast_100.backgroundColor
                   : state.profile.isVerified
-                  ? t.palette.primary_500
-                  : t.atoms.bg_contrast_100.backgroundColor
+                    ? t.palette.primary_500
+                    : t.atoms.bg_contrast_100.backgroundColor
               }
               verifier={state.profile.role === 'verifier'}
             />

src/components/verification/VerificationsDialog.tsx

···
       ? _(msg`You are verified`)
       : _(msg`Your verifications`)
     : state.profile.isVerified
-    ? _(msg`${userName} is verified`)
-    : _(
-        msg({
-          message: `${userName}'s verifications`,
-          comment: `Possessive, meaning "the verifications of {userName}"`,
-        }),
-      )
+      ? _(msg`${userName} is verified`)
+      : _(
+          msg({
+            message: `${userName}'s verifications`,
+            comment: `Possessive, meaning "the verifications of {userName}"`,
+          }),
+        )
 
   return (
     <Dialog.ScrollableInner

src/lib/moderation.ts

···
 import React from 'react'
 import {
-  AppBskyLabelerDefs,
+  type AppBskyLabelerDefs,
   BskyAgent,
-  ComAtprotoLabelDefs,
-  InterpretedLabelValueDefinition,
+  type ComAtprotoLabelDefs,
+  type InterpretedLabelValueDefinition,
   LABELS,
-  ModerationCause,
-  ModerationOpts,
-  ModerationUI,
+  type ModerationCause,
+  type ModerationOpts,
+  type ModerationUI,
 } from '@atproto/api'
 
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
-import {AppModerationCause} from '#/components/Pills'
+import {type AppModerationCause} from '#/components/Pills'
 
 export const ADULT_CONTENT_LABELS = ['sexual', 'nudity', 'porn']
 export const OTHER_SELF_LABELS = ['graphic-media']
···
     cause.source.type === 'labeler'
       ? cause.source.did
       : cause.source.type === 'list'
-      ? cause.source.list.uri
-      : 'user'
+        ? cause.source.list.uri
+        : 'user'
   if (cause.type === 'label') {
     return `label:${cause.label.val}:${source}`
   }

src/lib/moderation/useModerationCauseDescription.ts

···
 import React from 'react'
 import {
   BSKY_LABELER_DID,
-  ModerationCause,
-  ModerationCauseSource,
+  type ModerationCause,
+  type ModerationCauseSource,
 } from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
···
 import {useSession} from '#/state/session'
 import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
-import {Props as SVGIconProps} from '#/components/icons/common'
+import {type Props as SVGIconProps} from '#/components/icons/common'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
 import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
-import {AppModerationCause} from '#/components/Pills'
+import {type AppModerationCause} from '#/components/Pills'
 import {useGlobalLabelStrings} from './useGlobalLabelStrings'
 import {getDefinition, getLabelStrings} from './useLabelInfo'
 
···
           def.identifier === '!no-unauthenticated'
             ? EyeSlash
             : def.severity === 'alert'
-            ? Warning
-            : CircleInfo,
+              ? Warning
+              : CircleInfo,
         name: strings.name,
         description: strings.description,
         source,

src/locale/locales/en/messages.po

···
 msgid "<0>{0}</0> is included in your starter pack"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:296
+#: src/components/WhoCanReply.tsx:302
 msgid "<0>{0}</0> members"
 msgstr ""
 
···
 msgid "An error occurred while compressing the video."
 msgstr ""
 
-#: src/state/queries/explore-feed-previews.tsx:184
+#: src/state/queries/explore-feed-previews.tsx:173
 msgid "An error occurred while fetching the feed."
 msgstr ""
 
···
 msgid "an unknown labeler"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:317
+#: src/components/WhoCanReply.tsx:323
 msgid "and"
 msgstr ""
 
···
 msgid "Are you sure you want to delete the app password \"{0}\"?"
 msgstr ""
 
-#: src/components/dms/MessageContextMenu.tsx:189
+#: src/components/dms/MessageContextMenu.tsx:188
 msgid "Are you sure you want to delete this message? The message will be deleted for you, but not for the other participant."
 msgstr ""
 
···
 msgid "At least 3 characters"
 msgstr ""
 
-#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:40
+#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:48
 msgctxt "Name of app icon variant"
 msgid "Aurora"
 msgstr ""
···
 msgid "Bluesky cannot confirm the authenticity of the claimed date."
 msgstr ""
 
-#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:129
+#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:165
 msgctxt "Name of app icon variant"
 msgid "Bluesky Classic™"
 msgstr ""
···
 msgid "Copy link to starter pack"
 msgstr ""
 
-#: src/components/dms/MessageContextMenu.tsx:150
-#: src/components/dms/MessageContextMenu.tsx:153
+#: src/components/dms/MessageContextMenu.tsx:149
+#: src/components/dms/MessageContextMenu.tsx:152
 msgid "Copy message text"
 msgstr ""
 
···
 msgid "Could not process your video"
 msgstr ""
 
-#: src/state/queries/notifications/settings.ts:50
+#: src/state/queries/notifications/settings.ts:49
 msgid "Could not update notification settings"
 msgstr ""
 
···
 msgid "Dark"
 msgstr ""
 
-#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:24
+#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:28
 msgctxt "Name of app icon variant"
 msgid "Dark"
 msgstr ""
···
 msgid "Default icons"
 msgstr ""
 
-#: src/components/dms/MessageContextMenu.tsx:191
+#: src/components/dms/MessageContextMenu.tsx:190
 #: src/components/PostControls/PostMenu/PostMenuItems.tsx:701
 #: src/screens/Messages/components/ChatStatusInfo.tsx:55
 #: src/screens/Settings/AppPasswords.tsx:212
···
 msgid "Delete Conversation"
 msgstr ""
 
-#: src/components/dms/MessageContextMenu.tsx:164
+#: src/components/dms/MessageContextMenu.tsx:163
 msgid "Delete for me"
 msgstr ""
 
···
 msgid "Delete list"
 msgstr ""
 
-#: src/components/dms/MessageContextMenu.tsx:187
+#: src/components/dms/MessageContextMenu.tsx:186
 msgid "Delete message"
 msgstr ""
 
-#: src/components/dms/MessageContextMenu.tsx:162
+#: src/components/dms/MessageContextMenu.tsx:161
 msgid "Delete message for me"
 msgstr ""
 
···
 msgid "Developer options"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:179
+#: src/components/WhoCanReply.tsx:185
 msgid "Dialog: adjust who can interact with this post"
 msgstr ""
 
···
 msgid "Edit User List"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:91
+#: src/components/WhoCanReply.tsx:97
 msgid "Edit who can reply"
 msgstr ""
 
···
 msgid "Everybody"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:71
+#: src/components/WhoCanReply.tsx:77
 msgid "Everybody can reply"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:222
+#: src/components/WhoCanReply.tsx:228
 msgid "Everybody can reply to this post."
 msgstr ""
 
···
 msgid "Fitness"
 msgstr ""
 
-#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:117
+#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:149
 msgctxt "Name of app icon variant"
 msgid "Flat Black"
 msgstr ""
 
-#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:93
+#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:117
 msgctxt "Name of app icon variant"
 msgid "Flat Blue"
 msgstr ""
 
-#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:105
+#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:133
 msgctxt "Name of app icon variant"
 msgid "Flat White"
 msgstr ""
···
 msgid "Hides the content"
 msgstr ""
 
-#: src/view/com/posts/PostFeedErrorMessage.tsx:117
+#: src/view/com/posts/PostFeedErrorMessage.tsx:121
 msgid "Hmm, some kind of issue occurred when contacting the feed server. Please let the feed owner know about this issue."
 msgstr ""
 
-#: src/view/com/posts/PostFeedErrorMessage.tsx:105
+#: src/view/com/posts/PostFeedErrorMessage.tsx:109
 msgid "Hmm, the feed server appears to be misconfigured. Please let the feed owner know about this issue."
 msgstr ""
 
-#: src/view/com/posts/PostFeedErrorMessage.tsx:111
+#: src/view/com/posts/PostFeedErrorMessage.tsx:115
 msgid "Hmm, the feed server appears to be offline. Please let the feed owner know about this issue."
 msgstr ""
 
-#: src/view/com/posts/PostFeedErrorMessage.tsx:108
+#: src/view/com/posts/PostFeedErrorMessage.tsx:112
 msgid "Hmm, the feed server gave a bad response. Please let the feed owner know about this issue."
 msgstr ""
 
-#: src/view/com/posts/PostFeedErrorMessage.tsx:102
+#: src/view/com/posts/PostFeedErrorMessage.tsx:106
 msgid "Hmm, we're having trouble finding this feed. It may have been deleted."
 msgstr ""
 
···
 msgid "Mention notifications"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:263
+#: src/components/WhoCanReply.tsx:269
 msgid "mentioned users"
 msgstr ""
 
···
 msgid "Message from @{0}: {1}"
 msgstr ""
 
-#: src/view/com/posts/PostFeedErrorMessage.tsx:201
+#: src/view/com/posts/PostFeedErrorMessage.tsx:205
 msgid "Message from server: {0}"
 msgstr ""
 
···
 msgid "Messages"
 msgstr ""
 
-#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:81
+#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:101
 msgctxt "Name of app icon variant"
 msgid "Midnight"
 msgstr ""
···
 msgid "No one"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:246
+#: src/components/WhoCanReply.tsx:252
 msgid "No one but the author can quote this post."
 msgstr ""
 
···
 msgid "Only .jpg and .png files are supported"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:226
+#: src/components/WhoCanReply.tsx:232
 msgid "Only {0} can reply."
 msgstr ""
 
···
 msgid "Posts can be muted based on their text, their tags, or both. We recommend avoiding common words that appear in many posts, since it can result in no posts being shown."
 msgstr ""
 
-#: src/view/com/posts/PostFeedErrorMessage.tsx:68
+#: src/view/com/posts/PostFeedErrorMessage.tsx:72
 msgid "Posts hidden"
 msgstr ""
 
···
 #: src/screens/Settings/Settings.tsx:556
 #: src/view/com/feeds/FeedSourceCard.tsx:322
 #: src/view/com/modals/UserAddRemoveLists.tsx:235
-#: src/view/com/posts/PostFeedErrorMessage.tsx:213
+#: src/view/com/posts/PostFeedErrorMessage.tsx:217
 msgid "Remove"
 msgstr ""
 
···
 
 #: src/view/com/posts/FeedShutdownMsg.tsx:116
 #: src/view/com/posts/FeedShutdownMsg.tsx:120
-#: src/view/com/posts/PostFeedErrorMessage.tsx:169
+#: src/view/com/posts/PostFeedErrorMessage.tsx:173
 msgid "Remove feed"
 msgstr ""
 
-#: src/view/com/posts/PostFeedErrorMessage.tsx:210
+#: src/view/com/posts/PostFeedErrorMessage.tsx:214
 msgid "Remove feed?"
 msgstr ""
 
···
 msgid "Remove subtitle file"
 msgstr ""
 
-#: src/view/com/posts/PostFeedErrorMessage.tsx:211
+#: src/view/com/posts/PostFeedErrorMessage.tsx:215
 msgid "Remove this feed from your saved feeds"
 msgstr ""
 
···
 msgid "Replies"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:73
+#: src/components/WhoCanReply.tsx:79
 msgid "Replies disabled"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:224
+#: src/components/WhoCanReply.tsx:230
 msgid "Replies to this post are disabled."
 msgstr ""
 
···
 msgid "Reply was successfully hidden"
 msgstr ""
 
-#: src/components/dms/MessageContextMenu.tsx:172
+#: src/components/dms/MessageContextMenu.tsx:171
 #: src/components/dms/MessagesListBlockedFooter.tsx:85
 #: src/components/dms/MessagesListBlockedFooter.tsx:92
 msgid "Report"
···
 msgid "Report list"
 msgstr ""
 
-#: src/components/dms/MessageContextMenu.tsx:170
+#: src/components/dms/MessageContextMenu.tsx:169
 msgid "Report message"
 msgstr ""
 
···
 msgid "Some other feeds you might like"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:74
+#: src/components/WhoCanReply.tsx:80
 msgid "Some people can reply"
 msgstr ""
 
···
 msgid "Suggestive"
 msgstr ""
 
-#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:60
+#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:72
 msgctxt "Name of app icon variant"
 msgid "Sunrise"
 msgstr ""
 
-#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:70
+#: src/screens/Settings/AppIconSettings/useAppIconSets.ts:86
 msgctxt "Name of app icon variant"
 msgid "Sunset"
 msgstr ""
···
 msgstr ""
 
 #: src/screens/Search/Explore.tsx:990
-#: src/view/com/posts/PostFeed.tsx:657
+#: src/view/com/posts/PostFeed.tsx:656
 msgid "There was an issue fetching posts. Tap here to try again."
 msgstr ""
 
···
 msgid "There was an issue fetching your service info"
 msgstr ""
 
-#: src/view/com/posts/PostFeedErrorMessage.tsx:145
+#: src/view/com/posts/PostFeedErrorMessage.tsx:149
 msgid "There was an issue removing this feed. Please check your internet connection and try again."
 msgstr ""
 
···
 msgid "This content is not available because one of the users involved has blocked the other."
 msgstr ""
 
-#: src/view/com/posts/PostFeedErrorMessage.tsx:114
+#: src/view/com/posts/PostFeedErrorMessage.tsx:118
 msgid "This content is not viewable without a Bluesky account."
 msgstr ""
 
···
 msgid "This feature is not available while using an App Password. Please sign in with your main password."
 msgstr ""
 
-#: src/view/com/posts/PostFeedErrorMessage.tsx:120
+#: src/view/com/posts/PostFeedErrorMessage.tsx:124
 msgid "This feed is currently receiving high traffic and is temporarily unavailable. Please try again later."
 msgstr ""
 
···
 msgid "This post claims to have been created on <0>{0}</0>, but was first seen by Bluesky on <1>{1}</1>."
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:217
+#: src/components/WhoCanReply.tsx:223
 msgid "This post has an unknown type of threadgate on it. Your app may be out of date."
 msgstr ""
 
···
 msgid "Topic"
 msgstr ""
 
-#: src/components/dms/MessageContextMenu.tsx:143
-#: src/components/dms/MessageContextMenu.tsx:145
+#: src/components/dms/MessageContextMenu.tsx:142
+#: src/components/dms/MessageContextMenu.tsx:144
 #: src/components/PostControls/PostMenu/PostMenuItems.tsx:444
 #: src/components/PostControls/PostMenu/PostMenuItems.tsx:446
 #: src/screens/PostThread/components/ThreadItemAnchor.tsx:567
···
 msgid "Username or email address"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:280
+#: src/components/WhoCanReply.tsx:286
 msgid "users followed by <0>@{0}</0>"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:267
+#: src/components/WhoCanReply.tsx:273
 msgid "users following <0>@{0}</0>"
 msgstr ""
 
···
 #: src/components/ProfileHoverCard/index.web.tsx:464
 #: src/components/ProfileHoverCard/index.web.tsx:484
 #: src/components/ProfileHoverCard/index.web.tsx:511
-#: src/view/com/posts/PostFeedErrorMessage.tsx:175
+#: src/view/com/posts/PostFeedErrorMessage.tsx:179
 #: src/view/com/util/PostMeta.tsx:91
 #: src/view/com/util/PostMeta.tsx:126
 msgid "View profile"
···
 msgid "Which languages would you like to see in your algorithmic feeds?"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:183
+#: src/components/WhoCanReply.tsx:189
 msgid "Who can interact with this post?"
 msgstr ""
 
-#: src/components/WhoCanReply.tsx:91
+#: src/components/WhoCanReply.tsx:97
 msgid "Who can reply"
 msgstr ""
 

src/platform/polyfills.ts

···
       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,
-          )
+          ? String.fromCharCode((bitmap >> 16) & 255, (bitmap >> 8) & 255)
+          : String.fromCharCode(
+              (bitmap >> 16) & 255,
+              (bitmap >> 8) & 255,
+              bitmap & 255,
+            )
   }
   return result
 }

src/screens/Login/index.tsx

···
     requestedAccount
       ? Forms.Login
       : accounts.length
-      ? Forms.ChooseAccount
-      : Forms.Login,
+        ? Forms.ChooseAccount
+        : Forms.Login,
   )
 
   const {

src/screens/Messages/ChatList.tsx

···
           profiles: inboxPreviewConvos.slice(0, 3),
         },
         ...conversations.map(
-          convo => ({type: 'CONVERSATION', conversation: convo} as const),
+          convo => ({type: 'CONVERSATION', conversation: convo}) as const,
         ),
       ] satisfies ListItem[]
     }

src/screens/Onboarding/StepFinished.tsx

···
             avatarResult: profileStepResults.isCreatedAvatar
               ? 'created'
               : profileStepResults.image
-              ? 'uploaded'
-              : 'default',
+                ? 'uploaded'
+                : 'default',
           })
         })(),
         requestNotificationsPermission('AfterOnboarding'),

src/screens/Profile/Header/ProfileHeaderLabeler.tsx

···
                             ? t.palette.contrast_50
                             : t.palette.contrast_25
                           : state.hovered || state.pressed
-                          ? tokens.color.temp_purple_dark
-                          : tokens.color.temp_purple,
+                            ? tokens.color.temp_purple_dark
+                            : tokens.color.temp_purple,
                       },
                     ]}>
                     <Text

src/screens/Search/Explore.tsx

···
   ])
 
   const topBorder = useMemo(
-    () => ({type: 'topBorder', key: 'top-border'} as const),
+    () => ({type: 'topBorder', key: 'top-border'}) as const,
     [],
   )
   const trendingTopicsModule = useMemo(
-    () => ({type: 'trendingTopics', key: 'trending-topics'} as const),
+    () => ({type: 'trendingTopics', key: 'trending-topics'}) as const,
     [],
   )
   const suggestedFollowsModule = useMemo(() => {

src/screens/Settings/AppIconSettings/useAppIconSets.ts

···
         id: 'default_light',
         name: _(msg({context: 'Name of app icon variant', message: 'Light'})),
         iosImage: () => {
-          return require(`../../../../assets/app-icons/ios_icon_default_light.png`)
+          return require(
+            `../../../../assets/app-icons/ios_icon_default_light.png`,
+          )
         },
         androidImage: () => {
-          return require(`../../../../assets/app-icons/android_icon_default_light.png`)
+          return require(
+            `../../../../assets/app-icons/android_icon_default_light.png`,
+          )
         },
       },
       {
         id: 'default_dark',
         name: _(msg({context: 'Name of app icon variant', message: 'Dark'})),
         iosImage: () => {
-          return require(`../../../../assets/app-icons/ios_icon_default_dark.png`)
+          return require(
+            `../../../../assets/app-icons/ios_icon_default_dark.png`,
+          )
         },
         androidImage: () => {
-          return require(`../../../../assets/app-icons/android_icon_default_dark.png`)
+          return require(
+            `../../../../assets/app-icons/android_icon_default_dark.png`,
+          )
         },
       },
     ] satisfies AppIconSet[]

src/screens/Settings/components/ChangeHandleDialog.tsx

···
             isVerified
               ? _(msg`Update to ${domain}`)
               : dnsPanel
-              ? _(msg`Verify DNS Record`)
-              : _(msg`Verify Text File`)
+                ? _(msg`Verify DNS Record`)
+                : _(msg`Verify Text File`)
           }
           variant="solid"
           size="large"

src/state/cache/profile-shadow.ts

···
       'status' in shadow
         ? shadow.status
         : 'status' in profile
-        ? profile.status
-        : undefined,
+          ? profile.status
+          : undefined,
   })
 }
 

src/state/global-gesture-events/index.tsx

···
+import {createContext, useContext, useMemo, useRef, useState} from 'react'
+import {View} from 'react-native'
+import {
+  Gesture,
+  GestureDetector,
+  type GestureStateChangeEvent,
+  type GestureUpdateEvent,
+  type PanGestureHandlerEventPayload,
+} from 'react-native-gesture-handler'
+import EventEmitter from 'eventemitter3'
+
+export type GlobalGestureEvents = {
+  begin: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+  update: GestureUpdateEvent<PanGestureHandlerEventPayload>
+  end: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+  finalize: GestureStateChangeEvent<PanGestureHandlerEventPayload>
+}
+
+const Context = createContext<{
+  events: EventEmitter<GlobalGestureEvents>
+  register: () => void
+  unregister: () => void
+}>({
+  events: new EventEmitter<GlobalGestureEvents>(),
+  register: () => {},
+  unregister: () => {},
+})
+
+export function GlobalGestureEventsProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const refCount = useRef(0)
+  const events = useMemo(() => new EventEmitter<GlobalGestureEvents>(), [])
+  const [enabled, setEnabled] = useState(false)
+  const ctx = useMemo(
+    () => ({
+      events,
+      register() {
+        refCount.current += 1
+        if (refCount.current === 1) {
+          setEnabled(true)
+        }
+      },
+      unregister() {
+        refCount.current -= 1
+        if (refCount.current === 0) {
+          setEnabled(false)
+        }
+      },
+    }),
+    [events, setEnabled],
+  )
+  const gesture = Gesture.Pan()
+    .runOnJS(true)
+    .enabled(enabled)
+    .simultaneousWithExternalGesture()
+    .onBegin(e => {
+      events.emit('begin', e)
+    })
+    .onUpdate(e => {
+      events.emit('update', e)
+    })
+    .onEnd(e => {
+      events.emit('end', e)
+    })
+    .onFinalize(e => {
+      events.emit('finalize', e)
+    })
+
+  return (
+    <Context.Provider value={ctx}>
+      <GestureDetector gesture={gesture}>
+        <View collapsable={false}>{children}</View>
+      </GestureDetector>
+    </Context.Provider>
+  )
+}
+
+export function useGlobalGestureEvents() {
+  return useContext(Context)
+}

src/state/global-gesture-events/index.web.tsx

···
+export function GlobalGestureEventsProvider(_props: {
+  children: React.ReactNode
+}) {
+  throw new Error('GlobalGestureEventsProvider is not supported on web.')
+}
+
+export function useGlobalGestureEvents() {
+  throw new Error('useGlobalGestureEvents is not supported on web.')
+}

src/state/queries/explore-feed-previews.tsx

···
 const LIMIT = 8 // sliced to 6, overfetch to account for moderation
 const PINNED_POST_URIS: Record<string, boolean> = {
   // 📰 News
-  'at://did:plc:kkf4naxqmweop7dv4l2iqqf5/app.bsky.feed.post/3lgh27w2ngc2b':
-    true,
+  'at://did:plc:kkf4naxqmweop7dv4l2iqqf5/app.bsky.feed.post/3lgh27w2ngc2b': true,
   // Gardening
-  'at://did:plc:5rw2on4i56btlcajojaxwcat/app.bsky.feed.post/3kjorckgcwc27':
-    true,
+  'at://did:plc:5rw2on4i56btlcajojaxwcat/app.bsky.feed.post/3kjorckgcwc27': true,
   // Web Development Trending
-  'at://did:plc:m2sjv3wncvsasdapla35hzwj/app.bsky.feed.post/3lfaw445axs22':
-    true,
+  'at://did:plc:m2sjv3wncvsasdapla35hzwj/app.bsky.feed.post/3lfaw445axs22': true,
   // Anime & Manga EN
-  'at://did:plc:tazrmeme4dzahimsykusrwrk/app.bsky.feed.post/3knxx2gmkns2y':
-    true,
+  'at://did:plc:tazrmeme4dzahimsykusrwrk/app.bsky.feed.post/3knxx2gmkns2y': true,
   // 📽️ Film
-  'at://did:plc:2hwwem55ce6djnk6bn62cstr/app.bsky.feed.post/3llhpzhbq7c2g':
-    true,
+  'at://did:plc:2hwwem55ce6djnk6bn62cstr/app.bsky.feed.post/3llhpzhbq7c2g': true,
   // PopSky
-  'at://did:plc:lfdf4srj43iwdng7jn35tjsp/app.bsky.feed.post/3lbblgly65c2g':
-    true,
+  'at://did:plc:lfdf4srj43iwdng7jn35tjsp/app.bsky.feed.post/3lbblgly65c2g': true,
   // Science
-  'at://did:plc:hu2obebw3nhfj667522dahfg/app.bsky.feed.post/3kl33otd6ob2s':
-    true,
+  'at://did:plc:hu2obebw3nhfj667522dahfg/app.bsky.feed.post/3kl33otd6ob2s': true,
   // Birds! 🦉
-  'at://did:plc:ffkgesg3jsv2j7aagkzrtcvt/app.bsky.feed.post/3lbg4r57yk22d':
-    true,
+  'at://did:plc:ffkgesg3jsv2j7aagkzrtcvt/app.bsky.feed.post/3lbg4r57yk22d': true,
   // Astronomy
-  'at://did:plc:xy2zorw2ys47poflotxthlzg/app.bsky.feed.post/3kyzye4lujs2w':
-    true,
+  'at://did:plc:xy2zorw2ys47poflotxthlzg/app.bsky.feed.post/3kyzye4lujs2w': true,
   // What's Cooking 🍽️
-  'at://did:plc:geoqe3qls5mwezckxxsewys2/app.bsky.feed.post/3lfqhgvxbqc2q':
-    true,
+  'at://did:plc:geoqe3qls5mwezckxxsewys2/app.bsky.feed.post/3lfqhgvxbqc2q': true,
   // BookSky 💙📚 #booksky
-  'at://did:plc:geoqe3qls5mwezckxxsewys2/app.bsky.feed.post/3kgrm2rw5ww2e':
-    true,
+  'at://did:plc:geoqe3qls5mwezckxxsewys2/app.bsky.feed.post/3kgrm2rw5ww2e': true,
 }
 
 export type FeedPreviewItem =

src/state/queries/notifications/settings.ts

···
     mutationFn: async (
       update: Partial<AppBskyNotificationDefs.Preferences>,
     ) => {
-      const response = await agent.app.bsky.notification.putPreferencesV2(
-        update,
-      )
+      const response =
+        await agent.app.bsky.notification.putPreferencesV2(update)
       return response.data.preferences
     },
     onMutate: update => {

src/state/queries/notifications/unread.tsx

···
 import {useModerationOpts} from '../../preferences/moderation-opts'
 import {truncateAndInvalidate} from '../util'
 import {RQKEY as RQKEY_NOTIFS} from './feed'
-import {CachedFeedPage, FeedPage} from './types'
+import {type CachedFeedPage, type FeedPage} from './types'
 import {fetchPage} from './util'
 
 const UPDATE_INTERVAL = 30 * 1e3 // 30sec
···
           data.event === '30+'
             ? 30
             : data.event === ''
-            ? 0
-            : parseInt(data.event, 10) || 1,
+              ? 0
+              : parseInt(data.event, 10) || 1,
       }
       setNumUnread(data.event)
     }
···
             unreadCount >= 30
               ? '30+'
               : unreadCount === 0
-              ? ''
-              : String(unreadCount)
+                ? ''
+                : String(unreadCount)
 
           // track last sync
           const now = new Date()

src/state/queries/usePostThread/index.ts

···
     return view === 'linear'
       ? LINEAR_VIEW_BELOW
       : isWeb && gtPhone
-      ? TREE_VIEW_BELOW_DESKTOP
-      : TREE_VIEW_BELOW
+        ? TREE_VIEW_BELOW_DESKTOP
+        : TREE_VIEW_BELOW
   }, [view, gtPhone])
 
   const postThreadQueryKey = createPostThreadQueryKey({

src/state/queries/usePostThread/traversal.ts

···
     const anchorPost = items.at(0)
     const hasAnchorFromCache = anchorPost && anchorPost.type === 'threadPost'
     const skeletonReplies = hasAnchorFromCache
-      ? anchorPost.value.post.replyCount ?? 4
+      ? (anchorPost.value.post.replyCount ?? 4)
       : 4
 
     if (!items.length) {

src/storage/index.ts

···
 import {useCallback, useEffect, useState} from 'react'
 import {MMKV} from 'react-native-mmkv'
 
-import {Account, Device} from '#/storage/schema'
+import {type Account, type Device} from '#/storage/schema'
 
 export * from '#/storage/schema'
 
···
   }
 }
 
-type StorageSchema<T extends Storage<any, any>> = T extends Storage<
-  any,
-  infer U
->
-  ? U
-  : never
-type StorageScopes<T extends Storage<any, any>> = T extends Storage<
-  infer S,
-  any
->
-  ? S
-  : never
+type StorageSchema<T extends Storage<any, any>> =
+  T extends Storage<any, infer U> ? U : never
+type StorageScopes<T extends Storage<any, any>> =
+  T extends Storage<infer S, any> ? S : never
 
 /**
  * Hook to use a storage instance. Acts like a useState hook, but persists the

src/style.css

···
 
 /* #/components/Select/index.web.tsx */
 .radix-select-content {
-  box-shadow: 0px 6px 24px -10px rgba(22, 23, 24, 0.25),
+  box-shadow:
+    0px 6px 24px -10px rgba(22, 23, 24, 0.25),
     0px 6px 12px -12px rgba(22, 23, 24, 0.15);
   min-width: var(--radix-select-trigger-width);
   max-height: var(--radix-select-content-available-height);
 }
+
+/*
+ * #/components/Tooltip/index.web.tsx
+ */
+.radix-popover-content {
+  animation-duration: 300ms;
+  animation-timing-function: cubic-bezier(0.17, 0.73, 0.14, 1);
+  will-change: transform, opacity;
+}
+.radix-popover-content[data-state='open'][data-side='top'] {
+  animation-name: radixPopoverSlideUpAndFade;
+}
+.radix-popover-content[data-state='open'][data-side='bottom'] {
+  animation-name: radixPopoverSlideDownAndFade;
+}
+@keyframes radixPopoverSlideUpAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@keyframes radixPopoverSlideDownAndFade {
+  from {
+    opacity: 0;
+    transform: translateY(-2px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

src/view/com/composer/Composer.tsx

···
       thread.posts.length > 1
         ? _(msg`Your posts have been published`)
         : replyTo
-        ? _(msg`Your reply has been published`)
-        : _(msg`Your post has been published`),
+          ? _(msg`Your reply has been published`)
+          : _(msg`Your post has been published`),
     )
   }, [
     _,
···
                       }),
                     )
                 : isThread
-                ? _(
-                    msg({
-                      message: 'Publish posts',
-                      comment:
-                        'Accessibility label for button to publish multiple posts in a thread',
-                    }),
-                  )
-                : _(
-                    msg({
-                      message: 'Publish post',
-                      comment:
-                        'Accessibility label for button to publish a single post',
-                    }),
-                  )
+                  ? _(
+                      msg({
+                        message: 'Publish posts',
+                        comment:
+                          'Accessibility label for button to publish multiple posts in a thread',
+                      }),
+                    )
+                  : _(
+                      msg({
+                        message: 'Publish post',
+                        comment:
+                          'Accessibility label for button to publish a single post',
+                      }),
+                    )
             }
             variant="solid"
             color="primary"

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

···
 import React from 'react'
 import {
-  ImageStyle,
+  type ImageStyle,
   Keyboard,
-  LayoutChangeEvent,
+  type LayoutChangeEvent,
   StyleSheet,
   TouchableOpacity,
   View,
-  ViewStyle,
+  type ViewStyle,
 } from 'react-native'
 import {Image} from 'expo-image'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
···
 import {useLingui} from '@lingui/react'
 
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {Dimensions} from '#/lib/media/types'
+import {type Dimensions} from '#/lib/media/types'
 import {colors, s} from '#/lib/styles'
 import {isNative} from '#/platform/detection'
-import {ComposerImage, cropImage} from '#/state/gallery'
+import {type ComposerImage, cropImage} from '#/state/gallery'
 import {Text} from '#/view/com/util/text/Text'
 import {useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
-import {PostAction} from '../state/composer'
+import {type PostAction} from '../state/composer'
 import {EditImageDialog} from './EditImageDialog'
 import {ImageAltTextDialog} from './ImageAltTextDialog'
 
···
         altTextControlStyle: isOverflow
           ? {left: 4, bottom: 4}
           : !isMobile && images.length < 3
-          ? {left: 8, top: 8}
-          : {left: 4, top: 4},
+            ? {left: 8, top: 8}
+            : {left: 4, top: 4},
         imageControlsStyle: {
           display: 'flex' as const,
           flexDirection: 'row' as const,
···
           ...(isOverflow
             ? {top: 4, right: 4, gap: 4}
             : !isMobile && images.length < 3
-            ? {top: 8, right: 8, gap: 8}
-            : {top: 4, right: 4, gap: 4}),
+              ? {top: 8, right: 8, gap: 8}
+              : {top: 4, right: 4, gap: 4}),
           zIndex: 1,
         },
         imageStyle: {

src/view/com/composer/state/composer.ts

···
-import {ImagePickerAsset} from 'expo-image-picker'
+import {type ImagePickerAsset} from 'expo-image-picker'
 import {
-  AppBskyFeedPostgate,
+  type AppBskyFeedPostgate,
   AppBskyRichtextFacet,
-  BskyPreferences,
+  type BskyPreferences,
   RichText,
 } from '@atproto/api'
 import {nanoid} from 'nanoid/non-secure'
 
-import {SelfLabel} from '#/lib/moderation'
+import {type SelfLabel} from '#/lib/moderation'
 import {insertMentionAt} from '#/lib/strings/mention-manip'
 import {shortenLinks} from '#/lib/strings/rich-text-manip'
 import {
···
   postUriToRelativePath,
   toBskyAppUrl,
 } from '#/lib/strings/url-helpers'
-import {ComposerImage, createInitialImages} from '#/state/gallery'
+import {type ComposerImage, createInitialImages} from '#/state/gallery'
 import {createPostgateRecord} from '#/state/queries/postgate/util'
-import {Gif} from '#/state/queries/tenor'
+import {type Gif} from '#/state/queries/tenor'
 import {threadgateRecordToAllowUISetting} from '#/state/queries/threadgate'
-import {ThreadgateAllowUISetting} from '#/state/queries/threadgate'
-import {ComposerOpts} from '#/state/shell/composer'
+import {type ThreadgateAllowUISetting} from '#/state/queries/threadgate'
+import {type ComposerOpts} from '#/state/shell/composer'
 import {
-  LinkFacetMatch,
+  type LinkFacetMatch,
   suggestLinkCardUri,
 } from '#/view/com/composer/text-input/text-input-util'
-import {createVideoState, VideoAction, videoReducer, VideoState} from './video'
+import {
+  createVideoState,
+  type VideoAction,
+  videoReducer,
+  type VideoState,
+} from './video'
 
 type ImagesMedia = {
   type: 'images'
···
     text: initText
       ? initText
       : initMention
-      ? insertMentionAt(
-          `@${initMention}`,
-          initMention.length + 1,
-          `${initMention}`,
-        )
-      : '',
+        ? insertMentionAt(
+            `@${initMention}`,
+            initMention.length + 1,
+            `${initMention}`,
+          )
+        : '',
   })
 
   let link: Link | undefined

src/view/com/composer/text-input/web/Autocomplete.tsx

···
         itemIndex === 0
           ? styles.firstMention
           : itemIndex === totalItems - 1
-          ? styles.lastMention
-          : undefined,
+            ? styles.lastMention
+            : undefined,
       ]}
       onPress={onPress}
       accessibilityRole="button">

src/view/com/lightbox/Lightbox.web.tsx

···
 import React, {useCallback, useEffect, useState} from 'react'
 import {
   Image,
-  ImageStyle,
+  type ImageStyle,
   Pressable,
   StyleSheet,
   TouchableOpacity,
   TouchableWithoutFeedback,
   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'
···
 import {colors, s} from '#/lib/styles'
 import {useLightbox, useLightboxControls} from '#/state/lightbox'
 import {Text} from '../util/text/Text'
-import {ImageSource} from './ImageViewing/@types'
+import {type ImageSource} from './ImageViewing/@types'
 import ImageDefaultHeader from './ImageViewing/components/ImageDefaultHeader'
 
 export function Lightbox() {
···
                     img.type === 'circle-avi'
                       ? '50%'
                       : img.type === 'rect-avi'
-                      ? '10%'
-                      : 0,
+                        ? '10%'
+                        : 0,
                 } as ImageStyle
               }
               alt={img.alt}

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

···
                   showChildReplyLine && !isThreadedChild
                     ? 0
                     : isThreadedChildAdjacentBot
-                    ? 4
-                    : 8,
+                      ? 4
+                      : 8,
               },
             ]}>
             {/* If we are in threaded mode, the avatar is rendered in PostMeta */}

src/view/com/posts/PostFeedErrorMessage.tsx

···
 import React from 'react'
 import {View} from 'react-native'
-import {AppBskyActorDefs, AppBskyFeedGetAuthorFeed, AtUri} from '@atproto/api'
+import {
+  type AppBskyActorDefs,
+  AppBskyFeedGetAuthorFeed,
+  AtUri,
+} from '@atproto/api'
 import {msg as msgLingui, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 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 {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
-import {FeedDescriptor} from '#/state/queries/post-feed'
+import {type FeedDescriptor} from '#/state/queries/post-feed'
 import {useRemoveFeedMutation} from '#/state/queries/preferences'
 import * as Prompt from '#/components/Prompt'
 import {EmptyState} from '../util/EmptyState'
···
         [KnownError.FeedTooManyRequests]: _l(
           msgLingui`This feed is currently receiving high traffic and is temporarily unavailable. Please try again later.`,
         ),
-      }[knownError]),
+      })[knownError],
     [_l, knownError],
   )
   const [_, uri] = feedDesc.split('|')

src/view/com/profile/ProfileMenu.tsx

···
                 msg`The account will be able to interact with you after unblocking.`,
               )
             : profile.associated?.labeler
-            ? _(
-                msg`Blocking will not prevent labels from being applied on your account, but it will stop this account from replying in your threads or interacting with you.`,
-              )
-            : _(
-                msg`Blocked accounts cannot reply in your threads, mention you, or otherwise interact with you.`,
-              )
+              ? _(
+                  msg`Blocking will not prevent labels from being applied on your account, but it will stop this account from replying in your threads or interacting with you.`,
+                )
+              : _(
+                  msg`Blocked accounts cannot reply in your threads, mention you, or otherwise interact with you.`,
+                )
         }
         onConfirm={blockAccount}
         confirmButtonCta={

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

···
 import React, {isValidElement, memo, startTransition, useRef} from 'react'
-import {FlatListProps, StyleSheet, View, ViewProps} from 'react-native'
-import {ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/hook/commonTypes'
+import {
+  type FlatListProps,
+  StyleSheet,
+  View,
+  type ViewProps,
+} from 'react-native'
+import {type ReanimatedScrollEvent} from 'react-native-reanimated/lib/typescript/hook/commonTypes'
 
 import {batchedUpdates} from '#/lib/batchedUpdates'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
···
             behavior: animated ? 'smooth' : 'instant',
           })
         },
-      } as any), // TODO: Better types.
+      }) as any, // TODO: Better types.
     [getScrollableNode],
   )
 

src/view/screens/DebugMod.tsx

···
               }),
             ]
           : scenario[0] === 'label' && target[0] === 'profile'
-          ? [
-              mock.label({
-                src: isSelfLabel ? did : undefined,
-                val: label[0],
-                uri: `at://${did}/app.bsky.actor.profile/self`,
-              }),
-            ]
-          : undefined,
+            ? [
+                mock.label({
+                  src: isSelfLabel ? did : undefined,
+                  val: label[0],
+                  uri: `at://${did}/app.bsky.actor.profile/self`,
+                }),
+              ]
+            : undefined,
       viewer: mock.actorViewerState({
         following: isFollowing
           ? `at://${currentAccount?.did || ''}/app.bsky.graph.follow/1234`

svgo.config.mjs

···
 const preset = [
-  "removeDoctype",
-  "removeXMLProcInst",
-  "removeComments",
-  "removeMetadata",
-  "removeEditorsNSData",
-  "cleanupAttrs",
-  "mergeStyles",
-  "inlineStyles",
-  "minifyStyles",
-  "cleanupIds",
-  "removeUselessDefs",
-  "cleanupNumericValues",
-  "convertColors",
-  "removeUnknownsAndDefaults",
-  "removeNonInheritableGroupAttrs",
-  "removeUselessStrokeAndFill",
-  "removeDimensions",
-  "cleanupEnableBackground",
-  "removeHiddenElems",
-  "removeEmptyText",
-  "convertShapeToPath",
-  "convertEllipseToCircle",
-  "moveElemsAttrsToGroup",
-  "moveGroupAttrsToElems",
-  "collapseGroups",
-  "convertPathData",
-  "convertTransform",
-  "removeEmptyAttrs",
-  "removeEmptyContainers",
-  "removeUnusedNS",
-  "mergePaths",
-  "sortAttrs",
-  "sortDefsChildren",
-  "removeTitle",
-  "removeDesc",
+  'removeDoctype',
+  'removeXMLProcInst',
+  'removeComments',
+  'removeMetadata',
+  'removeEditorsNSData',
+  'cleanupAttrs',
+  'mergeStyles',
+  'inlineStyles',
+  'minifyStyles',
+  'cleanupIds',
+  'removeUselessDefs',
+  'cleanupNumericValues',
+  'convertColors',
+  'removeUnknownsAndDefaults',
+  'removeNonInheritableGroupAttrs',
+  'removeUselessStrokeAndFill',
+  'removeDimensions',
+  'cleanupEnableBackground',
+  'removeHiddenElems',
+  'removeEmptyText',
+  'convertShapeToPath',
+  'convertEllipseToCircle',
+  'moveElemsAttrsToGroup',
+  'moveGroupAttrsToElems',
+  'collapseGroups',
+  'convertPathData',
+  'convertTransform',
+  'removeEmptyAttrs',
+  'removeEmptyContainers',
+  'removeUnusedNS',
+  'mergePaths',
+  'sortAttrs',
+  'sortDefsChildren',
+  'removeTitle',
+  'removeDesc',
 ]
 
 export default {
-  plugins: [...preset.map(name => ({
-    name,
-    params: {
-      floatPrecision: 3,
-      transformPrecision: 5,
-      // minimise diff in ouput from svgomg
-      // maybe remove in future? will produce smaller output
-      convertToZ: false,
-      removeUseless: false,
-    }
-  })),
-  {
-    name: 'addTrailingWhitespace',
-    fn() {
-      return {
-        root: {
-          exit (root) {
-            root.children.push({ type: 'text', value: '\n' })
-            return root
-          }
+  plugins: [
+    ...preset.map(name => ({
+      name,
+      params: {
+        floatPrecision: 3,
+        transformPrecision: 5,
+        // minimise diff in ouput from svgomg
+        // maybe remove in future? will produce smaller output
+        convertToZ: false,
+        removeUseless: false,
+      },
+    })),
+    {
+      name: 'addTrailingWhitespace',
+      fn() {
+        return {
+          root: {
+            exit(root) {
+              root.children.push({type: 'text', value: '\n'})
+              return root
+            },
+          },
         }
-      }
-    }
-  }]
-};
+      },
+    },
+  ],
+}

yarn.lock

···
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
-prettier@^2.8.3:
-  version "2.8.8"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
-  integrity sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==
+prettier@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-3.6.0.tgz#18ec98d62cb0757a5d4eab40253ff3e6d0fc8dea"
+  integrity sha512-ujSB9uXHJKzM/2GBuE0hBOUgC77CN3Bnpqa+g80bkv3T3A93wL/xlzDATHhnhkzifz/UE2SNOvmbTz5hSkDlHw==
 
 pretty-bytes@^5.6.0:
   version "5.6.0"