Add abuse messages management in my account

15 files changed, 1429 insertions, 0 deletions

diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.html b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
new file mode 100644
index 000000000..431fdf5aa
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.html
@@ -0,0 +1,115 @@
+<div class="d-flex moderation-expanded">
+  <!-- report left part (report details) -->
+  <div class="col-8">
+
+    <!-- report metadata -->
+    <div class="d-flex" *ngIf="isAdminView && abuse.reporterAccount">
+      <span class="col-3 moderation-expanded-label" i18n>Reporter</span>
+
+      <span class="col-9 moderation-expanded-text">
+        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
+          class="chip"
+        >
+          <img
+            class="avatar"
+            [src]="abuse.reporterAccount.avatar?.path"
+            (error)="switchToDefaultAvatar($event)"
+            alt="Avatar"
+          >
+          <div>
+            <span class="text-muted">{{ abuse.reporterAccount.nameWithHost }}</span>
+          </div>
+        </a>
+
+        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reporter:&quot;' + abuse.reporterAccount.displayName + '&quot;' }"
+          class="ml-auto text-muted abuse-details-links" i18n
+        >
+          {abuse.countReportsForReporter, plural, =1 {1 report} other {{{ abuse.countReportsForReporter }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+        </a>
+      </span>
+    </div>
+
+    <div class="d-flex" *ngIf="abuse.flaggedAccount">
+      <span class="col-3 moderation-expanded-label" i18n>Reportee</span>
+      <span class="col-9 moderation-expanded-text">
+        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
+          class="chip"
+        >
+          <img
+            class="avatar"
+            [src]="abuse.flaggedAccount?.avatar?.path"
+            (error)="switchToDefaultAvatar($event)"
+            alt="Avatar"
+          >
+          <div>
+            <span class="text-muted">{{ abuse.flaggedAccount ? abuse.flaggedAccount.nameWithHost : '' }}</span>
+          </div>
+        </a>
+
+        <a *ngIf="isAdminView" [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': 'reportee:&quot;' +abuse.flaggedAccount.displayName + '&quot;' }"
+          class="ml-auto text-muted abuse-details-links" i18n
+        >
+          {abuse.countReportsForReportee, plural, =1 {1 report} other {{{ abuse.countReportsForReportee }} reports}}<span class="ml-1 glyphicon glyphicon-flag"></span>
+        </a>
+      </span>
+    </div>
+
+    <div class="d-flex" *ngIf="abuse.updatedAt">
+      <span class="col-3 moderation-expanded-label" i18n>Updated</span>
+      <time class="col-9 moderation-expanded-text abuse-details-date-updated">{{ abuse.updatedAt | date: 'medium' }}</time>
+    </div>
+
+    <!-- report text -->
+    <div class="mt-3 d-flex">
+      <span class="col-3 moderation-expanded-label">
+        <ng-container i18n>Report</ng-container>
+        <a [routerLink]="[ baseRoute ]" [queryParams]="{ 'search': '#' + abuse.id  }" class="ml-1 text-muted">#{{ abuse.id }}</a>
+      </span>
+      <span class="col-9 moderation-expanded-text" [innerHTML]="abuse.reasonHtml"></span>
+    </div>
+
+    <div *ngIf="getPredefinedReasons()" class="mt-2 d-flex">
+      <span class="col-3"></span>
+      <span class="col-9">
+        <a *ngFor="let reason of getPredefinedReasons()"  [routerLink]="[ baseRoute ]"
+          [queryParams]="{ 'search': 'tag:' + reason.id  }" class="chip rectangular bg-secondary text-light"
+        >
+          <div>{{ reason.label }}</div>
+        </a>
+      </span>
+    </div>
+
+    <div *ngIf="abuse.video?.startAt" class="mt-2 d-flex">
+      <span class="col-3 moderation-expanded-label" i18n>Reported part</span>
+      <span class="col-9">
+        {{ startAt }}<ng-container *ngIf="abuse.video.endAt"> - {{ endAt }}</ng-container>
+      </span>
+    </div>
+
+    <div class="mt-3 d-flex" *ngIf="isAdminView && abuse.moderationComment">
+      <span class="col-3 moderation-expanded-label" i18n>Note</span>
+      <span class="col-9 moderation-expanded-text d-block" [innerHTML]="abuse.moderationCommentHtml"></span>
+    </div>
+
+  </div>
+
+  <!-- report right part (video/comment details) -->
+  <div class="col-4">
+    <div *ngIf="abuse.video" class="screenratio">
+      <div>
+        <span i18n *ngIf="abuse.video.deleted">The video was deleted</span>
+        <span i18n *ngIf="!abuse.video.deleted">The video was blocked</span>
+      </div>
+
+      <div *ngIf="!abuse.video.deleted && !abuse.video.blacklisted" [innerHTML]="abuse.embedHtml"></div>
+    </div>
+
+    <div *ngIf="abuse.comment" class="comment-html">
+      <div>
+        <strong i18n>Comment:</strong>
+      </div>
+
+      <div [innerHTML]="abuse.commentHtml"></div>
+    </div>
+  </div>
+</div>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.scss b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
new file mode 100644
index 000000000..d83eb974d
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.scss
@@ -0,0 +1,34 @@
+@import 'variables';
+@import 'mixins';
+@import 'miniature';
+
+.screenratio {
+  div {
+    @include miniature-thumbnail;
+
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    color: pvar(--inputPlaceholderColor);
+  }
+
+  @include large-screen-ratio($selector: 'div, ::ng-deep iframe') {
+    width: 100% !important;
+    height: 100% !important;
+    left: 0;
+  };
+}
+
+.comment-html {
+  background-color: #ececec;
+  padding: 10px;
+}
+
+.abuse-details-date-updated {
+  font-size: 90%;
+  margin-top: .1rem;
+}
+
+.abuse-details-links {
+  @include disable-default-a-behaviour;
+}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-details.component.ts b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
new file mode 100644
index 000000000..cdd4bf2c8
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/abuse-details.component.ts
@@ -0,0 +1,55 @@
+import { Component, Input } from '@angular/core'
+import { durationToString } from '@app/helpers'
+import { Actor } from '@app/shared/shared-main'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { AbusePredefinedReasonsString } from '@shared/models'
+import { ProcessedAbuse } from './processed-abuse.model'
+
+@Component({
+  selector: 'my-abuse-details',
+  templateUrl: './abuse-details.component.html',
+  styleUrls: [ '../shared-moderation/moderation.scss', './abuse-details.component.scss' ]
+})
+export class AbuseDetailsComponent {
+  @Input() abuse: ProcessedAbuse
+  @Input() isAdminView: boolean
+  @Input() baseRoute: string
+
+  private predefinedReasonsTranslations: { [key in AbusePredefinedReasonsString]: string }
+
+  constructor (
+    private i18n: I18n
+  ) {
+    this.predefinedReasonsTranslations = {
+      violentOrRepulsive: this.i18n('Violent or Repulsive'),
+      hatefulOrAbusive: this.i18n('Hateful or Abusive'),
+      spamOrMisleading: this.i18n('Spam or Misleading'),
+      privacy: this.i18n('Privacy'),
+      rights: this.i18n('Rights'),
+      serverRules: this.i18n('Server rules'),
+      thumbnails: this.i18n('Thumbnails'),
+      captions: this.i18n('Captions')
+    }
+  }
+
+  get startAt () {
+    return durationToString(this.abuse.video.startAt)
+  }
+
+  get endAt () {
+    return durationToString(this.abuse.video.endAt)
+  }
+
+  getPredefinedReasons () {
+    if (!this.abuse.predefinedReasons) return []
+
+    return this.abuse.predefinedReasons.map(r => ({
+      id: r,
+      label: this.predefinedReasonsTranslations[r]
+    }))
+  }
+
+  switchToDefaultAvatar ($event: Event) {
+    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
+  }
+}
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
new file mode 100644
index 000000000..a6f707a47
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.html
@@ -0,0 +1,194 @@
+<p-table
+  [value]="abuses" [lazy]="true" [paginator]="totalRecords > 0" [totalRecords]="totalRecords" [rows]="rowsPerPage" [rowsPerPageOptions]="rowsPerPageOptions"
+  [sortField]="sort.field" [sortOrder]="sort.order" (onLazyLoad)="loadLazy($event)" dataKey="id" [resizableColumns]="true" [lazyLoadOnInit]="false"
+  [showCurrentPageReport]="true" i18n-currentPageReportTemplate
+  currentPageReportTemplate="Showing {{'{first}'}} to {{'{last}'}} of {{'{totalRecords}'}} reports"
+  (onPage)="onPage($event)" [expandedRowKeys]="expandedRows"
+>
+  <ng-template pTemplate="caption">
+    <div class="caption">
+      <div class="ml-auto">
+        <div class="input-group has-feedback has-clear">
+          <div class="input-group-prepend c-hand" ngbDropdown placement="bottom-left auto" container="body">
+            <div class="input-group-text" ngbDropdownToggle>
+              <span class="caret" aria-haspopup="menu" role="button"></span>
+            </div>
+
+            <div role="menu" ngbDropdownMenu>
+              <h6 class="dropdown-header" i18n>Advanced report filters</h6>
+              <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'state:pending' }" class="dropdown-item" i18n>Unsolved reports</a>
+              <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'state:accepted' }" class="dropdown-item" i18n>Accepted reports</a>
+              <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'state:rejected' }" class="dropdown-item" i18n>Refused reports</a>
+              <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'videoIs:blacklisted' }" class="dropdown-item" i18n>Reports with blocked videos</a>
+              <a [routerLink]="[ '/admin/moderation/abuses/list' ]" [queryParams]="{ 'search': 'videoIs:deleted' }" class="dropdown-item" i18n>Reports with deleted videos</a>
+            </div>
+          </div>
+          <input
+            type="text" name="table-filter" id="table-filter" i18n-placeholder placeholder="Filter..."
+            (keyup)="onAbuseSearch($event)"
+          >
+          <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" (click)="resetTableFilter()"></a>
+          <span class="sr-only" i18n>Clear filters</span>
+        </div>
+      </div>
+    </div>
+  </ng-template>
+
+  <ng-template pTemplate="header">
+    <tr> <!-- header -->
+      <th style="width: 40px;"></th>
+      <th *ngIf="isAdminView()" style="width: 20%;" pResizableColumn i18n>Reporter</th>
+      <th i18n>Video/Comment/Account</th>
+      <th style="width: 150px;" i18n pSortableColumn="createdAt">Created <p-sortIcon field="createdAt"></p-sortIcon></th>
+      <th i18n pSortableColumn="state" style="width: 80px;">State <p-sortIcon field="state"></p-sortIcon></th>
+      <th i18n style="width: 80px;">Messages</th>
+      <th style="width: 150px;"></th>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="body" let-expanded="expanded" let-abuse>
+    <tr>
+      <td class="c-hand" [pRowToggler]="abuse" i18n-ngbTooltip ngbTooltip="More information" placement="top-left" container="body">
+        <span class="expander">
+          <i [ngClass]="expanded ? 'glyphicon glyphicon-menu-down' : 'glyphicon glyphicon-menu-right'"></i>
+        </span>
+      </td>
+
+      <td *ngIf="isAdminView()">
+        <a *ngIf="abuse.reporterAccount" [href]="abuse.reporterAccount.url" i18n-title title="Open account in a new tab" target="_blank" rel="noopener noreferrer">
+          <div class="chip two-lines">
+            <img
+              class="avatar"
+              [src]="abuse.reporterAccount.avatar?.path"
+              (error)="switchToDefaultAvatar($event)"
+              alt="Avatar"
+            >
+            <div>
+              {{ abuse.reporterAccount.displayName }}
+              <span>{{ abuse.reporterAccount.nameWithHost }}</span>
+            </div>
+          </div>
+        </a>
+
+        <span i18n *ngIf="!abuse.reporterAccount">
+          Deleted account
+        </span>
+      </td>
+
+      <ng-container *ngIf="abuse.video">
+
+        <td *ngIf="!abuse.video.deleted">
+          <a [href]="getVideoUrl(abuse)" class="table-video-link" [title]="abuse.video.name" target="_blank" rel="noopener noreferrer">
+            <div class="table-video">
+              <div class="table-video-image">
+                <img [src]="abuse.video.thumbnailPath">
+                <span
+                  class="table-video-image-label" *ngIf="abuse.count > 1"
+                  i18n-title title="This video has been reported multiple times."
+                >
+                  {{ abuse.nth }}/{{ abuse.count }}
+                </span>
+              </div>
+
+              <div class="table-video-text">
+                <div>
+                  <span *ngIf="!abuse.video.blacklisted" class="glyphicon glyphicon-new-window"></span>
+                  <span *ngIf="abuse.video.blacklisted" i18n-title title="The video was blocked" class="glyphicon glyphicon-ban-circle"></span>
+                  {{ abuse.video.name }}
+                </div>
+                <div i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
+              </div>
+            </div>
+          </a>
+        </td>
+
+        <td *ngIf="abuse.video.deleted" class="c-hand" [pRowToggler]="abuse">
+          <div class="table-video" i18n-title title="Video was deleted">
+            <div class="table-video-image">
+              <span i18n>Deleted</span>
+            </div>
+
+            <div class="table-video-text">
+              <div>
+                {{ abuse.video.name }}
+                <span class="glyphicon glyphicon-trash"></span>
+              </div>
+              <div i18n>by {{ abuse.video.channel?.displayName }} on {{ abuse.video.channel?.host }} </div>
+            </div>
+          </div>
+        </td>
+      </ng-container>
+
+      <ng-container *ngIf="abuse.comment">
+        <td>
+          <a [href]="getCommentUrl(abuse)" [innerHTML]="abuse.truncatedCommentHtml" class="table-comment-link"
+            [title]="abuse.comment.video.name" target="_blank" rel="noopener noreferrer"
+          ></a>
+
+          <div class="comment-flagged-account" *ngIf="abuse.flaggedAccount">by {{ abuse.flaggedAccount.displayName }}</div>
+        </td>
+      </ng-container>
+
+      <ng-container *ngIf="!abuse.comment && !abuse.video">
+        <td *ngIf="abuse.flaggedAccount">
+          <a [href]="getAccountUrl(abuse)"  class="table-account-link" target="_blank" rel="noopener noreferrer">
+            <span>{{ abuse.flaggedAccount.displayName }}</span>
+
+            <span class="account-flagged-handle">{{ abuse.flaggedAccount.nameWithHostForced }}</span>
+          </a>
+        </td>
+
+        <td i18n *ngIf="!abuse.flaggedAccount">
+          Account deleted
+        </td>
+
+      </ng-container>
+
+
+      <td class="c-hand" [pRowToggler]="abuse">{{ abuse.createdAt | date: 'short'  }}</td>
+
+      <td class="c-hand abuse-states" [pRowToggler]="abuse">
+        <span *ngIf="isAbuseAccepted(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-ok"></span>
+        <span *ngIf="isAbuseRejected(abuse)" [title]="abuse.state.label" class="glyphicon glyphicon-remove"></span>
+        <span *ngIf="abuse.moderationComment" container="body" placement="left auto" [ngbTooltip]="abuse.moderationComment" class="glyphicon glyphicon-comment"></span>
+      </td>
+
+      <td class="c-hand abuse-messages" (click)="openAbuseMessagesModal(abuse)">
+        <ng-container *ngIf="isLocalAbuse(abuse)">
+          {{ abuse.countMessages }}
+
+          <my-global-icon iconName="message-circle"></my-global-icon>
+        </ng-container>
+      </td>
+
+      <td class="action-cell">
+        <my-action-dropdown
+          [ngClass]="{ 'show': expanded }" placement="bottom-right top-right left auto" container="body"
+          i18n-label label="Actions" [actions]="abuseActions" [entry]="abuse"
+        ></my-action-dropdown>
+      </td>
+    </tr>
+  </ng-template>
+
+  <ng-template pTemplate="rowexpansion" let-abuse>
+      <tr>
+        <td class="expand-cell" colspan="6">
+          <my-abuse-details [abuse]="abuse" [baseRoute]="baseRoute" [isAdminView]="isAdminView()"></my-abuse-details>
+        </td>
+      </tr>
+  </ng-template>
+
+  <ng-template pTemplate="emptymessage">
+    <tr>
+      <td colspan="6">
+        <div class="no-results">
+          <ng-container *ngIf="search" i18n>No abuses found matching current filters.</ng-container>
+          <ng-container *ngIf="!search" i18n>No abuses found.</ng-container>
+        </div>
+      </td>
+    </tr>
+  </ng-template>
+</p-table>
+
+<my-moderation-comment-modal #moderationCommentModal (commentUpdated)="onModerationCommentUpdated()"></my-moderation-comment-modal>
+<my-abuse-message-modal #abuseMessagesModal [isAdminView]="isAdminView()" (countMessagesUpdated)="onCountMessagesUpdated($event)"></my-abuse-message-modal>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
new file mode 100644
index 000000000..7ed7c9e87
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.scss
@@ -0,0 +1,107 @@
+@import 'variables';
+@import 'mixins';
+@import 'miniature';
+
+.table-video-link {
+  @include disable-outline;
+
+  position: relative;
+  top: 3px;
+}
+
+.table-comment-link,
+.table-account-link {
+  @include disable-outline;
+
+  color: var(--mainForegroundColor);
+
+  ::ng-deep p:last-child {
+    margin: 0;
+  }
+}
+
+.table-account-link {
+  display: flex;
+  flex-direction: column;
+}
+
+.comment-flagged-account,
+.account-flagged-handle {
+  font-size: 11px;
+  color: var(--greyForegroundColor);
+}
+
+.table-video {
+  display: inline-flex;
+
+  .table-video-image {
+    @include miniature-thumbnail;
+
+    $image-height: 45px;
+
+    height: $image-height;
+    width: #{(16/9) * $image-height};
+    margin-right: 0.5rem;
+    border-radius: 2px;
+    border: none;
+    background: transparent;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+
+    img {
+      height: 100%;
+      width: 100%;
+      border-radius: 2px;
+    }
+
+    span {
+      color: pvar(--inputPlaceholderColor);
+    }
+
+    .table-video-image-label {
+      @include static-thumbnail-overlay;
+      position: absolute;
+      border-radius: 3px;
+      font-size: 10px;
+      padding: 0 3px;
+      line-height: 1.3;
+      bottom: 2px;
+      right: 2px;
+    }
+  }
+
+  .table-video-text {
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    font-size: 90%;
+    color: pvar(--mainForegroundColor);
+    line-height: 1rem;
+
+    div .glyphicon {
+      font-size: 80%;
+      color: gray;
+      margin-left: 0.1rem;
+    }
+
+    div + div {
+      color: var(--greyForegroundColor);
+      font-size: 11px;
+    }
+  }
+}
+
+.abuse-states .glyphicon-comment {
+  margin-left: 0.5rem;
+}
+
+.abuse-messages {
+  my-global-icon {
+    width: 22px;
+    margin-left: 3px;
+    position: relative;
+    top: -2px;
+  }
+}
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
new file mode 100644
index 000000000..1d17c9ec9
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/abuse-list-table.component.ts
@@ -0,0 +1,487 @@
+import * as debug from 'debug'
+import truncate from 'lodash-es/truncate'
+import { SortMeta } from 'primeng/api'
+import { buildVideoEmbed, buildVideoLink } from 'src/assets/player/utils'
+import { environment } from 'src/environments/environment'
+import { AfterViewInit, Component, OnInit, ViewChild, Input } from '@angular/core'
+import { DomSanitizer } from '@angular/platform-browser'
+import { ActivatedRoute, Params, Router } from '@angular/router'
+import { ConfirmService, MarkdownService, Notifier, RestPagination, RestTable } from '@app/core'
+import { Account, Actor, DropdownAction, Video, VideoService } from '@app/shared/shared-main'
+import { AbuseService, BlocklistService, VideoBlockService } from '@app/shared/shared-moderation'
+import { VideoCommentService } from '@app/shared/shared-video-comment'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { AbuseState, AdminAbuse } from '@shared/models'
+import { AbuseMessageModalComponent } from './abuse-message-modal.component'
+import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
+import { ProcessedAbuse } from './processed-abuse.model'
+
+const logger = debug('peertube:moderation:AbuseListTableComponent')
+
+@Component({
+  selector: 'my-abuse-list-table',
+  templateUrl: './abuse-list-table.component.html',
+  styleUrls: [ '../shared-moderation/moderation.scss', './abuse-list-table.component.scss' ]
+})
+export class AbuseListTableComponent extends RestTable implements OnInit, AfterViewInit {
+  @Input() viewType: 'admin' | 'user'
+  @Input() baseRoute: string
+
+  @ViewChild('abuseMessagesModal', { static: true }) abuseMessagesModal: AbuseMessageModalComponent
+  @ViewChild('moderationCommentModal', { static: true }) moderationCommentModal: ModerationCommentModalComponent
+
+  abuses: ProcessedAbuse[] = []
+  totalRecords = 0
+  sort: SortMeta = { field: 'createdAt', order: 1 }
+  pagination: RestPagination = { count: this.rowsPerPage, start: 0 }
+
+  abuseActions: DropdownAction<ProcessedAbuse>[][] = []
+
+  constructor (
+    private notifier: Notifier,
+    private abuseService: AbuseService,
+    private blocklistService: BlocklistService,
+    private commentService: VideoCommentService,
+    private videoService: VideoService,
+    private videoBlocklistService: VideoBlockService,
+    private confirmService: ConfirmService,
+    private i18n: I18n,
+    private markdownRenderer: MarkdownService,
+    private sanitizer: DomSanitizer,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.abuseActions = [
+      this.buildInternalActions(),
+
+      this.buildFlaggedAccountActions(),
+
+      this.buildCommentActions(),
+
+      this.buildVideoActions(),
+
+      this.buildAccountActions()
+    ]
+
+    this.initialize()
+
+    this.route.queryParams
+      .subscribe(params => {
+        this.search = params.search || ''
+
+        logger('On URL change (search: %s).', this.search)
+
+        this.setTableFilter(this.search)
+        this.loadData()
+      })
+  }
+
+  ngAfterViewInit () {
+    if (this.search) this.setTableFilter(this.search)
+  }
+
+  isAdminView () {
+    return this.viewType === 'admin'
+  }
+
+  getIdentifier () {
+    return 'AbuseListTableComponent'
+  }
+
+  openModerationCommentModal (abuse: AdminAbuse) {
+    this.moderationCommentModal.openModal(abuse)
+  }
+
+  onModerationCommentUpdated () {
+    this.loadData()
+  }
+
+  /* Table filter functions */
+  onAbuseSearch (event: Event) {
+    this.onSearch(event)
+    this.setQueryParams((event.target as HTMLInputElement).value)
+  }
+
+  setQueryParams (search: string) {
+    const queryParams: Params = {}
+    if (search) Object.assign(queryParams, { search })
+
+    this.router.navigate([ this.baseRoute ], { queryParams })
+  }
+
+  resetTableFilter () {
+    this.setTableFilter('')
+    this.setQueryParams('')
+    this.resetSearch()
+  }
+  /* END Table filter functions */
+
+  isAbuseAccepted (abuse: AdminAbuse) {
+    return abuse.state.id === AbuseState.ACCEPTED
+  }
+
+  isAbuseRejected (abuse: AdminAbuse) {
+    return abuse.state.id === AbuseState.REJECTED
+  }
+
+  getVideoUrl (abuse: AdminAbuse) {
+    return Video.buildClientUrl(abuse.video.uuid)
+  }
+
+  getCommentUrl (abuse: AdminAbuse) {
+    return Video.buildClientUrl(abuse.comment.video.uuid) + ';threadId=' + abuse.comment.threadId
+  }
+
+  getAccountUrl (abuse: ProcessedAbuse) {
+    return '/accounts/' + abuse.flaggedAccount.nameWithHost
+  }
+
+  getVideoEmbed (abuse: AdminAbuse) {
+    return buildVideoEmbed(
+      buildVideoLink({
+        baseUrl: `${environment.embedUrl}/videos/embed/${abuse.video.uuid}`,
+        title: false,
+        warningTitle: false,
+        startTime: abuse.startAt,
+        stopTime: abuse.endAt
+      })
+    )
+  }
+
+  switchToDefaultAvatar ($event: Event) {
+    ($event.target as HTMLImageElement).src = Actor.GET_DEFAULT_AVATAR_URL()
+  }
+
+  async removeAbuse (abuse: AdminAbuse) {
+    const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this abuse report?'), this.i18n('Delete'))
+    if (res === false) return
+
+    this.abuseService.removeAbuse(abuse).subscribe(
+      () => {
+        this.notifier.success(this.i18n('Abuse deleted.'))
+        this.loadData()
+      },
+
+      err => this.notifier.error(err.message)
+    )
+  }
+
+  updateAbuseState (abuse: AdminAbuse, state: AbuseState) {
+    this.abuseService.updateAbuse(abuse, { state })
+      .subscribe(
+        () => this.loadData(),
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  onCountMessagesUpdated (event: { abuseId: number, countMessages: number }) {
+    const abuse = this.abuses.find(a => a.id === event.abuseId)
+
+    if (!abuse) {
+      console.error('Cannot find abuse %d.', event.abuseId)
+      return
+    }
+
+    abuse.countMessages = event.countMessages
+  }
+
+  openAbuseMessagesModal (abuse: AdminAbuse) {
+    this.abuseMessagesModal.openModal(abuse)
+  }
+
+  isLocalAbuse (abuse: AdminAbuse) {
+    if (this.viewType === 'user') return true
+
+    return Actor.IS_LOCAL(abuse.reporterAccount.host)
+  }
+
+  protected loadData () {
+    logger('Loading data.')
+
+    const options = {
+      pagination: this.pagination,
+      sort: this.sort,
+      search: this.search
+    }
+
+    const observable = this.viewType === 'admin'
+      ? this.abuseService.getAdminAbuses(options)
+      : this.abuseService.getUserAbuses(options)
+
+    return observable.subscribe(
+        async resultList => {
+          this.totalRecords = resultList.total
+
+          this.abuses = []
+
+          for (const a of resultList.data) {
+            const abuse = a as ProcessedAbuse
+
+            abuse.reasonHtml = await this.toHtml(abuse.reason)
+
+            if (abuse.moderationComment) {
+              abuse.moderationCommentHtml = await this.toHtml(abuse.moderationComment)
+            }
+
+            if (abuse.video) {
+              abuse.embedHtml = this.sanitizer.bypassSecurityTrustHtml(this.getVideoEmbed(abuse))
+
+              if (abuse.video.channel?.ownerAccount) {
+                abuse.video.channel.ownerAccount = new Account(abuse.video.channel.ownerAccount)
+              }
+            }
+
+            if (abuse.comment) {
+              if (abuse.comment.deleted) {
+                abuse.truncatedCommentHtml = abuse.commentHtml = this.i18n('Deleted comment')
+              } else {
+                const truncated = truncate(abuse.comment.text, { length: 100 })
+                abuse.truncatedCommentHtml = await this.markdownRenderer.textMarkdownToHTML(truncated, true)
+                abuse.commentHtml = await this.markdownRenderer.textMarkdownToHTML(abuse.comment.text, true)
+              }
+            }
+
+            if (abuse.reporterAccount) {
+              abuse.reporterAccount = new Account(abuse.reporterAccount)
+            }
+
+            if (abuse.flaggedAccount) {
+              abuse.flaggedAccount = new Account(abuse.flaggedAccount)
+            }
+
+            if (abuse.updatedAt === abuse.createdAt) delete abuse.updatedAt
+
+            this.abuses.push(abuse)
+          }
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  private buildInternalActions (): DropdownAction<ProcessedAbuse>[] {
+    return [
+      {
+        label: this.i18n('Internal actions'),
+        isHeader: true
+      },
+      {
+        label: this.isAdminView()
+          ? this.i18n('Messages with reporter')
+          : this.i18n('Messages with moderators'),
+        handler: abuse => this.openAbuseMessagesModal(abuse),
+        isDisplayed: abuse => this.isLocalAbuse(abuse)
+      },
+      {
+        label: this.i18n('Update note'),
+        handler: abuse => this.openModerationCommentModal(abuse),
+        isDisplayed: abuse => this.isAdminView() && !!abuse.moderationComment
+      },
+      {
+        label: this.i18n('Mark as accepted'),
+        handler: abuse => this.updateAbuseState(abuse, AbuseState.ACCEPTED),
+        isDisplayed: abuse => this.isAdminView() && !this.isAbuseAccepted(abuse)
+      },
+      {
+        label: this.i18n('Mark as rejected'),
+        handler: abuse => this.updateAbuseState(abuse, AbuseState.REJECTED),
+        isDisplayed: abuse => this.isAdminView() && !this.isAbuseRejected(abuse)
+      },
+      {
+        label: this.i18n('Add internal note'),
+        handler: abuse => this.openModerationCommentModal(abuse),
+        isDisplayed: abuse => this.isAdminView() && !abuse.moderationComment
+      },
+      {
+        label: this.i18n('Delete report'),
+        handler: abuse => this.isAdminView() && this.removeAbuse(abuse)
+      }
+    ]
+  }
+
+  private buildFlaggedAccountActions (): DropdownAction<ProcessedAbuse>[] {
+    if (!this.isAdminView()) return []
+
+    return [
+      {
+        label: this.i18n('Actions for the flagged account'),
+        isHeader: true,
+        isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video
+      },
+
+      {
+        label: this.i18n('Mute account'),
+        isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
+        handler: abuse => this.muteAccountHelper(abuse.flaggedAccount)
+      },
+
+      {
+        label: this.i18n('Mute server account'),
+        isDisplayed: abuse => abuse.flaggedAccount && !abuse.comment && !abuse.video,
+        handler: abuse => this.muteServerHelper(abuse.flaggedAccount.host)
+      }
+    ]
+  }
+
+  private buildAccountActions (): DropdownAction<ProcessedAbuse>[] {
+    if (!this.isAdminView()) return []
+
+    return [
+      {
+        label: this.i18n('Actions for the reporter'),
+        isHeader: true,
+        isDisplayed: abuse => !!abuse.reporterAccount
+      },
+
+      {
+        label: this.i18n('Mute reporter'),
+        isDisplayed: abuse => !!abuse.reporterAccount,
+        handler: abuse => this.muteAccountHelper(abuse.reporterAccount)
+      },
+
+      {
+        label: this.i18n('Mute server'),
+        isDisplayed: abuse => abuse.reporterAccount && !abuse.reporterAccount.userId,
+        handler: abuse => this.muteServerHelper(abuse.reporterAccount.host)
+      }
+    ]
+  }
+
+  private buildVideoActions (): DropdownAction<ProcessedAbuse>[] {
+    if (!this.isAdminView()) return []
+
+    return [
+      {
+        label: this.i18n('Actions for the video'),
+        isHeader: true,
+        isDisplayed: abuse => abuse.video && !abuse.video.deleted
+      },
+      {
+        label: this.i18n('Block video'),
+        isDisplayed: abuse => abuse.video && !abuse.video.deleted && !abuse.video.blacklisted,
+        handler: abuse => {
+          this.videoBlocklistService.blockVideo(abuse.video.id, undefined, true)
+            .subscribe(
+              () => {
+                this.notifier.success(this.i18n('Video blocked.'))
+
+                this.updateAbuseState(abuse, AbuseState.ACCEPTED)
+              },
+
+              err => this.notifier.error(err.message)
+            )
+        }
+      },
+      {
+        label: this.i18n('Unblock video'),
+        isDisplayed: abuse => abuse.video && !abuse.video.deleted && abuse.video.blacklisted,
+        handler: abuse => {
+          this.videoBlocklistService.unblockVideo(abuse.video.id)
+            .subscribe(
+              () => {
+                this.notifier.success(this.i18n('Video unblocked.'))
+
+                this.updateAbuseState(abuse, AbuseState.ACCEPTED)
+              },
+
+              err => this.notifier.error(err.message)
+            )
+        }
+      },
+      {
+        label: this.i18n('Delete video'),
+        isDisplayed: abuse => abuse.video && !abuse.video.deleted,
+        handler: async abuse => {
+          const res = await this.confirmService.confirm(
+            this.i18n('Do you really want to delete this video?'),
+            this.i18n('Delete')
+          )
+          if (res === false) return
+
+          this.videoService.removeVideo(abuse.video.id)
+            .subscribe(
+              () => {
+                this.notifier.success(this.i18n('Video deleted.'))
+
+                this.updateAbuseState(abuse, AbuseState.ACCEPTED)
+              },
+
+              err => this.notifier.error(err.message)
+            )
+        }
+      }
+    ]
+  }
+
+  private buildCommentActions (): DropdownAction<ProcessedAbuse>[] {
+    if (!this.isAdminView()) return []
+
+    return [
+      {
+        label: this.i18n('Actions for the comment'),
+        isHeader: true,
+        isDisplayed: abuse => abuse.comment && !abuse.comment.deleted
+      },
+
+      {
+        label: this.i18n('Delete comment'),
+        isDisplayed: abuse => abuse.comment && !abuse.comment.deleted,
+        handler: async abuse => {
+          const res = await this.confirmService.confirm(
+            this.i18n('Do you really want to delete this comment?'),
+            this.i18n('Delete')
+          )
+          if (res === false) return
+
+          this.commentService.deleteVideoComment(abuse.comment.video.id, abuse.comment.id)
+            .subscribe(
+              () => {
+                this.notifier.success(this.i18n('Comment deleted.'))
+
+                this.updateAbuseState(abuse, AbuseState.ACCEPTED)
+              },
+
+              err => this.notifier.error(err.message)
+            )
+        }
+      }
+    ]
+  }
+
+  private muteAccountHelper (account: Account) {
+    this.blocklistService.blockAccountByInstance(account)
+      .subscribe(
+        () => {
+          this.notifier.success(
+            this.i18n('Account {{nameWithHost}} muted by the instance.', { nameWithHost: account.nameWithHost })
+          )
+
+          account.mutedByInstance = true
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  private muteServerHelper (host: string) {
+    this.blocklistService.blockServerByInstance(host)
+      .subscribe(
+        () => {
+          this.notifier.success(
+            this.i18n('Server {{host}} muted by the instance.', { host: host })
+          )
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  private toHtml (text: string) {
+    return this.markdownRenderer.textMarkdownToHTML(text)
+  }
+}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
new file mode 100644
index 000000000..cb965b71d
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.html
@@ -0,0 +1,50 @@
+<ng-template #modal>
+  <div class="modal-header">
+    <h4 class="modal-title">
+      <ng-container i18n *ngIf="isAdminView">Messages with the reporter</ng-container>
+      <ng-container i18n *ngIf="!isAdminView">Messages with the moderation team</ng-container>
+    </h4>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+
+  <div class="modal-body">
+    <div class="messages" #messagesBlock>
+      <div
+        *ngFor="let message of abuseMessages"
+        class="message-block" [ngClass]="{ 'by-moderator': message.byModerator, 'by-me': isMessageByMe(message) }"
+      >
+
+        <div class="author">{{ message.account.name }}</div>
+
+        <div class="bubble">
+          <div class="content">{{ message.message }}</div>
+          <div class="date">{{ message.createdAt | date }}</div>
+        </div>
+      </div>
+    </div>
+
+    <div class="no-messages" *ngIf="noResults" i18n>
+      No messages for now.
+    </div>
+
+    <form novalidate [formGroup]="form" (ngSubmit)="addMessage()">
+      <div class="form-group">
+        <textarea
+          formControlName="message" ngbAutofocus [placeholder]="getPlaceholderMessage()"
+          [ngClass]="{ 'input-error': formErrors['message'] }" class="form-control"
+        ></textarea>
+
+        <div *ngIf="formErrors.message" class="form-error">
+          {{ formErrors.message }}
+        </div>
+      </div>
+
+      <div class="form-group inputs">
+        <input type="submit" i18n-value value="Add a message" class="action-button-submit" [disabled]="!form.valid || sendingMessage">
+      </div>
+    </form>
+
+  </div>
+
+</ng-template>
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
new file mode 100644
index 000000000..4dd025fc4
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.scss
@@ -0,0 +1,72 @@
+@import 'variables';
+@import 'mixins';
+
+form {
+  margin: 20px 20px 0 0;
+
+  .form-group:first-child {
+    // Keep place to display error message without modifying the height
+    min-height: 125px;
+  }
+}
+
+textarea {
+  @include peertube-textarea(100%, 70px);
+
+  margin-top: 20px;
+}
+
+.messages {
+  display: flex;
+  flex-direction: column;
+  overflow-y: scroll;
+}
+
+.no-messages {
+  display: flex;
+  font-size: 15px;
+  justify-content: center;
+}
+
+.message-block {
+  margin: 0 5px 10px 0;
+  max-width: 60%;
+
+  .author {
+    color: var(--greyForegroundColor);
+    font-size: 14px;
+    padding: 0 0 3px 10px;
+  }
+
+  .bubble {
+    border-radius: 10px;
+    padding: 5px 10px;
+    color: var(--mainForegroundColor);
+    background-color: var(--greyBackgroundColor);
+
+    .content {
+      font-size: 15px;
+    }
+
+    .date {
+      font-size: 13px;
+      color: var(--greyForegroundColor);
+    }
+  }
+
+  &.by-me {
+
+    .bubble {
+      color: var(--mainBackgroundColor);
+      background-color: var(--mainColorLighter);
+
+      .date {
+        color: var(--mainBackgroundColor);
+      }
+    }
+  }
+
+  &.by-moderator {
+    align-self: flex-end;
+  }
+}
diff --git a/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts
new file mode 100644
index 000000000..03f5ad735
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/abuse-message-modal.component.ts
@@ -0,0 +1,127 @@
+import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'
+import { AuthService, Notifier } from '@app/core'
+import { AbuseValidatorsService, FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { AbuseMessage, UserAbuse } from '@shared/models'
+import { AbuseService } from '../shared-moderation'
+
+@Component({
+  selector: 'my-abuse-message-modal',
+  templateUrl: './abuse-message-modal.component.html',
+  styleUrls: [ './abuse-message-modal.component.scss' ]
+})
+export class AbuseMessageModalComponent extends FormReactive implements OnInit {
+  @ViewChild('modal', { static: true }) modal: NgbModal
+  @ViewChild('messagesBlock', { static: false }) messagesBlock: ElementRef
+
+  @Input() isAdminView: boolean
+
+  @Output() countMessagesUpdated = new EventEmitter<{ abuseId: number, countMessages: number }>()
+
+  abuseMessages: AbuseMessage[] = []
+  textareaMessage: string
+  sendingMessage = false
+  noResults = false
+
+  private openedModal: NgbModalRef
+  private abuse: UserAbuse
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private abuseValidatorsService: AbuseValidatorsService,
+    private modalService: NgbModal,
+    private i18n: I18n,
+    private auth: AuthService,
+    private notifier: Notifier,
+    private abuseService: AbuseService
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      message: this.abuseValidatorsService.ABUSE_MESSAGE
+    })
+  }
+
+  openModal (abuse: UserAbuse) {
+    this.abuse = abuse
+
+    this.openedModal = this.modalService.open(this.modal, { centered: true })
+
+    this.loadMessages()
+  }
+
+  hide () {
+    this.abuseMessages = []
+    this.openedModal.close()
+  }
+
+  addMessage () {
+    this.sendingMessage = true
+
+    this.abuseService.addAbuseMessage(this.abuse, this.form.value['message'])
+      .subscribe(
+        () => {
+          this.form.reset()
+          this.sendingMessage = false
+          this.countMessagesUpdated.emit({ abuseId: this.abuse.id, countMessages: this.abuseMessages.length + 1 })
+
+          this.loadMessages()
+        },
+
+        err => {
+          this.sendingMessage = false
+          console.error(err)
+          this.notifier.error('Sorry but you cannot send this message. Please retry later')
+        }
+      )
+  }
+
+  deleteMessage (abuseMessage: AbuseMessage) {
+    this.abuseService.deleteAbuseMessage(this.abuse, abuseMessage)
+      .subscribe(
+        () => {
+          this.countMessagesUpdated.emit({ abuseId: this.abuse.id, countMessages: this.abuseMessages.length - 1 })
+
+          this.abuseMessages = this.abuseMessages.filter(m => m.id !== abuseMessage.id)
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+  isMessageByMe (abuseMessage: AbuseMessage) {
+    return this.auth.getUser().account.id === abuseMessage.account.id
+  }
+
+  getPlaceholderMessage () {
+    if (this.isAdminView) {
+      return this.i18n('Add a message to communicate with the reporter')
+    }
+
+    return this.i18n('Add a message to communicate with the moderation team')
+  }
+
+  private loadMessages () {
+    this.abuseService.listAbuseMessages(this.abuse)
+      .subscribe(
+        res => {
+          this.abuseMessages = res.data
+          this.noResults = this.abuseMessages.length === 0
+
+          setTimeout(() => {
+            if (!this.messagesBlock) return
+
+            const element = this.messagesBlock.nativeElement as HTMLElement
+            element.scrollIntoView({ block: 'end', inline: 'nearest' })
+          })
+        },
+
+        err => this.notifier.error(err.message)
+      )
+  }
+
+}
diff --git a/client/src/app/shared/shared-abuse-list/index.ts b/client/src/app/shared/shared-abuse-list/index.ts
new file mode 100644
index 000000000..3bdd18201
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/index.ts
@@ -0,0 +1,7 @@
+export * from './abuse-message-modal.component'
+export * from './abuse-list-table.component'
+export * from './abuse-details.component'
+export * from './moderation-comment-modal.component'
+export * from './processed-abuse.model'
+
+export * from './shared-abuse-list.module'
diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
new file mode 100644
index 000000000..8082e93f4
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.html
@@ -0,0 +1,38 @@
+<ng-template #modal>
+  <div class="modal-header">
+    <h4 i18n class="modal-title">Moderation comment</h4>
+
+    <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
+  </div>
+
+  <div class="modal-body">
+    <form novalidate [formGroup]="form" (ngSubmit)="banUser()">
+      <div class="form-group">
+        <textarea
+          formControlName="moderationComment" ngbAutofocus i18-placeholder placeholder="Comment this report…"
+          [ngClass]="{ 'input-error': formErrors['moderationComment'] }" class="form-control">
+        </textarea>
+        <div *ngIf="formErrors.moderationComment" class="form-error">
+          {{ formErrors.moderationComment }}
+        </div>
+      </div>
+
+      <div class="form-group" i18n>
+        This comment can only be seen by you or the other moderators.
+      </div>
+
+      <div class="form-group inputs">
+        <input
+          type="button" role="button" i18n-value value="Cancel" class="action-button action-button-cancel"
+          (click)="hide()" (key.enter)="hide()"
+        >
+
+        <input
+          type="submit" i18n-value value="Update this comment" class="action-button-submit"
+          [disabled]="!form.valid"
+        >
+      </div>
+    </form>
+  </div>
+
+</ng-template>
diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss
new file mode 100644
index 000000000..afcdb9a16
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.scss
@@ -0,0 +1,6 @@
+@import 'variables';
+@import 'mixins';
+
+textarea {
+  @include peertube-textarea(100%, 100px);
+}
diff --git a/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts
new file mode 100644
index 000000000..ecb7966bf
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/moderation-comment-modal.component.ts
@@ -0,0 +1,70 @@
+import { Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core'
+import { Notifier } from '@app/core'
+import { FormReactive, FormValidatorService, AbuseValidatorsService } from '@app/shared/shared-forms'
+import { AbuseService } from '@app/shared/shared-moderation'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
+import { I18n } from '@ngx-translate/i18n-polyfill'
+import { AdminAbuse } from '@shared/models'
+
+@Component({
+  selector: 'my-moderation-comment-modal',
+  templateUrl: './moderation-comment-modal.component.html',
+  styleUrls: [ './moderation-comment-modal.component.scss' ]
+})
+export class ModerationCommentModalComponent extends FormReactive implements OnInit {
+  @ViewChild('modal', { static: true }) modal: NgbModal
+  @Output() commentUpdated = new EventEmitter<string>()
+
+  private abuseToComment: AdminAbuse
+  private openedModal: NgbModalRef
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private modalService: NgbModal,
+    private notifier: Notifier,
+    private abuseService: AbuseService,
+    private abuseValidatorsService: AbuseValidatorsService,
+    private i18n: I18n
+  ) {
+    super()
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      moderationComment: this.abuseValidatorsService.ABUSE_MODERATION_COMMENT
+    })
+  }
+
+  openModal (abuseToComment: AdminAbuse) {
+    this.abuseToComment = abuseToComment
+    this.openedModal = this.modalService.open(this.modal, { centered: true })
+
+    this.form.patchValue({
+      moderationComment: this.abuseToComment.moderationComment
+    })
+  }
+
+  hide () {
+    this.abuseToComment = undefined
+    this.openedModal.close()
+    this.form.reset()
+  }
+
+  async banUser () {
+    const moderationComment: string = this.form.value[ 'moderationComment' ]
+
+    this.abuseService.updateAbuse(this.abuseToComment, { moderationComment })
+        .subscribe(
+          () => {
+            this.notifier.success(this.i18n('Comment updated.'))
+
+            this.commentUpdated.emit(moderationComment)
+            this.hide()
+          },
+
+          err => this.notifier.error(err.message)
+        )
+  }
+
+}
diff --git a/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts b/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts
new file mode 100644
index 000000000..fce1a8db3
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/processed-abuse.model.ts
@@ -0,0 +1,25 @@
+import { SafeHtml } from '@angular/platform-browser'
+import { AdminAbuse } from '@shared/models'
+import { Account } from '@app/shared/shared-main'
+
+// Don't use an abuse model because we need external services to compute some properties
+// And this model is only used in this component
+export type ProcessedAbuse = AdminAbuse & {
+  moderationCommentHtml?: string,
+  reasonHtml?: string
+  embedHtml?: SafeHtml
+  updatedAt?: Date
+
+  // override bare server-side definitions with rich client-side definitions
+  reporterAccount?: Account
+  flaggedAccount?: Account
+
+  truncatedCommentHtml?: string
+  commentHtml?: string
+
+  video: AdminAbuse['video'] & {
+    channel: AdminAbuse['video']['channel'] & {
+      ownerAccount: Account
+    }
+  }
+}
diff --git a/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts b/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
new file mode 100644
index 000000000..663cd902b
--- /dev/null
+++ b/client/src/app/shared/shared-abuse-list/shared-abuse-list.module.ts
@@ -0,0 +1,42 @@
+
+import { TableModule } from 'primeng/table'
+import { NgModule } from '@angular/core'
+import { SharedFormModule } from '../shared-forms/shared-form.module'
+import { SharedGlobalIconModule } from '../shared-icons'
+import { SharedMainModule } from '../shared-main/shared-main.module'
+import { SharedModerationModule } from '../shared-moderation'
+import { SharedVideoCommentModule } from '../shared-video-comment'
+import { AbuseDetailsComponent } from './abuse-details.component'
+import { AbuseListTableComponent } from './abuse-list-table.component'
+import { AbuseMessageModalComponent } from './abuse-message-modal.component'
+import { ModerationCommentModalComponent } from './moderation-comment-modal.component'
+
+@NgModule({
+  imports: [
+    TableModule,
+
+    SharedMainModule,
+    SharedFormModule,
+    SharedModerationModule,
+    SharedGlobalIconModule,
+    SharedVideoCommentModule
+  ],
+
+  declarations: [
+    AbuseDetailsComponent,
+    AbuseListTableComponent,
+    ModerationCommentModalComponent,
+    AbuseMessageModalComponent
+  ],
+
+  exports: [
+    AbuseDetailsComponent,
+    AbuseListTableComponent,
+    ModerationCommentModalComponent,
+    AbuseMessageModalComponent
+  ],
+
+  providers: [
+  ]
+})
+export class SharedAbuseListModule { }