Merge branch 'main' of https://github.com/bluesky-social/social-app

.eslintrc.js

···
         suggestedTextWrappers: {
           Button: 'ButtonText',
           'ToggleButton.Button': 'ToggleButton.ButtonText',
+          'SegmentedControl.Item': 'SegmentedControl.ItemText',
         },
       },
     ],

assets/icons/tinyChevronBottom_stroke2_corner0_rounded.svg

···
+<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

···
     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

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

modules/bottom-sheet/src/BottomSheetNativeComponent.tsx

···
           onStateChange={this.onStateChange}
           extraStyles={extraStyles}
           onLayout={e => {
-            const {height} = e.nativeEvent.layout
-            this.setState({viewHeight: height})
-            this.updateLayout()
+            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>

package.json

···
     "expo-font": "~14.0.9",
     "expo-haptics": "~15.0.7",
     "expo-image": "~3.0.10",
-    "expo-image-crop-tool": "^0.1.8",
+    "expo-image-crop-tool": "^0.4.0",
     "expo-image-manipulator": "~14.0.7",
     "expo-image-picker": "~17.0.8",
     "expo-intent-launcher": "~13.0.7",

src/alf/typography.tsx

···
     fontFamily: Alf['fonts']['family']
   } & Pick<Alf, 'flags'>,
 ) {
-  const s = flatten(styles)
+  const s = flatten(styles) ?? {}
+
   // should always be defined on these components
   s.fontSize = (s.fontSize || atoms.text_md.fontSize) * fontScale
 

src/components/AppLanguageDropdown.tsx

···
             })}
             variant="ghost"
             color="secondary"
+            shape="rectangular"
             style={[
               a.pr_xs,
               a.pl_sm,

src/components/Button.tsx

···
   | 'primary_subtle'
   | 'negative_subtle'
 export type ButtonSize = 'tiny' | 'small' | 'large'
-export type ButtonShape = 'round' | 'square' | 'default'
+export type ButtonShape = 'round' | 'square' | 'rectangular' | 'default'
 export type VariantProps = {
   /**
    * The style variation of the button
···
   size?: ButtonSize
   /**
    * The shape of the button
+   *
+   * - `default`: Pill shaped. Most buttons should use this shape.
+   * - `round`: Circular. For icon-only buttons.
+   * - `square`: Square. For icon-only buttons.
+   * - `rectangular`: Rectangular. Matches previous style, use when adjacent to form fields.
    */
   shape?: ButtonShape
 }
···
         if (size === 'large') {
           baseStyles.push(a.rounded_full, {
             paddingVertical: 12,
+            paddingHorizontal: 24,
+            gap: 6,
+          })
+        } else if (size === 'small') {
+          baseStyles.push(a.rounded_full, {
+            paddingVertical: 8,
+            paddingHorizontal: 14,
+            gap: 5,
+          })
+        } else if (size === 'tiny') {
+          baseStyles.push(a.rounded_full, {
+            paddingVertical: 5,
+            paddingHorizontal: 10,
+            gap: 3,
+          })
+        }
+      } else if (shape === 'rectangular') {
+        if (size === 'large') {
+          baseStyles.push({
+            paddingVertical: 12,
             paddingHorizontal: 25,
+            borderRadius: 10,
             gap: 3,
           })
         } else if (size === 'small') {
-          baseStyles.push(a.rounded_full, {
+          baseStyles.push({
             paddingVertical: 8,
             paddingHorizontal: 13,
+            borderRadius: 8,
             gap: 3,
           })
         } else if (size === 'tiny') {
-          baseStyles.push(a.rounded_full, {
+          baseStyles.push({
             paddingVertical: 5,
             paddingHorizontal: 9,
+            borderRadius: 6,
             gap: 2,
           })
         }
···
         variant,
         color,
         size,
+        shape,
         disabled: disabled || false,
       }),
-      [state, variant, color, size, disabled],
+      [state, variant, color, size, shape, disabled],
     )
 
     return (
···
   position?: 'left' | 'right'
   size?: SVGIconProps['size']
 }) {
-  const {size: buttonSize} = useButtonContext()
+  const {size: buttonSize, shape: buttonShape} = useButtonContext()
   const textStyles = useSharedButtonTextStyles()
-  const {iconSize, iconContainerSize} = React.useMemo(() => {
-    /**
-     * Pre-set icon sizes for different button sizes
-     */
-    const iconSizeShorthand =
-      size ??
-      (({
-        large: 'md',
-        small: 'sm',
-        tiny: 'xs',
-      }[buttonSize || 'small'] || 'sm') as Exclude<
-        SVGIconProps['size'],
-        undefined
-      >)
+  const {iconSize, iconContainerSize, iconNegativeMargin} =
+    React.useMemo(() => {
+      /**
+       * Pre-set icon sizes for different button sizes
+       */
+      const iconSizeShorthand =
+        size ??
+        (({
+          large: 'md',
+          small: 'sm',
+          tiny: 'xs',
+        }[buttonSize || 'small'] || 'sm') as Exclude<
+          SVGIconProps['size'],
+          undefined
+        >)
 
-    /*
-     * Copied here from icons/common.tsx so we can tweak if we need to, but
-     * also so that we can calculate transforms.
-     */
-    const iconSize = {
-      xs: 12,
-      sm: 16,
-      md: 18,
-      lg: 24,
-      xl: 28,
-      '2xl': 32,
-    }[iconSizeShorthand]
+      /*
+       * Copied here from icons/common.tsx so we can tweak if we need to, but
+       * also so that we can calculate transforms.
+       */
+      const iconSize = {
+        '2xs': 8,
+        xs: 12,
+        sm: 16,
+        md: 18,
+        lg: 24,
+        xl: 28,
+        '2xl': 32,
+      }[iconSizeShorthand]
 
-    /*
-     * Goal here is to match rendered text size so that different size icons
-     * don't increase button size
-     */
-    const iconContainerSize = {
-      large: 20,
-      small: 17,
-      tiny: 15,
-    }[buttonSize || 'small']
+      /*
+       * Goal here is to match rendered text size so that different size icons
+       * don't increase button size
+       */
+      const iconContainerSize = {
+        large: 20,
+        small: 17,
+        tiny: 15,
+      }[buttonSize || 'small']
 
-    return {
-      iconSize,
-      iconContainerSize,
-    }
-  }, [buttonSize, size])
+      /*
+       * The icon needs to be closer to the edge of the button than the text. Therefore
+       * we make the gap slightly too large, and then pull in the sides using negative margins.
+       */
+      let iconNegativeMargin = 0
+
+      if (buttonShape === 'default') {
+        iconNegativeMargin = {
+          large: -2,
+          small: -2,
+          tiny: -1,
+        }[buttonSize || 'small']
+      }
+
+      return {
+        iconSize,
+        iconContainerSize,
+        iconNegativeMargin,
+      }
+    }, [buttonSize, buttonShape, size])
 
   return (
     <View
       style={[
         a.z_20,
         {
-          width: iconContainerSize,
+          width: size === '2xs' ? 10 : iconContainerSize,
           height: iconContainerSize,
+          marginLeft: iconNegativeMargin,
+          marginRight: iconNegativeMargin,
         },
       ]}>
       <View

src/components/Pills.tsx

···
   }, [size])
 
   return (
-    <View style={[variantStyles, a.justify_center, t.atoms.bg_contrast_25]}>
+    <View style={[variantStyles, a.justify_center, t.atoms.bg_contrast_50]}>
       <Text style={[a.text_xs, a.leading_tight]}>
         <Trans>Follows You</Trans>
       </Text>

src/components/Post/Embed/VideoEmbed/VideoEmbedInner/VideoEmbedInnerWeb.tsx

···
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
 import {atoms as a} from '#/alf'
-import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import * as BandwidthEstimate from './bandwidth-estimate'
 import {Controls} from './web-controls/VideoControls'
 
···
           hasSubtitleTrack={hasSubtitleTrack}
         />
       </div>
-      <MediaInsetBorder />
     </View>
   )
 }

src/components/Post/Embed/VideoEmbed/index.tsx

···
 
 import {ErrorBoundary} from '#/view/com/util/ErrorBoundary'
 import {ConstrainedImage} from '#/view/com/util/images/AutoSizedImage'
-import {atoms as a, useTheme} from '#/alf'
+import {atoms as a} from '#/alf'
 import {Button} from '#/components/Button'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
 import {PlayButtonIcon} from '#/components/video/PlayButtonIcon'
···
 
 interface Props {
   embed: AppBskyEmbedVideo.View
-  crop?: 'none' | 'square' | 'constrained'
 }
 
-export function VideoEmbed({embed, crop}: Props) {
-  const t = useTheme()
+export function VideoEmbed({embed}: Props) {
   const [key, setKey] = useState(0)
 
   const renderError = useCallback(
···
   }
 
   let constrained: number | undefined
-  let max: number | undefined
   if (aspectRatio !== undefined) {
     const ratio = 1 / 2 // max of 1:2 ratio in feeds
     constrained = Math.max(aspectRatio, ratio)
-    max = Math.max(aspectRatio, 0.25) // max of 1:4 in thread
   }
-  const cropDisabled = crop === 'none'
 
   const contents = (
     <ErrorBoundary renderError={renderError} key={key}>
···
 
   return (
     <View style={[a.pt_xs]}>
-      {cropDisabled ? (
-        <View
-          style={[
-            a.w_full,
-            a.overflow_hidden,
-            {aspectRatio: max ?? 1},
-            a.rounded_md,
-            a.overflow_hidden,
-            t.atoms.bg_contrast_25,
-          ]}>
-          {contents}
-        </View>
-      ) : (
-        <ConstrainedImage
-          fullBleed={crop === 'square'}
-          aspectRatio={constrained || 1}
-          // slightly smaller max height than images
-          // images use 16 / 9, for reference
-          minMobileAspectRatio={14 / 9}>
-          {contents}
-        </ConstrainedImage>
-      )}
+      <ConstrainedImage
+        aspectRatio={constrained || 1}
+        // slightly smaller max height than images
+        // images use 16 / 9, for reference
+        minMobileAspectRatio={14 / 9}>
+        {contents}
+      </ConstrainedImage>
     </View>
   )
 }

src/components/Post/Embed/VideoEmbed/index.web.tsx

···
 import {atoms as a, useTheme} from '#/alf'
 import {useIsWithinMessage} from '#/components/dms/MessageContext'
 import {useFullscreen} from '#/components/hooks/useFullscreen'
+import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {
   HLSUnsupportedError,
   VideoEmbedInnerWeb,
···
 import {useActiveVideoWeb} from './ActiveVideoWebContext'
 import * as VideoFallback from './VideoEmbedInner/VideoFallback'
 
-export function VideoEmbed({
-  embed,
-  crop,
-}: {
-  embed: AppBskyEmbedVideo.View
-  crop?: 'none' | 'square' | 'constrained'
-}) {
+export function VideoEmbed({embed}: {embed: AppBskyEmbedVideo.View}) {
   const t = useTheme()
   const ref = useRef<HTMLDivElement>(null)
   const {active, setActive, sendPosition, currentActiveView} =
···
   }
 
   let constrained: number | undefined
-  let max: number | undefined
   if (aspectRatio !== undefined) {
     const ratio = 1 / 2 // max of 1:2 ratio in feeds
     constrained = Math.max(aspectRatio, ratio)
-    max = Math.max(aspectRatio, 0.25) // max of 1:4 in thread
   }
-  const cropDisabled = crop === 'none'
 
   const contents = (
     <div
···
         display: 'flex',
         flex: 1,
         cursor: 'default',
+        backgroundColor: t.palette.black,
         backgroundImage: `url(${embed.thumbnail})`,
-        backgroundSize: 'cover',
+        backgroundSize: 'contain',
+        backgroundPosition: 'center',
+        backgroundRepeat: 'no-repeat',
       }}
       onClick={evt => evt.stopPropagation()}>
       <ErrorBoundary renderError={renderError} key={key}>
···
       <ViewportObserver
         sendPosition={sendPosition}
         isAnyViewActive={currentActiveView !== null}>
-        {cropDisabled ? (
-          <View
-            style={[
-              a.w_full,
-              a.overflow_hidden,
-              {aspectRatio: max ?? 1},
-              a.rounded_md,
-              a.overflow_hidden,
-              t.atoms.bg_contrast_25,
-            ]}>
-            {contents}
-          </View>
-        ) : (
-          <ConstrainedImage
-            fullBleed={crop === 'square'}
-            aspectRatio={constrained || 1}
-            // slightly smaller max height than images
-            // images use 16 / 9, for reference
-            minMobileAspectRatio={14 / 9}>
-            {contents}
-          </ConstrainedImage>
-        )}
+        <ConstrainedImage
+          fullBleed
+          aspectRatio={constrained || 1}
+          // slightly smaller max height than images
+          // images use 16 / 9, for reference
+          minMobileAspectRatio={14 / 9}>
+          {contents}
+          <MediaInsetBorder />
+        </ConstrainedImage>
       </ViewportObserver>
     </View>
   )

src/components/Post/Embed/index.tsx

···
         <ContentHider
           modui={rest.moderation?.ui('contentMedia')}
           activeStyle={[a.mt_sm]}>
-          <VideoEmbed embed={embed.view} crop="constrained" />
+          <VideoEmbed embed={embed.view} />
         </ContentHider>
       )
     }

src/components/RichText.tsx

···
 import React from 'react'
-import {type TextStyle} from 'react-native'
+import {type StyleProp, type TextStyle} from 'react-native'
 import {AppBskyRichtextFacet, RichText as RichTextAPI} from '@atproto/api'
 
 import {toShortUrl} from '#/lib/strings/url-helpers'
···
     enableTags?: boolean
     authorHandle?: string
     onLinkPress?: LinkProps['onPress']
-    interactiveStyle?: TextStyle
+    interactiveStyle?: StyleProp<TextStyle>
     emojiMultiplier?: number
     shouldProxyLinks?: boolean
   }
···
 
   if (!facets?.length) {
     if (isOnlyEmoji(text)) {
-      const flattenedStyle = flatten(style)
+      const flattenedStyle = flatten(style) ?? {}
       const fontSize =
         (flattenedStyle.fontSize ?? a.text_sm.fontSize) * emojiMultiplier
       return (

src/components/Select/index.tsx

···
         style={[a.flex_1, a.justify_between]}
         color="secondary"
         size="small"
-        variant="solid">
+        shape="rectangular">
         <>{children}</>
       </Button>
     )

src/components/Select/index.web.tsx

···
-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'
 
···
         style={flatten([
           a.flex,
           a.relative,
-          t.atoms.bg_contrast_25,
-          a.rounded_sm,
+          t.atoms.bg_contrast_50,
           a.w_full,
           a.align_center,
           a.gap_sm,
···
           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_100
-                : t.palette.contrast_25,
+              : t.palette.contrast_50,
           },
         ])}>
         {children}
···
   )
 }
 
-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)
 
···
             <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" />
···
       </RadixSelect.Content>
     </RadixSelect.Portal>
   )
+}
+
+function defaultItemValueExtractor(item: any) {
+  return item.value
 }
 
 const ItemContext = createContext<{

src/components/Tooltip/index.tsx

···
 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,
···
   MIN_EDGE_SPACE,
 } 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
···
 
 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) {
-        setTargetMeasurements({x: pageX, y: pageY, width, height})
-      }
-    })
-  }, [shouldMeasure, setTargetMeasurements])
+
+    if (containerRef?.current) {
+      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,
+    hasLayedOut,
+    containerRef,
+    keyboardIsOpen,
+  ])
 
   return (
-    <View collapsable={false} ref={targetRef}>
+    <View
+      collapsable={false}
+      ref={targetRef}
+      onLayout={() => setHasLayedOut(true)}>
       {children}
     </View>
   )
···
 }) {
   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>

src/components/Tooltip/index.web.tsx

···
 } 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'
 
···
   visible: boolean
   onVisibleChange: (visible: boolean) => void
 }) {
-  const ctx = useMemo(
-    () => ({position, onVisibleChange}),
-    [position, onVisibleChange],
-  )
+  const ctx = useMemo(() => ({position}), [position])
   return (
     <Popover.Root open={visible} onOpenChange={onVisibleChange}>
       <TooltipContext.Provider value={ctx}>{children}</TooltipContext.Provider>
···
   label: string
 }) {
   const t = useTheme()
-  const {position, onVisibleChange} = useContext(TooltipContext)
+  const {position} = useContext(TooltipContext)
   return (
     <Popover.Portal>
       <Popover.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

···
-import {Fragment, useMemo} from 'react'
+import {Fragment, useMemo, useRef} from 'react'
 import {
   Keyboard,
   Platform,
···
   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'
···
   PostInteractionSettingsDialog,
   usePrefetchPostInteractionSettings,
 } from '#/components/dialogs/PostInteractionSettingsDialog'
-import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
-import {Earth_Stroke2_Corner0_Rounded as Earth} from '#/components/icons/Globe'
-import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
+import {TinyChevronBottom_Stroke2_Corner0_Rounded as TinyChevronDownIcon} from '#/components/icons/Chevron'
+import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSignIcon} from '#/components/icons/CircleBanSign'
+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
···
     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'
···
       Keyboard.dismiss()
     }
     if (isThreadAuthor) {
-      editDialogControl.open()
+      // 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()
     }
···
         {...(isThreadAuthor
           ? Platform.select({
               web: {
-                onHoverIn: prefetchPostInteractionSettings,
+                onHoverIn: prefetch,
               },
               native: {
-                onPressIn: prefetchPostInteractionSettings,
+                onPressIn: prefetch,
               },
             })
           : {})}
         hitSlop={HITSLOP_10}>
-        {({hovered}) => (
-          <View style={[a.flex_row, a.align_center, a.gap_xs, style]}>
+        {({hovered, focused, pressed}) => (
+          <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}
             />
···
               style={[
                 a.text_sm,
                 a.leading_tight,
-                t.atoms.text_contrast_medium,
-                hovered && a.underline,
+                isThreadAuthor
+                  ? {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>
         )}
···
     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

···
-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'
···
   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)
   }
 
···
   return (
     <>
       <Tooltip.Outer
-        visible={!activitySubscriptionsNudged}
+        visible={showTooltip}
         onVisibleChange={onDismissTooltip}
         position="bottom">
         <Tooltip.Target>
···
             testID="dmBtn"
             size="small"
             color="secondary"
-            variant="solid"
             shape="round"
             label={_(msg`Get notified when ${name} posts`)}
             onPress={wrappedOnPress}>

src/components/dialogs/Embed.tsx

···
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import * as SegmentedControl from '#/components/forms/SegmentedControl'
 import * as TextField from '#/components/forms/TextField'
-import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Check_Stroke2_Corner0_Rounded as CheckIcon} from '#/components/icons/Check'
 import {
   ChevronBottom_Stroke2_Corner0_Rounded as ChevronBottomIcon,
···
               <Text style={[t.atoms.text_contrast_medium, a.font_semi_bold]}>
                 <Trans>Color theme</Trans>
               </Text>
-              <ToggleButton.Group
+              <SegmentedControl.Root
                 label={_(msg`Color mode`)}
-                values={[colorMode]}
-                onChange={([value]) => setColorMode(value as ColorModeValues)}>
-                <ToggleButton.Button name="system" label={_(msg`System`)}>
-                  <ToggleButton.ButtonText>
+                type="radio"
+                value={colorMode}
+                onChange={setColorMode}>
+                <SegmentedControl.Item value="system" label={_(msg`System`)}>
+                  <SegmentedControl.ItemText>
                     <Trans>System</Trans>
-                  </ToggleButton.ButtonText>
-                </ToggleButton.Button>
-                <ToggleButton.Button name="light" label={_(msg`Light`)}>
-                  <ToggleButton.ButtonText>
+                  </SegmentedControl.ItemText>
+                </SegmentedControl.Item>
+                <SegmentedControl.Item value="light" label={_(msg`Light`)}>
+                  <SegmentedControl.ItemText>
                     <Trans>Light</Trans>
-                  </ToggleButton.ButtonText>
-                </ToggleButton.Button>
-                <ToggleButton.Button name="dark" label={_(msg`Dark`)}>
-                  <ToggleButton.ButtonText>
+                  </SegmentedControl.ItemText>
+                </SegmentedControl.Item>
+                <SegmentedControl.Item value="dark" label={_(msg`Dark`)}>
+                  <SegmentedControl.ItemText>
                     <Trans>Dark</Trans>
-                  </ToggleButton.ButtonText>
-                </ToggleButton.Button>
-              </ToggleButton.Group>
+                  </SegmentedControl.ItemText>
+                </SegmentedControl.Item>
+              </SegmentedControl.Root>
             </View>
           )}
         </View>

src/components/dialogs/PostInteractionSettingsDialog.tsx

···
-import React from 'react'
-import {type StyleProp, View, type ViewStyle} from 'react-native'
+import {useCallback, useMemo, useState} from 'react'
+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'
···
 } 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'
 
···
   onSave: () => void
   isSaving?: boolean
 
+  isDirty?: boolean
+  persist?: boolean
+  onChangePersist?: (v: boolean) => void
+
   postgate: AppBskyFeedPostgate.Record
   onChangePostgate: (v: AppBskyFeedPostgate.Record) => void
 
···
   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
-        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>
+      <DialogInner {...rest} />
     </Dialog.Outer>
   )
 }
 
-export function Header() {
+function DialogInner(props: Omit<PostInteractionSettingsFormProps, 'control'>) {
+  const {_} = useLingui()
+
   return (
-    <View style={[a.gap_md, a.pb_sm]}>
-      <Text style={[a.text_2xl, a.font_semi_bold]}>
-        <Trans>Post interaction settings</Trans>
-      </Text>
-      <Text style={[a.text_md, a.pb_xs]}>
-        <Trans>Customize who can interact with this post.</Trans>
-      </Text>
-      <Divider />
-    </View>
+    <Dialog.ScrollableInner
+      label={_(msg`Edit post interaction settings`)}
+      style={[web({maxWidth: 400}), a.w_full]}>
+      <Header />
+      <PostInteractionSettingsForm {...props} />
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
   )
 }
 
···
   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} />
···
 ) {
   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})
···
   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
···
   return (
     <Dialog.ScrollableInner
       label={_(msg`Edit post interaction settings`)}
-      style={[{maxWidth: 500}, a.w_full]}>
-      <View style={[a.gap_md]}>
-        <Header />
-
-        {isLoading ? (
-          <View style={[a.flex_1, a.py_4xl, a.align_center, a.justify_center]}>
-            <Loader size="xl" />
-          </View>
-        ) : (
+      style={[web({maxWidth: 400}), a.w_full]}>
+      {isLoading ? (
+        <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}
···
             threadgateAllowUISettings={allowUIValue}
             onChangeThreadgateAllowUISettings={setEditedAllowUISettings}
           />
-        )}
-      </View>
+        </>
+      )}
+      <Dialog.Close />
     </Dialog.ScrollableInner>
   )
 }
···
   threadgateAllowUISettings,
   onChangeThreadgateAllowUISettings,
   replySettingsDisabled,
+  isDirty,
+  persist,
+  onChangePersist,
 }: PostInteractionSettingsFormProps) {
   const t = useTheme()
   const {_} = useLingui()
-  const {data: lists} = useMyListsQuery('curate')
-  const [quotesEnabled, setQuotesEnabled] = React.useState(
+  const playHaptic = useHaptics()
+  const [showLists, setShowLists] = useState(false)
+  const {
+    data: lists,
+    isPending: isListsPending,
+    isError: isListsError,
+  } = useMyListsQuery('curate')
+  const [quotesEnabled, setQuotesEnabled] = useState(
     !(
       postgate.embeddingRules &&
       postgate.embeddingRules.find(
···
     ),
   )
 
-  const onPressAudience = (setting: ThreadgateAllowUISetting) => {
-    // remove boolean values
-    let newSelected: ThreadgateAllowUISetting[] =
-      threadgateAllowUISettings.filter(
-        v => v.type !== 'nobody' && v.type !== 'everybody',
-      )
-    // toggle
-    const i = newSelected.findIndex(v => isEqual(v, setting))
-    if (i === -1) {
-      newSelected.push(setting)
-    } else {
-      newSelected.splice(i, 1)
-    }
-    if (newSelected.length === 0) {
-      newSelected.push({type: 'everybody'})
-    }
-
-    onChangeThreadgateAllowUISettings(newSelected)
-  }
-
-  const onChangeQuotesEnabled = React.useCallback(
+  const onChangeQuotesEnabled = useCallback(
     (enabled: boolean) => {
       setQuotesEnabled(enabled)
       onChangePostgate(
···
   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
 
-  return (
-    <View>
-      <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>
+  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])
 
-            <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>
+  const toggleGroupOnChange = (values: string[]) => {
+    const settings: ThreadgateAllowUISetting[] = []
 
-          <Divider />
+    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'})
+        }
+      }
+    }
 
-          {replySettingsDisabled && (
-            <View
-              style={[
-                a.px_md,
-                a.py_sm,
-                a.rounded_sm,
-                a.flex_row,
-                a.align_center,
-                a.gap_sm,
-                t.atoms.bg_contrast_25,
-              ]}>
-              <CircleInfo fill={t.atoms.text_contrast_low.color} />
-              <Text
-                style={[
-                  a.flex_1,
-                  a.leading_snug,
-                  t.atoms.text_contrast_medium,
-                ]}>
-                <Trans>
-                  Reply settings are chosen by the author of the thread
-                </Trans>
-              </Text>
-            </View>
-          )}
+    onChangeThreadgateAllowUISettings(settings)
+  }
 
+  return (
+    <View style={[a.flex_1, a.gap_lg]}>
+      <View style={[a.gap_lg]}>
+        {replySettingsDisabled && (
           <View
             style={[
+              a.px_md,
+              a.py_sm,
+              a.rounded_sm,
+              a.flex_row,
+              a.align_center,
               a.gap_sm,
-              {
-                opacity: replySettingsDisabled ? 0.3 : 1,
-              },
+              t.atoms.bg_contrast_25,
             ]}>
-            <Text style={[a.font_semi_bold, a.text_lg]}>
-              <Trans>Reply settings</Trans>
+            <CircleInfo fill={t.atoms.text_contrast_low.color} />
+            <Text
+              style={[a.flex_1, a.leading_snug, t.atoms.text_contrast_medium]}>
+              <Trans>
+                Reply settings are chosen by the author of the thread
+              </Trans>
             </Text>
+          </View>
+        )}
 
-            <Text style={[a.pt_sm, t.atoms.text_contrast_medium]}>
-              <Trans>Allow replies from:</Trans>
-            </Text>
+        <View style={[a.gap_sm, {opacity: replySettingsDisabled ? 0.3 : 1}]}>
+          <Text style={[a.text_md, a.font_medium]}>
+            <Trans>Who can reply</Trans>
+          </Text>
 
+          <Toggle.Group
+            label={_(msg`Set who can reply to your post`)}
+            type="radio"
+            maxSelections={1}
+            disabled={replySettingsDisabled}
+            values={
+              everyoneCanReply ? ['everyone'] : noOneCanReply ? ['nobody'] : []
+            }
+            onChange={val => {
+              if (val.includes('everyone')) {
+                onChangeThreadgateAllowUISettings([{type: 'everybody'}])
+              } else if (val.includes('nobody')) {
+                onChangeThreadgateAllowUISettings([{type: 'nobody'}])
+              } else {
+                onChangeThreadgateAllowUISettings([{type: 'mention'}])
+              }
+            }}>
             <View style={[a.flex_row, a.gap_sm]}>
-              <Selectable
-                label={_(msg`Everybody`)}
-                isSelected={
-                  !!threadgateAllowUISettings.find(v => v.type === 'everybody')
-                }
-                onPress={() =>
-                  onChangeThreadgateAllowUISettings([{type: 'everybody'}])
-                }
-                style={{flex: 1}}
-                disabled={replySettingsDisabled}
-              />
-              <Selectable
-                label={_(msg`Nobody`)}
-                isSelected={noOneCanReply}
-                onPress={() =>
-                  onChangeThreadgateAllowUISettings([{type: 'nobody'}])
-                }
-                style={{flex: 1}}
-                disabled={replySettingsDisabled}
-              />
+              <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 && (
-              <>
-                <Text style={[a.pt_sm, t.atoms.text_contrast_medium]}>
-                  <Trans>Or combine these options:</Trans>
-                </Text>
+          <Toggle.Group
+            label={_(
+              msg`Set precisely which groups of people can reply to your post`,
+            )}
+            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]}>
-                  <Selectable
-                    label={_(msg`Mentioned users`)}
-                    isSelected={
-                      !!threadgateAllowUISettings.find(
-                        v => v.type === 'mention',
-                      )
-                    }
-                    onPress={() => onPressAudience({type: 'mention'})}
-                    disabled={replySettingsDisabled}
-                  />
-                  <Selectable
-                    label={_(msg`Users you follow`)}
-                    isSelected={
-                      !!threadgateAllowUISettings.find(
-                        v => v.type === 'following',
-                      )
-                    }
-                    onPress={() => onPressAudience({type: 'following'})}
-                    disabled={replySettingsDisabled}
-                  />
-                  <Selectable
-                    label={_(msg`Your followers`)}
-                    isSelected={
-                      !!threadgateAllowUISettings.find(
-                        v => v.type === 'followers',
-                      )
-                    }
-                    onPress={() => onPressAudience({type: 'followers'})}
-                    disabled={replySettingsDisabled}
+              <Button
+                label={
+                  showLists
+                    ? _(msg`Hide lists`)
+                    : _(msg`Show lists of users to select from`)
+                }
+                accessibilityHint={_(msg`Toggle showing lists`)}
+                accessibilityRole="togglebutton"
+                hitSlop={0}
+                onPress={() => {
+                  playHaptic('Light')
+                  if (isIOS && !showLists) {
+                    LayoutAnimation.configureNext({
+                      ...LayoutAnimation.Presets.linear,
+                      duration: 175,
+                    })
+                  }
+                  setShowLists(s => !s)
+                }}>
+                <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)"
+                          />
+                        </NestedText>
+                      </Trans>
+                    )}
+                  </Toggle.PanelText>
+                  <Toggle.PanelIcon
+                    icon={showLists ? ChevronUpIcon : ChevronDownIcon}
                   />
-                  {lists && lists.length > 0
-                    ? lists.map(list => (
-                        <Selectable
-                          key={list.uri}
-                          label={_(msg`Users in "${list.name}"`)}
-                          isSelected={
-                            !!threadgateAllowUISettings.find(
-                              v => v.type === 'list' && v.list === list.uri,
-                            )
-                          }
-                          onPress={() =>
-                            onPressAudience({type: 'list', list: list.uri})
-                          }
-                          disabled={replySettingsDisabled}
-                        />
-                      ))
-                    : // No loading states to avoid jumps for the common case (no lists)
-                      null}
-                </View>
-              </>
-            )}
-          </View>
+                </Toggle.Panel>
+              </Button>
+              {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}
+                      name={`list:${list.uri}`}
+                      type="checkbox"
+                      label={_(msg`Allow users in ${list.name} to reply`)}
+                      hitSlop={0}>
+                      {({selected}) => (
+                        <Toggle.Panel
+                          active={selected}
+                          adjacent={
+                            i === lists.length - 1 ? 'leading' : 'both'
+                          }>
+                          <Toggle.Checkbox />
+                          <UserAvatar
+                            size={24}
+                            type="list"
+                            avatar={list.avatar}
+                          />
+                          <Toggle.PanelText>{list.name}</Toggle.PanelText>
+                        </Toggle.Panel>
+                      )}
+                    </Toggle.Item>
+                  ))
+                ))}
+            </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>
+      )}
+
       <Button
         disabled={!canSave || isSaving}
         label={_(msg`Save`)}
         onPress={onSave}
         color="primary"
-        size="large"
-        variant="solid"
-        style={a.mt_xl}>
-        <ButtonText>{_(msg`Save`)}</ButtonText>
-        {isSaving && <ButtonIcon icon={Loader} position="right" />}
+        size="large">
+        <ButtonText>
+          <Trans>Save</Trans>
+        </ButtonText>
+        {isSaving && <ButtonIcon icon={Loader} />}
       </Button>
     </View>
   )
 }
 
-function Selectable({
-  label,
-  isSelected,
-  onPress,
-  style,
-  disabled,
-}: {
-  label: string
-  isSelected: boolean
-  onPress: () => void
-  style?: StyleProp<ViewStyle>
-  disabled?: boolean
-}) {
-  const t = useTheme()
+function Header() {
   return (
-    <Button
-      disabled={disabled}
-      onPress={onPress}
-      label={label}
-      accessibilityRole="checkbox"
-      aria-checked={isSelected}
-      accessibilityState={{
-        checked: isSelected,
-      }}
-      style={a.flex_1}>
-      {({hovered, focused}) => (
-        <View
-          style={[
-            a.flex_1,
-            a.flex_row,
-            a.align_center,
-            a.justify_between,
-            a.rounded_sm,
-            a.p_md,
-            {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>
+    <View style={[a.pb_lg]}>
+      <Text style={[a.text_2xl, a.font_bold]}>
+        <Trans>Post interaction settings</Trans>
+      </Text>
+    </View>
   )
 }
 
···
   const agent = useAgent()
   const getPost = useGetPost()
 
-  return React.useCallback(async () => {
+  return useCallback(async () => {
     try {
       await Promise.all([
         queryClient.prefetchQuery({

src/components/forms/HostingProvider.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {toNiceDomain} from '#/lib/strings/url-helpers'
-import {ServerInputDialog} from '#/view/com/auth/server-input'
 import {atoms as a, tokens, useTheme} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
+import {ServerInputDialog} from '#/components/dialogs/ServerInput'
 import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe'
 import {PencilLine_Stroke2_Corner0_Rounded as PencilIcon} from '#/components/icons/Pencil'
 import {Text} from '#/components/Typography'

src/components/forms/SegmentedControl.tsx

···
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from 'react'
+import {type StyleProp, View, type ViewStyle} from 'react-native'
+import Animated, {Easing, LinearTransition} from 'react-native-reanimated'
+
+import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
+import {atoms as a, native, platform, useTheme} from '#/alf'
+import {
+  Button,
+  type ButtonProps,
+  ButtonText,
+  type ButtonTextProps,
+} from '../Button'
+
+const InternalContext = createContext<{
+  type: 'tabs' | 'radio'
+  size: 'small' | 'large'
+  selectedValue: string
+  selectedPosition: {width: number; x: number} | null
+  onSelectValue: (
+    value: string,
+    position: {width: number; x: number} | null,
+  ) => void
+  updatePosition: (position: {width: number; x: number}) => void
+} | null>(null)
+
+/**
+ * Segmented control component.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl.Root value={value} onChange={setValue}>
+ *   <SegmentedControl.Item value="one">
+ *     <SegmentedControl.ItemText value="one">
+ *       One
+ *     </SegmentedControl.ItemText>
+ *   </SegmentedControl.Item>
+ *   <SegmentedControl.Item value="two">
+ *     <SegmentedControl.ItemText value="two">
+ *       Two
+ *     </SegmentedControl.ItemText>
+ *   </SegmentedControl.Item>
+ * </SegmentedControl.Root>
+ * ```
+ */
+export function Root<T extends string>({
+  label,
+  type = 'radio',
+  size = 'large',
+  value,
+  onChange,
+  children,
+  style,
+  accessibilityHint,
+}: {
+  label: string
+  type: 'tabs' | 'radio'
+  size?: 'small' | 'large'
+  value: T
+  onChange: (value: T) => void
+  children: React.ReactNode
+  style?: StyleProp<ViewStyle>
+  accessibilityHint?: string
+}) {
+  const t = useTheme()
+  const [selectedPosition, setSelectedPosition] = useState<{
+    width: number
+    x: number
+  } | null>(null)
+
+  const contextValue = useMemo(() => {
+    return {
+      type,
+      size,
+      selectedValue: value,
+      selectedPosition,
+      onSelectValue: (
+        val: string,
+        position: {width: number; x: number} | null,
+      ) => {
+        onChange(val as T)
+        if (position) setSelectedPosition(position)
+      },
+      updatePosition: (position: {width: number; x: number}) => {
+        setSelectedPosition(currPos => {
+          if (
+            currPos &&
+            currPos.width === position.width &&
+            currPos.x === position.x
+          ) {
+            return currPos
+          }
+          return position
+        })
+      },
+    }
+  }, [value, selectedPosition, setSelectedPosition, onChange, type, size])
+
+  return (
+    <View
+      accessibilityLabel={label}
+      accessibilityHint={accessibilityHint ?? ''}
+      style={[
+        a.w_full,
+        a.flex_1,
+        a.relative,
+        a.flex_row,
+        t.atoms.bg_contrast_50,
+        {borderRadius: 14},
+        a.curve_continuous,
+        a.p_xs,
+        style,
+      ]}
+      role={type === 'tabs' ? 'tablist' : 'radiogroup'}>
+      {selectedPosition !== null && (
+        <Slider x={selectedPosition.x} width={selectedPosition.width} />
+      )}
+      <InternalContext.Provider value={contextValue}>
+        {children}
+      </InternalContext.Provider>
+    </View>
+  )
+}
+
+const InternalItemContext = createContext<{
+  active: boolean
+  pressed: boolean
+  hovered: boolean
+  focused: boolean
+} | null>(null)
+
+export function Item({
+  value,
+  style,
+  children,
+  onPress: onPressProp,
+  ...props
+}: {value: string; children: React.ReactNode} & Omit<ButtonProps, 'children'>) {
+  const [position, setPosition] = useState<{x: number; width: number} | null>(
+    null,
+  )
+
+  const ctx = useContext(InternalContext)
+  if (!ctx)
+    throw new Error(
+      'SegmentedControl.Item must be used within a SegmentedControl.Root',
+    )
+
+  const active = ctx.selectedValue === value
+
+  // update position if change was external, and not due to onPress
+  const needsUpdate =
+    active &&
+    position &&
+    (ctx.selectedPosition?.x !== position.x ||
+      ctx.selectedPosition?.width !== position.width)
+
+  // can't wait for `useEffectEvent`
+  const update = useNonReactiveCallback(() => {
+    if (position) ctx.updatePosition(position)
+  })
+
+  useLayoutEffect(() => {
+    if (needsUpdate) {
+      update()
+    }
+  }, [needsUpdate, update])
+
+  const onPress = useCallback(
+    (evt: any) => {
+      ctx.onSelectValue(value, position)
+      onPressProp?.(evt)
+    },
+    [ctx, value, position, onPressProp],
+  )
+
+  return (
+    <View
+      style={[a.flex_1, a.flex_row]}
+      onLayout={evt => {
+        const measuredPosition = {
+          x: evt.nativeEvent.layout.x,
+          width: evt.nativeEvent.layout.width,
+        }
+        if (!ctx.selectedPosition && active) {
+          ctx.onSelectValue(value, measuredPosition)
+        }
+        setPosition(measuredPosition)
+      }}>
+      <Button
+        {...props}
+        onPress={onPress}
+        role={ctx.type === 'tabs' ? 'tab' : 'radio'}
+        accessibilityState={{selected: active}}
+        style={[
+          a.flex_1,
+          a.bg_transparent,
+          a.px_sm,
+          a.py_xs,
+          {minHeight: ctx.size === 'large' ? 40 : 32},
+          style,
+        ]}>
+        {({pressed, hovered, focused}) => (
+          <InternalItemContext.Provider
+            value={{active, pressed, hovered, focused}}>
+            {children}
+          </InternalItemContext.Provider>
+        )}
+      </Button>
+    </View>
+  )
+}
+
+export function ItemText({style, ...props}: ButtonTextProps) {
+  const t = useTheme()
+  const ctx = useContext(InternalItemContext)
+  if (!ctx)
+    throw new Error(
+      'SegmentedControl.ItemText must be used within a SegmentedControl.Item',
+    )
+  return (
+    <ButtonText
+      {...props}
+      style={[
+        a.text_center,
+        a.text_md,
+        a.font_medium,
+        a.px_xs,
+        ctx.active
+          ? t.atoms.text
+          : ctx.focused || ctx.hovered || ctx.pressed
+            ? t.atoms.text_contrast_medium
+            : t.atoms.text_contrast_low,
+        style,
+      ]}
+    />
+  )
+}
+
+function Slider({x, width}: {x: number; width: number}) {
+  const t = useTheme()
+
+  return (
+    <Animated.View
+      layout={native(LinearTransition.easing(Easing.out(Easing.exp)))}
+      style={[
+        a.absolute,
+        a.curve_continuous,
+        t.atoms.bg,
+        {
+          top: 4,
+          bottom: 4,
+          left: 0,
+          width,
+          borderRadius: 10,
+        },
+        // TODO: new arch supports boxShadow on native
+        // in the meantime this is an attempt to get close
+        platform({
+          web: {
+            boxShadow: '0px 2px 4px 0px #0000000D',
+          },
+          ios: {
+            shadowColor: '#000',
+            shadowOffset: {width: 0, height: 2},
+            shadowOpacity: 0x0d / 0xff,
+            shadowRadius: 4,
+          },
+          android: {elevation: 0.25},
+        }),
+        platform({
+          native: [{left: x}],
+          web: [{transform: [{translateX: x}]}, a.transition_transform],
+        }),
+      ]}
+    />
+  )
+}

src/components/forms/Toggle.tsx src/components/forms/Toggle/index.tsx

···
-import React from 'react'
-import {Pressable, type StyleProp, View, type ViewStyle} from 'react-native'
-import Animated, {LinearTransition} from 'react-native-reanimated'
+import {createContext, useCallback, useContext, useMemo} from 'react'
+import {
+  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,
···
 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
···
   focused: boolean
 }
 
-const ItemContext = React.createContext<ItemState>({
+const ItemContext = createContext<ItemState>({
   name: '',
   selected: false,
   disabled: false,
···
 })
 ItemContext.displayName = 'ToggleItemContext'
 
-const GroupContext = React.createContext<{
+const GroupContext = createContext<{
   values: string[]
   disabled: boolean
   type: 'radio' | 'checkbox'
···
   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({
···
 }: 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}) => {
···
     [type, onChange, values],
   )
 
-  React.useEffect(() => {
-    if (type === 'checkbox') {
-      if (
-        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 maxReached = !!(
+    type === 'checkbox' &&
+    maxSelections &&
+    values.length >= maxSelections
+  )
 
-  const context = React.useMemo(
+  const context = useMemo(
     () => ({
       values,
       type,
···
     disabled: groupDisabled,
     setFieldValue,
     maxSelectionsReached,
-  } = React.useContext(GroupContext)
+  } = useContext(GroupContext)
   const {
     state: hovered,
     onIn: onHoverIn,
···
     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,
···
       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,
···
 
   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,
-        borderColor: t.palette.primary_600,
+        backgroundColor: t.palette.primary_400,
+        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,
       })
     }
   }
···
         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) {
···
       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 {
···
       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 {baseStyles, baseHoverStyles, indicatorStyles} =
-    createSharedToggleStyles({
-      theme: t,
-      hovered,
-      focused,
-      selected,
-      disabled,
-      isInvalid,
-    })
+  const {selected, hovered, disabled, isInvalid} = useItemContext()
+  const {baseStyles, baseHoverStyles, indicatorStyles} = useMemo(() => {
+    const base: ViewStyle[] = []
+    const baseHover: ViewStyle[] = []
+    const indicator: ViewStyle[] = []
+
+    if (selected) {
+      base.push({
+        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: 24,
-          width: 36,
+          height: 28,
+          width: 48,
           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,
-            width: 16,
+            backgroundColor: t.palette.white,
+            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,
         ]}
       />
···
 export function Radio() {
   const t = useTheme()
   const {selected, hovered, focused, disabled, isInvalid} =
-    React.useContext(ItemContext)
+    useContext(ItemContext)
   const {baseStyles, baseHoverStyles, indicatorStyles} =
     createSharedToggleStyles({
       theme: t,
···
         a.align_center,
         a.rounded_full,
         t.atoms.border_contrast_high,
+        a.transition_color,
         {
           borderWidth: 1,
-          height: 24,
-          width: 24,
+          height: 25,
+          width: 25,
+          margin: -1,
         },
         baseStyles,
         hovered ? baseHoverStyles : {},
       ]}>
-      {selected ? (
+      {selected && (
         <View
           style={[
             a.absolute,
             a.rounded_full,
-            {height: 16, width: 16},
-            selected
-              ? {
-                  backgroundColor: t.palette.primary_500,
-                }
-              : {},
+            {height: 12, width: 12},
+            {backgroundColor: t.palette.white},
             indicatorStyles,
           ]}
         />
-      ) : null}
+      )}
     </View>
   )
 }

src/components/forms/Toggle/Panel.tsx

···
+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/ToggleButton.tsx

···
-import React from 'react'
+import {useMemo} from 'react'
 import {
   type AccessibilityProps,
   type TextStyle,
···
   multiple?: boolean
 }
 
+/**
+ * @deprecated - use SegmentedControl
+ */
 export function Group({children, multiple, ...props}: GroupProps) {
   const t = useTheme()
   return (
···
   )
 }
 
+/**
+ * @deprecated - use SegmentedControl
+ */
 export function Button({children, ...props}: ItemProps) {
   return (
     <Toggle.Item {...props} style={[a.flex_grow, a.flex_1]}>
···
   const t = useTheme()
   const state = Toggle.useItemContext()
 
-  const {baseStyles, hoverStyles, activeStyles} = React.useMemo(() => {
+  const {baseStyles, hoverStyles, activeStyles} = useMemo(() => {
     const base: ViewStyle[] = []
     const hover: ViewStyle[] = []
     const active: ViewStyle[] = []
···
   )
 }
 
+/**
+ * @deprecated - use SegmentedControl
+ */
 export function ButtonText({children}: {children: React.ReactNode}) {
   const t = useTheme()
   const state = Toggle.useItemContext()
 
-  const textStyles = React.useMemo(() => {
+  const textStyles = useMemo(() => {
     const text: TextStyle[] = []
     if (state.selected) {
       text.push(t.atoms.text_inverted)

src/components/icons/Chevron.tsx

···
 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

···
 } & Omit<SvgProps, 'style' | 'size'>
 
 export const sizes = {
+  '2xs': 8,
   xs: 12,
   sm: 16,
   md: 20,

src/components/verification/VerificationsDialog.tsx

···
   verificationState: FullVerificationState
 }) {
   return (
-    <Dialog.Outer control={control}>
+    <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
       <Dialog.Handle />
       <Inner
         control={control}

src/lib/media/manip.ts

···
     return
   }
 
-  // we're currently relying on the fact our CDN only serves pngs
+  // we're currently relying on the fact our CDN only serves jpegs
   // -prf
-  const imageUri = await downloadImage(uri, createPath('png'), 5e3)
-  const imagePath = await moveToPermanentPath(imageUri, '.png')
+  const imageUri = await downloadImage(uri, createPath('jpg'), 15e3)
+  const imagePath = await moveToPermanentPath(imageUri, '.jpg')
   safeDeleteAsync(imageUri)
   await Sharing.shareAsync(imagePath, {
-    mimeType: 'image/png',
-    UTI: 'image/png',
+    mimeType: 'image/jpeg',
+    UTI: 'image/jpeg',
   })
 }
 
···
 export async function saveImageToMediaLibrary({uri}: {uri: string}) {
   // download the file to cache
   // NOTE
-  // assuming PNG
-  // we're currently relying on the fact our CDN only serves pngs
+  // assuming JPEG
+  // we're currently relying on the fact our CDN only serves jpegs
   // -prf
-  const imageUri = await downloadImage(uri, createPath('png'), 5e3)
-  const imagePath = await moveToPermanentPath(imageUri, '.png')
+  const imageUri = await downloadImage(uri, createPath('jpg'), 15e3)
+  const imagePath = await moveToPermanentPath(imageUri, '.jpg')
 
   // save
   try {

src/lib/media/picker.e2e.tsx

···
 
   return {
     path: item.path,
-    mime: item.mime,
+    mime: item.mimeType,
     size: item.size,
     width: item.width,
     height: item.height,

src/lib/media/picker.tsx

···
 import ExpoImageCropTool, {type OpenCropperOptions} from 'expo-image-crop-tool'
 import {type ImagePickerOptions, launchCameraAsync} from 'expo-image-picker'
+import {t} from '@lingui/macro'
 
 export {
   openPicker,
···
 
 export async function openCropper(opts: OpenCropperOptions) {
   const item = await ExpoImageCropTool.openCropperAsync({
+    doneButtonText: t`Done`,
+    cancelButtonText: t`Cancel`,
     ...opts,
     format: 'jpeg',
   })
 
   return {
     path: item.path,
-    mime: item.mime,
+    mime: item.mimeType,
     size: item.size,
     width: item.width,
     height: item.height,

src/lib/strings/time.ts

···
 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/locale/locales/en/messages.po

···
 msgid "Add app password"
 msgstr ""
 
-#: src/screens/Settings/AppPasswords.tsx:75
-#: src/screens/Settings/AppPasswords.tsx:83
+#: src/screens/Settings/AppPasswords.tsx:73
+#: src/screens/Settings/AppPasswords.tsx:81
 #: src/screens/Settings/components/AddAppPasswordDialog.tsx:111
 msgid "Add App Password"
 msgstr ""
···
 msgid "Allow replies from:"
 msgstr ""
 
-#: src/screens/Settings/AppPasswords.tsx:200
+#: src/screens/Settings/AppPasswords.tsx:199
 msgid "Allows access to direct messages"
 msgstr ""
 
···
 msgid "App Password"
 msgstr ""
 
-#: src/screens/Settings/AppPasswords.tsx:147
+#: src/screens/Settings/AppPasswords.tsx:145
 msgctxt "toast"
 msgid "App password deleted"
 msgstr ""
···
 msgstr ""
 
 #: src/Navigation.tsx:351
-#: src/screens/Settings/AppPasswords.tsx:51
+#: src/screens/Settings/AppPasswords.tsx:49
 msgid "App Passwords"
 msgstr ""
 
···
 msgid "Archived post"
 msgstr ""
 
-#: src/screens/Settings/AppPasswords.tsx:209
+#: src/screens/Settings/AppPasswords.tsx:208
 msgid "Are you sure you want to delete the app password \"{0}\"?"
 msgstr ""
 
···
 #: src/screens/Deactivated.tsx:158
 #: src/screens/Profile/Header/EditProfileDialog.tsx:218
 #: src/screens/Profile/Header/EditProfileDialog.tsx:226
-#: src/screens/Search/Shell.tsx:369
+#: src/screens/Search/Shell.tsx:370
 #: src/screens/Settings/AppIconSettings/index.tsx:44
 #: src/screens/Settings/AppIconSettings/index.tsx:230
 #: src/screens/Settings/components/ChangeHandleDialog.tsx:78
···
 msgid "Create user list"
 msgstr ""
 
-#: src/screens/Settings/AppPasswords.tsx:174
+#: src/screens/Settings/AppPasswords.tsx:172
 msgid "Created {0}"
 msgstr ""
 
···
 #: src/components/PostControls/PostMenu/PostMenuItems.tsx:736
 #: src/screens/Messages/components/ChatStatusInfo.tsx:55
 #: src/screens/ProfileList/components/MoreOptionsMenu.tsx:280
-#: src/screens/Settings/AppPasswords.tsx:212
+#: src/screens/Settings/AppPasswords.tsx:211
 #: src/screens/StarterPack/StarterPackScreen.tsx:601
 #: src/screens/StarterPack/StarterPackScreen.tsx:690
 #: src/screens/StarterPack/StarterPackScreen.tsx:762
···
 msgid "Delete Account <0>\"</0><1>{0}</1><2>\"</2>"
 msgstr ""
 
-#: src/screens/Settings/AppPasswords.tsx:187
+#: src/screens/Settings/AppPasswords.tsx:185
 msgid "Delete app password"
 msgstr ""
 
-#: src/screens/Settings/AppPasswords.tsx:207
+#: src/screens/Settings/AppPasswords.tsx:206
 msgid "Delete app password?"
 msgstr ""
 
···
 msgid "Does not include nudity."
 msgstr ""
 
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:517
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:522
 msgid "Domain verified!"
 msgstr ""
 
···
 msgid "Failed to add to starter pack"
 msgstr ""
 
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:597
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:602
 msgid "Failed to change handle. Please try again."
 msgstr ""
 
···
 msgid "Find people to follow"
 msgstr ""
 
-#: src/screens/Search/Shell.tsx:525
+#: src/screens/Search/Shell.tsx:526
 msgid "Find posts, users, and feeds on Bluesky"
 msgstr ""
 
···
 msgid "Handle"
 msgstr ""
 
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:601
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:606
 msgid "Handle already taken. Please try a different one."
 msgstr ""
 
···
 msgid "Handle changed!"
 msgstr ""
 
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:605
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:610
 msgid "Handle too long. Please try a shorter one."
 msgstr ""
 
···
 msgid "Invalid 2FA confirmation code."
 msgstr ""
 
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:607
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:612
 msgid "Invalid handle. Please try a different one."
 msgstr ""
 
···
 msgid "Never lose access to your followers or data."
 msgstr ""
 
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:577
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:582
 msgid "Nevermind, create a handle for me"
 msgstr ""
 
···
 msgid "No ads, no invasive tracking, no engagement traps. Bluesky respects your time and attention."
 msgstr ""
 
-#: src/screens/Settings/AppPasswords.tsx:108
+#: src/screens/Settings/AppPasswords.tsx:106
 msgid "No app passwords yet"
 msgstr ""
 
···
 #: src/components/Lists.tsx:173
 #: src/components/StarterPack/ProfileStarterPacks.tsx:328
 #: src/components/StarterPack/ProfileStarterPacks.tsx:337
-#: src/screens/Settings/AppPasswords.tsx:59
+#: src/screens/Settings/AppPasswords.tsx:57
 #: src/screens/Settings/components/ChangeHandleDialog.tsx:106
 #: src/view/screens/Profile.tsx:125
 msgid "Oops!"
···
 msgid "Quotes of this post"
 msgstr ""
 
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:610
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:615
 msgid "Rate limit exceeded – you've tried to change your handle too many times in a short period. Please wait a minute before trying again."
 msgstr ""
 
···
 
 #: src/screens/Profile/ProfileFeed/index.tsx:93
 #: src/screens/ProfileList/components/ErrorScreen.tsx:35
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:569
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:574
 #: src/screens/VideoFeed/index.tsx:1163
 #: src/view/screens/NotFound.tsx:60
 msgid "Returns to previous page"
···
 #: src/components/forms/SearchInput.tsx:34
 #: src/components/forms/SearchInput.tsx:36
 #: src/screens/Search/Shell.tsx:327
-#: src/screens/Search/Shell.tsx:513
+#: src/screens/Search/Shell.tsx:514
 #: src/view/shell/bottom-bar/BottomBar.tsx:198
 msgid "Search"
 msgstr ""
···
 msgid "Select account"
 msgstr ""
 
-#: src/components/AppLanguageDropdown.tsx:60
+#: src/components/AppLanguageDropdown.tsx:61
 msgid "Select an app language"
 msgstr ""
 
···
 msgid "There was an issue fetching the list. Tap here to try again."
 msgstr ""
 
-#: src/screens/Settings/AppPasswords.tsx:60
+#: src/screens/Settings/AppPasswords.tsx:58
 msgid "There was an issue fetching your app passwords"
 msgstr ""
 
···
 msgid "This feed is no longer online. We are showing <0>Discover</0> instead."
 msgstr ""
 
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:603
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:608
 msgid "This handle is reserved. Please try a different one."
 msgstr ""
 
···
 msgid "Update email"
 msgstr ""
 
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:536
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:557
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:541
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:562
 msgid "Update to {domain}"
 msgstr ""
 
···
 msgid "Uploading video..."
 msgstr ""
 
-#: src/screens/Settings/AppPasswords.tsx:67
+#: src/screens/Settings/AppPasswords.tsx:65
 msgid "Use app passwords to sign in to other Bluesky clients without giving full access to your account or password."
 msgstr ""
 
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:568
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:573
 msgid "Use default provider"
 msgstr ""
 
···
 msgid "Verify code"
 msgstr ""
 
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:538
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:559
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:543
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:564
 msgid "Verify DNS Record"
 msgstr ""
 
···
 msgid "Verify now"
 msgstr ""
 
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:539
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:561
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:544
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:566
 msgid "Verify Text File"
 msgstr ""
 
···
 msgid "Your choice will be remembered for future links. You can change it at any time in settings."
 msgstr ""
 
-#: src/screens/Settings/components/ChangeHandleDialog.tsx:523
+#: src/screens/Settings/components/ChangeHandleDialog.tsx:528
 msgid "Your current handle <0>{0}</0> will automatically remain reserved for you. You can switch back to it at any time from this account."
 msgstr ""
 

src/screens/PostThread/components/ThreadItemAnchor.tsx

···
       <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/Profile/Header/Handle.tsx

···
       pointerEvents={disableTaps ? 'none' : isIOS ? 'auto' : 'box-none'}>
       <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]}>
+        <View style={[t.atoms.bg_contrast_50, a.rounded_xs, a.px_sm, a.py_xs]}>
           <Text style={[t.atoms.text, a.text_sm]}>
             <Trans>Follows you</Trans>
           </Text>

src/screens/Search/Shell.tsx

···
                     size="large"
                     variant="ghost"
                     color="secondary"
-                    style={[a.px_sm, a.rounded_sm]}
+                    shape="rectangular"
+                    style={[a.px_sm]}
                     onPress={onPressCancelSearch}
                     hitSlop={HITSLOP_10}>
                     <ButtonText>

src/screens/Settings/AppPasswords.tsx

···
   FadeOut,
   LayoutAnimationConfig,
   LinearTransition,
-  StretchOutY,
 } from 'react-native-reanimated'
 import {type ComAtprotoServerListAppPasswords} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
···
 
 import {type CommonNavigatorParams} from '#/lib/routes/types'
 import {cleanError} from '#/lib/strings/errors'
-import {isWeb} from '#/platform/detection'
 import {
   useAppPasswordDeleteMutation,
   useAppPasswordsQuery,
···
                         key={appPassword.name}
                         style={a.w_full}
                         entering={FadeIn}
-                        exiting={isWeb ? FadeOut : StretchOutY}
+                        exiting={FadeOut}
                         layout={LinearTransition.delay(150)}>
                         <SettingsList.Item>
                           <AppPasswordCard appPassword={appPassword} />
···
           variant="ghost"
           color="negative"
           size="small"
+          shape="square"
           style={[a.bg_transparent]}
           onPress={() => deleteControl.open()}>
           <ButtonIcon icon={TrashIcon} />

src/screens/Settings/AppearanceSettings.tsx

···
 import {isNative} from '#/platform/detection'
 import {useSetThemePrefs, useThemePrefs} from '#/state/shell'
 import {SettingsListItem as AppIconSettingsListItem} from '#/screens/Settings/AppIconSettings/SettingsListItem'
-import {atoms as a, native, useAlf, useTheme} from '#/alf'
-import * as ToggleButton from '#/components/forms/ToggleButton'
+import {type Alf, atoms as a, native, useAlf, useTheme} from '#/alf'
+import * as SegmentedControl from '#/components/forms/SegmentedControl'
 import {type Props as SVGIconProps} from '#/components/icons/common'
 import {Moon_Stroke2_Corner0_Rounded as MoonIcon} from '#/components/icons/Moon'
 import {Phone_Stroke2_Corner0_Rounded as PhoneIcon} from '#/components/icons/Phone'
···
   const {setColorMode, setDarkTheme} = useSetThemePrefs()
 
   const onChangeAppearance = useCallback(
-    (keys: string[]) => {
-      const appearance = keys.find(key => key !== colorMode) as
-        | 'system'
-        | 'light'
-        | 'dark'
-        | undefined
-      if (!appearance) return
-      setColorMode(appearance)
+    (value: 'light' | 'system' | 'dark') => {
+      setColorMode(value)
     },
-    [setColorMode, colorMode],
+    [setColorMode],
   )
 
   const onChangeDarkTheme = useCallback(
-    (keys: string[]) => {
-      const theme = keys.find(key => key !== darkTheme) as
-        | 'dim'
-        | 'dark'
-        | undefined
-      if (!theme) return
-      setDarkTheme(theme)
+    (value: 'dim' | 'dark') => {
+      setDarkTheme(value)
     },
-    [setDarkTheme, darkTheme],
+    [setDarkTheme],
   )
 
   const onChangeFontFamily = useCallback(
-    (values: string[]) => {
-      const next = values[0] === 'system' ? 'system' : 'theme'
-      fonts.setFontFamily(next)
+    (value: 'system' | 'theme') => {
+      fonts.setFontFamily(value)
     },
     [fonts],
   )
 
   const onChangeFontScale = useCallback(
-    (values: string[]) => {
-      const next = values[0] || ('0' as any)
-      fonts.setFontScale(next)
+    (value: Alf['fonts']['scale']) => {
+      fonts.setFontScale(value)
     },
     [fonts],
   )
···
                   name: 'dark',
                 },
               ]}
-              values={[colorMode]}
+              value={colorMode}
               onChange={onChangeAppearance}
             />
 
···
                       name: 'dark',
                     },
                   ]}
-                  values={[darkTheme ?? 'dim']}
+                  value={darkTheme ?? 'dim'}
                   onChange={onChangeDarkTheme}
                 />
               </Animated.View>
···
                     name: 'theme',
                   },
                 ]}
-                values={[fonts.family]}
+                value={fonts.family}
                 onChange={onChangeFontFamily}
               />
 
···
                     name: '1',
                   },
                 ]}
-                values={[fonts.scale]}
+                value={fonts.scale}
                 onChange={onChangeFontScale}
               />
 
···
   )
 }
 
-export function AppearanceToggleButtonGroup({
+export function AppearanceToggleButtonGroup<T extends string>({
   title,
   description,
   icon: Icon,
   items,
-  values,
+  value,
   onChange,
 }: {
   title: string
···
   icon: React.ComponentType<SVGIconProps>
   items: {
     label: string
-    name: string
+    name: T
   }[]
-  values: string[]
-  onChange: (values: string[]) => void
+  value: T
+  onChange: (value: T) => void
 }) {
   const t = useTheme()
   return (
···
             {description}
           </Text>
         )}
-        <ToggleButton.Group label={title} values={values} onChange={onChange}>
+        <SegmentedControl.Root
+          type="radio"
+          label={title}
+          value={value}
+          onChange={onChange}>
           {items.map(item => (
-            <ToggleButton.Button
+            <SegmentedControl.Item
               key={item.name}
               label={item.label}
-              name={item.name}>
-              <ToggleButton.ButtonText>{item.label}</ToggleButton.ButtonText>
-            </ToggleButton.Button>
+              value={item.name}>
+              <SegmentedControl.ItemText>
+                {item.label}
+              </SegmentedControl.ItemText>
+            </SegmentedControl.Item>
           ))}
-        </ToggleButton.Group>
+        </SegmentedControl.Root>
       </SettingsList.Group>
     </>
   )

src/screens/Settings/LanguageSettings.tsx

···
                 label={_(msg`Select content languages`)}
                 size="small"
                 color="secondary"
-                variant="solid"
+                shape="rectangular"
                 onPress={onPressContentLanguages}
                 style={[a.justify_start, web({maxWidth: 400})]}>
                 <ButtonIcon

src/screens/Settings/components/ChangeHandleDialog.tsx

···
 import {Admonition} from '#/components/Admonition'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import * as SegmentedControl from '#/components/forms/SegmentedControl'
 import * as TextField from '#/components/forms/TextField'
-import * as ToggleButton from '#/components/forms/ToggleButton'
 import {
   ArrowLeft_Stroke2_Corner0_Rounded as ArrowLeftIcon,
   ArrowRight_Stroke2_Corner0_Rounded as ArrowRightIcon,
···
             />
           </TextField.Root>
         </View>
-        <ToggleButton.Group
+        <SegmentedControl.Root
           label={_(msg`Choose domain verification method`)}
-          values={[dnsPanel ? 'dns' : 'file']}
-          onChange={values => setDNSPanel(values[0] === 'dns')}>
-          <ToggleButton.Button name="dns" label={_(msg`DNS Panel`)}>
-            <ToggleButton.ButtonText>
+          type="tabs"
+          value={dnsPanel ? 'dns' : 'file'}
+          onChange={values => setDNSPanel(values === 'dns')}>
+          <SegmentedControl.Item value="dns" label={_(msg`DNS Panel`)}>
+            <SegmentedControl.ItemText>
               <Trans>DNS Panel</Trans>
-            </ToggleButton.ButtonText>
-          </ToggleButton.Button>
-          <ToggleButton.Button name="file" label={_(msg`No DNS Panel`)}>
-            <ToggleButton.ButtonText>
+            </SegmentedControl.ItemText>
+          </SegmentedControl.Item>
+          <SegmentedControl.Item value="file" label={_(msg`No DNS Panel`)}>
+            <SegmentedControl.ItemText>
               <Trans>No DNS Panel</Trans>
-            </ToggleButton.ButtonText>
-          </ToggleButton.Button>
-        </ToggleButton.Group>
+            </SegmentedControl.ItemText>
+          </SegmentedControl.Item>
+        </SegmentedControl.Root>
         {dnsPanel ? (
           <>
             <Text>
···
               value={currentAccount?.did ?? ''}
               label={_(msg`Copy DID`)}
               size="large"
-              variant="solid"
+              shape="rectangular"
               color="secondary"
-              style={[a.px_md, a.border, t.atoms.border_contrast_low]}>
+              style={[
+                a.px_md,
+                a.border,
+                t.atoms.border_contrast_low,
+                t.atoms.bg_contrast_25,
+              ]}>
               <Text style={[a.text_md, a.flex_1]}>{currentAccount?.did}</Text>
               <ButtonIcon icon={CopyIcon} />
             </CopyButton>

src/screens/Settings/components/SettingsList.tsx

···
    * also so that we can calculate transforms.
    */
   const iconSize = {
+    '2xs': 8,
     xs: 12,
     sm: 16,
     md: 20,

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

···
 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,
···
 
 export function GlobalGestureEventsProvider({
   children,
+  style,
 }: {
   children: React.ReactNode
+  style?: StyleProp<ViewStyle>
 }) {
   const refCount = useRef(0)
   const events = useMemo(() => new EventEmitter<GlobalGestureEvents>(), [])
···
   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

···
 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({
···
         queryKey: preferencesQueryKey,
       })
     },
+    onError,
+    onSettled,
   })
 }

src/storage/hooks/threadgate-nudged.ts

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

src/storage/schema.ts

···
   // deer
   deerGateCache: string
   activitySubscriptionsNudged?: boolean
+  threadgateNudged?: boolean
 
   /**
    * Policy update overlays. New IDs are required for each new announcement.

src/view/com/auth/server-input/index.tsx src/components/dialogs/ServerInput.tsx

···
 import {useLingui} from '@lingui/react'
 
 import {BSKY_SERVICE} from '#/lib/constants'
-import {logEvent} from '#/lib/statsig/statsig'
+import {logger} from '#/logger'
 import * as persisted from '#/state/persisted'
 import {useSession} from '#/state/session'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, platform, useBreakpoints, useTheme, web} from '#/alf'
 import {Admonition} from '#/components/Admonition'
 import {Button, ButtonText} from '#/components/Button'
 import * as Dialog from '#/components/Dialog'
+import * as SegmentedControl from '#/components/forms/SegmentedControl'
 import * as TextField from '#/components/forms/TextField'
-import * as ToggleButton from '#/components/forms/ToggleButton'
 import {Globe_Stroke2_Corner0_Rounded as Globe} from '#/components/icons/Globe'
 import {InlineLinkText} from '#/components/Link'
-import {P, Text} from '#/components/Typography'
+import {Text} from '#/components/Typography'
+
+type SegmentedControlOptions = typeof BSKY_SERVICE | 'custom'
 
 export function ServerInputDialog({
   control,
···
   const formRef = useRef<DialogInnerRef>(null)
 
   // persist these options between dialog open/close
-  const [fixedOption, setFixedOption] = useState(BSKY_SERVICE)
+  const [fixedOption, setFixedOption] =
+    useState<SegmentedControlOptions>(BSKY_SERVICE)
   const [previousCustomAddress, setPreviousCustomAddress] = useState('')
 
   const onClose = useCallback(() => {
···
         setPreviousCustomAddress(result)
       }
     }
-    logEvent('signin:hostingProviderPressed', {
+    logger.metric('signin:hostingProviderPressed', {
       hostingProviderDidChange: fixedOption !== BSKY_SERVICE,
     })
   }, [onSelect, fixedOption])
···
     <Dialog.Outer
       control={control}
       onClose={onClose}
-      nativeOptions={{minHeight: height / 2}}>
+      nativeOptions={platform({
+        android: {minHeight: height / 2},
+        ios: {preventExpansion: true},
+      })}>
       <Dialog.Handle />
       <DialogInner
         formRef={formRef}
···
   initialCustomAddress,
 }: {
   formRef: React.Ref<DialogInnerRef>
-  fixedOption: string
-  setFixedOption: (opt: string) => void
+  fixedOption: SegmentedControlOptions
+  setFixedOption: (opt: SegmentedControlOptions) => void
   initialCustomAddress: string
 }) {
   const control = Dialog.useDialogContext()
···
   return (
     <Dialog.ScrollableInner
       accessibilityDescribedBy="dialog-description"
-      accessibilityLabelledBy="dialog-title">
+      accessibilityLabelledBy="dialog-title"
+      style={web({maxWidth: 500})}>
       <View style={[a.relative, a.gap_md, a.w_full]}>
-        <Text nativeID="dialog-title" style={[a.text_2xl, a.font_semi_bold]}>
+        <Text nativeID="dialog-title" style={[a.text_2xl, a.font_bold]}>
           <Trans>Choose your account provider</Trans>
         </Text>
-        <ToggleButton.Group
-          label="Preferences"
-          values={[fixedOption]}
-          onChange={values => setFixedOption(values[0])}>
-          <ToggleButton.Button name={BSKY_SERVICE} label={_(msg`Bluesky`)}>
-            <ToggleButton.ButtonText>{_(msg`Bluesky`)}</ToggleButton.ButtonText>
-          </ToggleButton.Button>
-          <ToggleButton.Button
+        <SegmentedControl.Root
+          type="tabs"
+          label={_(msg`Account provider`)}
+          value={fixedOption}
+          onChange={setFixedOption}>
+          <SegmentedControl.Item
+            testID="bskyServiceSelectBtn"
+            value={BSKY_SERVICE}
+            label={_(msg`Bluesky`)}>
+            <SegmentedControl.ItemText>
+              {_(msg`Bluesky`)}
+            </SegmentedControl.ItemText>
+          </SegmentedControl.Item>
+          <SegmentedControl.Item
             testID="customSelectBtn"
-            name="custom"
+            value="custom"
             label={_(msg`Custom`)}>
-            <ToggleButton.ButtonText>{_(msg`Custom`)}</ToggleButton.ButtonText>
-          </ToggleButton.Button>
-        </ToggleButton.Group>
+            <SegmentedControl.ItemText>
+              {_(msg`Custom`)}
+            </SegmentedControl.ItemText>
+          </SegmentedControl.Item>
+        </SegmentedControl.Root>
 
         {fixedOption === BSKY_SERVICE && isFirstTimeUser && (
-          <Admonition type="tip">
-            <Trans>
-              Bluesky is an open network where you can choose your own provider.
-              If you're new here, we recommend sticking with the default Bluesky
-              Social option.
-            </Trans>
-          </Admonition>
+          <View role="tabpanel">
+            <Admonition type="tip">
+              <Trans>
+                Bluesky is an open network where you can choose your own
+                provider. If you're new here, we recommend sticking with the
+                default Bluesky Social option.
+              </Trans>
+            </Admonition>
+          </View>
         )}
 
         {fixedOption === 'custom' && (
-          <View
-            style={[
-              a.border,
-              t.atoms.border_contrast_low,
-              a.rounded_sm,
-              a.px_md,
-              a.py_md,
-            ]}>
+          <View role="tabpanel">
             <TextField.LabelText nativeID="address-input-label">
               <Trans>Server address</Trans>
             </TextField.LabelText>
···
         )}
 
         <View style={[a.py_xs]}>
-          <P
-            style={[
-              t.atoms.text_contrast_medium,
-              a.text_sm,
-              a.leading_snug,
-              a.flex_1,
-            ]}>
+          <Text
+            style={[t.atoms.text_contrast_medium, a.text_sm, a.leading_snug]}>
             {isFirstTimeUser ? (
               <Trans>
                 If you're a developer, you can host your own server.
···
               to="https://atproto.com/guides/self-hosting">
               <Trans>Learn more.</Trans>
             </InlineLinkText>
-          </P>
+          </Text>
         </View>
 
         <View style={gtMobile && [a.flex_row, a.justify_end]}>
           <Button
             testID="doneBtn"
-            variant="outline"
+            variant="solid"
             color="primary"
-            size="small"
+            size={platform({
+              native: 'large',
+              web: 'small',
+            })}
             onPress={() => control.close()}
             label={_(msg`Done`)}>
-            <ButtonText>{_(msg`Done`)}</ButtonText>
+            <ButtonText>
+              <Trans>Done</Trans>
+            </ButtonText>
           </Button>
         </View>
       </View>

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

···
   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'
 
···
   return (
     <>
       <Button
-        variant="solid"
         color="secondary"
         size="small"
         testID="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 ? (
···
             <Trans>Labels</Trans>
           )}
         </ButtonText>
+        <ButtonIcon icon={TinyChevronIcon} size="2xs" />
       </Button>
 
       <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>

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

···
+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 {native} from '#/alf'
+import {usePostInteractionSettingsMutation} from '#/state/queries/post-interaction-settings'
+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 {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
+import {TinyChevronBottom_Stroke2_Corner0_Rounded as TinyChevronIcon} from '#/components/icons/Chevron'
+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,
···
 }) {
   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'
···
 
   return (
     <>
-      <Button
-        variant="solid"
-        color="secondary"
-        size="small"
-        testID="openReplyGateButton"
-        onPress={onPress}
-        label={label}
-        accessibilityHint={_(
-          msg`Opens a dialog to choose who can reply to this thread`,
-        )}
-        style={[
-          native({
-            paddingHorizontal: 8,
-            paddingVertical: 6,
-          }),
-        ]}>
-        <ButtonIcon icon={anyoneCanInteract ? Earth : Group} />
-        <ButtonText numberOfLines={1}>{label}</ButtonText>
-      </Button>
+      <Tooltip.Outer
+        visible={showTooltip}
+        onVisibleChange={onDismissTooltip}
+        position="top">
+        <Tooltip.Target>
+          <Button
+            color={showTooltip ? 'primary_subtle' : 'secondary'}
+            size="small"
+            testID="openReplyGateButton"
+            onPress={onPress}
+            label={label}
+            accessibilityHint={_(
+              msg`Opens a dialog to choose who can interact with this post`,
+            )}>
+            <ButtonIcon icon={anyoneCanInteract ? EarthIcon : GroupIcon} />
+            <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={() => {
-          control.close()
+          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/com/util/images/AutoSizedImage.tsx

···
   useHighQualityImages,
 } from '#/state/preferences/high-quality-images'
 import {useLargeAltBadgeEnabled} from '#/state/preferences/large-alt-badge'
-import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {atoms as a, useTheme} from '#/alf'
 import {ArrowsDiagonalOut_Stroke2_Corner0_Rounded as Fullscreen} from '#/components/icons/ArrowsDiagonal'
 import {MediaInsetBorder} from '#/components/MediaInsetBorder'
 import {Text} from '#/components/Typography'
···
   children: React.ReactNode
 }) {
   const t = useTheme()
-  const {gtMobile} = useBreakpoints()
   /**
    * Computed as a % value to apply as `paddingTop`, this basically controls
    * the height of the image.
    */
   const outerAspectRatio = React.useMemo<DimensionValue>(() => {
-    const ratio =
-      isNative || !gtMobile
-        ? Math.min(1 / aspectRatio, minMobileAspectRatio ?? 16 / 9) // 9:16 bounding box
-        : Math.min(1 / aspectRatio, 1) // 1:1 bounding box
+    const ratio = isNative
+      ? Math.min(1 / aspectRatio, minMobileAspectRatio ?? 16 / 9) // 9:16 bounding box
+      : Math.min(1 / aspectRatio, 1) // 1:1 bounding box
     return `${ratio * 100}%`
-  }, [aspectRatio, gtMobile, minMobileAspectRatio])
+  }, [aspectRatio, minMobileAspectRatio])
 
   return (
     <View style={[a.w_full]}>

src/view/screens/Storybook/Forms.tsx

···
 import {atoms as a} from '#/alf'
 import {Button, ButtonText} from '#/components/Button'
 import {DateField, LabelText} from '#/components/forms/DateField'
+import * as SegmentedControl from '#/components/forms/SegmentedControl'
 import * as TextField from '#/components/forms/TextField'
 import * as Toggle from '#/components/forms/Toggle'
 import * as ToggleButton from '#/components/forms/ToggleButton'
···
   const [toggleGroupBValues, setToggleGroupBValues] = React.useState(['a', 'b'])
   const [toggleGroupCValues, setToggleGroupCValues] = React.useState(['a', 'b'])
   const [toggleGroupDValues, setToggleGroupDValues] = React.useState(['warn'])
+  const [segmentedControlValue, setSegmentedControlValue] = React.useState<
+    'hide' | 'warn' | 'show'
+  >('warn')
 
   const [value, setValue] = React.useState('')
   const [date, setDate] = React.useState('2001-01-01')
···
           </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"
···
             <ToggleButton.ButtonText>Show</ToggleButton.ButtonText>
           </ToggleButton.Button>
         </ToggleButton.Group>
+      </View>
 
-        <View>
-          <ToggleButton.Group
-            label="Preferences"
-            values={toggleGroupDValues}
-            onChange={setToggleGroupDValues}>
-            <ToggleButton.Button name="hide" label="Hide">
-              <ToggleButton.ButtonText>Hide</ToggleButton.ButtonText>
-            </ToggleButton.Button>
-            <ToggleButton.Button name="warn" label="Warn">
-              <ToggleButton.ButtonText>Warn</ToggleButton.ButtonText>
-            </ToggleButton.Button>
-            <ToggleButton.Button name="show" label="Show">
-              <ToggleButton.ButtonText>Show</ToggleButton.ButtonText>
-            </ToggleButton.Button>
-          </ToggleButton.Group>
-        </View>
+      <View style={[a.gap_md, a.align_start, a.w_full]}>
+        <H3>SegmentedControl</H3>
+
+        <SegmentedControl.Root
+          label="Preferences"
+          type="radio"
+          value={segmentedControlValue}
+          onChange={setSegmentedControlValue}>
+          <SegmentedControl.Item value="hide" label="Hide">
+            <SegmentedControl.ItemText>Hide</SegmentedControl.ItemText>
+          </SegmentedControl.Item>
+          <SegmentedControl.Item value="warn" label="Warn">
+            <SegmentedControl.ItemText>Warn</SegmentedControl.ItemText>
+          </SegmentedControl.Item>
+          <SegmentedControl.Item value="show" label="Show">
+            <SegmentedControl.ItemText>Show</SegmentedControl.ItemText>
+          </SegmentedControl.Item>
+        </SegmentedControl.Root>
       </View>
     </View>
   )

src/view/shell/Composer.ios.tsx

···
 
 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()
···
       animationType="slide"
       onRequestClose={() => ref.current?.onPressCancel()}>
       <View style={[t.atoms.bg, a.flex_1]}>
-        <ComposePost
-          cancelRef={ref}
-          replyTo={state?.replyTo}
-          onPost={state?.onPost}
-          onPostSuccess={state?.onPostSuccess}
-          quote={state?.quote}
-          mention={state?.mention}
-          text={state?.text}
-          imageUris={state?.imageUris}
-          videoUri={state?.videoUri}
-        />
+        <TooltipSheetCompatProvider>
+          <ComposePost
+            cancelRef={ref}
+            replyTo={state?.replyTo}
+            onPost={state?.onPost}
+            onPostSuccess={state?.onPostSuccess}
+            quote={state?.quote}
+            mention={state?.mention}
+            text={state?.text}
+            imageUris={state?.imageUris}
+            videoUri={state?.videoUri}
+          />
+        </TooltipSheetCompatProvider>
       </View>
     </Modal>
   )

yarn.lock

···
   resolved "https://registry.yarnpkg.com/expo-haptics/-/expo-haptics-15.0.7.tgz#384bb873d7eca7b141f85e4f300b75eab68ebfe9"
   integrity sha512-7flWsYPrwjJxZ8x82RiJtzsnk1Xp9ahnbd9PhCy3NnsemyMApoWIEUr4waPqFr80DtiLZfhD9VMLL1CKa8AImQ==
 
-expo-image-crop-tool@^0.1.8:
-  version "0.1.8"
-  resolved "https://registry.yarnpkg.com/expo-image-crop-tool/-/expo-image-crop-tool-0.1.8.tgz#3e9f34825cf5d7dad1ef2786615571b078ece4e7"
-  integrity sha512-UlS1zV7JewUzuZzVT9aA0vFD1+dt+pU60ILgt3ntQl4G9SeDJ9bB/+ylz9dzn6BjZecUQkGJmbCQ3H7jGZeZMA==
+expo-image-crop-tool@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/expo-image-crop-tool/-/expo-image-crop-tool-0.4.0.tgz#c376b0695e8b2bf6b38fff5595ce30aaf9cddd64"
+  integrity sha512-2KZI016tb2i0yb0ZRMdH8h1I4YofD78fG/l6KrQTFzy4DtKaQlmJwU2VSJ8AYV5/nxusbHxgro7RQnr1BQ5lJg==
 
 expo-image-loader@~6.0.0:
   version "6.0.0"