From 9c8594d8f31aa99466cc00cd45b37a6f21099245 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Tue, 1 Jul 2025 14:56:14 +0200
Subject: [PATCH] style: timeclip's focus state

---
 .../src/components/editor/timeline-clip.tsx   | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/apps/web/src/components/editor/timeline-clip.tsx b/apps/web/src/components/editor/timeline-clip.tsx
index 9b5f20f..88767a1 100644
--- a/apps/web/src/components/editor/timeline-clip.tsx
+++ b/apps/web/src/components/editor/timeline-clip.tsx
@@ -281,9 +281,9 @@ export function TimelineClip({
 
   return (
     <div
-      className={`absolute top-0 h-full select-none transition-all duration-75 ${
+      className={`absolute top-0 h-full select-none transition-all duration-75${
         isBeingDragged ? "z-50" : "z-10"
-      } ${isSelected ? "ring-2 ring-primary" : ""}`}
+      }`}
       style={{
         left: `${clipLeft}px`,
         width: `${clipWidth}px`,
@@ -293,9 +293,11 @@ export function TimelineClip({
       onMouseLeave={resizing ? handleResizeEnd : undefined}
     >
       <div
-        className={`relative h-full rounded border cursor-pointer overflow-hidden ${getTrackColor(
+        className={`relative h-full rounded-[0.15rem] cursor-pointer overflow-hidden ${getTrackColor(
           track.type
-        )} ${isSelected ? "ring-2 ring-primary ring-offset-1" : ""}`}
+        )} ${isSelected ? "border-b-[0.5px] border-t-[0.5px] border-primary" : ""} ${
+          isBeingDragged ? "z-50" : "z-10"
+        }`}
         onClick={(e) => onClipClick && onClipClick(e, clip)}
         onMouseDown={handleClipMouseDown}
         onContextMenu={(e) => onClipMouseDown && onClipMouseDown(e, clip)}
@@ -304,14 +306,18 @@ export function TimelineClip({
           {renderClipContent()}
         </div>
 
-        <div
-          className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize hover:bg-primary/50 transition-colors"
-          onMouseDown={(e) => handleResizeStart(e, clip.id, "left")}
-        />
-        <div
-          className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize hover:bg-primary/50 transition-colors"
-          onMouseDown={(e) => handleResizeStart(e, clip.id, "right")}
-        />
+        {isSelected && (
+          <>
+            <div
+              className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize bg-foreground z-50"
+              onMouseDown={(e) => handleResizeStart(e, clip.id, "left")}
+            />
+            <div
+              className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize bg-foreground z-50"
+              onMouseDown={(e) => handleResizeStart(e, clip.id, "right")}
+            />
+          </>
+        )}
 
         <div className="absolute top-1 right-1">
           <DropdownMenu open={clipMenuOpen} onOpenChange={setClipMenuOpen}>