Fix settings menu

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

js/src/views/Moderation/Logs.vue

@@ -1,146 +1,160 @@
 <template>
-  <section>
-    <ul v-if="actionLogs.length > 0">
-      <li v-for="log in actionLogs" :key="log.id">
-        <div class="box">
-          <img class="image" :src="log.actor.avatar.url" v-if="log.actor.avatar" />
-          <i18n
-            v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED"
-            tag="span"
-            path="{moderator} closed {report}"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+  <div>
+    <nav class="breadcrumb" aria-label="breadcrumbs">
+      <ul>
+        <li>
+          <router-link :to="{ name: RouteName.MODERATION }">{{ $t("Moderation") }}</router-link>
+        </li>
+        <li class="is-active">
+          <router-link :to="{ name: RouteName.REPORT_LOGS }">{{
+            $t("Moderation log")
+          }}</router-link>
+        </li>
+      </ul>
+    </nav>
+    <section>
+      <ul v-if="actionLogs.length > 0">
+        <li v-for="log in actionLogs" :key="log.id">
+          <div class="box">
+            <img class="image" :src="log.actor.avatar.url" v-if="log.actor.avatar" />
+            <i18n
+              v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED"
+              tag="span"
+              path="{moderator} closed {report}"
             >
-            <router-link
-              :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
-              slot="report"
-              >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
-            </router-link>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.REPORT_UPDATE_OPENED"
-            tag="span"
-            path="{moderator} reopened {report}"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
+                slot="report"
+                >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
+              </router-link>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.REPORT_UPDATE_OPENED"
+              tag="span"
+              path="{moderator} reopened {report}"
             >
-            <router-link
-              :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
-              slot="report"
-              >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
-            </router-link>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.REPORT_UPDATE_RESOLVED"
-            tag="span"
-            path="{moderator} marked {report} as resolved"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
+                slot="report"
+                >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
+              </router-link>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.REPORT_UPDATE_RESOLVED"
+              tag="span"
+              path="{moderator} marked {report} as resolved"
             >
-            <router-link
-              :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
-              slot="report"
-              >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
-            </router-link>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.NOTE_CREATION"
-            tag="span"
-            path="{moderator} added a note on {report}"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
+                slot="report"
+                >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
+              </router-link>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.NOTE_CREATION"
+              tag="span"
+              path="{moderator} added a note on {report}"
             >
-            <router-link
-              v-if="log.object.report"
-              :to="{ name: RouteName.REPORT, params: { reportId: log.object.report.id } }"
-              slot="report"
-              >{{ $t("report #{report_number}", { report_number: log.object.report.id }) }}
-            </router-link>
-            <span v-else slot="report">{{ $t("a non-existent report") }}</span>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.EVENT_DELETION"
-            tag="span"
-            path='{moderator} deleted an event named "{title}"'
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                v-if="log.object.report"
+                :to="{ name: RouteName.REPORT, params: { reportId: log.object.report.id } }"
+                slot="report"
+                >{{ $t("report #{report_number}", { report_number: log.object.report.id }) }}
+              </router-link>
+              <span v-else slot="report">{{ $t("a non-existent report") }}</span>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.EVENT_DELETION"
+              tag="span"
+              path='{moderator} deleted an event named "{title}"'
             >
-            <b slot="title">{{ log.object.title }}</b>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.ACTOR_SUSPENSION"
-            tag="span"
-            path="{moderator} suspended profile {profile}"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <b slot="title">{{ log.object.title }}</b>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.ACTOR_SUSPENSION"
+              tag="span"
+              path="{moderator} suspended profile {profile}"
             >
-            <router-link
-              slot="profile"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.object.id } }"
-              >{{ displayNameAndUsername(log.object) }}
-            </router-link>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.ACTOR_UNSUSPENSION"
-            tag="span"
-            path="{moderator} has unsuspended profile {profile}"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                slot="profile"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.object.id } }"
+                >{{ displayNameAndUsername(log.object) }}
+              </router-link>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.ACTOR_UNSUSPENSION"
+              tag="span"
+              path="{moderator} has unsuspended profile {profile}"
             >
-            <router-link
-              slot="profile"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.object.id } }"
-              >{{ displayNameAndUsername(log.object) }}
-            </router-link>
-          </i18n>
-          <i18n
-            v-else-if="log.action === ActionLogAction.USER_DELETION"
-            tag="span"
-            path="{moderator} has deleted user {user}"
-          >
-            <router-link
-              slot="moderator"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
-              >@{{ log.actor.preferredUsername }}</router-link
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                slot="profile"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.object.id } }"
+                >{{ displayNameAndUsername(log.object) }}
+              </router-link>
+            </i18n>
+            <i18n
+              v-else-if="log.action === ActionLogAction.USER_DELETION"
+              tag="span"
+              path="{moderator} has deleted user {user}"
             >
-            <router-link
-              v-if="log.object.confirmedAt"
-              slot="user"
-              :to="{ name: RouteName.ADMIN_USER_PROFILE, params: { id: log.object.id } }"
-              >{{ log.object.email }}
-            </router-link>
-            <b v-else slot="user">{{ log.object.email }}</b>
-          </i18n>
-          <br />
-          <small>{{ log.insertedAt | formatDateTimeString }}</small>
-        </div>
-      </li>
-    </ul>
-    <div v-else>
-      <b-message type="is-info">{{ $t("No moderation logs yet") }}</b-message>
-    </div>
-  </section>
+              <router-link
+                slot="moderator"
+                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                >@{{ log.actor.preferredUsername }}</router-link
+              >
+              <router-link
+                v-if="log.object.confirmedAt"
+                slot="user"
+                :to="{ name: RouteName.ADMIN_USER_PROFILE, params: { id: log.object.id } }"
+                >{{ log.object.email }}
+              </router-link>
+              <b v-else slot="user">{{ log.object.email }}</b>
+            </i18n>
+            <br />
+            <small>{{ log.insertedAt | formatDateTimeString }}</small>
+          </div>
+        </li>
+      </ul>
+      <div v-else>
+        <b-message type="is-info">{{ $t("No moderation logs yet") }}</b-message>
+      </div>
+    </section>
+  </div>
 </template>
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";

js/src/views/Moderation/Report.vue

@@ -1,202 +1,219 @@
 <template>
-  <section>
-    <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">
-      {{ error }}
-    </b-message>
-    <div class="container" v-if="report">
-      <div class="buttons">
-        <b-button
-          v-if="report.status !== ReportStatusEnum.RESOLVED"
-          @click="updateReport(ReportStatusEnum.RESOLVED)"
-          type="is-primary"
-          >{{ $t("Mark as resolved") }}</b-button
-        >
-        <b-button
-          v-if="report.status !== ReportStatusEnum.OPEN"
-          @click="updateReport(ReportStatusEnum.OPEN)"
-          type="is-success"
-          >{{ $t("Reopen") }}</b-button
-        >
-        <b-button
-          v-if="report.status !== ReportStatusEnum.CLOSED"
-          @click="updateReport(ReportStatusEnum.CLOSED)"
-          type="is-danger"
-          >{{ $t("Close") }}</b-button
-        >
-      </div>
-      <div class="table-container">
-        <table class="table is-striped is-fullwidth">
-          <tbody>
-            <tr>
-              <td>{{ $t("Reported identity") }}</td>
-              <td>
-                <router-link
-                  :to="{
-                    name: RouteName.ADMIN_PROFILE,
-                    params: { id: report.reported.id },
-                  }"
-                >
-                  <img
-                    v-if="report.reported.avatar"
-                    class="image"
-                    :src="report.reported.avatar.url"
-                    alt=""
-                  />
-                  @{{ report.reported.preferredUsername }}
-                </router-link>
-              </td>
-            </tr>
-            <tr>
-              <td>{{ $t("Reported by") }}</td>
-              <td v-if="report.reporter.type === ActorType.APPLICATION">
-                {{ report.reporter.domain }}
-              </td>
-              <td v-else>
-                <router-link
-                  :to="{
-                    name: RouteName.ADMIN_PROFILE,
-                    params: { id: report.reporter.id },
-                  }"
-                >
-                  <img
-                    v-if="report.reporter.avatar"
-                    class="image"
-                    :src="report.reporter.avatar.url"
-                    alt=""
-                  />
-                  @{{ report.reporter.preferredUsername }}
-                </router-link>
-              </td>
-            </tr>
-            <tr>
-              <td>{{ $t("Reported") }}</td>
-              <td>{{ report.insertedAt | formatDateTimeString }}</td>
-            </tr>
-            <tr v-if="report.updatedAt !== report.insertedAt">
-              <td>{{ $t("Updated") }}</td>
-              <td>{{ report.updatedAt | formatDateTimeString }}</td>
-            </tr>
-            <tr>
-              <td>{{ $t("Status") }}</td>
-              <td>
-                <span v-if="report.status === ReportStatusEnum.OPEN">{{ $t("Open") }}</span>
-                <span v-else-if="report.status === ReportStatusEnum.CLOSED">
-                  {{ $t("Closed") }}
-                </span>
-                <span v-else-if="report.status === ReportStatusEnum.RESOLVED">
-                  {{ $t("Resolved") }}
-                </span>
-                <span v-else>{{ $t("Unknown") }}</span>
-              </td>
-            </tr>
-            <tr v-if="report.event && report.comments.length > 0">
-              <td>{{ $t("Event") }}</td>
-              <td>
-                <router-link :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid } }">
-                  {{ report.event.title }}
-                </router-link>
-                <span class="is-pulled-right">
-                  <!--                                    <b-button-->
-                  <!--                                            tag="router-link"-->
-                  <!--                                            type="is-primary"-->
-                  <!--                                            :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
-                  <!--                                            icon-left="pencil"-->
-                  <!--                                            size="is-small">{{ $t('Edit') }}</b-button>-->
+  <div>
+    <nav class="breadcrumb" aria-label="breadcrumbs" v-if="report">
+      <ul>
+        <li>
+          <router-link :to="{ name: RouteName.MODERATION }">{{ $t("Moderation") }}</router-link>
+        </li>
+        <li>
+          <router-link :to="{ name: RouteName.REPORTS }">{{ $t("Reports") }}</router-link>
+        </li>
+        <li class="is-active">
+          <router-link :to="{ name: RouteName.REPORT, params: { id: report.id } }">{{
+            $t("Report #{reportNumber}", { reportNumber: report.id })
+          }}</router-link>
+        </li>
+      </ul>
+    </nav>
+    <section>
+      <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">
+        {{ error }}
+      </b-message>
+      <div class="container" v-if="report">
+        <div class="buttons">
+          <b-button
+            v-if="report.status !== ReportStatusEnum.RESOLVED"
+            @click="updateReport(ReportStatusEnum.RESOLVED)"
+            type="is-primary"
+            >{{ $t("Mark as resolved") }}</b-button
+          >
+          <b-button
+            v-if="report.status !== ReportStatusEnum.OPEN"
+            @click="updateReport(ReportStatusEnum.OPEN)"
+            type="is-success"
+            >{{ $t("Reopen") }}</b-button
+          >
+          <b-button
+            v-if="report.status !== ReportStatusEnum.CLOSED"
+            @click="updateReport(ReportStatusEnum.CLOSED)"
+            type="is-danger"
+            >{{ $t("Close") }}</b-button
+          >
+        </div>
+        <div class="table-container">
+          <table class="table is-striped is-fullwidth">
+            <tbody>
+              <tr>
+                <td>{{ $t("Reported identity") }}</td>
+                <td>
+                  <router-link
+                    :to="{
+                      name: RouteName.ADMIN_PROFILE,
+                      params: { id: report.reported.id },
+                    }"
+                  >
+                    <img
+                      v-if="report.reported.avatar"
+                      class="image"
+                      :src="report.reported.avatar.url"
+                      alt=""
+                    />
+                    @{{ report.reported.preferredUsername }}
+                  </router-link>
+                </td>
+              </tr>
+              <tr>
+                <td>{{ $t("Reported by") }}</td>
+                <td v-if="report.reporter.type === ActorType.APPLICATION">
+                  {{ report.reporter.domain }}
+                </td>
+                <td v-else>
+                  <router-link
+                    :to="{
+                      name: RouteName.ADMIN_PROFILE,
+                      params: { id: report.reporter.id },
+                    }"
+                  >
+                    <img
+                      v-if="report.reporter.avatar"
+                      class="image"
+                      :src="report.reporter.avatar.url"
+                      alt=""
+                    />
+                    @{{ report.reporter.preferredUsername }}
+                  </router-link>
+                </td>
+              </tr>
+              <tr>
+                <td>{{ $t("Reported") }}</td>
+                <td>{{ report.insertedAt | formatDateTimeString }}</td>
+              </tr>
+              <tr v-if="report.updatedAt !== report.insertedAt">
+                <td>{{ $t("Updated") }}</td>
+                <td>{{ report.updatedAt | formatDateTimeString }}</td>
+              </tr>
+              <tr>
+                <td>{{ $t("Status") }}</td>
+                <td>
+                  <span v-if="report.status === ReportStatusEnum.OPEN">{{ $t("Open") }}</span>
+                  <span v-else-if="report.status === ReportStatusEnum.CLOSED">
+                    {{ $t("Closed") }}
+                  </span>
+                  <span v-else-if="report.status === ReportStatusEnum.RESOLVED">
+                    {{ $t("Resolved") }}
+                  </span>
+                  <span v-else>{{ $t("Unknown") }}</span>
+                </td>
+              </tr>
+              <tr v-if="report.event && report.comments.length > 0">
+                <td>{{ $t("Event") }}</td>
+                <td>
+                  <router-link :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid } }">
+                    {{ report.event.title }}
+                  </router-link>
+                  <span class="is-pulled-right">
+                    <!--                                    <b-button-->
+                    <!--                                            tag="router-link"-->
+                    <!--                                            type="is-primary"-->
+                    <!--                                            :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
+                    <!--                                            icon-left="pencil"-->
+                    <!--                                            size="is-small">{{ $t('Edit') }}</b-button>-->
+                    <b-button
+                      type="is-danger"
+                      @click="confirmEventDelete()"
+                      icon-left="delete"
+                      size="is-small"
+                      >{{ $t("Delete") }}</b-button
+                    >
+                  </span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <div class="box report-content">
+          <p v-if="report.content" v-html="nl2br(report.content)" />
+          <p v-else>{{ $t("No comment") }}</p>
+        </div>
+
+        <div class="box" v-if="report.event && report.comments.length === 0">
+          <router-link :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid } }">
+            <h3 class="title">{{ report.event.title }}</h3>
+            <p v-html="report.event.description" />
+          </router-link>
+          <!--                <b-button-->
+          <!--                        tag="router-link"-->
+          <!--                        type="is-primary"-->
+          <!--                        :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
+          <!--                        icon-left="pencil"-->
+          <!--                        size="is-small">{{ $t('Edit') }}</b-button>-->
+          <b-button
+            type="is-danger"
+            @click="confirmEventDelete()"
+            icon-left="delete"
+            size="is-small"
+            >{{ $t("Delete") }}</b-button
+          >
+        </div>
+
+        <ul v-for="comment in report.comments" v-if="report.comments.length > 0" :key="comment.id">
+          <li>
+            <div class="box" v-if="comment">
+              <article class="media">
+                <div class="media-left">
+                  <figure class="image is-48x48" v-if="comment.actor && comment.actor.avatar">
+                    <img :src="comment.actor.avatar.url" alt="Image" />
+                  </figure>
+                  <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+                </div>
+                <div class="media-content">
+                  <div class="content">
+                    <span v-if="comment.actor">
+                      <strong>{{ comment.actor.name }}</strong>
+                      <small>@{{ comment.actor.preferredUsername }}</small>
+                    </span>
+                    <span v-else>{{ $t("Unknown actor") }}</span>
+                    <br />
+                    <p v-html="comment.text" />
+                  </div>
                   <b-button
                     type="is-danger"
-                    @click="confirmEventDelete()"
+                    @click="confirmCommentDelete(comment)"
                     icon-left="delete"
                     size="is-small"
                     >{{ $t("Delete") }}</b-button
                   >
-                </span>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <div class="box report-content">
-        <p v-if="report.content" v-html="nl2br(report.content)" />
-        <p v-else>{{ $t("No comment") }}</p>
-      </div>
-
-      <div class="box" v-if="report.event && report.comments.length === 0">
-        <router-link :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid } }">
-          <h3 class="title">{{ report.event.title }}</h3>
-          <p v-html="report.event.description" />
-        </router-link>
-        <!--                <b-button-->
-        <!--                        tag="router-link"-->
-        <!--                        type="is-primary"-->
-        <!--                        :to="{ name: RouteName.EDIT_EVENT, params: {eventId: report.event.uuid } }"-->
-        <!--                        icon-left="pencil"-->
-        <!--                        size="is-small">{{ $t('Edit') }}</b-button>-->
-        <b-button
-          type="is-danger"
-          @click="confirmEventDelete()"
-          icon-left="delete"
-          size="is-small"
-          >{{ $t("Delete") }}</b-button
-        >
-      </div>
-
-      <ul v-for="comment in report.comments" v-if="report.comments.length > 0" :key="comment.id">
-        <li>
-          <div class="box" v-if="comment">
-            <article class="media">
-              <div class="media-left">
-                <figure class="image is-48x48" v-if="comment.actor && comment.actor.avatar">
-                  <img :src="comment.actor.avatar.url" alt="Image" />
-                </figure>
-                <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
-              </div>
-              <div class="media-content">
-                <div class="content">
-                  <span v-if="comment.actor">
-                    <strong>{{ comment.actor.name }}</strong>
-                    <small>@{{ comment.actor.preferredUsername }}</small>
-                  </span>
-                  <span v-else>{{ $t("Unknown actor") }}</span>
-                  <br />
-                  <p v-html="comment.text" />
                 </div>
-                <b-button
-                  type="is-danger"
-                  @click="confirmCommentDelete(comment)"
-                  icon-left="delete"
-                  size="is-small"
-                  >{{ $t("Delete") }}</b-button
-                >
-              </div>
-            </article>
-          </div>
-        </li>
-      </ul>
+              </article>
+            </div>
+          </li>
+        </ul>
 
-      <h2 class="title" v-if="report.notes.length > 0">{{ $t("Notes") }}</h2>
-      <div class="box note" v-for="note in report.notes" :id="`note-${note.id}`" :key="note.id">
-        <p>{{ note.content }}</p>
-        <router-link :to="{ name: RouteName.ADMIN_PROFILE, params: { id: note.moderator.id } }">
-          <img alt class="image" :src="note.moderator.avatar.url" v-if="note.moderator.avatar" />
-          @{{ note.moderator.preferredUsername }}
-        </router-link>
-        <br />
-        <small>
-          <a :href="`#note-${note.id}`" v-if="note.insertedAt">
-            {{ note.insertedAt | formatDateTimeString }}
-          </a>
-        </small>
+        <h2 class="title" v-if="report.notes.length > 0">{{ $t("Notes") }}</h2>
+        <div class="box note" v-for="note in report.notes" :id="`note-${note.id}`" :key="note.id">
+          <p>{{ note.content }}</p>
+          <router-link :to="{ name: RouteName.ADMIN_PROFILE, params: { id: note.moderator.id } }">
+            <img alt class="image" :src="note.moderator.avatar.url" v-if="note.moderator.avatar" />
+            @{{ note.moderator.preferredUsername }}
+          </router-link>
+          <br />
+          <small>
+            <a :href="`#note-${note.id}`" v-if="note.insertedAt">
+              {{ note.insertedAt | formatDateTimeString }}
+            </a>
+          </small>
+        </div>
+
+        <form @submit="addNote()">
+          <b-field :label="$t('New note')" label-for="newNoteInput">
+            <b-input type="textarea" v-model="noteContent" id="newNoteInput"></b-input>
+          </b-field>
+          <b-button type="submit" @click="addNote">{{ $t("Add a note") }}</b-button>
+        </form>
       </div>
-
-      <form @submit="addNote()">
-        <b-field :label="$t('New note')" label-for="newNoteInput">
-          <b-input type="textarea" v-model="noteContent" id="newNoteInput"></b-input>
-        </b-field>
-        <b-button type="submit" @click="addNote">{{ $t("Add a note") }}</b-button>
-      </form>
-    </div>
-  </section>
+    </section>
+  </div>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";

js/src/views/Moderation/ReportList.vue

@@ -1,35 +1,47 @@
 <template>
-  <section>
-    <b-field>
-      <b-radio-button v-model="filterReports" :native-value="ReportStatusEnum.OPEN">{{
-        $t("Open")
-      }}</b-radio-button>
-      <b-radio-button v-model="filterReports" :native-value="ReportStatusEnum.RESOLVED">{{
-        $t("Resolved")
-      }}</b-radio-button>
-      <b-radio-button v-model="filterReports" :native-value="ReportStatusEnum.CLOSED">{{
-        $t("Closed")
-      }}</b-radio-button>
-    </b-field>
-    <ul v-if="reports.length > 0">
-      <li v-for="report in reports" :key="report.id">
-        <router-link :to="{ name: RouteName.REPORT, params: { reportId: report.id } }">
-          <report-card :report="report" />
-        </router-link>
-      </li>
-    </ul>
-    <div v-else>
-      <b-message v-if="filterReports === ReportStatusEnum.OPEN" type="is-info">
-        {{ $t("No open reports yet") }}
-      </b-message>
-      <b-message v-if="filterReports === ReportStatusEnum.RESOLVED" type="is-info">
-        {{ $t("No resolved reports yet") }}
-      </b-message>
-      <b-message v-if="filterReports === ReportStatusEnum.CLOSED" type="is-info">
-        {{ $t("No closed reports yet") }}
-      </b-message>
-    </div>
-  </section>
+  <div>
+    <nav class="breadcrumb" aria-label="breadcrumbs">
+      <ul>
+        <li>
+          <router-link :to="{ name: RouteName.MODERATION }">{{ $t("Moderation") }}</router-link>
+        </li>
+        <li class="is-active">
+          <router-link :to="{ name: RouteName.REPORTS }">{{ $t("Reports") }}</router-link>
+        </li>
+      </ul>
+    </nav>
+    <section>
+      <b-field>
+        <b-radio-button v-model="filterReports" :native-value="ReportStatusEnum.OPEN">{{
+          $t("Open")
+        }}</b-radio-button>
+        <b-radio-button v-model="filterReports" :native-value="ReportStatusEnum.RESOLVED">{{
+          $t("Resolved")
+        }}</b-radio-button>
+        <b-radio-button v-model="filterReports" :native-value="ReportStatusEnum.CLOSED">{{
+          $t("Closed")
+        }}</b-radio-button>
+      </b-field>
+      <ul v-if="reports.length > 0">
+        <li v-for="report in reports" :key="report.id">
+          <router-link :to="{ name: RouteName.REPORT, params: { reportId: report.id } }">
+            <report-card :report="report" />
+          </router-link>
+        </li>
+      </ul>
+      <div v-else>
+        <b-message v-if="filterReports === ReportStatusEnum.OPEN" type="is-info">
+          {{ $t("No open reports yet") }}
+        </b-message>
+        <b-message v-if="filterReports === ReportStatusEnum.RESOLVED" type="is-info">
+          {{ $t("No resolved reports yet") }}
+        </b-message>
+        <b-message v-if="filterReports === ReportStatusEnum.CLOSED" type="is-info">
+          {{ $t("No closed reports yet") }}
+        </b-message>
+      </div>
+    </section>
+  </div>
 </template>
 <script lang="ts">
 import { Component, Prop, Vue, Watch } from "vue-property-decorator";