diff --git a/web/src/lib/components/repo/CloneDropdown.svelte b/web/src/lib/components/repo/CloneDropdown.svelte
index 811825885..6619ce910 100644
--- a/web/src/lib/components/repo/CloneDropdown.svelte
+++ b/web/src/lib/components/repo/CloneDropdown.svelte
@@ -5,6 +5,7 @@
 	import Download from "$icon/download";
 	import Checkbox from "$lib/components/ui/Checkbox.svelte";
 	import Dropdown from "$lib/components/ui/Dropdown.svelte";
+	import { createCopyFeedback } from "$lib/copy.svelte";
 	import type { RepoInfo } from "./types";
 
 	interface Props {
@@ -25,7 +26,7 @@
 	const origin = $derived(page.url.origin);
 
 	let permalink = $state(false);
-	let copied = $state<string | null>(null);
+	const copyFeedback = createCopyFeedback();
 
 	const urls = $derived([
 		{
@@ -48,15 +49,6 @@
 		return url.toString();
 	};
 
-	const copy = async (label: string, value: string) => {
-		try {
-			await navigator.clipboard.writeText(value);
-			copied = label;
-			setTimeout(() => (copied = copied === label ? null : copied), 2000);
-		} catch {
-			// clipboard was denied, the text is still selectable
-		}
-	};
 </script>
 
 <Dropdown
@@ -98,9 +90,9 @@
 					class="cursor-pointer px-3 py-2 text-foreground-subtle hover:text-foreground-default"
 					title="Copy to clipboard"
 					aria-label={`Copy ${entry.label} clone url`}
-					onclick={() => copy(entry.label, value)}
+					onclick={() => void copyFeedback.copy(entry.label, value)}
 				>
-					{#if copied === entry.label}
+					{#if copyFeedback.copied === entry.label}
 						<Check class="size-4" aria-hidden="true" />
 					{:else}
 						<Copy class="size-4" aria-hidden="true" />
diff --git a/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
index dc38e7b02..1e213b68f 100644
--- a/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
+++ b/web/src/routes/[handle]/[repo]/settings/rename/+page.svelte
@@ -11,6 +11,7 @@
 	import CopyCheck from "$icon/copy-check";
 	import Plus from "$icon/plus";
 	import X from "$icon/x";
+	import { createCopyFeedback } from "$lib/copy.svelte";
 
 	let { data } = $props();
 
@@ -20,12 +21,7 @@
 	// the point of the screen: these survive a rename, the handle-based ones don't
 	const stableUrls = $derived([`https://tangled.org/${did}`, `git@tangled.org:${did}`]);
 
-	let copied = $state<string | null>(null);
-	const copy = async (url: string) => {
-		await navigator.clipboard.writeText(url);
-		copied = url;
-		setTimeout(() => (copied === url ? (copied = null) : null), 1500);
-	};
+	const copyFeedback = createCopyFeedback();
 
 	let name = $state("");
 	const valid = $derived(name.trim().length > 0 && name.trim() !== data.repo.name);
@@ -51,11 +47,11 @@
 				</code>
 				<button
 					type="button"
-					onclick={() => copy(url)}
+					onclick={() => void copyFeedback.copy(url)}
 					aria-label="Copy {url}"
 					class="cursor-pointer text-foreground-muted hover:text-foreground-default"
 				>
-					{#if copied === url}
+					{#if copyFeedback.copied === url}
 						<CopyCheck class="size-3.5" aria-hidden="true" />
 					{:else}
 						<Copy class="size-3.5" aria-hidden="true" />