From 0552a54edbe38092a5d93feb46f356b943063877 Mon Sep 17 00:00:00 2001
From: Tobias Frischmann <tobias.frischmann@proton.me>
Date: Tue, 8 Sep 2026 15:34:44 +0200
Subject: [PATCH] copy button

---
 app/components/Settings/ApiKeys.vue           | 15 +++--------
 .../Settings/Organizations/Organizations.vue  | 12 ++-------
 app/components/Utils/CopyButton.vue           | 27 +++++++++++++++++++
 3 files changed, 32 insertions(+), 22 deletions(-)
 create mode 100644 app/components/Utils/CopyButton.vue

diff --git a/app/components/Settings/ApiKeys.vue b/app/components/Settings/ApiKeys.vue
index c07ff96..d2d347a 100644
--- a/app/components/Settings/ApiKeys.vue
+++ b/app/components/Settings/ApiKeys.vue
@@ -7,6 +7,7 @@
 		PopoverTrigger,
 	} from "reka-ui";
 	import { authClient } from "~/utils/authClient";
+	import CopyButton from "../Utils/CopyButton.vue";
 
 	const { t } = useI18n();
 
@@ -109,18 +110,8 @@
 			<div v-for="key in keys" :key="key.id" class="flex gap-2">
 				{{ key.name ?? "Unnamed" }}
 				<span class="text-muted-text"> - {{ key.id }}</span>
-				<div>
-					<button
-						type="button"
-						v-if="hasTempKey(key.id)"
-						@click="onCopyKey(key.id)"
-						class="h-6 cursor-pointer"
-					>
-						<Icon
-							name="material-symbols:content-copy-outline-rounded"
-							size="20"
-						/>
-					</button>
+				<div class="flex">
+					<CopyButton v-if="hasTempKey(key.id)" :content="key.id" />
 					<button
 						type="button"
 						@click="onDeleteKey(key.id)"
diff --git a/app/components/Settings/Organizations/Organizations.vue b/app/components/Settings/Organizations/Organizations.vue
index 62a53e5..c6a4fcd 100644
--- a/app/components/Settings/Organizations/Organizations.vue
+++ b/app/components/Settings/Organizations/Organizations.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+	import CopyButton from "~/components/Utils/CopyButton.vue";
 	import {
 		useCreateOrganization,
 		useJoinOrganization,
@@ -49,16 +50,7 @@
 			>
 				{{ org.name }}
 
-				<button
-					@click="() => onCopyKey(org.uuid)"
-					class="cursor-pointer flex items-center"
-					type="button"
-				>
-					<Icon
-						name="material-symbols:content-copy-outline-rounded"
-						size="20"
-					/>
-				</button>
+				<CopyButton :content="org.uuid" />
 				<button
 					@click="() => onLeaveOrg(org.uuid)"
 					class="cursor-pointer flex items-center"
diff --git a/app/components/Utils/CopyButton.vue b/app/components/Utils/CopyButton.vue
new file mode 100644
index 0000000..ffa71d7
--- /dev/null
+++ b/app/components/Utils/CopyButton.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+	const props = defineProps<{ content: string }>();
+
+	const active = ref(false);
+	async function onCopyKey() {
+		await navigator.clipboard.writeText(props.content);
+		active.value = true;
+		setTimeout(() => {
+			active.value = false;
+		}, 1000);
+	}
+</script>
+
+<template>
+	<button
+		@click="onCopyKey"
+		class="cursor-pointer flex items-center"
+		type="button"
+	>
+		<Icon v-if="active" name="material-symbols:check-rounded" size="20" />
+		<Icon
+			v-else
+			name="material-symbols:content-copy-outline-rounded"
+			size="20"
+		/>
+	</button>
+</template>
-- 
2.51.2