Improve Moderation screen and dialog

src/components/Link.tsx

@@ -171,11 +171,18 @@ export type LinkProps = Omit<BaseLinkProps, 'warnOnMismatchingTextChild'> &
  * Intended to behave as a web anchor tag. For more complex routing, use a
  * `Button`.
  */
-export function Link({children, to, action = 'push', ...rest}: LinkProps) {
+export function Link({
+  children,
+  to,
+  action = 'push',
+  onPress: outerOnPress,
+  ...rest
+}: LinkProps) {
   const {href, isExternal, onPress} = useLink({
     to,
     displayText: typeof children === 'string' ? children : '',
     action,
+    onPress: outerOnPress,
   })
 
   return (
@@ -218,6 +225,7 @@ export function InlineLink({
   action = 'push',
   warnOnMismatchingTextChild,
   style,
+  onPress: outerOnPress,
   ...rest
 }: InlineLinkProps) {
   const t = useTheme()
@@ -227,6 +235,7 @@ export function InlineLink({
     displayText: stringChildren ? children : '',
     action,
     warnOnMismatchingTextChild,
+    onPress: outerOnPress,
   })
   const {state: focused, onIn: onFocus, onOut: onBlur} = useInteractionState()
   const {

src/components/ModerationServiceCard/Card.tsx

@@ -7,6 +7,7 @@ import {Text} from '#/components/Typography'
 import {RichText} from '#/components/RichText'
 import {RaisingHande4Finger_Stroke2_Corner0_Rounded as RaisingHand} from '#/components/icons/RaisingHand'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
+import {sanitizeHandle} from '#/lib/strings/handles'
 
 export function Outer({
   children,
@@ -43,6 +44,22 @@ export function Avatar({avatar}: {avatar?: string}) {
   return <UserAvatar type="list" size={40} avatar={avatar} />
 }
 
+export function Title({value}: {value: string}) {
+  return <Text style={[a.text_md, a.font_bold, a.pb_2xs]}>{value}</Text>
+}
+
+export function Description({value, handle}: {value?: string; handle: string}) {
+  return value ? (
+    <RichText value={value} style={[]} />
+  ) : (
+    <Text>
+      <Trans>
+        Moderation service managed by @{sanitizeHandle(handle, '@')}
+      </Trans>
+    </Text>
+  )
+}
+
 export function Content({
   title,
   description,
@@ -63,7 +80,9 @@ export function Content({
           <RichText value={description} style={[]} />
         ) : (
           <Text>
-            <Trans>Moderation service managed by @{handle}</Trans>
+            <Trans>
+              Moderation service managed by @{sanitizeHandle(handle, '@')}
+            </Trans>
           </Text>
         )}
       </View>

src/screens/Moderation/SettingsDialog.tsx

@@ -13,6 +13,10 @@ import * as ModerationServiceCard from '#/components/ModerationServiceCard'
 import {getModerationServiceTitle} from '#/lib/moderation'
 import {UsePreferencesQueryResponse} from '#/state/queries/preferences'
 import {useModServiceLabelGroupEnableMutation} from '#/state/queries/modservice'
+import {Divider} from '#/components/Divider'
+import {InlineLink} from '#/components/Link'
+import {useDialogStateControlContext} from '#/state/dialogs'
+import {logger} from '#/logger'
 
 function LabelerToggle({
   labelGroup,
@@ -24,14 +28,24 @@ function LabelerToggle({
   preferences: UsePreferencesQueryResponse
 }) {
   const t = useTheme()
-  const {mutateAsync, variables} = useModServiceLabelGroupEnableMutation()
+  const {
+    mutateAsync: toggleGroupEnabled,
+    variables: optimisticToggleGroupEnabled,
+  } = useModServiceLabelGroupEnableMutation()
+  const {closeAllDialogs} = useDialogStateControlContext()
 
-  const modservicePreferences = preferences.moderationOpts.mods.find(
-    ({did}) => did === labeler.creator.did,
+  const labelerPrefs = React.useMemo(
+    () =>
+      preferences.moderationOpts.mods.find(
+        ({did}) => did === labeler.creator.did,
+      ),
+    [preferences.moderationOpts.mods, labeler.creator.did],
   )
-  const enabled =
-    variables?.enabled ??
-    !modservicePreferences?.disabledLabelGroups?.includes(labelGroup)
+  const isLabelerEnabled = !!labelerPrefs?.enabled
+  const isEnabled = isLabelerEnabled
+    ? optimisticToggleGroupEnabled?.enabled ??
+      !labelerPrefs?.disabledLabelGroups?.includes(labelGroup)
+    : false
   const title = getModerationServiceTitle({
     displayName: labeler.creator.displayName,
     handle: labeler.creator.handle,
@@ -39,42 +53,66 @@ function LabelerToggle({
 
   const onToggleEnabled = React.useCallback(async () => {
     try {
-      await mutateAsync({
-        // @ts-ignore TODO
-        did: modservicePreferences?.did,
+      if (!labelerPrefs) throw new Error(`labelerPrefs not found`)
+
+      await toggleGroupEnabled({
+        did: labelerPrefs.did,
         group: labelGroup,
-        enabled: !enabled,
+        enabled: !isEnabled,
       })
     } catch (e: any) {
-      // TODO
-      console.error(e)
+      logger.error(`Failed to toggle label group enabled`, {
+        message: e.message,
+        labelGroup,
+      })
     }
-  }, [mutateAsync, enabled, modservicePreferences, labelGroup])
+  }, [toggleGroupEnabled, isEnabled, labelerPrefs, labelGroup])
+
   return (
-    <Toggle.Item
-      name={labeler.creator.did}
-      label={title}
-      key={labeler.creator.did}
-      value={enabled}
-      onChange={onToggleEnabled}>
-      {ctx => (
-        <ModerationServiceCard.Card.Outer
-          style={[
-            ...(ctx.focused || ctx.hovered ? [t.atoms.bg_contrast_50] : []),
-            ctx.selected && {
-              backgroundColor: t.palette.primary_50,
-              borderColor: t.palette.primary_100,
-            },
-          ]}>
+    <View style={[a.rounded_sm, a.border, t.atoms.border_contrast_low]}>
+      <View style={[a.flex_row, a.justify_between, a.p_md]}>
+        <View style={[a.flex_row, a.align_center, a.gap_md]}>
           <ModerationServiceCard.Card.Avatar avatar={labeler.creator.avatar} />
-          <ModerationServiceCard.Card.Content
-            title={title}
-            description={labeler.description}
-            handle={labeler.creator.handle}
-          />
-        </ModerationServiceCard.Card.Outer>
-      )}
-    </Toggle.Item>
+          <View>
+            <ModerationServiceCard.Card.Title value={title} />
+            <ModerationServiceCard.Card.Description
+              value={labeler.description}
+              handle={labeler.creator.handle}
+            />
+          </View>
+        </View>
+
+        <Toggle.Item
+          disabled={!isLabelerEnabled}
+          name={labeler.creator.did}
+          label={title}
+          key={labeler.creator.did}
+          value={isEnabled}
+          onChange={onToggleEnabled}>
+          <Toggle.Label>{isEnabled ? 'Enabled' : 'Disabled'}</Toggle.Label>
+          <Toggle.Switch />
+        </Toggle.Item>
+      </View>
+
+      <Divider />
+
+      <View style={[a.flex_row, a.p_md]}>
+        <Text style={[a.text_xs]}>
+          Configure more settings for this labeler{' '}
+          <InlineLink
+            to={{
+              screen: 'ProfileModservice',
+              params: {
+                name: labeler.creator.handle,
+              },
+            }}
+            style={[a.text_xs]}
+            onPress={closeAllDialogs}>
+            here.
+          </InlineLink>
+        </Text>
+      </View>
+    </View>
   )
 }
 
@@ -115,11 +153,10 @@ export function SettingsDialog({
           a.p_md,
           a.rounded_md,
           a.mb_xl,
-          a.border,
-          t.atoms.border_contrast_low,
+          t.atoms.bg_contrast_25,
         ]}>
         <View style={[a.flex_1, a.gap_xs]}>
-          <Text style={[a.text_md, a.font_bold]}>{groupInfoStrings.name}</Text>
+          <Text style={[a.font_bold]}>{groupInfoStrings.name}</Text>
           <Text style={[a.leading_tight, {maxWidth: 400}]}>
             {groupInfoStrings.description}
           </Text>