From 71bdafac7554da75b4d9f736eacebc94430036b2 Mon Sep 17 00:00:00 2001
From: Abelino Chavez <abelino.chavez@gmail.com>
Date: Fri, 30 Jan 2026 21:13:23 -0600
Subject: [PATCH] fix: make track visibility toggle button clickable (#658)

The eye icon in the track labels was not responding to clicks because
the onClick handler was placed directly on HugeiconsIcon which doesn't
forward click events to the underlying SVG. Fixed by wrapping the icon
in a button element.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../editor/panels/timeline/index.tsx          | 25 ++++++++-----------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/apps/web/src/components/editor/panels/timeline/index.tsx b/apps/web/src/components/editor/panels/timeline/index.tsx
index 18f768a9..6fd14533 100644
--- a/apps/web/src/components/editor/panels/timeline/index.tsx
+++ b/apps/web/src/components/editor/panels/timeline/index.tsx
@@ -539,20 +539,15 @@ function TrackToggleIcon({
 	onClick: () => void;
 }) {
 	return (
-		<>
-			{isOff ? (
-				<HugeiconsIcon
-					icon={icons.off}
-					className="text-destructive size-4 cursor-pointer"
-					onClick={onClick}
-				/>
-			) : (
-				<HugeiconsIcon
-					icon={icons.on}
-					className="text-muted-foreground size-4 cursor-pointer"
-					onClick={onClick}
-				/>
-			)}
-		</>
+		<button
+			type="button"
+			onClick={onClick}
+			className="flex items-center justify-center"
+		>
+			<HugeiconsIcon
+				icon={isOff ? icons.off : icons.on}
+				className={`size-4 ${isOff ? "text-destructive" : "text-muted-foreground"}`}
+			/>
+		</button>
 	);
 }