feat(reports): show suspended status next to reported profile

And only show the suspend button if the profile isn't already suspended (or the user disabled)

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/graphql/report.ts

@@ -42,14 +42,17 @@ const REPORT_FRAGMENT = gql`
     id
     reported {
       ...ActorFragment
+      suspended
       ... on Person {
         user {
           id
+          disabled
         }
       }
     }
     reporter {
       ...ActorFragment
+      suspended
     }
     events {
       id

js/src/i18n/en_US.json

@@ -1601,5 +1601,6 @@
   "Do you really want to suspend the account « {emailAccount} » ?": "Do you really want to suspend the account « {emailAccount} » ?",
   "There will be no way to restore the user's data!": "There will be no way to restore the user's data!",
   "User suspended and report resolved": "User suspended and report resolved",
-  "Profile suspended and report resolved": "Profile suspended and report resolved"
+  "Profile suspended and report resolved": "Profile suspended and report resolved",
+  "{profileName} (suspended)": "{profileName} (suspended)"
 }

js/src/i18n/fr_FR.json

@@ -1599,5 +1599,6 @@
   "Do you really want to suspend the account « {emailAccount} » ?": "Voulez-vous vraiment suspendre le compte « {emailAccount} » ?",
   "There will be no way to restore the user's data!": "Il n'y aura aucun moyen de restorer les données de l'utilisateur·ice !",
   "User suspended and report resolved": "Utilisateur suspendu et signalement résolu",
-  "Profile suspended and report resolved": "Profil suspendu et signalement résolu"
+  "Profile suspended and report resolved": "Profil suspendu et signalement résolu",
+  "{profileName} (suspended)": "{profileName} (suspendu·e)"
 }

js/src/views/Moderation/ReportView.vue

@@ -94,27 +94,42 @@
                   name: RouteName.ADMIN_PROFILE,
                   params: { id: report.reported.id },
                 }"
+                class="inline-flex gap-1"
               >
                 <img
                   v-if="report.reported.avatar"
-                  class="image"
+                  class="image rounded-full"
                   :src="report.reported.avatar.url"
                   alt=""
                 />
-                {{ displayNameAndUsername(report.reported) }}
+                <template v-if="report.reported.suspended">
+                  <i18n-t keypath="{profileName} (suspended)">
+                    <template #profileName>
+                      {{ displayNameAndUsername(report.reported) }}
+                    </template>
+                  </i18n-t>
+                </template>
+                <template v-else>{{
+                  displayNameAndUsername(report.reported)
+                }}</template>
               </router-link>
               <o-button
-                v-if="report.reported.domain"
+                v-if="report.reported.domain && !report.reported.suspended"
                 variant="danger"
                 @click="suspendProfile(report.reported.id as string)"
                 icon-left="delete"
+                size="small"
                 >{{ t("Suspend the profile") }}</o-button
               >
               <o-button
-                v-else-if="(report.reported as IPerson).user"
+                v-else-if="
+                  (report.reported as IPerson).user &&
+                  !((report.reported as IPerson).user as IUser).disabled
+                "
                 variant="danger"
                 @click="suspendUser((report.reported as IPerson).user as IUser)"
                 icon-left="delete"
+                size="small"
                 >{{ t("Suspend the account") }}</o-button
               >
             </td>
@@ -133,7 +148,7 @@
               >
                 <img
                   v-if="report.reporter.avatar"
-                  class="image"
+                  class="image rounded-full"
                   :src="report.reporter.avatar.url"
                   alt=""
                 />