Design tweaks for mod pref dialog

src/components/forms/Toggle.tsx

@@ -49,12 +49,12 @@ const GroupContext = React.createContext<{
   setFieldValue: () => {},
 })
 
-export type GroupProps = React.PropsWithChildren<{
+export type GroupProps<T = string> = React.PropsWithChildren<{
   type?: 'radio' | 'checkbox'
-  values: string[]
+  values: T[]
   maxSelections?: number
   disabled?: boolean
-  onChange: (value: string[]) => void
+  onChange: (value: T[]) => void
   label: string
 }>
 
@@ -73,7 +73,7 @@ export function useItemContext() {
   return React.useContext(ItemContext)
 }
 
-export function Group({
+export function Group<ValuesType = string>({
   children,
   values: providedValues,
   onChange,
@@ -81,13 +81,13 @@ export function Group({
   type = 'checkbox',
   maxSelections,
   label,
-}: GroupProps) {
+}: GroupProps<ValuesType>) {
   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<
-    (props: {name: string; value: boolean}) => void
+    (props: {name: ValuesType; value: boolean}) => void
   >(
     ({name, value}) => {
       if (type === 'checkbox') {

src/components/moderation/ModerationLabelPref.tsx

@@ -19,10 +19,11 @@ import {useTheme, atoms as a} from '#/alf'
 import {Text} from '#/components/Typography'
 import {InlineLink} from '#/components/Link'
 import * as Dialog from '#/components/Dialog'
-import {Button, ButtonText, ButtonIcon} from '#/components/Button'
+import {Button} from '#/components/Button'
 import {CircleInfo_Stroke2_Corner0_Rounded as CircleInfo} from '../icons/CircleInfo'
-import {Check_Stroke2_Corner0_Rounded as Check} from '../icons/Check'
 import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '../icons/Gear'
+import * as Toggle from '#/components/forms/Toggle'
+import {Divider} from '#/components/Divider'
 
 export function ModerationLabelPref({
   labelValueDefinition,
@@ -51,6 +52,7 @@ export function ModerationLabelPref({
     savedPref ??
     labelValueDefinition.defaultSetting ??
     'warn'
+  const [selected, setSelected] = React.useState<LabelPreference[]>([pref])
 
   const settingDesc = useLabelBehaviorDescription(labelValueDefinition, pref)
   const hideLabel = useLabelLongBehaviorDescription(
@@ -81,8 +83,31 @@ export function ModerationLabelPref({
     adultOnly && !preferences?.moderationPrefs.adultContentEnabled
   const cantConfigure = isGlobalLabel || adultDisabled
 
-  const onSelectPref = (newPref: LabelPreference) =>
+  const onSettingChange = React.useCallback(
-    mutate({label: identifier, visibility: newPref, labelerDid})
+    (newPrefs: LabelPreference[]) => {
+      setSelected(newPrefs)
+      mutate({label: identifier, visibility: newPrefs[0], labelerDid})
+    },
+    [mutate, labelerDid, identifier],
+  )
+
+  const settings = [
+    {
+      pref: 'hide',
+      label: hideLabel,
+    },
+    canWarn && {
+      pref: 'warn',
+      label: warnLabel,
+    },
+    {
+      pref: 'ignore',
+      label: ignoreLabel,
+    },
+  ].filter(Boolean) as {
+    pref: LabelPreference
+    label: string
+  }[]
 
   return (
     <>
@@ -180,60 +205,42 @@ export function ModerationLabelPref({
           )}
 
           {!cantConfigure && (
+            <Toggle.Group<LabelPreference>
+              type="radio"
+              values={selected}
+              onChange={onSettingChange}
+              label={_(
+                msg`Configure filtering settings for ${labelStrings.name}`,
+              )}>
+              <View
+                style={[
+                  a.rounded_md,
+                  a.overflow_hidden,
+                  t.atoms.bg_contrast_25,
+                ]}>
+                {settings.map((s, i) => (
                   <>
-              <Button
+                    {i !== 0 && <Divider />}
-                label={hideLabel}
-                size="large"
-                variant="solid"
-                color={pref === 'hide' ? 'primary' : 'secondary'}
-                onPress={() => {
-                  onSelectPref('hide')
-                  control.close()
-                }}>
-                <ButtonText style={[a.flex_1, a.text_left]}>
-                  {hideLabel}
-                </ButtonText>
-                {pref === 'hide' && (
-                  <ButtonIcon icon={Check} position="right" />
-                )}
-              </Button>
 
-              {canWarn && (
+                    <Toggle.Item name={s.pref} label={s.label}>
-                <Button
+                      <View
-                  label={warnLabel}
+                        style={[
-                  size="large"
+                          a.flex_1,
-                  variant="solid"
+                          a.flex_row,
-                  color={pref === 'warn' ? 'primary' : 'secondary'}
+                          a.align_center,
-                  onPress={() => {
+                          a.gap_md,
-                    onSelectPref('warn')
+                          a.py_md,
-                    control.close()
+                          a.px_lg,
-                  }}>
+                          t.atoms.bg_contrast_25,
-                  <ButtonText style={[a.flex_1, a.text_left]}>
+                        ]}>
-                    {warnLabel}
+                        <Toggle.Radio />
-                  </ButtonText>
+                        <Text>{s.label}</Text>
-                  {pref === 'warn' && (
+                      </View>
-                    <ButtonIcon icon={Check} position="right" />
+                    </Toggle.Item>
-                  )}
-                </Button>
-              )}
-
-              <Button
-                label={ignoreLabel}
-                size="large"
-                variant="solid"
-                color={!disabled && pref === 'ignore' ? 'primary' : 'secondary'}
-                onPress={() => {
-                  onSelectPref('ignore')
-                  control.close()
-                }}>
-                <ButtonText style={[a.flex_1, a.text_left]}>
-                  {ignoreLabel}
-                </ButtonText>
-                {pref === 'ignore' && (
-                  <ButtonIcon icon={Check} position="right" />
-                )}
-              </Button>
                   </>
+                ))}
+              </View>
+            </Toggle.Group>
           )}
 
           <Dialog.Close />