From 167f366c6d791dfc054d64f50e83828960668e55 Mon Sep 17 00:00:00 2001
From: Simon Orzel <simonorzel@gmail.com>
Date: Thu, 17 Jul 2025 03:00:38 +0200
Subject: feat: bunx biome format --write .

---
 .../editor/timeline/timeline-tracks-area.tsx       | 150 ++++++++++-----------
 1 file changed, 70 insertions(+), 80 deletions(-)

(limited to 'apps/web/src/components/editor/timeline/timeline-tracks-area.tsx')

diff --git a/apps/web/src/components/editor/timeline/timeline-tracks-area.tsx b/apps/web/src/components/editor/timeline/timeline-tracks-area.tsx
index 144eb0f3..9242bccd 100644
--- a/apps/web/src/components/editor/timeline/timeline-tracks-area.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-tracks-area.tsx
@@ -1,10 +1,10 @@
 import { Fragment } from "react";
 import { Plus } from "lucide-react";
 import {
-  ContextMenu,
-  ContextMenuContent,
-  ContextMenuItem,
-  ContextMenuTrigger,
+	ContextMenu,
+	ContextMenuContent,
+	ContextMenuItem,
+	ContextMenuTrigger,
 } from "../../ui/context-menu";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { TimelineTrackContent } from "../timeline-track";
@@ -14,86 +14,76 @@ import type { TimelineTrack } from "@/types/timeline";
 import type { SnapPoint } from "@/hooks/use-timeline-snapping";
 
 export interface TimelineTracksAreaProps {
-  tracks: TimelineTrack[];
-  zoomLevel: number;
-  handleSnapPointChange: (snapPoint: SnapPoint | null) => void;
-  clearSelectedElements: () => void;
+	tracks: TimelineTrack[];
+	zoomLevel: number;
+	handleSnapPointChange: (snapPoint: SnapPoint | null) => void;
+	clearSelectedElements: () => void;
 }
 
 export function TimelineTracksArea({
-  tracks,
-  zoomLevel,
-  handleSnapPointChange,
-  clearSelectedElements,
+	tracks,
+	zoomLevel,
+	handleSnapPointChange,
+	clearSelectedElements,
 }: TimelineTracksAreaProps) {
-  const { addTrack, toggleTrackMute } = useTimelineStore();
+	const { addTrack, toggleTrackMute } = useTimelineStore();
 
-  return (
-    <>
-      {/* Track Rows */}
-      {tracks.map((track, index) => (
-        <Fragment key={track.id}>
-          {/* Left Column (Sticky Track Labels) */}
-          <div
-            className="sticky left-0 flex items-center border-b border-panel border-inset group bg-card/[0.99] z-[98]"
-            style={{ height: `${getTrackHeight(track.type)}px` }}
-          >
-            <div className="flex items-center gap-2 px-2">
-              <TrackIcon track={track} />
-            </div>
-            {track.muted && (
-              <span className="text-xs text-red-500 font-semibold">
-                Muted
-              </span>
-            )}
-          </div>
+	return (
+		<>
+			{/* Track Rows */}
+			{tracks.map((track, index) => (
+				<Fragment key={track.id}>
+					{/* Left Column (Sticky Track Labels) */}
+					<div
+						className="sticky left-0 flex items-center border-b border-panel border-inset group bg-card/[0.99] z-[98]"
+						style={{ height: `${getTrackHeight(track.type)}px` }}
+					>
+						<div className="flex items-center gap-2 px-2">
+							<TrackIcon track={track} />
+						</div>
+						{track.muted && (
+							<span className="text-xs text-red-500 font-semibold">Muted</span>
+						)}
+					</div>
 
-          {/* Scrollable Track Content */}
-          <ContextMenu>
-            <ContextMenuTrigger asChild>
-              <div
-                className=" h-full"
-                onClick={(e) => {
-                  // If clicking empty area (not on a element), deselect all elements
-                  if (
-                    !(e.target as HTMLElement).closest(
-                      ".timeline-element"
-                    )
-                  ) {
-                    clearSelectedElements();
-                  }
-                }}
-              >
-                <TimelineTrackContent
-                  track={track}
-                  zoomLevel={zoomLevel}
-                  onSnapPointChange={handleSnapPointChange}
-                />
-              </div>
-            </ContextMenuTrigger>
-            <ContextMenuContent>
-              <ContextMenuItem
-                onClick={() => toggleTrackMute(track.id)}
-              >
-                {track.muted ? "Unmute Track" : "Mute Track"}
-              </ContextMenuItem>
-              <ContextMenuItem>
-                Track settings (soon)
-              </ContextMenuItem>
-            </ContextMenuContent>
-          </ContextMenu>
-        </Fragment>
-      ))}
-      {/* Add Track Button - spans full width */}
-      <div
-        onClick={() => addTrack('media')}
-        className="col-span-1 sticky left-0 w-full flex items-center border-b border-muted bg-card/[0.99] hover:bg-card/50 transition-colors cursor-pointer z-[89]"
-        style={{ height: `${getTrackHeight("media")}px` }}
-      >
-        <div className="w-full flex  justify-center items-center">
-          <Plus className="w-4 h-4 text-muted-foreground" />
-        </div>
-      </div>
-    </>
-  );
+					{/* Scrollable Track Content */}
+					<ContextMenu>
+						<ContextMenuTrigger asChild>
+							<div
+								className=" h-full"
+								onClick={(e) => {
+									// If clicking empty area (not on a element), deselect all elements
+									if (!(e.target as HTMLElement).closest(".timeline-element")) {
+										clearSelectedElements();
+									}
+								}}
+							>
+								<TimelineTrackContent
+									track={track}
+									zoomLevel={zoomLevel}
+									onSnapPointChange={handleSnapPointChange}
+								/>
+							</div>
+						</ContextMenuTrigger>
+						<ContextMenuContent>
+							<ContextMenuItem onClick={() => toggleTrackMute(track.id)}>
+								{track.muted ? "Unmute Track" : "Mute Track"}
+							</ContextMenuItem>
+							<ContextMenuItem>Track settings (soon)</ContextMenuItem>
+						</ContextMenuContent>
+					</ContextMenu>
+				</Fragment>
+			))}
+			{/* Add Track Button - spans full width */}
+			<div
+				onClick={() => addTrack("media")}
+				className="col-span-1 sticky left-0 w-full flex items-center border-b border-muted bg-card/[0.99] hover:bg-card/50 transition-colors cursor-pointer z-[89]"
+				style={{ height: `${getTrackHeight("media")}px` }}
+			>
+				<div className="w-full flex  justify-center items-center">
+					<Plus className="w-4 h-4 text-muted-foreground" />
+				</div>
+			</div>
+		</>
+	);
 }
-- 
cgit v1.3.1