From dc930cafdd069cd10734327edd3984b08b395d6d Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <me@sebastinez.dev>
Date: Mon, 7 Apr 2025 14:11:54 +0200
Subject: [PATCH] Add `Clipboard` component

---
 src/components/Clipboard.svelte  | 41 ++++++++++++++++++++++++++++++++
 src/components/CopyableId.svelte | 29 ++++------------------
 2 files changed, 46 insertions(+), 24 deletions(-)
 create mode 100644 src/components/Clipboard.svelte

diff --git a/src/components/Clipboard.svelte b/src/components/Clipboard.svelte
new file mode 100644
index 000000000..cf80f72e4
--- /dev/null
+++ b/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>
diff --git a/src/components/CopyableId.svelte b/src/components/CopyableId.svelte
index 7510db767..53862c724 100644
--- a/src/components/CopyableId.svelte
+++ b/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>