Fix handle collapse on Android

2024-09-26 12:16:45 -05:00
111 changed files with 2461 additions and 896 deletions
@@ -234,8 +234,24 @@ module.exports = function (config) {
          'expo-font',
          {
            fonts: [
-              './assets/fonts/inter/InterVariable.ttf',
-              './assets/fonts/inter/InterVariable-Italic.ttf',
+              // './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',
            ],
          },
        ],
@@ -13,8 +13,24 @@

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

-  <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">
+  <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">
+  -->

  <style>
    /**
@@ -37,7 +53,7 @@
    body {
      margin: 0px;
      padding: 0px;
-      font-family: InterVariable, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
+      font-family: 'Inter-Regular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Liberation Sans', Helvetica, Arial, sans-serif;
      text-rendering: optimizeLegibility;
      /* Platform-specific reset */
      -webkit-overflow-scrolling: touch;
@@ -54,6 +54,21 @@ 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]),
@@ -40,4 +40,4 @@
    <key>CFBundleShortVersionString</key>
    <string>$(MARKETING_VERSION)</string>
  </dict>
-</plist>
+</plist>
@@ -1,14 +1,5 @@
 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.
@@ -32,7 +23,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.movie") {
+      } else if firstAttachment.hasItemConformingToTypeIdentifier("public.video") {
        await self.handleVideos(items: attachments)
      } else {
        self.completeRequest()
@@ -52,18 +43,9 @@ class ShareViewController: UIViewController {

  private func handleUrl(item: NSItemProvider) async {
    if let data = try? await item.loadItem(forTypeIdentifier: "public.url") as? 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)
-        }
+      if let encoded = data.absoluteString.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed),
+         let url = URL(string: "\(self.appScheme)://intent/compose?text=\(encoded)") {
+        _ = self.openURL(url)
      }
    }
    self.completeRequest()
@@ -119,13 +101,13 @@ class ShareViewController: UIViewController {
  private func handleVideos(items: [NSItemProvider]) async {
    let firstItem = items.first

-    if let dataUri = try? await firstItem?.loadItem(forTypeIdentifier: "public.movie") as? URL {
+    if let dataUri = try? await firstItem?.loadItem(forTypeIdentifier: "public.video") 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 = tempUrl.absoluteString.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed),
+        if let encoded = dataUri.absoluteString.addingPercentEncoding(withAllowedCharacters: .urlHostAllowed),
           let url = URL(string: "\(self.appScheme)://intent/compose?videoUri=\(encoded)") {
          _ = self.openURL(url)
        }
@@ -168,29 +150,10 @@ class ShareViewController: UIViewController {
    var responder: UIResponder? = self
    while responder != nil {
      if let application = responder as? UIApplication {
-        application.open(url)
-        return true
+          return application.perform(#selector(openURL(_:)), with: url) != nil
      }
      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
-    }
-  }
-}
@@ -12,11 +12,6 @@ import java.io.File
 import java.io.FileOutputStream
 import java.net.URLEncoder

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

  private fun handleIntent(intent: Intent?) {
-    if (appContext.currentActivity == null) return
-    intent?.let {
-      if (it.action == Intent.ACTION_SEND && it.type == "text/plain") {
-        handleTextIntent(it)
-        return
+    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)
      }
-
-      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)
+    } else if (intent.action == Intent.ACTION_SEND_MULTIPLE) {
+      if (intent.type.toString().startsWith("image/")) {
+        handleImagesIntent(intent)
      }
    }
  }
@@ -62,46 +48,26 @@ class ExpoReceiveAndroidIntentsModule : Module() {
    }
  }

-  private fun handleAttachmentIntent(
-    intent: Intent,
-    type: AttachmentType,
-  ) {
+  private fun handleImageIntent(intent: Intent) {
    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

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

-  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)
+  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))
      }
-
-    uris?.let {
-      when (type) {
-        AttachmentType.IMAGE -> handleImageIntents(it)
-        else -> return
+    } else {
+      intent.getParcelableArrayListExtra<Uri>(Intent.EXTRA_STREAM)?.let {
+        handleImageIntents(it.filterIsInstance<Uri>().take(4))
      }
    }
  }
@@ -127,33 +93,11 @@ 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 = createFile("jpeg")
+    val file = File.createTempFile("img", "temp.jpeg", appContext.currentActivity?.cacheDir)
    val out = FileOutputStream(file)
    bitmap.compress(Bitmap.CompressFormat.JPEG, 100, out)
    out.flush()
@@ -166,8 +110,6 @@ 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.8",
+    "@atproto/api": "^0.13.7",
    "@braintree/sanitize-url": "^6.0.2",
    "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
    "@emoji-mart/react": "^1.1.1",
@@ -81,6 +81,10 @@
    "@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",
@@ -27,29 +27,6 @@ const withIntentFilters = config => {
          },
        ],
      },
-      {
-        action: [
-          {
-            $: {
-              'android:name': 'android.intent.action.SEND',
-            },
-          },
-        ],
-        category: [
-          {
-            $: {
-              'android:name': 'android.intent.category.DEFAULT',
-            },
-          },
-        ],
-        data: [
-          {
-            $: {
-              'android:mimeType': 'video/*',
-            },
-          },
-        ],
-      },
      {
        action: [
          {
@@ -15,6 +15,7 @@ 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'
@@ -646,6 +647,8 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {

  function onReady() {
    prevLoggedRouteName.current = getCurrentRouteName()
+    initAnalytics(currentAccount)
+
    if (currentAccount && shouldRequestEmailConfirmation(currentAccount)) {
      openModal({name: 'verify-email', showReminder: true})
      snoozeEmailConfirmationPrompt()
@@ -40,10 +40,31 @@ export function applyFonts(
  fontFamily: 'system' | 'theme',
 ) {
  if (fontFamily === 'theme') {
-    style.fontFamily = 'InterVariable'
+    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'

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

    // fallback families only supported on web
@@ -1,23 +1,18 @@
 import React from 'react'
 import {View} from 'react-native'
 import QRCode from 'react-native-qrcode-styled'
-import type ViewShot from 'react-native-view-shot'
+import 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
@@ -34,7 +29,7 @@ export const QrCode = React.forwardRef<ViewShot, Props>(function QrCode(
  }

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

@@ -1,6 +1,6 @@
 import React from 'react'
 import {View} from 'react-native'
-import type ViewShot from 'react-native-view-shot'
+import 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 {isNative, isWeb} from '#/platform/detection'
+import {logEvent} from 'lib/statsig/statsig'
+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'
@@ -153,54 +153,46 @@ export function QrCodeDialog({
      <Dialog.ScrollableInner
        label={_(msg`Create a QR code for a starter pack`)}>
        <View style={[a.flex_1, a.align_center, a.gap_5xl]}>
-          <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>
+          {!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>
+              )}
+            </>
+          )}
        </View>
      </Dialog.ScrollableInner>
    </Dialog.Outer>
  )
 }
-
-function Loading() {
-  return (
-    <View style={[a.align_center, a.p_xl]}>
-      <Loader size="xl" />
-    </View>
-  )
-}
@@ -41,7 +41,7 @@ const queuedNuxs: {
    id: Nux.NeueTypography,
    enabled(props) {
      if (props.currentProfile.createdAt) {
-        if (new Date(props.currentProfile.createdAt) < new Date('2024-10-01')) {
+        if (new Date(props.currentProfile.createdAt) < new Date('2024-09-25')) {
          return true
        }
      }
@@ -9,8 +9,8 @@ export function useHeaderOffset() {
    return 0
  }
  const navBarHeight = 42
-  const tabBarPad = 10 + 10 + 6 // padding + arbitrary
-  const normalLineHeight = 20 // matches tab bar
-  const tabBarText = normalLineHeight * fontScale
+  const tabBarPad = 10 + 10 + 3 // padding + border
+  const normalLineHeight = 1.2
+  const tabBarText = 16 * normalLineHeight * fontScale
  return navBarHeight + tabBarPad + tabBarText
 }
@@ -0,0 +1,158 @@
+import React from 'react'
+import {AppState, AppStateStatus} from 'react-native'
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import {createClient, SegmentClient} from '@segment/analytics-react-native'
+import * as Sentry from '@sentry/react-native'
+import {sha256} from 'js-sha256'
+
+import {logger} from '#/logger'
+import {SessionAccount, useSession} from '#/state/session'
+import {ScreenPropertiesMap, TrackPropertiesMap} from './types'
+
+type AppInfo = {
+  build?: string | undefined
+  name?: string | undefined
+  namespace?: string | undefined
+  version?: string | undefined
+}
+
+// Delay creating until first actual use.
+let segmentClient: SegmentClient | null = null
+function getClient(): SegmentClient {
+  if (!segmentClient) {
+    segmentClient = createClient({
+      writeKey: '8I6DsgfiSLuoONyaunGoiQM7A6y2ybdI',
+      trackAppLifecycleEvents: false,
+      proxy: 'https://api.events.bsky.app/v1',
+    })
+  }
+  return segmentClient
+}
+
+export const track = async <E extends keyof TrackPropertiesMap>(
+  event: E,
+  properties?: TrackPropertiesMap[E],
+) => {
+  await getClient().track(event, properties)
+}
+
+export function useAnalytics() {
+  const {hasSession} = useSession()
+
+  return React.useMemo(() => {
+    if (hasSession) {
+      return {
+        async screen<E extends keyof ScreenPropertiesMap>(
+          event: E,
+          properties?: ScreenPropertiesMap[E],
+        ) {
+          await getClient().screen(event, properties)
+        },
+        async track<E extends keyof TrackPropertiesMap>(
+          event: E,
+          properties?: TrackPropertiesMap[E],
+        ) {
+          await getClient().track(event, properties)
+        },
+      }
+    }
+    // dont send analytics pings for anonymous users
+    return {
+      screen: async () => {},
+      track: async () => {},
+    }
+  }, [hasSession])
+}
+
+export function init(account: SessionAccount | undefined) {
+  setupListenersOnce()
+
+  if (account) {
+    const client = getClient()
+    if (account.did) {
+      const did_hashed = sha256(account.did)
+      client.identify(did_hashed, {did_hashed})
+      Sentry.setUser({id: did_hashed})
+      logger.debug('Ping w/hash')
+    } else {
+      logger.debug('Ping w/o hash')
+      client.identify()
+    }
+  }
+}
+
+let didSetupListeners = false
+function setupListenersOnce() {
+  if (didSetupListeners) {
+    return
+  }
+  didSetupListeners = true
+  // NOTE
+  // this is a copy of segment's own lifecycle event tracking
+  // we handle it manually to ensure that it never fires while the app is backgrounded
+  // -prf
+  const client = getClient()
+  client.isReady.onChange(async () => {
+    if (AppState.currentState !== 'active') {
+      logger.debug('Prevented a metrics ping while the app was backgrounded')
+      return
+    }
+    const context = client.context.get()
+    if (typeof context?.app === 'undefined') {
+      logger.debug('Aborted metrics ping due to unavailable context')
+      return
+    }
+
+    const oldAppInfo = await readAppInfo()
+    const newAppInfo = context.app as AppInfo
+    writeAppInfo(newAppInfo)
+    logger.debug('Recording app info', {new: newAppInfo, old: oldAppInfo})
+
+    if (typeof oldAppInfo === 'undefined') {
+      client.track('Application Installed', {
+        version: newAppInfo.version,
+        build: newAppInfo.build,
+      })
+    } else if (newAppInfo.version !== oldAppInfo.version) {
+      client.track('Application Updated', {
+        version: newAppInfo.version,
+        build: newAppInfo.build,
+        previous_version: oldAppInfo.version,
+        previous_build: oldAppInfo.build,
+      })
+    }
+    client.track('Application Opened', {
+      from_background: false,
+      version: newAppInfo.version,
+      build: newAppInfo.build,
+    })
+  })
+
+  let lastState: AppStateStatus = AppState.currentState
+  AppState.addEventListener('change', (state: AppStateStatus) => {
+    if (state === 'active' && lastState !== 'active') {
+      const context = client.context.get()
+      client.track('Application Opened', {
+        from_background: true,
+        version: context?.app?.version,
+        build: context?.app?.build,
+      })
+    } else if (state !== 'active' && lastState === 'active') {
+      client.track('Application Backgrounded')
+    }
+    lastState = state
+  })
+}
+
+async function writeAppInfo(value: AppInfo) {
+  await AsyncStorage.setItem('BSKY_APP_INFO', JSON.stringify(value))
+}
+
+async function readAppInfo(): Promise<AppInfo | undefined> {
+  const rawData = await AsyncStorage.getItem('BSKY_APP_INFO')
+  const obj = rawData ? JSON.parse(rawData) : undefined
+  if (!obj || typeof obj !== 'object') {
+    return undefined
+  }
+  return obj
+}
@@ -0,0 +1,80 @@
+import React from 'react'
+import {createClient} from '@segment/analytics-react'
+import * as Sentry from '@sentry/react-native'
+import {sha256} from 'js-sha256'
+
+import {logger} from '#/logger'
+import {SessionAccount, useSession} from '#/state/session'
+import {ScreenPropertiesMap, TrackPropertiesMap} from './types'
+
+type SegmentClient = ReturnType<typeof createClient>
+
+// Delay creating until first actual use.
+let segmentClient: SegmentClient | null = null
+function getClient(): SegmentClient {
+  if (!segmentClient) {
+    segmentClient = createClient(
+      {
+        writeKey: '8I6DsgfiSLuoONyaunGoiQM7A6y2ybdI',
+      },
+      {
+        integrations: {
+          'Segment.io': {
+            apiHost: 'api.events.bsky.app/v1',
+          },
+        },
+      },
+    )
+  }
+  return segmentClient
+}
+
+export const track = async <E extends keyof TrackPropertiesMap>(
+  event: E,
+  properties?: TrackPropertiesMap[E],
+) => {
+  await getClient().track(event, properties)
+}
+
+export function useAnalytics() {
+  const {hasSession} = useSession()
+
+  return React.useMemo(() => {
+    if (hasSession) {
+      return {
+        async screen<E extends keyof ScreenPropertiesMap>(
+          event: E,
+          properties?: ScreenPropertiesMap[E],
+        ) {
+          await getClient().screen(event, properties)
+        },
+        async track<E extends keyof TrackPropertiesMap>(
+          event: E,
+          properties?: TrackPropertiesMap[E],
+        ) {
+          await getClient().track(event, properties)
+        },
+      }
+    }
+    // dont send analytics pings for anonymous users
+    return {
+      screen: async () => {},
+      track: async () => {},
+    }
+  }, [hasSession])
+}
+
+export function init(account: SessionAccount | undefined) {
+  if (account) {
+    const client = getClient()
+    if (account.did) {
+      const did_hashed = sha256(account.did)
+      client.identify(did_hashed, {did_hashed})
+      Sentry.setUser({id: did_hashed})
+      logger.debug('Ping w/hash')
+    } else {
+      logger.debug('Ping w/o hash')
+      client.identify()
+    }
+  }
+}
@@ -0,0 +1,181 @@
+export type TrackPropertiesMap = {
+  // LOGIN / SIGN UP events
+  'Sign In': {resumedSession: boolean} // CAN BE SERVER
+  'Create Account': {} // CAN BE SERVER
+  'Try Create Account': {}
+  'Signin:PressedForgotPassword': {}
+  'Signin:PressedSelectService': {}
+  // COMPOSER / CREATE POST events
+  'Create Post': {imageCount: string | number} // CAN BE SERVER
+  'Composer:PastedPhotos': {}
+  'Composer:CameraOpened': {}
+  'Composer:GalleryOpened': {}
+  'Composer:ThreadgateOpened': {}
+  'HomeScreen:PressCompose': {}
+  'ProfileScreen:PressCompose': {}
+  // EDIT PROFILE events
+  'EditHandle:ViewCustomForm': {}
+  'EditHandle:ViewProvidedForm': {}
+  'EditHandle:SetNewHandle': {}
+  'EditProfile:AvatarSelected': {}
+  'EditProfile:BannerSelected': {}
+  'EditProfile:Save': {} // CAN BE SERVER
+  // FEED events
+  'Feed:onRefresh': {}
+  'Feed:onEndReached': {}
+  // POST events
+  'Post:Like': {} // CAN BE SERVER
+  'Post:Unlike': {} // CAN BE SERVER
+  'Post:Repost': {} // CAN BE SERVER
+  'Post:Unrepost': {} // CAN BE SERVER
+  'Post:Delete': {} // CAN BE SERVER
+  'Post:ThreadMute': {} // CAN BE SERVER
+  'Post:ThreadUnmute': {} // CAN BE SERVER
+  'Post:Reply': {} // CAN BE SERVER
+  'Post:EditThreadgateOpened': {}
+  'Post:ThreadgateEdited': {}
+  // PROFILE events
+  'Profile:Follow': {
+    username: string
+  }
+  'Profile:Unfollow': {
+    username: string
+  }
+  // PROFILE HEADER events
+  'ProfileHeader:EditProfileButtonClicked': {}
+  'ProfileHeader:FollowersButtonClicked': {
+    handle: string
+  }
+  'ProfileHeader:FollowsButtonClicked': {
+    handle: string
+  }
+  'ProfileHeader:ShareButtonClicked': {}
+  'ProfileHeader:MuteAccountButtonClicked': {}
+  'ProfileHeader:UnmuteAccountButtonClicked': {}
+  'ProfileHeader:ReportAccountButtonClicked': {}
+  'ProfileHeader:AddToListsButtonClicked': {}
+  'ProfileHeader:BlockAccountButtonClicked': {}
+  'ProfileHeader:UnblockAccountButtonClicked': {}
+  'ProfileHeader:FollowButtonClicked': {}
+  'ProfileHeader:UnfollowButtonClicked': {}
+  'ProfileHeader:SuggestedFollowsOpened': {}
+  'ProfileHeader:SuggestedFollowFollowed': {}
+  'ViewHeader:MenuButtonClicked': {}
+  // SETTINGS events
+  'Settings:SwitchAccountButtonClicked': {}
+  'Settings:AddAccountButtonClicked': {}
+  'Settings:ChangeHandleButtonClicked': {}
+  'Settings:InvitecodesButtonClicked': {}
+  'Settings:SignOutButtonClicked': {}
+  'Settings:ContentlanguagesButtonClicked': {}
+  // MENU events
+  'Menu:ItemClicked': {url: string}
+  'Menu:FeedbackClicked': {}
+  'Menu:HelpClicked': {}
+  // MOBILE SHELL events
+  'MobileShell:MyProfileButtonPressed': {}
+  'MobileShell:HomeButtonPressed': {}
+  'MobileShell:SearchButtonPressed': {}
+  'MobileShell:NotificationsButtonPressed': {}
+  'MobileShell:FeedsButtonPressed': {}
+  'MobileShell:MessagesButtonPressed': {}
+  // NOTIFICATIONS events
+  'Notificatons:OpenApp': {}
+  // LISTS events
+  'Lists:onRefresh': {}
+  'Lists:onEndReached': {}
+  'CreateList:AvatarSelected': {}
+  'CreateList:SaveCurateList': {} // CAN BE SERVER
+  'CreateList:SaveModList': {} // CAN BE SERVER
+  'Lists:Mute': {} // CAN BE SERVER
+  'Lists:Unmute': {} // CAN BE SERVER
+  'Lists:Block': {} // CAN BE SERVER
+  'Lists:Unblock': {} // CAN BE SERVER
+  'Lists:Delete': {} // CAN BE SERVER
+  'Lists:Share': {} // CAN BE SERVER
+  // CUSTOM FEED events
+  'CustomFeed:Save': {}
+  'CustomFeed:Unsave': {}
+  'CustomFeed:Like': {}
+  'CustomFeed:Unlike': {}
+  'CustomFeed:Share': {}
+  'CustomFeed:Pin': {
+    uri: string
+    name?: string
+  }
+  'CustomFeed:Unpin': {
+    uri: string
+    name?: string
+  }
+  'CustomFeed:Reorder': {
+    uri: string
+    name?: string
+    index: number
+  }
+  'CustomFeed:LoadMore': {}
+  'MultiFeed:onEndReached': {}
+  'MultiFeed:onRefresh': {}
+  // MODERATION events
+  'Moderation:ContentfilteringButtonClicked': {}
+  // ONBOARDING events
+  'Onboarding:Begin': {}
+  'Onboarding:Complete': {}
+  'Onboarding:Skipped': {}
+  'Onboarding:Reset': {}
+  'Onboarding:SuggestedFollowFollowed': {}
+  'Onboarding:CustomFeedAdded': {}
+  // Onboarding v2
+  'OnboardingV2:Begin': {}
+  'OnboardingV2:StepInterests:Start': {}
+  'OnboardingV2:StepInterests:End': {
+    selectedInterests: string[]
+    selectedInterestsLength: number
+  }
+  'OnboardingV2:StepInterests:Error': {}
+  'OnboardingV2:StepSuggestedAccounts:Start': {}
+  'OnboardingV2:StepSuggestedAccounts:End': {
+    selectedAccountsLength: number
+  }
+  'OnboardingV2:StepFollowingFeed:Start': {}
+  'OnboardingV2:StepFollowingFeed:End': {}
+  'OnboardingV2:StepAlgoFeeds:Start': {}
+  'OnboardingV2:StepAlgoFeeds:End': {
+    selectedPrimaryFeeds: string[]
+    selectedPrimaryFeedsLength: number
+    selectedSecondaryFeeds: string[]
+    selectedSecondaryFeedsLength: number
+  }
+  'OnboardingV2:StepTopicalFeeds:Start': {}
+  'OnboardingV2:StepTopicalFeeds:End': {
+    selectedFeeds: string[]
+    selectedFeedsLength: number
+  }
+  'OnboardingV2:StepModeration:Start': {}
+  'OnboardingV2:StepModeration:End': {}
+  'OnboardingV2:StepProfile:Start': {}
+  'OnboardingV2:StepProfile:End': {}
+  'OnboardingV2:StepFinished:Start': {}
+  'OnboardingV2:StepFinished:End': {}
+  'OnboardingV2:Complete': {}
+  'OnboardingV2:Skip': {}
+}
+
+export type ScreenPropertiesMap = {
+  Login: {}
+  CreateAccount: {}
+  'Choose Account': {}
+  'Signin:ForgotPassword': {}
+  'Signin:SetNewPasswordForm': {}
+  'Signin:PasswordUpdatedForm': {}
+  Feed: {}
+  Notifications: {}
+  Profile: {}
+  'Profile:Preview': {}
+  Settings: {}
+  AppPasswords: {}
+  Moderation: {}
+  PreferencesExternalEmbeds: {}
+  BlockedAccounts: {}
+  MutedAccounts: {}
+  SavedFeeds: {}
+}
@@ -8,7 +8,7 @@ import {FeedAPI, FeedAPIResponse} from './types'

 export class AuthorFeedAPI implements FeedAPI {
  agent: BskyAgent
-  _params: GetAuthorFeed.QueryParams
+  params: GetAuthorFeed.QueryParams

  constructor({
    agent,
@@ -18,13 +18,7 @@ export class AuthorFeedAPI implements FeedAPI {
    feedParams: GetAuthorFeed.QueryParams
  }) {
    this.agent = agent
-    this._params = feedParams
-  }
-
-  get params() {
-    const params = {...this._params}
-    params.includePins = params.filter !== 'posts_with_media'
-    return params
+    this.params = feedParams
  }

  async peekLatest(): Promise<AppBskyFeedDefs.FeedViewPost> {
@@ -63,9 +57,8 @@ export class AuthorFeedAPI implements FeedAPI {
      return feed.filter(post => {
        const isReply = post.reply
        const isRepost = AppBskyFeedDefs.isReasonRepost(post.reason)
-        const isPin = AppBskyFeedDefs.isReasonPin(post.reason)
        if (!isReply) return true
-        if (isRepost || isPin) return true
+        if (isRepost) return true
        return isReply && isAuthorReplyChain(this.params.actor, post, feed)
      })
    }
@@ -13,19 +13,17 @@ import {isNative} from '#/platform/detection'

 const DEFAULT_TARGET_SCALE = isNative || isTouchDevice ? 0.98 : 1

-const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
-
 export function PressableScale({
  targetScale = DEFAULT_TARGET_SCALE,
  children,
-  style,
+  contentContainerStyle,
  onPressIn,
  onPressOut,
  ...rest
 }: {
  targetScale?: number
-  style?: StyleProp<ViewStyle>
-} & Exclude<PressableProps, 'onPressIn' | 'onPressOut' | 'style'>) {
+  contentContainerStyle?: StyleProp<ViewStyle>
+} & Exclude<PressableProps, 'onPressIn' | 'onPressOut'>) {
  const scale = useSharedValue(1)

  const animatedStyle = useAnimatedStyle(() => ({
@@ -33,7 +31,7 @@ export function PressableScale({
  }))

  return (
-    <AnimatedPressable
+    <Pressable
      accessibilityRole="button"
      onPressIn={e => {
        'worklet'
@@ -51,9 +49,10 @@ export function PressableScale({
        cancelAnimation(scale)
        scale.value = withTiming(1, {duration: 100})
      }}
-      style={[animatedStyle, style]}
      {...rest}>
-      {children}
-    </AnimatedPressable>
+      <Animated.View style={[animatedStyle, contentContainerStyle]}>
+        {children as React.ReactNode}
+      </Animated.View>
+    </Pressable>
  )
 }
@@ -2,6 +2,7 @@ import {useCallback, useState} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
 import {SessionAccount, useSessionApi} from '#/state/session'
@@ -13,6 +14,7 @@ import {LogEvents} from '../statsig/statsig'
 export function useAccountSwitcher() {
  const [pendingDid, setPendingDid] = useState<string | null>(null)
  const {_} = useLingui()
+  const {track} = useAnalytics()
  const {resumeSession} = useSessionApi()
  const {requestSwitchToAccount} = useLoggedOutViewControls()

@@ -21,6 +23,7 @@ export function useAccountSwitcher() {
      account: SessionAccount,
      logContext: LogEvents['account:loggedIn']['logContext'],
    ) => {
+      track('Settings:SwitchAccountButtonClicked')
      if (pendingDid) {
        // The session API isn't resilient to race conditions so let's just ignore this.
        return
@@ -59,7 +62,7 @@ export function useAccountSwitcher() {
        setPendingDid(null)
      }
    },
-    [_, resumeSession, requestSwitchToAccount, pendingDid],
+    [_, track, resumeSession, requestSwitchToAccount, pendingDid],
  )

  return {onPressSwitchAccount, pendingDid}
@@ -1,11 +1,11 @@
 import React from 'react'
 import * as Linking from 'expo-linking'

-import {logEvent} from '#/lib/statsig/statsig'
-import {isNative} from '#/platform/detection'
-import {useSession} from '#/state/session'
-import {useComposerControls} from '#/state/shell'
-import {useCloseAllActiveElements} from '#/state/util'
+import {logEvent} from 'lib/statsig/statsig'
+import {isNative} from 'platform/detection'
+import {useSession} from 'state/session'
+import {useComposerControls} from 'state/shell'
+import {useCloseAllActiveElements} from 'state/util'
 import {useIntentDialogs} from '#/components/intents/IntentDialogs'
 import {Referrer} from '../../../modules/expo-bluesky-swiss-army'

@@ -52,7 +52,6 @@ export function useIntentHandler() {
          composeIntent({
            text: params.get('text'),
            imageUrisStr: params.get('imageUris'),
-            videoUri: params.get('videoUri'),
          })
          return
        }
@@ -81,25 +80,14 @@ export function useComposeIntent() {
    ({
      text,
      imageUrisStr,
-      videoUri,
    }: {
      text: string | null
-      imageUrisStr: string | null
-      videoUri: string | null
+      imageUrisStr: string | null // unused for right now, will be used later with intents
    }) => {
      if (!hasSession) return

      closeAllActiveElements()

-      // Whenever a video URI is present, we don't support adding images right now.
-      if (videoUri) {
-        openComposer({
-          text: text ?? undefined,
-          videoUri,
-        })
-        return
-      }
-
      const imageUris = imageUrisStr
        ?.split(',')
        .filter(part => {
@@ -3,18 +3,19 @@ import * as Notifications from 'expo-notifications'
 import {CommonActions, useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'

-import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
-import {NavigationProp} from '#/lib/routes/types'
-import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
-import {isAndroid} from '#/platform/detection'
-import {useCurrentConvoId} from '#/state/messages/current-convo-id'
-import {RQKEY as RQKEY_NOTIFS} from '#/state/queries/notifications/feed'
-import {invalidateCachedUnreadPage} from '#/state/queries/notifications/unread'
-import {truncateAndInvalidate} from '#/state/queries/util'
-import {useSession} from '#/state/session'
-import {useLoggedOutViewControls} from '#/state/shell/logged-out'
-import {useCloseAllActiveElements} from '#/state/util'
+import {track} from 'lib/analytics/analytics'
+import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher'
+import {NavigationProp} from 'lib/routes/types'
+import {logEvent} from 'lib/statsig/statsig'
+import {isAndroid} from 'platform/detection'
+import {useCurrentConvoId} from 'state/messages/current-convo-id'
+import {RQKEY as RQKEY_NOTIFS} from 'state/queries/notifications/feed'
+import {invalidateCachedUnreadPage} from 'state/queries/notifications/unread'
+import {truncateAndInvalidate} from 'state/queries/util'
+import {useSession} from 'state/session'
+import {useLoggedOutViewControls} from 'state/shell/logged-out'
+import {useCloseAllActiveElements} from 'state/util'
 import {resetToTab} from '#/Navigation'

 type NotificationReason =
@@ -227,6 +228,7 @@ export function useNotificationsHandler() {
            {},
            logger.DebugContext.notifications,
          )
+          track('Notificatons:OpenApp')
          logEvent('notifications:openApp', {})
          invalidateCachedUnreadPage()
          truncateAndInvalidate(queryClient, RQKEY_NOTIFS())
@@ -1,7 +1,7 @@
 import {Dimensions} from 'react-native'

-import {isSafari} from '#/lib/browser'
-import {isWeb} from '#/platform/detection'
+import {isSafari} from 'lib/browser'
+import {isWeb} from 'platform/detection'

 const {height: SCREEN_HEIGHT} = Dimensions.get('window')

@@ -185,20 +185,6 @@ export function parseEmbedPlayerFromUrl(
          playerUri: `https://open.spotify.com/embed/track/${id ?? idOrType}`,
        }
      }
-      if (typeOrLocale === 'episode' || idOrType === 'episode') {
-        return {
-          type: 'spotify_song',
-          source: 'spotify',
-          playerUri: `https://open.spotify.com/embed/episode/${id ?? idOrType}`,
-        }
-      }
-      if (typeOrLocale === 'show' || idOrType === 'show') {
-        return {
-          type: 'spotify_song',
-          source: 'spotify',
-          playerUri: `https://open.spotify.com/embed/show/${id ?? idOrType}`,
-        }
-      }
    }
  }

@@ -3,6 +3,7 @@ import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
 import {SessionAccount, useSession, useSessionApi} from '#/state/session'
@@ -22,11 +23,16 @@ export const ChooseAccountForm = ({
  onPressBack: () => void
 }) => {
  const [pendingDid, setPendingDid] = React.useState<string | null>(null)
+  const {track, screen} = useAnalytics()
  const {_} = useLingui()
  const {currentAccount} = useSession()
  const {resumeSession} = useSessionApi()
  const {setShowLoggedOut} = useLoggedOutViewControls()

+  React.useEffect(() => {
+    screen('Choose Account')
+  }, [screen])
+
  const onSelect = React.useCallback(
    async (account: SessionAccount) => {
      if (pendingDid) {
@@ -50,6 +56,7 @@ export const ChooseAccountForm = ({
          logContext: 'ChooseAccountForm',
          withPassword: false,
        })
+        track('Sign In', {resumedSession: true})
        Toast.show(_(msg`Signed in as @${account.handle}`))
      } catch (e: any) {
        logger.error('choose account: initSession failed', {
@@ -63,6 +70,7 @@ export const ChooseAccountForm = ({
    },
    [
      currentAccount,
+      track,
      resumeSession,
      pendingDid,
      onSelectAccount,
@@ -1,4 +1,4 @@
-import React, {useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import {ActivityIndicator, Keyboard, View} from 'react-native'
 import {ComAtprotoServerDescribeServer} from '@atproto/api'
 import {BskyAgent} from '@atproto/api'
@@ -6,6 +6,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import * as EmailValidator from 'email-validator'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {isNetworkError} from '#/lib/strings/errors'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
@@ -40,8 +41,13 @@ export const ForgotPasswordForm = ({
  const t = useTheme()
  const [isProcessing, setIsProcessing] = useState<boolean>(false)
  const [email, setEmail] = useState<string>('')
+  const {screen} = useAnalytics()
  const {_} = useLingui()

+  useEffect(() => {
+    screen('Signin:ForgotPassword')
+  }, [screen])
+
  const onPressSelectService = React.useCallback(() => {
    Keyboard.dismiss()
  }, [])
@@ -13,14 +13,15 @@ import {
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-import {useRequestNotificationsPermission} from '#/lib/notifications/notifications'
+import {useAnalytics} from '#/lib/analytics/analytics'
 import {isNetworkError} from '#/lib/strings/errors'
 import {cleanError} from '#/lib/strings/errors'
 import {createFullHandle} from '#/lib/strings/handles'
 import {logger} from '#/logger'
-import {useSetHasCheckedForStarterPack} from '#/state/preferences/used-starter-packs'
 import {useSessionApi} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
+import {useSetHasCheckedForStarterPack} from 'state/preferences/used-starter-packs'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {FormError} from '#/components/forms/FormError'
@@ -56,6 +57,7 @@ export const LoginForm = ({
  onPressBack: () => void
  onPressForgotPassword: () => void
 }) => {
+  const {track} = useAnalytics()
  const t = useTheme()
  const [isProcessing, setIsProcessing] = useState<boolean>(false)
  const [isAuthFactorTokenNeeded, setIsAuthFactorTokenNeeded] =
@@ -72,7 +74,8 @@ export const LoginForm = ({

  const onPressSelectService = React.useCallback(() => {
    Keyboard.dismiss()
-  }, [])
+    track('Signin:PressedSelectService')
+  }, [track])

  const onPressNext = async () => {
    if (isProcessing) return
@@ -1,8 +1,9 @@
-import React from 'react'
+import React, {useEffect} from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {atoms as a, useBreakpoints} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Text} from '#/components/Typography'
@@ -13,9 +14,14 @@ export const PasswordUpdatedForm = ({
 }: {
  onPressNext: () => void
 }) => {
+  const {screen} = useAnalytics()
  const {_} = useLingui()
  const {gtMobile} = useBreakpoints()

+  useEffect(() => {
+    screen('Signin:PasswordUpdatedForm')
+  }, [screen])
+
  return (
    <FormContainer
      testID="passwordUpdatedForm"
@@ -1,9 +1,10 @@
-import React, {useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import {ActivityIndicator, View} from 'react-native'
 import {BskyAgent} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {isNetworkError} from '#/lib/strings/errors'
 import {cleanError} from '#/lib/strings/errors'
 import {checkAndFormatResetCode} from '#/lib/strings/password'
@@ -30,9 +31,14 @@ export const SetNewPasswordForm = ({
  onPressBack: () => void
  onPasswordSet: () => void
 }) => {
+  const {screen} = useAnalytics()
  const {_} = useLingui()
  const t = useTheme()

+  useEffect(() => {
+    screen('Signin:SetNewPasswordForm')
+  }, [screen])
+
  const [isProcessing, setIsProcessing] = useState<boolean>(false)
  const [resetCode, setResetCode] = useState<string>('')
  const [password, setPassword] = useState<string>('')
@@ -4,6 +4,7 @@ import {LayoutAnimationConfig} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {DEFAULT_SERVICE} from '#/lib/constants'
 import {logger} from '#/logger'
 import {useServiceQuery} from '#/state/queries/service'
@@ -30,6 +31,7 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
  const {_} = useLingui()

  const {accounts} = useSession()
+  const {track} = useAnalytics()
  const {requestedAccountSwitchTo} = useLoggedOutView()
  const requestedAccount = accounts.find(
    acc => acc.did === requestedAccountSwitchTo,
@@ -85,6 +87,7 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
  }, [serviceError, serviceUrl, _])

  const onPressForgotPassword = () => {
+    track('Signin:PressedForgotPassword')
    setCurrentForm(Forms.ForgotPassword)
  }

@@ -7,6 +7,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {getLabelingServiceTitle} from '#/lib/moderation'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
 import {logger} from '#/logger'
@@ -162,6 +163,7 @@ export function ModerationScreenInner({
  const {_} = useLingui()
  const t = useTheme()
  const setMinimalShellMode = useSetMinimalShellMode()
+  const {screen} = useAnalytics()
  const {gtMobile} = useBreakpoints()
  const {mutedWordsDialogControl} = useGlobalDialogsControlContext()
  const birthdateDialogControl = Dialog.useDialogControl()
@@ -173,8 +175,9 @@ export function ModerationScreenInner({

  useFocusEffect(
    React.useCallback(() => {
+      screen('Moderation')
      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
+    }, [screen, setMinimalShellMode]),
  )

  const {mutateAsync: setAdultContentPref, variables: optimisticAdultContent} =
@@ -7,26 +7,27 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'

-import {uploadBlob} from '#/lib/api'
+import {useAnalytics} from '#/lib/analytics/analytics'
 import {
  BSKY_APP_ACCOUNT_DID,
  DISCOVER_SAVED_FEED,
  TIMELINE_SAVED_FEED,
 } from '#/lib/constants'
-import {useRequestNotificationsPermission} from '#/lib/notifications/notifications'
 import {logEvent} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
-import {useSetHasCheckedForStarterPack} from '#/state/preferences/used-starter-packs'
-import {getAllListMembers} from '#/state/queries/list-members'
 import {preferencesQueryKey} from '#/state/queries/preferences'
 import {RQKEY as profileRQKey} from '#/state/queries/profile'
 import {useAgent} from '#/state/session'
 import {useOnboardingDispatch} from '#/state/shell'
 import {useProgressGuideControls} from '#/state/shell/progress-guide'
+import {uploadBlob} from 'lib/api'
+import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
+import {useSetHasCheckedForStarterPack} from 'state/preferences/used-starter-packs'
+import {getAllListMembers} from 'state/queries/list-members'
 import {
  useActiveStarterPack,
  useSetActiveStarterPack,
-} from '#/state/shell/starter-pack'
+} from 'state/shell/starter-pack'
 import {
  DescriptionText,
  OnboardingControls,
@@ -47,6 +48,7 @@ import {Text} from '#/components/Typography'
 export function StepFinished() {
  const {_} = useLingui()
  const t = useTheme()
+  const {track} = useAnalytics()
  const {state, dispatch} = React.useContext(Context)
  const onboardDispatch = useOnboardingDispatch()
  const [saving, setSaving] = React.useState(false)
@@ -188,6 +190,8 @@ export function StepFinished() {
    startProgressGuide('like-10-and-follow-7')
    dispatch({type: 'finish'})
    onboardDispatch({type: 'finish'})
+    track('OnboardingV2:StepFinished:End')
+    track('OnboardingV2:Complete')
    logEvent('onboarding:finished:nextPressed', {
      usedStarterPack: Boolean(starterPack),
      starterPackName: AppBskyGraphStarterpack.isRecord(starterPack?.record)
@@ -210,6 +214,7 @@ export function StepFinished() {
    agent,
    dispatch,
    onboardDispatch,
+    track,
    activeStarterPack,
    state,
    requestNotificationsPermission,
@@ -218,6 +223,10 @@ export function StepFinished() {
    startProgressGuide,
  ])

+  React.useEffect(() => {
+    track('OnboardingV2:StepFinished:Start')
+  }, [track])
+
  return (
    <View style={[a.align_start]}>
      <IconCircle icon={Check} style={[a.mb_2xl]} />
@@ -4,6 +4,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQuery} from '@tanstack/react-query'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {logEvent} from '#/lib/statsig/statsig'
 import {capitalize} from '#/lib/strings/capitalize'
 import {logger} from '#/logger'
@@ -35,6 +36,7 @@ export function StepInterests() {
  const {_} = useLingui()
  const t = useTheme()
  const {gtMobile} = useBreakpoints()
+  const {track} = useAnalytics()
  const interestsDisplayNames = useInterestsDisplayNames()

  const {state, dispatch} = React.useContext(Context)
@@ -88,6 +90,7 @@ export function StepInterests() {
          `onboarding: getTaggedSuggestions fetch or processing failed`,
        )
        logger.error(e)
+        track('OnboardingV2:StepInterests:Error')

        throw new Error(`a network error occurred`)
      }
@@ -105,6 +108,11 @@ export function StepInterests() {
        selectedInterests: interests,
      })
      dispatch({type: 'next'})
+
+      track('OnboardingV2:StepInterests:End', {
+        selectedInterests: interests,
+        selectedInterestsLength: interests.length,
+      })
      logEvent('onboarding:interests:nextPressed', {
        selectedInterests: interests,
        selectedInterestsLength: interests.length,
@@ -113,12 +121,18 @@ export function StepInterests() {
      logger.info(`onboading: error saving interests`)
      logger.error(e)
    }
-  }, [interests, data, setSaving, dispatch])
+  }, [interests, data, setSaving, dispatch, track])

  const skipOnboarding = React.useCallback(() => {
    onboardDispatch({type: 'finish'})
    dispatch({type: 'finish'})
-  }, [onboardDispatch, dispatch])
+    track('OnboardingV2:Skip')
+  }, [onboardDispatch, dispatch, track])
+
+  React.useEffect(() => {
+    track('OnboardingV2:Begin')
+    track('OnboardingV2:StepInterests:Start')
+  }, [track])

  const title = isError ? (
    <Trans>Oh no! Something went wrong.</Trans>
@@ -1,19 +1,14 @@
 import React from 'react'
 import {View} from 'react-native'
-import type ViewShot from 'react-native-view-shot'
+import ViewShot from 'react-native-view-shot'

 import {useAvatar} from '#/screens/Onboarding/StepProfile/index'
 import {atoms as a} from '#/alf'

-const LazyViewShot = React.lazy(
-  // @ts-expect-error dynamic import
-  () => import('react-native-view-shot/src/index'),
-)
-
 const SIZE_MULTIPLIER = 5

 export interface PlaceholderCanvasRef {
-  capture: () => Promise<string | undefined>
+  capture: () => Promise<string>
 }

 // This component is supposed to be invisible to the user. We only need this for ViewShot to have something to
@@ -21,7 +16,7 @@ export interface PlaceholderCanvasRef {
 export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
  function PlaceholderCanvas({}, ref) {
    const {avatar} = useAvatar()
-    const viewshotRef = React.useRef<ViewShot>(null)
+    const viewshotRef = React.useRef()
    const Icon = avatar.placeholder.component

    const styles = React.useMemo(
@@ -37,16 +32,13 @@ export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
    )

    React.useImperativeHandle(ref, () => ({
-      capture: async () => {
-        if (viewshotRef.current?.capture) {
-          return await viewshotRef.current.capture()
-        }
-      },
+      // @ts-ignore this library doesn't have types
+      capture: viewshotRef.current.capture,
    }))

    return (
      <View style={styles.container}>
-        <LazyViewShot
+        <ViewShot
          // @ts-ignore this library doesn't have types
          ref={viewshotRef}
          options={{
@@ -68,7 +60,7 @@ export const PlaceholderCanvas = React.forwardRef<PlaceholderCanvasRef, {}>(
              style={{color: 'white'}}
            />
          </View>
-        </LazyViewShot>
+        </ViewShot>
      </View>
    )
  },
@@ -9,13 +9,14 @@ import {
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-import {usePhotoLibraryPermission} from '#/lib/hooks/usePermissions'
-import {compressIfNeeded} from '#/lib/media/manip'
-import {openCropper} from '#/lib/media/picker'
-import {getDataUriSize} from '#/lib/media/util'
-import {useRequestNotificationsPermission} from '#/lib/notifications/notifications'
+import {useAnalytics} from '#/lib/analytics/analytics'
 import {logEvent, useGate} from '#/lib/statsig/statsig'
-import {isNative, isWeb} from '#/platform/detection'
+import {usePhotoLibraryPermission} from 'lib/hooks/usePermissions'
+import {compressIfNeeded} from 'lib/media/manip'
+import {openCropper} from 'lib/media/picker'
+import {getDataUriSize} from 'lib/media/util'
+import {useRequestNotificationsPermission} from 'lib/notifications/notifications'
+import {isNative, isWeb} from 'platform/detection'
 import {
  DescriptionText,
  OnboardingControls,
@@ -67,6 +68,7 @@ export function StepProfile() {
  const {_} = useLingui()
  const t = useTheme()
  const {gtMobile} = useBreakpoints()
+  const {track} = useAnalytics()
  const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
  const gate = useGate()
  const requestNotificationsPermission = useRequestNotificationsPermission()
@@ -85,6 +87,10 @@ export function StepProfile() {

  const canvasRef = React.useRef<PlaceholderCanvasRef>(null)

+  React.useEffect(() => {
+    track('OnboardingV2:StepProfile:Start')
+  }, [track])
+
  React.useEffect(() => {
    requestNotificationsPermission('StartOnboarding')
  }, [gate, requestNotificationsPermission])
@@ -126,10 +132,6 @@ export function StepProfile() {

  const onContinue = React.useCallback(async () => {
    let imageUri = avatar?.image?.path
-
-    // In the event that view-shot didn't load in time and the user pressed continue, this will just be undefined
-    // and the default avatar will be used. We don't want to block getting through create if this fails for some
-    // reason
    if (!imageUri || avatar.useCreatedAvatar) {
      imageUri = await canvasRef.current?.capture()
    }
@@ -149,8 +151,9 @@ export function StepProfile() {
    }

    dispatch({type: 'next'})
+    track('OnboardingV2:StepProfile:End')
    logEvent('onboarding:profile:nextPressed', {})
-  }, [avatar, dispatch])
+  }, [avatar, dispatch, track])

  const onDoneCreating = React.useCallback(() => {
    setAvatar(prev => ({
@@ -51,15 +51,13 @@ export type OnboardingAction =
  | {
      type: 'setProfileStepResults'
      isCreatedAvatar: boolean
-      image: OnboardingState['profileStepResults']['image'] | undefined
-      imageUri: string | undefined
+      image?: OnboardingState['profileStepResults']['image']
+      imageUri: string
      imageMime: string
-      creatorState:
-        | {
-            emoji: Emoji
-            backgroundColor: AvatarColor
-          }
-        | undefined
+      creatorState?: {
+        emoji: Emoji
+        backgroundColor: AvatarColor
+      }
    }

 export type ApiResponseMap = {
@@ -12,17 +12,18 @@ import {useLingui} from '@lingui/react'

 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import {MAX_LABELERS} from '#/lib/constants'
-import {useHaptics} from '#/lib/haptics'
 import {isAppLabeler} from '#/lib/moderation'
 import {logger} from '#/logger'
-import {isIOS} from '#/platform/detection'
-import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {Shadow} from '#/state/cache/types'
 import {useModalControls} from '#/state/modals'
 import {useLabelerSubscriptionMutation} from '#/state/queries/labeler'
 import {useLikeMutation, useUnlikeMutation} from '#/state/queries/like'
 import {usePreferencesQuery} from '#/state/queries/preferences'
 import {useRequireAuth, useSession} from '#/state/session'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {useHaptics} from 'lib/haptics'
+import {isIOS} from 'platform/detection'
+import {useProfileShadow} from 'state/cache/profile-shadow'
 import {ProfileMenu} from '#/view/com/profile/ProfileMenu'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf'
@@ -65,6 +66,7 @@ let ProfileHeaderLabeler = ({
  const {_} = useLingui()
  const {currentAccount, hasSession} = useSession()
  const {openModal} = useModalControls()
+  const {track} = useAnalytics()
  const requireAuth = useRequireAuth()
  const playHaptic = useHaptics()
  const cantSubscribePrompt = Prompt.usePromptControl()
@@ -100,10 +102,12 @@ let ProfileHeaderLabeler = ({

      if (likeUri) {
        await unlikeMod({uri: likeUri})
+        track('CustomFeed:Unlike')
        setLikeCount(c => c - 1)
        setLikeUri('')
      } else {
        const res = await likeMod({uri: labeler.uri, cid: labeler.cid})
+        track('CustomFeed:Like')
        setLikeCount(c => c + 1)
        setLikeUri(res.uri)
      }
@@ -116,14 +120,15 @@ let ProfileHeaderLabeler = ({
      )
      logger.error(`Failed to toggle labeler like`, {message: e.message})
    }
-  }, [labeler, playHaptic, likeUri, unlikeMod, likeMod, _])
+  }, [labeler, playHaptic, likeUri, unlikeMod, track, likeMod, _])

  const onPressEditProfile = React.useCallback(() => {
+    track('ProfileHeader:EditProfileButtonClicked')
    openModal({
      name: 'edit-profile',
      profile,
    })
-  }, [openModal, profile])
+  }, [track, openModal, profile])

  const onPressSubscribe = React.useCallback(
    () =>
@@ -9,10 +9,8 @@ import {
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {logger} from '#/logger'
 import {isIOS} from '#/platform/detection'
-import {useProfileShadow} from '#/state/cache/profile-shadow'
 import {Shadow} from '#/state/cache/types'
 import {useModalControls} from '#/state/modals'
 import {
@@ -20,6 +18,9 @@ import {
  useProfileFollowMutationQueue,
 } from '#/state/queries/profile'
 import {useRequireAuth, useSession} from '#/state/session'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {useProfileShadow} from 'state/cache/profile-shadow'
 import {ProfileMenu} from '#/view/com/profile/ProfileMenu'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a} from '#/alf'
@@ -58,6 +59,7 @@ let ProfileHeaderStandard = ({
  const {currentAccount, hasSession} = useSession()
  const {_} = useLingui()
  const {openModal} = useModalControls()
+  const {track} = useAnalytics()
  const moderation = useMemo(
    () => moderateProfile(profile, moderationOpts),
    [profile, moderationOpts],
@@ -75,15 +77,17 @@ let ProfileHeaderStandard = ({
    profile.viewer?.blockingByList

  const onPressEditProfile = React.useCallback(() => {
+    track('ProfileHeader:EditProfileButtonClicked')
    openModal({
      name: 'edit-profile',
      profile,
    })
-  }, [openModal, profile])
+  }, [track, openModal, profile])

  const onPressFollow = () => {
    requireAuth(async () => {
      try {
+        track('ProfileHeader:FollowButtonClicked')
        await queueFollow()
        Toast.show(
          _(
@@ -105,6 +109,7 @@ let ProfileHeaderStandard = ({
  const onPressUnfollow = () => {
    requireAuth(async () => {
      try {
+        track('ProfileHeader:UnfollowButtonClicked')
        await queueUnfollow()
        Toast.show(
          _(
@@ -124,6 +129,7 @@ let ProfileHeaderStandard = ({
  }

  const unblockAccount = React.useCallback(async () => {
+    track('ProfileHeader:UnblockAccountButtonClicked')
    try {
      await queueUnblock()
      Toast.show(_(msg`Account unblocked`))
@@ -133,7 +139,7 @@ let ProfileHeaderStandard = ({
        Toast.show(_(msg`There was an issue! ${e.toString()}`), 'xmark')
      }
    }
-  }, [_, queueUnblock])
+  }, [_, queueUnblock, track])

  const isMe = React.useMemo(
    () => currentAccount?.did === profile.did,
@@ -6,8 +6,8 @@ import * as EmailValidator from 'email-validator'
 import type tldts from 'tldts'

 import {logEvent} from '#/lib/statsig/statsig'
-import {isEmailMaybeInvalid} from '#/lib/strings/email'
 import {logger} from '#/logger'
+import {isEmailMaybeInvalid} from 'lib/strings/email'
 import {ScreenTransition} from '#/screens/Login/ScreenTransition'
 import {is13, is18, useSignupContext} from '#/screens/Signup/state'
 import {Policies} from '#/screens/Signup/StepInfo/Policies'
@@ -59,9 +59,6 @@ export function StepInfo({
    import('tldts/dist/index.cjs.min.js').then(tldts => {
      tldtsRef.current = tldts
    })
-    // This will get used in the avatar creator a few steps later, so lets preload it now
-    // @ts-expect-error - valid path
-    import('react-native-view-shot/src/index')
  }, [])

  const onNextPress = () => {
@@ -5,6 +5,7 @@ import {AppBskyGraphStarterpack} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {FEEDBACK_FORM_URL} from '#/lib/constants'
 import {useServiceQuery} from '#/state/queries/service'
 import {useStarterPackQuery} from '#/state/queries/starter-packs'
@@ -30,6 +31,7 @@ import {Text} from '#/components/Typography'
 export function Signup({onPressBack}: {onPressBack: () => void}) {
  const {_} = useLingui()
  const t = useTheme()
+  const {screen} = useAnalytics()
  const [state, dispatch] = React.useReducer(reducer, initialState)
  const {gtMobile} = useBreakpoints()
  const submit = useSubmitSignup()
@@ -54,6 +56,10 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
    refetch,
  } = useServiceQuery(state.serviceUrl)

+  React.useEffect(() => {
+    screen('CreateAccount')
+  }, [screen])
+
  React.useEffect(() => {
    if (isFetching) {
      dispatch({type: 'setIsLoading', value: true})
@@ -21,7 +21,6 @@ export interface PostShadow {
  repostUri: string | undefined
  isDeleted: boolean
  embed: AppBskyEmbedRecord.View | AppBskyEmbedRecordWithMedia.View | undefined
-  pinned: boolean
 }

 export const POST_TOMBSTONE = Symbol('PostTombstone')
@@ -114,7 +113,6 @@ function mergeShadow(
      ...(post.viewer || {}),
      like: 'likeUri' in shadow ? shadow.likeUri : post.viewer?.like,
      repost: 'repostUri' in shadow ? shadow.repostUri : post.viewer?.repost,
-      pinned: 'pinned' in shadow ? shadow.pinned : post.viewer?.pinned,
    },
  })
 }
@@ -1,87 +0,0 @@
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useMutation, useQueryClient} from '@tanstack/react-query'
-
-import {logger} from '#/logger'
-import {RQKEY as FEED_RQKEY} from '#/state/queries/post-feed'
-import * as Toast from '#/view/com/util/Toast'
-import {updatePostShadow} from '../cache/post-shadow'
-import {useAgent, useSession} from '../session'
-import {useProfileUpdateMutation} from './profile'
-
-export function usePinnedPostMutation() {
-  const {_} = useLingui()
-  const {currentAccount} = useSession()
-  const agent = useAgent()
-  const queryClient = useQueryClient()
-  const {mutateAsync: profileUpdateMutate} = useProfileUpdateMutation()
-
-  return useMutation({
-    mutationFn: async ({
-      postUri,
-      postCid,
-      action,
-    }: {
-      postUri: string
-      postCid: string
-      action: 'pin' | 'unpin'
-    }) => {
-      const pinCurrentPost = action === 'pin'
-      let prevPinnedPost: string | undefined
-      try {
-        updatePostShadow(queryClient, postUri, {pinned: pinCurrentPost})
-
-        // get the currently pinned post so we can optimistically remove the pin from it
-        if (!currentAccount) throw new Error('Not logged in')
-        const {data: profile} = await agent.getProfile({
-          actor: currentAccount.did,
-        })
-        prevPinnedPost = profile.pinnedPost?.uri
-        if (prevPinnedPost && prevPinnedPost !== postUri) {
-          updatePostShadow(queryClient, prevPinnedPost, {pinned: false})
-        }
-
-        await profileUpdateMutate({
-          profile,
-          updates: existing => {
-            existing.pinnedPost = pinCurrentPost
-              ? {uri: postUri, cid: postCid}
-              : undefined
-            return existing
-          },
-          checkCommitted: res =>
-            pinCurrentPost
-              ? res.data.pinnedPost?.uri === postUri
-              : !res.data.pinnedPost,
-        })
-
-        if (pinCurrentPost) {
-          Toast.show(_(msg`Post pinned`))
-        } else {
-          Toast.show(_(msg`Post unpinned`))
-        }
-
-        queryClient.invalidateQueries({
-          queryKey: FEED_RQKEY(
-            `author|${currentAccount.did}|posts_and_author_threads`,
-          ),
-        })
-        queryClient.invalidateQueries({
-          queryKey: FEED_RQKEY(
-            `author|${currentAccount.did}|posts_with_replies`,
-          ),
-        })
-      } catch (e: any) {
-        Toast.show(_(msg`Failed to pin post`))
-        logger.error('Failed to pin post', {message: String(e)})
-        // revert optimistic update
-        updatePostShadow(queryClient, postUri, {
-          pinned: !pinCurrentPost,
-        })
-        if (prevPinnedPost && prevPinnedPost !== postUri) {
-          updatePostShadow(queryClient, prevPinnedPost, {pinned: true})
-        }
-      }
-    },
-  })
-}
@@ -91,7 +91,6 @@ export interface FeedPostSlice {
  feedContext: string | undefined
  reason?:
    | AppBskyFeedDefs.ReasonRepost
-    | AppBskyFeedDefs.ReasonPin
    | ReasonFeedSource
    | {[k: string]: unknown; $type: string}
 }
@@ -2,6 +2,7 @@ import {useCallback} from 'react'
 import {AppBskyActorDefs, AppBskyFeedDefs, AtUri} from '@atproto/api'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'

+import {track} from '#/lib/analytics/analytics'
 import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue'
 import {logEvent, LogEvents, toClout} from '#/lib/statsig/statsig'
 import {updatePostShadow} from '#/state/cache/post-shadow'
@@ -192,6 +193,9 @@ function usePostLikeMutation(
      })
      return agent.like(uri, cid)
    },
+    onSuccess() {
+      track('Post:Like')
+    },
  })
 }

@@ -204,6 +208,9 @@ function usePostUnlikeMutation(
      logEvent('post:unlike:sampled', {logContext})
      return agent.deleteLike(likeUri)
    },
+    onSuccess() {
+      track('Post:Unlike')
+    },
  })
 }

@@ -278,6 +285,9 @@ function usePostRepostMutation(
      logEvent('post:repost:sampled', {logContext})
      return agent.repost(post.uri, post.cid)
    },
+    onSuccess() {
+      track('Post:Repost')
+    },
  })
 }

@@ -290,6 +300,9 @@ function usePostUnrepostMutation(
      logEvent('post:unrepost:sampled', {logContext})
      return agent.deleteRepost(repostUri)
    },
+    onSuccess() {
+      track('Post:Unrepost')
+    },
  })
 }

@@ -300,8 +313,9 @@ export function usePostDeleteMutation() {
    mutationFn: async ({uri}) => {
      await agent.deletePost(uri)
    },
-    onSuccess(_, variables) {
+    onSuccess(data, variables) {
      updatePostShadow(queryClient, variables.uri, {isDeleted: true})
+      track('Post:Delete')
    },
  })
 }
@@ -5,6 +5,7 @@ import {
 } from '@atproto/api'
 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'

+import {track} from '#/lib/analytics/analytics'
 import {PROD_DEFAULT_FEED} from '#/lib/constants'
 import {replaceEqualDeep} from '#/lib/functions'
 import {getAge} from '#/lib/strings/time'
@@ -217,6 +218,7 @@ export function useAddSavedFeedsMutation() {
  >({
    mutationFn: async savedFeeds => {
      await agent.addSavedFeeds(savedFeeds)
+      track('CustomFeed:Save')
      // triggers a refetch
      await queryClient.invalidateQueries({
        queryKey: preferencesQueryKey,
@@ -232,6 +234,7 @@ export function useRemoveFeedMutation() {
  return useMutation<void, unknown, Pick<AppBskyActorDefs.SavedFeed, 'id'>>({
    mutationFn: async savedFeed => {
      await agent.removeSavedFeeds([savedFeed.id])
+      track('CustomFeed:Unsave')
      // triggers a refetch
      await queryClient.invalidateQueries({
        queryKey: preferencesQueryKey,
@@ -16,6 +16,7 @@ import {
  useQueryClient,
 } from '@tanstack/react-query'

+import {track} from '#/lib/analytics/analytics'
 import {uploadBlob} from '#/lib/api'
 import {until} from '#/lib/async/until'
 import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue'
@@ -159,9 +160,6 @@ export function useProfileUpdateMutation() {
        } else {
          existing.displayName = updates.displayName
          existing.description = updates.description
-          if ('pinnedPost' in updates) {
-            existing.pinnedPost = updates.pinnedPost
-          }
        }
        if (newUserAvatarPromise) {
          const res = await newUserAvatarPromise
@@ -318,6 +316,9 @@ function useProfileFollowMutation(
      })
      return await agent.follow(did)
    },
+    onSuccess(data, variables) {
+      track('Profile:Follow', {username: variables.did})
+    },
  })
 }

@@ -328,6 +329,7 @@ function useProfileUnfollowMutation(
  return useMutation<void, Error, {did: string; followUri: string}>({
    mutationFn: async ({followUri}) => {
      logEvent('profile:unfollow:sampled', {logContext})
+      track('Profile:Unfollow', {username: followUri})
      return await agent.deleteFollow(followUri)
    },
  })
@@ -105,16 +105,17 @@ export function useSuggestedFollowsQuery(options?: SuggestedFollowsOptions) {

 export function useSuggestedFollowsByActorQuery({did}: {did: string}) {
  const agent = useAgent()
-  return useQuery({
+  return useQuery<AppBskyGraphGetSuggestedFollowsByActor.OutputSchema, Error>({
    queryKey: suggestedFollowsByActorQueryKey(did),
    queryFn: async () => {
      const res = await agent.app.bsky.graph.getSuggestedFollowsByActor({
        actor: did,
      })
-      const suggestions = res.data.isFallback
-        ? []
-        : res.data.suggestions.filter(profile => !profile.viewer?.following)
-      return {suggestions}
+      const data = res.data.isFallback ? {suggestions: []} : res.data
+      data.suggestions = data.suggestions.filter(profile => {
+        return !profile.viewer?.following
+      })
+      return data
    },
  })
 }
@@ -7,17 +7,17 @@ import {QueryClient, useQuery, useQueryClient} from '@tanstack/react-query'

 import {AbortError} from '#/lib/async/cancelable'
 import {SUPPORTED_MIME_TYPES, SupportedMimeTypes} from '#/lib/constants'
+import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
 import {
  ServerError,
  UploadLimitError,
  VideoTooLargeError,
-} from '#/lib/media/video/errors'
-import {CompressedVideo} from '#/lib/media/video/types'
-import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
-import {useCompressVideoMutation} from '#/state/queries/video/compress-video'
-import {useVideoAgent} from '#/state/queries/video/util'
-import {useUploadVideoMutation} from '#/state/queries/video/video-upload'
+} from 'lib/media/video/errors'
+import {CompressedVideo} from 'lib/media/video/types'
+import {useCompressVideoMutation} from 'state/queries/video/compress-video'
+import {useVideoAgent} from 'state/queries/video/util'
+import {useUploadVideoMutation} from 'state/queries/video/video-upload'

 type Status = 'idle' | 'compressing' | 'processing' | 'uploading' | 'done'

@@ -101,11 +101,9 @@ function reducer(queryClient: QueryClient) {

 export function useUploadVideo({
  setStatus,
-  initialVideoUri,
 }: {
  setStatus: (status: string) => void
  onSuccess: () => void
-  initialVideoUri?: string
 }) {
  const {_} = useLingui()
  const queryClient = useQueryClient()
@@ -239,24 +237,21 @@ export function useUploadVideo({
    signal: state.abortController.signal,
  })

-  const selectVideo = React.useCallback(
-    (asset: ImagePickerAsset) => {
-      // compression step on native converts to mp4, so no need to check there
-      if (isWeb) {
-        const mimeType = getMimeType(asset)
-        if (!SUPPORTED_MIME_TYPES.includes(mimeType as SupportedMimeTypes)) {
-          throw new Error(_(msg`Unsupported video type: ${mimeType}`))
-        }
+  const selectVideo = (asset: ImagePickerAsset) => {
+    // compression step on native converts to mp4, so no need to check there
+    if (isWeb) {
+      const mimeType = getMimeType(asset)
+      if (!SUPPORTED_MIME_TYPES.includes(mimeType as SupportedMimeTypes)) {
+        throw new Error(_(msg`Unsupported video type: ${mimeType}`))
      }
+    }

-      dispatch({
-        type: 'SetAsset',
-        asset,
-      })
-      onSelectVideo(asset)
-    },
-    [_, onSelectVideo],
-  )
+    dispatch({
+      type: 'SetAsset',
+      asset,
+    })
+    onSelectVideo(asset)
+  }

  const clearVideo = () => {
    dispatch({type: 'Reset'})
@@ -270,13 +265,6 @@ export function useUploadVideo({
    })
  }, [])

-  // Whenever we receive an initial video uri, we should immediately run compression if necessary
-  useEffect(() => {
-    if (initialVideoUri) {
-      selectVideo({uri: initialVideoUri} as ImagePickerAsset)
-    }
-  }, [initialVideoUri, selectVideo])
-
  return {
    state,
    dispatch,
@@ -1,6 +1,7 @@
 import React from 'react'
 import {AtpSessionEvent, BskyAgent} from '@atproto/api'

+import {track} from '#/lib/analytics/analytics'
 import {logEvent} from '#/lib/statsig/statsig'
 import {isWeb} from '#/platform/detection'
 import * as persisted from '#/state/persisted'
@@ -69,6 +70,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
    async params => {
      addSessionDebugLog({type: 'method:start', method: 'createAccount'})
      const signal = cancelPendingTask()
+      track('Try Create Account')
      logEvent('account:create:begin', {})
      const {agent, account} = await createAgentAndCreateAccount(
        params,
@@ -83,6 +85,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
        newAgent: agent,
        newAccount: account,
      })
+      track('Create Account')
      logEvent('account:create:success', {})
      addSessionDebugLog({type: 'method:end', method: 'createAccount', account})
    },
@@ -106,6 +109,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
        newAgent: agent,
        newAccount: account,
      })
+      track('Sign In', {resumedSession: false})
      logEvent('account:loggedIn', {logContext, withPassword: true})
      addSessionDebugLog({type: 'method:end', method: 'login', account})
    },
@@ -38,7 +38,6 @@ export interface ComposerOpts {
  openEmojiPicker?: (pos: DOMRect | undefined) => void
  text?: string
  imageUris?: {uri: string; width: number; height: number; altText?: string}[]
-  videoUri?: string
 }

 type StateContext = ComposerOpts | undefined
@@ -1,5 +1,6 @@
 import React from 'react'

+import {track} from '#/lib/analytics/analytics'
 import * as persisted from '#/state/persisted'

 export const OnboardingScreenSteps = {
@@ -54,14 +55,17 @@ function reducer(state: StateContext, action: Action): StateContext {
      return compute({...state, step: nextStep})
    }
    case 'start': {
+      track('Onboarding:Begin')
      persisted.write('onboarding', {step: 'Welcome'})
      return compute({...state, step: 'Welcome'})
    }
    case 'finish': {
+      track('Onboarding:Complete')
      persisted.write('onboarding', {step: 'Home'})
      return compute({...state, step: 'Home'})
    }
    case 'skip': {
+      track('Onboarding:Skipped')
      persisted.write('onboarding', {step: 'Home'})
      return compute({...state, step: 'Home'})
    }
@@ -7,21 +7,101 @@
 */

@font-face {
-  font-family: 'InterVariable';
-  src: local('InterVariable'),
-    url(/assets/fonts/inter/InterVariable.ttf) format('truetype');
-  font-weight: 300 1000;
+  font-family: 'Inter-Regular';
+  src: local('Inter-Regular'),
+    url(/assets/fonts/inter/Inter-Regular.otf) format('opentype');
+  font-weight: 400;
  font-style: normal;
  font-display: swap;
 }
@font-face {
-  font-family: 'InterVariableItalic';
-  src: local('InterVariableItalic'),
-    url(/assets/fonts/inter/InterVariable-Italic.ttf) format('truetype');
-  font-weight: 300 1000;
+  font-family: 'Inter-Italic';
+  src: local('Inter-Italic'),
+    url(/assets/fonts/inter/Inter-Italic.otf) format('opentype');
+  font-weight: 400;
  font-style: italic;
  font-display: swap;
 }
+/*
+@font-face {
+  font-family: "Inter-Medium";
+  src: local("Inter-Medium"), url(/assets/fonts/inter/Inter-Medium.otf) format("opentype");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter-MediumItalic";
+  src: local("Inter-MediumItalic"), url(/assets/fonts/inter/Inter-MediumItalic.otf) format("opentype");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+*/
+@font-face {
+  font-family: 'Inter-SemiBold';
+  src: local('Inter-SemiBold'),
+    url(/assets/fonts/inter/Inter-SemiBold.otf) format('opentype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter-SemiBoldItalic';
+  src: local('Inter-SemiBoldItalic'),
+    url(/assets/fonts/inter/Inter-SemiBoldItalic.otf) format('opentype');
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+/*
+@font-face {
+  font-family: "Inter-Bold";
+  src: local("Inter-Bold"), url(/assets/fonts/inter/Inter-Bold.otf) format("opentype");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter-BoldItalic";
+  src: local("Inter-BoldItalic"), url(/assets/fonts/inter/Inter-BoldItalic.otf) format("opentype");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+*/
+@font-face {
+  font-family: 'Inter-ExtraBold';
+  src: local('Inter-ExtraBold'),
+    url(/assets/fonts/inter/Inter-ExtraBold.otf) format('opentype');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Inter-ExtraBoldItalic';
+  src: local('Inter-ExtraBoldItalic'),
+    url(/assets/fonts/inter/Inter-ExtraBoldItalic.otf) format('opentype');
+  font-weight: 800;
+  font-style: italic;
+  font-display: swap;
+}
+/*
+@font-face {
+  font-family: "Inter-Black";
+  src: local("Inter-Black"), url(/assets/fonts/inter/Inter-Black.otf) format("opentype");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "Inter-BlackItalic";
+  src: local("Inter-BlackItalic"), url(/assets/fonts/inter/Inter-BlackItalic.otf) format("opentype");
+  font-weight: 900;
+  font-style: italic;
+  font-display: swap;
+}
+*/

 /**
 * BEGIN STYLES
@@ -4,6 +4,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {logEvent} from '#/lib/statsig/statsig'
 import {s} from '#/lib/styles'
@@ -31,6 +32,7 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
  const {_} = useLingui()
  const pal = usePalette('default')
  const setMinimalShellMode = useSetMinimalShellMode()
+  const {screen} = useAnalytics()
  const {requestedAccountSwitchTo} = useLoggedOutView()
  const [screenState, setScreenState] = React.useState<ScreenState>(() => {
    if (requestedAccountSwitchTo === 'new') {
@@ -46,8 +48,9 @@ export function LoggedOut({onDismiss}: {onDismiss?: () => void}) {
  const {clearRequestedAccount} = useLoggedOutViewControls()

  React.useEffect(() => {
+    screen('Login')
    setMinimalShellMode(true)
-  }, [setMinimalShellMode])
+  }, [screen, setMinimalShellMode])

  const onPressDismiss = React.useCallback(() => {
    if (onDismiss) {
@@ -39,21 +39,21 @@ export const SplashScreen = ({
            <Trans>What's up?</Trans>
          </Text>
        </View>
-        <View
-          testID="signinOrCreateAccount"
-          style={[a.px_xl, a.gap_md, a.pb_2xl]}>
+        <View testID="signinOrCreateAccount">
          <Button
            testID="createAccountButton"
            onPress={onPressCreateAccount}
+            accessibilityRole="button"
            label={_(msg`Create new account`)}
            accessibilityHint={_(
              msg`Opens flow to create a new Bluesky account`,
            )}
+            style={[a.mx_xl, a.mb_xl]}
            size="large"
            variant="solid"
            color="primary">
            <ButtonText>
-              <Trans>Create account</Trans>
+              <Trans>Create a new account</Trans>
            </ButtonText>
          </Button>
          <Button
@@ -63,6 +63,7 @@ export const SplashScreen = ({
            accessibilityHint={_(
              msg`Opens flow to sign into your existing Bluesky account`,
            )}
+            style={[a.mx_xl, a.mb_xl]}
            size="large"
            variant="solid"
            color="secondary">
@@ -85,19 +85,21 @@ export const SplashScreen = ({

            <View
              testID="signinOrCreateAccount"
-              style={[a.w_full, a.px_xl, a.gap_md, a.pb_2xl, {maxWidth: 320}]}>
+              style={[a.w_full, {maxWidth: 320}]}>
              <Button
                testID="createAccountButton"
                onPress={onPressCreateAccount}
+                accessibilityRole="button"
                label={_(msg`Create new account`)}
                accessibilityHint={_(
                  msg`Opens flow to create a new Bluesky account`,
                )}
+                style={[a.mx_xl, a.mb_xl]}
                size="large"
                variant="solid"
                color="primary">
                <ButtonText>
-                  <Trans>Create account</Trans>
+                  <Trans>Create a new account</Trans>
                </ButtonText>
              </Button>
              <Button
@@ -107,6 +109,7 @@ export const SplashScreen = ({
                accessibilityHint={_(
                  msg`Opens flow to sign into your existing Bluesky account`,
                )}
+                style={[a.mx_xl, a.mb_xl]}
                size="large"
                variant="solid"
                color="secondary">
@@ -45,6 +45,7 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import * as apilib from '#/lib/api/index'
 import {until} from '#/lib/async/until'
 import {MAX_GRAPHEME_LENGTH} from '#/lib/constants'
@@ -136,7 +137,6 @@ export const ComposePost = ({
  openEmojiPicker,
  text: initText,
  imageUris: initImageUris,
-  videoUri: initVideoUri,
  cancelRef,
 }: Props & {
  cancelRef?: React.RefObject<CancelRef>
@@ -146,6 +146,7 @@ export const ComposePost = ({
  const {data: currentProfile} = useProfileQuery({did: currentAccount!.did})
  const {isModalActive} = useModals()
  const {closeComposer} = useComposerControls()
+  const {track} = useAnalytics()
  const pal = usePalette('default')
  const {isMobile} = useWebMediaQueries()
  const {_} = useLingui()
@@ -198,7 +199,6 @@ export const ComposePost = ({
        onPressPublish(true)
      }
    },
-    initialVideoUri: initVideoUri,
  })
  const hasVideo = Boolean(videoUploadState.asset || videoUploadState.video)

@@ -308,6 +308,7 @@ export const ComposePost = ({

  const onPhotoPasted = useCallback(
    async (uri: string) => {
+      track('Composer:PastedPhotos')
      if (uri.startsWith('data:video/')) {
        selectVideo({uri, type: 'video', height: 0, width: 0})
      } else {
@@ -315,7 +316,7 @@ export const ComposePost = ({
        onImageAdd([res])
      }
    },
-    [selectVideo, onImageAdd],
+    [track, selectVideo, onImageAdd],
  )

  const isAltTextRequiredAndMissing = useMemo(() => {
@@ -443,6 +444,10 @@ export const ComposePost = ({
            logContext: 'Composer',
          })
        }
+        track('Create Post', {
+          imageCount: images.length,
+        })
+        if (replyTo && replyTo.uri) track('Post:Reply')
      }
      if (postUri && !replyTo) {
        emitPostCreated()
@@ -492,6 +497,7 @@ export const ComposePost = ({
      setExtLink,
      setLangPrefs,
      threadgateAllowUISettings,
+      track,
      videoAltText,
      videoUploadState.asset,
      videoUploadState.pendingPublish,
@@ -3,6 +3,7 @@ import * as MediaLibrary from 'expo-media-library'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {POST_IMG_MAX} from '#/lib/constants'
 import {useCameraPermission} from '#/lib/hooks/usePermissions'
 import {openCamera} from '#/lib/media/picker'
@@ -19,6 +20,7 @@ type Props = {
 }

 export function OpenCameraBtn({disabled, onAdd}: Props) {
+  const {track} = useAnalytics()
  const {_} = useLingui()
  const {requestCameraAccessIfNeeded} = useCameraPermission()
  const [mediaPermissionRes, requestMediaPermission] =
@@ -26,6 +28,7 @@ export function OpenCameraBtn({disabled, onAdd}: Props) {
  const t = useTheme()

  const onPressTakePicture = useCallback(async () => {
+    track('Composer:CameraOpened')
    try {
      if (!(await requestCameraAccessIfNeeded())) {
        return
@@ -55,6 +58,7 @@ export function OpenCameraBtn({disabled, onAdd}: Props) {
    }
  }, [
    onAdd,
+    track,
    requestCameraAccessIfNeeded,
    mediaPermissionRes,
    requestMediaPermission,
@@ -3,6 +3,7 @@ import React, {useCallback} from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {usePhotoLibraryPermission} from '#/lib/hooks/usePermissions'
 import {openPicker} from '#/lib/media/picker'
 import {isNative} from '#/platform/detection'
@@ -18,11 +19,14 @@ type Props = {
 }

 export function SelectPhotoBtn({size, disabled, onAdd}: Props) {
+  const {track} = useAnalytics()
  const {_} = useLingui()
  const {requestPhotoAccessIfNeeded} = usePhotoLibraryPermission()
  const t = useTheme()

  const onPressSelectPhotos = useCallback(async () => {
+    track('Composer:GalleryOpened')
+
    if (isNative && !(await requestPhotoAccessIfNeeded())) {
      return
    }
@@ -37,7 +41,7 @@ export function SelectPhotoBtn({size, disabled, onAdd}: Props) {
    )

    onAdd(results)
-  }, [requestPhotoAccessIfNeeded, size, onAdd])
+  }, [track, requestPhotoAccessIfNeeded, size, onAdd])

  return (
    <Button
@@ -245,11 +245,7 @@ export const TextInput = forwardRef(function TextInputImpl(
        multiline
        scrollEnabled={false}
        numberOfLines={4}
-        style={[
-          inputTextStyle,
-          a.w_full,
-          {textAlignVertical: 'top', minHeight: 60},
-        ]}
+        style={[inputTextStyle, a.w_full, {textAlignVertical: 'top'}]}
        {...props}>
        {textDecorated}
      </PasteInput>
@@ -1,17 +1,13 @@
-import React, {useRef} from 'react'
-import {View} from 'react-native'
-import Animated, {FadeInDown, FadeOut} from 'react-native-reanimated'
-import {AppBskyActorDefs} from '@atproto/api'
-import {Trans} from '@lingui/macro'
-
-import {PressableScale} from '#/lib/custom-animations/PressableScale'
-import {sanitizeDisplayName} from '#/lib/strings/display-names'
-import {sanitizeHandle} from '#/lib/strings/handles'
-import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
-import {UserAvatar} from '#/view/com/util/UserAvatar'
-import {atoms as a, useTheme} from '#/alf'
-import {Text} from '#/components/Typography'
+import React, {useEffect, useRef} from 'react'
+import {Animated, TouchableOpacity, StyleSheet, View} from 'react-native'
+import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
+import {usePalette} from 'lib/hooks/usePalette'
+import {Text} from 'view/com/util/text/Text'
+import {UserAvatar} from 'view/com/util/UserAvatar'
 import {useGrapheme} from '../hooks/useGrapheme'
+import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
+import {Trans} from '@lingui/macro'
+import {AppBskyActorDefs} from '@atproto/api'

 export function Autocomplete({
  prefix,
@@ -20,8 +16,8 @@ export function Autocomplete({
  prefix: string
  onSelect: (item: string) => void
 }) {
-  const t = useTheme()
-
+  const pal = usePalette('default')
+  const positionInterp = useAnimatedValue(0)
  const {getGraphemeString} = useGrapheme()
  const isActive = !!prefix
  const {data: suggestions, isFetching} = useActorAutocompleteQuery(prefix)
@@ -32,85 +28,108 @@ export function Autocomplete({
    suggestionsRef.current = suggestions
  }

-  if (!isActive) return null
+  useEffect(() => {
+    Animated.timing(positionInterp, {
+      toValue: isActive ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start()
+  }, [positionInterp, isActive])
+
+  const topAnimStyle = {
+    transform: [
+      {
+        translateY: positionInterp.interpolate({
+          inputRange: [0, 1],
+          outputRange: [200, 0],
+        }),
+      },
+    ],
+  }

  return (
-    <Animated.View
-      entering={FadeInDown.duration(200)}
-      exiting={FadeOut.duration(100)}
-      style={[
-        t.atoms.bg,
-        a.mt_sm,
-        a.border,
-        a.rounded_sm,
-        t.atoms.border_contrast_high,
-        {marginLeft: -62},
-      ]}>
-      {suggestionsRef.current?.length ? (
-        suggestionsRef.current.slice(0, 5).map((item, index, arr) => {
-          // Eventually use an average length
-          const MAX_CHARS = 40
-          const MAX_HANDLE_CHARS = 20
+    <Animated.View style={topAnimStyle}>
+      {isActive ? (
+        <View style={[pal.view, styles.container, pal.border]}>
+          {suggestionsRef.current?.length ? (
+            suggestionsRef.current.slice(0, 5).map(item => {
+              // Eventually use an average length
+              const MAX_CHARS = 40
+              const MAX_HANDLE_CHARS = 20

-          // Using this approach because styling is not respecting
-          // bounding box wrapping (before converting to ellipsis)
-          const {name: displayHandle, remainingCharacters} = getGraphemeString(
-            item.handle,
-            MAX_HANDLE_CHARS,
-          )
+              // Using this approach because styling is not respecting
+              // bounding box wrapping (before converting to ellipsis)
+              const {name: displayHandle, remainingCharacters} =
+                getGraphemeString(item.handle, MAX_HANDLE_CHARS)

-          const {name: displayName} = getGraphemeString(
-            item.displayName || item.handle,
-            MAX_CHARS -
-              MAX_HANDLE_CHARS +
-              (remainingCharacters > 0 ? remainingCharacters : 0),
-          )
+              const {name: displayName} = getGraphemeString(
+                item.displayName ?? item.handle,
+                MAX_CHARS -
+                  MAX_HANDLE_CHARS +
+                  (remainingCharacters > 0 ? remainingCharacters : 0),
+              )

-          return (
-            <View
-              style={[
-                index !== arr.length - 1 && a.border_b,
-                t.atoms.border_contrast_high,
-                a.px_sm,
-                a.py_md,
-              ]}
-              key={item.handle}>
-              <PressableScale
-                testID="autocompleteButton"
-                style={[
-                  a.flex_row,
-                  a.gap_sm,
-                  a.justify_between,
-                  a.align_center,
-                ]}
-                onPress={() => onSelect(item.handle)}
-                accessibilityLabel={`Select ${item.handle}`}
-                accessibilityHint="">
-                <View style={[a.flex_row, a.gap_sm, a.align_center]}>
-                  <UserAvatar
-                    avatar={item.avatar ?? null}
-                    size={24}
-                    type={item.associated?.labeler ? 'labeler' : 'user'}
-                  />
-                  <Text
-                    style={[a.text_md, a.font_bold]}
-                    emoji={true}
-                    numberOfLines={1}>
-                    {sanitizeDisplayName(displayName)}
+              return (
+                <TouchableOpacity
+                  testID="autocompleteButton"
+                  key={item.handle}
+                  style={[pal.border, styles.item]}
+                  onPress={() => onSelect(item.handle)}
+                  accessibilityLabel={`Select ${item.handle}`}
+                  accessibilityHint="">
+                  <View style={styles.avatarAndHandle}>
+                    <UserAvatar
+                      avatar={item.avatar ?? null}
+                      size={24}
+                      type={item.associated?.labeler ? 'labeler' : 'user'}
+                    />
+                    <Text type="md-medium" style={pal.text}>
+                      {displayName}
+                    </Text>
+                  </View>
+                  <Text type="sm" style={pal.textLight} numberOfLines={1}>
+                    @{displayHandle}
                  </Text>
-                </View>
-                <Text style={[t.atoms.text_contrast_medium]} numberOfLines={1}>
-                  {sanitizeHandle(displayHandle, '@')}
-                </Text>
-              </PressableScale>
-            </View>
-          )
-        })
-      ) : (
-        <Text style={[a.text_md, a.px_sm, a.py_md]}>
-          {isFetching ? <Trans>Loading...</Trans> : <Trans>No result</Trans>}
-        </Text>
-      )}
+                </TouchableOpacity>
+              )
+            })
+          ) : (
+            <Text type="sm" style={[pal.text, pal.border, styles.noResults]}>
+              {isFetching ? (
+                <Trans>Loading...</Trans>
+              ) : (
+                <Trans>No result</Trans>
+              )}
+            </Text>
+          )}
+        </View>
+      ) : null}
    </Animated.View>
  )
 }
+
+const styles = StyleSheet.create({
+  container: {
+    marginLeft: -50, // Composer avatar width
+    top: 10,
+    borderTopWidth: 1,
+  },
+  item: {
+    borderBottomWidth: 1,
+    paddingVertical: 12,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 6,
+  },
+  avatarAndHandle: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: 6,
+    alignItems: 'center',
+  },
+  noResults: {
+    paddingVertical: 12,
+  },
+})
@@ -7,6 +7,7 @@ import {useLingui} from '@lingui/react'

 import {isNative} from '#/platform/detection'
 import {ThreadgateAllowUISetting} from '#/state/queries/threadgate'
+import {useAnalytics} from 'lib/analytics/analytics'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
@@ -29,11 +30,13 @@ export function ThreadgateBtn({

  style?: StyleProp<AnimatedStyle<ViewStyle>>
 }) {
+  const {track} = useAnalytics()
  const {_} = useLingui()
  const t = useTheme()
  const control = Dialog.useDialogControl()

  const onPress = () => {
+    track('Composer:ThreadgateOpened')
    if (isNative && Keyboard.isVisible()) {
      Keyboard.dismiss()
    }
@@ -6,11 +6,8 @@ import {useLingui} from '@lingui/react'
 import {NavigationProp, useNavigation} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'

-import {ComposeIcon2} from '#/lib/icons'
 import {getRootNavigation, getTabState, TabState} from '#/lib/routes/helpers'
-import {AllNavigatorParams} from '#/lib/routes/types'
 import {logEvent} from '#/lib/statsig/statsig'
-import {s} from '#/lib/styles'
 import {isNative} from '#/platform/detection'
 import {listenSoftReset} from '#/state/events'
 import {FeedFeedbackProvider, useFeedFeedback} from '#/state/feed-feedback'
@@ -20,6 +17,10 @@ import {truncateAndInvalidate} from '#/state/queries/util'
 import {useSession} from '#/state/session'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {useComposerControls} from '#/state/shell/composer'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {ComposeIcon2} from 'lib/icons'
+import {AllNavigatorParams} from 'lib/routes/types'
+import {s} from 'lib/styles'
 import {useHeaderOffset} from '#/components/hooks/useHeaderOffset'
 import {Feed} from '../posts/Feed'
 import {FAB} from '../util/fab/FAB'
@@ -53,6 +54,7 @@ export function FeedPage({
  const {openComposer} = useComposerControls()
  const [isScrolledDown, setIsScrolledDown] = React.useState(false)
  const setMinimalShellMode = useSetMinimalShellMode()
+  const {screen, track} = useAnalytics()
  const headerOffset = useHeaderOffset()
  const feedFeedback = useFeedFeedback(feed, hasSession)
  const scrollElRef = React.useRef<ListMethods>(null)
@@ -87,12 +89,14 @@ export function FeedPage({
    if (!isPageFocused) {
      return
    }
+    screen('Feed')
    return listenSoftReset(onSoftReset)
-  }, [onSoftReset, isPageFocused])
+  }, [onSoftReset, screen, isPageFocused])

  const onPressCompose = React.useCallback(() => {
+    track('HomeScreen:PressCompose')
    openComposer({})
-  }, [openComposer])
+  }, [openComposer, track])

  const onPressLoadLatest = React.useCallback(() => {
    scrollToTop()
@@ -7,21 +7,21 @@ import {
  ViewStyle,
 } from 'react-native'
 import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {cleanError} from '#/lib/strings/errors'
-import {logger} from '#/logger'
-import {useModalControls} from '#/state/modals'
-import {useListMembersQuery} from '#/state/queries/list-members'
-import {useSession} from '#/state/session'
-import {ProfileCard} from '../profile/ProfileCard'
-import {ErrorMessage} from '../util/error/ErrorMessage'
-import {Button} from '../util/forms/Button'
 import {List, ListRef} from '../util/List'
 import {ProfileCardFeedLoadingPlaceholder} from '../util/LoadingPlaceholder'
+import {ErrorMessage} from '../util/error/ErrorMessage'
 import {LoadMoreRetryBtn} from '../util/LoadMoreRetryBtn'
+import {ProfileCard} from '../profile/ProfileCard'
+import {Button} from '../util/forms/Button'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {useListMembersQuery} from '#/state/queries/list-members'
+import {logger} from '#/logger'
+import {useModalControls} from '#/state/modals'
+import {useSession} from '#/state/session'
+import {cleanError} from '#/lib/strings/errors'
+import {useLingui} from '@lingui/react'
+import {msg} from '@lingui/macro'

 const LOADING_ITEM = {_reactKey: '__loading__'}
 const EMPTY_ITEM = {_reactKey: '__empty__'}
@@ -51,6 +51,7 @@ export function ListMembers({
  headerOffset?: number
  desktopFixedHeightOffset?: number
 }) {
+  const {track} = useAnalytics()
  const {_} = useLingui()
  const [isRefreshing, setIsRefreshing] = React.useState(false)
  const {isMobile} = useWebMediaQueries()
@@ -97,6 +98,7 @@ export function ListMembers({
  // =

  const onRefresh = React.useCallback(async () => {
+    track('Lists:onRefresh')
    setIsRefreshing(true)
    try {
      await refetch()
@@ -104,16 +106,17 @@ export function ListMembers({
      logger.error('Failed to refresh lists', {message: err})
    }
    setIsRefreshing(false)
-  }, [refetch, setIsRefreshing])
+  }, [refetch, track, setIsRefreshing])

  const onEndReached = React.useCallback(async () => {
    if (isFetching || !hasNextPage || isError) return
+    track('Lists:onEndReached')
    try {
      await fetchNextPage()
    } catch (err) {
      logger.error('Failed to load more lists', {message: err})
    }
-  }, [isFetching, hasNextPage, isError, fetchNextPage])
+  }, [isFetching, hasNextPage, isError, fetchNextPage, track])

  const onPressRetryLoadMore = React.useCallback(() => {
    fetchNextPage()
@@ -11,14 +11,15 @@ import {AppBskyGraphDefs as GraphDefs} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-import {usePalette} from '#/lib/hooks/usePalette'
 import {cleanError} from '#/lib/strings/errors'
-import {s} from '#/lib/styles'
 import {logger} from '#/logger'
-import {isWeb} from '#/platform/detection'
-import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {MyListsFilter, useMyListsQuery} from '#/state/queries/my-lists'
-import {EmptyState} from '#/view/com/util/EmptyState'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {s} from 'lib/styles'
+import {isWeb} from 'platform/detection'
+import {useModerationOpts} from 'state/preferences/moderation-opts'
+import {EmptyState} from 'view/com/util/EmptyState'
 import {atoms as a, useTheme} from '#/alf'
 import * as ListCard from '#/components/ListCard'
 import {ErrorMessage} from '../util/error/ErrorMessage'
@@ -43,6 +44,7 @@ export function MyLists({
 }) {
  const pal = usePalette('default')
  const t = useTheme()
+  const {track} = useAnalytics()
  const {_} = useLingui()
  const moderationOpts = useModerationOpts()
  const [isPTRing, setIsPTRing] = React.useState(false)
@@ -69,6 +71,7 @@ export function MyLists({
  // =

  const onRefresh = React.useCallback(async () => {
+    track('Lists:onRefresh')
    setIsPTRing(true)
    try {
      await refetch()
@@ -76,7 +79,7 @@ export function MyLists({
      logger.error('Failed to refresh lists', {message: err})
    }
    setIsPTRing(false)
-  }, [refetch, setIsPTRing])
+  }, [refetch, track, setIsPTRing])

  // rendering
  // =
@@ -10,6 +10,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
@@ -47,6 +48,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
    ref,
  ) {
    const t = useTheme()
+    const {track} = useAnalytics()
    const {_} = useLingui()
    const [isPTRing, setIsPTRing] = React.useState(false)
    const opts = React.useMemo(() => ({enabled}), [enabled])
@@ -100,6 +102,7 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
    }))

    const onRefresh = React.useCallback(async () => {
+      track('Lists:onRefresh')
      setIsPTRing(true)
      try {
        await refetch()
@@ -107,16 +110,18 @@ export const ProfileLists = React.forwardRef<SectionRef, ProfileListsProps>(
        logger.error('Failed to refresh lists', {message: err})
      }
      setIsPTRing(false)
-    }, [refetch, setIsPTRing])
+    }, [refetch, track, setIsPTRing])

    const onEndReached = React.useCallback(async () => {
      if (isFetching || !hasNextPage || isError) return
+
+      track('Lists:onEndReached')
      try {
        await fetchNextPage()
      } catch (err) {
        logger.error('Failed to load more lists', {message: err})
      }
-    }, [isFetching, hasNextPage, isError, fetchNextPage])
+    }, [isFetching, hasNextPage, isError, fetchNextPage, track])

    const onPressRetryLoadMore = React.useCallback(() => {
      fetchNextPage()
@@ -11,16 +11,17 @@ import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

-import {usePalette} from '#/lib/hooks/usePalette'
-import {cleanError} from '#/lib/strings/errors'
-import {createFullHandle, makeValidHandle} from '#/lib/strings/handles'
-import {s} from '#/lib/styles'
-import {useTheme} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
 import {useModalControls} from '#/state/modals'
 import {useFetchDid, useUpdateHandleMutation} from '#/state/queries/handle'
 import {useServiceQuery} from '#/state/queries/service'
 import {SessionAccount, useAgent, useSession} from '#/state/session'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {cleanError} from 'lib/strings/errors'
+import {createFullHandle, makeValidHandle} from 'lib/strings/handles'
+import {s} from 'lib/styles'
+import {useTheme} from 'lib/ThemeContext'
 import {ErrorMessage} from '../util/error/ErrorMessage'
 import {Button} from '../util/forms/Button'
 import {SelectableBtn} from '../util/forms/SelectableBtn'
@@ -66,6 +67,7 @@ export function Inner({
 }) {
  const {_} = useLingui()
  const pal = usePalette('default')
+  const {track} = useAnalytics()
  const {closeModal} = useModalControls()
  const {mutateAsync: updateHandle, isPending: isUpdateHandlePending} =
    useUpdateHandleMutation()
@@ -89,7 +91,10 @@ export function Inner({
    setHandle('')
    setCanSave(false)
    setCustom(!isCustom)
-  }, [setCustom, isCustom])
+    track(
+      isCustom ? 'EditHandle:ViewCustomForm' : 'EditHandle:ViewProvidedForm',
+    )
+  }, [setCustom, isCustom, track])
  const onPressSave = React.useCallback(async () => {
    if (!userDomain) {
      logger.error(`ChangeHandle: userDomain is undefined`, {
@@ -100,6 +105,7 @@ export function Inner({
    }

    try {
+      track('EditHandle:SetNewHandle')
      const newHandle = isCustom ? handle : createFullHandle(handle, userDomain)
      logger.debug(`Updating handle to ${newHandle}`)
      await updateHandle({
@@ -119,6 +125,7 @@ export function Inner({
    userDomain,
    isCustom,
    onChanged,
+    track,
    closeModal,
    updateHandle,
    serviceInfo,
@@ -14,6 +14,7 @@ import {AppBskyGraphDefs, RichText as RichTextAPI} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {compressIfNeeded} from '#/lib/media/manip'
@@ -53,6 +54,7 @@ export function Component({
  const [error, setError] = useState<string>('')
  const pal = usePalette('default')
  const theme = useTheme()
+  const {track} = useAnalytics()
  const {_} = useLingui()
  const listCreateMutation = useListCreateMutation()
  const listMetadataMutation = useListMetadataMutation()
@@ -118,6 +120,7 @@ export function Component({
        setAvatar(undefined)
        return
      }
+      track('CreateList:AvatarSelected')
      try {
        const finalImg = await compressIfNeeded(img, 1000000)
        setNewAvatar(finalImg)
@@ -126,10 +129,15 @@ export function Component({
        setError(cleanError(e))
      }
    },
-    [setNewAvatar, setAvatar, setError],
+    [track, setNewAvatar, setAvatar, setError],
  )

  const onPressSave = useCallback(async () => {
+    if (isCurateList) {
+      track('CreateList:SaveCurateList')
+    } else {
+      track('CreateList:SaveModList')
+    }
    const nameTrimmed = name.trim()
    if (!nameTrimmed) {
      setError(_(msg`Name is required`))
@@ -192,6 +200,7 @@ export function Component({
    }
    setProcessing(false)
  }, [
+    track,
    setProcessing,
    setError,
    error,
@@ -15,6 +15,7 @@ import {AppBskyActorDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {MAX_DESCRIPTION, MAX_DISPLAY_NAME} from '#/lib/constants'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {compressIfNeeded} from '#/lib/media/manip'
@@ -46,6 +47,7 @@ export function Component({
 }) {
  const pal = usePalette('default')
  const theme = useTheme()
+  const {track} = useAnalytics()
  const {_} = useLingui()
  const {closeModal} = useModalControls()
  const updateMutation = useProfileUpdateMutation()
@@ -79,6 +81,7 @@ export function Component({
        setUserAvatar(null)
        return
      }
+      track('EditProfile:AvatarSelected')
      try {
        const finalImg = await compressIfNeeded(img, 1000000)
        setNewUserAvatar(finalImg)
@@ -87,7 +90,7 @@ export function Component({
        setImageError(cleanError(e))
      }
    },
-    [setNewUserAvatar, setUserAvatar, setImageError],
+    [track, setNewUserAvatar, setUserAvatar, setImageError],
  )

  const onSelectNewBanner = useCallback(
@@ -98,6 +101,7 @@ export function Component({
        setUserBanner(null)
        return
      }
+      track('EditProfile:BannerSelected')
      try {
        const finalImg = await compressIfNeeded(img, 1000000)
        setNewUserBanner(finalImg)
@@ -106,10 +110,11 @@ export function Component({
        setImageError(cleanError(e))
      }
    },
-    [setNewUserBanner, setUserBanner, setImageError],
+    [track, setNewUserBanner, setUserBanner, setImageError],
  )

  const onPressSave = useCallback(async () => {
+    track('EditProfile:Save')
    setImageError('')
    try {
      await updateMutation.mutateAsync({
@@ -128,6 +133,7 @@ export function Component({
      logger.error('Failed to update user profile', {message: String(e)})
    }
  }, [
+    track,
    updateMutation,
    profile,
    onUpdate,
@@ -161,17 +161,10 @@ export const PagerWithHeader = React.forwardRef<PagerRef, PagerWithHeaderProps>(
      (e: NativeScrollEvent) => {
        'worklet'
        const nextScrollY = e.contentOffset.y
-        // HACK: onScroll is reporting some strange values on load (negative header height).
-        // Highly improbable that you'd be overscrolled by over 400px -
-        // in fact, I actually can't do it, so let's just ignore those. -sfn
-        const isPossiblyInvalid =
-          headerHeight > 0 && Math.round(nextScrollY * 2) / 2 === -headerHeight
-        if (!isPossiblyInvalid) {
-          scrollY.value = nextScrollY
-          runOnJS(queueThrottledOnScroll)()
-        }
+        scrollY.value = nextScrollY
+        runOnJS(queueThrottledOnScroll)()
      },
-      [scrollY, queueThrottledOnScroll, headerHeight],
+      [scrollY, queueThrottledOnScroll],
    )

    const onPageSelectedInner = React.useCallback(
@@ -63,7 +63,11 @@ export function PostThreadComposePrompt({
          avatar={profile?.avatar}
          type={profile?.associated?.labeler ? 'labeler' : 'user'}
        />
-        <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
+        <Text
+          style={[
+            isTabletOrDesktop ? a.text_md : a.text_sm,
+            t.atoms.text_contrast_medium,
+          ]}>
          <Trans>Write your reply</Trans>
        </Text>
      </View>
@@ -6,18 +6,19 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'

-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {s} from '#/lib/styles'
 import {logger} from '#/logger'
-import {Shadow, useProfileShadow} from '#/state/cache/profile-shadow'
+import {track} from 'lib/analytics/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {s} from 'lib/styles'
+import {Shadow, useProfileShadow} from 'state/cache/profile-shadow'
 import {
  useProfileFollowMutationQueue,
  useProfileQuery,
-} from '#/state/queries/profile'
-import {useRequireAuth} from '#/state/session'
-import {Text} from '#/view/com/util/text/Text'
-import * as Toast from '#/view/com/util/Toast'
+} from 'state/queries/profile'
+import {useRequireAuth} from 'state/session'
+import {Text} from 'view/com/util/text/Text'
+import * as Toast from 'view/com/util/Toast'

 export function PostThreadFollowBtn({did}: {did: string}) {
  const {data: profile, isLoading} = useProfileQuery({did})
@@ -88,6 +89,7 @@ function PostThreadFollowBtnLoaded({
    if (!isFollowing) {
      requireAuth(async () => {
        try {
+          track('ProfileHeader:FollowButtonClicked')
          await queueFollow()
        } catch (e: any) {
          if (e?.name !== 'AbortError') {
@@ -99,6 +101,7 @@ function PostThreadFollowBtnLoaded({
    } else {
      requireAuth(async () => {
        try {
+          track('ProfileHeader:UnfollowButtonClicked')
          await queueUnfollow()
        } catch (e: any) {
          if (e?.name !== 'AbortError') {
@@ -14,6 +14,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {DISCOVER_FEED_URI, KNOWN_SHUTDOWN_FEEDS} from '#/lib/constants'
 import {useInitialNumToRender} from '#/lib/hooks/useInitialNumToRender'
 import {logEvent, useGate} from '#/lib/statsig/statsig'
@@ -195,6 +196,7 @@ let Feed = ({
  initialNumToRender?: number
 }): React.ReactNode => {
  const theme = useTheme()
+  const {track} = useAnalytics()
  const {_} = useLingui()
  const queryClient = useQueryClient()
  const {currentAccount, hasSession} = useSession()
@@ -403,6 +405,7 @@ let Feed = ({
  // =

  const onRefresh = React.useCallback(async () => {
+    track('Feed:onRefresh')
    logEvent('feed:refresh:sampled', {
      feedType: feedType,
      feedUrl: feed,
@@ -416,7 +419,7 @@ let Feed = ({
      logger.error('Failed to refresh posts feed', {message: err})
    }
    setIsPTRing(false)
-  }, [refetch, setIsPTRing, onHasNew, feed, feedType])
+  }, [refetch, track, setIsPTRing, onHasNew, feed, feedType])

  const onEndReached = React.useCallback(async () => {
    if (isFetching || !hasNextPage || isError) return
@@ -426,6 +429,7 @@ let Feed = ({
      feedUrl: feed,
      itemCount: feedItems.length,
    })
+    track('Feed:onEndReached')
    try {
      await fetchNextPage()
    } catch (err) {
@@ -436,6 +440,7 @@ let Feed = ({
    hasNextPage,
    isError,
    fetchNextPage,
+    track,
    feed,
    feedType,
    feedItems.length,
@@ -38,8 +38,7 @@ import {PostMeta} from '#/view/com/util/PostMeta'
 import {Text} from '#/view/com/util/text/Text'
 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a} from '#/alf'
-import {Pin_Stroke2_Corner0_Rounded as PinIcon} from '#/components/icons/Pin'
-import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost'
+import {Repost_Stroke2_Corner2_Rounded as Repost} from '#/components/icons/Repost'
 import {ContentHider} from '#/components/moderation/ContentHider'
 import {LabelsOnMyPost} from '#/components/moderation/LabelsOnMe'
 import {PostAlerts} from '#/components/moderation/PostAlerts'
@@ -53,7 +52,6 @@ interface FeedItemProps {
  record: AppBskyFeedPost.Record
  reason:
    | AppBskyFeedDefs.ReasonRepost
-    | AppBskyFeedDefs.ReasonPin
    | ReasonFeedSource
    | {[k: string]: unknown; $type: string}
    | undefined
@@ -297,7 +295,7 @@ let FeedItemInner = ({
                    )
              }
              onBeforePress={onOpenReposter}>
-              <RepostIcon
+              <Repost
                style={{color: pal.colors.textLight, marginRight: 3}}
                width={14}
                height={14}
@@ -339,21 +337,6 @@ let FeedItemInner = ({
                )}
              </Text>
            </Link>
-          ) : AppBskyFeedDefs.isReasonPin(reason) ? (
-            <View style={styles.includeReason}>
-              <PinIcon
-                style={{color: pal.colors.textLight, marginRight: 3}}
-                width={14}
-                height={14}
-              />
-              <Text
-                type="sm-bold"
-                style={pal.textLight}
-                lineHeight={1.2}
-                numberOfLines={1}>
-                <Trans>Pinned</Trans>
-              </Text>
-            </View>
          ) : null}
        </View>
      </View>
@@ -6,22 +6,23 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'

-import {HITSLOP_10} from '#/lib/constants'
-import {makeProfileLink} from '#/lib/routes/links'
-import {shareUrl} from '#/lib/sharing'
-import {toShareUrl} from '#/lib/strings/url-helpers'
 import {logger} from '#/logger'
-import {Shadow} from '#/state/cache/types'
-import {useModalControls} from '#/state/modals'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {HITSLOP_10} from 'lib/constants'
+import {makeProfileLink} from 'lib/routes/links'
+import {shareUrl} from 'lib/sharing'
+import {toShareUrl} from 'lib/strings/url-helpers'
+import {Shadow} from 'state/cache/types'
+import {useModalControls} from 'state/modals'
 import {
  RQKEY as profileQueryKey,
  useProfileBlockMutationQueue,
  useProfileFollowMutationQueue,
  useProfileMuteMutationQueue,
-} from '#/state/queries/profile'
-import {useSession} from '#/state/session'
-import {EventStopper} from '#/view/com/util/EventStopper'
-import * as Toast from '#/view/com/util/Toast'
+} from 'state/queries/profile'
+import {useSession} from 'state/session'
+import {EventStopper} from 'view/com/util/EventStopper'
+import * as Toast from 'view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox'
 import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
@@ -48,6 +49,7 @@ let ProfileMenu = ({
  const t = useTheme()
  // TODO ALF this
  const alf = useTheme()
+  const {track} = useAnalytics()
  const {openModal} = useModalControls()
  const reportDialogControl = useReportDialogControl()
  const queryClient = useQueryClient()
@@ -81,10 +83,12 @@ let ProfileMenu = ({
  }, [queryClient, profile.did])

  const onPressShare = React.useCallback(() => {
+    track('ProfileHeader:ShareButtonClicked')
    shareUrl(toShareUrl(makeProfileLink(profile)))
-  }, [profile])
+  }, [track, profile])

  const onPressAddRemoveLists = React.useCallback(() => {
+    track('ProfileHeader:AddToListsButtonClicked')
    openModal({
      name: 'user-add-remove-lists',
      subject: profile.did,
@@ -93,10 +97,11 @@ let ProfileMenu = ({
      onAdd: invalidateProfileQuery,
      onRemove: invalidateProfileQuery,
    })
-  }, [profile, openModal, invalidateProfileQuery])
+  }, [track, profile, openModal, invalidateProfileQuery])

  const onPressMuteAccount = React.useCallback(async () => {
    if (profile.viewer?.muted) {
+      track('ProfileHeader:UnmuteAccountButtonClicked')
      try {
        await queueUnmute()
        Toast.show(_(msg`Account unmuted`))
@@ -107,6 +112,7 @@ let ProfileMenu = ({
        }
      }
    } else {
+      track('ProfileHeader:MuteAccountButtonClicked')
      try {
        await queueMute()
        Toast.show(_(msg`Account muted`))
@@ -117,10 +123,11 @@ let ProfileMenu = ({
        }
      }
    }
-  }, [profile.viewer?.muted, queueUnmute, _, queueMute])
+  }, [profile.viewer?.muted, track, queueUnmute, _, queueMute])

  const blockAccount = React.useCallback(async () => {
    if (profile.viewer?.blocking) {
+      track('ProfileHeader:UnblockAccountButtonClicked')
      try {
        await queueUnblock()
        Toast.show(_(msg`Account unblocked`))
@@ -131,6 +138,7 @@ let ProfileMenu = ({
        }
      }
    } else {
+      track('ProfileHeader:BlockAccountButtonClicked')
      try {
        await queueBlock()
        Toast.show(_(msg`Account blocked`))
@@ -141,9 +149,10 @@ let ProfileMenu = ({
        }
      }
    }
-  }, [profile.viewer?.blocking, _, queueUnblock, queueBlock])
+  }, [profile.viewer?.blocking, track, _, queueUnblock, queueBlock])

  const onPressFollowAccount = React.useCallback(async () => {
+    track('ProfileHeader:FollowButtonClicked')
    try {
      await queueFollow()
      Toast.show(_(msg`Account followed`))
@@ -153,9 +162,10 @@ let ProfileMenu = ({
        Toast.show(_(msg`There was an issue! ${e.toString()}`), 'xmark')
      }
    }
-  }, [_, queueFollow])
+  }, [_, queueFollow, track])

  const onPressUnfollowAccount = React.useCallback(async () => {
+    track('ProfileHeader:UnfollowButtonClicked')
    try {
      await queueUnfollow()
      Toast.show(_(msg`Account unfollowed`))
@@ -165,11 +175,12 @@ let ProfileMenu = ({
        Toast.show(_(msg`There was an issue! ${e.toString()}`), 'xmark')
      }
    }
-  }, [_, queueUnfollow])
+  }, [_, queueUnfollow, track])

  const onPressReportAccount = React.useCallback(() => {
+    track('ProfileHeader:ReportAccountButtonClicked')
    reportDialogControl.open()
-  }, [reportDialogControl])
+  }, [track, reportDialogControl])

  return (
    <EventStopper onKeyDown={false}>
@@ -9,11 +9,12 @@ import {
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useNavigation} from '@react-navigation/native'

-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {NavigationProp} from '#/lib/routes/types'
 import {isWeb} from '#/platform/detection'
 import {useSetDrawerOpen} from '#/state/shell'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {NavigationProp} from 'lib/routes/types'
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import {CenteredView} from './Views'

@@ -30,6 +31,7 @@ export function SimpleViewHeader({
  const pal = usePalette('default')
  const setDrawerOpen = useSetDrawerOpen()
  const navigation = useNavigation<NavigationProp>()
+  const {track} = useAnalytics()
  const {isMobile} = useWebMediaQueries()
  const canGoBack = navigation.canGoBack()

@@ -42,8 +44,9 @@ export function SimpleViewHeader({
  }, [navigation])

  const onPressMenu = React.useCallback(() => {
+    track('ViewHeader:MenuButtonClicked')
    setDrawerOpen(true)
-  }, [setDrawerOpen])
+  }, [track, setDrawerOpen])

  const Container = isMobile ? View : CenteredView
  return (
@@ -6,6 +6,7 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {useMinimalShellHeaderTransform} from '#/lib/hooks/useMinimalShellTransform'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
@@ -41,6 +42,7 @@ export function ViewHeader({
  const {_} = useLingui()
  const setDrawerOpen = useSetDrawerOpen()
  const navigation = useNavigation<NavigationProp>()
+  const {track} = useAnalytics()
  const {isDesktop, isTablet} = useWebMediaQueries()
  const t = useTheme()

@@ -53,8 +55,9 @@ export function ViewHeader({
  }, [navigation])

  const onPressMenu = React.useCallback(() => {
+    track('ViewHeader:MenuButtonClicked')
    setDrawerOpen(true)
-  }, [setDrawerOpen])
+  }, [track, setDrawerOpen])

  if (isDesktop) {
    if (showOnDesktop) {
@@ -1,4 +1,4 @@
-import React, {memo, useCallback} from 'react'
+import React, {memo} from 'react'
 import {
  Platform,
  Pressable,
@@ -18,13 +18,9 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'

-import {getCurrentRoute} from '#/lib/routes/helpers'
 import {makeProfileLink} from '#/lib/routes/links'
 import {CommonNavigatorParams, NavigationProp} from '#/lib/routes/types'
-import {shareUrl} from '#/lib/sharing'
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
-import {toShareUrl} from '#/lib/strings/url-helpers'
-import {useTheme} from '#/lib/ThemeContext'
 import {getTranslatorLink} from '#/locale/helpers'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
@@ -33,7 +29,6 @@ import {useFeedFeedbackContext} from '#/state/feed-feedback'
 import {useLanguagePrefs} from '#/state/preferences'
 import {useHiddenPosts, useHiddenPostsApi} from '#/state/preferences'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
-import {usePinnedPostMutation} from '#/state/queries/pinned-post'
 import {
  usePostDeleteMutation,
  useThreadMuteMutationQueue,
@@ -43,6 +38,10 @@ import {getMaybeDetachedQuoteEmbed} from '#/state/queries/postgate/util'
 import {useToggleReplyVisibilityMutation} from '#/state/queries/threadgate'
 import {useSession} from '#/state/session'
 import {useMergedThreadgateHiddenReplies} from '#/state/threadgate-hidden-replies'
+import {getCurrentRoute} from 'lib/routes/helpers'
+import {shareUrl} from 'lib/sharing'
+import {toShareUrl} from 'lib/strings/url-helpers'
+import {useTheme} from 'lib/ThemeContext'
 import {atoms as a, useBreakpoints, useTheme as useAlf} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
 import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
@@ -66,7 +65,6 @@ import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/E
 import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
 import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
 import {PaperPlane_Stroke2_Corner0_Rounded as Send} from '#/components/icons/PaperPlane'
-import {Pin_Stroke2_Corner0_Rounded as PinIcon} from '#/components/icons/Pin'
 import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '#/components/icons/SettingsGear2'
 import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
 import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
@@ -108,9 +106,7 @@ let PostDropdownBtn = ({
  const {_} = useLingui()
  const defaultCtrlColor = theme.palette.default.postCtrl
  const langPrefs = useLanguagePrefs()
-  const {mutateAsync: deletePostMutate} = usePostDeleteMutation()
-  const {mutateAsync: pinPostMutate, isPending: isPinPending} =
-    usePinnedPostMutation()
+  const postDeleteMutation = usePostDeleteMutation()
  const hiddenPosts = useHiddenPosts()
  const {hidePost} = useHiddenPostsApi()
  const feedFeedback = useFeedFeedbackContext()
@@ -153,9 +149,8 @@ let PostDropdownBtn = ({
    threadgateRecord,
  })
  const isReplyHiddenByThreadgate = threadgateHiddenReplies.has(postUri)
-  const isPinned = post.viewer?.pinned

-  const {mutateAsync: toggleQuoteDetachment, isPending: isDetachPending} =
+  const {mutateAsync: toggleQuoteDetachment, isPending} =
    useToggleQuoteDetachmentMutation()

  const prefetchPostInteractionSettings = usePrefetchPostInteractionSettings({
@@ -174,7 +169,7 @@ let PostDropdownBtn = ({
  )

  const onDeletePost = React.useCallback(() => {
-    deletePostMutate({uri: postUri}).then(
+    postDeleteMutation.mutateAsync({uri: postUri}).then(
      () => {
        Toast.show(_(msg`Post deleted`))

@@ -202,7 +197,7 @@ let PostDropdownBtn = ({
  }, [
    navigation,
    postUri,
-    deletePostMutate,
+    postDeleteMutation,
    postAuthor,
    currentAccount,
    isAuthor,
@@ -349,14 +344,6 @@ let PostDropdownBtn = ({
    toggleReplyVisibility,
  ])

-  const onPressPin = useCallback(() => {
-    pinPostMutate({
-      postUri,
-      postCid,
-      action: isPinned ? 'unpin' : 'pin',
-    })
-  }, [isPinned, pinPostMutate, postCid, postUri])
-
  return (
    <EventStopper onKeyDown={false}>
      <Menu.Root>
@@ -385,33 +372,6 @@ let PostDropdownBtn = ({
        </Menu.Trigger>

        <Menu.Outer>
-          {isAuthor && (
-            <>
-              <Menu.Group>
-                <Menu.Item
-                  testID="pinPostBtn"
-                  label={
-                    isPinned
-                      ? _(msg`Unpin from profile`)
-                      : _(msg`Pin to your profile`)
-                  }
-                  disabled={isPinPending}
-                  onPress={onPressPin}>
-                  <Menu.ItemText>
-                    {isPinned
-                      ? _(msg`Unpin from profile`)
-                      : _(msg`Pin to your profile`)}
-                  </Menu.ItemText>
-                  <Menu.ItemIcon
-                    icon={isPinPending ? Loader : PinIcon}
-                    position="right"
-                  />
-                </Menu.Item>
-              </Menu.Group>
-              <Menu.Divider />
-            </>
-          )}
-
          <Menu.Group>
            {(!hideInPWI || hasSession) && (
              <>
@@ -576,7 +536,7 @@ let PostDropdownBtn = ({

                  {canDetachQuote && (
                    <Menu.Item
-                      disabled={isDetachPending}
+                      disabled={isPending}
                      testID="postDropdownHideBtn"
                      label={
                        quoteEmbed.isDetached
@@ -595,7 +555,7 @@ let PostDropdownBtn = ({
                      </Menu.ItemText>
                      <Menu.ItemIcon
                        icon={
-                          isDetachPending
+                          isPending
                            ? Loader
                            : quoteEmbed.isDetached
                            ? Eye
@@ -4,6 +4,7 @@ import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
@@ -35,6 +36,7 @@ type Props = NativeStackScreenProps<
 export function AccessibilitySettingsScreen({}: Props) {
  const pal = usePalette('default')
  const setMinimalShellMode = useSetMinimalShellMode()
+  const {screen} = useAnalytics()
  const {isMobile, isTabletOrMobile} = useWebMediaQueries()
  const {_} = useLingui()

@@ -49,8 +51,9 @@ export function AccessibilitySettingsScreen({}: Props) {

  useFocusEffect(
    React.useCallback(() => {
+      screen('PreferencesExternalEmbeds')
      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
+    }, [screen, setMinimalShellMode]),
  )

  return (
@@ -12,6 +12,7 @@ import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {CommonNavigatorParams} from '#/lib/routes/types'
@@ -27,7 +28,7 @@ import {Button} from '#/view/com/util/forms/Button'
 import {Text} from '#/view/com/util/text/Text'
 import * as Toast from '#/view/com/util/Toast'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {CenteredView} from '#/view/com/util/Views'
+import {CenteredView} from 'view/com/util/Views'
 import {atoms as a} from '#/alf'
 import {useDialogControl} from '#/components/Dialog'
 import * as Prompt from '#/components/Prompt'
@@ -37,14 +38,16 @@ export function AppPasswords({}: Props) {
  const pal = usePalette('default')
  const {_} = useLingui()
  const setMinimalShellMode = useSetMinimalShellMode()
+  const {screen} = useAnalytics()
  const {isTabletOrDesktop} = useWebMediaQueries()
  const {openModal} = useModalControls()
  const {data: appPasswords, error} = useAppPasswordsQuery()

  useFocusEffect(
    React.useCallback(() => {
+      screen('AppPasswords')
      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
+    }, [screen, setMinimalShellMode]),
  )

  const onAdd = React.useCallback(async () => {
@@ -10,6 +10,7 @@ import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'

 import {APP_LANGUAGES, LANGUAGES} from '#/lib/../locale/languages'
+import {useAnalytics} from '#/lib/analytics/analytics'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
@@ -31,18 +32,21 @@ export function LanguageSettingsScreen(_props: Props) {
  const langPrefs = useLanguagePrefs()
  const setLangPrefs = useLanguagePrefsApi()
  const {isTabletOrDesktop} = useWebMediaQueries()
+  const {screen, track} = useAnalytics()
  const setMinimalShellMode = useSetMinimalShellMode()
  const {openModal} = useModalControls()

  useFocusEffect(
    React.useCallback(() => {
+      screen('Settings')
      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
+    }, [screen, setMinimalShellMode]),
  )

  const onPressContentLanguages = React.useCallback(() => {
+    track('Settings:ContentlanguagesButtonClicked')
    openModal({name: 'content-languages-settings'})
-  }, [openModal])
+  }, [track, openModal])

  const onChangePrimaryLanguage = React.useCallback(
    (value: Parameters<PickerSelectProps['onValueChange']>[0]) => {
@@ -12,15 +12,16 @@ import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'

-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams} from '#/lib/routes/types'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {useMyBlockedAccountsQuery} from '#/state/queries/my-blocked-accounts'
 import {useSetMinimalShellMode} from '#/state/shell'
-import {ProfileCard} from '#/view/com/profile/ProfileCard'
-import {CenteredView} from '#/view/com/util/Views'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {CommonNavigatorParams} from 'lib/routes/types'
+import {ProfileCard} from 'view/com/profile/ProfileCard'
+import {CenteredView} from 'view/com/util/Views'
 import {ErrorScreen} from '../com/util/error/ErrorScreen'
 import {Text} from '../com/util/text/Text'
 import {ViewHeader} from '../com/util/ViewHeader'
@@ -34,6 +35,7 @@ export function ModerationBlockedAccounts({}: Props) {
  const {_} = useLingui()
  const setMinimalShellMode = useSetMinimalShellMode()
  const {isTabletOrDesktop} = useWebMediaQueries()
+  const {screen} = useAnalytics()

  const [isPTRing, setIsPTRing] = React.useState(false)
  const {
@@ -56,8 +58,9 @@ export function ModerationBlockedAccounts({}: Props) {

  useFocusEffect(
    React.useCallback(() => {
+      screen('BlockedAccounts')
      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
+    }, [screen, setMinimalShellMode]),
  )

  const onRefresh = React.useCallback(async () => {
@@ -12,15 +12,16 @@ import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 import {NativeStackScreenProps} from '@react-navigation/native-stack'

-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {CommonNavigatorParams} from '#/lib/routes/types'
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {useMyMutedAccountsQuery} from '#/state/queries/my-muted-accounts'
 import {useSetMinimalShellMode} from '#/state/shell'
-import {ProfileCard} from '#/view/com/profile/ProfileCard'
-import {CenteredView} from '#/view/com/util/Views'
+import {useAnalytics} from 'lib/analytics/analytics'
+import {usePalette} from 'lib/hooks/usePalette'
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {CommonNavigatorParams} from 'lib/routes/types'
+import {ProfileCard} from 'view/com/profile/ProfileCard'
+import {CenteredView} from 'view/com/util/Views'
 import {ErrorScreen} from '../com/util/error/ErrorScreen'
 import {Text} from '../com/util/text/Text'
 import {ViewHeader} from '../com/util/ViewHeader'
@@ -34,6 +35,7 @@ export function ModerationMutedAccounts({}: Props) {
  const {_} = useLingui()
  const setMinimalShellMode = useSetMinimalShellMode()
  const {isTabletOrDesktop} = useWebMediaQueries()
+  const {screen} = useAnalytics()

  const [isPTRing, setIsPTRing] = React.useState(false)
  const {
@@ -56,8 +58,9 @@ export function ModerationMutedAccounts({}: Props) {

  useFocusEffect(
    React.useCallback(() => {
+      screen('MutedAccounts')
      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
+    }, [screen, setMinimalShellMode]),
  )

  const onRefresh = React.useCallback(async () => {
@@ -5,6 +5,7 @@ import {useLingui} from '@lingui/react'
 import {useFocusEffect, useIsFocused} from '@react-navigation/native'
 import {useQueryClient} from '@tanstack/react-query'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {ComposeIcon2} from '#/lib/icons'
@@ -26,11 +27,11 @@ import {useSetMinimalShellMode} from '#/state/shell'
 import {useComposerControls} from '#/state/shell/composer'
 import {Feed} from '#/view/com/notifications/Feed'
 import {FAB} from '#/view/com/util/fab/FAB'
-import {ListMethods} from '#/view/com/util/List'
-import {LoadLatestBtn} from '#/view/com/util/load-latest/LoadLatestBtn'
 import {MainScrollProvider} from '#/view/com/util/MainScrollProvider'
 import {ViewHeader} from '#/view/com/util/ViewHeader'
-import {CenteredView} from '#/view/com/util/Views'
+import {ListMethods} from 'view/com/util/List'
+import {LoadLatestBtn} from 'view/com/util/load-latest/LoadLatestBtn'
+import {CenteredView} from 'view/com/util/Views'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import {SettingsGear2_Stroke2_Corner0_Rounded as SettingsIcon} from '#/components/icons/SettingsGear2'
@@ -48,6 +49,7 @@ export function NotificationsScreen({route: {params}}: Props) {
  const [isScrolledDown, setIsScrolledDown] = React.useState(false)
  const [isLoadingLatest, setIsLoadingLatest] = React.useState(false)
  const scrollElRef = React.useRef<ListMethods>(null)
+  const {screen} = useAnalytics()
  const t = useTheme()
  const {isDesktop} = useWebMediaQueries()
  const queryClient = useQueryClient()
@@ -99,8 +101,9 @@ export function NotificationsScreen({route: {params}}: Props) {
    React.useCallback(() => {
      setMinimalShellMode(false)
      logger.debug('NotificationsScreen: Focus')
+      screen('Notifications')
      onFocusCheckLatest()
-    }, [setMinimalShellMode, onFocusCheckLatest]),
+    }, [screen, setMinimalShellMode, onFocusCheckLatest]),
  )
  React.useEffect(() => {
    if (!isScreenFocused) {
@@ -3,6 +3,7 @@ import {StyleSheet, View} from 'react-native'
 import {Trans} from '@lingui/macro'
 import {useFocusEffect} from '@react-navigation/native'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {usePalette} from '#/lib/hooks/usePalette'
 import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
@@ -29,12 +30,14 @@ type Props = NativeStackScreenProps<
 export function PreferencesExternalEmbeds({}: Props) {
  const pal = usePalette('default')
  const setMinimalShellMode = useSetMinimalShellMode()
+  const {screen} = useAnalytics()
  const {isTabletOrMobile} = useWebMediaQueries()

  useFocusEffect(
    React.useCallback(() => {
+      screen('PreferencesExternalEmbeds')
      setMinimalShellMode(false)
-    }, [setMinimalShellMode]),
+    }, [screen, setMinimalShellMode]),
  )

  return (
@@ -16,6 +16,7 @@ import {
  useQueryClient,
 } from '@tanstack/react-query'

+import {useAnalytics} from '#/lib/analytics/analytics'
 import {useSetTitle} from '#/lib/hooks/useSetTitle'
 import {ComposeIcon2} from '#/lib/icons'
 import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
@@ -166,6 +167,7 @@ function ProfileScreenLoaded({
  const {hasSession, currentAccount} = useSession()
  const setMinimalShellMode = useSetMinimalShellMode()
  const {openComposer} = useComposerControls()
+  const {screen, track} = useAnalytics()
  const {
    data: labelerInfo,
    error: labelerError,
@@ -294,10 +296,11 @@ function ProfileScreenLoaded({
  useFocusEffect(
    React.useCallback(() => {
      setMinimalShellMode(false)
+      screen('Profile')
      return listenSoftReset(() => {
        scrollSectionToTop(currentPage)
      })
-    }, [setMinimalShellMode, currentPage, scrollSectionToTop]),
+    }, [setMinimalShellMode, screen, currentPage, scrollSectionToTop]),
  )

  useFocusEffect(
@@ -313,6 +316,7 @@ function ProfileScreenLoaded({
  // =

  const onPressCompose = () => {
+    track('ProfileScreen:PressCompose')
    const mention =
      profile.handle === currentAccount?.handle ||
      isInvalidHandle(profile.handle)
--- a/Show More
+++ b/Show More