From 4fd016de9ecdfdd5733f1c463d09f55e3e632451 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Tue, 22 Jul 2025 08:49:35 +0200
Subject: [PATCH] Fix copyable Id reactivity

The component would always copy the first value it was initialized with
regardless of what the actual ID was that it was showing.
---
 src/components/Changes.svelte         |  1 +
 src/components/CobCommitTeaser.svelte |  5 ++++-
 src/components/Comment.svelte         |  2 +-
 src/components/Id.svelte              | 31 +++++++--------------------
 src/components/IssueTeaser.svelte     |  2 +-
 src/components/IssueTimeline.svelte   |  4 +++-
 src/components/PatchTeaser.svelte     |  2 +-
 src/components/PatchTimeline.svelte   | 30 ++++++++++++++++++++------
 src/components/RepoMetadata.svelte    |  5 ++++-
 src/components/Review.svelte          |  5 ++++-
 src/views/repo/RepoHome.svelte        |  8 +++----
 11 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/src/components/Changes.svelte b/src/components/Changes.svelte
index f48ad653b..233edde3e 100644
--- a/src/components/Changes.svelte
+++ b/src/components/Changes.svelte
@@ -170,6 +170,7 @@
             {pluralize("commit", commits.length)} on base
             <Id
               id={revision.base}
+              clipboard={revision.base}
               variant={selectedCommit ? "none" : "commit"} />
             <div class="global-counter">Base</div>
           </div>
diff --git a/src/components/CobCommitTeaser.svelte b/src/components/CobCommitTeaser.svelte
index cd46b9d9a..16896c30d 100644
--- a/src/components/CobCommitTeaser.svelte
+++ b/src/components/CobCommitTeaser.svelte
@@ -100,7 +100,10 @@
   </div>
   <div class="right">
     <CompactCommitAuthorship {commit}>
-      <Id id={commit.id} variant={disabled ? "none" : "commit"} />
+      <Id
+        id={commit.id}
+        clipboard={commit.id}
+        variant={disabled ? "none" : "commit"} />
     </CompactCommitAuthorship>
   </div>
 </div>
diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
index 27c4f9196..7b936c669 100644
--- a/src/components/Comment.svelte
+++ b/src/components/Comment.svelte
@@ -135,7 +135,7 @@
       <NodeId {...utils.authorForNodeId(author)} />
       {caption}
       {#if id}
-        <Id {id} variant="oid" />
+        <Id {id} clipboard={id} variant="oid" />
       {/if}
       {#if beforeTimestamp}
         {@render beforeTimestamp()}
diff --git a/src/components/Id.svelte b/src/components/Id.svelte
index 92b60c99b..1667f2d2b 100644
--- a/src/components/Id.svelte
+++ b/src/components/Id.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import type { ComponentProps, Snippet } from "svelte";
+  import type { ComponentProps } from "svelte";
 
   import debounce from "lodash/debounce";
 
@@ -25,33 +25,20 @@
   }
 
   let visible: boolean = $state(false);
+
   interface Props {
-    children?: Snippet;
+    ariaLabel?: string;
+    clipboard: string;
     id: string;
-    clipboard?: string;
     shorten?: boolean;
     variant: "oid" | "commit" | "none";
-    ariaLabel?: string;
-    debounceTimeout?: number;
-    styleBottom?: string;
-    styleLeft?: string;
   }
 
-  const {
-    children,
-    id,
-    clipboard = id,
-    shorten = true,
-    variant,
-    ariaLabel,
-    debounceTimeout = 50,
-    styleBottom = "1.5rem",
-    styleLeft = "1rem",
-  }: Props = $props();
+  const { ariaLabel, clipboard, id, shorten = true, variant }: Props = $props();
 
   const setVisible = debounce((value: boolean) => {
     visible = value;
-  }, debounceTimeout);
+  }, 50);
 </script>
 
 <style>
@@ -104,9 +91,7 @@
     }}
     role="button"
     tabindex="0">
-    {#if children}
-      {@render children()}
-    {:else if shorten}
+    {#if shorten}
       {formatOid(id)}
     {:else}
       {id}
@@ -115,7 +100,7 @@
 
   {#if visible}
     <div style:position="absolute">
-      <div class="popover" style:bottom={styleBottom} style:left={styleLeft}>
+      <div class="popover" style:bottom="1.5rem" style:left="1rem">
         <Icon name={icon} />
         {tooltip}
       </div>
diff --git a/src/components/IssueTeaser.svelte b/src/components/IssueTeaser.svelte
index 170dc2beb..584e38c5a 100644
--- a/src/components/IssueTeaser.svelte
+++ b/src/components/IssueTeaser.svelte
@@ -102,7 +102,7 @@
         <div class="global-flex txt-small" style:flex-wrap="wrap">
           <NodeId {...authorForNodeId(issue.author)} />
           opened
-          <Id id={issue.id} variant="oid" />
+          <Id id={issue.id} clipboard={issue.id} variant="oid" />
           {formatTimestamp(issue.timestamp)}
         </div>
       </div>
diff --git a/src/components/IssueTimeline.svelte b/src/components/IssueTimeline.svelte
index 7d97c0faf..578d598ba 100644
--- a/src/components/IssueTimeline.svelte
+++ b/src/components/IssueTimeline.svelte
@@ -213,7 +213,9 @@
           </div>
           <div class="wrapper">
             <NodeId {...authorForNodeId(op.author)} />
-            <div>opened issue <Id id={op.id} variant="oid" /></div>
+            <div>
+              opened issue <Id id={op.id} clipboard={op.id} variant="oid" />
+            </div>
             <div title={absoluteTimestamp(op.timestamp)}>
               {formatTimestamp(op.timestamp)}
             </div>
diff --git a/src/components/PatchTeaser.svelte b/src/components/PatchTeaser.svelte
index 0d3f65efa..b790b8a92 100644
--- a/src/components/PatchTeaser.svelte
+++ b/src/components/PatchTeaser.svelte
@@ -116,7 +116,7 @@
         <div class="global-flex txt-small" style:flex-wrap="wrap">
           <NodeId {...authorForNodeId(patch.author)} />
           opened
-          <Id id={patch.id} variant="oid" />
+          <Id id={patch.id} clipboard={patch.id} variant="oid" />
           {formatTimestamp(patch.timestamp)}
         </div>
       </div>
diff --git a/src/components/PatchTimeline.svelte b/src/components/PatchTimeline.svelte
index 339277c6e..9482c961b 100644
--- a/src/components/PatchTimeline.svelte
+++ b/src/components/PatchTimeline.svelte
@@ -105,7 +105,9 @@
           </div>
           <div class="wrapper">
             <NodeId {...authorForNodeId(op.author)} />
-            <div>opened patch <Id id={op.id} variant="oid" /></div>
+            <div>
+              opened patch <Id id={op.id} clipboard={op.id} variant="oid" />
+            </div>
             <div title={absoluteTimestamp(op.timestamp)}>
               {formatTimestamp(op.timestamp)}
             </div>
@@ -118,7 +120,9 @@
           </div>
           <div class="wrapper">
             <NodeId {...authorForNodeId(op.author)} />
-            <div>created revision <Id id={op.id} variant="oid" /></div>
+            <div>
+              created revision <Id id={op.id} clipboard={op.id} variant="oid" />
+            </div>
             <div title={absoluteTimestamp(op.timestamp)}>
               {formatTimestamp(op.timestamp)}
             </div>
@@ -224,7 +228,10 @@
         <div class="wrapper">
           <NodeId {...authorForNodeId(op.author)} />
           <div>
-            merged patch at revision <Id id={op.revision} variant="oid" />
+            merged patch at revision <Id
+              id={op.revision}
+              clipboard={op.revision}
+              variant="oid" />
           </div>
           <div title={absoluteTimestamp(op.timestamp)}>
             {formatTimestamp(op.timestamp)}
@@ -256,7 +263,10 @@
           </div>
           <div class="wrapper">
             <NodeId {...authorForNodeId(op.author)} />
-            accepted revision <Id id={op.revision} variant="oid" />
+            accepted revision <Id
+              id={op.revision}
+              clipboard={op.revision}
+              variant="oid" />
             <div title={absoluteTimestamp(op.timestamp)}>
               {formatTimestamp(op.timestamp)}
             </div>
@@ -267,7 +277,10 @@
           </div>
           <div class="wrapper">
             <NodeId {...authorForNodeId(op.author)} />
-            rejected revision <Id id={op.revision} variant="oid" />
+            rejected revision <Id
+              id={op.revision}
+              clipboard={op.revision}
+              variant="oid" />
             <div title={absoluteTimestamp(op.timestamp)}>
               {formatTimestamp(op.timestamp)}
             </div>
@@ -278,7 +291,10 @@
           </div>
           <div class="wrapper">
             <NodeId {...authorForNodeId(op.author)} />
-            reviewed revision <Id id={op.revision} variant="oid" />
+            reviewed revision <Id
+              id={op.revision}
+              clipboard={op.revision}
+              variant="oid" />
             <div title={absoluteTimestamp(op.timestamp)}>
               {formatTimestamp(op.timestamp)}
             </div>
@@ -294,6 +310,7 @@
           <NodeId {...authorForNodeId(op.author)} />
           {op.replyTo ? "replied to a comment" : "commented"} on review <Id
             id={op.review}
+            clipboard={op.review}
             variant="oid" />
           <div title={absoluteTimestamp(op.timestamp)}>
             {formatTimestamp(op.timestamp)}
@@ -309,6 +326,7 @@
           <NodeId {...authorForNodeId(op.author)} />
           {op.replyTo ? "replied to a comment" : "commented"} on revision <Id
             id={op.revision}
+            clipboard={op.revision}
             variant="oid" />
           <div title={absoluteTimestamp(op.timestamp)}>
             {formatTimestamp(op.timestamp)}
diff --git a/src/components/RepoMetadata.svelte b/src/components/RepoMetadata.svelte
index d19c44713..5eaee997b 100644
--- a/src/components/RepoMetadata.svelte
+++ b/src/components/RepoMetadata.svelte
@@ -114,7 +114,10 @@
       <span>
         <span class="txt-selectable">{project.data.defaultBranch}</span>
         ->
-        <Id id={project.meta.head} variant="commit" />
+        <Id
+          id={project.meta.head}
+          clipboard={project.meta.head}
+          variant="commit" />
       </span>
     </div>
 
diff --git a/src/components/Review.svelte b/src/components/Review.svelte
index 20f77eeef..c58fbc21e 100644
--- a/src/components/Review.svelte
+++ b/src/components/Review.svelte
@@ -476,7 +476,10 @@
           }, review.id)}
         body={review.summary}>
         {#snippet beforeTimestamp()}
-          on revision <Id id={revision.id} variant="oid" />
+          on revision <Id
+            id={revision.id}
+            clipboard={revision.id}
+            variant="oid" />
         {/snippet}
       </CommentComponent>
     </div>
diff --git a/src/views/repo/RepoHome.svelte b/src/views/repo/RepoHome.svelte
index c3c982344..472336f2b 100644
--- a/src/views/repo/RepoHome.svelte
+++ b/src/views/repo/RepoHome.svelte
@@ -19,7 +19,6 @@
 
   import { invoke, InvokeError } from "@app/lib/invoke";
   import { highlight } from "@app/lib/syntax";
-  import { formatOid } from "@app/lib/utils";
 
   import Border from "@app/components/Border.svelte";
   import CheckoutRepoButton from "@app/components/CheckoutRepoButton.svelte";
@@ -204,9 +203,10 @@
                   stylePadding="0 0.5rem"
                   styleAlignItems="center"
                   styleAlignSelf="flex-end">
-                  <Id variant="commit" id={blob.commit.id}>
-                    {formatOid(blob.commit.id)}
-                  </Id>
+                  <Id
+                    variant="commit"
+                    id={blob.commit.id}
+                    clipboard={blob.commit.id} />
                   <span class="commit-msg txt-overflow" style:max-width="20rem">
                     {blob.commit.message}
                   </span>