actually specify @types/react@19, remove need for transitive dep

.husky/pre-commit

@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
 . "$(dirname -- "$0")/_/husky.sh"
 
-npx lint-staged --concurrent false
+npx lint-staged

__tests__/lib/images.test.ts

@@ -1,9 +1,10 @@
-import {createDownloadResumable, deleteAsync} from 'expo-file-system'
+import {deleteAsync} from 'expo-file-system'
 import {manipulateAsync, SaveFormat} from 'expo-image-manipulator'
+import RNFetchBlob from 'rn-fetch-blob'
 
 import {
   downloadAndResize,
-  type DownloadAndResizeOpts,
+  DownloadAndResizeOpts,
   getResizedDimensions,
 } from '../../src/lib/media/manip'
 
@@ -31,12 +32,11 @@ describe('downloadAndResize', () => {
   })
 
   it('should return resized image for valid URI and options', async () => {
-    const mockedFetch = createDownloadResumable as jest.Mock
-    mockedFetch.mockReturnValue({
-      cancelAsync: jest.fn(),
-      downloadAsync: jest
-        .fn()
-        .mockResolvedValue({uri: 'file://resized-image.jpg'}),
+    const mockedFetch = RNFetchBlob.fetch as jest.Mock
+    mockedFetch.mockResolvedValueOnce({
+      path: jest.fn().mockReturnValue('file://downloaded-image.jpg'),
+      info: jest.fn().mockReturnValue({status: 200}),
+      flush: jest.fn(),
     })
 
     const opts: DownloadAndResizeOpts = {
@@ -50,12 +50,13 @@ describe('downloadAndResize', () => {
 
     const result = await downloadAndResize(opts)
     expect(result).toEqual(mockResizedImage)
-    expect(createDownloadResumable).toHaveBeenCalledWith(
-      opts.uri,
-      expect.anything(),
-      {
-        cache: true,
-      },
+    expect(RNFetchBlob.config).toHaveBeenCalledWith({
+      fileCache: true,
+      appendExt: 'jpeg',
+    })
+    expect(RNFetchBlob.fetch).toHaveBeenCalledWith(
+      'GET',
+      'https://example.com/image.jpg',
     )
 
     // First time it gets called is to get dimensions
@@ -85,6 +86,28 @@ describe('downloadAndResize', () => {
     expect(result).toBeUndefined()
   })
 
+  it('should return undefined for non-200 response', async () => {
+    const mockedFetch = RNFetchBlob.fetch as jest.Mock
+    mockedFetch.mockResolvedValueOnce({
+      path: jest.fn().mockReturnValue('file://downloaded-image'),
+      info: jest.fn().mockReturnValue({status: 400}),
+      flush: jest.fn(),
+    })
+
+    const opts: DownloadAndResizeOpts = {
+      uri: 'https://example.com/image',
+      width: 100,
+      height: 100,
+      maxSize: 500000,
+      mode: 'cover',
+      timeout: 10000,
+    }
+
+    const result = await downloadAndResize(opts)
+    expect(errorSpy).not.toHaveBeenCalled()
+    expect(result).toBeUndefined()
+  })
+
   it('should not downsize whenever dimensions are below the max dimensions', () => {
     const initialDimensionsOne = {
       width: 1200,

app.config.js

@@ -29,8 +29,8 @@ module.exports = function (_config) {
   const UPDATES_CHANNEL = IS_TESTFLIGHT
     ? 'testflight'
     : IS_PRODUCTION
-      ? 'production'
-      : undefined
+    ? 'production'
+    : undefined
   const UPDATES_ENABLED = !!UPDATES_CHANNEL
 
   const USE_SENTRY = Boolean(process.env.SENTRY_AUTH_TOKEN)

assets/icons/arrowTopCircle_stroke2_corner0_rounded.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm-.63 3.225a1 1 0 0 1 1.337.068l3 3 .068.076a1 1 0 0 1-1.406 1.406l-.076-.068L13 10.414V16a1 1 0 1 1-2 0v-5.586l-1.293 1.293a1 1 0 1 1-1.414-1.414l3-3 .076-.068Z"/></svg>

assets/icons/bellRinging_stroke2_corner0_rounded.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M12 2a7.854 7.854 0 0 1 7.785 6.815l1.055 7.92.018.224a2 2 0 0 1-2 2.041h-2.215c-.904 1.747-2.605 3-4.643 3s-3.739-1.253-4.643-3H5.142a2 2 0 0 1-1.982-2.265l1.056-7.92.057-.363A7.854 7.854 0 0 1 12 2ZM9.78 19c.609.637 1.398 1 2.22 1s1.611-.363 2.22-1H9.78ZM12 4a5.854 5.854 0 0 0-5.76 4.81l-.041.27L5.142 17h13.716l-1.056-7.92A5.854 5.854 0 0 0 12 4ZM2.718 7.464a1 1 0 1 1-1.953-.427l1.953.427Zm20.518-.427a1 1 0 0 1-1.954.427l1.954-.427ZM3.193 2.105a1 1 0 0 1 1.531 1.287 9.5 9.5 0 0 0-2.006 4.072L.765 7.037a11.46 11.46 0 0 1 2.428-4.932Zm16.205-.123a1 1 0 0 1 1.34.047l.069.076.217.265a11.46 11.46 0 0 1 2.212 4.667l-.978.213-.976.214a9.46 9.46 0 0 0-1.826-3.853l-.18-.22-.062-.081a1 1 0 0 1 .184-1.328Z"/></svg>

assets/icons/circlePlus_stroke2_corner0_rounded.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2Zm0 2a8 8 0 1 0 0 16 8 8 0 0 0 0-16Zm0 3a1 1 0 0 1 1 1v3h3l.102.005a1 1 0 0 1 0 1.99L16 13h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 0 1 0-2h3V8a1 1 0 0 1 1-1Z"/></svg>

assets/icons/likeRepost_stroke2_corner2_rounded.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M3.92 19v-4.153a1 1 0 0 1 1-1H9l.103.005a1 1 0 0 1 0 1.99L9 15.847H7.285c.854.737 1.784 1.38 2.631 1.9.702.431 1.329.769 1.78.997l.291.143a25.6 25.6 0 0 0 3.67-2.326c2.144-1.642 4.073-3.756 4.315-6.023a1 1 0 0 1 1.988.212c-.336 3.154-2.89 5.717-5.086 7.398a27.6 27.6 0 0 1-4.34 2.704l-.078.038-.021.01-.007.003-.002.001-.001.001a1 1 0 0 1-.827.01v0h-.002l-.004-.002-.013-.006q-.016-.006-.045-.02l-.162-.075a27 27 0 0 1-2.503-1.361 22 22 0 0 1-2.95-2.143V19a1 1 0 0 1-2 0ZM2 10c0-2.214.696-3.971 1.833-5.184A5.7 5.7 0 0 1 8 3a7.1 7.1 0 0 1 4 1.228A7.1 7.1 0 0 1 16 3a5.68 5.68 0 0 1 3.469 1.185l.031-1.702a1 1 0 0 1 2 .035l-.081 4.5a1 1 0 0 1-1 .983H16.5a1 1 0 1 1 0-2h2.02A3.68 3.68 0 0 0 16 5a5.12 5.12 0 0 0-3.11 1.053 3 3 0 0 0-.155.129l-.029.025v.002l-.003.002-.072.064a1 1 0 0 1-1.338-.068l-.028-.025a3 3 0 0 0-.155-.13A5.12 5.12 0 0 0 8 5c-.982 0-1.965.392-2.708 1.185C4.554 6.97 4 8.214 4 10q0 .507.099 1.002l.075.328.02.1a1 1 0 0 1-1.925.5l-.03-.097-.102-.446A7 7 0 0 1 2 10Z"/></svg>

assets/icons/phoneHaptic_stroke2_corner2_rounded.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M16 6a1 1 0 0 0-1-1H9a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V6ZM2.87 7.225a1 1 0 0 1 1.337 1.482L3.155 9.759a.546.546 0 0 0-.05.714l.119.173c.52.827.52 1.88 0 2.707l-.12.174a.546.546 0 0 0 .051.714l1.052 1.052.069.076a1 1 0 0 1-1.407 1.406l-.076-.068-1.052-1.052a2.55 2.55 0 0 1-.237-3.328l.048-.075a.55.55 0 0 0 0-.504l-.048-.075a2.55 2.55 0 0 1 .237-3.328l1.052-1.052.076-.068Zm16.923.068a1 1 0 0 1 1.338-.068l.076.068 1.052 1.052.16.174c.696.837.78 2.03.209 2.958l-.133.196a.55.55 0 0 0 0 .654l.133.196a2.55 2.55 0 0 1-.21 2.958l-.16.174-1.05 1.052a1 1 0 1 1-1.415-1.414l1.052-1.052.064-.077a.55.55 0 0 0 .04-.552l-.053-.085a2.545 2.545 0 0 1 0-3.054l.052-.085a.55.55 0 0 0-.039-.552l-.064-.077-1.052-1.052-.068-.076a1 1 0 0 1 .068-1.338ZM13 6l.103.005a1 1 0 0 1 0 1.99L13 8h-2a1 1 0 1 1 0-2h2Zm5 12a3 3 0 0 1-3 3H9a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3h6a3 3 0 0 1 3 3v12Z"/></svg>

assets/icons/repostRepost_stroke2_corner2_rounded.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M6.043 14.293a1 1 0 1 1 1.414 1.414L5.164 18l2.293 2.293.068.076a1 1 0 0 1-1.406 1.406l-.076-.068-2.47-2.47a1.75 1.75 0 0 1 0-2.474l2.47-2.47Zm6.22 0a1 1 0 0 1 1.414 1.414L12.384 17H18a1 1 0 0 0 1-1v-3a1 1 0 1 1 2 0v3a3 3 0 0 1-3 3h-5.616l1.293 1.293.068.076a1 1 0 0 1-1.406 1.406l-.076-.068-2.47-2.47a1.75 1.75 0 0 1 0-2.474l2.47-2.47ZM3 11V8a3 3 0 0 1 3-3h5.586l-1.293-1.293-.068-.076a1 1 0 0 1 1.406-1.406l.076.068 2.47 2.47.12.133a1.75 1.75 0 0 1 0 2.209l-.12.132-2.47 2.47a1 1 0 1 1-1.414-1.414L11.586 7H6a1 1 0 0 0-1 1v3a1 1 0 1 1-2 0Zm13.543-8.707a1 1 0 0 1 1.338-.068l.076.068 2.47 2.47.12.133a1.75 1.75 0 0 1 0 2.209l-.12.132-2.47 2.47a1 1 0 1 1-1.414-1.414L18.836 6l-2.293-2.293-.068-.076a1 1 0 0 1 .068-1.338Z"/></svg>

assets/icons/tree_stroke2_corner0_rounded.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M6 2a2.998 2.998 0 0 1 1 5.825V8a2 2 0 0 0 2 2h1.174c.412-1.165 1.52-2 2.826-2h5a3 3 0 1 1 0 6h-5a3 3 0 0 1-2.826-2H9a4 4 0 0 1-2-.537V16a2 2 0 0 0 2 2h1.174c.412-1.165 1.52-2 2.826-2h5a3 3 0 1 1 0 6h-5a3 3 0 0 1-2.826-2H9a4 4 0 0 1-4-4V7.825A2.998 2.998 0 0 1 6 2Zm7 16a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2h-5Zm0-8a1 1 0 1 0 0 2h5a1 1 0 1 0 0-2h-5ZM6 4a1 1 0 1 0 0 2 1 1 0 0 0 0-2Z"/></svg>

bskyembed/tailwind.config.cjs

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

bskyembed/tsconfig.snippet.json

@@ -1,3 +1,4 @@
+
 {
   "compilerOptions": {
     "target": "ES5",

bskylink/src/db/index.ts

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

bskylink/src/index.ts

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

bskylink/src/routes/index.ts

@@ -1,6 +1,6 @@
-import {type Express} from 'express'
+import {Express} from 'express'
 
-import {type AppContext} from '../context.js'
+import {AppContext} from '../context.js'
 import {default as createShortLink} from './createShortLink.js'
 import {default as health} from './health.js'
 import {default as redirect} from './redirect.js'

bskylink/src/routes/redirect.ts

@@ -2,9 +2,9 @@ import assert from 'node:assert'
 
 import {DAY, SECOND} from '@atproto/common'
 import escapeHTML from 'escape-html'
-import {type Express} from 'express'
+import {Express} from 'express'
 
-import {type AppContext} from '../context.js'
+import {AppContext} from '../context.js'
 import {handler} from './util.js'
 
 const INTERNAL_IP_REGEX = new RegExp(

bskylink/src/routes/root.ts

@@ -1,6 +1,6 @@
-import {type Express} from 'express'
+import {Express} from 'express'
 
-import {type AppContext} from '../context.js'
+import {AppContext} from '../context.js'
 import {handler} from './util.js'
 
 export default function (ctx: AppContext, app: Express) {

bskyogcard/src/index.ts

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

bskyweb/cmd/bskyweb/server.go

@@ -278,17 +278,6 @@ func serve(cctx *cli.Context) error {
 	e.GET("/settings/content-and-media", server.WebGeneric)
 	e.GET("/settings/interests", server.WebGeneric)
 	e.GET("/settings/about", server.WebGeneric)
-	e.GET("/settings/notifications", server.WebGeneric)
-	e.GET("/settings/notifications/replies", server.WebGeneric)
-	e.GET("/settings/notifications/mentions", server.WebGeneric)
-	e.GET("/settings/notifications/quotes", server.WebGeneric)
-	e.GET("/settings/notifications/likes", server.WebGeneric)
-	e.GET("/settings/notifications/reposts", server.WebGeneric)
-	e.GET("/settings/notifications/new-followers", server.WebGeneric)
-	e.GET("/settings/notifications/likes-on-reposts", server.WebGeneric)
-	e.GET("/settings/notifications/reposts-on-reposts", server.WebGeneric)
-	e.GET("/settings/notifications/activity", server.WebGeneric)
-	e.GET("/settings/notifications/miscellaneous", server.WebGeneric)
 	e.GET("/settings/app-icon", server.WebGeneric)
 	e.GET("/sys/debug", server.WebGeneric)
 	e.GET("/sys/debug-mod", server.WebGeneric)

jest/jestSetup.js

@@ -33,10 +33,15 @@ jest.mock('react-native-safe-area-context', () => {
   }
 })
 
+jest.mock('rn-fetch-blob', () => ({
+  config: jest.fn().mockReturnThis(),
+  cancel: jest.fn(),
+  fetch: jest.fn(),
+}))
+
 jest.mock('expo-file-system', () => ({
   getInfoAsync: jest.fn().mockResolvedValue({exists: true, size: 100}),
   deleteAsync: jest.fn(),
-  createDownloadResumable: jest.fn(),
 }))
 
 jest.mock('expo-image-manipulator', () => ({
@@ -96,7 +101,7 @@ jest.mock('expo-modules-core', () => ({
       }
     }
   }),
-  requireNativeViewManager: jest.fn().mockImplementation(_ => {
+  requireNativeViewManager: jest.fn().mockImplementation(moduleName => {
     return () => null
   }),
 }))

modules/expo-background-notification-handler/android/src/main/java/expo/modules/backgroundnotificationhandler/BackgroundNotificationHandler.kt

@@ -15,8 +15,6 @@ class BackgroundNotificationHandler(
 
     if (remoteMessage.data["reason"] == "chat-message") {
       mutateWithChatMessage(remoteMessage)
-    } else {
-      mutateWithOtherReason(remoteMessage)
     }
 
     notifInterface.showMessage(remoteMessage)
@@ -41,17 +39,4 @@ class BackgroundNotificationHandler(
     // TODO - Remove this once we have more backend capability
     remoteMessage.data["badge"] = null
   }
-
-  private fun mutateWithOtherReason(remoteMessage: RemoteMessage) {
-    // If oreo or higher
-    if (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.O) {
-      // If one of "like", "repost", "follow", "mention", "reply", "quote", "like-via-repost", "repost-via-repost"
-      // assign to it's eponymous channel. otherwise do nothing, let expo handle it
-      when (remoteMessage.data["reason"]) {
-        "like", "repost", "follow", "mention", "reply", "quote", "like-via-repost", "repost-via-repost" -> {
-          remoteMessage.data["channelId"] = remoteMessage.data["reason"]
-        }
-      }
-    }
-  }
 }

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

@@ -12,7 +12,7 @@ const EmojiPicker = ({onEmojiSelected}: EmojiPickerViewProps) => {
         flex: 1,
         width: '100%',
         backgroundColor: scheme === 'dark' ? '#000' : '#fff',
-      }) as const,
+      } as const),
     [scheme],
   )
 

package.json

@@ -69,12 +69,12 @@
     "icons:optimize": "svgo -f ./assets/icons"
   },
   "dependencies": {
-    "@atproto/api": "^0.15.16",
+    "@atproto/api": "^0.15.9",
     "@bitdrift/react-native": "^0.6.8",
     "@braintree/sanitize-url": "^6.0.2",
     "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
     "@emoji-mart/react": "^1.1.1",
-    "@expo/html-elements": "^0.12.5",
+    "@expo/html-elements": "^0.12.4",
     "@expo/webpack-config": "^19.0.1",
     "@floating-ui/dom": "^1.6.3",
     "@floating-ui/react-dom": "^2.0.8",
@@ -85,12 +85,12 @@
     "@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.3.1",
+    "@haileyok/bluesky-video": "0.2.6",
     "@ipld/dag-cbor": "^9.2.0",
     "@lingui/react": "^4.14.1",
-    "@mattermost/react-native-paste-input": "mattermost/react-native-paste-input",
-    "@miblanchard/react-native-slider": "^2.6.0",
-    "@mozzius/expo-dynamic-app-icon": "1.5.0",
+    "@mattermost/react-native-paste-input": "^0.7.1",
+    "@miblanchard/react-native-slider": "^2.3.1",
+    "@mozzius/expo-dynamic-app-icon": "^1.5.0",
     "@react-native-async-storage/async-storage": "2.1.2",
     "@react-native-menu/menu": "^1.2.3",
     "@react-native-picker/picker": "2.11.0",
@@ -98,7 +98,7 @@
     "@react-navigation/drawer": "^7.3.12",
     "@react-navigation/native": "^7.1.9",
     "@react-navigation/native-stack": "^7.3.13",
-    "@sentry/react-native": "~6.14.0",
+    "@sentry/react-native": "~6.10.0",
     "@tanstack/query-async-storage-persister": "^5.25.0",
     "@tanstack/react-query": "^5.8.1",
     "@tanstack/react-query-persist-client": "^5.25.0",
@@ -130,33 +130,33 @@
     "emoji-mart": "^5.5.2",
     "emoji-regex": "^10.4.0",
     "eventemitter3": "^5.0.1",
-    "expo": "53.0.11",
+    "expo": "^53.0.5",
     "expo-application": "~6.1.4",
-    "expo-blur": "~14.1.5",
+    "expo-blur": "~14.1.4",
     "expo-build-properties": "~0.14.6",
-    "expo-camera": "~16.1.8",
+    "expo-camera": "~16.1.6",
     "expo-clipboard": "~7.1.4",
-    "expo-dev-client": "~5.2.0",
+    "expo-dev-client": "~5.1.7",
     "expo-device": "~7.1.4",
-    "expo-file-system": "~18.1.10",
-    "expo-font": "~13.3.1",
+    "expo-file-system": "~18.1.8",
+    "expo-font": "~13.3.0",
     "expo-haptics": "~14.1.4",
-    "expo-image": "~2.2.1",
+    "expo-image": "~2.1.6",
     "expo-image-crop-tool": "^0.1.8",
-    "expo-image-manipulator": "~13.1.7",
+    "expo-image-manipulator": "~13.1.5",
     "expo-image-picker": "~16.1.4",
-    "expo-linear-gradient": "~14.1.5",
-    "expo-linking": "~7.1.5",
+    "expo-linear-gradient": "~14.1.4",
+    "expo-linking": "~7.1.4",
     "expo-localization": "~16.1.5",
-    "expo-media-library": "~17.1.7",
-    "expo-notifications": "~0.31.3",
-    "expo-screen-orientation": "~8.1.7",
+    "expo-media-library": "~17.1.6",
+    "expo-notifications": "~0.31.1",
+    "expo-screen-orientation": "~8.1.5",
     "expo-sharing": "~13.1.5",
-    "expo-splash-screen": "~0.30.9",
-    "expo-system-ui": "~5.0.8",
+    "expo-splash-screen": "~0.30.8",
+    "expo-system-ui": "~5.0.7",
     "expo-task-manager": "~13.1.5",
-    "expo-updates": "~0.28.14",
-    "expo-video": "~2.2.1",
+    "expo-updates": "~0.28.12",
+    "expo-video": "~2.1.8",
     "expo-web-browser": "~14.1.6",
     "fast-text-encoding": "^1.0.6",
     "history": "^5.3.0",
@@ -182,34 +182,35 @@
     "react-image-crop": "^11.0.7",
     "react-is": "19",
     "react-keyed-flatten-children": "^5.0.0",
-    "react-native": "^0.79.3",
-    "react-native-compressor": "^1.11.0",
+    "react-native": "0.79.2",
+    "react-native-compressor": "1.11.0",
     "react-native-date-picker": "^5.0.12",
-    "react-native-drawer-layout": "^4.1.8",
+    "react-native-drawer-layout": "^4.1.6",
     "react-native-edge-to-edge": "^1.6.0",
     "react-native-gesture-handler": "2.25.0",
     "react-native-get-random-values": "~1.11.0",
     "react-native-ios-context-menu": "^1.15.3",
-    "react-native-keyboard-controller": "^1.17.5",
+    "react-native-keyboard-controller": "^1.17.1",
     "react-native-mmkv": "^2.12.2",
-    "react-native-pager-view": "^6.7.1",
+    "react-native-pager-view": "6.7.1",
     "react-native-progress": "bluesky-social/react-native-progress",
     "react-native-qrcode-styled": "^0.3.3",
     "react-native-reanimated": "~3.17.5",
-    "react-native-root-siblings": "^5.0.1",
+    "react-native-root-siblings": "^4.1.1",
     "react-native-safe-area-context": "5.4.0",
     "react-native-screens": "^4.11.1",
-    "react-native-svg": "15.12.0",
+    "react-native-svg": "15.11.2",
     "react-native-uitextview": "^1.4.0",
     "react-native-url-polyfill": "^1.3.0",
     "react-native-uuid": "^2.0.3",
     "react-native-view-shot": "^4.0.3",
     "react-native-web": "~0.20.0",
     "react-native-web-webview": "^1.0.2",
-    "react-native-webview": "^13.13.5",
+    "react-native-webview": "13.13.5",
     "react-remove-scroll-bar": "^2.3.8",
-    "react-responsive": "^9.0.2",
+    "react-responsive": "^10.0.1",
     "react-textarea-autosize": "^8.5.3",
+    "rn-fetch-blob": "^0.12.0",
     "statsig-react-native-expo": "^4.6.1",
     "tippy.js": "^6.3.7",
     "tlds": "^1.234.0",
@@ -218,7 +219,7 @@
     "zod": "^3.20.2"
   },
   "devDependencies": {
-    "@atproto/dev-env": "^0.3.144",
+    "@atproto/dev-env": "^0.3.133",
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/runtime": "^7.26.0",
@@ -226,9 +227,8 @@
     "@lingui/cli": "^4.14.1",
     "@lingui/macro": "^4.14.1",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
-    "@react-native/babel-preset": "0.79.3",
-    "@react-native/eslint-config": "^0.79.3",
-    "@react-native/typescript-config": "^0.79.3",
+    "@react-native/eslint-config": "^0.79.2",
+    "@react-native/typescript-config": "^0.79.2",
     "@sentry/webpack-plugin": "^3.2.2",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "^13.2.0",
@@ -238,8 +238,8 @@
     "@types/lodash.isequal": "^4.5.6",
     "@types/lodash.shuffle": "^4.2.7",
     "@types/psl": "^1.1.1",
+    "@types/react": "^19.1.7",
     "@types/react-dom": "^19.1.2",
-    "@types/react-responsive": "^8.0.5",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "babel-jest": "^29.7.0",
@@ -260,12 +260,12 @@
     "husky": "^8.0.3",
     "is-ci": "^3.0.1",
     "jest": "^29.7.0",
-    "jest-expo": "~53.0.7",
+    "jest-expo": "~53.0.3",
     "jest-junit": "^16.0.0",
     "lint-staged": "^13.2.3",
     "lockfile-lint": "^4.14.0",
     "metro-react-native-babel-preset": "^0.77.0",
-    "prettier": "^3.6.0",
+    "prettier": "^2.8.3",
     "react-native-dotenv": "^3.4.11",
     "react-refresh": "^0.14.0",
     "svgo": "^3.3.2",
@@ -275,11 +275,10 @@
   },
   "resolutions": {
     "@expo/image-utils": "0.6.3",
-    "@react-native/babel-preset": "0.79.3",
-    "@react-native/normalize-colors": "0.79.3",
-    "@types/react": "^18",
+    "@react-native/babel-preset": "0.79.2",
+    "@react-native/normalize-colors": "0.79.2",
     "**/expo-constants": "17.0.3",
-    "**/expo-device": "7.1.4",
+    "**/expo-device": "7.0.1",
     "**/zod": "3.23.8",
     "**/multiformats": "9.9.0"
   },
@@ -359,8 +358,7 @@
     ],
     "allowedUrls": [
       "https://codeload.github.com/bluesky-social/react-native-bottom-sheet/tar.gz/28a87d1bb55e10fc355fa1455545a30734995908",
-      "https://codeload.github.com/bluesky-social/react-native-progress/tar.gz/5a372f4f2ce5feb26f4f47b6a4d187ab9b923ab4",
-      "https://codeload.github.com/mattermost/react-native-paste-input/tar.gz/f260447edc645a817ab1ba7b46d8341d84dba8e9"
+      "https://codeload.github.com/bluesky-social/react-native-progress/tar.gz/5a372f4f2ce5feb26f4f47b6a4d187ab9b923ab4"
     ],
     "emptyHostname": false,
     "validatePackageNames": true,

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

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

patches/@mattermost+react-native-paste-input+0.7.1.patch

@@ -114,7 +114,7 @@ index e916023..5049c33 100644
  }
  
  #pragma mark - UIScrollViewDelegate
-@@ -62,7 +92,6 @@ - (void)setSmartPunctuation:(NSString *)smartPunctuation {
+@@ -62,7 +92,6 @@
  - (void)scrollViewDidScroll:(UIScrollView *)scrollView
  {
    RCTDirectEventBlock onScroll = self.onScroll;
@@ -122,7 +122,7 @@ index e916023..5049c33 100644
    if (onScroll) {
      CGPoint contentOffset = scrollView.contentOffset;
      CGSize contentSize = scrollView.contentSize;
-@@ -71,22 +100,22 @@ - (void)scrollViewDidScroll:(UIScrollView *)scrollView
+@@ -71,22 +100,22 @@
  
      onScroll(@{
        @"contentOffset": @{
@@ -155,110 +155,3 @@ index e916023..5049c33 100644
        },
        @"zoomScale": @(scrollView.zoomScale ?: 1),
      });
-diff --git a/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInput.mm b/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInput.mm
-index dd50053..2ed7017 100644
---- a/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInput.mm
-+++ b/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInput.mm
-@@ -122,8 +122,8 @@ - (void)updateProps:(const Props::Shared &)props oldProps:(const Props::Shared &
-   const auto &newTextInputProps = static_cast<const PasteTextInputProps &>(*props);
- 
-   // Traits:
--  if (newTextInputProps.traits.multiline != oldTextInputProps.traits.multiline) {
--    [self _setMultiline:newTextInputProps.traits.multiline];
-+  if (newTextInputProps.multiline != oldTextInputProps.multiline) {
-+    [self _setMultiline:newTextInputProps.multiline];
-   }
- 
-   if (newTextInputProps.traits.autocapitalizationType != oldTextInputProps.traits.autocapitalizationType) {
-@@ -421,7 +421,7 @@ - (void)textInputDidChangeSelection
-     return;
-   }
-   const auto &props = static_cast<const PasteTextInputProps &>(*_props);
--  if (props.traits.multiline && ![_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) {
-+  if (props.multiline && ![_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) {
-     [self textInputDidChange];
-     _ignoreNextTextInputCall = YES;
-   }
-@@ -708,11 +708,11 @@ - (BOOL)_textOf:(NSAttributedString *)newText equals:(NSAttributedString *)oldTe
- - (SubmitBehavior)getSubmitBehavior
- {
-   const auto &props = static_cast<const PasteTextInputProps &>(*_props);
--  const SubmitBehavior submitBehaviorDefaultable = props.traits.submitBehavior;
-+  const SubmitBehavior submitBehaviorDefaultable = props.submitBehavior;
- 
-   // We should always have a non-default `submitBehavior`, but in case we don't, set it based on multiline.
-   if (submitBehaviorDefaultable == SubmitBehavior::Default) {
--    return props.traits.multiline ? SubmitBehavior::Newline : SubmitBehavior::BlurAndSubmit;
-+    return props.multiline ? SubmitBehavior::Newline : SubmitBehavior::BlurAndSubmit;
-   }
- 
-   return submitBehaviorDefaultable;
-diff --git a/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInputSpecs/Props.cpp b/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInputSpecs/Props.cpp
-index 29e094f..7ef519a 100644
---- a/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInputSpecs/Props.cpp
-+++ b/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInputSpecs/Props.cpp
-@@ -22,8 +22,7 @@ PasteTextInputProps::PasteTextInputProps(
-     const PropsParserContext &context,
-     const PasteTextInputProps &sourceProps,
-     const RawProps& rawProps)
--    : ViewProps(context, sourceProps, rawProps),
--    BaseTextProps(context, sourceProps, rawProps),
-+    : BaseTextInputProps(context, sourceProps, rawProps),
-     traits(convertRawProp(context, rawProps, sourceProps.traits, {})),
-     smartPunctuation(convertRawProp(context, rawProps, "smartPunctuation", sourceProps.smartPunctuation, {})),
-     disableCopyPaste(convertRawProp(context, rawProps, "disableCopyPaste", sourceProps.disableCopyPaste, {false})),
-@@ -133,7 +132,7 @@ TextAttributes PasteTextInputProps::getEffectiveTextAttributes(Float fontSizeMul
- ParagraphAttributes PasteTextInputProps::getEffectiveParagraphAttributes() const {
-     auto result = paragraphAttributes;
- 
--    if (!traits.multiline) {
-+    if (!multiline) {
-         result.maximumNumberOfLines = 1;
-     }
- 
-diff --git a/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInputSpecs/Props.h b/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInputSpecs/Props.h
-index 723d00c..31cfe66 100644
---- a/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInputSpecs/Props.h
-+++ b/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInputSpecs/Props.h
-@@ -15,6 +15,7 @@
- #include <react/renderer/components/iostextinput/conversions.h>
- #include <react/renderer/components/iostextinput/primitives.h>
- #include <react/renderer/components/text/BaseTextProps.h>
-+#include <react/renderer/components/textinput/BaseTextInputProps.h>
- #include <react/renderer/components/view/ViewProps.h>
- #include <react/renderer/core/Props.h>
- #include <react/renderer/core/PropsParserContext.h>
-@@ -25,7 +26,7 @@
- 
- namespace facebook::react {
- 
--class PasteTextInputProps final : public ViewProps, public BaseTextProps {
-+class PasteTextInputProps final : public BaseTextInputProps {
- public:
-     PasteTextInputProps() = default;
-     PasteTextInputProps(const PropsParserContext& context, const PasteTextInputProps& sourceProps, const RawProps& rawProps);
-diff --git a/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInputSpecs/ShadowNodes.cpp b/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInputSpecs/ShadowNodes.cpp
-index 31e07e3..7f0ebfb 100644
---- a/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInputSpecs/ShadowNodes.cpp
-+++ b/node_modules/@mattermost/react-native-paste-input/ios/PasteTextInputSpecs/ShadowNodes.cpp
-@@ -91,20 +91,11 @@ void PasteTextInputShadowNode::updateStateIfNeeded(
-   const auto& state = getStateData();
- 
-   react_native_assert(textLayoutManager_);
--  react_native_assert(
--      (!state.layoutManager || state.layoutManager == textLayoutManager_) &&
--      "`StateData` refers to a different `TextLayoutManager`");
--
--  if (state.reactTreeAttributedString == reactTreeAttributedString &&
--      state.layoutManager == textLayoutManager_) {
--    return;
--  }
- 
-   auto newState = TextInputState{};
-   newState.attributedStringBox = AttributedStringBox{reactTreeAttributedString};
-   newState.paragraphAttributes = getConcreteProps().paragraphAttributes;
-   newState.reactTreeAttributedString = reactTreeAttributedString;
--  newState.layoutManager = textLayoutManager_;
-   newState.mostRecentEventCount = getConcreteProps().mostRecentEventCount;
-   setStateData(std::move(newState));
- }

patches/react-native+0.79.2.patch

@@ -1,32 +1,3 @@
-diff --git a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.h b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.h
-index 914a249..0deac55 100644
---- a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.h
-+++ b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTPullToRefreshViewComponentView.h
-@@ -19,6 +19,8 @@ NS_ASSUME_NONNULL_BEGIN
-  */
- @interface RCTPullToRefreshViewComponentView : RCTViewComponentView <RCTCustomPullToRefreshViewProtocol>
- 
-+- (void)beginRefreshingProgrammatically;
-+
- @end
- 
- NS_ASSUME_NONNULL_END
-diff --git a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm
-index d029337..0f63ea3 100644
---- a/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm
-+++ b/node_modules/react-native/React/Fabric/Mounting/ComponentViews/ScrollView/RCTScrollViewComponentView.mm
-@@ -1003,6 +1003,11 @@ - (void)_adjustForMaintainVisibleContentPosition
-   }
- }
- 
-++ (BOOL)shouldBeRecycled
-+{
-+  return NO;
-+}
-+
- @end
- 
- Class<RCTComponentViewProtocol> RCTScrollViewCls(void)
 diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
 index e9b330f..ec5f58c 100644
 --- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
@@ -44,7 +15,7 @@ diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshCont
 index 53bfd04..ff1b1ed 100644
 --- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
 +++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
-@@ -23,6 +23,7 @@ @implementation RCTRefreshControl {
+@@ -23,6 +23,7 @@
    UIColor *_titleColor;
    CGFloat _progressViewOffset;
    BOOL _hasMovedToWindow;
@@ -52,7 +23,7 @@ index 53bfd04..ff1b1ed 100644
  }
  
  - (instancetype)init
-@@ -58,6 +59,12 @@ - (void)layoutSubviews
+@@ -58,6 +59,12 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : (NSCoder *)aDecoder)
    _isInitialRender = false;
  }
  
@@ -65,7 +36,7 @@ index 53bfd04..ff1b1ed 100644
  - (void)didMoveToWindow
  {
    [super didMoveToWindow];
-@@ -221,4 +228,50 @@ - (void)refreshControlValueChanged
+@@ -221,4 +228,50 @@ RCT_NOT_IMPLEMENTED(-(instancetype)initWithCoder : (NSCoder *)aDecoder)
    }
  }
  
@@ -120,7 +91,7 @@ diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshCont
 index 40aaf9c..1c60164 100644
 --- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m
 +++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControlManager.m
-@@ -22,11 +22,12 @@ - (UIView *)view
+@@ -22,11 +22,12 @@ RCT_EXPORT_MODULE()
  
  RCT_EXPORT_VIEW_PROPERTY(onRefresh, RCTDirectEventBlock)
  RCT_EXPORT_VIEW_PROPERTY(refreshing, BOOL)
@@ -134,3 +105,15 @@ index 40aaf9c..1c60164 100644
  RCT_EXPORT_METHOD(setNativeRefreshing : (nonnull NSNumber *)viewTag toRefreshing : (BOOL)refreshing)
  {
    [self.bridge.uiManager addUIBlock:^(RCTUIManager *uiManager, NSDictionary<NSNumber *, UIView *> *viewRegistry) {
+diff --git a/node_modules/react-native/React/Views/ScrollView/RCTScrollViewManager.m b/node_modules/react-native/React/Views/ScrollView/RCTScrollViewManager.m
+index cd1e7eb..c1d0172 100644
+--- a/node_modules/react-native/React/Views/ScrollView/RCTScrollViewManager.m
++++ b/node_modules/react-native/React/Views/ScrollView/RCTScrollViewManager.m
+@@ -83,6 +83,7 @@ RCT_EXPORT_VIEW_PROPERTY(showsVerticalScrollIndicator, BOOL)
+ RCT_EXPORT_VIEW_PROPERTY(scrollEventThrottle, NSTimeInterval)
+ RCT_EXPORT_VIEW_PROPERTY(zoomScale, CGFloat)
+ RCT_EXPORT_VIEW_PROPERTY(contentInset, UIEdgeInsets)
++RCT_EXPORT_VIEW_PROPERTY(scrollIndicatorInsets, UIEdgeInsets)
+ RCT_EXPORT_VIEW_PROPERTY(verticalScrollIndicatorInsets, UIEdgeInsets)
+ RCT_EXPORT_VIEW_PROPERTY(scrollToOverflowEnabled, BOOL)
+ RCT_EXPORT_VIEW_PROPERTY(snapToInterval, int)

scripts/post-web-build.js

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

src/App.native.tsx

@@ -33,7 +33,6 @@ import {
   ensureGeolocationResolved,
   Provider as GeolocationProvider,
 } from '#/state/geolocation'
-import {GlobalGestureEventsProvider} from '#/state/global-gesture-events'
 import {Provider as HomeBadgeProvider} from '#/state/home-badge'
 import {Provider as InvitesStateProvider} from '#/state/invites'
 import {Provider as LightboxStateProvider} from '#/state/lightbox'
@@ -59,7 +58,9 @@ import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
 import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
 import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
 import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
+import {Provider as UnstablePostSourceProvider} from '#/state/unstable-post-source'
 import {TestCtrls} from '#/view/com/testing/TestCtrls'
+import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
 import * as Toast from '#/view/com/util/Toast'
 import {Shell} from '#/view/shell'
 import {ThemeProvider as Alf} from '#/alf'
@@ -69,11 +70,9 @@ 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 {Provider as VideoVolumeProvider} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
 import {Splash} from '#/Splash'
 import {BottomSheetProvider} from '../modules/bottom-sheet'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
-import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottomBarBorder'
 
 SplashScreen.preventAutoHideAsync()
 if (isIOS) {
@@ -152,18 +151,16 @@ function InnerApp() {
                                           <MutedThreadsProvider>
                                             <ProgressGuideProvider>
                                               <ServiceAccountManager>
-                                                <HideBottomBarBorderProvider>
+                                                <UnstablePostSourceProvider>
                                                   <GestureHandlerRootView
                                                     style={s.h100pct}>
-                                                    <GlobalGestureEventsProvider>
-                                                      <IntentDialogProvider>
-                                                        <TestCtrls />
-                                                        <Shell />
-                                                        <NuxDialogs />
-                                                      </IntentDialogProvider>
-                                                    </GlobalGestureEventsProvider>
+                                                    <IntentDialogProvider>
+                                                      <TestCtrls />
+                                                      <Shell />
+                                                      <NuxDialogs />
+                                                    </IntentDialogProvider>
                                                   </GestureHandlerRootView>
-                                                </HideBottomBarBorderProvider>
+                                                </UnstablePostSourceProvider>
                                               </ServiceAccountManager>
                                             </ProgressGuideProvider>
                                           </MutedThreadsProvider>

src/App.web.tsx

@@ -48,6 +48,9 @@ import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
 import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
 import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
 import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
+import {Provider as UnstablePostSourceProvider} from '#/state/unstable-post-source'
+import {Provider as ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoWebContext'
+import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
 import * as Toast from '#/view/com/util/Toast'
 import {ToastContainer} from '#/view/com/util/Toast.web'
 import {Shell} from '#/view/shell/index'
@@ -58,10 +61,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 {Provider as ActiveVideoProvider} from '#/components/Post/Embed/VideoEmbed/ActiveVideoWebContext'
-import {Provider as VideoVolumeProvider} from '#/components/Post/Embed/VideoEmbed/VideoVolumeContext'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
-import {Provider as HideBottomBarBorderProvider} from './lib/hooks/useHideBottomBarBorder'
 
 /**
  * Begin geolocation ASAP
@@ -132,12 +132,12 @@ function InnerApp() {
                                             <SafeAreaProvider>
                                               <ProgressGuideProvider>
                                                 <ServiceConfigProvider>
-                                                  <HideBottomBarBorderProvider>
+                                                  <UnstablePostSourceProvider>
                                                     <IntentDialogProvider>
                                                       <Shell />
                                                       <NuxDialogs />
                                                     </IntentDialogProvider>
-                                                  </HideBottomBarBorderProvider>
+                                                  </UnstablePostSourceProvider>
                                                 </ServiceConfigProvider>
                                               </ProgressGuideProvider>
                                             </SafeAreaProvider>

src/Navigation.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react'
+import {type JSX, useCallback, useRef} from 'react'
 import {i18n, type MessageDescriptor} from '@lingui/core'
 import {msg} from '@lingui/macro'
 import {
@@ -90,10 +90,11 @@ import {AppPasswordsScreen} from '#/screens/Settings/AppPasswords'
 import {ContentAndMediaSettingsScreen} from '#/screens/Settings/ContentAndMediaSettings'
 import {ExternalMediaPreferencesScreen} from '#/screens/Settings/ExternalMediaPreferences'
 import {FollowingFeedPreferencesScreen} from '#/screens/Settings/FollowingFeedPreferences'
-import {InterestsSettingsScreen} from '#/screens/Settings/InterestsSettings'
 import {LanguageSettingsScreen} from '#/screens/Settings/LanguageSettings'
+import {NotificationSettingsScreen} from '#/screens/Settings/NotificationSettings'
 import {PrivacyAndSecuritySettingsScreen} from '#/screens/Settings/PrivacyAndSecuritySettings'
 import {SettingsScreen} from '#/screens/Settings/Settings'
+import {SettingsInterests} from '#/screens/Settings/SettingsInterests'
 import {ThreadPreferencesScreen} from '#/screens/Settings/ThreadPreferences'
 import {
   StarterPackScreen,
@@ -109,17 +110,6 @@ import {
 } from '#/components/dialogs/EmailDialog'
 import {router} from '#/routes'
 import {Referrer} from '../modules/expo-bluesky-swiss-army'
-import {LegacyNotificationSettingsScreen} from './screens/Settings/LegacyNotificationSettings'
-import {NotificationSettingsScreen} from './screens/Settings/NotificationSettings'
-import {LikeNotificationSettingsScreen} from './screens/Settings/NotificationSettings/LikeNotificationSettings'
-import {LikesOnRepostsNotificationSettingsScreen} from './screens/Settings/NotificationSettings/LikesOnRepostsNotificationSettings'
-import {MentionNotificationSettingsScreen} from './screens/Settings/NotificationSettings/MentionNotificationSettings'
-import {MiscellaneousNotificationSettingsScreen} from './screens/Settings/NotificationSettings/MiscellaneousNotificationSettings'
-import {NewFollowerNotificationSettingsScreen} from './screens/Settings/NotificationSettings/NewFollowerNotificationSettings'
-import {QuoteNotificationSettingsScreen} from './screens/Settings/NotificationSettings/QuoteNotificationSettings'
-import {ReplyNotificationSettingsScreen} from './screens/Settings/NotificationSettings/ReplyNotificationSettings'
-import {RepostNotificationSettingsScreen} from './screens/Settings/NotificationSettings/RepostNotificationSettings'
-import {RepostsOnRepostsNotificationSettingsScreen} from './screens/Settings/NotificationSettings/RepostsOnRepostsNotificationSettings'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -390,83 +380,6 @@ function commonScreens(Stack: typeof Flat, unreadCountLabel?: string) {
           requireAuth: true,
         }}
       />
-      <Stack.Screen
-        name="NotificationSettings"
-        getComponent={() => NotificationSettingsScreen}
-        options={{title: title(msg`Notification settings`), requireAuth: true}}
-      />
-      <Stack.Screen
-        name="ReplyNotificationSettings"
-        getComponent={() => ReplyNotificationSettingsScreen}
-        options={{
-          title: title(msg`Reply notifications`),
-          requireAuth: true,
-        }}
-      />
-      <Stack.Screen
-        name="MentionNotificationSettings"
-        getComponent={() => MentionNotificationSettingsScreen}
-        options={{
-          title: title(msg`Mention notifications`),
-          requireAuth: true,
-        }}
-      />
-      <Stack.Screen
-        name="QuoteNotificationSettings"
-        getComponent={() => QuoteNotificationSettingsScreen}
-        options={{
-          title: title(msg`Quote notifications`),
-          requireAuth: true,
-        }}
-      />
-      <Stack.Screen
-        name="LikeNotificationSettings"
-        getComponent={() => LikeNotificationSettingsScreen}
-        options={{
-          title: title(msg`Like notifications`),
-          requireAuth: true,
-        }}
-      />
-      <Stack.Screen
-        name="RepostNotificationSettings"
-        getComponent={() => RepostNotificationSettingsScreen}
-        options={{
-          title: title(msg`Repost notifications`),
-          requireAuth: true,
-        }}
-      />
-      <Stack.Screen
-        name="NewFollowerNotificationSettings"
-        getComponent={() => NewFollowerNotificationSettingsScreen}
-        options={{
-          title: title(msg`New follower notifications`),
-          requireAuth: true,
-        }}
-      />
-      <Stack.Screen
-        name="LikesOnRepostsNotificationSettings"
-        getComponent={() => LikesOnRepostsNotificationSettingsScreen}
-        options={{
-          title: title(msg`Likes of your reposts notifications`),
-          requireAuth: true,
-        }}
-      />
-      <Stack.Screen
-        name="RepostsOnRepostsNotificationSettings"
-        getComponent={() => RepostsOnRepostsNotificationSettingsScreen}
-        options={{
-          title: title(msg`Reposts of your reposts notifications`),
-          requireAuth: true,
-        }}
-      />
-      <Stack.Screen
-        name="MiscellaneousNotificationSettings"
-        getComponent={() => MiscellaneousNotificationSettingsScreen}
-        options={{
-          title: title(msg`Miscellaneous notifications`),
-          requireAuth: true,
-        }}
-      />
       <Stack.Screen
         name="ContentAndMediaSettings"
         getComponent={() => ContentAndMediaSettingsScreen}
@@ -476,8 +389,8 @@ function commonScreens(Stack: typeof Flat, unreadCountLabel?: string) {
         }}
       />
       <Stack.Screen
-        name="InterestsSettings"
-        getComponent={() => InterestsSettingsScreen}
+        name="SettingsInterests"
+        getComponent={() => SettingsInterests}
         options={{
           title: title(msg`Your interests`),
           requireAuth: true,
@@ -525,8 +438,8 @@ function commonScreens(Stack: typeof Flat, unreadCountLabel?: string) {
         options={{title: title(msg`Chat request inbox`), requireAuth: true}}
       />
       <Stack.Screen
-        name="LegacyNotificationSettings"
-        getComponent={() => LegacyNotificationSettingsScreen}
+        name="NotificationSettings"
+        getComponent={() => NotificationSettingsScreen}
         options={{title: title(msg`Notification settings`), requireAuth: true}}
       />
       <Stack.Screen
@@ -571,7 +484,7 @@ function commonScreens(Stack: typeof Flat, unreadCountLabel?: string) {
  * in 3 distinct tab-stacks with a different root screen on each.
  */
 function TabsNavigator() {
-  const tabBar = React.useCallback(
+  const tabBar = useCallback(
     (props: JSX.IntrinsicAttributes & BottomTabBarProps) => (
       <BottomBar {...props} />
     ),
@@ -799,7 +712,7 @@ const LINKING = {
 function RoutesContainer({children}: React.PropsWithChildren<{}>) {
   const theme = useColorSchemeStyle(DefaultTheme, DarkTheme)
   const {currentAccount} = useSession()
-  const prevLoggedRouteName = React.useRef<string | undefined>(undefined)
+  const prevLoggedRouteName = useRef<string | undefined>(undefined)
   const emailDialogControl = useEmailDialogControl()
 
   function onReady() {

src/alf/atoms.ts

@@ -983,10 +983,6 @@ export const atoms = {
   transition_none: web({
     transitionProperty: 'none',
   }),
-  transition_timing_default: web({
-    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
-    transitionDuration: '100ms',
-  }),
   transition_all: web({
     transitionProperty: 'all',
     transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
@@ -1055,8 +1051,4 @@ export const atoms = {
       transform: [],
     },
   }) as {transform: Exclude<ViewStyle['transform'], string | undefined>},
-
-  pointer: web({
-    cursor: 'pointer',
-  }),
 } as const

src/alf/typography.tsx

@@ -3,7 +3,6 @@ import {type TextProps as RNTextProps} from 'react-native'
 import {type StyleProp, type TextStyle} from 'react-native'
 import {UITextView} from 'react-native-uitextview'
 import createEmojiRegex from 'emoji-regex'
-import type React from 'react'
 
 import {isNative} from '#/platform/detection'
 import {isIOS} from '#/platform/detection'

src/alf/util/__tests__/colors.test.ts

@@ -1,48 +0,0 @@
-import {jest} from '@jest/globals'
-
-import {logger} from '#/logger'
-import {transparentifyColor} from '../colorGeneration'
-
-jest.mock('#/logger', () => ({
-  logger: {warn: jest.fn()},
-}))
-
-describe('transparentifyColor', () => {
-  beforeEach(() => {
-    jest.clearAllMocks()
-  })
-
-  it('converts hsl() to hsla()', () => {
-    const result = transparentifyColor('hsl(120 100% 50%)', 0.5)
-    expect(result).toBe('hsla(120 100% 50%, 0.5)')
-  })
-
-  it('converts hsl() to hsla() - fully transparent', () => {
-    const result = transparentifyColor('hsl(120 100% 50%)', 0)
-    expect(result).toBe('hsla(120 100% 50%, 0)')
-  })
-
-  it('converts rgb() to rgba()', () => {
-    const result = transparentifyColor('rgb(255 0 0)', 0.75)
-    expect(result).toBe('rgba(255 0 0, 0.75)')
-  })
-
-  it('expands 3-digit hex and appends alpha channel', () => {
-    const result = transparentifyColor('#abc', 0.4)
-    expect(result).toBe('#aabbcc66')
-  })
-
-  it('appends alpha to 6-digit hex', () => {
-    const result = transparentifyColor('#aabbcc', 0.4)
-    expect(result).toBe('#aabbcc66')
-  })
-
-  it('returns the original string and warns for unsupported formats', () => {
-    const unsupported = 'blue'
-    const result = transparentifyColor(unsupported, 0.5)
-    expect(result).toBe(unsupported)
-    expect(logger.warn).toHaveBeenCalledWith(
-      `Could not make '${unsupported}' transparent`,
-    )
-  })
-})

src/alf/util/colorGeneration.ts

@@ -1,5 +1,3 @@
-import {logger} from '#/logger'
-
 export const BLUE_HUE = 211
 export const RED_HUE = 346
 export const GREEN_HUE = 152
@@ -21,29 +19,3 @@ export function generateScale(start: number, end: number) {
 export const defaultScale = generateScale(6, 100)
 // dim shifted 6% lighter
 export const dimScale = generateScale(12, 100)
-
-export function transparentifyColor(color: string, alpha: number) {
-  if (color.startsWith('hsl(')) {
-    return 'hsla(' + color.slice('hsl('.length, -1) + `, ${alpha})`
-  } else if (color.startsWith('rgb(')) {
-    return 'rgba(' + color.slice('rgb('.length, -1) + `, ${alpha})`
-  } else if (color.startsWith('#')) {
-    if (color.length === 7) {
-      const alphaHex = Math.round(alpha * 255).toString(16)
-      // Per MDN: If there is only one number, it is duplicated: e means ee
-      // https://developer.mozilla.org/en-US/docs/Web/CSS/hex-color
-      return color.slice(0, 7) + alphaHex.padStart(2, alphaHex)
-    } else if (color.length === 4) {
-      // convert to 6-digit hex before adding alpha
-      const [r, g, b] = color.slice(1).split('')
-      const alphaHex = Math.round(alpha * 255).toString(16)
-      return `#${r.repeat(2)}${g.repeat(2)}${b.repeat(2)}${alphaHex.padStart(
-        2,
-        alphaHex,
-      )}`
-    }
-  } else {
-    logger.warn(`Could not make '${color}' transparent`)
-  }
-  return color
-}

src/alf/util/systemUI.ts

@@ -1,7 +1,7 @@
 import * as SystemUI from 'expo-system-ui'
 
 import {isAndroid} from '#/platform/detection'
-import {type Theme} from '../types'
+import {Theme} from '../types'
 
 export function setSystemUITheme(themeType: 'theme' | 'lightbox', t: Theme) {
   if (isAndroid) {

src/components/Button.tsx

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

src/components/ContextMenu/Backdrop.tsx

@@ -2,7 +2,7 @@ import {Pressable} from 'react-native'
 import Animated, {
   Extrapolation,
   interpolate,
-  type SharedValue,
+  SharedValue,
   useAnimatedStyle,
 } from 'react-native-reanimated'
 import {msg} from '@lingui/macro'

src/components/ContextMenu/index.tsx

@@ -119,7 +119,8 @@ export function Root({children}: {children: React.ReactNode}) {
   const hoverablesSV = useSharedValue<
     Record<string, {id: string; rect: Measurement}>
   >({})
-  const syncHoverablesThrottleRef = useRef<ReturnType<typeof setTimeout>>()
+  const syncHoverablesThrottleRef =
+    useRef<ReturnType<typeof setTimeout>>(undefined)
   const [hoveredMenuItem, setHoveredMenuItem] = useState<string | null>(null)
 
   const onHoverableTouchUp = useCallback((id: string) => {
@@ -190,7 +191,7 @@ export function Root({children}: {children: React.ReactNode}) {
           if (item) playHaptic('Light')
           setHoveredMenuItem(item)
         },
-      }) satisfies ContextType,
+      } satisfies ContextType),
     [
       measurement,
       setMeasurement,
@@ -710,8 +711,8 @@ export function Item({
       const xOffset = position
         ? position.x
         : align === 'left'
-          ? measurement.x
-          : measurement.x + measurement.width - layout.width
+        ? measurement.x
+        : measurement.x + measurement.width - layout.width
 
       registerHoverable(
         id,

src/components/ContextMenu/types.ts

@@ -5,7 +5,6 @@ import {
   type ViewStyle,
 } from 'react-native'
 import {type SharedValue} from 'react-native-reanimated'
-import type React from 'react'
 
 import type * as Dialog from '#/components/Dialog'
 import {

src/components/Dialog/shared.tsx

@@ -5,7 +5,6 @@ import {
   View,
   type ViewStyle,
 } from 'react-native'
-import type React from 'react'
 
 import {atoms as a, useTheme} from '#/alf'
 import {Text} from '#/components/Typography'

src/components/Dialog/types.ts

@@ -1,15 +1,14 @@
-import React from 'react'
-import type {
-  AccessibilityProps,
-  GestureResponderEvent,
-  ScrollViewProps,
+import {
+  type AccessibilityProps,
+  type GestureResponderEvent,
+  type ScrollViewProps,
 } from 'react-native'
-import {ViewStyle} from 'react-native'
-import {StyleProp} from 'react-native'
+import {type ViewStyle} from 'react-native'
+import {type StyleProp} from 'react-native'
 
-import {ViewStyleProp} from '#/alf'
-import {BottomSheetViewProps} from '../../../modules/bottom-sheet'
-import {BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'
+import {type ViewStyleProp} from '#/alf'
+import {type BottomSheetViewProps} from '../../../modules/bottom-sheet'
+import {type BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'
 
 type A11yProps = Required<AccessibilityProps>
 
@@ -34,7 +33,7 @@ export type DialogControlRefProps = {
  */
 export type DialogControlProps = DialogControlRefProps & {
   id: string
-  ref: React.RefObject<DialogControlRefProps>
+  ref: React.RefObject<DialogControlRefProps | null>
   isOpen?: boolean
 }
 

src/components/FeedInterstitials.tsx

@@ -1,30 +1,24 @@
 import React from 'react'
 import {View} from 'react-native'
 import {ScrollView} from 'react-native-gesture-handler'
-import {type AppBskyFeedDefs, AtUri} from '@atproto/api'
+import {AppBskyFeedDefs, AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
-import {type NavigationProp} from '#/lib/routes/types'
+import {NavigationProp} from '#/lib/routes/types'
 import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useGetPopularFeedsQuery} from '#/state/queries/feed'
-import {type FeedDescriptor} from '#/state/queries/post-feed'
+import {FeedDescriptor} from '#/state/queries/post-feed'
 import {useProfilesQuery} from '#/state/queries/profile'
 import {useSuggestedFollowsByActorQuery} from '#/state/queries/suggested-follows'
 import {useSession} from '#/state/session'
 import * as userActionHistory from '#/state/userActionHistory'
-import {type SeenPost} from '#/state/userActionHistory'
+import {SeenPost} from '#/state/userActionHistory'
 import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
-import {
-  atoms as a,
-  useBreakpoints,
-  useTheme,
-  type ViewStyleProp,
-  web,
-} from '#/alf'
+import {atoms as a, useBreakpoints, useTheme, ViewStyleProp, web} from '#/alf'
 import {Button} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
 import {ArrowRight_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
@@ -33,7 +27,7 @@ import {PersonPlus_Stroke2_Corner0_Rounded as Person} from '#/components/icons/P
 import {InlineLinkText} from '#/components/Link'
 import * as ProfileCard from '#/components/ProfileCard'
 import {Text} from '#/components/Typography'
-import type * as bsky from '#/types/bsky'
+import * as bsky from '#/types/bsky'
 import {ProgressGuideList} from './ProgressGuide/List'
 
 const MOBILE_CARD_WIDTH = 300

src/components/Layout/Header/index.tsx

@@ -1,24 +1,24 @@
 import {createContext, useCallback, useContext} from 'react'
-import {type GestureResponderEvent, Keyboard, View} from 'react-native'
+import {GestureResponderEvent, Keyboard, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
 
 import {HITSLOP_30} from '#/lib/constants'
-import {type NavigationProp} from '#/lib/routes/types'
+import {NavigationProp} from '#/lib/routes/types'
 import {isIOS} from '#/platform/detection'
 import {useSetDrawerOpen} from '#/state/shell'
 import {
   atoms as a,
   platform,
-  type TextStyleProp,
+  TextStyleProp,
   useBreakpoints,
   useGutters,
   useLayoutBreakpoints,
   useTheme,
   web,
 } from '#/alf'
-import {Button, ButtonIcon, type ButtonProps} from '#/components/Button'
+import {Button, ButtonIcon, ButtonProps} from '#/components/Button'
 import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons/Arrow'
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import {

src/components/Link.tsx

@@ -4,12 +4,13 @@ import {sanitizeUrl} from '@braintree/sanitize-url'
 import {
   type LinkProps as RNLinkProps,
   StackActions,
+  useLinkBuilder,
 } from '@react-navigation/native'
 
 import {BSKY_DOWNLOAD_URL} from '#/lib/constants'
 import {useNavigationDeduped} from '#/lib/hooks/useNavigationDeduped'
 import {useOpenLink} from '#/lib/hooks/useOpenLink'
-import {type AllNavigatorParams, type RouteParams} from '#/lib/routes/types'
+import {type AllNavigatorParams} from '#/lib/routes/types'
 import {shareUrl} from '#/lib/sharing'
 import {
   convertBskyAppUrlIfNeeded,
@@ -24,7 +25,6 @@ import {Button, type ButtonProps} from '#/components/Button'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Text, type TextProps} from '#/components/Typography'
 import {router} from '#/routes'
-import {useGlobalDialogsControlContext} from './dialogs/Context'
 
 /**
  * Only available within a `Link`, since that inherits from `Button`.
@@ -95,25 +95,25 @@ export function useLink({
   shouldProxy?: boolean
 }) {
   const navigation = useNavigationDeduped()
+  const {buildHref} = useLinkBuilder()
   const href = useMemo(() => {
     return typeof to === 'string'
       ? convertBskyAppUrlIfNeeded(sanitizeUrl(to))
       : to.screen
-        ? router.matchName(to.screen)?.build(to.params)
-        : to.href
-          ? convertBskyAppUrlIfNeeded(sanitizeUrl(to.href))
-          : undefined
-  }, [to])
+      ? buildHref(to.screen, to.params)
+      : to.href
+      ? convertBskyAppUrlIfNeeded(sanitizeUrl(to.href))
+      : undefined
+  }, [to, buildHref])
 
   if (!href) {
     throw new Error(
-      'Could not resolve screen. Link `to` prop must be a string or an object with `screen` and `params` properties',
+      'Link `to` prop must be a string or an object with `screen` and `params` properties',
     )
   }
 
   const isExternal = isExternalUrl(href)
-  const {closeModal} = useModalControls()
-  const {linkWarningDialogControl} = useGlobalDialogsControlContext()
+  const {openModal, closeModal} = useModalControls()
   const openLink = useOpenLink()
 
   const onPress = React.useCallback(
@@ -134,9 +134,10 @@ export function useLink({
       }
 
       if (requiresWarning) {
-        linkWarningDialogControl.open({
-          displayText,
-          href,
+        openModal({
+          name: 'link-warning',
+          text: displayText,
+          href: href,
         })
       } else {
         if (isExternal) {
@@ -155,44 +156,15 @@ export function useLink({
           } else {
             closeModal() // close any active modals
 
-            const [screen, params] = router.matchPath(href) as [
-              screen: keyof AllNavigatorParams,
-              params?: RouteParams,
-            ]
-
-            // does not apply to web's flat navigator
-            if (isNative && screen !== 'NotFound') {
-              const state = navigation.getState()
-              // if screen is not in the current navigator, it means it's
-              // most likely a tab screen
-              if (!state.routeNames.includes(screen)) {
-                const parent = navigation.getParent()
-                if (
-                  parent &&
-                  parent.getState().routeNames.includes(`${screen}Tab`)
-                ) {
-                  // yep, it's a tab screen. i.e. SearchTab
-                  // thus we need to navigate to the child screen
-                  // via the parent navigator
-                  // see https://reactnavigation.org/docs/upgrading-from-6.x/#changes-to-the-navigate-action
-                  // TODO: can we support the other kinds of actions? push/replace -sfn
-
-                  // @ts-expect-error include does not narrow the type unfortunately
-                  parent.navigate(`${screen}Tab`, {screen, params})
-                  return
-                } else {
-                  // will probably fail, but let's try anyway
-                }
-              }
-            }
-
             if (action === 'push') {
-              navigation.dispatch(StackActions.push(screen, params))
+              navigation.dispatch(StackActions.push(...router.matchPath(href)))
             } else if (action === 'replace') {
-              navigation.dispatch(StackActions.replace(screen, params))
+              navigation.dispatch(
+                StackActions.replace(...router.matchPath(href)),
+              )
             } else if (action === 'navigate') {
-              // @ts-expect-error not typed
-              navigation.navigate(screen, params)
+              // @ts-ignore
+              navigation.navigate(...router.matchPath(href))
             } else {
               throw Error('Unsupported navigator action.')
             }
@@ -206,13 +178,13 @@ export function useLink({
       displayText,
       isExternal,
       href,
+      openModal,
       openLink,
       closeModal,
       action,
       navigation,
       overridePresentation,
       shouldProxy,
-      linkWarningDialogControl,
     ],
   )
 
@@ -225,21 +197,16 @@ export function useLink({
     )
 
     if (requiresWarning) {
-      linkWarningDialogControl.open({
-        displayText,
-        href,
+      openModal({
+        name: 'link-warning',
+        text: displayText,
+        href: href,
         share: true,
       })
     } else {
       shareUrl(href)
     }
-  }, [
-    disableMismatchWarning,
-    displayText,
-    href,
-    isExternal,
-    linkWarningDialogControl,
-  ])
+  }, [disableMismatchWarning, displayText, href, isExternal, openModal])
 
   const onLongPress = React.useCallback(
     (e: GestureResponderEvent) => {

src/components/Menu/context.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import {type ContextType, type ItemContextType} from '#/components/Menu/types'
+import type {ContextType, ItemContextType} from '#/components/Menu/types'
 
 export const Context = React.createContext<ContextType | null>(null)
 

src/components/Portal.tsx

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

src/components/Post/Embed/FeedEmbed.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import {StyleSheet} from 'react-native'
-import {moderateFeedGenerator} from '@atproto/api'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {FeedSourceCard} from '#/view/com/feeds/FeedSourceCard'
-import {ContentHider} from '#/components/moderation/ContentHider'
-import {type EmbedType} from '#/types/bsky/post'
-import {type CommonProps} from './types'
-
-export function FeedEmbed({
-  embed,
-}: CommonProps & {
-  embed: EmbedType<'feed'>
-}) {
-  const pal = usePalette('default')
-  return (
-    <FeedSourceCard
-      feedUri={embed.view.uri}
-      style={[pal.view, pal.border, styles.customFeedOuter]}
-      showLikes
-    />
-  )
-}
-
-export function ModeratedFeedEmbed({
-  embed,
-}: CommonProps & {
-  embed: EmbedType<'feed'>
-}) {
-  const moderationOpts = useModerationOpts()
-  const moderation = React.useMemo(() => {
-    return moderationOpts
-      ? moderateFeedGenerator(embed.view, moderationOpts)
-      : undefined
-  }, [embed.view, moderationOpts])
-  return (
-    <ContentHider modui={moderation?.ui('contentList')}>
-      <FeedEmbed embed={embed} />
-    </ContentHider>
-  )
-}
-
-const styles = StyleSheet.create({
-  customFeedOuter: {
-    borderWidth: StyleSheet.hairlineWidth,
-    borderRadius: 8,
-    paddingHorizontal: 12,
-    paddingVertical: 12,
-  },
-})

src/components/Post/Embed/ImageEmbed.tsx

@@ -1,106 +0,0 @@
-import {InteractionManager, View} from 'react-native'
-import {
-  type AnimatedRef,
-  measure,
-  type MeasuredDimensions,
-  runOnJS,
-  runOnUI,
-} from 'react-native-reanimated'
-import {Image} from 'expo-image'
-
-import {useLightboxControls} from '#/state/lightbox'
-import {type Dimensions} from '#/view/com/lightbox/ImageViewing/@types'
-import {AutoSizedImage} from '#/view/com/util/images/AutoSizedImage'
-import {ImageLayoutGrid} from '#/view/com/util/images/ImageLayoutGrid'
-import {atoms as a} from '#/alf'
-import {PostEmbedViewContext} from '#/components/Post/Embed/types'
-import {type EmbedType} from '#/types/bsky/post'
-import {type CommonProps} from './types'
-
-export function ImageEmbed({
-  embed,
-  ...rest
-}: CommonProps & {
-  embed: EmbedType<'images'>
-}) {
-  const {openLightbox} = useLightboxControls()
-  const {images} = embed.view
-
-  if (images.length > 0) {
-    const items = images.map(img => ({
-      uri: img.fullsize,
-      thumbUri: img.thumb,
-      alt: img.alt,
-      dimensions: img.aspectRatio ?? null,
-    }))
-    const _openLightbox = (
-      index: number,
-      thumbRects: (MeasuredDimensions | null)[],
-      fetchedDims: (Dimensions | null)[],
-    ) => {
-      openLightbox({
-        images: items.map((item, i) => ({
-          ...item,
-          thumbRect: thumbRects[i] ?? null,
-          thumbDimensions: fetchedDims[i] ?? null,
-          type: 'image',
-        })),
-        index,
-      })
-    }
-    const onPress = (
-      index: number,
-      refs: AnimatedRef<any>[],
-      fetchedDims: (Dimensions | null)[],
-    ) => {
-      runOnUI(() => {
-        'worklet'
-        const rects: (MeasuredDimensions | null)[] = []
-        for (const r of refs) {
-          rects.push(measure(r))
-        }
-        runOnJS(_openLightbox)(index, rects, fetchedDims)
-      })()
-    }
-    const onPressIn = (_: number) => {
-      InteractionManager.runAfterInteractions(() => {
-        Image.prefetch(items.map(i => i.uri))
-      })
-    }
-
-    if (images.length === 1) {
-      const image = images[0]
-      return (
-        <View style={[a.mt_sm, rest.style]}>
-          <AutoSizedImage
-            crop={
-              rest.viewContext === PostEmbedViewContext.ThreadHighlighted
-                ? 'none'
-                : rest.viewContext ===
-                    PostEmbedViewContext.FeedEmbedRecordWithMedia
-                  ? 'square'
-                  : 'constrained'
-            }
-            image={image}
-            onPress={(containerRef, dims) => onPress(0, [containerRef], [dims])}
-            onPressIn={() => onPressIn(0)}
-            hideBadge={
-              rest.viewContext === PostEmbedViewContext.FeedEmbedRecordWithMedia
-            }
-          />
-        </View>
-      )
-    }
-
-    return (
-      <View style={[a.mt_sm, rest.style]}>
-        <ImageLayoutGrid
-          images={images}
-          onPress={onPress}
-          onPressIn={onPressIn}
-          viewContext={rest.viewContext}
-        />
-      </View>
-    )
-  }
-}

src/components/Post/Embed/LazyQuoteEmbed.tsx

@@ -1,37 +0,0 @@
-import {useMemo} from 'react'
-import {View} from 'react-native'
-
-import {createEmbedViewRecordFromPost} from '#/state/queries/postgate/util'
-import {useResolveLinkQuery} from '#/state/queries/resolve-link'
-import {atoms as a, useTheme} from '#/alf'
-import {QuoteEmbed} from '#/components/Post/Embed'
-
-export function LazyQuoteEmbed({uri}: {uri: string}) {
-  const t = useTheme()
-  const {data} = useResolveLinkQuery(uri)
-
-  const view = useMemo(() => {
-    if (!data || data.type !== 'record' || data.kind !== 'post') return
-    return createEmbedViewRecordFromPost(data.view)
-  }, [data])
-
-  return view ? (
-    <QuoteEmbed
-      embed={{
-        type: 'post',
-        view,
-      }}
-    />
-  ) : (
-    <View
-      style={[
-        a.w_full,
-        a.rounded_md,
-        t.atoms.bg_contrast_25,
-        {
-          height: 68,
-        },
-      ]}
-    />
-  )
-}

src/components/Post/Embed/ListEmbed.tsx

@@ -1,42 +0,0 @@
-import React from 'react'
-import {View} from 'react-native'
-import {moderateUserList} from '@atproto/api'
-
-import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {atoms as a, useTheme} from '#/alf'
-import * as ListCard from '#/components/ListCard'
-import {ContentHider} from '#/components/moderation/ContentHider'
-import {type EmbedType} from '#/types/bsky/post'
-import {type CommonProps} from './types'
-
-export function ListEmbed({
-  embed,
-}: CommonProps & {
-  embed: EmbedType<'list'>
-}) {
-  const t = useTheme()
-  return (
-    <View
-      style={[a.border, t.atoms.border_contrast_medium, a.p_md, a.rounded_sm]}>
-      <ListCard.Default view={embed.view} />
-    </View>
-  )
-}
-
-export function ModeratedListEmbed({
-  embed,
-}: CommonProps & {
-  embed: EmbedType<'list'>
-}) {
-  const moderationOpts = useModerationOpts()
-  const moderation = React.useMemo(() => {
-    return moderationOpts
-      ? moderateUserList(embed.view, moderationOpts)
-      : undefined
-  }, [embed.view, moderationOpts])
-  return (
-    <ContentHider modui={moderation?.ui('contentList')}>
-      <ListEmbed embed={embed} />
-    </ContentHider>
-  )
-}

src/components/Post/Embed/PostPlaceholder.tsx

@@ -1,33 +0,0 @@
-import {StyleSheet, View} from 'react-native'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {InfoCircleIcon} from '#/lib/icons'
-import {Text} from '#/view/com/util/text/Text'
-import {atoms as a, useTheme} from '#/alf'
-
-export function PostPlaceholder({children}: {children: React.ReactNode}) {
-  const t = useTheme()
-  const pal = usePalette('default')
-  return (
-    <View
-      style={[styles.errorContainer, a.border, t.atoms.border_contrast_low]}>
-      <InfoCircleIcon size={18} style={pal.text} />
-      <Text type="lg" style={pal.text}>
-        {children}
-      </Text>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  errorContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    borderRadius: 8,
-    marginTop: 8,
-    paddingVertical: 14,
-    paddingHorizontal: 14,
-    borderWidth: StyleSheet.hairlineWidth,
-  },
-})

src/components/Post/Embed/index.tsx

@@ -1,332 +0,0 @@
-import React from 'react'
-import {View} from 'react-native'
-import {
-  type $Typed,
-  type AppBskyFeedDefs,
-  AppBskyFeedPost,
-  AtUri,
-  moderatePost,
-  RichText as RichTextAPI,
-} from '@atproto/api'
-import {Trans} from '@lingui/macro'
-import {useQueryClient} from '@tanstack/react-query'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {makeProfileLink} from '#/lib/routes/links'
-import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {unstableCacheProfileView} from '#/state/queries/profile'
-import {useSession} from '#/state/session'
-import {Link} from '#/view/com/util/Link'
-import {PostMeta} from '#/view/com/util/PostMeta'
-import {atoms as a, useTheme} from '#/alf'
-import {ContentHider} from '#/components/moderation/ContentHider'
-import {PostAlerts} from '#/components/moderation/PostAlerts'
-import {RichText} from '#/components/RichText'
-import {Embed as StarterPackCard} from '#/components/StarterPack/StarterPackCard'
-import {SubtleWebHover} from '#/components/SubtleWebHover'
-import * as bsky from '#/types/bsky'
-import {
-  type Embed as TEmbed,
-  type EmbedType,
-  parseEmbed,
-} from '#/types/bsky/post'
-import {ExternalEmbed} from './ExternalEmbed'
-import {ModeratedFeedEmbed} from './FeedEmbed'
-import {ImageEmbed} from './ImageEmbed'
-import {ModeratedListEmbed} from './ListEmbed'
-import {PostPlaceholder as PostPlaceholderText} from './PostPlaceholder'
-import {
-  type CommonProps,
-  type EmbedProps,
-  PostEmbedViewContext,
-  QuoteEmbedViewContext,
-} from './types'
-import {VideoEmbed} from './VideoEmbed'
-
-export {PostEmbedViewContext, QuoteEmbedViewContext} from './types'
-
-export function Embed({embed: rawEmbed, ...rest}: EmbedProps) {
-  const embed = parseEmbed(rawEmbed)
-
-  switch (embed.type) {
-    case 'images':
-    case 'link':
-    case 'video': {
-      return <MediaEmbed embed={embed} {...rest} />
-    }
-    case 'feed':
-    case 'list':
-    case 'starter_pack':
-    case 'labeler':
-    case 'post':
-    case 'post_not_found':
-    case 'post_blocked':
-    case 'post_detached': {
-      return <RecordEmbed embed={embed} {...rest} />
-    }
-    case 'post_with_media': {
-      return (
-        <View style={rest.style}>
-          <MediaEmbed embed={embed.media} {...rest} />
-          <RecordEmbed embed={embed.view} {...rest} />
-        </View>
-      )
-    }
-    default: {
-      return null
-    }
-  }
-}
-
-function MediaEmbed({
-  embed,
-  ...rest
-}: CommonProps & {
-  embed: TEmbed
-}) {
-  switch (embed.type) {
-    case 'images': {
-      return (
-        <ContentHider modui={rest.moderation?.ui('contentMedia')}>
-          <ImageEmbed embed={embed} {...rest} />
-        </ContentHider>
-      )
-    }
-    case 'link': {
-      return (
-        <ContentHider modui={rest.moderation?.ui('contentMedia')}>
-          <ExternalEmbed
-            link={embed.view.external}
-            onOpen={rest.onOpen}
-            style={[a.mt_sm, rest.style]}
-          />
-        </ContentHider>
-      )
-    }
-    case 'video': {
-      return (
-        <ContentHider modui={rest.moderation?.ui('contentMedia')}>
-          <VideoEmbed embed={embed.view} />
-        </ContentHider>
-      )
-    }
-    default: {
-      return null
-    }
-  }
-}
-
-function RecordEmbed({
-  embed,
-  ...rest
-}: CommonProps & {
-  embed: TEmbed
-}) {
-  switch (embed.type) {
-    case 'feed': {
-      return (
-        <View style={a.mt_sm}>
-          <ModeratedFeedEmbed embed={embed} {...rest} />
-        </View>
-      )
-    }
-    case 'list': {
-      return (
-        <View style={a.mt_sm}>
-          <ModeratedListEmbed embed={embed} />
-        </View>
-      )
-    }
-    case 'starter_pack': {
-      return (
-        <View style={a.mt_sm}>
-          <StarterPackCard starterPack={embed.view} />
-        </View>
-      )
-    }
-    case 'labeler': {
-      // not implemented
-      return null
-    }
-    case 'post': {
-      if (rest.isWithinQuote && !rest.allowNestedQuotes) {
-        return null
-      }
-
-      return (
-        <QuoteEmbed
-          {...rest}
-          embed={embed}
-          viewContext={
-            rest.viewContext === PostEmbedViewContext.Feed
-              ? QuoteEmbedViewContext.FeedEmbedRecordWithMedia
-              : undefined
-          }
-          isWithinQuote={rest.isWithinQuote}
-          allowNestedQuotes={rest.allowNestedQuotes}
-        />
-      )
-    }
-    case 'post_not_found': {
-      return (
-        <PostPlaceholderText>
-          <Trans>Deleted</Trans>
-        </PostPlaceholderText>
-      )
-    }
-    case 'post_blocked': {
-      return (
-        <PostPlaceholderText>
-          <Trans>Blocked</Trans>
-        </PostPlaceholderText>
-      )
-    }
-    case 'post_detached': {
-      return <PostDetachedEmbed embed={embed} />
-    }
-    default: {
-      return null
-    }
-  }
-}
-
-export function PostDetachedEmbed({
-  embed,
-}: {
-  embed: EmbedType<'post_detached'>
-}) {
-  const {currentAccount} = useSession()
-  const isViewerOwner = currentAccount?.did
-    ? embed.view.uri.includes(currentAccount.did)
-    : false
-
-  return (
-    <PostPlaceholderText>
-      {isViewerOwner ? (
-        <Trans>Removed by you</Trans>
-      ) : (
-        <Trans>Removed by author</Trans>
-      )}
-    </PostPlaceholderText>
-  )
-}
-
-/*
- * Nests parent `Embed` component and therefore must live in this file to avoid
- * circular imports.
- */
-export function QuoteEmbed({
-  embed,
-  onOpen,
-  style,
-  isWithinQuote: parentIsWithinQuote,
-  allowNestedQuotes: parentAllowNestedQuotes,
-}: Omit<CommonProps, 'viewContext'> & {
-  embed: EmbedType<'post'>
-  viewContext?: QuoteEmbedViewContext
-}) {
-  const moderationOpts = useModerationOpts()
-  const quote = React.useMemo<$Typed<AppBskyFeedDefs.PostView>>(
-    () => ({
-      ...embed.view,
-      $type: 'app.bsky.feed.defs#postView',
-      record: embed.view.value,
-      embed: embed.view.embeds?.[0],
-    }),
-    [embed],
-  )
-  const moderation = React.useMemo(() => {
-    return moderationOpts ? moderatePost(quote, moderationOpts) : undefined
-  }, [quote, moderationOpts])
-
-  const t = useTheme()
-  const queryClient = useQueryClient()
-  const pal = usePalette('default')
-  const itemUrip = new AtUri(quote.uri)
-  const itemHref = makeProfileLink(quote.author, 'post', itemUrip.rkey)
-  const itemTitle = `Post by ${quote.author.handle}`
-
-  const richText = React.useMemo(() => {
-    if (
-      !bsky.dangerousIsType<AppBskyFeedPost.Record>(
-        quote.record,
-        AppBskyFeedPost.isRecord,
-      )
-    )
-      return undefined
-    const {text, facets} = quote.record
-    return text.trim()
-      ? new RichTextAPI({text: text, facets: facets})
-      : undefined
-  }, [quote.record])
-
-  const onBeforePress = React.useCallback(() => {
-    unstableCacheProfileView(queryClient, quote.author)
-    onOpen?.()
-  }, [queryClient, quote.author, onOpen])
-
-  const [hover, setHover] = React.useState(false)
-  return (
-    <View
-      onPointerEnter={() => {
-        setHover(true)
-      }}
-      onPointerLeave={() => {
-        setHover(false)
-      }}>
-      <ContentHider
-        modui={moderation?.ui('contentList')}
-        style={[
-          a.rounded_md,
-          a.p_md,
-          a.mt_sm,
-          a.border,
-          t.atoms.border_contrast_low,
-          style,
-        ]}
-        childContainerStyle={[a.pt_sm]}>
-        <SubtleWebHover hover={hover} />
-        <Link
-          hoverStyle={{borderColor: pal.colors.borderLinkHover}}
-          href={itemHref}
-          title={itemTitle}
-          onBeforePress={onBeforePress}>
-          <View pointerEvents="none">
-            <PostMeta
-              author={quote.author}
-              moderation={moderation}
-              showAvatar
-              postHref={itemHref}
-              timestamp={quote.indexedAt}
-            />
-          </View>
-          {moderation ? (
-            <PostAlerts
-              modui={moderation.ui('contentView')}
-              style={[a.py_xs]}
-            />
-          ) : null}
-          {richText ? (
-            <RichText
-              value={richText}
-              style={a.text_md}
-              numberOfLines={20}
-              disableLinks
-            />
-          ) : null}
-          {quote.embed && (
-            <Embed
-              embed={quote.embed}
-              moderation={moderation}
-              isWithinQuote={parentIsWithinQuote ?? true}
-              // already within quote? override nested
-              allowNestedQuotes={
-                parentIsWithinQuote ? false : parentAllowNestedQuotes
-              }
-            />
-          )}
-        </Link>
-      </ContentHider>
-    </View>
-  )
-}

src/components/Post/Embed/types.ts

@@ -1,25 +0,0 @@
-import {type StyleProp, type ViewStyle} from 'react-native'
-import {type AppBskyFeedDefs, type ModerationDecision} from '@atproto/api'
-
-export enum PostEmbedViewContext {
-  ThreadHighlighted = 'ThreadHighlighted',
-  Feed = 'Feed',
-  FeedEmbedRecordWithMedia = 'FeedEmbedRecordWithMedia',
-}
-
-export enum QuoteEmbedViewContext {
-  FeedEmbedRecordWithMedia = PostEmbedViewContext.FeedEmbedRecordWithMedia,
-}
-
-export type CommonProps = {
-  moderation?: ModerationDecision
-  onOpen?: () => void
-  style?: StyleProp<ViewStyle>
-  viewContext?: PostEmbedViewContext
-  isWithinQuote?: boolean
-  allowNestedQuotes?: boolean
-}
-
-export type EmbedProps = CommonProps & {
-  embed?: AppBskyFeedDefs.PostView['embed']
-}

src/components/Post/ShowMoreTextButton.tsx

@@ -1,56 +0,0 @@
-import {useCallback, useMemo} from 'react'
-import {LayoutAnimation, type TextStyle} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {HITSLOP_10} from '#/lib/constants'
-import {atoms as a, flatten, type TextStyleProp, useTheme} from '#/alf'
-import {Button} from '#/components/Button'
-import {Text} from '#/components/Typography'
-
-export function ShowMoreTextButton({
-  onPress: onPressProp,
-  style,
-}: TextStyleProp & {onPress: () => void}) {
-  const t = useTheme()
-  const {_} = useLingui()
-
-  const onPress = useCallback(() => {
-    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
-    onPressProp()
-  }, [onPressProp])
-
-  const textStyle = useMemo(() => {
-    return flatten([a.leading_snug, a.text_sm, style]) as TextStyle & {
-      fontSize: number
-      lineHeight: number
-    }
-  }, [style])
-
-  return (
-    <Button
-      label={_(msg`Expand post text`)}
-      onPress={onPress}
-      style={[
-        a.self_start,
-        {
-          paddingBottom: textStyle.fontSize / 3,
-        },
-      ]}
-      hitSlop={HITSLOP_10}>
-      {({pressed, hovered}) => (
-        <Text
-          style={[
-            textStyle,
-            {
-              color: t.palette.primary_500,
-              opacity: pressed ? 0.6 : 1,
-              textDecorationLine: hovered ? 'underline' : undefined,
-            },
-          ]}>
-          <Trans>Show More</Trans>
-        </Text>
-      )}
-    </Button>
-  )
-}

src/components/PostControls/PostMenu/PostMenuItems.tsx

@@ -600,8 +600,8 @@ let PostMenuItems = ({
                         isDetachPending
                           ? Loader
                           : quoteEmbed.isDetached
-                            ? Eye
-                            : EyeSlash
+                          ? Eye
+                          : EyeSlash
                       }
                       position="right"
                     />

src/components/PostControls/PostMenu/index.tsx

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

src/components/PostControls/RepostButton.tsx

@@ -40,17 +40,6 @@ let RepostButton = ({
   const requireAuth = useRequireAuth()
   const dialogControl = Dialog.useDialogControl()
 
-  const onPress = () => requireAuth(() => dialogControl.open())
-
-  const onLongPress = () =>
-    requireAuth(() => {
-      if (embeddingDisabled) {
-        dialogControl.open()
-      } else {
-        onQuote()
-      }
-    })
-
   return (
     <>
       <PostControlButton
@@ -58,8 +47,8 @@ let RepostButton = ({
         active={isReposted}
         activeColor={t.palette.positive_600}
         big={big}
-        onPress={onPress}
-        onLongPress={onLongPress}
+        onPress={() => requireAuth(() => dialogControl.open())}
+        onLongPress={() => requireAuth(() => onQuote())}
         label={
           isReposted
             ? _(

src/components/ProfileHoverCard/index.web.tsx

@@ -74,7 +74,7 @@ export function ProfileHoverCard(props: ProfileHoverCardProps) {
     return props.children
   } else {
     return (
-      <View onPointerMove={onPointerMove} style={[a.flex_shrink, props.style]}>
+      <View onPointerMove={onPointerMove} style={[a.flex_shrink]}>
         <ProfileHoverCardInner {...props} />
       </View>
     )

src/components/ProfileHoverCard/types.ts

@@ -1,9 +1,6 @@
-import type React from 'react'
-
-import {type ViewStyleProp} from '#/alf'
-
-export type ProfileHoverCardProps = ViewStyleProp & {
-  children: React.ReactNode
+export type ProfileHoverCardProps = {
+  children: React.ReactElement<any>
   did: string
+  inline?: boolean
   disable?: boolean
 }

src/components/ProgressGuide/FollowDialog.tsx

@@ -301,8 +301,8 @@ let Header = ({
   interestsDisplayNames,
 }: {
   guide: Follow10ProgressGuide
-  inputRef: React.RefObject<TextInput>
-  listRef: React.RefObject<ListMethods>
+  inputRef: React.RefObject<TextInput | null>
+  listRef: React.RefObject<ListMethods | null>
   onSelectTab: (v: string) => void
   searchText: string
   setHeaderHeight: (v: number) => void
@@ -653,7 +653,7 @@ function SearchInput({
 }: {
   onChangeText: (text: string) => void
   onEscape: () => void
-  inputRef: React.RefObject<TextInput>
+  inputRef: React.RefObject<TextInput | null>
   defaultValue: string
 }) {
   const t = useTheme()

src/components/ProgressGuide/Toast.tsx

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

src/components/RichText.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
-import {type TextStyle} from 'react-native'
+import {TextStyle} from 'react-native'
 import {AppBskyRichtextFacet, RichText as RichTextAPI} from '@atproto/api'
 
 import {toShortUrl} from '#/lib/strings/url-helpers'
-import {atoms as a, flatten, type TextStyleProp} from '#/alf'
+import {atoms as a, flatten, TextStyleProp} from '#/alf'
 import {isOnlyEmoji} from '#/alf/typography'
-import {InlineLinkText, type LinkProps} from '#/components/Link'
+import {InlineLinkText, LinkProps} from '#/components/Link'
 import {ProfileHoverCard} from '#/components/ProfileHoverCard'
 import {RichTextTag} from '#/components/RichTextTag'
-import {Text, type TextProps} from '#/components/Typography'
+import {Text, TextProps} from '#/components/Typography'
 
 const WORD_WRAP = {wordWrap: 1}
 
@@ -105,7 +105,7 @@ export function RichText({
       !disableLinks
     ) {
       els.push(
-        <ProfileHoverCard key={key} did={mention.did}>
+        <ProfileHoverCard key={key} inline did={mention.did}>
           <InlineLinkText
             selectable={selectable}
             to={`/profile/${mention.did}`}

src/components/Select/index.web.tsx

@@ -111,8 +111,8 @@ export function Trigger({children, label}: TriggerProps) {
             borderColor: focused
               ? t.palette.primary_500
               : hovered
-                ? t.palette.contrast_100
-                : t.palette.contrast_25,
+              ? t.palette.contrast_100
+              : t.palette.contrast_25,
           },
         ])}>
         {children}
@@ -244,7 +244,6 @@ export function Item({ref, value, style, children}: ItemProps) {
       onFocus={onFocus}
       onBlur={onBlur}
       style={flatten([
-        t.atoms.text,
         a.relative,
         a.flex,
         {minHeight: 25, paddingLeft: 30, paddingRight: 35},

src/components/Select/types.ts

@@ -160,7 +160,7 @@ export type ContentProps<T> = {
     item: T,
     index: number,
     selectedValue?: string | null,
-  ) => React.ReactElement
+  ) => React.ReactElement<any>
   /*
    * Extracts the value from an item. Defaults to `item => item.value`
    */

src/components/Skeleton.tsx

@@ -1,107 +0,0 @@
-import {type ReactNode} from 'react'
-import {View} from 'react-native'
-
-import {
-  atoms as a,
-  flatten,
-  type TextStyleProp,
-  useAlf,
-  useTheme,
-  type ViewStyleProp,
-} from '#/alf'
-import {normalizeTextStyles} from '#/alf/typography'
-
-type SkeletonProps = {
-  blend?: boolean
-}
-
-export function Text({blend, style}: TextStyleProp & SkeletonProps) {
-  const {fonts, flags, theme: t} = useAlf()
-  const {width, ...flattened} = flatten(style)
-  const {lineHeight = 14, ...rest} = normalizeTextStyles(
-    [a.text_sm, a.leading_snug, flattened],
-    {
-      fontScale: fonts.scaleMultiplier,
-      fontFamily: fonts.family,
-      flags,
-    },
-  )
-  return (
-    <View
-      style={[a.flex_1, {maxWidth: width, paddingVertical: lineHeight * 0.15}]}>
-      <View
-        style={[
-          a.rounded_md,
-          t.atoms.bg_contrast_25,
-          {
-            height: lineHeight * 0.7,
-            opacity: blend ? 0.6 : 1,
-          },
-          rest,
-        ]}
-      />
-    </View>
-  )
-}
-
-export function Circle({
-  children,
-  size,
-  blend,
-  style,
-}: ViewStyleProp & {children?: ReactNode; size: number} & SkeletonProps) {
-  const t = useTheme()
-  return (
-    <View
-      style={[
-        a.justify_center,
-        a.align_center,
-        a.rounded_full,
-        t.atoms.bg_contrast_25,
-        {
-          width: size,
-          height: size,
-          opacity: blend ? 0.6 : 1,
-        },
-        style,
-      ]}>
-      {children}
-    </View>
-  )
-}
-
-export function Pill({
-  size,
-  blend,
-  style,
-}: ViewStyleProp & {size: number} & SkeletonProps) {
-  const t = useTheme()
-  return (
-    <View
-      style={[
-        a.rounded_full,
-        t.atoms.bg_contrast_25,
-        {
-          width: size * 1.618,
-          height: size,
-          opacity: blend ? 0.6 : 1,
-        },
-        style,
-      ]}
-    />
-  )
-}
-
-export function Col({
-  children,
-  style,
-}: ViewStyleProp & {children?: React.ReactNode}) {
-  return <View style={[a.flex_1, style]}>{children}</View>
-}
-
-export function Row({
-  children,
-  style,
-}: ViewStyleProp & {children?: React.ReactNode}) {
-  return <View style={[a.flex_row, style]}>{children}</View>
-}

src/components/Tooltip/const.ts

@@ -1,6 +0,0 @@
-import {atoms as a} from '#/alf'
-
-export const BUBBLE_MAX_WIDTH = 240
-export const ARROW_SIZE = 12
-export const ARROW_HALF_SIZE = ARROW_SIZE / 2
-export const MIN_EDGE_SPACE = a.px_lg.paddingLeft

src/components/Tooltip/index.tsx

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

src/components/Tooltip/index.web.tsx

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

src/components/WhoCanReply.tsx

@@ -1,15 +1,9 @@
 import React from 'react'
+import {Keyboard, Platform, StyleProp, View, ViewStyle} from 'react-native'
 import {
-  Keyboard,
-  Platform,
-  type StyleProp,
-  View,
-  type ViewStyle,
-} from 'react-native'
-import {
-  type AppBskyFeedDefs,
+  AppBskyFeedDefs,
   AppBskyFeedPost,
-  type AppBskyGraphDefs,
+  AppBskyGraphDefs,
   AtUri,
 } from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
@@ -19,7 +13,7 @@ import {HITSLOP_10} from '#/lib/constants'
 import {makeListLink, makeProfileLink} from '#/lib/routes/links'
 import {isNative} from '#/platform/detection'
 import {
-  type ThreadgateAllowUISetting,
+  ThreadgateAllowUISetting,
   threadgateViewToAllowUISetting,
 } from '#/state/queries/threadgate'
 import {atoms as a, useTheme} from '#/alf'
@@ -76,8 +70,8 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
   const description = anyoneCanReply
     ? _(msg`Everybody can reply`)
     : noOneCanReply
-      ? _(msg`Replies disabled`)
-      : _(msg`Some people can reply`)
+    ? _(msg`Replies disabled`)
+    : _(msg`Some people can reply`)
 
   const onPressOpen = () => {
     if (isNative && Keyboard.isVisible()) {

src/components/dialogs/ChangeEmailDialog.tsx

@@ -0,0 +1,259 @@
+import {useState} from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {cleanError} from '#/lib/strings/errors'
+import {useAgent, useSession} from '#/state/session'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {atoms as a, useBreakpoints, web} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import * as TextField from '#/components/forms/TextField'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+export function ChangeEmailDialog({
+  control,
+  verifyEmailControl,
+}: {
+  control: Dialog.DialogControlProps
+  verifyEmailControl: Dialog.DialogControlProps
+}) {
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+      <Inner verifyEmailControl={verifyEmailControl} />
+    </Dialog.Outer>
+  )
+}
+
+export function Inner({
+  verifyEmailControl,
+}: {
+  verifyEmailControl: Dialog.DialogControlProps
+}) {
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const agent = useAgent()
+  const control = Dialog.useDialogContext()
+  const {gtMobile} = useBreakpoints()
+
+  const [currentStep, setCurrentStep] = useState<
+    'StepOne' | 'StepTwo' | 'StepThree'
+  >('StepOne')
+  const [email, setEmail] = useState('')
+  const [confirmationCode, setConfirmationCode] = useState('')
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [error, setError] = useState('')
+
+  const currentEmail = currentAccount?.email || '(no email)'
+  const uiStrings = {
+    StepOne: {
+      title: _(msg`Change Your Email`),
+      message: '',
+    },
+    StepTwo: {
+      title: _(msg`Security Step Required`),
+      message: _(
+        msg`An email has been sent to your previous address, ${currentEmail}. It includes a confirmation code which you can enter below.`,
+      ),
+    },
+    StepThree: {
+      title: _(msg`Email Updated!`),
+      message: _(
+        msg`Your email address has been updated but it is not yet verified. As a next step, please verify your new email.`,
+      ),
+    },
+  }
+
+  const onRequestChange = async () => {
+    if (email === currentAccount?.email) {
+      setError(
+        _(
+          msg`The email address you entered is the same as your current email address.`,
+        ),
+      )
+      return
+    }
+    setError('')
+    setIsProcessing(true)
+    try {
+      const res = await agent.com.atproto.server.requestEmailUpdate()
+      if (res.data.tokenRequired) {
+        setCurrentStep('StepTwo')
+      } else {
+        await agent.com.atproto.server.updateEmail({email: email.trim()})
+        await agent.resumeSession(agent.session!)
+        setCurrentStep('StepThree')
+      }
+    } catch (e) {
+      setError(cleanError(String(e)))
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  const onConfirm = async () => {
+    setError('')
+    setIsProcessing(true)
+    try {
+      await agent.com.atproto.server.updateEmail({
+        email: email.trim(),
+        token: confirmationCode.trim(),
+      })
+      await agent.resumeSession(agent.session!)
+      setCurrentStep('StepThree')
+    } catch (e) {
+      setError(cleanError(String(e)))
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  const onVerify = async () => {
+    control.close(() => {
+      verifyEmailControl.open()
+    })
+  }
+
+  return (
+    <Dialog.ScrollableInner
+      label={_(msg`Verify email dialog`)}
+      style={web({maxWidth: 450})}>
+      <Dialog.Close />
+      <View style={[a.gap_xl]}>
+        <View style={[a.gap_sm]}>
+          <Text style={[a.font_heavy, a.text_2xl]}>
+            {uiStrings[currentStep].title}
+          </Text>
+          {error ? (
+            <View style={[a.rounded_sm, a.overflow_hidden]}>
+              <ErrorMessage message={error} />
+            </View>
+          ) : null}
+          {currentStep === 'StepOne' ? (
+            <View>
+              <TextField.LabelText>
+                <Trans>Enter your new email address below.</Trans>
+              </TextField.LabelText>
+              <TextField.Root>
+                <TextField.Input
+                  label={_(msg`New email address`)}
+                  placeholder={_(msg`alice@example.com`)}
+                  defaultValue={email}
+                  onChangeText={setEmail}
+                  keyboardType="email-address"
+                  autoComplete="email"
+                />
+              </TextField.Root>
+            </View>
+          ) : (
+            <Text style={[a.text_md, a.leading_snug]}>
+              {uiStrings[currentStep].message}
+            </Text>
+          )}
+        </View>
+        {currentStep === 'StepTwo' ? (
+          <View>
+            <TextField.LabelText>
+              <Trans>Confirmation code</Trans>
+            </TextField.LabelText>
+            <TextField.Root>
+              <TextField.Input
+                label={_(msg`Confirmation code`)}
+                placeholder="XXXXX-XXXXX"
+                onChangeText={setConfirmationCode}
+              />
+            </TextField.Root>
+          </View>
+        ) : null}
+        <View style={[a.gap_sm, gtMobile && [a.flex_row_reverse, a.ml_auto]]}>
+          {currentStep === 'StepOne' ? (
+            <>
+              <Button
+                label={_(msg`Request change`)}
+                variant="solid"
+                color="primary"
+                size="large"
+                disabled={isProcessing}
+                onPress={onRequestChange}>
+                <ButtonText>
+                  <Trans>Request change</Trans>
+                </ButtonText>
+                {isProcessing ? (
+                  <Loader size="sm" style={[{color: 'white'}]} />
+                ) : null}
+              </Button>
+              <Button
+                label={_(msg`I have a code`)}
+                variant="solid"
+                color="secondary"
+                size="large"
+                disabled={isProcessing}
+                onPress={() => setCurrentStep('StepTwo')}>
+                <ButtonText>
+                  <Trans>I have a code</Trans>
+                </ButtonText>
+              </Button>
+            </>
+          ) : currentStep === 'StepTwo' ? (
+            <>
+              <Button
+                label={_(msg`Confirm`)}
+                variant="solid"
+                color="primary"
+                size="large"
+                disabled={isProcessing}
+                onPress={onConfirm}>
+                <ButtonText>
+                  <Trans>Confirm</Trans>
+                </ButtonText>
+                {isProcessing ? (
+                  <Loader size="sm" style={[{color: 'white'}]} />
+                ) : null}
+              </Button>
+              <Button
+                label={_(msg`Resend email`)}
+                variant="solid"
+                color="secondary"
+                size="large"
+                disabled={isProcessing}
+                onPress={() => {
+                  setConfirmationCode('')
+                  setCurrentStep('StepOne')
+                }}>
+                <ButtonText>
+                  <Trans>Resend email</Trans>
+                </ButtonText>
+              </Button>
+            </>
+          ) : currentStep === 'StepThree' ? (
+            <>
+              <Button
+                label={_(msg`Verify email`)}
+                variant="solid"
+                color="primary"
+                size="large"
+                onPress={onVerify}>
+                <ButtonText>
+                  <Trans>Verify email</Trans>
+                </ButtonText>
+              </Button>
+              <Button
+                label={_(msg`Close`)}
+                variant="solid"
+                color="secondary"
+                size="large"
+                onPress={() => control.close()}>
+                <ButtonText>
+                  <Trans>Close</Trans>
+                </ButtonText>
+              </Button>
+            </>
+          ) : null}
+        </View>
+      </View>
+    </Dialog.ScrollableInner>
+  )
+}

src/components/dialogs/Context.tsx

@@ -17,11 +17,6 @@ type ControlsContext = {
   signinDialogControl: Control
   inAppBrowserConsentControl: StatefulControl<string>
   emailDialogControl: StatefulControl<Screen>
-  linkWarningDialogControl: StatefulControl<{
-    href: string
-    displayText: string
-    share?: boolean
-  }>
 }
 
 const ControlsContext = createContext<ControlsContext | null>(null)
@@ -41,11 +36,6 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
   const signinDialogControl = Dialog.useDialogControl()
   const inAppBrowserConsentControl = useStatefulDialogControl<string>()
   const emailDialogControl = useStatefulDialogControl<Screen>()
-  const linkWarningDialogControl = useStatefulDialogControl<{
-    href: string
-    displayText: string
-    share?: boolean
-  }>()
 
   const ctx = useMemo<ControlsContext>(
     () => ({
@@ -53,14 +43,12 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
       signinDialogControl,
       inAppBrowserConsentControl,
       emailDialogControl,
-      linkWarningDialogControl,
     }),
     [
       mutedWordsDialogControl,
       signinDialogControl,
       inAppBrowserConsentControl,
       emailDialogControl,
-      linkWarningDialogControl,
     ],
   )
 

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

@@ -185,8 +185,8 @@ export function Disable() {
                   state.emailStatus === 'pending'
                     ? Loader
                     : state.emailStatus === 'success'
-                      ? Check
-                      : Envelope
+                    ? Check
+                    : Envelope
                 }
               />
             </Button>

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

@@ -116,8 +116,8 @@ export function Enable() {
               state.status === 'pending'
                 ? Loader
                 : state.status === 'success'
-                  ? Check
-                  : ShieldIcon
+                ? Check
+                : ShieldIcon
             }
           />
         </Button>

src/components/dialogs/GifSelect.tsx

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from 'react'
-import {TextInput, View} from 'react-native'
+import {type TextInput, View} from 'react-native'
 import {useWindowDimensions} from 'react-native'
 import {Image} from 'expo-image'
 import {msg, Trans} from '@lingui/macro'
@@ -15,13 +15,13 @@ import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {isWeb} from '#/platform/detection'
 import {
-  Gif,
+  type Gif,
   useFeaturedGifsQuery,
   useGifSearchQuery,
 } from '#/state/queries/tenor'
 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
-import {ListMethods} from '#/view/com/util/List'
+import {type ListMethods} from '#/view/com/util/List'
 import {atoms as a, ios, native, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -36,7 +36,7 @@ export function GifSelectDialog({
   onClose,
   onSelectGif: onSelectGifProp,
 }: {
-  controlRef: React.RefObject<{open: () => void}>
+  controlRef: React.RefObject<{open: () => void} | null>
   onClose?: () => void
   onSelectGif: (gif: Gif) => void
 }) {

src/components/dialogs/LinkWarning.tsx

@@ -1,161 +0,0 @@
-import {useCallback, useMemo} from 'react'
-import {View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useOpenLink} from '#/lib/hooks/useOpenLink'
-import {shareUrl} from '#/lib/sharing'
-import {isPossiblyAUrl, splitApexDomain} from '#/lib/strings/url-helpers'
-import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
-import * as Dialog from '#/components/Dialog'
-import {Text} from '#/components/Typography'
-import {useGlobalDialogsControlContext} from './Context'
-
-export function LinkWarningDialog() {
-  const {linkWarningDialogControl} = useGlobalDialogsControlContext()
-
-  return (
-    <Dialog.Outer
-      control={linkWarningDialogControl.control}
-      nativeOptions={{preventExpansion: true}}
-      webOptions={{alignCenter: true}}
-      onClose={linkWarningDialogControl.clear}>
-      <Dialog.Handle />
-      <InAppBrowserConsentInner link={linkWarningDialogControl.value} />
-    </Dialog.Outer>
-  )
-}
-
-function InAppBrowserConsentInner({
-  link,
-}: {
-  link?: {href: string; displayText: string; share?: boolean}
-}) {
-  const control = Dialog.useDialogContext()
-  const {_} = useLingui()
-  const t = useTheme()
-  const openLink = useOpenLink()
-  const {gtMobile} = useBreakpoints()
-
-  const potentiallyMisleading = useMemo(
-    () => link && isPossiblyAUrl(link.displayText),
-    [link],
-  )
-
-  const onPressVisit = useCallback(() => {
-    control.close(() => {
-      if (!link) return
-      if (link.share) {
-        shareUrl(link.href)
-      } else {
-        openLink(link.href, undefined, true)
-      }
-    })
-  }, [control, link, openLink])
-
-  const onCancel = useCallback(() => {
-    control.close()
-  }, [control])
-
-  return (
-    <Dialog.ScrollableInner
-      style={web({maxWidth: 450})}
-      label={
-        potentiallyMisleading
-          ? _(msg`Potentially misleading link warning`)
-          : _(msg`Leaving Bluesky`)
-      }>
-      <View style={[a.gap_2xl]}>
-        <View style={[a.gap_sm]}>
-          <Text style={[a.font_heavy, a.text_2xl]}>
-            {potentiallyMisleading ? (
-              <Trans>Potentially misleading link</Trans>
-            ) : (
-              <Trans>Leaving Bluesky</Trans>
-            )}
-          </Text>
-          <Text style={[t.atoms.text_contrast_high, a.text_md, a.leading_snug]}>
-            <Trans>This link is taking you to the following website:</Trans>
-          </Text>
-          {link && <LinkBox href={link.href} />}
-          {potentiallyMisleading && (
-            <Text
-              style={[t.atoms.text_contrast_high, a.text_md, a.leading_snug]}>
-              <Trans>Make sure this is where you intend to go!</Trans>
-            </Text>
-          )}
-        </View>
-        <View
-          style={[
-            a.flex_1,
-            a.gap_sm,
-            gtMobile && [a.flex_row_reverse, a.justify_start],
-          ]}>
-          <Button
-            label={link?.share ? _(msg`Share link`) : _(msg`Visit site`)}
-            accessibilityHint={_(msg`Opens link ${link?.href ?? ''}`)}
-            onPress={onPressVisit}
-            size="large"
-            variant="solid"
-            color={potentiallyMisleading ? 'secondary_inverted' : 'primary'}>
-            <ButtonText>
-              {link?.share ? (
-                <Trans>Share link</Trans>
-              ) : (
-                <Trans>Visit site</Trans>
-              )}
-            </ButtonText>
-          </Button>
-          <Button
-            label={_(msg`Go back`)}
-            onPress={onCancel}
-            size="large"
-            variant="ghost"
-            color="secondary">
-            <ButtonText>
-              <Trans>Go back</Trans>
-            </ButtonText>
-          </Button>
-        </View>
-      </View>
-      <Dialog.Close />
-    </Dialog.ScrollableInner>
-  )
-}
-
-function LinkBox({href}: {href: string}) {
-  const t = useTheme()
-  const [scheme, hostname, rest] = useMemo(() => {
-    try {
-      const urlp = new URL(href)
-      const [subdomain, apexdomain] = splitApexDomain(urlp.hostname)
-      return [
-        urlp.protocol + '//' + subdomain,
-        apexdomain,
-        urlp.pathname.replace(/\/$/, '') + urlp.search + urlp.hash,
-      ]
-    } catch {
-      return ['', href, '']
-    }
-  }, [href])
-  return (
-    <View
-      style={[
-        t.atoms.bg,
-        t.atoms.border_contrast_medium,
-        a.px_md,
-        {paddingVertical: 10},
-        a.rounded_sm,
-        a.border,
-      ]}>
-      <Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_medium]}>
-        {scheme}
-        <Text style={[a.text_md, a.leading_snug, t.atoms.text, a.font_bold]}>
-          {hostname}
-        </Text>
-        {rest}
-      </Text>
-    </View>
-  )
-}

src/components/dialogs/PostInteractionSettingsDialog.tsx

@@ -1,10 +1,6 @@
 import React from 'react'
-import {type StyleProp, View, type ViewStyle} from 'react-native'
-import {
-  type AppBskyFeedDefs,
-  type AppBskyFeedPostgate,
-  AtUri,
-} from '@atproto/api'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {AppBskyFeedDefs, AppBskyFeedPostgate, AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
@@ -26,7 +22,7 @@ import {
 import {
   createThreadgateViewQueryKey,
   getThreadgateView,
-  type ThreadgateAllowUISetting,
+  ThreadgateAllowUISetting,
   threadgateViewToAllowUISetting,
   useSetThreadgateAllowMutation,
   useThreadgateViewQuery,
@@ -562,8 +558,7 @@ export function usePrefetchPostInteractionSettings({
       await Promise.all([
         queryClient.prefetchQuery({
           queryKey: createPostgateQueryKey(postUri),
-          queryFn: () =>
-            getPostgateRecord({agent, postUri}).then(res => res ?? null),
+          queryFn: () => getPostgateRecord({agent, postUri}),
           staleTime: STALE.SECONDS.THIRTY,
         }),
         queryClient.prefetchQuery({

src/components/dialogs/SearchablePeopleList.tsx

@@ -390,14 +390,13 @@ function DefaultProfileCard({
             !enabled
               ? {opacity: 0.5}
               : pressed || focused || hovered
-                ? t.atoms.bg_contrast_25
-                : t.atoms.bg,
+              ? t.atoms.bg_contrast_25
+              : t.atoms.bg,
           ]}>
           <ProfileCard.Header>
             <ProfileCard.Avatar
               profile={profile}
               moderationOpts={moderationOpts}
-              disabledPreview
             />
             <View style={[a.flex_1]}>
               <ProfileCard.Name
@@ -484,7 +483,7 @@ function SearchInput({
   value: string
   onChangeText: (text: string) => void
   onEscape: () => void
-  inputRef: React.RefObject<TextInput>
+  inputRef: React.RefObject<TextInput | null>
 }) {
   const t = useTheme()
   const {_} = useLingui()

src/components/dialogs/VerifyEmailDialog.tsx

@@ -0,0 +1,360 @@
+import {useState} from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {cleanError} from '#/lib/strings/errors'
+import {logger} from '#/logger'
+import {useAgent, useSession} from '#/state/session'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import * as TextField from '#/components/forms/TextField'
+import {Envelope_Filled_Stroke2_Corner0_Rounded as EnvelopeIcon} from '#/components/icons/Envelope'
+import {InlineLinkText} from '#/components/Link'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+import {ChangeEmailDialog} from './ChangeEmailDialog'
+
+export function VerifyEmailDialog({
+  control,
+  onCloseWithoutVerifying,
+  onCloseAfterVerifying,
+  reasonText,
+  changeEmailControl,
+  reminder,
+}: {
+  control: Dialog.DialogControlProps
+  onCloseWithoutVerifying?: () => void
+  onCloseAfterVerifying?: () => void
+  reasonText?: string
+  /**
+   * if a changeEmailControl for a ChangeEmailDialog is not provided,
+   * this component will create one for you. Using this prop
+   * helps reduce duplication, since these dialogs are often used together.
+   */
+  changeEmailControl?: Dialog.DialogControlProps
+  reminder?: boolean
+}) {
+  const agent = useAgent()
+  const fallbackChangeEmailControl = Dialog.useDialogControl()
+
+  const [didVerify, setDidVerify] = useState(false)
+
+  return (
+    <>
+      <Dialog.Outer
+        control={control}
+        onClose={async () => {
+          if (!didVerify) {
+            onCloseWithoutVerifying?.()
+            return
+          }
+
+          try {
+            await agent.resumeSession(agent.session!)
+            onCloseAfterVerifying?.()
+          } catch (e: unknown) {
+            logger.error(String(e))
+            return
+          }
+        }}>
+        <Dialog.Handle />
+        <Inner
+          setDidVerify={setDidVerify}
+          reasonText={reasonText}
+          changeEmailControl={changeEmailControl ?? fallbackChangeEmailControl}
+          reminder={reminder}
+        />
+      </Dialog.Outer>
+      {!changeEmailControl && (
+        <ChangeEmailDialog
+          control={fallbackChangeEmailControl}
+          verifyEmailControl={control}
+        />
+      )}
+    </>
+  )
+}
+
+export function Inner({
+  setDidVerify,
+  reasonText,
+  changeEmailControl,
+  reminder,
+}: {
+  setDidVerify: (value: boolean) => void
+  reasonText?: string
+  changeEmailControl: Dialog.DialogControlProps
+  reminder?: boolean
+}) {
+  const control = Dialog.useDialogContext()
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const agent = useAgent()
+  const {gtMobile} = useBreakpoints()
+  const t = useTheme()
+
+  const [currentStep, setCurrentStep] = useState<
+    'Reminder' | 'StepOne' | 'StepTwo' | 'StepThree'
+  >(reminder ? 'Reminder' : 'StepOne')
+  const [confirmationCode, setConfirmationCode] = useState('')
+  const [isProcessing, setIsProcessing] = useState(false)
+  const [error, setError] = useState('')
+
+  const uiStrings = {
+    Reminder: {
+      title: _(msg`Please Verify Your Email`),
+      message: _(
+        msg`Your email has not yet been verified. This is an important security step which we recommend.`,
+      ),
+    },
+    StepOne: {
+      title: _(msg`Verify Your Email`),
+      message: '',
+    },
+    StepTwo: {
+      title: _(msg`Enter Code`),
+      message: _(
+        msg`An email has been sent! Please enter the confirmation code included in the email below.`,
+      ),
+    },
+    StepThree: {
+      title: _(msg`Success!`),
+      message: _(msg`Thank you! Your email has been successfully verified.`),
+    },
+  }
+
+  const onSendEmail = async () => {
+    setError('')
+    setIsProcessing(true)
+    try {
+      await agent.com.atproto.server.requestEmailConfirmation()
+      setCurrentStep('StepTwo')
+    } catch (e: unknown) {
+      setError(cleanError(e))
+    } finally {
+      setIsProcessing(false)
+    }
+  }
+
+  const onVerifyEmail = async () => {
+    setError('')
+    setIsProcessing(true)
+    try {
+      await agent.com.atproto.server.confirmEmail({
+        email: (currentAccount?.email || '').trim(),
+        token: confirmationCode.trim(),
+      })
+    } catch (e: unknown) {
+      setError(cleanError(String(e)))
+      setIsProcessing(false)
+      return
+    }
+
+    setIsProcessing(false)
+    setDidVerify(true)
+    setCurrentStep('StepThree')
+  }
+
+  return (
+    <Dialog.ScrollableInner
+      label={_(msg`Verify email dialog`)}
+      style={web({maxWidth: 450})}>
+      <View style={[a.gap_xl]}>
+        {currentStep === 'Reminder' && (
+          <View
+            style={[
+              a.rounded_sm,
+              a.align_center,
+              a.justify_center,
+              {height: 150},
+              t.atoms.bg_contrast_100,
+            ]}>
+            <EnvelopeIcon width={64} fill="white" />
+          </View>
+        )}
+        <View style={[a.gap_sm]}>
+          <Text style={[a.font_heavy, a.text_2xl]}>
+            {uiStrings[currentStep].title}
+          </Text>
+          {error ? (
+            <View style={[a.rounded_sm, a.overflow_hidden]}>
+              <ErrorMessage message={error} />
+            </View>
+          ) : null}
+          {currentStep === 'StepOne' ? (
+            <View>
+              {reasonText ? (
+                <View style={[a.gap_sm]}>
+                  <Text style={[a.text_md, a.leading_snug]}>{reasonText}</Text>
+                  <Text style={[a.text_md, a.leading_snug]}>
+                    Don't have access to{' '}
+                    <Text style={[a.text_md, a.leading_snug, a.font_bold]}>
+                      {currentAccount?.email}
+                    </Text>
+                    ?{' '}
+                    <InlineLinkText
+                      to="#"
+                      label={_(msg`Change email address`)}
+                      style={[a.text_md, a.leading_snug]}
+                      onPress={e => {
+                        e.preventDefault()
+                        control.close(() => {
+                          changeEmailControl.open()
+                        })
+                        return false
+                      }}>
+                      <Trans>Change your email address</Trans>
+                    </InlineLinkText>
+                    .
+                  </Text>
+                </View>
+              ) : (
+                <Text style={[a.text_md, a.leading_snug]}>
+                  <Trans>
+                    You'll receive an email at{' '}
+                    <Text style={[a.text_md, a.leading_snug, a.font_bold]}>
+                      {currentAccount?.email}
+                    </Text>{' '}
+                    to verify it's you.
+                  </Trans>{' '}
+                  <InlineLinkText
+                    to="#"
+                    label={_(msg`Change email address`)}
+                    style={[a.text_md, a.leading_snug]}
+                    onPress={e => {
+                      e.preventDefault()
+                      control.close(() => {
+                        changeEmailControl.open()
+                      })
+                      return false
+                    }}>
+                    <Trans>Need to change it?</Trans>
+                  </InlineLinkText>
+                </Text>
+              )}
+            </View>
+          ) : (
+            <Text style={[a.text_md, a.leading_snug]}>
+              {uiStrings[currentStep].message}
+            </Text>
+          )}
+        </View>
+        {currentStep === 'StepTwo' ? (
+          <View>
+            <TextField.LabelText>
+              <Trans>Confirmation Code</Trans>
+            </TextField.LabelText>
+            <TextField.Root>
+              <TextField.Input
+                label={_(msg`Confirmation code`)}
+                placeholder="XXXXX-XXXXX"
+                onChangeText={setConfirmationCode}
+              />
+            </TextField.Root>
+          </View>
+        ) : null}
+        <View style={[a.gap_sm, gtMobile && [a.flex_row_reverse, a.ml_auto]]}>
+          {currentStep === 'Reminder' ? (
+            <>
+              <Button
+                label={_(msg`Get started`)}
+                variant="solid"
+                color="primary"
+                size="large"
+                onPress={() => setCurrentStep('StepOne')}>
+                <ButtonText>
+                  <Trans>Get started</Trans>
+                </ButtonText>
+              </Button>
+              <Button
+                label={_(msg`Maybe later`)}
+                accessibilityHint={_(msg`Snoozes the reminder`)}
+                variant="ghost"
+                color="secondary"
+                size="large"
+                disabled={isProcessing}
+                onPress={() => control.close()}>
+                <ButtonText>
+                  <Trans>Maybe later</Trans>
+                </ButtonText>
+              </Button>
+            </>
+          ) : currentStep === 'StepOne' ? (
+            <>
+              <Button
+                label={_(msg`Send confirmation email`)}
+                variant="solid"
+                color="primary"
+                size="large"
+                disabled={isProcessing}
+                onPress={onSendEmail}>
+                <ButtonText>
+                  <Trans>Send confirmation</Trans>
+                </ButtonText>
+                {isProcessing ? (
+                  <Loader size="sm" style={[{color: 'white'}]} />
+                ) : null}
+              </Button>
+              <Button
+                label={_(msg`I have a code`)}
+                variant="solid"
+                color="secondary"
+                size="large"
+                disabled={isProcessing}
+                onPress={() => setCurrentStep('StepTwo')}>
+                <ButtonText>
+                  <Trans>I have a code</Trans>
+                </ButtonText>
+              </Button>
+            </>
+          ) : currentStep === 'StepTwo' ? (
+            <>
+              <Button
+                label={_(msg`Confirm`)}
+                variant="solid"
+                color="primary"
+                size="large"
+                disabled={isProcessing}
+                onPress={onVerifyEmail}>
+                <ButtonText>
+                  <Trans>Confirm</Trans>
+                </ButtonText>
+                {isProcessing ? (
+                  <Loader size="sm" style={[{color: 'white'}]} />
+                ) : null}
+              </Button>
+              <Button
+                label={_(msg`Resend email`)}
+                variant="solid"
+                color="secondary"
+                size="large"
+                disabled={isProcessing}
+                onPress={() => {
+                  setConfirmationCode('')
+                  setCurrentStep('StepOne')
+                }}>
+                <ButtonText>
+                  <Trans>Resend email</Trans>
+                </ButtonText>
+              </Button>
+            </>
+          ) : currentStep === 'StepThree' ? (
+            <Button
+              label={_(msg`Close`)}
+              variant="solid"
+              color="primary"
+              size="large"
+              onPress={() => control.close()}>
+              <ButtonText>
+                <Trans>Close</Trans>
+              </ButtonText>
+            </Button>
+          ) : null}
+        </View>
+      </View>
+    </Dialog.ScrollableInner>
+  )
+}

src/components/dms/ActionsWrapper.tsx

@@ -1,5 +1,5 @@
 import {View} from 'react-native'
-import {type ChatBskyConvoDefs} from '@atproto/api'
+import {ChatBskyConvoDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 

src/components/dms/ActionsWrapper.web.tsx

@@ -3,7 +3,6 @@ import {Pressable, View} from 'react-native'
 import {type ChatBskyConvoDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import type React from 'react'
 
 import {useConvoActive} from '#/state/messages/convo'
 import {useSession} from '#/state/session'

src/components/dms/EmojiReactionPicker.tsx

@@ -98,8 +98,8 @@ export function EmojiReactionPicker({
                           : t.palette.primary_500,
                       }
                     : alreadyReacted
-                      ? {backgroundColor: t.palette.primary_200}
-                      : bgColor,
+                    ? {backgroundColor: t.palette.primary_200}
+                    : bgColor,
                   {height: 40, width: 40},
                   a.justify_center,
                   a.align_center,

src/components/dms/MessageContextMenu.tsx

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

src/components/dms/MessageItemEmbed.tsx

@@ -1,16 +1,15 @@
 import React from 'react'
 import {useWindowDimensions, View} from 'react-native'
-import {type $Typed, type AppBskyEmbedRecord} from '@atproto/api'
+import {AppBskyEmbedRecord} from '@atproto/api'
 
+import {PostEmbeds, PostEmbedViewContext} from '#/view/com/util/post-embeds'
 import {atoms as a, native, tokens, useTheme, web} from '#/alf'
-import {PostEmbedViewContext} from '#/components/Post/Embed'
-import {Embed} from '#/components/Post/Embed'
 import {MessageContextProvider} from './MessageContext'
 
 let MessageItemEmbed = ({
   embed,
 }: {
-  embed: $Typed<AppBskyEmbedRecord.View>
+  embed: AppBskyEmbedRecord.View
 }): React.ReactNode => {
   const t = useTheme()
   const screen = useWindowDimensions()
@@ -33,7 +32,7 @@ let MessageItemEmbed = ({
           }),
         ]}>
         <View style={{marginTop: tokens.space.sm * -1}}>
-          <Embed
+          <PostEmbeds
             embed={embed}
             allowNestedQuotes
             viewContext={PostEmbedViewContext.Feed}

src/components/forms/InputGroup.tsx

@@ -21,11 +21,14 @@ export function InputGroup(props: React.PropsWithChildren<{}>) {
               />
             ) : null}
             {React.cloneElement(child, {
-              // @ts-ignore
+              // @ts-expect-error
               style: [
+                // @ts-expect-error
                 ...(Array.isArray(child.props?.style)
-                  ? child.props.style
-                  : [child.props.style || {}]),
+                  ? // @ts-expect-error
+                    child.props.style
+                  : // @ts-expect-error
+                    [child.props.style || {}]),
                 {
                   borderTopLeftRadius: i > 0 ? 0 : undefined,
                   borderTopRightRadius: i > 0 ? 0 : undefined,

src/components/forms/TextField.tsx

@@ -26,7 +26,7 @@ import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Text} from '#/components/Typography'
 
 const Context = React.createContext<{
-  inputRef: React.RefObject<TextInput> | null
+  inputRef: React.RefObject<TextInput | null> | null
   isInvalid: boolean
   hovered: boolean
   onHoverIn: () => void
@@ -140,7 +140,7 @@ export type InputProps = Omit<TextInputProps, 'value' | 'onChangeText'> & {
   value?: string
   onChangeText?: (value: string) => void
   isInvalid?: boolean
-  inputRef?: React.RefObject<TextInput> | React.ForwardedRef<TextInput>
+  inputRef?: React.RefObject<TextInput | null> | React.ForwardedRef<TextInput>
 }
 
 export function createInput(Component: typeof TextInput) {
@@ -196,7 +196,7 @@ export function createInput(Component: typeof TextInput) {
         minWidth: 0,
       },
       ios({paddingTop: 12, paddingBottom: 13}),
-      android(a.py_md),
+      android(a.py_sm),
       // fix for autofill styles covering border
       web({
         paddingTop: 10,

src/components/forms/ToggleButton.tsx

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

src/components/hooks/dates.ts

@@ -8,7 +8,7 @@
  */
 
 import React from 'react'
-import {formatDistance, type Locale} from 'date-fns'
+import {formatDistance, Locale} from 'date-fns'
 import {
   ca,
   cy,
@@ -47,7 +47,7 @@ import {
   zhTW,
 } from 'date-fns/locale'
 
-import {type AppLanguage} from '#/locale/languages'
+import {AppLanguage} from '#/locale/languages'
 import {useLanguagePrefs} from '#/state/preferences'
 
 /**

src/components/hooks/useFullscreen.ts

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

src/components/hooks/useOnGesture/index.ts

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

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

@@ -1 +0,0 @@
-export function useOnGesture() {}