feat: user ID can be copied by clicking

src/lib/elements/pill.svelte

@@ -4,6 +4,7 @@
     export let warning = false;
     export let danger = false;
     export let info = false;
+    export let button = false;
 </script>
 
 <div
@@ -12,6 +13,14 @@
     class:is-success={success}
     class:is-warning={warning}
     class:is-danger={danger}
-    class:is-info={info}>
+    class:is-info={info}
+    class:pill-is-button={button}
+    on:click>
     <slot />
 </div>
+
+<style>
+    .pill-is-button {
+        cursor: pointer;
+    }
+</style>

src/routes/console/[project]/users/index.svelte

@@ -3,6 +3,7 @@
     import { sdkForProject } from '$lib/stores/sdk';
     import { Empty, Pagination } from '$lib/components';
     import { Button } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
     import {
         Table,
         TableHeader,
@@ -50,6 +51,21 @@
             offset = queryOffset;
         }
     });
+
+    const copy = async (value) => {
+        try {
+            await navigator.clipboard.writeText(value);
+            addNotification({
+                message: 'Copied to clipboard.',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+        }
+    };
 </script>
 
 <Container>
@@ -106,7 +122,8 @@
                             {/if}
                         </TableCellText>
                         <TableCellText title="ID">
-                            <Pill>User ID <i class="icon-duplicate" /></Pill>
+                            <Pill button on:click={() => copy(user.$id)}
+                                >User ID <i class="icon-duplicate" /></Pill>
                         </TableCellText>
                         <TableCellText title="Joined">
                             {toLocaleDateTime(user.registration)}