gestures setup

.eslintrc.js

@@ -15,7 +15,6 @@ module.exports = {
     'simple-import-sort',
     'bsky-internal',
     'eslint-plugin-react-compiler',
-    'import',
   ],
   rules: {
     'react/no-unescaped-entities': 0,
@@ -33,7 +32,6 @@ module.exports = {
           'H6',
           'P',
           'Admonition',
-          'Admonition.Admonition',
         ],
         impliedTextProps: [],
         suggestedTextWrappers: {
@@ -82,16 +80,19 @@ module.exports = {
     ],
     'simple-import-sort/exports': 'error',
     'react-compiler/react-compiler': 'warn',
-    'no-unused-vars': 'off',
-    '@typescript-eslint/no-unused-vars': [
+    'no-restricted-imports': [
       'error',
-      {argsIgnorePattern: '^_', varsIgnorePattern: '^_'},
+      {
+        paths: [
+          {
+            name: '@atproto/api',
+            importNames: ['moderatePost'],
+            message:
+              'Please use `moderatePost_wrapped` from `#/lib/moderatePost_wrapped` instead.',
+          },
+        ],
+      },
     ],
-    '@typescript-eslint/consistent-type-imports': [
-      'warn',
-      {prefer: 'type-imports', fixStyle: 'inline-type-imports'},
-    ],
-    'import/consistent-type-specifier-style': ['warn', 'prefer-inline'],
   },
   ignorePatterns: [
     '**/__mocks__/*.ts',
@@ -103,9 +104,9 @@ module.exports = {
     '*.lock',
     '.husky',
     'patches',
+    'bskyweb',
     '*.html',
     'bskyweb',
-    'bskyembed',
     'src/locale/locales/_build/',
     'src/locale/locales/**/*.js',
   ],

.github/workflows/build-and-push-bskyweb-aws.yaml

@@ -45,10 +45,7 @@ jobs:
 
       - name: Set outputs
         id: vars
-        run: |
-          echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
-          echo "SENTRY_DIST=$(git rev-parse HEAD)" >> $GITHUB_OUTPUT
-          echo "SENTRY_RELEASE=$(jq -r '.version' package.json)" >> $GITHUB_OUTPUT
+        run: echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
 
       - name: Build and push Docker image
         id: build-and-push
@@ -63,6 +60,3 @@ jobs:
           cache-to: type=gha,mode=max
           build-args: |
             EXPO_PUBLIC_BUNDLE_IDENTIFIER=${{ steps.vars.outputs.sha_short }}
-            SENTRY_DIST=${{ steps.vars.outputs.SENTRY_DIST }}
-            SENTRY_RELEASE=${{ steps.vars.outputs.SENTRY_RELEASE }}
-            SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}

.github/workflows/build-submit-android.yml

@@ -56,10 +56,7 @@ jobs:
         run: yarn install
 
       - name: 🔤 Compile translations
-        run: yarn intl:build 2>&1 | tee i18n.log
-
-      - name: Check for i18n compilation errors
-        run: if grep -q "invalid syntax" "i18n.log"; then echo "\n\nFound compilation errors!\n\n" && exit 1; else echo "\n\nNo compilation errors!\n\n"; fi
+        run: yarn intl:build
 
       - name: ✏️ Write environment variables
         run: |
@@ -70,14 +67,8 @@ jobs:
           echo "BITDRIFT_API_KEY=${{ secrets.BITDRIFT_API_KEY }}" >> .env
           echo "$json" > google-services.json
 
-      - name: Setup Sentry vars for build-time injection
-        id: sentry
-        run: |
-          echo "SENTRY_DIST=$(git rev-parse HEAD)" >> $GITHUB_OUTPUT
-          echo "SENTRY_RELEASE=$(jq -r '.version' package.json)" >> $GITHUB_OUTPUT
-
       - name: 🏗️ EAS Build
-        run: SENTRY_DIST=${{ steps.sentry.outputs.SENTRY_DIST }} SENTRY_RELEASE=${{ steps.sentry.outputs.SENTRY_RELEASE }} SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} yarn use-build-number-with-bump eas build -p android --profile ${{ inputs.profile || 'testflight-android' }} --local --output build.aab --non-interactive
+        run: yarn use-build-number-with-bump eas build -p android --profile ${{ inputs.profile || 'testflight-android' }} --local --output build.aab --non-interactive
 
       - name: ✍️ Rename Testflight bundle
         if: ${{ inputs.profile != 'production' }}

.github/workflows/build-submit-ios.yml

@@ -14,7 +14,7 @@ on:
 jobs:
   build:
     name: Build and Submit iOS
-    runs-on: macos-15
+    runs-on: macos-14
     steps:
       - name: Check for EXPO_TOKEN
         run: >
@@ -52,7 +52,7 @@ jobs:
 
       - uses: maxim-lobanov/setup-xcode@v1
         with:
-          xcode-version: '16.2'
+          xcode-version: '15.3'
 
       - name: ☕️ Setup Cocoapods
         uses: maxim-lobanov/setup-cocoapods@v1
@@ -69,10 +69,7 @@ jobs:
           key: ${{ runner.os }}-pods-${{ hashFiles('yarn.lock') }}
 
       - name: 🔤 Compile translations
-        run: yarn intl:build 2>&1 | tee i18n.log
-
-      - name: Check for i18n compilation errors
-        run: if grep -q "invalid syntax" "i18n.log"; then echo "\n\nFound compilation errors!\n\n" && exit 1; else echo "\n\nNo compilation errors!\n\n"; fi
+        run: yarn intl:build
 
       - name: ✏️ Write environment variables
         run: |
@@ -82,14 +79,8 @@ jobs:
           echo "BITDRIFT_API_KEY=${{ secrets.BITDRIFT_API_KEY }}" >> .env
           echo "${{ secrets.GOOGLE_SERVICES_TOKEN }}" > google-services.json
 
-      - name: Setup Sentry vars for build-time injection
-        id: sentry
-        run: |
-          echo "SENTRY_DIST=$(git rev-parse HEAD)" >> $GITHUB_OUTPUT
-          echo "SENTRY_RELEASE=$(jq -r '.version' package.json)" >> $GITHUB_OUTPUT
-
       - name: 🏗️ EAS Build
-        run: SENTRY_DIST=${{ steps.sentry.outputs.SENTRY_DIST }} SENTRY_RELEASE=${{ steps.sentry.outputs.SENTRY_RELEASE }} SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} yarn use-build-number-with-bump eas build -p ios --profile ${{ inputs.profile || 'testflight' }} --local --output build.ipa --non-interactive
+        run: yarn use-build-number-with-bump eas build -p ios --profile ${{ inputs.profile || 'testflight' }} --local --output build.ipa --non-interactive
 
       - name: 🚀 Deploy
         run: eas submit -p ios --non-interactive --path build.ipa

.github/workflows/bundle-deploy-eas-update.yml

@@ -75,11 +75,8 @@ jobs:
       - name: Prettier check
         run: yarn prettier --check .
 
-      - name: 🔤 Compile translations
-        run: yarn intl:build 2>&1 | tee i18n.log
-
-      - name: Check for i18n compilation errors
-        run: if grep -q "invalid syntax" "i18n.log"; then echo "\n\nFound compilation errors!\n\n" && exit 1; else echo "\n\nNo compilation errors!\n\n"; fi
+      - name: Check & compile i18n
+        run: yarn intl:build
 
       - name: Type check
         run: yarn typecheck
@@ -110,15 +107,9 @@ jobs:
           echo "BITDRIFT_API_KEY=${{ secrets.BITDRIFT_API_KEY }}" >> .env
           echo "$json" > google-services.json
 
-      - name: Setup Sentry vars for build-time injection
-        id: sentry
-        run: |
-          echo "SENTRY_DIST=$(git rev-parse HEAD)" >> $GITHUB_OUTPUT
-          echo "SENTRY_RELEASE=$(jq -r '.version' package.json)" >> $GITHUB_OUTPUT
-
       - name: 🏗️ Create Bundle
         if: ${{ !steps.fingerprint.outputs.includes-changes }}
-        run: SENTRY_DIST=${{ steps.sentry.outputs.SENTRY_DIST }} SENTRY_RELEASE=${{ steps.sentry.outputs.SENTRY_RELEASE }} SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} EXPO_PUBLIC_ENV="${{ inputs.channel || 'testflight' }}" yarn export
+        run: EXPO_PUBLIC_ENV="${{ inputs.channel || 'testflight' }}" yarn export
 
       - name: 📦 Package Bundle and 🚀 Deploy
         if: ${{ !steps.fingerprint.outputs.includes-changes }}
@@ -143,7 +134,7 @@ jobs:
   # GitHub actions are horrible so let's just copy paste this in
   buildIfNecessaryIOS:
     name: Build and Submit iOS
-    runs-on: macos-15
+    runs-on: macos-14
     concurrency:
       group: ${{ github.workflow }}-${{ github.event_name }}-${{ github.ref }}-build-ios
       cancel-in-progress: true
@@ -185,7 +176,7 @@ jobs:
 
       - uses: maxim-lobanov/setup-xcode@v1
         with:
-          xcode-version: '16.2'
+          xcode-version: '15.3'
 
       - name: ☕️ Setup Cocoapods
         uses: maxim-lobanov/setup-cocoapods@v1

.github/workflows/nightly-update-source-languages.yaml

@@ -1,49 +0,0 @@
-name: Nightly Update Source Languages
-on:
-  schedule:
-    - cron: '0 2 * * *' # run at 2 AM UTC
-  workflow_dispatch:
-
-jobs:
-  extract-languages:
-    name: Nightly Update Source Languages
-    runs-on: ubuntu-latest
-
-    permissions:
-      # Give the default GITHUB_TOKEN write permission to commit and push the
-      # added or changed files to the repository.
-      contents: write
-
-    steps:
-      - name: Check out Git repository
-        uses: actions/checkout@v3
-        with:
-          ssh-key: ${{secrets.GH_ACTION_DEPLOY_KEY}}
-      - name: Install node
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: .nvmrc
-      - name: Yarn install
-        uses: Wandalen/wretry.action@master
-        with:
-          command: yarn --frozen-lockfile
-          attempt_limit: 3
-          attempt_delay: 2000
-      - name: Extract language strings
-        run: yarn intl:extract
-      - name: Create commit
-        uses: stefanzweifel/git-auto-commit-action@v5
-        with:
-          commit_message: Nightly source-language update
-          file_pattern: ./src/locale/locales/en/messages.po
-      - name: Push source lang to Crowdin
-        uses: crowdin/github-action@v2
-        with:
-          upload_sources: true
-          upload_sources_args: "-b main"
-          upload_translations: false
-          push_translations: false
-          push_sources: false
-          create_pull_request: false
-        env:
-          CROWDIN_PERSONAL_TOKEN: ${{ secrets.CROWDIN_PERSONAL_TOKEN }}

Dockerfile

@@ -4,45 +4,21 @@ WORKDIR /usr/src/social-app
 
 ENV DEBIAN_FRONTEND=noninteractive
 
-#
 # Node
-#
 ENV NODE_VERSION=20
 ENV NVM_DIR=/usr/share/nvm
 
-#
 # Go
-#
 ENV GODEBUG="netdns=go"
 ENV GOOS="linux"
 ENV GOARCH="amd64"
 ENV CGO_ENABLED=1
 ENV GOEXPERIMENT="loopvar"
 
-#
 # Expo
-#
 ARG EXPO_PUBLIC_BUNDLE_IDENTIFIER
 ENV EXPO_PUBLIC_BUNDLE_IDENTIFIER=${EXPO_PUBLIC_BUNDLE_IDENTIFIER:-dev}
 
-# The latest git hash of the preview branch on render.com
-ARG RENDER_GIT_COMMIT
-
-#
-# Sentry
-#
-ARG SENTRY_AUTH_TOKEN
-ENV SENTRY_AUTH_TOKEN=${SENTRY_AUTH_TOKEN:-unknown}
-# Will fall back to package.json#version, but this is handled elsewhere
-ARG SENTRY_RELEASE
-ENV SENTRY_RELEASE=$SENTRY_RELEASE
-ARG SENTRY_DIST
-# Default to RENDER_GIT_COMMIT if not set by GitHub workflows
-ENV SENTRY_DIST=${SENTRY_DIST:-$RENDER_GIT_COMMIT}
-
-#
-# Copy everything into the container
-#
 COPY . .
 
 #
@@ -62,9 +38,8 @@ RUN \. "$NVM_DIR/nvm.sh" && \
   echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env && \
   npm install --global yarn && \
   yarn && \
-  yarn intl:build 2>&1 | tee i18n.log && \
-  if grep -q "invalid syntax" "i18n.log"; then echo "\n\nFound compilation errors!\n\n" && exit 1; else echo "\n\nNo compile errors!\n\n"; fi && \
-  EXPO_PUBLIC_BUNDLE_IDENTIFIER=$EXPO_PUBLIC_BUNDLE_IDENTIFIER EXPO_PUBLIC_BUNDLE_DATE=$() SENTRY_AUTH_TOKEN=$SENTRY_AUTH_TOKEN SENTRY_RELEASE=$SENTRY_RELEASE SENTRY_DIST=$SENTRY_DIST yarn build-web
+  yarn intl:build && \
+  EXPO_PUBLIC_BUNDLE_IDENTIFIER=$EXPO_PUBLIC_BUNDLE_IDENTIFIER EXPO_PUBLIC_BUNDLE_DATE=$() yarn build-web
 
 # DEBUG
 RUN find ./bskyweb/static && find ./web-build/static

LICENSE

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

Makefile

@@ -37,6 +37,6 @@ deps: ## Installs dependent libs using 'yarn install'
 
 .PHONY: nvm-setup
 nvm-setup: ## Use NVM to install and activate node+yarn
-	nvm install 20
-	nvm use 20
+	nvm install 18
+	nvm use 18
 	npm install --global yarn

__e2e__/config.yml

@@ -1,2 +1,2 @@
 flows:
-  - "flows/**"
+  - "flows/*"

__e2e__/flows/composer-self-label.yml

@@ -17,7 +17,7 @@ appId: xyz.blueskyweb.app
 - inputText: "Post with an image"
 - tapOn:
     id: "openGalleryBtn"
-- tapOn: "Allow Full Access"
+- tapOn: "Content warnings"
 - tapOn: "Content warnings"
 - tapOn: "Porn"
 - tapOn:

__e2e__/flows/create-account.yml

@@ -10,7 +10,8 @@ appId: xyz.blueskyweb.app
     id: "e2eOpenLoggedOutView"
 - tapOn:
     id: "createAccountButton"
-- tapOn: "Bluesky Social"
+- tapOn:
+    id: "selectServiceButton"
 - tapOn:
     id: "customSelectBtn"
 - tapOn:
@@ -24,10 +25,12 @@ appId: xyz.blueskyweb.app
 - inputText: "example@test.com"
 - tapOn:
     id: "passwordInput"
-- inputText: "hunter22"
-- hideKeyboard
+- inputText: "hunter2"
+- pressKey: Enter
 - tapOn:
     id: "nextBtn"
+- tapOn:
+     id: "handleInput"
 - inputText: "e2e-test"
 - tapOn:
     id: "nextBtn"

__e2e__/flows/curate-lists.yml

@@ -160,7 +160,7 @@ appId: xyz.blueskyweb.app
 - tapOn:
     label: "Adds and removes users on curatelists from the profile"
     id: "bottomBarSearchBtn"
-- tapOn: "Search for posts, users, or feeds"
+- tapOn: "Search"
 - inputText: "bob"
 - tapOn:
     id: "searchAutoCompleteResult-bob.test"

__e2e__/flows/feed-reorder.yml

@@ -16,7 +16,7 @@ appId: xyz.blueskyweb.app
 - tapOn:
     id: "profileCardButton"
 - tapOn:
-    id: "profilePager-selector-5"
+    id: "profilePager-selector-4"
 - tapOn: "alice-favs"
 - tapOn: "Pin to Home"
 - tapOn:

__e2e__/flows/home-screen.yml

@@ -21,7 +21,7 @@ appId: xyz.blueskyweb.app
     label: "Feeds button disappears after pinning a feed"
     id: "bottomBarProfileBtn"
 - tapOn:
-    id: "profilePager-selector-5"
+    id: "profilePager-selector-4"
 - tapOn: "alice-favs"
 - tapOn: "Pin to Home"
 - tapOn:

__e2e__/flows/post-report-flow.yml

@@ -1,20 +0,0 @@
-appId: xyz.blueskyweb.app
----
-- runScript:
-    file: ../setupServer.js
-    env:
-        SERVER_PATH: "?users&follows&posts"
-- runFlow:
-    file: ../setupApp.yml
-- tapOn:
-    id: "e2eSignInAlice"
-
-- tapOn:
-    id: "postDropdownBtn"
-    index: 0
-- tapOn:
-    id: "postDropdownReportBtn"
-- tapOn: "Create report for Misleading Post"
-- tapOn: "Send report to Dev-env Moderation"
-- tapOn:
-    point: "50%,90%"

__e2e__/flows/profile-screen.yml

@@ -15,7 +15,7 @@ appId: xyz.blueskyweb.app
         id: "bottomBarSearchBtn"
 - tapOn:
     id: "bottomBarSearchBtn"
-- tapOn: "Search for posts, users, or feeds"
+- tapOn: "Search"
 - inputText: "b"
 - tapOn:
     id: "searchAutoCompleteResult-bob.test"

__e2e__/flows/report-dialog/account.default.yml

@@ -1,24 +0,0 @@
-appId: xyz.blueskyweb.app
----
-- runScript:
-    file: ../../setupServer.js
-    env:
-        SERVER_PATH: ?users&follows&posts&feeds
-- runFlow:
-    file: ../../setupApp.yml
-- tapOn:
-    id: "e2eSignInAlice"
-
-- tapOn: "Carla's avatar"
-- tapOn:
-    id: "profileHeaderDropdownBtn"
-- tapOn:
-    id: "profileHeaderDropdownReportBtn"
-- tapOn:
-    id: "report:option:com.atproto.moderation.defs#reasonSpam"
-- assertVisible:
-    id: "report:labeler:mod-authority.test"
-- tapOn:
-    id: "report:submit"
-- assertNotVisible:
-    id: "report:dialog"

__e2e__/flows/report-dialog/post:default.yml

@@ -1,24 +0,0 @@
-appId: xyz.blueskyweb.app
----
-- runScript:
-    file: ../../setupServer.js
-    env:
-        SERVER_PATH: ?users&follows&posts&feeds
-- runFlow:
-    file: ../../setupApp.yml
-- tapOn:
-    id: "e2eSignInAlice"
-
-- tapOn:
-    id: "postDropdownBtn"
-    index: 0
-- tapOn:
-    id: "postDropdownReportBtn"
-- tapOn:
-    id: "report:option:com.atproto.moderation.defs#reasonSpam"
-- assertVisible:
-    id: "report:labeler:mod-authority.test"
-- tapOn:
-    id: "report:submit"
-- assertNotVisible:
-    id: "report:dialog"

__e2e__/flows/report-dialog/post:edit-reason.yml

@@ -1,35 +0,0 @@
-appId: xyz.blueskyweb.app
----
-- runScript:
-    file: ../../setupServer.js
-    env:
-        SERVER_PATH: ?users&follows&posts&feeds
-- runFlow:
-    file: ../../setupApp.yml
-- tapOn:
-    id: "e2eSignInAlice"
-
-- tapOn:
-    id: "postDropdownBtn"
-    index: 0
-- tapOn:
-    id: "postDropdownReportBtn"
-- tapOn:
-    id: "report:option:com.atproto.moderation.defs#reasonOther"
-- assertVisible:
-    id: "report:labeler:mod-authority.test"
-# reason "other" defaults with details open
-- assertVisible:
-    id: "report:details"
-- tapOn:
-    id: "report:clearOption"
-- assertNotVisible:
-    id: "report:details"
-- tapOn:
-    id: "report:option:com.atproto.moderation.defs#reasonSpam"
-- assertVisible:
-    id: "report:labeler:mod-authority.test"
-- tapOn:
-    id: "report:submit"
-- assertNotVisible:
-    id: "report:dialog"

__e2e__/flows/report-dialog/post:reason-other.yml

@@ -1,30 +0,0 @@
-appId: xyz.blueskyweb.app
----
-- runScript:
-    file: ../../setupServer.js
-    env:
-        SERVER_PATH: ?users&follows&posts&feeds
-- runFlow:
-    file: ../../setupApp.yml
-- tapOn:
-    id: "e2eSignInAlice"
-
-- tapOn:
-    id: "postDropdownBtn"
-    index: 0
-- tapOn:
-    id: "postDropdownReportBtn"
-- tapOn:
-    id: "report:option:com.atproto.moderation.defs#reasonOther"
-- assertVisible:
-    id: "report:labeler:mod-authority.test"
-# reason "other" defaults with details open
-- assertVisible:
-    id: "report:details"
-- tapOn:
-    id: "report:details"
-- inputText: "This is a test report"
-- tapOn:
-    id: "report:submit"
-- assertNotVisible:
-    id: "report:dialog"

__e2e__/flows/search-screen.yml

@@ -12,8 +12,8 @@ appId: xyz.blueskyweb.app
 # Navigate to another user profile via autocomplete
 - tapOn:
     id: "bottomBarSearchBtn"
-- assertVisible: "Search for posts, users, or feeds"
-- tapOn: "Search for posts, users, or feeds"
+- assertVisible: "Search"
+- tapOn: "Search"
 - inputText: "b"
 - tapOn:
     id: "searchAutoCompleteResult-bob.test"

__tests__/lib/strings/handles.test.ts

@@ -1,42 +0,0 @@
-import {IsValidHandle, validateServiceHandle} from '#/lib/strings/handles'
-
-describe('handle validation', () => {
-  const valid = [
-    ['ali', 'bsky.social'],
-    ['alice', 'bsky.social'],
-    ['a-lice', 'bsky.social'],
-    ['a-----lice', 'bsky.social'],
-    ['123', 'bsky.social'],
-    ['123456789012345678', 'bsky.social'],
-    ['alice', 'custom-pds.com'],
-    ['alice', 'my-custom-pds-with-long-name.social'],
-    ['123456789012345678', 'my-custom-pds-with-long-name.social'],
-  ]
-  it.each(valid)(`should be valid: %s.%s`, (handle, service) => {
-    const result = validateServiceHandle(handle, service)
-    expect(result.overall).toEqual(true)
-  })
-
-  const invalid = [
-    ['al', 'bsky.social', 'frontLength'],
-    ['-alice', 'bsky.social', 'hyphenStartOrEnd'],
-    ['alice-', 'bsky.social', 'hyphenStartOrEnd'],
-    ['%%%', 'bsky.social', 'handleChars'],
-    ['1234567890123456789', 'bsky.social', 'frontLength'],
-    [
-      '1234567890123456789',
-      'my-custom-pds-with-long-name.social',
-      'frontLength',
-    ],
-    ['al', 'my-custom-pds-with-long-name.social', 'frontLength'],
-    ['a'.repeat(300), 'toolong.com', 'totalLength'],
-  ] satisfies [string, string, keyof IsValidHandle][]
-  it.each(invalid)(
-    `should be invalid: %s.%s due to %s`,
-    (handle, service, expectedError) => {
-      const result = validateServiceHandle(handle, service)
-      expect(result.overall).toEqual(false)
-      expect(result[expectedError]).toEqual(false)
-    },
-  )
-})

app.config.js

@@ -36,6 +36,9 @@ module.exports = function (config) {
   const UPDATES_ENABLED = !!UPDATES_CHANNEL
 
   const USE_SENTRY = Boolean(process.env.SENTRY_AUTH_TOKEN)
+  const SENTRY_DIST = `${PLATFORM}.${VERSION}.${IS_TESTFLIGHT ? 'tf' : ''}${
+    IS_DEV ? 'dev' : ''
+  }`
 
   return {
     expo: {
@@ -72,21 +75,15 @@ module.exports = function (config) {
             'an',
             'ast',
             'ca',
-            'cy',
-            'da',
             'de',
             'el',
-            'eo',
             'es',
-            'eu',
             'fi',
             'fr',
             'ga',
-            'gd',
             'gl',
             'hi',
             'hu',
-            'ia',
             'id',
             'it',
             'ja',
@@ -98,12 +95,11 @@ module.exports = function (config) {
             'pt-BR',
             'ro',
             'ru',
-            'sv',
             'th',
             'tr',
             'uk',
             'vi',
-            'yue',
+            'yue-Hant',
             'zh-Hans',
             'zh-Hant',
           ],
@@ -195,14 +191,14 @@ module.exports = function (config) {
         channel: UPDATES_CHANNEL,
       },
       plugins: [
-        'expo-video',
         'expo-localization',
         USE_SENTRY && [
           '@sentry/react-native/expo',
           {
             organization: 'blueskyweb',
-            project: 'app',
-            url: 'https://sentry.io',
+            project: 'react-native',
+            release: VERSION,
+            dist: SENTRY_DIST,
           },
         ],
         [
@@ -229,20 +225,14 @@ module.exports = function (config) {
           },
         ],
         'react-native-compressor',
-        [
-          '@bitdrift/react-native',
-          {
-            networkInstrumentation: true,
-          },
-        ],
+        // TODO: Reenable when the build issue is fixed.
+        // '@bitdrift/react-native',
         './plugins/starterPackAppClipExtension/withStarterPackAppClip.js',
-        './plugins/withGradleJVMHeapSizeIncrease.js',
         './plugins/withAndroidManifestPlugin.js',
         './plugins/withAndroidManifestFCMIconPlugin.js',
         './plugins/withAndroidStylesAccentColorPlugin.js',
         './plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js',
         './plugins/withAndroidNoJitpackPlugin.js',
-        './plugins/withNoBundleCompression.js',
         './plugins/shareExtension/withShareExtensions.js',
         './plugins/notificationsExtension/withNotificationsExtension.js',
         './plugins/withAppDelegateReferrer.js',
@@ -357,16 +347,6 @@ module.exports = function (config) {
           },
         ],
         ['expo-screen-orientation', {initialOrientation: 'PORTRAIT_UP'}],
-        [
-          'react-native-vision-camera',
-          {
-            enableLocation: false,
-            cameraPermissionText: 'Bluesky needs access to your camera.',
-            enableMicrophonePermission: true,
-            microphonePermissionText:
-              'Bluesky needs access to your microphone.',
-          },
-        ],
       ].filter(Boolean),
       extra: {
         eas: {
@@ -403,6 +383,22 @@ module.exports = function (config) {
           projectId: '55bd077a-d905-4184-9c7f-94789ba0f302',
         },
       },
+      hooks: {
+        postPublish: [
+          /*
+           * @see https://docs.expo.dev/guides/using-sentry/#app-configuration
+           */
+          {
+            file: './postHooks/uploadSentrySourcemapsPostHook',
+            config: {
+              organization: 'blueskyweb',
+              project: 'react-native',
+              release: VERSION,
+              dist: SENTRY_DIST,
+            },
+          },
+        ],
+      },
     },
   }
 }

assets/icons/chevronTopBottom_stroke2_corner0_rounded.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M11.293 4.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L12 6.414 8.707 9.707a1 1 0 0 1-1.414-1.414l4-4Zm-4 10a1 1 0 0 1 1.414 0L12 17.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>

assets/icons/circleX_stroke2_corner0_rounded.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm6.293-3.707a1 1 0 0 1 1.414 0L12 10.586l2.293-2.293a1 1 0 1 1 1.414 1.414L13.414 12l2.293 2.293a1 1 0 0 1-1.414 1.414L12 13.414l-2.293 2.293a1 1 0 0 1-1.414-1.414L10.586 12 8.293 9.707a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>

assets/icons/coffee_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7 2a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0V3a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0V3a1 1 0 0 1 1-1ZM4 9a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2h.5a3.5 3.5 0 1 1 0 7H18v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9Zm12 0H6v11h10V9Zm2 5h.5a1.5 1.5 0 0 0 0-3H18v3Z" clip-rule="evenodd"/></svg>

assets/icons/flame_stroke2_corner1_rounded.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M11.158 2.879c.584-.835 1.757-1.137 2.673-.507.951.654 2.597 1.92 4.013 3.694S20.5 10.194 20.5 13c0 4.997-3.752 9-8.5 9s-8.5-4.003-8.5-9c0-2.035.874-4.636 2.578-6.712.746-.91 2.034-.855 2.786-.133l2.294-3.276Zm-3.04 15.758C6.538 17.386 5.5 15.37 5.5 13c0-1.511.666-3.616 2.042-5.342.87.797 2.254.653 2.939-.325l2.286-3.265c.871.606 2.299 1.723 3.514 3.246C17.53 8.879 18.5 10.804 18.5 13c0 2.369-1.038 4.386-2.618 5.637q.117-.518.118-1.061c0-2.601-2.038-4.382-2.911-5.04a1.8 1.8 0 0 0-2.177 0C10.038 13.195 8 14.976 8 17.577q0 .543.118 1.061ZM12 14.222c-.825.648-2 1.859-2 3.354C10 19.043 11.016 20 12 20s2-.957 2-2.424c0-1.495-1.175-2.706-2-3.354Z" clip-rule="evenodd"/></svg>

assets/icons/piggyBank_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.5 4.999Zm0 0a.1.1 0 0 1-.016.024.2.2 0 0 1-.152.043q.086.014.168.032V7.5a1 1 0 0 1-.33.742c-.543.49-.917 1.176-1.23 2.036a1 1 0 0 1-.94.657H3V14h1a1 1 0 0 1 .866.5c.436.754.879 1.195 1.637 1.636A1 1 0 0 1 7 17v2h2a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2h2v-2.537a1 1 0 0 1 .332-.744A4.98 4.98 0 0 0 19 11.999 5 5 0 0 0 14 7H9.474a1 1 0 0 1-.893-.55v-.001l-.001-.002-.005-.008L9.474 6l-.9.438h.001v.002l.002.001.001.003.002.003v.003a2.6 2.6 0 0 0-.443-.538c-.319-.298-.839-.648-1.637-.814V5Zm2.082 1.452ZM9.5 4.447c.211.196.379.387.508.553H14a7 7 0 0 1 6.72 8.96 1.003 1.003 0 0 0 1.146-1.46 1 1 0 1 1 1.731-1 3 3 0 0 1-3.714 4.286A7 7 0 0 1 19 16.888V19a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2h-2a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-1.45A5.8 5.8 0 0 1 3.448 16H3a2 2 0 0 1-2-2v-3.065a2 2 0 0 1 2-2h.324c.286-.649.657-1.291 1.176-1.852V5c0-1.047.89-2.12 2.161-1.907 1.33.223 2.248.805 2.839 1.354ZM8.25 12a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z" clip-rule="evenodd"/></svg>

assets/icons/poop_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4c0-1.012.894-2.187 2.237-1.846a5.002 5.002 0 0 1 3.218 7.119 4 4 0 0 1 2.345 4.976A3.501 3.501 0 0 1 18.5 21h-13a3.5 3.5 0 0 1-1.3-6.75 4 4 0 0 1 2.052-4.848A4 4 0 0 1 10 4h2.001Zm-4.187 7.009A2 2 0 0 0 6 13c0 .366.098.706.271 1H12a1 1 0 1 1 0 2H5.5a1.5 1.5 0 0 0 0 3h13a1.5 1.5 0 1 0 0-3H17a1 1 0 1 1 0-2h.729A1.96 1.96 0 0 0 18 13a2 2 0 0 0-2-2h-2a1 1 0 1 1 0-2h1.236a3.002 3.002 0 0 0-1.243-4.832A2 2 0 0 1 12 6h-2a2 2 0 0 0-1.728 3.009H9a1 1 0 0 1 0 2H7.813Z" clip-rule="evenodd"/></svg>

assets/icons/trending3_stroke2_corner1_rounded.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M15 7a1 1 0 0 1 1-1h5a1 1 0 0 1 1 1v5a1 1 0 1 1-2 0V9.414L14.414 15a2 2 0 0 1-2.828 0L9 12.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L7.586 11a2 2 0 0 1 2.828 0L13 13.586 18.586 8H16a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>

bskyembed/snippet/embed.ts

@@ -68,9 +68,6 @@ function scan(node = document) {
     if (ref_url.startsWith('http')) {
       searchParams.set('ref_url', encodeURIComponent(ref_url))
     }
-    if (embed.dataset.blueskyEmbedColorMode) {
-      searchParams.set('colorMode', embed.dataset.blueskyEmbedColorMode)
-    }
 
     const iframe = document.createElement('iframe')
     iframe.setAttribute('data-bluesky-id', id)

bskyembed/src/color-mode.ts

@@ -1,15 +1,9 @@
-export type ColorModeValues = 'system' | 'light' | 'dark'
-
-export function assertColorModeValues(value: string): value is ColorModeValues {
-  return ['system', 'light', 'dark'].includes(value)
-}
-
 export function applyTheme(theme: 'light' | 'dark') {
   document.documentElement.classList.remove('light', 'dark')
   document.documentElement.classList.add(theme)
 }
 
-export function initSystemColorMode() {
+export function initColorMode() {
   applyTheme(
     window.matchMedia('(prefers-color-scheme: dark)').matches
       ? 'dark'

bskyembed/src/index.css

@@ -6,17 +6,6 @@
   word-break: break-word;
 }
 
-#app {
+:root {
   color-scheme: light dark;
 }
-
-select {
-  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='14px' width='14px' fill='none' viewBox='0 0 24 24'><path fill='black' fill-rule='evenodd' d='M3.293 8.293a1 1 0 0 1 1.414 0L12 15.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414Z' clip-rule='evenodd'/></svg>");
-  background-repeat: no-repeat;
-  background-position: calc(100% - 0.75rem) center;
-  padding-right: 2rem;
-
-  @media (prefers-color-scheme: dark) {
-    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='14px' width='14px' fill='none' viewBox='0 0 24 24'><path fill='white' fill-rule='evenodd' d='M3.293 8.293a1 1 0 0 1 1.414 0L12 15.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414Z' clip-rule='evenodd'/></svg>");
-  }
-}

bskyembed/src/labels.ts

@@ -13,7 +13,6 @@ export function labelsToInfo(
       return 'Adult Content'
     case 'nudity':
       return 'Non-sexual Nudity'
-    case 'gore':
     case 'graphic-media':
       return 'Graphic Media'
     default:

bskyembed/src/screens/landing.tsx

@@ -1,16 +1,12 @@
 import '../index.css'
 
-import {AppBskyFeedDefs, AppBskyFeedPost, AtpAgent, AtUri} from '@atproto/api'
+import {AppBskyFeedDefs, AppBskyFeedPost, AtUri, BskyAgent} from '@atproto/api'
 import {h, render} from 'preact'
 import {useEffect, useMemo, useRef, useState} from 'preact/hooks'
 
 import arrowBottom from '../../assets/arrowBottom_stroke2_corner0_rounded.svg'
 import logo from '../../assets/logo.svg'
-import {
-  assertColorModeValues,
-  ColorModeValues,
-  initSystemColorMode,
-} from '../color-mode'
+import {initColorMode} from '../color-mode'
 import {Container} from '../components/container'
 import {Link} from '../components/link'
 import {Post} from '../components/post'
@@ -26,9 +22,9 @@ export const EMBED_SCRIPT = `${EMBED_SERVICE}/static/embed.js`
 const root = document.getElementById('app')
 if (!root) throw new Error('No root element')
 
-initSystemColorMode()
+initColorMode()
 
-const agent = new AtpAgent({
+const agent = new BskyAgent({
   service: 'https://public.api.bsky.app',
 })
 
@@ -36,7 +32,6 @@ render(<LandingPage />, root)
 
 function LandingPage() {
   const [uri, setUri] = useState('')
-  const [colorMode, setColorMode] = useState<ColorModeValues>('system')
   const [error, setError] = useState<string | null>(null)
   const [loading, setLoading] = useState(false)
   const [thread, setThread] = useState<AppBskyFeedDefs.ThreadViewPost | null>(
@@ -125,50 +120,24 @@ function LandingPage() {
 
       <h1 className="text-4xl font-bold text-center">Embed a Bluesky Post</h1>
 
-      <div className="flex flex-col w-full max-w-[600px] gap-6">
-        <input
-          type="text"
-          value={uri}
-          onInput={e => setUri(e.currentTarget.value)}
-          className="border rounded-lg py-3 px-4 dark:bg-dimmedBg dark:border-slate-500"
-          placeholder={DEFAULT_POST}
-        />
-
-        <div className="flex flex-col gap-1.5">
-          <label className="text-sm font-medium" for="colorModeSelect">
-            Theme
-          </label>
-          <select
-            value={colorMode}
-            onChange={e => {
-              const value = e.currentTarget.value
-              if (assertColorModeValues(value)) {
-                setColorMode(value)
-              }
-            }}
-            id="colorModeSelect"
-            className="appearance-none bg-white border w-full rounded-lg text-sm px-3 py-2 dark:bg-dimmedBg dark:border-slate-500">
-            <option value="system">System</option>
-            <option value="light">Light</option>
-            <option value="dark">Dark</option>
-          </select>
-        </div>
-      </div>
+      <input
+        type="text"
+        value={uri}
+        onInput={e => setUri(e.currentTarget.value)}
+        className="border rounded-lg py-3 w-full max-w-[600px] px-4 dark:bg-dimmedBg dark:border-slate-500"
+        placeholder={DEFAULT_POST}
+      />
 
       <img src={arrowBottom} className="w-6 dark:invert" />
 
       {loading ? (
-        <div className={`${colorMode} w-full max-w-[600px]`}>
+        <div className="w-full max-w-[600px]">
           <Skeleton />
         </div>
       ) : (
         <div className="w-full max-w-[600px] gap-8 flex flex-col">
-          {!error && thread && uri && (
-            <Snippet thread={thread} colorMode={colorMode} />
-          )}
-          <div className={colorMode}>
-            {!error && thread && <Post thread={thread} key={thread.post.uri} />}
-          </div>
+          {!error && thread && uri && <Snippet thread={thread} />}
+          {!error && thread && <Post thread={thread} key={thread.post.uri} />}
           {error && (
             <div className="w-full border border-red-500 bg-red-500/10 px-4 py-3 rounded-lg">
               <p className="text-red-500 text-center">{error}</p>
@@ -199,13 +168,7 @@ function Skeleton() {
   )
 }
 
-function Snippet({
-  thread,
-  colorMode,
-}: {
-  thread: AppBskyFeedDefs.ThreadViewPost
-  colorMode: ColorModeValues
-}) {
+function Snippet({thread}: {thread: AppBskyFeedDefs.ThreadViewPost}) {
   const ref = useRef<HTMLInputElement>(null)
   const [copied, setCopied] = useState(false)
 
@@ -241,11 +204,9 @@ function Snippet({
     // x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x-x
     return `<blockquote class="bluesky-embed" data-bluesky-uri="${escapeHtml(
       thread.post.uri,
-    )}" data-bluesky-cid="${escapeHtml(
-      thread.post.cid,
-    )}" data-bluesky-embed-color-mode="${escapeHtml(
-      colorMode,
-    )}"><p lang="${escapeHtml(lang)}">${escapeHtml(record.text)}${
+    )}" data-bluesky-cid="${escapeHtml(thread.post.cid)}"><p lang="${escapeHtml(
+      lang,
+    )}">${escapeHtml(record.text)}${
       record.embed
         ? `<br><br><a href="${escapeHtml(href)}">[image or embed]</a>`
         : ''
@@ -256,7 +217,7 @@ function Snippet({
     )}</a>) <a href="${escapeHtml(href)}">${escapeHtml(
       niceDate(thread.post.indexedAt),
     )}</a></blockquote><script async src="${EMBED_SCRIPT}" charset="utf-8"></script>`
-  }, [thread, colorMode])
+  }, [thread])
 
   return (
     <div className="flex gap-2 w-full">

bskyembed/src/screens/post.tsx

@@ -4,7 +4,7 @@ import {AppBskyFeedDefs, AtpAgent} from '@atproto/api'
 import {h, render} from 'preact'
 
 import logo from '../../assets/logo.svg'
-import {applyTheme, initSystemColorMode} from '../color-mode'
+import {initColorMode} from '../color-mode'
 import {Container} from '../components/container'
 import {Link} from '../components/link'
 import {Post} from '../components/post'
@@ -22,23 +22,7 @@ if (!uri) {
   throw new Error('No uri in path')
 }
 
-const query = new URLSearchParams(window.location.search)
-
-// theme - default to light mode
-const colorMode = query.get('colorMode')
-
-switch (colorMode) {
-  case 'dark':
-    applyTheme('dark')
-    break
-  case 'system':
-    initSystemColorMode()
-    break
-  case 'light':
-  default:
-    applyTheme('light')
-    break
-}
+initColorMode()
 
 agent
   .getPostThread({

bskylink/package.json

@@ -9,10 +9,8 @@
   },
   "dependencies": {
     "@atproto/common": "^0.4.0",
-    "@types/escape-html": "^1.0.4",
     "body-parser": "^1.20.2",
     "cors": "^2.8.5",
-    "escape-html": "^1.0.3",
     "express": "^4.19.2",
     "http-terminator": "^3.2.0",
     "kysely": "^0.27.3",

bskylink/src/routes/index.ts

@@ -1,11 +1,9 @@
 import {Express} from 'express'
 
 import {AppContext} from '../context.js'
-import {default as createShortLink} from './createShortLink.js'
+import {default as create} from './create.js'
 import {default as health} from './health.js'
 import {default as redirect} from './redirect.js'
-import {default as root} from './root.js'
-import {default as shortLink} from './shortLink.js'
 import {default as siteAssociation} from './siteAssociation.js'
 
 export * from './util.js'
@@ -13,9 +11,7 @@ export * from './util.js'
 export default function (ctx: AppContext, app: Express) {
   app = health(ctx, app) // GET /_health
   app = siteAssociation(ctx, app) // GET /.well-known/apple-app-site-association
-  app = redirect(ctx, app) // GET /redirect
-  app = createShortLink(ctx, app) // POST /link
-  app = root(ctx, app) // GET / (redirect to bsky.app on root)
-  app = shortLink(ctx, app) // GET /:linkId (should go last due to permissive matching)
+  app = create(ctx, app) // POST /link
+  app = redirect(ctx, app) // GET /:linkId (should go last due to permissive matching)
   return app
 }

bskylink/src/routes/redirect.ts

@@ -1,52 +1,54 @@
 import assert from 'node:assert'
 
 import {DAY, SECOND} from '@atproto/common'
-import escapeHTML from 'escape-html'
 import {Express} from 'express'
 
 import {AppContext} from '../context.js'
 import {handler} from './util.js'
 
-const INTERNAL_IP_REGEX = new RegExp(
-  '(^127.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}$)|(^10.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}$)|(^172.1[6-9]{1}[0-9]{0,1}.[0-9]{1,3}.[0-9]{1,3}$)|(^172.2[0-9]{1}[0-9]{0,1}.[0-9]{1,3}.[0-9]{1,3}$)|(^172.3[0-1]{1}[0-9]{0,1}.[0-9]{1,3}.[0-9]{1,3}$)|(^192.168.[0-9]{1,3}.[0-9]{1,3}$)|^localhost',
-  'i',
-)
-
 export default function (ctx: AppContext, app: Express) {
   return app.get(
-    '/redirect',
+    '/:linkId',
     handler(async (req, res) => {
-      let link = req.query.u
+      const linkId = req.params.linkId
+      const contentType = req.accepts(['html', 'json'])
       assert(
-        typeof link === 'string',
-        'express guarantees link query parameter is a string',
+        typeof linkId === 'string',
+        'express guarantees id parameter is a string',
       )
-
-      let url: URL | undefined
-      try {
-        url = new URL(link)
-      } catch {}
-
-      if (
-        !url ||
-        (url.protocol !== 'http:' && url.protocol !== 'https:') || // is a http(s) url
-        (ctx.cfg.service.hostnames.includes(url.hostname.toLowerCase()) &&
-          url.pathname === '/redirect') || // is a redirect loop
-        INTERNAL_IP_REGEX.test(url.hostname) // isn't directing to an internal location
-      ) {
+      const found = await ctx.db.db
+        .selectFrom('link')
+        .selectAll()
+        .where('id', '=', linkId)
+        .executeTakeFirst()
+      if (!found) {
+        // potentially broken or mistyped link
         res.setHeader('Cache-Control', 'no-store')
+        if (contentType === 'json') {
+          return res
+            .status(404)
+            .json({
+              error: 'NotFound',
+              message: 'Link not found',
+            })
+            .end()
+        }
+        // send the user to the app
         res.setHeader('Location', `https://${ctx.cfg.service.appHostname}`)
         return res.status(302).end()
       }
-
-      res.setHeader('Cache-Control', `max-age=${(7 * DAY) / SECOND}`)
-      res.type('html')
-      res.status(200)
-
-      const escaped = escapeHTML(url.href)
-      return res.send(
-        `<html><head><meta http-equiv="refresh" content="0; URL='${escaped}'" /><style>:root { color-scheme: light dark; }</style></head></html>`,
+      // build url from original url in order to preserve query params
+      const url = new URL(
+        req.originalUrl,
+        `https://${ctx.cfg.service.appHostname}`,
       )
+      url.pathname = found.path
+      res.setHeader('Cache-Control', `max-age=${(7 * DAY) / SECOND}`)
+      if (contentType === 'json') {
+        return res.json({url: url.href}).end()
+      }
+      res.setHeader('Location', url.href)
+      return res.status(301).end()
     }),
   )
 }

bskylink/src/routes/root.ts

@@ -1,14 +0,0 @@
-import {Express} from 'express'
-
-import {AppContext} from '../context.js'
-import {handler} from './util.js'
-
-export default function (ctx: AppContext, app: Express) {
-  return app.get(
-    '/',
-    handler(async (_req, res) => {
-      res.setHeader('Location', `https://${ctx.cfg.service.appHostname}`)
-      return res.status(301).end()
-    }),
-  )
-}

bskylink/src/routes/shortLink.ts

@@ -1,54 +0,0 @@
-import assert from 'node:assert'
-
-import {DAY, SECOND} from '@atproto/common'
-import {Express} from 'express'
-
-import {AppContext} from '../context.js'
-import {handler} from './util.js'
-
-export default function (ctx: AppContext, app: Express) {
-  return app.get(
-    '/:linkId',
-    handler(async (req, res) => {
-      const linkId = req.params.linkId
-      const contentType = req.accepts(['html', 'json'])
-      assert(
-        typeof linkId === 'string',
-        'express guarantees id parameter is a string',
-      )
-      const found = await ctx.db.db
-        .selectFrom('link')
-        .selectAll()
-        .where('id', '=', linkId)
-        .executeTakeFirst()
-      if (!found) {
-        // potentially broken or mistyped link
-        res.setHeader('Cache-Control', 'no-store')
-        if (contentType === 'json') {
-          return res
-            .status(404)
-            .json({
-              error: 'NotFound',
-              message: 'Link not found',
-            })
-            .end()
-        }
-        // send the user to the app
-        res.setHeader('Location', `https://${ctx.cfg.service.appHostname}`)
-        return res.status(302).end()
-      }
-      // build url from original url in order to preserve query params
-      const url = new URL(
-        req.originalUrl,
-        `https://${ctx.cfg.service.appHostname}`,
-      )
-      url.pathname = found.path
-      res.setHeader('Cache-Control', `max-age=${(7 * DAY) / SECOND}`)
-      if (contentType === 'json') {
-        return res.json({url: url.href}).end()
-      }
-      res.setHeader('Location', url.href)
-      return res.status(301).end()
-    }),
-  )
-}

bskylink/yarn.lock

@@ -69,11 +69,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/escape-html@^1.0.4":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@types/escape-html/-/escape-html-1.0.4.tgz#dc7c166b76c7b03b27e32f80edf01d91eb5d9af2"
-  integrity sha512-qZ72SFTgUAZ5a7Tj6kf2SHLetiH5S6f8G5frB2SPQ3EyF02kxdyBFf4Tz4banE3xCgGnKgWLt//a6VuYHKYJTg==
-
 "@types/node@*":
   version "20.14.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-20.14.2.tgz#a5f4d2bcb4b6a87bffcaa717718c5a0f208f4a18"
@@ -281,7 +276,7 @@ es-errors@^1.3.0:
   resolved "https://registry.yarnpkg.com/es-errors/-/es-errors-1.3.0.tgz#05f75a25dab98e4fb1dcd5e1472c0546d5057c8f"
   integrity sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==
 
-escape-html@^1.0.3, escape-html@~1.0.3:
+escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==

bskyogcard/src/routes/starter-pack.tsx

@@ -97,7 +97,6 @@ const hideAvatarLabels = new Set([
   'nudity',
   'sexual-figurative',
   'graphic-media',
-  'gore',
   'self-harm',
   'sensitive',
   'security',

bskyweb/cmd/bskyweb/main.go

@@ -94,20 +94,6 @@ func run(args []string) {
 					Value:    "",
 					EnvVars:  []string{"STATIC_CDN_HOST"},
 				},
-				&cli.BoolFlag{
-					Name:     "bsky-canonical-instance",
-					Usage:    "Enable if this is the canonical deployment (bsky.app)",
-					Value:    false,
-					Required: false,
-					EnvVars:  []string{"BSKY_CANONICAL_INSTANCE"},
-				},
-				&cli.BoolFlag{
-					Name:     "robots-disallow-all",
-					Usage:    "Crawling is allowed by default. Enable this flag to Disallow all",
-					Value:    false,
-					Required: false,
-					EnvVars:  []string{"ROBOTS_DISALLOW_ALL"},
-				},
 			},
 		},
 	}

bskyweb/cmd/bskyweb/server.go

@@ -63,8 +63,6 @@ func serve(cctx *cli.Context) error {
 	corsOrigins := cctx.StringSlice("cors-allowed-origins")
 	staticCDNHost := cctx.String("static-cdn-host")
 	staticCDNHost = strings.TrimSuffix(staticCDNHost, "/")
-	canonicalInstance := cctx.Bool("bsky-canonical-instance")
-	robotsDisallowAll := cctx.Bool("robots-disallow-all")
 
 	// Echo
 	e := echo.New()
@@ -206,41 +204,25 @@ func serve(cctx *cli.Context) error {
 		return http.FS(fsys)
 	}())
 
-	// enable some special endpoints for the "canonical" deployment (bsky.app). not having these enabled should *not* impact regular operation
-	if canonicalInstance {
-		e.GET("/ips-v4", echo.WrapHandler(staticHandler))
-		e.GET("/ips-v6", echo.WrapHandler(staticHandler))
-		e.GET("/security.txt", func(c echo.Context) error {
-			return c.Redirect(http.StatusMovedPermanently, "/.well-known/security.txt")
-		})
-		e.GET("/.well-known/*", echo.WrapHandler(staticHandler))
-	}
-
-	// default to permissive, but Disallow all if flag set
-	if robotsDisallowAll {
-		e.File("/robots.txt", "static/robots-disallow-all.txt")
-	} else {
-		e.GET("/robots.txt", echo.WrapHandler(staticHandler))
-	}
-
+	e.GET("/robots.txt", echo.WrapHandler(staticHandler))
+	e.GET("/ips-v4", echo.WrapHandler(staticHandler))
+	e.GET("/ips-v6", echo.WrapHandler(staticHandler))
+	e.GET("/.well-known/*", echo.WrapHandler(staticHandler))
+	e.GET("/security.txt", func(c echo.Context) error {
+		return c.Redirect(http.StatusMovedPermanently, "/.well-known/security.txt")
+	})
 	e.GET("/iframe/youtube.html", echo.WrapHandler(staticHandler))
 	e.GET("/static/*", echo.WrapHandler(http.StripPrefix("/static/", staticHandler)), func(next echo.HandlerFunc) echo.HandlerFunc {
 		return func(c echo.Context) error {
-			c.Response().Before(func() {
-				if c.Response().Status >= 300 {
-					return
-				}
+			path := c.Request().URL.Path
+			maxAge := 1 * (60 * 60) // default is 1 hour
 
-				path := c.Request().URL.Path
-				maxAge := 1 * (60 * 60) // default is 1 hour
+			// all assets in /static/js, /static/css, /static/media are content-hashed and can be cached for a long time
+			if strings.HasPrefix(path, "/static/js/") || strings.HasPrefix(path, "/static/css/") || strings.HasPrefix(path, "/static/media/") {
+				maxAge = 365 * (60 * 60 * 24) // 1 year
+			}
 
-				// all assets in /static/js, /static/css, /static/media are content-hashed and can be cached for a long time
-				if strings.HasPrefix(path, "/static/js/") || strings.HasPrefix(path, "/static/css/") || strings.HasPrefix(path, "/static/media/") {
-					maxAge = 365 * (60 * 60 * 24) // 1 year
-				}
-
-				c.Response().Header().Set("Cache-Control", fmt.Sprintf("public, max-age=%d", maxAge))
-			})
+			c.Response().Header().Set("Cache-Control", fmt.Sprintf("public, max-age=%d", maxAge))
 			return next(c)
 		}
 	})
@@ -275,7 +257,6 @@ func serve(cctx *cli.Context) error {
 	e.GET("/settings/account", server.WebGeneric)
 	e.GET("/settings/privacy-and-security", server.WebGeneric)
 	e.GET("/settings/content-and-media", server.WebGeneric)
-	e.GET("/settings/interests", server.WebGeneric)
 	e.GET("/settings/about", server.WebGeneric)
 	e.GET("/settings/app-icon", server.WebGeneric)
 	e.GET("/sys/debug", server.WebGeneric)
@@ -296,7 +277,6 @@ func serve(cctx *cli.Context) error {
 	e.GET("/profile/:handleOrDID/follows", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/followers", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/known-followers", server.WebGeneric)
-	e.GET("/profile/:handleOrDID/search", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/lists/:rkey", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/feed/:rkey", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/feed/:rkey/liked-by", server.WebGeneric)

bskyweb/static/robots-disallow-all.txt

@@ -1,3 +0,0 @@
-# This is an development or self-hosted instance of the bsky web app, and crawling has been disallowed by the operator team.
-User-Agent: *
-Disallow: /

bskyweb/templates/base.html

@@ -8,6 +8,7 @@
     Preconnect to essential domains
   -->
   <link rel="preconnect" href="https://bsky.social">
+  <link rel="preconnect" href="https://bsky.network">
   <title>{%- block head_title -%}Bluesky{%- endblock -%}</title>
 
   <!-- Hello Humans! API docs at https://atproto.com -->

crowdin.yml

@@ -1,21 +0,0 @@
-{
-  "project_id": "1",
-  "base_url": "https://bluesky.api.crowdin.com",
-  "base_path": ".",
-  "preserve_hierarchy": true,
-  "files": [
-    {
-      "source": "/src/locale/locales/en/messages.po",
-      "translation": "/src/locale/locales/%two_letters_code%/messages.po",
-      "languages_mapping": {
-          "two_letters_code": {
-            "pt-BR": "pt-BR",
-            "en-GB": "en-GB",
-            "zh-CN": "zh-CN",
-            "zh-TW": "zh-TW",
-            "zh-HK": "zh-HK"
-          }
-      }
-    }
-  ]
-}

docs/localization.md

@@ -1,67 +1,11 @@
 # Internationalization
 
-We want the official Bluesky app to be supported in as many languages as possible. If you want to help us translate the app, please get involved on [Crowdin](https://bluesky.crowdin.com/u/projects/1) or open an issue on the [Bluesky app repo on GitHub](https://github.com/bluesky-social/social-app).
+We want the official Bluesky app to be supported in as many languages as possible. If you want to help us translate the app, please open a PR or issue on the [Bluesky app repo on GitHub](https://github.com/bluesky-social/social-app)
 
 ## Tools
-
-- We use Crowdin to manage translations.
-  - Bluesky Crowdin: https://bluesky.crowdin.com/u/projects/1
-  - Introduction to Crowdin: https://support.crowdin.com/for-translators/
-- We use Lingui to implement translations. You can find the documentation [here](https://lingui.dev/).
-
-## Translators
-
-Much of the app is translated by community contributions. (We <3 our translators!) If you want to participate in the translation of the app, read this section.
-
-### Using Crowdin
-
-[Crowdin](https://bluesky.crowdin.com/u/projects/1) is our primary tool for managing translations. There are two roles:
-
-- **Proof-readers**. Can create new translations and approve submitted translations.
-- **Translators**. Can create new translations.
-
-All translations must be approved by proof-readers before they are accepted into the app.
-
-### Using other platforms
-
-You may contribute PRs separately from Crowdin, however we strongly recommend using Crowdin to avoid conflicts.
-
-### Code of conduct on Crowdin
-
-Please treat everyone with respect. Proof-readers are given final say on translations. Translators who frequently come into conflict with other translators, or who contribute noticably incorrect translations, will have their membership to the Crowdin project revoked.
-
-### Adding a new language
-
-You can request a new language be added to the project by clicking **Request New Language** on Crowdin or you can create a [GitHub issue](https://github.com/bluesky-social/social-app/issues).
-
-Please only request a new language when you are certain you will be able to contribute a substantive portion of translations for the language.
-
-## Maintainers
-
-Install the [Crowdin CLI](https://crowdin.github.io/crowdin-cli/). You will need to [configure your API token](https://crowdin.github.io/crowdin-cli/configuration) to access the project.
-
-### English source-file sync with Crowdin
-
-Every night, a GitHub action will run `yarn intl:extract` to update the english `messages.po` file. This will be automatically synced with Crowdin. Crowdin should notify all subscribed users of new translations.
-
-### Release process
-
-1. Pull main and create a branch.
-1. Run `yarn intl:pull` to fetch all translation updates from Crowdin. Commit.
-1. Run `yarn intl:extract:all` to ensure all `.po` files are synced with the current state of the code. Commit.
-1. Create a PR, ensure the translations all look correct, and merge.
-1. If needed:
-  1. Merge all approved translation PRs (contributions from outside crowdin).
-  1. Run `yarn intl:push` to sync Crowdin with the state of the repo.
-
-### Testing the translations in Crowdin
-
-You can run `yarn intl:pull` to pull the currently-approved translations from Crowdin.
-
-## Developers
+We are using Lingui to manage translations. You can find the documentation [here](https://lingui.dev/).
 
 ### Adding new strings
-
 When adding a new string, do it as follows:
 ```jsx
 // Before
@@ -117,7 +61,6 @@ So the workflow is as follows:
 6. Enjoy translated app!
 
 ### Common pitfalls
-
 These pitfalls are memoization pitfalls that will cause the components to not re-render when the locale is changed -- causing stale translations to be shown.
 
 ```jsx
@@ -168,3 +111,9 @@ export function Welcome() {
   return <div>{welcome}</div>;
 }
 ```
+
+
+### Credits
+Please check each individual `messages.po` file for the credits of the translators. We are very grateful for their help! 
+
+If you would like to translate the Bluesky app into your language, please open a PR or issue on this repo.

jest/jestSetup.js

@@ -119,5 +119,5 @@ jest.mock('statsig-react-native-expo', () => ({
   },
 }))
 
-jest.mock('../src/logger/bitdrift/lib', () => ({}))
+jest.mock('../src/lib/bitdrift', () => ({}))
 jest.mock('../src/lib/statsig/statsig', () => ({}))

lingui.config.js

@@ -5,22 +5,16 @@ module.exports = {
     'an',
     'ast',
     'ca',
-    'cy',
-    'da',
     'de',
     'el',
     'en-GB',
-    'eo',
     'es',
-    'eu',
     'fi',
     'fr',
     'ga',
-    'gd',
     'gl',
     'hi',
     'hu',
-    'ia',
     'id',
     'it',
     'ja',
@@ -32,7 +26,6 @@ module.exports = {
     'pt-BR',
     'ro',
     'ru',
-    'sv',
     'th',
     'tr',
     'uk',

metro.config.js

@@ -1,6 +1,6 @@
 // Learn more https://docs.expo.io/guides/customizing-metro
-const {getSentryExpoConfig} = require('@sentry/react-native/metro')
-const cfg = getSentryExpoConfig(__dirname)
+const {getDefaultConfig} = require('expo/metro-config')
+const cfg = getDefaultConfig(__dirname)
 
 cfg.resolver.sourceExts = process.env.RN_SRC_EXT
   ? process.env.RN_SRC_EXT.split(',').concat(cfg.resolver.sourceExts)

modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt

@@ -31,13 +31,9 @@ class BottomSheetView(
   private lateinit var dialogRootViewGroup: DialogRootViewGroup
   private var eventDispatcher: EventDispatcher? = null
 
-  private val rawScreenHeight = context.resources.displayMetrics.heightPixels.toFloat()
-  private val safeScreenHeight = (rawScreenHeight - getNavigationBarHeight()).toFloat()
-
-  private fun getNavigationBarHeight(): Int {
-      val resourceId = resources.getIdentifier("navigation_bar_height", "dimen", "android")
-      return if (resourceId > 0) resources.getDimensionPixelSize(resourceId) else 0
-  }
+  private val screenHeight =
+    context.resources.displayMetrics.heightPixels
+      .toFloat()
 
   private val onAttemptDismiss by EventDispatcher()
   private val onSnapPointChange by EventDispatcher()
@@ -67,12 +63,12 @@ class BottomSheetView(
         }
     }
 
-  var maxHeight = this.safeScreenHeight
+  var maxHeight = this.screenHeight
     set(value) {
       val px = dpToPx(value)
       field =
-        if (px > this.safeScreenHeight) {
-          this.safeScreenHeight
+        if (px > this.screenHeight) {
+          this.screenHeight
         } else {
           px
         }
@@ -157,19 +153,6 @@ class BottomSheetView(
 
   // Presentation
 
-  private fun getHalfExpandedRatio(contentHeight: Float): Float {
-    return when {
-      // Full height sheets
-      contentHeight >= safeScreenHeight -> 0.99f
-      // Medium height sheets (>50% but <100%)
-      contentHeight >= safeScreenHeight / 2 ->
-        this.clampRatio(this.getTargetHeight() / safeScreenHeight)
-      // Small height sheets (<50%)
-      else ->
-        this.clampRatio(this.getTargetHeight() / rawScreenHeight)
-    }
-  }
-
   private fun present() {
     if (this.isOpen || this.isOpening || this.isClosing) return
 
@@ -189,12 +172,12 @@ class BottomSheetView(
       val behavior = BottomSheetBehavior.from(it)
       behavior.state = BottomSheetBehavior.STATE_HIDDEN
       behavior.isFitToContents = true
-      behavior.halfExpandedRatio = getHalfExpandedRatio(contentHeight)
+      behavior.halfExpandedRatio = this.clampRatio(this.getTargetHeight() / this.screenHeight)
       behavior.skipCollapsed = true
       behavior.isDraggable = true
       behavior.isHideable = true
 
-      if (contentHeight >= this.safeScreenHeight || this.minHeight >= this.safeScreenHeight) {
+      if (contentHeight >= this.screenHeight || this.minHeight >= this.screenHeight) {
         behavior.state = BottomSheetBehavior.STATE_EXPANDED
         this.selectedSnapPoint = 2
       } else {
@@ -244,11 +227,11 @@ class BottomSheetView(
     bottomSheet?.let {
       val behavior = BottomSheetBehavior.from(it)
 
-      behavior.halfExpandedRatio = getHalfExpandedRatio(contentHeight)
+      behavior.halfExpandedRatio = this.clampRatio(this.getTargetHeight() / this.screenHeight)
 
-      if (contentHeight > this.safeScreenHeight && behavior.state != BottomSheetBehavior.STATE_EXPANDED) {
+      if (contentHeight > this.screenHeight && behavior.state != BottomSheetBehavior.STATE_EXPANDED) {
         behavior.state = BottomSheetBehavior.STATE_EXPANDED
-      } else if (contentHeight < this.safeScreenHeight && behavior.state != BottomSheetBehavior.STATE_HALF_EXPANDED) {
+      } else if (contentHeight < this.screenHeight && behavior.state != BottomSheetBehavior.STATE_HALF_EXPANDED) {
         behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED
       }
     }

modules/bottom-sheet/src/BottomSheetNativeComponent.tsx

@@ -1,17 +1,14 @@
 import * as React from 'react'
 import {
   Dimensions,
-  LayoutChangeEvent,
   NativeSyntheticEvent,
   Platform,
   StyleProp,
   View,
   ViewStyle,
 } from 'react-native'
-import {useSafeAreaInsets} from 'react-native-safe-area-context'
 import {requireNativeModule, requireNativeViewManager} from 'expo-modules-core'
 
-import {isIOS} from '#/platform/detection'
 import {BottomSheetState, BottomSheetViewProps} from './BottomSheet.types'
 import {BottomSheetPortalProvider} from './BottomSheetPortal'
 import {Context as PortalContext} from './BottomSheetPortal'
@@ -84,10 +81,12 @@ export class BottomSheetNativeComponent extends React.Component<
       return null
     }
 
+    const {children, backgroundColor, ...rest} = this.props
+    const cornerRadius = rest.cornerRadius ?? 0
+
     let extraStyles
     if (isIOS15 && this.state.viewHeight) {
       const {viewHeight} = this.state
-      const cornerRadius = this.props.cornerRadius ?? 0
       if (viewHeight < screenHeight / 2) {
         extraStyles = {
           height: viewHeight,
@@ -100,70 +99,39 @@ export class BottomSheetNativeComponent extends React.Component<
 
     return (
       <Portal>
-        <BottomSheetNativeComponentInner
-          {...this.props}
-          nativeViewRef={this.ref}
+        <NativeView
+          {...rest}
           onStateChange={this.onStateChange}
-          extraStyles={extraStyles}
-          onLayout={e => {
-            const {height} = e.nativeEvent.layout
-            this.setState({viewHeight: height})
-            this.updateLayout()
+          ref={this.ref}
+          style={{
+            position: 'absolute',
+            height: screenHeight,
+            width: '100%',
           }}
-        />
+          containerBackgroundColor={backgroundColor}>
+          <View
+            style={[
+              {
+                flex: 1,
+                backgroundColor,
+              },
+              Platform.OS === 'android' && {
+                borderTopLeftRadius: cornerRadius,
+                borderTopRightRadius: cornerRadius,
+              },
+              extraStyles,
+            ]}>
+            <View
+              onLayout={e => {
+                const {height} = e.nativeEvent.layout
+                this.setState({viewHeight: height})
+                this.updateLayout()
+              }}>
+              <BottomSheetPortalProvider>{children}</BottomSheetPortalProvider>
+            </View>
+          </View>
+        </NativeView>
       </Portal>
     )
   }
 }
-
-function BottomSheetNativeComponentInner({
-  children,
-  backgroundColor,
-  onLayout,
-  onStateChange,
-  nativeViewRef,
-  extraStyles,
-  ...rest
-}: BottomSheetViewProps & {
-  extraStyles?: StyleProp<ViewStyle>
-  onStateChange: (
-    event: NativeSyntheticEvent<{state: BottomSheetState}>,
-  ) => void
-  nativeViewRef: React.RefObject<View>
-  onLayout: (event: LayoutChangeEvent) => void
-}) {
-  const insets = useSafeAreaInsets()
-  const cornerRadius = rest.cornerRadius ?? 0
-
-  const sheetHeight = isIOS ? screenHeight - insets.top : screenHeight
-
-  return (
-    <NativeView
-      {...rest}
-      onStateChange={onStateChange}
-      ref={nativeViewRef}
-      style={{
-        position: 'absolute',
-        height: sheetHeight,
-        width: '100%',
-      }}
-      containerBackgroundColor={backgroundColor}>
-      <View
-        style={[
-          {
-            flex: 1,
-            backgroundColor,
-          },
-          Platform.OS === 'android' && {
-            borderTopLeftRadius: cornerRadius,
-            borderTopRightRadius: cornerRadius,
-          },
-          extraStyles,
-        ]}>
-        <View onLayout={onLayout}>
-          <BottomSheetPortalProvider>{children}</BottomSheetPortalProvider>
-        </View>
-      </View>
-    </NativeView>
-  )
-}

package.json

@@ -1,11 +1,11 @@
 {
   "name": "bsky.app",
-  "version": "1.100.0",
+  "version": "1.97.0",
   "private": true,
   "engines": {
     "node": ">=20"
   },
-  "packageManager": "yarn@1.22.22",
+  "packageManager": "yarn@1.22.19",
   "scripts": {
     "prepare": "is-ci || husky install",
     "postinstall": "patch-package && yarn intl:compile",
@@ -42,24 +42,19 @@
     "perf:test:measure": "NODE_ENV=test flashlight test --bundleId xyz.blueskyweb.app --testCommand \"yarn perf:test\" --duration 150000 --resultsFilePath .perf/results.json",
     "perf:test:results": "NODE_ENV=test flashlight report .perf/results.json",
     "perf:measure": "NODE_ENV=test flashlight measure",
-    "intl:build": "yarn intl:extract:all && yarn intl:compile",
-    "intl:extract": "lingui extract --clean --locale en",
-    "intl:extract:all": "lingui extract --clean",
+    "intl:build": "yarn intl:extract && yarn intl:compile",
+    "intl:extract": "lingui extract",
     "intl:compile": "lingui compile",
-    "intl:pull": "crowdin download translations --verbose -b main",
-    "intl:push": "crowdin push translations --verbose -b main",
     "nuke": "rm -rf ./node_modules && rm -rf ./ios && rm -rf ./android",
     "update-extensions": "bash scripts/updateExtensions.sh",
-    "export": "npx expo export --dump-sourcemap && yarn upload-native-sourcemaps",
-    "upload-native-sourcemaps": "npx sentry-expo-upload-sourcemaps dist",
+    "export": "npx expo export",
     "make-deploy-bundle": "bash scripts/bundleUpdate.sh",
     "generate-webpack-stats-file": "EXPO_PUBLIC_GENERATE_STATS=1 yarn build-web",
     "open-analyzer": "EXPO_PUBLIC_OPEN_ANALYZER=1 yarn build-web",
     "icons:optimize": "svgo -f ./assets/icons"
   },
   "dependencies": {
-    "@atproto/api": "^0.14.20",
-    "@bitdrift/react-native": "^0.6.8",
+    "@atproto/api": "^0.13.21",
     "@braintree/sanitize-url": "^6.0.2",
     "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
     "@emoji-mart/react": "^1.1.1",
@@ -80,10 +75,10 @@
     "@mattermost/react-native-paste-input": "^0.7.1",
     "@miblanchard/react-native-slider": "^2.3.1",
     "@mozzius/expo-dynamic-app-icon": "^1.5.0",
-    "@radix-ui/react-dismissable-layer": "^1.1.5",
-    "@radix-ui/react-dropdown-menu": "2.1.6",
+    "@radix-ui/react-dismissable-layer": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "2.0.1",
     "@radix-ui/react-focus-guards": "^1.1.1",
-    "@radix-ui/react-focus-scope": "^1.1.2",
+    "@radix-ui/react-focus-scope": "^1.1.0",
     "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-menu/menu": "^1.1.7",
     "@react-native-picker/picker": "2.10.2",
@@ -91,7 +86,7 @@
     "@react-navigation/drawer": "^6.6.15",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.9.26",
-    "@sentry/react-native": "6.9.1",
+    "@sentry/react-native": "5.24.3",
     "@tanstack/query-async-storage-persister": "^5.25.0",
     "@tanstack/react-query": "^5.8.1",
     "@tanstack/react-query-persist-client": "^5.25.0",
@@ -125,7 +120,7 @@
     "eventemitter3": "^5.0.1",
     "expo": "~52.0.19",
     "expo-application": "^6.0.1",
-    "expo-blur": "^14.0.3",
+    "expo-blur": "^14.0.1",
     "expo-build-properties": "^0.13.1",
     "expo-camera": "~16.0.7",
     "expo-clipboard": "^7.0.0",
@@ -150,7 +145,6 @@
     "expo-system-ui": "^4.0.4",
     "expo-task-manager": "~12.0.3",
     "expo-updates": "~0.26.10",
-    "expo-video": "^2.0.5",
     "expo-web-browser": "~14.0.1",
     "fast-text-encoding": "^1.0.6",
     "history": "^5.3.0",
@@ -174,18 +168,17 @@
     "react-dom": "^18.2.0",
     "react-image-crop": "^11.0.7",
     "react-keyed-flatten-children": "^3.0.0",
-    "react-native": "0.76.6",
+    "react-native": "0.76.3",
     "react-native-compressor": "1.10.3",
     "react-native-date-picker": "^5.0.7",
     "react-native-drawer-layout": "^4.1.1",
-    "react-native-emoji-popup": "^0.1.2",
     "react-native-gesture-handler": "2.20.2",
     "react-native-get-random-values": "~1.11.0",
     "react-native-image-crop-picker": "^0.41.6",
     "react-native-ios-context-menu": "^1.15.3",
     "react-native-keyboard-controller": "^1.14.5",
     "react-native-mmkv": "^2.12.2",
-    "react-native-pager-view": "6.7.0",
+    "react-native-pager-view": "6.6.1",
     "react-native-picker-select": "^9.3.1",
     "react-native-progress": "bluesky-social/react-native-progress",
     "react-native-qrcode-styled": "^0.3.3",
@@ -198,7 +191,6 @@
     "react-native-url-polyfill": "^1.3.0",
     "react-native-uuid": "^2.0.2",
     "react-native-view-shot": "^4.0.3",
-    "react-native-vision-camera": "^4.6.3",
     "react-native-web": "~0.19.13",
     "react-native-web-webview": "^1.0.2",
     "react-native-webview": "13.12.3",
@@ -214,7 +206,7 @@
     "zod": "^3.20.2"
   },
   "devDependencies": {
-    "@atproto/dev-env": "^0.3.87",
+    "@atproto/dev-env": "^0.3.67",
     "@babel/core": "^7.26.0",
     "@babel/preset-env": "^7.26.0",
     "@babel/runtime": "^7.26.0",
@@ -225,7 +217,6 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
     "@react-native/eslint-config": "^0.76.2",
     "@react-native/typescript-config": "^0.76.1",
-    "@sentry/webpack-plugin": "^3.2.2",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-native": "^12.8.1",
     "@types/jest": "^29.4.0",
@@ -247,7 +238,6 @@
     "eslint": "^8.19.0",
     "eslint-plugin-bsky-internal": "link:./eslint",
     "eslint-plugin-ft-flow": "^2.0.3",
-    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-lingui": "^0.2.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-compiler": "19.0.0-beta-a7bf2bd-20241110",
@@ -275,6 +265,7 @@
     "@expo/image-utils": "0.6.3",
     "@react-native/babel-preset": "0.76.1",
     "@react-native/normalize-colors": "0.76.1",
+    "@radix-ui/react-focus-scope": "1.1.0",
     "@types/react": "^18",
     "**/expo-constants": "17.0.3",
     "**/expo-device": "7.0.1",

patches/@sentry+react-native+5.24.3.patch

@@ -0,0 +1,36 @@
+diff --git a/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js b/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
+index 7e0b4cd..177454c 100644
+--- a/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
++++ b/node_modules/@sentry/react-native/dist/js/utils/ignorerequirecyclelogs.js
+@@ -3,6 +3,8 @@ import { LogBox } from 'react-native';
+  * This is a workaround for using fetch on RN, this is a known issue in react-native and only generates a warning.
+  */
+ export function ignoreRequireCycleLogs() {
+-    LogBox.ignoreLogs(['Require cycle:']);
++    try {
++        LogBox.ignoreLogs(['Require cycle:']);
++    } catch (e) {}
+ }
+ //# sourceMappingURL=ignorerequirecyclelogs.js.map
+\ No newline at end of file
+diff --git a/node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps.js b/node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps.js
+index 0f244f2..ae7dfb3 100755
+--- a/node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps.js
++++ b/node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps.js
+@@ -174,6 +174,7 @@ if (!outputDir) {
+   process.exit(1);
+ }
+
++const otherArgs = process.argv.slice(3);
+ const files = getAssetPathsSync(outputDir);
+ const groupedAssets = groupAssets(files);
+
+@@ -195,7 +196,7 @@ for (const [assetGroupName, assets] of Object.entries(groupedAssets)) {
+
+   const isHermes = assets.find(asset => asset.endsWith('.hbc'));
+   const windowsCallback = process.platform === "win32" ? 'node ' : '';
+-  execSync(`${windowsCallback}${sentryCliBin} sourcemaps upload ${isHermes ? '--debug-id-reference' : ''} ${assets.join(' ')}`, {
++  execSync(`${windowsCallback}${sentryCliBin} sourcemaps upload ${isHermes ? '--debug-id-reference' : ''} ${assets.join(' ')} ${otherArgs.join(' ')}`, {
+     env: {
+       ...process.env,
+       [SENTRY_PROJECT]: sentryProject,

patches/@sentry+react-native+6.9.1.patch

@@ -1,13 +0,0 @@
-diff --git a/node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps.js b/node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps.js
-index c282ade..8777755 100755
---- a/node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps.js
-+++ b/node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps.js
-@@ -215,7 +215,7 @@ for (const [assetGroupName, assets] of Object.entries(groupedAssets)) {
- 
-   const isHermes = assets.find(asset => asset.endsWith('.hbc'));
-   const windowsCallback = process.platform === "win32" ? 'node ' : '';
--  execSync(`${windowsCallback}${sentryCliBin} sourcemaps upload ${isHermes ? '--debug-id-reference' : ''} ${assets.join(' ')}`, {
-+  execSync(`${windowsCallback}${sentryCliBin} sourcemaps upload ${isHermes ? '--debug-id-reference' : ''} ${assets.join(' ')} --dist ${process.env.SENTRY_DIST}`, {
-     env: {
-       ...process.env,
-       [SENTRY_PROJECT]: sentryProject,

plugins/withGradleJVMHeapSizeIncrease.js

@@ -1,34 +0,0 @@
-const {withGradleProperties} = require('expo/config-plugins')
-
-function setGradlePropertiesValue(config, key, value) {
-  return withGradleProperties(config, exportedConfig => {
-    const keyIdx = exportedConfig.modResults.findIndex(
-      item => item.type === 'property' && item.key === key,
-    )
-    if (keyIdx >= 0) {
-      exportedConfig.modResults.splice(keyIdx, 1, {
-        type: 'property',
-        key,
-        value,
-      })
-    } else {
-      exportedConfig.modResults.push({
-        type: 'property',
-        key,
-        value,
-      })
-    }
-
-    return exportedConfig
-  })
-}
-
-module.exports = function withGradleJVMHeapSizeIncrease(config) {
-  config = setGradlePropertiesValue(
-    config,
-    'org.gradle.jvmargs',
-    '-Xmx4096m -XX:MaxMetaspaceSize=1024m', //Set data of your choice
-  )
-
-  return config
-}

plugins/withNoBundleCompression.js

@@ -1,70 +0,0 @@
-const {withAppBuildGradle} = require('@expo/config-plugins')
-
-/**
- * A Config Plugin to disable bundle compression in Android build.gradle.
- * @param {import('@expo/config-plugins').ConfigPlugin} config
- * @returns {import('@expo/config-plugins').ConfigPlugin}
- */
-module.exports = function withNoBundleCompression(config) {
-  return withAppBuildGradle(config, androidConfig => {
-    let buildGradle = androidConfig.modResults.contents
-
-    const hasAndroidResources = buildGradle.includes('androidResources {')
-    const hasNoCompress = buildGradle.includes('noCompress')
-
-    if (hasAndroidResources) {
-      if (hasNoCompress) {
-        if (
-          buildGradle.includes('noCompress += ["bundle"]') ||
-          buildGradle.includes("noCompress += 'bundle'") ||
-          buildGradle.includes('noCompress += "bundle"')
-        ) {
-          return androidConfig
-        }
-
-        const lines = buildGradle.split('\n')
-        const modifiedLines = lines.map(line => {
-          if (line.trim().startsWith('noCompress')) {
-            if (line.includes('+=')) {
-              return line.replace(/\]/, ', "bundle"]')
-            } else if (line.includes('=')) {
-              return line.replace('=', '+= ["bundle",') + ']'
-            }
-          }
-          return line
-        })
-        androidConfig.modResults.contents = modifiedLines.join('\n')
-      } else {
-        const androidResources = buildGradle.indexOf('androidResources {')
-        if (androidResources === -1) {
-          throw new Error(
-            `Cannot find androidResources { block in build.gradle!`,
-          )
-        }
-        const insertPosition = buildGradle.indexOf('\n', androidResources) + 1
-        const newContent =
-          buildGradle.slice(0, insertPosition) +
-          '        noCompress += ["bundle"]\n' +
-          buildGradle.slice(insertPosition)
-
-        androidConfig.modResults.contents = newContent
-      }
-    } else {
-      const androidBlock = buildGradle.indexOf('android {')
-      if (androidBlock === -1) {
-        throw new Error(`Cannot find android { block in build.gradle!`)
-      }
-      const insertPosition = buildGradle.indexOf('\n', androidBlock) + 1
-      const newContent =
-        buildGradle.slice(0, insertPosition) +
-        '    androidResources {\n' +
-        '        noCompress += ["bundle"]\n' +
-        '    }\n' +
-        buildGradle.slice(insertPosition)
-
-      androidConfig.modResults.contents = newContent
-    }
-
-    return androidConfig
-  })
-}

postHooks/uploadSentrySourcemapsPostHook.js

@@ -0,0 +1,34 @@
+const exec = require('child_process').execSync
+
+const SENTRY_AUTH_TOKEN = process.env.SENTRY_AUTH_TOKEN
+
+module.exports = ({config}) => {
+  if (!SENTRY_AUTH_TOKEN) {
+    console.log(
+      'SENTRY_AUTH_TOKEN environment variable must be set to upload sourcemaps. Skipping.',
+    )
+    return
+  }
+
+  const org = config.organization
+  const project = config.project
+  const release = config.release
+  const dist = config.dist
+
+  if (!org || !project || !release || !dist) {
+    console.log(
+      '"organization", "project", "release", and "dist" must be set in the hook config to upload sourcemaps. Skipping.',
+    )
+    return
+  }
+
+  try {
+    console.log('Uploading sourcemaps to Sentry...')
+    exec(
+      `node node_modules/@sentry/react-native/scripts/expo-upload-sourcemaps dist --url https://sentry.io/  -o ${org} -p ${project} -r ${release} -d ${dist}`,
+    )
+    console.log('Sourcemaps uploaded to Sentry.')
+  } catch (e) {
+    console.error('Error uploading sourcemaps to Sentry:', e)
+  }
+}

src/App.native.tsx

@@ -1,243 +1,119 @@
-import 'react-native-url-polyfill/auto'
-import '#/logger/sentry/setup'
-import '#/logger/bitdrift/setup'
-import '#/view/icons'
-
-import React, {useEffect, useState} from 'react'
-import {GestureHandlerRootView} from 'react-native-gesture-handler'
-import {RootSiblingParent} from 'react-native-root-siblings'
+import {useState} from 'react'
+import {ScrollView, Text, View} from 'react-native'
 import {
-  initialWindowMetrics,
-  SafeAreaProvider,
-} from 'react-native-safe-area-context'
-import * as ScreenOrientation from 'expo-screen-orientation'
-import * as SplashScreen from 'expo-splash-screen'
-import * as SystemUI from 'expo-system-ui'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import * as Sentry from '@sentry/react-native'
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+} from 'react-native-gesture-handler'
+import PagerView from 'react-native-pager-view'
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+} from 'react-native-reanimated'
 
-import {KeyboardControllerProvider} from '#/lib/hooks/useEnableKeyboardController'
-import {QueryProvider} from '#/lib/react-query'
-import {Provider as StatsigProvider, tryFetchGates} from '#/lib/statsig/statsig'
-import {s} from '#/lib/styles'
-import {ThemeProvider} from '#/lib/ThemeContext'
-import I18nProvider from '#/locale/i18nProvider'
-import {logger} from '#/logger'
-import {isAndroid, isIOS} from '#/platform/detection'
-import {Provider as A11yProvider} from '#/state/a11y'
-import {Provider as MutedThreadsProvider} from '#/state/cache/thread-mutes'
-import {Provider as DialogStateProvider} from '#/state/dialogs'
-import {listenSessionDropped} from '#/state/events'
-import {
-  beginResolveGeolocation,
-  ensureGeolocationResolved,
-  Provider as GeolocationProvider,
-} from '#/state/geolocation'
-import {Provider as HomeBadgeProvider} from '#/state/home-badge'
-import {Provider as InvitesStateProvider} from '#/state/invites'
-import {Provider as LightboxStateProvider} from '#/state/lightbox'
-import {MessagesProvider} from '#/state/messages'
-import {Provider as ModalStateProvider} from '#/state/modals'
-import {init as initPersistedState} from '#/state/persisted'
-import {Provider as PrefsStateProvider} from '#/state/preferences'
-import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
-import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation-opts'
-import {Provider as UnreadNotifsProvider} from '#/state/queries/notifications/unread'
-import {
-  Provider as SessionProvider,
-  SessionAccount,
-  useSession,
-  useSessionApi,
-} from '#/state/session'
-import {readLastActiveAccount} from '#/state/session/util'
-import {Provider as ShellStateProvider} from '#/state/shell'
-import {Provider as ComposerProvider} from '#/state/shell/composer'
-import {Provider as LightStatusBarProvider} from '#/state/shell/light-status-bar'
-import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
-import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
-import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
-import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
-import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
-import {Provider as TrendingConfigProvider} from '#/state/trending-config'
-import {TestCtrls} from '#/view/com/testing/TestCtrls'
-import {Provider as VideoVolumeProvider} from '#/view/com/util/post-embeds/VideoVolumeContext'
-import * as Toast from '#/view/com/util/Toast'
-import {Shell} from '#/view/shell'
-import {ThemeProvider as Alf} from '#/alf'
-import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
-import {Provider as ContextMenuProvider} from '#/components/ContextMenu'
-import {NuxDialogs} from '#/components/dialogs/nuxs'
-import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
-import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
-import {Provider as PortalProvider} from '#/components/Portal'
-import {Splash} from '#/Splash'
-import {BottomSheetProvider} from '../modules/bottom-sheet'
-import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
+export default function App() {
+  const val = useSharedValue(0)
+  const [swipeEnabled, setSwipeEnabled] = useState(true)
 
-SplashScreen.preventAutoHideAsync()
-if (isIOS) {
-  SystemUI.setBackgroundColorAsync('black')
-}
-if (isAndroid) {
-  // iOS is handled by the config plugin -sfn
-  ScreenOrientation.lockAsync(ScreenOrientation.OrientationLock.PORTRAIT_UP)
-}
-
-/**
- * Begin geolocation ASAP
- */
-beginResolveGeolocation()
-
-function InnerApp() {
-  const [isReady, setIsReady] = React.useState(false)
-  const {currentAccount} = useSession()
-  const {resumeSession} = useSessionApi()
-  const theme = useColorModeTheme()
-  const {_} = useLingui()
-
-  const hasCheckedReferrer = useStarterPackEntry()
-
-  // init
-  useEffect(() => {
-    async function onLaunch(account?: SessionAccount) {
-      try {
-        if (account) {
-          await resumeSession(account)
-        } else {
-          await tryFetchGates(undefined, 'prefer-fresh-gates')
-        }
-      } catch (e) {
-        logger.error(`session: resume failed`, {message: e})
-      } finally {
-        setIsReady(true)
-      }
-    }
-    const account = readLastActiveAccount()
-    onLaunch(account)
-  }, [resumeSession])
-
-  useEffect(() => {
-    return listenSessionDropped(() => {
-      Toast.show(
-        _(msg`Sorry! Your session expired. Please sign in again.`),
-        'info',
-      )
+  let pan = Gesture.Pan()
+    .onBegin(() => {
+      'worklet'
+      console.log('begin')
+      val.set(0)
+    })
+    .onUpdate(e => {
+      'worklet'
+      console.log('update')
+      val.set(e.translationX)
+    })
+    .onEnd(() => {
+      'worklet'
+      console.log('end')
+      val.set(0)
+    })
+    .onFinalize(() => {
+      'worklet'
+      console.log('finalize')
+      val.set(0)
     })
-  }, [_])
 
-  return (
-    <Alf theme={theme}>
-      <ThemeProvider theme={theme}>
-        <ContextMenuProvider>
-          <Splash isReady={isReady && hasCheckedReferrer}>
-            <RootSiblingParent>
-              <VideoVolumeProvider>
-                <React.Fragment
-                  // Resets the entire tree below when it changes:
-                  key={currentAccount?.did}>
-                  <QueryProvider currentDid={currentAccount?.did}>
-                    <ComposerProvider>
-                      <StatsigProvider>
-                        <MessagesProvider>
-                          {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-                          <LabelDefsProvider>
-                            <ModerationOptsProvider>
-                              <LoggedOutViewProvider>
-                                <SelectedFeedProvider>
-                                  <HiddenRepliesProvider>
-                                    <HomeBadgeProvider>
-                                      <UnreadNotifsProvider>
-                                        <BackgroundNotificationPreferencesProvider>
-                                          <MutedThreadsProvider>
-                                            <ProgressGuideProvider>
-                                              <TrendingConfigProvider>
-                                                <GestureHandlerRootView
-                                                  style={s.h100pct}>
-                                                  <IntentDialogProvider>
-                                                    <TestCtrls />
-                                                    <Shell />
-                                                    <NuxDialogs />
-                                                  </IntentDialogProvider>
-                                                </GestureHandlerRootView>
-                                              </TrendingConfigProvider>
-                                            </ProgressGuideProvider>
-                                          </MutedThreadsProvider>
-                                        </BackgroundNotificationPreferencesProvider>
-                                      </UnreadNotifsProvider>
-                                    </HomeBadgeProvider>
-                                  </HiddenRepliesProvider>
-                                </SelectedFeedProvider>
-                              </LoggedOutViewProvider>
-                            </ModerationOptsProvider>
-                          </LabelDefsProvider>
-                        </MessagesProvider>
-                      </StatsigProvider>
-                    </ComposerProvider>
-                  </QueryProvider>
-                </React.Fragment>
-              </VideoVolumeProvider>
-            </RootSiblingParent>
-          </Splash>
-        </ContextMenuProvider>
-      </ThemeProvider>
-    </Alf>
-  )
-}
-
-function App() {
-  const [isReady, setReady] = useState(false)
-
-  React.useEffect(() => {
-    Promise.all([initPersistedState(), ensureGeolocationResolved()]).then(() =>
-      setReady(true),
-    )
-  }, [])
-
-  if (!isReady) {
-    return null
+  if (swipeEnabled) {
+    pan = pan.failOffsetX(-1).activeOffsetX(5)
+  } else {
+    pan = pan.failOffsetX([0, 0]).failOffsetY([0, 0])
   }
 
-  /*
-   * NOTE: only nothing here can depend on other data or session state, since
-   * that is set up in the InnerApp component above.
-   */
+  const style = useAnimatedStyle(() => {
+    return {
+      flex: 1,
+      transform: [
+        {
+          translateX: val.value,
+        },
+      ],
+    }
+  })
   return (
-    <GeolocationProvider>
-      <A11yProvider>
-        <KeyboardControllerProvider>
-          <SessionProvider>
-            <PrefsStateProvider>
-              <I18nProvider>
-                <ShellStateProvider>
-                  <InvitesStateProvider>
-                    <ModalStateProvider>
-                      <DialogStateProvider>
-                        <LightboxStateProvider>
-                          <PortalProvider>
-                            <BottomSheetProvider>
-                              <StarterPackProvider>
-                                <SafeAreaProvider
-                                  initialMetrics={initialWindowMetrics}>
-                                  <LightStatusBarProvider>
-                                    <InnerApp />
-                                  </LightStatusBarProvider>
-                                </SafeAreaProvider>
-                              </StarterPackProvider>
-                            </BottomSheetProvider>
-                          </PortalProvider>
-                        </LightboxStateProvider>
-                      </DialogStateProvider>
-                    </ModalStateProvider>
-                  </InvitesStateProvider>
-                </ShellStateProvider>
-              </I18nProvider>
-            </PrefsStateProvider>
-          </SessionProvider>
-        </KeyboardControllerProvider>
-      </A11yProvider>
-    </GeolocationProvider>
+    <GestureHandlerRootView>
+      <GestureDetector gesture={pan}>
+        <Animated.View style={style}>
+          <Pager pan={pan} setSwipeEnabled={setSwipeEnabled}>
+            <InnerScrollView pan={pan} />
+          </Pager>
+        </Animated.View>
+      </GestureDetector>
+    </GestureHandlerRootView>
   )
 }
 
-export default Sentry.wrap(App)
+function Pager({children, pan, setSwipeEnabled}) {
+  const native = Gesture.Native().requireExternalGestureToFail(pan)
+  return (
+    <GestureDetector gesture={native}>
+      <PagerView
+        overdrag={true}
+        initialPage={0}
+        style={{
+          flex: 1,
+          backgroundColor: 'green',
+        }}
+        onPageSelected={e => {
+          setSwipeEnabled(e.nativeEvent.position === 0)
+        }}>
+        {children}
+        {children}
+        {children}
+      </PagerView>
+    </GestureDetector>
+  )
+}
+
+function InnerScrollView({pan}) {
+  const native = Gesture.Native().blocksExternalGesture(pan)
+  return (
+    <View
+      style={{
+        paddingTop: 200,
+        alignItems: 'center',
+      }}>
+      <GestureDetector gesture={native}>
+        <ScrollView
+          horizontal
+          pagingEnabled
+          style={{
+            width: 300,
+            backgroundColor: 'yellow',
+            height: 200,
+          }}>
+          <Text
+            style={{
+              width: 1000,
+            }}>
+            1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26
+            27 28 29 30 31 32 33 34 35 36 37 38 39 40
+          </Text>
+        </ScrollView>
+      </GestureDetector>
+    </View>
+  )
+}

src/App.web.tsx

@@ -1,4 +1,4 @@
-import '#/logger/sentry/setup' // must be near top
+import '#/lib/sentry' // must be near top
 import '#/view/icons'
 import './style.css'
 
@@ -7,7 +7,6 @@ import {RootSiblingParent} from 'react-native-root-siblings'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import * as Sentry from '@sentry/react-native'
 
 import {QueryProvider} from '#/lib/react-query'
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
@@ -56,7 +55,6 @@ import {ToastContainer} from '#/view/com/util/Toast.web'
 import {Shell} from '#/view/shell/index'
 import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
-import {Provider as ContextMenuProvider} from '#/components/ContextMenu'
 import {NuxDialogs} from '#/components/dialogs/nuxs'
 import {useStarterPackEntry} from '#/components/hooks/useStarterPackEntry'
 import {Provider as IntentDialogProvider} from '#/components/intents/IntentDialogs'
@@ -96,7 +94,7 @@ function InnerApp() {
   useEffect(() => {
     return listenSessionDropped(() => {
       Toast.show(
-        _(msg`Sorry! Your session expired. Please sign in again.`),
+        _(msg`Sorry! Your session expired. Please log in again.`),
         'info',
       )
     })
@@ -108,56 +106,54 @@ function InnerApp() {
   return (
     <Alf theme={theme}>
       <ThemeProvider theme={theme}>
-        <ContextMenuProvider>
-          <RootSiblingParent>
-            <VideoVolumeProvider>
-              <ActiveVideoProvider>
-                <React.Fragment
-                  // Resets the entire tree below when it changes:
-                  key={currentAccount?.did}>
-                  <QueryProvider currentDid={currentAccount?.did}>
-                    <ComposerProvider>
-                      <StatsigProvider>
-                        <MessagesProvider>
-                          {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
-                          <LabelDefsProvider>
-                            <ModerationOptsProvider>
-                              <LoggedOutViewProvider>
-                                <SelectedFeedProvider>
-                                  <HiddenRepliesProvider>
-                                    <HomeBadgeProvider>
-                                      <UnreadNotifsProvider>
-                                        <BackgroundNotificationPreferencesProvider>
-                                          <MutedThreadsProvider>
-                                            <SafeAreaProvider>
-                                              <ProgressGuideProvider>
-                                                <TrendingConfigProvider>
-                                                  <IntentDialogProvider>
-                                                    <Shell />
-                                                    <NuxDialogs />
-                                                  </IntentDialogProvider>
-                                                </TrendingConfigProvider>
-                                              </ProgressGuideProvider>
-                                            </SafeAreaProvider>
-                                          </MutedThreadsProvider>
-                                        </BackgroundNotificationPreferencesProvider>
-                                      </UnreadNotifsProvider>
-                                    </HomeBadgeProvider>
-                                  </HiddenRepliesProvider>
-                                </SelectedFeedProvider>
-                              </LoggedOutViewProvider>
-                            </ModerationOptsProvider>
-                          </LabelDefsProvider>
-                        </MessagesProvider>
-                      </StatsigProvider>
-                    </ComposerProvider>
-                  </QueryProvider>
-                  <ToastContainer />
-                </React.Fragment>
-              </ActiveVideoProvider>
-            </VideoVolumeProvider>
-          </RootSiblingParent>
-        </ContextMenuProvider>
+        <RootSiblingParent>
+          <VideoVolumeProvider>
+            <ActiveVideoProvider>
+              <React.Fragment
+                // Resets the entire tree below when it changes:
+                key={currentAccount?.did}>
+                <QueryProvider currentDid={currentAccount?.did}>
+                  <ComposerProvider>
+                    <StatsigProvider>
+                      <MessagesProvider>
+                        {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                        <LabelDefsProvider>
+                          <ModerationOptsProvider>
+                            <LoggedOutViewProvider>
+                              <SelectedFeedProvider>
+                                <HiddenRepliesProvider>
+                                  <HomeBadgeProvider>
+                                    <UnreadNotifsProvider>
+                                      <BackgroundNotificationPreferencesProvider>
+                                        <MutedThreadsProvider>
+                                          <SafeAreaProvider>
+                                            <ProgressGuideProvider>
+                                              <TrendingConfigProvider>
+                                                <IntentDialogProvider>
+                                                  <Shell />
+                                                  <NuxDialogs />
+                                                </IntentDialogProvider>
+                                              </TrendingConfigProvider>
+                                            </ProgressGuideProvider>
+                                          </SafeAreaProvider>
+                                        </MutedThreadsProvider>
+                                      </BackgroundNotificationPreferencesProvider>
+                                    </UnreadNotifsProvider>
+                                  </HomeBadgeProvider>
+                                </HiddenRepliesProvider>
+                              </SelectedFeedProvider>
+                            </LoggedOutViewProvider>
+                          </ModerationOptsProvider>
+                        </LabelDefsProvider>
+                      </MessagesProvider>
+                    </StatsigProvider>
+                  </ComposerProvider>
+                </QueryProvider>
+                <ToastContainer />
+              </React.Fragment>
+            </ActiveVideoProvider>
+          </VideoVolumeProvider>
+        </RootSiblingParent>
       </ThemeProvider>
     </Alf>
   )
@@ -211,4 +207,4 @@ function App() {
   )
 }
 
-export default Sentry.wrap(App)
+export default App

src/Navigation.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
-import {i18n, type MessageDescriptor} from '@lingui/core'
+import {JSX} from 'react/jsx-runtime'
+import {i18n, MessageDescriptor} from '@lingui/core'
 import {msg} from '@lingui/macro'
 import {
-  type BottomTabBarProps,
+  BottomTabBarProps,
   createBottomTabNavigator,
 } from '@react-navigation/bottom-tabs'
 import {
@@ -19,19 +20,18 @@ import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {useWebScrollRestoration} from '#/lib/hooks/useWebScrollRestoration'
 import {buildStateObject} from '#/lib/routes/helpers'
 import {
-  type AllNavigatorParams,
-  type BottomTabNavigatorParams,
-  type FlatNavigatorParams,
-  type HomeTabNavigatorParams,
-  type MessagesTabNavigatorParams,
-  type MyProfileTabNavigatorParams,
-  type NotificationsTabNavigatorParams,
-  type SearchTabNavigatorParams,
+  AllNavigatorParams,
+  BottomTabNavigatorParams,
+  FlatNavigatorParams,
+  HomeTabNavigatorParams,
+  MessagesTabNavigatorParams,
+  MyProfileTabNavigatorParams,
+  NotificationsTabNavigatorParams,
+  SearchTabNavigatorParams,
 } from '#/lib/routes/types'
-import {type RouteParams, type State} from '#/lib/routes/types'
+import {RouteParams, State} from '#/lib/routes/types'
 import {attachRouteToLogEvents, logEvent} from '#/lib/statsig/statsig'
 import {bskyTitle} from '#/lib/strings/headings'
-import {logger} from '#/logger'
 import {isNative, isWeb} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
 import {useUnreadNotifications} from '#/state/queries/notifications/unread'
@@ -58,6 +58,7 @@ import {ProfileScreen} from '#/view/screens/Profile'
 import {ProfileFeedLikedByScreen} from '#/view/screens/ProfileFeedLikedBy'
 import {ProfileListScreen} from '#/view/screens/ProfileList'
 import {SavedFeeds} from '#/view/screens/SavedFeeds'
+import {SearchScreen} from '#/view/screens/Search'
 import {Storybook} from '#/view/screens/Storybook'
 import {SupportScreen} from '#/view/screens/Support'
 import {TermsOfServiceScreen} from '#/view/screens/TermsOfService'
@@ -67,10 +68,8 @@ import {SharedPreferencesTesterScreen} from '#/screens/E2E/SharedPreferencesTest
 import HashtagScreen from '#/screens/Hashtag'
 import {MessagesScreen} from '#/screens/Messages/ChatList'
 import {MessagesConversationScreen} from '#/screens/Messages/Conversation'
-import {MessagesInboxScreen} from '#/screens/Messages/Inbox'
 import {MessagesSettingsScreen} from '#/screens/Messages/Settings'
 import {ModerationScreen} from '#/screens/Moderation'
-import {Screen as ModerationInteractionSettings} from '#/screens/ModerationInteractionSettings'
 import {PostLikedByScreen} from '#/screens/Post/PostLikedBy'
 import {PostQuotesScreen} from '#/screens/Post/PostQuotes'
 import {PostRepostedByScreen} from '#/screens/Post/PostRepostedBy'
@@ -79,21 +78,17 @@ import {ProfileFeedScreen} from '#/screens/Profile/ProfileFeed'
 import {ProfileFollowersScreen} from '#/screens/Profile/ProfileFollowers'
 import {ProfileFollowsScreen} from '#/screens/Profile/ProfileFollows'
 import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
-import {SearchScreen} from '#/screens/Search'
 import {AppearanceSettingsScreen} from '#/screens/Settings/AppearanceSettings'
 import {AppIconSettingsScreen} from '#/screens/Settings/AppIconSettings'
 import {NotificationSettingsScreen} from '#/screens/Settings/NotificationSettings'
-import {SettingsInterests} from '#/screens/Settings/SettingsInterests'
 import {
   StarterPackScreen,
   StarterPackScreenShort,
 } from '#/screens/StarterPack/StarterPackScreen'
 import {Wizard} from '#/screens/StarterPack/Wizard'
-import {VideoFeed} from '#/screens/VideoFeed'
 import {useTheme} from '#/alf'
 import {router} from '#/routes'
 import {Referrer} from '../modules/expo-bluesky-swiss-army'
-import {ProfileSearchScreen} from './screens/Profile/ProfileSearch'
 import {AboutSettingsScreen} from './screens/Settings/AboutSettings'
 import {AccessibilitySettingsScreen} from './screens/Settings/AccessibilitySettings'
 import {AccountSettingsScreen} from './screens/Settings/AccountSettings'
@@ -159,14 +154,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => ModerationBlockedAccounts}
         options={{title: title(msg`Blocked Accounts`), requireAuth: true}}
       />
-      <Stack.Screen
-        name="ModerationInteractionSettings"
-        getComponent={() => ModerationInteractionSettings}
-        options={{
-          title: title(msg`Post Interaction Settings`),
-          requireAuth: true,
-        }}
-      />
       <Stack.Screen
         name="Settings"
         getComponent={() => SettingsScreen}
@@ -210,13 +197,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => ProfileListScreen}
         options={{title: title(msg`List`), requireAuth: true}}
       />
-      <Stack.Screen
-        name="ProfileSearch"
-        getComponent={() => ProfileSearchScreen}
-        options={({route}) => ({
-          title: title(msg`Search @${route.params.name}'s posts`),
-        })}
-      />
       <Stack.Screen
         name="PostThread"
         getComponent={() => PostThreadScreen}
@@ -376,14 +356,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
           requireAuth: true,
         }}
       />
-      <Stack.Screen
-        name="SettingsInterests"
-        getComponent={() => SettingsInterests}
-        options={{
-          title: title(msg`Your interests`),
-          requireAuth: true,
-        }}
-      />
       <Stack.Screen
         name="AboutSettings"
         getComponent={() => AboutSettingsScreen}
@@ -420,11 +392,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => MessagesSettingsScreen}
         options={{title: title(msg`Chat settings`), requireAuth: true}}
       />
-      <Stack.Screen
-        name="MessagesInbox"
-        getComponent={() => MessagesInboxScreen}
-        options={{title: title(msg`Chat request inbox`), requireAuth: true}}
-      />
       <Stack.Screen
         name="NotificationSettings"
         getComponent={() => NotificationSettingsScreen}
@@ -455,14 +422,6 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => Wizard}
         options={{title: title(msg`Edit your starter pack`), requireAuth: true}}
       />
-      <Stack.Screen
-        name="VideoFeed"
-        getComponent={() => VideoFeed}
-        options={{
-          title: title(msg`Video Feed`),
-          requireAuth: true,
-        }}
-      />
     </>
   )
 }
@@ -637,7 +596,7 @@ const FlatNavigator = () => {
       <Flat.Screen
         name="Search"
         getComponent={() => SearchScreen}
-        options={{title: title(msg`Explore`)}}
+        options={{title: title(msg`Search`)}}
       />
       <Flat.Screen
         name="Notifications"
@@ -744,16 +703,15 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
       linking={LINKING}
       theme={theme}
       onStateChange={() => {
-        logger.metric('router:navigate', {
-          from: prevLoggedRouteName.current,
-        })
-        prevLoggedRouteName.current = getCurrentRouteName()
+        const routeName = getCurrentRouteName()
+        if (routeName === 'Notifications') {
+          logEvent('router:navigate:notifications', {})
+        }
       }}
       onReady={() => {
         attachRouteToLogEvents(getCurrentRouteName)
         logModuleInitTime()
         onReady()
-        logger.metric('router:navigate', {})
       }}>
       {children}
     </NavigationContainer>

src/alf/atoms.ts

@@ -1,9 +1,4 @@
-import {
-  Platform,
-  type StyleProp,
-  StyleSheet,
-  type ViewStyle,
-} from 'react-native'
+import {Platform, StyleProp, StyleSheet, ViewStyle} from 'react-native'
 
 import * as tokens from '#/alf/tokens'
 import {ios, native, platform, web} from '#/alf/util/platform'
@@ -36,18 +31,6 @@ export const atoms = {
     right: 0,
     bottom: 0,
   },
-  top_0: {
-    top: 0,
-  },
-  right_0: {
-    right: 0,
-  },
-  bottom_0: {
-    bottom: 0,
-  },
-  left_0: {
-    left: 0,
-  },
   z_10: {
     zIndex: 10,
   },
@@ -67,15 +50,9 @@ export const atoms = {
   overflow_hidden: {
     overflow: 'hidden',
   },
-  /**
-   * @platform web
-   */
-  overflow_auto: web({
-    overflow: 'auto',
-  }),
 
   /*
-   * Width & Height
+   * Width
    */
   w_full: {
     width: '100%',
@@ -86,17 +63,12 @@ export const atoms = {
   h_full_vh: web({
     height: '100vh',
   }),
-  max_w_full: {
-    maxWidth: '100%',
-  },
-  max_h_full: {
-    maxHeight: '100%',
-  },
 
   /**
    * Used for the outermost components on screens, to ensure that they can fill
    * the screen and extend beyond.
    */
+  // @ts-ignore - web only minHeight string
   util_screen_outer: [
     web({
       minHeight: '100vh',
@@ -104,7 +76,7 @@ export const atoms = {
     native({
       height: '100%',
     }),
-  ] as StyleProp<ViewStyle>,
+  ] as ViewStyle,
 
   /*
    * Theme-independent bg colors
@@ -116,9 +88,6 @@ export const atoms = {
   /*
    * Border radius
    */
-  rounded_0: {
-    borderRadius: 0,
-  },
   rounded_2xs: {
     borderRadius: tokens.borderRadius._2xs,
   },
@@ -131,9 +100,6 @@ export const atoms = {
   rounded_md: {
     borderRadius: tokens.borderRadius.md,
   },
-  rounded_lg: {
-    borderRadius: tokens.borderRadius.lg,
-  },
   rounded_full: {
     borderRadius: tokens.borderRadius.full,
   },
@@ -366,9 +332,6 @@ export const atoms = {
   border_r: {
     borderRightWidth: StyleSheet.hairlineWidth,
   },
-  border_transparent: {
-    borderColor: 'transparent',
-  },
   curve_circular: ios({
     borderCurve: 'circular',
   }),
@@ -998,37 +961,6 @@ export const atoms = {
     transitionTimingFunction: 'cubic-bezier(0.17, 0.73, 0.14, 1)',
     transitionDuration: '100ms',
   }),
-  transition_delay_50ms: web({
-    transitionDelay: '50ms',
-  }),
-
-  /*
-   * Animaations
-   */
-  fade_in: web({
-    animation: 'fadeIn ease-out 0.15s',
-  }),
-  fade_out: web({
-    animation: 'fadeOut ease-out 0.15s',
-  }),
-  zoom_in: web({
-    animation: 'zoomIn ease-out 0.1s',
-  }),
-  zoom_out: web({
-    animation: 'zoomOut ease-out 0.1s',
-  }),
-  slide_in_left: web({
-    // exponential easing function
-    animation: 'slideInLeft cubic-bezier(0.16, 1, 0.3, 1) 0.5s',
-  }),
-  slide_out_left: web({
-    animation: 'slideOutLeft ease-in 0.15s',
-    animationFillMode: 'forwards',
-  }),
-  // special composite animation for dialogs
-  zoom_fade_in: web({
-    animation: 'zoomIn ease-out 0.1s, fadeIn ease-out 0.1s',
-  }),
 
   /**
    * {@link Layout.SCROLLBAR_OFFSET}

src/alf/breakpoints.ts

@@ -26,18 +26,3 @@ export function useBreakpoints(): Record<Breakpoint, boolean> & {
     }
   }, [gtPhone, gtMobile, gtTablet])
 }
-
-/**
- * Fine-tuned breakpoints for the shell layout
- */
-export function useLayoutBreakpoints() {
-  const rightNavVisible = useMediaQuery({minWidth: 1100})
-  const centerColumnOffset = useMediaQuery({minWidth: 1100, maxWidth: 1300})
-  const leftNavMinimal = useMediaQuery({maxWidth: 1300})
-
-  return {
-    rightNavVisible,
-    centerColumnOffset,
-    leftNavMinimal,
-  }
-}

src/alf/themes.ts

@@ -497,7 +497,7 @@ export function createThemes({
         color: dimPalette.contrast_400,
       },
       text_contrast_medium: {
-        color: dimPalette.contrast_600,
+        color: dimPalette.contrast_700,
       },
       text_contrast_high: {
         color: dimPalette.contrast_900,

src/alf/tokens.ts

@@ -44,7 +44,6 @@ export const borderRadius = {
   xs: 4,
   sm: 8,
   md: 12,
-  lg: 16,
   full: 999,
 } as const
 

src/components/AccountList.tsx

@@ -62,7 +62,7 @@ export function AccountList({
         testID="chooseAddAccountBtn"
         style={[a.flex_1]}
         onPress={pendingDid ? undefined : onPressAddAccount}
-        label={_(msg`Sign in to account that is not listed`)}>
+        label={_(msg`Login to account that is not listed`)}>
         {({hovered, pressed}) => (
           <View
             style={[

src/components/Admonition.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
 
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button as BaseButton, ButtonProps} from '#/components/Button'
 import {CircleInfo_Stroke2_Corner0_Rounded as ErrorIcon} from '#/components/icons/CircleInfo'
 import {Eye_Stroke2_Corner0_Rounded as InfoIcon} from '#/components/icons/Eye'
 import {Leaf_Stroke2_Corner0_Rounded as TipIcon} from '#/components/icons/Leaf'
@@ -50,29 +49,22 @@ export function Text({
   return (
     <BaseText
       {...rest}
-      style={[a.flex_1, a.text_sm, a.leading_snug, a.pr_md, style]}>
+      style={[
+        a.flex_1,
+        a.text_sm,
+        a.leading_snug,
+        {
+          paddingTop: 1,
+        },
+        style,
+      ]}>
       {children}
     </BaseText>
   )
 }
 
-export function Button({
-  children,
-  ...props
-}: Omit<ButtonProps, 'size' | 'variant' | 'color'>) {
-  return (
-    <BaseButton size="tiny" variant="outline" color="secondary" {...props}>
-      {children}
-    </BaseButton>
-  )
-}
-
 export function Row({children}: {children: React.ReactNode}) {
-  return (
-    <View style={[a.flex_1, a.flex_row, a.align_center, a.gap_sm]}>
-      {children}
-    </View>
-  )
+  return <View style={[a.flex_row, a.gap_sm]}>{children}</View>
 }
 
 export function Outer({

src/components/AvatarStack.tsx

@@ -1,37 +1,37 @@
 import {View} from 'react-native'
 import {moderateProfile} from '@atproto/api'
 
-import {logger} from '#/logger'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {useProfilesQuery} from '#/state/queries/profile'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
-import type * as bsky from '#/types/bsky'
 
 export function AvatarStack({
   profiles,
   size = 26,
-  numPending,
-  backgroundColor,
 }: {
-  profiles: bsky.profile.AnyProfileView[]
+  profiles: string[]
   size?: number
-  numPending?: number
-  backgroundColor?: string
 }) {
-  const translation = size / 3 // overlap by 1/3
+  const halfSize = size / 2
+  const {data, error} = useProfilesQuery({handles: profiles})
   const t = useTheme()
   const moderationOpts = useModerationOpts()
 
-  const isPending = (numPending && profiles.length === 0) || !moderationOpts
+  if (error) {
+    console.error(error)
+    return null
+  }
+
+  const isPending = !data || !moderationOpts
 
   const items = isPending
-    ? Array.from({length: numPending ?? profiles.length}).map((_, i) => ({
+    ? Array.from({length: profiles.length}).map((_, i) => ({
         key: i,
         profile: null,
         moderation: null,
       }))
-    : profiles.map(item => ({
+    : data.profiles.map(item => ({
         key: item.did,
         profile: item,
         moderation: moderateProfile(item, moderationOpts),
@@ -43,7 +43,7 @@ export function AvatarStack({
         a.flex_row,
         a.align_center,
         a.relative,
-        {width: size + (items.length - 1) * (size - translation)},
+        {width: size + (items.length - 1) * halfSize},
       ]}>
       {items.map((item, i) => (
         <View
@@ -54,9 +54,9 @@ export function AvatarStack({
             {
               width: size,
               height: size,
-              left: i * -translation,
+              left: i * -halfSize,
               borderWidth: 1,
-              borderColor: backgroundColor ?? t.atoms.bg.backgroundColor,
+              borderColor: t.atoms.bg.backgroundColor,
               borderRadius: 999,
               zIndex: 3 - i,
             },
@@ -74,33 +74,3 @@ export function AvatarStack({
     </View>
   )
 }
-
-export function AvatarStackWithFetch({
-  profiles,
-  size,
-  backgroundColor,
-}: {
-  profiles: string[]
-  size?: number
-  backgroundColor?: string
-}) {
-  const {data, error} = useProfilesQuery({handles: profiles})
-
-  if (error) {
-    if (error.name !== 'AbortError') {
-      logger.error('Error fetching profiles for AvatarStack', {
-        safeMessage: error,
-      })
-    }
-    return null
-  }
-
-  return (
-    <AvatarStack
-      numPending={profiles.length}
-      profiles={data?.profiles || []}
-      size={size}
-      backgroundColor={backgroundColor}
-    />
-  )
-}

src/components/Button.tsx

@@ -3,12 +3,10 @@ import {
   AccessibilityProps,
   GestureResponderEvent,
   MouseEvent,
-  NativeSyntheticEvent,
   Pressable,
   PressableProps,
   StyleProp,
   StyleSheet,
-  TargetedEvent,
   TextProps,
   TextStyle,
   View,
@@ -78,8 +76,6 @@ export type ButtonProps = Pick<
   | 'onHoverOut'
   | 'onPressIn'
   | 'onPressOut'
-  | 'onFocus'
-  | 'onBlur'
 > &
   AccessibilityProps &
   VariantProps & {
@@ -120,12 +116,6 @@ export const Button = React.forwardRef<View, ButtonProps>(
       style,
       hoverStyle: hoverStyleProp,
       PressableComponent = Pressable,
-      onPressIn: onPressInOuter,
-      onPressOut: onPressOutOuter,
-      onHoverIn: onHoverInOuter,
-      onHoverOut: onHoverOutOuter,
-      onFocus: onFocusOuter,
-      onBlur: onBlurOuter,
       ...rest
     },
     ref,
@@ -137,6 +127,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       focused: false,
     })
 
+    const onPressInOuter = rest.onPressIn
     const onPressIn = React.useCallback(
       (e: GestureResponderEvent) => {
         setState(s => ({
@@ -147,6 +138,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       },
       [setState, onPressInOuter],
     )
+    const onPressOutOuter = rest.onPressOut
     const onPressOut = React.useCallback(
       (e: GestureResponderEvent) => {
         setState(s => ({
@@ -157,6 +149,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       },
       [setState, onPressOutOuter],
     )
+    const onHoverInOuter = rest.onHoverIn
     const onHoverIn = React.useCallback(
       (e: MouseEvent) => {
         setState(s => ({
@@ -167,6 +160,7 @@ export const Button = React.forwardRef<View, ButtonProps>(
       },
       [setState, onHoverInOuter],
     )
+    const onHoverOutOuter = rest.onHoverOut
     const onHoverOut = React.useCallback(
       (e: MouseEvent) => {
         setState(s => ({
@@ -177,26 +171,18 @@ export const Button = React.forwardRef<View, ButtonProps>(
       },
       [setState, onHoverOutOuter],
     )
-    const onFocus = React.useCallback(
-      (e: NativeSyntheticEvent<TargetedEvent>) => {
-        setState(s => ({
-          ...s,
-          focused: true,
-        }))
-        onFocusOuter?.(e)
-      },
-      [setState, onFocusOuter],
-    )
-    const onBlur = React.useCallback(
-      (e: NativeSyntheticEvent<TargetedEvent>) => {
-        setState(s => ({
-          ...s,
-          focused: false,
-        }))
-        onBlurOuter?.(e)
-      },
-      [setState, onBlurOuter],
-    )
+    const onFocus = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        focused: true,
+      }))
+    }, [setState])
+    const onBlur = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        focused: false,
+      }))
+    }, [setState])
 
     const {baseStyles, hoverStyles} = React.useMemo(() => {
       const baseStyles: ViewStyle[] = []

src/components/ContextMenu/Backdrop.ios.tsx

@@ -1,85 +0,0 @@
-import {Pressable} from 'react-native'
-import Animated, {
-  Extrapolation,
-  interpolate,
-  type SharedValue,
-  useAnimatedProps,
-  useAnimatedStyle,
-} from 'react-native-reanimated'
-import {BlurView} from 'expo-blur'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {atoms as a, useTheme} from '#/alf'
-import {useContextMenuContext} from './context'
-
-const AnimatedBlurView = Animated.createAnimatedComponent(BlurView)
-
-type Props = {
-  animation: SharedValue<number>
-  intensity?: number
-  onPress?: () => void
-}
-
-export function Backdrop(props: Props) {
-  const {mode} = useContextMenuContext()
-  switch (mode) {
-    case 'full':
-      return <BlurredBackdrop {...props} />
-    case 'auxiliary-only':
-      return <OpacityBackdrop {...props} />
-  }
-}
-
-function BlurredBackdrop({animation, intensity = 50, onPress}: Props) {
-  const {_} = useLingui()
-
-  const animatedProps = useAnimatedProps(() => ({
-    intensity: interpolate(
-      animation.get(),
-      [0, 1],
-      [0, intensity],
-      Extrapolation.CLAMP,
-    ),
-  }))
-
-  return (
-    <AnimatedBlurView
-      animatedProps={animatedProps}
-      style={[a.absolute, a.inset_0]}
-      tint="systemMaterialDark">
-      <Pressable
-        style={a.flex_1}
-        accessibilityLabel={_(msg`Close menu`)}
-        accessibilityHint={_(msg`Tap to close context menu`)}
-        onPress={onPress}
-      />
-    </AnimatedBlurView>
-  )
-}
-
-function OpacityBackdrop({animation, onPress}: Props) {
-  const t = useTheme()
-  const {_} = useLingui()
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(
-      animation.get(),
-      [0, 1],
-      [0, 0.05],
-      Extrapolation.CLAMP,
-    ),
-  }))
-
-  return (
-    <Animated.View
-      style={[a.absolute, a.inset_0, t.atoms.bg_contrast_975, animatedStyle]}>
-      <Pressable
-        style={a.flex_1}
-        accessibilityLabel={_(msg`Close menu`)}
-        accessibilityHint={_(msg`Tap to close context menu`)}
-        onPress={onPress}
-      />
-    </Animated.View>
-  )
-}

src/components/ContextMenu/Backdrop.tsx

@@ -1,51 +0,0 @@
-import {Pressable} from 'react-native'
-import Animated, {
-  Extrapolation,
-  interpolate,
-  SharedValue,
-  useAnimatedStyle,
-} from 'react-native-reanimated'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-
-import {atoms as a, useTheme} from '#/alf'
-import {useContextMenuContext} from './context'
-
-export function Backdrop({
-  animation,
-  intensity = 50,
-  onPress,
-}: {
-  animation: SharedValue<number>
-  intensity?: number
-  onPress?: () => void
-}) {
-  const t = useTheme()
-  const {_} = useLingui()
-  const {mode} = useContextMenuContext()
-
-  const reduced = mode === 'auxiliary-only'
-
-  const target = reduced ? 0.05 : intensity / 100
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: interpolate(
-      animation.get(),
-      [0, 1],
-      [0, target],
-      Extrapolation.CLAMP,
-    ),
-  }))
-
-  return (
-    <Animated.View
-      style={[a.absolute, a.inset_0, t.atoms.bg_contrast_975, animatedStyle]}>
-      <Pressable
-        style={a.flex_1}
-        accessibilityLabel={_(msg`Close menu`)}
-        accessibilityHint={_(msg`Tap to close context menu`)}
-        onPress={onPress}
-      />
-    </Animated.View>
-  )
-}

src/components/ContextMenu/context.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-
-import {
-  type ContextType,
-  type ItemContextType,
-  type MenuContextType,
-} from '#/components/ContextMenu/types'
-
-export const Context = React.createContext<ContextType | null>(null)
-
-export const MenuContext = React.createContext<MenuContextType | null>(null)
-
-export const ItemContext = React.createContext<ItemContextType | null>(null)
-
-export function useContextMenuContext() {
-  const context = React.useContext(Context)
-
-  if (!context) {
-    throw new Error(
-      'useContextMenuContext must be used within a Context.Provider',
-    )
-  }
-
-  return context
-}
-
-export function useContextMenuMenuContext() {
-  const context = React.useContext(MenuContext)
-
-  if (!context) {
-    throw new Error(
-      'useContextMenuMenuContext must be used within a Context.Provider',
-    )
-  }
-
-  return context
-}
-
-export function useContextMenuItemContext() {
-  const context = React.useContext(ItemContext)
-
-  if (!context) {
-    throw new Error(
-      'useContextMenuItemContext must be used within a Context.Provider',
-    )
-  }
-
-  return context
-}

src/components/ContextMenu/index.tsx

@@ -1,904 +0,0 @@
-import React, {
-  useCallback,
-  useEffect,
-  useId,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-import {
-  BackHandler,
-  Keyboard,
-  type LayoutChangeEvent,
-  Pressable,
-  type StyleProp,
-  useWindowDimensions,
-  View,
-  type ViewStyle,
-} from 'react-native'
-import {
-  Gesture,
-  GestureDetector,
-  type GestureStateChangeEvent,
-  type GestureUpdateEvent,
-  type PanGestureHandlerEventPayload,
-} from 'react-native-gesture-handler'
-import Animated, {
-  clamp,
-  interpolate,
-  runOnJS,
-  type SharedValue,
-  useAnimatedReaction,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-  type WithSpringConfig,
-} from 'react-native-reanimated'
-import {
-  useSafeAreaFrame,
-  useSafeAreaInsets,
-} from 'react-native-safe-area-context'
-import {captureRef} from 'react-native-view-shot'
-import {Image, type ImageErrorEventData} from 'expo-image'
-import {msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {useIsFocused} from '@react-navigation/native'
-import flattenReactChildren from 'react-keyed-flatten-children'
-
-import {HITSLOP_10} from '#/lib/constants'
-import {useHaptics} from '#/lib/haptics'
-import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
-import {logger} from '#/logger'
-import {isAndroid, isIOS} from '#/platform/detection'
-import {atoms as a, platform, tokens, useTheme} from '#/alf'
-import {
-  Context,
-  ItemContext,
-  MenuContext,
-  useContextMenuContext,
-  useContextMenuItemContext,
-  useContextMenuMenuContext,
-} from '#/components/ContextMenu/context'
-import {
-  type AuxiliaryViewProps,
-  type ContextType,
-  type ItemIconProps,
-  type ItemProps,
-  type ItemTextProps,
-  type Measurement,
-  type TriggerProps,
-} from '#/components/ContextMenu/types'
-import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {createPortalGroup} from '#/components/Portal'
-import {Text} from '#/components/Typography'
-import {Backdrop} from './Backdrop'
-
-export {
-  type DialogControlProps as ContextMenuControlProps,
-  useDialogControl as useContextMenuControl,
-} from '#/components/Dialog'
-
-const {Provider: PortalProvider, Outlet, Portal} = createPortalGroup()
-
-const SPRING_IN: WithSpringConfig = {
-  mass: isIOS ? 1.25 : 0.75,
-  damping: 50,
-  stiffness: 1100,
-  restDisplacementThreshold: 0.01,
-}
-
-const SPRING_OUT: WithSpringConfig = {
-  mass: isIOS ? 1.25 : 0.75,
-  damping: 150,
-  stiffness: 1000,
-  restDisplacementThreshold: 0.01,
-}
-
-/**
- * Needs placing near the top of the provider stack, but BELOW the theme provider.
- */
-export function Provider({children}: {children: React.ReactNode}) {
-  return (
-    <PortalProvider>
-      {children}
-      <Outlet />
-    </PortalProvider>
-  )
-}
-
-export function Root({children}: {children: React.ReactNode}) {
-  const playHaptic = useHaptics()
-  const [mode, setMode] = useState<'full' | 'auxiliary-only'>('full')
-  const [measurement, setMeasurement] = useState<Measurement | null>(null)
-  const animationSV = useSharedValue(0)
-  const translationSV = useSharedValue(0)
-  const isFocused = useIsFocused()
-  const hoverables = useRef<
-    Map<string, {id: string; rect: Measurement; onTouchUp: () => void}>
-  >(new Map())
-  const hoverablesSV = useSharedValue<
-    Record<string, {id: string; rect: Measurement}>
-  >({})
-  const syncHoverablesThrottleRef = useRef<ReturnType<typeof setTimeout>>()
-  const [hoveredMenuItem, setHoveredMenuItem] = useState<string | null>(null)
-
-  const onHoverableTouchUp = useCallback((id: string) => {
-    const hoverable = hoverables.current.get(id)
-    if (!hoverable) {
-      logger.warn(`No such hoverable with id ${id}`)
-      return
-    }
-    hoverable.onTouchUp()
-  }, [])
-
-  const onCompletedClose = useCallback(() => {
-    hoverables.current.clear()
-    setMeasurement(null)
-  }, [])
-
-  const context = useMemo(
-    () =>
-      ({
-        isOpen: !!measurement && isFocused,
-        measurement,
-        animationSV,
-        translationSV,
-        mode,
-        open: (evt: Measurement, mode: 'full' | 'auxiliary-only') => {
-          setMeasurement(evt)
-          setMode(mode)
-          animationSV.set(withSpring(1, SPRING_IN))
-        },
-        close: () => {
-          animationSV.set(
-            withSpring(0, SPRING_OUT, finished => {
-              if (finished) {
-                hoverablesSV.set({})
-                translationSV.set(0)
-                runOnJS(onCompletedClose)()
-              }
-            }),
-          )
-        },
-        registerHoverable: (
-          id: string,
-          rect: Measurement,
-          onTouchUp: () => void,
-        ) => {
-          hoverables.current.set(id, {id, rect, onTouchUp})
-          // we need this data on the UI thread, but we want to limit cross-thread communication
-          // and this function will be called in quick succession, so we need to throttle it
-          if (syncHoverablesThrottleRef.current)
-            clearTimeout(syncHoverablesThrottleRef.current)
-          syncHoverablesThrottleRef.current = setTimeout(() => {
-            syncHoverablesThrottleRef.current = undefined
-            hoverablesSV.set(
-              Object.fromEntries(
-                // eslint-ignore
-                [...hoverables.current.entries()].map(([id, {rect}]) => [
-                  id,
-                  {id, rect},
-                ]),
-              ),
-            )
-          }, 1)
-        },
-        hoverablesSV,
-        onTouchUpMenuItem: onHoverableTouchUp,
-        hoveredMenuItem,
-        setHoveredMenuItem: item => {
-          if (item) playHaptic('Light')
-          setHoveredMenuItem(item)
-        },
-      } satisfies ContextType),
-    [
-      measurement,
-      setMeasurement,
-      onCompletedClose,
-      isFocused,
-      animationSV,
-      translationSV,
-      hoverablesSV,
-      onHoverableTouchUp,
-      hoveredMenuItem,
-      setHoveredMenuItem,
-      playHaptic,
-      mode,
-    ],
-  )
-
-  useEffect(() => {
-    if (isAndroid && context.isOpen) {
-      const listener = BackHandler.addEventListener('hardwareBackPress', () => {
-        context.close()
-        return true
-      })
-
-      return () => listener.remove()
-    }
-  }, [context])
-
-  return <Context.Provider value={context}>{children}</Context.Provider>
-}
-
-export function Trigger({children, label, contentLabel, style}: TriggerProps) {
-  const context = useContextMenuContext()
-  const playHaptic = useHaptics()
-  const {top: topInset} = useSafeAreaInsets()
-  const ref = useRef<View>(null)
-  const isFocused = useIsFocused()
-  const [image, setImage] = useState<string | null>(null)
-  const [pendingMeasurement, setPendingMeasurement] = useState<{
-    measurement: Measurement
-    mode: 'full' | 'auxiliary-only'
-  } | null>(null)
-
-  const open = useNonReactiveCallback(
-    async (mode: 'full' | 'auxiliary-only') => {
-      playHaptic()
-      Keyboard.dismiss()
-      const [measurement, capture] = await Promise.all([
-        new Promise<Measurement>(resolve => {
-          ref.current?.measureInWindow((x, y, width, height) =>
-            resolve({
-              x,
-              y:
-                y +
-                platform({
-                  default: 0,
-                  android: topInset, // not included in measurement
-                }),
-              width,
-              height,
-            }),
-          )
-        }),
-        captureRef(ref, {result: 'data-uri'}).catch(err => {
-          logger.error(err instanceof Error ? err : String(err), {
-            message: 'Failed to capture image of context menu trigger',
-          })
-          // will cause the image to fail to load, but it will get handled gracefully
-          return '<failed capture>'
-        }),
-      ])
-      setImage(capture)
-      setPendingMeasurement({measurement, mode})
-    },
-  )
-
-  const doubleTapGesture = useMemo(() => {
-    return Gesture.Tap()
-      .numberOfTaps(2)
-      .hitSlop(HITSLOP_10)
-      .onEnd(() => open('auxiliary-only'))
-      .runOnJS(true)
-  }, [open])
-
-  const {
-    hoverablesSV,
-    setHoveredMenuItem,
-    onTouchUpMenuItem,
-    translationSV,
-    animationSV,
-  } = context
-  const hoveredItemSV = useSharedValue<string | null>(null)
-
-  useAnimatedReaction(
-    () => hoveredItemSV.get(),
-    (hovered, prev) => {
-      if (hovered !== prev) {
-        runOnJS(setHoveredMenuItem)(hovered)
-      }
-    },
-  )
-
-  const pressAndHoldGesture = useMemo(() => {
-    return Gesture.Pan()
-      .activateAfterLongPress(500)
-      .cancelsTouchesInView(false)
-      .averageTouches(true)
-      .onStart(() => {
-        'worklet'
-        runOnJS(open)('full')
-      })
-      .onUpdate(evt => {
-        'worklet'
-        const item = getHoveredHoverable(evt, hoverablesSV, translationSV)
-        hoveredItemSV.set(item)
-      })
-      .onEnd(() => {
-        'worklet'
-        // don't recalculate hovered item - if they haven't moved their finger from
-        // the initial press, it's jarring to then select the item underneath
-        // as the menu may have slid into place beneath their finger
-        const item = hoveredItemSV.get()
-        if (item) {
-          runOnJS(onTouchUpMenuItem)(item)
-        }
-      })
-  }, [open, hoverablesSV, onTouchUpMenuItem, hoveredItemSV, translationSV])
-
-  const composedGestures = Gesture.Exclusive(
-    doubleTapGesture,
-    pressAndHoldGesture,
-  )
-
-  const measurement = context.measurement || pendingMeasurement?.measurement
-
-  return (
-    <>
-      <GestureDetector gesture={composedGestures}>
-        <View ref={ref} style={[{opacity: context.isOpen ? 0 : 1}, style]}>
-          {children({
-            isNative: true,
-            control: {isOpen: context.isOpen, open},
-            state: {
-              pressed: false,
-              hovered: false,
-              focused: false,
-            },
-            props: {
-              ref: null,
-              onPress: null,
-              onFocus: null,
-              onBlur: null,
-              onPressIn: null,
-              onPressOut: null,
-              accessibilityHint: null,
-              accessibilityLabel: label,
-              accessibilityRole: null,
-            },
-          })}
-        </View>
-      </GestureDetector>
-      {isFocused && image && measurement && (
-        <Portal>
-          <TriggerClone
-            label={contentLabel}
-            translation={translationSV}
-            animation={animationSV}
-            image={image}
-            measurement={measurement}
-            onDisplay={() => {
-              if (pendingMeasurement) {
-                context.open(
-                  pendingMeasurement.measurement,
-                  pendingMeasurement.mode,
-                )
-                setPendingMeasurement(null)
-              }
-            }}
-          />
-        </Portal>
-      )}
-    </>
-  )
-}
-
-/**
- * an image of the underlying trigger with a grow animation
- */
-function TriggerClone({
-  translation,
-  animation,
-  image,
-  measurement,
-  onDisplay,
-  label,
-}: {
-  translation: SharedValue<number>
-  animation: SharedValue<number>
-  image: string
-  measurement: Measurement
-  onDisplay: () => void
-  label: string
-}) {
-  const {_} = useLingui()
-
-  const animatedStyles = useAnimatedStyle(() => ({
-    transform: [{translateY: translation.get() * animation.get()}],
-  }))
-
-  const handleError = useCallback(
-    (evt: ImageErrorEventData) => {
-      logger.error('Context menu image load error', {message: evt.error})
-      onDisplay()
-    },
-    [onDisplay],
-  )
-
-  return (
-    <Animated.View
-      style={[
-        a.absolute,
-        {
-          top: measurement.y,
-          left: measurement.x,
-          width: measurement.width,
-          height: measurement.height,
-        },
-        a.z_10,
-        a.pointer_events_none,
-        animatedStyles,
-      ]}>
-      <Image
-        onDisplay={onDisplay}
-        onError={handleError}
-        source={image}
-        style={{
-          width: measurement.width,
-          height: measurement.height,
-        }}
-        accessibilityLabel={label}
-        accessibilityHint={_(msg`The subject of the context menu`)}
-        accessibilityIgnoresInvertColors={false}
-      />
-    </Animated.View>
-  )
-}
-
-export function AuxiliaryView({children, align = 'left'}: AuxiliaryViewProps) {
-  const context = useContextMenuContext()
-  const {width: screenWidth} = useWindowDimensions()
-  const {top: topInset} = useSafeAreaInsets()
-  const ensureOnScreenTranslationSV = useSharedValue(0)
-
-  const {isOpen, mode, measurement, translationSV, animationSV} = context
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      opacity: clamp(animationSV.get(), 0, 1),
-      transform: [
-        {
-          translateY:
-            (ensureOnScreenTranslationSV.get() || translationSV.get()) *
-            animationSV.get(),
-        },
-        {scale: interpolate(animationSV.get(), [0, 1], [0.2, 1])},
-      ],
-    }
-  })
-
-  const menuContext = useMemo(() => ({align}), [align])
-
-  const onLayout = useCallback(() => {
-    if (!measurement) return
-
-    let translation = 0
-
-    // vibes based, just assuming it'll fit within this space. revisit if we use
-    // AuxiliaryView for something tall
-    const TOP_INSET = topInset + 80
-
-    const distanceMessageFromTop = measurement.y - TOP_INSET
-    if (distanceMessageFromTop < 0) {
-      translation = -distanceMessageFromTop
-    }
-
-    // normally, the context menu is responsible for measuring itself and moving everything into the right place
-    // however, in auxiliary-only mode, that doesn't happen, so we need to do it ourselves here
-    if (mode === 'auxiliary-only') {
-      translationSV.set(translation)
-      ensureOnScreenTranslationSV.set(0)
-    }
-    // however, we also need to make sure that for super tall triggers, we don't go off the screen
-    // so we have an additional cap on the standard transform every other element has
-    // note: this breaks the press-and-hold gesture for the reaction items. unfortunately I think
-    // we'll just have to live with it for now, fixing it would be possible but be a large complexity
-    // increase for an edge case
-    else {
-      ensureOnScreenTranslationSV.set(translation)
-    }
-  }, [mode, measurement, translationSV, topInset, ensureOnScreenTranslationSV])
-
-  if (!isOpen || !measurement) return null
-
-  return (
-    <Portal>
-      <Context.Provider value={context}>
-        <MenuContext.Provider value={menuContext}>
-          <Animated.View
-            onLayout={onLayout}
-            style={[
-              a.absolute,
-              {
-                top: measurement.y,
-                transformOrigin:
-                  align === 'left' ? 'bottom left' : 'bottom right',
-              },
-              align === 'left'
-                ? {left: measurement.x}
-                : {right: screenWidth - measurement.x - measurement.width},
-              animatedStyle,
-              a.z_20,
-            ]}>
-            {children}
-          </Animated.View>
-        </MenuContext.Provider>
-      </Context.Provider>
-    </Portal>
-  )
-}
-
-const MENU_WIDTH = 240
-
-export function Outer({
-  children,
-  style,
-  align = 'left',
-}: {
-  children: React.ReactNode
-  style?: StyleProp<ViewStyle>
-  align?: 'left' | 'right'
-}) {
-  const t = useTheme()
-  const context = useContextMenuContext()
-  const insets = useSafeAreaInsets()
-  const frame = useSafeAreaFrame()
-  const {width: screenWidth} = useWindowDimensions()
-
-  const {animationSV, translationSV} = context
-
-  const animatedContainerStyle = useAnimatedStyle(() => ({
-    transform: [{translateY: translationSV.get() * animationSV.get()}],
-  }))
-
-  const animatedStyle = useAnimatedStyle(() => ({
-    opacity: clamp(animationSV.get(), 0, 1),
-    transform: [{scale: interpolate(animationSV.get(), [0, 1], [0.2, 1])}],
-  }))
-
-  const onLayout = useCallback(
-    (evt: LayoutChangeEvent) => {
-      if (!context.measurement) return // should not happen
-      let translation = 0
-
-      // pure vibes based
-      const TOP_INSET = insets.top + 80
-      const BOTTOM_INSET_IOS = insets.bottom + 20
-      const BOTTOM_INSET_ANDROID = 12 // TODO: revisit when edge-to-edge mode is enabled -sfn
-
-      const {height} = evt.nativeEvent.layout
-      const topPosition =
-        context.measurement.y + context.measurement.height + tokens.space.xs
-      const bottomPosition = topPosition + height
-      const safeAreaBottomLimit =
-        frame.height -
-        platform({
-          ios: BOTTOM_INSET_IOS,
-          android: BOTTOM_INSET_ANDROID,
-          default: 0,
-        })
-      const diff = bottomPosition - safeAreaBottomLimit
-      if (diff > 0) {
-        translation = -diff
-      } else {
-        const distanceMessageFromTop = context.measurement.y - TOP_INSET
-        if (distanceMessageFromTop < 0) {
-          translation = -Math.max(distanceMessageFromTop, diff)
-        }
-      }
-
-      if (translation !== 0) {
-        translationSV.set(translation)
-      }
-    },
-    [context.measurement, frame.height, insets, translationSV],
-  )
-
-  const menuContext = useMemo(() => ({align}), [align])
-
-  if (!context.isOpen || !context.measurement) return null
-
-  return (
-    <Portal>
-      <Context.Provider value={context}>
-        <MenuContext.Provider value={menuContext}>
-          <Backdrop animation={animationSV} onPress={context.close} />
-          {context.mode === 'full' && (
-            /* containing element - stays the same size, so we measure it
-           to determine if a translation is necessary. also has the positioning */
-            <Animated.View
-              onLayout={onLayout}
-              style={[
-                a.absolute,
-                a.z_10,
-                a.mt_xs,
-                {
-                  width: MENU_WIDTH,
-                  top: context.measurement.y + context.measurement.height,
-                },
-                align === 'left'
-                  ? {left: context.measurement.x}
-                  : {
-                      right:
-                        screenWidth -
-                        context.measurement.x -
-                        context.measurement.width,
-                    },
-                animatedContainerStyle,
-              ]}>
-              {/* scaling element - has the scale/fade animation on it */}
-              <Animated.View
-                style={[
-                  a.rounded_md,
-                  a.shadow_md,
-                  t.atoms.bg_contrast_25,
-                  a.w_full,
-                  // @ts-ignore react-native-web expects string, and this file is platform-split -sfn
-                  // note: above @ts-ignore cannot be a @ts-expect-error because this does not cause an error
-                  // in the typecheck CI - presumably because of RNW overriding the types
-                  {
-                    transformOrigin:
-                      // "top right" doesn't seem to work on android, so set explicitly in pixels
-                      align === 'left' ? [0, 0, 0] : [MENU_WIDTH, 0, 0],
-                  },
-                  animatedStyle,
-                  style,
-                ]}>
-                {/* innermost element - needs an overflow: hidden for children, but we also need a shadow,
-                so put the shadow on the scaling element and the overflow on the innermost element */}
-                <View
-                  style={[
-                    a.flex_1,
-                    a.rounded_md,
-                    a.overflow_hidden,
-                    a.border,
-                    t.atoms.border_contrast_low,
-                  ]}>
-                  {flattenReactChildren(children).map((child, i) => {
-                    return React.isValidElement(child) &&
-                      (child.type === Item || child.type === Divider) ? (
-                      <React.Fragment key={i}>
-                        {i > 0 ? (
-                          <View
-                            style={[a.border_b, t.atoms.border_contrast_low]}
-                          />
-                        ) : null}
-                        {React.cloneElement(child, {
-                          // @ts-expect-error not typed
-                          style: {
-                            borderRadius: 0,
-                            borderWidth: 0,
-                          },
-                        })}
-                      </React.Fragment>
-                    ) : null
-                  })}
-                </View>
-              </Animated.View>
-            </Animated.View>
-          )}
-        </MenuContext.Provider>
-      </Context.Provider>
-    </Portal>
-  )
-}
-
-export function Item({
-  children,
-  label,
-  unstyled,
-  style,
-  onPress,
-  position,
-  ...rest
-}: ItemProps) {
-  const t = useTheme()
-  const context = useContextMenuContext()
-  const playHaptic = useHaptics()
-  const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
-  const {
-    state: pressed,
-    onIn: onPressIn,
-    onOut: onPressOut,
-  } = useInteractionState()
-  const id = useId()
-  const {align} = useContextMenuMenuContext()
-
-  const {close, measurement, registerHoverable} = context
-
-  const handleLayout = useCallback(
-    (evt: LayoutChangeEvent) => {
-      if (!measurement) return // should be impossible
-
-      const layout = evt.nativeEvent.layout
-
-      const yOffset = position
-        ? position.y
-        : measurement.y + measurement.height + tokens.space.xs
-      const xOffset = position
-        ? position.x
-        : align === 'left'
-        ? measurement.x
-        : measurement.x + measurement.width - layout.width
-
-      registerHoverable(
-        id,
-        {
-          width: layout.width,
-          height: layout.height,
-          y: yOffset + layout.y,
-          x: xOffset + layout.x,
-        },
-        () => {
-          close()
-          onPress()
-        },
-      )
-    },
-    [id, measurement, registerHoverable, close, onPress, align, position],
-  )
-
-  const itemContext = useMemo(
-    () => ({disabled: Boolean(rest.disabled)}),
-    [rest.disabled],
-  )
-
-  return (
-    <Pressable
-      {...rest}
-      onLayout={handleLayout}
-      accessibilityHint=""
-      accessibilityLabel={label}
-      onFocus={onFocus}
-      onBlur={onBlur}
-      onPress={e => {
-        close()
-        onPress?.(e)
-      }}
-      onPressIn={e => {
-        onPressIn()
-        rest.onPressIn?.(e)
-        playHaptic('Light')
-      }}
-      onPressOut={e => {
-        onPressOut()
-        rest.onPressOut?.(e)
-      }}
-      style={[
-        !unstyled && [
-          a.flex_row,
-          a.align_center,
-          a.gap_sm,
-          a.px_md,
-          a.rounded_md,
-          a.border,
-          t.atoms.bg_contrast_25,
-          t.atoms.border_contrast_low,
-          {minHeight: 44, paddingVertical: 10},
-          (focused || pressed || context.hoveredMenuItem === id) &&
-            !rest.disabled &&
-            t.atoms.bg_contrast_50,
-        ],
-        style,
-      ]}>
-      <ItemContext.Provider value={itemContext}>
-        {typeof children === 'function'
-          ? children(
-              (focused || pressed || context.hoveredMenuItem === id) &&
-                !rest.disabled,
-            )
-          : children}
-      </ItemContext.Provider>
-    </Pressable>
-  )
-}
-
-export function ItemText({children, style}: ItemTextProps) {
-  const t = useTheme()
-  const {disabled} = useContextMenuItemContext()
-  return (
-    <Text
-      numberOfLines={2}
-      ellipsizeMode="middle"
-      style={[
-        a.flex_1,
-        a.text_md,
-        a.font_bold,
-        t.atoms.text_contrast_high,
-        {paddingTop: 3},
-        style,
-        disabled && t.atoms.text_contrast_low,
-      ]}>
-      {children}
-    </Text>
-  )
-}
-
-export function ItemIcon({icon: Comp}: ItemIconProps) {
-  const t = useTheme()
-  const {disabled} = useContextMenuItemContext()
-  return (
-    <Comp
-      size="lg"
-      fill={
-        disabled
-          ? t.atoms.text_contrast_low.color
-          : t.atoms.text_contrast_medium.color
-      }
-    />
-  )
-}
-
-export function ItemRadio({selected}: {selected: boolean}) {
-  const t = useTheme()
-  return (
-    <View
-      style={[
-        a.justify_center,
-        a.align_center,
-        a.rounded_full,
-        t.atoms.border_contrast_high,
-        {
-          borderWidth: 1,
-          height: 20,
-          width: 20,
-        },
-      ]}>
-      {selected ? (
-        <View
-          style={[
-            a.absolute,
-            a.rounded_full,
-            {height: 14, width: 14},
-            selected ? {backgroundColor: t.palette.primary_500} : {},
-          ]}
-        />
-      ) : null}
-    </View>
-  )
-}
-
-export function LabelText({children}: {children: React.ReactNode}) {
-  const t = useTheme()
-  return (
-    <Text
-      style={[a.font_bold, t.atoms.text_contrast_medium, {marginBottom: -8}]}>
-      {children}
-    </Text>
-  )
-}
-
-export function Divider() {
-  const t = useTheme()
-  return (
-    <View
-      style={[t.atoms.border_contrast_low, a.flex_1, {borderTopWidth: 3}]}
-    />
-  )
-}
-
-function getHoveredHoverable(
-  evt:
-    | GestureStateChangeEvent<PanGestureHandlerEventPayload>
-    | GestureUpdateEvent<PanGestureHandlerEventPayload>,
-  hoverables: SharedValue<Record<string, {id: string; rect: Measurement}>>,
-  translation: SharedValue<number>,
-) {
-  'worklet'
-
-  const x = evt.absoluteX
-  const y = evt.absoluteY
-  const yOffset = translation.get()
-
-  const rects = Object.values(hoverables.get())
-
-  for (const {id, rect} of rects) {
-    const isWithinLeftBound = x >= rect.x
-    const isWithinRightBound = x <= rect.x + rect.width
-    const isWithinTopBound = y >= rect.y + yOffset
-    const isWithinBottomBound = y <= rect.y + rect.height + yOffset
-
-    if (
-      isWithinLeftBound &&
-      isWithinRightBound &&
-      isWithinTopBound &&
-      isWithinBottomBound
-    ) {
-      return id
-    }
-  }
-
-  return null
-}

src/components/ContextMenu/index.web.tsx

@@ -1,12 +0,0 @@
-import {type AuxiliaryViewProps} from './types'
-
-export * from '#/components/Menu'
-
-export function Provider({children}: {children: React.ReactNode}) {
-  return children
-}
-
-// native only
-export function AuxiliaryView({}: AuxiliaryViewProps) {
-  return null
-}

src/components/ContextMenu/types.ts

@@ -1,136 +0,0 @@
-import {
-  type AccessibilityRole,
-  type GestureResponderEvent,
-  type StyleProp,
-  type ViewStyle,
-} from 'react-native'
-import {type SharedValue} from 'react-native-reanimated'
-import type React from 'react'
-
-import type * as Dialog from '#/components/Dialog'
-import {
-  type ItemProps as MenuItemProps,
-  type RadixPassThroughTriggerProps,
-} from '#/components/Menu/types'
-
-export type {
-  GroupProps,
-  ItemIconProps,
-  ItemTextProps,
-} from '#/components/Menu/types'
-
-export type AuxiliaryViewProps = {
-  children?: React.ReactNode
-  align?: 'left' | 'right'
-}
-
-export type ItemProps = Omit<MenuItemProps, 'onPress' | 'children'> & {
-  // remove default styles (i.e. for emoji reactions)
-  unstyled?: boolean
-  onPress: (evt?: GestureResponderEvent) => void
-  children?: React.ReactNode | ((hovered: boolean) => React.ReactNode)
-  // absolute position of the parent element. if undefined, assumed to
-  // be in the context menu. use this if using AuxiliaryView
-  position?: Measurement
-}
-
-export type Measurement = {
-  x: number
-  y: number
-  width: number
-  height: number
-}
-
-export type ContextType = {
-  isOpen: boolean
-  measurement: Measurement | null
-  /* Spring animation between 0 and 1 */
-  animationSV: SharedValue<number>
-  /* Translation in Y axis to ensure everything's onscreen */
-  translationSV: SharedValue<number>
-  mode: 'full' | 'auxiliary-only'
-  open: (evt: Measurement, mode: 'full' | 'auxiliary-only') => void
-  close: () => void
-  registerHoverable: (
-    id: string,
-    rect: Measurement,
-    onTouchUp: () => void,
-  ) => void
-  hoverablesSV: SharedValue<Record<string, {id: string; rect: Measurement}>>
-  hoveredMenuItem: string | null
-  setHoveredMenuItem: React.Dispatch<React.SetStateAction<string | null>>
-  onTouchUpMenuItem: (id: string) => void
-}
-
-export type MenuContextType = {
-  align: 'left' | 'right'
-}
-
-export type ItemContextType = {
-  disabled: boolean
-}
-
-export type TriggerProps = {
-  children(props: TriggerChildProps): React.ReactNode
-  label: string
-  /**
-   * When activated, this is the accessibility label for the entire thing that has been triggered.
-   * For example, if the trigger is a message bubble, use the message content.
-   *
-   * @platform ios, android
-   */
-  contentLabel: string
-  hint?: string
-  role?: AccessibilityRole
-  style?: StyleProp<ViewStyle>
-}
-export type TriggerChildProps =
-  | {
-      isNative: true
-      control: {
-        isOpen: boolean
-        open: (mode: 'full' | 'auxiliary-only') => void
-      }
-      state: {
-        hovered: false
-        focused: false
-        pressed: false
-      }
-      /**
-       * We don't necessarily know what these will be spread on to, so we
-       * should add props one-by-one.
-       *
-       * On web, these properties are applied to a parent `Pressable`, so this
-       * object is empty.
-       */
-      props: {
-        ref: null
-        onPress: null
-        onFocus: null
-        onBlur: null
-        onPressIn: null
-        onPressOut: null
-        accessibilityHint: null
-        accessibilityLabel: string
-        accessibilityRole: null
-      }
-    }
-  | {
-      isNative: false
-      control: Dialog.DialogOuterProps['control']
-      state: {
-        hovered: false
-        focused: false
-        pressed: false
-      }
-      props: RadixPassThroughTriggerProps & {
-        onPress: () => void
-        onFocus: () => void
-        onBlur: () => void
-        onMouseEnter: () => void
-        onMouseLeave: () => void
-        accessibilityHint?: string
-        accessibilityLabel: string
-        accessibilityRole: AccessibilityRole
-      }
-    }

src/components/Dialog/context.ts

@@ -14,7 +14,6 @@ export const Context = React.createContext<DialogContextProps>({
   nativeSnapPoint: BottomSheetSnapPoint.Hidden,
   disableDrag: false,
   setDisableDrag: () => {},
-  isWithinDialog: false,
 })
 
 export function useDialogContext() {

src/components/Dialog/index.tsx

@@ -26,8 +26,7 @@ import {isAndroid, isIOS} from '#/platform/detection'
 import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {List, ListMethods, ListProps} from '#/view/com/util/List'
-import {atoms as a, tokens, useTheme} from '#/alf'
-import {useThemeName} from '#/alf/util/useColorModeTheme'
+import {atoms as a, useTheme} from '#/alf'
 import {Context, useDialogContext} from '#/components/Dialog/context'
 import {
   DialogControlProps,
@@ -46,7 +45,7 @@ export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/shared'
 export * from '#/components/Dialog/types'
 export * from '#/components/Dialog/utils'
-
+// @ts-ignore
 export const Input = createInput(TextInput)
 
 export function Outer({
@@ -56,8 +55,7 @@ export function Outer({
   nativeOptions,
   testID,
 }: React.PropsWithChildren<DialogOuterProps>) {
-  const themeName = useThemeName()
-  const t = useTheme(themeName)
+  const t = useTheme()
   const ref = React.useRef<BottomSheetNativeComponent>(null)
   const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen, setFullyExpandedCount} =
@@ -154,7 +152,6 @@ export function Outer({
       nativeSnapPoint: snapPoint,
       disableDrag,
       setDisableDrag,
-      isWithinDialog: true,
     }),
     [close, snapPoint, disableDrag, setDisableDrag],
   )
@@ -169,9 +166,7 @@ export function Outer({
       onStateChange={onStateChange}
       disableDrag={disableDrag}>
       <Context.Provider value={context}>
-        <View testID={testID} style={[a.relative]}>
-          {children}
-        </View>
+        <View testID={testID}>{children}</View>
       </Context.Provider>
     </BottomSheet>
   )
@@ -199,7 +194,7 @@ export function Inner({children, style, header}: DialogInnerProps) {
 
 export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
   function ScrollableInner(
-    {children, contentContainerStyle, header, ...props},
+    {children, style, contentContainerStyle, header, ...props},
     ref,
   ) {
     const {nativeSnapPoint, disableDrag, setDisableDrag} = useDialogContext()
@@ -219,21 +214,13 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
       [],
     )
 
-    let paddingBottom = 0
-    if (isIOS) {
-      paddingBottom += keyboardHeight / 4
-      if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
-        paddingBottom += insets.bottom + tokens.space.md
-      }
-      paddingBottom = Math.max(paddingBottom, tokens.space._2xl)
-    } else {
-      paddingBottom += keyboardHeight
-      if (nativeSnapPoint === BottomSheetSnapPoint.Full) {
-        paddingBottom += insets.top
-      }
-      paddingBottom +=
-        Math.max(insets.bottom, tokens.space._5xl) + tokens.space._2xl
-    }
+    const basePading =
+      (isIOS ? 30 : 50) + (isIOS ? keyboardHeight / 4 : keyboardHeight)
+    const fullPaddingBase = insets.bottom + insets.top + basePading
+    const fullPadding = isIOS ? fullPaddingBase : fullPaddingBase + 50
+
+    const paddingBottom =
+      nativeSnapPoint === BottomSheetSnapPoint.Full ? fullPadding : basePading
 
     const onScroll = (e: NativeSyntheticEvent<NativeScrollEvent>) => {
       if (!isAndroid) {
@@ -249,6 +236,7 @@ export const ScrollableInner = React.forwardRef<ScrollView, DialogInnerProps>(
 
     return (
       <KeyboardAwareScrollView
+        style={[style]}
         contentContainerStyle={[
           a.pt_2xl,
           a.px_xl,
@@ -326,7 +314,7 @@ export function Handle() {
           style={[
             a.rounded_sm,
             {
-              top: tokens.space._2xl / 2 - 2.5,
+              top: 10,
               width: 35,
               height: 5,
               alignSelf: 'center',

src/components/Dialog/index.web.tsx

@@ -15,7 +15,6 @@ import {FocusScope} from '@radix-ui/react-focus-scope'
 import {RemoveScrollBar} from 'react-remove-scroll-bar'
 
 import {logger} from '#/logger'
-import {useA11y} from '#/state/a11y'
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
@@ -41,7 +40,6 @@ export function Outer({
   children,
   control,
   onClose,
-  webOptions,
 }: React.PropsWithChildren<DialogOuterProps>) {
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
@@ -97,7 +95,6 @@ export function Outer({
       nativeSnapPoint: 0,
       disableDrag: false,
       setDisableDrag: () => {},
-      isWithinDialog: true,
     }),
     [close],
   )
@@ -117,26 +114,20 @@ export function Outer({
                   web(a.fixed),
                   a.inset_0,
                   a.z_10,
-                  a.px_xl,
-                  webOptions?.alignCenter ? a.justify_center : undefined,
                   a.align_center,
-                  {
-                    overflowY: 'auto',
-                    paddingVertical: gtMobile ? '10vh' : a.pt_xl.paddingTop,
-                  },
+                  gtMobile ? a.p_lg : a.p_md,
+                  {overflowY: 'auto'},
                 ]}>
                 <Backdrop />
-                {/**
-                 * This is needed to prevent centered dialogs from overflowing
-                 * above the screen, and provides a "natural" centering so that
-                 * stacked dialogs appear relatively aligned.
-                 */}
                 <View
                   style={[
                     a.w_full,
                     a.z_20,
+                    a.justify_center,
                     a.align_center,
-                    web({minHeight: '60vh', position: 'static'}),
+                    {
+                      minHeight: web('calc(90vh - 36px)') || undefined,
+                    },
                   ]}>
                   {children}
                 </View>
@@ -161,7 +152,6 @@ export function Inner({
   const t = useTheme()
   const {close} = React.useContext(Context)
   const {gtMobile} = useBreakpoints()
-  const {reduceMotionEnabled} = useA11y()
   useFocusGuards()
   return (
     <FocusScope loop asChild trapped>
@@ -171,7 +161,7 @@ export function Inner({
         aria-label={label}
         aria-labelledby={accessibilityLabelledBy}
         aria-describedby={accessibilityDescribedBy}
-        // @ts-expect-error web only -prf
+        // @ts-ignore web only -prf
         onClick={stopPropagation}
         onStartShouldSetResponder={_ => true}
         onTouchEnd={stopPropagation}
@@ -187,9 +177,10 @@ export function Inner({
             shadowColor: t.palette.black,
             shadowOpacity: t.name === 'light' ? 0.1 : 0.4,
             shadowRadius: 30,
+            // @ts-ignore web only
+            animation: 'fadeIn ease-out 0.1s',
           },
-          !reduceMotionEnabled && a.zoom_fade_in,
-          style,
+          flatten(style),
         ])}>
         <DismissableLayer
           onInteractOutside={preventDefault}
@@ -225,8 +216,8 @@ export const InnerFlatList = React.forwardRef<
       style={[
         a.overflow_hidden,
         a.px_0,
-        // 100 minus 10vh of paddingVertical
-        web({maxHeight: '80vh'}),
+        // @ts-ignore web only -sfn
+        {maxHeight: 'calc(-36px + 100vh)'},
         webInnerStyle,
       ]}
       contentContainerStyle={[a.px_0, webInnerContentContainerStyle]}>
@@ -271,15 +262,20 @@ export function Handle() {
 
 function Backdrop() {
   const t = useTheme()
-  const {reduceMotionEnabled} = useA11y()
   return (
-    <View style={{opacity: 0.8}}>
+    <View
+      style={{
+        opacity: 0.8,
+      }}>
       <View
         style={[
           a.fixed,
           a.inset_0,
-          {backgroundColor: t.palette.black},
-          !reduceMotionEnabled && a.fade_in,
+          {
+            backgroundColor: t.palette.black,
+            // @ts-ignore web only
+            animation: 'fadeIn ease-out 0.15s',
+          },
         ]}
       />
     </View>

src/components/Dialog/types.ts

@@ -44,8 +44,6 @@ export type DialogContextProps = {
   nativeSnapPoint: BottomSheetSnapPoint
   disableDrag: boolean
   setDisableDrag: React.Dispatch<React.SetStateAction<boolean>>
-  // in the event that the hook is used outside of a dialog
-  isWithinDialog: boolean
 }
 
 export type DialogControlOpenOptions = {
@@ -62,16 +60,11 @@ export type DialogOuterProps = {
   control: DialogControlProps
   onClose?: () => void
   nativeOptions?: Omit<BottomSheetViewProps, 'children'>
-  webOptions?: {
-    alignCenter?: boolean
-  }
+  webOptions?: {}
   testID?: string
 }
 
-type DialogInnerPropsBase<T> = React.PropsWithChildren<ViewStyleProp> &
-  T & {
-    testID?: string
-  }
+type DialogInnerPropsBase<T> = React.PropsWithChildren<ViewStyleProp> & T
 export type DialogInnerProps =
   | DialogInnerPropsBase<{
       label?: undefined

src/components/FeedCard.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
-import {type GestureResponderEvent, View} from 'react-native'
+import {GestureResponderEvent, View} from 'react-native'
 import {
-  type AppBskyFeedDefs,
-  type AppBskyGraphDefs,
+  AppBskyActorDefs,
+  AppBskyFeedDefs,
+  AppBskyGraphDefs,
   AtUri,
   RichText as RichTextApi,
 } from '@atproto/api'
@@ -23,20 +24,14 @@ import * as Toast from '#/view/com/util/Toast'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {useTheme} from '#/alf'
 import {atoms as a} from '#/alf'
-import {
-  Button,
-  ButtonIcon,
-  type ButtonProps,
-  ButtonText,
-} from '#/components/Button'
-import {Pin_Stroke2_Corner0_Rounded as PinIcon} from '#/components/icons/Pin'
-import {Link as InternalLink, type LinkProps} from '#/components/Link'
+import {Button, ButtonIcon} from '#/components/Button'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
+import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
-import {RichText, type RichTextProps} from '#/components/RichText'
+import {RichText, RichTextProps} from '#/components/RichText'
 import {Text} from '#/components/Typography'
-import type * as bsky from '#/types/bsky'
-import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from './icons/Trash'
 
 type Props = {
   view: AppBskyFeedDefs.GeneratorView
@@ -86,11 +81,11 @@ export function Link({
 }
 
 export function Outer({children}: {children: React.ReactNode}) {
-  return <View style={[a.w_full, a.gap_sm]}>{children}</View>
+  return <View style={[a.w_full, a.gap_md]}>{children}</View>
 }
 
 export function Header({children}: {children: React.ReactNode}) {
-  return <View style={[a.flex_row, a.align_center, a.gap_sm]}>{children}</View>
+  return <View style={[a.flex_row, a.align_center, a.gap_md]}>{children}</View>
 }
 
 export type AvatarProps = {src: string | undefined; size?: number}
@@ -120,7 +115,7 @@ export function TitleAndByline({
   creator,
 }: {
   title: string
-  creator?: bsky.profile.AnyProfileView
+  creator?: AppBskyActorDefs.ProfileViewBasic
 }) {
   const t = useTheme()
 
@@ -225,27 +220,22 @@ export function Likes({count}: {count: number}) {
 export function SaveButton({
   view,
   pin,
-  ...props
 }: {
   view: AppBskyFeedDefs.GeneratorView | AppBskyGraphDefs.ListView
   pin?: boolean
-  text?: boolean
-} & Partial<ButtonProps>) {
+}) {
   const {hasSession} = useSession()
   if (!hasSession) return null
-  return <SaveButtonInner view={view} pin={pin} {...props} />
+  return <SaveButtonInner view={view} pin={pin} />
 }
 
 function SaveButtonInner({
   view,
   pin,
-  text = true,
-  ...buttonProps
 }: {
   view: AppBskyFeedDefs.GeneratorView | AppBskyGraphDefs.ListView
   pin?: boolean
-  text?: boolean
-} & Partial<ButtonProps>) {
+}) {
   const {_} = useLingui()
   const {data: preferences} = usePreferencesQuery()
   const {isPending: isAddSavedFeedPending, mutateAsync: saveFeeds} =
@@ -279,9 +269,9 @@ function SaveButtonInner({
             },
           ])
         }
-        Toast.show(_(msg({message: 'Feeds updated!', context: 'toast'})))
+        Toast.show(_(msg`Feeds updated!`))
       } catch (err: any) {
-        logger.error(err, {message: `FeedCard: failed to update feeds`, pin})
+        logger.error(err, {context: `FeedCard: failed to update feeds`, pin})
         Toast.show(_(msg`Failed to update feeds`), 'xmark')
       }
     },
@@ -304,38 +294,20 @@ function SaveButtonInner({
         disabled={isPending}
         label={_(msg`Add this feed to your feeds`)}
         size="small"
-        variant="solid"
-        color={savedFeedConfig ? 'secondary' : 'primary'}
-        onPress={savedFeedConfig ? onPrompRemoveFeed : toggleSave}
-        {...buttonProps}>
+        variant="ghost"
+        color="secondary"
+        shape="square"
+        onPress={savedFeedConfig ? onPrompRemoveFeed : toggleSave}>
         {savedFeedConfig ? (
-          <>
-            {isPending ? (
-              <ButtonIcon size="md" icon={Loader} />
-            ) : (
-              !text && <ButtonIcon size="md" icon={TrashIcon} />
-            )}
-            {text && (
-              <ButtonText>
-                <Trans>Unpin Feed</Trans>
-              </ButtonText>
-            )}
-          </>
+          <ButtonIcon size="md" icon={isPending ? Loader : Trash} />
         ) : (
-          <>
-            <ButtonIcon size="md" icon={isPending ? Loader : PinIcon} />
-            {text && (
-              <ButtonText>
-                <Trans>Pin Feed</Trans>
-              </ButtonText>
-            )}
-          </>
+          <ButtonIcon size="md" icon={isPending ? Loader : Plus} />
         )}
       </Button>
 
       <Prompt.Basic
         control={removePromptControl}
-        title={_(msg`Remove from your feeds?`)}
+        title={_(msg`Remove from my feeds?`)}
         description={_(
           msg`Are you sure you want to remove this from your feeds?`,
         )}

src/components/FeedInterstitials.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import {View} from 'react-native'
 import {ScrollView} from 'react-native-gesture-handler'
-import {AppBskyFeedDefs, AtUri} from '@atproto/api'
+import {AppBskyActorDefs, AppBskyFeedDefs, AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -17,7 +17,6 @@ import {useSuggestedFollowsByActorQuery} from '#/state/queries/suggested-follows
 import {useSession} from '#/state/session'
 import * as userActionHistory from '#/state/userActionHistory'
 import {SeenPost} from '#/state/userActionHistory'
-import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
 import {atoms as a, useBreakpoints, useTheme, ViewStyleProp, web} from '#/alf'
 import {Button} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
@@ -27,7 +26,6 @@ import {PersonPlus_Stroke2_Corner0_Rounded as Person} from '#/components/icons/P
 import {InlineLinkText} from '#/components/Link'
 import * as ProfileCard from '#/components/ProfileCard'
 import {Text} from '#/components/Typography'
-import * as bsky from '#/types/bsky'
 import {ProgressGuideList} from './ProgressGuide/List'
 
 const MOBILE_CARD_WIDTH = 300
@@ -198,7 +196,6 @@ export function SuggestedFollowsProfile({did}: {did: string}) {
     <ProfileGrid
       isSuggestionsLoading={isSuggestionsLoading}
       profiles={data?.suggestions ?? []}
-      recId={data?.recId}
       error={error}
       viewContext="profile"
     />
@@ -225,12 +222,10 @@ export function ProfileGrid({
   isSuggestionsLoading,
   error,
   profiles,
-  recId,
   viewContext = 'feed',
 }: {
   isSuggestionsLoading: boolean
-  profiles: bsky.profile.AnyProfileView[]
-  recId?: number
+  profiles: AppBskyActorDefs.ProfileViewDetailed[]
   error: Error | null
   viewContext: 'profile' | 'feed'
 }) {
@@ -254,19 +249,12 @@ export function ProfileGrid({
       ))
   ) : error || !profiles.length ? null : (
     <>
-      {profiles.slice(0, maxLength).map((profile, index) => (
+      {profiles.slice(0, maxLength).map(profile => (
         <ProfileCard.Link
           key={profile.did}
           profile={profile}
           onPress={() => {
-            logEvent('suggestedUser:press', {
-              logContext:
-                viewContext === 'feed'
-                  ? 'InterstitialDiscover'
-                  : 'InterstitialProfile',
-              recId,
-              position: index,
-            })
+            logEvent('feed:interstitial:profileCard:press', {})
           }}
           style={[
             a.flex_1,
@@ -294,17 +282,6 @@ export function ProfileGrid({
                     logContext="FeedInterstitial"
                     shape="round"
                     colorInverted
-                    onFollow={() => {
-                      logEvent('suggestedUser:follow', {
-                        logContext:
-                          viewContext === 'feed'
-                            ? 'InterstitialDiscover'
-                            : 'InterstitialProfile',
-                        location: 'Card',
-                        recId,
-                        position: index,
-                      })
-                    }}
                   />
                 </ProfileCard.Header>
                 <ProfileCard.Description profile={profile} numberOfLines={2} />
@@ -359,39 +336,33 @@ export function ProfileGrid({
           </View>
         </View>
       ) : (
-        <BlockDrawerGesture>
-          <View>
-            <ScrollView
-              horizontal
-              showsHorizontalScrollIndicator={false}
-              snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
-              decelerationRate="fast">
-              <View style={[a.px_lg, a.pt_sm, a.pb_lg, a.flex_row, a.gap_md]}>
-                {content}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
+          decelerationRate="fast">
+          <View style={[a.px_lg, a.pt_sm, a.pb_lg, a.flex_row, a.gap_md]}>
+            {content}
 
-                <Button
-                  label={_(msg`Browse more accounts on the Explore page`)}
-                  onPress={() => {
-                    navigation.navigate('SearchTab')
-                  }}>
-                  <CardOuter style={[a.flex_1, {borderWidth: 0}]}>
-                    <View style={[a.flex_1, a.justify_center]}>
-                      <View style={[a.flex_row, a.px_lg]}>
-                        <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
-                          <Trans>
-                            Browse more suggestions on the Explore page
-                          </Trans>
-                        </Text>
+            <Button
+              label={_(msg`Browse more accounts on the Explore page`)}
+              onPress={() => {
+                navigation.navigate('SearchTab')
+              }}>
+              <CardOuter style={[a.flex_1, {borderWidth: 0}]}>
+                <View style={[a.flex_1, a.justify_center]}>
+                  <View style={[a.flex_row, a.px_lg]}>
+                    <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
+                      <Trans>Browse more suggestions on the Explore page</Trans>
+                    </Text>
 
-                        <Arrow size="xl" />
-                      </View>
-                    </View>
-                  </CardOuter>
-                </Button>
-              </View>
-            </ScrollView>
+                    <Arrow size="xl" />
+                  </View>
+                </View>
+              </CardOuter>
+            </Button>
           </View>
-        </BlockDrawerGesture>
+        </ScrollView>
       )}
     </View>
   )
@@ -498,38 +469,34 @@ export function SuggestedFeeds() {
           </View>
         </View>
       ) : (
-        <BlockDrawerGesture>
-          <ScrollView
-            horizontal
-            showsHorizontalScrollIndicator={false}
-            snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
-            decelerationRate="fast">
-            <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
-              {content}
+        <ScrollView
+          horizontal
+          showsHorizontalScrollIndicator={false}
+          snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
+          decelerationRate="fast">
+          <View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
+            {content}
 
-              <Button
-                label={_(msg`Browse more feeds on the Explore page`)}
-                onPress={() => {
-                  navigation.navigate('SearchTab')
-                }}
-                style={[a.flex_col]}>
-                <CardOuter style={[a.flex_1]}>
-                  <View style={[a.flex_1, a.justify_center]}>
-                    <View style={[a.flex_row, a.px_lg]}>
-                      <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
-                        <Trans>
-                          Browse more suggestions on the Explore page
-                        </Trans>
-                      </Text>
+            <Button
+              label={_(msg`Browse more feeds on the Explore page`)}
+              onPress={() => {
+                navigation.navigate('SearchTab')
+              }}
+              style={[a.flex_col]}>
+              <CardOuter style={[a.flex_1]}>
+                <View style={[a.flex_1, a.justify_center]}>
+                  <View style={[a.flex_row, a.px_lg]}>
+                    <Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
+                      <Trans>Browse more suggestions on the Explore page</Trans>
+                    </Text>
 
-                      <Arrow size="xl" />
-                    </View>
+                    <Arrow size="xl" />
                   </View>
-                </CardOuter>
-              </Button>
-            </View>
-          </ScrollView>
-        </BlockDrawerGesture>
+                </View>
+              </CardOuter>
+            </Button>
+          </View>
+        </ScrollView>
       )}
     </View>
   )

src/components/Grid.tsx

@@ -1,59 +0,0 @@
-import {createContext, useContext, useMemo} from 'react'
-import {View} from 'react-native'
-
-import {atoms as a, ViewStyleProp} from '#/alf'
-
-const Context = createContext({
-  gap: 0,
-})
-
-export function Row({
-  children,
-  gap = 0,
-  style,
-}: ViewStyleProp & {
-  children: React.ReactNode
-  gap?: number
-}) {
-  return (
-    <Context.Provider value={useMemo(() => ({gap}), [gap])}>
-      <View
-        style={[
-          a.flex_row,
-          a.flex_1,
-          {
-            marginLeft: -gap / 2,
-            marginRight: -gap / 2,
-          },
-          style,
-        ]}>
-        {children}
-      </View>
-    </Context.Provider>
-  )
-}
-
-export function Col({
-  children,
-  width = 1,
-  style,
-}: ViewStyleProp & {
-  children: React.ReactNode
-  width?: number
-}) {
-  const {gap} = useContext(Context)
-  return (
-    <View
-      style={[
-        a.flex_col,
-        {
-          paddingLeft: gap / 2,
-          paddingRight: gap / 2,
-          width: `${width * 100}%`,
-        },
-        style,
-      ]}>
-      {children}
-    </View>
-  )
-}

src/components/KnownFollowers.tsx

@@ -10,7 +10,6 @@ import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme} from '#/alf'
 import {Link, LinkProps} from '#/components/Link'
 import {Text} from '#/components/Typography'
-import * as bsky from '#/types/bsky'
 
 const AVI_SIZE = 30
 const AVI_SIZE_SMALL = 20
@@ -33,13 +32,11 @@ export function KnownFollowers({
   moderationOpts,
   onLinkPress,
   minimal,
-  showIfEmpty,
 }: {
-  profile: bsky.profile.AnyProfileView
+  profile: AppBskyActorDefs.ProfileViewDetailed
   moderationOpts: ModerationOpts
   onLinkPress?: LinkProps['onPress']
   minimal?: boolean
-  showIfEmpty?: boolean
 }) {
   const cache = React.useRef<Map<string, AppBskyActorDefs.KnownFollowers>>(
     new Map(),
@@ -66,12 +63,11 @@ export function KnownFollowers({
         moderationOpts={moderationOpts}
         onLinkPress={onLinkPress}
         minimal={minimal}
-        showIfEmpty={showIfEmpty}
       />
     )
   }
 
-  return <EmptyFallback show={showIfEmpty} />
+  return null
 }
 
 function KnownFollowersInner({
@@ -80,19 +76,22 @@ function KnownFollowersInner({
   cachedKnownFollowers,
   onLinkPress,
   minimal,
-  showIfEmpty,
 }: {
-  profile: bsky.profile.AnyProfileView
+  profile: AppBskyActorDefs.ProfileViewDetailed
   moderationOpts: ModerationOpts
   cachedKnownFollowers: AppBskyActorDefs.KnownFollowers
   onLinkPress?: LinkProps['onPress']
   minimal?: boolean
-  showIfEmpty?: boolean
 }) {
   const t = useTheme()
   const {_} = useLingui()
 
-  const textStyle = [a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]
+  const textStyle = [
+    a.flex_1,
+    a.text_sm,
+    a.leading_snug,
+    t.atoms.text_contrast_medium,
+  ]
 
   const slice = cachedKnownFollowers.followers.slice(0, 3).map(f => {
     const moderation = moderateProfile(f, moderationOpts)
@@ -115,7 +114,7 @@ function KnownFollowersInner({
    * We check above too, but here for clarity and a reminder to _check for
    * valid indices_
    */
-  if (slice.length === 0) return <EmptyFallback show={showIfEmpty} />
+  if (slice.length === 0) return null
 
   const SIZE = minimal ? AVI_SIZE_SMALL : AVI_SIZE
 
@@ -127,7 +126,7 @@ function KnownFollowersInner({
       onPress={onLinkPress}
       to={makeProfileLink(profile, 'known-followers')}
       style={[
-        a.max_w_full,
+        a.flex_1,
         a.flex_row,
         minimal ? a.gap_sm : a.gap_md,
         a.align_center,
@@ -172,7 +171,6 @@ function KnownFollowersInner({
 
           <Text
             style={[
-              a.flex_shrink,
               textStyle,
               hovered && {
                 textDecorationLine: 'underline',
@@ -244,15 +242,3 @@ function KnownFollowersInner({
     </Link>
   )
 }
-
-function EmptyFallback({show}: {show?: boolean}) {
-  const t = useTheme()
-
-  if (!show) return null
-
-  return (
-    <Text style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
-      <Trans>Not followed by anyone you're following</Trans>
-    </Text>
-  )
-}

src/components/Layout/Header/index.tsx

@@ -1,5 +1,5 @@
 import {createContext, useCallback, useContext} from 'react'
-import {GestureResponderEvent, Keyboard, View} from 'react-native'
+import {GestureResponderEvent, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useNavigation} from '@react-navigation/native'
@@ -14,7 +14,6 @@ import {
   TextStyleProp,
   useBreakpoints,
   useGutters,
-  useLayoutBreakpoints,
   useTheme,
   web,
 } from '#/alf'
@@ -23,9 +22,7 @@ import {ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeft} from '#/components/icons
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import {
   BUTTON_VISUAL_ALIGNMENT_OFFSET,
-  CENTER_COLUMN_OFFSET,
   HEADER_SLOT_SIZE,
-  SCROLLBAR_OFFSET,
 } from '#/components/Layout/const'
 import {ScrollbarOffsetContext} from '#/components/Layout/context'
 import {Text} from '#/components/Typography'
@@ -45,7 +42,6 @@ export function Outer({
   const gutters = useGutters([0, 'base'])
   const {gtMobile} = useBreakpoints()
   const {isWithinOffsetView} = useContext(ScrollbarOffsetContext)
-  const {centerColumnOffset} = useLayoutBreakpoints()
 
   return (
     <View
@@ -64,12 +60,7 @@ export function Outer({
         }),
         t.atoms.border_contrast_low,
         gtMobile && [a.mx_auto, {maxWidth: 600}],
-        !isWithinOffsetView && {
-          transform: [
-            {translateX: centerColumnOffset ? CENTER_COLUMN_OFFSET : 0},
-            {translateX: web(SCROLLBAR_OFFSET) ?? 0},
-          ],
-        },
+        !isWithinOffsetView && a.scrollbar_offset,
       ]}>
       {children}
     </View>
@@ -131,11 +122,7 @@ export function BackButton({onPress, style, ...props}: Partial<ButtonProps>) {
         shape="square"
         onPress={onPressBack}
         hitSlop={HITSLOP_30}
-        style={[
-          {marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET},
-          a.bg_transparent,
-          style,
-        ]}
+        style={[{marginLeft: -BUTTON_VISUAL_ALIGNMENT_OFFSET}, style]}
         {...props}>
         <ButtonIcon icon={ArrowLeft} size="lg" />
       </Button>
@@ -149,7 +136,6 @@ export function MenuButton() {
   const {gtMobile} = useBreakpoints()
 
   const onPress = useCallback(() => {
-    Keyboard.dismiss()
     setDrawerOpen(true)
   }, [setDrawerOpen])
 

src/components/Layout/const.ts

@@ -14,8 +14,3 @@ export const BUTTON_VISUAL_ALIGNMENT_OFFSET = 3
  * Corresponds to the width of a small square or round button
  */
 export const HEADER_SLOT_SIZE = 34
-
-/**
- * How far to shift the center column when in the tablet breakpoint
- */
-export const CENTER_COLUMN_OFFSET = -105

src/components/Layout/index.tsx

@@ -13,15 +13,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
 import {isWeb} from '#/platform/detection'
 import {useShellLayout} from '#/state/shell/shell-layout'
-import {
-  atoms as a,
-  useBreakpoints,
-  useLayoutBreakpoints,
-  useTheme,
-  web,
-} from '#/alf'
-import {useDialogContext} from '#/components/Dialog'
-import {CENTER_COLUMN_OFFSET, SCROLLBAR_OFFSET} from '#/components/Layout/const'
+import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {ScrollbarOffsetContext} from '#/components/Layout/context'
 
 export * from '#/components/Layout/const'
@@ -55,7 +47,6 @@ export const Screen = React.memo(function Screen({
 export type ContentProps = AnimatedScrollViewProps & {
   style?: StyleProp<ViewStyle>
   contentContainerStyle?: StyleProp<ViewStyle>
-  ignoreTabletLayoutOffset?: boolean
 }
 
 /**
@@ -65,10 +56,8 @@ export const Content = React.memo(function Content({
   children,
   style,
   contentContainerStyle,
-  ignoreTabletLayoutOffset,
   ...props
 }: ContentProps) {
-  const t = useTheme()
   const {footerHeight} = useShellLayout()
   const animatedProps = useAnimatedProps(() => {
     return {
@@ -84,7 +73,6 @@ export const Content = React.memo(function Content({
     <Animated.ScrollView
       id="content"
       automaticallyAdjustsScrollIndicatorInsets={false}
-      indicatorStyle={t.scheme === 'dark' ? 'white' : 'black'}
       // sets the scroll inset to the height of the footer
       animatedProps={animatedProps}
       style={[scrollViewStyles.common, style]}
@@ -94,10 +82,8 @@ export const Content = React.memo(function Content({
       ]}
       {...props}>
       {isWeb ? (
-        <Center ignoreTabletLayoutOffset={ignoreTabletLayoutOffset}>
-          {/* @ts-expect-error web only -esb */}
-          {children}
-        </Center>
+        // @ts-ignore web only -esb
+        <Center>{children}</Center>
       ) : (
         children
       )}
@@ -150,13 +136,10 @@ export const KeyboardAwareContent = React.memo(function LayoutScrollView({
 export const Center = React.memo(function LayoutContent({
   children,
   style,
-  ignoreTabletLayoutOffset,
   ...props
-}: ViewProps & {ignoreTabletLayoutOffset?: boolean}) {
+}: ViewProps) {
   const {isWithinOffsetView} = useContext(ScrollbarOffsetContext)
   const {gtMobile} = useBreakpoints()
-  const {centerColumnOffset} = useLayoutBreakpoints()
-  const {isWithinDialog} = useDialogContext()
   const ctx = useMemo(() => ({isWithinOffsetView: true}), [])
   return (
     <View
@@ -166,20 +149,8 @@ export const Center = React.memo(function LayoutContent({
         gtMobile && {
           maxWidth: 600,
         },
-        !isWithinOffsetView && {
-          transform: [
-            {
-              translateX:
-                centerColumnOffset &&
-                !ignoreTabletLayoutOffset &&
-                !isWithinDialog
-                  ? CENTER_COLUMN_OFFSET
-                  : 0,
-            },
-            {translateX: web(SCROLLBAR_OFFSET) ?? 0},
-          ],
-        },
         style,
+        !isWithinOffsetView && a.scrollbar_offset,
       ]}
       {...props}>
       <ScrollbarOffsetContext.Provider value={ctx}>
@@ -195,7 +166,6 @@ export const Center = React.memo(function LayoutContent({
 const WebCenterBorders = React.memo(function LayoutContent() {
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
-  const {centerColumnOffset} = useLayoutBreakpoints()
   return gtMobile ? (
     <View
       style={[
@@ -208,8 +178,9 @@ const WebCenterBorders = React.memo(function LayoutContent() {
           width: 602,
           left: '50%',
           transform: [
-            {translateX: '-50%'},
-            {translateX: centerColumnOffset ? CENTER_COLUMN_OFFSET : 0},
+            {
+              translateX: '-50%',
+            },
             ...a.scrollbar_offset.transform,
           ],
         }),

src/components/LinearGradientBackground.tsx

@@ -6,18 +6,12 @@ import {gradients} from '#/alf/tokens'
 
 export function LinearGradientBackground({
   style,
-  gradient = 'sky',
   children,
-  start,
-  end,
 }: {
-  style?: StyleProp<ViewStyle>
-  gradient?: keyof typeof gradients
-  children?: React.ReactNode
-  start?: [number, number]
-  end?: [number, number]
+  style: StyleProp<ViewStyle>
+  children: React.ReactNode
 }) {
-  const colors = gradients[gradient].values.map(([_, color]) => {
+  const gradient = gradients.sky.values.map(([_, color]) => {
     return color
   }) as [string, string, ...string[]]
 
@@ -26,7 +20,7 @@ export function LinearGradientBackground({
   }
 
   return (
-    <LinearGradient colors={colors} style={style} start={start} end={end}>
+    <LinearGradient colors={gradient} style={style}>
       {children}
     </LinearGradient>
   )

src/components/Link.tsx

@@ -15,6 +15,7 @@ import {
   linkRequiresWarning,
 } from '#/lib/strings/url-helpers'
 import {isNative, isWeb} from '#/platform/detection'
+import {shouldClickOpenNewTab} from '#/platform/urls'
 import {useModalControls} from '#/state/modals'
 import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf'
 import {Button, ButtonProps} from '#/components/Button'
@@ -54,12 +55,6 @@ type BaseLinkProps = Pick<
    */
   onPress?: (e: GestureResponderEvent) => void | false
 
-  /**
-   * Callback for when the link is long pressed (on native). Prevent default
-   * and return `false` to exit early and prevent default long press hander.
-   */
-  onLongPress?: (e: GestureResponderEvent) => void | false
-
   /**
    * Web-only attribute. Sets `download` attr on web.
    */
@@ -69,11 +64,6 @@ type BaseLinkProps = Pick<
    * Native-only attribute. If true, will open the share sheet on long press.
    */
   shareOnLongPress?: boolean
-
-  /**
-   * Whether the link should be opened through the redirect proxy.
-   */
-  shouldProxy?: boolean
 }
 
 export function useLink({
@@ -82,14 +72,9 @@ export function useLink({
   action = 'push',
   disableMismatchWarning,
   onPress: outerOnPress,
-  onLongPress: outerOnLongPress,
   shareOnLongPress,
-  overridePresentation,
-  shouldProxy,
 }: BaseLinkProps & {
   displayText: string
-  overridePresentation?: boolean
-  shouldProxy?: boolean
 }) {
   const navigation = useNavigationDeduped()
   const {href} = useLinkProps<AllNavigatorParams>({
@@ -125,7 +110,7 @@ export function useLink({
         })
       } else {
         if (isExternal) {
-          openLink(href, overridePresentation, shouldProxy)
+          openLink(href)
         } else {
           const shouldOpenInNewTab = shouldClickOpenNewTab(e)
 
@@ -167,8 +152,6 @@ export function useLink({
       closeModal,
       action,
       navigation,
-      overridePresentation,
-      shouldProxy,
     ],
   )
 
@@ -192,14 +175,8 @@ export function useLink({
     }
   }, [disableMismatchWarning, displayText, href, isExternal, openModal])
 
-  const onLongPress = React.useCallback(
-    (e: GestureResponderEvent) => {
-      const exitEarlyIfFalse = outerOnLongPress?.(e)
-      if (exitEarlyIfFalse === false) return
-      return isNative && shareOnLongPress ? handleLongPress() : undefined
-    },
-    [outerOnLongPress, handleLongPress, shareOnLongPress],
-  )
+  const onLongPress =
+    isNative && isExternal && shareOnLongPress ? handleLongPress : undefined
 
   return {
     isExternal,
@@ -225,18 +202,14 @@ export function Link({
   to,
   action = 'push',
   onPress: outerOnPress,
-  onLongPress: outerOnLongPress,
   download,
-  shouldProxy,
   ...rest
 }: LinkProps) {
-  const {href, isExternal, onPress, onLongPress} = useLink({
+  const {href, isExternal, onPress} = useLink({
     to,
     displayText: typeof children === 'string' ? children : '',
     action,
     onPress: outerOnPress,
-    onLongPress: outerOnLongPress,
-    shouldProxy: shouldProxy,
   })
 
   return (
@@ -247,7 +220,6 @@ export function Link({
       accessibilityRole="link"
       href={href}
       onPress={download ? undefined : onPress}
-      onLongPress={onLongPress}
       {...web({
         hrefAttrs: {
           target: download ? undefined : isExternal ? 'blank' : undefined,
@@ -267,13 +239,12 @@ export function Link({
 export type InlineLinkProps = React.PropsWithChildren<
   BaseLinkProps &
     TextStyleProp &
-    Pick<TextProps, 'selectable' | 'numberOfLines'> &
-    Pick<ButtonProps, 'label' | 'accessibilityHint'> & {
-      disableUnderline?: boolean
-      title?: TextProps['title']
-      overridePresentation?: boolean
-    }
->
+    Pick<TextProps, 'selectable' | 'numberOfLines'>
+> &
+  Pick<ButtonProps, 'label'> & {
+    disableUnderline?: boolean
+    title?: TextProps['title']
+  }
 
 export function InlineLinkText({
   children,
@@ -282,14 +253,11 @@ export function InlineLinkText({
   disableMismatchWarning,
   style,
   onPress: outerOnPress,
-  onLongPress: outerOnLongPress,
   download,
   selectable,
   label,
   shareOnLongPress,
   disableUnderline,
-  overridePresentation,
-  shouldProxy,
   ...rest
 }: InlineLinkProps) {
   const t = useTheme()
@@ -300,10 +268,7 @@ export function InlineLinkText({
     action,
     disableMismatchWarning,
     onPress: outerOnPress,
-    onLongPress: outerOnLongPress,
     shareOnLongPress,
-    overridePresentation,
-    shouldProxy: shouldProxy,
   })
   const {
     state: hovered,
@@ -354,21 +319,6 @@ export function InlineLinkText({
   )
 }
 
-export function WebOnlyInlineLinkText({
-  children,
-  to,
-  onPress,
-  ...props
-}: Omit<InlineLinkProps, 'onLongPress'>) {
-  return isWeb ? (
-    <InlineLinkText {...props} to={to} onPress={onPress}>
-      {children}
-    </InlineLinkText>
-  ) : (
-    <Text {...props}>{children}</Text>
-  )
-}
-
 /**
  * Utility to create a static `onPress` handler for a `Link` that would otherwise link to a URI
  *
@@ -377,10 +327,7 @@ export function WebOnlyInlineLinkText({
  */
 export function createStaticClick(
   onPressHandler: Exclude<BaseLinkProps['onPress'], undefined>,
-): {
-  to: BaseLinkProps['to']
-  onPress: Exclude<BaseLinkProps['onPress'], undefined>
-} {
+): Pick<BaseLinkProps, 'to' | 'onPress'> {
   return {
     to: '#',
     onPress(e: GestureResponderEvent) {
@@ -391,72 +338,17 @@ export function createStaticClick(
   }
 }
 
-/**
- * Utility to create a static `onPress` handler for a `Link`, but only if the
- * click was not modified in some way e.g. `Cmd` or a middle click.
- *
- * On native, this behaves the same as `createStaticClick` because there are no
- * options to "modify" the click in this sense.
- *
- * Example:
- *   `<Link {...createStaticClick(e => {...})} />`
- */
-export function createStaticClickIfUnmodified(
-  onPressHandler: Exclude<BaseLinkProps['onPress'], undefined>,
-): {onPress: Exclude<BaseLinkProps['onPress'], undefined>} {
-  return {
-    onPress(e: GestureResponderEvent) {
-      if (!isWeb || !isModifiedClickEvent(e)) {
-        e.preventDefault()
-        onPressHandler(e)
-        return false
-      }
-    },
-  }
-}
-
-/**
- * Determines if the click event has a meta key pressed, indicating the user
- * intends to deviate from default behavior.
- */
-export function isClickEventWithMetaKey(e: GestureResponderEvent) {
-  if (!isWeb) return false
-  const event = e as unknown as MouseEvent
-  return event.metaKey || event.altKey || event.ctrlKey || event.shiftKey
-}
-
-/**
- * Determines if the web click target is anything other than `_self`
- */
-export function isClickTargetExternal(e: GestureResponderEvent) {
-  if (!isWeb) return false
-  const event = e as unknown as MouseEvent
-  const el = event.currentTarget as HTMLAnchorElement
-  return el && el.target && el.target !== '_self'
-}
-
-/**
- * Determines if a click event has been modified in some way from its default
- * behavior, e.g. `Cmd` or a middle click.
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button}
- */
-export function isModifiedClickEvent(e: GestureResponderEvent): boolean {
-  if (!isWeb) return false
-  const event = e as unknown as MouseEvent
-  const isPrimaryButton = event.button === 0
-  return (
-    isClickEventWithMetaKey(e) || isClickTargetExternal(e) || !isPrimaryButton
+export function WebOnlyInlineLinkText({
+  children,
+  to,
+  onPress,
+  ...props
+}: InlineLinkProps) {
+  return isWeb ? (
+    <InlineLinkText {...props} to={to} onPress={onPress}>
+      {children}
+    </InlineLinkText>
+  ) : (
+    <Text {...props}>{children}</Text>
   )
 }
-
-/**
- * Determines if a click event has been modified in a way that should indiciate
- * that the user intends to open a new tab.
- * {@link https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button}
- */
-export function shouldClickOpenNewTab(e: GestureResponderEvent) {
-  if (!isWeb) return false
-  const event = e as unknown as MouseEvent
-  const isMiddleClick = isWeb && event.button === 1
-  return isClickEventWithMetaKey(e) || isClickTargetExternal(e) || isMiddleClick
-}

src/components/ListCard.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {View} from 'react-native'
 import {
+  AppBskyActorDefs,
   AppBskyGraphDefs,
   AtUri,
   moderateUserList,
@@ -25,7 +26,6 @@ import {
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import * as Hider from '#/components/moderation/Hider'
 import {Text} from '#/components/Typography'
-import * as bsky from '#/types/bsky'
 
 /*
  * This component is based on `FeedCard` and is tightly coupled with that
@@ -107,7 +107,7 @@ export function TitleAndByline({
   modUi,
 }: {
   title: string
-  creator?: bsky.profile.AnyProfileView
+  creator?: AppBskyActorDefs.ProfileViewBasic
   purpose?: AppBskyGraphDefs.ListView['purpose']
   modUi?: ModerationUI
 }) {

src/components/Lists.tsx

@@ -20,7 +20,6 @@ export function ListFooter({
   style,
   showEndMessage = false,
   endMessageText,
-  renderEndMessage,
 }: {
   isFetchingNextPage?: boolean
   hasNextPage?: boolean
@@ -30,7 +29,6 @@ export function ListFooter({
   style?: StyleProp<ViewStyle>
   showEndMessage?: boolean
   endMessageText?: string
-  renderEndMessage?: () => React.ReactNode
 }) {
   const t = useTheme()
 
@@ -50,13 +48,9 @@ export function ListFooter({
       ) : error ? (
         <ListFooterMaybeError error={error} onRetry={onRetry} />
       ) : !hasNextPage && showEndMessage ? (
-        renderEndMessage ? (
-          renderEndMessage()
-        ) : (
-          <Text style={[a.text_sm, t.atoms.text_contrast_low]}>
-            {endMessageText ?? <Trans>You have reached the end</Trans>}
-          </Text>
-        )
+        <Text style={[a.text_sm, t.atoms.text_contrast_low]}>
+          {endMessageText ?? <Trans>You have reached the end</Trans>}
+        </Text>
       ) : null}
     </View>
   )

src/components/MediaPreview.tsx

@@ -1,15 +1,19 @@
 import React from 'react'
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {Image} from 'expo-image'
-import {AppBskyFeedDefs} from '@atproto/api'
+import {
+  AppBskyEmbedExternal,
+  AppBskyEmbedImages,
+  AppBskyEmbedRecordWithMedia,
+  AppBskyEmbedVideo,
+} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 
-import {isTenorGifUri} from '#/lib/strings/embed-player'
+import {parseTenorGif} from '#/lib/strings/embed-player'
 import {atoms as a, useTheme} from '#/alf'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {Text} from '#/components/Typography'
 import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
-import * as bsky from '#/types/bsky'
 
 /**
  * Streamlined MediaPreview component which just handles images, gifs, and videos
@@ -18,17 +22,20 @@ export function Embed({
   embed,
   style,
 }: {
-  embed: AppBskyFeedDefs.PostView['embed']
+  embed?:
+    | AppBskyEmbedImages.View
+    | AppBskyEmbedRecordWithMedia.View
+    | AppBskyEmbedExternal.View
+    | AppBskyEmbedVideo.View
+    | {[k: string]: unknown}
   style?: StyleProp<ViewStyle>
 }) {
-  const e = bsky.post.parseEmbed(embed)
+  let media = AppBskyEmbedRecordWithMedia.isView(embed) ? embed.media : embed
 
-  if (!e) return null
-
-  if (e.type === 'images') {
+  if (AppBskyEmbedImages.isView(media)) {
     return (
       <Outer style={style}>
-        {e.view.images.map(image => (
+        {media.images.map(image => (
           <ImageItem
             key={image.thumb}
             thumbnail={image.thumb}
@@ -37,31 +44,30 @@ export function Embed({
         ))}
       </Outer>
     )
-  } else if (e.type === 'link') {
-    if (!e.view.external.thumb) return null
-    if (!isTenorGifUri(e.view.external.uri)) return null
+  } else if (AppBskyEmbedExternal.isView(media) && media.external.thumb) {
+    let url: URL | undefined
+    try {
+      url = new URL(media.external.uri)
+    } catch {}
+    if (url) {
+      const {success} = parseTenorGif(url)
+      if (success) {
+        return (
+          <Outer style={style}>
+            <GifItem
+              thumbnail={media.external.thumb}
+              alt={media.external.title}
+            />
+          </Outer>
+        )
+      }
+    }
+  } else if (AppBskyEmbedVideo.isView(media)) {
     return (
       <Outer style={style}>
-        <GifItem
-          thumbnail={e.view.external.thumb}
-          alt={e.view.external.title}
-        />
+        <VideoItem thumbnail={media.thumbnail} alt={media.alt} />
       </Outer>
     )
-  } else if (e.type === 'video') {
-    return (
-      <Outer style={style}>
-        <VideoItem thumbnail={e.view.thumbnail} alt={e.view.alt} />
-      </Outer>
-    )
-  } else if (
-    e.type === 'post_with_media' &&
-    // ignore further "nested" RecordWithMedia
-    e.media.type !== 'post_with_media' &&
-    // ignore any unknowns
-    e.media.view !== null
-  ) {
-    return <Embed embed={e.media.view} style={style} />
   }
 
   return null

src/components/Menu/context.tsx

@@ -2,9 +2,14 @@ import React from 'react'
 
 import type {ContextType, ItemContextType} from '#/components/Menu/types'
 
-export const Context = React.createContext<ContextType | null>(null)
+export const Context = React.createContext<ContextType>({
+  // @ts-ignore
+  control: null,
+})
 
-export const ItemContext = React.createContext<ItemContextType | null>(null)
+export const ItemContext = React.createContext<ItemContextType>({
+  disabled: false,
+})
 
 export function useMenuContext() {
   const context = React.useContext(Context)

src/components/Menu/index.tsx

@@ -30,13 +30,11 @@ export {
   useDialogControl as useMenuControl,
 } from '#/components/Dialog'
 
-export {useMenuContext}
-
 export function Root({
   children,
   control,
 }: React.PropsWithChildren<{
-  control?: Dialog.DialogControlProps
+  control?: Dialog.DialogOuterProps['control']
 }>) {
   const defaultControl = Dialog.useDialogControl()
   const context = React.useMemo<ContextType>(
@@ -49,12 +47,7 @@ export function Root({
   return <Context.Provider value={context}>{children}</Context.Provider>
 }
 
-export function Trigger({
-  children,
-  label,
-  role = 'button',
-  hint,
-}: TriggerProps) {
+export function Trigger({children, label, role = 'button'}: TriggerProps) {
   const context = useMenuContext()
   const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
   const {
@@ -72,13 +65,11 @@ export function Trigger({
       pressed,
     },
     props: {
-      ref: null,
       onPress: context.control.open,
       onFocus,
       onBlur,
       onPressIn,
       onPressOut,
-      accessibilityHint: hint,
       accessibilityLabel: label,
       accessibilityRole: role,
     },
@@ -102,7 +93,7 @@ export function Outer({
       <Dialog.Handle />
       {/* Re-wrap with context since Dialogs are portal-ed to root */}
       <Context.Provider value={context}>
-        <Dialog.ScrollableInner label={_(msg`Menu`)}>
+        <Dialog.ScrollableInner label={_(msg`Menu`)} style={[a.py_sm]}>
           <View style={[a.gap_lg]}>
             {children}
             {isNative && showCancel && <Cancel />}

src/components/Menu/index.web.tsx

@@ -4,7 +4,6 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
-import {useA11y} from '#/state/a11y'
 import {atoms as a, flatten, useTheme, web} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
@@ -26,8 +25,6 @@ import {
 import {Portal} from '#/components/Portal'
 import {Text} from '#/components/Typography'
 
-export {useMenuContext}
-
 export function useMenuControl(): Dialog.DialogControlProps {
   const id = React.useId()
   const [isOpen, setIsOpen] = React.useState(false)
@@ -52,7 +49,7 @@ export function Root({
   children,
   control,
 }: React.PropsWithChildren<{
-  control?: Dialog.DialogControlProps
+  control?: Dialog.DialogOuterProps['control']
 }>) {
   const {_} = useLingui()
   const defaultControl = useMenuControl()
@@ -113,12 +110,7 @@ const RadixTriggerPassThrough = React.forwardRef(
 )
 RadixTriggerPassThrough.displayName = 'RadixTriggerPassThrough'
 
-export function Trigger({
-  children,
-  label,
-  role = 'button',
-  hint,
-}: TriggerProps) {
+export function Trigger({children, label, role = 'button'}: TriggerProps) {
   const {control} = useMenuContext()
   const {
     state: hovered,
@@ -161,7 +153,6 @@ export function Trigger({
               onBlur: onBlur,
               onMouseEnter,
               onMouseLeave,
-              accessibilityHint: hint,
               accessibilityLabel: label,
               accessibilityRole: role,
             },
@@ -180,16 +171,10 @@ export function Outer({
   style?: StyleProp<ViewStyle>
 }>) {
   const t = useTheme()
-  const {reduceMotionEnabled} = useA11y()
 
   return (
     <DropdownMenu.Portal>
-      <DropdownMenu.Content
-        sideOffset={5}
-        collisionPadding={{left: 5, right: 5, bottom: 5}}
-        loop
-        aria-label="Test"
-        className="dropdown-menu-transform-origin dropdown-menu-constrain-size">
+      <DropdownMenu.Content sideOffset={5} loop aria-label="Test">
         <View
           style={[
             a.rounded_sm,
@@ -198,8 +183,6 @@ export function Outer({
             t.name === 'light' ? t.atoms.bg : t.atoms.bg_contrast_25,
             t.atoms.shadow_md,
             t.atoms.border_contrast_low,
-            a.overflow_auto,
-            !reduceMotionEnabled && a.zoom_fade_in,
             style,
           ]}>
           {children}
@@ -219,7 +202,7 @@ export function Outer({
   )
 }
 
-export function Item({children, label, onPress, style, ...rest}: ItemProps) {
+export function Item({children, label, onPress, ...rest}: ItemProps) {
   const t = useTheme()
   const {control} = useMenuContext()
   const {
@@ -265,7 +248,6 @@ export function Item({children, label, onPress, style, ...rest}: ItemProps) {
                 ? t.atoms.bg_contrast_25
                 : t.atoms.bg_contrast_50,
             ],
-          style,
         ])}
         {...web({
           onMouseEnter,
@@ -384,8 +366,9 @@ export function Divider() {
       style={flatten([
         a.my_xs,
         t.atoms.bg_contrast_100,
-        a.flex_shrink_0,
-        {height: 1},
+        {
+          height: 1,
+        },
       ])}
     />
   )