Merge remote-tracking branch 'origin/main' into hailey/onboarding-profile

# Conflicts:
#	src/screens/Onboarding/StepModeration/index.tsx

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

@@ -3,8 +3,8 @@ on:
   push:
     branches:
       - main
-      - traffic-reduction
-      - respect-optout-for-embeds
+      - 3p-moderators
+
 env:
   REGISTRY: ${{ secrets.AWS_ECR_REGISTRY_USEAST2_PACKAGES_REGISTRY }}
   USERNAME: ${{ secrets.AWS_ECR_REGISTRY_USEAST2_PACKAGES_USERNAME }}

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

@@ -0,0 +1,55 @@
+---
+name: Bundle and Deploy EAS Update
+
+on:
+  workflow_dispatch:
+    inputs:
+      runtimeVersion:
+        type: string
+        description: Runtime version (in x.x.x format) that this update is for
+        required: true
+
+jobs:
+  bundleDeploy:
+    name: Bundle and Deploy EAS Update
+    runs-on: ubuntu-latest
+    steps:
+      - name: 🧐 Validate version
+        run: |
+          [[ "${{ github.event.inputs.runtimeVersion }}" =~ ^[0-9]+\.[0-9]+\.[0-9]+$ ]] && echo "Version is valid" || exit 1
+
+      - name: ⬇️ Checkout
+        uses: actions/checkout@v4
+
+      - name: 🔧 Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+
+      - name: ⚙️ Install Dependencies
+        run: yarn install
+
+      - name: 🪛 Install jq
+        uses: dcarbone/install-jq-action@v2
+
+      - name: ⛏️ Setup Expo
+        run: yarn global add eas-cli-local-build-plugin
+
+      - name: 🔤 Compile Translations
+        run: yarn intl:build
+
+      - name: ✏️ Write environment variables
+        run: |
+          export json='${{ secrets.GOOGLE_SERVICES_TOKEN }}'
+          echo "${{ secrets.ENV_TOKEN }}" > .env
+          echo "$json" > google-services.json
+
+      - name: 🏗️ Create Bundle
+        run: yarn export
+
+      - name: 📦 Package Bundle and 🚀 Deploy
+        run: yarn make-deploy-bundle
+        env:
+          DENIS_API_KEY: ${{ secrets.DENIS_API_KEY }}
+          RUNTIME_VERSION: ${{ github.event.inputs.runtimeVersion }}

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

@@ -0,0 +1,185 @@
+# Credit https://github.com/expo/expo
+# https://github.com/expo/expo/blob/main/.github/workflows/pr-labeler.yml
+---
+name: PR labeler
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    types: [opened, synchronize]
+
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event_name }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test-suite-fingerprint:
+    runs-on: ubuntu-22.04
+    if: ${{ github.event.pull_request.head.repo.full_name == github.repository || github.event_name == 'push' }}
+    # REQUIRED: limit concurrency when pushing main(default) branch to prevent conflict for this action to update its fingerprint database
+    concurrency: fingerprint-${{ github.event_name != 'pull_request' && 'main' || github.run_id }}
+    permissions:
+      # REQUIRED: Allow comments of PRs
+      pull-requests: write
+      # REQUIRED: Allow updating fingerprint in acton caches
+      actions: write
+    steps:
+      - name: ⬇️ Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 100
+
+      - name: ⬇️ Fetch commits from base branch
+        run: git fetch origin main:main --depth 100
+        if: github.event_name == 'pull_request'
+
+      - name: 🔧 Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version-file: .nvmrc
+          cache: yarn
+
+      - name: ⚙️ Install Dependencies
+        run: yarn install
+
+      - name: Get the base commit
+        id: base-commit
+        run: |
+          # Since we limit this pr-labeler workflow only triggered from limited paths, we should use custom base commit
+          echo base-commit=$(git log -n 1 main --pretty=format:'%H') >> "$GITHUB_OUTPUT"
+
+      - name: 📷 Check fingerprint
+        id: fingerprint
+        uses: expo/expo-github-action/fingerprint@main
+        with:
+          previous-git-commit: ${{ steps.base-commit.outputs.base-commit }}
+
+      - name: 👀 Debug fingerprint
+        run: |
+          echo "previousGitCommit=${{ steps.fingerprint.outputs.previous-git-commit }} currentGitCommit=${{ steps.fingerprint.outputs.current-git-commit }}"
+          echo "isPreviousFingerprintEmpty=${{ steps.fingerprint.outputs.previous-fingerprint == '' }}"
+
+      - name: 🏷️ Labeling PR
+        uses: actions/github-script@v6
+        if: ${{ github.event_name == 'pull_request' && steps.fingerprint.outputs.fingerprint-diff == '[]' }}
+        with:
+          script: |
+            try {
+              await github.rest.issues.removeLabel({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                name: ['bot: fingerprint changed']
+              })
+            } catch (e) {
+              if (e.status != 404) {
+                throw e;
+              }
+            }
+            github.rest.issues.addLabels({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: ['bot: fingerprint compatible']
+            })
+
+      - name: 🏷️ Labeling PR
+        uses: actions/github-script@v6
+        if: ${{ github.event_name == 'pull_request' && steps.fingerprint.outputs.fingerprint-diff != '[]' }}
+        with:
+          script: |
+            try {
+              await github.rest.issues.removeLabel({
+                issue_number: context.issue.number,
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                name: ['bot: fingerprint compatible']
+              })
+            } catch (e) {
+              if (e.status != 404) {
+                throw e;
+              }
+            }
+            github.rest.issues.addLabels({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              labels: ['bot: fingerprint changed']
+            })
+
+      - name: 🔍 Find old comment if it exists
+        uses: peter-evans/find-comment@v2
+        if: ${{ github.event_name == 'pull_request' }}
+        id: old_comment
+        with:
+          issue-number: ${{ github.event.pull_request.number }}
+          comment-author: 'github-actions[bot]'
+          body-includes: <!-- pr-labeler comment -->
+
+      - name: 💬 Add comment with fingerprint
+        if: ${{ github.event_name == 'pull_request' && steps.fingerprint.outputs.fingerprint-diff != '[]' && steps.old_comment.outputs.comment-id == '' }}
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const diff = JSON.stringify(${{ steps.fingerprint.outputs.fingerprint-diff}}, null, 2);
+            const body = `<!-- pr-labeler comment -->
+            The Pull Request introduced fingerprint changes against the base commit: ${{ steps.fingerprint.outputs.previous-git-commit }}
+            <details><summary>Fingerprint diff</summary>
+
+            \`\`\`json
+            ${diff}
+            \`\`\`
+
+            </details>
+
+            ---
+            *Generated by [PR labeler](https://github.com/expo/expo/actions/workflows/pr-labeler.yml) 🤖*
+            `;
+
+            github.rest.issues.createComment({
+              issue_number: context.issue.number,
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: body,
+            });
+
+      - name: 💬 Update comment with fingerprint
+        if: ${{ github.event_name == 'pull_request' && steps.fingerprint.outputs.fingerprint-diff != '[]' && steps.old_comment.outputs.comment-id != '' }}
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const diff = JSON.stringify(${{ steps.fingerprint.outputs.fingerprint-diff}}, null, 2);
+            const body = `<!-- pr-labeler comment -->
+            The Pull Request introduced fingerprint changes against the base commit: ${{ steps.fingerprint.outputs.previous-git-commit }}
+            <details><summary>Fingerprint diff</summary>
+
+            \`\`\`json
+            ${diff}
+            \`\`\`
+
+            </details>
+
+            ---
+            *Generated by [PR labeler](https://github.com/expo/expo/actions/workflows/pr-labeler.yml) 🤖*
+            `;
+
+            github.rest.issues.updateComment({
+              issue_number: context.issue.number,
+              comment_id: '${{ steps.old_comment.outputs.comment-id }}',
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              body: body,
+            });
+
+      - name: 💬 Delete comment with fingerprint
+        if: ${{ github.event_name == 'pull_request' && steps.fingerprint.outputs.fingerprint-diff == '[]' && steps.old_comment.outputs.comment-id != '' }}
+        uses: actions/github-script@v6
+        with:
+          script: |
+            github.rest.issues.deleteComment({
+              issue_number: context.issue.number,
+              comment_id: '${{ steps.old_comment.outputs.comment-id }}',
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+            });

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

@@ -4,6 +4,7 @@ import {
   linkRequiresWarning,
   isPossiblyAUrl,
   splitApexDomain,
+  isTrustedUrl,
 } from '../../../src/lib/strings/url-helpers'
 
 describe('linkRequiresWarning', () => {
@@ -74,6 +75,10 @@ describe('linkRequiresWarning', () => {
     // bad uri inputs, default to true
     ['', '', true],
     ['example.com', 'example.com', true],
+    ['/profile', 'Username', false],
+    ['#', 'Show More', false],
+    ['https://docs.bsky.app', 'https://docs.bsky.app', false],
+    ['https://bsky.app/compose/intent?text=test', 'Compose a post', false],
   ]
 
   it.each(cases)(
@@ -139,3 +144,36 @@ describe('splitApexDomain', () => {
     },
   )
 })
+
+describe('isTrustedUrl', () => {
+  const cases = [
+    ['#', true],
+    ['#profile', true],
+    ['/', true],
+    ['/profile', true],
+    ['/profile/', true],
+    ['/profile/bob.test', true],
+    ['https://bsky.app', true],
+    ['https://bsky.app/', true],
+    ['https://bsky.app/profile/bob.test', true],
+    ['https://www.bsky.app', true],
+    ['https://www.bsky.app/', true],
+    ['https://docs.bsky.app', true],
+    ['https://bsky.social', true],
+    ['https://bsky.social/blog', true],
+    ['https://blueskyweb.xyz', true],
+    ['https://blueskyweb.zendesk.com', true],
+    ['http://bsky.app', true],
+    ['http://bsky.social', true],
+    ['http://blueskyweb.xyz', true],
+    ['http://blueskyweb.zendesk.com', true],
+    ['https://google.com', false],
+    ['https://docs.google.com', false],
+    ['https://google.com/#', false],
+  ]
+
+  it.each(cases)('given input uri %p, returns %p', (str, expected) => {
+    const output = isTrustedUrl(str)
+    expect(output).toEqual(expected)
+  })
+})

assets/icons/arrowTriangleBottom_stroke2_corner1_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M4.213 6.886c-.673-1.35.334-2.889 1.806-2.889H17.98c1.472 0 2.479 1.539 1.806 2.89l-5.982 11.997c-.74 1.484-2.87 1.484-3.61 0L4.213 6.886Z"/></svg>

assets/icons/bars3_stroke2_corner0_rounded.svg

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

assets/icons/chevronBottom_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M3.293 8.293a1 1 0 0 1 1.414 0L12 15.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414Z" clip-rule="evenodd"/></svg>

assets/icons/chevronTop_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 6a1 1 0 0 1 .707.293l8 8a1 1 0 0 1-1.414 1.414L12 8.414l-7.293 7.293a1 1 0 0 1-1.414-1.414l8-8A1 1 0 0 1 12 6Z" clip-rule="evenodd"/></svg>

assets/icons/circleBanSign_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-6.32 12.906L16.906 5.68A7.962 7.962 0 0 0 12 4Zm6.32 3.094L7.094 18.32A8 8 0 0 0 18.32 7.094ZM2 12C2 6.477 6.477 2 12 2a9.972 9.972 0 0 1 7.071 2.929A9.972 9.972 0 0 1 22 12c0 5.523-4.477 10-10 10a9.972 9.972 0 0 1-7.071-2.929A9.972 9.972 0 0 1 2 12Z" clip-rule="evenodd"/></svg>

assets/icons/group3_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="M8 5a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM4 7a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm13-1a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm-3.5 1.5a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0Zm5.826 7.376c-.919-.779-2.052-1.03-3.1-.787a1 1 0 0 1-.451-1.949c1.671-.386 3.45.028 4.844 1.211 1.397 1.185 2.348 3.084 2.524 5.579a1 1 0 0 1-.997 1.07H18a1 1 0 1 1 0-2h3.007c-.29-1.47-.935-2.49-1.681-3.124ZM3.126 19h9.747c-.61-3.495-2.867-5-4.873-5-2.006 0-4.263 1.505-4.873 5ZM8 12c3.47 0 6.64 2.857 6.998 7.93A1 1 0 0 1 14 21H2a1 1 0 0 1-.998-1.07C1.36 14.857 4.53 12 8 12Z" clip-rule="evenodd"/></svg>

assets/icons/heart2_filled_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M12.489 21.372c8.528-4.78 10.626-10.47 9.022-14.47-.779-1.941-2.414-3.333-4.342-3.763-1.697-.378-3.552.003-5.169 1.287-1.617-1.284-3.472-1.665-5.17-1.287-1.927.43-3.562 1.822-4.34 3.764-1.605 4 .493 9.69 9.021 14.47a1 1 0 0 0 .978 0Z"/></svg>

assets/icons/heart2_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M16.734 5.091c-1.238-.276-2.708.047-4.022 1.38a1 1 0 0 1-1.424 0C9.974 5.137 8.504 4.814 7.266 5.09c-1.263.282-2.379 1.206-2.92 2.556C3.33 10.18 4.252 14.84 12 19.348c7.747-4.508 8.67-9.168 7.654-11.7-.541-1.351-1.657-2.275-2.92-2.557Zm4.777 1.812c1.604 4-.494 9.69-9.022 14.47a1 1 0 0 1-.978 0C2.983 16.592.885 10.902 2.49 6.902c.779-1.942 2.414-3.334 4.342-3.764 1.697-.378 3.552.003 5.169 1.286 1.617-1.283 3.472-1.664 5.17-1.286 1.927.43 3.562 1.822 4.34 3.764Z" clip-rule="evenodd"/></svg>

assets/icons/person_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5ZM7.5 6.5a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM5.678 19h12.644c-.71-2.909-3.092-5-6.322-5s-5.613 2.091-6.322 5Zm-2.174.906C3.917 15.521 7.242 12 12 12c4.758 0 8.083 3.521 8.496 7.906A1 1 0 0 1 19.5 21h-15a1 1 0 0 1-.996-1.094Z" clip-rule="evenodd"/></svg>

assets/icons/raisingHand4Finger_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="M10.25 4a.75.75 0 0 0-.75.75V11a1 1 0 1 1-2 0V6.75a.75.75 0 0 0-1.5 0V14a6 6 0 0 0 12 0V9a2 2 0 0 0-2 2v1.5a1 1 0 0 1-.684.949l-.628.21A2.469 2.469 0 0 0 13 16a1 1 0 1 1-2 0 4.469 4.469 0 0 1 3-4.22V11c0-.703.181-1.364.5-1.938V5.75a.75.75 0 0 0-1.5 0V9a1 1 0 1 1-2 0V4.75a.75.75 0 0 0-.75-.75Zm2.316-.733A2.75 2.75 0 0 1 16.5 5.75v1.54c.463-.187.97-.29 1.5-.29h1a1 1 0 0 1 1 1v6a8 8 0 1 1-16 0V6.75a2.75 2.75 0 0 1 3.571-2.625 2.751 2.751 0 0 1 4.995-.858Z" clip-rule="evenodd"/></svg>

assets/icons/settingsGear2_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.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" clip-rule="evenodd"/></svg>

assets/icons/shield_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.675 2.054a1 1 0 0 1 .65 0l8 2.75A1 1 0 0 1 21 5.75v6.162c0 2.807-1.149 4.83-2.813 6.405-1.572 1.488-3.632 2.6-5.555 3.636l-.157.085a1 1 0 0 1-.95 0l-.157-.085c-1.923-1.037-3.983-2.148-5.556-3.636C4.15 16.742 3 14.719 3 11.912V5.75a1 1 0 0 1 .675-.946l8-2.75ZM5 6.464v5.448c0 2.166.851 3.687 2.188 4.952 1.276 1.209 2.964 2.158 4.812 3.157 1.848-1 3.536-1.948 4.813-3.157C18.148 15.6 19 14.078 19 11.912V6.464l-7-2.407-7 2.407Z" clip-rule="evenodd"/></svg>

assets/icons/squareArrowTopRight_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="M14 5a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V6.414l-7.293 7.293a1 1 0 0 1-1.414-1.414L17.586 5H14ZM3 6a1 1 0 0 1 1-1h5a1 1 0 0 1 0 2H5v12h12v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6Z" clip-rule="evenodd"/></svg>

assets/icons/squareBehindSquare4_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="M8 8V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-5v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h5Zm1 8a1 1 0 0 1-1-1v-5H4v10h10v-4H9Z" clip-rule="evenodd"/></svg>

assets/icons/triangleExclamation_stroke2_corner2_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.86 4.494a.995.995 0 0 0-1.72 0L4.14 16.502A.996.996 0 0 0 4.999 18h14.003a.996.996 0 0 0 .86-1.498L12.86 4.494ZM9.413 3.487c1.155-1.983 4.019-1.983 5.174 0l7.002 12.007C22.753 17.491 21.314 20 19.002 20H4.998c-2.312 0-3.751-2.509-2.587-4.506L9.413 3.487ZM12 8.019a1 1 0 0 1 1 1v2.994a1 1 0 1 1-2 0V9.02a1 1 0 0 1 1-1Z" clip-rule="evenodd"/><rect width="2.5" height="2.5" x="10.75" y="13.75" fill="#000" rx="1.25"/></svg>

bskyweb/cmd/bskyweb/server.go

@@ -188,6 +188,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/settings/threads", server.WebGeneric)
 	e.GET("/settings/external-embeds", server.WebGeneric)
 	e.GET("/sys/debug", server.WebGeneric)
+	e.GET("/sys/debug-mod", server.WebGeneric)
 	e.GET("/sys/log", server.WebGeneric)
 	e.GET("/support", server.WebGeneric)
 	e.GET("/support/privacy", server.WebGeneric)
@@ -203,6 +204,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/profile/:handleOrDID/lists/:rkey", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/feed/:rkey", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/feed/:rkey/liked-by", server.WebGeneric)
+	e.GET("/profile/:handleOrDID/labeler/liked-by", server.WebGeneric)
 
 	// profile RSS feed (DID not handle)
 	e.GET("/profile/:ident/rss", server.WebProfileRSS)

bskyweb/static/iframe/youtube.html

@@ -5,16 +5,14 @@
     }
     .container {
         position: relative;
-        width: 100%;
-        height: 0;
-        padding-bottom: 56.25%;
+        overflow: hidden;
+        width: 100vw;
+        height: 100vh;
     }
     .video {
         position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
+        width: 100vw;
+        height: 100vh;
     }
 </style>
 <div class="container"><div class="video" id="player"></div></div>

bskyweb/templates/base.html

@@ -44,7 +44,7 @@
       scrollbar-gutter: stable both-edges;
     }
     html, body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
     }
 
     /* Buttons and inputs have a font set by UA, so we'll have to reset that */
@@ -141,7 +141,7 @@
 
     /* ProseMirror */
     .ProseMirror {
-      font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif;
       min-height: 140px;
     }
     .ProseMirror-dark {

code-signing/certificate.pem

@@ -0,0 +1,18 @@
+-----BEGIN CERTIFICATE-----
+MIIC0TCCAbmgAwIBAgIJcMN2yt5KNDqTMA0GCSqGSIb3DQEBCwUAMBIxEDAOBgNV
+BAMTB0JsdWVza3kwHhcNMjQwMzE0MDA1OTU4WhcNMzQwMzE0MDA1OTU4WjASMRAw
+DgYDVQQDEwdCbHVlc2t5MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEA
+izSAWEc3wRoa3eTBEh/kE9pH0d6jhEGw9GrYfei60MHT1pSq2cTdyUM1yUZchAeW
+gFFtqFxX0pfIZQyMlIZbjkaOxOqzWhB0aCsxngnhbSahFwRxkVwTAuonhqIpaLBL
+hrCCCQ2IfZUpy8QeasqlTlmvmijuCC34fXxJlxNcj8SqzIZi+civ7U5PMPfIMMnD
+tCDIBy1vxMk57m25X2ikcWUFW64qNVLkFAL36xEnmFTL4Ivqpz23gUcUIe1zbesY
+jAgDtlwnAE7mU3oagCUDcSuOveT4POhT35Xp3Y/07I68kmXtrPxwd5k0L0zbisEm
+poKZ87E2X29BitihicMpBwIDAQABoyowKDAOBgNVHQ8BAf8EBAMCB4AwFgYDVR0l
+AQH/BAwwCgYIKwYBBQUHAwMwDQYJKoZIhvcNAQELBQADggEBAED1gdMF0yr8Gy87
+RgyaeVpPySwSsO0selmXXrcmOWgiPA05lubyhFEa4P5kdzBEByG2MT+pJkjGYpvK
+XRnqXM5VvdS2RhYYFH0cFOIUqBKwCnzViCMuGQeoGUx4oPcKFS0PQ1WjW2d4pS75
+51GBfB6LOepsCHUG0A9XEk7EAyUWc4M2ITCJsTtJh8CVn2pTks2q14ETDs86YQv4
+peDaJv8nhIe8oQkeGn2o/P/ctkwJg/uBydQUsWgjjGTQZTilVjGTW1mwDr9FucAE
+d5gKIk4rtR/3Zd/NDdqp8PrkoWeVM7Hwr789/mpUOeqa/j7YNkDYQh7x+M/odd1D
+KY0bQEQ=
+-----END CERTIFICATE-----

jest/jestSetup.js

@@ -88,3 +88,5 @@ jest.mock('sentry-expo', () => ({
     ReactNavigationInstrumentation: jest.fn(),
   },
 }))
+
+jest.mock('crypto', () => ({}))

lingui.config.js

@@ -4,6 +4,7 @@ module.exports = {
     'en',
     'de',
     'es',
+    'fi',
     'fr',
     'hi',
     'id',

package.json

@@ -41,10 +41,12 @@
     "intl:extract": "lingui extract",
     "intl:compile": "lingui compile",
     "nuke": "rm -rf ./node_modules && rm -rf ./ios && rm -rf ./android",
-    "update-extensions": "scripts/updateExtensions.sh"
+    "update-extensions": "bash scripts/updateExtensions.sh",
+    "export": "npx expo export",
+    "make-deploy-bundle": "bash scripts/bundleUpdate.sh"
   },
   "dependencies": {
-    "@atproto/api": "^0.10.5",
+    "@atproto/api": "^0.12.2",
     "@bam.tech/react-native-image-resizer": "^3.0.4",
     "@braintree/sanitize-url": "^6.0.2",
     "@emoji-mart/react": "^1.1.1",
@@ -76,7 +78,9 @@
     "@segment/sovran-react-native": "^0.4.5",
     "@sentry/react-native": "5.5.0",
     "@tamagui/focus-scope": "^1.84.1",
+    "@tanstack/query-async-storage-persister": "^5.25.0",
     "@tanstack/react-query": "^5.8.1",
+    "@tanstack/react-query-persist-client": "^5.25.0",
     "@tiptap/core": "^2.0.0-beta.220",
     "@tiptap/extension-document": "^2.0.0-beta.220",
     "@tiptap/extension-hard-break": "^2.0.3",

patches/expo-image-picker+14.7.1.patch

@@ -1,8 +1,56 @@
+diff --git a/node_modules/expo-image-picker/android/src/main/java/expo/modules/imagepicker/ImagePickerModule.kt b/node_modules/expo-image-picker/android/src/main/java/expo/modules/imagepicker/ImagePickerModule.kt
+index 3f50f8c..ee47fa1 100644
+--- a/node_modules/expo-image-picker/android/src/main/java/expo/modules/imagepicker/ImagePickerModule.kt
++++ b/node_modules/expo-image-picker/android/src/main/java/expo/modules/imagepicker/ImagePickerModule.kt
+@@ -33,7 +33,9 @@ import kotlin.coroutines.resumeWithException
+ // TODO(@bbarthec): rename to ExpoImagePicker
+ private const val moduleName = "ExponentImagePicker"
+
++
+ class ImagePickerModule : Module() {
++  private var isPickerOpen = false
+
+   override fun definition() = ModuleDefinition {
+     Name(moduleName)
+@@ -129,6 +131,11 @@ class ImagePickerModule : Module() {
+     options: ImagePickerOptions
+   ): Any {
+     return try {
++      if(isPickerOpen) {
++        return ImagePickerResponse(canceled = true)
++      }
++
++      isPickerOpen = true
+       var result = launchPicker(pickerLauncher)
+       if (
+         !options.allowsMultipleSelection &&
+@@ -143,6 +150,8 @@ class ImagePickerModule : Module() {
+       mediaHandler.readExtras(result.data, options)
+     } catch (cause: OperationCanceledException) {
+       return ImagePickerResponse(canceled = true)
++    } finally {
++      isPickerOpen = false
+     }
+   }
+
 diff --git a/node_modules/expo-image-picker/android/src/main/java/expo/modules/imagepicker/contracts/ImageLibraryContract.kt b/node_modules/expo-image-picker/android/src/main/java/expo/modules/imagepicker/contracts/ImageLibraryContract.kt
-index ff15c91..41aaf12 100644
+index ff15c91..9763012 100644
 --- a/node_modules/expo-image-picker/android/src/main/java/expo/modules/imagepicker/contracts/ImageLibraryContract.kt
 +++ b/node_modules/expo-image-picker/android/src/main/java/expo/modules/imagepicker/contracts/ImageLibraryContract.kt
-@@ -26,51 +26,26 @@ import java.io.Serializable
+@@ -5,12 +5,7 @@ import android.content.ContentResolver
+ import android.content.Context
+ import android.content.Intent
+ import android.net.Uri
+-import androidx.activity.result.PickVisualMediaRequest
+-import androidx.activity.result.contract.ActivityResultContracts.PickVisualMedia
+-import androidx.activity.result.contract.ActivityResultContracts.PickMultipleVisualMedia
+ import expo.modules.imagepicker.ImagePickerOptions
+-import expo.modules.imagepicker.MediaTypes
+-import expo.modules.imagepicker.UNLIMITED_SELECTION
+ import expo.modules.imagepicker.getAllDataUris
+ import expo.modules.imagepicker.toMediaType
+ import expo.modules.kotlin.activityresult.AppContextActivityResultContract
+@@ -26,51 +21,26 @@ import java.io.Serializable
   * @see [androidx.activity.result.contract.ActivityResultContracts.GetMultipleContents]
   */
  internal class ImageLibraryContract(
@@ -12,7 +60,7 @@ index ff15c91..41aaf12 100644
    private val contentResolver: ContentResolver
      get() = appContextProvider.appContext.reactContext?.contentResolver
        ?: throw Exceptions.ReactContextLost()
- 
+
    override fun createIntent(context: Context, input: ImageLibraryContractOptions): Intent {
 -    val request = PickVisualMediaRequest.Builder()
 -      .setMediaType(
@@ -34,7 +82,7 @@ index ff15c91..41aaf12 100644
 +    val intent = Intent(Intent.ACTION_GET_CONTENT)
 +            .addCategory(Intent.CATEGORY_OPENABLE)
 +            .setType("image/*")
- 
+
      if (input.options.allowsMultipleSelection) {
 -      val selectionLimit = input.options.selectionLimit
 -
@@ -45,7 +93,7 @@ index ff15c91..41aaf12 100644
 +      if(input.options.selectionLimit == 1) {
 +        return intent
        }
- 
+
 -      if (selectionLimit > 1) {
 -        return PickMultipleVisualMedia(selectionLimit).createIntent(context, request)
 -      }
@@ -56,9 +104,9 @@ index ff15c91..41aaf12 100644
 -      }
 +      intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true)
      }
- 
+
 -    return PickVisualMedia().createIntent(context, request)
 +    return intent
    }
- 
+
    override fun parseResult(input: ImageLibraryContractOptions, resultCode: Int, intent: Intent?) =

patches/react-native+0.73.2.patch

@@ -1,92 +1,19 @@
-diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
-index 9dca6a5..090bda5 100644
---- a/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
-+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBackedTextInputDelegateAdapter.mm
-@@ -266,11 +266,10 @@ - (void)textViewDidChange:(__unused UITextView *)textView
+diff --git a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
+index b09e653..d290dab 100644
+--- a/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
++++ b/node_modules/react-native/React/Views/RefreshControl/RCTRefreshControl.m
+@@ -198,6 +198,14 @@ - (void)refreshControlValueChanged
+   [self setCurrentRefreshingState:super.refreshing];
+   _refreshingProgrammatically = NO;
 
- - (void)textViewDidChangeSelection:(__unused UITextView *)textView
- {
--  if (_lastStringStateWasUpdatedWith && ![_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) {
-+  if (![_lastStringStateWasUpdatedWith isEqual:_backedTextInputView.attributedText]) {
-     [self textViewDidChange:_backedTextInputView];
-     _ignoreNextTextInputCall = YES;
-   }
--  _lastStringStateWasUpdatedWith = _backedTextInputView.attributedText;
-   [self textViewProbablyDidChangeSelection];
- }
-
-diff --git a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm
-index 1f06b79..ab458f3 100644
---- a/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm
-+++ b/node_modules/react-native/Libraries/Text/TextInput/RCTBaseTextInputShadowView.mm
-@@ -87,7 +87,7 @@ - (void)invalidateContentSize
-     return;
-   }
-
--  CGSize maximumSize = self.layoutMetrics.frame.size;
-+  CGSize maximumSize = self.layoutMetrics.contentFrame.size;
-
-   if (_maximumNumberOfLines == 1) {
-     maximumSize.width = CGFLOAT_MAX;
-@@ -158,6 +158,8 @@ - (void)uiManagerWillPerformMounting
-     [attributedText insertAttributedString:propertyAttributedText atIndex:0];
-   }
-
-+  [self postprocessAttributedText:attributedText];
-+
-   NSAttributedString *newAttributedText;
-   if (![_previousAttributedText isEqualToAttributedString:attributedText]) {
-     // We have to follow `set prop` pattern:
-@@ -191,6 +193,52 @@ - (void)uiManagerWillPerformMounting
-   }];
- }
-
-+- (void)postprocessAttributedText:(NSMutableAttributedString *)attributedText
-+{
-+  __block CGFloat maximumLineHeight = 0;
-+
-+  [attributedText enumerateAttribute:NSParagraphStyleAttributeName
-+                             inRange:NSMakeRange(0, attributedText.length)
-+                             options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
-+                          usingBlock:^(NSParagraphStyle *paragraphStyle, __unused NSRange range, __unused BOOL *stop) {
-+    if (!paragraphStyle) {
-+      return;
++  if (@available(iOS 17.4, *)) {
++    if (_currentRefreshingState) {
++      UIImpactFeedbackGenerator *feedbackGenerator = [[UIImpactFeedbackGenerator alloc] initWithStyle:UIImpactFeedbackStyleLight];
++      [feedbackGenerator prepare];
++      [feedbackGenerator impactOccurred];
 +    }
-+
-+    maximumLineHeight = MAX(paragraphStyle.maximumLineHeight, maximumLineHeight);
-+  }];
-+
-+  if (maximumLineHeight == 0) {
-+    // `lineHeight` was not specified, nothing to do.
-+    return;
 +  }
 +
-+  __block CGFloat maximumFontLineHeight = 0;
-+
-+  [attributedText enumerateAttribute:NSFontAttributeName
-+                             inRange:NSMakeRange(0, attributedText.length)
-+                             options:NSAttributedStringEnumerationLongestEffectiveRangeNotRequired
-+                          usingBlock:^(UIFont *font, NSRange range, __unused BOOL *stop) {
-+    if (!font) {
-+      return;
-+    }
-+
-+    if (maximumFontLineHeight <= font.lineHeight) {
-+      maximumFontLineHeight = font.lineHeight;
-+    }
-+  }];
-+
-+  if (maximumLineHeight < maximumFontLineHeight) {
-+    return;
-+  }
-+
-+  CGFloat baseLineOffset = maximumLineHeight / 2.0 - maximumFontLineHeight / 2.0;
-+
-+  [attributedText addAttribute:NSBaselineOffsetAttributeName
-+                         value:@(baseLineOffset)
-+                         range:NSMakeRange(0, attributedText.length)];
-+}
-+
- #pragma mark -
-
- - (NSAttributedString *)measurableAttributedText
+   if (_onRefresh) {
+     _onRefresh(nil);
+   }

patches/react-native+0.73.2.patch.md

@@ -1,5 +1,5 @@
-# TextInput Patch
+# RefreshControl Patch
 
-Patching `RCTBaseTextShadowInput.mm` from https://github.com/facebook/react-native/pull/38359. This fixes some text
-getting cut off inside the composer. This was merged in December, so we should be able to remove this patch when RN
-ships the next release.
+Patching `RCTRefreshControl.mm` temporarily to play an impact haptic on refresh when using iOS 17.4 or higher. Since
+17.4, there has been a regression somewhere causing haptics to not play on iOS on refresh. Should monitor for an update
+in the RN repo: https://github.com/facebook/react-native/issues/43388

scripts/bundleUpdate.js

@@ -0,0 +1,104 @@
+const crypto = require('crypto')
+const fs = require('fs')
+const fsp = fs.promises
+const path = require('path')
+
+const DIST_DIR = './dist'
+const BUNDLES_DIR = '/_expo/static/js'
+const IOS_BUNDLE_DIR = path.join(DIST_DIR, BUNDLES_DIR, '/ios')
+const ANDROID_BUNDLE_DIR = path.join(DIST_DIR, BUNDLES_DIR, '/android')
+const METADATA_PATH = path.join(DIST_DIR, '/metadata.json')
+const DEST_DIR = './bundleTempDir'
+
+// Weird, don't feel like figuring out _why_ it wants this
+const METADATA = require(`../${METADATA_PATH}`)
+const IOS_METADATA_ASSETS = METADATA.fileMetadata.ios.assets
+const ANDROID_METADATA_ASSETS = METADATA.fileMetadata.android.assets
+
+const getMd5 = async path => {
+  return new Promise(res => {
+    const hash = crypto.createHash('md5')
+    const rStream = fs.createReadStream(path)
+    rStream.on('data', data => {
+      hash.update(data)
+    })
+    rStream.on('end', () => {
+      res(hash.digest('hex'))
+    })
+  })
+}
+
+const moveFiles = async () => {
+  console.log('Making directory...')
+  await fsp.mkdir(DEST_DIR)
+  await fsp.mkdir(path.join(DEST_DIR, '/assets'))
+
+  console.log('Getting ios md5...')
+  const iosCurrPath = path.join(
+    IOS_BUNDLE_DIR,
+    (await fsp.readdir(IOS_BUNDLE_DIR))[0],
+  )
+  const iosMd5 = await getMd5(iosCurrPath)
+  const iosNewPath = `bundles/${iosMd5}.bundle`
+
+  console.log('Copying ios bundle...')
+  await fsp.cp(iosCurrPath, path.join(DEST_DIR, iosNewPath))
+
+  console.log('Getting android md5...')
+  const androidCurrPath = path.join(
+    ANDROID_BUNDLE_DIR,
+    (await fsp.readdir(ANDROID_BUNDLE_DIR))[0],
+  )
+  const androidMd5 = await getMd5(androidCurrPath)
+  const androidNewPath = `bundles/${androidMd5}.bundle`
+
+  console.log('Copying android bundle...')
+  await fsp.cp(androidCurrPath, path.join(DEST_DIR, androidNewPath))
+
+  const iosAssets = []
+  const androidAssets = []
+
+  console.log('Getting ios asset md5s and moving them...')
+  for (const asset of IOS_METADATA_ASSETS) {
+    const currPath = path.join(DIST_DIR, asset.path)
+    const md5 = await getMd5(currPath)
+    const withExtPath = `assets/${md5}.${asset.ext}`
+    iosAssets.push(withExtPath)
+    await fsp.cp(currPath, path.join(DEST_DIR, withExtPath))
+  }
+
+  console.log('Getting android asset md5s and moving them...')
+  for (const asset of ANDROID_METADATA_ASSETS) {
+    const currPath = path.join(DIST_DIR, asset.path)
+    const md5 = await getMd5(currPath)
+    const withExtPath = `assets/${md5}.${asset.ext}`
+    androidAssets.push(withExtPath)
+    await fsp.cp(currPath, path.join(DEST_DIR, withExtPath))
+  }
+
+  const result = {
+    version: 0,
+    bundler: 'metro',
+    fileMetadata: {
+      ios: {
+        bundle: iosNewPath,
+        assets: iosAssets,
+      },
+      android: {
+        bundle: androidNewPath,
+        assets: androidAssets,
+      },
+    },
+  }
+
+  console.log('Writing metadata...')
+  await fsp.writeFile(
+    path.join(DEST_DIR, 'metadata.json'),
+    JSON.stringify(result),
+  )
+
+  console.log('Finished!')
+  console.log('Metadata:', result)
+}
+
+moveFiles()

scripts/bundleUpdate.sh

@@ -0,0 +1,26 @@
+#!/bin/bash
+set -o errexit
+set -o pipefail
+set -o nounset
+
+rm -rf bundleTempDir
+rm -rf bundle.tar.gz
+
+echo "Creating tarball..."
+node scripts/bundleUpdate.js
+
+cd bundleTempDir || exit
+
+BUNDLE_VERSION=$(date +%s)
+DEPLOYMENT_URL="https://updates.bsky.app/v1/upload?runtime-version=$RUNTIME_VERSION&bundle-version=$BUNDLE_VERSION"
+
+tar czvf bundle.tar.gz ./*
+
+echo "Deploying to $DEPLOYMENT_URL..."
+
+curl -o - --form "bundle=@./bundle.tar.gz" --user "bsky:$DENIS_API_KEY" --basic "$DEPLOYMENT_URL"
+
+cd ..
+
+rm -rf bundleTempDir
+rm -rf bundle.tar.gz

src/App.native.tsx

@@ -5,7 +5,7 @@ import React, {useState, useEffect} from 'react'
 import {RootSiblingParent} from 'react-native-root-siblings'
 import * as SplashScreen from 'expo-splash-screen'
 import {GestureHandlerRootView} from 'react-native-gesture-handler'
-import {QueryClientProvider} from '@tanstack/react-query'
+import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client'
 import {
   SafeAreaProvider,
   initialWindowMetrics,
@@ -22,7 +22,11 @@ import {s} from 'lib/styles'
 import {Shell} from 'view/shell'
 import * as notifications from 'lib/notifications/notifications'
 import * as Toast from 'view/com/util/Toast'
-import {queryClient} from 'lib/react-query'
+import {
+  queryClient,
+  asyncStoragePersister,
+  dehydrateOptions,
+} from 'lib/react-query'
 import {TestCtrls} from 'view/com/testing/TestCtrls'
 import {Provider as ShellStateProvider} from 'state/shell'
 import {Provider as ModalStateProvider} from 'state/modals'
@@ -33,6 +37,7 @@ import {Provider as InvitesStateProvider} from 'state/invites'
 import {Provider as PrefsStateProvider} from 'state/preferences'
 import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
 import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
+import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import I18nProvider from './locale/i18nProvider'
 import {
   Provider as SessionProvider,
@@ -79,21 +84,23 @@ function InnerApp() {
             // Resets the entire tree below when it changes:
             key={currentAccount?.did}>
             <StatsigProvider>
-              <LoggedOutViewProvider>
-                <SelectedFeedProvider>
-                  <UnreadNotifsProvider>
-                    <ThemeProvider theme={theme}>
-                      {/* All components should be within this provider */}
-                      <RootSiblingParent>
-                        <GestureHandlerRootView style={s.h100pct}>
-                          <TestCtrls />
-                          <Shell />
-                        </GestureHandlerRootView>
-                      </RootSiblingParent>
-                    </ThemeProvider>
-                  </UnreadNotifsProvider>
-                </SelectedFeedProvider>
-              </LoggedOutViewProvider>
+              <LabelDefsProvider>
+                <LoggedOutViewProvider>
+                  <SelectedFeedProvider>
+                    <UnreadNotifsProvider>
+                      <ThemeProvider theme={theme}>
+                        {/* All components should be within this provider */}
+                        <RootSiblingParent>
+                          <GestureHandlerRootView style={s.h100pct}>
+                            <TestCtrls />
+                            <Shell />
+                          </GestureHandlerRootView>
+                        </RootSiblingParent>
+                      </ThemeProvider>
+                    </UnreadNotifsProvider>
+                  </SelectedFeedProvider>
+                </LoggedOutViewProvider>
+              </LabelDefsProvider>
             </StatsigProvider>
           </React.Fragment>
         </Splash>
@@ -118,7 +125,9 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{persister: asyncStoragePersister, dehydrateOptions}}>
       <SessionProvider>
         <ShellStateProvider>
           <PrefsStateProvider>
@@ -140,7 +149,7 @@ function App() {
           </PrefsStateProvider>
         </ShellStateProvider>
       </SessionProvider>
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   )
 }
 

src/App.web.tsx

@@ -1,7 +1,7 @@
 import 'lib/sentry' // must be near top
 
 import React, {useState, useEffect} from 'react'
-import {QueryClientProvider} from '@tanstack/react-query'
+import {PersistQueryClientProvider} from '@tanstack/react-query-persist-client'
 import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {RootSiblingParent} from 'react-native-root-siblings'
 
@@ -13,7 +13,11 @@ import {init as initPersistedState} from '#/state/persisted'
 import {Shell} from 'view/shell/index'
 import {ToastContainer} from 'view/com/util/Toast.web'
 import {ThemeProvider} from 'lib/ThemeContext'
-import {queryClient} from 'lib/react-query'
+import {
+  queryClient,
+  asyncStoragePersister,
+  dehydrateOptions,
+} from 'lib/react-query'
 import {Provider as ShellStateProvider} from 'state/shell'
 import {Provider as ModalStateProvider} from 'state/modals'
 import {Provider as DialogStateProvider} from 'state/dialogs'
@@ -23,6 +27,7 @@ import {Provider as InvitesStateProvider} from 'state/invites'
 import {Provider as PrefsStateProvider} from 'state/preferences'
 import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
 import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
+import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import I18nProvider from './locale/i18nProvider'
 import {
   Provider as SessionProvider,
@@ -56,21 +61,23 @@ function InnerApp() {
         // Resets the entire tree below when it changes:
         key={currentAccount?.did}>
         <StatsigProvider>
-          <LoggedOutViewProvider>
-            <SelectedFeedProvider>
-              <UnreadNotifsProvider>
-                <ThemeProvider theme={theme}>
-                  {/* All components should be within this provider */}
-                  <RootSiblingParent>
-                    <SafeAreaProvider>
-                      <Shell />
-                    </SafeAreaProvider>
-                  </RootSiblingParent>
-                  <ToastContainer />
-                </ThemeProvider>
-              </UnreadNotifsProvider>
-            </SelectedFeedProvider>
-          </LoggedOutViewProvider>
+          <LabelDefsProvider>
+            <LoggedOutViewProvider>
+              <SelectedFeedProvider>
+                <UnreadNotifsProvider>
+                  <ThemeProvider theme={theme}>
+                    {/* All components should be within this provider */}
+                    <RootSiblingParent>
+                      <SafeAreaProvider>
+                        <Shell />
+                      </SafeAreaProvider>
+                    </RootSiblingParent>
+                    <ToastContainer />
+                  </ThemeProvider>
+                </UnreadNotifsProvider>
+              </SelectedFeedProvider>
+            </LoggedOutViewProvider>
+          </LabelDefsProvider>
         </StatsigProvider>
       </React.Fragment>
     </Alf>
@@ -93,7 +100,9 @@ function App() {
    * that is set up in the InnerApp component above.
    */
   return (
-    <QueryClientProvider client={queryClient}>
+    <PersistQueryClientProvider
+      client={queryClient}
+      persistOptions={{persister: asyncStoragePersister, dehydrateOptions}}>
       <SessionProvider>
         <ShellStateProvider>
           <PrefsStateProvider>
@@ -115,7 +124,7 @@ function App() {
           </PrefsStateProvider>
         </ShellStateProvider>
       </SessionProvider>
-    </QueryClientProvider>
+    </PersistQueryClientProvider>
   )
 }
 

src/Navigation.tsx

@@ -46,7 +46,7 @@ import {SearchScreen} from './view/screens/Search'
 import {FeedsScreen} from './view/screens/Feeds'
 import {NotificationsScreen} from './view/screens/Notifications'
 import {ListsScreen} from './view/screens/Lists'
-import {ModerationScreen} from './view/screens/Moderation'
+import {ModerationScreen} from '#/screens/Moderation'
 import {ModerationModlistsScreen} from './view/screens/ModerationModlists'
 import {NotFoundScreen} from './view/screens/NotFound'
 import {SettingsScreen} from './view/screens/Settings'
@@ -61,6 +61,7 @@ import {PostThreadScreen} from './view/screens/PostThread'
 import {PostLikedByScreen} from './view/screens/PostLikedBy'
 import {PostRepostedByScreen} from './view/screens/PostRepostedBy'
 import {Storybook} from './view/screens/Storybook'
+import {DebugModScreen} from './view/screens/DebugMod'
 import {LogScreen} from './view/screens/Log'
 import {SupportScreen} from './view/screens/Support'
 import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy'
@@ -78,6 +79,7 @@ import {createNativeStackNavigatorWithAuth} from './view/shell/createNativeStack
 import {msg} from '@lingui/macro'
 import {i18n, MessageDescriptor} from '@lingui/core'
 import HashtagScreen from '#/screens/Hashtag'
+import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
 import {logEvent, attachRouteToLogEvents} from './lib/statsig/statsig'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
@@ -198,11 +200,21 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
         getComponent={() => ProfileFeedLikedByScreen}
         options={{title: title(msg`Liked by`)}}
       />
+      <Stack.Screen
+        name="ProfileLabelerLikedBy"
+        getComponent={() => ProfileLabelerLikedByScreen}
+        options={{title: title(msg`Liked by`)}}
+      />
       <Stack.Screen
         name="Debug"
         getComponent={() => Storybook}
         options={{title: title(msg`Storybook`), requireAuth: true}}
       />
+      <Stack.Screen
+        name="DebugMod"
+        getComponent={() => DebugModScreen}
+        options={{title: title(msg`Moderation states`), requireAuth: true}}
+      />
       <Stack.Screen
         name="Log"
         getComponent={() => LogScreen}

src/alf/atoms.ts

@@ -50,6 +50,9 @@ export const atoms = {
   h_full: {
     height: '100%',
   },
+  h_full_vh: web({
+    height: '100vh',
+  }),
 
   /*
    * Border radius
@@ -243,6 +246,9 @@ export const atoms = {
   font_normal: {
     fontWeight: tokens.fontWeight.normal,
   },
+  font_semibold: {
+    fontWeight: '500',
+  },
   font_bold: {
     fontWeight: tokens.fontWeight.semibold,
   },
@@ -528,6 +534,10 @@ export const atoms = {
   /*
    * Margin
    */
+  mx_auto: {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  },
   m_2xs: {
     margin: tokens.space._2xs,
   },

src/alf/index.tsx

@@ -16,6 +16,7 @@ type BreakpointName = keyof typeof breakpoints
 const breakpoints: {
   [key: string]: number
 } = {
+  gtPhone: 500,
   gtMobile: 800,
   gtTablet: 1300,
 }
@@ -26,6 +27,7 @@ function getActiveBreakpoints({width}: {width: number}) {
 
   return {
     active: active[active.length - 1],
+    gtPhone: active.includes('gtPhone'),
     gtMobile: active.includes('gtMobile'),
     gtTablet: active.includes('gtTablet'),
   }
@@ -39,6 +41,7 @@ export const Context = React.createContext<{
   theme: themes.Theme
   breakpoints: {
     active: BreakpointName | undefined
+    gtPhone: boolean
     gtMobile: boolean
     gtTablet: boolean
   }
@@ -47,6 +50,7 @@ export const Context = React.createContext<{
   theme: themes.light,
   breakpoints: {
     active: undefined,
+    gtPhone: false,
     gtMobile: false,
     gtTablet: false,
   },

src/alf/tokens.ts

@@ -12,6 +12,9 @@ export const dimScale = generateScale(12, 100)
 export const color = {
   trueBlack: '#000000',
 
+  temp_purple: 'rgb(105 0 255)',
+  temp_purple_dark: 'rgb(83 0 202)',
+
   gray_0: `hsl(${BLUE_HUE}, 20%, ${scale[14]}%)`,
   gray_25: `hsl(${BLUE_HUE}, 20%, ${scale[13]}%)`,
   gray_50: `hsl(${BLUE_HUE}, 20%, ${scale[12]}%)`,

src/components/Button.tsx

@@ -15,6 +15,7 @@ import LinearGradient from 'react-native-linear-gradient'
 
 import {useTheme, atoms as a, tokens, android, flatten} from '#/alf'
 import {Props as SVGIconProps} from '#/components/icons/common'
+import {normalizeTextStyles} from '#/components/Typography'
 
 export type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'gradient'
 export type ButtonColor =
@@ -139,7 +140,7 @@ export function Button({
     }))
   }, [setState])
 
-  const {baseStyles, hoverStyles, focusStyles} = React.useMemo(() => {
+  const {baseStyles, hoverStyles} = React.useMemo(() => {
     const baseStyles: ViewStyle[] = []
     const hoverStyles: ViewStyle[] = []
     const light = t.name === 'light'
@@ -191,14 +192,14 @@ export function Button({
       if (variant === 'solid') {
         if (!disabled) {
           baseStyles.push({
-            backgroundColor: t.palette.contrast_50,
+            backgroundColor: t.palette.contrast_25,
           })
           hoverStyles.push({
-            backgroundColor: t.palette.contrast_100,
+            backgroundColor: t.palette.contrast_50,
           })
         } else {
           baseStyles.push({
-            backgroundColor: t.palette.contrast_200,
+            backgroundColor: t.palette.contrast_100,
           })
         }
       } else if (variant === 'outline') {
@@ -308,12 +309,6 @@ export function Button({
     return {
       baseStyles,
       hoverStyles,
-      focusStyles: [
-        ...hoverStyles,
-        {
-          outline: 0,
-        } as ViewStyle,
-      ],
     }
   }, [t, variant, color, size, shape, disabled])
 
@@ -376,10 +371,8 @@ export function Button({
         a.flex_row,
         a.align_center,
         a.justify_center,
-        a.justify_center,
         flattenedBaseStyles,
         ...(state.hovered || state.pressed ? hoverStyles : []),
-        ...(state.focused ? focusStyles : []),
         flatten(style),
       ]}
       onPressIn={onPressIn}
@@ -398,7 +391,7 @@ export function Button({
           ]}>
           <LinearGradient
             colors={
-              state.hovered || state.pressed || state.focused
+              state.hovered || state.pressed
                 ? gradientHoverColors
                 : gradientColors
             }
@@ -527,7 +520,14 @@ export function ButtonText({children, style, ...rest}: ButtonTextProps) {
   const textStyles = useSharedButtonTextStyles()
 
   return (
-    <Text {...rest} style={[a.font_bold, a.text_center, textStyles, style]}>
+    <Text
+      {...rest}
+      style={normalizeTextStyles([
+        a.font_bold,
+        a.text_center,
+        textStyles,
+        style,
+      ])}>
       {children}
     </Text>
   )

src/components/Dialog/index.web.tsx

@@ -99,7 +99,7 @@ export function Outer({
                     style={[
                       web(a.fixed),
                       a.inset_0,
-                      {opacity: 0.5, backgroundColor: t.palette.black},
+                      {opacity: 0.8, backgroundColor: t.palette.black},
                     ]}
                   />
                 )}

src/components/Dialog/types.ts

@@ -1,5 +1,5 @@
 import React from 'react'
-import type {AccessibilityProps} from 'react-native'
+import type {AccessibilityProps, GestureResponderEvent} from 'react-native'
 import {BottomSheetProps} from '@gorhom/bottom-sheet'
 
 import {ViewStyleProp} from '#/alf'
@@ -10,9 +10,15 @@ type A11yProps = Required<AccessibilityProps>
  * Mutated by useImperativeHandle to provide a public API for controlling the
  * dialog. The methods here will actually become the handlers defined within
  * the `Dialog.Outer` component.
+ *
+ * `Partial<GestureResponderEvent>` here allows us to add this directly to the
+ * `onPress` prop of a button, for example. If this type was not added, we
+ * would need to create a function to wrap `.open()` with.
  */
 export type DialogControlRefProps = {
-  open: (options?: DialogControlOpenOptions) => void
+  open: (
+    options?: DialogControlOpenOptions & Partial<GestureResponderEvent>,
+  ) => void
   close: (callback?: () => void) => void
 }
 

src/components/Error.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+
+import {CenteredView} from 'view/com/util/Views'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
+import {View} from 'react-native'
+import {Button} from '#/components/Button'
+import {useNavigation} from '@react-navigation/core'
+import {NavigationProp} from 'lib/routes/types'
+import {StackActions} from '@react-navigation/native'
+import {router} from '#/routes'
+
+export function Error({
+  title,
+  message,
+  onRetry,
+}: {
+  title?: string
+  message?: string
+  onRetry?: () => unknown
+}) {
+  const navigation = useNavigation<NavigationProp>()
+  const t = useTheme()
+  const {gtMobile} = useBreakpoints()
+
+  const canGoBack = navigation.canGoBack()
+  const onGoBack = React.useCallback(() => {
+    if (canGoBack) {
+      navigation.goBack()
+    } else {
+      navigation.navigate('HomeTab')
+
+      // Checking the state for routes ensures that web doesn't encounter errors while going back
+      if (navigation.getState()?.routes) {
+        navigation.dispatch(StackActions.push(...router.matchPath('/')))
+      } else {
+        navigation.navigate('HomeTab')
+        navigation.dispatch(StackActions.popToTop())
+      }
+    }
+  }, [navigation, canGoBack])
+
+  return (
+    <CenteredView
+      style={[
+        a.flex_1,
+        a.align_center,
+        !gtMobile ? a.justify_between : a.gap_5xl,
+        t.atoms.border_contrast_low,
+        {paddingTop: 175, paddingBottom: 110},
+      ]}
+      sideBorders>
+      <View style={[a.w_full, a.align_center, a.gap_lg]}>
+        <Text style={[a.font_bold, a.text_3xl]}>{title}</Text>
+        <Text
+          style={[
+            a.text_md,
+            a.text_center,
+            t.atoms.text_contrast_high,
+            {lineHeight: 1.4},
+            gtMobile && {width: 450},
+          ]}>
+          {message}
+        </Text>
+      </View>
+      <View style={[a.gap_md, gtMobile ? {width: 350} : [a.w_full, a.px_lg]]}>
+        {onRetry && (
+          <Button
+            variant="solid"
+            color="primary"
+            label="Click here"
+            onPress={onRetry}
+            size="large"
+            style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
+            Retry
+          </Button>
+        )}
+        <Button
+          variant="solid"
+          color={onRetry ? 'secondary' : 'primary'}
+          label="Click here"
+          onPress={onGoBack}
+          size="large"
+          style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
+          Go Back
+        </Button>
+      </View>
+    </CenteredView>
+  )
+}

src/components/GradientFill.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import LinearGradient from 'react-native-linear-gradient'
+
+import {atoms as a, tokens} from '#/alf'
+
+export function GradientFill({
+  gradient,
+}: {
+  gradient:
+    | typeof tokens.gradients.sky
+    | typeof tokens.gradients.midnight
+    | typeof tokens.gradients.sunrise
+    | typeof tokens.gradients.sunset
+    | typeof tokens.gradients.bonfire
+    | typeof tokens.gradients.summer
+    | typeof tokens.gradients.nordic
+}) {
+  return (
+    <LinearGradient
+      colors={gradient.values.map(c => c[1])}
+      locations={gradient.values.map(c => c[0])}
+      start={{x: 0, y: 0}}
+      end={{x: 1, y: 1}}
+      style={[a.absolute, a.inset_0]}
+    />
+  )
+}

src/components/LabelingServiceCard/index.tsx

@@ -0,0 +1,182 @@
+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 {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'
+
+type LabelingServiceProps = {
+  labeler: AppBskyLabelerDefs.LabelerViewDetailed
+}
+
+export function Outer({
+  children,
+  style,
+}: React.PropsWithChildren<ViewStyleProp>) {
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.gap_md,
+        a.w_full,
+        a.p_lg,
+        a.pr_md,
+        a.overflow_hidden,
+        style,
+      ]}>
+      {children}
+    </View>
+  )
+}
+
+export function Avatar({avatar}: {avatar?: string}) {
+  return <UserAvatar type="labeler" size={40} avatar={avatar} />
+}
+
+export function Title({value}: {value: string}) {
+  return <Text style={[a.text_md, a.font_bold]}>{value}</Text>
+}
+
+export function Description({value, handle}: {value?: string; handle: string}) {
+  return value ? (
+    <Text numberOfLines={2}>
+      <RichText value={value} style={[]} />
+    </Text>
+  ) : (
+    <Text>
+      <Trans>By {sanitizeHandle(handle, '@')}</Trans>
+    </Text>
+  )
+}
+
+export function LikeCount({count}: {count: number}) {
+  const t = useTheme()
+  return (
+    <Text
+      style={[
+        a.mt_sm,
+        a.text_sm,
+        t.atoms.text_contrast_medium,
+        {fontWeight: '500'},
+      ]}>
+      <Trans>
+        Liked by {count} {pluralize(count, 'user')}
+      </Trans>
+    </Text>
+  )
+}
+
+export function Content({children}: React.PropsWithChildren<{}>) {
+  const t = useTheme()
+
+  return (
+    <View
+      style={[
+        a.flex_1,
+        a.flex_row,
+        a.gap_md,
+        a.align_center,
+        a.justify_between,
+      ]}>
+      <View style={[a.gap_xs, a.flex_1]}>{children}</View>
+
+      <ChevronRight size="md" style={[a.z_10, t.atoms.text_contrast_low]} />
+    </View>
+  )
+}
+
+/**
+ * The canonical view for a labeling service. Use this or compose your own.
+ */
+export function Default({
+  labeler,
+  style,
+}: LabelingServiceProps & ViewStyleProp) {
+  return (
+    <Outer style={style}>
+      <Avatar avatar={labeler.creator.avatar} />
+      <Content>
+        <Title
+          value={getLabelingServiceTitle({
+            displayName: labeler.creator.displayName,
+            handle: labeler.creator.handle,
+          })}
+        />
+        <Description
+          value={labeler.creator.description}
+          handle={labeler.creator.handle}
+        />
+        {labeler.likeCount ? <LikeCount count={labeler.likeCount} /> : null}
+      </Content>
+    </Outer>
+  )
+}
+
+export function Link({
+  children,
+  labeler,
+}: LabelingServiceProps & Pick<LinkProps, 'children'>) {
+  const {_} = useLingui()
+
+  return (
+    <InternalLink
+      to={{
+        screen: 'Profile',
+        params: {
+          name: labeler.creator.handle,
+        },
+      }}
+      label={_(
+        msg`View the labeling service provided by @${labeler.creator.handle}`,
+      )}>
+      {children}
+    </InternalLink>
+  )
+}
+
+// TODO not finished yet
+export function DefaultSkeleton() {
+  return (
+    <View>
+      <Text>Loading</Text>
+    </View>
+  )
+}
+
+export function Loader({
+  did,
+  loading: LoadingComponent = DefaultSkeleton,
+  error: ErrorComponent,
+  component: Component,
+}: {
+  did: string
+  loading?: React.ComponentType<{}>
+  error?: React.ComponentType<{error: string}>
+  component: React.ComponentType<{
+    labeler: AppBskyLabelerDefs.LabelerViewDetailed
+  }>
+}) {
+  const {isLoading, data, error} = useLabelerInfoQuery({did})
+
+  return isLoading ? (
+    LoadingComponent ? (
+      <LoadingComponent />
+    ) : null
+  ) : error || !data ? (
+    ErrorComponent ? (
+      <ErrorComponent error={error?.message || 'Unknown error'} />
+    ) : null
+  ) : (
+    <Component labeler={data} />
+  )
+}

src/components/LikedByList.tsx

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

src/components/LikesDialog.tsx

@@ -0,0 +1,131 @@
+import React, {useMemo, useCallback} from 'react'
+import {ActivityIndicator, FlatList, View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {AppBskyFeedGetLikes as GetLikes} from '@atproto/api'
+
+import {useResolveUriQuery} from '#/state/queries/resolve-uri'
+import {useLikedByQuery} from '#/state/queries/post-liked-by'
+import {cleanError} from '#/lib/strings/errors'
+import {logger} from '#/logger'
+
+import {atoms as a, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
+import * as Dialog from '#/components/Dialog'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {ProfileCardWithFollowBtn} from '#/view/com/profile/ProfileCard'
+import {Loader} from '#/components/Loader'
+
+interface LikesDialogProps {
+  control: Dialog.DialogOuterProps['control']
+  uri: string
+}
+
+export function LikesDialog(props: LikesDialogProps) {
+  return (
+    <Dialog.Outer control={props.control}>
+      <Dialog.Handle />
+
+      <LikesDialogInner {...props} />
+    </Dialog.Outer>
+  )
+}
+
+export function LikesDialogInner({control, uri}: LikesDialogProps) {
+  const {_} = useLingui()
+  const t = useTheme()
+
+  const {
+    data: resolvedUri,
+    error: resolveError,
+    isFetched: hasFetchedResolvedUri,
+  } = useResolveUriQuery(uri)
+  const {
+    data,
+    isFetching: isFetchingLikedBy,
+    isFetched: hasFetchedLikedBy,
+    isFetchingNextPage,
+    hasNextPage,
+    fetchNextPage,
+    isError,
+    error: likedByError,
+  } = useLikedByQuery(resolvedUri?.uri)
+
+  const isLoading = !hasFetchedResolvedUri || !hasFetchedLikedBy
+  const likes = useMemo(() => {
+    if (data?.pages) {
+      return data.pages.flatMap(page => page.likes)
+    }
+    return []
+  }, [data])
+
+  const onEndReached = useCallback(async () => {
+    if (isFetchingLikedBy || !hasNextPage || isError) return
+    try {
+      await fetchNextPage()
+    } catch (err) {
+      logger.error('Failed to load more likes', {message: err})
+    }
+  }, [isFetchingLikedBy, hasNextPage, isError, fetchNextPage])
+
+  const renderItem = useCallback(
+    ({item}: {item: GetLikes.Like}) => {
+      return (
+        <ProfileCardWithFollowBtn
+          key={item.actor.did}
+          profile={item.actor}
+          onPress={() => control.close()}
+        />
+      )
+    },
+    [control],
+  )
+
+  return (
+    <Dialog.Inner label={_(msg`Users that have liked this content or profile`)}>
+      <Text style={[a.text_2xl, a.font_bold, a.leading_tight, a.pb_lg]}>
+        <Trans>Liked by</Trans>
+      </Text>
+
+      {isLoading ? (
+        <View style={{minHeight: 300}}>
+          <Loader size="xl" />
+        </View>
+      ) : resolveError || likedByError || !data ? (
+        <ErrorMessage message={cleanError(resolveError || likedByError)} />
+      ) : likes.length === 0 ? (
+        <View style={[t.atoms.bg_contrast_50, a.px_md, a.py_xl, a.rounded_md]}>
+          <Text style={[a.text_center]}>
+            <Trans>
+              Nobody has liked this yet. Maybe you should be the first!
+            </Trans>
+          </Text>
+        </View>
+      ) : (
+        <FlatList
+          data={likes}
+          keyExtractor={item => item.actor.did}
+          onEndReached={onEndReached}
+          renderItem={renderItem}
+          initialNumToRender={15}
+          ListFooterComponent={
+            <ListFooterComponent isFetching={isFetchingNextPage} />
+          }
+        />
+      )}
+
+      <Dialog.Close />
+    </Dialog.Inner>
+  )
+}
+
+function ListFooterComponent({isFetching}: {isFetching: boolean}) {
+  if (isFetching) {
+    return (
+      <View style={a.pt_lg}>
+        <ActivityIndicator />
+      </View>
+    )
+  }
+  return null
+}

src/components/Link.tsx

@@ -251,7 +251,7 @@ export function InlineLink({
     onIn: onPressIn,
     onOut: onPressOut,
   } = useInteractionState()
-  const flattenedStyle = flatten(style)
+  const flattenedStyle = flatten(style) || {}
 
   return (
     <Text

src/components/Lists.tsx

@@ -1,26 +1,28 @@
 import React from 'react'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {View} from 'react-native'
+import {useLingui} from '@lingui/react'
+import {Trans, msg} from '@lingui/macro'
+
 import {CenteredView} from 'view/com/util/Views'
 import {Loader} from '#/components/Loader'
-import {Trans} from '@lingui/macro'
 import {cleanError} from 'lib/strings/errors'
 import {Button} from '#/components/Button'
 import {Text} from '#/components/Typography'
-import {StackActions} from '@react-navigation/native'
-import {router} from '#/routes'
-import {useNavigationDeduped} from 'lib/hooks/useNavigationDeduped'
+import {Error} from '#/components/Error'
 
 export function ListFooter({
   isFetching,
   isError,
   error,
   onRetry,
+  height,
 }: {
-  isFetching: boolean
-  isError: boolean
+  isFetching?: boolean
+  isError?: boolean
   error?: string
   onRetry?: () => Promise<unknown>
+  height?: number
 }) {
   const t = useTheme()
 
@@ -29,11 +31,10 @@ export function ListFooter({
       style={[
         a.w_full,
         a.align_center,
-        a.justify_center,
         a.border_t,
         a.pb_lg,
         t.atoms.border_contrast_low,
-        {height: 100},
+        {height: height ?? 180, paddingTop: 30},
       ]}>
       {isFetching ? (
         <Loader size="xl" />
@@ -53,11 +54,12 @@ function ListFooterMaybeError({
   error,
   onRetry,
 }: {
-  isError: boolean
+  isError?: boolean
   error?: string
   onRetry?: () => Promise<unknown>
 }) {
   const t = useTheme()
+  const {_} = useLingui()
 
   if (!isError) return null
 
@@ -83,7 +85,7 @@ function ListFooterMaybeError({
         </Text>
         <Button
           variant="gradient"
-          label="Press to retry"
+          label={_(msg`Press to retry`)}
           style={[
             a.align_center,
             a.justify_center,
@@ -93,7 +95,7 @@ function ListFooterMaybeError({
             a.py_sm,
           ]}
           onPress={onRetry}>
-          Retry
+          <Trans>Retry</Trans>
         </Button>
       </View>
     </View>
@@ -128,121 +130,71 @@ export function ListMaybePlaceholder({
   isLoading,
   isEmpty,
   isError,
-  empty,
-  error,
-  notFoundType = 'page',
+  emptyTitle,
+  emptyMessage,
+  errorTitle,
+  errorMessage,
+  emptyType = 'page',
   onRetry,
 }: {
   isLoading: boolean
-  isEmpty: boolean
-  isError: boolean
-  empty?: string
-  error?: string
-  notFoundType?: 'page' | 'results'
+  isEmpty?: boolean
+  isError?: boolean
+  emptyTitle?: string
+  emptyMessage?: string
+  errorTitle?: string
+  errorMessage?: string
+  emptyType?: 'page' | 'results'
   onRetry?: () => Promise<unknown>
 }) {
-  const navigation = useNavigationDeduped()
   const t = useTheme()
+  const {_} = useLingui()
   const {gtMobile, gtTablet} = useBreakpoints()
 
-  const canGoBack = navigation.canGoBack()
-  const onGoBack = React.useCallback(() => {
-    if (canGoBack) {
-      navigation.goBack()
-    } else {
-      navigation.navigate('HomeTab')
+  if (!isLoading && isError) {
+    return (
+      <Error
+        title={errorTitle ?? _(msg`Oops!`)}
+        message={errorMessage ?? _(`Something went wrong!`)}
+        onRetry={onRetry}
+      />
+    )
+  }
 
-      // Checking the state for routes ensures that web doesn't encounter errors while going back
-      if (navigation.getState()?.routes) {
-        navigation.dispatch(StackActions.push(...router.matchPath('/')))
-      } else {
-        navigation.navigate('HomeTab')
-        navigation.dispatch(StackActions.popToTop())
-      }
-    }
-  }, [navigation, canGoBack])
-
-  if (!isEmpty) return null
-
-  return (
-    <CenteredView
-      style={[
-        a.flex_1,
-        a.align_center,
-        !gtMobile ? a.justify_between : a.gap_5xl,
-        t.atoms.border_contrast_low,
-        {paddingTop: 175, paddingBottom: 110},
-      ]}
-      sideBorders={gtMobile}
-      topBorder={!gtTablet}>
-      {isLoading ? (
+  if (isLoading) {
+    return (
+      <CenteredView
+        style={[
+          a.flex_1,
+          a.align_center,
+          !gtMobile ? a.justify_between : a.gap_5xl,
+          t.atoms.border_contrast_low,
+          {paddingTop: 175, paddingBottom: 110},
+        ]}
+        sideBorders={gtMobile}
+        topBorder={!gtTablet}>
         <View style={[a.w_full, a.align_center, {top: 100}]}>
           <Loader size="xl" />
         </View>
-      ) : (
-        <>
-          <View style={[a.w_full, a.align_center, a.gap_lg]}>
-            <Text style={[a.font_bold, a.text_3xl]}>
-              {isError ? (
-                <Trans>Oops!</Trans>
-              ) : isEmpty ? (
-                <>
-                  {notFoundType === 'results' ? (
-                    <Trans>No results found</Trans>
-                  ) : (
-                    <Trans>Page not found</Trans>
-                  )}
-                </>
-              ) : undefined}
-            </Text>
+      </CenteredView>
+    )
+  }
 
-            {isError ? (
-              <Text
-                style={[a.text_md, a.text_center, t.atoms.text_contrast_high]}>
-                {error ? error : <Trans>Something went wrong!</Trans>}
-              </Text>
-            ) : isEmpty ? (
-              <Text
-                style={[a.text_md, a.text_center, t.atoms.text_contrast_high]}>
-                {empty ? (
-                  empty
-                ) : (
-                  <Trans>
-                    We're sorry! We can't find the page you were looking for.
-                  </Trans>
-                )}
-              </Text>
-            ) : undefined}
-          </View>
-          <View
-            style={[a.gap_md, !gtMobile ? [a.w_full, a.px_lg] : {width: 350}]}>
-            {isError && onRetry && (
-              <Button
-                variant="solid"
-                color="primary"
-                label="Click here"
-                onPress={onRetry}
-                size="large"
-                style={[
-                  a.rounded_sm,
-                  a.overflow_hidden,
-                  {paddingVertical: 10},
-                ]}>
-                Retry
-              </Button>
-            )}
-            <Button
-              variant="solid"
-              color={isError && onRetry ? 'secondary' : 'primary'}
-              label="Click here"
-              onPress={onGoBack}
-              size="large"
-              style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
-              Go Back
-            </Button>
-          </View>
-        </>
-      )}
-    </CenteredView>
-  )
+  if (isEmpty) {
+    return (
+      <Error
+        title={
+          emptyTitle ??
+          (emptyType === 'results'
+            ? _(msg`No results found`)
+            : _(msg`Page not found`))
+        }
+        message={
+          emptyMessage ??
+          _(msg`We're sorry! We can't find the page you were looking for.`)
+        }
+        onRetry={onRetry}
+      />
+    )
+  }
 }

src/components/Menu/index.tsx

@@ -17,7 +17,7 @@ import {
   ItemIconProps,
 } from '#/components/Menu/types'
 import {Button, ButtonText} from '#/components/Button'
-import {msg} from '@lingui/macro'
+import {Trans, msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {isNative} from 'platform/detection'
 
@@ -209,7 +209,9 @@ function Cancel() {
       variant="ghost"
       color="secondary"
       onPress={() => control.close()}>
-      <ButtonText>Cancel</ButtonText>
+      <ButtonText>
+        <Trans>Cancel</Trans>
+      </ButtonText>
     </Button>
   )
 }

src/components/Menu/index.web.tsx

@@ -223,7 +223,7 @@ export function Item({children, label, onPress, ...rest}: ItemProps) {
         style={flatten([
           a.flex_row,
           a.align_center,
-          a.gap_sm,
+          a.gap_lg,
           a.py_sm,
           a.rounded_xs,
           {minHeight: 32, paddingHorizontal: 10},

src/components/ReportDialog/SelectLabelerView.tsx

@@ -0,0 +1,92 @@
+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'
+
+export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
+import {getLabelingServiceTitle} from '#/lib/moderation'
+
+import {atoms as a, useTheme, useBreakpoints} from '#/alf'
+import {Text} from '#/components/Typography'
+import {Button, useButtonContext} from '#/components/Button'
+import {Divider} from '#/components/Divider'
+import * as LabelingServiceCard from '#/components/LabelingServiceCard'
+
+import {ReportDialogProps} from './types'
+
+export function SelectLabelerView({
+  ...props
+}: ReportDialogProps & {
+  labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
+  onSelectLabeler: (v: string) => void
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
+
+  return (
+    <View style={[a.gap_lg]}>
+      <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
+        <Text style={[a.text_2xl, a.font_bold]}>
+          <Trans>Select moderator</Trans>
+        </Text>
+        <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
+          <Trans>To whom would you like to send this report?</Trans>
+        </Text>
+      </View>
+
+      <Divider />
+
+      <View style={[a.gap_xs, {marginHorizontal: a.p_md.padding * -1}]}>
+        {props.labelers.map(labeler => {
+          return (
+            <Button
+              key={labeler.creator.did}
+              label={_(msg`Send report to ${labeler.creator.displayName}`)}
+              onPress={() => props.onSelectLabeler(labeler.creator.did)}>
+              <LabelerButton labeler={labeler} />
+            </Button>
+          )
+        })}
+      </View>
+    </View>
+  )
+}
+
+function LabelerButton({
+  labeler,
+}: {
+  labeler: AppBskyLabelerDefs.LabelerViewDetailed
+}) {
+  const t = useTheme()
+  const {hovered, pressed} = useButtonContext()
+  const interacted = hovered || pressed
+
+  const styles = React.useMemo(() => {
+    return {
+      interacted: {
+        backgroundColor: t.palette.contrast_50,
+      },
+    }
+  }, [t])
+
+  return (
+    <LabelingServiceCard.Outer
+      style={[a.p_md, a.rounded_sm, interacted && styles.interacted]}>
+      <LabelingServiceCard.Avatar avatar={labeler.creator.avatar} />
+      <LabelingServiceCard.Content>
+        <LabelingServiceCard.Title
+          value={getLabelingServiceTitle({
+            displayName: labeler.creator.displayName,
+            handle: labeler.creator.handle,
+          })}
+        />
+        <Text
+          style={[t.atoms.text_contrast_medium, a.text_sm, a.font_semibold]}>
+          @{labeler.creator.handle}
+        </Text>
+      </LabelingServiceCard.Content>
+    </LabelingServiceCard.Outer>
+  )
+}

src/components/ReportDialog/SelectReportOptionView.tsx

@@ -0,0 +1,200 @@
+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 {useReportOptions, ReportOption} from '#/lib/moderation/useReportOptions'
+import {DMCA_LINK} from '#/components/ReportDialog/const'
+import {Link} from '#/components/Link'
+export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
+
+import {atoms as a, useTheme, useBreakpoints} from '#/alf'
+import {Text} from '#/components/Typography'
+import {
+  Button,
+  ButtonIcon,
+  ButtonText,
+  useButtonContext,
+} from '#/components/Button'
+import {Divider} from '#/components/Divider'
+import {
+  ChevronRight_Stroke2_Corner0_Rounded as ChevronRight,
+  ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft,
+} from '#/components/icons/Chevron'
+import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from '#/components/icons/SquareArrowTopRight'
+
+import {ReportDialogProps} from './types'
+
+export function SelectReportOptionView({
+  ...props
+}: ReportDialogProps & {
+  labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
+  onSelectReportOption: (reportOption: ReportOption) => void
+  goBack: () => void
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
+  const allReportOptions = useReportOptions()
+  const reportOptions = allReportOptions[props.params.type]
+
+  const i18n = React.useMemo(() => {
+    let title = _(msg`Report this content`)
+    let description = _(msg`Why should this content be reviewed?`)
+
+    if (props.params.type === 'account') {
+      title = _(msg`Report this user`)
+      description = _(msg`Why should this user be reviewed?`)
+    } else if (props.params.type === 'post') {
+      title = _(msg`Report this post`)
+      description = _(msg`Why should this post be reviewed?`)
+    } else if (props.params.type === 'list') {
+      title = _(msg`Report this list`)
+      description = _(msg`Why should this list be reviewed?`)
+    } else if (props.params.type === 'feedgen') {
+      title = _(msg`Report this feed`)
+      description = _(msg`Why should this feed be reviewed?`)
+    }
+
+    return {
+      title,
+      description,
+    }
+  }, [_, props.params.type])
+
+  return (
+    <View style={[a.gap_lg]}>
+      {props.labelers?.length > 1 ? (
+        <Button
+          size="small"
+          variant="solid"
+          color="secondary"
+          shape="round"
+          label={_(msg`Go back to previous step`)}
+          onPress={props.goBack}>
+          <ButtonIcon icon={ChevronLeft} />
+        </Button>
+      ) : null}
+
+      <View style={[a.justify_center, gtMobile ? a.gap_sm : a.gap_xs]}>
+        <Text style={[a.text_2xl, a.font_bold]}>{i18n.title}</Text>
+        <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
+          {i18n.description}
+        </Text>
+      </View>
+
+      <Divider />
+
+      <View style={[a.gap_sm, {marginHorizontal: a.p_md.padding * -1}]}>
+        {reportOptions.map(reportOption => {
+          return (
+            <Button
+              key={reportOption.reason}
+              label={_(msg`Create report for ${reportOption.title}`)}
+              onPress={() => props.onSelectReportOption(reportOption)}>
+              <ReportOptionButton
+                title={reportOption.title}
+                description={reportOption.description}
+              />
+            </Button>
+          )
+        })}
+
+        {(props.params.type === 'post' || props.params.type === 'account') && (
+          <View style={[a.pt_md, a.px_md]}>
+            <View
+              style={[
+                a.flex_row,
+                a.align_center,
+                a.justify_between,
+                a.gap_lg,
+                a.p_md,
+                a.pl_lg,
+                a.rounded_md,
+                t.atoms.bg_contrast_900,
+              ]}>
+              <Text
+                style={[
+                  a.flex_1,
+                  t.atoms.text_inverted,
+                  a.italic,
+                  a.leading_snug,
+                ]}>
+                <Trans>Need to report a copyright violation?</Trans>
+              </Text>
+              <Link
+                to={DMCA_LINK}
+                label={_(msg`View details for reporting a copyright violation`)}
+                size="small"
+                variant="solid"
+                color="secondary">
+                <ButtonText>
+                  <Trans>View details</Trans>
+                </ButtonText>
+                <ButtonIcon position="right" icon={SquareArrowTopRight} />
+              </Link>
+            </View>
+          </View>
+        )}
+      </View>
+    </View>
+  )
+}
+
+function ReportOptionButton({
+  title,
+  description,
+}: {
+  title: string
+  description: string
+}) {
+  const t = useTheme()
+  const {hovered, pressed} = useButtonContext()
+  const interacted = hovered || pressed
+
+  const styles = React.useMemo(() => {
+    return {
+      interacted: {
+        backgroundColor: t.palette.contrast_50,
+      },
+    }
+  }, [t])
+
+  return (
+    <View
+      style={[
+        a.w_full,
+        a.flex_row,
+        a.align_center,
+        a.justify_between,
+        a.p_md,
+        a.rounded_md,
+        {paddingRight: 70},
+        interacted && styles.interacted,
+      ]}>
+      <View style={[a.flex_1, a.gap_xs]}>
+        <Text style={[a.text_md, a.font_bold, t.atoms.text_contrast_medium]}>
+          {title}
+        </Text>
+        <Text style={[a.leading_tight, {maxWidth: 400}]}>{description}</Text>
+      </View>
+
+      <View
+        style={[
+          a.absolute,
+          a.inset_0,
+          a.justify_center,
+          a.pr_md,
+          {left: 'auto'},
+        ]}>
+        <ChevronRight
+          size="md"
+          fill={
+            hovered ? t.palette.primary_500 : t.atoms.text_contrast_low.color
+          }
+        />
+      </View>
+    </View>
+  )
+}

src/components/ReportDialog/SubmitView.tsx

@@ -0,0 +1,264 @@
+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 {getLabelingServiceTitle} from '#/lib/moderation'
+import {ReportOption} from '#/lib/moderation/useReportOptions'
+
+import {atoms as a, useTheme, native} from '#/alf'
+import {Text} from '#/components/Typography'
+import * as Dialog from '#/components/Dialog'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {ChevronLeft_Stroke2_Corner0_Rounded as ChevronLeft} from '#/components/icons/Chevron'
+import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import * as Toggle from '#/components/forms/Toggle'
+import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
+import {Loader} from '#/components/Loader'
+import * as Toast from '#/view/com/util/Toast'
+
+import {ReportDialogProps} from './types'
+import {getAgent} from '#/state/session'
+
+export function SubmitView({
+  params,
+  labelers,
+  selectedLabeler,
+  selectedReportOption,
+  goBack,
+  onSubmitComplete,
+}: ReportDialogProps & {
+  labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
+  selectedLabeler: string
+  selectedReportOption: ReportOption
+  goBack: () => void
+  onSubmitComplete: () => void
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const [details, setDetails] = React.useState<string>('')
+  const [submitting, setSubmitting] = React.useState<boolean>(false)
+  const [selectedServices, setSelectedServices] = React.useState<string[]>([
+    selectedLabeler,
+  ])
+  const [error, setError] = React.useState('')
+
+  const submit = React.useCallback(async () => {
+    setSubmitting(true)
+    setError('')
+
+    const $type =
+      params.type === 'account'
+        ? 'com.atproto.admin.defs#repoRef'
+        : 'com.atproto.repo.strongRef'
+    const report = {
+      reasonType: selectedReportOption.reason,
+      subject: {
+        $type,
+        ...params,
+      },
+      reason: details,
+    }
+    const results = await Promise.all(
+      selectedServices.map(did =>
+        getAgent()
+          .withProxy('atproto_labeler', did)
+          .createModerationReport(report)
+          .then(
+            _ => true,
+            _ => false,
+          ),
+      ),
+    )
+
+    setSubmitting(false)
+
+    if (results.includes(true)) {
+      Toast.show(_(msg`Thank you. Your report has been sent.`))
+      onSubmitComplete()
+    } else {
+      setError(
+        _(
+          msg`There was an issue sending your report. Please check your internet connection.`,
+        ),
+      )
+    }
+  }, [
+    _,
+    params,
+    details,
+    selectedReportOption,
+    selectedServices,
+    onSubmitComplete,
+    setError,
+  ])
+
+  return (
+    <View style={[a.gap_2xl]}>
+      <Button
+        size="small"
+        variant="solid"
+        color="secondary"
+        shape="round"
+        label={_(msg`Go back to previous step`)}
+        onPress={goBack}>
+        <ButtonIcon icon={ChevronLeft} />
+      </Button>
+
+      <View
+        style={[
+          a.w_full,
+          a.flex_row,
+          a.align_center,
+          a.justify_between,
+          a.gap_lg,
+          a.p_md,
+          a.rounded_md,
+          a.border,
+          t.atoms.border_contrast_low,
+        ]}>
+        <View style={[a.flex_1, a.gap_xs]}>
+          <Text style={[a.text_md, a.font_bold]}>
+            {selectedReportOption.title}
+          </Text>
+          <Text style={[a.leading_tight, {maxWidth: 400}]}>
+            {selectedReportOption.description}
+          </Text>
+        </View>
+
+        <Check size="md" style={[a.pr_sm, t.atoms.text_contrast_low]} />
+      </View>
+
+      <View style={[a.gap_md]}>
+        <Text style={[t.atoms.text_contrast_medium]}>
+          <Trans>Select the moderation service(s) to report to</Trans>
+        </Text>
+
+        <Toggle.Group
+          label="Select mod services"
+          values={selectedServices}
+          onChange={setSelectedServices}>
+          <View style={[a.flex_row, a.gap_md, a.flex_wrap]}>
+            {labelers.map(labeler => {
+              const title = getLabelingServiceTitle({
+                displayName: labeler.creator.displayName,
+                handle: labeler.creator.handle,
+              })
+              return (
+                <Toggle.Item
+                  key={labeler.creator.did}
+                  name={labeler.creator.did}
+                  label={title}>
+                  <LabelerToggle title={title} />
+                </Toggle.Item>
+              )
+            })}
+          </View>
+        </Toggle.Group>
+      </View>
+      <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]}>
+        {!selectedServices.length ||
+          (error && (
+            <Text
+              style={[
+                a.flex_1,
+                a.italic,
+                a.leading_snug,
+                t.atoms.text_contrast_medium,
+              ]}>
+              {error ? (
+                error
+              ) : (
+                <Trans>You must select at least one labeler for a report</Trans>
+              )}
+            </Text>
+          ))}
+
+        <Button
+          size="large"
+          variant="solid"
+          color="negative"
+          label={_(msg`Send report`)}
+          onPress={submit}
+          disabled={!selectedServices.length}>
+          <ButtonText>
+            <Trans>Send report</Trans>
+          </ButtonText>
+          {submitting && <ButtonIcon icon={Loader} />}
+        </Button>
+      </View>
+    </View>
+  )
+}
+
+function LabelerToggle({title}: {title: string}) {
+  const t = useTheme()
+  const ctx = Toggle.useItemContext()
+
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.align_center,
+        a.gap_md,
+        a.p_md,
+        a.pr_lg,
+        a.rounded_sm,
+        a.overflow_hidden,
+        t.atoms.bg_contrast_25,
+        ctx.selected && [t.atoms.bg_contrast_50],
+      ]}>
+      <Toggle.Checkbox />
+      <View
+        style={[
+          a.flex_row,
+          a.align_center,
+          a.justify_between,
+          a.gap_lg,
+          a.z_10,
+        ]}>
+        <Text
+          style={[
+            native({marginTop: 2}),
+            t.atoms.text_contrast_medium,
+            ctx.selected && t.atoms.text,
+          ]}>
+          {title}
+        </Text>
+      </View>
+    </View>
+  )
+}

src/components/ReportDialog/const.ts

@@ -0,0 +1 @@
+export const DMCA_LINK = 'https://bsky.social/about/support/copyright'

src/components/ReportDialog/index.tsx

@@ -0,0 +1,95 @@
+import React from 'react'
+import {View, Pressable} from 'react-native'
+import {Trans} from '@lingui/macro'
+
+import {useMyLabelersQuery} from '#/state/queries/preferences'
+import {ReportOption} from '#/lib/moderation/useReportOptions'
+export {useDialogControl as useReportDialogControl} from '#/components/Dialog'
+
+import {atoms as a} from '#/alf'
+import {Loader} from '#/components/Loader'
+import * as Dialog from '#/components/Dialog'
+import {Text} from '#/components/Typography'
+
+import {ReportDialogProps} from './types'
+import {SelectLabelerView} from './SelectLabelerView'
+import {SelectReportOptionView} from './SelectReportOptionView'
+import {SubmitView} from './SubmitView'
+import {useDelayedLoading} from '#/components/hooks/useDelayedLoading'
+import {AppBskyLabelerDefs} from '@atproto/api'
+
+export function ReportDialog(props: ReportDialogProps) {
+  return (
+    <Dialog.Outer control={props.control}>
+      <Dialog.Handle />
+
+      <ReportDialogInner {...props} />
+    </Dialog.Outer>
+  )
+}
+
+function ReportDialogInner(props: ReportDialogProps) {
+  const {
+    isLoading: isLabelerLoading,
+    data: labelers,
+    error,
+  } = useMyLabelersQuery()
+  const isLoading = useDelayedLoading(500, isLabelerLoading)
+
+  return (
+    <Dialog.ScrollableInner label="Report Dialog">
+      {isLoading ? (
+        <View style={[a.align_center, {height: 100}]}>
+          <Loader size="xl" />
+          {/* Here to capture focus for a hot sec to prevent flash */}
+          <Pressable accessible={false} />
+        </View>
+      ) : error || !labelers ? (
+        <View>
+          <Text style={[a.text_md]}>
+            <Trans>Something went wrong, please try again.</Trans>
+          </Text>
+        </View>
+      ) : (
+        <ReportDialogLoaded labelers={labelers} {...props} />
+      )}
+
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
+  )
+}
+
+function ReportDialogLoaded(
+  props: ReportDialogProps & {
+    labelers: AppBskyLabelerDefs.LabelerViewDetailed[]
+  },
+) {
+  const [selectedLabeler, setSelectedLabeler] = React.useState<
+    string | undefined
+  >(props.labelers.length === 1 ? props.labelers[0].creator.did : undefined)
+  const [selectedReportOption, setSelectedReportOption] = React.useState<
+    ReportOption | undefined
+  >()
+
+  if (selectedReportOption && selectedLabeler) {
+    return (
+      <SubmitView
+        {...props}
+        selectedLabeler={selectedLabeler}
+        selectedReportOption={selectedReportOption}
+        goBack={() => setSelectedReportOption(undefined)}
+        onSubmitComplete={() => props.control.close()}
+      />
+    )
+  }
+  if (selectedLabeler) {
+    return (
+      <SelectReportOptionView
+        {...props}
+        goBack={() => setSelectedLabeler(undefined)}
+        onSelectReportOption={setSelectedReportOption}
+      />
+    )
+  }
+  return <SelectLabelerView {...props} onSelectLabeler={setSelectedLabeler} />
+}

src/components/ReportDialog/types.ts

@@ -0,0 +1,15 @@
+import * as Dialog from '#/components/Dialog'
+
+export type ReportDialogProps = {
+  control: Dialog.DialogOuterProps['control']
+  params:
+    | {
+        type: 'post' | 'list' | 'feedgen' | 'other'
+        uri: string
+        cid: string
+      }
+    | {
+        type: 'account'
+        did: string
+      }
+}

src/components/TagMenu/index.tsx

@@ -59,7 +59,7 @@ export function TagMenu({
   const displayTag = '#' + tag
 
   const isMuted = Boolean(
-    (preferences?.mutedWords?.find(
+    (preferences?.moderationPrefs.mutedWords?.find(
       m => m.value === tag && m.targets.includes('tag'),
     ) ??
       optimisticUpsert?.find(
@@ -264,7 +264,9 @@ export function TagMenu({
                 variant="ghost"
                 color="secondary"
                 onPress={() => control.close()}>
-                <ButtonText>Cancel</ButtonText>
+                <ButtonText>
+                  <Trans>Cancel</Trans>
+                </ButtonText>
               </Button>
             </>
           )}

src/components/TagMenu/index.web.tsx

@@ -50,7 +50,7 @@ export function TagMenu({
   const {mutateAsync: removeMutedWord, variables: optimisticRemove} =
     useRemoveMutedWordMutation()
   const isMuted = Boolean(
-    (preferences?.mutedWords?.find(
+    (preferences?.moderationPrefs.mutedWords?.find(
       m => m.value === tag && m.targets.includes('tag'),
     ) ??
       optimisticUpsert?.find(

src/components/Typography.tsx

@@ -1,5 +1,10 @@
 import React from 'react'
-import {Text as RNText, TextStyle, TextProps as RNTextProps} from 'react-native'
+import {
+  Text as RNText,
+  StyleProp,
+  TextStyle,
+  TextProps as RNTextProps,
+} from 'react-native'
 import {UITextView} from 'react-native-ui-text-view'
 
 import {useTheme, atoms, web, flatten} from '#/alf'
@@ -34,7 +39,7 @@ export function leading<
  * If the `lineHeight` value is > 2, we assume it's an absolute value and
  * returns it as-is.
  */
-function normalizeTextStyles(styles: TextStyle[]) {
+export function normalizeTextStyles(styles: StyleProp<TextStyle>) {
   const s = flatten(styles)
   // should always be defined on these components
   const fontSize = s.fontSize || atoms.text_md.fontSize

src/components/dialogs/BirthDateSettings.tsx

@@ -1,48 +1,64 @@
 import React from 'react'
 import {useLingui} from '@lingui/react'
 import {Trans, msg} from '@lingui/macro'
+import {View} from 'react-native'
 
 import * as Dialog from '#/components/Dialog'
 import {Text} from '../Typography'
 import {DateInput} from '#/view/com/util/forms/DateInput'
 import {logger} from '#/logger'
 import {
+  usePreferencesQuery,
   usePreferencesSetBirthDateMutation,
   UsePreferencesQueryResponse,
 } from '#/state/queries/preferences'
-import {Button, ButtonText} from '../Button'
+import {Button, ButtonIcon, ButtonText} from '../Button'
 import {atoms as a, useTheme} from '#/alf'
 import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
 import {cleanError} from '#/lib/strings/errors'
-import {ActivityIndicator, View} from 'react-native'
 import {isIOS, isWeb} from '#/platform/detection'
+import {Loader} from '#/components/Loader'
 
 export function BirthDateSettingsDialog({
   control,
-  preferences,
 }: {
   control: Dialog.DialogControlProps
-  preferences: UsePreferencesQueryResponse | undefined
 }) {
+  const t = useTheme()
   const {_} = useLingui()
-  const {isPending, isError, error, mutateAsync} =
-    usePreferencesSetBirthDateMutation()
+  const {isLoading, error, data: preferences} = usePreferencesQuery()
 
   return (
     <Dialog.Outer control={control}>
       <Dialog.Handle />
+
       <Dialog.ScrollableInner label={_(msg`My Birthday`)}>
-        {preferences && !isPending ? (
-          <BirthdayInner
-            control={control}
-            preferences={preferences}
-            isError={isError}
-            error={error}
-            setBirthDate={mutateAsync}
+        <View style={[a.gap_sm, a.pb_lg]}>
+          <Text style={[a.text_2xl, a.font_bold]}>
+            <Trans>My Birthday</Trans>
+          </Text>
+          <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
+            <Trans>This information is not shared with other users.</Trans>
+          </Text>
+        </View>
+
+        {isLoading ? (
+          <Loader size="xl" />
+        ) : error || !preferences ? (
+          <ErrorMessage
+            message={
+              error?.toString() ||
+              _(
+                msg`We were unable to load your birth date preferences. Please try again.`,
+              )
+            }
+            style={[a.rounded_sm]}
           />
         ) : (
-          <ActivityIndicator size="large" style={a.my_5xl} />
+          <BirthdayInner control={control} preferences={preferences} />
         )}
+
+        <Dialog.Close />
       </Dialog.ScrollableInner>
     </Dialog.Outer>
   )
@@ -51,20 +67,18 @@ export function BirthDateSettingsDialog({
 function BirthdayInner({
   control,
   preferences,
-  isError,
-  error,
-  setBirthDate,
 }: {
   control: Dialog.DialogControlProps
   preferences: UsePreferencesQueryResponse
-  isError: boolean
-  error: unknown
-  setBirthDate: (args: {birthDate: Date}) => Promise<unknown>
 }) {
   const {_} = useLingui()
   const [date, setDate] = React.useState(preferences.birthDate || new Date())
-  const t = useTheme()
-
+  const {
+    isPending,
+    isError,
+    error,
+    mutateAsync: setBirthDate,
+  } = usePreferencesSetBirthDateMutation()
   const hasChanged = date !== preferences.birthDate
 
   const onSave = React.useCallback(async () => {
@@ -74,21 +88,13 @@ function BirthdayInner({
         await setBirthDate({birthDate: date})
       }
       control.close()
-    } catch (e) {
-      logger.error(`setBirthDate failed`, {message: e})
+    } catch (e: any) {
+      logger.error(`setBirthDate failed`, {message: e.message})
     }
   }, [date, setBirthDate, control, hasChanged])
 
   return (
     <View style={a.gap_lg} testID="birthDateSettingsDialog">
-      <View style={[a.gap_sm]}>
-        <Text style={[a.text_2xl, a.font_bold]}>
-          <Trans>My Birthday</Trans>
-        </Text>
-        <Text style={t.atoms.text_contrast_medium}>
-          <Trans>This information is not shared with other users.</Trans>
-        </Text>
-      </View>
       <View style={isIOS && [a.w_full, a.align_center]}>
         <DateInput
           handleAsUTC
@@ -103,6 +109,7 @@ function BirthdayInner({
           accessibilityLabelledBy="birthDate"
         />
       </View>
+
       {isError ? (
         <ErrorMessage message={cleanError(error)} style={[a.rounded_sm]} />
       ) : undefined}
@@ -110,13 +117,14 @@ function BirthdayInner({
       <View style={isWeb && [a.flex_row, a.justify_end]}>
         <Button
           label={hasChanged ? _(msg`Save birthday`) : _(msg`Done`)}
-          size={isWeb ? 'small' : 'medium'}
+          size="medium"
           onPress={onSave}
           variant="solid"
           color="primary">
           <ButtonText>
             {hasChanged ? <Trans>Save</Trans> : <Trans>Done</Trans>}
           </ButtonText>
+          {isPending && <ButtonIcon icon={Loader} />}
         </Button>
       </View>
     </View>

src/components/dialogs/Context.tsx

@@ -18,7 +18,7 @@ export function useGlobalDialogsControlContext() {
 
 export function Provider({children}: React.PropsWithChildren<{}>) {
   const mutedWordsDialogControl = Dialog.useDialogControl()
-  const ctx = React.useMemo(
+  const ctx = React.useMemo<ControlsContext>(
     () => ({mutedWordsDialogControl}),
     [mutedWordsDialogControl],
   )

src/components/dialogs/MutedWords.tsx

@@ -233,8 +233,8 @@ function MutedWordsInner({}: {control: Dialog.DialogOuterProps['control']}) {
                 </Trans>
               </Text>
             </View>
-          ) : preferences.mutedWords.length ? (
-            [...preferences.mutedWords]
+          ) : preferences.moderationPrefs.mutedWords.length ? (
+            [...preferences.moderationPrefs.mutedWords]
               .reverse()
               .map((word, i) => (
                 <MutedWordRow

src/components/forms/Toggle.tsx

@@ -2,7 +2,14 @@ import React from 'react'
 import {Pressable, View, ViewStyle} from 'react-native'
 
 import {HITSLOP_10} from 'lib/constants'
-import {useTheme, atoms as a, web, native, flatten, ViewStyleProp} from '#/alf'
+import {
+  useTheme,
+  atoms as a,
+  native,
+  flatten,
+  ViewStyleProp,
+  TextStyleProp,
+} from '#/alf'
 import {Text} from '#/components/Typography'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {CheckThick_Stroke2_Corner0_Rounded as Checkmark} from '#/components/icons/Check'
@@ -220,20 +227,17 @@ export function Item({
         onPressOut={onPressOut}
         onFocus={onFocus}
         onBlur={onBlur}
-        style={[
-          a.flex_row,
-          a.align_center,
-          a.gap_sm,
-          focused ? web({outline: 'none'}) : {},
-          flatten(style),
-        ]}>
+        style={[a.flex_row, a.align_center, a.gap_sm, flatten(style)]}>
         {typeof children === 'function' ? children(state) : children}
       </Pressable>
     </ItemContext.Provider>
   )
 }
 
-export function Label({children}: React.PropsWithChildren<{}>) {
+export function Label({
+  children,
+  style,
+}: React.PropsWithChildren<TextStyleProp>) {
   const t = useTheme()
   const {disabled} = useItemContext()
   return (
@@ -242,11 +246,14 @@ export function Label({children}: React.PropsWithChildren<{}>) {
         a.font_bold,
         {
           userSelect: 'none',
-          color: disabled ? t.palette.contrast_400 : t.palette.contrast_600,
+          color: disabled
+            ? t.atoms.text_contrast_low.color
+            : t.atoms.text_contrast_high.color,
         },
         native({
           paddingTop: 3,
         }),
+        flatten(style),
       ]}>
       {children}
     </Text>
@@ -257,7 +264,6 @@ export function Label({children}: React.PropsWithChildren<{}>) {
 export function createSharedToggleStyles({
   theme: t,
   hovered,
-  focused,
   selected,
   disabled,
   isInvalid,
@@ -280,7 +286,7 @@ export function createSharedToggleStyles({
       borderColor: t.palette.primary_500,
     })
 
-    if (hovered || focused) {
+    if (hovered) {
       baseHover.push({
         backgroundColor:
           t.name === 'light' ? t.palette.primary_100 : t.palette.primary_800,
@@ -289,7 +295,7 @@ export function createSharedToggleStyles({
       })
     }
   } else {
-    if (hovered || focused) {
+    if (hovered) {
       baseHover.push({
         backgroundColor:
           t.name === 'light' ? t.palette.contrast_50 : t.palette.contrast_100,
@@ -306,7 +312,7 @@ export function createSharedToggleStyles({
         t.name === 'light' ? t.palette.negative_300 : t.palette.negative_800,
     })
 
-    if (hovered || focused) {
+    if (hovered) {
       baseHover.push({
         backgroundColor:
           t.name === 'light' ? t.palette.negative_25 : t.palette.negative_900,
@@ -353,7 +359,7 @@ export function Checkbox() {
           width: 20,
         },
         baseStyles,
-        hovered || focused ? baseHoverStyles : {},
+        hovered ? baseHoverStyles : {},
       ]}>
       {selected ? <Checkmark size="xs" fill={t.palette.primary_500} /> : null}
     </View>
@@ -385,7 +391,7 @@ export function Switch() {
           width: 30,
         },
         baseStyles,
-        hovered || focused ? baseHoverStyles : {},
+        hovered ? baseHoverStyles : {},
       ]}>
       <View
         style={[
@@ -437,7 +443,7 @@ export function Radio() {
           width: 20,
         },
         baseStyles,
-        hovered || focused ? baseHoverStyles : {},
+        hovered ? baseHoverStyles : {},
       ]}>
       {selected ? (
         <View

src/components/forms/ToggleButton.tsx

@@ -8,7 +8,9 @@ import * as Toggle from '#/components/forms/Toggle'
 
 export type ItemProps = Omit<Toggle.ItemProps, 'style' | 'role' | 'children'> &
   AccessibilityProps &
-  React.PropsWithChildren<{testID?: string}>
+  React.PropsWithChildren<{
+    testID?: string
+  }>
 
 export type GroupProps = Omit<Toggle.GroupProps, 'style' | 'type'> & {
   multiple?: boolean
@@ -101,12 +103,12 @@ function ButtonInner({children}: React.PropsWithChildren<{}>) {
         native({
           paddingBottom: 10,
         }),
-        a.px_sm,
+        a.px_md,
         t.atoms.bg,
         t.atoms.border_contrast_low,
         baseStyles,
         activeStyles,
-        (state.hovered || state.focused || state.pressed) && hoverStyles,
+        (state.hovered || state.pressed) && hoverStyles,
       ]}>
       {typeof children === 'string' ? (
         <Text

src/components/hooks/useDelayedLoading.ts

@@ -0,0 +1,15 @@
+import React from 'react'
+
+export function useDelayedLoading(delay: number, initialState: boolean = true) {
+  const [isLoading, setIsLoading] = React.useState(initialState)
+
+  React.useEffect(() => {
+    let timeout: NodeJS.Timeout
+    // on initial load, show a loading spinner for a hot sec to prevent flash
+    if (isLoading) timeout = setTimeout(() => setIsLoading(false), delay)
+
+    return () => timeout && clearTimeout(timeout)
+  }, [isLoading, delay])
+
+  return isLoading
+}

src/components/icons/ArrowTriangle.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const ArrowTriangleBottom_Stroke2_Corner1_Rounded = createSinglePathSVG({
+  path: 'M4.213 6.886c-.673-1.35.334-2.889 1.806-2.889H17.98c1.472 0 2.479 1.539 1.806 2.89l-5.982 11.997c-.74 1.484-2.87 1.484-3.61 0L4.213 6.886Z',
+})

src/components/icons/Bars.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Bars3_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3 5a1 1 0 0 0 0 2h18a1 1 0 1 0 0-2H3Zm-1 7a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Zm0 6a1 1 0 0 1 1-1h18a1 1 0 1 1 0 2H3a1 1 0 0 1-1-1Z',
+})

src/components/icons/Chevron.tsx

@@ -7,3 +7,11 @@ export const ChevronLeft_Stroke2_Corner0_Rounded = createSinglePathSVG({
 export const ChevronRight_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M8.293 3.293a1 1 0 0 1 1.414 0l8 8a1 1 0 0 1 0 1.414l-8 8a1 1 0 0 1-1.414-1.414L15.586 12 8.293 4.707a1 1 0 0 1 0-1.414Z',
 })
+
+export const ChevronTop_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 6a1 1 0 0 1 .707.293l8 8a1 1 0 0 1-1.414 1.414L12 8.414l-7.293 7.293a1 1 0 0 1-1.414-1.414l8-8A1 1 0 0 1 12 6Z',
+})
+
+export const ChevronBottom_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3.293 8.293a1 1 0 0 1 1.414 0L12 15.586l7.293-7.293a1 1 0 1 1 1.414 1.414l-8 8a1 1 0 0 1-1.414 0l-8-8a1 1 0 0 1 0-1.414Z',
+})

src/components/icons/CircleBanSign.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const CircleBanSign_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M12 4a8 8 0 0 0-6.32 12.906L16.906 5.68A7.962 7.962 0 0 0 12 4Zm6.32 3.094L7.094 18.32A8 8 0 0 0 18.32 7.094ZM2 12C2 6.477 6.477 2 12 2a9.972 9.972 0 0 1 7.071 2.929A9.972 9.972 0 0 1 22 12c0 5.523-4.477 10-10 10a9.972 9.972 0 0 1-7.071-2.929A9.972 9.972 0 0 1 2 12Z',
+})

src/components/icons/Gear.tsx

@@ -0,0 +1,5 @@
+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',
+})

src/components/icons/RaisingHand.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const RaisingHande4Finger_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M10.25 4a.75.75 0 0 0-.75.75V11a1 1 0 1 1-2 0V6.75a.75.75 0 0 0-1.5 0V14a6 6 0 0 0 12 0V9a2 2 0 0 0-2 2v1.5a1 1 0 0 1-.684.949l-.628.21A2.469 2.469 0 0 0 13 16a1 1 0 1 1-2 0 4.469 4.469 0 0 1 3-4.22V11c0-.703.181-1.364.5-1.938V5.75a.75.75 0 0 0-1.5 0V9a1 1 0 1 1-2 0V4.75a.75.75 0 0 0-.75-.75Zm2.316-.733A2.75 2.75 0 0 1 16.5 5.75v1.54c.463-.187.97-.29 1.5-.29h1a1 1 0 0 1 1 1v6a8 8 0 1 1-16 0V6.75a2.75 2.75 0 0 1 3.571-2.625 2.751 2.751 0 0 1 4.995-.858Z',
+})

src/components/icons/Shield.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Shield_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M11.675 2.054a1 1 0 0 1 .65 0l8 2.75A1 1 0 0 1 21 5.75v6.162c0 2.807-1.149 4.83-2.813 6.405-1.572 1.488-3.632 2.6-5.555 3.636l-.157.085a1 1 0 0 1-.95 0l-.157-.085c-1.923-1.037-3.983-2.148-5.556-3.636C4.15 16.742 3 14.719 3 11.912V5.75a1 1 0 0 1 .675-.946l8-2.75ZM5 6.464v5.448c0 2.166.851 3.687 2.188 4.952 1.276 1.209 2.964 2.158 4.812 3.157 1.848-1 3.536-1.948 4.813-3.157C18.148 15.6 19 14.078 19 11.912V6.464l-7-2.407-7 2.407Z',
+})

src/components/icons/SquareArrowTopRight.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const SquareArrowTopRight_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M14 5a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V6.414l-7.293 7.293a1 1 0 0 1-1.414-1.414L17.586 5H14ZM3 6a1 1 0 0 1 1-1h5a1 1 0 0 1 0 2H5v12h12v-4a1 1 0 1 1 2 0v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V6Z',
+})

src/components/icons/SquareBehindSquare4.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const SquareBehindSquare4_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M8 8V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-5v5a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h5Zm1 8a1 1 0 0 1-1-1v-5H4v10h10v-4H9Z',
+})

src/components/moderation/ContentHider.tsx

@@ -0,0 +1,182 @@
+import React from 'react'
+import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
+import {ModerationUI} from '@atproto/api'
+import {useLingui} from '@lingui/react'
+import {msg, Trans} from '@lingui/macro'
+
+import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
+import {isJustAMute} from '#/lib/moderation'
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
+
+import {atoms as a, useTheme, useBreakpoints, web} from '#/alf'
+import {Button} from '#/components/Button'
+import {Text} from '#/components/Typography'
+import {
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/moderation/ModerationDetailsDialog'
+
+export function ContentHider({
+  testID,
+  modui,
+  ignoreMute,
+  style,
+  childContainerStyle,
+  children,
+}: React.PropsWithChildren<{
+  testID?: string
+  modui: ModerationUI | undefined
+  ignoreMute?: boolean
+  style?: StyleProp<ViewStyle>
+  childContainerStyle?: StyleProp<ViewStyle>
+}>) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
+  const [override, setOverride] = React.useState(false)
+  const control = useModerationDetailsDialogControl()
+
+  const blur = modui?.blurs[0]
+  const desc = useModerationCauseDescription(blur)
+
+  if (!blur || (ignoreMute && isJustAMute(modui))) {
+    return (
+      <View testID={testID} style={[styles.outer, style]}>
+        {children}
+      </View>
+    )
+  }
+
+  return (
+    <View testID={testID} style={[a.overflow_hidden, style]}>
+      <ModerationDetailsDialog control={control} modcause={blur} />
+
+      <Button
+        onPress={() => {
+          if (!modui.noOverride) {
+            setOverride(v => !v)
+          } else {
+            control.open()
+          }
+        }}
+        label={desc.name}
+        accessibilityHint={
+          modui.noOverride
+            ? _(msg`Learn more about the moderation applied to this content.`)
+            : override
+            ? _(msg`Hide the content`)
+            : _(msg`Show the content`)
+        }>
+        {state => (
+          <View
+            style={[
+              a.flex_row,
+              a.w_full,
+              a.justify_start,
+              a.align_center,
+              a.py_md,
+              a.px_lg,
+              a.gap_xs,
+              a.rounded_sm,
+              t.atoms.bg_contrast_25,
+              gtMobile && [a.gap_sm, a.py_lg, a.mt_xs, a.px_xl],
+              (state.hovered || state.pressed) && t.atoms.bg_contrast_50,
+            ]}>
+            <desc.icon
+              size="md"
+              fill={t.atoms.text_contrast_medium.color}
+              style={{marginLeft: -2}}
+            />
+            <Text
+              style={[
+                a.flex_1,
+                a.text_left,
+                a.font_bold,
+                a.leading_snug,
+                gtMobile && [a.font_semibold],
+                t.atoms.text_contrast_medium,
+                web({
+                  marginBottom: 1,
+                }),
+              ]}>
+              {desc.name}
+            </Text>
+            {!modui.noOverride && (
+              <Text
+                style={[
+                  a.font_bold,
+                  a.leading_snug,
+                  gtMobile && [a.font_semibold],
+                  t.atoms.text_contrast_high,
+                  web({
+                    marginBottom: 1,
+                  }),
+                ]}>
+                {override ? <Trans>Hide</Trans> : <Trans>Show</Trans>}
+              </Text>
+            )}
+          </View>
+        )}
+      </Button>
+
+      {desc.source && blur.type === 'label' && !override && (
+        <Button
+          onPress={() => {
+            control.open()
+          }}
+          label={_(
+            msg`Learn more about the moderation applied to this content.`,
+          )}
+          style={[a.pt_sm]}>
+          {state => (
+            <Text
+              style={[
+                a.flex_1,
+                a.text_sm,
+                a.font_normal,
+                a.leading_snug,
+                t.atoms.text_contrast_medium,
+                a.text_left,
+              ]}>
+              {desc.sourceType === 'user' ? (
+                <Trans>Labeled by the author.</Trans>
+              ) : (
+                <Trans>Labeled by {sanitizeDisplayName(desc.source!)}.</Trans>
+              )}{' '}
+              <Text
+                style={[
+                  {color: t.palette.primary_500},
+                  a.text_sm,
+                  state.hovered && [web({textDecoration: 'underline'})],
+                ]}>
+                <Trans>Learn more.</Trans>
+              </Text>
+            </Text>
+          )}
+        </Button>
+      )}
+
+      {override && <View style={childContainerStyle}>{children}</View>}
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  outer: {
+    overflow: 'hidden',
+  },
+  cover: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    borderRadius: 8,
+    marginTop: 4,
+    paddingVertical: 14,
+    paddingLeft: 14,
+    paddingRight: 18,
+  },
+  showBtn: {
+    marginLeft: 'auto',
+    alignSelf: 'center',
+  },
+})

src/components/moderation/GlobalModerationLabelPref.tsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import {View} from 'react-native'
+import {InterpretedLabelValueDefinition, LabelPreference} from '@atproto/api'
+import {useLingui} from '@lingui/react'
+import {msg} from '@lingui/macro'
+
+import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
+import {
+  usePreferencesQuery,
+  usePreferencesSetContentLabelMutation,
+} from '#/state/queries/preferences'
+
+import {useTheme, atoms as a} from '#/alf'
+import {Text} from '#/components/Typography'
+import * as ToggleButton from '#/components/forms/ToggleButton'
+
+export function GlobalModerationLabelPref({
+  labelValueDefinition,
+  disabled,
+}: {
+  labelValueDefinition: InterpretedLabelValueDefinition
+  disabled?: boolean
+}) {
+  const {_} = useLingui()
+  const t = useTheme()
+
+  const {identifier} = labelValueDefinition
+  const {data: preferences} = usePreferencesQuery()
+  const {mutate, variables} = usePreferencesSetContentLabelMutation()
+  const savedPref = preferences?.moderationPrefs.labels[identifier]
+  const pref = variables?.visibility ?? savedPref ?? 'warn'
+
+  const allLabelStrings = useGlobalLabelStrings()
+  const labelStrings =
+    labelValueDefinition.identifier in allLabelStrings
+      ? allLabelStrings[labelValueDefinition.identifier]
+      : {
+          name: labelValueDefinition.identifier,
+          description: `Labeled "${labelValueDefinition.identifier}"`,
+        }
+
+  const labelOptions = {
+    hide: _(msg`Hide`),
+    warn: _(msg`Warn`),
+    ignore: _(msg`Show`),
+  }
+
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.justify_between,
+        a.gap_sm,
+        a.py_md,
+        a.pl_lg,
+        a.pr_md,
+        a.align_center,
+      ]}>
+      <View style={[a.gap_xs, a.flex_1]}>
+        <Text style={[a.font_bold]}>{labelStrings.name}</Text>
+        <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
+          {labelStrings.description}
+        </Text>
+      </View>
+      <View style={[a.justify_center, {minHeight: 35}]}>
+        {!disabled && (
+          <ToggleButton.Group
+            label={_(
+              msg`Configure content filtering setting for category: ${labelStrings.name.toLowerCase()}`,
+            )}
+            values={[pref]}
+            onChange={newPref =>
+              mutate({
+                label: identifier,
+                visibility: newPref[0] as LabelPreference,
+                labelerDid: undefined,
+              })
+            }>
+            <ToggleButton.Button name="ignore" label={labelOptions.ignore}>
+              {labelOptions.ignore}
+            </ToggleButton.Button>
+            <ToggleButton.Button name="warn" label={labelOptions.warn}>
+              {labelOptions.warn}
+            </ToggleButton.Button>
+            <ToggleButton.Button name="hide" label={labelOptions.hide}>
+              {labelOptions.hide}
+            </ToggleButton.Button>
+          </ToggleButton.Group>
+        )}
+      </View>
+    </View>
+  )
+}

src/components/moderation/LabelsOnMe.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {AppBskyFeedDefs, ComAtprotoLabelDefs} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useSession} from '#/state/session'
+
+import {atoms as a} from '#/alf'
+import {Button, ButtonText, ButtonIcon, ButtonSize} from '#/components/Button'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {
+  LabelsOnMeDialog,
+  useLabelsOnMeDialogControl,
+} from '#/components/moderation/LabelsOnMeDialog'
+
+export function LabelsOnMe({
+  details,
+  labels,
+  size,
+  style,
+}: {
+  details: {did: string} | {uri: string; cid: string}
+  labels: ComAtprotoLabelDefs.Label[] | undefined
+  size?: ButtonSize
+  style?: StyleProp<ViewStyle>
+}) {
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const isAccount = 'did' in details
+  const control = useLabelsOnMeDialogControl()
+
+  if (!labels || !currentAccount) {
+    return null
+  }
+  labels = labels.filter(
+    l => !l.val.startsWith('!') && l.src !== currentAccount.did,
+  )
+  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} />
+
+      <Button
+        variant="solid"
+        color="secondary"
+        size={size || 'small'}
+        label={_(msg`View information about these labels`)}
+        onPress={() => {
+          control.open()
+        }}>
+        <ButtonIcon position="left" icon={CircleInfo} />
+        <ButtonText style={[a.leading_snug]}>
+          {labels.length}{' '}
+          {labels.length === 1 ? (
+            <Trans>label has been placed on this {labelTarget}</Trans>
+          ) : (
+            <Trans>labels have been placed on this {labelTarget}</Trans>
+          )}
+        </ButtonText>
+      </Button>
+    </View>
+  )
+}
+
+export function LabelsOnMyPost({
+  post,
+  style,
+}: {
+  post: AppBskyFeedDefs.PostView
+  style?: StyleProp<ViewStyle>
+}) {
+  const {currentAccount} = useSession()
+  if (post.author.did !== currentAccount?.did) {
+    return null
+  }
+  return (
+    <LabelsOnMe details={post} labels={post.labels} size="tiny" style={style} />
+  )
+}

src/components/moderation/LabelsOnMeDialog.tsx

@@ -0,0 +1,262 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {ComAtprotoLabelDefs, ComAtprotoModerationDefs} from '@atproto/api'
+
+import {useLabelInfo} from '#/lib/moderation/useLabelInfo'
+import {makeProfileLink} from '#/lib/routes/links'
+import {sanitizeHandle} from '#/lib/strings/handles'
+import {getAgent} from '#/state/session'
+
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Text} from '#/components/Typography'
+import * as Dialog from '#/components/Dialog'
+import {Button, ButtonText} from '#/components/Button'
+import {InlineLink} from '#/components/Link'
+import * as Toast from '#/view/com/util/Toast'
+import {Divider} from '../Divider'
+
+export {useDialogControl as useLabelsOnMeDialogControl} from '#/components/Dialog'
+
+type Subject =
+  | {
+      uri: string
+      cid: string
+    }
+  | {
+      did: string
+    }
+
+export interface LabelsOnMeDialogProps {
+  control: Dialog.DialogOuterProps['control']
+  subject: Subject
+  labels: ComAtprotoLabelDefs.Label[]
+}
+
+export function LabelsOnMeDialogInner(props: LabelsOnMeDialogProps) {
+  const {_} = useLingui()
+  const [appealingLabel, setAppealingLabel] = React.useState<
+    ComAtprotoLabelDefs.Label | undefined
+  >(undefined)
+  const {subject, labels} = props
+  const isAccount = 'did' in subject
+
+  return (
+    <Dialog.ScrollableInner
+      label={
+        isAccount
+          ? _(msg`The following labels were applied to your account.`)
+          : _(msg`The following labels were applied to your content.`)
+      }>
+      {appealingLabel ? (
+        <AppealForm
+          label={appealingLabel}
+          subject={subject}
+          control={props.control}
+          onPressBack={() => setAppealingLabel(undefined)}
+        />
+      ) : (
+        <>
+          <Text style={[a.text_2xl, a.font_bold, a.pb_xs, a.leading_tight]}>
+            {isAccount ? (
+              <Trans>Labels on your account</Trans>
+            ) : (
+              <Trans>Labels on your content</Trans>
+            )}
+          </Text>
+          <Text style={[a.text_md, a.leading_snug]}>
+            <Trans>
+              You may appeal these labels if you feel they were placed in error.
+            </Trans>
+          </Text>
+
+          <View style={[a.py_lg, a.gap_md]}>
+            {labels.map(label => (
+              <Label
+                key={`${label.val}-${label.src}`}
+                label={label}
+                control={props.control}
+                onPressAppeal={label => setAppealingLabel(label)}
+              />
+            ))}
+          </View>
+        </>
+      )}
+
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
+  )
+}
+
+export function LabelsOnMeDialog(props: LabelsOnMeDialogProps) {
+  return (
+    <Dialog.Outer control={props.control}>
+      <Dialog.Handle />
+
+      <LabelsOnMeDialogInner {...props} />
+    </Dialog.Outer>
+  )
+}
+
+function Label({
+  label,
+  control,
+  onPressAppeal,
+}: {
+  label: ComAtprotoLabelDefs.Label
+  control: Dialog.DialogOuterProps['control']
+  onPressAppeal: (label: ComAtprotoLabelDefs.Label) => void
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {labeler, strings} = useLabelInfo(label)
+  return (
+    <View
+      style={[
+        a.border,
+        t.atoms.border_contrast_low,
+        a.rounded_sm,
+        a.overflow_hidden,
+      ]}>
+      <View style={[a.p_md, a.gap_sm, a.flex_row]}>
+        <View style={[a.flex_1, a.gap_xs]}>
+          <Text style={[a.font_bold, a.text_md]}>{strings.name}</Text>
+          <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
+            {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>
+      </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>{' '}
+          <InlineLink
+            to={makeProfileLink(
+              labeler ? labeler.creator : {did: label.src, handle: ''},
+            )}
+            onPress={() => control.close()}>
+            {labeler ? sanitizeHandle(labeler.creator.handle, '@') : label.src}
+          </InlineLink>
+        </Text>
+      </View>
+    </View>
+  )
+}
+
+function AppealForm({
+  label,
+  subject,
+  control,
+  onPressBack,
+}: {
+  label: ComAtprotoLabelDefs.Label
+  subject: Subject
+  control: Dialog.DialogOuterProps['control']
+  onPressBack: () => void
+}) {
+  const {_} = useLingui()
+  const {labeler, strings} = useLabelInfo(label)
+  const {gtMobile} = useBreakpoints()
+  const [details, setDetails] = React.useState('')
+  const isAccountReport = 'did' in subject
+
+  const onSubmit = async () => {
+    try {
+      const $type = !isAccountReport
+        ? 'com.atproto.repo.strongRef'
+        : 'com.atproto.admin.defs#repoRef'
+      await getAgent()
+        .withProxy('atproto_labeler', label.src)
+        .createModerationReport({
+          reasonType: ComAtprotoModerationDefs.REASONAPPEAL,
+          subject: {
+            $type,
+            ...subject,
+          },
+          reason: details,
+        })
+      Toast.show(_(msg`Appeal submitted.`))
+    } finally {
+      control.close()
+    }
+  }
+
+  return (
+    <>
+      <Text style={[a.text_2xl, a.font_bold, a.pb_xs, a.leading_tight]}>
+        <Trans>Appeal "{strings.name}" label</Trans>
+      </Text>
+      <Text style={[a.text_md, a.leading_snug]}>
+        <Trans>
+          This appeal will be sent to{' '}
+          <InlineLink
+            to={makeProfileLink(
+              labeler ? labeler.creator : {did: label.src, handle: ''},
+            )}
+            onPress={() => control.close()}
+            style={[a.text_md, a.leading_snug]}>
+            {labeler ? sanitizeHandle(labeler.creator.handle, '@') : label.src}
+          </InlineLink>
+          .
+        </Trans>
+      </Text>
+      <View style={[a.my_md]}>
+        <Dialog.Input
+          label={_(msg`Text input field`)}
+          placeholder={_(
+            msg`Please explain why you think this label was incorrectly applied by ${
+              labeler ? sanitizeHandle(labeler.creator.handle, '@') : label.src
+            }`,
+          )}
+          value={details}
+          onChangeText={setDetails}
+          autoFocus={true}
+          numberOfLines={3}
+          multiline
+          maxLength={300}
+        />
+      </View>
+
+      <View
+        style={
+          gtMobile
+            ? [a.flex_row, a.justify_between]
+            : [{flexDirection: 'column-reverse'}, a.gap_sm]
+        }>
+        <Button
+          testID="backBtn"
+          variant="solid"
+          color="secondary"
+          size="medium"
+          onPress={onPressBack}
+          label={_(msg`Back`)}>
+          {_(msg`Back`)}
+        </Button>
+        <Button
+          testID="submitBtn"
+          variant="solid"
+          color="primary"
+          size="medium"
+          onPress={onSubmit}
+          label={_(msg`Submit`)}>
+          {_(msg`Submit`)}
+        </Button>
+      </View>
+    </>
+  )
+}

src/components/moderation/ModerationDetailsDialog.tsx

@@ -0,0 +1,148 @@
+import React from 'react'
+import {View} from 'react-native'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {ModerationCause} from '@atproto/api'
+
+import {listUriToHref} from '#/lib/strings/url-helpers'
+import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
+import {makeProfileLink} from '#/lib/routes/links'
+
+import {isNative} from '#/platform/detection'
+import {useTheme, atoms as a} from '#/alf'
+import {Text} from '#/components/Typography'
+import * as Dialog from '#/components/Dialog'
+import {InlineLink} from '#/components/Link'
+import {Divider} from '#/components/Divider'
+
+export {useDialogControl as useModerationDetailsDialogControl} from '#/components/Dialog'
+
+export interface ModerationDetailsDialogProps {
+  control: Dialog.DialogOuterProps['control']
+  modcause: ModerationCause
+}
+
+export function ModerationDetailsDialog(props: ModerationDetailsDialogProps) {
+  return (
+    <Dialog.Outer control={props.control}>
+      <Dialog.Handle />
+      <ModerationDetailsDialogInner {...props} />
+    </Dialog.Outer>
+  )
+}
+
+function ModerationDetailsDialogInner({
+  modcause,
+  control,
+}: ModerationDetailsDialogProps & {
+  control: Dialog.DialogOuterProps['control']
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const desc = useModerationCauseDescription(modcause)
+
+  let name
+  let description
+  if (!modcause) {
+    name = _(msg`Content Warning`)
+    description = _(
+      msg`Moderator has chosen to set a general warning on the content.`,
+    )
+  } else if (modcause.type === 'blocking') {
+    if (modcause.source.type === 'list') {
+      const list = modcause.source.list
+      name = _(msg`User Blocked by List`)
+      description = (
+        <Trans>
+          This user is included in the{' '}
+          <InlineLink to={listUriToHref(list.uri)} style={[a.text_sm]}>
+            {list.name}
+          </InlineLink>{' '}
+          list which you have blocked.
+        </Trans>
+      )
+    } else {
+      name = _(msg`User Blocked`)
+      description = _(
+        msg`You have blocked this user. You cannot view their content.`,
+      )
+    }
+  } else if (modcause.type === 'blocked-by') {
+    name = _(msg`User Blocks You`)
+    description = _(
+      msg`This user has blocked you. You cannot view their content.`,
+    )
+  } else if (modcause.type === 'block-other') {
+    name = _(msg`Content Not Available`)
+    description = _(
+      msg`This content is not available because one of the users involved has blocked the other.`,
+    )
+  } else if (modcause.type === 'muted') {
+    if (modcause.source.type === 'list') {
+      const list = modcause.source.list
+      name = _(msg`Account Muted by List`)
+      description = (
+        <Trans>
+          This user is included in the{' '}
+          <InlineLink to={listUriToHref(list.uri)} style={[a.text_sm]}>
+            {list.name}
+          </InlineLink>{' '}
+          list which you have muted.
+        </Trans>
+      )
+    } else {
+      name = _(msg`Account Muted`)
+      description = _(msg`You have muted this account.`)
+    }
+  } else if (modcause.type === 'mute-word') {
+    name = _(msg`Post Hidden by Muted Word`)
+    description = _(msg`You've chosen to hide a word or tag within this post.`)
+  } else if (modcause.type === 'hidden') {
+    name = _(msg`Post Hidden by You`)
+    description = _(msg`You have hidden this post.`)
+  } else if (modcause.type === 'label') {
+    name = desc.name
+    description = desc.description
+  } else {
+    // should never happen
+    name = ''
+    description = ''
+  }
+
+  return (
+    <Dialog.ScrollableInner label={_(msg`Moderation details`)}>
+      <Text style={[t.atoms.text, a.text_2xl, a.font_bold, a.mb_sm]}>
+        {name}
+      </Text>
+      <Text style={[t.atoms.text, a.text_md, a.mb_lg, a.leading_snug]}>
+        {description}
+      </Text>
+
+      {modcause.type === 'label' && (
+        <>
+          <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>
+              ) : (
+                <InlineLink
+                  to={makeProfileLink({did: modcause.label.src, handle: ''})}
+                  onPress={() => control.close()}
+                  style={a.text_md}>
+                  {desc.source}
+                </InlineLink>
+              )}
+              .
+            </Trans>
+          </Text>
+        </>
+      )}
+
+      {isNative && <View style={{height: 40}} />}
+
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
+  )
+}

src/components/moderation/ModerationLabelPref.tsx

@@ -0,0 +1,177 @@
+import React from 'react'
+import {View} from 'react-native'
+import {InterpretedLabelValueDefinition, LabelPreference} from '@atproto/api'
+import {useLingui} from '@lingui/react'
+import {msg, Trans} from '@lingui/macro'
+
+import {useGlobalLabelStrings} from '#/lib/moderation/useGlobalLabelStrings'
+import {useLabelBehaviorDescription} from '#/lib/moderation/useLabelBehaviorDescription'
+import {
+  usePreferencesQuery,
+  usePreferencesSetContentLabelMutation,
+} from '#/state/queries/preferences'
+import {getLabelStrings} from '#/lib/moderation/useLabelInfo'
+
+import {useTheme, atoms as a, useBreakpoints} from '#/alf'
+import {Text} from '#/components/Typography'
+import {InlineLink} from '#/components/Link'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '../icons/CircleInfo'
+import * as ToggleButton from '#/components/forms/ToggleButton'
+
+export function ModerationLabelPref({
+  labelValueDefinition,
+  labelerDid,
+  disabled,
+}: {
+  labelValueDefinition: InterpretedLabelValueDefinition
+  labelerDid: string | undefined
+  disabled?: boolean
+}) {
+  const {_, i18n} = useLingui()
+  const t = useTheme()
+  const {gtPhone} = useBreakpoints()
+
+  const isGlobalLabel = !labelValueDefinition.definedBy
+  const {identifier} = labelValueDefinition
+  const {data: preferences} = usePreferencesQuery()
+  const {mutate, variables} = usePreferencesSetContentLabelMutation()
+  const savedPref =
+    labelerDid && !isGlobalLabel
+      ? preferences?.moderationPrefs.labelers.find(l => l.did === labelerDid)
+          ?.labels[identifier]
+      : preferences?.moderationPrefs.labels[identifier]
+  const pref =
+    variables?.visibility ??
+    savedPref ??
+    labelValueDefinition.defaultSetting ??
+    'warn'
+
+  // does the 'warn' setting make sense for this label?
+  const canWarn = !(
+    labelValueDefinition.blurs === 'none' &&
+    labelValueDefinition.severity === 'none'
+  )
+  // is this label adult only?
+  const adultOnly = labelValueDefinition.flags.includes('adult')
+  // is this label disabled because it's adult only?
+  const adultDisabled =
+    adultOnly && !preferences?.moderationPrefs.adultContentEnabled
+  // are there any reasons we cant configure this label here?
+  const cantConfigure = isGlobalLabel || adultDisabled
+  const showConfig = !disabled && (gtPhone || !cantConfigure)
+
+  // adjust the pref based on whether warn is available
+  let prefAdjusted = pref
+  if (adultDisabled) {
+    prefAdjusted = 'hide'
+  } else if (!canWarn && pref === 'warn') {
+    prefAdjusted = 'ignore'
+  }
+
+  // grab localized descriptions of the label and its settings
+  const currentPrefLabel = useLabelBehaviorDescription(
+    labelValueDefinition,
+    prefAdjusted,
+  )
+  const hideLabel = useLabelBehaviorDescription(labelValueDefinition, 'hide')
+  const warnLabel = useLabelBehaviorDescription(labelValueDefinition, 'warn')
+  const ignoreLabel = useLabelBehaviorDescription(
+    labelValueDefinition,
+    'ignore',
+  )
+  const globalLabelStrings = useGlobalLabelStrings()
+  const labelStrings = getLabelStrings(
+    i18n.locale,
+    globalLabelStrings,
+    labelValueDefinition,
+  )
+
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.gap_md,
+        a.px_lg,
+        a.py_lg,
+        a.justify_between,
+        a.flex_wrap,
+      ]}>
+      <View style={[a.gap_xs, a.flex_1]}>
+        <Text style={[a.font_bold, gtPhone ? a.text_sm : a.text_md]}>
+          {labelStrings.name}
+        </Text>
+        <Text style={[t.atoms.text_contrast_medium, a.leading_snug]}>
+          {labelStrings.description}
+        </Text>
+
+        {cantConfigure && (
+          <View style={[a.flex_row, a.gap_xs, a.align_center, a.mt_xs]}>
+            <CircleInfo size="sm" fill={t.atoms.text_contrast_high.color} />
+
+            <Text
+              style={[t.atoms.text_contrast_medium, a.font_semibold, a.italic]}>
+              {adultDisabled ? (
+                <Trans>Adult content is disabled.</Trans>
+              ) : isGlobalLabel ? (
+                <Trans>
+                  Configured in{' '}
+                  <InlineLink to="/moderation" style={a.text_sm}>
+                    moderation settings
+                  </InlineLink>
+                  .
+                </Trans>
+              ) : null}
+            </Text>
+          </View>
+        )}
+      </View>
+
+      {showConfig && (
+        <View style={[gtPhone ? undefined : a.w_full]}>
+          {cantConfigure ? (
+            <View
+              style={[
+                {minHeight: 35},
+                a.px_md,
+                a.py_md,
+                a.rounded_sm,
+                a.border,
+                t.atoms.border_contrast_low,
+              ]}>
+              <Text style={[a.font_bold, t.atoms.text_contrast_low]}>
+                {currentPrefLabel}
+              </Text>
+            </View>
+          ) : (
+            <View style={[{minHeight: 35}]}>
+              <ToggleButton.Group
+                label={_(
+                  msg`Configure content filtering setting for category: ${labelStrings.name.toLowerCase()}`,
+                )}
+                values={[prefAdjusted]}
+                onChange={newPref =>
+                  mutate({
+                    label: identifier,
+                    visibility: newPref[0] as LabelPreference,
+                    labelerDid,
+                  })
+                }>
+                <ToggleButton.Button name="ignore" label={ignoreLabel}>
+                  {ignoreLabel}
+                </ToggleButton.Button>
+                {canWarn && (
+                  <ToggleButton.Button name="warn" label={warnLabel}>
+                    {warnLabel}
+                  </ToggleButton.Button>
+                )}
+                <ToggleButton.Button name="hide" label={hideLabel}>
+                  {hideLabel}
+                </ToggleButton.Button>
+              </ToggleButton.Group>
+            </View>
+          )}
+        </View>
+      )}
+    </View>
+  )
+}

src/components/moderation/PostAlerts.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {ModerationUI, ModerationCause} from '@atproto/api'
+
+import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
+import {getModerationCauseKey} from '#/lib/moderation'
+
+import {atoms as a} from '#/alf'
+import {Button, ButtonText, ButtonIcon} from '#/components/Button'
+import {
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/moderation/ModerationDetailsDialog'
+
+export function PostAlerts({
+  modui,
+  style,
+}: {
+  modui: ModerationUI
+  includeMute?: boolean
+  style?: StyleProp<ViewStyle>
+}) {
+  if (!modui.alert && !modui.inform) {
+    return null
+  }
+
+  return (
+    <View style={[a.flex_col, a.gap_xs, style]}>
+      <View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
+        {modui.alerts.map(cause => (
+          <PostLabel key={getModerationCauseKey(cause)} cause={cause} />
+        ))}
+        {modui.informs.map(cause => (
+          <PostLabel key={getModerationCauseKey(cause)} cause={cause} />
+        ))}
+      </View>
+    </View>
+  )
+}
+
+function PostLabel({cause}: {cause: ModerationCause}) {
+  const control = useModerationDetailsDialogControl()
+  const desc = useModerationCauseDescription(cause)
+
+  return (
+    <>
+      <Button
+        label={desc.name}
+        variant="solid"
+        color="secondary"
+        size="small"
+        shape="default"
+        onPress={() => {
+          control.open()
+        }}
+        style={[a.px_sm, a.py_xs, a.gap_xs]}>
+        <ButtonIcon icon={desc.icon} position="left" />
+        <ButtonText style={[a.text_left, a.leading_snug]}>
+          {desc.name}
+        </ButtonText>
+      </Button>
+
+      <ModerationDetailsDialog control={control} modcause={cause} />
+    </>
+  )
+}

src/components/moderation/PostHider.tsx

@@ -1,45 +1,50 @@
 import React, {ComponentProps} from 'react'
 import {StyleSheet, Pressable, View, ViewStyle, StyleProp} from 'react-native'
 import {ModerationUI} from '@atproto/api'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {usePalette} from 'lib/hooks/usePalette'
-import {Link} from '../Link'
-import {Text} from '../text/Text'
-import {addStyle} from 'lib/styles'
-import {describeModerationCause} from 'lib/moderation'
-import {ShieldExclamation} from 'lib/icons'
 import {useLingui} from '@lingui/react'
 import {Trans, msg} from '@lingui/macro'
-import {useModalControls} from '#/state/modals'
+
+import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
+import {addStyle} from 'lib/styles'
+
+import {useTheme, atoms as a} from '#/alf'
+import {
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/moderation/ModerationDetailsDialog'
+import {Text} from '#/components/Typography'
+// import {Link} from '#/components/Link' TODO this imposes some styles that screw things up
+import {Link} from '#/view/com/util/Link'
 
 interface Props extends ComponentProps<typeof Link> {
   iconSize: number
   iconStyles: StyleProp<ViewStyle>
-  moderation: ModerationUI
+  modui: ModerationUI
 }
 
 export function PostHider({
   testID,
   href,
-  moderation,
+  modui,
   style,
   children,
   iconSize,
   iconStyles,
   ...props
 }: Props) {
-  const pal = usePalette('default')
+  const t = useTheme()
   const {_} = useLingui()
   const [override, setOverride] = React.useState(false)
-  const {openModal} = useModalControls()
+  const control = useModerationDetailsDialogControl()
+  const blur = modui.blurs[0]
+  const desc = useModerationCauseDescription(blur)
 
-  if (!moderation.blur) {
+  if (!blur) {
     return (
       <Link
         testID={testID}
         style={style}
         href={href}
-        noFeedback
         accessible={false}
         {...props}>
         {children}
@@ -47,12 +52,10 @@ export function PostHider({
     )
   }
 
-  const isMute = ['muted', 'muted-word'].includes(moderation.cause?.type || '')
-  const desc = describeModerationCause(moderation.cause, 'content')
   return !override ? (
     <Pressable
       onPress={() => {
-        if (!moderation.noOverride) {
+        if (!modui.noOverride) {
           setOverride(v => !v)
         }
       }}
@@ -62,49 +65,45 @@ export function PostHider({
       }
       accessibilityLabel=""
       style={[
-        styles.description,
+        a.flex_row,
+        a.align_center,
+        a.gap_sm,
+        a.py_md,
+        {
+          paddingLeft: 6,
+          paddingRight: 18,
+        },
         override ? {paddingBottom: 0} : undefined,
-        pal.view,
+        t.atoms.bg,
       ]}>
+      <ModerationDetailsDialog control={control} modcause={blur} />
       <Pressable
         onPress={() => {
-          openModal({
-            name: 'moderation-details',
-            context: 'content',
-            moderation,
-          })
+          control.open()
         }}
         accessibilityRole="button"
         accessibilityLabel={_(msg`Learn more about this warning`)}
         accessibilityHint="">
         <View
           style={[
-            pal.viewLight,
+            t.atoms.bg_contrast_25,
+            a.align_center,
+            a.justify_center,
             {
               width: iconSize,
               height: iconSize,
               borderRadius: iconSize,
-              alignItems: 'center',
-              justifyContent: 'center',
             },
             iconStyles,
           ]}>
-          {isMute ? (
-            <FontAwesomeIcon
-              icon={['far', 'eye-slash']}
-              size={14}
-              color={pal.colors.textLight}
-            />
-          ) : (
-            <ShieldExclamation size={14} style={pal.textLight} />
-          )}
+          <desc.icon size="sm" fill={t.atoms.text_contrast_medium.color} />
         </View>
       </Pressable>
-      <Text type="sm" style={[{flex: 1}, pal.textLight]} numberOfLines={1}>
+      <Text style={[t.atoms.text_contrast_medium, a.flex_1]} numberOfLines={1}>
         {desc.name}
       </Text>
-      {!moderation.noOverride && (
-        <Text type="sm" style={[styles.showBtn, pal.link]}>
+      {!modui.noOverride && (
+        <Text style={[{color: t.palette.primary_500}]}>
           {override ? <Trans>Hide</Trans> : <Trans>Show</Trans>}
         </Text>
       )}
@@ -114,26 +113,14 @@ export function PostHider({
       testID={testID}
       style={addStyle(style, styles.child)}
       href={href}
-      noFeedback>
+      accessible={false}
+      {...props}>
       {children}
     </Link>
   )
 }
 
 const styles = StyleSheet.create({
-  description: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-    paddingVertical: 10,
-    paddingLeft: 6,
-    paddingRight: 18,
-    marginTop: 1,
-  },
-  showBtn: {
-    marginLeft: 'auto',
-    alignSelf: 'center',
-  },
   child: {
     borderWidth: 0,
     borderTopWidth: 0,

src/components/moderation/ProfileHeaderAlerts.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {ModerationCause, ModerationDecision} from '@atproto/api'
+
+import {getModerationCauseKey} from 'lib/moderation'
+import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
+
+import {atoms as a} from '#/alf'
+import {Button, ButtonText, ButtonIcon} from '#/components/Button'
+import {
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/moderation/ModerationDetailsDialog'
+
+export function ProfileHeaderAlerts({
+  moderation,
+  style,
+}: {
+  moderation: ModerationDecision
+  style?: StyleProp<ViewStyle>
+}) {
+  const modui = moderation.ui('profileView')
+  if (!modui.alert && !modui.inform) {
+    return null
+  }
+
+  return (
+    <View style={[a.flex_col, a.gap_xs, style]}>
+      <View style={[a.flex_row, a.flex_wrap, a.gap_xs]}>
+        {modui.alerts.map(cause => (
+          <ProfileLabel key={getModerationCauseKey(cause)} cause={cause} />
+        ))}
+        {modui.informs.map(cause => (
+          <ProfileLabel key={getModerationCauseKey(cause)} cause={cause} />
+        ))}
+      </View>
+    </View>
+  )
+}
+
+function ProfileLabel({cause}: {cause: ModerationCause}) {
+  const control = useModerationDetailsDialogControl()
+  const desc = useModerationCauseDescription(cause)
+
+  return (
+    <>
+      <Button
+        label={desc.name}
+        variant="solid"
+        color="secondary"
+        size="small"
+        shape="default"
+        onPress={() => {
+          control.open()
+        }}
+        style={[a.px_sm, a.py_xs, a.gap_xs]}>
+        <ButtonIcon icon={desc.icon} position="left" />
+        <ButtonText style={[a.text_left, a.leading_snug]}>
+          {desc.name}
+        </ButtonText>
+      </Button>
+
+      <ModerationDetailsDialog control={control} modcause={cause} />
+    </>
+  )
+}

src/components/moderation/ScreenHider.tsx

@@ -0,0 +1,171 @@
+import React from 'react'
+import {
+  TouchableWithoutFeedback,
+  StyleProp,
+  View,
+  ViewStyle,
+} from 'react-native'
+import {useNavigation} from '@react-navigation/native'
+import {ModerationUI} from '@atproto/api'
+import {Trans, msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
+import {NavigationProp} from 'lib/routes/types'
+import {useModerationCauseDescription} from '#/lib/moderation/useModerationCauseDescription'
+
+import {useTheme, atoms as a} from '#/alf'
+import {CenteredView} from '#/view/com/util/Views'
+import {Text} from '#/components/Typography'
+import {Button, ButtonText} from '#/components/Button'
+import {
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/moderation/ModerationDetailsDialog'
+
+export function ScreenHider({
+  testID,
+  screenDescription,
+  modui,
+  style,
+  containerStyle,
+  children,
+}: React.PropsWithChildren<{
+  testID?: string
+  screenDescription: string
+  modui: ModerationUI
+  style?: StyleProp<ViewStyle>
+  containerStyle?: StyleProp<ViewStyle>
+}>) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const [override, setOverride] = React.useState(false)
+  const navigation = useNavigation<NavigationProp>()
+  const {isMobile} = useWebMediaQueries()
+  const control = useModerationDetailsDialogControl()
+  const blur = modui.blurs[0]
+  const desc = useModerationCauseDescription(blur)
+
+  if (!blur || override) {
+    return (
+      <View testID={testID} style={style}>
+        {children}
+      </View>
+    )
+  }
+
+  const isNoPwi = !!modui.blurs.find(
+    cause =>
+      cause.type === 'label' && cause.labelDef.id === '!no-unauthenticated',
+  )
+  return (
+    <CenteredView
+      style={[
+        a.flex_1,
+        {
+          paddingTop: 100,
+          paddingBottom: 150,
+        },
+        t.atoms.bg,
+        containerStyle,
+      ]}
+      sideBorders>
+      <View style={[a.align_center, a.mb_md]}>
+        <View
+          style={[
+            t.atoms.bg_contrast_975,
+            a.align_center,
+            a.justify_center,
+            {
+              borderRadius: 25,
+              width: 50,
+              height: 50,
+            },
+          ]}>
+          <desc.icon width={24} fill={t.atoms.bg.backgroundColor} />
+        </View>
+      </View>
+      <Text
+        style={[
+          a.text_4xl,
+          a.font_semibold,
+          a.text_center,
+          a.mb_md,
+          t.atoms.text,
+        ]}>
+        {isNoPwi ? (
+          <Trans>Sign-in Required</Trans>
+        ) : (
+          <Trans>Content Warning</Trans>
+        )}
+      </Text>
+      <Text
+        style={[
+          a.text_lg,
+          a.mb_md,
+          a.px_lg,
+          a.text_center,
+          t.atoms.text_contrast_medium,
+        ]}>
+        {isNoPwi ? (
+          <Trans>
+            This account has requested that users sign in to view their profile.
+          </Trans>
+        ) : (
+          <>
+            <Trans>This {screenDescription} has been flagged:</Trans>
+            <Text style={[a.text_lg, a.font_semibold, t.atoms.text, a.ml_xs]}>
+              {desc.name}.{' '}
+            </Text>
+            <TouchableWithoutFeedback
+              onPress={() => {
+                control.open()
+              }}
+              accessibilityRole="button"
+              accessibilityLabel={_(msg`Learn more about this warning`)}
+              accessibilityHint="">
+              <Text style={[a.text_lg, {color: t.palette.primary_500}]}>
+                <Trans>Learn More</Trans>
+              </Text>
+            </TouchableWithoutFeedback>
+
+            <ModerationDetailsDialog control={control} modcause={blur} />
+          </>
+        )}{' '}
+      </Text>
+      {isMobile && <View style={a.flex_1} />}
+      <View style={[a.flex_row, a.justify_center, a.my_md, a.gap_md]}>
+        <Button
+          variant="solid"
+          color="primary"
+          size="large"
+          style={[a.rounded_full]}
+          label={_(msg`Go back`)}
+          onPress={() => {
+            if (navigation.canGoBack()) {
+              navigation.goBack()
+            } else {
+              navigation.navigate('Home')
+            }
+          }}>
+          <ButtonText>
+            <Trans>Go back</Trans>
+          </ButtonText>
+        </Button>
+        {!modui.noOverride && (
+          <Button
+            variant="solid"
+            color="secondary"
+            size="large"
+            style={[a.rounded_full]}
+            label={_(msg`Show anyway`)}
+            onPress={() => setOverride(v => !v)}>
+            <ButtonText>
+              <Trans>Show anyway</Trans>
+            </ButtonText>
+          </Button>
+        )}
+      </View>
+    </CenteredView>
+  )
+}

src/lib/__tests__/moderatePost_wrapped.test.ts

@@ -1,692 +0,0 @@
-import {describe, it, expect} from '@jest/globals'
-import {RichText} from '@atproto/api'
-
-import {hasMutedWord} from '../moderatePost_wrapped'
-
-describe(`hasMutedWord`, () => {
-  describe(`tags`, () => {
-    it(`match: outline tag`, () => {
-      const rt = new RichText({
-        text: `This is a post #inlineTag`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      const match = hasMutedWord({
-        mutedWords: [{value: 'outlineTag', targets: ['tag']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: ['outlineTag'],
-        isOwnPost: false,
-      })
-
-      expect(match).toBe(true)
-    })
-
-    it(`match: inline tag`, () => {
-      const rt = new RichText({
-        text: `This is a post #inlineTag`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      const match = hasMutedWord({
-        mutedWords: [{value: 'inlineTag', targets: ['tag']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: ['outlineTag'],
-        isOwnPost: false,
-      })
-
-      expect(match).toBe(true)
-    })
-
-    it(`match: content target matches inline tag`, () => {
-      const rt = new RichText({
-        text: `This is a post #inlineTag`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      const match = hasMutedWord({
-        mutedWords: [{value: 'inlineTag', targets: ['content']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: ['outlineTag'],
-        isOwnPost: false,
-      })
-
-      expect(match).toBe(true)
-    })
-
-    it(`no match: only tag targets`, () => {
-      const rt = new RichText({
-        text: `This is a post`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      const match = hasMutedWord({
-        mutedWords: [{value: 'inlineTag', targets: ['tag']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: [],
-        isOwnPost: false,
-      })
-
-      expect(match).toBe(false)
-    })
-  })
-
-  describe(`early exits`, () => {
-    it(`match: single character 希`, () => {
-      /**
-       * @see https://bsky.app/profile/mukuuji.bsky.social/post/3klji4fvsdk2c
-       */
-      const rt = new RichText({
-        text: `改善希望です`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      const match = hasMutedWord({
-        mutedWords: [{value: '希', targets: ['content']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: [],
-        isOwnPost: false,
-      })
-
-      expect(match).toBe(true)
-    })
-
-    it(`no match: long muted word, short post`, () => {
-      const rt = new RichText({
-        text: `hey`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      const match = hasMutedWord({
-        mutedWords: [{value: 'politics', targets: ['content']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: [],
-        isOwnPost: false,
-      })
-
-      expect(match).toBe(false)
-    })
-
-    it(`match: exact text`, () => {
-      const rt = new RichText({
-        text: `javascript`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      const match = hasMutedWord({
-        mutedWords: [{value: 'javascript', targets: ['content']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: [],
-        isOwnPost: false,
-      })
-
-      expect(match).toBe(true)
-    })
-  })
-
-  describe(`general content`, () => {
-    it(`match: word within post`, () => {
-      const rt = new RichText({
-        text: `This is a post about javascript`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      const match = hasMutedWord({
-        mutedWords: [{value: 'javascript', targets: ['content']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: [],
-        isOwnPost: false,
-      })
-
-      expect(match).toBe(true)
-    })
-
-    it(`no match: partial word`, () => {
-      const rt = new RichText({
-        text: `Use your brain, Eric`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      const match = hasMutedWord({
-        mutedWords: [{value: 'ai', targets: ['content']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: [],
-        isOwnPost: false,
-      })
-
-      expect(match).toBe(false)
-    })
-
-    it(`match: multiline`, () => {
-      const rt = new RichText({
-        text: `Use your\n\tbrain, Eric`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      const match = hasMutedWord({
-        mutedWords: [{value: 'brain', targets: ['content']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: [],
-        isOwnPost: false,
-      })
-
-      expect(match).toBe(true)
-    })
-
-    it(`match: :)`, () => {
-      const rt = new RichText({
-        text: `So happy :)`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      const match = hasMutedWord({
-        mutedWords: [{value: `:)`, targets: ['content']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: [],
-        isOwnPost: false,
-      })
-
-      expect(match).toBe(true)
-    })
-  })
-
-  describe(`punctuation semi-fuzzy`, () => {
-    describe(`yay!`, () => {
-      const rt = new RichText({
-        text: `We're federating, yay!`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      it(`match: yay!`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: 'yay!', targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`match: yay`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: 'yay', targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-    })
-
-    describe(`y!ppee!!`, () => {
-      const rt = new RichText({
-        text: `We're federating, y!ppee!!`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      it(`match: y!ppee`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: 'y!ppee', targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      // single exclamation point, source has double
-      it(`no match: y!ppee!`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: 'y!ppee!', targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-    })
-
-    describe(`Why so S@assy?`, () => {
-      const rt = new RichText({
-        text: `Why so S@assy?`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      it(`match: S@assy`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: 'S@assy', targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`match: s@assy`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: 's@assy', targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-    })
-
-    describe(`New York Times`, () => {
-      const rt = new RichText({
-        text: `New York Times`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      // case insensitive
-      it(`match: new york times`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: 'new york times', targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-    })
-
-    describe(`!command`, () => {
-      const rt = new RichText({
-        text: `Idk maybe a bot !command`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      it(`match: !command`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `!command`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`match: command`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `command`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`no match: !command`, () => {
-        const rt = new RichText({
-          text: `Idk maybe a bot command`,
-        })
-        rt.detectFacetsWithoutResolution()
-
-        const match = hasMutedWord({
-          mutedWords: [{value: `!command`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(false)
-      })
-    })
-
-    describe(`e/acc`, () => {
-      const rt = new RichText({
-        text: `I'm e/acc pilled`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      it(`match: e/acc`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `e/acc`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`match: acc`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `acc`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-    })
-
-    describe(`super-bad`, () => {
-      const rt = new RichText({
-        text: `I'm super-bad`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      it(`match: super-bad`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `super-bad`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`match: super`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `super`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`match: super bad`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `super bad`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`match: superbad`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `superbad`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(false)
-      })
-    })
-
-    describe(`idk_what_this_would_be`, () => {
-      const rt = new RichText({
-        text: `Weird post with idk_what_this_would_be`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      it(`match: idk what this would be`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `idk what this would be`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`no match: idk what this would be for`, () => {
-        // extra word
-        const match = hasMutedWord({
-          mutedWords: [
-            {value: `idk what this would be for`, targets: ['content']},
-          ],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(false)
-      })
-
-      it(`match: idk`, () => {
-        // extra word
-        const match = hasMutedWord({
-          mutedWords: [{value: `idk`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`match: idkwhatthiswouldbe`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `idkwhatthiswouldbe`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(false)
-      })
-    })
-
-    describe(`parentheses`, () => {
-      const rt = new RichText({
-        text: `Post with context(iykyk)`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      it(`match: context(iykyk)`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `context(iykyk)`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`match: context`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `context`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`match: iykyk`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `iykyk`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`match: (iykyk)`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `(iykyk)`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-    })
-
-    describe(`🦋`, () => {
-      const rt = new RichText({
-        text: `Post with 🦋`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      it(`match: 🦋`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: `🦋`, targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-    })
-  })
-
-  describe(`phrases`, () => {
-    describe(`I like turtles, or how I learned to stop worrying and love the internet.`, () => {
-      const rt = new RichText({
-        text: `I like turtles, or how I learned to stop worrying and love the internet.`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      it(`match: stop worrying`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: 'stop worrying', targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-
-      it(`match: turtles, or how`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: 'turtles, or how', targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-    })
-  })
-
-  describe(`languages without spaces`, () => {
-    // I love turtles, or how I learned to stop worrying and love the internet
-    describe(`私はカメが好きです、またはどのようにして心配するのをやめてインターネットを愛するようになったのか`, () => {
-      const rt = new RichText({
-        text: `私はカメが好きです、またはどのようにして心配するのをやめてインターネットを愛するようになったのか`,
-      })
-      rt.detectFacetsWithoutResolution()
-
-      // internet
-      it(`match: インターネット`, () => {
-        const match = hasMutedWord({
-          mutedWords: [{value: 'インターネット', targets: ['content']}],
-          text: rt.text,
-          facets: rt.facets,
-          outlineTags: [],
-          languages: ['ja'],
-          isOwnPost: false,
-        })
-
-        expect(match).toBe(true)
-      })
-    })
-  })
-
-  describe(`doesn't mute own post`, () => {
-    it(`does mute if it isn't own post`, () => {
-      const rt = new RichText({
-        text: `Mute words!`,
-      })
-
-      const match = hasMutedWord({
-        mutedWords: [{value: 'words', targets: ['content']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: [],
-        isOwnPost: false,
-      })
-
-      expect(match).toBe(true)
-    })
-
-    it(`doesn't mute own post when muted word is in text`, () => {
-      const rt = new RichText({
-        text: `Mute words!`,
-      })
-
-      const match = hasMutedWord({
-        mutedWords: [{value: 'words', targets: ['content']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: [],
-        isOwnPost: true,
-      })
-
-      expect(match).toBe(false)
-    })
-
-    it(`doesn't mute own post when muted word is in tags`, () => {
-      const rt = new RichText({
-        text: `Mute #words!`,
-      })
-
-      const match = hasMutedWord({
-        mutedWords: [{value: 'words', targets: ['tags']}],
-        text: rt.text,
-        facets: rt.facets,
-        outlineTags: [],
-        isOwnPost: true,
-      })
-
-      expect(match).toBe(false)
-    })
-  })
-})

src/lib/constants.ts

@@ -35,6 +35,10 @@ export const MAX_GRAPHEME_LENGTH = 300
 // but increasing limit per user feedback
 export const MAX_ALT_TEXT = 1000
 
+export function IS_TEST_USER(handle?: string) {
+  return handle && handle?.endsWith('.test')
+}
+
 export function IS_PROD_SERVICE(url?: string) {
   return url && url !== STAGING_SERVICE && url !== LOCAL_DEV_SERVICE
 }

src/lib/hooks/useWebBodyScrollLock.ts

@@ -6,6 +6,7 @@ let refCount = 0
 function incrementRefCount() {
   if (refCount === 0) {
     document.body.style.overflow = 'hidden'
+    document.documentElement.style.scrollbarGutter = 'auto'
   }
   refCount++
 }
@@ -14,6 +15,7 @@ function decrementRefCount() {
   refCount--
   if (refCount === 0) {
     document.body.style.overflow = ''
+    document.documentElement.style.scrollbarGutter = ''
   }
 }
 

src/lib/moderatePost_wrapped.ts

@@ -1,380 +1,30 @@
-import {
-  AppBskyEmbedRecord,
-  AppBskyEmbedRecordWithMedia,
-  moderatePost,
-  AppBskyActorDefs,
-  AppBskyFeedPost,
-  AppBskyRichtextFacet,
-  AppBskyEmbedImages,
-  AppBskyEmbedExternal,
-} from '@atproto/api'
+import {moderatePost, BSKY_LABELER_DID} from '@atproto/api'
 
 type ModeratePost = typeof moderatePost
-type Options = Parameters<ModeratePost>[1] & {
-  hiddenPosts?: string[]
-  mutedWords?: AppBskyActorDefs.MutedWord[]
-}
-
-const REGEX = {
-  LEADING_TRAILING_PUNCTUATION: /(?:^\p{P}+|\p{P}+$)/gu,
-  ESCAPE: /[[\]{}()*+?.\\^$|\s]/g,
-  SEPARATORS: /[\/\-\–\—\(\)\[\]\_]+/g,
-  WORD_BOUNDARY: /[\s\n\t\r\f\v]+?/g,
-}
-
-/**
- * List of 2-letter lang codes for languages that either don't use spaces, or
- * don't use spaces in a way conducive to word-based filtering.
- *
- * For these, we use a simple `String.includes` to check for a match.
- */
-const LANGUAGE_EXCEPTIONS = [
-  'ja', // Japanese
-  'zh', // Chinese
-  'ko', // Korean
-  'th', // Thai
-  'vi', // Vietnamese
-]
-
-export function hasMutedWord({
-  mutedWords,
-  text,
-  facets,
-  outlineTags,
-  languages,
-  isOwnPost,
-}: {
-  mutedWords: AppBskyActorDefs.MutedWord[]
-  text: string
-  facets?: AppBskyRichtextFacet.Main[]
-  outlineTags?: string[]
-  languages?: string[]
-  isOwnPost: boolean
-}) {
-  if (isOwnPost) return false
-
-  const exception = LANGUAGE_EXCEPTIONS.includes(languages?.[0] || '')
-  const tags = ([] as string[])
-    .concat(outlineTags || [])
-    .concat(
-      facets
-        ?.filter(facet => {
-          return facet.features.find(feature =>
-            AppBskyRichtextFacet.isTag(feature),
-          )
-        })
-        .map(t => t.features[0].tag as string) || [],
-    )
-    .map(t => t.toLowerCase())
-
-  for (const mute of mutedWords) {
-    const mutedWord = mute.value.toLowerCase()
-    const postText = text.toLowerCase()
-
-    // `content` applies to tags as well
-    if (tags.includes(mutedWord)) return true
-    // rest of the checks are for `content` only
-    if (!mute.targets.includes('content')) continue
-    // single character or other exception, has to use includes
-    if ((mutedWord.length === 1 || exception) && postText.includes(mutedWord))
-      return true
-    // too long
-    if (mutedWord.length > postText.length) continue
-    // exact match
-    if (mutedWord === postText) return true
-    // any muted phrase with space or punctuation
-    if (/(?:\s|\p{P})+?/u.test(mutedWord) && postText.includes(mutedWord))
-      return true
-
-    // check individual character groups
-    const words = postText.split(REGEX.WORD_BOUNDARY)
-    for (const word of words) {
-      if (word === mutedWord) return true
-
-      // compare word without leading/trailing punctuation, but allow internal
-      // punctuation (such as `s@ssy`)
-      const wordTrimmedPunctuation = word.replace(
-        REGEX.LEADING_TRAILING_PUNCTUATION,
-        '',
-      )
-
-      if (mutedWord === wordTrimmedPunctuation) return true
-      if (mutedWord.length > wordTrimmedPunctuation.length) continue
-
-      // handle hyphenated, slash separated words, etc
-      if (REGEX.SEPARATORS.test(wordTrimmedPunctuation)) {
-        // check against full normalized phrase
-        const wordNormalizedSeparators = wordTrimmedPunctuation.replace(
-          REGEX.SEPARATORS,
-          ' ',
-        )
-        const mutedWordNormalizedSeparators = mutedWord.replace(
-          REGEX.SEPARATORS,
-          ' ',
-        )
-        // hyphenated (or other sep) to spaced words
-        if (wordNormalizedSeparators === mutedWordNormalizedSeparators)
-          return true
-
-        /* Disabled for now e.g. `super-cool` to `supercool`
-        const wordNormalizedCompressed = wordNormalizedSeparators.replace(
-          REGEX.WORD_BOUNDARY,
-          '',
-        )
-        const mutedWordNormalizedCompressed =
-          mutedWordNormalizedSeparators.replace(/\s+?/g, '')
-        // hyphenated (or other sep) to non-hyphenated contiguous word
-        if (mutedWordNormalizedCompressed === wordNormalizedCompressed)
-          return true
-        */
-
-        // then individual parts of separated phrases/words
-        const wordParts = wordTrimmedPunctuation.split(REGEX.SEPARATORS)
-        for (const wp of wordParts) {
-          // still retain internal punctuation
-          if (wp === mutedWord) return true
-        }
-      }
-    }
-  }
-
-  return false
-}
+type Options = Parameters<ModeratePost>[1]
 
 export function moderatePost_wrapped(
   subject: Parameters<ModeratePost>[0],
   opts: Options,
 ) {
-  const {hiddenPosts = [], mutedWords = [], ...options} = opts
-  const moderations = moderatePost(subject, options)
-  const isOwnPost = subject.author.did === opts.userDid
+  // HACK
+  // temporarily translate 'gore' into 'graphic-media' during the transition period
+  // can remove this in a few months
+  // -prf
+  translateOldLabels(subject)
 
-  if (hiddenPosts.includes(subject.uri)) {
-    moderations.content.filter = true
-    moderations.content.blur = true
-    if (!moderations.content.cause) {
-      moderations.content.cause = {
-        // @ts-ignore Temporary extension to the moderation system -prf
-        type: 'post-hidden',
-        source: {type: 'user'},
-        priority: 1,
-      }
-    }
-  }
-
-  if (AppBskyFeedPost.isRecord(subject.record)) {
-    let muted = hasMutedWord({
-      mutedWords,
-      text: subject.record.text,
-      facets: subject.record.facets || [],
-      outlineTags: subject.record.tags || [],
-      languages: subject.record.langs,
-      isOwnPost,
-    })
-
-    if (
-      subject.record.embed &&
-      AppBskyEmbedImages.isMain(subject.record.embed)
-    ) {
-      for (const image of subject.record.embed.images) {
-        muted =
-          muted ||
-          hasMutedWord({
-            mutedWords,
-            text: image.alt,
-            facets: [],
-            outlineTags: [],
-            languages: subject.record.langs,
-            isOwnPost,
-          })
-      }
-    }
-
-    if (muted) {
-      moderations.content.filter = true
-      moderations.content.blur = true
-      if (!moderations.content.cause) {
-        moderations.content.cause = {
-          // @ts-ignore Temporary extension to the moderation system -prf
-          type: 'muted-word',
-          source: {type: 'user'},
-          priority: 1,
-        }
-      }
-    }
-  }
-
-  if (subject.embed) {
-    let embedHidden = false
-    let embedMuted = false
-    let externalMuted = false
-
-    if (AppBskyEmbedRecord.isViewRecord(subject.embed.record)) {
-      embedHidden = hiddenPosts.includes(subject.embed.record.uri)
-    }
-    if (
-      AppBskyEmbedRecordWithMedia.isView(subject.embed) &&
-      AppBskyEmbedRecord.isViewRecord(subject.embed.record.record)
-    ) {
-      embedHidden = hiddenPosts.includes(subject.embed.record.record.uri)
-    }
-
-    if (AppBskyEmbedRecord.isViewRecord(subject.embed.record)) {
-      if (AppBskyFeedPost.isRecord(subject.embed.record.value)) {
-        const embeddedPost = subject.embed.record.value
-
-        embedMuted =
-          embedMuted ||
-          hasMutedWord({
-            mutedWords,
-            text: embeddedPost.text,
-            facets: embeddedPost.facets,
-            outlineTags: embeddedPost.tags,
-            languages: embeddedPost.langs,
-            isOwnPost,
-          })
-
-        if (AppBskyEmbedImages.isMain(embeddedPost.embed)) {
-          for (const image of embeddedPost.embed.images) {
-            embedMuted =
-              embedMuted ||
-              hasMutedWord({
-                mutedWords,
-                text: image.alt,
-                facets: [],
-                outlineTags: [],
-                languages: embeddedPost.langs,
-                isOwnPost,
-              })
-          }
-        }
-
-        if (AppBskyEmbedExternal.isMain(embeddedPost.embed)) {
-          const {external} = embeddedPost.embed
-
-          embedMuted =
-            embedMuted ||
-            hasMutedWord({
-              mutedWords,
-              text: external.title + ' ' + external.description,
-              facets: [],
-              outlineTags: [],
-              languages: [],
-              isOwnPost,
-            })
-        }
-
-        if (AppBskyEmbedRecordWithMedia.isMain(embeddedPost.embed)) {
-          if (AppBskyEmbedExternal.isMain(embeddedPost.embed.media)) {
-            const {external} = embeddedPost.embed.media
-
-            embedMuted =
-              embedMuted ||
-              hasMutedWord({
-                mutedWords,
-                text: external.title + ' ' + external.description,
-                facets: [],
-                outlineTags: [],
-                languages: [],
-                isOwnPost,
-              })
-          }
-
-          if (AppBskyEmbedImages.isMain(embeddedPost.embed.media)) {
-            for (const image of embeddedPost.embed.media.images) {
-              embedMuted =
-                embedMuted ||
-                hasMutedWord({
-                  mutedWords,
-                  text: image.alt,
-                  facets: [],
-                  outlineTags: [],
-                  languages: AppBskyFeedPost.isRecord(embeddedPost.record)
-                    ? embeddedPost.langs
-                    : [],
-                  isOwnPost,
-                })
-            }
-          }
-        }
-      }
-    }
-
-    if (AppBskyEmbedExternal.isView(subject.embed)) {
-      const {external} = subject.embed
-
-      externalMuted =
-        externalMuted ||
-        hasMutedWord({
-          mutedWords,
-          text: external.title + ' ' + external.description,
-          facets: [],
-          outlineTags: [],
-          languages: [],
-          isOwnPost,
-        })
-    }
-
-    if (
-      AppBskyEmbedRecordWithMedia.isView(subject.embed) &&
-      AppBskyEmbedRecord.isViewRecord(subject.embed.record.record)
-    ) {
-      if (AppBskyFeedPost.isRecord(subject.embed.record.record.value)) {
-        const post = subject.embed.record.record.value
-        embedMuted =
-          embedMuted ||
-          hasMutedWord({
-            mutedWords,
-            text: post.text,
-            facets: post.facets,
-            outlineTags: post.tags,
-            languages: post.langs,
-            isOwnPost,
-          })
-      }
-
-      if (AppBskyEmbedImages.isView(subject.embed.media)) {
-        for (const image of subject.embed.media.images) {
-          embedMuted =
-            embedMuted ||
-            hasMutedWord({
-              mutedWords,
-              text: image.alt,
-              facets: [],
-              outlineTags: [],
-              languages: AppBskyFeedPost.isRecord(subject.record)
-                ? subject.record.langs
-                : [],
-              isOwnPost,
-            })
-        }
-      }
-    }
-
-    if (embedHidden) {
-      moderations.embed.filter = true
-      moderations.embed.blur = true
-      if (!moderations.embed.cause) {
-        moderations.embed.cause = {
-          // @ts-ignore Temporary extension to the moderation system -prf
-          type: 'post-hidden',
-          source: {type: 'user'},
-          priority: 1,
-        }
-      }
-    } else if (externalMuted || embedMuted) {
-      moderations.content.filter = true
-      moderations.content.blur = true
-      if (!moderations.content.cause) {
-        moderations.content.cause = {
-          // @ts-ignore Temporary extension to the moderation system -prf
-          type: 'muted-word',
-          source: {type: 'user'},
-          priority: 1,
-        }
-      }
-    }
-  }
-
-  return moderations
+  return moderatePost(subject, opts)
+}
+
+function translateOldLabels(subject: Parameters<ModeratePost>[0]) {
+  if (subject.labels) {
+    for (const label of subject.labels) {
+      if (
+        label.val === 'gore' &&
+        (!label.src || label.src === BSKY_LABELER_DID)
+      ) {
+        label.val = 'graphic-media'
+      }
+    }
+  }
 }

src/lib/moderation.ts

@@ -1,144 +1,20 @@
-import {ModerationCause, ProfileModeration, PostModeration} from '@atproto/api'
+import {
+  ModerationCause,
+  ModerationUI,
+  InterpretedLabelValueDefinition,
+  LABELS,
+  AppBskyLabelerDefs,
+  BskyAgent,
+  ModerationOpts,
+} from '@atproto/api'
 
-export interface ModerationCauseDescription {
-  name: string
-  description: string
-}
-
-export function describeModerationCause(
-  cause: ModerationCause | undefined,
-  context: 'account' | 'content',
-): ModerationCauseDescription {
-  if (!cause) {
-    return {
-      name: 'Content Warning',
-      description:
-        'Moderator has chosen to set a general warning on the content.',
-    }
-  }
-  if (cause.type === 'blocking') {
-    if (cause.source.type === 'list') {
-      return {
-        name: `User Blocked by "${cause.source.list.name}"`,
-        description:
-          'You have blocked this user. You cannot view their content.',
-      }
-    } else {
-      return {
-        name: 'User Blocked',
-        description:
-          'You have blocked this user. You cannot view their content.',
-      }
-    }
-  }
-  if (cause.type === 'blocked-by') {
-    return {
-      name: 'User Blocking You',
-      description: 'This user has blocked you. You cannot view their content.',
-    }
-  }
-  if (cause.type === 'block-other') {
-    return {
-      name: 'Content Not Available',
-      description:
-        'This content is not available because one of the users involved has blocked the other.',
-    }
-  }
-  if (cause.type === 'muted') {
-    if (cause.source.type === 'list') {
-      return {
-        name:
-          context === 'account'
-            ? `Muted by "${cause.source.list.name}"`
-            : `Post by muted user ("${cause.source.list.name}")`,
-        description: 'You have muted this user',
-      }
-    } else {
-      return {
-        name: context === 'account' ? 'Muted User' : 'Post by muted user',
-        description: 'You have muted this user',
-      }
-    }
-  }
-  // @ts-ignore Temporary extension to the moderation system -prf
-  if (cause.type === 'post-hidden') {
-    return {
-      name: 'Post Hidden by You',
-      description: 'You have hidden this post',
-    }
-  }
-  // @ts-ignore Temporary extension to the moderation system -prf
-  if (cause.type === 'muted-word') {
-    return {
-      name: 'Post hidden by muted word',
-      description: `You've chosen to hide a word or tag within this post.`,
-    }
-  }
-  return cause.labelDef.strings[context].en
-}
-
-export function getProfileModerationCauses(
-  moderation: ProfileModeration,
-): ModerationCause[] {
-  /*
-  Gather everything on profile and account that blurs or alerts
-  */
-  return [
-    moderation.decisions.profile.cause,
-    ...moderation.decisions.profile.additionalCauses,
-    moderation.decisions.account.cause,
-    ...moderation.decisions.account.additionalCauses,
-  ].filter(cause => {
-    if (!cause) {
-      return false
-    }
-    if (cause?.type === 'label') {
-      if (
-        cause.labelDef.onwarn === 'blur' ||
-        cause.labelDef.onwarn === 'alert'
-      ) {
-        return true
-      } else {
-        return false
-      }
-    }
-    return true
-  }) as ModerationCause[]
-}
-
-export function isPostMediaBlurred(
-  decisions: PostModeration['decisions'],
-): boolean {
-  return decisions.post.blurMedia
-}
-
-export function isQuoteBlurred(
-  decisions: PostModeration['decisions'],
-): boolean {
-  return (
-    decisions.quote?.blur ||
-    decisions.quote?.blurMedia ||
-    decisions.quote?.filter ||
-    decisions.quotedAccount?.blur ||
-    decisions.quotedAccount?.filter ||
-    false
-  )
-}
-
-export function isCauseALabelOnUri(
-  cause: ModerationCause | undefined,
-  uri: string,
-): boolean {
-  if (cause?.type !== 'label') {
-    return false
-  }
-  return cause.label.uri === uri
-}
+import {sanitizeDisplayName} from '#/lib/strings/display-names'
+import {sanitizeHandle} from '#/lib/strings/handles'
 
 export function getModerationCauseKey(cause: ModerationCause): string {
   const source =
     cause.source.type === 'labeler'
-      ? cause.source.labeler.did
+      ? cause.source.did
       : cause.source.type === 'list'
       ? cause.source.list.uri
       : 'user'
@@ -147,3 +23,59 @@ export function getModerationCauseKey(cause: ModerationCause): string {
   }
   return `${cause.type}:${source}`
 }
+
+export function isJustAMute(modui: ModerationUI): boolean {
+  return modui.filters.length === 1 && modui.filters[0].type === 'muted'
+}
+
+export function getLabelingServiceTitle({
+  displayName,
+  handle,
+}: {
+  displayName?: string
+  handle: string
+}) {
+  return displayName
+    ? sanitizeDisplayName(displayName)
+    : sanitizeHandle(handle, '@')
+}
+
+export function lookupLabelValueDefinition(
+  labelValue: string,
+  customDefs: InterpretedLabelValueDefinition[] | undefined,
+): InterpretedLabelValueDefinition | undefined {
+  let def
+  if (!labelValue.startsWith('!') && customDefs) {
+    def = customDefs.find(d => d.identifier === labelValue)
+  }
+  if (!def) {
+    def = LABELS[labelValue as keyof typeof LABELS]
+  }
+  return def
+}
+
+export function isAppLabeler(
+  labeler:
+    | string
+    | AppBskyLabelerDefs.LabelerView
+    | AppBskyLabelerDefs.LabelerViewDetailed,
+): boolean {
+  if (typeof labeler === 'string') {
+    return BskyAgent.appLabelers.includes(labeler)
+  }
+  return BskyAgent.appLabelers.includes(labeler.creator.did)
+}
+
+export function isLabelerSubscribed(
+  labeler:
+    | string
+    | AppBskyLabelerDefs.LabelerView
+    | AppBskyLabelerDefs.LabelerViewDetailed,
+  modOpts: ModerationOpts,
+) {
+  labeler = typeof labeler === 'string' ? labeler : labeler.creator.did
+  if (isAppLabeler(labeler)) {
+    return true
+  }
+  return modOpts.prefs.labelers.find(l => l.did === labeler)
+}

src/lib/moderation/useGlobalLabelStrings.ts

@@ -0,0 +1,52 @@
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useMemo} from 'react'
+
+export type GlobalLabelStrings = Record<
+  string,
+  {
+    name: string
+    description: string
+  }
+>
+
+export function useGlobalLabelStrings(): GlobalLabelStrings {
+  const {_} = useLingui()
+  return useMemo(
+    () => ({
+      '!hide': {
+        name: _(msg`Content Blocked`),
+        description: _(msg`This content has been hidden by the moderators.`),
+      },
+      '!warn': {
+        name: _(msg`Content Warning`),
+        description: _(
+          msg`This content has received a general warning from moderators.`,
+        ),
+      },
+      '!no-unauthenticated': {
+        name: _(msg`Sign-in Required`),
+        description: _(
+          msg`This user has requested that their content only be shown to signed-in users.`,
+        ),
+      },
+      porn: {
+        name: _(msg`Pornography`),
+        description: _(msg`Explicit sexual images.`),
+      },
+      sexual: {
+        name: _(msg`Sexually Suggestive`),
+        description: _(msg`Does not include nudity.`),
+      },
+      nudity: {
+        name: _(msg`Non-sexual Nudity`),
+        description: _(msg`E.g. artistic nudes.`),
+      },
+      'graphic-media': {
+        name: _(msg`Graphic Media`),
+        description: _(msg`Explicit or potentially disturbing media.`),
+      },
+    }),
+    [_],
+  )
+}

src/lib/moderation/useLabelBehaviorDescription.ts

@@ -0,0 +1,70 @@
+import {InterpretedLabelValueDefinition, LabelPreference} from '@atproto/api'
+import {useLingui} from '@lingui/react'
+import {msg} from '@lingui/macro'
+
+export function useLabelBehaviorDescription(
+  labelValueDef: InterpretedLabelValueDefinition,
+  pref: LabelPreference,
+) {
+  const {_} = useLingui()
+  if (pref === 'ignore') {
+    return _(msg`Off`)
+  }
+  if (labelValueDef.blurs === 'content' || labelValueDef.blurs === 'media') {
+    if (pref === 'hide') {
+      return _(msg`Hide`)
+    }
+    return _(msg`Warn`)
+  } else if (labelValueDef.severity === 'alert') {
+    if (pref === 'hide') {
+      return _(msg`Hide`)
+    }
+    return _(msg`Warn`)
+  } else if (labelValueDef.severity === 'inform') {
+    if (pref === 'hide') {
+      return _(msg`Hide`)
+    }
+    return _(msg`Show badge`)
+  } else {
+    if (pref === 'hide') {
+      return _(msg`Hide`)
+    }
+    return _(msg`Disabled`)
+  }
+}
+
+export function useLabelLongBehaviorDescription(
+  labelValueDef: InterpretedLabelValueDefinition,
+  pref: LabelPreference,
+) {
+  const {_} = useLingui()
+  if (pref === 'ignore') {
+    return _(msg`Disabled`)
+  }
+  if (labelValueDef.blurs === 'content') {
+    if (pref === 'hide') {
+      return _(msg`Warn content and filter from feeds`)
+    }
+    return _(msg`Warn content`)
+  } else if (labelValueDef.blurs === 'media') {
+    if (pref === 'hide') {
+      return _(msg`Blur images and filter from feeds`)
+    }
+    return _(msg`Blur images`)
+  } else if (labelValueDef.severity === 'alert') {
+    if (pref === 'hide') {
+      return _(msg`Show warning and filter from feeds`)
+    }
+    return _(msg`Show warning`)
+  } else if (labelValueDef.severity === 'inform') {
+    if (pref === 'hide') {
+      return _(msg`Show badge and filter from feeds`)
+    }
+    return _(msg`Show badge`)
+  } else {
+    if (pref === 'hide') {
+      return _(msg`Filter from feeds`)
+    }
+    return _(msg`Disabled`)
+  }
+}

src/lib/moderation/useLabelInfo.ts

@@ -0,0 +1,100 @@
+import {
+  ComAtprotoLabelDefs,
+  AppBskyLabelerDefs,
+  LABELS,
+  interpretLabelValueDefinition,
+  InterpretedLabelValueDefinition,
+} from '@atproto/api'
+import {useLingui} from '@lingui/react'
+import * as bcp47Match from 'bcp-47-match'
+
+import {
+  GlobalLabelStrings,
+  useGlobalLabelStrings,
+} from '#/lib/moderation/useGlobalLabelStrings'
+import {useLabelDefinitions} from '#/state/preferences'
+
+export interface LabelInfo {
+  label: ComAtprotoLabelDefs.Label
+  def: InterpretedLabelValueDefinition
+  strings: ComAtprotoLabelDefs.LabelValueDefinitionStrings
+  labeler: AppBskyLabelerDefs.LabelerViewDetailed | undefined
+}
+
+export function useLabelInfo(label: ComAtprotoLabelDefs.Label): LabelInfo {
+  const {i18n} = useLingui()
+  const {labelDefs, labelers} = useLabelDefinitions()
+  const globalLabelStrings = useGlobalLabelStrings()
+  const def = getDefinition(labelDefs, label)
+  return {
+    label,
+    def,
+    strings: getLabelStrings(i18n.locale, globalLabelStrings, def),
+    labeler: labelers.find(labeler => label.src === labeler.creator.did),
+  }
+}
+
+export function getDefinition(
+  labelDefs: Record<string, InterpretedLabelValueDefinition[]>,
+  label: ComAtprotoLabelDefs.Label,
+): InterpretedLabelValueDefinition {
+  // check local definitions
+  const customDef =
+    !label.val.startsWith('!') &&
+    labelDefs[label.src]?.find(
+      def => def.identifier === label.val && def.definedBy === label.src,
+    )
+  if (customDef) {
+    return customDef
+  }
+
+  // check global definitions
+  const globalDef = LABELS[label.val as keyof typeof LABELS]
+  if (globalDef) {
+    return globalDef
+  }
+
+  // fallback to a noop definition
+  return interpretLabelValueDefinition(
+    {
+      identifier: label.val,
+      severity: 'none',
+      blurs: 'none',
+      defaultSetting: 'ignore',
+      locales: [],
+    },
+    label.src,
+  )
+}
+
+export function getLabelStrings(
+  locale: string,
+  globalLabelStrings: GlobalLabelStrings,
+  def: InterpretedLabelValueDefinition,
+): ComAtprotoLabelDefs.LabelValueDefinitionStrings {
+  if (!def.definedBy) {
+    // global definition, look up strings
+    if (def.identifier in globalLabelStrings) {
+      return globalLabelStrings[
+        def.identifier
+      ] as ComAtprotoLabelDefs.LabelValueDefinitionStrings
+    }
+  } else {
+    // try to find locale match in the definition's strings
+    const localeMatch = def.locales.find(
+      strings => bcp47Match.basicFilter(locale, strings.lang).length > 0,
+    )
+    if (localeMatch) {
+      return localeMatch
+    }
+    // fall back to the zero item if no match
+    if (def.locales[0]) {
+      return def.locales[0]
+    }
+  }
+  return {
+    lang: locale,
+    name: def.identifier,
+    description: `Labeled "${def.identifier}"`,
+  }
+}

src/lib/moderation/useModerationCauseDescription.ts

@@ -0,0 +1,146 @@
+import React from 'react'
+import {
+  BSKY_LABELER_DID,
+  ModerationCause,
+  ModerationCauseSource,
+} from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {getDefinition, getLabelStrings} from './useLabelInfo'
+import {useLabelDefinitions} from '#/state/preferences'
+import {useGlobalLabelStrings} from './useGlobalLabelStrings'
+
+import {Props as SVGIconProps} from '#/components/icons/common'
+import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
+import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
+
+export interface ModerationCauseDescription {
+  icon: React.ComponentType<SVGIconProps>
+  name: string
+  description: string
+  source?: string
+  sourceType?: ModerationCauseSource['type']
+}
+
+export function useModerationCauseDescription(
+  cause: ModerationCause | undefined,
+): ModerationCauseDescription {
+  const {_, i18n} = useLingui()
+  const {labelDefs, labelers} = useLabelDefinitions()
+  const globalLabelStrings = useGlobalLabelStrings()
+
+  return React.useMemo(() => {
+    if (!cause) {
+      return {
+        icon: Warning,
+        name: _(msg`Content Warning`),
+        description: _(
+          msg`Moderator has chosen to set a general warning on the content.`,
+        ),
+      }
+    }
+    if (cause.type === 'blocking') {
+      if (cause.source.type === 'list') {
+        return {
+          icon: CircleBanSign,
+          name: _(msg`User Blocked by "${cause.source.list.name}"`),
+          description: _(
+            msg`You have blocked this user. You cannot view their content.`,
+          ),
+        }
+      } else {
+        return {
+          icon: CircleBanSign,
+          name: _(msg`User Blocked`),
+          description: _(
+            msg`You have blocked this user. You cannot view their content.`,
+          ),
+        }
+      }
+    }
+    if (cause.type === 'blocked-by') {
+      return {
+        icon: CircleBanSign,
+        name: _(msg`User Blocking You`),
+        description: _(
+          msg`This user has blocked you. You cannot view their content.`,
+        ),
+      }
+    }
+    if (cause.type === 'block-other') {
+      return {
+        icon: CircleBanSign,
+        name: _(msg`Content Not Available`),
+        description: _(
+          msg`This content is not available because one of the users involved has blocked the other.`,
+        ),
+      }
+    }
+    if (cause.type === 'muted') {
+      if (cause.source.type === 'list') {
+        return {
+          icon: EyeSlash,
+          name: _(msg`Muted by "${cause.source.list.name}"`),
+          description: _(msg`You have muted this user`),
+        }
+      } else {
+        return {
+          icon: EyeSlash,
+          name: _(msg`Account Muted`),
+          description: _(msg`You have muted this account.`),
+        }
+      }
+    }
+    if (cause.type === 'mute-word') {
+      return {
+        icon: EyeSlash,
+        name: _(msg`Post Hidden by Muted Word`),
+        description: _(
+          msg`You've chosen to hide a word or tag within this post.`,
+        ),
+      }
+    }
+    if (cause.type === 'hidden') {
+      return {
+        icon: EyeSlash,
+        name: _(msg`Post Hidden by You`),
+        description: _(msg`You have hidden this post`),
+      }
+    }
+    if (cause.type === 'label') {
+      const def = cause.labelDef || getDefinition(labelDefs, cause.label)
+      const strings = getLabelStrings(i18n.locale, globalLabelStrings, def)
+      const labeler = labelers.find(l => l.creator.did === cause.label.src)
+      let source =
+        labeler?.creator.displayName ||
+        (labeler?.creator.handle ? '@' + labeler?.creator.handle : undefined)
+      if (!source) {
+        if (cause.label.src === BSKY_LABELER_DID) {
+          source = 'Bluesky Moderation'
+        } else {
+          source = cause.label.src
+        }
+      }
+      return {
+        icon:
+          def.identifier === '!no-unauthenticated'
+            ? EyeSlash
+            : def.severity === 'alert'
+            ? Warning
+            : CircleInfo,
+        name: strings.name,
+        description: strings.description,
+        source,
+        sourceType: cause.source.type,
+      }
+    }
+    // should never happen
+    return {
+      icon: CircleInfo,
+      name: '',
+      description: ``,
+    }
+  }, [labelDefs, labelers, globalLabelStrings, cause, _, i18n.locale])
+}

src/lib/moderation/useReportOptions.ts

@@ -0,0 +1,94 @@
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useMemo} from 'react'
+import {ComAtprotoModerationDefs} from '@atproto/api'
+
+export interface ReportOption {
+  reason: string
+  title: string
+  description: string
+}
+
+interface ReportOptions {
+  account: ReportOption[]
+  post: ReportOption[]
+  list: ReportOption[]
+  feedgen: ReportOption[]
+  other: ReportOption[]
+}
+
+export function useReportOptions(): ReportOptions {
+  const {_} = useLingui()
+  return useMemo(() => {
+    const other = {
+      reason: ComAtprotoModerationDefs.REASONOTHER,
+      title: _(msg`Other`),
+      description: _(msg`An issue not included in these options`),
+    }
+    const common = [
+      {
+        reason: ComAtprotoModerationDefs.REASONRUDE,
+        title: _(msg`Anti-Social Behavior`),
+        description: _(msg`Harassment, trolling, or intolerance`),
+      },
+      {
+        reason: ComAtprotoModerationDefs.REASONVIOLATION,
+        title: _(msg`Illegal and Urgent`),
+        description: _(msg`Glaring violations of law or terms of service`),
+      },
+      other,
+    ]
+    return {
+      account: [
+        {
+          reason: ComAtprotoModerationDefs.REASONMISLEADING,
+          title: _(msg`Misleading Account`),
+          description: _(
+            msg`Impersonation or false claims about identity or affiliation`,
+          ),
+        },
+        {
+          reason: ComAtprotoModerationDefs.REASONSPAM,
+          title: _(msg`Frequently Posts Unwanted Content`),
+          description: _(msg`Spam; excessive mentions or replies`),
+        },
+        {
+          reason: ComAtprotoModerationDefs.REASONVIOLATION,
+          title: _(msg`Name or Description Violates Community Standards`),
+          description: _(msg`Terms used violate community standards`),
+        },
+        other,
+      ],
+      post: [
+        {
+          reason: ComAtprotoModerationDefs.REASONSPAM,
+          title: _(msg`Spam`),
+          description: _(msg`Excessive mentions or replies`),
+        },
+        {
+          reason: ComAtprotoModerationDefs.REASONSEXUAL,
+          title: _(msg`Unwanted Sexual Content`),
+          description: _(msg`Nudity or pornography not labeled as such`),
+        },
+        ...common,
+      ],
+      list: [
+        {
+          reason: ComAtprotoModerationDefs.REASONVIOLATION,
+          title: _(msg`Name or Description Violates Community Standards`),
+          description: _(msg`Terms used violate community standards`),
+        },
+        ...common,
+      ],
+      feedgen: [
+        {
+          reason: ComAtprotoModerationDefs.REASONVIOLATION,
+          title: _(msg`Name or Description Violates Community Standards`),
+          description: _(msg`Terms used violate community standards`),
+        },
+        ...common,
+      ],
+      other: common,
+    }
+  }, [_])
+}

src/lib/notifications/notifications.ts

@@ -7,6 +7,7 @@ import {logger} from '#/logger'
 import {RQKEY as RQKEY_NOTIFS} from '#/state/queries/notifications/feed'
 import {truncateAndInvalidate} from '#/state/queries/util'
 import {SessionAccount, getAgent} from '#/state/session'
+import {logEvent} from '../statsig/statsig'
 
 const SERVICE_DID = (serviceUrl?: string) =>
   serviceUrl?.includes('staging')
@@ -123,6 +124,7 @@ export function init(queryClient: QueryClient) {
         logger.DebugContext.notifications,
       )
       track('Notificatons:OpenApp')
+      logEvent('notifications:openApp', {})
       truncateAndInvalidate(queryClient, RQKEY_NOTIFS())
       resetToTab('NotificationsTab') // open notifications tab
     }

src/lib/react-query.ts

@@ -1,7 +1,14 @@
 import {AppState, AppStateStatus} from 'react-native'
 import {QueryClient, focusManager} from '@tanstack/react-query'
+import {createAsyncStoragePersister} from '@tanstack/query-async-storage-persister'
+import AsyncStorage from '@react-native-async-storage/async-storage'
+import {PersistQueryClientProviderProps} from '@tanstack/react-query-persist-client'
+
 import {isNative} from '#/platform/detection'
 
+// any query keys in this array will be persisted to AsyncStorage
+const STORED_CACHE_QUERY_KEYS = ['labelers-detailed-info']
+
 focusManager.setEventListener(onFocus => {
   if (isNative) {
     const subscription = AppState.addEventListener(
@@ -48,3 +55,16 @@ export const queryClient = new QueryClient({
     },
   },
 })
+
+export const asyncStoragePersister = createAsyncStoragePersister({
+  storage: AsyncStorage,
+  key: 'queryCache',
+})
+
+export const dehydrateOptions: PersistQueryClientProviderProps['persistOptions']['dehydrateOptions'] =
+  {
+    shouldDehydrateMutation: (_: any) => false,
+    shouldDehydrateQuery: query => {
+      return STORED_CACHE_QUERY_KEYS.includes(String(query.queryKey[0]))
+    },
+  }

src/lib/routes/types.ts

@@ -21,7 +21,9 @@ export type CommonNavigatorParams = {
   PostRepostedBy: {name: string; rkey: string}
   ProfileFeed: {name: string; rkey: string}
   ProfileFeedLikedBy: {name: string; rkey: string}
+  ProfileLabelerLikedBy: {name: string}
   Debug: undefined
+  DebugMod: undefined
   Log: undefined
   Support: undefined
   PrivacyPolicy: undefined

src/lib/statsig/events.ts

@@ -2,6 +2,9 @@ export type LogEvents = {
   init: {
     initMs: number
   }
+  'notifications:openApp': {}
+  'state:background': {}
+  'state:foreground': {}
   'feed:endReached': {
     feedType: string
     itemCount: number

src/lib/statsig/statsig.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
+import {Platform} from 'react-native'
 import {
   Statsig,
   StatsigProvider,
   useGate as useStatsigGate,
 } from 'statsig-react-native-expo'
+import {AppState, AppStateStatus} from 'react-native'
 import {useSession} from '../../state/session'
 import {sha256} from 'js-sha256'
 import {LogEvents} from './events'
@@ -58,9 +60,25 @@ function toStatsigUser(did: string | undefined) {
   if (did) {
     userID = sha256(did)
   }
-  return {userID}
+  return {
+    userID,
+    platform: Platform.OS,
+  }
 }
 
+let lastState: AppStateStatus = AppState.currentState
+AppState.addEventListener('change', (state: AppStateStatus) => {
+  if (state === lastState) {
+    return
+  }
+  lastState = state
+  if (state === 'active') {
+    logEvent('state:foreground', {})
+  } else {
+    logEvent('state:background', {})
+  }
+})
+
 export function Provider({children}: {children: React.ReactNode}) {
   const {currentAccount} = useSession()
   const currentStatsigUser = React.useMemo(

src/lib/strings/display-names.ts

@@ -1,5 +1,4 @@
 import {ModerationUI} from '@atproto/api'
-import {describeModerationCause} from '../moderation'
 
 // \u2705 = ✅
 // \u2713 = ✓
@@ -14,7 +13,7 @@ export function sanitizeDisplayName(
   moderation?: ModerationUI,
 ): string {
   if (moderation?.blur) {
-    return `⚠${describeModerationCause(moderation.cause, 'account').name}`
+    return ''
   }
   if (typeof str === 'string') {
     return str.replace(CHECK_MARKS_RE, '').replace(CONTROL_CHARS_RE, '').trim()