🧹 Cleanup label related changes

app/actions/ModActionPanel/QuickAction.tsx

@@ -21,9 +21,9 @@ import {
   displayLabel,
   getLabelsForSubject,
   toLabelVal,
+  getLabelGroupInfo,
   unFlagSelfLabel,
   isSelfLabel,
-  LabelGroupInfo,
 } from '@/common/labels'
 import { FullScreenActionPanel } from '@/common/FullScreenActionPanel'
 import { PreviewCard } from '@/common/PreviewCard'
@@ -535,10 +535,11 @@ function Form(
                 <LabelList className="-ml-1">
                   {!currentLabels.length && <LabelListEmpty className="ml-1" />}
                   {currentLabels.map((label) => {
+                    const labelGroup = getLabelGroupInfo(unFlagSelfLabel(label))
                     return (
                       <LabelChip
                         key={label}
-                        style={{ color: LabelGroupInfo[label]?.color }}
+                        style={{ color: labelGroup.color }}
                       >
                         {displayLabel(label)}
                       </LabelChip>

components/common/labels/Grid.tsx

@@ -1,6 +1,11 @@
 import { useState } from 'react'
 import Select from 'react-tailwindcss-select'
-import { buildAllLabelOptions, ALL_LABELS, LabelGroupInfo } from './util'
+import {
+  labelOptions,
+  groupLabelList,
+  getLabelGroupInfo,
+  buildAllLabelOptions,
+} from './util'
 
 const EMPTY_ARR = []
 type SelectProps = React.ComponentProps<typeof Select>
@@ -11,7 +16,7 @@ export const LabelSelector = (props: LabelsProps) => {
     formId,
     name,
     defaultLabels = EMPTY_ARR,
-    options = Object.keys(ALL_LABELS),
+    options = labelOptions,
     disabled,
     onChange,
   } = props
@@ -22,10 +27,19 @@ export const LabelSelector = (props: LabelsProps) => {
     })),
   )
   const allOptions = buildAllLabelOptions(defaultLabels, options)
-  const selectorOptions = Object.values(ALL_LABELS).map((labelOption) => ({
-    label: labelOption.identifier,
-    value: labelOption.identifier,
-  }))
+  const groupedLabelList = groupLabelList(allOptions)
+  const selectorOptions = Object.entries(groupedLabelList).map(
+    ([group, groupInfo]) => ({
+      label: group,
+      options: groupInfo.labels.map((label) => {
+        const labelText = typeof label === 'string' ? label : label.id
+        return {
+          label: labelText,
+          value: labelText,
+        }
+      }),
+    }),
+  )
 
   // TODO: selected label text doesn't feel very nice here
   return (
@@ -47,10 +61,11 @@ export const LabelSelector = (props: LabelsProps) => {
         value={selectedLabels}
         options={selectorOptions}
         formatOptionLabel={(data) => {
+          const labelGroup = getLabelGroupInfo(data.label)
           return (
             <li
               className={`block transition duration-200 py-1 cursor-pointer select-none truncate`}
-              style={{ color: LabelGroupInfo[data.label]?.color }}
+              style={{ color: labelGroup.color }}
             >
               {data.label}
             </li>

components/common/labels/util.ts

@@ -3,9 +3,22 @@ import {
   AppBskyActorDefs,
   ComAtprotoAdminDefs,
   ComAtprotoLabelDefs,
+  LabelDefinition,
+  LabelGroupDefinition,
   LABELS,
+  LABEL_GROUPS,
 } from '@atproto/api'
 
+type LabelGroupInfoRecord = {
+  color: string
+  labels: Array<string | LabelDefinition>
+}
+
+type GroupedLabelList = Record<
+  string,
+  LabelGroupInfoRecord & Omit<LabelGroupDefinition, 'labels'>
+>
+
 export function diffLabels(current: string[], next: string[]) {
   return {
     createLabelVals: next
@@ -40,35 +53,95 @@ export function toLabelVal(
   return val
 }
 
-export const ALL_LABELS = LABELS
+export const labelOptions = Object.keys(LABELS)
 
-export const LabelGroupInfo: Record<string, { color: string }> = {
-  [LABELS.sexual.identifier]: {
+export const LabelGroupInfo: Record<
+  string,
+  Partial<LabelGroupDefinition> & { color: string }
+> = {
+  [LABEL_GROUPS.system.id]: {
+    color: '#c45722',
+  },
+  [LABEL_GROUPS.sexual.id]: {
     color: '#d45722',
   },
-  [LABELS.gore.identifier]: {
+  [LABEL_GROUPS.violence.id]: {
     color: '#d42222',
   },
-  [LABELS.porn.identifier]: {
+  [LABEL_GROUPS.intolerance.id]: {
     color: '#d422bc',
   },
-  [LABELS.nudity.identifier]: {
+  [LABEL_GROUPS.legal.id]: {
     color: '#3502cc',
   },
-  [LABELS.doxxing.identifier]: {
+  [LABEL_GROUPS.rude.id]: {
     color: '#ccb802',
   },
+  [LABEL_GROUPS.curation.id]: {
+    color: '#ff0303',
+  },
+  [LABEL_GROUPS.misinfo.id]: {
+    color: '#530303',
+  },
+  uncategorized: {
+    strings: {
+      settings: {
+        en: {
+          name: 'Uncategorzied',
+          description: 'Labels that have not been categorized yet',
+        },
+      },
+    },
+    color: '',
+    labels: [],
+  },
 }
 
-const labelsRequiring = [
-  LABELS.gore.identifier,
-  LABELS.porn.identifier,
-  LABELS.nudity.identifier,
-  LABELS.sexual.identifier,
+const labelGroupsRequiringBlur = [
+  LABEL_GROUPS.violence.id,
+  LABEL_GROUPS.sexual.id,
 ]
 
+export const groupLabelList = (labels: string[]): GroupedLabelList => {
+  const groupedList: GroupedLabelList = {}
+
+  labels.forEach((label) => {
+    // SELF_FLAG is embedded in the label value so when grouping, we have to take it out of the value
+    const cleanedLabel = unFlagSelfLabel(label)
+    const group = LABELS[cleanedLabel]
+    const groupId = group?.groupId || 'uncategorized'
+
+    if (groupedList[groupId]) {
+      groupedList[groupId].labels.push(label)
+    } else {
+      groupedList[groupId] = {
+        ...(LabelGroupInfo[groupId] || LabelGroupInfo.uncategorized),
+        ...(LABEL_GROUPS[groupId] || {}),
+        labels: [label],
+      }
+    }
+  })
+
+  return groupedList
+}
+
+export const getLabelGroupInfo = (label: string): LabelGroupInfoRecord => {
+  const group = LABELS[label]
+  const groupId = group?.groupId || 'uncategorized'
+
+  return {
+    // TODO: We shouldn't have to do this, there's a weird type def somewhere that's causing this
+    labels: [],
+    ...LabelGroupInfo.uncategorized,
+    ...(LabelGroupInfo[groupId] || {}),
+    ...(group || {}),
+  }
+}
+
 export const doesLabelNeedBlur = (labels?: string[]): boolean =>
-  !!labels?.find((label) => labelsRequiring.includes(label))
+  !!labels?.find((label) =>
+    labelGroupsRequiringBlur.includes(LABELS[label]?.groupId),
+  )
 
 export const doesProfileNeedBlur = ({
   profile,

components/common/posts/PostsFeed.tsx

@@ -26,6 +26,7 @@ import {
   doesLabelNeedBlur,
   toLabelVal,
   LabelGroupInfo,
+  getLabelGroupInfo,
 } from '../labels'
 import { CollectionId } from '@/reports/helpers/subject'
 import { ProfileAvatar } from '@/repositories/ProfileAvatar'
@@ -417,14 +418,15 @@ function PostLabels({
     <LabelList className={`pb-2 ${dense ? 'pl-10' : 'pl-14'}`}>
       {labels?.map((label, i) => {
         const { val, src } = label
+        const labelGroup = getLabelGroupInfo(val)
         return (
           <LabelChip
             className={`${i === 0 ? 'ml-0' : ''} text-[${
-              LabelGroupInfo[val]?.color
+              labelGroup.color
             }]`}
             // TODO: Ideally, we should just use inline class name but it only works when the class names are static
             // so trying to work around that with style prop for now
-            style={{ color: LabelGroupInfo[val]?.color }}
+            style={{ color: labelGroup.color }}
             // there may be multiple labels with the same val for the same cid, where the labeler is different
             // so we need to use the label src is in the key to guaranty uniqueness
             key={`${cid}_${val}_${src}`}

components/mod-event/EventItem.tsx

@@ -3,7 +3,8 @@ import {
   LabelChip,
   LabelList,
   displayLabel,
-  LabelGroupInfo,
+  getLabelGroupInfo,
+  unFlagSelfLabel,
 } from '@/common/labels'
 import { ReasonBadge } from '@/reports/ReasonBadge'
 import { ComAtprotoAdminDefs, ComAtprotoModerationDefs } from '@atproto/api'
@@ -157,11 +158,9 @@ const EventLabels = ({
     <LabelList>
       <span className="text-gray-500 dark:text-gray-50">{header}</span>
       {labels.map((label) => {
+        const labelGroup = getLabelGroupInfo(unFlagSelfLabel(label))
         return (
-          <LabelChip
-            key={label}
-            style={{ color: LabelGroupInfo[label]?.color }}
-          >
+          <LabelChip key={label} style={{ color: labelGroup.color }}>
             {displayLabel(label)}
           </LabelChip>
         )
@@ -253,7 +252,8 @@ export const ModEventItem = ({
     ComAtprotoAdminDefs.isModEventUnmute(modEvent.event) ||
     ComAtprotoAdminDefs.isModEventResolveAppeal(modEvent.event) ||
     ComAtprotoAdminDefs.isModEventReverseTakedown(modEvent.event) ||
-    ComAtprotoAdminDefs.isModEventDivert(modEvent.event)
+    // This is temporary since the api package with this new type check is not yet published
+    modEvent.event.$type === 'com.atproto.admin.defs#modEventDivert'
   ) {
     eventItem = <Comment modEvent={modEvent} />
   }