From 21c1c5b0d9991e84feca970d848a1228ebfc51cf Mon Sep 17 00:00:00 2001
From: Sam <sam@sam.wf>
Date: Sat, 22 Apr 2023 15:04:38 +0200
Subject: [PATCH] feat(frontend): add "copy link" button to profiles

---
 frontend/src/routes/@[username]/+page.svelte  | 24 +++++++++++++++---
 .../routes/@[username]/ReportButton.svelte    |  8 +++---
 .../@[username]/[memberName]/+page.svelte     | 25 +++++++++++++++----
 3 files changed, 43 insertions(+), 14 deletions(-)

diff --git a/frontend/src/routes/@[username]/+page.svelte b/frontend/src/routes/@[username]/+page.svelte
index c376740..c2c8673 100644
--- a/frontend/src/routes/@[username]/+page.svelte
+++ b/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">
-        <ReportButton subject="user" reportUrl="/users/{data.id}/reports" />
+    <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" />
+          {/if}
+        </InputGroup>
       </div>
-    {/if}
+      <div class="col-md-6" />
+    </div>
     {#if data.members.length > 0 || ($userStore && $userStore.id === data.id)}
       <div class="row">
         <div class="col">
diff --git a/frontend/src/routes/@[username]/ReportButton.svelte b/frontend/src/routes/@[username]/ReportButton.svelte
index f33f5c0..4f55f9d 100644
--- a/frontend/src/routes/@[username]/ReportButton.svelte
+++ b/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>
+<Button color="danger" outline on:click={toggle}
+  ><Icon name="exclamation-triangle-fill" /> Report {subject}</Button
+>
 
 <Modal header="Report {subject}" {isOpen} {toggle}>
   <ModalBody>
diff --git a/frontend/src/routes/@[username]/[memberName]/+page.svelte b/frontend/src/routes/@[username]/[memberName]/+page.svelte
index a90ff5e..28330e6 100644
--- a/frontend/src/routes/@[username]/[memberName]/+page.svelte
+++ b/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">
-        <ReportButton subject="member" reportUrl="/members/{data.id}/reports" />
+    <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" />
+          {/if}
+        </InputGroup>
       </div>
-    {/if}
+      <div class="col-md-6" />
+    </div>
   </div>
 </div>