Convert button to use forwardRef

* add pref for large alt badge

* add to settings

* do the large badge bit

* Tweak wording

---------

Co-authored-by: Dan Abramov <dan.abramov@gmail.com>

.eslintrc.js

@@ -31,6 +31,7 @@ module.exports = {
         },
       },
     ],
+    'bsky-internal/use-exact-imports': 'error',
     'bsky-internal/use-typed-gates': 'error',
     'simple-import-sort/imports': [
       'warn',

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

@@ -34,6 +34,9 @@ jobs:
           node-version-file: .nvmrc
           cache: yarn
 
+      - name: 🪛 Setup jq
+        uses: dcarbone/install-jq-action@v2
+
       - name: 🔨 Setup EAS
         uses: expo/expo-github-action@v8
         with:
@@ -96,13 +99,17 @@ jobs:
           name: build-${{ steps.timestamp.outputs.time }}.apk
           path: build.apk
 
+      - name: 📚 Get version from package.json
+        id: get-build-info
+        run: bash scripts/setGitHubOutput.sh
+
       - 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 }}"
+              "text": "Android production build for Google Play Store submission is ready!\n```Artifact: ${{ steps.upload-artifact-production.outputs.artifact-url }}\nVersion Number: ${{ steps.get-build-info.outputs.PACKAGE_VERSION }}\nBuild Number: ${{ steps.get-build-info.outputs.BSKY_ANDROID_VERSION_CODE }}```"
             }
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_CLIENT_ALERT_WEBHOOK }}
@@ -120,6 +127,32 @@ jobs:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_CLIENT_ALERT_WEBHOOK }}
           SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
 
+      - name: 🏗️ Build Production APK
+        if: ${{ inputs.profile == 'production' }}
+        run: yarn use-build-number-with-bump eas build -p android --profile production-apk --local --output build.apk --non-interactive
+
+      - name: 🚀 Upload Production APK Artifact
+        id: upload-artifact-production-apk
+        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 APK Build
+        if: ${{ inputs.profile == 'production' }}
+        uses: slackapi/slack-github-action@v1.25.0
+        with:
+          payload: |
+            {
+              "text": "Android production build for GitHub/Obtanium is ready!\n```Artifact: ${{ steps.upload-artifact-production-apk.outputs.artifact-url }}\nVersion Number: ${{ steps.get-build-info.outputs.PACKAGE_VERSION }}\nBuild Number: ${{ steps.get-build-info.outputs.BSKY_ANDROID_VERSION_CODE }}```"
+            }
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_CLIENT_ALERT_WEBHOOK }}
+          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+
       - name: ⬇️ Restore Cache
         id: get-base-commit
         uses: actions/cache@v4

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

@@ -34,6 +34,9 @@ jobs:
           node-version-file: .nvmrc
           cache: yarn
 
+      - name: 🪛 Setup jq
+        uses: dcarbone/install-jq-action@v2
+
       - name: 🔨 Setup EAS
         uses: expo/expo-github-action@v8
         with:
@@ -81,6 +84,22 @@ jobs:
       - name: 🚀 Deploy
         run: eas submit -p ios --non-interactive --path build.ipa
 
+      - name: 📚 Get version from package.json
+        id: get-build-info
+        run: bash scripts/setGitHubOutput.sh
+
+      - name: 🔔 Notify Slack of Production Build
+        if: ${{ inputs.profile == 'production' }}
+        uses: slackapi/slack-github-action@v1.25.0
+        with:
+          payload: |
+            {
+              "text": "iOS production build for App Store submission is ready!\n```Artifact: Check TestFlight to know when it is available\nVersion Number: ${{ steps.get-build-info.outputs.PACKAGE_VERSION }}\nBuild Number: ${{ steps.get-build-info.outputs.BSKY_IOS_BUILD_NUMBER }}```"
+            }
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_CLIENT_ALERT_WEBHOOK }}
+          SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
+
       - name: ⬇️ Restore Cache
         id: get-base-commit
         uses: actions/cache@v4

.husky/pre-commit

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

__e2e__/flows/feed-reorder.yml

@@ -36,12 +36,15 @@ appId: xyz.blueskyweb.app
     id: "viewHeaderDrawerBtn"
 - tapOn:
     id: "menuItemButton-Feeds"
-- tapOn: "Edit Saved Feeds"
+- tapOn: 
+    id: "editFeedsBtn"
 - tapOn:
     label: "Tap on down arrow"
     point: "79%,23%"
 - tapOn:
-    id: "bottomBarHomeBtn"
+    id: "viewHeaderDrawerBtn"
+- tapOn:
+    id: "viewHeaderDrawerBtn"
 - assertVisible:
     id: "homeScreenFeedTabs-selector-0"
     text: "alice-favs"
@@ -54,11 +57,15 @@ appId: xyz.blueskyweb.app
     id: "viewHeaderDrawerBtn"
 - tapOn:
     id: "menuItemButton-Feeds"
+- tapOn: 
+    id: "editFeedsBtn"
 - tapOn:
     label: "Tap on down arrow"
     point: "79%,23%"
 - tapOn:
-    id: "bottomBarHomeBtn"
+    id: "viewHeaderDrawerBtn"
+- tapOn:
+    id: "viewHeaderDrawerBtn"
 - assertVisible:
     id: "homeScreenFeedTabs-selector-0"
     text: "Following"
@@ -71,11 +78,15 @@ appId: xyz.blueskyweb.app
     id: "viewHeaderDrawerBtn"
 - tapOn:
     id: "menuItemButton-Feeds"
+- tapOn: 
+    id: "editFeedsBtn"
 - tapOn:
     label: "Tap on unpin"
     point: "91%,23%"
 - tapOn:
-    id: "bottomBarHomeBtn"
+    id: "viewHeaderDrawerBtn"
+- tapOn:
+    id: "viewHeaderDrawerBtn"
 - assertVisible:
     id: "homeScreenFeedTabs-selector-0"
     text: "alice-favs"

__e2e__/flows/home-screen.yml

@@ -28,6 +28,8 @@ appId: xyz.blueskyweb.app
 - tapOn: "Pin to Home"
 - tapOn:
     id: "bottomBarHomeBtn"
+- tapOn:
+    id: "viewHeaderDrawerBtn"
 - assertNotVisible: "Feeds ✨"
 
 - tapOn:
@@ -50,7 +52,7 @@ appId: xyz.blueskyweb.app
     text: "1"
 - tapOn:
     id: "repostBtn"
-- tapOn: "Undo repost"
+- tapOn: "Remove repost"
 - assertNotVisible:
     id: "repostCount"
 

__e2e__/flows/onboarding-old.yml

@@ -1,31 +0,0 @@
-# Remove this test when the old onboarding is deprecated
-appId: xyz.blueskyweb.app
----
-- runScript:
-    file: ../setupServer.js
-    env:
-        SERVER_PATH: "?users"
-- runFlow:
-    file: ../setupApp.yml
-- tapOn:
-    id: "e2eSignInAlice"
-- tapOn:
-    id: "e2eStartLongboarding"
-- tapOn: "Continue to next step"
-- tapOn: "Continue to the next step without following any accounts"
-- tapOn: Show replies in Following feed
-- tapOn: Show quote-posts in Following feed
-- tapOn: Show re-posts in Following feed
-- tapOn: Show replies in Following feed
-- waitForAnimationToEnd
-- tapOn: Continue to next step
-- waitForAnimationToEnd
-- tapOn: "Continue to the next step"
-- waitForAnimationToEnd
-- tapOn: Continue to next step
-- waitForAnimationToEnd
-- tapOn: Continue to next step
-- waitForAnimationToEnd
-- tapOn: "Complete onboarding and start using your account"
-- waitForAnimationToEnd
-- assertVisible: Following

__e2e__/flows/thread-screen.yml

@@ -58,7 +58,7 @@ appId: xyz.blueskyweb.app
     id: "repostBtn"
     childOf:
         id: "postThreadItem-by-bob.test"
-- tapOn: "Undo repost"
+- tapOn: "Remove repost"
 - assertNotVisible:
     id: "repostCount-expanded"
 
@@ -77,7 +77,7 @@ appId: xyz.blueskyweb.app
     id: "repostBtn"
     childOf:
         id: "postThreadItem-by-carla.test"
-- tapOn: "Undo repost"
+- tapOn: "Remove repost"
 - assertNotVisible:
     id: "repostCount"
     childOf:

__tests__/lib/string.test.ts

@@ -6,7 +6,6 @@ import {createFullHandle, makeValidHandle} from '../../src/lib/strings/handles'
 import {enforceLen} from '../../src/lib/strings/helpers'
 import {detectLinkables} from '../../src/lib/strings/rich-text-detection'
 import {shortenLinks} from '../../src/lib/strings/rich-text-manip'
-import {ago} from '../../src/lib/strings/time'
 import {
   makeRecordUri,
   toNiceDomain,
@@ -142,78 +141,6 @@ describe('makeRecordUri', () => {
   })
 })
 
-describe('ago', () => {
-  const oneYearDate = new Date(
-    new Date().setMonth(new Date().getMonth() - 11),
-  ).setDate(new Date().getDate() - 28)
-
-  const inputs = [
-    1671461038,
-    '04 Dec 1995 00:12:00 GMT',
-    new Date(),
-    new Date().setSeconds(new Date().getSeconds() - 10),
-    new Date().setMinutes(new Date().getMinutes() - 10),
-    new Date().setHours(new Date().getHours() - 1),
-    new Date().setDate(new Date().getDate() - 1),
-    new Date().setDate(new Date().getDate() - 20),
-    new Date().setDate(new Date().getDate() - 25),
-    new Date().setDate(new Date().getDate() - 28),
-    new Date().setDate(new Date().getDate() - 29),
-    new Date().setDate(new Date().getDate() - 30),
-    new Date().setMonth(new Date().getMonth() - 1),
-    new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(
-      new Date().getDate() - 20,
-    ),
-    new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(
-      new Date().getDate() - 25,
-    ),
-    new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(
-      new Date().getDate() - 28,
-    ),
-    new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(
-      new Date().getDate() - 29,
-    ),
-    new Date().setMonth(new Date().getMonth() - 11),
-    new Date(new Date().setMonth(new Date().getMonth() - 11)).setDate(
-      new Date().getDate() - 20,
-    ),
-    new Date(new Date().setMonth(new Date().getMonth() - 11)).setDate(
-      new Date().getDate() - 25,
-    ),
-    oneYearDate,
-  ]
-  const outputs = [
-    new Date(1671461038).toLocaleDateString(),
-    new Date('04 Dec 1995 00:12:00 GMT').toLocaleDateString(),
-    'now',
-    '10s',
-    '10m',
-    '1h',
-    '1d',
-    '20d',
-    '25d',
-    '28d',
-    '29d',
-    '1mo',
-    '1mo',
-    '1mo',
-    '1mo',
-    '2mo',
-    '2mo',
-    '11mo',
-    '11mo',
-    '11mo',
-    new Date(oneYearDate).toLocaleDateString(),
-  ]
-
-  it('correctly calculates how much time passed, in a string', () => {
-    for (let i = 0; i < inputs.length; i++) {
-      const result = ago(inputs[i])
-      expect(result).toEqual(outputs[i])
-    }
-  })
-})
-
 describe('makeValidHandle', () => {
   const inputs = [
     'test-handle-123',
@@ -479,6 +406,26 @@ describe('parseEmbedPlayerFromUrl', () => {
     'https://media.tenor.com/someID/someName.gif',
     'https://media.tenor.com/someID',
     'https://media.tenor.com',
+
+    'https://www.flickr.com/photos/username/albums/72177720308493661',
+    'https://flickr.com/photos/username/albums/72177720308493661',
+    'https://flickr.com/photos/username/albums/72177720308493661/',
+    'https://flickr.com/photos/username/albums/72177720308493661//',
+    'https://flic.kr/s/aHBqjAES3i',
+
+    'https://flickr.com/foetoes/username/albums/3903',
+    'https://flickr.com/albums/3903',
+    'https://flic.kr/s/OolI',
+    'https://flic.kr/t/aHBqjAES3i',
+
+    'https://www.flickr.com/groups/898944@N23/pool',
+    'https://flickr.com/groups/898944@N23/pool',
+    'https://flickr.com/groups/898944@N23/pool/',
+    'https://flickr.com/groups/898944@N23/pool//',
+    'https://flic.kr/go/8WJtR',
+
+    'https://www.flickr.com/groups/898944@N23/',
+    'https://www.flickr.com/groups',
   ]
 
   const outputs = [
@@ -776,6 +723,66 @@ describe('parseEmbedPlayerFromUrl', () => {
     undefined,
     undefined,
     undefined,
+
+    {
+      type: 'flickr_album',
+      source: 'flickr',
+      playerUri: 'https://embedr.flickr.com/photosets/72177720308493661',
+    },
+    {
+      type: 'flickr_album',
+      source: 'flickr',
+      playerUri: 'https://embedr.flickr.com/photosets/72177720308493661',
+    },
+    {
+      type: 'flickr_album',
+      source: 'flickr',
+      playerUri: 'https://embedr.flickr.com/photosets/72177720308493661',
+    },
+    {
+      type: 'flickr_album',
+      source: 'flickr',
+      playerUri: 'https://embedr.flickr.com/photosets/72177720308493661',
+    },
+    {
+      type: 'flickr_album',
+      source: 'flickr',
+      playerUri: 'https://embedr.flickr.com/photosets/72177720308493661',
+    },
+
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+
+    {
+      type: 'flickr_album',
+      source: 'flickr',
+      playerUri: 'https://embedr.flickr.com/groups/898944@N23',
+    },
+    {
+      type: 'flickr_album',
+      source: 'flickr',
+      playerUri: 'https://embedr.flickr.com/groups/898944@N23',
+    },
+    {
+      type: 'flickr_album',
+      source: 'flickr',
+      playerUri: 'https://embedr.flickr.com/groups/898944@N23',
+    },
+    {
+      type: 'flickr_album',
+      source: 'flickr',
+      playerUri: 'https://embedr.flickr.com/groups/898944@N23',
+    },
+    {
+      type: 'flickr_album',
+      source: 'flickr',
+      playerUri: 'https://embedr.flickr.com/groups/898944@N23',
+    },
+
+    undefined,
+    undefined,
   ]
 
   it('correctly grabs the correct id from uri', () => {

app.config.js

@@ -204,7 +204,6 @@ module.exports = function (config) {
         ],
         './plugins/withAndroidManifestPlugin.js',
         './plugins/withAndroidManifestFCMIconPlugin.js',
-        './plugins/withAndroidManifestLaunchModePlugin.js',
         './plugins/withAndroidStylesWindowBackgroundPlugin.js',
         './plugins/withAndroidStylesAccentColorPlugin.js',
         './plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js',

assets/icons/arrowBottom_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 21a1 1 0 0 1-.707-.293l-6-6a1 1 0 1 1 1.414-1.414L11 17.586V4a1 1 0 1 1 2 0v13.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-6 6A1 1 0 0 1 12 21Z" clip-rule="evenodd"/></svg>

assets/icons/closeQuote_filled_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M3.004 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2v5a1 1 0 0 0 .43.822c.57.395 1.176.031 1.685-.255.428-.24.998-.614 1.569-1.15 1.154-1.082 2.316-2.832 2.316-5.417V5a1 1 0 0 0-1-1h-7ZM14.004 4a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h2v5a1 1 0 0 0 .43.822c.57.395 1.176.031 1.685-.255.428-.24.998-.614 1.569-1.15 1.154-1.082 2.316-2.832 2.316-5.417V5a1 1 0 0 0-1-1h-7Z"/></svg>

assets/icons/closeQuote_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2.004 5a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v8c0 2.585-1.162 4.335-2.316 5.417-.571.536-1.14.91-1.569 1.15a7.01 7.01 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001L6.004 19l.351.936A1 1 0 0 1 5.004 19v-5h-2a1 1 0 0 1-1-1V5Zm5 12.234c.104-.085.21-.177.316-.276.846-.793 1.684-2.043 1.684-3.958V6h-5v6h2a1 1 0 0 1 1 1v4.234Zm6-12.234a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v8c0 2.585-1.162 4.335-2.316 5.417-.571.536-1.14.91-1.569 1.15a7.018 7.018 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001-.352-.936.351.936A1 1 0 0 1 16.004 19v-5h-2a1 1 0 0 1-1-1V5Zm5 12.234V13a1 1 0 0 0-1-1h-2V6h5v7c0 1.915-.838 3.165-1.684 3.958-.106.1-.212.191-.316.276Z" clip-rule="evenodd"/></svg>

assets/icons/closeQuote_stroke2_corner1_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2.003 5.999a2 2 0 0 1 2-1.999h5c1.104 0 2 .893 2 1.999V13c0 2.585-1.16 4.335-2.315 5.417-.571.536-1.14.91-1.569 1.15a7.01 7.01 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001L6.004 19l.351.936a1 1 0 0 1-1.351-.935L5 14H4a2 2 0 0 1-2-2.001l.002-6Zm5 11.236L7 12.999A1 1 0 0 0 6 12H4l.003-6h5v7c0 1.915-.837 3.165-1.683 3.958-.106.1-.213.192-.317.277Zm6-11.235a2 2 0 0 1 2-2h5c1.104 0 2 .893 2 1.999V13c0 2.585-1.16 4.335-2.315 5.417-.571.536-1.14.91-1.569 1.15a7.018 7.018 0 0 1-.738.36l-.016.006-.006.002h-.002l-.001.001-.352-.936.351.936A1 1 0 0 1 16.004 19v-5h-1a2 2 0 0 1-2-2V6Zm7 0h-5v6h2a1 1 0 0 1 1 1v4.234c.105-.085.211-.177.317-.276.846-.793 1.684-2.043 1.684-3.958V6Z" clip-rule="evenodd"/></svg>

assets/icons/image_stroke2_corner0_rounded.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5Zm16 0H5v7.213l1.246-.932.044-.03a3 3 0 0 1 3.863.454c1.468 1.58 2.941 2.749 4.847 2.749 1.703 0 2.855-.555 4-1.618V5Zm0 10.357c-1.112.697-2.386 1.097-4 1.097-2.81 0-4.796-1.755-6.313-3.388a1 1 0 0 0-1.269-.164L5 14.712V19h14v-3.643ZM15 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z" clip-rule="evenodd"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v7.213l1.246-.932.044-.03a3 3 0 0 1 3.863.454c1.468 1.58 2.941 2.749 4.847 2.749 1.703 0 2.855-.555 4-1.618V5H5Zm14 10.357c-1.112.697-2.386 1.097-4 1.097-2.81 0-4.796-1.755-6.313-3.388a1 1 0 0 0-1.269-.164L5 14.712V19h14v-3.643ZM15 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Z" clip-rule="evenodd"/></svg>

assets/icons/listPlus_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 5a1 1 0 0 0 0 2h16a1 1 0 1 0 0-2H4Zm0 12a1 1 0 1 0 0 2h3a1 1 0 1 0 0-2H4Zm-1-5a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1Zm14-3c.552 0 1 .41 1 .917V13.5h3.583c.507 0 .917.448.917 1s-.41 1-.917 1H18v3.583c0 .507-.448.917-1 .917s-1-.41-1-.917V15.5h-3.583c-.507 0-.917-.448-.917-1s.41-1 .917-1H16V9.917C16 9.41 16.448 9 17 9Z" clip-rule="evenodd"/></svg>

assets/icons/menu_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>

assets/icons/newskie.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#FFC404" fill-rule="evenodd" d="M11.183 8.561c0 .544.348.984.892.984.545 0 .893-.44.893-.985V6.985c0-.544-.348-.985-.893-.985-.543 0-.892.44-.892.985v1.576Zm5.94 7.481c0 .539-.438.942-.976.942H8.004c-.538 0-.975-.411-.975-.95 0-2.782 2.264-5.021 5.046-5.021 2.783 0 5.047 2.247 5.047 5.03Zm-.43-4.584a.983.983 0 0 1 0-1.393l1.114-1.114a.985.985 0 0 1 1.393 1.393l-1.114 1.114a.985.985 0 0 1-1.393 0Zm2.897 3.741h1.575c.544 0 .985.349.985.892 0 .544-.44.892-.985.892h-1.67a.872.872 0 0 1-.89-.887c0-.543.44-.897.985-.897Zm-14.045.893c0-.544-.44-.892-.985-.892H2.985c-.544 0-.985.349-.985.892 0 .544.44.892.985.892H4.56c.545 0 .985-.349.985-.892Zm1.913-6.027a.985.985 0 0 1-1.393 1.393L4.95 10.344A.985.985 0 0 1 6.344 8.95l1.114 1.114Z" clip-rule="evenodd"/></svg>

assets/icons/openQuote_filled_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M8.004 5a1 1 0 0 0-.43-.822c-.57-.395-1.176-.031-1.685.255-.428.24-.998.614-1.569 1.15C3.166 6.665 2.004 8.415 2.004 11v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5ZM19.004 5a1 1 0 0 0-.43-.822c-.57-.395-1.176-.031-1.685.255-.428.24-.998.614-1.569 1.15-1.154 1.082-2.316 2.832-2.316 5.417v8a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-8a1 1 0 0 0-1-1h-2V5Z"/></svg>

assets/icons/openQuote_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7.574 4.178a1 1 0 0 1 .43.822v5h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-8c0-2.585 1.162-4.335 2.316-5.417a8.163 8.163 0 0 1 1.569-1.15 7.029 7.029 0 0 1 .738-.36l.016-.005.005-.003h.003v-.001c.001 0 .002 0 .353.936l-.351-.936a1 1 0 0 1 .92.114Zm-1.57 2.588a5.99 5.99 0 0 0-.316.276C4.842 7.835 4.004 9.085 4.004 11v7h5v-6h-2a1 1 0 0 1-1-1V6.766Zm12.57-2.588a1 1 0 0 1 .43.822v5h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-8c0-2.585 1.162-4.335 2.316-5.417a8.166 8.166 0 0 1 1.569-1.15 7.038 7.038 0 0 1 .738-.36l.016-.005.005-.003h.003v-.001c.001 0 .002 0 .353.936l-.351-.936a1 1 0 0 1 .92.114Zm-1.57 2.588c-.105.085-.21.177-.316.276-.846.793-1.684 2.043-1.684 3.958v7h5v-6h-2a1 1 0 0 1-1-1V6.766Z" clip-rule="evenodd"/></svg>

assets/icons/personPlus_filled_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H15a3 3 0 1 1 0-6c0-.824.332-1.571.87-2.113C14.739 12.32 13.435 12 12 12Zm6 2a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>

assets/icons/personPlus_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM5.678 19c.71-2.909 3.092-5 6.322-5 .621 0 1.206.077 1.748.218a1 1 0 1 0 .504-1.936A8.931 8.931 0 0 0 12 12c-4.758 0-8.083 3.521-8.496 7.906A1 1 0 0 0 4.5 21H11a1 1 0 1 0 0-2H5.678ZM18 14a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2h-2v2a1 1 0 1 1-2 0v-2h-2a1 1 0 1 1 0-2h2v-2a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>

assets/icons/pin_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6.5 3a1 1 0 0 1 1-1h9a1 1 0 0 1 1 1v3.997a6.25 6.25 0 0 0 1.83 4.42l.377.376A1 1 0 0 1 20 12.5V15a1 1 0 0 1-1 1h-6v5a1 1 0 1 1-2 0v-5H5a1 1 0 0 1-1-1v-2.5a1 1 0 0 1 .293-.707l.376-.377A6.25 6.25 0 0 0 6.5 6.996V3.001Zm2 1v2.997a8.25 8.25 0 0 1-2.416 5.834L6 12.914V14h12v-1.086l-.084-.083A8.25 8.25 0 0 1 15.5 6.997V4h-7Z" clip-rule="evenodd"/></svg>

assets/icons/repost_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M16.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L17.586 7H5v4a1 1 0 1 1-2 0V6a1 1 0 0 1 1-1h13.586l-1.293-1.293a1 1 0 0 1 0-1.414ZM21 13v5a1 1 0 0 1-1 1H6.414l1.293 1.293a1 1 0 1 1-1.414 1.414l-3-3a1 1 0 0 1 0-1.414l3-3a1 1 0 0 1 1.414 1.414L6.414 17H19v-4a1 1 0 1 1 2 0Z" clip-rule="evenodd"/></svg>

assets/icons/repost_stroke2_corner3_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M16.793 2.293a1 1 0 0 1 1.414 0L20.5 4.586a2 2 0 0 1 0 2.828l-2.293 2.293a1 1 0 0 1-1.414-1.414L18.086 7H7a2 2 0 0 0-2 2v2a1 1 0 1 1-2 0V9a4 4 0 0 1 4-4h11.086l-1.293-1.293a1 1 0 0 1 0-1.414ZM20 12a1 1 0 0 1 1 1v2a4 4 0 0 1-4 4H5.914l1.293 1.293a1 1 0 1 1-1.414 1.414L3.5 19.414a2 2 0 0 1 0-2.828l2.293-2.293a1 1 0 0 1 1.414 1.414L5.914 17H17a2 2 0 0 0 2-2v-2a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>

assets/icons/shapes_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M7 3a1 1 0 0 1 1 1v2h2a1 1 0 1 1 0 2H8v2a1 1 0 1 1-2 0V8H4a1 1 0 0 1 0-2h2V4a1 1 0 0 1 1-1Zm6 4a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM3 14a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Zm2 1v4h4v-4H5Zm9.171-.829a1 1 0 0 1 1.415 0L17 15.585l1.414-1.414a1 1 0 1 1 1.414 1.414L18.414 17l1.414 1.414a1 1 0 0 1-1.414 1.414L17 18.414l-1.415 1.414a1 1 0 0 1-1.414-1.414l1.415-1.415-1.415-1.414a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>

assets/icons/star_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M12.902 1.568a1 1 0 0 0-1.804 0L8.455 7.085l-6.085.799a1 1 0 0 0-.557 1.718l4.45 4.207-1.117 6.008a1 1 0 0 0 1.458 1.063L12 17.962l5.396 2.918a1 1 0 0 0 1.459-1.063l-1.117-6.008 4.45-4.207a1 1 0 0 0-.558-1.718l-6.085-.8-2.643-5.516Z"/></svg>

assets/icons/star_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 1a1 1 0 0 1 .902.568l2.643 5.517 6.085.799a1 1 0 0 1 .557 1.718l-4.45 4.207 1.118 6.008a1 1 0 0 1-1.46 1.063L12 17.962 6.604 20.88a1 1 0 0 1-1.459-1.063l1.117-6.008-4.45-4.207a1 1 0 0 1 .558-1.718l6.085-.8 2.643-5.516A1 1 0 0 1 12 1Zm0 3.315-1.975 4.123a1 1 0 0 1-.772.56l-4.538.595 3.317 3.137a1 1 0 0 1 .296.91l-.834 4.485 4.03-2.179a1 1 0 0 1 .952 0l4.03 2.179-.834-4.485a1 1 0 0 1 .296-.91l3.317-3.137-4.538-.596a1 1 0 0 1-.772-.56L12 4.316Z" clip-rule="evenodd"/></svg>

bskyweb/cmd/bskyweb/server.go

@@ -207,6 +207,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/profile/:handleOrDID", server.WebProfile)
 	e.GET("/profile/:handleOrDID/follows", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/followers", server.WebGeneric)
+	e.GET("/profile/:handleOrDID/known-followers", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/lists/:rkey", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/feed/:rkey", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/feed/:rkey/liked-by", server.WebGeneric)

docs/deploy-ota.md

@@ -14,15 +14,20 @@ diff results in incompatible native changes, a new client build will automatical
 
 ### Prerequisites
 
-- Remove any internal client from your device and download the client from the App Store/Google Play. This will help for 
-testing as well as retrieving the build number.
-- You should have signed in to EAS locally through npx eas login. You will need to modify the build number in a 
-subsequent step.
-- Identify the build number of the production app you want to deploy an update for. iOS and Android build numbers are 
-divergent, so you will need to find both
+- Find the latest production build number for both iOS and Android in Slack. These are listed in #client-builds
+  - Production builds always send the Version Number and Build Number in the Slack message. Search for the latest
+  production version number, and you should find the correct information.
+  
+    ![slack-build-info](./img/slack-build-info.png)
+
+- It may also be useful to check the current production clients for these values. This will also help for testing. Note
+that you will need to _fully_ remove the existing internal client build from your device, otherwise the given values in
+the app may differ from the actual production values.
 
   ![app-build-number](./img/app-build-number.png)
 
+- You should have signed in to EAS locally through npx eas login. You will need to modify the build number in a
+subsequent step.
 - Ensure that the commit the initial client was cut from is properly tagged in git. The tag should be in the format of 1.X.0
   - Note: If the commit is not properly tagged, then the OTA deployment will simply fail since the GitHub Action will 
   not be able to find a commit to fingerprint and diff against.
@@ -38,14 +43,17 @@ to create your branch from, this should be properly set.
 
 ### Deployment
 
-- Update the build number through EAS
+- Update the build number through EAS to match the build numbers of the
+    production iOS/Android apps
     - Note: This isn’t strictly necessary, but having a step that takes you off of GitHub and into the terminal provides 
     a little “friction” to avoid fat fingering a release. Since there are legitimate reasons to just “click and deploy”
     for internal builds, I felt it useful to make sure it doesn’t accidentally become a prod deployment.
-    - Set the build number to the appropriate build number found in the prerequisite steps. Again, this should be the 
+    - Set the build numbers to the values found in the prerequisite steps. Again, this should be the 
     build number for the current production release you want to deploy for.
     - `npx eas build:version:set -p ios`
     - `npx eas build:version:set -p android`
+    - These steps should spit out what the current build number is, save those values
+        for later too
 - Run the deployment
   - Navigate to https://github.com/bluesky-social/social-app/actions/workflows/bundle-deploy-eas-update.yml
   - Select the “Run Workflow” dropdown
@@ -79,3 +87,9 @@ In about five minutes, the new deployment should be available for download. To t
 - Launch the app once and wait approximately 15 seconds
 - Relaunch the app
 - Check the Settings page and scroll to the bottom. The commit hash should now be the latest commit on your deployed branch.
+
+### Post Deployment
+
+- Reset both platforms build numbers to what they were before the OTA
+    deployment. These values should have been logged by the EAS CLI when you
+    reset them to the production values prior to OTA.

eas.json

@@ -46,6 +46,20 @@
         "EXPO_PUBLIC_ENV": "production"
       }
     },
+    "production-apk": {
+      "extends": "base",
+      "distribution": "internal",
+      "ios": {
+        "autoIncrement": false
+      },
+      "android": {
+        "autoIncrement": false
+      },
+      "channel": "production",
+      "env": {
+        "EXPO_PUBLIC_ENV": "production"
+      }
+    },
     "testflight": {
       "extends": "base",
       "ios": {

eslint/index.js

@@ -3,6 +3,7 @@
 module.exports = {
   rules: {
     'avoid-unwrapped-text': require('./avoid-unwrapped-text'),
+    'use-exact-imports': require('./use-exact-imports'),
     'use-typed-gates': require('./use-typed-gates'),
   },
 }

eslint/use-exact-imports.js

@@ -0,0 +1,22 @@
+/* eslint-disable bsky-internal/use-exact-imports */
+const BANNED_IMPORTS = [
+  '@fortawesome/free-regular-svg-icons',
+  '@fortawesome/free-solid-svg-icons',
+]
+
+exports.create = function create(context) {
+  return {
+    Literal(node) {
+      if (typeof node.value !== 'string') {
+        return
+      }
+      if (BANNED_IMPORTS.includes(node.value)) {
+        context.report({
+          node,
+          message:
+            'Import the specific thing you want instead of the entire package',
+        })
+      }
+    },
+  }
+}

modules/BlueskyNSE/NotificationService.swift

@@ -1,4 +1,5 @@
 import UserNotifications
+import UIKit
 
 let APP_GROUP = "group.app.bsky"
 
@@ -31,7 +32,12 @@ class NotificationService: UNNotificationServiceExtension {
   }
   
   func mutateWithBadge(_ content: UNMutableNotificationContent) {
-    content.badge = 1
+    var count = prefs?.integer(forKey: "badgeCount") ?? 0
+    count += 1
+    
+    // Set the new badge number for the notification, then store that value for using later
+    content.badge = NSNumber(value: count)
+    prefs?.setValue(count, forKey: "badgeCount")
   }
   
   func mutateWithChatMessage(_ content: UNMutableNotificationContent) {

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

@@ -66,5 +66,9 @@ class ExpoBackgroundNotificationHandlerModule : Module() {
     AsyncFunction("removeManyFromStringArrayAsync") { forKey: String, strings: Array<String> ->
       NotificationPrefs(appContext.reactContext).removeManyFromStringArray(forKey, strings)
     }
+
+    AsyncFunction("setBadgeCountAsync") { _: Int ->
+      // This does nothing on Android
+    }
   }
 }

modules/expo-background-notification-handler/ios/ExpoBackgroundNotificationHandlerModule.swift

@@ -10,7 +10,8 @@ let DEFAULTS: [String:Any] = [
   "playSoundQuote": false,
   "playSoundReply": false,
   "playSoundRepost": false,
-  "mutedThreads": [:] as! [String:[String]]
+  "mutedThreads": [:] as! [String:[String]],
+  "badgeCount": 0,
 ]
 
 /*
@@ -112,5 +113,9 @@ public class ExpoBackgroundNotificationHandlerModule: Module {
         userDefaults?.setValue(curr, forKey: forKey)
       }
     }
+    
+    AsyncFunction("setBadgeCountAsync") { (count: Int) in
+      userDefaults?.setValue(count, forKey: "badgeCount")
+    }
   }
 }

modules/expo-background-notification-handler/src/ExpoBackgroundNotificationHandler.types.ts

@@ -31,6 +31,7 @@ export type ExpoBackgroundNotificationHandlerModule = {
     forKey: keyof BackgroundNotificationHandlerPreferences,
     value: string[],
   ) => Promise<void>
+  setBadgeCountAsync: (count: number) => Promise<void>
 }
 
 // TODO there are more preferences in the native code, however they have not been added here yet.

modules/expo-background-notification-handler/src/ExpoBackgroundNotificationHandlerModule.web.ts

@@ -24,4 +24,5 @@ export const BackgroundNotificationHandler = {
   removeFromStringArrayAsync: async (_: string, __: string) => {},
   addManyToStringArrayAsync: async (_: string, __: string[]) => {},
   removeManyFromStringArrayAsync: async (_: string, __: string[]) => {},
+  setBadgeCountAsync: async (_: number) => {},
 } as ExpoBackgroundNotificationHandlerModule

modules/expo-bluesky-translate/expo-module.config.json

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

modules/expo-bluesky-translate/index.ts

@@ -1,6 +0,0 @@
-export {
-  isAvailable,
-  isLanguageSupported,
-  NativeTranslationModule,
-  NativeTranslationView,
-} from './src/ExpoBlueskyTranslateView'

modules/expo-bluesky-translate/ios/Common/UIHostingControllerCompat.swift

@@ -1,20 +0,0 @@
-import ExpoModulesCore
-import SwiftUI
-
-// Thanks to Andrew Levy for this code snippet
-// https://github.com/andrew-levy/swiftui-react-native/blob/d3fbb2abf07601ff0d4b83055e7717bb980910d6/ios/Common/ExpoView%2BUIHostingController.swift
-
-extension ExpoView {
-  func setupHostingController(_ hostingController: UIHostingController<some View>) {
-    hostingController.view.translatesAutoresizingMaskIntoConstraints = false
-    hostingController.view.backgroundColor = .clear
-
-    addSubview(hostingController.view)
-    NSLayoutConstraint.activate([
-      hostingController.view.topAnchor.constraint(equalTo: self.topAnchor),
-      hostingController.view.bottomAnchor.constraint(equalTo: self.bottomAnchor),
-      hostingController.view.leftAnchor.constraint(equalTo: self.leftAnchor),
-      hostingController.view.rightAnchor.constraint(equalTo: self.rightAnchor),
-    ])
-  }
-}

modules/expo-bluesky-translate/ios/ExpoBlueskyTranslate.podspec

@@ -1,21 +0,0 @@
-Pod::Spec.new do |s|
-  s.name           = 'ExpoBlueskyTranslate'
-  s.version        = '1.0.0'
-  s.summary        = 'Uses SwiftUI translation to translate text.'
-  s.description    = 'Uses SwiftUI translation to translate text.'
-  s.author         = ''
-  s.homepage       = 'https://docs.expo.dev/modules/'
-  s.platforms      = { :ios => '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-bluesky-translate/ios/ExpoBlueskyTranslateModule.swift

@@ -1,18 +0,0 @@
-import ExpoModulesCore
-import Foundation
-import SwiftUI
-
-public class ExpoBlueskyTranslateModule: Module {
-  public func definition() -> ModuleDefinition {
-    Name("ExpoBlueskyTranslate")
-    
-    AsyncFunction("presentAsync") { (text: String) in
-      DispatchQueue.main.async { [weak state = TranslateViewState.shared] in
-        state?.isPresented = true
-        state?.text = text
-      }
-    }
-    
-    View(ExpoBlueskyTranslateView.self) {}
-  }
-}

modules/expo-bluesky-translate/ios/ExpoBlueskyTranslateView.swift

@@ -1,22 +0,0 @@
-import ExpoModulesCore
-import Foundation
-import SwiftUI
-
-class TranslateViewState: ObservableObject {
-  static var shared = TranslateViewState()
-  
-  @Published var isPresented = false
-  @Published var text = ""
-}
-
-class ExpoBlueskyTranslateView: ExpoView {
-  required init(appContext: AppContext? = nil) {
-    if #available(iOS 14.0, *) {
-      let hostingController = UIHostingController(rootView: TranslateView())
-      super.init(appContext: appContext)
-      setupHostingController(hostingController)
-    } else {
-      super.init(appContext: appContext)
-    }
-  }
-}

modules/expo-bluesky-translate/ios/TranslateView.swift

@@ -1,31 +0,0 @@
-import SwiftUI
-// conditionally import the Translation module
-#if canImport(Translation)
-import Translation
-#endif
-
-struct TranslateView: View {
-  @ObservedObject var state = TranslateViewState.shared
-
-  var body: some View {
-    if #available(iOS 17.4, *) {
-      VStack {
-        UIViewRepresentableWrapper(view: UIView(frame: .zero))
-      }
-      .translationPresentation(
-        isPresented: $state.isPresented,
-        text: state.text
-      )
-    }
-  }
-}
-
-struct UIViewRepresentableWrapper: UIViewRepresentable {
-  let view: UIView
-
-  func makeUIView(context: Context) -> UIView {
-    return view
-  }
-
-  func updateUIView(_ uiView: UIView, context: Context) {}
-}

modules/expo-bluesky-translate/src/ExpoBlueskyTranslate.types.ts

@@ -1,3 +0,0 @@
-export type ExpoBlueskyTranslateModule = {
-  presentAsync: (text: string) => Promise<void>
-}

modules/expo-bluesky-translate/src/ExpoBlueskyTranslateView.ios.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import {Platform} from 'react-native'
-import {requireNativeModule, requireNativeViewManager} from 'expo-modules-core'
-
-import {ExpoBlueskyTranslateModule} from './ExpoBlueskyTranslate.types'
-
-export const NativeTranslationModule =
-  requireNativeModule<ExpoBlueskyTranslateModule>('ExpoBlueskyTranslate')
-
-const NativeView: React.ComponentType = requireNativeViewManager(
-  'ExpoBlueskyTranslate',
-)
-
-export function NativeTranslationView() {
-  return <NativeView />
-}
-
-export const isAvailable = Number(Platform.Version) >= 17.4
-
-// https://en.wikipedia.org/wiki/Translate_(Apple)#Languages
-const SUPPORTED_LANGUAGES = [
-  'ar',
-  'zh',
-  'zh',
-  'nl',
-  'en',
-  'en',
-  'fr',
-  'de',
-  'id',
-  'it',
-  'ja',
-  'ko',
-  'pl',
-  'pt',
-  'ru',
-  'es',
-  'th',
-  'tr',
-  'uk',
-  'vi',
-]
-
-export function isLanguageSupported(lang?: string) {
-  // If the language is not provided, we assume it is supported
-  if (!lang) return true
-  return SUPPORTED_LANGUAGES.includes(lang)
-}

modules/expo-bluesky-translate/src/ExpoBlueskyTranslateView.tsx

@@ -1,13 +0,0 @@
-export const NativeTranslationModule = {
-  presentAsync: async (_: string) => {},
-}
-
-export function NativeTranslationView() {
-  return null
-}
-
-export const isAvailable = false
-
-export function isLanguageSupported(_lang?: string) {
-  return false
-}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsky.app",
-  "version": "1.85.0",
+  "version": "1.87.0",
   "private": true,
   "engines": {
     "node": ">=18"
@@ -49,7 +49,7 @@
     "open-analyzer": "EXPO_PUBLIC_OPEN_ANALYZER=1 yarn build-web"
   },
   "dependencies": {
-    "@atproto/api": "^0.12.13",
+    "@atproto/api": "^0.12.20",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
@@ -58,12 +58,13 @@
     "@expo/webpack-config": "^19.0.0",
     "@floating-ui/dom": "^1.6.3",
     "@floating-ui/react-dom": "^2.0.8",
-    "@formatjs/intl-locale": "^3.4.3",
-    "@formatjs/intl-pluralrules": "^5.2.10",
+    "@formatjs/intl-locale": "^4.0.0",
+    "@formatjs/intl-numberformat": "^8.10.3",
+    "@formatjs/intl-pluralrules": "^5.2.14",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
-    "@fortawesome/react-native-fontawesome": "^0.3.0",
+    "@fortawesome/react-native-fontawesome": "^0.3.2",
     "@lingui/react": "^4.5.0",
     "@mattermost/react-native-paste-input": "^0.7.1",
     "@miblanchard/react-native-slider": "^2.3.1",
@@ -116,7 +117,6 @@
     "expo-build-properties": "^0.12.1",
     "expo-camera": "~15.0.9",
     "expo-clipboard": "^6.0.3",
-    "expo-constants": "~16.0.1",
     "expo-dev-client": "^4.0.14",
     "expo-device": "~6.0.2",
     "expo-file-system": "^17.0.1",
@@ -129,7 +129,7 @@
     "expo-localization": "~15.0.3",
     "expo-media-library": "~16.0.3",
     "expo-navigation-bar": "~3.0.4",
-    "expo-notifications": "~0.28.3",
+    "expo-notifications": "~0.28.7",
     "expo-sharing": "^12.0.1",
     "expo-splash-screen": "~0.27.4",
     "expo-status-bar": "~1.12.1",
@@ -272,6 +272,9 @@
   "resolutions": {
     "@types/react": "^18",
     "**/zeed-dom": "0.10.9",
+    "**/zod": "3.23.8",
+    "**/expo-constants": "16.0.1",
+    "**/expo-device": "6.0.2",
     "@react-native/babel-preset": "0.74.1"
   },
   "jest": {

patches/expo-haptics+13.0.1.patch

@@ -1,9 +1,9 @@
 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
+index 1520465..6ea988a 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))

patches/expo-modules-core+1.12.11.md

@@ -0,0 +1,5 @@
+## expo-modules-core Patch
+
+This patch fixes crashes seen in some Android clients when using intents to open the app. See https://github.com/expo/expo/pull/29513.
+
+Do not remove this patch until that PR lands in Expo and is released.

patches/expo-modules-core+1.12.11.patch

@@ -0,0 +1,14 @@
+diff --git a/node_modules/expo-modules-core/android/src/main/java/expo/modules/adapters/react/NativeModulesProxy.java b/node_modules/expo-modules-core/android/src/main/java/expo/modules/adapters/react/NativeModulesProxy.java
+index bb74e80..0aa0202 100644
+--- a/node_modules/expo-modules-core/android/src/main/java/expo/modules/adapters/react/NativeModulesProxy.java
++++ b/node_modules/expo-modules-core/android/src/main/java/expo/modules/adapters/react/NativeModulesProxy.java
+@@ -90,8 +90,8 @@ public class NativeModulesProxy extends ReactContextBaseJavaModule {
+     mModuleRegistry.ensureIsInitialized();
+
+     KotlinInteropModuleRegistry kotlinModuleRegistry = getKotlinInteropModuleRegistry();
+-    kotlinModuleRegistry.emitOnCreate();
+     kotlinModuleRegistry.installJSIInterop();
++    kotlinModuleRegistry.emitOnCreate();
+
+     Map<String, Object> constants = new HashMap<>(3);
+     constants.put(MODULES_CONSTANTS_KEY, new HashMap<>());

patches/expo-notifications+0.28.7.patch

@@ -1,29 +1,54 @@
 diff --git a/node_modules/expo-notifications/android/build.gradle b/node_modules/expo-notifications/android/build.gradle
-index d233e1f..cc2f856 100644
+index b863077..8b5209e 100644
 --- a/node_modules/expo-notifications/android/build.gradle
 +++ b/node_modules/expo-notifications/android/build.gradle
 @@ -32,6 +32,7 @@ dependencies {
    api 'com.google.firebase:firebase-messaging:22.0.0'
-
+ 
    api 'me.leolin:ShortcutBadger:1.1.22@aar'
 +  implementation project(':expo-background-notification-handler')
-
+ 
    if (project.findProject(':expo-modules-test-core')) {
      testImplementation project(':expo-modules-test-core')
+diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/badge/BadgeHelper.kt b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/badge/BadgeHelper.kt
+index 63a46c5..f911834 100644
+--- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/badge/BadgeHelper.kt
++++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/badge/BadgeHelper.kt
+@@ -1,5 +1,6 @@
+ package expo.modules.notifications.badge
+ 
++import android.app.NotificationManager
+ import android.content.Context
+ import android.util.Log
+ import me.leolin.shortcutbadger.ShortcutBadgeException
+@@ -12,7 +13,12 @@ object BadgeHelper {
+ 
+   fun setBadgeCount(context: Context, badgeCount: Int): Boolean {
+     return try {
+-      ShortcutBadger.applyCountOrThrow(context.applicationContext, badgeCount)
++      if (badgeCount == 0) {
++        val notificationManager = context.getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
++        notificationManager.cancelAll()
++      } else {
++        ShortcutBadger.applyCountOrThrow(context.applicationContext, badgeCount)
++      }
+       BadgeHelper.badgeCount = badgeCount
+       true
+     } catch (e: ShortcutBadgeException) {
 diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/JSONNotificationContentBuilder.java b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/JSONNotificationContentBuilder.java
 index 0af7fe0..8f2c8d8 100644
 --- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/JSONNotificationContentBuilder.java
 +++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/JSONNotificationContentBuilder.java
 @@ -14,6 +14,7 @@ import expo.modules.notifications.notifications.enums.NotificationPriority;
  import expo.modules.notifications.notifications.model.NotificationContent;
-
+ 
  public class JSONNotificationContentBuilder extends NotificationContent.Builder {
 +  private static final String CHANNEL_ID_KEY = "channelId";
    private static final String TITLE_KEY = "title";
    private static final String TEXT_KEY = "message";
    private static final String SUBTITLE_KEY = "subtitle";
 @@ -36,6 +37,7 @@ public class JSONNotificationContentBuilder extends NotificationContent.Builder
-
+ 
    public NotificationContent.Builder setPayload(JSONObject payload) {
      this.setTitle(getTitle(payload))
 +      .setChannelId(getChannelId(payload))
@@ -33,7 +58,7 @@ index 0af7fe0..8f2c8d8 100644
 @@ -60,6 +62,14 @@ public class JSONNotificationContentBuilder extends NotificationContent.Builder
      return this;
    }
-
+ 
 +  protected String getChannelId(JSONObject payload) {
 +    try {
 +      return payload.getString(CHANNEL_ID_KEY);
@@ -46,7 +71,7 @@ index 0af7fe0..8f2c8d8 100644
      try {
        return payload.getString(TITLE_KEY);
 diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationContent.java b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationContent.java
-index f1fed19..80afe9e 100644
+index f1fed19..012757b 100644
 --- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationContent.java
 +++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/model/NotificationContent.java
 @@ -20,6 +20,7 @@ import expo.modules.notifications.notifications.enums.NotificationPriority;
@@ -60,10 +85,10 @@ index f1fed19..80afe9e 100644
 @@ -50,6 +51,11 @@ public class NotificationContent implements Parcelable, Serializable {
      }
    };
-
+ 
 +  @Nullable
 +  public String getChannelId() {
-+    return mTitle;
++    return mChannelId;
 +  }
 +
    @Nullable
@@ -71,14 +96,14 @@ index f1fed19..80afe9e 100644
      return mTitle;
 @@ -121,6 +127,7 @@ public class NotificationContent implements Parcelable, Serializable {
    }
-
+ 
    protected NotificationContent(Parcel in) {
 +    mChannelId = in.readString();
      mTitle = in.readString();
      mText = in.readString();
      mSubtitle = in.readString();
 @@ -146,6 +153,7 @@ public class NotificationContent implements Parcelable, Serializable {
-
+ 
    @Override
    public void writeToParcel(Parcel dest, int flags) {
 +    dest.writeString(mChannelId);
@@ -87,7 +112,7 @@ index f1fed19..80afe9e 100644
      dest.writeString(mSubtitle);
 @@ -166,6 +174,7 @@ public class NotificationContent implements Parcelable, Serializable {
    private static final long serialVersionUID = 397666843266836802L;
-
+ 
    private void writeObject(java.io.ObjectOutputStream out) throws IOException {
 +    out.writeObject(mChannelId);
      out.writeObject(mTitle);
@@ -95,7 +120,7 @@ index f1fed19..80afe9e 100644
      out.writeObject(mSubtitle);
 @@ -190,6 +199,7 @@ public class NotificationContent implements Parcelable, Serializable {
    }
-
+ 
    private void readObject(java.io.ObjectInputStream in) throws IOException, ClassNotFoundException {
 +    mChannelId = (String) in.readObject();
      mTitle = (String) in.readObject();
@@ -103,7 +128,7 @@ index f1fed19..80afe9e 100644
      mSubtitle = (String) in.readObject();
 @@ -240,6 +250,7 @@ public class NotificationContent implements Parcelable, Serializable {
    }
-
+ 
    public static class Builder {
 +    private String mChannelId;
      private String mTitle;
@@ -112,7 +137,7 @@ index f1fed19..80afe9e 100644
 @@ -260,6 +271,11 @@ public class NotificationContent implements Parcelable, Serializable {
        useDefaultVibrationPattern();
      }
-
+ 
 +    public Builder setChannelId(String channelId) {
 +      mChannelId = channelId;
 +      return this;
@@ -122,7 +147,7 @@ index f1fed19..80afe9e 100644
        mTitle = title;
        return this;
 @@ -336,6 +352,7 @@ public class NotificationContent implements Parcelable, Serializable {
-
+ 
      public NotificationContent build() {
        NotificationContent content = new NotificationContent();
 +      content.mChannelId = mChannelId;
@@ -134,16 +159,16 @@ index 6bd9928..ee93d70 100644
 --- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/presentation/builders/ExpoNotificationBuilder.java
 +++ b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/notifications/presentation/builders/ExpoNotificationBuilder.java
 @@ -48,6 +48,10 @@ public class ExpoNotificationBuilder extends ChannelAwareNotificationBuilder {
-
+ 
      NotificationContent content = getNotificationContent();
-
+ 
 +    if (content.getChannelId() != null) {
 +      builder.setChannelId(content.getChannelId());
 +    }
 +
      builder.setAutoCancel(content.isAutoDismiss());
      builder.setOngoing(content.isSticky());
-
+ 
 diff --git a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/service/delegates/FirebaseMessagingDelegate.kt b/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/service/delegates/FirebaseMessagingDelegate.kt
 index 55b3a8d..1b99d5b 100644
 --- a/node_modules/expo-notifications/android/src/main/java/expo/modules/notifications/service/delegates/FirebaseMessagingDelegate.kt
@@ -158,7 +183,7 @@ index 55b3a8d..1b99d5b 100644
  import org.json.JSONObject
  import java.lang.ref.WeakReference
  import java.util.*
-
+ 
 -open class FirebaseMessagingDelegate(protected val context: Context) : FirebaseMessagingDelegate {
 +open class FirebaseMessagingDelegate(protected val context: Context) : FirebaseMessagingDelegate, BackgroundNotificationHandlerInterface {
    companion object {
@@ -166,7 +191,7 @@ index 55b3a8d..1b99d5b 100644
      // than by static properties. Fortunately, using weak references we can
 @@ -89,12 +92,21 @@ open class FirebaseMessagingDelegate(protected val context: Context) : FirebaseM
    fun getBackgroundTasks() = sBackgroundTaskConsumerReferences.values.mapNotNull { it.get() }
-
+ 
    override fun onMessageReceived(remoteMessage: RemoteMessage) {
 -    NotificationsService.receive(context, createNotification(remoteMessage))
 -    getBackgroundTasks().forEach {
@@ -181,7 +206,7 @@ index 55b3a8d..1b99d5b 100644
 +      }
      }
    }
-
+ 
 +  override fun showMessage(remoteMessage: RemoteMessage) {
 +    NotificationsService.receive(context, createNotification(remoteMessage))
 +  }

patches/expo-notifications-0.28.7.patch.md

@@ -7,3 +7,8 @@ in `onMessageReceived` are sent to the module for handling.
 
 It also allows us to set the Android notification channel ID from the notification `data`, rather
 than the `notification` object in the payload.
+
+### `setBadgeCountAsync` fix on Android
+
+`ShortcutBadger`'s `setCount` doesn't work for clearing the badge on Android for some reason. Instead, let's use the
+Android API for clearing the badge.

patches/expo-updates+0.25.14.patch

@@ -1,11 +1,11 @@
 diff --git a/node_modules/expo-updates/ios/EXUpdates/Update/ExpoUpdatesUpdate.swift b/node_modules/expo-updates/ios/EXUpdates/Update/ExpoUpdatesUpdate.swift
-index b85291e..07a5d3c 100644
+index b85291e..546709d 100644
 --- a/node_modules/expo-updates/ios/EXUpdates/Update/ExpoUpdatesUpdate.swift
 +++ b/node_modules/expo-updates/ios/EXUpdates/Update/ExpoUpdatesUpdate.swift
 @@ -78,13 +78,20 @@ public final class ExpoUpdatesUpdate: Update {
        status = UpdateStatus.StatusPending
      }
-     
+ 
 +    // 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()

patches/react-native+0.74.1.patch

@@ -1,3 +1,29 @@
+diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm
+index b0d71dc..9974932 100644
+--- a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm
++++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputView.mm
+@@ -377,10 +377,6 @@ - (void)textInputDidBeginEditing
+     self.backedTextInputView.attributedText = [NSAttributedString new];
+   }
+
+-  if (_selectTextOnFocus) {
+-    [self.backedTextInputView selectAll:nil];
+-  }
+-
+   [_eventDispatcher sendTextEventWithType:RCTTextEventTypeFocus
+                                  reactTag:self.reactTag
+                                      text:[self.backedTextInputView.attributedText.string copy]
+@@ -611,6 +607,10 @@ - (UIView *)reactAccessibilityElement
+ - (void)reactFocus
+ {
+   [self.backedTextInputView reactFocus];
++
++  if (_selectTextOnFocus) {
++    [self.backedTextInputView selectAll:nil];
++  }
+ }
+
+ - (void)reactBlur
 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
@@ -5,7 +31,7 @@ index e9b330f..1ecdf0a 100644
 @@ -16,4 +16,6 @@
  @property (nonatomic, copy) RCTDirectEventBlock onRefresh;
  @property (nonatomic, weak) UIScrollView *scrollView;
- 
+
 +- (void)forwarderBeginRefreshing;
 +
  @end
@@ -16,7 +42,7 @@ index b09e653..4c32b31 100644
 @@ -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];
@@ -29,7 +55,7 @@ index b09e653..4c32b31 100644
      _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
@@ -38,15 +64,15 @@ index b09e653..4c32b31 100644
 +- (void)forwarderBeginRefreshing
 +{
 +  _refreshingProgrammatically = NO;
-+  
++
 +  [self sizeToFit];
-+  
++
 +  if (!self.scrollView) {
 +    return;
 +  }
-+  
++
 +  UIScrollView *scrollView = (UIScrollView *)self.scrollView;
-+  
++
 +  [UIView animateWithDuration:0.3
 +    delay:0
 +    options:UIViewAnimationOptionBeginFromCurrentState
@@ -58,7 +84,7 @@ index b09e653..4c32b31 100644
 +    completion:^(__unused BOOL finished) {
 +      [super beginRefreshing];
 +      [self setCurrentRefreshingState:super.refreshing];
-+    
++
 +      if (self->_onRefresh) {
 +        self->_onRefresh(nil);
 +      }
@@ -67,3 +93,19 @@ index b09e653..4c32b31 100644
 +}
 +
  @end
+diff --git a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java
+index 5f5e1ab..aac00b6 100644
+--- a/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java
++++ b/node_modules/react-native/ReactAndroid/src/main/java/com/facebook/react/modules/core/JavaTimerManager.java
+@@ -99,8 +99,9 @@ public class JavaTimerManager {
+       }
+
+       // If the JS thread is busy for multiple frames we cancel any other pending runnable.
+-      if (mCurrentIdleCallbackRunnable != null) {
+-        mCurrentIdleCallbackRunnable.cancel();
++      IdleCallbackRunnable currentRunnable = mCurrentIdleCallbackRunnable;
++      if (currentRunnable != null) {
++        currentRunnable.cancel();
+       }
+
+       mCurrentIdleCallbackRunnable = new IdleCallbackRunnable(frameTimeNanos);

patches/react-native+0.74.1.patch.md

@@ -11,3 +11,10 @@ in the RN repo: https://github.com/facebook/react-native/issues/43388
 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.
+
+
+## TextInput Patch - `selectTextOnFocus` fix
+
+Patching `RCTBaseTextInputView.m` to fix an issue where `selectTextOnFocus` does not work as expected on iOS 17. This
+patch _only_ fixes the Paper version of `TextInput`. If we migrate to Fabric and the fix has not been made upstream,
+we can apply the same fix. See https://github.com/facebook/react-native/pull/44307.

plugins/withAndroidManifestLaunchModePlugin.js

@@ -1,17 +0,0 @@
-const {withAndroidManifest} = require('expo/config-plugins')
-
-module.exports = function withAndroidManifestLaunchModePlugin(appConfig) {
-  return withAndroidManifest(appConfig, function (decoratedAppConfig) {
-    try {
-      const mainApplication =
-        decoratedAppConfig.modResults.manifest.application[0]
-      const mainActivity = mainApplication.activity.find(
-        elem => elem.$['android:name'] === '.MainActivity',
-      )
-      mainActivity.$['android:launchMode'] = 'singleTop'
-    } catch (e) {
-      console.error(`withAndroidManifestLaunchModePlugin failed`, e)
-    }
-    return decoratedAppConfig
-  })
-}

scripts/setGitHubOutput.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+outputIos=$(eas build:version:get -p ios)
+outputAndroid=$(eas build:version:get -p android)
+BSKY_IOS_BUILD_NUMBER=${outputIos#*buildNumber - }
+BSKY_ANDROID_VERSION_CODE=${outputAndroid#*versionCode - }
+
+echo PACKAGE_VERSION="$(jq -r '.version' package.json)" > "$GITHUB_OUTPUT"
+echo BSKY_IOS_BUILD_NUMBER=$BSKY_IOS_BUILD_NUMBER >> "$GITHUB_OUTPUT"
+echo BSKY_ANDROID_VERSION_CODE=$BSKY_ANDROID_VERSION_CODE >> "$GITHUB_OUTPUT"

src/App.native.tsx

@@ -14,36 +14,40 @@ import * as SplashScreen from 'expo-splash-screen'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
+import {useIntentHandler} from '#/lib/hooks/useIntentHandler'
+import {QueryProvider} from '#/lib/react-query'
+import {
+  initialize,
+  Provider as StatsigProvider,
+  tryFetchGates,
+} from '#/lib/statsig/statsig'
+import {s} from '#/lib/styles'
+import {ThemeProvider} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
+import {Provider as MutedThreadsProvider} from '#/state/cache/thread-mutes'
+import {Provider as DialogStateProvider} from '#/state/dialogs'
+import {Provider as InvitesStateProvider} from '#/state/invites'
+import {Provider as LightboxStateProvider} from '#/state/lightbox'
 import {MessagesProvider} from '#/state/messages'
+import {Provider as ModalStateProvider} from '#/state/modals'
 import {init as initPersistedState} from '#/state/persisted'
+import {Provider as PrefsStateProvider} from '#/state/preferences'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation-opts'
-import {readLastActiveAccount} from '#/state/session/util'
-import {useIntentHandler} from 'lib/hooks/useIntentHandler'
-import {QueryProvider} from 'lib/react-query'
-import {s} from 'lib/styles'
-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 UnreadNotifsProvider} from '#/state/queries/notifications/unread'
 import {
   Provider as SessionProvider,
   SessionAccount,
   useSession,
   useSessionApi,
-} from 'state/session'
-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 {TestCtrls} from 'view/com/testing/TestCtrls'
-import * as Toast from 'view/com/util/Toast'
-import {Shell} from 'view/shell'
+} from '#/state/session'
+import {readLastActiveAccount} from '#/state/session/util'
+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 {TestCtrls} from '#/view/com/testing/TestCtrls'
+import * as Toast from '#/view/com/util/Toast'
+import {Shell} from '#/view/shell'
 import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {Provider as PortalProvider} from '#/components/Portal'
@@ -69,6 +73,9 @@ function InnerApp() {
       try {
         if (account) {
           await resumeSession(account)
+        } else {
+          await initialize()
+          await tryFetchGates(undefined, 'prefer-fresh-gates')
         }
       } catch (e) {
         logger.error(`session: resume failed`, {message: e})
@@ -105,10 +112,12 @@ function InnerApp() {
                             <SelectedFeedProvider>
                               <UnreadNotifsProvider>
                                 <BackgroundNotificationPreferencesProvider>
-                                  <GestureHandlerRootView style={s.h100pct}>
-                                    <TestCtrls />
-                                    <Shell />
-                                  </GestureHandlerRootView>
+                                  <MutedThreadsProvider>
+                                    <GestureHandlerRootView style={s.h100pct}>
+                                      <TestCtrls />
+                                      <Shell />
+                                    </GestureHandlerRootView>
+                                  </MutedThreadsProvider>
                                 </BackgroundNotificationPreferencesProvider>
                               </UnreadNotifsProvider>
                             </SelectedFeedProvider>
@@ -143,25 +152,23 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <KeyboardProvider enabled={true} statusBarTranslucent={true}>
+    <KeyboardProvider enabled={false} statusBarTranslucent={true}>
       <SessionProvider>
         <ShellStateProvider>
           <PrefsStateProvider>
-            <MutedThreadsProvider>
-              <InvitesStateProvider>
-                <ModalStateProvider>
-                  <DialogStateProvider>
-                    <LightboxStateProvider>
-                      <I18nProvider>
-                        <PortalProvider>
-                          <InnerApp />
-                        </PortalProvider>
-                      </I18nProvider>
-                    </LightboxStateProvider>
-                  </DialogStateProvider>
-                </ModalStateProvider>
-              </InvitesStateProvider>
-            </MutedThreadsProvider>
+            <InvitesStateProvider>
+              <ModalStateProvider>
+                <DialogStateProvider>
+                  <LightboxStateProvider>
+                    <I18nProvider>
+                      <PortalProvider>
+                        <InnerApp />
+                      </PortalProvider>
+                    </I18nProvider>
+                  </LightboxStateProvider>
+                </DialogStateProvider>
+              </ModalStateProvider>
+            </InvitesStateProvider>
           </PrefsStateProvider>
         </ShellStateProvider>
       </SessionProvider>

src/App.web.tsx

@@ -8,35 +8,35 @@ import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useIntentHandler} from '#/lib/hooks/useIntentHandler'
+import {QueryProvider} from '#/lib/react-query'
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
+import {ThemeProvider} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
+import {Provider as MutedThreadsProvider} from '#/state/cache/thread-mutes'
+import {Provider as DialogStateProvider} from '#/state/dialogs'
+import {Provider as InvitesStateProvider} from '#/state/invites'
+import {Provider as LightboxStateProvider} from '#/state/lightbox'
 import {MessagesProvider} from '#/state/messages'
+import {Provider as ModalStateProvider} from '#/state/modals'
 import {init as initPersistedState} from '#/state/persisted'
+import {Provider as PrefsStateProvider} from '#/state/preferences'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation-opts'
-import {readLastActiveAccount} from '#/state/session/util'
-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 UnreadNotifsProvider} from '#/state/queries/notifications/unread'
 import {
   Provider as SessionProvider,
   SessionAccount,
   useSession,
   useSessionApi,
-} from 'state/session'
-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 * as Toast from 'view/com/util/Toast'
-import {ToastContainer} from 'view/com/util/Toast.web'
-import {Shell} from 'view/shell/index'
+} from '#/state/session'
+import {readLastActiveAccount} from '#/state/session/util'
+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 * as Toast from '#/view/com/util/Toast'
+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'
@@ -96,9 +96,11 @@ function InnerApp() {
                           <SelectedFeedProvider>
                             <UnreadNotifsProvider>
                               <BackgroundNotificationPreferencesProvider>
-                                <SafeAreaProvider>
-                                  <Shell />
-                                </SafeAreaProvider>
+                                <MutedThreadsProvider>
+                                  <SafeAreaProvider>
+                                    <Shell />
+                                  </SafeAreaProvider>
+                                </MutedThreadsProvider>
                               </BackgroundNotificationPreferencesProvider>
                             </UnreadNotifsProvider>
                           </SelectedFeedProvider>
@@ -136,21 +138,19 @@ function App() {
     <SessionProvider>
       <ShellStateProvider>
         <PrefsStateProvider>
-          <MutedThreadsProvider>
-            <InvitesStateProvider>
-              <ModalStateProvider>
-                <DialogStateProvider>
-                  <LightboxStateProvider>
-                    <I18nProvider>
-                      <PortalProvider>
-                        <InnerApp />
-                      </PortalProvider>
-                    </I18nProvider>
-                  </LightboxStateProvider>
-                </DialogStateProvider>
-              </ModalStateProvider>
-            </InvitesStateProvider>
-          </MutedThreadsProvider>
+          <InvitesStateProvider>
+            <ModalStateProvider>
+              <DialogStateProvider>
+                <LightboxStateProvider>
+                  <I18nProvider>
+                    <PortalProvider>
+                      <InnerApp />
+                    </PortalProvider>
+                  </I18nProvider>
+                </LightboxStateProvider>
+              </DialogStateProvider>
+            </ModalStateProvider>
+          </InvitesStateProvider>
         </PrefsStateProvider>
       </ShellStateProvider>
     </SessionProvider>

src/Navigation.tsx

@@ -22,7 +22,6 @@ import {buildStateObject} from 'lib/routes/helpers'
 import {
   AllNavigatorParams,
   BottomTabNavigatorParams,
-  FeedsTabNavigatorParams,
   FlatNavigatorParams,
   HomeTabNavigatorParams,
   MessagesTabNavigatorParams,
@@ -42,6 +41,7 @@ import {PreferencesThreads} from 'view/screens/PreferencesThreads'
 import {SavedFeeds} from 'view/screens/SavedFeeds'
 import HashtagScreen from '#/screens/Hashtag'
 import {ModerationScreen} from '#/screens/Moderation'
+import {ProfileKnownFollowersScreen} from '#/screens/Profile/KnownFollowers'
 import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
 import {init as initAnalytics} from './lib/analytics/analytics'
 import {useWebScrollRestoration} from './lib/hooks/useWebScrollRestoration'
@@ -54,8 +54,8 @@ import {useModalControls} from './state/modals'
 import {useUnreadNotifications} from './state/queries/notifications/unread'
 import {useSession} from './state/session'
 import {
-  setEmailConfirmationRequested,
   shouldRequestEmailConfirmation,
+  snoozeEmailConfirmationPrompt,
 } from './state/shell/reminders'
 import {AccessibilitySettingsScreen} from './view/screens/AccessibilitySettings'
 import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
@@ -91,7 +91,6 @@ const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
 const HomeTab = createNativeStackNavigatorWithAuth<HomeTabNavigatorParams>()
 const SearchTab = createNativeStackNavigatorWithAuth<SearchTabNavigatorParams>()
-const FeedsTab = createNativeStackNavigatorWithAuth<FeedsTabNavigatorParams>()
 const NotificationsTab =
   createNativeStackNavigatorWithAuth<NotificationsTabNavigatorParams>()
 const MyProfileTab =
@@ -171,6 +170,13 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
           title: title(msg`People followed by @${route.params.name}`),
         })}
       />
+      <Stack.Screen
+        name="ProfileKnownFollowers"
+        getComponent={() => ProfileKnownFollowersScreen}
+        options={({route}) => ({
+          title: title(msg`Followers of @${route.params.name} that you know`),
+        })}
+      />
       <Stack.Screen
         name="ProfileList"
         getComponent={() => ProfileListScreen}
@@ -306,6 +312,7 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => MessagesSettingsScreen}
         options={{title: title(msg`Chat settings`), requireAuth: true}}
       />
+      <Stack.Screen name="Feeds" getComponent={() => FeedsScreen} />
     </>
   )
 }
@@ -330,7 +337,6 @@ function TabsNavigator() {
       tabBar={tabBar}>
       <Tab.Screen name="HomeTab" getComponent={() => HomeTabNavigator} />
       <Tab.Screen name="SearchTab" getComponent={() => SearchTabNavigator} />
-      <Tab.Screen name="FeedsTab" getComponent={() => FeedsTabNavigator} />
       <Tab.Screen
         name="NotificationsTab"
         getComponent={() => NotificationsTabNavigator}
@@ -384,24 +390,6 @@ function SearchTabNavigator() {
   )
 }
 
-function FeedsTabNavigator() {
-  const pal = usePalette('default')
-  return (
-    <FeedsTab.Navigator
-      screenOptions={{
-        animation: isAndroid ? 'ios' : undefined,
-        animationDuration: 285,
-        gestureEnabled: true,
-        fullScreenGestureEnabled: true,
-        headerShown: false,
-        contentStyle: pal.view,
-      }}>
-      <FeedsTab.Screen name="Feeds" getComponent={() => FeedsScreen} />
-      {commonScreens(FeedsTab as typeof HomeTab)}
-    </FeedsTab.Navigator>
-  )
-}
-
 function NotificationsTabNavigator() {
   const pal = usePalette('default')
   return (
@@ -505,11 +493,6 @@ const FlatNavigator = () => {
         getComponent={() => SearchScreen}
         options={{title: title(msg`Search`)}}
       />
-      <Flat.Screen
-        name="Feeds"
-        getComponent={() => FeedsScreen}
-        options={{title: title(msg`Feeds`)}}
-      />
       <Flat.Screen
         name="Notifications"
         getComponent={() => NotificationsScreen}
@@ -602,7 +585,7 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {
 
     if (currentAccount && shouldRequestEmailConfirmation(currentAccount)) {
       openModal({name: 'verify-email', showReminder: true})
-      setEmailConfirmationRequested()
+      snoozeEmailConfirmationPrompt()
     }
   }
 

src/alf/atoms.ts

@@ -1,7 +1,8 @@
-import {Platform} from 'react-native'
+import {Platform, StyleSheet} from 'react-native'
 
 import * as tokens from '#/alf/tokens'
 import {native, web} from '#/alf/util/platform'
+import hairlineWidth = StyleSheet.hairlineWidth
 
 export const atoms = {
   /*
@@ -55,6 +56,13 @@ export const atoms = {
     height: '100vh',
   }),
 
+  /*
+   * Theme-independent bg colors
+   */
+  bg_transparent: {
+    backgroundColor: 'transparent',
+  },
+
   /*
    * Border radius
    */
@@ -259,6 +267,9 @@ export const atoms = {
   font_bold: {
     fontWeight: tokens.fontWeight.bold,
   },
+  font_heavy: {
+    fontWeight: tokens.fontWeight.heavy,
+  },
   italic: {
     fontStyle: 'italic',
   },
@@ -270,19 +281,19 @@ export const atoms = {
     borderWidth: 0,
   },
   border: {
-    borderWidth: 1,
+    borderWidth: hairlineWidth,
   },
   border_t: {
-    borderTopWidth: 1,
+    borderTopWidth: hairlineWidth,
   },
   border_b: {
-    borderBottomWidth: 1,
+    borderBottomWidth: hairlineWidth,
   },
   border_l: {
-    borderLeftWidth: 1,
+    borderLeftWidth: hairlineWidth,
   },
   border_r: {
-    borderRightWidth: 1,
+    borderRightWidth: hairlineWidth,
   },
 
   /*
@@ -841,7 +852,7 @@ export const atoms = {
     marginRight: 'auto',
   },
   /*
-   * Pointer events
+   * Pointer events & user select
    */
   pointer_events_none: {
     pointerEvents: 'none',
@@ -849,6 +860,15 @@ export const atoms = {
   pointer_events_auto: {
     pointerEvents: 'auto',
   },
+  user_select_none: {
+    userSelect: 'none',
+  },
+  user_select_text: {
+    userSelect: 'text',
+  },
+  user_select_all: {
+    userSelect: 'all',
+  },
   /*
    * Text decoration
    */

src/alf/index.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import {Dimensions} from 'react-native'
+
 import * as themes from '#/alf/themes'
 
-export * from '#/alf/types'
-export * as tokens from '#/alf/tokens'
 export {atoms} from '#/alf/atoms'
-export * from '#/alf/util/platform'
+export * as tokens from '#/alf/tokens'
+export * from '#/alf/types'
 export * from '#/alf/util/flatten'
+export * from '#/alf/util/platform'
+export * from '#/alf/util/themeSelector'
 
 type BreakpointName = keyof typeof breakpoints
 

src/alf/themes.ts

@@ -1,11 +1,11 @@
+import {atoms} from '#/alf/atoms'
 import * as tokens from '#/alf/tokens'
 import type {Mutable} from '#/alf/types'
-import {atoms} from '#/alf/atoms'
 import {BLUE_HUE, GREEN_HUE, RED_HUE} from '#/alf/util/colorGeneration'
 
 export type ThemeName = 'light' | 'dim' | 'dark'
 export type ReadonlyTheme = typeof light
-export type Theme = Mutable<ReadonlyTheme>
+export type Theme = Mutable<ReadonlyTheme> & {name: ThemeName}
 export type ReadonlyPalette = typeof lightPalette
 export type Palette = Mutable<ReadonlyPalette>
 
@@ -193,7 +193,7 @@ export const dimPalette: Palette = {
 } as const
 
 export const light = {
-  name: 'light',
+  name: 'light' as ThemeName,
   palette: lightPalette,
   atoms: {
     text: {
@@ -278,7 +278,7 @@ export const light = {
 }
 
 export const dark: Theme = {
-  name: 'dark',
+  name: 'dark' as ThemeName,
   palette: darkPalette,
   atoms: {
     text: {
@@ -367,7 +367,7 @@ export const dark: Theme = {
 
 export const dim: Theme = {
   ...dark,
-  name: 'dim',
+  name: 'dim' as ThemeName,
   palette: dimPalette,
   atoms: {
     ...dark.atoms,

src/alf/tokens.ts

@@ -118,6 +118,7 @@ export const fontWeight = {
   normal: '400',
   semibold: '500',
   bold: '600',
+  heavy: '700',
 } as const
 
 export const gradients = {

src/alf/util/themeSelector.ts

@@ -0,0 +1,14 @@
+import {ThemeName} from '#/alf/themes'
+
+export function select<T>(name: ThemeName, options: Record<ThemeName, T>) {
+  switch (name) {
+    case 'light':
+      return options.light
+    case 'dark':
+      return options.dark || options.dim
+    case 'dim':
+      return options.dim || options.dark
+    default:
+      throw new Error(`select(theme, options) received unknown theme ${name}`)
+  }
+}

src/alf/util/useColorModeTheme.ts

@@ -1,25 +1,27 @@
 import React from 'react'
 import {ColorSchemeName, useColorScheme} from 'react-native'
-
-import {useThemePrefs} from 'state/shell'
-import {isWeb} from 'platform/detection'
-import {ThemeName, light, dark, dim} from '#/alf/themes'
 import * as SystemUI from 'expo-system-ui'
 
+import {isWeb} from 'platform/detection'
+import {useThemePrefs} from 'state/shell'
+import {dark, dim, light, ThemeName} from '#/alf/themes'
+
 export function useColorModeTheme(): ThemeName {
+  const theme = useThemeName()
+
+  React.useLayoutEffect(() => {
+    updateDocument(theme)
+    SystemUI.setBackgroundColorAsync(getBackgroundColor(theme))
+  }, [theme])
+
+  return theme
+}
+
+export function useThemeName(): ThemeName {
   const colorScheme = useColorScheme()
   const {colorMode, darkTheme} = useThemePrefs()
 
-  React.useLayoutEffect(() => {
-    const theme = getThemeName(colorScheme, colorMode, darkTheme)
-    updateDocument(theme)
-    SystemUI.setBackgroundColorAsync(getBackgroundColor(theme))
-  }, [colorMode, colorScheme, darkTheme])
-
-  return React.useMemo(
-    () => getThemeName(colorScheme, colorMode, darkTheme),
-    [colorScheme, colorMode, darkTheme],
-  )
+  return getThemeName(colorScheme, colorMode, darkTheme)
 }
 
 function getThemeName(
@@ -53,7 +55,7 @@ function updateDocument(theme: ThemeName) {
   }
 }
 
-function getBackgroundColor(theme: ThemeName): string {
+export function getBackgroundColor(theme: ThemeName): string {
   switch (theme) {
     case 'light':
       return light.atoms.bg.backgroundColor

src/components/AccountList.tsx

@@ -37,7 +37,7 @@ export function AccountList({
       style={[
         a.rounded_md,
         a.overflow_hidden,
-        a.border,
+        {borderWidth: 1},
         t.atoms.border_contrast_low,
       ]}>
       {accounts.map(account => (
@@ -48,7 +48,7 @@ export function AccountList({
             isCurrentAccount={account.did === currentAccount?.did}
             isPendingAccount={account.did === pendingDid}
           />
-          <View style={[a.border_b, t.atoms.border_contrast_low]} />
+          <View style={[{borderBottomWidth: 1}, t.atoms.border_contrast_low]} />
         </React.Fragment>
       ))}
       <Button

src/components/Button.tsx

@@ -28,7 +28,7 @@ export type ButtonColor =
   | 'gradient_sunset'
   | 'gradient_nordic'
   | 'gradient_bonfire'
-export type ButtonSize = 'tiny' | 'small' | 'medium' | 'large'
+export type ButtonSize = 'tiny' | 'xsmall' | 'small' | 'medium' | 'large'
 export type ButtonShape = 'round' | 'square' | 'default'
 export type VariantProps = {
   /**
@@ -64,13 +64,14 @@ type NonTextElements =
 
 export type ButtonProps = Pick<
   PressableProps,
-  'disabled' | 'onPress' | 'testID' | 'onLongPress'
+  'disabled' | 'onPress' | 'testID' | 'onLongPress' | 'hitSlop'
 > &
   AccessibilityProps &
   VariantProps & {
     testID?: string
     label: string
     style?: StyleProp<ViewStyle>
+    hoverStyle?: StyleProp<ViewStyle>
     children: NonTextElements | ((context: ButtonContext) => NonTextElements)
   }
 
@@ -87,329 +88,355 @@ export function useButtonContext() {
   return React.useContext(Context)
 }
 
-export function Button({
-  children,
-  variant,
-  color,
-  size,
-  shape = 'default',
-  label,
-  disabled = false,
-  style,
-  ...rest
-}: ButtonProps) {
-  const t = useTheme()
-  const [state, setState] = React.useState({
-    pressed: false,
-    hovered: false,
-    focused: false,
-  })
-
-  const onPressIn = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      pressed: true,
-    }))
-  }, [setState])
-  const onPressOut = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      pressed: false,
-    }))
-  }, [setState])
-  const onHoverIn = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      hovered: true,
-    }))
-  }, [setState])
-  const onHoverOut = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      hovered: false,
-    }))
-  }, [setState])
-  const onFocus = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      focused: true,
-    }))
-  }, [setState])
-  const onBlur = React.useCallback(() => {
-    setState(s => ({
-      ...s,
-      focused: false,
-    }))
-  }, [setState])
-
-  const {baseStyles, hoverStyles} = React.useMemo(() => {
-    const baseStyles: ViewStyle[] = []
-    const hoverStyles: ViewStyle[] = []
-    const light = t.name === 'light'
-
-    if (color === 'primary') {
-      if (variant === 'solid') {
-        if (!disabled) {
-          baseStyles.push({
-            backgroundColor: t.palette.primary_500,
-          })
-          hoverStyles.push({
-            backgroundColor: t.palette.primary_600,
-          })
-        } else {
-          baseStyles.push({
-            backgroundColor: t.palette.primary_700,
-          })
-        }
-      } else if (variant === 'outline') {
-        baseStyles.push(a.border, t.atoms.bg, {
-          borderWidth: 1,
-        })
-
-        if (!disabled) {
-          baseStyles.push(a.border, {
-            borderColor: t.palette.primary_500,
-          })
-          hoverStyles.push(a.border, {
-            backgroundColor: light
-              ? t.palette.primary_50
-              : t.palette.primary_950,
-          })
-        } else {
-          baseStyles.push(a.border, {
-            borderColor: light ? t.palette.primary_200 : t.palette.primary_900,
-          })
-        }
-      } else if (variant === 'ghost') {
-        if (!disabled) {
-          baseStyles.push(t.atoms.bg)
-          hoverStyles.push({
-            backgroundColor: light
-              ? t.palette.primary_100
-              : t.palette.primary_900,
-          })
-        }
-      }
-    } else if (color === 'secondary') {
-      if (variant === 'solid') {
-        if (!disabled) {
-          baseStyles.push({
-            backgroundColor: t.palette.contrast_25,
-          })
-          hoverStyles.push({
-            backgroundColor: t.palette.contrast_50,
-          })
-        } else {
-          baseStyles.push({
-            backgroundColor: t.palette.contrast_100,
-          })
-        }
-      } else if (variant === 'outline') {
-        baseStyles.push(a.border, t.atoms.bg, {
-          borderWidth: 1,
-        })
-
-        if (!disabled) {
-          baseStyles.push(a.border, {
-            borderColor: t.palette.contrast_300,
-          })
-          hoverStyles.push(t.atoms.bg_contrast_50)
-        } else {
-          baseStyles.push(a.border, {
-            borderColor: t.palette.contrast_200,
-          })
-        }
-      } else if (variant === 'ghost') {
-        if (!disabled) {
-          baseStyles.push(t.atoms.bg)
-          hoverStyles.push({
-            backgroundColor: t.palette.contrast_100,
-          })
-        }
-      }
-    } else if (color === 'negative') {
-      if (variant === 'solid') {
-        if (!disabled) {
-          baseStyles.push({
-            backgroundColor: t.palette.negative_500,
-          })
-          hoverStyles.push({
-            backgroundColor: t.palette.negative_600,
-          })
-        } else {
-          baseStyles.push({
-            backgroundColor: t.palette.negative_700,
-          })
-        }
-      } else if (variant === 'outline') {
-        baseStyles.push(a.border, t.atoms.bg, {
-          borderWidth: 1,
-        })
-
-        if (!disabled) {
-          baseStyles.push(a.border, {
-            borderColor: t.palette.negative_500,
-          })
-          hoverStyles.push(a.border, {
-            backgroundColor: light
-              ? t.palette.negative_50
-              : t.palette.negative_975,
-          })
-        } else {
-          baseStyles.push(a.border, {
-            borderColor: light
-              ? t.palette.negative_200
-              : t.palette.negative_900,
-          })
-        }
-      } else if (variant === 'ghost') {
-        if (!disabled) {
-          baseStyles.push(t.atoms.bg)
-          hoverStyles.push({
-            backgroundColor: light
-              ? t.palette.negative_100
-              : t.palette.negative_975,
-          })
-        }
-      }
-    }
-
-    if (shape === 'default') {
-      if (size === 'large') {
-        baseStyles.push({paddingVertical: 15}, a.px_2xl, a.rounded_sm, a.gap_md)
-      } else if (size === 'medium') {
-        baseStyles.push({paddingVertical: 12}, a.px_2xl, a.rounded_sm, a.gap_md)
-      } else if (size === 'small') {
-        baseStyles.push({paddingVertical: 9}, a.px_lg, a.rounded_sm, a.gap_sm)
-      } else if (size === 'tiny') {
-        baseStyles.push({paddingVertical: 4}, a.px_sm, a.rounded_xs, a.gap_xs)
-      }
-    } else if (shape === 'round' || shape === 'square') {
-      if (size === 'large') {
-        if (shape === 'round') {
-          baseStyles.push({height: 54, width: 54})
-        } else {
-          baseStyles.push({height: 50, width: 50})
-        }
-      } else if (size === 'small') {
-        baseStyles.push({height: 34, width: 34})
-      } else if (size === 'tiny') {
-        baseStyles.push({height: 20, width: 20})
-      }
-
-      if (shape === 'round') {
-        baseStyles.push(a.rounded_full)
-      } else if (shape === 'square') {
-        if (size === 'tiny') {
-          baseStyles.push(a.rounded_xs)
-        } else {
-          baseStyles.push(a.rounded_sm)
-        }
-      }
-    }
-
-    return {
-      baseStyles,
-      hoverStyles,
-    }
-  }, [t, variant, color, size, shape, disabled])
-
-  const {gradientColors, gradientHoverColors, gradientLocations} =
-    React.useMemo(() => {
-      const colors: string[] = []
-      const hoverColors: string[] = []
-      const locations: number[] = []
-      const gradient = {
-        primary: tokens.gradients.sky,
-        secondary: tokens.gradients.sky,
-        negative: tokens.gradients.sky,
-        gradient_sky: tokens.gradients.sky,
-        gradient_midnight: tokens.gradients.midnight,
-        gradient_sunrise: tokens.gradients.sunrise,
-        gradient_sunset: tokens.gradients.sunset,
-        gradient_nordic: tokens.gradients.nordic,
-        gradient_bonfire: tokens.gradients.bonfire,
-      }[color || 'primary']
-
-      if (variant === 'gradient') {
-        colors.push(...gradient.values.map(([_, color]) => color))
-        hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
-        locations.push(...gradient.values.map(([location, _]) => location))
-      }
-
-      return {
-        gradientColors: colors,
-        gradientHoverColors: hoverColors,
-        gradientLocations: locations,
-      }
-    }, [variant, color])
-
-  const context = React.useMemo<ButtonContext>(
-    () => ({
-      ...state,
+export const Button = React.forwardRef<View, ButtonProps>(
+  (
+    {
+      children,
       variant,
       color,
       size,
-      disabled: disabled || false,
-    }),
-    [state, variant, color, size, disabled],
-  )
+      shape = 'default',
+      label,
+      disabled = false,
+      style,
+      hoverStyle: hoverStyleProp,
+      ...rest
+    },
+    ref,
+  ) => {
+    const t = useTheme()
+    const [state, setState] = React.useState({
+      pressed: false,
+      hovered: false,
+      focused: false,
+    })
 
-  const flattenedBaseStyles = flatten(baseStyles)
+    const onPressIn = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        pressed: true,
+      }))
+    }, [setState])
+    const onPressOut = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        pressed: false,
+      }))
+    }, [setState])
+    const onHoverIn = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        hovered: true,
+      }))
+    }, [setState])
+    const onHoverOut = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        hovered: false,
+      }))
+    }, [setState])
+    const onFocus = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        focused: true,
+      }))
+    }, [setState])
+    const onBlur = React.useCallback(() => {
+      setState(s => ({
+        ...s,
+        focused: false,
+      }))
+    }, [setState])
 
-  return (
-    <Pressable
-      role="button"
-      accessibilityHint={undefined} // optional
-      {...rest}
-      aria-label={label}
-      aria-pressed={state.pressed}
-      accessibilityLabel={label}
-      disabled={disabled || false}
-      accessibilityState={{
+    const {baseStyles, hoverStyles} = React.useMemo(() => {
+      const baseStyles: ViewStyle[] = []
+      const hoverStyles: ViewStyle[] = []
+      const light = t.name === 'light'
+
+      if (color === 'primary') {
+        if (variant === 'solid') {
+          if (!disabled) {
+            baseStyles.push({
+              backgroundColor: t.palette.primary_500,
+            })
+            hoverStyles.push({
+              backgroundColor: t.palette.primary_600,
+            })
+          } else {
+            baseStyles.push({
+              backgroundColor: t.palette.primary_700,
+            })
+          }
+        } else if (variant === 'outline') {
+          baseStyles.push(a.border, t.atoms.bg, {
+            borderWidth: 1,
+          })
+
+          if (!disabled) {
+            baseStyles.push(a.border, {
+              borderColor: t.palette.primary_500,
+            })
+            hoverStyles.push(a.border, {
+              backgroundColor: light
+                ? t.palette.primary_50
+                : t.palette.primary_950,
+            })
+          } else {
+            baseStyles.push(a.border, {
+              borderColor: light
+                ? t.palette.primary_200
+                : t.palette.primary_900,
+            })
+          }
+        } else if (variant === 'ghost') {
+          if (!disabled) {
+            baseStyles.push(t.atoms.bg)
+            hoverStyles.push({
+              backgroundColor: light
+                ? t.palette.primary_100
+                : t.palette.primary_900,
+            })
+          }
+        }
+      } else if (color === 'secondary') {
+        if (variant === 'solid') {
+          if (!disabled) {
+            baseStyles.push({
+              backgroundColor: t.palette.contrast_25,
+            })
+            hoverStyles.push({
+              backgroundColor: t.palette.contrast_50,
+            })
+          } else {
+            baseStyles.push({
+              backgroundColor: t.palette.contrast_100,
+            })
+          }
+        } else if (variant === 'outline') {
+          baseStyles.push(a.border, t.atoms.bg, {
+            borderWidth: 1,
+          })
+
+          if (!disabled) {
+            baseStyles.push(a.border, {
+              borderColor: t.palette.contrast_300,
+            })
+            hoverStyles.push(t.atoms.bg_contrast_50)
+          } else {
+            baseStyles.push(a.border, {
+              borderColor: t.palette.contrast_200,
+            })
+          }
+        } else if (variant === 'ghost') {
+          if (!disabled) {
+            baseStyles.push(t.atoms.bg)
+            hoverStyles.push({
+              backgroundColor: t.palette.contrast_100,
+            })
+          }
+        }
+      } else if (color === 'negative') {
+        if (variant === 'solid') {
+          if (!disabled) {
+            baseStyles.push({
+              backgroundColor: t.palette.negative_500,
+            })
+            hoverStyles.push({
+              backgroundColor: t.palette.negative_600,
+            })
+          } else {
+            baseStyles.push({
+              backgroundColor: t.palette.negative_700,
+            })
+          }
+        } else if (variant === 'outline') {
+          baseStyles.push(a.border, t.atoms.bg, {
+            borderWidth: 1,
+          })
+
+          if (!disabled) {
+            baseStyles.push(a.border, {
+              borderColor: t.palette.negative_500,
+            })
+            hoverStyles.push(a.border, {
+              backgroundColor: light
+                ? t.palette.negative_50
+                : t.palette.negative_975,
+            })
+          } else {
+            baseStyles.push(a.border, {
+              borderColor: light
+                ? t.palette.negative_200
+                : t.palette.negative_900,
+            })
+          }
+        } else if (variant === 'ghost') {
+          if (!disabled) {
+            baseStyles.push(t.atoms.bg)
+            hoverStyles.push({
+              backgroundColor: light
+                ? t.palette.negative_100
+                : t.palette.negative_975,
+            })
+          }
+        }
+      }
+
+      if (shape === 'default') {
+        if (size === 'large') {
+          baseStyles.push(
+            {paddingVertical: 15},
+            a.px_2xl,
+            a.rounded_sm,
+            a.gap_md,
+          )
+        } else if (size === 'medium') {
+          baseStyles.push(
+            {paddingVertical: 12},
+            a.px_2xl,
+            a.rounded_sm,
+            a.gap_md,
+          )
+        } else if (size === 'small') {
+          baseStyles.push({paddingVertical: 9}, a.px_lg, a.rounded_sm, a.gap_sm)
+        } else if (size === 'xsmall') {
+          baseStyles.push({paddingVertical: 6}, a.px_sm, a.rounded_sm, a.gap_sm)
+        } else if (size === 'tiny') {
+          baseStyles.push({paddingVertical: 4}, a.px_sm, a.rounded_xs, a.gap_xs)
+        }
+      } else if (shape === 'round' || shape === 'square') {
+        if (size === 'large') {
+          if (shape === 'round') {
+            baseStyles.push({height: 54, width: 54})
+          } else {
+            baseStyles.push({height: 50, width: 50})
+          }
+        } else if (size === 'small') {
+          baseStyles.push({height: 34, width: 34})
+        } else if (size === 'xsmall') {
+          baseStyles.push({height: 28, width: 28})
+        } else if (size === 'tiny') {
+          baseStyles.push({height: 20, width: 20})
+        }
+
+        if (shape === 'round') {
+          baseStyles.push(a.rounded_full)
+        } else if (shape === 'square') {
+          if (size === 'tiny') {
+            baseStyles.push(a.rounded_xs)
+          } else {
+            baseStyles.push(a.rounded_sm)
+          }
+        }
+      }
+
+      return {
+        baseStyles,
+        hoverStyles,
+      }
+    }, [t, variant, color, size, shape, disabled])
+
+    const {gradientColors, gradientHoverColors, gradientLocations} =
+      React.useMemo(() => {
+        const colors: string[] = []
+        const hoverColors: string[] = []
+        const locations: number[] = []
+        const gradient = {
+          primary: tokens.gradients.sky,
+          secondary: tokens.gradients.sky,
+          negative: tokens.gradients.sky,
+          gradient_sky: tokens.gradients.sky,
+          gradient_midnight: tokens.gradients.midnight,
+          gradient_sunrise: tokens.gradients.sunrise,
+          gradient_sunset: tokens.gradients.sunset,
+          gradient_nordic: tokens.gradients.nordic,
+          gradient_bonfire: tokens.gradients.bonfire,
+        }[color || 'primary']
+
+        if (variant === 'gradient') {
+          colors.push(...gradient.values.map(([_, color]) => color))
+          hoverColors.push(...gradient.values.map(_ => gradient.hover_value))
+          locations.push(...gradient.values.map(([location, _]) => location))
+        }
+
+        return {
+          gradientColors: colors,
+          gradientHoverColors: hoverColors,
+          gradientLocations: locations,
+        }
+      }, [variant, color])
+
+    const context = React.useMemo<ButtonContext>(
+      () => ({
+        ...state,
+        variant,
+        color,
+        size,
         disabled: disabled || false,
-      }}
-      style={[
-        a.flex_row,
-        a.align_center,
-        a.justify_center,
-        flattenedBaseStyles,
-        ...(state.hovered || state.pressed ? hoverStyles : []),
-        flatten(style),
-      ]}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      onHoverIn={onHoverIn}
-      onHoverOut={onHoverOut}
-      onFocus={onFocus}
-      onBlur={onBlur}>
-      {variant === 'gradient' && (
-        <View
-          style={[
-            a.absolute,
-            a.inset_0,
-            a.overflow_hidden,
-            {borderRadius: flattenedBaseStyles.borderRadius},
-          ]}>
-          <LinearGradient
-            colors={
-              state.hovered || state.pressed
-                ? gradientHoverColors
-                : gradientColors
-            }
-            locations={gradientLocations}
-            start={{x: 0, y: 0}}
-            end={{x: 1, y: 1}}
-            style={[a.absolute, a.inset_0]}
-          />
-        </View>
-      )}
-      <Context.Provider value={context}>
-        {typeof children === 'function' ? children(context) : children}
-      </Context.Provider>
-    </Pressable>
-  )
-}
+      }),
+      [state, variant, color, size, disabled],
+    )
+
+    const flattenedBaseStyles = flatten(baseStyles)
+
+    return (
+      <Pressable
+        role="button"
+        accessibilityHint={undefined} // optional
+        {...rest}
+        ref={ref}
+        aria-label={label}
+        aria-pressed={state.pressed}
+        accessibilityLabel={label}
+        disabled={disabled || false}
+        accessibilityState={{
+          disabled: disabled || false,
+        }}
+        style={[
+          a.flex_row,
+          a.align_center,
+          a.justify_center,
+          flattenedBaseStyles,
+          flatten(style),
+          ...(state.hovered || state.pressed
+            ? [hoverStyles, flatten(hoverStyleProp)]
+            : []),
+        ]}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onHoverIn={onHoverIn}
+        onHoverOut={onHoverOut}
+        onFocus={onFocus}
+        onBlur={onBlur}>
+        {variant === 'gradient' && (
+          <View
+            style={[
+              a.absolute,
+              a.inset_0,
+              a.overflow_hidden,
+              {borderRadius: flattenedBaseStyles.borderRadius},
+            ]}>
+            <LinearGradient
+              colors={
+                state.hovered || state.pressed
+                  ? gradientHoverColors
+                  : gradientColors
+              }
+              locations={gradientLocations}
+              start={{x: 0, y: 0}}
+              end={{x: 1, y: 1}}
+              style={[a.absolute, a.inset_0]}
+            />
+          </View>
+        )}
+        <Context.Provider value={context}>
+          {typeof children === 'function' ? children(context) : children}
+        </Context.Provider>
+      </Pressable>
+    )
+  },
+)
+Button.displayName = 'Button'
 
 export function useSharedButtonTextStyles() {
   const t = useTheme()

src/components/Dialog/index.tsx

@@ -32,6 +32,7 @@ import {
   DialogOuterProps,
 } from '#/components/Dialog/types'
 import {createInput} from '#/components/forms/TextField'
+import {FullWindowOverlay} from '#/components/FullWindowOverlay'
 import {Portal} from '#/components/Portal'
 
 export {useDialogContext, useDialogControl} from '#/components/Dialog/context'
@@ -170,47 +171,49 @@ export function Outer({
   return (
     isOpen && (
       <Portal>
-        <View
-          // iOS
-          accessibilityViewIsModal
-          // Android
-          importantForAccessibility="yes"
-          style={[a.absolute, a.inset_0]}
-          testID={testID}
-          onTouchMove={() => Keyboard.dismiss()}>
-          <BottomSheet
-            enableDynamicSizing={!hasSnapPoints}
-            enablePanDownToClose
-            keyboardBehavior="interactive"
-            android_keyboardInputMode="adjustResize"
-            keyboardBlurBehavior="restore"
-            topInset={insets.top}
-            {...sheetOptions}
-            snapPoints={sheetOptions.snapPoints || ['100%']}
-            ref={sheet}
-            index={openIndex}
-            backgroundStyle={{backgroundColor: 'transparent'}}
-            backdropComponent={Backdrop}
-            handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
-            handleStyle={{display: 'none'}}
-            onClose={onCloseAnimationComplete}>
-            <Context.Provider value={context}>
-              <View
-                style={[
-                  a.absolute,
-                  a.inset_0,
-                  t.atoms.bg,
-                  {
-                    borderTopLeftRadius: 40,
-                    borderTopRightRadius: 40,
-                    height: Dimensions.get('window').height * 2,
-                  },
-                ]}
-              />
-              {children}
-            </Context.Provider>
-          </BottomSheet>
-        </View>
+        <FullWindowOverlay>
+          <View
+            // iOS
+            accessibilityViewIsModal
+            // Android
+            importantForAccessibility="yes"
+            style={[a.absolute, a.inset_0]}
+            testID={testID}
+            onTouchMove={() => Keyboard.dismiss()}>
+            <BottomSheet
+              enableDynamicSizing={!hasSnapPoints}
+              enablePanDownToClose
+              keyboardBehavior="interactive"
+              android_keyboardInputMode="adjustResize"
+              keyboardBlurBehavior="restore"
+              topInset={insets.top}
+              {...sheetOptions}
+              snapPoints={sheetOptions.snapPoints || ['100%']}
+              ref={sheet}
+              index={openIndex}
+              backgroundStyle={{backgroundColor: 'transparent'}}
+              backdropComponent={Backdrop}
+              handleIndicatorStyle={{backgroundColor: t.palette.primary_500}}
+              handleStyle={{display: 'none'}}
+              onClose={onCloseAnimationComplete}>
+              <Context.Provider value={context}>
+                <View
+                  style={[
+                    a.absolute,
+                    a.inset_0,
+                    t.atoms.bg,
+                    {
+                      borderTopLeftRadius: 40,
+                      borderTopRightRadius: 40,
+                      height: Dimensions.get('window').height * 2,
+                    },
+                  ]}
+                />
+                {children}
+              </Context.Provider>
+            </BottomSheet>
+          </View>
+        </FullWindowOverlay>
       </Portal>
     )
   )

src/components/FeedCard.tsx

@@ -0,0 +1,205 @@
+import React from 'react'
+import {GestureResponderEvent, View} from 'react-native'
+import {AppBskyActorDefs, AppBskyFeedDefs, AtUri} from '@atproto/api'
+import {msg, plural, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {logger} from '#/logger'
+import {
+  useAddSavedFeedsMutation,
+  usePreferencesQuery,
+  useRemoveFeedMutation,
+} from '#/state/queries/preferences'
+import {sanitizeHandle} from 'lib/strings/handles'
+import {useSession} from 'state/session'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
+import * as Toast from 'view/com/util/Toast'
+import {useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import {useRichText} from '#/components/hooks/useRichText'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
+import {Link as InternalLink} from '#/components/Link'
+import {Loader} from '#/components/Loader'
+import * as Prompt from '#/components/Prompt'
+import {RichText} from '#/components/RichText'
+import {Text} from '#/components/Typography'
+
+export function Default({feed}: {feed: AppBskyFeedDefs.GeneratorView}) {
+  return (
+    <Link feed={feed}>
+      <Outer>
+        <Header>
+          <Avatar src={feed.avatar} />
+          <TitleAndByline title={feed.displayName} creator={feed.creator} />
+          <Action uri={feed.uri} pin />
+        </Header>
+        <Description description={feed.description} />
+        <Likes count={feed.likeCount || 0} />
+      </Outer>
+    </Link>
+  )
+}
+
+export function Link({
+  children,
+  feed,
+}: {
+  children: React.ReactElement
+  feed: AppBskyFeedDefs.GeneratorView
+}) {
+  const href = React.useMemo(() => {
+    const urip = new AtUri(feed.uri)
+    const handleOrDid = feed.creator.handle || feed.creator.did
+    return `/profile/${handleOrDid}/feed/${urip.rkey}`
+  }, [feed])
+  return <InternalLink to={href}>{children}</InternalLink>
+}
+
+export function Outer({children}: {children: React.ReactNode}) {
+  return <View style={[a.flex_1, a.gap_md]}>{children}</View>
+}
+
+export function Header({children}: {children: React.ReactNode}) {
+  return <View style={[a.flex_row, a.align_center, a.gap_md]}>{children}</View>
+}
+
+export function Avatar({src}: {src: string | undefined}) {
+  return <UserAvatar type="algo" size={40} avatar={src} />
+}
+
+export function TitleAndByline({
+  title,
+  creator,
+}: {
+  title: string
+  creator: AppBskyActorDefs.ProfileViewBasic
+}) {
+  const t = useTheme()
+
+  return (
+    <View style={[a.flex_1]}>
+      <Text
+        style={[a.text_md, a.font_bold, a.flex_1, a.leading_snug]}
+        numberOfLines={1}>
+        {title}
+      </Text>
+      <Text
+        style={[a.flex_1, a.leading_snug, t.atoms.text_contrast_medium]}
+        numberOfLines={1}>
+        <Trans>Feed by {sanitizeHandle(creator.handle, '@')}</Trans>
+      </Text>
+    </View>
+  )
+}
+
+export function Description({description}: {description?: string}) {
+  const [rt, isResolving] = useRichText(description || '')
+  if (!description) return null
+  return isResolving ? (
+    <RichText value={description} style={[a.leading_snug]} />
+  ) : (
+    <RichText value={rt} style={[a.leading_snug]} />
+  )
+}
+
+export function Likes({count}: {count: number}) {
+  const t = useTheme()
+  return (
+    <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
+      {plural(count || 0, {
+        one: 'Liked by # user',
+        other: 'Liked by # users',
+      })}
+    </Text>
+  )
+}
+
+export function Action({uri, pin}: {uri: string; pin?: boolean}) {
+  const {hasSession} = useSession()
+  if (!hasSession) return null
+  return <ActionInner uri={uri} pin={pin} />
+}
+
+function ActionInner({uri, pin}: {uri: string; pin?: boolean}) {
+  const {_} = useLingui()
+  const {data: preferences} = usePreferencesQuery()
+  const {isPending: isAddSavedFeedPending, mutateAsync: saveFeeds} =
+    useAddSavedFeedsMutation()
+  const {isPending: isRemovePending, mutateAsync: removeFeed} =
+    useRemoveFeedMutation()
+  const savedFeedConfig = React.useMemo(() => {
+    return preferences?.savedFeeds?.find(
+      feed => feed.type === 'feed' && feed.value === uri,
+    )
+  }, [preferences?.savedFeeds, uri])
+  const removePromptControl = Prompt.usePromptControl()
+  const isPending = isAddSavedFeedPending || isRemovePending
+
+  const toggleSave = React.useCallback(
+    async (e: GestureResponderEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      try {
+        if (savedFeedConfig) {
+          await removeFeed(savedFeedConfig)
+        } else {
+          await saveFeeds([
+            {
+              type: 'feed',
+              value: uri,
+              pinned: pin || false,
+            },
+          ])
+        }
+        Toast.show(_(msg`Feeds updated!`))
+      } catch (e: any) {
+        logger.error(e, {context: `FeedCard: failed to update feeds`, pin})
+        Toast.show(_(msg`Failed to update feeds`))
+      }
+    },
+    [_, pin, saveFeeds, removeFeed, uri, savedFeedConfig],
+  )
+
+  const onPrompRemoveFeed = React.useCallback(
+    async (e: GestureResponderEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+
+      removePromptControl.open()
+    },
+    [removePromptControl],
+  )
+
+  return (
+    <>
+      <Button
+        disabled={isPending}
+        label={_(msg`Add this feed to your feeds`)}
+        size="small"
+        variant="ghost"
+        color="secondary"
+        shape="square"
+        onPress={savedFeedConfig ? onPrompRemoveFeed : toggleSave}>
+        {savedFeedConfig ? (
+          <ButtonIcon size="md" icon={isPending ? Loader : Trash} />
+        ) : (
+          <ButtonIcon size="md" icon={isPending ? Loader : Plus} />
+        )}
+      </Button>
+
+      <Prompt.Basic
+        control={removePromptControl}
+        title={_(msg`Remove from my feeds?`)}
+        description={_(
+          msg`Are you sure you want to remove this from your feeds?`,
+        )}
+        onConfirm={toggleSave}
+        confirmButtonCta={_(msg`Remove`)}
+        confirmButtonColor="negative"
+      />
+    </>
+  )
+}

src/components/FullWindowOverlay.ios.tsx

@@ -0,0 +1 @@
+export {FullWindowOverlay} from 'react-native-screens'

src/components/FullWindowOverlay.tsx

@@ -0,0 +1 @@
+export {Fragment as FullWindowOverlay} from 'react'

src/components/KeyboardControllerPadding.android.tsx

@@ -5,7 +5,7 @@ import Animated, {
   useSharedValue,
 } from 'react-native-reanimated'
 
-export function KeyboardPadding({maxHeight}: {maxHeight?: number}) {
+export function KeyboardControllerPadding({maxHeight}: {maxHeight?: number}) {
   const keyboardHeight = useSharedValue(0)
 
   useKeyboardHandler(

src/components/KeyboardControllerPadding.tsx

@@ -0,0 +1,7 @@
+export function KeyboardControllerPadding({
+  maxHeight: _,
+}: {
+  maxHeight?: number
+}) {
+  return null
+}

src/components/KeyboardPadding.tsx

@@ -1,3 +0,0 @@
-export function KeyboardPadding({maxHeight: _}: {maxHeight?: number}) {
-  return null
-}

src/components/KnownFollowers.tsx

@@ -0,0 +1,235 @@
+import React from 'react'
+import {View} from 'react-native'
+import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
+import {msg, Plural, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {makeProfileLink} from '#/lib/routes/links'
+import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {atoms as a, useTheme} from '#/alf'
+import {Link, LinkProps} from '#/components/Link'
+import {Text} from '#/components/Typography'
+
+const AVI_SIZE = 30
+const AVI_BORDER = 1
+
+/**
+ * Shared logic to determine if `KnownFollowers` should be shown.
+ *
+ * Checks the # of actual returned users instead of the `count` value, because
+ * `count` includes blocked users and `followers` does not.
+ */
+export function shouldShowKnownFollowers(
+  knownFollowers?: AppBskyActorDefs.KnownFollowers,
+) {
+  return knownFollowers && knownFollowers.followers.length > 0
+}
+
+export function KnownFollowers({
+  profile,
+  moderationOpts,
+  onLinkPress,
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+  moderationOpts: ModerationOpts
+  onLinkPress?: LinkProps['onPress']
+}) {
+  const cache = React.useRef<Map<string, AppBskyActorDefs.KnownFollowers>>(
+    new Map(),
+  )
+
+  /*
+   * Results for `knownFollowers` are not sorted consistently, so when
+   * revalidating we can see a flash of this data updating. This cache prevents
+   * this happening for screens that remain in memory. When pushing a new
+   * screen, or once this one is popped, this cache is empty, so new data is
+   * displayed.
+   */
+  if (profile.viewer?.knownFollowers && !cache.current.has(profile.did)) {
+    cache.current.set(profile.did, profile.viewer.knownFollowers)
+  }
+
+  const cachedKnownFollowers = cache.current.get(profile.did)
+
+  if (cachedKnownFollowers && shouldShowKnownFollowers(cachedKnownFollowers)) {
+    return (
+      <KnownFollowersInner
+        profile={profile}
+        cachedKnownFollowers={cachedKnownFollowers}
+        moderationOpts={moderationOpts}
+        onLinkPress={onLinkPress}
+      />
+    )
+  }
+
+  return null
+}
+
+function KnownFollowersInner({
+  profile,
+  moderationOpts,
+  cachedKnownFollowers,
+  onLinkPress,
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+  moderationOpts: ModerationOpts
+  cachedKnownFollowers: AppBskyActorDefs.KnownFollowers
+  onLinkPress?: LinkProps['onPress']
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+
+  const textStyle = [
+    a.flex_1,
+    a.text_sm,
+    a.leading_snug,
+    t.atoms.text_contrast_medium,
+  ]
+
+  const slice = cachedKnownFollowers.followers.slice(0, 3).map(f => {
+    const moderation = moderateProfile(f, moderationOpts)
+    return {
+      profile: {
+        ...f,
+        displayName: sanitizeDisplayName(
+          f.displayName || f.handle,
+          moderation.ui('displayName'),
+        ),
+      },
+      moderation,
+    }
+  })
+
+  // Does not have blocks applied. Always >= slices.length
+  const serverCount = cachedKnownFollowers.count
+
+  /*
+   * We check above too, but here for clarity and a reminder to _check for
+   * valid indices_
+   */
+  if (slice.length === 0) return null
+
+  return (
+    <Link
+      label={_(
+        msg`Press to view followers of this account that you also follow`,
+      )}
+      onPress={onLinkPress}
+      to={makeProfileLink(profile, 'known-followers')}
+      style={[
+        a.flex_1,
+        a.flex_row,
+        a.gap_md,
+        a.align_center,
+        {marginLeft: -AVI_BORDER},
+      ]}>
+      {({hovered, pressed}) => (
+        <>
+          <View
+            style={[
+              {
+                height: AVI_SIZE,
+                width: AVI_SIZE + (slice.length - 1) * a.gap_md.gap,
+              },
+              pressed && {
+                opacity: 0.5,
+              },
+            ]}>
+            {slice.map(({profile: prof, moderation}, i) => (
+              <View
+                key={prof.did}
+                style={[
+                  a.absolute,
+                  a.rounded_full,
+                  {
+                    borderWidth: AVI_BORDER,
+                    borderColor: t.atoms.bg.backgroundColor,
+                    width: AVI_SIZE + AVI_BORDER * 2,
+                    height: AVI_SIZE + AVI_BORDER * 2,
+                    left: i * a.gap_md.gap,
+                    zIndex: AVI_BORDER - i,
+                  },
+                ]}>
+                <UserAvatar
+                  size={AVI_SIZE}
+                  avatar={prof.avatar}
+                  moderation={moderation.ui('avatar')}
+                />
+              </View>
+            ))}
+          </View>
+
+          <Text
+            style={[
+              textStyle,
+              hovered && {
+                textDecorationLine: 'underline',
+                textDecorationColor: t.atoms.text_contrast_medium.color,
+              },
+              pressed && {
+                opacity: 0.5,
+              },
+            ]}
+            numberOfLines={2}>
+            {slice.length >= 2 ? (
+              // 2-n followers, including blocks
+              serverCount > 2 ? (
+                <Trans>
+                  Followed by{' '}
+                  <Text key={slice[0].profile.did} style={textStyle}>
+                    {slice[0].profile.displayName}
+                  </Text>
+                  ,{' '}
+                  <Text key={slice[1].profile.did} style={textStyle}>
+                    {slice[1].profile.displayName}
+                  </Text>
+                  , and{' '}
+                  <Plural
+                    value={serverCount - 2}
+                    one="# other"
+                    other="# others"
+                  />
+                </Trans>
+              ) : (
+                // only 2
+                <Trans>
+                  Followed by{' '}
+                  <Text key={slice[0].profile.did} style={textStyle}>
+                    {slice[0].profile.displayName}
+                  </Text>{' '}
+                  and{' '}
+                  <Text key={slice[1].profile.did} style={textStyle}>
+                    {slice[1].profile.displayName}
+                  </Text>
+                </Trans>
+              )
+            ) : serverCount > 1 ? (
+              // 1-n followers, including blocks
+              <Trans>
+                Followed by{' '}
+                <Text key={slice[0].profile.did} style={textStyle}>
+                  {slice[0].profile.displayName}
+                </Text>{' '}
+                and{' '}
+                <Plural
+                  value={serverCount - 1}
+                  one="# other"
+                  other="# others"
+                />
+              </Trans>
+            ) : (
+              // only 1
+              <Trans>
+                Followed by{' '}
+                <Text key={slice[0].profile.did} style={textStyle}>
+                  {slice[0].profile.displayName}
+                </Text>
+              </Trans>
+            )}
+          </Text>
+        </>
+      )}
+    </Link>
+  )
+}

src/components/Link.tsx

@@ -12,7 +12,8 @@ import {
   isExternalUrl,
   linkRequiresWarning,
 } from '#/lib/strings/url-helpers'
-import {isNative, isWeb} from '#/platform/detection'
+import {isNative} from '#/platform/detection'
+import {shouldClickOpenNewTab} from '#/platform/urls'
 import {useModalControls} from '#/state/modals'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
 import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped'
@@ -116,16 +117,7 @@ export function useLink({
         if (isExternal) {
           openLink(href)
         } else {
-          /**
-           * A `GestureResponderEvent`, but cast to `any` to avoid using a bunch
-           * of @ts-ignore below.
-           */
-          const event = e as any
-          const isMiddleClick = isWeb && event.button === 1
-          const isMetaKey =
-            isWeb &&
-            (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
-          const shouldOpenInNewTab = isMetaKey || isMiddleClick
+          const shouldOpenInNewTab = shouldClickOpenNewTab(e)
 
           if (isBskyDownloadUrl(href)) {
             shareUrl(BSKY_DOWNLOAD_URL)

src/components/NewskieDialog.tsx

@@ -0,0 +1,85 @@
+import React from 'react'
+import {View} from 'react-native'
+import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {differenceInSeconds} from 'date-fns'
+
+import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {HITSLOP_10} from 'lib/constants'
+import {sanitizeDisplayName} from 'lib/strings/display-names'
+import {atoms as a} from '#/alf'
+import {Button} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {useDialogControl} from '#/components/Dialog'
+import {Newskie} from '#/components/icons/Newskie'
+import {Text} from '#/components/Typography'
+
+export function NewskieDialog({
+  profile,
+  disabled,
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+  disabled?: boolean
+}) {
+  const {_} = useLingui()
+  const moderationOpts = useModerationOpts()
+  const control = useDialogControl()
+  const profileName = React.useMemo(() => {
+    const name = profile.displayName || profile.handle
+    if (!moderationOpts) return name
+    const moderation = moderateProfile(profile, moderationOpts)
+    return sanitizeDisplayName(name, moderation.ui('displayName'))
+  }, [moderationOpts, profile])
+  const [now] = React.useState(() => Date.now())
+  const timeAgo = useGetTimeAgo()
+  const createdAt = profile.createdAt as string | undefined
+  const daysOld = React.useMemo(() => {
+    if (!createdAt) return Infinity
+    return differenceInSeconds(now, new Date(createdAt)) / 86400
+  }, [createdAt, now])
+
+  if (!createdAt || daysOld > 7) return null
+
+  return (
+    <View style={[a.pr_2xs]}>
+      <Button
+        disabled={disabled}
+        label={_(
+          msg`This user is new here. Press for more info about when they joined.`,
+        )}
+        hitSlop={HITSLOP_10}
+        onPress={control.open}>
+        {({hovered, pressed}) => (
+          <Newskie
+            size="lg"
+            fill="#FFC404"
+            style={{
+              opacity: hovered || pressed ? 0.5 : 1,
+            }}
+          />
+        )}
+      </Button>
+
+      <Dialog.Outer control={control}>
+        <Dialog.Handle />
+        <Dialog.ScrollableInner
+          label={_(msg`New user info dialog`)}
+          style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
+          <View style={[a.gap_sm]}>
+            <Text style={[a.font_bold, a.text_xl]}>
+              <Trans>Say hello!</Trans>
+            </Text>
+            <Text style={[a.text_md]}>
+              <Trans>
+                {profileName} joined Bluesky{' '}
+                {timeAgo(createdAt, now, {format: 'long'})} ago
+              </Trans>
+            </Text>
+          </View>
+        </Dialog.ScrollableInner>
+      </Dialog.Outer>
+    </View>
+  )
+}

src/components/ProfileHoverCard/index.web.tsx

@@ -5,6 +5,7 @@ import {flip, offset, shift, size, useFloating} from '@floating-ui/react-dom'
 import {msg, plural} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {getModerationCauseKey} from '#/lib/moderation'
 import {makeProfileLink} from '#/lib/routes/links'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
@@ -22,11 +23,16 @@ 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 {
+  KnownFollowers,
+  shouldShowKnownFollowers,
+} from '#/components/KnownFollowers'
 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 {ProfileLabel} from '../moderation/ProfileHeaderAlerts'
 import {ProfileHoverCardProps} from './types'
 
 const floatingMiddlewares = [
@@ -45,10 +51,23 @@ const floatingMiddlewares = [
 ]
 
 export function ProfileHoverCard(props: ProfileHoverCardProps) {
+  const prefetchProfileQuery = usePrefetchProfileQuery()
+  const prefetchedProfile = React.useRef(false)
+  const onPointerMove = () => {
+    if (!prefetchedProfile.current) {
+      prefetchedProfile.current = true
+      prefetchProfileQuery(props.did)
+    }
+  }
+
   if (props.disable || isTouchDevice) {
     return props.children
   } else {
-    return <ProfileHoverCardInner {...props} />
+    return (
+      <View onPointerMove={onPointerMove}>
+        <ProfileHoverCardInner {...props} />
+      </View>
+    )
   }
 }
 
@@ -370,7 +389,10 @@ function Inner({
     profile: profileShadow,
     logContext: 'ProfileHoverCard',
   })
-  const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy
+  const isBlockedUser =
+    profile.viewer?.blocking ||
+    profile.viewer?.blockedBy ||
+    profile.viewer?.blockingByList
   const following = formatCount(profile.followsCount || 0)
   const followers = formatCount(profile.followersCount || 0)
   const pluralizedFollowers = plural(profile.followersCount || 0, {
@@ -401,29 +423,41 @@ function Inner({
           />
         </Link>
 
-        {!isMe && (
-          <Button
-            size="small"
-            color={profileShadow.viewer?.following ? 'secondary' : 'primary'}
-            variant="solid"
-            label={
-              profileShadow.viewer?.following
-                ? _(msg`Following`)
-                : _(msg`Follow`)
-            }
-            style={[a.rounded_full]}
-            onPress={profileShadow.viewer?.following ? unfollow : follow}>
-            <ButtonIcon
-              position="left"
-              icon={profileShadow.viewer?.following ? Check : Plus}
-            />
-            <ButtonText>
-              {profileShadow.viewer?.following
-                ? _(msg`Following`)
-                : _(msg`Follow`)}
-            </ButtonText>
-          </Button>
-        )}
+        {!isMe &&
+          (isBlockedUser ? (
+            <Link
+              to={profileURL}
+              label={_(msg`View blocked user's profile`)}
+              onPress={hide}
+              size="small"
+              color="secondary"
+              variant="solid"
+              style={[a.rounded_full]}>
+              <ButtonText>{_(msg`View profile`)}</ButtonText>
+            </Link>
+          ) : (
+            <Button
+              size="small"
+              color={profileShadow.viewer?.following ? 'secondary' : 'primary'}
+              variant="solid"
+              label={
+                profileShadow.viewer?.following
+                  ? _(msg`Following`)
+                  : _(msg`Follow`)
+              }
+              style={[a.rounded_full]}
+              onPress={profileShadow.viewer?.following ? unfollow : follow}>
+              <ButtonIcon
+                position="left"
+                icon={profileShadow.viewer?.following ? Check : Plus}
+              />
+              <ButtonText>
+                {profileShadow.viewer?.following
+                  ? _(msg`Following`)
+                  : _(msg`Follow`)}
+              </ButtonText>
+            </Button>
+          ))}
       </View>
 
       <Link to={profileURL} label={_(msg`View profile`)} onPress={hide}>
@@ -435,11 +469,23 @@ function Inner({
             )}
           </Text>
 
-          <ProfileHeaderHandle profile={profileShadow} />
+          <ProfileHeaderHandle profile={profileShadow} disableTaps />
         </View>
       </Link>
 
-      {!blockHide && (
+      {isBlockedUser && (
+        <View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
+          {moderation.ui('profileView').alerts.map(cause => (
+            <ProfileLabel
+              key={getModerationCauseKey(cause)}
+              cause={cause}
+              disableDetailsDialog
+            />
+          ))}
+        </View>
+      )}
+
+      {!isBlockedUser && (
         <>
           <View style={[a.flex_row, a.flex_wrap, a.gap_md, a.pt_xs]}>
             <InlineLinkText
@@ -473,6 +519,17 @@ function Inner({
               />
             </View>
           ) : undefined}
+
+          {!isMe &&
+            shouldShowKnownFollowers(profile.viewer?.knownFollowers) && (
+              <View style={[a.flex_row, a.align_center, a.gap_sm, a.pt_md]}>
+                <KnownFollowers
+                  profile={profile}
+                  moderationOpts={moderationOpts}
+                  onLinkPress={hide}
+                />
+              </View>
+            )}
         </>
       )}
     </View>

src/components/Prompt.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import {View} from 'react-native'
+import {GestureResponderEvent, View} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
-import {Button, ButtonColor, ButtonText} from '#/components/Button'
+import {Button, ButtonColor, ButtonProps, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {Text} from '#/components/Typography'
 
@@ -136,7 +136,7 @@ export function Action({
    * Note: The dialog will close automatically when the action is pressed, you
    * should NOT close the dialog as a side effect of this method.
    */
-  onPress: () => void
+  onPress: ButtonProps['onPress']
   color?: ButtonColor
   /**
    * Optional i18n string. If undefined, it will default to "Confirm".
@@ -147,9 +147,12 @@ export function Action({
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()
   const {close} = Dialog.useDialogContext()
-  const handleOnPress = React.useCallback(() => {
-    close(onPress)
-  }, [close, onPress])
+  const handleOnPress = React.useCallback(
+    (e: GestureResponderEvent) => {
+      close(() => onPress?.(e))
+    },
+    [close, onPress],
+  )
 
   return (
     <Button
@@ -186,7 +189,7 @@ export function Basic({
    * Note: The dialog will close automatically when the action is pressed, you
    * should NOT close the dialog as a side effect of this method.
    */
-  onConfirm: () => void
+  onConfirm: ButtonProps['onPress']
   confirmButtonColor?: ButtonColor
   showCancel?: boolean
 }>) {

src/components/ReportDialog/SubmitView.tsx

@@ -15,7 +15,6 @@ 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 {KeyboardPadding} from '#/components/KeyboardPadding'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 import {ReportDialogProps} from './types'
@@ -222,7 +221,6 @@ export function SubmitView({
           {submitting && <ButtonIcon icon={Loader} />}
         </Button>
       </View>
-      <KeyboardPadding />
     </View>
   )
 }

src/components/RichText.tsx

@@ -28,6 +28,7 @@ export function RichText({
   authorHandle,
   onLinkPress,
   interactiveStyle,
+  emojiMultiplier = 1.85,
 }: TextStyleProp &
   Pick<TextProps, 'selectable'> & {
     value: RichTextAPI | string
@@ -38,6 +39,7 @@ export function RichText({
     authorHandle?: string
     onLinkPress?: LinkProps['onPress']
     interactiveStyle?: TextStyle
+    emojiMultiplier?: number
   }) {
   const richText = React.useMemo(
     () =>
@@ -57,17 +59,14 @@ export function RichText({
   const {text, facets} = richText
 
   if (!facets?.length) {
-    if (text.length <= 5 && /^\p{Extended_Pictographic}+$/u.test(text)) {
+    if (isOnlyEmoji(text)) {
+      const fontSize =
+        (flattenedStyle.fontSize ?? a.text_sm.fontSize) * emojiMultiplier
       return (
         <Text
           selectable={selectable}
           testID={testID}
-          style={[
-            {
-              fontSize: 26,
-              lineHeight: 30,
-            },
-          ]}
+          style={[plainStyles, {fontSize}]}
           // @ts-ignore web only -prf
           dataSet={WORD_WRAP}>
           {text}
@@ -247,3 +246,10 @@ function RichTextTag({
     </React.Fragment>
   )
 }
+
+export function isOnlyEmoji(text: string) {
+  return (
+    text.length <= 15 &&
+    /^[\p{Emoji_Presentation}\p{Extended_Pictographic}]+$/u.test(text)
+  )
+}

src/components/dialogs/GifSelect.ios.tsx

@@ -0,0 +1,255 @@
+import React, {
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import {Modal, ScrollView, TextInput, View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {cleanError} from '#/lib/strings/errors'
+import {
+  Gif,
+  useFeaturedGifsQuery,
+  useGifSearchQuery,
+} from '#/state/queries/tenor'
+import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
+import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
+import {FlatList_INTERNAL} from '#/view/com/util/Views'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import * as TextField from '#/components/forms/TextField'
+import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
+import {Button, ButtonText} from '../Button'
+import {Handle} from '../Dialog'
+import {useThrottledValue} from '../hooks/useThrottledValue'
+import {ListFooter, ListMaybePlaceholder} from '../Lists'
+import {GifPreview} from './GifSelect.shared'
+
+export function GifSelectDialog({
+  controlRef,
+  onClose,
+  onSelectGif: onSelectGifProp,
+}: {
+  controlRef: React.RefObject<{open: () => void}>
+  onClose: () => void
+  onSelectGif: (gif: Gif) => void
+}) {
+  const t = useTheme()
+  const [open, setOpen] = useState(false)
+
+  useImperativeHandle(controlRef, () => ({
+    open: () => setOpen(true),
+  }))
+
+  const close = useCallback(() => {
+    setOpen(false)
+    onClose()
+  }, [onClose])
+
+  const onSelectGif = useCallback(
+    (gif: Gif) => {
+      onSelectGifProp(gif)
+      close()
+    },
+    [onSelectGifProp, close],
+  )
+
+  const renderErrorBoundary = useCallback(
+    (error: any) => <ModalError details={String(error)} close={close} />,
+    [close],
+  )
+
+  return (
+    <Modal
+      visible={open}
+      animationType="slide"
+      presentationStyle="formSheet"
+      onRequestClose={close}
+      aria-modal
+      accessibilityViewIsModal>
+      <View style={[a.flex_1, t.atoms.bg]}>
+        <Handle />
+        <ErrorBoundary renderError={renderErrorBoundary}>
+          <GifList onSelectGif={onSelectGif} close={close} />
+        </ErrorBoundary>
+      </View>
+    </Modal>
+  )
+}
+
+function GifList({
+  onSelectGif,
+}: {
+  close: () => void
+  onSelectGif: (gif: Gif) => void
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+  const textInputRef = useRef<TextInput>(null)
+  const listRef = useRef<FlatList_INTERNAL>(null)
+  const [undeferredSearch, setSearch] = useState('')
+  const search = useThrottledValue(undeferredSearch, 500)
+
+  const isSearching = search.length > 0
+
+  const trendingQuery = useFeaturedGifsQuery()
+  const searchQuery = useGifSearchQuery(search)
+
+  const {
+    data,
+    fetchNextPage,
+    isFetchingNextPage,
+    hasNextPage,
+    error,
+    isLoading,
+    isError,
+    refetch,
+  } = isSearching ? searchQuery : trendingQuery
+
+  const flattenedData = useMemo(() => {
+    return data?.pages.flatMap(page => page.results) || []
+  }, [data])
+
+  const renderItem = useCallback(
+    ({item}: {item: Gif}) => {
+      return <GifPreview gif={item} onSelectGif={onSelectGif} />
+    },
+    [onSelectGif],
+  )
+
+  const onEndReached = React.useCallback(() => {
+    if (isFetchingNextPage || !hasNextPage || error) return
+    fetchNextPage()
+  }, [isFetchingNextPage, hasNextPage, error, fetchNextPage])
+
+  const hasData = flattenedData.length > 0
+
+  const onGoBack = useCallback(() => {
+    if (isSearching) {
+      // clear the input and reset the state
+      textInputRef.current?.clear()
+      setSearch('')
+    } else {
+      close()
+    }
+  }, [isSearching])
+
+  const listHeader = useMemo(() => {
+    return (
+      <View style={[a.relative, a.mb_lg, a.pt_4xl, a.flex_row, a.align_center]}>
+        {/* cover top corners */}
+        <View
+          style={[
+            a.absolute,
+            a.inset_0,
+            {
+              borderBottomLeftRadius: 8,
+              borderBottomRightRadius: 8,
+            },
+            t.atoms.bg,
+          ]}
+        />
+
+        <TextField.Root>
+          <TextField.Icon icon={Search} />
+          <TextField.Input
+            label={_(msg`Search GIFs`)}
+            placeholder={_(msg`Search Tenor`)}
+            onChangeText={text => {
+              setSearch(text)
+              listRef.current?.scrollToOffset({offset: 0, animated: false})
+            }}
+            returnKeyType="search"
+            clearButtonMode="while-editing"
+            inputRef={textInputRef}
+            maxLength={50}
+          />
+        </TextField.Root>
+      </View>
+    )
+  }, [t.atoms.bg, _])
+
+  return (
+    <FlatList_INTERNAL
+      ref={listRef}
+      key={gtMobile ? '3 cols' : '2 cols'}
+      data={flattenedData}
+      renderItem={renderItem}
+      numColumns={gtMobile ? 3 : 2}
+      columnWrapperStyle={a.gap_sm}
+      contentContainerStyle={a.px_lg}
+      ListHeaderComponent={
+        <>
+          {listHeader}
+          {!hasData && (
+            <ListMaybePlaceholder
+              isLoading={isLoading}
+              isError={isError}
+              onRetry={refetch}
+              onGoBack={onGoBack}
+              emptyType="results"
+              sideBorders={false}
+              topBorder={false}
+              errorTitle={_(msg`Failed to load GIFs`)}
+              errorMessage={_(msg`There was an issue connecting to Tenor.`)}
+              emptyMessage={
+                isSearching
+                  ? _(msg`No search results found for "${search}".`)
+                  : _(
+                      msg`No featured GIFs found. There may be an issue with Tenor.`,
+                    )
+              }
+            />
+          )}
+        </>
+      }
+      stickyHeaderIndices={[0]}
+      onEndReached={onEndReached}
+      onEndReachedThreshold={4}
+      keyExtractor={(item: Gif) => item.id}
+      keyboardDismissMode="on-drag"
+      ListFooterComponent={
+        hasData ? (
+          <ListFooter
+            isFetchingNextPage={isFetchingNextPage}
+            error={cleanError(error)}
+            onRetry={fetchNextPage}
+            style={{borderTopWidth: 0}}
+          />
+        ) : null
+      }
+    />
+  )
+}
+
+function ModalError({details, close}: {details?: string; close: () => void}) {
+  const {_} = useLingui()
+
+  return (
+    <ScrollView
+      style={[a.flex_1, a.gap_md]}
+      centerContent
+      contentContainerStyle={a.px_lg}>
+      <ErrorScreen
+        title={_(msg`Oh no!`)}
+        message={_(
+          msg`There was an unexpected issue in the application. Please let us know if this happened to you!`,
+        )}
+        details={details}
+      />
+      <Button
+        label={_(msg`Close dialog`)}
+        onPress={close}
+        color="primary"
+        size="medium"
+        variant="solid">
+        <ButtonText>
+          <Trans>Close</Trans>
+        </ButtonText>
+      </Button>
+    </ScrollView>
+  )
+}

src/components/dialogs/GifSelect.shared.tsx

@@ -0,0 +1,53 @@
+import React, {useCallback} from 'react'
+import {Image} from 'expo-image'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {logEvent} from '#/lib/statsig/statsig'
+import {Gif} from '#/state/queries/tenor'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button} from '../Button'
+
+export function GifPreview({
+  gif,
+  onSelectGif,
+}: {
+  gif: Gif
+  onSelectGif: (gif: Gif) => void
+}) {
+  const {gtTablet} = useBreakpoints()
+  const {_} = useLingui()
+  const t = useTheme()
+
+  const onPress = useCallback(() => {
+    logEvent('composer:gif:select', {})
+    onSelectGif(gif)
+  }, [onSelectGif, gif])
+
+  return (
+    <Button
+      label={_(msg`Select GIF "${gif.title}"`)}
+      style={[a.flex_1, gtTablet ? {maxWidth: '33%'} : {maxWidth: '50%'}]}
+      onPress={onPress}>
+      {({pressed}) => (
+        <Image
+          style={[
+            a.flex_1,
+            a.mb_sm,
+            a.rounded_sm,
+            {aspectRatio: 1, opacity: pressed ? 0.8 : 1},
+            t.atoms.bg_contrast_25,
+          ]}
+          source={{
+            uri: gif.media_formats.tinygif.url,
+          }}
+          contentFit="cover"
+          accessibilityLabel={gif.title}
+          accessibilityHint=""
+          cachePolicy="none"
+          accessibilityIgnoresInvertColors
+        />
+      )}
+    </Button>
+  )
+}

src/components/dialogs/GifSelect.tsx

@@ -1,11 +1,15 @@
-import React, {useCallback, useMemo, useRef, useState} from 'react'
+import React, {
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import {TextInput, View} from 'react-native'
-import {Image} from 'expo-image'
 import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {isWeb} from '#/platform/detection'
 import {
@@ -23,16 +27,23 @@ import {ArrowLeft_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arr
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
 import {Button, ButtonIcon, ButtonText} from '../Button'
 import {ListFooter, ListMaybePlaceholder} from '../Lists'
+import {GifPreview} from './GifSelect.shared'
 
 export function GifSelectDialog({
-  control,
+  controlRef,
   onClose,
   onSelectGif: onSelectGifProp,
 }: {
-  control: Dialog.DialogControlProps
+  controlRef: React.RefObject<{open: () => void}>
   onClose: () => void
   onSelectGif: (gif: Gif) => void
 }) {
+  const control = Dialog.useDialogControl()
+
+  useImperativeHandle(controlRef, () => ({
+    open: () => control.open(),
+  }))
+
   const onSelectGif = useCallback(
     (gif: Gif) => {
       control.close(() => onSelectGifProp(gif))
@@ -233,50 +244,6 @@ function GifList({
   )
 }
 
-function GifPreview({
-  gif,
-  onSelectGif,
-}: {
-  gif: Gif
-  onSelectGif: (gif: Gif) => void
-}) {
-  const {gtTablet} = useBreakpoints()
-  const {_} = useLingui()
-  const t = useTheme()
-
-  const onPress = useCallback(() => {
-    logEvent('composer:gif:select', {})
-    onSelectGif(gif)
-  }, [onSelectGif, gif])
-
-  return (
-    <Button
-      label={_(msg`Select GIF "${gif.title}"`)}
-      style={[a.flex_1, gtTablet ? {maxWidth: '33%'} : {maxWidth: '50%'}]}
-      onPress={onPress}>
-      {({pressed}) => (
-        <Image
-          style={[
-            a.flex_1,
-            a.mb_sm,
-            a.rounded_sm,
-            {aspectRatio: 1, opacity: pressed ? 0.8 : 1},
-            t.atoms.bg_contrast_25,
-          ]}
-          source={{
-            uri: gif.media_formats.tinygif.url,
-          }}
-          contentFit="cover"
-          accessibilityLabel={gif.title}
-          accessibilityHint=""
-          cachePolicy="none"
-          accessibilityIgnoresInvertColors
-        />
-      )}
-    </Button>
-  )
-}
-
 function DialogError({details}: {details?: string}) {
   const {_} = useLingui()
   const control = Dialog.useDialogContext()

src/components/dialogs/MutedWords.tsx

@@ -28,7 +28,6 @@ import {Hashtag_Stroke2_Corner0_Rounded as Hashtag} from '#/components/icons/Has
 import {PageText_Stroke2_Corner0_Rounded as PageText} from '#/components/icons/PageText'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
-import {KeyboardPadding} from '#/components/KeyboardPadding'
 import {Loader} from '#/components/Loader'
 import * as Prompt from '#/components/Prompt'
 import {Text} from '#/components/Typography'
@@ -257,7 +256,6 @@ function MutedWordsInner() {
       </View>
 
       <Dialog.Close />
-      <KeyboardPadding maxHeight={100} />
     </Dialog.ScrollableInner>
   )
 }

src/components/dms/ConvoMenu.tsx

@@ -26,9 +26,11 @@ import {ArrowBoxLeft_Stroke2_Corner0_Rounded as ArrowBoxLeft} from '#/components
 import {DotGrid_Stroke2_Corner0_Rounded as DotsHorizontal} from '#/components/icons/DotGrid'
 import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
 import {Mute_Stroke2_Corner0_Rounded as Mute} from '#/components/icons/Mute'
-import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
-import {PersonCheck_Stroke2_Corner0_Rounded as PersonCheck} from '#/components/icons/PersonCheck'
-import {PersonX_Stroke2_Corner0_Rounded as PersonX} from '#/components/icons/PersonX'
+import {
+  Person_Stroke2_Corner0_Rounded as Person,
+  PersonCheck_Stroke2_Corner0_Rounded as PersonCheck,
+  PersonX_Stroke2_Corner0_Rounded as PersonX,
+} from '#/components/icons/Person'
 import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
 import * as Menu from '#/components/Menu'
 import * as Prompt from '#/components/Prompt'

src/components/dms/LeaveConvoPrompt.tsx

@@ -49,7 +49,7 @@ export function LeaveConvoPrompt({
       )}
       confirmButtonCta={_(msg`Leave`)}
       confirmButtonColor="negative"
-      onConfirm={leaveConvo}
+      onConfirm={() => leaveConvo()}
     />
   )
 }

src/components/dms/MessageItem.tsx

@@ -6,7 +6,11 @@ import {
   TextStyle,
   View,
 } from 'react-native'
-import {ChatBskyConvoDefs, RichText as RichTextAPI} from '@atproto/api'
+import {
+  AppBskyEmbedRecord,
+  ChatBskyConvoDefs,
+  RichText as RichTextAPI,
+} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -17,7 +21,8 @@ import {atoms as a, useTheme} from '#/alf'
 import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
-import {RichText} from '../RichText'
+import {isOnlyEmoji, RichText} from '../RichText'
+import {MessageItemEmbed} from './MessageItemEmbed'
 
 let MessageItem = ({
   item,
@@ -77,37 +82,46 @@ let MessageItem = ({
   return (
     <View style={[isFromSelf ? a.mr_md : a.ml_md]}>
       <ActionsWrapper isFromSelf={isFromSelf} message={message}>
-        <View
-          style={[
-            a.py_sm,
-            a.my_2xs,
-            a.rounded_md,
-            {
-              paddingLeft: 14,
-              paddingRight: 14,
-              backgroundColor: isFromSelf
-                ? isPending
-                  ? pendingColor
-                  : t.palette.primary_500
-                : t.palette.contrast_50,
-              borderRadius: 17,
-            },
-            isFromSelf
-              ? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
-              : {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
-          ]}>
-          <RichText
-            value={rt}
-            style={[
-              a.text_md,
-              a.leading_snug,
-              isFromSelf && {color: t.palette.white},
-              isPending && t.name !== 'light' && {color: t.palette.primary_300},
-            ]}
-            interactiveStyle={a.underline}
-            enableTags
-          />
-        </View>
+        {AppBskyEmbedRecord.isView(message.embed) && (
+          <MessageItemEmbed embed={message.embed} />
+        )}
+        {rt.text.length > 0 && (
+          <View
+            style={
+              !isOnlyEmoji(message.text) && [
+                a.py_sm,
+                a.my_2xs,
+                a.rounded_md,
+                {
+                  paddingLeft: 14,
+                  paddingRight: 14,
+                  backgroundColor: isFromSelf
+                    ? isPending
+                      ? pendingColor
+                      : t.palette.primary_500
+                    : t.palette.contrast_50,
+                  borderRadius: 17,
+                },
+                isFromSelf ? a.self_end : a.self_start,
+                isFromSelf
+                  ? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
+                  : {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
+              ]
+            }>
+            <RichText
+              value={rt}
+              style={[
+                a.text_md,
+                isFromSelf && {color: t.palette.white},
+                isPending &&
+                  t.name !== 'light' && {color: t.palette.primary_300},
+              ]}
+              interactiveStyle={a.underline}
+              enableTags
+              emojiMultiplier={3}
+            />
+          </View>
+        )}
       </ActionsWrapper>
 
       {isLastInGroup && (

src/components/dms/MessageItemEmbed.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import {View} from 'react-native'
+import {AppBskyEmbedRecord} from '@atproto/api'
+
+import {PostEmbeds} from '#/view/com/util/post-embeds'
+import {atoms as a, native, useTheme} from '#/alf'
+
+let MessageItemEmbed = ({
+  embed,
+}: {
+  embed: AppBskyEmbedRecord.View
+}): React.ReactNode => {
+  const t = useTheme()
+
+  return (
+    <View style={[a.my_xs, t.atoms.bg, native({flexBasis: 0})]}>
+      <PostEmbeds embed={embed} allowNestedQuotes />
+    </View>
+  )
+}
+MessageItemEmbed = React.memo(MessageItemEmbed)
+export {MessageItemEmbed}

src/components/dms/MessageMenu.tsx

@@ -6,12 +6,16 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {richTextToString} from '#/lib/strings/rich-text-helpers'
+import {getTranslatorLink} from '#/locale/helpers'
+import {useLanguagePrefs} from '#/state/preferences'
+import {useOpenLink} from '#/state/preferences/in-app-browser'
 import {isWeb} from 'platform/detection'
 import {useConvoActive} from 'state/messages/convo'
 import {useSession} from 'state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {ReportDialog} from '#/components/dms/ReportDialog'
+import {BubbleQuestion_Stroke2_Corner0_Rounded as Translate} from '#/components/icons/Bubble'
 import {DotGrid_Stroke2_Corner0_Rounded as DotsHorizontal} from '#/components/icons/DotGrid'
 import {Trash_Stroke2_Corner0_Rounded as Trash} from '#/components/icons/Trash'
 import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
@@ -35,10 +39,12 @@ export let MessageMenu = ({
   const convo = useConvoActive()
   const deleteControl = usePromptControl()
   const reportControl = usePromptControl()
+  const langPrefs = useLanguagePrefs()
+  const openLink = useOpenLink()
 
   const isFromSelf = message.sender?.did === currentAccount?.did
 
-  const onCopyPostText = React.useCallback(() => {
+  const onCopyMessage = React.useCallback(() => {
     const str = richTextToString(
       new RichText({
         text: message.text,
@@ -51,6 +57,14 @@ export let MessageMenu = ({
     Toast.show(_(msg`Copied to clipboard`))
   }, [_, message.text, message.facets])
 
+  const onPressTranslateMessage = React.useCallback(() => {
+    const translatorUrl = getTranslatorLink(
+      message.text,
+      langPrefs.primaryLanguage,
+    )
+    openLink(translatorUrl)
+  }, [langPrefs.primaryLanguage, message.text, openLink])
+
   const onDelete = React.useCallback(() => {
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
     convo
@@ -81,16 +95,27 @@ export let MessageMenu = ({
         )}
 
         <Menu.Outer>
-          <Menu.Group>
-            <Menu.Item
-              testID="messageDropdownCopyBtn"
-              label={_(msg`Copy message text`)}
-              onPress={onCopyPostText}>
-              <Menu.ItemText>{_(msg`Copy message text`)}</Menu.ItemText>
-              <Menu.ItemIcon icon={ClipboardIcon} position="right" />
-            </Menu.Item>
-          </Menu.Group>
-          <Menu.Divider />
+          {message.text.length > 0 && (
+            <>
+              <Menu.Group>
+                <Menu.Item
+                  testID="messageDropdownTranslateBtn"
+                  label={_(msg`Translate`)}
+                  onPress={onPressTranslateMessage}>
+                  <Menu.ItemText>{_(msg`Translate`)}</Menu.ItemText>
+                  <Menu.ItemIcon icon={Translate} position="right" />
+                </Menu.Item>
+                <Menu.Item
+                  testID="messageDropdownCopyBtn"
+                  label={_(msg`Copy message text`)}
+                  onPress={onCopyMessage}>
+                  <Menu.ItemText>{_(msg`Copy message text`)}</Menu.ItemText>
+                  <Menu.ItemIcon icon={ClipboardIcon} position="right" />
+                </Menu.Item>
+              </Menu.Group>
+              <Menu.Divider />
+            </>
+          )}
           <Menu.Group>
             <Menu.Item
               testID="messageDropdownDeleteBtn"

src/components/dms/MessagesListHeader.tsx

@@ -22,6 +22,7 @@ import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {ConvoMenu} from '#/components/dms/ConvoMenu'
 import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/Bell2'
 import {Link} from '#/components/Link'
+import {PostAlerts} from '#/components/moderation/PostAlerts'
 import {Text} from '#/components/Typography'
 
 const PFP_SIZE = isWeb ? 40 : 34
@@ -58,7 +59,7 @@ export let MessagesListHeader = ({
         t.atoms.border_contrast_low,
         a.border_b,
         a.flex_row,
-        a.align_center,
+        a.align_start,
         a.gap_sm,
         gtTablet ? a.pl_lg : a.pl_xl,
         a.pr_lg,
@@ -69,7 +70,7 @@ export let MessagesListHeader = ({
           testID="conversationHeaderBackBtn"
           onPress={onPressBack}
           hitSlop={BACK_HITSLOP}
-          style={{width: 30, height: 30}}
+          style={{width: 30, height: 30, marginTop: isWeb ? 6 : 4}}
           accessibilityRole="button"
           accessibilityLabel={_(msg`Back`)}
           accessibilityHint="">
@@ -152,51 +153,71 @@ function HeaderReady({
       )
 
   return (
-    <>
-      <Link
-        style={[a.flex_row, a.align_center, a.gap_md, a.flex_1, a.pr_md]}
-        to={makeProfileLink(profile)}>
-        <PreviewableUserAvatar
-          size={PFP_SIZE}
-          profile={profile}
-          moderation={moderation.ui('avatar')}
-          disableHoverCard={moderation.blocked}
-        />
-        <View style={a.flex_1}>
-          <Text
-            style={[a.text_md, a.font_bold, web(a.leading_normal)]}
-            numberOfLines={1}>
-            {displayName}
-          </Text>
-          {!isDeletedAccount && (
+    <View style={[a.flex_1]}>
+      <View style={[a.w_full, a.flex_row, a.align_center, a.justify_between]}>
+        <Link
+          style={[a.flex_row, a.align_start, a.gap_md, a.flex_1, a.pr_md]}
+          to={makeProfileLink(profile)}>
+          <View style={[a.pt_2xs]}>
+            <PreviewableUserAvatar
+              size={PFP_SIZE}
+              profile={profile}
+              moderation={moderation.ui('avatar')}
+              disableHoverCard={moderation.blocked}
+            />
+          </View>
+          <View style={a.flex_1}>
             <Text
-              style={[
-                t.atoms.text_contrast_medium,
-                a.text_sm,
-                web([a.leading_normal, {marginTop: -2}]),
-              ]}
+              style={[a.text_md, a.font_bold, web(a.leading_normal)]}
               numberOfLines={1}>
-              @{profile.handle}
-              {convoState.convo?.muted && (
-                <>
-                  {' '}
-                  &middot;{' '}
-                  <BellStroke size="xs" style={t.atoms.text_contrast_medium} />
-                </>
-              )}
+              {displayName}
             </Text>
-          )}
-        </View>
-      </Link>
+            {!isDeletedAccount && (
+              <Text
+                style={[
+                  t.atoms.text_contrast_medium,
+                  a.text_sm,
+                  web([a.leading_normal, {marginTop: -2}]),
+                ]}
+                numberOfLines={1}>
+                @{profile.handle}
+                {convoState.convo?.muted && (
+                  <>
+                    {' '}
+                    &middot;{' '}
+                    <BellStroke
+                      size="xs"
+                      style={t.atoms.text_contrast_medium}
+                    />
+                  </>
+                )}
+              </Text>
+            )}
+          </View>
+        </Link>
 
-      {isConvoActive(convoState) && (
-        <ConvoMenu
-          convo={convoState.convo}
-          profile={profile}
-          currentScreen="conversation"
-          blockInfo={blockInfo}
+        {isConvoActive(convoState) && (
+          <ConvoMenu
+            convo={convoState.convo}
+            profile={profile}
+            currentScreen="conversation"
+            blockInfo={blockInfo}
+          />
+        )}
+      </View>
+
+      <View
+        style={[
+          {
+            paddingLeft: PFP_SIZE + a.gap_md.gap,
+          },
+        ]}>
+        <PostAlerts
+          modui={moderation.ui('contentList')}
+          size="large"
+          style={[a.pt_xs]}
         />
-      )}
-    </>
+      </View>
+    </View>
   )
 }

src/components/dms/ReportDialog.tsx

@@ -16,6 +16,7 @@ import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
+import {KeyboardControllerPadding} from '#/components/KeyboardControllerPadding'
 import {Button, ButtonIcon, ButtonText} from '../Button'
 import {Divider} from '../Divider'
 import {ChevronLeft_Stroke2_Corner0_Rounded as Chevron} from '../icons/Chevron'
@@ -47,6 +48,7 @@ let ReportDialog = ({
       <Dialog.ScrollableInner label={_(msg`Report this message`)}>
         <DialogInner params={params} />
         <Dialog.Close />
+        <KeyboardControllerPadding />
       </Dialog.ScrollableInner>
     </Dialog.Outer>
   )

src/components/dms/dialogs/NewChatDialog.tsx

@@ -0,0 +1,67 @@
+import React, {useCallback} from 'react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
+import {logEvent} from 'lib/statsig/statsig'
+import {FAB} from '#/view/com/util/fab/FAB'
+import * as Toast from '#/view/com/util/Toast'
+import {useTheme} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {SearchablePeopleList} from './SearchablePeopleList'
+
+export function NewChat({
+  control,
+  onNewChat,
+}: {
+  control: Dialog.DialogControlProps
+  onNewChat: (chatId: string) => void
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+
+  const {mutate: createChat} = useGetConvoForMembers({
+    onSuccess: data => {
+      onNewChat(data.convo.id)
+
+      if (!data.convo.lastMessage) {
+        logEvent('chat:create', {logContext: 'NewChatDialog'})
+      }
+      logEvent('chat:open', {logContext: 'NewChatDialog'})
+    },
+    onError: error => {
+      Toast.show(error.message)
+    },
+  })
+
+  const onCreateChat = useCallback(
+    (did: string) => {
+      control.close(() => createChat([did]))
+    },
+    [control, createChat],
+  )
+
+  return (
+    <>
+      <FAB
+        testID="newChatFAB"
+        onPress={control.open}
+        icon={<Plus size="lg" fill={t.palette.white} />}
+        accessibilityRole="button"
+        accessibilityLabel={_(msg`New chat`)}
+        accessibilityHint=""
+      />
+
+      <Dialog.Outer
+        control={control}
+        testID="newChatDialog"
+        nativeOptions={{sheet: {snapPoints: ['100%']}}}>
+        <SearchablePeopleList
+          title={_(msg`Start a new chat`)}
+          onSelectChat={onCreateChat}
+        />
+      </Dialog.Outer>
+    </>
+  )
+}

src/components/dms/dialogs/SearchablePeopleList.tsx

@@ -16,23 +16,19 @@ import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {isWeb} from '#/platform/detection'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
-import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
+import {useListConvosQuery} from '#/state/queries/messages/list-converations'
 import {useProfileFollowsQuery} from '#/state/queries/profile-follows'
 import {useSession} from '#/state/session'
-import {logEvent} from 'lib/statsig/statsig'
 import {useActorAutocompleteQuery} from 'state/queries/actor-autocomplete'
-import {FAB} from '#/view/com/util/fab/FAB'
-import * as Toast from '#/view/com/util/Toast'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, native, useTheme, web} from '#/alf'
 import {Button} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
-import {TextInput} from '#/components/dms/NewChatDialog/TextInput'
+import {TextInput} from '#/components/dms/dialogs/TextInput'
 import {canBeMessaged} from '#/components/dms/util'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
-import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {Text} from '#/components/Typography'
 
@@ -57,55 +53,291 @@ type Item =
       key: string
     }
 
-export function NewChat({
-  control,
-  onNewChat,
+export function SearchablePeopleList({
+  title,
+  onSelectChat,
+  showRecentConvos,
 }: {
-  control: Dialog.DialogControlProps
-  onNewChat: (chatId: string) => void
+  title: string
+  onSelectChat: (did: string) => void
+  showRecentConvos?: boolean
 }) {
   const t = useTheme()
   const {_} = useLingui()
+  const moderationOpts = useModerationOpts()
+  const control = Dialog.useDialogContext()
+  const listRef = useRef<BottomSheetFlatListMethods>(null)
+  const {currentAccount} = useSession()
+  const inputRef = useRef<TextInputType>(null)
 
-  const {mutate: createChat} = useGetConvoForMembers({
-    onSuccess: data => {
-      onNewChat(data.convo.id)
+  const [searchText, setSearchText] = useState('')
 
-      if (!data.convo.lastMessage) {
-        logEvent('chat:create', {logContext: 'NewChatDialog'})
+  const {
+    data: results,
+    isError,
+    isFetching,
+  } = useActorAutocompleteQuery(searchText, true, 12)
+  const {data: follows} = useProfileFollowsQuery(currentAccount?.did)
+  const {data: convos} = useListConvosQuery({enabled: showRecentConvos})
+
+  const items = useMemo(() => {
+    let _items: Item[] = []
+
+    if (isError) {
+      _items.push({
+        type: 'empty',
+        key: 'empty',
+        message: _(msg`We're having network issues, try again`),
+      })
+    } else if (searchText.length) {
+      if (results?.length) {
+        for (const profile of results) {
+          if (profile.did === currentAccount?.did) continue
+          _items.push({
+            type: 'profile',
+            key: profile.did,
+            enabled: canBeMessaged(profile),
+            profile,
+          })
+        }
+
+        _items = _items.sort(a => {
+          // @ts-ignore
+          return a.enabled ? -1 : 1
+        })
       }
-      logEvent('chat:open', {logContext: 'NewChatDialog'})
-    },
-    onError: error => {
-      Toast.show(error.message)
-    },
-  })
+    } else {
+      const placeholders: Item[] = Array(10)
+        .fill(0)
+        .map((_, i) => ({
+          type: 'placeholder',
+          key: i + '',
+        }))
 
-  const onCreateChat = useCallback(
-    (did: string) => {
-      control.close(() => createChat([did]))
+      if (showRecentConvos) {
+        if (convos && follows) {
+          const usedDids = new Set()
+
+          for (const page of convos.pages) {
+            for (const convo of page.convos) {
+              const profiles = convo.members.filter(
+                m => m.did !== currentAccount?.did,
+              )
+
+              for (const profile of profiles) {
+                if (usedDids.has(profile.did)) continue
+
+                usedDids.add(profile.did)
+
+                _items.push({
+                  type: 'profile',
+                  key: profile.did,
+                  enabled: true,
+                  profile,
+                })
+              }
+            }
+          }
+
+          let followsItems: typeof _items = []
+
+          for (const page of follows.pages) {
+            for (const profile of page.follows) {
+              if (usedDids.has(profile.did)) continue
+
+              followsItems.push({
+                type: 'profile',
+                key: profile.did,
+                enabled: canBeMessaged(profile),
+                profile,
+              })
+            }
+          }
+
+          // only sort follows
+          followsItems = followsItems.sort(a => {
+            // @ts-ignore
+            return a.enabled ? -1 : 1
+          })
+
+          // then append
+          _items.push(...followsItems)
+        } else {
+          _items.push(...placeholders)
+        }
+      } else if (follows) {
+        for (const page of follows.pages) {
+          for (const profile of page.follows) {
+            _items.push({
+              type: 'profile',
+              key: profile.did,
+              enabled: canBeMessaged(profile),
+              profile,
+            })
+          }
+        }
+
+        _items = _items.sort(a => {
+          // @ts-ignore
+          return a.enabled ? -1 : 1
+        })
+      } else {
+        _items.push(...placeholders)
+      }
+    }
+
+    return _items
+  }, [
+    _,
+    searchText,
+    results,
+    isError,
+    currentAccount?.did,
+    follows,
+    convos,
+    showRecentConvos,
+  ])
+
+  if (searchText && !isFetching && !items.length && !isError) {
+    items.push({type: 'empty', key: 'empty', message: _(msg`No results`)})
+  }
+
+  const renderItems = useCallback(
+    ({item}: {item: Item}) => {
+      switch (item.type) {
+        case 'profile': {
+          return (
+            <ProfileCard
+              key={item.key}
+              enabled={item.enabled}
+              profile={item.profile}
+              moderationOpts={moderationOpts!}
+              onPress={onSelectChat}
+            />
+          )
+        }
+        case 'placeholder': {
+          return <ProfileCardSkeleton key={item.key} />
+        }
+        case 'empty': {
+          return <Empty key={item.key} message={item.message} />
+        }
+        default:
+          return null
+      }
     },
-    [control, createChat],
+    [moderationOpts, onSelectChat],
   )
 
-  return (
-    <>
-      <FAB
-        testID="newChatFAB"
-        onPress={control.open}
-        icon={<Plus size="lg" fill={t.palette.white} />}
-        accessibilityRole="button"
-        accessibilityLabel={_(msg`New chat`)}
-        accessibilityHint=""
-      />
+  useLayoutEffect(() => {
+    if (isWeb) {
+      setImmediate(() => {
+        inputRef?.current?.focus()
+      })
+    }
+  }, [])
 
-      <Dialog.Outer
-        control={control}
-        testID="newChatDialog"
-        nativeOptions={{sheet: {snapPoints: ['100%']}}}>
-        <SearchablePeopleList onCreateChat={onCreateChat} />
-      </Dialog.Outer>
-    </>
+  const listHeader = useMemo(() => {
+    return (
+      <View
+        style={[
+          a.relative,
+          a.pt_md,
+          a.pb_xs,
+          a.px_lg,
+          a.border_b,
+          t.atoms.border_contrast_low,
+          t.atoms.bg,
+          native([a.pt_lg]),
+        ]}>
+        <View
+          style={[
+            a.relative,
+            native(a.align_center),
+            a.justify_center,
+            {height: 32},
+          ]}>
+          <Button
+            label={_(msg`Close`)}
+            size="small"
+            shape="round"
+            variant="ghost"
+            color="secondary"
+            style={[
+              a.absolute,
+              a.z_20,
+              native({
+                left: -7,
+              }),
+              web({
+                right: -4,
+              }),
+            ]}
+            onPress={() => control.close()}>
+            {isWeb ? (
+              <X size="md" fill={t.palette.contrast_500} />
+            ) : (
+              <ChevronLeft size="md" fill={t.palette.contrast_500} />
+            )}
+          </Button>
+          <Text
+            style={[
+              a.z_10,
+              a.text_lg,
+              a.font_bold,
+              a.leading_tight,
+              t.atoms.text_contrast_high,
+            ]}>
+            {title}
+          </Text>
+        </View>
+
+        <View style={[native([a.pt_sm]), web([a.pt_xs])]}>
+          <SearchInput
+            inputRef={inputRef}
+            value={searchText}
+            onChangeText={text => {
+              setSearchText(text)
+              listRef.current?.scrollToOffset({offset: 0, animated: false})
+            }}
+            onEscape={control.close}
+          />
+        </View>
+      </View>
+    )
+  }, [
+    t.atoms.border_contrast_low,
+    t.atoms.bg,
+    t.atoms.text_contrast_high,
+    t.palette.contrast_500,
+    _,
+    title,
+    searchText,
+    control,
+  ])
+
+  return (
+    <Dialog.InnerFlatList
+      ref={listRef}
+      data={items}
+      renderItem={renderItems}
+      ListHeaderComponent={listHeader}
+      stickyHeaderIndices={[0]}
+      keyExtractor={(item: Item) => item.key}
+      style={[
+        web([a.py_0, {height: '100vh', maxHeight: 600}, a.px_0]),
+        native({
+          height: '100%',
+          paddingHorizontal: 0,
+          marginTop: 0,
+          paddingTop: 0,
+          borderTopLeftRadius: 40,
+          borderTopRightRadius: 40,
+        }),
+      ]}
+      webInnerStyle={[a.py_0, {maxWidth: 500, minWidth: 200}]}
+      keyboardDismissMode="on-drag"
+    />
   )
 }
 
@@ -163,11 +395,13 @@ function ProfileCard({
           />
           <View style={[a.flex_1, a.gap_2xs]}>
             <Text
-              style={[t.atoms.text, a.font_bold, a.leading_snug]}
+              style={[t.atoms.text, a.font_bold, a.leading_tight]}
               numberOfLines={1}>
               {displayName}
             </Text>
-            <Text style={t.atoms.text_contrast_high} numberOfLines={2}>
+            <Text
+              style={[a.leading_tight, t.atoms.text_contrast_high]}
+              numberOfLines={2}>
               {!enabled ? <Trans>{handle} can't be messaged</Trans> : handle}
             </Text>
           </View>
@@ -293,217 +527,3 @@ function SearchInput({
     </View>
   )
 }
-
-function SearchablePeopleList({
-  onCreateChat,
-}: {
-  onCreateChat: (did: string) => void
-}) {
-  const t = useTheme()
-  const {_} = useLingui()
-  const moderationOpts = useModerationOpts()
-  const control = Dialog.useDialogContext()
-  const listRef = useRef<BottomSheetFlatListMethods>(null)
-  const {currentAccount} = useSession()
-  const inputRef = useRef<TextInputType>(null)
-
-  const [searchText, setSearchText] = useState('')
-
-  const {
-    data: results,
-    isError,
-    isFetching,
-  } = useActorAutocompleteQuery(searchText, true, 12)
-  const {data: follows} = useProfileFollowsQuery(currentAccount?.did)
-
-  const items = useMemo(() => {
-    let _items: Item[] = []
-
-    if (isError) {
-      _items.push({
-        type: 'empty',
-        key: 'empty',
-        message: _(msg`We're having network issues, try again`),
-      })
-    } else if (searchText.length) {
-      if (results?.length) {
-        for (const profile of results) {
-          if (profile.did === currentAccount?.did) continue
-          _items.push({
-            type: 'profile',
-            key: profile.did,
-            enabled: canBeMessaged(profile),
-            profile,
-          })
-        }
-
-        _items = _items.sort(a => {
-          // @ts-ignore
-          return a.enabled ? -1 : 1
-        })
-      }
-    } else {
-      if (follows) {
-        for (const page of follows.pages) {
-          for (const profile of page.follows) {
-            _items.push({
-              type: 'profile',
-              key: profile.did,
-              enabled: canBeMessaged(profile),
-              profile,
-            })
-          }
-        }
-
-        _items = _items.sort(a => {
-          // @ts-ignore
-          return a.enabled ? -1 : 1
-        })
-      } else {
-        Array(10)
-          .fill(0)
-          .forEach((_, i) => {
-            _items.push({
-              type: 'placeholder',
-              key: i + '',
-            })
-          })
-      }
-    }
-
-    return _items
-  }, [_, searchText, results, isError, currentAccount?.did, follows])
-
-  if (searchText && !isFetching && !items.length && !isError) {
-    items.push({type: 'empty', key: 'empty', message: _(msg`No results`)})
-  }
-
-  const renderItems = useCallback(
-    ({item}: {item: Item}) => {
-      switch (item.type) {
-        case 'profile': {
-          return (
-            <ProfileCard
-              key={item.key}
-              enabled={item.enabled}
-              profile={item.profile}
-              moderationOpts={moderationOpts!}
-              onPress={onCreateChat}
-            />
-          )
-        }
-        case 'placeholder': {
-          return <ProfileCardSkeleton key={item.key} />
-        }
-        case 'empty': {
-          return <Empty key={item.key} message={item.message} />
-        }
-        default:
-          return null
-      }
-    },
-    [moderationOpts, onCreateChat],
-  )
-
-  useLayoutEffect(() => {
-    if (isWeb) {
-      setImmediate(() => {
-        inputRef?.current?.focus()
-      })
-    }
-  }, [])
-
-  const listHeader = useMemo(() => {
-    return (
-      <View
-        style={[
-          a.relative,
-          a.pt_md,
-          a.pb_xs,
-          a.px_lg,
-          a.border_b,
-          t.atoms.border_contrast_low,
-          t.atoms.bg,
-          native([a.pt_lg]),
-        ]}>
-        <View
-          style={[
-            a.relative,
-            native(a.align_center),
-            a.justify_center,
-            {height: 32},
-          ]}>
-          <Button
-            label={_(msg`Close`)}
-            size="small"
-            shape="round"
-            variant="ghost"
-            color="secondary"
-            style={[
-              a.absolute,
-              a.z_20,
-              native({
-                left: -7,
-              }),
-              web({
-                right: -4,
-              }),
-            ]}
-            onPress={() => control.close()}>
-            {isWeb ? (
-              <X size="md" fill={t.palette.contrast_500} />
-            ) : (
-              <ChevronLeft size="md" fill={t.palette.contrast_500} />
-            )}
-          </Button>
-          <Text
-            style={[
-              a.z_10,
-              a.text_lg,
-              a.font_bold,
-              a.leading_tight,
-              t.atoms.text_contrast_high,
-            ]}>
-            <Trans>Start a new chat</Trans>
-          </Text>
-        </View>
-
-        <View style={[native([a.pt_sm]), web([a.pt_xs])]}>
-          <SearchInput
-            inputRef={inputRef}
-            value={searchText}
-            onChangeText={text => {
-              setSearchText(text)
-              listRef.current?.scrollToOffset({offset: 0, animated: false})
-            }}
-            onEscape={control.close}
-          />
-        </View>
-      </View>
-    )
-  }, [t, _, control, searchText])
-
-  return (
-    <Dialog.InnerFlatList
-      ref={listRef}
-      data={items}
-      renderItem={renderItems}
-      ListHeaderComponent={listHeader}
-      stickyHeaderIndices={[0]}
-      keyExtractor={(item: Item) => item.key}
-      style={[
-        web([a.py_0, {height: '100vh', maxHeight: 600}, a.px_0]),
-        native({
-          height: '100%',
-          paddingHorizontal: 0,
-          marginTop: 0,
-          paddingTop: 0,
-          borderTopLeftRadius: 40,
-          borderTopRightRadius: 40,
-        }),
-      ]}
-      webInnerStyle={[a.py_0, {maxWidth: 500, minWidth: 200}]}
-      keyboardDismissMode="on-drag"
-    />
-  )
-}

src/components/dms/dialogs/ShareViaChatDialog.tsx

@@ -0,0 +1,64 @@
+import React, {useCallback} from 'react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
+import {logEvent} from 'lib/statsig/statsig'
+import * as Toast from '#/view/com/util/Toast'
+import * as Dialog from '#/components/Dialog'
+import {SearchablePeopleList} from './SearchablePeopleList'
+
+export function SendViaChatDialog({
+  control,
+  onSelectChat,
+}: {
+  control: Dialog.DialogControlProps
+  onSelectChat: (chatId: string) => void
+}) {
+  return (
+    <Dialog.Outer
+      control={control}
+      testID="sendViaChatChatDialog"
+      nativeOptions={{sheet: {snapPoints: ['100%']}}}>
+      <SendViaChatDialogInner control={control} onSelectChat={onSelectChat} />
+    </Dialog.Outer>
+  )
+}
+
+function SendViaChatDialogInner({
+  control,
+  onSelectChat,
+}: {
+  control: Dialog.DialogControlProps
+  onSelectChat: (chatId: string) => void
+}) {
+  const {_} = useLingui()
+  const {mutate: createChat} = useGetConvoForMembers({
+    onSuccess: data => {
+      onSelectChat(data.convo.id)
+
+      if (!data.convo.lastMessage) {
+        logEvent('chat:create', {logContext: 'SendViaChatDialog'})
+      }
+      logEvent('chat:open', {logContext: 'SendViaChatDialog'})
+    },
+    onError: error => {
+      Toast.show(error.message)
+    },
+  })
+
+  const onCreateChat = useCallback(
+    (did: string) => {
+      control.close(() => createChat([did]))
+    },
+    [control, createChat],
+  )
+
+  return (
+    <SearchablePeopleList
+      title={_(msg`Send post to...`)}
+      onSelectChat={onCreateChat}
+      showRecentConvos
+    />
+  )
+}