Narrow down the condition slightly

Remove noreferrer on links
We do have <meta name="referrer" content="origin-when-cross-origin"> in HTML, should be sufficient.
2024-11-22 23:24:17 +00:00 · 2024-11-22 23:07:07 +00:00 · 2024-11-22 22:46:48 +00:00 · 2024-11-22 22:14:59 +00:00 · 2024-11-22 21:40:15 +00:00 · 2024-11-22 19:51:36 +00:00
243 changed files with 12622 additions and 4319 deletions
@@ -1,10 +1,9 @@
-const reactCompilerConfig = require('./react-compiler.config.js')
-
 module.exports = {
  root: true,
  extends: [
-    '@react-native-community',
+    '@react-native',
    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
    'plugin:react-native-a11y/ios',
    'prettier',
  ],
@@ -18,9 +17,8 @@ module.exports = {
    'eslint-plugin-react-compiler',
  ],
  rules: {
-    // Temporary until https://github.com/facebook/react-native/pull/43756 gets into a release.
-    'prettier/prettier': 0,
    'react/no-unescaped-entities': 0,
+    'react/prop-types': 0,
    'react-native/no-inline-styles': 0,
    'bsky-internal/avoid-unwrapped-text': [
      'error',
@@ -81,7 +79,7 @@ module.exports = {
      },
    ],
    'simple-import-sort/exports': 'error',
-    'react-compiler/react-compiler': ['error', reactCompilerConfig],
+    'react-compiler/react-compiler': 'warn',
    'no-restricted-imports': [
      'error',
      {
@@ -92,6 +92,31 @@ module.exports = function (config) {
            'Used to save images to your library.',
          NSPhotoLibraryUsageDescription:
            'Used for profile pictures, posts, and other kinds of content',
+          CFBundleSpokenName: 'Blue Sky',
+          CFBundleLocalizations: [
+            'en',
+            'ca',
+            'de',
+            'es',
+            'fi',
+            'fr',
+            'ga',
+            'hi',
+            'hu',
+            'id',
+            'it',
+            'ja',
+            'ko',
+            'pl',
+            'pt',
+            'ru',
+            'th',
+            'tr',
+            'uk',
+            'zh_CN',
+            'zh_HK',
+            'zh_TW',
+          ],
        },
        associatedDomains: ASSOCIATED_DOMAINS,
        splash: {
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M18.535 5.465a5.003 5.003 0 0 0-7.076 0l-.005.005-.752.742a1 1 0 1 1-1.404-1.424l.749-.74a7.003 7.003 0 0 1 9.904 9.905l-.002.003-.737.746a1 1 0 1 1-1.424-1.404l.747-.757a5.003 5.003 0 0 0 0-7.076ZM6.202 9.288a1 1 0 0 1 .01 1.414l-.747.757a5.003 5.003 0 1 0 7.076 7.076l.005-.005.752-.742a1 1 0 1 1 1.404 1.424l-.746.737-.003.002a7.003 7.003 0 0 1-9.904-9.904l.74-.75a1 1 0 0 1 1.413-.009Zm8.505.005a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/></svg>
@@ -1,5 +1,3 @@
-const reactCompilerConfig = require('./react-compiler.config.js')
-
 module.exports = function (api) {
  api.cache(true)
  const isTestEnv = process.env.NODE_ENV === 'test'
@@ -19,7 +17,7 @@ module.exports = function (api) {
    ],
    plugins: [
      'macros',
-      ['babel-plugin-react-compiler', reactCompilerConfig],
+      ['babel-plugin-react-compiler', {target: '18'}],
      [
        'module:react-native-dotenv',
        {
@@ -9,7 +9,6 @@ import {
  AppBskyGraphDefs,
  AppBskyGraphStarterpack,
  AppBskyLabelerDefs,
-  AtUri,
 } from '@atproto/api'
 import {ComponentChildren, h} from 'preact'
 import {useMemo} from 'preact/hooks'
@@ -437,14 +436,14 @@ function StarterPackEmbed({

 // from #/lib/strings/starter-pack.ts
 function getStarterPackImage(starterPack: AppBskyGraphDefs.StarterPackView) {
-  const rkey = new AtUri(starterPack.uri).rkey
+  const rkey = getRkey({uri: starterPack.uri})
  return `https://ogcard.cdn.bsky.app/start/${starterPack.creator.did}/${rkey}`
 }

 function getStarterPackHref(
  starterPack: AppBskyGraphDefs.StarterPackViewBasic,
 ) {
-  const rkey = new AtUri(starterPack.uri).rkey
+  const rkey = getRkey({uri: starterPack.uri})
  const handleOrDid = starterPack.creator.handle || starterPack.creator.did
  return `/starter-pack/${handleOrDid}/${rkey}`
 }
@@ -4209,12 +4209,7 @@ yocto-queue@^0.1.0:
  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==

-zod@^3.21.4:
-  version "3.22.4"
-  resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
-  integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==
-
-zod@^3.23.8:
+zod@^3.21.4, zod@^3.23.8:
  version "3.23.8"
  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==
@@ -15,6 +15,7 @@ module.exports = {
    'it',
    'ja',
    'ko',
+    'pl',
    'pt-BR',
    'ru',
    'th',
@@ -9,6 +9,11 @@ cfg.resolver.sourceExts = process.env.RN_SRC_EXT
 if (cfg.resolver.resolveRequest) {
  throw Error('Update this override because it is conflicting now.')
 }
+
+if (process.env.BSKY_PROFILE) {
+  cfg.cacheVersion += ':PROFILE'
+}
+
 cfg.resolver.resolveRequest = (context, moduleName, platform) => {
  // HACK: manually resolve a few packages that use `exports` in `package.json`.
  // A proper solution is to enable `unstable_enablePackageExports` but this needs careful testing.
@@ -29,6 +34,15 @@ cfg.resolver.resolveRequest = (context, moduleName, platform) => {
  if (moduleName === '@ipld/dag-cbor') {
    return context.resolveRequest(context, '@ipld/dag-cbor/src', platform)
  }
+  if (process.env.BSKY_PROFILE) {
+    if (moduleName.endsWith('ReactNativeRenderer-prod')) {
+      return context.resolveRequest(
+        context,
+        moduleName.replace('-prod', '-profiling'),
+        platform,
+      )
+    }
+  }
  return context.resolveRequest(context, moduleName, platform)
 }

@@ -1,6 +1,6 @@
 {
  "name": "bsky.app",
-  "version": "1.94.0",
+  "version": "1.95.0",
  "private": true,
  "engines": {
    "node": ">=20"
@@ -11,6 +11,8 @@
    "postinstall": "patch-package && yarn intl:compile",
    "prebuild": "expo prebuild --clean",
    "android": "expo run:android",
+    "android:prod": "expo run:android --variant release",
+    "android:profile": "BSKY_PROFILE=1 expo run:android --variant release",
    "ios": "expo run:ios",
    "web": "expo start --web",
    "use-build-number": "./scripts/useBuildNumberEnv.sh",
@@ -23,7 +25,6 @@
    "build-embed": "cd bskyembed && yarn build && yarn build-snippet && cd .. && node ./scripts/post-embed-build.js",
    "start": "expo start --dev-client",
    "start:prod": "expo start --dev-client --no-dev --minify",
-    "clean-cache": "rm -rf node_modules/.cache/babel-loader/*",
    "test": "NODE_ENV=test jest --forceExit --testTimeout=20000 --bail",
    "test-watch": "NODE_ENV=test jest --watchAll",
    "test-ci": "NODE_ENV=test jest --ci --forceExit --reporters=default --reporters=jest-junit",
@@ -140,6 +141,7 @@
    "expo-sharing": "^12.0.1",
    "expo-splash-screen": "~0.27.4",
    "expo-status-bar": "~1.12.1",
+    "expo-system-ui": "^3.0.4",
    "expo-task-manager": "~11.8.1",
    "expo-updates": "~0.25.14",
    "expo-web-browser": "~13.0.3",
@@ -152,11 +154,6 @@
    "lodash.chunk": "^4.2.0",
    "lodash.debounce": "^4.0.8",
    "lodash.isequal": "^4.5.0",
-    "lodash.omit": "^4.5.0",
-    "lodash.once": "^4.1.1",
-    "lodash.random": "^3.2.0",
-    "lodash.samplesize": "^4.2.0",
-    "lodash.set": "^4.3.2",
    "lodash.shuffle": "^4.2.0",
    "lodash.throttle": "^4.1.1",
    "multiformats": "^13.1.0",
@@ -166,7 +163,7 @@
    "postinstall-postinstall": "^2.1.0",
    "psl": "^1.9.0",
    "react": "18.2.0",
-    "react-compiler-runtime": "^19.0.0-beta-a7bf2bd-20241110",
+    "react-compiler-runtime": "19.0.0-beta-a7bf2bd-20241110",
    "react-dom": "^18.2.0",
    "react-image-crop": "^11.0.7",
    "react-keyed-flatten-children": "^3.0.0",
@@ -217,45 +214,35 @@
    "@lingui/cli": "^4.5.0",
    "@lingui/macro": "^4.5.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
-    "@react-native-community/eslint-config": "^3.0.0",
+    "@react-native/eslint-config": "^0.76.2",
    "@react-native/typescript-config": "^0.74.1",
    "@testing-library/jest-native": "^5.4.1",
    "@testing-library/react-native": "^11.5.2",
-    "@tsconfig/react-native": "^2.0.3",
-    "@types/he": "^1.1.2",
    "@types/jest": "^29.4.0",
    "@types/lodash.chunk": "^4.2.7",
    "@types/lodash.debounce": "^4.0.7",
    "@types/lodash.isequal": "^4.5.6",
-    "@types/lodash.omit": "^4.5.7",
-    "@types/lodash.once": "^4.1.7",
-    "@types/lodash.random": "^3.2.7",
-    "@types/lodash.samplesize": "^4.2.7",
-    "@types/lodash.set": "^4.3.7",
    "@types/lodash.shuffle": "^4.2.7",
    "@types/psl": "^1.1.1",
    "@types/react-dom": "^18.2.18",
    "@types/react-responsive": "^8.0.5",
    "@types/react-test-renderer": "^17.0.1",
-    "@typescript-eslint/eslint-plugin": "^5.48.2",
-    "@typescript-eslint/parser": "^5.48.2",
+    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/parser": "^7.18.0",
    "babel-jest": "^29.7.0",
-    "babel-loader": "^9.1.2",
    "babel-plugin-macros": "^3.1.0",
    "babel-plugin-module-resolver": "^5.0.0",
-    "babel-plugin-react-compiler": "^19.0.0-beta-a7bf2bd-20241110",
-    "babel-plugin-react-native-web": "^0.18.12",
+    "babel-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
    "babel-preset-expo": "^10.0.0",
    "eslint": "^8.19.0",
    "eslint-plugin-bsky-internal": "link:./eslint",
    "eslint-plugin-ft-flow": "^2.0.3",
    "eslint-plugin-lingui": "^0.2.0",
    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-compiler": "^19.0.0-beta-a7bf2bd-20241110",
+    "eslint-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
    "eslint-plugin-react-native-a11y": "^3.3.0",
    "eslint-plugin-simple-import-sort": "^12.0.0",
    "file-loader": "6.2.0",
-    "html-webpack-plugin": "^5.5.0",
    "husky": "^8.0.3",
    "is-ci": "^3.0.1",
    "jest": "^29.7.0",
@@ -269,12 +256,8 @@
    "react-test-renderer": "18.2.0",
    "svgo": "^3.3.2",
    "ts-node": "^10.9.1",
-    "typescript": "^5.5.4",
-    "url-loader": "^4.1.1",
-    "webpack": "^5.75.0",
-    "webpack-bundle-analyzer": "^4.10.1",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.11.1"
+    "typescript": "^5.7.2",
+    "webpack-bundle-analyzer": "^4.10.1"
  },
  "resolutions": {
    "@types/react": "^18",
@@ -0,0 +1,57 @@
+diff --git a/node_modules/react-native-svg/android/src/main/java/com/horcrux/svg/PathView.java b/node_modules/react-native-svg/android/src/main/java/com/horcrux/svg/PathView.java
+index 06829bd..1b15818 100644
+--- a/node_modules/react-native-svg/android/src/main/java/com/horcrux/svg/PathView.java
+++ b/node_modules/react-native-svg/android/src/main/java/com/horcrux/svg/PathView.java
+@@ -14,17 +14,33 @@ import android.graphics.Paint;
+ import android.graphics.Path;
+ import com.facebook.react.bridge.ReactContext;
+ 
+import java.util.ArrayList;
+import java.util.HashMap;
+
+class ParsedPath {
+  final Path path;
+  final ArrayList<PathElement> elements;
+
+  ParsedPath(Path path, ArrayList<PathElement> elements) {
+    this.path = path;
+    this.elements = elements;
+  }
+}
+
+ @SuppressLint("ViewConstructor")
+ class PathView extends RenderableView {
+   private Path mPath;
+ 
+  // This grows forever but for our use case (static icons) it's ok.
+  private static final HashMap<String, ParsedPath> sPathCache = new HashMap<>();
+
+   public PathView(ReactContext reactContext) {
+     super(reactContext);
+     PathParser.mScale = mScale;
+     mPath = new Path();
+   }
+ 
+-  public void setD(String d) {
+  void setDByParsing(String d) {
+     mPath = PathParser.parse(d);
+     elements = PathParser.elements;
+     for (PathElement elem : elements) {
+@@ -33,6 +49,17 @@ class PathView extends RenderableView {
+         point.y *= mScale;
+       }
+     }
+  }
+
+  public void setD(String d) {
+    ParsedPath cached = sPathCache.get(d);
+    if (cached != null) {
+      mPath = cached.path;
+      elements = cached.elements;
+    } else {
+      setDByParsing(d);
+      sPathCache.put(d, new ParsedPath(mPath, elements));
+    }
+     invalidate();
+   }
+ 
@@ -1,9 +0,0 @@
-'use strict'
-
-module.exports = {
-  target: '18',
-  environment: {
-    enableTreatRefLikeIdentifiersAsRefs: true,
-    validateRefAccessDuringRender: false, // TODO: Make it `true`.
-  },
-}
@@ -69,6 +69,7 @@ import {Provider as PortalProvider} from '#/components/Portal'
 import {Splash} from '#/Splash'
 import {BottomSheetProvider} from '../modules/bottom-sheet'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
+import {AppProfiler} from './AppProfiler'

 SplashScreen.preventAutoHideAsync()

@@ -184,40 +185,42 @@ function App() {
   * that is set up in the InnerApp component above.
   */
  return (
-    <GeolocationProvider>
-      <A11yProvider>
-        <KeyboardProvider enabled={false} statusBarTranslucent={true}>
-          <SessionProvider>
-            <PrefsStateProvider>
-              <I18nProvider>
-                <ShellStateProvider>
-                  <InvitesStateProvider>
-                    <ModalStateProvider>
-                      <DialogStateProvider>
-                        <LightboxStateProvider>
-                          <PortalProvider>
-                            <BottomSheetProvider>
-                              <StarterPackProvider>
-                                <SafeAreaProvider
-                                  initialMetrics={initialWindowMetrics}>
-                                  <IntentDialogProvider>
-                                    <InnerApp />
-                                  </IntentDialogProvider>
-                                </SafeAreaProvider>
-                              </StarterPackProvider>
-                            </BottomSheetProvider>
-                          </PortalProvider>
-                        </LightboxStateProvider>
-                      </DialogStateProvider>
-                    </ModalStateProvider>
-                  </InvitesStateProvider>
-                </ShellStateProvider>
-              </I18nProvider>
-            </PrefsStateProvider>
-          </SessionProvider>
-        </KeyboardProvider>
-      </A11yProvider>
-    </GeolocationProvider>
+    <AppProfiler>
+      <GeolocationProvider>
+        <A11yProvider>
+          <KeyboardProvider enabled={false} statusBarTranslucent={true}>
+            <SessionProvider>
+              <PrefsStateProvider>
+                <I18nProvider>
+                  <ShellStateProvider>
+                    <InvitesStateProvider>
+                      <ModalStateProvider>
+                        <DialogStateProvider>
+                          <LightboxStateProvider>
+                            <PortalProvider>
+                              <BottomSheetProvider>
+                                <StarterPackProvider>
+                                  <SafeAreaProvider
+                                    initialMetrics={initialWindowMetrics}>
+                                    <IntentDialogProvider>
+                                      <InnerApp />
+                                    </IntentDialogProvider>
+                                  </SafeAreaProvider>
+                                </StarterPackProvider>
+                              </BottomSheetProvider>
+                            </PortalProvider>
+                          </LightboxStateProvider>
+                        </DialogStateProvider>
+                      </ModalStateProvider>
+                    </InvitesStateProvider>
+                  </ShellStateProvider>
+                </I18nProvider>
+              </PrefsStateProvider>
+            </SessionProvider>
+          </KeyboardProvider>
+        </A11yProvider>
+      </GeolocationProvider>
+    </AppProfiler>
  )
 }

@@ -0,0 +1,29 @@
+import React, {Profiler} from 'react'
+
+// Don't let it get stripped out in profiling builds (which apply production Babel preset).
+const log = (global as any)['con' + 'sole'].log
+
+function onRender(id: string, phase: string, actualDuration: number) {
+  if (!__DEV__) {
+    // This block of code will exist in the production build of the app.
+    // However, only profiling builds of React call `onRender` so it's dead code in actual production.
+    const message = `<Profiler> ${id}:${phase} ${
+      actualDuration > 500
+        ? '(╯°□°）╯ '
+        : actualDuration > 100
+        ? '[!!] '
+        : actualDuration > 16
+        ? '[!] '
+        : ''
+    }${Math.round(actualDuration)}ms`
+    log(message)
+  }
+}
+
+export function AppProfiler({children}: {children: React.ReactNode}) {
+  return (
+    <Profiler id="app" onRender={onRender}>
+      {children}
+    </Profiler>
+  )
+}
@@ -32,7 +32,7 @@ import {
 import {RouteParams, State} from '#/lib/routes/types'
 import {attachRouteToLogEvents, logEvent} from '#/lib/statsig/statsig'
 import {bskyTitle} from '#/lib/strings/headings'
-import {isAndroid, isNative, isWeb} from '#/platform/detection'
+import {isNative, isWeb} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useSession} from '#/state/session'
@@ -453,7 +453,6 @@ function HomeTabNavigator() {
  return (
    <HomeTab.Navigator
      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -472,7 +471,6 @@ function SearchTabNavigator() {
  return (
    <SearchTab.Navigator
      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -490,7 +488,6 @@ function NotificationsTabNavigator() {
  return (
    <NotificationsTab.Navigator
      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -512,7 +509,6 @@ function MyProfileTabNavigator() {
  return (
    <MyProfileTab.Navigator
      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -538,7 +534,6 @@ function MessagesTabNavigator() {
  return (
    <MessagesTab.Navigator
      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -572,7 +567,6 @@ const FlatNavigator = () => {
    <Flat.Navigator
      screenListeners={screenListeners}
      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -56,6 +56,7 @@ type Props = {
 const AnimatedLogo = Animated.createAnimatedComponent(Logo)

 export function Splash(props: React.PropsWithChildren<Props>) {
+  'use no memo'
  const insets = useSafeAreaInsets()
  const intro = useSharedValue(0)
  const outroLogo = useSharedValue(0)
@@ -0,0 +1,126 @@
+import React, {Children} from 'react'
+import {TextProps as RNTextProps} from 'react-native'
+import {StyleProp, TextStyle} from 'react-native'
+import {UITextView} from 'react-native-uitextview'
+import createEmojiRegex from 'emoji-regex'
+
+import {isNative} from '#/platform/detection'
+import {isIOS} from '#/platform/detection'
+import {Alf, applyFonts, atoms, flatten} from '#/alf'
+
+/**
+ * Util to calculate lineHeight from a text size atom and a leading atom
+ *
+ * Example:
+ *   `leading(atoms.text_md, atoms.leading_normal)` // => 24
+ */
+export function leading<
+  Size extends {fontSize?: number},
+  Leading extends {lineHeight?: number},
+>(textSize: Size, leading: Leading) {
+  const size = textSize?.fontSize || atoms.text_md.fontSize
+  const lineHeight = leading?.lineHeight || atoms.leading_normal.lineHeight
+  return Math.round(size * lineHeight)
+}
+
+/**
+ * Ensures that `lineHeight` defaults to a relative value of `1`, or applies
+ * other relative leading atoms.
+ *
+ * If the `lineHeight` value is > 2, we assume it's an absolute value and
+ * returns it as-is.
+ */
+export function normalizeTextStyles(
+  styles: StyleProp<TextStyle>,
+  {
+    fontScale,
+    fontFamily,
+  }: {
+    fontScale: number
+    fontFamily: Alf['fonts']['family']
+  } & Pick<Alf, 'flags'>,
+) {
+  const s = flatten(styles)
+  // should always be defined on these components
+  s.fontSize = (s.fontSize || atoms.text_md.fontSize) * fontScale
+
+  if (s?.lineHeight) {
+    if (s.lineHeight !== 0 && s.lineHeight <= 2) {
+      s.lineHeight = Math.round(s.fontSize * s.lineHeight)
+    }
+  } else if (!isNative) {
+    s.lineHeight = s.fontSize
+  }
+
+  applyFonts(s, fontFamily)
+
+  return s
+}
+
+export type StringChild = string | (string | null)[]
+export type TextProps = RNTextProps & {
+  /**
+   * Lets the user select text, to use the native copy and paste functionality.
+   */
+  selectable?: boolean
+  /**
+   * Provides `data-*` attributes to the underlying `UITextView` component on
+   * web only.
+   */
+  dataSet?: Record<string, string | number | undefined>
+  /**
+   * Appears as a small tooltip on web hover.
+   */
+  title?: string
+  /**
+   * Whether the children could possibly contain emoji.
+   */
+  emoji?: boolean
+}
+
+const EMOJI = createEmojiRegex()
+
+export function childHasEmoji(children: React.ReactNode) {
+  let hasEmoji = false
+  Children.forEach(children, child => {
+    if (typeof child === 'string' && createEmojiRegex().test(child)) {
+      hasEmoji = true
+    }
+  })
+  return hasEmoji
+}
+
+export function renderChildrenWithEmoji(
+  children: React.ReactNode,
+  props: Omit<TextProps, 'children'> = {},
+  emoji: boolean,
+) {
+  if (!isIOS || !emoji) {
+    return children
+  }
+  return Children.map(children, child => {
+    if (typeof child !== 'string') return child
+
+    const emojis = child.match(EMOJI)
+
+    if (emojis === null) {
+      return child
+    }
+
+    return child.split(EMOJI).map((stringPart, index) => [
+      stringPart,
+      emojis[index] ? (
+        <UITextView
+          {...props}
+          style={[props?.style, {color: 'black', fontFamily: 'System'}]}>
+          {emojis[index]}
+        </UITextView>
+      ) : null,
+    ])
+  })
+}
+
+const SINGLE_EMOJI_RE = /^[\p{Emoji_Presentation}\p{Extended_Pictographic}]+$/u
+export function isOnlyEmoji(text: string) {
+  return text.length <= 15 && SINGLE_EMOJI_RE.test(text)
+}
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {moderateProfile} from '@atproto/api'

@@ -458,7 +458,6 @@ export const Button = React.forwardRef<View, ButtonProps>(
        // @ts-ignore - this will always be a pressable
        ref={ref}
        aria-label={label}
-        aria-pressed={state.pressed}
        accessibilityLabel={label}
        disabled={disabled || false}
        accessibilityState={{
@@ -29,10 +29,10 @@ export function useDialogControl(): DialogOuterProps['control'] {
  const {activeDialogs} = useDialogStateContext()

  React.useEffect(() => {
-    const map = activeDialogs.current
-    map.set(id, control)
+    activeDialogs.current.set(id, control)
    return () => {
-      map.delete(id)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      activeDialogs.current.delete(id)
    }
  }, [id, activeDialogs])

@@ -75,7 +75,7 @@ export function Outer({
      try {
        cb()
      } catch (e: any) {
-        logger.error('Error running close callback', e)
+        logger.error(e || 'Error running close callback')
      }
    }

@@ -1,7 +1,7 @@
 import React from 'react'
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'

-import {atoms as a, useTheme, web} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'

 export function Header({
@@ -29,10 +29,8 @@ export function Header({
        a.border_b,
        t.atoms.border_contrast_medium,
        t.atoms.bg,
-        web([
-          {borderRadiusTopLeft: a.rounded_md.borderRadius},
-          {borderRadiusTopRight: a.rounded_md.borderRadius},
-        ]),
+        {borderTopLeftRadius: a.rounded_md.borderRadius},
+        {borderTopRightRadius: a.rounded_md.borderRadius},
        style,
      ]}>
      {renderLeft && (
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'

 import {atoms as a, flatten, useTheme, ViewStyleProp} from '#/alf'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {LinearGradient} from 'expo-linear-gradient'

 import {atoms as a, tokens} from '#/alf'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'

 import {
@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo} from 'react'
+import {useCallback, useMemo} from 'react'
 import {ActivityIndicator, FlatList, View} from 'react-native'
 import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -223,7 +223,7 @@ export function Link({
      {...web({
        hrefAttrs: {
          target: download ? undefined : isExternal ? 'blank' : undefined,
-          rel: isExternal ? 'noopener noreferrer' : undefined,
+          rel: isExternal ? 'noopener' : undefined,
          download,
        },
        dataSet: {
@@ -274,11 +274,6 @@ export function InlineLinkText({
    onOut: onHoverOut,
  } = useInteractionState()
  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
-  const {
-    state: pressed,
-    onIn: onPressIn,
-    onOut: onPressOut,
-  } = useInteractionState()
  const flattenedStyle = flatten(style) || {}

  return (
@@ -289,19 +284,20 @@ export function InlineLinkText({
      {...rest}
      style={[
        {color: t.palette.primary_500},
-        (hovered || focused || pressed) &&
+        (hovered || focused) &&
          !disableUnderline && {
-            ...web({outline: 0}),
-            textDecorationLine: 'underline',
-            textDecorationColor: flattenedStyle.color ?? t.palette.primary_500,
+            ...web({
+              outline: 0,
+              textDecorationLine: 'underline',
+              textDecorationColor:
+                flattenedStyle.color ?? t.palette.primary_500,
+            }),
          },
        flattenedStyle,
      ]}
      role="link"
      onPress={download ? undefined : onPress}
      onLongPress={onLongPress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
      onFocus={onFocus}
      onBlur={onBlur}
      onMouseEnter={onHoverIn}
@@ -311,7 +307,7 @@ export function InlineLinkText({
      {...web({
        hrefAttrs: {
          target: download ? undefined : isExternal ? 'blank' : undefined,
-          rel: isExternal ? 'noopener noreferrer' : undefined,
+          rel: isExternal ? 'noopener' : undefined,
          download,
        },
        dataSet: {
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'

 import {atoms as a, flatten, useTheme} from '#/alf'
@@ -1,5 +1,3 @@
-/* eslint-disable react/prop-types */
-
 import React from 'react'
 import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
 import {msg} from '@lingui/macro'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import * as Progress from 'react-native-progress'

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {AppBskyLabelerDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -9,6 +9,7 @@ import {NavigationProp} from '#/lib/routes/types'
 import {toShortUrl} from '#/lib/strings/url-helpers'
 import {isNative} from '#/platform/detection'
 import {atoms as a, flatten, native, TextStyleProp, useTheme, web} from '#/alf'
+import {isOnlyEmoji} from '#/alf/typography'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {InlineLinkText, LinkProps} from '#/components/Link'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
@@ -53,7 +54,6 @@ export function RichText({
  const plainStyles = [a.leading_snug, flattenedStyle]
  const interactiveStyles = [
    a.leading_snug,
-    a.pointer_events_auto,
    flatten(interactiveStyle),
    flattenedStyle,
  ]
@@ -151,17 +151,14 @@ export function RichText({
        />,
      )
    } else {
-      els.push(
-        <Text key={key} emoji style={plainStyles}>
-          {segment.text}
-        </Text>,
-      )
+      els.push(segment.text)
    }
    key++
  }

  return (
    <Text
+      emoji
      selectable={selectable}
      testID={testID}
      style={plainStyles}
@@ -194,11 +191,6 @@ function RichTextTag({
    onOut: onHoverOut,
  } = useInteractionState()
  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
-  const {
-    state: pressed,
-    onIn: onPressIn,
-    onOut: onPressOut,
-  } = useInteractionState()
  const navigation = useNavigation<NavigationProp>()

  const navigateToPage = React.useCallback(() => {
@@ -228,8 +220,6 @@ function RichTextTag({
            accessibilityRole: isNative ? 'button' : undefined,
            onPress: navigateToPage,
            onLongPress: openDialog,
-            onPressIn: onPressIn,
-            onPressOut: onPressOut,
          })}
          {...web({
            onMouseEnter: onHoverIn,
@@ -243,10 +233,12 @@ function RichTextTag({
              cursor: 'pointer',
            }),
            {color: t.palette.primary_500},
-            (hovered || focused || pressed) && {
-              ...web({outline: 0}),
-              textDecorationLine: 'underline',
-              textDecorationColor: t.palette.primary_500,
+            (hovered || focused) && {
+              ...web({
+                outline: 0,
+                textDecorationLine: 'underline',
+                textDecorationColor: t.palette.primary_500,
+              }),
            },
            style,
          ]}>
@@ -256,10 +248,3 @@ function RichTextTag({
    </React.Fragment>
  )
 }
-
-export function isOnlyEmoji(text: string) {
-  return (
-    text.length <= 15 &&
-    /^[\p{Emoji_Presentation}\p{Extended_Pictographic}]+$/u.test(text)
-  )
-}
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {Image} from 'expo-image'
 import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
@@ -1,4 +1,4 @@
-import React, {useRef} from 'react'
+import {useRef} from 'react'
 import type {ListRenderItemInfo} from 'react-native'
 import {View} from 'react-native'
 import {AppBskyActorDefs, ModerationOpts} from '@atproto/api'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {Keyboard, View} from 'react-native'
 import {
  AppBskyActorDefs,
@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleSheet, View} from 'react-native'

 import {isTouchDevice} from '#/lib/browser'
@@ -40,9 +40,37 @@ export function TagMenu({
  tag: string
  authorHandle?: string
 }>) {
+  const navigation = useNavigation<NavigationProp>()
+  return (
+    <>
+      {children}
+      <Dialog.Outer control={control}>
+        <Dialog.Handle />
+        <TagMenuInner
+          control={control}
+          tag={tag}
+          authorHandle={authorHandle}
+          navigation={navigation}
+        />
+      </Dialog.Outer>
+    </>
+  )
+}
+
+function TagMenuInner({
+  control,
+  tag,
+  authorHandle,
+  navigation,
+}: {
+  control: Dialog.DialogOuterProps['control']
+  tag: string
+  authorHandle?: string
+  // Passed down because on native, we don't use real portals (and context would be wrong).
+  navigation: NavigationProp
+}) {
  const {_} = useLingui()
  const t = useTheme()
-  const navigation = useNavigation<NavigationProp>()
  const {isLoading: isPreferencesLoading, data: preferences} =
    usePreferencesQuery()
  const {
@@ -79,32 +107,75 @@ export function TagMenu({
  }, [tag, preferences?.moderationPrefs?.mutedWords])

  return (
-    <>
-      {children}
-
-      <Dialog.Outer control={control}>
-        <Dialog.Handle />
-        <Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}>
-          {isPreferencesLoading ? (
-            <View style={[a.w_full, a.align_center]}>
-              <Loader size="lg" />
-            </View>
-          ) : (
-            <>
+    <Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}>
+      {isPreferencesLoading ? (
+        <View style={[a.w_full, a.align_center]}>
+          <Loader size="lg" />
+        </View>
+      ) : (
+        <>
+          <View
+            style={[
+              a.rounded_md,
+              a.border,
+              a.mb_md,
+              t.atoms.border_contrast_low,
+              t.atoms.bg_contrast_25,
+            ]}>
+            <Link
+              label={_(msg`View all posts with tag ${displayTag}`)}
+              {...createStaticClick(() => {
+                control.close(() => {
+                  navigation.push('Hashtag', {
+                    tag: encodeURIComponent(tag),
+                  })
+                })
+              })}>
              <View
                style={[
-                  a.rounded_md,
-                  a.border,
-                  a.mb_md,
-                  t.atoms.border_contrast_low,
-                  t.atoms.bg_contrast_25,
+                  a.w_full,
+                  a.flex_row,
+                  a.align_center,
+                  a.justify_start,
+                  a.gap_md,
+                  a.px_lg,
+                  a.py_md,
                ]}>
+                <Search size="lg" style={[t.atoms.text_contrast_medium]} />
+                <Text
+                  numberOfLines={1}
+                  ellipsizeMode="middle"
+                  style={[
+                    a.flex_1,
+                    a.text_md,
+                    a.font_bold,
+                    native({top: 2}),
+                    t.atoms.text_contrast_medium,
+                  ]}>
+                  <Trans>
+                    See{' '}
+                    <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
+                      {displayTag}
+                    </Text>{' '}
+                    posts
+                  </Trans>
+                </Text>
+              </View>
+            </Link>
+
+            {authorHandle && !isInvalidHandle(authorHandle) && (
+              <>
+                <Divider />
+
                <Link
-                  label={_(msg`View all posts with tag ${displayTag}`)}
+                  label={_(
+                    msg`View all posts by @${authorHandle} with tag ${displayTag}`,
+                  )}
                  {...createStaticClick(() => {
                    control.close(() => {
                      navigation.push('Hashtag', {
                        tag: encodeURIComponent(tag),
+                        author: authorHandle,
                      })
                    })
                  })}>
@@ -118,7 +189,7 @@ export function TagMenu({
                      a.px_lg,
                      a.py_md,
                    ]}>
-                    <Search size="lg" style={[t.atoms.text_contrast_medium]} />
+                    <Person size="lg" style={[t.atoms.text_contrast_medium]} />
                    <Text
                      numberOfLines={1}
                      ellipsizeMode="middle"
@@ -134,143 +205,86 @@ export function TagMenu({
                        <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
                          {displayTag}
                        </Text>{' '}
-                        posts
+                        posts by this user
                      </Trans>
                    </Text>
                  </View>
                </Link>
+              </>
+            )}

-                {authorHandle && !isInvalidHandle(authorHandle) && (
-                  <>
-                    <Divider />
+            {preferences ? (
+              <>
+                <Divider />

-                    <Link
-                      label={_(
-                        msg`View all posts by @${authorHandle} with tag ${displayTag}`,
-                      )}
-                      {...createStaticClick(() => {
-                        control.close(() => {
-                          navigation.push('Hashtag', {
-                            tag: encodeURIComponent(tag),
-                            author: authorHandle,
-                          })
-                        })
-                      })}>
-                      <View
-                        style={[
-                          a.w_full,
-                          a.flex_row,
-                          a.align_center,
-                          a.justify_start,
-                          a.gap_md,
-                          a.px_lg,
-                          a.py_md,
-                        ]}>
-                        <Person
-                          size="lg"
-                          style={[t.atoms.text_contrast_medium]}
-                        />
-                        <Text
-                          numberOfLines={1}
-                          ellipsizeMode="middle"
-                          style={[
-                            a.flex_1,
-                            a.text_md,
-                            a.font_bold,
-                            native({top: 2}),
-                            t.atoms.text_contrast_medium,
-                          ]}>
-                          <Trans>
-                            See{' '}
-                            <Text
-                              style={[a.text_md, a.font_bold, t.atoms.text]}>
-                              {displayTag}
-                            </Text>{' '}
-                            posts by this user
-                          </Trans>
-                        </Text>
-                      </View>
-                    </Link>
-                  </>
-                )}
-
-                {preferences ? (
-                  <>
-                    <Divider />
-
-                    <Button
-                      label={
-                        isMuted
-                          ? _(msg`Unmute all ${displayTag} posts`)
-                          : _(msg`Mute all ${displayTag} posts`)
+                <Button
+                  label={
+                    isMuted
+                      ? _(msg`Unmute all ${displayTag} posts`)
+                      : _(msg`Mute all ${displayTag} posts`)
+                  }
+                  onPress={() => {
+                    control.close(() => {
+                      if (isMuted) {
+                        resetUpsert()
+                        removeMutedWords(removeableMuteWords)
+                      } else {
+                        resetRemove()
+                        upsertMutedWord([
+                          {
+                            value: tag,
+                            targets: ['tag'],
+                            actorTarget: 'all',
+                          },
+                        ])
                      }
-                      onPress={() => {
-                        control.close(() => {
-                          if (isMuted) {
-                            resetUpsert()
-                            removeMutedWords(removeableMuteWords)
-                          } else {
-                            resetRemove()
-                            upsertMutedWord([
-                              {
-                                value: tag,
-                                targets: ['tag'],
-                                actorTarget: 'all',
-                              },
-                            ])
-                          }
-                        })
-                      }}>
-                      <View
-                        style={[
-                          a.w_full,
-                          a.flex_row,
-                          a.align_center,
-                          a.justify_start,
-                          a.gap_md,
-                          a.px_lg,
-                          a.py_md,
-                        ]}>
-                        <Mute
-                          size="lg"
-                          style={[t.atoms.text_contrast_medium]}
-                        />
-                        <Text
-                          numberOfLines={1}
-                          ellipsizeMode="middle"
-                          style={[
-                            a.flex_1,
-                            a.text_md,
-                            a.font_bold,
-                            native({top: 2}),
-                            t.atoms.text_contrast_medium,
-                          ]}>
-                          {isMuted ? _(msg`Unmute`) : _(msg`Mute`)}{' '}
-                          <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
-                            {displayTag}
-                          </Text>{' '}
-                          <Trans>posts</Trans>
-                        </Text>
-                      </View>
-                    </Button>
-                  </>
-                ) : null}
-              </View>
+                    })
+                  }}>
+                  <View
+                    style={[
+                      a.w_full,
+                      a.flex_row,
+                      a.align_center,
+                      a.justify_start,
+                      a.gap_md,
+                      a.px_lg,
+                      a.py_md,
+                    ]}>
+                    <Mute size="lg" style={[t.atoms.text_contrast_medium]} />
+                    <Text
+                      numberOfLines={1}
+                      ellipsizeMode="middle"
+                      style={[
+                        a.flex_1,
+                        a.text_md,
+                        a.font_bold,
+                        native({top: 2}),
+                        t.atoms.text_contrast_medium,
+                      ]}>
+                      {isMuted ? _(msg`Unmute`) : _(msg`Mute`)}{' '}
+                      <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
+                        {displayTag}
+                      </Text>{' '}
+                      <Trans>posts</Trans>
+                    </Text>
+                  </View>
+                </Button>
+              </>
+            ) : null}
+          </View>

-              <Button
-                label={_(msg`Close this dialog`)}
-                size="small"
-                variant="ghost"
-                color="secondary"
-                onPress={() => control.close()}>
-                <ButtonText>
-                  <Trans>Cancel</Trans>
-                </ButtonText>
-              </Button>
-            </>
-          )}
-        </Dialog.Inner>
-      </Dialog.Outer>
-    </>
+          <Button
+            label={_(msg`Close this dialog`)}
+            size="small"
+            variant="ghost"
+            color="secondary"
+            onPress={() => control.close()}>
+            <ButtonText>
+              <Trans>Cancel</Trans>
+            </ButtonText>
+          </Button>
+        </>
+      )}
+    </Dialog.Inner>
  )
 }
@@ -1,140 +1,15 @@
-import React from 'react'
-import {StyleProp, TextProps as RNTextProps, TextStyle} from 'react-native'
 import {UITextView} from 'react-native-uitextview'
-import createEmojiRegex from 'emoji-regex'

 import {logger} from '#/logger'
-import {isIOS, isNative} from '#/platform/detection'
-import {Alf, applyFonts, atoms, flatten, useAlf, useTheme, web} from '#/alf'
+import {atoms, flatten, useAlf, useTheme, web} from '#/alf'
+import {
+  childHasEmoji,
+  normalizeTextStyles,
+  renderChildrenWithEmoji,
+  TextProps,
+} from '#/alf/typography'
 import {IS_DEV} from '#/env'
-
-export type StringChild = string | (string | null)[]
-
-export type TextProps = Omit<RNTextProps, 'children'> & {
-  /**
-   * Lets the user select text, to use the native copy and paste functionality.
-   */
-  selectable?: boolean
-  /**
-   * Provides `data-*` attributes to the underlying `UITextView` component on
-   * web only.
-   */
-  dataSet?: Record<string, string | number | undefined>
-  /**
-   * Appears as a small tooltip on web hover.
-   */
-  title?: string
-} & (
-    | {
-        emoji?: true
-        children: StringChild
-      }
-    | {
-        emoji?: false
-        children: RNTextProps['children']
-      }
-  )
-
-const EMOJI = createEmojiRegex()
-
-export function childHasEmoji(children: React.ReactNode) {
-  return (Array.isArray(children) ? children : [children]).some(
-    child => typeof child === 'string' && createEmojiRegex().test(child),
-  )
-}
-
-export function childIsString(
-  children: React.ReactNode,
-): children is StringChild {
-  return (
-    typeof children === 'string' ||
-    (Array.isArray(children) &&
-      children.every(child => typeof child === 'string' || child === null))
-  )
-}
-
-export function renderChildrenWithEmoji(
-  children: StringChild,
-  props: Omit<TextProps, 'children'> = {},
-) {
-  const normalized = Array.isArray(children) ? children : [children]
-
-  return (
-    <UITextView {...props}>
-      {normalized.map(child => {
-        if (typeof child !== 'string') return child
-
-        const emojis = child.match(EMOJI)
-
-        if (emojis === null) {
-          return child
-        }
-
-        return child.split(EMOJI).map((stringPart, index) => (
-          <UITextView key={index} {...props}>
-            {stringPart}
-            {emojis[index] ? (
-              <UITextView
-                {...props}
-                style={[props?.style, {color: 'black', fontFamily: 'System'}]}>
-                {emojis[index]}
-              </UITextView>
-            ) : null}
-          </UITextView>
-        ))
-      })}
-    </UITextView>
-  )
-}
-
-/**
- * Util to calculate lineHeight from a text size atom and a leading atom
- *
- * Example:
- *   `leading(atoms.text_md, atoms.leading_normal)` // => 24
- */
-export function leading<
-  Size extends {fontSize?: number},
-  Leading extends {lineHeight?: number},
->(textSize: Size, leading: Leading) {
-  const size = textSize?.fontSize || atoms.text_md.fontSize
-  const lineHeight = leading?.lineHeight || atoms.leading_normal.lineHeight
-  return Math.round(size * lineHeight)
-}
-
-/**
- * Ensures that `lineHeight` defaults to a relative value of `1`, or applies
- * other relative leading atoms.
- *
- * If the `lineHeight` value is > 2, we assume it's an absolute value and
- * returns it as-is.
- */
-export function normalizeTextStyles(
-  styles: StyleProp<TextStyle>,
-  {
-    fontScale,
-    fontFamily,
-  }: {
-    fontScale: number
-    fontFamily: Alf['fonts']['family']
-  } & Pick<Alf, 'flags'>,
-) {
-  const s = flatten(styles)
-  // should always be defined on these components
-  s.fontSize = (s.fontSize || atoms.text_md.fontSize) * fontScale
-
-  if (s?.lineHeight) {
-    if (s.lineHeight !== 0 && s.lineHeight <= 2) {
-      s.lineHeight = Math.round(s.fontSize * s.lineHeight)
-    }
-  } else if (!isNative) {
-    s.lineHeight = s.fontSize
-  }
-
-  applyFonts(s, fontFamily)
-
-  return s
-}
+export type {TextProps}

 /**
 * Our main text component. Use this most of the time.
@@ -162,10 +37,6 @@ export function Text({
        `Text: emoji detected but emoji not enabled: "${children}"\n\nPlease add <Text emoji />'`,
      )
    }
-
-    if (emoji && !childIsString(children)) {
-      logger.error('Text: when <Text emoji />, children can only be strings.')
-    }
  }

  const shared = {
@@ -178,12 +49,12 @@ export function Text({

  return (
    <UITextView {...shared}>
-      {isIOS && emoji ? renderChildrenWithEmoji(children, shared) : children}
+      {renderChildrenWithEmoji(children, shared, emoji ?? false)}
    </UITextView>
  )
 }

-export function createHeadingElement({level}: {level: number}) {
+function createHeadingElement({level}: {level: number}) {
  return function HeadingElement({style, ...rest}: TextProps) {
    const attr =
      web({
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -306,7 +306,7 @@ export function PostInteractionSettingsForm({
              }
              value={quotesEnabled}
              onChange={onChangeQuotesEnabled}
-              style={[, a.justify_between, a.pt_xs]}>
+              style={[a.justify_between, a.pt_xs]}>
              <Text style={[t.atoms.text_contrast_medium]}>
                {quotesEnabled ? (
                  <Trans>Quote posts enabled</Trans>
@@ -483,7 +483,7 @@ function Selectable({
            a.justify_between,
            a.rounded_sm,
            a.p_md,
-            {height: 40}, // for consistency with checkmark icon visible or not
+            {minHeight: 40}, // for consistency with checkmark icon visible or not
            t.atoms.bg_contrast_50,
            (hovered || focused) && t.atoms.bg_contrast_100,
            isSelected && {
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -100,7 +100,6 @@ function Inner({

  if (IS_DEV && typeof window !== 'undefined') {
    // @ts-ignore
-    // eslint-disable-next-line react-compiler/react-compiler
    window.clearNuxDialog = (id: Nux) => {
      if (!IS_DEV || !id) return
      removeNuxs([id])
@@ -115,7 +115,7 @@ let ConvoMenu = ({
                  {...props}
                  onPress={() => {
                    Keyboard.dismiss()
-                    // eslint-disable-next-line react/prop-types -- eslint is confused by the name `props`
+
                    props.onPress()
                  }}
                  style={[
@@ -1,4 +1,3 @@
-import React from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -19,10 +19,11 @@ import {ConvoItem} from '#/state/messages/convo/types'
 import {useSession} from '#/state/session'
 import {TimeElapsed} from '#/view/com/util/TimeElapsed'
 import {atoms as a, useTheme} from '#/alf'
+import {isOnlyEmoji} from '#/alf/typography'
 import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
-import {isOnlyEmoji, RichText} from '../RichText'
+import {RichText} from '../RichText'
 import {DateDivider} from './DateDivider'
 import {MessageItemEmbed} from './MessageItemEmbed'
 import {localDateString} from './util'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

@@ -1,4 +1,3 @@
-import React from 'react'
 import {Pressable, View} from 'react-native'
 import {useLingui} from '@lingui/react'

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'

 import {atoms as a, useTheme} from '#/alf'
@@ -22,6 +22,7 @@ import {
  it,
  ja,
  ko,
+  pl,
  ptBR,
  ru,
  th,
@@ -53,6 +54,7 @@ const locales: Record<AppLanguage, Locale | undefined> = {
  it,
  ja,
  ko,
+  pl,
  ['pt-BR']: ptBR,
  ru,
  th,
@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const ChainLink3_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M18.535 5.465a5.003 5.003 0 0 0-7.076 0l-.005.005-.752.742a1 1 0 1 1-1.404-1.424l.749-.74a7.003 7.003 0 0 1 9.904 9.905l-.002.003-.737.746a1 1 0 1 1-1.424-1.404l.747-.757a5.003 5.003 0 0 0 0-7.076ZM6.202 9.288a1 1 0 0 1 .01 1.414l-.747.757a5.003 5.003 0 1 0 7.076 7.076l.005-.005.752-.742a1 1 0 1 1 1.404 1.424l-.746.737-.003.002a7.003 7.003 0 0 1-9.904-9.904l.74-.75a1 1 0 0 1 1.413-.009Zm8.505.005a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0Z',
+})
@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleSheet, TextProps} from 'react-native'
 import type {PathProps, SvgProps} from 'react-native-svg'
 import {Defs, LinearGradient, Stop} from 'react-native-svg'
@@ -31,6 +31,37 @@ export function ContentHider({
  ignoreMute?: boolean
  style?: StyleProp<ViewStyle>
  childContainerStyle?: StyleProp<ViewStyle>
+}>) {
+  const blur = modui?.blurs[0]
+  if (!blur || (ignoreMute && isJustAMute(modui))) {
+    return (
+      <View testID={testID} style={style}>
+        {children}
+      </View>
+    )
+  }
+  return (
+    <ContentHiderActive
+      testID={testID}
+      modui={modui}
+      style={style}
+      childContainerStyle={childContainerStyle}>
+      {children}
+    </ContentHiderActive>
+  )
+}
+
+function ContentHiderActive({
+  testID,
+  modui,
+  style,
+  childContainerStyle,
+  children,
+}: React.PropsWithChildren<{
+  testID?: string
+  modui: ModerationUI
+  style?: StyleProp<ViewStyle>
+  childContainerStyle?: StyleProp<ViewStyle>
 }>) {
  const t = useTheme()
  const {_} = useLingui()
@@ -40,7 +71,6 @@ export function ContentHider({
  const {labelDefs} = useLabelDefinitions()
  const globalLabelStrings = useGlobalLabelStrings()
  const {i18n} = useLingui()
-
  const blur = modui?.blurs[0]
  const desc = useModerationCauseDescription(blur)

@@ -68,8 +98,6 @@ export function ContentHider({
          if (hasAdultContentLabel) {
            return false
          }
-          // https://github.com/facebook/react/issues/31569
-          // eslint-disable-next-line react-compiler/react-compiler
          hasAdultContentLabel = true
        }
        return true
@@ -101,14 +129,6 @@ export function ContentHider({
    globalLabelStrings,
  ])

-  if (!blur || (ignoreMute && isJustAMute(modui))) {
-    return (
-      <View testID={testID} style={style}>
-        {children}
-      </View>
-    )
-  }
-
  return (
    <View testID={testID} style={[a.overflow_hidden, style]}>
      <ModerationDetailsDialog control={control} modcause={blur} />
@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
 import {AppBskyFeedDefs, ComAtprotoLabelDefs} from '@atproto/api'
 import {msg, Plural} from '@lingui/macro'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {ModerationCause} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleProp, ViewStyle} from 'react-native'
 import {ModerationCause, ModerationUI} from '@atproto/api'

@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleProp, ViewStyle} from 'react-native'
 import {ModerationDecision} from '@atproto/api'

@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'

 import {atoms as a, useTheme} from '#/alf'
@@ -10,39 +9,23 @@ export function PlayButtonIcon({size = 32}: {size?: number}) {
  const fg = t.name === 'light' ? t.palette.contrast_975 : t.palette.contrast_25

  return (
-    <View
-      style={[
-        a.rounded_full,
-        a.overflow_hidden,
-        a.align_center,
-        a.justify_center,
-        t.atoms.shadow_lg,
-        {
-          width: size + size / 1.5,
-          height: size + size / 1.5,
-        },
-      ]}>
+    <>
      <View
        style={[
-          a.absolute,
-          a.inset_0,
+          a.rounded_full,
          {
            backgroundColor: bg,
+            shadowColor: 'black',
+            shadowRadius: 32,
+            shadowOpacity: 0.5,
+            elevation: 24,
+            width: size + size / 1.5,
+            height: size + size / 1.5,
            opacity: 0.7,
          },
        ]}
      />
-      <PlayIcon
-        width={size}
-        fill={fg}
-        style={[
-          a.relative,
-          a.z_10,
-          {
-            left: size / 50,
-          },
-        ]}
-      />
-    </View>
+      <PlayIcon width={size} fill={fg} style={a.absolute} />
+    </>
  )
 }
@@ -154,6 +154,7 @@ export const SUPPORTED_MIME_TYPES = [
  'video/mpeg',
  'video/webm',
  'video/quicktime',
+  'image/gif',
 ] as const

 export type SupportedMimeTypes = (typeof SUPPORTED_MIME_TYPES)[number]
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import Animated, {
  Keyframe,
@@ -1,4 +1,3 @@
-import React from 'react'
 import {Pressable, PressableProps, StyleProp, ViewStyle} from 'react-native'
 import Animated, {
  cancelAnimation,
@@ -0,0 +1,39 @@
+import {useState} from 'react'
+import {AnimatedRef, measure, MeasuredDimensions} from 'react-native-reanimated'
+
+export type HandleRef = {
+  (node: any): void
+  current: null | number
+}
+
+// This is a lighterweight alternative to `useAnimatedRef()` for imperative UI thread actions.
+// Render it like <View ref={ref} />, then pass `ref.current` to `measureHandle()` and such.
+export function useHandleRef(): HandleRef {
+  return useState(() => {
+    const ref = (node: any) => {
+      if (node) {
+        ref.current =
+          node._nativeTag ??
+          node.__nativeTag ??
+          node.canonical?.nativeTag ??
+          null
+      } else {
+        ref.current = null
+      }
+    }
+    ref.current = null
+    return ref
+  })[0] as HandleRef
+}
+
+// When using this version, you need to read ref.current on the JS thread, and pass it to UI.
+export function measureHandle(
+  current: number | null,
+): MeasuredDimensions | null {
+  'worklet'
+  if (current !== null) {
+    return measure((() => current) as AnimatedRef<any>)
+  } else {
+    return null
+  }
+}
@@ -4,12 +4,14 @@ import * as WebBrowser from 'expo-web-browser'

 import {
  createBskyAppAbsoluteUrl,
+  isBskyAppUrl,
  isBskyRSSUrl,
  isRelativeUrl,
 } from '#/lib/strings/url-helpers'
 import {isNative} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
 import {useInAppBrowser} from '#/state/preferences/in-app-browser'
+import {useOptOutOfUtm} from '#/state/preferences/opt-out-of-utm'
 import {useTheme} from '#/alf'
 import {useSheetWrapper} from '#/components/Dialog/sheet-wrapper'

@@ -18,6 +20,7 @@ export function useOpenLink() {
  const enabled = useInAppBrowser()
  const t = useTheme()
  const sheetWrapper = useSheetWrapper()
+  const optOutOfUtm = useOptOutOfUtm()

  const openLink = useCallback(
    async (url: string, override?: boolean) => {
@@ -26,6 +29,9 @@ export function useOpenLink() {
      }

      if (isNative && !url.startsWith('mailto:')) {
+        if (!optOutOfUtm && !isBskyAppUrl(url) && url.startsWith('http')) {
+          url = addUtmSource(url)
+        }
        if (override === undefined && enabled === undefined) {
          openModal({
            name: 'in-app-browser-consent',
@@ -47,8 +53,24 @@ export function useOpenLink() {
      }
      Linking.openURL(url)
    },
-    [enabled, openModal, t, sheetWrapper],
+    [enabled, openModal, t, sheetWrapper, optOutOfUtm],
  )

  return openLink
 }
+
+function addUtmSource(url: string): string {
+  let parsedUrl
+  try {
+    parsedUrl = new URL(url)
+  } catch (e) {
+    return url
+  }
+  if (!parsedUrl.searchParams.has('utm_source')) {
+    parsedUrl.searchParams.set('utm_source', 'bluesky')
+    if (!parsedUrl.searchParams.has('utm_medium')) {
+      parsedUrl.searchParams.set('utm_medium', 'social')
+    }
+  }
+  return parsedUrl.toString()
+}
@@ -0,0 +1,32 @@
+import * as React from 'react'
+
+/**
+ * Helper hook to run persistent timers on views
+ */
+export function useTimer(time: number, handler: () => void) {
+  const timer = React.useRef<undefined | NodeJS.Timeout>(undefined)
+
+  // function to restart the timer
+  const reset = React.useCallback(() => {
+    if (timer.current) {
+      clearTimeout(timer.current)
+    }
+    timer.current = setTimeout(handler, time)
+  }, [time, timer, handler])
+
+  // function to cancel the timer
+  const cancel = React.useCallback(() => {
+    if (timer.current) {
+      clearTimeout(timer.current)
+      timer.current = undefined
+    }
+  }, [timer])
+
+  // start the timer immediately
+  React.useEffect(() => {
+    reset()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [])
+
+  return [reset, cancel]
+}
@@ -9,24 +9,20 @@ if ('scrollRestoration' in history) {

 function createInitialScrollState() {
  return {
-    // Not used for rendering.
-    // Treat it as a ref so that we can mutate it without upsetting the compiler.
-    current: {
-      scrollYs: new Map(),
-      focusedKey: null as string | null,
-    },
+    scrollYs: new Map(),
+    focusedKey: null as string | null,
  }
 }

 export function useWebScrollRestoration() {
-  const [ref] = useState(createInitialScrollState)
+  const [state] = useState(createInitialScrollState)
  const navigation = useNavigation()

  useEffect(() => {
    function onDispatch() {
-      if (ref.current.focusedKey) {
+      if (state.focusedKey) {
        // Remember where we were for later.
-        ref.current.scrollYs.set(ref.current.focusedKey, window.scrollY)
+        state.scrollYs.set(state.focusedKey, window.scrollY)
        // TODO: Strictly speaking, this is a leak. We never clean up.
        // This is because I'm not sure when it's appropriate to clean it up.
        // It doesn't seem like popstate is enough because it can still Forward-Back again.
@@ -40,17 +36,17 @@ export function useWebScrollRestoration() {
    return () => {
      navigation.removeListener('__unsafe_action__' as any, onDispatch)
    }
-  }, [ref, navigation])
+  }, [state, navigation])

  const screenListeners = useMemo(
    () => ({
      focus(e: EventArg<'focus', boolean | undefined, unknown>) {
-        const scrollY = ref.current.scrollYs.get(e.target) ?? 0
+        const scrollY = state.scrollYs.get(e.target) ?? 0
        window.scrollTo(0, scrollY)
-        ref.current.focusedKey = e.target ?? null
+        state.focusedKey = e.target ?? null
      },
    }),
-    [ref],
+    [state],
  )
  return screenListeners
 }
@@ -1,4 +1,3 @@
-import React from 'react'
 import {StyleProp, TextStyle, ViewStyle} from 'react-native'
 import Svg, {Ellipse, Line, Path, Rect} from 'react-native-svg'

@@ -32,6 +32,8 @@ export function mimeToExt(mimeType: SupportedMimeTypes | (string & {})) {
      return 'mpeg'
    case 'video/quicktime':
      return 'mov'
+    case 'image/gif':
+      return 'gif'
    default:
      throw new Error(`Unsupported mime type: ${mimeType}`)
  }
@@ -47,6 +49,8 @@ export function extToMime(ext: string) {
      return 'video/mpeg'
    case 'mov':
      return 'video/quicktime'
+    case 'gif':
+      return 'image/gif'
    default:
      throw new Error(`Unsupported file extension: ${ext}`)
  }
@@ -13,6 +13,12 @@ type LocalWithLanguageCode = Locale & {
 *
 * {@link https://github.com/bluesky-social/social-app/pull/4461}
 * {@link https://xml.coverpages.org/iso639a.html}
+ *
+ * Convert Chinese language tags for Native.
+ *
+ * {@link https://datatracker.ietf.org/doc/html/rfc5646#appendix-A}
+ * {@link https://developer.apple.com/documentation/packagedescription/languagetag}
+ * {@link https://gist.github.com/amake/0ac7724681ac1c178c6f95a5b09f03ce#new-locales-vs-old-locales-chinese}
 */
 export function getLocales() {
  const locales = defaultGetLocales?.() ?? []
@@ -32,10 +38,25 @@ export function getLocales() {
        // yiddish
        locale.languageCode = 'yi'
      }
-
-      // @ts-ignore checked above
-      output.push(locale)
    }
+
+    if (typeof locale.languageTag === 'string') {
+      if (locale.languageTag.startsWith('zh-Hans')) {
+        // Simplified Chinese to zh-CN
+        locale.languageTag = 'zh-CN'
+      }
+      if (locale.languageTag.startsWith('zh-Hant')) {
+        // Traditional Chinese to zh-TW
+        locale.languageTag = 'zh-TW'
+      }
+      if (locale.languageTag.startsWith('yue')) {
+        // Cantonese (Yue) to zh-HK
+        locale.languageTag = 'zh-HK'
+      }
+    }
+
+    // @ts-ignore checked above
+    output.push(locale)
  }

  return output
@@ -145,6 +145,8 @@ export function sanitizeAppLanguageSetting(appLanguage: string): AppLanguage {
        return AppLanguage.ja
      case 'ko':
        return AppLanguage.ko
+      case 'pl':
+        return AppLanguage.pl
      case 'pt-BR':
        return AppLanguage.pt_BR
      case 'ru':
@@ -25,6 +25,7 @@ import {messages as messagesId} from '#/locale/locales/id/messages'
 import {messages as messagesIt} from '#/locale/locales/it/messages'
 import {messages as messagesJa} from '#/locale/locales/ja/messages'
 import {messages as messagesKo} from '#/locale/locales/ko/messages'
+import {messages as messagesPl} from '#/locale/locales/pl/messages'
 import {messages as messagesPt_BR} from '#/locale/locales/pt-BR/messages'
 import {messages as messagesRu} from '#/locale/locales/ru/messages'
 import {messages as messagesTh} from '#/locale/locales/th/messages'
@@ -144,6 +145,14 @@ export async function dynamicActivate(locale: AppLanguage) {
      ])
      break
    }
+    case AppLanguage.pl: {
+      i18n.loadAndActivate({locale, messages: messagesPl})
+      await Promise.all([
+        import('@formatjs/intl-pluralrules/locale-data/pl'),
+        import('@formatjs/intl-numberformat/locale-data/pl'),
+      ])
+      break
+    }
    case AppLanguage.pt_BR: {
      i18n.loadAndActivate({locale, messages: messagesPt_BR})
      await Promise.all([
@@ -215,7 +224,7 @@ export async function dynamicActivate(locale: AppLanguage) {
  }
 }

-export async function useLocaleLanguage() {
+export function useLocaleLanguage() {
  const {appLanguage} = useLanguagePrefs()
  useEffect(() => {
    dynamicActivate(sanitizeAppLanguageSetting(appLanguage))
@@ -64,6 +64,10 @@ export async function dynamicActivate(locale: AppLanguage) {
      mod = await import(`./locales/ko/messages`)
      break
    }
+    case AppLanguage.pl: {
+      mod = await import(`./locales/pl/messages`)
+      break
+    }
    case AppLanguage.pt_BR: {
      mod = await import(`./locales/pt-BR/messages`)
      break
@@ -19,6 +19,7 @@ export enum AppLanguage {
  it = 'it',
  ja = 'ja',
  ko = 'ko',
+  pl = 'pl',
  pt_BR = 'pt-BR',
  ru = 'ru',
  th = 'th',
@@ -49,6 +50,7 @@ export const APP_LANGUAGES: AppLanguageConfig[] = [
  {code2: AppLanguage.it, name: 'Italiano – Italian'},
  {code2: AppLanguage.ja, name: '日本語 – Japanese'},
  {code2: AppLanguage.ko, name: '한국어 – Korean'},
+  {code2: AppLanguage.pl, name: 'Polski – Polish'},
  {code2: AppLanguage.pt_BR, name: 'Português (BR) – Portuguese (BR)'},
  {code2: AppLanguage.ru, name: 'Русский – Russian'},
  {code2: AppLanguage.th, name: 'ภาษาไทย – Thai'},
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {useState} from 'react'
 import {ActivityIndicator, View} from 'react-native'
 import {BskyAgent} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react'
+import {useCallback, useEffect, useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {ChatBskyConvoDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -1,4 +1,4 @@
-import React, {useCallback, useState} from 'react'
+import {useCallback, useState} from 'react'
 import {View} from 'react-native'
 import {ComAtprotoModerationDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useMemo, useState} from 'react'
+import {useCallback, useEffect, useMemo, useState} from 'react'
 import {LayoutAnimation, View} from 'react-native'
 import {
  AppBskyFeedPost,
@@ -17,10 +17,11 @@ import {
  useTheme,
  web,
 } from '#/alf'
+import {leading} from '#/alf/typography'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
 import {createPortalGroup} from '#/components/Portal'
-import {leading, P, Text} from '#/components/Typography'
+import {P, Text} from '#/components/Typography'
 import {IS_DEV} from '#/env'

 const COL_WIDTH = 420
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {AppBskyActorDefs, ModerationDecision} from '@atproto/api'

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useState} from 'react'
+import {useCallback, useEffect, useState} from 'react'
 import {Dimensions, View} from 'react-native'
 import {Image as RNImage} from 'react-native-image-crop-picker'
 import {AppBskyActorDefs} from '@atproto/api'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {AppBskyActorDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -24,7 +23,7 @@ export function ProfileHeaderHandle({
  const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy
  return (
    <View
-      style={[a.flex_row, a.gap_xs, a.align_center]}
+      style={[a.flex_row, a.gap_xs, a.align_center, {maxWidth: '100%'}]}
      pointerEvents={disableTaps ? 'none' : isIOS ? 'auto' : 'box-none'}>
      <NewskieDialog profile={profile} disabled={disableTaps} />
      {profile.viewer?.followedBy && !blockHide ? (
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {AppBskyActorDefs} from '@atproto/api'
 import {msg, plural} from '@lingui/macro'
@@ -1,12 +1,6 @@
 import React, {memo} from 'react'
 import {StyleSheet, TouchableWithoutFeedback, View} from 'react-native'
-import Animated, {
-  measure,
-  MeasuredDimensions,
-  runOnJS,
-  runOnUI,
-  useAnimatedRef,
-} from 'react-native-reanimated'
+import {MeasuredDimensions, runOnJS, runOnUI} from 'react-native-reanimated'
 import {AppBskyActorDefs, ModerationDecision} from '@atproto/api'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
@@ -14,6 +8,7 @@ import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'

 import {BACK_HITSLOP} from '#/lib/constants'
+import {measureHandle, useHandleRef} from '#/lib/hooks/useHandleRef'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {NavigationProp} from '#/lib/routes/types'
 import {isIOS} from '#/platform/detection'
@@ -49,7 +44,7 @@ let ProfileHeaderShell = ({
  const {openLightbox} = useLightboxControls()
  const navigation = useNavigation<NavigationProp>()
  const {isDesktop} = useWebMediaQueries()
-  const aviRef = useAnimatedRef()
+  const aviRef = useHandleRef()

  const onPressBack = React.useCallback(() => {
    if (navigation.canGoBack()) {
@@ -86,9 +81,10 @@ let ProfileHeaderShell = ({
    const modui = moderation.ui('avatar')
    const avatar = profile.avatar
    if (avatar && !(modui.blur && modui.noOverride)) {
+      const aviHandle = aviRef.current
      runOnUI(() => {
        'worklet'
-        const rect = measure(aviRef)
+        const rect = measureHandle(aviHandle)
        runOnJS(_openLightbox)(avatar, rect)
      })()
    }
@@ -170,14 +166,14 @@ let ProfileHeaderShell = ({
              styles.avi,
              profile.associated?.labeler && styles.aviLabeler,
            ]}>
-            <Animated.View ref={aviRef} collapsable={false}>
+            <View ref={aviRef} collapsable={false}>
              <UserAvatar
                type={profile.associated?.labeler ? 'labeler' : 'user'}
                size={90}
                avatar={profile.avatar}
                moderation={moderation.ui('avatar')}
              />
-            </Animated.View>
+            </View>
          </View>
        </TouchableWithoutFeedback>
      </GrowableAvatar>
@@ -1,4 +1,3 @@
-import React from 'react'
 import {Platform} from 'react-native'
 import {setStringAsync} from 'expo-clipboard'
 import {msg, Trans} from '@lingui/macro'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import {useCallback} from 'react'
 import {View} from 'react-native'
 import Animated, {
  FadeIn,
@@ -1,4 +1,3 @@
-import React from 'react'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'
@@ -10,9 +9,16 @@ import {
  useInAppBrowser,
  useSetInAppBrowser,
 } from '#/state/preferences/in-app-browser'
+import {
+  useOptOutOfUtm,
+  useSetOptOutOfUtm,
+} from '#/state/preferences/opt-out-of-utm'
 import * as SettingsList from '#/screens/Settings/components/SettingsList'
+import {atoms as a} from '#/alf'
+import {Admonition} from '#/components/Admonition'
 import * as Toggle from '#/components/forms/Toggle'
 import {Bubbles_Stroke2_Corner2_Rounded as BubblesIcon} from '#/components/icons/Bubble'
+import {ChainLink3_Stroke2_Corner0_Rounded as ChainLinkIcon} from '#/components/icons/ChainLink'
 import {Hashtag_Stroke2_Corner0_Rounded as HashtagIcon} from '#/components/icons/Hashtag'
 import {Home_Stroke2_Corner2_Rounded as HomeIcon} from '#/components/icons/Home'
 import {Macintosh_Stroke2_Corner2_Rounded as MacintoshIcon} from '#/components/icons/Macintosh'
@@ -30,6 +36,8 @@ export function ContentAndMediaSettingsScreen({}: Props) {
  const setAutoplayDisabledPref = useSetAutoplayDisabled()
  const inAppBrowserPref = useInAppBrowser()
  const setUseInAppBrowser = useSetInAppBrowser()
+  const optOutOfUtm = useOptOutOfUtm()
+  const setOptOutOfUtm = useSetOptOutOfUtm()

  return (
    <Layout.Screen>
@@ -69,6 +77,19 @@ export function ContentAndMediaSettingsScreen({}: Props) {
            </SettingsList.ItemText>
          </SettingsList.LinkItem>
          <SettingsList.Divider />
+          <Toggle.Item
+            name="disable_autoplay"
+            label={_(msg`Autoplay videos and GIFs`)}
+            value={!autoplayDisabledPref}
+            onChange={value => setAutoplayDisabledPref(!value)}>
+            <SettingsList.Item>
+              <SettingsList.ItemIcon icon={PlayIcon} />
+              <SettingsList.ItemText>
+                <Trans>Autoplay videos and GIFs</Trans>
+              </SettingsList.ItemText>
+              <Toggle.Platform />
+            </SettingsList.Item>
+          </Toggle.Item>
          {isNative && (
            <Toggle.Item
              name="use_in_app_browser"
@@ -84,19 +105,31 @@ export function ContentAndMediaSettingsScreen({}: Props) {
              </SettingsList.Item>
            </Toggle.Item>
          )}
-          <Toggle.Item
-            name="disable_autoplay"
-            label={_(msg`Autoplay videos and GIFs`)}
-            value={!autoplayDisabledPref}
-            onChange={value => setAutoplayDisabledPref(!value)}>
+          {isNative && <SettingsList.Divider />}
+          {isNative && (
+            <Toggle.Item
+              name="allow_utm"
+              label={_(msg`Specify Bluesky as a referer`)}
+              value={!(optOutOfUtm ?? false)}
+              onChange={value => setOptOutOfUtm(!value)}>
+              <SettingsList.Item>
+                <SettingsList.ItemIcon icon={ChainLinkIcon} />
+                <SettingsList.ItemText>
+                  <Trans>Send Bluesky referrer</Trans>
+                </SettingsList.ItemText>
+                <Toggle.Platform />
+              </SettingsList.Item>
+            </Toggle.Item>
+          )}
+          {isNative && (
            <SettingsList.Item>
-              <SettingsList.ItemIcon icon={PlayIcon} />
-              <SettingsList.ItemText>
-                <Trans>Autoplay videos and GIFs</Trans>
-              </SettingsList.ItemText>
-              <Toggle.Platform />
+              <Admonition type="info" style={[a.flex_1]}>
+                <Trans>
+                  Helps external sites estimate traffic from Bluesky.
+                </Trans>
+              </Admonition>
            </SettingsList.Item>
-          </Toggle.Item>
+          )}
        </SettingsList.Container>
      </Layout.Content>
    </Layout.Screen>
@@ -1,4 +1,4 @@
-import React, {Fragment} from 'react'
+import {Fragment} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

@@ -1,4 +1,4 @@
-import React, {useCallback, useMemo} from 'react'
+import {useCallback, useMemo} from 'react'
 import {View} from 'react-native'
 import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
 import {msg, Trans} from '@lingui/macro'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {Text} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import {useState} from 'react'
 import {LayoutAnimation, Pressable, View} from 'react-native'
 import {Linking} from 'react-native'
 import {useReducedMotion} from 'react-native-reanimated'
@@ -1,4 +1,3 @@
-import React from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Dan Abramov	a3d7e3e56c	Narrow down the condition slightly	2024-11-22 23:24:17 +00:00
Dan Abramov	4e09534475	Remove noreferrer on links We do have <meta name="referrer" content="origin-when-cross-origin"> in HTML, should be sufficient.	2024-11-22 23:07:07 +00:00
Dan Abramov	ad5445cd08	Add an opt out for sending utm	2024-11-22 22:46:48 +00:00
Eric Bailey	af4b7cc354	Add ChainLink3	2024-11-22 22:14:59 +00:00
Dan Abramov	5e8535a1ba	Pass referer on native	2024-11-22 21:40:15 +00:00
dan	ba04bb58cd	Fix leaking background (#6642 )	2024-11-22 19:51:36 +00:00
dan	7fa47ef3c9	Simplify play icon shadow (#6641 ) * Simplify play icon shadow * Make it consistent across themes	2024-11-22 19:43:32 +00:00
rshigg	ced67876cc	Add ability to block account from post dropdown menu (#6091 ) Co-authored-by: Hailey <me@haileyok.com> Co-authored-by: Hailey <hailey@blueskyweb.xyz>	2024-11-22 11:36:00 -08:00
Samuel Newman	247bc100cb	Bump Typescript version to 5.7 (#6640 )	2024-11-22 19:27:30 +00:00
Samuel Newman	bc2a3aee0c	fix avi follow deadzone (#6639 )	2024-11-22 18:56:07 +00:00
Samuel Newman	3781074921	Add gif support to web (#6433 ) * add gif support to web * rm set dimensions * rm effect from preview * rm log * rm use of {cause: error} * fix lint	2024-11-22 17:58:29 +00:00
Samuel Newman	76ca72cf72	Dismissable toasts (#6345 ) * dismissable toast * adjust top offset * improve a11y * stretchy pull-down * Dismiss web on tap * Simplify code --------- Co-authored-by: Dan Abramov <dan.abramov@gmail.com>	2024-11-22 16:11:59 +00:00
Samuel Newman	5d4aaa5b5f	[a11y] Video - fix labels and make more detailed (#6635 ) * fix labels and make more detailed * move overall label to parent	2024-11-22 15:23:24 +00:00
Paul Coroneos	437bdcf9a9	Remove unnecessary lint rule suppression (#6544 ) * ▫️remove deprecated react native eslint package. add react hooks and modern native eslint package. fix bugs * in retrospect lets just remove the async from uselocalelanguage * finally clean it all up * revert yarn.lock * restore logic	2024-11-22 15:22:48 +00:00
Samuel Newman	d9ba324d7f	Use android native animations (#6562 )	2024-11-22 14:56:13 +00:00
Eric Bailey	72326844cd	Improve error name and message for signed-in only feeds (#6577 ) * Improve error name and message for logged-in only feeds * Revert msg edit --------- Co-authored-by: Dan Abramov <dan.abramov@gmail.com>	2024-11-22 14:45:59 +00:00
Samuel Newman	a5dbb35237	Use outline style for repost cancel button (#6509 ) * use outline style for repost cancel button * use trans macro in JSX	2024-11-22 13:41:24 +00:00
dan	a0acd514ab	[Lightbox] Fix jump when zooming out on iOS (#6633 )	2024-11-22 13:34:16 +00:00
Paul Coroneos	5028753367	Fix lightbox spinner (#6561 ) * refactor imageitem useanimatedreaction logic * revert copy/paste fix * revert last commit * Fix conditions --------- Co-authored-by: Dan Abramov <dan.abramov@gmail.com>	2024-11-22 11:59:47 +00:00
surfdude29	058a29c6e3	Add `CFBundleLocalizations` key to `Info.plist` (#6567 )	2024-11-22 11:34:37 +00:00
Frudrax Cheng	09ce65b24e	Fix display language not switching correctly to Chinese on native. (#6621 ) * Update deviceLocales.ts * Update deviceLocales.ts	2024-11-22 11:32:25 +00:00
dan	c858700c17	[Android] Lower Feed maxRenderPerBatch (#6624 )	2024-11-22 04:35:53 +00:00
dan	625459add6	Fix some overdraw (#6617 )	2024-11-21 23:40:37 +00:00
dan	391e0c4c18	Fix embeder (#6616 )	2024-11-21 22:52:28 +00:00
dan	dc3a42edb1	Reduce <Text> nesting (#6615 ) * Move isOnlyEmoji out of RichText To fix Fast Refresh. * Make renderChildrenWithEmoji work with any children * Always go through UITextView for consistency It already contains the `selectable` and `iOS` checks inside. * Move `emoji` check into `renderChildrenWithEmoji` * Remove unnecessary intermediate UITextView nodes * Make childHasEmoji check recursive It didn't handle nested arrays etc correctly before. * Remove the "children must be string" limitation Should not be necessary now that we correctly handle nested arrays etc. * Fix unnecessary regex reallocation This doesn't have a global flag so it's okay to reuse. * Remove unnecessary <Text> wrapper in RichText	2024-11-21 22:52:16 +00:00
dan	84724bb940	[Android] Patch react-native-svg to cache parsed paths (#6583 )	2024-11-21 22:32:49 +00:00
Samuel Newman	9f1e648686	Fix overflow issue on iOS autocomplete, among other things (#6611 ) * stop using ref in render * fix display name fallback on web * use unicode ellipsis for useGrapheme * fix overflow issue * sanitize handle/displayname on web	2024-11-21 22:32:32 +00:00
Aditya Mathur	f67e00a85c	fix: reused getRkey function in embed component (#6591 )	2024-11-21 21:10:19 +00:00
jviide	48cda1350e	Dedup zod versions in bskyembed/yarn.lock (#6610 )	2024-11-21 20:45:40 +00:00
dan	cc60566cde	Fix Fast Refresh in <Text> files (#6609 ) * Separate non-components from components * Mark old Text as deprecated * Move emoji utilities to non-React file * Fix type * Fix import	2024-11-21 20:44:40 +00:00
dan	ff23ddb556	Don't underline links on native hover (#6588 )	2024-11-21 19:20:46 +00:00
lauren	dff11fc076	Pin exact version of React Compiler packages (#6607 ) This PR pins the various React Compiler packages to their exact versions. While it is typically safe to upgrade the compiler, we recommend manual upgrades because changes in memoization may or may not be unexpected. In the near future we will open source an upgrade script that automates comparing the current compiled output with the upgraded output and prints a diff for human confirmation prior to committing the upgrade.	2024-11-21 17:40:39 +00:00
dan	ad83b8303e	Remove unused RN.Animated code (#6584 ) * Remove unused RN.Animated code * Rm more dead code	2024-11-21 12:10:34 +00:00
dan	6438ec6d28	Disable vertical scrollbars on Android only (#6586 )	2024-11-21 12:10:16 +00:00
Samuel Newman	97a4ff1a4c	Bump 1.95.0 (#6530 )	2024-11-21 01:25:25 +00:00
Horus Lugo	6605970fcf	Prevent ProfileHeaderHandle from breaking out of its parent view (#6574 )	2024-11-20 21:47:06 +00:00
Samuel Newman	202df845f3	rm unused type lib (#6546 )	2024-11-20 16:21:18 +00:00
Samuel Newman	0e4f6717ce	fix change handle dialog on android (#6563 )	2024-11-20 13:26:23 +00:00
Trivikram Kamat	f1c221ed28	Bump typescript-eslint to 7.x (#6525 ) * chore(deps-dev): bump typescript-eslint to 6.x * chore(deps-dev): switch to @react-native/eslint-config * chore(deps-dev): bump typescript-eslint to 7.x	2024-11-20 02:23:26 +00:00
Andrew Aquino	78e34c8d35	preserve video's last known time when scrolling away (#6239 )	2024-11-19 22:42:25 +00:00
axiand	f882cf9737	Implement Polish translation (#6283 ) * Initial polish translation sweep * rewrite feeds page flavor text * bring up to date with dev branch, revisit some strings * redoing some more... * bring up to date * rm dead strings, try out a different phrasing for threaded mode str prev translation was nonsensical - we're already calling threads "wątki". let's try "recursive tree" instead to describe what threaded mode does * tweaks here and there * more tweaks. sign translation file TL note: trying a new space-saving translation for send via direct message, old one made the context menu stretch * space-saving translations for profile tabs * up to date * tl latest changes * some small fixes * few more tweaks around profile editing strings * i dislike gendered languages * yet more tweaks * Update dates.ts * Review suggestions (1) * tiny fixes * Review suggestions (2) * Review suggestions (3) * Review suggestions (4) * "Anuluj wyciszenie" * A few new strings * Remove dead strings again * Review suggestions (5) * te -> to --------- Co-authored-by: Frudrax Cheng <i@cynosura.one>	2024-11-19 12:24:18 -08:00
smileyhead	c0c8a192ce	Update Hungarian translation for 1.94 (#6186 )	2024-11-19 12:17:10 -08:00
Evan	3c33e42d35	Fix post interaction selectable text being cut off (#6527 )	2024-11-19 19:07:27 +00:00
Paul Coroneos	5d7cfa0206	Remove aria-pressed attr from button. Closes #6325 (#6402 )	2024-11-19 19:07:13 +00:00
Samuel Newman	103dfe2145	add back expo-system-ui (#6529 )	2024-11-19 19:02:28 +00:00
dan	31b0d7cede	Render post menu items lazily (take two) (#6473 ) * Revert "Revert "Render dropdown menu items lazily (#6437)" (#6470)" This reverts commit `0b38c77faa`. * Lazily initialize menu items * Split in two files * Make it work on mobile This is wonky because our useMenuDialog abstraction only has `isOpen` on web. I couldn't figure out a way to make it work xplat so I'm just tracking it myself manually. * Fix typo in comment	2024-11-19 18:27:56 +00:00
Trivikram Kamat	39c9f7248e	Remove usused direct dependencies on 'webpack' (#6466 ) * Remove usused direct dependencies on 'webpack' * Remove direct dependency on 'babel-plugin-react-native-web'	2024-11-19 15:45:09 +00:00
Trivikram Kamat	2b30b0f7c6	Remove unused 'lodash' dependencies (#6472 )	2024-11-19 15:35:16 +00:00
Paul Coroneos	ff5ad38253	Leverage jsx transform to remove unnecessary react imports and update eslint config (#6516 ) * update eslint config with jsx runtime * leverage jsx transform to remove unnecessary react imports and update eslint config * run yarn lint --fix to remove eslint disables related to react/prop-types that is now disabled	2024-11-19 15:33:07 +00:00
dan	cfc653a5f4	Split FeedSlice into FlatList rows (#6507 )	2024-11-19 15:24:08 +00:00
Samuel Newman	8d5e61e1e5	Use native modal for signup queue screen (#6392 ) * fix top inset for signup queue * use native modal for queue screen * spacing for if text is super large * don't allow scroll bounce	2024-11-19 14:43:40 +00:00
Samuel Newman	ea3fe93be9	Attempted video perf improvements (#6519 ) * remove layout animations from video * only show button/spinner when necessary * use native activityindicator rather than loader	2024-11-19 12:50:06 +00:00
dan	9a57d2a538	Add Profiler build for Android (#6510 )	2024-11-19 02:20:58 +00:00
dan	7b6c182723	Add useHandleRef as a lighter alternative for useAnimatedRef (#6500 )	2024-11-18 22:21:47 +00:00
dan	4f0f9eb413	Fix TagMenu initial render perf (#6483 ) * Split tag menu dialog content * Log the actual error please * Fix it on native	2024-11-18 22:05:51 +00:00
Martin Pittenauer	1486e5cc5a	Help Siri to correctly pronounce Blue Sky. (#6496 ) * Add CFBundleSpokenName Help Siri to correctly pronounce Blue Sky. Instead of pronouncing it like “Lebowski”. * Format --------- Co-authored-by: dan <dan.abramov@gmail.com>	2024-11-18 21:55:35 +00:00
dan	ee49ca7a3d	Hardcode Giphy embed height (#6475 )	2024-11-18 21:55:20 +00:00
dan	b87c94e6d9	Extract RepostButton inner dialog (#6498 ) * Extract RepostButton inner dialog * use `useDialogContext` instead of passing prop --------- Co-authored-by: Samuel Newman <mozzius@protonmail.com>	2024-11-18 21:51:23 +00:00
dan	ec97352201	Fix layout jumps for images (#6474 )	2024-11-18 21:42:32 +00:00
dan	924f1e0e7f	Optimize ContentHider (#6501 )	2024-11-18 17:44:45 +00:00
dan	0b38c77faa	Revert "Render dropdown menu items lazily (#6437 )" (#6470 ) This reverts commit `e9fe8d90ef`.	2024-11-17 21:06:22 +00:00
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M18.535 5.465a5.003 5.003 0 0 0-7.076 0l-.005.005-.752.742a1 1 0 1 1-1.404-1.424l.749-.74a7.003 7.003 0 0 1 9.904 9.905l-.002.003-.737.746a1 1 0 1 1-1.424-1.404l.747-.757a5.003 5.003 0 0 0 0-7.076ZM6.202 9.288a1 1 0 0 1 .01 1.414l-.747.757a5.003 5.003 0 1 0 7.076 7.076l.005-.005.752-.742a1 1 0 1 1 1.404 1.424l-.746.737-.003.002a7.003 7.003 0 0 1-9.904-9.904l.74-.75a1 1 0 0 1 1.413-.009Zm8.505.005a1 1 0 0 1 0 1.414l-4 4a1 1 0 0 1-1.414-1.414l4-4a1 1 0 0 1 1.414 0Z" clip-rule="evenodd"/></svg>