Merge branch 'main' into feat/timeline-return-to-start

apps/web/src/components/editor/audio-waveform.tsx

@@ -19,22 +19,21 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
 
   useEffect(() => {
     let mounted = true;
-
+    let ws = wavesurfer.current;
+    
     const initWaveSurfer = async () => {
       if (!waveformRef.current || !audioUrl) return;
 
       try {
-        // Clean up any existing instance
-        if (wavesurfer.current) {
-          try {
-            wavesurfer.current.destroy();
-          } catch (e) {
-            // Silently ignore destroy errors
-          }
+        // Clear any existing instance safely
+        if (ws) {
+          // Instead of immediately destroying, just set to null
+          // We'll destroy it outside this function
           wavesurfer.current = null;
         }
 
-        wavesurfer.current = WaveSurfer.create({
+        // Create a fresh instance
+        const newWaveSurfer = WaveSurfer.create({
           container: waveformRef.current,
           waveColor: "rgba(255, 255, 255, 0.6)",
           progressColor: "rgba(255, 255, 255, 0.9)",
@@ -46,15 +45,28 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
           interact: false,
         });
 
+        // Assign to ref only if component is still mounted
+        if (mounted) {
+          wavesurfer.current = newWaveSurfer;
+        } else {
+          // Component unmounted during initialization, clean up
+          try {
+            newWaveSurfer.destroy();
+          } catch (e) {
+            // Ignore destroy errors
+          }
+          return;
+        }
+
         // Event listeners
-        wavesurfer.current.on("ready", () => {
+        newWaveSurfer.on("ready", () => {
           if (mounted) {
             setIsLoading(false);
             setError(false);
           }
         });
 
-        wavesurfer.current.on("error", (err) => {
+        newWaveSurfer.on("error", (err) => {
           console.error("WaveSurfer error:", err);
           if (mounted) {
             setError(true);
@@ -62,7 +74,7 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
           }
         });
 
-        await wavesurfer.current.load(audioUrl);
+        await newWaveSurfer.load(audioUrl);
       } catch (err) {
         console.error("Failed to initialize WaveSurfer:", err);
         if (mounted) {
@@ -72,17 +84,50 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
       }
     };
 
-    initWaveSurfer();
+    // First safely destroy previous instance if it exists
+    if (ws) {
+      // Use this pattern to safely destroy the previous instance
+      const wsToDestroy = ws;
+      // Detach from ref immediately
+      wavesurfer.current = null;
+      
+      // Wait a tick to destroy so any pending operations can complete
+      requestAnimationFrame(() => {
+        try {
+          wsToDestroy.destroy();
+        } catch (e) {
+          // Ignore errors during destroy
+        }
+        // Only initialize new instance after destroying the old one
+        if (mounted) {
+          initWaveSurfer();
+        }
+      });
+    } else {
+      // No previous instance to clean up, initialize directly
+      initWaveSurfer();
+    }
 
     return () => {
+      // Mark component as unmounted
       mounted = false;
-      if (wavesurfer.current) {
-        try {
-          wavesurfer.current.destroy();
-        } catch (e) {
-          // Silently ignore destroy errors
-        }
-        wavesurfer.current = null;
+      
+      // Store reference to current wavesurfer instance
+      const wsToDestroy = wavesurfer.current;
+      
+      // Immediately clear the ref to prevent accessing it after unmount
+      wavesurfer.current = null;
+      
+      // If we have an instance to clean up, do it safely
+      if (wsToDestroy) {
+        // Delay destruction to avoid race conditions
+        requestAnimationFrame(() => {
+          try {
+            wsToDestroy.destroy();
+          } catch (e) {
+            // Ignore destroy errors - they're expected
+          }
+        });
       }
     };
   }, [audioUrl, height]);

apps/web/src/components/editor/media-panel/index.tsx

@@ -4,14 +4,16 @@ import { TabBar } from "./tabbar";
 import { MediaView } from "./views/media";
 import { useMediaPanelStore, Tab } from "./store";
 import { TextView } from "./views/text";
-import { AudioView } from "./views/audio";
+import { SoundsView } from "./views/sounds";
+import { Separator } from "@/components/ui/separator";
+import { SettingsView } from "./views/settings";
 
 export function MediaPanel() {
   const { activeTab } = useMediaPanelStore();
 
   const viewMap: Record<Tab, React.ReactNode> = {
     media: <MediaView />,
-    audio: <AudioView />,
+    sounds: <SoundsView />,
     text: <TextView />,
     stickers: (
       <div className="p-4 text-muted-foreground">
@@ -43,12 +45,14 @@ export function MediaPanel() {
         Adjustment view coming soon...
       </div>
     ),
+    settings: <SettingsView />,
   };
 
   return (
-    <div className="h-full flex flex-col bg-panel rounded-sm">
+    <div className="h-full flex bg-panel">
       <TabBar />
-      <div className="flex-1 overflow-y-auto">{viewMap[activeTab]}</div>
+      <Separator orientation="vertical" />
+      <div className="flex-1 overflow-hidden">{viewMap[activeTab]}</div>
     </div>
   );
 }

apps/web/src/components/editor/media-panel/store.ts

@@ -9,28 +9,30 @@ import {
   SlidersHorizontalIcon,
   LucideIcon,
   TypeIcon,
+  SettingsIcon,
 } from "lucide-react";
 import { create } from "zustand";
 
 export type Tab =
   | "media"
-  | "audio"
+  | "sounds"
   | "text"
   | "stickers"
   | "effects"
   | "transitions"
   | "captions"
   | "filters"
-  | "adjustment";
+  | "adjustment"
+  | "settings";
 
 export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {
   media: {
     icon: VideoIcon,
     label: "Media",
   },
-  audio: {
+  sounds: {
     icon: MusicIcon,
-    label: "Audio",
+    label: "Sounds",
   },
   text: {
     icon: TypeIcon,
@@ -60,6 +62,10 @@ export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {
     icon: SlidersHorizontalIcon,
     label: "Adjustment",
   },
+  settings: {
+    icon: SettingsIcon,
+    label: "Settings",
+  },
 };
 
 interface MediaPanelStore {

apps/web/src/components/editor/media-panel/tabbar.tsx

@@ -69,21 +69,20 @@ export function TabBar() {
       />
       <div
         ref={scrollContainerRef}
-        className="h-12 bg-panel-accent px-3 flex justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative w-full"
+        className="h-full px-4 flex flex-col justify-start items-center gap-5 overflow-x-auto scrollbar-x-hidden relative w-full py-4"
       >
         {(Object.keys(tabs) as Tab[]).map((tabKey) => {
           const tab = tabs[tabKey];
           return (
             <div
               className={cn(
-                "flex flex-col gap-0.5 items-center cursor-pointer",
-                activeTab === tabKey ? "text-primary" : "text-muted-foreground"
+                "flex flex-col gap-0.5 items-center cursor-pointer opacity-100 hover:opacity-75",
+                activeTab === tabKey ? "text-primary !opacity-100" : "text-muted-foreground"
               )}
               onClick={() => setActiveTab(tabKey)}
               key={tabKey}
             >
-              <tab.icon className="!size-[1.1rem]" />
-              <span className="text-[0.65rem]">{tab.label}</span>
+              <tab.icon className="size-[1.1rem]!" />
             </div>
           );
         })}
@@ -114,10 +113,10 @@ function ScrollButton({
     <div className="bg-panel-accent w-12 h-full flex items-center justify-center">
       <Button
         size="icon"
-        className="rounded-[0.4rem] w-4 h-7 !bg-foreground/10"
+        className="rounded-[0.4rem] w-4 h-7 bg-foreground/10!"
         onClick={onClick}
       >
-        <Icon className="!size-4 text-foreground" />
+        <Icon className="size-4! text-foreground" />
       </Button>
     </div>
   );

apps/web/src/components/editor/media-panel/views/audio.tsx

@@ -1,18 +0,0 @@
-"use client";
-
-import { Input } from "@/components/ui/input";
-import { useState } from "react";
-
-export function AudioView() {
-  const [search, setSearch] = useState("");
-  return (
-    <div className="h-full flex flex-col gap-2 p-4">
-      <Input
-        placeholder="Search songs and artists"
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-      />
-      <div className="flex flex-col gap-2" />
-    </div>
-  );
-}

apps/web/src/components/editor/media-panel/views/media.tsx

@@ -3,8 +3,18 @@
 import { useDragDrop } from "@/hooks/use-drag-drop";
 import { processMediaFiles } from "@/lib/media-processing";
 import { useMediaStore, type MediaItem } from "@/stores/media-store";
-import { Image, Loader2, Music, Plus, Video } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import {
+  ArrowDown01,
+  CloudUpload,
+  Grid2X2,
+  Image,
+  List,
+  Loader2,
+  Music,
+  Search,
+  Video,
+} from "lucide-react";
+import { useEffect, useRef, useState, useMemo } from "react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
 import { MediaDragOverlay } from "@/components/editor/media-panel/drag-overlay";
@@ -14,27 +24,62 @@ import {
   ContextMenuItem,
   ContextMenuTrigger,
 } from "@/components/ui/context-menu";
-import { Input } from "@/components/ui/input";
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { DraggableMediaItem } from "@/components/ui/draggable-item";
 import { useProjectStore } from "@/stores/project-store";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { ScrollArea } from "@/components/ui/scroll-area";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import { usePanelStore } from "@/stores/panel-store";
+
+function MediaItemWithContextMenu({
+  item,
+  children,
+  onRemove,
+}: {
+  item: MediaItem;
+  children: React.ReactNode;
+  onRemove: (e: React.MouseEvent, id: string) => Promise<void>;
+}) {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger>{children}</ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Export clips</ContextMenuItem>
+        <ContextMenuItem
+          variant="destructive"
+          onClick={(e) => onRemove(e, item.id)}
+        >
+          Delete
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
 
 export function MediaView() {
   const { mediaItems, addMediaItem, removeMediaItem } = useMediaStore();
   const { activeProject } = useProjectStore();
+  const { mediaViewMode, setMediaViewMode } = usePanelStore();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [isProcessing, setIsProcessing] = useState(false);
   const [progress, setProgress] = useState(0);
   const [searchQuery, setSearchQuery] = useState("");
   const [mediaFilter, setMediaFilter] = useState("all");
+  const [sortBy, setSortBy] = useState<"name" | "type" | "duration" | "size">(
+    "name"
+  );
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("asc");
 
   const processFiles = async (files: FileList | File[]) => {
     if (!files || files.length === 0) return;
@@ -100,7 +145,7 @@ export function MediaView() {
   const [filteredMediaItems, setFilteredMediaItems] = useState(mediaItems);
 
   useEffect(() => {
-    const filtered = mediaItems.filter((item) => {
+    let filtered = mediaItems.filter((item) => {
       if (mediaFilter && mediaFilter !== "all" && item.type !== mediaFilter) {
         return false;
       }
@@ -115,79 +160,117 @@ export function MediaView() {
       return true;
     });
 
+    filtered.sort((a, b) => {
+      let valueA: any;
+      let valueB: any;
+
+      switch (sortBy) {
+        case "name":
+          valueA = a.name.toLowerCase();
+          valueB = b.name.toLowerCase();
+          break;
+        case "type":
+          valueA = a.type;
+          valueB = b.type;
+          break;
+        case "duration":
+          valueA = a.duration || 0;
+          valueB = b.duration || 0;
+          break;
+        case "size":
+          valueA = a.file.size;
+          valueB = b.file.size;
+          break;
+        default:
+          return 0;
+      }
+
+      if (valueA < valueB) return sortOrder === "asc" ? -1 : 1;
+      if (valueA > valueB) return sortOrder === "asc" ? 1 : -1;
+      return 0;
+    });
+
     setFilteredMediaItems(filtered);
-  }, [mediaItems, mediaFilter, searchQuery]);
+  }, [mediaItems, mediaFilter, searchQuery, sortBy, sortOrder]);
 
-  const renderPreview = (item: MediaItem) => {
-    // Render a preview for each media type (image, video, audio, unknown)
-    if (item.type === "image") {
-      return (
-        <div className="w-full h-full flex items-center justify-center">
-          <img
-            src={item.url}
-            alt={item.name}
-            className="max-w-full max-h-full object-contain"
-            loading="lazy"
-          />
-        </div>
-      );
-    }
+  const previewComponents = useMemo(() => {
+    const previews = new Map<string, React.ReactNode>();
 
-    if (item.type === "video") {
-      if (item.thumbnailUrl) {
-        return (
-          <div className="relative w-full h-full">
+    filteredMediaItems.forEach((item) => {
+      let preview: React.ReactNode;
+
+      if (item.type === "image") {
+        preview = (
+          <div className="w-full h-full flex items-center justify-center">
             <img
-              src={item.thumbnailUrl}
+              src={item.url}
               alt={item.name}
-              className="w-full h-full object-cover rounded"
+              className="max-w-full max-h-full object-contain"
               loading="lazy"
             />
-            <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded">
-              <Video className="h-6 w-6 text-white drop-shadow-md" />
-            </div>
-            {item.duration && (
-              <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 rounded">
-                {formatDuration(item.duration)}
+          </div>
+        );
+      } else if (item.type === "video") {
+        if (item.thumbnailUrl) {
+          preview = (
+            <div className="relative w-full h-full">
+              <img
+                src={item.thumbnailUrl}
+                alt={item.name}
+                className="w-full h-full object-cover rounded"
+                loading="lazy"
+              />
+              <div className="absolute inset-0 flex items-center justify-center bg-black/20 rounded">
+                <Video className="h-6 w-6 text-white drop-shadow-md" />
               </div>
+              {item.duration && (
+                <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 rounded">
+                  {formatDuration(item.duration)}
+                </div>
+              )}
+            </div>
+          );
+        } else {
+          preview = (
+            <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">
+              <Video className="h-6 w-6 mb-1" />
+              <span className="text-xs">Video</span>
+              {item.duration && (
+                <span className="text-xs opacity-70">
+                  {formatDuration(item.duration)}
+                </span>
+              )}
+            </div>
+          );
+        }
+      } else if (item.type === "audio") {
+        preview = (
+          <div className="w-full h-full bg-linear-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20">
+            <Music className="h-6 w-6 mb-1" />
+            <span className="text-xs">Audio</span>
+            {item.duration && (
+              <span className="text-xs opacity-70">
+                {formatDuration(item.duration)}
+              </span>
             )}
           </div>
         );
+      } else {
+        preview = (
+          <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">
+            <Image className="h-6 w-6" />
+            <span className="text-xs mt-1">Unknown</span>
+          </div>
+        );
       }
-      return (
-        <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">
-          <Video className="h-6 w-6 mb-1" />
-          <span className="text-xs">Video</span>
-          {item.duration && (
-            <span className="text-xs opacity-70">
-              {formatDuration(item.duration)}
-            </span>
-          )}
-        </div>
-      );
-    }
 
-    if (item.type === "audio") {
-      return (
-        <div className="w-full h-full bg-gradient-to-br from-green-500/20 to-emerald-500/20 flex flex-col items-center justify-center text-muted-foreground rounded border border-green-500/20">
-          <Music className="h-6 w-6 mb-1" />
-          <span className="text-xs">Audio</span>
-          {item.duration && (
-            <span className="text-xs opacity-70">
-              {formatDuration(item.duration)}
-            </span>
-          )}
-        </div>
-      );
-    }
+      previews.set(item.id, preview);
+    });
 
-    return (
-      <div className="w-full h-full bg-muted/30 flex flex-col items-center justify-center text-muted-foreground rounded">
-        <Image className="h-6 w-6" />
-        <span className="text-xs mt-1">Unknown</span>
-      </div>
-    );
-  };
+    return previews;
+  }, [filteredMediaItems]);
+
+  const renderPreview = (item: MediaItem) => previewComponents.get(item.id);
 
   return (
     <>
@@ -207,43 +290,152 @@ export function MediaView() {
       >
         <div className="p-3 pb-2 bg-panel">
           {/* Search and filter controls */}
-          <div className="flex gap-2">
-            <Select value={mediaFilter} onValueChange={setMediaFilter}>
-              <SelectTrigger className="w-[80px] h-9 text-xs">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">All</SelectItem>
-                <SelectItem value="video">Video</SelectItem>
-                <SelectItem value="audio">Audio</SelectItem>
-                <SelectItem value="image">Image</SelectItem>
-              </SelectContent>
-            </Select>
-            <Input
-              type="text"
-              placeholder="Search media..."
-              className="min-w-[60px] flex-1 h-9 text-xs"
-              value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
-            />
+          <div className="flex items-center gap-2">
             <Button
               variant="outline"
               size="lg"
               onClick={handleFileSelect}
               disabled={isProcessing}
-              className="flex-none bg-transparent min-w-[30px] whitespace-nowrap overflow-hidden px-2 justify-center items-center h-9"
+              className="!bg-background px-4 flex-1 justify-center items-center h-9 opacity-100 hover:opacity-75 transition-opacity"
             >
               {isProcessing ? (
                 <Loader2 className="h-4 w-4 animate-spin" />
               ) : (
-                <Plus className="h-4 w-4" />
+                <CloudUpload className="h-4 w-4" />
               )}
+              <span>Upload</span>
             </Button>
+            <div className="flex items-center gap-0">
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      size="icon"
+                      variant="text"
+                      onClick={() =>
+                        setMediaViewMode(
+                          mediaViewMode === "grid" ? "list" : "grid"
+                        )
+                      }
+                      disabled={isProcessing}
+                      className="justify-center items-center"
+                    >
+                      {mediaViewMode === "grid" ? (
+                        <List strokeWidth={1.5} className="!size-[1.05rem]" />
+                      ) : (
+                        <Grid2X2
+                          strokeWidth={1.5}
+                          className="!size-[1.05rem]"
+                        />
+                      )}
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    <p>
+                      {mediaViewMode === "grid"
+                        ? "Switch to list view"
+                        : "Switch to grid view"}
+                    </p>
+                  </TooltipContent>
+                  <Tooltip>
+                    <DropdownMenu>
+                      <TooltipTrigger asChild>
+                        <DropdownMenuTrigger asChild>
+                          <Button
+                            size="icon"
+                            variant="text"
+                            disabled={isProcessing}
+                            className="justify-center items-center"
+                          >
+                            <ArrowDown01
+                              strokeWidth={1.5}
+                              className="!size-[1.05rem]"
+                            />
+                          </Button>
+                        </DropdownMenuTrigger>
+                      </TooltipTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                          onClick={() => {
+                            if (sortBy === "name") {
+                              setSortOrder(
+                                sortOrder === "asc" ? "desc" : "asc"
+                              );
+                            } else {
+                              setSortBy("name");
+                              setSortOrder("asc");
+                            }
+                          }}
+                        >
+                          Name{" "}
+                          {sortBy === "name" &&
+                            (sortOrder === "asc" ? "↑" : "↓")}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            if (sortBy === "type") {
+                              setSortOrder(
+                                sortOrder === "asc" ? "desc" : "asc"
+                              );
+                            } else {
+                              setSortBy("type");
+                              setSortOrder("asc");
+                            }
+                          }}
+                        >
+                          Type{" "}
+                          {sortBy === "type" &&
+                            (sortOrder === "asc" ? "↑" : "↓")}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            if (sortBy === "duration") {
+                              setSortOrder(
+                                sortOrder === "asc" ? "desc" : "asc"
+                              );
+                            } else {
+                              setSortBy("duration");
+                              setSortOrder("asc");
+                            }
+                          }}
+                        >
+                          Duration{" "}
+                          {sortBy === "duration" &&
+                            (sortOrder === "asc" ? "↑" : "↓")}
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                          onClick={() => {
+                            if (sortBy === "size") {
+                              setSortOrder(
+                                sortOrder === "asc" ? "desc" : "asc"
+                              );
+                            } else {
+                              setSortBy("size");
+                              setSortOrder("asc");
+                            }
+                          }}
+                        >
+                          File Size{" "}
+                          {sortBy === "size" &&
+                            (sortOrder === "asc" ? "↑" : "↓")}
+                        </DropdownMenuItem>
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                    <TooltipContent>
+                      <p>
+                        Sort by {sortBy} (
+                        {sortOrder === "asc" ? "ascending" : "descending"})
+                      </p>
+                    </TooltipContent>
+                  </Tooltip>
+                </Tooltip>
+              </TooltipProvider>
+            </div>
           </div>
         </div>
 
-        <ScrollArea className="h-full">
-          <div className="flex-1 p-3 pt-0">
+        <div className="h-full w-full overflow-y-auto scrollbar-thin">
+          <div className="flex-1 p-3 pt-0 w-full">
             {isDragOver || filteredMediaItems.length === 0 ? (
               <MediaDragOverlay
                 isVisible={true}
@@ -252,50 +444,105 @@ export function MediaView() {
                 onClick={handleFileSelect}
                 isEmptyState={filteredMediaItems.length === 0 && !isDragOver}
               />
+            ) : mediaViewMode === "grid" ? (
+              <GridView
+                filteredMediaItems={filteredMediaItems}
+                renderPreview={renderPreview}
+                handleRemove={handleRemove}
+              />
             ) : (
-              <div
-                className="grid gap-2"
-                style={{
-                  gridTemplateColumns: "repeat(auto-fill, 160px)",
-                }}
-              >
-                {/* Render each media item as a draggable button */}
-                {filteredMediaItems.map((item) => (
-                  <ContextMenu key={item.id}>
-                    <ContextMenuTrigger>
-                      <DraggableMediaItem
-                        name={item.name}
-                        preview={renderPreview(item)}
-                        dragData={{
-                          id: item.id,
-                          type: item.type,
-                          name: item.name,
-                        }}
-                        showPlusOnDrag={false}
-                        onAddToTimeline={(currentTime) =>
-                          useTimelineStore
-                            .getState()
-                            .addMediaAtTime(item, currentTime)
-                        }
-                        rounded={false}
-                      />
-                    </ContextMenuTrigger>
-                    <ContextMenuContent>
-                      <ContextMenuItem>Export clips</ContextMenuItem>
-                      <ContextMenuItem
-                        variant="destructive"
-                        onClick={(e) => handleRemove(e, item.id)}
-                      >
-                        Delete
-                      </ContextMenuItem>
-                    </ContextMenuContent>
-                  </ContextMenu>
-                ))}
-              </div>
+              <ListView
+                filteredMediaItems={filteredMediaItems}
+                renderPreview={renderPreview}
+                handleRemove={handleRemove}
+                formatDuration={formatDuration}
+              />
             )}
           </div>
-        </ScrollArea>
+        </div>
       </div>
     </>
   );
 }
+
+function GridView({
+  filteredMediaItems,
+  renderPreview,
+  handleRemove,
+}: {
+  filteredMediaItems: MediaItem[];
+  renderPreview: (item: MediaItem) => React.ReactNode;
+  handleRemove: (e: React.MouseEvent, id: string) => Promise<void>;
+}) {
+  return (
+    <div
+      className="grid gap-2"
+      style={{
+        gridTemplateColumns: "repeat(auto-fill, 160px)",
+      }}
+    >
+      {filteredMediaItems.map((item) => (
+        <MediaItemWithContextMenu
+          key={item.id}
+          item={item}
+          onRemove={handleRemove}
+        >
+          <DraggableMediaItem
+            name={item.name}
+            preview={renderPreview(item)}
+            dragData={{
+              id: item.id,
+              type: item.type,
+              name: item.name,
+            }}
+            showPlusOnDrag={false}
+            onAddToTimeline={(currentTime) =>
+              useTimelineStore.getState().addMediaAtTime(item, currentTime)
+            }
+            rounded={false}
+            variant="card"
+          />
+        </MediaItemWithContextMenu>
+      ))}
+    </div>
+  );
+}
+
+function ListView({
+  filteredMediaItems,
+  renderPreview,
+  handleRemove,
+  formatDuration,
+}: {
+  filteredMediaItems: MediaItem[];
+  renderPreview: (item: MediaItem) => React.ReactNode;
+  handleRemove: (e: React.MouseEvent, id: string) => Promise<void>;
+  formatDuration: (duration: number) => string;
+}) {
+  return (
+    <div className="space-y-1">
+      {filteredMediaItems.map((item) => (
+        <MediaItemWithContextMenu
+          key={item.id}
+          item={item}
+          onRemove={handleRemove}
+        >
+          <DraggableMediaItem
+            name={item.name}
+            preview={renderPreview(item)}
+            dragData={{
+              id: item.id,
+              type: item.type,
+              name: item.name,
+            }}
+            showPlusOnDrag={false}
+            onAddToTimeline={(currentTime) =>
+              useTimelineStore.getState().addMediaAtTime(item, currentTime)
+            }
+            variant="compact"
+          />
+        </MediaItemWithContextMenu>
+      ))}
+    </div>
+  );
+}

apps/web/src/components/editor/media-panel/views/settings.tsx

@@ -0,0 +1,305 @@
+"use client";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Separator } from "@/components/ui/separator";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  PropertyItem,
+  PropertyItemLabel,
+  PropertyItemValue,
+  PropertyGroup,
+} from "../../properties-panel/property-item";
+import { FPS_PRESETS } from "@/constants/timeline-constants";
+import { useProjectStore } from "@/stores/project-store";
+import { useEditorStore } from "@/stores/editor-store";
+import { useAspectRatio } from "@/hooks/use-aspect-ratio";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+import { colors } from "@/data/colors/solid";
+import { patternCraftGradients } from "@/data/colors/pattern-craft";
+import { PipetteIcon } from "lucide-react";
+import { useMemo, memo, useCallback } from "react";
+import { syntaxUIGradients } from "@/data/colors/syntax-ui";
+
+export function SettingsView() {
+  return <ProjectSettingsTabs />;
+}
+
+function ProjectSettingsTabs() {
+  return (
+    <div className="h-full flex flex-col">
+      <Tabs defaultValue="project-info" className="flex flex-col h-full">
+        <div className="px-3 pt-4 pb-0">
+          <TabsList>
+            <TabsTrigger value="project-info">Project info</TabsTrigger>
+            <TabsTrigger value="background">Background</TabsTrigger>
+          </TabsList>
+        </div>
+        <Separator className="my-4" />
+        <ScrollArea className="flex-1">
+          <TabsContent value="project-info" className="p-5 pt-0 mt-0">
+            <ProjectInfoView />
+          </TabsContent>
+          <TabsContent value="background" className="p-4 pt-0">
+            <BackgroundView />
+          </TabsContent>
+        </ScrollArea>
+      </Tabs>
+    </div>
+  );
+}
+
+function ProjectInfoView() {
+  const { activeProject, updateProjectFps } = useProjectStore();
+  const { canvasPresets, setCanvasSize } = useEditorStore();
+  const { getDisplayName } = useAspectRatio();
+
+  const handleAspectRatioChange = (value: string) => {
+    const preset = canvasPresets.find((p) => p.name === value);
+    if (preset) {
+      setCanvasSize({ width: preset.width, height: preset.height });
+    }
+  };
+
+  const handleFpsChange = (value: string) => {
+    const fps = parseFloat(value);
+    updateProjectFps(fps);
+  };
+
+  return (
+    <div className="flex flex-col gap-4">
+      <PropertyItem direction="column">
+        <PropertyItemLabel>Name</PropertyItemLabel>
+        <PropertyItemValue>
+          {activeProject?.name || "Untitled project"}
+        </PropertyItemValue>
+      </PropertyItem>
+
+      <PropertyItem direction="column">
+        <PropertyItemLabel>Aspect ratio</PropertyItemLabel>
+        <PropertyItemValue>
+          <Select
+            value={getDisplayName()}
+            onValueChange={handleAspectRatioChange}
+          >
+            <SelectTrigger className="bg-panel-accent">
+              <SelectValue placeholder="Select an aspect ratio" />
+            </SelectTrigger>
+            <SelectContent>
+              {canvasPresets.map((preset) => (
+                <SelectItem key={preset.name} value={preset.name}>
+                  {preset.name}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </PropertyItemValue>
+      </PropertyItem>
+
+      <PropertyItem direction="column">
+        <PropertyItemLabel>Frame rate</PropertyItemLabel>
+        <PropertyItemValue>
+          <Select
+            value={(activeProject?.fps || 30).toString()}
+            onValueChange={handleFpsChange}
+          >
+            <SelectTrigger className="bg-panel-accent">
+              <SelectValue placeholder="Select a frame rate" />
+            </SelectTrigger>
+            <SelectContent>
+              {FPS_PRESETS.map((preset) => (
+                <SelectItem key={preset.value} value={preset.value}>
+                  {preset.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </PropertyItemValue>
+      </PropertyItem>
+    </div>
+  );
+}
+
+const BlurPreview = memo(
+  ({
+    blur,
+    isSelected,
+    onSelect,
+  }: {
+    blur: { label: string; value: number };
+    isSelected: boolean;
+    onSelect: () => void;
+  }) => (
+    <div
+      className={cn(
+        "w-full aspect-square rounded-sm cursor-pointer border border-foreground/15 hover:border-primary relative overflow-hidden",
+        isSelected && "border-2 border-primary"
+      )}
+      onClick={onSelect}
+    >
+      <Image
+        src="https://images.unsplash.com/photo-1501785888041-af3ef285b470?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt={`Blur preview ${blur.label}`}
+        fill
+        className="object-cover"
+        style={{ filter: `blur(${blur.value}px)` }}
+        loading="eager"
+      />
+      <div className="absolute bottom-1 left-1 right-1 text-center">
+        <span className="text-xs text-white bg-black/50 px-1 rounded">
+          {blur.label}
+        </span>
+      </div>
+    </div>
+  )
+);
+
+BlurPreview.displayName = "BlurPreview";
+
+const BackgroundPreviews = memo(
+  ({
+    backgrounds,
+    currentBackgroundColor,
+    isColorBackground,
+    handleColorSelect,
+    useBackgroundColor = false,
+  }: {
+    backgrounds: string[];
+    currentBackgroundColor: string;
+    isColorBackground: boolean;
+    handleColorSelect: (bg: string) => void;
+    useBackgroundColor?: boolean;
+  }) => {
+    return useMemo(
+      () =>
+        backgrounds.map((bg) => (
+          <div
+            key={bg}
+            className={cn(
+              "w-full aspect-square rounded-sm cursor-pointer border border-foreground/15 hover:border-primary",
+              isColorBackground &&
+                bg === currentBackgroundColor &&
+                "border-2 border-primary"
+            )}
+            style={
+              useBackgroundColor
+                ? { backgroundColor: bg }
+                : {
+                    background: bg,
+                    backgroundSize: "cover",
+                    backgroundPosition: "center",
+                    backgroundRepeat: "no-repeat",
+                  }
+            }
+            onClick={() => handleColorSelect(bg)}
+          />
+        )),
+      [
+        backgrounds,
+        isColorBackground,
+        currentBackgroundColor,
+        handleColorSelect,
+        useBackgroundColor,
+      ]
+    );
+  }
+);
+
+BackgroundPreviews.displayName = "BackgroundPreviews";
+
+function BackgroundView() {
+  const { activeProject, updateBackgroundType } = useProjectStore();
+
+  const blurLevels = useMemo(
+    () => [
+      { label: "Light", value: 4 },
+      { label: "Medium", value: 8 },
+      { label: "Heavy", value: 18 },
+    ],
+    []
+  );
+
+  const handleBlurSelect = useCallback(
+    async (blurIntensity: number) => {
+      await updateBackgroundType("blur", { blurIntensity });
+    },
+    [updateBackgroundType]
+  );
+
+  const handleColorSelect = useCallback(
+    async (color: string) => {
+      await updateBackgroundType("color", { backgroundColor: color });
+    },
+    [updateBackgroundType]
+  );
+
+  const currentBlurIntensity = activeProject?.blurIntensity || 8;
+  const isBlurBackground = activeProject?.backgroundType === "blur";
+  const currentBackgroundColor = activeProject?.backgroundColor || "#000000";
+  const isColorBackground = activeProject?.backgroundType === "color";
+
+  const blurPreviews = useMemo(
+    () =>
+      blurLevels.map((blur) => (
+        <BlurPreview
+          key={blur.value}
+          blur={blur}
+          isSelected={isBlurBackground && currentBlurIntensity === blur.value}
+          onSelect={() => handleBlurSelect(blur.value)}
+        />
+      )),
+    [blurLevels, isBlurBackground, currentBlurIntensity, handleBlurSelect]
+  );
+
+  return (
+    <div className="flex flex-col gap-5">
+      <PropertyGroup title="Blur" defaultExpanded={false}>
+        <div className="grid grid-cols-4 gap-2 w-full">{blurPreviews}</div>
+      </PropertyGroup>
+
+      <PropertyGroup title="Colors" defaultExpanded={false}>
+        <div className="grid grid-cols-4 gap-2 w-full">
+          <div className="w-full aspect-square rounded-sm cursor-pointer border border-foreground/15 hover:border-primary flex items-center justify-center">
+            <PipetteIcon className="size-4" />
+          </div>
+          <BackgroundPreviews
+            backgrounds={colors}
+            currentBackgroundColor={currentBackgroundColor}
+            isColorBackground={isColorBackground}
+            handleColorSelect={handleColorSelect}
+            useBackgroundColor={true}
+          />
+        </div>
+      </PropertyGroup>
+
+      <PropertyGroup title="Pattern Craft" defaultExpanded={false}>
+        <div className="grid grid-cols-4 gap-2 w-full">
+          <BackgroundPreviews
+            backgrounds={patternCraftGradients}
+            currentBackgroundColor={currentBackgroundColor}
+            isColorBackground={isColorBackground}
+            handleColorSelect={handleColorSelect}
+          />
+        </div>
+      </PropertyGroup>
+
+      <PropertyGroup title="Syntax UI" defaultExpanded={false}>
+        <div className="grid grid-cols-4 gap-2 w-full">
+          <BackgroundPreviews
+            backgrounds={syntaxUIGradients}
+            currentBackgroundColor={currentBackgroundColor}
+            isColorBackground={isColorBackground}
+            handleColorSelect={handleColorSelect}
+          />
+        </div>
+      </PropertyGroup>
+    </div>
+  );
+}

apps/web/src/components/editor/media-panel/views/sounds.tsx

@@ -0,0 +1,500 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { useState, useMemo, useRef, useEffect } from "react";
+import { Separator } from "@/components/ui/separator";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import {
+  PlayIcon,
+  PauseIcon,
+  HeartIcon,
+  PlusIcon,
+  ListFilter,
+} from "lucide-react";
+import { useSoundsStore } from "@/stores/sounds-store";
+import { useSoundSearch } from "@/hooks/use-sound-search";
+import type { SoundEffect, SavedSound } from "@/types/sounds";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuCheckboxItem,
+} from "@/components/ui/dropdown-menu";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+
+export function SoundsView() {
+  return (
+    <div className="h-full flex flex-col">
+      <Tabs defaultValue="sound-effects" className="flex flex-col h-full">
+        <div className="px-3 pt-4 pb-0">
+          <TabsList>
+            <TabsTrigger value="sound-effects">Sound effects</TabsTrigger>
+            <TabsTrigger value="songs">Songs</TabsTrigger>
+            <TabsTrigger value="saved">Saved</TabsTrigger>
+          </TabsList>
+        </div>
+        <Separator className="my-4" />
+        <TabsContent
+          value="sound-effects"
+          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+        >
+          <SoundEffectsView />
+        </TabsContent>
+        <TabsContent
+          value="saved"
+          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+        >
+          <SavedSoundsView />
+        </TabsContent>
+        <TabsContent
+          value="songs"
+          className="p-5 pt-0 mt-0 flex-1 flex flex-col min-h-0"
+        >
+          <SongsView />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}
+
+function SoundEffectsView() {
+  const {
+    topSoundEffects,
+    isLoading,
+    searchQuery,
+    setSearchQuery,
+    scrollPosition,
+    setScrollPosition,
+    loadSavedSounds,
+    isSoundSaved,
+    toggleSavedSound,
+    showCommercialOnly,
+    toggleCommercialFilter,
+  } = useSoundsStore();
+  const {
+    results: searchResults,
+    isLoading: isSearching,
+    loadMore,
+    hasNextPage,
+    isLoadingMore,
+  } = useSoundSearch(searchQuery, showCommercialOnly);
+
+  // Audio playback state
+  const [playingId, setPlayingId] = useState<number | null>(null);
+  const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
+    null
+  );
+
+  // Scroll position persistence
+  const scrollAreaRef = useRef<HTMLDivElement>(null);
+
+  // Load saved sounds and restore scroll position when component mounts
+  useEffect(() => {
+    loadSavedSounds();
+
+    if (scrollAreaRef.current && scrollPosition > 0) {
+      const timeoutId = setTimeout(() => {
+        scrollAreaRef.current?.scrollTo({ top: scrollPosition });
+      }, 100); // Small delay to ensure content is rendered
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, []); // Only run on mount
+
+  // Track scroll position changes and handle infinite scroll
+  const handleScroll = (event: React.UIEvent<HTMLDivElement>) => {
+    const { scrollTop, scrollHeight, clientHeight } = event.currentTarget;
+    setScrollPosition(scrollTop);
+
+    // Trigger loadMore when scrolled to within 200px of bottom
+    const nearBottom = scrollTop + clientHeight >= scrollHeight - 200;
+    if (nearBottom && hasNextPage && !isLoadingMore && !isSearching) {
+      loadMore();
+    }
+  };
+
+  // Use your existing design, just swap the data source
+  const displayedSounds = useMemo(() => {
+    const sounds = searchQuery ? searchResults : topSoundEffects;
+    return sounds;
+  }, [searchQuery, searchResults, topSoundEffects]);
+
+  const playSound = (sound: SoundEffect) => {
+    if (playingId === sound.id) {
+      audioElement?.pause();
+      setPlayingId(null);
+      return;
+    }
+
+    // Stop previous sound
+    audioElement?.pause();
+
+    if (sound.previewUrl) {
+      const audio = new Audio(sound.previewUrl);
+      audio.addEventListener("ended", () => {
+        setPlayingId(null);
+      });
+      audio.addEventListener("error", (e) => {
+        setPlayingId(null);
+      });
+      audio.play().catch((error) => {
+        setPlayingId(null);
+      });
+
+      setAudioElement(audio);
+      setPlayingId(sound.id);
+    }
+  };
+
+  return (
+    <div className="flex flex-col gap-5 mt-1 h-full">
+      <div className="flex items-center gap-3">
+        <Input
+          placeholder="Search sound effects"
+          className="bg-panel-accent w-full"
+          containerClassName="w-full"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          showClearIcon
+          onClear={() => setSearchQuery("")}
+        />
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="text"
+              size="icon"
+              className={cn(showCommercialOnly && "text-primary")}
+            >
+              <ListFilter className="w-4 h-4" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end" className="w-56">
+            <DropdownMenuCheckboxItem
+              checked={showCommercialOnly}
+              onCheckedChange={toggleCommercialFilter}
+            >
+              Show only commercially licensed
+            </DropdownMenuCheckboxItem>
+            <div className="px-2 py-1.5 text-xs text-muted-foreground">
+              {showCommercialOnly
+                ? "Only showing sounds licensed for commercial use"
+                : "Showing all sounds regardless of license"}
+            </div>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+
+      <div className="relative h-full overflow-hidden">
+        <ScrollArea
+          className="flex-1 h-full"
+          ref={scrollAreaRef}
+          onScrollCapture={handleScroll}
+        >
+          <div className="flex flex-col gap-4">
+            {isLoading && !searchQuery && (
+              <div className="text-muted-foreground text-sm">
+                Loading sounds...
+              </div>
+            )}
+            {isSearching && searchQuery && (
+              <div className="text-muted-foreground text-sm">Searching...</div>
+            )}
+            {displayedSounds.map((sound) => (
+              <AudioItem
+                key={sound.id}
+                sound={sound}
+                isPlaying={playingId === sound.id}
+                onPlay={() => playSound(sound)}
+                isSaved={isSoundSaved(sound.id)}
+                onToggleSaved={() => toggleSavedSound(sound)}
+              />
+            ))}
+            {!isLoading && !isSearching && displayedSounds.length === 0 && (
+              <div className="text-muted-foreground text-sm">
+                {searchQuery ? "No sounds found" : "No sounds available"}
+              </div>
+            )}
+            {isLoadingMore && (
+              <div className="text-muted-foreground text-sm text-center py-4">
+                Loading more sounds...
+              </div>
+            )}
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+}
+
+function SavedSoundsView() {
+  const {
+    savedSounds,
+    isLoadingSavedSounds,
+    savedSoundsError,
+    loadSavedSounds,
+    isSoundSaved,
+    toggleSavedSound,
+    clearSavedSounds,
+  } = useSoundsStore();
+
+  // Audio playback state
+  const [playingId, setPlayingId] = useState<number | null>(null);
+  const [audioElement, setAudioElement] = useState<HTMLAudioElement | null>(
+    null
+  );
+
+  // Clear confirmation dialog state
+  const [showClearDialog, setShowClearDialog] = useState(false);
+
+  // Load saved sounds when tab becomes active
+  useEffect(() => {
+    loadSavedSounds();
+  }, [loadSavedSounds]);
+
+  const playSound = (sound: SavedSound) => {
+    if (playingId === sound.id) {
+      audioElement?.pause();
+      setPlayingId(null);
+      return;
+    }
+
+    // Stop previous sound
+    audioElement?.pause();
+
+    if (sound.previewUrl) {
+      const audio = new Audio(sound.previewUrl);
+      audio.addEventListener("ended", () => {
+        setPlayingId(null);
+      });
+      audio.addEventListener("error", (e) => {
+        setPlayingId(null);
+      });
+      audio.play().catch((error) => {
+        setPlayingId(null);
+      });
+
+      setAudioElement(audio);
+      setPlayingId(sound.id);
+    }
+  };
+
+  // Convert SavedSound to SoundEffect for compatibility with AudioItem
+  const convertToSoundEffect = (savedSound: SavedSound): SoundEffect => ({
+    id: savedSound.id,
+    name: savedSound.name,
+    description: "",
+    url: "",
+    previewUrl: savedSound.previewUrl,
+    downloadUrl: savedSound.downloadUrl,
+    duration: savedSound.duration,
+    filesize: 0,
+    type: "audio",
+    channels: 0,
+    bitrate: 0,
+    bitdepth: 0,
+    samplerate: 0,
+    username: savedSound.username,
+    tags: savedSound.tags,
+    license: savedSound.license,
+    created: savedSound.savedAt,
+    downloads: 0,
+    rating: 0,
+    ratingCount: 0,
+  });
+
+  if (isLoadingSavedSounds) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-muted-foreground text-sm">
+          Loading saved sounds...
+        </div>
+      </div>
+    );
+  }
+
+  if (savedSoundsError) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-destructive text-sm">
+          Error: {savedSoundsError}
+        </div>
+      </div>
+    );
+  }
+
+  if (savedSounds.length === 0) {
+    return (
+      <div className="bg-panel h-full p-4 flex flex-col items-center justify-center gap-3">
+        <HeartIcon
+          className="w-10 h-10 text-muted-foreground"
+          strokeWidth={1.5}
+        />
+        <div className="flex flex-col gap-2 text-center">
+          <p className="text-lg font-medium">No saved sounds</p>
+          <p className="text-sm text-muted-foreground text-balance">
+            Click the heart icon on any sound to save it here
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-5 mt-1 h-full">
+      <div className="flex items-center justify-between">
+        <p className="text-sm text-muted-foreground">
+          {savedSounds.length} saved{" "}
+          {savedSounds.length === 1 ? "sound" : "sounds"}
+        </p>
+        <Dialog open={showClearDialog} onOpenChange={setShowClearDialog}>
+          <DialogTrigger asChild>
+            <Button
+              variant="text"
+              size="sm"
+              className="h-auto text-muted-foreground hover:text-destructive !opacity-100"
+            >
+              Clear all
+            </Button>
+          </DialogTrigger>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Clear all saved sounds?</DialogTitle>
+              <DialogDescription>
+                This will permanently remove all {savedSounds.length} saved
+                sounds from your collection. This action cannot be undone.
+              </DialogDescription>
+            </DialogHeader>
+            <DialogFooter>
+              <Button variant="text" onClick={() => setShowClearDialog(false)}>
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={async () => {
+                  await clearSavedSounds();
+                  setShowClearDialog(false);
+                }}
+              >
+                Clear all sounds
+              </Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      <div className="relative h-full overflow-hidden">
+        <ScrollArea className="flex-1 h-full">
+          <div className="flex flex-col gap-4">
+            {savedSounds.map((sound) => (
+              <AudioItem
+                key={sound.id}
+                sound={convertToSoundEffect(sound)}
+                isPlaying={playingId === sound.id}
+                onPlay={() => playSound(sound)}
+                isSaved={isSoundSaved(sound.id)}
+                onToggleSaved={() =>
+                  toggleSavedSound(convertToSoundEffect(sound))
+                }
+              />
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    </div>
+  );
+}
+
+function SongsView() {
+  return <div>Songs</div>;
+}
+
+interface AudioItemProps {
+  sound: SoundEffect;
+  isPlaying: boolean;
+  onPlay: () => void;
+  isSaved: boolean;
+  onToggleSaved: () => void;
+}
+
+function AudioItem({
+  sound,
+  isPlaying,
+  onPlay,
+  isSaved,
+  onToggleSaved,
+}: AudioItemProps) {
+  const { addSoundToTimeline } = useSoundsStore();
+
+  const handleClick = () => {
+    onPlay();
+  };
+
+  const handleSaveClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onToggleSaved();
+  };
+
+  const handleAddToTimeline = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    await addSoundToTimeline(sound);
+  };
+
+  return (
+    <div
+      className="group flex items-center gap-3 opacity-100 hover:opacity-75 transition-opacity cursor-pointer"
+      onClick={handleClick}
+    >
+      <div className="relative w-12 h-12 bg-accent rounded-md flex items-center justify-center overflow-hidden shrink-0">
+        <div className="absolute inset-0 bg-gradient-to-br from-primary/20 to-transparent" />
+        {isPlaying ? (
+          <PauseIcon className="w-5 h-5" />
+        ) : (
+          <PlayIcon className="w-5 h-5" />
+        )}
+      </div>
+
+      <div className="flex-1 min-w-0 overflow-hidden">
+        <p className="font-medium truncate text-sm">{sound.name}</p>
+        <span className="text-xs text-muted-foreground truncate block">
+          {sound.username}
+        </span>
+      </div>
+
+      <div className="flex items-center gap-3 pr-2">
+        <Button
+          variant="text"
+          size="icon"
+          className="text-muted-foreground hover:text-foreground !opacity-100 w-auto"
+          onClick={handleAddToTimeline}
+          title="Add to timeline"
+        >
+          <PlusIcon className="w-4 h-4" />
+        </Button>
+        <Button
+          variant="text"
+          size="icon"
+          className={`hover:text-foreground !opacity-100 w-auto ${
+            isSaved
+              ? "text-red-500 hover:text-red-600"
+              : "text-muted-foreground"
+          }`}
+          onClick={handleSaveClick}
+          title={isSaved ? "Remove from saved" : "Save sound"}
+        >
+          <HeartIcon className={`w-4 h-4 ${isSaved ? "fill-current" : ""}`} />
+        </Button>
+      </div>
+    </div>
+  );
+}

apps/web/src/components/editor/media-panel/views/text.tsx

@@ -32,7 +32,7 @@ export function TextView() {
       <DraggableMediaItem
         name="Default text"
         preview={
-          <div className="flex items-center justify-center w-full h-full bg-accent rounded">
+          <div className="flex items-center justify-center w-full h-full bg-panel-accent rounded">
             <span className="text-xs select-none">Default text</span>
           </div>
         }

apps/web/src/components/editor/preview-panel.tsx

@@ -5,24 +5,15 @@ import { TimelineElement, TimelineTrack } from "@/types/timeline";
 import { useMediaStore, type MediaItem } from "@/stores/media-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 import { useEditorStore } from "@/stores/editor-store";
-import { useAspectRatio } from "@/hooks/use-aspect-ratio";
 import { VideoPlayer } from "@/components/ui/video-player";
 import { AudioPlayer } from "@/components/ui/audio-player";
 import { Button } from "@/components/ui/button";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-  DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu";
 import { Play, Pause, Expand, SkipBack, SkipForward } from "lucide-react";
 import { useState, useRef, useEffect, useCallback } from "react";
 import { cn } from "@/lib/utils";
 import { formatTimeCode } from "@/lib/time";
 import { EditableTimecode } from "@/components/ui/editable-timecode";
 import { FONT_CLASS_MAP } from "@/lib/font-config";
-import { BackgroundSettings } from "../background-settings";
 import { useProjectStore } from "@/stores/project-store";
 import { TextElementDragState } from "@/types/editor";
 
@@ -234,6 +225,7 @@ export function PreviewPanel() {
 
     tracks.forEach((track) => {
       track.elements.forEach((element) => {
+        if (element.hidden) return;
         const elementStart = element.startTime;
         const elementEnd =
           element.startTime +
@@ -389,7 +381,7 @@ export function PreviewPanel() {
               textDecoration: element.textDecoration,
               padding: "4px 8px",
               borderRadius: "2px",
-              whiteSpace: "nowrap",
+              whiteSpace: "pre-wrap",
               // Fallback for system fonts that don't have classes
               ...(fontClassName === "" && { fontFamily: element.fontFamily }),
             }}
@@ -407,11 +399,11 @@ export function PreviewPanel() {
         return (
           <div
             key={element.id}
-            className="absolute inset-0 bg-gradient-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
+            className="absolute inset-0 bg-linear-to-br from-blue-500/20 to-purple-500/20 flex items-center justify-center"
           >
             <div className="text-center">
               <div className="text-2xl mb-2">🎬</div>
-              <p className="text-xs text-white">{element.name}</p>
+              <p className="text-xs text-foreground">{element.name}</p>
             </div>
           </div>
         );
@@ -475,10 +467,10 @@ export function PreviewPanel() {
 
   return (
     <>
-      <div className="h-full w-full flex flex-col min-h-0 min-w-0 bg-panel rounded-sm">
+      <div className="h-full w-full flex flex-col min-h-0 min-w-0 bg-panel rounded-sm relative">
         <div
           ref={containerRef}
-          className="flex-1 flex flex-col items-center justify-center p-3 min-h-0 min-w-0"
+          className="flex-1 flex flex-col items-center justify-center min-h-0 min-w-0"
         >
           <div className="flex-1" />
           {hasAnyElements ? (
@@ -488,7 +480,7 @@ export function PreviewPanel() {
               style={{
                 width: previewDimensions.width,
                 height: previewDimensions.height,
-                backgroundColor:
+                background:
                   activeProject?.backgroundType === "blur"
                     ? "transparent"
                     : activeProject?.backgroundColor || "#000000",
@@ -620,9 +612,9 @@ function FullscreenToolbar({
   return (
     <div
       data-toolbar
-      className="flex items-center gap-2 p-1 pt-2 w-full text-white"
+      className="flex items-center gap-2 p-1 pt-2 w-full text-foreground relative"
     >
-      <div className="flex items-center gap-1 text-[0.70rem] tabular-nums text-white/90">
+      <div className="flex items-center gap-1 text-[0.70rem] tabular-nums text-foreground/90">
         <EditableTimecode
           time={currentTime}
           duration={totalDuration}
@@ -630,7 +622,7 @@ function FullscreenToolbar({
           fps={activeProject?.fps || 30}
           onTimeChange={seek}
           disabled={!hasAnyElements}
-          className="text-white/90 hover:bg-white/10"
+          className="text-foreground/90 hover:bg-white/10"
         />
         <span className="opacity-50">/</span>
         <span>
@@ -648,7 +640,7 @@ function FullscreenToolbar({
           size="icon"
           onClick={skipBackward}
           disabled={!hasAnyElements}
-          className="h-auto p-0 text-white hover:text-white/80"
+          className="h-auto p-0 text-foreground"
           title="Skip backward 1s"
         >
           <SkipBack className="h-3 w-3" />
@@ -658,7 +650,7 @@ function FullscreenToolbar({
           size="icon"
           onClick={toggle}
           disabled={!hasAnyElements}
-          className="h-auto p-0 text-white hover:text-white/80"
+          className="h-auto p-0 text-foreground hover:text-foreground/80"
         >
           {isPlaying ? (
             <Pause className="h-3 w-3" />
@@ -671,7 +663,7 @@ function FullscreenToolbar({
           size="icon"
           onClick={skipForward}
           disabled={!hasAnyElements}
-          className="h-auto p-0 text-white hover:text-white/80"
+          className="h-auto p-0 text-foreground hover:text-foreground/80"
           title="Skip forward 1s"
         >
           <SkipForward className="h-3 w-3" />
@@ -681,7 +673,7 @@ function FullscreenToolbar({
       <div className="flex-1 flex items-center gap-2">
         <div
           className={cn(
-            "relative h-1 rounded-full cursor-pointer flex-1 bg-white/20",
+            "relative h-1 rounded-full cursor-pointer flex-1 bg-foreground/20",
             !hasAnyElements && "opacity-50 cursor-not-allowed"
           )}
           onClick={hasAnyElements ? handleTimelineClick : undefined}
@@ -690,13 +682,13 @@ function FullscreenToolbar({
         >
           <div
             className={cn(
-              "absolute top-0 left-0 h-full rounded-full bg-white",
+              "absolute top-0 left-0 h-full rounded-full bg-foreground",
               !isDragging && "duration-100"
             )}
             style={{ width: `${progress}%` }}
           />
           <div
-            className="absolute top-1/2 w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 shadow-sm bg-white border border-black/20"
+            className="absolute top-1/2 w-3 h-3 rounded-full -translate-y-1/2 -translate-x-1/2 shadow-xs bg-foreground border border-black/20"
             style={{ left: `${progress}%` }}
           />
         </div>
@@ -705,11 +697,11 @@ function FullscreenToolbar({
       <Button
         variant="text"
         size="icon"
-        className="!size-4 text-white/80 hover:text-white"
+        className="size-4! text-foreground/80 hover:text-foreground"
         onClick={onToggleExpanded}
         title="Exit fullscreen (Esc)"
       >
-        <Expand className="!size-4" />
+        <Expand className="size-4!" />
       </Button>
     </div>
   );
@@ -743,14 +735,14 @@ function FullscreenPreview({
   getTotalDuration: () => number;
 }) {
   return (
-    <div className="fixed inset-0 z-[9999] flex flex-col">
+    <div className="fixed inset-0 z-9999 flex flex-col">
       <div className="flex-1 flex items-center justify-center bg-background">
         <div
           className="relative overflow-hidden border border-border m-3"
           style={{
             width: previewDimensions.width,
             height: previewDimensions.height,
-            backgroundColor:
+            background:
               activeProject?.backgroundType === "blur"
                 ? "#1a1a1a"
                 : activeProject?.backgroundColor || "#1a1a1a",
@@ -775,7 +767,7 @@ function FullscreenPreview({
             )}
         </div>
       </div>
-      <div className="p-4 bg-black">
+      <div className="p-4 bg-background">
         <FullscreenToolbar
           hasAnyElements={hasAnyElements}
           onToggleExpanded={toggleExpanded}
@@ -806,25 +798,7 @@ function PreviewToolbar({
   toggle: () => void;
   getTotalDuration: () => number;
 }) {
-  const { isPlaying, seek } = usePlaybackStore();
-  const { setCanvasSize, setCanvasSizeToOriginal } = useEditorStore();
-  const { activeProject } = useProjectStore();
-  const {
-    currentPreset,
-    isOriginal,
-    getOriginalAspectRatio,
-    getDisplayName,
-    canvasPresets,
-  } = useAspectRatio();
-
-  const handlePresetSelect = (preset: { width: number; height: number }) => {
-    setCanvasSize({ width: preset.width, height: preset.height });
-  };
-
-  const handleOriginalSelect = () => {
-    const aspectRatio = getOriginalAspectRatio();
-    setCanvasSizeToOriginal(aspectRatio);
-  };
+  const { isPlaying } = usePlaybackStore();
 
   if (isExpanded) {
     return (
@@ -844,88 +818,30 @@ function PreviewToolbar({
   return (
     <div
       data-toolbar
-      className="flex items-end justify-between gap-2 p-1 pt-2 w-full"
+      className="flex justify-between gap-2 px-1.5 pr-4 py-1.5 border border-border/50 w-auto absolute bottom-4 right-4 bg-black/20 rounded-full backdrop-blur-l text-white"
     >
-      <div>
-        <p
-          className={cn(
-            "text-[0.75rem] text-muted-foreground flex items-center gap-1 w-[10rem]",
-            !hasAnyElements && "opacity-50"
-          )}
-        >
-          <EditableTimecode
-            time={currentTime}
-            duration={getTotalDuration()}
-            format="HH:MM:SS:FF"
-            fps={activeProject?.fps || 30}
-            onTimeChange={seek}
-            disabled={!hasAnyElements}
-          />
-          <span className="opacity-50">/</span>
-          <span className="tabular-nums">
-            {formatTimeCode(
-              getTotalDuration(),
-              "HH:MM:SS:FF",
-              activeProject?.fps || 30
-            )}
-          </span>
-        </p>
-      </div>
-      <Button
-        variant="text"
-        size="icon"
-        onClick={toggle}
-        disabled={!hasAnyElements}
-        className="h-auto p-0"
-      >
-        {isPlaying ? (
-          <Pause className="h-3 w-3" />
-        ) : (
-          <Play className="h-3 w-3" />
-        )}
-      </Button>
-      <div className="flex items-center gap-3">
-        <BackgroundSettings />
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button
-              size="sm"
-              className="!bg-panel-accent text-foreground/85 text-[0.70rem] h-4 rounded-none border border-muted-foreground px-0.5 py-0 font-light"
-              disabled={!hasAnyElements}
-            >
-              {getDisplayName()}
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end">
-            <DropdownMenuItem
-              onClick={handleOriginalSelect}
-              className={cn("text-xs", isOriginal && "font-semibold")}
-            >
-              Original
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            {canvasPresets.map((preset) => (
-              <DropdownMenuItem
-                key={preset.name}
-                onClick={() => handlePresetSelect(preset)}
-                className={cn(
-                  "text-xs",
-                  currentPreset?.name === preset.name && "font-semibold"
-                )}
-              >
-                {preset.name}
-              </DropdownMenuItem>
-            ))}
-          </DropdownMenuContent>
-        </DropdownMenu>
+      <div className="flex items-center gap-2">
         <Button
           variant="text"
           size="icon"
-          className="!size-4 text-muted-foreground"
+          onClick={toggle}
+          disabled={!hasAnyElements}
+          className="h-auto p-0"
+        >
+          {isPlaying ? (
+            <Pause className="h-3 w-3" />
+          ) : (
+            <Play className="h-3 w-3" />
+          )}
+        </Button>
+        <Button
+          variant="text"
+          size="icon"
+          className="size-4!"
           onClick={onToggleExpanded}
           title="Enter fullscreen"
         >
-          <Expand className="!size-4" />
+          <Expand className="size-4!" />
         </Button>
       </div>
     </div>

apps/web/src/components/editor/properties-panel/index.tsx

@@ -1,95 +1,22 @@
 "use client";
 
-import { FPS_PRESETS } from "@/constants/timeline-constants";
-import { useAspectRatio } from "@/hooks/use-aspect-ratio";
 import { useMediaStore } from "@/stores/media-store";
-import { useProjectStore } from "@/stores/project-store";
 import { useTimelineStore } from "@/stores/timeline-store";
-import { Label } from "../../ui/label";
 import { ScrollArea } from "../../ui/scroll-area";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "../../ui/select";
 import { AudioProperties } from "./audio-properties";
 import { MediaProperties } from "./media-properties";
-import {
-  PropertyItem,
-  PropertyItemLabel,
-  PropertyItemValue,
-} from "./property-item";
 import { TextProperties } from "./text-properties";
+import { SquareSlashIcon } from "lucide-react";
 
 export function PropertiesPanel() {
-  const { activeProject, updateProjectFps } = useProjectStore();
-  const { getDisplayName, canvasSize } = useAspectRatio();
   const { selectedElements, tracks } = useTimelineStore();
   const { mediaItems } = useMediaStore();
 
-  const handleFpsChange = (value: string) => {
-    const fps = parseFloat(value);
-    if (!isNaN(fps) && fps > 0) {
-      updateProjectFps(fps);
-    }
-  };
-
-  const emptyView = (
-    <div className="space-y-4 p-5">
-      {/* Media Properties */}
-      <div className="flex flex-col gap-3">
-        <PropertyItem direction="column">
-          <PropertyItemLabel className="text-xs text-muted-foreground">
-            Name:
-          </PropertyItemLabel>
-          <PropertyItemValue className="text-xs truncate">
-            {activeProject?.name || ""}
-          </PropertyItemValue>
-        </PropertyItem>
-        <PropertyItem direction="column">
-          <PropertyItemLabel className="text-xs text-muted-foreground">
-            Aspect ratio:
-          </PropertyItemLabel>
-          <PropertyItemValue className="text-xs truncate">
-            {getDisplayName()}
-          </PropertyItemValue>
-        </PropertyItem>
-        <PropertyItem direction="column">
-          <PropertyItemLabel className="text-xs text-muted-foreground">
-            Resolution:
-          </PropertyItemLabel>
-          <PropertyItemValue className="text-xs truncate">
-            {`${canvasSize.width} × ${canvasSize.height}`}
-          </PropertyItemValue>
-        </PropertyItem>
-        <div className="flex flex-col gap-1">
-          <Label className="text-xs text-muted-foreground">Frame rate:</Label>
-          <Select
-            value={(activeProject?.fps || 30).toString()}
-            onValueChange={handleFpsChange}
-          >
-            <SelectTrigger className="w-32 h-6 text-xs">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {FPS_PRESETS.map(({ value, label }) => (
-                <SelectItem key={value} value={value} className="text-xs">
-                  {label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        </div>
-      </div>
-    </div>
-  );
-
   return (
-    <ScrollArea className="h-full bg-panel rounded-sm">
-      {selectedElements.length > 0
-        ? selectedElements.map(({ trackId, elementId }) => {
+    <>
+      {selectedElements.length > 0 ? (
+        <ScrollArea className="h-full bg-panel rounded-sm">
+          {selectedElements.map(({ trackId, elementId }) => {
             const track = tracks.find((t) => t.id === trackId);
             const element = track?.elements.find((e) => e.id === elementId);
 
@@ -116,8 +43,28 @@ export function PropertiesPanel() {
               );
             }
             return null;
-          })
-        : emptyView}
-    </ScrollArea>
+          })}
+        </ScrollArea>
+      ) : (
+        <EmptyView />
+      )}
+    </>
+  );
+}
+
+function EmptyView() {
+  return (
+    <div className="bg-panel h-full p-4 flex flex-col items-center justify-center gap-3">
+      <SquareSlashIcon
+        className="w-10 h-10 text-muted-foreground"
+        strokeWidth={1.5}
+      />
+      <div className="flex flex-col gap-2 text-center">
+        <p className="text-lg font-medium">It’s empty here</p>
+        <p className="text-sm text-muted-foreground text-balance">
+          Click an element on the timeline to edit its properties
+        </p>
+      </div>
+    </div>
   );
 }

apps/web/src/components/editor/properties-panel/property-item.tsx

@@ -1,4 +1,6 @@
 import { cn } from "@/lib/utils";
+import { ChevronDown } from "lucide-react";
+import { useState } from "react";
 
 interface PropertyItemProps {
   direction?: "row" | "column";
@@ -17,7 +19,7 @@ export function PropertyItem({
         "flex gap-2",
         direction === "row"
           ? "items-center justify-between gap-6"
-          : "flex-col gap-1",
+          : "flex-col gap-1.5",
         className
       )}
     >
@@ -33,7 +35,11 @@ export function PropertyItemLabel({
   children: React.ReactNode;
   className?: string;
 }) {
-  return <label className={cn("text-xs", className)}>{children}</label>;
+  return (
+    <label className={cn("text-xs text-muted-foreground", className)}>
+      {children}
+    </label>
+  );
 }
 
 export function PropertyItemValue({
@@ -43,5 +49,36 @@ export function PropertyItemValue({
   children: React.ReactNode;
   className?: string;
 }) {
-  return <div className={cn("flex-1", className)}>{children}</div>;
+  return <div className={cn("flex-1 text-sm", className)}>{children}</div>;
+}
+
+interface PropertyGroupProps {
+  title: string;
+  children: React.ReactNode;
+  defaultExpanded?: boolean;
+  className?: string;
+}
+
+export function PropertyGroup({
+  title,
+  children,
+  defaultExpanded = true,
+  className,
+}: PropertyGroupProps) {
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+
+  return (
+    <PropertyItem direction="column" className={cn("gap-3", className)}>
+      <div
+        className="flex items-center gap-1.5 cursor-pointer"
+        onClick={() => setIsExpanded(!isExpanded)}
+      >
+        <PropertyItemLabel className="cursor-pointer">
+          {title}
+        </PropertyItemLabel>
+        <ChevronDown className={cn("size-3", !isExpanded && "-rotate-90")} />
+      </div>
+      {isExpanded && <PropertyItemValue>{children}</PropertyItemValue>}
+    </PropertyItem>
+  );
 }

apps/web/src/components/editor/properties-panel/text-properties.tsx

@@ -91,7 +91,7 @@ export function TextProperties({
       <Textarea
         placeholder="Name"
         defaultValue={element.content}
-        className="min-h-[4.5rem] resize-none bg-background/50"
+        className="min-h-18 resize-none bg-background/50"
         onChange={(e) =>
           updateTextElement(trackId, element.id, { content: e.target.value })
         }

apps/web/src/components/editor/selection-box.tsx

@@ -49,10 +49,7 @@ export function SelectionBox({
   return (
     <div
       ref={selectionBoxRef}
-      className="absolute pointer-events-none z-50"
-      style={{
-        backgroundColor: "hsl(var(--foreground) / 0.1)",
-      }}
+      className="absolute pointer-events-none z-50 bg-foreground/10"
     />
   );
 }

apps/web/src/components/editor/snap-indicator.tsx

@@ -65,7 +65,7 @@ export function SnapIndicator({
 
   return (
     <div
-      className="absolute pointer-events-none z-[90]"
+      className="absolute pointer-events-none z-90"
       style={{
         left: `${leftPosition}px`,
         top: 0,

apps/web/src/components/editor/timeline/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React from "react";
-import { ScrollArea } from "../../ui/scroll-area";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { Button } from "../../ui/button";
 import {
   Scissors,
@@ -21,6 +21,10 @@ import {
   Link,
   ZoomIn,
   ZoomOut,
+  Bookmark,
+  Eye,
+  MicOff,
+  Mic,
 } from "lucide-react";
 import {
   Tooltip,
@@ -545,7 +549,7 @@ export function Timeline() {
         {/* Timeline Header with Ruler */}
         <div className="flex bg-panel sticky top-0 z-10">
           {/* Track Labels Header */}
-          <div className="w-48 flex-shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2">
+          <div className="w-28 shrink-0 bg-panel border-r flex items-center justify-between px-3 py-2">
             {/* Empty space */}
             <span className="text-sm font-medium text-muted-foreground opacity-0">
               .
@@ -653,6 +657,30 @@ export function Timeline() {
                     );
                   }).filter(Boolean);
                 })()}
+
+                {/* Bookmark markers */}
+                {(() => {
+                  const { activeProject } = useProjectStore.getState();
+                  if (!activeProject?.bookmarks?.length) return null;
+
+                  return activeProject.bookmarks.map((bookmarkTime, i) => (
+                    <div
+                      key={`bookmark-${i}`}
+                      className="absolute top-0 h-10 w-0.5 !bg-primary cursor-pointer"
+                      style={{
+                        left: `${bookmarkTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
+                      }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        usePlaybackStore.getState().seek(bookmarkTime);
+                      }}
+                    >
+                      <div className="absolute top-[-1px] left-[-5px] text-primary">
+                        <Bookmark className="h-3 w-3 fill-primary" />
+                      </div>
+                    </div>
+                  ));
+                })()}
               </div>
             </ScrollArea>
           </div>
@@ -664,7 +692,7 @@ export function Timeline() {
           {tracks.length > 0 && (
             <div
               ref={trackLabelsRef}
-              className="w-48 flex-shrink-0 border-r border-black overflow-y-auto z-[200] bg-panel"
+              className="w-28 shrink-0 border-r overflow-y-auto z-100 bg-panel"
               data-track-labels
             >
               <ScrollArea className="w-full h-full" ref={trackLabelsScrollRef}>
@@ -672,17 +700,24 @@ export function Timeline() {
                   {tracks.map((track) => (
                     <div
                       key={track.id}
-                      className="flex items-center px-3 border-b border-muted/30 group bg-foreground/5"
+                      className="flex items-center px-3 group"
                       style={{ height: `${getTrackHeight(track.type)}px` }}
                     >
-                      <div className="flex items-center flex-1 min-w-0">
+                      <div className="flex items-center justify-end flex-1 min-w-0 gap-2">
+                        {track.muted ? (
+                          <MicOff
+                            className="h-4 w-4 text-destructive cursor-pointer"
+                            onClick={() => toggleTrackMute(track.id)}
+                          />
+                        ) : (
+                          <Mic
+                            className="h-4 w-4 text-muted-foreground cursor-pointer"
+                            onClick={() => toggleTrackMute(track.id)}
+                          />
+                        )}
+                        <Eye className="h-4 w-4 text-muted-foreground" />
                         <TrackIcon track={track} />
                       </div>
-                      {track.muted && (
-                        <span className="ml-2 text-xs text-red-500 font-semibold flex-shrink-0">
-                          Muted
-                        </span>
-                      )}
                     </div>
                   ))}
                 </div>
@@ -713,12 +748,7 @@ export function Timeline() {
               containerRef={tracksContainerRef}
               isActive={selectionBox?.isActive || false}
             />
-            <ScrollArea
-              className="w-full h-full"
-              ref={tracksScrollRef}
-              type="scroll"
-              showHorizontalScrollbar
-            >
+            <ScrollArea className="w-full h-full" ref={tracksScrollRef}>
               <div
                 className="relative flex-1"
                 style={{
@@ -737,7 +767,7 @@ export function Timeline() {
                       <ContextMenu key={track.id}>
                         <ContextMenuTrigger asChild>
                           <div
-                            className="absolute left-0 right-0 border-b border-muted/30 py-[0.05rem]"
+                            className="absolute left-0 right-0"
                             style={{
                               top: `${getCumulativeHeightBefore(
                                 tracks,
@@ -763,7 +793,7 @@ export function Timeline() {
                             />
                           </div>
                         </ContextMenuTrigger>
-                        <ContextMenuContent className="z-[200]">
+                        <ContextMenuContent className="z-200">
                           <ContextMenuItem
                             onClick={(e) => {
                               e.stopPropagation();
@@ -793,13 +823,13 @@ function TrackIcon({ track }: { track: TimelineTrack }) {
   return (
     <>
       {track.type === "media" && (
-        <Video className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
+        <Video className="w-4 h-4 shrink-0 text-muted-foreground" />
       )}
       {track.type === "text" && (
-        <TypeIcon className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
+        <TypeIcon className="w-4 h-4 shrink-0 text-muted-foreground" />
       )}
       {track.type === "audio" && (
-        <Music className="w-4 h-4 flex-shrink-0 text-muted-foreground" />
+        <Music className="w-4 h-4 shrink-0 text-muted-foreground" />
       )}
     </>
   );
@@ -832,6 +862,7 @@ function TimelineToolbar({
     toggleRippleEditing,
   } = useTimelineStore();
   const { currentTime, duration, isPlaying, toggle } = usePlaybackStore();
+  const { toggleBookmark, isBookmarked } = useProjectStore();
 
   // Action handlers
   const handleSplitSelected = () => {
@@ -961,6 +992,13 @@ function TimelineToolbar({
   const handleZoomSliderChange = (values: number[]) => {
     setZoomLevel(values[0]);
   };
+
+  const handleToggleBookmark = async () => {
+    await toggleBookmark(currentTime);
+  };
+
+  // Check if the current time is bookmarked
+  const currentBookmarked = isBookmarked(currentTime);
   return (
     <div className="border-b flex items-center justify-between px-2 py-1">
       <div className="flex items-center gap-1 w-full">
@@ -1108,6 +1146,19 @@ function TimelineToolbar({
             </TooltipTrigger>
             <TooltipContent>Delete element (Delete)</TooltipContent>
           </Tooltip>
+          <div className="w-px h-6 bg-border mx-1" />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="text" size="icon" onClick={handleToggleBookmark}>
+                <Bookmark
+                  className={`h-4 w-4 ${currentBookmarked ? "fill-primary text-primary" : ""}`}
+                />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {currentBookmarked ? "Remove bookmark" : "Add bookmark"}
+            </TooltipContent>
+          </Tooltip>
         </TooltipProvider>
       </div>
       <div className="flex items-center gap-1">
@@ -1141,6 +1192,8 @@ function TimelineToolbar({
             </TooltipContent>
           </Tooltip>
         </TooltipProvider>
+
+        <div className="h-6 w-px bg-border mx-1" />
         <div className="flex items-center gap-1">
           <Button variant="text" size="icon" onClick={handleZoomOut}>
             <ZoomOut className="h-4 w-4" />

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

@@ -1,41 +1,27 @@
 "use client";
 
-import { useState } from "react";
-import { Button } from "../../ui/button";
 import {
-  MoreVertical,
   Scissors,
   Trash2,
-  SplitSquareHorizontal,
-  Music,
-  ChevronRight,
-  ChevronLeft,
-  Type,
   Copy,
   RefreshCw,
+  EyeOff,
+  Eye,
+  Volume2,
+  VolumeX,
 } from "lucide-react";
 import { useMediaStore } from "@/stores/media-store";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { usePlaybackStore } from "@/stores/playback-store";
 import AudioWaveform from "../audio-waveform";
 import { toast } from "sonner";
-import { TimelineElementProps, TrackType } from "@/types/timeline";
+import { TimelineElementProps } from "@/types/timeline";
 import { useTimelineElementResize } from "@/hooks/use-timeline-element-resize";
 import {
   getTrackElementClasses,
   TIMELINE_CONSTANTS,
   getTrackHeight,
 } from "@/constants/timeline-constants";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-} from "../../ui/dropdown-menu";
 import {
   ContextMenu,
   ContextMenuContent,
@@ -60,30 +46,27 @@ export function TimelineElement({
     removeElementFromTrackWithRipple,
     dragState,
     splitElement,
-    splitAndKeepLeft,
-    splitAndKeepRight,
-    separateAudio,
     addElementToTrack,
     replaceElementMedia,
     rippleEditingEnabled,
+    toggleElementHidden,
   } = useTimelineStore();
   const { currentTime } = usePlaybackStore();
 
-  const [elementMenuOpen, setElementMenuOpen] = useState(false);
+  const mediaItem =
+    element.type === "media"
+      ? mediaItems.find((item) => item.id === element.mediaId)
+      : null;
+  const isAudio = mediaItem?.type === "audio";
 
-  const {
-    resizing,
-    isResizing,
-    handleResizeStart,
-    handleResizeMove,
-    handleResizeEnd,
-  } = useTimelineElementResize({
-    element,
-    track,
-    zoomLevel,
-    onUpdateTrim: updateElementTrim,
-    onUpdateDuration: updateElementDuration,
-  });
+  const { resizing, handleResizeStart, handleResizeMove, handleResizeEnd } =
+    useTimelineElementResize({
+      element,
+      track,
+      zoomLevel,
+      onUpdateTrim: updateElementTrim,
+      onUpdateDuration: updateElementDuration,
+    });
 
   const effectiveDuration =
     element.duration - element.trimStart - element.trimEnd;
@@ -141,6 +124,11 @@ export function TimelineElement({
     }
   };
 
+  const handleToggleElementHidden = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    toggleElementHidden(track.id, element.id);
+  };
+
   const handleReplaceClip = (e: React.MouseEvent) => {
     e.stopPropagation();
     if (element.type !== "media") {
@@ -177,9 +165,7 @@ export function TimelineElement({
     if (element.type === "text") {
       return (
         <div className="w-full h-full flex items-center justify-start pl-2">
-          <span className="text-xs text-foreground/80 truncate">
-            {element.content}
-          </span>
+          <span className="text-xs text-white truncate">{element.content}</span>
         </div>
       );
     }
@@ -196,86 +182,36 @@ export function TimelineElement({
 
     const TILE_ASPECT_RATIO = 16 / 9;
 
-    if (mediaItem.type === "image") {
+    if (
+      mediaItem.type === "image" ||
+      (mediaItem.type === "video" && mediaItem.thumbnailUrl)
+    ) {
       // Calculate tile size based on 16:9 aspect ratio
       const trackHeight = getTrackHeight(track.type);
-      const tileHeight = trackHeight - 8; // Account for padding
+      const tileHeight = trackHeight;
       const tileWidth = tileHeight * TILE_ASPECT_RATIO;
 
+      const imageUrl =
+        mediaItem.type === "image" ? mediaItem.url : mediaItem.thumbnailUrl;
+      const isImage = mediaItem.type === "image";
+
       return (
         <div className="w-full h-full flex items-center justify-center">
-          <div className="bg-[#004D52] py-3 w-full h-full relative">
-            {/* Background with tiled images */}
+          <div
+            className={`w-full h-full relative ${
+              isSelected ? "bg-primary" : "bg-transparent"
+            }`}
+          >
             <div
-              className="absolute top-3 bottom-3 left-0 right-0"
+              className={`absolute top-[0.15rem] bottom-[0.15rem] left-0 right-0`}
               style={{
-                backgroundImage: mediaItem.url
-                  ? `url(${mediaItem.url})`
-                  : "none",
+                backgroundImage: imageUrl ? `url(${imageUrl})` : "none",
                 backgroundRepeat: "repeat-x",
                 backgroundSize: `${tileWidth}px ${tileHeight}px`,
                 backgroundPosition: "left center",
                 pointerEvents: "none",
               }}
-              aria-label={`Tiled background of ${mediaItem.name}`}
-            />
-            {/* Overlay with vertical borders */}
-            <div
-              className="absolute top-3 bottom-3 left-0 right-0 pointer-events-none"
-              style={{
-                backgroundImage: `repeating-linear-gradient(
-                  to right,
-                  transparent 0px,
-                  transparent ${tileWidth - 1}px,
-                  rgba(255, 255, 255, 0.6) ${tileWidth - 1}px,
-                  rgba(255, 255, 255, 0.6) ${tileWidth}px
-                )`,
-                backgroundPosition: "left center",
-              }}
-            />
-          </div>
-        </div>
-      );
-    }
-
-    const VIDEO_TILE_PADDING = 16;
-    const OVERLAY_SPACE_MULTIPLIER = 1.5;
-
-    if (mediaItem.type === "video" && mediaItem.thumbnailUrl) {
-      const trackHeight = getTrackHeight(track.type);
-      const tileHeight = trackHeight - 8; // Match image padding
-      const tileWidth = tileHeight * TILE_ASPECT_RATIO;
-
-      return (
-        <div className="w-full h-full flex items-center justify-center">
-          <div className="bg-[#004D52] py-3 w-full h-full relative">
-            {/* Background with tiled thumbnails */}
-            <div
-              className="absolute top-3 bottom-3 left-0 right-0"
-              style={{
-                backgroundImage: mediaItem.thumbnailUrl
-                  ? `url(${mediaItem.thumbnailUrl})`
-                  : "none",
-                backgroundRepeat: "repeat-x",
-                backgroundSize: `${tileWidth}px ${tileHeight}px`,
-                backgroundPosition: "left center",
-                pointerEvents: "none",
-              }}
-              aria-label={`Tiled thumbnail of ${mediaItem.name}`}
-            />
-            {/* Overlay with vertical borders */}
-            <div
-              className="absolute top-3 bottom-3 left-0 right-0 pointer-events-none"
-              style={{
-                backgroundImage: `repeating-linear-gradient(
-                  to right,
-                  transparent 0px,
-                  transparent ${tileWidth - 1}px,
-                  rgba(255, 255, 255, 0.6) ${tileWidth - 1}px,
-                  rgba(255, 255, 255, 0.6) ${tileWidth}px
-                )`,
-                backgroundPosition: "left center",
-              }}
+              aria-label={`Tiled ${isImage ? "background" : "thumbnail"} of ${mediaItem.name}`}
             />
           </div>
         </div>
@@ -330,9 +266,9 @@ export function TimelineElement({
           <div
             className={`relative h-full rounded-[0.15rem] cursor-pointer overflow-hidden ${getTrackElementClasses(
               track.type
-            )} ${isSelected ? "border-b-[0.5px] border-t-[0.5px] border-foreground" : ""} ${
+            )} ${isSelected ? "" : ""} ${
               isBeingDragged ? "z-50" : "z-10"
-            }`}
+            } ${element.hidden ? "opacity-50" : ""}`}
             onClick={(e) => onElementClick && onElementClick(e, element)}
             onMouseDown={handleElementMouseDown}
             onContextMenu={(e) =>
@@ -343,14 +279,24 @@ export function TimelineElement({
               {renderElementContent()}
             </div>
 
+            {element.hidden && (
+              <div className="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center pointer-events-none">
+                {isAudio ? (
+                  <VolumeX className="h-6 w-6 text-white" />
+                ) : (
+                  <EyeOff className="h-6 w-6 text-white" />
+                )}
+              </div>
+            )}
+
             {isSelected && (
               <>
                 <div
-                  className="absolute left-0 top-0 bottom-0 w-1 cursor-w-resize bg-foreground z-50"
+                  className="absolute left-0 top-0 bottom-0 w-[0.2rem] cursor-w-resize bg-primary z-50"
                   onMouseDown={(e) => handleResizeStart(e, element.id, "left")}
                 />
                 <div
-                  className="absolute right-0 top-0 bottom-0 w-1 cursor-e-resize bg-foreground z-50"
+                  className="absolute right-0 top-0 bottom-0 w-[0.2rem] cursor-e-resize bg-primary z-50"
                   onMouseDown={(e) => handleResizeStart(e, element.id, "right")}
                 />
               </>
@@ -358,11 +304,34 @@ export function TimelineElement({
           </div>
         </div>
       </ContextMenuTrigger>
-      <ContextMenuContent className="z-[200]">
+      <ContextMenuContent className="z-200">
         <ContextMenuItem onClick={handleElementSplitContext}>
           <Scissors className="h-4 w-4 mr-2" />
           Split at playhead
         </ContextMenuItem>
+        <ContextMenuItem onClick={handleToggleElementHidden}>
+          {isAudio ? (
+            element.hidden ? (
+              <Volume2 className="h-4 w-4 mr-2" />
+            ) : (
+              <VolumeX className="h-4 w-4 mr-2" />
+            )
+          ) : element.hidden ? (
+            <Eye className="h-4 w-4 mr-2" />
+          ) : (
+            <EyeOff className="h-4 w-4 mr-2" />
+          )}
+          <span>
+            {isAudio
+              ? element.hidden
+                ? "Unmute"
+                : "Mute"
+              : element.hidden
+                ? "Show"
+                : "Hide"}{" "}
+            {element.type === "text" ? "text" : "clip"}
+          </span>
+        </ContextMenuItem>
         <ContextMenuItem onClick={handleElementDuplicateContext}>
           <Copy className="h-4 w-4 mr-2" />
           Duplicate {element.type === "text" ? "text" : "clip"}

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

@@ -70,7 +70,7 @@ export function TimelinePlayhead({
 
   // Use timeline container height minus a few pixels for breathing room
   const timelineContainerHeight = timelineRef.current?.offsetHeight || 400;
-  const totalHeight = timelineContainerHeight - 8; // 8px padding from edges
+  const totalHeight = timelineContainerHeight - 4;
 
   // Get dynamic track labels width, fallback to 0 if no tracks or no ref
   const trackLabelsWidth =
@@ -126,7 +126,7 @@ export function TimelinePlayhead({
   return (
     <div
       ref={playheadRef}
-      className="absolute pointer-events-auto z-[150]"
+      className="absolute pointer-events-auto z-150"
       style={{
         left: `${leftPosition}px`,
         top: 0,
@@ -137,12 +137,12 @@ export function TimelinePlayhead({
     >
       {/* The playhead line spanning full height */}
       <div
-        className={`absolute left-0 w-0.5 cursor-col-resize h-full ${isSnappingToPlayhead ? "bg-primary" : "bg-foreground"}`}
+        className={`absolute left-0 w-0.5 cursor-col-resize h-full ${isSnappingToPlayhead ? "bg-foreground" : "bg-foreground"}`}
       />
 
       {/* Playhead dot indicator at the top (in ruler area) */}
       <div
-        className={`absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 shadow-sm ${isSnappingToPlayhead ? "bg-primary border-primary" : "bg-foreground border-foreground"}`}
+        className={`absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 rounded-full border-2 shadow-xs ${isSnappingToPlayhead ? "bg-foreground border-foreground" : "bg-foreground border-foreground/50"}`}
       />
     </div>
   );

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

@@ -68,45 +68,51 @@ export function TimelineTrackContent({
     elementDuration: number,
     excludeElementId?: string
   ) => {
-    if (!snappingEnabled) {
-      // Use frame snapping if project has FPS, otherwise use decimal snapping
-      const projectStore = useProjectStore.getState();
-      const projectFps = projectStore.activeProject?.fps || 30;
-      return snapTimeToFrame(dropTime, projectFps);
+    // Always apply frame snapping first
+    const projectStore = useProjectStore.getState();
+    const projectFps = projectStore.activeProject?.fps || 30;
+    let finalTime = snapTimeToFrame(dropTime, projectFps);
+
+    // Additionally apply element snapping if enabled
+    if (snappingEnabled) {
+      // Try snapping both start and end edges for drops
+      const startSnapResult = snapElementEdge(
+        dropTime,
+        elementDuration,
+        tracks,
+        currentTime,
+        zoomLevel,
+        excludeElementId,
+        true // snap to start edge
+      );
+
+      const endSnapResult = snapElementEdge(
+        dropTime,
+        elementDuration,
+        tracks,
+        currentTime,
+        zoomLevel,
+        excludeElementId,
+        false // snap to end edge
+      );
+
+      // Choose the snap result with the smaller distance (closer snap)
+      let bestSnapResult = startSnapResult;
+      if (
+        endSnapResult.snapPoint &&
+        (!startSnapResult.snapPoint ||
+          endSnapResult.snapDistance < startSnapResult.snapDistance)
+      ) {
+        bestSnapResult = endSnapResult;
+      }
+
+      // Only use element snapping if it found a snap point, otherwise keep frame-snapped time
+      if (bestSnapResult.snapPoint) {
+        finalTime = bestSnapResult.snappedTime;
+      }
     }
 
-    // Try snapping both start and end edges for drops
-    const startSnapResult = snapElementEdge(
-      dropTime,
-      elementDuration,
-      tracks,
-      currentTime,
-      zoomLevel,
-      excludeElementId,
-      true // snap to start edge
-    );
-
-    const endSnapResult = snapElementEdge(
-      dropTime,
-      elementDuration,
-      tracks,
-      currentTime,
-      zoomLevel,
-      excludeElementId,
-      false // snap to end edge
-    );
-
-    // Choose the snap result with the smaller distance (closer snap)
-    let bestSnapResult = startSnapResult;
-    if (
-      endSnapResult.snapPoint &&
-      (!startSnapResult.snapPoint ||
-        endSnapResult.snapDistance < startSnapResult.snapDistance)
-    ) {
-      bestSnapResult = endSnapResult;
-    }
-
-    return bestSnapResult.snappedTime;
+    return finalTime;
   };
 
   const timelineRef = useRef<HTMLDivElement>(null);
@@ -148,9 +154,13 @@ export function TimelineTrackContent({
       );
       const adjustedTime = Math.max(0, mouseTime - dragState.clickOffsetTime);
 
-      // Apply snapping if enabled
-      let finalTime = adjustedTime;
+      // Always apply frame snapping first
+      const projectStore = useProjectStore.getState();
+      const projectFps = projectStore.activeProject?.fps || 30;
+      let finalTime = snapTimeToFrame(adjustedTime, projectFps);
       let snapPoint = null;
+
+      // Additionally apply element snapping if enabled
       if (snappingEnabled) {
         // Find the element being dragged to get its duration
         let elementDuration = 5; // fallback duration
@@ -196,18 +206,16 @@ export function TimelineTrackContent({
           bestSnapResult = endSnapResult;
         }
 
-        finalTime = bestSnapResult.snappedTime;
-        snapPoint = bestSnapResult.snapPoint;
+        // Only use element snapping if it found a snap point, otherwise keep frame-snapped time
+        if (bestSnapResult.snapPoint) {
+          finalTime = bestSnapResult.snappedTime;
+          snapPoint = bestSnapResult.snapPoint;
+        }
 
         // Notify parent component about snap point change
         onSnapPointChange?.(snapPoint);
       } else {
-        // Use frame snapping if project has FPS, otherwise use decimal snapping
-        const projectStore = useProjectStore.getState();
-        const projectFps = projectStore.activeProject?.fps || 30;
-        finalTime = snapTimeToFrame(adjustedTime, projectFps);
-
-        // Clear snap point when not snapping
+        // Clear snap point when element snapping is disabled
         onSnapPointChange?.(null);
       }