feat: add ability to log and display sanctions

client/src/app/sanctions/sanctions.css

@@ -0,0 +1,33 @@
+hr {
+  width: 100%;
+  border: none;
+  border-top: 1px solid var(--foreground);
+  margin: 0;
+}
+
+:host ::ng-deep ul{
+  list-style-type: disc;
+  list-style-position: inside;
+}
+
+.sanction {
+  margin: auto;
+  margin-bottom: 1em;
+  width: 90%;
+}
+.tag {
+  display: inline-block;
+  padding: 0 0.5em;
+  border-radius: 50px;
+  font-size: 0.8em;
+  background-color: #e0f7fa;
+  color: #006064;
+}
+
+.date {
+  font-style: italic;
+}
+
+.metadata {
+  font-size: 0.75rem;
+}

client/src/app/sanctions/sanctions.html

@@ -0,0 +1,23 @@
+<h1>Sanctions</h1>
+<p>Here are the most recent moderation actions taken to keep our community safe.</p>
+<p>
+  If you want to see the full history, check out our
+  <a href="https://chat.nhcarrigan.com" target="_blank">chat server</a>.
+</p>
+<div class="sanction" *ngFor="let sanction of sanctions">
+  <hr />
+  <h2>Case #{{ sanction.number }}: {{ sanction.type.toUpperCase() }}</h2>
+  <p>
+    <span class="tag">{{sanction.platform}}</span>
+    <span class="date"> {{ sanction.createdAt | date: "mediumDate" }}</span>
+  </p>
+  <p>{{ sanction.reason }}</p>
+  <ul class="metadata">
+    <li>Username: {{ sanction.username }}</li>
+    <li>UUID: {{ sanction.uuid }}</li>
+  </ul>
+</div>
+<div class="no-sanctions" *ngIf="!sanctions.length">
+  <p>There are no sanctions at this time.</p>
+</div>
+

client/src/app/sanctions/sanctions.ts

@@ -0,0 +1,40 @@
+/**
+ * @copyright nhcarrigan
+ * @license Naomi's Public License
+ * @author Naomi Carrigan
+ */
+import { CommonModule, DatePipe } from "@angular/common";
+import { Component } from "@angular/core";
+import { SanctionsService } from "../sanctions.js";
+
+@Component({
+  imports:     [ CommonModule, DatePipe ],
+  selector:    "app-sanctions",
+  styleUrl:    "./sanctions.css",
+  templateUrl: "./sanctions.html",
+})
+export class Sanctions {
+  public sanctions: Array<{
+    number:    number;
+    uuid:      string;
+    type:      string;
+    platform:  string;
+    reason:    string;
+    username:  string;
+    createdAt: string;
+  }> = [];
+  public constructor(
+    private readonly sanctionsService: SanctionsService,
+  ) {
+    void this.loadSanctions();
+  }
+
+  private async loadSanctions(): Promise<void> {
+    const sanctions = await this.sanctionsService.getSanctions();
+    this.sanctions = sanctions.sort((a, b) => {
+      return b.createdAt > a.createdAt
+        ? 1
+        : -1;
+    });
+  }
+}