feat: remove contributor index display from contributors page

apps/web/next.config.ts

@@ -7,6 +7,18 @@ const nextConfig: NextConfig = {
   reactStrictMode: true,
   productionBrowserSourceMaps: true,
   output: "standalone",
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "plus.unsplash.com",
+      },
+      {
+        protocol: "https",
+        hostname: "images.unsplash.com",
+      },
+    ],
+  },
 };
 
 export default nextConfig;

apps/web/src/app/contributors/page.tsx

@@ -140,9 +140,6 @@ export default async function ContributorsPage() {
                                   {contributor.login.charAt(0).toUpperCase()}
                                 </AvatarFallback>
                               </Avatar>
-                              <div className="absolute -top-2 -right-2 bg-foreground text-background rounded-full w-8 h-8 flex items-center justify-center text-sm font-bold">
-                                {index + 1}
-                              </div>
                             </div>
                             <h3 className="text-xl font-semibold mb-2 group-hover:text-foreground/80 transition-colors">
                               {contributor.login}

apps/web/src/app/globals.css

@@ -43,7 +43,7 @@
     --foreground: 0 0% 98%;
     --card: 0 0% 3.9%;
     --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
+    --popover: 0 0% 14.9%;
     --popover-foreground: 0 0% 98%;
     --primary: 0 0% 98%;
     --primary-foreground: 0 0% 9%;

apps/web/src/app/page.tsx

@@ -12,13 +12,6 @@ export default async function Home() {
 
   return (
     <div>
-      <Image
-        className="fixed top-0 left-0 -z-50 size-full object-cover"
-        src="/landing-page-bg.png"
-        height={1903.5}
-        width={1269}
-        alt="landing-page.bg"
-      />
       <Header />
       <Hero signupCount={signupCount} />
       <Footer />

apps/web/src/app/projects/page.tsx

@@ -0,0 +1,228 @@
+"use client";
+
+import Link from "next/link";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  ChevronLeft,
+  Plus,
+  Calendar,
+  MoreHorizontal,
+  Video,
+} from "lucide-react";
+import { TProject } from "@/types/project";
+import Image from "next/image";
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@/components/ui/dropdown-menu";
+
+// Hard-coded project data
+const mockProjects: TProject[] = [
+  {
+    id: "1",
+    name: "Summer Vacation Highlights",
+    createdAt: new Date("2024-12-15"),
+    updatedAt: new Date("2024-12-20"),
+    thumbnail:
+      "https://plus.unsplash.com/premium_photo-1750854354243-81f40af63a73?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  },
+  {
+    id: "2",
+    name: "Product Demo Video",
+    createdAt: new Date("2024-12-10"),
+    updatedAt: new Date("2024-12-18"),
+    thumbnail:
+      "https://images.unsplash.com/photo-1750875936215-0c35c1742cd6?q=80&w=688&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  },
+  {
+    id: "3",
+    name: "Wedding Ceremony Edit",
+    createdAt: new Date("2024-12-05"),
+    updatedAt: new Date("2024-12-16"),
+    thumbnail:
+      "https://images.unsplash.com/photo-1750967991618-7b64a3025381?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  },
+  {
+    id: "4",
+    name: "Travel Vlog - Japan",
+    createdAt: new Date("2024-11-28"),
+    updatedAt: new Date("2024-12-14"),
+    thumbnail:
+      "https://images.unsplash.com/photo-1750639258774-9a714379a093?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+  },
+];
+
+// Mock duration data (in seconds)
+const mockDurations: Record<string, number> = {
+  "1": 245, // 4:05
+  "2": 120, // 2:00
+  "3": 1800, // 30:00
+  "4": 780, // 13:00
+  "5": 360, // 6:00
+  "6": 180, // 3:00
+};
+
+export default function ProjectsPage() {
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="pt-6 px-6 flex items-center justify-between w-full h-16">
+        <Link
+          href="/"
+          className="flex items-center gap-1 hover:text-muted-foreground transition-colors"
+        >
+          <ChevronLeft className="!size-5 shrink-0" />
+          <span className="text-sm font-medium">Back</span>
+        </Link>
+        <div className="block md:hidden">
+          <CreateButton />
+        </div>
+      </div>
+      <main className="max-w-6xl mx-auto px-6 pt-6 pb-6">
+        <div className="mb-8 flex items-center justify-between">
+          <div className="flex flex-col gap-3">
+            <h1 className="text-2xl md:text-3xl font-bold tracking-tight">
+              Your Projects
+            </h1>
+            <p className="text-muted-foreground">
+              {mockProjects.length}{" "}
+              {mockProjects.length === 1 ? "project" : "projects"}
+            </p>
+          </div>
+          <div className="hidden md:block">
+            <CreateButton />
+          </div>
+        </div>
+
+        {mockProjects.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-center">
+            <div className="w-16 h-16 rounded-full bg-muted/30 flex items-center justify-center mb-4">
+              <Video className="h-8 w-8 text-muted-foreground" />
+            </div>
+            <h3 className="text-lg font-medium mb-2">No projects yet</h3>
+            <p className="text-muted-foreground mb-6 max-w-md">
+              Start creating your first video project. Import media, edit, and
+              export professional videos.
+            </p>
+            <Link href="/editor">
+              <Button size="lg" className="gap-2">
+                <Plus className="h-4 w-4" />
+                Create Your First Project
+              </Button>
+            </Link>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-6">
+            {mockProjects.map((project, index) => (
+              <ProjectCard key={project.id} project={project} />
+            ))}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}
+
+function ProjectCard({ project }: { project: TProject }) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const formatDuration = (seconds: number): string => {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = Math.floor(seconds % 60);
+    return `${minutes}:${remainingSeconds.toString().padStart(2, "0")}`;
+  };
+
+  const formatDate = (date: Date): string => {
+    return date.toLocaleDateString("en-US", {
+      month: "short",
+      day: "numeric",
+      year: "numeric",
+    });
+  };
+
+  return (
+    <Link href={`/editor/${project.id}`} className="block group">
+      <Card className="overflow-hidden bg-background border-none p-0">
+        <div
+          className={`relative aspect-square bg-muted transition-opacity ${
+            isDropdownOpen ? "opacity-65" : "opacity-100 group-hover:opacity-65"
+          }`}
+        >
+          {/* Thumbnail preview */}
+          <div className="absolute inset-0">
+            <Image
+              src={project.thumbnail}
+              alt="Project thumbnail"
+              fill
+              className="object-cover"
+            />
+          </div>
+
+          {/* Duration badge */}
+          <div className="absolute bottom-3 right-3 bg-background text-foreground text-xs px-2 py-1 rounded">
+            {formatDuration(mockDurations[project.id] || 0)}
+          </div>
+        </div>
+
+        <CardContent className="px-0 pt-5">
+          <div className="flex items-start justify-between mb-2">
+            <h3 className="font-medium text-sm leading-snug group-hover:text-foreground/90 transition-colors line-clamp-2">
+              {project.name}
+            </h3>
+            <DropdownMenu onOpenChange={setIsDropdownOpen}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="text"
+                  size="sm"
+                  className={`size-6 p-0 transition-all shrink-0 ml-2 ${
+                    isDropdownOpen
+                      ? "opacity-100"
+                      : "opacity-0 group-hover:opacity-100"
+                  }`}
+                  onClick={(e) => e.preventDefault()}
+                >
+                  <MoreHorizontal />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent
+                align="end"
+                onCloseAutoFocus={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  console.log("close");
+                }}
+              >
+                <DropdownMenuItem>Rename</DropdownMenuItem>
+                <DropdownMenuItem>Duplicate</DropdownMenuItem>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem variant="destructive">
+                  Delete
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+
+          <div className="space-y-1">
+            <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
+              <Calendar className="!size-4" />
+              <span>Created {formatDate(project.createdAt)}</span>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}
+
+function CreateButton() {
+  return (
+    <Button className="flex">
+      <Plus className="!size-4" />
+      <span className="text-sm font-medium">New project</span>
+    </Button>
+  );
+}

apps/web/src/components/editor/timeline-track.tsx

@@ -0,0 +1,660 @@
+"use client";
+
+import { useRef, useState, useEffect } from "react";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { useMediaStore } from "@/stores/media-store";
+import { toast } from "sonner";
+import { Copy, Scissors, Trash2 } from "lucide-react";
+import { TimelineClip } from "./timeline-clip";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "../ui/context-menu";
+import {
+  TimelineTrack,
+  TimelineClip as TypeTimelineClip,
+} from "@/stores/timeline-store";
+import { usePlaybackStore } from "@/stores/playback-store";
+
+export function TimelineTrackContent({
+  track,
+  zoomLevel,
+}: {
+  track: TimelineTrack;
+  zoomLevel: number;
+}) {
+  const { mediaItems } = useMediaStore();
+  const {
+    tracks,
+    moveClipToTrack,
+    updateClipStartTime,
+    addClipToTrack,
+    selectedClips,
+    selectClip,
+    deselectClip,
+    dragState,
+    startDrag: startDragAction,
+    updateDragTime,
+    endDrag: endDragAction,
+  } = useTimelineStore();
+
+  const timelineRef = useRef<HTMLDivElement>(null);
+  const [isDropping, setIsDropping] = useState(false);
+  const [dropPosition, setDropPosition] = useState<number | null>(null);
+  const [wouldOverlap, setWouldOverlap] = useState(false);
+  const dragCounterRef = useRef(0);
+  const [mouseDownLocation, setMouseDownLocation] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  // Set up mouse event listeners for drag
+  useEffect(() => {
+    if (!dragState.isDragging) return;
+
+    const handleMouseMove = (e: MouseEvent) => {
+      if (!timelineRef.current) return;
+
+      const timelineRect = timelineRef.current.getBoundingClientRect();
+      const mouseX = e.clientX - timelineRect.left;
+      const mouseTime = Math.max(0, mouseX / (50 * zoomLevel));
+      const adjustedTime = Math.max(0, mouseTime - dragState.clickOffsetTime);
+      const snappedTime = Math.round(adjustedTime * 10) / 10;
+
+      updateDragTime(snappedTime);
+    };
+
+    const handleMouseUp = () => {
+      if (!dragState.clipId || !dragState.trackId) return;
+
+      const finalTime = dragState.currentTime;
+
+      // Check for overlaps and update position
+      const sourceTrack = tracks.find((t) => t.id === dragState.trackId);
+      const movingClip = sourceTrack?.clips.find(
+        (c) => c.id === dragState.clipId
+      );
+
+      if (movingClip) {
+        const movingClipDuration =
+          movingClip.duration - movingClip.trimStart - movingClip.trimEnd;
+        const movingClipEnd = finalTime + movingClipDuration;
+
+        const targetTrack = tracks.find((t) => t.id === track.id);
+        const hasOverlap = targetTrack?.clips.some((existingClip) => {
+          if (
+            dragState.trackId === track.id &&
+            existingClip.id === dragState.clipId
+          ) {
+            return false;
+          }
+          const existingStart = existingClip.startTime;
+          const existingEnd =
+            existingClip.startTime +
+            (existingClip.duration -
+              existingClip.trimStart -
+              existingClip.trimEnd);
+          return finalTime < existingEnd && movingClipEnd > existingStart;
+        });
+
+        if (!hasOverlap) {
+          if (dragState.trackId === track.id) {
+            updateClipStartTime(track.id, dragState.clipId, finalTime);
+          } else {
+            moveClipToTrack(dragState.trackId, track.id, dragState.clipId);
+            requestAnimationFrame(() => {
+              updateClipStartTime(track.id, dragState.clipId!, finalTime);
+            });
+          }
+        }
+      }
+
+      endDragAction();
+    };
+
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [
+    dragState.isDragging,
+    dragState.clickOffsetTime,
+    dragState.clipId,
+    dragState.trackId,
+    dragState.currentTime,
+    zoomLevel,
+    tracks,
+    track.id,
+    updateDragTime,
+    updateClipStartTime,
+    moveClipToTrack,
+    endDragAction,
+  ]);
+
+  const handleClipMouseDown = (e: React.MouseEvent, clip: TypeTimelineClip) => {
+    setMouseDownLocation({ x: e.clientX, y: e.clientY });
+    // Handle multi-selection only in mousedown
+    if (e.metaKey || e.ctrlKey || e.shiftKey) {
+      selectClip(track.id, clip.id, true);
+    }
+
+    // Calculate the offset from the left edge of the clip to where the user clicked
+    const clipElement = e.currentTarget as HTMLElement;
+    const clipRect = clipElement.getBoundingClientRect();
+    const clickOffsetX = e.clientX - clipRect.left;
+    const clickOffsetTime = clickOffsetX / (50 * zoomLevel);
+
+    startDragAction(
+      clip.id,
+      track.id,
+      e.clientX,
+      clip.startTime,
+      clickOffsetTime
+    );
+  };
+
+  const handleClipClick = (e: React.MouseEvent, clip: TypeTimelineClip) => {
+    e.stopPropagation();
+
+    // Check if mouse moved significantly
+    if (mouseDownLocation) {
+      const deltaX = Math.abs(e.clientX - mouseDownLocation.x);
+      const deltaY = Math.abs(e.clientY - mouseDownLocation.y);
+      // If it moved more than a few pixels, consider it a drag and not a click.
+      if (deltaX > 5 || deltaY > 5) {
+        setMouseDownLocation(null); // Reset for next interaction
+        return;
+      }
+    }
+
+    // Skip selection logic for multi-selection (handled in mousedown)
+    if (e.metaKey || e.ctrlKey || e.shiftKey) {
+      return;
+    }
+
+    // Handle single selection/deselection
+    const isSelected = selectedClips.some(
+      (c) => c.trackId === track.id && c.clipId === clip.id
+    );
+
+    if (isSelected) {
+      // If clip is selected, deselect it
+      deselectClip(track.id, clip.id);
+    } else {
+      // If clip is not selected, select it (replacing other selections)
+      selectClip(track.id, clip.id, false);
+    }
+  };
+
+  const handleTrackDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+
+    // Handle both timeline clips and media items
+    const hasTimelineClip = e.dataTransfer.types.includes(
+      "application/x-timeline-clip"
+    );
+    const hasMediaItem = e.dataTransfer.types.includes(
+      "application/x-media-item"
+    );
+
+    if (!hasTimelineClip && !hasMediaItem) return;
+
+    if (hasMediaItem) {
+      try {
+        const mediaItemData = e.dataTransfer.getData(
+          "application/x-media-item"
+        );
+        if (mediaItemData) {
+          const { type } = JSON.parse(mediaItemData);
+          const isCompatible =
+            (track.type === "video" &&
+              (type === "video" || type === "image")) ||
+            (track.type === "audio" && type === "audio");
+
+          if (!isCompatible) {
+            e.dataTransfer.dropEffect = "none";
+            return;
+          }
+        }
+      } catch (error) {
+        console.error("Error parsing dropped media item:", error);
+      }
+    }
+
+    // Calculate drop position for overlap checking
+    const trackContainer = e.currentTarget.querySelector(
+      ".track-clips-container"
+    ) as HTMLElement;
+    let dropTime = 0;
+    if (trackContainer) {
+      const rect = trackContainer.getBoundingClientRect();
+      const mouseX = Math.max(0, e.clientX - rect.left);
+      dropTime = mouseX / (50 * zoomLevel);
+    }
+
+    // Check for potential overlaps and show appropriate feedback
+    let wouldOverlap = false;
+
+    if (hasMediaItem) {
+      try {
+        const mediaItemData = e.dataTransfer.getData(
+          "application/x-media-item"
+        );
+        if (mediaItemData) {
+          const { id } = JSON.parse(mediaItemData);
+          const mediaItem = mediaItems.find((item) => item.id === id);
+          if (mediaItem) {
+            const newClipDuration = mediaItem.duration || 5;
+            const snappedTime = Math.round(dropTime * 10) / 10;
+            const newClipEnd = snappedTime + newClipDuration;
+
+            wouldOverlap = track.clips.some((existingClip) => {
+              const existingStart = existingClip.startTime;
+              const existingEnd =
+                existingClip.startTime +
+                (existingClip.duration -
+                  existingClip.trimStart -
+                  existingClip.trimEnd);
+              return snappedTime < existingEnd && newClipEnd > existingStart;
+            });
+          }
+        }
+      } catch (error) {
+        // Continue with default behavior
+      }
+    } else if (hasTimelineClip) {
+      try {
+        const timelineClipData = e.dataTransfer.getData(
+          "application/x-timeline-clip"
+        );
+        if (timelineClipData) {
+          const { clipId, trackId: fromTrackId } = JSON.parse(timelineClipData);
+          const sourceTrack = tracks.find(
+            (t: TimelineTrack) => t.id === fromTrackId
+          );
+          const movingClip = sourceTrack?.clips.find(
+            (c: any) => c.id === clipId
+          );
+
+          if (movingClip) {
+            const movingClipDuration =
+              movingClip.duration - movingClip.trimStart - movingClip.trimEnd;
+            const snappedTime = Math.round(dropTime * 10) / 10;
+            const movingClipEnd = snappedTime + movingClipDuration;
+
+            wouldOverlap = track.clips.some((existingClip) => {
+              if (fromTrackId === track.id && existingClip.id === clipId)
+                return false;
+
+              const existingStart = existingClip.startTime;
+              const existingEnd =
+                existingClip.startTime +
+                (existingClip.duration -
+                  existingClip.trimStart -
+                  existingClip.trimEnd);
+              return snappedTime < existingEnd && movingClipEnd > existingStart;
+            });
+          }
+        }
+      } catch (error) {
+        // Continue with default behavior
+      }
+    }
+
+    if (wouldOverlap) {
+      e.dataTransfer.dropEffect = "none";
+      setWouldOverlap(true);
+      setDropPosition(Math.round(dropTime * 10) / 10);
+      return;
+    }
+
+    e.dataTransfer.dropEffect = hasTimelineClip ? "move" : "copy";
+    setWouldOverlap(false);
+    setDropPosition(Math.round(dropTime * 10) / 10);
+  };
+
+  const handleTrackDragEnter = (e: React.DragEvent) => {
+    e.preventDefault();
+
+    const hasTimelineClip = e.dataTransfer.types.includes(
+      "application/x-timeline-clip"
+    );
+    const hasMediaItem = e.dataTransfer.types.includes(
+      "application/x-media-item"
+    );
+
+    if (!hasTimelineClip && !hasMediaItem) return;
+
+    dragCounterRef.current++;
+    setIsDropping(true);
+  };
+
+  const handleTrackDragLeave = (e: React.DragEvent) => {
+    e.preventDefault();
+
+    const hasTimelineClip = e.dataTransfer.types.includes(
+      "application/x-timeline-clip"
+    );
+    const hasMediaItem = e.dataTransfer.types.includes(
+      "application/x-media-item"
+    );
+
+    if (!hasTimelineClip && !hasMediaItem) return;
+
+    dragCounterRef.current--;
+
+    if (dragCounterRef.current === 0) {
+      setIsDropping(false);
+      setWouldOverlap(false);
+      setDropPosition(null);
+    }
+  };
+
+  const handleTrackDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    // Reset all drag states
+    dragCounterRef.current = 0;
+    setIsDropping(false);
+    setWouldOverlap(false);
+    const currentDropPosition = dropPosition;
+    setDropPosition(null);
+
+    const hasTimelineClip = e.dataTransfer.types.includes(
+      "application/x-timeline-clip"
+    );
+    const hasMediaItem = e.dataTransfer.types.includes(
+      "application/x-media-item"
+    );
+
+    if (!hasTimelineClip && !hasMediaItem) return;
+
+    const trackContainer = e.currentTarget.querySelector(
+      ".track-clips-container"
+    ) as HTMLElement;
+    if (!trackContainer) return;
+
+    const rect = trackContainer.getBoundingClientRect();
+    const mouseX = Math.max(0, e.clientX - rect.left);
+    const newStartTime = mouseX / (50 * zoomLevel);
+    const snappedTime = Math.round(newStartTime * 10) / 10;
+
+    try {
+      if (hasTimelineClip) {
+        // Handle timeline clip movement
+        const timelineClipData = e.dataTransfer.getData(
+          "application/x-timeline-clip"
+        );
+        if (!timelineClipData) return;
+
+        const {
+          clipId,
+          trackId: fromTrackId,
+          clickOffsetTime = 0,
+        } = JSON.parse(timelineClipData);
+
+        // Find the clip being moved
+        const sourceTrack = tracks.find(
+          (t: TimelineTrack) => t.id === fromTrackId
+        );
+        const movingClip = sourceTrack?.clips.find(
+          (c: TypeTimelineClip) => c.id === clipId
+        );
+
+        if (!movingClip) {
+          toast.error("Clip not found");
+          return;
+        }
+
+        // Adjust position based on where user clicked on the clip
+        const adjustedStartTime = snappedTime - clickOffsetTime;
+        const finalStartTime = Math.max(
+          0,
+          Math.round(adjustedStartTime * 10) / 10
+        );
+
+        // Check for overlaps with existing clips (excluding the moving clip itself)
+        const movingClipDuration =
+          movingClip.duration - movingClip.trimStart - movingClip.trimEnd;
+        const movingClipEnd = finalStartTime + movingClipDuration;
+
+        const hasOverlap = track.clips.some((existingClip) => {
+          // Skip the clip being moved if it's on the same track
+          if (fromTrackId === track.id && existingClip.id === clipId)
+            return false;
+
+          const existingStart = existingClip.startTime;
+          const existingEnd =
+            existingClip.startTime +
+            (existingClip.duration -
+              existingClip.trimStart -
+              existingClip.trimEnd);
+
+          // Check if clips overlap
+          return finalStartTime < existingEnd && movingClipEnd > existingStart;
+        });
+
+        if (hasOverlap) {
+          toast.error(
+            "Cannot move clip here - it would overlap with existing clips"
+          );
+          return;
+        }
+
+        if (fromTrackId === track.id) {
+          // Moving within same track
+          updateClipStartTime(track.id, clipId, finalStartTime);
+        } else {
+          // Moving to different track
+          moveClipToTrack(fromTrackId, track.id, clipId);
+          requestAnimationFrame(() => {
+            updateClipStartTime(track.id, clipId, finalStartTime);
+          });
+        }
+      } else if (hasMediaItem) {
+        // Handle media item drop
+        const mediaItemData = e.dataTransfer.getData(
+          "application/x-media-item"
+        );
+        if (!mediaItemData) return;
+
+        const { id, type } = JSON.parse(mediaItemData);
+        const mediaItem = mediaItems.find((item) => item.id === id);
+
+        if (!mediaItem) {
+          toast.error("Media item not found");
+          return;
+        }
+
+        // Check if track type is compatible
+        const isCompatible =
+          (track.type === "video" && (type === "video" || type === "image")) ||
+          (track.type === "audio" && type === "audio");
+
+        if (!isCompatible) {
+          toast.error(`Cannot add ${type} to ${track.type} track`);
+          return;
+        }
+
+        // Check for overlaps with existing clips
+        const newClipDuration = mediaItem.duration || 5;
+        const newClipEnd = snappedTime + newClipDuration;
+
+        const hasOverlap = track.clips.some((existingClip) => {
+          const existingStart = existingClip.startTime;
+          const existingEnd =
+            existingClip.startTime +
+            (existingClip.duration -
+              existingClip.trimStart -
+              existingClip.trimEnd);
+
+          // Check if clips overlap
+          return snappedTime < existingEnd && newClipEnd > existingStart;
+        });
+
+        if (hasOverlap) {
+          toast.error(
+            "Cannot place clip here - it would overlap with existing clips"
+          );
+          return;
+        }
+
+        addClipToTrack(track.id, {
+          mediaId: mediaItem.id,
+          name: mediaItem.name,
+          duration: mediaItem.duration || 5,
+          startTime: snappedTime,
+          trimStart: 0,
+          trimEnd: 0,
+        });
+
+        toast.success(`Added ${mediaItem.name} to ${track.name}`);
+      }
+    } catch (error) {
+      console.error("Error handling drop:", error);
+      toast.error("Failed to add media to track");
+    }
+  };
+
+  return (
+    <div
+      className="w-full h-full hover:bg-muted/20"
+      onClick={(e) => {
+        // If clicking empty area (not on a clip), deselect all clips
+        if (!(e.target as HTMLElement).closest(".timeline-clip")) {
+          const { clearSelectedClips } = useTimelineStore.getState();
+          clearSelectedClips();
+        }
+      }}
+      onDragOver={handleTrackDragOver}
+      onDragEnter={handleTrackDragEnter}
+      onDragLeave={handleTrackDragLeave}
+      onDrop={handleTrackDrop}
+    >
+      <div
+        ref={timelineRef}
+        className="h-full relative track-clips-container min-w-full"
+      >
+        {track.clips.length === 0 ? (
+          <div
+            className={`h-full w-full rounded-sm border-2 border-dashed flex items-center justify-center text-xs text-muted-foreground transition-colors ${
+              isDropping
+                ? wouldOverlap
+                  ? "border-red-500 bg-red-500/10 text-red-600"
+                  : "border-blue-500 bg-blue-500/10 text-blue-600"
+                : "border-muted/30"
+            }`}
+          >
+            {isDropping
+              ? wouldOverlap
+                ? "Cannot drop - would overlap"
+                : "Drop clip here"
+              : "Drop media here"}
+          </div>
+        ) : (
+          <>
+            {track.clips.map((clip) => {
+              const isSelected = selectedClips.some(
+                (c) => c.trackId === track.id && c.clipId === clip.id
+              );
+
+              const handleClipSplit = () => {
+                const { currentTime } = usePlaybackStore();
+                const { updateClipTrim, addClipToTrack } = useTimelineStore();
+                const splitTime = currentTime;
+                const effectiveStart = clip.startTime;
+                const effectiveEnd =
+                  clip.startTime +
+                  (clip.duration - clip.trimStart - clip.trimEnd);
+
+                if (splitTime > effectiveStart && splitTime < effectiveEnd) {
+                  updateClipTrim(
+                    track.id,
+                    clip.id,
+                    clip.trimStart,
+                    clip.trimEnd + (effectiveEnd - splitTime)
+                  );
+                  addClipToTrack(track.id, {
+                    mediaId: clip.mediaId,
+                    name: clip.name + " (split)",
+                    duration: clip.duration,
+                    startTime: splitTime,
+                    trimStart: clip.trimStart + (splitTime - effectiveStart),
+                    trimEnd: clip.trimEnd,
+                  });
+                  toast.success("Clip split successfully");
+                } else {
+                  toast.error("Playhead must be within clip to split");
+                }
+              };
+
+              const handleClipDuplicate = () => {
+                const { addClipToTrack } = useTimelineStore.getState();
+                addClipToTrack(track.id, {
+                  mediaId: clip.mediaId,
+                  name: clip.name + " (copy)",
+                  duration: clip.duration,
+                  startTime:
+                    clip.startTime +
+                    (clip.duration - clip.trimStart - clip.trimEnd) +
+                    0.1,
+                  trimStart: clip.trimStart,
+                  trimEnd: clip.trimEnd,
+                });
+                toast.success("Clip duplicated");
+              };
+
+              const handleClipDelete = () => {
+                const { removeClipFromTrack } = useTimelineStore.getState();
+                removeClipFromTrack(track.id, clip.id);
+                toast.success("Clip deleted");
+              };
+
+              return (
+                <ContextMenu key={clip.id}>
+                  <ContextMenuTrigger asChild>
+                    <div>
+                      <TimelineClip
+                        clip={clip}
+                        track={track}
+                        zoomLevel={zoomLevel}
+                        isSelected={isSelected}
+                        onClipMouseDown={handleClipMouseDown}
+                        onClipClick={handleClipClick}
+                      />
+                    </div>
+                  </ContextMenuTrigger>
+                  <ContextMenuContent>
+                    <ContextMenuItem onClick={handleClipSplit}>
+                      <Scissors className="h-4 w-4 mr-2" />
+                      Split at Playhead
+                    </ContextMenuItem>
+                    <ContextMenuItem onClick={handleClipDuplicate}>
+                      <Copy className="h-4 w-4 mr-2" />
+                      Duplicate Clip
+                    </ContextMenuItem>
+                    <ContextMenuSeparator />
+                    <ContextMenuItem
+                      onClick={handleClipDelete}
+                      className="text-destructive focus:text-destructive"
+                    >
+                      <Trash2 className="h-4 w-4 mr-2" />
+                      Delete Clip
+                    </ContextMenuItem>
+                  </ContextMenuContent>
+                </ContextMenu>
+              );
+            })}
+          </>
+        )}
+      </div>
+    </div>
+  );
+}

apps/web/src/components/footer.tsx

@@ -25,12 +25,12 @@ export function Footer() {
 
   return (
     <motion.footer
-      className="bg-background/80 backdrop-blur-sm border mt-16 m-6 rounded-sm"
+      className="bg-background border-t"
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
       transition={{ delay: 0.8, duration: 0.8 }}
     >
-      <div className="max-w-5xl mx-auto px-4 py-10">
+      <div className="max-w-5xl mx-auto px-8 py-10">
         <div className="grid grid-cols-1 md:grid-cols-2 gap-12 mb-8">
           {/* Brand Section */}
           <div className="md:col-span-1 max-w-sm">

apps/web/src/components/header.tsx

@@ -61,7 +61,7 @@ export function Header() {
   return (
     <div className="mx-4 md:mx-0">
       <HeaderBase
-        className="bg-[#1D1D1D] border border-white/10 rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[14px]"
+        className="bg-accent border rounded-2xl max-w-3xl mx-auto mt-4 pl-4 pr-[14px]"
         leftContent={leftContent}
         rightContent={rightContent}
       />

apps/web/src/components/landing/hero.tsx

@@ -69,7 +69,14 @@ export function Hero({ signupCount }: HeroProps) {
   };
 
   return (
-    <div className="min-h-[calc(100vh-6rem)] supports-[height:100dvh]:min-h-[calc(100dvh-6rem)] flex flex-col justify-between items-center text-center px-4">
+    <div className="min-h-[calc(100vh-4.5rem)] supports-[height:100dvh]:min-h-[calc(100dvh-4.5rem)] flex flex-col justify-between items-center text-center px-4">
+      <Image
+        className="absolute top-0 left-0 -z-50 size-full object-cover"
+        src="/landing-page-bg.png"
+        height={1903.5}
+        width={1269}
+        alt="landing-page.bg"
+      />
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}

apps/web/src/components/ui/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-xl border bg-card text-card-foreground shadow",
+      "rounded-xl border bg-card text-card-foreground",
       className
     )}
     {...props}

apps/web/src/components/ui/context-menu.tsx

@@ -3,6 +3,7 @@
 import * as React from "react";
 import { ContextMenu as ContextMenuPrimitive } from "radix-ui";
 import { Check, ChevronRight, Circle } from "lucide-react";
+import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "../../lib/utils";
 
@@ -18,23 +19,40 @@ const ContextMenuSub = ContextMenuPrimitive.Sub;
 
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
+const contextMenuItemVariants = cva(
+  "relative flex cursor-pointer select-none items-center gap-2 px-2 py-1.5 text-sm outline-none transition-opacity data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "focus:opacity-65 focus:text-accent-foreground",
+        destructive: "text-destructive focus:text-destructive/80",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
 const ContextMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
     inset?: boolean;
+    variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
   }
->(({ className, inset, children, ...props }, ref) => (
+>(({ className, inset, children, variant = "default", ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      contextMenuItemVariants({ variant }),
+      "data-[state=open]:bg-accent data-[state=open]:opacity-65",
       inset && "pl-8",
       className
     )}
     {...props}
   >
     {children}
-    <ChevronRight className="ml-auto h-4 w-4" />
+    <ChevronRight className="ml-auto" />
   </ContextMenuPrimitive.SubTrigger>
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
@@ -62,7 +80,8 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 bg-popover text-popover-foreground shadow-md",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
@@ -75,12 +94,13 @@ const ContextMenuItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
     inset?: boolean;
+    variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
   }
->(({ className, inset, ...props }, ref) => (
+>(({ className, inset, variant = "default", ...props }, ref) => (
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      contextMenuItemVariants({ variant }),
       inset && "pl-8",
       className
     )}
@@ -91,14 +111,13 @@ ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
 
 const ContextMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem> & {
+    variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
+  }
+>(({ className, children, checked, variant = "default", ...props }, ref) => (
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
+    className={cn(contextMenuItemVariants({ variant }), "pl-8 pr-2", className)}
     checked={checked}
     {...props}
   >
@@ -115,19 +134,18 @@ ContextMenuCheckboxItem.displayName =
 
 const ContextMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem> & {
+    variant?: VariantProps<typeof contextMenuItemVariants>["variant"];
+  }
+>(({ className, children, variant = "default", ...props }, ref) => (
   <ContextMenuPrimitive.RadioItem
     ref={ref}
-    className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    )}
+    className={cn(contextMenuItemVariants({ variant }), "pl-8 pr-2", className)}
     {...props}
   >
     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-        <Circle className="h-4 w-4 fill-current" />
+        <Circle className="h-2 w-2 fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -144,7 +162,7 @@ const ContextMenuLabel = React.forwardRef<
   <ContextMenuPrimitive.Label
     ref={ref}
     className={cn(
-      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
       className
     )}
@@ -159,7 +177,7 @@ const ContextMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ContextMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-border", className)}
+    className={cn("-mx-1 my-1 h-px bg-foreground/10", className)}
     {...props}
   />
 ));
@@ -171,10 +189,7 @@ const ContextMenuShortcut = ({
 }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn(
-        "ml-auto text-xs tracking-widest text-muted-foreground",
-        className
-      )}
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
   );

apps/web/src/components/ui/dropdown-menu.tsx

@@ -19,16 +19,33 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
+const dropdownMenuItemVariants = cva(
+  "relative flex cursor-pointer select-none items-center gap-2 px-2 py-1.5 text-sm outline-none transition-opacity data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "focus:opacity-65 focus:text-accent-foreground",
+        destructive: "text-destructive focus:text-destructive/80",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
     inset?: boolean;
+    variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
   }
->(({ className, inset, children, ...props }, ref) => (
+>(({ className, inset, children, variant = "default", ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      dropdownMenuItemVariants({ variant }),
+      "data-[state=open]:bg-accent data-[state=open]:opacity-65",
       inset && "pl-8",
       className
     )}
@@ -66,7 +83,7 @@ const DropdownMenuContent = React.forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 bg-popover text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
@@ -76,22 +93,6 @@ const DropdownMenuContent = React.forwardRef<
 ));
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
-const dropdownMenuItemVariants = cva(
-  "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "focus:bg-accent focus:text-accent-foreground",
-        destructive:
-          "text-destructive focus:bg-destructive focus:text-destructive-foreground",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-);
-
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
@@ -113,12 +114,15 @@ DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
->(({ className, children, checked, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem> & {
+    variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
+  }
+>(({ className, children, checked, variant = "default", ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      dropdownMenuItemVariants({ variant }),
+      "pl-8 pr-2",
       className
     )}
     checked={checked}
@@ -137,12 +141,15 @@ DropdownMenuCheckboxItem.displayName =
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem> & {
+    variant?: VariantProps<typeof dropdownMenuItemVariants>["variant"];
+  }
+>(({ className, children, variant = "default", ...props }, ref) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      dropdownMenuItemVariants({ variant }),
+      "pl-8 pr-2",
       className
     )}
     {...props}
@@ -181,7 +188,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("-mx-1 my-1 h-px bg-foreground/10", className)}
     {...props}
   />
 ));

apps/web/src/stores/project-store.ts

@@ -17,6 +17,7 @@ export const useProjectStore = create<ProjectStore>((set) => ({
     const newProject: TProject = {
       id: crypto.randomUUID(),
       name,
+      thumbnail: "",
       createdAt: new Date(),
       updatedAt: new Date(),
     };

apps/web/src/types/project.ts

@@ -1,6 +1,7 @@
 export interface TProject {
   id: string;
   name: string;
+  thumbnail: string;
   createdAt: Date;
   updatedAt: Date;
 }

apps/web/src/types/timeline.ts

@@ -1,29 +1,20 @@
-import { TimelineTrack, TimelineClip } from "@/stores/timeline-store";
-
-export type TrackType = "video" | "audio" | "effects";
-
-export interface TimelineClipProps {
-  clip: TimelineClip;
-  track: TimelineTrack;
-  zoomLevel: number;
-  isSelected: boolean;
-  onContextMenu: (e: React.MouseEvent, clipId: string) => void;
-  onClipMouseDown: (e: React.MouseEvent, clip: TimelineClip) => void;
-  onClipClick: (e: React.MouseEvent, clip: TimelineClip) => void;
-}
-
-export interface ResizeState {
-  clipId: string;
-  side: "left" | "right";
-  startX: number;
-  initialTrimStart: number;
-  initialTrimEnd: number;
-}
-
-export interface ContextMenuState {
-  type: "track" | "clip";
-  trackId: string;
-  clipId?: string;
-  x: number;
-  y: number;
-}
+import { TimelineTrack, TimelineClip } from "@/stores/timeline-store";
+
+export type TrackType = "video" | "audio" | "effects";
+
+export interface TimelineClipProps {
+  clip: TimelineClip;
+  track: TimelineTrack;
+  zoomLevel: number;
+  isSelected: boolean;
+  onClipMouseDown: (e: React.MouseEvent, clip: TimelineClip) => void;
+  onClipClick: (e: React.MouseEvent, clip: TimelineClip) => void;
+}
+
+export interface ResizeState {
+  clipId: string;
+  side: "left" | "right";
+  startX: number;
+  initialTrimStart: number;
+  initialTrimEnd: number;
+}

apps/web/tailwind.config.ts

@@ -8,6 +8,9 @@ export default {
   ],
   theme: {
     extend: {
+      screens: {
+        xs: "480px",
+      },
       fontSize: {
         base: "0.95rem",
       },