Override type in safe place

* actually register token on permissions change

* actually register token on permissions change

* get updated permissions every time

* remove all usages of `usePermissions`

* skip perms check on granted result from request

.detoxrc.js

@@ -1,86 +0,0 @@
-/** @type {Detox.DetoxConfig} */
-module.exports = {
-  testRunner: {
-    args: {
-      $0: 'jest',
-      config: '__e2e__/jest.config.js',
-    },
-    jest: {
-      setupTimeout: 120000,
-    },
-  },
-  apps: {
-    'ios.debug': {
-      type: 'ios.app',
-      binaryPath: 'ios/build/Build/Products/Debug-iphonesimulator/bluesky.app',
-      build:
-        'xcodebuild -workspace ios/Bluesky.xcworkspace -scheme Bluesky -configuration Debug -sdk iphonesimulator -derivedDataPath ios/build',
-    },
-    'ios.release': {
-      type: 'ios.app',
-      binaryPath:
-        'ios/build/Build/Products/Release-iphonesimulator/bluesky.app',
-      build:
-        'xcodebuild -workspace ios/Bluesky.xcworkspace -scheme Bluesky -configuration Release -sdk iphonesimulator -derivedDataPath ios/build',
-    },
-    'android.debug': {
-      type: 'android.apk',
-      binaryPath: 'android/app/build/outputs/apk/debug/app-debug.apk',
-      build:
-        'cd android ; ./gradlew assembleDebug assembleAndroidTest -DtestBuildType=debug ; cd -',
-      reversePorts: [8081],
-    },
-    'android.release': {
-      type: 'android.apk',
-      binaryPath: 'android/app/build/outputs/apk/release/app-release.apk',
-      build:
-        'cd android ; ./gradlew assembleRelease assembleAndroidTest -DtestBuildType=release ; cd -',
-    },
-  },
-  devices: {
-    simulator: {
-      type: 'ios.simulator',
-      device: {
-        type: 'iPhone 15 Pro',
-      },
-    },
-    attached: {
-      type: 'android.attached',
-      device: {
-        adbName: '.*',
-      },
-    },
-    emulator: {
-      type: 'android.emulator',
-      device: {
-        avdName: 'Pixel_3a_API_30_x86',
-      },
-    },
-  },
-  configurations: {
-    'ios.sim.debug': {
-      device: 'simulator',
-      app: 'ios.debug',
-    },
-    'ios.sim.release': {
-      device: 'simulator',
-      app: 'ios.release',
-    },
-    'android.att.debug': {
-      device: 'attached',
-      app: 'android.debug',
-    },
-    'android.att.release': {
-      device: 'attached',
-      app: 'android.release',
-    },
-    'android.emu.debug': {
-      device: 'emulator',
-      app: 'android.debug',
-    },
-    'android.emu.release': {
-      device: 'emulator',
-      app: 'android.release',
-    },
-  },
-}

.easignore

@@ -95,8 +95,7 @@ web-build/
 /ios/
 
 # environment variables
-.env
 .env.*
 
 # Firebase (Android) Google services
-# INCLUDED: google-services.json
+# INCLUDED: google-services.json

.eslintrc.js

@@ -9,7 +9,6 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   plugins: [
     '@typescript-eslint',
-    'detox',
     'react',
     'lingui',
     'simple-import-sort',

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

@@ -43,6 +43,10 @@ jobs:
           tags: |
             type=sha,enable=true,priority=100,prefix=,suffix=,format=long
 
+      - name: Set outputs
+        id: vars
+        run: echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+
       - name: Build and push Docker image
         id: build-and-push
         uses: docker/build-push-action@v4
@@ -54,6 +58,5 @@ 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")
+          build-args: |
+            EXPO_PUBLIC_BUNDLE_IDENTIFIER=${{ steps.vars.outputs.sha_short }}

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

@@ -25,6 +25,8 @@ jobs:
 
       - name: ⬇️ Checkout
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 5
 
       - name: 🔧 Setup Node
         uses: actions/setup-node@v4

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

@@ -25,6 +25,8 @@ jobs:
 
       - name: ⬇️ Checkout
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 5
 
       - name: 🔧 Setup Node
         uses: actions/setup-node@v4

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

@@ -54,7 +54,9 @@ jobs:
         uses: actions/cache@v4
         with:
           path: last-successful-commit-hash.txt
-          key: last-successful-deployment-commit-${{ github.ref_name }}
+          key: last-successful-deployment-commit-${{ github.ref_name }}-${{ github.sha }}
+          restore-keys: |
+            last-successful-deployment-commit-${{ github.ref_name }}-
 
       - name: Add the last successful deployment commit to the output
         id: last-successful-commit
@@ -68,7 +70,7 @@ jobs:
       - name: 🕵️ Get the base commit
         id: base-commit
         run: |
-          if [ -z "${{ inputs.channel == 'production' }}" ]; then
+          if ${{ inputs.channel == 'production' }}; then
             echo base-commit=$(git show-ref -s ${{ inputs.runtimeVersion }}) >> "$GITHUB_OUTPUT"
           else
             echo base-commit=${{ steps.last-successful-commit.base-commit }} >> "$GITHUB_OUTPUT"
@@ -184,6 +186,8 @@ jobs:
 
       - name: ⬇️ Checkout
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 5
 
       - name: 🔧 Setup Node
         uses: actions/setup-node@v4
@@ -255,6 +259,8 @@ jobs:
 
       - name: ⬇️ Checkout
         uses: actions/checkout@v4
+        with:
+          fetch-depth: 5
 
       - name: 🔧 Setup Node
         uses: actions/setup-node@v4

Dockerfile

@@ -15,6 +15,10 @@ ENV GOARCH="amd64"
 ENV CGO_ENABLED=1
 ENV GOEXPERIMENT="loopvar"
 
+# Expo
+ARG EXPO_PUBLIC_BUNDLE_IDENTIFIER
+ENV EXPO_PUBLIC_BUNDLE_IDENTIFIER ${EXPO_PUBLIC_BUNDLE_IDENTIFIER:-dev}
+
 COPY . .
 
 #
@@ -29,10 +33,13 @@ RUN mkdir --parents $NVM_DIR && \
 RUN \. "$NVM_DIR/nvm.sh" && \
   nvm install $NODE_VERSION && \
   nvm use $NODE_VERSION && \
+  echo "Using bundle identifier: $EXPO_PUBLIC_BUNDLE_IDENTIFIER" && \
+  echo "EXPO_PUBLIC_BUNDLE_IDENTIFIER=$EXPO_PUBLIC_BUNDLE_IDENTIFIER" >> .env && \
+  echo "EXPO_PUBLIC_BUNDLE_DATE=$(date -u +"%y%m%d%H")" >> .env && \
   npm install --global yarn && \
   yarn && \
   yarn intl:build && \
-  yarn build-web
+  EXPO_PUBLIC_BUNDLE_IDENTIFIER=$EXPO_PUBLIC_BUNDLE_IDENTIFIER EXPO_PUBLIC_BUNDLE_DATE=$() yarn build-web
 
 # DEBUG
 RUN find ./bskyweb/static && find ./web-build/static

__e2e__/config.yml

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

__e2e__/flows/composer-self-label.yml

@@ -0,0 +1,30 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../setupServer.js
+    env:
+        SERVER_PATH: ?users
+- runFlow:
+    file: ../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+
+# Post an image with the porn label
+- tapOn:
+    id: "composeFAB"
+- inputText: "Post with an image"
+- tapOn:
+    id: "openGalleryBtn"
+- tapOn:
+    id: "labelsBtn"
+- tapOn:
+    label: "Tap on porn"
+    point: 78%,67%
+- tapOn:
+    label: "Tap on confirm"
+    point: 51%,92%
+- tapOn:
+    id: "composerPublishBtn"
+- tapOn:
+    id: "e2eRefreshHome"
+- assertVisible: "Adult Content"

__e2e__/flows/composer.yml

@@ -0,0 +1,87 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../setupServer.js
+    env:
+        SERVER_PATH: ?users
+- runFlow:
+    file: ../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+- tapOn:
+    id: "composeFAB"
+- inputText: "Post text only"
+- tapOn:
+    id: "composerPublishBtn"
+- assertVisible:
+    id: "composeFAB"
+- tapOn:
+    id: "composeFAB"
+- inputText: "Post with an image"
+- tapOn:
+    id: "openGalleryBtn"
+- tapOn:
+    id: "composerPublishBtn"
+- assertVisible:
+    id: "composeFAB"
+- tapOn:
+    id: "composeFAB"
+- inputText: "Post with a https://example.com link card"
+- tapOn:
+    id: "composerPublishBtn"
+- assertVisible:
+    id: "composeFAB"
+- tapOn:
+    id: "e2eRefreshHome"
+- tapOn:
+    id: "replyBtn"
+- inputText: "Reply text only"
+- tapOn:
+    id: "composerPublishBtn"
+- assertVisible:
+    id: "composeFAB"
+- tapOn:
+    id: "replyBtn"
+- inputText: "Reply with an image"
+- tapOn:
+    id: "openGalleryBtn"
+- tapOn:
+    id: "composerPublishBtn"
+- assertVisible:
+    id: "composeFAB"
+- tapOn:
+    id: "replyBtn"
+- inputText: "Reply with a https://example.com link card"
+- tapOn:
+    id: "composerPublishBtn"
+- assertVisible:
+    id: "composeFAB"
+- tapOn:
+    id: "repostBtn"
+- tapOn:
+    id: "quoteBtn"
+- inputText: "QP text only"   
+- tapOn:
+    id: "composerPublishBtn"
+- assertVisible:
+    id: "composeFAB"
+- tapOn:
+    id: "repostBtn"
+- tapOn:
+    id: "quoteBtn"
+- inputText: "QP with an image"
+- tapOn:
+    id: "openGalleryBtn"
+- tapOn:
+    id: "composerPublishBtn"
+- assertVisible:
+    id: "composeFAB"
+- tapOn:
+    id: "repostBtn"
+- tapOn:
+    id: "quoteBtn"
+- inputText: "QP with a https://example.com link card"
+- tapOn:
+    id: "composerPublishBtn"
+- assertVisible:
+    id: "composeFAB"

__e2e__/flows/create-account.yml

@@ -0,0 +1,37 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../setupServer.js
+    env:
+        SERVER_PATH: ""
+- runFlow:
+    file: ../setupApp.yml
+- tapOn:
+    id: "e2eOpenLoggedOutView"
+- tapOn:
+    id: "createAccountButton"
+- tapOn:
+    id: "selectServiceButton"
+- tapOn:
+    id: "customSelectBtn"
+- tapOn:
+    id: "customServerTextInput"
+- inputText: "http://localhost:3000"
+- pressKey: Enter
+- tapOn:
+    id: "doneBtn"
+- tapOn:
+    id: "emailInput"
+- inputText: "example@test.com"
+- tapOn:
+    id: "passwordInput"
+- inputText: "hunter2"
+- pressKey: Enter
+- tapOn:
+    id: "nextBtn"
+- tapOn:
+     id: "handleInput"
+- inputText: "e2e-test"
+- tapOn:
+    id: "nextBtn"
+

__e2e__/flows/curate-lists.yml

@@ -0,0 +1,208 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../setupServer.js
+    env:
+        SERVER_PATH: "?users&follows&posts"
+- runFlow:
+    file: ../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+
+- tapOn:
+    label: "Create a curate list"
+    id: "e2eGotoLists"
+- tapOn:
+    id: "newUserListBtn"
+- assertVisible:
+    id: "createOrEditListModal"
+- tapOn:
+    id: "editNameInput"
+- inputText: "Good Ppl"
+- tapOn:
+    id: "editDescriptionInput"
+- inputText: "They good"
+- tapOn: "Save"
+- tapOn: "Save"
+- assertNotVisible:
+    id: "createOrEditListModal"
+- tapOn: "About"
+- assertVisible: "Good Ppl"
+- assertVisible: "They good"
+
+- tapOn:
+    label: "Edit display name and description via the edit curatelist modal"
+    point: "90%,9%"
+- tapOn: "Edit list details"
+- assertVisible:
+    id: "createOrEditListModal"
+- tapOn:
+    id: "editNameInput"
+- eraseText
+- inputText: "Bad Ppl"
+- hideKeyboard
+- tapOn:
+    id: "editDescriptionInput"
+- eraseText
+- inputText: "They bad"
+- tapOn: "Save"
+- tapOn: "Save"
+- assertNotVisible:
+    id: "createOrEditListModal"
+- assertVisible: Bad Ppl
+- assertVisible: They bad
+
+- tapOn:
+    label: "Remove description via the edit curatelist modal"
+    point: "90%,9%"
+- tapOn: "Edit list details"
+- assertVisible:
+    id: "createOrEditListModal"
+- tapOn:
+    id: "editDescriptionInput"
+- eraseText
+- tapOn: "Save"
+- tapOn: "Save"
+- assertNotVisible:
+    id: "createOrEditListModal"
+- assertNotVisible:
+    id: "listDescription"
+
+- tapOn:
+    label: "Delete the curatelist"
+    point: "90%,9%"
+- tapOn: "Delete List"
+- tapOn:
+    id: "confirmBtn"
+- assertVisible:
+    id: "listsEmpty"
+
+- tapOn:
+    label: "Create a new curatelist"
+    id: "e2eGotoLists"
+- tapOn:
+    id: "newUserListBtn"
+- assertVisible:
+    id: "createOrEditListModal"
+- tapOn:
+    id: "editNameInput"
+- inputText: "Good Ppl"
+- tapOn:
+    id: "editDescriptionInput"
+- inputText: "They good"
+- tapOn: "Save"
+- tapOn: "Save"
+- assertNotVisible:
+    id: "createOrEditListModal"
+- tapOn: "About"
+- assertVisible: "Good Ppl"
+- assertVisible: "They good"
+- tapOn: "About"
+
+- tapOn:
+    label: "Adds users on curatelists from the list"
+    id: "addUserBtn"
+- assertVisible:
+    id: "listAddUserModal"
+- tapOn:
+    id: "searchInput"
+- inputText: "b"
+- pressKey: Enter
+- tapOn:
+    id: "user-bob.test-addBtn"
+- tapOn:
+    id: "doneBtn"
+- assertNotVisible:
+    id: "listAddUserModal"
+- assertVisible:
+    id: "user-bob.test"
+
+- tapOn: "Posts"
+- assertVisible:
+    label: "Shows posts by the users in the list"
+    id: "feedItem-by-bob.test"
+
+- tapOn:
+    label: "Pins the list"
+    id: "pinBtn"
+- tapOn:
+    id: "e2eGotoHome"
+- tapOn: "Good Ppl"
+- assertVisible:
+    id: "feedItem-by-bob.test"
+- tapOn:
+    id: "bottomBarFeedsBtn"
+- tapOn:
+    id: "saved-feed-Good Ppl"
+- assertVisible:
+    id: "feedItem-by-bob.test"
+- tapOn:
+    id: "unpinBtn"
+- tapOn:
+    id: "bottomBarHomeBtn"
+- assertNotVisible:
+    id: "homeScreenFeedTabs-Good Ppl"
+- tapOn:
+    id: "e2eGotoLists"
+- tapOn:
+    id: "list-Good Ppl"
+
+- tapOn: "About"
+- assertVisible:
+    label: "Removes users on curatelists from the list"
+    id: "user-bob.test"
+- tapOn:
+    point: "90%,43%"
+- assertVisible:
+    id: "userAddRemoveListsModal"
+- tapOn:
+    id: "user-bob.test-addBtn"
+- tapOn:
+    id: "doneBtn"
+- assertNotVisible:
+    id: "userAddRemoveListsModal"
+
+- tapOn:
+    label: "Shows the curatelist on my profile"
+    id: "bottomBarProfileBtn"
+- swipe:
+    from:
+        id: "profilePager-selector"
+    direction: LEFT
+- tapOn:
+    id: "profilePager-selector-5"
+- tapOn:
+    id: "list-Good Ppl"
+
+- tapOn:
+    label: "Adds and removes users on curatelists from the profile"
+    id: "bottomBarSearchBtn"
+- tapOn:
+    id: "searchTextInput"
+- inputText: "bob"
+- tapOn:
+    id: "searchAutoCompleteResult-bob.test"
+- assertVisible:
+    id: "profileView"
+- tapOn:
+    id: "profileHeaderDropdownBtn"
+- tapOn: "Add to Lists"
+- assertVisible:
+    id: "userAddRemoveListsModal"
+- tapOn:
+    id: "user-bob.test-addBtn"
+- tapOn:
+    id: "doneBtn"
+- assertNotVisible:
+    id: "userAddRemoveListsModal"
+- tapOn:
+    id: "profileHeaderDropdownBtn"
+- tapOn: "Add to Lists"
+- assertVisible:
+    id: "userAddRemoveListsModal"
+- tapOn:
+    id: "user-bob.test-addBtn"
+- tapOn:
+    id: "doneBtn"
+- assertNotVisible:
+    id: "userAddRemoveListsModal"

__e2e__/flows/home-screen.yml

@@ -0,0 +1,63 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../setupServer.js
+    env:
+        SERVER_PATH: ?users&follows&posts&feeds
+- runFlow:
+    file: ../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+
+- tapOn:
+    label: "Can go to feeds page using feeds button in tab bar"
+    text: "Feeds ✨"
+- assertVisible: "Discover New Feeds"
+
+- tapOn:
+    label: "Feeds button disappears after pinning a feed"
+    id: "bottomBarProfileBtn"
+- swipe:
+    from:
+        id: "profilePager-selector"
+    direction: LEFT
+- tapOn:
+    id: "profilePager-selector-4"
+- tapOn:
+    id: "feed-alice-favs"
+- tapOn: "Pin to Home"
+- tapOn:
+    id: "bottomBarHomeBtn"
+- assertNotVisible: "Feeds ✨"
+
+- tapOn:
+    label: "Can like posts"
+    id: "likeBtn"
+- assertVisible:
+    id: "likeCount"
+    text: "1"
+- tapOn:
+    id: "likeBtn"
+- assertNotVisible:
+    id: "likeCount"
+
+- tapOn:
+    label: "Can repost posts"
+    id: "repostBtn"
+- tapOn: "Repost"
+- assertVisible:
+    id: "repostCount"
+    text: "1"
+- tapOn:
+    id: "repostBtn"
+- tapOn: "Undo repost"
+- assertNotVisible:
+    id: "repostCount"
+
+- tapOn:
+    label: "Can delete posts"
+    id: "postDropdownBtn"
+    childOf:
+        id: "feedItem-by-alice.test"
+- tapOn: "Delete post"
+- tapOn: "Delete"

__e2e__/flows/login.yml

@@ -0,0 +1,26 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../setupServer.js
+    env:
+        SERVER_PATH: "?users"
+- runFlow:
+    file: ../setupApp.yml
+- tapOn:
+    id: "e2eOpenLoggedOutView"
+- tapOn: "Sign in"
+- tapOn: 
+    id: "selectServiceButton"
+- tapOn: "Custom"
+- tapOn:
+    id: "customServerTextInput"
+- inputText: "http://localhost:3000"
+- tapOn: "Done"
+- tapOn:
+    id: "loginUsernameInput"
+- inputText: "Alice"
+- tapOn:
+    id: "loginPasswordInput"
+- inputText: "hunter2"
+- pressKey: Enter
+- assertVisible: "Following"

__e2e__/flows/mod-lists.yml

@@ -0,0 +1,45 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../setupServer.js
+    env:
+        SERVER_PATH: "?users&follows&labels"
+- runFlow:
+    file: ../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+
+# create a modlist
+- tapOn:
+    id: "e2eGotoModeration"
+- tapOn:
+    id: "moderationlistsBtn"
+- tapOn: "New"
+- tapOn:
+    id: "editNameInput"
+- inputText: "Muted Users"
+- tapOn:
+    id: "editDescriptionInput"
+- inputText: "Shhh"
+- tapOn: "Save"
+- tapOn: "Save"
+
+# view modlist
+- assertVisible: "Muted Users"
+- assertVisible: "Shhh"
+
+# toggle mute subscription
+- tapOn:
+    point: "70%,9%"
+- tapOn: "Mute accounts"
+- tapOn: "Mute list"
+- tapOn: "Unmute"
+
+# toggle block subscription
+- tapOn:
+    point: "70%,9%"
+- tapOn: "Block accounts"
+- tapOn: "Block list"
+- tapOn: "Unblock"
+ 
+ # the rest of the behaviors are tested in curate-lists.yml

__e2e__/flows/profile-screen-edit.yml

@@ -0,0 +1,119 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../setupServer.js
+    env:
+        SERVER_PATH: "?users&posts&feeds"
+- runFlow:
+    file: ../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+
+
+# Navigate to my profile
+- tapOn:
+    id: "bottomBarProfileBtn"
+
+# Can see feeds
+- swipe:
+    from:
+        id: "profilePager-selector"
+    direction: LEFT
+- tapOn:
+    id: "profilePager-selector-4"
+- assertVisible: 
+    id: "feed-alice-favs"
+- swipe:
+    from:
+        id: "profilePager-selector"
+    direction: RIGHT
+- tapOn:
+    id: "profilePager-selector-0"
+
+# Open and close edit profile modal
+- tapOn:
+    id: "profileHeaderEditProfileButton"
+- assertVisible:
+    id: "editProfileModal"
+- tapOn:
+    id: "editProfileCancelBtn"
+- assertNotVisible:
+    id: "editProfileModal"
+
+# Edit display name and description via the edit profile modal
+- tapOn:
+    id: "profileHeaderEditProfileButton"
+- assertVisible:
+    id: "editProfileModal"
+- tapOn:
+    id: "editProfileDisplayNameInput"
+- eraseText
+- inputText: "Alicia"
+- tapOn:
+    id: "editProfileDescriptionInput"
+- eraseText
+- inputText: "One cool hacker"
+- tapOn: "Description"
+- tapOn:
+    id: "editProfileSaveBtn"
+- assertNotVisible:
+    id: "editProfileModal"
+- assertVisible: "Alicia"
+- assertVisible: "One cool hacker"
+
+# Remove display name and description via the edit profile modal
+- tapOn:
+    id: "profileHeaderEditProfileButton"
+- assertVisible:
+    id: "editProfileModal"
+- tapOn:
+    id: "editProfileDisplayNameInput"
+- eraseText
+- tapOn:
+    id: "editProfileDescriptionInput"
+- eraseText
+- tapOn: "Description"
+- tapOn:
+    id: "editProfileSaveBtn"
+- assertNotVisible:
+    id: "editProfileModal"
+- assertVisible: "alice.test"
+- assertNotVisible: "One cool hacker"
+
+# Set avi and banner via the edit profile modal
+- assertVisible:
+    id: "userBannerFallback"
+- tapOn:
+    id: "profileHeaderEditProfileButton"
+- assertVisible:
+    id: "editProfileModal"
+- tapOn:
+    id: "changeBannerBtn"
+- tapOn: "Upload from Library"
+- tapOn:
+    id: "changeAvatarBtn"
+- tapOn: "Upload from Library"
+- tapOn:
+    id: "editProfileSaveBtn"
+- assertNotVisible:
+    id: "editProfileModal"
+- assertVisible:
+    id: "userBannerImage"
+
+# # Remove avi and banner via the edit profile modal
+- tapOn:
+    id: "profileHeaderEditProfileButton"
+- assertVisible:
+    id: "editProfileModal"
+- tapOn:
+    id: "changeBannerBtn"
+- tapOn: "Remove Banner"
+- tapOn:
+    id: "changeAvatarBtn"
+- tapOn: "Remove Avatar"
+- tapOn:
+    id: "editProfileSaveBtn"
+- assertNotVisible:
+    id: "editProfileModal"
+- assertVisible:
+    id: "userBannerFallback"

__e2e__/flows/profile-screen.yml

@@ -0,0 +1,37 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../setupServer.js
+    env:
+        SERVER_PATH: "?users&posts&feeds"
+- runFlow:
+    file: ../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+
+# Navigate to another user profile
+- tapOn:
+    id: "bottomBarSearchBtn"
+- tapOn:
+    id: "searchTextInput"
+- inputText: "b"
+- tapOn:
+    id: "searchAutoCompleteResult-bob.test"
+- assertVisible:
+    id: "profileView"
+
+# Can follow/unfollow another user
+- tapOn:
+    id: "followBtn"
+- tapOn:
+    id: "unfollowBtn"
+
+# Can mute/unmute another user
+- tapOn:
+    id: "profileHeaderDropdownBtn"
+- tapOn: "Mute Account"
+- assertVisible: "Account Muted"
+- tapOn:
+    id: "profileHeaderDropdownBtn"
+- tapOn: "Unmute Account"
+- assertNotVisible: "Account Muted"

__e2e__/flows/search-screen.yml

@@ -0,0 +1,22 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../setupServer.js
+    env:
+        SERVER_PATH: "?users"
+- runFlow:
+    file: ../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+
+# Navigate to another user profile via autocomplete
+- tapOn:
+    id: "bottomBarSearchBtn"
+- tapOn:
+    id: "searchTextInput"
+- inputText: "b"
+- tapOn:
+    id: "searchAutoCompleteResult-bob.test"
+- assertVisible:
+    id: "profileView"
+

__e2e__/flows/thread-muting.yml

@@ -0,0 +1,82 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../setupServer.js
+    env:
+        SERVER_PATH: "?users&follows"
+- runFlow:
+    file: ../setupApp.yml
+
+
+# Login, create a thread, and log out
+- tapOn:
+    id: "e2eSignInAlice"
+- tapOn:
+    id: "composeFAB"
+- inputText: "Test thread"
+- tapOn:
+    id: "composerPublishBtn"
+
+# Login, reply to the thread, and log out
+- tapOn:
+    id: "e2eSignInBob"
+- tapOn:
+    id: "replyBtn"
+- inputText: "Reply 1"
+- tapOn:
+    id: "composerPublishBtn"
+
+# Login, confirm notification exists, mute thread, and log out
+- tapOn:
+    id: "e2eSignInAlice"
+- tapOn:
+    id: "bottomBarNotificationsBtn"
+- assertVisible:
+    id: "feedItem-by-bob.test"
+- tapOn:
+    id: "feedItem-by-bob.test"
+- tapOn:
+    id: "postDropdownBtn"
+    childOf:
+        id: "postThreadItem-by-bob.test"
+- tapOn: "Mute thread"
+
+# Login, reply to the thread twice, and log out
+- tapOn:
+    id: "e2eSignInBob"
+- tapOn:
+    id: "bottomBarProfileBtn"
+- tapOn:
+    id: "profilePager-selector-1"
+- tapOn:
+    id: "replyBtn"
+- inputText: "Reply 2"
+- tapOn:
+    id: "composerPublishBtn"
+- tapOn:
+    id: "replyBtn"
+- inputText: "Reply 3"
+- tapOn:
+    id: "composerPublishBtn"
+
+
+# Login, confirm notifications dont exist, unmute the thread, confirm notifications exist
+- tapOn:
+    id: "e2eSignInAlice"
+- tapOn:
+    id: "bottomBarNotificationsBtn"
+- assertNotVisible:
+    id: "feedItem-by-bob.test"
+- tapOn:
+    id: "bottomBarHomeBtn"
+- tapOn:
+    id: "postDropdownBtn"
+- tapOn: "Unmute thread"
+- tapOn:
+    id: "bottomBarNotificationsBtn"
+- swipe:
+    from:
+        id: "notifsFeed"
+    direction: DOWN
+- assertVisible:
+    id: "feedItem-by-bob.test"

__e2e__/flows/thread-screen.yml

@@ -0,0 +1,84 @@
+appId: xyz.blueskyweb.app
+---
+- runScript:
+    file: ../setupServer.js
+    env:
+        SERVER_PATH: "?users&follows&thread"
+- runFlow:
+    file: ../setupApp.yml
+- tapOn:
+    id: "e2eSignInAlice"
+
+
+# Navigate to thread
+- tapOn: "Thread root"
+- assertVisible: "Thread reply"
+
+# Can like the root post
+- tapOn:
+    id: "likeBtn"
+    childOf:
+        id: "postThreadItem-by-bob.test"
+- assertVisible:
+    id: "likeCount-expanded"
+- tapOn:
+    id: "likeBtn"
+    childOf:
+        id: "postThreadItem-by-bob.test"
+- assertNotVisible:
+    id: "likeCount-expanded"
+
+# Can like a reply post
+- tapOn:
+    id: "likeBtn"
+    childOf:
+        id: "postThreadItem-by-carla.test"
+- assertVisible:
+    id: "likeCount"
+    childOf:
+        id: "postThreadItem-by-carla.test"
+- tapOn:
+    id: "likeBtn"
+    childOf:
+        id: "postThreadItem-by-carla.test"
+- assertNotVisible:
+    id: "likeCount"
+    childOf:
+        id: "postThreadItem-by-carla.test"
+
+# Can repost the root post
+- tapOn:
+    id: "repostBtn"
+    childOf:
+        id: "postThreadItem-by-bob.test"
+- tapOn: "Repost"
+- assertVisible:
+    id: "repostCount-expanded"
+- tapOn:
+    id: "repostBtn"
+    childOf:
+        id: "postThreadItem-by-bob.test"
+- tapOn: "Undo repost"
+- assertNotVisible:
+    id: "repostCount-expanded"
+
+
+# Can repost a reply post
+- tapOn:
+    id: "repostBtn"
+    childOf:
+        id: "postThreadItem-by-carla.test"
+- tapOn: "Repost"
+- assertVisible:
+    id: "repostCount"
+    childOf:
+        id: "postThreadItem-by-carla.test"
+- tapOn:
+    id: "repostBtn"
+    childOf:
+        id: "postThreadItem-by-carla.test"
+- tapOn: "Undo repost"
+- assertNotVisible:
+    id: "repostCount"
+    childOf:
+        id: "postThreadItem-by-carla.test"

__e2e__/jest.config.js

@@ -1,12 +0,0 @@
-/** @type {import('@jest/types').Config.InitialOptions} */
-module.exports = {
-  rootDir: '..',
-  testMatch: ['<rootDir>/__e2e__/**/*.test.ts'],
-  testTimeout: 120000,
-  maxWorkers: 1,
-  globalSetup: 'detox/runners/jest/globalSetup',
-  globalTeardown: 'detox/runners/jest/globalTeardown',
-  reporters: ['detox/runners/jest/reporter'],
-  testEnvironment: 'detox/runners/jest/testEnvironment',
-  verbose: true,
-}

__e2e__/perf-test.yml

@@ -1,3 +1,4 @@
+
 # flow.yaml
 
 appId: xyz.blueskyweb.app
@@ -74,4 +75,3 @@ appId: xyz.blueskyweb.app
 - "scroll"
 - "scroll"
 - "scroll"
-

__e2e__/setupApp.yml

@@ -0,0 +1,11 @@
+appId: xyz.blueskyweb.app
+---
+- launchApp:
+   appId: "xyz.blueskyweb.app"
+   clearState: true
+- waitForAnimationToEnd
+- tapOn: "http://localhost:8081"
+- waitForAnimationToEnd
+- swipe:
+   from: "Bluesky"
+   direction: DOWN

__e2e__/setupServer.js

@@ -0,0 +1,5 @@
+// eslint-disable-next-line
+http.post('http://localhost:1986/' + SERVER_PATH, {
+  headers: {'Content-Type': 'text/plain'},
+  body: '',
+})

__e2e__/tests/composer.test.ts

@@ -1,109 +0,0 @@
-/* eslint-env detox/detox */
-
-import {beforeAll, describe, it} from '@jest/globals'
-import {expect} from 'detox'
-
-import {createServer, loginAsAlice, openApp, sleep} from '../util'
-
-describe('Composer', () => {
-  beforeAll(async () => {
-    await createServer('?users')
-    await openApp({
-      permissions: {notifications: 'YES', medialibrary: 'YES', photos: 'YES'},
-    })
-  })
-
-  it('Login', async () => {
-    await loginAsAlice()
-    await element(by.id('homeScreenFeedTabs-Following')).tap()
-  })
-
-  it('Post text only', async () => {
-    await element(by.id('composeFAB')).tap()
-    await device.takeScreenshot('1- opened composer')
-    await element(by.id('composerTextInput')).typeText('Post text only')
-    await device.takeScreenshot('2- entered text')
-    await element(by.id('composerPublishBtn')).tap()
-    await device.takeScreenshot('3- opened general section')
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-  })
-
-  it('Post with an image', async () => {
-    await element(by.id('composeFAB')).tap()
-    await element(by.id('composerTextInput')).typeText('Post with an image')
-    await element(by.id('openGalleryBtn')).tap()
-    await sleep(1e3)
-    await element(by.id('composerPublishBtn')).tap()
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-  })
-
-  it('Post with a link card', async () => {
-    await element(by.id('composeFAB')).tap()
-    await element(by.id('composerTextInput')).typeText(
-      'Post with a https://example.com link card',
-    )
-    await element(by.id('composerPublishBtn')).tap()
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-  })
-
-  it('Reply text only', async () => {
-    await element(by.id('e2eRefreshHome')).tap()
-
-    const post = by.id('feedItem-by-alice.test')
-    await element(by.id('replyBtn').withAncestor(post)).atIndex(0).tap()
-    await element(by.id('composerTextInput')).typeText('Reply text only')
-    await element(by.id('composerPublishBtn')).tap()
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-  })
-
-  it('Reply with an image', async () => {
-    const post = by.id('feedItem-by-alice.test')
-    await element(by.id('replyBtn').withAncestor(post)).atIndex(0).tap()
-    await element(by.id('composerTextInput')).typeText('Reply with an image')
-    await element(by.id('openGalleryBtn')).tap()
-    await sleep(1e3)
-    await element(by.id('composerPublishBtn')).tap()
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-  })
-
-  it('Reply with a link card', async () => {
-    const post = by.id('feedItem-by-alice.test')
-    await element(by.id('replyBtn').withAncestor(post)).atIndex(0).tap()
-    await element(by.id('composerTextInput')).typeText(
-      'Reply with a https://example.com link card',
-    )
-    await element(by.id('composerPublishBtn')).tap()
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-  })
-
-  it('QP text only', async () => {
-    const post = by.id('feedItem-by-alice.test')
-    await element(by.id('repostBtn').withAncestor(post)).atIndex(0).tap()
-    await element(by.id('quoteBtn').withAncestor(by.id('repostModal'))).tap()
-    await element(by.id('composerTextInput')).typeText('QP text only')
-    await element(by.id('composerPublishBtn')).tap()
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-  })
-
-  it('QP with an image', async () => {
-    const post = by.id('feedItem-by-alice.test')
-    await element(by.id('repostBtn').withAncestor(post)).atIndex(0).tap()
-    await element(by.id('quoteBtn').withAncestor(by.id('repostModal'))).tap()
-    await element(by.id('composerTextInput')).typeText('QP with an image')
-    await element(by.id('openGalleryBtn')).tap()
-    await sleep(1e3)
-    await element(by.id('composerPublishBtn')).tap()
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-  })
-
-  it('QP with a link card', async () => {
-    const post = by.id('feedItem-by-alice.test')
-    await element(by.id('repostBtn').withAncestor(post)).atIndex(0).tap()
-    await element(by.id('quoteBtn').withAncestor(by.id('repostModal'))).tap()
-    await element(by.id('composerTextInput')).typeText(
-      'QP with a https://example.com link card',
-    )
-    await element(by.id('composerPublishBtn')).tap()
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-  })
-})

__e2e__/tests/create-account.test.ts

@@ -1,39 +0,0 @@
-/* eslint-env detox/detox */
-
-import {describe, beforeAll, it} from '@jest/globals'
-import {expect} from 'detox'
-import {openApp, createServer} from '../util'
-
-describe('Create account', () => {
-  let service: string
-  beforeAll(async () => {
-    service = await createServer('')
-    await openApp({permissions: {notifications: 'YES'}})
-  })
-
-  it('I can create a new account', async () => {
-    await element(by.id('e2eOpenLoggedOutView')).tap()
-
-    await element(by.id('createAccountButton')).tap()
-    await device.takeScreenshot('1- opened create account screen')
-    await element(by.id('selectServiceButton')).tap()
-    await device.takeScreenshot('2- selected other server')
-    await element(by.id('customSelectBtn')).tap()
-    await element(by.id('customServerTextInput')).typeText(service)
-    await element(by.id('customServerTextInput')).tapReturnKey()
-    await element(by.id('doneBtn')).tap()
-    await device.takeScreenshot('3- input test server URL')
-    await element(by.id('emailInput')).typeText('example@test.com')
-    await element(by.id('passwordInput')).typeText('hunter2')
-    await device.takeScreenshot('4- entered account details')
-
-    await element(by.id('nextBtn')).tap()
-
-    await element(by.id('handleInput')).typeText('e2e-test')
-    await device.takeScreenshot('5- entered handle')
-
-    await element(by.id('nextBtn')).tap()
-
-    await expect(element(by.id('onboardingInterests'))).toBeVisible()
-  })
-})

__e2e__/tests/curate-lists.test.ts

@@ -1,213 +0,0 @@
-/* eslint-env detox/detox */
-
-import {beforeAll, describe, it} from '@jest/globals'
-import {expect} from 'detox'
-
-import {createServer, loginAsAlice, loginAsBob, openApp, sleep} from '../util'
-
-describe('Curate lists', () => {
-  beforeAll(async () => {
-    await createServer('?users&follows&posts')
-    await openApp({
-      permissions: {notifications: 'YES', medialibrary: 'YES', photos: 'YES'},
-    })
-  })
-
-  it('Login and create a curatelists', async () => {
-    await loginAsAlice()
-    await element(by.id('e2eGotoLists')).tap()
-    await element(by.id('newUserListBtn')).tap()
-    await expect(element(by.id('createOrEditListModal'))).toBeVisible()
-    await element(by.id('editNameInput')).typeText('Good Ppl')
-    await element(by.id('editDescriptionInput')).typeText('They good')
-    await element(by.id('saveBtn')).tap()
-    await expect(element(by.id('createOrEditListModal'))).not.toBeVisible()
-    await element(by.text('About')).tap()
-    await expect(element(by.id('headerTitle'))).toHaveText('Good Ppl')
-    await expect(element(by.id('listDescription'))).toHaveText('They good')
-  })
-
-  it('Edit display name and description via the edit curatelist modal', async () => {
-    await element(by.id('headerDropdownBtn')).tap()
-    await element(by.text('Edit list details')).tap()
-    await expect(element(by.id('createOrEditListModal'))).toBeVisible()
-    await element(by.id('editNameInput')).clearText()
-    await element(by.id('editNameInput')).typeText('Bad Ppl')
-    await element(by.id('editDescriptionInput')).clearText()
-    await element(by.id('editDescriptionInput')).typeText('They bad')
-    await element(by.id('saveBtn')).tap()
-    await expect(element(by.id('createOrEditListModal'))).not.toBeVisible()
-    await expect(element(by.id('headerTitle'))).toHaveText('Bad Ppl')
-    await expect(element(by.id('listDescription'))).toHaveText('They bad')
-    // have to wait for the toast to clear
-    await waitFor(element(by.id('headerDropdownBtn')))
-      .toBeVisible()
-      .withTimeout(5000)
-  })
-
-  it('Remove description via the edit curatelist modal', async () => {
-    await element(by.id('headerDropdownBtn')).tap()
-    await element(by.text('Edit list details')).tap()
-    await expect(element(by.id('createOrEditListModal'))).toBeVisible()
-    await element(by.id('editDescriptionInput')).clearText()
-    await element(by.id('saveBtn')).tap()
-    await expect(element(by.id('createOrEditListModal'))).not.toBeVisible()
-    await expect(element(by.id('listDescription'))).not.toBeVisible()
-    // have to wait for the toast to clear
-    await waitFor(element(by.id('headerDropdownBtn')))
-      .toBeVisible()
-      .withTimeout(5000)
-  })
-
-  it('Set avi via the edit curatelist modal', async () => {
-    await expect(element(by.id('userAvatarFallback'))).toExist()
-    await element(by.id('headerDropdownBtn')).tap()
-    await element(by.text('Edit list details')).tap()
-    await expect(element(by.id('createOrEditListModal'))).toBeVisible()
-    await element(by.id('changeAvatarBtn')).tap()
-    await element(by.text('Upload from Library')).tap()
-    await sleep(3e3)
-    await element(by.id('saveBtn')).tap()
-    await expect(element(by.id('createOrEditListModal'))).not.toBeVisible()
-    await expect(element(by.id('userAvatarImage'))).toExist()
-    // have to wait for the toast to clear
-    await waitFor(element(by.id('headerDropdownBtn')))
-      .toBeVisible()
-      .withTimeout(5000)
-  })
-
-  it('Remove avi via the edit curatelist modal', async () => {
-    await expect(element(by.id('userAvatarImage'))).toExist()
-    await element(by.id('headerDropdownBtn')).tap()
-    await element(by.text('Edit list details')).tap()
-    await expect(element(by.id('createOrEditListModal'))).toBeVisible()
-    await element(by.id('changeAvatarBtn')).tap()
-    await element(by.text('Remove Avatar')).tap()
-    await element(by.id('saveBtn')).tap()
-    await expect(element(by.id('createOrEditListModal'))).not.toBeVisible()
-    await expect(element(by.id('userAvatarFallback'))).toExist()
-    // have to wait for the toast to clear
-    await waitFor(element(by.id('headerDropdownBtn')))
-      .toBeVisible()
-      .withTimeout(5000)
-  })
-
-  it('Delete the curatelist', async () => {
-    await element(by.id('headerDropdownBtn')).tap()
-    await element(by.text('Delete List')).tap()
-    await element(by.id('confirmBtn')).tap()
-    await expect(element(by.id('listsEmpty'))).toBeVisible()
-  })
-
-  it('Create a new curatelist', async () => {
-    await element(by.id('e2eGotoLists')).tap()
-    await element(by.id('newUserListBtn')).tap()
-    await expect(element(by.id('createOrEditListModal'))).toBeVisible()
-    await element(by.id('editNameInput')).typeText('Good Ppl')
-    await element(by.id('editDescriptionInput')).typeText('They good')
-    await element(by.id('saveBtn')).tap()
-    await expect(element(by.id('createOrEditListModal'))).not.toBeVisible()
-    await element(by.text('About')).tap()
-    await expect(element(by.id('headerTitle'))).toHaveText('Good Ppl')
-    await expect(element(by.id('listDescription'))).toHaveText('They good')
-  })
-
-  it('Adds users on curatelists from the list', async () => {
-    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)
-    await element(by.id('user-bob.test-addBtn')).tap()
-    await element(by.id('doneBtn')).tap()
-    await expect(element(by.id('listAddUserModal'))).not.toBeVisible()
-    await expect(element(by.id('user-bob.test'))).toBeVisible()
-  })
-
-  it('Shows posts by the users in the list', async () => {
-    await element(by.text('Posts')).tap()
-    await expect(element(by.id('feedItem-by-bob.test'))).toBeVisible()
-  })
-
-  it('Pins the list', async () => {
-    await expect(element(by.id('pinBtn'))).toBeVisible()
-    await element(by.id('pinBtn')).tap()
-    await element(by.id('e2eGotoHome')).tap()
-    await element(by.id('homeScreenFeedTabs-Good Ppl')).tap()
-    await expect(element(by.id('feedItem-by-bob.test'))).toBeVisible()
-
-    await element(by.id('bottomBarFeedsBtn')).tap()
-    await element(by.id('saved-feed-Good Ppl')).tap()
-    await expect(element(by.id('feedItem-by-bob.test'))).toBeVisible()
-
-    await element(by.id('unpinBtn')).tap()
-    await element(by.id('bottomBarHomeBtn')).tap()
-    await expect(
-      element(by.id('homeScreenFeedTabs-Good Ppl')),
-    ).not.toBeVisible()
-
-    await element(by.id('e2eGotoLists')).tap()
-    await element(by.id('list-Good Ppl')).tap()
-  })
-
-  it('Removes users on curatelists from the list', async () => {
-    await element(by.text('About')).tap()
-    await expect(element(by.id('user-bob.test'))).toBeVisible()
-    await element(by.id('user-bob.test-editBtn')).tap()
-    await expect(element(by.id('userAddRemoveListsModal'))).toBeVisible()
-    await element(by.id('user-bob.test-addBtn')).tap()
-    await element(by.id('doneBtn')).tap()
-    await expect(element(by.id('userAddRemoveListsModal'))).not.toBeVisible()
-  })
-
-  it('Shows the curatelist on my profile', async () => {
-    await element(by.id('bottomBarProfileBtn')).tap()
-    await element(by.id('profilePager-selector')).swipe('left')
-    await element(by.id('profilePager-selector-5')).tap()
-    await element(by.id('list-Good Ppl')).tap()
-  })
-
-  it('Adds and removes users on curatelists from the profile', async () => {
-    await element(by.id('bottomBarSearchBtn')).tap()
-    await element(by.id('searchTextInput')).typeText('bob')
-    await element(by.id('searchAutoCompleteResult-bob.test')).tap()
-    await expect(element(by.id('profileView'))).toBeVisible()
-
-    await element(by.id('profileHeaderDropdownBtn')).tap()
-    await element(by.text('Add to Lists')).tap()
-    await expect(element(by.id('userAddRemoveListsModal'))).toBeVisible()
-    await element(by.id('user-bob.test-addBtn')).tap()
-    await element(by.id('doneBtn')).tap()
-    await expect(element(by.id('userAddRemoveListsModal'))).not.toBeVisible()
-
-    await element(by.id('profileHeaderDropdownBtn')).tap()
-    await element(by.text('Add to Lists')).tap()
-    await expect(element(by.id('userAddRemoveListsModal'))).toBeVisible()
-    await element(by.id('user-bob.test-addBtn')).tap()
-    await element(by.id('doneBtn')).tap()
-    await expect(element(by.id('userAddRemoveListsModal'))).not.toBeVisible()
-  })
-
-  it('Can report a user list', async () => {
-    await element(by.id('e2eGotoSettings')).tap()
-    await element(by.id('signOutBtn')).tap()
-    await loginAsBob()
-    await element(by.id('bottomBarSearchBtn')).tap()
-    await element(by.id('searchTextInput')).typeText('alice')
-    await element(by.id('searchAutoCompleteResult-alice.test')).tap()
-    await element(by.id('profilePager-selector')).swipe('left')
-    await element(by.id('profilePager-selector-3')).tap()
-    await element(by.id('list-Good Ppl')).tap()
-    await element(by.id('headerDropdownBtn')).tap()
-    await element(by.text('Report List')).tap()
-    await expect(element(by.id('reportModal'))).toBeVisible()
-    await expect(element(by.text('Report List'))).toBeVisible()
-    await element(
-      by.id('reportReasonRadios-com.atproto.moderation.defs#reasonRude'),
-    ).tap()
-    await element(by.id('sendReportBtn')).tap()
-    await expect(element(by.id('reportModal'))).not.toBeVisible()
-  })
-})

__e2e__/tests/home-screen.test.ts

@@ -1,110 +0,0 @@
-/* eslint-env detox/detox */
-
-import {beforeAll, describe, it} from '@jest/globals'
-import {expect} from 'detox'
-
-import {createServer, loginAsAlice, openApp} from '../util'
-
-describe('Home screen', () => {
-  beforeAll(async () => {
-    await createServer('?users&follows&posts&feeds')
-    await openApp({permissions: {notifications: 'YES'}})
-  })
-
-  it('Login', async () => {
-    await loginAsAlice()
-    await element(by.id('homeScreenFeedTabs-Following')).tap()
-  })
-
-  it('Can go to feeds page using feeds button in tab bar', async () => {
-    await element(by.id('homeScreenFeedTabs-Feeds ✨')).tap()
-    await expect(element(by.text('Discover New Feeds'))).toBeVisible()
-  })
-
-  it('Feeds button disappears after pinning a feed', async () => {
-    await element(by.id('bottomBarProfileBtn')).tap()
-    await element(by.id('profilePager-selector')).swipe('left')
-    await element(by.id('profilePager-selector-4')).tap()
-    await element(by.id('feed-alice-favs')).tap()
-    await element(by.id('pinBtn')).tap()
-    await element(by.id('bottomBarHomeBtn')).tap()
-    await expect(
-      element(by.id('homeScreenFeedTabs-Feeds ✨')),
-    ).not.toBeVisible()
-  })
-
-  it('Can like posts', async () => {
-    const carlaPosts = by.id('feedItem-by-carla.test')
-    await expect(
-      element(by.id('likeCount').withAncestor(carlaPosts)).atIndex(0),
-    ).not.toExist()
-    await element(by.id('likeBtn').withAncestor(carlaPosts)).atIndex(0).tap()
-    await expect(
-      element(by.id('likeCount').withAncestor(carlaPosts)).atIndex(0),
-    ).toHaveText('1')
-    await element(by.id('likeBtn').withAncestor(carlaPosts)).atIndex(0).tap()
-    await expect(
-      element(by.id('likeCount').withAncestor(carlaPosts)).atIndex(0),
-    ).not.toExist()
-  })
-
-  it('Can repost posts', async () => {
-    const carlaPosts = by.id('feedItem-by-carla.test')
-    await expect(
-      element(by.id('repostCount').withAncestor(carlaPosts)).atIndex(0),
-    ).not.toExist()
-    await element(by.id('repostBtn').withAncestor(carlaPosts)).atIndex(0).tap()
-    await expect(element(by.id('repostModal'))).toBeVisible()
-    await element(by.id('repostBtn').withAncestor(by.id('repostModal'))).tap()
-    await expect(element(by.id('repostModal'))).not.toBeVisible()
-    await expect(
-      element(by.id('repostCount').withAncestor(carlaPosts)).atIndex(0),
-    ).toHaveText('1')
-    await element(by.id('repostBtn').withAncestor(carlaPosts)).atIndex(0).tap()
-    await expect(element(by.id('repostModal'))).toBeVisible()
-    await element(by.id('repostBtn').withAncestor(by.id('repostModal'))).tap()
-    await expect(element(by.id('repostModal'))).not.toBeVisible()
-    await expect(
-      element(by.id('repostCount').withAncestor(carlaPosts)).atIndex(0),
-    ).not.toExist()
-  })
-
-  // TODO skipping because the test env PDS isnt setup correctly to handle the report -prf
-  // it('Can report posts', async () => {
-  //   const carlaPosts = by.id('feedItem-by-carla.test')
-  //   await element(by.id('postDropdownBtn').withAncestor(carlaPosts))
-  //     .atIndex(0)
-  //     .tap()
-  //   await element(by.text('Report post')).tap()
-  //   await element(by.id('com.atproto.moderation.defs#reasonSpam')).tap()
-  //   await element(by.id('sendReportBtn')).tap()
-  // })
-
-  it('Can swipe between feeds', async () => {
-    await element(by.id('homeScreen')).swipe('left', 'fast', 0.75)
-    await expect(element(by.id('customFeedPage'))).toBeVisible()
-    await element(by.id('homeScreen')).swipe('right', 'fast', 0.75)
-    await expect(element(by.id('followingFeedPage'))).toBeVisible()
-  })
-
-  it('Can tap between feeds', async () => {
-    await element(by.id('homeScreenFeedTabs-alice-favs')).tap()
-    await expect(element(by.id('customFeedPage'))).toBeVisible()
-    await element(by.id('homeScreenFeedTabs-Following')).tap()
-    await expect(element(by.id('followingFeedPage'))).toBeVisible()
-  })
-
-  it('Can delete posts', async () => {
-    const alicePosts = by.id('feedItem-by-alice.test')
-    await expect(element(alicePosts.withDescendant(by.text('Post')))).toExist()
-    await element(by.id('postDropdownBtn').withAncestor(alicePosts))
-      .atIndex(0)
-      .tap()
-    await element(by.text('Delete post')).tap()
-    await expect(element(by.id('confirmModal'))).toBeVisible()
-    await element(by.id('confirmBtn')).tap()
-    await expect(
-      element(alicePosts.withDescendant(by.text('Post'))),
-    ).not.toExist()
-  })
-})

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

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

__e2e__/tests/login.test.ts

@@ -1,23 +0,0 @@
-/* eslint-env detox/detox */
-
-import {describe, beforeAll, it} from '@jest/globals'
-import {expect} from 'detox'
-import {openApp, login, createServer} from '../util'
-
-describe('Login', () => {
-  let service: string
-  beforeAll(async () => {
-    service = await createServer('?users')
-    await openApp({permissions: {notifications: 'YES'}})
-  })
-
-  it('As Alice, I can login', async () => {
-    await element(by.id('e2eOpenLoggedOutView')).tap()
-
-    await expect(element(by.id('signInButton'))).toBeVisible()
-    await login(service, 'alice', 'hunter2', {
-      takeScreenshots: true,
-    })
-    await device.takeScreenshot('5- opened home screen')
-  })
-})

__e2e__/tests/merge-feed.test.skip.ts

@@ -1,163 +0,0 @@
-/* eslint-env detox/detox */
-
-import {describe, beforeAll, it} from '@jest/globals'
-import {expect} from 'detox'
-import {openApp, loginAsAlice, createServer} from '../util'
-
-describe('Mergefeed', () => {
-  beforeAll(async () => {
-    await createServer('?mergefeed')
-    await openApp({permissions: {notifications: 'YES'}})
-  })
-
-  it('Login', async () => {
-    await element(by.id('e2eOpenLoggedOutView')).tap()
-    await loginAsAlice()
-    await element(by.id('e2eToggleMergefeed')).tap()
-    await element(by.id('bottomBarFeedsBtn')).tap()
-    await element(by.id('feed-alice-favs-toggleSave')).tap()
-    await element(by.id('e2eGotoHome')).tap()
-  })
-
-  it('Sees the expected mix of posts with default filters', async () => {
-    await element(by.id('followingFeedPage-feed-flatlist')).swipe(
-      'down',
-      'slow',
-      1,
-      0.5,
-      0.5,
-    )
-    // followed users
-    await expect(
-      element(
-        by.id('postText').withAncestor(by.id('feedItem-by-carla.test')),
-      ).atIndex(0),
-    ).toHaveText('Post 9')
-    await expect(
-      element(
-        by.id('postText').withAncestor(by.id('feedItem-by-bob.test')),
-      ).atIndex(0),
-    ).toHaveText('Post 9')
-    await element(by.id('followingFeedPage-feed-flatlist')).swipe(
-      'up',
-      'fast',
-      1,
-      0.5,
-      0.5,
-    )
-    // feed users
-    await expect(
-      element(
-        by.id('postText').withAncestor(by.id('feedItem-by-dan.test')),
-      ).atIndex(0),
-    ).toHaveText('Post 0')
-  })
-
-  it('Sees the expected mix of posts with replies disabled', async () => {
-    await element(by.id('followingFeedPage-feed-flatlist')).swipe(
-      'down',
-      'fast',
-      1,
-      0.5,
-      0.5,
-    )
-    await element(by.id('followingFeedPage-feed-flatlist')).swipe(
-      'down',
-      'fast',
-      1,
-      0.5,
-      0.5,
-    )
-    await element(by.id('viewHeaderHomeFeedPrefsBtn')).tap()
-    await element(by.id('toggleRepliesBtn')).tap()
-    await element(by.id('confirmBtn')).tap()
-    await element(by.id('followingFeedPage-feed-flatlist')).swipe(
-      'down',
-      'slow',
-      1,
-      0.5,
-      0.5,
-    )
-
-    // followed users
-    await expect(
-      element(
-        by.id('postText').withAncestor(by.id('feedItem-by-carla.test')),
-      ).atIndex(0),
-    ).toHaveText('Post 9')
-    await expect(
-      element(
-        by.id('postText').withAncestor(by.id('feedItem-by-bob.test')),
-      ).atIndex(0),
-    ).toHaveText('Post 9')
-    await element(by.id('followingFeedPage-feed-flatlist')).swipe(
-      'up',
-      'fast',
-      1,
-      0.5,
-      0.5,
-    )
-
-    // feed users
-    await expect(
-      element(
-        by.id('postText').withAncestor(by.id('feedItem-by-dan.test')),
-      ).atIndex(0),
-    ).toHaveText('Post 0')
-  })
-
-  it('Sees the expected mix of posts with no follows', async () => {
-    await element(by.id('followingFeedPage-feed-flatlist')).swipe(
-      'down',
-      'fast',
-      1,
-      0.5,
-      0.5,
-    )
-
-    await element(by.id('bottomBarSearchBtn')).tap()
-    await element(by.id('searchTextInput')).typeText('bob')
-    await element(by.id('searchAutoCompleteResult-bob.test')).tap()
-    await expect(element(by.id('profileView'))).toBeVisible()
-    await element(by.id('unfollowBtn')).tap()
-    await element(by.id('profileHeaderBackBtn')).tap()
-
-    // have to wait for the toast to clear
-    await waitFor(element(by.id('searchTextInputClearBtn')))
-      .toBeVisible()
-      .withTimeout(5000)
-    await element(by.id('searchTextInputClearBtn')).tap()
-    await element(by.id('searchTextInput')).typeText('carla')
-    await element(by.id('searchAutoCompleteResult-carla.test')).tap()
-    await expect(element(by.id('profileView'))).toBeVisible()
-    await element(by.id('unfollowBtn')).tap()
-    await element(by.id('profileHeaderBackBtn')).tap()
-
-    await element(by.id('bottomBarHomeBtn')).tap()
-    await element(by.id('followingFeedPage-feed-flatlist')).swipe(
-      'down',
-      'slow',
-      1,
-      0.5,
-      0.5,
-    )
-    await element(by.id('followingFeedPage-feed-flatlist')).swipe(
-      'down',
-      'slow',
-      1,
-      0.5,
-      0.5,
-    )
-
-    // followed users NOT present
-    await expect(element(by.id('feedItem-by-carla.test'))).not.toExist()
-    await expect(element(by.id('feedItem-by-bob.test'))).not.toExist()
-
-    // feed users
-    await expect(
-      element(
-        by.id('postText').withAncestor(by.id('feedItem-by-dan.test')),
-      ).atIndex(0),
-    ).toHaveText('Post 0')
-  })
-})

__e2e__/tests/mod-lists.test.ts

@@ -1,189 +0,0 @@
-/* eslint-env detox/detox */
-
-import {describe, beforeAll, it} from '@jest/globals'
-import {expect} from 'detox'
-import {openApp, loginAsAlice, loginAsBob, createServer} from '../util'
-
-describe('Mod lists', () => {
-  beforeAll(async () => {
-    await createServer('?users&follows&labels')
-    await openApp({
-      permissions: {notifications: 'YES', medialibrary: 'YES', photos: 'YES'},
-    })
-  })
-
-  it('Login and view my modlists', async () => {
-    await loginAsAlice()
-    await element(by.id('e2eGotoModeration')).tap()
-    await element(by.id('moderationlistsBtn')).tap()
-    await expect(element(by.id('list-Muted Users'))).toBeVisible()
-    await element(by.id('list-Muted Users')).tap()
-    await expect(
-      element(by.id('user-muted-by-list-account.test')),
-    ).toBeVisible()
-  })
-
-  it('Toggle mute subscription', async () => {
-    await element(by.id('unmuteBtn')).tap()
-    await element(by.id('subscribeBtn')).tap()
-    await element(by.text('Mute accounts')).tap()
-    await element(by.id('confirmBtn')).tap()
-  })
-
-  it('Edit display name and description via the edit modlist modal', async () => {
-    await element(by.id('headerDropdownBtn')).tap()
-    await element(by.text('Edit list details')).tap()
-    await expect(element(by.id('createOrEditListModal'))).toBeVisible()
-    await element(by.id('editNameInput')).clearText()
-    await element(by.id('editNameInput')).typeText('Bad Ppl')
-    await element(by.id('editDescriptionInput')).clearText()
-    await element(by.id('editDescriptionInput')).typeText('They bad')
-    await element(by.id('saveBtn')).tap()
-    await expect(element(by.id('createOrEditListModal'))).not.toBeVisible()
-    await expect(element(by.id('headerTitle'))).toHaveText('Bad Ppl')
-    await expect(element(by.id('listDescription'))).toHaveText('They bad')
-    // have to wait for the toast to clear
-    await waitFor(element(by.id('headerDropdownBtn')))
-      .toBeVisible()
-      .withTimeout(5000)
-  })
-
-  it('Remove description via the edit modlist modal', async () => {
-    await element(by.id('headerDropdownBtn')).tap()
-    await element(by.text('Edit list details')).tap()
-    await expect(element(by.id('createOrEditListModal'))).toBeVisible()
-    await element(by.id('editDescriptionInput')).clearText()
-    await element(by.id('saveBtn')).tap()
-    await expect(element(by.id('createOrEditListModal'))).not.toBeVisible()
-    await expect(element(by.id('listDescription'))).not.toBeVisible()
-    // have to wait for the toast to clear
-    await waitFor(element(by.id('headerDropdownBtn')))
-      .toBeVisible()
-      .withTimeout(5000)
-  })
-
-  // DISABLED e2e environment is real finicky about avatar uploads -prf
-  // it('Set avi via the edit modlist modal', async () => {
-  //   await expect(element(by.id('userAvatarFallback'))).toExist()
-  //   await element(by.id('headerDropdownBtn')).tap()
-  //   await element(by.text('Edit list details')).tap()
-  //   await expect(element(by.id('createOrEditListModal'))).toBeVisible()
-  //   await element(by.id('changeAvatarBtn')).tap()
-  //   await element(by.text('Library')).tap()
-  //   await sleep(3e3)
-  //   await element(by.id('saveBtn')).tap()
-  //   await expect(element(by.id('createOrEditListModal'))).not.toBeVisible()
-  //   await expect(element(by.id('userAvatarImage'))).toExist()
-  //   // have to wait for the toast to clear
-  //   await waitFor(element(by.id('headerDropdownBtn')))
-  //     .toBeVisible()
-  //     .withTimeout(5000)
-  // })
-
-  // it('Remove avi via the edit modlist modal', async () => {
-  //   await expect(element(by.id('userAvatarImage'))).toExist()
-  //   await element(by.id('headerDropdownBtn')).tap()
-  //   await element(by.text('Edit list details')).tap()
-  //   await expect(element(by.id('createOrEditListModal'))).toBeVisible()
-  //   await element(by.id('changeAvatarBtn')).tap()
-  //   await element(by.text('Remove')).tap()
-  //   await element(by.id('saveBtn')).tap()
-  //   await expect(element(by.id('createOrEditListModal'))).not.toBeVisible()
-  //   await expect(element(by.id('userAvatarFallback'))).toExist()
-  //   // have to wait for the toast to clear
-  //   await waitFor(element(by.id('headerDropdownBtn')))
-  //     .toBeVisible()
-  //     .withTimeout(5000)
-  // })
-
-  it('Delete the modlist', async () => {
-    await element(by.id('headerDropdownBtn')).tap()
-    await element(by.text('Delete List')).tap()
-    await element(by.id('confirmBtn')).tap()
-    await expect(element(by.id('listsEmpty'))).toBeVisible()
-  })
-
-  it('Create a new modlist', async () => {
-    await element(by.id('newModListBtn')).tap()
-    await expect(element(by.id('createOrEditListModal'))).toBeVisible()
-    await element(by.id('editNameInput')).typeText('Bad Ppl')
-    await element(by.id('editDescriptionInput')).typeText('They bad')
-    await element(by.id('saveBtn')).tap()
-    await expect(element(by.id('createOrEditListModal'))).not.toBeVisible()
-    await expect(element(by.id('headerTitle'))).toHaveText('Bad Ppl')
-    await expect(element(by.id('listDescription'))).toHaveText('They bad')
-  })
-
-  it('Adds and removes users on modlists from the list', async () => {
-    await element(by.id('addUserBtn')).tap()
-    await expect(element(by.id('listAddUserModal'))).toBeVisible()
-    await waitFor(element(by.id('user-warn-posts.test-addBtn')))
-      .toBeVisible()
-      .withTimeout(5000)
-    await element(by.id('user-warn-posts.test-addBtn')).tap()
-    await element(by.id('doneBtn')).tap()
-    await expect(element(by.id('listAddUserModal'))).not.toBeVisible()
-    await element(by.id('listItems-flatlist')).swipe(
-      'down',
-      'slow',
-      1,
-      0.5,
-      0.5,
-    )
-    await expect(element(by.id('user-warn-posts.test'))).toBeVisible()
-    await element(by.id('user-warn-posts.test-editBtn')).tap()
-    await expect(element(by.id('userAddRemoveListsModal'))).toBeVisible()
-    await element(by.id('user-warn-posts.test-addBtn')).tap()
-    await element(by.id('doneBtn')).tap()
-    await expect(element(by.id('userAddRemoveListsModal'))).not.toBeVisible()
-  })
-
-  it('Shows the modlist on my profile', async () => {
-    await element(by.id('bottomBarProfileBtn')).tap()
-    await element(by.id('profilePager-selector')).swipe('left')
-    await element(by.id('profilePager-selector-5')).tap()
-    await element(by.id('list-Bad Ppl')).tap()
-  })
-
-  it('Adds and removes users on modlists from the profile', async () => {
-    await element(by.id('bottomBarSearchBtn')).tap()
-    await element(by.id('searchTextInput')).typeText('bob')
-    await element(by.id('searchAutoCompleteResult-bob.test')).tap()
-    await expect(element(by.id('profileView'))).toBeVisible()
-
-    await element(by.id('profileHeaderDropdownBtn')).tap()
-    await element(by.text('Add to Lists')).tap()
-    await expect(element(by.id('userAddRemoveListsModal'))).toBeVisible()
-    await element(by.id('user-bob.test-addBtn')).tap()
-    await element(by.id('doneBtn')).tap()
-    await expect(element(by.id('userAddRemoveListsModal'))).not.toBeVisible()
-
-    await element(by.id('profileHeaderDropdownBtn')).tap()
-    await element(by.text('Add to Lists')).tap()
-    await expect(element(by.id('userAddRemoveListsModal'))).toBeVisible()
-    await element(by.id('user-bob.test-addBtn')).tap()
-    await element(by.id('doneBtn')).tap()
-    await expect(element(by.id('userAddRemoveListsModal'))).not.toBeVisible()
-  })
-
-  it('Can report a mute list', async () => {
-    await element(by.id('e2eGotoSettings')).tap()
-    await element(by.id('signOutBtn')).tap()
-    await loginAsBob()
-    await element(by.id('bottomBarSearchBtn')).tap()
-    await element(by.id('searchTextInput')).typeText('alice')
-    await element(by.id('searchAutoCompleteResult-alice.test')).tap()
-    await element(by.id('profilePager-selector')).swipe('left')
-    await element(by.id('profilePager-selector-3')).tap()
-    await element(by.id('list-Bad Ppl')).tap()
-    await element(by.id('headerDropdownBtn')).tap()
-    await element(by.text('Report List')).tap()
-    await expect(element(by.id('reportModal'))).toBeVisible()
-    await expect(element(by.text('Report List'))).toBeVisible()
-    await element(
-      by.id('reportReasonRadios-com.atproto.moderation.defs#reasonRude'),
-    ).tap()
-    await element(by.id('sendReportBtn')).tap()
-    await expect(element(by.id('reportModal'))).not.toBeVisible()
-  })
-})

__e2e__/tests/profile-screen.test.ts

@@ -1,196 +0,0 @@
-/* eslint-env detox/detox */
-
-import {beforeAll, describe, it} from '@jest/globals'
-import {expect} from 'detox'
-
-import {createServer, loginAsAlice, openApp, sleep} from '../util'
-
-describe('Profile screen', () => {
-  beforeAll(async () => {
-    await createServer('?users&posts&feeds')
-    await openApp({
-      permissions: {notifications: 'YES', medialibrary: 'YES', photos: 'YES'},
-    })
-  })
-
-  it('Login and navigate to my profile', async () => {
-    await loginAsAlice()
-    await element(by.id('bottomBarProfileBtn')).tap()
-  })
-
-  it('Can see feeds', async () => {
-    await element(by.id('profilePager-selector')).swipe('left')
-    await element(by.id('profilePager-selector-4')).tap()
-    await expect(element(by.id('feed-alice-favs'))).toBeVisible()
-    await element(by.id('profilePager-selector')).swipe('right')
-    await element(by.id('profilePager-selector-0')).tap()
-  })
-
-  it('Open and close edit profile modal', async () => {
-    await element(by.id('profileHeaderEditProfileButton')).tap()
-    await expect(element(by.id('editProfileModal'))).toBeVisible()
-    await element(by.id('editProfileCancelBtn')).tap()
-    await expect(element(by.id('editProfileModal'))).not.toBeVisible()
-  })
-
-  it('Edit display name and description via the edit profile modal', async () => {
-    await element(by.id('profileHeaderEditProfileButton')).tap()
-    await expect(element(by.id('editProfileModal'))).toBeVisible()
-    await element(by.id('editProfileDisplayNameInput')).clearText()
-    await element(by.id('editProfileDisplayNameInput')).typeText('Alicia')
-    await element(by.id('editProfileDescriptionInput')).clearText()
-    await element(by.id('editProfileDescriptionInput')).typeText(
-      'One cool hacker',
-    )
-    await element(by.id('editProfileSaveBtn')).tap()
-    await expect(element(by.id('editProfileModal'))).not.toBeVisible()
-    await expect(element(by.id('profileHeaderDisplayName'))).toHaveText(
-      'Alicia',
-    )
-    await expect(element(by.id('profileHeaderDescription'))).toHaveText(
-      'One cool hacker',
-    )
-  })
-
-  it('Remove display name and description via the edit profile modal', async () => {
-    await element(by.id('profileHeaderEditProfileButton')).tap()
-    await expect(element(by.id('editProfileModal'))).toBeVisible()
-    await element(by.id('editProfileDisplayNameInput')).clearText()
-    await element(by.id('editProfileDescriptionInput')).clearText()
-    await element(by.id('editProfileSaveBtn')).tap()
-    await expect(element(by.id('editProfileModal'))).not.toBeVisible()
-    await expect(element(by.id('profileHeaderDisplayName'))).toHaveText(
-      'alice.test',
-    )
-    await expect(element(by.id('profileHeaderDescription'))).not.toExist()
-  })
-
-  it('Set avi and banner via the edit profile modal', async () => {
-    await expect(element(by.id('userBannerFallback'))).toExist()
-    await expect(element(by.id('userAvatarFallback'))).toExist()
-    await element(by.id('profileHeaderEditProfileButton')).tap()
-    await expect(element(by.id('editProfileModal'))).toBeVisible()
-    await element(by.id('changeBannerBtn')).tap()
-    await element(by.text('Upload from Library')).tap()
-    await sleep(3e3)
-    await element(by.id('changeAvatarBtn')).tap()
-    await element(by.text('Upload from Library')).tap()
-    await sleep(3e3)
-    await element(by.id('editProfileSaveBtn')).tap()
-    await expect(element(by.id('editProfileModal'))).not.toBeVisible()
-    await expect(element(by.id('userBannerImage'))).toExist()
-    await expect(element(by.id('userAvatarImage'))).toExist()
-  })
-
-  it('Remove avi and banner via the edit profile modal', async () => {
-    await expect(element(by.id('userBannerImage'))).toExist()
-    await expect(element(by.id('userAvatarImage'))).toExist()
-    await element(by.id('profileHeaderEditProfileButton')).tap()
-    await expect(element(by.id('editProfileModal'))).toBeVisible()
-    await element(by.id('changeBannerBtn')).tap()
-    await element(by.text('Remove Banner')).tap()
-    await element(by.id('changeAvatarBtn')).tap()
-    await element(by.text('Remove Avatar')).tap()
-    await element(by.id('editProfileSaveBtn')).tap()
-    await expect(element(by.id('editProfileModal'))).not.toBeVisible()
-    await expect(element(by.id('userBannerFallback'))).toExist()
-    await expect(element(by.id('userAvatarFallback'))).toExist()
-  })
-
-  it('Navigate to another user profile', async () => {
-    await element(by.id('bottomBarSearchBtn')).tap()
-    // have to wait for the toast to clear
-    await waitFor(element(by.id('searchTextInput')))
-      .toBeVisible()
-      .withTimeout(5000)
-    await element(by.id('searchTextInput')).typeText('bob')
-    await element(by.id('searchAutoCompleteResult-bob.test')).tap()
-    await expect(element(by.id('profileView'))).toBeVisible()
-  })
-
-  it('Can follow/unfollow another user', async () => {
-    await element(by.id('followBtn')).tap()
-    await expect(element(by.id('unfollowBtn'))).toBeVisible()
-    await element(by.id('unfollowBtn')).tap()
-    await expect(element(by.id('followBtn'))).toBeVisible()
-  })
-
-  it('Can mute/unmute another user', async () => {
-    await expect(element(by.id('profileHeaderAlert'))).not.toExist()
-    await element(by.id('profileHeaderDropdownBtn')).tap()
-    await element(by.text('Mute Account')).tap()
-    await expect(element(by.id('profileHeaderAlert'))).toBeVisible()
-    await element(by.id('profileHeaderDropdownBtn')).tap()
-    await element(by.text('Unmute Account')).tap()
-    await expect(element(by.id('profileHeaderAlert'))).not.toExist()
-  })
-
-  // TODO skipping because the test env PDS isnt setup correctly to handle the report -prf
-  // it('Can report another user', async () => {
-  //   await element(by.id('profileHeaderDropdownBtn')).tap()
-  //   await element(by.text('Report Account')).tap()
-  //   await expect(element(by.id('reportModal'))).toBeVisible()
-  //   await element(
-  //     by.id('reportReasonRadios-com.atproto.moderation.defs#reasonSpam'),
-  //   ).tap()
-  //   await element(by.id('sendReportBtn')).tap()
-  //   await expect(element(by.id('reportModal'))).not.toBeVisible()
-  // })
-
-  it('Can like posts', async () => {
-    await element(by.id('postsFeed-flatlist')).swipe(
-      'down',
-      'slow',
-      1,
-      0.5,
-      0.5,
-    )
-
-    const posts = by.id('feedItem-by-bob.test')
-    await expect(
-      element(by.id('likeCount').withAncestor(posts)).atIndex(0),
-    ).not.toExist()
-    await element(by.id('likeBtn').withAncestor(posts)).atIndex(0).tap()
-    await expect(
-      element(by.id('likeCount').withAncestor(posts)).atIndex(0),
-    ).toHaveText('1')
-    await element(by.id('likeBtn').withAncestor(posts)).atIndex(0).tap()
-    await expect(
-      element(by.id('likeCount').withAncestor(posts)).atIndex(0),
-    ).not.toExist()
-  })
-
-  it('Can repost posts', async () => {
-    const posts = by.id('feedItem-by-bob.test')
-    await expect(
-      element(by.id('repostCount').withAncestor(posts)).atIndex(0),
-    ).not.toExist()
-    await element(by.id('repostBtn').withAncestor(posts)).atIndex(0).tap()
-    await expect(element(by.id('repostModal'))).toBeVisible()
-    await element(by.id('repostBtn').withAncestor(by.id('repostModal'))).tap()
-    await expect(element(by.id('repostModal'))).not.toBeVisible()
-    await expect(
-      element(by.id('repostCount').withAncestor(posts)).atIndex(0),
-    ).toHaveText('1')
-    await element(by.id('repostBtn').withAncestor(posts)).atIndex(0).tap()
-    await expect(element(by.id('repostModal'))).toBeVisible()
-    await element(by.id('repostBtn').withAncestor(by.id('repostModal'))).tap()
-    await expect(element(by.id('repostModal'))).not.toBeVisible()
-    await expect(
-      element(by.id('repostCount').withAncestor(posts)).atIndex(0),
-    ).not.toExist()
-  })
-
-  // TODO skipping because the test env PDS isnt setup correctly to handle the report -prf
-  // it('Can report posts', async () => {
-  //   const posts = by.id('feedItem-by-bob.test')
-  //   await element(by.id('postDropdownBtn').withAncestor(posts)).atIndex(0).tap()
-  //   await element(by.text('Report post')).tap()
-  //   await expect(element(by.id('reportModal'))).toBeVisible()
-  //   await element(
-  //     by.id('reportReasonRadios-com.atproto.moderation.defs#reasonSpam'),
-  //   ).tap()
-  //   await element(by.id('sendReportBtn')).tap()
-  //   await expect(element(by.id('reportModal'))).not.toBeVisible()
-  // })
-})

__e2e__/tests/search-screen.test.ts

@@ -1,25 +0,0 @@
-/* eslint-env detox/detox */
-
-import {describe, beforeAll, it} from '@jest/globals'
-import {expect} from 'detox'
-import {openApp, loginAsAlice, createServer} from '../util'
-
-describe('Search screen', () => {
-  beforeAll(async () => {
-    await createServer('?users')
-    await openApp({
-      permissions: {notifications: 'YES', medialibrary: 'YES', photos: 'YES'},
-    })
-  })
-
-  it('Login', async () => {
-    await loginAsAlice()
-  })
-
-  it('Navigate to another user profile via autocomplete', async () => {
-    await element(by.id('bottomBarSearchBtn')).tap()
-    await element(by.id('searchTextInput')).typeText('bob')
-    await element(by.id('searchAutoCompleteResult-bob.test')).tap()
-    await expect(element(by.id('profileView'))).toBeVisible()
-  })
-})

__e2e__/tests/self-labeling.test.ts

@@ -1,36 +0,0 @@
-/* eslint-env detox/detox */
-
-import {describe, beforeAll, it} from '@jest/globals'
-import {expect} from 'detox'
-import {openApp, loginAsAlice, createServer, sleep} from '../util'
-
-describe('Self-labeling', () => {
-  beforeAll(async () => {
-    await createServer('?users')
-    await openApp({
-      permissions: {notifications: 'YES', medialibrary: 'YES', photos: 'YES'},
-    })
-  })
-
-  it('Login', async () => {
-    await loginAsAlice()
-    await element(by.id('homeScreenFeedTabs-Following')).tap()
-  })
-
-  it('Post an image with the porn label', async () => {
-    await element(by.id('composeFAB')).tap()
-    await element(by.id('composerTextInput')).typeText('Post with an image')
-    await element(by.id('openGalleryBtn')).tap()
-    await sleep(3e3)
-    await element(by.id('labelsBtn')).tap()
-    await element(by.id('pornLabelBtn')).tap()
-    await element(by.id('confirmBtn')).tap()
-    await element(by.id('composerPublishBtn')).tap()
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-    const posts = by.id('feedItem-by-alice.test')
-    await element(by.id('e2eRefreshHome')).tap()
-    await expect(
-      element(by.id('contentHider-embed').withAncestor(posts)).atIndex(0),
-    ).toExist()
-  })
-})

__e2e__/tests/shell.test.skip.ts

@@ -1,33 +0,0 @@
-/* eslint-env detox/detox */
-
-import {openApp, loginAsAlice, createServer} from '../util'
-
-describe('Shell', () => {
-  beforeAll(async () => {
-    await createServer('?users')
-    await openApp({permissions: {notifications: 'YES'}})
-  })
-
-  it('Login', async () => {
-    await loginAsAlice()
-    await element(by.id('homeScreenFeedTabs-Following')).tap()
-  })
-
-  it('Can swipe the shelf open', async () => {
-    await element(by.id('homeScreen')).swipe('right', 'fast', 0.75)
-    await expect(element(by.id('drawer'))).toBeVisible()
-    await element(by.id('drawer')).swipe('left', 'fast', 0.75)
-    await expect(element(by.id('drawer'))).not.toBeVisible()
-  })
-
-  it('Can open the shelf by pressing the header avi', async () => {
-    await element(by.id('viewHeaderDrawerBtn')).tap()
-    await expect(element(by.id('drawer'))).toBeVisible()
-  })
-
-  it('Can navigate using the shelf', async () => {
-    await element(by.id('menuItemButton-Notifications')).tap()
-    await expect(element(by.id('drawer'))).not.toBeVisible()
-    await expect(element(by.id('notificationsScreen'))).toBeVisible()
-  })
-})

__e2e__/tests/thread-muting.test.ts

@@ -1,103 +0,0 @@
-/* eslint-env detox/detox */
-
-import {describe, beforeAll, it} from '@jest/globals'
-import {expect} from 'detox'
-import {openApp, loginAsAlice, loginAsBob, createServer} from '../util'
-
-describe('Thread muting', () => {
-  beforeAll(async () => {
-    await createServer('?users&follows')
-    await openApp({permissions: {notifications: 'YES'}})
-  })
-
-  it('Login, create a thread, and log out', async () => {
-    await loginAsAlice()
-    await element(by.id('homeScreenFeedTabs-Following')).tap()
-    await element(by.id('composeFAB')).tap()
-    await element(by.id('composerTextInput')).typeText('Test thread')
-    await element(by.id('composerPublishBtn')).tap()
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-  })
-
-  it('Login, reply to the thread, and log out', async () => {
-    await loginAsBob()
-    await element(by.id('homeScreenFeedTabs-Following')).tap()
-    const alicePosts = by.id('feedItem-by-alice.test')
-    await element(by.id('replyBtn').withAncestor(alicePosts)).atIndex(0).tap()
-    await element(by.id('composerTextInput')).typeText('Reply 1')
-    await element(by.id('composerPublishBtn')).tap()
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-  })
-
-  it('Login, confirm notification exists, mute thread, and log out', async () => {
-    await loginAsAlice()
-    await element(by.id('bottomBarNotificationsBtn')).tap()
-    const bobNotifs = by.id('feedItem-by-bob.test')
-    await expect(
-      element(by.id('postText').withAncestor(bobNotifs)).atIndex(0),
-    ).toHaveText('Reply 1')
-    await element(by.id('postDropdownBtn').withAncestor(bobNotifs))
-      .atIndex(0)
-      .tap()
-    await element(by.text('Mute thread')).tap()
-    // have to wait for the toast to clear
-    await waitFor(element(by.id('viewHeaderDrawerBtn')))
-      .toBeVisible()
-      .withTimeout(5000)
-  })
-
-  it('Login, reply to the thread twice, and log out', async () => {
-    await loginAsBob()
-
-    await element(by.id('bottomBarProfileBtn')).tap()
-    await element(by.id('profilePager-selector-1')).tap()
-    const bobPosts = by.id('feedItem-by-bob.test')
-    await element(by.id('replyBtn').withAncestor(bobPosts)).atIndex(0).tap()
-    await element(by.id('composerTextInput')).typeText('Reply 2')
-    await element(by.id('composerPublishBtn')).tap()
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-
-    const alicePosts = by.id('feedItem-by-alice.test')
-    await element(by.id('replyBtn').withAncestor(alicePosts)).atIndex(0).tap()
-    await element(by.id('composerTextInput')).typeText('Reply 3')
-    await element(by.id('composerPublishBtn')).tap()
-    await expect(element(by.id('composeFAB'))).toBeVisible()
-
-    await element(by.id('bottomBarHomeBtn')).tap()
-  })
-
-  it('Login, confirm notifications dont exist, unmute the thread, confirm notifications exist', async () => {
-    await loginAsAlice()
-
-    await element(by.id('bottomBarNotificationsBtn')).tap()
-    const bobNotifs = by.id('feedItem-by-bob.test')
-    await expect(
-      element(by.id('postText').withAncestor(bobNotifs)).atIndex(0),
-    ).not.toExist()
-
-    await element(by.id('bottomBarHomeBtn')).tap()
-    const alicePosts = by.id('feedItem-by-alice.test')
-    await element(by.id('postDropdownBtn').withAncestor(alicePosts))
-      .atIndex(0)
-      .tap()
-    await element(by.text('Unmute thread')).tap()
-
-    // TODO
-    // the swipe down to trigger PTR isnt working and I dont want to block on this
-    // -prf
-    // await element(by.id('bottomBarNotificationsBtn')).tap()
-    // await element(by.id('notifsFeed')).swipe('down', 'fast')
-    // await waitFor(element(by.id('postText').withAncestor(bobNotifs)))
-    //   .toBeVisible()
-    //   .withTimeout(5000)
-    // await expect(
-    //   element(by.id('postText').withAncestor(bobNotifs)).atIndex(0),
-    // ).toHaveText('Reply 2')
-    // await expect(
-    //   element(by.id('postText').withAncestor(bobNotifs)).atIndex(1),
-    // ).toHaveText('Reply 3')
-    // await expect(
-    //   element(by.id('postText').withAncestor(bobNotifs)).atIndex(2),
-    // ).toHaveText('Reply 1')
-  })
-})

__e2e__/tests/thread-screen.test.ts

@@ -1,131 +0,0 @@
-/* eslint-env detox/detox */
-
-import {beforeAll, describe, it} from '@jest/globals'
-import {expect} from 'detox'
-
-import {createServer, loginAsAlice, openApp} from '../util'
-
-describe('Thread screen', () => {
-  beforeAll(async () => {
-    await createServer('?users&follows&thread')
-    await openApp({permissions: {notifications: 'YES'}})
-  })
-
-  it('Login & navigate to thread', async () => {
-    await loginAsAlice()
-    await element(by.id('homeScreenFeedTabs-Following')).tap()
-    await element(by.id('feedItem-by-bob.test')).atIndex(0).tap()
-    await expect(
-      element(
-        by
-          .id('postThreadItem-by-bob.test')
-          .withDescendant(by.text('Thread root')),
-      ),
-    ).toBeVisible()
-    await expect(
-      element(
-        by
-          .id('postThreadItem-by-carla.test')
-          .withDescendant(by.text('Thread reply')),
-      ),
-    ).toBeVisible()
-  })
-
-  it('Can like the root post', async () => {
-    const post = by.id('postThreadItem-by-bob.test')
-    await expect(
-      element(by.id('likeCount-expanded').withAncestor(post)).atIndex(0),
-    ).not.toExist()
-    await element(by.id('likeBtn').withAncestor(post)).atIndex(0).tap()
-    await expect(
-      element(by.id('likeCount-expanded').withAncestor(post)).atIndex(0),
-    ).toHaveText('1 like')
-    await element(by.id('likeBtn').withAncestor(post)).atIndex(0).tap()
-    await expect(
-      element(by.id('likeCount-expanded').withAncestor(post)).atIndex(0),
-    ).not.toExist()
-  })
-
-  it('Can like a reply post', async () => {
-    const post = by.id('postThreadItem-by-carla.test')
-    await expect(
-      element(by.id('likeCount').withAncestor(post)).atIndex(0),
-    ).not.toExist()
-    await element(by.id('likeBtn').withAncestor(post)).atIndex(0).tap()
-    await expect(
-      element(by.id('likeCount').withAncestor(post)).atIndex(0),
-    ).toHaveText('1')
-    await element(by.id('likeBtn').withAncestor(post)).atIndex(0).tap()
-    await expect(
-      element(by.id('likeCount').withAncestor(post)).atIndex(0),
-    ).not.toExist()
-  })
-
-  it('Can repost the root post', async () => {
-    const post = by.id('postThreadItem-by-bob.test')
-    await expect(
-      element(by.id('repostCount-expanded').withAncestor(post)).atIndex(0),
-    ).not.toExist()
-    await element(by.id('repostBtn').withAncestor(post)).atIndex(0).tap()
-    await expect(element(by.id('repostModal'))).toBeVisible()
-    await element(by.id('repostBtn').withAncestor(by.id('repostModal'))).tap()
-    await expect(element(by.id('repostModal'))).not.toBeVisible()
-    await expect(
-      element(by.id('repostCount-expanded').withAncestor(post)).atIndex(0),
-    ).toHaveText('1 repost')
-    await element(by.id('repostBtn').withAncestor(post)).atIndex(0).tap()
-    await expect(element(by.id('repostModal'))).toBeVisible()
-    await element(by.id('repostBtn').withAncestor(by.id('repostModal'))).tap()
-    await expect(element(by.id('repostModal'))).not.toBeVisible()
-    await expect(
-      element(by.id('repostCount-expanded').withAncestor(post)).atIndex(0),
-    ).not.toExist()
-  })
-
-  it('Can repost a reply post', async () => {
-    const post = by.id('postThreadItem-by-carla.test')
-    await expect(
-      element(by.id('repostCount').withAncestor(post)).atIndex(0),
-    ).not.toExist()
-    await element(by.id('repostBtn').withAncestor(post)).atIndex(0).tap()
-    await expect(element(by.id('repostModal'))).toBeVisible()
-    await element(by.id('repostBtn').withAncestor(by.id('repostModal'))).tap()
-    await expect(element(by.id('repostModal'))).not.toBeVisible()
-    await expect(
-      element(by.id('repostCount').withAncestor(post)).atIndex(0),
-    ).toHaveText('1')
-    await element(by.id('repostBtn').withAncestor(post)).atIndex(0).tap()
-    await expect(element(by.id('repostModal'))).toBeVisible()
-    await element(by.id('repostBtn').withAncestor(by.id('repostModal'))).tap()
-    await expect(element(by.id('repostModal'))).not.toBeVisible()
-    await expect(
-      element(by.id('repostCount').withAncestor(post)).atIndex(0),
-    ).not.toExist()
-  })
-
-  // TODO skipping because the test env PDS isnt setup correctly to handle the report -prf
-  // it('Can report the root post', async () => {
-  //   const post = by.id('postThreadItem-by-bob.test')
-  //   await element(by.id('postDropdownBtn').withAncestor(post)).atIndex(0).tap()
-  //   await element(by.text('Report post')).tap()
-  //   await expect(element(by.id('reportModal'))).toBeVisible()
-  //   await element(
-  //     by.id('reportReasonRadios-com.atproto.moderation.defs#reasonSpam'),
-  //   ).tap()
-  //   await element(by.id('sendReportBtn')).tap()
-  //   await expect(element(by.id('reportModal'))).not.toBeVisible()
-  // })
-
-  // TODO skipping because the test env PDS isnt setup correctly to handle the report -prf
-  // it('Can report a reply post', async () => {
-  //   const post = by.id('postThreadItem-by-carla.test')
-  //   await element(by.id('postDropdownBtn').withAncestor(post)).atIndex(0).tap()
-  //   await element(by.text('Report post')).tap()
-  //   await expect(element(by.id('reportModal'))).toBeVisible()
-  //   await element(
-  //     by.id('reportReasonRadios-com.atproto.moderation.defs#reasonSpam'),
-  //   ).tap()
-  //   await element(by.id('sendReportBtn')).tap()
-  //   await expect(element(by.id('reportModal'))).not.toBeVisible()
-  // })
-})

__e2e__/util.ts

@@ -1,141 +0,0 @@
-import {execSync} from 'child_process'
-import {resolveConfig} from 'detox/internals'
-import http from 'http'
-
-const platform = device.getPlatform()
-
-export async function openApp(opts: any) {
-  opts = opts || {}
-  const config = await resolveConfig()
-
-  if (device.getPlatform() === 'ios') {
-    // disable password autofill
-    execSync(
-      `plutil -replace restrictedBool.allowPasswordAutoFill.value -bool NO ~/Library/Developer/CoreSimulator/Devices/${device.id}/data/Containers/Shared/SystemGroup/systemgroup.com.apple.configurationprofiles/Library/ConfigurationProfiles/UserSettings.plist`,
-    )
-    execSync(
-      `plutil -replace restrictedBool.allowPasswordAutoFill.value -bool NO ~/Library/Developer/CoreSimulator/Devices/${device.id}/data/Library/UserConfigurationProfiles/EffectiveUserSettings.plist`,
-    )
-    execSync(
-      `plutil -replace restrictedBool.allowPasswordAutoFill.value -bool NO ~/Library/Developer/CoreSimulator/Devices/${device.id}/data/Library/UserConfigurationProfiles/PublicInfo/PublicEffectiveUserSettings.plist`,
-    )
-  }
-  if (config.configurationName.split('.').includes('debug')) {
-    return await openAppForDebugBuild(platform, opts)
-  } else {
-    return await device.launchApp({
-      ...opts,
-      newInstance: true,
-    })
-  }
-}
-
-export async function isVisible(id: string) {
-  try {
-    await expect(element(by.id(id))).toBeVisible()
-    return true
-  } catch (e) {
-    return false
-  }
-}
-
-export async function login(
-  service: string,
-  username: string,
-  password: string,
-  {takeScreenshots} = {takeScreenshots: false},
-) {
-  await element(by.id('signInButton')).tap()
-  if (takeScreenshots) {
-    await device.takeScreenshot('1- opened sign-in screen')
-  }
-  if (await isVisible('chooseAccountForm')) {
-    await element(by.id('chooseNewAccountBtn')).tap()
-  }
-  await element(by.id('selectServiceButton')).tap()
-  if (takeScreenshots) {
-    await device.takeScreenshot('2- opened service selector')
-  }
-  await element(by.id('customSelectBtn')).tap()
-  await element(by.id('customServerTextInput')).typeText(service)
-  await element(by.id('customServerTextInput')).tapReturnKey()
-  await element(by.id('doneBtn')).tap()
-  if (takeScreenshots) {
-    await device.takeScreenshot('3- input custom service')
-  }
-  await element(by.id('loginUsernameInput')).typeText(username)
-  await element(by.id('loginPasswordInput')).typeText(password)
-  if (takeScreenshots) {
-    await device.takeScreenshot('4- entered username and password')
-  }
-  await element(by.id('loginNextButton')).tap()
-}
-
-export async function loginAsAlice() {
-  await element(by.id('e2eSignInAlice')).tap()
-}
-
-export async function loginAsBob() {
-  await element(by.id('e2eSignInBob')).tap()
-}
-
-async function openAppForDebugBuild(platform: string, opts: any) {
-  const deepLinkUrl = // Local testing with packager
-    /*process.env.EXPO_USE_UPDATES
-    ? // Testing latest published EAS update for the test_debug channel
-      getDeepLinkUrl(getLatestUpdateUrl())
-    : */ getDeepLinkUrl(getDevLauncherPackagerUrl(platform))
-
-  if (platform === 'ios') {
-    await device.launchApp({
-      ...opts,
-      newInstance: true,
-    })
-    sleep(3000)
-    await device.openURL({
-      url: deepLinkUrl,
-    })
-  } else {
-    await device.launchApp({
-      ...opts,
-      newInstance: true,
-      url: deepLinkUrl,
-    })
-  }
-
-  await sleep(3000)
-}
-
-export async function createServer(path = ''): Promise<string> {
-  return new Promise(function (resolve, reject) {
-    var req = http.request(
-      {
-        method: 'POST',
-        host: 'localhost',
-        port: 1986,
-        path: `/${path}`,
-      },
-      function (res) {
-        const body: Buffer[] = []
-        res.on('data', chunk => body.push(chunk))
-        res.on('end', function () {
-          try {
-            resolve(Buffer.concat(body).toString())
-          } catch (e) {
-            reject(e)
-          }
-        })
-      },
-    )
-    req.on('error', reject)
-    req.end()
-  })
-}
-
-const getDeepLinkUrl = (url: string) =>
-  `expo+bluesky://expo-development-client/?url=${encodeURIComponent(url)}`
-
-const getDevLauncherPackagerUrl = (platform: string) =>
-  `http://localhost:8081/index.bundle?platform=${platform}&dev=true&minify=false&disableOnboarding=1`
-
-export const sleep = (t: number) => new Promise(res => setTimeout(res, t))

__tests__/lib/string.test.ts

@@ -3,7 +3,7 @@ import {RichText} from '@atproto/api'
 import {parseEmbedPlayerFromUrl} from 'lib/strings/embed-player'
 import {cleanError} from '../../src/lib/strings/errors'
 import {createFullHandle, makeValidHandle} from '../../src/lib/strings/handles'
-import {enforceLen, pluralize} from '../../src/lib/strings/helpers'
+import {enforceLen} from '../../src/lib/strings/helpers'
 import {detectLinkables} from '../../src/lib/strings/rich-text-detection'
 import {shortenLinks} from '../../src/lib/strings/rich-text-manip'
 import {ago} from '../../src/lib/strings/time'
@@ -127,35 +127,6 @@ describe('detectLinkables', () => {
   })
 })
 
-describe('pluralize', () => {
-  const inputs: [number, string, string?][] = [
-    [1, 'follower'],
-    [1, 'member'],
-    [100, 'post'],
-    [1000, 'repost'],
-    [10000, 'upvote'],
-    [100000, 'other'],
-    [2, 'man', 'men'],
-  ]
-  const outputs = [
-    'follower',
-    'member',
-    'posts',
-    'reposts',
-    'upvotes',
-    'others',
-    'men',
-  ]
-
-  it('correctly pluralizes a set of words', () => {
-    for (let i = 0; i < inputs.length; i++) {
-      const input = inputs[i]
-      const output = pluralize(...input)
-      expect(output).toEqual(outputs[i])
-    }
-  })
-})
-
 describe('makeRecordUri', () => {
   const inputs: [string, string, string][] = [
     ['alice.test', 'app.bsky.feed.post', '3jk7x4irgv52r'],
@@ -172,6 +143,10 @@ describe('makeRecordUri', () => {
 })
 
 describe('ago', () => {
+  const oneYearDate = new Date(
+    new Date().setMonth(new Date().getMonth() - 11),
+  ).setDate(new Date().getDate() - 28)
+
   const inputs = [
     1671461038,
     '04 Dec 1995 00:12:00 GMT',
@@ -180,7 +155,32 @@ describe('ago', () => {
     new Date().setMinutes(new Date().getMinutes() - 10),
     new Date().setHours(new Date().getHours() - 1),
     new Date().setDate(new Date().getDate() - 1),
+    new Date().setDate(new Date().getDate() - 20),
+    new Date().setDate(new Date().getDate() - 25),
+    new Date().setDate(new Date().getDate() - 28),
+    new Date().setDate(new Date().getDate() - 29),
+    new Date().setDate(new Date().getDate() - 30),
     new Date().setMonth(new Date().getMonth() - 1),
+    new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(
+      new Date().getDate() - 20,
+    ),
+    new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(
+      new Date().getDate() - 25,
+    ),
+    new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(
+      new Date().getDate() - 28,
+    ),
+    new Date(new Date().setMonth(new Date().getMonth() - 1)).setDate(
+      new Date().getDate() - 29,
+    ),
+    new Date().setMonth(new Date().getMonth() - 11),
+    new Date(new Date().setMonth(new Date().getMonth() - 11)).setDate(
+      new Date().getDate() - 20,
+    ),
+    new Date(new Date().setMonth(new Date().getMonth() - 11)).setDate(
+      new Date().getDate() - 25,
+    ),
+    oneYearDate,
   ]
   const outputs = [
     new Date(1671461038).toLocaleDateString(),
@@ -190,7 +190,20 @@ describe('ago', () => {
     '10m',
     '1h',
     '1d',
+    '20d',
+    '25d',
+    '28d',
+    '29d',
     '1mo',
+    '1mo',
+    '1mo',
+    '1mo',
+    '2mo',
+    '2mo',
+    '11mo',
+    '11mo',
+    '11mo',
+    new Date(oneYearDate).toLocaleDateString(),
   ]
 
   it('correctly calculates how much time passed, in a string', () => {

app.config.js

@@ -91,6 +91,29 @@ module.exports = function (config) {
         entitlements: {
           'com.apple.security.application-groups': 'group.app.bsky',
         },
+        privacyManifests: {
+          NSPrivacyAccessedAPITypes: [
+            {
+              NSPrivacyAccessedAPIType:
+                'NSPrivacyAccessedAPICategoryFileTimestamp',
+              NSPrivacyAccessedAPITypeReasons: ['C617.1', '3B52.1', '0A2A.1'],
+            },
+            {
+              NSPrivacyAccessedAPIType: 'NSPrivacyAccessedAPICategoryDiskSpace',
+              NSPrivacyAccessedAPITypeReasons: ['E174.1', '85F4.1'],
+            },
+            {
+              NSPrivacyAccessedAPIType:
+                'NSPrivacyAccessedAPICategorySystemBootTime',
+              NSPrivacyAccessedAPITypeReasons: ['35F9.1'],
+            },
+            {
+              NSPrivacyAccessedAPIType:
+                'NSPrivacyAccessedAPICategoryUserDefaults',
+              NSPrivacyAccessedAPITypeReasons: ['CA92.1'],
+            },
+          ],
+        },
       },
       androidStatusBar: {
         barStyle: 'light-content',

assets/icons/bell2_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 2a7.307 7.307 0 0 0-7.298 6.943l-.19 3.798-1.321 2.641A1.809 1.809 0 0 0 4.809 18H7.1a5.002 5.002 0 0 0 9.8 0h2.291a1.809 1.809 0 0 0 1.618-2.618l-1.32-2.641-.19-3.798A7.308 7.308 0 0 0 12 2Zm0 18a3.001 3.001 0 0 1-2.83-2h5.66A3.001 3.001 0 0 1 12 20Z" clip-rule="evenodd"/></svg>

assets/icons/bell2_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.702 8.943a7.307 7.307 0 0 1 14.596 0l.19 3.798 1.321 2.641A1.809 1.809 0 0 1 19.191 18H16.9a5.002 5.002 0 0 1-9.8 0H4.809a1.809 1.809 0 0 1-1.618-2.618l1.32-2.641.19-3.798ZM9.17 18a3.001 3.001 0 0 0 5.658 0H9.171ZM12 4a5.307 5.307 0 0 0-5.3 5.042l-.19 3.798a2 2 0 0 1-.21.795L5.119 16h13.764l-1.183-2.365a2 2 0 0 1-.208-.795l-.19-3.798A5.308 5.308 0 0 0 12 4Z" clip-rule="evenodd"/></svg>

assets/icons/bell_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 2a7.853 7.853 0 0 0-7.784 6.815l-1.207 9.053A1 1 0 0 0 4 19h3.354c.904 1.748 2.607 3 4.646 3 2.039 0 3.742-1.252 4.646-3H20a1 1 0 0 0 .991-1.132l-1.207-9.053A7.853 7.853 0 0 0 12 2Zm2.222 17H9.778c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1Z" clip-rule="evenodd"/></svg>

assets/icons/bell_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4.216 8.815a7.853 7.853 0 0 1 15.568 0l1.207 9.053A1 1 0 0 1 20 19h-3.354c-.904 1.748-2.607 3-4.646 3-2.039 0-3.742-1.252-4.646-3H4a1 1 0 0 1-.991-1.132l1.207-9.053ZM9.778 19c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1H9.778ZM12 4a5.853 5.853 0 0 0-5.802 5.08L5.142 17h13.716l-1.056-7.92A5.853 5.853 0 0 0 12 4Z" clip-rule="evenodd"/></svg>

assets/icons/bubble_stroke2_corner3_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2.002 7a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H12.28l-4.762 2.858A1 1 0 0 1 6.002 21v-2a4 4 0 0 1-4-4V7Zm4-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h1a1 1 0 0 1 1 1v1.234l3.486-2.092a1 1 0 0 1 .514-.142h6a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-12Z" clip-rule="evenodd"/></svg>

assets/icons/bulletList_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm0 10a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm10-1a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2h-7Zm-1-9a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>

assets/icons/bulletList_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M6 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM3 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm9 0a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Zm-6 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm9 0a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z" clip-rule="evenodd"/></svg>

assets/icons/editBig_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="M17.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-9 9A1 1 0 0 1 12 16H9a1 1 0 0 1-1-1v-3a1 1 0 0 1 .293-.707l9-9ZM10 12.414V14h1.586l8-8L18 4.414l-8 8ZM3 4a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Z" clip-rule="evenodd"/></svg>

assets/icons/emojiSmile_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="M17.657 6.343A8 8 0 1 0 6.343 17.657 8 8 0 0 0 17.657 6.343ZM4.929 4.93c3.905-3.905 10.237-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142-3.905 3.905-10.237 3.905-14.142 0-3.905-3.905-3.905-10.237 0-14.142Zm3.536 9.192a1 1 0 0 1 1.414 0 3 3 0 0 0 4.243 0 1 1 0 0 1 1.414 1.415 5 5 0 0 1-7.071 0 1 1 0 0 1 0-1.415Z M10.5 9.5c0 .828-.56 1.5-1.25 1.5S8 10.328 8 9.5 8.56 8 9.25 8s1.25.672 1.25 1.5ZM16 9.5c0 .828-.56 1.5-1.25 1.5s-1.25-.672-1.25-1.5.56-1.5 1.25-1.5S16 8.672 16 9.5Z" clip-rule="evenodd"/></svg>

assets/icons/hashtag_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9.186 2.512a1.5 1.5 0 0 0-1.674 1.302L7.176 6.5H4a1.5 1.5 0 1 0 0 3h2.8l-.624 5H4a1.5 1.5 0 0 0 0 3h1.8l-.288 2.314a1.5 1.5 0 1 0 2.976.372l.336-2.686h4.977l-.29 2.314a1.5 1.5 0 1 0 2.977.372l.336-2.686H20a1.5 1.5 0 0 0 0-3h-2.8l.624-5H20a1.5 1.5 0 0 0 0-3h-1.8l.288-2.314a1.5 1.5 0 1 0-2.976-.372L15.176 6.5h-4.977l.29-2.314a1.5 1.5 0 0 0-1.303-1.674ZM9.2 14.5l.625-5h4.977l-.625 5H9.199Z" clip-rule="evenodd"/></svg>

assets/icons/homeOpen_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M12.63 1.724a1 1 0 0 0-1.26 0l-8 6.5A1 1 0 0 0 3 9v11a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-6h4v6a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V9a1 1 0 0 0-.37-.776l-8-6.5Z"/></svg>

assets/icons/homeOpen_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="M11.37 1.724a1 1 0 0 1 1.26 0l8 6.5A1 1 0 0 1 21 9v11a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-5h-2v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 .37-.776l8-6.5ZM5 9.476V19h4v-5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v5h4V9.476l-7-5.688-7 5.688Z" clip-rule="evenodd"/></svg>

assets/icons/magnifyingGlass_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M5 11a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm6-8a8 8 0 1 0 4.906 14.32l3.387 3.387a1 1 0 0 0 1.414-1.414l-3.387-3.387A8 8 0 0 0 11 3Zm4 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z" clip-rule="evenodd"/></svg>

assets/icons/message_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 4.445 7.169 1 1 0 0 0-.629-.088l-3.537.662.7-3.415a1 1 0 0 0-.09-.66A7.961 7.961 0 0 1 4 12Zm8-10C6.477 2 2 6.477 2 12c0 1.523.341 2.968.951 4.262l-.93 4.537a1 1 0 0 0 1.163 1.184l4.68-.876A9.968 9.968 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2ZM7.5 13.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm4.5 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm4.5 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z" clip-rule="evenodd"/></svg>

assets/icons/message_stroke2_corner0_rounded_filled.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.968 9.968 0 0 1-4.136-.893l-4.68.876a1 1 0 0 1-1.164-1.184l.931-4.537A9.965 9.965 0 0 1 2 12Zm4.25 0a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Zm4.5 0a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Zm5.75 1.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z" clip-rule="evenodd"/></svg>

assets/icons/settingsGear2_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M9.996 2.869A1.951 1.951 0 0 1 11.62 2h.76c.653 0 1.262.326 1.624.869l1.141 1.712 1.749-.404a1.951 1.951 0 0 1 1.819.522l.588.589c.476.475.673 1.162.522 1.818l-.404 1.749 1.712 1.141c.543.362.869.971.869 1.624v.76c0 .653-.326 1.262-.869 1.624l-1.712 1.141.404 1.749a1.951 1.951 0 0 1-.522 1.819l-.588.588a1.951 1.951 0 0 1-1.819.522l-1.749-.404-1.141 1.712A1.951 1.951 0 0 1 12.38 22h-.76a1.951 1.951 0 0 1-1.624-.869L8.855 19.42l-1.749.404a1.951 1.951 0 0 1-1.818-.522l-.59-.588a1.951 1.951 0 0 1-.52-1.819l.403-1.749-1.712-1.141A1.951 1.951 0 0 1 2 12.38v-.76c0-.653.326-1.262.869-1.624L4.58 8.855l-.404-1.749A1.951 1.951 0 0 1 4.7 5.288l.589-.59a1.951 1.951 0 0 1 1.818-.52l1.749.403 1.141-1.712ZM8.5 12a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Z" clip-rule="evenodd"/></svg>

assets/icons/userCircle_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3-12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-3 10a7.976 7.976 0 0 1-5.714-2.4C7.618 16.004 9.605 15 12 15c2.396 0 4.383 1.005 5.714 2.6A7.976 7.976 0 0 1 12 20Z" clip-rule="evenodd"/></svg>

assets/icons/userCircle_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 4a8 8 0 0 0-5.935 13.365C7.56 15.895 9.612 15 12 15c2.388 0 4.44.894 5.935 2.365A8 8 0 0 0 12 4Zm4.412 14.675C15.298 17.636 13.792 17 12 17c-1.791 0-3.298.636-4.412 1.675A7.96 7.96 0 0 0 12 20a7.96 7.96 0 0 0 4.412-1.325ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10a9.98 9.98 0 0 1-3.462 7.567A9.965 9.965 0 0 1 12 22a9.965 9.965 0 0 1-6.538-2.433A9.98 9.98 0 0 1 2 12Zm10-4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" clip-rule="evenodd"/></svg>

bskyweb/cmd/bskyweb/rss.go

@@ -5,7 +5,6 @@ import (
 	"fmt"
 	"net/http"
 	"strings"
-	"time"
 
 	appbsky "github.com/bluesky-social/indigo/api/bsky"
 	"github.com/bluesky-social/indigo/atproto/syntax"
@@ -13,6 +12,9 @@ import (
 	"github.com/labstack/echo/v4"
 )
 
+// time.RFC822Z, but with four digit year. used for RSS pubData.
+var FullYearRFC822Z = "02 Jan 2006 15:04 -0700"
+
 type ItemGUID struct {
 	XMLName xml.Name `xml:"guid"`
 	Value   string   `xml:",chardata"`
@@ -107,7 +109,7 @@ func (srv *Server) WebProfileRSS(c echo.Context) error {
 		pubDate := ""
 		createdAt, err := syntax.ParseDatetimeLenient(rec.CreatedAt)
 		if nil == err {
-			pubDate = createdAt.Time().Format(time.RFC822Z)
+			pubDate = createdAt.Time().Format(FullYearRFC822Z)
 		}
 		posts = append(posts, Item{
 			Link:        fmt.Sprintf("https://%s/profile/%s/post/%s", req.Host, pv.Handle, aturi.RecordKey().String()),

bskyweb/templates/base.html

@@ -47,6 +47,14 @@
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
     }
 
+    #preload {
+      width: 100px;
+      position: fixed;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+
     /* Buttons and inputs have a font set by UA, so we'll have to reset that */
     button, input, textarea {
       font: inherit;
@@ -262,13 +270,19 @@
 </head>
 <body>
 {%- block body_all %}
-	<div id="root"></div>
-    <noscript>
-      <h1 lang="en">JavaScript Required</h1>
-      <p lang="en">This is a heavily interactive web application, and JavaScript is required. Simple HTML interfaces are possible, but that is not what this is.
-      <p lang="en">Learn more about Bluesky at <a href="https://bsky.social">bsky.social</a> and <a href="https://atproto.com">atproto.com</a>.
-			{% block noscript_extra %}{% endblock %}
-    </noscript>
+  <div id="root">
+    <div id="preload">
+      <!-- Bluesky SVG -->
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 320"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
+    </div>
+  </div>
+
+  <noscript>
+    <h1 lang="en">JavaScript Required</h1>
+    <p lang="en">This is a heavily interactive web application, and JavaScript is required. Simple HTML interfaces are possible, but that is not what this is.
+    <p lang="en">Learn more about Bluesky at <a href="https://bsky.social">bsky.social</a> and <a href="https://atproto.com">atproto.com</a>.
+    {% block noscript_extra %}{% endblock %}
+  </noscript>
 {% endblock -%}
 </body>
 </html>

docs/build.md

@@ -16,10 +16,6 @@
     - Add `eval "$(rbenv init - zsh)"` to your `~/.zshrc`
   - From inside the project directory:
     - `bundler install` (this will install Cocoapods)
-- Setup your environment [for e2e testing using detox](https://wix.github.io/Detox/docs/introduction/getting-started):
-  - `yarn global add detox-cli`
-  - `brew tap wix/brew`
-  - `brew install applesimutils`
 - After initial setup:
   - Copy `google-services.json.example` to `google-services.json` or provide your own `google-services.json`. (A real firebase project is NOT required)
   - `npx expo prebuild` -> you will also need to run this anytime `app.json` or native `package.json` deps change
@@ -120,10 +116,7 @@ To open the [Developer Menu](https://docs.expo.dev/debugging/tools/#developer-me
 
 ### Running E2E Tests
 
-- Make sure you've set your environment following the above
-- Make sure Metro and the dev server are running
-- Run `yarn e2e`
-- Find the artifacts in the `artifact` folder
+See [testing.md](./testing.md).
 
 ### Polyfills
 

docs/testing.md

@@ -3,13 +3,19 @@
 Make sure you've copied `.env.example` to `.env.test` and provided any required
 values.
 
-### Using Maestro E2E tests
+## Using Maestro
+
 1. Install Maestro by following [these instructions](https://maestro.mobile.dev/getting-started/installing-maestro). This will help us run the E2E tests.
-2. You can write Maestro tests in `__e2e__/maestro` directory by creating a new `.yaml` file or by modifying an existing one.
-3. You can also use [Maestro Studio](https://maestro.mobile.dev/getting-started/maestro-studio) which automatically generates commands by recording your actions on the app. Therefore, you can create realistic tests without having to manually write any code. Use  the `maestro studio` command to start recording your actions.
+2. You can write Maestro tests in `/.maestro/flows/` directory by creating a new `.yml` file or by modifying an existing one.
+3. You can also use [Maestro Studio](https://maestro.mobile.dev/getting-started/maestro-studio) which automatically generates commands by recording your actions on the app. Therefore, you can create realistic tests without having to manually write any code. Use the `maestro studio` command to start recording your actions.
 
+### Running Maestro tests
 
-### Using Flashlight for Performance Testing
+- In one tab, run `yarn e2e:mock-server`
+- In a second tab, run `yarn e2e:metro`
+- In a third tab, run `yarn e2e:run`
+
+## Using Flashlight for Performance Testing
 1. Make sure Maestro is installed (optional: only for automated testing) by following the instructions above
 2. Install Flashlight by following [these instructions](https://docs.flashlight.dev/)
 3. The simplest way to get started is by running `yarn perf:measure` which will run a live preview of the performance test results. You can [see a demo here](https://github.com/bamlab/flashlight/assets/4534323/4038a342-f145-4c3b-8cde-17949bf52612)

jest/test-pds.ts

@@ -114,8 +114,7 @@ export async function createServer(
     pdsUrl,
     mocker: new Mocker(testNet, pdsUrl, pic),
     async close() {
-      await testNet.pds.server.destroy()
-      await testNet.plc.server.destroy()
+      await testNet.close()
     },
   }
 }

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

@@ -1,5 +1,6 @@
-import {requireNativeViewManager} from 'expo-modules-core'
 import * as React from 'react'
+import {requireNativeViewManager} from 'expo-modules-core'
+
 import {ExpoScrollForwarderViewProps} from './ExpoScrollForwarder.types'
 
 const NativeView: React.ComponentType<ExpoScrollForwarderViewProps> =

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bsky.app",
-  "version": "1.81.0",
+  "version": "1.82.0",
   "private": true,
   "engines": {
     "node": ">=18"
@@ -31,11 +31,10 @@
     "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx src",
     "typecheck": "tsc --project ./tsconfig.check.json",
     "e2e:mock-server": "./jest/dev-infra/with-test-redis-and-db.sh ts-node --project tsconfig.e2e.json __e2e__/mock-server.ts",
-    "e2e:metro": "NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:ios",
-    "e2e:build": "NODE_ENV=test detox build -c ios.sim.debug",
-    "e2e:run": "NODE_ENV=test detox test --configuration ios.sim.debug --take-screenshots all",
+    "e2e:metro": "EXPO_PUBLIC_ENV=e2e NODE_ENV=test RN_SRC_EXT=e2e.ts,e2e.tsx expo run:ios",
+    "e2e:run": "maestro test __e2e__",
     "perf:test": "NODE_ENV=test maestro test",
-    "perf:test:run": "NODE_ENV=test maestro test __e2e__/maestro/scroll.yaml",
+    "perf:test:run": "NODE_ENV=test maestro test __e2e__/perf-test.yml",
     "perf:test:measure": "NODE_ENV=test flashlight test --bundleId xyz.blueskyweb.app --testCommand \"yarn perf:test\" --duration 150000 --resultsFilePath .perf/results.json",
     "perf:test:results": "NODE_ENV=test flashlight report .perf/results.json",
     "perf:measure": "NODE_ENV=test flashlight measure",
@@ -50,8 +49,7 @@
     "open-analyzer": "EXPO_PUBLIC_OPEN_ANALYZER=1 yarn build-web"
   },
   "dependencies": {
-    "@atproto-labs/api": "^0.12.8-clipclops.0",
-    "@atproto/api": "^0.12.5",
+    "@atproto/api": "^0.12.10",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
@@ -60,6 +58,8 @@
     "@expo/webpack-config": "^19.0.0",
     "@floating-ui/dom": "^1.6.3",
     "@floating-ui/react-dom": "^2.0.8",
+    "@formatjs/intl-locale": "^3.4.3",
+    "@formatjs/intl-pluralrules": "^5.2.10",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
     "@fortawesome/free-regular-svg-icons": "^6.1.1",
     "@fortawesome/free-solid-svg-icons": "^6.1.1",
@@ -98,6 +98,7 @@
     "@tiptap/react": "^2.0.0-beta.220",
     "@tiptap/suggestion": "^2.0.0-beta.220",
     "@types/invariant": "^2.2.37",
+    "@types/lodash.throttle": "^4.1.9",
     "@types/node": "^18.16.2",
     "@zxing/text-encoding": "^0.9.0",
     "array.prototype.findlast": "^1.2.3",
@@ -109,7 +110,7 @@
     "email-validator": "^2.0.4",
     "emoji-mart": "^5.5.2",
     "eventemitter3": "^5.0.1",
-    "expo": "^50.0.8",
+    "expo": "^50.0.17",
     "expo-application": "^5.8.3",
     "expo-build-properties": "^0.11.1",
     "expo-camera": "~14.0.4",
@@ -149,6 +150,7 @@
     "lodash.samplesize": "^4.2.0",
     "lodash.set": "^4.3.2",
     "lodash.shuffle": "^4.2.0",
+    "lodash.throttle": "^4.1.1",
     "mobx": "^6.6.1",
     "mobx-react-lite": "^3.4.0",
     "mobx-utils": "^6.0.6",
@@ -181,6 +183,7 @@
     "react-native-uitextview": "^1.1.6",
     "react-native-url-polyfill": "^1.3.0",
     "react-native-uuid": "^2.0.1",
+    "react-native-view-shot": "^3.8.0",
     "react-native-web": "~0.19.6",
     "react-native-web-webview": "^1.0.2",
     "react-native-webview": "13.6.4",
@@ -234,10 +237,8 @@
     "babel-plugin-module-resolver": "^5.0.0",
     "babel-plugin-react-native-web": "^0.18.12",
     "babel-preset-expo": "^10.0.0",
-    "detox": "^20.14.8",
     "eslint": "^8.19.0",
     "eslint-plugin-bsky-internal": "link:./eslint",
-    "eslint-plugin-detox": "^1.0.0",
     "eslint-plugin-ft-flow": "^2.0.3",
     "eslint-plugin-lingui": "^0.2.0",
     "eslint-plugin-react": "^7.33.2",
@@ -286,7 +287,7 @@
       "\\.[jt]sx?$": "babel-jest"
     },
     "transformIgnorePatterns": [
-      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|nanoid|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|normalize-url|react-native-svg|@sentry/.*|sentry-expo|bcp-47-match)"
+      "node_modules/(?!((jest-)?react-native|@react-native(-community)?)|@discord|expo(nent)?|@expo(nent)?/.*|@expo-google-fonts/.*|react-navigation|nanoid|@react-navigation/.*|@unimodules/.*|unimodules|sentry-expo|native-base|normalize-url|react-native-svg|@sentry/.*|sentry-expo|bcp-47-match)"
     ],
     "modulePathIgnorePatterns": [
       "__tests__/.*/__mocks__",

src/App.native.tsx

@@ -12,16 +12,15 @@ import {
 import * as SplashScreen from 'expo-splash-screen'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useQueryClient} from '@tanstack/react-query'
 
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
+import {MessagesProvider} from '#/state/messages'
 import {init as initPersistedState} 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'
 import {s} from 'lib/styles'
 import {ThemeProvider} from 'lib/ThemeContext'
@@ -56,7 +55,7 @@ SplashScreen.preventAutoHideAsync()
 function InnerApp() {
   const [isReady, setIsReady] = React.useState(false)
   const {currentAccount} = useSession()
-  const {initSession} = useSessionApi()
+  const {resumeSession} = useSessionApi()
   const theme = useColorModeTheme()
   const {_} = useLingui()
 
@@ -64,20 +63,20 @@ function InnerApp() {
 
   // init
   useEffect(() => {
-    async function resumeSession(account?: SessionAccount) {
+    async function onLaunch(account?: SessionAccount) {
       try {
         if (account) {
-          await initSession(account)
+          await resumeSession(account)
         }
       } catch (e) {
-        logger.error(`session: resumeSession failed`, {message: e})
+        logger.error(`session: resume failed`, {message: e})
       } finally {
         setIsReady(true)
       }
     }
     const account = readLastActiveAccount()
-    resumeSession(account)
-  }, [initSession])
+    onLaunch(account)
+  }, [resumeSession])
 
   useEffect(() => {
     return listenSessionDropped(() => {
@@ -95,8 +94,8 @@ function InnerApp() {
                 // Resets the entire tree below when it changes:
                 key={currentAccount?.did}>
                 <QueryProvider currentDid={currentAccount?.did}>
-                  <PushNotificationsListener>
-                    <StatsigProvider>
+                  <StatsigProvider>
+                    <MessagesProvider>
                       {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
                       <LabelDefsProvider>
                         <ModerationOptsProvider>
@@ -112,8 +111,8 @@ function InnerApp() {
                           </LoggedOutViewProvider>
                         </ModerationOptsProvider>
                       </LabelDefsProvider>
-                    </StatsigProvider>
-                  </PushNotificationsListener>
+                    </MessagesProvider>
+                  </StatsigProvider>
                 </QueryProvider>
               </React.Fragment>
             </RootSiblingParent>
@@ -124,12 +123,6 @@ function InnerApp() {
   )
 }
 
-function PushNotificationsListener({children}: {children: React.ReactNode}) {
-  const queryClient = useQueryClient()
-  useNotificationsListener(queryClient)
-  return children
-}
-
 function App() {
   const [isReady, setReady] = useState(false)
 

src/App.web.tsx

@@ -9,6 +9,7 @@ import {useLingui} from '@lingui/react'
 
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
 import {logger} from '#/logger'
+import {MessagesProvider} from '#/state/messages'
 import {init as initPersistedState} from '#/state/persisted'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation-opts'
@@ -44,17 +45,17 @@ import {listenSessionDropped} from './state/events'
 function InnerApp() {
   const [isReady, setIsReady] = React.useState(false)
   const {currentAccount} = useSession()
-  const {initSession} = useSessionApi()
+  const {resumeSession} = useSessionApi()
   const theme = useColorModeTheme()
   const {_} = useLingui()
   useIntentHandler()
 
   // init
   useEffect(() => {
-    async function resumeSession(account?: SessionAccount) {
+    async function onLaunch(account?: SessionAccount) {
       try {
         if (account) {
-          await initSession(account)
+          await resumeSession(account)
         }
       } catch (e) {
         logger.error(`session: resumeSession failed`, {message: e})
@@ -63,8 +64,8 @@ function InnerApp() {
       }
     }
     const account = readLastActiveAccount()
-    resumeSession(account)
-  }, [initSession])
+    onLaunch(account)
+  }, [resumeSession])
 
   useEffect(() => {
     return listenSessionDropped(() => {
@@ -84,20 +85,22 @@ function InnerApp() {
             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>
+                <MessagesProvider>
+                  {/* LabelDefsProvider MUST come before ModerationOptsProvider */}
+                  <LabelDefsProvider>
+                    <ModerationOptsProvider>
+                      <LoggedOutViewProvider>
+                        <SelectedFeedProvider>
+                          <UnreadNotifsProvider>
+                            <SafeAreaProvider>
+                              <Shell />
+                            </SafeAreaProvider>
+                          </UnreadNotifsProvider>
+                        </SelectedFeedProvider>
+                      </LoggedOutViewProvider>
+                    </ModerationOptsProvider>
+                  </LabelDefsProvider>
+                </MessagesProvider>
               </StatsigProvider>
             </QueryProvider>
           </React.Fragment>

src/alf/atoms.ts

@@ -840,4 +840,22 @@ export const atoms = {
   mr_auto: {
     marginRight: 'auto',
   },
+  /*
+   * Pointer events
+   */
+  pointer_events_none: {
+    pointerEvents: 'none',
+  },
+  pointer_events_auto: {
+    pointerEvents: 'auto',
+  },
+  /*
+   * Text decoration
+   */
+  underline: {
+    textDecorationLine: 'underline',
+  },
+  strike_through: {
+    textDecorationLine: 'line-through',
+  },
 } as const

src/components/Dialog/index.tsx

@@ -213,7 +213,8 @@ export function Inner({children, style}: DialogInnerProps) {
   return (
     <BottomSheetView
       style={[
-        a.p_xl,
+        a.py_xl,
+        a.px_xl,
         {
           paddingTop: 40,
           borderTopLeftRadius: 40,

src/components/LabelingServiceCard/index.tsx

@@ -1,19 +1,18 @@
 import React from 'react'
 import {View} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
 import {AppBskyLabelerDefs} from '@atproto/api'
+import {msg, Plural, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
 
 import {getLabelingServiceTitle} from '#/lib/moderation'
-import {Link as InternalLink, LinkProps} from '#/components/Link'
-import {Text} from '#/components/Typography'
-import {useLabelerInfoQuery} from '#/state/queries/labeler'
-import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
-import {RichText} from '#/components/RichText'
-import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '../icons/Chevron'
-import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {sanitizeHandle} from '#/lib/strings/handles'
-import {pluralize} from '#/lib/strings/helpers'
+import {useLabelerInfoQuery} from '#/state/queries/labeler'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
+import {Link as InternalLink, LinkProps} from '#/components/Link'
+import {RichText} from '#/components/RichText'
+import {Text} from '#/components/Typography'
+import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '../icons/Chevron'
 
 type LabelingServiceProps = {
   labeler: AppBskyLabelerDefs.LabelerViewDetailed
@@ -69,9 +68,7 @@ export function LikeCount({count}: {count: number}) {
         t.atoms.text_contrast_medium,
         {fontWeight: '500'},
       ]}>
-      <Trans>
-        Liked by {count} {pluralize(count, 'user')}
-      </Trans>
+      <Plural value={count} one="Liked by # user" other="Liked by # users" />
     </Text>
   )
 }

src/components/ProfileHoverCard/index.web.tsx

@@ -2,13 +2,12 @@ import React from 'react'
 import {View} from 'react-native'
 import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api'
 import {flip, offset, shift, size, useFloating} from '@floating-ui/react-dom'
-import {msg, Trans} from '@lingui/macro'
+import {msg, plural} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {makeProfileLink} from '#/lib/routes/links'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
-import {pluralize} from '#/lib/strings/helpers'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
 import {usePrefetchProfileQuery, useProfileQuery} from '#/state/queries/profile'
 import {useSession} from '#/state/session'
@@ -286,14 +285,14 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
   }
 
   return (
-    <div
+    <View
+      // @ts-ignore View is being used as div
       ref={refs.setReference}
       onPointerMove={onPointerMoveTarget}
       onPointerLeave={onPointerLeaveTarget}
+      // @ts-ignore web only prop
       onMouseUp={onPress}
-      style={{
-        display: props.inline ? 'inline' : 'block',
-      }}>
+      style={{flexShrink: 1}}>
       {props.children}
       {isVisible && (
         <Portal>
@@ -308,7 +307,7 @@ export function ProfileHoverCardInner(props: ProfileHoverCardProps) {
           </div>
         </Portal>
       )}
-    </div>
+    </View>
   )
 }
 
@@ -371,7 +370,14 @@ function Inner({
   const blockHide = profile.viewer?.blocking || profile.viewer?.blockedBy
   const following = formatCount(profile.followsCount || 0)
   const followers = formatCount(profile.followersCount || 0)
-  const pluralizedFollowers = pluralize(profile.followersCount || 0, 'follower')
+  const pluralizedFollowers = plural(profile.followersCount || 0, {
+    one: 'follower',
+    other: 'followers',
+  })
+  const pluralizedFollowings = plural(profile.followsCount || 0, {
+    one: 'following',
+    other: 'following',
+  })
   const profileURL = makeProfileLink({
     did: profile.did,
     handle: profile.handle,
@@ -398,7 +404,9 @@ function Inner({
             color={profileShadow.viewer?.following ? 'secondary' : 'primary'}
             variant="solid"
             label={
-              profileShadow.viewer?.following ? _('Following') : _('Follow')
+              profileShadow.viewer?.following
+                ? _(msg`Following`)
+                : _(msg`Follow`)
             }
             style={[a.rounded_full]}
             onPress={profileShadow.viewer?.following ? unfollow : follow}>
@@ -407,7 +415,9 @@ function Inner({
               icon={profileShadow.viewer?.following ? Check : Plus}
             />
             <ButtonText>
-              {profileShadow.viewer?.following ? _('Following') : _('Follow')}
+              {profileShadow.viewer?.following
+                ? _(msg`Following`)
+                : _(msg`Follow`)}
             </ButtonText>
           </Button>
         )}
@@ -434,22 +444,20 @@ function Inner({
               label={`${followers} ${pluralizedFollowers}`}
               style={[t.atoms.text]}
               onPress={hide}>
-              <Trans>
-                <Text style={[a.text_md, a.font_bold]}>{followers} </Text>
-                <Text style={[t.atoms.text_contrast_medium]}>
-                  {pluralizedFollowers}
-                </Text>
-              </Trans>
+              <Text style={[a.text_md, a.font_bold]}>{followers} </Text>
+              <Text style={[t.atoms.text_contrast_medium]}>
+                {pluralizedFollowers}
+              </Text>
             </InlineLinkText>
             <InlineLinkText
               to={makeProfileLink(profile, 'follows')}
               label={_(msg`${following} following`)}
               style={[t.atoms.text]}
               onPress={hide}>
-              <Trans>
-                <Text style={[a.text_md, a.font_bold]}>{following} </Text>
-                <Text style={[t.atoms.text_contrast_medium]}>following</Text>
-              </Trans>
+              <Text style={[a.text_md, a.font_bold]}>{following} </Text>
+              <Text style={[t.atoms.text_contrast_medium]}>
+                {pluralizedFollowings}
+              </Text>
             </InlineLinkText>
           </View>
 

src/components/Prompt.tsx

@@ -62,12 +62,16 @@ export function TitleText({children}: React.PropsWithChildren<{}>) {
   )
 }
 
-export function DescriptionText({children}: React.PropsWithChildren<{}>) {
+export function DescriptionText({
+  children,
+  selectable,
+}: React.PropsWithChildren<{selectable?: boolean}>) {
   const t = useTheme()
   const {descriptionId} = React.useContext(Context)
   return (
     <Text
       nativeID={descriptionId}
+      selectable={selectable}
       style={[a.text_md, a.leading_snug, t.atoms.text_contrast_high, a.pb_lg]}>
       {children}
     </Text>

src/components/ReportDialog/SelectReportOptionView.tsx

@@ -25,9 +25,12 @@ import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from
 import {Text} from '#/components/Typography'
 import {ReportDialogProps} from './types'
 
+type ParamsWithMessages = ReportDialogProps['params'] | {type: 'message'}
+
 export function SelectReportOptionView({
   ...props
-}: ReportDialogProps & {
+}: {
+  params: ParamsWithMessages
   labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
   onSelectReportOption: (reportOption: ReportOption) => void
   goBack: () => void
@@ -54,6 +57,9 @@ export function SelectReportOptionView({
     } else if (props.params.type === 'feedgen') {
       title = _(msg`Report this feed`)
       description = _(msg`Why should this feed be reviewed?`)
+    } else if (props.params.type === 'message') {
+      title = _(msg`Report this message`)
+      description = _(msg`Why should this message be reviewed?`)
     }
 
     return {

src/components/RichText.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import {TextStyle} from 'react-native'
 import {AppBskyRichtextFacet, RichText as RichTextAPI} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -26,6 +27,7 @@ export function RichText({
   enableTags = false,
   authorHandle,
   onLinkPress,
+  interactiveStyle,
 }: TextStyleProp &
   Pick<TextProps, 'selectable'> & {
     value: RichTextAPI | string
@@ -35,13 +37,22 @@ export function RichText({
     enableTags?: boolean
     authorHandle?: string
     onLinkPress?: LinkProps['onPress']
+    interactiveStyle?: TextStyle
   }) {
   const richText = React.useMemo(
     () =>
       value instanceof RichTextAPI ? value : new RichTextAPI({text: value}),
     [value],
   )
-  const styles = [a.leading_snug, flatten(style)]
+
+  const flattenedStyle = flatten(style)
+  const plainStyles = [a.leading_snug, flattenedStyle]
+  const interactiveStyles = [
+    a.leading_snug,
+    a.pointer_events_auto,
+    flatten(interactiveStyle),
+    flattenedStyle,
+  ]
 
   const {text, facets} = richText
 
@@ -67,7 +78,7 @@ export function RichText({
       <Text
         selectable={selectable}
         testID={testID}
-        style={styles}
+        style={plainStyles}
         numberOfLines={numberOfLines}
         // @ts-ignore web only -prf
         dataSet={WORD_WRAP}>
@@ -93,7 +104,7 @@ export function RichText({
           <InlineLinkText
             selectable={selectable}
             to={`/profile/${mention.did}`}
-            style={[...styles, {pointerEvents: 'auto'}]}
+            style={interactiveStyles}
             // @ts-ignore TODO
             dataSet={WORD_WRAP}
             onPress={onLinkPress}>
@@ -110,7 +121,7 @@ export function RichText({
             selectable={selectable}
             key={key}
             to={link.uri}
-            style={[...styles, {pointerEvents: 'auto'}]}
+            style={interactiveStyles}
             // @ts-ignore TODO
             dataSet={WORD_WRAP}
             shareOnLongPress
@@ -130,7 +141,7 @@ export function RichText({
           key={key}
           text={segment.text}
           tag={tag.tag}
-          style={styles}
+          style={interactiveStyles}
           selectable={selectable}
           authorHandle={authorHandle}
         />,
@@ -145,7 +156,7 @@ export function RichText({
     <Text
       selectable={selectable}
       testID={testID}
-      style={styles}
+      style={plainStyles}
       numberOfLines={numberOfLines}
       // @ts-ignore web only -prf
       dataSet={WORD_WRAP}>
@@ -219,19 +230,16 @@ function RichTextTag({
           onFocus={onFocus}
           onBlur={onBlur}
           style={[
-            style,
-            {
-              pointerEvents: 'auto',
-              color: t.palette.primary_500,
-            },
             web({
               cursor: 'pointer',
             }),
+            {color: t.palette.primary_500},
             (hovered || focused || pressed) && {
               ...web({outline: 0}),
               textDecorationLine: 'underline',
               textDecorationColor: t.palette.primary_500,
             },
+            style,
           ]}>
           {text}
         </Text>

src/components/dms/ActionsWrapper.tsx

@@ -1,4 +1,4 @@
-import React, {useCallback} from 'react'
+import React from 'react'
 import {Keyboard, Pressable, View} from 'react-native'
 import Animated, {
   cancelAnimation,
@@ -7,8 +7,9 @@ import Animated, {
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated'
-import {ChatBskyConvoDefs} from '@atproto-labs/api'
+import {ChatBskyConvoDefs} from '@atproto/api'
 
+import {HITSLOP_10} from 'lib/constants'
 import {useHaptics} from 'lib/haptics'
 import {atoms as a} from '#/alf'
 import {MessageMenu} from '#/components/dms/MessageMenu'
@@ -37,12 +38,12 @@ export function ActionsWrapper({
 
   // Reanimated's `runOnJS` doesn't like refs, so we can't use `runOnJS(menuControl.open)()`. Instead, we'll use this
   // function
-  const open = useCallback(() => {
+  const open = React.useCallback(() => {
     Keyboard.dismiss()
     menuControl.open()
   }, [menuControl])
 
-  const shrink = useCallback(() => {
+  const shrink = React.useCallback(() => {
     'worklet'
     cancelAnimation(scale)
     scale.value = withTiming(1, {duration: 200}, () => {
@@ -52,7 +53,7 @@ export function ActionsWrapper({
 
   const grow = React.useCallback(() => {
     'worklet'
-    scale.value = withTiming(1.05, {duration: 750}, finished => {
+    scale.value = withTiming(1.05, {duration: 450}, finished => {
       if (!finished) return
       animationDidComplete.value = true
       runOnJS(playHaptic)()
@@ -66,7 +67,7 @@ export function ActionsWrapper({
     <View
       style={[
         {
-          maxWidth: '65%',
+          maxWidth: '80%',
         },
         isFromSelf ? a.self_end : a.self_start,
       ]}>
@@ -74,7 +75,8 @@ export function ActionsWrapper({
         style={animatedStyle}
         unstable_pressDelay={200}
         onPressIn={grow}
-        onTouchEnd={shrink}>
+        onTouchEnd={shrink}
+        hitSlop={HITSLOP_10}>
         {children}
       </AnimatedPressable>
       <MessageMenu message={message} control={menuControl} hideTrigger={true} />

src/components/dms/ActionsWrapper.web.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {StyleSheet, View} from 'react-native'
-import {ChatBskyConvoDefs} from '@atproto-labs/api'
+import {ChatBskyConvoDefs} from '@atproto/api'
 
 import {atoms as a} from '#/alf'
 import {MessageMenu} from '#/components/dms/MessageMenu'
@@ -57,15 +57,12 @@ export function ActionsWrapper({
             message={message}
             control={menuControl}
             triggerOpacity={showActions || menuControl.isOpen ? 1 : 0}
-            onTriggerPress={onMouseEnter}
-            // @ts-expect-error web only
-            onMouseLeave={onMouseLeave}
           />
         </View>
       )}
       <View
         style={{
-          maxWidth: '65%',
+          maxWidth: '80%',
         }}>
         {children}
       </View>
@@ -75,9 +72,6 @@ export function ActionsWrapper({
             message={message}
             control={menuControl}
             triggerOpacity={showActions || menuControl.isOpen ? 1 : 0}
-            onTriggerPress={onMouseEnter}
-            // @ts-expect-error web only
-            onMouseLeave={onMouseLeave}
           />
         </View>
       )}

src/components/dms/ConvoMenu.tsx

@@ -1,17 +1,17 @@
 import React, {useCallback} from 'react'
-import {Keyboard, Pressable} from 'react-native'
-import {AppBskyActorDefs} from '@atproto/api'
-import {ChatBskyConvoDefs} from '@atproto-labs/api'
+import {Keyboard, Pressable, View} from 'react-native'
+import {AppBskyActorDefs, ChatBskyConvoDefs} from '@atproto/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'
+  useConvoQuery,
+  useMarkAsReadMutation,
+} from '#/state/queries/messages/conversation'
+import {useLeaveConvo} from '#/state/queries/messages/leave-conversation'
+import {useMuteConvo} 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'
@@ -24,52 +24,53 @@ import {PersonX_Stroke2_Corner0_Rounded as PersonX} from '#/components/icons/Per
 import {SpeakerVolumeFull_Stroke2_Corner0_Rounded as Unmute} from '#/components/icons/Speaker'
 import * as Menu from '#/components/Menu'
 import * as Prompt from '#/components/Prompt'
+import {Bubble_Stroke2_Corner2_Rounded as Bubble} from '../icons/Bubble'
 
 let ConvoMenu = ({
-  convo,
+  convo: initialConvo,
   profile,
-  onUpdateConvo,
   control,
-  hideTrigger,
   currentScreen,
+  showMarkAsRead,
+  hideTrigger,
+  triggerOpacity,
 }: {
   convo: ChatBskyConvoDefs.ConvoView
   profile: AppBskyActorDefs.ProfileViewBasic
   onUpdateConvo?: (convo: ChatBskyConvoDefs.ConvoView) => void
   control?: Menu.MenuControlProps
-  hideTrigger?: boolean
   currentScreen: 'list' | 'conversation'
+  showMarkAsRead?: boolean
+  hideTrigger?: boolean
+  triggerOpacity?: number
 }): React.ReactNode => {
   const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
   const t = useTheme()
   const leaveConvoControl = Prompt.usePromptControl()
+  const reportControl = Prompt.usePromptControl()
+  const {mutate: markAsRead} = useMarkAsReadMutation()
+
+  const {data: convo} = useConvoQuery(initialConvo)
 
   const onNavigateToProfile = useCallback(() => {
     navigation.navigate('Profile', {name: profile.did})
   }, [navigation, profile.did])
 
-  const {mutate: muteConvo} = useMuteConvo(convo.id, {
+  const {mutate: muteConvo} = useMuteConvo(convo?.id, {
     onSuccess: data => {
-      onUpdateConvo?.(data.convo)
-      Toast.show(_(msg`Chat muted`))
+      if (data.convo.muted) {
+        Toast.show(_(msg`Chat muted`))
+      } else {
+        Toast.show(_(msg`Chat unmuted`))
+      }
     },
     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, {
+  const {mutate: leaveConvo} = useLeaveConvo(convo?.id, {
     onSuccess: () => {
       if (currentScreen === 'conversation') {
         navigation.replace('Messages')
@@ -84,29 +85,45 @@ let ConvoMenu = ({
     <>
       <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>
+          <View style={{opacity: triggerOpacity}}>
+            <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_full,
+                    (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
+                    // make sure pfp is in the middle
+                    {marginLeft: -10},
+                  ]}>
+                  <DotsHorizontal size="md" style={t.atoms.text} />
+                </Pressable>
+              )}
+            </Menu.Trigger>
+          </View>
         )}
         <Menu.Outer>
           <Menu.Group>
+            {showMarkAsRead && (
+              <Menu.Item
+                label={_(msg`Mark as read`)}
+                onPress={() =>
+                  markAsRead({
+                    convoId: convo?.id,
+                  })
+                }>
+                <Menu.ItemText>
+                  <Trans>Mark as read</Trans>
+                </Menu.ItemText>
+                <Menu.ItemIcon icon={Bubble} />
+              </Menu.Item>
+            )}
             <Menu.Item
               label={_(msg`Go to user's profile`)}
               onPress={onNavigateToProfile}>
@@ -117,7 +134,7 @@ let ConvoMenu = ({
             </Menu.Item>
             <Menu.Item
               label={_(msg`Mute notifications`)}
-              onPress={() => (convo?.muted ? unmuteConvo() : muteConvo())}>
+              onPress={() => muteConvo({mute: !convo?.muted})}>
               <Menu.ItemText>
                 {convo?.muted ? (
                   <Trans>Unmute notifications</Trans>
@@ -129,7 +146,7 @@ let ConvoMenu = ({
             </Menu.Item>
           </Menu.Group>
           <Menu.Divider />
-          {/* TODO(samuel): implement these */}
+          {/* TODO(samuel): implement this */}
           <Menu.Group>
             <Menu.Item
               label={_(msg`Block account`)}
@@ -143,11 +160,10 @@ let ConvoMenu = ({
               />
             </Menu.Item>
             <Menu.Item
-              label={_(msg`Report account`)}
-              onPress={() => {}}
-              disabled>
+              label={_(msg`Report conversation`)}
+              onPress={reportControl.open}>
               <Menu.ItemText>
-                <Trans>Report account</Trans>
+                <Trans>Report conversation</Trans>
               </Menu.ItemText>
               <Menu.ItemIcon icon={Flag} />
             </Menu.Item>
@@ -176,9 +192,21 @@ let ConvoMenu = ({
         confirmButtonColor="negative"
         onConfirm={() => leaveConvo()}
       />
+
+      <Prompt.Basic
+        control={reportControl}
+        title={_(msg`Report conversation`)}
+        description={_(
+          msg`To report a conversation, please report one of its messages via the conversation screen. This lets our moderators understand the context of your issue.`,
+        )}
+        confirmButtonCta={_(msg`I understand`)}
+        onConfirm={noop}
+      />
     </>
   )
 }
 ConvoMenu = React.memo(ConvoMenu)
 
 export {ConvoMenu}
+
+function noop() {}

src/components/dms/MessageItem.tsx

@@ -1,6 +1,6 @@
 import React, {useCallback, useMemo, useRef} from 'react'
 import {LayoutAnimation, StyleProp, TextStyle, View} from 'react-native'
-import {ChatBskyConvoDefs} from '@atproto-labs/api'
+import {ChatBskyConvoDefs, RichText as RichTextAPI} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
@@ -9,8 +9,9 @@ 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'
+import {RichText} from '../RichText'
 
-export let MessageItem = ({
+let MessageItem = ({
   item,
   next,
   pending,
@@ -65,6 +66,10 @@ export let MessageItem = ({
   const pendingColor =
     t.name === 'light' ? t.palette.primary_200 : t.palette.primary_800
 
+  const rt = useMemo(() => {
+    return new RichTextAPI({text: item.text, facets: item.facets})
+  }, [item.text, item.facets])
+
   return (
     <View>
       <ActionsWrapper isFromSelf={isFromSelf} message={item}>
@@ -87,15 +92,17 @@ export let MessageItem = ({
               ? {borderBottomRightRadius: isLastInGroup ? 2 : 17}
               : {borderBottomLeftRadius: isLastInGroup ? 2 : 17},
           ]}>
-          <Text
+          <RichText
+            value={rt}
             style={[
               a.text_md,
               a.leading_snug,
               isFromSelf && {color: t.palette.white},
               pending && t.name !== 'light' && {color: t.palette.primary_300},
-            ]}>
-            {item.text}
-          </Text>
+            ]}
+            interactiveStyle={a.underline}
+            enableTags
+          />
         </View>
       </ActionsWrapper>
       <MessageItemMetadata
@@ -106,8 +113,8 @@ export let MessageItem = ({
     </View>
   )
 }
-
 MessageItem = React.memo(MessageItem)
+export {MessageItem}
 
 let MessageItemMetadata = ({
   message,
@@ -129,7 +136,6 @@ let MessageItemMetadata = ({
       const time = new Intl.DateTimeFormat(undefined, {
         hour: 'numeric',
         minute: 'numeric',
-        hour12: true,
       }).format(date)
 
       const diff = now.getTime() - date.getTime()
@@ -155,7 +161,6 @@ let MessageItemMetadata = ({
       return new Intl.DateTimeFormat(undefined, {
         hour: 'numeric',
         minute: 'numeric',
-        hour12: true,
         day: 'numeric',
         month: 'numeric',
         year: 'numeric',
@@ -187,6 +192,7 @@ let MessageItemMetadata = ({
 }
 
 MessageItemMetadata = React.memo(MessageItemMetadata)
+export {MessageItemMetadata}
 
 function localDateString(date: Date) {
   // can't use toISOString because it should be in local time

src/components/dms/MessageMenu.tsx

@@ -1,12 +1,14 @@
 import React from 'react'
 import {LayoutAnimation, Pressable, View} from 'react-native'
 import * as Clipboard from 'expo-clipboard'
-import {ChatBskyConvoDefs} from '@atproto-labs/api'
+import {ChatBskyConvoDefs, RichText} from '@atproto/api'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useChat} from 'state/messages'
-import {ConvoStatus} from 'state/messages/convo'
+import {richTextToString} from '#/lib/strings/rich-text-helpers'
+import {isWeb} from 'platform/detection'
+import {useConvo} from 'state/messages/convo'
+import {ConvoStatus} from 'state/messages/convo/types'
 import {useSession} from 'state/session'
 import * as Toast from '#/view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
@@ -17,54 +19,55 @@ 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'
+import {MessageReportDialog} from './MessageReportDialog'
 
 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 convo = useConvo()
   const deleteControl = usePromptControl()
   const retryDeleteControl = usePromptControl()
+  const reportControl = usePromptControl()
 
   const isFromSelf = message.sender?.did === currentAccount?.did
 
   const onCopyPostText = React.useCallback(() => {
-    // use when we have rich text
-    // const str = richTextToString(richText, true)
+    const str = richTextToString(
+      new RichText({
+        text: message.text,
+        facets: message.facets,
+      }),
+      true,
+    )
 
-    Clipboard.setStringAsync(message.text)
+    Clipboard.setStringAsync(str)
     Toast.show(_(msg`Copied to clipboard`))
-  }, [_, message.text])
+  }, [_, message.text, message.facets])
 
   const onDelete = React.useCallback(() => {
-    if (chat.status !== ConvoStatus.Ready) return
+    if (convo.status !== ConvoStatus.Ready) return
 
     LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
-    chat
+    convo
       .deleteMessage(message.id)
       .then(() => Toast.show(_(msg`Message deleted`)))
       .catch(() => retryDeleteControl.open())
-  }, [_, chat, message.id, retryDeleteControl])
-
-  const onReport = React.useCallback(() => {
-    // TODO report the message
-  }, [])
+  }, [_, convo, message.id, retryDeleteControl])
 
   return (
     <>
       <Menu.Root control={control}>
-        {!hideTrigger && (
+        {isWeb && (
           <View style={{opacity: triggerOpacity}}>
             <Menu.Trigger label={_(msg`Chat settings`)}>
               {({props, state}) => (
@@ -75,7 +78,7 @@ export let MessageMenu = ({
                     a.rounded_full,
                     (state.hovered || state.pressed) && t.atoms.bg_contrast_25,
                   ]}>
-                  <DotsHorizontal size="sm" style={t.atoms.text} />
+                  <DotsHorizontal size="md" style={t.atoms.text} />
                 </Pressable>
               )}
             </Menu.Trigger>
@@ -105,7 +108,7 @@ export let MessageMenu = ({
               <Menu.Item
                 testID="messageDropdownReportBtn"
                 label={_(msg`Report message`)}
-                onPress={onReport}>
+                onPress={reportControl.open}>
                 <Menu.ItemText>{_(msg`Report`)}</Menu.ItemText>
                 <Menu.ItemIcon icon={Warning} position="right" />
               </Menu.Item>
@@ -114,6 +117,8 @@ export let MessageMenu = ({
         </Menu.Outer>
       </Menu.Root>
 
+      <MessageReportDialog message={message} control={reportControl} />
+
       <Prompt.Basic
         control={deleteControl}
         title={_(msg`Delete message`)}

src/components/dms/MessageReportDialog.tsx

@@ -0,0 +1,254 @@
+import React, {memo, useMemo, useState} from 'react'
+import {View} from 'react-native'
+import {
+  ChatBskyConvoDefs,
+  ComAtprotoModerationCreateReport,
+  RichText as RichTextAPI,
+} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useMutation} from '@tanstack/react-query'
+
+import {ReportOption} from '#/lib/moderation/useReportOptions'
+import {isAndroid} from '#/platform/detection'
+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, useBreakpoints, useTheme} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import {Button, ButtonIcon, ButtonText} from '../Button'
+import {Divider} from '../Divider'
+import {ChevronLeft_Stroke2_Corner0_Rounded as Chevron} from '../icons/Chevron'
+import {Loader} from '../Loader'
+import {SelectReportOptionView} from '../ReportDialog/SelectReportOptionView'
+import {RichText} from '../RichText'
+import {Text} from '../Typography'
+import {MessageItemMetadata} from './MessageItem'
+
+let MessageReportDialog = ({
+  control,
+  message,
+}: {
+  control: Dialog.DialogControlProps
+  message: ChatBskyConvoDefs.MessageView
+}): React.ReactNode => {
+  const {_} = useLingui()
+  return (
+    <Dialog.Outer
+      control={control}
+      nativeOptions={isAndroid ? {sheet: {snapPoints: ['100%']}} : {}}>
+      <Dialog.Handle />
+      <Dialog.ScrollableInner label={_(msg`Report this message`)}>
+        <DialogInner message={message} />
+        <Dialog.Close />
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}
+MessageReportDialog = memo(MessageReportDialog)
+export {MessageReportDialog}
+
+function DialogInner({message}: {message: ChatBskyConvoDefs.MessageView}) {
+  const [reportOption, setReportOption] = useState<ReportOption | null>(null)
+
+  return reportOption ? (
+    <SubmitStep
+      message={message}
+      reportOption={reportOption}
+      goBack={() => setReportOption(null)}
+    />
+  ) : (
+    <ReasonStep setReportOption={setReportOption} />
+  )
+}
+
+function ReasonStep({
+  setReportOption,
+}: {
+  setReportOption: (reportOption: ReportOption) => void
+}) {
+  const control = Dialog.useDialogContext()
+
+  return (
+    <SelectReportOptionView
+      labelers={[]}
+      goBack={control.close}
+      params={{type: 'message'}}
+      onSelectReportOption={setReportOption}
+    />
+  )
+}
+
+function SubmitStep({
+  message,
+  reportOption,
+  goBack,
+}: {
+  message: ChatBskyConvoDefs.MessageView
+  reportOption: ReportOption
+  goBack: () => void
+}) {
+  const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
+  const t = useTheme()
+  const [details, setDetails] = useState('')
+  const control = Dialog.useDialogContext()
+  const {getAgent} = useAgent()
+
+  const {
+    mutate: submit,
+    error,
+    isPending: submitting,
+  } = useMutation({
+    mutationFn: async () => {
+      const report = {
+        reasonType: reportOption.reason,
+        subject: {
+          $type: 'chat.bsky.convo.defs#messageRef',
+          messageId: message.id,
+          did: message.sender!.did,
+        } satisfies ChatBskyConvoDefs.MessageRef,
+        reason: details,
+      } satisfies ComAtprotoModerationCreateReport.InputSchema
+
+      await getAgent().createModerationReport(report)
+    },
+    onSuccess: () => {
+      control.close(() => {
+        Toast.show(_(msg`Thank you. Your report has been sent.`))
+      })
+    },
+  })
+
+  return (
+    <View style={a.gap_lg}>
+      <Button
+        size="small"
+        variant="solid"
+        color="secondary"
+        shape="round"
+        label={_(msg`Go back to previous step`)}
+        onPress={goBack}>
+        <ButtonIcon icon={Chevron} />
+      </Button>
+
+      <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
+        <Text style={[a.text_2xl, a.font_bold]}>
+          <Trans>Report this message</Trans>
+        </Text>
+        <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
+          <Trans>
+            Your report will be sent to the Bluesky Moderation Service
+          </Trans>
+        </Text>
+      </View>
+
+      <PreviewMessage message={message} />
+
+      <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
+        <Trans>Reason: {reportOption.title}</Trans>
+      </Text>
+
+      <Divider />
+
+      <View style={[a.gap_md]}>
+        <Text style={[t.atoms.text_contrast_medium]}>
+          <Trans>Optionally provide additional information below:</Trans>
+        </Text>
+
+        <View style={[a.relative, a.w_full]}>
+          <Dialog.Input
+            multiline
+            value={details}
+            onChangeText={setDetails}
+            label="Text field"
+            style={{paddingRight: 60}}
+            numberOfLines={6}
+          />
+
+          <View
+            style={[
+              a.absolute,
+              a.flex_row,
+              a.align_center,
+              a.pr_md,
+              a.pb_sm,
+              {
+                bottom: 0,
+                right: 0,
+              },
+            ]}>
+            <CharProgress count={details?.length || 0} />
+          </View>
+        </View>
+      </View>
+
+      <View style={[a.flex_row, a.align_center, a.justify_end, a.gap_lg]}>
+        {error && (
+          <Text
+            style={[
+              a.flex_1,
+              a.italic,
+              a.leading_snug,
+              t.atoms.text_contrast_medium,
+            ]}>
+            <Trans>
+              There was an issue sending your report. Please check your internet
+              connection.
+            </Trans>
+          </Text>
+        )}
+
+        <Button
+          testID="sendReportBtn"
+          size="large"
+          variant="solid"
+          color="negative"
+          label={_(msg`Send report`)}
+          onPress={() => submit()}>
+          <ButtonText>
+            <Trans>Send report</Trans>
+          </ButtonText>
+          {submitting && <ButtonIcon icon={Loader} />}
+        </Button>
+      </View>
+    </View>
+  )
+}
+
+function PreviewMessage({message}: {message: ChatBskyConvoDefs.MessageView}) {
+  const t = useTheme()
+  const rt = useMemo(() => {
+    return new RichTextAPI({text: message.text, facets: message.facets})
+  }, [message.text, message.facets])
+
+  return (
+    <View style={a.align_start}>
+      <View
+        style={[
+          a.py_sm,
+          a.my_2xs,
+          a.rounded_md,
+          {
+            paddingLeft: 14,
+            paddingRight: 14,
+            backgroundColor: t.palette.contrast_50,
+            borderRadius: 17,
+          },
+          {borderBottomLeftRadius: 2},
+        ]}>
+        <RichText
+          value={rt}
+          style={[a.text_md, a.leading_snug]}
+          interactiveStyle={a.underline}
+          enableTags
+        />
+      </View>
+      <MessageItemMetadata
+        message={message}
+        isLastInGroup
+        style={[a.text_left, a.mb_0]}
+      />
+    </View>
+  )
+}

src/components/hooks/useHeaderOffset.ts

@@ -0,0 +1,16 @@
+import {useWindowDimensions} from 'react-native'
+
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+
+export function useHeaderOffset() {
+  const {isDesktop, isTablet} = useWebMediaQueries()
+  const {fontScale} = useWindowDimensions()
+  if (isDesktop || isTablet) {
+    return 0
+  }
+  const navBarHeight = 42
+  const tabBarPad = 10 + 10 + 3 // padding + border
+  const normalLineHeight = 1.2
+  const tabBarText = 16 * normalLineHeight * fontScale
+  return navBarHeight + tabBarPad + tabBarText
+}

src/components/icons/Bell.tsx

@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Bell_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M4.216 8.815a7.853 7.853 0 0 1 15.568 0l1.207 9.053A1 1 0 0 1 20 19h-3.354c-.904 1.748-2.607 3-4.646 3-2.039 0-3.742-1.252-4.646-3H4a1 1 0 0 1-.991-1.132l1.207-9.053ZM9.778 19c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1H9.778ZM12 4a5.853 5.853 0 0 0-5.802 5.08L5.142 17h13.716l-1.056-7.92A5.853 5.853 0 0 0 12 4Z',
+})
+
+export const Bell_Filled_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 2a7.853 7.853 0 0 0-7.784 6.815l-1.207 9.053A1 1 0 0 0 4 19h3.354c.904 1.748 2.607 3 4.646 3 2.039 0 3.742-1.252 4.646-3H20a1 1 0 0 0 .991-1.132l-1.207-9.053A7.853 7.853 0 0 0 12 2Zm2.222 17H9.778c.61.637 1.399 1 2.222 1s1.613-.363 2.222-1Z',
+})

src/components/icons/Bell2.tsx

@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Bell2_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M4.702 8.943a7.307 7.307 0 0 1 14.596 0l.19 3.798 1.321 2.641A1.809 1.809 0 0 1 19.191 18H16.9a5.002 5.002 0 0 1-9.8 0H4.809a1.809 1.809 0 0 1-1.618-2.618l1.32-2.641.19-3.798ZM9.17 18a3.001 3.001 0 0 0 5.658 0H9.171ZM12 4a5.307 5.307 0 0 0-5.3 5.042l-.19 3.798a2 2 0 0 1-.21.795L5.119 16h13.764l-1.183-2.365a2 2 0 0 1-.208-.795l-.19-3.798A5.308 5.308 0 0 0 12 4Z',
+})
+
+export const Bell2_Filled_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 2a7.307 7.307 0 0 0-7.298 6.943l-.19 3.798-1.321 2.641A1.809 1.809 0 0 0 4.809 18H7.1a5.002 5.002 0 0 0 9.8 0h2.291a1.809 1.809 0 0 0 1.618-2.618l-1.32-2.641-.19-3.798A7.308 7.308 0 0 0 12 2Zm0 18a3.001 3.001 0 0 1-2.83-2h5.66A3.001 3.001 0 0 1 12 20Z',
+})

src/components/icons/Bubble.tsx

@@ -3,3 +3,11 @@ import {createSinglePathSVG} from './TEMPLATE'
 export const BubbleQuestion_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M5.002 17.036V5h14v12.036h-3.986a1 1 0 0 0-.639.23l-2.375 1.968-2.344-1.965a1 1 0 0 0-.643-.233H5.002ZM20.002 3h-16a1 1 0 0 0-1 1v14.036a1 1 0 0 0 1 1h4.65l2.704 2.266a1 1 0 0 0 1.28.004l2.74-2.27h4.626a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1Zm-7.878 3.663c-1.39 0-2.5 1.135-2.5 2.515a1 1 0 0 0 2 0c0-.294.232-.515.5-.515a.507.507 0 0 1 .489.6.174.174 0 0 1-.027.048 1.1 1.1 0 0 1-.267.226c-.508.345-1.128.923-1.286 1.978a1 1 0 1 0 1.978.297.762.762 0 0 1 .14-.359c.063-.086.155-.169.293-.262.436-.297 1.18-.885 1.18-2.013 0-1.38-1.11-2.515-2.5-2.515ZM12 15.75a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z',
 })
+
+export const Bubble_Stroke2_Corner2_Rounded = createSinglePathSVG({
+  path: 'M2.002 6a3 3 0 0 1 3-3h14a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H12.28l-4.762 2.858A1 1 0 0 1 6.002 21v-2h-1a3 3 0 0 1-3-3V6Zm3-1a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2a1 1 0 0 1 1 1v1.234l3.486-2.092a1 1 0 0 1 .514-.142h7a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1h-14Z',
+})
+
+export const Bubble_Stroke2_Corner3_Rounded = createSinglePathSVG({
+  path: 'M2.002 7a4 4 0 0 1 4-4h12a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H12.28l-4.762 2.858A1 1 0 0 1 6.002 21v-2a4 4 0 0 1-4-4V7Zm4-2a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h1a1 1 0 0 1 1 1v1.234l3.486-2.092a1 1 0 0 1 .514-.142h6a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-12Z',
+})

src/components/icons/BulletList.tsx

@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const BulletList_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M6 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM3 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm9 0a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Zm-6 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm-3 1a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm9 0a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z',
+})
+
+export const BulletList_Filled_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3 7a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm0 10a3 3 0 1 1 6 0 3 3 0 0 1-6 0Zm10-1a1 1 0 1 0 0 2h7a1 1 0 1 0 0-2h-7Zm-1-9a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2h-7a1 1 0 0 1-1-1Z',
+})

src/components/icons/EditBig.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const EditBig_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M17.293 2.293a1 1 0 0 1 1.414 0l3 3a1 1 0 0 1 0 1.414l-9 9A1 1 0 0 1 12 16H9a1 1 0 0 1-1-1v-3a1 1 0 0 1 .293-.707l9-9ZM10 12.414V14h1.586l8-8L18 4.414l-8 8ZM3 4a1 1 0 0 1 1-1h7a1 1 0 1 1 0 2H5v14h14v-6a1 1 0 1 1 2 0v7a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Z',
+})

src/components/icons/Emoji.tsx

@@ -4,6 +4,10 @@ export const EmojiSad_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M6.343 6.343a8 8 0 1 1 11.314 11.314A8 8 0 0 1 6.343 6.343ZM19.071 4.93c-3.905-3.905-10.237-3.905-14.142 0-3.905 3.905-3.905 10.237 0 14.142 3.905 3.905 10.237 3.905 14.142 0 3.905-3.905 3.905-10.237 0-14.142Zm-3.537 9.535a5 5 0 0 0-7.07 0 1 1 0 1 0 1.413 1.415 3 3 0 0 1 4.243 0 1 1 0 0 0 1.414-1.415ZM16 9.5c0 .828-.56 1.5-1.25 1.5s-1.25-.672-1.25-1.5.56-1.5 1.25-1.5S16 8.672 16 9.5ZM9.25 11c.69 0 1.25-.672 1.25-1.5S9.94 8 9.25 8 8 8.672 8 9.5 8.56 11 9.25 11Z',
 })
 
+export const EmojiSmile_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M17.657 6.343A8 8 0 1 0 6.343 17.657 8 8 0 0 0 17.657 6.343ZM4.929 4.93c3.905-3.905 10.237-3.905 14.142 0 3.905 3.905 3.905 10.237 0 14.142-3.905 3.905-10.237 3.905-14.142 0-3.905-3.905-3.905-10.237 0-14.142Zm3.536 9.192a1 1 0 0 1 1.414 0 3 3 0 0 0 4.243 0 1 1 0 0 1 1.414 1.415 5 5 0 0 1-7.071 0 1 1 0 0 1 0-1.415ZM10.5 9.5c0 .828-.56 1.5-1.25 1.5S8 10.328 8 9.5 8.56 8 9.25 8s1.25.672 1.25 1.5ZM16 9.5c0 .828-.56 1.5-1.25 1.5s-1.25-.672-1.25-1.5.56-1.5 1.25-1.5S16 8.672 16 9.5Z',
+})
+
 export const EmojiArc_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm8-5a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1Zm4 0a1 1 0 0 1 1 1v3a1 1 0 1 1-2 0V8a1 1 0 0 1 1-1Zm-5.894 7.803a1 1 0 0 1 1.341-.447c1.719.859 3.387.859 5.106 0a1 1 0 1 1 .894 1.788c-2.281 1.141-4.613 1.141-6.894 0a1 1 0 0 1-.447-1.341Z',
 })

src/components/icons/Hashtag.tsx

@@ -3,3 +3,7 @@ import {createSinglePathSVG} from './TEMPLATE'
 export const Hashtag_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M9.124 3.008a1 1 0 0 1 .868 1.116L9.632 7h5.985l.39-3.124a1 1 0 0 1 1.985.248L17.632 7H20a1 1 0 1 1 0 2h-2.617l-.75 6H20a1 1 0 1 1 0 2h-3.617l-.39 3.124a1 1 0 1 1-1.985-.248l.36-2.876H8.382l-.39 3.124a1 1 0 1 1-1.985-.248L6.368 17H4a1 1 0 1 1 0-2h2.617l.75-6H4a1 1 0 1 1 0-2h3.617l.39-3.124a1 1 0 0 1 1.117-.868ZM9.383 9l-.75 6h5.984l.75-6H9.383Z',
 })
+
+export const Hashtag_Filled_Corner0_Rounded = createSinglePathSVG({
+  path: 'M9.186 2.512a1.5 1.5 0 0 0-1.674 1.302L7.176 6.5H4a1.5 1.5 0 1 0 0 3h2.8l-.624 5H4a1.5 1.5 0 0 0 0 3h1.8l-.288 2.314a1.5 1.5 0 1 0 2.976.372l.336-2.686h4.977l-.29 2.314a1.5 1.5 0 1 0 2.977.372l.336-2.686H20a1.5 1.5 0 0 0 0-3h-2.8l.624-5H20a1.5 1.5 0 0 0 0-3h-1.8l.288-2.314a1.5 1.5 0 1 0-2.976-.372L15.176 6.5h-4.977l.29-2.314a1.5 1.5 0 0 0-1.303-1.674ZM9.2 14.5l.625-5h4.977l-.625 5H9.199Z',
+})

src/components/icons/Home.tsx

@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Home_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M11.46 1.362a2 2 0 0 1 1.08 0c.249.07.448.188.611.301.146.102.306.232.467.363l6.421 5.218.046.036c.169.137.38.308.54.53a2 2 0 0 1 .304.64c.073.264.072.536.071.753v9.229c0 .252 0 .498-.017.706a2.023 2.023 0 0 1-.201.77 2 2 0 0 1-.874.874 2.02 2.02 0 0 1-.77.201c-.208.017-.454.017-.706.017H5.568c-.252 0-.498 0-.706-.017a2.02 2.02 0 0 1-.77-.201 2 2 0 0 1-.874-.874 2.022 2.022 0 0 1-.201-.77C3 18.93 3 18.684 3 18.432V9.203c0-.217-.002-.49.07-.754a2 2 0 0 1 .304-.638c.16-.223.372-.394.541-.53l.045-.037 6.422-5.218c.161-.13.321-.26.467-.362.163-.114.362-.232.612-.302Zm.532 1.943c-.077.054-.18.136-.37.29l-6.4 5.2a6.315 6.315 0 0 0-.215.18c-.002 0-.003.002-.004.003v.004C5 9.036 5 9.112 5 9.262V18.4a8.18 8.18 0 0 0 .011.588l.014.002c.116.01.278.01.575.01H8v-5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v5h2.4a8.207 8.207 0 0 0 .589-.012v-.013c.01-.116.011-.279.011-.575V9.262c0-.15 0-.226-.003-.28v-.004l-.003-.003a6.448 6.448 0 0 0-.216-.18l-6.4-5.2a7.373 7.373 0 0 0-.37-.29L12 3.299l-.008.006ZM14 19v-5h-4v5h4Z',
+})
+
+export const Home_Filled_Corner0_Rounded = createSinglePathSVG({
+  path: 'M13.261 1.736a2 2 0 0 0-2.522 0l-7 5.687A2 2 0 0 0 3 8.976V19a2 2 0 0 0 2 2h3v-8a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v8h3a2 2 0 0 0 2-2V8.976a2 2 0 0 0-.739-1.553l-7-5.687ZM14 21h-4v-7h4v7Z',
+})

src/components/icons/HomeOpen.tsx

@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const HomeOpen_Stoke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M11.37 1.724a1 1 0 0 1 1.26 0l8 6.5A1 1 0 0 1 21 9v11a1 1 0 0 1-1 1h-6a1 1 0 0 1-1-1v-5h-2v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 .37-.776l8-6.5ZM5 9.476V19h4v-5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v5h4V9.476l-7-5.688-7 5.688Z',
+})
+
+export const HomeOpen_Filled_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12.63 1.724a1 1 0 0 0-1.26 0l-8 6.5A1 1 0 0 0 3 9v11a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-6h4v6a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V9a1 1 0 0 0-.37-.776l-8-6.5Z',
+})

src/components/icons/MagnifyingGlass.tsx

@@ -0,0 +1,6 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const MagnifyingGlass_Filled_Stroke2_Corner0_Rounded =
+  createSinglePathSVG({
+    path: 'M5 11a6 6 0 1 1 12 0 6 6 0 0 1-12 0Zm6-8a8 8 0 1 0 4.906 14.32l3.387 3.387a1 1 0 0 0 1.414-1.414l-3.387-3.387A8 8 0 0 0 11 3Zm4 8a4 4 0 1 1-8 0 4 4 0 0 1 8 0Z',
+  })

src/components/icons/Message.tsx

@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Message_Stroke2_Corner0_Rounded_Filled = createSinglePathSVG({
+  path: 'M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10a9.968 9.968 0 0 1-4.136-.893l-4.68.876a1 1 0 0 1-1.164-1.184l.931-4.537A9.965 9.965 0 0 1 2 12Zm4.25 0a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Zm4.5 0a1.25 1.25 0 1 0 2.5 0 1.25 1.25 0 0 0-2.5 0Zm5.75 1.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z',
+})
+
+export const Message_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M4 12a8 8 0 1 1 4.445 7.169 1 1 0 0 0-.629-.088l-3.537.662.7-3.415a1 1 0 0 0-.09-.66A7.961 7.961 0 0 1 4 12Zm8-10C6.477 2 2 6.477 2 12c0 1.523.341 2.968.951 4.262l-.93 4.537a1 1 0 0 0 1.163 1.184l4.68-.876A9.968 9.968 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2ZM7.5 13.25a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm4.5 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Zm4.5 0a1.25 1.25 0 1 1 0-2.5 1.25 1.25 0 0 1 0 2.5Z',
+})

src/components/icons/SettingsGear2.tsx

@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const SettingsGear2_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M11.1 2a1 1 0 0 0-.832.445L8.851 4.57 6.6 4.05a1 1 0 0 0-.932.268l-1.35 1.35a1 1 0 0 0-.267.932l.52 2.251-2.126 1.417A1 1 0 0 0 2 11.1v1.8a1 1 0 0 0 .445.832l2.125 1.417-.52 2.251a1 1 0 0 0 .268.932l1.35 1.35a1 1 0 0 0 .932.267l2.251-.52 1.417 2.126A1 1 0 0 0 11.1 22h1.8a1 1 0 0 0 .832-.445l1.417-2.125 2.251.52a1 1 0 0 0 .932-.268l1.35-1.35a1 1 0 0 0 .267-.932l-.52-2.251 2.126-1.417A1 1 0 0 0 22 12.9v-1.8a1 1 0 0 0-.445-.832L19.43 8.851l.52-2.251a1 1 0 0 0-.268-.932l-1.35-1.35a1 1 0 0 0-.932-.267l-2.251.52-1.417-2.126A1 1 0 0 0 12.9 2h-1.8Zm-.968 4.255L11.635 4h.73l1.503 2.255a1 1 0 0 0 1.057.42l2.385-.551.566.566-.55 2.385a1 1 0 0 0 .42 1.057L20 11.635v.73l-2.255 1.503a1 1 0 0 0-.42 1.057l.551 2.385-.566.566-2.385-.55a1 1 0 0 0-1.057.42L12.365 20h-.73l-1.503-2.255a1 1 0 0 0-1.057-.42l-2.385.551-.566-.566.55-2.385a1 1 0 0 0-.42-1.057L4 12.365v-.73l2.255-1.503a1 1 0 0 0 .42-1.057L6.123 6.69l.566-.566 2.385.55a1 1 0 0 0 1.057-.42ZM8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z',
+})
+
+export const SettingsGear2_Filled_Corner0_Rounded = createSinglePathSVG({
+  path: 'M9.996 2.869A1.951 1.951 0 0 1 11.62 2h.76c.653 0 1.262.326 1.624.869l1.141 1.712 1.749-.404a1.951 1.951 0 0 1 1.819.522l.588.589c.476.475.673 1.162.522 1.818l-.404 1.749 1.712 1.141c.543.362.869.971.869 1.624v.76c0 .653-.326 1.262-.869 1.624l-1.712 1.141.404 1.749a1.951 1.951 0 0 1-.522 1.819l-.588.588a1.951 1.951 0 0 1-1.819.522l-1.749-.404-1.141 1.712A1.951 1.951 0 0 1 12.38 22h-.76a1.951 1.951 0 0 1-1.624-.869L8.855 19.42l-1.749.404a1.951 1.951 0 0 1-1.818-.522l-.59-.588a1.951 1.951 0 0 1-.52-1.819l.403-1.749-1.712-1.141A1.951 1.951 0 0 1 2 12.38v-.76c0-.653.326-1.262.869-1.624L4.58 8.855l-.404-1.749A1.951 1.951 0 0 1 4.7 5.288l.589-.59a1.951 1.951 0 0 1 1.818-.52l1.749.403 1.141-1.712ZM8.5 12a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Z',
+})

src/components/icons/UserCircle.tsx

@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const UserCircle_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 4a8 8 0 0 0-5.935 13.365C7.56 15.895 9.612 15 12 15c2.388 0 4.44.894 5.935 2.365A8 8 0 0 0 12 4Zm4.412 14.675C15.298 17.636 13.792 17 12 17c-1.791 0-3.298.636-4.412 1.675A7.96 7.96 0 0 0 12 20a7.96 7.96 0 0 0 4.412-1.325ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10a9.98 9.98 0 0 1-3.462 7.567A9.965 9.965 0 0 1 12 22a9.965 9.965 0 0 1-6.538-2.433A9.98 9.98 0 0 1 2 12Zm10-4a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z',
+})
+
+export const UserCircle_Filled_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10Zm3-12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm-3 10a7.976 7.976 0 0 1-5.714-2.4C7.618 16.004 9.605 15 12 15c2.396 0 4.383 1.005 5.714 2.6A7.976 7.976 0 0 1 12 20Z',
+})

src/components/moderation/LabelsOnMe.tsx

@@ -1,12 +1,12 @@
 import React from 'react'
 import {StyleProp, View, ViewStyle} from 'react-native'
 import {AppBskyFeedDefs, ComAtprotoLabelDefs} from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
+import {msg, Plural} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useSession} from '#/state/session'
 
+import {useSession} from '#/state/session'
 import {atoms as a} from '#/alf'
-import {Button, ButtonText, ButtonIcon, ButtonSize} from '#/components/Button'
+import {Button, ButtonIcon, ButtonSize, ButtonText} from '#/components/Button'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {
   LabelsOnMeDialog,
@@ -32,14 +32,11 @@ export function LabelsOnMe({
   if (!labels || !currentAccount) {
     return null
   }
-  labels = labels.filter(
-    l => !l.val.startsWith('!') && l.src !== currentAccount.did,
-  )
+  labels = labels.filter(l => !l.val.startsWith('!'))
   if (!labels.length) {
     return null
   }
 
-  const labelTarget = isAccount ? _(msg`account`) : _(msg`content`)
   return (
     <View style={[a.flex_row, style]}>
       <LabelsOnMeDialog control={control} subject={details} labels={labels} />
@@ -54,11 +51,18 @@ export function LabelsOnMe({
         }}>
         <ButtonIcon position="left" icon={CircleInfo} />
         <ButtonText style={[a.leading_snug]}>
-          {labels.length}{' '}
-          {labels.length === 1 ? (
-            <Trans>label has been placed on this {labelTarget}</Trans>
+          {isAccount ? (
+            <Plural
+              value={labels.length}
+              one="# label has been placed on this account"
+              other="# labels has been placed on this account"
+            />
           ) : (
-            <Trans>labels have been placed on this {labelTarget}</Trans>
+            <Plural
+              value={labels.length}
+              one="# label has been placed on this content"
+              other="# labels has been placed on this content"
+            />
           )}
         </ButtonText>
       </Button>

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 {useAgent} from '#/state/session'
+import {useAgent, useSession} 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'
@@ -33,13 +33,28 @@ export interface LabelsOnMeDialogProps {
   labels: ComAtprotoLabelDefs.Label[]
 }
 
-export function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
+export function LabelsOnMeDialog(props: LabelsOnMeDialogProps) {
+  return (
+    <Dialog.Outer control={props.control}>
+      <Dialog.Handle />
+
+      <LabelsOnMeDialogInner {...props} />
+    </Dialog.Outer>
+  )
+}
+
+function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
   const {_} = useLingui()
+  const {currentAccount} = useSession()
   const [appealingLabel, setAppealingLabel] = React.useState<
     ComAtprotoLabelDefs.Label | undefined
   >(undefined)
   const {subject, labels} = props
   const isAccount = 'did' in subject
+  const containsSelfLabel = React.useMemo(
+    () => labels.some(l => l.src === currentAccount?.did),
+    [currentAccount?.did, labels],
+  )
 
   return (
     <Dialog.ScrollableInner
@@ -65,9 +80,17 @@ export function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
             )}
           </Text>
           <Text style={[a.text_md, a.leading_snug]}>
-            <Trans>
-              You may appeal these labels if you feel they were placed in error.
-            </Trans>
+            {containsSelfLabel ? (
+              <Trans>
+                You may appeal non-self labels if you feel they were placed in
+                error.
+              </Trans>
+            ) : (
+              <Trans>
+                You may appeal these labels if you feel they were placed in
+                error.
+              </Trans>
+            )}
           </Text>
 
           <View style={[a.py_lg, a.gap_md]}>
@@ -75,6 +98,7 @@ export function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
               <Label
                 key={`${label.val}-${label.src}`}
                 label={label}
+                isSelfLabel={label.src === currentAccount?.did}
                 control={props.control}
                 onPressAppeal={label => setAppealingLabel(label)}
               />
@@ -88,22 +112,14 @@ export function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
   )
 }
 
-export function LabelsOnMeDialog(props: LabelsOnMeDialogProps) {
-  return (
-    <Dialog.Outer control={props.control}>
-      <Dialog.Handle />
-
-      <LabelsOnMeDialogInner {...props} />
-    </Dialog.Outer>
-  )
-}
-
 function Label({
   label,
+  isSelfLabel,
   control,
   onPressAppeal,
 }: {
   label: ComAtprotoLabelDefs.Label
+  isSelfLabel: boolean
   control: Dialog.DialogOuterProps['control']
   onPressAppeal: (label: ComAtprotoLabelDefs.Label) => void
 }) {
@@ -125,32 +141,42 @@ function Label({
             {strings.description}
           </Text>
         </View>
-        <View>
-          <Button
-            variant="solid"
-            color="secondary"
-            size="small"
-            label={_(msg`Appeal`)}
-            onPress={() => onPressAppeal(label)}>
-            <ButtonText>
-              <Trans>Appeal</Trans>
-            </ButtonText>
-          </Button>
-        </View>
+        {!isSelfLabel && (
+          <View>
+            <Button
+              variant="solid"
+              color="secondary"
+              size="small"
+              label={_(msg`Appeal`)}
+              onPress={() => onPressAppeal(label)}>
+              <ButtonText>
+                <Trans>Appeal</Trans>
+              </ButtonText>
+            </Button>
+          </View>
+        )}
       </View>
 
       <Divider />
 
       <View style={[a.px_md, a.py_sm, t.atoms.bg_contrast_25]}>
         <Text style={[t.atoms.text_contrast_medium]}>
-          <Trans>Source:</Trans>{' '}
-          <InlineLinkText
-            to={makeProfileLink(
-              labeler ? labeler.creator : {did: label.src, handle: ''},
-            )}
-            onPress={() => control.close()}>
-            {labeler ? sanitizeHandle(labeler.creator.handle, '@') : label.src}
-          </InlineLinkText>
+          {isSelfLabel ? (
+            <Trans>This label was applied by you</Trans>
+          ) : (
+            <>
+              <Trans>Source:</Trans>{' '}
+              <InlineLinkText
+                to={makeProfileLink(
+                  labeler ? labeler.creator : {did: label.src, handle: ''},
+                )}
+                onPress={() => control.close()}>
+                {labeler
+                  ? sanitizeHandle(labeler.creator.handle, '@')
+                  : label.src}
+              </InlineLinkText>
+            </>
+          )}
         </Text>
       </View>
     </View>
@@ -190,7 +216,7 @@ function AppealForm({
           },
           reason: details,
         })
-      Toast.show(_(msg`Appeal submitted.`))
+      Toast.show(_(msg`Appeal submitted`))
     } finally {
       control.close()
     }

src/components/moderation/ModerationDetailsDialog.tsx

@@ -121,20 +121,20 @@ function ModerationDetailsDialogInner({
         <>
           <Divider />
           <Text style={[t.atoms.text, a.text_md, a.leading_snug, a.mt_lg]}>
-            <Trans>
-              This label was applied by{' '}
-              {modcause.source.type === 'user' ? (
-                <Trans>the author</Trans>
-              ) : (
+            {modcause.source.type === 'user' ? (
+              <Trans>This label was applied by the author.</Trans>
+            ) : (
+              <Trans>
+                This label was applied by{' '}
                 <InlineLinkText
                   to={makeProfileLink({did: modcause.label.src, handle: ''})}
                   onPress={() => control.close()}
                   style={a.text_md}>
                   {desc.source}
                 </InlineLinkText>
-              )}
-              .
-            </Trans>
+                .
+              </Trans>
+            )}
           </Text>
         </>
       )}

src/lib/analytics/types.ts

@@ -150,6 +150,8 @@ export type TrackPropertiesMap = {
   }
   'OnboardingV2:StepModeration:Start': {}
   'OnboardingV2:StepModeration:End': {}
+  'OnboardingV2:StepProfile:Start': {}
+  'OnboardingV2:StepProfile:End': {}
   'OnboardingV2:StepFinished:Start': {}
   'OnboardingV2:StepFinished:End': {}
   'OnboardingV2:Complete': {}