feat(dashboard): add copy link button

dashboard/src/lib/system/Main.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Card, CardBody, CardHeader } from 'sveltestrap';
+    import { Card, CardBody, CardHeader, Tooltip } from 'sveltestrap';
     import FaAddressCard from 'svelte-icons/fa/FaAddressCard.svelte'
     import CardsHeader from '../CardsHeader.svelte';
     import Body from './Body.svelte';
@@ -12,13 +12,32 @@
     export let isPublic = true;
 
     let editMode = false;
+    let copied = false;
+
+    async function copyShortLink(event?) {
+        if (event) {
+            let ctrlDown = event.ctrlKey||event.metaKey; // mac support
+            if (!(ctrlDown && event.key === "c") && event.key !== "Enter") return;
+        }
+        try {
+            await navigator.clipboard.writeText(`https://pk.mt/s/${user.id}`);
+            copied = true;
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            copied = false;
+        } catch (error) {
+            console.log(error);
+        }
+    }
 </script>
 
 <Card class="mb-4">
     <CardHeader>
         <CardsHeader bind:item={user}>
-            <FaAddressCard slot="icon" />
+            <div slot="icon" style="cursor: pointer;" id={`copy-${user.id}`} on:click|stopPropagation={() => copyShortLink()} on:keydown|stopPropagation={(e) => copyShortLink(e)} tabindex={0} >
+                <FaAddressCard />
+            </div>
         </CardsHeader>
+        <Tooltip placement="top" target={`copy-${user.id}`}>{copied ? "Copied!" : "Copy public link"}</Tooltip>
     </CardHeader>
     <CardBody style="border-left: 4px solid #{user.color}">
         {#if !editMode}