Merge branch 'bluesky-social:main' into zh

2024-06-19 14:41:03 +08:00 · 2024-06-19 14:41:03 +08:00 · bdc1ea897f
parent a6d49062e6 8788708bd2
commit bdc1ea897f
49 changed files with 936 additions and 542 deletions
--- a/package.json
+++ b/package.json
@ -49,7 +49,7 @@
    "open-analyzer": "EXPO_PUBLIC_OPEN_ANALYZER=1 yarn build-web"
  },
  "dependencies": {
-    "@atproto/api": "^0.12.18",
+    "@atproto/api": "^0.12.20",
    "@bam.tech/react-native-image-resizer": "^3.0.4",
    "@braintree/sanitize-url": "^6.0.2",
    "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",
--- a/src/App.native.tsx
+++ b/src/App.native.tsx
@ -14,40 +14,40 @@ import * as SplashScreen from 'expo-splash-screen'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useIntentHandler} from '#/lib/hooks/useIntentHandler'
+import {QueryProvider} from '#/lib/react-query'
 import {
  initialize,
  Provider as StatsigProvider,
  tryFetchGates,
 } from '#/lib/statsig/statsig'
+import {s} from '#/lib/styles'
+import {ThemeProvider} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
+import {Provider as MutedThreadsProvider} from '#/state/cache/thread-mutes'
+import {Provider as DialogStateProvider} from '#/state/dialogs'
+import {Provider as InvitesStateProvider} from '#/state/invites'
+import {Provider as LightboxStateProvider} from '#/state/lightbox'
 import {MessagesProvider} from '#/state/messages'
+import {Provider as ModalStateProvider} from '#/state/modals'
 import {init as initPersistedState} from '#/state/persisted'
+import {Provider as PrefsStateProvider} from '#/state/preferences'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation-opts'
-import {readLastActiveAccount} from '#/state/session/util'
-import {useIntentHandler} from 'lib/hooks/useIntentHandler'
-import {QueryProvider} from 'lib/react-query'
-import {s} from 'lib/styles'
-import {ThemeProvider} from 'lib/ThemeContext'
-import {Provider as DialogStateProvider} from 'state/dialogs'
-import {Provider as InvitesStateProvider} from 'state/invites'
-import {Provider as LightboxStateProvider} from 'state/lightbox'
-import {Provider as ModalStateProvider} from 'state/modals'
-import {Provider as MutedThreadsProvider} from 'state/muted-threads'
-import {Provider as PrefsStateProvider} from 'state/preferences'
-import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
+import {Provider as UnreadNotifsProvider} from '#/state/queries/notifications/unread'
 import {
  Provider as SessionProvider,
  SessionAccount,
  useSession,
  useSessionApi,
-} from 'state/session'
-import {Provider as ShellStateProvider} from 'state/shell'
-import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
-import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
-import {TestCtrls} from 'view/com/testing/TestCtrls'
-import * as Toast from 'view/com/util/Toast'
-import {Shell} from 'view/shell'
+} from '#/state/session'
+import {readLastActiveAccount} from '#/state/session/util'
+import {Provider as ShellStateProvider} from '#/state/shell'
+import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
+import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
+import {TestCtrls} from '#/view/com/testing/TestCtrls'
+import * as Toast from '#/view/com/util/Toast'
+import {Shell} from '#/view/shell'
 import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {Provider as PortalProvider} from '#/components/Portal'
@ -112,10 +112,12 @@ function InnerApp() {
                            <SelectedFeedProvider>
                              <UnreadNotifsProvider>
                                <BackgroundNotificationPreferencesProvider>
+                                  <MutedThreadsProvider>
                                    <GestureHandlerRootView style={s.h100pct}>
                                      <TestCtrls />
                                      <Shell />
                                    </GestureHandlerRootView>
+                                  </MutedThreadsProvider>
                                </BackgroundNotificationPreferencesProvider>
                              </UnreadNotifsProvider>
                            </SelectedFeedProvider>
@ -154,7 +156,6 @@ function App() {
      <SessionProvider>
        <ShellStateProvider>
          <PrefsStateProvider>
-            <MutedThreadsProvider>
            <InvitesStateProvider>
              <ModalStateProvider>
                <DialogStateProvider>
@ -168,7 +169,6 @@ function App() {
                </DialogStateProvider>
              </ModalStateProvider>
            </InvitesStateProvider>
-            </MutedThreadsProvider>
          </PrefsStateProvider>
        </ShellStateProvider>
      </SessionProvider>
--- a/src/App.web.tsx
+++ b/src/App.web.tsx
@ -8,35 +8,35 @@ import {SafeAreaProvider} from 'react-native-safe-area-context'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'

+import {useIntentHandler} from '#/lib/hooks/useIntentHandler'
+import {QueryProvider} from '#/lib/react-query'
 import {Provider as StatsigProvider} from '#/lib/statsig/statsig'
+import {ThemeProvider} from '#/lib/ThemeContext'
 import {logger} from '#/logger'
+import {Provider as MutedThreadsProvider} from '#/state/cache/thread-mutes'
+import {Provider as DialogStateProvider} from '#/state/dialogs'
+import {Provider as InvitesStateProvider} from '#/state/invites'
+import {Provider as LightboxStateProvider} from '#/state/lightbox'
 import {MessagesProvider} from '#/state/messages'
+import {Provider as ModalStateProvider} from '#/state/modals'
 import {init as initPersistedState} from '#/state/persisted'
+import {Provider as PrefsStateProvider} from '#/state/preferences'
 import {Provider as LabelDefsProvider} from '#/state/preferences/label-defs'
 import {Provider as ModerationOptsProvider} from '#/state/preferences/moderation-opts'
-import {readLastActiveAccount} from '#/state/session/util'
-import {useIntentHandler} from 'lib/hooks/useIntentHandler'
-import {QueryProvider} from 'lib/react-query'
-import {ThemeProvider} from 'lib/ThemeContext'
-import {Provider as DialogStateProvider} from 'state/dialogs'
-import {Provider as InvitesStateProvider} from 'state/invites'
-import {Provider as LightboxStateProvider} from 'state/lightbox'
-import {Provider as ModalStateProvider} from 'state/modals'
-import {Provider as MutedThreadsProvider} from 'state/muted-threads'
-import {Provider as PrefsStateProvider} from 'state/preferences'
-import {Provider as UnreadNotifsProvider} from 'state/queries/notifications/unread'
+import {Provider as UnreadNotifsProvider} from '#/state/queries/notifications/unread'
 import {
  Provider as SessionProvider,
  SessionAccount,
  useSession,
  useSessionApi,
-} from 'state/session'
-import {Provider as ShellStateProvider} from 'state/shell'
-import {Provider as LoggedOutViewProvider} from 'state/shell/logged-out'
-import {Provider as SelectedFeedProvider} from 'state/shell/selected-feed'
-import * as Toast from 'view/com/util/Toast'
-import {ToastContainer} from 'view/com/util/Toast.web'
-import {Shell} from 'view/shell/index'
+} from '#/state/session'
+import {readLastActiveAccount} from '#/state/session/util'
+import {Provider as ShellStateProvider} from '#/state/shell'
+import {Provider as LoggedOutViewProvider} from '#/state/shell/logged-out'
+import {Provider as SelectedFeedProvider} from '#/state/shell/selected-feed'
+import * as Toast from '#/view/com/util/Toast'
+import {ToastContainer} from '#/view/com/util/Toast.web'
+import {Shell} from '#/view/shell/index'
 import {ThemeProvider as Alf} from '#/alf'
 import {useColorModeTheme} from '#/alf/util/useColorModeTheme'
 import {Provider as PortalProvider} from '#/components/Portal'
@ -96,9 +96,11 @@ function InnerApp() {
                          <SelectedFeedProvider>
                            <UnreadNotifsProvider>
                              <BackgroundNotificationPreferencesProvider>
+                                <MutedThreadsProvider>
                                  <SafeAreaProvider>
                                    <Shell />
                                  </SafeAreaProvider>
+                                </MutedThreadsProvider>
                              </BackgroundNotificationPreferencesProvider>
                            </UnreadNotifsProvider>
                          </SelectedFeedProvider>
@ -136,7 +138,6 @@ function App() {
    <SessionProvider>
      <ShellStateProvider>
        <PrefsStateProvider>
-          <MutedThreadsProvider>
          <InvitesStateProvider>
            <ModalStateProvider>
              <DialogStateProvider>
@ -150,7 +151,6 @@ function App() {
              </DialogStateProvider>
            </ModalStateProvider>
          </InvitesStateProvider>
-          </MutedThreadsProvider>
        </PrefsStateProvider>
      </ShellStateProvider>
    </SessionProvider>
--- a/src/Navigation.tsx
+++ b/src/Navigation.tsx
@ -54,8 +54,8 @@ import {useModalControls} from './state/modals'
 import {useUnreadNotifications} from './state/queries/notifications/unread'
 import {useSession} from './state/session'
 import {
-  setEmailConfirmationRequested,
  shouldRequestEmailConfirmation,
+  snoozeEmailConfirmationPrompt,
 } from './state/shell/reminders'
 import {AccessibilitySettingsScreen} from './view/screens/AccessibilitySettings'
 import {CommunityGuidelinesScreen} from './view/screens/CommunityGuidelines'
@ -585,7 +585,7 @@ function RoutesContainer({children}: React.PropsWithChildren<{}>) {

    if (currentAccount && shouldRequestEmailConfirmation(currentAccount)) {
      openModal({name: 'verify-email', showReminder: true})
-      setEmailConfirmationRequested()
+      snoozeEmailConfirmationPrompt()
    }
  }

--- a/src/components/KnownFollowers.tsx
+++ b/src/components/KnownFollowers.tsx
@ -100,7 +100,15 @@ function KnownFollowersInner({
      moderation,
    }
  })
-  const count = cachedKnownFollowers.count
+
+  // Does not have blocks applied. Always >= slices.length
+  const serverCount = cachedKnownFollowers.count
+
+  /*
+   * We check above too, but here for clarity and a reminder to _check for
+   * valid indices_
+   */
+  if (slice.length === 0) return null

  return (
    <Link
@ -164,7 +172,9 @@ function KnownFollowersInner({
              },
            ]}
            numberOfLines={2}>
-            {count > 2 ? (
+            {slice.length >= 2 ? (
+              // 2-n followers, including blocks
+              serverCount > 2 ? (
                <Trans>
                  Followed by{' '}
                  <Text key={slice[0].profile.did} style={textStyle}>
@ -175,9 +185,14 @@ function KnownFollowersInner({
                    {slice[1].profile.displayName}
                  </Text>
                  , and{' '}
-                <Plural value={count - 2} one="# other" other="# others" />
+                  <Plural
+                    value={serverCount - 2}
+                    one="# other"
+                    other="# others"
+                  />
                </Trans>
-            ) : count === 2 ? (
+              ) : (
+                // only 2
                <Trans>
                  Followed by{' '}
                  <Text key={slice[0].profile.did} style={textStyle}>
@ -188,7 +203,23 @@ function KnownFollowersInner({
                    {slice[1].profile.displayName}
                  </Text>
                </Trans>
+              )
+            ) : serverCount > 1 ? (
+              // 1-n followers, including blocks
+              <Trans>
+                Followed by{' '}
+                <Text key={slice[0].profile.did} style={textStyle}>
+                  {slice[0].profile.displayName}
+                </Text>{' '}
+                and{' '}
+                <Plural
+                  value={serverCount - 1}
+                  one="# other"
+                  other="# others"
+                />
+              </Trans>
            ) : (
+              // only 1
              <Trans>
                Followed by{' '}
                <Text key={slice[0].profile.did} style={textStyle}>
--- a/src/components/NewskieDialog.tsx
+++ b/src/components/NewskieDialog.tsx
@ -18,8 +18,10 @@ import {Text} from '#/components/Typography'

 export function NewskieDialog({
  profile,
+  disabled,
 }: {
  profile: AppBskyActorDefs.ProfileViewDetailed
+  disabled?: boolean
 }) {
  const {_} = useLingui()
  const moderationOpts = useModerationOpts()
@ -30,18 +32,20 @@ export function NewskieDialog({
    const moderation = moderateProfile(profile, moderationOpts)
    return sanitizeDisplayName(name, moderation.ui('displayName'))
  }, [moderationOpts, profile])
+  const [now] = React.useState(() => Date.now())
  const timeAgo = useGetTimeAgo()
  const createdAt = profile.createdAt as string | undefined
  const daysOld = React.useMemo(() => {
    if (!createdAt) return Infinity
-    return differenceInSeconds(new Date(), new Date(createdAt)) / 86400
-  }, [createdAt])
+    return differenceInSeconds(now, new Date(createdAt)) / 86400
+  }, [createdAt, now])

  if (!createdAt || daysOld > 7) return null

  return (
    <View style={[a.pr_2xs]}>
      <Button
+        disabled={disabled}
        label={_(
          msg`This user is new here. Press for more info about when they joined.`,
        )}
@ -70,7 +74,7 @@ export function NewskieDialog({
            <Text style={[a.text_md]}>
              <Trans>
                {profileName} joined Bluesky{' '}
-                {timeAgo(createdAt, {format: 'long'})} ago
+                {timeAgo(createdAt, now, {format: 'long'})} ago
              </Trans>
            </Text>
          </View>
--- a/src/components/ProfileHoverCard/index.web.tsx
+++ b/src/components/ProfileHoverCard/index.web.tsx
@ -469,7 +469,7 @@ function Inner({
            )}
          </Text>

-          <ProfileHeaderHandle profile={profileShadow} />
+          <ProfileHeaderHandle profile={profileShadow} disableTaps />
        </View>
      </Link>

--- a/src/components/moderation/PostAlerts.tsx
+++ b/src/components/moderation/PostAlerts.tsx
@ -92,6 +92,8 @@ function PostLabel({
              <UserAvatar
                avatar={desc.sourceAvi}
                size={size === 'large' ? 16 : 12}
+                type="labeler"
+                shape="circle"
              />
            ) : (
              <desc.icon size="sm" fill={t.atoms.text_contrast_medium.color} />
--- a/src/components/moderation/PostHider.tsx
+++ b/src/components/moderation/PostHider.tsx
@ -1,6 +1,6 @@
 import React, {ComponentProps} from 'react'
 import {Pressable, StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
-import {AppBskyActorDefs, ModerationUI} from '@atproto/api'
+import {AppBskyActorDefs, ModerationCause, ModerationUI} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
@ -45,7 +45,8 @@ export function PostHider({
  const [override, setOverride] = React.useState(false)
  const control = useModerationDetailsDialogControl()
  const blur =
-    modui.blurs[0] || (interpretFilterAsBlur ? modui.filters[0] : undefined)
+    modui.blurs[0] ||
+    (interpretFilterAsBlur ? getBlurrableFilter(modui) : undefined)
  const desc = useModerationCauseDescription(blur)

  const onBeforePress = React.useCallback(() => {
@ -134,6 +135,13 @@ export function PostHider({
  )
 }

+function getBlurrableFilter(modui: ModerationUI): ModerationCause | undefined {
+  // moderation causes get "downgraded" when they originate from embedded content
+  // a downgraded cause should *only* drive filtering in feeds, so we want to look
+  // for filters that arent downgraded
+  return modui.filters.find(filter => !filter.downgraded)
+}
+
 const styles = StyleSheet.create({
  child: {
    borderWidth: 0,
--- a/src/lib/analytics/types.ts
+++ b/src/lib/analytics/types.ts
@ -32,6 +32,8 @@ export type TrackPropertiesMap = {
  'Post:ThreadMute': {} // CAN BE SERVER
  'Post:ThreadUnmute': {} // CAN BE SERVER
  'Post:Reply': {} // CAN BE SERVER
+  'Post:EditThreadgateOpened': {}
+  'Post:ThreadgateEdited': {}
  // PROFILE events
  'Profile:Follow': {
    username: string
--- a/src/lib/api/index.ts
+++ b/src/lib/api/index.ts
@ -270,7 +270,7 @@ export async function post(agent: BskyAgent, opts: PostOpts) {
  return res
 }

-async function createThreadgate(
+export async function createThreadgate(
  agent: BskyAgent,
  postUri: string,
  threadgate: ThreadgateSetting[],
@ -296,10 +296,17 @@ async function createThreadgate(
  }

  const postUrip = new AtUri(postUri)
-  await agent.api.app.bsky.feed.threadgate.create(
-    {repo: agent.session!.did, rkey: postUrip.rkey},
-    {post: postUri, createdAt: new Date().toISOString(), allow},
-  )
+  await agent.api.com.atproto.repo.putRecord({
+    repo: agent.session!.did,
+    collection: 'app.bsky.feed.threadgate',
+    rkey: postUrip.rkey,
+    record: {
+      $type: 'app.bsky.feed.threadgate',
+      post: postUri,
+      allow,
+      createdAt: new Date().toISOString(),
+    },
+  })
 }

 // helpers
--- a/src/lib/hooks/useTimeAgo.ts
+++ b/src/lib/hooks/useTimeAgo.ts
@ -1,4 +1,4 @@
-import {useCallback, useMemo} from 'react'
+import {useCallback} from 'react'
 import {msg, plural} from '@lingui/macro'
 import {I18nContext, useLingui} from '@lingui/react'
 import {differenceInSeconds} from 'date-fns'
@ -12,25 +12,16 @@ export function useGetTimeAgo() {
  const {_} = useLingui()
  return useCallback(
    (
-      date: number | string | Date,
+      earlier: number | string | Date,
+      later: number | string | Date,
      options?: Omit<TimeAgoOptions, 'lingui'>,
    ) => {
-      return dateDiff(date, Date.now(), {lingui: _, format: options?.format})
+      return dateDiff(earlier, later, {lingui: _, format: options?.format})
    },
    [_],
  )
 }

-export function useTimeAgo(
-  date: number | string | Date,
-  options?: Omit<TimeAgoOptions, 'lingui'>,
-): string {
-  const timeAgo = useGetTimeAgo()
-  return useMemo(() => {
-    return timeAgo(date, {...options})
-  }, [date, options, timeAgo])
-}
-
 const NOW = 5
 const MINUTE = 60
 const HOUR = MINUTE * 60
--- a/src/lib/statsig/events.ts
+++ b/src/lib/statsig/events.ts
@ -103,6 +103,8 @@ export type LogEvents = {
  'post:unrepost': {
    logContext: 'FeedItem' | 'PostThreadItem' | 'Post'
  }
+  'post:mute': {}
+  'post:unmute': {}
  'profile:follow': {
    didBecomeMutual: boolean | undefined
    followeeClout: number | undefined
--- a/src/lib/strings/embed-player.ts
+++ b/src/lib/strings/embed-player.ts
@ -1,7 +1,8 @@
-import {Dimensions, Platform} from 'react-native'
+import {Dimensions} from 'react-native'

 import {isSafari} from 'lib/browser'
 import {isWeb} from 'platform/detection'
+
 const {height: SCREEN_HEIGHT} = Dimensions.get('window')

 const IFRAME_HOST = isWeb
@ -342,42 +343,19 @@ export function parseEmbedPlayerFromUrl(
    }
  }

-  if (urlp.hostname === 'media.tenor.com') {
-    let [_, id, filename] = urlp.pathname.split('/')
-
-    const h = urlp.searchParams.get('hh')
-    const w = urlp.searchParams.get('ww')
-    let dimensions
-    if (h && w) {
-      dimensions = {
-        height: Number(h),
-        width: Number(w),
-      }
-    }
-
-    if (id && filename && dimensions && id.includes('AAAAC')) {
-      if (Platform.OS === 'web') {
-        if (isSafari) {
-          id = id.replace('AAAAC', 'AAAP1')
-          filename = filename.replace('.gif', '.mp4')
-        } else {
-          id = id.replace('AAAAC', 'AAAP3')
-          filename = filename.replace('.gif', '.webm')
-        }
-      } else {
-        id = id.replace('AAAAC', 'AAAAM')
-      }
+  const tenorGif = parseTenorGif(urlp)
+  if (tenorGif.success) {
+    const {playerUri, dimensions} = tenorGif

    return {
      type: 'tenor_gif',
      source: 'tenor',
      isGif: true,
      hideDetails: true,
-        playerUri: `https://t.gifs.bsky.app/${id}/${filename}`,
+      playerUri,
      dimensions,
    }
  }
-  }

  // this is a standard flickr path! we can use the embedder for albums and groups, so validate the path
  if (urlp.hostname === 'www.flickr.com' || urlp.hostname === 'flickr.com') {
@ -516,3 +494,55 @@ export function getGiphyMetaUri(url: URL) {
    }
  }
 }
+
+export function parseTenorGif(urlp: URL):
+  | {success: false}
+  | {
+      success: true
+      playerUri: string
+      dimensions: {height: number; width: number}
+    } {
+  if (urlp.hostname !== 'media.tenor.com') {
+    return {success: false}
+  }
+
+  let [_, id, filename] = urlp.pathname.split('/')
+
+  if (!id || !filename) {
+    return {success: false}
+  }
+
+  if (!id.includes('AAAAC')) {
+    return {success: false}
+  }
+
+  const h = urlp.searchParams.get('hh')
+  const w = urlp.searchParams.get('ww')
+
+  if (!h || !w) {
+    return {success: false}
+  }
+
+  const dimensions = {
+    height: Number(h),
+    width: Number(w),
+  }
+
+  if (isWeb) {
+    if (isSafari) {
+      id = id.replace('AAAAC', 'AAAP1')
+      filename = filename.replace('.gif', '.mp4')
+    } else {
+      id = id.replace('AAAAC', 'AAAP3')
+      filename = filename.replace('.gif', '.webm')
+    }
+  } else {
+    id = id.replace('AAAAC', 'AAAAM')
+  }
+
+  return {
+    success: true,
+    playerUri: `https://t.gifs.bsky.app/${id}/${filename}`,
+    dimensions,
+  }
+}
--- a/src/lib/strings/time.ts
+++ b/src/lib/strings/time.ts
@ -19,3 +19,14 @@ export function getAge(birthDate: Date): number {
  }
  return age
 }
+
+/**
+ * Compares two dates by year, month, and day only
+ */
+export function simpleAreDatesEqual(a: Date, b: Date): boolean {
+  return (
+    a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+  )
+}
--- a/src/screens/Profile/Header/Handle.tsx
+++ b/src/screens/Profile/Header/Handle.tsx
@ -12,8 +12,10 @@ import {Text} from '#/components/Typography'

 export function ProfileHeaderHandle({
  profile,
+  disableTaps,
 }: {
  profile: Shadow<AppBskyActorDefs.ProfileViewDetailed>
+  disableTaps?: boolean
 }) {
  const t = useTheme()
  const invalidHandle = isInvalidHandle(profile.handle)
@ -21,8 +23,8 @@ export function ProfileHeaderHandle({
  return (
    <View
      style={[a.flex_row, a.gap_xs, a.align_center]}
-      pointerEvents={isAndroid ? 'box-only' : 'auto'}>
-      <NewskieDialog profile={profile} />
+      pointerEvents={disableTaps ? 'none' : isAndroid ? 'box-only' : 'auto'}>
+      <NewskieDialog profile={profile} disabled={disableTaps} />
      {profile.viewer?.followedBy && !blockHide ? (
        <View style={[t.atoms.bg_contrast_25, a.rounded_xs, a.px_sm, a.py_xs]}>
          <Text style={[t.atoms.text, a.text_sm]}>
--- a/src/screens/Profile/Header/ProfileHeaderLabeler.tsx
+++ b/src/screens/Profile/Header/ProfileHeaderLabeler.tsx
@ -82,7 +82,7 @@ let ProfileHeaderLabeler = ({
    preferences?.moderationPrefs.labelers.find(l => l.did === profile.did)
  const canSubscribe =
    isSubscribed ||
-    (preferences ? preferences?.moderationPrefs.labelers.length < 9 : false)
+    (preferences ? preferences?.moderationPrefs.labelers.length <= 20 : false)
  const {mutateAsync: likeMod, isPending: isLikePending} = useLikeMutation()
  const {mutateAsync: unlikeMod, isPending: isUnlikePending} =
    useUnlikeMutation()
@ -328,8 +328,8 @@ function CantSubscribePrompt({
      <Prompt.TitleText>Unable to subscribe</Prompt.TitleText>
      <Prompt.DescriptionText>
        <Trans>
-          We're sorry! You can only subscribe to ten labelers, and you've
-          reached your limit of ten.
+          We're sorry! You can only subscribe to twenty labelers, and you've
+          reached your limit of twenty.
        </Trans>
      </Prompt.DescriptionText>
      <Prompt.Actions>
--- a/src/screens/Signup/state.ts
+++ b/src/screens/Signup/state.ts
@ -252,7 +252,6 @@ export function useSubmitSignup({
      dispatch({type: 'setIsLoading', value: true})

      try {
-        onboardingDispatch({type: 'start'}) // start now to avoid flashing the wrong view
        await createAccount({
          service: state.serviceUrl,
          email: state.email,
@ -262,8 +261,12 @@ export function useSubmitSignup({
          inviteCode: state.inviteCode.trim(),
          verificationCode: verificationCode,
        })
+        /*
+         * Must happen last so that if the user has multiple tabs open and
+         * createAccount fails, one tab is not stuck in onboarding — Eric
+         */
+        onboardingDispatch({type: 'start'})
      } catch (e: any) {
-        onboardingDispatch({type: 'skip'}) // undo starting the onboard
        let errMsg = e.toString()
        if (e instanceof ComAtprotoServerCreateAccount.InvalidInviteCodeError) {
          dispatch({
--- a/src/state/cache/thread-mutes.tsx
+++ b/src/state/cache/thread-mutes.tsx
@ -0,0 +1,97 @@
+import React, {useEffect} from 'react'
+
+import * as persisted from '#/state/persisted'
+import {useAgent, useSession} from '../session'
+
+type StateContext = Map<string, boolean>
+type SetStateContext = (uri: string, value: boolean) => void
+
+const stateContext = React.createContext<StateContext>(new Map())
+const setStateContext = React.createContext<SetStateContext>(
+  (_: string) => false,
+)
+
+export function Provider({children}: React.PropsWithChildren<{}>) {
+  const [state, setState] = React.useState<StateContext>(() => new Map())
+
+  const setThreadMute = React.useCallback(
+    (uri: string, value: boolean) => {
+      setState(prev => {
+        const next = new Map(prev)
+        next.set(uri, value)
+        return next
+      })
+    },
+    [setState],
+  )
+
+  useMigrateMutes(setThreadMute)
+
+  return (
+    <stateContext.Provider value={state}>
+      <setStateContext.Provider value={setThreadMute}>
+        {children}
+      </setStateContext.Provider>
+    </stateContext.Provider>
+  )
+}
+
+export function useMutedThreads() {
+  return React.useContext(stateContext)
+}
+
+export function useIsThreadMuted(uri: string, defaultValue = false) {
+  const state = React.useContext(stateContext)
+  return state.get(uri) ?? defaultValue
+}
+
+export function useSetThreadMute() {
+  return React.useContext(setStateContext)
+}
+
+function useMigrateMutes(setThreadMute: SetStateContext) {
+  const agent = useAgent()
+  const {currentAccount} = useSession()
+
+  useEffect(() => {
+    if (currentAccount) {
+      if (
+        !persisted
+          .get('mutedThreads')
+          .some(uri => uri.includes(currentAccount.did))
+      ) {
+        return
+      }
+
+      let cancelled = false
+
+      const migrate = async () => {
+        while (!cancelled) {
+          const threads = persisted.get('mutedThreads')
+
+          const root = threads.findLast(uri => uri.includes(currentAccount.did))
+
+          if (!root) break
+
+          persisted.write(
+            'mutedThreads',
+            threads.filter(uri => uri !== root),
+          )
+
+          setThreadMute(root, true)
+
+          await agent.api.app.bsky.graph
+            .muteThread({root})
+            // not a big deal if this fails, since the post might have been deleted
+            .catch(console.error)
+        }
+      }
+
+      migrate()
+
+      return () => {
+        cancelled = true
+      }
+    }
+  }, [agent, currentAccount, setThreadMute])
+}
--- a/src/state/modals/index.tsx
+++ b/src/state/modals/index.tsx
@ -70,7 +70,8 @@ export interface SelfLabelModal {
 export interface ThreadgateModal {
  name: 'threadgate'
  settings: ThreadgateSetting[]
-  onChange: (settings: ThreadgateSetting[]) => void
+  onChange?: (settings: ThreadgateSetting[]) => void
+  onConfirm?: (settings: ThreadgateSetting[]) => void
 }

 export interface ChangeHandleModal {
--- a/src/state/muted-threads.tsx
+++ b/src/state/muted-threads.tsx
@ -1,62 +0,0 @@
-import React from 'react'
-import * as persisted from '#/state/persisted'
-import {track} from '#/lib/analytics/analytics'
-
-type StateContext = persisted.Schema['mutedThreads']
-type ToggleContext = (uri: string) => boolean
-
-const stateContext = React.createContext<StateContext>(
-  persisted.defaults.mutedThreads,
-)
-const toggleContext = React.createContext<ToggleContext>((_: string) => false)
-
-export function Provider({children}: React.PropsWithChildren<{}>) {
-  const [state, setState] = React.useState(persisted.get('mutedThreads'))
-
-  const toggleThreadMute = React.useCallback(
-    (uri: string) => {
-      let muted = false
-      setState((arr: string[]) => {
-        if (arr.includes(uri)) {
-          arr = arr.filter(v => v !== uri)
-          muted = false
-          track('Post:ThreadUnmute')
-        } else {
-          arr = arr.concat([uri])
-          muted = true
-          track('Post:ThreadMute')
-        }
-        persisted.write('mutedThreads', arr)
-        return arr
-      })
-      return muted
-    },
-    [setState],
-  )
-
-  React.useEffect(() => {
-    return persisted.onUpdate(() => {
-      setState(persisted.get('mutedThreads'))
-    })
-  }, [setState])
-
-  return (
-    <stateContext.Provider value={state}>
-      <toggleContext.Provider value={toggleThreadMute}>
-        {children}
-      </toggleContext.Provider>
-    </stateContext.Provider>
-  )
-}
-
-export function useMutedThreads() {
-  return React.useContext(stateContext)
-}
-
-export function useToggleThreadMute() {
-  return React.useContext(toggleContext)
-}
-
-export function isThreadMuted(uri: string) {
-  return persisted.get('mutedThreads').includes(uri)
-}
--- a/src/state/persisted/schema.ts
+++ b/src/state/persisted/schema.ts
@ -74,7 +74,6 @@ export const schema = z.object({
      flickr: z.enum(externalEmbedOptions).optional(),
    })
    .optional(),
-  mutedThreads: z.array(z.string()), // should move to server
  invites: z.object({
    copiedInvites: z.array(z.string()),
  }),
@ -88,6 +87,8 @@ export const schema = z.object({
  disableHaptics: z.boolean().optional(),
  disableAutoplay: z.boolean().optional(),
  kawaii: z.boolean().optional(),
+  /** @deprecated */
+  mutedThreads: z.array(z.string()),
 })
 export type Schema = z.infer<typeof schema>

--- a/src/state/queries/notifications/feed.ts
+++ b/src/state/queries/notifications/feed.ts
@ -26,7 +26,6 @@ import {
  useQueryClient,
 } from '@tanstack/react-query'

-import {useMutedThreads} from '#/state/muted-threads'
 import {useAgent} from '#/state/session'
 import {useModerationOpts} from '../../preferences/moderation-opts'
 import {STALE} from '..'
@ -54,7 +53,6 @@ export function useNotificationFeedQuery(opts?: {enabled?: boolean}) {
  const agent = useAgent()
  const queryClient = useQueryClient()
  const moderationOpts = useModerationOpts()
-  const threadMutes = useMutedThreads()
  const unreads = useUnreadNotificationsApi()
  const enabled = opts?.enabled !== false
  const lastPageCountRef = useRef(0)
@ -82,7 +80,6 @@ export function useNotificationFeedQuery(opts?: {enabled?: boolean}) {
            cursor: pageParam,
            queryClient,
            moderationOpts,
-            threadMutes,
            fetchAdditionalData: true,
          })
        ).page
--- a/src/state/queries/notifications/unread.tsx
+++ b/src/state/queries/notifications/unread.tsx
@ -9,7 +9,6 @@ import EventEmitter from 'eventemitter3'

 import BroadcastChannel from '#/lib/broadcast'
 import {logger} from '#/logger'
-import {useMutedThreads} from '#/state/muted-threads'
 import {useAgent, useSession} from '#/state/session'
 import {resetBadgeCount} from 'lib/notifications/notifications'
 import {useModerationOpts} from '../../preferences/moderation-opts'
@ -48,7 +47,6 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
  const agent = useAgent()
  const queryClient = useQueryClient()
  const moderationOpts = useModerationOpts()
-  const threadMutes = useMutedThreads()

  const [numUnread, setNumUnread] = React.useState('')

@ -147,7 +145,6 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
            limit: 40,
            queryClient,
            moderationOpts,
-            threadMutes,

            // only fetch subjects when the page is going to be used
            // in the notifications query, otherwise skip it
@ -192,7 +189,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
        }
      },
    }
-  }, [setNumUnread, queryClient, moderationOpts, threadMutes, agent])
+  }, [setNumUnread, queryClient, moderationOpts, agent])
  checkUnreadRef.current = api.checkUnread

  return (
--- a/src/state/queries/notifications/util.ts
+++ b/src/state/queries/notifications/util.ts
@ -1,5 +1,4 @@
 import {
-  AppBskyEmbedRecord,
  AppBskyFeedDefs,
  AppBskyFeedLike,
  AppBskyFeedPost,
@ -28,7 +27,6 @@ export async function fetchPage({
  limit,
  queryClient,
  moderationOpts,
-  threadMutes,
  fetchAdditionalData,
 }: {
  agent: BskyAgent
@ -36,7 +34,6 @@ export async function fetchPage({
  limit: number
  queryClient: QueryClient
  moderationOpts: ModerationOpts | undefined
-  threadMutes: string[]
  fetchAdditionalData: boolean
 }): Promise<{page: FeedPage; indexedAt: string | undefined}> {
  const res = await agent.listNotifications({
@ -67,11 +64,6 @@ export async function fetchPage({
    }
  }

-  // apply thread muting
-  notifsGrouped = notifsGrouped.filter(
-    notif => !isThreadMuted(notif, threadMutes),
-  )
-
  let seenAt = res.data.seenAt ? new Date(res.data.seenAt) : new Date()
  if (Number.isNaN(seenAt.getTime())) {
    seenAt = new Date()
@ -207,45 +199,3 @@ function getSubjectUri(
    return notif.reasonSubject
  }
 }
-
-export function isThreadMuted(notif: FeedNotification, threadMutes: string[]) {
-  // If there's a subject we want to use that. This will always work on the notifications tab
-  if (notif.subject) {
-    const record = notif.subject.record as AppBskyFeedPost.Record
-    // Check for a quote record
-    if (
-      (record.reply && threadMutes.includes(record.reply.root.uri)) ||
-      (notif.subject.uri && threadMutes.includes(notif.subject.uri))
-    ) {
-      return true
-    } else if (
-      AppBskyEmbedRecord.isMain(record.embed) &&
-      threadMutes.includes(record.embed.record.uri)
-    ) {
-      return true
-    }
-  } else {
-    // Otherwise we just do the best that we can
-    const record = notif.notification.record
-    if (AppBskyFeedPost.isRecord(record)) {
-      if (record.reply && threadMutes.includes(record.reply.root.uri)) {
-        // We can always filter replies
-        return true
-      } else if (
-        AppBskyEmbedRecord.isMain(record.embed) &&
-        threadMutes.includes(record.embed.record.uri)
-      ) {
-        // We can also filter quotes if the quoted post is the root
-        return true
-      }
-    } else if (
-      AppBskyFeedRepost.isRecord(record) &&
-      threadMutes.includes(record.subject.uri)
-    ) {
-      // Finally we can filter reposts, again if the post is the root
-      return true
-    }
-  }
-
-  return false
-}
--- a/src/state/queries/post-feed.ts
+++ b/src/state/queries/post-feed.ts
@ -78,6 +78,7 @@ export interface FeedPostSliceItem {
  feedContext: string | undefined
  moderation: ModerationDecision
  parentAuthor?: AppBskyActorDefs.ProfileViewBasic
+  isParentBlocked?: boolean
 }

 export interface FeedPostSlice {
@ -311,6 +312,10 @@ export function usePostFeedQuery(
                          const parentAuthor =
                            item.reply?.parent?.author ??
                            slice.items[i + 1]?.reply?.grandparentAuthor
+                          const replyRef = item.reply
+                          const isParentBlocked = AppBskyFeedDefs.isBlockedPost(
+                            replyRef?.parent,
+                          )

                          return {
                            _reactKey: `${slice._reactKey}-${i}-${item.post.uri}`,
@ -324,6 +329,7 @@ export function usePostFeedQuery(
                            feedContext: item.feedContext || slice.feedContext,
                            moderation: moderations[i],
                            parentAuthor,
+                            isParentBlocked,
                          }
                        }
                        return undefined
--- a/src/state/queries/post-thread.ts
+++ b/src/state/queries/post-thread.ts
@ -31,7 +31,8 @@ import {
  getEmbeddedPost,
 } from './util'

-const RQKEY_ROOT = 'post-thread'
+const REPLY_TREE_DEPTH = 10
+export const RQKEY_ROOT = 'post-thread'
 export const RQKEY = (uri: string) => [RQKEY_ROOT, uri]
 type ThreadViewNode = AppBskyFeedGetPostThread.OutputSchema['thread']

@ -90,7 +91,10 @@ export function usePostThreadQuery(uri: string | undefined) {
    gcTime: 0,
    queryKey: RQKEY(uri || ''),
    async queryFn() {
-      const res = await agent.getPostThread({uri: uri!, depth: 10})
+      const res = await agent.getPostThread({
+        uri: uri!,
+        depth: REPLY_TREE_DEPTH,
+      })
      if (res.success) {
        const thread = responseToThreadNodes(res.data.thread)
        annotateSelfThread(thread)
@ -287,7 +291,12 @@ function annotateSelfThread(thread: ThreadNode) {
      selfThreadNode.ctx.isSelfThread = true
    }
    const last = selfThreadNodes[selfThreadNodes.length - 1]
-    if (last && last.post.replyCount && !last.replies?.length) {
+    if (
+      last &&
+      last.ctx.depth === REPLY_TREE_DEPTH && // at the edge of the tree depth
+      last.post.replyCount && // has replies
+      !last.replies?.length // replies were not hydrated
+    ) {
      last.ctx.hasMoreSelfThread = true
    }
  }
--- a/src/state/queries/post.ts
+++ b/src/state/queries/post.ts
@ -8,6 +8,7 @@ import {logEvent, LogEvents, toClout} from '#/lib/statsig/statsig'
 import {updatePostShadow} from '#/state/cache/post-shadow'
 import {Shadow} from '#/state/cache/types'
 import {useAgent, useSession} from '#/state/session'
+import {useIsThreadMuted, useSetThreadMute} from '../cache/thread-mutes'
 import {findProfileQueryData} from './profile'

 const RQKEY_ROOT = 'post'
@ -291,3 +292,72 @@ export function usePostDeleteMutation() {
    },
  })
 }
+
+export function useThreadMuteMutationQueue(
+  post: Shadow<AppBskyFeedDefs.PostView>,
+  rootUri: string,
+) {
+  const threadMuteMutation = useThreadMuteMutation()
+  const threadUnmuteMutation = useThreadUnmuteMutation()
+  const isThreadMuted = useIsThreadMuted(rootUri, post.viewer?.threadMuted)
+  const setThreadMute = useSetThreadMute()
+
+  const queueToggle = useToggleMutationQueue<boolean>({
+    initialState: isThreadMuted,
+    runMutation: async (_prev, shouldMute) => {
+      if (shouldMute) {
+        await threadMuteMutation.mutateAsync({
+          uri: rootUri,
+        })
+        return true
+      } else {
+        await threadUnmuteMutation.mutateAsync({
+          uri: rootUri,
+        })
+        return false
+      }
+    },
+    onSuccess(finalIsMuted) {
+      // finalize
+      setThreadMute(rootUri, finalIsMuted)
+    },
+  })
+
+  const queueMuteThread = useCallback(() => {
+    // optimistically update
+    setThreadMute(rootUri, true)
+    return queueToggle(true)
+  }, [setThreadMute, rootUri, queueToggle])
+
+  const queueUnmuteThread = useCallback(() => {
+    // optimistically update
+    setThreadMute(rootUri, false)
+    return queueToggle(false)
+  }, [rootUri, setThreadMute, queueToggle])
+
+  return [isThreadMuted, queueMuteThread, queueUnmuteThread] as const
+}
+
+function useThreadMuteMutation() {
+  const agent = useAgent()
+  return useMutation<
+    {},
+    Error,
+    {uri: string} // the root post's uri
+  >({
+    mutationFn: ({uri}) => {
+      logEvent('post:mute', {})
+      return agent.api.app.bsky.graph.muteThread({root: uri})
+    },
+  })
+}
+
+function useThreadUnmuteMutation() {
+  const agent = useAgent()
+  return useMutation<{}, Error, {uri: string}>({
+    mutationFn: ({uri}) => {
+      logEvent('post:unmute', {})
+      return agent.api.app.bsky.graph.unmuteThread({root: uri})
+    },
+  })
+}
--- a/src/state/queries/threadgate.ts
+++ b/src/state/queries/threadgate.ts
@ -1,5 +1,38 @@
+import {AppBskyFeedDefs, AppBskyFeedThreadgate} from '@atproto/api'
+
 export type ThreadgateSetting =
  | {type: 'nobody'}
  | {type: 'mention'}
  | {type: 'following'}
  | {type: 'list'; list: string}
+
+export function threadgateViewToSettings(
+  threadgate: AppBskyFeedDefs.ThreadgateView | undefined,
+): ThreadgateSetting[] {
+  const record =
+    threadgate &&
+    AppBskyFeedThreadgate.isRecord(threadgate.record) &&
+    AppBskyFeedThreadgate.validateRecord(threadgate.record).success
+      ? threadgate.record
+      : null
+  if (!record) {
+    return []
+  }
+  if (!record.allow?.length) {
+    return [{type: 'nobody'}]
+  }
+  return record.allow
+    .map(allow => {
+      if (allow.$type === 'app.bsky.feed.threadgate#mentionRule') {
+        return {type: 'mention'}
+      }
+      if (allow.$type === 'app.bsky.feed.threadgate#followingRule') {
+        return {type: 'following'}
+      }
+      if (allow.$type === 'app.bsky.feed.threadgate#listRule') {
+        return {type: 'list', list: allow.list}
+      }
+      return undefined
+    })
+    .filter(Boolean) as ThreadgateSetting[]
+}
--- a/src/state/session/agent.ts
+++ b/src/state/session/agent.ts
@ -11,6 +11,7 @@ import {
 import {tryFetchGates} from '#/lib/statsig/statsig'
 import {getAge} from '#/lib/strings/time'
 import {logger} from '#/logger'
+import {snoozeEmailConfirmationPrompt} from '#/state/shell/reminders'
 import {
  configureModerationForAccount,
  configureModerationForGuest,
@ -37,21 +38,7 @@ export async function createAgentAndResume(
  }
  const gates = tryFetchGates(storedAccount.did, 'prefer-low-latency')
  const moderation = configureModerationForAccount(agent, storedAccount)
-  const prevSession: AtpSessionData = {
-    // Sorted in the same property order as when returned by BskyAgent (alphabetical).
-    accessJwt: storedAccount.accessJwt ?? '',
-    did: storedAccount.did,
-    email: storedAccount.email,
-    emailAuthFactor: storedAccount.emailAuthFactor,
-    emailConfirmed: storedAccount.emailConfirmed,
-    handle: storedAccount.handle,
-    refreshJwt: storedAccount.refreshJwt ?? '',
-    /**
-     * @see https://github.com/bluesky-social/atproto/blob/c5d36d5ba2a2c2a5c4f366a5621c06a5608e361e/packages/api/src/agent.ts#L188
-     */
-    active: storedAccount.active ?? true,
-    status: storedAccount.status,
-  }
+  const prevSession: AtpSessionData = sessionAccountToSession(storedAccount)
  if (isSessionExpired(storedAccount)) {
    await networkRetry(1, () => agent.resumeSession(prevSession))
  } else {
@ -191,6 +178,13 @@ export async function createAgentAndCreateAccount(
    agent.setPersonalDetails({birthDate: birthDate.toISOString()})
  }

+  try {
+    // snooze first prompt after signup, defer to next prompt
+    snoozeEmailConfirmationPrompt()
+  } catch (e: any) {
+    logger.error(e, {context: `session: failed snoozeEmailConfirmationPrompt`})
+  }
+
  return prepareAgent(agent, gates, moderation, onSessionChange)
 }

@ -245,3 +239,23 @@ export function agentToSessionAccount(
    pdsUrl: agent.pdsUrl?.toString(),
  }
 }
+
+export function sessionAccountToSession(
+  account: SessionAccount,
+): AtpSessionData {
+  return {
+    // Sorted in the same property order as when returned by BskyAgent (alphabetical).
+    accessJwt: account.accessJwt ?? '',
+    did: account.did,
+    email: account.email,
+    emailAuthFactor: account.emailAuthFactor,
+    emailConfirmed: account.emailConfirmed,
+    handle: account.handle,
+    refreshJwt: account.refreshJwt ?? '',
+    /**
+     * @see https://github.com/bluesky-social/atproto/blob/c5d36d5ba2a2c2a5c4f366a5621c06a5608e361e/packages/api/src/agent.ts#L188
+     */
+    active: account.active ?? true,
+    status: account.status,
+  }
+}
--- a/src/state/session/index.tsx
+++ b/src/state/session/index.tsx
@ -14,6 +14,7 @@ import {
  createAgentAndCreateAccount,
  createAgentAndLogin,
  createAgentAndResume,
+  sessionAccountToSession,
 } from './agent'
 import {getInitialState, reducer} from './reducer'

@ -175,8 +176,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) {
        if (syncedAccount.did !== state.currentAgentState.did) {
          resumeSession(syncedAccount)
        } else {
-          // @ts-ignore we checked for `refreshJwt` above
-          state.currentAgentState.agent.session = syncedAccount
+          const agent = state.currentAgentState.agent as BskyAgent
+          agent.session = sessionAccountToSession(syncedAccount)
        }
      }
    })
--- a/src/state/shell/reminders.e2e.ts
+++ b/src/state/shell/reminders.e2e.ts
@ -1,7 +1,5 @@
-export function init() {}
-
 export function shouldRequestEmailConfirmation() {
  return false
 }

-export function setEmailConfirmationRequested() {}
+export function snoozeEmailConfirmationPrompt() {}
--- a/src/state/shell/reminders.ts
+++ b/src/state/shell/reminders.ts
@ -1,36 +1,45 @@
+import {simpleAreDatesEqual} from '#/lib/strings/time'
+import {logger} from '#/logger'
 import * as persisted from '#/state/persisted'
-import {toHashCode} from 'lib/strings/helpers'
-import {isOnboardingActive} from './onboarding'
 import {SessionAccount} from '../session'
+import {isOnboardingActive} from './onboarding'

 export function shouldRequestEmailConfirmation(account: SessionAccount) {
-  if (!account) {
-    return false
-  }
-  if (account.emailConfirmed) {
-    return false
-  }
-  if (isOnboardingActive()) {
-    return false
-  }
-  // only prompt once
-  if (persisted.get('reminders').lastEmailConfirm) {
-    return false
-  }
+  // ignore logged out
+  if (!account) return false
+  // ignore confirmed accounts, this is the success state of this reminder
+  if (account.emailConfirmed) return false
+  // wait for onboarding to complete
+  if (isOnboardingActive()) return false
+
+  const snoozedAt = persisted.get('reminders').lastEmailConfirm
  const today = new Date()
-  // shard the users into 2 day of the week buckets
-  // (this is to avoid a sudden influx of email updates when
-  // this feature rolls out)
-  const code = toHashCode(account.did) % 7
-  if (code !== today.getDay() && code !== (today.getDay() + 1) % 7) {
+
+  logger.debug('Checking email confirmation reminder', {
+    today,
+    snoozedAt,
+  })
+
+  // never been snoozed, new account
+  if (!snoozedAt) {
+    return true
+  }
+
+  // already snoozed today
+  if (simpleAreDatesEqual(new Date(Date.parse(snoozedAt)), new Date())) {
    return false
  }
+
  return true
 }

-export function setEmailConfirmationRequested() {
+export function snoozeEmailConfirmationPrompt() {
+  const lastEmailConfirm = new Date().toISOString()
+  logger.debug('Snoozing email confirmation reminder', {
+    snoozedAt: lastEmailConfirm,
+  })
  persisted.write('reminders', {
    ...persisted.get('reminders'),
-    lastEmailConfirm: new Date().toISOString(),
+    lastEmailConfirm,
  })
 }
--- a/src/view/com/modals/Threadgate.tsx
+++ b/src/view/com/modals/Threadgate.tsx
@ -26,9 +26,11 @@ export const snapPoints = ['60%']
 export function Component({
  settings,
  onChange,
+  onConfirm,
 }: {
  settings: ThreadgateSetting[]
-  onChange: (settings: ThreadgateSetting[]) => void
+  onChange?: (settings: ThreadgateSetting[]) => void
+  onConfirm?: (settings: ThreadgateSetting[]) => void
 }) {
  const pal = usePalette('default')
  const {closeModal} = useModalControls()
@ -38,12 +40,12 @@ export function Component({

  const onPressEverybody = () => {
    setSelected([])
-    onChange([])
+    onChange?.([])
  }

  const onPressNobody = () => {
    setSelected([{type: 'nobody'}])
-    onChange([{type: 'nobody'}])
+    onChange?.([{type: 'nobody'}])
  }

  const onPressAudience = (setting: ThreadgateSetting) => {
@ -57,7 +59,7 @@ export function Component({
      newSelected.splice(i, 1)
    }
    setSelected(newSelected)
-    onChange(newSelected)
+    onChange?.(newSelected)
  }

  return (
@ -124,6 +126,7 @@ export function Component({
          testID="confirmBtn"
          onPress={() => {
            closeModal()
+            onConfirm?.(selected)
          }}
          style={styles.btn}
          accessibilityRole="button"
--- a/src/view/com/notifications/FeedItem.tsx
+++ b/src/view/com/notifications/FeedItem.tsx
@ -8,6 +8,7 @@ import {
 } from 'react-native'
 import {
  AppBskyActorDefs,
+  AppBskyEmbedExternal,
  AppBskyEmbedImages,
  AppBskyEmbedRecordWithMedia,
  AppBskyFeedDefs,
@ -51,6 +52,7 @@ import {TimeElapsed} from '../util/TimeElapsed'
 import {PreviewableUserAvatar, UserAvatar} from '../util/UserAvatar'

 import hairlineWidth = StyleSheet.hairlineWidth
+import {parseTenorGif} from '#/lib/strings/embed-player'

 const MAX_AUTHORS = 5

@ -465,17 +467,48 @@ function AdditionalPostText({post}: {post?: AppBskyFeedDefs.PostView}) {
  const pal = usePalette('default')
  if (post && AppBskyFeedPost.isRecord(post?.record)) {
    const text = post.record.text
-    const images = AppBskyEmbedImages.isView(post.embed)
-      ? post.embed.images
-      : AppBskyEmbedRecordWithMedia.isView(post.embed) &&
+    let images
+    let isGif = false
+
+    if (AppBskyEmbedImages.isView(post.embed)) {
+      images = post.embed.images
+    } else if (
+      AppBskyEmbedRecordWithMedia.isView(post.embed) &&
      AppBskyEmbedImages.isView(post.embed.media)
-      ? post.embed.media.images
-      : undefined
+    ) {
+      images = post.embed.media.images
+    } else if (
+      AppBskyEmbedExternal.isView(post.embed) &&
+      post.embed.external.thumb
+    ) {
+      let url: URL | undefined
+      try {
+        url = new URL(post.embed.external.uri)
+      } catch {}
+      if (url) {
+        const {success} = parseTenorGif(url)
+        if (success) {
+          isGif = true
+          images = [
+            {
+              thumb: post.embed.external.thumb,
+              alt: post.embed.external.title,
+              fullsize: post.embed.external.thumb,
+            },
+          ]
+        }
+      }
+    }
+
    return (
      <>
        {text?.length > 0 && <Text style={pal.textLight}>{text}</Text>}
        {images && images.length > 0 && (
-          <ImageHorzList images={images} style={styles.additionalPostImages} />
+          <ImageHorzList
+            images={images}
+            style={styles.additionalPostImages}
+            gif={isGif}
+          />
        )}
      </>
    )
--- a/src/view/com/pager/TabBar.tsx
+++ b/src/view/com/pager/TabBar.tsx
@ -180,7 +180,7 @@ const desktopStyles = StyleSheet.create({
    position: 'absolute',
    left: 0,
    right: 0,
-    bottom: -1,
+    top: '100%',
    borderBottomWidth: 1,
  },
 })
@ -207,7 +207,7 @@ const mobileStyles = StyleSheet.create({
    position: 'absolute',
    left: 0,
    right: 0,
-    bottom: -1,
+    top: '100%',
    borderBottomWidth: hairlineWidth,
  },
 })
--- a/src/view/com/post-thread/PostThread.tsx
+++ b/src/view/com/post-thread/PostThread.tsx
@ -331,7 +331,11 @@ export function PostThread({
        <PostThreadShowHiddenReplies
          type={item === SHOW_HIDDEN_REPLIES ? 'hidden' : 'muted'}
          onPress={() =>
-            setHiddenRepliesState(HiddenRepliesState.ShowAndOverridePostHider)
+            setHiddenRepliesState(
+              item === SHOW_HIDDEN_REPLIES
+                ? HiddenRepliesState.Show
+                : HiddenRepliesState.ShowAndOverridePostHider,
+            )
          }
          hideTopBorder={index === 0}
        />
--- a/src/view/com/post-thread/PostThreadItem.tsx
+++ b/src/view/com/post-thread/PostThreadItem.tsx
@ -25,7 +25,7 @@ import {sanitizeHandle} from 'lib/strings/handles'
 import {countLines} from 'lib/strings/helpers'
 import {niceDate} from 'lib/strings/time'
 import {s} from 'lib/styles'
-import {isWeb} from 'platform/detection'
+import {isNative, isWeb} from 'platform/detection'
 import {useSession} from 'state/session'
 import {PostThreadFollowBtn} from 'view/com/post-thread/PostThreadFollowBtn'
 import {atoms as a} from '#/alf'
@ -189,6 +189,7 @@ let PostThreadItemLoaded = ({
  const itemTitle = _(msg`Post by ${post.author.handle}`)
  const authorHref = makeProfileLink(post.author)
  const authorTitle = post.author.handle
+  const isThreadAuthor = getThreadAuthor(post, record) === currentAccount?.did
  const likesHref = React.useMemo(() => {
    const urip = new AtUri(post.uri)
    return makeProfileLink(post.author, 'post', urip.rkey, 'liked-by')
@ -395,7 +396,11 @@ let PostThreadItemLoaded = ({
            </View>
          </View>
        </View>
-        <WhoCanReply post={post} />
+        <WhoCanReply
+          post={post}
+          isThreadAuthor={isThreadAuthor}
+          style={{borderBottomWidth: isNative ? 1 : 0}}
+        />
      </>
    )
  } else {
@ -578,7 +583,9 @@ let PostThreadItemLoaded = ({
          post={post}
          style={{
            marginTop: 4,
+            borderBottomWidth: 1,
          }}
+          isThreadAuthor={isThreadAuthor}
        />
      </>
    )
@ -681,6 +688,20 @@ function ExpandedPostDetails({
  )
 }

+function getThreadAuthor(
+  post: AppBskyFeedDefs.PostView,
+  record: AppBskyFeedPost.Record,
+): string {
+  if (!record.reply) {
+    return post.author.did
+  }
+  try {
+    return new AtUri(record.reply.root.uri).host
+  } catch {
+    return ''
+  }
+}
+
 const styles = StyleSheet.create({
  outer: {
    borderTopWidth: hairlineWidth,
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@ -56,6 +56,7 @@ interface FeedItemProps {
  isThreadParent?: boolean
  feedContext: string | undefined
  hideTopBorder?: boolean
+  isParentBlocked?: boolean
 }

 export function FeedItem({
@ -70,6 +71,7 @@ export function FeedItem({
  isThreadLastChild,
  isThreadParent,
  hideTopBorder,
+  isParentBlocked,
 }: FeedItemProps & {post: AppBskyFeedDefs.PostView}): React.ReactNode {
  const postShadowed = usePostShadow(post)
  const richText = useMemo(
@ -100,6 +102,7 @@ export function FeedItem({
        isThreadLastChild={isThreadLastChild}
        isThreadParent={isThreadParent}
        hideTopBorder={hideTopBorder}
+        isParentBlocked={isParentBlocked}
      />
    )
  }
@ -119,6 +122,7 @@ let FeedItemInner = ({
  isThreadLastChild,
  isThreadParent,
  hideTopBorder,
+  isParentBlocked,
 }: FeedItemProps & {
  richText: RichTextAPI
  post: Shadow<AppBskyFeedDefs.PostView>
@ -320,7 +324,7 @@ let FeedItemInner = ({
            onOpenAuthor={onOpenAuthor}
          />
          {!isThreadChild && showReplyTo && parentAuthor && (
-            <ReplyToLabel profile={parentAuthor} />
+            <ReplyToLabel blocked={isParentBlocked} profile={parentAuthor} />
          )}
          <LabelsOnMyPost post={post} />
          <PostContent
@ -409,9 +413,14 @@ let PostContent = ({
 }
 PostContent = memo(PostContent)

-function ReplyToLabel({profile}: {profile: AppBskyActorDefs.ProfileViewBasic}) {
+function ReplyToLabel({
+  profile,
+  blocked,
+}: {
+  profile: AppBskyActorDefs.ProfileViewBasic
+  blocked?: boolean
+}) {
  const pal = usePalette('default')
-
  return (
    <View style={[s.flexRow, s.mb2, s.alignCenter]}>
      <FontAwesomeIcon
@ -424,6 +433,9 @@ function ReplyToLabel({profile}: {profile: AppBskyActorDefs.ProfileViewBasic}) {
        style={[pal.textLight, s.mr2]}
        lineHeight={1.2}
        numberOfLines={1}>
+        {blocked ? (
+          <Trans context="description">Reply to a blocked post</Trans>
+        ) : (
          <Trans context="description">
            Reply to{' '}
            <ProfileHoverCard inline did={profile.did}>
@ -441,6 +453,7 @@ function ReplyToLabel({profile}: {profile: AppBskyActorDefs.ProfileViewBasic}) {
              />
            </ProfileHoverCard>
          </Trans>
+        )}
      </Text>
    </View>
  )
--- a/src/view/com/posts/FeedSlice.tsx
+++ b/src/view/com/posts/FeedSlice.tsx
@ -34,6 +34,7 @@ let FeedSlice = ({
          isThreadParent={isThreadParentAt(slice.items, 0)}
          isThreadChild={isThreadChildAt(slice.items, 0)}
          hideTopBorder={hideTopBorder}
+          isParentBlocked={slice.items[0].isParentBlocked}
        />
        <FeedItem
          key={slice.items[1]._reactKey}
@ -46,6 +47,7 @@ let FeedSlice = ({
          moderation={slice.items[1].moderation}
          isThreadParent={isThreadParentAt(slice.items, 1)}
          isThreadChild={isThreadChildAt(slice.items, 1)}
+          isParentBlocked={slice.items[1].isParentBlocked}
        />
        <ViewFullThread slice={slice} />
        <FeedItem
@ -59,6 +61,7 @@ let FeedSlice = ({
          moderation={slice.items[last].moderation}
          isThreadParent={isThreadParentAt(slice.items, last)}
          isThreadChild={isThreadChildAt(slice.items, last)}
+          isParentBlocked={slice.items[2].isParentBlocked}
          isThreadLastChild
        />
      </>
@ -82,6 +85,7 @@ let FeedSlice = ({
          isThreadLastChild={
            isThreadChildAt(slice.items, i) && slice.items.length === i + 1
          }
+          isParentBlocked={slice.items[i].isParentBlocked}
          hideTopBorder={hideTopBorder && i === 0}
        />
      ))}
--- a/src/view/com/threadgate/WhoCanReply.tsx
+++ b/src/view/com/threadgate/WhoCanReply.tsx
@ -1,105 +1,138 @@
 import React from 'react'
-import {StyleProp, View, ViewStyle} from 'react-native'
-import {
-  AppBskyFeedDefs,
-  AppBskyFeedThreadgate,
-  AppBskyGraphDefs,
-  AtUri,
-} from '@atproto/api'
-import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
-import {Trans} from '@lingui/macro'
+import {Keyboard, StyleProp, View, ViewStyle} from 'react-native'
+import {AppBskyFeedDefs, AppBskyGraphDefs, AtUri} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+import {useQueryClient} from '@tanstack/react-query'

+import {useAnalytics} from '#/lib/analytics/analytics'
+import {createThreadgate} from '#/lib/api'
 import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
 import {makeListLink, makeProfileLink} from '#/lib/routes/links'
 import {colors} from '#/lib/styles'
+import {logger} from '#/logger'
+import {isNative} from '#/platform/detection'
+import {useModalControls} from '#/state/modals'
+import {RQKEY_ROOT as POST_THREAD_RQKEY_ROOT} from '#/state/queries/post-thread'
+import {
+  ThreadgateSetting,
+  threadgateViewToSettings,
+} from '#/state/queries/threadgate'
+import {useAgent} from '#/state/session'
+import * as Toast from 'view/com/util/Toast'
+import {Button} from '#/components/Button'
 import {TextLink} from '../util/Link'
 import {Text} from '../util/text/Text'

 export function WhoCanReply({
  post,
+  isThreadAuthor,
  style,
 }: {
  post: AppBskyFeedDefs.PostView
+  isThreadAuthor: boolean
  style?: StyleProp<ViewStyle>
 }) {
+  const {track} = useAnalytics()
+  const {_} = useLingui()
  const pal = usePalette('default')
-  const {isMobile} = useWebMediaQueries()
+  const agent = useAgent()
+  const queryClient = useQueryClient()
+  const {openModal} = useModalControls()
  const containerStyles = useColorSchemeStyle(
    {
-      borderColor: pal.colors.unreadNotifBorder,
      backgroundColor: pal.colors.unreadNotifBg,
    },
    {
-      borderColor: pal.colors.unreadNotifBorder,
      backgroundColor: pal.colors.unreadNotifBg,
    },
  )
-  const iconStyles = useColorSchemeStyle(
-    {
-      backgroundColor: colors.blue3,
-    },
-    {
-      backgroundColor: colors.blue3,
-    },
-  )
  const textStyles = useColorSchemeStyle(
-    {color: colors.gray7},
+    {color: colors.blue5},
    {color: colors.blue1},
  )
-  const record = React.useMemo(
-    () =>
-      post.threadgate &&
-      AppBskyFeedThreadgate.isRecord(post.threadgate.record) &&
-      AppBskyFeedThreadgate.validateRecord(post.threadgate.record).success
-        ? post.threadgate.record
-        : null,
+  const hoverStyles = useColorSchemeStyle(
+    {
+      backgroundColor: colors.white,
+    },
+    {
+      backgroundColor: pal.colors.background,
+    },
+  )
+  const settings = React.useMemo(
+    () => threadgateViewToSettings(post.threadgate),
    [post],
  )
-  if (record) {
+  const isRootPost = !('reply' in post.record)
+
+  const onPressEdit = () => {
+    track('Post:EditThreadgateOpened')
+    if (isNative && Keyboard.isVisible()) {
+      Keyboard.dismiss()
+    }
+    openModal({
+      name: 'threadgate',
+      settings,
+      async onConfirm(newSettings: ThreadgateSetting[]) {
+        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,
+            })
+          }
+          Toast.show('Thread settings updated')
+          queryClient.invalidateQueries({
+            queryKey: [POST_THREAD_RQKEY_ROOT],
+          })
+          track('Post:ThreadgateEdited')
+        } catch (err) {
+          Toast.show(
+            'There was an issue. Please check your internet connection and try again.',
+          )
+          logger.error('Failed to edit threadgate', {message: err})
+        }
+      },
+    })
+  }
+
+  if (!isRootPost) {
+    return null
+  }
+  if (!settings.length && !isThreadAuthor) {
+    return null
+  }
+
  return (
    <View
      style={[
        {
          flexDirection: 'row',
          alignItems: 'center',
-            gap: isMobile ? 8 : 10,
-            paddingHorizontal: isMobile ? 16 : 18,
-            paddingVertical: 12,
-            borderWidth: 1,
-            borderLeftWidth: isMobile ? 0 : 1,
-            borderRightWidth: isMobile ? 0 : 1,
+          gap: 10,
+          paddingLeft: 18,
+          paddingRight: 14,
+          paddingVertical: 10,
+          borderTopWidth: 1,
        },
+        pal.border,
        containerStyles,
        style,
      ]}>
-        <View
-          style={[
-            {
-              flexDirection: 'row',
-              alignItems: 'center',
-              justifyContent: 'center',
-              width: 32,
-              height: 32,
-              borderRadius: 19,
-            },
-            iconStyles,
-          ]}>
-          <FontAwesomeIcon
-            icon={['far', 'comments']}
-            size={16}
-            color={'#fff'}
-          />
-        </View>
-        <View style={{flex: 1}}>
+      <View style={{flex: 1, paddingVertical: 6}}>
        <Text type="sm" style={[{flexWrap: 'wrap'}, textStyles]}>
-            {!record.allow?.length ? (
-              <Trans>Replies to this thread are disabled</Trans>
+          {!settings.length ? (
+            <Trans>Everybody can reply.</Trans>
+          ) : settings[0].type === 'nobody' ? (
+            <Trans>Replies to this thread are disabled.</Trans>
          ) : (
            <Trans>
              Only{' '}
-                {record.allow.map((rule, i) => (
+              {settings.map((rule, i) => (
                <>
                  <Rule
                    key={`rule-${i}`}
@ -107,11 +140,7 @@ export function WhoCanReply({
                    post={post}
                    lists={post.threadgate!.lists}
                  />
-                    <Separator
-                      key={`sep-${i}`}
-                      i={i}
-                      length={record.allow!.length}
-                    />
+                  <Separator key={`sep-${i}`} i={i} length={settings.length} />
                </>
              ))}{' '}
              can reply.
@ -119,10 +148,25 @@ export function WhoCanReply({
          )}
        </Text>
      </View>
+      {isThreadAuthor && (
+        <View>
+          <Button label={_(msg`Edit`)} onPress={onPressEdit}>
+            {({hovered}) => (
+              <View
+                style={[
+                  hovered && hoverStyles,
+                  {paddingVertical: 6, paddingHorizontal: 8, borderRadius: 8},
+                ]}>
+                <Text type="sm" style={pal.link}>
+                  <Trans>Edit</Trans>
+                </Text>
+              </View>
+            )}
+          </Button>
+        </View>
+      )}
    </View>
  )
-  }
-  return null
 }

 function Rule({
@ -130,15 +174,15 @@ function Rule({
  post,
  lists,
 }: {
-  rule: any
+  rule: ThreadgateSetting
  post: AppBskyFeedDefs.PostView
  lists: AppBskyGraphDefs.ListViewBasic[] | undefined
 }) {
  const pal = usePalette('default')
-  if (AppBskyFeedThreadgate.isMentionRule(rule)) {
+  if (rule.type === 'mention') {
    return <Trans>mentioned users</Trans>
  }
-  if (AppBskyFeedThreadgate.isFollowingRule(rule)) {
+  if (rule.type === 'following') {
    return (
      <Trans>
        users followed by{' '}
@ -151,7 +195,7 @@ function Rule({
      </Trans>
    )
  }
-  if (AppBskyFeedThreadgate.isListRule(rule)) {
+  if (rule.type === 'list') {
    const list = lists?.find(l => l.uri === rule.list)
    if (list) {
      const listUrip = new AtUri(list.uri)
--- a/src/view/com/util/List.web.tsx
+++ b/src/view/com/util/List.web.tsx
@ -38,6 +38,7 @@ function ListImpl<ItemT>(
  {
    ListHeaderComponent,
    ListFooterComponent,
+    ListEmptyComponent,
    containWeb,
    contentContainerStyle,
    data,
@ -72,23 +73,35 @@ function ListImpl<ItemT>(
    )
  }

-  let header: JSX.Element | null = null
+  const isEmpty = !data || data.length === 0
+
+  let headerComponent: JSX.Element | null = null
  if (ListHeaderComponent != null) {
    if (isValidElement(ListHeaderComponent)) {
-      header = ListHeaderComponent
+      headerComponent = ListHeaderComponent
    } else {
      // @ts-ignore Nah it's fine.
-      header = <ListHeaderComponent />
+      headerComponent = <ListHeaderComponent />
    }
  }

-  let footer: JSX.Element | null = null
+  let footerComponent: JSX.Element | null = null
  if (ListFooterComponent != null) {
    if (isValidElement(ListFooterComponent)) {
-      footer = ListFooterComponent
+      footerComponent = ListFooterComponent
    } else {
      // @ts-ignore Nah it's fine.
-      footer = <ListFooterComponent />
+      footerComponent = <ListFooterComponent />
+    }
+  }
+
+  let emptyComponent: JSX.Element | null = null
+  if (ListEmptyComponent != null) {
+    if (isValidElement(ListEmptyComponent)) {
+      emptyComponent = ListEmptyComponent
+    } else {
+      // @ts-ignore Nah it's fine.
+      emptyComponent = <ListEmptyComponent />
    }
  }

@ -323,15 +336,17 @@ function ListImpl<ItemT>(
          onVisibleChange={handleAboveTheFoldVisibleChange}
          style={[styles.aboveTheFoldDetector, {height: headerOffset}]}
        />
-        {onStartReached && (
+        {onStartReached && !isEmpty && (
          <Visibility
            root={containWeb ? nativeRef : null}
            onVisibleChange={onHeadVisibilityChange}
            topMargin={(onStartReachedThreshold ?? 0) * 100 + '%'}
          />
        )}
-        {header}
-        {(data as Array<ItemT>).map((item, index) => {
+        {headerComponent}
+        {isEmpty
+          ? emptyComponent
+          : (data as Array<ItemT>)?.map((item, index) => {
              const key = keyExtractor!(item, index)
              return (
                <Row<ItemT>
@ -345,14 +360,14 @@ function ListImpl<ItemT>(
                />
              )
            })}
-        {onEndReached && (
+        {onEndReached && !isEmpty && (
          <Visibility
            root={containWeb ? nativeRef : null}
            onVisibleChange={onTailVisibilityChange}
            bottomMargin={(onEndReachedThreshold ?? 0) * 100 + '%'}
          />
        )}
-        {footer}
+        {footerComponent}
      </View>
    </View>
  )
--- a/src/view/com/util/TimeElapsed.tsx
+++ b/src/view/com/util/TimeElapsed.tsx
@ -15,12 +15,14 @@ export function TimeElapsed({
  const ago = useGetTimeAgo()
  const format = timeToString ?? ago
  const tick = useTickEveryMinute()
-  const [timeElapsed, setTimeAgo] = React.useState(() => format(timestamp))
+  const [timeElapsed, setTimeAgo] = React.useState(() =>
+    format(timestamp, tick),
+  )

  const [prevTick, setPrevTick] = React.useState(tick)
  if (prevTick !== tick) {
    setPrevTick(tick)
-    setTimeAgo(format(timestamp))
+    setTimeAgo(format(timestamp, tick))
  }

  return children({timeElapsed})
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@ -35,6 +35,7 @@ export type UserAvatarType = 'user' | 'algo' | 'list' | 'labeler'

 interface BaseUserAvatarProps {
  type?: UserAvatarType
+  shape?: 'circle' | 'square'
  size: number
  avatar?: string | null
 }
@ -60,12 +61,16 @@ const BLUR_AMOUNT = isWeb ? 5 : 100

 let DefaultAvatar = ({
  type,
+  shape: overrideShape,
  size,
 }: {
  type: UserAvatarType
+  shape?: 'square' | 'circle'
  size: number
 }): React.ReactNode => {
+  const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')
  if (type === 'algo') {
+    // TODO: shape=circle
    // Font Awesome Pro 6.4.0 by @fontawesome -https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
    return (
      <Svg
@ -84,6 +89,7 @@ let DefaultAvatar = ({
    )
  }
  if (type === 'list') {
+    // TODO: shape=circle
    // Font Awesome Pro 6.4.0 by @fontawesome -https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc.
    return (
      <Svg
@ -117,6 +123,7 @@ let DefaultAvatar = ({
        viewBox="0 0 32 32"
        fill="none"
        stroke="none">
+        {finalShape === 'square' ? (
          <Rect
            x="0"
            y="0"
@ -125,6 +132,9 @@ let DefaultAvatar = ({
            rx="3"
            fill={tokens.color.temp_purple}
          />
+        ) : (
+          <Circle cx="16" cy="16" r="16" fill={tokens.color.temp_purple} />
+        )}
        <Path
          d="M24 9.75L16 7L8 9.75V15.9123C8 20.8848 12 23 16 25.1579C20 23 24 20.8848 24 15.9123V9.75Z"
          stroke="white"
@ -135,6 +145,7 @@ let DefaultAvatar = ({
      </Svg>
    )
  }
+  // TODO: shape=square
  return (
    <Svg
      testID="userAvatarFallback"
@ -159,6 +170,7 @@ export {DefaultAvatar}

 let UserAvatar = ({
  type = 'user',
+  shape: overrideShape,
  size,
  avatar,
  moderation,
@ -166,9 +178,10 @@ let UserAvatar = ({
 }: UserAvatarProps): React.ReactNode => {
  const pal = usePalette('default')
  const backgroundColor = pal.colors.backgroundLight
+  const finalShape = overrideShape ?? (type === 'user' ? 'circle' : 'square')

  const aviStyle = useMemo(() => {
-    if (type === 'algo' || type === 'list' || type === 'labeler') {
+    if (finalShape === 'square') {
      return {
        width: size,
        height: size,
@ -182,7 +195,7 @@ let UserAvatar = ({
      borderRadius: Math.floor(size / 2),
      backgroundColor,
    }
-  }, [type, size, backgroundColor])
+  }, [finalShape, size, backgroundColor])

  const alert = useMemo(() => {
    if (!moderation?.alert) {
@ -224,7 +237,7 @@ let UserAvatar = ({
    </View>
  ) : (
    <View style={{width: size, height: size}}>
-      <DefaultAvatar type={type} size={size} />
+      <DefaultAvatar type={type} shape={finalShape} size={size} />
      {alert}
    </View>
  )
--- a/src/view/com/util/forms/PostDropdownBtn.tsx
+++ b/src/view/com/util/forms/PostDropdownBtn.tsx
@ -7,7 +7,7 @@ import {
 } from 'react-native'
 import * as Clipboard from 'expo-clipboard'
 import {
-  AppBskyActorDefs,
+  AppBskyFeedDefs,
  AppBskyFeedPost,
  AtUri,
  RichText as RichTextAPI,
@ -22,12 +22,15 @@ import {richTextToString} from '#/lib/strings/rich-text-helpers'
 import {getTranslatorLink} from '#/locale/helpers'
 import {logger} from '#/logger'
 import {isWeb} from '#/platform/detection'
+import {Shadow} from '#/state/cache/post-shadow'
 import {useFeedFeedbackContext} from '#/state/feed-feedback'
-import {useMutedThreads, useToggleThreadMute} from '#/state/muted-threads'
 import {useLanguagePrefs} from '#/state/preferences'
 import {useHiddenPosts, useHiddenPostsApi} from '#/state/preferences'
 import {useOpenLink} from '#/state/preferences/in-app-browser'
-import {usePostDeleteMutation} from '#/state/queries/post'
+import {
+  usePostDeleteMutation,
+  useThreadMuteMutationQueue,
+} from '#/state/queries/post'
 import {useSession} from '#/state/session'
 import {getCurrentRoute} from 'lib/routes/helpers'
 import {shareUrl} from 'lib/sharing'
@ -62,9 +65,7 @@ import * as Toast from '../Toast'

 let PostDropdownBtn = ({
  testID,
-  postAuthor,
-  postCid,
-  postUri,
+  post,
  postFeedContext,
  record,
  richText,
@ -74,9 +75,7 @@ let PostDropdownBtn = ({
  timestamp,
 }: {
  testID: string
-  postAuthor: AppBskyActorDefs.ProfileViewBasic
-  postCid: string
-  postUri: string
+  post: Shadow<AppBskyFeedDefs.PostView>
  postFeedContext: string | undefined
  record: AppBskyFeedPost.Record
  richText: RichTextAPI
@ -92,8 +91,6 @@ let PostDropdownBtn = ({
  const {_} = useLingui()
  const defaultCtrlColor = theme.palette.default.postCtrl
  const langPrefs = useLanguagePrefs()
-  const mutedThreads = useMutedThreads()
-  const toggleThreadMute = useToggleThreadMute()
  const postDeleteMutation = usePostDeleteMutation()
  const hiddenPosts = useHiddenPosts()
  const {hidePost} = useHiddenPostsApi()
@ -107,9 +104,15 @@ let PostDropdownBtn = ({
  const loggedOutWarningPromptControl = useDialogControl()
  const embedPostControl = useDialogControl()
  const sendViaChatControl = useDialogControl()
+  const postUri = post.uri
+  const postCid = post.cid
+  const postAuthor = post.author

  const rootUri = record.reply?.root?.uri || postUri
-  const isThreadMuted = mutedThreads.includes(rootUri)
+  const [isThreadMuted, muteThread, unmuteThread] = useThreadMuteMutationQueue(
+    post,
+    rootUri,
+  )
  const isPostHidden = hiddenPosts && hiddenPosts.includes(postUri)
  const isAuthor = postAuthor.did === currentAccount?.did

@ -162,18 +165,22 @@ let PostDropdownBtn = ({

  const onToggleThreadMute = React.useCallback(() => {
    try {
-      const muted = toggleThreadMute(rootUri)
-      if (muted) {
+      if (isThreadMuted) {
+        unmuteThread()
+        Toast.show(_(msg`You will now receive notifications for this thread`))
+      } else {
+        muteThread()
        Toast.show(
          _(msg`You will no longer receive notifications for this thread`),
        )
-      } else {
-        Toast.show(_(msg`You will now receive notifications for this thread`))
      }
-    } catch (e) {
+    } catch (e: any) {
+      if (e?.name !== 'AbortError') {
        logger.error('Failed to toggle thread mute', {message: e})
+        Toast.show(_(msg`Failed to toggle thread mute, please try again`))
      }
-  }, [rootUri, toggleThreadMute, _])
+    }
+  }, [isThreadMuted, unmuteThread, _, muteThread])

  const onCopyPostText = React.useCallback(() => {
    const str = richTextToString(richText, true)
--- a/src/view/com/util/images/ImageHorzList.tsx
+++ b/src/view/com/util/images/ImageHorzList.tsx
@ -2,39 +2,60 @@ import React from 'react'
 import {StyleProp, StyleSheet, View, ViewStyle} from 'react-native'
 import {Image} from 'expo-image'
 import {AppBskyEmbedImages} from '@atproto/api'
+import {Trans} from '@lingui/macro'
+
+import {atoms as a} from '#/alf'
+import {Text} from '#/components/Typography'

 interface Props {
  images: AppBskyEmbedImages.ViewImage[]
  style?: StyleProp<ViewStyle>
+  gif?: boolean
 }

-export function ImageHorzList({images, style}: Props) {
+export function ImageHorzList({images, style, gif}: Props) {
  return (
-    <View style={[styles.flexRow, style]}>
+    <View style={[a.flex_row, a.gap_xs, style]}>
      {images.map(({thumb, alt}) => (
+        <View
+          key={thumb}
+          style={[a.relative, a.flex_1, {aspectRatio: 1, maxWidth: 100}]}>
          <Image
            key={thumb}
            source={{uri: thumb}}
-          style={styles.image}
+            style={[a.flex_1, a.rounded_xs]}
            accessible={true}
            accessibilityIgnoresInvertColors
            accessibilityHint={alt}
            accessibilityLabel=""
          />
+          {gif && (
+            <View style={styles.altContainer}>
+              <Text style={styles.alt}>
+                <Trans>GIF</Trans>
+              </Text>
+            </View>
+          )}
+        </View>
      ))}
    </View>
  )
 }

 const styles = StyleSheet.create({
-  flexRow: {
-    flexDirection: 'row',
-    gap: 5,
+  altContainer: {
+    backgroundColor: 'rgba(0, 0, 0, 0.75)',
+    borderRadius: 6,
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+    position: 'absolute',
+    right: 5,
+    bottom: 5,
+    zIndex: 2,
  },
-  image: {
-    maxWidth: 100,
-    aspectRatio: 1,
-    flex: 1,
-    borderRadius: 4,
+  alt: {
+    color: 'white',
+    fontSize: 7,
+    fontWeight: 'bold',
  },
 })
--- a/src/view/com/util/post-ctrls/PostCtrls.tsx
+++ b/src/view/com/util/post-ctrls/PostCtrls.tsx
@ -319,9 +319,7 @@ let PostCtrls = ({
      <View style={big ? a.align_center : [a.flex_1, a.align_start]}>
        <PostDropdownBtn
          testID="postDropdownBtn"
-          postAuthor={post.author}
-          postCid={post.cid}
-          postUri={post.uri}
+          post={post}
          postFeedContext={feedContext}
          record={record}
          richText={richText}
--- a/src/view/screens/Log.tsx
+++ b/src/view/screens/Log.tsx
@ -7,6 +7,7 @@ import {useFocusEffect} from '@react-navigation/native'

 import {useGetTimeAgo} from '#/lib/hooks/useTimeAgo'
 import {getEntries} from '#/logger/logDump'
+import {useTickEveryMinute} from '#/state/shell'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {usePalette} from 'lib/hooks/usePalette'
 import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
@ -24,6 +25,7 @@ export function LogScreen({}: NativeStackScreenProps<
  const setMinimalShellMode = useSetMinimalShellMode()
  const [expanded, setExpanded] = React.useState<string[]>([])
  const timeAgo = useGetTimeAgo()
+  const tick = useTickEveryMinute()

  useFocusEffect(
    React.useCallback(() => {
@ -72,7 +74,7 @@ export function LogScreen({}: NativeStackScreenProps<
                    />
                  ) : undefined}
                  <Text type="sm" style={[styles.ts, pal.textLight]}>
-                    {timeAgo(entry.timestamp)}
+                    {timeAgo(entry.timestamp, tick)}
                  </Text>
                </TouchableOpacity>
                {expanded.includes(entry.id) ? (
--- a/yarn.lock
+++ b/yarn.lock
@ -34,10 +34,10 @@
    jsonpointer "^5.0.0"
    leven "^3.1.0"

-"@atproto/api@^0.12.18":
-  version "0.12.18"
-  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.12.18.tgz#490a6f22966a3b605c22154fe7befc78bf640821"
-  integrity sha512-Ii3J/uzmyw1qgnfhnvAsmuXa8ObRSCHelsF8TmQrgMWeXCbfypeS/VESm++1Z9+xHK7bHPOwSek3RmWB0cqEbQ==
+"@atproto/api@^0.12.20":
+  version "0.12.20"
+  resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.12.20.tgz#2cada08c24bc61eb1775ee4c8010c7ed9dc5d6f3"
+  integrity sha512-nt7ZKUQL9j2yQ3tmCCueiIuc0FwdxZYn2fXdLYqltuxlaO5DmaqqULMBKeYJLq4GbvVl/G+ikPJccoSaMWDYOg==
  dependencies:
    "@atproto/common-web" "^0.3.0"
    "@atproto/lexicon" "^0.4.0"