From 3e89d2998588f8e35c524e523ba2ee853f0f6475 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 20 Apr 2026 11:31:17 +0200
Subject: refactor: restructure files to their domains,  new preview overlay
 system, and dep graph

---
 apps/web/src/timeline/components/timeline-tick.tsx | 42 ++++++++++++++++++++++
 1 file changed, 42 insertions(+)
 create mode 100644 apps/web/src/timeline/components/timeline-tick.tsx

(limited to 'apps/web/src/timeline/components/timeline-tick.tsx')

diff --git a/apps/web/src/timeline/components/timeline-tick.tsx b/apps/web/src/timeline/components/timeline-tick.tsx
new file mode 100644
index 00000000..1b1e46d3
--- /dev/null
+++ b/apps/web/src/timeline/components/timeline-tick.tsx
@@ -0,0 +1,42 @@
+"use client";
+
+import type { FrameRate } from "opencut-wasm";
+import { timelineTimeToSnappedPixels } from "@/timeline";
+import { formatRulerLabel } from "@/timeline/ruler-utils";
+
+interface TimelineTickProps {
+	time: number;
+	timeInSeconds: number;
+	zoomLevel: number;
+	fps: FrameRate;
+	showLabel: boolean;
+}
+
+export function TimelineTick({
+	time,
+	timeInSeconds,
+	zoomLevel,
+	fps,
+	showLabel,
+}: TimelineTickProps) {
+	const leftPosition = timelineTimeToSnappedPixels({ time, zoomLevel });
+
+	if (showLabel) {
+		const label = formatRulerLabel({ timeInSeconds, fps });
+		return (
+			<span
+				className="text-muted-foreground/85 absolute top-1 select-none text-[10px] leading-none"
+				style={{ left: `${leftPosition}px` }}
+			>
+				{label}
+			</span>
+		);
+	}
+
+	return (
+		<div
+			className="border-muted-foreground/25 absolute top-1.5 h-1.5 border-l"
+			style={{ left: `${leftPosition}px` }}
+		/>
+	);
+}
-- 
cgit v1.3.1