Add notice to labeler card, show all labelers

src/components/LabelingServiceCard/index.tsx

@@ -9,6 +9,7 @@ import {sanitizeHandle} from '#/lib/strings/handles'
 import {useLabelerInfoQuery} from '#/state/queries/labeler'
 import {UserAvatar} from '#/view/com/util/UserAvatar'
 import {atoms as a, useTheme, ViewStyleProp} from '#/alf'
+import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
 import {Link as InternalLink, LinkProps} from '#/components/Link'
 import {RichText} from '#/components/RichText'
 import {Text} from '#/components/Typography'
@@ -43,21 +44,40 @@ export function Avatar({avatar}: {avatar?: string}) {
 }
 
 export function Title({value}: {value: string}) {
-  return <Text style={[a.text_md, a.font_bold]}>{value}</Text>
+  return <Text style={[a.text_md, a.font_bold, a.leading_tight]}>{value}</Text>
 }
 
 export function Description({value, handle}: {value?: string; handle: string}) {
   return value ? (
     <Text numberOfLines={2}>
-      <RichText value={value} style={[]} />
+      <RichText value={value} style={[a.leading_snug]} />
     </Text>
   ) : (
-    <Text>
+    <Text style={[a.leading_snug]}>
       <Trans>By {sanitizeHandle(handle, '@')}</Trans>
     </Text>
   )
 }
 
+export function RegionalNotice() {
+  const t = useTheme()
+  return (
+    <View
+      style={[
+        a.flex_row,
+        a.align_center,
+        a.gap_xs,
+        a.pt_2xs,
+        {marginLeft: -2},
+      ]}>
+      <Flag fill={t.atoms.text_contrast_low.color} size="sm" />
+      <Text style={[a.italic, a.leading_snug]}>
+        <Trans>Required in your region</Trans>
+      </Text>
+    </View>
+  )
+}
+
 export function LikeCount({count}: {count: number}) {
   const t = useTheme()
   return (
@@ -85,7 +105,7 @@ export function Content({children}: React.PropsWithChildren<{}>) {
         a.align_center,
         a.justify_between,
       ]}>
-      <View style={[a.gap_xs, a.flex_1]}>{children}</View>
+      <View style={[a.gap_2xs, a.flex_1]}>{children}</View>
 
       <ChevronRight size="md" style={[a.z_10, t.atoms.text_contrast_low]} />
     </View>

src/screens/Moderation/index.tsx

@@ -39,7 +39,6 @@ import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components
 import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign'
 import {Props as SVGIconProps} from '#/components/icons/common'
 import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter'
-import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag'
 import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group'
 import {Person_Stroke2_Corner0_Rounded as Person} from '#/components/icons/Person'
 import * as LabelingService from '#/components/LabelingServiceCard'
@@ -425,12 +424,7 @@ export function ModerationScreenInner({
         </View>
       ) : (
         <View style={[a.rounded_sm, t.atoms.bg_contrast_25]}>
-          {labelers
+          {labelers.map((labeler, i) => {
-            .filter(
-              labeler =>
-                !isNonConfigurableModerationAuthority(labeler.creator.did),
-            )
-            .map((labeler, i) => {
             return (
               <React.Fragment key={labeler.creator.did}>
                 {i !== 0 && <Divider />}
@@ -450,9 +444,7 @@ export function ModerationScreenInner({
                           t.atoms.bg_contrast_50,
                         ],
                       ]}>
-                        <LabelingService.Avatar
+                      <LabelingService.Avatar avatar={labeler.creator.avatar} />
-                          avatar={labeler.creator.avatar}
-                        />
                       <LabelingService.Content>
                         <LabelingService.Title
                           value={getLabelingServiceTitle({
@@ -464,6 +456,9 @@ export function ModerationScreenInner({
                           value={labeler.creator.description}
                           handle={labeler.creator.handle}
                         />
+                        {isNonConfigurableModerationAuthority(
+                          labeler.creator.did,
+                        ) && <LabelingService.RegionalNotice />}
                       </LabelingService.Content>
                     </LabelingService.Outer>
                   )}
@@ -474,27 +469,6 @@ export function ModerationScreenInner({
         </View>
       )}
 
-      {labelers?.some(
-        labeler => !isNonConfigurableModerationAuthority(labeler.creator.did),
-      ) && (
-        <View
-          style={[
-            a.p_lg,
-            a.mb_md,
-            a.flex_row,
-            a.align_center,
-            a.justify_center,
-            a.gap_sm,
-          ]}>
-          <Flag fill={t.atoms.text_contrast_low.color} size="sm" />
-          <Text style={[a.italic]}>
-            <Trans>Additional moderation may apply in your region.</Trans>
-          </Text>
-        </View>
-      )}
-
-      <Divider />
-
       <Text
         style={[
           a.text_md,