[Threadgate] Tweak threadgate buttons (#9173)

* tweak in-post threadgate button

* tweak composer threadgate button

* reduce date length slightly

* pressed styles

* make date length depend on breakpoint

* add chevron to label btn

* add tiny chevron, special-case button icon width

* [Threadgate] Add hint (#9350)

* get tooltip working on web

* add compatibility layer for working in iOS sheets

* add timeout to profile tooltip now that it appears instantly

* rm debug code

* Update ThreadgateBtn.tsx

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* remeasure when keyboard changes

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

* fix types

* [Threadgate] Refresh dialog (#9342)

* wip new ui

* update threadgate dialog with new designs

* restore nobody option

* relayout android sheet when ratio changes

* fix ratio changing case in bottom sheet

* timebox reached, use setTimeout

* update panel styles

* missing imports

* extract out Panel

* tweak layout animation

* fix icon color

* use same color mechamism for icon as text

* restore the header

* refreshed toggle styles (#9343)

* [Threadgate] Persist settings (#9341)

* add persist toggle to threadgate dialog

* move state back down

* sort out spacing

* wire up query

* @surfdude29 tweaks

* use tiny chevron in WhoCanReply

* wait for prefetch before opening

* move Panel into the Toggle namespace

* default -> pref

* use medium date length

* rm hover state from web selects, fix border radius

* fix key issue in Selects

---------

Co-authored-by: surfdude29 <149612116+surfdude29@users.noreply.github.com>

assets/icons/tinyChevronBottom_stroke2_corner0_rounded.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" d="M10.928 18.882a1.95 1.95 0 0 0 2.452-.25l9-9a1.953 1.953 0 0 0-2.76-2.76L12 14.493l-7.62-7.62a1.952 1.952 0 0 0-2.76 2.76l9 9 .308.25Z"/></svg>

modules/bottom-sheet/android/src/main/java/expo/modules/bottomsheet/BottomSheetView.kt

@@ -243,13 +243,18 @@ class BottomSheetView(
     val bottomSheet = dialog.findViewById<FrameLayout>(com.google.android.material.R.id.design_bottom_sheet)
     bottomSheet?.let {
       val behavior = BottomSheetBehavior.from(it)
+      val currentState = behavior.state
 
-      behavior.halfExpandedRatio = getHalfExpandedRatio(contentHeight)
+      val oldRatio = behavior.halfExpandedRatio
+      var newRatio = getHalfExpandedRatio(contentHeight)
+      behavior.halfExpandedRatio = newRatio
 
       if (contentHeight > this.safeScreenHeight && behavior.state != BottomSheetBehavior.STATE_EXPANDED) {
         behavior.state = BottomSheetBehavior.STATE_EXPANDED
       } else if (contentHeight < this.safeScreenHeight && behavior.state != BottomSheetBehavior.STATE_HALF_EXPANDED) {
         behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED
+      } else if (currentState == BottomSheetBehavior.STATE_HALF_EXPANDED && oldRatio != newRatio) {
+        behavior.state = BottomSheetBehavior.STATE_HALF_EXPANDED
       }
     }
   }

modules/bottom-sheet/index.ts

@@ -1,8 +1,8 @@
 import {BottomSheet} from './src/BottomSheet'
 import {
   BottomSheetSnapPoint,
-  BottomSheetState,
+  type BottomSheetState,
-  BottomSheetViewProps,
+  type BottomSheetViewProps,
 } from './src/BottomSheet.types'
 import {BottomSheetNativeComponent} from './src/BottomSheetNativeComponent'
 import {

modules/bottom-sheet/src/BottomSheetNativeComponent.tsx

@@ -112,9 +112,21 @@ export class BottomSheetNativeComponent extends React.Component<
           onStateChange={this.onStateChange}
           extraStyles={extraStyles}
           onLayout={e => {
+            if (isIOS15) {
               const {height} = e.nativeEvent.layout
               this.setState({viewHeight: height})
+            }
+            if (Platform.OS === 'android') {
+              // TEMP HACKFIX: I had to timebox this, but this is Bad.
+              // On Android, if you run updateLayout() immediately,
+              // it will take ages to actually run on the native side.
+              // However, adding literally any delay will fix this, including
+              // a console.log() - just sending the log to the CLI is enough.
+              // TODO: Get to the bottom of this and fix it properly! -sfn
+              setTimeout(() => this.updateLayout())
+            } else {
               this.updateLayout()
+            }
           }}
         />
       </Portal>

src/components/Button.tsx

@@ -798,6 +798,7 @@ export function ButtonIcon({
        * also so that we can calculate transforms.
        */
       const iconSize = {
+        '2xs': 8,
         xs: 12,
         sm: 16,
         md: 18,
@@ -842,7 +843,7 @@ export function ButtonIcon({
       style={[
         a.z_20,
         {
-          width: iconContainerSize,
+          width: size === '2xs' ? 10 : iconContainerSize,
           height: iconContainerSize,
           marginLeft: iconNegativeMargin,
           marginRight: iconNegativeMargin,

src/components/Select/index.web.tsx

@@ -1,4 +1,4 @@
-import {createContext, forwardRef, useContext, useMemo} from 'react'
+import {createContext, forwardRef, Fragment, useContext, useMemo} from 'react'
 import {View} from 'react-native'
 import {Select as RadixSelect} from 'radix-ui'
 
@@ -96,8 +96,7 @@ export function Trigger({children, label}: TriggerProps) {
         style={flatten([
           a.flex,
           a.relative,
-          t.atoms.bg_contrast_25,
+          t.atoms.bg_contrast_50,
-          a.rounded_sm,
           a.w_full,
           a.align_center,
           a.gap_sm,
@@ -106,15 +105,14 @@ export function Trigger({children, label}: TriggerProps) {
           a.px_md,
           a.pointer,
           {
+            borderRadius: 10,
             maxWidth: 400,
             outline: 0,
             borderWidth: 2,
             borderStyle: 'solid',
             borderColor: focused
               ? t.palette.primary_500
-              : hovered
+              : t.palette.contrast_50,
-                ? t.palette.contrast_100
-                : t.palette.contrast_25,
           },
         ])}>
         {children}
@@ -140,7 +138,11 @@ export function Icon({style}: IconProps) {
   )
 }
 
-export function Content<T>({items, renderItem}: ContentProps<T>) {
+export function Content<T>({
+  items,
+  renderItem,
+  valueExtractor = defaultItemValueExtractor,
+}: ContentProps<T>) {
   const t = useTheme()
   const selectedValue = useContext(SelectedValueContext)
 
@@ -198,7 +200,11 @@ export function Content<T>({items, renderItem}: ContentProps<T>) {
             <ChevronUpIcon style={[t.atoms.text]} size="xs" />
           </RadixSelect.ScrollUpButton>
           <RadixSelect.Viewport style={flatten([a.p_xs])}>
-            {items.map((item, index) => renderItem(item, index, selectedValue))}
+            {items.map((item, index) => (
+              <Fragment key={valueExtractor(item)}>
+                {renderItem(item, index, selectedValue)}
+              </Fragment>
+            ))}
           </RadixSelect.Viewport>
           <RadixSelect.ScrollDownButton style={flatten(down)}>
             <ChevronDownIcon style={[t.atoms.text]} size="xs" />
@@ -209,6 +215,10 @@ export function Content<T>({items, renderItem}: ContentProps<T>) {
   )
 }
 
+function defaultItemValueExtractor(item: any) {
+  return item.value
+}
+
 const ItemContext = createContext<{
   hovered: boolean
   focused: boolean

src/components/Tooltip/index.tsx

@@ -12,9 +12,11 @@ import {useWindowDimensions, View} from 'react-native'
 import Animated, {Easing, ZoomIn} from 'react-native-reanimated'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
 
+import {useIsKeyboardVisible} from '#/lib/hooks/useIsKeyboardVisible'
+import {GlobalGestureEventsProvider} from '#/state/global-gesture-events'
 import {atoms as a, select, useTheme} from '#/alf'
 import {useOnGesture} from '#/components/hooks/useOnGesture'
-import {Portal} from '#/components/Portal'
+import {createPortalGroup, Portal as RootPortal} from '#/components/Portal'
 import {
   ARROW_HALF_SIZE,
   ARROW_SIZE,
@@ -23,6 +25,33 @@ import {
 } from '#/components/Tooltip/const'
 import {Text} from '#/components/Typography'
 
+const TooltipPortal = createPortalGroup()
+const TooltipProviderContext =
+  createContext<React.RefObject<View | null> | null>(null)
+
+/**
+ * Provider for Tooltip component. Only needed when you need to position the tooltip relative to a container,
+ * such as in the composer sheet.
+ *
+ * Only really necessary on iOS but can work on Android.
+ */
+export function SheetCompatProvider({children}: {children: React.ReactNode}) {
+  const ref = useRef<View | null>(null)
+  return (
+    <GlobalGestureEventsProvider style={[a.flex_1]}>
+      <TooltipPortal.Provider>
+        <View ref={ref} collapsable={false} style={[a.flex_1]}>
+          <TooltipProviderContext value={ref}>
+            {children}
+          </TooltipProviderContext>
+        </View>
+        <TooltipPortal.Outlet />
+      </TooltipPortal.Provider>
+    </GlobalGestureEventsProvider>
+  )
+}
+SheetCompatProvider.displayName = 'TooltipSheetCompatProvider'
+
 /**
  * These are native specific values, not shared with web
  */
@@ -120,22 +149,46 @@ export function Outer({
 
 export function Target({children}: {children: React.ReactNode}) {
   const {shouldMeasure, setTargetMeasurements} = useContext(TargetContext)
+  const [hasLayedOut, setHasLayedOut] = useState(false)
   const targetRef = useRef<View>(null)
+  const containerRef = useContext(TooltipProviderContext)
+  const keyboardIsOpen = useIsKeyboardVisible()
 
   useEffect(() => {
-    if (!shouldMeasure) return
+    if (!shouldMeasure || !hasLayedOut) return
     /*
      * Once opened, measure the dimensions and position of the target
      */
-    targetRef.current?.measure((_x, _y, width, height, pageX, pageY) => {
+
-      if (pageX !== undefined && pageY !== undefined && width && height) {
+    if (containerRef?.current) {
-        setTargetMeasurements({x: pageX, y: pageY, width, height})
+      targetRef.current?.measureLayout(
+        containerRef.current,
+        (x, y, width, height) => {
+          if (x !== undefined && y !== undefined && width && height) {
+            setTargetMeasurements({x, y, width, height})
+          }
+        },
+      )
+    } else {
+      targetRef.current?.measure((_x, _y, width, height, x, y) => {
+        if (x !== undefined && y !== undefined && width && height) {
+          setTargetMeasurements({x, y, width, height})
         }
       })
-  }, [shouldMeasure, setTargetMeasurements])
+    }
+  }, [
+    shouldMeasure,
+    setTargetMeasurements,
+    hasLayedOut,
+    containerRef,
+    keyboardIsOpen,
+  ])
 
   return (
-    <View collapsable={false} ref={targetRef}>
+    <View
+      collapsable={false}
+      ref={targetRef}
+      onLayout={() => setHasLayedOut(true)}>
       {children}
     </View>
   )
@@ -150,12 +203,15 @@ export function Content({
 }) {
   const {position, visible, onVisibleChange} = useContext(TooltipContext)
   const {targetMeasurements} = useContext(TargetContext)
+  const isWithinProvider = !!useContext(TooltipProviderContext)
   const requestClose = useCallback(() => {
     onVisibleChange(false)
   }, [onVisibleChange])
 
   if (!visible || !targetMeasurements) return null
 
+  const Portal = isWithinProvider ? TooltipPortal.Portal : RootPortal
+
   return (
     <Portal>
       <Bubble

src/components/Tooltip/index.web.tsx

@@ -11,14 +11,19 @@ import {
 } from '#/components/Tooltip/const'
 import {Text} from '#/components/Typography'
 
+// Portal Provider on native, but we actually don't need to do anything here
+export function Provider({children}: {children: React.ReactNode}) {
+  return <>{children}</>
+}
+Provider.displayName = 'TooltipProvider'
+
 type TooltipContextType = {
   position: 'top' | 'bottom'
   onVisibleChange: (open: boolean) => void
 }
 
-const TooltipContext = createContext<TooltipContextType>({
+const TooltipContext = createContext<Pick<TooltipContextType, 'position'>>({
   position: 'bottom',
-  onVisibleChange: () => {},
 })
 TooltipContext.displayName = 'TooltipContext'
 
@@ -33,10 +38,7 @@ export function Outer({
   visible: boolean
   onVisibleChange: (visible: boolean) => void
 }) {
-  const ctx = useMemo(
+  const ctx = useMemo(() => ({position}), [position])
-    () => ({position, onVisibleChange}),
-    [position, onVisibleChange],
-  )
   return (
     <Popover.Root open={visible} onOpenChange={onVisibleChange}>
       <TooltipContext.Provider value={ctx}>{children}</TooltipContext.Provider>
@@ -60,7 +62,7 @@ export function Content({
   label: string
 }) {
   const t = useTheme()
-  const {position, onVisibleChange} = useContext(TooltipContext)
+  const {position} = useContext(TooltipContext)
   return (
     <Popover.Portal>
       <Popover.Content
@@ -69,7 +71,11 @@ export function Content({
         side={position}
         sideOffset={4}
         collisionPadding={MIN_EDGE_SPACE}
-        onInteractOutside={() => onVisibleChange(false)}
+        onInteractOutside={evt => {
+          if (evt.type === 'dismissableLayer.focusOutside') {
+            evt.preventDefault()
+          }
+        }}
         style={flatten([
           a.rounded_sm,
           select(t.name, {

src/components/WhoCanReply.tsx

@@ -1,4 +1,4 @@
-import {Fragment, useMemo} from 'react'
+import {Fragment, useMemo, useRef} from 'react'
 import {
   Keyboard,
   Platform,
@@ -22,7 +22,7 @@ import {
   type ThreadgateAllowUISetting,
   threadgateViewToAllowUISetting,
 } from '#/state/queries/threadgate'
-import {atoms as a, useTheme, web} from '#/alf'
+import {atoms as a, native, useTheme, web} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {useDialogControl} from '#/components/Dialog'
@@ -30,13 +30,13 @@ import {
   PostInteractionSettingsDialog,
   usePrefetchPostInteractionSettings,
 } from '#/components/dialogs/PostInteractionSettingsDialog'
-import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
+import {TinyChevronBottom_Stroke2_Corner0_Rounded as TinyChevronDownIcon} from '#/components/icons/Chevron'
-import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe'
+import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSignIcon} from '#/components/icons/CircleBanSign'
-import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
+import {Earth_Stroke2_Corner0_Rounded as EarthIcon} from '#/components/icons/Globe'
+import {Group3_Stroke2_Corner0_Rounded as GroupIcon} from '#/components/icons/Group'
 import {InlineLinkText} from '#/components/Link'
 import {Text} from '#/components/Typography'
 import * as bsky from '#/types/bsky'
-import {PencilLine_Stroke2_Corner0_Rounded as PencilLine} from './icons/Pencil'
 
 interface WhoCanReplyProps {
   post: AppBskyFeedDefs.PostView
@@ -69,6 +69,11 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
     postUri: post.uri,
     rootPostUri: rootUri,
   })
+  const prefetchPromise = useRef<Promise<void>>(Promise.resolve())
+
+  const prefetch = () => {
+    prefetchPromise.current = prefetchPostInteractionSettings()
+  }
 
   const anyoneCanReply =
     settings.length === 1 && settings[0].type === 'everybody'
@@ -84,7 +89,14 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
       Keyboard.dismiss()
     }
     if (isThreadAuthor) {
+      // wait on prefetch if it manages to resolve in under 200ms
+      // otherwise, proceed immediately and show the spinner -sfn
+      Promise.race([
+        prefetchPromise.current,
+        new Promise(res => setTimeout(res, 200)),
+      ]).finally(() => {
         editDialogControl.open()
+      })
     } else {
       infoDialogControl.open()
     }
@@ -100,18 +112,27 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
         {...(isThreadAuthor
           ? Platform.select({
               web: {
-                onHoverIn: prefetchPostInteractionSettings,
+                onHoverIn: prefetch,
               },
               native: {
-                onPressIn: prefetchPostInteractionSettings,
+                onPressIn: prefetch,
               },
             })
           : {})}
         hitSlop={HITSLOP_10}>
-        {({hovered}) => (
+        {({hovered, focused, pressed}) => (
-          <View style={[a.flex_row, a.align_center, a.gap_xs, style]}>
+          <View
+            style={[
+              a.flex_row,
+              a.align_center,
+              a.gap_xs,
+              (hovered || focused || pressed) && native({opacity: 0.5}),
+              style,
+            ]}>
             <Icon
-              color={t.palette.contrast_400}
+              color={
+                isThreadAuthor ? t.palette.primary_500 : t.palette.contrast_400
+              }
               width={16}
               settings={settings}
             />
@@ -119,14 +140,16 @@ export function WhoCanReply({post, isThreadAuthor, style}: WhoCanReplyProps) {
               style={[
                 a.text_sm,
                 a.leading_tight,
-                t.atoms.text_contrast_medium,
+                isThreadAuthor
-                hovered && a.underline,
+                  ? {color: t.palette.primary_500}
+                  : t.atoms.text_contrast_medium,
+                (hovered || focused || pressed) && web(a.underline),
               ]}>
               {description}
             </Text>
 
             {isThreadAuthor && (
-              <PencilLine width={12} fill={t.palette.primary_500} />
+              <TinyChevronDownIcon width={8} fill={t.palette.primary_500} />
             )}
           </View>
         )}
@@ -164,7 +187,11 @@ function Icon({
     settings.length === 0 ||
     settings.every(setting => setting.type === 'everybody')
   const isNobody = !!settings.find(gate => gate.type === 'nobody')
-  const IconComponent = isEverybody ? Earth : isNobody ? CircleBanSign : Group
+  const IconComponent = isEverybody
+    ? EarthIcon
+    : isNobody
+      ? CircleBanSignIcon
+      : GroupIcon
   return <IconComponent fill={color} width={width} />
 }
 

src/components/activity-notifications/SubscribeProfileButton.tsx

@@ -1,4 +1,4 @@
-import {useCallback} from 'react'
+import {useCallback, useEffect, useState} from 'react'
 import {type ModerationOpts} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -27,8 +27,21 @@ export function SubscribeProfileButton({
   const subscribeDialogControl = useDialogControl()
   const [activitySubscriptionsNudged, setActivitySubscriptionsNudged] =
     useActivitySubscriptionsNudged()
+  const [showTooltip, setShowTooltip] = useState(false)
 
-  const onDismissTooltip = () => {
+  useEffect(() => {
+    if (!activitySubscriptionsNudged) {
+      const timeout = setTimeout(() => {
+        setShowTooltip(true)
+      }, 500)
+      return () => clearTimeout(timeout)
+    }
+  }, [activitySubscriptionsNudged])
+
+  const onDismissTooltip = (visible: boolean) => {
+    if (visible) return
+
+    setShowTooltip(false)
     setActivitySubscriptionsNudged(true)
   }
 
@@ -56,7 +69,7 @@ export function SubscribeProfileButton({
   return (
     <>
       <Tooltip.Outer
-        visible={!activitySubscriptionsNudged}
+        visible={showTooltip}
         onVisibleChange={onDismissTooltip}
         position="bottom">
         <Tooltip.Target>
@@ -65,7 +78,6 @@ export function SubscribeProfileButton({
             testID="dmBtn"
             size="small"
             color="secondary"
-            variant="solid"
             shape="round"
             label={_(msg`Get notified when ${name} posts`)}
             onPress={wrappedOnPress}>

src/components/dialogs/PostInteractionSettingsDialog.tsx

@@ -1,16 +1,17 @@
-import React from 'react'
+import {useCallback, useMemo, useState} from 'react'
-import {type StyleProp, View, type ViewStyle} from 'react-native'
+import {LayoutAnimation, Text as NestedText, View} from 'react-native'
 import {
   type AppBskyFeedDefs,
   type AppBskyFeedPostgate,
   AtUri,
 } from '@atproto/api'
-import {msg, Trans} from '@lingui/macro'
+import {msg, Plural, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 import {useQueryClient} from '@tanstack/react-query'
-import isEqual from 'lodash.isequal'
 
+import {useHaptics} from '#/lib/haptics'
 import {logger} from '#/logger'
+import {isIOS} from '#/platform/detection'
 import {STALE} from '#/state/queries'
 import {useMyListsQuery} from '#/state/queries/my-lists'
 import {useGetPost} from '#/state/queries/post'
@@ -37,13 +38,17 @@ import {
 } from '#/state/queries/usePostThread'
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
-import {atoms as a, useTheme} from '#/alf'
+import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {atoms as a, useTheme, web} 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 {
+  ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon,
+  ChevronTop_Stroke2_Corner0_Rounded as ChevronUpIcon,
+} from '#/components/icons/Chevron'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '#/components/icons/CircleInfo'
+import {CloseQuote_Stroke2_Corner1_Rounded as QuoteIcon} from '#/components/icons/Quote'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 
@@ -52,6 +57,10 @@ export type PostInteractionSettingsFormProps = {
   onSave: () => void
   isSaving?: boolean
 
+  isDirty?: boolean
+  persist?: boolean
+  onChangePersist?: (v: boolean) => void
+
   postgate: AppBskyFeedPostgate.Record
   onChangePostgate: (v: AppBskyFeedPostgate.Record) => void
 
@@ -61,57 +70,39 @@ export type PostInteractionSettingsFormProps = {
   replySettingsDisabled?: boolean
 }
 
+/**
+ * Threadgate settings dialog. Used in the composer.
+ */
 export function PostInteractionSettingsControlledDialog({
   control,
   ...rest
 }: PostInteractionSettingsFormProps & {
   control: Dialog.DialogControlProps
 }) {
-  const t = useTheme()
-  const {_} = useLingui()
-
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer
+      control={control}
+      nativeOptions={{
+        preventExpansion: true,
+        preventDismiss: rest.isDirty && rest.persist,
+      }}>
       <Dialog.Handle />
-      <Dialog.ScrollableInner
+      <DialogInner {...rest} />
-        label={_(msg`Edit post interaction settings`)}
-        style={[{maxWidth: 500}, a.w_full]}>
-        <View style={[a.gap_md]}>
-          <Header />
-          <PostInteractionSettingsForm {...rest} />
-          <Text
-            style={[
-              a.pt_sm,
-              a.text_sm,
-              a.leading_snug,
-              t.atoms.text_contrast_medium,
-            ]}>
-            <Trans>
-              You can set default interaction settings in{' '}
-              <Text style={[a.font_semi_bold, t.atoms.text_contrast_medium]}>
-                Settings &rarr; Moderation &rarr; Interaction settings
-              </Text>
-              .
-            </Trans>
-          </Text>
-        </View>
-        <Dialog.Close />
-      </Dialog.ScrollableInner>
     </Dialog.Outer>
   )
 }
 
-export function Header() {
+function DialogInner(props: Omit<PostInteractionSettingsFormProps, 'control'>) {
+  const {_} = useLingui()
+
   return (
-    <View style={[a.gap_md, a.pb_sm]}>
+    <Dialog.ScrollableInner
-      <Text style={[a.text_2xl, a.font_semi_bold]}>
+      label={_(msg`Edit post interaction settings`)}
-        <Trans>Post interaction settings</Trans>
+      style={[web({maxWidth: 400}), a.w_full]}>
-      </Text>
+      <Header />
-      <Text style={[a.text_md, a.pb_xs]}>
+      <PostInteractionSettingsForm {...props} />
-        <Trans>Customize who can interact with this post.</Trans>
+      <Dialog.Close />
-      </Text>
+    </Dialog.ScrollableInner>
-      <Divider />
-    </View>
   )
 }
 
@@ -134,12 +125,17 @@ export type PostInteractionSettingsDialogProps = {
   initialThreadgateView?: AppBskyFeedDefs.ThreadgateView
 }
 
+/**
+ * Threadgate settings dialog. Used in the thread.
+ */
 export function PostInteractionSettingsDialog(
   props: PostInteractionSettingsDialogProps,
 ) {
   const postThreadContext = usePostThreadContext()
   return (
-    <Dialog.Outer control={props.control}>
+    <Dialog.Outer
+      control={props.control}
+      nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <PostThreadContextProvider context={postThreadContext}>
         <PostInteractionSettingsDialogControlledInner {...props} />
@@ -153,7 +149,7 @@ export function PostInteractionSettingsDialogControlledInner(
 ) {
   const {_} = useLingui()
   const {currentAccount} = useSession()
-  const [isSaving, setIsSaving] = React.useState(false)
+  const [isSaving, setIsSaving] = useState(false)
 
   const {data: threadgateViewLoaded, isLoading: isLoadingThreadgate} =
     useThreadgateViewQuery({postUri: props.rootPostUri})
@@ -165,28 +161,28 @@ export function PostInteractionSettingsDialogControlledInner(
   const {mutateAsync: setThreadgateAllow} = useSetThreadgateAllowMutation()
 
   const [editedPostgate, setEditedPostgate] =
-    React.useState<AppBskyFeedPostgate.Record>()
+    useState<AppBskyFeedPostgate.Record>()
   const [editedAllowUISettings, setEditedAllowUISettings] =
-    React.useState<ThreadgateAllowUISetting[]>()
+    useState<ThreadgateAllowUISetting[]>()
 
   const isLoading = isLoadingThreadgate || isLoadingPostgate
   const threadgateView = threadgateViewLoaded || props.initialThreadgateView
-  const isThreadgateOwnedByViewer = React.useMemo(() => {
+  const isThreadgateOwnedByViewer = useMemo(() => {
     return currentAccount?.did === new AtUri(props.rootPostUri).host
   }, [props.rootPostUri, currentAccount?.did])
 
-  const postgateValue = React.useMemo(() => {
+  const postgateValue = useMemo(() => {
     return (
       editedPostgate || postgate || createPostgateRecord({post: props.postUri})
     )
   }, [postgate, editedPostgate, props.postUri])
-  const allowUIValue = React.useMemo(() => {
+  const allowUIValue = useMemo(() => {
     return (
       editedAllowUISettings || threadgateViewToAllowUISetting(threadgateView)
     )
   }, [threadgateView, editedAllowUISettings])
 
-  const onSave = React.useCallback(async () => {
+  const onSave = useCallback(async () => {
     if (!editedPostgate && !editedAllowUISettings) {
       props.control.close()
       return
@@ -248,15 +244,24 @@ export function PostInteractionSettingsDialogControlledInner(
   return (
     <Dialog.ScrollableInner
       label={_(msg`Edit post interaction settings`)}
-      style={[{maxWidth: 500}, a.w_full]}>
+      style={[web({maxWidth: 400}), a.w_full]}>
-      <View style={[a.gap_md]}>
-        <Header />
-
       {isLoading ? (
-          <View style={[a.flex_1, a.py_4xl, a.align_center, a.justify_center]}>
+        <View
+          style={[
+            a.flex_1,
+            a.py_5xl,
+            a.gap_md,
+            a.align_center,
+            a.justify_center,
+          ]}>
           <Loader size="xl" />
+          <Text style={[a.italic, a.text_center]}>
+            <Trans>Loading post interaction settings...</Trans>
+          </Text>
         </View>
       ) : (
+        <>
+          <Header />
           <PostInteractionSettingsForm
             replySettingsDisabled={!isThreadgateOwnedByViewer}
             isSaving={isSaving}
@@ -266,8 +271,9 @@ export function PostInteractionSettingsDialogControlledInner(
             threadgateAllowUISettings={allowUIValue}
             onChangeThreadgateAllowUISettings={setEditedAllowUISettings}
           />
+        </>
       )}
-      </View>
+      <Dialog.Close />
     </Dialog.ScrollableInner>
   )
 }
@@ -281,11 +287,20 @@ export function PostInteractionSettingsForm({
   threadgateAllowUISettings,
   onChangeThreadgateAllowUISettings,
   replySettingsDisabled,
+  isDirty,
+  persist,
+  onChangePersist,
 }: PostInteractionSettingsFormProps) {
   const t = useTheme()
   const {_} = useLingui()
-  const {data: lists} = useMyListsQuery('curate')
+  const playHaptic = useHaptics()
-  const [quotesEnabled, setQuotesEnabled] = React.useState(
+  const [showLists, setShowLists] = useState(false)
+  const {
+    data: lists,
+    isPending: isListsPending,
+    isError: isListsError,
+  } = useMyListsQuery('curate')
+  const [quotesEnabled, setQuotesEnabled] = useState(
     !(
       postgate.embeddingRules &&
       postgate.embeddingRules.find(
@@ -294,27 +309,7 @@ export function PostInteractionSettingsForm({
     ),
   )
 
-  const onPressAudience = (setting: ThreadgateAllowUISetting) => {
+  const onChangeQuotesEnabled = useCallback(
-    // 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)
-    }
-    if (newSelected.length === 0) {
-      newSelected.push({type: 'everybody'})
-    }
-
-    onChangeThreadgateAllowUISettings(newSelected)
-  }
-
-  const onChangeQuotesEnabled = React.useCallback(
     (enabled: boolean) => {
       setQuotesEnabled(enabled)
       onChangePostgate(
@@ -330,36 +325,62 @@ export function PostInteractionSettingsForm({
   const noOneCanReply = !!threadgateAllowUISettings.find(
     v => v.type === 'nobody',
   )
+  const everyoneCanReply = !!threadgateAllowUISettings.find(
+    v => v.type === 'everybody',
+  )
+  const numberOfListsSelected = threadgateAllowUISettings.filter(
+    v => v.type === 'list',
+  ).length
+
+  const toggleGroupValues = useMemo(() => {
+    const values: string[] = []
+    for (const setting of threadgateAllowUISettings) {
+      switch (setting.type) {
+        case 'everybody':
+        case 'nobody':
+          // no granularity, early return with nothing
+          return []
+        case 'followers':
+          values.push('followers')
+          break
+        case 'following':
+          values.push('following')
+          break
+        case 'mention':
+          values.push('mention')
+          break
+        case 'list':
+          values.push(`list:${setting.list}`)
+          break
+        default:
+          break
+      }
+    }
+    return values
+  }, [threadgateAllowUISettings])
+
+  const toggleGroupOnChange = (values: string[]) => {
+    const settings: ThreadgateAllowUISetting[] = []
+
+    if (values.length === 0) {
+      settings.push({type: 'everybody'})
+    } else {
+      for (const value of values) {
+        if (value.startsWith('list:')) {
+          const listId = value.slice('list:'.length)
+          settings.push({type: 'list', list: listId})
+        } else {
+          settings.push({type: value as 'followers' | 'following' | 'mention'})
+        }
+      }
+    }
+
+    onChangeThreadgateAllowUISettings(settings)
+  }
 
   return (
-    <View>
+    <View style={[a.flex_1, a.gap_lg]}>
-      <View style={[a.flex_1, a.gap_md]}>
       <View style={[a.gap_lg]}>
-          <View style={[a.gap_sm]}>
-            <Text style={[a.font_semi_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]}>
-                <Trans>Allow quote posts</Trans>
-              </Text>
-              <Toggle.Switch />
-            </Toggle.Item>
-          </View>
-
-          <Divider />
-
         {replySettingsDisabled && (
           <View
             style={[
@@ -373,11 +394,7 @@ export function PostInteractionSettingsForm({
             ]}>
             <CircleInfo fill={t.atoms.text_contrast_low.color} />
             <Text
-                style={[
+              style={[a.flex_1, a.leading_snug, t.atoms.text_contrast_medium]}>
-                  a.flex_1,
-                  a.leading_snug,
-                  t.atoms.text_contrast_medium,
-                ]}>
               <Trans>
                 Reply settings are chosen by the author of the thread
               </Trans>
@@ -385,174 +402,270 @@ export function PostInteractionSettingsForm({
           </View>
         )}
 
-          <View
+        <View style={[a.gap_sm, {opacity: replySettingsDisabled ? 0.3 : 1}]}>
-            style={[
+          <Text style={[a.text_md, a.font_medium]}>
-              a.gap_sm,
+            <Trans>Who can reply</Trans>
-              {
-                opacity: replySettingsDisabled ? 0.3 : 1,
-              },
-            ]}>
-            <Text style={[a.font_semi_bold, a.text_lg]}>
-              <Trans>Reply settings</Trans>
           </Text>
 
-            <Text style={[a.pt_sm, t.atoms.text_contrast_medium]}>
+          <Toggle.Group
-              <Trans>Allow replies from:</Trans>
+            label={_(msg`Set who can reply to your post`)}
-            </Text>
+            type="radio"
-
+            maxSelections={1}
-            <View style={[a.flex_row, a.gap_sm]}>
+            disabled={replySettingsDisabled}
-              <Selectable
+            values={
-                label={_(msg`Everybody`)}
+              everyoneCanReply ? ['everyone'] : noOneCanReply ? ['nobody'] : []
-                isSelected={
-                  !!threadgateAllowUISettings.find(v => v.type === 'everybody')
             }
-                onPress={() =>
+            onChange={val => {
+              if (val.includes('everyone')) {
                 onChangeThreadgateAllowUISettings([{type: 'everybody'}])
-                }
+              } else if (val.includes('nobody')) {
-                style={{flex: 1}}
-                disabled={replySettingsDisabled}
-              />
-              <Selectable
-                label={_(msg`Nobody`)}
-                isSelected={noOneCanReply}
-                onPress={() =>
                 onChangeThreadgateAllowUISettings([{type: 'nobody'}])
+              } else {
+                onChangeThreadgateAllowUISettings([{type: 'mention'}])
               }
-                style={{flex: 1}}
+            }}>
-                disabled={replySettingsDisabled}
+            <View style={[a.flex_row, a.gap_sm]}>
-              />
+              <Toggle.Item
+                name="everyone"
+                type="checkbox"
+                label={_(msg`Allow anyone to reply`)}
+                style={[a.flex_1]}>
+                {({selected}) => (
+                  <Toggle.Panel active={selected}>
+                    <Toggle.Radio />
+                    <Toggle.PanelText>
+                      <Trans>Anyone</Trans>
+                    </Toggle.PanelText>
+                  </Toggle.Panel>
+                )}
+              </Toggle.Item>
+              <Toggle.Item
+                name="nobody"
+                type="checkbox"
+                label={_(msg`Disable replies entirely`)}
+                style={[a.flex_1]}>
+                {({selected}) => (
+                  <Toggle.Panel active={selected}>
+                    <Toggle.Radio />
+                    <Toggle.PanelText>
+                      <Trans>Nobody</Trans>
+                    </Toggle.PanelText>
+                  </Toggle.Panel>
+                )}
+              </Toggle.Item>
             </View>
+          </Toggle.Group>
 
-            {!noOneCanReply && (
+          <Toggle.Group
-              <>
+            label={_(
-                <Text style={[a.pt_sm, t.atoms.text_contrast_medium]}>
+              msg`Set precisely which groups of people can reply to your post`,
-                  <Trans>Or combine these options:</Trans>
+            )}
-                </Text>
+            values={toggleGroupValues}
+            onChange={toggleGroupOnChange}
+            disabled={replySettingsDisabled}>
+            <Toggle.PanelGroup>
+              <Toggle.Item
+                name="followers"
+                type="checkbox"
+                label={_(msg`Allow your followers to reply`)}
+                hitSlop={0}>
+                {({selected}) => (
+                  <Toggle.Panel active={selected} adjacent="trailing">
+                    <Toggle.Checkbox />
+                    <Toggle.PanelText>
+                      <Trans>Your followers</Trans>
+                    </Toggle.PanelText>
+                  </Toggle.Panel>
+                )}
+              </Toggle.Item>
+              <Toggle.Item
+                name="following"
+                type="checkbox"
+                label={_(msg`Allow people you follow to reply`)}
+                hitSlop={0}>
+                {({selected}) => (
+                  <Toggle.Panel active={selected} adjacent="both">
+                    <Toggle.Checkbox />
+                    <Toggle.PanelText>
+                      <Trans>People you follow</Trans>
+                    </Toggle.PanelText>
+                  </Toggle.Panel>
+                )}
+              </Toggle.Item>
+              <Toggle.Item
+                name="mention"
+                type="checkbox"
+                label={_(msg`Allow people you mention to reply`)}
+                hitSlop={0}>
+                {({selected}) => (
+                  <Toggle.Panel active={selected} adjacent="both">
+                    <Toggle.Checkbox />
+                    <Toggle.PanelText>
+                      <Trans>People you mention</Trans>
+                    </Toggle.PanelText>
+                  </Toggle.Panel>
+                )}
+              </Toggle.Item>
 
-                <View style={[a.gap_sm]}>
+              <Button
-                  <Selectable
+                label={
-                    label={_(msg`Mentioned users`)}
+                  showLists
-                    isSelected={
+                    ? _(msg`Hide lists`)
-                      !!threadgateAllowUISettings.find(
+                    : _(msg`Show lists of users to select from`)
-                        v => v.type === 'mention',
-                      )
                 }
-                    onPress={() => onPressAudience({type: 'mention'})}
+                accessibilityHint={_(msg`Toggle showing lists`)}
-                    disabled={replySettingsDisabled}
+                accessibilityRole="togglebutton"
-                  />
+                hitSlop={0}
-                  <Selectable
+                onPress={() => {
-                    label={_(msg`Users you follow`)}
+                  playHaptic('Light')
-                    isSelected={
+                  if (isIOS && !showLists) {
-                      !!threadgateAllowUISettings.find(
+                    LayoutAnimation.configureNext({
-                        v => v.type === 'following',
+                      ...LayoutAnimation.Presets.linear,
-                      )
+                      duration: 175,
+                    })
                   }
-                    onPress={() => onPressAudience({type: 'following'})}
+                  setShowLists(s => !s)
-                    disabled={replySettingsDisabled}
+                }}>
+                <Toggle.Panel
+                  active={numberOfListsSelected > 0}
+                  adjacent={showLists ? 'both' : 'leading'}>
+                  <Toggle.PanelText>
+                    {numberOfListsSelected === 0 ? (
+                      <Trans>Select from your lists</Trans>
+                    ) : (
+                      <Trans>
+                        Select from your lists{' '}
+                        <NestedText style={[a.font_normal, a.italic]}>
+                          <Plural
+                            value={numberOfListsSelected}
+                            other="(# selected)"
                           />
-                  <Selectable
+                        </NestedText>
-                    label={_(msg`Your followers`)}
+                      </Trans>
-                    isSelected={
+                    )}
-                      !!threadgateAllowUISettings.find(
+                  </Toggle.PanelText>
-                        v => v.type === 'followers',
+                  <Toggle.PanelIcon
-                      )
+                    icon={showLists ? ChevronUpIcon : ChevronDownIcon}
-                    }
-                    onPress={() => onPressAudience({type: 'followers'})}
-                    disabled={replySettingsDisabled}
                   />
-                  {lists && lists.length > 0
+                </Toggle.Panel>
-                    ? lists.map(list => (
+              </Button>
-                        <Selectable
+              {showLists &&
+                (isListsPending ? (
+                  <Toggle.Panel>
+                    <Toggle.PanelText>
+                      <Trans>Loading lists...</Trans>
+                    </Toggle.PanelText>
+                  </Toggle.Panel>
+                ) : isListsError ? (
+                  <Toggle.Panel>
+                    <Toggle.PanelText>
+                      <Trans>
+                        An error occurred while loading your lists :/
+                      </Trans>
+                    </Toggle.PanelText>
+                  </Toggle.Panel>
+                ) : lists.length === 0 ? (
+                  <Toggle.Panel>
+                    <Toggle.PanelText>
+                      <Trans>You don't have any lists yet.</Trans>
+                    </Toggle.PanelText>
+                  </Toggle.Panel>
+                ) : (
+                  lists.map((list, i) => (
+                    <Toggle.Item
                       key={list.uri}
-                          label={_(msg`Users in "${list.name}"`)}
+                      name={`list:${list.uri}`}
-                          isSelected={
+                      type="checkbox"
-                            !!threadgateAllowUISettings.find(
+                      label={_(msg`Allow users in ${list.name} to reply`)}
-                              v => v.type === 'list' && v.list === list.uri,
+                      hitSlop={0}>
-                            )
+                      {({selected}) => (
-                          }
+                        <Toggle.Panel
-                          onPress={() =>
+                          active={selected}
-                            onPressAudience({type: 'list', list: list.uri})
+                          adjacent={
-                          }
+                            i === lists.length - 1 ? 'leading' : 'both'
-                          disabled={replySettingsDisabled}
+                          }>
+                          <Toggle.Checkbox />
+                          <UserAvatar
+                            size={24}
+                            type="list"
+                            avatar={list.avatar}
                           />
+                          <Toggle.PanelText>{list.name}</Toggle.PanelText>
+                        </Toggle.Panel>
+                      )}
+                    </Toggle.Item>
                   ))
-                    : // No loading states to avoid jumps for the common case (no lists)
+                ))}
-                      null}
+            </Toggle.PanelGroup>
+          </Toggle.Group>
         </View>
-              </>
+      </View>
+
+      <Toggle.Item
+        name="quoteposts"
+        type="checkbox"
+        label={
+          quotesEnabled
+            ? _(msg`Disable quote posts of this post.`)
+            : _(msg`Enable quote posts of this post.`)
+        }
+        value={quotesEnabled}
+        onChange={onChangeQuotesEnabled}>
+        {({selected}) => (
+          <Toggle.Panel active={selected}>
+            <Toggle.PanelText icon={QuoteIcon}>
+              <Trans>Allow quote posts</Trans>
+            </Toggle.PanelText>
+            <Toggle.Switch />
+          </Toggle.Panel>
+        )}
+      </Toggle.Item>
+
+      {typeof persist !== 'undefined' && (
+        <View style={[{minHeight: 24}, a.justify_center]}>
+          {isDirty ? (
+            <Toggle.Item
+              name="persist"
+              type="checkbox"
+              label={_(msg`Save these options for next time`)}
+              value={persist}
+              onChange={() => onChangePersist?.(!persist)}>
+              <Toggle.Checkbox />
+              <Toggle.LabelText
+                style={[a.text_md, a.font_normal, t.atoms.text]}>
+                <Trans>Save these options for next time</Trans>
+              </Toggle.LabelText>
+            </Toggle.Item>
+          ) : (
+            <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
+              <Trans>These are your default settings</Trans>
+            </Text>
           )}
         </View>
-        </View>
+      )}
-      </View>
 
       <Button
         disabled={!canSave || isSaving}
         label={_(msg`Save`)}
         onPress={onSave}
         color="primary"
-        size="large"
+        size="large">
-        variant="solid"
+        <ButtonText>
-        style={a.mt_xl}>
+          <Trans>Save</Trans>
-        <ButtonText>{_(msg`Save`)}</ButtonText>
+        </ButtonText>
-        {isSaving && <ButtonIcon icon={Loader} position="right" />}
+        {isSaving && <ButtonIcon icon={Loader} />}
       </Button>
     </View>
   )
 }
 
-function Selectable({
+function Header() {
-  label,
-  isSelected,
-  onPress,
-  style,
-  disabled,
-}: {
-  label: string
-  isSelected: boolean
-  onPress: () => void
-  style?: StyleProp<ViewStyle>
-  disabled?: boolean
-}) {
-  const t = useTheme()
   return (
-    <Button
+    <View style={[a.pb_lg]}>
-      disabled={disabled}
+      <Text style={[a.text_2xl, a.font_bold]}>
-      onPress={onPress}
+        <Trans>Post interaction settings</Trans>
-      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,
-            {minHeight: 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_semi_bold]}>
-            {label}
       </Text>
-          {isSelected ? (
-            <Check size="sm" fill={t.palette.primary_500} />
-          ) : (
-            <View />
-          )}
     </View>
-      )}
-    </Button>
   )
 }
 
@@ -567,7 +680,7 @@ export function usePrefetchPostInteractionSettings({
   const agent = useAgent()
   const getPost = useGetPost()
 
-  return React.useCallback(async () => {
+  return useCallback(async () => {
     try {
       await Promise.all([
         queryClient.prefetchQuery({

src/components/forms/Toggle/Panel.tsx

@@ -0,0 +1,120 @@
+import {createContext, useContext} from 'react'
+import {View, type ViewStyle} from 'react-native'
+
+import {atoms as a, tokens, useTheme} from '#/alf'
+import {type Props as SVGIconProps} from '#/components/icons/common'
+import {Text} from '#/components/Typography'
+
+const PanelContext = createContext<{active: boolean}>({active: false})
+
+/**
+ * A nice container for Toggles. See the Threadgate dialog for an example.
+ */
+export function Panel({
+  children,
+  active = false,
+  adjacent,
+}: {
+  children: React.ReactNode
+  active?: boolean
+  adjacent?: 'leading' | 'trailing' | 'both'
+}) {
+  const t = useTheme()
+
+  const leading = adjacent === 'leading' || adjacent === 'both'
+  const trailing = adjacent === 'trailing' || adjacent === 'both'
+  const rounding = {
+    borderTopLeftRadius: leading
+      ? tokens.borderRadius.xs
+      : tokens.borderRadius.md,
+    borderTopRightRadius: leading
+      ? tokens.borderRadius.xs
+      : tokens.borderRadius.md,
+    borderBottomLeftRadius: trailing
+      ? tokens.borderRadius.xs
+      : tokens.borderRadius.md,
+    borderBottomRightRadius: trailing
+      ? tokens.borderRadius.xs
+      : tokens.borderRadius.md,
+  } satisfies ViewStyle
+
+  return (
+    <View
+      style={[
+        a.w_full,
+        a.flex_row,
+        a.align_center,
+        a.gap_sm,
+        a.px_md,
+        a.py_md,
+        {minHeight: tokens.space._2xl + tokens.space.md * 2},
+        rounding,
+        active
+          ? {backgroundColor: t.palette.primary_50}
+          : t.atoms.bg_contrast_50,
+      ]}>
+      <PanelContext value={{active}}>{children}</PanelContext>
+    </View>
+  )
+}
+
+export function PanelText({
+  children,
+  icon,
+}: {
+  children: React.ReactNode
+  icon?: React.ComponentType<SVGIconProps>
+}) {
+  const t = useTheme()
+  const ctx = useContext(PanelContext)
+
+  const text = (
+    <Text
+      style={[
+        a.text_md,
+        a.flex_1,
+        ctx.active
+          ? [a.font_medium, t.atoms.text]
+          : [t.atoms.text_contrast_medium],
+      ]}>
+      {children}
+    </Text>
+  )
+
+  if (icon) {
+    // eslint-disable-next-line bsky-internal/avoid-unwrapped-text
+    return (
+      <View style={[a.flex_row, a.align_center, a.gap_xs, a.flex_1]}>
+        <PanelIcon icon={icon} />
+        {text}
+      </View>
+    )
+  }
+
+  return text
+}
+
+export function PanelIcon({
+  icon: Icon,
+}: {
+  icon: React.ComponentType<SVGIconProps>
+}) {
+  const t = useTheme()
+  const ctx = useContext(PanelContext)
+  return (
+    <Icon
+      style={[
+        ctx.active ? t.atoms.text : t.atoms.text_contrast_medium,
+        a.flex_shrink_0,
+      ]}
+      size="md"
+    />
+  )
+}
+
+/**
+ * A group of panels. TODO: auto-leading/trailing
+ */
+export function PanelGroup({children}: {children: React.ReactNode}) {
+  return <View style={[a.w_full, a.gap_2xs]}>{children}</View>
+}

src/components/forms/Toggle/index.tsx

@@ -1,12 +1,20 @@
-import React from 'react'
+import {createContext, useCallback, useContext, useMemo} from 'react'
-import {Pressable, type StyleProp, View, type ViewStyle} from 'react-native'
+import {
-import Animated, {LinearTransition} from 'react-native-reanimated'
+  Pressable,
+  type PressableProps,
+  type StyleProp,
+  View,
+  type ViewStyle,
+} from 'react-native'
+import Animated, {Easing, LinearTransition} from 'react-native-reanimated'
 
 import {HITSLOP_10} from '#/lib/constants'
+import {useHaptics} from '#/lib/haptics'
 import {isNative} from '#/platform/detection'
 import {
   atoms as a,
   native,
+  platform,
   type TextStyleProp,
   useTheme,
   type ViewStyleProp,
@@ -15,6 +23,8 @@ import {useInteractionState} from '#/components/hooks/useInteractionState'
 import {CheckThick_Stroke2_Corner0_Rounded as Checkmark} from '#/components/icons/Check'
 import {Text} from '#/components/Typography'
 
+export * from './Panel'
+
 export type ItemState = {
   name: string
   selected: boolean
@@ -25,7 +35,7 @@ export type ItemState = {
   focused: boolean
 }
 
-const ItemContext = React.createContext<ItemState>({
+const ItemContext = createContext<ItemState>({
   name: '',
   selected: false,
   disabled: false,
@@ -36,7 +46,7 @@ const ItemContext = React.createContext<ItemState>({
 })
 ItemContext.displayName = 'ToggleItemContext'
 
-const GroupContext = React.createContext<{
+const GroupContext = createContext<{
   values: string[]
   disabled: boolean
   type: 'radio' | 'checkbox'
@@ -70,10 +80,11 @@ export type ItemProps = ViewStyleProp & {
   onChange?: (selected: boolean) => void
   isInvalid?: boolean
   children: ((props: ItemState) => React.ReactNode) | React.ReactNode
+  hitSlop?: PressableProps['hitSlop']
 }
 
 export function useItemContext() {
-  return React.useContext(ItemContext)
+  return useContext(ItemContext)
 }
 
 export function Group({
@@ -88,9 +99,8 @@ export function Group({
 }: GroupProps) {
   const groupRole = type === 'radio' ? 'radiogroup' : undefined
   const values = type === 'radio' ? providedValues.slice(0, 1) : providedValues
-  const [maxReached, setMaxReached] = React.useState(false)
 
-  const setFieldValue = React.useCallback<
+  const setFieldValue = useCallback<
     (props: {name: string; value: boolean}) => void
   >(
     ({name, value}) => {
@@ -105,25 +115,13 @@ export function Group({
     [type, onChange, values],
   )
 
-  React.useEffect(() => {
+  const maxReached = !!(
-    if (type === 'checkbox') {
+    type === 'checkbox' &&
-      if (
     maxSelections &&
-        values.length >= maxSelections &&
+    values.length >= maxSelections
-        maxReached === false
+  )
-      ) {
-        setMaxReached(true)
-      } else if (
-        maxSelections &&
-        values.length < maxSelections &&
-        maxReached === true
-      ) {
-        setMaxReached(false)
-      }
-    }
-  }, [type, values.length, maxSelections, maxReached, setMaxReached])
 
-  const context = React.useMemo(
+  const context = useMemo(
     () => ({
       values,
       type,
@@ -170,7 +168,7 @@ export function Item({
     disabled: groupDisabled,
     setFieldValue,
     maxSelectionsReached,
-  } = React.useContext(GroupContext)
+  } = useContext(GroupContext)
   const {
     state: hovered,
     onIn: onHoverIn,
@@ -182,19 +180,21 @@ export function Item({
     onOut: onPressOut,
   } = useInteractionState()
   const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
+  const playHaptic = useHaptics()
 
   const role = groupType === 'radio' ? 'radio' : type
   const selected = selectedValues.includes(name) || !!value
   const disabled =
     groupDisabled || itemDisabled || (!selected && maxSelectionsReached)
 
-  const onPress = React.useCallback(() => {
+  const onPress = useCallback(() => {
+    playHaptic('Light')
     const next = !selected
     setFieldValue({name, value: next})
     onChange?.(next)
-  }, [name, selected, onChange, setFieldValue])
+  }, [playHaptic, name, selected, onChange, setFieldValue])
 
-  const state = React.useMemo(
+  const state = useMemo(
     () => ({
       name,
       selected,
@@ -250,8 +250,8 @@ export function LabelText({
       style={[
         a.font_semi_bold,
         a.leading_tight,
+        a.user_select_none,
         {
-          userSelect: 'none',
           color: disabled
             ? t.atoms.text_contrast_low.color
             : t.atoms.text_contrast_high.color,
@@ -287,21 +287,26 @@ export function createSharedToggleStyles({
 
   if (selected) {
     base.push({
-      backgroundColor: t.palette.primary_25,
+      backgroundColor: t.palette.primary_500,
       borderColor: t.palette.primary_500,
     })
 
     if (hovered) {
       baseHover.push({
-        backgroundColor: t.palette.primary_100,
+        backgroundColor: t.palette.primary_400,
-        borderColor: t.palette.primary_600,
+        borderColor: t.palette.primary_400,
       })
     }
   } else {
+    base.push({
+      backgroundColor: t.palette.contrast_25,
+      borderColor: t.palette.contrast_100,
+    })
+
     if (hovered) {
       baseHover.push({
         backgroundColor: t.palette.contrast_50,
-        borderColor: t.palette.contrast_500,
+        borderColor: t.palette.contrast_200,
       })
     }
   }
@@ -318,6 +323,20 @@ export function createSharedToggleStyles({
         borderColor: t.palette.negative_600,
       })
     }
+
+    if (selected) {
+      base.push({
+        backgroundColor: t.palette.negative_500,
+        borderColor: t.palette.negative_500,
+      })
+
+      if (hovered) {
+        baseHover.push({
+          backgroundColor: t.palette.negative_400,
+          borderColor: t.palette.negative_400,
+        })
+      }
+    }
   }
 
   if (disabled) {
@@ -325,6 +344,13 @@ export function createSharedToggleStyles({
       backgroundColor: t.palette.contrast_100,
       borderColor: t.palette.contrast_400,
     })
+
+    if (selected) {
+      base.push({
+        backgroundColor: t.palette.primary_100,
+        borderColor: t.palette.contrast_400,
+      })
+    }
   }
 
   return {
@@ -350,66 +376,125 @@ export function Checkbox() {
       style={[
         a.justify_center,
         a.align_center,
-        a.rounded_xs,
         t.atoms.border_contrast_high,
+        a.transition_color,
         {
           borderWidth: 1,
           height: 24,
           width: 24,
+          borderRadius: 6,
         },
         baseStyles,
         hovered ? baseHoverStyles : {},
       ]}>
-      {selected ? <Checkmark size="xs" fill={t.palette.primary_500} /> : null}
+      {selected && <Checkmark width={14} fill={t.palette.white} />}
     </View>
   )
 }
 
 export function Switch() {
   const t = useTheme()
-  const {selected, hovered, focused, disabled, isInvalid} = useItemContext()
+  const {selected, hovered, disabled, isInvalid} = useItemContext()
-  const {baseStyles, baseHoverStyles, indicatorStyles} =
+  const {baseStyles, baseHoverStyles, indicatorStyles} = useMemo(() => {
-    createSharedToggleStyles({
+    const base: ViewStyle[] = []
-      theme: t,
+    const baseHover: ViewStyle[] = []
-      hovered,
+    const indicator: ViewStyle[] = []
-      focused,
+
-      selected,
+    if (selected) {
-      disabled,
+      base.push({
-      isInvalid,
+        backgroundColor: t.palette.primary_500,
       })
+
+      if (hovered) {
+        baseHover.push({
+          backgroundColor: t.palette.primary_400,
+        })
+      }
+    } else {
+      base.push({
+        backgroundColor: t.palette.contrast_200,
+      })
+
+      if (hovered) {
+        baseHover.push({
+          backgroundColor: t.palette.contrast_100,
+        })
+      }
+    }
+
+    if (isInvalid) {
+      base.push({
+        backgroundColor: t.palette.negative_200,
+      })
+
+      if (hovered) {
+        baseHover.push({
+          backgroundColor: t.palette.negative_100,
+        })
+      }
+
+      if (selected) {
+        base.push({
+          backgroundColor: t.palette.negative_500,
+        })
+
+        if (hovered) {
+          baseHover.push({
+            backgroundColor: t.palette.negative_400,
+          })
+        }
+      }
+    }
+
+    if (disabled) {
+      base.push({
+        backgroundColor: t.palette.contrast_50,
+      })
+
+      if (selected) {
+        base.push({
+          backgroundColor: t.palette.primary_100,
+        })
+      }
+    }
+
+    return {
+      baseStyles: base,
+      baseHoverStyles: disabled ? [] : baseHover,
+      indicatorStyles: indicator,
+    }
+  }, [t, hovered, disabled, selected, isInvalid])
+
   return (
     <View
       style={[
         a.relative,
         a.rounded_full,
         t.atoms.bg,
-        t.atoms.border_contrast_high,
         {
-          borderWidth: 1,
+          height: 28,
-          height: 24,
+          width: 48,
-          width: 36,
           padding: 3,
         },
+        a.transition_color,
         baseStyles,
         hovered ? baseHoverStyles : {},
       ]}>
       <Animated.View
-        layout={LinearTransition.duration(100)}
+        layout={LinearTransition.duration(
+          platform({
+            web: 100,
+            default: 200,
+          }),
+        ).easing(Easing.inOut(Easing.cubic))}
         style={[
           a.rounded_full,
           {
-            height: 16,
+            backgroundColor: t.palette.white,
-            width: 16,
+            height: 22,
-          },
+            width: 22,
-          selected
-            ? {
-                backgroundColor: t.palette.primary_500,
-                alignSelf: 'flex-end',
-              }
-            : {
-                backgroundColor: t.palette.contrast_400,
-                alignSelf: 'flex-start',
           },
+          selected ? {alignSelf: 'flex-end'} : {alignSelf: 'flex-start'},
           indicatorStyles,
         ]}
       />
@@ -420,7 +505,7 @@ export function Switch() {
 export function Radio() {
   const t = useTheme()
   const {selected, hovered, focused, disabled, isInvalid} =
-    React.useContext(ItemContext)
+    useContext(ItemContext)
   const {baseStyles, baseHoverStyles, indicatorStyles} =
     createSharedToggleStyles({
       theme: t,
@@ -437,29 +522,27 @@ export function Radio() {
         a.align_center,
         a.rounded_full,
         t.atoms.border_contrast_high,
+        a.transition_color,
         {
           borderWidth: 1,
-          height: 24,
+          height: 25,
-          width: 24,
+          width: 25,
+          margin: -1,
         },
         baseStyles,
         hovered ? baseHoverStyles : {},
       ]}>
-      {selected ? (
+      {selected && (
         <View
           style={[
             a.absolute,
             a.rounded_full,
-            {height: 16, width: 16},
+            {height: 12, width: 12},
-            selected
+            {backgroundColor: t.palette.white},
-              ? {
-                  backgroundColor: t.palette.primary_500,
-                }
-              : {},
             indicatorStyles,
           ]}
         />
-      ) : null}
+      )}
     </View>
   )
 }

src/components/icons/Chevron.tsx

@@ -19,3 +19,10 @@ export const ChevronBottom_Stroke2_Corner0_Rounded = createSinglePathSVG({
 export const ChevronTopBottom_Stroke2_Corner0_Rounded = createSinglePathSVG({
   path: 'M11.293 4.293a1 1 0 0 1 1.414 0l4 4a1 1 0 0 1-1.414 1.414L12 6.414 8.707 9.707a1 1 0 0 1-1.414-1.414l4-4Zm-4 10a1 1 0 0 1 1.414 0L12 17.586l3.293-3.293a1 1 0 0 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z',
 })
+
+/**
+ * NOTE: Use with size `2xs`
+ */
+export const TinyChevronBottom_Stroke2_Corner0_Rounded = createSinglePathSVG({
+  path: 'M10.928 18.882c.757.499 1.786.417 2.452-.25l9-9a1.953 1.953 0 0 0-2.76-2.76L12 14.493l-7.62-7.62a1.952 1.952 0 0 0-2.76 2.76l9 9 .308.25Z',
+})

src/components/icons/common.tsx

@@ -13,6 +13,7 @@ export type Props = {
 } & Omit<SvgProps, 'style' | 'size'>
 
 export const sizes = {
+  '2xs': 8,
   xs: 12,
   sm: 16,
   md: 20,

src/components/verification/VerificationsDialog.tsx

@@ -34,7 +34,7 @@ export function VerificationsDialog({
   verificationState: FullVerificationState
 }) {
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <Inner
         control={control}

src/lib/strings/time.ts

@@ -1,10 +1,14 @@
 import {type I18n} from '@lingui/core'
 
-export function niceDate(i18n: I18n, date: number | string | Date) {
+export function niceDate(
+  i18n: I18n,
+  date: number | string | Date,
+  dateStyle: 'short' | 'medium' | 'long' | 'full' = 'long',
+) {
   const d = new Date(date)
 
   return i18n.date(d, {
-    dateStyle: 'long',
+    dateStyle,
     timeStyle: 'short',
   })
 }

src/screens/PostThread/components/ThreadItemAnchor.tsx

@@ -570,7 +570,7 @@ function ExpandedPostDetails({
       <BackdatedPostIndicator post={post} />
       <View style={[a.flex_row, a.align_center, a.flex_wrap, a.gap_sm]}>
         <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
-          {niceDate(i18n, post.indexedAt)}
+          {niceDate(i18n, post.indexedAt, 'medium')}
         </Text>
         {isRootPost && (
           <WhoCanReply post={post} isThreadAuthor={isThreadAuthor} />

src/screens/Settings/components/SettingsList.tsx

@@ -194,6 +194,7 @@ export function ItemIcon({
    * also so that we can calculate transforms.
    */
   const iconSize = {
+    '2xs': 8,
     xs: 12,
     sm: 16,
     md: 20,

src/state/global-gesture-events/index.tsx

@@ -1,5 +1,5 @@
 import {createContext, useContext, useMemo, useRef, useState} from 'react'
-import {View} from 'react-native'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
 import {
   Gesture,
   GestureDetector,
@@ -29,8 +29,10 @@ Context.displayName = 'GlobalGestureEventsContext'
 
 export function GlobalGestureEventsProvider({
   children,
+  style,
 }: {
   children: React.ReactNode
+  style?: StyleProp<ViewStyle>
 }) {
   const refCount = useRef(0)
   const events = useMemo(() => new EventEmitter<GlobalGestureEvents>(), [])
@@ -73,7 +75,9 @@ export function GlobalGestureEventsProvider({
   return (
     <Context.Provider value={ctx}>
       <GestureDetector gesture={gesture}>
-        <View collapsable={false}>{children}</View>
+        <View collapsable={false} style={style}>
+          {children}
+        </View>
       </GestureDetector>
     </Context.Provider>
   )

src/state/queries/post-interaction-settings.ts

@@ -4,7 +4,13 @@ import {useMutation, useQueryClient} from '@tanstack/react-query'
 import {preferencesQueryKey} from '#/state/queries/preferences'
 import {useAgent} from '#/state/session'
 
-export function usePostInteractionSettingsMutation() {
+export function usePostInteractionSettingsMutation({
+  onError,
+  onSettled,
+}: {
+  onError?: (error: Error) => void
+  onSettled?: () => void
+} = {}) {
   const qc = useQueryClient()
   const agent = useAgent()
   return useMutation({
@@ -16,5 +22,7 @@ export function usePostInteractionSettingsMutation() {
         queryKey: preferencesQueryKey,
       })
     },
+    onError,
+    onSettled,
   })
 }

src/storage/hooks/threadgate-nudged.ts

@@ -0,0 +1,9 @@
+import {device, useStorage} from '#/storage'
+
+export function useThreadgateNudged() {
+  const [threadgateNudged = false, setThreadgateNudged] = useStorage(device, [
+    'threadgateNudged',
+  ])
+
+  return [threadgateNudged, setThreadgateNudged] as const
+}

src/storage/schema.ts

@@ -37,6 +37,7 @@ export type Device = {
   devMode: boolean
   demoMode: boolean
   activitySubscriptionsNudged?: boolean
+  threadgateNudged?: boolean
 
   /**
    * Policy update overlays. New IDs are required for each new announcement.

src/view/com/composer/labels/LabelsBtn.tsx

@@ -10,11 +10,12 @@ import {
   type SelfLabel,
 } from '#/lib/moderation'
 import {isWeb} from '#/platform/detection'
-import {atoms as a, native, useTheme, web} from '#/alf'
+import {atoms as a, useTheme, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import * as Toggle from '#/components/forms/Toggle'
 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check'
+import {TinyChevronBottom_Stroke2_Corner0_Rounded as TinyChevronIcon} from '#/components/icons/Chevron'
 import {Shield_Stroke2_Corner0_Rounded} from '#/components/icons/Shield'
 import {Text} from '#/components/Typography'
 
@@ -49,7 +50,6 @@ export function LabelsBtn({
   return (
     <>
       <Button
-        variant="solid"
         color="secondary"
         size="small"
         testID="labelsBtn"
@@ -60,13 +60,7 @@ export function LabelsBtn({
         label={_(msg`Content warnings`)}
         accessibilityHint={_(
           msg`Opens a dialog to add a content warning to your post`,
-        )}
+        )}>
-        style={[
-          native({
-            paddingHorizontal: 8,
-            paddingVertical: 6,
-          }),
-        ]}>
         <ButtonIcon icon={hasLabel ? Check : Shield_Stroke2_Corner0_Rounded} />
         <ButtonText numberOfLines={1}>
           {labels.length > 0 ? (
@@ -75,6 +69,7 @@ export function LabelsBtn({
             <Trans>Labels</Trans>
           )}
         </ButtonText>
+        <ButtonIcon icon={TinyChevronIcon} size="2xs" />
       </Button>
 
       <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>

src/view/com/composer/threadgate/ThreadgateBtn.tsx

@@ -1,17 +1,31 @@
+import {useEffect, useMemo, useState} from 'react'
 import {Keyboard, type StyleProp, type ViewStyle} from 'react-native'
 import {type AnimatedStyle} from 'react-native-reanimated'
 import {type AppBskyFeedPostgate} from '@atproto/api'
-import {msg} from '@lingui/macro'
+import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
+import deepEqual from 'lodash.isequal'
 
+import {isNetworkError} from '#/lib/strings/errors'
+import {logger} from '#/logger'
 import {isNative} from '#/platform/detection'
-import {type ThreadgateAllowUISetting} from '#/state/queries/threadgate'
+import {usePostInteractionSettingsMutation} from '#/state/queries/post-interaction-settings'
-import {native} from '#/alf'
+import {createPostgateRecord} from '#/state/queries/postgate/util'
+import {usePreferencesQuery} from '#/state/queries/preferences'
+import {
+  type ThreadgateAllowUISetting,
+  threadgateAllowUISettingToAllowRecordValue,
+  threadgateRecordToAllowUISetting,
+} from '#/state/queries/threadgate'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
 import {PostInteractionSettingsControlledDialog} from '#/components/dialogs/PostInteractionSettingsDialog'
-import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe'
+import {TinyChevronBottom_Stroke2_Corner0_Rounded as TinyChevronIcon} from '#/components/icons/Chevron'
-import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
+import {Earth_Stroke2_Corner0_Rounded as EarthIcon} from '#/components/icons/Globe'
+import {Group3_Stroke2_Corner0_Rounded as GroupIcon} from '#/components/icons/Group'
+import * as Tooltip from '#/components/Tooltip'
+import {Text} from '#/components/Typography'
+import {useThreadgateNudged} from '#/storage/hooks/threadgate-nudged'
 
 export function ThreadgateBtn({
   postgate,
@@ -29,15 +43,82 @@ export function ThreadgateBtn({
 }) {
   const {_} = useLingui()
   const control = Dialog.useDialogControl()
+  const [threadgateNudged, setThreadgateNudged] = useThreadgateNudged()
+  const [showTooltip, setShowTooltip] = useState(false)
+
+  useEffect(() => {
+    if (!threadgateNudged) {
+      const timeout = setTimeout(() => {
+        setShowTooltip(true)
+      }, 1000)
+      return () => clearTimeout(timeout)
+    }
+  }, [threadgateNudged])
+
+  const onDismissTooltip = (visible: boolean) => {
+    if (visible) return
+    setThreadgateNudged(true)
+    setShowTooltip(false)
+  }
+
+  const {data: preferences} = usePreferencesQuery()
+  const [persist, setPersist] = useState(false)
 
   const onPress = () => {
     if (isNative && Keyboard.isVisible()) {
       Keyboard.dismiss()
     }
 
+    setShowTooltip(false)
+    setThreadgateNudged(true)
+
     control.open()
   }
 
+  const prefThreadgateAllowUISettings = threadgateRecordToAllowUISetting({
+    $type: 'app.bsky.feed.threadgate',
+    post: '',
+    createdAt: new Date().toISOString(),
+    allow: preferences?.postInteractionSettings.threadgateAllowRules,
+  })
+  const prefPostgate = createPostgateRecord({
+    post: '',
+    embeddingRules:
+      preferences?.postInteractionSettings?.postgateEmbeddingRules || [],
+  })
+
+  const isDirty = useMemo(() => {
+    const everybody = [{type: 'everybody'}]
+    return (
+      !deepEqual(
+        threadgateAllowUISettings,
+        prefThreadgateAllowUISettings ?? everybody,
+      ) ||
+      !deepEqual(postgate.embeddingRules, prefPostgate?.embeddingRules ?? [])
+    )
+  }, [
+    prefThreadgateAllowUISettings,
+    prefPostgate,
+    threadgateAllowUISettings,
+    postgate,
+  ])
+
+  const {mutate: persistChanges, isPending: isSaving} =
+    usePostInteractionSettingsMutation({
+      onError: err => {
+        if (!isNetworkError(err)) {
+          logger.error('Failed to persist threadgate settings', {
+            safeMessage: err,
+          })
+        }
+      },
+      onSettled: () => {
+        control.close(() => {
+          setPersist(false)
+        })
+      },
+    })
+
   const anyoneCanReply =
     threadgateAllowUISettings.length === 1 &&
     threadgateAllowUISettings[0].type === 'everybody'
@@ -50,34 +131,54 @@ export function ThreadgateBtn({
 
   return (
     <>
+      <Tooltip.Outer
+        visible={showTooltip}
+        onVisibleChange={onDismissTooltip}
+        position="top">
+        <Tooltip.Target>
           <Button
-        variant="solid"
+            color={showTooltip ? 'primary_subtle' : 'secondary'}
-        color="secondary"
             size="small"
             testID="openReplyGateButton"
             onPress={onPress}
             label={label}
             accessibilityHint={_(
-          msg`Opens a dialog to choose who can reply to this thread`,
+              msg`Opens a dialog to choose who can interact with this post`,
-        )}
+            )}>
-        style={[
+            <ButtonIcon icon={anyoneCanInteract ? EarthIcon : GroupIcon} />
-          native({
-            paddingHorizontal: 8,
-            paddingVertical: 6,
-          }),
-        ]}>
-        <ButtonIcon icon={anyoneCanInteract ? Earth : Group} />
             <ButtonText numberOfLines={1}>{label}</ButtonText>
+            <ButtonIcon icon={TinyChevronIcon} size="2xs" />
           </Button>
+        </Tooltip.Target>
+        <Tooltip.TextBubble>
+          <Text>
+            <Trans>Psst! You can edit who can interact with this post.</Trans>
+          </Text>
+        </Tooltip.TextBubble>
+      </Tooltip.Outer>
+
       <PostInteractionSettingsControlledDialog
         control={control}
         onSave={() => {
+          if (persist) {
+            persistChanges({
+              threadgateAllowRules: threadgateAllowUISettingToAllowRecordValue(
+                threadgateAllowUISettings,
+              ),
+              postgateEmbeddingRules: postgate.embeddingRules ?? [],
+            })
+          } else {
             control.close()
+          }
         }}
+        isSaving={isSaving}
         postgate={postgate}
         onChangePostgate={onChangePostgate}
         threadgateAllowUISettings={threadgateAllowUISettings}
         onChangeThreadgateAllowUISettings={onChangeThreadgateAllowUISettings}
+        isDirty={isDirty}
+        persist={persist}
+        onChangePersist={setPersist}
       />
     </>
   )

src/view/screens/Storybook/Forms.tsx

@@ -155,6 +155,15 @@ export function Forms() {
           </View>
         </Toggle.Group>
 
+        <Toggle.Item name="d" disabled value label="Click me">
+          <Toggle.Switch />
+          <Toggle.LabelText>Click me</Toggle.LabelText>
+        </Toggle.Item>
+        <Toggle.Item name="d" disabled value isInvalid label="Click me">
+          <Toggle.Switch />
+          <Toggle.LabelText>Click me</Toggle.LabelText>
+        </Toggle.Item>
+
         <Toggle.Group
           label="Toggle"
           type="checkbox"

src/view/shell/Composer.ios.tsx

@@ -3,8 +3,9 @@ import {Modal, View} from 'react-native'
 
 import {useDialogStateControlContext} from '#/state/dialogs'
 import {useComposerState} from '#/state/shell/composer'
+import {ComposePost, useComposerCancelRef} from '#/view/com/composer/Composer'
 import {atoms as a, useTheme} from '#/alf'
-import {ComposePost, useComposerCancelRef} from '../com/composer/Composer'
+import {SheetCompatProvider as TooltipSheetCompatProvider} from '#/components/Tooltip'
 
 export function Composer({}: {winHeight: number}) {
   const {setFullyExpandedCount} = useDialogStateControlContext()
@@ -33,6 +34,7 @@ export function Composer({}: {winHeight: number}) {
       animationType="slide"
       onRequestClose={() => ref.current?.onPressCancel()}>
       <View style={[t.atoms.bg, a.flex_1]}>
+        <TooltipSheetCompatProvider>
           <ComposePost
             cancelRef={ref}
             replyTo={state?.replyTo}
@@ -44,6 +46,7 @@ export function Composer({}: {winHeight: number}) {
             imageUris={state?.imageUris}
             videoUri={state?.videoUri}
           />
+        </TooltipSheetCompatProvider>
       </View>
     </Modal>
   )