Merge remote-tracking branch 'origin/main' into hailey/oauth-exploration-web

.eslintrc.js

@@ -71,6 +71,19 @@ module.exports = {
     'simple-import-sort/exports': 'warn',
     // TODO: Reenable when we figure out why it gets stuck on CI.
     // 'react-compiler/react-compiler': 'error',
+    'no-restricted-imports': [
+      'error',
+      {
+        paths: [
+          {
+            name: '@atproto/api',
+            importNames: ['moderatePost'],
+            message:
+              'Please use `moderatePost_wrapped` from `#/lib/moderatePost_wrapped` instead.',
+          },
+        ],
+      },
+    ],
   },
   ignorePatterns: [
     '**/__mocks__/*.ts',

__tests__/lib/string.test.ts

@@ -340,12 +340,14 @@ describe('parseEmbedPlayerFromUrl', () => {
     'https://youtube.com/watch?v=videoId',
     'https://youtube.com/watch?v=videoId&feature=share',
     'https://youtube.com/shorts/videoId',
+    'https://youtube.com/live/videoId',
     'https://m.youtube.com/watch?v=videoId',
     'https://music.youtube.com/watch?v=videoId',
 
     'https://youtube.com/shorts/',
     'https://youtube.com/',
     'https://youtube.com/random',
+    'https://youtube.com/live/',
 
     'https://twitch.tv/channelName',
     'https://www.twitch.tv/channelName',
@@ -475,10 +477,16 @@ describe('parseEmbedPlayerFromUrl', () => {
       source: 'youtube',
       playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
     },
+    {
+      type: 'youtube_video',
+      source: 'youtube',
+      playerUri: 'https://bsky.app/iframe/youtube.html?videoId=videoId&start=0',
+    },
 
     undefined,
     undefined,
     undefined,
+    undefined,
 
     {
       type: 'twitch_video',

assets/icons/arrowsDiagonalIn_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.957 3.043a1 1 0 0 1 0 1.414L16.414 9H20a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1V4a1 1 0 1 1 2 0v3.586l4.543-4.543a1 1 0 0 1 1.414 0ZM3 14a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-3.586l-4.543 4.543a1 1 0 0 1-1.414-1.414L7.586 15H4a1 1 0 0 1-1-1Z" fill="#000"/></svg>

assets/icons/arrowsDiagonalIn_stroke2_corner2_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M20.957 3.043a1 1 0 0 1 0 1.414L16.414 9H20a1 1 0 1 1 0 2h-5a2 2 0 0 1-2-2V4a1 1 0 1 1 2 0v3.586l4.543-4.543a1 1 0 0 1 1.414 0ZM3 14a1 1 0 0 1 1-1h5a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0v-3.586l-4.543 4.543a1 1 0 0 1-1.414-1.414L7.586 15H4a1 1 0 0 1-1-1Z" fill="#000"/></svg>

assets/icons/arrowsDiagonalOut_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M14 5a1 1 0 1 1 0-2h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L17.586 5H14ZM4 13a1 1 0 0 1 1 1v3.586l4.293-4.293a1 1 0 0 1 1.414 1.414L6.414 19H10a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1Z" fill="#000"/></svg>

assets/icons/arrowsDiagonalOut_stroke2_corner2_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M13 4a1 1 0 0 1 1-1h5a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0V6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L17.586 5H14a1 1 0 0 1-1-1Zm-9 9a1 1 0 0 1 1 1v3.586l4.293-4.293a1 1 0 0 1 1.414 1.414L6.414 19H10a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2v-5a1 1 0 0 1 1-1Z" fill="#000"/></svg>

assets/icons/cc_filled_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm11.543 7.293a1 1 0 0 1 1.414 0 1 1 0 0 0 1.414-1.414 3 3 0 1 0 0 4.242 1 1 0 0 0-1.414-1.414 1 1 0 0 1-1.414-1.414Zm-6 0a1 1 0 0 1 1.414 0 1 1 0 0 0 1.414-1.414 3 3 0 1 0 0 4.243 1 1 0 0 0-1.414-1.415 1 1 0 0 1-1.414-1.414Z" fill="#000"/></svg>

assets/icons/cc_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v14h14V5H5Zm10.957 6.293a1 1 0 1 0 0 1.414 1 1 0 0 1 1.414 1.414 3 3 0 1 1 0-4.242 1 1 0 0 1-1.414 1.414Zm-6.331-.22a1 1 0 1 0 .331 1.634 1 1 0 0 1 1.414 1.414 3 3 0 1 1 0-4.242 1 1 0 0 1-1.414 1.414.994.994 0 0 0-.331-.22Z" fill="#000"/></svg>

assets/icons/eye_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.135 12C5.413 16.088 8.77 18 12 18s6.587-1.912 8.865-6C18.587 7.912 15.23 6 12 6c-3.228 0-6.587 1.912-8.865 6ZM12 4c4.24 0 8.339 2.611 10.888 7.54a1 1 0 0 1 0 .92C20.338 17.388 16.24 20 12 20c-4.24 0-8.339-2.611-10.888-7.54a1 1 0 0 1 0-.92C3.662 6.612 7.76 4 12 4Zm0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z" clip-rule="evenodd"/></svg>

assets/icons/pause_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4ZM14 4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z" fill="#000"/></svg>

assets/icons/pause_filled_corner2_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 6a3 3 0 0 1 6 0v12a3 3 0 1 1-6 0V6ZM14 6a3 3 0 1 1 6 0v12a3 3 0 1 1-6 0V6Z" fill="#000"/></svg>

assets/icons/pause_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4Zm2 1v14h2V5H6Zm8-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Zm2 1v14h2V5h-2Z" fill="#000"/></svg>

assets/icons/pause_stroke2_corner2_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 6a3 3 0 0 1 6 0v12a3 3 0 1 1-6 0V6Zm3-1a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Zm7 1a3 3 0 1 1 6 0v12a3 3 0 1 1-6 0V6Zm3-1a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Z" fill="#000"/></svg>

assets/icons/play_filled_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6.514 2.143A1 1 0 0 0 5 3v18a1 1 0 0 0 1.514.858l15-9a1 1 0 0 0 0-1.716l-15-9Z" fill="#000"/></svg>

assets/icons/play_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.507 2.13a1 1 0 0 1 1.008.013l15 9a1 1 0 0 1 0 1.714l-15 9A1 1 0 0 1 5 21V3a1 1 0 0 1 .507-.87ZM7 4.766v14.468L19.056 12 7 4.766Z" fill="#000"/></svg>

bskyembed/.eslintrc

@@ -10,11 +10,12 @@
   ],
   "rules": {
     "simple-import-sort/imports": "warn",
-    "simple-import-sort/exports": "warn"
+    "simple-import-sort/exports": "warn",
+    'no-else-return': 'off'
   },
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": "latest",
     "project": "./bskyembed/tsconfig.json"
   }
-}
+}

bskyembed/assets/starterPack.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><defs><linearGradient x1="0" y1="0" x2="100%" y2="0" gradientTransform="rotate(45)" id="sky_V5w1FF_xb91wVQ_1euhBX"><stop offset="0" stop-color="#0A7AFF"></stop><stop offset="1" stop-color="#59B9FF"></stop></linearGradient></defs><path fill="url(#sky_V5w1FF_xb91wVQ_1euhBX)" fill-rule="evenodd" clip-rule="evenodd" d="M11.26 5.227 5.02 6.899c-.734.197-1.17.95-.973 1.685l1.672 6.24c.197.734.951 1.17 1.685.973l6.24-1.672c.734-.197 1.17-.951.973-1.685L12.945 6.2a1.375 1.375 0 0 0-1.685-.973Zm-6.566.459a2.632 2.632 0 0 0-1.86 3.223l1.672 6.24a2.632 2.632 0 0 0 3.223 1.861l6.24-1.672a2.631 2.631 0 0 0 1.861-3.223l-1.672-6.24a2.632 2.632 0 0 0-3.223-1.861l-6.24 1.672Z"></path><path fill="url(#sky_V5w1FF_xb91wVQ_1euhBX)" fill-rule="evenodd" clip-rule="evenodd" d="M15.138 18.411a4.606 4.606 0 1 0 0-9.211 4.606 4.606 0 0 0 0 9.211Zm0 1.257a5.862 5.862 0 1 0 0-11.724 5.862 5.862 0 0 0 0 11.724Z"></path></svg>

bskyembed/package.json

@@ -9,7 +9,7 @@
     "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx src"
   },
   "dependencies": {
-    "@atproto/api": "^0.12.2",
+    "@atproto/api": "0.13.1",
     "@preact/preset-vite": "^2.8.2",
     "@vitejs/plugin-legacy": "^5.3.2",
     "preact": "^10.4.8",

bskyembed/src/components/embed.tsx

@@ -6,12 +6,15 @@ import {
   AppBskyFeedDefs,
   AppBskyFeedPost,
   AppBskyGraphDefs,
+  AppBskyGraphStarterpack,
   AppBskyLabelerDefs,
+  AtUri,
 } from '@atproto/api'
 import {ComponentChildren, h} from 'preact'
 import {useMemo} from 'preact/hooks'
 
 import infoIcon from '../../assets/circleInfo_stroke2_corner0_rounded.svg'
+import starterPackIcon from '../../assets/starterPack.svg'
 import {CONTENT_LABELS, labelsToInfo} from '../labels'
 import {getRkey} from '../utils'
 import {Link} from './link'
@@ -105,7 +108,7 @@ export function Embed({
       // Case 3.2: List
       if (AppBskyGraphDefs.isListView(record)) {
         return (
-          <GenericWithImage
+          <GenericWithImageEmbed
             image={record.avatar}
             title={record.name}
             href={`/profile/${record.creator.did}/lists/${getRkey(record)}`}
@@ -122,7 +125,7 @@ export function Embed({
       // Case 3.3: Feed
       if (AppBskyFeedDefs.isGeneratorView(record)) {
         return (
-          <GenericWithImage
+          <GenericWithImageEmbed
             image={record.avatar}
             title={record.displayName}
             href={`/profile/${record.creator.did}/feed/${getRkey(record)}`}
@@ -134,28 +137,27 @@ export function Embed({
 
       // Case 3.4: Labeler
       if (AppBskyLabelerDefs.isLabelerView(record)) {
-        return (
+        // Embed type does not exist in the app, so show nothing
-          <GenericWithImage
+        return null
-            image={record.creator.avatar}
-            title={record.creator.displayName || record.creator.handle}
-            href={`/profile/${record.creator.did}`}
-            subtitle="Labeler"
-            description={`Liked by ${record.likeCount ?? 0} users`}
-          />
-        )
       }
 
-      // Case 3.5: Post not found
+      // Case 3.5: Starter pack
+      if (AppBskyGraphDefs.isStarterPackViewBasic(record)) {
+        return <StarterPackEmbed content={record} />
+      }
+
+      // Case 3.6: Post not found
       if (AppBskyEmbedRecord.isViewNotFound(record)) {
         return <Info>Quoted post not found, it may have been deleted.</Info>
       }
 
-      // Case 3.6: Post blocked
+      // Case 3.7: Post blocked
       if (AppBskyEmbedRecord.isViewBlocked(record)) {
         return <Info>The quoted post is blocked.</Info>
       }
 
-      throw new Error('Unknown embed type')
+      // Unknown embed type
+      return null
     }
 
     // Case 4: Record with media
@@ -182,7 +184,8 @@ export function Embed({
       )
     }
 
-    throw new Error('Unsupported embed type')
+    // Unknown embed type
+    return null
   } catch (err) {
     return (
       <Info>{err instanceof Error ? err.message : 'An error occurred'}</Info>
@@ -314,7 +317,7 @@ function ExternalEmbed({
   )
 }
 
-function GenericWithImage({
+function GenericWithImageEmbed({
   title,
   subtitle,
   href,
@@ -350,3 +353,60 @@ function GenericWithImage({
     </Link>
   )
 }
+
+function StarterPackEmbed({
+  content,
+}: {
+  content: AppBskyGraphDefs.StarterPackViewBasic
+}) {
+  if (!AppBskyGraphStarterpack.isRecord(content.record)) {
+    return null
+  }
+
+  const starterPackHref = getStarterPackHref(content)
+  const imageUri = getStarterPackImage(content)
+
+  return (
+    <Link
+      href={starterPackHref}
+      className="w-full rounded-lg overflow-hidden border flex flex-col items-stretch">
+      <img src={imageUri} className="aspect-[1.91/1] object-cover" />
+      <div className="py-3 px-4">
+        <div className="flex space-x-2 items-center">
+          <img src={starterPackIcon} className="w-10 h-10" />
+          <div>
+            <p className="font-semibold leading-[21px]">
+              {content.record.name}
+            </p>
+            <p className="text-sm text-textLight line-clamp-2 leading-[18px]">
+              Starter pack by{' '}
+              {content.creator.displayName || `@${content.creator.handle}`}
+            </p>
+          </div>
+        </div>
+        {content.record.description && (
+          <p className="text-sm mt-1">{content.record.description}</p>
+        )}
+        {!!content.joinedAllTimeCount && content.joinedAllTimeCount > 50 && (
+          <p className="text-sm font-semibold text-textLight mt-1">
+            {content.joinedAllTimeCount} users have joined!
+          </p>
+        )}
+      </div>
+    </Link>
+  )
+}
+
+// from #/lib/strings/starter-pack.ts
+function getStarterPackImage(starterPack: AppBskyGraphDefs.StarterPackView) {
+  const rkey = new AtUri(starterPack.uri).rkey
+  return `https://ogcard.cdn.bsky.app/start/${starterPack.creator.did}/${rkey}`
+}
+
+function getStarterPackHref(
+  starterPack: AppBskyGraphDefs.StarterPackViewBasic,
+) {
+  const rkey = new AtUri(starterPack.uri).rkey
+  const handleOrDid = starterPack.creator.handle || starterPack.creator.did
+  return `/starter-pack/${handleOrDid}/${rkey}`
+}

bskyembed/src/components/post.tsx

@@ -132,7 +132,10 @@ function PostContent({record}: {record: AppBskyFeedPost.Record | null}) {
           key={counter}
           href={segment.link.uri}
           className="text-blue-400 hover:underline"
-          disableTracking={!segment.link.uri.startsWith('https://bsky.app')}>
+          disableTracking={
+            !segment.link.uri.startsWith('https://bsky.app') &&
+            !segment.link.uri.startsWith('https://go.bsky.app')
+          }>
           {segment.text}
         </Link>,
       )

bskyembed/src/screens/post.tsx

@@ -1,6 +1,6 @@
 import '../index.css'
 
-import {AppBskyFeedDefs, BskyAgent} from '@atproto/api'
+import {AppBskyFeedDefs, AtpAgent} from '@atproto/api'
 import {h, render} from 'preact'
 
 import logo from '../../assets/logo.svg'
@@ -12,7 +12,7 @@ import {getRkey} from '../utils'
 const root = document.getElementById('app')
 if (!root) throw new Error('No root element')
 
-const agent = new BskyAgent({
+const agent = new AtpAgent({
   service: 'https://public.api.bsky.app',
 })
 

bskyembed/yarn.lock

@@ -20,15 +20,16 @@
     "@jridgewell/gen-mapping" "^0.3.5"
     "@jridgewell/trace-mapping" "^0.3.24"
 
-"@atproto/api@^0.12.2":
+"@atproto/api@0.13.1":
-  version "0.12.2"
+  version "0.13.1"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.12.2.tgz#5df6d4f60dea0395c84fdebd9e81a7e853edf130"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.13.1.tgz#fbf4306e4465d5467aaf031308c1b47dcc8039d0"
-  integrity sha512-UVzCiDZH2j0wrr/O8nb1edD5cYLVqB5iujueXUCbHS3rAwIxgmyLtA3Hzm2QYsGPo/+xsIg1fNvpq9rNT6KWUA==
+  integrity sha512-DL3iBfavn8Nnl48FmnAreQB0k0cIkW531DJ5JAHUCQZo10Nq0ZLk2/WFxcs0KuBG5wuLnGUdo+Y6/GQPVq8dYw==
   dependencies:
     "@atproto/common-web" "^0.3.0"
-    "@atproto/lexicon" "^0.4.0"
+    "@atproto/lexicon" "^0.4.1"
     "@atproto/syntax" "^0.3.0"
-    "@atproto/xrpc" "^0.5.0"
+    "@atproto/xrpc" "^0.6.0"
+    await-lock "^2.2.2"
     multiformats "^9.9.0"
     tlds "^1.234.0"
 
@@ -42,29 +43,29 @@
     uint8arrays "3.0.0"
     zod "^3.21.4"
 
-"@atproto/lexicon@^0.4.0":
+"@atproto/lexicon@^0.4.1":
-  version "0.4.0"
+  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/@atproto/lexicon/-/lexicon-0.4.0.tgz#63e8829945d80c25524882caa8ed27b1151cc576"
+  resolved "https://registry.yarnpkg.com/@atproto/lexicon/-/lexicon-0.4.1.tgz#19155210570a2fafbcc7d4f655d9b813948e72a0"
-  integrity sha512-RvCBKdSI4M8qWm5uTNz1z3R2yIvIhmOsMuleOj8YR6BwRD+QbtUBy3l+xQ7iXf4M5fdfJFxaUNa6Ty0iRwdKqQ==
+  integrity sha512-bzyr+/VHXLQWbumViX5L7h1NKQObfs8Z+XZJl43OUK8nYFUI4e/sW1IZKRNfw7Wvi5YVNK+J+yP3DWIBZhkCYA==
   dependencies:
     "@atproto/common-web" "^0.3.0"
     "@atproto/syntax" "^0.3.0"
     iso-datestring-validator "^2.2.2"
     multiformats "^9.9.0"
-    zod "^3.21.4"
+    zod "^3.23.8"
 
 "@atproto/syntax@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@atproto/syntax/-/syntax-0.3.0.tgz#fafa2dbea9add37253005cb663e7373e05e618b3"
   integrity sha512-Weq0ZBxffGHDXHl9U7BQc2BFJi/e23AL+k+i5+D9hUq/bzT4yjGsrCejkjq0xt82xXDjmhhvQSZ0LqxyZ5woxA==
 
-"@atproto/xrpc@^0.5.0":
+"@atproto/xrpc@^0.6.0":
-  version "0.5.0"
+  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/@atproto/xrpc/-/xrpc-0.5.0.tgz#dacbfd8f7b13f0ab5bd56f8fdd4b460e132a6032"
+  resolved "https://registry.yarnpkg.com/@atproto/xrpc/-/xrpc-0.6.0.tgz#668c3262e67e2afa65951ea79a03bfe3720ddf5c"
-  integrity sha512-swu+wyOLvYW4l3n+VAuJbHcPcES+tin2Lsrp8Bw5aIXIICiuFn1YMFlwK9JwVUzTH21Py1s1nHEjr4CJeElJog==
+  integrity sha512-5BbhBTv5j6MC3iIQ4+vYxQE7nLy2dDGQ+LYJrH8PptOCUdq0Pwg6aRccQ3y52kUZlhE/mzOTZ8Ngiy9pSAyfVQ==
   dependencies:
-    "@atproto/lexicon" "^0.4.0"
+    "@atproto/lexicon" "^0.4.1"
-    zod "^3.21.4"
+    zod "^3.23.8"
 
 "@babel/code-frame@^7.23.5", "@babel/code-frame@^7.24.1", "@babel/code-frame@^7.24.2":
   version "7.24.2"
@@ -1710,6 +1711,11 @@ available-typed-arrays@^1.0.7:
   dependencies:
     possible-typed-array-names "^1.0.0"
 
+await-lock@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/await-lock/-/await-lock-2.2.2.tgz#a95a9b269bfd2f69d22b17a321686f551152bcef"
+  integrity sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw==
+
 babel-plugin-polyfill-corejs2@^0.4.10:
   version "0.4.10"
   resolved "https://registry.yarnpkg.com/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.10.tgz#276f41710b03a64f6467433cab72cbc2653c38b1"
@@ -3730,8 +3736,16 @@ stack-trace@^1.0.0-pre2:
   resolved "https://registry.yarnpkg.com/stack-trace/-/stack-trace-1.0.0-pre2.tgz#46a83a79f1b287807e9aaafc6a5dd8bcde626f9c"
   integrity sha512-2ztBJRek8IVofG9DBJqdy2N5kulaacX30Nz7xmkYF6ale9WBVmIy6mFBchvGX7Vx/MyjBhx+Rcxqrj+dbOnQ6A==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0:
+"string-width-cjs@npm:string-width@^4.2.0":
-  name string-width-cjs
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -3795,7 +3809,14 @@ string.prototype.trimstart@^1.0.8:
     define-properties "^1.2.1"
     es-object-atoms "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -4192,3 +4213,8 @@ zod@^3.21.4:
   version "3.22.4"
   resolved "https://registry.yarnpkg.com/zod/-/zod-3.22.4.tgz#f31c3a9386f61b1f228af56faa9255e845cf3fff"
   integrity sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==
+
+zod@^3.23.8:
+  version "3.23.8"
+  resolved "https://registry.yarnpkg.com/zod/-/zod-3.23.8.tgz#e37b957b5d52079769fb8097099b592f0ef4067d"
+  integrity sha512-XBx9AXhXktjUqnepgTiE5flcKIYWi/rme0Eaj+5Y0lftuGBq+jyRu/md4WnuxqgP1ubdpNCsYEYPxrzVHD8d6g==

bskyweb/cmd/bskyweb/main.go

@@ -41,10 +41,10 @@ func run(args []string) {
 					EnvVars: []string{"ATP_APPVIEW_HOST", "ATP_PDS_HOST"},
 				},
 				&cli.StringFlag{
-					Name:  "ogcard-host",
+					Name:     "ogcard-host",
-					Usage: "scheme, hostname, and port of ogcard service",
+					Usage:    "scheme, hostname, and port of ogcard service",
 					Required: false,
-					EnvVars: []string{"OGCARD_HOST"},
+					EnvVars:  []string{"OGCARD_HOST"},
 				},
 				&cli.StringFlag{
 					Name:     "http-address",
@@ -67,6 +67,13 @@ func run(args []string) {
 					Required: false,
 					EnvVars:  []string{"DEBUG"},
 				},
+				&cli.StringFlag{
+					Name:     "basic-auth-password",
+					Usage:    "optional password to restrict access to web interface",
+					Required: false,
+					Value:    "",
+					EnvVars:  []string{"BASIC_AUTH_PASSWORD"},
+				},
 			},
 		},
 	}

bskyweb/cmd/bskyweb/server.go

@@ -2,6 +2,7 @@ package main
 
 import (
 	"context"
+	"crypto/subtle"
 	"errors"
 	"fmt"
 	"io/fs"
@@ -48,6 +49,7 @@ func serve(cctx *cli.Context) error {
 	appviewHost := cctx.String("appview-host")
 	ogcardHost := cctx.String("ogcard-host")
 	linkHost := cctx.String("link-host")
+	basicAuthPassword := cctx.String("basic-auth-password")
 
 	// Echo
 	e := echo.New()
@@ -140,6 +142,18 @@ func serve(cctx *cli.Context) error {
 		},
 	}))
 
+	// optional password gating of entire web interface
+	if basicAuthPassword != "" {
+		e.Use(middleware.BasicAuth(func(username, password string, c echo.Context) (bool, error) {
+			// Be careful to use constant time comparison to prevent timing attacks
+			if subtle.ConstantTimeCompare([]byte(username), []byte("admin")) == 1 &&
+				subtle.ConstantTimeCompare([]byte(password), []byte(basicAuthPassword)) == 1 {
+				return true, nil
+			}
+			return false, nil
+		}))
+	}
+
 	// redirect trailing slash to non-trailing slash.
 	// all of our current endpoints have no trailing slash.
 	e.Use(middleware.RemoveTrailingSlashWithConfig(middleware.TrailingSlashConfig{
@@ -242,6 +256,7 @@ func serve(cctx *cli.Context) error {
 	e.GET("/profile/:handleOrDID/post/:rkey", server.WebPost)
 	e.GET("/profile/:handleOrDID/post/:rkey/liked-by", server.WebGeneric)
 	e.GET("/profile/:handleOrDID/post/:rkey/reposted-by", server.WebGeneric)
+	e.GET("/profile/:handleOrDID/post/:rkey/quotes", server.WebGeneric)
 
 	// starter packs
 	e.GET("/starter-pack/:handleOrDID/:rkey", server.WebStarterPack)

jest/jestSetup.js

@@ -95,3 +95,16 @@ jest.mock('expo-application', () => ({
   nativeApplicationVersion: '1.0.0',
   nativeBuildVersion: '1',
 }))
+
+jest.mock('expo-modules-core', () => ({
+  requireNativeModule: jest.fn().mockImplementation(moduleName => {
+    if (moduleName === 'ExpoPlatformInfo') {
+      return {
+        getIsReducedMotionEnabled: () => false,
+      }
+    }
+  }),
+  requireNativeViewManager: jest.fn().mockImplementation(moduleName => {
+    return () => null
+  }),
+}))

jest/test-pds.ts

@@ -79,32 +79,33 @@ export async function createServer(
     plc: {port: port2},
   })
 
+  // DISABLED - looks like dev-env added this and now it conflicts
   // add the test mod authority
-  const agent = new BskyAgent({service: pdsUrl})
+  // const agent = new BskyAgent({service: pdsUrl})
-  const res = await agent.api.com.atproto.server.createAccount({
+  // const res = await agent.api.com.atproto.server.createAccount({
-    email: 'mod-authority@test.com',
+  //   email: 'mod-authority@test.com',
-    handle: 'mod-authority.test',
+  //   handle: 'mod-authority.test',
-    password: 'hunter2',
+  //   password: 'hunter2',
-  })
+  // })
-  agent.api.setHeader('Authorization', `Bearer ${res.data.accessJwt}`)
+  // agent.api.setHeader('Authorization', `Bearer ${res.data.accessJwt}`)
-  await agent.api.app.bsky.actor.profile.create(
+  // await agent.api.app.bsky.actor.profile.create(
-    {repo: res.data.did},
+  //   {repo: res.data.did},
-    {
+  //   {
-      displayName: 'Dev-env Moderation',
+  //     displayName: 'Dev-env Moderation',
-      description: `The pretend version of mod.bsky.app`,
+  //     description: `The pretend version of mod.bsky.app`,
-    },
+  //   },
-  )
+  // )
 
-  await agent.api.app.bsky.labeler.service.create(
+  // await agent.api.app.bsky.labeler.service.create(
-    {repo: res.data.did, rkey: 'self'},
+  //   {repo: res.data.did, rkey: 'self'},
-    {
+  //   {
-      policies: {
+  //     policies: {
-        labelValues: ['!hide', '!warn'],
+  //       labelValues: ['!hide', '!warn'],
-        labelValueDefinitions: [],
+  //       labelValueDefinitions: [],
-      },
+  //     },
-      createdAt: new Date().toISOString(),
+  //     createdAt: new Date().toISOString(),
-    },
+  //   },
-  )
+  // )
 
   const pic = fs.readFileSync(
     path.join(__dirname, '..', 'assets', 'default-avatar.png'),

modules/expo-bluesky-swiss-army/android/src/main/java/expo/modules/blueskyswissarmy/platforminfo/ExpoPlatformInfoModule.kt

@@ -0,0 +1,24 @@
+package expo.modules.blueskyswissarmy.platforminfo
+
+import android.provider.Settings
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class ExpoPlatformInfoModule : Module() {
+  override fun definition() =
+    ModuleDefinition {
+      Name("ExpoPlatformInfo")
+
+      // See https://github.com/software-mansion/react-native-reanimated/blob/7df5fd57d608fe25724608835461cd925ff5151d/packages/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/nativeProxy/NativeProxyCommon.java#L242
+      Function("getIsReducedMotionEnabled") {
+        val resolver = appContext.reactContext?.contentResolver ?: return@Function false
+        val scale = Settings.Global.getString(resolver, Settings.Global.TRANSITION_ANIMATION_SCALE) ?: return@Function false
+
+        try {
+          return@Function scale.toFloat() == 0f
+        } catch (_: Error) {
+          return@Function false
+        }
+      }
+    }
+}

modules/expo-bluesky-swiss-army/android/src/main/java/expo/modules/blueskyswissarmy/visibilityview/ExpoBlueskyVisibilityViewModule.kt

@@ -0,0 +1,23 @@
+package expo.modules.blueskyswissarmy.visibilityview
+
+import expo.modules.kotlin.modules.Module
+import expo.modules.kotlin.modules.ModuleDefinition
+
+class ExpoBlueskyVisibilityViewModule : Module() {
+  override fun definition() =
+    ModuleDefinition {
+      Name("ExpoBlueskyVisibilityView")
+
+      AsyncFunction("updateActiveViewAsync") {
+        VisibilityViewManager.updateActiveView()
+      }
+
+      View(VisibilityView::class) {
+        Events(arrayOf("onChangeStatus"))
+
+        Prop("enabled") { view: VisibilityView, prop: Boolean ->
+          view.isViewEnabled = prop
+        }
+      }
+    }
+}

modules/expo-bluesky-swiss-army/android/src/main/java/expo/modules/blueskyswissarmy/visibilityview/VisibilityView.kt

@@ -0,0 +1,63 @@
+package expo.modules.blueskyswissarmy.visibilityview
+
+import android.content.Context
+import android.graphics.Rect
+import expo.modules.kotlin.AppContext
+import expo.modules.kotlin.viewevent.EventDispatcher
+import expo.modules.kotlin.views.ExpoView
+
+class VisibilityView(
+  context: Context,
+  appContext: AppContext,
+) : ExpoView(context, appContext) {
+  var isViewEnabled: Boolean = false
+
+  private val onChangeStatus by EventDispatcher()
+
+  private var isCurrentlyActive = false
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    VisibilityViewManager.addView(this)
+  }
+
+  override fun onDetachedFromWindow() {
+    super.onDetachedFromWindow()
+    VisibilityViewManager.removeView(this)
+  }
+
+  fun setIsCurrentlyActive(isActive: Boolean) {
+    if (isCurrentlyActive == isActive) {
+      return
+    }
+
+    this.isCurrentlyActive = isActive
+    this.onChangeStatus(
+      mapOf(
+        "isActive" to isActive,
+      ),
+    )
+  }
+
+  fun getPositionOnScreen(): Rect? {
+    if (!this.isShown) {
+      return null
+    }
+
+    val screenPosition = intArrayOf(0, 0)
+    this.getLocationInWindow(screenPosition)
+    return Rect(
+      screenPosition[0],
+      screenPosition[1],
+      screenPosition[0] + this.width,
+      screenPosition[1] + this.height,
+    )
+  }
+
+  fun isViewableEnough(): Boolean {
+    val positionOnScreen = this.getPositionOnScreen() ?: return false
+    val visibleArea = positionOnScreen.width() * positionOnScreen.height()
+    val totalArea = this.width * this.height
+    return visibleArea >= 0.5 * totalArea
+  }
+}

modules/expo-bluesky-swiss-army/android/src/main/java/expo/modules/blueskyswissarmy/visibilityview/VisibilityViewManager.kt

@@ -0,0 +1,82 @@
+package expo.modules.blueskyswissarmy.visibilityview
+
+import android.graphics.Rect
+
+class VisibilityViewManager {
+  companion object {
+    private val views = HashMap<Int, VisibilityView>()
+    private var currentlyActiveView: VisibilityView? = null
+    private var prevCount = 0
+
+    fun addView(view: VisibilityView) {
+      this.views[view.id] = view
+
+      if (this.prevCount == 0) {
+        this.updateActiveView()
+      }
+      this.prevCount = this.views.count()
+    }
+
+    fun removeView(view: VisibilityView) {
+      this.views.remove(view.id)
+      this.prevCount = this.views.count()
+    }
+
+    fun updateActiveView() {
+      var activeView: VisibilityView? = null
+      val count = this.views.count()
+
+      if (count == 1) {
+        val view = this.views.values.first()
+        if (view.isViewableEnough()) {
+          activeView = view
+        }
+      } else if (count > 1) {
+        val views = this.views.values
+        var mostVisibleView: VisibilityView? = null
+        var mostVisiblePosition: Rect? = null
+
+        views.forEach { view ->
+          if (!view.isViewableEnough()) {
+            return
+          }
+
+          val position = view.getPositionOnScreen() ?: return@forEach
+          val topY = position.centerY() - (position.height() / 2)
+
+          if (topY >= 150) {
+            if (mostVisiblePosition == null) {
+              mostVisiblePosition = position
+            }
+
+            if (position.centerY() <= mostVisiblePosition!!.centerY()) {
+              mostVisibleView = view
+              mostVisiblePosition = position
+            }
+          }
+        }
+
+        activeView = mostVisibleView
+      }
+
+      if (activeView == this.currentlyActiveView) {
+        return
+      }
+
+      this.clearActiveView()
+      if (activeView != null) {
+        this.setActiveView(activeView)
+      }
+    }
+
+    private fun clearActiveView() {
+      this.currentlyActiveView?.setIsCurrentlyActive(false)
+      this.currentlyActiveView = null
+    }
+
+    private fun setActiveView(view: VisibilityView) {
+      view.setIsCurrentlyActive(true)
+      this.currentlyActiveView = view
+    }
+  }
+}

modules/expo-bluesky-swiss-army/expo-module.config.json

@@ -1,12 +1,19 @@
 {
   "platforms": ["ios", "tvos", "android", "web"],
   "ios": {
-    "modules": ["ExpoBlueskySharedPrefsModule", "ExpoBlueskyReferrerModule"]
+    "modules": [
+      "ExpoBlueskySharedPrefsModule",
+      "ExpoBlueskyReferrerModule",
+      "ExpoBlueskyVisibilityViewModule",
+      "ExpoPlatformInfoModule"
+    ]
   },
   "android": {
     "modules": [
       "expo.modules.blueskyswissarmy.sharedprefs.ExpoBlueskySharedPrefsModule",
-      "expo.modules.blueskyswissarmy.referrer.ExpoBlueskyReferrerModule"
+      "expo.modules.blueskyswissarmy.referrer.ExpoBlueskyReferrerModule",
+      "expo.modules.blueskyswissarmy.visibilityview.ExpoBlueskyVisibilityViewModule",
+      "expo.modules.blueskyswissarmy.platforminfo.ExpoPlatformInfoModule"
     ]
   }
 }

modules/expo-bluesky-swiss-army/index.ts

@@ -1,4 +1,7 @@
+import * as PlatformInfo from './src/PlatformInfo'
+import {AudioCategory} from './src/PlatformInfo/types'
 import * as Referrer from './src/Referrer'
 import * as SharedPrefs from './src/SharedPrefs'
+import VisibilityView from './src/VisibilityView'
 
-export {Referrer, SharedPrefs}
+export {AudioCategory, PlatformInfo, Referrer, SharedPrefs, VisibilityView}

modules/expo-bluesky-swiss-army/ios/PlatformInfo/ExpoPlatformInfoModule.swift

@@ -0,0 +1,46 @@
+import ExpoModulesCore
+
+public class ExpoPlatformInfoModule: Module {
+  private var prevAudioActive: Bool?
+  private var prevAudioCategory: AVAudioSession.Category?
+
+  public func definition() -> ModuleDefinition {
+    Name("ExpoPlatformInfo")
+
+    Function("getIsReducedMotionEnabled") {
+      return UIAccessibility.isReduceMotionEnabled
+    }
+
+    Function("setAudioCategory") { (audioCategoryString: String) in
+      let audioCategory = AVAudioSession.Category(rawValue: audioCategoryString)
+      if audioCategory == self.prevAudioCategory {
+        return
+      }
+      self.prevAudioCategory = audioCategory
+      DispatchQueue.global(qos: .background).async {
+        try? AVAudioSession.sharedInstance().setCategory(audioCategory)
+      }
+    }
+
+    Function("setAudioActive") { (active: Bool) in
+      if active == self.prevAudioActive {
+        return
+      }
+      self.prevAudioActive = active
+      if active {
+        DispatchQueue.global(qos: .background).async {
+          try? AVAudioSession.sharedInstance().setActive(true)
+        }
+      } else {
+        DispatchQueue.global(qos: .background).async {
+          try? AVAudioSession
+            .sharedInstance()
+            .setActive(
+              false,
+              options: [.notifyOthersOnDeactivation]
+            )
+        }
+      }
+    }
+  }
+}

modules/expo-bluesky-swiss-army/ios/Visibility/ExpoBlueskyVisibilityViewModule.swift

@@ -0,0 +1,21 @@
+import ExpoModulesCore
+
+public class ExpoBlueskyVisibilityViewModule: Module {
+  public func definition() -> ModuleDefinition {
+    Name("ExpoBlueskyVisibilityView")
+
+    AsyncFunction("updateActiveViewAsync") {
+      VisibilityViewManager.shared.updateActiveView()
+    }
+
+    View(VisibilityView.self) {
+      Events([
+        "onChangeStatus"
+      ])
+
+      Prop("enabled") { (view: VisibilityView, prop: Bool) in
+        view.enabled = prop
+      }
+    }
+  }
+}

modules/expo-bluesky-swiss-army/ios/Visibility/VisibilityViewManager.swift

@@ -0,0 +1,86 @@
+import Foundation
+
+class VisibilityViewManager {
+  static let shared = VisibilityViewManager()
+
+  private let views = NSHashTable<VisibilityView>(options: .weakMemory)
+  private var currentlyActiveView: VisibilityView?
+  private var screenHeight: CGFloat = UIScreen.main.bounds.height
+  private var prevCount = 0
+
+  func addView(_ view: VisibilityView) {
+    self.views.add(view)
+
+    if self.prevCount == 0 {
+      self.updateActiveView()
+    }
+    self.prevCount = self.views.count
+  }
+
+  func removeView(_ view: VisibilityView) {
+    self.views.remove(view)
+    self.prevCount = self.views.count
+  }
+
+  func updateActiveView() {
+    DispatchQueue.main.async {
+      var activeView: VisibilityView?
+
+      if self.views.count == 1 {
+        let view = self.views.allObjects[0]
+        if view.isViewableEnough() {
+          activeView = view
+        }
+      } else if self.views.count > 1 {
+        let views = self.views.allObjects
+        var mostVisibleView: VisibilityView?
+        var mostVisiblePosition: CGRect?
+
+        views.forEach { view in
+          if !view.isViewableEnough() {
+            return
+          }
+
+          guard let position = view.getPositionOnScreen() else {
+            return
+          }
+
+          if position.minY >= 150 {
+            if mostVisiblePosition == nil {
+              mostVisiblePosition = position
+            }
+
+            if let unwrapped = mostVisiblePosition,
+               position.minY <= unwrapped.minY {
+              mostVisibleView = view
+              mostVisiblePosition = position
+            }
+          }
+        }
+
+        activeView = mostVisibleView
+      }
+
+      if activeView == self.currentlyActiveView {
+        return
+      }
+
+      self.clearActiveView()
+      if let view = activeView {
+        self.setActiveView(view)
+      }
+    }
+  }
+
+  private func clearActiveView() {
+    if let currentlyActiveView = self.currentlyActiveView {
+      currentlyActiveView.setIsCurrentlyActive(isActive: false)
+      self.currentlyActiveView = nil
+    }
+  }
+
+  private func setActiveView(_ view: VisibilityView) {
+    view.setIsCurrentlyActive(isActive: true)
+    self.currentlyActiveView = view
+  }
+}

modules/expo-bluesky-swiss-army/ios/Visibility/VisiblityView.swift

@@ -0,0 +1,69 @@
+import ExpoModulesCore
+
+class VisibilityView: ExpoView {
+  var enabled = false {
+    didSet {
+      if enabled {
+        VisibilityViewManager.shared.removeView(self)
+      }
+    }
+  }
+
+  private let onChangeStatus = EventDispatcher()
+  private var isCurrentlyActiveView = false
+
+  required init(appContext: AppContext? = nil) {
+    super.init(appContext: appContext)
+  }
+
+  public override func willMove(toWindow newWindow: UIWindow?) {
+    super.willMove(toWindow: newWindow)
+
+    if !self.enabled {
+      return
+    }
+
+    if newWindow == nil {
+      VisibilityViewManager.shared.removeView(self)
+    } else {
+      VisibilityViewManager.shared.addView(self)
+    }
+  }
+
+  func setIsCurrentlyActive(isActive: Bool) {
+    if isCurrentlyActiveView == isActive {
+      return
+    }
+    self.isCurrentlyActiveView = isActive
+    self.onChangeStatus([
+      "isActive": isActive
+    ])
+  }
+}
+
+// 🚨 DANGER 🚨
+// These functions need to be called from the main thread. Xcode will warn you if you call one of them
+// off the main thread, so pay attention!
+extension UIView {
+  func getPositionOnScreen() -> CGRect? {
+    if let window = self.window {
+      return self.convert(self.bounds, to: window)
+    }
+    return nil
+  }
+
+  func isViewableEnough() -> Bool {
+    guard let window = self.window else {
+      return false
+    }
+
+    let viewFrameOnScreen = self.convert(self.bounds, to: window)
+    let screenBounds = window.bounds
+    let intersection = viewFrameOnScreen.intersection(screenBounds)
+
+    let viewHeight = viewFrameOnScreen.height
+    let intersectionHeight = intersection.height
+
+    return intersectionHeight >= 0.5 * viewHeight
+  }
+}

modules/expo-bluesky-swiss-army/src/PlatformInfo/index.native.ts

@@ -0,0 +1,20 @@
+import {Platform} from 'react-native'
+import {requireNativeModule} from 'expo-modules-core'
+
+import {AudioCategory} from './types'
+
+const NativeModule = requireNativeModule('ExpoPlatformInfo')
+
+export function getIsReducedMotionEnabled(): boolean {
+  return NativeModule.getIsReducedMotionEnabled()
+}
+
+export function setAudioActive(active: boolean): void {
+  if (Platform.OS !== 'ios') return
+  NativeModule.setAudioActive(active)
+}
+
+export function setAudioCategory(audioCategory: AudioCategory): void {
+  if (Platform.OS !== 'ios') return
+  NativeModule.setAudioCategory(audioCategory)
+}

modules/expo-bluesky-swiss-army/src/PlatformInfo/index.ts

@@ -0,0 +1,25 @@
+import {NotImplementedError} from '../NotImplemented'
+import {AudioCategory} from './types'
+
+export function getIsReducedMotionEnabled(): boolean {
+  throw new NotImplementedError()
+}
+
+/**
+ * Set whether the app's audio should mix with other apps' audio. Will also resume background music playback when `false`
+ * if it was previously playing.
+ * @param mixWithOthers
+ * @see https://developer.apple.com/documentation/avfaudio/avaudiosession/setactiveoptions/1616603-notifyothersondeactivation
+ */
+export function setAudioActive(active: boolean): void {
+  throw new NotImplementedError({active})
+}
+
+/**
+ * Set the audio category for the app.
+ * @param audioCategory
+ * @platform ios
+ */
+export function setAudioCategory(audioCategory: AudioCategory): void {
+  throw new NotImplementedError({audioCategory})
+}

modules/expo-bluesky-swiss-army/src/PlatformInfo/index.web.ts

@@ -0,0 +1,17 @@
+import {NotImplementedError} from '../NotImplemented'
+import {AudioCategory} from './types'
+
+export function getIsReducedMotionEnabled(): boolean {
+  if (typeof window === 'undefined') {
+    return false
+  }
+  return window.matchMedia('(prefers-reduced-motion: reduce)').matches
+}
+
+export function setAudioActive(active: boolean): void {
+  throw new NotImplementedError({active})
+}
+
+export function setAudioCategory(audioCategory: AudioCategory): void {
+  throw new NotImplementedError({audioCategory})
+}

modules/expo-bluesky-swiss-army/src/PlatformInfo/types.ts

@@ -0,0 +1,15 @@
+/**
+ * Sets the audio session category on iOS. In general, we should only need to use this for the `playback` and `ambient`
+ * categories. This enum however includes other categories that are available in the native API for clarity and
+ * potential future use.
+ * @see https://developer.apple.com/documentation/avfoundation/avaudiosession/category
+ * @platform ios
+ */
+export enum AudioCategory {
+  Ambient = 'AVAudioSessionCategoryAmbient',
+  Playback = 'AVAudioSessionCategoryPlayback',
+  _SoloAmbient = 'AVAudioSessionCategorySoloAmbient',
+  _Record = 'AVAudioSessionCategoryRecord',
+  _PlayAndRecord = 'AVAudioSessionCategoryPlayAndRecord',
+  _MultiRoute = 'AVAudioSessionCategoryMultiRoute',
+}

modules/expo-bluesky-swiss-army/src/VisibilityView/index.native.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import {StyleProp, ViewStyle} from 'react-native'
+import {requireNativeModule, requireNativeViewManager} from 'expo-modules-core'
+
+import {VisibilityViewProps} from './types'
+const NativeView: React.ComponentType<{
+  onChangeStatus: (e: {nativeEvent: {isActive: boolean}}) => void
+  children: React.ReactNode
+  enabled: Boolean
+  style: StyleProp<ViewStyle>
+}> = requireNativeViewManager('ExpoBlueskyVisibilityView')
+
+const NativeModule = requireNativeModule('ExpoBlueskyVisibilityView')
+
+export async function updateActiveViewAsync() {
+  await NativeModule.updateActiveViewAsync()
+}
+
+export default function VisibilityView({
+  children,
+  onChangeStatus: onChangeStatusOuter,
+  enabled,
+}: VisibilityViewProps) {
+  const onChangeStatus = React.useCallback(
+    (e: {nativeEvent: {isActive: boolean}}) => {
+      onChangeStatusOuter(e.nativeEvent.isActive)
+    },
+    [onChangeStatusOuter],
+  )
+
+  return (
+    <NativeView
+      onChangeStatus={onChangeStatus}
+      enabled={enabled}
+      style={{flex: 1}}>
+      {children}
+    </NativeView>
+  )
+}

modules/expo-bluesky-swiss-army/src/VisibilityView/index.tsx

@@ -0,0 +1,10 @@
+import {NotImplementedError} from '../NotImplemented'
+import {VisibilityViewProps} from './types'
+
+export async function updateActiveViewAsync() {
+  throw new NotImplementedError()
+}
+
+export default function VisibilityView({children}: VisibilityViewProps) {
+  return children
+}

modules/expo-bluesky-swiss-army/src/VisibilityView/types.ts

@@ -0,0 +1,6 @@
+import React from 'react'
+export interface VisibilityViewProps {
+  children: React.ReactNode
+  onChangeStatus: (isActive: boolean) => void
+  enabled: boolean
+}

package.json

@@ -52,7 +52,7 @@
     "open-analyzer": "EXPO_PUBLIC_OPEN_ANALYZER=1 yarn build-web"
   },
   "dependencies": {
-    "@atproto/api": "0.13.0-rc.0",
+    "@atproto/api": "0.13.3",
     "@atproto/oauth-client": "^0.1.1",
     "@atproto/oauth-client-browser": "^0.1.1",
     "@bam.tech/react-native-image-resizer": "^3.0.4",

patches/@atproto+lexicon+0.4.0.patch

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

patches/expo-modules-core+1.12.11.patch

@@ -13,7 +13,7 @@ index bb74e80..0aa0202 100644
      Map<String, Object> constants = new HashMap<>(3);
      constants.put(MODULES_CONSTANTS_KEY, new HashMap<>());
 diff --git a/node_modules/expo-modules-core/build/uuid/uuid.js b/node_modules/expo-modules-core/build/uuid/uuid.js
-index 109d3fe..c7fce9e 100644
+index 109d3fe..c421931 100644
 --- a/node_modules/expo-modules-core/build/uuid/uuid.js
 +++ b/node_modules/expo-modules-core/build/uuid/uuid.js
 @@ -1,5 +1,7 @@
@@ -24,3 +24,16 @@ index 109d3fe..c7fce9e 100644
  const nativeUuidv4 = globalThis?.expo?.uuidv4;
  const nativeUuidv5 = globalThis?.expo?.uuidv5;
  function uuidv4() {
+diff --git a/node_modules/expo-modules-core/ios/Core/SharedObjects/SharedObjectRegistry.swift b/node_modules/expo-modules-core/ios/Core/SharedObjects/SharedObjectRegistry.swift
+index ee2268a..4851b67 100644
+--- a/node_modules/expo-modules-core/ios/Core/SharedObjects/SharedObjectRegistry.swift
++++ b/node_modules/expo-modules-core/ios/Core/SharedObjects/SharedObjectRegistry.swift
+@@ -173,7 +173,7 @@ public final class SharedObjectRegistry {
+   }
+
+   internal func clear() {
+-    Self.lockQueue.async {
++    Self.lockQueue.sync {
+       self.pairs.removeAll()
+     }
+   }

patches/expo-video+1.1.10.patch

@@ -1,20 +0,0 @@
---- a/node_modules/expo-video/android/src/main/java/expo/modules/video/PlayerViewExtension.kt
-+++ b/node_modules/expo-video/android/src/main/java/expo/modules/video/PlayerViewExtension.kt
-@@ -11,6 +11,7 @@ internal fun PlayerView.applyRequiresLinearPlayback(requireLinearPlayback: Boole
-   setShowPreviousButton(!requireLinearPlayback)
-   setShowNextButton(!requireLinearPlayback)
-   setTimeBarInteractive(requireLinearPlayback)
-+  setShowSubtitleButton(true)
- }
-
- @androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
-@@ -27,7 +28,8 @@ internal fun PlayerView.setTimeBarInteractive(interactive: Boolean) {
-
- @androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
- internal fun PlayerView.setFullscreenButtonVisibility(visible: Boolean) {
--  val fullscreenButton = findViewById<android.widget.ImageButton>(androidx.media3.ui.R.id.exo_fullscreen)
-+  val fullscreenButton =
-+    findViewById<android.widget.ImageButton>(androidx.media3.ui.R.id.exo_fullscreen)
-   fullscreenButton?.visibility = if (visible) {
-     android.view.View.VISIBLE
-   } else {

patches/expo-video+1.2.4.patch

@@ -0,0 +1,135 @@
+diff --git a/node_modules/expo-video/android/src/main/java/expo/modules/video/PlayerViewExtension.kt b/node_modules/expo-video/android/src/main/java/expo/modules/video/PlayerViewExtension.kt
+index 9905e13..47342ff 100644
+--- a/node_modules/expo-video/android/src/main/java/expo/modules/video/PlayerViewExtension.kt
++++ b/node_modules/expo-video/android/src/main/java/expo/modules/video/PlayerViewExtension.kt
+@@ -11,6 +11,7 @@ internal fun PlayerView.applyRequiresLinearPlayback(requireLinearPlayback: Boole
+   setShowPreviousButton(!requireLinearPlayback)
+   setShowNextButton(!requireLinearPlayback)
+   setTimeBarInteractive(requireLinearPlayback)
++  setShowSubtitleButton(true)
+ }
+ 
+ @androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
+@@ -27,7 +28,8 @@ internal fun PlayerView.setTimeBarInteractive(interactive: Boolean) {
+ 
+ @androidx.annotation.OptIn(androidx.media3.common.util.UnstableApi::class)
+ internal fun PlayerView.setFullscreenButtonVisibility(visible: Boolean) {
+-  val fullscreenButton = findViewById<android.widget.ImageButton>(androidx.media3.ui.R.id.exo_fullscreen)
++  val fullscreenButton =
++    findViewById<android.widget.ImageButton>(androidx.media3.ui.R.id.exo_fullscreen)
+   fullscreenButton?.visibility = if (visible) {
+     android.view.View.VISIBLE
+   } else {
+diff --git a/node_modules/expo-video/android/src/main/java/expo/modules/video/VideoModule.kt b/node_modules/expo-video/android/src/main/java/expo/modules/video/VideoModule.kt
+index ec3da2a..5a1397a 100644
+--- a/node_modules/expo-video/android/src/main/java/expo/modules/video/VideoModule.kt
++++ b/node_modules/expo-video/android/src/main/java/expo/modules/video/VideoModule.kt
+@@ -43,7 +43,9 @@ class VideoModule : Module() {
+     View(VideoView::class) {
+       Events(
+         "onPictureInPictureStart",
+-        "onPictureInPictureStop"
++        "onPictureInPictureStop",
++        "onEnterFullscreen",
++        "onExitFullscreen"
+       )
+ 
+       Prop("player") { view: VideoView, player: VideoPlayer ->
+diff --git a/node_modules/expo-video/android/src/main/java/expo/modules/video/VideoView.kt b/node_modules/expo-video/android/src/main/java/expo/modules/video/VideoView.kt
+index a951d80..3932535 100644
+--- a/node_modules/expo-video/android/src/main/java/expo/modules/video/VideoView.kt
++++ b/node_modules/expo-video/android/src/main/java/expo/modules/video/VideoView.kt
+@@ -36,6 +36,8 @@ class VideoView(context: Context, appContext: AppContext) : ExpoView(context, ap
+   val playerView: PlayerView = PlayerView(context.applicationContext)
+   val onPictureInPictureStart by EventDispatcher<Unit>()
+   val onPictureInPictureStop by EventDispatcher<Unit>()
++  val onEnterFullscreen by EventDispatcher()
++  val onExitFullscreen by EventDispatcher()
+ 
+   var willEnterPiP: Boolean = false
+   var isInFullscreen: Boolean = false
+@@ -154,6 +156,7 @@ class VideoView(context: Context, appContext: AppContext) : ExpoView(context, ap
+       @Suppress("DEPRECATION")
+       currentActivity.overridePendingTransition(0, 0)
+     }
++    onEnterFullscreen(mapOf())
+     isInFullscreen = true
+   }
+ 
+@@ -162,6 +165,7 @@ class VideoView(context: Context, appContext: AppContext) : ExpoView(context, ap
+     val fullScreenButton: ImageButton = playerView.findViewById(androidx.media3.ui.R.id.exo_fullscreen)
+     fullScreenButton.setImageResource(androidx.media3.ui.R.drawable.exo_icon_fullscreen_enter)
+     videoPlayer?.changePlayerView(playerView)
++    this.onExitFullscreen(mapOf())
+     isInFullscreen = false
+   }
+ 
+diff --git a/node_modules/expo-video/build/VideoView.types.d.ts b/node_modules/expo-video/build/VideoView.types.d.ts
+index cb9ca6d..60e9f4e 100644
+--- a/node_modules/expo-video/build/VideoView.types.d.ts
++++ b/node_modules/expo-video/build/VideoView.types.d.ts
+@@ -89,5 +89,8 @@ export interface VideoViewProps extends ViewProps {
+      * @platform ios 16.0+
+      */
+     allowsVideoFrameAnalysis?: boolean;
++
++    onEnterFullscreen?: () => void;
++    onExitFullscreen?: () => void;
+ }
+ //# sourceMappingURL=VideoView.types.d.ts.map
+diff --git a/node_modules/expo-video/ios/VideoModule.swift b/node_modules/expo-video/ios/VideoModule.swift
+index c537a12..e4a918f 100644
+--- a/node_modules/expo-video/ios/VideoModule.swift
++++ b/node_modules/expo-video/ios/VideoModule.swift
+@@ -16,7 +16,9 @@ public final class VideoModule: Module {
+     View(VideoView.self) {
+       Events(
+         "onPictureInPictureStart",
+-        "onPictureInPictureStop"
++        "onPictureInPictureStop",
++        "onEnterFullscreen",
++        "onExitFullscreen"
+       )
+ 
+       Prop("player") { (view, player: VideoPlayer?) in
+diff --git a/node_modules/expo-video/ios/VideoView.swift b/node_modules/expo-video/ios/VideoView.swift
+index f4579e4..10c5908 100644
+--- a/node_modules/expo-video/ios/VideoView.swift
++++ b/node_modules/expo-video/ios/VideoView.swift
+@@ -41,6 +41,8 @@ public final class VideoView: ExpoView, AVPlayerViewControllerDelegate {
+ 
+   let onPictureInPictureStart = EventDispatcher()
+   let onPictureInPictureStop = EventDispatcher()
++  let onEnterFullscreen = EventDispatcher()
++  let onExitFullscreen = EventDispatcher()
+ 
+   public override var bounds: CGRect {
+     didSet {
+@@ -163,6 +165,7 @@ public final class VideoView: ExpoView, AVPlayerViewControllerDelegate {
+     _ playerViewController: AVPlayerViewController,
+     willBeginFullScreenPresentationWithAnimationCoordinator coordinator: UIViewControllerTransitionCoordinator
+   ) {
++    onEnterFullscreen()
+     isFullscreen = true
+   }
+ 
+@@ -179,6 +182,7 @@ public final class VideoView: ExpoView, AVPlayerViewControllerDelegate {
+         if wasPlaying {
+           self.player?.pointer.play()
+         }
++        self.onExitFullscreen()
+         self.isFullscreen = false
+       }
+     }
+diff --git a/node_modules/expo-video/src/VideoView.types.ts b/node_modules/expo-video/src/VideoView.types.ts
+index 29fe5db..e1fbf59 100644
+--- a/node_modules/expo-video/src/VideoView.types.ts
++++ b/node_modules/expo-video/src/VideoView.types.ts
+@@ -100,4 +100,7 @@ export interface VideoViewProps extends ViewProps {
+    * @platform ios 16.0+
+    */
+   allowsVideoFrameAnalysis?: boolean;
++
++  onEnterFullscreen?: () => void;
++  onExitFullscreen?: () => void;
+ }

patches/expo-video+1.2.4.patch.md

@@ -0,0 +1,6 @@
+## uwu woad beawing, do not wemove
+
+## `expo-video` Patch
+
+This patch adds two props to `VideoView`: `onEnterFullscreen` and `onExitFullscreen` which do exactly what they say on
+the tin.

patches/react-native-reanimated+3.11.0.patch

@@ -207,31 +207,3 @@ index 88b3fdf..2488ebc 100644
 
          const { layout, entering, exiting, sharedTransitionTag } = this.props;
          if (
-diff --git a/node_modules/react-native-reanimated/lib/module/reanimated2/index.js b/node_modules/react-native-reanimated/lib/module/reanimated2/index.js
-index ac9be5d..86d4605 100644
---- a/node_modules/react-native-reanimated/lib/module/reanimated2/index.js
-+++ b/node_modules/react-native-reanimated/lib/module/reanimated2/index.js
-@@ -47,4 +47,5 @@ export { LayoutAnimationConfig } from './component/LayoutAnimationConfig';
- export { PerformanceMonitor } from './component/PerformanceMonitor';
- export { startMapper, stopMapper } from './mappers';
- export { startScreenTransition, finishScreenTransition, ScreenTransition } from './screenTransition';
-+export { isReducedMotion } from './PlatformChecker';
- //# sourceMappingURL=index.js.map
-diff --git a/node_modules/react-native-reanimated/lib/typescript/reanimated2/index.d.ts b/node_modules/react-native-reanimated/lib/typescript/reanimated2/index.d.ts
-index f01dc57..161ef22 100644
---- a/node_modules/react-native-reanimated/lib/typescript/reanimated2/index.d.ts
-+++ b/node_modules/react-native-reanimated/lib/typescript/reanimated2/index.d.ts
-@@ -36,3 +36,4 @@ export type { FlatListPropsWithLayout } from './component/FlatList';
- export { startMapper, stopMapper } from './mappers';
- export { startScreenTransition, finishScreenTransition, ScreenTransition, } from './screenTransition';
- export type { AnimatedScreenTransition, GoBackGesture, ScreenTransitionConfig, } from './screenTransition';
-+export { isReducedMotion } from './PlatformChecker';
-diff --git a/node_modules/react-native-reanimated/src/reanimated2/index.ts b/node_modules/react-native-reanimated/src/reanimated2/index.ts
-index 5885fa1..a3c693f 100644
---- a/node_modules/react-native-reanimated/src/reanimated2/index.ts
-+++ b/node_modules/react-native-reanimated/src/reanimated2/index.ts
-@@ -284,3 +284,4 @@ export type {
-   GoBackGesture,
-   ScreenTransitionConfig,
- } from './screenTransition';
-+export { isReducedMotion } from './PlatformChecker';

src/App.native.tsx

@@ -50,6 +50,7 @@ import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
 import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
 import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
 import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
+import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
 import {TestCtrls} from '#/view/com/testing/TestCtrls'
 import {ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoContext'
 import * as Toast from '#/view/com/util/Toast'
@@ -61,6 +62,7 @@ import {Provider as PortalProvider} from '#/components/Portal'
 import {Splash} from '#/Splash'
 import {Provider as TourProvider} from '#/tours'
 import {BackgroundNotificationPreferencesProvider} from '../modules/expo-background-notification-handler/src/BackgroundNotificationHandlerProvider'
+import {AudioCategory, PlatformInfo} from '../modules/expo-bluesky-swiss-army'
 
 SplashScreen.preventAutoHideAsync()
 
@@ -121,21 +123,23 @@ function InnerApp() {
                           <ModerationOptsProvider>
                             <LoggedOutViewProvider>
                               <SelectedFeedProvider>
-                                <UnreadNotifsProvider>
+                                <HiddenRepliesProvider>
-                                  <BackgroundNotificationPreferencesProvider>
+                                  <UnreadNotifsProvider>
-                                    <MutedThreadsProvider>
+                                    <BackgroundNotificationPreferencesProvider>
-                                      <TourProvider>
+                                      <MutedThreadsProvider>
-                                        <ProgressGuideProvider>
+                                        <TourProvider>
-                                          <GestureHandlerRootView
+                                          <ProgressGuideProvider>
-                                            style={s.h100pct}>
+                                            <GestureHandlerRootView
-                                            <TestCtrls />
+                                              style={s.h100pct}>
-                                            <Shell />
+                                              <TestCtrls />
-                                          </GestureHandlerRootView>
+                                              <Shell />
-                                        </ProgressGuideProvider>
+                                            </GestureHandlerRootView>
-                                      </TourProvider>
+                                          </ProgressGuideProvider>
-                                    </MutedThreadsProvider>
+                                        </TourProvider>
-                                  </BackgroundNotificationPreferencesProvider>
+                                      </MutedThreadsProvider>
-                                </UnreadNotifsProvider>
+                                    </BackgroundNotificationPreferencesProvider>
+                                  </UnreadNotifsProvider>
+                                </HiddenRepliesProvider>
                               </SelectedFeedProvider>
                             </LoggedOutViewProvider>
                           </ModerationOptsProvider>
@@ -157,6 +161,8 @@ function App() {
   const [isReady, setReady] = useState(false)
 
   React.useEffect(() => {
+    PlatformInfo.setAudioCategory(AudioCategory.Ambient)
+    PlatformInfo.setAudioActive(false)
     initPersistedState().then(() => setReady(true))
   }, [])
 

src/App.web.tsx

@@ -39,6 +39,7 @@ import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
 import {Provider as ProgressGuideProvider} from '#/state/shell/progress-guide'
 import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
 import {Provider as StarterPackProvider} from '#/state/shell/starter-pack'
+import {Provider as HiddenRepliesProvider} from '#/state/threadgate-hidden-replies'
 import {ActiveVideoProvider} from '#/view/com/util/post-embeds/ActiveVideoContext'
 import * as Toast from '#/view/com/util/Toast'
 import {ToastContainer} from '#/view/com/util/Toast.web'
@@ -105,19 +106,21 @@ function InnerApp() {
                         <ModerationOptsProvider>
                           <LoggedOutViewProvider>
                             <SelectedFeedProvider>
-                              <UnreadNotifsProvider>
+                              <HiddenRepliesProvider>
-                                <BackgroundNotificationPreferencesProvider>
+                                <UnreadNotifsProvider>
-                                  <MutedThreadsProvider>
+                                  <BackgroundNotificationPreferencesProvider>
-                                    <SafeAreaProvider>
+                                    <MutedThreadsProvider>
-                                      <TourProvider>
+                                      <SafeAreaProvider>
-                                        <ProgressGuideProvider>
+                                        <TourProvider>
-                                          <Shell />
+                                          <ProgressGuideProvider>
-                                        </ProgressGuideProvider>
+                                            <Shell />
-                                      </TourProvider>
+                                          </ProgressGuideProvider>
-                                    </SafeAreaProvider>
+                                        </TourProvider>
-                                  </MutedThreadsProvider>
+                                      </SafeAreaProvider>
-                                </BackgroundNotificationPreferencesProvider>
+                                    </MutedThreadsProvider>
-                              </UnreadNotifsProvider>
+                                  </BackgroundNotificationPreferencesProvider>
+                                </UnreadNotifsProvider>
+                              </HiddenRepliesProvider>
                             </SelectedFeedProvider>
                           </LoggedOutViewProvider>
                         </ModerationOptsProvider>

src/Navigation.tsx

@@ -15,10 +15,12 @@ import {
   StackActions,
 } from '@react-navigation/native'
 
-import {timeout} from 'lib/async/timeout'
+import {init as initAnalytics} from '#/lib/analytics/analytics'
-import {useColorSchemeStyle} from 'lib/hooks/useColorSchemeStyle'
+import {timeout} from '#/lib/async/timeout'
-import {usePalette} from 'lib/hooks/usePalette'
+import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
-import {buildStateObject} from 'lib/routes/helpers'
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebScrollRestoration} from '#/lib/hooks/useWebScrollRestoration'
+import {buildStateObject} from '#/lib/routes/helpers'
 import {
   AllNavigatorParams,
   BottomTabNavigatorParams,
@@ -28,21 +30,63 @@ import {
   MyProfileTabNavigatorParams,
   NotificationsTabNavigatorParams,
   SearchTabNavigatorParams,
-} from 'lib/routes/types'
+} from '#/lib/routes/types'
-import {RouteParams, State} from 'lib/routes/types'
+import {RouteParams, State} from '#/lib/routes/types'
-import {bskyTitle} from 'lib/strings/headings'
+import {attachRouteToLogEvents, logEvent} from '#/lib/statsig/statsig'
-import {isAndroid, isNative, isWeb} from 'platform/detection'
+import {bskyTitle} from '#/lib/strings/headings'
+import {isAndroid, isNative, isWeb} from '#/platform/detection'
+import {useModalControls} from '#/state/modals'
+import {useUnreadNotifications} from '#/state/queries/notifications/unread'
+import {useSession} from '#/state/session'
+import {
+  shouldRequestEmailConfirmation,
+  snoozeEmailConfirmationPrompt,
+} from '#/state/shell/reminders'
+import {AccessibilitySettingsScreen} from '#/view/screens/AccessibilitySettings'
+import {AppPasswords} from '#/view/screens/AppPasswords'
+import {CommunityGuidelinesScreen} from '#/view/screens/CommunityGuidelines'
+import {CopyrightPolicyScreen} from '#/view/screens/CopyrightPolicy'
+import {DebugModScreen} from '#/view/screens/DebugMod'
+import {FeedsScreen} from '#/view/screens/Feeds'
+import {HomeScreen} from '#/view/screens/Home'
+import {LanguageSettingsScreen} from '#/view/screens/LanguageSettings'
+import {ListsScreen} from '#/view/screens/Lists'
+import {LogScreen} from '#/view/screens/Log'
+import {ModerationBlockedAccounts} from '#/view/screens/ModerationBlockedAccounts'
+import {ModerationModlistsScreen} from '#/view/screens/ModerationModlists'
+import {ModerationMutedAccounts} from '#/view/screens/ModerationMutedAccounts'
+import {NotFoundScreen} from '#/view/screens/NotFound'
+import {NotificationsScreen} from '#/view/screens/Notifications'
+import {NotificationsSettingsScreen} from '#/view/screens/NotificationsSettings'
+import {PostThreadScreen} from '#/view/screens/PostThread'
 import {PreferencesExternalEmbeds} from '#/view/screens/PreferencesExternalEmbeds'
-import {AppPasswords} from 'view/screens/AppPasswords'
+import {PreferencesFollowingFeed} from '#/view/screens/PreferencesFollowingFeed'
-import {ModerationBlockedAccounts} from 'view/screens/ModerationBlockedAccounts'
+import {PreferencesThreads} from '#/view/screens/PreferencesThreads'
-import {ModerationMutedAccounts} from 'view/screens/ModerationMutedAccounts'
+import {PrivacyPolicyScreen} from '#/view/screens/PrivacyPolicy'
-import {PreferencesFollowingFeed} from 'view/screens/PreferencesFollowingFeed'
+import {ProfileScreen} from '#/view/screens/Profile'
-import {PreferencesThreads} from 'view/screens/PreferencesThreads'
+import {ProfileFeedScreen} from '#/view/screens/ProfileFeed'
-import {SavedFeeds} from 'view/screens/SavedFeeds'
+import {ProfileFeedLikedByScreen} from '#/view/screens/ProfileFeedLikedBy'
+import {ProfileFollowersScreen} from '#/view/screens/ProfileFollowers'
+import {ProfileFollowsScreen} from '#/view/screens/ProfileFollows'
+import {ProfileListScreen} from '#/view/screens/ProfileList'
+import {SavedFeeds} from '#/view/screens/SavedFeeds'
+import {SearchScreen} from '#/view/screens/Search'
+import {SettingsScreen} from '#/view/screens/Settings'
+import {Storybook} from '#/view/screens/Storybook'
+import {SupportScreen} from '#/view/screens/Support'
+import {TermsOfServiceScreen} from '#/view/screens/TermsOfService'
+import {BottomBar} from '#/view/shell/bottom-bar/BottomBar'
+import {createNativeStackNavigatorWithAuth} from '#/view/shell/createNativeStackNavigatorWithAuth'
 import {SharedPreferencesTesterScreen} from '#/screens/E2E/SharedPreferencesTesterScreen'
 import HashtagScreen from '#/screens/Hashtag'
+import {MessagesConversationScreen} from '#/screens/Messages/Conversation'
+import {MessagesScreen} from '#/screens/Messages/List'
+import {MessagesSettingsScreen} from '#/screens/Messages/Settings'
 import {CallbackScreen} from '#/screens/Login/CallbackScreen'
 import {ModerationScreen} from '#/screens/Moderation'
+import {PostLikedByScreen} from '#/screens/Post/PostLikedBy'
+import {PostQuotesScreen} from '#/screens/Post/PostQuotes'
+import {PostRepostedByScreen} from '#/screens/Post/PostRepostedBy'
 import {ProfileKnownFollowersScreen} from '#/screens/Profile/KnownFollowers'
 import {ProfileLabelerLikedByScreen} from '#/screens/Profile/ProfileLabelerLikedBy'
 import {AppearanceSettingsScreen} from '#/screens/Settings/AppearanceSettings'
@@ -51,51 +95,8 @@ import {
   StarterPackScreenShort,
 } from '#/screens/StarterPack/StarterPackScreen'
 import {Wizard} from '#/screens/StarterPack/Wizard'
+import {router} from '#/routes'
 import {Referrer} from '../modules/expo-bluesky-swiss-army'
-import {init as initAnalytics} from './lib/analytics/analytics'
-import {useWebScrollRestoration} from './lib/hooks/useWebScrollRestoration'
-import {attachRouteToLogEvents, logEvent} from './lib/statsig/statsig'
-import {router} from './routes'
-import {MessagesConversationScreen} from './screens/Messages/Conversation'
-import {MessagesScreen} from './screens/Messages/List'
-import {MessagesSettingsScreen} from './screens/Messages/Settings'
-import {useModalControls} from './state/modals'
-import {useUnreadNotifications} from './state/queries/notifications/unread'
-import {useSession} from './state/session'
-import {
-  shouldRequestEmailConfirmation,
-  snoozeEmailConfirmationPrompt,
-} from './state/shell/reminders'
-import {AccessibilitySettingsScreen} from './view/screens/AccessibilitySettings'
-import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
-import {CopyrightPolicyScreen} from './view/screens/CopyrightPolicy'
-import {DebugModScreen} from './view/screens/DebugMod'
-import {FeedsScreen} from './view/screens/Feeds'
-import {HomeScreen} from './view/screens/Home'
-import {LanguageSettingsScreen} from './view/screens/LanguageSettings'
-import {ListsScreen} from './view/screens/Lists'
-import {LogScreen} from './view/screens/Log'
-import {ModerationModlistsScreen} from './view/screens/ModerationModlists'
-import {NotFoundScreen} from './view/screens/NotFound'
-import {NotificationsScreen} from './view/screens/Notifications'
-import {NotificationsSettingsScreen} from './view/screens/NotificationsSettings'
-import {PostLikedByScreen} from './view/screens/PostLikedBy'
-import {PostRepostedByScreen} from './view/screens/PostRepostedBy'
-import {PostThreadScreen} from './view/screens/PostThread'
-import {PrivacyPolicyScreen} from './view/screens/PrivacyPolicy'
-import {ProfileScreen} from './view/screens/Profile'
-import {ProfileFeedScreen} from './view/screens/ProfileFeed'
-import {ProfileFeedLikedByScreen} from './view/screens/ProfileFeedLikedBy'
-import {ProfileFollowersScreen} from './view/screens/ProfileFollowers'
-import {ProfileFollowsScreen} from './view/screens/ProfileFollows'
-import {ProfileListScreen} from './view/screens/ProfileList'
-import {SearchScreen} from './view/screens/Search'
-import {SettingsScreen} from './view/screens/Settings'
-import {Storybook} from './view/screens/Storybook'
-import {SupportScreen} from './view/screens/Support'
-import {TermsOfServiceScreen} from './view/screens/TermsOfService'
-import {BottomBar} from './view/shell/bottom-bar/BottomBar'
-import {createNativeStackNavigatorWithAuth} from './view/shell/createNativeStackNavigatorWithAuth'
 
 const navigationRef = createNavigationContainerRef<AllNavigatorParams>()
 
@@ -213,6 +214,13 @@ function commonScreens(Stack: typeof HomeTab, unreadCountLabel?: string) {
           title: title(msg`Post by @${route.params.name}`),
         })}
       />
+      <Stack.Screen
+        name="PostQuotes"
+        getComponent={() => PostQuotesScreen}
+        options={({route}) => ({
+          title: title(msg`Post by @${route.params.name}`),
+        })}
+      />
       <Stack.Screen
         name="ProfileFeed"
         getComponent={() => ProfileFeedScreen}

src/alf/themes.ts

@@ -186,19 +186,19 @@ export function createThemes({
     white: color.gray_0,
     black: color.trueBlack,
 
-    contrast_25: color.gray_1000,
+    contrast_25: color.gray_975,
-    contrast_50: color.gray_975,
+    contrast_50: color.gray_950,
-    contrast_100: color.gray_950,
+    contrast_100: color.gray_900,
-    contrast_200: color.gray_900,
+    contrast_200: color.gray_800,
-    contrast_300: color.gray_800,
+    contrast_300: color.gray_700,
-    contrast_400: color.gray_700,
+    contrast_400: color.gray_600,
-    contrast_500: color.gray_600,
+    contrast_500: color.gray_500,
-    contrast_600: color.gray_500,
+    contrast_600: color.gray_400,
-    contrast_700: color.gray_400,
+    contrast_700: color.gray_300,
-    contrast_800: color.gray_300,
+    contrast_800: color.gray_200,
-    contrast_900: color.gray_200,
+    contrast_900: color.gray_100,
-    contrast_950: color.gray_100,
+    contrast_950: color.gray_50,
-    contrast_975: color.gray_50,
+    contrast_975: color.gray_25,
 
     primary_25: color.primary_975,
     primary_50: color.primary_950,
@@ -400,7 +400,7 @@ export function createThemes({
         color: darkPalette.contrast_400,
       },
       text_contrast_medium: {
-        color: darkPalette.contrast_700,
+        color: darkPalette.contrast_600,
       },
       text_contrast_high: {
         color: darkPalette.contrast_900,

src/components/Button.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import {
   AccessibilityProps,
+  GestureResponderEvent,
+  MouseEvent,
   Pressable,
   PressableProps,
   StyleProp,
@@ -65,7 +67,15 @@ type NonTextElements =
 
 export type ButtonProps = Pick<
   PressableProps,
-  'disabled' | 'onPress' | 'testID' | 'onLongPress' | 'hitSlop'
+  | 'disabled'
+  | 'onPress'
+  | 'testID'
+  | 'onLongPress'
+  | 'hitSlop'
+  | 'onHoverIn'
+  | 'onHoverOut'
+  | 'onPressIn'
+  | 'onPressOut'
 > &
   AccessibilityProps &
   VariantProps & {
@@ -115,30 +125,50 @@ export const Button = React.forwardRef<View, ButtonProps>(
       focused: false,
     })
 
-    const onPressIn = React.useCallback(() => {
+    const onPressInOuter = rest.onPressIn
-      setState(s => ({
+    const onPressIn = React.useCallback(
-        ...s,
+      (e: GestureResponderEvent) => {
-        pressed: true,
+        setState(s => ({
-      }))
+          ...s,
-    }, [setState])
+          pressed: true,
-    const onPressOut = React.useCallback(() => {
+        }))
-      setState(s => ({
+        onPressInOuter?.(e)
-        ...s,
+      },
-        pressed: false,
+      [setState, onPressInOuter],
-      }))
+    )
-    }, [setState])
+    const onPressOutOuter = rest.onPressOut
-    const onHoverIn = React.useCallback(() => {
+    const onPressOut = React.useCallback(
-      setState(s => ({
+      (e: GestureResponderEvent) => {
-        ...s,
+        setState(s => ({
-        hovered: true,
+          ...s,
-      }))
+          pressed: false,
-    }, [setState])
+        }))
-    const onHoverOut = React.useCallback(() => {
+        onPressOutOuter?.(e)
-      setState(s => ({
+      },
-        ...s,
+      [setState, onPressOutOuter],
-        hovered: false,
+    )
-      }))
+    const onHoverInOuter = rest.onHoverIn
-    }, [setState])
+    const onHoverIn = React.useCallback(
+      (e: MouseEvent) => {
+        setState(s => ({
+          ...s,
+          hovered: true,
+        }))
+        onHoverInOuter?.(e)
+      },
+      [setState, onHoverInOuter],
+    )
+    const onHoverOutOuter = rest.onHoverOut
+    const onHoverOut = React.useCallback(
+      (e: MouseEvent) => {
+        setState(s => ({
+          ...s,
+          hovered: false,
+        }))
+        onHoverOutOuter?.(e)
+      },
+      [setState, onHoverOutOuter],
+    )
     const onFocus = React.useCallback(() => {
       setState(s => ({
         ...s,
@@ -202,28 +232,10 @@ export const Button = React.forwardRef<View, ButtonProps>(
       } else if (color === 'secondary') {
         if (variant === 'solid') {
           if (!disabled) {
-            baseStyles.push({
+            baseStyles.push(t.atoms.bg_contrast_25)
-              backgroundColor: select(t.name, {
+            hoverStyles.push(t.atoms.bg_contrast_50)
-                light: t.palette.contrast_25,
-                dim: t.palette.contrast_100,
-                dark: t.palette.contrast_100,
-              }),
-            })
-            hoverStyles.push({
-              backgroundColor: select(t.name, {
-                light: t.palette.contrast_50,
-                dim: t.palette.contrast_200,
-                dark: t.palette.contrast_200,
-              }),
-            })
           } else {
-            baseStyles.push({
+            baseStyles.push(t.atoms.bg_contrast_100)
-              backgroundColor: select(t.name, {
-                light: t.palette.contrast_100,
-                dim: t.palette.contrast_25,
-                dark: t.palette.contrast_25,
-              }),
-            })
           }
         } else if (variant === 'outline') {
           baseStyles.push(a.border, t.atoms.bg, {

src/components/Error.tsx

@@ -2,21 +2,18 @@ import React from 'react'
 import {View} from 'react-native'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useNavigation} from '@react-navigation/core'
-import {StackActions} from '@react-navigation/native'
 
-import {NavigationProp} from 'lib/routes/types'
+import {useGoBack} from 'lib/hooks/useGoBack'
 import {CenteredView} from 'view/com/util/Views'
 import {atoms as a, useBreakpoints, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {Text} from '#/components/Typography'
-import {router} from '#/routes'
 
 export function Error({
   title,
   message,
   onRetry,
-  onGoBack: onGoBackProp,
+  onGoBack,
   hideBackButton,
   sideBorders = true,
 }: {
@@ -27,31 +24,10 @@ export function Error({
   hideBackButton?: boolean
   sideBorders?: boolean
 }) {
-  const navigation = useNavigation<NavigationProp>()
   const {_} = useLingui()
   const t = useTheme()
   const {gtMobile} = useBreakpoints()
-
+  const goBack = useGoBack(onGoBack)
-  const canGoBack = navigation.canGoBack()
-  const onGoBack = React.useCallback(() => {
-    if (onGoBackProp) {
-      onGoBackProp()
-      return
-    }
-    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, onGoBackProp])
 
   return (
     <CenteredView
@@ -96,7 +72,7 @@ export function Error({
             variant="solid"
             color={onRetry ? 'secondary' : 'primary'}
             label={_(msg`Return to previous page`)}
-            onPress={onGoBack}
+            onPress={goBack}
             size="large"
             style={[a.rounded_sm, a.overflow_hidden, {paddingVertical: 10}]}>
             <ButtonText>

src/components/FeedInterstitials.tsx

@@ -92,14 +92,16 @@ function getRank(seenPost: SeenPost): string {
     tier = 'a'
   } else if (seenPost.feedContext?.startsWith('cluster')) {
     tier = 'b'
-  } else if (seenPost.feedContext?.startsWith('ntpc')) {
+  } else if (seenPost.feedContext === 'popcluster') {
     tier = 'c'
-  } else if (seenPost.feedContext?.startsWith('t-')) {
+  } else if (seenPost.feedContext?.startsWith('ntpc')) {
     tier = 'd'
-  } else if (seenPost.feedContext === 'nettop') {
+  } else if (seenPost.feedContext?.startsWith('t-')) {
     tier = 'e'
-  } else {
+  } else if (seenPost.feedContext === 'nettop') {
     tier = 'f'
+  } else {
+    tier = 'g'
   }
   let score = Math.round(
     Math.log(
@@ -131,16 +133,26 @@ function useExperimentalSuggestedUsersQuery() {
   const {currentAccount} = useSession()
   const userActionSnapshot = userActionHistory.useActionHistorySnapshot()
   const dids = React.useMemo(() => {
-    const {likes, follows, seen} = userActionSnapshot
+    const {likes, follows, followSuggestions, seen} = userActionSnapshot
     const likeDids = likes
       .map(l => new AtUri(l))
       .map(uri => uri.host)
       .filter(did => !follows.includes(did))
+    let suggestedDids: string[] = []
+    if (followSuggestions.length > 0) {
+      suggestedDids = [
+        // It's ok if these will pick the same item (weighed by its frequency)
+        followSuggestions[Math.floor(Math.random() * followSuggestions.length)],
+        followSuggestions[Math.floor(Math.random() * followSuggestions.length)],
+        followSuggestions[Math.floor(Math.random() * followSuggestions.length)],
+        followSuggestions[Math.floor(Math.random() * followSuggestions.length)],
+      ]
+    }
     const seenDids = seen
       .sort(sortSeenPosts)
       .map(l => new AtUri(l.uri))
       .map(uri => uri.host)
-    return [...new Set([...likeDids, ...seenDids])].filter(
+    return [...new Set([...suggestedDids, ...likeDids, ...seenDids])].filter(
       did => did !== currentAccount?.did,
     )
   }, [userActionSnapshot, currentAccount])

src/components/ListCard.tsx

@@ -1,13 +1,20 @@
 import React from 'react'
 import {View} from 'react-native'
-import {AppBskyActorDefs, AppBskyGraphDefs, AtUri} from '@atproto/api'
+import {
+  AppBskyActorDefs,
+  AppBskyGraphDefs,
+  AtUri,
+  moderateUserList,
+  ModerationUI,
+} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 import {useQueryClient} from '@tanstack/react-query'
 
 import {sanitizeHandle} from 'lib/strings/handles'
+import {useModerationOpts} from 'state/preferences/moderation-opts'
 import {precacheList} from 'state/queries/feed'
-import {useTheme} from '#/alf'
+import {useSession} from 'state/session'
-import {atoms as a} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {
   Avatar,
   Description,
@@ -16,6 +23,7 @@ import {
   SaveButton,
 } from '#/components/FeedCard'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
+import * as Hider from '#/components/moderation/Hider'
 import {Text} from '#/components/Typography'
 
 /*
@@ -43,6 +51,11 @@ type Props = {
 
 export function Default(props: Props) {
   const {view, showPinButton} = props
+  const moderationOpts = useModerationOpts()
+  const moderation = moderationOpts
+    ? moderateUserList(view, moderationOpts)
+    : undefined
+
   return (
     <Link {...props}>
       <Outer>
@@ -52,6 +65,7 @@ export function Default(props: Props) {
             title={view.name}
             creator={view.creator}
             purpose={view.purpose}
+            modUi={moderation?.ui('contentView')}
           />
           {showPinButton && view.purpose === CURATELIST && (
             <SaveButton view={view} pin />
@@ -89,18 +103,40 @@ export function TitleAndByline({
   title,
   creator,
   purpose = CURATELIST,
+  modUi,
 }: {
   title: string
   creator?: AppBskyActorDefs.ProfileViewBasic
   purpose?: AppBskyGraphDefs.ListView['purpose']
+  modUi?: ModerationUI
 }) {
   const t = useTheme()
+  const {currentAccount} = useSession()
 
   return (
     <View style={[a.flex_1]}>
-      <Text style={[a.text_md, a.font_bold, a.leading_snug]} numberOfLines={1}>
+      <Hider.Outer
-        {title}
+        modui={modUi}
-      </Text>
+        isContentVisibleInitialState={
+          creator && currentAccount?.did === creator.did
+        }
+        allowOverride={creator && currentAccount?.did === creator.did}>
+        <Hider.Mask>
+          <Text
+            style={[a.text_md, a.font_bold, a.leading_snug, a.italic]}
+            numberOfLines={1}>
+            <Trans>Hidden list</Trans>
+          </Text>
+        </Hider.Mask>
+        <Hider.Content>
+          <Text
+            style={[a.text_md, a.font_bold, a.leading_snug]}
+            numberOfLines={1}>
+            {title}
+          </Text>
+        </Hider.Content>
+      </Hider.Outer>
+
       {creator && (
         <Text
           style={[a.leading_snug, t.atoms.text_contrast_medium]}

src/components/Lists.tsx

@@ -122,8 +122,16 @@ export function ListHeaderDesktop({
   if (!gtTablet) return null
 
   return (
-    <View style={[a.w_full, a.py_lg, a.px_xl, a.gap_xs]}>
+    <View
-      <Text style={[a.text_3xl, a.font_bold]}>{title}</Text>
+      style={[
+        a.w_full,
+        a.py_sm,
+        a.px_xl,
+        a.gap_xs,
+        a.justify_center,
+        {minHeight: 50},
+      ]}>
+      <Text style={[a.text_2xl, a.font_bold]}>{title}</Text>
       {subtitle ? (
         <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
           {subtitle}

src/components/Menu/context.tsx

@@ -1,8 +1,12 @@
 import React from 'react'
 
-import type {ContextType} from '#/components/Menu/types'
+import type {ContextType, ItemContextType} from '#/components/Menu/types'
 
 export const Context = React.createContext<ContextType>({
   // @ts-ignore
   control: null,
 })
+
+export const ItemContext = React.createContext<ItemContextType>({
+  disabled: false,
+})

src/components/Menu/index.tsx

@@ -9,7 +9,7 @@ import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {Context} from '#/components/Menu/context'
+import {Context, ItemContext} from '#/components/Menu/context'
 import {
   ContextType,
   GroupProps,
@@ -125,8 +125,14 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
       }}
       onFocus={onFocus}
       onBlur={onBlur}
-      onPressIn={onPressIn}
+      onPressIn={e => {
-      onPressOut={onPressOut}
+        onPressIn()
+        rest.onPressIn?.(e)
+      }}
+      onPressOut={e => {
+        onPressOut()
+        rest.onPressOut?.(e)
+      }}
       style={[
         a.flex_row,
         a.align_center,
@@ -138,15 +144,18 @@ export function Item({children, label, style, onPress, ...rest}: ItemProps) {
         t.atoms.border_contrast_low,
         {minHeight: 44, paddingVertical: 10},
         style,
-        (focused || pressed) && [t.atoms.bg_contrast_50],
+        (focused || pressed) && !rest.disabled && [t.atoms.bg_contrast_50],
       ]}>
-      {children}
+      <ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
+        {children}
+      </ItemContext.Provider>
     </Pressable>
   )
 }
 
 export function ItemText({children, style}: ItemTextProps) {
   const t = useTheme()
+  const {disabled} = React.useContext(ItemContext)
   return (
     <Text
       numberOfLines={1}
@@ -155,9 +164,10 @@ export function ItemText({children, style}: ItemTextProps) {
         a.flex_1,
         a.text_md,
         a.font_bold,
-        t.atoms.text_contrast_medium,
+        t.atoms.text_contrast_high,
         {paddingTop: 3},
         style,
+        disabled && t.atoms.text_contrast_low,
       ]}>
       {children}
     </Text>
@@ -166,7 +176,17 @@ export function ItemText({children, style}: ItemTextProps) {
 
 export function ItemIcon({icon: Comp}: ItemIconProps) {
   const t = useTheme()
-  return <Comp size="lg" fill={t.atoms.text_contrast_medium.color} />
+  const {disabled} = React.useContext(ItemContext)
+  return (
+    <Comp
+      size="lg"
+      fill={
+        disabled
+          ? t.atoms.text_contrast_low.color
+          : t.atoms.text_contrast_medium.color
+      }
+    />
+  )
 }
 
 export function Group({children, style}: GroupProps) {

src/components/Menu/index.web.tsx

@@ -9,7 +9,7 @@ import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import {atoms as a, flatten, useTheme, web} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {useInteractionState} from '#/components/hooks/useInteractionState'
-import {Context} from '#/components/Menu/context'
+import {Context, ItemContext} from '#/components/Menu/context'
 import {
   ContextType,
   GroupProps,
@@ -239,18 +239,21 @@ export function Item({children, label, onPress, ...rest}: ItemProps) {
           a.rounded_xs,
           {minHeight: 32, paddingHorizontal: 10},
           web({outline: 0}),
-          (hovered || focused) && [
+          (hovered || focused) &&
-            web({outline: '0 !important'}),
+            !rest.disabled && [
-            t.name === 'light'
+              web({outline: '0 !important'}),
-              ? t.atoms.bg_contrast_25
+              t.name === 'light'
-              : t.atoms.bg_contrast_50,
+                ? t.atoms.bg_contrast_25
-          ],
+                : t.atoms.bg_contrast_50,
+            ],
         ])}
         {...web({
           onMouseEnter,
           onMouseLeave,
         })}>
-        {children}
+        <ItemContext.Provider value={{disabled: Boolean(rest.disabled)}}>
+          {children}
+        </ItemContext.Provider>
       </Pressable>
     </DropdownMenu.Item>
   )
@@ -258,8 +261,16 @@ export function Item({children, label, onPress, ...rest}: ItemProps) {
 
 export function ItemText({children, style}: ItemTextProps) {
   const t = useTheme()
+  const {disabled} = React.useContext(ItemContext)
   return (
-    <Text style={[a.flex_1, a.font_bold, t.atoms.text_contrast_high, style]}>
+    <Text
+      style={[
+        a.flex_1,
+        a.font_bold,
+        t.atoms.text_contrast_high,
+        style,
+        disabled && t.atoms.text_contrast_low,
+      ]}>
       {children}
     </Text>
   )
@@ -267,10 +278,9 @@ export function ItemText({children, style}: ItemTextProps) {
 
 export function ItemIcon({icon: Comp, position = 'left'}: ItemIconProps) {
   const t = useTheme()
+  const {disabled} = React.useContext(ItemContext)
   return (
-    <Comp
+    <View
-      size="md"
-      fill={t.atoms.text_contrast_medium.color}
       style={[
         position === 'left' && {
           marginLeft: -2,
@@ -279,8 +289,16 @@ export function ItemIcon({icon: Comp, position = 'left'}: ItemIconProps) {
           marginRight: -2,
           marginLeft: 12,
         },
-      ]}
+      ]}>
-    />
+      <Comp
+        size="md"
+        fill={
+          disabled
+            ? t.atoms.text_contrast_low.color
+            : t.atoms.text_contrast_medium.color
+        }
+      />
+    </View>
   )
 }
 

src/components/Menu/types.ts

@@ -1,18 +1,22 @@
 import React from 'react'
 import {
+  AccessibilityProps,
   GestureResponderEvent,
   PressableProps,
-  AccessibilityProps,
 } from 'react-native'
 
-import {Props as SVGIconProps} from '#/components/icons/common'
-import * as Dialog from '#/components/Dialog'
 import {TextStyleProp, ViewStyleProp} from '#/alf'
+import * as Dialog from '#/components/Dialog'
+import {Props as SVGIconProps} from '#/components/icons/common'
 
 export type ContextType = {
   control: Dialog.DialogOuterProps['control']
 }
 
+export type ItemContextType = {
+  disabled: boolean
+}
+
 export type RadixPassThroughTriggerProps = {
   id: string
   type: 'button'

src/components/Pills.tsx

@@ -13,6 +13,15 @@ import {
 } from '#/components/moderation/ModerationDetailsDialog'
 import {Text} from '#/components/Typography'
 
+export type AppModerationCause =
+  | ModerationCause
+  | {
+      type: 'reply-hidden'
+      source: {type: 'user'; did: string}
+      priority: 6
+      downgraded?: boolean
+    }
+
 export type CommonProps = {
   size?: 'sm' | 'lg'
 }
@@ -40,7 +49,7 @@ export function Row({
 }
 
 export type LabelProps = {
-  cause: ModerationCause
+  cause: AppModerationCause
   disableDetailsDialog?: boolean
   noBg?: boolean
 } & CommonProps

src/components/ReportDialog/SubmitView.tsx

@@ -6,7 +6,6 @@ import {useLingui} from '@lingui/react'
 
 import {getLabelingServiceTitle} from '#/lib/moderation'
 import {ReportOption} from '#/lib/moderation/useReportOptions'
-import {useGate} from '#/lib/statsig/statsig'
 import {useAgent} from '#/state/session'
 import {CharProgress} from '#/view/com/composer/char-progress/CharProgress'
 import * as Toast from '#/view/com/util/Toast'
@@ -37,7 +36,6 @@ export function SubmitView({
   const t = useTheme()
   const {_} = useLingui()
   const agent = useAgent()
-  const gate = useGate()
   const [details, setDetails] = React.useState<string>('')
   const [submitting, setSubmitting] = React.useState<boolean>(false)
   const [selectedServices, setSelectedServices] = React.useState<string[]>([
@@ -63,27 +61,17 @@ export function SubmitView({
     }
     const results = await Promise.all(
       selectedServices.map(did => {
-        if (gate('session_withproxy_fix')) {
+        return agent
-          return agent
+          .createModerationReport(report, {
-            .createModerationReport(report, {
+            encoding: 'application/json',
-              encoding: 'application/json',
+            headers: {
-              headers: {
+              'atproto-proxy': `${did}#atproto_labeler`,
-                'atproto-proxy': `${did}#atproto_labeler`,
+            },
-              },
+          })
-            })
+          .then(
-            .then(
+            _ => true,
-              _ => true,
+            _ => false,
-              _ => false,
+          )
-            )
-        } else {
-          return agent
-            .withProxy('atproto_labeler', did)
-            .createModerationReport(report)
-            .then(
-              _ => true,
-              _ => false,
-            )
-        }
       }),
     )
 
@@ -108,7 +96,6 @@ export function SubmitView({
     onSubmitComplete,
     setError,
     agent,
-    gate,
   ])
 
   return (

src/components/StarterPack/Main/ProfilesList.tsx

@@ -9,14 +9,15 @@ import {
 import {InfiniteData, UseInfiniteQueryResult} from '@tanstack/react-query'
 
 import {useBottomBarOffset} from 'lib/hooks/useBottomBarOffset'
+import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
 import {isBlockedOrBlocking} from 'lib/moderation/blocked-and-muted'
 import {isNative, isWeb} from 'platform/detection'
-import {useListMembersQuery} from 'state/queries/list-members'
+import {useAllListMembersQuery} from 'state/queries/list-members'
 import {useSession} from 'state/session'
 import {List, ListRef} from 'view/com/util/List'
 import {SectionRef} from '#/screens/Profile/Sections/types'
 import {atoms as a, useTheme} from '#/alf'
-import {ListMaybePlaceholder} from '#/components/Lists'
+import {ListFooter, ListMaybePlaceholder} from '#/components/Lists'
 import {Default as ProfileCard} from '#/components/ProfileCard'
 
 function keyExtractor(item: AppBskyActorDefs.ProfileViewBasic, index: number) {
@@ -39,17 +40,20 @@ export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
     ref,
   ) {
     const t = useTheme()
-    const [initialHeaderHeight] = React.useState(headerHeight)
+    const bottomBarOffset = useBottomBarOffset(200)
-    const bottomBarOffset = useBottomBarOffset(20)
+    const initialNumToRender = useInitialNumToRender()
     const {currentAccount} = useSession()
-    const {data, refetch, isError} = useListMembersQuery(listUri, 50)
+    const {data, refetch, isError} = useAllListMembersQuery(listUri)
 
     const [isPTRing, setIsPTRing] = React.useState(false)
 
     // The server returns these sorted by descending creation date, so we want to invert
-    const profiles = data?.pages
+
-      .flatMap(p => p.items.map(i => i.subject))
+    const profiles = data
-      .filter(p => !isBlockedOrBlocking(p) && !p.associated?.labeler)
+      ?.filter(
+        p => !isBlockedOrBlocking(p.subject) && !p.subject.associated?.labeler,
+      )
+      .map(p => p.subject)
       .reverse()
     const isOwn = new AtUri(listUri).host === currentAccount?.did
 
@@ -99,7 +103,11 @@ export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
 
     if (!data) {
       return (
-        <View style={{marginTop: headerHeight, marginBottom: bottomBarOffset}}>
+        <View
+          style={[
+            a.h_full_vh,
+            {marginTop: headerHeight, marginBottom: bottomBarOffset},
+          ]}>
           <ListMaybePlaceholder
             isLoading={true}
             isError={isError}
@@ -118,10 +126,13 @@ export const ProfilesList = React.forwardRef<SectionRef, ProfilesListProps>(
           ref={scrollElRef}
           headerOffset={headerHeight}
           ListFooterComponent={
-            <View style={[{height: initialHeaderHeight + bottomBarOffset}]} />
+            <ListFooter
+              style={{paddingBottom: bottomBarOffset, borderTopWidth: 0}}
+            />
           }
           showsVerticalScrollIndicator={false}
           desktopFixedHeight
+          initialNumToRender={initialNumToRender}
           refreshing={isPTRing}
           onRefresh={async () => {
             setIsPTRing(true)

src/components/StarterPack/StarterPackCard.tsx

@@ -1,8 +1,7 @@
 import React from 'react'
 import {View} from 'react-native'
 import {Image} from 'expo-image'
-import {AppBskyGraphStarterpack, AtUri} from '@atproto/api'
+import {AppBskyGraphDefs, AppBskyGraphStarterpack, AtUri} from '@atproto/api'
-import {StarterPackViewBasic} from '@atproto/api/dist/client/types/app/bsky/graph/defs'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
@@ -17,7 +16,11 @@ import {StarterPack} from '#/components/icons/StarterPack'
 import {BaseLink} from '#/components/Link'
 import {Text} from '#/components/Typography'
 
-export function Default({starterPack}: {starterPack?: StarterPackViewBasic}) {
+export function Default({
+  starterPack,
+}: {
+  starterPack?: AppBskyGraphDefs.StarterPackViewBasic
+}) {
   if (!starterPack) return null
   return (
     <Link starterPack={starterPack}>
@@ -29,7 +32,7 @@ export function Default({starterPack}: {starterPack?: StarterPackViewBasic}) {
 export function Notification({
   starterPack,
 }: {
-  starterPack?: StarterPackViewBasic
+  starterPack?: AppBskyGraphDefs.StarterPackViewBasic
 }) {
   if (!starterPack) return null
   return (
@@ -44,7 +47,7 @@ export function Card({
   noIcon,
   noDescription,
 }: {
-  starterPack: StarterPackViewBasic
+  starterPack: AppBskyGraphDefs.StarterPackViewBasic
   noIcon?: boolean
   noDescription?: boolean
 }) {
@@ -94,7 +97,7 @@ export function Link({
   starterPack,
   children,
 }: {
-  starterPack: StarterPackViewBasic
+  starterPack: AppBskyGraphDefs.StarterPackViewBasic
   onPress?: () => void
   children: React.ReactNode
 }) {
@@ -129,7 +132,11 @@ export function Link({
   )
 }
 
-export function Embed({starterPack}: {starterPack: StarterPackViewBasic}) {
+export function Embed({
+  starterPack,
+}: {
+  starterPack: AppBskyGraphDefs.StarterPackViewBasic
+}) {
   const t = useTheme()
   const imageUri = getStarterPackOgCard(starterPack)
 

src/components/StarterPack/Wizard/WizardEditListDialog.tsx

@@ -7,6 +7,7 @@ import {BottomSheetFlatListMethods} from '@discord/bottom-sheet'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
+import {useInitialNumToRender} from 'lib/hooks/useInitialNumToRender'
 import {isWeb} from 'platform/detection'
 import {useSession} from 'state/session'
 import {WizardAction, WizardState} from '#/screens/StarterPack/Wizard/State'
@@ -42,6 +43,7 @@ export function WizardEditListDialog({
   const {_} = useLingui()
   const t = useTheme()
   const {currentAccount} = useSession()
+  const initialNumToRender = useInitialNumToRender()
 
   const listRef = useRef<BottomSheetFlatListMethods>(null)
 
@@ -148,6 +150,7 @@ export function WizardEditListDialog({
         webInnerStyle={[a.py_0, {maxWidth: 500, minWidth: 200}]}
         keyboardDismissMode="on-drag"
         removeClippedSubviews={true}
+        initialNumToRender={initialNumToRender}
       />
     </Dialog.Outer>
   )

src/components/StarterPack/Wizard/WizardListCard.tsx

@@ -12,7 +12,7 @@ import {GeneratorView} from '@atproto/api/dist/client/types/app/bsky/feed/defs'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {DISCOVER_FEED_URI} from 'lib/constants'
+import {DISCOVER_FEED_URI, STARTER_PACK_MAX_SIZE} from 'lib/constants'
 import {sanitizeDisplayName} from 'lib/strings/display-names'
 import {sanitizeHandle} from 'lib/strings/handles'
 import {useSession} from 'state/session'
@@ -130,7 +130,8 @@ export function WizardProfileCard({
 
   const isMe = profile.did === currentAccount?.did
   const included = isMe || state.profiles.some(p => p.did === profile.did)
-  const disabled = isMe || (!included && state.profiles.length >= 49)
+  const disabled =
+    isMe || (!included && state.profiles.length >= STARTER_PACK_MAX_SIZE - 1)
   const moderationUi = moderateProfile(profile, moderationOpts).ui('avatar')
   const displayName = profile.displayName
     ? sanitizeDisplayName(profile.displayName)

src/components/WhoCanReply.tsx

@@ -1,39 +1,34 @@
 import React from 'react'
-import {Keyboard, StyleProp, View, ViewStyle} from 'react-native'
+import {Keyboard, Platform, StyleProp, View, ViewStyle} from 'react-native'
 import {
   AppBskyFeedDefs,
-  AppBskyFeedGetPostThread,
+  AppBskyFeedPost,
   AppBskyGraphDefs,
   AtUri,
-  BskyAgent,
 } from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useQueryClient} from '@tanstack/react-query'
 
-import {createThreadgate} from '#/lib/api'
-import {until} from '#/lib/async/until'
 import {HITSLOP_10} from '#/lib/constants'
 import {makeListLink, makeProfileLink} from '#/lib/routes/links'
-import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
-import {RQKEY_ROOT as POST_THREAD_RQKEY_ROOT} from '#/state/queries/post-thread'
 import {
-  ThreadgateSetting,
+  ThreadgateAllowUISetting,
-  threadgateViewToSettings,
+  threadgateViewToAllowUISetting,
 } from '#/state/queries/threadgate'
-import {useAgent} from '#/state/session'
-import * as Toast from 'view/com/util/Toast'
 import {atoms as a, useTheme} from '#/alf'
 import {Button} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
+import {
+  PostInteractionSettingsDialog,
+  usePrefetchPostInteractionSettings,
+} from '#/components/dialogs/PostInteractionSettingsDialog'
 import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
 import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe'
 import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
+import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
-import {TextLink} from '../view/com/util/Link'
-import {ThreadgateEditorDialog} from './dialogs/ThreadgateEditor'
 import {PencilLine_Stroke2_Corner0_Rounded as PencilLine} from './icons/Pencil'
 
 interface WhoCanReplyProps {
@@ -47,31 +42,34 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
   const t = useTheme()
   const infoDialogControl = useDialogControl()
   const editDialogControl = useDialogControl()
-  const agent = useAgent()
-  const queryClient = useQueryClient()
 
-  const settings = React.useMemo(
+  /*
-    () => threadgateViewToSettings(post.threadgate),
+   * `WhoCanReply` is only used for root posts atm, in case this changes
-    [post],
+   * unexpectedly, we should check to make sure it's for sure the root URI.
-  )
+   */
-  const isRootPost = !('reply' in post.record)
+  const rootUri =
+    AppBskyFeedPost.isRecord(post.record) && post.record.reply?.root
+      ? post.record.reply.root.uri
+      : post.uri
+  const settings = React.useMemo(() => {
+    return threadgateViewToAllowUISetting(post.threadgate)
+  }, [post.threadgate])
 
-  if (!isRootPost) {
+  const prefetchPostInteractionSettings = usePrefetchPostInteractionSettings({
-    return null
+    postUri: post.uri,
-  }
+    rootPostUri: rootUri,
-  if (!settings.length && !isThreadAuthor) {
+  })
-    return null
-  }
 
-  const isEverybody = settings.length === 0
+  const anyoneCanReply =
-  const isNobody = !!settings.find(gate => gate.type === 'nobody')
+    settings.length === 1 && settings[0].type === 'everybody'
-  const description = isEverybody
+  const noOneCanReply = settings.length === 1 && settings[0].type === 'nobody'
+  const description = anyoneCanReply
     ? _(msg`Everybody can reply`)
-    : isNobody
+    : noOneCanReply
     ? _(msg`Replies disabled`)
     : _(msg`Some people can reply`)
 
-  const onPressEdit = () => {
+  const onPressOpen = () => {
     if (isNative && Keyboard.isVisible()) {
       Keyboard.dismiss()
     }
@@ -82,52 +80,23 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
     }
   }
 
-  const onEditConfirm = async (newSettings: ThreadgateSetting[]) => {
-    if (JSON.stringify(settings) === JSON.stringify(newSettings)) {
-      return
-    }
-    try {
-      if (newSettings.length) {
-        await createThreadgate(agent, post.uri, newSettings)
-      } else {
-        await agent.api.com.atproto.repo.deleteRecord({
-          repo: agent.session!.did,
-          collection: 'app.bsky.feed.threadgate',
-          rkey: new AtUri(post.uri).rkey,
-        })
-      }
-      await whenAppViewReady(agent, post.uri, res => {
-        const thread = res.data.thread
-        if (AppBskyFeedDefs.isThreadViewPost(thread)) {
-          const fetchedSettings = threadgateViewToSettings(
-            thread.post.threadgate,
-          )
-          return JSON.stringify(fetchedSettings) === JSON.stringify(newSettings)
-        }
-        return false
-      })
-      Toast.show(_(msg`Thread settings updated`))
-      queryClient.invalidateQueries({
-        queryKey: [POST_THREAD_RQKEY_ROOT],
-      })
-    } catch (err) {
-      Toast.show(
-        _(
-          msg`There was an issue. Please check your internet connection and try again.`,
-        ),
-        'xmark',
-      )
-      logger.error('Failed to edit threadgate', {message: err})
-    }
-  }
-
   return (
     <>
       <Button
         label={
           isThreadAuthor ? _(msg`Edit who can reply`) : _(msg`Who can reply`)
         }
-        onPress={isThreadAuthor ? onPressEdit : infoDialogControl.open}
+        onPress={onPressOpen}
+        {...(isThreadAuthor
+          ? Platform.select({
+              web: {
+                onHoverIn: prefetchPostInteractionSettings,
+              },
+              native: {
+                onPressIn: prefetchPostInteractionSettings,
+              },
+            })
+          : {})}
         hitSlop={HITSLOP_10}>
         {({hovered}) => (
           <View style={[a.flex_row, a.align_center, a.gap_xs, style]}>
@@ -145,22 +114,27 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
               ]}>
               {description}
             </Text>
+
             {isThreadAuthor && (
               <PencilLine width={12} fill={t.palette.primary_500} />
             )}
           </View>
         )}
       </Button>
-      <WhoCanReplyDialog
+
-        control={infoDialogControl}
+      {isThreadAuthor ? (
-        post={post}
+        <PostInteractionSettingsDialog
-        settings={settings}
+          postUri={post.uri}
-      />
+          rootPostUri={rootUri}
-      {isThreadAuthor && (
-        <ThreadgateEditorDialog
           control={editDialogControl}
-          threadgate={settings}
+          initialThreadgateView={post.threadgate}
-          onConfirm={onEditConfirm}
+        />
+      ) : (
+        <WhoCanReplyDialog
+          control={infoDialogControl}
+          post={post}
+          settings={settings}
+          embeddingDisabled={Boolean(post.viewer?.embeddingDisabled)}
         />
       )}
     </>
@@ -174,7 +148,7 @@ function Icon({
 }: {
   color: string
   width?: number
-  settings: ThreadgateSetting[]
+  settings: ThreadgateAllowUISetting[]
 }) {
   const isEverybody = settings.length === 0
   const isNobody = !!settings.find(gate => gate.type === 'nobody')
@@ -186,79 +160,84 @@ function WhoCanReplyDialog({
   control,
   post,
   settings,
+  embeddingDisabled,
 }: {
   control: Dialog.DialogControlProps
   post: AppBskyFeedDefs.PostView
-  settings: ThreadgateSetting[]
+  settings: ThreadgateAllowUISetting[]
-}) {
+  embeddingDisabled: boolean
-  return (
-    <Dialog.Outer control={control}>
-      <Dialog.Handle />
-      <WhoCanReplyDialogInner post={post} settings={settings} />
-    </Dialog.Outer>
-  )
-}
-
-function WhoCanReplyDialogInner({
-  post,
-  settings,
-}: {
-  post: AppBskyFeedDefs.PostView
-  settings: ThreadgateSetting[]
 }) {
   const {_} = useLingui()
   return (
-    <Dialog.ScrollableInner
+    <Dialog.Outer control={control}>
-      label={_(msg`Who can reply dialog`)}
+      <Dialog.Handle />
-      style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
+      <Dialog.ScrollableInner
-      <View style={[a.gap_sm]}>
+        label={_(msg`Dialog: adjust who can interact with this post`)}
-        <Text style={[a.font_bold, a.text_xl]}>
+        style={[{width: 'auto', maxWidth: 400, minWidth: 200}]}>
-          <Trans>Who can reply?</Trans>
+        <View style={[a.gap_sm]}>
-        </Text>
+          <Text style={[a.font_bold, a.text_xl, a.pb_sm]}>
-        <Rules post={post} settings={settings} />
+            <Trans>Who can interact with this post?</Trans>
-      </View>
+          </Text>
-    </Dialog.ScrollableInner>
+          <Rules
+            post={post}
+            settings={settings}
+            embeddingDisabled={embeddingDisabled}
+          />
+        </View>
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
   )
 }
 
 function Rules({
   post,
   settings,
+  embeddingDisabled,
 }: {
   post: AppBskyFeedDefs.PostView
-  settings: ThreadgateSetting[]
+  settings: ThreadgateAllowUISetting[]
+  embeddingDisabled: boolean
 }) {
   const t = useTheme()
+
   return (
-    <Text
+    <>
-      style={[
+      <Text
-        a.text_md,
+        style={[
-        a.leading_tight,
+          a.text_sm,
-        a.flex_wrap,
+          a.leading_snug,
-        t.atoms.text_contrast_medium,
+          a.flex_wrap,
-      ]}>
+          t.atoms.text_contrast_medium,
-      {!settings.length ? (
+        ]}>
-        <Trans>Everybody can reply</Trans>
+        {settings[0].type === 'everybody' ? (
-      ) : settings[0].type === 'nobody' ? (
+          <Trans>Everybody can reply to this post.</Trans>
-        <Trans>Replies to this thread are disabled</Trans>
+        ) : settings[0].type === 'nobody' ? (
-      ) : (
+          <Trans>Replies to this post are disabled.</Trans>
-        <Trans>
+        ) : (
-          Only{' '}
+          <Trans>
-          {settings.map((rule, i) => (
+            Only{' '}
-            <>
+            {settings.map((rule, i) => (
-              <Rule
+              <React.Fragment key={`rule-${i}`}>
-                key={`rule-${i}`}
+                <Rule rule={rule} post={post} lists={post.threadgate!.lists} />
-                rule={rule}
+                <Separator i={i} length={settings.length} />
-                post={post}
+              </React.Fragment>
-                lists={post.threadgate!.lists}
+            ))}{' '}
-              />
+            can reply.
-              <Separator key={`sep-${i}`} i={i} length={settings.length} />
+          </Trans>
-            </>
+        )}{' '}
-          ))}{' '}
+      </Text>
-          can reply
+      {embeddingDisabled && (
-        </Trans>
+        <Text
+          style={[
+            a.text_sm,
+            a.leading_snug,
+            a.flex_wrap,
+            t.atoms.text_contrast_medium,
+          ]}>
+          <Trans>No one but the author can quote this post.</Trans>
+        </Text>
       )}
-    </Text>
+    </>
   )
 }
 
@@ -267,11 +246,10 @@ function Rule({
   post,
   lists,
 }: {
-  rule: ThreadgateSetting
+  rule: ThreadgateAllowUISetting
   post: AppBskyFeedDefs.PostView
   lists: AppBskyGraphDefs.ListViewBasic[] | undefined
 }) {
-  const t = useTheme()
   if (rule.type === 'mention') {
     return <Trans>mentioned users</Trans>
   }
@@ -279,12 +257,12 @@ function Rule({
     return (
       <Trans>
         users followed by{' '}
-        <TextLink
+        <InlineLinkText
-          type="sm"
+          label={`@${post.author.handle}`}
-          href={makeProfileLink(post.author)}
+          to={makeProfileLink(post.author)}
-          text={`@${post.author.handle}`}
+          style={[a.text_sm, a.leading_snug]}>
-          style={{color: t.palette.primary_500}}
+          @{post.author.handle}
-        />
+        </InlineLinkText>
       </Trans>
     )
   }
@@ -294,12 +272,12 @@ function Rule({
       const listUrip = new AtUri(list.uri)
       return (
         <Trans>
-          <TextLink
+          <InlineLinkText
-            type="sm"
+            label={list.name}
-            href={makeListLink(listUrip.hostname, listUrip.rkey)}
+            to={makeListLink(listUrip.hostname, listUrip.rkey)}
-            text={list.name}
+            style={[a.text_sm, a.leading_snug]}>
-            style={{color: t.palette.primary_500}}
+            {list.name}
-          />{' '}
+          </InlineLinkText>{' '}
           members
         </Trans>
       )
@@ -320,20 +298,3 @@ function Separator({i, length}: {i: number; length: number}) {
   }
   return <>, </>
 }
-
-async function whenAppViewReady(
-  agent: BskyAgent,
-  uri: string,
-  fn: (res: AppBskyFeedGetPostThread.Response) => boolean,
-) {
-  await until(
-    5, // 5 tries
-    1e3, // 1s delay between tries
-    fn,
-    () =>
-      agent.app.bsky.feed.getPostThread({
-        uri,
-        depth: 0,
-      }),
-  )
-}

src/components/dialogs/GifSelect.tsx

@@ -249,7 +249,9 @@ function DialogError({details}: {details?: string}) {
   const control = Dialog.useDialogContext()
 
   return (
-    <Dialog.ScrollableInner style={a.gap_md} label={_(msg`An error occured`)}>
+    <Dialog.ScrollableInner
+      style={a.gap_md}
+      label={_(msg`An error has occurred`)}>
       <Dialog.Close />
       <ErrorScreen
         title={_(msg`Oh no!`)}

src/components/dialogs/PostInteractionSettingsDialog.tsx

@@ -0,0 +1,538 @@
+import React from 'react'
+import {StyleProp, View, ViewStyle} from 'react-native'
+import {AppBskyFeedDefs, AppBskyFeedPostgate, AtUri} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useQueryClient} from '@tanstack/react-query'
+import isEqual from 'lodash.isequal'
+
+import {logger} from '#/logger'
+import {STALE} from '#/state/queries'
+import {useMyListsQuery} from '#/state/queries/my-lists'
+import {
+  createPostgateQueryKey,
+  getPostgateRecord,
+  usePostgateQuery,
+  useWritePostgateMutation,
+} from '#/state/queries/postgate'
+import {
+  createPostgateRecord,
+  embeddingRules,
+} from '#/state/queries/postgate/util'
+import {
+  createThreadgateViewQueryKey,
+  getThreadgateView,
+  ThreadgateAllowUISetting,
+  threadgateViewToAllowUISetting,
+  useSetThreadgateAllowMutation,
+  useThreadgateViewQuery,
+} from '#/state/queries/threadgate'
+import {useAgent, useSession} from '#/state/session'
+import * as Toast from '#/view/com/util/Toast'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {Divider} from '#/components/Divider'
+import * as Toggle from '#/components/forms/Toggle'
+import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {Loader} from '#/components/Loader'
+import {Text} from '#/components/Typography'
+
+export type PostInteractionSettingsFormProps = {
+  onSave: () => void
+  isSaving?: boolean
+
+  postgate: AppBskyFeedPostgate.Record
+  onChangePostgate: (v: AppBskyFeedPostgate.Record) => void
+
+  threadgateAllowUISettings: ThreadgateAllowUISetting[]
+  onChangeThreadgateAllowUISettings: (v: ThreadgateAllowUISetting[]) => void
+
+  replySettingsDisabled?: boolean
+}
+
+export function PostInteractionSettingsControlledDialog({
+  control,
+  ...rest
+}: PostInteractionSettingsFormProps & {
+  control: Dialog.DialogControlProps
+}) {
+  const {_} = useLingui()
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+      <Dialog.ScrollableInner
+        label={_(msg`Edit post interaction settings`)}
+        style={[{maxWidth: 500}, a.w_full]}>
+        <PostInteractionSettingsForm {...rest} />
+        <Dialog.Close />
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}
+
+export type PostInteractionSettingsDialogProps = {
+  control: Dialog.DialogControlProps
+  /**
+   * URI of the post to edit the interaction settings for. Could be a root post
+   * or could be a reply.
+   */
+  postUri: string
+  /**
+   * The URI of the root post in the thread. Used to determine if the viewer
+   * owns the threadgate record and can therefore edit it.
+   */
+  rootPostUri: string
+  /**
+   * Optional initial {@link AppBskyFeedDefs.ThreadgateView} to use if we
+   * happen to have one before opening the settings dialog.
+   */
+  initialThreadgateView?: AppBskyFeedDefs.ThreadgateView
+}
+
+export function PostInteractionSettingsDialog(
+  props: PostInteractionSettingsDialogProps,
+) {
+  return (
+    <Dialog.Outer control={props.control}>
+      <Dialog.Handle />
+      <PostInteractionSettingsDialogControlledInner {...props} />
+    </Dialog.Outer>
+  )
+}
+
+export function PostInteractionSettingsDialogControlledInner(
+  props: PostInteractionSettingsDialogProps,
+) {
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const [isSaving, setIsSaving] = React.useState(false)
+
+  const {data: threadgateViewLoaded, isLoading: isLoadingThreadgate} =
+    useThreadgateViewQuery({postUri: props.rootPostUri})
+  const {data: postgate, isLoading: isLoadingPostgate} = usePostgateQuery({
+    postUri: props.postUri,
+  })
+
+  const {mutateAsync: writePostgateRecord} = useWritePostgateMutation()
+  const {mutateAsync: setThreadgateAllow} = useSetThreadgateAllowMutation()
+
+  const [editedPostgate, setEditedPostgate] =
+    React.useState<AppBskyFeedPostgate.Record>()
+  const [editedAllowUISettings, setEditedAllowUISettings] =
+    React.useState<ThreadgateAllowUISetting[]>()
+
+  const isLoading = isLoadingThreadgate || isLoadingPostgate
+  const threadgateView = threadgateViewLoaded || props.initialThreadgateView
+  const isThreadgateOwnedByViewer = React.useMemo(() => {
+    return currentAccount?.did === new AtUri(props.rootPostUri).host
+  }, [props.rootPostUri, currentAccount?.did])
+
+  const postgateValue = React.useMemo(() => {
+    return (
+      editedPostgate || postgate || createPostgateRecord({post: props.postUri})
+    )
+  }, [postgate, editedPostgate, props.postUri])
+  const allowUIValue = React.useMemo(() => {
+    return (
+      editedAllowUISettings || threadgateViewToAllowUISetting(threadgateView)
+    )
+  }, [threadgateView, editedAllowUISettings])
+
+  const onSave = React.useCallback(async () => {
+    if (!editedPostgate && !editedAllowUISettings) {
+      props.control.close()
+      return
+    }
+
+    setIsSaving(true)
+
+    try {
+      const requests = []
+
+      if (editedPostgate) {
+        requests.push(
+          writePostgateRecord({
+            postUri: props.postUri,
+            postgate: editedPostgate,
+          }),
+        )
+      }
+
+      if (editedAllowUISettings && isThreadgateOwnedByViewer) {
+        requests.push(
+          setThreadgateAllow({
+            postUri: props.rootPostUri,
+            allow: editedAllowUISettings,
+          }),
+        )
+      }
+
+      await Promise.all(requests)
+
+      props.control.close()
+    } catch (e: any) {
+      logger.error(`Failed to save post interaction settings`, {
+        context: 'PostInteractionSettingsDialogControlledInner',
+        safeMessage: e.message,
+      })
+      Toast.show(
+        _(
+          msg`There was an issue. Please check your internet connection and try again.`,
+        ),
+        'xmark',
+      )
+    } finally {
+      setIsSaving(false)
+    }
+  }, [
+    _,
+    props.postUri,
+    props.rootPostUri,
+    props.control,
+    editedPostgate,
+    editedAllowUISettings,
+    setIsSaving,
+    writePostgateRecord,
+    setThreadgateAllow,
+    isThreadgateOwnedByViewer,
+  ])
+
+  return (
+    <Dialog.ScrollableInner
+      label={_(msg`Edit post interaction settings`)}
+      style={[{maxWidth: 500}, a.w_full]}>
+      {isLoading ? (
+        <Loader size="xl" />
+      ) : (
+        <PostInteractionSettingsForm
+          replySettingsDisabled={!isThreadgateOwnedByViewer}
+          isSaving={isSaving}
+          onSave={onSave}
+          postgate={postgateValue}
+          onChangePostgate={setEditedPostgate}
+          threadgateAllowUISettings={allowUIValue}
+          onChangeThreadgateAllowUISettings={setEditedAllowUISettings}
+        />
+      )}
+    </Dialog.ScrollableInner>
+  )
+}
+
+export function PostInteractionSettingsForm({
+  onSave,
+  isSaving,
+  postgate,
+  onChangePostgate,
+  threadgateAllowUISettings,
+  onChangeThreadgateAllowUISettings,
+  replySettingsDisabled,
+}: PostInteractionSettingsFormProps) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const control = Dialog.useDialogContext()
+  const {data: lists} = useMyListsQuery('curate')
+  const [quotesEnabled, setQuotesEnabled] = React.useState(
+    !(
+      postgate.embeddingRules &&
+      postgate.embeddingRules.find(
+        v => v.$type === embeddingRules.disableRule.$type,
+      )
+    ),
+  )
+
+  const onPressAudience = (setting: ThreadgateAllowUISetting) => {
+    // remove boolean values
+    let newSelected: ThreadgateAllowUISetting[] =
+      threadgateAllowUISettings.filter(
+        v => v.type !== 'nobody' && v.type !== 'everybody',
+      )
+    // toggle
+    const i = newSelected.findIndex(v => isEqual(v, setting))
+    if (i === -1) {
+      newSelected.push(setting)
+    } else {
+      newSelected.splice(i, 1)
+    }
+
+    onChangeThreadgateAllowUISettings(newSelected)
+  }
+
+  const onChangeQuotesEnabled = React.useCallback(
+    (enabled: boolean) => {
+      setQuotesEnabled(enabled)
+      onChangePostgate(
+        createPostgateRecord({
+          ...postgate,
+          embeddingRules: enabled ? [] : [embeddingRules.disableRule],
+        }),
+      )
+    },
+    [setQuotesEnabled, postgate, onChangePostgate],
+  )
+
+  const noOneCanReply = !!threadgateAllowUISettings.find(
+    v => v.type === 'nobody',
+  )
+
+  return (
+    <View>
+      <View style={[a.flex_1, a.gap_md]}>
+        <Text style={[a.text_2xl, a.font_bold]}>
+          <Trans>Post interaction settings</Trans>
+        </Text>
+
+        <View style={[a.gap_lg]}>
+          <Text style={[a.text_md]}>
+            <Trans>Customize who can interact with this post.</Trans>
+          </Text>
+
+          <Divider />
+
+          <View style={[a.gap_sm]}>
+            <Text style={[a.font_bold, a.text_lg]}>
+              <Trans>Quote settings</Trans>
+            </Text>
+
+            <Toggle.Item
+              name="quoteposts"
+              type="checkbox"
+              label={
+                quotesEnabled
+                  ? _(msg`Click to disable quote posts of this post.`)
+                  : _(msg`Click to enable quote posts of this post.`)
+              }
+              value={quotesEnabled}
+              onChange={onChangeQuotesEnabled}
+              style={[, a.justify_between, a.pt_xs]}>
+              <Text style={[t.atoms.text_contrast_medium]}>
+                {quotesEnabled ? (
+                  <Trans>Quote posts enabled</Trans>
+                ) : (
+                  <Trans>Quote posts disabled</Trans>
+                )}
+              </Text>
+              <Toggle.Switch />
+            </Toggle.Item>
+          </View>
+
+          <Divider />
+
+          {replySettingsDisabled && (
+            <View
+              style={[
+                a.px_md,
+                a.py_sm,
+                a.rounded_sm,
+                a.flex_row,
+                a.align_center,
+                a.gap_sm,
+                t.atoms.bg_contrast_25,
+              ]}>
+              <CircleInfo fill={t.atoms.text_contrast_low.color} />
+              <Text
+                style={[
+                  a.flex_1,
+                  a.leading_snug,
+                  t.atoms.text_contrast_medium,
+                ]}>
+                <Trans>
+                  Reply settings are chosen by the author of the thread
+                </Trans>
+              </Text>
+            </View>
+          )}
+
+          <View
+            style={[
+              a.gap_sm,
+              {
+                opacity: replySettingsDisabled ? 0.3 : 1,
+              },
+            ]}>
+            <Text style={[a.font_bold, a.text_lg]}>
+              <Trans>Reply settings</Trans>
+            </Text>
+
+            <Text style={[a.pt_sm, t.atoms.text_contrast_medium]}>
+              <Trans>Allow replies from:</Trans>
+            </Text>
+
+            <View style={[a.flex_row, a.gap_sm]}>
+              <Selectable
+                label={_(msg`Everybody`)}
+                isSelected={
+                  !!threadgateAllowUISettings.find(v => v.type === 'everybody')
+                }
+                onPress={() =>
+                  onChangeThreadgateAllowUISettings([{type: 'everybody'}])
+                }
+                style={{flex: 1}}
+                disabled={replySettingsDisabled}
+              />
+              <Selectable
+                label={_(msg`Nobody`)}
+                isSelected={noOneCanReply}
+                onPress={() =>
+                  onChangeThreadgateAllowUISettings([{type: 'nobody'}])
+                }
+                style={{flex: 1}}
+                disabled={replySettingsDisabled}
+              />
+            </View>
+
+            {!noOneCanReply && (
+              <>
+                <Text style={[a.pt_sm, t.atoms.text_contrast_medium]}>
+                  <Trans>Or combine these options:</Trans>
+                </Text>
+
+                <View style={[a.gap_sm]}>
+                  <Selectable
+                    label={_(msg`Mentioned users`)}
+                    isSelected={
+                      !!threadgateAllowUISettings.find(
+                        v => v.type === 'mention',
+                      )
+                    }
+                    onPress={() => onPressAudience({type: 'mention'})}
+                    disabled={replySettingsDisabled}
+                  />
+                  <Selectable
+                    label={_(msg`Followed users`)}
+                    isSelected={
+                      !!threadgateAllowUISettings.find(
+                        v => v.type === 'following',
+                      )
+                    }
+                    onPress={() => onPressAudience({type: 'following'})}
+                    disabled={replySettingsDisabled}
+                  />
+                  {lists && lists.length > 0
+                    ? lists.map(list => (
+                        <Selectable
+                          key={list.uri}
+                          label={_(msg`Users in "${list.name}"`)}
+                          isSelected={
+                            !!threadgateAllowUISettings.find(
+                              v => v.type === 'list' && v.list === list.uri,
+                            )
+                          }
+                          onPress={() =>
+                            onPressAudience({type: 'list', list: list.uri})
+                          }
+                          disabled={replySettingsDisabled}
+                        />
+                      ))
+                    : // No loading states to avoid jumps for the common case (no lists)
+                      null}
+                </View>
+              </>
+            )}
+          </View>
+        </View>
+      </View>
+
+      <Button
+        label={_(msg`Save`)}
+        onPress={onSave}
+        onAccessibilityEscape={control.close}
+        color="primary"
+        size="medium"
+        variant="solid"
+        style={a.mt_xl}>
+        <ButtonText>{_(msg`Save`)}</ButtonText>
+        {isSaving && <ButtonIcon icon={Loader} position="right" />}
+      </Button>
+    </View>
+  )
+}
+
+function Selectable({
+  label,
+  isSelected,
+  onPress,
+  style,
+  disabled,
+}: {
+  label: string
+  isSelected: boolean
+  onPress: () => void
+  style?: StyleProp<ViewStyle>
+  disabled?: boolean
+}) {
+  const t = useTheme()
+  return (
+    <Button
+      disabled={disabled}
+      onPress={onPress}
+      label={label}
+      accessibilityRole="checkbox"
+      aria-checked={isSelected}
+      accessibilityState={{
+        checked: isSelected,
+      }}
+      style={a.flex_1}>
+      {({hovered, focused}) => (
+        <View
+          style={[
+            a.flex_1,
+            a.flex_row,
+            a.align_center,
+            a.justify_between,
+            a.rounded_sm,
+            a.p_md,
+            {height: 40}, // for consistency with checkmark icon visible or not
+            t.atoms.bg_contrast_50,
+            (hovered || focused) && t.atoms.bg_contrast_100,
+            isSelected && {
+              backgroundColor: t.palette.primary_100,
+            },
+            style,
+          ]}>
+          <Text style={[a.text_sm, isSelected && a.font_semibold]}>
+            {label}
+          </Text>
+          {isSelected ? (
+            <Check size="sm" fill={t.palette.primary_500} />
+          ) : (
+            <View />
+          )}
+        </View>
+      )}
+    </Button>
+  )
+}
+
+export function usePrefetchPostInteractionSettings({
+  postUri,
+  rootPostUri,
+}: {
+  postUri: string
+  rootPostUri: string
+}) {
+  const queryClient = useQueryClient()
+  const agent = useAgent()
+
+  return React.useCallback(async () => {
+    try {
+      await Promise.all([
+        queryClient.prefetchQuery({
+          queryKey: createPostgateQueryKey(postUri),
+          queryFn: () => getPostgateRecord({agent, postUri}),
+          staleTime: STALE.SECONDS.THIRTY,
+        }),
+        queryClient.prefetchQuery({
+          queryKey: createThreadgateViewQueryKey(rootPostUri),
+          queryFn: () => getThreadgateView({agent, postUri: rootPostUri}),
+          staleTime: STALE.SECONDS.THIRTY,
+        }),
+      ])
+    } catch (e: any) {
+      logger.error(`Failed to prefetch post interaction settings`, {
+        safeMessage: e.message,
+      })
+    }
+  }, [queryClient, agent, postUri, rootPostUri])
+}

src/components/dialogs/ThreadgateEditor.tsx

@@ -1,217 +0,0 @@
-import React from 'react'
-import {StyleProp, View, ViewStyle} from 'react-native'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import isEqual from 'lodash.isequal'
-
-import {useMyListsQuery} from '#/state/queries/my-lists'
-import {ThreadgateSetting} from '#/state/queries/threadgate'
-import {atoms as a, useTheme} from '#/alf'
-import {Button, ButtonText} from '#/components/Button'
-import * as Dialog from '#/components/Dialog'
-import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
-import {Text} from '#/components/Typography'
-
-interface ThreadgateEditorDialogProps {
-  control: Dialog.DialogControlProps
-  threadgate: ThreadgateSetting[]
-  onChange?: (v: ThreadgateSetting[]) => void
-  onConfirm?: (v: ThreadgateSetting[]) => void
-}
-
-export function ThreadgateEditorDialog({
-  control,
-  threadgate,
-  onChange,
-  onConfirm,
-}: ThreadgateEditorDialogProps) {
-  return (
-    <Dialog.Outer control={control}>
-      <Dialog.Handle />
-      <DialogContent
-        seedThreadgate={threadgate}
-        onChange={onChange}
-        onConfirm={onConfirm}
-      />
-    </Dialog.Outer>
-  )
-}
-
-function DialogContent({
-  seedThreadgate,
-  onChange,
-  onConfirm,
-}: {
-  seedThreadgate: ThreadgateSetting[]
-  onChange?: (v: ThreadgateSetting[]) => void
-  onConfirm?: (v: ThreadgateSetting[]) => void
-}) {
-  const {_} = useLingui()
-  const control = Dialog.useDialogContext()
-  const {data: lists} = useMyListsQuery('curate')
-  const [draft, setDraft] = React.useState(seedThreadgate)
-
-  const [prevSeedThreadgate, setPrevSeedThreadgate] =
-    React.useState(seedThreadgate)
-  if (seedThreadgate !== prevSeedThreadgate) {
-    // New data flowed from above (e.g. due to update coming through).
-    setPrevSeedThreadgate(seedThreadgate)
-    setDraft(seedThreadgate) // Reset draft.
-  }
-
-  function updateThreadgate(nextThreadgate: ThreadgateSetting[]) {
-    setDraft(nextThreadgate)
-    onChange?.(nextThreadgate)
-  }
-
-  const onPressEverybody = () => {
-    updateThreadgate([])
-  }
-
-  const onPressNobody = () => {
-    updateThreadgate([{type: 'nobody'}])
-  }
-
-  const onPressAudience = (setting: ThreadgateSetting) => {
-    // remove nobody
-    let newSelected: ThreadgateSetting[] = draft.filter(
-      v => v.type !== 'nobody',
-    )
-    // toggle
-    const i = newSelected.findIndex(v => isEqual(v, setting))
-    if (i === -1) {
-      newSelected.push(setting)
-    } else {
-      newSelected.splice(i, 1)
-    }
-    updateThreadgate(newSelected)
-  }
-
-  const doneLabel = onConfirm ? _(msg`Save`) : _(msg`Done`)
-  return (
-    <Dialog.ScrollableInner
-      label={_(msg`Choose who can reply`)}
-      style={[{maxWidth: 500}, a.w_full]}>
-      <View style={[a.flex_1, a.gap_md]}>
-        <Text style={[a.text_2xl, a.font_bold]}>
-          <Trans>Choose who can reply</Trans>
-        </Text>
-        <Text style={a.mt_xs}>
-          <Trans>Either choose "Everybody" or "Nobody"</Trans>
-        </Text>
-        <View style={[a.flex_row, a.gap_sm]}>
-          <Selectable
-            label={_(msg`Everybody`)}
-            isSelected={draft.length === 0}
-            onPress={onPressEverybody}
-            style={{flex: 1}}
-          />
-          <Selectable
-            label={_(msg`Nobody`)}
-            isSelected={!!draft.find(v => v.type === 'nobody')}
-            onPress={onPressNobody}
-            style={{flex: 1}}
-          />
-        </View>
-        <Text style={a.mt_md}>
-          <Trans>Or combine these options:</Trans>
-        </Text>
-        <View style={[a.gap_sm]}>
-          <Selectable
-            label={_(msg`Mentioned users`)}
-            isSelected={!!draft.find(v => v.type === 'mention')}
-            onPress={() => onPressAudience({type: 'mention'})}
-          />
-          <Selectable
-            label={_(msg`Followed users`)}
-            isSelected={!!draft.find(v => v.type === 'following')}
-            onPress={() => onPressAudience({type: 'following'})}
-          />
-          {lists && lists.length > 0
-            ? lists.map(list => (
-                <Selectable
-                  key={list.uri}
-                  label={_(msg`Users in "${list.name}"`)}
-                  isSelected={
-                    !!draft.find(v => v.type === 'list' && v.list === list.uri)
-                  }
-                  onPress={() =>
-                    onPressAudience({type: 'list', list: list.uri})
-                  }
-                />
-              ))
-            : // No loading states to avoid jumps for the common case (no lists)
-              null}
-        </View>
-      </View>
-      <Button
-        label={doneLabel}
-        onPress={() => {
-          control.close()
-          onConfirm?.(draft)
-        }}
-        onAccessibilityEscape={control.close}
-        color="primary"
-        size="medium"
-        variant="solid"
-        style={a.mt_xl}>
-        <ButtonText>{doneLabel}</ButtonText>
-      </Button>
-      <Dialog.Close />
-    </Dialog.ScrollableInner>
-  )
-}
-
-function Selectable({
-  label,
-  isSelected,
-  onPress,
-  style,
-}: {
-  label: string
-  isSelected: boolean
-  onPress: () => void
-  style?: StyleProp<ViewStyle>
-}) {
-  const t = useTheme()
-  return (
-    <Button
-      onPress={onPress}
-      label={label}
-      accessibilityHint="Select this option"
-      accessibilityRole="checkbox"
-      aria-checked={isSelected}
-      accessibilityState={{
-        checked: isSelected,
-      }}
-      style={a.flex_1}>
-      {({hovered, focused}) => (
-        <View
-          style={[
-            a.flex_1,
-            a.flex_row,
-            a.align_center,
-            a.justify_between,
-            a.rounded_sm,
-            a.p_md,
-            {height: 40}, // for consistency with checkmark icon visible or not
-            t.atoms.bg_contrast_50,
-            (hovered || focused) && t.atoms.bg_contrast_100,
-            isSelected && {
-              backgroundColor: t.palette.primary_100,
-            },
-            style,
-          ]}>
-          <Text style={[a.text_sm, isSelected && a.font_semibold]}>
-            {label}
-          </Text>
-          {isSelected ? (
-            <Check size="sm" fill={t.palette.primary_500} />
-          ) : (
-            <View />
-          )}
-        </View>
-      )}
-    </Button>
-  )
-}

src/components/forms/TextField.tsx

@@ -193,6 +193,7 @@ export function createInput(Component: typeof TextInput) {
               lineHeight: a.text_md.fontSize * 1.1875,
               textAlignVertical: rest.multiline ? 'top' : undefined,
               minHeight: rest.multiline ? 80 : undefined,
+              minWidth: 0,
             },
             // fix for autofill styles covering border
             web({

src/components/hooks/useThrottledValue.ts

@@ -2,7 +2,7 @@ import {useEffect, useRef, useState} from 'react'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 
-export function useThrottledValue<T>(value: T, time?: number) {
+export function useThrottledValue<T>(value: T, time: number) {
   const pendingValueRef = useRef(value)
   const [throttledValue, setThrottledValue] = useState(value)
 

src/components/icons/ArrowsDiagonal.tsx

@@ -0,0 +1,17 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const ArrowsDiagonalOut_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-4.293 4.293a1 1 0 0 1-1.414-1.414L17.586 5H14ZM4 13a1 1 0 0 1 1 1v3.586l4.293-4.293a1 1 0 0 1 1.414 1.414L6.414 19H10a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1v-6a1 1 0 0 1 1-1Z',
+})
+
+export const ArrowsDiagonalIn_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M20.957 3.043a1 1 0 0 1 0 1.414L16.414 9H20a1 1 0 1 1 0 2h-6a1 1 0 0 1-1-1V4a1 1 0 1 1 2 0v3.586l4.543-4.543a1 1 0 0 1 1.414 0ZM3 14a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-3.586l-4.543 4.543a1 1 0 0 1-1.414-1.414L7.586 15H4a1 1 0 0 1-1-1Z',
+})
+
+export const ArrowsDiagonalOut_Stroke2_Corner2_Rounded = createSinglePathSVG({
+  path: 'M13 4a1 1 0 0 1 1-1h5a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0V6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414L17.586 5H14a1 1 0 0 1-1-1Zm-9 9a1 1 0 0 1 1 1v3.586l4.293-4.293a1 1 0 0 1 1.414 1.414L6.414 19H10a1 1 0 1 1 0 2H5a2 2 0 0 1-2-2v-5a1 1 0 0 1 1-1Z',
+})
+
+export const ArrowsDiagonalIn_Stroke2_Corner2_Rounded = createSinglePathSVG({
+  path: 'M20.957 3.043a1 1 0 0 1 0 1.414L16.414 9H20a1 1 0 1 1 0 2h-5a2 2 0 0 1-2-2V4a1 1 0 1 1 2 0v3.586l4.543-4.543a1 1 0 0 1 1.414 0ZM3 14a1 1 0 0 1 1-1h5a2 2 0 0 1 2 2v5a1 1 0 1 1-2 0v-3.586l-4.543 4.543a1 1 0 0 1-1.414-1.414L7.586 15H4a1 1 0 0 1-1-1Z',
+})

src/components/icons/CC.tsx

@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const CC_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm2 1v14h14V5H5Zm10.957 6.293a1 1 0 1 0 0 1.414 1 1 0 0 1 1.414 1.414 3 3 0 1 1 0-4.242 1 1 0 0 1-1.414 1.414Zm-6.331-.22a1 1 0 1 0 .331 1.634 1 1 0 0 1 1.414 1.414 3 3 0 1 1 0-4.242 1 1 0 0 1-1.414 1.414.994.994 0 0 0-.331-.22Z',
+})
+
+export const CC_Filled_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3 4a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4Zm11.543 7.293a1 1 0 0 1 1.414 0 1 1 0 0 0 1.414-1.414 3 3 0 1 0 0 4.242 1 1 0 0 0-1.414-1.414 1 1 0 0 1-1.414-1.414Zm-6 0a1 1 0 0 1 1.414 0 1 1 0 0 0 1.414-1.414 3 3 0 1 0 0 4.243 1 1 0 0 0-1.414-1.415 1 1 0 0 1-1.414-1.414Z',
+})

src/components/icons/Eye.tsx

@@ -0,0 +1,5 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Eye_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M3.135 12C5.413 16.088 8.77 18 12 18s6.587-1.912 8.865-6C18.587 7.912 15.23 6 12 6c-3.228 0-6.587 1.912-8.865 6ZM12 4c4.24 0 8.339 2.611 10.888 7.54a1 1 0 0 1 0 .92C20.338 17.388 16.24 20 12 20c-4.24 0-8.339-2.611-10.888-7.54a1 1 0 0 1 0-.92C3.662 6.612 7.76 4 12 4Zm0 6a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm-4 2a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z',
+})

src/components/icons/Pause.tsx

@@ -0,0 +1,17 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Pause_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M4 4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4Zm2 1v14h2V5H6Zm8-1a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Zm2 1v14h2V5h-2Z',
+})
+
+export const Pause_Filled_Corner0_Rounded = createSinglePathSVG({
+  path: 'M4 4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4ZM14 4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1V4Z',
+})
+
+export const Pause_Stroke2_Corner2_Rounded = createSinglePathSVG({
+  path: 'M4 6a3 3 0 0 1 6 0v12a3 3 0 1 1-6 0V6Zm3-1a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Zm7 1a3 3 0 1 1 6 0v12a3 3 0 1 1-6 0V6Zm3-1a1 1 0 0 0-1 1v12a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1Z',
+})
+
+export const Pause_Filled_Corner2_Rounded = createSinglePathSVG({
+  path: 'M4 6a3 3 0 0 1 6 0v12a3 3 0 1 1-6 0V6ZM14 6a3 3 0 1 1 6 0v12a3 3 0 1 1-6 0V6Z',
+})

src/components/icons/Play.tsx

@@ -1,5 +1,13 @@
 import {createSinglePathSVG} from './TEMPLATE'
 
+export const Play_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M5.507 2.13a1 1 0 0 1 1.008.013l15 9a1 1 0 0 1 0 1.714l-15 9A1 1 0 0 1 5 21V3a1 1 0 0 1 .507-.87ZM7 4.766v14.468L19.056 12 7 4.766Z',
+})
+
+export const Play_Filled_Corner0_Rounded = createSinglePathSVG({
+  path: 'M6.514 2.143A1 1 0 0 0 5 3v18a1 1 0 0 0 1.514.858l15-9a1 1 0 0 0 0-1.716l-15-9Z',
+})
+
 export const Play_Stroke2_Corner2_Rounded = createSinglePathSVG({
   path: 'M5 5.086C5 2.736 7.578 1.3 9.576 2.534L20.77 9.448c1.899 1.172 1.899 3.932 0 5.104L9.576 21.466C7.578 22.701 5 21.263 5 18.914V5.086Zm3.525-.85A1 1 0 0 0 7 5.085v13.828a1 1 0 0 0 1.525.85l11.194-6.913a1 1 0 0 0 0-1.702L8.525 4.235Z',
 })

src/components/moderation/ContentHider.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
+import {StyleProp, View, ViewStyle} from 'react-native'
 import {ModerationUI} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -40,7 +40,7 @@ export function ContentHider({
 
   if (!blur || (ignoreMute && isJustAMute(modui))) {
     return (
-      <View testID={testID} style={[styles.outer, style]}>
+      <View testID={testID} style={style}>
         {children}
       </View>
     )
@@ -163,21 +163,3 @@ export function ContentHider({
     </View>
   )
 }
-
-const styles = StyleSheet.create({
-  outer: {},
-  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/Hider.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import {ModerationUI} from '@atproto/api'
+
+import {
+  ModerationCauseDescription,
+  useModerationCauseDescription,
+} from '#/lib/moderation/useModerationCauseDescription'
+import {
+  ModerationDetailsDialog,
+  useModerationDetailsDialogControl,
+} from '#/components/moderation/ModerationDetailsDialog'
+
+type Context = {
+  isContentVisible: boolean
+  setIsContentVisible: (show: boolean) => void
+  info: ModerationCauseDescription
+  showInfoDialog: () => void
+  meta: {
+    isNoPwi: boolean
+    allowOverride: boolean
+  }
+}
+
+const Context = React.createContext<Context>({} as Context)
+
+export const useHider = () => React.useContext(Context)
+
+export function Outer({
+  modui,
+  isContentVisibleInitialState,
+  allowOverride,
+  children,
+}: React.PropsWithChildren<{
+  isContentVisibleInitialState?: boolean
+  allowOverride?: boolean
+  modui: ModerationUI | undefined
+}>) {
+  const control = useModerationDetailsDialogControl()
+  const blur = modui?.blurs[0]
+  const [isContentVisible, setIsContentVisible] = React.useState(
+    isContentVisibleInitialState || !blur,
+  )
+  const info = useModerationCauseDescription(blur)
+
+  const meta = {
+    isNoPwi: Boolean(
+      modui?.blurs.find(
+        cause =>
+          cause.type === 'label' &&
+          cause.labelDef.identifier === '!no-unauthenticated',
+      ),
+    ),
+    allowOverride: allowOverride ?? !modui?.noOverride,
+  }
+
+  const showInfoDialog = () => {
+    control.open()
+  }
+
+  const onSetContentVisible = (show: boolean) => {
+    if (!meta.allowOverride) return
+    setIsContentVisible(show)
+  }
+
+  const ctx = {
+    isContentVisible,
+    setIsContentVisible: onSetContentVisible,
+    showInfoDialog,
+    info,
+    meta,
+  }
+
+  return (
+    <Context.Provider value={ctx}>
+      {children}
+      <ModerationDetailsDialog control={control} modcause={blur} />
+    </Context.Provider>
+  )
+}
+
+export function Content({children}: {children: React.ReactNode}) {
+  const ctx = useHider()
+  return ctx.isContentVisible ? children : null
+}
+
+export function Mask({children}: {children: React.ReactNode}) {
+  const ctx = useHider()
+  return ctx.isContentVisible ? null : children
+}

src/components/moderation/LabelsOnMeDialog.tsx

@@ -7,7 +7,6 @@ import {useMutation} from '@tanstack/react-query'
 
 import {useLabelInfo} from '#/lib/moderation/useLabelInfo'
 import {makeProfileLink} from '#/lib/routes/links'
-import {useGate} from '#/lib/statsig/statsig'
 import {sanitizeHandle} from '#/lib/strings/handles'
 import {logger} from '#/logger'
 import {useAgent, useSession} from '#/state/session'
@@ -204,7 +203,6 @@ function AppealForm({
   const [details, setDetails] = React.useState('')
   const isAccountReport = 'did' in subject
   const agent = useAgent()
-  const gate = useGate()
   const sourceName = labeler
     ? sanitizeHandle(labeler.creator.handle, '@')
     : label.src
@@ -214,35 +212,22 @@ function AppealForm({
       const $type = !isAccountReport
         ? 'com.atproto.repo.strongRef'
         : 'com.atproto.admin.defs#repoRef'
-      if (gate('session_withproxy_fix')) {
+      await agent.createModerationReport(
-        await agent.createModerationReport(
+        {
-          {
+          reasonType: ComAtprotoModerationDefs.REASONAPPEAL,
-            reasonType: ComAtprotoModerationDefs.REASONAPPEAL,
+          subject: {
-            subject: {
+            $type,
-              $type,
+            ...subject,
-              ...subject,
-            },
-            reason: details,
           },
-          {
+          reason: details,
-            encoding: 'application/json',
+        },
-            headers: {
+        {
-              'atproto-proxy': `${label.src}#atproto_labeler`,
+          encoding: 'application/json',
-            },
+          headers: {
+            'atproto-proxy': `${label.src}#atproto_labeler`,
           },
-        )
+        },
-      } else {
+      )
-        await agent
-          .withProxy('atproto_labeler', label.src)
-          .createModerationReport({
-            reasonType: ComAtprotoModerationDefs.REASONAPPEAL,
-            subject: {
-              $type,
-              ...subject,
-            },
-            reason: details,
-          })
-      }
     },
     onError: err => {
       logger.error('Failed to submit label appeal', {message: err})

src/components/moderation/ModerationDetailsDialog.tsx

@@ -8,17 +8,19 @@ import {useModerationCauseDescription} from '#/lib/moderation/useModerationCause
 import {makeProfileLink} from '#/lib/routes/links'
 import {listUriToHref} from '#/lib/strings/url-helpers'
 import {isNative} from '#/platform/detection'
+import {useSession} from '#/state/session'
 import {atoms as a, useTheme} from '#/alf'
 import * as Dialog from '#/components/Dialog'
 import {Divider} from '#/components/Divider'
 import {InlineLinkText} from '#/components/Link'
+import {AppModerationCause} from '#/components/Pills'
 import {Text} from '#/components/Typography'
 
 export {useDialogControl as useModerationDetailsDialogControl} from '#/components/Dialog'
 
 export interface ModerationDetailsDialogProps {
   control: Dialog.DialogOuterProps['control']
-  modcause: ModerationCause
+  modcause?: ModerationCause | AppModerationCause
 }
 
 export function ModerationDetailsDialog(props: ModerationDetailsDialogProps) {
@@ -39,6 +41,7 @@ function ModerationDetailsDialogInner({
   const t = useTheme()
   const {_} = useLingui()
   const desc = useModerationCauseDescription(modcause)
+  const {currentAccount} = useSession()
 
   let name
   let description
@@ -105,6 +108,14 @@ function ModerationDetailsDialogInner({
   } else if (modcause.type === 'hidden') {
     name = _(msg`Post Hidden by You`)
     description = _(msg`You have hidden this post.`)
+  } else if (modcause.type === 'reply-hidden') {
+    const isYou = currentAccount?.did === modcause.source.did
+    name = isYou
+      ? _(msg`Reply Hidden by You`)
+      : _(msg`Reply Hidden by Thread Author`)
+    description = isYou
+      ? _(msg`You hid this reply.`)
+      : _(msg`The author of this thread has hidden this reply.`)
   } else if (modcause.type === 'label') {
     name = desc.name
     description = desc.description
@@ -119,12 +130,12 @@ function ModerationDetailsDialogInner({
       <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]}>
+      <Text style={[t.atoms.text, a.text_md, a.leading_snug]}>
         {description}
       </Text>
 
-      {modcause.type === 'label' && (
+      {modcause?.type === 'label' && (
-        <>
+        <View style={[a.pt_lg]}>
           <Divider />
           <Text style={[t.atoms.text, a.text_md, a.leading_snug, a.mt_lg]}>
             {modcause.source.type === 'user' ? (
@@ -143,7 +154,7 @@ function ModerationDetailsDialogInner({
               </Trans>
             )}
           </Text>
-        </>
+        </View>
       )}
 
       {isNative && <View style={{height: 40}} />}

src/components/moderation/PostAlerts.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {StyleProp, ViewStyle} from 'react-native'
-import {ModerationUI} from '@atproto/api'
+import {ModerationCause, ModerationUI} from '@atproto/api'
 
 import {getModerationCauseKey} from '#/lib/moderation'
 import * as Pills from '#/components/Pills'
@@ -9,13 +9,15 @@ export function PostAlerts({
   modui,
   size = 'sm',
   style,
+  additionalCauses,
 }: {
   modui: ModerationUI
   size?: Pills.CommonProps['size']
   includeMute?: boolean
   style?: StyleProp<ViewStyle>
+  additionalCauses?: ModerationCause[] | Pills.AppModerationCause[]
 }) {
-  if (!modui.alert && !modui.inform) {
+  if (!modui.alert && !modui.inform && !additionalCauses?.length) {
     return null
   }
 
@@ -37,6 +39,14 @@ export function PostAlerts({
           noBg={size === 'sm'}
         />
       ))}
+      {additionalCauses?.map(cause => (
+        <Pills.Label
+          key={getModerationCauseKey(cause)}
+          cause={cause}
+          size={size}
+          noBg={size === 'sm'}
+        />
+      ))}
     </Pills.Row>
   )
 }

src/lib/api/feed-manip.ts

@@ -1,4 +1,5 @@
 import {
+  AppBskyActorDefs,
   AppBskyEmbedRecord,
   AppBskyEmbedRecordWithMedia,
   AppBskyFeedDefs,
@@ -6,50 +7,146 @@ import {
 } from '@atproto/api'
 
 import {isPostInLanguage} from '../../locale/helpers'
+import {FALLBACK_MARKER_POST} from './feed/home'
 import {ReasonFeedSource} from './feed/types'
+
 type FeedViewPost = AppBskyFeedDefs.FeedViewPost
 
 export type FeedTunerFn = (
   tuner: FeedTuner,
   slices: FeedViewPostsSlice[],
+  dryRun: boolean,
 ) => FeedViewPostsSlice[]
 
 type FeedSliceItem = {
   post: AppBskyFeedDefs.PostView
-  reply?: AppBskyFeedDefs.ReplyRef
+  record: AppBskyFeedPost.Record
+  parentAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
+  isParentBlocked: boolean
+  isParentNotFound: boolean
 }
 
-function toSliceItem(feedViewPost: FeedViewPost): FeedSliceItem {
+type AuthorContext = {
-  return {
+  author: AppBskyActorDefs.ProfileViewBasic
-    post: feedViewPost.post,
+  parentAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
-    reply: feedViewPost.reply,
+  grandparentAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
-  }
+  rootAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
 }
 
 export class FeedViewPostsSlice {
   _reactKey: string
   _feedPost: FeedViewPost
   items: FeedSliceItem[]
+  isIncompleteThread: boolean
+  isFallbackMarker: boolean
+  isOrphan: boolean
+  rootUri: string
 
   constructor(feedPost: FeedViewPost) {
+    const {post, reply, reason} = feedPost
+    this.items = []
+    this.isIncompleteThread = false
+    this.isFallbackMarker = false
+    this.isOrphan = false
+    if (AppBskyFeedDefs.isPostView(reply?.root)) {
+      this.rootUri = reply.root.uri
+    } else {
+      this.rootUri = post.uri
+    }
     this._feedPost = feedPost
-    this._reactKey = `slice-${feedPost.post.uri}-${
+    this._reactKey = `slice-${post.uri}-${
-      feedPost.reason?.indexedAt || feedPost.post.indexedAt
+      feedPost.reason?.indexedAt || post.indexedAt
     }`
-    this.items = [toSliceItem(feedPost)]
+    if (feedPost.post.uri === FALLBACK_MARKER_POST.post.uri) {
-  }
+      this.isFallbackMarker = true
-
+      return
-  get uri() {
+    }
-    return this._feedPost.post.uri
+    if (
-  }
+      !AppBskyFeedPost.isRecord(post.record) ||
-
+      !AppBskyFeedPost.validateRecord(post.record).success
-  get isThread() {
+    ) {
-    return (
+      return
-      this.items.length > 1 &&
+    }
-      this.items.every(
+    const parent = reply?.parent
-        item => item.post.author.did === this.items[0].post.author.did,
+    const isParentBlocked = AppBskyFeedDefs.isBlockedPost(parent)
-      )
+    const isParentNotFound = AppBskyFeedDefs.isNotFoundPost(parent)
+    let parentAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
+    if (AppBskyFeedDefs.isPostView(parent)) {
+      parentAuthor = parent.author
+    }
+    this.items.push({
+      post,
+      record: post.record,
+      parentAuthor,
+      isParentBlocked,
+      isParentNotFound,
+    })
+    if (!reply || reason) {
+      return
+    }
+    if (
+      !AppBskyFeedDefs.isPostView(parent) ||
+      !AppBskyFeedPost.isRecord(parent.record) ||
+      !AppBskyFeedPost.validateRecord(parent.record).success
+    ) {
+      this.isOrphan = true
+      return
+    }
+    const root = reply.root
+    const rootIsView =
+      AppBskyFeedDefs.isPostView(root) ||
+      AppBskyFeedDefs.isBlockedPost(root) ||
+      AppBskyFeedDefs.isNotFoundPost(root)
+    /*
+     * If the parent is also the root, we just so happen to have the data we
+     * need to compute if the parent's parent (grandparent) is blocked. This
+     * doesn't always happen, of course, but we can take advantage of it when
+     * it does.
+     */
+    const grandparent =
+      rootIsView && parent.record.reply?.parent.uri === root.uri
+        ? root
+        : undefined
+    const grandparentAuthor = reply.grandparentAuthor
+    const isGrandparentBlocked = Boolean(
+      grandparent && AppBskyFeedDefs.isBlockedPost(grandparent),
     )
+    const isGrandparentNotFound = Boolean(
+      grandparent && AppBskyFeedDefs.isNotFoundPost(grandparent),
+    )
+    this.items.unshift({
+      post: parent,
+      record: parent.record,
+      parentAuthor: grandparentAuthor,
+      isParentBlocked: isGrandparentBlocked,
+      isParentNotFound: isGrandparentNotFound,
+    })
+    if (isGrandparentBlocked) {
+      this.isOrphan = true
+      // Keep going, it might still have a root, and we need this for thread
+      // de-deduping
+    }
+    if (
+      !AppBskyFeedDefs.isPostView(root) ||
+      !AppBskyFeedPost.isRecord(root.record) ||
+      !AppBskyFeedPost.validateRecord(root.record).success
+    ) {
+      this.isOrphan = true
+      return
+    }
+    if (root.uri === parent.uri) {
+      return
+    }
+    this.items.unshift({
+      post: root,
+      record: root.record,
+      isParentBlocked: false,
+      isParentNotFound: false,
+      parentAuthor: undefined,
+    })
+    if (parent.record.reply?.parent.uri !== root.uri) {
+      this.isIncompleteThread = true
+    }
   }
 
   get isQuotePost() {
@@ -90,204 +187,171 @@ export class FeedViewPostsSlice {
     return !!this.items.find(item => item.post.uri === uri)
   }
 
-  isNextInThread(uri: string) {
+  getAuthors(): AuthorContext {
-    return this.items[this.items.length - 1].post.uri === uri
-  }
-
-  insert(item: FeedViewPost) {
-    const selfReplyUri = getSelfReplyUri(item)
-    const i = this.items.findIndex(item2 => item2.post.uri === selfReplyUri)
-    if (i !== -1) {
-      this.items.splice(i + 1, 0, item)
-    } else {
-      this.items.push(item)
-    }
-  }
-
-  flattenReplyParent() {
-    if (this.items[0].reply) {
-      const reply = this.items[0].reply
-      if (AppBskyFeedDefs.isPostView(reply.parent)) {
-        this.items.splice(0, 0, {post: reply.parent})
-      }
-    }
-  }
-
-  isFollowingAllAuthors(userDid: string) {
     const feedPost = this._feedPost
-    const authors = [feedPost.post.author]
+    let author: AppBskyActorDefs.ProfileViewBasic = feedPost.post.author
+    let parentAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
+    let grandparentAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
+    let rootAuthor: AppBskyActorDefs.ProfileViewBasic | undefined
     if (feedPost.reply) {
       if (AppBskyFeedDefs.isPostView(feedPost.reply.parent)) {
-        authors.push(feedPost.reply.parent.author)
+        parentAuthor = feedPost.reply.parent.author
       }
       if (feedPost.reply.grandparentAuthor) {
-        authors.push(feedPost.reply.grandparentAuthor)
+        grandparentAuthor = feedPost.reply.grandparentAuthor
       }
       if (AppBskyFeedDefs.isPostView(feedPost.reply.root)) {
-        authors.push(feedPost.reply.root.author)
+        rootAuthor = feedPost.reply.root.author
       }
     }
-    return authors.every(a => a.did === userDid || a.viewer?.following)
+    return {
+      author,
+      parentAuthor,
+      grandparentAuthor,
+      rootAuthor,
+    }
   }
 }
 
 export class FeedTuner {
   seenKeys: Set<string> = new Set()
   seenUris: Set<string> = new Set()
+  seenRootUris: Set<string> = new Set()
 
   constructor(public tunerFns: FeedTunerFn[]) {}
 
-  reset() {
-    this.seenKeys.clear()
-    this.seenUris.clear()
-  }
-
   tune(
     feed: FeedViewPost[],
-    {dryRun, maintainOrder}: {dryRun: boolean; maintainOrder: boolean} = {
+    {dryRun}: {dryRun: boolean} = {
       dryRun: false,
-      maintainOrder: false,
     },
   ): FeedViewPostsSlice[] {
-    let slices: FeedViewPostsSlice[] = []
+    let slices: FeedViewPostsSlice[] = feed
+      .map(item => new FeedViewPostsSlice(item))
+      .filter(s => s.items.length > 0 || s.isFallbackMarker)
 
-    // remove posts that are replies, but which don't have the parent
+    // run the custom tuners
-    // hydrated. this means the parent was either deleted or blocked
+    for (const tunerFn of this.tunerFns) {
-    feed = feed.filter(item => {
+      slices = tunerFn(this, slices.slice(), dryRun)
-      if (
+    }
-        AppBskyFeedPost.isRecord(item.post.record) &&
+
-        item.post.record.reply &&
+    slices = slices.filter(slice => {
-        !item.reply
+      if (this.seenKeys.has(slice._reactKey)) {
-      ) {
         return false
       }
+      // Some feeds, like Following, dedupe by thread, so you only see the most recent reply.
+      // However, we don't want per-thread dedupe for author feeds (where we need to show every post)
+      // or for feedgens (where we want to let the feed serve multiple replies if it chooses to).
+      // To avoid showing the same context (root and/or parent) more than once, we do last resort
+      // per-post deduplication. It hides already seen posts as long as this doesn't break the thread.
+      for (let i = 0; i < slice.items.length; i++) {
+        const item = slice.items[i]
+        if (this.seenUris.has(item.post.uri)) {
+          if (i === 0) {
+            // Omit contiguous seen leading items.
+            // For example, [A -> B -> C], [A -> D -> E], [A -> D -> F]
+            // would turn into [A -> B -> C], [D -> E], [F].
+            slice.items.splice(0, 1)
+            i--
+          }
+          if (i === slice.items.length - 1) {
+            // If the last item in the slice was already seen, omit the whole slice.
+            // This means we'd miss its parents, but the user can "show more" to see them.
+            // For example, [A ... E -> F], [A ... D -> E], [A ... C -> D], [A -> B -> C]
+            // would get collapsed into [A ... E -> F], with B/C/D considered seen.
+            return false
+          }
+        } else {
+          if (!dryRun) {
+            this.seenUris.add(item.post.uri)
+          }
+        }
+      }
+      if (!dryRun) {
+        this.seenKeys.add(slice._reactKey)
+      }
       return true
     })
 
-    if (maintainOrder) {
-      slices = feed.map(item => new FeedViewPostsSlice(item))
-    } else {
-      // arrange the posts into thread slices
-      for (let i = feed.length - 1; i >= 0; i--) {
-        const item = feed[i]
-
-        const selfReplyUri = getSelfReplyUri(item)
-        if (selfReplyUri) {
-          const index = slices.findIndex(slice =>
-            slice.isNextInThread(selfReplyUri),
-          )
-
-          if (index !== -1) {
-            const parent = slices[index]
-
-            parent.insert(item)
-
-            // If our slice isn't currently on the top, reinsert it to the top.
-            if (index !== 0) {
-              slices.splice(index, 1)
-              slices.unshift(parent)
-            }
-
-            continue
-          }
-        }
-
-        slices.unshift(new FeedViewPostsSlice(item))
-      }
-    }
-
-    // run the custom tuners
-    for (const tunerFn of this.tunerFns) {
-      slices = tunerFn(this, slices.slice())
-    }
-
-    // remove any items already "seen"
-    const soonToBeSeenUris: Set<string> = new Set()
-    for (let i = slices.length - 1; i >= 0; i--) {
-      if (!slices[i].isThread && this.seenUris.has(slices[i].uri)) {
-        slices.splice(i, 1)
-      } else {
-        for (const item of slices[i].items) {
-          soonToBeSeenUris.add(item.post.uri)
-        }
-      }
-    }
-
-    // turn non-threads with reply parents into threads
-    for (const slice of slices) {
-      if (!slice.isThread && !slice.reason && slice.items[0].reply) {
-        const reply = slice.items[0].reply
-        if (
-          AppBskyFeedDefs.isPostView(reply.parent) &&
-          !this.seenUris.has(reply.parent.uri) &&
-          !soonToBeSeenUris.has(reply.parent.uri)
-        ) {
-          const uri = reply.parent.uri
-          slice.flattenReplyParent()
-          soonToBeSeenUris.add(uri)
-        }
-      }
-    }
-
-    if (!dryRun) {
-      slices = slices.filter(slice => {
-        if (this.seenKeys.has(slice._reactKey)) {
-          return false
-        }
-        for (const item of slice.items) {
-          this.seenUris.add(item.post.uri)
-        }
-        this.seenKeys.add(slice._reactKey)
-        return true
-      })
-    }
-
     return slices
   }
 
-  static removeReplies(tuner: FeedTuner, slices: FeedViewPostsSlice[]) {
+  static removeReplies(
-    for (let i = slices.length - 1; i >= 0; i--) {
-      if (slices[i].isReply) {
-        slices.splice(i, 1)
-      }
-    }
-    return slices
-  }
-
-  static removeReposts(tuner: FeedTuner, slices: FeedViewPostsSlice[]) {
-    for (let i = slices.length - 1; i >= 0; i--) {
-      if (slices[i].isRepost) {
-        slices.splice(i, 1)
-      }
-    }
-    return slices
-  }
-
-  static removeQuotePosts(tuner: FeedTuner, slices: FeedViewPostsSlice[]) {
-    for (let i = slices.length - 1; i >= 0; i--) {
-      if (slices[i].isQuotePost) {
-        slices.splice(i, 1)
-      }
-    }
-    return slices
-  }
-
-  static dedupReposts(
     tuner: FeedTuner,
     slices: FeedViewPostsSlice[],
-  ): FeedViewPostsSlice[] {
+    _dryRun: boolean,
-    // remove duplicates caused by reposts
+  ) {
     for (let i = 0; i < slices.length; i++) {
-      const item1 = slices[i]
+      const slice = slices[i]
-      for (let j = i + 1; j < slices.length; j++) {
+      if (
-        const item2 = slices[j]
+        slice.isReply &&
-        if (item2.isThread) {
+        !slice.isRepost &&
-          // dont dedup items that are rendering in a thread as this can cause rendering errors
+        // This is not perfect but it's close as we can get to
-          continue
+        // detecting threads without having to peek ahead.
-        }
+        !areSameAuthor(slice.getAuthors())
-        if (item1.containsUri(item2.items[0].post.uri)) {
+      ) {
-          slices.splice(j, 1)
+        slices.splice(i, 1)
-          j--
+        i--
+      }
+    }
+    return slices
+  }
+
+  static removeReposts(
+    tuner: FeedTuner,
+    slices: FeedViewPostsSlice[],
+    _dryRun: boolean,
+  ) {
+    for (let i = 0; i < slices.length; i++) {
+      if (slices[i].isRepost) {
+        slices.splice(i, 1)
+        i--
+      }
+    }
+    return slices
+  }
+
+  static removeQuotePosts(
+    tuner: FeedTuner,
+    slices: FeedViewPostsSlice[],
+    _dryRun: boolean,
+  ) {
+    for (let i = 0; i < slices.length; i++) {
+      if (slices[i].isQuotePost) {
+        slices.splice(i, 1)
+        i--
+      }
+    }
+    return slices
+  }
+
+  static removeOrphans(
+    tuner: FeedTuner,
+    slices: FeedViewPostsSlice[],
+    _dryRun: boolean,
+  ) {
+    for (let i = 0; i < slices.length; i++) {
+      if (slices[i].isOrphan) {
+        slices.splice(i, 1)
+        i--
+      }
+    }
+    return slices
+  }
+
+  static dedupThreads(
+    tuner: FeedTuner,
+    slices: FeedViewPostsSlice[],
+    dryRun: boolean,
+  ): FeedViewPostsSlice[] {
+    for (let i = 0; i < slices.length; i++) {
+      const rootUri = slices[i].rootUri
+      if (!slices[i].isRepost && tuner.seenRootUris.has(rootUri)) {
+        slices.splice(i, 1)
+        i--
+      } else {
+        if (!dryRun) {
+          tuner.seenRootUris.add(rootUri)
         }
       }
     }
@@ -298,15 +362,17 @@ export class FeedTuner {
     return (
       tuner: FeedTuner,
       slices: FeedViewPostsSlice[],
+      _dryRun: boolean,
     ): FeedViewPostsSlice[] => {
-      for (let i = slices.length - 1; i >= 0; i--) {
+      for (let i = 0; i < slices.length; i++) {
         const slice = slices[i]
         if (
           slice.isReply &&
           !slice.isRepost &&
-          !slice.isFollowingAllAuthors(userDid)
+          !shouldDisplayReplyInFollowing(slice.getAuthors(), userDid)
         ) {
           slices.splice(i, 1)
+          i--
         }
       }
       return slices
@@ -324,6 +390,7 @@ export class FeedTuner {
     return (
       tuner: FeedTuner,
       slices: FeedViewPostsSlice[],
+      _dryRun: boolean,
     ): FeedViewPostsSlice[] => {
       const candidateSlices = slices.slice()
 
@@ -332,7 +399,7 @@ export class FeedTuner {
         return slices
       }
 
-      for (let i = slices.length - 1; i >= 0; i--) {
+      for (let i = 0; i < slices.length; i++) {
         let hasPreferredLang = false
         for (const item of slices[i].items) {
           if (isPostInLanguage(item.post, preferredLangsCode2)) {
@@ -358,16 +425,66 @@ export class FeedTuner {
   }
 }
 
-function getSelfReplyUri(item: FeedViewPost): string | undefined {
+function areSameAuthor(authors: AuthorContext): boolean {
-  if (item.reply) {
+  const {author, parentAuthor, grandparentAuthor, rootAuthor} = authors
-    if (
+  const authorDid = author.did
-      AppBskyFeedDefs.isPostView(item.reply.parent) &&
+  if (parentAuthor && parentAuthor.did !== authorDid) {
-      !AppBskyFeedDefs.isReasonRepost(item.reason) // don't thread reposted self-replies
+    return false
-    ) {
-      return item.reply.parent.author.did === item.post.author.did
-        ? item.reply.parent.uri
-        : undefined
-    }
   }
-  return undefined
+  if (grandparentAuthor && grandparentAuthor.did !== authorDid) {
+    return false
+  }
+  if (rootAuthor && rootAuthor.did !== authorDid) {
+    return false
+  }
+  return true
+}
+
+function shouldDisplayReplyInFollowing(
+  authors: AuthorContext,
+  userDid: string,
+): boolean {
+  const {author, parentAuthor, grandparentAuthor, rootAuthor} = authors
+  if (!isSelfOrFollowing(author, userDid)) {
+    // Only show replies from self or people you follow.
+    return false
+  }
+  if (
+    (!parentAuthor || parentAuthor.did === author.did) &&
+    (!rootAuthor || rootAuthor.did === author.did) &&
+    (!grandparentAuthor || grandparentAuthor.did === author.did)
+  ) {
+    // Always show self-threads.
+    return true
+  }
+  // From this point on we need at least one more reason to show it.
+  if (
+    parentAuthor &&
+    parentAuthor.did !== author.did &&
+    isSelfOrFollowing(parentAuthor, userDid)
+  ) {
+    return true
+  }
+  if (
+    grandparentAuthor &&
+    grandparentAuthor.did !== author.did &&
+    isSelfOrFollowing(grandparentAuthor, userDid)
+  ) {
+    return true
+  }
+  if (
+    rootAuthor &&
+    rootAuthor.did !== author.did &&
+    isSelfOrFollowing(rootAuthor, userDid)
+  ) {
+    return true
+  }
+  return false
+}
+
+function isSelfOrFollowing(
+  profile: AppBskyActorDefs.ProfileViewBasic,
+  userDid: string,
+) {
+  return Boolean(profile.did === userDid || profile.viewer?.following)
 }

src/lib/api/feed/merge.ts

@@ -193,12 +193,6 @@ class MergeFeedSource {
     return this.hasMore && this.queue.length === 0
   }
 
-  reset() {
-    this.cursor = undefined
-    this.queue = []
-    this.hasMore = true
-  }
-
   take(n: number): AppBskyFeedDefs.FeedViewPost[] {
     return this.queue.splice(0, n)
   }
@@ -232,11 +226,6 @@ class MergeFeedSource {
 class MergeFeedSource_Following extends MergeFeedSource {
   tuner = new FeedTuner(this.feedTuners)
 
-  reset() {
-    super.reset()
-    this.tuner.reset()
-  }
-
   async fetchNext(n: number) {
     return this._fetchNextInner(n)
   }
@@ -249,7 +238,6 @@ class MergeFeedSource_Following extends MergeFeedSource {
     // run the tuner pre-emptively to ensure better mixing
     const slices = this.tuner.tune(res.data.feed, {
       dryRun: false,
-      maintainOrder: true,
     })
     res.data.feed = slices.map(slice => slice._feedPost)
     return res

src/lib/api/index.ts

@@ -3,7 +3,7 @@ import {
   AppBskyEmbedImages,
   AppBskyEmbedRecord,
   AppBskyEmbedRecordWithMedia,
-  AppBskyFeedThreadgate,
+  AppBskyFeedPostgate,
   BskyAgent,
   ComAtprotoLabelDefs,
   RichText,
@@ -11,7 +11,13 @@ import {
 import {AtUri} from '@atproto/api'
 
 import {logger} from '#/logger'
-import {ThreadgateSetting} from '#/state/queries/threadgate'
+import {writePostgateRecord} from '#/state/queries/postgate'
+import {
+  createThreadgateRecord,
+  ThreadgateAllowUISetting,
+  threadgateAllowUISettingToAllowRecordValue,
+  writeThreadgateRecord,
+} from '#/state/queries/threadgate'
 import {isNetworkError} from 'lib/strings/errors'
 import {shortenLinks, stripInvalidMentions} from 'lib/strings/rich-text-manip'
 import {isNative} from 'platform/detection'
@@ -44,7 +50,8 @@ interface PostOpts {
   extLink?: ExternalEmbedDraft
   images?: ImageModel[]
   labels?: string[]
-  threadgate?: ThreadgateSetting[]
+  threadgate: ThreadgateAllowUISetting[]
+  postgate: AppBskyFeedPostgate.Record
   onStateChange?: (state: string) => void
   langs?: string[]
 }
@@ -232,7 +239,9 @@ export async function post(agent: BskyAgent, opts: PostOpts) {
       labels,
     })
   } catch (e: any) {
-    console.error(`Failed to create post: ${e.toString()}`)
+    logger.error(`Failed to create post`, {
+      safeMessage: e.message,
+    })
     if (isNetworkError(e)) {
       throw new Error(
         'Post failed to upload. Please check your Internet connection and try again.',
@@ -242,16 +251,51 @@ export async function post(agent: BskyAgent, opts: PostOpts) {
     }
   }
 
-  try {
+  if (opts.threadgate.some(tg => tg.type !== 'everybody')) {
-    // TODO: this needs to be batch-created with the post!
+    try {
-    if (opts.threadgate?.length) {
+      // TODO: this needs to be batch-created with the post!
-      await createThreadgate(agent, res.uri, opts.threadgate)
+      await writeThreadgateRecord({
+        agent,
+        postUri: res.uri,
+        threadgate: createThreadgateRecord({
+          post: res.uri,
+          allow: threadgateAllowUISettingToAllowRecordValue(opts.threadgate),
+        }),
+      })
+    } catch (e: any) {
+      logger.error(`Failed to create threadgate`, {
+        context: 'composer',
+        safeMessage: e.message,
+      })
+      throw new Error(
+        'Failed to save post interaction settings. Your post was created but users may be able to interact with it.',
+      )
+    }
+  }
+
+  if (
+    opts.postgate.embeddingRules?.length ||
+    opts.postgate.detachedEmbeddingUris?.length
+  ) {
+    try {
+      // TODO: this needs to be batch-created with the post!
+      await writePostgateRecord({
+        agent,
+        postUri: res.uri,
+        postgate: {
+          ...opts.postgate,
+          post: res.uri,
+        },
+      })
+    } catch (e: any) {
+      logger.error(`Failed to create postgate`, {
+        context: 'composer',
+        safeMessage: e.message,
+      })
+      throw new Error(
+        'Failed to save post interaction settings. Your post was created but users may be able to interact with it.',
+      )
     }
-  } catch (e: any) {
-    console.error(`Failed to create threadgate: ${e.toString()}`)
-    throw new Error(
-      'Post reply-controls failed to be set. Your post was created but anyone can reply to it.',
-    )
   }
 
   return res

src/lib/constants.ts

@@ -12,6 +12,7 @@ export const HELP_DESK_URL = `https://blueskyweb.zendesk.com/hc/${HELP_DESK_LANG
 export const EMBED_SERVICE = 'https://embed.bsky.app'
 export const EMBED_SCRIPT = `${EMBED_SERVICE}/static/embed.js`
 export const BSKY_DOWNLOAD_URL = 'https://bsky.app/download'
+export const STARTER_PACK_MAX_SIZE = 150
 
 // HACK
 // Yes, this is exactly what it looks like. It's a hard-coded constant
@@ -20,7 +21,7 @@ export const BSKY_DOWNLOAD_URL = 'https://bsky.app/download'
 // code and update this number with each release until we can get the
 // server route done.
 // -prf
-export const JOINED_THIS_WEEK = 21797 // as of Jul5 2024
+export const JOINED_THIS_WEEK = 50676 // as of Aug 17, 2024
 
 const BASE_FEEDBACK_FORM_URL = `${HELP_DESK_URL}/requests/new`
 export function FEEDBACK_FORM_URL({

src/lib/hooks/useGoBack.ts

@@ -0,0 +1,23 @@
+import {StackActions, useNavigation} from '@react-navigation/native'
+
+import {NavigationProp} from 'lib/routes/types'
+import {router} from '#/routes'
+
+export function useGoBack(onGoBack?: () => unknown) {
+  const navigation = useNavigation<NavigationProp>()
+  return () => {
+    onGoBack?.()
+    if (navigation.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())
+      }
+    }
+  }
+}

src/lib/hooks/useMinimalShellTransform.ts

@@ -6,16 +6,20 @@ import {useShellLayout} from '#/state/shell/shell-layout'
 // Keep these separated so that we only pay for useAnimatedStyle that gets used.
 
 export function useMinimalShellHeaderTransform() {
-  const mode = useMinimalShellMode()
+  const {headerMode} = useMinimalShellMode()
   const {headerHeight} = useShellLayout()
 
   const headerTransform = useAnimatedStyle(() => {
     return {
-      pointerEvents: mode.value === 0 ? 'auto' : 'none',
+      pointerEvents: headerMode.value === 0 ? 'auto' : 'none',
-      opacity: Math.pow(1 - mode.value, 2),
+      opacity: Math.pow(1 - headerMode.value, 2),
       transform: [
         {
-          translateY: interpolate(mode.value, [0, 1], [0, -headerHeight.value]),
+          translateY: interpolate(
+            headerMode.value,
+            [0, 1],
+            [0, -headerHeight.value],
+          ),
         },
       ],
     }
@@ -25,31 +29,36 @@ export function useMinimalShellHeaderTransform() {
 }
 
 export function useMinimalShellFooterTransform() {
-  const mode = useMinimalShellMode()
+  const {footerMode} = useMinimalShellMode()
   const {footerHeight} = useShellLayout()
 
   const footerTransform = useAnimatedStyle(() => {
     return {
-      pointerEvents: mode.value === 0 ? 'auto' : 'none',
+      pointerEvents: footerMode.value === 0 ? 'auto' : 'none',
-      opacity: Math.pow(1 - mode.value, 2),
+      opacity: Math.pow(1 - footerMode.value, 2),
       transform: [
         {
-          translateY: interpolate(mode.value, [0, 1], [0, footerHeight.value]),
+          translateY: interpolate(
+            footerMode.value,
+            [0, 1],
+            [0, footerHeight.value],
+          ),
         },
       ],
     }
   })
+
   return footerTransform
 }
 
 export function useMinimalShellFabTransform() {
-  const mode = useMinimalShellMode()
+  const {footerMode} = useMinimalShellMode()
 
   const fabTransform = useAnimatedStyle(() => {
     return {
       transform: [
         {
-          translateY: interpolate(mode.value, [0, 1], [-44, 0]),
+          translateY: interpolate(footerMode.value, [0, 1], [-44, 0]),
         },
       ],
     }

src/lib/link-meta/bsky.ts

@@ -107,6 +107,11 @@ export async function extractBskyMeta(
   return meta
 }
 
+export class EmbeddingDisabledError extends Error {
+  constructor() {
+    super('Embedding is disabled for this record')
+  }
+}
 export async function getPostAsQuote(
   getPost: ReturnType<typeof useGetPost>,
   url: string,
@@ -115,6 +120,9 @@ export async function getPostAsQuote(
   const [_0, user, _1, rkey] = url.split('/').filter(Boolean)
   const uri = makeRecordUri(user, 'app.bsky.feed.post', rkey)
   const post = await getPost({uri: uri})
+  if (post.viewer?.embeddingDisabled) {
+    throw new EmbeddingDisabledError()
+  }
   return {
     uri: post.uri,
     cid: post.cid,

src/lib/moderatePost_wrapped.ts

@@ -1,4 +1,5 @@
-import {moderatePost, BSKY_LABELER_DID} from '@atproto/api'
+/* eslint-disable-next-line no-restricted-imports */
+import {BSKY_LABELER_DID, moderatePost} from '@atproto/api'
 
 type ModeratePost = typeof moderatePost
 type Options = Parameters<ModeratePost>[1]

src/lib/moderation.ts

@@ -1,7 +1,6 @@
 import {
   AppBskyLabelerDefs,
   BskyAgent,
-  Did,
   InterpretedLabelValueDefinition,
   LABELS,
   ModerationCause,
@@ -11,8 +10,11 @@ import {
 
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {sanitizeHandle} from '#/lib/strings/handles'
+import {AppModerationCause} from '#/components/Pills'
 
-export function getModerationCauseKey(cause: ModerationCause): string {
+export function getModerationCauseKey(
+  cause: ModerationCause | AppModerationCause,
+): string {
   const source =
     cause.source.type === 'labeler'
       ? cause.source.did
@@ -63,7 +65,7 @@ export function isAppLabeler(
 ): boolean {
   const did = typeof labeler === 'string' ? labeler : labeler.creator.did
   // assertion here that `did` starts with `did:`
-  return did.startsWith('did:') && BskyAgent.appLabelers.includes(did as Did)
+  return did
 }
 
 export function isLabelerSubscribed(

src/lib/moderation/useModerationCauseDescription.ts

@@ -8,11 +8,13 @@ import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
 import {useLabelDefinitions} from '#/state/preferences'
+import {useSession} from '#/state/session'
 import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {EyeSlash_Stroke2_Corner0_Rounded as EyeSlash} from '#/components/icons/EyeSlash'
 import {Warning_Stroke2_Corner0_Rounded as Warning} from '#/components/icons/Warning'
+import {AppModerationCause} from '#/components/Pills'
 import {useGlobalLabelStrings} from './useGlobalLabelStrings'
 import {getDefinition, getLabelStrings} from './useLabelInfo'
 
@@ -27,8 +29,9 @@ export interface ModerationCauseDescription {
 }
 
 export function useModerationCauseDescription(
-  cause: ModerationCause | undefined,
+  cause: ModerationCause | AppModerationCause | undefined,
 ): ModerationCauseDescription {
+  const {currentAccount} = useSession()
   const {_, i18n} = useLingui()
   const {labelDefs, labelers} = useLabelDefinitions()
   const globalLabelStrings = useGlobalLabelStrings()
@@ -111,6 +114,18 @@ export function useModerationCauseDescription(
         description: _(msg`You have hidden this post`),
       }
     }
+    if (cause.type === 'reply-hidden') {
+      const isMe = currentAccount?.did === cause.source.did
+      return {
+        icon: EyeSlash,
+        name: isMe
+          ? _(msg`Reply Hidden by You`)
+          : _(msg`Reply Hidden by Thread Author`),
+        description: isMe
+          ? _(msg`You hid this reply.`)
+          : _(msg`The author of this thread has hidden this reply.`),
+      }
+    }
     if (cause.type === 'label') {
       const def = cause.labelDef || getDefinition(labelDefs, cause.label)
       const strings = getLabelStrings(i18n.locale, globalLabelStrings, def)
@@ -126,7 +141,7 @@ export function useModerationCauseDescription(
         }
       }
       if (def.identifier === 'porn' || def.identifier === 'sexual') {
-        strings.name = 'Adult Content'
+        strings.name = _(msg`Adult Content`)
       }
 
       return {
@@ -150,5 +165,13 @@ export function useModerationCauseDescription(
       name: '',
       description: ``,
     }
-  }, [labelDefs, labelers, globalLabelStrings, cause, _, i18n.locale])
+  }, [
+    labelDefs,
+    labelers,
+    globalLabelStrings,
+    cause,
+    _,
+    i18n.locale,
+    currentAccount?.did,
+  ])
 }

src/lib/notifications/notifications.ts

@@ -5,7 +5,7 @@ import {BskyAgent} from '@atproto/api'
 
 import {logger} from '#/logger'
 import {SessionAccount, useAgent, useSession} from '#/state/session'
-import {logEvent, useGate} from 'lib/statsig/statsig'
+import {logEvent} from 'lib/statsig/statsig'
 import {devicePlatform, isAndroid, isNative} from 'platform/detection'
 import BackgroundNotificationHandler from '../../../modules/expo-background-notification-handler'
 
@@ -86,7 +86,6 @@ export function useNotificationsRegistration() {
 }
 
 export function useRequestNotificationsPermission() {
-  const gate = useGate()
   const {currentAccount} = useSession()
   const agent = useAgent()
 
@@ -102,16 +101,7 @@ export function useRequestNotificationsPermission() {
     ) {
       return
     }
-    if (
+    if (context === 'AfterOnboarding') {
-      context === 'StartOnboarding' &&
-      gate('request_notifications_permission_after_onboarding_v2')
-    ) {
-      return
-    }
-    if (
-      context === 'AfterOnboarding' &&
-      !gate('request_notifications_permission_after_onboarding_v2')
-    ) {
       return
     }
     if (context === 'Home' && !currentAccount) {

src/lib/react-query.tsx

@@ -2,18 +2,83 @@ import React, {useRef, useState} from 'react'
 import {AppState, AppStateStatus} from 'react-native'
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import {createAsyncStoragePersister} from '@tanstack/query-async-storage-persister'
-import {focusManager, QueryClient} from '@tanstack/react-query'
+import {focusManager, onlineManager, QueryClient} from '@tanstack/react-query'
 import {
   PersistQueryClientProvider,
   PersistQueryClientProviderProps,
 } from '@tanstack/react-query-persist-client'
 
 import {isNative} from '#/platform/detection'
+import {listenNetworkConfirmed, listenNetworkLost} from '#/state/events'
 
 // any query keys in this array will be persisted to AsyncStorage
 export const labelersDetailedInfoQueryKeyRoot = 'labelers-detailed-info'
 const STORED_CACHE_QUERY_KEY_ROOTS = [labelersDetailedInfoQueryKeyRoot]
 
+async function checkIsOnline(): Promise<boolean> {
+  try {
+    const controller = new AbortController()
+    setTimeout(() => {
+      controller.abort()
+    }, 15e3)
+    const res = await fetch('https://public.api.bsky.app/xrpc/_health', {
+      cache: 'no-store',
+      signal: controller.signal,
+    })
+    const json = await res.json()
+    if (json.version) {
+      return true
+    } else {
+      return false
+    }
+  } catch (e) {
+    return false
+  }
+}
+
+let receivedNetworkLost = false
+let receivedNetworkConfirmed = false
+let isNetworkStateUnclear = false
+
+listenNetworkLost(() => {
+  receivedNetworkLost = true
+  onlineManager.setOnline(false)
+})
+
+listenNetworkConfirmed(() => {
+  receivedNetworkConfirmed = true
+  onlineManager.setOnline(true)
+})
+
+let checkPromise: Promise<void> | undefined
+function checkIsOnlineIfNeeded() {
+  if (checkPromise) {
+    return
+  }
+  receivedNetworkLost = false
+  receivedNetworkConfirmed = false
+  checkPromise = checkIsOnline().then(nextIsOnline => {
+    checkPromise = undefined
+    if (nextIsOnline && receivedNetworkLost) {
+      isNetworkStateUnclear = true
+    }
+    if (!nextIsOnline && receivedNetworkConfirmed) {
+      isNetworkStateUnclear = true
+    }
+    if (!isNetworkStateUnclear) {
+      onlineManager.setOnline(nextIsOnline)
+    }
+  })
+}
+
+setInterval(() => {
+  if (AppState.currentState === 'active') {
+    if (!onlineManager.isOnline() || isNetworkStateUnclear) {
+      checkIsOnlineIfNeeded()
+    }
+  }
+}, 2000)
+
 focusManager.setEventListener(onFocus => {
   if (isNative) {
     const subscription = AppState.addEventListener(

src/lib/routes/types.ts

@@ -20,6 +20,7 @@ export type CommonNavigatorParams = {
   PostThread: {name: string; rkey: string}
   PostLikedBy: {name: string; rkey: string}
   PostRepostedBy: {name: string; rkey: string}
+  PostQuotes: {name: string; rkey: string}
   ProfileFeed: {name: string; rkey: string}
   ProfileFeedLikedBy: {name: string; rkey: string}
   ProfileLabelerLikedBy: {name: string}

src/lib/statsig/events.ts

@@ -14,6 +14,7 @@ export type LogEvents = {
   }
   'account:loggedOut': {
     logContext: 'SwitchAccount' | 'Settings' | 'SignupQueued' | 'Deactivated'
+    scope: 'current' | 'every'
   }
   'notifications:openApp': {}
   'notifications:request': {
@@ -159,6 +160,7 @@ export type LogEvents = {
       | 'AvatarButton'
       | 'StarterPackProfilesList'
       | 'FeedInterstitial'
+      | 'ProfileHeaderSuggestedFollows'
   }
   'profile:unfollow': {
     logContext:
@@ -173,6 +175,7 @@ export type LogEvents = {
       | 'AvatarButton'
       | 'StarterPackProfilesList'
       | 'FeedInterstitial'
+      | 'ProfileHeaderSuggestedFollows'
   }
   'chat:create': {
     logContext: 'ProfileHeader' | 'NewChatDialog' | 'SendViaChatDialog'
@@ -211,6 +214,14 @@ export type LogEvents = {
   'feed:interstitial:profileCard:press': {}
   'feed:interstitial:feedCard:press': {}
 
+  'profile:header:suggestedFollowsCard:press': {}
+
+  'debug:followingPrefs': {
+    followingShowRepliesFromPref: 'all' | 'following' | 'off'
+    followingRepliesMinLikePref: number
+  }
+  'debug:followingDisplayed': {}
+
   'test:all:always': {}
   'test:all:sometimes': {}
   'test:all:boosted_by_gate1': {reason: 'base' | 'gate1'}

src/lib/statsig/gates.ts

@@ -1,18 +1,11 @@
 export type Gate =
   // Keep this alphabetic please.
   | 'debug_show_feedcontext'
-  | 'explore_page_profile_card_social_proof'
+  | 'fixed_bottom_bar'
-  | 'native_pwi_disabled'
   | 'new_user_guided_tour'
-  | 'new_user_progress_guide'
   | 'onboarding_minimum_interests'
-  | 'request_notifications_permission_after_onboarding_v2'
-  | 'session_withproxy_fix'
-  | 'show_avi_follow_button'
   | 'show_follow_back_label_v2'
   | 'suggested_feeds_interstitial'
-  | 'suggested_follows_interstitial'
+  | 'video_debug'
-  | 'ungroup_follow_backs'
   | 'use_oauth'
   | 'videos'
-  | 'small_avi_thumb'