radicle/radicle-desktop
1
0
Fork 0
mirror of https://seed.radicle.dev/rad:z4D5UCArafTzTQpDZNQRuqswh3ury.git synced 2026-10-18 19:10:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fix copyable Id reactivity

Browse Source 
The component would always copy the first value it was initialized with
regardless of what the actual ID was that it was showing.
This commit is contained in:
Rūdolfs Ošiņš
2025-07-22 10:09:53 +02:00
parent 0936d7f9ff
commit 4fd016de9e
11 changed files with 55 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Changes.svelte
+1
View File
@@ -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>
src/components/CobCommitTeaser.svelte
+4 -1
View File
@@ -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>
src/components/Comment.svelte
+1 -1
View File
@@ -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()}
src/components/Id.svelte
+8 -23
View File
@@ -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>
src/components/IssueTeaser.svelte
+1 -1
View File
@@ -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>
src/components/IssueTimeline.svelte
+3 -1
View File
@@ -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>
src/components/PatchTeaser.svelte
+1 -1
View File
@@ -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>
src/components/PatchTimeline.svelte
+24 -6
View File
@@ -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)}
src/components/RepoMetadata.svelte
+4 -1
View File
@@ -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>
src/components/Review.svelte
+4 -1
View File
@@ -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>
src/views/repo/RepoHome.svelte
+4 -4
View File
@@ -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>