From d9ca679fe303d8c499ce7790138153a62af110e0 Mon Sep 17 00:00:00 2001
From: h <h@kotikot.com>
Date: Sat, 24 Jan 2026 17:15:17 +0100
Subject: [PATCH] feat(frontend): add unpair button to phone

---
 frontend/src/lib/components/SilentCapture.svelte | 11 ++++++++++-
 frontend/src/routes/[mnemonic]/+page.svelte      |  6 +++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/SilentCapture.svelte b/frontend/src/lib/components/SilentCapture.svelte
index 5d8e3e9..2f105ac 100644
--- a/frontend/src/lib/components/SilentCapture.svelte
+++ b/frontend/src/lib/components/SilentCapture.svelte
@@ -3,9 +3,10 @@
 
 	interface Props {
 		oncapture: (base64: string, mediaType: string, thumbnailBase64: string) => void;
+		onunpair?: () => void;
 	}
 
-	let { oncapture }: Props = $props();
+	let { oncapture, onunpair }: Props = $props();
 
 	let videoElement: HTMLVideoElement | null = $state(null);
 	let stream: MediaStream | null = $state(null);
@@ -123,4 +124,12 @@
 <div class="fixed inset-0 z-40 bg-black">
 	<video bind:this={videoElement} autoplay playsinline muted class="h-full w-full object-cover"
 	></video>
+	{#if onunpair}
+		<button
+			onclick={onunpair}
+			class="absolute top-4 left-4 z-10 rounded-full bg-red-600/80 px-3 py-1.5 text-xs text-white"
+		>
+			unpair
+		</button>
+	{/if}
 </div>
diff --git a/frontend/src/routes/[mnemonic]/+page.svelte b/frontend/src/routes/[mnemonic]/+page.svelte
index fa857e3..e839149 100644
--- a/frontend/src/routes/[mnemonic]/+page.svelte
+++ b/frontend/src/routes/[mnemonic]/+page.svelte
@@ -669,6 +669,10 @@
 	{/if}
 
 	{#if hasCamera && isPaired}
-		<SilentCapture bind:this={silentCaptureRef} oncapture={handleSilentCapture} />
+		<SilentCapture
+			bind:this={silentCaptureRef}
+			oncapture={handleSilentCapture}
+			onunpair={handleUnpair}
+		/>
 	{/if}
 </div>