feat: add report button to profiles

backend/db/report.go

@@ -14,7 +14,7 @@ type Report struct {
 	ID         int64   `json:"id"`
 	UserID     xid.ID  `json:"user_id"`
 	UserName   string  `json:"user_name"`
-	MemberID   *xid.ID `json:"member_id"`
+	MemberID   xid.ID  `json:"member_id"`
 	MemberName *string `json:"member_name"`
 	Reason     string  `json:"reason"`
 	ReporterID xid.ID  `json:"reporter_id"`

frontend/src/routes/@[username]/+page.svelte

@@ -31,6 +31,7 @@
   import ErrorAlert from "$lib/components/ErrorAlert.svelte";
   import { goto } from "$app/navigation";
   import renderMarkdown from "$lib/api/markdown";
+  import ReportButton from "./ReportButton.svelte";
 
   export let data: PageData;
 
@@ -149,6 +150,11 @@
         </div>
       {/each}
     </div>
+    {#if $userStore && $userStore.id !== data.id}
+      <div class="row">
+        <ReportButton subject="user" reportUrl="/users/{data.id}/reports" />
+      </div>
+    {/if}
     {#if data.members.length > 0 || ($userStore && $userStore.id === data.id)}
       <div class="row">
         <div class="col">

frontend/src/routes/@[username]/ReportButton.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+  import type { APIError } from "$lib/api/entities";
+  import { apiFetchClient } from "$lib/api/fetch";
+  import ErrorAlert from "$lib/components/ErrorAlert.svelte";
+  import { addToast } from "$lib/toast";
+  import { Button, FormGroup, Icon, Modal, ModalBody, ModalFooter } from "sveltestrap";
+
+  export let subject: string;
+  export let reportUrl: string;
+
+  const MAX_REASON_LENGTH = 2000;
+  let reason = "";
+
+  let error: APIError | null = null;
+
+  let isOpen = false;
+  const toggle = () => (isOpen = !isOpen);
+
+  const doReport = async () => {
+    try {
+      await apiFetchClient<any>(reportUrl, "POST", { reason: reason });
+      error = null;
+      addToast({ header: "Sent report", body: "Successfully sent report!" });
+      toggle();
+    } catch (e) {
+      error = e as APIError;
+    }
+  };
+</script>
+
+<div>
+  <Button color="danger" outline on:click={toggle}
+    ><Icon name="exclamation-triangle-fill" /> Report {subject}</Button
+  >
+</div>
+
+<Modal header="Report {subject}" {isOpen} {toggle}>
+  <ModalBody>
+    {#if error}
+      <ErrorAlert {error} />
+    {/if}
+    <FormGroup floating label="Reason" class="mt-2">
+      <textarea style="min-height: 100px;" class="form-control" bind:value={reason} />
+    </FormGroup>
+    <p class="text-muted mt-3">
+      <Icon name="info-circle-fill" aria-hidden /> Please only report {subject}s for violating the
+      <a class="text-reset" href="/page/terms" target="_blank" rel="noopener noreferrer"
+        >terms of service</a
+      >.
+    </p>
+  </ModalBody>
+  <ModalFooter>
+    <Button
+      color="danger"
+      disabled={!reason || reason.length > MAX_REASON_LENGTH}
+      on:click={doReport}>Report</Button
+    >
+    <Button color="secondary" on:click={toggle}>Cancel</Button>
+  </ModalFooter>
+</Modal>

frontend/src/routes/@[username]/[memberName]/+page.svelte

@@ -10,6 +10,7 @@
   import { PUBLIC_BASE_URL } from "$env/static/public";
   import { userStore } from "$lib/store";
   import renderMarkdown from "$lib/api/markdown";
+  import ReportButton from "../ReportButton.svelte";
 
   export let data: PageData;
 
@@ -86,6 +87,11 @@
         </div>
       {/each}
     </div>
+    {#if $userStore && $userStore.id !== data.user.id}
+      <div class="row">
+        <ReportButton subject="member" reportUrl="/members/{data.id}/reports" />
+      </div>
+    {/if}
   </div>
 </div>