align lightbox behaviour with iOS

fix lightbox on android 15
2024-12-20 19:49:36 +00:00 · 2024-12-20 19:28:14 +00:00
304 changed files with 70709 additions and 101728 deletions
@@ -93,7 +93,6 @@ module.exports = {
        ],
      },
    ],
-    '@typescript-eslint/ban-ts-comment': 'warn',
  },
  ignorePatterns: [
    '**/__mocks__/*.ts',
@@ -19,7 +19,7 @@ jobs:
      - name: Set up Go tooling
        uses: actions/setup-go@v3
        with:
-          go-version: '1.23'
+          go-version: '1.22'
      - name: Dummy Static Files
        run: touch bskyweb/static/js/blah.js && touch bskyweb/static/css/blah.txt && touch bskyweb/static/media/blah.txt
      - name: Check
@@ -36,7 +36,7 @@ jobs:
      - name: Set up Go tooling
        uses: actions/setup-go@v3
        with:
-          go-version: '1.23'
+          go-version: '1.22'
      - name: Dummy Static Files
        run: touch bskyweb/static/js/blah.js && touch bskyweb/static/css/blah.txt && touch bskyweb/static/media/blah.txt
      - name: Lint
@@ -1,38 +0,0 @@
-name: Nightly Update Source Languages
-on:
-  schedule:
-    - cron: '0 2 * * *' # run at 2 AM UTC
-  workflow_dispatch:
-
-jobs:
-  extract-languages:
-    name: Nightly Update Source Languages
-    runs-on: ubuntu-latest
-
-    permissions:
-      # Give the default GITHUB_TOKEN write permission to commit and push the
-      # added or changed files to the repository.
-      contents: write
-
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v3
-        with:
-          ssh-key: ${{secrets.GH_ACTION_DEPLOY_KEY}}
-      - name: Install node
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: .nvmrc
-      - name: Yarn install
-        uses: Wandalen/wretry.action@master
-        with:
-          command: yarn --frozen-lockfile
-          attempt_limit: 3
-          attempt_delay: 2000
-      - name: Extract language strings
-        run: yarn intl:extract
-      - name: Create commit
-        uses: stefanzweifel/git-auto-commit-action@v5
-        with:
-          commit_message: Nightly source-language update
-          file_pattern: ./src/locale/locales/en/messages.po
@@ -1,4 +1,4 @@
-FROM golang:1.23-bullseye AS build-env
+FROM golang:1.22-bullseye AS build-env

 WORKDIR /usr/src/social-app

@@ -1,4 +1,4 @@
-FROM golang:1.23-bullseye AS build-env
+FROM golang:1.22-bullseye AS build-env

 WORKDIR /usr/src/social-app

@@ -1,4 +1,4 @@
-Copyright 2023–2025 Bluesky PBC
+Copyright 2023–2024 Bluesky PBC

 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

@@ -10,7 +10,8 @@ appId: xyz.blueskyweb.app
    id: "e2eOpenLoggedOutView"
 - tapOn:
    id: "createAccountButton"
- tapOn: "Bluesky Social"
+- tapOn:
+    id: "selectServiceButton"
 - tapOn:
    id: "customSelectBtn"
 - tapOn:
@@ -160,7 +160,7 @@ appId: xyz.blueskyweb.app
 - tapOn:
    label: "Adds and removes users on curatelists from the profile"
    id: "bottomBarSearchBtn"
- tapOn: "Search for posts, users, or feeds"
+- tapOn: "Search"
 - inputText: "bob"
 - tapOn:
    id: "searchAutoCompleteResult-bob.test"
@@ -16,7 +16,7 @@ appId: xyz.blueskyweb.app
 - tapOn:
    id: "profileCardButton"
 - tapOn:
-    id: "profilePager-selector-5"
+    id: "profilePager-selector-4"
 - tapOn: "alice-favs"
 - tapOn: "Pin to Home"
 - tapOn:
@@ -21,7 +21,7 @@ appId: xyz.blueskyweb.app
    label: "Feeds button disappears after pinning a feed"
    id: "bottomBarProfileBtn"
 - tapOn:
-    id: "profilePager-selector-5"
+    id: "profilePager-selector-4"
 - tapOn: "alice-favs"
 - tapOn: "Pin to Home"
 - tapOn:
@@ -15,7 +15,7 @@ appId: xyz.blueskyweb.app
        id: "bottomBarSearchBtn"
 - tapOn:
    id: "bottomBarSearchBtn"
- tapOn: "Search for posts, users, or feeds"
+- tapOn: "Search"
 - inputText: "b"
 - tapOn:
    id: "searchAutoCompleteResult-bob.test"
@@ -12,8 +12,8 @@ appId: xyz.blueskyweb.app
 # Navigate to another user profile via autocomplete
 - tapOn:
    id: "bottomBarSearchBtn"
- assertVisible: "Search for posts, users, or feeds"
- tapOn: "Search for posts, users, or feeds"
+- assertVisible: "Search"
+- tapOn: "Search"
 - inputText: "b"
 - tapOn:
    id: "searchAutoCompleteResult-bob.test"
@@ -1,42 +0,0 @@
-import {IsValidHandle, validateServiceHandle} from '#/lib/strings/handles'
-
-describe('handle validation', () => {
-  const valid = [
-    ['ali', 'bsky.social'],
-    ['alice', 'bsky.social'],
-    ['a-lice', 'bsky.social'],
-    ['a-----lice', 'bsky.social'],
-    ['123', 'bsky.social'],
-    ['123456789012345678', 'bsky.social'],
-    ['alice', 'custom-pds.com'],
-    ['alice', 'my-custom-pds-with-long-name.social'],
-    ['123456789012345678', 'my-custom-pds-with-long-name.social'],
-  ]
-  it.each(valid)(`should be valid: %s.%s`, (handle, service) => {
-    const result = validateServiceHandle(handle, service)
-    expect(result.overall).toEqual(true)
-  })
-
-  const invalid = [
-    ['al', 'bsky.social', 'frontLength'],
-    ['-alice', 'bsky.social', 'hyphenStartOrEnd'],
-    ['alice-', 'bsky.social', 'hyphenStartOrEnd'],
-    ['%%%', 'bsky.social', 'handleChars'],
-    ['1234567890123456789', 'bsky.social', 'frontLength'],
-    [
-      '1234567890123456789',
-      'my-custom-pds-with-long-name.social',
-      'frontLength',
-    ],
-    ['al', 'my-custom-pds-with-long-name.social', 'frontLength'],
-    ['a'.repeat(300), 'toolong.com', 'totalLength'],
-  ] satisfies [string, string, keyof IsValidHandle][]
-  it.each(invalid)(
-    `should be invalid: %s.%s due to %s`,
-    (handle, service, expectedError) => {
-      const result = validateServiceHandle(handle, service)
-      expect(result.overall).toEqual(false)
-      expect(result[expectedError]).toEqual(false)
-    },
-  )
-})
@@ -50,6 +50,7 @@ module.exports = function (config) {
      runtimeVersion: {
        policy: 'appVersion',
      },
+      orientation: 'portrait',
      icon: './assets/app-icons/ios_icon_default_light.png',
      userInterfaceStyle: 'automatic',
      primaryColor: '#1083fe',
@@ -75,35 +76,30 @@ module.exports = function (config) {
            'an',
            'ast',
            'ca',
-            'da',
            'de',
-            'el',
            'es',
-            'eu',
            'fi',
            'fr',
            'ga',
            'gl',
            'hi',
            'hu',
-            'ia',
            'id',
            'it',
            'ja',
            'km',
            'ko',
-            'ne',
            'nl',
+            'np',
            'pl',
            'pt-BR',
            'ro',
            'ru',
-            'sv',
            'th',
            'tr',
            'uk',
            'vi',
-            'yue',
+            'yue-Hant',
            'zh-Hans',
            'zh-Hant',
          ],
@@ -195,7 +191,6 @@ module.exports = function (config) {
        channel: UPDATES_CHANNEL,
      },
      plugins: [
-        'expo-video',
        'expo-localization',
        USE_SENTRY && [
          '@sentry/react-native/expo',
@@ -230,19 +225,14 @@ module.exports = function (config) {
          },
        ],
        'react-native-compressor',
-        [
-          '@bitdrift/react-native',
-          {
-            networkInstrumentation: true,
-          },
-        ],
+        // TODO: Reenable when the build issue is fixed.
+        // '@bitdrift/react-native',
        './plugins/starterPackAppClipExtension/withStarterPackAppClip.js',
        './plugins/withAndroidManifestPlugin.js',
        './plugins/withAndroidManifestFCMIconPlugin.js',
        './plugins/withAndroidStylesAccentColorPlugin.js',
        './plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js',
        './plugins/withAndroidNoJitpackPlugin.js',
-        './plugins/withNoBundleCompression.js',
        './plugins/shareExtension/withShareExtensions.js',
        './plugins/notificationsExtension/withNotificationsExtension.js',
        './plugins/withAppDelegateReferrer.js',
@@ -356,17 +346,6 @@ module.exports = function (config) {
            },
          },
        ],
-        ['expo-screen-orientation', {initialOrientation: 'PORTRAIT_UP'}],
-        [
-          'react-native-vision-camera',
-          {
-            enableLocation: false,
-            cameraPermissionText: 'Bluesky needs access to your camera.',
-            enableMicrophonePermission: true,
-            microphonePermissionText:
-              'Bluesky needs access to your microphone.',
-          },
-        ],
      ].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="M11.293 4.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L12 6.414 8.707 9.707a1 1 0 0 1-1.414-1.414l4-4Zm-4 10a1 1 0 0 1 1.414 0L12 17.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7 2a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V3a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1ZM4 9a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2h.5a3.5 3.5 0 1 1 0 7H18v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9Zm12 0H6v11h10V9Zm2 5h.5a1.5 1.5 0 0 0 0-3H18v3Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.5 4.999Zm0 0a.1.1 0 0 1-.016.024.2.2 0 0 1-.152.043q.086.014.168.032V7.5a1 1 0 0 1-.33.742c-.543.49-.917 1.176-1.23 2.036a1 1 0 0 1-.94.657H3V14h1a1 1 0 0 1 .866.5c.436.754.879 1.195 1.637 1.636A1 1 0 0 1 7 17v2h2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2h2v-2.537a1 1 0 0 1 .332-.744A4.98 4.98 0 0 0 19 11.999 5 5 0 0 0 14 7H9.474a1 1 0 0 1-.893-.55v-.001l-.001-.002-.005-.008L9.474 6l-.9.438h.001v.002l.002.001.001.003.002.003v.003a2.6 2.6 0 0 0-.443-.538c-.319-.298-.839-.648-1.637-.814V5Zm2.082 1.452ZM9.5 4.447c.211.196.379.387.508.553H14a7 7 0 0 1 6.72 8.96 1.003 1.003 0 0 0 1.146-1.46 1 1 0 1 1 1.731-1 3 3 0 0 1-3.714 4.286A7 7 0 0 1 19 16.888V19a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2h-2a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-1.45A5.8 5.8 0 0 1 3.448 16H3a2 2 0 0 1-2-2v-3.065a2 2 0 0 1 2-2h.324c.286-.649.657-1.291 1.176-1.852V5c0-1.047.89-2.12 2.161-1.907 1.33.223 2.248.805 2.839 1.354ZM8.25 12a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z" clip-rule="evenodd"/></svg>
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4c0-1.012.894-2.187 2.237-1.846a5.002 5.002 0 0 1 3.218 7.119 4 4 0 0 1 2.345 4.976A3.501 3.501 0 0 1 18.5 21h-13a3.5 3.5 0 0 1-1.3-6.75 4 4 0 0 1 2.052-4.848A4 4 0 0 1 10 4h2.001Zm-4.187 7.009A2 2 0 0 0 6 13c0 .366.098.706.271 1H12a1 1 0 1 1 0 2H5.5a1.5 1.5 0 0 0 0 3h13a1.5 1.5 0 1 0 0-3H17a1 1 0 1 1 0-2h.729A1.96 1.96 0 0 0 18 13a2 2 0 0 0-2-2h-2a1 1 0 1 1 0-2h1.236a3.002 3.002 0 0 0-1.243-4.832A2 2 0 0 1 12 6h-2a2 2 0 0 0-1.728 3.009H9a1 1 0 0 1 0 2H7.813Z" clip-rule="evenodd"/></svg>
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 0-1 1v4.17a1 1 0 0 0 .667.944 2.001 2.001 0 0 1 0 3.772A1 1 0 0 0 2 14.83V19a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-4.17a1 1 0 0 0-.667-.944 2.001 2.001 0 0 1 0-3.772A1 1 0 0 0 22 9.17V5a1 1 0 0 0-1-1H3Zm1 4.535V6h16v2.535A4 4 0 0 0 18 12c0 1.482.805 2.773 2 3.465V18H4v-2.535A4 4 0 0 0 6 12a4 4 0 0 0-2-3.465ZM15 15a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-1-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm1-5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z" clip-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" stroke="#000" stroke-linejoin="round" d="M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.5 3.5 0 0 1 5.5 12a3.5 3.5 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.5 3.5 0 0 1 18.5 12a3.5 3.5 0 0 1 1.75-3.032.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z"/></svg>
@@ -4,7 +4,6 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bluesky Embed</title>
-  <link rel="preconnect" href="https://public.api.bsky.app">
  <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
@@ -4,7 +4,6 @@
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bluesky Embed</title>
-  <link rel="preconnect" href="https://public.api.bsky.app">
  <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/static/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/static/favicon-16x16.png">
@@ -24,7 +24,7 @@ Then build and copy over the big 'ol `bundle.web.js` file:

 ### Golang Daemon

-Install golang. We generally develop against the current stable release of the language, as declared in `go.mod`.
+Install golang. We are generally using v1.22+.

 In this directory (`bskyweb/`):

@@ -214,21 +214,15 @@ func serve(cctx *cli.Context) error {
 	e.GET("/iframe/youtube.html", echo.WrapHandler(staticHandler))
 	e.GET("/static/*", echo.WrapHandler(http.StripPrefix("/static/", staticHandler)), func(next echo.HandlerFunc) echo.HandlerFunc {
 		return func(c echo.Context) error {
-			c.Response().Before(func() {
-				if c.Response().Status >= 300 {
-					return
-				}
+			path := c.Request().URL.Path
+			maxAge := 1 * (60 * 60) // default is 1 hour

-				path := c.Request().URL.Path
-				maxAge := 1 * (60 * 60) // default is 1 hour
+			// all assets in /static/js, /static/css, /static/media are content-hashed and can be cached for a long time
+			if strings.HasPrefix(path, "/static/js/") || strings.HasPrefix(path, "/static/css/") || strings.HasPrefix(path, "/static/media/") {
+				maxAge = 365 * (60 * 60 * 24) // 1 year
+			}

-				// all assets in /static/js, /static/css, /static/media are content-hashed and can be cached for a long time
-				if strings.HasPrefix(path, "/static/js/") || strings.HasPrefix(path, "/static/css/") || strings.HasPrefix(path, "/static/media/") {
-					maxAge = 365 * (60 * 60 * 24) // 1 year
-				}
-
-				c.Response().Header().Set("Cache-Control", fmt.Sprintf("public, max-age=%d", maxAge))
-			})
+			c.Response().Header().Set("Cache-Control", fmt.Sprintf("public, max-age=%d", maxAge))
 			return next(c)
 		}
 	})
@@ -283,7 +277,6 @@ func serve(cctx *cli.Context) error {
 	e.GET("/profile/:handleOrDID/follows", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/followers", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/known-followers", server.WebGeneric)
-	e.GET("/profile/:handleOrDID/search", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/lists/:rkey", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/feed/:rkey", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/feed/:rkey/liked-by", server.WebGeneric)
@@ -1,8 +1,8 @@
 module github.com/bluesky-social/social-app/bskyweb

-go 1.23
+go 1.22

-toolchain go1.23.4
+toolchain go1.22.4

 require (
 	github.com/bluesky-social/indigo v0.0.0-20240624223826-fd66f93ce141
@@ -8,11 +8,12 @@
    Preconnect to essential domains
  -->
  <link rel="preconnect" href="https://bsky.social">
+  <link rel="preconnect" href="https://bsky.network">
  <title>{%- block head_title -%}Bluesky{%- endblock -%}</title>

  <!-- Hello Humans! API docs at https://atproto.com -->

-  <link rel="preload" as="font" type="font/woff2" href="{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2" crossorigin>
+  <link rel="preload" as="font" type="font/ttf" href="{{ staticCDNHost }}/static/media/InterVariable.c504db5c06caaf7cdfba.woff2">

  <style>
    /**
@@ -1,20 +0,0 @@
-{
-  "project_id": "664276",
-  "base_path": ".",
-  "preserve_hierarchy": true,
-  "files": [
-    {
-      "source": "/src/locale/locales/en/messages.po",
-      "translation": "/src/locale/locales/%two_letters_code%/messages.po",
-      "languages_mapping": {
-          "two_letters_code": {
-            "pt-BR": "pt-BR",
-            "en-GB": "en-GB",
-            "zh-CN": "zh-CN",
-            "zh-TW": "zh-TW",
-            "zh-HK": "zh-HK"
-          }
-      }
-    }
-  ]
-}
@@ -3,64 +3,9 @@
 We want the official Bluesky app to be supported in as many languages as possible. If you want to help us translate the app, please open a PR or issue on the [Bluesky app repo on GitHub](https://github.com/bluesky-social/social-app)

 ## Tools
-
- We use Lingui to implement translations. You can find the documentation [here](https://lingui.dev/).
- We use Crowdin to manage translations.
-  - Bluesky Crowdin: https://crowdin.com/project/bluesky-social
-  - Introduction to Crowdin: https://support.crowdin.com/for-translators/
-
-## Translators
-
-Much of the app is translated by community contributions. (We <3 our translators!) If you want to participate in the translation of the app, read this section.
-
-### Using Crowdin
-
-[Crowdin](https://crowdin.com/project/bluesky-social) is our primary tool for managing translations. There are two roles:
-
- **Proof-readers**. Can create new translations and approve submitted translations.
- **Translators**. Can create new translations.
-
-All translations must be approved by proof-readers before they are accepted into the app.
-
-### Using other platforms
-
-You may contribute PRs separately from Crowdin, however we strongly recommend using Crowdin to avoid conflicts.
-
-### Code of conduct on Crowdin
-
-Please treat everyone with respect. Proof-readers are given final say on translations. Translators who frequently come into conflict with other translators, or who contribute noticably incorrect translations, will have their membership to the Crowdin project revoked.
-
-### Adding a new language
-
-Create a new [Crowdin discussion](https://crowdin.com/project/bluesky-social/discussions) or [GitHub issue](https://github.com/bluesky-social/social-app/issues) requesting the new language be added to the project.
-
-Please only request a new language when you are certain you will be able to contribute a substantive portion of translations for the language.
-
-## Maintainers
-
-Install the [Crowdin CLI](https://crowdin.github.io/crowdin-cli/). You will need to [configure your API token](https://crowdin.github.io/crowdin-cli/configuration) to access the project.
-
-### English source-file sync with Crowdin
-
-Every night, a GitHub action will run `yarn intl:extract` to update the english `messages.po` file. This will be automatically synced with Crowdin. Crowdin should notify all subscribed users of new translations.
-
-### Release process
-
-1. Pull main and create a branch.
-1. Run `yarn intl:pull` to fetch all translation updates from Crowdin.
-1. Create a PR, ensure the translations all look correct, and merge.
-1. If needed:
-  1. Merge all approved translation PRs (contributions from outside crowdin).
-  1. Run `yarn intl:push` to sync Crowdin with the state of the repo.
-
-### Testing the translations in Crowdin
-
-You can run `yarn intl:pull` to pull the currently-approved translations from Crowdin.
-
-## Developers
+We are using Lingui to manage translations. You can find the documentation [here](https://lingui.dev/).

 ### Adding new strings
-
 When adding a new string, do it as follows:
 ```jsx
 // Before
@@ -116,7 +61,6 @@ So the workflow is as follows:
 6. Enjoy translated app!

 ### Common pitfalls
-
 These pitfalls are memoization pitfalls that will cause the components to not re-render when the locale is changed -- causing stale translations to be shown.

 ```jsx
@@ -167,3 +111,9 @@ export function Welcome() {
  return <div>{welcome}</div>;
 }
 ```
+
+
+### Credits
+Please check each individual `messages.po` file for the credits of the translators. We are very grateful for their help! 
+
+If you would like to translate the Bluesky app into your language, please open a PR or issue on this repo.
@@ -5,31 +5,26 @@ module.exports = {
    'an',
    'ast',
    'ca',
-    'da',
    'de',
-    'el',
    'en-GB',
    'es',
-    'eu',
    'fi',
    'fr',
    'ga',
    'gl',
    'hi',
    'hu',
-    'ia',
    'id',
    'it',
    'ja',
    'km',
    'ko',
-    'ne',
    'nl',
+    'np',
    'pl',
    'pt-BR',
    'ro',
    'ru',
-    'sv',
    'th',
    'tr',
    'uk',
@@ -1,11 +1,11 @@
 {
  "name": "bsky.app",
-  "version": "1.98.0",
+  "version": "1.96.1",
  "private": true,
  "engines": {
    "node": ">=20"
  },
-  "packageManager": "yarn@1.22.22",
+  "packageManager": "yarn@1.22.19",
  "scripts": {
    "prepare": "is-ci || husky install",
    "postinstall": "patch-package && yarn intl:compile",
@@ -43,10 +43,8 @@
    "perf:test:results": "NODE_ENV=test flashlight report .perf/results.json",
    "perf:measure": "NODE_ENV=test flashlight measure",
    "intl:build": "yarn intl:extract && yarn intl:compile",
-    "intl:extract": "lingui extract --clean --locale en",
+    "intl:extract": "lingui extract",
    "intl:compile": "lingui compile",
-    "intl:pull": "crowdin download translations --verbose -b main",
-    "intl:push": "crowdin push translations --verbose -b main",
    "nuke": "rm -rf ./node_modules && rm -rf ./ios && rm -rf ./android",
    "update-extensions": "bash scripts/updateExtensions.sh",
    "export": "npx expo export",
@@ -56,8 +54,7 @@
    "icons:optimize": "svgo -f ./assets/icons"
  },
  "dependencies": {
-    "@atproto/api": "^0.13.35",
-    "@bitdrift/react-native": "^0.6.8",
+    "@atproto/api": "^0.13.21",
    "@braintree/sanitize-url": "^6.0.2",
    "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
    "@emoji-mart/react": "^1.1.1",
@@ -72,7 +69,7 @@
    "@fortawesome/free-regular-svg-icons": "^6.1.1",
    "@fortawesome/free-solid-svg-icons": "^6.1.1",
    "@fortawesome/react-native-fontawesome": "^0.3.2",
-    "@haileyok/bluesky-video": "0.2.6",
+    "@haileyok/bluesky-video": "0.2.4",
    "@ipld/dag-cbor": "^9.2.0",
    "@lingui/react": "^4.14.1",
    "@mattermost/react-native-paste-input": "^0.7.1",
@@ -123,7 +120,7 @@
    "eventemitter3": "^5.0.1",
    "expo": "~52.0.19",
    "expo-application": "^6.0.1",
-    "expo-blur": "^14.0.3",
+    "expo-blur": "^14.0.1",
    "expo-build-properties": "^0.13.1",
    "expo-camera": "~16.0.7",
    "expo-clipboard": "^7.0.0",
@@ -141,14 +138,12 @@
    "expo-media-library": "~17.0.3",
    "expo-navigation-bar": "~4.0.4",
    "expo-notifications": "~0.29.11",
-    "expo-screen-orientation": "^8.0.2",
    "expo-sharing": "^13.0.0",
    "expo-splash-screen": "~0.29.18",
    "expo-status-bar": "~2.0.0",
    "expo-system-ui": "^4.0.4",
    "expo-task-manager": "~12.0.3",
    "expo-updates": "~0.26.10",
-    "expo-video": "^2.0.5",
    "expo-web-browser": "~14.0.1",
    "fast-text-encoding": "^1.0.6",
    "history": "^5.3.0",
@@ -172,17 +167,17 @@
    "react-dom": "^18.2.0",
    "react-image-crop": "^11.0.7",
    "react-keyed-flatten-children": "^3.0.0",
-    "react-native": "0.76.6",
+    "react-native": "0.76.3",
    "react-native-compressor": "1.10.3",
    "react-native-date-picker": "^5.0.7",
-    "react-native-drawer-layout": "^4.1.1",
+    "react-native-drawer-layout": "^4.0.4",
    "react-native-gesture-handler": "2.20.2",
    "react-native-get-random-values": "~1.11.0",
    "react-native-image-crop-picker": "^0.41.6",
    "react-native-ios-context-menu": "^1.15.3",
    "react-native-keyboard-controller": "^1.14.5",
    "react-native-mmkv": "^2.12.2",
-    "react-native-pager-view": "6.7.0",
+    "react-native-pager-view": "6.6.1",
    "react-native-picker-select": "^9.3.1",
    "react-native-progress": "bluesky-social/react-native-progress",
    "react-native-qrcode-styled": "^0.3.3",
@@ -195,7 +190,6 @@
    "react-native-url-polyfill": "^1.3.0",
    "react-native-uuid": "^2.0.2",
    "react-native-view-shot": "^4.0.3",
-    "react-native-vision-camera": "^4.6.3",
    "react-native-web": "~0.19.13",
    "react-native-web-webview": "^1.0.2",
    "react-native-webview": "13.12.3",
@@ -1,157 +1,16 @@
 diff --git a/node_modules/@mattermost/react-native-paste-input/ios/PasteInputView.m b/node_modules/@mattermost/react-native-paste-input/ios/PasteInputView.m
-index e916023..5049c33 100644
+index e916023..0564d97 100644
 --- a/node_modules/@mattermost/react-native-paste-input/ios/PasteInputView.m
 +++ b/node_modules/@mattermost/react-native-paste-input/ios/PasteInputView.m
-@@ -4,6 +4,7 @@
- //
- //  Created by Elias Nahum on 04-11-20.
- //  Copyright © 2020 Facebook. All rights reserved.
-+//  Updated to remove parent’s default text view
- //
- 
- #import "PasteInputView.h"
-@@ -12,49 +13,78 @@
- 
- @implementation PasteInputView
- {
-    PasteInputTextView *_backedTextInputView;
-+  // We'll store the custom text view in this ivar
-+  PasteInputTextView *_customBackedTextView;
- }
- 
- - (instancetype)initWithBridge:(RCTBridge *)bridge
- {
-+  // Must call the super’s designated initializer
-   if (self = [super initWithBridge:bridge]) {
-    _backedTextInputView = [[PasteInputTextView alloc] initWithFrame:self.bounds];
-    _backedTextInputView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
-    _backedTextInputView.textInputDelegate = self;
-+    // 1. The parent (RCTMultilineTextInputView) has already created
-+    //    its own _backedTextInputView = [RCTUITextView new] in super init.
-+    //    We can remove that subview:
- 
-    [self addSubview:_backedTextInputView];
-  }
-+    id<RCTBackedTextInputViewProtocol> parentInputView = super.backedTextInputView;
-+    if ([parentInputView isKindOfClass:[UIView class]]) {
-+      UIView *parentSubview = (UIView *)parentInputView;
-+      if (parentSubview.superview == self) {
-+        [parentSubview removeFromSuperview];
-+      }
-+    }
- 
-+    // 2. Now create our custom PasteInputTextView
-+    _customBackedTextView = [[PasteInputTextView alloc] initWithFrame:self.bounds];
-+    _customBackedTextView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
-+    _customBackedTextView.textInputDelegate = self;
-+
-+    // Optional: disable inline predictions for iOS 17+
+@@ -22,6 +22,11 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
+     _backedTextInputView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+     _backedTextInputView.textInputDelegate = self;
+
+    // Disable inline predictions to prevent jank in the composer
 +    if (@available(iOS 17.0, *)) {
-+      _customBackedTextView.inlinePredictionType = UITextInlinePredictionTypeNo;
+      _backedTextInputView.inlinePredictionType = UITextInlinePredictionTypeNo;
 +    }
 +
-+    // 3. Add your custom text view as the only subview
-+    [self addSubview:_customBackedTextView];
-+  }
-   return self;
- }
- 
-+/**
-+ * Override the parent's accessor so that anywhere in RN that calls
-+ * `self.backedTextInputView` will get the custom PasteInputTextView.
-+ */
- - (id<RCTBackedTextInputViewProtocol>)backedTextInputView
- {
-  return _backedTextInputView;
-+  return _customBackedTextView;
- }
- 
-- (void)setDisableCopyPaste:(BOOL)disableCopyPaste {
-    _backedTextInputView.disableCopyPaste = disableCopyPaste;
-+#pragma mark - Setters for React Props
-+
-+- (void)setDisableCopyPaste:(BOOL)disableCopyPaste
-+{
-+  _customBackedTextView.disableCopyPaste = disableCopyPaste;
- }
- 
-- (void)setOnPaste:(RCTDirectEventBlock)onPaste {
-    _backedTextInputView.onPaste = onPaste;
-+- (void)setOnPaste:(RCTDirectEventBlock)onPaste
-+{
-+  _customBackedTextView.onPaste = onPaste;
- }
- 
-- (void)setSmartPunctuation:(NSString *)smartPunctuation {
-    if ([smartPunctuation isEqualToString:@"enable"]) {
-        [_backedTextInputView setSmartDashesType:UITextSmartDashesTypeYes];
-        [_backedTextInputView setSmartQuotesType:UITextSmartQuotesTypeYes];
-        [_backedTextInputView setSmartInsertDeleteType:UITextSmartInsertDeleteTypeYes];
-    } else if ([smartPunctuation isEqualToString:@"disable"]) {
-        [_backedTextInputView setSmartDashesType:UITextSmartDashesTypeNo];
-        [_backedTextInputView setSmartQuotesType:UITextSmartQuotesTypeNo];
-        [_backedTextInputView setSmartInsertDeleteType:UITextSmartInsertDeleteTypeNo];
-    } else {
-        [_backedTextInputView setSmartDashesType:UITextSmartDashesTypeDefault];
-        [_backedTextInputView setSmartQuotesType:UITextSmartQuotesTypeDefault];
-        [_backedTextInputView setSmartInsertDeleteType:UITextSmartInsertDeleteTypeDefault];
-    }
-+- (void)setSmartPunctuation:(NSString *)smartPunctuation
-+{
-+  if ([smartPunctuation isEqualToString:@"enable"]) {
-+    [_customBackedTextView setSmartDashesType:UITextSmartDashesTypeYes];
-+    [_customBackedTextView setSmartQuotesType:UITextSmartQuotesTypeYes];
-+    [_customBackedTextView setSmartInsertDeleteType:UITextSmartInsertDeleteTypeYes];
-+  } else if ([smartPunctuation isEqualToString:@"disable"]) {
-+    [_customBackedTextView setSmartDashesType:UITextSmartDashesTypeNo];
-+    [_customBackedTextView setSmartQuotesType:UITextSmartQuotesTypeNo];
-+    [_customBackedTextView setSmartInsertDeleteType:UITextSmartInsertDeleteTypeNo];
-+  } else {
-+    [_customBackedTextView setSmartDashesType:UITextSmartDashesTypeDefault];
-+    [_customBackedTextView setSmartQuotesType:UITextSmartQuotesTypeDefault];
-+    [_customBackedTextView setSmartInsertDeleteType:UITextSmartInsertDeleteTypeDefault];
-+  }
- }
- 
- #pragma mark - UIScrollViewDelegate
-@@ -62,7 +92,6 @@
- - (void)scrollViewDidScroll:(UIScrollView *)scrollView
- {
-   RCTDirectEventBlock onScroll = self.onScroll;
-
-   if (onScroll) {
-     CGPoint contentOffset = scrollView.contentOffset;
-     CGSize contentSize = scrollView.contentSize;
-@@ -71,22 +100,22 @@
- 
-     onScroll(@{
-       @"contentOffset": @{
-        @"x": @(contentOffset.x),
-        @"y": @(contentOffset.y)
-+          @"x": @(contentOffset.x),
-+          @"y": @(contentOffset.y)
-       },
-       @"contentInset": @{
-        @"top": @(contentInset.top),
-        @"left": @(contentInset.left),
-        @"bottom": @(contentInset.bottom),
-        @"right": @(contentInset.right)
-+          @"top": @(contentInset.top),
-+          @"left": @(contentInset.left),
-+          @"bottom": @(contentInset.bottom),
-+          @"right": @(contentInset.right)
-       },
-       @"contentSize": @{
-        @"width": @(contentSize.width),
-        @"height": @(contentSize.height)
-+          @"width": @(contentSize.width),
-+          @"height": @(contentSize.height)
-       },
-       @"layoutMeasurement": @{
-        @"width": @(size.width),
-        @"height": @(size.height)
-+          @"width": @(size.width),
-+          @"height": @(size.height)
-       },
-       @"zoomScale": @(scrollView.zoomScale ?: 1),
-     });
+     [self addSubview:_backedTextInputView];
+   }
+
@@ -1,19 +0,0 @@
-diff --git a/node_modules/expo-media-library/android/src/main/java/expo/modules/medialibrary/MediaLibraryModule.kt b/node_modules/expo-media-library/android/src/main/java/expo/modules/medialibrary/MediaLibraryModule.kt
-index b928b8f..7175cf6 100644
--- a/node_modules/expo-media-library/android/src/main/java/expo/modules/medialibrary/MediaLibraryModule.kt
-+++ b/node_modules/expo-media-library/android/src/main/java/expo/modules/medialibrary/MediaLibraryModule.kt
-@@ -99,12 +99,12 @@ class MediaLibraryModule : Module() {
-     }
- 
-     AsyncFunction("createAssetAsync") { localUri: String, promise: Promise ->
-      throwUnlessPermissionsGranted {
-+      //throwUnlessPermissionsGranted {
-         withModuleScope(promise) {
-           CreateAsset(context, localUri, promise)
-             .execute()
-         }
-      }
-+      //}
-     }
- 
-     AsyncFunction("addAssetsToAlbumAsync") { assetsId: List<String>, albumId: String, copyToAlbum: Boolean, promise: Promise ->
@@ -0,0 +1,876 @@
+diff --git a/node_modules/react-native-drawer-layout/lib/commonjs/index.js b/node_modules/react-native-drawer-layout/lib/commonjs/index.js
+index 3dce76e..6c4b3e5 100644
+--- a/node_modules/react-native-drawer-layout/lib/commonjs/index.js
+++ b/node_modules/react-native-drawer-layout/lib/commonjs/index.js
+@@ -9,6 +9,12 @@ Object.defineProperty(exports, "Drawer", {
+     return _Drawer.Drawer;
+   }
+ });
+Object.defineProperty(exports, "DrawerGestureContext", {
+  enumerable: true,
+  get: function () {
+    return _DrawerGestureContext.DrawerGestureContext;
+  }
+});
+ Object.defineProperty(exports, "DrawerProgressContext", {
+   enumerable: true,
+   get: function () {
+@@ -21,6 +27,7 @@ Object.defineProperty(exports, "useDrawerProgress", {
+     return _useDrawerProgress.useDrawerProgress;
+   }
+ });
+var _DrawerGestureContext = require("./utils/DrawerGestureContext.js");
+ var _DrawerProgressContext = require("./utils/DrawerProgressContext.js");
+ var _useDrawerProgress = require("./utils/useDrawerProgress.js");
+ var _Drawer = require("./views/Drawer");
+diff --git a/node_modules/react-native-drawer-layout/lib/commonjs/utils/DrawerGestureContext.js b/node_modules/react-native-drawer-layout/lib/commonjs/utils/DrawerGestureContext.js
+new file mode 100644
+index 0000000..de6d793
+--- /dev/null
+++ b/node_modules/react-native-drawer-layout/lib/commonjs/utils/DrawerGestureContext.js
+@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DrawerGestureContext = void 0;
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const DrawerGestureContext = exports.DrawerGestureContext = /*#__PURE__*/React.createContext(undefined);
+//# sourceMappingURL=DrawerGestureContext.js.map
+\ No newline at end of file
+diff --git a/node_modules/react-native-drawer-layout/lib/commonjs/views/Drawer.native.js b/node_modules/react-native-drawer-layout/lib/commonjs/views/Drawer.native.js
+index fd65ab8..86a9a6a 100644
+--- a/node_modules/react-native-drawer-layout/lib/commonjs/views/Drawer.native.js
+++ b/node_modules/react-native-drawer-layout/lib/commonjs/views/Drawer.native.js
+@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
+ var _reactNative = require("react-native");
+ var _reactNativeReanimated = _interopRequireWildcard(require("react-native-reanimated"));
+ var _useLatestCallback = _interopRequireDefault(require("use-latest-callback"));
+var _DrawerGestureContext = require("../utils/DrawerGestureContext.js");
+ var _DrawerProgressContext = require("../utils/DrawerProgressContext.js");
+ var _getDrawerWidth = require("../utils/getDrawerWidth.js");
+ var _GestureHandler = require("./GestureHandler");
+@@ -79,38 +80,38 @@ function Drawer({
+     return () => hideStatusBar(false);
+   }, [isOpen, hideStatusBarOnOpen, statusBarAnimation, hideStatusBar]);
+   const interactionHandleRef = React.useRef(null);
+-  const startInteraction = () => {
+  const startInteraction = React.useCallback(() => {
+     interactionHandleRef.current = _reactNative.InteractionManager.createInteractionHandle();
+-  };
+-  const endInteraction = () => {
+  }, []);
+  const endInteraction = React.useCallback(() => {
+     if (interactionHandleRef.current != null) {
+       _reactNative.InteractionManager.clearInteractionHandle(interactionHandleRef.current);
+       interactionHandleRef.current = null;
+     }
+-  };
+-  const hideKeyboard = () => {
+  }, []);
+  const hideKeyboard = React.useCallback(() => {
+     if (keyboardDismissMode === 'on-drag') {
+       _reactNative.Keyboard.dismiss();
+     }
+-  };
+-  const onGestureBegin = () => {
+  }, [keyboardDismissMode]);
+  const onGestureBegin = React.useCallback(() => {
+     onGestureStart?.();
+     startInteraction();
+     hideKeyboard();
+     hideStatusBar(true);
+-  };
+-  const onGestureFinish = () => {
+  }, [onGestureStart, startInteraction, hideKeyboard, hideStatusBar]);
+  const onGestureFinish = React.useCallback(() => {
+     onGestureEnd?.();
+     endInteraction();
+-  };
+-  const onGestureAbort = () => {
+  }, [onGestureEnd, endInteraction]);
+  const onGestureAbort = React.useCallback(() => {
+     onGestureCancel?.();
+     endInteraction();
+-  };
+  }, [onGestureCancel, endInteraction]);
+ 
+   // FIXME: Currently hitSlop is broken when on Android when drawer is on right
+   // https://github.com/software-mansion/react-native-gesture-handler/issues/569
+-  const hitSlop = isRight ?
+  const hitSlop = React.useMemo(() => isRight ?
+   // Extend hitSlop to the side of the screen when drawer is closed
+   // This lets the user drag the drawer from the side of the screen
+   {
+@@ -119,7 +120,7 @@ function Drawer({
+   } : {
+     left: 0,
+     width: isOpen ? undefined : swipeEdgeWidth
+-  };
+  }, [isRight, isOpen, swipeEdgeWidth]);
+   const touchStartX = (0, _reactNativeReanimated.useSharedValue)(0);
+   const touchX = (0, _reactNativeReanimated.useSharedValue)(0);
+   const translationX = (0, _reactNativeReanimated.useSharedValue)(getDrawerTranslationX(open));
+@@ -158,40 +159,43 @@ function Drawer({
+   }, [getDrawerTranslationX, handleAnimationEnd, handleAnimationStart, onClose, onOpen, touchStartX, touchX, translationX]);
+   React.useEffect(() => toggleDrawer(open), [open, toggleDrawer]);
+   const startX = (0, _reactNativeReanimated.useSharedValue)(0);
+-  let pan = _GestureHandler.Gesture?.Pan().onBegin(event => {
+-    'worklet';
+  const pan = React.useMemo(() => {
+    let panGesture = _GestureHandler.Gesture?.Pan().onBegin(event => {
+      'worklet';
+ 
+-    startX.value = translationX.value;
+-    gestureState.value = event.state;
+-    touchStartX.value = event.x;
+-  }).onStart(() => {
+-    'worklet';
+      startX.value = translationX.value;
+      gestureState.value = event.state;
+      touchStartX.value = event.x;
+    }).onStart(() => {
+      'worklet';
+ 
+-    (0, _reactNativeReanimated.runOnJS)(onGestureBegin)();
+-  }).onChange(event => {
+-    'worklet';
+      (0, _reactNativeReanimated.runOnJS)(onGestureBegin)();
+    }).onChange(event => {
+      'worklet';
+ 
+-    touchX.value = event.x;
+-    translationX.value = startX.value + event.translationX;
+-    gestureState.value = event.state;
+-  }).onEnd((event, success) => {
+-    'worklet';
+      touchX.value = event.x;
+      translationX.value = startX.value + event.translationX;
+      gestureState.value = event.state;
+    }).onEnd((event, success) => {
+      'worklet';
+ 
+-    gestureState.value = event.state;
+-    if (!success) {
+-      (0, _reactNativeReanimated.runOnJS)(onGestureAbort)();
+      gestureState.value = event.state;
+      if (!success) {
+        (0, _reactNativeReanimated.runOnJS)(onGestureAbort)();
+      }
+      const nextOpen = Math.abs(event.translationX) > SWIPE_MIN_OFFSET && Math.abs(event.translationX) > swipeMinVelocity || Math.abs(event.translationX) > swipeMinDistance ? drawerPosition === 'left' ?
+      // If swiped to right, open the drawer, otherwise close it
+      (event.velocityX === 0 ? event.translationX : event.velocityX) > 0 :
+      // If swiped to left, open the drawer, otherwise close it
+      (event.velocityX === 0 ? event.translationX : event.velocityX) < 0 : open;
+      toggleDrawer(nextOpen, event.velocityX);
+      (0, _reactNativeReanimated.runOnJS)(onGestureFinish)();
+    }).activeOffsetX([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).failOffsetY([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).hitSlop(hitSlop).enabled(drawerType !== 'permanent' && swipeEnabled);
+    if (panGesture && configureGestureHandler) {
+      panGesture = configureGestureHandler(panGesture);
+     }
+-    const nextOpen = Math.abs(event.translationX) > SWIPE_MIN_OFFSET && Math.abs(event.translationX) > swipeMinVelocity || Math.abs(event.translationX) > swipeMinDistance ? drawerPosition === 'left' ?
+-    // If swiped to right, open the drawer, otherwise close it
+-    (event.velocityX === 0 ? event.translationX : event.velocityX) > 0 :
+-    // If swiped to left, open the drawer, otherwise close it
+-    (event.velocityX === 0 ? event.translationX : event.velocityX) < 0 : open;
+-    toggleDrawer(nextOpen, event.velocityX);
+-    (0, _reactNativeReanimated.runOnJS)(onGestureFinish)();
+-  }).activeOffsetX([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).failOffsetY([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).hitSlop(hitSlop).enabled(drawerType !== 'permanent' && swipeEnabled);
+-  if (pan && configureGestureHandler) {
+-    pan = configureGestureHandler(pan);
+-  }
+    return panGesture;
+  }, [configureGestureHandler, drawerPosition, drawerType, gestureState, hitSlop, onGestureBegin, onGestureAbort, onGestureFinish, open, startX, swipeEnabled, swipeMinDistance, swipeMinVelocity, toggleDrawer, touchStartX, touchX, translationX]);
+   const translateX = (0, _reactNativeReanimated.useDerivedValue)(() => {
+     // Comment stolen from react-native-gesture-handler/DrawerLayout
+     //
+@@ -254,35 +258,38 @@ function Drawer({
+     style: [styles.container, style],
+     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerProgressContext.DrawerProgressContext.Provider, {
+       value: progress,
+-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GestureHandler.GestureDetector, {
+-        gesture: pan,
+-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+-          style: [styles.main, {
+-            flexDirection: drawerType === 'permanent' ? isRight && direction === 'ltr' || !isRight && direction === 'rtl' ? 'row' : 'row-reverse' : 'row'
+-          }],
+-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+-            style: [styles.content, contentAnimatedStyle],
+-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+-              accessibilityElementsHidden: isOpen && drawerType !== 'permanent',
+-              importantForAccessibility: isOpen && drawerType !== 'permanent' ? 'no-hide-descendants' : 'auto',
+-              style: styles.content,
+-              children: children
+-            }), drawerType !== 'permanent' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.Overlay, {
+-              open: open,
+-              progress: progress,
+-              onPress: () => toggleDrawer(false),
+-              style: overlayStyle,
+-              accessibilityLabel: overlayAccessibilityLabel
+-            }) : null]
+-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+-            removeClippedSubviews: _reactNative.Platform.OS !== 'ios',
+-            style: [styles.drawer, {
+-              width: drawerWidth,
+-              position: drawerType === 'permanent' ? 'relative' : 'absolute',
+-              zIndex: drawerType === 'back' ? -1 : 0
+-            }, drawerAnimatedStyle, drawerStyle],
+-            children: renderDrawerContent()
+-          })]
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DrawerGestureContext.DrawerGestureContext.Provider, {
+        value: pan,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GestureHandler.GestureDetector, {
+          gesture: pan,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+            style: [styles.main, {
+              flexDirection: drawerType === 'permanent' ? isRight && direction === 'ltr' || !isRight && direction === 'rtl' ? 'row' : 'row-reverse' : 'row'
+            }],
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNativeReanimated.default.View, {
+              style: [styles.content, contentAnimatedStyle],
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+                accessibilityElementsHidden: isOpen && drawerType !== 'permanent',
+                importantForAccessibility: isOpen && drawerType !== 'permanent' ? 'no-hide-descendants' : 'auto',
+                style: styles.content,
+                children: children
+              }), drawerType !== 'permanent' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.Overlay, {
+                open: open,
+                progress: progress,
+                onPress: () => toggleDrawer(false),
+                style: overlayStyle,
+                accessibilityLabel: overlayAccessibilityLabel
+              }) : null]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeReanimated.default.View, {
+              removeClippedSubviews: _reactNative.Platform.OS !== 'ios',
+              style: [styles.drawer, {
+                width: drawerWidth,
+                position: drawerType === 'permanent' ? 'relative' : 'absolute',
+                zIndex: drawerType === 'back' ? -1 : 0
+              }, drawerAnimatedStyle, drawerStyle],
+              children: renderDrawerContent()
+            })]
+          })
+         })
+       })
+     })
+diff --git a/node_modules/react-native-drawer-layout/lib/module/index.js b/node_modules/react-native-drawer-layout/lib/module/index.js
+index a600e51..f08275c 100644
+--- a/node_modules/react-native-drawer-layout/lib/module/index.js
+++ b/node_modules/react-native-drawer-layout/lib/module/index.js
+@@ -1,5 +1,6 @@
+ "use strict";
+ 
+export { DrawerGestureContext } from "./utils/DrawerGestureContext.js";
+ export { DrawerProgressContext } from "./utils/DrawerProgressContext.js";
+ export { useDrawerProgress } from "./utils/useDrawerProgress.js";
+ export { Drawer } from './views/Drawer';
+diff --git a/node_modules/react-native-drawer-layout/lib/module/utils/DrawerGestureContext.js b/node_modules/react-native-drawer-layout/lib/module/utils/DrawerGestureContext.js
+new file mode 100644
+index 0000000..1adaa9c
+--- /dev/null
+++ b/node_modules/react-native-drawer-layout/lib/module/utils/DrawerGestureContext.js
+@@ -0,0 +1,5 @@
+"use strict";
+
+import * as React from 'react';
+export const DrawerGestureContext = /*#__PURE__*/React.createContext(undefined);
+//# sourceMappingURL=DrawerGestureContext.js.map
+\ No newline at end of file
+diff --git a/node_modules/react-native-drawer-layout/lib/module/views/Drawer.native.js b/node_modules/react-native-drawer-layout/lib/module/views/Drawer.native.js
+index 6d07126..981d9f8 100644
+--- a/node_modules/react-native-drawer-layout/lib/module/views/Drawer.native.js
+++ b/node_modules/react-native-drawer-layout/lib/module/views/Drawer.native.js
+@@ -4,6 +4,7 @@ import * as React from 'react';
+ import { I18nManager, InteractionManager, Keyboard, Platform, StatusBar, StyleSheet, useWindowDimensions, View } from 'react-native';
+ import Animated, { interpolate, ReduceMotion, runOnJS, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from 'react-native-reanimated';
+ import useLatestCallback from 'use-latest-callback';
+import { DrawerGestureContext } from "../utils/DrawerGestureContext.js";
+ import { DrawerProgressContext } from "../utils/DrawerProgressContext.js";
+ import { getDrawerWidth } from "../utils/getDrawerWidth.js";
+ import { Gesture, GestureDetector, GestureHandlerRootView, GestureState } from './GestureHandler';
+@@ -72,38 +73,38 @@ export function Drawer({
+     return () => hideStatusBar(false);
+   }, [isOpen, hideStatusBarOnOpen, statusBarAnimation, hideStatusBar]);
+   const interactionHandleRef = React.useRef(null);
+-  const startInteraction = () => {
+  const startInteraction = React.useCallback(() => {
+     interactionHandleRef.current = InteractionManager.createInteractionHandle();
+-  };
+-  const endInteraction = () => {
+  }, []);
+  const endInteraction = React.useCallback(() => {
+     if (interactionHandleRef.current != null) {
+       InteractionManager.clearInteractionHandle(interactionHandleRef.current);
+       interactionHandleRef.current = null;
+     }
+-  };
+-  const hideKeyboard = () => {
+  }, []);
+  const hideKeyboard = React.useCallback(() => {
+     if (keyboardDismissMode === 'on-drag') {
+       Keyboard.dismiss();
+     }
+-  };
+-  const onGestureBegin = () => {
+  }, [keyboardDismissMode]);
+  const onGestureBegin = React.useCallback(() => {
+     onGestureStart?.();
+     startInteraction();
+     hideKeyboard();
+     hideStatusBar(true);
+-  };
+-  const onGestureFinish = () => {
+  }, [onGestureStart, startInteraction, hideKeyboard, hideStatusBar]);
+  const onGestureFinish = React.useCallback(() => {
+     onGestureEnd?.();
+     endInteraction();
+-  };
+-  const onGestureAbort = () => {
+  }, [onGestureEnd, endInteraction]);
+  const onGestureAbort = React.useCallback(() => {
+     onGestureCancel?.();
+     endInteraction();
+-  };
+  }, [onGestureCancel, endInteraction]);
+ 
+   // FIXME: Currently hitSlop is broken when on Android when drawer is on right
+   // https://github.com/software-mansion/react-native-gesture-handler/issues/569
+-  const hitSlop = isRight ?
+  const hitSlop = React.useMemo(() => isRight ?
+   // Extend hitSlop to the side of the screen when drawer is closed
+   // This lets the user drag the drawer from the side of the screen
+   {
+@@ -112,7 +113,7 @@ export function Drawer({
+   } : {
+     left: 0,
+     width: isOpen ? undefined : swipeEdgeWidth
+-  };
+  }, [isRight, isOpen, swipeEdgeWidth]);
+   const touchStartX = useSharedValue(0);
+   const touchX = useSharedValue(0);
+   const translationX = useSharedValue(getDrawerTranslationX(open));
+@@ -151,40 +152,43 @@ export function Drawer({
+   }, [getDrawerTranslationX, handleAnimationEnd, handleAnimationStart, onClose, onOpen, touchStartX, touchX, translationX]);
+   React.useEffect(() => toggleDrawer(open), [open, toggleDrawer]);
+   const startX = useSharedValue(0);
+-  let pan = Gesture?.Pan().onBegin(event => {
+-    'worklet';
+  const pan = React.useMemo(() => {
+    let panGesture = Gesture?.Pan().onBegin(event => {
+      'worklet';
+ 
+-    startX.value = translationX.value;
+-    gestureState.value = event.state;
+-    touchStartX.value = event.x;
+-  }).onStart(() => {
+-    'worklet';
+      startX.value = translationX.value;
+      gestureState.value = event.state;
+      touchStartX.value = event.x;
+    }).onStart(() => {
+      'worklet';
+ 
+-    runOnJS(onGestureBegin)();
+-  }).onChange(event => {
+-    'worklet';
+      runOnJS(onGestureBegin)();
+    }).onChange(event => {
+      'worklet';
+ 
+-    touchX.value = event.x;
+-    translationX.value = startX.value + event.translationX;
+-    gestureState.value = event.state;
+-  }).onEnd((event, success) => {
+-    'worklet';
+      touchX.value = event.x;
+      translationX.value = startX.value + event.translationX;
+      gestureState.value = event.state;
+    }).onEnd((event, success) => {
+      'worklet';
+ 
+-    gestureState.value = event.state;
+-    if (!success) {
+-      runOnJS(onGestureAbort)();
+      gestureState.value = event.state;
+      if (!success) {
+        runOnJS(onGestureAbort)();
+      }
+      const nextOpen = Math.abs(event.translationX) > SWIPE_MIN_OFFSET && Math.abs(event.translationX) > swipeMinVelocity || Math.abs(event.translationX) > swipeMinDistance ? drawerPosition === 'left' ?
+      // If swiped to right, open the drawer, otherwise close it
+      (event.velocityX === 0 ? event.translationX : event.velocityX) > 0 :
+      // If swiped to left, open the drawer, otherwise close it
+      (event.velocityX === 0 ? event.translationX : event.velocityX) < 0 : open;
+      toggleDrawer(nextOpen, event.velocityX);
+      runOnJS(onGestureFinish)();
+    }).activeOffsetX([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).failOffsetY([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).hitSlop(hitSlop).enabled(drawerType !== 'permanent' && swipeEnabled);
+    if (panGesture && configureGestureHandler) {
+      panGesture = configureGestureHandler(panGesture);
+     }
+-    const nextOpen = Math.abs(event.translationX) > SWIPE_MIN_OFFSET && Math.abs(event.translationX) > swipeMinVelocity || Math.abs(event.translationX) > swipeMinDistance ? drawerPosition === 'left' ?
+-    // If swiped to right, open the drawer, otherwise close it
+-    (event.velocityX === 0 ? event.translationX : event.velocityX) > 0 :
+-    // If swiped to left, open the drawer, otherwise close it
+-    (event.velocityX === 0 ? event.translationX : event.velocityX) < 0 : open;
+-    toggleDrawer(nextOpen, event.velocityX);
+-    runOnJS(onGestureFinish)();
+-  }).activeOffsetX([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).failOffsetY([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET]).hitSlop(hitSlop).enabled(drawerType !== 'permanent' && swipeEnabled);
+-  if (pan && configureGestureHandler) {
+-    pan = configureGestureHandler(pan);
+-  }
+    return panGesture;
+  }, [configureGestureHandler, drawerPosition, drawerType, gestureState, hitSlop, onGestureBegin, onGestureAbort, onGestureFinish, open, startX, swipeEnabled, swipeMinDistance, swipeMinVelocity, toggleDrawer, touchStartX, touchX, translationX]);
+   const translateX = useDerivedValue(() => {
+     // Comment stolen from react-native-gesture-handler/DrawerLayout
+     //
+@@ -247,35 +251,38 @@ export function Drawer({
+     style: [styles.container, style],
+     children: /*#__PURE__*/_jsx(DrawerProgressContext.Provider, {
+       value: progress,
+-      children: /*#__PURE__*/_jsx(GestureDetector, {
+-        gesture: pan,
+-        children: /*#__PURE__*/_jsxs(Animated.View, {
+-          style: [styles.main, {
+-            flexDirection: drawerType === 'permanent' ? isRight && direction === 'ltr' || !isRight && direction === 'rtl' ? 'row' : 'row-reverse' : 'row'
+-          }],
+-          children: [/*#__PURE__*/_jsxs(Animated.View, {
+-            style: [styles.content, contentAnimatedStyle],
+-            children: [/*#__PURE__*/_jsx(View, {
+-              accessibilityElementsHidden: isOpen && drawerType !== 'permanent',
+-              importantForAccessibility: isOpen && drawerType !== 'permanent' ? 'no-hide-descendants' : 'auto',
+-              style: styles.content,
+-              children: children
+-            }), drawerType !== 'permanent' ? /*#__PURE__*/_jsx(Overlay, {
+-              open: open,
+-              progress: progress,
+-              onPress: () => toggleDrawer(false),
+-              style: overlayStyle,
+-              accessibilityLabel: overlayAccessibilityLabel
+-            }) : null]
+-          }), /*#__PURE__*/_jsx(Animated.View, {
+-            removeClippedSubviews: Platform.OS !== 'ios',
+-            style: [styles.drawer, {
+-              width: drawerWidth,
+-              position: drawerType === 'permanent' ? 'relative' : 'absolute',
+-              zIndex: drawerType === 'back' ? -1 : 0
+-            }, drawerAnimatedStyle, drawerStyle],
+-            children: renderDrawerContent()
+-          })]
+      children: /*#__PURE__*/_jsx(DrawerGestureContext.Provider, {
+        value: pan,
+        children: /*#__PURE__*/_jsx(GestureDetector, {
+          gesture: pan,
+          children: /*#__PURE__*/_jsxs(Animated.View, {
+            style: [styles.main, {
+              flexDirection: drawerType === 'permanent' ? isRight && direction === 'ltr' || !isRight && direction === 'rtl' ? 'row' : 'row-reverse' : 'row'
+            }],
+            children: [/*#__PURE__*/_jsxs(Animated.View, {
+              style: [styles.content, contentAnimatedStyle],
+              children: [/*#__PURE__*/_jsx(View, {
+                accessibilityElementsHidden: isOpen && drawerType !== 'permanent',
+                importantForAccessibility: isOpen && drawerType !== 'permanent' ? 'no-hide-descendants' : 'auto',
+                style: styles.content,
+                children: children
+              }), drawerType !== 'permanent' ? /*#__PURE__*/_jsx(Overlay, {
+                open: open,
+                progress: progress,
+                onPress: () => toggleDrawer(false),
+                style: overlayStyle,
+                accessibilityLabel: overlayAccessibilityLabel
+              }) : null]
+            }), /*#__PURE__*/_jsx(Animated.View, {
+              removeClippedSubviews: Platform.OS !== 'ios',
+              style: [styles.drawer, {
+                width: drawerWidth,
+                position: drawerType === 'permanent' ? 'relative' : 'absolute',
+                zIndex: drawerType === 'back' ? -1 : 0
+              }, drawerAnimatedStyle, drawerStyle],
+              children: renderDrawerContent()
+            })]
+          })
+         })
+       })
+     })
+diff --git a/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/index.d.ts b/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/index.d.ts
+index 7e978f0..a8bce18 100644
+--- a/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/index.d.ts
+++ b/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/index.d.ts
+@@ -1,3 +1,4 @@
+export { DrawerGestureContext } from './utils/DrawerGestureContext';
+ export { DrawerProgressContext } from './utils/DrawerProgressContext';
+ export { useDrawerProgress } from './utils/useDrawerProgress';
+ export { Drawer } from './views/Drawer';
+diff --git a/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/utils/DrawerGestureContext.d.ts b/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/utils/DrawerGestureContext.d.ts
+new file mode 100644
+index 0000000..33ffbeb
+--- /dev/null
+++ b/node_modules/react-native-drawer-layout/lib/typescript/commonjs/src/utils/DrawerGestureContext.d.ts
+@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const DrawerGestureContext: React.Context<import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture | undefined>;
+//# sourceMappingURL=DrawerGestureContext.d.ts.map
+\ No newline at end of file
+diff --git a/node_modules/react-native-drawer-layout/lib/typescript/module/src/index.d.ts b/node_modules/react-native-drawer-layout/lib/typescript/module/src/index.d.ts
+index 7e978f0..a8bce18 100644
+--- a/node_modules/react-native-drawer-layout/lib/typescript/module/src/index.d.ts
+++ b/node_modules/react-native-drawer-layout/lib/typescript/module/src/index.d.ts
+@@ -1,3 +1,4 @@
+export { DrawerGestureContext } from './utils/DrawerGestureContext';
+ export { DrawerProgressContext } from './utils/DrawerProgressContext';
+ export { useDrawerProgress } from './utils/useDrawerProgress';
+ export { Drawer } from './views/Drawer';
+diff --git a/node_modules/react-native-drawer-layout/lib/typescript/module/src/utils/DrawerGestureContext.d.ts b/node_modules/react-native-drawer-layout/lib/typescript/module/src/utils/DrawerGestureContext.d.ts
+new file mode 100644
+index 0000000..33ffbeb
+--- /dev/null
+++ b/node_modules/react-native-drawer-layout/lib/typescript/module/src/utils/DrawerGestureContext.d.ts
+@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const DrawerGestureContext: React.Context<import("react-native-gesture-handler/lib/typescript/handlers/gestures/panGesture").PanGesture | undefined>;
+//# sourceMappingURL=DrawerGestureContext.d.ts.map
+\ No newline at end of file
+diff --git a/node_modules/react-native-drawer-layout/src/index.tsx b/node_modules/react-native-drawer-layout/src/index.tsx
+index 0aa6f53..61a37cf 100644
+--- a/node_modules/react-native-drawer-layout/src/index.tsx
+++ b/node_modules/react-native-drawer-layout/src/index.tsx
+@@ -1,3 +1,4 @@
+export { DrawerGestureContext } from './utils/DrawerGestureContext';
+ export { DrawerProgressContext } from './utils/DrawerProgressContext';
+ export { useDrawerProgress } from './utils/useDrawerProgress';
+ export { Drawer } from './views/Drawer';
+diff --git a/node_modules/react-native-drawer-layout/src/utils/DrawerGestureContext.tsx b/node_modules/react-native-drawer-layout/src/utils/DrawerGestureContext.tsx
+new file mode 100644
+index 0000000..3aac957
+--- /dev/null
+++ b/node_modules/react-native-drawer-layout/src/utils/DrawerGestureContext.tsx
+@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { PanGesture } from 'react-native-gesture-handler';
+
+export const DrawerGestureContext = React.createContext<PanGesture | undefined>(
+  undefined
+);
+diff --git a/node_modules/react-native-drawer-layout/src/views/Drawer.native.tsx b/node_modules/react-native-drawer-layout/src/views/Drawer.native.tsx
+index 9c40f41..ee5d075 100644
+--- a/node_modules/react-native-drawer-layout/src/views/Drawer.native.tsx
+++ b/node_modules/react-native-drawer-layout/src/views/Drawer.native.tsx
+@@ -21,6 +21,7 @@ import Animated, {
+ import useLatestCallback from 'use-latest-callback';
+ 
+ import type { DrawerProps } from '../types';
+import { DrawerGestureContext } from '../utils/DrawerGestureContext';
+ import { DrawerProgressContext } from '../utils/DrawerProgressContext';
+ import { getDrawerWidth } from '../utils/getDrawerWidth';
+ import {
+@@ -110,47 +111,51 @@ export function Drawer({
+ 
+   const interactionHandleRef = React.useRef<number | null>(null);
+ 
+-  const startInteraction = () => {
+  const startInteraction = React.useCallback(() => {
+     interactionHandleRef.current = InteractionManager.createInteractionHandle();
+-  };
+  }, []);
+ 
+-  const endInteraction = () => {
+  const endInteraction = React.useCallback(() => {
+     if (interactionHandleRef.current != null) {
+       InteractionManager.clearInteractionHandle(interactionHandleRef.current);
+       interactionHandleRef.current = null;
+     }
+-  };
+  }, []);
+ 
+-  const hideKeyboard = () => {
+  const hideKeyboard = React.useCallback(() => {
+     if (keyboardDismissMode === 'on-drag') {
+       Keyboard.dismiss();
+     }
+-  };
+  }, [keyboardDismissMode]);
+ 
+-  const onGestureBegin = () => {
+  const onGestureBegin = React.useCallback(() => {
+     onGestureStart?.();
+     startInteraction();
+     hideKeyboard();
+     hideStatusBar(true);
+-  };
+  }, [onGestureStart, startInteraction, hideKeyboard, hideStatusBar]);
+ 
+-  const onGestureFinish = () => {
+  const onGestureFinish = React.useCallback(() => {
+     onGestureEnd?.();
+     endInteraction();
+-  };
+  }, [onGestureEnd, endInteraction]);
+ 
+-  const onGestureAbort = () => {
+  const onGestureAbort = React.useCallback(() => {
+     onGestureCancel?.();
+     endInteraction();
+-  };
+  }, [onGestureCancel, endInteraction]);
+ 
+   // FIXME: Currently hitSlop is broken when on Android when drawer is on right
+   // https://github.com/software-mansion/react-native-gesture-handler/issues/569
+-  const hitSlop = isRight
+-    ? // Extend hitSlop to the side of the screen when drawer is closed
+-      // This lets the user drag the drawer from the side of the screen
+-      { right: 0, width: isOpen ? undefined : swipeEdgeWidth }
+-    : { left: 0, width: isOpen ? undefined : swipeEdgeWidth };
+  const hitSlop = React.useMemo(
+    () =>
+      isRight
+        ? // Extend hitSlop to the side of the screen when drawer is closed
+          // This lets the user drag the drawer from the side of the screen
+          { right: 0, width: isOpen ? undefined : swipeEdgeWidth }
+        : { left: 0, width: isOpen ? undefined : swipeEdgeWidth },
+    [isRight, isOpen, swipeEdgeWidth]
+  );
+ 
+   const touchStartX = useSharedValue(0);
+   const touchX = useSharedValue(0);
+@@ -217,53 +222,76 @@ export function Drawer({
+ 
+   const startX = useSharedValue(0);
+ 
+-  let pan = Gesture?.Pan()
+-    .onBegin((event) => {
+-      'worklet';
+-      startX.value = translationX.value;
+-      gestureState.value = event.state;
+-      touchStartX.value = event.x;
+-    })
+-    .onStart(() => {
+-      'worklet';
+-      runOnJS(onGestureBegin)();
+-    })
+-    .onChange((event) => {
+-      'worklet';
+-      touchX.value = event.x;
+-      translationX.value = startX.value + event.translationX;
+-      gestureState.value = event.state;
+-    })
+-    .onEnd((event, success) => {
+-      'worklet';
+-      gestureState.value = event.state;
+-
+-      if (!success) {
+-        runOnJS(onGestureAbort)();
+-      }
+-
+-      const nextOpen =
+-        (Math.abs(event.translationX) > SWIPE_MIN_OFFSET &&
+-          Math.abs(event.translationX) > swipeMinVelocity) ||
+-        Math.abs(event.translationX) > swipeMinDistance
+-          ? drawerPosition === 'left'
+-            ? // If swiped to right, open the drawer, otherwise close it
+-              (event.velocityX === 0 ? event.translationX : event.velocityX) > 0
+-            : // If swiped to left, open the drawer, otherwise close it
+-              (event.velocityX === 0 ? event.translationX : event.velocityX) < 0
+-          : open;
+-
+-      toggleDrawer(nextOpen, event.velocityX);
+-      runOnJS(onGestureFinish)();
+-    })
+-    .activeOffsetX([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET])
+-    .failOffsetY([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET])
+-    .hitSlop(hitSlop)
+-    .enabled(drawerType !== 'permanent' && swipeEnabled);
+-
+-  if (pan && configureGestureHandler) {
+-    pan = configureGestureHandler(pan);
+-  }
+  const pan = React.useMemo(() => {
+    let panGesture = Gesture?.Pan()
+      .onBegin((event) => {
+        'worklet';
+        startX.value = translationX.value;
+        gestureState.value = event.state;
+        touchStartX.value = event.x;
+      })
+      .onStart(() => {
+        'worklet';
+        runOnJS(onGestureBegin)();
+      })
+      .onChange((event) => {
+        'worklet';
+        touchX.value = event.x;
+        translationX.value = startX.value + event.translationX;
+        gestureState.value = event.state;
+      })
+      .onEnd((event, success) => {
+        'worklet';
+        gestureState.value = event.state;
+
+        if (!success) {
+          runOnJS(onGestureAbort)();
+        }
+
+        const nextOpen =
+          (Math.abs(event.translationX) > SWIPE_MIN_OFFSET &&
+            Math.abs(event.translationX) > swipeMinVelocity) ||
+          Math.abs(event.translationX) > swipeMinDistance
+            ? drawerPosition === 'left'
+              ? // If swiped to right, open the drawer, otherwise close it
+                (event.velocityX === 0 ? event.translationX : event.velocityX) >
+                0
+              : // If swiped to left, open the drawer, otherwise close it
+                (event.velocityX === 0 ? event.translationX : event.velocityX) <
+                0
+            : open;
+
+        toggleDrawer(nextOpen, event.velocityX);
+        runOnJS(onGestureFinish)();
+      })
+      .activeOffsetX([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET])
+      .failOffsetY([-SWIPE_MIN_OFFSET, SWIPE_MIN_OFFSET])
+      .hitSlop(hitSlop)
+      .enabled(drawerType !== 'permanent' && swipeEnabled);
+
+    if (panGesture && configureGestureHandler) {
+      panGesture = configureGestureHandler(panGesture);
+    }
+    return panGesture;
+  }, [
+    configureGestureHandler,
+    drawerPosition,
+    drawerType,
+    gestureState,
+    hitSlop,
+    onGestureBegin,
+    onGestureAbort,
+    onGestureFinish,
+    open,
+    startX,
+    swipeEnabled,
+    swipeMinDistance,
+    swipeMinVelocity,
+    toggleDrawer,
+    touchStartX,
+    touchX,
+    translationX,
+  ]);
+ 
+   const translateX = useDerivedValue(() => {
+     // Comment stolen from react-native-gesture-handler/DrawerLayout
+@@ -376,64 +404,66 @@ export function Drawer({
+   return (
+     <GestureHandlerRootView style={[styles.container, style]}>
+       <DrawerProgressContext.Provider value={progress}>
+-        <GestureDetector gesture={pan}>
+-          {/* Immediate child of gesture handler needs to be an Animated.View */}
+-          <Animated.View
+-            style={[
+-              styles.main,
+-              {
+-                flexDirection:
+-                  drawerType === 'permanent'
+-                    ? (isRight && direction === 'ltr') ||
+-                      (!isRight && direction === 'rtl')
+-                      ? 'row'
+-                      : 'row-reverse'
+-                    : 'row',
+-              },
+-            ]}
+-          >
+-            <Animated.View style={[styles.content, contentAnimatedStyle]}>
+-              <View
+-                accessibilityElementsHidden={
+-                  isOpen && drawerType !== 'permanent'
+-                }
+-                importantForAccessibility={
+-                  isOpen && drawerType !== 'permanent'
+-                    ? 'no-hide-descendants'
+-                    : 'auto'
+-                }
+-                style={styles.content}
+-              >
+-                {children}
+-              </View>
+-              {drawerType !== 'permanent' ? (
+-                <Overlay
+-                  open={open}
+-                  progress={progress}
+-                  onPress={() => toggleDrawer(false)}
+-                  style={overlayStyle}
+-                  accessibilityLabel={overlayAccessibilityLabel}
+-                />
+-              ) : null}
+-            </Animated.View>
+        <DrawerGestureContext.Provider value={pan}>
+          <GestureDetector gesture={pan}>
+            {/* Immediate child of gesture handler needs to be an Animated.View */}
+             <Animated.View
+-              removeClippedSubviews={Platform.OS !== 'ios'}
+               style={[
+-                styles.drawer,
+                styles.main,
+                 {
+-                  width: drawerWidth,
+-                  position:
+-                    drawerType === 'permanent' ? 'relative' : 'absolute',
+-                  zIndex: drawerType === 'back' ? -1 : 0,
+                  flexDirection:
+                    drawerType === 'permanent'
+                      ? (isRight && direction === 'ltr') ||
+                        (!isRight && direction === 'rtl')
+                        ? 'row'
+                        : 'row-reverse'
+                      : 'row',
+                 },
+-                drawerAnimatedStyle,
+-                drawerStyle,
+               ]}
+             >
+-              {renderDrawerContent()}
+              <Animated.View style={[styles.content, contentAnimatedStyle]}>
+                <View
+                  accessibilityElementsHidden={
+                    isOpen && drawerType !== 'permanent'
+                  }
+                  importantForAccessibility={
+                    isOpen && drawerType !== 'permanent'
+                      ? 'no-hide-descendants'
+                      : 'auto'
+                  }
+                  style={styles.content}
+                >
+                  {children}
+                </View>
+                {drawerType !== 'permanent' ? (
+                  <Overlay
+                    open={open}
+                    progress={progress}
+                    onPress={() => toggleDrawer(false)}
+                    style={overlayStyle}
+                    accessibilityLabel={overlayAccessibilityLabel}
+                  />
+                ) : null}
+              </Animated.View>
+              <Animated.View
+                removeClippedSubviews={Platform.OS !== 'ios'}
+                style={[
+                  styles.drawer,
+                  {
+                    width: drawerWidth,
+                    position:
+                      drawerType === 'permanent' ? 'relative' : 'absolute',
+                    zIndex: drawerType === 'back' ? -1 : 0,
+                  },
+                  drawerAnimatedStyle,
+                  drawerStyle,
+                ]}
+              >
+                {renderDrawerContent()}
+              </Animated.View>
+             </Animated.View>
+-          </Animated.View>
+-        </GestureDetector>
+          </GestureDetector>
+        </DrawerGestureContext.Provider>
+       </DrawerProgressContext.Provider>
+     </GestureHandlerRootView>
+   );
@@ -1,36 +0,0 @@
-diff --git a/node_modules/react-native-gesture-handler/apple/RNGestureHandler.mm b/node_modules/react-native-gesture-handler/apple/RNGestureHandler.mm
-index 43d11b4..5bf0d32 100644
--- a/node_modules/react-native-gesture-handler/apple/RNGestureHandler.mm
-+++ b/node_modules/react-native-gesture-handler/apple/RNGestureHandler.mm
-@@ -461,16 +461,23 @@ - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer
- - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer
-     shouldRequireFailureOfGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
- {
-  if ([_handlersToWaitFor count]) {
-    RNGestureHandler *handler = [RNGestureHandler findGestureHandlerByRecognizer:otherGestureRecognizer];
-    if (handler != nil) {
-      for (NSNumber *handlerTag in _handlersToWaitFor) {
-        if ([handler.tag isEqual:handlerTag]) {
-          return YES;
-        }
-      }
-+  RNGestureHandler *handler = [RNGestureHandler findGestureHandlerByRecognizer:otherGestureRecognizer];
-+  if (handler == nil) {
-+    return NO;
-+  }
-+
-+  for (NSNumber *handlerTag in _handlersToWaitFor) {
-+    if ([handler.tag isEqual:handlerTag]) {
-+      return YES;
-     }
-   }
-+
-+  for (NSNumber *handlerTag in handler->_handlersThatShouldWait) {
-+    if ([_tag isEqual:handlerTag]) {
-+      return YES;
-+    }
-+  }
-+
-   return NO;
- }
- 
@@ -1,36 +1,3 @@
-diff --git a/node_modules/react-native-image-crop-picker/android/src/main/AndroidManifest.xml b/node_modules/react-native-image-crop-picker/android/src/main/AndroidManifest.xml
-index 391f303..8e2c3db 100644
--- a/node_modules/react-native-image-crop-picker/android/src/main/AndroidManifest.xml
-+++ b/node_modules/react-native-image-crop-picker/android/src/main/AndroidManifest.xml
-@@ -24,7 +24,7 @@
- 
-         <activity
-             android:name="com.yalantis.ucrop.UCropActivity"
-            android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
-+            android:theme="@style/Theme.UCropNoEdgeToEdge" />
-     </application>
- 
- </manifest>
-diff --git a/node_modules/react-native-image-crop-picker/android/src/main/res/values-v35/styles.xml b/node_modules/react-native-image-crop-picker/android/src/main/res/values-v35/styles.xml
-new file mode 100644
-index 0000000..396d5a8
--- /dev/null
-+++ b/node_modules/react-native-image-crop-picker/android/src/main/res/values-v35/styles.xml
-@@ -0,0 +1,5 @@
-+<resources>
-+    <style name="Theme.UCropNoEdgeToEdge" parent="Theme.AppCompat.Light.NoActionBar">
-+        <item name="android:windowOptOutEdgeToEdgeEnforcement">true</item>
-+    </style>
-+</resources>
-diff --git a/node_modules/react-native-image-crop-picker/android/src/main/res/values/styles.xml b/node_modules/react-native-image-crop-picker/android/src/main/res/values/styles.xml
-new file mode 100644
-index 0000000..50129b6
--- /dev/null
-+++ b/node_modules/react-native-image-crop-picker/android/src/main/res/values/styles.xml
-@@ -0,0 +1,3 @@
-+<resources>
-+    <style name="Theme.UCropNoEdgeToEdge" parent="Theme.AppCompat.Light.NoActionBar"/>
-+</resources>
 diff --git a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m b/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
 index 9f20973..68d4766 100644
 --- a/node_modules/react-native-image-crop-picker/ios/src/ImageCropPicker.m
@@ -1,70 +0,0 @@
-const {withAppBuildGradle} = require('@expo/config-plugins')
-
-/**
- * A Config Plugin to disable bundle compression in Android build.gradle.
- * @param {import('@expo/config-plugins').ConfigPlugin} config
- * @returns {import('@expo/config-plugins').ConfigPlugin}
- */
-module.exports = function withNoBundleCompression(config) {
-  return withAppBuildGradle(config, androidConfig => {
-    let buildGradle = androidConfig.modResults.contents
-
-    const hasAndroidResources = buildGradle.includes('androidResources {')
-    const hasNoCompress = buildGradle.includes('noCompress')
-
-    if (hasAndroidResources) {
-      if (hasNoCompress) {
-        if (
-          buildGradle.includes('noCompress += ["bundle"]') ||
-          buildGradle.includes("noCompress += 'bundle'") ||
-          buildGradle.includes('noCompress += "bundle"')
-        ) {
-          return androidConfig
-        }
-
-        const lines = buildGradle.split('\n')
-        const modifiedLines = lines.map(line => {
-          if (line.trim().startsWith('noCompress')) {
-            if (line.includes('+=')) {
-              return line.replace(/\]/, ', "bundle"]')
-            } else if (line.includes('=')) {
-              return line.replace('=', '+= ["bundle",') + ']'
-            }
-          }
-          return line
-        })
-        androidConfig.modResults.contents = modifiedLines.join('\n')
-      } else {
-        const androidResources = buildGradle.indexOf('androidResources {')
-        if (androidResources === -1) {
-          throw new Error(
-            `Cannot find androidResources { block in build.gradle!`,
-          )
-        }
-        const insertPosition = buildGradle.indexOf('\n', androidResources) + 1
-        const newContent =
-          buildGradle.slice(0, insertPosition) +
-          '        noCompress += ["bundle"]\n' +
-          buildGradle.slice(insertPosition)
-
-        androidConfig.modResults.contents = newContent
-      }
-    } else {
-      const androidBlock = buildGradle.indexOf('android {')
-      if (androidBlock === -1) {
-        throw new Error(`Cannot find android { block in build.gradle!`)
-      }
-      const insertPosition = buildGradle.indexOf('\n', androidBlock) + 1
-      const newContent =
-        buildGradle.slice(0, insertPosition) +
-        '    androidResources {\n' +
-        '        noCompress += ["bundle"]\n' +
-        '    }\n' +
-        buildGradle.slice(insertPosition)
-
-      androidConfig.modResults.contents = newContent
-    }
-
-    return androidConfig
-  })
-}
@@ -10,7 +10,6 @@ import {
  initialWindowMetrics,
  SafeAreaProvider,
 } from 'react-native-safe-area-context'
-import * as ScreenOrientation from 'expo-screen-orientation'
 import * as SplashScreen from 'expo-splash-screen'
 import * as SystemUI from 'expo-system-ui'
 import {msg} from '@lingui/macro'
@@ -23,7 +22,7 @@ import {s} from '#/lib/styles'
 import {ThemeProvider} from '#/lib/ThemeContext'
 import I18nProvider from '#/locale/i18nProvider'
 import {logger} from '#/logger'
-import {isAndroid, isIOS} from '#/platform/detection'
+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'
@@ -69,6 +68,7 @@ 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'
@@ -77,10 +77,6 @@ SplashScreen.preventAutoHideAsync()
 if (isIOS) {
  SystemUI.setBackgroundColorAsync('black')
 }
-if (isAndroid) {
-  // iOS is handled by the config plugin -sfn
-  ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP)
-}

 /**
 * Begin geolocation ASAP
@@ -151,11 +147,9 @@ function InnerApp() {
                                            <TrendingConfigProvider>
                                              <GestureHandlerRootView
                                                style={s.h100pct}>
-                                                <IntentDialogProvider>
-                                                  <TestCtrls />
-                                                  <Shell />
-                                                  <NuxDialogs />
-                                                </IntentDialogProvider>
+                                                <TestCtrls />
+                                                <Shell />
+                                                <NuxDialogs />
                                              </GestureHandlerRootView>
                                            </TrendingConfigProvider>
                                          </ProgressGuideProvider>
@@ -199,40 +193,44 @@ function App() {
   * that is set up in the InnerApp component above.
   */
  return (
-    <GeolocationProvider>
-      <A11yProvider>
-        <KeyboardControllerProvider>
-          <SessionProvider>
-            <PrefsStateProvider>
-              <I18nProvider>
-                <ShellStateProvider>
-                  <InvitesStateProvider>
-                    <ModalStateProvider>
-                      <DialogStateProvider>
-                        <LightboxStateProvider>
-                          <PortalProvider>
-                            <BottomSheetProvider>
-                              <StarterPackProvider>
-                                <SafeAreaProvider
-                                  initialMetrics={initialWindowMetrics}>
-                                  <LightStatusBarProvider>
-                                    <InnerApp />
-                                  </LightStatusBarProvider>
-                                </SafeAreaProvider>
-                              </StarterPackProvider>
-                            </BottomSheetProvider>
-                          </PortalProvider>
-                        </LightboxStateProvider>
-                      </DialogStateProvider>
-                    </ModalStateProvider>
-                  </InvitesStateProvider>
-                </ShellStateProvider>
-              </I18nProvider>
-            </PrefsStateProvider>
-          </SessionProvider>
-        </KeyboardControllerProvider>
-      </A11yProvider>
-    </GeolocationProvider>
+    <AppProfiler>
+      <GeolocationProvider>
+        <A11yProvider>
+          <KeyboardControllerProvider>
+            <SessionProvider>
+              <PrefsStateProvider>
+                <I18nProvider>
+                  <ShellStateProvider>
+                    <InvitesStateProvider>
+                      <ModalStateProvider>
+                        <DialogStateProvider>
+                          <LightboxStateProvider>
+                            <PortalProvider>
+                              <BottomSheetProvider>
+                                <StarterPackProvider>
+                                  <SafeAreaProvider
+                                    initialMetrics={initialWindowMetrics}>
+                                    <IntentDialogProvider>
+                                      <LightStatusBarProvider>
+                                        <InnerApp />
+                                      </LightStatusBarProvider>
+                                    </IntentDialogProvider>
+                                  </SafeAreaProvider>
+                                </StarterPackProvider>
+                              </BottomSheetProvider>
+                            </PortalProvider>
+                          </LightboxStateProvider>
+                        </DialogStateProvider>
+                      </ModalStateProvider>
+                    </InvitesStateProvider>
+                  </ShellStateProvider>
+                </I18nProvider>
+              </PrefsStateProvider>
+            </SessionProvider>
+          </KeyboardControllerProvider>
+        </A11yProvider>
+      </GeolocationProvider>
+    </AppProfiler>
  )
 }

@@ -129,10 +129,8 @@ function InnerApp() {
                                          <SafeAreaProvider>
                                            <ProgressGuideProvider>
                                              <TrendingConfigProvider>
-                                                <IntentDialogProvider>
-                                                  <Shell />
-                                                  <NuxDialogs />
-                                                </IntentDialogProvider>
+                                                <Shell />
+                                                <NuxDialogs />
                                              </TrendingConfigProvider>
                                            </ProgressGuideProvider>
                                          </SafeAreaProvider>
@@ -189,9 +187,11 @@ function App() {
                      <LightboxStateProvider>
                        <PortalProvider>
                          <StarterPackProvider>
-                            <LightStatusBarProvider>
-                              <InnerApp />
-                            </LightStatusBarProvider>
+                            <IntentDialogProvider>
+                              <LightStatusBarProvider>
+                                <InnerApp />
+                              </LightStatusBarProvider>
+                            </IntentDialogProvider>
                          </StarterPackProvider>
                        </PortalProvider>
                      </LightboxStateProvider>
@@ -0,0 +1,29 @@
+import React, {Profiler} from 'react'
+
+// Don't let it get stripped out in profiling builds (which apply production Babel preset).
+const log = (global as any)['con' + 'sole'].log
+
+function onRender(id: string, phase: string, actualDuration: number) {
+  if (!__DEV__) {
+    // This block of code will exist in the production build of the app.
+    // However, only profiling builds of React call `onRender` so it's dead code in actual production.
+    const message = `<Profiler> ${id}:${phase} ${
+      actualDuration > 500
+        ? '(╯°□°）╯ '
+        : actualDuration > 100
+        ? '[!!] '
+        : actualDuration > 16
+        ? '[!] '
+        : ''
+    }${Math.round(actualDuration)}ms`
+    log(message)
+  }
+}
+
+export function AppProfiler({children}: {children: React.ReactNode}) {
+  return (
+    <Profiler id="app" onRender={onRender}>
+      {children}
+    </Profiler>
+  )
+}
@@ -70,7 +70,6 @@ import {MessagesScreen} from '#/screens/Messages/ChatList'
 import {MessagesConversationScreen} from '#/screens/Messages/Conversation'
 import {MessagesSettingsScreen} from '#/screens/Messages/Settings'
 import {ModerationScreen} from '#/screens/Moderation'
-import {Screen as ModerationInteractionSettings} from '#/screens/ModerationInteractionSettings'
 import {PostLikedByScreen} from '#/screens/Post/PostLikedBy'
 import {PostQuotesScreen} from '#/screens/Post/PostQuotes'
 import {PostRepostedByScreen} from '#/screens/Post/PostRepostedBy'
@@ -87,11 +86,9 @@ import {
  StarterPackScreenShort,
 } from '#/screens/StarterPack/StarterPackScreen'
 import {Wizard} from '#/screens/StarterPack/Wizard'
-import {VideoFeed} from '#/screens/VideoFeed'
 import {useTheme} from '#/alf'
 import {router} from '#/routes'
 import {Referrer} from '../modules/expo-bluesky-swiss-army'
-import {ProfileSearchScreen} from './screens/Profile/ProfileSearch'
 import {AboutSettingsScreen} from './screens/Settings/AboutSettings'
 import {AccessibilitySettingsScreen} from './screens/Settings/AccessibilitySettings'
 import {AccountSettingsScreen} from './screens/Settings/AccountSettings'
@@ -157,14 +154,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
        getComponent={() => ModerationBlockedAccounts}
        options={{title: title(msg`Blocked Accounts`), requireAuth: true}}
      />
-      <Stack.Screen
-        name="ModerationInteractionSettings"
-        getComponent={() => ModerationInteractionSettings}
-        options={{
-          title: title(msg`Post Interaction Settings`),
-          requireAuth: true,
-        }}
-      />
      <Stack.Screen
        name="Settings"
        getComponent={() => SettingsScreen}
@@ -208,13 +197,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
        getComponent={() => ProfileListScreen}
        options={{title: title(msg`List`), requireAuth: true}}
      />
-      <Stack.Screen
-        name="ProfileSearch"
-        getComponent={() => ProfileSearchScreen}
-        options={({route}) => ({
-          title: title(msg`Search @${route.params.name}'s posts`),
-        })}
-      />
      <Stack.Screen
        name="PostThread"
        getComponent={() => PostThreadScreen}
@@ -440,14 +422,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
        getComponent={() => Wizard}
        options={{title: title(msg`Edit your starter pack`), requireAuth: true}}
      />
-      <Stack.Screen
-        name="VideoFeed"
-        getComponent={() => VideoFeed}
-        options={{
-          title: title(msg`Video Feed`),
-          requireAuth: true,
-        }}
-      />
    </>
  )
 }
@@ -729,16 +703,15 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
      linking={LINKING}
      theme={theme}
      onStateChange={() => {
-        logEvent('lake:router:navigate', {
-          from: prevLoggedRouteName.current,
-        })
-        prevLoggedRouteName.current = getCurrentRouteName()
+        const routeName = getCurrentRouteName()
+        if (routeName === 'Notifications') {
+          logEvent('router:navigate:notifications', {})
+        }
      }}
      onReady={() => {
        attachRouteToLogEvents(getCurrentRouteName)
        logModuleInitTime()
        onReady()
-        logEvent('lake:router:navigate', {})
      }}>
      {children}
    </NavigationContainer>
@@ -50,12 +50,6 @@ export const atoms = {
  overflow_hidden: {
    overflow: 'hidden',
  },
-  /**
-   * @platform web
-   */
-  overflow_auto: web({
-    overflow: 'auto',
-  }),

  /*
   * Width
@@ -74,6 +68,7 @@ export const atoms = {
   * Used for the outermost components on screens, to ensure that they can fill
   * the screen and extend beyond.
   */
+  // @ts-ignore - web only minHeight string
  util_screen_outer: [
    web({
      minHeight: '100vh',
@@ -81,7 +76,7 @@ export const atoms = {
    native({
      height: '100%',
    }),
-  ] as StyleProp<ViewStyle>,
+  ] as ViewStyle,

  /*
   * Theme-independent bg colors
@@ -163,9 +158,6 @@ export const atoms = {
  flex_wrap: {
    flexWrap: 'wrap',
  },
-  flex_nowrap: {
-    flexWrap: 'nowrap',
-  },
  flex_0: {
    flex: web('0 0 auto') || (native(0) as number),
  },
@@ -966,37 +958,6 @@ export const atoms = {
    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
    transitionDuration: '100ms',
  }),
-  transition_delay_50ms: web({
-    transitionDelay: '50ms',
-  }),
-
-  /*
-   * Animaations
-   */
-  fade_in: web({
-    animation: 'fadeIn ease-out 0.15s',
-  }),
-  fade_out: web({
-    animation: 'fadeOut ease-out 0.15s',
-  }),
-  zoom_in: web({
-    animation: 'zoomIn ease-out 0.1s',
-  }),
-  zoom_out: web({
-    animation: 'zoomOut ease-out 0.1s',
-  }),
-  slide_in_left: web({
-    // exponential easing function
-    animation: 'slideInLeft cubic-bezier(0.16, 1, 0.3, 1) 0.5s',
-  }),
-  slide_out_left: web({
-    animation: 'slideOutLeft ease-in 0.15s',
-    animationFillMode: 'forwards',
-  }),
-  // special composite animation for dialogs
-  zoom_fade_in: web({
-    animation: 'zoomIn ease-out 0.1s, fadeIn ease-out 0.1s',
-  }),

  /**
   * {@link Layout.SCROLLBAR_OFFSET}
@@ -497,7 +497,7 @@ export function createThemes({
        color: dimPalette.contrast_400,
      },
      text_contrast_medium: {
-        color: dimPalette.contrast_600,
+        color: dimPalette.contrast_700,
      },
      text_contrast_high: {
        color: dimPalette.contrast_900,
@@ -1,5 +1,4 @@
 import * as NavigationBar from 'expo-navigation-bar'
-import * as SystemUI from 'expo-system-ui'

 import {isAndroid} from '#/platform/detection'
 import {Theme} from '../types'
@@ -10,12 +9,10 @@ export function setNavigationBar(themeType: 'theme' | 'lightbox', t: Theme) {
      NavigationBar.setBackgroundColorAsync(t.atoms.bg.backgroundColor)
      NavigationBar.setBorderColorAsync(t.atoms.bg.backgroundColor)
      NavigationBar.setButtonStyleAsync(t.name !== 'light' ? 'light' : 'dark')
-      SystemUI.setBackgroundColorAsync(t.atoms.bg.backgroundColor)
    } else {
      NavigationBar.setBackgroundColorAsync('black')
      NavigationBar.setBorderColorAsync('black')
      NavigationBar.setButtonStyleAsync('light')
-      SystemUI.setBackgroundColorAsync('black')
    }
  }
 }
@@ -131,11 +131,7 @@ function AccountItem({
            (hovered || pressed || isPendingAccount) && t.atoms.bg_contrast_25,
          ]}>
          <View style={a.p_md}>
-            <UserAvatar
-              avatar={profile?.avatar}
-              size={24}
-              type={profile?.associated?.labeler ? 'labeler' : 'user'}
-            />
+            <UserAvatar avatar={profile?.avatar} size={24} />
          </View>
          <Text style={[a.align_baseline, a.flex_1, a.flex_row, a.py_sm]}>
            <Text emoji style={[a.font_bold]}>
@@ -65,7 +65,6 @@ export function AvatarStack({
            <UserAvatar
              size={size - 2}
              avatar={item.profile.avatar}
-              type={item.profile.associated?.labeler ? 'labeler' : 'user'}
              moderation={item.moderation.ui('avatar')}
            />
          )}
@@ -3,12 +3,10 @@ import {
  AccessibilityProps,
  GestureResponderEvent,
  MouseEvent,
-  NativeSyntheticEvent,
  Pressable,
  PressableProps,
  StyleProp,
  StyleSheet,
-  TargetedEvent,
  TextProps,
  TextStyle,
  View,
@@ -78,8 +76,6 @@ export type ButtonProps = Pick<
  | 'onHoverOut'
  | 'onPressIn'
  | 'onPressOut'
-  | 'onFocus'
-  | 'onBlur'
 > &
  AccessibilityProps &
  VariantProps & {
@@ -120,12 +116,6 @@ export const Button = React.forwardRef<View, ButtonProps>(
      style,
      hoverStyle: hoverStyleProp,
      PressableComponent = Pressable,
-      onPressIn: onPressInOuter,
-      onPressOut: onPressOutOuter,
-      onHoverIn: onHoverInOuter,
-      onHoverOut: onHoverOutOuter,
-      onFocus: onFocusOuter,
-      onBlur: onBlurOuter,
      ...rest
    },
    ref,
@@ -137,6 +127,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
      focused: false,
    })

+    const onPressInOuter = rest.onPressIn
    const onPressIn = React.useCallback(
      (e: GestureResponderEvent) => {
        setState(s => ({
@@ -147,6 +138,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
      },
      [setState, onPressInOuter],
    )
+    const onPressOutOuter = rest.onPressOut
    const onPressOut = React.useCallback(
      (e: GestureResponderEvent) => {
        setState(s => ({
@@ -157,6 +149,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
      },
      [setState, onPressOutOuter],
    )
+    const onHoverInOuter = rest.onHoverIn
    const onHoverIn = React.useCallback(
      (e: MouseEvent) => {
        setState(s => ({
@@ -167,6 +160,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
      },
      [setState, onHoverInOuter],
    )
+    const onHoverOutOuter = rest.onHoverOut
    const onHoverOut = React.useCallback(
      (e: MouseEvent) => {
        setState(s => ({
@@ -177,26 +171,18 @@ export const Button = React.forwardRef<View, ButtonProps>(
      },
      [setState, onHoverOutOuter],
    )
-    const onFocus = React.useCallback(
-      (e: NativeSyntheticEvent<TargetedEvent>) => {
-        setState(s => ({
-          ...s,
-          focused: true,
-        }))
-        onFocusOuter?.(e)
-      },
-      [setState, onFocusOuter],
-    )
-    const onBlur = React.useCallback(
-      (e: NativeSyntheticEvent<TargetedEvent>) => {
-        setState(s => ({
-          ...s,
-          focused: false,
-        }))
-        onBlurOuter?.(e)
-      },
-      [setState, onBlurOuter],
-    )
+    const onFocus = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        focused: true,
+      }))
+    }, [setState])
+    const onBlur = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        focused: false,
+      }))
+    }, [setState])

    const {baseStyles, hoverStyles} = React.useMemo(() => {
      const baseStyles: ViewStyle[] = []
@@ -27,7 +27,6 @@ import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {List, ListMethods, ListProps} from '#/view/com/util/List'
 import {atoms as a, useTheme} from '#/alf'
-import {useThemeName} from '#/alf/util/useColorModeTheme'
 import {Context, useDialogContext} from '#/components/Dialog/context'
 import {
  DialogControlProps,
@@ -56,8 +55,7 @@ export function Outer({
  nativeOptions,
  testID,
 }: React.PropsWithChildren<DialogOuterProps>) {
-  const themeName = useThemeName()
-  const t = useTheme(themeName)
+  const t = useTheme()
  const ref = React.useRef<BottomSheetNativeComponent>(null)
  const closeCallbacks = React.useRef<(() => void)[]>([])
  const {setDialogIsOpen, setFullyExpandedCount} =
@@ -15,7 +15,6 @@ import {FocusScope} from '@radix-ui/react-focus-scope'
 import {RemoveScrollBar} from 'react-remove-scroll-bar'

 import {logger} from '#/logger'
-import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
@@ -153,7 +152,6 @@ export function Inner({
  const t = useTheme()
  const {close} = React.useContext(Context)
  const {gtMobile} = useBreakpoints()
-  const {reduceMotionEnabled} = useA11y()
  useFocusGuards()
  return (
    <FocusScope loop asChild trapped>
@@ -163,7 +161,7 @@ export function Inner({
        aria-label={label}
        aria-labelledby={accessibilityLabelledBy}
        aria-describedby={accessibilityDescribedBy}
-        // @ts-expect-error web only -prf
+        // @ts-ignore web only -prf
        onClick={stopPropagation}
        onStartShouldSetResponder={_ => true}
        onTouchEnd={stopPropagation}
@@ -179,9 +177,10 @@ 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',
          },
-          !reduceMotionEnabled && a.zoom_fade_in,
-          style,
+          flatten(style),
        ])}>
        <DismissableLayer
          onInteractOutside={preventDefault}
@@ -217,7 +216,7 @@ export const InnerFlatList = React.forwardRef<
      style={[
        a.overflow_hidden,
        a.px_0,
-        // @ts-expect-error web only -sfn
+        // @ts-ignore web only -sfn
        {maxHeight: 'calc(-36px + 100vh)'},
        webInnerStyle,
      ]}
@@ -263,15 +262,20 @@ export function Handle() {

 function Backdrop() {
  const t = useTheme()
-  const {reduceMotionEnabled} = useA11y()
  return (
-    <View style={{opacity: 0.8}}>
+    <View
+      style={{
+        opacity: 0.8,
+      }}>
      <View
        style={[
          a.fixed,
          a.inset_0,
-          {backgroundColor: t.palette.black},
-          !reduceMotionEnabled && a.fade_in,
+          {
+            backgroundColor: t.palette.black,
+            // @ts-ignore web only
+            animation: 'fadeIn ease-out 0.15s',
+          },
        ]}
      />
    </View>
@@ -1,5 +1,6 @@
 import React from 'react'
-import {ScrollView, View} from 'react-native'
+import {View} from 'react-native'
+import {ScrollView} from 'react-native-gesture-handler'
 import {AppBskyActorDefs, AppBskyFeedDefs, AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -16,7 +17,6 @@ import {useSuggestedFollowsByActorQuery} from '#/state/queries/suggested-follows
 import {useSession} from '#/state/session'
 import * as userActionHistory from '#/state/userActionHistory'
 import {SeenPost} from '#/state/userActionHistory'
-import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
 import {atoms as a, useBreakpoints, useTheme, ViewStyleProp, web} from '#/alf'
 import {Button} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
@@ -196,7 +196,6 @@ export function SuggestedFollowsProfile({did}: {did: string}) {
    <ProfileGrid
      isSuggestionsLoading={isSuggestionsLoading}
      profiles={data?.suggestions ?? []}
-      recId={data?.recId}
      error={error}
      viewContext="profile"
    />
@@ -223,12 +222,10 @@ export function ProfileGrid({
  isSuggestionsLoading,
  error,
  profiles,
-  recId,
  viewContext = 'feed',
 }: {
  isSuggestionsLoading: boolean
  profiles: AppBskyActorDefs.ProfileViewDetailed[]
-  recId?: number
  error: Error | null
  viewContext: 'profile' | 'feed'
 }) {
@@ -252,19 +249,12 @@ export function ProfileGrid({
      ))
  ) : error || !profiles.length ? null : (
    <>
-      {profiles.slice(0, maxLength).map((profile, index) => (
+      {profiles.slice(0, maxLength).map(profile => (
        <ProfileCard.Link
          key={profile.did}
          profile={profile}
          onPress={() => {
-            logEvent('suggestedUser:press', {
-              logContext:
-                viewContext === 'feed'
-                  ? 'InterstitialDiscover'
-                  : 'InterstitialProfile',
-              recId,
-              position: index,
-            })
+            logEvent('feed:interstitial:profileCard:press', {})
          }}
          style={[
            a.flex_1,
@@ -292,17 +282,6 @@ export function ProfileGrid({
                    logContext="FeedInterstitial"
                    shape="round"
                    colorInverted
-                    onFollow={() => {
-                      logEvent('suggestedUser:follow', {
-                        logContext:
-                          viewContext === 'feed'
-                            ? 'InterstitialDiscover'
-                            : 'InterstitialProfile',
-                        location: 'Card',
-                        recId,
-                        position: index,
-                      })
-                    }}
                  />
                </ProfileCard.Header>
                <ProfileCard.Description profile={profile} numberOfLines={2} />
@@ -357,37 +336,33 @@ export function ProfileGrid({
          </View>
        </View>
      ) : (
-        <BlockDrawerGesture>
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
-            decelerationRate="fast">
-            <View style={[a.px_lg, a.pt_sm, a.pb_lg, a.flex_row, a.gap_md]}>
-              {content}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
+          decelerationRate="fast">
+          <View style={[a.px_lg, a.pt_sm, a.pb_lg, a.flex_row, a.gap_md]}>
+            {content}

-              <Button
-                label={_(msg`Browse more accounts on the Explore page`)}
-                onPress={() => {
-                  navigation.navigate('SearchTab')
-                }}>
-                <CardOuter style={[a.flex_1, {borderWidth: 0}]}>
-                  <View style={[a.flex_1, a.justify_center]}>
-                    <View style={[a.flex_row, a.px_lg]}>
-                      <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
-                        <Trans>
-                          Browse more suggestions on the Explore page
-                        </Trans>
-                      </Text>
+            <Button
+              label={_(msg`Browse more accounts on the Explore page`)}
+              onPress={() => {
+                navigation.navigate('SearchTab')
+              }}>
+              <CardOuter style={[a.flex_1, {borderWidth: 0}]}>
+                <View style={[a.flex_1, a.justify_center]}>
+                  <View style={[a.flex_row, a.px_lg]}>
+                    <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
+                      <Trans>Browse more suggestions on the Explore page</Trans>
+                    </Text>

-                      <Arrow size="xl" />
-                    </View>
+                    <Arrow size="xl" />
                  </View>
-                </CardOuter>
-              </Button>
-            </View>
-          </ScrollView>
-        </BlockDrawerGesture>
+                </View>
+              </CardOuter>
+            </Button>
+          </View>
+        </ScrollView>
      )}
    </View>
  )
@@ -494,38 +469,34 @@ export function SuggestedFeeds() {
          </View>
        </View>
      ) : (
-        <BlockDrawerGesture>
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
-            decelerationRate="fast">
-            <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
-              {content}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
+          decelerationRate="fast">
+          <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
+            {content}

-              <Button
-                label={_(msg`Browse more feeds on the Explore page`)}
-                onPress={() => {
-                  navigation.navigate('SearchTab')
-                }}
-                style={[a.flex_col]}>
-                <CardOuter style={[a.flex_1]}>
-                  <View style={[a.flex_1, a.justify_center]}>
-                    <View style={[a.flex_row, a.px_lg]}>
-                      <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
-                        <Trans>
-                          Browse more suggestions on the Explore page
-                        </Trans>
-                      </Text>
+            <Button
+              label={_(msg`Browse more feeds on the Explore page`)}
+              onPress={() => {
+                navigation.navigate('SearchTab')
+              }}
+              style={[a.flex_col]}>
+              <CardOuter style={[a.flex_1]}>
+                <View style={[a.flex_1, a.justify_center]}>
+                  <View style={[a.flex_row, a.px_lg]}>
+                    <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
+                      <Trans>Browse more suggestions on the Explore page</Trans>
+                    </Text>

-                      <Arrow size="xl" />
-                    </View>
+                    <Arrow size="xl" />
                  </View>
-                </CardOuter>
-              </Button>
-            </View>
-          </ScrollView>
-        </BlockDrawerGesture>
+                </View>
+              </CardOuter>
+            </Button>
+          </View>
+        </ScrollView>
      )}
    </View>
  )
@@ -1,59 +0,0 @@
-import {createContext, useContext, useMemo} from 'react'
-import {View} from 'react-native'
-
-import {atoms as a, ViewStyleProp} from '#/alf'
-
-const Context = createContext({
-  gap: 0,
-})
-
-export function Row({
-  children,
-  gap = 0,
-  style,
-}: ViewStyleProp & {
-  children: React.ReactNode
-  gap?: number
-}) {
-  return (
-    <Context.Provider value={useMemo(() => ({gap}), [gap])}>
-      <View
-        style={[
-          a.flex_row,
-          a.flex_1,
-          {
-            marginLeft: -gap / 2,
-            marginRight: -gap / 2,
-          },
-          style,
-        ]}>
-        {children}
-      </View>
-    </Context.Provider>
-  )
-}
-
-export function Col({
-  children,
-  width = 1,
-  style,
-}: ViewStyleProp & {
-  children: React.ReactNode
-  width?: number
-}) {
-  const {gap} = useContext(Context)
-  return (
-    <View
-      style={[
-        a.flex_col,
-        {
-          paddingLeft: gap / 2,
-          paddingRight: gap / 2,
-          width: `${width * 100}%`,
-        },
-        style,
-      ]}>
-      {children}
-    </View>
-  )
-}
@@ -163,7 +163,6 @@ function KnownFollowersInner({
                  size={SIZE}
                  avatar={prof.avatar}
                  moderation={moderation.ui('avatar')}
-                  type={prof.associated?.labeler ? 'labeler' : 'user'}
                />
              </View>
            ))}
@@ -1,5 +1,5 @@
 import {createContext, useCallback, useContext} from 'react'
-import {GestureResponderEvent, Keyboard, View} from 'react-native'
+import {GestureResponderEvent, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -122,11 +122,7 @@ export function BackButton({onPress, style, ...props}: Partial<ButtonProps>) {
        shape="square"
        onPress={onPressBack}
        hitSlop={HITSLOP_30}
-        style={[
-          {marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET},
-          a.bg_transparent,
-          style,
-        ]}
+        style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}, style]}
        {...props}>
        <ButtonIcon icon={ArrowLeft} size="lg" />
      </Button>
@@ -140,7 +136,6 @@ export function MenuButton() {
  const {gtMobile} = useBreakpoints()

  const onPress = useCallback(() => {
-    Keyboard.dismiss()
    setDrawerOpen(true)
  }, [setDrawerOpen])

@@ -58,7 +58,6 @@ export const Content = React.memo(function Content({
  contentContainerStyle,
  ...props
 }: ContentProps) {
-  const t = useTheme()
  const {footerHeight} = useShellLayout()
  const animatedProps = useAnimatedProps(() => {
    return {
@@ -74,7 +73,6 @@ export const Content = React.memo(function Content({
    <Animated.ScrollView
      id="content"
      automaticallyAdjustsScrollIndicatorInsets={false}
-      indicatorStyle={t.scheme === 'dark' ? 'white' : 'black'}
      // sets the scroll inset to the height of the footer
      animatedProps={animatedProps}
      style={[scrollViewStyles.common, style]}
@@ -6,18 +6,12 @@ import {gradients} from '#/alf/tokens'

 export function LinearGradientBackground({
  style,
-  gradient = 'sky',
  children,
-  start,
-  end,
 }: {
-  style?: StyleProp<ViewStyle>
-  gradient?: keyof typeof gradients
-  children?: React.ReactNode
-  start?: [number, number]
-  end?: [number, number]
+  style: StyleProp<ViewStyle>
+  children: React.ReactNode
 }) {
-  const colors = gradients[gradient].values.map(([_, color]) => {
+  const gradient = gradients.sky.values.map(([_, color]) => {
    return color
  }) as [string, string, ...string[]]

@@ -26,7 +20,7 @@ export function LinearGradientBackground({
  }

  return (
-    <LinearGradient colors={colors} style={style} start={start} end={end}>
+    <LinearGradient colors={gradient} style={style}>
      {children}
    </LinearGradient>
  )
@@ -15,6 +15,7 @@ import {
  linkRequiresWarning,
 } from '#/lib/strings/url-helpers'
 import {isNative, isWeb} from '#/platform/detection'
+import {shouldClickOpenNewTab} from '#/platform/urls'
 import {useModalControls} from '#/state/modals'
 import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf'
 import {Button, ButtonProps} from '#/components/Button'
@@ -54,12 +55,6 @@ type BaseLinkProps = Pick<
   */
  onPress?: (e: GestureResponderEvent) => void | false

-  /**
-   * Callback for when the link is long pressed (on native). Prevent default
-   * and return `false` to exit early and prevent default long press hander.
-   */
-  onLongPress?: (e: GestureResponderEvent) => void | false
-
  /**
   * Web-only attribute. Sets `download` attr on web.
   */
@@ -77,12 +72,9 @@ export function useLink({
  action = 'push',
  disableMismatchWarning,
  onPress: outerOnPress,
-  onLongPress: outerOnLongPress,
  shareOnLongPress,
-  overridePresentation,
 }: BaseLinkProps & {
  displayText: string
-  overridePresentation?: boolean
 }) {
  const navigation = useNavigationDeduped()
  const {href} = useLinkProps<AllNavigatorParams>({
@@ -118,7 +110,7 @@ export function useLink({
        })
      } else {
        if (isExternal) {
-          openLink(href, overridePresentation)
+          openLink(href)
        } else {
          const shouldOpenInNewTab = shouldClickOpenNewTab(e)

@@ -160,7 +152,6 @@ export function useLink({
      closeModal,
      action,
      navigation,
-      overridePresentation,
    ],
  )

@@ -184,14 +175,8 @@ export function useLink({
    }
  }, [disableMismatchWarning, displayText, href, isExternal, openModal])

-  const onLongPress = React.useCallback(
-    (e: GestureResponderEvent) => {
-      const exitEarlyIfFalse = outerOnLongPress?.(e)
-      if (exitEarlyIfFalse === false) return
-      return isNative && shareOnLongPress ? handleLongPress() : undefined
-    },
-    [outerOnLongPress, handleLongPress, shareOnLongPress],
-  )
+  const onLongPress =
+    isNative && isExternal && shareOnLongPress ? handleLongPress : undefined

  return {
    isExternal,
@@ -217,16 +202,14 @@ export function Link({
  to,
  action = 'push',
  onPress: outerOnPress,
-  onLongPress: outerOnLongPress,
  download,
  ...rest
 }: LinkProps) {
-  const {href, isExternal, onPress, onLongPress} = useLink({
+  const {href, isExternal, onPress} = useLink({
    to,
    displayText: typeof children === 'string' ? children : '',
    action,
    onPress: outerOnPress,
-    onLongPress: outerOnLongPress,
  })

  return (
@@ -237,7 +220,6 @@ export function Link({
      accessibilityRole="link"
      href={href}
      onPress={download ? undefined : onPress}
-      onLongPress={onLongPress}
      {...web({
        hrefAttrs: {
          target: download ? undefined : isExternal ? 'blank' : undefined,
@@ -257,13 +239,12 @@ export function Link({
 export type InlineLinkProps = React.PropsWithChildren<
  BaseLinkProps &
    TextStyleProp &
-    Pick<TextProps, 'selectable' | 'numberOfLines'> &
-    Pick<ButtonProps, 'label' | 'accessibilityHint'> & {
-      disableUnderline?: boolean
-      title?: TextProps['title']
-      overridePresentation?: boolean
-    }
->
+    Pick<TextProps, 'selectable' | 'numberOfLines'>
+> &
+  Pick<ButtonProps, 'label'> & {
+    disableUnderline?: boolean
+    title?: TextProps['title']
+  }

 export function InlineLinkText({
  children,
@@ -272,13 +253,11 @@ export function InlineLinkText({
  disableMismatchWarning,
  style,
  onPress: outerOnPress,
-  onLongPress: outerOnLongPress,
  download,
  selectable,
  label,
  shareOnLongPress,
  disableUnderline,
-  overridePresentation,
  ...rest
 }: InlineLinkProps) {
  const t = useTheme()
@@ -289,9 +268,7 @@ export function InlineLinkText({
    action,
    disableMismatchWarning,
    onPress: outerOnPress,
-    onLongPress: outerOnLongPress,
    shareOnLongPress,
-    overridePresentation,
  })
  const {
    state: hovered,
@@ -342,21 +319,6 @@ export function InlineLinkText({
  )
 }

-export function WebOnlyInlineLinkText({
-  children,
-  to,
-  onPress,
-  ...props
-}: Omit<InlineLinkProps, 'onLongPress'>) {
-  return isWeb ? (
-    <InlineLinkText {...props} to={to} onPress={onPress}>
-      {children}
-    </InlineLinkText>
-  ) : (
-    <Text {...props}>{children}</Text>
-  )
-}
-
 /**
 * Utility to create a static `onPress` handler for a `Link` that would otherwise link to a URI
 *
@@ -365,10 +327,7 @@ export function WebOnlyInlineLinkText({
 */
 export function createStaticClick(
  onPressHandler: Exclude<BaseLinkProps['onPress'], undefined>,
-): {
-  to: BaseLinkProps['to']
-  onPress: Exclude<BaseLinkProps['onPress'], undefined>
-} {
+): Pick<BaseLinkProps, 'to' | 'onPress'> {
  return {
    to: '#',
    onPress(e: GestureResponderEvent) {
@@ -379,72 +338,17 @@ export function createStaticClick(
  }
 }

-/**
- * Utility to create a static `onPress` handler for a `Link`, but only if the
- * click was not modified in some way e.g. `Cmd` or a middle click.
- *
- * On native, this behaves the same as `createStaticClick` because there are no
- * options to "modify" the click in this sense.
- *
- * Example:
- *   `<Link {...createStaticClick(e => {...})} />`
- */
-export function createStaticClickIfUnmodified(
-  onPressHandler: Exclude<BaseLinkProps['onPress'], undefined>,
-): {onPress: Exclude<BaseLinkProps['onPress'], undefined>} {
-  return {
-    onPress(e: GestureResponderEvent) {
-      if (!isWeb || !isModifiedClickEvent(e)) {
-        e.preventDefault()
-        onPressHandler(e)
-        return false
-      }
-    },
-  }
-}
-
-/**
- * Determines if the click event has a meta key pressed, indicating the user
- * intends to deviate from default behavior.
- */
-export function isClickEventWithMetaKey(e: GestureResponderEvent) {
-  if (!isWeb) return false
-  const event = e as unknown as MouseEvent
-  return event.metaKey || event.altKey || event.ctrlKey || event.shiftKey
-}
-
-/**
- * Determines if the web click target is anything other than `_self`
- */
-export function isClickTargetExternal(e: GestureResponderEvent) {
-  if (!isWeb) return false
-  const event = e as unknown as MouseEvent
-  const el = event.currentTarget as HTMLAnchorElement
-  return el && el.target && el.target !== '_self'
-}
-
-/**
- * Determines if a click event has been modified in some way from its default
- * behavior, e.g. `Cmd` or a middle click.
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button}
- */
-export function isModifiedClickEvent(e: GestureResponderEvent): boolean {
-  if (!isWeb) return false
-  const event = e as unknown as MouseEvent
-  const isPrimaryButton = event.button === 0
-  return (
-    isClickEventWithMetaKey(e) || isClickTargetExternal(e) || !isPrimaryButton
+export function WebOnlyInlineLinkText({
+  children,
+  to,
+  onPress,
+  ...props
+}: InlineLinkProps) {
+  return isWeb ? (
+    <InlineLinkText {...props} to={to} onPress={onPress}>
+      {children}
+    </InlineLinkText>
+  ) : (
+    <Text {...props}>{children}</Text>
  )
 }
-
-/**
- * Determines if a click event has been modified in a way that should indiciate
- * that the user intends to open a new tab.
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button}
- */
-export function shouldClickOpenNewTab(e: GestureResponderEvent) {
-  if (!isWeb) return false
-  const event = e as unknown as MouseEvent
-  const isMiddleClick = isWeb && event.button === 1
-  return isClickEventWithMetaKey(e) || isClickTargetExternal(e) || isMiddleClick
-}
@@ -20,7 +20,6 @@ export function ListFooter({
  style,
  showEndMessage = false,
  endMessageText,
-  renderEndMessage,
 }: {
  isFetchingNextPage?: boolean
  hasNextPage?: boolean
@@ -30,7 +29,6 @@ export function ListFooter({
  style?: StyleProp<ViewStyle>
  showEndMessage?: boolean
  endMessageText?: string
-  renderEndMessage?: () => React.ReactNode
 }) {
  const t = useTheme()

@@ -50,13 +48,9 @@ export function ListFooter({
      ) : error ? (
        <ListFooterMaybeError error={error} onRetry={onRetry} />
      ) : !hasNextPage && showEndMessage ? (
-        renderEndMessage ? (
-          renderEndMessage()
-        ) : (
-          <Text style={[a.text_sm, t.atoms.text_contrast_low]}>
-            {endMessageText ?? <Trans>You have reached the end</Trans>}
-          </Text>
-        )
+        <Text style={[a.text_sm, t.atoms.text_contrast_low]}>
+          {endMessageText ?? <Trans>You have reached the end</Trans>}
+        </Text>
      ) : null}
    </View>
  )
@@ -47,12 +47,7 @@ export function Root({
  return <Context.Provider value={context}>{children}</Context.Provider>
 }

-export function Trigger({
-  children,
-  label,
-  role = 'button',
-  hint,
-}: TriggerProps) {
+export function Trigger({children, label, role = 'button'}: TriggerProps) {
  const context = useMenuContext()
  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
  const {
@@ -70,13 +65,11 @@ export function Trigger({
      pressed,
    },
    props: {
-      ref: null,
      onPress: context.control.open,
      onFocus,
      onBlur,
      onPressIn,
      onPressOut,
-      accessibilityHint: hint,
      accessibilityLabel: label,
      accessibilityRole: role,
    },
@@ -4,7 +4,6 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'

-import {useA11y} from '#/state/a11y'
 import {atoms as a, flatten, useTheme, web} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -111,12 +110,7 @@ const RadixTriggerPassThrough = React.forwardRef(
 )
 RadixTriggerPassThrough.displayName = 'RadixTriggerPassThrough'

-export function Trigger({
-  children,
-  label,
-  role = 'button',
-  hint,
-}: TriggerProps) {
+export function Trigger({children, label, role = 'button'}: TriggerProps) {
  const {control} = useMenuContext()
  const {
    state: hovered,
@@ -159,7 +153,6 @@ export function Trigger({
              onBlur: onBlur,
              onMouseEnter,
              onMouseLeave,
-              accessibilityHint: hint,
              accessibilityLabel: label,
              accessibilityRole: role,
            },
@@ -178,16 +171,10 @@ export function Outer({
  style?: StyleProp<ViewStyle>
 }>) {
  const t = useTheme()
-  const {reduceMotionEnabled} = useA11y()

  return (
    <DropdownMenu.Portal>
-      <DropdownMenu.Content
-        sideOffset={5}
-        collisionPadding={{left: 5, right: 5, bottom: 5}}
-        loop
-        aria-label="Test"
-        className="dropdown-menu-transform-origin">
+      <DropdownMenu.Content sideOffset={5} loop aria-label="Test">
        <View
          style={[
            a.rounded_sm,
@@ -196,8 +183,6 @@ export function Outer({
            t.name === 'light' ? t.atoms.bg : t.atoms.bg_contrast_25,
            t.atoms.shadow_md,
            t.atoms.border_contrast_low,
-            a.overflow_auto,
-            !reduceMotionEnabled && a.zoom_fade_in,
            style,
          ]}>
          {children}
@@ -217,7 +202,7 @@ export function Outer({
  )
 }

-export function Item({children, label, onPress, style, ...rest}: ItemProps) {
+export function Item({children, label, onPress, ...rest}: ItemProps) {
  const t = useTheme()
  const {control} = useMenuContext()
  const {
@@ -263,7 +248,6 @@ export function Item({children, label, onPress, style, ...rest}: ItemProps) {
                ? t.atoms.bg_contrast_25
                : t.atoms.bg_contrast_50,
            ],
-          style,
        ])}
        {...web({
          onMouseEnter,
@@ -382,8 +366,9 @@ export function Divider() {
      style={flatten([
        a.my_xs,
        t.atoms.bg_contrast_100,
-        a.flex_shrink_0,
-        {height: 1},
+        {
+          height: 1,
+        },
      ])}
    />
  )
@@ -19,7 +19,6 @@ export type ItemContextType = {
 }

 export type RadixPassThroughTriggerProps = {
-  ref: React.RefObject<any>
  id: string
  type: 'button'
  disabled: boolean
@@ -38,7 +37,6 @@ export type RadixPassThroughTriggerProps = {
 export type TriggerProps = {
  children(props: TriggerChildProps): React.ReactNode
  label: string
-  hint?: string
  role?: AccessibilityRole
 }
 export type TriggerChildProps =
@@ -61,13 +59,11 @@ export type TriggerChildProps =
       * object is empty.
       */
      props: {
-        ref: null
        onPress: () => void
        onFocus: () => void
        onBlur: () => void
        onPressIn: () => void
        onPressOut: () => void
-        accessibilityHint?: string
        accessibilityLabel: string
        accessibilityRole: AccessibilityRole
      }
@@ -89,7 +85,6 @@ export type TriggerChildProps =
        onBlur: () => void
        onMouseEnter: () => void
        onMouseLeave: () => void
-        accessibilityHint?: string
        accessibilityLabel: string
        accessibilityRole: AccessibilityRole
      }
@@ -126,7 +126,7 @@ export function Label({
                fill={t.atoms.text_contrast_medium.color}
              />
            ) : (
-              <UserAvatar avatar={desc.sourceAvi} type="user" size={avi} />
+              <UserAvatar avatar={desc.sourceAvi} size={avi} />
            )}

            <Text
@@ -286,7 +286,6 @@ export type FollowButtonProps = {
  logContext: LogEvents['profile:follow']['logContext'] &
    LogEvents['profile:unfollow']['logContext']
  colorInverted?: boolean
-  onFollow?: () => void
 } & Partial<ButtonProps>

 export function FollowButton(props: FollowButtonProps) {
@@ -300,7 +299,6 @@ export function FollowButtonInner({
  moderationOpts,
  logContext,
  onPress: onPressProp,
-  onFollow,
  colorInverted,
  ...rest
 }: FollowButtonProps) {
@@ -327,7 +325,6 @@ export function FollowButtonInner({
        ),
      )
      onPressProp?.(e)
-      onFollow?.()
    } catch (err: any) {
      if (err?.name !== 'AbortError') {
        Toast.show(_(msg`An issue occurred, please try again.`), 'xmark')
@@ -10,7 +10,6 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
-import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
@@ -76,10 +75,7 @@ export function FollowDialog({guide}: {guide: Follow10ProgressGuide}) {
    <>
      <Button
        label={_(msg`Find people to follow`)}
-        onPress={() => {
-          control.open()
-          logEvent('progressGuide:followDialog:open', {})
-        }}
+        onPress={control.open}
        size={gtMobile ? 'small' : 'large'}
        color="primary"
        variant="solid">
@@ -762,7 +758,7 @@ function SearchInput({
        autoComplete="off"
        autoCapitalize="none"
        accessibilityLabel={_(msg`Search profiles`)}
-        accessibilityHint={_(msg`Searches for profiles`)}
+        accessibilityHint={_(msg`Search profiles`)}
      />
    </View>
  )
@@ -25,7 +25,9 @@ import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from
 import {Text} from '#/components/Typography'
 import {ReportDialogProps} from './types'

-export function SelectReportOptionView(props: {
+export function SelectReportOptionView({
+  ...props
+}: {
  params: ReportDialogProps['params']
  labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
  onSelectReportOption: (reportOption: ReportOption) => void
@@ -16,7 +16,6 @@ import * as Dialog from '#/components/Dialog'
 import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
-import {PaperPlane_Stroke2_Corner0_Rounded as SendIcon} from '#/components/icons/PaperPlane'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {ReportDialogProps} from './types'
@@ -224,7 +223,7 @@ export function SubmitView({
          <ButtonText>
            <Trans>Send report</Trans>
          </ButtonText>
-          <ButtonIcon icon={submitting ? Loader : SendIcon} />
+          {submitting && <ButtonIcon icon={Loader} />}
        </Button>
      </View>
      {/* Maybe fix this later -h */}
@@ -1,19 +1,25 @@
 import React from 'react'
 import {TextStyle} from 'react-native'
 import {AppBskyRichtextFacet, RichText as RichTextAPI} from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'

+import {NavigationProp} from '#/lib/routes/types'
 import {toShortUrl} from '#/lib/strings/url-helpers'
-import {atoms as a, flatten, TextStyleProp} from '#/alf'
+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'
-import {RichTextTag} from '#/components/RichTextTag'
+import {TagMenu, useTagMenuControl} from '#/components/TagMenu'
 import {Text, TextProps} from '#/components/Typography'

 const WORD_WRAP = {wordWrap: 1}

 export type RichTextProps = TextStyleProp &
-  Pick<TextProps, 'selectable' | 'onLayout' | 'onTextLayout'> & {
+  Pick<TextProps, 'selectable'> & {
    value: RichTextAPI | string
    testID?: string
    numberOfLines?: number
@@ -37,8 +43,6 @@ export function RichText({
  onLinkPress,
  interactiveStyle,
  emojiMultiplier = 1.85,
-  onLayout,
-  onTextLayout,
 }: RichTextProps) {
  const richText = React.useMemo(
    () =>
@@ -66,8 +70,6 @@ export function RichText({
          selectable={selectable}
          testID={testID}
          style={[plainStyles, {fontSize}]}
-          onLayout={onLayout}
-          onTextLayout={onTextLayout}
          // @ts-ignore web only -prf
          dataSet={WORD_WRAP}>
          {text}
@@ -81,8 +83,6 @@ export function RichText({
        testID={testID}
        style={plainStyles}
        numberOfLines={numberOfLines}
-        onLayout={onLayout}
-        onTextLayout={onTextLayout}
        // @ts-ignore web only -prf
        dataSet={WORD_WRAP}>
        {text}
@@ -143,9 +143,10 @@ export function RichText({
      els.push(
        <RichTextTag
          key={key}
-          display={segment.text}
+          text={segment.text}
          tag={tag.tag}
-          textStyle={interactiveStyles}
+          style={interactiveStyles}
+          selectable={selectable}
          authorHandle={authorHandle}
        />,
      )
@@ -162,11 +163,88 @@ export function RichText({
      testID={testID}
      style={plainStyles}
      numberOfLines={numberOfLines}
-      onLayout={onLayout}
-      onTextLayout={onTextLayout}
      // @ts-ignore web only -prf
      dataSet={WORD_WRAP}>
      {els}
    </Text>
  )
 }
+
+function RichTextTag({
+  text,
+  tag,
+  style,
+  selectable,
+  authorHandle,
+}: {
+  text: string
+  tag: string
+  selectable?: boolean
+  authorHandle?: string
+} & TextStyleProp) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const control = useTagMenuControl()
+  const {
+    state: hovered,
+    onIn: onHoverIn,
+    onOut: onHoverOut,
+  } = useInteractionState()
+  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
+  const navigation = useNavigation<NavigationProp>()
+
+  const navigateToPage = React.useCallback(() => {
+    navigation.push('Hashtag', {
+      tag: encodeURIComponent(tag),
+    })
+  }, [navigation, tag])
+
+  const openDialog = React.useCallback(() => {
+    control.open()
+  }, [control])
+
+  /*
+   * N.B. On web, this is wrapped in another pressable comopnent with a11y
+   * labels, etc. That's why only some of these props are applied here.
+   */
+
+  return (
+    <React.Fragment>
+      <TagMenu control={control} tag={tag} authorHandle={authorHandle}>
+        <Text
+          emoji
+          selectable={selectable}
+          {...native({
+            accessibilityLabel: _(msg`Hashtag: #${tag}`),
+            accessibilityHint: _(msg`Long press to open tag menu for #${tag}`),
+            accessibilityRole: isNative ? 'button' : undefined,
+            onPress: navigateToPage,
+            onLongPress: openDialog,
+          })}
+          {...web({
+            onMouseEnter: onHoverIn,
+            onMouseLeave: onHoverOut,
+          })}
+          // @ts-ignore
+          onFocus={onFocus}
+          onBlur={onBlur}
+          style={[
+            web({
+              cursor: 'pointer',
+            }),
+            {color: t.palette.primary_500},
+            (hovered || focused) && {
+              ...web({
+                outline: 0,
+                textDecorationLine: 'underline',
+                textDecorationColor: t.palette.primary_500,
+              }),
+            },
+            style,
+          ]}>
+          {text}
+        </Text>
+      </TagMenu>
+    </React.Fragment>
+  )
+}
@@ -1,160 +0,0 @@
-import React from 'react'
-import {StyleProp, Text as RNText, TextStyle} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useNavigation} from '@react-navigation/native'
-
-import {NavigationProp} from '#/lib/routes/types'
-import {isInvalidHandle} from '#/lib/strings/handles'
-import {isNative, isWeb} from '#/platform/detection'
-import {
-  usePreferencesQuery,
-  useRemoveMutedWordsMutation,
-  useUpsertMutedWordsMutation,
-} from '#/state/queries/preferences'
-import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
-import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
-import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
-import {
-  createStaticClick,
-  createStaticClickIfUnmodified,
-  InlineLinkText,
-} from '#/components/Link'
-import {Loader} from '#/components/Loader'
-import * as Menu from '#/components/Menu'
-
-export function RichTextTag({
-  tag,
-  display,
-  authorHandle,
-  textStyle,
-}: {
-  tag: string
-  display: string
-  authorHandle?: string
-  textStyle: StyleProp<TextStyle>
-}) {
-  const {_} = useLingui()
-  const {isLoading: isPreferencesLoading, data: preferences} =
-    usePreferencesQuery()
-  const {
-    mutateAsync: upsertMutedWord,
-    variables: optimisticUpsert,
-    reset: resetUpsert,
-  } = useUpsertMutedWordsMutation()
-  const {
-    mutateAsync: removeMutedWords,
-    variables: optimisticRemove,
-    reset: resetRemove,
-  } = useRemoveMutedWordsMutation()
-  const navigation = useNavigation<NavigationProp>()
-  const label = _(msg`Hashtag ${tag}`)
-  const hint = isNative
-    ? _(msg`Long press to open tag menu for #${tag}`)
-    : _(msg`Click to open tag menu for ${tag}`)
-
-  const isMuted = Boolean(
-    (preferences?.moderationPrefs.mutedWords?.find(
-      m => m.value === tag && m.targets.includes('tag'),
-    ) ??
-      optimisticUpsert?.find(
-        m => m.value === tag && m.targets.includes('tag'),
-      )) &&
-      !optimisticRemove?.find(m => m?.value === tag),
-  )
-
-  /*
-   * Mute word records that exactly match the tag in question.
-   */
-  const removeableMuteWords = React.useMemo(() => {
-    return (
-      preferences?.moderationPrefs.mutedWords?.filter(word => {
-        return word.value === tag
-      }) || []
-    )
-  }, [tag, preferences?.moderationPrefs?.mutedWords])
-
-  return (
-    <Menu.Root>
-      <Menu.Trigger label={label} hint={hint}>
-        {({props: menuProps}) => (
-          <InlineLinkText
-            to={{
-              screen: 'Hashtag',
-              params: {tag: encodeURIComponent(tag)},
-            }}
-            {...menuProps}
-            onPress={e => {
-              if (isWeb) {
-                return createStaticClickIfUnmodified(() => {
-                  if (!isNative) {
-                    menuProps.onPress()
-                  }
-                }).onPress(e)
-              }
-            }}
-            onLongPress={createStaticClick(menuProps.onPress).onPress}
-            accessibilityHint={hint}
-            label={label}
-            style={textStyle}>
-            {isNative ? (
-              display
-            ) : (
-              <RNText ref={menuProps.ref}>{display}</RNText>
-            )}
-          </InlineLinkText>
-        )}
-      </Menu.Trigger>
-      <Menu.Outer>
-        <Menu.Group>
-          <Menu.Item
-            label={_(msg`See ${tag} posts`)}
-            onPress={() => {
-              navigation.push('Hashtag', {
-                tag: encodeURIComponent(tag),
-              })
-            }}>
-            <Menu.ItemText>
-              <Trans>See #{tag} posts</Trans>
-            </Menu.ItemText>
-            <Menu.ItemIcon icon={Search} />
-          </Menu.Item>
-          {authorHandle && !isInvalidHandle(authorHandle) && (
-            <Menu.Item
-              label={_(msg`See ${tag} posts by user`)}
-              onPress={() => {
-                navigation.push('Hashtag', {
-                  tag: encodeURIComponent(tag),
-                  author: authorHandle,
-                })
-              }}>
-              <Menu.ItemText>
-                <Trans>See #{tag} posts by user</Trans>
-              </Menu.ItemText>
-              <Menu.ItemIcon icon={Person} />
-            </Menu.Item>
-          )}
-        </Menu.Group>
-        <Menu.Divider />
-        <Menu.Item
-          label={isMuted ? _(msg`Unmute ${tag}`) : _(msg`Mute ${tag}`)}
-          onPress={() => {
-            if (isMuted) {
-              resetUpsert()
-              removeMutedWords(removeableMuteWords)
-            } else {
-              resetRemove()
-              upsertMutedWord([
-                {value: tag, targets: ['tag'], actorTarget: 'all'},
-              ])
-            }
-          }}>
-          <Menu.ItemText>
-            {isMuted ? _(msg`Unmute ${tag}`) : _(msg`Mute ${tag}`)}
-          </Menu.ItemText>
-          <Menu.ItemIcon icon={isPreferencesLoading ? Loader : Mute} />
-        </Menu.Item>
-      </Menu.Outer>
-    </Menu.Root>
-  )
-}
@@ -136,6 +136,7 @@ export const ProfileStarterPacks = React.forwardRef<
        headerOffset={headerOffset}
        progressViewOffset={ios(0)}
        contentContainerStyle={{paddingBottom: headerOffset + bottomBarOffset}}
+        indicatorStyle={t.name === 'light' ? 'black' : 'white'}
        removeClippedSubviews={true}
        desktopFixedHeight
        onEndReached={onEndReached}
@@ -12,7 +12,7 @@ import {precacheResolvedUri} from '#/state/queries/resolve-uri'
 import {precacheStarterPack} from '#/state/queries/starter-packs'
 import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
-import {StarterPack as StarterPackIcon} from '#/components/icons/StarterPack'
+import {StarterPack} from '#/components/icons/StarterPack'
 import {Link as BaseLink, LinkProps as BaseLinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'

@@ -64,7 +64,7 @@ export function Card({
  return (
    <View style={[a.w_full, a.gap_md]}>
      <View style={[a.flex_row, a.gap_sm, a.w_full]}>
-        {!noIcon ? <StarterPackIcon width={40} gradient="sky" /> : null}
+        {!noIcon ? <StarterPack width={40} gradient="sky" /> : null}
        <View style={[a.flex_1]}>
          <Text
            emoji
@@ -0,0 +1,290 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {isInvalidHandle} from '#/lib/strings/handles'
+import {
+  usePreferencesQuery,
+  useRemoveMutedWordsMutation,
+  useUpsertMutedWordsMutation,
+} from '#/state/queries/preferences'
+import {atoms as a, native, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {Divider} from '#/components/Divider'
+import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
+import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
+import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
+import {createStaticClick, Link} from '#/components/Link'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+export function useTagMenuControl() {
+  return Dialog.useDialogControl()
+}
+
+export function TagMenu({
+  children,
+  control,
+  tag,
+  authorHandle,
+}: React.PropsWithChildren<{
+  control: Dialog.DialogOuterProps['control']
+  /**
+   * This should be the sanitized tag value from the facet itself, not the
+   * "display" value with a leading `#`.
+   */
+  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 {isLoading: isPreferencesLoading, data: preferences} =
+    usePreferencesQuery()
+  const {
+    mutateAsync: upsertMutedWord,
+    variables: optimisticUpsert,
+    reset: resetUpsert,
+  } = useUpsertMutedWordsMutation()
+  const {
+    mutateAsync: removeMutedWords,
+    variables: optimisticRemove,
+    reset: resetRemove,
+  } = useRemoveMutedWordsMutation()
+  const displayTag = '#' + tag
+
+  const isMuted = Boolean(
+    (preferences?.moderationPrefs.mutedWords?.find(
+      m => m.value === tag && m.targets.includes('tag'),
+    ) ??
+      optimisticUpsert?.find(
+        m => m.value === tag && m.targets.includes('tag'),
+      )) &&
+      !optimisticRemove?.find(m => m?.value === tag),
+  )
+
+  /*
+   * Mute word records that exactly match the tag in question.
+   */
+  const removeableMuteWords = React.useMemo(() => {
+    return (
+      preferences?.moderationPrefs.mutedWords?.filter(word => {
+        return word.value === tag
+      }) || []
+    )
+  }, [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),
+                  })
+                })
+              })}>
+              <View
+                style={[
+                  a.w_full,
+                  a.flex_row,
+                  a.align_center,
+                  a.justify_start,
+                  a.gap_md,
+                  a.px_lg,
+                  a.py_md,
+                ]}>
+                <Search size="lg" style={[t.atoms.text_contrast_medium]} />
+                <Text
+                  numberOfLines={1}
+                  ellipsizeMode="middle"
+                  style={[
+                    a.flex_1,
+                    a.text_md,
+                    a.font_bold,
+                    native({top: 2}),
+                    t.atoms.text_contrast_medium,
+                  ]}>
+                  <Trans>
+                    See{' '}
+                    <Text style={[a.text_md, a.font_bold, t.atoms.text]}>
+                      {displayTag}
+                    </Text>{' '}
+                    posts
+                  </Trans>
+                </Text>
+              </View>
+            </Link>
+
+            {authorHandle && !isInvalidHandle(authorHandle) && (
+              <>
+                <Divider />
+
+                <Link
+                  label={_(
+                    msg`View all posts 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`)
+                  }
+                  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>
+  )
+}
@@ -0,0 +1,163 @@
+import React from 'react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {isInvalidHandle} from '#/lib/strings/handles'
+import {enforceLen} from '#/lib/strings/helpers'
+import {
+  usePreferencesQuery,
+  useRemoveMutedWordsMutation,
+  useUpsertMutedWordsMutation,
+} from '#/state/queries/preferences'
+import {EventStopper} from '#/view/com/util/EventStopper'
+import {NativeDropdown} from '#/view/com/util/forms/NativeDropdown'
+import {web} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+
+export function useTagMenuControl(): Dialog.DialogControlProps {
+  return {
+    id: '',
+    // @ts-ignore
+    ref: null,
+    open: () => {
+      throw new Error(`TagMenu controls are only available on native platforms`)
+    },
+    close: () => {
+      throw new Error(`TagMenu controls are only available on native platforms`)
+    },
+  }
+}
+
+export function TagMenu({
+  children,
+  tag,
+  authorHandle,
+}: React.PropsWithChildren<{
+  /**
+   * This should be the sanitized tag value from the facet itself, not the
+   * "display" value with a leading `#`.
+   */
+  tag: string
+  authorHandle?: string
+}>) {
+  const {_} = useLingui()
+  const navigation = useNavigation<NavigationProp>()
+  const {data: preferences} = usePreferencesQuery()
+  const {mutateAsync: upsertMutedWord, variables: optimisticUpsert} =
+    useUpsertMutedWordsMutation()
+  const {mutateAsync: removeMutedWords, variables: optimisticRemove} =
+    useRemoveMutedWordsMutation()
+  const isMuted = Boolean(
+    (preferences?.moderationPrefs.mutedWords?.find(
+      m => m.value === tag && m.targets.includes('tag'),
+    ) ??
+      optimisticUpsert?.find(
+        m => m.value === tag && m.targets.includes('tag'),
+      )) &&
+      !optimisticRemove?.find(m => m?.value === tag),
+  )
+  const truncatedTag = '#' + enforceLen(tag, 15, true, 'middle')
+
+  /*
+   * Mute word records that exactly match the tag in question.
+   */
+  const removeableMuteWords = React.useMemo(() => {
+    return (
+      preferences?.moderationPrefs.mutedWords?.filter(word => {
+        return word.value === tag
+      }) || []
+    )
+  }, [tag, preferences?.moderationPrefs?.mutedWords])
+
+  const dropdownItems = React.useMemo(() => {
+    return [
+      {
+        label: _(msg`See ${truncatedTag} posts`),
+        onPress() {
+          navigation.push('Hashtag', {
+            tag: encodeURIComponent(tag),
+          })
+        },
+        testID: 'tagMenuSearch',
+        icon: {
+          ios: {
+            name: 'magnifyingglass',
+          },
+          android: '',
+          web: 'magnifying-glass',
+        },
+      },
+      authorHandle &&
+        !isInvalidHandle(authorHandle) && {
+          label: _(msg`See ${truncatedTag} posts by user`),
+          onPress() {
+            navigation.push('Hashtag', {
+              tag: encodeURIComponent(tag),
+              author: authorHandle,
+            })
+          },
+          testID: 'tagMenuSearchByUser',
+          icon: {
+            ios: {
+              name: 'magnifyingglass',
+            },
+            android: '',
+            web: ['far', 'user'],
+          },
+        },
+      preferences && {
+        label: 'separator',
+      },
+      preferences && {
+        label: isMuted
+          ? _(msg`Unmute ${truncatedTag}`)
+          : _(msg`Mute ${truncatedTag}`),
+        onPress() {
+          if (isMuted) {
+            removeMutedWords(removeableMuteWords)
+          } else {
+            upsertMutedWord([
+              {value: tag, targets: ['tag'], actorTarget: 'all'},
+            ])
+          }
+        },
+        testID: 'tagMenuMute',
+        icon: {
+          ios: {
+            name: 'speaker.slash',
+          },
+          android: 'ic_menu_sort_alphabetically',
+          web: isMuted ? 'eye' : ['far', 'eye-slash'],
+        },
+      },
+    ].filter(Boolean)
+  }, [
+    _,
+    authorHandle,
+    isMuted,
+    navigation,
+    preferences,
+    tag,
+    truncatedTag,
+    upsertMutedWord,
+    removeMutedWords,
+    removeableMuteWords,
+  ])
+
+  return (
+    <EventStopper>
+      <NativeDropdown
+        accessibilityLabel={_(msg`Click here to open tag menu for ${tag}`)}
+        accessibilityHint=""
+        // @ts-ignore
+        items={dropdownItems}
+        triggerStyle={web({
+          textAlign: 'left',
+        })}>
+        {children}
+      </NativeDropdown>
+    </EventStopper>
+  )
+}
@@ -12,7 +12,6 @@ import {PressableScale} from '#/lib/custom-animations/PressableScale'
 // import {UserAvatar} from '#/view/com/util/UserAvatar'
 import type {TrendingTopic} from '#/state/queries/trending/useTrendingTopics'
 import {atoms as a, native, useTheme, ViewStyleProp} from '#/alf'
-import {StarterPack as StarterPackIcon} from '#/components/icons/StarterPack'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'

@@ -25,8 +24,9 @@ export function TrendingTopic({
  const topic = useTopic(raw)

  const isSmall = size === 'small'
-  const hasIcon = topic.type === 'starter-pack' && !isSmall
-  const iconSize = 20
+  // const hasAvi = topic.type === 'feed' || topic.type === 'profile'
+  // const aviSize = isSmall ? 16 : 20
+  // const iconSize = isSmall ? 16 : 20

  return (
    <View
@@ -45,47 +45,45 @@ export function TrendingTopic({
              },
            ]
          : [a.py_sm, a.px_md],
-        hasIcon && {gap: 6},
        style,
+        /*
+        {
+          padding: 6,
+          gap: hasAvi ? 4 : 2,
+        },
+        a.pr_md,
+       */
      ]}>
-      {hasIcon && topic.type === 'starter-pack' && (
-        <StarterPackIcon
-          gradient="sky"
-          width={iconSize}
-          style={{marginLeft: -3, marginVertical: -1}}
-        />
-      )}
-
      {/*
-        <View
-          style={[
-            a.align_center,
-            a.justify_center,
-            a.rounded_full,
-            a.overflow_hidden,
-            {
-              width: iconSize,
-              height: iconSize,
-            },
-          ]}>
-          {topic.type === 'tag' ? (
-            <Hashtag width={iconSize} />
-          ) : topic.type === 'topic' ? (
-            <Quote width={iconSize - 2} />
-          ) : topic.type === 'feed' ? (
-            <UserAvatar
-              type="user"
-              size={aviSize}
-              avatar=""
-            />
-          ) : (
-            <UserAvatar
-              type="user"
-              size={aviSize}
-              avatar=""
-            />
-          )}
-        </View>
+      <View
+        style={[
+          a.align_center,
+          a.justify_center,
+          a.rounded_full,
+          a.overflow_hidden,
+          {
+            width: aviSize,
+            height: aviSize,
+          },
+        ]}>
+        {topic.type === 'tag' ? (
+          <Hashtag width={iconSize} />
+        ) : topic.type === 'topic' ? (
+          <Quote width={iconSize - 2} />
+        ) : topic.type === 'feed' ? (
+          <UserAvatar
+            type="user"
+            size={aviSize}
+            avatar=""
+          />
+        ) : (
+          <UserAvatar
+            type="user"
+            size={aviSize}
+            avatar=""
+          />
+        )}
+      </View>
        */}

      <Text
@@ -153,7 +151,7 @@ export function TrendingTopicLink({

 type ParsedTrendingTopic =
  | {
-      type: 'topic' | 'tag' | 'starter-pack' | 'unknown'
+      type: 'topic' | 'tag' | 'unknown'
      label: string
      displayName: string
      url: string
@@ -189,14 +187,6 @@ export function useTopic(raw: TrendingTopic): ParsedTrendingTopic {
        uri: undefined,
        url: link,
      }
-    } else if (link.startsWith('/starter-pack')) {
-      return {
-        type: 'starter-pack',
-        label: _(msg`Browse starter pack ${displayName}`),
-        displayName,
-        uri: undefined,
-        url: link,
-      }
    }

    /*
@@ -1,540 +0,0 @@
-import {useMemo} from 'react'
-import {View} from 'react-native'
-import {Image} from 'expo-image'
-import {LinearGradient} from 'expo-linear-gradient'
-import {
-  AppBskyActorDefs,
-  AppBskyEmbedVideo,
-  AppBskyFeedDefs,
-  AppBskyFeedPost,
-  ModerationDecision,
-} from '@atproto/api'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {sanitizeHandle} from '#/lib/strings/handles'
-import {formatCount} from '#/view/com/util/numeric/format'
-import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {VideoFeedSourceContext} from '#/screens/VideoFeed/types'
-import {atoms as a, useTheme} from '#/alf'
-import {BLUE_HUE} from '#/alf/util/colorGeneration'
-import {select} from '#/alf/util/themeSelector'
-import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {EyeSlash_Stroke2_Corner0_Rounded as Eye} from '#/components/icons/EyeSlash'
-import {Heart2_Stroke2_Corner0_Rounded as Heart} from '#/components/icons/Heart2'
-import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
-import {Link} from '#/components/Link'
-import {MediaInsetBorder} from '#/components/MediaInsetBorder'
-import * as Hider from '#/components/moderation/Hider'
-import {Text} from '#/components/Typography'
-
-function getBlackColor(t: ReturnType<typeof useTheme>) {
-  return select(t.name, {
-    light: t.palette.black,
-    dark: t.atoms.bg_contrast_25.backgroundColor,
-    dim: `hsl(${BLUE_HUE}, 28%, 6%)`,
-  })
-}
-
-export function VideoPostCard({
-  post,
-  sourceContext,
-  moderation,
-  onInteract,
-}: {
-  post: AppBskyFeedDefs.PostView
-  sourceContext: VideoFeedSourceContext
-  moderation: ModerationDecision
-  /**
-   * Callback for metrics etc
-   */
-  onInteract?: () => void
-}) {
-  const t = useTheme()
-  const {_, i18n} = useLingui()
-  const embed = post.embed
-  const {
-    state: pressed,
-    onIn: onPressIn,
-    onOut: onPressOut,
-  } = useInteractionState()
-
-  const listModUi = moderation.ui('contentList')
-
-  const mergedModui = useMemo(() => {
-    const modui = moderation.ui('contentList')
-    const mediaModui = moderation.ui('contentMedia')
-    modui.alerts = [...modui.alerts, ...mediaModui.alerts]
-    modui.blurs = [...modui.blurs, ...mediaModui.blurs]
-    modui.filters = [...modui.filters, ...mediaModui.filters]
-    modui.informs = [...modui.informs, ...mediaModui.informs]
-    return modui
-  }, [moderation])
-
-  /**
-   * Filtering should be done at a higher level, such as `PostFeed` or
-   * `PostFeedVideoGridRow`, but we need to protect here as well.
-   */
-  if (!AppBskyEmbedVideo.isView(embed)) return null
-
-  const author = post.author
-  const text = AppBskyFeedPost.isRecord(post.record) ? post.record?.text : ''
-  const likeCount = post?.likeCount ?? 0
-  const repostCount = post?.repostCount ?? 0
-  const {thumbnail} = embed
-  const black = getBlackColor(t)
-
-  const textAndAuthor = (
-    <View style={[a.pr_xs, {paddingTop: 6, gap: 4}]}>
-      {text && (
-        <Text style={[a.text_md, a.leading_snug]} numberOfLines={2} emoji>
-          {text}
-        </Text>
-      )}
-      <View style={[a.flex_row, a.gap_xs, a.align_center]}>
-        <View style={[a.relative, a.rounded_full, {width: 20, height: 20}]}>
-          <UserAvatar type="user" size={20} avatar={post.author.avatar} />
-          <MediaInsetBorder />
-        </View>
-        <Text
-          style={[
-            a.flex_1,
-            a.text_sm,
-            a.leading_tight,
-            t.atoms.text_contrast_medium,
-          ]}
-          numberOfLines={1}>
-          {sanitizeHandle(post.author.handle, '@')}
-        </Text>
-      </View>
-    </View>
-  )
-
-  return (
-    <Link
-      accessibilityHint={_(msg`Views video in immersive mode`)}
-      label={_(msg`Video from ${author.handle}: ${text}`)}
-      to={{
-        screen: 'VideoFeed',
-        params: {
-          ...sourceContext,
-          initialPostUri: post.uri,
-        },
-      }}
-      onPress={() => {
-        onInteract?.()
-      }}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      style={[
-        a.flex_col,
-        {
-          alignItems: undefined,
-          justifyContent: undefined,
-        },
-      ]}>
-      <Hider.Outer modui={mergedModui}>
-        <Hider.Mask>
-          <View
-            style={[
-              a.justify_center,
-              a.rounded_md,
-              a.overflow_hidden,
-              {
-                backgroundColor: black,
-                aspectRatio: 9 / 16,
-              },
-            ]}>
-            <Image
-              source={{uri: thumbnail}}
-              style={[a.w_full, a.h_full, {opacity: pressed ? 0.8 : 1}]}
-              accessibilityIgnoresInvertColors
-              blurRadius={100}
-            />
-            <MediaInsetBorder />
-            <View
-              style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
-              <View
-                style={[
-                  a.absolute,
-                  a.inset_0,
-                  a.justify_center,
-                  a.align_center,
-                  {
-                    backgroundColor: 'black',
-                    opacity: 0.2,
-                  },
-                ]}
-              />
-              <View style={[a.align_center, a.gap_xs]}>
-                <Eye size="lg" fill="white" />
-                <Text style={[a.text_sm, {color: 'white'}]}>
-                  {_(msg`Hidden`)}
-                </Text>
-              </View>
-            </View>
-          </View>
-          {listModUi.blur ? (
-            <VideoPostCardTextPlaceholder author={post.author} />
-          ) : (
-            textAndAuthor
-          )}
-        </Hider.Mask>
-        <Hider.Content>
-          <View
-            style={[
-              a.justify_center,
-              a.rounded_md,
-              a.overflow_hidden,
-              {
-                backgroundColor: black,
-                aspectRatio: 9 / 16,
-              },
-            ]}>
-            <Image
-              source={{uri: thumbnail}}
-              style={[a.w_full, a.h_full, {opacity: pressed ? 0.8 : 1}]}
-              accessibilityIgnoresInvertColors
-            />
-            <MediaInsetBorder />
-
-            <View style={[a.absolute, a.inset_0]}>
-              <View
-                style={[
-                  a.absolute,
-                  a.inset_0,
-                  a.pt_2xl,
-                  {
-                    top: 'auto',
-                  },
-                ]}>
-                <LinearGradient
-                  colors={[black, 'rgba(0, 0, 0, 0)']}
-                  locations={[0.02, 1]}
-                  start={{x: 0, y: 1}}
-                  end={{x: 0, y: 0}}
-                  style={[a.absolute, a.inset_0, {opacity: 0.9}]}
-                />
-
-                <View
-                  style={[a.relative, a.z_10, a.p_md, a.flex_row, a.gap_md]}>
-                  {likeCount > 0 && (
-                    <View style={[a.flex_row, a.align_center, a.gap_xs]}>
-                      <Heart size="sm" fill="white" />
-                      <Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
-                        {formatCount(i18n, likeCount)}
-                      </Text>
-                    </View>
-                  )}
-                  {repostCount > 0 && (
-                    <View style={[a.flex_row, a.align_center, a.gap_xs]}>
-                      <Repost size="sm" fill="white" />
-                      <Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
-                        {formatCount(i18n, repostCount)}
-                      </Text>
-                    </View>
-                  )}
-                </View>
-              </View>
-            </View>
-          </View>
-          {textAndAuthor}
-        </Hider.Content>
-      </Hider.Outer>
-    </Link>
-  )
-}
-
-export function VideoPostCardPlaceholder() {
-  const t = useTheme()
-  const black = getBlackColor(t)
-
-  return (
-    <View style={[a.flex_1]}>
-      <View
-        style={[
-          a.rounded_md,
-          a.overflow_hidden,
-          {
-            backgroundColor: black,
-            aspectRatio: 9 / 16,
-          },
-        ]}>
-        <MediaInsetBorder />
-      </View>
-      <VideoPostCardTextPlaceholder />
-    </View>
-  )
-}
-
-export function VideoPostCardTextPlaceholder({
-  author,
-}: {
-  author?: AppBskyActorDefs.ProfileViewBasic
-}) {
-  const t = useTheme()
-
-  return (
-    <View style={[a.flex_1]}>
-      <View style={[a.pr_xs, {paddingTop: 8, gap: 6}]}>
-        <View
-          style={[
-            a.w_full,
-            a.rounded_xs,
-            t.atoms.bg_contrast_50,
-            {
-              height: 14,
-            },
-          ]}
-        />
-        <View
-          style={[
-            a.w_full,
-            a.rounded_xs,
-            t.atoms.bg_contrast_50,
-            {
-              height: 14,
-              width: '70%',
-            },
-          ]}
-        />
-        {author ? (
-          <View style={[a.flex_row, a.gap_xs, a.align_center]}>
-            <View style={[a.relative, a.rounded_full, {width: 20, height: 20}]}>
-              <UserAvatar type="user" size={20} avatar={author.avatar} />
-              <MediaInsetBorder />
-            </View>
-            <Text
-              style={[
-                a.flex_1,
-                a.text_sm,
-                a.leading_tight,
-                t.atoms.text_contrast_medium,
-              ]}
-              numberOfLines={1}>
-              {sanitizeHandle(author.handle, '@')}
-            </Text>
-          </View>
-        ) : (
-          <View style={[a.flex_row, a.gap_xs, a.align_center]}>
-            <View
-              style={[
-                a.rounded_full,
-                t.atoms.bg_contrast_50,
-                {
-                  width: 20,
-                  height: 20,
-                },
-              ]}
-            />
-            <View
-              style={[
-                a.rounded_xs,
-                t.atoms.bg_contrast_25,
-                {
-                  height: 12,
-                  width: '75%',
-                },
-              ]}
-            />
-          </View>
-        )}
-      </View>
-    </View>
-  )
-}
-
-export function CompactVideoPostCard({
-  post,
-  sourceContext,
-  moderation,
-  onInteract,
-}: {
-  post: AppBskyFeedDefs.PostView
-  sourceContext: VideoFeedSourceContext
-  moderation: ModerationDecision
-  /**
-   * Callback for metrics etc
-   */
-  onInteract?: () => void
-}) {
-  const t = useTheme()
-  const {_, i18n} = useLingui()
-  const embed = post.embed
-  const {
-    state: pressed,
-    onIn: onPressIn,
-    onOut: onPressOut,
-  } = useInteractionState()
-
-  const mergedModui = useMemo(() => {
-    const modui = moderation.ui('contentList')
-    const mediaModui = moderation.ui('contentMedia')
-    modui.alerts = [...modui.alerts, ...mediaModui.alerts]
-    modui.blurs = [...modui.blurs, ...mediaModui.blurs]
-    modui.filters = [...modui.filters, ...mediaModui.filters]
-    modui.informs = [...modui.informs, ...mediaModui.informs]
-    return modui
-  }, [moderation])
-
-  /**
-   * Filtering should be done at a higher level, such as `PostFeed` or
-   * `PostFeedVideoGridRow`, but we need to protect here as well.
-   */
-  if (!AppBskyEmbedVideo.isView(embed)) return null
-
-  const likeCount = post?.likeCount ?? 0
-  const {thumbnail} = embed
-  const black = getBlackColor(t)
-
-  return (
-    <Link
-      label={_(msg`View video`)}
-      to={{
-        screen: 'VideoFeed',
-        params: {
-          ...sourceContext,
-          initialPostUri: post.uri,
-        },
-      }}
-      onPress={() => {
-        onInteract?.()
-      }}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      style={[
-        a.flex_col,
-        {
-          alignItems: undefined,
-          justifyContent: undefined,
-        },
-      ]}>
-      <Hider.Outer modui={mergedModui}>
-        <Hider.Mask>
-          <View
-            style={[
-              a.justify_center,
-              a.rounded_md,
-              a.overflow_hidden,
-              {
-                backgroundColor: black,
-                aspectRatio: 9 / 16,
-              },
-            ]}>
-            <Image
-              source={{uri: thumbnail}}
-              style={[a.w_full, a.h_full, {opacity: pressed ? 0.8 : 1}]}
-              accessibilityIgnoresInvertColors
-              blurRadius={100}
-            />
-            <MediaInsetBorder />
-            <View
-              style={[a.absolute, a.inset_0, a.justify_center, a.align_center]}>
-              <View
-                style={[
-                  a.absolute,
-                  a.inset_0,
-                  a.justify_center,
-                  a.align_center,
-                  {
-                    backgroundColor: 'black',
-                    opacity: 0.2,
-                  },
-                ]}
-              />
-              <View style={[a.align_center, a.gap_xs]}>
-                <Eye size="lg" fill="white" />
-                <Text style={[a.text_sm, {color: 'white'}]}>
-                  {_(msg`Hidden`)}
-                </Text>
-              </View>
-            </View>
-          </View>
-        </Hider.Mask>
-        <Hider.Content>
-          <View
-            style={[
-              a.justify_center,
-              a.rounded_md,
-              a.overflow_hidden,
-              {
-                backgroundColor: black,
-                aspectRatio: 9 / 16,
-              },
-            ]}>
-            <Image
-              source={{uri: thumbnail}}
-              style={[a.w_full, a.h_full, {opacity: pressed ? 0.8 : 1}]}
-              accessibilityIgnoresInvertColors
-            />
-            <MediaInsetBorder />
-
-            <View style={[a.absolute, a.inset_0]}>
-              <View style={[a.absolute, a.inset_0, a.p_sm, {bottom: 'auto'}]}>
-                <View
-                  style={[a.relative, a.rounded_full, {width: 20, height: 20}]}>
-                  <UserAvatar
-                    type="user"
-                    size={20}
-                    avatar={post.author.avatar}
-                  />
-                  <MediaInsetBorder />
-                </View>
-              </View>
-              <View
-                style={[
-                  a.absolute,
-                  a.inset_0,
-                  a.pt_2xl,
-                  {
-                    top: 'auto',
-                  },
-                ]}>
-                <LinearGradient
-                  colors={[black, 'rgba(0, 0, 0, 0)']}
-                  locations={[0.02, 1]}
-                  start={{x: 0, y: 1}}
-                  end={{x: 0, y: 0}}
-                  style={[a.absolute, a.inset_0, {opacity: 0.9}]}
-                />
-
-                <View
-                  style={[a.relative, a.z_10, a.p_sm, a.flex_row, a.gap_md]}>
-                  {likeCount > 0 && (
-                    <View style={[a.flex_row, a.align_center, a.gap_xs]}>
-                      <Heart size="sm" fill="white" />
-                      <Text style={[a.text_sm, a.font_bold, {color: 'white'}]}>
-                        {formatCount(i18n, likeCount)}
-                      </Text>
-                    </View>
-                  )}
-                </View>
-              </View>
-            </View>
-          </View>
-        </Hider.Content>
-      </Hider.Outer>
-    </Link>
-  )
-}
-
-export function CompactVideoPostCardPlaceholder() {
-  const t = useTheme()
-  const black = getBlackColor(t)
-
-  return (
-    <View style={[a.flex_1]}>
-      <View
-        style={[
-          a.rounded_md,
-          a.overflow_hidden,
-          {
-            backgroundColor: black,
-            aspectRatio: 9 / 16,
-          },
-        ]}>
-        <MediaInsetBorder />
-      </View>
-    </View>
-  )
-}
@@ -209,12 +209,7 @@ function Rules({
          a.flex_wrap,
          t.atoms.text_contrast_medium,
        ]}>
-        {settings.length === 0 ? (
-          <Trans>
-            This post has an unknown type of threadgate on it. Your app may be
-            out of date.
-          </Trans>
-        ) : settings[0].type === 'everybody' ? (
+        {settings[0].type === 'everybody' ? (
          <Trans>Everybody can reply to this post.</Trans>
        ) : settings[0].type === 'nobody' ? (
          <Trans>Replies to this post are disabled.</Trans>
@@ -258,19 +253,6 @@ function Rule({
  if (rule.type === 'mention') {
    return <Trans>mentioned users</Trans>
  }
-  if (rule.type === 'followers') {
-    return (
-      <Trans>
-        users following{' '}
-        <InlineLinkText
-          label={`@${post.author.handle}`}
-          to={makeProfileLink(post.author)}
-          style={[a.text_sm, a.leading_snug]}>
-          @{post.author.handle}
-        </InlineLinkText>
-      </Trans>
-    )
-  }
  if (rule.type === 'following') {
    return (
      <Trans>
@@ -12,12 +12,12 @@ import {
  usePreferencesSetBirthDateMutation,
 } from '#/state/queries/preferences'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {DateInput} from '#/view/com/util/forms/DateInput'
 import {atoms as a, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
-import {DateField} from '#/components/forms/DateField'
 import {Loader} from '#/components/Loader'
-import {Text} from '#/components/Typography'
 import {Button, ButtonIcon, ButtonText} from '../Button'
+import {Text} from '../Typography'

 export function BirthDateSettingsDialog({
  control,
@@ -95,13 +95,17 @@ function BirthdayInner({
  return (
    <View style={a.gap_lg} testID="birthDateSettingsDialog">
      <View style={isIOS && [a.w_full, a.align_center]}>
-        <DateField
+        <DateInput
+          handleAsUTC
          testID="birthdayInput"
          value={date}
-          onChangeDate={newDate => setDate(new Date(newDate))}
-          label={_(msg`Birthday`)}
+          onChange={setDate}
+          buttonType="default-light"
+          buttonStyle={[a.rounded_sm]}
+          buttonLabelType="lg"
+          accessibilityLabel={_(msg`Birthday`)}
          accessibilityHint={_(msg`Enter your birth date`)}
-          maximumDate={new Date()}
+          accessibilityLabelledBy="birthDate"
        />
      </View>

@@ -40,7 +40,6 @@ import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'

 export type PostInteractionSettingsFormProps = {
-  canSave?: boolean
  onSave: () => void
  isSaving?: boolean

@@ -59,54 +58,20 @@ export function PostInteractionSettingsControlledDialog({
 }: PostInteractionSettingsFormProps & {
  control: Dialog.DialogControlProps
 }) {
-  const t = useTheme()
  const {_} = useLingui()
-
  return (
    <Dialog.Outer control={control}>
      <Dialog.Handle />
      <Dialog.ScrollableInner
        label={_(msg`Edit post interaction settings`)}
        style={[{maxWidth: 500}, a.w_full]}>
-        <View style={[a.gap_md]}>
-          <Header />
-          <PostInteractionSettingsForm {...rest} />
-          <Text
-            style={[
-              a.pt_sm,
-              a.text_sm,
-              a.leading_snug,
-              t.atoms.text_contrast_medium,
-            ]}>
-            <Trans>
-              You can set default interaction settings in{' '}
-              <Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
-                Settings &rarr; Moderation &rarr; Interaction settings
-              </Text>
-              .
-            </Trans>
-          </Text>
-        </View>
+        <PostInteractionSettingsForm {...rest} />
        <Dialog.Close />
      </Dialog.ScrollableInner>
    </Dialog.Outer>
  )
 }

-export function Header() {
-  return (
-    <View style={[a.gap_md, a.pb_sm]}>
-      <Text style={[a.text_2xl, a.font_bold]}>
-        <Trans>Post interaction settings</Trans>
-      </Text>
-      <Text style={[a.text_md, a.pb_xs]}>
-        <Trans>Customize who can interact with this post.</Trans>
-      </Text>
-      <Divider />
-    </View>
-  )
-}
-
 export type PostInteractionSettingsDialogProps = {
  control: Dialog.DialogControlProps
  /**
@@ -238,31 +203,26 @@ export function PostInteractionSettingsDialogControlledInner(
    <Dialog.ScrollableInner
      label={_(msg`Edit post interaction settings`)}
      style={[{maxWidth: 500}, a.w_full]}>
-      <View style={[a.gap_md]}>
-        <Header />
-
-        {isLoading ? (
-          <View style={[a.flex_1, a.py_4xl, a.align_center, a.justify_center]}>
-            <Loader size="xl" />
-          </View>
-        ) : (
-          <PostInteractionSettingsForm
-            replySettingsDisabled={!isThreadgateOwnedByViewer}
-            isSaving={isSaving}
-            onSave={onSave}
-            postgate={postgateValue}
-            onChangePostgate={setEditedPostgate}
-            threadgateAllowUISettings={allowUIValue}
-            onChangeThreadgateAllowUISettings={setEditedAllowUISettings}
-          />
-        )}
-      </View>
+      {isLoading ? (
+        <View style={[a.flex_1, a.py_4xl, a.align_center, a.justify_center]}>
+          <Loader size="xl" />
+        </View>
+      ) : (
+        <PostInteractionSettingsForm
+          replySettingsDisabled={!isThreadgateOwnedByViewer}
+          isSaving={isSaving}
+          onSave={onSave}
+          postgate={postgateValue}
+          onChangePostgate={setEditedPostgate}
+          threadgateAllowUISettings={allowUIValue}
+          onChangeThreadgateAllowUISettings={setEditedAllowUISettings}
+        />
+      )}
    </Dialog.ScrollableInner>
  )
 }

 export function PostInteractionSettingsForm({
-  canSave = true,
  onSave,
  isSaving,
  postgate,
@@ -323,7 +283,17 @@ export function PostInteractionSettingsForm({
  return (
    <View>
      <View style={[a.flex_1, a.gap_md]}>
+        <Text style={[a.text_2xl, a.font_bold]}>
+          <Trans>Post interaction settings</Trans>
+        </Text>
+
        <View style={[a.gap_lg]}>
+          <Text style={[a.text_md]}>
+            <Trans>Customize who can interact with this post.</Trans>
+          </Text>
+
+          <Divider />
+
          <View style={[a.gap_sm]}>
            <Text style={[a.font_bold, a.text_lg]}>
              <Trans>Quote settings</Trans>
@@ -430,7 +400,7 @@ export function PostInteractionSettingsForm({
                    disabled={replySettingsDisabled}
                  />
                  <Selectable
-                    label={_(msg`Users you follow`)}
+                    label={_(msg`Followed users`)}
                    isSelected={
                      !!threadgateAllowUISettings.find(
                        v => v.type === 'following',
@@ -439,16 +409,6 @@ export function PostInteractionSettingsForm({
                    onPress={() => onPressAudience({type: 'following'})}
                    disabled={replySettingsDisabled}
                  />
-                  <Selectable
-                    label={_(msg`Your followers`)}
-                    isSelected={
-                      !!threadgateAllowUISettings.find(
-                        v => v.type === 'followers',
-                      )
-                    }
-                    onPress={() => onPressAudience({type: 'followers'})}
-                    disabled={replySettingsDisabled}
-                  />
                  {lists && lists.length > 0
                    ? lists.map(list => (
                        <Selectable
@@ -475,7 +435,6 @@ export function PostInteractionSettingsForm({
      </View>

      <Button
-        disabled={!canSave || isSaving}
        label={_(msg`Save`)}
        onPress={onSave}
        color="primary"
@@ -35,17 +35,15 @@ import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/
 import * as Menu from '#/components/Menu'
 import * as Prompt from '#/components/Prompt'
 import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '../icons/Bubble'
-import {ReportDialog} from './ReportDialog'

 let ConvoMenu = ({
-  convo,
+  convo: initialConvo,
  profile,
  control,
  currentScreen,
  showMarkAsRead,
  hideTrigger,
  blockInfo,
-  latestReportableMessage,
  style,
 }: {
  convo: ChatBskyConvoDefs.ConvoView
@@ -58,122 +56,27 @@ let ConvoMenu = ({
    listBlocks: ModerationCause[]
    userBlock?: ModerationCause
  }
-  latestReportableMessage?: ChatBskyConvoDefs.MessageView
  style?: ViewStyleProp['style']
 }): React.ReactNode => {
+  const navigation = useNavigation<NavigationProp>()
  const {_} = useLingui()
  const t = useTheme()
-
  const leaveConvoControl = Prompt.usePromptControl()
  const reportControl = Prompt.usePromptControl()
  const blockedByListControl = Prompt.usePromptControl()
-
-  const {listBlocks} = blockInfo
-
-  return (
-    <>
-      <Menu.Root control={control}>
-        {!hideTrigger && (
-          <View style={[style]}>
-            <Menu.Trigger label={_(msg`Chat settings`)}>
-              {({props, state}) => (
-                <Pressable
-                  {...props}
-                  onPress={() => {
-                    Keyboard.dismiss()
-                    props.onPress()
-                  }}
-                  style={[
-                    a.p_sm,
-                    a.rounded_full,
-                    (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
-                    // make sure pfp is in the middle
-                    {marginLeft: -10},
-                  ]}>
-                  <DotsHorizontal size="md" style={t.atoms.text} />
-                </Pressable>
-              )}
-            </Menu.Trigger>
-          </View>
-        )}
-
-        <Menu.Outer>
-          <MenuContent
-            profile={profile}
-            showMarkAsRead={showMarkAsRead}
-            blockInfo={blockInfo}
-            convo={convo}
-            leaveConvoControl={leaveConvoControl}
-            reportControl={reportControl}
-            blockedByListControl={blockedByListControl}
-          />
-        </Menu.Outer>
-      </Menu.Root>
-
-      <LeaveConvoPrompt
-        control={leaveConvoControl}
-        convoId={convo.id}
-        currentScreen={currentScreen}
-      />
-      {latestReportableMessage ? (
-        <ReportDialog
-          currentScreen={currentScreen}
-          params={{
-            type: 'convoMessage',
-            convoId: convo.id,
-            message: latestReportableMessage,
-          }}
-          control={reportControl}
-        />
-      ) : (
-        <ReportConversationPrompt control={reportControl} />
-      )}
-
-      <BlockedByListDialog
-        control={blockedByListControl}
-        listBlocks={listBlocks}
-      />
-    </>
-  )
-}
-ConvoMenu = React.memo(ConvoMenu)
-
-function MenuContent({
-  convo: initialConvo,
-  profile,
-  showMarkAsRead,
-  blockInfo,
-  leaveConvoControl,
-  reportControl,
-  blockedByListControl,
-}: {
-  convo: ChatBskyConvoDefs.ConvoView
-  profile: Shadow<AppBskyActorDefs.ProfileViewBasic>
-  showMarkAsRead?: boolean
-  blockInfo: {
-    listBlocks: ModerationCause[]
-    userBlock?: ModerationCause
-  }
-  leaveConvoControl: Prompt.PromptControlProps
-  reportControl: Prompt.PromptControlProps
-  blockedByListControl: Prompt.PromptControlProps
-}) {
-  const navigation = useNavigation<NavigationProp>()
-  const {_} = useLingui()
  const {mutate: markAsRead} = useMarkAsReadMutation()

  const {listBlocks, userBlock} = blockInfo
  const isBlocking = userBlock || !!listBlocks.length
  const isDeletedAccount = profile.handle === 'missing.invalid'

-  const convoId = initialConvo.id
  const {data: convo} = useConvoQuery(initialConvo)

  const onNavigateToProfile = useCallback(() => {
    navigation.navigate('Profile', {name: profile.did})
  }, [navigation, profile.did])

-  const {mutate: muteConvo} = useMuteConvo(convoId, {
+  const {mutate: muteConvo} = useMuteConvo(convo?.id, {
    onSuccess: data => {
      if (data.convo.muted) {
        Toast.show(_(msg`Chat muted`))
@@ -201,81 +104,132 @@ function MenuContent({
    }
  }, [userBlock, listBlocks, blockedByListControl, queueBlock, queueUnblock])

-  return isDeletedAccount ? (
-    <Menu.Item
-      label={_(msg`Leave conversation`)}
-      onPress={() => leaveConvoControl.open()}>
-      <Menu.ItemText>
-        <Trans>Leave conversation</Trans>
-      </Menu.ItemText>
-      <Menu.ItemIcon icon={ArrowBoxLeft} />
-    </Menu.Item>
-  ) : (
+  return (
    <>
-      <Menu.Group>
-        {showMarkAsRead && (
-          <Menu.Item
-            label={_(msg`Mark as read`)}
-            onPress={() => markAsRead({convoId})}>
-            <Menu.ItemText>
-              <Trans>Mark as read</Trans>
-            </Menu.ItemText>
-            <Menu.ItemIcon icon={Bubble} />
-          </Menu.Item>
+      <Menu.Root control={control}>
+        {!hideTrigger && (
+          <View style={[style]}>
+            <Menu.Trigger label={_(msg`Chat settings`)}>
+              {({props, state}) => (
+                <Pressable
+                  {...props}
+                  onPress={() => {
+                    Keyboard.dismiss()
+
+                    props.onPress()
+                  }}
+                  style={[
+                    a.p_sm,
+                    a.rounded_full,
+                    (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
+                    // make sure pfp is in the middle
+                    {marginLeft: -10},
+                  ]}>
+                  <DotsHorizontal size="md" style={t.atoms.text} />
+                </Pressable>
+              )}
+            </Menu.Trigger>
+          </View>
        )}
-        <Menu.Item
-          label={_(msg`Go to user's profile`)}
-          onPress={onNavigateToProfile}>
-          <Menu.ItemText>
-            <Trans>Go to profile</Trans>
-          </Menu.ItemText>
-          <Menu.ItemIcon icon={Person} />
-        </Menu.Item>
-        <Menu.Item
-          label={_(msg`Mute conversation`)}
-          onPress={() => muteConvo({mute: !convo?.muted})}>
-          <Menu.ItemText>
-            {convo?.muted ? (
-              <Trans>Unmute conversation</Trans>
-            ) : (
-              <Trans>Mute conversation</Trans>
-            )}
-          </Menu.ItemText>
-          <Menu.ItemIcon icon={convo?.muted ? Unmute : Mute} />
-        </Menu.Item>
-      </Menu.Group>
-      <Menu.Divider />
-      <Menu.Group>
-        <Menu.Item
-          label={isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)}
-          onPress={toggleBlock}>
-          <Menu.ItemText>
-            {isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)}
-          </Menu.ItemText>
-          <Menu.ItemIcon icon={isBlocking ? PersonCheck : PersonX} />
-        </Menu.Item>
-        <Menu.Item
-          label={_(msg`Report conversation`)}
-          onPress={() => reportControl.open()}>
-          <Menu.ItemText>
-            <Trans>Report conversation</Trans>
-          </Menu.ItemText>
-          <Menu.ItemIcon icon={Flag} />
-        </Menu.Item>
-      </Menu.Group>
-      <Menu.Divider />
-      <Menu.Group>
-        <Menu.Item
-          label={_(msg`Leave conversation`)}
-          onPress={() => leaveConvoControl.open()}>
-          <Menu.ItemText>
-            <Trans>Leave conversation</Trans>
-          </Menu.ItemText>
-          <Menu.ItemIcon icon={ArrowBoxLeft} />
-        </Menu.Item>
-      </Menu.Group>
+
+        {isDeletedAccount ? (
+          <Menu.Outer>
+            <Menu.Item
+              label={_(msg`Leave conversation`)}
+              onPress={() => leaveConvoControl.open()}>
+              <Menu.ItemText>
+                <Trans>Leave conversation</Trans>
+              </Menu.ItemText>
+              <Menu.ItemIcon icon={ArrowBoxLeft} />
+            </Menu.Item>
+          </Menu.Outer>
+        ) : (
+          <Menu.Outer>
+            <Menu.Group>
+              {showMarkAsRead && (
+                <Menu.Item
+                  label={_(msg`Mark as read`)}
+                  onPress={() =>
+                    markAsRead({
+                      convoId: convo?.id,
+                    })
+                  }>
+                  <Menu.ItemText>
+                    <Trans>Mark as read</Trans>
+                  </Menu.ItemText>
+                  <Menu.ItemIcon icon={Bubble} />
+                </Menu.Item>
+              )}
+              <Menu.Item
+                label={_(msg`Go to user's profile`)}
+                onPress={onNavigateToProfile}>
+                <Menu.ItemText>
+                  <Trans>Go to profile</Trans>
+                </Menu.ItemText>
+                <Menu.ItemIcon icon={Person} />
+              </Menu.Item>
+              <Menu.Item
+                label={_(msg`Mute conversation`)}
+                onPress={() => muteConvo({mute: !convo?.muted})}>
+                <Menu.ItemText>
+                  {convo?.muted ? (
+                    <Trans>Unmute conversation</Trans>
+                  ) : (
+                    <Trans>Mute conversation</Trans>
+                  )}
+                </Menu.ItemText>
+                <Menu.ItemIcon icon={convo?.muted ? Unmute : Mute} />
+              </Menu.Item>
+            </Menu.Group>
+            <Menu.Divider />
+            <Menu.Group>
+              <Menu.Item
+                label={
+                  isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)
+                }
+                onPress={toggleBlock}>
+                <Menu.ItemText>
+                  {isBlocking ? _(msg`Unblock account`) : _(msg`Block account`)}
+                </Menu.ItemText>
+                <Menu.ItemIcon icon={isBlocking ? PersonCheck : PersonX} />
+              </Menu.Item>
+              <Menu.Item
+                label={_(msg`Report conversation`)}
+                onPress={() => reportControl.open()}>
+                <Menu.ItemText>
+                  <Trans>Report conversation</Trans>
+                </Menu.ItemText>
+                <Menu.ItemIcon icon={Flag} />
+              </Menu.Item>
+            </Menu.Group>
+            <Menu.Divider />
+            <Menu.Group>
+              <Menu.Item
+                label={_(msg`Leave conversation`)}
+                onPress={() => leaveConvoControl.open()}>
+                <Menu.ItemText>
+                  <Trans>Leave conversation</Trans>
+                </Menu.ItemText>
+                <Menu.ItemIcon icon={ArrowBoxLeft} />
+              </Menu.Item>
+            </Menu.Group>
+          </Menu.Outer>
+        )}
+      </Menu.Root>
+
+      <LeaveConvoPrompt
+        control={leaveConvoControl}
+        convoId={convo.id}
+        currentScreen={currentScreen}
+      />
+      <ReportConversationPrompt control={reportControl} />
+      <BlockedByListDialog
+        control={blockedByListControl}
+        listBlocks={listBlocks}
+      />
    </>
  )
 }
+ConvoMenu = React.memo(ConvoMenu)

 export {ConvoMenu}
@@ -1,6 +1,6 @@
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {StackActions, useNavigation} from '@react-navigation/native'
+import {useNavigation} from '@react-navigation/native'

 import {NavigationProp} from '#/lib/routes/types'
 import {isNative} from '#/platform/detection'
@@ -22,10 +22,15 @@ export function LeaveConvoPrompt({
  const navigation = useNavigation<NavigationProp>()

  const {mutate: leaveConvo} = useLeaveConvo(convoId, {
-    onMutate: () => {
+    onSuccess: () => {
      if (currentScreen === 'conversation') {
-        navigation.dispatch(
-          StackActions.replace('Messages', isNative ? {animation: 'pop'} : {}),
+        navigation.replace(
+          'Messages',
+          isNative
+            ? {
+                animation: 'pop',
+              }
+            : {},
        )
      }
    },
@@ -138,7 +138,6 @@ export let MessageMenu = ({
      </Menu.Root>

      <ReportDialog
-        currentScreen="conversation"
        params={{type: 'convoMessage', convoId: convo.convo.id, message}}
        control={reportControl}
      />
@@ -1,6 +1,6 @@
 import React from 'react'
 import {View} from 'react-native'
-import {AppBskyActorDefs, ModerationDecision} from '@atproto/api'
+import {AppBskyActorDefs, ModerationCause} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

@@ -19,12 +19,15 @@ export function MessagesListBlockedFooter({
  recipient: initialRecipient,
  convoId,
  hasMessages,
-  moderation,
+  blockInfo,
 }: {
  recipient: AppBskyActorDefs.ProfileViewBasic
  convoId: string
  hasMessages: boolean
-  moderation: ModerationDecision
+  blockInfo: {
+    listBlocks: ModerationCause[]
+    userBlock: ModerationCause | undefined
+  }
 }) {
  const t = useTheme()
  const {gtMobile} = useBreakpoints()
@@ -36,17 +39,7 @@ export function MessagesListBlockedFooter({
  const reportControl = useDialogControl()
  const blockedByListControl = useDialogControl()

-  const {listBlocks, userBlock} = React.useMemo(() => {
-    const modui = moderation.ui('profileView')
-    const blocks = modui.alerts.filter(alert => alert.type === 'blocking')
-    const listBlocks = blocks.filter(alert => alert.source.type === 'list')
-    const userBlock = blocks.find(alert => alert.source.type === 'user')
-    return {
-      listBlocks,
-      userBlock,
-    }
-  }, [moderation])
-
+  const {listBlocks, userBlock} = blockInfo
  const isBlocking = !!userBlock || !!listBlocks.length

  const onUnblockPress = React.useCallback(() => {
@@ -15,7 +15,7 @@ import {makeProfileLink} from '#/lib/routes/links'
 import {NavigationProp} from '#/lib/routes/types'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {isWeb} from '#/platform/detection'
-import {Shadow} from '#/state/cache/profile-shadow'
+import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {isConvoActive, useConvo} from '#/state/messages/convo'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
@@ -30,27 +30,20 @@ const PFP_SIZE = isWeb ? 40 : 34
 export let MessagesListHeader = ({
  profile,
  moderation,
+  blockInfo,
 }: {
-  profile?: Shadow<AppBskyActorDefs.ProfileViewBasic>
+  profile?: AppBskyActorDefs.ProfileViewBasic
  moderation?: ModerationDecision
+  blockInfo?: {
+    listBlocks: ModerationCause[]
+    userBlock?: ModerationCause
+  }
 }): React.ReactNode => {
  const t = useTheme()
  const {_} = useLingui()
  const {gtTablet} = useBreakpoints()
  const navigation = useNavigation<NavigationProp>()

-  const blockInfo = React.useMemo(() => {
-    if (!moderation) return
-    const modui = moderation.ui('profileView')
-    const blocks = modui.alerts.filter(alert => alert.type === 'blocking')
-    const listBlocks = blocks.filter(alert => alert.source.type === 'list')
-    const userBlock = blocks.find(alert => alert.source.type === 'user')
-    return {
-      listBlocks,
-      userBlock,
-    }
-  }, [moderation])
-
  const onPressBack = useCallback(() => {
    if (isWeb) {
      navigation.replace('Messages', {})
@@ -134,11 +127,11 @@ export let MessagesListHeader = ({
 MessagesListHeader = React.memo(MessagesListHeader)

 function HeaderReady({
-  profile,
+  profile: profileUnshadowed,
  moderation,
  blockInfo,
 }: {
-  profile: Shadow<AppBskyActorDefs.ProfileViewBasic>
+  profile: AppBskyActorDefs.ProfileViewBasic
  moderation: ModerationDecision
  blockInfo: {
    listBlocks: ModerationCause[]
@@ -148,6 +141,7 @@ function HeaderReady({
  const {_} = useLingui()
  const t = useTheme()
  const convoState = useConvo()
+  const profile = useProfileShadow(profileUnshadowed)

  const isDeletedAccount = profile?.handle === 'missing.invalid'
  const displayName = isDeletedAccount
@@ -157,15 +151,6 @@ function HeaderReady({
        moderation.ui('displayName'),
      )

-  const latestMessageFromOther = convoState.items.findLast(
-    item => item.type === 'message' && item.message.sender.did === profile.did,
-  )
-
-  const latestReportableMessage =
-    latestMessageFromOther?.type === 'message'
-      ? latestMessageFromOther.message
-      : undefined
-
  return (
    <View style={[a.flex_1]}>
      <View style={[a.w_full, a.flex_row, a.align_center, a.justify_between]}>
@@ -223,7 +208,6 @@ function HeaderReady({
            profile={profile}
            currentScreen="conversation"
            blockInfo={blockInfo}
-            latestReportableMessage={latestReportableMessage}
          />
        )}
      </View>
@@ -1,39 +1,27 @@
 import React, {memo, useMemo, useState} from 'react'
 import {View} from 'react-native'
 import {
-  AppBskyActorDefs,
  ChatBskyConvoDefs,
  ComAtprotoModerationCreateReport,
  RichText as RichTextAPI,
 } from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {StackActions, useNavigation} from '@react-navigation/native'
 import {useMutation} from '@tanstack/react-query'

 import {ReportOption} from '#/lib/moderation/useReportOptions'
-import {NavigationProp} from '#/lib/routes/types'
-import {isNative} from '#/platform/detection'
-import {useProfileShadow} from '#/state/cache/profile-shadow'
-import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
-import {
-  useProfileBlockMutationQueue,
-  useProfileQuery,
-} from '#/state/queries/profile'
 import {useAgent} from '#/state/session'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, platform, useBreakpoints, useTheme, web} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
-import {Divider} from '#/components/Divider'
-import * as Toggle from '#/components/forms/Toggle'
-import {ChevronLeft_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
-import {PaperPlane_Stroke2_Corner0_Rounded as SendIcon} from '#/components/icons/PaperPlane'
-import {Loader} from '#/components/Loader'
-import {SelectReportOptionView} from '#/components/ReportDialog/SelectReportOptionView'
-import {RichText} from '#/components/RichText'
-import {Text} from '#/components/Typography'
+import {Button, ButtonIcon, ButtonText} from '../Button'
+import {Divider} from '../Divider'
+import {ChevronLeft_Stroke2_Corner0_Rounded as Chevron} from '../icons/Chevron'
+import {Loader} from '../Loader'
+import {SelectReportOptionView} from '../ReportDialog/SelectReportOptionView'
+import {RichText} from '../RichText'
+import {Text} from '../Typography'
 import {MessageItemMetadata} from './MessageItem'

 type ReportDialogParams = {
@@ -45,18 +33,16 @@ type ReportDialogParams = {
 let ReportDialog = ({
  control,
  params,
-  currentScreen,
 }: {
  control: Dialog.DialogControlProps
  params: ReportDialogParams
-  currentScreen: 'list' | 'conversation'
 }): React.ReactNode => {
  const {_} = useLingui()
  return (
    <Dialog.Outer control={control}>
      <Dialog.Handle />
      <Dialog.ScrollableInner label={_(msg`Report this message`)}>
-        <DialogInner params={params} currentScreen={currentScreen} />
+        <DialogInner params={params} />
        <Dialog.Close />
      </Dialog.ScrollableInner>
    </Dialog.Outer>
@@ -65,44 +51,14 @@ let ReportDialog = ({
 ReportDialog = memo(ReportDialog)
 export {ReportDialog}

-function DialogInner({
-  params,
-  currentScreen,
-}: {
-  params: ReportDialogParams
-  currentScreen: 'list' | 'conversation'
-}) {
-  const {data: profile, isError} = useProfileQuery({
-    did: params.message.sender.did,
-  })
+function DialogInner({params}: {params: ReportDialogParams}) {
  const [reportOption, setReportOption] = useState<ReportOption | null>(null)
-  const [done, setDone] = useState(false)
-  const control = Dialog.useDialogContext()

-  return done ? (
-    profile ? (
-      <DoneStep
-        convoId={params.convoId}
-        currentScreen={currentScreen}
-        profile={profile}
-      />
-    ) : (
-      <View style={[a.w_full, a.py_5xl, a.align_center]}>
-        <Loader />
-      </View>
-    )
-  ) : reportOption ? (
+  return reportOption ? (
    <SubmitStep
      params={params}
      reportOption={reportOption}
      goBack={() => setReportOption(null)}
-      onComplete={() => {
-        if (isError) {
-          control.close()
-        } else {
-          setDone(true)
-        }
-      }}
    />
  ) : (
    <ReasonStep params={params} setReportOption={setReportOption} />
@@ -133,17 +89,16 @@ function SubmitStep({
  params,
  reportOption,
  goBack,
-  onComplete,
 }: {
  params: ReportDialogParams
  reportOption: ReportOption
  goBack: () => void
-  onComplete: () => void
 }) {
  const {_} = useLingui()
  const {gtMobile} = useBreakpoints()
  const t = useTheme()
  const [details, setDetails] = useState('')
+  const control = Dialog.useDialogContext()
  const agent = useAgent()

  const {
@@ -169,7 +124,11 @@ function SubmitStep({
        await agent.createModerationReport(report)
      }
    },
-    onSuccess: onComplete,
+    onSuccess: () => {
+      control.close(() => {
+        Toast.show(_(msg`Thank you. Your report has been sent.`))
+      })
+    },
  })

  const copy = useMemo(() => {
@@ -222,12 +181,13 @@ function SubmitStep({
        <View style={[a.relative, a.w_full]}>
          <Dialog.Input
            multiline
-            defaultValue={details}
+            value={details}
            onChangeText={setDetails}
-            label={_(msg`Text field`)}
+            label="Text field"
            style={{paddingRight: 60}}
-            numberOfLines={5}
+            numberOfLines={6}
          />
+
          <View
            style={[
              a.absolute,
@@ -271,115 +231,7 @@ function SubmitStep({
          <ButtonText>
            <Trans>Send report</Trans>
          </ButtonText>
-          <ButtonIcon icon={submitting ? Loader : SendIcon} />
-        </Button>
-      </View>
-    </View>
-  )
-}
-
-function DoneStep({
-  convoId,
-  currentScreen,
-  profile,
-}: {
-  convoId: string
-  currentScreen: 'list' | 'conversation'
-  profile: AppBskyActorDefs.ProfileViewBasic
-}) {
-  const {_} = useLingui()
-  const navigation = useNavigation<NavigationProp>()
-  const control = Dialog.useDialogContext()
-  const {gtMobile} = useBreakpoints()
-  const t = useTheme()
-  const [actions, setActions] = useState<string[]>(['block', 'leave'])
-  const shadow = useProfileShadow(profile)
-  const [queueBlock] = useProfileBlockMutationQueue(shadow)
-
-  const {mutate: leaveConvo} = useLeaveConvo(convoId, {
-    onMutate: () => {
-      if (currentScreen === 'conversation') {
-        navigation.dispatch(
-          StackActions.replace('Messages', isNative ? {animation: 'pop'} : {}),
-        )
-      }
-    },
-    onError: () => {
-      Toast.show(_(msg`Could not leave chat`), 'xmark')
-    },
-  })
-
-  const onPressPrimaryAction = () => {
-    control.close(() => {
-      if (actions.includes('block')) {
-        queueBlock()
-      }
-      if (actions.includes('leave')) {
-        leaveConvo()
-      }
-    })
-  }
-
-  let btnText = _(msg`Done`)
-  if (actions.includes('leave') && actions.includes('block')) {
-    btnText = _(msg`Block and Delete`)
-  } else if (actions.includes('leave')) {
-    btnText = _(msg`Delete Conversation`)
-  } else if (actions.includes('block')) {
-    btnText = _(msg`Block User`)
-  }
-
-  return (
-    <View style={a.gap_2xl}>
-      <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
-        <Text style={[a.text_2xl, a.font_bold]}>
-          <Trans>Report submitted</Trans>
-        </Text>
-        <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
-          <Trans>Our moderation team has received your report.</Trans>
-        </Text>
-      </View>
-      <Toggle.Group
-        label={_(msg`Block and/or delete this conversation`)}
-        values={actions}
-        onChange={setActions}>
-        <View style={[a.gap_md]}>
-          <Toggle.Item name="block" label={_(msg`Block user`)}>
-            <Toggle.Checkbox />
-            <Toggle.LabelText style={[a.text_md]}>
-              <Trans>Block user</Trans>
-            </Toggle.LabelText>
-          </Toggle.Item>
-          <Toggle.Item name="leave" label={_(msg`Delete conversation`)}>
-            <Toggle.Checkbox />
-            <Toggle.LabelText style={[a.text_md]}>
-              <Trans>Delete conversation</Trans>
-            </Toggle.LabelText>
-          </Toggle.Item>
-        </View>
-      </Toggle.Group>
-
-      <View style={[a.gap_md, web([a.flex_row_reverse])]}>
-        <Button
-          label={btnText}
-          onPress={onPressPrimaryAction}
-          size="large"
-          variant="solid"
-          color={actions.length > 0 ? 'negative' : 'primary'}>
-          <ButtonText>{btnText}</ButtonText>
-        </Button>
-        <Button
-          label={_(msg`Close`)}
-          onPress={() => control.close()}
-          size={platform({native: 'small', web: 'large'})}
-          variant={platform({
-            native: 'ghost',
-            web: 'solid',
-          })}
-          color="secondary">
-          <ButtonText>
-            <Trans>Close</Trans>
-          </ButtonText>
+          {submitting && <ButtonIcon icon={Loader} />}
        </Button>
      </View>
    </View>
@@ -505,7 +505,7 @@ function SearchInput({
        autoCapitalize="none"
        autoFocus
        accessibilityLabel={_(msg`Search profiles`)}
-        accessibilityHint={_(msg`Searches for profiles`)}
+        accessibilityHint={_(msg`Search profiles`)}
      />
    </View>
  )
@@ -1,67 +0,0 @@
-import {View} from 'react-native'
-import {AppBskyEmbedVideo} from '@atproto/api'
-
-import {logEvent} from '#/lib/statsig/statsig'
-import {FeedPostSliceItem} from '#/state/queries/post-feed'
-import {VideoFeedSourceContext} from '#/screens/VideoFeed/types'
-import {atoms as a, useGutters} from '#/alf'
-import * as Grid from '#/components/Grid'
-import {
-  VideoPostCard,
-  VideoPostCardPlaceholder,
-} from '#/components/VideoPostCard'
-
-export function PostFeedVideoGridRow({
-  items: slices,
-  sourceContext,
-}: {
-  items: FeedPostSliceItem[]
-  sourceContext: VideoFeedSourceContext
-}) {
-  const gutters = useGutters(['base', 'base', 0, 'base'])
-  const posts = slices
-    .filter(slice => AppBskyEmbedVideo.isView(slice.post.embed))
-    .map(slice => ({
-      post: slice.post,
-      moderation: slice.moderation,
-    }))
-
-  /**
-   * This should not happen because we should be filtering out posts without
-   * videos within the `PostFeed` component.
-   */
-  if (posts.length !== slices.length) return null
-
-  return (
-    <View style={[gutters]}>
-      <View style={[a.flex_row, a.gap_sm]}>
-        <Grid.Row gap={a.gap_sm.gap}>
-          {posts.map(post => (
-            <Grid.Col key={post.post.uri} width={1 / 2}>
-              <VideoPostCard
-                post={post.post}
-                sourceContext={sourceContext}
-                moderation={post.moderation}
-                onInteract={() => {
-                  logEvent('videoCard:click', {context: 'feed'})
-                }}
-              />
-            </Grid.Col>
-          ))}
-        </Grid.Row>
-      </View>
-    </View>
-  )
-}
-
-export function PostFeedVideoGridRowPlaceholder() {
-  const gutters = useGutters(['base', 'base', 0, 'base'])
-  return (
-    <View style={[gutters]}>
-      <View style={[a.flex_row, a.gap_sm]}>
-        <VideoPostCardPlaceholder />
-        <VideoPostCardPlaceholder />
-      </View>
-    </View>
-  )
-}
@@ -17,7 +17,6 @@ export function DateField({
  isInvalid,
  testID,
  accessibilityHint,
-  maximumDate,
 }: DateFieldProps) {
  const t = useTheme()
  const [open, setOpen] = React.useState(false)
@@ -68,9 +67,6 @@ export function DateField({
          aria-label={label}
          accessibilityLabel={label}
          accessibilityHint={accessibilityHint}
-          maximumDate={
-            maximumDate ? new Date(toSimpleDateString(maximumDate)) : undefined
-          }
        />
      )}
    </>
@@ -19,7 +19,7 @@ export function DateFieldButton({
  accessibilityHint,
 }: {
  label: string
-  value: string | Date
+  value: string
  onPress: () => void
  isInvalid?: boolean
  accessibilityHint?: string
@@ -16,11 +16,10 @@ export * as utils from '#/components/forms/DateField/utils'
 export const LabelText = TextField.LabelText

 /**
- * Date-only input. Accepts a string in the format YYYY-MM-DD, or a Date object.
- * Date objects are converted to strings in the format YYYY-MM-DD.
- * Returns a string in the format YYYY-MM-DD.
+ * Date-only input. Accepts a date in the format YYYY-MM-DD, and reports date
+ * changes in the same format.
 *
- * To generate a string in the format YYYY-MM-DD from a Date object, use the
+ * For dates of unknown format, convert with the
 * `utils.toSimpleDateString(Date)` export of this file.
 */
 export function DateField({
@@ -30,7 +29,6 @@ export function DateField({
  label,
  isInvalid,
  accessibilityHint,
-  maximumDate,
 }: DateFieldProps) {
  const {_} = useLingui()
  const t = useTheme()
@@ -58,29 +56,21 @@ export function DateField({
        isInvalid={isInvalid}
        accessibilityHint={accessibilityHint}
      />
-      <Dialog.Outer
-        control={control}
-        testID={testID}
-        nativeOptions={{preventExpansion: true}}>
+      <Dialog.Outer control={control} testID={testID}>
        <Dialog.Handle />
-        <Dialog.ScrollableInner label={label}>
+        <Dialog.Inner label={label}>
          <View style={a.gap_lg}>
            <View style={[a.relative, a.w_full, a.align_center]}>
              <DatePicker
                timeZoneOffsetInMinutes={0}
                theme={t.name === 'light' ? 'light' : 'dark'}
-                date={new Date(toSimpleDateString(value))}
+                date={new Date(value)}
                onDateChange={onChangeInternal}
                mode="date"
                testID={`${testID}-datepicker`}
                aria-label={label}
                accessibilityLabel={label}
                accessibilityHint={accessibilityHint}
-                maximumDate={
-                  maximumDate
-                    ? new Date(toSimpleDateString(maximumDate))
-                    : undefined
-                }
              />
            </View>
            <Button
@@ -94,7 +84,7 @@ export function DateField({
              </ButtonText>
            </Button>
          </View>
-        </Dialog.ScrollableInner>
+        </Dialog.Inner>
      </Dialog.Outer>
    </>
  )
@@ -1,6 +1,6 @@
 import React from 'react'
 import {StyleSheet, TextInput, TextInputProps} from 'react-native'
-// @ts-expect-error untyped
+// @ts-ignore
 import {unstable_createElement} from 'react-native-web'

 import {DateFieldProps} from '#/components/forms/DateField/types'
@@ -39,7 +39,6 @@ export function DateField({
  isInvalid,
  testID,
  accessibilityHint,
-  maximumDate,
 }: DateFieldProps) {
  const handleOnChange = React.useCallback(
    (e: any) => {
@@ -57,14 +56,12 @@ export function DateField({
    <TextField.Root isInvalid={isInvalid}>
      <TextField.Icon icon={CalendarDays} />
      <Input
-        value={toSimpleDateString(value)}
+        value={value}
        label={label}
        onChange={handleOnChange}
        onChangeText={() => {}}
        testID={testID}
        accessibilityHint={accessibilityHint}
-        // @ts-expect-error not typed as <input type="date"> even though it is one
-        max={maximumDate ? toSimpleDateString(maximumDate) : undefined}
      />
    </TextField.Root>
  )
@@ -1,9 +1,8 @@
 export type DateFieldProps = {
-  value: string | Date
+  value: string
  onChangeDate: (date: string) => void
  label: string
  isInvalid?: boolean
  testID?: string
  accessibilityHint?: string
-  maximumDate?: string | Date
 }
@@ -6,23 +6,21 @@ import {useLingui} from '@lingui/react'
 import {toNiceDomain} from '#/lib/strings/url-helpers'
 import {isAndroid} from '#/platform/detection'
 import {ServerInputDialog} from '#/view/com/auth/server-input'
-import {atoms as a, tokens, useTheme} from '#/alf'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {useDialogControl} from '#/components/Dialog'
-import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
-import {PencilLine_Stroke2_Corner0_Rounded as PencilIcon} from '#/components/icons/Pencil'
-import {Text} from '#/components/Typography'
+import {atoms as a, useTheme} from '#/alf'
+import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
+import {PencilLine_Stroke2_Corner0_Rounded as Pencil} from '#/components/icons/Pencil'
+import {Button} from '../Button'
+import {useDialogControl} from '../Dialog'
+import {Text} from '../Typography'

 export function HostingProvider({
  serviceUrl,
  onSelectServiceUrl,
  onOpenDialog,
-  minimal,
 }: {
  serviceUrl: string
  onSelectServiceUrl: (provider: string) => void
  onOpenDialog?: () => void
-  minimal?: boolean
 }) {
  const serverInputControl = useDialogControl()
  const t = useTheme()
@@ -31,7 +29,9 @@ export function HostingProvider({
  const onPressSelectService = React.useCallback(() => {
    Keyboard.dismiss()
    serverInputControl.open()
-    onOpenDialog?.()
+    if (onOpenDialog) {
+      onOpenDialog()
+    }
  }, [onOpenDialog, serverInputControl])

  return (
@@ -40,80 +40,57 @@ export function HostingProvider({
        control={serverInputControl}
        onSelect={onSelectServiceUrl}
      />
-      {minimal ? (
-        <View style={[a.flex_row, a.align_center, a.flex_wrap]}>
-          <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
-            You are creating an account on{' '}
-          </Text>
-          <Button
-            label={toNiceDomain(serviceUrl)}
-            accessibilityHint={_(msg`Changes hosting provider`)}
-            onPress={onPressSelectService}
-            variant="ghost"
-            color="secondary"
-            size="tiny"
-            style={[a.px_xs, {marginLeft: tokens.space.xs * -1}]}>
-            <ButtonText style={[a.text_sm]}>
-              {toNiceDomain(serviceUrl)}
-            </ButtonText>
-            <ButtonIcon icon={PencilIcon} />
-          </Button>
-        </View>
-      ) : (
-        <Button
-          testID="selectServiceButton"
-          label={toNiceDomain(serviceUrl)}
-          accessibilityHint={_(msg`Changes hosting provider`)}
-          variant="solid"
-          color="secondary"
-          style={[
-            a.w_full,
-            a.flex_row,
-            a.align_center,
-            a.rounded_sm,
-            a.pl_md,
-            a.pr_sm,
-            a.gap_xs,
-            {paddingVertical: isAndroid ? 14 : 8},
-          ]}
-          onPress={onPressSelectService}>
-          {({hovered, pressed}) => {
-            const interacted = hovered || pressed
-            return (
-              <>
-                <View style={a.pr_xs}>
-                  <GlobeIcon
-                    size="md"
-                    fill={
-                      interacted
-                        ? t.palette.contrast_800
-                        : t.palette.contrast_500
-                    }
-                  />
-                </View>
-                <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
-                <View
-                  style={[
-                    a.rounded_sm,
-                    interacted
-                      ? t.atoms.bg_contrast_300
-                      : t.atoms.bg_contrast_100,
-                    {marginLeft: 'auto', padding: 6},
-                  ]}>
-                  <PencilIcon
-                    size="sm"
-                    style={{
-                      color: interacted
-                        ? t.palette.contrast_800
-                        : t.palette.contrast_500,
-                    }}
-                  />
-                </View>
-              </>
-            )
-          }}
-        </Button>
-      )}
+      <Button
+        testID="selectServiceButton"
+        label={toNiceDomain(serviceUrl)}
+        accessibilityHint={_(msg`Press to change hosting provider`)}
+        variant="solid"
+        color="secondary"
+        style={[
+          a.w_full,
+          a.flex_row,
+          a.align_center,
+          a.rounded_sm,
+          a.px_md,
+          a.pr_sm,
+          a.gap_xs,
+          {paddingVertical: isAndroid ? 14 : 9},
+        ]}
+        onPress={onPressSelectService}>
+        {({hovered, pressed}) => {
+          const interacted = hovered || pressed
+          return (
+            <>
+              <View style={a.pr_xs}>
+                <Globe
+                  size="md"
+                  fill={
+                    interacted ? t.palette.contrast_800 : t.palette.contrast_500
+                  }
+                />
+              </View>
+              <Text style={[a.text_md]}>{toNiceDomain(serviceUrl)}</Text>
+              <View
+                style={[
+                  a.rounded_sm,
+                  interacted
+                    ? t.atoms.bg_contrast_300
+                    : t.atoms.bg_contrast_100,
+                  {marginLeft: 'auto', padding: 6},
+                ]}>
+                <Pencil
+                  size="sm"
+                  style={{
+                    color: interacted
+                      ? t.palette.contrast_800
+                      : t.palette.contrast_500,
+                  }}
+                />
+              </View>
+            </>
+          )
+        }}
+      </Button>
    </>
  )
 }
@@ -226,7 +226,6 @@ export function createInput(Component: typeof TextInput) {
      <>
        <Component
          accessibilityHint={undefined}
-          hitSlop={HITSLOP_20}
          {...rest}
          accessibilityLabel={label}
          ref={refs}
@@ -243,6 +242,7 @@ export function createInput(Component: typeof TextInput) {
          placeholder={placeholder || label}
          placeholderTextColor={t.palette.contrast_500}
          keyboardAppearance={t.name === 'light' ? 'light' : 'dark'}
+          hitSlop={HITSLOP_20}
          style={flattened}
        />

@@ -11,12 +11,9 @@ import React from 'react'
 import {formatDistance, Locale} from 'date-fns'
 import {
  ca,
-  da,
  de,
-  el,
  enGB,
  es,
-  eu,
  fi,
  fr,
  gl,
@@ -32,7 +29,6 @@ import {
  ptBR,
  ro,
  ru,
-  sv,
  th,
  tr,
  uk,
@@ -53,38 +49,33 @@ const locales: Record<AppLanguage, Locale | undefined> = {
  an: undefined,
  ast: undefined,
  ca,
-  da,
  de,
-  el,
  ['en-GB']: enGB,
  es,
-  eu,
  fi,
  fr,
  ga: undefined,
  gl,
  hi,
  hu,
-  ia: undefined,
  id,
  it,
  ja,
  km,
  ko,
-  ne: undefined,
  nl,
+  np: undefined,
  pl,
  ['pt-BR']: ptBR,
  ro,
  ru,
-  sv,
  th,
  tr,
  uk,
  vi,
-  ['zh-Hans-CN']: zhCN,
-  ['zh-Hant-HK']: zhHK,
-  ['zh-Hant-TW']: zhTW,
+  ['zh-CN']: zhCN,
+  ['zh-HK']: zhHK,
+  ['zh-TW']: zhTW,
 }

 /**
@@ -12,5 +12,5 @@ export function useHeaderOffset() {
  const tabBarPad = 10 + 10 + 3 // padding + border
  const normalLineHeight = 20 // matches tab bar
  const tabBarText = normalLineHeight * fontScale
-  return navBarHeight + tabBarPad + tabBarText - 4 // for some reason, this calculation is wrong by 4 pixels, which we adjust
+  return navBarHeight + tabBarPad + tabBarText
 }
@@ -15,7 +15,3 @@ export const ChevronTop_Stroke2_Corner0_Rounded = createSinglePathSVG({
 export const ChevronBottom_Stroke2_Corner0_Rounded = createSinglePathSVG({
  path: 'M3.293 8.293a1 1 0 0 1 1.414 0L12 15.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414Z',
 })
-
-export const ChevronTopBottom_Stroke2_Corner0_Rounded = createSinglePathSVG({
-  path: 'M11.293 4.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L12 6.414 8.707 9.707a1 1 0 0 1-1.414-1.414l4-4Zm-4 10a1 1 0 0 1 1.414 0L12 17.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z',
-})
@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Coffee_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M7 2a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V3a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1ZM4 9a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2h.5a3.5 3.5 0 1 1 0 7H18v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9Zm12 0H6v11h10V9Zm2 5h.5a1.5 1.5 0 0 0 0-3H18v3Z',
+})
@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const PiggyBank_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M6.5 4.999Zm0 0a.054.054 0 0 1-.016.024.196.196 0 0 1-.152.043c.057.01.113.02.168.032V7.5a1 1 0 0 1-.33.742c-.543.49-.917 1.176-1.23 2.036a1 1 0 0 1-.94.657H3V14h1a1 1 0 0 1 .866.5c.436.754.879 1.195 1.637 1.636A1 1 0 0 1 7 17v2h2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2h2v-2.537a1 1 0 0 1 .332-.744A4.978 4.978 0 0 0 19 11.999 5 5 0 0 0 14 7H9.474a1 1 0 0 1-.893-.55v-.001l-.001-.002-.005-.008L9.474 6l-.9.438h.001v.002l.002.001.001.003.002.003v.003a2.62 2.62 0 0 0-.443-.538c-.319-.298-.839-.648-1.637-.814V5Zm2.082 1.452ZM9.5 4.447c.211.196.379.387.508.553H14a7 7 0 0 1 6.72 8.96 1.003 1.003 0 0 0 1.146-1.46 1 1 0 1 1 1.731-1 3 3 0 0 1-3.714 4.286A7.074 7.074 0 0 1 19 16.888V19a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2h-2a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-1.45A5.783 5.783 0 0 1 3.448 16H3a2 2 0 0 1-2-2v-3.065a2 2 0 0 1 2-2h.324c.286-.649.657-1.291 1.176-1.852V5c0-1.047.89-2.12 2.161-1.907 1.33.223 2.248.805 2.839 1.354ZM8.25 12a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z',
+})
@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Poop_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 4c0-1.012.894-2.187 2.237-1.846a5.002 5.002 0 0 1 3.218 7.119 4.001 4.001 0 0 1 2.345 4.976A3.501 3.501 0 0 1 18.5 21h-13a3.5 3.5 0 0 1-1.3-6.75 4 4 0 0 1 2.052-4.848A4 4 0 0 1 10 4h2.001Zm-4.187 7.009A2 2 0 0 0 6 13c0 .366.098.706.271 1H12a1 1 0 1 1 0 2H5.5a1.5 1.5 0 0 0 0 3h13a1.5 1.5 0 1 0 0-3H17a1 1 0 1 1 0-2h.729c.173-.294.271-.634.271-1a2 2 0 0 0-2-2h-2a1 1 0 1 1 0-2h1.236a3.002 3.002 0 0 0-1.243-4.832A2 2 0 0 1 12 6h-2a2 2 0 0 0-1.728 3.009H9a1 1 0 0 1 0 2H7.813Z',
+})
@@ -1,5 +1,5 @@
 import {createSinglePathSVG} from './TEMPLATE'

 export const Ticket_Stroke2_Corner0_Rounded = createSinglePathSVG({
-  path: 'M3 4a1 1 0 0 0-1 1v4.17a1 1 0 0 0 .667.944 2.001 2.001 0 0 1 0 3.772A1 1 0 0 0 2 14.83V19a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-4.17a1 1 0 0 0-.667-.944 2.001 2.001 0 0 1 0-3.772A1 1 0 0 0 22 9.17V5a1 1 0 0 0-1-1H3Zm1 4.535V6h16v2.535A4 4 0 0 0 18 12c0 1.482.805 2.773 2 3.465V18H4v-2.535A4 4 0 0 0 6 12a4 4 0 0 0-2-3.465ZM15 15a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-1-3a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm1-5a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z',
+  path: 'M4 5.5a.5.5 0 0 0-.5.5v2.535a.5.5 0 0 0 .25.433A3.498 3.498 0 0 1 5.5 12a3.498 3.498 0 0 1-1.75 3.032.5.5 0 0 0-.25.433V18a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5v-2.535a.5.5 0 0 0-.25-.433A3.498 3.498 0 0 1 18.5 12a3.5 3.5 0 0 1 1.75-3.032.5.5 0 0 0 .25-.433V6a.5.5 0 0 0-.5-.5H4ZM2.5 6A1.5 1.5 0 0 1 4 4.5h16A1.5 1.5 0 0 1 21.5 6v3.17a.5.5 0 0 1-.333.472 2.501 2.501 0 0 0 0 4.716.5.5 0 0 1 .333.471V18a1.5 1.5 0 0 1-1.5 1.5H4A1.5 1.5 0 0 1 2.5 18v-3.17a.5.5 0 0 1 .333-.472 2.501 2.501 0 0 0 0-4.716.5.5 0 0 1-.333-.471V6Zm12 2a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Zm0 4a.5.5 0 1 1 1 0 .5.5 0 0 1-1 0Z',
 })
@@ -1,6 +1,6 @@
 import React from 'react'
-import {ScrollView, View} from 'react-native'
-import {msg} from '@lingui/macro'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

 import {logEvent} from '#/lib/statsig/statsig'
@@ -8,16 +8,22 @@ import {
  useTrendingSettings,
  useTrendingSettingsApi,
 } from '#/state/preferences/trending'
-import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
+import {
+  DEFAULT_LIMIT as TRENDING_TOPICS_COUNT,
+  useTrendingTopics,
+} from '#/state/queries/trending/useTrendingTopics'
 import {useTrendingConfig} from '#/state/trending-config'
-import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
-import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
-import {atoms as a, useGutters, useTheme} from '#/alf'
+import {atoms as a, tokens, useGutters, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
+import {GradientFill} from '#/components/GradientFill'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
 import * as Prompt from '#/components/Prompt'
-import {TrendingTopicLink} from '#/components/TrendingTopics'
+import {
+  TrendingTopic,
+  TrendingTopicLink,
+  TrendingTopicSkeleton,
+} from '#/components/TrendingTopics'
 import {Text} from '#/components/Typography'

 export function TrendingInterstitial() {
@@ -29,7 +35,7 @@ export function TrendingInterstitial() {
 export function Inner() {
  const t = useTheme()
  const {_} = useLingui()
-  const gutters = useGutters([0, 'base', 0, 'base'])
+  const gutters = useGutters(['wide', 'base'])
  const trendingPrompt = Prompt.usePromptControl()
  const {setTrendingDisabled} = useTrendingSettingsApi()
  const {data: trending, error, isLoading} = useTrendingTopics()
@@ -41,88 +47,64 @@ export function Inner() {
  }, [setTrendingDisabled])

  return error || noTopics ? null : (
-    <View style={[t.atoms.border_contrast_low, a.border_t]}>
-      <BlockDrawerGesture>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          decelerationRate="fast">
-          <View style={[gutters, a.flex_row, a.align_center, a.gap_lg]}>
-            <View style={{paddingLeft: 4, paddingRight: 2}}>
-              <Graph size="sm" />
-            </View>
-            {isLoading ? (
-              <View style={[a.py_lg, a.flex_row, a.gap_lg, a.align_center]}>
-                <LoadingPlaceholder
-                  width={80}
-                  height={undefined}
-                  style={{alignSelf: 'stretch'}}
-                />
-                <LoadingPlaceholder
-                  width={50}
-                  height={undefined}
-                  style={{alignSelf: 'stretch'}}
-                />
-                <LoadingPlaceholder
-                  width={120}
-                  height={undefined}
-                  style={{alignSelf: 'stretch'}}
-                />
-                <LoadingPlaceholder
-                  width={30}
-                  height={undefined}
-                  style={{alignSelf: 'stretch'}}
-                />
-                <LoadingPlaceholder
-                  width={180}
-                  height={undefined}
-                  style={{alignSelf: 'stretch'}}
-                />
-                <Text
-                  style={[
-                    t.atoms.text_contrast_medium,
-                    a.text_sm,
-                    a.font_bold,
-                  ]}>
-                  {' '}
-                </Text>
-              </View>
-            ) : !trending?.topics ? null : (
-              <>
-                {trending.topics.map(topic => (
-                  <TrendingTopicLink
-                    key={topic.link}
-                    topic={topic}
-                    onPress={() => {
-                      logEvent('trendingTopic:click', {context: 'interstitial'})
-                    }}>
-                    <View style={[a.py_lg]}>
-                      <Text
-                        style={[
-                          t.atoms.text,
-                          a.text_sm,
-                          a.font_bold,
-                          {opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar
-                        ]}>
-                        {topic.topic}
-                      </Text>
-                    </View>
-                  </TrendingTopicLink>
-                ))}
-                <Button
-                  label={_(msg`Hide trending topics`)}
-                  size="tiny"
-                  variant="ghost"
-                  color="secondary"
-                  shape="round"
-                  onPress={() => trendingPrompt.open()}>
-                  <ButtonIcon icon={X} />
-                </Button>
-              </>
-            )}
+    <View
+      style={[
+        gutters,
+        a.gap_lg,
+        a.border_t,
+        t.atoms.border_contrast_low,
+        t.atoms.bg_contrast_25,
+      ]}>
+      <View style={[a.flex_row, a.align_center, a.gap_sm]}>
+        <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
+          <Graph size="lg" />
+          <Text style={[a.text_lg, a.font_heavy]}>
+            <Trans>Trending</Trans>
+          </Text>
+          <View style={[a.py_xs, a.px_sm, a.rounded_sm, a.overflow_hidden]}>
+            <GradientFill gradient={tokens.gradients.primary} />
+            <Text style={[a.text_sm, a.font_heavy, {color: 'white'}]}>
+              <Trans>BETA</Trans>
+            </Text>
          </View>
-        </ScrollView>
-      </BlockDrawerGesture>
+        </View>
+
+        <Button
+          label={_(msg`Hide trending topics`)}
+          size="tiny"
+          variant="outline"
+          color="secondary"
+          shape="round"
+          onPress={() => trendingPrompt.open()}>
+          <ButtonIcon icon={X} />
+        </Button>
+      </View>
+
+      <View style={[a.flex_row, a.flex_wrap, {rowGap: 8, columnGap: 6}]}>
+        {isLoading ? (
+          Array(TRENDING_TOPICS_COUNT)
+            .fill(0)
+            .map((_n, i) => <TrendingTopicSkeleton key={i} index={i} />)
+        ) : !trending?.topics ? null : (
+          <>
+            {trending.topics.map(topic => (
+              <TrendingTopicLink key={topic.link} topic={topic}>
+                {({hovered}) => (
+                  <TrendingTopic
+                    topic={topic}
+                    style={[
+                      hovered && [
+                        t.atoms.border_contrast_high,
+                        t.atoms.bg_contrast_25,
+                      ],
+                    ]}
+                  />
+                )}
+              </TrendingTopicLink>
+            ))}
+          </>
+        )}
+      </View>

      <Prompt.Basic
        control={trendingPrompt}
@@ -1,231 +0,0 @@
-import React, {useEffect} from 'react'
-import {ScrollView, View} from 'react-native'
-import {AppBskyEmbedVideo, AtUri} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useQueryClient} from '@tanstack/react-query'
-
-import {VIDEO_FEED_URI} from '#/lib/constants'
-import {makeCustomFeedLink} from '#/lib/routes/links'
-import {logEvent} from '#/lib/statsig/statsig'
-import {useTrendingSettingsApi} from '#/state/preferences/trending'
-import {usePostFeedQuery} from '#/state/queries/post-feed'
-import {RQKEY} from '#/state/queries/post-feed'
-import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
-import {atoms as a, useGutters, useTheme} from '#/alf'
-import {Button, ButtonIcon} from '#/components/Button'
-import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
-import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
-import {Trending2_Stroke2_Corner2_Rounded as Graph} from '#/components/icons/Trending2'
-import {Link} from '#/components/Link'
-import * as Prompt from '#/components/Prompt'
-import {Text} from '#/components/Typography'
-import {
-  CompactVideoPostCard,
-  CompactVideoPostCardPlaceholder,
-} from '#/components/VideoPostCard'
-
-const CARD_WIDTH = 100
-
-const FEED_DESC = `feedgen|${VIDEO_FEED_URI}`
-const FEED_PARAMS: {
-  feedCacheKey: 'discover'
-} = {
-  feedCacheKey: 'discover',
-}
-
-export function TrendingVideos() {
-  const t = useTheme()
-  const {_} = useLingui()
-  const gutters = useGutters([0, 'base'])
-  const {data, isLoading, error} = usePostFeedQuery(FEED_DESC, FEED_PARAMS)
-
-  // Refetch on unmount if nothing else is using this query.
-  const queryClient = useQueryClient()
-  useEffect(() => {
-    return () => {
-      const query = queryClient
-        .getQueryCache()
-        .find({queryKey: RQKEY(FEED_DESC, FEED_PARAMS)})
-      if (query && query.getObserversCount() <= 1) {
-        query.fetch()
-      }
-    }
-  }, [queryClient])
-
-  const {setTrendingVideoDisabled} = useTrendingSettingsApi()
-  const trendingPrompt = Prompt.usePromptControl()
-
-  const onConfirmHide = React.useCallback(() => {
-    setTrendingVideoDisabled(true)
-    logEvent('trendingVideos:hide', {context: 'interstitial:discover'})
-  }, [setTrendingVideoDisabled])
-
-  if (error) {
-    return null
-  }
-
-  return (
-    <View
-      style={[
-        a.pt_lg,
-        a.pb_lg,
-        a.border_t,
-        t.atoms.border_contrast_low,
-        t.atoms.bg_contrast_25,
-      ]}>
-      <View
-        style={[
-          gutters,
-          a.pb_sm,
-          a.flex_row,
-          a.align_center,
-          a.justify_between,
-        ]}>
-        <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_xs]}>
-          <Graph />
-          <Text style={[a.text_md, a.font_bold, a.leading_snug]}>
-            <Trans>Trending Videos</Trans>
-          </Text>
-        </View>
-        <Button
-          label={_(msg`Dismiss this section`)}
-          size="tiny"
-          variant="ghost"
-          color="secondary"
-          shape="round"
-          onPress={() => trendingPrompt.open()}>
-          <ButtonIcon icon={X} />
-        </Button>
-      </View>
-
-      <BlockDrawerGesture>
-        <ScrollView
-          horizontal
-          showsHorizontalScrollIndicator={false}
-          decelerationRate="fast"
-          snapToInterval={CARD_WIDTH + a.gap_sm.gap}>
-          <View
-            style={[
-              a.flex_row,
-              a.gap_sm,
-              {
-                paddingLeft: gutters.paddingLeft,
-                paddingRight: gutters.paddingRight,
-              },
-            ]}>
-            {isLoading ? (
-              Array(10)
-                .fill(0)
-                .map((_, i) => (
-                  <View key={i} style={[{width: CARD_WIDTH}]}>
-                    <CompactVideoPostCardPlaceholder />
-                  </View>
-                ))
-            ) : error || !data ? (
-              <Text>
-                <Trans>Whoops! Trending videos failed to load.</Trans>
-              </Text>
-            ) : (
-              <VideoCards data={data} />
-            )}
-          </View>
-        </ScrollView>
-      </BlockDrawerGesture>
-
-      <Prompt.Basic
-        control={trendingPrompt}
-        title={_(msg`Hide trending videos?`)}
-        description={_(msg`You can update this later from your settings.`)}
-        confirmButtonCta={_(msg`Hide`)}
-        onConfirm={onConfirmHide}
-      />
-    </View>
-  )
-}
-
-function VideoCards({
-  data,
-}: {
-  data: Exclude<ReturnType<typeof usePostFeedQuery>['data'], undefined>
-}) {
-  const t = useTheme()
-  const {_} = useLingui()
-  const items = React.useMemo(() => {
-    return data.pages
-      .flatMap(page => page.slices)
-      .map(slice => slice.items[0])
-      .filter(Boolean)
-      .filter(item => AppBskyEmbedVideo.isView(item.post.embed))
-      .slice(0, 8)
-  }, [data])
-  const href = React.useMemo(() => {
-    const urip = new AtUri(VIDEO_FEED_URI)
-    return makeCustomFeedLink(urip.host, urip.rkey, undefined, 'discover')
-  }, [])
-
-  return (
-    <>
-      {items.map(item => (
-        <View key={item.post.uri} style={[{width: CARD_WIDTH}]}>
-          <CompactVideoPostCard
-            post={item.post}
-            moderation={item.moderation}
-            sourceContext={{
-              type: 'feedgen',
-              uri: VIDEO_FEED_URI,
-              sourceInterstitial: 'discover',
-            }}
-            onInteract={() => {
-              logEvent('videoCard:click', {
-                context: 'interstitial:discover',
-              })
-            }}
-          />
-        </View>
-      ))}
-
-      <View style={[{width: CARD_WIDTH * 2}]}>
-        <Link
-          to={href}
-          label={_(msg`View more`)}
-          style={[
-            a.justify_center,
-            a.align_center,
-            a.flex_1,
-            a.rounded_md,
-            t.atoms.bg,
-          ]}>
-          {({pressed}) => (
-            <View
-              style={[
-                a.flex_row,
-                a.align_center,
-                a.gap_md,
-                {
-                  opacity: pressed ? 0.6 : 1,
-                },
-              ]}>
-              <Text style={[a.text_md]}>
-                <Trans>View more</Trans>
-              </Text>
-              <View
-                style={[
-                  a.align_center,
-                  a.justify_center,
-                  a.rounded_full,
-                  {
-                    width: 34,
-                    height: 34,
-                    backgroundColor: t.palette.primary_500,
-                  },
-                ]}>
-                <ButtonIcon icon={ChevronRight} />
-              </View>
-            </View>
-          )}
-        </Link>
-      </View>
-    </>
-  )
-}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Samuel Newman	a72d7736c6	align lightbox behaviour with iOS	2024-12-20 19:49:36 +00:00
Samuel Newman	fa639e6c44	fix lightbox on android 15	2024-12-20 19:28:14 +00: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="M11.293 4.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L12 6.414 8.707 9.707a1 1 0 0 1-1.414-1.414l4-4Zm-4 10a1 1 0 0 1 1.414 0L12 17.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7 2a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V3a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1ZM4 9a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2h.5a3.5 3.5 0 1 1 0 7H18v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9Zm12 0H6v11h10V9Zm2 5h.5a1.5 1.5 0 0 0 0-3H18v3Z" clip-rule="evenodd"/></svg>`
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.5 4.999Zm0 0a.1.1 0 0 1-.016.024.2.2 0 0 1-.152.043q.086.014.168.032V7.5a1 1 0 0 1-.33.742c-.543.49-.917 1.176-1.23 2.036a1 1 0 0 1-.94.657H3V14h1a1 1 0 0 1 .866.5c.436.754.879 1.195 1.637 1.636A1 1 0 0 1 7 17v2h2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2h2v-2.537a1 1 0 0 1 .332-.744A4.98 4.98 0 0 0 19 11.999 5 5 0 0 0 14 7H9.474a1 1 0 0 1-.893-.55v-.001l-.001-.002-.005-.008L9.474 6l-.9.438h.001v.002l.002.001.001.003.002.003v.003a2.6 2.6 0 0 0-.443-.538c-.319-.298-.839-.648-1.637-.814V5Zm2.082 1.452ZM9.5 4.447c.211.196.379.387.508.553H14a7 7 0 0 1 6.72 8.96 1.003 1.003 0 0 0 1.146-1.46 1 1 0 1 1 1.731-1 3 3 0 0 1-3.714 4.286A7 7 0 0 1 19 16.888V19a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2h-2a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-1.45A5.8 5.8 0 0 1 3.448 16H3a2 2 0 0 1-2-2v-3.065a2 2 0 0 1 2-2h.324c.286-.649.657-1.291 1.176-1.852V5c0-1.047.89-2.12 2.161-1.907 1.33.223 2.248.805 2.839 1.354ZM8.25 12a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z" clip-rule="evenodd"/></svg>