frontend: add reports list

frontend/src/lib/api/entities.ts

@@ -84,7 +84,9 @@ export interface Invite {
 export interface Report {
   id: string;
   user_id: string;
+  user_name: string;
   member_id: string | null;
+  member_name: string | null;
   reason: string;
   reporter_id: string;
 

frontend/src/routes/reports/+page.svelte

@@ -1,5 +1,40 @@
 <script lang="ts">
+  import { DateTime } from "luxon";
+  import { Button, Card, CardBody, CardFooter, CardHeader } from "sveltestrap";
   import type { PageData } from "./$types";
 
   export let data: PageData;
 </script>
+
+<svelte:head>
+  <title>Reports - pronouns.cc</title>
+</svelte:head>
+
+<div class="container">
+  <h1>Reports</h1>
+
+  <div>
+    {#each data.reports as report}
+      <Card>
+        <CardHeader>
+          <strong>#{report.id}</strong> on <a href="/@{report.user_name}">@{report.user_name}</a>
+          ({report.user_id}) {#if report.member_id}
+            (member: <a href="/@{report.user_name}/{report.member_name}">{report.member_name}</a>,
+            {report.member_id})
+          {/if}
+        </CardHeader>
+        <CardBody>
+          <blockquote class="blockquote">{report.reason}</blockquote>
+        </CardBody>
+        <CardFooter>
+          Created {DateTime.fromISO(report.created_at)
+            .toLocal()
+            .toLocaleString(DateTime.DATETIME_MED)} &bull;
+          <Button outline color="warning" size="sm">Warn user</Button>
+          <Button outline color="danger" size="sm">Deactivate user</Button>
+          <Button outline color="secondary" size="sm">Ignore report</Button>
+        </CardFooter>
+      </Card>
+    {/each}
+  </div>
+</div>

frontend/src/routes/reports/+page.ts

@@ -1,9 +1,17 @@
-import type { Report } from "$lib/api/entities";
+import { ErrorCode, type APIError, type Report } from "$lib/api/entities";
 import { apiFetchClient } from "$lib/api/fetch";
+import { error } from "@sveltejs/kit";
 
 export const load = async () => {
-  const reports = await apiFetchClient<Report[]>("/admin/reports");
-  return { page: 0, isClosed: false, userId: null, reporterId: null, reports } as PageLoadData;
+  try {
+    const reports = await apiFetchClient<Report[]>("/admin/reports");
+    return { page: 0, isClosed: false, userId: null, reporterId: null, reports } as PageLoadData;
+  } catch (e) {
+    if ((e as APIError).code === ErrorCode.Forbidden) {
+      throw error(400, "You're not an admin");
+    }
+    throw e;
+  }
 };
 
 interface PageLoadData {