feat(frontend): add "copy link" button to profiles

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

@@ -7,6 +7,7 @@
     ButtonGroup,
     Icon,
     Input,
+    InputGroup,
     Modal,
     ModalBody,
     ModalFooter,
@@ -37,6 +38,7 @@
   import { memberNameRegex } from "$lib/api/regex";
   import StatusLine from "$lib/components/StatusLine.svelte";
   import defaultPreferences from "$lib/api/default_preferences";
+  import { addToast } from "$lib/toast";
 
   export let data: PageData;
 
@@ -105,6 +107,12 @@
     data.pronouns.length === 0 &&
     data.fields.length === 0 &&
     (!data.bio || data.bio.length === 0);
+
+  const copyURL = async () => {
+    const url = `${PUBLIC_BASE_URL}/@${data.name}`;
+    await navigator.clipboard.writeText(url);
+    addToast({ body: "Copied the link to your clipboard!", duration: 2000 });
+  };
 </script>
 
 <div class="container">
@@ -187,11 +195,19 @@
         </div>
       {/each}
     </div>
-    {#if $userStore && $userStore.id !== data.id}
     <div class="row">
+      <div class="col-md-6">
+        <InputGroup>
+          <Button color="secondary" outline on:click={copyURL}>
+            <Icon name="clipboard" /> Copy link
+          </Button>
+          {#if $userStore && $userStore.id !== data.id}
             <ReportButton subject="user" reportUrl="/users/{data.id}/reports" />
-      </div>
           {/if}
+        </InputGroup>
+      </div>
+      <div class="col-md-6" />
+    </div>
     {#if data.members.length > 0 || ($userStore && $userStore.id === data.id)}
       <div class="row">
         <div class="col">

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

@@ -28,11 +28,9 @@
   };
 </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>

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

@@ -4,7 +4,7 @@
   import type { PageData } from "./$types";
   import PronounLink from "$lib/components/PronounLink.svelte";
   import FallbackImage from "$lib/components/FallbackImage.svelte";
-  import { Alert, Button, Icon } from "sveltestrap";
+  import { Alert, Button, Icon, InputGroup } from "sveltestrap";
   import {
     memberAvatars,
     pronounDisplay,
@@ -19,6 +19,7 @@
   import ProfileLink from "../ProfileLink.svelte";
   import StatusLine from "$lib/components/StatusLine.svelte";
   import defaultPreferences from "$lib/api/default_preferences";
+  import { addToast } from "$lib/toast";
 
   export let data: PageData;
 
@@ -43,6 +44,12 @@
     data.pronouns.length === 0 &&
     data.fields.length === 0 &&
     (!data.bio || data.bio.length === 0);
+
+  const copyURL = async () => {
+    const url = `${PUBLIC_BASE_URL}/@${data.user.name}/${data.name}`;
+    await navigator.clipboard.writeText(url);
+    addToast({ body: "Copied the link to your clipboard!", duration: 2000 });
+  };
 </script>
 
 <div class="container">
@@ -125,11 +132,19 @@
         </div>
       {/each}
     </div>
-    {#if $userStore && $userStore.id !== data.user.id}
     <div class="row">
+      <div class="col-md-6">
+        <InputGroup>
+          <Button color="secondary" outline on:click={copyURL}>
+            <Icon name="clipboard" /> Copy link
+          </Button>
+          {#if $userStore && $userStore.id !== data.id}
             <ReportButton subject="member" reportUrl="/members/{data.id}/reports" />
-      </div>
           {/if}
+        </InputGroup>
+      </div>
+      <div class="col-md-6" />
+    </div>
   </div>
 </div>