Add Clipboard component

src/components/Clipboard.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import debounce from "lodash/debounce";
+
+  import Icon from "@app/components/Icon.svelte";
+  import { writeToClipboard } from "@app/lib/invoke";
+
+  interface Props {
+    text: string;
+  }
+
+  const { text }: Props = $props();
+
+  let icon: "copy" | "checkmark" = $state("copy");
+
+  const restoreIcon = debounce(() => {
+    icon = "copy";
+  }, 800);
+
+  export async function copy() {
+    await writeToClipboard(text);
+    icon = "checkmark";
+    restoreIcon();
+  }
+</script>
+
+<style>
+  .clipboard {
+    width: 1.5rem;
+    height: 1.5rem;
+    cursor: pointer;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+  }
+</style>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<span role="button" tabindex="0" class="clipboard" onclick={copy}>
+  <Icon name={icon} />
+</span>

src/components/CopyableId.svelte

@@ -1,28 +1,9 @@
 <script lang="ts">
-  import type { ComponentProps } from "svelte";
+  import Clipboard from "./Clipboard.svelte";
 
-  import debounce from "lodash/debounce";
-  import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+  const { id }: { id: string } = $props();
 
-  import Icon from "./Icon.svelte";
-
-  const {
-    id,
-  }: {
-    id: string;
-  } = $props();
-
-  let icon: ComponentProps<typeof Icon>["name"] = $state("copy");
-
-  const restoreIcon = debounce(() => {
-    icon = "copy";
-  }, 1000);
-
-  async function copy() {
-    await writeText(id);
-    icon = "checkmark";
-    restoreIcon();
-  }
+  let clipboard: Clipboard;
 </script>
 
 <style>
@@ -40,8 +21,8 @@
 <div
   role="button"
   tabindex="0"
-  onclick={copy}
+  onclick={() => clipboard.copy()}
   class="copyable-id global-flex txt-small txt-monospace">
   {id}
-  <Icon name={icon} />
+  <Clipboard bind:this={clipboard} text={id} />
 </div>