From b4169fe0a4a909e61807c156981d9a9e25144247 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Wed, 20 Mar 2024 09:00:41 +0100
Subject: [PATCH] Use button for abuse message icon

---
 .../abuse-list-table.component.html               |  9 +++++++--
 .../abuse-list-table.component.ts                 | 15 +++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
index 69e319f5a..da7ea8bc6 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -131,10 +131,15 @@
       </td>
 
       <td class="abuse-messages">
-        <button class="button-unstyle" *ngIf="isLocalAbuse(abuse)" (click)="openAbuseMessagesModal(abuse)">
+        <button
+          *ngIf="isLocalAbuse(abuse)" (click)="openAbuseMessagesModal(abuse)"
+          class="peertube-button grey-button"
+          [ariaLabel]="getSendMessageButtonLabel(abuse)"
+          [title]="getSendMessageButtonLabel(abuse)"
+        >
           {{ abuse.countMessages }}
 
-          <my-global-icon iconName="message-circle"></my-global-icon>
+          <my-global-icon aria- iconName="message-circle"></my-global-icon>
         </button>
       </td>
 
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
index 31a87a3af..22abd94b7 100644
--- a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -27,6 +27,7 @@ import { AbuseService } from '../shared-moderation/abuse.service'
 import { BlocklistService } from '../shared-moderation/blocklist.service'
 import { VideoBlockService } from '../shared-moderation/video-block.service'
 import { VideoCommentService } from '../shared-video-comment/video-comment.service'
+import { formatICU } from '@app/helpers'
 
 const debugLogger = debug('peertube:moderation:AbuseListTableComponent')
 
@@ -208,6 +209,20 @@ export class AbuseListTableComponent extends RestTable implements OnInit {
     return Actor.IS_LOCAL(abuse.reporterAccount.host)
   }
 
+  getSendMessageButtonLabel (abuse: AdminAbuse) {
+    if (this.viewType === 'admin') {
+      return formatICU(
+        $localize`Send a message to the reporter (currently {count, plural, =1 {{count} message} other {{count} messages}})`,
+        { count: abuse.countMessages }
+      )
+    }
+
+    return formatICU(
+      $localize`Send a message to the admins/moderators (currently {count, plural, =1 {{count} message} other {{count} messages}})`,
+      { count: abuse.countMessages }
+    )
+  }
+
   protected reloadDataInternal () {
     debugLogger('Loading data.')