[🐴] Add labels to chats (#4293)

* Add labels to chat list

* Add to convo header

* Prevent click through on PostAlert buttons

* Fix space

* Fix alignment

src/components/dms/MessagesListHeader.tsx

@@ -22,6 +22,7 @@ import {atoms as a, useBreakpoints, useTheme, web} from '#/alf'
 import {ConvoMenu} from '#/components/dms/ConvoMenu'
 import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/Bell2'
 import {Link} from '#/components/Link'
+import {PostAlerts} from '#/components/moderation/PostAlerts'
 import {Text} from '#/components/Typography'
 
 const PFP_SIZE = isWeb ? 40 : 34
@@ -58,7 +59,7 @@ export let MessagesListHeader = ({
         t.atoms.border_contrast_low,
         a.border_b,
         a.flex_row,
-        a.align_center,
+        a.align_start,
         a.gap_sm,
         gtTablet ? a.pl_lg : a.pl_xl,
         a.pr_lg,
@@ -69,7 +70,7 @@ export let MessagesListHeader = ({
           testID="conversationHeaderBackBtn"
           onPress={onPressBack}
           hitSlop={BACK_HITSLOP}
-          style={{width: 30, height: 30}}
+          style={{width: 30, height: 30, marginTop: isWeb ? 6 : 4}}
           accessibilityRole="button"
           accessibilityLabel={_(msg`Back`)}
           accessibilityHint="">
@@ -152,51 +153,71 @@ function HeaderReady({
       )
 
   return (
-    <>
-      <Link
-        style={[a.flex_row, a.align_center, a.gap_md, a.flex_1, a.pr_md]}
-        to={makeProfileLink(profile)}>
-        <PreviewableUserAvatar
-          size={PFP_SIZE}
-          profile={profile}
-          moderation={moderation.ui('avatar')}
-          disableHoverCard={moderation.blocked}
-        />
-        <View style={a.flex_1}>
-          <Text
-            style={[a.text_md, a.font_bold, web(a.leading_normal)]}
-            numberOfLines={1}>
-            {displayName}
-          </Text>
-          {!isDeletedAccount && (
+    <View style={[a.flex_1]}>
+      <View style={[a.w_full, a.flex_row, a.align_center, a.justify_between]}>
+        <Link
+          style={[a.flex_row, a.align_start, a.gap_md, a.flex_1, a.pr_md]}
+          to={makeProfileLink(profile)}>
+          <View style={[a.pt_2xs]}>
+            <PreviewableUserAvatar
+              size={PFP_SIZE}
+              profile={profile}
+              moderation={moderation.ui('avatar')}
+              disableHoverCard={moderation.blocked}
+            />
+          </View>
+          <View style={a.flex_1}>
             <Text
-              style={[
-                t.atoms.text_contrast_medium,
-                a.text_sm,
-                web([a.leading_normal, {marginTop: -2}]),
-              ]}
+              style={[a.text_md, a.font_bold, web(a.leading_normal)]}
               numberOfLines={1}>
-              @{profile.handle}
-              {convoState.convo?.muted && (
-                <>
-                  {' '}
-                  &middot;{' '}
-                  <BellStroke size="xs" style={t.atoms.text_contrast_medium} />
-                </>
-              )}
+              {displayName}
             </Text>
-          )}
-        </View>
-      </Link>
+            {!isDeletedAccount && (
+              <Text
+                style={[
+                  t.atoms.text_contrast_medium,
+                  a.text_sm,
+                  web([a.leading_normal, {marginTop: -2}]),
+                ]}
+                numberOfLines={1}>
+                @{profile.handle}
+                {convoState.convo?.muted && (
+                  <>
+                    {' '}
+                    &middot;{' '}
+                    <BellStroke
+                      size="xs"
+                      style={t.atoms.text_contrast_medium}
+                    />
+                  </>
+                )}
+              </Text>
+            )}
+          </View>
+        </Link>
 
-      {isConvoActive(convoState) && (
-        <ConvoMenu
-          convo={convoState.convo}
-          profile={profile}
-          currentScreen="conversation"
-          blockInfo={blockInfo}
+        {isConvoActive(convoState) && (
+          <ConvoMenu
+            convo={convoState.convo}
+            profile={profile}
+            currentScreen="conversation"
+            blockInfo={blockInfo}
+          />
+        )}
+      </View>
+
+      <View
+        style={[
+          {
+            paddingLeft: PFP_SIZE + a.gap_md.gap,
+          },
+        ]}>
+        <PostAlerts
+          modui={moderation.ui('contentList')}
+          size="large"
+          style={[a.pt_xs]}
         />
-      )}
-    </>
+      </View>
+    </View>
   )
 }

src/components/moderation/PostAlerts.tsx

@@ -64,7 +64,9 @@ function PostLabel({
     <>
       <Button
         label={desc.name}
-        onPress={() => {
+        onPress={e => {
+          e.preventDefault()
+          e.stopPropagation()
           control.open()
         }}>
         {({hovered, pressed}) => (

src/screens/Messages/List/ChatListItem.tsx

@@ -23,6 +23,7 @@ import {ConvoMenu} from '#/components/dms/ConvoMenu'
 import {Bell2Off_Filled_Corner0_Rounded as BellStroke} from '#/components/icons/Bell2'
 import {Link} from '#/components/Link'
 import {useMenuControl} from '#/components/Menu'
+import {PostAlerts} from '#/components/moderation/PostAlerts'
 import {Text} from '#/components/Typography'
 
 export let ChatListItem = ({
@@ -264,6 +265,12 @@ function ChatListItemReady({
                 ]}>
                 {lastMessage}
               </Text>
+
+              <PostAlerts
+                modui={moderation.ui('contentList')}
+                size="large"
+                style={[a.pt_xs]}
+              />
             </View>
 
             {convo.unreadCount > 0 && (