fix: remove thick black border from checkbox for cleaner UI

3 files changed, 176 insertions, 107 deletions

diff --git a/apps/web/package.json b/apps/web/package.json
index f5cd7da4..e19e1953 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -72,6 +72,7 @@
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.16",
     "@types/bun": "latest",
+    "@types/node": "^24.1.0",
     "@types/pg": "^8.15.4",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx
index 4b68791b..2cd20730 100644
--- a/apps/web/src/app/projects/page.tsx
+++ b/apps/web/src/app/projects/page.tsx
@@ -399,7 +399,7 @@ function ProjectCard({
       >
         {isSelectionMode && (
           <div className="absolute top-3 left-3 z-10">
-            <div className="w-5 h-5 rounded bg-background/80 backdrop-blur-sm border flex items-center justify-center">
+            <div className="w-4.9 h-4.9 rounded-full bg-background/80 backdrop-blur-sm border flex items-center justify-center">
               <Checkbox
                 checked={isSelected}
                 onCheckedChange={(checked) =>
diff --git a/apps/web/src/hooks/use-editor-actions.ts b/apps/web/src/hooks/use-editor-actions.ts
index b2fad55f..bfe9a7b9 100644
--- a/apps/web/src/hooks/use-editor-actions.ts
+++ b/apps/web/src/hooks/use-editor-actions.ts
@@ -26,136 +26,204 @@ export function useEditorActions() {
   const { activeProject } = useProjectStore();
 
   // Playback actions
-  useActionHandler("toggle-play", () => {
-    toggle();
-  }, undefined);
-
-  useActionHandler("stop-playback", () => {
-    if (isPlaying) {
+  useActionHandler(
+    "toggle-play",
+    () => {
       toggle();
-    }
-    seek(0);
-  }, undefined);
+    },
+    undefined
+  );
+
+  useActionHandler(
+    "stop-playback",
+    () => {
+      if (isPlaying) {
+        toggle();
+      }
+      seek(0);
+    },
+    undefined
+  );
 
-  useActionHandler("seek-forward", (args) => {
-    const seconds = args?.seconds ?? 1;
-    seek(Math.min(duration, currentTime + seconds));
-  }, undefined);
+  useActionHandler(
+    "seek-forward",
+    (args) => {
+      const seconds = args?.seconds ?? 1;
+      seek(Math.min(duration, currentTime + seconds));
+    },
+    undefined
+  );
 
-  useActionHandler("seek-backward", (args) => {
-    const seconds = args?.seconds ?? 1;
-    seek(Math.max(0, currentTime - seconds));
-  }, undefined);
+  useActionHandler(
+    "seek-backward",
+    (args) => {
+      const seconds = args?.seconds ?? 1;
+      seek(Math.max(0, currentTime - seconds));
+    },
+    undefined
+  );
 
-  useActionHandler("frame-step-forward", () => {
-    const projectFps = activeProject?.fps || 30;
-    seek(Math.min(duration, currentTime + 1 / projectFps));
-  }, undefined);
+  useActionHandler(
+    "frame-step-forward",
+    () => {
+      const projectFps = activeProject?.fps || 30;
+      seek(Math.min(duration, currentTime + 1 / projectFps));
+    },
+    undefined
+  );
 
-  useActionHandler("frame-step-backward", () => {
-    const projectFps = activeProject?.fps || 30;
-    seek(Math.max(0, currentTime - 1 / projectFps));
-  }, undefined);
+  useActionHandler(
+    "frame-step-backward",
+    () => {
+      const projectFps = activeProject?.fps || 30;
+      seek(Math.max(0, currentTime - 1 / projectFps));
+    },
+    undefined
+  );
 
-  useActionHandler("jump-forward", (args) => {
-    const seconds = args?.seconds ?? 5;
-    seek(Math.min(duration, currentTime + seconds));
-  }, undefined);
+  useActionHandler(
+    "jump-forward",
+    (args) => {
+      const seconds = args?.seconds ?? 5;
+      seek(Math.min(duration, currentTime + seconds));
+    },
+    undefined
+  );
 
-  useActionHandler("jump-backward", (args) => {
-    const seconds = args?.seconds ?? 5;
-    seek(Math.max(0, currentTime - seconds));
-  }, undefined);
+  useActionHandler(
+    "jump-backward",
+    (args) => {
+      const seconds = args?.seconds ?? 5;
+      seek(Math.max(0, currentTime - seconds));
+    },
+    undefined
+  );
 
-  useActionHandler("goto-start", () => {
-    seek(0);
-  }, undefined);
+  useActionHandler(
+    "goto-start",
+    () => {
+      seek(0);
+    },
+    undefined
+  );
 
-  useActionHandler("goto-end", () => {
-    seek(duration);
-  }, undefined);
+  useActionHandler(
+    "goto-end",
+    () => {
+      seek(duration);
+    },
+    undefined
+  );
 
   // Timeline editing actions
-  useActionHandler("split-element", () => {
-    if (selectedElements.length !== 1) {
-      toast.error("Select exactly one element to split");
-      return;
-    }
+  useActionHandler(
+    "split-element",
+    () => {
+      if (selectedElements.length !== 1) {
+        toast.error("Select exactly one element to split");
+        return;
+      }
 
-    const { trackId, elementId } = selectedElements[0];
-    const track = tracks.find((t: any) => t.id === trackId);
-    const element = track?.elements.find((el: any) => el.id === elementId);
+      const { trackId, elementId } = selectedElements[0];
+      const track = tracks.find((t: any) => t.id === trackId);
+      const element = track?.elements.find((el: any) => el.id === elementId);
 
-    if (element) {
-      const effectiveStart = element.startTime;
-      const effectiveEnd =
-        element.startTime +
-        (element.duration - element.trimStart - element.trimEnd);
+      if (element) {
+        const effectiveStart = element.startTime;
+        const effectiveEnd =
+          element.startTime +
+          (element.duration - element.trimStart - element.trimEnd);
 
-      if (currentTime > effectiveStart && currentTime < effectiveEnd) {
-        splitElement(trackId, elementId, currentTime);
-      } else {
-        toast.error("Playhead must be within selected element");
+        if (currentTime > effectiveStart && currentTime < effectiveEnd) {
+          splitElement(trackId, elementId, currentTime);
+        } else {
+          toast.error("Playhead must be within selected element");
+        }
       }
-    }
-  }, undefined);
+    },
+    undefined
+  );
 
-  useActionHandler("delete-selected", () => {
-    if (selectedElements.length === 0) {
-      return;
-    }
-    selectedElements.forEach(
-      ({ trackId, elementId }: { trackId: string; elementId: string }) => {
-        removeElementFromTrack(trackId, elementId);
+  useActionHandler(
+    "delete-selected",
+    () => {
+      if (selectedElements.length === 0) {
+        return;
       }
-    );
-    clearSelectedElements();
-  }, undefined);
+      selectedElements.forEach(
+        ({ trackId, elementId }: { trackId: string; elementId: string }) => {
+          removeElementFromTrack(trackId, elementId);
+        }
+      );
+      clearSelectedElements();
+    },
+    undefined
+  );
 
-  useActionHandler("select-all", () => {
-    const allElements = tracks.flatMap((track: any) =>
-      track.elements.map((element: any) => ({
-        trackId: track.id,
-        elementId: element.id,
-      }))
-    );
-    setSelectedElements(allElements);
-  }, undefined);
+  useActionHandler(
+    "select-all",
+    () => {
+      const allElements = tracks.flatMap((track: any) =>
+        track.elements.map((element: any) => ({
+          trackId: track.id,
+          elementId: element.id,
+        }))
+      );
+      setSelectedElements(allElements);
+    },
+    undefined
+  );
 
-  useActionHandler("duplicate-selected", () => {
-    if (selectedElements.length !== 1) {
-      toast.error("Select exactly one element to duplicate");
-      return;
-    }
+  useActionHandler(
+    "duplicate-selected",
+    () => {
+      if (selectedElements.length !== 1) {
+        toast.error("Select exactly one element to duplicate");
+        return;
+      }
 
-    const { trackId, elementId } = selectedElements[0];
-    const track = tracks.find((t: any) => t.id === trackId);
-    const element = track?.elements.find((el: any) => el.id === elementId);
+      const { trackId, elementId } = selectedElements[0];
+      const track = tracks.find((t: any) => t.id === trackId);
+      const element = track?.elements.find((el: any) => el.id === elementId);
 
-    if (element) {
-      const newStartTime =
-        element.startTime +
-        (element.duration - element.trimStart - element.trimEnd) +
-        0.1;
-      const { id, ...elementWithoutId } = element;
+      if (element) {
+        const newStartTime =
+          element.startTime +
+          (element.duration - element.trimStart - element.trimEnd) +
+          0.1;
+        const { id, ...elementWithoutId } = element;
 
-      addElementToTrack(trackId, {
-        ...elementWithoutId,
-        startTime: newStartTime,
-      });
-    }
-  }, undefined);
+        addElementToTrack(trackId, {
+          ...elementWithoutId,
+          startTime: newStartTime,
+        });
+      }
+    },
+    undefined
+  );
 
-  useActionHandler("toggle-snapping", () => {
-    toggleSnapping();
-  }, undefined);
+  useActionHandler(
+    "toggle-snapping",
+    () => {
+      toggleSnapping();
+    },
+    undefined
+  );
 
   // History actions
-  useActionHandler("undo", () => {
-    undo();
-  }, undefined);
+  useActionHandler(
+    "undo",
+    () => {
+      undo();
+    },
+    undefined
+  );
 
-  useActionHandler("redo", () => {
-    redo();
-  }, undefined);
+  useActionHandler(
+    "redo",
+    () => {
+      redo();
+    },
+    undefined
+  );
 }