From f65eb30b8e8fd55239b6432c2e95d8e2198d1c7d Mon Sep 17 00:00:00 2001
From: Mahdy Arief <mahdyarief@gmail.com>
Date: Mon, 30 Mar 2026 22:07:44 +0700
Subject: [PATCH] feat(setting): hide zoom and speed setting, only show when
 select track

---
 src/components/video-editor/SettingsPanel.tsx | 165 ++++++++----------
 1 file changed, 77 insertions(+), 88 deletions(-)

diff --git a/src/components/video-editor/SettingsPanel.tsx b/src/components/video-editor/SettingsPanel.tsx
index d0b2d656..09a11bdf 100644
--- a/src/components/video-editor/SettingsPanel.tsx
+++ b/src/components/video-editor/SettingsPanel.tsx
@@ -793,8 +793,6 @@ export function SettingsPanel({
 		</div>
 	);
 
-	const zoomEnabled = Boolean(selectedZoomDepth);
-	const trimEnabled = Boolean(selectedTrimId);
 
 	const handleDeleteClick = () => {
 		if (selectedZoomId && onZoomDelete) {
@@ -1951,46 +1949,42 @@ export function SettingsPanel({
 				</AnimatePresence>
 			</div>
 
-			<div className="flex-shrink-0 border-t border-white/10 bg-[#151518] p-4 pt-3">
-				<div className="mb-4">
-					<div className="mb-3 flex items-center justify-between">
-						<span className="text-sm font-medium text-slate-200">{tSettings("zoom.level")}</span>
-						<div className="flex items-center gap-2">
-							{zoomEnabled && selectedZoomDepth && (
-								<span className="rounded-full bg-[#2563EB]/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[#2563EB]">
-									{ZOOM_DEPTH_OPTIONS.find((o) => o.depth === selectedZoomDepth)?.label}
-								</span>
-							)}
+			<div className={cn(
+				"flex-shrink-0 border-t border-white/10 bg-[#151518] p-4 pt-3",
+				!selectedZoomId && !selectedTrimId && !selectedSpeedId && "hidden"
+			)}>
+				{selectedZoomId && (
+					<div className="mb-4">
+						<div className="mb-3 flex items-center justify-between">
+							<span className="text-sm font-medium text-slate-200">{tSettings("zoom.level")}</span>
+							<div className="flex items-center gap-2">
+								{selectedZoomDepth && (
+									<span className="rounded-full bg-[#2563EB]/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[#2563EB]">
+										{ZOOM_DEPTH_OPTIONS.find((o) => o.depth === selectedZoomDepth)?.label}
+									</span>
+								)}
+							</div>
+						</div>
+						<div className="grid grid-cols-6 gap-1.5">
+							{ZOOM_DEPTH_OPTIONS.map((option) => {
+								const isActive = selectedZoomDepth === option.depth;
+								return (
+									<Button
+										key={option.depth}
+										type="button"
+										onClick={() => onZoomDepthChange?.(option.depth)}
+										className={cn(
+											"h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all duration-200 ease-out cursor-pointer",
+											isActive
+												? "border-[#2563EB] bg-[#2563EB] text-white"
+												: "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
+										)}
+									>
+										<span className="text-xs font-semibold">{option.label}</span>
+									</Button>
+								);
+							})}
 						</div>
-					</div>
-					<div className="grid grid-cols-6 gap-1.5">
-						{ZOOM_DEPTH_OPTIONS.map((option) => {
-							const isActive = selectedZoomDepth === option.depth;
-							return (
-								<Button
-									key={option.depth}
-									type="button"
-									disabled={!zoomEnabled}
-									onClick={() => onZoomDepthChange?.(option.depth)}
-									className={cn(
-										"h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all duration-200 ease-out",
-										zoomEnabled ? "opacity-100 cursor-pointer" : "opacity-40 cursor-not-allowed",
-										isActive
-											? "border-[#2563EB] bg-[#2563EB] text-white"
-											: "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
-									)}
-								>
-									<span className="text-xs font-semibold">{option.label}</span>
-								</Button>
-							);
-						})}
-					</div>
-					{!zoomEnabled && (
-						<p className="mt-2 text-center text-[10px] text-slate-500">
-							{tSettings("zoom.selectRegion")}
-						</p>
-					)}
-					{zoomEnabled && (
 						<Button
 							onClick={handleDeleteClick}
 							variant="destructive"
@@ -2000,8 +1994,11 @@ export function SettingsPanel({
 							<Trash2 className="h-3 w-3" />
 							{tSettings("zoom.deleteZoom")}
 						</Button>
-					)}
-					{trimEnabled && (
+					</div>
+				)}
+
+				{selectedTrimId && !selectedZoomId && (
+					<div className="mb-4">
 						<Button
 							onClick={handleTrimDeleteClick}
 							variant="destructive"
@@ -2011,51 +2008,42 @@ export function SettingsPanel({
 							<Trash2 className="h-3 w-3" />
 							{tSettings("trim.deleteRegion")}
 						</Button>
-					)}
-				</div>
+					</div>
+				)}
 
-				<div>
-					<div className="mb-3 flex items-center justify-between">
-						<span className="text-sm font-medium text-slate-200">
-							{tSettings("speed.playbackSpeed")}
-						</span>
-						{selectedSpeedId && selectedSpeedValue && (
-							<span className="rounded-full bg-[#d97706]/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[#d97706]">
-								{SPEED_OPTIONS.find((o) => o.speed === selectedSpeedValue)?.label ??
-									`${selectedSpeedValue}×`}
+				{selectedSpeedId && (
+					<div>
+						<div className="mb-3 flex items-center justify-between">
+							<span className="text-sm font-medium text-slate-200">
+								{tSettings("speed.playbackSpeed")}
 							</span>
-						)}
-					</div>
-					<div className="grid grid-cols-7 gap-1.5">
-						{SPEED_OPTIONS.map((option) => {
-							const isActive = selectedSpeedValue === option.speed;
-							return (
-								<Button
-									key={option.speed}
-									type="button"
-									disabled={!selectedSpeedId}
-									onClick={() => onSpeedChange?.(option.speed)}
-									className={cn(
-										"h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all duration-200 ease-out",
-										selectedSpeedId
-											? "opacity-100 cursor-pointer"
-											: "opacity-40 cursor-not-allowed",
-										isActive
-											? "border-[#d97706] bg-[#d97706] text-white"
-											: "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
-									)}
-								>
-									<span className="text-xs font-semibold">{option.label}</span>
-								</Button>
-							);
-						})}
-					</div>
-					{!selectedSpeedId && (
-						<p className="mt-2 text-center text-[10px] text-slate-500">
-							{tSettings("speed.selectRegion")}
-						</p>
-					)}
-					{selectedSpeedId && (
+							{selectedSpeedValue && (
+								<span className="rounded-full bg-[#d97706]/10 px-2 py-0.5 text-[10px] font-medium uppercase tracking-wider text-[#d97706]">
+									{SPEED_OPTIONS.find((o) => o.speed === selectedSpeedValue)?.label ??
+										`${selectedSpeedValue}×`}
+								</span>
+							)}
+						</div>
+						<div className="grid grid-cols-7 gap-1.5">
+							{SPEED_OPTIONS.map((option) => {
+								const isActive = selectedSpeedValue === option.speed;
+								return (
+									<Button
+										key={option.speed}
+										type="button"
+										onClick={() => onSpeedChange?.(option.speed)}
+										className={cn(
+											"h-auto w-full rounded-lg border px-1 py-2 text-center shadow-sm transition-all duration-200 ease-out cursor-pointer",
+											isActive
+												? "border-[#d97706] bg-[#d97706] text-white"
+												: "border-white/5 bg-white/5 text-slate-400 hover:bg-white/10 hover:border-white/10 hover:text-slate-200",
+										)}
+									>
+										<span className="text-xs font-semibold">{option.label}</span>
+									</Button>
+								);
+							})}
+						</div>
 						<Button
 							onClick={() => selectedSpeedId && onSpeedDelete?.(selectedSpeedId)}
 							variant="destructive"
@@ -2065,9 +2053,10 @@ export function SettingsPanel({
 							<Trash2 className="h-3 w-3" />
 							{tSettings("speed.deleteRegion")}
 						</Button>
-					)}
-				</div>
+					</div>
+				)}
 			</div>
 		</div>
+
 	);
 }