Merge branch 'upstream-dev' into dev

src/lib/components/common/SVGPanZoom.svelte

@@ -1,11 +1,19 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+	const i18n = getContext('i18n');
+
 	import panzoom from 'panzoom';
 
 	import DOMPurify from 'dompurify';
+	import DocumentDuplicate from '../icons/DocumentDuplicate.svelte';
+	import { copyToClipboard } from '$lib/utils';
+	import { toast } from 'svelte-sonner';
+	import Tooltip from './Tooltip.svelte';
+	import Clipboard from '../icons/Clipboard.svelte';
 
 	export let className = '';
 	export let svg = '';
+	export let content = '';
 
 	let instance;
 
@@ -22,8 +30,24 @@
 	}
 </script>
 
-<div bind:this={sceneParentElement} class={className}>
+<div bind:this={sceneParentElement} class="relative {className}">
 	<div bind:this={sceneElement} class="flex h-full max-h-full justify-center items-center">
 		{@html svg}
 	</div>
+
+	{#if content}
+		<div class=" absolute top-1 right-1">
+			<Tooltip content={$i18n.t('Copy to clipboard')}>
+				<button
+					class="p-1.5 rounded-lg border border-gray-100 dark:border-none dark:bg-gray-850 hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+					on:click={() => {
+						copyToClipboard(content);
+						toast.success($i18n.t('Copied to clipboard'));
+					}}
+				>
+					<Clipboard className=" size-4" strokeWidth="1.5" />
+				</button>
+			</Tooltip>
+		</div>
+	{/if}
 </div>