Improve Moderation screen and dialog

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>