statsig: use new proxy endpoint (#6271 )

Merge branch 'main' into hailey/remove-client-downsample
remove :sampled
2024-11-15 11:25:34 -08:00 · 2024-11-12 11:29:28 -08:00 · 2024-11-07 14:19:36 -08:00
368 changed files with 46382 additions and 103840 deletions
@@ -1,9 +1,8 @@
 module.exports = {
  root: true,
  extends: [
-    '@react-native',
+    '@react-native-community',
    'plugin:react/recommended',
-    'plugin:react/jsx-runtime',
    'plugin:react-native-a11y/ios',
    'prettier',
  ],
@@ -17,8 +16,9 @@ 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',
@@ -79,7 +79,8 @@ module.exports = {
      },
    ],
    'simple-import-sort/exports': 'error',
-    'react-compiler/react-compiler': 'warn',
+    // TODO: Reenable when we figure out why it gets stuck on CI.
+    // 'react-compiler/react-compiler': 'error',
    'no-restricted-imports': [
      'error',
      {
@@ -17,8 +17,8 @@ appId: xyz.blueskyweb.app
 - inputText: "Post with an image"
 - tapOn:
    id: "openGalleryBtn"
- tapOn: "Content warnings"
- tapOn: "Content warnings"
+- tapOn:
+    id: "labelsBtn"
 - tapOn: "Porn"
 - tapOn:
    label: "Tap on confirm"
@@ -29,6 +29,7 @@ appId: xyz.blueskyweb.app
 - pressKey: Enter
 - tapOn:
    id: "nextBtn"
+- tapOn: "Not now"
 - tapOn:
     id: "handleInput"
 - inputText: "e2e-test"
@@ -23,7 +23,6 @@ appId: xyz.blueskyweb.app
    id: "editDescriptionInput"
 - inputText: "They good"
 - tapOn: "Save"
- tapOn: "Save"
 - assertNotVisible:
    id: "createOrEditListModal"
 - tapOn: "About"
@@ -46,7 +45,6 @@ appId: xyz.blueskyweb.app
 - eraseText
 - inputText: "They bad"
 - tapOn: "Save"
- tapOn: "Save"
 - assertNotVisible:
    id: "createOrEditListModal"
 - assertVisible: Bad Ppl
@@ -62,7 +60,6 @@ appId: xyz.blueskyweb.app
    id: "editDescriptionInput"
 - eraseText
 - tapOn: "Save"
- tapOn: "Save"
 - assertNotVisible:
    id: "createOrEditListModal"
 - assertNotVisible:
@@ -90,7 +87,6 @@ appId: xyz.blueskyweb.app
    id: "editDescriptionInput"
 - inputText: "They good"
 - tapOn: "Save"
- tapOn: "Save"
 - assertNotVisible:
    id: "createOrEditListModal"
 - tapOn: "About"
@@ -23,4 +23,5 @@ appId: xyz.blueskyweb.app
    id: "loginPasswordInput"
 - inputText: "hunter2"
 - pressKey: Enter
+- tapOn: "Not now"
 - assertVisible: "Following"
@@ -22,7 +22,6 @@ appId: xyz.blueskyweb.app
    id: "editDescriptionInput"
 - inputText: "Shhh"
 - tapOn: "Save"
- tapOn: "Save"

 # view modlist
 - assertVisible: "Muted Users"
@@ -13,7 +13,7 @@ appId: xyz.blueskyweb.app
 - tapOn: "Select an avatar"
 - waitForAnimationToEnd
 - tapOn:
-    point: "50%,22%"
+    point: "16%,22%"
 - waitForAnimationToEnd
 - tapOn: "Choose"
 - waitForAnimationToEnd
@@ -71,7 +71,7 @@ module.exports = function (config) {
        policy: 'appVersion',
      },
      orientation: 'portrait',
-      icon: './assets/app-icons/ios_icon_default_light.png',
+      icon: './assets/icon.png',
      userInterfaceStyle: 'automatic',
      splash: SPLASH_CONFIG,
      // hsl(211, 99%, 53%), same as palette.default.brandText
@@ -92,31 +92,6 @@ 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: {
@@ -162,7 +137,7 @@ module.exports = function (config) {
        backgroundColor: DARK_SPLASH_CONFIG_ANDROID.backgroundColor,
      },
      android: {
-        icon: './assets/app-icons/android_icon_default_light.png',
+        icon: './assets/icon.png',
        adaptiveIcon: {
          foregroundImage: './assets/icon-android-foreground.png',
          monochromeImage: './assets/icon-android-foreground.png',
@@ -273,73 +248,6 @@ module.exports = function (config) {
            ],
          },
        ],
-        [
-          '@mozzius/expo-dynamic-app-icon',
-          {
-            /**
-             * Default set
-             */
-            default_light: {
-              ios: './assets/app-icons/ios_icon_default_light.png',
-              android: './assets/app-icons/android_icon_default_light.png',
-              prerendered: true,
-            },
-            default_dark: {
-              ios: './assets/app-icons/ios_icon_default_dark.png',
-              android: './assets/app-icons/android_icon_default_dark.png',
-              prerendered: true,
-            },
-
-            /**
-             * Bluesky+ core set
-             */
-            core_aurora: {
-              ios: './assets/app-icons/ios_icon_core_aurora.png',
-              android: './assets/app-icons/android_icon_core_aurora.png',
-              prerendered: true,
-            },
-            core_bonfire: {
-              ios: './assets/app-icons/ios_icon_core_bonfire.png',
-              android: './assets/app-icons/android_icon_core_bonfire.png',
-              prerendered: true,
-            },
-            core_sunrise: {
-              ios: './assets/app-icons/ios_icon_core_sunrise.png',
-              android: './assets/app-icons/android_icon_core_sunrise.png',
-              prerendered: true,
-            },
-            core_sunset: {
-              ios: './assets/app-icons/ios_icon_core_sunset.png',
-              android: './assets/app-icons/android_icon_core_sunset.png',
-              prerendered: true,
-            },
-            core_midnight: {
-              ios: './assets/app-icons/ios_icon_core_midnight.png',
-              android: './assets/app-icons/android_icon_core_midnight.png',
-              prerendered: true,
-            },
-            core_flat_blue: {
-              ios: './assets/app-icons/ios_icon_core_flat_blue.png',
-              android: './assets/app-icons/android_icon_core_flat_blue.png',
-              prerendered: true,
-            },
-            core_flat_white: {
-              ios: './assets/app-icons/ios_icon_core_flat_white.png',
-              android: './assets/app-icons/android_icon_core_flat_white.png',
-              prerendered: true,
-            },
-            core_flat_black: {
-              ios: './assets/app-icons/ios_icon_core_flat_black.png',
-              android: './assets/app-icons/android_icon_core_flat_black.png',
-              prerendered: true,
-            },
-            core_classic: {
-              ios: './assets/app-icons/ios_icon_core_classic.png',
-              android: './assets/app-icons/android_icon_core_classic.png',
-              prerendered: true,
-            },
-          },
-        ],
      ].filter(Boolean),
      extra: {
        eas: {
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M15.439 3.148a1 1 0 0 1 .41.645l.568 3.22a7 7 0 1 1-6.174 10.97L4.32 19.027a1 1 0 0 1-1.159-.811L1.078 6.398a1 1 0 0 1 .81-1.158l12.803-2.258a1 1 0 0 1 .748.166ZM9.325 16.114A7 7 0 0 1 9 14c0-1.56.51-3 1.372-4.164l-6.456 1.139 1.041 5.909 4.368-.77ZM3.568 9.005l10.833-1.91-.347-1.97L3.22 7.036l.347 1.97ZM16 9a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 2a1 1 0 0 1 1 1v1.586l1.374 1.374a1 1 0 0 1-1.414 1.414l-1.667-1.667A1 1 0 0 1 15 14v-2a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>
@@ -17,7 +17,12 @@ module.exports = function (api) {
    ],
    plugins: [
      'macros',
-      ['babel-plugin-react-compiler', {target: '18'}],
+      [
+        'babel-plugin-react-compiler',
+        {
+          runtimeModule: 'react-compiler-runtime',
+        },
+      ],
      [
        'module:react-native-dotenv',
        {
@@ -9,6 +9,7 @@ import {
  AppBskyGraphDefs,
  AppBskyGraphStarterpack,
  AppBskyLabelerDefs,
+  AtUri,
 } from '@atproto/api'
 import {ComponentChildren, h} from 'preact'
 import {useMemo} from 'preact/hooks'
@@ -436,14 +437,14 @@ function StarterPackEmbed({

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

 function getStarterPackHref(
  starterPack: AppBskyGraphDefs.StarterPackViewBasic,
 ) {
-  const rkey = getRkey({uri: starterPack.uri})
+  const rkey = new AtUri(starterPack.uri).rkey
  const handleOrDid = starterPack.creator.handle || starterPack.creator.did
  return `/starter-pack/${handleOrDid}/${rkey}`
 }
@@ -4209,7 +4209,12 @@ 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, zod@^3.23.8:
+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:
  version "3.23.8"
  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==
@@ -257,7 +257,6 @@ func serve(cctx *cli.Context) error {
 	e.GET("/settings/privacy-and-security", server.WebGeneric)
 	e.GET("/settings/content-and-media", server.WebGeneric)
 	e.GET("/settings/about", server.WebGeneric)
-	e.GET("/settings/app-icon", server.WebGeneric)
 	e.GET("/sys/debug", server.WebGeneric)
 	e.GET("/sys/debug-mod", server.WebGeneric)
 	e.GET("/sys/log", server.WebGeneric)
@@ -27,21 +27,13 @@

  let player
  function onYouTubeIframeAPIReady() {
-    let videoId = url.searchParams.get('videoId')
-    videoId = decodeURIComponent(videoId)
-    videoId = videoId.replace(/[^a-zA-Z0-9_-]/g, "")
-    if (videoId.length !== 11) throw new Error("Invalid video ID")
-
-    let start = url.searchParams.get('start')
-    start = start.replace(/[^0-9]/g, "")
-
    player = new YT.Player('player', {
      width: "1000",
      height: "1000",
-      videoId,
+      videoId: url.searchParams.get('videoId'),
      playerVars: {
        autoplay: 1,
-        start,
+        start: url.searchParams.get('start'),
        rel: 0,
        loop: 0,
        playsinline: 1,
@@ -0,0 +1,21 @@
+const React = require('react')
+const $empty = Symbol.for('react.memo_cache_sentinel')
+/**
+ * DANGER: this hook is NEVER meant to be called directly!
+ *
+ * Note that this is a temporary userspace implementation of this function
+ * from React 19. It is not as efficient and may invalidate more frequently
+ * than the official API. Please upgrade to React 19 as soon as you can.
+ **/
+export function c(size) {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  return React.useState(() => {
+    const $ = new Array(size)
+    for (let ii = 0; ii < size; ii++) {
+      $[ii] = $empty
+    }
+    // @ts-ignore
+    $[$empty] = true
+    return $
+  })[0]
+}
@@ -0,0 +1,9 @@
+{
+  "name": "react-compiler-runtime",
+  "version": "0.0.1",
+  "license": "MIT",
+  "main": "index.js",
+  "peerDependencies": {
+    "react": "^18.2.0"
+  }
+}
@@ -2,8 +2,6 @@
 module.exports = {
  locales: [
    'en',
-    'ast',
-    'an',
    'ca',
    'de',
    'en-GB',
@@ -11,21 +9,17 @@ module.exports = {
    'fi',
    'fr',
    'ga',
-    'gl',
    'hi',
    'hu',
    'id',
    'it',
    'ja',
    'ko',
-    'nl',
-    'pl',
    'pt-BR',
    'ru',
    'th',
    'tr',
    'uk',
-    'vi',
    'zh-CN',
    'zh-HK',
    'zh-TW',
@@ -9,11 +9,6 @@ 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.
@@ -34,15 +29,6 @@ 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)
 }

@@ -52,10 +38,9 @@ cfg.transformer.getTransformOptions = async () => ({
    inlineRequires: true,
    nonInlinedRequires: [
      // We can remove this option and rely on the default after
-      // https://github.com/facebook/metro/pull/1390 is released.
+      // https://github.com/facebook/metro/pull/1126 is released.
      'React',
      'react',
-      'react-compiler-runtime',
      'react/jsx-dev-runtime',
      'react/jsx-runtime',
      'react-native',
@@ -1,6 +1,6 @@
 {
  "name": "bsky.app",
-  "version": "1.96.0",
+  "version": "1.94.0",
  "private": true,
  "engines": {
    "node": ">=20"
@@ -11,8 +11,6 @@
    "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",
@@ -25,6 +23,7 @@
    "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",
@@ -54,7 +53,7 @@
    "icons:optimize": "svgo -f ./assets/icons"
  },
  "dependencies": {
-    "@atproto/api": "^0.13.18",
+    "@atproto/api": "^0.13.11",
    "@braintree/sanitize-url": "^6.0.2",
    "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
    "@emoji-mart/react": "^1.1.1",
@@ -74,7 +73,6 @@
    "@lingui/react": "^4.5.0",
    "@mattermost/react-native-paste-input": "^0.7.1",
    "@miblanchard/react-native-slider": "^2.3.1",
-    "@mozzius/expo-dynamic-app-icon": "^1.4.1",
    "@radix-ui/react-dismissable-layer": "^1.1.1",
    "@radix-ui/react-dropdown-menu": "2.0.1",
    "@radix-ui/react-focus-guards": "^1.1.1",
@@ -91,18 +89,18 @@
    "@tanstack/query-async-storage-persister": "^5.25.0",
    "@tanstack/react-query": "^5.8.1",
    "@tanstack/react-query-persist-client": "^5.25.0",
-    "@tiptap/core": "^2.9.1",
-    "@tiptap/extension-document": "^2.9.1",
-    "@tiptap/extension-hard-break": "^2.9.1",
-    "@tiptap/extension-history": "^2.9.1",
-    "@tiptap/extension-mention": "^2.9.1",
-    "@tiptap/extension-paragraph": "^2.9.1",
-    "@tiptap/extension-placeholder": "^2.9.1",
-    "@tiptap/extension-text": "^2.9.1",
-    "@tiptap/html": "^2.9.1",
-    "@tiptap/pm": "^2.9.1",
-    "@tiptap/react": "^2.9.1",
-    "@tiptap/suggestion": "^2.9.1",
+    "@tiptap/core": "^2.6.6",
+    "@tiptap/extension-document": "^2.6.6",
+    "@tiptap/extension-hard-break": "^2.6.6",
+    "@tiptap/extension-history": "^2.6.6",
+    "@tiptap/extension-mention": "^2.6.6",
+    "@tiptap/extension-paragraph": "^2.6.6",
+    "@tiptap/extension-placeholder": "^2.6.6",
+    "@tiptap/extension-text": "^2.6.6",
+    "@tiptap/html": "^2.6.6",
+    "@tiptap/pm": "^2.6.6",
+    "@tiptap/react": "^2.6.6",
+    "@tiptap/suggestion": "^2.6.6",
    "@types/invariant": "^2.2.37",
    "@types/lodash.throttle": "^4.1.9",
    "@types/node": "^20.14.3",
@@ -142,7 +140,6 @@
    "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",
@@ -155,6 +152,11 @@
    "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",
@@ -164,14 +166,14 @@
    "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": "file:./lib/react-compiler-runtime",
    "react-dom": "^18.2.0",
    "react-image-crop": "^11.0.7",
    "react-keyed-flatten-children": "^3.0.0",
    "react-native": "0.74.1",
    "react-native-compressor": "^1.8.24",
    "react-native-date-picker": "^4.4.2",
-    "react-native-drawer-layout": "^4.0.1",
+    "react-native-drawer-layout": "^4.0.0-alpha.3",
    "react-native-gesture-handler": "2.20.0",
    "react-native-get-random-values": "~1.11.0",
    "react-native-image-crop-picker": "0.41.2",
@@ -205,7 +207,7 @@
    "zod": "^3.20.2"
  },
  "devDependencies": {
-    "@atproto/dev-env": "^0.3.64",
+    "@atproto/dev-env": "^0.3.55",
    "@babel/core": "^7.23.2",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
@@ -215,35 +217,44 @@
    "@lingui/cli": "^4.5.0",
    "@lingui/macro": "^4.5.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
-    "@react-native/eslint-config": "^0.76.2",
+    "@react-native-community/eslint-config": "^3.0.0",
    "@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": "^7.18.0",
-    "@typescript-eslint/parser": "^7.18.0",
+    "@typescript-eslint/eslint-plugin": "^5.48.2",
+    "@typescript-eslint/parser": "^5.48.2",
    "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-compiler": "^0.0.0-experimental-592953e-20240517",
+    "babel-plugin-react-native-web": "^0.18.12",
    "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": "^0.0.0-experimental-c8b3f72-20240517",
    "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",
@@ -254,19 +265,25 @@
    "prettier": "^2.8.3",
    "react-native-dotenv": "^3.3.1",
    "react-refresh": "^0.14.0",
+    "react-scripts": "^5.0.1",
    "react-test-renderer": "18.2.0",
    "svgo": "^3.3.2",
    "ts-node": "^10.9.1",
-    "typescript": "^5.7.2",
-    "webpack-bundle-analyzer": "^4.10.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"
  },
  "resolutions": {
-    "@radix-ui/react-focus-scope": "1.1.0",
-    "@react-native/babel-preset": "0.74.1",
    "@types/react": "^18",
+    "**/zeed-dom": "0.10.9",
+    "**/zod": "3.23.8",
    "**/expo-constants": "16.0.1",
    "**/expo-device": "6.0.2",
-    "**/zod": "3.23.8"
+    "@react-native/babel-preset": "0.74.1",
+    "@radix-ui/react-focus-scope": "1.1.0"
  },
  "jest": {
    "preset": "jest-expo/ios",
@@ -9,7 +9,7 @@ index caa5540..c5d4e67 100644
 -                                                  type != nil && [type length] > 0 ? type : @"application/octet-stream",
 +                                                  ![type isEqual:[NSNull null]] && [type length] > 0 ? type : @"application/octet-stream",
                                                   [data base64EncodedStringWithOptions:0]];
- 
+
       resolve(text);
 diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm
 index b0d71dc..41b9a0e 100644
@@ -18,7 +18,7 @@ index b0d71dc..41b9a0e 100644
@@ -377,10 +377,6 @@ - (void)textInputDidBeginEditing
     self.backedTextInputView.attributedText = [NSAttributedString new];
   }
- 
+
 -  if (_selectTextOnFocus) {
 -    [self.backedTextInputView selectAll:nil];
 -  }
@@ -35,7 +35,7 @@ index b0d71dc..41b9a0e 100644
 +    [self.backedTextInputView selectAll:nil];
 +  }
 }
- 
+
 - (void)reactBlur
 diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
 index e9b330f..ec5f58c 100644
@@ -48,10 +48,10 @@ index e9b330f..ec5f58c 100644
 +@property (nonatomic, copy) UIColor *customTintColor;
 +
 +- (void)forwarderBeginRefreshing;
- 
+
 @end
 diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
-index b09e653..d2b4e05 100644
+index b09e653..288e60c 100644
 --- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
 +++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
@@ -22,6 +22,7 @@ @implementation RCTRefreshControl {
@@ -60,12 +60,12 @@ index b09e653..d2b4e05 100644
   CGFloat _progressViewOffset;
 +  UIColor *_customTintColor;
 }
- 
+
 - (instancetype)init
@@ -56,6 +57,12 @@ - (void)layoutSubviews
   _isInitialRender = false;
 }
- 
+
 +- (void)didMoveToSuperview
 +{
 +  [super didMoveToSuperview];
@@ -78,7 +78,7 @@ index b09e653..d2b4e05 100644
@@ -203,4 +210,58 @@ - (void)refreshControlValueChanged
   }
 }
- 
+
 +- (void)setCustomTintColor:(UIColor *)customTintColor
 +{
 +  _customTintColor = customTintColor;
@@ -139,139 +139,26 @@ index 40aaf9c..1c60164 100644
 --- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m
 +++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m
@@ -22,11 +22,12 @@ - (UIView *)view
- 
+
 RCT_EXPORT_VIEW_PROPERTY(onRefresh, RCTDirectEventBlock)
 RCT_EXPORT_VIEW_PROPERTY(refreshing, BOOL)
 -RCT_EXPORT_VIEW_PROPERTY(tintColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(title, NSString)
 RCT_EXPORT_VIEW_PROPERTY(titleColor, UIColor)
 RCT_EXPORT_VIEW_PROPERTY(progressViewOffset, CGFloat)
- 
+
 +RCT_REMAP_VIEW_PROPERTY(tintColor, customTintColor, UIColor)
 +
 RCT_EXPORT_METHOD(setNativeRefreshing : (nonnull NSNumber *)viewTag toRefreshing : (BOOL)refreshing)
 {
   [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
-diff --git a/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m b/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m
-index 1aead51..39e6244 100644
--- a/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m
-+++ b/node_modules/react-native/React/Views/ScrollView/RCTScrollView.m
-@@ -159,31 +159,6 @@ - (BOOL)touchesShouldCancelInContentView:(__unused UIView *)view
-   return !shouldDisableScrollInteraction;
- }
- 
-/*
- * Automatically centers the content such that if the content is smaller than the
- * ScrollView, we force it to be centered, but when you zoom or the content otherwise
- * becomes larger than the ScrollView, there is no padding around the content but it
- * can still fill the whole view.
- */
-- (void)setContentOffset:(CGPoint)contentOffset
-{
-  UIView *contentView = [self contentView];
-  if (contentView && _centerContent && !CGSizeEqualToSize(contentView.frame.size, CGSizeZero)) {
-    CGSize subviewSize = contentView.frame.size;
-    CGSize scrollViewSize = self.bounds.size;
-    if (subviewSize.width <= scrollViewSize.width) {
-      contentOffset.x = -(scrollViewSize.width - subviewSize.width) / 2.0;
-    }
-    if (subviewSize.height <= scrollViewSize.height) {
-      contentOffset.y = -(scrollViewSize.height - subviewSize.height) / 2.0;
-    }
-  }
-
-  super.contentOffset = CGPointMake(
-      RCTSanitizeNaNValue(contentOffset.x, @"scrollView.contentOffset.x"),
-      RCTSanitizeNaNValue(contentOffset.y, @"scrollView.contentOffset.y"));
-}
-
- - (void)setFrame:(CGRect)frame
- {
-   // Preserving and revalidating `contentOffset`.
-@@ -427,6 +402,11 @@ - (void)setRemoveClippedSubviews:(__unused BOOL)removeClippedSubviews
-   // Does nothing
- }
- 
-+- (void)setFrame:(CGRect)frame {
-+  [super setFrame:frame];
-+  [self centerContentIfNeeded];
-+}
-+
- - (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
- {
-   [super insertReactSubview:view atIndex:atIndex];
-@@ -444,6 +424,8 @@ - (void)insertReactSubview:(UIView *)view atIndex:(NSInteger)atIndex
-     RCTApplyTransformationAccordingLayoutDirection(_contentView, self.reactLayoutDirection);
-     [_scrollView addSubview:view];
-   }
-+
-+  [self centerContentIfNeeded];
- }
- 
- - (void)removeReactSubview:(UIView *)subview
-@@ -652,9 +634,46 @@ -(void)delegateMethod : (UIScrollView *)scrollView        \
-   }
- 
- RCT_SCROLL_EVENT_HANDLER(scrollViewWillBeginDecelerating, onMomentumScrollBegin)
-RCT_SCROLL_EVENT_HANDLER(scrollViewDidZoom, onScroll)
- RCT_SCROLL_EVENT_HANDLER(scrollViewDidScrollToTop, onScrollToTop)
- 
-+-(void)scrollViewDidZoom : (UIScrollView *)scrollView
-+{
-+  [self centerContentIfNeeded];
-+
-+  RCT_SEND_SCROLL_EVENT(onScroll, nil);
-+  RCT_FORWARD_SCROLL_EVENT(scrollViewDidZoom : scrollView);
-+}
-+
-+/*
-+ * Automatically centers the content such that if the content is smaller than the
-+ * ScrollView, we force it to be centered, but when you zoom or the content otherwise
-+ * becomes larger than the ScrollView, there is no padding around the content but it
-+ * can still fill the whole view.
-+ *
-+ * PATCHED: This deviates from the original React Native implementation to fix two issues:
-+ *
-+ * - The scroll view was swallowing any taps immediately after pinching
-+ * - The scroll view was jittering when crossing the full screen threshold while pinching
-+ *
-+ * This implementation is based on https://petersteinberger.com/blog/2013/how-to-center-uiscrollview/.
-+ */
-+-(void)centerContentIfNeeded
-+{
-+  if (_scrollView.centerContent &&
-+      !CGSizeEqualToSize(self.contentSize, CGSizeZero) &&
-+      !CGSizeEqualToSize(self.bounds.size, CGSizeZero)
-+  ) {
-+    CGFloat top = 0, left = 0;
-+    if (self.contentSize.width < self.bounds.size.width) {
-+      left = (self.bounds.size.width - self.contentSize.width) * 0.5f;
-+    }
-+    if (self.contentSize.height < self.bounds.size.height) {
-+      top = (self.bounds.size.height - self.contentSize.height) * 0.5f;
-+    }
-+    _scrollView.contentInset = UIEdgeInsetsMake(top, left, top, left);
-+  }
-+}
-+
- - (void)addScrollListener:(NSObject<UIScrollViewDelegate> *)scrollListener
- {
-   [_scrollListeners addObject:scrollListener];
-@@ -913,6 +932,7 @@ - (void)updateContentSizeIfNeeded
-   CGSize contentSize = self.contentSize;
-   if (!CGSizeEqualToSize(_scrollView.contentSize, contentSize)) {
-     _scrollView.contentSize = contentSize;
-+    [self centerContentIfNeeded];
-   }
- }
- 
 diff --git a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java
 index 5f5e1ab..aac00b6 100644
 --- a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java
 +++ b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java
@@ -99,8 +99,9 @@ public class JavaTimerManager {
       }
- 
+
       // If the JS thread is busy for multiple frames we cancel any other pending runnable.
 -      if (mCurrentIdleCallbackRunnable != null) {
 -        mCurrentIdleCallbackRunnable.cancel();
@@ -279,5 +166,5 @@ index 5f5e1ab..aac00b6 100644
 +      if (currentRunnable != null) {
 +        currentRunnable.cancel();
       }
- 
+
       mCurrentIdleCallbackRunnable = new IdleCallbackRunnable(frameTimeNanos);
@@ -1,39 +0,0 @@
-diff --git a/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java b/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java
-index 5de0845..fa477e7 100644
--- a/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java
-+++ b/node_modules/react-native-image-crop-picker/android/src/main/java/com/reactnative/ivpusic/imagepicker/PickerModule.java
-@@ -21,6 +21,7 @@ import android.webkit.MimeTypeMap;
- 
- import androidx.core.app.ActivityCompat;
- import androidx.core.content.FileProvider;
-+import androidx.exifinterface.media.ExifInterface;
- 
- import com.facebook.react.bridge.ActivityEventListener;
- import com.facebook.react.bridge.Callback;
-@@ -678,6 +679,15 @@ class PickerModule extends ReactContextBaseJavaModule implements ActivityEventLi
-             throw new Exception("Cannot select remote files");
-         }
-         BitmapFactory.Options original = validateImage(path);
-+        ExifInterface originalExif = new ExifInterface(path);
-+        int orientation = originalExif.getAttributeInt(ExifInterface.TAG_ORIENTATION, 1);
-+        boolean invertDimensions = (
-+                orientation == ExifInterface.ORIENTATION_ROTATE_90 ||
-+                        orientation == ExifInterface.ORIENTATION_ROTATE_270 ||
-+                        orientation == ExifInterface.ORIENTATION_TRANSPOSE ||
-+                        orientation == ExifInterface.ORIENTATION_TRANSVERSE
-+        );
-+
- 
-         // if compression options are provided image will be compressed. If none options is provided,
-         // then original image will be returned
-@@ -687,8 +697,8 @@ class PickerModule extends ReactContextBaseJavaModule implements ActivityEventLi
-         long modificationDate = new File(path).lastModified();
- 
-         image.putString("path", "file://" + compressedImagePath);
-        image.putInt("width", options.outWidth);
-        image.putInt("height", options.outHeight);
-+        image.putInt("width", invertDimensions ? options.outHeight : options.outWidth);
-+        image.putInt("height", invertDimensions ? options.outWidth : options.outHeight);
-         image.putString("mime", options.outMimeType);
-         image.putInt("size", (int) new File(compressedImagePath).length());
-         image.putString("modificationDate", String.valueOf(modificationDate));
@@ -1,57 +0,0 @@
-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();
-   }
- 
@@ -4,17 +4,16 @@ import '#/view/icons'

 import React, {useEffect, useState} from 'react'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
+import {KeyboardProvider} from 'react-native-keyboard-controller'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import {
  initialWindowMetrics,
  SafeAreaProvider,
 } from 'react-native-safe-area-context'
 import * as SplashScreen from 'expo-splash-screen'
-import * as SystemUI from 'expo-system-ui'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-import {KeyboardControllerProvider} from '#/lib/hooks/useEnableKeyboardController'
 import {QueryProvider} from '#/lib/react-query'
 import {
  initialize,
@@ -25,7 +24,6 @@ import {s} from '#/lib/styles'
 import {ThemeProvider} from '#/lib/ThemeContext'
 import I18nProvider from '#/locale/i18nProvider'
 import {logger} from '#/logger'
-import {isIOS} from '#/platform/detection'
 import {Provider as A11yProvider} from '#/state/a11y'
 import {Provider as MutedThreadsProvider} from '#/state/cache/thread-mutes'
 import {Provider as DialogStateProvider} from '#/state/dialogs'
@@ -68,15 +66,11 @@ import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
 import {Provider as PortalProvider} from '#/components/Portal'
-import {AppProfiler} from '#/AppProfiler'
 import {Splash} from '#/Splash'
 import {BottomSheetProvider} from '../modules/bottom-sheet'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'

 SplashScreen.preventAutoHideAsync()
-if (isIOS) {
-  SystemUI.setBackgroundColorAsync('black')
-}

 /**
 * Begin geolocation ASAP
@@ -190,42 +184,40 @@ function App() {
   * that is set up in the InnerApp component above.
   */
  return (
-    <AppProfiler>
-      <GeolocationProvider>
-        <A11yProvider>
-          <KeyboardControllerProvider>
-            <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>
-          </KeyboardControllerProvider>
-        </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>
  )
 }

@@ -3,6 +3,7 @@ import '#/view/icons'
 import './style.css'

 import React, {useEffect, useState} from 'react'
+import {KeyboardProvider} from 'react-native-keyboard-controller'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
@@ -101,52 +102,54 @@ function InnerApp() {
  if (!isReady || !hasCheckedReferrer) return null

  return (
-    <Alf theme={theme}>
-      <ThemeProvider theme={theme}>
-        <RootSiblingParent>
-          <VideoVolumeProvider>
-            <ActiveVideoProvider>
-              <React.Fragment
-                // Resets the entire tree below when it changes:
-                key={currentAccount?.did}>
-                <QueryProvider currentDid={currentAccount?.did}>
-                  <ComposerProvider>
-                    <StatsigProvider>
-                      <MessagesProvider>
-                        {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-                        <LabelDefsProvider>
-                          <ModerationOptsProvider>
-                            <LoggedOutViewProvider>
-                              <SelectedFeedProvider>
-                                <HiddenRepliesProvider>
-                                  <UnreadNotifsProvider>
-                                    <BackgroundNotificationPreferencesProvider>
-                                      <MutedThreadsProvider>
-                                        <SafeAreaProvider>
-                                          <ProgressGuideProvider>
-                                            <Shell />
-                                            <NuxDialogs />
-                                          </ProgressGuideProvider>
-                                        </SafeAreaProvider>
-                                      </MutedThreadsProvider>
-                                    </BackgroundNotificationPreferencesProvider>
-                                  </UnreadNotifsProvider>
-                                </HiddenRepliesProvider>
-                              </SelectedFeedProvider>
-                            </LoggedOutViewProvider>
-                          </ModerationOptsProvider>
-                        </LabelDefsProvider>
-                      </MessagesProvider>
-                    </StatsigProvider>
-                  </ComposerProvider>
-                </QueryProvider>
-                <ToastContainer />
-              </React.Fragment>
-            </ActiveVideoProvider>
-          </VideoVolumeProvider>
-        </RootSiblingParent>
-      </ThemeProvider>
-    </Alf>
+    <KeyboardProvider enabled={false}>
+      <Alf theme={theme}>
+        <ThemeProvider theme={theme}>
+          <RootSiblingParent>
+            <VideoVolumeProvider>
+              <ActiveVideoProvider>
+                <React.Fragment
+                  // Resets the entire tree below when it changes:
+                  key={currentAccount?.did}>
+                  <QueryProvider currentDid={currentAccount?.did}>
+                    <ComposerProvider>
+                      <StatsigProvider>
+                        <MessagesProvider>
+                          {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                          <LabelDefsProvider>
+                            <ModerationOptsProvider>
+                              <LoggedOutViewProvider>
+                                <SelectedFeedProvider>
+                                  <HiddenRepliesProvider>
+                                    <UnreadNotifsProvider>
+                                      <BackgroundNotificationPreferencesProvider>
+                                        <MutedThreadsProvider>
+                                          <SafeAreaProvider>
+                                            <ProgressGuideProvider>
+                                              <Shell />
+                                              <NuxDialogs />
+                                            </ProgressGuideProvider>
+                                          </SafeAreaProvider>
+                                        </MutedThreadsProvider>
+                                      </BackgroundNotificationPreferencesProvider>
+                                    </UnreadNotifsProvider>
+                                  </HiddenRepliesProvider>
+                                </SelectedFeedProvider>
+                              </LoggedOutViewProvider>
+                            </ModerationOptsProvider>
+                          </LabelDefsProvider>
+                        </MessagesProvider>
+                      </StatsigProvider>
+                    </ComposerProvider>
+                  </QueryProvider>
+                  <ToastContainer />
+                </React.Fragment>
+              </ActiveVideoProvider>
+            </VideoVolumeProvider>
+          </RootSiblingParent>
+        </ThemeProvider>
+      </Alf>
+    </KeyboardProvider>
  )
 }

@@ -1,29 +0,0 @@
-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 {isNative, isWeb} from '#/platform/detection'
+import {isAndroid, isNative, isWeb} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
 import {useSession} from '#/state/session'
@@ -79,7 +79,6 @@ import {PostRepostedByScreen} from '#/screens/Post/PostRepostedBy'
 import {ProfileKnownFollowersScreen} from '#/screens/Profile/KnownFollowers'
 import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
 import {AppearanceSettingsScreen} from '#/screens/Settings/AppearanceSettings'
-import {AppIconSettingsScreen} from '#/screens/Settings/AppIconSettings'
 import {NotificationSettingsScreen} from '#/screens/Settings/NotificationSettings'
 import {
  StarterPackScreen,
@@ -363,14 +362,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
          requireAuth: true,
        }}
      />
-      <Stack.Screen
-        name="AppIconSettings"
-        getComponent={() => AppIconSettingsScreen}
-        options={{
-          title: title(msg`App Icon`),
-          requireAuth: true,
-        }}
-      />
      <Stack.Screen
        name="Hashtag"
        getComponent={() => HashtagScreen}
@@ -462,6 +453,7 @@ function HomeTabNavigator() {
  return (
    <HomeTab.Navigator
      screenOptions={{
+        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -480,6 +472,7 @@ function SearchTabNavigator() {
  return (
    <SearchTab.Navigator
      screenOptions={{
+        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -497,6 +490,7 @@ function NotificationsTabNavigator() {
  return (
    <NotificationsTab.Navigator
      screenOptions={{
+        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -518,6 +512,7 @@ function MyProfileTabNavigator() {
  return (
    <MyProfileTab.Navigator
      screenOptions={{
+        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -543,6 +538,7 @@ function MessagesTabNavigator() {
  return (
    <MessagesTab.Navigator
      screenOptions={{
+        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -576,6 +572,7 @@ const FlatNavigator = () => {
    <Flat.Navigator
      screenListeners={screenListeners}
      screenOptions={{
+        animation: isAndroid ? 'ios' : undefined,
        animationDuration: 285,
        gestureEnabled: true,
        fullScreenGestureEnabled: true,
@@ -81,40 +81,40 @@ export function Splash(props: React.PropsWithChildren<Props>) {
    return {
      transform: [
        {
-          scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'),
+          scale: interpolate(intro.value, [0, 1], [0.8, 1], 'clamp'),
        },
        {
          scale: interpolate(
-            outroLogo.get(),
+            outroLogo.value,
            [0, 0.08, 1],
            [1, 0.8, 500],
            'clamp',
          ),
        },
      ],
-      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
+      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
    }
  })
  const bottomLogoAnimation = useAnimatedStyle(() => {
    return {
-      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
+      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
    }
  })
  const reducedLogoAnimation = useAnimatedStyle(() => {
    return {
      transform: [
        {
-          scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'),
+          scale: interpolate(intro.value, [0, 1], [0.8, 1], 'clamp'),
        },
      ],
-      opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'),
+      opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'),
    }
  })

  const logoWrapperAnimation = useAnimatedStyle(() => {
    return {
      opacity: interpolate(
-        outroAppOpacity.get(),
+        outroAppOpacity.value,
        [0, 0.1, 0.2, 1],
        [1, 1, 0, 0],
        'clamp',
@@ -126,11 +126,11 @@ export function Splash(props: React.PropsWithChildren<Props>) {
    return {
      transform: [
        {
-          scale: interpolate(outroApp.get(), [0, 1], [1.1, 1], 'clamp'),
+          scale: interpolate(outroApp.value, [0, 1], [1.1, 1], 'clamp'),
        },
      ],
      opacity: interpolate(
-        outroAppOpacity.get(),
+        outroAppOpacity.value,
        [0, 0.1, 0.2, 1],
        [0, 0, 1, 1],
        'clamp',
@@ -146,37 +146,29 @@ export function Splash(props: React.PropsWithChildren<Props>) {
    if (isReady) {
      SplashScreen.hideAsync()
        .then(() => {
-          intro.set(() =>
-            withTiming(
-              1,
-              {duration: 400, easing: Easing.out(Easing.cubic)},
-              async () => {
-                // set these values to check animation at specific point
-                // outroLogo.set(0.1)
-                // outroApp.set(0.1)
-                outroLogo.set(() =>
-                  withTiming(
-                    1,
-                    {duration: 1200, easing: Easing.in(Easing.cubic)},
-                    () => {
-                      runOnJS(onFinish)()
-                    },
-                  ),
-                )
-                outroApp.set(() =>
-                  withTiming(1, {
-                    duration: 1200,
-                    easing: Easing.inOut(Easing.cubic),
-                  }),
-                )
-                outroAppOpacity.set(() =>
-                  withTiming(1, {
-                    duration: 1200,
-                    easing: Easing.in(Easing.cubic),
-                  }),
-                )
-              },
-            ),
+          intro.value = withTiming(
+            1,
+            {duration: 400, easing: Easing.out(Easing.cubic)},
+            async () => {
+              // set these values to check animation at specific point
+              // outroLogo.value = 0.1
+              // outroApp.value = 0.1
+              outroLogo.value = withTiming(
+                1,
+                {duration: 1200, easing: Easing.in(Easing.cubic)},
+                () => {
+                  runOnJS(onFinish)()
+                },
+              )
+              outroApp.value = withTiming(1, {
+                duration: 1200,
+                easing: Easing.inOut(Easing.cubic),
+              })
+              outroAppOpacity.value = withTiming(1, {
+                duration: 1200,
+                easing: Easing.in(Easing.cubic),
+              })
+            },
          )
        })
        .catch(() => {})
@@ -1,7 +1,7 @@
 import {Platform, StyleProp, StyleSheet, ViewStyle} from 'react-native'

 import * as tokens from '#/alf/tokens'
-import {ios, native, web} from '#/alf/util/platform'
+import {native, web} from '#/alf/util/platform'

 export const atoms = {
  debug: {
@@ -312,12 +312,6 @@ export const atoms = {
  border_r: {
    borderRightWidth: StyleSheet.hairlineWidth,
  },
-  curve_circular: ios({
-    borderCurve: 'circular',
-  }),
-  curve_continuous: ios({
-    borderCurve: 'continuous',
-  }),

  /*
   * Shadow
@@ -20,7 +20,6 @@ export * from '#/alf/types'
 export * from '#/alf/util/flatten'
 export * from '#/alf/util/platform'
 export * from '#/alf/util/themeSelector'
-export * from '#/alf/util/useGutterStyles'

 export type Alf = {
  themeName: ThemeName
@@ -1,126 +0,0 @@
-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,18 +0,0 @@
-import * as NavigationBar from 'expo-navigation-bar'
-
-import {isAndroid} from '#/platform/detection'
-import {Theme} from '../types'
-
-export function setNavigationBar(themeType: 'theme' | 'lightbox', t: Theme) {
-  if (isAndroid) {
-    if (themeType === 'theme') {
-      NavigationBar.setBackgroundColorAsync(t.atoms.bg.backgroundColor)
-      NavigationBar.setBorderColorAsync(t.atoms.bg.backgroundColor)
-      NavigationBar.setButtonStyleAsync(t.name !== 'light' ? 'light' : 'dark')
-    } else {
-      NavigationBar.setBackgroundColorAsync('black')
-      NavigationBar.setBorderColorAsync('black')
-      NavigationBar.setButtonStyleAsync('light')
-    }
-  }
-}
@@ -1,21 +0,0 @@
-import React from 'react'
-
-import {atoms as a, useBreakpoints, ViewStyleProp} from '#/alf'
-
-export function useGutterStyles({
-  top,
-  bottom,
-}: {
-  top?: boolean
-  bottom?: boolean
-} = {}) {
-  const {gtMobile} = useBreakpoints()
-  return React.useMemo<ViewStyleProp['style']>(() => {
-    return [
-      a.px_lg,
-      top && a.pt_md,
-      bottom && a.pb_md,
-      gtMobile && [a.px_xl, top && a.pt_lg, bottom && a.pb_lg],
-    ]
-  }, [gtMobile, top, bottom])
-}
@@ -34,7 +34,6 @@ export function AppLanguageDropdown(_props: ViewStyleProp) {
  return (
    <View style={a.relative}>
      <RNPickerSelect
-        darkTheme={t.scheme === 'dark'}
        placeholder={{}}
        value={sanitizedLang}
        onValueChange={onChangeAppLanguage}
@@ -1,3 +1,4 @@
+import React from 'react'
 import {View} from 'react-native'
 import {moderateProfile} from '@atproto/api'

@@ -458,6 +458,7 @@ 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={{
@@ -11,6 +11,7 @@ import {
 } from 'react-native'
 import {
  KeyboardAwareScrollView,
+  useKeyboardController,
  useKeyboardHandler,
 } from 'react-native-keyboard-controller'
 import {runOnJS} from 'react-native-reanimated'
@@ -19,7 +20,6 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-import {useEnableKeyboardController} from '#/lib/hooks/useEnableKeyboardController'
 import {ScrollProvider} from '#/lib/ScrollContext'
 import {logger} from '#/logger'
 import {isAndroid, isIOS} from '#/platform/detection'
@@ -75,7 +75,7 @@ export function Outer({
      try {
        cb()
      } catch (e: any) {
-        logger.error(e || 'Error running close callback')
+        logger.error('Error running close callback', e)
      }
    }

@@ -199,20 +199,27 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
  ) {
    const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
    const insets = useSafeAreaInsets()
-
-    useEnableKeyboardController(isIOS)
+    const {setEnabled} = useKeyboardController()

    const [keyboardHeight, setKeyboardHeight] = React.useState(0)

-    useKeyboardHandler(
-      {
-        onEnd: e => {
-          'worklet'
-          runOnJS(setKeyboardHeight)(e.height)
-        },
+    React.useEffect(() => {
+      if (!isIOS) {
+        return
+      }
+
+      setEnabled(true)
+      return () => {
+        setEnabled(false)
+      }
+    })
+
+    useKeyboardHandler({
+      onEnd: e => {
+        'worklet'
+        runOnJS(setKeyboardHeight)(e.height)
      },
-      [],
-    )
+    })

    const basePading =
      (isIOS ? 30 : 50) + (isIOS ? keyboardHeight / 4 : keyboardHeight)
@@ -7,6 +7,7 @@ import {
  View,
  ViewStyle,
 } from 'react-native'
+import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {DismissableLayer} from '@radix-ui/react-dismissable-layer'
@@ -41,6 +42,7 @@ export function Outer({
  onClose,
 }: React.PropsWithChildren<DialogOuterProps>) {
  const {_} = useLingui()
+  const t = useTheme()
  const {gtMobile} = useBreakpoints()
  const [isOpen, setIsOpen] = React.useState(false)
  const {setDialogIsOpen} = useDialogStateControlContext()
@@ -116,7 +118,16 @@ export function Outer({
                  gtMobile ? a.p_lg : a.p_md,
                  {overflowY: 'auto'},
                ]}>
-                <Backdrop />
+                <Animated.View
+                  entering={FadeIn.duration(150)}
+                  // exiting={FadeOut.duration(150)}
+                  style={[
+                    web(a.fixed),
+                    a.inset_0,
+                    {opacity: 0.8, backgroundColor: t.palette.black},
+                  ]}
+                />
+
                <View
                  style={[
                    a.w_full,
@@ -153,7 +164,7 @@ export function Inner({
  useFocusGuards()
  return (
    <FocusScope loop asChild trapped>
-      <View
+      <Animated.View
        role="dialog"
        aria-role="dialog"
        aria-label={label}
@@ -163,6 +174,8 @@ export function Inner({
        onClick={stopPropagation}
        onStartShouldSetResponder={_ => true}
        onTouchEnd={stopPropagation}
+        entering={FadeInDown.duration(100)}
+        // exiting={FadeOut.duration(100)}
        style={flatten([
          a.relative,
          a.rounded_md,
@@ -175,8 +188,6 @@ export function Inner({
            shadowColor: t.palette.black,
            shadowOpacity: t.name === 'light' ? 0.1 : 0.4,
            shadowRadius: 30,
-            // @ts-ignore web only
-            animation: 'fadeIn ease-out 0.1s',
          },
          flatten(style),
        ])}>
@@ -190,7 +201,7 @@ export function Inner({
            {children}
          </View>
        </DismissableLayer>
-      </View>
+      </Animated.View>
    </FocusScope>
  )
 }
@@ -257,25 +268,3 @@ export function Close() {
 export function Handle() {
  return null
 }
-
-function Backdrop() {
-  const t = useTheme()
-  return (
-    <View
-      style={{
-        opacity: 0.8,
-      }}>
-      <View
-        style={[
-          a.fixed,
-          a.inset_0,
-          {
-            backgroundColor: t.palette.black,
-            // @ts-ignore web only
-            animation: 'fadeIn ease-out 0.15s',
-          },
-        ]}
-      />
-    </View>
-  )
-}
@@ -1,7 +1,7 @@
 import React from 'react'
 import {StyleProp, TextStyle, View, ViewStyle} from 'react-native'

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

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

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

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

 import {
@@ -0,0 +1,100 @@
+import React, {useContext, useMemo} from 'react'
+import {View, ViewStyle} from 'react-native'
+import {StyleProp} from 'react-native'
+import {useSafeAreaInsets} from 'react-native-safe-area-context'
+
+import {ViewHeader} from '#/view/com/util/ViewHeader'
+import {ScrollView} from '#/view/com/util/Views'
+import {CenteredView} from '#/view/com/util/Views'
+import {atoms as a} from '#/alf'
+
+// Every screen should have a Layout component wrapping it.
+// This component provides a default padding for the top of the screen.
+// This allows certain screens to avoid the top padding if they want to.
+
+const LayoutContext = React.createContext({
+  withinScreen: false,
+  topPaddingDisabled: false,
+  withinScrollView: false,
+})
+
+/**
+ * Every screen should have a Layout.Screen component wrapping it.
+ * This component provides a default padding for the top of the screen
+ * and height/minHeight
+ */
+let Screen = ({
+  disableTopPadding = false,
+  style,
+  ...props
+}: React.ComponentProps<typeof View> & {
+  disableTopPadding?: boolean
+  style?: StyleProp<ViewStyle>
+}): React.ReactNode => {
+  const {top} = useSafeAreaInsets()
+  const context = useMemo(
+    () => ({
+      withinScreen: true,
+      topPaddingDisabled: disableTopPadding,
+      withinScrollView: false,
+    }),
+    [disableTopPadding],
+  )
+  return (
+    <LayoutContext.Provider value={context}>
+      <View
+        style={[
+          {paddingTop: disableTopPadding ? 0 : top},
+          a.util_screen_outer,
+          style,
+        ]}
+        {...props}
+      />
+    </LayoutContext.Provider>
+  )
+}
+Screen = React.memo(Screen)
+export {Screen}
+
+let Header = (
+  props: React.ComponentProps<typeof ViewHeader>,
+): React.ReactNode => {
+  const {withinScrollView} = useContext(LayoutContext)
+  if (!withinScrollView) {
+    return (
+      <CenteredView topBorder={false} sideBorders>
+        <ViewHeader showOnDesktop showBorder {...props} />
+      </CenteredView>
+    )
+  } else {
+    return <ViewHeader showOnDesktop showBorder {...props} />
+  }
+}
+Header = React.memo(Header)
+export {Header}
+
+let Content = ({
+  style,
+  contentContainerStyle,
+  ...props
+}: React.ComponentProps<typeof ScrollView> & {
+  style?: StyleProp<ViewStyle>
+  contentContainerStyle?: StyleProp<ViewStyle>
+}): React.ReactNode => {
+  const context = useContext(LayoutContext)
+  const newContext = useMemo(
+    () => ({...context, withinScrollView: true}),
+    [context],
+  )
+  return (
+    <LayoutContext.Provider value={newContext}>
+      <ScrollView
+        style={[a.flex_1, style]}
+        contentContainerStyle={[{paddingBottom: 100}, contentContainerStyle]}
+        {...props}
+      />
+    </LayoutContext.Provider>
+  )
+}
+Content = React.memo(Content)
+export {Content}
@@ -1,160 +0,0 @@
-import React from 'react'
-import {View} from 'react-native'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useNavigation} from '@react-navigation/native'
-
-import {NavigationProp} from '#/lib/routes/types'
-import {isIOS} from '#/platform/detection'
-import {useSetDrawerOpen} from '#/state/shell'
-import {
-  atoms as a,
-  useBreakpoints,
-  useGutterStyles,
-  useTheme,
-  ViewStyleProp,
-} from '#/alf'
-import {Button, ButtonIcon} from '#/components/Button'
-import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
-import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
-import {Text} from '#/components/Typography'
-
-const BUTTON_VISUAL_ALIGNMENT_OFFSET = 3
-const BUTTON_SIZE = 34 // small button
-
-export function Outer({children}: {children: React.ReactNode}) {
-  const t = useTheme()
-  const gutter = useGutterStyles()
-
-  return (
-    <View
-      style={[
-        a.w_full,
-        a.border_b,
-        a.flex_row,
-        a.align_center,
-        a.gap_sm,
-        gutter,
-        a.py_sm,
-        t.atoms.border_contrast_low,
-      ]}>
-      <View style={[a.flex_1]}>{children}</View>
-    </View>
-  )
-}
-
-export function Content({children}: {children: React.ReactNode}) {
-  return (
-    <View
-      style={[
-        a.flex_1,
-        a.justify_center,
-        a.py_xs,
-        isIOS && a.align_center,
-        {
-          paddingHorizontal: BUTTON_SIZE + a.gap_sm.gap,
-          minHeight: BUTTON_SIZE,
-        },
-      ]}>
-      {children}
-    </View>
-  )
-}
-
-export function Slot({
-  children,
-  style,
-}: {children?: React.ReactNode} & ViewStyleProp) {
-  return (
-    <View
-      style={[
-        a.absolute,
-        a.inset_0,
-        a.z_50,
-        {
-          width: BUTTON_SIZE,
-          right: 'auto',
-        },
-        style,
-      ]}>
-      {children}
-    </View>
-  )
-}
-
-export function BackButton() {
-  const {_} = useLingui()
-  const navigation = useNavigation<NavigationProp>()
-
-  const onPressBack = React.useCallback(() => {
-    if (navigation.canGoBack()) {
-      navigation.goBack()
-    } else {
-      navigation.navigate('Home')
-    }
-  }, [navigation])
-
-  return (
-    <Slot>
-      <Button
-        label={_(msg`Go back`)}
-        size="small"
-        variant="ghost"
-        color="secondary"
-        shape="round"
-        onPress={onPressBack}
-        style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}]}>
-        <ButtonIcon icon={ArrowLeft} size="lg" />
-      </Button>
-    </Slot>
-  )
-}
-
-export function MenuButton() {
-  const {_} = useLingui()
-  const setDrawerOpen = useSetDrawerOpen()
-  const {gtMobile} = useBreakpoints()
-
-  const onPress = React.useCallback(() => {
-    setDrawerOpen(true)
-  }, [setDrawerOpen])
-
-  return gtMobile ? null : (
-    <Slot>
-      <Button
-        label={_(msg`Open drawer menu`)}
-        size="small"
-        variant="ghost"
-        color="secondary"
-        shape="round"
-        onPress={onPress}
-        style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}]}>
-        <ButtonIcon icon={Menu} size="lg" />
-      </Button>
-    </Slot>
-  )
-}
-
-export function TitleText({children}: {children: React.ReactNode}) {
-  const {gtMobile} = useBreakpoints()
-  return (
-    <Text
-      style={[
-        a.text_lg,
-        a.font_heavy,
-        a.leading_snug,
-        gtMobile && [a.text_xl],
-      ]}>
-      {children}
-    </Text>
-  )
-}
-
-export function SubtitleText({children}: {children: React.ReactNode}) {
-  const t = useTheme()
-  return (
-    <Text style={[a.text_sm, a.leading_tight, t.atoms.text_contrast_medium]}>
-      {children}
-    </Text>
-  )
-}
@@ -1,194 +0,0 @@
-import React, {useContext, useMemo} from 'react'
-import {StyleSheet, View, ViewProps, ViewStyle} from 'react-native'
-import {StyleProp} from 'react-native'
-import {
-  KeyboardAwareScrollView,
-  KeyboardAwareScrollViewProps,
-} from 'react-native-keyboard-controller'
-import Animated, {AnimatedScrollViewProps} from 'react-native-reanimated'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
-
-import {isWeb} from '#/platform/detection'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-
-export * as Header from '#/components/Layout/Header'
-
-// Every screen should have a Layout component wrapping it.
-// This component provides a default padding for the top of the screen.
-// This allows certain screens to avoid the top padding if they want to.
-
-const LayoutContext = React.createContext({
-  withinScreen: false,
-  topPaddingDisabled: false,
-  withinScrollView: false,
-})
-
-export type ScreenProps = React.ComponentProps<typeof View> & {
-  disableTopPadding?: boolean
-  style?: StyleProp<ViewStyle>
-}
-
-/**
- * Every screen should have a Layout.Screen component wrapping it.
- * This component provides a default padding for the top of the screen
- * and height/minHeight
- */
-export const Screen = React.memo(function Screen({
-  disableTopPadding = false,
-  style,
-  ...props
-}: ScreenProps) {
-  const {top} = useSafeAreaInsets()
-  const context = useMemo(
-    () => ({
-      withinScreen: true,
-      topPaddingDisabled: disableTopPadding,
-      withinScrollView: false,
-    }),
-    [disableTopPadding],
-  )
-  return (
-    <LayoutContext.Provider value={context}>
-      <View
-        style={[
-          {paddingTop: disableTopPadding ? 0 : top},
-          a.util_screen_outer,
-          style,
-        ]}
-        {...props}
-      />
-    </LayoutContext.Provider>
-  )
-})
-
-export type ContentProps = AnimatedScrollViewProps & {
-  style?: StyleProp<ViewStyle>
-  contentContainerStyle?: StyleProp<ViewStyle>
-}
-
-export const Content = React.memo(function Content({
-  children,
-  style,
-  contentContainerStyle,
-  ...props
-}: ContentProps) {
-  const context = useContext(LayoutContext)
-  const newContext = useMemo(
-    () => ({...context, withinScrollView: true}),
-    [context],
-  )
-  return (
-    <LayoutContext.Provider value={newContext}>
-      <Animated.ScrollView
-        id="content"
-        style={[
-          styles.scrollViewCommonStyles,
-          style,
-          styles.scrollViewOverrideStyles,
-        ]}
-        contentContainerStyle={[
-          styles.scrollViewContentContainer,
-          contentContainerStyle,
-        ]}
-        {...props}>
-        {isWeb ? (
-          // @ts-ignore web only -esb
-          <Center>{children}</Center>
-        ) : (
-          children
-        )}
-      </Animated.ScrollView>
-    </LayoutContext.Provider>
-  )
-})
-
-export type KeyboardAwareContentProps = KeyboardAwareScrollViewProps & {
-  children: React.ReactNode
-  contentContainerStyle?: StyleProp<ViewStyle>
-}
-
-export const KeyboardAwareContent = React.forwardRef(function LayoutScrollView(
-  {children, style, contentContainerStyle, ...props}: KeyboardAwareContentProps,
-  _ref: React.Ref<typeof KeyboardAwareScrollView>,
-) {
-  return (
-    <KeyboardAwareScrollView
-      style={[
-        styles.scrollViewCommonStyles,
-        style,
-        styles.scrollViewOverrideStyles,
-      ]}
-      contentContainerStyle={[
-        styles.scrollViewContentContainer,
-        contentContainerStyle,
-      ]}
-      keyboardShouldPersistTaps="handled"
-      {...props}>
-      {isWeb ? <Center>{children}</Center> : children}
-    </KeyboardAwareScrollView>
-  )
-})
-
-export const Center = React.forwardRef(function LayoutContent(
-  {children, style, ...props}: ViewProps,
-  ref: React.Ref<View>,
-) {
-  const t = useTheme()
-  const {gtMobile} = useBreakpoints()
-  return (
-    <>
-      {gtMobile && (
-        <View
-          style={[
-            a.fixed,
-            a.inset_0,
-            a.border_l,
-            a.border_r,
-            t.atoms.border_contrast_low,
-            {
-              width: 602,
-              left: '50%',
-              transform: [
-                {
-                  translateX: '-50%',
-                },
-              ],
-            },
-          ]}
-        />
-      )}
-      <View
-        ref={ref}
-        style={[
-          a.util_screen_outer,
-          a.w_full,
-          a.mx_auto,
-          gtMobile && {
-            maxWidth: 600,
-          },
-          style,
-        ]}
-        {...props}>
-        {children}
-      </View>
-    </>
-  )
-})
-
-const styles = StyleSheet.create({
-  scrollViewCommonStyles: {
-    width: '100%',
-  },
-  scrollViewContentContainer: {
-    paddingBottom: 100,
-  },
-  /**
-   * Applied last to ensure they override any locally-defined styles. Use sparingly.
-   */
-  scrollViewOverrideStyles: {
-    /*
-     * Ensures fixed items within `ScrollView` are fixed relative to window.
-     */
-    transform: 'unset',
-  },
-})
@@ -1,4 +1,4 @@
-import {useCallback, useMemo} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {ActivityIndicator, FlatList, View} from 'react-native'
 import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -274,6 +274,11 @@ 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 (
@@ -284,20 +289,19 @@ export function InlineLinkText({
      {...rest}
      style={[
        {color: t.palette.primary_500},
-        (hovered || focused) &&
+        (hovered || focused || pressed) &&
          !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}
@@ -17,12 +17,13 @@ export function Loader(props: Props) {
  const rotation = useSharedValue(0)

  const animatedStyles = useAnimatedStyle(() => ({
-    transform: [{rotate: rotation.get() + 'deg'}],
+    transform: [{rotate: rotation.value + 'deg'}],
  }))

  React.useEffect(() => {
-    rotation.set(() =>
-      withRepeat(withTiming(360, {duration: 500, easing: Easing.linear}), -1),
+    rotation.value = withRepeat(
+      withTiming(360, {duration: 500, easing: Easing.linear}),
+      -1,
    )
  }, [rotation])

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

 import {atoms as a, flatten, useTheme} from '#/alf'
@@ -1,3 +1,5 @@
+/* eslint-disable react/prop-types */
+
 import React from 'react'
 import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
 import {msg} from '@lingui/macro'
@@ -302,8 +302,8 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
  const animationStyle = {
    animation:
      currentState.stage === 'hiding'
-        ? `fadeOut ${HIDE_DURATION}ms both`
-        : `fadeIn ${SHOW_DURATION}ms both`,
+        ? `avatarHoverFadeOut ${HIDE_DURATION}ms both`
+        : `avatarHoverFadeIn ${SHOW_DURATION}ms both`,
  }

  return (
@@ -1,3 +1,4 @@
+import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -1,3 +1,4 @@
+import React from 'react'
 import {View} from 'react-native'
 import * as Progress from 'react-native-progress'

@@ -55,15 +55,13 @@ export const ProgressGuideToast = React.forwardRef<

    // animate the opacity then set isOpen to false when done
    const setIsntOpen = () => setIsOpen(false)
-    opacity.set(() =>
-      withTiming(
-        0,
-        {
-          duration: 400,
-          easing: Easing.out(Easing.cubic),
-        },
-        () => runOnJS(setIsntOpen)(),
-      ),
+    opacity.value = withTiming(
+      0,
+      {
+        duration: 400,
+        easing: Easing.out(Easing.cubic),
+      },
+      () => runOnJS(setIsntOpen)(),
    )
  }, [setIsOpen, opacity])

@@ -73,24 +71,20 @@ export const ProgressGuideToast = React.forwardRef<

    // animate the vertical translation, the opacity, and the checkmark
    const playCheckmark = () => animatedCheckRef.current?.play()
-    opacity.set(0)
-    opacity.set(() =>
-      withTiming(
-        1,
-        {
-          duration: 100,
-          easing: Easing.out(Easing.cubic),
-        },
-        () => runOnJS(playCheckmark)(),
-      ),
-    )
-    translateY.set(0)
-    translateY.set(() =>
-      withTiming(insets.top + 10, {
-        duration: 500,
+    opacity.value = 0
+    opacity.value = withTiming(
+      1,
+      {
+        duration: 100,
        easing: Easing.out(Easing.cubic),
-      }),
+      },
+      () => runOnJS(playCheckmark)(),
    )
+    translateY.value = 0
+    translateY.value = withTiming(insets.top + 10, {
+      duration: 500,
+      easing: Easing.out(Easing.cubic),
+    })

    // start the countdown timer to autoclose
    timeoutRef.current = setTimeout(close, visibleDuration || 5e3)
@@ -120,8 +114,8 @@ export const ProgressGuideToast = React.forwardRef<
  }, [winDim.width])

  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{translateY: translateY.get()}],
-    opacity: opacity.get(),
+    transform: [{translateY: translateY.value}],
+    opacity: opacity.value,
  }))

  return (
@@ -1,3 +1,4 @@
+import React from 'react'
 import {View} from 'react-native'
 import {AppBskyLabelerDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -9,7 +9,6 @@ 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'
@@ -54,6 +53,7 @@ export function RichText({
  const plainStyles = [a.leading_snug, flattenedStyle]
  const interactiveStyles = [
    a.leading_snug,
+    a.pointer_events_auto,
    flatten(interactiveStyle),
    flattenedStyle,
  ]
@@ -151,14 +151,17 @@ export function RichText({
        />,
      )
    } else {
-      els.push(segment.text)
+      els.push(
+        <Text key={key} emoji style={plainStyles}>
+          {segment.text}
+        </Text>,
+      )
    }
    key++
  }

  return (
    <Text
-      emoji
      selectable={selectable}
      testID={testID}
      style={plainStyles}
@@ -191,6 +194,11 @@ 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(() => {
@@ -220,6 +228,8 @@ function RichTextTag({
            accessibilityRole: isNative ? 'button' : undefined,
            onPress: navigateToPage,
            onLongPress: openDialog,
+            onPressIn: onPressIn,
+            onPressOut: onPressOut,
          })}
          {...web({
            onMouseEnter: onHoverIn,
@@ -233,12 +243,10 @@ function RichTextTag({
              cursor: 'pointer',
            }),
            {color: t.palette.primary_500},
-            (hovered || focused) && {
-              ...web({
-                outline: 0,
-                textDecorationLine: 'underline',
-                textDecorationColor: t.palette.primary_500,
-              }),
+            (hovered || focused || pressed) && {
+              ...web({outline: 0}),
+              textDecorationLine: 'underline',
+              textDecorationColor: t.palette.primary_500,
            },
            style,
          ]}>
@@ -248,3 +256,10 @@ function RichTextTag({
    </React.Fragment>
  )
 }
+
+export function isOnlyEmoji(text: string) {
+  return (
+    text.length <= 15 &&
+    /^[\p{Emoji_Presentation}\p{Extended_Pictographic}]+$/u.test(text)
+  )
+}
@@ -40,7 +40,7 @@ export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
    ref,
  ) {
    const t = useTheme()
-    const bottomBarOffset = useBottomBarOffset(headerHeight)
+    const bottomBarOffset = useBottomBarOffset(300)
    const initialNumToRender = useInitialNumToRender()
    const {currentAccount} = useSession()
    const {data, refetch, isError} = useAllListMembersQuery(listUri)
@@ -1,3 +1,4 @@
+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 {useRef} from 'react'
+import React, {useRef} from 'react'
 import type {ListRenderItemInfo} from 'react-native'
 import {View} from 'react-native'
 import {AppBskyActorDefs, ModerationOpts} from '@atproto/api'
@@ -1,3 +1,4 @@
+import React from 'react'
 import {Keyboard, View} from 'react-native'
 import {
  AppBskyActorDefs,
@@ -1,3 +1,4 @@
+import React from 'react'
 import {StyleSheet, View} from 'react-native'

 import {isTouchDevice} from '#/lib/browser'
@@ -40,37 +40,9 @@ 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 {
@@ -107,75 +79,32 @@ function TagMenuInner({
  }, [tag, preferences?.moderationPrefs?.mutedWords])

  return (
-    <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),
-                  })
-                })
-              })}>
+    <>
+      {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>
+          ) : (
+            <>
              <View
                style={[
-                  a.w_full,
-                  a.flex_row,
-                  a.align_center,
-                  a.justify_start,
-                  a.gap_md,
-                  a.px_lg,
-                  a.py_md,
+                  a.rounded_md,
+                  a.border,
+                  a.mb_md,
+                  t.atoms.border_contrast_low,
+                  t.atoms.bg_contrast_25,
                ]}>
-                <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 by @${authorHandle} with tag ${displayTag}`,
-                  )}
+                  label={_(msg`View all posts with tag ${displayTag}`)}
                  {...createStaticClick(() => {
                    control.close(() => {
                      navigation.push('Hashtag', {
                        tag: encodeURIComponent(tag),
-                        author: authorHandle,
                      })
                    })
                  })}>
@@ -189,7 +118,7 @@ function TagMenuInner({
                      a.px_lg,
                      a.py_md,
                    ]}>
-                    <Person size="lg" style={[t.atoms.text_contrast_medium]} />
+                    <Search size="lg" style={[t.atoms.text_contrast_medium]} />
                    <Text
                      numberOfLines={1}
                      ellipsizeMode="middle"
@@ -205,86 +134,143 @@ function TagMenuInner({
                        <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
                          {displayTag}
                        </Text>{' '}
-                        posts by this user
+                        posts
                      </Trans>
                    </Text>
                  </View>
                </Link>
-              </>
-            )}

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

-                <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',
-                          },
-                        ])
+                    <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`)
                      }
-                    })
-                  }}>
-                  <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>
+                      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>

-          <Button
-            label={_(msg`Close this dialog`)}
-            size="small"
-            variant="ghost"
-            color="secondary"
-            onPress={() => control.close()}>
-            <ButtonText>
-              <Trans>Cancel</Trans>
-            </ButtonText>
-          </Button>
-        </>
-      )}
-    </Dialog.Inner>
+              <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>
+    </>
  )
 }
@@ -1,15 +1,140 @@
+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 {atoms, flatten, useAlf, useTheme, web} from '#/alf'
-import {
-  childHasEmoji,
-  normalizeTextStyles,
-  renderChildrenWithEmoji,
-  TextProps,
-} from '#/alf/typography'
+import {isIOS, isNative} from '#/platform/detection'
+import {Alf, applyFonts, atoms, flatten, useAlf, useTheme, web} from '#/alf'
 import {IS_DEV} from '#/env'
-export type {TextProps}
+
+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
+}

 /**
 * Our main text component. Use this most of the time.
@@ -37,6 +162,10 @@ 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 = {
@@ -49,12 +178,12 @@ export function Text({

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

-function createHeadingElement({level}: {level: number}) {
+export function createHeadingElement({level}: {level: number}) {
  return function HeadingElement({style, ...rest}: TextProps) {
    const attr =
      web({
@@ -32,25 +32,21 @@ export const AnimatedCheck = React.forwardRef<
  const checkAnim = useSharedValue(0)

  const circleAnimatedProps = useAnimatedProps(() => ({
-    strokeDashoffset: 166 - circleAnim.get() * 166,
+    strokeDashoffset: 166 - circleAnim.value * 166,
  }))
  const checkAnimatedProps = useAnimatedProps(() => ({
-    strokeDashoffset: 48 - 48 * checkAnim.get(),
+    strokeDashoffset: 48 - 48 * checkAnim.value,
  }))

  const play = React.useCallback(
    (cb?: () => void) => {
-      circleAnim.set(0)
-      checkAnim.set(0)
+      circleAnim.value = 0
+      checkAnim.value = 0

-      circleAnim.set(() =>
-        withTiming(1, {duration: 500, easing: Easing.linear}),
-      )
-      checkAnim.set(() =>
-        withDelay(
-          500,
-          withTiming(1, {duration: 300, easing: Easing.linear}, cb),
-        ),
+      circleAnim.value = withTiming(1, {duration: 500, easing: Easing.linear})
+      checkAnim.value = withDelay(
+        500,
+        withTiming(1, {duration: 300, easing: Easing.linear}, cb),
      )
    },
    [circleAnim, checkAnim],
@@ -1,4 +1,4 @@
-import {useCallback} from 'react'
+import React, {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -256,9 +256,6 @@ export function PostInteractionSettingsForm({
    } else {
      newSelected.splice(i, 1)
    }
-    if (newSelected.length === 0) {
-      newSelected.push({type: 'everybody'})
-    }

    onChangeThreadgateAllowUISettings(newSelected)
  }
@@ -309,9 +306,13 @@ 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]}>
-                <Trans>Quote posts enabled</Trans>
+                {quotesEnabled ? (
+                  <Trans>Quote posts enabled</Trans>
+                ) : (
+                  <Trans>Quote posts disabled</Trans>
+                )}
              </Text>
              <Toggle.Switch />
            </Toggle.Item>
@@ -482,7 +483,7 @@ function Selectable({
            a.justify_between,
            a.rounded_sm,
            a.p_md,
-            {minHeight: 40}, // for consistency with checkmark icon visible or not
+            {height: 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 {useCallback} from 'react'
+import React, {useCallback} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -146,17 +146,18 @@ export function Inner({
              <ErrorMessage message={error} />
            </View>
          ) : null}
-          {currentStep === 'StepOne' ? (
-            <View>
-              {reasonText ? (
-                <View style={[a.gap_sm]}>
-                  <Text style={[a.text_md, a.leading_snug]}>{reasonText}</Text>
-                  <Text style={[a.text_md, a.leading_snug]}>
-                    Don't have access to{' '}
-                    <Text style={[a.text_md, a.leading_snug, a.font_bold]}>
-                      {currentAccount?.email}
-                    </Text>
-                    ?{' '}
+          <Text style={[a.text_md, a.leading_snug]}>
+            {currentStep === 'StepOne' ? (
+              <>
+                {!reasonText ? (
+                  <>
+                    <Trans>
+                      You'll receive an email at{' '}
+                      <Text style={[a.text_md, a.leading_snug, a.font_bold]}>
+                        {currentAccount?.email}
+                      </Text>{' '}
+                      to verify it's you.
+                    </Trans>{' '}
                    <InlineLinkText
                      to="#"
                      label={_(msg`Change email address`)}
@@ -168,41 +169,17 @@ export function Inner({
                        })
                        return false
                      }}>
-                      <Trans>Change your email address</Trans>
+                      <Trans>Need to change it?</Trans>
                    </InlineLinkText>
-                    .
-                  </Text>
-                </View>
-              ) : (
-                <Text style={[a.text_md, a.leading_snug]}>
-                  <Trans>
-                    You'll receive an email at{' '}
-                    <Text style={[a.text_md, a.leading_snug, a.font_bold]}>
-                      {currentAccount?.email}
-                    </Text>{' '}
-                    to verify it's you.
-                  </Trans>{' '}
-                  <InlineLinkText
-                    to="#"
-                    label={_(msg`Change email address`)}
-                    style={[a.text_md, a.leading_snug]}
-                    onPress={e => {
-                      e.preventDefault()
-                      control.close(() => {
-                        openModal({name: 'change-email'})
-                      })
-                      return false
-                    }}>
-                    <Trans>Need to change it?</Trans>
-                  </InlineLinkText>
-                </Text>
-              )}
-            </View>
-          ) : (
-            <Text style={[a.text_md, a.leading_snug]}>
-              {uiStrings[currentStep].message}
-            </Text>
-          )}
+                  </>
+                ) : (
+                  reasonText
+                )}
+              </>
+            ) : (
+              uiStrings[currentStep].message
+            )}
+          </Text>
        </View>
        {currentStep === 'StepTwo' ? (
          <View>
@@ -0,0 +1,117 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {AppearanceToggleButtonGroup} from '#/screens/Settings/AppearanceSettings'
+import {atoms as a, useAlf, useTheme} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import {useNuxDialogContext} from '#/components/dialogs/nuxs'
+import {Divider} from '#/components/Divider'
+import {TextSize_Stroke2_Corner0_Rounded as TextSize} from '#/components/icons/TextSize'
+import {TitleCase_Stroke2_Corner0_Rounded as Aa} from '#/components/icons/TitleCase'
+import {Text} from '#/components/Typography'
+
+export function NeueTypography() {
+  const t = useTheme()
+  const {_} = useLingui()
+  const nuxDialogs = useNuxDialogContext()
+  const control = Dialog.useDialogControl()
+  const {fonts} = useAlf()
+
+  Dialog.useAutoOpen(control, 3e3)
+
+  const onClose = React.useCallback(() => {
+    nuxDialogs.dismissActiveNux()
+  }, [nuxDialogs])
+
+  const onChangeFontFamily = React.useCallback(
+    (values: string[]) => {
+      const next = values[0] === 'system' ? 'system' : 'theme'
+      fonts.setFontFamily(next)
+    },
+    [fonts],
+  )
+
+  const onChangeFontScale = React.useCallback(
+    (values: string[]) => {
+      const next = values[0] || ('0' as any)
+      fonts.setFontScale(next)
+    },
+    [fonts],
+  )
+
+  return (
+    <Dialog.Outer control={control} onClose={onClose}>
+      <Dialog.Handle />
+      <Dialog.ScrollableInner label={_(msg`Introducing new font settings`)}>
+        <View style={[a.gap_xl]}>
+          <View style={[a.gap_md]}>
+            <Text style={[a.text_3xl, a.font_heavy]}>
+              <Trans>New font settings ✨</Trans>
+            </Text>
+            <Text style={[a.text_lg, a.leading_snug, {maxWidth: 400}]}>
+              <Trans>
+                We're introducing a new theme font, along with adjustable font
+                sizing.
+              </Trans>
+            </Text>
+            <Text
+              style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
+              <Trans>
+                You can adjust these in your Appearance Settings later.
+              </Trans>
+            </Text>
+          </View>
+
+          <Divider />
+
+          <View style={[a.gap_lg]}>
+            <AppearanceToggleButtonGroup
+              title={_(msg`Font`)}
+              description={_(
+                msg`For the best experience, we recommend using the theme font.`,
+              )}
+              icon={Aa}
+              items={[
+                {
+                  label: _(msg`System`),
+                  name: 'system',
+                },
+                {
+                  label: _(msg`Theme`),
+                  name: 'theme',
+                },
+              ]}
+              values={[fonts.family]}
+              onChange={onChangeFontFamily}
+            />
+
+            <AppearanceToggleButtonGroup
+              title={_(msg`Font size`)}
+              icon={TextSize}
+              items={[
+                {
+                  label: _(msg`Smaller`),
+                  name: '-1',
+                },
+                {
+                  label: _(msg`Default`),
+                  name: '0',
+                },
+                {
+                  label: _(msg`Larger`),
+                  name: '1',
+                },
+              ]}
+              values={[fonts.scale]}
+              onChange={onChangeFontScale}
+            />
+          </View>
+        </View>
+
+        <Dialog.Close />
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}
@@ -19,6 +19,7 @@ import {useOnboardingState} from '#/state/shell'
 /*
 * NUXs
 */
+import {NeueTypography} from '#/components/dialogs/nuxs/NeueTypography'
 import {isSnoozed, snooze, unsnooze} from '#/components/dialogs/nuxs/snoozing'
 import {IS_DEV} from '#/env'

@@ -35,7 +36,19 @@ const queuedNuxs: {
    currentProfile: AppBskyActorDefs.ProfileViewDetailed
    preferences: UsePreferencesQueryResponse
  }) => boolean
-}[] = []
+}[] = [
+  {
+    id: Nux.NeueTypography,
+    enabled(props) {
+      if (props.currentProfile.createdAt) {
+        if (new Date(props.currentProfile.createdAt) < new Date('2024-10-09')) {
+          return true
+        }
+      }
+      return false
+    },
+  },
+]

 const Context = React.createContext<Context>({
  activeNux: undefined,
@@ -53,14 +66,7 @@ export function NuxDialogs() {
  const onboardingActive = useOnboardingState().isActive

  const isLoading =
-    onboardingActive ||
-    !currentAccount ||
-    !preferences ||
-    !profile ||
-    // Profile isn't legit ready until createdAt is a real date.
-    !profile.createdAt ||
-    profile.createdAt === '0001-01-01T00:00:00.000Z' // TODO: Fix this in AppView.
-
+    !currentAccount || !preferences || !profile || onboardingActive
  return !isLoading ? (
    <Inner
      currentAccount={currentAccount}
@@ -168,7 +174,7 @@ function Inner({

  return (
    <Context.Provider value={ctx}>
-      {/*For example, activeNux === Nux.NeueTypography && <NeueTypography />*/}
+      {activeNux === Nux.NeueTypography && <NeueTypography />}
    </Context.Provider>
  )
 }
@@ -34,7 +34,7 @@ export function ActionsWrapper({
  const scale = useSharedValue(1)

  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{scale: scale.get()}],
+    transform: [{scale: scale.value}],
  }))

  const open = React.useCallback(() => {
@@ -46,7 +46,7 @@ export function ActionsWrapper({
  const shrink = React.useCallback(() => {
    'worklet'
    cancelAnimation(scale)
-    scale.set(() => withTiming(1, {duration: 200}))
+    scale.value = withTiming(1, {duration: 200})
  }, [scale])

  const doubleTapGesture = Gesture.Tap()
@@ -58,13 +58,11 @@ export function ActionsWrapper({
  const pressAndHoldGesture = Gesture.LongPress()
    .onStart(() => {
      'worklet'
-      scale.set(() =>
-        withTiming(1.05, {duration: 200}, finished => {
-          if (!finished) return
-          runOnJS(open)()
-          shrink()
-        }),
-      )
+      scale.value = withTiming(1.05, {duration: 200}, finished => {
+        if (!finished) return
+        runOnJS(open)()
+        shrink()
+      })
    })
    .onTouchesUp(shrink)
    .onTouchesMove(shrink)
@@ -42,12 +42,12 @@ export function ChatEmptyPill() {

  const onPressIn = React.useCallback(() => {
    if (isWeb) return
-    scale.set(() => withTiming(1.075, {duration: 100}))
+    scale.value = withTiming(1.075, {duration: 100})
  }, [scale])

  const onPressOut = React.useCallback(() => {
    if (isWeb) return
-    scale.set(() => withTiming(1, {duration: 100}))
+    scale.value = withTiming(1, {duration: 100})
  }, [scale])

  const onPress = React.useCallback(() => {
@@ -61,7 +61,7 @@ export function ChatEmptyPill() {
  }, [playHaptic, prompts.length])

  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{scale: scale.get()}],
+    transform: [{scale: scale.value}],
  }))

  return (
@@ -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,3 +1,4 @@
+import React from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -19,11 +19,10 @@ 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 {RichText} from '../RichText'
+import {isOnlyEmoji, RichText} from '../RichText'
 import {DateDivider} from './DateDivider'
 import {MessageItemEmbed} from './MessageItemEmbed'
 import {localDateString} from './util'
@@ -62,7 +62,7 @@ export let MessageMenu = ({
      message.text,
      langPrefs.primaryLanguage,
    )
-    openLink(translatorUrl, true)
+    openLink(translatorUrl)
  }, [langPrefs.primaryLanguage, message.text, openLink])

  const onDelete = React.useCallback(() => {
@@ -35,12 +35,12 @@ export function NewMessagesPill({

  const onPressIn = React.useCallback(() => {
    if (isWeb) return
-    scale.set(() => withTiming(1.075, {duration: 100}))
+    scale.value = withTiming(1.075, {duration: 100})
  }, [scale])

  const onPressOut = React.useCallback(() => {
    if (isWeb) return
-    scale.set(() => withTiming(1, {duration: 100}))
+    scale.value = withTiming(1, {duration: 100})
  }, [scale])

  const onPress = React.useCallback(() => {
@@ -49,7 +49,7 @@ export function NewMessagesPill({
  }, [onPressInner, playHaptic])

  const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{scale: scale.get()}],
+    transform: [{scale: scale.value}],
  }))

  return (
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Hailey	213070d6c9	statsig: use new proxy endpoint (#6271 )	2024-11-15 11:25:34 -08:00
Hailey	d2c9f3ff92	Merge branch 'main' into hailey/remove-client-downsample	2024-11-12 11:29:28 -08:00
Hailey	d8ea31c1d5	remove :sampled	2024-11-07 14:19:36 -08:00
				`@@ -1 +0,0 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M15.439 3.148a1 1 0 0 1 .41.645l.568 3.22a7 7 0 1 1-6.174 10.97L4.32 19.027a1 1 0 0 1-1.159-.811L1.078 6.398a1 1 0 0 1 .81-1.158l12.803-2.258a1 1 0 0 1 .748.166ZM9.325 16.114A7 7 0 0 1 9 14c0-1.56.51-3 1.372-4.164l-6.456 1.139 1.041 5.909 4.368-.77ZM3.568 9.005l10.833-1.91-.347-1.97L3.22 7.036l.347 1.97ZM16 9a5 5 0 1 0 0 10 5 5 0 0 0 0-10Zm0 2a1 1 0 0 1 1 1v1.586l1.374 1.374a1 1 0 0 1-1.414 1.414l-1.667-1.667A1 1 0 0 1 15 14v-2a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>