From e71033615a5d433cec35e3be6bcdad25c754e820 Mon Sep 17 00:00:00 2001
From: jellydeck <91427591+jellydeck@users.noreply.github.com>
Date: Fri, 27 Mar 2026 12:22:35 +0530
Subject: [PATCH] chore: use Tabs in floatingbar

---
 src/lib/editor/FloatingBar.svelte | 190 +++++++++++++++++-------------
 1 file changed, 110 insertions(+), 80 deletions(-)

diff --git a/src/lib/editor/FloatingBar.svelte b/src/lib/editor/FloatingBar.svelte
index bd9e4eb..4f96157 100644
--- a/src/lib/editor/FloatingBar.svelte
+++ b/src/lib/editor/FloatingBar.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { mockupStore } from '$lib/contexts/store.svelte';
-	import { Separator } from 'bits-ui';
-
+	import { Separator, Tabs } from 'bits-ui';
 	import PerspectiveIcon from 'phosphor-svelte/lib/PerspectiveIcon';
 	import ArrowsOutCardinalIcon from 'phosphor-svelte/lib/ArrowsOutCardinalIcon';
 	import SelectionIcon from 'phosphor-svelte/lib/SelectionIcon';
@@ -12,10 +11,8 @@
 	import ImageBorderPanel from './ImageBorderPanel.svelte';
 	import { browser } from '$app/environment';
 
-	let activePanel = $state<string | null>(null);
-
+	let activePanel = $state('');
 	let isMobile = $state(browser ? window.innerWidth < 768 : false);
-
 	let hasImage = $derived(!!mockupStore.uploadedImage);
 
 	function handleReset() {
@@ -24,51 +21,85 @@
 		mockupStore.setUploadedImage(null);
 		mockupStore.updateDevicePosition({ x: 0, y: 0, scale: 1, rotation: 0 });
 		mockupStore.set3DRotation({ rotateX: 0, rotateY: 0, rotateZ: 0, skew: 0 });
-		mockupStore.setImageBorder({
-			width: 8,
-			color: '#FF6B6B',
-			radius: 22,
-			enabled: false
-		});
-
-		activePanel = null;
-	}
-
-	function togglePanel(panel: string) {
-		activePanel = activePanel === panel ? null : panel;
+		mockupStore.setImageBorder({ width: 8, color: '#FF6B6B', radius: 22, enabled: false });
+		activePanel = '';
 	}
 
 	function handleResize() {
 		isMobile = window.innerWidth < 768;
 	}
+
+	function makeToggle(value: string) {
+		return {
+			onclick: (e: MouseEvent) => {
+				if (activePanel === value) {
+					e.preventDefault();
+					e.stopPropagation();
+					activePanel = '';
+				}
+			},
+			onkeydown: (e: KeyboardEvent) => {
+				if (e.key === 'Escape') {
+					e.preventDefault();
+					activePanel = '';
+				} else if ((e.key === 'Enter' || e.key === ' ') && activePanel === value) {
+					e.preventDefault();
+					e.stopPropagation();
+					activePanel = '';
+				}
+			}
+		};
+	}
 </script>
 
 <svelte:window on:resize={handleResize} />
 
 {#if isMobile && hasImage}
-	<div
-		class="fixed right-0 bottom-0 left-0 flex h-20 items-center justify-between border-t border-border bg-bg px-4"
-	>
-		<div class="flex w-full gap-2">
-			<Button onclick={handleReset} disabled={!hasImage} class="flex-1" variant="outlined">
-				<BroomIcon size={16} weight="bold" />
-			</Button>
-
-			<Button onclick={() => togglePanel('rotation')} disabled={!hasImage} class="flex-1">
-				<PerspectiveIcon size={16} weight="bold" />
-			</Button>
-
-			<Button onclick={() => togglePanel('position')} disabled={!hasImage} class="flex-1">
-				<ArrowsOutCardinalIcon size={16} weight="bold" />
-			</Button>
-
-			<Button onclick={() => togglePanel('border')} disabled={!hasImage} class="flex-1">
-				<SelectionIcon size={16} weight="bold" />
-			</Button>
-		</div>
+	<div class="fixed right-0 bottom-0 left-0 bg-bg">
+		<Tabs.Root bind:value={activePanel} activationMode="manual">
+			<Tabs.List class="flex h-20 items-center gap-2 px-4">
+				<Button onclick={handleReset} disabled={!hasImage} class="flex-1" variant="outlined">
+					<BroomIcon size={16} weight="bold" />
+				</Button>
+				<Tabs.Trigger value="rotation" class="flex-1">
+					{#snippet child({ props })}
+						<Button {...props} disabled={!hasImage} class="w-full">
+							<PerspectiveIcon size={16} weight="bold" />
+						</Button>
+					{/snippet}
+				</Tabs.Trigger>
+				<Tabs.Trigger value="position" class="flex-1">
+					{#snippet child({ props })}
+						<Button {...props} disabled={!hasImage} class="w-full">
+							<ArrowsOutCardinalIcon size={16} weight="bold" />
+						</Button>
+					{/snippet}
+				</Tabs.Trigger>
+				<Tabs.Trigger value="border" class="flex-1">
+					{#snippet child({ props })}
+						<Button {...props} disabled={!hasImage} class="w-full">
+							<SelectionIcon size={16} weight="bold" />
+						</Button>
+					{/snippet}
+				</Tabs.Trigger>
+			</Tabs.List>
+			<Tabs.Content value="rotation">
+				<RotationSkewPanel onClose={() => (activePanel = '')} />
+			</Tabs.Content>
+			<Tabs.Content value="position">
+				<PositionScalePanel onClose={() => (activePanel = '')} />
+			</Tabs.Content>
+			<Tabs.Content value="border">
+				<ImageBorderPanel onClose={() => (activePanel = '')} />
+			</Tabs.Content>
+		</Tabs.Root>
 	</div>
 {:else if hasImage}
-	<div class="absolute inset-x-auto bottom-6 z-30">
+	<Tabs.Root
+		bind:value={activePanel}
+		activationMode="manual"
+		class="absolute inset-x-auto bottom-6 z-30"
+	>
 		<div
 			class="flex items-center gap-1 rounded-full border-2 border-border bg-bg p-1.5 shadow-2xl backdrop-blur-lg"
 		>
@@ -76,48 +107,47 @@
 				<BroomIcon size={16} />
 				Reset
 			</Button>
-
 			<Separator.Root orientation="vertical" class="mx-1 h-6 bg-border" />
-
-			<Button
-				onclick={() => togglePanel('rotation')}
-				active={activePanel === 'rotation'}
-				disabled={!hasImage}
-			>
-				<PerspectiveIcon class="h-5 w-5" />
-				Rotate & Transform
-			</Button>
-
-			<Button
-				onclick={() => togglePanel('position')}
-				active={activePanel === 'position'}
-				disabled={!hasImage}
-			>
-				<ArrowsOutCardinalIcon class="h-5 w-5" />
-				Position & Scale
-			</Button>
-
-			<Button
-				onclick={() => togglePanel('border')}
-				active={activePanel === 'border'}
-				disabled={!hasImage}
-				class="rounded-r-2xl"
-			>
-				<SelectionIcon class="h-5 w-5" />
-				Border
-			</Button>
+			<Tabs.List class="flex items-center gap-1">
+				<Tabs.Trigger value="rotation" {...makeToggle('rotation')}>
+					{#snippet child({ props })}
+						<Button {...props} disabled={!hasImage} active={activePanel === 'rotation'}>
+							<PerspectiveIcon class="h-5 w-5" />
+							Rotate <span class="hidden lg:block">& Transform</span>
+						</Button>
+					{/snippet}
+				</Tabs.Trigger>
+				<Tabs.Trigger value="position" {...makeToggle('position')}>
+					{#snippet child({ props })}
+						<Button {...props} disabled={!hasImage} active={activePanel === 'position'}>
+							<ArrowsOutCardinalIcon class="h-5 w-5" />
+							Position <span class="hidden lg:block">& Scale</span>
+						</Button>
+					{/snippet}
+				</Tabs.Trigger>
+				<Tabs.Trigger value="border" {...makeToggle('border')}>
+					{#snippet child({ props })}
+						<Button
+							{...props}
+							disabled={!hasImage}
+							active={activePanel === 'border'}
+							class="rounded-r-2xl"
+						>
+							<SelectionIcon class="h-5 w-5" />
+							Border
+						</Button>
+					{/snippet}
+				</Tabs.Trigger>
+			</Tabs.List>
 		</div>
-	</div>
-{/if}
-
-{#if activePanel === 'rotation'}
-	<RotationSkewPanel onClose={() => (activePanel = null)} />
-{/if}
-
-{#if activePanel === 'position'}
-	<PositionScalePanel onClose={() => (activePanel = null)} />
-{/if}
-
-{#if activePanel === 'border'}
-	<ImageBorderPanel onClose={() => (activePanel = null)} />
+		<Tabs.Content value="rotation">
+			<RotationSkewPanel onClose={() => (activePanel = '')} />
+		</Tabs.Content>
+		<Tabs.Content value="position">
+			<PositionScalePanel onClose={() => (activePanel = '')} />
+		</Tabs.Content>
+		<Tabs.Content value="border">
+			<ImageBorderPanel onClose={() => (activePanel = '')} />
+		</Tabs.Content>
+	</Tabs.Root>
 {/if}
-- 
2.51.2