WIP quote embed hover

Right now both light mode and dark mode get light navigation bar, and
looks jarring in the dark modes.

This commit applies a more appropriate color before the UI thread
runs (in app config), as well as applying the current theme background
after the UI shell is mounted.

This should fix #3332.

Co-authored-by: Hailey <me@haileyok.com>

.eslintrc.js

@@ -13,10 +13,25 @@ module.exports = {
     'react',
     'lingui',
     'simple-import-sort',
+    'bsky-internal',
   ],
   rules: {
+    // Temporary until https://github.com/facebook/react-native/pull/43756 gets into a release.
+    'prettier/prettier': 0,
     'react/no-unescaped-entities': 0,
     'react-native/no-inline-styles': 0,
+    'bsky-internal/avoid-unwrapped-text': [
+      'error',
+      {
+        impliedTextComponents: ['H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'P'],
+        impliedTextProps: [],
+        suggestedTextWrappers: {
+          Button: 'ButtonText',
+          'ToggleButton.Button': 'ToggleButton.ButtonText',
+        },
+      },
+    ],
+    'bsky-internal/use-typed-gates': 'error',
     'simple-import-sort/imports': [
       'warn',
       {

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

@@ -8,6 +8,7 @@ on:
         type: choice
         description: Build profile to use
         options:
+          - testflight-android
           - production
 
 jobs:
@@ -59,7 +60,58 @@ jobs:
           echo "$json" > google-services.json
 
       - name: 🏗️ EAS Build
-        run: yarn use-build-number eas build -p android --profile production --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: 🚀 Deploy
-        run: eas submit -p android --non-interactive --path build.aab
+      - name: ✍️ Rename Testflight bundle
+        if: ${{ inputs.profile != 'production' }}
+        run: mv build.aab build.apk
+
+      - name: ⏰ Get a timestamp
+        id: timestamp
+        uses: nanzm/get-time-action@master
+        with:
+          format: 'MM-DD-HH-mm-ss'
+
+      - name: 🚀 Upload Production Artifact
+        id: upload-artifact-production
+        if: ${{ inputs.profile == 'production' }}
+        uses: actions/upload-artifact@v4
+        with:
+          retention-days: 30
+          compression-level: 6
+          name: build-${{ steps.timestamp.outputs.time }}.aab
+          path: build.aab
+
+      - name: 🚀 Upload Testflight Artifact
+        id: upload-artifact-testflight
+        if: ${{ inputs.profile != 'production' }}
+        uses: actions/upload-artifact@v4
+        with:
+          retention-days: 30
+          compression-level: 6
+          name: build-${{ steps.timestamp.outputs.time }}.apk
+          path: build.apk
+
+      - name: 🔔 Notify Slack of Production Build
+        if: ${{ inputs.profile == 'production' }}
+        uses: slackapi/slack-github-action@v1.25.0
+        with:
+          payload: |
+            {
+              "text": "Android build is ready for submission. This is a production build! Download the artifact here: ${{ steps.upload-artifact-production.outputs.artifact-url }}"
+            }
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_CLIENT_ALERT_WEBHOOK }}
+          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+
+      - name: 🔔 Notify Slack of Testflight Build
+        if: ${{ inputs.profile != 'production' }}
+        uses: slackapi/slack-github-action@v1.25.0
+        with:
+          payload: |
+            {
+              "text": "Android build is ready for testing. Download the artifact here: ${{ steps.upload-artifact-testflight.outputs.artifact-url }}"
+            }
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_CLIENT_ALERT_WEBHOOK }}
+          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK

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

@@ -2,14 +2,13 @@
 name: Build and Submit iOS
 
 on:
-  schedule:
-    - cron: '0 5 * * *'
   workflow_dispatch:
     inputs:
       profile:
         type: choice
         description: Build profile to use
         options:
+          - testflight
           - production
 
 jobs:
@@ -69,7 +68,7 @@ jobs:
           echo "${{ secrets.GOOGLE_SERVICES_TOKEN }}" > google-services.json
 
       - name: 🏗️ EAS Build
-        run: yarn use-build-number eas build -p ios --profile production --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

@@ -2,8 +2,17 @@
 name: Bundle and Deploy EAS Update
 
 on:
+  push:
+    branches:
+      - main
   workflow_dispatch:
     inputs:
+      channel:
+        type: choice
+        description: Deployment channel to use
+        options:
+          - testflight
+          - production
       runtimeVersion:
         type: string
         description: Runtime version (in x.x.x format) that this update is for
@@ -13,13 +22,64 @@ jobs:
   bundleDeploy:
     name: Bundle and Deploy EAS Update
     runs-on: ubuntu-latest
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event_name }}-${{ github.ref }}-deploy
+      cancel-in-progress: true
+    outputs:
+      fingerprint-is-different: ${{ steps.fingerprint-debug.outputs.fingerprint-is-different }}
+
     steps:
+      - name: Check for EXPO_TOKEN
+        run: >
+          if [ -z "${{ secrets.EXPO_TOKEN }}" ]; then
+            echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions"
+            exit 1
+          fi
+
+      # Validate the version if one is supplied. This should generally happen if the update is for a production client
       - name: 🧐 Validate version
+        if: ${{ inputs.runtimeVersion }}
         run: |
-          [[ "${{ github.event.inputs.runtimeVersion }}" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]] && echo "Version is valid" || exit 1
+          if [ -z "${{ inputs.runtimeVersion }}" ]; then
+            [[ "${{ inputs.runtimeVersion }}" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]] && echo "Version is valid" || exit 1
+          fi
 
       - name: ⬇️ Checkout
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: ⬇️ Get last successful deployment commit from the cache
+        id: get-base-commit
+        uses: actions/cache@v4
+        with:
+          path: last-successful-commit-hash.txt
+          key: last-successful-deployment-commit-${{ github.ref_name }}
+
+      - name: Add the last successful deployment commit to the output
+        id: last-successful-commit
+        run: echo base-commit=$(cat last-successful-commit-hash.txt) >> "$GITHUB_OUTPUT"
+
+      - name: ⬇️ Fetch commits from base branch
+        if: ${{ github.ref != 'refs/heads/main' }}
+        run: git fetch origin main:main --depth 100
+
+      # This should get the current production release's commit's hash to see if the update is compatible
+      - name: 🕵️ Get the base commit
+        id: base-commit
+        run: |
+          if [ -z "${{ inputs.channel == 'production' }}" ]; then
+            echo base-commit=$(git show-ref -s ${{ inputs.runtimeVersion }}) >> "$GITHUB_OUTPUT"
+          else
+            echo base-commit=${{ steps.last-successful-commit.base-commit }} >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: ✓ Make sure we found a base commit
+        run: |
+          if [ -z "${{ steps.base-commit.outputs.base-commit }}" && ${{ inputs.channel == 'production' }} ]; then
+            echo "Could not find a base commit for this release. Exiting."
+            exit 1
+          fi
 
       - name: 🔧 Setup Node
         uses: actions/setup-node@v4
@@ -30,13 +90,193 @@ jobs:
       - name: ⚙️ Install Dependencies
         run: yarn install
 
-      - name: 🪛 Install jq
-        uses: dcarbone/install-jq-action@v2
+      # Run the fingerprint
+      - name: 📷 Check fingerprint
+        id: fingerprint
+        uses: expo/expo-github-action/fingerprint@main
+        with:
+          previous-git-commit: ${{ steps.base-commit.outputs.base-commit }}
+
+      - name: 👀 Debug fingerprint
+        id: fingerprint-debug
+        run: |
+          echo "previousGitCommit=${{ steps.fingerprint.outputs.previous-git-commit }} currentGitCommit=${{ steps.fingerprint.outputs.current-git-commit }}"
+          echo "isPreviousFingerprintEmpty=${{ steps.fingerprint.outputs.previous-fingerprint == '' }}"
+          
+          fingerprintDiff='$(echo "${{ steps.fingerprint.outputs.fingerprint-diff }}")'
+          
+          if [[ $fingerprintDiff =~ "bareRncliAutolinking" || $fingerprintDiff =~ "expoAutolinkingAndroid" || $fingerprintDiff =~ "expoAutolinkingIos" ]]; then
+            echo fingerprint-is-different="true" >> "$GITHUB_OUTPUT"
+          else
+            echo fingerprint-is-different="false" >> "$GITHUB_OUTPUT"
+          fi
+
+      - name: Lint check
+        run: yarn lint
+
+      - name: Prettier check
+        run: yarn prettier --check .
+
+      - name: Check & compile i18n
+        run: yarn intl:build
+
+      - name: Type check
+        run: yarn typecheck
+
+      - name: 🔨 Setup EAS
+        uses: expo/expo-github-action@v8
+        if: ${{ steps.fingerprint-debug.outputs.fingerprint-is-different == 'false'}}
+        with:
+          expo-version: latest
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
 
       - name: ⛏️ Setup Expo
+        if: ${{ steps.fingerprint-debug.outputs.fingerprint-is-different == 'false'}}
         run: yarn global add eas-cli-local-build-plugin
 
-      - name: 🔤 Compile Translations
+      - name: 🪛 Setup jq
+        if: ${{ steps.fingerprint-debug.outputs.fingerprint-is-different == 'false'}}
+        uses: dcarbone/install-jq-action@v2
+
+      - name: ✏️ Write environment variables
+        if: ${{ steps.fingerprint-debug.outputs.fingerprint-is-different == 'false'}}
+        run: |
+          export json='${{ secrets.GOOGLE_SERVICES_TOKEN }}'
+          echo "${{ secrets.ENV_TOKEN }}" > .env
+          echo "$json" > google-services.json
+
+      - name: 🏗️ Create Bundle
+        if: ${{ steps.fingerprint-debug.outputs.fingerprint-is-different == 'false'}}
+        run: EXPO_PUBLIC_ENV="${{ inputs.channel || 'testflight' }}" yarn export
+
+      - name: 📦 Package Bundle and 🚀 Deploy
+        if: ${{ steps.fingerprint-debug.outputs.fingerprint-is-different == 'false'}}
+        run: yarn use-build-number bash scripts/bundleUpdate.sh
+        env:
+          DENIS_API_KEY: ${{ secrets.DENIS_API_KEY }}
+          RUNTIME_VERSION: ${{ inputs.runtimeVersion }}
+          CHANNEL_NAME: ${{ inputs.channel || 'testflight' }}
+
+      - name: Save successful deployment commit hash
+        run: echo ${{ steps.fingerprint.outputs.current-git-commit }} > last-successful-commit-hash.txt
+
+  # GitHub actions are horrible so let's just copy paste this in
+  buildIfNecessaryIOS:
+    name: Build and Submit iOS
+    runs-on: macos-14
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event_name }}-${{ github.ref }}-build-ios
+      cancel-in-progress: false
+    needs: [bundleDeploy]
+    # Gotta check if its NOT '[]' because any md5 hash in the outputs is detected as a possible secret and won't be
+    # available here
+    if: ${{ inputs.channel != 'production' && needs.bundleDeploy.outputs.fingerprint-is-different == 'true' }}
+    steps:
+      - name: Check for EXPO_TOKEN
+        run: >
+          if [ -z "${{ secrets.EXPO_TOKEN }}" ]; then
+            echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions"
+            exit 1
+          fi
+
+      - name: ⬇️ Checkout
+        uses: actions/checkout@v4
+
+      - name: 🔧 Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+
+      - name: 🔨 Setup EAS
+        uses: expo/expo-github-action@v8
+        with:
+          expo-version: latest
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+
+      - name: ⛏️ Setup EAS local builds
+        run: yarn global add eas-cli-local-build-plugin
+
+      - name: ⚙️ Install dependencies
+        run: yarn install
+
+      - name: ☕️ Setup Cocoapods
+        uses: maxim-lobanov/setup-cocoapods@v1
+        with:
+          version: 1.14.3
+
+      - name: 💾 Cache Pods
+        uses: actions/cache@v3
+        id: pods-cache
+        with:
+          path: ./ios/Pods
+          # We'll use the yarn.lock for our hash since we don't yet have a Podfile.lock. Pod versions will not
+          # change unless the yarn version changes as well.
+          key: ${{ runner.os }}-pods-${{ hashFiles('yarn.lock') }}
+
+      - name: 🔤 Compile translations
+        run: yarn intl:build
+
+      - name: ✏️ Write environment variables
+        run: |
+          echo "${{ secrets.ENV_TOKEN }}" > .env
+          echo "${{ secrets.GOOGLE_SERVICES_TOKEN }}" > google-services.json
+
+      - name: 🏗️ EAS Build
+        run: yarn use-build-number-with-bump eas build -p ios --profile testflight --local --output build.ipa --non-interactive
+
+      - name: 🚀 Deploy
+        run: eas submit -p ios --non-interactive --path build.ipa
+
+  buildIfNecessaryAndroid:
+    name: Build and Submit Android
+    runs-on: ubuntu-latest
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.event_name }}-${{ github.ref }}-build-android
+      cancel-in-progress: false
+    needs: [ bundleDeploy ]
+    # Gotta check if its NOT '[]' because any md5 hash in the outputs is detected as a possible secret and won't be
+    # available here
+    if: ${{ inputs.channel != 'production' && needs.bundleDeploy.outputs.fingerprint-is-different == 'true' }}
+
+    steps:
+      - name: Check for EXPO_TOKEN
+        run: >
+          if [ -z "${{ secrets.EXPO_TOKEN }}" ]; then
+            echo "You must provide an EXPO_TOKEN secret linked to this project's Expo account in this repo's secrets. Learn more: https://docs.expo.dev/eas-update/github-actions"
+            exit 1
+          fi
+
+      - name: ⬇️ Checkout
+        uses: actions/checkout@v4
+
+      - name: 🔧 Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+
+      - name: 🔨 Setup EAS
+        uses: expo/expo-github-action@v8
+        with:
+          expo-version: latest
+          eas-version: latest
+          token: ${{ secrets.EXPO_TOKEN }}
+
+      - name: ⛏️ Setup EAS local builds
+        run: yarn global add eas-cli-local-build-plugin
+
+      - uses: actions/setup-java@v4
+        with:
+          distribution: 'temurin'
+          java-version: '17'
+
+      - name: ⚙️ Install dependencies
+        run: yarn install
+
+      - name: 🔤 Compile translations
         run: yarn intl:build
 
       - name: ✏️ Write environment variables
@@ -45,11 +285,31 @@ jobs:
           echo "${{ secrets.ENV_TOKEN }}" > .env
           echo "$json" > google-services.json
 
-      - name: 🏗️ Create Bundle
-        run: yarn export
+      - name: 🏗️ EAS Build
+        run: yarn use-build-number-with-bump eas build -p android --profile testflight-android --local --output build.apk --non-interactive
 
-      - name: 📦 Package Bundle and 🚀 Deploy
-        run: yarn make-deploy-bundle
+      - name: ⏰ Get a timestamp
+        id: timestamp
+        uses: nanzm/get-time-action@master
+        with:
+          format: 'MM-DD-HH-mm-ss'
+
+      - name: 🚀 Upload Artifact
+        id: upload-artifact
+        uses: actions/upload-artifact@v4
+        with:
+          retention-days: 30
+          compression-level: 0
+          name: build-${{ steps.timestamp.outputs.time }}.apk
+          path: build.apk
+
+      - name: 🔔 Notify Slack
+        uses: slackapi/slack-github-action@v1.25.0
+        with:
+          payload: |
+            {
+              "text": "Android build is ready for testing. Download the artifact here: ${{ steps.upload-artifact.outputs.artifact-url }}"
+            }
         env:
-          DENIS_API_KEY: ${{ secrets.DENIS_API_KEY }}
-          RUNTIME_VERSION: ${{ github.event.inputs.runtimeVersion }}
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_CLIENT_ALERT_WEBHOOK }}
+          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK

.github/workflows/lint.yml

@@ -24,6 +24,8 @@ jobs:
           attempt_delay: 2000
       - name: Lint check
         run: yarn lint
+      - name: Prettier check
+        run: yarn prettier --check .
       - name: Check & compile i18n
         run: yarn intl:build
       - name: Type check

.github/workflows/pull-request-commit.yml

@@ -1,4 +1,4 @@
-# Credit https://github.com/expo/expo
+# Credit for fingerprint action https://github.com/expo/expo
 # https://github.com/expo/expo/blob/main/.github/workflows/pr-labeler.yml
 ---
 name: PR labeler
@@ -13,17 +13,91 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event_name }}-${{ github.ref }}
   cancel-in-progress: true
 
+permissions:
+  pull-requests: write
+  actions: write
+  contents: read
+
 jobs:
+  webpack-analyzer:
+    runs-on: ubuntu-22.04
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository }}
+    steps:
+      - name: ⬇️ Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: 🔧 Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+
+      - name: Ensure tracking relevant branches and checkout base
+        run: |
+          git checkout ${{ github.head_ref }}
+          git checkout ${{ github.base_ref }}
+
+      - name: Get the base commit
+        id: base-commit
+        run: echo base-commit=$(git log -n 1 ${{ github.base_ref }} --pretty=format:'%H') >> "$GITHUB_OUTPUT"
+
+      - name: Merge PR commit
+        run: |
+          # Have to set a git config for the merge to work
+          git config --global user.email "github-actions[bot]@users.noreply.github.com"
+          git config --global user.name "github-actions[bot]"
+          git merge --no-edit ${{ github.head_ref }}
+          yarn install
+
+      - name: 🔦 Generate stats file for PR
+        run: |
+          yarn generate-webpack-stats-file
+          mv stats.json ../stats-new.json
+
+      - name: ⬇️ Get base stats from cache
+        id: get-base-stats
+        uses: actions/cache@v4
+        with:
+          path: stats-base.json
+          key: stats-base-${{ steps.base-commit.outputs.base-commit }}
+
+      - name: Restore to base commit
+        if: ${{ !steps.get-base-stats.outputs.cache-hit }}
+        run: |
+          git reset HEAD~
+          git restore .
+
+      - name: 🔦 Generate stats file from base commit
+        if: ${{ !steps.get-base-stats.outputs.cache-hit }}
+        run: |
+          yarn install
+          yarn generate-webpack-stats-file
+          mv stats.json stats-base.json
+
+      - name: ％ Get diff
+        id: get-diff
+        uses: NejcZdovc/bundle-size-diff@v1
+        with:
+          base_path: 'stats-base.json'
+          pr_path: '../stats-new.json'
+          excluded_assets: '(.+).chunk.js|(.+).js.map|(.+).json|(.+).png'
+
+      - name: 💬 Drop a comment
+        uses: marocchino/sticky-pull-request-comment@v2
+        with:
+          header: bundle-diff
+          message: |
+            | Old size | New size | Diff                  |
+            |----------|----------|-----------------------|
+            | ${{ steps.get-diff.outputs.base_file_string }} | ${{ steps.get-diff.outputs.pr_file_string }} | ${{ steps.get-diff.outputs.diff_file_string }} (${{ steps.get-diff.outputs.percent }}%) |
+            ---
+
   test-suite-fingerprint:
     runs-on: ubuntu-22.04
     if: ${{ github.event.pull_request.head.repo.full_name == github.repository || github.event_name == 'push' }}
-    # REQUIRED: limit concurrency when pushing main(default) branch to prevent conflict for this action to update its fingerprint database
     concurrency: fingerprint-${{ github.event_name != 'pull_request' && 'main' || github.run_id }}
-    permissions:
-      # REQUIRED: Allow comments of PRs
-      pull-requests: write
-      # REQUIRED: Allow updating fingerprint in acton caches
-      actions: write
     steps:
       - name: ⬇️ Checkout
         uses: actions/checkout@v4
@@ -45,9 +119,7 @@ jobs:
 
       - name: Get the base commit
         id: base-commit
-        run: |
-          # Since we limit this pr-labeler workflow only triggered from limited paths, we should use custom base commit
-          echo base-commit=$(git log -n 1 main --pretty=format:'%H') >> "$GITHUB_OUTPUT"
+        run: echo base-commit=$(git log -n 1 main --pretty=format:'%H') >> "$GITHUB_OUTPUT"
 
       - name: 📷 Check fingerprint
         id: fingerprint
@@ -60,126 +132,28 @@ jobs:
           echo "previousGitCommit=${{ steps.fingerprint.outputs.previous-git-commit }} currentGitCommit=${{ steps.fingerprint.outputs.current-git-commit }}"
           echo "isPreviousFingerprintEmpty=${{ steps.fingerprint.outputs.previous-fingerprint == '' }}"
 
-      - name: 🏷️ Labeling PR
-        uses: actions/github-script@v6
-        if: ${{ github.event_name == 'pull_request' && steps.fingerprint.outputs.fingerprint-diff == '[]' }}
-        with:
-          script: |
-            try {
-              await github.rest.issues.removeLabel({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                name: ['bot: fingerprint changed']
-              })
-            } catch (e) {
-              if (e.status != 404) {
-                throw e;
-              }
-            }
-            github.rest.issues.addLabels({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              labels: ['bot: fingerprint compatible']
-            })
-
-      - name: 🏷️ Labeling PR
-        uses: actions/github-script@v6
+      - name: 💬 Drop a comment
+        uses: marocchino/sticky-pull-request-comment@v2
         if: ${{ github.event_name == 'pull_request' && steps.fingerprint.outputs.fingerprint-diff != '[]' }}
         with:
-          script: |
-            try {
-              await github.rest.issues.removeLabel({
-                issue_number: context.issue.number,
-                owner: context.repo.owner,
-                repo: context.repo.repo,
-                name: ['bot: fingerprint compatible']
-              })
-            } catch (e) {
-              if (e.status != 404) {
-                throw e;
-              }
-            }
-            github.rest.issues.addLabels({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              labels: ['bot: fingerprint changed']
-            })
-
-      - name: 🔍 Find old comment if it exists
-        uses: peter-evans/find-comment@v2
-        if: ${{ github.event_name == 'pull_request' }}
-        id: old_comment
-        with:
-          issue-number: ${{ github.event.pull_request.number }}
-          comment-author: 'github-actions[bot]'
-          body-includes: <!-- pr-labeler comment -->
-
-      - name: 💬 Add comment with fingerprint
-        if: ${{ github.event_name == 'pull_request' && steps.fingerprint.outputs.fingerprint-diff != '[]' && steps.old_comment.outputs.comment-id == '' }}
-        uses: actions/github-script@v6
-        with:
-          script: |
-            const diff = JSON.stringify(${{ steps.fingerprint.outputs.fingerprint-diff}}, null, 2);
-            const body = `<!-- pr-labeler comment -->
+          header: fingerprint-diff
+          message: |
             The Pull Request introduced fingerprint changes against the base commit: ${{ steps.fingerprint.outputs.previous-git-commit }}
             <details><summary>Fingerprint diff</summary>
 
-            \`\`\`json
-            ${diff}
-            \`\`\`
+            ```json
+            ${{ steps.fingerprint.outputs.fingerprint-diff }}
+            ```
 
             </details>
 
             ---
             *Generated by [PR labeler](https://github.com/expo/expo/actions/workflows/pr-labeler.yml) 🤖*
-            `;
 
-            github.rest.issues.createComment({
-              issue_number: context.issue.number,
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: body,
-            });
-
-      - name: 💬 Update comment with fingerprint
-        if: ${{ github.event_name == 'pull_request' && steps.fingerprint.outputs.fingerprint-diff != '[]' && steps.old_comment.outputs.comment-id != '' }}
-        uses: actions/github-script@v6
+      - name: 💬 Delete comment
+        uses: marocchino/sticky-pull-request-comment@v2
+        if: ${{ github.event_name == 'pull_request' && steps.fingerprint.outputs.fingerprint-diff == '[]' }}
         with:
-          script: |
-            const diff = JSON.stringify(${{ steps.fingerprint.outputs.fingerprint-diff}}, null, 2);
-            const body = `<!-- pr-labeler comment -->
-            The Pull Request introduced fingerprint changes against the base commit: ${{ steps.fingerprint.outputs.previous-git-commit }}
-            <details><summary>Fingerprint diff</summary>
+          header: fingerprint-diff
+          delete: true
 
-            \`\`\`json
-            ${diff}
-            \`\`\`
-
-            </details>
-
-            ---
-            *Generated by [PR labeler](https://github.com/expo/expo/actions/workflows/pr-labeler.yml) 🤖*
-            `;
-
-            github.rest.issues.updateComment({
-              issue_number: context.issue.number,
-              comment_id: '${{ steps.old_comment.outputs.comment-id }}',
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              body: body,
-            });
-
-      - name: 💬 Delete comment with fingerprint
-        if: ${{ github.event_name == 'pull_request' && steps.fingerprint.outputs.fingerprint-diff == '[]' && steps.old_comment.outputs.comment-id != '' }}
-        uses: actions/github-script@v6
-        with:
-          script: |
-            github.rest.issues.deleteComment({
-              issue_number: context.issue.number,
-              comment_id: '${{ steps.old_comment.outputs.comment-id }}',
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-            });

.gitignore

@@ -18,7 +18,6 @@ xcuserdata
 *.moved-aside
 DerivedData
 *.hmap
-*.ipa
 *.xcuserstate
 
 # Android/IntelliJ
@@ -78,6 +77,7 @@ dist/
 *.mobileprovision
 *.orig.*
 web-build/
+stats.json
 
 # Temporary files created by Metro to check the health of the file watcher
 .metro-health-check*
@@ -104,6 +104,14 @@ google-services.json
 # Performance results (Flashlight)
 .perf/
 
+# ESLint
+.eslintcache
+
 # i18n
 src/locale/locales/_build/
 src/locale/locales/**/*.js
+
+# local builds
+*.apk
+*.aab
+*.ipa

.prettierignore

@@ -1,12 +1,14 @@
-ios
-android
-src/third-party
-src/app.json
-public
-/bskyweb/templates
-/dist/
-/.watchmanconfig
-/app.json
+# Ignore everything except JS-ey code.
+# Based on https://stackoverflow.com/a/70715829/458193
+*
+!**/*.js
+!**/*.jsx
+!**/*.ts
+!**/*.tsx
+!*/
 
-web/index.html
-web-build/*
+# More specific ignores go below.
+.expo
+android
+ios
+src/locale/locales

__e2e__/mock-server.ts

@@ -1,5 +1,6 @@
 import {createServer as createHTTPServer} from 'node:http'
 import {parse} from 'node:url'
+
 import {createServer, TestPDS} from '../jest/test-pds'
 
 async function main() {
@@ -14,8 +15,7 @@ async function main() {
       await server?.close()
       console.log('Starting new server')
       const inviteRequired = url?.query && 'invite' in url.query
-      const phoneRequired = url?.query && 'phone' in url.query
-      server = await createServer({inviteRequired, phoneRequired})
+      server = await createServer({inviteRequired})
       console.log('Listening at', server.pdsUrl)
       if (url?.query) {
         if ('users' in url.query) {

__e2e__/tests/home-screen.test.ts

@@ -1,8 +1,9 @@
 /* eslint-env detox/detox */
 
-import {describe, beforeAll, it} from '@jest/globals'
+import {beforeAll, describe, it} from '@jest/globals'
 import {expect} from 'detox'
-import {openApp, loginAsAlice, createServer} from '../util'
+
+import {createServer, loginAsAlice, openApp} from '../util'
 
 describe('Home screen', () => {
   beforeAll(async () => {
@@ -68,19 +69,16 @@ describe('Home screen', () => {
     ).not.toExist()
   })
 
-  it('Can report posts', async () => {
-    const carlaPosts = by.id('feedItem-by-carla.test')
-    await element(by.id('postDropdownBtn').withAncestor(carlaPosts))
-      .atIndex(0)
-      .tap()
-    await element(by.text('Report post')).tap()
-    await expect(element(by.id('reportModal'))).toBeVisible()
-    await element(
-      by.id('reportReasonRadios-com.atproto.moderation.defs#reasonSpam'),
-    ).tap()
-    await element(by.id('sendReportBtn')).tap()
-    await expect(element(by.id('reportModal'))).not.toBeVisible()
-  })
+  // TODO skipping because the test env PDS isnt setup correctly to handle the report -prf
+  // it('Can report posts', async () => {
+  //   const carlaPosts = by.id('feedItem-by-carla.test')
+  //   await element(by.id('postDropdownBtn').withAncestor(carlaPosts))
+  //     .atIndex(0)
+  //     .tap()
+  //   await element(by.text('Report post')).tap()
+  //   await element(by.id('com.atproto.moderation.defs#reasonSpam')).tap()
+  //   await element(by.id('sendReportBtn')).tap()
+  // })
 
   it('Can swipe between feeds', async () => {
     await element(by.id('homeScreen')).swipe('left', 'fast', 0.75)

__e2e__/tests/invite-codes.test.skip.ts

@@ -1,8 +1,9 @@
 /* eslint-env detox/detox */
 
-import {describe, beforeAll, it} from '@jest/globals'
+import {beforeAll, describe, it} from '@jest/globals'
 import {expect} from 'detox'
-import {openApp, loginAsAlice, createServer} from '../util'
+
+import {createServer, loginAsAlice, openApp} from '../util'
 
 describe('invite-codes', () => {
   let service: string

__e2e__/tests/invites-and-text-verification.test.skip.ts

@@ -1,52 +0,0 @@
-/* eslint-env detox/detox */
-
-import {describe, beforeAll, it} from '@jest/globals'
-import {expect} from 'detox'
-import {openApp, loginAsAlice, createServer} from '../util'
-
-describe('invite-codes', () => {
-  let service: string
-  let inviteCode = ''
-  beforeAll(async () => {
-    service = await createServer('?users&invite&phone')
-    await openApp({permissions: {notifications: 'YES'}})
-  })
-
-  it('I can fetch invite codes', async () => {
-    await loginAsAlice()
-    await element(by.id('e2eOpenInviteCodesModal')).tap()
-    await expect(element(by.id('inviteCodesModal'))).toBeVisible()
-    const attrs = await element(by.id('inviteCode-0-code')).getAttributes()
-    inviteCode = attrs.text
-    await element(by.id('closeBtn')).tap()
-    await element(by.id('e2eSignOut')).tap()
-  })
-
-  it('I can create a new account with the invite code', async () => {
-    await element(by.id('e2eOpenLoggedOutView')).tap()
-    await element(by.id('createAccountButton')).tap()
-    await device.takeScreenshot('1- opened create account screen')
-    await element(by.id('selectServiceButton')).tap()
-    await device.takeScreenshot('2- selected other server')
-    await element(by.id('customSelectBtn')).tap()
-    await element(by.id('customServerTextInput')).typeText(service)
-    await element(by.id('customServerTextInput')).tapReturnKey()
-    await element(by.id('doneBtn')).tap()
-    await device.takeScreenshot('3- input test server URL')
-    await element(by.id('inviteCodeInput')).typeText(inviteCode)
-    await element(by.id('emailInput')).typeText('example@test.com')
-    await element(by.id('passwordInput')).typeText('hunter2')
-    await device.takeScreenshot('4- entered account details')
-    await element(by.id('nextBtn')).tap()
-    await element(by.id('phoneInput')).typeText('2345551234')
-    await element(by.id('requestCodeBtn')).tap()
-    await device.takeScreenshot('5- requested code')
-    await element(by.id('codeInput')).typeText('000000')
-    await device.takeScreenshot('6- entered code')
-    await element(by.id('nextBtn')).tap()
-    await element(by.id('handleInput')).typeText('e2e-test')
-    await device.takeScreenshot('7- entered handle')
-    await element(by.id('nextBtn')).tap()
-    await expect(element(by.id('onboardingInterests'))).toBeVisible()
-  })
-})

__e2e__/tests/profile-screen.test.ts

@@ -1,8 +1,9 @@
 /* eslint-env detox/detox */
 
-import {describe, beforeAll, it} from '@jest/globals'
+import {beforeAll, describe, it} from '@jest/globals'
 import {expect} from 'detox'
-import {openApp, loginAsAlice, createServer, sleep} from '../util'
+
+import {createServer, loginAsAlice, openApp, sleep} from '../util'
 
 describe('Profile screen', () => {
   beforeAll(async () => {
@@ -124,16 +125,17 @@ describe('Profile screen', () => {
     await expect(element(by.id('profileHeaderAlert'))).not.toExist()
   })
 
-  it('Can report another user', async () => {
-    await element(by.id('profileHeaderDropdownBtn')).tap()
-    await element(by.text('Report Account')).tap()
-    await expect(element(by.id('reportModal'))).toBeVisible()
-    await element(
-      by.id('reportReasonRadios-com.atproto.moderation.defs#reasonSpam'),
-    ).tap()
-    await element(by.id('sendReportBtn')).tap()
-    await expect(element(by.id('reportModal'))).not.toBeVisible()
-  })
+  // TODO skipping because the test env PDS isnt setup correctly to handle the report -prf
+  // it('Can report another user', async () => {
+  //   await element(by.id('profileHeaderDropdownBtn')).tap()
+  //   await element(by.text('Report Account')).tap()
+  //   await expect(element(by.id('reportModal'))).toBeVisible()
+  //   await element(
+  //     by.id('reportReasonRadios-com.atproto.moderation.defs#reasonSpam'),
+  //   ).tap()
+  //   await element(by.id('sendReportBtn')).tap()
+  //   await expect(element(by.id('reportModal'))).not.toBeVisible()
+  // })
 
   it('Can like posts', async () => {
     await element(by.id('postsFeed-flatlist')).swipe(
@@ -179,15 +181,16 @@ describe('Profile screen', () => {
     ).not.toExist()
   })
 
-  it('Can report posts', async () => {
-    const posts = by.id('feedItem-by-bob.test')
-    await element(by.id('postDropdownBtn').withAncestor(posts)).atIndex(0).tap()
-    await element(by.text('Report post')).tap()
-    await expect(element(by.id('reportModal'))).toBeVisible()
-    await element(
-      by.id('reportReasonRadios-com.atproto.moderation.defs#reasonSpam'),
-    ).tap()
-    await element(by.id('sendReportBtn')).tap()
-    await expect(element(by.id('reportModal'))).not.toBeVisible()
-  })
+  // TODO skipping because the test env PDS isnt setup correctly to handle the report -prf
+  // it('Can report posts', async () => {
+  //   const posts = by.id('feedItem-by-bob.test')
+  //   await element(by.id('postDropdownBtn').withAncestor(posts)).atIndex(0).tap()
+  //   await element(by.text('Report post')).tap()
+  //   await expect(element(by.id('reportModal'))).toBeVisible()
+  //   await element(
+  //     by.id('reportReasonRadios-com.atproto.moderation.defs#reasonSpam'),
+  //   ).tap()
+  //   await element(by.id('sendReportBtn')).tap()
+  //   await expect(element(by.id('reportModal'))).not.toBeVisible()
+  // })
 })

__e2e__/tests/text-verification.test.skip.ts

@@ -1,83 +0,0 @@
-/* eslint-env detox/detox */
-
-import {describe, beforeAll, it} from '@jest/globals'
-import {expect} from 'detox'
-import {openApp, createServer} from '../util'
-
-describe('Create account', () => {
-  let service: string
-  beforeAll(async () => {
-    service = await createServer('?phone')
-    await openApp({permissions: {notifications: 'YES'}})
-  })
-
-  it('I can create a new account with text verification', async () => {
-    console.log('SERVICE IS', service)
-    await element(by.id('e2eOpenLoggedOutView')).tap()
-
-    await element(by.id('createAccountButton')).tap()
-    await device.takeScreenshot('1- opened create account screen')
-    await element(by.id('selectServiceButton')).tap()
-    await device.takeScreenshot('2- selected other server')
-    await element(by.id('customSelectBtn')).tap()
-    await element(by.id('customServerTextInput')).typeText(service)
-    await element(by.id('customServerTextInput')).tapReturnKey()
-    await element(by.id('doneBtn')).tap()
-    await device.takeScreenshot('3- input test server URL')
-    await element(by.id('emailInput')).typeText('text-verification@test.com')
-    await element(by.id('passwordInput')).typeText('hunter2')
-    await device.takeScreenshot('4- entered account details')
-    await element(by.id('nextBtn')).tap()
-
-    await element(by.id('handleInput')).typeText('text-verification-test')
-    await device.takeScreenshot('5- entered handle')
-    await element(by.id('nextBtn')).tap()
-
-    await element(by.id('phoneInput')).typeText('8042221111')
-    await element(by.id('requestCodeBtn')).tap()
-    await device.takeScreenshot('6- requested code')
-
-    await element(by.id('codeInput')).typeText('000000')
-    await device.takeScreenshot('7- entered code')
-    await element(by.id('nextBtn')).tap()
-
-    await element(by.id('nextBtn')).tap()
-
-    await expect(element(by.id('onboardingInterests'))).toBeVisible()
-  })
-
-  it('failed text verification correctly goes back to the code input screen', async () => {
-    await element(by.id('e2eSignOut')).tap()
-    await element(by.id('e2eOpenLoggedOutView')).tap()
-
-    await element(by.id('createAccountButton')).tap()
-    await device.takeScreenshot('1- opened create account screen')
-    await element(by.id('selectServiceButton')).tap()
-    await device.takeScreenshot('2- selected other server')
-    await element(by.id('customSelectBtn')).tap()
-    await element(by.id('customServerTextInput')).typeText(service)
-    await element(by.id('customServerTextInput')).tapReturnKey()
-    await element(by.id('doneBtn')).tap()
-    await device.takeScreenshot('3- input test server URL')
-    await element(by.id('emailInput')).typeText('text-verification2@test.com')
-    await element(by.id('passwordInput')).typeText('hunter2')
-    await device.takeScreenshot('4- entered account details')
-    await element(by.id('nextBtn')).tap()
-
-    await element(by.id('phoneInput')).typeText('8042221111')
-    await element(by.id('requestCodeBtn')).tap()
-    await device.takeScreenshot('5- requested code')
-
-    await element(by.id('codeInput')).typeText('111111')
-    await device.takeScreenshot('6- entered code')
-    await element(by.id('nextBtn')).tap()
-
-    await element(by.id('handleInput')).typeText('text-verification-test2')
-    await device.takeScreenshot('7- entered handle')
-
-    await element(by.id('nextBtn')).tap()
-
-    await expect(element(by.id('codeInput'))).toBeVisible()
-    await device.takeScreenshot('8- got error')
-  })
-})

__e2e__/tests/thread-screen.test.ts

@@ -1,8 +1,9 @@
 /* eslint-env detox/detox */
 
-import {describe, beforeAll, it} from '@jest/globals'
+import {beforeAll, describe, it} from '@jest/globals'
 import {expect} from 'detox'
-import {openApp, loginAsAlice, createServer} from '../util'
+
+import {createServer, loginAsAlice, openApp} from '../util'
 
 describe('Thread screen', () => {
   beforeAll(async () => {
@@ -102,27 +103,29 @@ describe('Thread screen', () => {
     ).not.toExist()
   })
 
-  it('Can report the root post', async () => {
-    const post = by.id('postThreadItem-by-bob.test')
-    await element(by.id('postDropdownBtn').withAncestor(post)).atIndex(0).tap()
-    await element(by.text('Report post')).tap()
-    await expect(element(by.id('reportModal'))).toBeVisible()
-    await element(
-      by.id('reportReasonRadios-com.atproto.moderation.defs#reasonSpam'),
-    ).tap()
-    await element(by.id('sendReportBtn')).tap()
-    await expect(element(by.id('reportModal'))).not.toBeVisible()
-  })
+  // TODO skipping because the test env PDS isnt setup correctly to handle the report -prf
+  // it('Can report the root post', async () => {
+  //   const post = by.id('postThreadItem-by-bob.test')
+  //   await element(by.id('postDropdownBtn').withAncestor(post)).atIndex(0).tap()
+  //   await element(by.text('Report post')).tap()
+  //   await expect(element(by.id('reportModal'))).toBeVisible()
+  //   await element(
+  //     by.id('reportReasonRadios-com.atproto.moderation.defs#reasonSpam'),
+  //   ).tap()
+  //   await element(by.id('sendReportBtn')).tap()
+  //   await expect(element(by.id('reportModal'))).not.toBeVisible()
+  // })
 
-  it('Can report a reply post', async () => {
-    const post = by.id('postThreadItem-by-carla.test')
-    await element(by.id('postDropdownBtn').withAncestor(post)).atIndex(0).tap()
-    await element(by.text('Report post')).tap()
-    await expect(element(by.id('reportModal'))).toBeVisible()
-    await element(
-      by.id('reportReasonRadios-com.atproto.moderation.defs#reasonSpam'),
-    ).tap()
-    await element(by.id('sendReportBtn')).tap()
-    await expect(element(by.id('reportModal'))).not.toBeVisible()
-  })
+  // TODO skipping because the test env PDS isnt setup correctly to handle the report -prf
+  // it('Can report a reply post', async () => {
+  //   const post = by.id('postThreadItem-by-carla.test')
+  //   await element(by.id('postDropdownBtn').withAncestor(post)).atIndex(0).tap()
+  //   await element(by.text('Report post')).tap()
+  //   await expect(element(by.id('reportModal'))).toBeVisible()
+  //   await element(
+  //     by.id('reportReasonRadios-com.atproto.moderation.defs#reasonSpam'),
+  //   ).tap()
+  //   await element(by.id('sendReportBtn')).tap()
+  //   await expect(element(by.id('reportModal'))).not.toBeVisible()
+  // })
 })

app.config.js

@@ -41,6 +41,15 @@ module.exports = function (config) {
       : process.env.BSKY_IOS_BUILD_NUMBER
 
   const IS_DEV = process.env.EXPO_PUBLIC_ENV === 'development'
+  const IS_TESTFLIGHT = process.env.EXPO_PUBLIC_ENV === 'testflight'
+  const IS_PRODUCTION = process.env.EXPO_PUBLIC_ENV === 'production'
+
+  const UPDATES_CHANNEL = IS_TESTFLIGHT
+    ? 'testflight'
+    : IS_PRODUCTION
+    ? 'production'
+    : undefined
+  const UPDATES_ENABLED = !!UPDATES_CHANNEL
 
   return {
     expo: {
@@ -86,6 +95,11 @@ module.exports = function (config) {
         barStyle: 'light-content',
         backgroundColor: '#00000000',
       },
+      // Dark nav bar in light mode is better than light nav bar in dark mode
+      androidNavigationBar: {
+        barStyle: 'light-content',
+        backgroundColor: DARK_SPLASH_CONFIG_ANDROID.backgroundColor,
+      },
       android: {
         icon: './assets/icon.png',
         adaptiveIcon: {
@@ -122,10 +136,22 @@ module.exports = function (config) {
         favicon: './assets/favicon.png',
       },
       updates: {
-        enabled: true,
-        fallbackToCacheTimeout: 1000,
-        url: 'https://u.expo.dev/55bd077a-d905-4184-9c7f-94789ba0f302',
+        url: 'https://updates.bsky.app/manifest',
+        enabled: UPDATES_ENABLED,
+        fallbackToCacheTimeout: 30000,
+        codeSigningCertificate: UPDATES_ENABLED
+          ? './code-signing/certificate.pem'
+          : undefined,
+        codeSigningMetadata: UPDATES_ENABLED
+          ? {
+              keyid: 'main',
+              alg: 'rsa-v1_5-sha256',
+            }
+          : undefined,
+        checkAutomatically: 'NEVER',
+        channel: UPDATES_CHANNEL,
       },
+      assetBundlePatterns: ['**/*'],
       plugins: [
         'expo-localization',
         Boolean(process.env.SENTRY_AUTH_TOKEN) && 'sentry-expo',
@@ -145,12 +171,6 @@ module.exports = function (config) {
             },
           },
         ],
-        [
-          'expo-updates',
-          {
-            username: 'blueskysocial',
-          },
-        ],
         [
           'expo-notifications',
           {

bskyembed/.eslintrc

@@ -0,0 +1,20 @@
+{
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "plugins": ["@typescript-eslint", "simple-import-sort"],
+  "extends": [
+    "eslint:recommended",
+    "preact",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking"
+  ],
+  "rules": {
+    "simple-import-sort/imports": "warn",
+    "simple-import-sort/exports": "warn"
+  },
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaVersion": "latest",
+    "project": "./tsconfig.json"
+  }
+}

bskyembed/.gitignore

@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local

bskyembed/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vite App</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+</html>

bskyembed/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "bskyembed",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx src"
+  },
+  "dependencies": {
+    "preact": "^10.4.8"
+  },
+  "devDependencies": {
+    "@prefresh/vite": "^1.2.1",
+    "eslint": "^8.19.0",
+    "eslint-config-preact": "^1.3.0",
+    "eslint-plugin-simple-import-sort": "^12.0.0",
+    "typescript": "^4.0.5",
+    "vite": "^1.0.0-rc.13",
+    "vite-tsconfig-paths": "^4.3.2"
+  }
+}

bskyembed/src/app.tsx

@@ -0,0 +1,18 @@
+import {Fragment, h} from 'preact'
+
+export function App() {
+  return (
+    <>
+      <p>Hello Vite + Preact!</p>
+      <p>
+        <a
+          className="link"
+          href="https://preactjs.com/"
+          target="_blank"
+          rel="noopener noreferrer">
+          Learn Preact
+        </a>
+      </p>
+    </>
+  )
+}

bskyembed/src/index.css

@@ -0,0 +1,29 @@
+html, body {
+	height: 100%;
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	background: #FAFAFA;
+	font-family: 'Helvetica Neue', arial, sans-serif;
+	font-weight: 400;
+	color: #444;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+#app {
+  height: 100%;
+  text-align: center;
+  background-color: #673ab8;
+  color: #fff;
+  font-size: 1.5em;
+  padding-top: 100px;
+}
+
+.link {
+  color: #fff;
+}

bskyembed/src/main.tsx

@@ -0,0 +1,9 @@
+import './index.css'
+
+import {h, render} from 'preact'
+
+import {App} from './app'
+
+const root = document.getElementById('app')
+if (!root) throw new Error('No root element')
+render(<App />, root)

bskyembed/tsconfig.json

@@ -0,0 +1,23 @@
+
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": [],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
+  },
+  "include": ["src"]
+}

bskyembed/vite.config.ts

@@ -0,0 +1,18 @@
+import {resolve} from 'node:path'
+
+// @ts-expect-error - not important
+import preactRefresh from '@prefresh/vite'
+import type {UserConfig} from 'vite'
+import paths from 'vite-tsconfig-paths'
+
+const config: UserConfig = {
+  jsx: {
+    factory: 'h',
+    fragment: 'Fragment',
+  },
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+  plugins: [preactRefresh(), paths()],
+  assetsDir: 'static/embed/assets',
+}
+
+export default config

bskyweb/templates/base.html

@@ -220,6 +220,21 @@
     .nativeDropdown-item:focus {
       outline: none;
     }
+
+    /* Spinner component */
+    @keyframes rotate {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    .rotate-500ms {
+      position: absolute;
+      inset:0;
+      animation: rotate 500ms linear infinite;
+    }
   </style>
   {% include "scripts.html" %}
   <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">

docs/build.md

@@ -83,11 +83,10 @@ To run the build with Go, use staging credentials, your own, or any other accoun
 ```
 cd social-app
 yarn && yarn build-web
-cp ./web-build/static/js/*.* bskyweb/static/js/
 cd bskyweb/
 go mod tidy
 go build -v -tags timetzdata -o bskyweb ./cmd/bskyweb
-./bskyweb serve --pds-host=https://staging.bsky.dev --handle=<HANDLE> --password=<PASSWORD>
+./bskyweb serve --appview-host=https://public.api.bsky.app
 ```
 
 On build success, access the application at [http://localhost:8100/](http://localhost:8100/). Subsequent changes require re-running the above steps in order to be reflected.

eas.json

@@ -16,14 +16,20 @@
       "ios": {
         "simulator": true,
         "resourceClass": "large"
+      },
+      "env": {
+        "EXPO_PUBLIC_ENV": "production"
       }
     },
     "preview": {
       "extends": "base",
       "distribution": "internal",
-      "channel": "preview",
+      "channel": "production",
       "ios": {
         "resourceClass": "large"
+      },
+      "env": {
+        "EXPO_PUBLIC_ENV": "production"
       }
     },
     "production": {
@@ -35,9 +41,12 @@
       "android": {
         "autoIncrement": true
       },
-      "channel": "production"
+      "channel": "production",
+      "env": {
+        "EXPO_PUBLIC_ENV": "production"
+      }
     },
-    "github": {
+    "testflight": {
       "extends": "base",
       "ios": {
         "autoIncrement": true
@@ -45,7 +54,24 @@
       "android": {
         "autoIncrement": true
       },
-      "channel": "production"
+      "channel": "testflight",
+      "env": {
+        "EXPO_PUBLIC_ENV": "testflight"
+      }
+    },
+    "testflight-android": {
+      "extends": "base",
+      "distribution": "internal",
+      "ios": {
+        "autoIncrement": true
+      },
+      "android": {
+        "autoIncrement": true
+      },
+      "channel": "testflight",
+      "env": {
+        "EXPO_PUBLIC_ENV": "testflight"
+      }
     }
   },
   "submit": {

eslint/__tests__/avoid-unwrapped-text.test.js

@@ -0,0 +1,825 @@
+const {RuleTester} = require('eslint')
+const avoidUnwrappedText = require('../avoid-unwrapped-text')
+
+const ruleTester = new RuleTester({
+  parser: require.resolve('@typescript-eslint/parser'),
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 6,
+    sourceType: 'module',
+  },
+})
+
+describe('avoid-unwrapped-text', () => {
+  const tests = {
+    valid: [
+      {
+        code: `
+<Text>
+  foo
+</Text>
+        `,
+      },
+
+      {
+        code: `
+<Text>
+  <Trans>
+    foo
+  </Trans>
+</Text>
+        `,
+      },
+
+      {
+        code: `
+<Text>
+  <>
+    foo
+  </>
+</Text>
+        `,
+      },
+
+      {
+        code: `
+<Text>
+  {foo && <Trans>foo</Trans>}
+</Text>
+        `,
+      },
+
+      {
+        code: `
+<Text>
+  {foo ? <Trans>foo</Trans> : <Trans>bar</Trans>}
+</Text>
+        `,
+      },
+
+      {
+        code: `
+<Trans>
+  <Text>
+    foo
+  </Text>
+</Trans>
+        `,
+      },
+
+      {
+        code: `
+<Trans>
+  {foo && <Text>foo</Text>}
+</Trans>
+              `,
+      },
+
+      {
+        code: `
+<Trans>
+  {foo ? <Text>foo</Text> : <Text>bar</Text>}
+</Trans>
+              `,
+      },
+
+      {
+        code: `
+<CustomText>
+  foo
+</CustomText>
+        `,
+      },
+
+      {
+        code: `
+<CustomText>
+  <Trans>
+    foo
+  </Trans>
+</CustomText>
+        `,
+      },
+
+      {
+        code: `
+<Text>
+  {bar}
+</Text>
+        `,
+      },
+
+      {
+        code: `
+<View>
+  {bar}
+</View>
+        `,
+      },
+
+      {
+        code: `
+<Text>
+  foo {bar}
+</Text>
+        `,
+      },
+
+      {
+        code: `
+<View>
+  <Text>
+    foo
+  </Text>
+</View>
+        `,
+      },
+
+      {
+        code: `
+<View>
+  <Text>
+    {bar}
+  </Text>
+</View>
+        `,
+      },
+
+      {
+        code: `
+<View>
+  <Text>
+    foo {bar}
+  </Text>
+</View>
+        `,
+      },
+
+      {
+        code: `
+<View>
+  <CustomText>
+    foo
+  </CustomText>
+</View>
+        `,
+      },
+
+      {
+        code: `
+<View prop={
+  <Text>foo</Text>
+}>
+  <Bar />
+</View>
+        `,
+      },
+
+      {
+        code: `
+<View prop={
+  foo && <Text>foo</Text>
+}>
+  <Bar />
+</View>
+        `,
+      },
+
+      {
+        code: `
+<View prop={
+  foo ? <Text>foo</Text> : <Text>bar</Text>
+}>
+  <Bar />
+</View>
+        `,
+      },
+
+      {
+        code: `
+<View propText={
+  <Trans><Text>foo</Text></Trans>
+}>
+  <Bar />
+</View>
+        `,
+      },
+
+      {
+        code: `
+<View prop={
+  <Text><Trans>foo</Trans></Text>
+}>
+  <Bar />
+</View>
+        `,
+      },
+
+      {
+        code: `
+<Foo propText={
+  <Trans>foo</Trans>
+}>
+  <Bar />
+</Foo>
+        `,
+      },
+
+      {
+        code: `
+<Foo propText={
+  foo && <Trans>foo</Trans>
+}>
+  <Bar />
+</Foo>
+              `,
+      },
+
+      {
+        code: `
+<Foo propText={
+  foo ? <Trans>foo</Trans> : <Trans>bar</Trans>
+}>
+  <Bar />
+</Foo>
+              `,
+      },
+
+      {
+        code: `
+function Stuff() {
+  return <Text>foo</Text>
+}
+        `,
+      },
+
+      {
+        code: `
+function Stuff({ foo }) {
+  return <View>{foo}</View>
+}
+        `,
+      },
+
+      {
+        code: `
+function MyText() {
+  return <Text>foo</Text>
+}
+        `,
+      },
+
+      {
+        code: `
+function MyText({ foo }) {
+  if (foo) {
+    return <Text>foo</Text>
+  }
+  return <Text>foo</Text>
+}
+        `,
+      },
+
+      {
+        code: `
+<View>
+  <Text>{'foo'}</Text>
+</View>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  <Text>{foo + 'foo'}</Text>
+</View>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  <Text><Trans>{'foo'}</Trans></Text>
+</View>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  {foo['bar'] && <Bar />}
+</View>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  {(foo === 'bar') && <Bar />}
+</View>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  {(foo !== 'bar') && <Bar />}
+</View>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  <Text>{\`foo\`}</Text>
+</View>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  <Text><Trans>{\`foo\`}</Trans></Text>
+</View>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  <Text>{_(msg\`foo\`)}</Text>
+</View>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  <Text><Trans>{_(msg\`foo\`)}</Trans></Text>
+</View>
+       `,
+      },
+
+      {
+        code: `
+<Foo>
+  <View prop={stuff('foo')}>
+    <Bar />
+  </View>
+</Foo>
+       `,
+      },
+
+      {
+        code: `
+<Foo>
+  <View onClick={() => stuff('foo')}>
+    <Bar />
+  </View>
+</Foo>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  {renderItem('foo')}
+</View>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  {foo === 'foo' && <Bar />}
+</View>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  {foo['foo'] && <Bar />}
+</View>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  {check('foo') && <Bar />}
+</View>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  {foo.bar && <Bar />}
+</View>
+        `,
+      },
+
+      {
+        code: `
+<Text>
+  <Trans>{renderItem('foo')}</Trans>
+</Text>
+       `,
+      },
+
+      {
+        code: `
+<View>
+  {null}
+</View>
+       `,
+      },
+
+      {
+        code: `
+<Text>
+  <Trans>{null}</Trans>
+</Text>
+       `,
+      },
+    ],
+
+    invalid: [
+      {
+        code: `
+<View> </View>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  foo
+</View>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <>
+    foo
+  </>
+</View>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <Trans>
+    foo
+  </Trans>
+</View>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  {foo && <Trans>foo</Trans>}
+</View>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  {foo ? <Trans>foo</Trans> : <Trans>bar</Trans>}
+</View>
+        `,
+        errors: 2,
+      },
+
+      {
+        code: `
+<Trans>
+  <View>
+    foo
+  </View>
+</Trans>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  foo {bar}
+</View>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <View>
+    foo
+  </View>
+</View>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<Text>
+  <View>
+    foo
+  </View>
+</Text>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<Text prop={
+  <View>foo</View>
+}>
+  <Bar />
+</Text>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<Text prop={
+  foo && <View>foo</View>
+}>
+  <Bar />
+</Text>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<Text prop={
+  foo ? <View>foo</View> : <View>bar</View>
+}>
+  <Bar />
+</Text>
+        `,
+        errors: 2,
+      },
+
+      {
+        code: `
+<Foo prop={
+  <Trans>foo</Trans>
+}>
+  <Bar />
+</Foo>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+function MyText() {
+  return <Foo />
+}
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+function MyText({ foo }) {
+  return <Foo>{foo}</Foo>
+}
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+function MyText({ foo }) {
+  if (foo) {
+    return <Foo>{foo}</Foo>
+  }
+  return <Text>foo</Text>
+}
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  {'foo'}
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  {foo && 'foo'}
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <Trans>{'foo'}</Trans>
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  {foo && <Trans>{'foo'}</Trans>}
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  {10}
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <Trans>{10}</Trans>
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <Trans>{foo + 10}</Trans>
+</View>
+             `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  {\`foo\`}
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <Trans>{\`foo\`}</Trans>
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <Trans>{foo + \`foo\`}</Trans>
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  {_(msg\`foo\`)}
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  {foo + _(msg\`foo\`)}
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <Trans>{_(msg\`foo\`)}</Trans>
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <Trans>{foo + _(msg\`foo\`)}</Trans>
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <Trans>foo</Trans>
+</View>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <Trans><Trans>foo</Trans></Trans>
+</View>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <Trans>{foo}</Trans>
+</View>
+        `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View>
+  <Trans>{'foo'}</Trans>
+</View>
+       `,
+        errors: 1,
+      },
+
+      {
+        code: `
+<View prop={
+  <Trans><Text>foo</Text></Trans>
+}>
+  <Bar />
+</View>
+        `,
+        errors: 1,
+      },
+    ],
+  }
+
+  // For easier local testing
+  if (!process.env.CI) {
+    let only = []
+    let skipped = []
+    ;[...tests.valid, ...tests.invalid].forEach(t => {
+      if (t.skip) {
+        delete t.skip
+        skipped.push(t)
+      }
+      if (t.only) {
+        delete t.only
+        only.push(t)
+      }
+    })
+    const predicate = t => {
+      if (only.length > 0) {
+        return only.indexOf(t) !== -1
+      }
+      if (skipped.length > 0) {
+        return skipped.indexOf(t) === -1
+      }
+      return true
+    }
+    tests.valid = tests.valid.filter(predicate)
+    tests.invalid = tests.invalid.filter(predicate)
+  }
+  ruleTester.run('avoid-unwrapped-text', avoidUnwrappedText, tests)
+})

eslint/avoid-unwrapped-text.js

@@ -0,0 +1,331 @@
+'use strict'
+
+// Partially based on eslint-plugin-react-native.
+// Portions of code by Alex Zhukov, MIT license.
+
+function hasOnlyLineBreak(value) {
+  return /^[\r\n\t\f\v]+$/.test(value.replace(/ /g, ''))
+}
+
+function getTagName(node) {
+  const reversedIdentifiers = []
+  if (
+    node.type === 'JSXElement' &&
+    node.openingElement.type === 'JSXOpeningElement'
+  ) {
+    let object = node.openingElement.name
+    while (object.type === 'JSXMemberExpression') {
+      if (object.property.type === 'JSXIdentifier') {
+        reversedIdentifiers.push(object.property.name)
+      }
+      object = object.object
+    }
+
+    if (object.type === 'JSXIdentifier') {
+      reversedIdentifiers.push(object.name)
+    }
+  }
+
+  return reversedIdentifiers.reverse().join('.')
+}
+
+exports.create = function create(context) {
+  const options = context.options[0] || {}
+  const impliedTextProps = options.impliedTextProps ?? []
+  const impliedTextComponents = options.impliedTextComponents ?? []
+  const suggestedTextWrappers = options.suggestedTextWrappers ?? {}
+  const textProps = [...impliedTextProps]
+  const textComponents = ['Text', ...impliedTextComponents]
+
+  function isTextComponent(tagName) {
+    return textComponents.includes(tagName) || tagName.endsWith('Text')
+  }
+
+  return {
+    JSXText(node) {
+      if (typeof node.value !== 'string' || hasOnlyLineBreak(node.value)) {
+        return
+      }
+      let parent = node.parent
+      while (parent) {
+        if (parent.type === 'JSXElement') {
+          const tagName = getTagName(parent)
+          if (isTextComponent(tagName)) {
+            // We're good.
+            return
+          }
+          if (tagName === 'Trans') {
+            // Exit and rely on the traversal for <Trans> JSXElement (code below).
+            // TODO: Maybe validate that it's present.
+            return
+          }
+          const suggestedWrapper = suggestedTextWrappers[tagName]
+          let message = `Wrap this string in <${suggestedWrapper ?? 'Text'}>.`
+          if (tagName !== 'View' && !suggestedWrapper) {
+            message +=
+              ' If <' +
+              tagName +
+              '> is guaranteed to render <Text>, ' +
+              'rename it to <' +
+              tagName +
+              'Text> or add it to impliedTextComponents.'
+          }
+          context.report({
+            node,
+            message,
+          })
+          return
+        }
+
+        if (
+          parent.type === 'JSXAttribute' &&
+          parent.name.type === 'JSXIdentifier' &&
+          parent.parent.type === 'JSXOpeningElement' &&
+          parent.parent.parent.type === 'JSXElement'
+        ) {
+          const tagName = getTagName(parent.parent.parent)
+          const propName = parent.name.name
+          if (
+            textProps.includes(tagName + ' ' + propName) ||
+            propName === 'text' ||
+            propName.endsWith('Text')
+          ) {
+            // We're good.
+            return
+          }
+          const message =
+            'Wrap this string in <Text>.' +
+            ' If `' +
+            propName +
+            '` is guaranteed to be wrapped in <Text>, ' +
+            'rename it to `' +
+            propName +
+            'Text' +
+            '` or add it to impliedTextProps.'
+          context.report({
+            node,
+            message,
+          })
+          return
+        }
+
+        parent = parent.parent
+        continue
+      }
+    },
+    Literal(node) {
+      if (typeof node.value !== 'string' && typeof node.value !== 'number') {
+        return
+      }
+      let parent = node.parent
+      while (parent) {
+        if (parent.type === 'JSXElement') {
+          const tagName = getTagName(parent)
+          if (isTextComponent(tagName)) {
+            // We're good.
+            return
+          }
+          if (tagName === 'Trans') {
+            // Exit and rely on the traversal for <Trans> JSXElement (code below).
+            // TODO: Maybe validate that it's present.
+            return
+          }
+          const suggestedWrapper = suggestedTextWrappers[tagName]
+          let message = `Wrap this string in <${suggestedWrapper ?? 'Text'}>.`
+          if (tagName !== 'View' && !suggestedWrapper) {
+            message +=
+              ' If <' +
+              tagName +
+              '> is guaranteed to render <Text>, ' +
+              'rename it to <' +
+              tagName +
+              'Text> or add it to impliedTextComponents.'
+          }
+          context.report({
+            node,
+            message,
+          })
+          return
+        }
+
+        if (parent.type === 'BinaryExpression' && parent.operator === '+') {
+          parent = parent.parent
+          continue
+        }
+
+        if (
+          parent.type === 'JSXExpressionContainer' ||
+          parent.type === 'LogicalExpression'
+        ) {
+          parent = parent.parent
+          continue
+        }
+
+        // Be conservative for other types.
+        return
+      }
+    },
+    TemplateLiteral(node) {
+      let parent = node.parent
+      while (parent) {
+        if (parent.type === 'JSXElement') {
+          const tagName = getTagName(parent)
+          if (isTextComponent(tagName)) {
+            // We're good.
+            return
+          }
+          if (tagName === 'Trans') {
+            // Exit and rely on the traversal for <Trans> JSXElement (code below).
+            // TODO: Maybe validate that it's present.
+            return
+          }
+          const suggestedWrapper = suggestedTextWrappers[tagName]
+          let message = `Wrap this string in <${suggestedWrapper ?? 'Text'}>.`
+          if (tagName !== 'View' && !suggestedWrapper) {
+            message +=
+              ' If <' +
+              tagName +
+              '> is guaranteed to render <Text>, ' +
+              'rename it to <' +
+              tagName +
+              'Text> or add it to impliedTextComponents.'
+          }
+          context.report({
+            node,
+            message,
+          })
+          return
+        }
+
+        if (
+          parent.type === 'CallExpression' &&
+          parent.callee.type === 'Identifier' &&
+          parent.callee.name === '_'
+        ) {
+          // This is a user-facing string, keep going up.
+          parent = parent.parent
+          continue
+        }
+
+        if (parent.type === 'BinaryExpression' && parent.operator === '+') {
+          parent = parent.parent
+          continue
+        }
+
+        if (
+          parent.type === 'JSXExpressionContainer' ||
+          parent.type === 'LogicalExpression' ||
+          parent.type === 'TaggedTemplateExpression'
+        ) {
+          parent = parent.parent
+          continue
+        }
+
+        // Be conservative for other types.
+        return
+      }
+    },
+    JSXElement(node) {
+      if (getTagName(node) !== 'Trans') {
+        return
+      }
+      let parent = node.parent
+      while (parent) {
+        if (parent.type === 'JSXElement') {
+          const tagName = getTagName(parent)
+          if (isTextComponent(tagName)) {
+            // We're good.
+            return
+          }
+          if (tagName === 'Trans') {
+            // Exit and rely on the traversal for this JSXElement.
+            // TODO: Should nested <Trans> even be allowed?
+            return
+          }
+          const suggestedWrapper = suggestedTextWrappers[tagName]
+          let message = `Wrap this <Trans> in <${suggestedWrapper ?? 'Text'}>.`
+          if (tagName !== 'View' && !suggestedWrapper) {
+            message +=
+              ' If <' +
+              tagName +
+              '> is guaranteed to render <Text>, ' +
+              'rename it to <' +
+              tagName +
+              'Text> or add it to impliedTextComponents.'
+          }
+          context.report({
+            node,
+            message,
+          })
+          return
+        }
+
+        if (
+          parent.type === 'JSXAttribute' &&
+          parent.name.type === 'JSXIdentifier' &&
+          parent.parent.type === 'JSXOpeningElement' &&
+          parent.parent.parent.type === 'JSXElement'
+        ) {
+          const tagName = getTagName(parent.parent.parent)
+          const propName = parent.name.name
+          if (
+            textProps.includes(tagName + ' ' + propName) ||
+            propName === 'text' ||
+            propName.endsWith('Text')
+          ) {
+            // We're good.
+            return
+          }
+          const message =
+            'Wrap this <Trans> in <Text>.' +
+            ' If `' +
+            propName +
+            '` is guaranteed to be wrapped in <Text>, ' +
+            'rename it to `' +
+            propName +
+            'Text' +
+            '` or add it to impliedTextProps.'
+          context.report({
+            node,
+            message,
+          })
+          return
+        }
+
+        parent = parent.parent
+        continue
+      }
+    },
+    ReturnStatement(node) {
+      let fnScope = context.getScope()
+      while (fnScope && fnScope.type !== 'function') {
+        fnScope = fnScope.upper
+      }
+      if (!fnScope) {
+        return
+      }
+      const fn = fnScope.block
+      if (!fn.id || fn.id.type !== 'Identifier' || !fn.id.name) {
+        return
+      }
+      if (!/^[A-Z]\w*Text$/.test(fn.id.name)) {
+        return
+      }
+      if (!node.argument || node.argument.type !== 'JSXElement') {
+        return
+      }
+      const openingEl = node.argument.openingElement
+      if (openingEl.name.type !== 'JSXIdentifier') {
+        return
+      }
+      const returnedComponentName = openingEl.name.name
+      if (!isTextComponent(returnedComponentName)) {
+        context.report({
+          node,
+          message:
+            'Components ending with *Text must return <Text> or <SomeText>.',
+        })
+      }
+    },
+  }
+}

eslint/index.js

@@ -0,0 +1,8 @@
+'use strict'
+
+module.exports = {
+  rules: {
+    'avoid-unwrapped-text': require('./avoid-unwrapped-text'),
+    'use-typed-gates': require('./use-typed-gates'),
+  },
+}

eslint/use-typed-gates.js

@@ -0,0 +1,30 @@
+'use strict'
+
+exports.create = function create(context) {
+  return {
+    ImportSpecifier(node) {
+      if (
+        !node.local ||
+        node.local.type !== 'Identifier' ||
+        node.local.name !== 'useGate'
+      ) {
+        return
+      }
+      if (
+        node.parent.type !== 'ImportDeclaration' ||
+        !node.parent.source ||
+        node.parent.source.type !== 'Literal'
+      ) {
+        return
+      }
+      const source = node.parent.source.value
+      if (source.startsWith('statsig') || source.startsWith('@statsig')) {
+        context.report({
+          node,
+          message:
+            "Use useGate() from '#/lib/statsig/statsig' instead of the one on npm.",
+        })
+      }
+    },
+  }
+}

jest/test-pds.ts

@@ -1,8 +1,8 @@
+import {AtUri, BskyAgent} from '@atproto/api'
+import {TestBsky, TestNetwork} from '@atproto/dev-env'
+import fs from 'fs'
 import net from 'net'
 import path from 'path'
-import fs from 'fs'
-import {TestNetwork, TestPds} from '@atproto/dev-env'
-import {AtUri, BskyAgent} from '@atproto/api'
 
 export interface TestUser {
   email: string
@@ -55,12 +55,8 @@ class StringIdGenerator {
 const ids = new StringIdGenerator()
 
 export async function createServer(
-  {
-    inviteRequired,
-    phoneRequired,
-  }: {inviteRequired: boolean; phoneRequired: boolean} = {
+  {inviteRequired}: {inviteRequired: boolean} = {
     inviteRequired: false,
-    phoneRequired: false,
   },
 ): Promise<TestPDS> {
   const port = 3000
@@ -69,23 +65,11 @@ export async function createServer(
   const pdsUrl = `http://localhost:${port}`
   const id = ids.next()
 
-  const phoneParams = phoneRequired
-    ? {
-        phoneVerificationRequired: true,
-        phoneVerificationProvider: 'twilio',
-        twilioAccountSid: 'ACXXXXXXX',
-        twilioAuthToken: 'AUTH',
-        twilioServiceSid: 'VAXXXXXXXX',
-      }
-    : {}
-
   const testNet = await TestNetwork.create({
     pds: {
       port,
       hostname: 'localhost',
-      dbPostgresSchema: `pds_${id}`,
       inviteRequired,
-      ...phoneParams,
     },
     bsky: {
       dbPostgresSchema: `bsky_${id}`,
@@ -94,36 +78,33 @@ export async function createServer(
     },
     plc: {port: port2},
   })
-  mockTwilio(testNet.pds)
 
   // add the test mod authority
-  if (!phoneRequired) {
-    const agent = new BskyAgent({service: pdsUrl})
-    const res = await agent.api.com.atproto.server.createAccount({
-      email: 'mod-authority@test.com',
-      handle: 'mod-authority.test',
-      password: 'hunter2',
-    })
-    agent.api.setHeader('Authorization', `Bearer ${res.data.accessJwt}`)
-    await agent.api.app.bsky.actor.profile.create(
-      {repo: res.data.did},
-      {
-        displayName: 'Dev-env Moderation',
-        description: `The pretend version of mod.bsky.app`,
-      },
-    )
+  const agent = new BskyAgent({service: pdsUrl})
+  const res = await agent.api.com.atproto.server.createAccount({
+    email: 'mod-authority@test.com',
+    handle: 'mod-authority.test',
+    password: 'hunter2',
+  })
+  agent.api.setHeader('Authorization', `Bearer ${res.data.accessJwt}`)
+  await agent.api.app.bsky.actor.profile.create(
+    {repo: res.data.did},
+    {
+      displayName: 'Dev-env Moderation',
+      description: `The pretend version of mod.bsky.app`,
+    },
+  )
 
-    await agent.api.app.bsky.labeler.service.create(
-      {repo: res.data.did, rkey: 'self'},
-      {
-        policies: {
-          labelValues: ['!hide', '!warn'],
-          labelValueDefinitions: [],
-        },
-        createdAt: new Date().toISOString(),
+  await agent.api.app.bsky.labeler.service.create(
+    {repo: res.data.did, rkey: 'self'},
+    {
+      policies: {
+        labelValues: ['!hide', '!warn'],
+        labelValueDefinitions: [],
       },
-    )
-  }
+      createdAt: new Date().toISOString(),
+    },
+  )
 
   const pic = fs.readFileSync(
     path.join(__dirname, '..', 'assets', 'default-avatar.png'),
@@ -181,7 +162,7 @@ class Mocker {
     const inviteRes = await agent.api.com.atproto.server.createInviteCode(
       {useCount: 1},
       {
-        headers: this.pds.adminAuthHeaders('admin'),
+        headers: this.pds.adminAuthHeaders(),
         encoding: 'application/json',
       },
     )
@@ -192,8 +173,6 @@ class Mocker {
       email,
       handle: name + '.test',
       password: 'hunter2',
-      verificationPhone: '1234567890',
-      verificationCode: '000000',
     })
     await agent.upsertProfile(async () => {
       const blob = await agent.uploadBlob(this.pic, {
@@ -358,7 +337,7 @@ class Mocker {
     await agent.api.com.atproto.server.createInviteCode(
       {useCount: 1, forAccount},
       {
-        headers: this.pds.adminAuthHeaders('admin'),
+        headers: this.pds.adminAuthHeaders(),
         encoding: 'application/json',
       },
     )
@@ -373,18 +352,11 @@ class Mocker {
     if (!ctx) {
       throw new Error('Invalid appview')
     }
-    const labelSrvc = ctx.services.label(ctx.db.getPrimary())
-    await labelSrvc.createLabels([
-      {
-        // @ts-ignore
-        src: ctx.cfg.labelerDid,
-        uri: did,
-        cid: '',
-        val: label,
-        neg: false,
-        cts: new Date().toISOString(),
-      },
-    ])
+    await createLabel(this.bsky, {
+      uri: did,
+      cid: '',
+      val: label,
+    })
   }
 
   async labelProfile(label: string, user: string) {
@@ -403,18 +375,11 @@ class Mocker {
     if (!ctx) {
       throw new Error('Invalid appview')
     }
-    const labelSrvc = ctx.services.label(ctx.db.getPrimary())
-    await labelSrvc.createLabels([
-      {
-        // @ts-ignore
-        src: ctx.cfg.labelerDid,
-        uri: profile.uri,
-        cid: profile.cid,
-        val: label,
-        neg: false,
-        cts: new Date().toISOString(),
-      },
-    ])
+    await createLabel(this.bsky, {
+      uri: profile.uri,
+      cid: profile.cid,
+      val: label,
+    })
   }
 
   async labelPost(label: string, {uri, cid}: {uri: string; cid: string}) {
@@ -422,18 +387,11 @@ class Mocker {
     if (!ctx) {
       throw new Error('Invalid appview')
     }
-    const labelSrvc = ctx.services.label(ctx.db.getPrimary())
-    await labelSrvc.createLabels([
-      {
-        // @ts-ignore
-        src: ctx.cfg.labelerDid,
-        uri,
-        cid,
-        val: label,
-        neg: false,
-        cts: new Date().toISOString(),
-      },
-    ])
+    await createLabel(this.bsky, {
+      uri,
+      cid,
+      val: label,
+    })
   }
 
   async createMuteList(user: string, name: string): Promise<string> {
@@ -484,14 +442,19 @@ async function getPort(start = 3000) {
   throw new Error('Unable to find an available port')
 }
 
-export const mockTwilio = (pds: TestPds) => {
-  if (!pds.ctx.phoneVerifier) return
-
-  pds.ctx.phoneVerifier.sendCode = async (_number: string) => {
-    // do nothing
-  }
-
-  pds.ctx.phoneVerifier.verifyCode = async (_number: string, code: string) => {
-    return code === '000000'
-  }
+const createLabel = async (
+  bsky: TestBsky,
+  opts: {uri: string; cid: string; val: string},
+) => {
+  await bsky.db.db
+    .insertInto('label')
+    .values({
+      uri: opts.uri,
+      cid: opts.cid,
+      val: opts.val,
+      cts: new Date().toISOString(),
+      neg: false,
+      src: 'did:example:labeler',
+    })
+    .execute()
 }

lingui.config.js

@@ -2,19 +2,22 @@
 module.exports = {
   locales: [
     'en',
+    'ca',
     'de',
     'es',
     'fi',
     'fr',
+    'ga',
     'hi',
     'id',
+    'it',
     'ja',
     'ko',
     'pt-BR',
+    'tr',
     'uk',
-    'ca',
     'zh-CN',
-    'it',
+    'zh-TW',
   ],
   catalogs: [
     {

modules/expo-scroll-forwarder/expo-module.config.json

@@ -0,0 +1,6 @@
+{
+  "platforms": ["ios"],
+  "ios": {
+    "modules": ["ExpoScrollForwarderModule"]
+  }
+}

modules/expo-scroll-forwarder/index.ts

@@ -0,0 +1 @@
+export {ExpoScrollForwarderView} from './src/ExpoScrollForwarderView'

modules/expo-scroll-forwarder/ios/ExpoScrollForwarder.podspec

@@ -0,0 +1,21 @@
+Pod::Spec.new do |s|
+  s.name           = 'ExpoScrollForwarder'
+  s.version        = '1.0.0'
+  s.summary        = 'Forward scroll gesture from UIView to UIScrollView'
+  s.description    = 'Forward scroll gesture from UIView to UIScrollView'
+  s.author         = 'bluesky-social'
+  s.homepage       = 'https://github.com/bluesky-social/social-app'
+  s.platforms      = { :ios => '13.4', :tvos => '13.4' }
+  s.source         = { git: '' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+
+  # Swift/Objective-C compatibility
+  s.pod_target_xcconfig = {
+    'DEFINES_MODULE' => 'YES',
+    'SWIFT_COMPILATION_MODE' => 'wholemodule'
+  }
+
+  s.source_files = "**/*.{h,m,mm,swift,hpp,cpp}"
+end

modules/expo-scroll-forwarder/ios/ExpoScrollForwarderModule.swift

@@ -0,0 +1,13 @@
+import ExpoModulesCore
+
+public class ExpoScrollForwarderModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ExpoScrollForwarder")
+    
+    View(ExpoScrollForwarderView.self) {
+      Prop("scrollViewTag") { (view: ExpoScrollForwarderView, prop: Int) in
+        view.scrollViewTag = prop
+      }
+    }
+  }
+}

modules/expo-scroll-forwarder/ios/ExpoScrollForwarderView.swift

@@ -0,0 +1,215 @@
+import ExpoModulesCore
+
+// This view will be used as a native component. Make sure to inherit from `ExpoView`
+// to apply the proper styling (e.g. border radius and shadows).
+class ExpoScrollForwarderView: ExpoView, UIGestureRecognizerDelegate {
+  var scrollViewTag: Int? {
+    didSet {
+      self.tryFindScrollView()
+    }
+  }
+  
+  private var rctScrollView: RCTScrollView?
+  private var rctRefreshCtrl: RCTRefreshControl?
+  private var cancelGestureRecognizers: [UIGestureRecognizer]?
+  private var animTimer: Timer?
+  private var initialOffset: CGFloat = 0.0
+  private var didImpact: Bool = false
+  
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    
+    let pg = UIPanGestureRecognizer(target: self, action: #selector(callOnPan(_:)))
+    pg.delegate = self
+    self.addGestureRecognizer(pg)
+
+    let tg = UITapGestureRecognizer(target: self, action: #selector(callOnPress(_:)))
+    tg.isEnabled = false
+    tg.delegate = self
+
+    let lpg = UILongPressGestureRecognizer(target: self, action: #selector(callOnPress(_:)))
+    lpg.minimumPressDuration = 0.01
+    lpg.isEnabled = false
+    lpg.delegate = self
+
+    self.cancelGestureRecognizers = [lpg, tg]
+  }
+  
+
+  // We don't want to recognize the scroll pan gesture and the swipe back gesture together
+  func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
+    if gestureRecognizer is UIPanGestureRecognizer, otherGestureRecognizer is UIPanGestureRecognizer {
+      return false
+    }
+    
+    return true
+  }
+  
+  // We only want the "scroll" gesture to happen whenever the pan is vertical, otherwise it will
+  // interfere with the native swipe back gesture.
+  override func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
+    guard let gestureRecognizer = gestureRecognizer as? UIPanGestureRecognizer else {
+      return true
+    }
+    
+    let velocity = gestureRecognizer.velocity(in: self)
+    return abs(velocity.y) > abs(velocity.x)
+  }
+  
+  // This will be used to cancel the scroll animation whenever we tap inside of the header. We don't need another
+  // recognizer for this one.
+  override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
+    self.stopTimer()
+  }
+
+  // This will be used to cancel the animation whenever we press inside of the scroll view. We don't want to change
+  // the scroll view gesture's delegate, so we add an additional recognizer to detect this.
+  @IBAction func callOnPress(_ sender: UITapGestureRecognizer) -> Void {
+    self.stopTimer()
+  }
+  
+  @IBAction func callOnPan(_ sender: UIPanGestureRecognizer) -> Void {
+    guard let rctsv = self.rctScrollView, let sv = rctsv.scrollView else {
+      return
+    }
+
+    let translation = sender.translation(in: self).y
+    
+    if sender.state == .began {
+      if sv.contentOffset.y < 0 {
+        sv.contentOffset.y = 0
+      }
+      
+      self.initialOffset = sv.contentOffset.y
+    }
+
+    if sender.state == .changed {
+      sv.contentOffset.y = self.dampenOffset(-translation + self.initialOffset)
+      
+      if sv.contentOffset.y <= -130, !didImpact {
+        let generator = UIImpactFeedbackGenerator(style: .light)
+        generator.impactOccurred()
+        
+        self.didImpact = true
+      }
+    }
+
+    if sender.state == .ended {
+      let velocity = sender.velocity(in: self).y
+      self.didImpact = false
+      
+      if sv.contentOffset.y <= -130 {
+        self.rctRefreshCtrl?.forwarderBeginRefreshing()
+        return
+      }
+
+      // A check for a velocity under 250 prevents animations from occurring when they wouldn't in a normal
+      // scroll view
+      if abs(velocity) < 250, sv.contentOffset.y >= 0 {
+        return
+      }
+      
+      self.startDecayAnimation(translation, velocity)
+    }
+  }
+  
+  func startDecayAnimation(_ translation: CGFloat, _ velocity: CGFloat) {
+    guard let sv = self.rctScrollView?.scrollView else {
+      return
+    }
+    
+    var velocity = velocity
+    
+    self.enableCancelGestureRecognizers()
+    
+    if velocity > 0 {
+      velocity = min(velocity, 5000)
+    } else {
+      velocity = max(velocity, -5000)
+    }
+    
+    var animTranslation = -translation
+    self.animTimer = Timer.scheduledTimer(withTimeInterval: 1.0 / 120, repeats: true) { timer in
+      velocity *= 0.9875
+      animTranslation = (-velocity / 120) + animTranslation
+      
+      let nextOffset = self.dampenOffset(animTranslation + self.initialOffset)
+      
+      if nextOffset <= 0 {
+        if self.initialOffset <= 1 {
+          self.scrollToOffset(0)
+        } else {
+          sv.contentOffset.y = 0
+        }
+        
+        self.stopTimer()
+        return
+      } else {
+        sv.contentOffset.y = nextOffset
+      }
+
+      if abs(velocity) < 5 {
+        self.stopTimer()
+      }
+    }
+  }
+  
+  func dampenOffset(_ offset: CGFloat) -> CGFloat {
+    if offset < 0 {
+      return offset - (offset * 0.55)
+    }
+    
+    return offset
+  }
+  
+  func tryFindScrollView() {
+    guard let scrollViewTag = scrollViewTag else {
+      return
+    }
+    
+    // Before we switch to a different scrollview, we always want to remove the cancel gesture recognizer.
+    // Otherwise we might end up with duplicates when we switch back to that scrollview.
+    self.removeCancelGestureRecognizers()
+    
+    self.rctScrollView = self.appContext?
+      .findView(withTag: scrollViewTag, ofType: RCTScrollView.self)
+    self.rctRefreshCtrl = self.rctScrollView?.scrollView.refreshControl as? RCTRefreshControl
+    
+    self.addCancelGestureRecognizers()
+  }
+  
+  func addCancelGestureRecognizers() {
+    self.cancelGestureRecognizers?.forEach { r in
+      self.rctScrollView?.scrollView?.addGestureRecognizer(r)
+    }
+  }
+  
+  func removeCancelGestureRecognizers() {
+    self.cancelGestureRecognizers?.forEach { r in
+      self.rctScrollView?.scrollView?.removeGestureRecognizer(r)
+    }
+  }
+
+  
+  func enableCancelGestureRecognizers() {
+    self.cancelGestureRecognizers?.forEach { r in
+      r.isEnabled = true
+    }
+  }
+  
+  func disableCancelGestureRecognizers() {
+    self.cancelGestureRecognizers?.forEach { r in
+      r.isEnabled = false
+    }
+  }
+  
+  func scrollToOffset(_ offset: Int, animated: Bool = true) -> Void {
+    self.rctScrollView?.scroll(toOffset: CGPoint(x: 0, y: offset), animated: animated)
+  }
+
+  func stopTimer() -> Void {
+    self.disableCancelGestureRecognizers()
+    self.animTimer?.invalidate()
+    self.animTimer = nil
+  }
+}

modules/expo-scroll-forwarder/src/ExpoScrollForwarder.types.ts

@@ -0,0 +1,6 @@
+import React from 'react'
+
+export interface ExpoScrollForwarderViewProps {
+  scrollViewTag: number | null
+  children: React.ReactNode
+}

modules/expo-scroll-forwarder/src/ExpoScrollForwarderView.ios.tsx

@@ -0,0 +1,13 @@
+import {requireNativeViewManager} from 'expo-modules-core'
+import * as React from 'react'
+import {ExpoScrollForwarderViewProps} from './ExpoScrollForwarder.types'
+
+const NativeView: React.ComponentType<ExpoScrollForwarderViewProps> =
+  requireNativeViewManager('ExpoScrollForwarder')
+
+export function ExpoScrollForwarderView({
+  children,
+  ...rest
+}: ExpoScrollForwarderViewProps) {
+  return <NativeView {...rest}>{children}</NativeView>
+}

modules/expo-scroll-forwarder/src/ExpoScrollForwarderView.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import {ExpoScrollForwarderViewProps} from './ExpoScrollForwarder.types'
+export function ExpoScrollForwarderView({
+  children,
+}: React.PropsWithChildren<ExpoScrollForwarderViewProps>) {
+  return children
+}

modules/react-native-ui-text-view/README.md

@@ -1,61 +0,0 @@
-# React Native UITextView
-
-Drop in replacement for `<Text>` that renders a `UITextView`, support selection and native translation features on iOS.
-
-## Installation
-
-In this project, no installation is required. The pod will be installed automatically during a `pod install`.
-
-In another project, clone the repo and copy the `modules/react-native-ui-text-view` directory to your own project
-directory. Afterward, run `pod install`.
-
-## Usage
-
-Replace the outermost `<Text>` with `<UITextView>`. Styles and press events should be handled the same way they would
-with `<Text>`. Both `<UITextView>` and `<Text>` are supported as children of the root `<UITextView>`.
-
-## Technical
-
-React Native's `Text` component allows for "infinite" nesting of further `Text` components. To make a true "drop-in",
-we want to do the same thing.
-
-To achieve this, we first need to handle determining if we are dealing with an ancestor or root `UITextView` component.
-We can implement similar logic to the `Text` component [see Text.js](https://github.com/facebook/react-native/blob/7f2529de7bc9ab1617eaf571e950d0717c3102a6/packages/react-native/Libraries/Text/Text.js).
-
-We create a context that contains a boolean to tell us if we have already rendered the root `UITextView`. We also store
-the root styles so that we can apply those styles if the ancestor `UITextView`s have not overwritten those styles.
-
-All of our children are placed into `RNUITextView`, which is the main native view that will display the iOS `UITextView`.
-
-We next map each child into the view. We have to be careful here to check if the child's `children` prop is a string. If
-it is, that means we have encountered what was once an RN `Text` component. RN doesn't let us pass plain text as
-children outside of `Text`, so we instead just pass the text into the `text` prop on `RNUITextViewChild`. We continue 
-down the tree, until we run out of children.
-
-On the native side, we make use of the shadow view to calculate text container dimensions before the views are mounted.
-We cannot simply set the `UITextView` text first, since React will not have properly measured the layout before this
-occurs.
-
-
-As for `Text` props, the following props are implemented:
-
-- All accessibility props
-- `allowFontScaling`
-- `adjustsFontSizeToFit`
-- `ellipsizeMode`
-- `numberOfLines`
-- `onLayout`
-- `onPress`
-- `onTextLayout`
-- `selectable`
-
-All `ViewStyle` props will apply to the root `UITextView`. Individual children will respect these `TextStyle` styles:
-
-- `color`
-- `fontSize`
-- `fontStyle`
-- `fontWeight`
-- `fontVariant`
-- `letterSpacing`
-- `lineHeight`
-- `textDecorationLine`

modules/react-native-ui-text-view/ios/RNUITextView-Bridging-Header.h

@@ -1,3 +0,0 @@
-#import <React/RCTViewManager.h>
-#import <React/RCTBridge.h>
-#import <React/RCTBridge+Private.h>

modules/react-native-ui-text-view/ios/RNUITextView.swift

@@ -1,153 +0,0 @@
-class RNUITextView: UIView {
-  var textView: UITextView
-
-  @objc var numberOfLines: Int = 0 {
-    didSet {
-      textView.textContainer.maximumNumberOfLines = numberOfLines
-    }
-  }
-  @objc var selectable: Bool = true {
-    didSet {
-      textView.isSelectable = selectable
-    }
-  }
-  @objc var ellipsizeMode: String = "tail" {
-    didSet {
-      textView.textContainer.lineBreakMode = self.getLineBreakMode()
-    }
-  }
-  @objc var onTextLayout: RCTDirectEventBlock?
-
-  override init(frame: CGRect) {
-    if #available(iOS 16.0, *) {
-      textView = UITextView(usingTextLayoutManager: false)
-    } else {
-      textView = UITextView()
-    }
-
-    // Disable scrolling
-    textView.isScrollEnabled = false
-    // Remove all the padding
-    textView.textContainerInset = .zero
-    textView.textContainer.lineFragmentPadding = 0
-
-    // Remove other properties
-    textView.isEditable = false
-    textView.backgroundColor = .clear
-
-    // Init
-    super.init(frame: frame)
-    self.clipsToBounds = true
-
-    // Add the view
-    addSubview(textView)
-
-    let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(callOnPress(_:)))
-    tapGestureRecognizer.isEnabled = true
-    textView.addGestureRecognizer(tapGestureRecognizer)
-  }
-
-  required init?(coder: NSCoder) {
-    fatalError("init(coder:) has not been implemented")
-  }
-
-  // Resolves some animation issues
-  override func reactSetFrame(_ frame: CGRect) {
-    UIView.performWithoutAnimation {
-      super.reactSetFrame(frame)
-    }
-  }
-
-  func setText(string: NSAttributedString, size: CGSize, numberOfLines: Int) -> Void {
-    self.textView.frame.size = size
-    self.textView.textContainer.maximumNumberOfLines = numberOfLines
-    self.textView.attributedText = string
-    self.textView.selectedTextRange = nil
-
-    if let onTextLayout = self.onTextLayout {
-      var lines: [String] = []
-      textView.layoutManager.enumerateLineFragments(
-        forGlyphRange: NSRange(location: 0, length: textView.attributedText.length))
-      { (rect, usedRect, textContainer, glyphRange, stop) in
-        let characterRange = self.textView.layoutManager.characterRange(forGlyphRange: glyphRange, actualGlyphRange: nil)
-        let line = (self.textView.text as NSString).substring(with: characterRange)
-        lines.append(line)
-      }
-
-      onTextLayout([
-        "lines": lines
-      ])
-    }
-  }
-
-  @IBAction func callOnPress(_ sender: UITapGestureRecognizer) -> Void {
-    // If we find a child, then call onPress
-    if let child = getPressed(sender) {
-      if textView.selectedTextRange == nil, let onPress = child.onPress {
-        onPress(["": ""])
-      } else {
-        // Clear the selected text range if we are not pressing on a link
-        textView.selectedTextRange = nil
-      }
-    }
-  }
-
-  // Try to get the pressed segment
-  func getPressed(_ sender: UITapGestureRecognizer) -> RNUITextViewChild? {
-    let layoutManager = textView.layoutManager
-    var location = sender.location(in: textView)
-
-    // Remove the padding
-    location.x -= textView.textContainerInset.left
-    location.y -= textView.textContainerInset.top
-
-    // Get the index of the char
-    let charIndex = layoutManager.characterIndex(
-      for: location,
-      in: textView.textContainer,
-      fractionOfDistanceBetweenInsertionPoints: nil
-    )
-
-    var lastUpperBound: String.Index? = nil
-    for child in self.reactSubviews() {
-      if let child = child as? RNUITextViewChild, let childText = child.text {
-        let fullText = self.textView.attributedText.string
-        
-        // We want to skip over the children we have already checked, otherwise we could run into
-        // collisions of similar strings (i.e. links that get shortened to the same hostname but
-        // different paths)
-        let range = fullText.range(of: childText, options: [], range: (lastUpperBound ?? String.Index(utf16Offset: 0, in: fullText) )..<fullText.endIndex)
-        
-        if let lowerBound = range?.lowerBound, let upperBound = range?.upperBound {
-          let lowerOffset = lowerBound.utf16Offset(in: fullText)
-          let upperOffset = upperBound.utf16Offset(in: fullText)
-          
-          if charIndex >= lowerOffset,
-             charIndex <= upperOffset
-          {
-            return child
-          } else {
-            lastUpperBound = upperBound
-          }
-        }
-      }
-    }
-
-    return nil
-  }
-
-  func getLineBreakMode() -> NSLineBreakMode {
-    switch self.ellipsizeMode {
-    case "head":
-      return .byTruncatingHead
-    case "middle":
-      return .byTruncatingMiddle
-    case "tail":
-      return .byTruncatingTail
-    case "clip":
-      return .byClipping
-    default:
-      return .byTruncatingTail
-    }
-  }
-}

modules/react-native-ui-text-view/ios/RNUITextViewChild.swift

@@ -1,4 +0,0 @@
-class RNUITextViewChild: UIView {
-  @objc var text: String?
-  @objc var onPress: RCTDirectEventBlock?
-}

modules/react-native-ui-text-view/ios/RNUITextViewChildShadow.swift

@@ -1,56 +0,0 @@
-// We want all of our props to be available in the child's shadow view so we
-// can create the attributed text before mount and calculate the needed size
-// for the view.
-class RNUITextViewChildShadow: RCTShadowView {
-  @objc var text: String = ""
-  @objc var color: UIColor = .black
-  @objc var fontSize: CGFloat = 16.0
-  @objc var fontStyle: String = "normal"
-  @objc var fontWeight: String = "normal"
-  @objc var letterSpacing: CGFloat = 0.0
-  @objc var lineHeight: CGFloat = 0.0
-  @objc var pointerEvents: NSString?
-
-  override func isYogaLeafNode() -> Bool {
-    return true
-  }
-
-  override func didSetProps(_ changedProps: [String]!) {
-    guard let superview = self.superview as? RNUITextViewShadow else {
-      return
-    }
-
-    if !YGNodeIsDirty(superview.yogaNode) {
-      superview.setAttributedText()
-    }
-  }
-
-  func getFontWeight() -> UIFont.Weight {
-    switch self.fontWeight {
-    case "bold":
-      return .bold
-    case "normal":
-      return .regular
-    case "100":
-      return .ultraLight
-    case "200":
-      return .ultraLight
-    case "300":
-      return .light
-    case "400":
-      return .regular
-    case "500":
-      return .medium
-    case "600":
-      return .semibold
-    case "700":
-      return .semibold
-    case "800":
-      return .bold
-    case "900":
-      return .heavy
-    default:
-      return .regular
-    }
-  }
-}

modules/react-native-ui-text-view/ios/RNUITextViewManager.m

@@ -1,26 +0,0 @@
-#import <React/RCTViewManager.h>
-
-@interface RCT_EXTERN_MODULE(RNUITextViewManager, RCTViewManager)
-RCT_REMAP_SHADOW_PROPERTY(numberOfLines, numberOfLines, NSInteger)
-RCT_REMAP_SHADOW_PROPERTY(allowsFontScaling, allowsFontScaling, BOOL)
-
-RCT_EXPORT_VIEW_PROPERTY(numberOfLines, NSInteger)
-RCT_EXPORT_VIEW_PROPERTY(onTextLayout, RCTDirectEventBlock)
-RCT_EXPORT_VIEW_PROPERTY(ellipsizeMode, NSString)
-RCT_EXPORT_VIEW_PROPERTY(selectable, BOOL)
-
-@end
-
-@interface RCT_EXTERN_MODULE(RNUITextViewChildManager, RCTViewManager)
-RCT_REMAP_SHADOW_PROPERTY(text, text, NSString)
-RCT_REMAP_SHADOW_PROPERTY(color, color, UIColor)
-RCT_REMAP_SHADOW_PROPERTY(fontSize, fontSize, CGFloat)
-RCT_REMAP_SHADOW_PROPERTY(fontStyle, fontStyle, NSString)
-RCT_REMAP_SHADOW_PROPERTY(fontWeight, fontWeight, NSString)
-RCT_REMAP_SHADOW_PROPERTY(letterSpacing, letterSpacing, CGFloat)
-RCT_REMAP_SHADOW_PROPERTY(lineHeight, lineHeight, CGFloat)
-RCT_REMAP_SHADOW_PROPERTY(pointerEvents, pointerEvents, NSString)
-
-RCT_EXPORT_VIEW_PROPERTY(text, NSString)
-RCT_EXPORT_VIEW_PROPERTY(onPress, RCTBubblingEventBlock)
-@end

modules/react-native-ui-text-view/ios/RNUITextViewManager.swift

@@ -1,30 +0,0 @@
-@objc(RNUITextViewManager)
-class RNUITextViewManager: RCTViewManager {
-  override func view() -> (RNUITextView) {
-    return RNUITextView()
-  }
-
-  @objc override static func requiresMainQueueSetup() -> Bool {
-    return true
-  }
-
-  override func shadowView() -> RCTShadowView {
-    // Pass the bridge to the shadow view
-    return RNUITextViewShadow(bridge: self.bridge)
-  }
-}
-
-@objc(RNUITextViewChildManager)
-class RNUITextViewChildManager: RCTViewManager {
-  override func view() -> (RNUITextViewChild) {
-    return RNUITextViewChild()
-  }
-
-  @objc override static func requiresMainQueueSetup() -> Bool {
-    return true
-  }
-
-  override func shadowView() -> RCTShadowView {
-    return RNUITextViewChildShadow()
-  }
-}

modules/react-native-ui-text-view/ios/RNUITextViewShadow.swift

@@ -1,152 +0,0 @@
-class RNUITextViewShadow: RCTShadowView {
-  // Props
-  @objc var numberOfLines: Int = 0 {
-    didSet {
-      if !YGNodeIsDirty(self.yogaNode) {
-        self.setAttributedText()
-      }
-    }
-  }
-  @objc var allowsFontScaling: Bool = true
-
-  var attributedText: NSAttributedString = NSAttributedString()
-  var frameSize: CGSize = CGSize()
-
-  var lineHeight: CGFloat = 0
-
-  var bridge: RCTBridge
-
-  init(bridge: RCTBridge) {
-    self.bridge = bridge
-    super.init()
-
-    // We need to set a custom measure func here to calculate the height correctly
-    YGNodeSetMeasureFunc(self.yogaNode) { node, width, widthMode, height, heightMode in
-      // Get the shadowview and determine the needed size to set
-      let shadowView = Unmanaged<RNUITextViewShadow>.fromOpaque(YGNodeGetContext(node)).takeUnretainedValue()
-      return shadowView.getNeededSize(maxWidth: width)
-    }
-
-    // Subscribe to ynamic type size changes
-    NotificationCenter.default.addObserver(
-      self,
-      selector: #selector(preferredContentSizeChanged(_:)),
-      name: UIContentSizeCategory.didChangeNotification,
-      object: nil
-    )
-  }
-
-  @objc func preferredContentSizeChanged(_ notification: Notification) {
-    self.setAttributedText()
-  }
-
-  // Returning true here will tell Yoga to not use flexbox and instead use our custom measure func.
-  override func isYogaLeafNode() -> Bool {
-    return true
-  }
-
-  // We should only insert children that are UITextView shadows
-  override func insertReactSubview(_ subview: RCTShadowView!, at atIndex: Int) {
-    if subview.isKind(of: RNUITextViewChildShadow.self) {
-      super.insertReactSubview(subview, at: atIndex)
-    }
-  }
-
-  // Every time the subviews change, we need to reformat and render the text.
-  override func didUpdateReactSubviews() {
-    self.setAttributedText()
-  }
-
-  // Whenever we layout, update the UI
-  override func layoutSubviews(with layoutContext: RCTLayoutContext) {
-    // Don't do anything if the layout is dirty
-    if(YGNodeIsDirty(self.yogaNode)) {
-      return
-    }
-
-    // Since we are inside the shadow view here, we have to find the real view and update the text.
-    self.bridge.uiManager.addUIBlock { uiManager, viewRegistry in
-      guard let textView = viewRegistry?[self.reactTag] as? RNUITextView else {
-        return
-      }
-      textView.setText(string: self.attributedText, size: self.frameSize, numberOfLines: self.numberOfLines)
-    }
-  }
-
-  override func dirtyLayout() {
-    super.dirtyLayout()
-    YGNodeMarkDirty(self.yogaNode)
-  }
-
-  // Update the attributed text whenever changes are made to the subviews.
-  func setAttributedText() -> Void {
-    // Create an attributed string to store each of the segments
-    let finalAttributedString = NSMutableAttributedString()
-
-    self.reactSubviews().forEach { child in
-      guard let child = child as? RNUITextViewChildShadow else {
-        return
-      }
-      let scaledFontSize = self.allowsFontScaling ?
-        UIFontMetrics.default.scaledValue(for: child.fontSize) : child.fontSize
-      let font = UIFont.systemFont(ofSize: scaledFontSize, weight: child.getFontWeight())
-
-      // Set some generic attributes that don't need ranges
-      let attributes: [NSAttributedString.Key:Any] = [
-        .font: font,
-        .foregroundColor: child.color,
-      ]
-
-      // Create the attributed string with the generic attributes
-      let string = NSMutableAttributedString(string: child.text, attributes: attributes)
-
-      // Set the paragraph style attributes if necessary. We can check this by seeing if the provided
-      // line height is not 0.0.
-      let paragraphStyle = NSMutableParagraphStyle()
-      if child.lineHeight != 0.0 {
-        // Whenever we change the line height for the text, we are also removing the DynamicType
-        // adjustment for line height. We need to get the multiplier and apply that to the
-        // line height.
-        let scaleMultiplier = scaledFontSize / child.fontSize
-        paragraphStyle.minimumLineHeight = child.lineHeight * scaleMultiplier
-        paragraphStyle.maximumLineHeight = child.lineHeight * scaleMultiplier
-
-        string.addAttribute(
-          NSAttributedString.Key.paragraphStyle,
-          value: paragraphStyle,
-          range: NSMakeRange(0, string.length)
-        )
-
-        // To calcualte the size of the text without creating a new UILabel or UITextView, we have
-        // to store this line height for later.
-        self.lineHeight = child.lineHeight
-      } else {
-        self.lineHeight = font.lineHeight
-      }
-
-      finalAttributedString.append(string)
-    }
-
-    self.attributedText = finalAttributedString
-    self.dirtyLayout()
-  }
-
-  // To create the needed size we need to:
-  // 1. Get the max size that we can use for the view
-  // 2. Calculate the height of the text based on that max size
-  // 3. Determine how many lines the text is, and limit that number if it exceeds the max
-  // 4. Set the frame size and return the YGSize. YGSize requires Float values while CGSize needs CGFloat
-  func getNeededSize(maxWidth: Float) -> YGSize {
-    let maxSize = CGSize(width: CGFloat(maxWidth), height: CGFloat(MAXFLOAT))
-    let textSize = self.attributedText.boundingRect(with: maxSize, options: .usesLineFragmentOrigin, context: nil)
-
-    var totalLines = Int(ceil(textSize.height / self.lineHeight))
-
-    if self.numberOfLines != 0, totalLines > self.numberOfLines {
-      totalLines = self.numberOfLines
-    }
-
-    self.frameSize = CGSize(width: CGFloat(maxWidth), height: CGFloat(CGFloat(totalLines) * self.lineHeight))
-    return YGSize(width: Float(self.frameSize.width), height: Float(self.frameSize.height))
-  }
-}

modules/react-native-ui-text-view/package.json

@@ -1,9 +0,0 @@
-{
-  "name": "react-native-ui-text-view",
-  "version": "0.1.0",
-  "description": "UITextView in React Native on iOS",
-  "main": "src/index",
-  "author": "haileyok",
-  "license": "MIT",
-  "homepage": "https://github.com/bluesky-social/social-app/modules/react-native-ui-text-view"
-}

modules/react-native-ui-text-view/react-native-ui-text-view.podspec

@@ -1,42 +0,0 @@
-require "json"
-
-package = JSON.parse(File.read(File.join(__dir__, "package.json")))
-folly_compiler_flags = '-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1 -Wno-comma -Wno-shorten-64-to-32'
-
-Pod::Spec.new do |s|
-  s.name         = "react-native-ui-text-view"
-  s.version      = package["version"]
-  s.summary      = package["description"]
-  s.homepage     = package["homepage"]
-  s.license      = package["license"]
-  s.authors      = package["author"]
-
-  s.platforms    = { :ios => "11.0" }
-  s.source       = { :git => ".git", :tag => "#{s.version}" }
-
-  s.source_files = "ios/**/*.{h,m,mm,swift}"
-
-  # Use install_modules_dependencies helper to install the dependencies if React Native version >=0.71.0.
-  # See https://github.com/facebook/react-native/blob/febf6b7f33fdb4904669f99d795eba4c0f95d7bf/scripts/cocoapods/new_architecture.rb#L79.
-  if respond_to?(:install_modules_dependencies, true)
-    install_modules_dependencies(s)
-  else
-  s.dependency "React-Core"
-
-  # Don't install the dependencies when we run `pod install` in the old architecture.
-  if ENV['RCT_NEW_ARCH_ENABLED'] == '1' then
-    s.compiler_flags = folly_compiler_flags + " -DRCT_NEW_ARCH_ENABLED=1"
-    s.pod_target_xcconfig    = {
-        "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\"",
-        "OTHER_CPLUSPLUSFLAGS" => "-DFOLLY_NO_CONFIG -DFOLLY_MOBILE=1 -DFOLLY_USE_LIBCPP=1",
-        "CLANG_CXX_LANGUAGE_STANDARD" => "c++17"
-    }
-    s.dependency "React-RCTFabric"
-    s.dependency "React-Codegen"
-    s.dependency "RCT-Folly"
-    s.dependency "RCTRequired"
-    s.dependency "RCTTypeSafety"
-    s.dependency "ReactCommon/turbomodule/core"
-   end
-  end    
-end

modules/react-native-ui-text-view/src/UITextView.tsx

@@ -1,76 +0,0 @@
-import React from 'react'
-import {Platform, StyleSheet, TextProps, ViewStyle} from 'react-native'
-import {RNUITextView, RNUITextViewChild} from './index'
-
-const TextAncestorContext = React.createContext<[boolean, ViewStyle]>([
-  false,
-  StyleSheet.create({}),
-])
-const useTextAncestorContext = () => React.useContext(TextAncestorContext)
-
-const textDefaults: TextProps = {
-  allowFontScaling: true,
-  selectable: true,
-}
-
-export function UITextView({style, children, ...rest}: TextProps) {
-  const [isAncestor, rootStyle] = useTextAncestorContext()
-
-  // Flatten the styles, and apply the root styles when needed
-  const flattenedStyle = React.useMemo(
-    () => StyleSheet.flatten([rootStyle, style]),
-    [rootStyle, style],
-  )
-
-  if (Platform.OS !== 'ios') {
-    throw new Error('UITextView is only available on iOS')
-  }
-
-  if (!isAncestor) {
-    return (
-      <TextAncestorContext.Provider value={[true, flattenedStyle]}>
-        <RNUITextView
-          {...textDefaults}
-          {...rest}
-          ellipsizeMode={rest.ellipsizeMode ?? rest.lineBreakMode ?? 'tail'}
-          style={[{flex: 1}, flattenedStyle]}
-          onPress={undefined} // We want these to go to the children only
-          onLongPress={undefined}>
-          {React.Children.toArray(children).map((c, index) => {
-            if (React.isValidElement(c)) {
-              return c
-            } else if (typeof c === 'string') {
-              return (
-                <RNUITextViewChild
-                  key={index}
-                  style={flattenedStyle}
-                  text={c}
-                  {...rest}
-                />
-              )
-            }
-          })}
-        </RNUITextView>
-      </TextAncestorContext.Provider>
-    )
-  } else {
-    return (
-      <>
-        {React.Children.toArray(children).map((c, index) => {
-          if (React.isValidElement(c)) {
-            return c
-          } else if (typeof c === 'string') {
-            return (
-              <RNUITextViewChild
-                key={index}
-                style={flattenedStyle}
-                text={c}
-                {...rest}
-              />
-            )
-          }
-        })}
-      </>
-    )
-  }
-}

modules/react-native-ui-text-view/src/index.tsx

@@ -1,42 +0,0 @@
-import {
-  requireNativeComponent,
-  UIManager,
-  Platform,
-  type ViewStyle,
-  TextProps,
-} from 'react-native'
-
-const LINKING_ERROR =
-  `The package 'react-native-ui-text-view' doesn't seem to be linked. Make sure: \n\n` +
-  Platform.select({ios: "- You have run 'pod install'\n", default: ''}) +
-  '- You rebuilt the app after installing the package\n' +
-  '- You are not using Expo Go\n'
-
-export interface RNUITextViewProps extends TextProps {
-  children: React.ReactNode
-  style: ViewStyle[]
-}
-
-export interface RNUITextViewChildProps extends TextProps {
-  text: string
-  onTextPress?: (...args: any[]) => void
-  onTextLongPress?: (...args: any[]) => void
-}
-
-export const RNUITextView =
-  UIManager.getViewManagerConfig &&
-  UIManager.getViewManagerConfig('RNUITextView') != null
-    ? requireNativeComponent<RNUITextViewProps>('RNUITextView')
-    : () => {
-        throw new Error(LINKING_ERROR)
-      }
-
-export const RNUITextViewChild =
-  UIManager.getViewManagerConfig &&
-  UIManager.getViewManagerConfig('RNUITextViewChild') != null
-    ? requireNativeComponent<RNUITextViewChildProps>('RNUITextViewChild')
-    : () => {
-        throw new Error(LINKING_ERROR)
-      }
-
-export * from './UITextView'

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsky.app",
-  "version": "1.74.0",
+  "version": "1.77.0",
   "private": true,
   "engines": {
     "node": ">=18"
@@ -14,11 +14,13 @@
     "ios": "expo run:ios",
     "web": "expo start --web",
     "use-build-number": "./scripts/useBuildNumberEnv.sh",
+    "use-build-number-with-bump": "./scripts/useBuildNumberEnvWithBump.sh",
     "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/",
-    "build-all": "yarn intl:build && yarn use-build-number eas build --platform all",
-    "build-ios": "yarn use-build-number eas build -p ios",
-    "build-android": "yarn use-build-number eas build -p android",
-    "build": "yarn use-build-number eas build",
+    "build-all": "yarn intl:build && yarn use-build-number-with-bump eas build --platform all",
+    "build-ios": "yarn use-build-number-with-bump eas build -p ios",
+    "build-android": "yarn use-build-number-with-bump eas build -p android",
+    "build": "yarn use-build-number-with-bump eas build",
+    "build-embed": "cd bskyembed && yarn build && cd .. && node ./scripts/post-embed-build.js",
     "start": "expo start --dev-client",
     "start:prod": "expo start --dev-client --no-dev --minify",
     "clean-cache": "rm -rf node_modules/.cache/babel-loader/*",
@@ -26,7 +28,7 @@
     "test-watch": "NODE_ENV=test jest --watchAll",
     "test-ci": "NODE_ENV=test jest --ci --forceExit --reporters=default --reporters=jest-junit",
     "test-coverage": "NODE_ENV=test jest --coverage",
-    "lint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
+    "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx src",
     "typecheck": "tsc --project ./tsconfig.check.json",
     "e2e:mock-server": "./jest/dev-infra/with-test-redis-and-db.sh ts-node --project tsconfig.e2e.json __e2e__/mock-server.ts",
     "e2e:metro": "NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:ios",
@@ -34,17 +36,18 @@
     "e2e:run": "NODE_ENV=test detox test --configuration ios.sim.debug --take-screenshots all",
     "perf:test": "NODE_ENV=test maestro test",
     "perf:test:run": "NODE_ENV=test maestro test __e2e__/maestro/scroll.yaml",
-    "perf:test:measure": "NODE_ENV=test flashlight test --bundleId xyz.blueskyweb.app --testCommand 'yarn perf:test' --duration 150000 --resultsFilePath .perf/results.json",
+    "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 && yarn intl:compile",
-    "intl:check": "yarn intl:extract && git diff-index -G'(^[^\\*# /])|(^#\\w)|(^\\s+[^\\*#/])' HEAD || (echo '\n⚠️ i18n detected un-extracted translations\n' && exit 1)",
     "intl:extract": "lingui extract",
     "intl:compile": "lingui compile",
     "nuke": "rm -rf ./node_modules && rm -rf ./ios && rm -rf ./android",
     "update-extensions": "bash scripts/updateExtensions.sh",
     "export": "npx expo export",
-    "make-deploy-bundle": "bash scripts/bundleUpdate.sh"
+    "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"
   },
   "dependencies": {
     "@atproto/api": "^0.12.2",
@@ -54,6 +57,8 @@
     "@emoji-mart/react": "^1.1.1",
     "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^19.0.0",
+    "@floating-ui/dom": "^1.6.3",
+    "@floating-ui/react-dom": "^2.0.8",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
@@ -62,10 +67,7 @@
     "@mattermost/react-native-paste-input": "^0.6.4",
     "@miblanchard/react-native-slider": "^2.3.1",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@react-native-async-storage/async-storage": "1.21.0",
-    "@react-native-camera-roll/camera-roll": "^5.2.2",
-    "@react-native-clipboard/clipboard": "^1.10.0",
-    "@react-native-community/blur": "^4.3.0",
+    "@react-native-async-storage/async-storage": "1.23.1",
     "@react-native-masked-view/masked-view": "0.3.0",
     "@react-native-menu/menu": "^0.8.0",
     "@react-native-picker/picker": "2.6.1",
@@ -106,27 +108,31 @@
     "email-validator": "^2.0.4",
     "emoji-mart": "^5.5.2",
     "eventemitter3": "^5.0.1",
-    "expo": "^50.0.0-preview.10",
-    "expo-application": "~5.8.2",
-    "expo-build-properties": "^0.11.0",
-    "expo-camera": "~14.0.1",
-    "expo-constants": "~15.4.3",
-    "expo-dev-client": "~3.3.5",
-    "expo-device": "~5.9.2",
-    "expo-image": "~1.10.3",
+    "expo": "^50.0.8",
+    "expo-application": "^5.8.3",
+    "expo-build-properties": "^0.11.1",
+    "expo-camera": "~14.0.4",
+    "expo-clipboard": "^5.0.1",
+    "expo-constants": "~15.4.5",
+    "expo-dev-client": "~3.3.8",
+    "expo-device": "~5.9.3",
+    "expo-haptics": "^12.8.1",
+    "expo-image": "~1.10.6",
     "expo-image-manipulator": "^11.8.0",
     "expo-image-picker": "~14.7.1",
+    "expo-linear-gradient": "^12.7.2",
     "expo-linking": "^6.2.2",
-    "expo-localization": "~14.8.2",
+    "expo-localization": "~14.8.3",
     "expo-media-library": "~15.9.1",
-    "expo-notifications": "~0.27.3",
+    "expo-navigation-bar": "~2.8.1",
+    "expo-notifications": "~0.27.6",
     "expo-sharing": "^11.10.0",
-    "expo-splash-screen": "~0.26.2",
+    "expo-splash-screen": "~0.26.4",
     "expo-status-bar": "~1.11.1",
     "expo-system-ui": "~2.9.3",
-    "expo-task-manager": "~11.7.0",
-    "expo-updates": "~0.24.7",
-    "expo-web-browser": "~12.8.1",
+    "expo-task-manager": "~11.7.2",
+    "expo-updates": "~0.24.10",
+    "expo-web-browser": "~12.8.2",
     "fast-text-encoding": "^1.0.6",
     "history": "^5.3.0",
     "js-sha256": "^0.9.0",
@@ -141,7 +147,6 @@
     "lodash.samplesize": "^4.2.0",
     "lodash.set": "^4.3.2",
     "lodash.shuffle": "^4.2.0",
-    "lru_map": "^0.4.1",
     "mobx": "^6.6.1",
     "mobx-react-lite": "^3.4.0",
     "mobx-utils": "^6.0.6",
@@ -152,20 +157,16 @@
     "psl": "^1.9.0",
     "react": "18.2.0",
     "react-avatar-editor": "^13.0.0",
-    "react-circular-progressbar": "^2.1.0",
     "react-dom": "^18.2.0",
     "react-keyed-flatten-children": "^3.0.0",
     "react-native": "0.73.2",
-    "react-native-appstate-hook": "^1.0.6",
     "react-native-date-picker": "^4.4.0",
     "react-native-drawer-layout": "^4.0.0-alpha.3",
     "react-native-fs": "^2.20.0",
     "react-native-gesture-handler": "~2.14.0",
-    "react-native-get-random-values": "~1.8.0",
-    "react-native-haptic-feedback": "^1.14.0",
+    "react-native-get-random-values": "~1.11.0",
     "react-native-image-crop-picker": "^0.38.1",
     "react-native-ios-context-menu": "^1.15.3",
-    "react-native-linear-gradient": "^2.6.2",
     "react-native-pager-view": "6.2.3",
     "react-native-picker-select": "^8.1.0",
     "react-native-progress": "bluesky-social/react-native-progress",
@@ -174,12 +175,10 @@
     "react-native-safe-area-context": "4.8.2",
     "react-native-screens": "~3.29.0",
     "react-native-svg": "14.1.0",
-    "react-native-ui-text-view": "link:./modules/react-native-ui-text-view",
+    "react-native-uitextview": "^1.1.6",
     "react-native-url-polyfill": "^1.3.0",
     "react-native-uuid": "^2.0.1",
-    "react-native-version-number": "^0.3.6",
     "react-native-web": "~0.19.6",
-    "react-native-web-linear-gradient": "^1.1.2",
     "react-native-web-webview": "^1.0.2",
     "react-native-webview": "13.6.4",
     "react-responsive": "^9.0.2",
@@ -188,12 +187,11 @@
     "statsig-react-native-expo": "^4.6.1",
     "tippy.js": "^6.3.7",
     "tlds": "^1.234.0",
-    "use-deep-compare": "^1.1.0",
     "zeego": "^1.6.2",
     "zod": "^3.20.2"
   },
   "devDependencies": {
-    "@atproto/dev-env": "^0.2.28",
+    "@atproto/dev-env": "^0.3.4",
     "@babel/core": "^7.23.2",
     "@babel/preset-env": "^7.20.0",
     "@babel/runtime": "^7.20.0",
@@ -234,6 +232,7 @@
     "babel-preset-expo": "^10.0.0",
     "detox": "^20.14.8",
     "eslint": "^8.19.0",
+    "eslint-plugin-bsky-internal": "link:./eslint",
     "eslint-plugin-detox": "^1.0.0",
     "eslint-plugin-ft-flow": "^2.0.3",
     "eslint-plugin-lingui": "^0.2.0",
@@ -257,6 +256,7 @@
     "typescript": "^5.3.3",
     "url-loader": "^4.1.1",
     "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.10.1",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1"
   },
@@ -314,6 +314,9 @@
     ]
   },
   "lint-staged": {
-    "*{.js,.jsx,.ts,.tsx}": "yarn eslint --fix"
+    "*{.js,.jsx,.ts,.tsx}": [
+      "eslint --cache --fix",
+      "prettier --cache --write --ignore-unknown"
+    ]
   }
 }

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

@@ -3594,3 +3594,19 @@ index 19b61ff..04a9951 100644
  PasteInput_compileSdkVersion=30
  PasteInput_buildToolsVersion=30.0.2
  PasteInput_targetSdkVersion=30
+diff --git a/node_modules/@mattermost/react-native-paste-input/ios/PasteInputView.m b/node_modules/@mattermost/react-native-paste-input/ios/PasteInputView.m
+index e916023..0564d97 100644
+--- a/node_modules/@mattermost/react-native-paste-input/ios/PasteInputView.m
++++ b/node_modules/@mattermost/react-native-paste-input/ios/PasteInputView.m
+@@ -22,6 +22,11 @@ - (instancetype)initWithBridge:(RCTBridge *)bridge
+     _backedTextInputView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
+     _backedTextInputView.textInputDelegate = self;
+     
++    // Disable inline predictions to prevent jank in the composer
++    if (@available(iOS 17.0, *)) {
++      _backedTextInputView.inlinePredictionType = UITextInlinePredictionTypeNo;
++    }
++
+     [self addSubview:_backedTextInputView];
+   }
+ 

patches/expo-haptics+12.8.1.md

@@ -0,0 +1,11 @@
+# Expo Haptics Patch
+
+Whenever we migrated to Expo Haptics, there was a difference between how the previous and new libraries handled the
+Android implementation of an iOS "light" haptic. The previous library used the `Vibration` API solely, which does not
+have any configuration for intensity of vibration. The `Vibration` API has also been deprecated since SDK 26. See:
+https://github.com/mkuczera/react-native-haptic-feedback/blob/master/android/src/main/java/com/mkuczera/vibrateFactory/VibrateWithDuration.java
+
+Expo Haptics is using `VibrationManager` API on SDK >= 31. See: https://github.com/expo/expo/blob/main/packages/expo-haptics/android/src/main/java/expo/modules/haptics/HapticsModule.kt#L19
+The timing and intensity of their haptic configurations though differs greatly from the original implementation. This
+patch uses the new `VibrationManager` API to create the same vibration that would have been seen in the deprecated
+`Vibration` API.

patches/expo-haptics+12.8.1.patch

@@ -0,0 +1,13 @@
+diff --git a/node_modules/expo-haptics/android/src/main/java/expo/modules/haptics/HapticsModule.kt b/node_modules/expo-haptics/android/src/main/java/expo/modules/haptics/HapticsModule.kt
+index 26c52af..b949a4c 100644
+--- a/node_modules/expo-haptics/android/src/main/java/expo/modules/haptics/HapticsModule.kt
++++ b/node_modules/expo-haptics/android/src/main/java/expo/modules/haptics/HapticsModule.kt
+@@ -42,7 +42,7 @@ class HapticsModule : Module() {
+
+   private fun vibrate(type: HapticsVibrationType) {
+     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
+-      vibrator.vibrate(VibrationEffect.createWaveform(type.timings, type.amplitudes, -1))
++      vibrator.vibrate(VibrationEffect.createWaveform(type.oldSDKPattern, intArrayOf(0, 100), -1))
+     } else {
+       @Suppress("DEPRECATION")
+       vibrator.vibrate(type.oldSDKPattern, -1)

patches/expo-updates+0.24.7.patch

@@ -0,0 +1,26 @@
+diff --git a/node_modules/expo-updates/ios/EXUpdates/Update/NewUpdate.swift b/node_modules/expo-updates/ios/EXUpdates/Update/NewUpdate.swift
+index 189a5f5..8d5b8e6 100644
+--- a/node_modules/expo-updates/ios/EXUpdates/Update/NewUpdate.swift
++++ b/node_modules/expo-updates/ios/EXUpdates/Update/NewUpdate.swift
+@@ -68,13 +68,20 @@ public final class NewUpdate: Update {
+       processedAssets.append(asset)
+     }
+
++    // Instead of relying on various hacks to get the correct format for the specific
++    // platform on the backend, we can just add this little patch..
++    let dateFormatter = DateFormatter()
++    dateFormatter.locale = Locale(identifier: "en_US_POSIX")
++    dateFormatter.dateFormat = "yyyy-MM-dd'T'HH:mm:ssZ"
++    let date = dateFormatter.date(from:commitTime) ?? RCTConvert.nsDate(commitTime)!
++
+     return Update(
+       manifest: manifest,
+       config: config,
+       database: database,
+       updateId: uuid,
+       scopeKey: config.scopeKey,
+-      commitTime: RCTConvert.nsDate(commitTime),
++      commitTime: date,
+       runtimeVersion: runtimeVersion,
+       keep: true,
+       status: UpdateStatus.StatusPending,

patches/expo-updates+0.24.7.patch.md

@@ -0,0 +1,7 @@
+# Expo-Updates Patch
+
+This is a small patch to convert timestamp formats that are returned from the backend. Instead of relying on the
+backend to return the correct format for a specific format (the format required on Android is not the same as on iOS)
+we can just add this conversion in.
+
+Don't remove unless we make changes on the backend to support both platforms.

patches/react-native+0.73.2.patch

@@ -1,11 +1,22 @@
+diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
+index e9b330f..1ecdf0a 100644
+--- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
++++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.h
+@@ -16,4 +16,6 @@
+ @property (nonatomic, copy) RCTDirectEventBlock onRefresh;
+ @property (nonatomic, weak) UIScrollView *scrollView;
+ 
++- (void)forwarderBeginRefreshing;
++
+ @end
 diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
-index b09e653..d290dab 100644
+index b09e653..4c32b31 100644
 --- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
 +++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
-@@ -198,6 +198,14 @@ - (void)refreshControlValueChanged
+@@ -198,9 +198,53 @@ - (void)refreshControlValueChanged
    [self setCurrentRefreshingState:super.refreshing];
    _refreshingProgrammatically = NO;
-
+ 
 +  if (@available(iOS 17.4, *)) {
 +    if (_currentRefreshingState) {
 +      UIImpactFeedbackGenerator *feedbackGenerator = [[UIImpactFeedbackGenerator alloc] initWithStyle:UIImpactFeedbackStyleLight];
@@ -16,4 +27,43 @@ index b09e653..d290dab 100644
 +
    if (_onRefresh) {
      _onRefresh(nil);
-   }
+   }
+ }
+ 
++/*
++ This method is used by Bluesky's ExpoScrollForwarder. This allows other React Native
++ libraries to perform a refresh of a scrollview and access the refresh control's onRefresh
++ function.
++ */
++- (void)forwarderBeginRefreshing
++{
++  _refreshingProgrammatically = NO;
++  
++  [self sizeToFit];
++  
++  if (!self.scrollView) {
++    return;
++  }
++  
++  UIScrollView *scrollView = (UIScrollView *)self.scrollView;
++  
++  [UIView animateWithDuration:0.3
++    delay:0
++    options:UIViewAnimationOptionBeginFromCurrentState
++    animations:^(void) {
++      // Whenever we call this method, the scrollview will always be at a position of
++      // -130 or less. Scrolling back to -65 simulates the default behavior of RCTRefreshControl
++      [scrollView setContentOffset:CGPointMake(0, -65)];
++    }
++    completion:^(__unused BOOL finished) {
++      [super beginRefreshing];
++      [self setCurrentRefreshingState:super.refreshing];
++    
++      if (self->_onRefresh) {
++        self->_onRefresh(nil);
++      }
++    }
++  ];
++}
++
+ @end

patches/react-native+0.73.2.patch.md

@@ -1,5 +1,13 @@
-# RefreshControl Patch
+# ***This second part of this patch is load bearing, do not remove.***
+
+## RefreshControl Patch - iOS 17.4 Haptic Regression
 
 Patching `RCTRefreshControl.mm` temporarily to play an impact haptic on refresh when using iOS 17.4 or higher. Since
 17.4, there has been a regression somewhere causing haptics to not play on iOS on refresh. Should monitor for an update
-in the RN repo: https://github.com/facebook/react-native/issues/43388
+in the RN repo: https://github.com/facebook/react-native/issues/43388
+
+## RefreshControl Path - ScrollForwarder
+
+Patching `RCTRefreshControl.m` and `RCTRefreshControl.h` to add a new `forwarderBeginRefreshing` method to the class.
+This method is used by `ExpoScrollForwarder` to initiate a refresh of the underlying `UIScrollView` from inside that
+module.

scripts/bundleUpdate.sh

@@ -9,10 +9,13 @@ rm -rf bundle.tar.gz
 echo "Creating tarball..."
 node scripts/bundleUpdate.js
 
-cd bundleTempDir || exit
+if [ -z "$RUNTIME_VERSION" ]; then
+  RUNTIME_VERSION=$(cat package.json | jq '.version' -r)
+fi
 
+cd bundleTempDir || exit
 BUNDLE_VERSION=$(date +%s)
-DEPLOYMENT_URL="https://updates.bsky.app/v1/upload?runtime-version=$RUNTIME_VERSION&bundle-version=$BUNDLE_VERSION"
+DEPLOYMENT_URL="https://updates.bsky.app/v1/upload?runtime-version=$RUNTIME_VERSION&bundle-version=$BUNDLE_VERSION&channel=$CHANNEL_NAME&ios-build-number=$BSKY_IOS_BUILD_NUMBER&android-build-number=$BSKY_ANDROID_VERSION_CODE"
 
 tar czvf bundle.tar.gz ./*
 

scripts/post-embed-build.js

@@ -0,0 +1,49 @@
+// const path = require('node:path')
+// const fs = require('node:fs')
+
+// const projectRoot = path.join(__dirname, '..')
+
+// // copy embed assets to web-build
+
+// const embedAssetSource = path.join(
+//   projectRoot,
+//   'bskyembed',
+//   'dist',
+//   'static',
+//   'embed',
+//   'assets',
+// )
+
+// const embedAssetDest = path.join(
+//   projectRoot,
+//   'web-build',
+//   'static',
+//   'embed',
+//   'assets',
+// )
+
+// fs.cpSync(embedAssetSource, embedAssetDest, {recursive: true})
+
+// // copy entrypoint(s) to web-build
+
+// // additional entrypoints will need more work, but this'll do for now
+// const embedHtmlSource = path.join(
+//   projectRoot,
+//   'bskyembed',
+//   'dist',
+//   'index.html',
+// )
+
+// const embedHtmlDest = path.join(
+//   projectRoot,
+//   'web-build',
+//   'static',
+//   'embed',
+//   'post.html',
+// )
+
+// fs.copyFileSync(embedHtmlSource, embedHtmlDest)
+
+// console.log(`Copied embed assets to web-build`)
+
+console.log('post-embed-build.js - waiting for embedr!')

scripts/useBuildNumberEnv.sh

@@ -1,11 +1,7 @@
 #!/bin/bash
 outputIos=$(eas build:version:get -p ios)
 outputAndroid=$(eas build:version:get -p android)
-currentIosVersion=${outputIos#*buildNumber - }
-currentAndroidVersion=${outputAndroid#*versionCode - }
-
-BSKY_IOS_BUILD_NUMBER=$((currentIosVersion+1))
-BSKY_ANDROID_VERSION_CODE=$((currentAndroidVersion+1))
+BSKY_IOS_BUILD_NUMBER=${outputIos#*buildNumber - }
+BSKY_ANDROID_VERSION_CODE=${outputAndroid#*versionCode - }
 
 bash -c "BSKY_IOS_BUILD_NUMBER=$BSKY_IOS_BUILD_NUMBER BSKY_ANDROID_VERSION_CODE=$BSKY_ANDROID_VERSION_CODE $*"
-

scripts/useBuildNumberEnvWithBump.sh

@@ -0,0 +1,11 @@
+#!/bin/bash
+outputIos=$(eas build:version:get -p ios)
+outputAndroid=$(eas build:version:get -p android)
+currentIosVersion=${outputIos#*buildNumber - }
+currentAndroidVersion=${outputAndroid#*versionCode - }
+
+BSKY_IOS_BUILD_NUMBER=$((currentIosVersion+1))
+BSKY_ANDROID_VERSION_CODE=$((currentAndroidVersion+1))
+
+bash -c "BSKY_IOS_BUILD_NUMBER=$BSKY_IOS_BUILD_NUMBER BSKY_ANDROID_VERSION_CODE=$BSKY_ANDROID_VERSION_CODE $*"
+

src/App.native.tsx

@@ -12,19 +12,15 @@ import {
 import * as SplashScreen from 'expo-splash-screen'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client'
+import {useQueryClient} from '@tanstack/react-query'
 
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
 import {init as initPersistedState} from '#/state/persisted'
 import * as persisted from '#/state/persisted'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import {useIntentHandler} from 'lib/hooks/useIntentHandler'
-import * as notifications from 'lib/notifications/notifications'
-import {
-  asyncStoragePersister,
-  dehydrateOptions,
-  queryClient,
-} from 'lib/react-query'
+import {useNotificationsListener} from 'lib/notifications/notifications'
+import {QueryProvider} from 'lib/react-query'
 import {s} from 'lib/styles'
 import {ThemeProvider} from 'lib/ThemeContext'
 import {Provider as DialogStateProvider} from 'state/dialogs'
@@ -59,11 +55,11 @@ function InnerApp() {
   const {resumeSession} = useSessionApi()
   const theme = useColorModeTheme()
   const {_} = useLingui()
+
   useIntentHandler()
 
   // init
   useEffect(() => {
-    notifications.init(queryClient)
     listenSessionDropped(() => {
       Toast.show(_(msg`Sorry! Your session expired. Please log in again.`))
     })
@@ -79,25 +75,29 @@ function InnerApp() {
           <React.Fragment
             // Resets the entire tree below when it changes:
             key={currentAccount?.did}>
-            <StatsigProvider>
-              <LabelDefsProvider>
-                <LoggedOutViewProvider>
-                  <SelectedFeedProvider>
-                    <UnreadNotifsProvider>
-                      <ThemeProvider theme={theme}>
-                        {/* All components should be within this provider */}
-                        <RootSiblingParent>
-                          <GestureHandlerRootView style={s.h100pct}>
-                            <TestCtrls />
-                            <Shell />
-                          </GestureHandlerRootView>
-                        </RootSiblingParent>
-                      </ThemeProvider>
-                    </UnreadNotifsProvider>
-                  </SelectedFeedProvider>
-                </LoggedOutViewProvider>
-              </LabelDefsProvider>
-            </StatsigProvider>
+            <QueryProvider currentDid={currentAccount?.did}>
+              <PushNotificationsListener>
+                <StatsigProvider>
+                  <LabelDefsProvider>
+                    <LoggedOutViewProvider>
+                      <SelectedFeedProvider>
+                        <UnreadNotifsProvider>
+                          <ThemeProvider theme={theme}>
+                            {/* All components should be within this provider */}
+                            <RootSiblingParent>
+                              <GestureHandlerRootView style={s.h100pct}>
+                                <TestCtrls />
+                                <Shell />
+                              </GestureHandlerRootView>
+                            </RootSiblingParent>
+                          </ThemeProvider>
+                        </UnreadNotifsProvider>
+                      </SelectedFeedProvider>
+                    </LoggedOutViewProvider>
+                  </LabelDefsProvider>
+                </StatsigProvider>
+              </PushNotificationsListener>
+            </QueryProvider>
           </React.Fragment>
         </Splash>
       </Alf>
@@ -105,6 +105,12 @@ function InnerApp() {
   )
 }
 
+function PushNotificationsListener({children}: {children: React.ReactNode}) {
+  const queryClient = useQueryClient()
+  useNotificationsListener(queryClient)
+  return children
+}
+
 function App() {
   const [isReady, setReady] = useState(false)
 
@@ -121,31 +127,27 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <PersistQueryClientProvider
-      client={queryClient}
-      persistOptions={{persister: asyncStoragePersister, dehydrateOptions}}>
-      <SessionProvider>
-        <ShellStateProvider>
-          <PrefsStateProvider>
-            <MutedThreadsProvider>
-              <InvitesStateProvider>
-                <ModalStateProvider>
-                  <DialogStateProvider>
-                    <LightboxStateProvider>
-                      <I18nProvider>
-                        <PortalProvider>
-                          <InnerApp />
-                        </PortalProvider>
-                      </I18nProvider>
-                    </LightboxStateProvider>
-                  </DialogStateProvider>
-                </ModalStateProvider>
-              </InvitesStateProvider>
-            </MutedThreadsProvider>
-          </PrefsStateProvider>
-        </ShellStateProvider>
-      </SessionProvider>
-    </PersistQueryClientProvider>
+    <SessionProvider>
+      <ShellStateProvider>
+        <PrefsStateProvider>
+          <MutedThreadsProvider>
+            <InvitesStateProvider>
+              <ModalStateProvider>
+                <DialogStateProvider>
+                  <LightboxStateProvider>
+                    <I18nProvider>
+                      <PortalProvider>
+                        <InnerApp />
+                      </PortalProvider>
+                    </I18nProvider>
+                  </LightboxStateProvider>
+                </DialogStateProvider>
+              </ModalStateProvider>
+            </InvitesStateProvider>
+          </MutedThreadsProvider>
+        </PrefsStateProvider>
+      </ShellStateProvider>
+    </SessionProvider>
   )
 }
 

src/App.web.tsx

@@ -1,44 +1,38 @@
 import 'lib/sentry' // must be near top
-
-import React, {useState, useEffect} from 'react'
-import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client'
-import {SafeAreaProvider} from 'react-native-safe-area-context'
-import {RootSiblingParent} from 'react-native-root-siblings'
-
 import 'view/icons'
 
-import {ThemeProvider as Alf} from '#/alf'
-import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
+import React, {useEffect, useState} from 'react'
+import {RootSiblingParent} from 'react-native-root-siblings'
+import {SafeAreaProvider} from 'react-native-safe-area-context'
+
+import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
 import {init as initPersistedState} from '#/state/persisted'
-import {Shell} from 'view/shell/index'
-import {ToastContainer} from 'view/com/util/Toast.web'
-import {ThemeProvider} from 'lib/ThemeContext'
-import {
-  queryClient,
-  asyncStoragePersister,
-  dehydrateOptions,
-} from 'lib/react-query'
-import {Provider as ShellStateProvider} from 'state/shell'
-import {Provider as ModalStateProvider} from 'state/modals'
-import {Provider as DialogStateProvider} from 'state/dialogs'
-import {Provider as LightboxStateProvider} from 'state/lightbox'
-import {Provider as MutedThreadsProvider} from 'state/muted-threads'
-import {Provider as InvitesStateProvider} from 'state/invites'
-import {Provider as PrefsStateProvider} from 'state/preferences'
-import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
-import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
+import * as persisted from '#/state/persisted'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
-import I18nProvider from './locale/i18nProvider'
+import {useIntentHandler} from 'lib/hooks/useIntentHandler'
+import {QueryProvider} from 'lib/react-query'
+import {ThemeProvider} from 'lib/ThemeContext'
+import {Provider as DialogStateProvider} from 'state/dialogs'
+import {Provider as InvitesStateProvider} from 'state/invites'
+import {Provider as LightboxStateProvider} from 'state/lightbox'
+import {Provider as ModalStateProvider} from 'state/modals'
+import {Provider as MutedThreadsProvider} from 'state/muted-threads'
+import {Provider as PrefsStateProvider} from 'state/preferences'
+import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
 import {
   Provider as SessionProvider,
   useSession,
   useSessionApi,
 } from 'state/session'
-import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
-import * as persisted from '#/state/persisted'
+import {Provider as ShellStateProvider} from 'state/shell'
+import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
+import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
+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 PortalProvider} from '#/components/Portal'
-import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
-import {useIntentHandler} from 'lib/hooks/useIntentHandler'
+import I18nProvider from './locale/i18nProvider'
 
 function InnerApp() {
   const {isInitialLoad, currentAccount} = useSession()
@@ -60,25 +54,27 @@ function InnerApp() {
       <React.Fragment
         // Resets the entire tree below when it changes:
         key={currentAccount?.did}>
-        <StatsigProvider>
-          <LabelDefsProvider>
-            <LoggedOutViewProvider>
-              <SelectedFeedProvider>
-                <UnreadNotifsProvider>
-                  <ThemeProvider theme={theme}>
-                    {/* All components should be within this provider */}
-                    <RootSiblingParent>
-                      <SafeAreaProvider>
-                        <Shell />
-                      </SafeAreaProvider>
-                    </RootSiblingParent>
-                    <ToastContainer />
-                  </ThemeProvider>
-                </UnreadNotifsProvider>
-              </SelectedFeedProvider>
-            </LoggedOutViewProvider>
-          </LabelDefsProvider>
-        </StatsigProvider>
+        <QueryProvider currentDid={currentAccount?.did}>
+          <StatsigProvider>
+            <LabelDefsProvider>
+              <LoggedOutViewProvider>
+                <SelectedFeedProvider>
+                  <UnreadNotifsProvider>
+                    <ThemeProvider theme={theme}>
+                      {/* All components should be within this provider */}
+                      <RootSiblingParent>
+                        <SafeAreaProvider>
+                          <Shell />
+                        </SafeAreaProvider>
+                      </RootSiblingParent>
+                      <ToastContainer />
+                    </ThemeProvider>
+                  </UnreadNotifsProvider>
+                </SelectedFeedProvider>
+              </LoggedOutViewProvider>
+            </LabelDefsProvider>
+          </StatsigProvider>
+        </QueryProvider>
       </React.Fragment>
     </Alf>
   )
@@ -100,31 +96,27 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <PersistQueryClientProvider
-      client={queryClient}
-      persistOptions={{persister: asyncStoragePersister, dehydrateOptions}}>
-      <SessionProvider>
-        <ShellStateProvider>
-          <PrefsStateProvider>
-            <MutedThreadsProvider>
-              <InvitesStateProvider>
-                <ModalStateProvider>
-                  <DialogStateProvider>
-                    <LightboxStateProvider>
-                      <I18nProvider>
-                        <PortalProvider>
-                          <InnerApp />
-                        </PortalProvider>
-                      </I18nProvider>
-                    </LightboxStateProvider>
-                  </DialogStateProvider>
-                </ModalStateProvider>
-              </InvitesStateProvider>
-            </MutedThreadsProvider>
-          </PrefsStateProvider>
-        </ShellStateProvider>
-      </SessionProvider>
-    </PersistQueryClientProvider>
+    <SessionProvider>
+      <ShellStateProvider>
+        <PrefsStateProvider>
+          <MutedThreadsProvider>
+            <InvitesStateProvider>
+              <ModalStateProvider>
+                <DialogStateProvider>
+                  <LightboxStateProvider>
+                    <I18nProvider>
+                      <PortalProvider>
+                        <InnerApp />
+                      </PortalProvider>
+                    </I18nProvider>
+                  </LightboxStateProvider>
+                </DialogStateProvider>
+              </ModalStateProvider>
+            </InvitesStateProvider>
+          </MutedThreadsProvider>
+        </PrefsStateProvider>
+      </ShellStateProvider>
+    </SessionProvider>
   )
 }
 

src/Navigation.tsx

@@ -193,7 +193,7 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
       <Stack.Screen
         name="ProfileFeed"
         getComponent={() => ProfileFeedScreen}
-        options={{title: title(msg`Feed`), requireAuth: true}}
+        options={{title: title(msg`Feed`)}}
       />
       <Stack.Screen
         name="ProfileFeedLikedBy"
@@ -331,11 +331,7 @@ function HomeTabNavigator() {
         animationDuration: 250,
         contentStyle: pal.view,
       }}>
-      <HomeTab.Screen
-        name="Home"
-        getComponent={() => HomeScreen}
-        options={{requireAuth: true}}
-      />
+      <HomeTab.Screen name="Home" getComponent={() => HomeScreen} />
       {commonScreens(HomeTab)}
     </HomeTab.Navigator>
   )
@@ -371,11 +367,7 @@ function FeedsTabNavigator() {
         animationDuration: 250,
         contentStyle: pal.view,
       }}>
-      <FeedsTab.Screen
-        name="Feeds"
-        getComponent={() => FeedsScreen}
-        options={{requireAuth: true}}
-      />
+      <FeedsTab.Screen name="Feeds" getComponent={() => FeedsScreen} />
       {commonScreens(FeedsTab as typeof HomeTab)}
     </FeedsTab.Navigator>
   )
@@ -451,7 +443,7 @@ const FlatNavigator = () => {
       <Flat.Screen
         name="Home"
         getComponent={() => HomeScreen}
-        options={{title: title(msg`Home`), requireAuth: true}}
+        options={{title: title(msg`Home`)}}
       />
       <Flat.Screen
         name="Search"
@@ -461,7 +453,7 @@ const FlatNavigator = () => {
       <Flat.Screen
         name="Feeds"
         getComponent={() => FeedsScreen}
-        options={{title: title(msg`Feeds`), requireAuth: true}}
+        options={{title: title(msg`Feeds`)}}
       />
       <Flat.Screen
         name="Notifications"
@@ -539,8 +531,10 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
   const theme = useColorSchemeStyle(DefaultTheme, DarkTheme)
   const {currentAccount} = useSession()
   const {openModal} = useModalControls()
+  const prevLoggedRouteName = React.useRef<string | undefined>(undefined)
 
   function onReady() {
+    prevLoggedRouteName.current = getCurrentRouteName()
     initAnalytics(currentAccount)
 
     if (currentAccount && shouldRequestEmailConfirmation(currentAccount)) {
@@ -555,7 +549,10 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
       linking={LINKING}
       theme={theme}
       onStateChange={() => {
-        logEvent('router:navigate', {})
+        logEvent('router:navigate', {
+          from: prevLoggedRouteName.current,
+        })
+        prevLoggedRouteName.current = getCurrentRouteName()
       }}
       onReady={() => {
         attachRouteToLogEvents(getCurrentRouteName)

src/components/AccountList.tsx

@@ -0,0 +1,141 @@
+import React, {useCallback} from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useProfileQuery} from '#/state/queries/profile'
+import {type SessionAccount, useSession} from '#/state/session'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {atoms as a, useTheme} from '#/alf'
+import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron'
+import {Button} from './Button'
+import {Text} from './Typography'
+
+export function AccountList({
+  onSelectAccount,
+  onSelectOther,
+  otherLabel,
+}: {
+  onSelectAccount: (account: SessionAccount) => void
+  onSelectOther: () => void
+  otherLabel?: string
+}) {
+  const {isSwitchingAccounts, currentAccount, accounts} = useSession()
+  const t = useTheme()
+  const {_} = useLingui()
+
+  const onPressAddAccount = useCallback(() => {
+    onSelectOther()
+  }, [onSelectOther])
+
+  return (
+    <View
+      style={[
+        a.rounded_md,
+        a.overflow_hidden,
+        a.border,
+        t.atoms.border_contrast_low,
+      ]}>
+      {accounts.map(account => (
+        <React.Fragment key={account.did}>
+          <AccountItem
+            account={account}
+            onSelect={onSelectAccount}
+            isCurrentAccount={account.did === currentAccount?.did}
+          />
+          <View style={[a.border_b, t.atoms.border_contrast_low]} />
+        </React.Fragment>
+      ))}
+      <Button
+        testID="chooseAddAccountBtn"
+        style={[a.flex_1]}
+        onPress={isSwitchingAccounts ? undefined : onPressAddAccount}
+        label={_(msg`Login to account that is not listed`)}>
+        {({hovered, pressed}) => (
+          <View
+            style={[
+              a.flex_1,
+              a.flex_row,
+              a.align_center,
+              {height: 48},
+              (hovered || pressed || isSwitchingAccounts) &&
+                t.atoms.bg_contrast_25,
+            ]}>
+            <Text
+              style={[
+                a.align_baseline,
+                a.flex_1,
+                a.flex_row,
+                a.py_sm,
+                {paddingLeft: 48},
+              ]}>
+              {otherLabel ?? <Trans>Other account</Trans>}
+            </Text>
+            <Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
+          </View>
+        )}
+      </Button>
+    </View>
+  )
+}
+
+function AccountItem({
+  account,
+  onSelect,
+  isCurrentAccount,
+}: {
+  account: SessionAccount
+  onSelect: (account: SessionAccount) => void
+  isCurrentAccount: boolean
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {data: profile} = useProfileQuery({did: account.did})
+
+  const onPress = React.useCallback(() => {
+    onSelect(account)
+  }, [account, onSelect])
+
+  return (
+    <Button
+      testID={`chooseAccountBtn-${account.handle}`}
+      key={account.did}
+      style={[a.flex_1]}
+      onPress={onPress}
+      label={
+        isCurrentAccount
+          ? _(msg`Continue as ${account.handle} (currently signed in)`)
+          : _(msg`Sign in as ${account.handle}`)
+      }>
+      {({hovered, pressed}) => (
+        <View
+          style={[
+            a.flex_1,
+            a.flex_row,
+            a.align_center,
+            {height: 48},
+            (hovered || pressed) && t.atoms.bg_contrast_25,
+          ]}>
+          <View style={a.p_md}>
+            <UserAvatar avatar={profile?.avatar} size={24} />
+          </View>
+          <Text style={[a.align_baseline, a.flex_1, a.flex_row, a.py_sm]}>
+            <Text style={[a.font_bold]}>
+              {profile?.displayName || account.handle}{' '}
+            </Text>
+            <Text style={[t.atoms.text_contrast_medium]}>{account.handle}</Text>
+          </Text>
+          {isCurrentAccount ? (
+            <Check
+              size="sm"
+              style={[{color: t.palette.positive_600}, a.mr_md]}
+            />
+          ) : (
+            <Chevron size="sm" style={[t.atoms.text, a.mr_md]} />
+          )}
+        </View>
+      )}
+    </Button>
+  )
+}

src/components/AppLanguageDropdown.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import {View} from 'react-native'
+import RNPickerSelect, {PickerSelectProps} from 'react-native-picker-select'
+
+import {sanitizeAppLanguageSetting} from '#/locale/helpers'
+import {APP_LANGUAGES} from '#/locale/languages'
+import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
+import {atoms as a, useTheme} from '#/alf'
+import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
+
+export function AppLanguageDropdown() {
+  const t = useTheme()
+
+  const langPrefs = useLanguagePrefs()
+  const setLangPrefs = useLanguagePrefsApi()
+  const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage)
+
+  const onChangeAppLanguage = React.useCallback(
+    (value: Parameters<PickerSelectProps['onValueChange']>[0]) => {
+      if (!value) return
+      if (sanitizedLang !== value) {
+        setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
+      }
+    },
+    [sanitizedLang, setLangPrefs],
+  )
+
+  return (
+    <View style={a.relative}>
+      <RNPickerSelect
+        placeholder={{}}
+        value={sanitizedLang}
+        onValueChange={onChangeAppLanguage}
+        items={APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => ({
+          label: l.name,
+          value: l.code2,
+          key: l.code2,
+        }))}
+        useNativeAndroidPickerStyle={false}
+        style={{
+          inputAndroid: {
+            color: t.atoms.text_contrast_medium.color,
+            fontSize: 16,
+            paddingRight: 12 + 4,
+          },
+          inputIOS: {
+            color: t.atoms.text.color,
+            fontSize: 16,
+            paddingRight: 12 + 4,
+          },
+        }}
+      />
+
+      <View
+        style={[
+          a.absolute,
+          a.inset_0,
+          {left: 'auto'},
+          {pointerEvents: 'none'},
+          a.align_center,
+          a.justify_center,
+        ]}>
+        <ChevronDown fill={t.atoms.text.color} size="xs" />
+      </View>
+    </View>
+  )
+}

src/components/AppLanguageDropdown.web.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {sanitizeAppLanguageSetting} from '#/locale/helpers'
+import {APP_LANGUAGES} from '#/locale/languages'
+import {useLanguagePrefs, useLanguagePrefsApi} from '#/state/preferences'
+import {atoms as a, useTheme} from '#/alf'
+import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
+import {Text} from '#/components/Typography'
+
+export function AppLanguageDropdown() {
+  const t = useTheme()
+
+  const langPrefs = useLanguagePrefs()
+  const setLangPrefs = useLanguagePrefsApi()
+
+  const sanitizedLang = sanitizeAppLanguageSetting(langPrefs.appLanguage)
+
+  const onChangeAppLanguage = React.useCallback(
+    (ev: React.ChangeEvent<HTMLSelectElement>) => {
+      const value = ev.target.value
+
+      if (!value) return
+      if (sanitizedLang !== value) {
+        setLangPrefs.setAppLanguage(sanitizeAppLanguageSetting(value))
+      }
+    },
+    [sanitizedLang, setLangPrefs],
+  )
+
+  return (
+    <View style={[a.flex_row, a.gap_sm, a.align_center, a.flex_shrink]}>
+      <Text aria-hidden={true} style={t.atoms.text_contrast_medium}>
+        {APP_LANGUAGES.find(l => l.code2 === sanitizedLang)?.name}
+      </Text>
+      <ChevronDown fill={t.atoms.text.color} size="xs" style={a.flex_shrink} />
+
+      <select
+        value={sanitizedLang}
+        onChange={onChangeAppLanguage}
+        style={{
+          cursor: 'pointer',
+          MozAppearance: 'none',
+          WebkitAppearance: 'none',
+          appearance: 'none',
+          position: 'absolute',
+          inset: 0,
+          width: '100%',
+          color: 'transparent',
+          background: 'transparent',
+          border: 0,
+          padding: 0,
+        }}>
+        {APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => (
+          <option key={l.code2} value={l.code2}>
+            {l.name}
+          </option>
+        ))}
+      </select>
+    </View>
+  )
+}

src/components/Button.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
 import {
-  Pressable,
-  Text,
-  PressableProps,
-  TextProps,
-  ViewStyle,
   AccessibilityProps,
-  View,
-  TextStyle,
-  StyleSheet,
+  Pressable,
+  PressableProps,
   StyleProp,
+  StyleSheet,
+  Text,
+  TextProps,
+  TextStyle,
+  View,
+  ViewStyle,
 } from 'react-native'
-import LinearGradient from 'react-native-linear-gradient'
+import {LinearGradient} from 'expo-linear-gradient'
 
-import {useTheme, atoms as a, tokens, android, flatten} from '#/alf'
+import {android, atoms as a, flatten, tokens, useTheme} from '#/alf'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {normalizeTextStyles} from '#/components/Typography'
 
@@ -58,6 +58,10 @@ export type ButtonState = {
 
 export type ButtonContext = VariantProps & ButtonState
 
+type NonTextElements =
+  | React.ReactElement
+  | Iterable<React.ReactElement | null | undefined | boolean>
+
 export type ButtonProps = Pick<
   PressableProps,
   'disabled' | 'onPress' | 'testID'
@@ -67,11 +71,9 @@ export type ButtonProps = Pick<
     testID?: string
     label: string
     style?: StyleProp<ViewStyle>
-    children:
-      | React.ReactNode
-      | string
-      | ((context: ButtonContext) => React.ReactNode | string)
+    children: NonTextElements | ((context: ButtonContext) => NonTextElements)
   }
+
 export type ButtonTextProps = TextProps & VariantProps & {disabled?: boolean}
 
 const Context = React.createContext<VariantProps & ButtonState>({
@@ -403,13 +405,7 @@ export function Button({
         </View>
       )}
       <Context.Provider value={context}>
-        {typeof children === 'string' ? (
-          <ButtonText>{children}</ButtonText>
-        ) : typeof children === 'function' ? (
-          children(context)
-        ) : (
-          children
-        )}
+        {typeof children === 'function' ? children(context) : children}
       </Context.Provider>
     </Pressable>
   )

src/components/Dialog/index.tsx

@@ -83,7 +83,7 @@ export function Outer({
   const sheetOptions = nativeOptions?.sheet || {}
   const hasSnapPoints = !!sheetOptions.snapPoints
   const insets = useSafeAreaInsets()
-  const closeCallback = React.useRef<() => void>()
+  const closeCallbacks = React.useRef<(() => void)[]>([])
   const {setDialogIsOpen} = useDialogStateControlContext()
 
   /*
@@ -96,22 +96,51 @@ export function Outer({
    */
   const isOpen = openIndex > -1
 
+  const callQueuedCallbacks = React.useCallback(() => {
+    for (const cb of closeCallbacks.current) {
+      try {
+        cb()
+      } catch (e: any) {
+        logger.error('Error running close callback', e)
+      }
+    }
+
+    closeCallbacks.current = []
+  }, [])
+
   const open = React.useCallback<DialogControlProps['open']>(
     ({index} = {}) => {
+      // Run any leftover callbacks that might have been queued up before calling `.open()`
+      callQueuedCallbacks()
+
       setDialogIsOpen(control.id, true)
       // can be set to any index of `snapPoints`, but `0` is the first i.e. "open"
       setOpenIndex(index || 0)
+      sheet.current?.snapToIndex(index || 0)
     },
-    [setOpenIndex, setDialogIsOpen, control.id],
+    [setDialogIsOpen, control.id, callQueuedCallbacks],
   )
 
+  // This is the function that we call when we want to dismiss the dialog.
   const close = React.useCallback<DialogControlProps['close']>(cb => {
-    if (cb && typeof cb === 'function') {
-      closeCallback.current = cb
+    if (typeof cb === 'function') {
+      closeCallbacks.current.push(cb)
     }
     sheet.current?.close()
   }, [])
 
+  // This is the actual thing we are doing once we "confirm" the dialog. We want the dialog's close animation to
+  // happen before we run this. It is passed to the `BottomSheet` component.
+  const onCloseAnimationComplete = React.useCallback(() => {
+    // This removes the dialog from our list of stored dialogs. Not super necessary on iOS, but on Android this
+    // tells us that we need to toggle the accessibility overlay setting
+    setDialogIsOpen(control.id, false)
+    setOpenIndex(-1)
+
+    callQueuedCallbacks()
+    onClose?.()
+  }, [callQueuedCallbacks, control.id, onClose, setDialogIsOpen])
+
   useImperativeHandle(
     control.ref,
     () => ({
@@ -121,21 +150,6 @@ export function Outer({
     [open, close],
   )
 
-  const onCloseInner = React.useCallback(() => {
-    try {
-      closeCallback.current?.()
-    } catch (e: any) {
-      logger.error(`Dialog closeCallback failed`, {
-        message: e.message,
-      })
-    } finally {
-      closeCallback.current = undefined
-    }
-    setDialogIsOpen(control.id, false)
-    onClose?.()
-    setOpenIndex(-1)
-  }, [control.id, onClose, setDialogIsOpen])
-
   const context = React.useMemo(() => ({close}), [close])
 
   return (
@@ -163,7 +177,7 @@ export function Outer({
             backdropComponent={Backdrop}
             handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
             handleStyle={{display: 'none'}}
-            onClose={onCloseInner}>
+            onClose={onCloseAnimationComplete}>
             <Context.Provider value={context}>
               <View
                 style={[

src/components/Dialog/index.web.tsx

@@ -1,20 +1,24 @@
 import React, {useImperativeHandle} from 'react'
-import {View, TouchableWithoutFeedback} from 'react-native'
-import {FocusScope} from '@tamagui/focus-scope'
-import Animated, {FadeInDown, FadeIn} from 'react-native-reanimated'
+import {TouchableWithoutFeedback, View} from 'react-native'
+import Animated, {FadeIn, FadeInDown} from 'react-native-reanimated'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {FocusScope} from '@tamagui/focus-scope'
 
-import {useTheme, atoms as a, useBreakpoints, web, flatten} from '#/alf'
+import {logger} from '#/logger'
+import {useDialogStateControlContext} from '#/state/dialogs'
+import {atoms as a, flatten, useBreakpoints, useTheme, web} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {Context} from '#/components/Dialog/context'
+import {
+  DialogControlProps,
+  DialogInnerProps,
+  DialogOuterProps,
+} from '#/components/Dialog/types'
+import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Portal} from '#/components/Portal'
 
-import {DialogOuterProps, DialogInnerProps} from '#/components/Dialog/types'
-import {Context} from '#/components/Dialog/context'
-import {Button, ButtonIcon} from '#/components/Button'
-import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
-import {useDialogStateControlContext} from '#/state/dialogs'
-
-export {useDialogControl, useDialogContext} from '#/components/Dialog/context'
+export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
 export * from '#/components/Dialog/types'
 export {Input} from '#/components/forms/TextField'
 
@@ -29,22 +33,40 @@ export function Outer({
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
   const [isOpen, setIsOpen] = React.useState(false)
-  const [isVisible, setIsVisible] = React.useState(true)
   const {setDialogIsOpen} = useDialogStateControlContext()
 
   const open = React.useCallback(() => {
-    setIsOpen(true)
     setDialogIsOpen(control.id, true)
+    setIsOpen(true)
   }, [setIsOpen, setDialogIsOpen, control.id])
 
-  const close = React.useCallback(async () => {
-    setIsVisible(false)
-    await new Promise(resolve => setTimeout(resolve, 150))
-    setIsOpen(false)
-    setIsVisible(true)
-    setDialogIsOpen(control.id, false)
-    onClose?.()
-  }, [onClose, setIsOpen, setDialogIsOpen, control.id])
+  const close = React.useCallback<DialogControlProps['close']>(
+    cb => {
+      setDialogIsOpen(control.id, false)
+      setIsOpen(false)
+
+      try {
+        if (cb && typeof cb === 'function') {
+          // This timeout ensures that the callback runs at the same time as it would on native. I.e.
+          // console.log('Step 1') -> close(() => console.log('Step 3')) -> console.log('Step 2')
+          // This should always output 'Step 1', 'Step 2', 'Step 3', but without the timeout it would output
+          // 'Step 1', 'Step 3', 'Step 2'.
+          setTimeout(cb)
+        }
+      } catch (e: any) {
+        logger.error(`Dialog closeCallback failed`, {
+          message: e.message,
+        })
+      }
+
+      onClose?.()
+    },
+    [control.id, onClose, setDialogIsOpen],
+  )
+
+  const handleBackgroundPress = React.useCallback(async () => {
+    close()
+  }, [close])
 
   useImperativeHandle(
     control.ref,
@@ -52,7 +74,7 @@ export function Outer({
       open,
       close,
     }),
-    [open, close],
+    [close, open],
   )
 
   React.useEffect(() => {
@@ -65,7 +87,7 @@ export function Outer({
     document.addEventListener('keydown', handler)
 
     return () => document.removeEventListener('keydown', handler)
-  }, [isOpen, close])
+  }, [close, isOpen])
 
   const context = React.useMemo(
     () => ({
@@ -82,7 +104,7 @@ export function Outer({
             <TouchableWithoutFeedback
               accessibilityHint={undefined}
               accessibilityLabel={_(msg`Close active dialog`)}
-              onPress={close}>
+              onPress={handleBackgroundPress}>
               <View
                 style={[
                   web(a.fixed),
@@ -92,17 +114,15 @@ export function Outer({
                   gtMobile ? a.p_lg : a.p_md,
                   {overflowY: 'auto'},
                 ]}>
-                {isVisible && (
-                  <Animated.View
-                    entering={FadeIn.duration(150)}
-                    // exiting={FadeOut.duration(150)}
-                    style={[
-                      web(a.fixed),
-                      a.inset_0,
-                      {opacity: 0.8, backgroundColor: t.palette.black},
-                    ]}
-                  />
-                )}
+                <Animated.View
+                  entering={FadeIn.duration(150)}
+                  // exiting={FadeOut.duration(150)}
+                  style={[
+                    web(a.fixed),
+                    a.inset_0,
+                    {opacity: 0.8, backgroundColor: t.palette.black},
+                  ]}
+                />
 
                 <View
                   style={[
@@ -114,7 +134,7 @@ export function Outer({
                       minHeight: web('calc(90vh - 36px)') || undefined,
                     },
                   ]}>
-                  {isVisible ? children : null}
+                  {children}
                 </View>
               </View>
             </TouchableWithoutFeedback>

src/components/Error.tsx

@@ -1,13 +1,15 @@
 import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/core'
+import {StackActions} from '@react-navigation/native'
 
+import {NavigationProp} from 'lib/routes/types'
 import {CenteredView} from 'view/com/util/Views'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
 import {Text} from '#/components/Typography'
-import {View} from 'react-native'
-import {Button} from '#/components/Button'
-import {useNavigation} from '@react-navigation/core'
-import {NavigationProp} from 'lib/routes/types'
-import {StackActions} from '@react-navigation/native'
 import {router} from '#/routes'
 
 export function Error({
@@ -20,6 +22,7 @@ export function Error({
   onRetry?: () => unknown
 }) {
   const navigation = useNavigation<NavigationProp>()
+  const {_} = useLingui()
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
 
@@ -68,21 +71,25 @@ export function Error({
           <Button
             variant="solid"
             color="primary"
-            label="Click here"
+            label={_(msg`Press to retry`)}
             onPress={onRetry}
             size="large"
             style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
-            Retry
+            <ButtonText>
+              <Trans>Retry</Trans>
+            </ButtonText>
           </Button>
         )}
         <Button
           variant="solid"
           color={onRetry ? 'secondary' : 'primary'}
-          label="Click here"
+          label={_(msg`Return to previous page`)}
           onPress={onGoBack}
           size="large"
           style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
-          Go Back
+          <ButtonText>
+            <Trans>Go Back</Trans>
+          </ButtonText>
         </Button>
       </View>
     </CenteredView>

src/components/GradientFill.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import LinearGradient from 'react-native-linear-gradient'
+import {LinearGradient} from 'expo-linear-gradient'
 
 import {atoms as a, tokens} from '#/alf'
 

src/components/LikedByList.tsx

@@ -1,47 +1,54 @@
 import React from 'react'
-import {View} from 'react-native'
 import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
-import {Trans} from '@lingui/macro'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {logger} from '#/logger'
-import {List} from '#/view/com/util/List'
-import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
-import {useResolveUriQuery} from '#/state/queries/resolve-uri'
 import {useLikedByQuery} from '#/state/queries/post-liked-by'
+import {useResolveUriQuery} from '#/state/queries/resolve-uri'
 import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
-import {ListFooter} from '#/components/Lists'
+import {cleanError} from 'lib/strings/errors'
+import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
+import {List} from '#/view/com/util/List'
+import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 
-import {atoms as a, useTheme} from '#/alf'
-import {Loader} from '#/components/Loader'
-import {Text} from '#/components/Typography'
+function renderItem({item}: {item: GetLikes.Like}) {
+  return <ProfileCardWithFollowBtn key={item.actor.did} profile={item.actor} />
+}
+
+function keyExtractor(item: GetLikes.Like) {
+  return item.actor.did
+}
 
 export function LikedByList({uri}: {uri: string}) {
-  const t = useTheme()
+  const {_} = useLingui()
+  const initialNumToRender = useInitialNumToRender()
   const [isPTRing, setIsPTRing] = React.useState(false)
+
   const {
     data: resolvedUri,
     error: resolveError,
-    isFetching: isFetchingResolvedUri,
+    isLoading: isUriLoading,
   } = useResolveUriQuery(uri)
   const {
     data,
-    isFetching,
-    isFetched,
-    isRefetching,
+    isLoading: isLikedByLoading,
+    isFetchingNextPage,
     hasNextPage,
     fetchNextPage,
-    isError,
     error: likedByError,
     refetch,
   } = useLikedByQuery(resolvedUri?.uri)
+
+  const error = resolveError || likedByError
+  const isError = !!resolveError || !!likedByError
+
   const likes = React.useMemo(() => {
     if (data?.pages) {
       return data.pages.flatMap(page => page.likes)
     }
     return []
   }, [data])
-  const initialNumToRender = useInitialNumToRender()
-  const error = resolveError || likedByError
 
   const onRefresh = React.useCallback(async () => {
     setIsPTRing(true)
@@ -54,56 +61,47 @@ export function LikedByList({uri}: {uri: string}) {
   }, [refetch, setIsPTRing])
 
   const onEndReached = React.useCallback(async () => {
-    if (isFetching || !hasNextPage || isError) return
+    if (isFetchingNextPage || !hasNextPage || isError) return
     try {
       await fetchNextPage()
     } catch (err) {
       logger.error('Failed to load more likes', {message: err})
     }
-  }, [isFetching, hasNextPage, isError, fetchNextPage])
+  }, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])
 
-  const renderItem = React.useCallback(({item}: {item: GetLikes.Like}) => {
+  if (likes.length < 1) {
     return (
-      <ProfileCardWithFollowBtn key={item.actor.did} profile={item.actor} />
-    )
-  }, [])
-
-  if (isFetchingResolvedUri || !isFetched) {
-    return (
-      <View style={[a.w_full, a.align_center, a.p_lg]}>
-        <Loader size="xl" />
-      </View>
+      <ListMaybePlaceholder
+        isLoading={isUriLoading || isLikedByLoading}
+        isError={isError}
+        emptyType="results"
+        emptyMessage={_(
+          msg`Nobody has liked this yet. Maybe you should be the first!`,
+        )}
+        errorMessage={cleanError(resolveError || error)}
+        onRetry={isError ? refetch : undefined}
+      />
     )
   }
 
-  return likes.length ? (
+  return (
     <List
       data={likes}
-      keyExtractor={item => item.actor.did}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
       refreshing={isPTRing}
       onRefresh={onRefresh}
       onEndReached={onEndReached}
-      onEndReachedThreshold={3}
-      renderItem={renderItem}
-      initialNumToRender={initialNumToRender}
-      ListFooterComponent={() => (
+      ListFooterComponent={
         <ListFooter
-          isFetching={isFetching && !isRefetching}
-          isError={isError}
-          error={error ? error.toString() : undefined}
+          isFetchingNextPage={isFetchingNextPage}
+          error={cleanError(error)}
           onRetry={fetchNextPage}
         />
-      )}
+      }
+      onEndReachedThreshold={3}
+      initialNumToRender={initialNumToRender}
+      windowSize={11}
     />
-  ) : (
-    <View style={[a.p_lg]}>
-      <View style={[a.p_lg, a.rounded_sm, t.atoms.bg_contrast_25]}>
-        <Text style={[a.text_md, a.leading_snug]}>
-          <Trans>
-            Nobody has liked this yet. Maybe you should be the first!
-          </Trans>
-        </Text>
-      </View>
-    </View>
   )
 }

src/components/Link.tsx

@@ -1,23 +1,24 @@
 import React from 'react'
 import {GestureResponderEvent} from 'react-native'
-import {useLinkProps, StackActions} from '@react-navigation/native'
 import {sanitizeUrl} from '@braintree/sanitize-url'
+import {StackActions, useLinkProps} from '@react-navigation/native'
 
-import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {isWeb} from '#/platform/detection'
-import {useTheme, web, flatten, TextStyleProp, atoms as a} from '#/alf'
-import {Button, ButtonProps} from '#/components/Button'
 import {AllNavigatorParams} from '#/lib/routes/types'
+import {shareUrl} from '#/lib/sharing'
 import {
   convertBskyAppUrlIfNeeded,
   isExternalUrl,
   linkRequiresWarning,
 } from '#/lib/strings/url-helpers'
+import {isNative, isWeb} from '#/platform/detection'
 import {useModalControls} from '#/state/modals'
-import {router} from '#/routes'
-import {Text, TextProps} from '#/components/Typography'
-import {useOpenLink} from 'state/preferences/in-app-browser'
+import {useOpenLink} from '#/state/preferences/in-app-browser'
 import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped'
+import {atoms as a, flatten, TextStyleProp, useTheme, web} from '#/alf'
+import {Button, ButtonProps} from '#/components/Button'
+import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {Text, TextProps} from '#/components/Typography'
+import {router} from '#/routes'
 
 /**
  * Only available within a `Link`, since that inherits from `Button`.
@@ -60,6 +61,11 @@ type BaseLinkProps = Pick<
    * Web-only attribute. Sets `download` attr on web.
    */
   download?: string
+
+  /**
+   * Native-only attribute. If true, will open the share sheet on long press.
+   */
+  shareOnLongPress?: boolean
 }
 
 export function useLink({
@@ -68,6 +74,7 @@ export function useLink({
   action = 'push',
   disableMismatchWarning,
   onPress: outerOnPress,
+  shareOnLongPress,
 }: BaseLinkProps & {
   displayText: string
 }) {
@@ -157,10 +164,34 @@ export function useLink({
     ],
   )
 
+  const handleLongPress = React.useCallback(() => {
+    const requiresWarning = Boolean(
+      !disableMismatchWarning &&
+        displayText &&
+        isExternal &&
+        linkRequiresWarning(href, displayText),
+    )
+
+    if (requiresWarning) {
+      openModal({
+        name: 'link-warning',
+        text: displayText,
+        href: href,
+        share: true,
+      })
+    } else {
+      shareUrl(href)
+    }
+  }, [disableMismatchWarning, displayText, href, isExternal, openModal])
+
+  const onLongPress =
+    isNative && isExternal && shareOnLongPress ? handleLongPress : undefined
+
   return {
     isExternal,
     href,
     onPress,
+    onLongPress,
   }
 }
 
@@ -219,7 +250,7 @@ export type InlineLinkProps = React.PropsWithChildren<
   BaseLinkProps & TextStyleProp & Pick<TextProps, 'selectable'>
 >
 
-export function InlineLink({
+export function InlineLinkText({
   children,
   to,
   action = 'push',
@@ -229,16 +260,18 @@ export function InlineLink({
   download,
   selectable,
   label,
+  shareOnLongPress,
   ...rest
 }: InlineLinkProps) {
   const t = useTheme()
   const stringChildren = typeof children === 'string'
-  const {href, isExternal, onPress} = useLink({
+  const {href, isExternal, onPress, onLongPress} = useLink({
     to,
     displayText: stringChildren ? children : '',
     action,
     disableMismatchWarning,
     onPress: outerOnPress,
+    shareOnLongPress,
   })
   const {
     state: hovered,
@@ -270,6 +303,7 @@ export function InlineLink({
       ]}
       role="link"
       onPress={download ? undefined : onPress}
+      onLongPress={onLongPress}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
       onFocus={onFocus}

src/components/Lists.tsx

@@ -1,25 +1,23 @@
 import React from 'react'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {Trans, msg} from '@lingui/macro'
 
-import {CenteredView} from 'view/com/util/Views'
-import {Loader} from '#/components/Loader'
 import {cleanError} from 'lib/strings/errors'
-import {Button} from '#/components/Button'
-import {Text} from '#/components/Typography'
+import {CenteredView} from 'view/com/util/Views'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
 import {Error} from '#/components/Error'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
 
 export function ListFooter({
-  isFetching,
-  isError,
+  isFetchingNextPage,
   error,
   onRetry,
   height,
 }: {
-  isFetching?: boolean
-  isError?: boolean
+  isFetchingNextPage?: boolean
   error?: string
   onRetry?: () => Promise<unknown>
   height?: number
@@ -36,32 +34,26 @@ export function ListFooter({
         t.atoms.border_contrast_low,
         {height: height ?? 180, paddingTop: 30},
       ]}>
-      {isFetching ? (
+      {isFetchingNextPage ? (
         <Loader size="xl" />
       ) : (
-        <ListFooterMaybeError
-          isError={isError}
-          error={error}
-          onRetry={onRetry}
-        />
+        <ListFooterMaybeError error={error} onRetry={onRetry} />
       )}
     </View>
   )
 }
 
 function ListFooterMaybeError({
-  isError,
   error,
   onRetry,
 }: {
-  isError?: boolean
   error?: string
   onRetry?: () => Promise<unknown>
 }) {
   const t = useTheme()
   const {_} = useLingui()
 
-  if (!isError) return null
+  if (!error) return null
 
   return (
     <View style={[a.w_full, a.px_lg]}>
@@ -95,7 +87,9 @@ function ListFooterMaybeError({
             a.py_sm,
           ]}
           onPress={onRetry}>
-          <Trans>Retry</Trans>
+          <ButtonText>
+            <Trans>Retry</Trans>
+          </ButtonText>
         </Button>
       </View>
     </View>
@@ -128,7 +122,7 @@ export function ListHeaderDesktop({
 
 export function ListMaybePlaceholder({
   isLoading,
-  isEmpty,
+  noEmpty,
   isError,
   emptyTitle,
   emptyMessage,
@@ -138,7 +132,7 @@ export function ListMaybePlaceholder({
   onRetry,
 }: {
   isLoading: boolean
-  isEmpty?: boolean
+  noEmpty?: boolean
   isError?: boolean
   emptyTitle?: string
   emptyMessage?: string
@@ -151,16 +145,6 @@ export function ListMaybePlaceholder({
   const {_} = useLingui()
   const {gtMobile, gtTablet} = useBreakpoints()
 
-  if (!isLoading && isError) {
-    return (
-      <Error
-        title={errorTitle ?? _(msg`Oops!`)}
-        message={errorMessage ?? _(`Something went wrong!`)}
-        onRetry={onRetry}
-      />
-    )
-  }
-
   if (isLoading) {
     return (
       <CenteredView
@@ -180,7 +164,17 @@ export function ListMaybePlaceholder({
     )
   }
 
-  if (isEmpty) {
+  if (isError) {
+    return (
+      <Error
+        title={errorTitle ?? _(msg`Oops!`)}
+        message={errorMessage ?? _(`Something went wrong!`)}
+        onRetry={onRetry}
+      />
+    )
+  }
+
+  if (!noEmpty) {
     return (
       <Error
         title={
@@ -197,4 +191,6 @@ export function ListMaybePlaceholder({
       />
     )
   }
+
+  return null
 }

src/components/Loader.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import Animated, {
   Easing,
-  useSharedValue,
   useAnimatedStyle,
+  useSharedValue,
   withRepeat,
   withTiming,
 } from 'react-native-reanimated'
 
-import {atoms as a, useTheme, flatten} from '#/alf'
+import {atoms as a, flatten, useTheme} from '#/alf'
 import {Props, useCommonSVGProps} from '#/components/icons/common'
 import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
 

src/components/Loader.web.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {atoms as a, flatten, useTheme} from '#/alf'
+import {Props, useCommonSVGProps} from '#/components/icons/common'
+import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
+
+export function Loader(props: Props) {
+  const t = useTheme()
+  const common = useCommonSVGProps(props)
+
+  return (
+    <View
+      style={[
+        a.relative,
+        a.justify_center,
+        a.align_center,
+        {width: common.size, height: common.size},
+      ]}>
+      {/* css rotation animation - /bskyweb/templates/base.html */}
+      <div className="rotate-500ms">
+        <Icon
+          {...props}
+          style={[
+            a.absolute,
+            a.inset_0,
+            t.atoms.text_contrast_high,
+            flatten(props.style),
+          ]}
+        />
+      </div>
+    </View>
+  )
+}

src/components/ProfileHoverCard/index.tsx

@@ -0,0 +1,5 @@
+import {ProfileHoverCardProps} from './types'
+
+export function ProfileHoverCard({children}: ProfileHoverCardProps) {
+  return children
+}

src/components/ProfileHoverCard/index.web.tsx

@@ -0,0 +1,294 @@
+import React from 'react'
+import {View} from 'react-native'
+import Animated, {FadeIn, FadeOut} from 'react-native-reanimated'
+import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
+import {flip, offset, shift, size, useFloating} from '@floating-ui/react-dom'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {makeProfileLink} from '#/lib/routes/links'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
+import {sanitizeHandle} from '#/lib/strings/handles'
+import {pluralize} from '#/lib/strings/helpers'
+import {useModerationOpts} from '#/state/queries/preferences'
+import {usePrefetchProfileQuery, useProfileQuery} from '#/state/queries/profile'
+import {useSession} from '#/state/session'
+import {useProfileShadow} from 'state/cache/profile-shadow'
+import {formatCount} from '#/view/com/util/numeric/format'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {ProfileHeaderHandle} from '#/screens/Profile/Header/Handle'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {useFollowMethods} from '#/components/hooks/useFollowMethods'
+import {useRichText} from '#/components/hooks/useRichText'
+import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {InlineLinkText, Link} from '#/components/Link'
+import {Loader} from '#/components/Loader'
+import {Portal} from '#/components/Portal'
+import {RichText} from '#/components/RichText'
+import {Text} from '#/components/Typography'
+import {ProfileHoverCardProps} from './types'
+
+const floatingMiddlewares = [
+  offset(4),
+  flip({padding: 16}),
+  shift({padding: 16}),
+  size({
+    padding: 16,
+    apply({availableWidth, availableHeight, elements}) {
+      Object.assign(elements.floating.style, {
+        maxWidth: `${availableWidth}px`,
+        maxHeight: `${availableHeight}px`,
+      })
+    },
+  }),
+]
+
+const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0
+
+export function ProfileHoverCard(props: ProfileHoverCardProps) {
+  return isTouchDevice ? props.children : <ProfileHoverCardInner {...props} />
+}
+
+export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
+  const [hovered, setHovered] = React.useState(false)
+  const {refs, floatingStyles} = useFloating({
+    middleware: floatingMiddlewares,
+  })
+  const prefetchProfileQuery = usePrefetchProfileQuery()
+
+  const prefetchedProfile = React.useRef(false)
+  const targetHovered = React.useRef(false)
+  const cardHovered = React.useRef(false)
+  const targetClicked = React.useRef(false)
+  const showTimeout = React.useRef<NodeJS.Timeout>()
+
+  const onPointerEnterTarget = React.useCallback(() => {
+    showTimeout.current = setTimeout(async () => {
+      targetHovered.current = true
+
+      if (prefetchedProfile.current) {
+        // if we're navigating
+        if (targetClicked.current) return
+        setHovered(true)
+      } else {
+        await prefetchProfileQuery(props.did)
+
+        if (targetHovered.current) {
+          setHovered(true)
+        }
+        prefetchedProfile.current = true
+      }
+    }, 350)
+  }, [props.did, prefetchProfileQuery])
+  const onPointerEnterCard = React.useCallback(() => {
+    cardHovered.current = true
+    // if we're navigating
+    if (targetClicked.current) return
+    setHovered(true)
+  }, [])
+  const onPointerLeaveTarget = React.useCallback(() => {
+    clearTimeout(showTimeout.current)
+    targetHovered.current = false
+    setTimeout(() => {
+      if (cardHovered.current) return
+      setHovered(false)
+    }, 100)
+  }, [])
+  const onPointerLeaveCard = React.useCallback(() => {
+    cardHovered.current = false
+    setTimeout(() => {
+      if (targetHovered.current) return
+      setHovered(false)
+    }, 100)
+  }, [])
+  const onClickTarget = React.useCallback(() => {
+    targetClicked.current = true
+    setHovered(false)
+  }, [])
+  const hide = React.useCallback(() => {
+    setHovered(false)
+  }, [])
+
+  return (
+    <div
+      ref={refs.setReference}
+      onPointerEnter={onPointerEnterTarget}
+      onPointerLeave={onPointerLeaveTarget}
+      onMouseUp={onClickTarget}>
+      {props.children}
+
+      {hovered && (
+        <Portal>
+          <Animated.View
+            entering={FadeIn.duration(80)}
+            exiting={FadeOut.duration(80)}>
+            <div
+              ref={refs.setFloating}
+              style={floatingStyles}
+              onPointerEnter={onPointerEnterCard}
+              onPointerLeave={onPointerLeaveCard}>
+              <Card did={props.did} hide={hide} />
+            </div>
+          </Animated.View>
+        </Portal>
+      )}
+    </div>
+  )
+}
+
+function Card({did, hide}: {did: string; hide: () => void}) {
+  const t = useTheme()
+
+  const profile = useProfileQuery({did})
+  const moderationOpts = useModerationOpts()
+
+  const data = profile.data
+
+  return (
+    <View
+      style={[
+        a.p_lg,
+        a.border,
+        a.rounded_md,
+        a.overflow_hidden,
+        t.atoms.bg,
+        t.atoms.border_contrast_low,
+        t.atoms.shadow_lg,
+        {
+          width: 300,
+        },
+      ]}>
+      {data && moderationOpts ? (
+        <Inner profile={data} moderationOpts={moderationOpts} hide={hide} />
+      ) : (
+        <View style={[a.justify_center]}>
+          <Loader size="xl" />
+        </View>
+      )}
+    </View>
+  )
+}
+
+function Inner({
+  profile,
+  moderationOpts,
+  hide,
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+  moderationOpts: ModerationOpts
+  hide: () => void
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const moderation = React.useMemo(
+    () => moderateProfile(profile, moderationOpts),
+    [profile, moderationOpts],
+  )
+  const [descriptionRT] = useRichText(profile.description ?? '')
+  const profileShadow = useProfileShadow(profile)
+  const {follow, unfollow} = useFollowMethods({
+    profile: profileShadow,
+    logContext: 'ProfileHoverCard',
+  })
+  const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy
+  const following = formatCount(profile.followsCount || 0)
+  const followers = formatCount(profile.followersCount || 0)
+  const pluralizedFollowers = pluralize(profile.followersCount || 0, 'follower')
+  const profileURL = makeProfileLink({
+    did: profile.did,
+    handle: profile.handle,
+  })
+  const isMe = React.useMemo(
+    () => currentAccount?.did === profile.did,
+    [currentAccount, profile],
+  )
+
+  return (
+    <View>
+      <View style={[a.flex_row, a.justify_between, a.align_start]}>
+        <Link to={profileURL} label={_(msg`View profile`)} onPress={hide}>
+          <UserAvatar
+            size={64}
+            avatar={profile.avatar}
+            moderation={moderation.ui('avatar')}
+          />
+        </Link>
+
+        {!isMe && (
+          <Button
+            size="small"
+            color={profileShadow.viewer?.following ? 'secondary' : 'primary'}
+            variant="solid"
+            label={
+              profileShadow.viewer?.following ? _('Following') : _('Follow')
+            }
+            style={[a.rounded_full]}
+            onPress={profileShadow.viewer?.following ? unfollow : follow}>
+            <ButtonIcon
+              position="left"
+              icon={profileShadow.viewer?.following ? Check : Plus}
+            />
+            <ButtonText>
+              {profileShadow.viewer?.following ? _('Following') : _('Follow')}
+            </ButtonText>
+          </Button>
+        )}
+      </View>
+
+      <Link to={profileURL} label={_(msg`View profile`)} onPress={hide}>
+        <View style={[a.pb_sm, a.flex_1]}>
+          <Text style={[a.pt_md, a.pb_xs, a.text_lg, a.font_bold]}>
+            {sanitizeDisplayName(
+              profile.displayName || sanitizeHandle(profile.handle),
+              moderation.ui('displayName'),
+            )}
+          </Text>
+
+          <ProfileHeaderHandle profile={profileShadow} />
+        </View>
+      </Link>
+
+      {!blockHide && (
+        <>
+          <View style={[a.flex_row, a.flex_wrap, a.gap_md, a.pt_xs]}>
+            <InlineLinkText
+              to={makeProfileLink(profile, 'followers')}
+              label={`${followers} ${pluralizedFollowers}`}
+              style={[t.atoms.text]}
+              onPress={hide}>
+              <Trans>
+                <Text style={[a.text_md, a.font_bold]}>{followers} </Text>
+                <Text style={[t.atoms.text_contrast_medium]}>
+                  {pluralizedFollowers}
+                </Text>
+              </Trans>
+            </InlineLinkText>
+            <InlineLinkText
+              to={makeProfileLink(profile, 'follows')}
+              label={_(msg`${following} following`)}
+              style={[t.atoms.text]}
+              onPress={hide}>
+              <Trans>
+                <Text style={[a.text_md, a.font_bold]}>{following} </Text>
+                <Text style={[t.atoms.text_contrast_medium]}>following</Text>
+              </Trans>
+            </InlineLinkText>
+          </View>
+
+          {profile.description?.trim() && !moderation.ui('profileView').blur ? (
+            <View style={[a.pt_md]}>
+              <RichText
+                numberOfLines={8}
+                value={descriptionRT}
+                onLinkPress={hide}
+              />
+            </View>
+          ) : undefined}
+        </>
+      )}
+    </View>
+  )
+}

src/components/ProfileHoverCard/types.ts

@@ -0,0 +1,6 @@
+import React from 'react'
+
+export type ProfileHoverCardProps = {
+  children: React.ReactElement
+  did: string
+}

src/components/Prompt.tsx

@@ -3,11 +3,10 @@ import {View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useTheme, atoms as a, useBreakpoints} from '#/alf'
-import {Text} from '#/components/Typography'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonColor, ButtonText} from '#/components/Button'
-
 import * as Dialog from '#/components/Dialog'
+import {Text} from '#/components/Typography'
 
 export {useDialogControl as usePromptControl} from '#/components/Dialog'
 
@@ -52,7 +51,7 @@ export function Outer({
   )
 }
 
-export function Title({children}: React.PropsWithChildren<{}>) {
+export function TitleText({children}: React.PropsWithChildren<{}>) {
   const {titleId} = React.useContext(Context)
   return (
     <Text nativeID={titleId} style={[a.text_2xl, a.font_bold, a.pb_sm]}>
@@ -61,7 +60,7 @@ export function Title({children}: React.PropsWithChildren<{}>) {
   )
 }
 
-export function Description({children}: React.PropsWithChildren<{}>) {
+export function DescriptionText({children}: React.PropsWithChildren<{}>) {
   const t = useTheme()
   const {descriptionId} = React.useContext(Context)
   return (
@@ -80,7 +79,7 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
     <View
       style={[
         a.w_full,
-        a.gap_sm,
+        a.gap_md,
         a.justify_end,
         gtMobile
           ? [a.flex_row, a.flex_row_reverse, a.justify_start]
@@ -92,15 +91,13 @@ export function Actions({children}: React.PropsWithChildren<{}>) {
 }
 
 export function Cancel({
-  children,
   cta,
-}: React.PropsWithChildren<{
+}: {
   /**
-   * Optional i18n string, used in lieu of `children` for simple buttons. If
-   * undefined (and `children` is undefined), it will default to "Cancel".
+   * Optional i18n string. If undefined, it will default to "Cancel".
    */
   cta?: string
-}>) {
+}) {
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
@@ -115,33 +112,37 @@ export function Cancel({
       size={gtMobile ? 'small' : 'medium'}
       label={cta || _(msg`Cancel`)}
       onPress={onPress}>
-      {children ? children : <ButtonText>{cta || _(msg`Cancel`)}</ButtonText>}
+      <ButtonText>{cta || _(msg`Cancel`)}</ButtonText>
     </Button>
   )
 }
 
 export function Action({
-  children,
   onPress,
   color = 'primary',
   cta,
   testID,
-}: React.PropsWithChildren<{
+}: {
+  /**
+   * Callback to run when the action is pressed. The method is called _after_
+   * the dialog closes.
+   *
+   * Note: The dialog will close automatically when the action is pressed, you
+   * should NOT close the dialog as a side effect of this method.
+   */
   onPress: () => void
   color?: ButtonColor
   /**
-   * Optional i18n string, used in lieu of `children` for simple buttons. If
-   * undefined (and `children` is undefined), it will default to "Confirm".
+   * Optional i18n string. If undefined, it will default to "Confirm".
    */
   cta?: string
   testID?: string
-}>) {
+}) {
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
   const handleOnPress = React.useCallback(() => {
-    close()
-    onPress()
+    close(onPress)
   }, [close, onPress])
 
   return (
@@ -152,7 +153,7 @@ export function Action({
       label={cta || _(msg`Confirm`)}
       onPress={handleOnPress}
       testID={testID}>
-      {children ? children : <ButtonText>{cta || _(msg`Confirm`)}</ButtonText>}
+      <ButtonText>{cta || _(msg`Confirm`)}</ButtonText>
     </Button>
   )
 }
@@ -171,13 +172,20 @@ export function Basic({
   description: string
   cancelButtonCta?: string
   confirmButtonCta?: string
+  /**
+   * Callback to run when the Confirm button is pressed. The method is called
+   * _after_ the dialog closes.
+   *
+   * Note: The dialog will close automatically when the action is pressed, you
+   * should NOT close the dialog as a side effect of this method.
+   */
   onConfirm: () => void
   confirmButtonColor?: ButtonColor
 }>) {
   return (
     <Outer control={control} testID="confirmModal">
-      <Title>{title}</Title>
-      <Description>{description}</Description>
+      <TitleText>{title}</TitleText>
+      <DescriptionText>{description}</DescriptionText>
       <Actions>
         <Action
           cta={confirmButtonCta}

src/components/ReportDialog/SelectLabelerView.tsx

@@ -1,18 +1,16 @@
 import React from 'react'
 import {View} from 'react-native'
+import {AppBskyLabelerDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {AppBskyLabelerDefs} from '@atproto/api'
 
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 import {getLabelingServiceTitle} from '#/lib/moderation'
-
-import {atoms as a, useTheme, useBreakpoints} from '#/alf'
-import {Text} from '#/components/Typography'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, useButtonContext} from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import * as LabelingServiceCard from '#/components/LabelingServiceCard'
-
+import {Text} from '#/components/Typography'
 import {ReportDialogProps} from './types'
 
 export function SelectLabelerView({

src/components/ReportDialog/SelectReportOptionView.tsx

@@ -1,16 +1,15 @@
 import React from 'react'
 import {View} from 'react-native'
+import {AppBskyLabelerDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {AppBskyLabelerDefs} from '@atproto/api'
 
-import {useReportOptions, ReportOption} from '#/lib/moderation/useReportOptions'
-import {DMCA_LINK} from '#/components/ReportDialog/const'
+import {ReportOption, useReportOptions} from '#/lib/moderation/useReportOptions'
 import {Link} from '#/components/Link'
+import {DMCA_LINK} from '#/components/ReportDialog/const'
 export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
 
-import {atoms as a, useTheme, useBreakpoints} from '#/alf'
-import {Text} from '#/components/Typography'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {
   Button,
   ButtonIcon,
@@ -19,11 +18,11 @@ import {
 } from '#/components/Button'
 import {Divider} from '#/components/Divider'
 import {
-  ChevronRight_Stroke2_Corner0_Rounded as ChevronRight,
   ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft,
+  ChevronRight_Stroke2_Corner0_Rounded as ChevronRight,
 } from '#/components/icons/Chevron'
 import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from '#/components/icons/SquareArrowTopRight'
-
+import {Text} from '#/components/Typography'
 import {ReportDialogProps} from './types'
 
 export function SelectReportOptionView({
@@ -91,6 +90,7 @@ export function SelectReportOptionView({
           return (
             <Button
               key={reportOption.reason}
+              testID={reportOption.reason}
               label={_(msg`Create report for ${reportOption.title}`)}
               onPress={() => props.onSelectReportOption(reportOption)}>
               <ReportOptionButton

src/components/ReportDialog/SubmitView.tsx

@@ -1,25 +1,23 @@
 import React from 'react'
 import {View} from 'react-native'
+import {AppBskyLabelerDefs} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {AppBskyLabelerDefs} from '@atproto/api'
 
 import {getLabelingServiceTitle} from '#/lib/moderation'
 import {ReportOption} from '#/lib/moderation/useReportOptions'
-
-import {atoms as a, useTheme, native} from '#/alf'
-import {Text} from '#/components/Typography'
-import * as Dialog from '#/components/Dialog'
-import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
-import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
-import * as Toggle from '#/components/forms/Toggle'
-import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
-import {Loader} from '#/components/Loader'
-import * as Toast from '#/view/com/util/Toast'
-
-import {ReportDialogProps} from './types'
 import {getAgent} from '#/state/session'
+import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
+import * as Toast from '#/view/com/util/Toast'
+import {atoms as a, native, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import * as Toggle from '#/components/forms/Toggle'
+import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+import {ReportDialogProps} from './types'
 
 export function SubmitView({
   params,
@@ -208,6 +206,7 @@ export function SubmitView({
           ))}
 
         <Button
+          testID="sendReportBtn"
           size="large"
           variant="solid"
           color="negative"

src/components/RichText.tsx

@@ -1,15 +1,15 @@
 import React from 'react'
-import {RichText as RichTextAPI, AppBskyRichtextFacet} from '@atproto/api'
-import {useLingui} from '@lingui/react'
+import {AppBskyRichtextFacet, RichText as RichTextAPI} from '@atproto/api'
 import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import {atoms as a, TextStyleProp, flatten, useTheme, web, native} from '#/alf'
-import {InlineLink} from '#/components/Link'
-import {Text, TextProps} from '#/components/Typography'
-import {toShortUrl} from 'lib/strings/url-helpers'
-import {TagMenu, useTagMenuControl} from '#/components/TagMenu'
+import {toShortUrl} from '#/lib/strings/url-helpers'
 import {isNative} from '#/platform/detection'
+import {atoms as a, flatten, native, TextStyleProp, useTheme, web} from '#/alf'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
+import {InlineLinkText, LinkProps} from '#/components/Link'
+import {TagMenu, useTagMenuControl} from '#/components/TagMenu'
+import {Text, TextProps} from '#/components/Typography'
 
 const WORD_WRAP = {wordWrap: 1}
 
@@ -22,6 +22,7 @@ export function RichText({
   selectable,
   enableTags = false,
   authorHandle,
+  onLinkPress,
 }: TextStyleProp &
   Pick<TextProps, 'selectable'> & {
     value: RichTextAPI | string
@@ -30,6 +31,7 @@ export function RichText({
     disableLinks?: boolean
     enableTags?: boolean
     authorHandle?: string
+    onLinkPress?: LinkProps['onPress']
   }) {
   const richText = React.useMemo(
     () =>
@@ -84,30 +86,33 @@ export function RichText({
       !disableLinks
     ) {
       els.push(
-        <InlineLink
+        <InlineLinkText
           selectable={selectable}
           key={key}
           to={`/profile/${mention.did}`}
           style={[...styles, {pointerEvents: 'auto'}]}
           // @ts-ignore TODO
-          dataSet={WORD_WRAP}>
+          dataSet={WORD_WRAP}
+          onPress={onLinkPress}>
           {segment.text}
-        </InlineLink>,
+        </InlineLinkText>,
       )
     } else if (link && AppBskyRichtextFacet.validateLink(link).success) {
       if (disableLinks) {
         els.push(toShortUrl(segment.text))
       } else {
         els.push(
-          <InlineLink
+          <InlineLinkText
             selectable={selectable}
             key={key}
             to={link.uri}
             style={[...styles, {pointerEvents: 'auto'}]}
             // @ts-ignore TODO
-            dataSet={WORD_WRAP}>
+            dataSet={WORD_WRAP}
+            shareOnLongPress
+            onPress={onLinkPress}>
             {toShortUrl(segment.text)}
-          </InlineLink>,
+          </InlineLinkText>,
         )
       }
     } else if (

src/components/Typography.tsx

@@ -1,14 +1,9 @@
 import React from 'react'
-import {
-  Text as RNText,
-  StyleProp,
-  TextStyle,
-  TextProps as RNTextProps,
-} from 'react-native'
-import {UITextView} from 'react-native-ui-text-view'
+import {StyleProp, TextProps as RNTextProps, TextStyle} from 'react-native'
+import {UITextView} from 'react-native-uitextview'
 
-import {useTheme, atoms, web, flatten} from '#/alf'
-import {isIOS, isNative} from '#/platform/detection'
+import {isNative} from '#/platform/detection'
+import {atoms, flatten, useTheme, web} from '#/alf'
 
 export type TextProps = RNTextProps & {
   /**
@@ -61,11 +56,8 @@ export function normalizeTextStyles(styles: StyleProp<TextStyle>) {
 export function Text({style, selectable, ...rest}: TextProps) {
   const t = useTheme()
   const s = normalizeTextStyles([atoms.text_sm, t.atoms.text, flatten(style)])
-  return selectable && isIOS ? (
-    <UITextView style={s} {...rest} />
-  ) : (
-    <RNText selectable={selectable} style={s} {...rest} />
-  )
+
+  return <UITextView selectable={selectable} uiTextView style={s} {...rest} />
 }
 
 export function createHeadingElement({level}: {level: number}) {

src/components/dialogs/BirthDateSettings.tsx

@@ -1,23 +1,23 @@
 import React from 'react'
-import {useLingui} from '@lingui/react'
-import {Trans, msg} from '@lingui/macro'
 import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import * as Dialog from '#/components/Dialog'
-import {Text} from '../Typography'
-import {DateInput} from '#/view/com/util/forms/DateInput'
+import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
+import {isIOS, isWeb} from '#/platform/detection'
 import {
   usePreferencesQuery,
-  usePreferencesSetBirthDateMutation,
   UsePreferencesQueryResponse,
+  usePreferencesSetBirthDateMutation,
 } from '#/state/queries/preferences'
-import {Button, ButtonIcon, ButtonText} from '../Button'
-import {atoms as a, useTheme} from '#/alf'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
-import {cleanError} from '#/lib/strings/errors'
-import {isIOS, isWeb} from '#/platform/detection'
+import {DateInput} from '#/view/com/util/forms/DateInput'
+import {atoms as a, useTheme} from '#/alf'
+import * as Dialog from '#/components/Dialog'
 import {Loader} from '#/components/Loader'
+import {Button, ButtonIcon, ButtonText} from '../Button'
+import {Text} from '../Typography'
 
 export function BirthDateSettingsDialog({
   control,

src/components/dialogs/Context.tsx

@@ -6,10 +6,12 @@ type Control = Dialog.DialogOuterProps['control']
 
 type ControlsContext = {
   mutedWordsDialogControl: Control
+  signinDialogControl: Control
 }
 
 const ControlsContext = React.createContext({
   mutedWordsDialogControl: {} as Control,
+  signinDialogControl: {} as Control,
 })
 
 export function useGlobalDialogsControlContext() {
@@ -18,9 +20,10 @@ export function useGlobalDialogsControlContext() {
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const mutedWordsDialogControl = Dialog.useDialogControl()
+  const signinDialogControl = Dialog.useDialogControl()
   const ctx = React.useMemo<ControlsContext>(
-    () => ({mutedWordsDialogControl}),
-    [mutedWordsDialogControl],
+    () => ({mutedWordsDialogControl, signinDialogControl}),
+    [mutedWordsDialogControl, signinDialogControl],
   )
 
   return (

src/components/dialogs/EmbedConsent.tsx

@@ -0,0 +1,119 @@
+import React, {useCallback} from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {
+  type EmbedPlayerSource,
+  embedPlayerSources,
+  externalEmbedLabels,
+} from '#/lib/strings/embed-player'
+import {useSetExternalEmbedPref} from '#/state/preferences'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import {Button, ButtonText} from '../Button'
+import {Text} from '../Typography'
+
+export function EmbedConsentDialog({
+  control,
+  source,
+  onAccept,
+}: {
+  control: Dialog.DialogControlProps
+  source: EmbedPlayerSource
+  onAccept: () => void
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const setExternalEmbedPref = useSetExternalEmbedPref()
+  const {gtMobile} = useBreakpoints()
+
+  const onShowAllPress = useCallback(() => {
+    for (const key of embedPlayerSources) {
+      setExternalEmbedPref(key, 'show')
+    }
+    onAccept()
+    control.close()
+  }, [control, onAccept, setExternalEmbedPref])
+
+  const onShowPress = useCallback(() => {
+    setExternalEmbedPref(source, 'show')
+    onAccept()
+    control.close()
+  }, [control, onAccept, setExternalEmbedPref, source])
+
+  const onHidePress = useCallback(() => {
+    setExternalEmbedPref(source, 'hide')
+    control.close()
+  }, [control, setExternalEmbedPref, source])
+
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner
+        label={_(msg`External Media`)}
+        style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>
+        <View style={a.gap_sm}>
+          <Text style={[a.text_2xl, a.font_bold]}>
+            <Trans>External Media</Trans>
+          </Text>
+
+          <View style={[a.mt_sm, a.mb_2xl, a.gap_lg]}>
+            <Text>
+              <Trans>
+                This content is hosted by {externalEmbedLabels[source]}. Do you
+                want to enable external media?
+              </Trans>
+            </Text>
+
+            <Text style={t.atoms.text_contrast_medium}>
+              <Trans>
+                External media may allow websites to collect information about
+                you and your device. No information is sent or requested until
+                you press the "play" button.
+              </Trans>
+            </Text>
+          </View>
+        </View>
+        <View style={a.gap_md}>
+          <Button
+            style={gtMobile && a.flex_1}
+            label={_(msg`Enable external media`)}
+            onPress={onShowAllPress}
+            onAccessibilityEscape={control.close}
+            color="primary"
+            size="medium"
+            variant="solid">
+            <ButtonText>
+              <Trans>Enable external media</Trans>
+            </ButtonText>
+          </Button>
+          <Button
+            style={gtMobile && a.flex_1}
+            label={_(msg`Enable this source only`)}
+            onPress={onShowPress}
+            onAccessibilityEscape={control.close}
+            color="secondary"
+            size="medium"
+            variant="solid">
+            <ButtonText>
+              <Trans>Enable {externalEmbedLabels[source]} only</Trans>
+            </ButtonText>
+          </Button>
+          <Button
+            label={_(msg`No thanks`)}
+            onAccessibilityEscape={control.close}
+            onPress={onHidePress}
+            color="secondary"
+            size="medium"
+            variant="ghost">
+            <ButtonText>
+              <Trans>No thanks</Trans>
+            </ButtonText>
+          </Button>
+        </View>
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}

src/components/dialogs/MutedWords.tsx

@@ -1,37 +1,36 @@
 import React from 'react'
 import {Keyboard, View} from 'react-native'
+import {AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {AppBskyActorDefs, sanitizeMutedWordValue} from '@atproto/api'
 
-import {
-  usePreferencesQuery,
-  useUpsertMutedWordsMutation,
-  useRemoveMutedWordMutation,
-} from '#/state/queries/preferences'
+import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
+import {
+  usePreferencesQuery,
+  useRemoveMutedWordMutation,
+  useUpsertMutedWordsMutation,
+} from '#/state/queries/preferences'
 import {
   atoms as a,
-  useTheme,
+  native,
   useBreakpoints,
+  useTheme,
   ViewStyleProp,
   web,
-  native,
 } from '#/alf'
-import {Text} from '#/components/Typography'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
-import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
-import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
+import * as Dialog from '#/components/Dialog'
+import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
+import {Divider} from '#/components/Divider'
+import * as Toggle from '#/components/forms/Toggle'
 import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Hashtag'
 import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/PageText'
-import {Divider} from '#/components/Divider'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Loader} from '#/components/Loader'
-import {logger} from '#/logger'
-import * as Dialog from '#/components/Dialog'
-import * as Toggle from '#/components/forms/Toggle'
 import * as Prompt from '#/components/Prompt'
-
-import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
+import {Text} from '#/components/Typography'
 
 export function MutedWordsDialog() {
   const {mutedWordsDialogControl: control} = useGlobalDialogsControlContext()
@@ -130,9 +129,9 @@ function MutedWordsInner({}: {control: Dialog.DialogOuterProps['control']}) {
                 <TargetToggle>
                   <View style={[a.flex_row, a.align_center, a.gap_sm]}>
                     <Toggle.Radio />
-                    <Toggle.Label>
+                    <Toggle.LabelText>
                       <Trans>Mute in text & tags</Trans>
-                    </Toggle.Label>
+                    </Toggle.LabelText>
                   </View>
                   <PageText size="sm" />
                 </TargetToggle>
@@ -145,9 +144,9 @@ function MutedWordsInner({}: {control: Dialog.DialogOuterProps['control']}) {
                 <TargetToggle>
                   <View style={[a.flex_row, a.align_center, a.gap_sm]}>
                     <Toggle.Radio />
-                    <Toggle.Label>
+                    <Toggle.LabelText>
                       <Trans>Mute in tags only</Trans>
-                    </Toggle.Label>
+                    </Toggle.LabelText>
                   </View>
                   <Hashtag size="sm" />
                 </TargetToggle>

src/components/dialogs/Signin.tsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {isNative} from '#/platform/detection'
+import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import {useCloseAllActiveElements} from '#/state/util'
+import {Logo} from '#/view/icons/Logo'
+import {Logotype} from '#/view/icons/Logotype'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {useGlobalDialogsControlContext} from '#/components/dialogs/Context'
+import {Text} from '#/components/Typography'
+
+export function SigninDialog() {
+  const {signinDialogControl: control} = useGlobalDialogsControlContext()
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+      <SigninDialogInner control={control} />
+    </Dialog.Outer>
+  )
+}
+
+function SigninDialogInner({}: {control: Dialog.DialogOuterProps['control']}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
+  const {requestSwitchToAccount} = useLoggedOutViewControls()
+  const closeAllActiveElements = useCloseAllActiveElements()
+
+  const showSignIn = React.useCallback(() => {
+    closeAllActiveElements()
+    requestSwitchToAccount({requestedAccount: 'none'})
+  }, [requestSwitchToAccount, closeAllActiveElements])
+
+  const showCreateAccount = React.useCallback(() => {
+    closeAllActiveElements()
+    requestSwitchToAccount({requestedAccount: 'new'})
+  }, [requestSwitchToAccount, closeAllActiveElements])
+
+  return (
+    <Dialog.ScrollableInner
+      label={_(msg`Sign into Bluesky or create a new account`)}
+      style={[gtMobile ? {width: 'auto', maxWidth: 420} : a.w_full]}>
+      <View style={[!isNative && a.p_2xl]}>
+        <View
+          style={[
+            a.flex_row,
+            a.align_center,
+            a.justify_center,
+            a.gap_sm,
+            a.pb_lg,
+          ]}>
+          <Logo width={36} />
+          <View style={{paddingTop: 6}}>
+            <Logotype width={120} fill={t.atoms.text.color} />
+          </View>
+        </View>
+
+        <Text
+          style={[
+            a.text_lg,
+            a.text_center,
+            t.atoms.text,
+            a.pb_2xl,
+            a.leading_snug,
+            a.mx_auto,
+            {
+              maxWidth: 300,
+            },
+          ]}>
+          <Trans>
+            Sign in or create your account to join the conversation!
+          </Trans>
+        </Text>
+
+        <View style={[a.flex_col, a.gap_md]}>
+          <Button
+            variant="solid"
+            color="primary"
+            size="large"
+            onPress={showCreateAccount}
+            label={_(msg`Create an account`)}>
+            <ButtonText>
+              <Trans>Create an account</Trans>
+            </ButtonText>
+          </Button>
+
+          <Button
+            variant="solid"
+            color="secondary"
+            size="large"
+            onPress={showSignIn}
+            label={_(msg`Sign in`)}>
+            <ButtonText>
+              <Trans>Sign in</Trans>
+            </ButtonText>
+          </Button>
+        </View>
+
+        {isNative && <View style={{height: 10}} />}
+      </View>
+
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
+  )
+}

src/components/dialogs/SwitchAccount.tsx

@@ -0,0 +1,61 @@
+import React, {useCallback} from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
+import {type SessionAccount, useSession} from '#/state/session'
+import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import {useCloseAllActiveElements} from '#/state/util'
+import {atoms as a} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import {AccountList} from '../AccountList'
+import {Text} from '../Typography'
+
+export function SwitchAccountDialog({
+  control,
+}: {
+  control: Dialog.DialogControlProps
+}) {
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const {onPressSwitchAccount} = useAccountSwitcher()
+  const {setShowLoggedOut} = useLoggedOutViewControls()
+  const closeAllActiveElements = useCloseAllActiveElements()
+
+  const onSelectAccount = useCallback(
+    (account: SessionAccount) => {
+      if (account.did === currentAccount?.did) {
+        control.close()
+      } else {
+        onPressSwitchAccount(account, 'SwitchAccount')
+      }
+    },
+    [currentAccount, control, onPressSwitchAccount],
+  )
+
+  const onPressAddAccount = useCallback(() => {
+    setShowLoggedOut(true)
+    closeAllActiveElements()
+  }, [setShowLoggedOut, closeAllActiveElements])
+
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner label={_(msg`Switch Account`)}>
+        <View style={[a.gap_lg]}>
+          <Text style={[a.text_2xl, a.font_bold]}>
+            <Trans>Switch Account</Trans>
+          </Text>
+
+          <AccountList
+            onSelectAccount={onSelectAccount}
+            onSelectOther={onPressAddAccount}
+            otherLabel={_(msg`Add account`)}
+          />
+        </View>
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}

src/components/forms/DateField/index.android.tsx

@@ -8,7 +8,7 @@ import * as TextField from '#/components/forms/TextField'
 import {DateFieldButton} from './index.shared'
 
 export * as utils from '#/components/forms/DateField/utils'
-export const Label = TextField.Label
+export const LabelText = TextField.LabelText
 
 export function DateField({
   value,

src/components/forms/DateField/index.tsx

@@ -13,7 +13,7 @@ import * as TextField from '#/components/forms/TextField'
 import {DateFieldButton} from './index.shared'
 
 export * as utils from '#/components/forms/DateField/utils'
-export const Label = TextField.Label
+export const LabelText = TextField.LabelText
 
 /**
  * Date-only input. Accepts a date in the format YYYY-MM-DD, and reports date