WIP inline link fix

Rm BottomSheetLink
spread
2024-10-03 14:25:11 -05:00 · 2024-10-03 11:47:45 -05:00 · 2024-10-03 09:08:58 -07:00 · 2024-10-03 08:54:19 -07:00 · 2024-10-03 08:53:53 -07:00 · 2024-10-03 16:31:26 +03:00
220 changed files with 4368 additions and 4889 deletions
@@ -1,35 +0,0 @@
---
-name: Bug report
-about: Create a report to help us improve
-title: ''
-labels: bug
-assignees: ''
-
---
-
-**Describe the bug**
-<!-- A clear and concise description of what the bug is. -->
-
-**To Reproduce**
-
-Steps to reproduce the behavior:
-
-1.
-
-**Expected behavior**
-
-<!-- A clear and concise description of what you expected to happen. -->
-
-**Screenshots**
-
-<!-- If applicable, add screenshots to help explain your problem. -->
-
-**Details**
-
- - Platform: <!-- desktop chrome windows, mobile safari, iOS, Android -->
- - Platform version:
- - App version:
-
-**Additional context**
-
-<!-- Add any other context about the problem here. -->
@@ -0,0 +1,67 @@
+name: "Bug Report"
+description: "Create a report for an issue you have experience in the app."
+labels: ["bug"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to report an issue you've found in the app! Before you submit this issue, please make
+        sure you've searched for similar issues that are already open and being tracked. If you find an open issue that
+        seems relevant to yours, it is best to leave a response there with your information instead of opening a new
+        issue, since it helps to consolidate the info in one place.
+  - type: textarea
+    attributes:
+      label: Steps to Reproduce
+      description: |
+        Please provide the steps that may reproduce the issue that you are experiencing. The more concise of a
+        reproduction that you provide, the easier it will be for us to identify the issue and fix it in a timely manner.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Attachments
+      description: |
+        If possible, please provide any images or videos that may help us understand the issue you are experiencing.
+    validations:
+      required: false
+  - type: dropdown
+    attributes:
+      label: What platform(s) does this occur on?
+      multiple: true
+      options:
+        - iOS
+        - Android
+        - Web (Desktop)
+        - Web (Mobile)
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Device Info
+      description: |
+        Please provide the device information that you are using when experiencing this issue. This can include the
+        device model, operating system version, and any other relevant information.
+    validations:
+      required: false
+  - type: input
+    attributes:
+      label: What version of the app are you using?
+      description: |
+        You can easily find this information by visting the Settings screen in the app, and tapping on the version info
+        at the bottom of the screen. All the relevant information will be copied to your clipboard, and you will be
+        able to share it here.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Additional Information
+      description: |
+        Please provide any additional information that you think may be helpful in identifying the issue you are
+        experiencing. This can include any error messages, logs, or other information that you think may be relevant.
+    validations:
+        required: false
@@ -0,0 +1,72 @@
+name: "Bug Report - Fabric/New Architecture"
+description: "Create a bug report for builds using the New Architecture. If you are not sure what that means, don't use this template, and instead use the default bug report template."
+labels: ["bug", "fabric"]
+body:
+  - type: checkboxes
+    attributes:
+      label: You're running a build that uses the React Native New Architecture, right?
+      description: This template is specifically for issues related to builds that use the React Native New Architecture. If you are not sure what that means, this template is probably not relevant to you, and you should use the default Bug Report template.
+      options:
+        - label: I am running a build that uses the New Architecture
+          required: true
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to report an issue you've found in the app! Before you submit this issue, please make
+        sure you've searched for similar issues that are already open and being tracked. If you find an open issue that
+        seems relevant to yours, it is best to leave a response there with your information instead of opening a new
+        issue, since it helps to consolidate the info in one place.
+  - type: textarea
+    attributes:
+      label: Steps to Reproduce
+      description: |
+        Please provide the steps that may reproduce the issue that you are experiencing. The more concise of a
+        reproduction that you provide, the easier it will be for us to identify the issue and fix it in a timely manner.
+      placeholder: |
+        1. Go to '...'
+        2. Click on '....'
+        3. Scroll down to '....'
+        4. See error
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Attachments
+      description: |
+        If possible, please provide any images or videos that may help us understand the issue you are experiencing.
+    validations:
+      required: false
+  - type: dropdown
+    attributes:
+      label: What platform(s) does this occur on?
+      multiple: true
+      options:
+        - iOS
+        - Android
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Device Info
+      description: |
+        Please provide the device information that you are using when experiencing this issue. This can include the
+        device model, operating system version, and any other relevant information.
+    validations:
+      required: false
+  - type: input
+    attributes:
+      label: What version of the app are you using?
+      description: |
+        You can easily find this information by visting the Settings screen in the app, and tapping on the version info
+        at the bottom of the screen. All the relevant information will be copied to your clipboard, and you will be
+        able to share it here.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Additional Information
+      description: |
+        Please provide any additional information that you think may be helpful in identifying the issue you are
+        experiencing. This can include any error messages, logs, or other information that you think may be relevant.
+    validations:
+        required: false
@@ -1,24 +0,0 @@
---
-name: Feature request
-about: Suggest an idea for this project
-title: ''
-labels: feature-request
-assignees: ''
-
---
-
-**Is your feature request related to a problem? Please describe.**
-
-<!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
-
-**Describe the solution you'd like**
-
-<!-- A clear and concise description of what you want to happen. -->
-
-**Describe alternatives you've considered**
-
-<!-- A clear and concise description of any alternative solutions or features you've considered. -->
-
-**Additional context**
-
-<!-- Add any other context or screenshots about the feature request here. -->
@@ -0,0 +1,45 @@
+name: "Feature Request"
+description: "Suggest an idea for the Bluesky app."
+labels: ["feature-request"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for submitting a feature request! Before you submit this request, please make sure you've searched for
+        similar requests that are already open and being tracked. If you find an open request that seems relevant to
+        yours, it is best to leave a response there with your information instead of opening a new request, since it
+        helps to consolidate the info in one place.
+  - type: textarea
+    attributes:
+      label: Describe the Feature
+      description: |
+        Please provide a detailed description of the feature you would like to see implemented in the app. The more
+        information you provide, the easier it will be for us to understand the feature you are requesting and to
+        implement it in a timely manner.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Attachments
+      description: |
+        If helpful, provide some images or videos of similar features in other apps that you think would be helpful
+        for us to understand the feature you are requesting, or places within the app that you think the feature belongs
+        in or is missing from.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Describe Alternatives
+      description: |
+        If there are any alternative solutions or features that you think would be helpful to implement in place of the
+        feature you are requesting, please provide a description of those as well.
+    validations:
+      required: false
+  - type: textarea
+    attributes:
+      label: Additional Context
+      description: |
+        If there is any additional context or information that you think would be helpful for us to know about the
+        feature you are requesting, please provide that information here.
+    validations:
+      required: false
@@ -15,3 +15,6 @@ android
 ios
 src/locale/locales
 lib/react-compiler-runtime
+bskyweb/static
+coverage
+web-build
@@ -234,24 +234,8 @@ module.exports = function (config) {
          'expo-font',
          {
            fonts: [
-              // './assets/fonts/inter/Inter-Thin.otf',
-              // './assets/fonts/inter/Inter-ThinItalic.otf',
-              // './assets/fonts/inter/Inter-ExtraLight.otf',
-              // './assets/fonts/inter/Inter-ExtraLightItalic.otf',
-              // './assets/fonts/inter/Inter-Light.otf',
-              // './assets/fonts/inter/Inter-LightItalic.otf',
-              './assets/fonts/inter/Inter-Regular.otf',
-              './assets/fonts/inter/Inter-Italic.otf',
-              './assets/fonts/inter/Inter-Medium.otf',
-              './assets/fonts/inter/Inter-MediumItalic.otf',
-              './assets/fonts/inter/Inter-SemiBold.otf',
-              './assets/fonts/inter/Inter-SemiBoldItalic.otf',
-              './assets/fonts/inter/Inter-Bold.otf',
-              './assets/fonts/inter/Inter-BoldItalic.otf',
-              './assets/fonts/inter/Inter-ExtraBold.otf',
-              './assets/fonts/inter/Inter-ExtraBoldItalic.otf',
-              './assets/fonts/inter/Inter-Black.otf',
-              './assets/fonts/inter/Inter-BlackItalic.otf',
+              './assets/fonts/inter/InterVariable.ttf',
+              './assets/fonts/inter/InterVariable-Italic.ttf',
            ],
          },
        ],
@@ -255,6 +255,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/support/community-guidelines", server.WebGeneric)
 	e.GET("/support/copyright", server.WebGeneric)
 	e.GET("/intent/compose", server.WebGeneric)
+	e.GET("/intent/verify-email", server.WebGeneric)
 	e.GET("/messages", server.WebGeneric)
 	e.GET("/messages/:conversation", server.WebGeneric)

@@ -279,6 +280,7 @@ func serve(cctx *cli.Context) error {

 	// starter packs
 	e.GET("/starter-pack/:handleOrDID/:rkey", server.WebStarterPack)
+	e.GET("/starter-pack-short/:code", server.WebGeneric)
 	e.GET("/start/:handleOrDID/:rkey", server.WebStarterPack)

 	// ipcc
@@ -13,24 +13,8 @@

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

-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Regular.1f5ed03b6dd9fd1f9982.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Italic.95778eb0c75dc956257e.otf">
-  <!--
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Medium.296aa2d65964269836b3.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-MediumItalic.0e57e17a6311368e2114.otf">
-  -->
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBold.2277990330981b8409bb.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-SemiBoldItalic.f62fea3df3a521d6c8a7.otf">
-  <!--
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Bold.8d330503e1d034ad68de.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BoldItalic.bb17e63f9baa0d861a20.otf">
-  -->
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBold.ff2581a193bf6b7e0b06.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-ExtraBoldItalic.0e50b40728d24d40fdf4.otf">
-  <!--
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-Black.66e9a87f1c921e844ed4.otf">
-  <link rel="preload" as="font" type="font/otf" href="/static/media/Inter-BlackItalic.27b9f0ad06fd13a7b9da.otf">
-  -->
+  <link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable.c9f788f6e7ebaec75d7c.ttf">
+  <link rel="preload" as="font" type="font/ttf" href="/static/media/InterVariable-Italic.55d6a3f35e9b605ba6f4.ttf">

  <style>
    /**
@@ -53,7 +37,7 @@
    body {
      margin: 0px;
      padding: 0px;
-      font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
+      font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
      text-rendering: optimizeLegibility;
      /* Platform-specific reset */
      -webkit-overflow-scrolling: touch;
@@ -54,21 +54,6 @@ jest.mock('expo-image-manipulator', () => ({
  SaveFormat: jest.requireActual('expo-image-manipulator').SaveFormat,
 }))

-jest.mock('@segment/analytics-react-native', () => ({
-  createClient: () => ({
-    add: jest.fn(),
-  }),
-  useAnalytics: () => ({
-    track: jest.fn(),
-    identify: jest.fn(),
-    reset: jest.fn(),
-    group: jest.fn(),
-    screen: jest.fn(),
-    alias: jest.fn(),
-    flush: jest.fn(),
-  }),
-}))
-
 jest.mock('expo-camera', () => ({
  Camera: {
    useCameraPermissions: jest.fn(() => [true]),
@@ -111,6 +96,11 @@ jest.mock('expo-modules-core', () => ({
        getIsReducedMotionEnabled: () => false,
      }
    }
+    if (moduleName === 'BottomSheet') {
+      return {
+        dismissAll: () => {},
+      }
+    }
  }),
  requireNativeViewManager: jest.fn().mockImplementation(moduleName => {
    return () => null
@@ -40,4 +40,4 @@
    <key>CFBundleShortVersionString</key>
    <string>$(MARKETING_VERSION)</string>
  </dict>
-</plist>
+</plist>
@@ -1,5 +1,14 @@
 import UIKit

+let IMAGE_EXTENSIONS: [String] = ["png", "jpg", "jpeg", "gif", "heic"]
+let MOVIE_EXTENSIONS: [String] = ["mov", "mp4", "m4v"]
+
+enum URLType: String, CaseIterable {
+  case image
+  case movie
+  case other
+}
+
 class ShareViewController: UIViewController {
  // This allows other forks to use this extension while also changing their
  // scheme.
@@ -23,7 +32,7 @@ class ShareViewController: UIViewController {
        await self.handleUrl(item: firstAttachment)
      } else if firstAttachment.hasItemConformingToTypeIdentifier("public.image") {
        await self.handleImages(items: attachments)
-      } else if firstAttachment.hasItemConformingToTypeIdentifier("public.video") {
+      } else if firstAttachment.hasItemConformingToTypeIdentifier("public.movie") {
        await self.handleVideos(items: attachments)
      } else {
        self.completeRequest()
@@ -43,9 +52,18 @@ class ShareViewController: UIViewController {

  private func handleUrl(item: NSItemProvider) async {
    if let data = try? await item.loadItem(forTypeIdentifier: "public.url") as? URL {
-      if let encoded = data.absoluteString.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed),
-         let url = URL(string: "\(self.appScheme)://intent/compose?text=\(encoded)") {
-        _ = self.openURL(url)
+      switch data.type {
+      case .image:
+        await handleImages(items: [item])
+        return
+      case .movie:
+        await handleVideos(items: [item])
+        return
+      case .other:
+        if let encoded = data.absoluteString.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed),
+           let url = URL(string: "\(self.appScheme)://intent/compose?text=\(encoded)") {
+          _ = self.openURL(url)
+        }
      }
    }
    self.completeRequest()
@@ -101,13 +119,13 @@ class ShareViewController: UIViewController {
  private func handleVideos(items: [NSItemProvider]) async {
    let firstItem = items.first

-    if let dataUri = try? await firstItem?.loadItem(forTypeIdentifier: "public.video") as? URL {
+    if let dataUri = try? await firstItem?.loadItem(forTypeIdentifier: "public.movie") as? URL {
      let ext = String(dataUri.lastPathComponent.split(separator: ".").last ?? "mp4")
      if let tempUrl = getTempUrl(ext: ext) {
        let data = try? Data(contentsOf: dataUri)
        try? data?.write(to: tempUrl)

-        if let encoded = dataUri.absoluteString.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed),
+        if let encoded = tempUrl.absoluteString.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed),
           let url = URL(string: "\(self.appScheme)://intent/compose?videoUri=\(encoded)") {
          _ = self.openURL(url)
        }
@@ -150,10 +168,29 @@ class ShareViewController: UIViewController {
    var responder: UIResponder? = self
    while responder != nil {
      if let application = responder as? UIApplication {
-          return application.perform(#selector(openURL(_:)), with: url) != nil
+        application.open(url)
+        return true
      }
      responder = responder?.next
    }
    return false
  }
 }
+
+extension URL {
+  var type: URLType {
+    get {
+      guard self.absoluteString.starts(with: "file://"),
+            let ext = self.pathComponents.last?.split(separator: ".").last?.lowercased() else {
+        return .other
+      }
+
+      if IMAGE_EXTENSIONS.contains(ext) {
+        return .image
+      } else if MOVIE_EXTENSIONS.contains(ext) {
+        return .movie
+      }
+      return .other
+    }
+  }
+}
@@ -0,0 +1,57 @@
+apply plugin: 'com.android.library'
+
+group = 'expo.modules.bottomsheet'
+version = '0.1.0'
+
+def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+apply from: expoModulesCorePlugin
+applyKotlinExpoModulesCorePlugin()
+useCoreDependencies()
+useExpoPublishing()
+
+// If you want to use the managed Android SDK versions from expo-modules-core, set this to true.
+// The Android SDK versions will be bumped from time to time in SDK releases and may introduce breaking changes in your module code.
+// Most of the time, you may like to manage the Android SDK versions yourself.
+def useManagedAndroidSdkVersions = false
+if (useManagedAndroidSdkVersions) {
+  useDefaultAndroidSdkVersions()
+} else {
+  buildscript {
+    // Simple helper that allows the root project to override versions declared by this library.
+    ext.safeExtGet = { prop, fallback ->
+      rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+    }
+  }
+  project.android {
+    compileSdkVersion safeExtGet("compileSdkVersion", 34)
+    defaultConfig {
+      minSdkVersion safeExtGet("minSdkVersion", 21)
+      targetSdkVersion safeExtGet("targetSdkVersion", 34)
+    }
+  }
+}
+
+android {
+  namespace "expo.modules.bottomsheet"
+  defaultConfig {
+    versionCode 1
+    versionName "0.1.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+  buildFeatures {
+    compose true
+  }
+  composeOptions {
+    kotlinCompilerExtensionVersion = "1.5.8"
+  }
+}
+
+dependencies {
+  implementation project(':expo-modules-core')
+  implementation "androidx.compose.material3:material3:1.3.0"
+  implementation "androidx.compose.material:material:1.7.2"
+  implementation "com.facebook.react:react-native:+"
+  implementation("com.composables:core:1.12.0")
+}
@@ -0,0 +1,2 @@
+<manifest>
+</manifest>
@@ -0,0 +1,58 @@
+package expo.modules.bottomsheet
+
+import android.graphics.Color
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class BottomSheetModule : Module() {
+  override fun definition() =
+    ModuleDefinition {
+      Name("BottomSheet")
+
+      AsyncFunction("dismissAll") {
+        SheetManager.dismissAll()
+      }
+
+      View(BottomSheetView::class) {
+        Events(
+          arrayOf(
+            "onAttemptDismiss",
+            "onSnapPointChange",
+            "onStateChange",
+          ),
+        )
+
+        AsyncFunction("dismiss") { view: BottomSheetView ->
+          view.dismiss()
+        }
+
+        AsyncFunction("updateLayout") { view: BottomSheetView ->
+          view.updateLayout()
+        }
+
+        Prop("containerBackgroundColor") { view: BottomSheetView, prop: String ->
+          view.sheetState.value.containerBackgroundColor = Color.parseColor(prop)
+        }
+
+        Prop("cornerRadius") { view: BottomSheetView, prop: Float ->
+          view.sheetState.value.cornerRadius = prop
+        }
+
+        Prop("minHeight") { view: BottomSheetView, prop: Float ->
+          view.minHeight = prop
+        }
+
+        Prop("maxHeight") { view: BottomSheetView, prop: Float ->
+          view.maxHeight = prop
+        }
+
+        Prop("preventDismiss") { view: BottomSheetView, prop: Boolean ->
+          view.preventDismiss = prop
+        }
+
+        Prop("preventExpansion") { view: BottomSheetView, prop: Boolean ->
+          view.sheetState.value.preventExpansion = prop
+        }
+      }
+    }
+}
@@ -0,0 +1,28 @@
+package expo.modules.bottomsheet
+
+import java.lang.ref.WeakReference
+
+class SheetManager {
+  companion object {
+    private val sheets = mutableSetOf<WeakReference<BottomSheetView>>()
+
+    fun add(view: BottomSheetView) {
+      sheets.add(WeakReference(view))
+    }
+
+    fun remove(view: BottomSheetView) {
+      sheets.forEach {
+        if (it.get() == view) {
+          sheets.remove(it)
+          return
+        }
+      }
+    }
+
+    fun dismissAll() {
+      sheets.forEach {
+        it.get()?.dismiss()
+      }
+    }
+  }
+}
@@ -0,0 +1,101 @@
+package expo.modules.bottomsheet
+
+import android.util.Log
+import android.view.View
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.scrollable
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.SheetValue
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import com.composables.core.BottomSheet
+import com.composables.core.SheetDetent
+import com.composables.core.SheetDetent.Companion.FullyExpanded
+import com.composables.core.SheetDetent.Companion.Hidden
+import com.composables.core.rememberBottomSheetState
+import kotlinx.coroutines.launch
+import kotlin.annotations.jvm.Mutable
+
+data class SheetState(
+  var isOpen: Boolean = false,
+  var cornerRadius: Float? = null,
+  var containerBackgroundColor: Int? = null,
+  var preventExpansion: Boolean = false,
+)
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun SheetView(
+  state: MutableState<SheetState>,
+  openState: MutableState<Boolean>,
+  innerView: View,
+  contentHeight: Float,
+  onDismissRequest: () -> Unit,
+  onExpanded: () -> Unit,
+  onHidden: () -> Unit,
+) {
+  val Peek = SheetDetent(identifier = "peek") { containerHeight, sheetHeight ->
+    containerHeight*0.6f
+  }
+
+  val scope = rememberCoroutineScope()
+
+  val sheetState = rememberBottomSheetState(
+    initialDetent = Hidden,
+    detents = listOf(Hidden, Peek, FullyExpanded)
+  )
+
+  BottomSheet(
+    state = sheetState,
+    modifier = Modifier.fillMaxWidth()
+      .shadow(4.dp)
+      .clip(RoundedCornerShape(topStart = state.value.cornerRadius ?: 0f, topEnd = state.value.cornerRadius ?: 0f))
+      .background(Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT))
+      .imePadding()
+//    onDismissRequest = onDismissRequest,
+//    shape =
+//      RoundedCornerShape(
+//        topStart = state.value.cornerRadius ?: 0f,
+//        topEnd = state.value.cornerRadius ?: 0f,
+//      ),
+//    containerColor = Color(state.value.containerBackgroundColor ?: android.graphics.Color.TRANSPARENT),
+  ) {
+    AndroidView(
+      factory = { innerView },
+    )
+  }
+
+  LaunchedEffect(openState) {
+    Log.d("SheetView", "openState: ${openState.value}")
+    if (openState.value) {
+      sheetState.currentDetent = Peek
+    } else {
+      sheetState.currentDetent = Hidden
+    }
+  }
+
+  LaunchedEffect(sheetState.currentDetent) {
+    if (sheetState.currentDetent == Peek || sheetState.currentDetent == FullyExpanded) {
+      onExpanded()
+    } else if (sheetState.currentDetent == Hidden) {
+      onHidden()
+    }
+  }
+}
@@ -0,0 +1,9 @@
+{
+  "platforms": ["ios", "android"],
+  "ios": {
+    "modules": ["BottomSheetModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.bottomsheet.BottomSheetModule"]
+  }
+}
@@ -0,0 +1,13 @@
+import {BottomSheet} from './src/BottomSheet'
+import {
+  BottomSheetSnapPoint,
+  BottomSheetState,
+  BottomSheetViewProps,
+} from './src/BottomSheet.types'
+
+export {
+  BottomSheet,
+  BottomSheetSnapPoint,
+  type BottomSheetState,
+  type BottomSheetViewProps,
+}
@@ -0,0 +1,21 @@
+Pod::Spec.new do |s|
+  s.name           = 'BottomSheet'
+  s.version        = '1.0.0'
+  s.summary        = 'A bottom sheet for use in Bluesky'
+  s.description    = 'A bottom sheet for use in Bluesky'
+  s.author         = ''
+  s.homepage       = 'https://github.com/bluesky-social/social-app'
+  s.platforms      = { :ios => '15.0', :tvos => '15.0' }
+  s.source         = { git: '' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_COMPILATION_MODE' => 'wholemodule'
+  }
+
+  s.source_files = "**/*.{h,m,swift}"
+end
@@ -0,0 +1,47 @@
+import ExpoModulesCore
+
+public class BottomSheetModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("BottomSheet")
+
+    AsyncFunction("dismissAll") {
+      SheetManager.shared.dismissAll()
+    }
+
+    View(SheetView.self) {
+      Events([
+        "onAttemptDismiss",
+        "onSnapPointChange",
+        "onStateChange",
+      ])
+
+      AsyncFunction("dismiss") { (view: SheetView) in
+        view.dismiss()
+      }
+
+      AsyncFunction("updateLayout") { (view: SheetView) in
+        view.updateLayout()
+      }
+
+      Prop("cornerRadius") { (view: SheetView, prop: Float) in
+        view.cornerRadius = CGFloat(prop)
+      }
+
+      Prop("minHeight") { (view: SheetView, prop: Double) in
+        view.minHeight = prop
+      }
+
+      Prop("maxHeight") { (view: SheetView, prop: Double) in
+        view.maxHeight = prop
+      }
+
+      Prop("preventDismiss") { (view: SheetView, prop: Bool) in
+        view.preventDismiss = prop
+      }
+
+      Prop("preventExpansion") { (view: SheetView, prop: Bool) in
+        view.preventExpansion = prop
+      }
+    }
+  }
+}
@@ -0,0 +1,28 @@
+//
+//  SheetManager.swift
+//  Pods
+//
+//  Created by Hailey on 10/1/24.
+//
+
+import ExpoModulesCore
+
+class SheetManager {
+  static let shared = SheetManager()
+
+  private var sheetViews = NSHashTable<SheetView>(options: .weakMemory)
+
+  func add(_ view: SheetView) {
+    sheetViews.add(view)
+  }
+
+  func remove(_ view: SheetView) {
+    sheetViews.remove(view)
+  }
+
+  func dismissAll() {
+    sheetViews.allObjects.forEach { sheetView in
+      sheetView.dismiss()
+    }
+  }
+}
@@ -0,0 +1,185 @@
+import ExpoModulesCore
+import UIKit
+
+class SheetView: ExpoView, UISheetPresentationControllerDelegate {
+  // Views
+  private var sheetVc: SheetViewController?
+  private var innerView: UIView?
+
+  // Events
+  private let onAttemptDismiss = EventDispatcher()
+  private let onSnapPointChange = EventDispatcher()
+  private let onStateChange = EventDispatcher()
+
+  // Open event firing
+  private var isOpen: Bool = false {
+    didSet {
+      onStateChange([
+        "state": isOpen ? "open" : "closed"
+      ])
+    }
+  }
+
+  // React view props
+  var preventDismiss = false
+  var preventExpansion = false
+  var cornerRadius: CGFloat?
+  var minHeight = 0.0
+  var maxHeight: CGFloat! {
+    didSet {
+      let screenHeight = Util.getScreenHeight() ?? 0
+      if maxHeight > screenHeight {
+        maxHeight = screenHeight
+      }
+    }
+  }
+
+  private var isOpening = false {
+    didSet {
+      if isOpening {
+        onStateChange([
+          "state": "opening"
+        ])
+      }
+    }
+  }
+  private var isClosing = false {
+    didSet {
+      if isClosing {
+        onStateChange([
+          "state": "closing"
+        ])
+      }
+    }
+  }
+  private var selectedDetentIdentifier: UISheetPresentationController.Detent.Identifier? {
+    didSet {
+      if selectedDetentIdentifier == .large {
+        onSnapPointChange([
+          "snapPoint": 2
+        ])
+      } else {
+        onSnapPointChange([
+          "snapPoint": 1
+        ])
+      }
+    }
+  }
+
+  // MARK: - Lifecycle
+
+  required init (appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    self.maxHeight = Util.getScreenHeight()
+    SheetManager.shared.add(self)
+  }
+
+  deinit {
+    self.destroy()
+  }
+
+  // We don't want this view to actually get added to the tree, so we'll simply store it for adding
+  // to the SheetViewController
+  override func insertReactSubview(_ subview: UIView!, at atIndex: Int) {
+    self.innerView = subview
+  }
+
+  // We'll grab the content height from here so we know the initial detent to set
+  override func layoutSubviews() {
+    super.layoutSubviews()
+
+    guard let innerView = self.innerView else {
+      return
+    }
+
+    if innerView.subviews.count != 1 {
+      return
+    }
+
+    self.present()
+  }
+
+  private func destroy() {
+    self.isClosing = false
+    self.isOpen = false
+    self.sheetVc = nil
+    self.innerView = nil
+    SheetManager.shared.remove(self)
+  }
+
+  // MARK: - Presentation
+
+  func present() {
+    guard !self.isOpen,
+          let innerView = self.innerView,
+          let contentHeight = innerView.subviews.first?.frame.height,
+          let rvc = self.reactViewController() else {
+      return
+    }
+
+    let sheetVc = SheetViewController()
+    sheetVc.setDetents(contentHeight: self.clampHeight(contentHeight), preventExpansion: self.preventExpansion)
+    if let sheet = sheetVc.sheetPresentationController {
+      sheet.delegate = self
+      sheet.preferredCornerRadius = self.cornerRadius
+      if sheet.detents.count == 1 {
+        sheet.selectedDetentIdentifier = .large
+      } else {
+        self.selectedDetentIdentifier = sheet.selectedDetentIdentifier
+      }
+    }
+    sheetVc.view.addSubview(innerView)
+
+    self.sheetVc = sheetVc
+    self.isOpening = true
+
+    rvc.present(sheetVc, animated: true) { [weak self] in
+      self?.isOpening = false
+      self?.isOpen = true
+    }
+  }
+
+  func updateLayout() {
+    if let contentHeight = self.innerView?.subviews.first?.frame.size.height {
+      self.sheetVc?.updateDetents(contentHeight: self.clampHeight(contentHeight),
+                               preventExpansion: self.preventExpansion)
+    }
+  }
+
+  func dismiss() {
+    self.isClosing = true
+    self.sheetVc?.dismiss(animated: true) { [weak self] in
+      self?.destroy()
+    }
+  }
+
+  // MARK: - Utils
+
+  private func clampHeight(_ height: CGFloat) -> CGFloat {
+    if height < self.minHeight {
+      return self.minHeight
+    } else if height > self.maxHeight {
+      return self.maxHeight
+    }
+    return height
+  }
+
+  // MARK: - UISheetPresentationControllerDelegate
+
+  func presentationControllerShouldDismiss(_ presentationController: UIPresentationController) -> Bool {
+    self.onAttemptDismiss()
+    return !self.preventDismiss
+  }
+
+  func presentationControllerWillDismiss(_ presentationController: UIPresentationController) {
+    self.isClosing = true
+  }
+
+  func presentationControllerDidDismiss(_ presentationController: UIPresentationController) {
+    self.destroy()
+  }
+
+  func sheetPresentationControllerDidChangeSelectedDetentIdentifier(_ sheetPresentationController: UISheetPresentationController) {
+    self.selectedDetentIdentifier = sheetPresentationController.selectedDetentIdentifier
+  }
+}
@@ -0,0 +1,67 @@
+//
+//  SheetViewController.swift
+//  Pods
+//
+//  Created by Hailey on 9/30/24.
+//
+
+import Foundation
+import UIKit
+
+class SheetViewController: UIViewController {
+  init() {
+    super.init(nibName: nil, bundle: nil)
+
+    self.modalPresentationStyle = .formSheet
+    self.isModalInPresentation = false
+
+    if let sheet = self.sheetPresentationController {
+      sheet.prefersGrabberVisible = true
+    }
+  }
+
+  func setDetents(contentHeight: CGFloat, preventExpansion: Bool) {
+    guard let sheet = self.sheetPresentationController,
+          let screenHeight = Util.getScreenHeight()
+    else {
+      return
+    }
+
+    if contentHeight > screenHeight {
+      sheet.detents = [
+        .large()
+      ]
+    } else {
+      if #available(iOS 16.0, *) {
+        sheet.detents = [
+          .custom { _ in
+            return contentHeight
+          }
+        ]
+      } else {
+        sheet.detents = [
+          .medium()
+        ]
+      }
+    }
+
+    if !preventExpansion {
+      sheet.detents.append(.large())
+    }
+  }
+
+  func updateDetents(contentHeight: CGFloat, preventExpansion: Bool) {
+    if let sheet = self.sheetPresentationController {
+      sheet.animateChanges {
+        self.setDetents(contentHeight: contentHeight, preventExpansion: preventExpansion)
+        if #available(iOS 16.0, *) {
+          sheet.invalidateDetents()
+        }
+      }
+    }
+  }
+
+  required init?(coder: NSCoder) {
+    fatalError("init(coder:) has not been implemented")
+  }
+}
@@ -0,0 +1,18 @@
+//
+//  Util.swift
+//  Pods
+//
+//  Created by Hailey on 10/2/24.
+//
+
+class Util {
+  static func getScreenHeight() -> CGFloat? {
+    if let windowScene = UIApplication.shared.connectedScenes.first as? UIWindowScene,
+     let window = windowScene.windows.first {
+      let safeAreaInsets = window.safeAreaInsets
+      let fullScreenHeight = UIScreen.main.bounds.height
+      return fullScreenHeight - (safeAreaInsets.top + safeAreaInsets.bottom)
+    }
+    return nil
+  }
+}
@@ -0,0 +1,111 @@
+import * as React from 'react'
+import {
+  ColorValue,
+  Dimensions,
+  NativeSyntheticEvent,
+  StyleProp,
+  StyleSheet,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {requireNativeModule} from 'expo'
+import {requireNativeViewManager} from 'expo-modules-core'
+
+import {BottomSheetState, BottomSheetViewProps} from './BottomSheet.types'
+
+const screenHeight = Dimensions.get('screen').height
+
+const NativeView: React.ComponentType<
+  BottomSheetViewProps & {
+    ref: React.RefObject<any>
+    style: StyleProp<ViewStyle>
+  }
+> = requireNativeViewManager('BottomSheet')
+
+const NativeModule = requireNativeModule('BottomSheet')
+
+export class BottomSheet extends React.Component<
+  BottomSheetViewProps,
+  {
+    open: boolean
+  }
+> {
+  ref = React.createRef<any>()
+
+  constructor(props: BottomSheetViewProps) {
+    super(props)
+    this.state = {
+      open: false,
+    }
+  }
+
+  present() {
+    this.setState({open: true})
+  }
+
+  dismiss() {
+    this.ref.current?.dismiss()
+  }
+
+  private onStateChange = (
+    event: NativeSyntheticEvent<{state: BottomSheetState}>,
+  ) => {
+    const {state} = event.nativeEvent
+    const isOpen = state !== 'closed'
+    this.setState({open: isOpen})
+    this.props.onStateChange?.(event)
+  }
+
+  private getBackgroundColor = (): ColorValue | undefined => {
+    const parent = React.Children.toArray(
+      this.props.children,
+    )[0] as React.ReactElement
+    if (parent?.props?.style) {
+      const parentStyle = StyleSheet.flatten(parent.props.style) as ViewStyle
+      return parentStyle.backgroundColor ?? 'transparent'
+    }
+    return undefined
+  }
+
+  private updateLayout = () => {
+    this.ref.current?.updateLayout()
+  }
+
+  static dismissAll = async () => {
+    await NativeModule.dismissAll()
+  }
+
+  render() {
+    const {children, ...rest} = this.props
+    const topInset = rest.topInset ?? 0
+    const bottomInset = rest.bottomInset ?? 0
+
+    if (!this.state.open) {
+      return null
+    }
+
+    const backgroundColor = this.getBackgroundColor()
+    return (
+      <NativeView
+        {...rest}
+        onStateChange={this.onStateChange}
+        ref={this.ref}
+        style={{
+          position: 'absolute',
+          height: screenHeight - topInset - bottomInset,
+          width: '100%',
+        }}
+        containerBackgroundColor={backgroundColor}>
+        <View
+          style={{
+            flex: 1,
+            backgroundColor,
+            paddingTop: topInset,
+            paddingBottom: bottomInset,
+          }}>
+          <View onLayout={this.updateLayout}>{children}</View>
+        </View>
+      </NativeView>
+    )
+  }
+}
@@ -0,0 +1,31 @@
+import React from 'react'
+import {ColorValue, NativeSyntheticEvent} from 'react-native'
+
+export type BottomSheetState = 'closed' | 'closing' | 'open' | 'opening'
+
+export enum BottomSheetSnapPoint {
+  Hidden,
+  Partial,
+  Full,
+}
+
+export interface BottomSheetViewProps {
+  children: React.ReactNode
+  cornerRadius?: number
+  preventDismiss?: boolean
+  preventExpansion?: boolean
+  containerBackgroundColor?: ColorValue
+  topInset?: number
+  bottomInset?: number
+
+  minHeight?: number
+  maxHeight?: number
+
+  onAttemptDismiss?: (event: NativeSyntheticEvent<object>) => void
+  onSnapPointChange?: (
+    event: NativeSyntheticEvent<{snapPoint: BottomSheetSnapPoint}>,
+  ) => void
+  onStateChange?: (
+    event: NativeSyntheticEvent<{state: BottomSheetState}>,
+  ) => void
+}
@@ -0,0 +1,5 @@
+import {BottomSheetViewProps} from './BottomSheet.types'
+
+export function BottomSheet(_: BottomSheetViewProps) {
+  throw new Error('BottomSheetView is not available on web')
+}
@@ -12,6 +12,11 @@ import java.io.File
 import java.io.FileOutputStream
 import java.net.URLEncoder

+enum class AttachmentType {
+  IMAGE,
+  VIDEO,
+}
+
 class ExpoReceiveAndroidIntentsModule : Module() {
  override fun definition() =
    ModuleDefinition {
@@ -23,17 +28,26 @@ class ExpoReceiveAndroidIntentsModule : Module() {
    }

  private fun handleIntent(intent: Intent?) {
-    if (appContext.currentActivity == null || intent == null) return
-
-    if (intent.action == Intent.ACTION_SEND) {
-      if (intent.type == "text/plain") {
-        handleTextIntent(intent)
-      } else if (intent.type.toString().startsWith("image/")) {
-        handleImageIntent(intent)
+    if (appContext.currentActivity == null) return
+    intent?.let {
+      if (it.action == Intent.ACTION_SEND && it.type == "text/plain") {
+        handleTextIntent(it)
+        return
      }
-    } else if (intent.action == Intent.ACTION_SEND_MULTIPLE) {
-      if (intent.type.toString().startsWith("image/")) {
-        handleImagesIntent(intent)
+
+      val type =
+        if (it.type.toString().startsWith("image/")) {
+          AttachmentType.IMAGE
+        } else if (it.type.toString().startsWith("video/")) {
+          AttachmentType.VIDEO
+        } else {
+          return
+        }
+
+      if (it.action == Intent.ACTION_SEND) {
+        handleAttachmentIntent(it, type)
+      } else if (it.action == Intent.ACTION_SEND_MULTIPLE) {
+        handleAttachmentsIntent(it, type)
      }
    }
  }
@@ -48,26 +62,46 @@ class ExpoReceiveAndroidIntentsModule : Module() {
    }
  }

-  private fun handleImageIntent(intent: Intent) {
+  private fun handleAttachmentIntent(
+    intent: Intent,
+    type: AttachmentType,
+  ) {
    val uri =
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
        intent.getParcelableExtra(Intent.EXTRA_STREAM, Uri::class.java)
      } else {
        intent.getParcelableExtra(Intent.EXTRA_STREAM)
      }
-    if (uri == null) return

-    handleImageIntents(listOf(uri))
+    uri?.let {
+      when (type) {
+        AttachmentType.IMAGE -> handleImageIntents(listOf(it))
+        AttachmentType.VIDEO -> handleVideoIntents(listOf(it))
+      }
+    }
  }

-  private fun handleImagesIntent(intent: Intent) {
-    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
-      intent.getParcelableArrayListExtra(Intent.EXTRA_STREAM, Uri::class.java)?.let {
-        handleImageIntents(it.filterIsInstance<Uri>().take(4))
+  private fun handleAttachmentsIntent(
+    intent: Intent,
+    type: AttachmentType,
+  ) {
+    val uris =
+      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+        intent
+          .getParcelableArrayListExtra(Intent.EXTRA_STREAM, Uri::class.java)
+          ?.filterIsInstance<Uri>()
+          ?.take(4)
+      } else {
+        intent
+          .getParcelableArrayListExtra<Uri>(Intent.EXTRA_STREAM)
+          ?.filterIsInstance<Uri>()
+          ?.take(4)
      }
-    } else {
-      intent.getParcelableArrayListExtra<Uri>(Intent.EXTRA_STREAM)?.let {
-        handleImageIntents(it.filterIsInstance<Uri>().take(4))
+
+    uris?.let {
+      when (type) {
+        AttachmentType.IMAGE -> handleImageIntents(it)
+        else -> return
      }
    }
  }
@@ -93,11 +127,33 @@ class ExpoReceiveAndroidIntentsModule : Module() {
    }
  }

+  private fun handleVideoIntents(uris: List<Uri>) {
+    val uri = uris[0]
+    // If there is no extension for the file, substringAfterLast returns the original string - not
+    // null, so we check for that below
+    // It doesn't actually matter what the extension is, so defaulting to mp4 is fine, even if the
+    // video isn't actually an mp4
+    var extension = uri.path?.substringAfterLast(".")
+    if (extension == null || extension == uri.path) {
+      extension = "mp4"
+    }
+    val file = createFile(extension)
+
+    val out = FileOutputStream(file)
+    appContext.currentActivity?.contentResolver?.openInputStream(uri)?.use {
+      it.copyTo(out)
+    }
+    "bluesky://intent/compose?videoUri=${URLEncoder.encode(file.path, "UTF-8")}".toUri().let {
+      val newIntent = Intent(Intent.ACTION_VIEW, it)
+      appContext.currentActivity?.startActivity(newIntent)
+    }
+  }
+
  private fun getImageInfo(uri: Uri): Map<String, Any> {
    val bitmap = MediaStore.Images.Media.getBitmap(appContext.currentActivity?.contentResolver, uri)
    // We have to save this so that we can access it later when uploading the image.
    // createTempFile will automatically place a unique string between "img" and "temp.jpeg"
-    val file = File.createTempFile("img", "temp.jpeg", appContext.currentActivity?.cacheDir)
+    val file = createFile("jpeg")
    val out = FileOutputStream(file)
    bitmap.compress(Bitmap.CompressFormat.JPEG, 100, out)
    out.flush()
@@ -110,6 +166,8 @@ class ExpoReceiveAndroidIntentsModule : Module() {
    )
  }

+  private fun createFile(extension: String): File = File.createTempFile(extension, "temp.$extension", appContext.currentActivity?.cacheDir)
+
  // We will pas the width and height to the app here, since getting measurements
  // on the RN side is a bit more involved, and we already have them here anyway.
  private fun buildUriData(info: Map<String, Any>): String {
@@ -53,7 +53,7 @@
    "icons:optimize": "svgo -f ./assets/icons"
  },
  "dependencies": {
-    "@atproto/api": "^0.13.7",
+    "@atproto/api": "^0.13.8",
    "@braintree/sanitize-url": "^6.0.2",
    "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
    "@emoji-mart/react": "^1.1.1",
@@ -81,10 +81,6 @@
    "@react-navigation/drawer": "^6.6.15",
    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
-    "@segment/analytics-next": "^1.51.3",
-    "@segment/analytics-react": "^1.0.0-rc1",
-    "@segment/analytics-react-native": "^2.10.1",
-    "@segment/sovran-react-native": "^0.4.5",
    "@sentry/react-native": "5.32.0",
    "@tamagui/focus-scope": "^1.84.1",
    "@tanstack/query-async-storage-persister": "^5.25.0",
@@ -175,11 +171,11 @@
    "react-native-compressor": "^1.8.24",
    "react-native-date-picker": "^4.4.2",
    "react-native-drawer-layout": "^4.0.0-alpha.3",
-    "react-native-gesture-handler": "~2.16.2",
+    "react-native-gesture-handler": "2.20.0",
    "react-native-get-random-values": "~1.11.0",
    "react-native-image-crop-picker": "0.41.2",
    "react-native-ios-context-menu": "^1.15.3",
-    "react-native-keyboard-controller": "^1.12.1",
+    "react-native-keyboard-controller": "^1.14.0",
    "react-native-mmkv": "^2.12.2",
    "react-native-pager-view": "6.2.3",
    "react-native-picker-select": "^9.1.3",
@@ -27,6 +27,29 @@ const withIntentFilters = config => {
          },
        ],
      },
+      {
+        action: [
+          {
+            $: {
+              'android:name': 'android.intent.action.SEND',
+            },
+          },
+        ],
+        category: [
+          {
+            $: {
+              'android:name': 'android.intent.category.DEFAULT',
+            },
+          },
+        ],
+        data: [
+          {
+            $: {
+              'android:mimeType': 'video/*',
+            },
+          },
+        ],
+      },
      {
        action: [
          {
@@ -15,7 +15,6 @@ import {
  StackActions,
 } from '@react-navigation/native'

-import {init as initAnalytics} from '#/lib/analytics/analytics'
 import {timeout} from '#/lib/async/timeout'
 import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {usePalette} from '#/lib/hooks/usePalette'
@@ -79,8 +78,8 @@ import {BottomBar} from '#/view/shell/bottom-bar/BottomBar'
 import {createNativeStackNavigatorWithAuth} from '#/view/shell/createNativeStackNavigatorWithAuth'
 import {SharedPreferencesTesterScreen} from '#/screens/E2E/SharedPreferencesTesterScreen'
 import HashtagScreen from '#/screens/Hashtag'
+import {MessagesScreen} from '#/screens/Messages/ChatList'
 import {MessagesConversationScreen} from '#/screens/Messages/Conversation'
-import {MessagesScreen} from '#/screens/Messages/List'
 import {MessagesSettingsScreen} from '#/screens/Messages/Settings'
 import {ModerationScreen} from '#/screens/Moderation'
 import {PostLikedByScreen} from '#/screens/Post/PostLikedBy'
@@ -647,8 +646,6 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {

  function onReady() {
    prevLoggedRouteName.current = getCurrentRouteName()
-    initAnalytics(currentAccount)
-
    if (currentAccount && shouldRequestEmailConfirmation(currentAccount)) {
      openModal({name: 'verify-email', showReminder: true})
      snoozeEmailConfirmationPrompt()
@@ -901,4 +901,32 @@ export const atoms = {
  hidden: {
    display: 'none',
  },
+
+  /*
+   * Transition
+   */
+  transition_none: web({
+    transitionProperty: 'none',
+  }),
+  transition_all: web({
+    transitionProperty: 'all',
+    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
+    transitionDuration: '100ms',
+  }),
+  transition_color: web({
+    transitionProperty:
+      'color, background-color, border-color, text-decoration-color, fill, stroke',
+    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
+    transitionDuration: '100ms',
+  }),
+  transition_opacity: web({
+    transitionProperty: 'opacity',
+    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
+    transitionDuration: '100ms',
+  }),
+  transition_transform: web({
+    transitionProperty: 'transform',
+    transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
+    transitionDuration: '100ms',
+  }),
 } as const
@@ -1,3 +1,5 @@
+import {useFonts} from 'expo-font'
+
 import {isWeb} from '#/platform/detection'
 import {Device, device} from '#/storage'

@@ -40,31 +42,10 @@ export function applyFonts(
  fontFamily: 'system' | 'theme',
 ) {
  if (fontFamily === 'theme') {
-    style.fontFamily =
-      {
-        // '100': 'Inter-Thin',
-        // '200': 'Inter-ExtraLight',
-        // '300': 'Inter-Light',
-        // '500': 'Inter-Medium',
-        // '700': 'Inter-Bold',
-        // '900': 'Inter-Black',
-        '100': 'Inter-Regular',
-        '200': 'Inter-Regular',
-        '300': 'Inter-Regular',
-        '400': 'Inter-Regular',
-        '500': 'Inter-SemiBold',
-        '600': 'Inter-SemiBold',
-        '700': 'Inter-SemiBold',
-        '800': 'Inter-ExtraBold',
-        '900': 'Inter-ExtraBold',
-      }[style.fontWeight as string] || 'Inter-Regular'
+    style.fontFamily = 'InterVariable'

    if (style.fontStyle === 'italic') {
-      if (style.fontFamily === 'Inter-Regular') {
-        style.fontFamily = 'Inter-Italic'
-      } else {
-        style.fontFamily += 'Italic'
-      }
+      style.fontFamily += 'Italic'
    }

    // fallback families only supported on web
@@ -84,3 +65,15 @@ export function applyFonts(
   */
  style.fontVariant = ['no-contextual']
 }
+
+/*
+ * IMPORTANT: This is unused. Expo statically extracts these fonts.
+ *
+ * All used fonts MUST be configured here. Unused fonts can be commented out.
+ */
+export function DO_NOT_USE() {
+  return useFonts({
+    InterVariable: require('../../assets/fonts/inter/InterVariable.ttf'),
+    'InterVariable-Italic': require('../../assets/fonts/inter/InterVariable-Italic.ttf'),
+  })
+}
@@ -0,0 +1,92 @@
+import React from 'react'
+import {StackActions, useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {flatten, useTheme} from '#/alf'
+import {useDialogContext} from '#/components/Dialog'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {InlineLinkProps, useLink} from '#/components/Link'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
+import {Text} from '#/components/Typography'
+import {router} from '#/routes'
+
+export function BottomSheetInlineLinkText({
+  children,
+  to,
+  action = 'push',
+  disableMismatchWarning,
+  style,
+  onPress: outerOnPress,
+  label,
+  shareOnLongPress,
+  disableUnderline,
+  ...rest
+}: InlineLinkProps) {
+  const t = useTheme()
+  const stringChildren = typeof children === 'string'
+  const navigation = useNavigation<NavigationProp>()
+  const dialog = useDialogContext()
+
+  const {href, isExternal, onLongPress} = useLink({
+    to,
+    displayText: stringChildren ? children : '',
+    action,
+    disableMismatchWarning,
+    onPress: outerOnPress,
+    shareOnLongPress,
+  })
+  const {
+    state: pressed,
+    onIn: onPressIn,
+    onOut: onPressOut,
+  } = useInteractionState()
+
+  const onPress = () => {
+    if (isExternal) {
+      return
+    }
+
+    dialog.close()
+
+    if (action === 'push') {
+      navigation.dispatch(StackActions.push(...router.matchPath(href)))
+    } else if (action === 'replace') {
+      navigation.dispatch(StackActions.replace(...router.matchPath(href)))
+    } else if (action === 'navigate') {
+      // @ts-ignore
+      navigation.navigate(...router.matchPath(href))
+    } else {
+      throw Error('Unsupported navigator action.')
+    }
+  }
+
+  const flattenedStyle = flatten(style) || {}
+
+  // eslint-disable-next-line bsky-internal/avoid-unwrapped-text
+  return (
+    <NormalizedRNGHPressable
+      onPress={onPress}
+      onLongPress={onLongPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      role="link"
+      accessibilityLabel={label}
+      accessibilityHint=""
+      style={{flexDirection: 'row'}}>
+      <Text
+        {...rest}
+        style={[
+          {color: t.palette.primary_500},
+          pressed &&
+            !disableUnderline && {
+              textDecorationLine: 'underline',
+              textDecorationColor:
+                flattenedStyle.color ?? t.palette.primary_500,
+            },
+          flattenedStyle,
+        ]}>
+        {children}
+      </Text>
+    </NormalizedRNGHPressable>
+  )
+}
@@ -0,0 +1 @@
+export {Link as BottomSheetInlineLinkText} from './Link'
@@ -15,7 +15,9 @@ import {
 import {LinearGradient} from 'expo-linear-gradient'

 import {atoms as a, flatten, select, tokens, useTheme, web} from '#/alf'
+import {useDialogContext} from '#/components/Dialog'
 import {Props as SVGIconProps} from '#/components/icons/common'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'

 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
@@ -87,6 +89,7 @@ export type ButtonProps = Pick<
    style?: StyleProp<ViewStyle>
    hoverStyle?: StyleProp<ViewStyle>
    children: NonTextElements | ((context: ButtonContext) => NonTextElements)
+    PressableComponent?: React.ComponentType<PressableProps>
  }

 export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
@@ -114,10 +117,24 @@ export const Button = React.forwardRef<View, ButtonProps>(
      disabled = false,
      style,
      hoverStyle: hoverStyleProp,
+      PressableComponent,
      ...rest
    },
    ref,
  ) => {
+    /*
+     * This will pick the correct default pressable to use. If we are inside a
+     * native dialog, we need to use the RNGH pressable.
+     */
+    const {isNativeDialog} = useDialogContext()
+    if (!PressableComponent) {
+      if (isNativeDialog) {
+        PressableComponent = NormalizedRNGHPressable
+      } else {
+        PressableComponent = Pressable
+      }
+    }
+
    const t = useTheme()
    const [state, setState] = React.useState({
      pressed: false,
@@ -449,10 +466,11 @@ export const Button = React.forwardRef<View, ButtonProps>(
    const flattenedBaseStyles = flatten([baseStyles, style])

    return (
-      <Pressable
+      <PressableComponent
        role="button"
        accessibilityHint={undefined} // optional
        {...rest}
+        // @ts-ignore - this will always be a pressable
        ref={ref}
        aria-label={label}
        aria-pressed={state.pressed}
@@ -500,7 +518,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
        <Context.Provider value={context}>
          {typeof children === 'function' ? children(context) : children}
        </Context.Provider>
-      </Pressable>
+      </PressableComponent>
    )
  },
 )
@@ -6,9 +6,12 @@ import {
  DialogControlRefProps,
  DialogOuterProps,
 } from '#/components/Dialog/types'
+import {BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'

 export const Context = React.createContext<DialogContextProps>({
  close: () => {},
+  isNativeDialog: false,
+  nativeSnapPoint: BottomSheetSnapPoint.Hidden,
 })

 export function useDialogContext() {
@@ -1,86 +1,33 @@
 import React, {useImperativeHandle} from 'react'
+import {StyleProp, View, ViewStyle} from 'react-native'
 import {
-  Dimensions,
-  Keyboard,
-  Pressable,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native'
-import Animated, {useAnimatedStyle} from 'react-native-reanimated'
+  GestureHandlerRootView,
+  ScrollView,
+  TextInput as RNGHTextInput,
+} from 'react-native-gesture-handler'
+import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import BottomSheet, {
-  BottomSheetBackdropProps,
-  BottomSheetFlatList,
-  BottomSheetFlatListMethods,
-  BottomSheetScrollView,
-  BottomSheetScrollViewMethods,
-  BottomSheetTextInput,
-  BottomSheetView,
-  useBottomSheet,
-  WINDOW_HEIGHT,
-} from '@discord/bottom-sheet/src'
-import {BottomSheetFlatListProps} from '@discord/bottom-sheet/src/components/bottomSheetScrollable/types'

 import {logger} from '#/logger'
+import {isIOS} from '#/platform/detection'
 import {useDialogStateControlContext} from '#/state/dialogs'
+import {List, ListMethods, ListProps} from '#/view/com/util/List'
 import {atoms as a, flatten, useTheme} from '#/alf'
-import {Context} from '#/components/Dialog/context'
+import {Context, useDialogContext} from '#/components/Dialog/context'
 import {
  DialogControlProps,
  DialogInnerProps,
  DialogOuterProps,
 } from '#/components/Dialog/types'
 import {createInput} from '#/components/forms/TextField'
-import {FullWindowOverlay} from '#/components/FullWindowOverlay'
-import {Portal} from '#/components/Portal'
+import {Portal as DefaultPortal} from '#/components/Portal'
+import {BottomSheet, BottomSheetSnapPoint} from '../../../modules/bottom-sheet'

 export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
 export * from '#/components/Dialog/utils'
 // @ts-ignore
-export const Input = createInput(BottomSheetTextInput)
-
-function Backdrop(props: BottomSheetBackdropProps) {
-  const t = useTheme()
-  const bottomSheet = useBottomSheet()
-
-  const animatedStyle = useAnimatedStyle(() => {
-    const opacity =
-      (Math.abs(WINDOW_HEIGHT - props.animatedPosition.value) - 50) / 1000
-
-    return {
-      opacity: Math.min(Math.max(opacity, 0), 0.55),
-    }
-  })
-
-  const onPress = React.useCallback(() => {
-    bottomSheet.close()
-  }, [bottomSheet])
-
-  return (
-    <Animated.View
-      style={[
-        t.atoms.bg_contrast_300,
-        {
-          top: 0,
-          left: 0,
-          right: 0,
-          bottom: 0,
-          position: 'absolute',
-        },
-        animatedStyle,
-      ]}>
-      <Pressable
-        accessibilityRole="button"
-        accessibilityLabel="Dialog backdrop"
-        accessibilityHint="Press the backdrop to close the dialog"
-        style={{flex: 1}}
-        onPress={onPress}
-      />
-    </Animated.View>
-  )
-}
+export const Input = createInput(RNGHTextInput)

 export function Outer({
  children,
@@ -88,24 +35,17 @@ export function Outer({
  onClose,
  nativeOptions,
  testID,
+  Portal = DefaultPortal,
 }: React.PropsWithChildren<DialogOuterProps>) {
  const t = useTheme()
-  const sheet = React.useRef<BottomSheet>(null)
-  const sheetOptions = nativeOptions?.sheet || {}
-  const hasSnapPoints = !!sheetOptions.snapPoints
+  const ref = React.useRef<BottomSheet>(null)
  const insets = useSafeAreaInsets()
  const closeCallbacks = React.useRef<(() => void)[]>([])
  const {setDialogIsOpen} = useDialogStateControlContext()

-  /*
-   * Used to manage open/closed, but index is otherwise handled internally by `BottomSheet`
-   */
-  const [openIndex, setOpenIndex] = React.useState(-1)
-
-  /*
-   * `openIndex` is the index of the snap point to open the bottom sheet to. If >0, the bottom sheet is open.
-   */
-  const isOpen = openIndex > -1
+  const [snapPoint, setSnapPoint] = React.useState<BottomSheetSnapPoint>(
+    BottomSheetSnapPoint.Partial,
+  )

  const callQueuedCallbacks = React.useCallback(() => {
    for (const cb of closeCallbacks.current) {
@@ -119,25 +59,19 @@ export function Outer({
    closeCallbacks.current = []
  }, [])

-  const open = React.useCallback<DialogControlProps['open']>(
-    ({index} = {}) => {
-      // Run any leftover callbacks that might have been queued up before calling `.open()`
-      callQueuedCallbacks()
-
-      setDialogIsOpen(control.id, true)
-      // can be set to any index of `snapPoints`, but `0` is the first i.e. "open"
-      setOpenIndex(index || 0)
-      sheet.current?.snapToIndex(index || 0)
-    },
-    [setDialogIsOpen, control.id, callQueuedCallbacks],
-  )
+  const open = React.useCallback<DialogControlProps['open']>(() => {
+    // Run any leftover callbacks that might have been queued up before calling `.open()`
+    callQueuedCallbacks()
+    setDialogIsOpen(control.id, true)
+    ref.current?.present()
+  }, [setDialogIsOpen, control.id, callQueuedCallbacks])

  // This is the function that we call when we want to dismiss the dialog.
  const close = React.useCallback<DialogControlProps['close']>(cb => {
    if (typeof cb === 'function') {
      closeCallbacks.current.push(cb)
    }
-    sheet.current?.close()
+    ref.current?.dismiss()
  }, [])

  // This is the actual thing we are doing once we "confirm" the dialog. We want the dialog's close animation to
@@ -146,8 +80,6 @@ export function Outer({
    // This removes the dialog from our list of stored dialogs. Not super necessary on iOS, but on Android this
    // tells us that we need to toggle the accessibility overlay setting
    setDialogIsOpen(control.id, false)
-    setOpenIndex(-1)
-
    callQueuedCallbacks()
    onClose?.()
  }, [callQueuedCallbacks, control.id, onClose, setDialogIsOpen])
@@ -161,120 +93,82 @@ export function Outer({
    [open, close],
  )

-  React.useEffect(() => {
-    return () => {
-      setDialogIsOpen(control.id, false)
-    }
-  }, [control.id, setDialogIsOpen])
+  const context = React.useMemo(
+    () => ({close, isNativeDialog: true, nativeSnapPoint: snapPoint}),
+    [close, snapPoint],
+  )

-  const context = React.useMemo(() => ({close}), [close])
+  const Wrapper = isIOS ? View : GestureHandlerRootView

  return (
-    isOpen && (
-      <Portal>
-        <FullWindowOverlay>
-          <View
-            // iOS
-            accessibilityViewIsModal
-            // Android
-            importantForAccessibility="yes"
-            style={[a.absolute, a.inset_0]}
-            testID={testID}
-            onTouchMove={() => Keyboard.dismiss()}>
-            <BottomSheet
-              enableDynamicSizing={!hasSnapPoints}
-              enablePanDownToClose
-              keyboardBehavior="interactive"
-              android_keyboardInputMode="adjustResize"
-              keyboardBlurBehavior="restore"
-              topInset={insets.top}
-              {...sheetOptions}
-              snapPoints={sheetOptions.snapPoints || ['100%']}
-              ref={sheet}
-              index={openIndex}
-              backgroundStyle={{backgroundColor: 'transparent'}}
-              backdropComponent={Backdrop}
-              handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
-              handleStyle={{display: 'none'}}
-              onClose={onCloseAnimationComplete}>
-              <Context.Provider value={context}>
-                <View
-                  style={[
-                    a.absolute,
-                    a.inset_0,
-                    t.atoms.bg,
-                    {
-                      borderTopLeftRadius: 40,
-                      borderTopRightRadius: 40,
-                      height: Dimensions.get('window').height * 2,
-                    },
-                  ]}
-                />
-                {children}
-              </Context.Provider>
-            </BottomSheet>
-          </View>
-        </FullWindowOverlay>
-      </Portal>
-    )
+    <Portal>
+      <Context.Provider value={context}>
+        <BottomSheet
+          ref={ref}
+          topInset={30}
+          bottomInset={insets.bottom}
+          onSnapPointChange={e => {
+            setSnapPoint(e.nativeEvent.snapPoint)
+          }}
+          onStateChange={e => {
+            if (e.nativeEvent.state === 'closed') {
+              onCloseAnimationComplete()
+            }
+          }}
+          cornerRadius={20}
+          {...nativeOptions}>
+          <Wrapper testID={testID} style={[t.atoms.bg]}>
+            {children}
+          </Wrapper>
+        </BottomSheet>
+      </Context.Provider>
+    </Portal>
  )
 }

 export function Inner({children, style}: DialogInnerProps) {
  const insets = useSafeAreaInsets()
  return (
-    <BottomSheetView
+    <View
      style={[
-        a.py_xl,
        a.px_xl,
        {
-          paddingTop: 40,
-          borderTopLeftRadius: 40,
-          borderTopRightRadius: 40,
          paddingBottom: insets.bottom + a.pb_5xl.paddingBottom,
        },
-        flatten(style),
+        style,
      ]}>
      {children}
-    </BottomSheetView>
+    </View>
  )
 }

-export const ScrollableInner = React.forwardRef<
-  BottomSheetScrollViewMethods,
-  DialogInnerProps
->(function ScrollableInner({children, style}, ref) {
-  const insets = useSafeAreaInsets()
-  return (
-    <BottomSheetScrollView
-      keyboardShouldPersistTaps="handled"
-      style={[
-        a.flex_1, // main diff is this
-        a.p_xl,
-        a.h_full,
-        {
-          paddingTop: 40,
-          borderTopLeftRadius: 40,
-          borderTopRightRadius: 40,
-        },
-        style,
-      ]}
-      contentContainerStyle={a.pb_4xl}
-      ref={ref}>
-      {children}
-      <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
-    </BottomSheetScrollView>
-  )
-})
+export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
+  function ScrollableInner({children, style, ...props}, ref) {
+    const insets = useSafeAreaInsets()
+    const {nativeSnapPoint} = useDialogContext()
+    return (
+      <KeyboardAwareScrollView
+        style={[a.px_xl, style]}
+        ref={ref}
+        {...props}
+        bounces={nativeSnapPoint === BottomSheetSnapPoint.Full}
+        nestedScrollEnabled={true}
+        bottomOffset={30}
+        ScrollViewComponent={ScrollView}>
+        {children}
+        <View style={{height: insets.bottom + a.pt_5xl.paddingTop}} />
+      </KeyboardAwareScrollView>
+    )
+  },
+)

 export const InnerFlatList = React.forwardRef<
-  BottomSheetFlatListMethods,
-  BottomSheetFlatListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>}
+  ListMethods,
+  ListProps<any> & {webInnerStyle?: StyleProp<ViewStyle>}
 >(function InnerFlatList({style, contentContainerStyle, ...props}, ref) {
  const insets = useSafeAreaInsets()
-
  return (
-    <BottomSheetFlatList
+    <List
      keyboardShouldPersistTaps="handled"
      contentContainerStyle={[a.pb_4xl, flatten(contentContainerStyle)]}
      ListFooterComponent={
@@ -282,42 +176,11 @@ export const InnerFlatList = React.forwardRef<
      }
      ref={ref}
      {...props}
-      style={[
-        a.flex_1,
-        a.p_xl,
-        a.pt_0,
-        a.h_full,
-        {
-          marginTop: 40,
-        },
-        flatten(style),
-      ]}
+      style={style}
    />
  )
 })

-export function Handle() {
-  const t = useTheme()
-
-  return (
-    <View style={[a.absolute, a.w_full, a.align_center, a.z_10, {height: 40}]}>
-      <View
-        style={[
-          a.rounded_sm,
-          {
-            top: a.pt_lg.paddingTop,
-            width: 35,
-            height: 4,
-            alignSelf: 'center',
-            backgroundColor: t.palette.contrast_900,
-            opacity: 0.5,
-          },
-        ]}
-      />
-    </View>
-  )
-}
-
 export function Close() {
  return null
 }
@@ -103,6 +103,8 @@ export function Outer({
  const context = React.useMemo(
    () => ({
      close,
+      isNativeDialog: false,
+      nativeSnapPoint: 0,
    }),
    [close],
  )
@@ -229,10 +231,6 @@ export const InnerFlatList = React.forwardRef<
  )
 })

-export function Handle() {
-  return null
-}
-
 export function Close() {
  const {_} = useLingui()
  const {close} = React.useContext(Context)
@@ -4,9 +4,11 @@ import type {
  GestureResponderEvent,
  ScrollViewProps,
 } from 'react-native'
-import {BottomSheetProps} from '@discord/bottom-sheet/src'

 import {ViewStyleProp} from '#/alf'
+import {PortalComponent} from '#/components/Portal'
+import {BottomSheetViewProps} from '../../../modules/bottom-sheet'
+import {BottomSheetSnapPoint} from '../../../modules/bottom-sheet/src/BottomSheet.types'

 type A11yProps = Required<AccessibilityProps>

@@ -37,6 +39,8 @@ export type DialogControlProps = DialogControlRefProps & {

 export type DialogContextProps = {
  close: DialogControlProps['close']
+  isNativeDialog: boolean
+  nativeSnapPoint: BottomSheetSnapPoint
 }

 export type DialogControlOpenOptions = {
@@ -52,11 +56,10 @@ export type DialogControlOpenOptions = {
 export type DialogOuterProps = {
  control: DialogControlProps
  onClose?: () => void
-  nativeOptions?: {
-    sheet?: Omit<BottomSheetProps, 'children'>
-  }
+  nativeOptions?: Omit<BottomSheetViewProps, 'children'>
  webOptions?: {}
  testID?: string
+  Portal?: PortalComponent
 }

 type DialogInnerPropsBase<T> = React.PropsWithChildren<ViewStyleProp> & T
@@ -1,31 +0,0 @@
-import React from 'react'
-import {useKeyboardHandler} from 'react-native-keyboard-controller'
-import Animated, {
-  useAnimatedStyle,
-  useSharedValue,
-} from 'react-native-reanimated'
-
-export function KeyboardControllerPadding({maxHeight}: {maxHeight?: number}) {
-  const keyboardHeight = useSharedValue(0)
-
-  useKeyboardHandler(
-    {
-      onMove: e => {
-        'worklet'
-
-        if (maxHeight && e.height > maxHeight) {
-          keyboardHeight.value = maxHeight
-        } else {
-          keyboardHeight.value = e.height
-        }
-      },
-    },
-    [maxHeight],
-  )
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    height: keyboardHeight.value,
-  }))
-
-  return <Animated.View style={animatedStyle} />
-}
@@ -1,7 +0,0 @@
-export function KeyboardControllerPadding({
-  maxHeight: _,
-}: {
-  maxHeight?: number
-}) {
-  return null
-}
@@ -1,20 +1,19 @@
-import React, {useMemo, useCallback} from 'react'
+import React, {useCallback, useMemo} from 'react'
 import {ActivityIndicator, FlatList, View} from 'react-native'
+import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'

-import {useResolveUriQuery} from '#/state/queries/resolve-uri'
-import {useLikedByQuery} from '#/state/queries/post-liked-by'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
-
-import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
-import * as Dialog from '#/components/Dialog'
-import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {useLikedByQuery} from '#/state/queries/post-liked-by'
+import {useResolveUriQuery} from '#/state/queries/resolve-uri'
 import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {atoms as a, useTheme} from '#/alf'
+import * as Dialog from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'

 interface LikesDialogProps {
  control: Dialog.DialogOuterProps['control']
@@ -24,8 +23,6 @@ interface LikesDialogProps {
 export function LikesDialog(props: LikesDialogProps) {
  return (
    <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
      <LikesDialogInner {...props} />
    </Dialog.Outer>
  )
@@ -5,6 +5,7 @@ import {
  StyleProp,
  ViewStyle,
 } from 'react-native'
+import {TouchableWithoutFeedback} from 'react-native-gesture-handler'
 import {sanitizeUrl} from '@braintree/sanitize-url'
 import {StackActions, useLinkProps} from '@react-navigation/native'

@@ -24,6 +25,7 @@ import {useModalControls} from '#/state/modals'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
 import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf'
 import {Button, ButtonProps} from '#/components/Button'
+import {useDialogContext} from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {Text, TextProps} from '#/components/Typography'
 import {router} from '#/routes'
@@ -103,17 +105,17 @@ export function useLink({
          linkRequiresWarning(href, displayText),
      )

-      if (requiresWarning) {
+      if (isWeb) {
        e.preventDefault()
+      }

+      if (requiresWarning) {
        openModal({
          name: 'link-warning',
          text: displayText,
          href: href,
        })
      } else {
-        e.preventDefault()
-
        if (isExternal) {
          openLink(href)
        } else {
@@ -285,13 +287,49 @@ export function InlineLinkText({
    onOut: onPressOut,
  } = useInteractionState()
  const flattenedStyle = flatten(style) || {}
+  const {isNativeDialog} = useDialogContext()
+
+  const pressableProps = {
+    accessibilityLabel: label,
+    accessibilityHint: '',
+    accessibilityRole: 'link',
+    role: 'link',
+    onPress: download ? undefined : onPress,
+    onLongPress: onLongPress,
+    onPressIn: onPressIn,
+    onPressOut: onPressOut,
+  } as const
+
+  if (isNativeDialog) {
+    /* eslint-disable-next-line bsky-internal/avoid-unwrapped-text */
+    return (
+      <TouchableWithoutFeedback {...pressableProps}>
+        <Text
+          {...rest}
+          selectable={selectable}
+          style={[
+            {color: t.palette.primary_500},
+            (hovered || focused || pressed) &&
+              !disableUnderline && {
+                ...web({outline: 0}),
+                textDecorationLine: 'underline',
+                textDecorationColor:
+                  flattenedStyle.color ?? t.palette.primary_500,
+              },
+            flattenedStyle,
+            {lineHeight: 20},
+          ]}>
+          {children}
+        </Text>
+      </TouchableWithoutFeedback>
+    )
+  }

  return (
    <Text
      selectable={selectable}
-      accessibilityHint=""
-      accessibilityLabel={label}
      {...rest}
+      {...pressableProps}
      style={[
        {color: t.palette.primary_500},
        (hovered || focused || pressed) &&
@@ -302,16 +340,10 @@ export function InlineLinkText({
          },
        flattenedStyle,
      ]}
-      role="link"
-      onPress={download ? undefined : onPress}
-      onLongPress={onLongPress}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
      onFocus={onFocus}
      onBlur={onBlur}
      onMouseEnter={onHoverIn}
      onMouseLeave={onHoverOut}
-      accessibilityRole="link"
      href={href}
      {...web({
        hrefAttrs: {
@@ -1,10 +1,10 @@
 import React from 'react'
-import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'

-import {isNative} from 'platform/detection'
+import {isNative} from '#/platform/detection'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -18,6 +18,7 @@ import {
  ItemTextProps,
  TriggerProps,
 } from '#/components/Menu/types'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'

 export {
@@ -84,9 +85,9 @@ export function Outer({
  const context = React.useContext(Context)

  return (
-    <Dialog.Outer control={context.control}>
-      <Dialog.Handle />
-
+    <Dialog.Outer
+      control={context.control}
+      nativeOptions={{preventExpansion: true}}>
      {/* Re-wrap with context since Dialogs are portal-ed to root */}
      <Context.Provider value={context}>
        <Dialog.ScrollableInner label="Menu TODO">
@@ -112,19 +113,20 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
  } = useInteractionState()

  return (
-    <Pressable
+    <NormalizedRNGHPressable
      {...rest}
      accessibilityHint=""
      accessibilityLabel={label}
+      onFocus={onFocus}
+      onBlur={onBlur}
      onPress={e => {
+        control?.close()
        onPress(e)

        if (!e.defaultPrevented) {
          control?.close()
        }
      }}
-      onFocus={onFocus}
-      onBlur={onBlur}
      onPressIn={e => {
        onPressIn()
        rest.onPressIn?.(e)
@@ -149,7 +151,7 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
      <ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
        {children}
      </ItemContext.Provider>
-    </Pressable>
+    </NormalizedRNGHPressable>
  )
 }

@@ -5,12 +5,12 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {differenceInSeconds} from 'date-fns'

+import {HITSLOP_10} from '#/lib/constants'
 import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {isNative} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {HITSLOP_10} from 'lib/constants'
-import {sanitizeDisplayName} from 'lib/strings/display-names'
-import {useSession} from 'state/session'
+import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -78,7 +78,6 @@ export function NewskieDialog({
      </Button>

      <Dialog.Outer control={control}>
-        <Dialog.Handle />
        <Dialog.ScrollableInner
          label={_(msg`New user info dialog`)}
          style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
@@ -0,0 +1,130 @@
+import React from 'react'
+import {
+  GestureResponderEvent,
+  MeasureOnSuccessCallback,
+  NativeMouseEvent,
+  NativeSyntheticEvent,
+  PressableProps,
+} from 'react-native'
+import {Pressable as BSPressable} from 'react-native-gesture-handler'
+import {PressableEvent} from 'react-native-gesture-handler/lib/typescript/components/Pressable/PressableProps'
+
+function pressableEventToGestureResponderEvent(
+  event: PressableEvent,
+  target: NormalizedRNGHPressable,
+): GestureResponderEvent {
+  return {
+    nativeEvent: {
+      ...event.nativeEvent,
+      touches: [],
+      changedTouches: [],
+      identifier: event.nativeEvent.identifier.toString(),
+      target: event.nativeEvent.target.toString(),
+    },
+    // @ts-expect-error
+    target: target,
+    // @ts-expect-error
+    currentTarget: target,
+    preventDefault() {},
+    stopPropagation() {},
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    bubbles: false,
+    timeStamp: event.nativeEvent.timestamp,
+    isDefaultPrevented(): boolean {
+      return false
+    },
+    isPropagationStopped(): boolean {
+      return false
+    },
+    persist() {},
+    type: 'press',
+  }
+}
+
+function pressableEventToMouseEvent(
+  event: PressableEvent,
+  target: NormalizedRNGHPressable,
+): MouseEvent & NativeSyntheticEvent<NativeMouseEvent> {
+  return {
+    ...event.nativeEvent,
+    // @ts-expect-error
+    target: target,
+    // @ts-expect-error
+    currentTarget: target,
+    preventDefault() {},
+    stopPropagation() {},
+    cancelable: false,
+    defaultPrevented: false,
+    eventPhase: 0,
+    isTrusted: false,
+    bubbles: false,
+    timeStamp: event.nativeEvent.timestamp,
+  }
+}
+
+export class NormalizedRNGHPressable extends React.Component<PressableProps> {
+  static displayName = 'Pressable'
+
+  measure = (_: MeasureOnSuccessCallback) => {}
+
+  measureLayout = (_: number) => {}
+
+  measureInWindow = (
+    _: (x: number, y: number, width: number, height: number) => void,
+  ) => {}
+
+  setNativeProps = (_: PressableProps) => {}
+
+  focus = () => {}
+
+  blur = () => {}
+
+  onPress = (event: PressableEvent) => {
+    if (!this.props.onPress) return
+    this.props.onPress(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onLongPress = (event: PressableEvent) => {
+    if (!this.props.onLongPress) return
+    this.props.onLongPress(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onPressIn = (event: PressableEvent) => {
+    if (!this.props.onPressIn) return
+    this.props.onPressIn(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onPressOut = (event: PressableEvent) => {
+    if (!this.props.onPressOut) return
+    this.props.onPressOut(pressableEventToGestureResponderEvent(event, this))
+  }
+
+  onHoverIn = (event: PressableEvent) => {
+    if (!this.props.onHoverIn) return
+    this.props.onHoverIn(pressableEventToMouseEvent(event, this))
+  }
+
+  onHoverOut = (event: PressableEvent) => {
+    if (!this.props.onHoverOut) return
+    this.props.onHoverOut(pressableEventToMouseEvent(event, this))
+  }
+
+  render() {
+    return (
+      <BSPressable
+        accessible={true}
+        accessibilityRole="button"
+        {...this.props}
+        onPress={this.onPress}
+        onLongPress={this.onLongPress}
+        onPressIn={this.onPressIn}
+        onPressOut={this.onPressOut}
+        onHoverIn={this.onHoverIn}
+        onHoverOut={this.onHoverOut}
+      />
+    )
+  }
+}
@@ -0,0 +1,3 @@
+import {Pressable as NormalizedRNGHPressable} from 'react-native'
+
+export {NormalizedRNGHPressable}
@@ -12,6 +12,8 @@ type ComponentMap = {
  [id: string]: Component
 }

+export type PortalComponent = ({children}: {children?: React.ReactNode}) => null
+
 export function createPortalGroup() {
  const Context = React.createContext<ContextType>({
    outlet: null,
@@ -4,8 +4,9 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonColor, ButtonProps, ButtonText} from '#/components/Button'
+import {Button, ButtonColor, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import {PortalComponent} from '#/components/Portal'
 import {Text} from '#/components/Typography'

 export {
@@ -25,9 +26,11 @@ export function Outer({
  children,
  control,
  testID,
+  Portal,
 }: React.PropsWithChildren<{
  control: Dialog.DialogControlProps
  testID?: string
+  Portal?: PortalComponent
 }>) {
  const {gtMobile} = useBreakpoints()
  const titleId = React.useId()
@@ -39,10 +42,8 @@ export function Outer({
  )

  return (
-    <Dialog.Outer control={control} testID={testID}>
+    <Dialog.Outer control={control} testID={testID} Portal={Portal}>
      <Context.Provider value={context}>
-        <Dialog.Handle />
-
        <Dialog.ScrollableInner
          accessibilityLabelledBy={titleId}
          accessibilityDescribedBy={descriptionId}
@@ -141,7 +142,7 @@ export function Action({
   * Note: The dialog will close automatically when the action is pressed, you
   * should NOT close the dialog as a side effect of this method.
   */
-  onPress: ButtonProps['onPress']
+  onPress: (e: GestureResponderEvent) => void
  color?: ButtonColor
  /**
   * Optional i18n string. If undefined, it will default to "Confirm".
@@ -181,6 +182,7 @@ export function Basic({
  onConfirm,
  confirmButtonColor,
  showCancel = true,
+  Portal,
 }: React.PropsWithChildren<{
  control: Dialog.DialogOuterProps['control']
  title: string
@@ -194,12 +196,13 @@ export function Basic({
   * Note: The dialog will close automatically when the action is pressed, you
   * should NOT close the dialog as a side effect of this method.
   */
-  onConfirm: ButtonProps['onPress']
+  onConfirm: (e: GestureResponderEvent) => void
  confirmButtonColor?: ButtonColor
  showCancel?: boolean
+  Portal?: PortalComponent
 }>) {
  return (
-    <Outer control={control} testID="confirmModal">
+    <Outer control={control} testID="confirmModal" Portal={Portal}>
      <TitleText>{title}</TitleText>
      <DescriptionText>{description}</DescriptionText>
      <Actions>
@@ -4,7 +4,6 @@ import {AppBskyLabelerDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 import {getLabelingServiceTitle} from '#/lib/moderation'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, useButtonContext} from '#/components/Button'
@@ -16,6 +16,7 @@ import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
 import {Loader} from '#/components/Loader'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
 import {Text} from '#/components/Typography'
 import {ReportDialogProps} from './types'

@@ -153,7 +154,8 @@ export function SubmitView({
                <Toggle.Item
                  key={labeler.creator.did}
                  name={labeler.creator.did}
-                  label={title}>
+                  label={title}
+                  PressableComponent={NormalizedRNGHPressable}>
                  <LabelerToggle title={title} />
                </Toggle.Item>
              )
@@ -1,5 +1,6 @@
 import React from 'react'
 import {Pressable, View} from 'react-native'
+import {ScrollView} from 'react-native-gesture-handler'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

@@ -8,12 +9,10 @@ import {useMyLabelersQuery} from '#/state/queries/preferences'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'

 import {AppBskyLabelerDefs} from '@atproto/api'
-import {BottomSheetScrollViewMethods} from '@discord/bottom-sheet/src'

 import {atoms as a} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {useDelayedLoading} from '#/components/hooks/useDelayedLoading'
-import {useOnKeyboardDidShow} from '#/components/hooks/useOnKeyboard'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {SelectLabelerView} from './SelectLabelerView'
@@ -24,8 +23,6 @@ import {ReportDialogProps} from './types'
 export function ReportDialog(props: ReportDialogProps) {
  return (
    <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
      <ReportDialogInner {...props} />
    </Dialog.Outer>
  )
@@ -40,10 +37,7 @@ function ReportDialogInner(props: ReportDialogProps) {
  } = useMyLabelersQuery()
  const isLoading = useDelayedLoading(500, isLabelerLoading)

-  const ref = React.useRef<BottomSheetScrollViewMethods>(null)
-  useOnKeyboardDidShow(() => {
-    ref.current?.scrollToEnd({animated: true})
-  })
+  const ref = React.useRef<ScrollView>(null)

  return (
    <Dialog.ScrollableInner label={_(msg`Report dialog`)} ref={ref}>
@@ -1,18 +1,23 @@
 import React from 'react'
 import {View} from 'react-native'
 import QRCode from 'react-native-qrcode-styled'
-import ViewShot from 'react-native-view-shot'
+import type ViewShot from 'react-native-view-shot'
 import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {Trans} from '@lingui/macro'

-import {isWeb} from 'platform/detection'
-import {Logo} from 'view/icons/Logo'
-import {Logotype} from 'view/icons/Logotype'
+import {isWeb} from '#/platform/detection'
+import {Logo} from '#/view/icons/Logo'
+import {Logotype} from '#/view/icons/Logotype'
 import {useTheme} from '#/alf'
 import {atoms as a} from '#/alf'
 import {LinearGradientBackground} from '#/components/LinearGradientBackground'
 import {Text} from '#/components/Typography'

+const LazyViewShot = React.lazy(
+  // @ts-expect-error dynamic import
+  () => import('react-native-view-shot/src/index'),
+)
+
 interface Props {
  starterPack: AppBskyGraphDefs.StarterPackView
  link: string
@@ -29,7 +34,7 @@ export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
  }

  return (
-    <ViewShot ref={ref}>
+    <LazyViewShot ref={ref}>
      <LinearGradientBackground
        style={[
          {width: 300, minHeight: 390},
@@ -79,7 +84,7 @@ export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
          </Text>
        </View>
      </LinearGradientBackground>
-    </ViewShot>
+    </LazyViewShot>
  )
 })

@@ -1,6 +1,6 @@
 import React from 'react'
 import {View} from 'react-native'
-import ViewShot from 'react-native-view-shot'
+import type ViewShot from 'react-native-view-shot'
 import {requestMediaLibraryPermissionsAsync} from 'expo-image-picker'
 import {createAssetAsync} from 'expo-media-library'
 import * as Sharing from 'expo-sharing'
@@ -8,9 +8,9 @@ import {AppBskyGraphDefs, AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
-import {logEvent} from 'lib/statsig/statsig'
-import {isNative, isWeb} from 'platform/detection'
+import {isNative, isWeb} from '#/platform/detection'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -149,50 +149,57 @@ export function QrCodeDialog({

  return (
    <Dialog.Outer control={control}>
-      <Dialog.Handle />
      <Dialog.ScrollableInner
        label={_(msg`Create a QR code for a starter pack`)}>
        <View style={[a.flex_1, a.align_center, a.gap_5xl]}>
-          {!link ? (
-            <View style={[a.align_center, a.p_xl]}>
-              <Loader size="xl" />
-            </View>
-          ) : (
-            <>
-              <QrCode starterPack={starterPack} link={link} ref={ref} />
-              {isProcessing ? (
-                <View>
-                  <Loader size="xl" />
-                </View>
-              ) : (
-                <View
-                  style={[a.w_full, a.gap_md, isWeb && [a.flex_row_reverse]]}>
-                  <Button
-                    label={_(msg`Copy QR code`)}
-                    variant="solid"
-                    color="secondary"
-                    size="small"
-                    onPress={isWeb ? onCopyPress : onSharePress}>
-                    <ButtonText>
-                      {isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
-                    </ButtonText>
-                  </Button>
-                  <Button
-                    label={_(msg`Save QR code`)}
-                    variant="solid"
-                    color="secondary"
-                    size="small"
-                    onPress={onSavePress}>
-                    <ButtonText>
-                      <Trans>Save</Trans>
-                    </ButtonText>
-                  </Button>
-                </View>
-              )}
-            </>
-          )}
+          <React.Suspense fallback={<Loading />}>
+            {!link ? (
+              <Loading />
+            ) : (
+              <>
+                <QrCode starterPack={starterPack} link={link} ref={ref} />
+                {isProcessing ? (
+                  <View>
+                    <Loader size="xl" />
+                  </View>
+                ) : (
+                  <View
+                    style={[a.w_full, a.gap_md, isWeb && [a.flex_row_reverse]]}>
+                    <Button
+                      label={_(msg`Copy QR code`)}
+                      variant="solid"
+                      color="secondary"
+                      size="small"
+                      onPress={isWeb ? onCopyPress : onSharePress}>
+                      <ButtonText>
+                        {isWeb ? <Trans>Copy</Trans> : <Trans>Share</Trans>}
+                      </ButtonText>
+                    </Button>
+                    <Button
+                      label={_(msg`Save QR code`)}
+                      variant="solid"
+                      color="secondary"
+                      size="small"
+                      onPress={onSavePress}>
+                      <ButtonText>
+                        <Trans>Save</Trans>
+                      </ButtonText>
+                    </Button>
+                  </View>
+                )}
+              </>
+            )}
+          </React.Suspense>
        </View>
      </Dialog.ScrollableInner>
    </Dialog.Outer>
  )
 }
+
+function Loading() {
+  return (
+    <View style={[a.align_center, a.p_xl]}>
+      <Loader size="xl" />
+    </View>
+  )
+}
@@ -6,14 +6,14 @@ import {AppBskyGraphDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {saveImageToMediaLibrary} from '#/lib/media/manip'
+import {shareUrl} from '#/lib/sharing'
+import {logEvent} from '#/lib/statsig/statsig'
+import {getStarterPackOgCard} from '#/lib/strings/starter-pack'
 import {logger} from '#/logger'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {saveImageToMediaLibrary} from 'lib/media/manip'
-import {shareUrl} from 'lib/sharing'
-import {logEvent} from 'lib/statsig/statsig'
-import {getStarterPackOgCard} from 'lib/strings/starter-pack'
-import {isNative, isWeb} from 'platform/detection'
-import * as Toast from 'view/com/util/Toast'
+import {isNative, isWeb} from '#/platform/detection'
+import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {DialogControlProps} from '#/components/Dialog'
@@ -84,7 +84,6 @@ function ShareDialogInner({

  return (
    <>
-      <Dialog.Handle />
      <Dialog.ScrollableInner label={_(msg`Share link dialog`)}>
        {!imageLoaded || !link ? (
          <View style={[a.p_xl, a.align_center]}>
@@ -3,13 +3,13 @@ import type {ListRenderItemInfo} from 'react-native'
 import {View} from 'react-native'
 import {AppBskyActorDefs, ModerationOpts} from '@atproto/api'
 import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
-import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
-import {isWeb} from 'platform/detection'
-import {useSession} from 'state/session'
+import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
+import {isWeb} from '#/platform/detection'
+import {useSession} from '#/state/session'
+import {ListMethods} from '#/view/com/util/List'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, native, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -45,7 +45,7 @@ export function WizardEditListDialog({
  const {currentAccount} = useSession()
  const initialNumToRender = useInitialNumToRender()

-  const listRef = useRef<BottomSheetFlatListMethods>(null)
+  const listRef = useRef<ListMethods>(null)

  const getData = () => {
    if (state.currentStep === 'Feeds') return state.feeds
@@ -76,11 +76,7 @@ export function WizardEditListDialog({
    )

  return (
-    <Dialog.Outer
-      control={control}
-      testID="newChatDialog"
-      nativeOptions={{sheet: {snapPoints: ['95%']}}}>
-      <Dialog.Handle />
+    <Dialog.Outer control={control} testID="newChatDialog">
      <Dialog.InnerFlatList
        ref={listRef}
        data={getData()}
@@ -103,13 +99,7 @@ export function WizardEditListDialog({
                      height: 48,
                    },
                  ]
-                : [
-                    a.pb_sm,
-                    a.align_end,
-                    {
-                      height: 68,
-                    },
-                  ],
+                : [a.pb_sm, a.align_end],
            ]}>
            <View style={{width: 60}} />
            <Text style={[a.font_bold, a.text_xl]}>
@@ -143,8 +133,6 @@ export function WizardEditListDialog({
            paddingHorizontal: 0,
            marginTop: 0,
            paddingTop: 0,
-            borderTopLeftRadius: 40,
-            borderTopRightRadius: 40,
          }),
        ]}
        webInnerStyle={[a.py_0, {maxWidth: 500, minWidth: 200}]}
@@ -84,8 +84,6 @@ export function TagMenu({
      {children}

      <Dialog.Outer control={control}>
-        <Dialog.Handle />
-
        <Dialog.Inner label={_(msg`Tag menu: ${displayTag}`)}>
          {isPreferencesLoading ? (
            <View style={[a.w_full, a.align_center]}>
@@ -170,7 +170,6 @@ function WhoCanReplyDialog({
  const {_} = useLingui()
  return (
    <Dialog.Outer control={control}>
-      <Dialog.Handle />
      <Dialog.ScrollableInner
        label={_(msg`Dialog: adjust who can interact with this post`)}
        style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
@@ -30,8 +30,6 @@ export function BirthDateSettingsDialog({

  return (
    <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
      <Dialog.ScrollableInner label={_(msg`My Birthday`)}>
        <View style={[a.gap_sm, a.pb_lg]}>
          <Text style={[a.text_2xl, a.font_bold]}>
@@ -27,7 +27,6 @@ type EmbedDialogProps = {
 let EmbedDialog = ({control, ...rest}: EmbedDialogProps): React.ReactNode => {
  return (
    <Dialog.Outer control={control}>
-      <Dialog.Handle />
      <EmbedDialogInner {...rest} />
    </Dialog.Outer>
  )
@@ -49,8 +49,6 @@ export function EmbedConsentDialog({

  return (
    <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
      <Dialog.ScrollableInner
        label={_(msg`External Media`)}
        style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>
@@ -22,7 +22,6 @@ import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as TextField from '#/components/forms/TextField'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
 import {Button, ButtonText} from '../Button'
-import {Handle} from '../Dialog'
 import {useThrottledValue} from '../hooks/useThrottledValue'
 import {ListFooter, ListMaybePlaceholder} from '../Lists'
 import {GifPreview} from './GifSelect.shared'
@@ -70,7 +69,6 @@ export function GifSelectDialog({
      aria-modal
      accessibilityViewIsModal>
      <View style={[a.flex_1, t.atoms.bg]}>
-        <Handle />
        <ErrorBoundary renderError={renderErrorBoundary}>
          <GifList onSelectGif={onSelectGif} close={close} />
        </ErrorBoundary>
@@ -6,7 +6,6 @@ import React, {
  useState,
 } from 'react'
 import {TextInput, View} from 'react-native'
-import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

@@ -19,6 +18,7 @@ import {
 } 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 {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
@@ -57,11 +57,7 @@ export function GifSelectDialog({
  )

  return (
-    <Dialog.Outer
-      control={control}
-      nativeOptions={{sheet: {snapPoints: ['100%']}}}
-      onClose={onClose}>
-      <Dialog.Handle />
+    <Dialog.Outer control={control} onClose={onClose}>
      <ErrorBoundary renderError={renderErrorBoundary}>
        <GifList control={control} onSelectGif={onSelectGif} />
      </ErrorBoundary>
@@ -80,7 +76,7 @@ function GifList({
  const t = useTheme()
  const {gtMobile} = useBreakpoints()
  const textInputRef = useRef<TextInput>(null)
-  const listRef = useRef<BottomSheetFlatListMethods>(null)
+  const listRef = useRef<ListMethods>(null)
  const [undeferredSearch, setSearch] = useState('')
  const search = useThrottledValue(undeferredSearch, 500)

@@ -30,16 +30,19 @@ import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/P
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Loader} from '#/components/Loader'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
+import {createPortalGroup} from '#/components/Portal'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'

 const ONE_DAY = 24 * 60 * 60 * 1000

+const Portal = createPortalGroup()
+
 export function MutedWordsDialog() {
  const {mutedWordsDialogControl: control} = useGlobalDialogsControlContext()
  return (
    <Dialog.Outer control={control}>
-      <Dialog.Handle />
      <MutedWordsInner />
    </Dialog.Outer>
  )
@@ -105,307 +108,356 @@ function MutedWordsInner() {
  }, [_, field, targets, addMutedWord, setField, durations, excludeFollowing])

  return (
-    <Dialog.ScrollableInner label={_(msg`Manage your muted words and tags`)}>
-      <View>
-        <Text
-          style={[a.text_md, a.font_bold, a.pb_sm, t.atoms.text_contrast_high]}>
-          <Trans>Add muted words and tags</Trans>
-        </Text>
-        <Text style={[a.pb_lg, a.leading_snug, t.atoms.text_contrast_medium]}>
-          <Trans>
-            Posts can be muted based on their text, their tags, or both. We
-            recommend avoiding common words that appear in many posts, since it
-            can result in no posts being shown.
-          </Trans>
-        </Text>
-
-        <View style={[a.pb_sm]}>
-          <Dialog.Input
-            autoCorrect={false}
-            autoCapitalize="none"
-            autoComplete="off"
-            label={_(msg`Enter a word or tag`)}
-            placeholder={_(msg`Enter a word or tag`)}
-            value={field}
-            onChangeText={value => {
-              if (error) {
-                setError('')
-              }
-              setField(value)
-            }}
-            onSubmitEditing={submit}
-          />
-        </View>
-
-        <View style={[a.pb_xl, a.gap_sm]}>
-          <Toggle.Group
-            label={_(msg`Select how long to mute this word for.`)}
-            type="radio"
-            values={durations}
-            onChange={setDurations}>
-            <Text
-              style={[
-                a.pb_xs,
-                a.text_sm,
-                a.font_bold,
-                t.atoms.text_contrast_medium,
-              ]}>
-              <Trans>Duration:</Trans>
-            </Text>
-
-            <View
-              style={[
-                gtMobile && [a.flex_row, a.align_center, a.justify_start],
-                a.gap_sm,
-              ]}>
-              <View
-                style={[
-                  a.flex_1,
-                  a.flex_row,
-                  a.justify_start,
-                  a.align_center,
-                  a.gap_sm,
-                ]}>
-                <Toggle.Item
-                  label={_(msg`Mute this word until you unmute it`)}
-                  name="forever"
-                  style={[a.flex_1]}>
-                  <TargetToggle>
-                    <View
-                      style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-                      <Toggle.Radio />
-                      <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                        <Trans>Forever</Trans>
-                      </Toggle.LabelText>
-                    </View>
-                  </TargetToggle>
-                </Toggle.Item>
-
-                <Toggle.Item
-                  label={_(msg`Mute this word for 24 hours`)}
-                  name="24_hours"
-                  style={[a.flex_1]}>
-                  <TargetToggle>
-                    <View
-                      style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-                      <Toggle.Radio />
-                      <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                        <Trans>24 hours</Trans>
-                      </Toggle.LabelText>
-                    </View>
-                  </TargetToggle>
-                </Toggle.Item>
-              </View>
-
-              <View
-                style={[
-                  a.flex_1,
-                  a.flex_row,
-                  a.justify_start,
-                  a.align_center,
-                  a.gap_sm,
-                ]}>
-                <Toggle.Item
-                  label={_(msg`Mute this word for 7 days`)}
-                  name="7_days"
-                  style={[a.flex_1]}>
-                  <TargetToggle>
-                    <View
-                      style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-                      <Toggle.Radio />
-                      <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                        <Trans>7 days</Trans>
-                      </Toggle.LabelText>
-                    </View>
-                  </TargetToggle>
-                </Toggle.Item>
-
-                <Toggle.Item
-                  label={_(msg`Mute this word for 30 days`)}
-                  name="30_days"
-                  style={[a.flex_1]}>
-                  <TargetToggle>
-                    <View
-                      style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-                      <Toggle.Radio />
-                      <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                        <Trans>30 days</Trans>
-                      </Toggle.LabelText>
-                    </View>
-                  </TargetToggle>
-                </Toggle.Item>
-              </View>
-            </View>
-          </Toggle.Group>
-
-          <Toggle.Group
-            label={_(msg`Select what content this mute word should apply to.`)}
-            type="radio"
-            values={targets}
-            onChange={setTargets}>
-            <Text
-              style={[
-                a.pb_xs,
-                a.text_sm,
-                a.font_bold,
-                t.atoms.text_contrast_medium,
-              ]}>
-              <Trans>Mute in:</Trans>
-            </Text>
-
-            <View style={[a.flex_row, a.align_center, a.gap_sm, a.flex_wrap]}>
-              <Toggle.Item
-                label={_(msg`Mute this word in post text and tags`)}
-                name="content"
-                style={[a.flex_1]}>
-                <TargetToggle>
-                  <View
-                    style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-                    <Toggle.Radio />
-                    <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                      <Trans>Text & tags</Trans>
-                    </Toggle.LabelText>
-                  </View>
-                  <PageText size="sm" />
-                </TargetToggle>
-              </Toggle.Item>
-
-              <Toggle.Item
-                label={_(msg`Mute this word in tags only`)}
-                name="tag"
-                style={[a.flex_1]}>
-                <TargetToggle>
-                  <View
-                    style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-                    <Toggle.Radio />
-                    <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                      <Trans>Tags only</Trans>
-                    </Toggle.LabelText>
-                  </View>
-                  <Hashtag size="sm" />
-                </TargetToggle>
-              </Toggle.Item>
-            </View>
-          </Toggle.Group>
-
-          <View>
-            <Text
-              style={[
-                a.pb_xs,
-                a.text_sm,
-                a.font_bold,
-                t.atoms.text_contrast_medium,
-              ]}>
-              <Trans>Options:</Trans>
-            </Text>
-            <Toggle.Item
-              label={_(msg`Do not apply this mute word to users you follow`)}
-              name="exclude_following"
-              style={[a.flex_row, a.justify_between]}
-              value={excludeFollowing}
-              onChange={setExcludeFollowing}>
-              <TargetToggle>
-                <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-                  <Toggle.Checkbox />
-                  <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
-                    <Trans>Exclude users you follow</Trans>
-                  </Toggle.LabelText>
-                </View>
-              </TargetToggle>
-            </Toggle.Item>
-          </View>
-
-          <View style={[a.pt_xs]}>
-            <Button
-              disabled={isPending || !field}
-              label={_(msg`Add mute word for configured settings`)}
-              size="large"
-              color="primary"
-              variant="solid"
-              style={[]}
-              onPress={submit}>
-              <ButtonText>
-                <Trans>Add</Trans>
-              </ButtonText>
-              <ButtonIcon icon={isPending ? Loader : Plus} position="right" />
-            </Button>
-          </View>
-
-          {error && (
-            <View
-              style={[
-                a.mb_lg,
-                a.flex_row,
-                a.rounded_sm,
-                a.p_md,
-                a.mb_xs,
-                t.atoms.bg_contrast_25,
-                {
-                  backgroundColor: t.palette.negative_400,
-                },
-              ]}>
-              <Text
-                style={[
-                  a.italic,
-                  {color: t.palette.white},
-                  native({marginTop: 2}),
-                ]}>
-                {error}
-              </Text>
-            </View>
-          )}
-        </View>
-
-        <Divider />
-
-        <View style={[a.pt_2xl]}>
+    <Portal.Provider>
+      <Dialog.ScrollableInner label={_(msg`Manage your muted words and tags`)}>
+        <View>
          <Text
            style={[
              a.text_md,
              a.font_bold,
-              a.pb_md,
+              a.pb_sm,
              t.atoms.text_contrast_high,
            ]}>
-            <Trans>Your muted words</Trans>
+            <Trans>Add muted words and tags</Trans>
+          </Text>
+          <Text style={[a.pb_lg, a.leading_snug, t.atoms.text_contrast_medium]}>
+            <Trans>
+              Posts can be muted based on their text, their tags, or both. We
+              recommend avoiding common words that appear in many posts, since
+              it can result in no posts being shown.
+            </Trans>
          </Text>

-          {isPreferencesLoading ? (
-            <Loader />
-          ) : preferencesError || !preferences ? (
-            <View
-              style={[a.py_md, a.px_lg, a.rounded_md, t.atoms.bg_contrast_25]}>
-              <Text style={[a.italic, t.atoms.text_contrast_high]}>
-                <Trans>
-                  We're sorry, but we weren't able to load your muted words at
-                  this time. Please try again.
-                </Trans>
+          <View style={[a.pb_sm]}>
+            <Dialog.Input
+              autoCorrect={false}
+              autoCapitalize="none"
+              autoComplete="off"
+              label={_(msg`Enter a word or tag`)}
+              placeholder={_(msg`Enter a word or tag`)}
+              value={field}
+              onChangeText={value => {
+                if (error) {
+                  setError('')
+                }
+                setField(value)
+              }}
+              onSubmitEditing={submit}
+            />
+          </View>
+
+          <View style={[a.pb_xl, a.gap_sm]}>
+            <Toggle.Group
+              label={_(msg`Select how long to mute this word for.`)}
+              type="radio"
+              values={durations}
+              onChange={setDurations}>
+              <Text
+                style={[
+                  a.pb_xs,
+                  a.text_sm,
+                  a.font_bold,
+                  t.atoms.text_contrast_medium,
+                ]}>
+                <Trans>Duration:</Trans>
              </Text>
-            </View>
-          ) : preferences.moderationPrefs.mutedWords.length ? (
-            [...preferences.moderationPrefs.mutedWords]
-              .reverse()
-              .map((word, i) => (
-                <MutedWordRow
-                  key={word.value + i}
-                  word={word}
-                  style={[i % 2 === 0 && t.atoms.bg_contrast_25]}
-                />
-              ))
-          ) : (
-            <View
-              style={[a.py_md, a.px_lg, a.rounded_md, t.atoms.bg_contrast_25]}>
-              <Text style={[a.italic, t.atoms.text_contrast_high]}>
-                <Trans>You haven't muted any words or tags yet</Trans>
+
+              <View
+                style={[
+                  gtMobile && [a.flex_row, a.align_center, a.justify_start],
+                  a.gap_sm,
+                ]}>
+                <View
+                  style={[
+                    a.flex_1,
+                    a.flex_row,
+                    a.justify_start,
+                    a.align_center,
+                    a.gap_sm,
+                  ]}>
+                  <Toggle.Item
+                    label={_(msg`Mute this word until you unmute it`)}
+                    name="forever"
+                    style={[a.flex_1]}
+                    PressableComponent={NormalizedRNGHPressable}>
+                    <TargetToggle>
+                      <View
+                        style={[
+                          a.flex_1,
+                          a.flex_row,
+                          a.align_center,
+                          a.gap_sm,
+                        ]}>
+                        <Toggle.Radio />
+                        <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
+                          <Trans>Forever</Trans>
+                        </Toggle.LabelText>
+                      </View>
+                    </TargetToggle>
+                  </Toggle.Item>
+
+                  <Toggle.Item
+                    label={_(msg`Mute this word for 24 hours`)}
+                    name="24_hours"
+                    style={[a.flex_1]}
+                    PressableComponent={NormalizedRNGHPressable}>
+                    <TargetToggle>
+                      <View
+                        style={[
+                          a.flex_1,
+                          a.flex_row,
+                          a.align_center,
+                          a.gap_sm,
+                        ]}>
+                        <Toggle.Radio />
+                        <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
+                          <Trans>24 hours</Trans>
+                        </Toggle.LabelText>
+                      </View>
+                    </TargetToggle>
+                  </Toggle.Item>
+                </View>
+
+                <View
+                  style={[
+                    a.flex_1,
+                    a.flex_row,
+                    a.justify_start,
+                    a.align_center,
+                    a.gap_sm,
+                  ]}>
+                  <Toggle.Item
+                    label={_(msg`Mute this word for 7 days`)}
+                    name="7_days"
+                    style={[a.flex_1]}
+                    PressableComponent={NormalizedRNGHPressable}>
+                    <TargetToggle>
+                      <View
+                        style={[
+                          a.flex_1,
+                          a.flex_row,
+                          a.align_center,
+                          a.gap_sm,
+                        ]}>
+                        <Toggle.Radio />
+                        <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
+                          <Trans>7 days</Trans>
+                        </Toggle.LabelText>
+                      </View>
+                    </TargetToggle>
+                  </Toggle.Item>
+
+                  <Toggle.Item
+                    label={_(msg`Mute this word for 30 days`)}
+                    name="30_days"
+                    style={[a.flex_1]}
+                    PressableComponent={NormalizedRNGHPressable}>
+                    <TargetToggle>
+                      <View
+                        style={[
+                          a.flex_1,
+                          a.flex_row,
+                          a.align_center,
+                          a.gap_sm,
+                        ]}>
+                        <Toggle.Radio />
+                        <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
+                          <Trans>30 days</Trans>
+                        </Toggle.LabelText>
+                      </View>
+                    </TargetToggle>
+                  </Toggle.Item>
+                </View>
+              </View>
+            </Toggle.Group>
+
+            <Toggle.Group
+              label={_(
+                msg`Select what content this mute word should apply to.`,
+              )}
+              type="radio"
+              values={targets}
+              onChange={setTargets}>
+              <Text
+                style={[
+                  a.pb_xs,
+                  a.text_sm,
+                  a.font_bold,
+                  t.atoms.text_contrast_medium,
+                ]}>
+                <Trans>Mute in:</Trans>
              </Text>
+
+              <View style={[a.flex_row, a.align_center, a.gap_sm, a.flex_wrap]}>
+                <Toggle.Item
+                  label={_(msg`Mute this word in post text and tags`)}
+                  name="content"
+                  style={[a.flex_1]}
+                  PressableComponent={NormalizedRNGHPressable}>
+                  <TargetToggle>
+                    <View
+                      style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
+                      <Toggle.Radio />
+                      <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
+                        <Trans>Text & tags</Trans>
+                      </Toggle.LabelText>
+                    </View>
+                    <PageText size="sm" />
+                  </TargetToggle>
+                </Toggle.Item>
+
+                <Toggle.Item
+                  label={_(msg`Mute this word in tags only`)}
+                  name="tag"
+                  style={[a.flex_1]}
+                  PressableComponent={NormalizedRNGHPressable}>
+                  <TargetToggle>
+                    <View
+                      style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
+                      <Toggle.Radio />
+                      <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
+                        <Trans>Tags only</Trans>
+                      </Toggle.LabelText>
+                    </View>
+                    <Hashtag size="sm" />
+                  </TargetToggle>
+                </Toggle.Item>
+              </View>
+            </Toggle.Group>
+
+            <View>
+              <Text
+                style={[
+                  a.pb_xs,
+                  a.text_sm,
+                  a.font_bold,
+                  t.atoms.text_contrast_medium,
+                ]}>
+                <Trans>Options:</Trans>
+              </Text>
+              <Toggle.Item
+                label={_(msg`Do not apply this mute word to users you follow`)}
+                name="exclude_following"
+                style={[a.flex_row, a.justify_between]}
+                value={excludeFollowing}
+                onChange={setExcludeFollowing}
+                PressableComponent={NormalizedRNGHPressable}>
+                <TargetToggle>
+                  <View
+                    style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
+                    <Toggle.Checkbox />
+                    <Toggle.LabelText style={[a.flex_1, a.leading_tight]}>
+                      <Trans>Exclude users you follow</Trans>
+                    </Toggle.LabelText>
+                  </View>
+                </TargetToggle>
+              </Toggle.Item>
            </View>
-          )}
+
+            <View style={[a.pt_xs]}>
+              <Button
+                disabled={isPending || !field}
+                label={_(msg`Add mute word for configured settings`)}
+                size="large"
+                color="primary"
+                variant="solid"
+                style={[]}
+                onPress={submit}>
+                <ButtonText>
+                  <Trans>Add</Trans>
+                </ButtonText>
+                <ButtonIcon icon={isPending ? Loader : Plus} position="right" />
+              </Button>
+            </View>
+
+            {error && (
+              <View
+                style={[
+                  a.mb_lg,
+                  a.flex_row,
+                  a.rounded_sm,
+                  a.p_md,
+                  a.mb_xs,
+                  t.atoms.bg_contrast_25,
+                  {
+                    backgroundColor: t.palette.negative_400,
+                  },
+                ]}>
+                <Text
+                  style={[
+                    a.italic,
+                    {color: t.palette.white},
+                    native({marginTop: 2}),
+                  ]}>
+                  {error}
+                </Text>
+              </View>
+            )}
+          </View>
+
+          <Divider />
+
+          <View style={[a.pt_2xl]}>
+            <Text
+              style={[
+                a.text_md,
+                a.font_bold,
+                a.pb_md,
+                t.atoms.text_contrast_high,
+              ]}>
+              <Trans>Your muted words</Trans>
+            </Text>
+
+            {isPreferencesLoading ? (
+              <Loader />
+            ) : preferencesError || !preferences ? (
+              <View
+                style={[
+                  a.py_md,
+                  a.px_lg,
+                  a.rounded_md,
+                  t.atoms.bg_contrast_25,
+                ]}>
+                <Text style={[a.italic, t.atoms.text_contrast_high]}>
+                  <Trans>
+                    We're sorry, but we weren't able to load your muted words at
+                    this time. Please try again.
+                  </Trans>
+                </Text>
+              </View>
+            ) : preferences.moderationPrefs.mutedWords.length ? (
+              [...preferences.moderationPrefs.mutedWords]
+                .reverse()
+                .map((word, i) => (
+                  <MutedWordRow
+                    key={word.value + i}
+                    word={word}
+                    style={[i % 2 === 0 && t.atoms.bg_contrast_25]}
+                  />
+                ))
+            ) : (
+              <View
+                style={[
+                  a.py_md,
+                  a.px_lg,
+                  a.rounded_md,
+                  t.atoms.bg_contrast_25,
+                ]}>
+                <Text style={[a.italic, t.atoms.text_contrast_high]}>
+                  <Trans>You haven't muted any words or tags yet</Trans>
+                </Text>
+              </View>
+            )}
+          </View>
+
+          {isNative && <View style={{height: 20}} />}
        </View>

-        {isNative && <View style={{height: 20}} />}
-      </View>
+        <Dialog.Close />
+      </Dialog.ScrollableInner>

-      <Dialog.Close />
-    </Dialog.ScrollableInner>
+      <Portal.Outlet />
+    </Portal.Provider>
  )
 }

@@ -437,6 +489,7 @@ function MutedWordRow({
        onConfirm={remove}
        confirmButtonCta={_(msg`Remove`)}
        confirmButtonColor="negative"
+        Portal={Portal.Portal}
      />

      <View
@@ -37,6 +37,8 @@ import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {Loader} from '#/components/Loader'
+import {NormalizedRNGHPressable} from '#/components/NormalizedRNGHPressable'
+import {PortalComponent} from '#/components/Portal'
 import {Text} from '#/components/Typography'

 export type PostInteractionSettingsFormProps = {
@@ -54,14 +56,15 @@ export type PostInteractionSettingsFormProps = {

 export function PostInteractionSettingsControlledDialog({
  control,
+  Portal,
  ...rest
 }: PostInteractionSettingsFormProps & {
  control: Dialog.DialogControlProps
+  Portal?: PortalComponent
 }) {
  const {_} = useLingui()
  return (
-    <Dialog.Outer control={control}>
-      <Dialog.Handle />
+    <Dialog.Outer control={control} Portal={Portal}>
      <Dialog.ScrollableInner
        label={_(msg`Edit post interaction settings`)}
        style={[{maxWidth: 500}, a.w_full]}>
@@ -96,7 +99,6 @@ export function PostInteractionSettingsDialog(
 ) {
  return (
    <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
      <PostInteractionSettingsDialogControlledInner {...props} />
    </Dialog.Outer>
  )
@@ -231,7 +233,6 @@ export function PostInteractionSettingsForm({
 }: PostInteractionSettingsFormProps) {
  const t = useTheme()
  const {_} = useLingui()
-  const control = Dialog.useDialogContext()
  const {data: lists} = useMyListsQuery('curate')
  const [quotesEnabled, setQuotesEnabled] = React.useState(
    !(
@@ -305,7 +306,8 @@ export function PostInteractionSettingsForm({
              }
              value={quotesEnabled}
              onChange={onChangeQuotesEnabled}
-              style={[, a.justify_between, a.pt_xs]}>
+              style={[, a.justify_between, a.pt_xs]}
+              PressableComponent={NormalizedRNGHPressable}>
              <Text style={[t.atoms.text_contrast_medium]}>
                {quotesEnabled ? (
                  <Trans>Quote posts enabled</Trans>
@@ -437,7 +439,6 @@ export function PostInteractionSettingsForm({
      <Button
        label={_(msg`Save`)}
        onPress={onSave}
-        onAccessibilityEscape={control.close}
        color="primary"
        size="large"
        variant="solid"
@@ -18,7 +18,6 @@ export function SigninDialog() {
  const {signinDialogControl: control} = useGlobalDialogsControlContext()
  return (
    <Dialog.Outer control={control}>
-      <Dialog.Handle />
      <SigninDialogInner control={control} />
    </Dialog.Outer>
  )
@@ -42,8 +42,6 @@ export function SwitchAccountDialog({

  return (
    <Dialog.Outer control={control}>
-      <Dialog.Handle />
-
      <Dialog.ScrollableInner label={_(msg`Switch Account`)}>
        <View style={[a.gap_lg]}>
          <Text style={[a.text_2xl, a.font_bold]}>
@@ -43,8 +43,6 @@ export function NeueTypography() {

  return (
    <Dialog.Outer control={control} onClose={onClose}>
-      <Dialog.Handle />
-
      <Dialog.ScrollableInner label={_(msg`Introducing new font settings`)}>
        <View style={[a.gap_xl]}>
          <View style={[a.gap_md]}>
@@ -41,7 +41,7 @@ const queuedNuxs: {
    id: Nux.NeueTypography,
    enabled(props) {
      if (props.currentProfile.createdAt) {
-        if (new Date(props.currentProfile.createdAt) < new Date('2024-09-25')) {
+        if (new Date(props.currentProfile.createdAt) < new Date('2024-10-01')) {
          return true
        }
      }
@@ -136,7 +136,7 @@ let ConvoMenu = ({
          <Menu.Outer>
            <Menu.Item
              label={_(msg`Leave conversation`)}
-              onPress={leaveConvoControl.open}>
+              onPress={() => leaveConvoControl.open()}>
              <Menu.ItemText>
                <Trans>Leave conversation</Trans>
              </Menu.ItemText>
@@ -195,7 +195,7 @@ let ConvoMenu = ({
              </Menu.Item>
              <Menu.Item
                label={_(msg`Report conversation`)}
-                onPress={reportControl.open}>
+                onPress={() => reportControl.open()}>
                <Menu.ItemText>
                  <Trans>Report conversation</Trans>
                </Menu.ItemText>
@@ -206,7 +206,7 @@ let ConvoMenu = ({
            <Menu.Group>
              <Menu.Item
                label={_(msg`Leave conversation`)}
-                onPress={leaveConvoControl.open}>
+                onPress={() => leaveConvoControl.open()}>
                <Menu.ItemText>
                  <Trans>Leave conversation</Trans>
                </Menu.ItemText>
@@ -7,11 +7,11 @@ import {useLingui} from '@lingui/react'

 import {richTextToString} from '#/lib/strings/rich-text-helpers'
 import {getTranslatorLink} from '#/locale/helpers'
+import {isWeb} from '#/platform/detection'
+import {useConvoActive} from '#/state/messages/convo'
 import {useLanguagePrefs} from '#/state/preferences'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
-import {isWeb} from 'platform/detection'
-import {useConvoActive} from 'state/messages/convo'
-import {useSession} from 'state/session'
+import {useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {ReportDialog} from '#/components/dms/ReportDialog'
@@ -120,7 +120,7 @@ export let MessageMenu = ({
            <Menu.Item
              testID="messageDropdownDeleteBtn"
              label={_(msg`Delete message for me`)}
-              onPress={deleteControl.open}>
+              onPress={() => deleteControl.open()}>
              <Menu.ItemText>{_(msg`Delete for me`)}</Menu.ItemText>
              <Menu.ItemIcon icon={Trash} position="right" />
            </Menu.Item>
@@ -128,7 +128,7 @@ export let MessageMenu = ({
              <Menu.Item
                testID="messageDropdownReportBtn"
                label={_(msg`Report message`)}
-                onPress={reportControl.open}>
+                onPress={() => reportControl.open()}>
                <Menu.ItemText>{_(msg`Report`)}</Menu.ItemText>
                <Menu.ItemIcon icon={Warning} position="right" />
              </Menu.Item>
@@ -1,175 +0,0 @@
-import React, {useCallback, useEffect} from 'react'
-import {View} from 'react-native'
-import {ChatBskyActorDeclaration} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useUpdateActorDeclaration} from '#/state/queries/messages/actor-declaration'
-import {useProfileQuery} from '#/state/queries/profile'
-import {useSession} from '#/state/session'
-import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, useTheme, web} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
-import * as Dialog from '#/components/Dialog'
-import * as Toggle from '#/components/forms/Toggle'
-import {Message_Stroke2_Corner0_Rounded} from '#/components/icons/Message'
-import {Text} from '#/components/Typography'
-
-export function MessagesNUX() {
-  const control = Dialog.useDialogControl()
-
-  const {currentAccount} = useSession()
-  const {data: profile} = useProfileQuery({
-    did: currentAccount!.did,
-  })
-
-  useEffect(() => {
-    if (profile && typeof profile.associated?.chat === 'undefined') {
-      const timeout = setTimeout(() => {
-        control.open()
-      }, 1000)
-
-      return () => {
-        clearTimeout(timeout)
-      }
-    }
-  }, [profile, control])
-
-  if (!profile) return null
-
-  return (
-    <Dialog.Outer control={control}>
-      <Dialog.Handle />
-      <DialogInner chatDeclation={profile.associated?.chat} />
-    </Dialog.Outer>
-  )
-}
-
-function DialogInner({
-  chatDeclation,
-}: {
-  chatDeclation?: ChatBskyActorDeclaration.Record
-}) {
-  const control = Dialog.useDialogContext()
-  const {_} = useLingui()
-  const t = useTheme()
-
-  const [initialized, setInitialzed] = React.useState(false)
-  const {mutate: updateDeclaration} = useUpdateActorDeclaration({
-    onError: () => {
-      Toast.show(_(msg`Failed to update settings`), 'xmark')
-    },
-  })
-
-  const onSelectItem = useCallback(
-    (keys: string[]) => {
-      const key = keys[0]
-      if (!key) return
-      updateDeclaration(key as 'all' | 'none' | 'following')
-    },
-    [updateDeclaration],
-  )
-
-  useEffect(() => {
-    if (!chatDeclation && !initialized) {
-      updateDeclaration('following')
-      setInitialzed(true)
-    }
-  }, [chatDeclation, updateDeclaration, initialized])
-
-  return (
-    <Dialog.ScrollableInner
-      label={_(msg`Introducing Direct Messages`)}
-      style={web({maxWidth: 440})}>
-      <View style={a.gap_xl}>
-        <View style={[a.align_center, a.pt_sm, a.pb_xs]}>
-          <Message_Stroke2_Corner0_Rounded width={64} />
-          <Text style={[a.text_2xl, a.font_bold, a.text_center, a.mt_md]}>
-            <Trans>Direct messages are here!</Trans>
-          </Text>
-          <Text style={[a.text_md, a.text_center, a.mt_sm]}>
-            <Trans>Privately chat with other users.</Trans>
-          </Text>
-        </View>
-        <View
-          style={[
-            a.gap_xs,
-            a.border,
-            a.overflow_hidden,
-            a.rounded_sm,
-            t.atoms.border_contrast_low,
-          ]}>
-          <View
-            style={[
-              a.p_md,
-              a.border_b,
-              t.atoms.bg_contrast_25,
-              t.atoms.border_contrast_low,
-            ]}>
-            <Text style={[a.text_sm, a.font_bold]}>
-              <Trans>Who can message you?</Trans>
-            </Text>
-            <Text
-              style={[
-                a.mt_xs,
-                a.text_sm,
-                a.italic,
-                t.atoms.text_contrast_medium,
-              ]}>
-              <Trans>You can change this at any time.</Trans>
-            </Text>
-          </View>
-          <View style={[a.px_md, a.py_xs]}>
-            <Toggle.Group
-              label={_(msg`Who can message you?`)}
-              type="radio"
-              values={[chatDeclation?.allowIncoming ?? 'following']}
-              onChange={onSelectItem}>
-              <View>
-                <Toggle.Item
-                  name="all"
-                  label={_(msg`Everyone`)}
-                  style={[a.justify_between, a.py_sm, a.rounded_2xs]}>
-                  <Toggle.LabelText>
-                    <Trans>Everyone</Trans>
-                  </Toggle.LabelText>
-                  <Toggle.Radio />
-                </Toggle.Item>
-                <Toggle.Item
-                  name="following"
-                  label={_(msg`Users I follow`)}
-                  style={[a.justify_between, a.py_sm, a.rounded_2xs]}>
-                  <Toggle.LabelText>
-                    <Trans>Users I follow</Trans>
-                  </Toggle.LabelText>
-                  <Toggle.Radio />
-                </Toggle.Item>
-                <Toggle.Item
-                  name="none"
-                  label={_(msg`No one`)}
-                  style={[a.justify_between, a.py_sm, a.rounded_2xs]}>
-                  <Toggle.LabelText>
-                    <Trans>No one</Trans>
-                  </Toggle.LabelText>
-                  <Toggle.Radio />
-                </Toggle.Item>
-              </View>
-            </Toggle.Group>
-          </View>
-        </View>
-        <Button
-          label={_(msg`Start chatting`)}
-          accessibilityHint={_(msg`Close modal`)}
-          size="large"
-          color="primary"
-          variant="solid"
-          onPress={() => control.close()}>
-          <ButtonText>
-            <Trans>Get started</Trans>
-          </ButtonText>
-        </Button>
-      </View>
-      <Dialog.Close />
-    </Dialog.ScrollableInner>
-  )
-}
@@ -10,13 +10,11 @@ import {useLingui} from '@lingui/react'
 import {useMutation} from '@tanstack/react-query'

 import {ReportOption} from '#/lib/moderation/useReportOptions'
-import {isAndroid} from '#/platform/detection'
 import {useAgent} from '#/state/session'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
-import {KeyboardControllerPadding} from '#/components/KeyboardControllerPadding'
 import {Button, ButtonIcon, ButtonText} from '../Button'
 import {Divider} from '../Divider'
 import {ChevronLeft_Stroke2_Corner0_Rounded as Chevron} from '../icons/Chevron'
@@ -41,14 +39,10 @@ let ReportDialog = ({
 }): React.ReactNode => {
  const {_} = useLingui()
  return (
-    <Dialog.Outer
-      control={control}
-      nativeOptions={isAndroid ? {sheet: {snapPoints: ['100%']}} : {}}>
-      <Dialog.Handle />
+    <Dialog.Outer control={control}>
      <Dialog.ScrollableInner label={_(msg`Report this message`)}>
        <DialogInner params={params} />
        <Dialog.Close />
-        <KeyboardControllerPadding />
      </Dialog.ScrollableInner>
    </Dialog.Outer>
  )
@@ -2,9 +2,9 @@ import React, {useCallback} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
-import {logEvent} from 'lib/statsig/statsig'
 import {FAB} from '#/view/com/util/fab/FAB'
 import * as Toast from '#/view/com/util/Toast'
 import {useTheme} from '#/alf'
@@ -55,10 +55,7 @@ export function NewChat({
        accessibilityHint=""
      />

-      <Dialog.Outer
-        control={control}
-        testID="newChatDialog"
-        nativeOptions={{sheet: {snapPoints: ['100%']}}}>
+      <Dialog.Outer control={control} testID="newChatDialog">
        <SearchablePeopleList
          title={_(msg`Start a new chat`)}
          onSelectChat={onCreateChat}
@@ -5,10 +5,8 @@ import React, {
  useRef,
  useState,
 } from 'react'
-import type {TextInput as TextInputType} from 'react-native'
-import {View} from 'react-native'
+import {TextInput, View} from 'react-native'
 import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
-import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

@@ -16,15 +14,15 @@ import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {isWeb} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
 import {useListConvosQuery} from '#/state/queries/messages/list-converations'
 import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
 import {useSession} from '#/state/session'
-import {useActorAutocompleteQuery} from 'state/queries/actor-autocomplete'
+import {ListMethods} from '#/view/com/util/List'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, native, useTheme, web} from '#/alf'
 import {Button} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {TextInput} from '#/components/dms/dialogs/TextInput'
 import {canBeMessaged} from '#/components/dms/util'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
@@ -66,9 +64,9 @@ export function SearchablePeopleList({
  const {_} = useLingui()
  const moderationOpts = useModerationOpts()
  const control = Dialog.useDialogContext()
-  const listRef = useRef<BottomSheetFlatListMethods>(null)
+  const listRef = useRef<ListMethods>(null)
  const {currentAccount} = useSession()
-  const inputRef = useRef<TextInputType>(null)
+  const inputRef = useRef<TextInput>(null)

  const [searchText, setSearchText] = useState('')

@@ -242,13 +240,12 @@ export function SearchablePeopleList({
      <View
        style={[
          a.relative,
-          a.pt_md,
+          web(a.pt_md),
          a.pb_xs,
          a.px_lg,
          a.border_b,
          t.atoms.border_contrast_low,
          t.atoms.bg,
-          native([a.pt_lg]),
        ]}>
        <View
          style={[
@@ -474,7 +471,7 @@ function SearchInput({
  value: string
  onChangeText: (text: string) => void
  onEscape: () => void
-  inputRef: React.RefObject<TextInputType>
+  inputRef: React.RefObject<TextInput>
 }) {
  const t = useTheme()
  const {_} = useLingui()
@@ -2,9 +2,9 @@ import React, {useCallback} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
-import {logEvent} from 'lib/statsig/statsig'
 import * as Toast from '#/view/com/util/Toast'
 import * as Dialog from '#/components/Dialog'
 import {SearchablePeopleList} from './SearchablePeopleList'
@@ -17,10 +17,7 @@ export function SendViaChatDialog({
  onSelectChat: (chatId: string) => void
 }) {
  return (
-    <Dialog.Outer
-      control={control}
-      testID="sendViaChatChatDialog"
-      nativeOptions={{sheet: {snapPoints: ['100%']}}}>
+    <Dialog.Outer control={control} testID="sendViaChatChatDialog">
      <SendViaChatDialogInner control={control} onSelectChat={onSelectChat} />
    </Dialog.Outer>
  )
@@ -57,7 +57,6 @@ export function DateField({
        accessibilityHint={accessibilityHint}
      />
      <Dialog.Outer control={control} testID={testID}>
-        <Dialog.Handle />
        <Dialog.Inner label={label}>
          <View style={a.gap_lg}>
            <View style={[a.relative, a.w_full, a.align_center]}>
@@ -0,0 +1,75 @@
+import React from 'react'
+import {TextInput, View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {HITSLOP_10} from '#/lib/constants'
+import {isNative} from '#/platform/detection'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import * as TextField from '#/components/forms/TextField'
+import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#/components/icons/MagnifyingGlass2'
+import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
+
+type SearchInputProps = Omit<TextField.InputProps, 'label'> & {
+  label?: TextField.InputProps['label']
+  /**
+   * Called when the user presses the (X) button
+   */
+  onClearText?: () => void
+}
+
+export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
+  function SearchInput({value, label, onClearText, ...rest}, ref) {
+    const t = useTheme()
+    const {_} = useLingui()
+
+    return (
+      <View style={[a.w_full, a.relative]}>
+        <TextField.Root>
+          <TextField.Icon icon={MagnifyingGlassIcon} />
+          <TextField.Input
+            inputRef={ref}
+            label={label || _(msg`Search`)}
+            value={value}
+            placeholder={_(msg`Search`)}
+            returnKeyType="search"
+            keyboardAppearance={t.scheme}
+            selectTextOnFocus={isNative}
+            autoFocus={false}
+            accessibilityRole="search"
+            autoCorrect={false}
+            autoComplete="off"
+            autoCapitalize="none"
+            {...rest}
+          />
+        </TextField.Root>
+
+        {value && value.length > 0 && (
+          <View
+            style={[
+              a.absolute,
+              a.z_10,
+              a.my_auto,
+              a.inset_0,
+              a.justify_center,
+              a.pr_sm,
+              {left: 'auto'},
+            ]}>
+            <Button
+              testID="searchTextInputClearBtn"
+              onPress={onClearText}
+              label={_(msg`Clear search query`)}
+              hitSlop={HITSLOP_10}
+              size="tiny"
+              shape="round"
+              variant="ghost"
+              color="secondary">
+              <ButtonIcon icon={X} size="xs" />
+            </Button>
+          </View>
+        )}
+      </View>
+    )
+  },
+)
@@ -126,7 +126,7 @@ export type InputProps = Omit<TextInputProps, 'value' | 'onChangeText'> & {
  value?: string
  onChangeText?: (value: string) => void
  isInvalid?: boolean
-  inputRef?: React.RefObject<TextInput>
+  inputRef?: React.RefObject<TextInput> | React.ForwardedRef<TextInput>
 }

 export function createInput(Component: typeof TextInput) {
@@ -1,9 +1,9 @@
 import React from 'react'
-import {Pressable, View, ViewStyle} from 'react-native'
+import {Pressable, PressableProps, View, ViewStyle} from 'react-native'
 import Animated, {LinearTransition} from 'react-native-reanimated'

+import {HITSLOP_10} from '#/lib/constants'
 import {isNative} from '#/platform/detection'
-import {HITSLOP_10} from 'lib/constants'
 import {
  atoms as a,
  flatten,
@@ -68,6 +68,7 @@ export type ItemProps = ViewStyleProp & {
  onChange?: (selected: boolean) => void
  isInvalid?: boolean
  children: ((props: ItemState) => React.ReactNode) | React.ReactNode
+  PressableComponent?: React.ComponentType<PressableProps>
 }

 export function useItemContext() {
@@ -159,6 +160,7 @@ export function Item({
  style,
  type = 'checkbox',
  label,
+  PressableComponent = Pressable,
  ...rest
 }: ItemProps) {
  const {
@@ -206,7 +208,7 @@ export function Item({

  return (
    <ItemContext.Provider value={state}>
-      <Pressable
+      <PressableComponent
        accessibilityHint={undefined} // optional
        hitSlop={HITSLOP_10}
        {...rest}
@@ -231,7 +233,7 @@ export function Item({
        onBlur={onBlur}
        style={[a.flex_row, a.align_center, a.gap_sm, flatten(style)]}>
        {typeof children === 'function' ? children(state) : children}
-      </Pressable>
+      </PressableComponent>
    </ItemContext.Provider>
  )
 }
@@ -3,11 +3,14 @@ import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-import {useAgent, useSession} from 'state/session'
-import {atoms as a} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
+import {isNative} from '#/platform/detection'
+import {useAgent, useSession} from '#/state/session'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {DialogControlProps} from '#/components/Dialog'
+import {Divider} from '#/components/Divider'
+import {ArrowRotateCounterClockwise_Stroke2_Corner0_Rounded as Resend} from '#/components/icons/ArrowRotateCounterClockwise'
 import {useIntentDialogs} from '#/components/intents/IntentDialogs'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
@@ -17,13 +20,14 @@ export function VerifyEmailIntentDialog() {

  return (
    <Dialog.Outer control={control}>
-      <Dialog.Handle />
      <Inner control={control} />
    </Dialog.Outer>
  )
 }

-function Inner({control}: {control: DialogControlProps}) {
+function Inner({}: {control: DialogControlProps}) {
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
  const {_} = useLingui()
  const {verifyEmailState: state} = useIntentDialogs()
  const [status, setStatus] = React.useState<
@@ -58,43 +62,47 @@ function Inner({control}: {control: DialogControlProps}) {
  }

  return (
-    <Dialog.ScrollableInner label={_(msg`Verify email dialog`)}>
-      <Dialog.Close />
+    <Dialog.ScrollableInner
+      label={_(msg`Verify email dialog`)}
+      style={[
+        gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+      ]}>
      <View style={[a.gap_xl]}>
        {status === 'loading' ? (
          <View style={[a.py_2xl, a.align_center, a.justify_center]}>
-            <Loader size="xl" />
+            <Loader size="xl" fill={t.atoms.text_contrast_low.color} />
          </View>
        ) : status === 'success' ? (
-          <>
-            <Text style={[a.font_bold, a.text_2xl]}>
+          <View style={[a.gap_sm, isNative && a.pb_xl]}>
+            <Text style={[a.font_heavy, a.text_2xl]}>
              <Trans>Email Verified</Trans>
            </Text>
-            <Text style={[a.text_md, a.leading_tight]}>
+            <Text style={[a.text_md, a.leading_snug]}>
              <Trans>
-                Thanks, you have successfully verified your email address.
+                Thanks, you have successfully verified your email address. You
+                can close this dialog.
              </Trans>
            </Text>
-          </>
+          </View>
        ) : status === 'failure' ? (
-          <>
-            <Text style={[a.font_bold, a.text_2xl]}>
+          <View style={[a.gap_sm]}>
+            <Text style={[a.font_heavy, a.text_2xl]}>
              <Trans>Invalid Verification Code</Trans>
            </Text>
-            <Text style={[a.text_md, a.leading_tight]}>
+            <Text style={[a.text_md, a.leading_snug]}>
              <Trans>
                The verification code you have provided is invalid. Please make
                sure that you have used the correct verification link or request
                a new one.
              </Trans>
            </Text>
-          </>
+          </View>
        ) : (
-          <>
-            <Text style={[a.font_bold, a.text_2xl]}>
+          <View style={[a.gap_sm, isNative && a.pb_xl]}>
+            <Text style={[a.font_heavy, a.text_2xl]}>
              <Trans>Email Resent</Trans>
            </Text>
-            <Text style={[a.text_md, a.leading_tight]}>
+            <Text style={[a.text_md, a.leading_snug]}>
              <Trans>
                We have sent another verification email to{' '}
                <Text style={[a.text_md, a.font_bold]}>
@@ -103,38 +111,29 @@ function Inner({control}: {control: DialogControlProps}) {
                .
              </Trans>
            </Text>
-          </>
+          </View>
        )}
-        {status !== 'loading' ? (
-          <View style={[a.w_full, a.flex_row, a.gap_sm, {marginLeft: 'auto'}]}>
+
+        {status === 'failure' && (
+          <>
+            <Divider />
            <Button
-              label={_(msg`Close`)}
-              onPress={() => control.close()}
+              label={_(msg`Resend Verification Email`)}
+              onPress={onPressResendEmail}
              variant="solid"
-              color={status === 'failure' ? 'secondary' : 'primary'}
+              color="secondary_inverted"
              size="large"
-              style={{marginLeft: 'auto'}}>
+              disabled={sending}>
+              <ButtonIcon icon={sending ? Loader : Resend} position="left" />
              <ButtonText>
-                <Trans>Close</Trans>
+                <Trans>Resend Email</Trans>
              </ButtonText>
            </Button>
-            {status === 'failure' ? (
-              <Button
-                label={_(msg`Resend Verification Email`)}
-                onPress={onPressResendEmail}
-                variant="solid"
-                color="primary"
-                size="large"
-                disabled={sending}>
-                <ButtonText>
-                  <Trans>Resend Email</Trans>
-                </ButtonText>
-                {sending ? <Loader size="sm" style={{color: 'white'}} /> : null}
-              </Button>
-            ) : null}
-          </View>
-        ) : null}
+          </>
+        )}
      </View>
+
+      <Dialog.Close />
    </Dialog.ScrollableInner>
  )
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Eric Bailey	d40413fdcb	WIP inline link fix	2024-10-03 14:25:11 -05:00
Eric Bailey	584c29649f	Rm BottomSheetLink	2024-10-03 11:47:45 -05:00
Hailey	7620b51cf0	spread	2024-10-03 09:08:58 -07:00
Hailey	54ebc4036e	tweak	2024-10-03 08:54:19 -07:00
Hailey	fba3cce81e	add sheet manager	2024-10-03 08:53:53 -07:00
Samuel Newman	9c309bb579	fix web export of BottomSheetInlineLinkText	2024-10-03 16:31:26 +03:00
Hailey	f5b2fe7558	fix incorrect snap point	2024-10-03 00:35:06 -07:00
Hailey	5e41b503ad	fix jest	2024-10-02 23:11:27 -07:00
Hailey	1b7e66f700	bring some android stuff back up to date	2024-10-02 23:03:22 -07:00
Hailey	cc81342256	add dismiss all	2024-10-02 22:40:31 -07:00
Hailey	a32f58753d	Merge remote-tracking branch 'origin/main' into hailey/dialogs-pt1	2024-10-02 22:36:27 -07:00
dan	03704e2b48	Manage video reducer from composer reducer (#5573 ) * Move video state into composer state * Represent video as embed This is slightly broken. In particular, we can't remove video yet because there's no action that results in video embed being removed. * Properly represent video as embed This aligns the video state lifetime with the embed lifetime. Video can now be properly added and removed. * Disable Add Video when we have images * Ignore empty image pick	2024-10-03 14:26:38 +09:00
Hailey	f51d42e44f	Merge remote-tracking branch 'origin/main' into hailey/dialogs-pt1	2024-10-02 22:10:02 -07:00
Hailey	89ac12516d	[Sheets] [Pt. 15] Fix up dialogs inside the composer (#5589 ) Co-authored-by: Eric Bailey <git@esb.lol> Co-authored-by: Samuel Newman <mozzius@protonmail.com> Co-authored-by: dan <dan.abramov@gmail.com>	2024-10-02 22:08:36 -07:00
Hailey	058ddb0c53	[Sheets] [Pt. 14] Portaling behaviors for nested dialogs (#5588 ) Co-authored-by: Eric Bailey <git@esb.lol> Co-authored-by: Samuel Newman <mozzius@protonmail.com>	2024-10-02 22:03:52 -07:00
Hailey	52a8e4d616	[Sheets] [Pt. 13] Keyboard handling (#5586 ) Co-authored-by: Eric Bailey <git@esb.lol> Co-authored-by: Samuel Newman <mozzius@protonmail.com>	2024-10-02 21:53:23 -07:00
Hailey	14e3567663	[Sheets] [Pt. 12] Add event for selected snap point change (#5584 ) Co-authored-by: Eric Bailey <git@esb.lol> Co-authored-by: Samuel Newman <mozzius@protonmail.com>	2024-10-02 21:49:49 -07:00
Hailey	79996ac952	[Sheets] [Pt. 11] Move native code into repo (#5583 ) Co-authored-by: Eric Bailey <git@esb.lol> Co-authored-by: Samuel Newman <mozzius@protonmail.com>	2024-10-02 21:43:54 -07:00
Hailey	4466f68b81	[Sheets] [Pt. 10] (#5581 ) Co-authored-by: Eric Bailey <git@esb.lol> Co-authored-by: Samuel Newman <mozzius@protonmail.com>	2024-10-02 21:38:34 -07:00
Hailey	c49182009a	[Sheets] [Pt. 8] Allow nesting in other sheets or native modals (#5567 )	2024-10-02 21:26:58 -07:00
Hailey	ecf7215a34	[Sheets] [Pt. 7] Part seven rework, much simplier! (#5582 )	2024-10-02 21:11:27 -07:00
dan	d2392d2d64	Refactor video uploads (#5570 ) * Remove unused video field * Stop exposing video dispatch * Move cancellation out of the reducer * Make useUploadStatusQuery controlled by jobId * Rename SetStatus to SetProcessing This action only has one callsite and it's always passing "processing". * Move jobId into video reducer state * Make cancellation scoped * Inline useCompressVideoMutation * Move processVideo down the file * Extract getErrorMessage * useServiceAuthToken -> getServiceAuthToken * useVideoAgent -> createVideoAgent * useVideoUploadLimits -> getVideoUploadLimits * useUploadVideoMutation -> uploadVideo * Use async/await in processVideo * Inline onVideoCompressed into processVideo * Use async/await for uploadVideo * Factor out error messages * Guard dispatch with signal This lets us remove the scattered signal checks around dispatch. * Move job polling out of RQ * Handle poll failures * Remove unnecessary guards * Slightly more accurate condition * Move initVideoUri handling out of the hook * Remove dead argument It wasn't being used before either. * Remove unused detailed status This isn't being used because we're only respecting that state variable when isProcessing=true, but isProcessing is always false during video upload. If we want to re-add this later, it should really just be derived from the reducer state. * Harden the video reducer * Tie all spawned work to a signal * Preserve asset/media for nicer error state * Rename actions to match states * Inline useUploadVideo This abstraction is getting in the way of some future work. * Move MIME check to the only place that handles it	2024-10-03 11:41:23 +09:00
Hailey	0ed5d48e02	[Sheets] [Pt. 6] Update `Inner` and `InnerFlatList` and their uses (#5564 )	2024-10-02 16:14:47 -07:00
Hailey	ede5d0155b	[Sheets] [Pt. 5] Update types and props (#5563 )	2024-10-02 16:03:49 -07:00
Hailey	0037353528	[Sheets] [Pt. 4] Convert Pressable in Menu (WIP) (#5562 )	2024-10-02 15:49:36 -07:00
Hailey	5b08aad014	[Sheets] [Pt. 3] Get new sheet working with `ScrollableInner` (#5561 )	2024-10-02 14:58:12 -07:00
Hailey	a2e8f3cbc4	[Sheets] [Pt. 2] Remove a bunch of now-unnecessary things (#5560 ) Co-authored-by: Samuel Newman <mozzius@protonmail.com>	2024-10-02 14:43:27 -07:00
Samuel Newman	c2dac855cc	Delete messages NUX (#5574 )	2024-10-02 22:23:11 +03:00
Samuel Newman	13c9c79aee	move files around (#5576 )	2024-10-02 22:21:59 +03:00
Samuel Newman	405966830c	Make reply prompt more subtle on desktop (#5569 ) * make reply prompt more subtle on desktop * fix alignment * Tweak transition timing --------- Co-authored-by: Eric Bailey <git@esb.lol>	2024-10-02 11:40:18 -05:00
Eric Bailey	3972d3d4c3	Ignore built files (#5572 )	2024-10-02 11:18:15 -05:00
Hailey	a444fc53a0	import order (#5571 )	2024-10-02 11:09:54 -05:00
Eric Bailey	1a7885b921	Add suspense boundary in onboarding (#5556 )	2024-10-02 10:55:06 -05:00
Eric Bailey	3569873123	Tweak verify email dialog (#5555 ) * Add intent/verify-email to go server * Tweak verify intent dialog	2024-10-02 10:54:51 -05:00
Eric Bailey	f251a43dd6	Add intent/verify-email to go server (#5554 )	2024-10-02 10:54:25 -05:00
Hailey	64c9d86488	remove	2024-10-01 13:59:20 -07:00
Eric Bailey	5a98ea684d	Include ghost hook to statically export fonts (#5553 )	2024-10-01 15:57:49 -05:00
dan	e33b2b1bee	Handle /starter-pack-short/:code in Go (#5546 )	2024-10-02 00:09:21 +09:00
dan	d2fd5589dc	Introduce a composer reducer and move image state there (#5547 ) * Add composer reducer * Support adding images Co-authored-by: Mary <git@mary.my.id> * Support updating and deleting images Co-authored-by: Mary <git@mary.my.id> * Derive images state from composer state Co-authored-by: Mary <git@mary.my.id> --------- Co-authored-by: Mary <git@mary.my.id>	2024-10-02 00:08:46 +09:00
dan	a7ee561e40	Paralellize image uploads (#5535 ) * Remove unsafe type coercions from posting embed * Extract resolveEmbed into a separate function * Refactor to if-else because these are mutually exclusive * Refactor resolveEmbed to early returns * Separate resolving embed and media * Parallelize image upload * Prioritize not dropping media	2024-10-02 00:03:27 +09:00
Eric Bailey	b59d6dfbb5	Remove local file check (#5544 )	2024-09-30 17:43:14 -05:00
Samuel Newman	2129f69fa0	ALF text input for generic search input (#5511 ) * alf text input for generic search input * clearer ref naming * Adjust props and definition * Migrate props * Migrate props * Migrate props * Replace on search screen * rm old props --------- Co-authored-by: Eric Bailey <git@esb.lol>	2024-09-30 16:53:11 -05:00
Eric Bailey	b4941d8556	Use Inter variable font (#5540 )	2024-09-30 16:04:19 -05:00
Hailey	adaa79a461	Fix name in `feature_request.yml` (#5542 )	2024-09-30 14:04:10 -07:00
Eric Bailey	26c09ff107	Fix sticky offset, gear color (#5537 )	2024-09-30 16:04:04 -05:00
Hailey	669cdf222c	Move email test to root tests dir (#5527 )	2024-09-30 13:56:49 -07:00
Hailey	66f3068c58	revamp issue templates, add new arch template (#5532 )	2024-09-30 13:55:21 -07:00
Samuel Newman	9ca2928aac	use PressableScale for animation (#5541 )	2024-09-30 21:49:53 +03:00
Hailey	587c0c6257	Rework native autocomplete (#5521 ) Co-authored-by: Samuel Newman <mozzius@protonmail.com>	2024-09-27 15:26:28 -07:00
Samuel Newman	4b5d6e6efb	Pinned posts (#5055 ) * add to dropdown menu * use normal profile mutation hook * add pin as reason * request pins * shadow update * rm logs * get prev pinned from getProfile * fix toasts * invalidate after appview ready * don't mutate params * rm log * use checkCommited rather than manual whenAppViewReady * move to mutation * even more optimistic optimistic update * allow pins in `posts_and_author_threads` * update @atproto/api * add reasonPin type * fix strange type error in unrelated query * another missing type	2024-09-28 00:50:32 +03:00
Hailey	f68b15219f	Remove Segment (#5518 )	2024-09-27 14:01:57 -07:00
Hailey	bcd096b85a	Fix alignment of cancel button on search (#5520 )	2024-09-27 09:55:47 -07:00
Hailey	d8f72c1ee1	[Share Extension] Support on Android for sharing videos to app (#5466 )	2024-09-27 09:54:37 -07:00
Samuel Newman	4553e6b649	Ignore bogus onScroll values (#5499 )	2024-09-27 10:09:00 +01:00
Hailey	dd2fedb2e6	add podcasts to spotify embeds (#5514 )	2024-09-27 16:19:12 +09:00
Hailey	c7b48cbdca	Tweak font size of "Write your reply" (#5513 )	2024-09-26 21:01:57 -07:00
Hailey	389e6f1509	Lazy load ViewShot (#5517 ) * lazy one spot * lazy signup * fix type * tweak type, fix missing viewshot type * only import type oops	2024-09-27 12:52:32 +09:00
Hailey	dd1944e9b8	[Share Extension] Support images/movies from other apps like iMessage (#5515 )	2024-09-26 19:57:16 -07:00
Samuel Newman	77c4a9922f	tab change on press rather than pressIn (#5508 )	2024-09-26 21:05:12 +01:00
Hailey	a61b75be57	Add margin to bottom of search input (#5510 )	2024-09-26 12:57:54 -07:00
Hailey	7ee67e4e7e	[Share Extension] Move away from deprecated API, implement JS side of things (#5509 )	2024-09-26 12:37:51 -07:00
Eric Bailey	175df72972	Fix weird button wrapping on splash (#5507 ) * Fix weird button wrapping on splash * Web	2024-09-26 12:58:47 -05:00
Hailey	863764b3fe	[Share Extension] Use the proper identifier for if statement on iOS (#5505 )	2024-09-26 10:51:22 -07:00
Eric Bailey	702dfa8536	Fix handle collapse on Android (#5504 )	2024-09-26 12:47:27 -05:00
Eric Bailey	1ae7fa6363	Adjust header offset (#5501 )	2024-09-27 01:59:04 +09:00
Eric Bailey	960f4450ee	Adjust dialog timing (#5502 )	2024-09-27 01:58:47 +09:00
				`@@ -0,0 +1 @@`
				`export {Link as BottomSheetInlineLinkText} from './Link'`