format

* add alt text dialog

* multiline alt text input

* add pressable alt text badge

* rename `ALT: ` to `Alt text: ` to avoid including old bad ones

* reuse alt text reminder

* reuse alt text reminder in gallery

* add alt text reminder in the dialog itself

* autofocus text input

* reorder components to fix tab order

* fix close btn position

.env.example

@@ -4,3 +4,5 @@ SENTRY_AUTH_TOKEN=
 EXPO_PUBLIC_ENV=development
 EXPO_PUBLIC_LOG_LEVEL=debug
 EXPO_PUBLIC_LOG_DEBUG=
+EXPO_PUBLIC_BUNDLE_IDENTIFIER=
+EXPO_PUBLIC_BUNDLE_DATE=0

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

@@ -1,9 +1,9 @@
 name: build-and-push-bskyweb-aws
 on:
+  workflow_dispatch:
   push:
     branches:
       - main
-      - 3p-moderators
 
 env:
   REGISTRY: ${{ secrets.AWS_ECR_REGISTRY_USEAST2_PACKAGES_REGISTRY }}
@@ -54,3 +54,6 @@ jobs:
           labels: ${{ steps.meta.outputs.labels }}
           cache-from: type=gha
           cache-to: type=gha,mode=max
+        env:
+          EXPO_PUBLIC_BUNDLE_IDENTIFIER: $(git rev-parse --short HEAD)
+          EXPO_PUBLIC_BUNDLE_DATE: $(date -u +"%y%m%d%H")

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

@@ -57,6 +57,8 @@ jobs:
         run: |
           export json='${{ secrets.GOOGLE_SERVICES_TOKEN }}'
           echo "${{ secrets.ENV_TOKEN }}" > .env
+          echo "EXPO_PUBLIC_BUNDLE_IDENTIFIER=$(git rev-parse --short HEAD)" >> .env
+          echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env
           echo "$json" > google-services.json
 
       - name: 🏗️ EAS Build

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

@@ -65,6 +65,8 @@ jobs:
       - name: ✏️ Write environment variables
         run: |
           echo "${{ secrets.ENV_TOKEN }}" > .env
+          echo "EXPO_PUBLIC_BUNDLE_IDENTIFIER=$(git rev-parse --short HEAD)" >> .env
+          echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env
           echo "${{ secrets.GOOGLE_SERVICES_TOKEN }}" > google-services.json
 
       - name: 🏗️ EAS Build

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

@@ -144,6 +144,8 @@ jobs:
         run: |
           export json='${{ secrets.GOOGLE_SERVICES_TOKEN }}'
           echo "${{ secrets.ENV_TOKEN }}" > .env
+          echo "EXPO_PUBLIC_BUNDLE_IDENTIFIER=$(git rev-parse --short HEAD)" >> .env
+          echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env
           echo "$json" > google-services.json
 
       - name: 🏗️ Create Bundle
@@ -222,6 +224,8 @@ jobs:
       - name: ✏️ Write environment variables
         run: |
           echo "${{ secrets.ENV_TOKEN }}" > .env
+          echo "EXPO_PUBLIC_BUNDLE_IDENTIFIER=$(git rev-parse --short HEAD)" >> .env
+          echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env
           echo "${{ secrets.GOOGLE_SERVICES_TOKEN }}" > google-services.json
 
       - name: 🏗️ EAS Build
@@ -283,6 +287,8 @@ jobs:
         run: |
           export json='${{ secrets.GOOGLE_SERVICES_TOKEN }}'
           echo "${{ secrets.ENV_TOKEN }}" > .env
+          echo "EXPO_PUBLIC_BUNDLE_IDENTIFIER=$(git rev-parse --short HEAD)" >> .env
+          echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env
           echo "$json" > google-services.json
 
       - name: 🏗️ EAS Build

.github/workflows/golang-test-lint.yml

@@ -20,8 +20,8 @@ jobs:
         uses: actions/setup-go@v3
         with:
           go-version: '1.21'
-      - name: Dummy JS File
-        run: touch bskyweb/static/js/blah.js
+      - name: Dummy Static Files
+        run: touch bskyweb/static/js/blah.js && touch bskyweb/static/media/blah.txt
       - name: Check
         run: cd bskyweb/ && make check
       - name: Build (binary)
@@ -37,7 +37,7 @@ jobs:
         uses: actions/setup-go@v3
         with:
           go-version: '1.21'
-      - name: Dummy JS File
-        run: touch bskyweb/static/js/blah.js
+      - name: Dummy Static Files
+        run: touch bskyweb/static/js/blah.js && touch bskyweb/static/media/blah.txt
       - name: Lint
         run: cd bskyweb/ &&  make lint

Dockerfile.embedr

@@ -40,6 +40,7 @@ RUN find ./bskyweb/embedr-static && find ./bskyweb/embedr-templates && find ./bs
 
 # hack around issue with empty directory and go:embed
 RUN touch bskyweb/static/js/empty.txt
+RUN touch bskyweb/static/media/empty.txt
 
 #
 # Generate the embedr Go binary.

__e2e__/tests/composer.test.ts

@@ -1,8 +1,9 @@
 /* eslint-env detox/detox */
 
-import {describe, beforeAll, it} from '@jest/globals'
+import {beforeAll, describe, it} from '@jest/globals'
 import {expect} from 'detox'
-import {openApp, loginAsAlice, createServer, sleep} from '../util'
+
+import {createServer, loginAsAlice, openApp, sleep} from '../util'
 
 describe('Composer', () => {
   beforeAll(async () => {
@@ -41,7 +42,6 @@ describe('Composer', () => {
     await element(by.id('composerTextInput')).typeText(
       'Post with a https://example.com link card',
     )
-    await element(by.id('addLinkCardBtn')).tap()
     await element(by.id('composerPublishBtn')).tap()
     await expect(element(by.id('composeFAB'))).toBeVisible()
   })
@@ -72,7 +72,6 @@ describe('Composer', () => {
     await element(by.id('composerTextInput')).typeText(
       'Reply with a https://example.com link card',
     )
-    await element(by.id('addLinkCardBtn')).tap()
     await element(by.id('composerPublishBtn')).tap()
     await expect(element(by.id('composeFAB'))).toBeVisible()
   })
@@ -104,7 +103,6 @@ describe('Composer', () => {
     await element(by.id('composerTextInput')).typeText(
       'QP with a https://example.com link card',
     )
-    await element(by.id('addLinkCardBtn')).tap()
     await element(by.id('composerPublishBtn')).tap()
     await expect(element(by.id('composeFAB'))).toBeVisible()
   })

__e2e__/tests/curate-lists.test.ts

@@ -1,8 +1,9 @@
 /* eslint-env detox/detox */
 
-import {describe, beforeAll, it} from '@jest/globals'
+import {beforeAll, describe, it} from '@jest/globals'
 import {expect} from 'detox'
-import {openApp, loginAsAlice, loginAsBob, createServer, sleep} from '../util'
+
+import {createServer, loginAsAlice, loginAsBob, openApp, sleep} from '../util'
 
 describe('Curate lists', () => {
   beforeAll(async () => {
@@ -115,6 +116,7 @@ describe('Curate lists', () => {
     await element(by.text('About')).tap()
     await element(by.id('addUserBtn')).tap()
     await expect(element(by.id('listAddUserModal'))).toBeVisible()
+    await element(by.id('searchInput')).typeText('b')
     await waitFor(element(by.id('user-bob.test-addBtn')))
       .toBeVisible()
       .withTimeout(5000)

__tests__/lib/images.test.ts

@@ -1,9 +1,10 @@
+import ImageResizer from '@bam.tech/react-native-image-resizer'
+import RNFetchBlob from 'rn-fetch-blob'
+
 import {
   downloadAndResize,
   DownloadAndResizeOpts,
 } from '../../src/lib/media/manip'
-import ImageResizer from '@bam.tech/react-native-image-resizer'
-import RNFetchBlob from 'rn-fetch-blob'
 
 describe('downloadAndResize', () => {
   const errorSpy = jest.spyOn(global.console, 'error')
@@ -30,6 +31,7 @@ describe('downloadAndResize', () => {
     const mockedFetch = RNFetchBlob.fetch as jest.Mock
     mockedFetch.mockResolvedValueOnce({
       path: jest.fn().mockReturnValue('file://downloaded-image.jpg'),
+      info: jest.fn().mockReturnValue({status: 200}),
       flush: jest.fn(),
     })
 
@@ -84,6 +86,7 @@ describe('downloadAndResize', () => {
     const mockedFetch = RNFetchBlob.fetch as jest.Mock
     mockedFetch.mockResolvedValueOnce({
       path: jest.fn().mockReturnValue('file://downloaded-image'),
+      info: jest.fn().mockReturnValue({status: 200}),
       flush: jest.fn(),
     })
 
@@ -118,4 +121,26 @@ describe('downloadAndResize', () => {
       {mode: 'cover'},
     )
   })
+
+  it('should return undefined for non-200 response', async () => {
+    const mockedFetch = RNFetchBlob.fetch as jest.Mock
+    mockedFetch.mockResolvedValueOnce({
+      path: jest.fn().mockReturnValue('file://downloaded-image'),
+      info: jest.fn().mockReturnValue({status: 400}),
+      flush: jest.fn(),
+    })
+
+    const opts: DownloadAndResizeOpts = {
+      uri: 'https://example.com/image',
+      width: 100,
+      height: 100,
+      maxSize: 500000,
+      mode: 'cover',
+      timeout: 10000,
+    }
+
+    const result = await downloadAndResize(opts)
+    expect(errorSpy).not.toHaveBeenCalled()
+    expect(result).toBeUndefined()
+  })
 })

__tests__/lib/string.test.ts

@@ -396,6 +396,7 @@ describe('parseEmbedPlayerFromUrl', () => {
     'https://youtube.com/watch?v=videoId&feature=share',
     'https://youtube.com/shorts/videoId',
     'https://m.youtube.com/watch?v=videoId',
+    'https://music.youtube.com/watch?v=videoId',
 
     'https://youtube.com/shorts/',
     'https://youtube.com/',
@@ -459,6 +460,12 @@ describe('parseEmbedPlayerFromUrl', () => {
     'https://tenor.com/view',
     'https://tenor.com/view/gifId.gif',
     'https://tenor.com/intl/view/gifId.gif',
+
+    'https://media.tenor.com/someID_AAAAC/someName.gif?hh=100&ww=100',
+    'https://media.tenor.com/someID_AAAAC/someName.gif',
+    'https://media.tenor.com/someID/someName.gif',
+    'https://media.tenor.com/someID',
+    'https://media.tenor.com',
   ]
 
   const outputs = [
@@ -498,6 +505,11 @@ describe('parseEmbedPlayerFromUrl', () => {
       source: 'youtube',
       playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
     },
+    {
+      type: 'youtube_video',
+      source: 'youtube',
+      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
+    },
 
     undefined,
     undefined,
@@ -628,137 +640,129 @@ describe('parseEmbedPlayerFromUrl', () => {
     },
     undefined,
     undefined,
-
     {
       type: 'giphy_gif',
       source: 'giphy',
       isGif: true,
       hideDetails: true,
       metaUri: 'https://giphy.com/gifs/39248209509382934029',
-      playerUri: 'https://i.giphy.com/media/39248209509382934029/200.mp4',
+      playerUri: 'https://i.giphy.com/media/39248209509382934029/200.webp',
+    },
+    {
+      type: 'giphy_gif',
+      source: 'giphy',
+      isGif: true,
+      hideDetails: true,
+      metaUri: 'https://giphy.com/gifs/gifId',
+      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
+    },
+    {
+      type: 'giphy_gif',
+      source: 'giphy',
+      isGif: true,
+      hideDetails: true,
+      metaUri: 'https://giphy.com/gifs/gifId',
+      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
+    },
+    {
+      type: 'giphy_gif',
+      source: 'giphy',
+      isGif: true,
+      hideDetails: true,
+      metaUri: 'https://giphy.com/gifs/gifId',
+      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
+    },
+    {
+      type: 'giphy_gif',
+      source: 'giphy',
+      isGif: true,
+      hideDetails: true,
+      metaUri: 'https://giphy.com/gifs/gifId',
+      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
+    },
+    {
+      type: 'giphy_gif',
+      source: 'giphy',
+      isGif: true,
+      hideDetails: true,
+      metaUri: 'https://giphy.com/gifs/gifId',
+      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
+    },
+    {
+      type: 'giphy_gif',
+      source: 'giphy',
+      isGif: true,
+      hideDetails: true,
+      metaUri: 'https://giphy.com/gifs/gifId',
+      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
+    },
+    undefined,
+    undefined,
+    undefined,
+
+    {
+      type: 'giphy_gif',
+      source: 'giphy',
+      isGif: true,
+      hideDetails: true,
+      metaUri: 'https://giphy.com/gifs/gifId',
+      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
+    },
+
+    {
+      type: 'giphy_gif',
+      source: 'giphy',
+      isGif: true,
+      hideDetails: true,
+      metaUri: 'https://giphy.com/gifs/gifId',
+      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
+    },
+    {
+      type: 'giphy_gif',
+      source: 'giphy',
+      isGif: true,
+      hideDetails: true,
+      metaUri: 'https://giphy.com/gifs/gifId',
+      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
+    },
+    {
+      type: 'giphy_gif',
+      source: 'giphy',
+      isGif: true,
+      hideDetails: true,
+      metaUri: 'https://giphy.com/gifs/gifId',
+      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
+    },
+    {
+      type: 'giphy_gif',
+      source: 'giphy',
+      isGif: true,
+      hideDetails: true,
+      metaUri: 'https://giphy.com/gifs/gifId',
+      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
+    },
+
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+    undefined,
+
+    {
+      type: 'tenor_gif',
+      source: 'tenor',
+      isGif: true,
+      hideDetails: true,
+      playerUri: 'https://t.gifs.bsky.app/someID_AAAAM/someName.gif',
       dimensions: {
         width: 100,
         height: 100,
       },
     },
-
-    {
-      type: 'giphy_gif',
-      source: 'giphy',
-      isGif: true,
-      hideDetails: true,
-      metaUri: 'https://giphy.com/gifs/gifId',
-      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
-    },
-    {
-      type: 'giphy_gif',
-      source: 'giphy',
-      isGif: true,
-      hideDetails: true,
-      metaUri: 'https://giphy.com/gifs/gifId',
-      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
-    },
-    {
-      type: 'giphy_gif',
-      source: 'giphy',
-      isGif: true,
-      hideDetails: true,
-      metaUri: 'https://giphy.com/gifs/gifId',
-      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
-    },
-    {
-      type: 'giphy_gif',
-      source: 'giphy',
-      isGif: true,
-      hideDetails: true,
-      metaUri: 'https://giphy.com/gifs/gifId',
-      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
-    },
-    {
-      type: 'giphy_gif',
-      source: 'giphy',
-      isGif: true,
-      hideDetails: true,
-      metaUri: 'https://giphy.com/gifs/gifId',
-      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
-    },
-    {
-      type: 'giphy_gif',
-      source: 'giphy',
-      isGif: true,
-      hideDetails: true,
-      metaUri: 'https://giphy.com/gifs/gifId',
-      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
-    },
     undefined,
     undefined,
     undefined,
-
-    {
-      type: 'giphy_gif',
-      source: 'giphy',
-      isGif: true,
-      hideDetails: true,
-      metaUri: 'https://giphy.com/gifs/gifId',
-      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
-    },
-
-    {
-      type: 'giphy_gif',
-      source: 'giphy',
-      isGif: true,
-      hideDetails: true,
-      metaUri: 'https://giphy.com/gifs/gifId',
-      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
-    },
-    {
-      type: 'giphy_gif',
-      source: 'giphy',
-      isGif: true,
-      hideDetails: true,
-      metaUri: 'https://giphy.com/gifs/gifId',
-      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
-    },
-    {
-      type: 'giphy_gif',
-      source: 'giphy',
-      isGif: true,
-      hideDetails: true,
-      metaUri: 'https://giphy.com/gifs/gifId',
-      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
-    },
-    {
-      type: 'giphy_gif',
-      source: 'giphy',
-      isGif: true,
-      hideDetails: true,
-      metaUri: 'https://giphy.com/gifs/gifId',
-      playerUri: 'https://i.giphy.com/media/gifId/200.webp',
-    },
-
-    {
-      type: 'tenor_gif',
-      source: 'tenor',
-      isGif: true,
-      hideDetails: true,
-      playerUri: 'https://tenor.com/view/gifId.gif',
-    },
     undefined,
-    undefined,
-    {
-      type: 'tenor_gif',
-      source: 'tenor',
-      isGif: true,
-      hideDetails: true,
-      playerUri: 'https://tenor.com/view/gifId.gif',
-    },
-    {
-      type: 'tenor_gif',
-      source: 'tenor',
-      isGif: true,
-      hideDetails: true,
-      playerUri: 'https://tenor.com/intl/view/gifId.gif',
-    },
   ]
 
   it('correctly grabs the correct id from uri', () => {

__tests__/lib/strings/url-helpers.test.ts

@@ -1,10 +1,10 @@
-import {it, describe, expect} from '@jest/globals'
+import {describe, expect, it} from '@jest/globals'
 
 import {
-  linkRequiresWarning,
   isPossiblyAUrl,
-  splitApexDomain,
   isTrustedUrl,
+  linkRequiresWarning,
+  splitApexDomain,
 } from '../../../src/lib/strings/url-helpers'
 
 describe('linkRequiresWarning', () => {
@@ -170,6 +170,7 @@ describe('isTrustedUrl', () => {
     ['https://google.com', false],
     ['https://docs.google.com', false],
     ['https://google.com/#', false],
+    ['https://blueskywebxzendesk.com', false],
   ]
 
   it.each(cases)('given input uri %p, returns %p', (str, expected) => {

app.config.js

@@ -64,6 +64,8 @@ module.exports = function (config) {
       icon: './assets/icon.png',
       userInterfaceStyle: 'automatic',
       splash: SPLASH_CONFIG,
+      // hsl(211, 99%, 53%), same as palette.default.brandText
+      primaryColor: '#1083fe',
       ios: {
         supportsTablet: false,
         bundleIdentifier: 'xyz.blueskyweb.app',
@@ -180,6 +182,7 @@ module.exports = function (config) {
         './plugins/withAndroidManifestPlugin.js',
         './plugins/withAndroidManifestFCMIconPlugin.js',
         './plugins/withAndroidStylesWindowBackgroundPlugin.js',
+        './plugins/withAndroidStylesAccentColorPlugin.js',
         './plugins/withAndroidSplashScreenStatusBarTranslucentPlugin.js',
         './plugins/shareExtension/withShareExtensions.js',
       ].filter(Boolean),

assets/icons/arrowBoxLeft_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="M3.293 3.293A1 1 0 0 1 4 3h7.25a1 1 0 1 1 0 2H5v14h6.25a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1V4a1 1 0 0 1 .293-.707Zm11.5 3.5a1 1 0 0 1 1.414 0l4.5 4.5a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414-1.414L17.586 13H8.75a1 1 0 1 1 0-2h8.836l-2.793-2.793a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>

assets/icons/envelope_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="M12 11.708 2.654 4.06A.998.998 0 0 1 3 4h18c.122 0 .238.022.346.061L12 11.708ZM2 19V6.11l9.367 7.664a1 1 0 0 0 1.266 0L22 6.11V19a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>

assets/icons/paperPlane_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="M3.374 3.22a1 1 0 0 1 1.073-.114l16 8a1 1 0 0 1 0 1.788l-16 8a1 1 0 0 1-1.417-1.136L4.97 12 3.03 4.243a1 1 0 0 1 .344-1.023ZM6.781 13l-1.284 5.133L17.764 12 5.497 5.867 6.781 11H9a1 1 0 1 1 0 2H6.78Z" clip-rule="evenodd"/></svg>

assets/icons/plusSmall_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 6a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2h-4v4a1 1 0 1 1-2 0v-4H7a1 1 0 1 1 0-2h4V7a1 1 0 0 1 1-1Z" clip-rule="evenodd"/></svg>

assets/icons/settingsSliderVertical_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 1v1.126a4 4 0 0 1 0 7.748V20a1 1 0 1 1-2 0v-7.126a4 4 0 0 1 0-7.748V4a1 1 0 0 1 1-1Zm10 0a1 1 0 0 1 1 1v9.126a4 4 0 1 1-2 0V4a1 1 0 0 1 1-1ZM7 7a2 2 0 1 0 0 4 2 2 0 1 0 0-4Zm10 8a2 2 0 1 0 0 4 2 2 0 1 0 0-4Z" clip-rule="evenodd"/></svg>

bskyweb/.gitignore

@@ -10,6 +10,8 @@ static/js/*.js
 static/js/*.map
 static/js/*.js.LICENSE.txt
 static/js/empty.txt
+static/media/*.png
+static/media/empty.txt
 templates/scripts.html
 templates/*-embed.html
 static/embed/*.html

bskyweb/cmd/bskyweb/server.go

@@ -158,7 +158,7 @@ func serve(cctx *cli.Context) error {
 
 			// Cache javascript and images files for 1 week, which works because
 			// they're always versioned (e.g. /static/js/main.64c14927.js)
-			if strings.HasPrefix(path, "/static/js/") || strings.HasPrefix(path, "/static/images/") {
+			if strings.HasPrefix(path, "/static/js/") || strings.HasPrefix(path, "/static/images/") || strings.HasPrefix(path, "/static/media/") {
 				maxAge = 7 * (60 * 60 * 24) // 1 week
 			}
 
@@ -200,6 +200,8 @@ func serve(cctx *cli.Context) error {
 	e.GET("/support/community-guidelines", server.WebGeneric)
 	e.GET("/support/copyright", server.WebGeneric)
 	e.GET("/intent/compose", server.WebGeneric)
+	e.GET("/messages", server.WebGeneric)
+	e.GET("/messages/:conversation", server.WebGeneric)
 
 	// profile endpoints; only first populates info
 	e.GET("/profile/:handleOrDID", server.WebProfile)

bskyweb/cmd/embedr/handlers.go

@@ -122,14 +122,20 @@ func (srv *Server) WebOEmbed(c echo.Context) error {
 	}
 
 	// TODO: do we actually do something with width?
-	width := 550
+	width := 600
 	maxWidthParam := c.QueryParam("maxwidth")
 	if maxWidthParam != "" {
 		maxWidthInt, err := strconv.Atoi(maxWidthParam)
-		if err != nil || maxWidthInt < 220 || maxWidthInt > 550 {
-			return c.String(http.StatusBadRequest, "Invalid maxwidth (expected integer between 220 and 550)")
+		if err != nil {
+			return c.String(http.StatusBadRequest, "Invalid maxwidth (expected integer)")
+		}
+		if maxWidthInt < 220 {
+			width = 220
+		} else if maxWidthInt > 600 {
+			width = 600
+		} else {
+			width = maxWidthInt
 		}
-		width = maxWidthInt
 	}
 	// NOTE: maxheight ignored
 

modules/expo-bluesky-gif-view/android/build.gradle

@@ -0,0 +1,98 @@
+apply plugin: 'com.android.library'
+apply plugin: 'kotlin-android'
+apply plugin: 'maven-publish'
+
+group = 'expo.modules.blueskygifview'
+version = '0.5.0'
+
+buildscript {
+  def expoModulesCorePlugin = new File(project(":expo-modules-core").projectDir.absolutePath, "ExpoModulesCorePlugin.gradle")
+  if (expoModulesCorePlugin.exists()) {
+    apply from: expoModulesCorePlugin
+    applyKotlinExpoModulesCorePlugin()
+  }
+
+  // Simple helper that allows the root project to override versions declared by this library.
+  ext.safeExtGet = { prop, fallback ->
+    rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
+  }
+
+  // Ensures backward compatibility
+  ext.getKotlinVersion = {
+    if (ext.has("kotlinVersion")) {
+      ext.kotlinVersion()
+    } else {
+      ext.safeExtGet("kotlinVersion", "1.8.10")
+    }
+  }
+
+  repositories {
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:${getKotlinVersion()}")
+  }
+}
+
+afterEvaluate {
+  publishing {
+    publications {
+      release(MavenPublication) {
+        from components.release
+      }
+    }
+    repositories {
+      maven {
+        url = mavenLocal().url
+      }
+    }
+  }
+}
+
+android {
+  compileSdkVersion safeExtGet("compileSdkVersion", 33)
+
+  def agpVersion = com.android.Version.ANDROID_GRADLE_PLUGIN_VERSION
+  if (agpVersion.tokenize('.')[0].toInteger() < 8) {
+    compileOptions {
+      sourceCompatibility JavaVersion.VERSION_11
+      targetCompatibility JavaVersion.VERSION_11
+    }
+
+    kotlinOptions {
+      jvmTarget = JavaVersion.VERSION_11.majorVersion
+    }
+  }
+
+  namespace "expo.modules.blueskygifview"
+  defaultConfig {
+    minSdkVersion safeExtGet("minSdkVersion", 21)
+    targetSdkVersion safeExtGet("targetSdkVersion", 34)
+    versionCode 1
+    versionName "0.5.0"
+  }
+  lintOptions {
+    abortOnError false
+  }
+  publishing {
+    singleVariant("release") {
+      withSourcesJar()
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+}
+
+dependencies {
+  implementation 'androidx.appcompat:appcompat:1.6.1'
+    def GLIDE_VERSION = "4.13.2"
+
+  implementation project(':expo-modules-core')
+  implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:${getKotlinVersion()}"
+
+  // Keep glide version up to date with expo-image so that we don't have duplicate deps
+  implementation 'com.github.bumptech.glide:glide:4.13.2'
+}

modules/expo-bluesky-gif-view/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest>
+</manifest>

modules/expo-bluesky-gif-view/android/src/main/java/expo/modules/blueskygifview/AppCompatImageViewExtended.kt

@@ -0,0 +1,37 @@
+package expo.modules.blueskygifview
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.drawable.Animatable
+import androidx.appcompat.widget.AppCompatImageView
+
+class AppCompatImageViewExtended(context: Context, private val parent: GifView): AppCompatImageView(context) {
+  override fun onDraw(canvas: Canvas) {
+    super.onDraw(canvas)
+
+    if (this.drawable is Animatable) {
+      if (!parent.isLoaded) {
+        parent.isLoaded = true
+        parent.firePlayerStateChange()
+      }
+
+      if (!parent.isPlaying) {
+        this.pause()
+      }
+    }
+  }
+
+  fun pause() {
+    val drawable = this.drawable
+    if (drawable is Animatable) {
+      drawable.stop()
+    }
+  }
+
+  fun play() {
+    val drawable = this.drawable
+    if (drawable is Animatable) {
+      drawable.start()
+    }
+  }
+}

modules/expo-bluesky-gif-view/android/src/main/java/expo/modules/blueskygifview/ExpoBlueskyGifViewModule.kt

@@ -0,0 +1,54 @@
+package expo.modules.blueskygifview
+
+import com.bumptech.glide.Glide
+import com.bumptech.glide.load.engine.DiskCacheStrategy
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class ExpoBlueskyGifViewModule : Module() {
+  override fun definition() = ModuleDefinition {
+    Name("ExpoBlueskyGifView")
+
+    AsyncFunction("prefetchAsync") { sources: List<String> ->
+      val activity = appContext.currentActivity ?: return@AsyncFunction
+      val glide = Glide.with(activity)
+
+      sources.forEach { source ->
+        glide
+          .download(source)
+          .diskCacheStrategy(DiskCacheStrategy.DATA)
+          .submit()
+      }
+    }
+
+    View(GifView::class) {
+      Events(
+        "onPlayerStateChange"
+      )
+
+      Prop("source") { view: GifView, source: String ->
+        view.source = source
+      }
+
+      Prop("placeholderSource") { view: GifView, source: String ->
+        view.placeholderSource = source
+      }
+
+      Prop("autoplay") { view: GifView, autoplay: Boolean ->
+        view.autoplay = autoplay
+      }
+
+      AsyncFunction("playAsync") { view: GifView ->
+        view.play()
+      }
+
+      AsyncFunction("pauseAsync") { view: GifView ->
+        view.pause()
+      }
+
+      AsyncFunction("toggleAsync") { view: GifView ->
+        view.toggle()
+      }
+    }
+  }
+}

modules/expo-bluesky-gif-view/android/src/main/java/expo/modules/blueskygifview/GifView.kt

@@ -0,0 +1,180 @@
+package expo.modules.blueskygifview
+
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.drawable.Animatable
+import android.graphics.drawable.Drawable
+import com.bumptech.glide.Glide
+import com.bumptech.glide.load.engine.DiskCacheStrategy
+import com.bumptech.glide.load.engine.GlideException
+import com.bumptech.glide.request.RequestListener
+import com.bumptech.glide.request.target.Target
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.exception.Exceptions
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class GifView(context: Context, appContext: AppContext) : ExpoView(context, appContext) {
+  // Events
+  private val onPlayerStateChange by EventDispatcher()
+
+  // Glide
+  private val activity = appContext.currentActivity ?: throw Exceptions.MissingActivity()
+  private val glide = Glide.with(activity)
+  val imageView = AppCompatImageViewExtended(context, this)
+  var isPlaying = true
+  var isLoaded = false
+
+  // Requests
+  private var placeholderRequest: Target<Drawable>? = null
+  private var webpRequest: Target<Drawable>? = null
+
+  // Props
+  var placeholderSource: String? = null
+  var source: String? = null
+  var autoplay: Boolean = true
+    set(value) {
+      field = value
+
+      if (value) {
+        this.play()
+      } else {
+        this.pause()
+      }
+    }
+
+
+  //<editor-fold desc="Lifecycle">
+
+  init {
+    this.setBackgroundColor(Color.TRANSPARENT)
+
+    this.imageView.setBackgroundColor(Color.TRANSPARENT)
+    this.imageView.layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+
+    this.addView(this.imageView)
+  }
+
+  override fun onAttachedToWindow() {
+    if (this.imageView.drawable == null || this.imageView.drawable !is Animatable) {
+      this.load()
+    } else if (this.isPlaying) {
+      this.imageView.play()
+    }
+    super.onAttachedToWindow()
+  }
+
+  override fun onDetachedFromWindow() {
+    this.imageView.pause()
+    super.onDetachedFromWindow()
+  }
+
+  //</editor-fold>
+
+  //<editor-fold desc="Loading">
+
+  private fun load() {
+    if (placeholderSource == null || source == null) {
+      return
+    }
+
+    this.webpRequest = glide.load(source)
+      .diskCacheStrategy(DiskCacheStrategy.DATA)
+      .skipMemoryCache(false)
+      .listener(object: RequestListener<Drawable> {
+        override fun onResourceReady(
+          resource: Drawable?,
+          model: Any?,
+          target: Target<Drawable>?,
+          dataSource: com.bumptech.glide.load.DataSource?,
+          isFirstResource: Boolean
+        ): Boolean {
+          if (placeholderRequest != null) {
+            glide.clear(placeholderRequest)
+          }
+          return false
+        }
+
+        override fun onLoadFailed(
+          e: GlideException?,
+          model: Any?,
+          target: Target<Drawable>?,
+          isFirstResource: Boolean
+        ): Boolean {
+          return true
+        }
+      })
+      .into(this.imageView)
+
+    if (this.imageView.drawable == null || this.imageView.drawable !is Animatable) {
+      this.placeholderRequest = glide.load(placeholderSource)
+        .diskCacheStrategy(DiskCacheStrategy.DATA)
+        // Let's not bloat the memory cache with placeholders
+        .skipMemoryCache(true)
+        .listener(object: RequestListener<Drawable> {
+          override fun onResourceReady(
+            resource: Drawable?,
+            model: Any?,
+            target: Target<Drawable>?,
+            dataSource: com.bumptech.glide.load.DataSource?,
+            isFirstResource: Boolean
+          ): Boolean {
+            // Incase this request finishes after the webp, let's just not set
+            // the drawable. This shouldn't happen because the request should get cancelled
+            if (imageView.drawable == null) {
+              imageView.setImageDrawable(resource)
+            }
+            return true
+          }
+
+          override fun onLoadFailed(
+            e: GlideException?,
+            model: Any?,
+            target: Target<Drawable>?,
+            isFirstResource: Boolean
+          ): Boolean {
+            return true
+          }
+        })
+        .submit()
+    }
+  }
+
+  //</editor-fold>
+
+  //<editor-fold desc="Controls">
+
+  fun play() {
+    this.imageView.play()
+    this.isPlaying = true
+    this.firePlayerStateChange()
+  }
+
+  fun pause() {
+    this.imageView.pause()
+    this.isPlaying = false
+    this.firePlayerStateChange()
+  }
+
+  fun toggle() {
+    if (this.isPlaying) {
+      this.pause()
+    } else {
+      this.play()
+    }
+  }
+
+  //</editor-fold>
+
+  //<editor-fold desc="Util">
+
+  fun firePlayerStateChange() {
+    onPlayerStateChange(mapOf(
+      "isPlaying" to this.isPlaying,
+      "isLoaded" to this.isLoaded,
+    ))
+  }
+
+  //</editor-fold>
+}

modules/expo-bluesky-gif-view/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["ios", "android", "web"],
+  "ios": {
+    "modules": ["ExpoBlueskyGifViewModule"]
+  },
+  "android": {
+    "modules": ["expo.modules.blueskygifview.ExpoBlueskyGifViewModule"]
+  }
+}

modules/expo-bluesky-gif-view/index.ts

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

modules/expo-bluesky-gif-view/ios/ExpoBlueskyGifView.podspec

@@ -0,0 +1,23 @@
+Pod::Spec.new do |s|
+  s.name           = 'ExpoBlueskyGifView'
+  s.version        = '1.0.0'
+  s.summary        = 'A simple GIF player for Bluesky'
+  s.description    = 'A simple GIF player for Bluesky'
+  s.author         = ''
+  s.homepage       = 'https://github.com/bluesky-social/social-app'
+  s.platforms      = { :ios => '13.4', :tvos => '13.4' }
+  s.source         = { git: '' }
+  s.static_framework = true
+
+  s.dependency 'ExpoModulesCore'
+  s.dependency 'SDWebImage', '~> 5.17.0'
+  s.dependency 'SDWebImageWebPCoder', '~> 0.13.0'
+
+  # 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-gif-view/ios/ExpoBlueskyGifViewModule.swift

@@ -0,0 +1,47 @@
+import ExpoModulesCore
+import SDWebImage
+import SDWebImageWebPCoder
+
+public class ExpoBlueskyGifViewModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ExpoBlueskyGifView")
+    
+    OnCreate {
+      SDImageCodersManager.shared.addCoder(SDImageGIFCoder.shared)
+    }
+    
+    AsyncFunction("prefetchAsync") { (sources: [URL]) in
+      SDWebImagePrefetcher.shared.prefetchURLs(sources, context: Util.createContext(), progress: nil)
+    }
+
+    View(GifView.self) {
+      Events(
+        "onPlayerStateChange"
+      )
+      
+      Prop("source") { (view: GifView, prop: String) in
+        view.source = prop
+      }
+      
+      Prop("placeholderSource") { (view: GifView, prop: String) in
+        view.placeholderSource = prop
+      }
+      
+      Prop("autoplay") { (view: GifView, prop: Bool) in
+        view.autoplay = prop
+      }
+      
+      AsyncFunction("toggleAsync") { (view: GifView) in
+        view.toggle()
+      }
+      
+      AsyncFunction("playAsync") { (view: GifView) in
+        view.play()
+      }
+      
+      AsyncFunction("pauseAsync") { (view: GifView) in
+        view.pause()
+      }
+    }
+  }
+}

modules/expo-bluesky-gif-view/ios/GifView.swift

@@ -0,0 +1,185 @@
+import ExpoModulesCore
+import SDWebImage
+import SDWebImageWebPCoder
+
+typealias SDWebImageContext = [SDWebImageContextOption: Any]
+
+public class GifView: ExpoView, AVPlayerViewControllerDelegate {
+  // Events
+  private let onPlayerStateChange = EventDispatcher()
+
+  // SDWebImage
+  private let imageView = SDAnimatedImageView(frame: .zero)
+  private let imageManager = SDWebImageManager(
+    cache: SDImageCache.shared,
+    loader: SDImageLoadersManager.shared
+  )
+  private var isPlaying = true
+  private var isLoaded = false
+  
+  // Requests
+  private var webpOperation: SDWebImageCombinedOperation?
+  private var placeholderOperation: SDWebImageCombinedOperation?
+
+  // Props
+  var source: String? = nil
+  var placeholderSource: String? = nil
+  var autoplay = true {
+    didSet {
+      if !autoplay {
+        self.pause()
+      } else {
+        self.play()
+      }
+    }
+  }
+
+  // MARK: - Lifecycle
+
+  public required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+    self.clipsToBounds = true
+
+    self.imageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
+    self.imageView.layer.masksToBounds = false
+    self.imageView.backgroundColor = .clear
+    self.imageView.contentMode = .scaleToFill
+
+    // We have to explicitly set this to false. If we don't, every time
+    // the view comes into the viewport, it will start animating again
+    self.imageView.autoPlayAnimatedImage = false
+
+    self.addSubview(self.imageView)
+  }
+
+  public override func willMove(toWindow newWindow: UIWindow?) {
+    if newWindow == nil {
+      // Don't cancel the placeholder operation, because we really want that to complete for
+      // when we scroll back up
+      self.webpOperation?.cancel()
+      self.placeholderOperation?.cancel()
+    } else if self.imageView.image == nil {
+      self.load()
+    }
+  }
+
+  // MARK: - Loading
+
+  private func load() {
+    guard let source = self.source, let placeholderSource = self.placeholderSource else {
+      return
+    }
+
+    self.webpOperation?.cancel()
+    self.placeholderOperation?.cancel()
+
+    // We only need to start an operation for the placeholder if it doesn't exist
+    // in the cache already. Cache key is by default the absolute URL of the image.
+    // See:
+    // https://github.com/SDWebImage/SDWebImage/blob/master/Docs/HowToUse.md#using-asynchronous-image-caching-independently
+    if !SDImageCache.shared.diskImageDataExists(withKey: source),
+       let url = URL(string: placeholderSource)
+    {
+      self.placeholderOperation = imageManager.loadImage(
+        with: url,
+        options: [.retryFailed],
+        context: Util.createContext(),
+        progress: onProgress(_:_:_:),
+        completed: onLoaded(_:_:_:_:_:_:)
+      )
+    }
+
+    if let url = URL(string: source) {
+      self.webpOperation = imageManager.loadImage(
+        with: url,
+        options: [.retryFailed],
+        context: Util.createContext(),
+        progress: onProgress(_:_:_:),
+        completed: onLoaded(_:_:_:_:_:_:)
+      )
+    }
+  }
+
+  private func setImage(_ image: UIImage) {
+    if self.imageView.image == nil || image.sd_isAnimated {
+      self.imageView.image = image
+    }
+
+    if image.sd_isAnimated {
+      self.firePlayerStateChange()
+      if isPlaying {
+        self.imageView.startAnimating()
+      }
+    }
+  }
+
+  // MARK: - Loading blocks
+
+  private func onProgress(_ receivedSize: Int, _ expectedSize: Int, _ imageUrl: URL?) {}
+
+  private func onLoaded(
+    _ image: UIImage?,
+    _ data: Data?,
+    _ error: Error?,
+    _ cacheType: SDImageCacheType,
+    _ finished: Bool,
+    _ imageUrl: URL?
+  ) {
+    guard finished else {
+      return
+    }
+
+    if let placeholderSource = self.placeholderSource,
+       imageUrl?.absoluteString == placeholderSource,
+       self.imageView.image == nil,
+       let image = image
+    {
+      self.setImage(image)
+      return
+    }
+
+    if let source = self.source,
+       imageUrl?.absoluteString == source,
+       // UIImage perf suckssss if the image is animated
+       let data = data,
+       let animatedImage = SDAnimatedImage(data: data)
+    {
+      self.placeholderOperation?.cancel()
+      self.isPlaying = self.autoplay
+      self.isLoaded = true
+      self.setImage(animatedImage)
+      self.firePlayerStateChange()
+    }
+  }
+
+  // MARK: - Playback Controls
+
+  func play() {
+    self.imageView.startAnimating()
+    self.isPlaying = true
+    self.firePlayerStateChange()
+  }
+
+  func pause() {
+    self.imageView.stopAnimating()
+    self.isPlaying = false
+    self.firePlayerStateChange()
+  }
+
+  func toggle() {
+    if self.isPlaying {
+      self.pause()
+    } else {
+      self.play()
+    }
+  }
+
+  // MARK: - Util
+
+  private func firePlayerStateChange() {
+    onPlayerStateChange([
+      "isPlaying": self.isPlaying,
+      "isLoaded": self.isLoaded
+    ])
+  }
+}

modules/expo-bluesky-gif-view/ios/Util.swift

@@ -0,0 +1,17 @@
+import SDWebImage
+
+class Util {
+  static func createContext() -> SDWebImageContext {
+    var context = SDWebImageContext()
+
+    // SDAnimatedImage for some reason has issues whenever loaded from memory. Instead, we
+    // will just use the disk. SDWebImage will manage this cache for us, so we don't need
+    // to worry about clearing it.
+    context[.originalQueryCacheType] = SDImageCacheType.disk.rawValue
+    context[.originalStoreCacheType] = SDImageCacheType.disk.rawValue
+    context[.queryCacheType] = SDImageCacheType.disk.rawValue
+    context[.storeCacheType] = SDImageCacheType.disk.rawValue
+
+    return context
+  }
+}

modules/expo-bluesky-gif-view/src/GifView.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import {requireNativeModule} from 'expo'
+import {requireNativeViewManager} from 'expo-modules-core'
+
+import {GifViewProps} from './GifView.types'
+
+const NativeModule = requireNativeModule('ExpoBlueskyGifView')
+const NativeView: React.ComponentType<
+  GifViewProps & {ref: React.RefObject<any>}
+> = requireNativeViewManager('ExpoBlueskyGifView')
+
+export class GifView extends React.PureComponent<GifViewProps> {
+  // TODO native types, should all be the same as those in this class
+  private nativeRef: React.RefObject<any> = React.createRef()
+
+  constructor(props: GifViewProps | Readonly<GifViewProps>) {
+    super(props)
+  }
+
+  static async prefetchAsync(sources: string[]): Promise<void> {
+    return await NativeModule.prefetchAsync(sources)
+  }
+
+  async playAsync(): Promise<void> {
+    await this.nativeRef.current.playAsync()
+  }
+
+  async pauseAsync(): Promise<void> {
+    await this.nativeRef.current.pauseAsync()
+  }
+
+  async toggleAsync(): Promise<void> {
+    await this.nativeRef.current.toggleAsync()
+  }
+
+  render() {
+    return <NativeView {...this.props} ref={this.nativeRef} />
+  }
+}

modules/expo-bluesky-gif-view/src/GifView.types.ts

@@ -0,0 +1,15 @@
+import {ViewProps} from 'react-native'
+
+export interface GifViewStateChangeEvent {
+  nativeEvent: {
+    isPlaying: boolean
+    isLoaded: boolean
+  }
+}
+
+export interface GifViewProps extends ViewProps {
+  autoplay?: boolean
+  source?: string
+  placeholderSource?: string
+  onPlayerStateChange?: (event: GifViewStateChangeEvent) => void
+}

modules/expo-bluesky-gif-view/src/GifView.web.tsx

@@ -0,0 +1,82 @@
+import * as React from 'react'
+import {StyleSheet} from 'react-native'
+
+import {GifViewProps} from './GifView.types'
+
+export class GifView extends React.PureComponent<GifViewProps> {
+  private readonly videoPlayerRef: React.RefObject<HTMLMediaElement> =
+    React.createRef()
+  private isLoaded = false
+
+  constructor(props: GifViewProps | Readonly<GifViewProps>) {
+    super(props)
+  }
+
+  componentDidUpdate(prevProps: Readonly<GifViewProps>) {
+    if (prevProps.autoplay !== this.props.autoplay) {
+      if (this.props.autoplay) {
+        this.playAsync()
+      } else {
+        this.pauseAsync()
+      }
+    }
+  }
+
+  static async prefetchAsync(_: string[]): Promise<void> {
+    console.warn('prefetchAsync is not supported on web')
+  }
+
+  private firePlayerStateChangeEvent = () => {
+    this.props.onPlayerStateChange?.({
+      nativeEvent: {
+        isPlaying: !this.videoPlayerRef.current?.paused,
+        isLoaded: this.isLoaded,
+      },
+    })
+  }
+
+  private onLoad = () => {
+    // Prevent multiple calls to onLoad because onCanPlay will fire after each loop
+    if (this.isLoaded) {
+      return
+    }
+
+    this.isLoaded = true
+    this.firePlayerStateChangeEvent()
+  }
+
+  async playAsync(): Promise<void> {
+    this.videoPlayerRef.current?.play()
+  }
+
+  async pauseAsync(): Promise<void> {
+    this.videoPlayerRef.current?.pause()
+  }
+
+  async toggleAsync(): Promise<void> {
+    if (this.videoPlayerRef.current?.paused) {
+      await this.playAsync()
+    } else {
+      await this.pauseAsync()
+    }
+  }
+
+  render() {
+    return (
+      <video
+        src={this.props.source}
+        autoPlay={this.props.autoplay ? 'autoplay' : undefined}
+        preload={this.props.autoplay ? 'auto' : undefined}
+        playsInline={true}
+        loop="loop"
+        muted="muted"
+        style={StyleSheet.flatten(this.props.style)}
+        onCanPlay={this.onLoad}
+        onPlay={this.firePlayerStateChangeEvent}
+        onPause={this.firePlayerStateChangeEvent}
+        aria-label={this.props.accessibilityLabel}
+        ref={this.videoPlayerRef}
+      />
+    )
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsky.app",
-  "version": "1.79.0",
+  "version": "1.81.0",
   "private": true,
   "engines": {
     "node": ">=18"
@@ -15,7 +15,7 @@
     "web": "expo start --web",
     "use-build-number": "./scripts/useBuildNumberEnv.sh",
     "use-build-number-with-bump": "./scripts/useBuildNumberEnvWithBump.sh",
-    "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/",
+    "build-web": "expo export:web && node ./scripts/post-web-build.js && cp -v ./web-build/static/js/*.* ./bskyweb/static/js/ && cp -v ./web-build/static/media/*.png ./bskyweb/static/media/",
     "build-all": "yarn intl:build && yarn use-build-number-with-bump eas build --platform all",
     "build-ios": "yarn use-build-number-with-bump eas build -p ios",
     "build-android": "yarn use-build-number-with-bump eas build -p android",
@@ -50,10 +50,11 @@
     "open-analyzer": "EXPO_PUBLIC_OPEN_ANALYZER=1 yarn build-web"
   },
   "dependencies": {
-    "@atproto/api": "^0.12.3",
+    "@atproto-labs/api": "^0.12.8-clipclops.0",
+    "@atproto/api": "^0.12.5",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
-    "@discord/bottom-sheet": "https://github.com/bluesky-social/react-native-bottom-sheet.git#discord-fork-4.6.1",
+    "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
     "@emoji-mart/react": "^1.1.1",
     "@expo/html-elements": "^0.4.2",
     "@expo/webpack-config": "^19.0.0",
@@ -168,6 +169,7 @@
     "react-native-get-random-values": "~1.11.0",
     "react-native-image-crop-picker": "^0.38.1",
     "react-native-ios-context-menu": "^1.15.3",
+    "react-native-keyboard-controller": "^1.11.7",
     "react-native-pager-view": "6.2.3",
     "react-native-picker-select": "^8.1.0",
     "react-native-progress": "bluesky-social/react-native-progress",
@@ -183,6 +185,7 @@
     "react-native-web-webview": "^1.0.2",
     "react-native-webview": "13.6.4",
     "react-responsive": "^9.0.2",
+    "react-textarea-autosize": "^8.5.3",
     "rn-fetch-blob": "^0.12.0",
     "sentry-expo": "~7.0.1",
     "statsig-react-native-expo": "^4.6.1",

patches/@atproto+lexicon+0.4.0.patch

@@ -0,0 +1,28 @@
+diff --git a/node_modules/@atproto/lexicon/dist/validators/complex.js b/node_modules/@atproto/lexicon/dist/validators/complex.js
+index 32d7798..9d688b7 100644
+--- a/node_modules/@atproto/lexicon/dist/validators/complex.js
++++ b/node_modules/@atproto/lexicon/dist/validators/complex.js
+@@ -113,7 +113,22 @@ function object(lexicons, path, def, value) {
+             if (value[key] === null && nullableProps.has(key)) {
+                 continue;
+             }
+-            const propDef = def.properties[key];
++            const propDef = def.properties[key]
++            if (typeof value[key] === 'undefined' && !requiredProps.has(key)) {
++              // Fast path for non-required undefined props.
++              if (
++                propDef.type === 'integer' ||
++                propDef.type === 'boolean' ||
++                propDef.type === 'string'
++              ) {
++                if (typeof propDef.default === 'undefined') {
++                  continue
++                }
++              } else {
++                // Other types have no defaults.
++                continue
++              }
++            }
+             const propPath = `${path}/${key}`;
+             const validated = (0, util_1.validateOneOf)(lexicons, propPath, propDef, value[key]);
+             const propValue = validated.success ? validated.value : value[key];

plugins/withAndroidStylesAccentColorPlugin.js

@@ -0,0 +1,25 @@
+/**
+ * @file Set accent color to primaryColor from app.config.js.
+ * This way we get a sane default color for spinners, text inputs, etc.
+ */
+
+const {withAndroidStyles, AndroidConfig} = require('@expo/config-plugins')
+
+module.exports = function withAndroidStylesAccentColorPlugin(appConfig) {
+  return withAndroidStyles(appConfig, function (decoratedAppConfig) {
+    try {
+      decoratedAppConfig.modResults = AndroidConfig.Styles.assignStylesValue(
+        decoratedAppConfig.modResults,
+        {
+          add: true,
+          parent: AndroidConfig.Styles.getAppThemeLightNoActionBarGroup(),
+          name: 'colorAccent',
+          value: '@color/colorPrimary',
+        },
+      )
+    } catch (e) {
+      console.error(`withAndroidStylesAccentColorPlugin failed`, e)
+    }
+    return decoratedAppConfig
+  })
+}

src/App.native.tsx

@@ -15,9 +15,11 @@ import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
+import {logger} from '#/logger'
 import {init as initPersistedState} from '#/state/persisted'
-import * as persisted from '#/state/persisted'
 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 {useNotificationsListener} from 'lib/notifications/notifications'
 import {QueryProvider} from 'lib/react-query'
@@ -32,6 +34,7 @@ import {Provider as PrefsStateProvider} from 'state/preferences'
 import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
 import {
   Provider as SessionProvider,
+  SessionAccount,
   useSession,
   useSessionApi,
 } from 'state/session'
@@ -51,8 +54,9 @@ import {listenSessionDropped} from './state/events'
 SplashScreen.preventAutoHideAsync()
 
 function InnerApp() {
-  const {isInitialLoad, currentAccount} = useSession()
-  const {resumeSession} = useSessionApi()
+  const [isReady, setIsReady] = React.useState(false)
+  const {currentAccount} = useSession()
+  const {initSession} = useSessionApi()
   const theme = useColorModeTheme()
   const {_} = useLingui()
 
@@ -60,46 +64,61 @@ function InnerApp() {
 
   // init
   useEffect(() => {
-    listenSessionDropped(() => {
+    async function resumeSession(account?: SessionAccount) {
+      try {
+        if (account) {
+          await initSession(account)
+        }
+      } catch (e) {
+        logger.error(`session: resumeSession failed`, {message: e})
+      } finally {
+        setIsReady(true)
+      }
+    }
+    const account = readLastActiveAccount()
+    resumeSession(account)
+  }, [initSession])
+
+  useEffect(() => {
+    return listenSessionDropped(() => {
       Toast.show(_(msg`Sorry! Your session expired. Please log in again.`))
     })
-
-    const account = persisted.get('session').currentAccount
-    resumeSession(account)
-  }, [resumeSession, _])
+  }, [_])
 
   return (
     <SafeAreaProvider initialMetrics={initialWindowMetrics}>
       <Alf theme={theme}>
-        <Splash isReady={!isInitialLoad}>
-          <React.Fragment
-            // Resets the entire tree below when it changes:
-            key={currentAccount?.did}>
-            <QueryProvider currentDid={currentAccount?.did}>
-              <PushNotificationsListener>
-                <StatsigProvider>
-                  <LabelDefsProvider>
-                    <LoggedOutViewProvider>
-                      <SelectedFeedProvider>
-                        <UnreadNotifsProvider>
-                          <ThemeProvider theme={theme}>
-                            {/* All components should be within this provider */}
-                            <RootSiblingParent>
-                              <GestureHandlerRootView style={s.h100pct}>
-                                <TestCtrls />
-                                <Shell />
-                              </GestureHandlerRootView>
-                            </RootSiblingParent>
-                          </ThemeProvider>
-                        </UnreadNotifsProvider>
-                      </SelectedFeedProvider>
-                    </LoggedOutViewProvider>
-                  </LabelDefsProvider>
-                </StatsigProvider>
-              </PushNotificationsListener>
-            </QueryProvider>
-          </React.Fragment>
-        </Splash>
+        <ThemeProvider theme={theme}>
+          <Splash isReady={isReady}>
+            <RootSiblingParent>
+              <React.Fragment
+                // Resets the entire tree below when it changes:
+                key={currentAccount?.did}>
+                <QueryProvider currentDid={currentAccount?.did}>
+                  <PushNotificationsListener>
+                    <StatsigProvider>
+                      {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                      <LabelDefsProvider>
+                        <ModerationOptsProvider>
+                          <LoggedOutViewProvider>
+                            <SelectedFeedProvider>
+                              <UnreadNotifsProvider>
+                                <GestureHandlerRootView style={s.h100pct}>
+                                  <TestCtrls />
+                                  <Shell />
+                                </GestureHandlerRootView>
+                              </UnreadNotifsProvider>
+                            </SelectedFeedProvider>
+                          </LoggedOutViewProvider>
+                        </ModerationOptsProvider>
+                      </LabelDefsProvider>
+                    </StatsigProvider>
+                  </PushNotificationsListener>
+                </QueryProvider>
+              </React.Fragment>
+            </RootSiblingParent>
+          </Splash>
+        </ThemeProvider>
       </Alf>
     </SafeAreaProvider>
   )

src/App.web.tsx

@@ -4,11 +4,15 @@ import 'view/icons'
 import React, {useEffect, useState} from 'react'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
+import {logger} from '#/logger'
 import {init as initPersistedState} from '#/state/persisted'
-import * as persisted from '#/state/persisted'
 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'
@@ -21,61 +25,85 @@ import {Provider as PrefsStateProvider} from 'state/preferences'
 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'
 import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {Provider as PortalProvider} from '#/components/Portal'
 import I18nProvider from './locale/i18nProvider'
+import {listenSessionDropped} from './state/events'
 
 function InnerApp() {
-  const {isInitialLoad, currentAccount} = useSession()
-  const {resumeSession} = useSessionApi()
+  const [isReady, setIsReady] = React.useState(false)
+  const {currentAccount} = useSession()
+  const {initSession} = useSessionApi()
   const theme = useColorModeTheme()
+  const {_} = useLingui()
   useIntentHandler()
 
   // init
   useEffect(() => {
-    const account = persisted.get('session').currentAccount
+    async function resumeSession(account?: SessionAccount) {
+      try {
+        if (account) {
+          await initSession(account)
+        }
+      } catch (e) {
+        logger.error(`session: resumeSession failed`, {message: e})
+      } finally {
+        setIsReady(true)
+      }
+    }
+    const account = readLastActiveAccount()
     resumeSession(account)
-  }, [resumeSession])
+  }, [initSession])
+
+  useEffect(() => {
+    return listenSessionDropped(() => {
+      Toast.show(_(msg`Sorry! Your session expired. Please log in again.`))
+    })
+  }, [_])
 
   // wait for session to resume
-  if (isInitialLoad) return null
+  if (!isReady) return null
 
   return (
     <Alf theme={theme}>
-      <React.Fragment
-        // Resets the entire tree below when it changes:
-        key={currentAccount?.did}>
-        <QueryProvider currentDid={currentAccount?.did}>
-          <StatsigProvider>
-            <LabelDefsProvider>
-              <LoggedOutViewProvider>
-                <SelectedFeedProvider>
-                  <UnreadNotifsProvider>
-                    <ThemeProvider theme={theme}>
-                      {/* All components should be within this provider */}
-                      <RootSiblingParent>
-                        <SafeAreaProvider>
-                          <Shell />
-                        </SafeAreaProvider>
-                      </RootSiblingParent>
-                      <ToastContainer />
-                    </ThemeProvider>
-                  </UnreadNotifsProvider>
-                </SelectedFeedProvider>
-              </LoggedOutViewProvider>
-            </LabelDefsProvider>
-          </StatsigProvider>
-        </QueryProvider>
-      </React.Fragment>
+      <ThemeProvider theme={theme}>
+        <RootSiblingParent>
+          <React.Fragment
+            // Resets the entire tree below when it changes:
+            key={currentAccount?.did}>
+            <QueryProvider currentDid={currentAccount?.did}>
+              <StatsigProvider>
+                {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                <LabelDefsProvider>
+                  <ModerationOptsProvider>
+                    <LoggedOutViewProvider>
+                      <SelectedFeedProvider>
+                        <UnreadNotifsProvider>
+                          <SafeAreaProvider>
+                            <Shell />
+                          </SafeAreaProvider>
+                        </UnreadNotifsProvider>
+                      </SelectedFeedProvider>
+                    </LoggedOutViewProvider>
+                  </ModerationOptsProvider>
+                </LabelDefsProvider>
+              </StatsigProvider>
+            </QueryProvider>
+          </React.Fragment>
+          <ToastContainer />
+        </RootSiblingParent>
+      </ThemeProvider>
     </Alf>
   )
 }

src/Navigation.tsx

@@ -25,6 +25,7 @@ import {
   FeedsTabNavigatorParams,
   FlatNavigatorParams,
   HomeTabNavigatorParams,
+  MessagesTabNavigatorParams,
   MyProfileTabNavigatorParams,
   NotificationsTabNavigatorParams,
   SearchTabNavigatorParams,
@@ -46,6 +47,9 @@ import {init as initAnalytics} from './lib/analytics/analytics'
 import {useWebScrollRestoration} from './lib/hooks/useWebScrollRestoration'
 import {attachRouteToLogEvents, logEvent} from './lib/statsig/statsig'
 import {router} from './routes'
+import {MessagesConversationScreen} from './screens/Messages/Conversation'
+import {MessagesScreen} from './screens/Messages/List'
+import {MessagesSettingsScreen} from './screens/Messages/Settings'
 import {useModalControls} from './state/modals'
 import {useUnreadNotifications} from './state/queries/notifications/unread'
 import {useSession} from './state/session'
@@ -92,6 +96,8 @@ const NotificationsTab =
   createNativeStackNavigatorWithAuth<NotificationsTabNavigatorParams>()
 const MyProfileTab =
   createNativeStackNavigatorWithAuth<MyProfileTabNavigatorParams>()
+const MessagesTab =
+  createNativeStackNavigatorWithAuth<MessagesTabNavigatorParams>()
 const Flat = createNativeStackNavigatorWithAuth<FlatNavigatorParams>()
 const Tab = createBottomTabNavigator<BottomTabNavigatorParams>()
 
@@ -290,6 +296,16 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => HashtagScreen}
         options={{title: title(msg`Hashtag`)}}
       />
+      <Stack.Screen
+        name="MessagesConversation"
+        getComponent={() => MessagesConversationScreen}
+        options={{title: title(msg`Chat`), requireAuth: true}}
+      />
+      <Stack.Screen
+        name="MessagesSettings"
+        getComponent={() => MessagesSettingsScreen}
+        options={{title: title(msg`Messaging settings`), requireAuth: true}}
+      />
     </>
   )
 }
@@ -323,6 +339,10 @@ function TabsNavigator() {
         name="MyProfileTab"
         getComponent={() => MyProfileTabNavigator}
       />
+      <Tab.Screen
+        name="MessagesTab"
+        getComponent={() => MessagesTabNavigator}
+      />
     </Tab.Navigator>
   )
 }
@@ -429,6 +449,28 @@ function MyProfileTabNavigator() {
   )
 }
 
+function MessagesTabNavigator() {
+  const pal = usePalette('default')
+  return (
+    <MessagesTab.Navigator
+      screenOptions={{
+        animation: isAndroid ? 'none' : undefined,
+        gestureEnabled: true,
+        fullScreenGestureEnabled: true,
+        headerShown: false,
+        animationDuration: 250,
+        contentStyle: pal.view,
+      }}>
+      <MessagesTab.Screen
+        name="Messages"
+        getComponent={() => MessagesScreen}
+        options={{requireAuth: true}}
+      />
+      {commonScreens(MessagesTab as typeof HomeTab)}
+    </MessagesTab.Navigator>
+  )
+}
+
 /**
  * The FlatNavigator is used by Web to represent the routes
  * in a single ("flat") stack.
@@ -469,6 +511,11 @@ const FlatNavigator = () => {
         getComponent={() => NotificationsScreen}
         options={{title: title(msg`Notifications`), requireAuth: true}}
       />
+      <Flat.Screen
+        name="Messages"
+        getComponent={() => MessagesScreen}
+        options={{title: title(msg`Messages`), requireAuth: true}}
+      />
       {commonScreens(Flat as typeof HomeTab, numUnread)}
     </Flat.Navigator>
   )
@@ -522,6 +569,9 @@ const LINKING = {
       if (name === 'Home') {
         return buildStateObject('HomeTab', 'Home', params)
       }
+      if (name === 'Messages') {
+        return buildStateObject('MessagesTab', 'Messages', params)
+      }
       // if the path is something else, like a post, profile, or even settings, we need to initialize the home tab as pre-existing state otherwise the back button will not work
       return buildStateObject('HomeTab', name, params, [
         {

src/components/AccountList.tsx

@@ -16,12 +16,14 @@ export function AccountList({
   onSelectAccount,
   onSelectOther,
   otherLabel,
+  pendingDid,
 }: {
   onSelectAccount: (account: SessionAccount) => void
   onSelectOther: () => void
   otherLabel?: string
+  pendingDid: string | null
 }) {
-  const {isSwitchingAccounts, currentAccount, accounts} = useSession()
+  const {currentAccount, accounts} = useSession()
   const t = useTheme()
   const {_} = useLingui()
 
@@ -31,6 +33,7 @@ export function AccountList({
 
   return (
     <View
+      pointerEvents={pendingDid ? 'none' : 'auto'}
       style={[
         a.rounded_md,
         a.overflow_hidden,
@@ -43,6 +46,7 @@ export function AccountList({
             account={account}
             onSelect={onSelectAccount}
             isCurrentAccount={account.did === currentAccount?.did}
+            isPendingAccount={account.did === pendingDid}
           />
           <View style={[a.border_b, t.atoms.border_contrast_low]} />
         </React.Fragment>
@@ -50,7 +54,7 @@ export function AccountList({
       <Button
         testID="chooseAddAccountBtn"
         style={[a.flex_1]}
-        onPress={isSwitchingAccounts ? undefined : onPressAddAccount}
+        onPress={pendingDid ? undefined : onPressAddAccount}
         label={_(msg`Login to account that is not listed`)}>
         {({hovered, pressed}) => (
           <View
@@ -59,8 +63,7 @@ export function AccountList({
               a.flex_row,
               a.align_center,
               {height: 48},
-              (hovered || pressed || isSwitchingAccounts) &&
-                t.atoms.bg_contrast_25,
+              (hovered || pressed) && t.atoms.bg_contrast_25,
             ]}>
             <Text
               style={[
@@ -84,10 +87,12 @@ function AccountItem({
   account,
   onSelect,
   isCurrentAccount,
+  isPendingAccount,
 }: {
   account: SessionAccount
   onSelect: (account: SessionAccount) => void
   isCurrentAccount: boolean
+  isPendingAccount: boolean
 }) {
   const t = useTheme()
   const {_} = useLingui()
@@ -115,7 +120,7 @@ function AccountItem({
             a.flex_row,
             a.align_center,
             {height: 48},
-            (hovered || pressed) && t.atoms.bg_contrast_25,
+            (hovered || pressed || isPendingAccount) && t.atoms.bg_contrast_25,
           ]}>
           <View style={a.p_md}>
             <UserAvatar avatar={profile?.avatar} size={24} />

src/components/AppLanguageDropdown.web.tsx

@@ -71,6 +71,7 @@ export function AppLanguageDropdown() {
           color: t.atoms.text.color,
           background: t.atoms.bg.backgroundColor,
           padding: 4,
+          maxWidth: '100%',
         }}>
         {APP_LANGUAGES.filter(l => Boolean(l.code2)).map(l => (
           <option key={l.code2} value={l.code2}>

src/components/Button.tsx

@@ -64,7 +64,7 @@ type NonTextElements =
 
 export type ButtonProps = Pick<
   PressableProps,
-  'disabled' | 'onPress' | 'testID'
+  'disabled' | 'onPress' | 'testID' | 'onLongPress'
 > &
   AccessibilityProps &
   VariantProps & {

src/components/Dialog/index.tsx

@@ -152,6 +152,12 @@ export function Outer({
     [open, close],
   )
 
+  React.useEffect(() => {
+    return () => {
+      setDialogIsOpen(control.id, false)
+    }
+  }, [control.id, setDialogIsOpen])
+
   const context = React.useMemo(() => ({close}), [close])
 
   return (

src/components/Dialog/index.web.tsx

@@ -197,11 +197,10 @@ export function Inner({
 
 export const ScrollableInner = Inner
 
-export function InnerFlatList({
-  label,
-  style,
-  ...props
-}: FlatListProps<any> & {label: string}) {
+export const InnerFlatList = React.forwardRef<
+  FlatList,
+  FlatListProps<any> & {label: string}
+>(function InnerFlatList({label, style, ...props}, ref) {
   const {gtMobile} = useBreakpoints()
   return (
     <Inner
@@ -213,12 +212,13 @@ export function InnerFlatList({
         overflow: 'hidden',
       }}>
       <FlatList
+        ref={ref}
         style={[gtMobile ? a.px_2xl : a.px_xl, flatten(style)]}
         {...props}
       />
     </Inner>
   )
-}
+})
 
 export function Handle() {
   return null

src/components/Error.tsx

@@ -17,12 +17,14 @@ export function Error({
   message,
   onRetry,
   onGoBack: onGoBackProp,
+  hideBackButton,
   sideBorders = true,
 }: {
   title?: string
   message?: string
   onRetry?: () => unknown
   onGoBack?: () => unknown
+  hideBackButton?: boolean
   sideBorders?: boolean
 }) {
   const navigation = useNavigation<NavigationProp>()
@@ -70,7 +72,7 @@ export function Error({
             a.text_center,
             t.atoms.text_contrast_high,
             {lineHeight: 1.4},
-            gtMobile && {width: 450},
+            gtMobile ? {width: 450} : [a.w_full, a.px_lg],
           ]}>
           {message}
         </Text>
@@ -89,17 +91,19 @@ export function Error({
             </ButtonText>
           </Button>
         )}
-        <Button
-          variant="solid"
-          color={onRetry ? 'secondary' : 'primary'}
-          label={_(msg`Return to previous page`)}
-          onPress={onGoBack}
-          size="large"
-          style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
-          <ButtonText>
-            <Trans>Go Back</Trans>
-          </ButtonText>
-        </Button>
+        {!hideBackButton && (
+          <Button
+            variant="solid"
+            color={onRetry ? 'secondary' : 'primary'}
+            label={_(msg`Return to previous page`)}
+            onPress={onGoBack}
+            size="large"
+            style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
+            <ButtonText>
+              <Trans>Go Back</Trans>
+            </ButtonText>
+          </Button>
+        )}
       </View>
     </CenteredView>
   )

src/components/Link.tsx

@@ -3,10 +3,12 @@ import {GestureResponderEvent} from 'react-native'
 import {sanitizeUrl} from '@braintree/sanitize-url'
 import {StackActions, useLinkProps} from '@react-navigation/native'
 
+import {BSKY_DOWNLOAD_URL} from '#/lib/constants'
 import {AllNavigatorParams} from '#/lib/routes/types'
 import {shareUrl} from '#/lib/sharing'
 import {
   convertBskyAppUrlIfNeeded,
+  isBskyDownloadUrl,
   isExternalUrl,
   linkRequiresWarning,
 } from '#/lib/strings/url-helpers'
@@ -125,7 +127,9 @@ export function useLink({
             (event.metaKey || event.altKey || event.ctrlKey || event.shiftKey)
           const shouldOpenInNewTab = isMetaKey || isMiddleClick
 
-          if (
+          if (isBskyDownloadUrl(href)) {
+            shareUrl(BSKY_DOWNLOAD_URL)
+          } else if (
             shouldOpenInNewTab ||
             href.startsWith('http') ||
             href.startsWith('mailto')

src/components/Lists.tsx

@@ -134,6 +134,7 @@ let ListMaybePlaceholder = ({
   emptyType = 'page',
   onRetry,
   onGoBack,
+  hideBackButton,
   sideBorders,
 }: {
   isLoading: boolean
@@ -146,6 +147,7 @@ let ListMaybePlaceholder = ({
   emptyType?: 'page' | 'results'
   onRetry?: () => Promise<unknown>
   onGoBack?: () => void
+  hideBackButton?: boolean
   sideBorders?: boolean
 }): React.ReactNode => {
   const t = useTheme()
@@ -179,6 +181,7 @@ let ListMaybePlaceholder = ({
         onRetry={onRetry}
         onGoBack={onGoBack}
         sideBorders={sideBorders}
+        hideBackButton={hideBackButton}
       />
     )
   }
@@ -198,6 +201,7 @@ let ListMaybePlaceholder = ({
         }
         onRetry={onRetry}
         onGoBack={onGoBack}
+        hideBackButton={hideBackButton}
         sideBorders={sideBorders}
       />
     )

src/components/Menu/index.tsx

@@ -1,27 +1,29 @@
 import React from 'react'
-import {View, Pressable, ViewStyle, StyleProp} from 'react-native'
+import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 import flattenReactChildren from 'react-keyed-flatten-children'
 
+import {isNative} from 'platform/detection'
 import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {Text} from '#/components/Typography'
-
 import {Context} from '#/components/Menu/context'
 import {
   ContextType,
-  TriggerProps,
-  ItemProps,
   GroupProps,
-  ItemTextProps,
   ItemIconProps,
+  ItemProps,
+  ItemTextProps,
+  TriggerProps,
 } from '#/components/Menu/types'
-import {Button, ButtonText} from '#/components/Button'
-import {Trans, msg} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import {isNative} from 'platform/detection'
+import {Text} from '#/components/Typography'
 
-export {useDialogControl as useMenuControl} from '#/components/Dialog'
+export {
+  type DialogControlProps as MenuControlProps,
+  useDialogControl as useMenuControl,
+} from '#/components/Dialog'
 
 export function useMemoControlContext() {
   return React.useContext(Context)

src/components/Menu/index.web.tsx

@@ -1,27 +1,26 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react'
-import {View, Pressable, ViewStyle, StyleProp} from 'react-native'
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
+import {Pressable, StyleProp, View, ViewStyle} from 'react-native'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 
+import {atoms as a, flatten, useTheme, web} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {atoms as a, useTheme, flatten, web} from '#/alf'
-import {Text} from '#/components/Typography'
-
+import {Context} from '#/components/Menu/context'
 import {
   ContextType,
-  TriggerProps,
-  ItemProps,
   GroupProps,
-  ItemTextProps,
   ItemIconProps,
+  ItemProps,
+  ItemTextProps,
   RadixPassThroughTriggerProps,
+  TriggerProps,
 } from '#/components/Menu/types'
-import {Context} from '#/components/Menu/context'
 import {Portal} from '#/components/Portal'
+import {Text} from '#/components/Typography'
 
 export function useMenuControl(): Dialog.DialogControlProps {
   const id = React.useId()
@@ -135,10 +134,22 @@ export function Trigger({children, label}: TriggerProps) {
             },
             props: {
               ...props,
-              // disable on web, use `onPress`
-              onPointerDown: () => false,
-              onPress: () =>
-                control.isOpen ? control.close() : control.open(),
+              // No-op override to prevent false positive that interprets mobile scroll as a tap.
+              // This requires the custom onPress handler below to compensate.
+              // https://github.com/radix-ui/primitives/issues/1912
+              onPointerDown: undefined,
+              onPress: () => {
+                if (window.event instanceof KeyboardEvent) {
+                  // The onPointerDown hack above is not relevant to this press, so don't do anything.
+                  return
+                }
+                // Compensate for the disabled onPointerDown above by triggering it manually.
+                if (control.isOpen) {
+                  control.close()
+                } else {
+                  control.open()
+                }
+              },
               onFocus: onFocus,
               onBlur: onBlur,
               onMouseEnter,

src/components/Portal.tsx

@@ -34,10 +34,17 @@ export function createPortalGroup() {
       setOutlet(<>{Object.values(map.current)}</>)
     }, [])
 
+    const contextValue = React.useMemo(
+      () => ({
+        outlet,
+        append,
+        remove,
+      }),
+      [outlet, append, remove],
+    )
+
     return (
-      <Context.Provider value={{outlet, append, remove}}>
-        {props.children}
-      </Context.Provider>
+      <Context.Provider value={contextValue}>{props.children}</Context.Provider>
     )
   }
 

src/components/ProfileHoverCard/index.web.tsx

@@ -9,7 +9,7 @@ import {makeProfileLink} from '#/lib/routes/links'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {pluralize} from '#/lib/strings/helpers'
-import {useModerationOpts} from '#/state/queries/preferences'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {usePrefetchProfileQuery, useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
 import {useProfileShadow} from 'state/cache/profile-shadow'
@@ -72,10 +72,10 @@ type Action =
   | 'unhovered-long-enough'
   | 'finished-animating-hide'
 
-const SHOW_DELAY = 400
+const SHOW_DELAY = 500
 const SHOW_DURATION = 300
 const HIDE_DELAY = 150
-const HIDE_DURATION = 150
+const HIDE_DURATION = 200
 
 export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
   const {refs, floatingStyles} = useFloating({
@@ -244,12 +244,20 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
     }
   }, [prefetchProfileQuery, props.did])
 
-  const onPointerEnterTarget = React.useCallback(() => {
+  const didFireHover = React.useRef(false)
+  const onPointerMoveTarget = React.useCallback(() => {
     prefetchIfNeeded()
-    dispatch('hovered-target')
+    // Conceptually we want something like onPointerEnter,
+    // but we want to ignore entering only due to scrolling.
+    // So instead we hover on the first onPointerMove.
+    if (!didFireHover.current) {
+      didFireHover.current = true
+      dispatch('hovered-target')
+    }
   }, [prefetchIfNeeded])
 
   const onPointerLeaveTarget = React.useCallback(() => {
+    didFireHover.current = false
     dispatch('unhovered-target')
   }, [])
 
@@ -280,7 +288,7 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
   return (
     <div
       ref={refs.setReference}
-      onPointerEnter={onPointerEnterTarget}
+      onPointerMove={onPointerMoveTarget}
       onPointerLeave={onPointerLeaveTarget}
       onMouseUp={onPress}
       style={{

src/components/Prompt.tsx

@@ -43,7 +43,9 @@ export function Outer({
         <Dialog.ScrollableInner
           accessibilityLabelledBy={titleId}
           accessibilityDescribedBy={descriptionId}
-          style={[gtMobile ? {width: 'auto', maxWidth: 400} : a.w_full]}>
+          style={[
+            gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+          ]}>
           {children}
         </Dialog.ScrollableInner>
       </Context.Provider>

src/components/ReportDialog/SubmitView.tsx

@@ -6,7 +6,7 @@ import {useLingui} from '@lingui/react'
 
 import {getLabelingServiceTitle} from '#/lib/moderation'
 import {ReportOption} from '#/lib/moderation/useReportOptions'
-import {getAgent} from '#/state/session'
+import {useAgent} from '#/state/session'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, native, useTheme} from '#/alf'
@@ -35,6 +35,7 @@ export function SubmitView({
 }) {
   const t = useTheme()
   const {_} = useLingui()
+  const {getAgent} = useAgent()
   const [details, setDetails] = React.useState<string>('')
   const [submitting, setSubmitting] = React.useState<boolean>(false)
   const [selectedServices, setSelectedServices] = React.useState<string[]>([
@@ -90,6 +91,7 @@ export function SubmitView({
     selectedServices,
     onSubmitComplete,
     setError,
+    getAgent,
   ])
 
   return (

src/components/RichText.tsx

@@ -2,7 +2,9 @@ import React from 'react'
 import {AppBskyRichtextFacet, RichText as RichTextAPI} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
 
+import {NavigationProp} from '#/lib/routes/types'
 import {toShortUrl} from '#/lib/strings/url-helpers'
 import {isNative} from '#/platform/detection'
 import {atoms as a, flatten, native, TextStyleProp, useTheme, web} from '#/alf'
@@ -178,8 +180,15 @@ function RichTextTag({
     onIn: onPressIn,
     onOut: onPressOut,
   } = useInteractionState()
+  const navigation = useNavigation<NavigationProp>()
 
-  const open = React.useCallback(() => {
+  const navigateToPage = React.useCallback(() => {
+    navigation.push('Hashtag', {
+      tag: encodeURIComponent(tag),
+    })
+  }, [navigation, tag])
+
+  const openDialog = React.useCallback(() => {
     control.open()
   }, [control])
 
@@ -195,9 +204,10 @@ function RichTextTag({
           selectable={selectable}
           {...native({
             accessibilityLabel: _(msg`Hashtag: #${tag}`),
-            accessibilityHint: _(msg`Click here to open tag menu for #${tag}`),
+            accessibilityHint: _(msg`Long press to open tag menu for #${tag}`),
             accessibilityRole: isNative ? 'button' : undefined,
-            onPress: open,
+            onPress: navigateToPage,
+            onLongPress: openDialog,
             onPressIn: onPressIn,
             onPressOut: onPressOut,
           })}

src/components/dialogs/GifSelect.tsx

@@ -1,28 +1,28 @@
 import React, {useCallback, 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 {GIPHY_PRIVACY_POLICY} from '#/lib/constants'
 import {logEvent} from '#/lib/statsig/statsig'
 import {cleanError} from '#/lib/strings/errors'
 import {isWeb} from '#/platform/detection'
 import {
-  useExternalEmbedsPrefs,
-  useSetExternalEmbedPref,
-} from '#/state/preferences'
-import {Gif, useGifphySearch, useGiphyTrending} from '#/state/queries/giphy'
+  Gif,
+  useFeaturedGifsQuery,
+  useGifSearchQuery,
+} from '#/state/queries/tenor'
+import {ErrorScreen} from '#/view/com/util/error/ErrorScreen'
+import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import * as TextField from '#/components/forms/TextField'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
 import {ArrowLeft_Stroke2_Corner0_Rounded as Arrow} from '#/components/icons/Arrow'
 import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
-import {InlineLinkText} from '#/components/Link'
 import {Button, ButtonIcon, ButtonText} from '../Button'
 import {ListFooter, ListMaybePlaceholder} from '../Lists'
-import {Text} from '../Typography'
 
 export function GifSelectDialog({
   control,
@@ -33,7 +33,6 @@ export function GifSelectDialog({
   onClose: () => void
   onSelectGif: (gif: Gif) => void
 }) {
-  const externalEmbedsPrefs = useExternalEmbedsPrefs()
   const onSelectGif = useCallback(
     (gif: Gif) => {
       control.close(() => onSelectGifProp(gif))
@@ -41,26 +40,20 @@ export function GifSelectDialog({
     [control, onSelectGifProp],
   )
 
-  let content = null
-  let snapPoints
-  switch (externalEmbedsPrefs?.giphy) {
-    case 'show':
-      content = <GifList control={control} onSelectGif={onSelectGif} />
-      snapPoints = ['100%']
-      break
-    case 'hide':
-    default:
-      content = <GiphyConsentPrompt control={control} />
-      break
-  }
+  const renderErrorBoundary = useCallback(
+    (error: any) => <DialogError details={String(error)} />,
+    [],
+  )
 
   return (
     <Dialog.Outer
       control={control}
-      nativeOptions={{sheet: {snapPoints}}}
+      nativeOptions={{sheet: {snapPoints: ['100%']}}}
       onClose={onClose}>
       <Dialog.Handle />
-      {content}
+      <ErrorBoundary renderError={renderErrorBoundary}>
+        <GifList control={control} onSelectGif={onSelectGif} />
+      </ErrorBoundary>
     </Dialog.Outer>
   )
 }
@@ -75,14 +68,15 @@ function GifList({
   const {_} = useLingui()
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
-  const ref = useRef<TextInput>(null)
+  const textInputRef = useRef<TextInput>(null)
+  const listRef = useRef<BottomSheetFlatListMethods>(null)
   const [undeferredSearch, setSearch] = useState('')
   const search = useThrottledValue(undeferredSearch, 500)
 
   const isSearching = search.length > 0
 
-  const trendingQuery = useGiphyTrending()
-  const searchQuery = useGifphySearch(search)
+  const trendingQuery = useFeaturedGifsQuery()
+  const searchQuery = useGifSearchQuery(search)
 
   const {
     data,
@@ -96,17 +90,7 @@ function GifList({
   } = isSearching ? searchQuery : trendingQuery
 
   const flattenedData = useMemo(() => {
-    const uniquenessSet = new Set<string>()
-
-    function filter(gif: Gif) {
-      if (!gif) return false
-      if (uniquenessSet.has(gif.id)) {
-        return false
-      }
-      uniquenessSet.add(gif.id)
-      return true
-    }
-    return data?.pages.flatMap(page => page.data.filter(filter)) || []
+    return data?.pages.flatMap(page => page.results) || []
   }, [data])
 
   const renderItem = useCallback(
@@ -126,7 +110,7 @@ function GifList({
   const onGoBack = useCallback(() => {
     if (isSearching) {
       // clear the input and reset the state
-      ref.current?.clear()
+      textInputRef.current?.clear()
       setSearch('')
     } else {
       control.close()
@@ -172,11 +156,14 @@ function GifList({
           <TextField.Icon icon={Search} />
           <TextField.Input
             label={_(msg`Search GIFs`)}
-            placeholder={_(msg`Powered by GIPHY`)}
-            onChangeText={setSearch}
+            placeholder={_(msg`Search Tenor`)}
+            onChangeText={text => {
+              setSearch(text)
+              listRef.current?.scrollToOffset({offset: 0, animated: false})
+            }}
             returnKeyType="search"
             clearButtonMode="while-editing"
-            inputRef={ref}
+            inputRef={textInputRef}
             maxLength={50}
             onKeyPress={({nativeEvent}) => {
               if (nativeEvent.key === 'Escape') {
@@ -193,6 +180,7 @@ function GifList({
     <>
       {gtMobile && <Dialog.Close />}
       <Dialog.InnerFlatList
+        ref={listRef}
         key={gtMobile ? '3 cols' : '2 cols'}
         data={flattenedData}
         renderItem={renderItem}
@@ -210,12 +198,12 @@ function GifList({
                 emptyType="results"
                 sideBorders={false}
                 errorTitle={_(msg`Failed to load GIFs`)}
-                errorMessage={_(msg`There was an issue connecting to GIPHY.`)}
+                errorMessage={_(msg`There was an issue connecting to Tenor.`)}
                 emptyMessage={
                   isSearching
                     ? _(msg`No search results found for "${search}".`)
                     : _(
-                        msg`No trending GIFs found. There may be an issue with GIPHY.`,
+                        msg`No featured GIFs found. There may be an issue with Tenor.`,
                       )
                 }
               />
@@ -228,6 +216,7 @@ function GifList({
         keyExtractor={(item: Gif) => item.id}
         // @ts-expect-error web only
         style={isWeb && {minHeight: '100vh'}}
+        keyboardDismissMode="on-drag"
         ListFooterComponent={
           hasData ? (
             <ListFooter
@@ -273,7 +262,9 @@ function GifPreview({
             {aspectRatio: 1, opacity: pressed ? 0.8 : 1},
             t.atoms.bg_contrast_25,
           ]}
-          source={{uri: gif.images.preview_gif.url}}
+          source={{
+            uri: gif.media_formats.tinygif.url,
+          }}
           contentFit="cover"
           accessibilityLabel={gif.title}
           accessibilityHint=""
@@ -285,75 +276,30 @@ function GifPreview({
   )
 }
 
-function GiphyConsentPrompt({control}: {control: Dialog.DialogControlProps}) {
+function DialogError({details}: {details?: string}) {
   const {_} = useLingui()
-  const t = useTheme()
-  const {gtMobile} = useBreakpoints()
-  const setExternalEmbedPref = useSetExternalEmbedPref()
-
-  const onShowPress = useCallback(() => {
-    setExternalEmbedPref('giphy', 'show')
-  }, [setExternalEmbedPref])
-
-  const onHidePress = useCallback(() => {
-    setExternalEmbedPref('giphy', 'hide')
-    control.close()
-  }, [control, setExternalEmbedPref])
-
-  const gtMobileWeb = gtMobile && isWeb
+  const control = Dialog.useDialogContext()
 
   return (
-    <Dialog.ScrollableInner label={_(msg`Permission to use GIPHY`)}>
-      <View style={a.gap_sm}>
-        <Text style={[a.text_2xl, a.font_bold]}>
-          <Trans>Permission to use GIPHY</Trans>
-        </Text>
-
-        <View style={[a.mt_sm, a.mb_2xl, a.gap_lg]}>
-          <Text>
-            <Trans>
-              Bluesky uses GIPHY to provide the GIF selector feature.
-            </Trans>
-          </Text>
-
-          <Text style={t.atoms.text_contrast_medium}>
-            <Trans>
-              GIPHY may collect information about you and your device. You can
-              find out more in their{' '}
-              <InlineLinkText
-                to={GIPHY_PRIVACY_POLICY}
-                onPress={() => control.close()}>
-                privacy policy
-              </InlineLinkText>
-              .
-            </Trans>
-          </Text>
-        </View>
-      </View>
-      <View style={[a.gap_md, gtMobileWeb && a.flex_row_reverse]}>
-        <Button
-          label={_(msg`Enable GIPHY`)}
-          onPress={onShowPress}
-          onAccessibilityEscape={control.close}
-          color="primary"
-          size={gtMobileWeb ? 'small' : 'medium'}
-          variant="solid">
-          <ButtonText>
-            <Trans>Enable GIPHY</Trans>
-          </ButtonText>
-        </Button>
-        <Button
-          label={_(msg`No thanks`)}
-          onAccessibilityEscape={control.close}
-          onPress={onHidePress}
-          color="secondary"
-          size={gtMobileWeb ? 'small' : 'medium'}
-          variant="ghost">
-          <ButtonText>
-            <Trans>No thanks</Trans>
-          </ButtonText>
-        </Button>
-      </View>
+    <Dialog.ScrollableInner style={a.gap_md} label={_(msg`An error occured`)}>
+      <Dialog.Close />
+      <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={() => control.close()}
+        color="primary"
+        size="medium"
+        variant="solid">
+        <ButtonText>
+          <Trans>Close</Trans>
+        </ButtonText>
+      </Button>
     </Dialog.ScrollableInner>
   )
 }

src/components/dialogs/MutedWords.tsx

@@ -37,12 +37,12 @@ export function MutedWordsDialog() {
   return (
     <Dialog.Outer control={control}>
       <Dialog.Handle />
-      <MutedWordsInner control={control} />
+      <MutedWordsInner />
     </Dialog.Outer>
   )
 }
 
-function MutedWordsInner({}: {control: Dialog.DialogOuterProps['control']}) {
+function MutedWordsInner() {
   const t = useTheme()
   const {_} = useLingui()
   const {gtMobile} = useBreakpoints()

src/components/dialogs/SwitchAccount.tsx

@@ -6,7 +6,6 @@ import {useLingui} from '@lingui/react'
 import {useAccountSwitcher} from '#/lib/hooks/useAccountSwitcher'
 import {type SessionAccount, useSession} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
-import {useCloseAllActiveElements} from '#/state/util'
 import {atoms as a} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {AccountList} from '../AccountList'
@@ -19,25 +18,27 @@ export function SwitchAccountDialog({
 }) {
   const {_} = useLingui()
   const {currentAccount} = useSession()
-  const {onPressSwitchAccount} = useAccountSwitcher()
+  const {onPressSwitchAccount, pendingDid} = useAccountSwitcher()
   const {setShowLoggedOut} = useLoggedOutViewControls()
-  const closeAllActiveElements = useCloseAllActiveElements()
 
   const onSelectAccount = useCallback(
     (account: SessionAccount) => {
-      if (account.did === currentAccount?.did) {
-        control.close()
+      if (account.did !== currentAccount?.did) {
+        control.close(() => {
+          onPressSwitchAccount(account, 'SwitchAccount')
+        })
       } else {
-        onPressSwitchAccount(account, 'SwitchAccount')
+        control.close()
       }
     },
     [currentAccount, control, onPressSwitchAccount],
   )
 
   const onPressAddAccount = useCallback(() => {
-    setShowLoggedOut(true)
-    closeAllActiveElements()
-  }, [setShowLoggedOut, closeAllActiveElements])
+    control.close(() => {
+      setShowLoggedOut(true)
+    })
+  }, [setShowLoggedOut, control])
 
   return (
     <Dialog.Outer control={control}>
@@ -53,6 +54,7 @@ export function SwitchAccountDialog({
             onSelectAccount={onSelectAccount}
             onSelectOther={onPressAddAccount}
             otherLabel={_(msg`Add account`)}
+            pendingDid={pendingDid}
           />
         </View>
       </Dialog.ScrollableInner>

src/components/dms/ActionsWrapper.tsx

@@ -0,0 +1,83 @@
+import React, {useCallback} from 'react'
+import {Keyboard, Pressable, View} from 'react-native'
+import Animated, {
+  cancelAnimation,
+  runOnJS,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated'
+import {ChatBskyConvoDefs} from '@atproto-labs/api'
+
+import {useHaptics} from 'lib/haptics'
+import {atoms as a} from '#/alf'
+import {MessageMenu} from '#/components/dms/MessageMenu'
+import {useMenuControl} from '#/components/Menu'
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
+
+export function ActionsWrapper({
+  message,
+  isFromSelf,
+  children,
+}: {
+  message: ChatBskyConvoDefs.MessageView
+  isFromSelf: boolean
+  children: React.ReactNode
+}) {
+  const playHaptic = useHaptics()
+  const menuControl = useMenuControl()
+
+  const scale = useSharedValue(1)
+  const animationDidComplete = useSharedValue(false)
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{scale: scale.value}],
+  }))
+
+  // Reanimated's `runOnJS` doesn't like refs, so we can't use `runOnJS(menuControl.open)()`. Instead, we'll use this
+  // function
+  const open = useCallback(() => {
+    Keyboard.dismiss()
+    menuControl.open()
+  }, [menuControl])
+
+  const shrink = useCallback(() => {
+    'worklet'
+    cancelAnimation(scale)
+    scale.value = withTiming(1, {duration: 200}, () => {
+      animationDidComplete.value = false
+    })
+  }, [animationDidComplete, scale])
+
+  const grow = React.useCallback(() => {
+    'worklet'
+    scale.value = withTiming(1.05, {duration: 750}, finished => {
+      if (!finished) return
+      animationDidComplete.value = true
+      runOnJS(playHaptic)()
+      runOnJS(open)()
+
+      shrink()
+    })
+  }, [scale, animationDidComplete, playHaptic, shrink, open])
+
+  return (
+    <View
+      style={[
+        {
+          maxWidth: '65%',
+        },
+        isFromSelf ? a.self_end : a.self_start,
+      ]}>
+      <AnimatedPressable
+        style={animatedStyle}
+        unstable_pressDelay={200}
+        onPressIn={grow}
+        onTouchEnd={shrink}>
+        {children}
+      </AnimatedPressable>
+      <MessageMenu message={message} control={menuControl} hideTrigger={true} />
+    </View>
+  )
+}

src/components/dms/ActionsWrapper.web.tsx

@@ -0,0 +1,86 @@
+import React from 'react'
+import {StyleSheet, View} from 'react-native'
+import {ChatBskyConvoDefs} from '@atproto-labs/api'
+
+import {atoms as a} from '#/alf'
+import {MessageMenu} from '#/components/dms/MessageMenu'
+import {useMenuControl} from '#/components/Menu'
+
+export function ActionsWrapper({
+  message,
+  isFromSelf,
+  children,
+}: {
+  message: ChatBskyConvoDefs.MessageView
+  isFromSelf: boolean
+  children: React.ReactNode
+}) {
+  const menuControl = useMenuControl()
+  const viewRef = React.useRef(null)
+
+  const [showActions, setShowActions] = React.useState(false)
+
+  const onMouseEnter = React.useCallback(() => {
+    setShowActions(true)
+  }, [])
+
+  const onMouseLeave = React.useCallback(() => {
+    setShowActions(false)
+  }, [])
+
+  // We need to handle the `onFocus` separately because we want to know if there is a related target (the element
+  // that is losing focus). If there isn't that means the focus is coming from a dropdown that is now closed.
+  const onFocus = React.useCallback<React.FocusEventHandler>(e => {
+    if (e.nativeEvent.relatedTarget == null) return
+    setShowActions(true)
+  }, [])
+
+  return (
+    <View
+      // @ts-expect-error web only
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onFocus={onFocus}
+      onBlur={onMouseLeave}
+      style={StyleSheet.flatten([a.flex_1, a.flex_row])}
+      ref={viewRef}>
+      {isFromSelf && (
+        <View
+          style={[
+            a.mr_xl,
+            a.justify_center,
+            {
+              marginLeft: 'auto',
+            },
+          ]}>
+          <MessageMenu
+            message={message}
+            control={menuControl}
+            triggerOpacity={showActions || menuControl.isOpen ? 1 : 0}
+            onTriggerPress={onMouseEnter}
+            // @ts-expect-error web only
+            onMouseLeave={onMouseLeave}
+          />
+        </View>
+      )}
+      <View
+        style={{
+          maxWidth: '65%',
+        }}>
+        {children}
+      </View>
+      {!isFromSelf && (
+        <View style={[a.flex_row, a.align_center, a.ml_xl]}>
+          <MessageMenu
+            message={message}
+            control={menuControl}
+            triggerOpacity={showActions || menuControl.isOpen ? 1 : 0}
+            onTriggerPress={onMouseEnter}
+            // @ts-expect-error web only
+            onMouseLeave={onMouseLeave}
+          />
+        </View>
+      )}
+    </View>
+  )
+}

src/components/dms/ConvoMenu.tsx

@@ -0,0 +1,184 @@
+import React, {useCallback} from 'react'
+import {Keyboard, Pressable} from 'react-native'
+import {AppBskyActorDefs} from '@atproto/api'
+import {ChatBskyConvoDefs} from '@atproto-labs/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from '#/lib/routes/types'
+import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
+import {
+  useMuteConvo,
+  useUnmuteConvo,
+} from '#/state/queries/messages/mute-conversation'
+import * as Toast from '#/view/com/util/Toast'
+import {atoms as a, useTheme} from '#/alf'
+import {ArrowBoxLeft_Stroke2_Corner0_Rounded as ArrowBoxLeft} from '#/components/icons/ArrowBoxLeft'
+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 {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
+import * as Menu from '#/components/Menu'
+import * as Prompt from '#/components/Prompt'
+
+let ConvoMenu = ({
+  convo,
+  profile,
+  onUpdateConvo,
+  control,
+  hideTrigger,
+  currentScreen,
+}: {
+  convo: ChatBskyConvoDefs.ConvoView
+  profile: AppBskyActorDefs.ProfileViewBasic
+  onUpdateConvo?: (convo: ChatBskyConvoDefs.ConvoView) => void
+  control?: Menu.MenuControlProps
+  hideTrigger?: boolean
+  currentScreen: 'list' | 'conversation'
+}): React.ReactNode => {
+  const navigation = useNavigation<NavigationProp>()
+  const {_} = useLingui()
+  const t = useTheme()
+  const leaveConvoControl = Prompt.usePromptControl()
+
+  const onNavigateToProfile = useCallback(() => {
+    navigation.navigate('Profile', {name: profile.did})
+  }, [navigation, profile.did])
+
+  const {mutate: muteConvo} = useMuteConvo(convo.id, {
+    onSuccess: data => {
+      onUpdateConvo?.(data.convo)
+      Toast.show(_(msg`Chat muted`))
+    },
+    onError: () => {
+      Toast.show(_(msg`Could not mute chat`))
+    },
+  })
+
+  const {mutate: unmuteConvo} = useUnmuteConvo(convo.id, {
+    onSuccess: data => {
+      onUpdateConvo?.(data.convo)
+      Toast.show(_(msg`Chat unmuted`))
+    },
+    onError: () => {
+      Toast.show(_(msg`Could not unmute chat`))
+    },
+  })
+
+  const {mutate: leaveConvo} = useLeaveConvo(convo.id, {
+    onSuccess: () => {
+      if (currentScreen === 'conversation') {
+        navigation.replace('Messages')
+      }
+    },
+    onError: () => {
+      Toast.show(_(msg`Could not leave chat`))
+    },
+  })
+
+  return (
+    <>
+      <Menu.Root control={control}>
+        {!hideTrigger && (
+          <Menu.Trigger label={_(msg`Chat settings`)}>
+            {({props, state}) => (
+              <Pressable
+                {...props}
+                onPress={() => {
+                  Keyboard.dismiss()
+                  // eslint-disable-next-line react/prop-types -- eslint is confused by the name `props`
+                  props.onPress()
+                }}
+                style={[
+                  a.p_sm,
+                  a.rounded_sm,
+                  (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
+                  // make sure pfp is in the middle
+                  {marginLeft: -10},
+                ]}>
+                <DotsHorizontal size="lg" style={t.atoms.text} />
+              </Pressable>
+            )}
+          </Menu.Trigger>
+        )}
+        <Menu.Outer>
+          <Menu.Group>
+            <Menu.Item
+              label={_(msg`Go to user's profile`)}
+              onPress={onNavigateToProfile}>
+              <Menu.ItemText>
+                <Trans>Go to profile</Trans>
+              </Menu.ItemText>
+              <Menu.ItemIcon icon={Person} />
+            </Menu.Item>
+            <Menu.Item
+              label={_(msg`Mute notifications`)}
+              onPress={() => (convo?.muted ? unmuteConvo() : muteConvo())}>
+              <Menu.ItemText>
+                {convo?.muted ? (
+                  <Trans>Unmute notifications</Trans>
+                ) : (
+                  <Trans>Mute notifications</Trans>
+                )}
+              </Menu.ItemText>
+              <Menu.ItemIcon icon={convo?.muted ? Unmute : Mute} />
+            </Menu.Item>
+          </Menu.Group>
+          <Menu.Divider />
+          {/* TODO(samuel): implement these */}
+          <Menu.Group>
+            <Menu.Item
+              label={_(msg`Block account`)}
+              onPress={() => {}}
+              disabled>
+              <Menu.ItemText>
+                <Trans>Block account</Trans>
+              </Menu.ItemText>
+              <Menu.ItemIcon
+                icon={profile.viewer?.blocking ? PersonCheck : PersonX}
+              />
+            </Menu.Item>
+            <Menu.Item
+              label={_(msg`Report account`)}
+              onPress={() => {}}
+              disabled>
+              <Menu.ItemText>
+                <Trans>Report account</Trans>
+              </Menu.ItemText>
+              <Menu.ItemIcon icon={Flag} />
+            </Menu.Item>
+          </Menu.Group>
+          <Menu.Divider />
+          <Menu.Group>
+            <Menu.Item
+              label={_(msg`Leave conversation`)}
+              onPress={leaveConvoControl.open}>
+              <Menu.ItemText>
+                <Trans>Leave conversation</Trans>
+              </Menu.ItemText>
+              <Menu.ItemIcon icon={ArrowBoxLeft} />
+            </Menu.Item>
+          </Menu.Group>
+        </Menu.Outer>
+      </Menu.Root>
+
+      <Prompt.Basic
+        control={leaveConvoControl}
+        title={_(msg`Leave conversation`)}
+        description={_(
+          msg`Are you sure you want to leave this conversation? Your messages will be deleted for you, but not for other participants.`,
+        )}
+        confirmButtonCta={_(msg`Leave`)}
+        confirmButtonColor="negative"
+        onConfirm={() => leaveConvo()}
+      />
+    </>
+  )
+}
+ConvoMenu = React.memo(ConvoMenu)
+
+export {ConvoMenu}

src/components/dms/MessageItem.tsx

@@ -0,0 +1,198 @@
+import React, {useCallback, useMemo, useRef} from 'react'
+import {LayoutAnimation, StyleProp, TextStyle, View} from 'react-native'
+import {ChatBskyConvoDefs} from '@atproto-labs/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useSession} from '#/state/session'
+import {TimeElapsed} from 'view/com/util/TimeElapsed'
+import {atoms as a, useTheme} from '#/alf'
+import {ActionsWrapper} from '#/components/dms/ActionsWrapper'
+import {Text} from '#/components/Typography'
+
+export let MessageItem = ({
+  item,
+  next,
+  pending,
+}: {
+  item: ChatBskyConvoDefs.MessageView
+  next:
+    | ChatBskyConvoDefs.MessageView
+    | ChatBskyConvoDefs.DeletedMessageView
+    | null
+  pending?: boolean
+}): React.ReactNode => {
+  const t = useTheme()
+  const {currentAccount} = useSession()
+
+  const isFromSelf = item.sender?.did === currentAccount?.did
+
+  const isNextFromSelf =
+    ChatBskyConvoDefs.isMessageView(next) &&
+    next.sender?.did === currentAccount?.did
+
+  const isLastInGroup = useMemo(() => {
+    // TODO this means it's a placeholder. Let's figure out the right way to do this though!
+    if (item.id.length > 13) {
+      return false
+    }
+
+    // if the next message is from a different sender, then it's the last in the group
+    if (isFromSelf ? !isNextFromSelf : isNextFromSelf) {
+      return true
+    }
+
+    // or, if there's a 3 minute gap between this message and the next
+    if (ChatBskyConvoDefs.isMessageView(next)) {
+      const thisDate = new Date(item.sentAt)
+      const nextDate = new Date(next.sentAt)
+
+      const diff = nextDate.getTime() - thisDate.getTime()
+
+      // 3 minutes
+      return diff > 3 * 60 * 1000
+    }
+
+    return true
+  }, [item, next, isFromSelf, isNextFromSelf])
+
+  const lastInGroupRef = useRef(isLastInGroup)
+  if (lastInGroupRef.current !== isLastInGroup) {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    lastInGroupRef.current = isLastInGroup
+  }
+
+  const pendingColor =
+    t.name === 'light' ? t.palette.primary_200 : t.palette.primary_800
+
+  return (
+    <View>
+      <ActionsWrapper isFromSelf={isFromSelf} message={item}>
+        <View
+          style={[
+            a.py_sm,
+            a.my_2xs,
+            a.rounded_md,
+            {
+              paddingLeft: 14,
+              paddingRight: 14,
+              backgroundColor: isFromSelf
+                ? pending
+                  ? pendingColor
+                  : t.palette.primary_500
+                : t.palette.contrast_50,
+              borderRadius: 17,
+            },
+            isFromSelf
+              ? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
+              : {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
+          ]}>
+          <Text
+            style={[
+              a.text_md,
+              a.leading_snug,
+              isFromSelf && {color: t.palette.white},
+              pending && t.name !== 'light' && {color: t.palette.primary_300},
+            ]}>
+            {item.text}
+          </Text>
+        </View>
+      </ActionsWrapper>
+      <MessageItemMetadata
+        message={item}
+        isLastInGroup={isLastInGroup}
+        style={isFromSelf ? a.text_right : a.text_left}
+      />
+    </View>
+  )
+}
+
+MessageItem = React.memo(MessageItem)
+
+let MessageItemMetadata = ({
+  message,
+  isLastInGroup,
+  style,
+}: {
+  message: ChatBskyConvoDefs.MessageView
+  isLastInGroup: boolean
+  style: StyleProp<TextStyle>
+}): React.ReactNode => {
+  const t = useTheme()
+  const {_} = useLingui()
+
+  const relativeTimestamp = useCallback(
+    (timestamp: string) => {
+      const date = new Date(timestamp)
+      const now = new Date()
+
+      const time = new Intl.DateTimeFormat(undefined, {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+      }).format(date)
+
+      const diff = now.getTime() - date.getTime()
+
+      // if under 1 minute
+      if (diff < 1000 * 60) {
+        return _(msg`Now`)
+      }
+
+      // if in the last day
+      if (localDateString(now) === localDateString(date)) {
+        return time
+      }
+
+      // if yesterday
+      const yesterday = new Date(now)
+      yesterday.setDate(yesterday.getDate() - 1)
+
+      if (localDateString(yesterday) === localDateString(date)) {
+        return _(msg`Yesterday, ${time}`)
+      }
+
+      return new Intl.DateTimeFormat(undefined, {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: true,
+        day: 'numeric',
+        month: 'numeric',
+        year: 'numeric',
+      }).format(date)
+    },
+    [_],
+  )
+
+  if (!isLastInGroup) {
+    return null
+  }
+
+  return (
+    <TimeElapsed timestamp={message.sentAt} timeToString={relativeTimestamp}>
+      {({timeElapsed}) => (
+        <Text
+          style={[
+            t.atoms.text_contrast_medium,
+            a.text_xs,
+            a.mt_2xs,
+            a.mb_lg,
+            style,
+          ]}>
+          {timeElapsed}
+        </Text>
+      )}
+    </TimeElapsed>
+  )
+}
+
+MessageItemMetadata = React.memo(MessageItemMetadata)
+
+function localDateString(date: Date) {
+  // can't use toISOString because it should be in local time
+  const mm = date.getMonth()
+  const dd = date.getDate()
+  const yyyy = date.getFullYear()
+  // not padding with 0s because it's not necessary, it's just used for comparison
+  return `${yyyy}-${mm}-${dd}`
+}

src/components/dms/MessageMenu.tsx

@@ -0,0 +1,141 @@
+import React from 'react'
+import {LayoutAnimation, Pressable, View} from 'react-native'
+import * as Clipboard from 'expo-clipboard'
+import {ChatBskyConvoDefs} from '@atproto-labs/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useChat} from 'state/messages'
+import {ConvoStatus} 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 {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'
+import * as Menu from '#/components/Menu'
+import * as Prompt from '#/components/Prompt'
+import {usePromptControl} from '#/components/Prompt'
+import {Clipboard_Stroke2_Corner2_Rounded as ClipboardIcon} from '../icons/Clipboard'
+
+export let MessageMenu = ({
+  message,
+  control,
+  hideTrigger,
+  triggerOpacity,
+}: {
+  hideTrigger?: boolean
+  triggerOpacity?: number
+  onTriggerPress?: () => void
+  message: ChatBskyConvoDefs.MessageView
+  control: Menu.MenuControlProps
+}): React.ReactNode => {
+  const {_} = useLingui()
+  const t = useTheme()
+  const {currentAccount} = useSession()
+  const chat = useChat()
+  const deleteControl = usePromptControl()
+  const retryDeleteControl = usePromptControl()
+
+  const isFromSelf = message.sender?.did === currentAccount?.did
+
+  const onCopyPostText = React.useCallback(() => {
+    // use when we have rich text
+    // const str = richTextToString(richText, true)
+
+    Clipboard.setStringAsync(message.text)
+    Toast.show(_(msg`Copied to clipboard`))
+  }, [_, message.text])
+
+  const onDelete = React.useCallback(() => {
+    if (chat.status !== ConvoStatus.Ready) return
+
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    chat
+      .deleteMessage(message.id)
+      .then(() => Toast.show(_(msg`Message deleted`)))
+      .catch(() => retryDeleteControl.open())
+  }, [_, chat, message.id, retryDeleteControl])
+
+  const onReport = React.useCallback(() => {
+    // TODO report the message
+  }, [])
+
+  return (
+    <>
+      <Menu.Root control={control}>
+        {!hideTrigger && (
+          <View style={{opacity: triggerOpacity}}>
+            <Menu.Trigger label={_(msg`Chat settings`)}>
+              {({props, state}) => (
+                <Pressable
+                  {...props}
+                  style={[
+                    a.p_sm,
+                    a.rounded_full,
+                    (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
+                  ]}>
+                  <DotsHorizontal size="sm" style={t.atoms.text} />
+                </Pressable>
+              )}
+            </Menu.Trigger>
+          </View>
+        )}
+
+        <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 />
+          <Menu.Group>
+            <Menu.Item
+              testID="messageDropdownDeleteBtn"
+              label={_(msg`Delete message for me`)}
+              onPress={deleteControl.open}>
+              <Menu.ItemText>{_(msg`Delete for me`)}</Menu.ItemText>
+              <Menu.ItemIcon icon={Trash} position="right" />
+            </Menu.Item>
+            {!isFromSelf && (
+              <Menu.Item
+                testID="messageDropdownReportBtn"
+                label={_(msg`Report message`)}
+                onPress={onReport}>
+                <Menu.ItemText>{_(msg`Report`)}</Menu.ItemText>
+                <Menu.ItemIcon icon={Warning} position="right" />
+              </Menu.Item>
+            )}
+          </Menu.Group>
+        </Menu.Outer>
+      </Menu.Root>
+
+      <Prompt.Basic
+        control={deleteControl}
+        title={_(msg`Delete message`)}
+        description={_(
+          msg`Are you sure you want to delete this message? The message will be deleted for you, but not for other participants.`,
+        )}
+        confirmButtonCta={_(msg`Delete`)}
+        confirmButtonColor="negative"
+        onConfirm={onDelete}
+      />
+
+      <Prompt.Basic
+        control={retryDeleteControl}
+        title={_(msg`Failed to delete message`)}
+        description={_(
+          msg`An error occurred while trying to delete the message. Please try again.`,
+        )}
+        confirmButtonCta={_(msg`Retry`)}
+        confirmButtonColor="negative"
+        onConfirm={onDelete}
+      />
+    </>
+  )
+}
+MessageMenu = React.memo(MessageMenu)

src/components/dms/NewChat.tsx

@@ -0,0 +1,255 @@
+import React, {useCallback, useMemo, useRef, useState} from 'react'
+import {Keyboard, View} from 'react-native'
+import {AppBskyActorDefs, moderateProfile} from '@atproto/api'
+import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+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 {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, useTheme, web} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import * as TextField from '#/components/forms/TextField'
+import {MagnifyingGlass2_Stroke2_Corner0_Rounded as Search} from '#/components/icons/MagnifyingGlass2'
+import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {Button} from '../Button'
+import {Envelope_Stroke2_Corner0_Rounded as Envelope} from '../icons/Envelope'
+import {ListMaybePlaceholder} from '../Lists'
+import {Text} from '../Typography'
+
+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)
+    },
+    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%']}}}>
+        <Dialog.Handle />
+        <SearchablePeopleList onCreateChat={onCreateChat} />
+      </Dialog.Outer>
+    </>
+  )
+}
+
+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 [searchText, setSearchText] = useState('')
+
+  const {
+    data: actorAutocompleteData,
+    isFetching,
+    isError,
+    refetch,
+  } = useActorAutocompleteQuery(searchText, true)
+
+  const renderItem = useCallback(
+    ({item: profile}: {item: AppBskyActorDefs.ProfileView}) => {
+      if (!moderationOpts) return null
+      const moderation = moderateProfile(profile, moderationOpts)
+      return (
+        <Button
+          label={profile.displayName || sanitizeHandle(profile.handle)}
+          onPress={() => onCreateChat(profile.did)}>
+          {({hovered, pressed}) => (
+            <View
+              style={[
+                a.flex_1,
+                a.px_md,
+                a.py_sm,
+                a.gap_md,
+                a.align_center,
+                a.flex_row,
+                a.rounded_sm,
+                pressed
+                  ? t.atoms.bg_contrast_25
+                  : hovered
+                  ? t.atoms.bg_contrast_50
+                  : t.atoms.bg,
+              ]}>
+              <UserAvatar
+                size={40}
+                avatar={profile.avatar}
+                moderation={moderation.ui('avatar')}
+                type={profile.associated?.labeler ? 'labeler' : 'user'}
+              />
+              <View style={{flex: 1}}>
+                <Text
+                  style={[t.atoms.text, a.font_bold, a.leading_snug]}
+                  numberOfLines={1}>
+                  {sanitizeDisplayName(
+                    profile.displayName || sanitizeHandle(profile.handle),
+                    moderation.ui('displayName'),
+                  )}
+                </Text>
+                <Text style={t.atoms.text_contrast_high} numberOfLines={1}>
+                  {sanitizeHandle(profile.handle, '@')}
+                </Text>
+              </View>
+            </View>
+          )}
+        </Button>
+      )
+    },
+    [
+      moderationOpts,
+      onCreateChat,
+      t.atoms.bg_contrast_25,
+      t.atoms.bg_contrast_50,
+      t.atoms.bg,
+      t.atoms.text,
+      t.atoms.text_contrast_high,
+    ],
+  )
+
+  const listHeader = useMemo(() => {
+    return (
+      <View style={[a.relative, a.mb_lg]}>
+        {/* cover top corners */}
+        <View
+          style={[
+            a.absolute,
+            a.inset_0,
+            {
+              borderBottomLeftRadius: 8,
+              borderBottomRightRadius: 8,
+            },
+            t.atoms.bg,
+          ]}
+        />
+        <Dialog.Close />
+        <Text
+          style={[
+            a.text_2xl,
+            a.font_bold,
+            a.leading_tight,
+            a.pb_lg,
+            web(a.pt_lg),
+          ]}>
+          <Trans>Start a new chat</Trans>
+        </Text>
+        <TextField.Root>
+          <TextField.Icon icon={Search} />
+          <Dialog.Input
+            label={_(msg`Search profiles`)}
+            placeholder={_(msg`Search`)}
+            value={searchText}
+            onChangeText={text => {
+              setSearchText(text)
+              listRef.current?.scrollToOffset({offset: 0, animated: false})
+            }}
+            returnKeyType="search"
+            clearButtonMode="while-editing"
+            maxLength={50}
+            onKeyPress={({nativeEvent}) => {
+              if (nativeEvent.key === 'Escape') {
+                control.close()
+              }
+            }}
+            autoCorrect={false}
+            autoComplete="off"
+            autoCapitalize="none"
+            autoFocus
+          />
+        </TextField.Root>
+      </View>
+    )
+  }, [t.atoms.bg, _, control, searchText])
+
+  return (
+    <Dialog.InnerFlatList
+      ref={listRef}
+      data={actorAutocompleteData}
+      renderItem={renderItem}
+      ListHeaderComponent={
+        <>
+          {listHeader}
+          {searchText.length === 0 ? (
+            <View style={[a.pt_4xl, a.align_center, a.px_lg]}>
+              <Envelope width={64} fill={t.palette.contrast_200} />
+              <Text
+                style={[
+                  a.text_lg,
+                  a.text_center,
+                  a.mt_md,
+                  t.atoms.text_contrast_low,
+                ]}>
+                <Trans>Search for someone to start a conversation with.</Trans>
+              </Text>
+            </View>
+          ) : (
+            !actorAutocompleteData?.length && (
+              <ListMaybePlaceholder
+                isLoading={isFetching}
+                isError={isError}
+                onRetry={refetch}
+                hideBackButton={true}
+                emptyType="results"
+                sideBorders={false}
+                emptyMessage={
+                  isError
+                    ? _(msg`No search results found for "${searchText}".`)
+                    : _(msg`Could not load profiles. Please try again later.`)
+                }
+              />
+            )
+          )}
+        </>
+      }
+      stickyHeaderIndices={[0]}
+      keyExtractor={(item: AppBskyActorDefs.ProfileView) => item.did}
+      // @ts-expect-error web only
+      style={isWeb && {minHeight: '100vh'}}
+      onScrollBeginDrag={() => Keyboard.dismiss()}
+    />
+  )
+}

src/components/hooks/useRefreshOnFocus.ts

@@ -0,0 +1,17 @@
+import {useCallback, useRef} from 'react'
+import {useFocusEffect} from '@react-navigation/native'
+
+export function useRefreshOnFocus<T>(refetch: () => Promise<T>) {
+  const firstTimeRef = useRef(true)
+
+  useFocusEffect(
+    useCallback(() => {
+      if (firstTimeRef.current) {
+        firstTimeRef.current = false
+        return
+      }
+
+      refetch()
+    }, [refetch]),
+  )
+}

src/components/hooks/useRichText.ts

@@ -1,12 +1,13 @@
 import React from 'react'
 import {RichText as RichTextAPI} from '@atproto/api'
 
-import {getAgent} from '#/state/session'
+import {useAgent} from '#/state/session'
 
 export function useRichText(text: string): [RichTextAPI, boolean] {
   const [prevText, setPrevText] = React.useState(text)
   const [rawRT, setRawRT] = React.useState(() => new RichTextAPI({text}))
   const [resolvedRT, setResolvedRT] = React.useState<RichTextAPI | null>(null)
+  const {getAgent} = useAgent()
   if (text !== prevText) {
     setPrevText(text)
     setRawRT(new RichTextAPI({text}))
@@ -27,7 +28,7 @@ export function useRichText(text: string): [RichTextAPI, boolean] {
     return () => {
       ignore = true
     }
-  }, [text])
+  }, [text, getAgent])
   const isResolving = resolvedRT === null
   return [resolvedRT ?? rawRT, isResolving]
 }

src/components/icons/ArrowBoxLeft.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const ArrowBoxLeft_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3.293 3.293A1 1 0 0 1 4 3h7.25a1 1 0 1 1 0 2H5v14h6.25a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1V4a1 1 0 0 1 .293-.707Zm11.5 3.5a1 1 0 0 1 1.414 0l4.5 4.5a1 1 0 0 1 0 1.414l-4.5 4.5a1 1 0 0 1-1.414-1.414L17.586 13H8.75a1 1 0 1 1 0-2h8.836l-2.793-2.793a1 1 0 0 1 0-1.414Z',
+})

src/components/icons/Envelope.tsx

@@ -3,3 +3,7 @@ import {createSinglePathSVG} from './TEMPLATE'
 export const Envelope_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M4.568 4h14.864c.252 0 .498 0 .706.017.229.019.499.063.77.201a2 2 0 0 1 .874.874c.138.271.182.541.201.77.017.208.017.454.017.706v10.864c0 .252 0 .498-.017.706a2.022 2.022 0 0 1-.201.77 2 2 0 0 1-.874.874 2.022 2.022 0 0 1-.77.201c-.208.017-.454.017-.706.017H4.568c-.252 0-.498 0-.706-.017a2.022 2.022 0 0 1-.77-.201 2 2 0 0 1-.874-.874 2.022 2.022 0 0 1-.201-.77C2 17.93 2 17.684 2 17.432V6.568c0-.252 0-.498.017-.706.019-.229.063-.499.201-.77a2 2 0 0 1 .874-.874c.271-.138.541-.182.77-.201C4.07 4 4.316 4 4.568 4Zm.456 2L12 11.708 18.976 6H5.024ZM20 7.747l-6.733 5.509a2 2 0 0 1-2.534 0L4 7.746V17.4a8.187 8.187 0 0 0 .011.589h.014c.116.01.278.011.575.011h14.8a8.207 8.207 0 0 0 .589-.012v-.013c.01-.116.011-.279.011-.575V7.747Z',
 })
+
+export const Envelope_Filled_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 11.708 2.654 4.06A.998.998 0 0 1 3 4h18c.122 0 .238.022.346.061L12 11.708ZM2 19V6.11l9.367 7.664a1 1 0 0 0 1.266 0L22 6.11V19a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1Z',
+})

src/components/icons/PaperPlane.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const PaperPlane_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3.374 3.22a1 1 0 0 1 1.073-.114l16 8a1 1 0 0 1 0 1.788l-16 8a1 1 0 0 1-1.417-1.136L4.97 12 3.03 4.243a1 1 0 0 1 .344-1.023ZM6.781 13l-1.284 5.133L17.764 12 5.497 5.867 6.781 11H9a1 1 0 1 1 0 2H6.78Z',
+})

src/components/icons/Plus.tsx

@@ -3,3 +3,7 @@ import {createSinglePathSVG} from './TEMPLATE'
 export const PlusLarge_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M12 3a1 1 0 0 1 1 1v7h7a1 1 0 1 1 0 2h-7v7a1 1 0 1 1-2 0v-7H4a1 1 0 1 1 0-2h7V4a1 1 0 0 1 1-1Z',
 })
+
+export const PlusSmall_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 6a1 1 0 0 1 1 1v4h4a1 1 0 1 1 0 2h-4v4a1 1 0 1 1-2 0v-4H7a1 1 0 1 1 0-2h4V7a1 1 0 0 1 1-1Z',
+})

src/components/icons/SettingsSlider.tsx

@@ -0,0 +1,6 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const SettingsSliderVertical_Stroke2_Corner0_Rounded =
+  createSinglePathSVG({
+    path: 'M7 3a1 1 0 0 1 1 1v1.126a4 4 0 0 1 0 7.748V20a1 1 0 1 1-2 0v-7.126a4 4 0 0 1 0-7.748V4a1 1 0 0 1 1-1Zm10 0a1 1 0 0 1 1 1v9.126a4 4 0 1 1-2 0V4a1 1 0 0 1 1-1ZM7 7a2 2 0 1 0 0 4 2 2 0 1 0 0-4Zm10 8a2 2 0 1 0 0 4 2 2 0 1 0 0-4Z',
+  })

src/components/icons/TEMPLATE.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import Svg, {Path} from 'react-native-svg'
 
-import {useCommonSVGProps, Props} from '#/components/icons/common'
+import {Props, useCommonSVGProps} from '#/components/icons/common'
 
 export const IconTemplate_Stroke2_Corner0_Rounded = React.forwardRef(
   function LogoImpl(props: Props, ref) {

src/components/moderation/LabelsOnMeDialog.tsx

@@ -7,7 +7,7 @@ import {useLingui} from '@lingui/react'
 import {useLabelInfo} from '#/lib/moderation/useLabelInfo'
 import {makeProfileLink} from '#/lib/routes/links'
 import {sanitizeHandle} from '#/lib/strings/handles'
-import {getAgent} from '#/state/session'
+import {useAgent} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
@@ -173,6 +173,7 @@ function AppealForm({
   const {gtMobile} = useBreakpoints()
   const [details, setDetails] = React.useState('')
   const isAccountReport = 'did' in subject
+  const {getAgent} = useAgent()
 
   const onSubmit = async () => {
     try {

src/components/moderation/PostHider.tsx

@@ -1,25 +1,27 @@
 import React, {ComponentProps} from 'react'
-import {StyleSheet, Pressable, View, ViewStyle, StyleProp} from 'react-native'
-import {ModerationUI} from '@atproto/api'
+import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
+import {AppBskyActorDefs, ModerationUI} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {Trans, msg} from '@lingui/macro'
+import {useQueryClient} from '@tanstack/react-query'
 
 import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
 import {addStyle} from 'lib/styles'
-
-import {useTheme, atoms as a} from '#/alf'
+import {precacheProfile} from 'state/queries/profile'
+// import {Link} from '#/components/Link' TODO this imposes some styles that screw things up
+import {Link} from '#/view/com/util/Link'
+import {atoms as a, useTheme} from '#/alf'
 import {
   ModerationDetailsDialog,
   useModerationDetailsDialogControl,
 } from '#/components/moderation/ModerationDetailsDialog'
 import {Text} from '#/components/Typography'
-// import {Link} from '#/components/Link' TODO this imposes some styles that screw things up
-import {Link} from '#/view/com/util/Link'
 
 interface Props extends ComponentProps<typeof Link> {
   iconSize: number
   iconStyles: StyleProp<ViewStyle>
   modui: ModerationUI
+  profile: AppBskyActorDefs.ProfileViewBasic
 }
 
 export function PostHider({
@@ -30,8 +32,10 @@ export function PostHider({
   children,
   iconSize,
   iconStyles,
+  profile,
   ...props
 }: Props) {
+  const queryClient = useQueryClient()
   const t = useTheme()
   const {_} = useLingui()
   const [override, setOverride] = React.useState(false)
@@ -39,6 +43,10 @@ export function PostHider({
   const blur = modui.blurs[0]
   const desc = useModerationCauseDescription(blur)
 
+  const onBeforePress = React.useCallback(() => {
+    precacheProfile(queryClient, profile)
+  }, [queryClient, profile])
+
   if (!blur) {
     return (
       <Link
@@ -46,6 +54,7 @@ export function PostHider({
         style={style}
         href={href}
         accessible={false}
+        onBeforePress={onBeforePress}
         {...props}>
         {children}
       </Link>

src/lib/ScrollContext.tsx

@@ -5,6 +5,7 @@ const ScrollContext = createContext<ScrollHandlers<any>>({
   onBeginDrag: undefined,
   onEndDrag: undefined,
   onScroll: undefined,
+  onMomentumEnd: undefined,
 })
 
 export function useScrollHandlers(): ScrollHandlers<any> {
@@ -20,14 +21,16 @@ export function ScrollProvider({
   onBeginDrag,
   onEndDrag,
   onScroll,
+  onMomentumEnd,
 }: ProviderProps) {
   const handlers = useMemo(
     () => ({
       onBeginDrag,
       onEndDrag,
       onScroll,
+      onMomentumEnd,
     }),
-    [onBeginDrag, onEndDrag, onScroll],
+    [onBeginDrag, onEndDrag, onScroll, onMomentumEnd],
   )
   return (
     <ScrollContext.Provider value={handlers}>{children}</ScrollContext.Provider>

src/lib/analytics/types.ts

@@ -76,6 +76,7 @@ export type TrackPropertiesMap = {
   'MobileShell:SearchButtonPressed': {}
   'MobileShell:NotificationsButtonPressed': {}
   'MobileShell:FeedsButtonPressed': {}
+  'MobileShell:MessagesButtonPressed': {}
   // NOTIFICATIONS events
   'Notificatons:OpenApp': {}
   // LISTS events

src/lib/api/feed/author.ts

@@ -1,15 +1,28 @@
 import {
   AppBskyFeedDefs,
   AppBskyFeedGetAuthorFeed as GetAuthorFeed,
+  BskyAgent,
 } from '@atproto/api'
+
 import {FeedAPI, FeedAPIResponse} from './types'
-import {getAgent} from '#/state/session'
 
 export class AuthorFeedAPI implements FeedAPI {
-  constructor(public params: GetAuthorFeed.QueryParams) {}
+  getAgent: () => BskyAgent
+  params: GetAuthorFeed.QueryParams
+
+  constructor({
+    getAgent,
+    feedParams,
+  }: {
+    getAgent: () => BskyAgent
+    feedParams: GetAuthorFeed.QueryParams
+  }) {
+    this.getAgent = getAgent
+    this.params = feedParams
+  }
 
   async peekLatest(): Promise<AppBskyFeedDefs.FeedViewPost> {
-    const res = await getAgent().getAuthorFeed({
+    const res = await this.getAgent().getAuthorFeed({
       ...this.params,
       limit: 1,
     })
@@ -23,7 +36,7 @@ export class AuthorFeedAPI implements FeedAPI {
     cursor: string | undefined
     limit: number
   }): Promise<FeedAPIResponse> {
-    const res = await getAgent().getAuthorFeed({
+    const res = await this.getAgent().getAuthorFeed({
       ...this.params,
       cursor,
       limit,

src/lib/api/feed/custom.ts

@@ -2,18 +2,35 @@ import {
   AppBskyFeedDefs,
   AppBskyFeedGetFeed as GetCustomFeed,
   AtpAgent,
+  BskyAgent,
 } from '@atproto/api'
 
 import {getContentLanguages} from '#/state/preferences/languages'
-import {getAgent} from '#/state/session'
 import {FeedAPI, FeedAPIResponse} from './types'
+import {createBskyTopicsHeader, isBlueskyOwnedFeed} from './utils'
 
 export class CustomFeedAPI implements FeedAPI {
-  constructor(public params: GetCustomFeed.QueryParams) {}
+  getAgent: () => BskyAgent
+  params: GetCustomFeed.QueryParams
+  userInterests?: string
+
+  constructor({
+    getAgent,
+    feedParams,
+    userInterests,
+  }: {
+    getAgent: () => BskyAgent
+    feedParams: GetCustomFeed.QueryParams
+    userInterests?: string
+  }) {
+    this.getAgent = getAgent
+    this.params = feedParams
+    this.userInterests = userInterests
+  }
 
   async peekLatest(): Promise<AppBskyFeedDefs.FeedViewPost> {
     const contentLangs = getContentLanguages().join(',')
-    const res = await getAgent().app.bsky.feed.getFeed(
+    const res = await this.getAgent().app.bsky.feed.getFeed(
       {
         ...this.params,
         limit: 1,
@@ -31,15 +48,24 @@ export class CustomFeedAPI implements FeedAPI {
     limit: number
   }): Promise<FeedAPIResponse> {
     const contentLangs = getContentLanguages().join(',')
-    const agent = getAgent()
+    const agent = this.getAgent()
+    const isBlueskyOwned = isBlueskyOwnedFeed(this.params.feed)
+
     const res = agent.session
-      ? await getAgent().app.bsky.feed.getFeed(
+      ? await this.getAgent().app.bsky.feed.getFeed(
           {
             ...this.params,
             cursor,
             limit,
           },
-          {headers: {'Accept-Language': contentLangs}},
+          {
+            headers: {
+              ...(isBlueskyOwned
+                ? createBskyTopicsHeader(this.userInterests)
+                : {}),
+              'Accept-Language': contentLangs,
+            },
+          },
         )
       : await loggedOutFetch({...this.params, cursor, limit})
     if (res.success) {

src/lib/api/feed/following.ts

@@ -1,12 +1,16 @@
-import {AppBskyFeedDefs} from '@atproto/api'
+import {AppBskyFeedDefs, BskyAgent} from '@atproto/api'
+
 import {FeedAPI, FeedAPIResponse} from './types'
-import {getAgent} from '#/state/session'
 
 export class FollowingFeedAPI implements FeedAPI {
-  constructor() {}
+  getAgent: () => BskyAgent
+
+  constructor({getAgent}: {getAgent: () => BskyAgent}) {
+    this.getAgent = getAgent
+  }
 
   async peekLatest(): Promise<AppBskyFeedDefs.FeedViewPost> {
-    const res = await getAgent().getTimeline({
+    const res = await this.getAgent().getTimeline({
       limit: 1,
     })
     return res.data.feed[0]
@@ -19,7 +23,7 @@ export class FollowingFeedAPI implements FeedAPI {
     cursor: string | undefined
     limit: number
   }): Promise<FeedAPIResponse> {
-    const res = await getAgent().getTimeline({
+    const res = await this.getAgent().getTimeline({
       cursor,
       limit,
     })

src/lib/api/feed/home.ts

@@ -1,8 +1,9 @@
-import {AppBskyFeedDefs} from '@atproto/api'
-import {FeedAPI, FeedAPIResponse} from './types'
-import {FollowingFeedAPI} from './following'
-import {CustomFeedAPI} from './custom'
+import {AppBskyFeedDefs, BskyAgent} from '@atproto/api'
+
 import {PROD_DEFAULT_FEED} from '#/lib/constants'
+import {CustomFeedAPI} from './custom'
+import {FollowingFeedAPI} from './following'
+import {FeedAPI, FeedAPIResponse} from './types'
 
 // HACK
 // the feed API does not include any facilities for passing down
@@ -26,19 +27,36 @@ export const FALLBACK_MARKER_POST: AppBskyFeedDefs.FeedViewPost = {
 }
 
 export class HomeFeedAPI implements FeedAPI {
+  getAgent: () => BskyAgent
   following: FollowingFeedAPI
   discover: CustomFeedAPI
   usingDiscover = false
   itemCursor = 0
+  userInterests?: string
 
-  constructor() {
-    this.following = new FollowingFeedAPI()
-    this.discover = new CustomFeedAPI({feed: PROD_DEFAULT_FEED('whats-hot')})
+  constructor({
+    userInterests,
+    getAgent,
+  }: {
+    userInterests?: string
+    getAgent: () => BskyAgent
+  }) {
+    this.getAgent = getAgent
+    this.following = new FollowingFeedAPI({getAgent})
+    this.discover = new CustomFeedAPI({
+      getAgent,
+      feedParams: {feed: PROD_DEFAULT_FEED('whats-hot')},
+    })
+    this.userInterests = userInterests
   }
 
   reset() {
-    this.following = new FollowingFeedAPI()
-    this.discover = new CustomFeedAPI({feed: PROD_DEFAULT_FEED('whats-hot')})
+    this.following = new FollowingFeedAPI({getAgent: this.getAgent})
+    this.discover = new CustomFeedAPI({
+      getAgent: this.getAgent,
+      feedParams: {feed: PROD_DEFAULT_FEED('whats-hot')},
+      userInterests: this.userInterests,
+    })
     this.usingDiscover = false
     this.itemCursor = 0
   }

src/lib/api/feed/likes.ts

@@ -1,15 +1,28 @@
 import {
   AppBskyFeedDefs,
   AppBskyFeedGetActorLikes as GetActorLikes,
+  BskyAgent,
 } from '@atproto/api'
+
 import {FeedAPI, FeedAPIResponse} from './types'
-import {getAgent} from '#/state/session'
 
 export class LikesFeedAPI implements FeedAPI {
-  constructor(public params: GetActorLikes.QueryParams) {}
+  getAgent: () => BskyAgent
+  params: GetActorLikes.QueryParams
+
+  constructor({
+    getAgent,
+    feedParams,
+  }: {
+    getAgent: () => BskyAgent
+    feedParams: GetActorLikes.QueryParams
+  }) {
+    this.getAgent = getAgent
+    this.params = feedParams
+  }
 
   async peekLatest(): Promise<AppBskyFeedDefs.FeedViewPost> {
-    const res = await getAgent().getActorLikes({
+    const res = await this.getAgent().getActorLikes({
       ...this.params,
       limit: 1,
     })
@@ -23,7 +36,7 @@ export class LikesFeedAPI implements FeedAPI {
     cursor: string | undefined
     limit: number
   }): Promise<FeedAPIResponse> {
-    const res = await getAgent().getActorLikes({
+    const res = await this.getAgent().getActorLikes({
       ...this.params,
       cursor,
       limit,

src/lib/api/feed/list.ts

@@ -1,15 +1,28 @@
 import {
   AppBskyFeedDefs,
   AppBskyFeedGetListFeed as GetListFeed,
+  BskyAgent,
 } from '@atproto/api'
+
 import {FeedAPI, FeedAPIResponse} from './types'
-import {getAgent} from '#/state/session'
 
 export class ListFeedAPI implements FeedAPI {
-  constructor(public params: GetListFeed.QueryParams) {}
+  getAgent: () => BskyAgent
+  params: GetListFeed.QueryParams
+
+  constructor({
+    getAgent,
+    feedParams,
+  }: {
+    getAgent: () => BskyAgent
+    feedParams: GetListFeed.QueryParams
+  }) {
+    this.getAgent = getAgent
+    this.params = feedParams
+  }
 
   async peekLatest(): Promise<AppBskyFeedDefs.FeedViewPost> {
-    const res = await getAgent().app.bsky.feed.getListFeed({
+    const res = await this.getAgent().app.bsky.feed.getListFeed({
       ...this.params,
       limit: 1,
     })
@@ -23,7 +36,7 @@ export class ListFeedAPI implements FeedAPI {
     cursor: string | undefined
     limit: number
   }): Promise<FeedAPIResponse> {
-    const res = await getAgent().app.bsky.feed.getListFeed({
+    const res = await this.getAgent().app.bsky.feed.getListFeed({
       ...this.params,
       cursor,
       limit,

src/lib/api/feed/merge.ts

@@ -1,31 +1,56 @@
-import {AppBskyFeedDefs, AppBskyFeedGetTimeline} from '@atproto/api'
+import {AppBskyFeedDefs, AppBskyFeedGetTimeline, BskyAgent} from '@atproto/api'
 import shuffle from 'lodash.shuffle'
-import {timeout} from 'lib/async/timeout'
+
+import {getContentLanguages} from '#/state/preferences/languages'
+import {FeedParams} from '#/state/queries/post-feed'
 import {bundleAsync} from 'lib/async/bundle'
+import {timeout} from 'lib/async/timeout'
 import {feedUriToHref} from 'lib/strings/url-helpers'
 import {FeedTuner} from '../feed-manip'
-import {FeedAPI, FeedAPIResponse, ReasonFeedSource} from './types'
-import {FeedParams} from '#/state/queries/post-feed'
 import {FeedTunerFn} from '../feed-manip'
-import {getAgent} from '#/state/session'
-import {getContentLanguages} from '#/state/preferences/languages'
+import {FeedAPI, FeedAPIResponse, ReasonFeedSource} from './types'
+import {createBskyTopicsHeader, isBlueskyOwnedFeed} from './utils'
 
 const REQUEST_WAIT_MS = 500 // 500ms
 const POST_AGE_CUTOFF = 60e3 * 60 * 24 // 24hours
 
 export class MergeFeedAPI implements FeedAPI {
+  userInterests?: string
+  getAgent: () => BskyAgent
+  params: FeedParams
+  feedTuners: FeedTunerFn[]
   following: MergeFeedSource_Following
   customFeeds: MergeFeedSource_Custom[] = []
   feedCursor = 0
   itemCursor = 0
   sampleCursor = 0
 
-  constructor(public params: FeedParams, public feedTuners: FeedTunerFn[]) {
-    this.following = new MergeFeedSource_Following(this.feedTuners)
+  constructor({
+    getAgent,
+    feedParams,
+    feedTuners,
+    userInterests,
+  }: {
+    getAgent: () => BskyAgent
+    feedParams: FeedParams
+    feedTuners: FeedTunerFn[]
+    userInterests?: string
+  }) {
+    this.getAgent = getAgent
+    this.params = feedParams
+    this.feedTuners = feedTuners
+    this.userInterests = userInterests
+    this.following = new MergeFeedSource_Following({
+      getAgent: this.getAgent,
+      feedTuners: this.feedTuners,
+    })
   }
 
   reset() {
-    this.following = new MergeFeedSource_Following(this.feedTuners)
+    this.following = new MergeFeedSource_Following({
+      getAgent: this.getAgent,
+      feedTuners: this.feedTuners,
+    })
     this.customFeeds = []
     this.feedCursor = 0
     this.itemCursor = 0
@@ -33,7 +58,13 @@ export class MergeFeedAPI implements FeedAPI {
     if (this.params.mergeFeedSources) {
       this.customFeeds = shuffle(
         this.params.mergeFeedSources.map(
-          feedUri => new MergeFeedSource_Custom(feedUri, this.feedTuners),
+          feedUri =>
+            new MergeFeedSource_Custom({
+              getAgent: this.getAgent,
+              feedUri,
+              feedTuners: this.feedTuners,
+              userInterests: this.userInterests,
+            }),
         ),
       )
     } else {
@@ -42,7 +73,7 @@ export class MergeFeedAPI implements FeedAPI {
   }
 
   async peekLatest(): Promise<AppBskyFeedDefs.FeedViewPost> {
-    const res = await getAgent().getTimeline({
+    const res = await this.getAgent().getTimeline({
       limit: 1,
     })
     return res.data.feed[0]
@@ -136,12 +167,23 @@ export class MergeFeedAPI implements FeedAPI {
 }
 
 class MergeFeedSource {
+  getAgent: () => BskyAgent
+  feedTuners: FeedTunerFn[]
   sourceInfo: ReasonFeedSource | undefined
   cursor: string | undefined = undefined
   queue: AppBskyFeedDefs.FeedViewPost[] = []
   hasMore = true
 
-  constructor(public feedTuners: FeedTunerFn[]) {}
+  constructor({
+    getAgent,
+    feedTuners,
+  }: {
+    getAgent: () => BskyAgent
+    feedTuners: FeedTunerFn[]
+  }) {
+    this.getAgent = getAgent
+    this.feedTuners = feedTuners
+  }
 
   get numReady() {
     return this.queue.length
@@ -203,7 +245,7 @@ class MergeFeedSource_Following extends MergeFeedSource {
     cursor: string | undefined,
     limit: number,
   ): Promise<AppBskyFeedGetTimeline.Response> {
-    const res = await getAgent().getTimeline({cursor, limit})
+    const res = await this.getAgent().getTimeline({cursor, limit})
     // run the tuner pre-emptively to ensure better mixing
     const slices = this.tuner.tune(res.data.feed, {
       dryRun: false,
@@ -215,10 +257,29 @@ class MergeFeedSource_Following extends MergeFeedSource {
 }
 
 class MergeFeedSource_Custom extends MergeFeedSource {
+  getAgent: () => BskyAgent
   minDate: Date
+  feedUri: string
+  userInterests?: string
 
-  constructor(public feedUri: string, public feedTuners: FeedTunerFn[]) {
-    super(feedTuners)
+  constructor({
+    getAgent,
+    feedUri,
+    feedTuners,
+    userInterests,
+  }: {
+    getAgent: () => BskyAgent
+    feedUri: string
+    feedTuners: FeedTunerFn[]
+    userInterests?: string
+  }) {
+    super({
+      getAgent,
+      feedTuners,
+    })
+    this.getAgent = getAgent
+    this.feedUri = feedUri
+    this.userInterests = userInterests
     this.sourceInfo = {
       $type: 'reasonFeedSource',
       uri: feedUri,
@@ -233,13 +294,21 @@ class MergeFeedSource_Custom extends MergeFeedSource {
   ): Promise<AppBskyFeedGetTimeline.Response> {
     try {
       const contentLangs = getContentLanguages().join(',')
-      const res = await getAgent().app.bsky.feed.getFeed(
+      const isBlueskyOwned = isBlueskyOwnedFeed(this.feedUri)
+      const res = await this.getAgent().app.bsky.feed.getFeed(
         {
           cursor,
           limit,
           feed: this.feedUri,
         },
-        {headers: {'Accept-Language': contentLangs}},
+        {
+          headers: {
+            ...(isBlueskyOwned
+              ? createBskyTopicsHeader(this.userInterests)
+              : {}),
+            'Accept-Language': contentLangs,
+          },
+        },
       )
       // NOTE
       // some custom feeds fail to enforce the pagination limit

src/lib/api/feed/utils.ts

@@ -0,0 +1,21 @@
+import {AtUri} from '@atproto/api'
+
+import {BSKY_FEED_OWNER_DIDS} from '#/lib/constants'
+import {UsePreferencesQueryResponse} from '#/state/queries/preferences'
+
+export function createBskyTopicsHeader(userInterests?: string) {
+  return {
+    'X-Bsky-Topics': userInterests || '',
+  }
+}
+
+export function aggregateUserInterests(
+  preferences?: UsePreferencesQueryResponse,
+) {
+  return preferences?.interests?.tags?.join(',') || ''
+}
+
+export function isBlueskyOwnedFeed(feedUri: string) {
+  const uri = new AtUri(feedUri)
+  return BSKY_FEED_OWNER_DIDS.includes(uri.host)
+}

src/lib/api/index.ts

@@ -1,4 +1,3 @@
-import {deleteAsync} from 'expo-file-system'
 import {
   AppBskyEmbedExternal,
   AppBskyEmbedImages,
@@ -20,6 +19,7 @@ import {shortenLinks} from 'lib/strings/rich-text-manip'
 import {isNative, isWeb} from 'platform/detection'
 import {ImageModel} from 'state/models/media/image'
 import {LinkMeta} from '../link-meta/link-meta'
+import {safeDeleteAsync} from '../media/manip'
 
 export interface ExternalEmbedDraft {
   uri: string
@@ -119,15 +119,9 @@ export async function post(agent: BskyAgent, opts: PostOpts) {
       const {width, height} = image.compressed || image
       logger.debug(`Uploading image`)
       const res = await uploadBlob(agent, path, 'image/jpeg')
-
       if (isNative) {
-        try {
-          deleteAsync(path)
-        } catch (e) {
-          console.error(e)
-        }
+        safeDeleteAsync(path)
       }
-
       images.push({
         image: res.data.blob,
         alt: image.altText ?? '',
@@ -182,13 +176,8 @@ export async function post(agent: BskyAgent, opts: PostOpts) {
             encoding,
           )
           thumb = thumbUploadRes.data.blob
-
-          try {
-            if (isNative) {
-              deleteAsync(opts.extLink.localThumb.path)
-            }
-          } catch (e) {
-            console.error(e)
+          if (isNative) {
+            safeDeleteAsync(opts.extLink.localThumb.path)
           }
         }
       }

src/lib/app-info.ts

@@ -4,7 +4,17 @@ export const BUILD_ENV = process.env.EXPO_PUBLIC_ENV
 export const IS_DEV = process.env.EXPO_PUBLIC_ENV === 'development'
 export const IS_TESTFLIGHT = process.env.EXPO_PUBLIC_ENV === 'testflight'
 
-const UPDATES_CHANNEL = IS_TESTFLIGHT ? 'testflight' : 'production'
-export const appVersion = `${nativeApplicationVersion} (${nativeBuildVersion}, ${
-  IS_DEV ? 'development' : UPDATES_CHANNEL
+// This is the commit hash that the current bundle was made from. The user can see the commit hash in the app's settings
+// along with the other version info. Useful for debugging/reporting.
+export const BUNDLE_IDENTIFIER =
+  process.env.EXPO_PUBLIC_BUNDLE_IDENTIFIER ?? 'dev'
+
+// This will always be in the format of YYMMDD, so that it always increases for each build. This should only be used
+// for Statsig reporting and shouldn't be used to identify a specific bundle.
+export const BUNDLE_DATE =
+  IS_TESTFLIGHT || IS_DEV ? 0 : Number(process.env.EXPO_PUBLIC_BUNDLE_DATE)
+
+export const appVersion = `${nativeApplicationVersion}.${nativeBuildVersion}`
+export const bundleInfo = `${BUNDLE_IDENTIFIER} (${
+  IS_DEV ? 'dev' : IS_TESTFLIGHT ? 'tf' : 'prod'
 })`

src/lib/app-info.web.ts

@@ -1,2 +1,17 @@
 import {version} from '../../package.json'
+
+export const IS_DEV = process.env.EXPO_PUBLIC_ENV === 'development'
+
+// This is the commit hash that the current bundle was made from. The user can see the commit hash in the app's settings
+// along with the other version info. Useful for debugging/reporting.
+export const BUNDLE_IDENTIFIER =
+  process.env.EXPO_PUBLIC_BUNDLE_IDENTIFIER ?? 'dev'
+
+// This will always be in the format of YYMMDD, so that it always increases for each build. This should only be used
+// for Statsig reporting and shouldn't be used to identify a specific bundle.
+export const BUNDLE_DATE = IS_DEV
+  ? 0
+  : Number(process.env.EXPO_PUBLIC_BUNDLE_DATE)
+
 export const appVersion = version
+export const bundleInfo = `${BUNDLE_IDENTIFIER} (${IS_DEV ? 'dev' : 'prod'})`

src/lib/build-flags.ts

@@ -1,3 +1,2 @@
 export const LOGIN_INCLUDE_DEV_SERVERS = true
 export const PWI_ENABLED = true
-export const NEW_ONBOARDING_ENABLED = true

src/lib/constants.ts

@@ -4,11 +4,13 @@ export const LOCAL_DEV_SERVICE =
   Platform.OS === 'android' ? 'http://10.0.2.2:2583' : 'http://localhost:2583'
 export const STAGING_SERVICE = 'https://staging.bsky.dev'
 export const BSKY_SERVICE = 'https://bsky.social'
+export const PUBLIC_BSKY_SERVICE = 'https://public.api.bsky.app'
 export const DEFAULT_SERVICE = BSKY_SERVICE
 const HELP_DESK_LANG = 'en-us'
 export const HELP_DESK_URL = `https://blueskyweb.zendesk.com/hc/${HELP_DESK_LANG}`
 export const EMBED_SERVICE = 'https://embed.bsky.app'
 export const EMBED_SCRIPT = `${EMBED_SERVICE}/static/embed.js`
+export const BSKY_DOWNLOAD_URL = 'https://bsky.app/download'
 
 const BASE_FEEDBACK_FORM_URL = `${HELP_DESK_URL}/requests/new`
 export function FEEDBACK_FORM_URL({
@@ -90,11 +92,9 @@ export const BSKY_FEED_OWNER_DIDS = [
   'did:plc:q6gjnaw2blty4crticxkmujt',
 ]
 
-export const GIPHY_API_URL = 'https://api.giphy.com'
-export const GIPHY_API_KEY = Platform.select({
-  ios: 'ydVxhrQkwlcUjkVKx15mF6vyaNJbMeez',
-  android: 'Vwj3Ib7857dj3EcIg24Hiz1LbRVdGeYF',
-  default: 'vyL3hQQ8AipwcmIB8kFvg0NDs9faWg7G',
-})
-export const GIPHY_PRIVACY_POLICY =
-  'https://support.giphy.com/hc/en-us/articles/360032872931-GIPHY-Privacy-Policy'
+export const GIF_SERVICE = 'https://gifs.bsky.app'
+
+export const GIF_SEARCH = (params: string) =>
+  `${GIF_SERVICE}/tenor/v2/search?${params}`
+export const GIF_FEATURED = (params: string) =>
+  `${GIF_SERVICE}/tenor/v2/featured?${params}`

src/lib/functions.ts

@@ -9,3 +9,90 @@ export function dedupArray<T>(arr: T[]): T[] {
   const s = new Set(arr)
   return [...s]
 }
+
+/**
+ * Taken from @tanstack/query-core utils.ts
+ * Modified to support Date object comparisons
+ *
+ * This function returns `a` if `b` is deeply equal.
+ * If not, it will replace any deeply equal children of `b` with those of `a`.
+ * This can be used for structural sharing between JSON values for example.
+ */
+export function replaceEqualDeep(a: any, b: any): any {
+  if (a === b) {
+    return a
+  }
+
+  if (a instanceof Date && b instanceof Date) {
+    return a.getTime() === b.getTime() ? a : b
+  }
+
+  const array = isPlainArray(a) && isPlainArray(b)
+
+  if (array || (isPlainObject(a) && isPlainObject(b))) {
+    const aItems = array ? a : Object.keys(a)
+    const aSize = aItems.length
+    const bItems = array ? b : Object.keys(b)
+    const bSize = bItems.length
+    const copy: any = array ? [] : {}
+
+    let equalItems = 0
+
+    for (let i = 0; i < bSize; i++) {
+      const key = array ? i : bItems[i]
+      if (
+        !array &&
+        a[key] === undefined &&
+        b[key] === undefined &&
+        aItems.includes(key)
+      ) {
+        copy[key] = undefined
+        equalItems++
+      } else {
+        copy[key] = replaceEqualDeep(a[key], b[key])
+        if (copy[key] === a[key] && a[key] !== undefined) {
+          equalItems++
+        }
+      }
+    }
+
+    return aSize === bSize && equalItems === aSize ? a : copy
+  }
+
+  return b
+}
+
+export function isPlainArray(value: unknown) {
+  return Array.isArray(value) && value.length === Object.keys(value).length
+}
+
+// Copied from: https://github.com/jonschlinkert/is-plain-object
+export function isPlainObject(o: any): o is Object {
+  if (!hasObjectPrototype(o)) {
+    return false
+  }
+
+  // If has no constructor
+  const ctor = o.constructor
+  if (ctor === undefined) {
+    return true
+  }
+
+  // If has modified prototype
+  const prot = ctor.prototype
+  if (!hasObjectPrototype(prot)) {
+    return false
+  }
+
+  // If constructor does not have an Object-specific method
+  if (!prot.hasOwnProperty('isPrototypeOf')) {
+    return false
+  }
+
+  // Most likely a plain Object
+  return true
+}
+
+function hasObjectPrototype(o: any): boolean {
+  return Object.prototype.toString.call(o) === '[object Object]'
+}

src/lib/hooks/useAccountSwitcher.ts

@@ -1,17 +1,21 @@
-import {useCallback} from 'react'
+import {useCallback, useState} from 'react'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
-import {isWeb} from '#/platform/detection'
 import {useAnalytics} from '#/lib/analytics/analytics'
-import {useSessionApi, SessionAccount} from '#/state/session'
-import * as Toast from '#/view/com/util/Toast'
-import {useCloseAllActiveElements} from '#/state/util'
+import {logger} from '#/logger'
+import {isWeb} from '#/platform/detection'
+import {SessionAccount, useSessionApi} from '#/state/session'
 import {useLoggedOutViewControls} from '#/state/shell/logged-out'
+import * as Toast from '#/view/com/util/Toast'
+import {logEvent} from '../statsig/statsig'
 import {LogEvents} from '../statsig/statsig'
 
 export function useAccountSwitcher() {
+  const [pendingDid, setPendingDid] = useState<string | null>(null)
+  const {_} = useLingui()
   const {track} = useAnalytics()
-  const {selectAccount, clearCurrentAccount} = useSessionApi()
-  const closeAllActiveElements = useCloseAllActiveElements()
+  const {initSession} = useSessionApi()
   const {requestSwitchToAccount} = useLoggedOutViewControls()
 
   const onPressSwitchAccount = useCallback(
@@ -20,10 +24,13 @@ export function useAccountSwitcher() {
       logContext: LogEvents['account:loggedIn']['logContext'],
     ) => {
       track('Settings:SwitchAccountButtonClicked')
-
+      if (pendingDid) {
+        // The session API isn't resilient to race conditions so let's just ignore this.
+        return
+      }
       try {
+        setPendingDid(account.did)
         if (account.accessJwt) {
-          closeAllActiveElements()
           if (isWeb) {
             // We're switching accounts, which remounts the entire app.
             // On mobile, this gets us Home, but on the web we also need reset the URL.
@@ -32,31 +39,26 @@ export function useAccountSwitcher() {
             // So we change the URL ourselves. The navigator will pick it up on remount.
             history.pushState(null, '', '/')
           }
-          await selectAccount(account, logContext)
-          setTimeout(() => {
-            Toast.show(`Signed in as @${account.handle}`)
-          }, 100)
+          await initSession(account)
+          logEvent('account:loggedIn', {logContext, withPassword: false})
+          Toast.show(_(msg`Signed in as @${account.handle}`))
         } else {
-          closeAllActiveElements()
           requestSwitchToAccount({requestedAccount: account.did})
           Toast.show(
-            `Please sign in as @${account.handle}`,
+            _(msg`Please sign in as @${account.handle}`),
             'circle-exclamation',
           )
         }
-      } catch (e) {
-        Toast.show('Sorry! We need you to enter your password.')
-        clearCurrentAccount() // back user out to login
+      } catch (e: any) {
+        logger.error(`switch account: selectAccount failed`, {
+          message: e.message,
+        })
+      } finally {
+        setPendingDid(null)
       }
     },
-    [
-      track,
-      clearCurrentAccount,
-      selectAccount,
-      closeAllActiveElements,
-      requestSwitchToAccount,
-    ],
+    [_, track, initSession, requestSwitchToAccount, pendingDid],
   )
 
-  return {onPressSwitchAccount}
+  return {onPressSwitchAccount, pendingDid}
 }

src/lib/hooks/useNavigationTabState.ts

@@ -1,4 +1,5 @@
 import {useNavigationState} from '@react-navigation/native'
+
 import {getTabState, TabState} from 'lib/routes/helpers'
 
 export function useNavigationTabState() {
@@ -10,13 +11,16 @@ export function useNavigationTabState() {
       isAtNotifications:
         getTabState(state, 'Notifications') !== TabState.Outside,
       isAtMyProfile: getTabState(state, 'MyProfile') !== TabState.Outside,
+      isAtMessages: getTabState(state, 'Messages') !== TabState.Outside,
     }
+
     if (
       !res.isAtHome &&
       !res.isAtSearch &&
       !res.isAtFeeds &&
       !res.isAtNotifications &&
-      !res.isAtMyProfile
+      !res.isAtMyProfile &&
+      !res.isAtMessages
     ) {
       // HACK for some reason useNavigationState will give us pre-hydration results
       //      and not update after, so we force isAtHome if all came back false

src/lib/hooks/useNavigationTabState.web.ts

@@ -1,4 +1,5 @@
 import {useNavigationState} from '@react-navigation/native'
+
 import {getCurrentRoute} from 'lib/routes/helpers'
 
 export function useNavigationTabState() {
@@ -9,6 +10,7 @@ export function useNavigationTabState() {
       isAtSearch: currentRoute === 'Search',
       isAtNotifications: currentRoute === 'Notifications',
       isAtMyProfile: currentRoute === 'MyProfile',
+      isAtMessages: currentRoute === 'Messages',
     }
   })
 }

src/lib/hooks/useOTAUpdates.ts

@@ -12,7 +12,6 @@ import {
 
 import {logger} from '#/logger'
 import {IS_TESTFLIGHT} from 'lib/app-info'
-import {useGate} from 'lib/statsig/statsig'
 import {isIOS} from 'platform/detection'
 
 const MINIMUM_MINIMIZE_TIME = 15 * 60e3
@@ -31,8 +30,7 @@ async function setExtraParams() {
 }
 
 export function useOTAUpdates() {
-  const gate = useGate()
-  const shouldReceiveUpdates = isEnabled && !__DEV__ && gate('receive_updates')
+  const shouldReceiveUpdates = isEnabled && !__DEV__
 
   const appState = React.useRef<AppStateStatus>('active')
   const lastMinimize = React.useRef(0)

src/lib/media/manip.ts

@@ -1,13 +1,14 @@
-import RNFetchBlob from 'rn-fetch-blob'
-import ImageResizer from '@bam.tech/react-native-image-resizer'
 import {Image as RNImage, Share as RNShare} from 'react-native'
 import {Image} from 'react-native-image-crop-picker'
-import * as RNFS from 'react-native-fs'
 import uuid from 'react-native-uuid'
-import * as Sharing from 'expo-sharing'
+import {cacheDirectory, copyAsync, deleteAsync} from 'expo-file-system'
 import * as MediaLibrary from 'expo-media-library'
-import {Dimensions} from './types'
+import * as Sharing from 'expo-sharing'
+import ImageResizer from '@bam.tech/react-native-image-resizer'
+import RNFetchBlob from 'rn-fetch-blob'
+
 import {isAndroid, isIOS} from 'platform/detection'
+import {Dimensions} from './types'
 
 export async function compressIfNeeded(
   img: Image,
@@ -23,7 +24,10 @@ export async function compressIfNeeded(
     mode: 'stretch',
     maxSize,
   })
-  const finalImageMovedPath = await moveToPermanentPath(resizedImage.path)
+  const finalImageMovedPath = await moveToPermanentPath(
+    resizedImage.path,
+    '.jpg',
+  )
   const finalImg = {
     ...resizedImage,
     path: finalImageMovedPath,
@@ -63,13 +67,15 @@ export async function downloadAndResize(opts: DownloadAndResizeOpts) {
     downloadRes = await downloadResPromise
     clearTimeout(to1)
 
-    let localUri = downloadRes.path()
-    if (!localUri.startsWith('file://')) {
-      localUri = `file://${localUri}`
+    const status = downloadRes.info().status
+    if (status !== 200) {
+      return
     }
 
+    const localUri = normalizePath(downloadRes.path(), true)
     return await doResize(localUri, opts)
   } finally {
+    // TODO Whenever we remove `rn-fetch-blob`, we will need to replace this `flush()` with a `deleteAsync()` -hailey
     if (downloadRes) {
       downloadRes.flush()
     }
@@ -105,7 +111,8 @@ export async function shareImageModal({uri}: {uri: string}) {
       UTI: 'image/png',
     })
   }
-  RNFS.unlink(imagePath)
+
+  safeDeleteAsync(imagePath)
 }
 
 export async function saveImageToMediaLibrary({uri}: {uri: string}) {
@@ -122,6 +129,7 @@ export async function saveImageToMediaLibrary({uri}: {uri: string}) {
 
   // save
   await MediaLibrary.createAssetAsync(imagePath)
+  safeDeleteAsync(imagePath)
 }
 
 export function getImageDim(path: string): Promise<Dimensions> {
@@ -168,6 +176,8 @@ async function doResize(localUri: string, opts: DoResizeOpts): Promise<Image> {
         width: resizeRes.width,
         height: resizeRes.height,
       }
+    } else {
+      safeDeleteAsync(resizeRes.path)
     }
   }
   throw new Error(
@@ -175,7 +185,7 @@ async function doResize(localUri: string, opts: DoResizeOpts): Promise<Image> {
   )
 }
 
-async function moveToPermanentPath(path: string, ext = ''): Promise<string> {
+async function moveToPermanentPath(path: string, ext = 'jpg'): Promise<string> {
   /*
   Since this package stores images in a temp directory, we need to move the file to a permanent location.
   Relevant: IOS bug when trying to open a second time:
@@ -183,14 +193,33 @@ async function moveToPermanentPath(path: string, ext = ''): Promise<string> {
   */
   const filename = uuid.v4()
 
-  const destinationPath = joinPath(
-    RNFS.TemporaryDirectoryPath,
-    `${filename}${ext}`,
-  )
-  await RNFS.moveFile(path, destinationPath)
+  // cacheDirectory will not ever be null on native, but it could be on web. This function only ever gets called on
+  // native so we assert as a string.
+  const destinationPath = joinPath(cacheDirectory as string, filename + ext)
+  await copyAsync({
+    from: normalizePath(path),
+    to: normalizePath(destinationPath),
+  })
+  safeDeleteAsync(path)
   return normalizePath(destinationPath)
 }
 
+export async function safeDeleteAsync(path: string) {
+  // Normalize is necessary for Android, otherwise it doesn't delete.
+  const normalizedPath = normalizePath(path)
+  try {
+    await Promise.allSettled([
+      deleteAsync(normalizedPath, {idempotent: true}),
+      // HACK: Try this one too. Might exist due to api-polyfill hack.
+      deleteAsync(normalizedPath.replace(/\.jpe?g$/, '.bin'), {
+        idempotent: true,
+      }),
+    ])
+  } catch (e) {
+    console.error('Failed to delete file', e)
+  }
+}
+
 function joinPath(a: string, b: string) {
   if (a.endsWith('/')) {
     if (b.startsWith('/')) {

src/lib/notifications/notifications.ts

@@ -1,12 +1,13 @@
 import {useEffect} from 'react'
 import * as Notifications from 'expo-notifications'
+import {BskyAgent} from '@atproto/api'
 import {QueryClient} from '@tanstack/react-query'
 
 import {logger} from '#/logger'
 import {RQKEY as RQKEY_NOTIFS} from '#/state/queries/notifications/feed'
 import {invalidateCachedUnreadPage} from '#/state/queries/notifications/unread'
 import {truncateAndInvalidate} from '#/state/queries/util'
-import {getAgent, SessionAccount} from '#/state/session'
+import {SessionAccount} from '#/state/session'
 import {track} from 'lib/analytics/analytics'
 import {devicePlatform, isIOS} from 'platform/detection'
 import {resetToTab} from '../../Navigation'
@@ -18,6 +19,7 @@ const SERVICE_DID = (serviceUrl?: string) =>
     : 'did:web:api.bsky.app'
 
 export async function requestPermissionsAndRegisterToken(
+  getAgent: () => BskyAgent,
   account: SessionAccount,
 ) {
   // request notifications permission once the user has logged in
@@ -49,6 +51,7 @@ export async function requestPermissionsAndRegisterToken(
 }
 
 export function registerTokenChangeHandler(
+  getAgent: () => BskyAgent,
   account: SessionAccount,
 ): () => void {
   // listens for new changes to the push token