From df1e80b5287ff71867bad1a1bfebb102cef7d5bf Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Wed, 30 Jul 2025 13:15:09 -0400
Subject: Lay groundwork for Tailwind v4 upgrade

---
 apps/web/src/components/background-settings.tsx    | 16 ++++----
 .../src/components/editor/media-panel/tabbar.tsx   |  6 +--
 .../components/editor/media-panel/views/media.tsx  |  2 +-
 apps/web/src/components/editor/preview-panel.tsx   | 26 ++++++-------
 .../editor/properties-panel/text-properties.tsx    |  4 +-
 apps/web/src/components/editor/snap-indicator.tsx  |  2 +-
 apps/web/src/components/editor/speed-control.tsx   |  2 +-
 apps/web/src/components/editor/timeline/index.tsx  | 14 +++----
 .../editor/timeline/timeline-element.tsx           |  2 +-
 .../editor/timeline/timeline-playhead.tsx          |  4 +-
 .../web/src/components/keyboard-shortcuts-help.tsx |  2 +-
 apps/web/src/components/landing/handlebars.tsx     |  4 +-
 apps/web/src/components/onboarding.tsx             |  2 +-
 apps/web/src/components/ui/alert-dialog.tsx        |  2 +-
 apps/web/src/components/ui/badge.tsx               |  6 +--
 apps/web/src/components/ui/button.tsx              | 12 +++---
 apps/web/src/components/ui/calendar.tsx            |  2 +-
 apps/web/src/components/ui/carousel.tsx            |  4 +-
 apps/web/src/components/ui/chart.tsx               |  6 +--
 apps/web/src/components/ui/checkbox.tsx            |  2 +-
 apps/web/src/components/ui/command.tsx             |  4 +-
 apps/web/src/components/ui/context-menu.tsx        |  6 +--
 apps/web/src/components/ui/dialog.tsx              |  6 +--
 apps/web/src/components/ui/draggable-item.tsx      |  6 +--
 apps/web/src/components/ui/dropdown-menu.tsx       |  6 +--
 apps/web/src/components/ui/hover-card.tsx          |  2 +-
 .../src/components/ui/image-timeline-treatment.tsx |  4 +-
 apps/web/src/components/ui/input-otp.tsx           |  4 +-
 apps/web/src/components/ui/input.tsx               |  2 +-
 apps/web/src/components/ui/menubar.tsx             | 16 ++++----
 apps/web/src/components/ui/navigation-menu.tsx     |  8 ++--
 apps/web/src/components/ui/pagination.tsx          |  2 +-
 apps/web/src/components/ui/popover.tsx             |  2 +-
 apps/web/src/components/ui/radio-group.tsx         |  2 +-
 apps/web/src/components/ui/resizable.tsx           |  2 +-
 apps/web/src/components/ui/scroll-area.tsx         |  4 +-
 apps/web/src/components/ui/select.tsx              |  8 ++--
 apps/web/src/components/ui/separator.tsx           |  2 +-
 apps/web/src/components/ui/sheet.tsx               |  2 +-
 apps/web/src/components/ui/sidebar.tsx             | 44 +++++++++++-----------
 apps/web/src/components/ui/slider.tsx              |  2 +-
 apps/web/src/components/ui/sponsor-button.tsx      |  2 +-
 apps/web/src/components/ui/switch.tsx              |  2 +-
 apps/web/src/components/ui/table.tsx               |  2 +-
 apps/web/src/components/ui/tabs.tsx                |  4 +-
 apps/web/src/components/ui/textarea.tsx            |  2 +-
 apps/web/src/components/ui/toast.tsx               |  8 ++--
 apps/web/src/components/ui/toggle.tsx              |  4 +-
 48 files changed, 139 insertions(+), 139 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/background-settings.tsx b/apps/web/src/components/background-settings.tsx
index a640dc4c..2a5a3ac0 100644
--- a/apps/web/src/components/background-settings.tsx
+++ b/apps/web/src/components/background-settings.tsx
@@ -7,7 +7,7 @@ import { colors } from "@/data/colors";
 import { useProjectStore } from "@/stores/project-store";
 import { PipetteIcon } from "lucide-react";
 
-type BackgroundTab = "color" | "blur";
+type BackgroundTab = "color" | "blur-sm";
 
 export function BackgroundSettings() {
   const { activeProject, updateBackgroundType } = useProjectStore();
@@ -20,7 +20,7 @@ export function BackgroundSettings() {
   };
 
   const handleBlurSelect = (blurIntensity: number) => {
-    updateBackgroundType("blur", { blurIntensity });
+    updateBackgroundType("blur-sm", { blurIntensity });
   };
 
   const tabs = [
@@ -30,7 +30,7 @@ export function BackgroundSettings() {
     },
     {
       label: "Blur",
-      value: "blur",
+      value: "blur-sm",
     },
   ];
 
@@ -40,12 +40,12 @@ export function BackgroundSettings() {
         <Button
           variant="text"
           size="icon"
-          className="!size-4 border border-muted-foreground"
+          className="size-4! border border-muted-foreground"
         >
-          <BackgroundIcon className="!size-3" />
+          <BackgroundIcon className="size-3!" />
         </Button>
       </PopoverTrigger>
-      <PopoverContent className="flex flex-col items-start w-[20rem] h-[16rem] overflow-hidden p-0">
+      <PopoverContent className="flex flex-col items-start w-[20rem] h-64 overflow-hidden p-0">
         <div className="flex items-center justify-between w-full gap-2 z-10 bg-popover p-3">
           <h2 className="text-sm">Background</h2>
           <div className="flex items-center gap-2 text-sm">
@@ -60,7 +60,7 @@ export function BackgroundSettings() {
                         activeProject?.backgroundColor || "#000000",
                     });
                   } else {
-                    updateBackgroundType("blur", {
+                    updateBackgroundType("blur-sm", {
                       blurIntensity: activeProject?.blurIntensity || 8,
                     });
                   }
@@ -100,7 +100,7 @@ function ColorView({
 }) {
   return (
     <div className="w-full h-full">
-      <div className="absolute top-8 left-0 w-[calc(100%-1rem)] h-12 bg-gradient-to-b from-popover to-transparent pointer-events-none" />
+      <div className="absolute top-8 left-0 w-[calc(100%-1rem)] h-12 bg-linear-to-b from-popover to-transparent pointer-events-none" />
       <div className="grid grid-cols-4 gap-2 w-full h-full p-3 pt-0 overflow-auto">
         <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" />
diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx
index bce84a46..92482559 100644
--- a/apps/web/src/components/editor/media-panel/tabbar.tsx
+++ b/apps/web/src/components/editor/media-panel/tabbar.tsx
@@ -82,7 +82,7 @@ export function TabBar() {
               onClick={() => setActiveTab(tabKey)}
               key={tabKey}
             >
-              <tab.icon className="!size-[1.1rem]" />
+              <tab.icon className="size-[1.1rem]!" />
               <span className="text-[0.65rem]">{tab.label}</span>
             </div>
           );
@@ -114,10 +114,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>
   );
diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx
index f218dc14..d1533736 100644
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ b/apps/web/src/components/editor/media-panel/views/media.tsx
@@ -169,7 +169,7 @@ export function MediaView() {
 
     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">
+        <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 && (
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 639858d0..2c6cbf96 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -274,7 +274,7 @@ export function PreviewPanel() {
   const renderBlurBackground = () => {
     if (
       !activeProject?.backgroundType ||
-      activeProject.backgroundType !== "blur" ||
+      activeProject.backgroundType !== "blur-sm" ||
       blurBackgroundElements.length === 0
     ) {
       return null;
@@ -392,7 +392,7 @@ 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>
@@ -474,7 +474,7 @@ export function PreviewPanel() {
                 width: previewDimensions.width,
                 height: previewDimensions.height,
                 backgroundColor:
-                  activeProject?.backgroundType === "blur"
+                  activeProject?.backgroundType === "blur-sm"
                     ? "transparent"
                     : activeProject?.backgroundColor || "#000000",
               }}
@@ -489,7 +489,7 @@ export function PreviewPanel() {
                   renderElement(elementData, index)
                 )
               )}
-              {activeProject?.backgroundType === "blur" &&
+              {activeProject?.backgroundType === "blur-sm" &&
                 blurBackgroundElements.length === 0 &&
                 activeElements.length > 0 && (
                   <div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
@@ -675,7 +675,7 @@ function FullscreenToolbar({
             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-white border border-black/20"
             style={{ left: `${progress}%` }}
           />
         </div>
@@ -684,11 +684,11 @@ function FullscreenToolbar({
       <Button
         variant="text"
         size="icon"
-        className="!size-4 text-white/80 hover:text-white"
+        className="size-4! text-white/80 hover:text-white"
         onClick={onToggleExpanded}
         title="Exit fullscreen (Esc)"
       >
-        <Expand className="!size-4" />
+        <Expand className="size-4!" />
       </Button>
     </div>
   );
@@ -722,7 +722,7 @@ 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"
@@ -730,7 +730,7 @@ function FullscreenPreview({
             width: previewDimensions.width,
             height: previewDimensions.height,
             backgroundColor:
-              activeProject?.backgroundType === "blur"
+              activeProject?.backgroundType === "blur-sm"
                 ? "#1a1a1a"
                 : activeProject?.backgroundColor || "#1a1a1a",
           }}
@@ -745,7 +745,7 @@ function FullscreenPreview({
               renderElement(elementData, index)
             )
           )}
-          {activeProject?.backgroundType === "blur" &&
+          {activeProject?.backgroundType === "blur-sm" &&
             blurBackgroundElements.length === 0 &&
             activeElements.length > 0 && (
               <div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
@@ -868,7 +868,7 @@ function PreviewToolbar({
           <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"
+              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()}
@@ -899,11 +899,11 @@ function PreviewToolbar({
         <Button
           variant="text"
           size="icon"
-          className="!size-4 text-muted-foreground"
+          className="size-4! text-muted-foreground"
           onClick={onToggleExpanded}
           title="Enter fullscreen"
         >
-          <Expand className="!size-4" />
+          <Expand className="size-4!" />
         </Button>
       </div>
     </div>
diff --git a/apps/web/src/components/editor/properties-panel/text-properties.tsx b/apps/web/src/components/editor/properties-panel/text-properties.tsx
index e147ea65..61dd806b 100644
--- a/apps/web/src/components/editor/properties-panel/text-properties.tsx
+++ b/apps/web/src/components/editor/properties-panel/text-properties.tsx
@@ -25,7 +25,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 })
         }
@@ -63,7 +63,7 @@ export function TextProperties({
                   fontSize: parseInt(e.target.value),
                 })
               }
-              className="w-12 !text-xs h-7 rounded-sm text-center
+              className="w-12 text-xs! h-7 rounded-sm text-center
                [appearance:textfield]
                [&::-webkit-outer-spin-button]:appearance-none
                [&::-webkit-inner-spin-button]:appearance-none"
diff --git a/apps/web/src/components/editor/snap-indicator.tsx b/apps/web/src/components/editor/snap-indicator.tsx
index 053d119e..0a51e107 100644
--- a/apps/web/src/components/editor/snap-indicator.tsx
+++ b/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,
diff --git a/apps/web/src/components/editor/speed-control.tsx b/apps/web/src/components/editor/speed-control.tsx
index f2b0568d..b41cadfb 100644
--- a/apps/web/src/components/editor/speed-control.tsx
+++ b/apps/web/src/components/editor/speed-control.tsx
@@ -21,7 +21,7 @@ export function SpeedControl() {
           {SPEED_PRESETS.map((preset) => (
             <Button
               key={preset.value}
-              variant={speed === preset.value ? "default" : "outline"}
+              variant={speed === preset.value ? "default" : "outline-solid"}
               className="flex-1"
               onClick={() => setSpeed(preset.value)}
             >
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index bdb4433c..7a3011d0 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -543,7 +543,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-48 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">
               .
@@ -652,7 +652,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-48 shrink-0 border-r border-black overflow-y-auto z-200 bg-panel"
               data-track-labels
             >
               <ScrollArea className="w-full h-full" ref={trackLabelsScrollRef}>
@@ -667,7 +667,7 @@ export function Timeline() {
                         <TrackIcon track={track} />
                       </div>
                       {track.muted && (
-                        <span className="ml-2 text-xs text-red-500 font-semibold flex-shrink-0">
+                        <span className="ml-2 text-xs text-red-500 font-semibold shrink-0">
                           Muted
                         </span>
                       )}
@@ -745,7 +745,7 @@ export function Timeline() {
                             />
                           </div>
                         </ContextMenuTrigger>
-                        <ContextMenuContent className="z-[200]">
+                        <ContextMenuContent className="z-200">
                           <ContextMenuItem
                             onClick={(e) => {
                               e.stopPropagation();
@@ -775,13 +775,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" />
       )}
     </>
   );
diff --git a/apps/web/src/components/editor/timeline/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx
index f581bbf0..0447d52a 100644
--- a/apps/web/src/components/editor/timeline/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-element.tsx
@@ -358,7 +358,7 @@ 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
diff --git a/apps/web/src/components/editor/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
index b33166c0..ea70419b 100644
--- a/apps/web/src/components/editor/timeline/timeline-playhead.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
@@ -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,
@@ -142,7 +142,7 @@ export function TimelinePlayhead({
 
       {/* 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-primary border-primary" : "bg-foreground border-foreground"}`}
       />
     </div>
   );
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index 96d4705f..15b1e1d8 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -93,7 +93,7 @@ const EditableShortcutKey = ({
     <Button
       variant="text"
       size="sm"
-      className={`inline-flex font-sans text-xs rounded px-2 min-w-[1.5rem] min-h-[1.5rem] leading-none items-center justify-center shadow-sm border mr-1 cursor-pointer hover:bg-opacity-80 ${
+      className={`inline-flex font-sans text-xs rounded px-2 min-w-6 min-h-6 leading-none items-center justify-center shadow-xs border mr-1 cursor-pointer hover:bg-opacity-80 ${
         isRecording
           ? "border-primary bg-primary/10"
           : "border-white/10 bg-black/20"
diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx
index 26cf9254..4c332b37 100644
--- a/apps/web/src/components/landing/handlebars.tsx
+++ b/apps/web/src/components/landing/handlebars.tsx
@@ -46,9 +46,9 @@ export function Handlebars({ children }: HandlebarsProps) {
   const rightGradient = useTransform(rightHandleX, [0, width + 10], [0, 100]);
 
   return (
-    <div className="flex justify-center gap-4 leading-[4rem] mt-0 md:mt-2">
+    <div className="flex justify-center gap-4 leading-16 mt-0 md:mt-2">
       <div ref={containerRef} className="relative -rotate-[2.76deg] mt-2">
-        <div className="absolute inset-0 w-full h-full rounded-2xl border border-yellow-500 flex justify-between z-[1]">
+        <div className="absolute inset-0 w-full h-full rounded-2xl border border-yellow-500 flex justify-between z-1">
           <motion.div
             className="absolute z-10 left-0 h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center select-none"
             style={{
diff --git a/apps/web/src/components/onboarding.tsx b/apps/web/src/components/onboarding.tsx
index d72ac0f6..36ae68d9 100644
--- a/apps/web/src/components/onboarding.tsx
+++ b/apps/web/src/components/onboarding.tsx
@@ -79,7 +79,7 @@ export function Onboarding() {
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-[425px] !outline-none">
+      <DialogContent className="sm:max-w-[425px] outline-hidden!">
         <DialogTitle>
           <span className="sr-only">{getStepTitle()}</span>
         </DialogTitle>
diff --git a/apps/web/src/components/ui/alert-dialog.tsx b/apps/web/src/components/ui/alert-dialog.tsx
index 2cce235c..d5d6f78f 100644
--- a/apps/web/src/components/ui/alert-dialog.tsx
+++ b/apps/web/src/components/ui/alert-dialog.tsx
@@ -117,7 +117,7 @@ const AlertDialogCancel = React.forwardRef<
   <AlertDialogPrimitive.Cancel
     ref={ref}
     className={cn(
-      buttonVariants({ variant: "outline" }),
+      buttonVariants({ variant: "outline-solid" }),
       "mt-2 sm:mt-0",
       className
     )}
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
index e37530f4..02b8532b 100644
--- a/apps/web/src/components/ui/badge.tsx
+++ b/apps/web/src/components/ui/badge.tsx
@@ -4,16 +4,16 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+          "border-transparent bg-primary text-primary-foreground shadow-sm hover:bg-primary/80",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+          "border-transparent bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/80",
         outline: "text-foreground",
       },
     },
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 5902af65..3c5a8daa 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -5,19 +5,19 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-foreground text-background shadow hover:bg-foreground/90",
+        default: "bg-foreground text-background shadow-sm hover:bg-foreground/90",
         primary:
-          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
         destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+          "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
         text: "bg-transparent p-0 rounded-none hover:text-muted-foreground", // Instead of ghost (matches app better)
         link: "text-primary underline-offset-4 hover:underline",
       },
diff --git a/apps/web/src/components/ui/calendar.tsx b/apps/web/src/components/ui/calendar.tsx
index 192643cb..79d87da3 100644
--- a/apps/web/src/components/ui/calendar.tsx
+++ b/apps/web/src/components/ui/calendar.tsx
@@ -26,7 +26,7 @@ function Calendar({
         caption_label: "text-sm font-medium",
         nav: "space-x-1 flex items-center",
         nav_button: cn(
-          buttonVariants({ variant: "outline" }),
+          buttonVariants({ variant: "outline-solid" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
         ),
         nav_button_previous: "absolute left-1",
diff --git a/apps/web/src/components/ui/carousel.tsx b/apps/web/src/components/ui/carousel.tsx
index a9c98b67..72019c0d 100644
--- a/apps/web/src/components/ui/carousel.tsx
+++ b/apps/web/src/components/ui/carousel.tsx
@@ -197,7 +197,7 @@ CarouselItem.displayName = "CarouselItem";
 const CarouselPrevious = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+>(({ className, variant = "outline-solid", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel();
 
   return (
@@ -226,7 +226,7 @@ CarouselPrevious.displayName = "CarouselPrevious";
 const CarouselNext = React.forwardRef<
   HTMLButtonElement,
   React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+>(({ className, variant = "outline-solid", size = "icon", ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel();
 
   return (
diff --git a/apps/web/src/components/ui/chart.tsx b/apps/web/src/components/ui/chart.tsx
index 82d77752..a469c87a 100644
--- a/apps/web/src/components/ui/chart.tsx
+++ b/apps/web/src/components/ui/chart.tsx
@@ -57,7 +57,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden",
           className
         )}
         {...props}
@@ -184,7 +184,7 @@ const ChartTooltipContent = React.forwardRef<
       <div
         ref={ref}
         className={cn(
-          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          "grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
           className
         )}
       >
@@ -213,7 +213,7 @@ const ChartTooltipContent = React.forwardRef<
                       !hideIndicator && (
                         <div
                           className={cn(
-                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                             {
                               "h-2.5 w-2.5": indicator === "dot",
                               "w-1": indicator === "line",
diff --git a/apps/web/src/components/ui/checkbox.tsx b/apps/web/src/components/ui/checkbox.tsx
index 2b74bc52..5e429994 100644
--- a/apps/web/src/components/ui/checkbox.tsx
+++ b/apps/web/src/components/ui/checkbox.tsx
@@ -13,7 +13,7 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/command.tsx b/apps/web/src/components/ui/command.tsx
index 11b27041..887c1ab7 100644
--- a/apps/web/src/components/ui/command.tsx
+++ b/apps/web/src/components/ui/command.tsx
@@ -44,7 +44,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
@@ -115,7 +115,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/context-menu.tsx b/apps/web/src/components/ui/context-menu.tsx
index 7aa938f6..a1a28fa6 100644
--- a/apps/web/src/components/ui/context-menu.tsx
+++ b/apps/web/src/components/ui/context-menu.tsx
@@ -20,7 +20,7 @@ const ContextMenuSub = ContextMenuPrimitive.Sub;
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 
 const contextMenuItemVariants = cva(
-  "relative flex cursor-pointer select-none items-center gap-2 px-2 py-1.5 text-sm outline-none transition-opacity data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+  "relative flex cursor-pointer select-none items-center gap-2 px-2 py-1.5 text-sm outline-hidden transition-opacity data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -64,7 +64,7 @@ const ContextMenuSubContent = React.forwardRef<
   <ContextMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -80,7 +80,7 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 bg-popover text-popover-foreground shadow-md",
+        "z-50 min-w-32 overflow-hidden rounded-md border p-1 bg-popover text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx
index 35843a5f..5cb3f1cb 100644
--- a/apps/web/src/components/ui/dialog.tsx
+++ b/apps/web/src/components/ui/dialog.tsx
@@ -22,7 +22,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-[100] bg-black/20 backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-100 bg-black/20 backdrop-blur-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -39,7 +39,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-[150] grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-popover shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
+        "fixed left-[50%] top-[50%] z-150 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-popover shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg",
         className
       )}
       onCloseAutoFocus={(e) => {
@@ -55,7 +55,7 @@ const DialogContent = React.forwardRef<
       <ScrollArea className="max-h-[75vh]">
         <div className="p-6 space-y-4">{children}</div>
       </ScrollArea>
-      <DialogPrimitive.Close className="absolute right-4 top-4  opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+      <DialogPrimitive.Close className="absolute right-4 top-4  opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
diff --git a/apps/web/src/components/ui/draggable-item.tsx b/apps/web/src/components/ui/draggable-item.tsx
index dfb4dce7..4c71e4b7 100644
--- a/apps/web/src/components/ui/draggable-item.tsx
+++ b/apps/web/src/components/ui/draggable-item.tsx
@@ -130,7 +130,7 @@ export function DraggableMediaItem({
         typeof document !== "undefined" &&
         createPortal(
           <div
-            className="fixed pointer-events-none z-[9999]"
+            className="fixed pointer-events-none z-9999"
             style={{
               left: dragPosition.x - 40, // Center the preview (half of 80px)
               top: dragPosition.y - 40, // Center the preview (half of 80px)
@@ -139,7 +139,7 @@ export function DraggableMediaItem({
             <div className="w-[80px]">
               <AspectRatio
                 ratio={1}
-                className="relative rounded-md overflow-hidden shadow-2xl ring ring-primary"
+                className="relative rounded-md overflow-hidden shadow-2xl ring-3 ring-primary"
               >
                 <div className="w-full h-full [&_img]:w-full [&_img]:h-full [&_img]:object-cover [&_img]:rounded-none">
                   {preview}
@@ -179,7 +179,7 @@ function PlusButton({
       }}
       title={tooltipText}
     >
-      <Plus className="!size-3" />
+      <Plus className="size-3!" />
     </Button>
   );
 
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index d9962dd2..bdd86d58 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -20,7 +20,7 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const dropdownMenuItemVariants = cva(
-  "relative flex cursor-pointer select-none items-center gap-2 px-2 py-1.5 text-sm outline-none transition-opacity data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+  "relative flex cursor-pointer select-none items-center gap-2 px-2 py-1.5 text-sm outline-hidden transition-opacity data-disabled:pointer-events-none data-disabled:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -65,7 +65,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -87,7 +87,7 @@ const DropdownMenuContent = React.forwardRef<
         e.preventDefault();
       }}
       className={cn(
-        "z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 bg-popover text-popover-foreground shadow-md",
+        "z-50 min-w-32 overflow-hidden rounded-md border p-1 bg-popover text-popover-foreground shadow-md",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
diff --git a/apps/web/src/components/ui/hover-card.tsx b/apps/web/src/components/ui/hover-card.tsx
index c3958fcf..92700e09 100644
--- a/apps/web/src/components/ui/hover-card.tsx
+++ b/apps/web/src/components/ui/hover-card.tsx
@@ -18,7 +18,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/image-timeline-treatment.tsx b/apps/web/src/components/ui/image-timeline-treatment.tsx
index 7a64be18..eb0d0e9f 100644
--- a/apps/web/src/components/ui/image-timeline-treatment.tsx
+++ b/apps/web/src/components/ui/image-timeline-treatment.tsx
@@ -18,7 +18,7 @@ export function ImageTimelineTreatment({
   alt,
   targetAspectRatio = 16 / 9,
   className,
-  backgroundType = "blur",
+  backgroundType = "blur-sm",
   backgroundColor = "#000000",
 }: ImageTimelineTreatmentProps) {
   const [imageLoaded, setImageLoaded] = useState(false);
@@ -50,7 +50,7 @@ export function ImageTimelineTreatment({
       {/* Background Layer */}
       {needsAspectRatioTreatment && imageLoaded && (
         <>
-          {backgroundType === "blur" && (
+          {backgroundType === "blur-sm" && (
             <div className="absolute inset-0">
               <img
                 src={src}
diff --git a/apps/web/src/components/ui/input-otp.tsx b/apps/web/src/components/ui/input-otp.tsx
index 1bffc451..0d2cc002 100644
--- a/apps/web/src/components/ui/input-otp.tsx
+++ b/apps/web/src/components/ui/input-otp.tsx
@@ -13,7 +13,7 @@ const InputOTP = React.forwardRef<
   <OTPInput
     ref={ref}
     containerClassName={cn(
-      "flex items-center justify-between gap-2 w-full has-[:disabled]:opacity-50",
+      "flex items-center justify-between gap-2 w-full has-disabled:opacity-50",
       containerClassName
     )}
     className={cn("disabled:cursor-not-allowed", className)}
@@ -45,7 +45,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "relative flex aspect-square flex-1 min-w-[36px] items-center justify-center border border-input text-lg shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        "relative flex aspect-square flex-1 min-w-[36px] items-center justify-center border border-input text-lg shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md",
         isActive && "z-10 ring-1 ring-ring",
         className
       )}
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 8fc31a58..6f32885c 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -23,7 +23,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <input
           type={inputType}
           className={cn(
-            "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+            "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
             showPasswordToggle && "pr-10",
             className
           )}
diff --git a/apps/web/src/components/ui/menubar.tsx b/apps/web/src/components/ui/menubar.tsx
index 642ffa2b..96e66c8a 100644
--- a/apps/web/src/components/ui/menubar.tsx
+++ b/apps/web/src/components/ui/menubar.tsx
@@ -23,7 +23,7 @@ const Menubar = React.forwardRef<
   <MenubarPrimitive.Root
     ref={ref}
     className={cn(
-      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-xs",
       className
     )}
     {...props}
@@ -38,7 +38,7 @@ const MenubarTrigger = React.forwardRef<
   <MenubarPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       className
     )}
     {...props}
@@ -55,7 +55,7 @@ const MenubarSubTrigger = React.forwardRef<
   <MenubarPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
       inset && "pl-8",
       className
     )}
@@ -74,7 +74,7 @@ const MenubarSubContent = React.forwardRef<
   <MenubarPrimitive.SubContent
     ref={ref}
     className={cn(
-      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      "z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
       className
     )}
     {...props}
@@ -97,7 +97,7 @@ const MenubarContent = React.forwardRef<
         alignOffset={alignOffset}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+          "z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
           className
         )}
         {...props}
@@ -116,7 +116,7 @@ const MenubarItem = React.forwardRef<
   <MenubarPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       inset && "pl-8",
       className
     )}
@@ -132,7 +132,7 @@ const MenubarCheckboxItem = React.forwardRef<
   <MenubarPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     checked={checked}
@@ -155,7 +155,7 @@ const MenubarRadioItem = React.forwardRef<
   <MenubarPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/navigation-menu.tsx b/apps/web/src/components/ui/navigation-menu.tsx
index b5dd3622..288b5d88 100644
--- a/apps/web/src/components/ui/navigation-menu.tsx
+++ b/apps/web/src/components/ui/navigation-menu.tsx
@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50"
 );
 
 const NavigationMenuTrigger = React.forwardRef<
@@ -55,7 +55,7 @@ const NavigationMenuTrigger = React.forwardRef<
   >
     {children}{" "}
     <ChevronDown
-      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      className="relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
@@ -86,7 +86,7 @@ const NavigationMenuViewport = React.forwardRef<
   <div className={cn("absolute left-0 top-full flex justify-center")}>
     <NavigationMenuPrimitive.Viewport
       className={cn(
-        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)",
         className
       )}
       ref={ref}
@@ -104,7 +104,7 @@ const NavigationMenuIndicator = React.forwardRef<
   <NavigationMenuPrimitive.Indicator
     ref={ref}
     className={cn(
-      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      "top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/pagination.tsx b/apps/web/src/components/ui/pagination.tsx
index 61766cec..4bf8fcea 100644
--- a/apps/web/src/components/ui/pagination.tsx
+++ b/apps/web/src/components/ui/pagination.tsx
@@ -49,7 +49,7 @@ const PaginationLink = ({
     aria-current={isActive ? "page" : undefined}
     className={cn(
       buttonVariants({
-        variant: isActive ? "outline" : "text",
+        variant: isActive ? "outline-solid" : "text",
         size,
       }),
       className
diff --git a/apps/web/src/components/ui/popover.tsx b/apps/web/src/components/ui/popover.tsx
index cc4f6508..47782a7f 100644
--- a/apps/web/src/components/ui/popover.tsx
+++ b/apps/web/src/components/ui/popover.tsx
@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}
diff --git a/apps/web/src/components/ui/radio-group.tsx b/apps/web/src/components/ui/radio-group.tsx
index cc07d34f..859b8b5f 100644
--- a/apps/web/src/components/ui/radio-group.tsx
+++ b/apps/web/src/components/ui/radio-group.tsx
@@ -28,7 +28,7 @@ const RadioGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+        "aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow-sm focus:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/web/src/components/ui/resizable.tsx b/apps/web/src/components/ui/resizable.tsx
index a4443996..fc9d8b81 100644
--- a/apps/web/src/components/ui/resizable.tsx
+++ b/apps/web/src/components/ui/resizable.tsx
@@ -28,7 +28,7 @@ const ResizableHandle = ({
 }) => (
   <ResizablePrimitive.PanelResizeHandle
     className={cn(
-      "relative flex w-px items-center justify-center bg-transparent after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "relative flex w-px items-center justify-center bg-transparent after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
index 5c9db727..d5aaf2ee 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -38,9 +38,9 @@ const ScrollBar = React.forwardRef<
     className={cn(
       "flex touch-none select-none transition-colors",
       orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        "h-full w-2.5 border-l border-l-transparent p-px",
       orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+        "h-2.5 flex-col border-t border-t-transparent p-px",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index 911b3e5d..ce4f340d 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -14,7 +14,7 @@ const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
 
 const selectItemVariants = cva(
-  "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none transition-opacity data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+  "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-hidden transition-opacity data-disabled:pointer-events-none data-disabled:opacity-50",
   {
     variants: {
       variant: {
@@ -35,7 +35,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
@@ -91,7 +91,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -108,7 +108,7 @@ const SelectContent = React.forwardRef<
         className={cn(
           "p-1",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)"
         )}
       >
         {children}
diff --git a/apps/web/src/components/ui/separator.tsx b/apps/web/src/components/ui/separator.tsx
index 5b6774dc..f0040a52 100644
--- a/apps/web/src/components/ui/separator.tsx
+++ b/apps/web/src/components/ui/separator.tsx
@@ -19,7 +19,7 @@ const Separator = React.forwardRef<
       orientation={orientation}
       className={cn(
         "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
         className
       )}
       {...props}
diff --git a/apps/web/src/components/ui/sheet.tsx b/apps/web/src/components/ui/sheet.tsx
index 6aa092dc..2c5522c1 100644
--- a/apps/web/src/components/ui/sheet.tsx
+++ b/apps/web/src/components/ui/sheet.tsx
@@ -64,7 +64,7 @@ const SheetContent = React.forwardRef<
       className={cn(sheetVariants({ side }), className)}
       {...props}
     >
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary">
         <X className="h-4 w-4" />
         <span className="sr-only">Close</span>
       </SheetPrimitive.Close>
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
index c1583503..d25b1801 100644
--- a/apps/web/src/components/ui/sidebar.tsx
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -141,7 +141,7 @@ const SidebarProvider = React.forwardRef<
               } as React.CSSProperties
             }
             className={cn(
-              "group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+              "group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar",
               className
             )}
             ref={ref}
@@ -181,7 +181,7 @@ const Sidebar = React.forwardRef<
       return (
         <div
           className={cn(
-            "flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+            "flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground",
             className
           )}
           ref={ref}
@@ -198,7 +198,7 @@ const Sidebar = React.forwardRef<
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"
-            className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+            className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
             style={
               {
                 "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
@@ -225,30 +225,30 @@ const Sidebar = React.forwardRef<
         {/* This is what handles the sidebar gap on desktop */}
         <div
           className={cn(
-            "duration-200 relative h-full w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+            "duration-200 relative h-full w-(--sidebar-width) bg-transparent transition-[width] ease-linear",
             "group-data-[collapsible=offcanvas]:w-0",
             "group-data-[side=right]:rotate-180",
             variant === "floating" || variant === "inset"
-              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]"
+              ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+              : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
           )}
         />
         <div
           className={cn(
-            "duration-200 fixed h-[calc(100vh-4rem)] top-16 z-10 hidden w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+            "duration-200 fixed h-[calc(100vh-4rem)] top-16 z-10 hidden w-(--sidebar-width) transition-[left,right,width] ease-linear md:flex",
             side === "left"
               ? "left-0 border-r group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
               : "right-0 border-l group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
             variant === "floating" || variant === "inset"
-              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
-              : "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+              ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+              : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
             className
           )}
           {...props}
         >
           <div
             data-sidebar="sidebar"
-            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+            className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm"
           >
             {children}
           </div>
@@ -301,9 +301,9 @@ const SidebarRail = React.forwardRef<
       title="Toggle Sidebar"
       className={cn(
         "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
-        "[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
         "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
-        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+        "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar",
         "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
         "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
         className
@@ -323,7 +323,7 @@ const SidebarInset = React.forwardRef<
       ref={ref}
       className={cn(
         "relative flex min-h-svh flex-1 flex-col bg-background",
-        "peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm",
         className
       )}
       {...props}
@@ -439,7 +439,7 @@ const SidebarGroupLabel = React.forwardRef<
       ref={ref as any}
       data-sidebar="group-label"
       className={cn(
-        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-hidden ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       )}
@@ -460,9 +460,9 @@ const SidebarGroupAction = React.forwardRef<
       ref={ref as any}
       data-sidebar="group-action"
       className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
+        "after:absolute after:-inset-2 md:after:hidden",
         "group-data-[collapsible=icon]:hidden",
         className
       )}
@@ -512,7 +512,7 @@ const SidebarMenuItem = React.forwardRef<
 SidebarMenuItem.displayName = "SidebarMenuItem";
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -523,7 +523,7 @@ const sidebarMenuButtonVariants = cva(
       size: {
         default: "h-8 text-sm",
         sm: "h-7 text-xs",
-        lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
       },
     },
     defaultVariants: {
@@ -606,9 +606,9 @@ const SidebarMenuAction = React.forwardRef<
       ref={ref as any}
       data-sidebar="menu-action"
       className={cn(
-        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
         // Increases the hit area of the button on mobile.
-        "after:absolute after:-inset-2 after:md:hidden",
+        "after:absolute after:-inset-2 md:after:hidden",
         "peer-data-[size=sm]/menu-button:top-1",
         "peer-data-[size=default]/menu-button:top-1.5",
         "peer-data-[size=lg]/menu-button:top-2.5",
@@ -669,7 +669,7 @@ const SidebarMenuSkeleton = React.forwardRef<
         />
       )}
       <Skeleton
-        className="h-4 flex-1 max-w-[--skeleton-width]"
+        className="h-4 flex-1 max-w-(--skeleton-width)"
         data-sidebar="menu-skeleton-text"
         style={
           {
@@ -722,7 +722,7 @@ const SidebarMenuSubButton = React.forwardRef<
       data-size={size}
       data-active={isActive}
       className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
         size === "sm" && "text-xs",
         size === "md" && "text-sm",
diff --git a/apps/web/src/components/ui/slider.tsx b/apps/web/src/components/ui/slider.tsx
index 4789ae17..d4afdd06 100644
--- a/apps/web/src/components/ui/slider.tsx
+++ b/apps/web/src/components/ui/slider.tsx
@@ -20,7 +20,7 @@ const Slider = React.forwardRef<
     <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
       <SliderPrimitive.Range className="absolute h-full bg-primary" />
     </SliderPrimitive.Track>
-    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow-sm transition-colors focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
   </SliderPrimitive.Root>
 ));
 Slider.displayName = SliderPrimitive.Root.displayName;
diff --git a/apps/web/src/components/ui/sponsor-button.tsx b/apps/web/src/components/ui/sponsor-button.tsx
index a060e428..9dc8e966 100644
--- a/apps/web/src/components/ui/sponsor-button.tsx
+++ b/apps/web/src/components/ui/sponsor-button.tsx
@@ -19,7 +19,7 @@ export function SponsorButton({
       href={href}
       target="_blank"
       rel="noopener noreferrer"
-      className={`inline-flex items-center gap-2 px-3 py-2 rounded-full border border-white/10 bg-white/5 backdrop-blur-sm hover:bg-white/10 hover:border-white/20 transition-all duration-200 group shadow-lg ${className}`}
+      className={`inline-flex items-center gap-2 px-3 py-2 rounded-full border border-white/10 bg-white/5 backdrop-blur-xs hover:bg-white/10 hover:border-white/20 transition-all duration-200 group shadow-lg ${className}`}
     >
       <span className="text-xs font-medium text-zinc-400 group-hover:text-zinc-300 transition-colors">
         Sponsored by
diff --git a/apps/web/src/components/ui/switch.tsx b/apps/web/src/components/ui/switch.tsx
index ba324f1d..f210afdf 100644
--- a/apps/web/src/components/ui/switch.tsx
+++ b/apps/web/src/components/ui/switch.tsx
@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/table.tsx b/apps/web/src/components/ui/table.tsx
index 6b83618c..7481cabb 100644
--- a/apps/web/src/components/ui/table.tsx
+++ b/apps/web/src/components/ui/table.tsx
@@ -43,7 +43,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-t bg-muted/50 font-medium last:[&>tr]:border-b-0",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/tabs.tsx b/apps/web/src/components/ui/tabs.tsx
index a51a28a2..e5384daf 100644
--- a/apps/web/src/components/ui/tabs.tsx
+++ b/apps/web/src/components/ui/tabs.tsx
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
       className
     )}
     {...props}
@@ -44,7 +44,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      "mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
       className
     )}
     {...props}
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
index 64f81ce6..b9004a34 100644
--- a/apps/web/src/components/ui/textarea.tsx
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-xs",
+        "flex min-h-[60px] w-full rounded-md border border-input bg-background px-3 py-2 text-base shadow-xs placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-0 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-xs",
         className
       )}
       ref={ref}
diff --git a/apps/web/src/components/ui/toast.tsx b/apps/web/src/components/ui/toast.tsx
index bf89e350..bd733f63 100644
--- a/apps/web/src/components/ui/toast.tsx
+++ b/apps/web/src/components/ui/toast.tsx
@@ -16,7 +16,7 @@ const ToastViewport = React.forwardRef<
   <ToastPrimitives.Viewport
     ref={ref}
     className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      "fixed top-0 z-100 flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
       className
     )}
     {...props}
@@ -25,7 +25,7 @@ const ToastViewport = React.forwardRef<
 ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full sm:data-[state=open]:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
@@ -62,7 +62,7 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus-visible:outline-none focus-visible:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus-visible::ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus-visible:outline-hidden focus-visible:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 hover:group-[.destructive]:border-destructive/30 hover:group-[.destructive]:bg-destructive hover:group-[.destructive]:text-destructive-foreground group-[.destructive]:focus-visible::ring-destructive",
       className
     )}
     {...props}
@@ -77,7 +77,7 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus-visible::ring-1 group-hover:opacity-100 group-[.destructive]:text-muted-foreground group-[.destructive]:hover:text-red-50 group-[.destructive]:focus-visible:ring-red-400 group-[.destructive]:focus-visible:ring-offset-red-600",
+      "absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-hidden focus-visible::ring-1 group-hover:opacity-100 group-[.destructive]:text-muted-foreground hover:group-[.destructive]:text-red-50 focus-visible:group-[.destructive]:ring-red-400 focus-visible:group-[.destructive]:ring-offset-red-600",
       className
     )}
     toast-close=""
diff --git a/apps/web/src/components/ui/toggle.tsx b/apps/web/src/components/ui/toggle.tsx
index a4bfda42..460aa9f2 100644
--- a/apps/web/src/components/ui/toggle.tsx
+++ b/apps/web/src/components/ui/toggle.tsx
@@ -7,13 +7,13 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../../lib/utils";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
       },
       size: {
         default: "h-9 px-2 min-w-9",
-- 
cgit v1.3.1


From dbc1d2e1a3fc5a87b196f40d9c40ee29548d5264 Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Wed, 30 Jul 2025 15:03:16 -0400
Subject: Refine spacing to match previous spacing

Correct hero spacing changes caused by line-height adjustments in Tailwind v4
---
 apps/web/src/components/landing/handlebars.tsx | 8 ++++----
 apps/web/src/components/landing/hero.tsx       | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/landing/handlebars.tsx b/apps/web/src/components/landing/handlebars.tsx
index 4c332b37..3ed39a9f 100644
--- a/apps/web/src/components/landing/handlebars.tsx
+++ b/apps/web/src/components/landing/handlebars.tsx
@@ -46,8 +46,8 @@ export function Handlebars({ children }: HandlebarsProps) {
   const rightGradient = useTransform(rightHandleX, [0, width + 10], [0, 100]);
 
   return (
-    <div className="flex justify-center gap-4 leading-16 mt-0 md:mt-2">
-      <div ref={containerRef} className="relative -rotate-[2.76deg] mt-2">
+    <div className="flex justify-center gap-4 leading-16">
+      <div ref={containerRef} className="relative -rotate-[2.76deg] mt-0.5">
         <div className="absolute inset-0 w-full h-full rounded-2xl border border-yellow-500 flex justify-between z-1">
           <motion.div
             className="absolute z-10 left-0 h-full border border-yellow-500 w-7 rounded-full bg-accent flex items-center justify-center select-none"
@@ -62,7 +62,7 @@ export function Handlebars({ children }: HandlebarsProps) {
             whileDrag={{ scale: 1.1, cursor: "grabbing" }}
             transition={{ type: "spring", stiffness: 400, damping: 30 }}
           >
-            <div className="w-2 h-8 rounded-full bg-yellow-500"></div>
+            <div className="w-2 h-8 rounded-full bg-yellow-500" />
           </motion.div>
 
           <motion.div
@@ -81,7 +81,7 @@ export function Handlebars({ children }: HandlebarsProps) {
             whileDrag={{ scale: 1.1, cursor: "grabbing" }}
             transition={{ type: "spring", stiffness: 400, damping: 30 }}
           >
-            <div className="w-2 h-8 rounded-full bg-yellow-500"></div>
+            <div className="w-2 h-8 rounded-full bg-yellow-500" />
           </motion.div>
         </div>
 
diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index dba958ac..2c6a130e 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/apps/web/src/components/landing/hero.tsx
@@ -30,7 +30,7 @@ export function Hero() {
           initial={{ opacity: 0, y: 20 }}
           animate={{ opacity: 1, y: 0 }}
           transition={{ delay: 0.6, duration: 0.8 }}
-          className="mb-8 flex justify-center"
+          className="mb-4 flex justify-center"
         >
           <SponsorButton
             href="https://vercel.com/home?utm_source=opencut"
-- 
cgit v1.3.1


From e3ecf4855a9dea317f4823bf1840703de7ec3f67 Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Wed, 30 Jul 2025 15:05:03 -0400
Subject: Correct `blur-sm` ➞ `blur`
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/background-settings.tsx         |  8 ++++----
 apps/web/src/components/editor/preview-panel.tsx        | 12 ++++++------
 apps/web/src/components/ui/image-timeline-treatment.tsx |  4 ++--
 apps/web/src/stores/project-store.ts                    |  4 ++--
 apps/web/src/types/editor.ts                            |  2 +-
 apps/web/src/types/project.ts                           |  2 +-
 6 files changed, 16 insertions(+), 16 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/background-settings.tsx b/apps/web/src/components/background-settings.tsx
index 2a5a3ac0..7e27e574 100644
--- a/apps/web/src/components/background-settings.tsx
+++ b/apps/web/src/components/background-settings.tsx
@@ -7,7 +7,7 @@ import { colors } from "@/data/colors";
 import { useProjectStore } from "@/stores/project-store";
 import { PipetteIcon } from "lucide-react";
 
-type BackgroundTab = "color" | "blur-sm";
+type BackgroundTab = "color" | "blur";
 
 export function BackgroundSettings() {
   const { activeProject, updateBackgroundType } = useProjectStore();
@@ -20,7 +20,7 @@ export function BackgroundSettings() {
   };
 
   const handleBlurSelect = (blurIntensity: number) => {
-    updateBackgroundType("blur-sm", { blurIntensity });
+    updateBackgroundType("blur", { blurIntensity });
   };
 
   const tabs = [
@@ -30,7 +30,7 @@ export function BackgroundSettings() {
     },
     {
       label: "Blur",
-      value: "blur-sm",
+      value: "blur",
     },
   ];
 
@@ -60,7 +60,7 @@ export function BackgroundSettings() {
                         activeProject?.backgroundColor || "#000000",
                     });
                   } else {
-                    updateBackgroundType("blur-sm", {
+                    updateBackgroundType("blur", {
                       blurIntensity: activeProject?.blurIntensity || 8,
                     });
                   }
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 2c6cbf96..76eedb4f 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -211,7 +211,7 @@ export function PreviewPanel() {
     setDragState({
       isDragging: true,
       elementId: element.id,
-      trackId: trackId,
+      trackId,
       startX: e.clientX,
       startY: e.clientY,
       initialElementX: element.x,
@@ -274,7 +274,7 @@ export function PreviewPanel() {
   const renderBlurBackground = () => {
     if (
       !activeProject?.backgroundType ||
-      activeProject.backgroundType !== "blur-sm" ||
+      activeProject.backgroundType !== "blur" ||
       blurBackgroundElements.length === 0
     ) {
       return null;
@@ -474,7 +474,7 @@ export function PreviewPanel() {
                 width: previewDimensions.width,
                 height: previewDimensions.height,
                 backgroundColor:
-                  activeProject?.backgroundType === "blur-sm"
+                  activeProject?.backgroundType === "blur"
                     ? "transparent"
                     : activeProject?.backgroundColor || "#000000",
               }}
@@ -489,7 +489,7 @@ export function PreviewPanel() {
                   renderElement(elementData, index)
                 )
               )}
-              {activeProject?.backgroundType === "blur-sm" &&
+              {activeProject?.backgroundType === "blur" &&
                 blurBackgroundElements.length === 0 &&
                 activeElements.length > 0 && (
                   <div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
@@ -730,7 +730,7 @@ function FullscreenPreview({
             width: previewDimensions.width,
             height: previewDimensions.height,
             backgroundColor:
-              activeProject?.backgroundType === "blur-sm"
+              activeProject?.backgroundType === "blur"
                 ? "#1a1a1a"
                 : activeProject?.backgroundColor || "#1a1a1a",
           }}
@@ -745,7 +745,7 @@ function FullscreenPreview({
               renderElement(elementData, index)
             )
           )}
-          {activeProject?.backgroundType === "blur-sm" &&
+          {activeProject?.backgroundType === "blur" &&
             blurBackgroundElements.length === 0 &&
             activeElements.length > 0 && (
               <div className="absolute bottom-2 left-2 right-2 bg-black/70 text-white text-xs p-2 rounded">
diff --git a/apps/web/src/components/ui/image-timeline-treatment.tsx b/apps/web/src/components/ui/image-timeline-treatment.tsx
index eb0d0e9f..7a64be18 100644
--- a/apps/web/src/components/ui/image-timeline-treatment.tsx
+++ b/apps/web/src/components/ui/image-timeline-treatment.tsx
@@ -18,7 +18,7 @@ export function ImageTimelineTreatment({
   alt,
   targetAspectRatio = 16 / 9,
   className,
-  backgroundType = "blur-sm",
+  backgroundType = "blur",
   backgroundColor = "#000000",
 }: ImageTimelineTreatmentProps) {
   const [imageLoaded, setImageLoaded] = useState(false);
@@ -50,7 +50,7 @@ export function ImageTimelineTreatment({
       {/* Background Layer */}
       {needsAspectRatioTreatment && imageLoaded && (
         <>
-          {backgroundType === "blur-sm" && (
+          {backgroundType === "blur" && (
             <div className="absolute inset-0">
               <img
                 src={src}
diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index a34df511..7bb38039 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -23,7 +23,7 @@ interface ProjectStore {
   duplicateProject: (projectId: string) => Promise<string>;
   updateProjectBackground: (backgroundColor: string) => Promise<void>;
   updateBackgroundType: (
-    type: "color" | "blur-sm",
+    type: "color" | "blur",
     options?: { backgroundColor?: string; blurIntensity?: number }
   ) => Promise<void>;
   updateProjectFps: (fps: number) => Promise<void>;
@@ -273,7 +273,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
   },
 
   updateBackgroundType: async (
-    type: "color" | "blur-sm",
+    type: "color" | "blur",
     options?: { backgroundColor?: string; blurIntensity?: number }
   ) => {
     const { activeProject } = get();
diff --git a/apps/web/src/types/editor.ts b/apps/web/src/types/editor.ts
index 12954df0..12b474fd 100644
--- a/apps/web/src/types/editor.ts
+++ b/apps/web/src/types/editor.ts
@@ -1,4 +1,4 @@
-export type BackgroundType = "blur-sm" | "mirror" | "color";
+export type BackgroundType = "blur" | "mirror" | "color";
 
 export interface CanvasSize {
   width: number;
diff --git a/apps/web/src/types/project.ts b/apps/web/src/types/project.ts
index 623fd160..58d37b03 100644
--- a/apps/web/src/types/project.ts
+++ b/apps/web/src/types/project.ts
@@ -6,7 +6,7 @@ export interface TProject {
   updatedAt: Date;
   mediaItems?: string[];
   backgroundColor?: string;
-  backgroundType?: "color" | "blur-sm";
+  backgroundType?: "color" | "blur";
   blurIntensity?: number; // in pixels (4, 8, 18)
   fps?: number;
 }
-- 
cgit v1.3.1


From 48282555e0732837bf226f7a7dea65c109e94dfa Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Wed, 30 Jul 2025 16:53:31 -0400
Subject: Migrate remaining tailwind config pieces to CSS config

---
 apps/web/components.json               |   2 +-
 apps/web/src/app/globals.css           | 292 +++++++++++++++++++++++----------
 apps/web/src/components/ui/sidebar.tsx |   2 +-
 apps/web/tailwind.config.ts            | 149 -----------------
 4 files changed, 208 insertions(+), 237 deletions(-)
 delete mode 100644 apps/web/tailwind.config.ts

(limited to 'apps/web/src/components')

diff --git a/apps/web/components.json b/apps/web/components.json
index 405a08cd..3289f237 100644
--- a/apps/web/components.json
+++ b/apps/web/components.json
@@ -4,7 +4,7 @@
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "tailwind.config.ts",
+    "config": "",
     "css": "src/app/globals.css",
     "baseColor": "neutral",
     "cssVariables": true,
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 9cc7ed6b..ac14f007 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -1,16 +1,97 @@
-@import 'tailwindcss';
+@import "tailwindcss";
 
-@config '../../tailwind.config.ts';
+/* Custom variant for dark mode */
+@custom-variant dark (&:where(.dark, .dark *));
 
-/*
-  The default border color has changed to `currentcolor` in Tailwind CSS v4,
-  so we've added these compatibility styles to make sure everything still
-  looks the same as it did with Tailwind CSS v3.
+/* Plugins */
+@plugin "@tailwindcss/typography";
+@plugin "tailwindcss-animate";
+
+:root {
+  /* Custom colors - light mode (default) */
+  --background: hsl(0 0% 100%);
+  --foreground: hsl(0 0% 3.9%);
+  --card: hsl(0 0% 100%);
+  --card-foreground: hsl(0 0% 3.9%);
+  --popover: hsl(0 0% 100%);
+  --popover-foreground: hsl(0 0% 3.9%);
+  --primary: hsl(0 0% 9%);
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(0 0% 96.1%);
+  --secondary-foreground: hsl(0 0% 9%);
+  --muted: hsl(0 0% 96.1%);
+  --muted-foreground: hsl(0 0% 45.1%);
+  --accent: hsl(0 0% 96.1%);
+  --accent-foreground: hsl(0 0% 9%);
+  --destructive: hsl(0 84.2% 60.2%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(0 0% 89.8%);
+  --input: hsl(0 0% 89.8%);
+  --ring: hsl(0 0% 3.9%);
+  --chart-1: hsl(12 76% 61%);
+  --chart-2: hsl(173 58% 39%);
+  --chart-3: hsl(197 37% 24%);
+  --chart-4: hsl(43 74% 66%);
+  --chart-5: hsl(27 87% 67%);
+  --sidebar-background: hsl(0 0% 100%);
+  --sidebar-foreground: hsl(0 0% 3.9%);
+  --sidebar-primary: hsl(0 0% 9%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(0 0% 96.1%);
+  --sidebar-accent-foreground: hsl(0 0% 9%);
+  --sidebar-border: hsl(0 0% 89.8%);
+  --sidebar-ring: hsl(0 0% 3.9%);
+
+  /* Radius base */
+  --radius: 1rem;
+}
+.dark {
+  /* Custom colors - dark mode */
+  --background: hsl(0 0% 4%);
+  --foreground: hsl(0 0% 89%);
+  --card: hsl(0 0% 14.9%);
+  --card-foreground: hsl(0 0% 98%);
+  --popover: hsl(0 0% 14.9%);
+  --popover-foreground: hsl(0 0% 98%);
+  --primary: hsl(180 95% 40%);
+  --primary-foreground: hsl(0 0% 9%);
+  --secondary: hsl(0 0% 14.9%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(0 0% 14.9%);
+  --muted-foreground: hsl(0 0% 63.9%);
+  --accent: hsl(0 0% 14.9%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: hsl(0 100% 60%);
+  --destructive-foreground: hsl(0 0% 98%);
+  --border: hsl(0 0% 17%);
+  --input: hsl(0 0% 14.9%);
+  --ring: hsl(0 0% 83.1%);
+  --chart-1: hsl(220 70% 50%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+  --sidebar-background: hsl(0 0% 3.9%);
+  --sidebar-foreground: hsl(0 0% 98%);
+  --sidebar-primary: hsl(0 0% 98%);
+  --sidebar-primary-foreground: hsl(0 0% 9%);
+  --sidebar-accent: hsl(0 0% 14.9%);
+  --sidebar-accent-foreground: hsl(0 0% 98%);
+  --sidebar-border: hsl(0 0% 14.9%);
+  --sidebar-ring: hsl(0 0% 83.1%);
+  --panel-background: hsl(0 0% 11%);
+  --panel-accent: hsl(0 0% 15%);
+}
 
-  If we ever want to remove these styles, we need to add an explicit border
-  color utility to any element that depends on these defaults.
-*/
 @layer base {
+  /*
+    The default border color has changed to `currentcolor` in Tailwind CSS v4,
+    so we've added these compatibility styles to make sure everything still
+    looks the same as it did with Tailwind CSS v3.
+
+    If we ever want to remove these styles, we need to add an explicit border
+    color utility to any element that depends on these defaults.
+  */
   *,
   ::after,
   ::before,
@@ -18,83 +99,7 @@
   ::file-selector-button {
     border-color: var(--color-gray-200, currentcolor);
   }
-}
-
-@layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 1rem;
-    --sidebar-background: 0 0% 100%;
-    --sidebar-foreground: 0 0% 3.9%;
-    --sidebar-primary: 0 0% 9%;
-    --sidebar-primary-foreground: 0 0% 98%;
-    --sidebar-accent: 0 0% 96.1%;
-    --sidebar-accent-foreground: 0 0% 9%;
-    --sidebar-border: 0 0% 89.8%;
-    --sidebar-ring: 0 0% 3.9%;
-  }
-  .dark {
-    --background: 0 0% 4%;
-    --foreground: 0 0% 89%;
-    --card: 0 0% 14.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 14.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 180 95% 40%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 100% 60%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 17%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-    --sidebar-background: 0 0% 3.9%;
-    --sidebar-foreground: 0 0% 98%;
-    --sidebar-primary: 0 0% 98%;
-    --sidebar-primary-foreground: 0 0% 9%;
-    --sidebar-accent: 0 0% 14.9%;
-    --sidebar-accent-foreground: 0 0% 98%;
-    --sidebar-border: 0 0% 14.9%;
-    --sidebar-ring: 0 0% 83.1%;
-    --panel-background: 0 0% 11%;
-    --panel-accent: 0 0% 15%;
-  }
-}
-
-@layer base {
+  /* Other default base styles */
   * {
     @apply border-border;
   }
@@ -104,3 +109,118 @@
     overscroll-behavior-x: contain;
   }
 }
+
+@theme inline {
+  /* Responsive breakpoints */
+  --breakpoint-xs: 30rem;
+
+  /* Typography */
+  --font-sans: var(--font-inter), sans-serif;
+
+  /* Font sizes */
+  --text-base: 0.95rem;
+  --text-base--line-height: calc(1.5 / 0.95);
+  --text-xs: 0.8rem;
+  --text-xs--line-height: calc(1 / 0.8);
+
+  /* Border radius */
+  --radius-lg: var(--radius);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 8px);
+
+  /* Palette mapped to root design tokens */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Chart colors */
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* Sidebar */
+  --color-sidebar: var(--sidebar-background);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Panel */
+  --color-panel: var(--panel-background);
+  --color-panel-accent: var(--panel-accent);
+
+  /* Animations */
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@utility scrollbar-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+@utility scrollbar-x-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar:horizontal {
+    display: none;
+  }
+}
+
+@utility scrollbar-y-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  &::-webkit-scrollbar:vertical {
+    display: none;
+  }
+}
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
index d25b1801..819116c3 100644
--- a/apps/web/src/components/ui/sidebar.tsx
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -518,7 +518,7 @@ const sidebarMenuButtonVariants = cva(
       variant: {
         default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
         outline:
-          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+          "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
       },
       size: {
         default: "h-8 text-sm",
diff --git a/apps/web/tailwind.config.ts b/apps/web/tailwind.config.ts
deleted file mode 100644
index 911aae21..00000000
--- a/apps/web/tailwind.config.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import type { Config } from "tailwindcss";
-import plugin from "tailwindcss/plugin";
-
-export default {
-  darkMode: ["class"],
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/lib/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/constants/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {
-      screens: {
-        xs: "480px",
-      },
-      fontSize: {
-        base: "0.95rem",
-        xs: "0.80rem",
-      },
-      fontFamily: {
-        sans: ["var(--font-inter)", "sans-serif"],
-      },
-      colors: {
-        background: "hsl(var(--background))",
-        foreground: "hsl(var(--foreground))",
-        card: {
-          DEFAULT: "hsl(var(--card))",
-          foreground: "hsl(var(--card-foreground))",
-        },
-        popover: {
-          DEFAULT: "hsl(var(--popover))",
-          foreground: "hsl(var(--popover-foreground))",
-        },
-        primary: {
-          DEFAULT: "hsl(var(--primary))",
-          foreground: "hsl(var(--primary-foreground))",
-        },
-        secondary: {
-          DEFAULT: "hsl(var(--secondary))",
-          foreground: "hsl(var(--secondary-foreground))",
-        },
-        muted: {
-          DEFAULT: "hsl(var(--muted))",
-          foreground: "hsl(var(--muted-foreground))",
-        },
-        accent: {
-          DEFAULT: "hsl(var(--accent))",
-          foreground: "hsl(var(--accent-foreground))",
-        },
-        destructive: {
-          DEFAULT: "hsl(var(--destructive))",
-          foreground: "hsl(var(--destructive-foreground))",
-        },
-        border: "hsl(var(--border))",
-        input: "hsl(var(--input))",
-        ring: "hsl(var(--ring))",
-        chart: {
-          "1": "hsl(var(--chart-1))",
-          "2": "hsl(var(--chart-2))",
-          "3": "hsl(var(--chart-3))",
-          "4": "hsl(var(--chart-4))",
-          "5": "hsl(var(--chart-5))",
-        },
-        sidebar: {
-          DEFAULT: "hsl(var(--sidebar-background))",
-          foreground: "hsl(var(--sidebar-foreground))",
-          primary: "hsl(var(--sidebar-primary))",
-          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
-          accent: "hsl(var(--sidebar-accent))",
-          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
-          border: "hsl(var(--sidebar-border))",
-          ring: "hsl(var(--sidebar-ring))",
-        },
-        panel: {
-          DEFAULT: "hsl(var(--panel-background))",
-          accent: "hsl(var(--panel-accent))",
-        },
-      },
-      borderRadius: {
-        lg: "var(--radius)",
-        md: "calc(var(--radius) - 2px)",
-        sm: "calc(var(--radius) - 8px)",
-      },
-      keyframes: {
-        "accordion-down": {
-          from: {
-            height: "0",
-          },
-          to: {
-            height: "var(--radix-accordion-content-height)",
-          },
-        },
-        "accordion-up": {
-          from: {
-            height: "var(--radix-accordion-content-height)",
-          },
-          to: {
-            height: "0",
-          },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
-  },
-  plugins: [
-    require("@tailwindcss/typography"),
-    require("tailwindcss-animate"),
-    plugin(
-      ({
-        addUtilities,
-      }: {
-        // biome-ignore lint/suspicious/noExplicitAny: <any> used by Tailwind `plugin` API
-        addUtilities: (utilities: Record<string, any>) => void;
-      }) => {
-        addUtilities({
-          ".scrollbar-hidden": {
-            "-ms-overflow-style": "none",
-            "scrollbar-width": "none",
-            "&::-webkit-scrollbar": {
-              display: "none",
-            },
-          },
-          ".scrollbar-x-hidden": {
-            "-ms-overflow-style": "none",
-            "scrollbar-width": "none",
-            "&::-webkit-scrollbar:horizontal": {
-              display: "none",
-            },
-          },
-          ".scrollbar-y-hidden": {
-            "-ms-overflow-style": "none",
-            "scrollbar-width": "none",
-            "&::-webkit-scrollbar:vertical": {
-              display: "none",
-            },
-          },
-        });
-      }
-    ),
-  ],
-  future: {
-    hoverOnlyWhenSupported: true,
-  },
-} satisfies Config;
-- 
cgit v1.3.1


From cd5642161b117fd5cb707cf9d405176459d9f37c Mon Sep 17 00:00:00 2001
From: Brandon McConnell <brandon@dreamthinkbuild.com>
Date: Wed, 30 Jul 2025 16:54:20 -0400
Subject: Swap background CSS inline style for tailwind utility

---
 apps/web/src/components/editor/selection-box.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor/selection-box.tsx b/apps/web/src/components/editor/selection-box.tsx
index 0a97c6f8..ca9d799f 100644
--- a/apps/web/src/components/editor/selection-box.tsx
+++ b/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"
     />
   );
 }
-- 
cgit v1.3.1


From b229d94a8da7b258f1b49867e8cee225d5feb735 Mon Sep 17 00:00:00 2001
From: vracto <vracto@icloud.com>
Date: Wed, 30 Jul 2025 16:56:10 -0500
Subject: add forward and backward buttons to non-fullscreen view (#495)

* feat: create external tools section (#493)

* feat: create external tools section

* fix: better wording

* add forward and backward buttons to non-fullscreen

---------

Co-authored-by: Dominik K. <dominik@koch-bautechnik.de>
Co-authored-by: Maze Winther <mazewinther@gmail.com>
---
 apps/web/package.json                            |  2 +-
 apps/web/src/app/contributors/page.tsx           | 57 +++++++++++++++++++++-
 apps/web/src/components/editor/preview-panel.tsx | 60 +++++++++++++++++++-----
 apps/web/src/components/icons.tsx                | 50 ++++++++++++++++++++
 apps/web/src/constants/site.ts                   | 22 +++++++++
 bun.lock                                         | 22 ++++-----
 6 files changed, 186 insertions(+), 27 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/package.json b/apps/web/package.json
index f5cd7da4..9531b6c7 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -43,7 +43,7 @@
     "input-otp": "^1.4.1",
     "lucide-react": "^0.468.0",
     "motion": "^12.18.1",
-    "next": "^15.4.3",
+    "next": "^15.4.5",
     "next-themes": "^0.4.4",
     "pg": "^8.16.2",
     "radix-ui": "^1.4.2",
diff --git a/apps/web/src/app/contributors/page.tsx b/apps/web/src/app/contributors/page.tsx
index 6a524866..29151bd8 100644
--- a/apps/web/src/app/contributors/page.tsx
+++ b/apps/web/src/app/contributors/page.tsx
@@ -5,8 +5,14 @@ import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Button } from "@/components/ui/button";
 import { ExternalLink } from "lucide-react";
 import Link from "next/link";
-import { GithubIcon } from "@/components/icons";
+import {
+  GithubIcon,
+  MarbleIcon,
+  VercelIcon,
+  DataBuddyIcon,
+} from "@/components/icons";
 import { Badge } from "@/components/ui/badge";
+import { EXTERNAL_TOOLS } from "@/constants/site";
 
 export const metadata: Metadata = {
   title: "Contributors - OpenCut",
@@ -39,7 +45,7 @@ async function getContributors(): Promise<Contributor[]> {
           "User-Agent": "OpenCut-Web-App",
         },
         next: { revalidate: 600 }, // 10 minutes
-      }
+      } as RequestInit
     );
 
     if (!response.ok) {
@@ -236,6 +242,53 @@ export default async function ContributorsPage() {
               </div>
             )}
 
+            <div className="mt-6 mb-20">
+              <div className="text-center mb-12">
+                <h2 className="text-2xl font-semibold mb-2">External Tools</h2>
+                <p className="text-muted-foreground">
+                  Tools we use to build OpenCut
+                </p>
+              </div>
+
+              <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 max-w-4xl mx-auto">
+                {EXTERNAL_TOOLS.map((tool, index) => {
+                  const IconComponent = {
+                    MarbleIcon,
+                    VercelIcon,
+                    DataBuddyIcon,
+                  }[tool.icon];
+
+                  return (
+                    <Link
+                      key={tool.name}
+                      href={tool.url}
+                      target="_blank"
+                      className="group block"
+                      style={{
+                        animationDelay: `${index * 100}ms`,
+                      }}
+                    >
+                      <Card className="h-full bg-background/80 backdrop-blur-sm border-2 group-hover:border-muted-foreground/20 transition-all duration-300 group-hover:shadow-xl">
+                        <CardContent className="p-6 text-center h-full flex flex-col">
+                          <div className="mb-4">
+                            <div className="w-12 h-12 mx-auto rounded-full bg-muted/50 flex items-center justify-center group-hover:bg-muted/70 transition-colors">
+                              <IconComponent className="h-6 w-6" size={24} />
+                            </div>
+                          </div>
+                          <h3 className="font-semibold text-lg mb-2 group-hover:text-foreground/80 transition-colors">
+                            {tool.name}
+                          </h3>
+                          <p className="text-sm text-muted-foreground flex-1">
+                            {tool.description}
+                          </p>
+                        </CardContent>
+                      </Card>
+                    </Link>
+                  );
+                })}
+              </div>
+            </div>
+
             <div className="mt-32 text-center">
               <div className="max-w-2xl mx-auto">
                 <h2 className="text-3xl font-bold mb-4">Join the community</h2>
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 4cc35bb5..39c6795f 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -826,6 +826,18 @@ function PreviewToolbar({
     setCanvasSizeToOriginal(aspectRatio);
   };
 
+  const totalDuration = getTotalDuration();
+
+  const skipBackward = () => {
+    const newTime = Math.max(0, currentTime - 1);
+    setCurrentTime(newTime);
+  };
+
+  const skipForward = () => {
+    const newTime = Math.min(totalDuration, currentTime + 1);
+    setCurrentTime(newTime);
+  };
+
   if (isExpanded) {
     return (
       <FullscreenToolbar
@@ -871,19 +883,41 @@ function PreviewToolbar({
           </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-1">
+        <Button
+          variant="text"
+          size="icon"
+          onClick={skipBackward}
+          disabled={!hasAnyElements}
+          className="h-auto p-0 text-white hover:text-white/80"
+          title="Skip backward 1s"
+        >
+          <SkipBack className="h-3 w-3" />
+        </Button>
+        <Button
+          variant="text"
+          size="icon"
+          onClick={toggle}
+          disabled={!hasAnyElements}
+          className="h-auto p-0 text-white hover:text-white/80"
+        >
+          {isPlaying ? (
+            <Pause className="h-3 w-3" />
+          ) : (
+            <Play className="h-3 w-3" />
+          )}
+        </Button>
+        <Button
+          variant="text"
+          size="icon"
+          onClick={skipForward}
+          disabled={!hasAnyElements}
+          className="h-auto p-0 text-white hover:text-white/80"
+          title="Skip forward 1s"
+        >
+          <SkipForward className="h-3 w-3" />
+        </Button>
+      </div>
       <div className="flex items-center gap-3">
         <BackgroundSettings />
         <DropdownMenu>
diff --git a/apps/web/src/components/icons.tsx b/apps/web/src/components/icons.tsx
index 6099c052..43f953e8 100644
--- a/apps/web/src/components/icons.tsx
+++ b/apps/web/src/components/icons.tsx
@@ -113,3 +113,53 @@ export function BackgroundIcon({ className }: { className?: string }) {
     </svg>
   );
 }
+
+export function MarbleIcon({
+  className = "",
+  size = 32,
+}: {
+  className?: string;
+  size?: number;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      className={className}
+      fill="none"
+      viewBox="0 0 256 256"
+    >
+      <path fill="#202027" d="M0 0h256v256H0z" />
+      <path
+        fill="#fff"
+        d="M116.032 94.016q1.408.256 6.272 9.856 4.856 9.472 11.904 24.576l4.096 8.576a42.4 42.4 0 0 0 4.992-6.784q2.304-3.96 5.76-10.624 3.96-7.56 5.504-9.728 6.144-9.344 13.312-19.84.896-1.408 3.2-1.92a4.8 4.8 0 0 1 1.28-.128q3.072 0 6.784 2.56 3.84 2.56 4.992 5.248a4.8 4.8 0 0 1 .256 1.92q0 1.28-.128 1.92l-.64 2.944q-.256 1.664-.512 3.968a3200 3200 0 0 0-5.888 46.848 56 56 0 0 0-.512 8.064l-.256 4.096a32 32 0 0 0-.128 2.944q0 1.672-.384 2.304-.384.64-1.408.64-.768 0-2.304-.384-4.096-.896-6.272-3.2-2.176-2.432-2.432-6.656-.128-2.176-.128-6.784 0-4.736.256-14.464l.128-7.04.256-10.112q-1.152 1.024-5.888 8.064a328 328 0 0 0-9.088 14.464q-4.48 7.56-5.888 11.648-1.28 3.2-2.56 4.736-1.152 1.536-2.816 1.536-1.536 0-3.968-1.408-6.912-4.224-8.448-11.648a336 336 0 0 0-6.016-23.68 40 40 0 0 0-2.56-6.272q-1.792-3.968-2.304-4.992l-1.664-3.328q-18.68 24.832-25.344 45.568-1.28 4.352-2.432 6.272-1.152 1.792-2.688 1.792-2.432 0-6.912-4.352Q72 158.144 72 154.304q0-2.04.768-4.096a108 108 0 0 1 16-30.08l3.968-5.248a432 432 0 0 0 12.16-16.64q3.072-4.48 8.192-4.48.896 0 2.944.256"
+      />
+    </svg>
+  );
+}
+
+export function DataBuddyIcon({
+  className = "",
+  size = 32,
+}: {
+  className?: string;
+  size?: number;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      className={className}
+      viewBox="0 0 8 8"
+      shapeRendering="crispEdges"
+    >
+      <path d="M0 0h8v8H0z" />
+      <path
+        fill="#fff"
+        d="M1 1h1v6H1zm1 0h4v1H2zm4 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zm0 1h1v1H6zM2 6h4v1H2zm1-3h1v1H3zm1 1h1v1H4z"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/src/constants/site.ts b/apps/web/src/constants/site.ts
index f47f6470..00bd649f 100644
--- a/apps/web/src/constants/site.ts
+++ b/apps/web/src/constants/site.ts
@@ -9,3 +9,25 @@ export const SITE_INFO = {
   twitterImage: "/open-graph/default.jpg",
   favicon: "/favicon.ico",
 };
+
+export const EXTERNAL_TOOLS = [
+  {
+    name: "Marble",
+    description:
+      "Modern headless CMS for content management and the blog for OpenCut",
+    url: "https://marblecms.com?utm_source=opencut",
+    icon: "MarbleIcon" as const,
+  },
+  {
+    name: "Vercel",
+    description: "Platform where we deploy and host OpenCut",
+    url: "https://vercel.com?utm_source=opencut",
+    icon: "VercelIcon" as const,
+  },
+  {
+    name: "Databuddy",
+    description: "GDPR compliant analytics and user insights for OpenCut",
+    url: "https://databuddy.cc?utm_source=opencut",
+    icon: "DataBuddyIcon" as const,
+  },
+];
diff --git a/bun.lock b/bun.lock
index 72bd43c3..f571e022 100644
--- a/bun.lock
+++ b/bun.lock
@@ -46,7 +46,7 @@
         "input-otp": "^1.4.1",
         "lucide-react": "^0.468.0",
         "motion": "^12.18.1",
-        "next": "^15.4.3",
+        "next": "^15.4.5",
         "next-themes": "^0.4.4",
         "pg": "^8.16.2",
         "radix-ui": "^1.4.2",
@@ -1314,7 +1314,7 @@
 
     "next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
 
-    "opencut/next": ["next@15.4.3", "", { "dependencies": { "@next/env": "15.4.3", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.4.3", "@next/swc-darwin-x64": "15.4.3", "@next/swc-linux-arm64-gnu": "15.4.3", "@next/swc-linux-arm64-musl": "15.4.3", "@next/swc-linux-x64-gnu": "15.4.3", "@next/swc-linux-x64-musl": "15.4.3", "@next/swc-win32-arm64-msvc": "15.4.3", "@next/swc-win32-x64-msvc": "15.4.3", "sharp": "^0.34.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-uW7Qe6poVasNIE1X382nI29oxSdFJzjQzTgJFLD43MxyPfGKKxCMySllhBpvqr48f58Om+tLMivzRwBpXEytvA=="],
+    "opencut/next": ["next@15.4.5", "", { "dependencies": { "@next/env": "15.4.5", "@swc/helpers": "0.5.15", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.4.5", "@next/swc-darwin-x64": "15.4.5", "@next/swc-linux-arm64-gnu": "15.4.5", "@next/swc-linux-arm64-musl": "15.4.5", "@next/swc-linux-x64-gnu": "15.4.5", "@next/swc-linux-x64-musl": "15.4.5", "@next/swc-win32-arm64-msvc": "15.4.5", "@next/swc-win32-x64-msvc": "15.4.5", "sharp": "^0.34.3" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.51.1", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-nJ4v+IO9CPmbmcvsPebIoX3Q+S7f6Fu08/dEWu0Ttfa+wVwQRh9epcmsyCPjmL2b8MxC+CkBR97jgDhUUztI3g=="],
 
     "opencut/zod": ["zod@3.25.76", "", {}, "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="],
 
@@ -1392,23 +1392,23 @@
 
     "motion/framer-motion/motion-utils": ["motion-utils@12.23.6", "", {}, "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ=="],
 
-    "opencut/next/@next/env": ["@next/env@15.4.3", "", {}, "sha512-lKJ9KJAvaWzqurIsz6NWdQOLj96mdhuDMusLSYHw9HBe2On7BjUwU1WeRvq19x7NrEK3iOgMeSBV5qEhVH1cMw=="],
+    "opencut/next/@next/env": ["@next/env@15.4.5", "", {}, "sha512-ruM+q2SCOVCepUiERoxOmZY9ZVoecR3gcXNwCYZRvQQWRjhOiPJGmQ2fAiLR6YKWXcSAh7G79KEFxN3rwhs4LQ=="],
 
-    "opencut/next/@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@15.4.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-YAhZWKeEYY7LHQJiQ8fe3Y6ymfcDcTn7rDC8PDu/pdeIl1Z2LHD4uyPNuQUGCEQT//MSNv6oZCeQzZfTCKZv+A=="],
+    "opencut/next/@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@15.4.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-84dAN4fkfdC7nX6udDLz9GzQlMUwEMKD7zsseXrl7FTeIItF8vpk1lhLEnsotiiDt+QFu3O1FVWnqwcRD2U3KA=="],
 
-    "opencut/next/@next/swc-darwin-x64": ["@next/swc-darwin-x64@15.4.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-ZPHRdd51xaxCMpT4viQ6h8TgYM1zPW1JIeksPY9wKlyvBVUQqrWqw8kEh1sa7/x0Ied+U7pYHkAkutrUwxbMcg=="],
+    "opencut/next/@next/swc-darwin-x64": ["@next/swc-darwin-x64@15.4.5", "", { "os": "darwin", "cpu": "x64" }, "sha512-CL6mfGsKuFSyQjx36p2ftwMNSb8PQog8y0HO/ONLdQqDql7x3aJb/wB+LA651r4we2pp/Ck+qoRVUeZZEvSurA=="],
 
-    "opencut/next/@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@15.4.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-QUdqftCXC5vw5cowucqi9FeOPQ0vdMxoOHLY0J5jPdercwSJFjdi9CkEO4Xkq1eG4t1TB/BG81n6rmTsWoILnw=="],
+    "opencut/next/@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@15.4.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-1hTVd9n6jpM/thnDc5kYHD1OjjWYpUJrJxY4DlEacT7L5SEOXIifIdTye6SQNNn8JDZrcN+n8AWOmeJ8u3KlvQ=="],
 
-    "opencut/next/@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@15.4.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-HTL31NsmoafX+r5g91Yj3+q34nrn1xKmCWVuNA+fUWO4X0pr+n83uGzLyEOn0kUqbMZ40KmWx+4wsbMoUChkiQ=="],
+    "opencut/next/@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@15.4.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-4W+D/nw3RpIwGrqpFi7greZ0hjrCaioGErI7XHgkcTeWdZd146NNu1s4HnaHonLeNTguKnL2Urqvj28UJj6Gqw=="],
 
-    "opencut/next/@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@15.4.3", "", { "os": "linux", "cpu": "x64" }, "sha512-HRQLWoeFkKXd2YCEEy9GhfwOijRm37x4w5r0MMVHxBKSA6ms3JoPUXvGhfHT6srnGRcEUWNrQ2vzkHir5ZWTSw=="],
+    "opencut/next/@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@15.4.5", "", { "os": "linux", "cpu": "x64" }, "sha512-N6Mgdxe/Cn2K1yMHge6pclffkxzbSGOydXVKYOjYqQXZYjLCfN/CuFkaYDeDHY2VBwSHyM2fUjYBiQCIlxIKDA=="],
 
-    "opencut/next/@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@15.4.3", "", { "os": "linux", "cpu": "x64" }, "sha512-NyXUx6G7AayaRGUsVPenuwhyAoyxjQuQPaK50AXoaAHPwRuif4WmSrXUs8/Y0HJIZh8E/YXRm9H7uuGfiacpuQ=="],
+    "opencut/next/@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@15.4.5", "", { "os": "linux", "cpu": "x64" }, "sha512-YZ3bNDrS8v5KiqgWE0xZQgtXgCTUacgFtnEgI4ccotAASwSvcMPDLua7BWLuTfucoRv6mPidXkITJLd8IdJplQ=="],
 
-    "opencut/next/@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@15.4.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-2CUTmpzN/7cL1a7GjdLkDFlfH3nwMwW8a6JiaAUsL9MtKmNNO3fnXqnY0Zk30fii3hVEl4dr7ztrpYt0t2CcGQ=="],
+    "opencut/next/@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@15.4.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-9Wr4t9GkZmMNcTVvSloFtjzbH4vtT4a8+UHqDoVnxA5QyfWe6c5flTH1BIWPGNWSUlofc8dVJAE7j84FQgskvQ=="],
 
-    "opencut/next/@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@15.4.3", "", { "os": "win32", "cpu": "x64" }, "sha512-i54YgUhvrUQxQD84SjAbkfWhYkOdm/DNRAVekCHLWxVg3aUbyC6NFQn9TwgCkX5QAS2pXCJo3kFboSFvrsd7dA=="],
+    "opencut/next/@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@15.4.5", "", { "os": "win32", "cpu": "x64" }, "sha512-voWk7XtGvlsP+w8VBz7lqp8Y+dYw/MTI4KeS0gTVtfdhdJ5QwhXLmNrndFOin/MDoCvUaLWMkYKATaCoUkt2/A=="],
 
     "opencut/next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
 
-- 
cgit v1.3.1


From f255ccb818358b90edd0c1bc1f3a690dc1e729ac Mon Sep 17 00:00:00 2001
From: melad <meladnaieem@yahoo.com>
Date: Thu, 31 Jul 2025 13:50:22 +0300
Subject: feat: add hide or show for media elements, mute or unmute for audio
 elements (#500)

* feat: create external tools section (#493)

* feat: create external tools section

* fix: better wording

* Feature, added hide or show for media elements, mute or unmute for audio elements both effective on timeline and preview panel, with overlay icon for indicating so and state storing,

* Minor UI vertical separator between magnifier and other buttons

* fixed the AbortError issue in the AudioWaveform component. The error was occurring because of a race condition during cleanup when the component unmounts.

* feat: implement bookmarking functionality in the timeline and project storage

- Added bookmark management methods in the project store for toggling and checking bookmarks.
- Updated the timeline component to display bookmark markers and integrate bookmark actions in the context menu.
- Enhanced the storage service to handle bookmarks in project serialization and deserialization.
- Updated project types to include bookmarks as an array of numbers.

---------

Co-authored-by: Dominik K. <dominik@koch-bautechnik.de>
Co-authored-by: Maze Winther <mazewinther@gmail.com>
---
 apps/web/src/components/editor/audio-waveform.tsx  | 85 ++++++++++++++-----
 apps/web/src/components/editor/preview-panel.tsx   |  1 +
 apps/web/src/components/editor/timeline/index.tsx  | 63 ++++++++++++++
 .../editor/timeline/timeline-element.tsx           | 51 +++++++++++-
 apps/web/src/lib/storage/storage-service.ts        |  4 +
 apps/web/src/lib/storage/types.ts                  |  1 +
 apps/web/src/stores/project-store.ts               | 97 ++++++++++++++++++++++
 apps/web/src/stores/timeline-store.ts              | 19 +++++
 apps/web/src/types/project.ts                      |  1 +
 apps/web/src/types/timeline.ts                     |  1 +
 10 files changed, 302 insertions(+), 21 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor/audio-waveform.tsx b/apps/web/src/components/editor/audio-waveform.tsx
index a673f995..372a31c5 100644
--- a/apps/web/src/components/editor/audio-waveform.tsx
+++ b/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();
-
-    return () => {
-      mounted = false;
-      if (wavesurfer.current) {
+    // 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 {
-          wavesurfer.current.destroy();
+          wsToDestroy.destroy();
         } catch (e) {
-          // Silently ignore destroy errors
+          // Ignore errors during destroy
+        }
+        // Only initialize new instance after destroying the old one
+        if (mounted) {
+          initWaveSurfer();
         }
-        wavesurfer.current = null;
+      });
+    } else {
+      // No previous instance to clean up, initialize directly
+      initWaveSurfer();
+    }
+
+    return () => {
+      // Mark component as unmounted
+      mounted = false;
+      
+      // 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]);
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 39c6795f..55d52bed 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -234,6 +234,7 @@ export function PreviewPanel() {
 
     tracks.forEach((track) => {
       track.elements.forEach((element) => {
+        if (element.hidden) return;
         const elementStart = element.startTime;
         const elementEnd =
           element.startTime +
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index 078f1258..9833adad 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -19,6 +19,7 @@ import {
   Link,
   ZoomIn,
   ZoomOut,
+  Bookmark,
 } from "lucide-react";
 import {
   Tooltip,
@@ -651,6 +652,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>
@@ -773,6 +798,23 @@ export function Timeline() {
                           <ContextMenuItem onClick={(e) => e.stopPropagation()}>
                             Track settings (soon)
                           </ContextMenuItem>
+                          {activeProject?.bookmarks?.length && activeProject.bookmarks.length > 0 && (
+                            <>
+                              <ContextMenuItem disabled>Bookmarks</ContextMenuItem>
+                              {activeProject.bookmarks.map((bookmarkTime, i) => (
+                                <ContextMenuItem 
+                                  key={`bookmark-menu-${i}`}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    seek(bookmarkTime);
+                                  }}
+                                >
+                                  <Bookmark className="h-3 w-3 mr-2 inline-block" />
+                                  {bookmarkTime.toFixed(1)}s
+                                </ContextMenuItem>
+                              ))}
+                              </>
+                          )}
                         </ContextMenuContent>
                       </ContextMenu>
                     ))}
@@ -828,6 +870,7 @@ function TimelineToolbar({
     toggleRippleEditing,
   } = useTimelineStore();
   const { currentTime, duration, isPlaying, toggle } = usePlaybackStore();
+  const { toggleBookmark, isBookmarked } = useProjectStore();
 
   // Action handlers
   const handleSplitSelected = () => {
@@ -957,6 +1000,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">
@@ -1088,6 +1138,17 @@ 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">
@@ -1121,6 +1182,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" />
diff --git a/apps/web/src/components/editor/timeline/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx
index f581bbf0..96859c38 100644
--- a/apps/web/src/components/editor/timeline/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-element.tsx
@@ -13,6 +13,10 @@ import {
   Type,
   Copy,
   RefreshCw,
+  EyeOff,
+  Eye,
+  Volume2,
+  VolumeX,
 } from "lucide-react";
 import { useMediaStore } from "@/stores/media-store";
 import { useTimelineStore } from "@/stores/timeline-store";
@@ -66,11 +70,18 @@ export function TimelineElement({
     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,
@@ -141,6 +152,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") {
@@ -332,7 +348,7 @@ export function TimelineElement({
               track.type
             )} ${isSelected ? "border-b-[0.5px] border-t-[0.5px] border-foreground" : ""} ${
               isBeingDragged ? "z-50" : "z-10"
-            }`}
+            } ${element.hidden ? "opacity-50" : ""}`}
             onClick={(e) => onElementClick && onElementClick(e, element)}
             onMouseDown={handleElementMouseDown}
             onContextMenu={(e) =>
@@ -343,6 +359,16 @@ 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
@@ -363,6 +389,29 @@ export function TimelineElement({
           <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"}
diff --git a/apps/web/src/lib/storage/storage-service.ts b/apps/web/src/lib/storage/storage-service.ts
index 0037dbdb..2ff63ac7 100644
--- a/apps/web/src/lib/storage/storage-service.ts
+++ b/apps/web/src/lib/storage/storage-service.ts
@@ -63,6 +63,8 @@ class StorageService {
       backgroundColor: project.backgroundColor,
       backgroundType: project.backgroundType,
       blurIntensity: project.blurIntensity,
+      bookmarks: project.bookmarks,
+      fps: project.fps,
     };
 
     await this.projectsAdapter.set(project.id, serializedProject);
@@ -83,6 +85,8 @@ class StorageService {
       backgroundColor: serializedProject.backgroundColor,
       backgroundType: serializedProject.backgroundType,
       blurIntensity: serializedProject.blurIntensity,
+      bookmarks: serializedProject.bookmarks,
+      fps: serializedProject.fps,
     };
   }
 
diff --git a/apps/web/src/lib/storage/types.ts b/apps/web/src/lib/storage/types.ts
index b662c164..0cfafd47 100644
--- a/apps/web/src/lib/storage/types.ts
+++ b/apps/web/src/lib/storage/types.ts
@@ -37,6 +37,7 @@ export interface StorageConfig {
 export type SerializedProject = Omit<TProject, "createdAt" | "updatedAt"> & {
   createdAt: string;
   updatedAt: string;
+  bookmarks?: number[];
 };
 
 // Extend FileSystemDirectoryHandle with missing async iterator methods
diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index 7bb38039..69aca3ec 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -27,6 +27,11 @@ interface ProjectStore {
     options?: { backgroundColor?: string; blurIntensity?: number }
   ) => Promise<void>;
   updateProjectFps: (fps: number) => Promise<void>;
+  
+  // Bookmark methods
+  toggleBookmark: (time: number) => Promise<void>;
+  isBookmarked: (time: number) => boolean;
+  removeBookmark: (time: number) => Promise<void>;
 
   getFilteredAndSortedProjects: (
     searchQuery: string,
@@ -39,6 +44,97 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
   savedProjects: [],
   isLoading: true,
   isInitialized: false,
+  
+  // Implementation of bookmark methods
+  toggleBookmark: async (time: number) => {
+    const { activeProject } = get();
+    if (!activeProject) return;
+    
+    // Round time to the nearest frame
+    const fps = activeProject.fps || 30;
+    const frameTime = Math.round(time * fps) / fps;
+    
+    const bookmarks = activeProject.bookmarks || [];
+    let updatedBookmarks: number[];
+    
+    // Check if already bookmarked
+    const bookmarkIndex = bookmarks.findIndex(
+      bookmark => Math.abs(bookmark - frameTime) < 0.001
+    );
+    
+    if (bookmarkIndex !== -1) {
+      // Remove bookmark
+      updatedBookmarks = bookmarks.filter((_, i) => i !== bookmarkIndex);
+    } else {
+      // Add bookmark
+      updatedBookmarks = [...bookmarks, frameTime].sort((a, b) => a - b);
+    }
+    
+    const updatedProject = {
+      ...activeProject,
+      bookmarks: updatedBookmarks,
+      updatedAt: new Date(),
+    };
+    
+    try {
+      await storageService.saveProject(updatedProject);
+      set({ activeProject: updatedProject });
+      await get().loadAllProjects(); // Refresh the list
+    } catch (error) {
+      console.error("Failed to update project bookmarks:", error);
+      toast.error("Failed to update bookmarks", {
+        description: "Please try again",
+      });
+    }
+  },
+  
+  isBookmarked: (time: number) => {
+    const { activeProject } = get();
+    if (!activeProject || !activeProject.bookmarks) return false;
+    
+    // Round time to the nearest frame
+    const fps = activeProject.fps || 30;
+    const frameTime = Math.round(time * fps) / fps;
+    
+    return activeProject.bookmarks.some(
+      bookmark => Math.abs(bookmark - frameTime) < 0.001
+    );
+  },
+  
+  removeBookmark: async (time: number) => {
+    const { activeProject } = get();
+    if (!activeProject || !activeProject.bookmarks) return;
+    
+    // Round time to the nearest frame
+    const fps = activeProject.fps || 30;
+    const frameTime = Math.round(time * fps) / fps;
+    
+    const updatedBookmarks = activeProject.bookmarks.filter(
+      bookmark => Math.abs(bookmark - frameTime) >= 0.001
+    );
+    
+    if (updatedBookmarks.length === activeProject.bookmarks.length) {
+      // No bookmark found to remove
+      return;
+    }
+    
+    const updatedProject = {
+      ...activeProject,
+      bookmarks: updatedBookmarks,
+      updatedAt: new Date(),
+    };
+    
+    try {
+      await storageService.saveProject(updatedProject);
+      set({ activeProject: updatedProject });
+      await get().loadAllProjects(); // Refresh the list
+    } catch (error) {
+      console.error("Failed to update project bookmarks:", error);
+      toast.error("Failed to remove bookmark", {
+        description: "Please try again",
+      });
+    }
+  },
 
   createNewProject: async (name: string) => {
     const newProject: TProject = {
@@ -50,6 +146,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
       backgroundColor: "#000000",
       backgroundType: "color",
       blurIntensity: 8,
+      bookmarks: [],
     };
 
     set({ activeProject: newProject });
diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index f3497be9..0f441176 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -126,6 +126,7 @@ interface TimelineStore {
     pushHistory?: boolean
   ) => void;
   toggleTrackMute: (trackId: string) => void;
+  toggleElementHidden: (trackId: string, elementId: string) => void;
 
   // Split operations for elements
   splitElement: (
@@ -868,6 +869,24 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
       );
     },
 
+    toggleElementHidden: (trackId, elementId) => {
+      get().pushHistory();
+      updateTracksAndSave(
+        get()._tracks.map((track) =>
+          track.id === trackId
+            ? {
+                ...track,
+                elements: track.elements.map((element) =>
+                  element.id === elementId
+                    ? { ...element, hidden: !element.hidden }
+                    : element
+                ),
+              }
+            : track
+        )
+      );
+    },
+
     updateTextElement: (trackId, elementId, updates) => {
       get().pushHistory();
       updateTracksAndSave(
diff --git a/apps/web/src/types/project.ts b/apps/web/src/types/project.ts
index 58d37b03..f52cba73 100644
--- a/apps/web/src/types/project.ts
+++ b/apps/web/src/types/project.ts
@@ -9,4 +9,5 @@ export interface TProject {
   backgroundType?: "color" | "blur";
   blurIntensity?: number; // in pixels (4, 8, 18)
   fps?: number;
+  bookmarks?: number[];
 }
diff --git a/apps/web/src/types/timeline.ts b/apps/web/src/types/timeline.ts
index ef20c642..cd17b7dd 100644
--- a/apps/web/src/types/timeline.ts
+++ b/apps/web/src/types/timeline.ts
@@ -11,6 +11,7 @@ interface BaseTimelineElement {
   startTime: number;
   trimStart: number;
   trimEnd: number;
+  hidden?: boolean;
 }
 
 // Media element that references MediaStore
-- 
cgit v1.3.1


From 83b568402ab7a7f0d39f48c8b0fe541e0cad76db Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Thu, 31 Jul 2025 13:14:25 +0200
Subject: fix: button outline styling

---
 apps/web/src/components/ui/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index 5902af65..3a1a511f 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -15,7 +15,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         text: "bg-transparent p-0 rounded-none hover:text-muted-foreground", // Instead of ghost (matches app better)
-- 
cgit v1.3.1


From 2bde71d4bc20948ce54795aa61d239c1a94c82d3 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Thu, 31 Jul 2025 13:14:58 +0200
Subject: style: dialog cancel button

---
 apps/web/src/components/delete-project-dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/delete-project-dialog.tsx b/apps/web/src/components/delete-project-dialog.tsx
index e2b32dda..e8f8703c 100644
--- a/apps/web/src/components/delete-project-dialog.tsx
+++ b/apps/web/src/components/delete-project-dialog.tsx
@@ -49,7 +49,7 @@ export function DeleteProjectDialog({
         </DialogHeader>
         <DialogFooter>
           <Button
-            variant="outline"
+            variant="text"
             onClick={(e) => {
               e.preventDefault();
               e.stopPropagation();
-- 
cgit v1.3.1


From 3c64f9cfa2a400b809d320b6799dd9d69b3abee1 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Thu, 31 Jul 2025 21:46:33 +0200
Subject: Merge pull request
 [#494](https://github.com/mazeincoding/AppCut/issues/494)

---
 .../components/editor/properties-panel/index.tsx   |  2 +-
 apps/web/src/stores/playback-store.ts              | 32 ++++++++++++++++++----
 2 files changed, 28 insertions(+), 6 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index 720c4a26..f1b3f6a3 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/apps/web/src/components/editor/properties-panel/index.tsx
@@ -67,7 +67,7 @@ export function PropertiesPanel() {
         <div className="flex flex-col gap-1">
           <Label className="text-xs text-muted-foreground">Frame rate:</Label>
           <Select
-            value={(activeProject?.fps || 30).toString()}
+            value={(activeProject?.fps || "N/A").toString()}
             onValueChange={handleFpsChange}
           >
             <SelectTrigger className="w-32 h-6 text-xs">
diff --git a/apps/web/src/stores/playback-store.ts b/apps/web/src/stores/playback-store.ts
index 543865f9..feea0f46 100644
--- a/apps/web/src/stores/playback-store.ts
+++ b/apps/web/src/stores/playback-store.ts
@@ -1,5 +1,7 @@
 import { create } from "zustand";
 import type { PlaybackState, PlaybackControls } from "@/types/playback";
+import { useTimelineStore } from "@/stores/timeline-store";
+import { useProjectStore } from "./project-store";
 
 interface PlaybackStore extends PlaybackState, PlaybackControls {
   setDuration: (duration: number) => void;
@@ -20,13 +22,33 @@ const startTimer = (store: () => PlaybackStore) => {
       lastUpdate = now;
 
       const newTime = state.currentTime + delta * state.speed;
-      if (newTime >= state.duration) {
-        // When video completes, pause and reset playhead to start
+
+      // Get actual content duration from timeline store
+      const actualContentDuration = useTimelineStore
+        .getState()
+        .getTotalDuration();
+
+      // Stop at actual content end, not timeline duration (which has 10s minimum)
+      // It was either this or reducing default min timeline to 1 second
+      const effectiveDuration =
+        actualContentDuration > 0 ? actualContentDuration : state.duration;
+
+      if (newTime >= effectiveDuration) {
+        // When content completes, pause just before the end so we can see the last frame
+        const projectFps = useProjectStore.getState().activeProject?.fps;
+        if (!projectFps)
+          console.error("Project FPS is not set, assuming 30fps");
+
+        const frameOffset = 1 / (projectFps ?? 30); // Stop 1 frame before end based on project FPS
+        const stopTime = Math.max(0, effectiveDuration - frameOffset);
+
         state.pause();
-        state.setCurrentTime(0);
-        // Notify video elements to sync with reset
+        state.setCurrentTime(stopTime);
+        // Notify video elements to sync with end position
         window.dispatchEvent(
-          new CustomEvent("playback-seek", { detail: { time: 0 } })
+          new CustomEvent("playback-seek", {
+            detail: { time: stopTime },
+          })
         );
       } else {
         state.setCurrentTime(newTime);
-- 
cgit v1.3.1


From c60ec04f8d2c52f7822c5e3de00041307a26ceed Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Thu, 31 Jul 2025 22:27:19 +0200
Subject: style: rename project dialog

---
 apps/web/src/components/rename-project-dialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/rename-project-dialog.tsx b/apps/web/src/components/rename-project-dialog.tsx
index c50f9f71..e2b01be0 100644
--- a/apps/web/src/components/rename-project-dialog.tsx
+++ b/apps/web/src/components/rename-project-dialog.tsx
@@ -51,7 +51,7 @@ export function RenameProjectDialog({
             }
           }}
           placeholder="Enter a new name"
-          className="mt-4"
+          className="mt-4 bg-background/50"
         />
 
         <DialogFooter>
-- 
cgit v1.3.1


From 5475cea0de076afc831561251dd89008b646b0c0 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Thu, 31 Jul 2025 23:01:02 +0200
Subject: style: fresh look on header

---
 apps/web/src/components/editor-header.tsx | 130 +++++++++++++++++-------------
 1 file changed, 73 insertions(+), 57 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 837bd97a..25dcc85c 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -1,23 +1,31 @@
 "use client";
 
-import Link from "next/link";
 import { Button } from "./ui/button";
-import { ChevronLeft, Download } from "lucide-react";
+import { ChevronDown, ArrowLeft, Download, SquarePen, Trash } from "lucide-react";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { HeaderBase } from "./header-base";
 import { formatTimeCode } from "@/lib/time";
 import { useProjectStore } from "@/stores/project-store";
 import { KeyboardShortcutsHelp } from "./keyboard-shortcuts-help";
-import { useState, useRef } from "react";
-import { Input } from "@/components/ui/input";
-import { toast } from "sonner";
+import { useState } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import Link from "next/link";
+import { RenameProjectDialog } from "./rename-project-dialog";
+import { DeleteProjectDialog } from "./delete-project-dialog";
+import { useRouter } from "next/navigation";
 
 export function EditorHeader() {
   const { getTotalDuration } = useTimelineStore();
-  const { activeProject, renameProject } = useProjectStore();
-  const [isEditing, setIsEditing] = useState(false);
-  const [newName, setNewName] = useState(activeProject?.name || "");
-  const inputRef = useRef<HTMLInputElement>(null);
+  const { activeProject, renameProject, deleteProject } = useProjectStore();
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+  const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
+  const router = useRouter();
 
   const handleExport = () => {
     // TODO: Implement export functionality
@@ -26,66 +34,75 @@ export function EditorHeader() {
     window.open("https://youtube.com/watch?v=dQw4w9WgXcQ", "_blank");
   };
 
-  const handleNameClick = () => {
-    if (!activeProject) return;
-    setNewName(activeProject.name);
-    setIsEditing(true);
-  };
-
-  const handleNameSave = async () => {
+  const handleNameSave = async (newName: string) => {
+    console.log("handleNameSave", newName);
     if (activeProject && newName.trim() && newName !== activeProject.name) {
       try {
         await renameProject(activeProject.id, newName.trim());
+        setIsRenameDialogOpen(false);
       } catch (error) {
         console.error("Failed to rename project:", error);
-        setNewName(activeProject.name);
       }
     }
-    setIsEditing(false);
   };
 
-  const handleInputKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter") handleNameSave();
-    else if (e.key === "Escape") setIsEditing(false);
+  const handleDelete = () => {
+    if (activeProject) {
+      deleteProject(activeProject.id);
+      setIsDeleteDialogOpen(false);
+      router.push("/projects");
+    }
   };
 
   const leftContent = (
     <div className="flex items-center gap-2">
-      <Link
-        href="/projects"
-        className="font-medium tracking-tight flex items-center gap-2 hover:opacity-80 transition-opacity"
-      >
-        <ChevronLeft className="h-4 w-4" />
-      </Link>
-      <div className="w-40 xl:w-60 h-9 flex items-center">
-        {isEditing ? (
-          <Input
-            ref={inputRef}
-            className="text-sm font-medium w-full px-2 py-1 h-9 truncate"
-            value={newName}
-            onChange={(e) => setNewName(e.target.value)}
-            onBlur={handleNameSave}
-            onKeyDown={handleInputKeyDown}
-            onFocus={(e) => e.target.select()}
-            maxLength={64}
-            aria-label="Project name"
-            autoFocus
-          />
-        ) : (
-          <span
-            className="text-sm font-medium cursor-pointer hover:underline"
-            title="Click to rename"
-            role="button"
-            tabIndex={0}
-            onClick={handleNameClick}
-            onKeyDown={(e) => e.key === "Enter" && handleNameClick()}
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="secondary"
+            className="h-auto py-1.5 px-2.5 flex items-center justify-center"
           >
-            <div className="truncate text-ellipsis overflow-clip max-w-40 xl:max-w-60">
-              {activeProject?.name}
-            </div>
-          </span>
-        )}
-      </div>
+            <ChevronDown className="text-muted-foreground" />
+            <span className="text-[0.85rem] mr-2">{activeProject?.name}</span>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="w-40">
+          <Link href="/projects">
+            <DropdownMenuItem className="flex items-center gap-1.5">
+              <ArrowLeft className="h-4 w-4" />
+              Projects
+            </DropdownMenuItem>
+          </Link>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            className="flex items-center gap-1.5"
+            onClick={() => setIsRenameDialogOpen(true)}
+          >
+            <SquarePen className="h-4 w-4" />
+            Rename project
+          </DropdownMenuItem>
+          <DropdownMenuItem
+            variant="destructive"
+            className="flex items-center gap-1.5"
+            onClick={() => setIsDeleteDialogOpen(true)}
+          >
+            <Trash className="h-4 w-4" />
+            Delete Project
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <RenameProjectDialog
+        isOpen={isRenameDialogOpen}
+        onOpenChange={setIsRenameDialogOpen}
+        onConfirm={handleNameSave}
+        projectName={activeProject?.name || ""}
+      />
+      <DeleteProjectDialog
+        isOpen={isDeleteDialogOpen}
+        onOpenChange={setIsDeleteDialogOpen}
+        onConfirm={handleDelete}
+        projectName={activeProject?.name || ""}
+      />
     </div>
   );
 
@@ -106,8 +123,7 @@ export function EditorHeader() {
       <KeyboardShortcutsHelp />
       <Button
         size="sm"
-        variant="primary"
-        className="h-7 text-xs"
+        className="h-7 text-xs !bg-linear-to-r from-cyan-400 to-blue-500 text-white hover:opacity-85 transition-opacity"
         onClick={handleExport}
       >
         <Download className="h-4 w-4" />
-- 
cgit v1.3.1


From 60d4b0c3d6a0cc69f165f7db8ad5099b3d1589ca Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Thu, 31 Jul 2025 23:10:12 +0200
Subject: feat: add discord link to editor header

---
 apps/web/src/components/editor-header.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 25dcc85c..99cea3e8 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -19,6 +19,7 @@ import Link from "next/link";
 import { RenameProjectDialog } from "./rename-project-dialog";
 import { DeleteProjectDialog } from "./delete-project-dialog";
 import { useRouter } from "next/navigation";
+import { FaDiscord, FaGithub } from "react-icons/fa6";
 
 export function EditorHeader() {
   const { getTotalDuration } = useTimelineStore();
@@ -73,7 +74,6 @@ export function EditorHeader() {
               Projects
             </DropdownMenuItem>
           </Link>
-          <DropdownMenuSeparator />
           <DropdownMenuItem
             className="flex items-center gap-1.5"
             onClick={() => setIsRenameDialogOpen(true)}
@@ -89,6 +89,18 @@ export function EditorHeader() {
             <Trash className="h-4 w-4" />
             Delete Project
           </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem asChild>
+            <Link
+              href="https://discord.gg/zmR9N35cjK"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-1.5"
+            >
+              <FaDiscord className="h-4 w-4" />
+              Discord
+            </Link>
+          </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>
       <RenameProjectDialog
-- 
cgit v1.3.1


From 09cb8c8d984e3e82f60e28b352508c876423fbdf Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Fri, 1 Aug 2025 09:51:54 +0200
Subject: fix: resize not matching with frames

---
 .../components/editor/timeline/timeline-track.tsx  | 96 ++++++++++++----------
 apps/web/src/hooks/use-timeline-element-resize.ts  | 29 +++++--
 2 files changed, 75 insertions(+), 50 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor/timeline/timeline-track.tsx b/apps/web/src/components/editor/timeline/timeline-track.tsx
index 097fc051..1982d03e 100644
--- a/apps/web/src/components/editor/timeline/timeline-track.tsx
+++ b/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
+      );
 
-    // 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
+      );
 
-    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;
+      }
 
-    // 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;
+      }
     }
 
-    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);
       }
 
diff --git a/apps/web/src/hooks/use-timeline-element-resize.ts b/apps/web/src/hooks/use-timeline-element-resize.ts
index d57533e0..ba13e05a 100644
--- a/apps/web/src/hooks/use-timeline-element-resize.ts
+++ b/apps/web/src/hooks/use-timeline-element-resize.ts
@@ -221,17 +221,34 @@ export function useTimelineElementResize({
         }
       } else {
         // Normal trimming within original duration
-        const maxTrimEnd = element.duration - resizing.initialTrimStart - 0.1; // Leave at least 0.1s visible
-        const newTrimEnd = snapTimeToFrame(
-          Math.max(0, Math.min(maxTrimEnd, calculated)),
-          projectFps
+        // Calculate the desired end time based on mouse movement
+        const currentEndTime =
+          element.startTime +
+          element.duration -
+          element.trimStart -
+          element.trimEnd;
+        const desiredEndTime = currentEndTime + deltaTime;
+
+        // Snap the desired end time to frame
+        const snappedEndTime = snapTimeToFrame(desiredEndTime, projectFps);
+
+        // Calculate what trimEnd should be to achieve this snapped end time
+        const newTrimEnd = Math.max(
+          0,
+          element.duration -
+            element.trimStart -
+            (snappedEndTime - element.startTime)
         );
 
+        // Ensure we don't trim more than available content (leave at least 0.1s visible)
+        const maxTrimEnd = element.duration - element.trimStart - 0.1;
+        const finalTrimEnd = Math.min(maxTrimEnd, newTrimEnd);
+
         updateElementTrim(
           track.id,
           element.id,
-          resizing.initialTrimStart,
-          newTrimEnd,
+          element.trimStart,
+          finalTrimEnd,
           false
         );
       }
-- 
cgit v1.3.1


From 68da487f304018b6e8d06459def8fb45514ab7d4 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Fri, 1 Aug 2025 19:57:26 +0200
Subject: style: complete re-design of whole editor

---
 apps/web/src/app/editor/[project_id]/page.tsx      |   6 +-
 apps/web/src/app/globals.css                       |  83 ++--
 apps/web/src/app/layout.tsx                        |   2 +-
 apps/web/src/components/editor-header.tsx          |  36 +-
 .../src/components/editor/media-panel/index.tsx    |   6 +-
 .../src/components/editor/media-panel/tabbar.tsx   |   5 +-
 .../components/editor/media-panel/views/audio.tsx  |   1 +
 .../components/editor/media-panel/views/media.tsx  | 507 +++++++++++++++------
 .../components/editor/media-panel/views/text.tsx   |   2 +-
 apps/web/src/components/editor/preview-panel.tsx   | 157 +------
 apps/web/src/components/editor/timeline/index.tsx  |  61 ++-
 .../editor/timeline/timeline-element.tsx           | 142 ++----
 .../editor/timeline/timeline-playhead.tsx          |   6 +-
 .../web/src/components/keyboard-shortcuts-help.tsx |   2 +-
 apps/web/src/components/ui/button.tsx              |   2 +-
 apps/web/src/components/ui/draggable-item.tsx      |  85 ++--
 apps/web/src/components/ui/input.tsx               |   4 +-
 apps/web/src/constants/timeline-constants.ts       |  16 +-
 apps/web/src/stores/panel-store.ts                 |   6 +
 19 files changed, 625 insertions(+), 504 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 5e294fe7..03579144 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -167,7 +167,7 @@ export default function Editor() {
               {/* Main content area */}
               <ResizablePanelGroup
                 direction="horizontal"
-                className="h-full w-full gap-[0.19rem] px-2"
+                className="h-full w-full gap-[0.19rem] px-3"
               >
                 {/* Tools Panel */}
                 <ResizablePanel
@@ -175,7 +175,7 @@ export default function Editor() {
                   minSize={15}
                   maxSize={40}
                   onResize={setToolsPanel}
-                  className="min-w-0"
+                  className="min-w-0 rounded-sm"
                 >
                   <MediaPanel />
                 </ResizablePanel>
@@ -214,7 +214,7 @@ export default function Editor() {
               minSize={15}
               maxSize={70}
               onResize={setTimeline}
-              className="min-h-0 px-2 pb-2"
+              className="min-h-0 px-3 pb-3"
             >
               <Timeline />
             </ResizablePanel>
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 96fef9b0..d612e27e 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -9,38 +9,40 @@
 
 :root {
   /* Custom colors - light mode (default) */
-  --background: hsl(0 0% 100%);
-  --foreground: hsl(0 0% 3.9%);
-  --card: hsl(0 0% 100%);
-  --card-foreground: hsl(0 0% 3.9%);
-  --popover: hsl(0 0% 100%);
-  --popover-foreground: hsl(0 0% 3.9%);
-  --primary: hsl(0 0% 9%);
-  --primary-foreground: hsl(0 0% 98%);
-  --secondary: hsl(0 0% 96.1%);
-  --secondary-foreground: hsl(0 0% 9%);
-  --muted: hsl(0 0% 96.1%);
-  --muted-foreground: hsl(0 0% 45.1%);
-  --accent: hsl(0 0% 96.1%);
-  --accent-foreground: hsl(0 0% 9%);
-  --destructive: hsl(0 84.2% 60.2%);
-  --destructive-foreground: hsl(0 0% 98%);
-  --border: hsl(0 0% 89.8%);
-  --input: hsl(0 0% 89.8%);
-  --ring: hsl(0 0% 3.9%);
-  --chart-1: hsl(12 76% 61%);
-  --chart-2: hsl(173 58% 39%);
-  --chart-3: hsl(197 37% 24%);
-  --chart-4: hsl(43 74% 66%);
-  --chart-5: hsl(27 87% 67%);
-  --sidebar-background: hsl(0 0% 100%);
-  --sidebar-foreground: hsl(0 0% 3.9%);
-  --sidebar-primary: hsl(0 0% 9%);
-  --sidebar-primary-foreground: hsl(0 0% 98%);
-  --sidebar-accent: hsl(0 0% 96.1%);
-  --sidebar-accent-foreground: hsl(0 0% 9%);
-  --sidebar-border: hsl(0 0% 89.8%);
-  --sidebar-ring: hsl(0 0% 3.9%);
+  --background: hsl(0, 0%, 100%);
+  --foreground: hsl(0 0% 11%);
+  --card: hsl(0 0% 85.1%);
+  --card-foreground: hsl(0 0% 2%);
+  --popover: hsl(0, 0%, 100%);
+  --popover-foreground: hsl(0 0% 2%);
+  --primary: hsl(205, 84%, 47%);
+  --primary-foreground: hsl(0 0% 91%);
+  --secondary: hsl(216, 13%, 92%);
+  --secondary-foreground: hsl(0 0% 2%);
+  --muted: hsl(0 0% 85.1%);
+  --muted-foreground: hsl(0 0% 36.1%);
+  --accent: hsl(216, 13%, 92%);
+  --accent-foreground: hsl(0 0% 2%);
+  --destructive: hsl(0 100% 40%);
+  --destructive-foreground: hsl(0, 0%, 100%);
+  --border: hsl(0 0% 83%);
+  --input: hsl(0 0% 85.1%);
+  --ring: hsl(0, 0%, 55%);
+  --chart-1: hsl(220 70% 50%);
+  --chart-2: hsl(160 60% 45%);
+  --chart-3: hsl(30 80% 55%);
+  --chart-4: hsl(280 65% 60%);
+  --chart-5: hsl(340 75% 55%);
+  --sidebar-background: hsl(0 0% 96.1%);
+  --sidebar-foreground: hsl(0 0% 2%);
+  --sidebar-primary: hsl(0 0% 2%);
+  --sidebar-primary-foreground: hsl(0 0% 91%);
+  --sidebar-accent: hsl(0 0% 85.1%);
+  --sidebar-accent-foreground: hsl(0 0% 2%);
+  --sidebar-border: hsl(0 0% 85.1%);
+  --sidebar-ring: hsl(0 0% 16.9%);
+  --panel-background: hsl(216 13% 92%);
+  --panel-accent: hsl(216, 8%, 86%);
 
   /* Radius base */
   --radius: 1rem;
@@ -224,3 +226,20 @@
     display: none;
   }
 }
+
+@utility scrollbar-thin {
+  &::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background: var(--border);
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--muted-foreground);
+  }
+}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 5c1d7520..a64c4440 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -30,7 +30,7 @@ export default function RootLayout({
         <BotIdClient protect={protectedRoutes} />
       </head>
       <body className={`${defaultFont.className} font-sans antialiased`}>
-        <ThemeProvider attribute="class" forcedTheme="dark">
+        <ThemeProvider attribute="class" defaultTheme="dark">
           <TooltipProvider>
             <StorageProvider>{children}</StorageProvider>
             <Analytics />
diff --git a/apps/web/src/components/editor-header.tsx b/apps/web/src/components/editor-header.tsx
index 99cea3e8..77202c36 100644
--- a/apps/web/src/components/editor-header.tsx
+++ b/apps/web/src/components/editor-header.tsx
@@ -1,7 +1,14 @@
 "use client";
 
 import { Button } from "./ui/button";
-import { ChevronDown, ArrowLeft, Download, SquarePen, Trash } from "lucide-react";
+import {
+  ChevronDown,
+  ArrowLeft,
+  Download,
+  SquarePen,
+  Trash,
+  Sun,
+} from "lucide-react";
 import { useTimelineStore } from "@/stores/timeline-store";
 import { HeaderBase } from "./header-base";
 import { formatTimeCode } from "@/lib/time";
@@ -19,14 +26,18 @@ import Link from "next/link";
 import { RenameProjectDialog } from "./rename-project-dialog";
 import { DeleteProjectDialog } from "./delete-project-dialog";
 import { useRouter } from "next/navigation";
-import { FaDiscord, FaGithub } from "react-icons/fa6";
+import { FaDiscord } from "react-icons/fa6";
+import { useTheme } from "next-themes";
+import { usePlaybackStore } from "@/stores/playback-store";
 
 export function EditorHeader() {
   const { getTotalDuration } = useTimelineStore();
+  const { currentTime } = usePlaybackStore();
   const { activeProject, renameProject, deleteProject } = useProjectStore();
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isRenameDialogOpen, setIsRenameDialogOpen] = useState(false);
   const router = useRouter();
+  const { theme, setTheme } = useTheme();
 
   const handleExport = () => {
     // TODO: Implement export functionality
@@ -120,7 +131,11 @@ export function EditorHeader() {
 
   const centerContent = (
     <div className="flex items-center gap-2 text-xs">
-      <span>
+      <span className="text-foreground tabular-nums">
+        {formatTimeCode(currentTime, "HH:MM:SS:FF", activeProject?.fps || 30)}
+      </span>
+      <span className="text-foreground/50">/</span>
+      <span className="text-foreground/50 tabular-nums">
         {formatTimeCode(
           getTotalDuration(),
           "HH:MM:SS:FF",
@@ -135,11 +150,20 @@ export function EditorHeader() {
       <KeyboardShortcutsHelp />
       <Button
         size="sm"
-        className="h-7 text-xs !bg-linear-to-r from-cyan-400 to-blue-500 text-white hover:opacity-85 transition-opacity"
+        className="h-8 text-xs !bg-linear-to-r from-cyan-400 to-blue-500 text-white hover:opacity-85 transition-opacity"
         onClick={handleExport}
       >
         <Download className="h-4 w-4" />
-        <span className="text-sm">Export</span>
+        <span className="text-sm pr-1">Export</span>
+      </Button>
+      <Button
+        size="icon"
+        variant="text"
+        className="h-7"
+        onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+      >
+        <Sun className="!size-[1.1rem]" />
+        <span className="sr-only">{theme === "dark" ? "Light" : "Dark"}</span>
       </Button>
     </nav>
   );
@@ -149,7 +173,7 @@ export function EditorHeader() {
       leftContent={leftContent}
       centerContent={centerContent}
       rightContent={rightContent}
-      className="bg-background h-[3.2rem] px-4 items-center"
+      className="bg-background h-[3.2rem] px-3 items-center mt-0.5"
     />
   );
 }
diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
index 359612f8..a5cd6686 100644
--- a/apps/web/src/components/editor/media-panel/index.tsx
+++ b/apps/web/src/components/editor/media-panel/index.tsx
@@ -5,6 +5,7 @@ import { MediaView } from "./views/media";
 import { useMediaPanelStore, Tab } from "./store";
 import { TextView } from "./views/text";
 import { AudioView } from "./views/audio";
+import { Separator } from "@/components/ui/separator";
 
 export function MediaPanel() {
   const { activeTab } = useMediaPanelStore();
@@ -46,9 +47,10 @@ export function MediaPanel() {
   };
 
   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>
   );
 }
diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx
index 92482559..a3733e4d 100644
--- a/apps/web/src/components/editor/media-panel/tabbar.tsx
+++ b/apps/web/src/components/editor/media-panel/tabbar.tsx
@@ -61,7 +61,7 @@ export function TabBar() {
   }, []);
 
   return (
-    <div className="flex">
+    <div className="flex pt-4">
       <ScrollButton
         direction="left"
         onClick={scrollToStart}
@@ -69,7 +69,7 @@ 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"
       >
         {(Object.keys(tabs) as Tab[]).map((tabKey) => {
           const tab = tabs[tabKey];
@@ -83,7 +83,6 @@ export function TabBar() {
               key={tabKey}
             >
               <tab.icon className="size-[1.1rem]!" />
-              <span className="text-[0.65rem]">{tab.label}</span>
             </div>
           );
         })}
diff --git a/apps/web/src/components/editor/media-panel/views/audio.tsx b/apps/web/src/components/editor/media-panel/views/audio.tsx
index ba64d749..0d3c3f1e 100644
--- a/apps/web/src/components/editor/media-panel/views/audio.tsx
+++ b/apps/web/src/components/editor/media-panel/views/audio.tsx
@@ -9,6 +9,7 @@ export function AudioView() {
     <div className="h-full flex flex-col gap-2 p-4">
       <Input
         placeholder="Search songs and artists"
+        className="bg-panel-accent"
         value={search}
         onChange={(e) => setSearch(e.target.value)}
       />
diff --git a/apps/web/src/components/editor/media-panel/views/media.tsx b/apps/web/src/components/editor/media-panel/views/media.tsx
index d1533736..772ef4ab 100644
--- a/apps/web/src/components/editor/media-panel/views/media.tsx
+++ b/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>
+        );
+      } 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 && (
-              <div className="absolute bottom-1 right-1 bg-black/70 text-white text-xs px-1 rounded">
+              <span className="text-xs opacity-70">
                 {formatDuration(item.duration)}
-              </div>
+              </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-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>
-      );
-    }
+      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>
+  );
+}
diff --git a/apps/web/src/components/editor/media-panel/views/text.tsx b/apps/web/src/components/editor/media-panel/views/text.tsx
index 0686190e..ca8e88c9 100644
--- a/apps/web/src/components/editor/media-panel/views/text.tsx
+++ b/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>
         }
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index c6f4e159..3a962025 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/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";
 
@@ -412,7 +403,7 @@ export function PreviewPanel() {
           >
             <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>
         );
@@ -476,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 ? (
@@ -621,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}
@@ -631,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>
@@ -649,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" />
@@ -659,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" />
@@ -672,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" />
@@ -682,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}
@@ -691,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-xs 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>
@@ -706,7 +697,7 @@ 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)"
       >
@@ -776,7 +767,7 @@ function FullscreenPreview({
             )}
         </div>
       </div>
-      <div className="p-4 bg-black">
+      <div className="p-4 bg-background">
         <FullscreenToolbar
           hasAnyElements={hasAnyElements}
           onToggleExpanded={toggleExpanded}
@@ -807,37 +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 totalDuration = getTotalDuration();
-
-  const skipBackward = () => {
-    const newTime = Math.max(0, currentTime - 1);
-    setCurrentTime(newTime);
-  };
-
-  const skipForward = () => {
-    const newTime = Math.min(totalDuration, currentTime + 1);
-    setCurrentTime(newTime);
-  };
+  const { isPlaying } = usePlaybackStore();
 
   if (isExpanded) {
     return (
@@ -857,50 +818,15 @@ 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>
-      <div className="flex items-center gap-1">
-        <Button
-          variant="text"
-          size="icon"
-          onClick={skipBackward}
-          disabled={!hasAnyElements}
-          className="h-auto p-0 text-white hover:text-white/80"
-          title="Skip backward 1s"
-        >
-          <SkipBack className="h-3 w-3" />
-        </Button>
+      <div className="flex items-center gap-2">
         <Button
           variant="text"
           size="icon"
           onClick={toggle}
           disabled={!hasAnyElements}
-          className="h-auto p-0 text-white hover:text-white/80"
+          className="h-auto p-0"
         >
           {isPlaying ? (
             <Pause className="h-3 w-3" />
@@ -911,52 +837,7 @@ function PreviewToolbar({
         <Button
           variant="text"
           size="icon"
-          onClick={skipForward}
-          disabled={!hasAnyElements}
-          className="h-auto p-0 text-white hover:text-white/80"
-          title="Skip forward 1s"
-        >
-          <SkipForward className="h-3 w-3" />
-        </Button>
-      </div>
-      <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>
-        <Button
-          variant="text"
-          size="icon"
-          className="size-4! text-muted-foreground"
+          className="size-4!"
           onClick={onToggleExpanded}
           title="Enter fullscreen"
         >
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index 85d6a11e..8f41fbf3 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -20,6 +20,9 @@ import {
   ZoomIn,
   ZoomOut,
   Bookmark,
+  Eye,
+  MicOff,
+  Mic,
 } from "lucide-react";
 import {
   Tooltip,
@@ -544,7 +547,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 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">
               .
@@ -652,14 +655,14 @@ export function Timeline() {
                     );
                   }).filter(Boolean);
                 })()}
-                
+
                 {/* Bookmark markers */}
                 {(() => {
                   const { activeProject } = useProjectStore.getState();
                   if (!activeProject?.bookmarks?.length) return null;
-                  
+
                   return activeProject.bookmarks.map((bookmarkTime, i) => (
-                                          <div
+                    <div
                       key={`bookmark-${i}`}
                       className="absolute top-0 h-10 w-0.5 !bg-primary cursor-pointer"
                       style={{
@@ -687,7 +690,7 @@ export function Timeline() {
           {tracks.length > 0 && (
             <div
               ref={trackLabelsRef}
-              className="w-48 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}>
@@ -695,17 +698,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 shrink-0">
-                          Muted
-                        </span>
-                      )}
                     </div>
                   ))}
                 </div>
@@ -760,7 +770,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,
@@ -798,23 +808,6 @@ export function Timeline() {
                           <ContextMenuItem onClick={(e) => e.stopPropagation()}>
                             Track settings (soon)
                           </ContextMenuItem>
-                          {activeProject?.bookmarks?.length && activeProject.bookmarks.length > 0 && (
-                            <>
-                              <ContextMenuItem disabled>Bookmarks</ContextMenuItem>
-                              {activeProject.bookmarks.map((bookmarkTime, i) => (
-                                <ContextMenuItem 
-                                  key={`bookmark-menu-${i}`}
-                                  onClick={(e) => {
-                                    e.stopPropagation();
-                                    seek(bookmarkTime);
-                                  }}
-                                >
-                                  <Bookmark className="h-3 w-3 mr-2 inline-block" />
-                                  {bookmarkTime.toFixed(1)}s
-                                </ContextMenuItem>
-                              ))}
-                              </>
-                          )}
                         </ContextMenuContent>
                       </ContextMenu>
                     ))}
@@ -1000,11 +993,11 @@ 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 (
@@ -1142,7 +1135,9 @@ function TimelineToolbar({
           <Tooltip>
             <TooltipTrigger asChild>
               <Button variant="text" size="icon" onClick={handleToggleBookmark}>
-                <Bookmark className={`h-4 w-4 ${currentBookmarked ? "fill-primary text-primary" : ""}`} />
+                <Bookmark
+                  className={`h-4 w-4 ${currentBookmarked ? "fill-primary text-primary" : ""}`}
+                />
               </Button>
             </TooltipTrigger>
             <TooltipContent>
diff --git a/apps/web/src/components/editor/timeline/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx
index c7ed833e..b26a14bb 100644
--- a/apps/web/src/components/editor/timeline/timeline-element.tsx
+++ b/apps/web/src/components/editor/timeline/timeline-element.tsx
@@ -1,16 +1,8 @@
 "use client";
 
-import { useState } from "react";
-import { Button } from "../../ui/button";
 import {
-  MoreVertical,
   Scissors,
   Trash2,
-  SplitSquareHorizontal,
-  Music,
-  ChevronRight,
-  ChevronLeft,
-  Type,
   Copy,
   RefreshCw,
   EyeOff,
@@ -23,23 +15,13 @@ 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,
@@ -64,9 +46,6 @@ export function TimelineElement({
     removeElementFromTrackWithRipple,
     dragState,
     splitElement,
-    splitAndKeepLeft,
-    splitAndKeepRight,
-    separateAudio,
     addElementToTrack,
     replaceElementMedia,
     rippleEditingEnabled,
@@ -74,27 +53,20 @@ export function TimelineElement({
   } = 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;
@@ -193,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>
       );
     }
@@ -212,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;
 
-      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="absolute top-3 bottom-3 left-0 right-0"
-              style={{
-                backgroundImage: mediaItem.url
-                  ? `url(${mediaItem.url})`
-                  : "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;
+      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 thumbnails */}
+          <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.thumbnailUrl
-                  ? `url(${mediaItem.thumbnailUrl})`
-                  : "none",
+                backgroundImage: imageUrl ? `url(${imageUrl})` : "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>
@@ -346,7 +266,7 @@ 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)}
@@ -372,11 +292,11 @@ export function TimelineElement({
             {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")}
                 />
               </>
@@ -407,8 +327,8 @@ export function TimelineElement({
                 ? "Unmute"
                 : "Mute"
               : element.hidden
-              ? "Show"
-              : "Hide"}{" "}
+                ? "Show"
+                : "Hide"}{" "}
             {element.type === "text" ? "text" : "clip"}
           </span>
         </ContextMenuItem>
diff --git a/apps/web/src/components/editor/timeline/timeline-playhead.tsx b/apps/web/src/components/editor/timeline/timeline-playhead.tsx
index ea70419b..695843a4 100644
--- a/apps/web/src/components/editor/timeline/timeline-playhead.tsx
+++ b/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 =
@@ -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-xs ${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>
   );
diff --git a/apps/web/src/components/keyboard-shortcuts-help.tsx b/apps/web/src/components/keyboard-shortcuts-help.tsx
index 15b1e1d8..d4d121d9 100644
--- a/apps/web/src/components/keyboard-shortcuts-help.tsx
+++ b/apps/web/src/components/keyboard-shortcuts-help.tsx
@@ -96,7 +96,7 @@ const EditableShortcutKey = ({
       className={`inline-flex font-sans text-xs rounded px-2 min-w-6 min-h-6 leading-none items-center justify-center shadow-xs border mr-1 cursor-pointer hover:bg-opacity-80 ${
         isRecording
           ? "border-primary bg-primary/10"
-          : "border-white/10 bg-black/20"
+          : "border bg-accent"
       }`}
       onClick={handleClick}
       title={
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
index e5c5d4cc..d3656790 100644
--- a/apps/web/src/components/ui/button.tsx
+++ b/apps/web/src/components/ui/button.tsx
@@ -19,7 +19,7 @@ const buttonVariants = cva(
           "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-        text: "bg-transparent p-0 rounded-none hover:text-muted-foreground", // Instead of ghost (matches app better)
+        text: "bg-transparent p-0 rounded-none opacity-100 hover:opacity-50 transition-opacity", // Instead of ghost (matches app better)
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
diff --git a/apps/web/src/components/ui/draggable-item.tsx b/apps/web/src/components/ui/draggable-item.tsx
index 4c71e4b7..ff6766fd 100644
--- a/apps/web/src/components/ui/draggable-item.tsx
+++ b/apps/web/src/components/ui/draggable-item.tsx
@@ -24,6 +24,7 @@ export interface DraggableMediaItemProps {
   showPlusOnDrag?: boolean;
   showLabel?: boolean;
   rounded?: boolean;
+  variant?: "card" | "compact";
 }
 
 export function DraggableMediaItem({
@@ -37,6 +38,7 @@ export function DraggableMediaItem({
   showPlusOnDrag = true,
   showLabel = true,
   rounded = true,
+  variant = "card",
 }: DraggableMediaItemProps) {
   const [isDragging, setIsDragging] = useState(false);
   const [dragPosition, setDragPosition] = useState({ x: 0, y: 0 });
@@ -88,42 +90,62 @@ export function DraggableMediaItem({
 
   return (
     <>
-      <div ref={dragRef} className="relative group w-28 h-28">
-        <div
-          className={`flex flex-col gap-1 p-0 h-auto w-full relative cursor-default ${className}`}
-        >
-          <AspectRatio
-            ratio={aspectRatio}
+      {variant === "card" ? (
+        <div ref={dragRef} className="relative group w-28 h-28">
+          <div
+            className={`flex flex-col gap-1 p-0 h-auto w-full relative cursor-default ${className}`}
+          >
+            <AspectRatio
+              ratio={aspectRatio}
+              className={cn(
+                "bg-panel-accent relative overflow-hidden",
+                rounded && "rounded-md",
+                "[&::-webkit-drag-ghost]:opacity-0" // Webkit-specific ghost hiding
+              )}
+              draggable={true}
+              onDragStart={handleDragStart}
+              onDragEnd={handleDragEnd}
+            >
+              {preview}
+              {!isDragging && (
+                <PlusButton
+                  className="opacity-0 group-hover:opacity-100"
+                  onClick={handleAddToTimeline}
+                />
+              )}
+            </AspectRatio>
+            {showLabel && (
+              <span
+                className="text-[0.7rem] text-muted-foreground truncate w-full text-left"
+                aria-label={name}
+                title={name}
+              >
+                {name.length > 8
+                  ? `${name.slice(0, 16)}...${name.slice(-3)}`
+                  : name}
+              </span>
+            )}
+          </div>
+        </div>
+      ) : (
+        <div ref={dragRef} className="relative group w-full">
+          <div
             className={cn(
-              "bg-accent relative overflow-hidden",
-              rounded && "rounded-md",
-              "[&::-webkit-drag-ghost]:opacity-0" // Webkit-specific ghost hiding
+              "h-10 flex items-center gap-3 cursor-default w-full",
+              "[&::-webkit-drag-ghost]:opacity-0",
+              className
             )}
             draggable={true}
             onDragStart={handleDragStart}
             onDragEnd={handleDragEnd}
           >
-            {preview}
-            {!isDragging && (
-              <PlusButton
-                className="opacity-0 group-hover:opacity-100"
-                onClick={handleAddToTimeline}
-              />
-            )}
-          </AspectRatio>
-          {showLabel && (
-            <span
-              className="text-[0.7rem] text-muted-foreground truncate w-full text-left"
-              aria-label={name}
-              title={name}
-            >
-              {name.length > 8
-                ? `${name.slice(0, 16)}...${name.slice(-3)}`
-                : name}
-            </span>
-          )}
+            <div className="w-6 h-6 flex-shrink-0 rounded overflow-hidden">
+              {preview}
+            </div>
+            <span className="text-sm truncate flex-1 w-full">{name}</span>
+          </div>
         </div>
-      </div>
+      )}
 
       {/* Custom drag preview */}
       {isDragging &&
@@ -171,7 +193,10 @@ function PlusButton({
   const button = (
     <Button
       size="icon"
-      className={cn("absolute bottom-2 right-2 size-4", className)}
+      className={cn(
+        "absolute bottom-2 right-2 size-4 bg-background text-foreground",
+        className
+      )}
       onClick={(e) => {
         e.preventDefault();
         e.stopPropagation();
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 6f32885c..d4cd57a1 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -23,7 +23,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         <input
           type={inputType}
           className={cn(
-            "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-xs file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+            "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+            "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
+            "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
             showPasswordToggle && "pr-10",
             className
           )}
diff --git a/apps/web/src/constants/timeline-constants.ts b/apps/web/src/constants/timeline-constants.ts
index 5d446d50..4516775f 100644
--- a/apps/web/src/constants/timeline-constants.ts
+++ b/apps/web/src/constants/timeline-constants.ts
@@ -7,18 +7,18 @@ export const TRACK_COLORS: Record<
 > = {
   media: {
     solid: "bg-blue-500",
-    background: "bg-blue-500/20",
-    border: "border-white/80",
+    background: "",
+    border: "",
   },
   text: {
-    solid: "bg-[#9C4937]",
-    background: "bg-[#9C4937]",
-    border: "border-white/80",
+    solid: "bg-[#5DBAA0]",
+    background: "bg-[#5DBAA0]",
+    border: "",
   },
   audio: {
     solid: "bg-green-500",
-    background: "bg-green-500/20",
-    border: "border-white/80",
+    background: "bg-[#915DBE]",
+    border: "",
   },
 } as const;
 
@@ -34,7 +34,7 @@ export function getTrackElementClasses(type: TrackType) {
 
 // Track height definitions
 export const TRACK_HEIGHTS: Record<TrackType, number> = {
-  media: 65,
+  media: 60,
   text: 25,
   audio: 50,
 } as const;
diff --git a/apps/web/src/stores/panel-store.ts b/apps/web/src/stores/panel-store.ts
index b97235fa..ebbce3c0 100644
--- a/apps/web/src/stores/panel-store.ts
+++ b/apps/web/src/stores/panel-store.ts
@@ -17,12 +17,15 @@ interface PanelState {
   mainContent: number;
   timeline: number;
 
+  mediaViewMode: "grid" | "list";
+
   // Actions
   setToolsPanel: (size: number) => void;
   setPreviewPanel: (size: number) => void;
   setPropertiesPanel: (size: number) => void;
   setMainContent: (size: number) => void;
   setTimeline: (size: number) => void;
+  setMediaViewMode: (mode: "grid" | "list") => void;
 }
 
 export const usePanelStore = create<PanelState>()(
@@ -31,12 +34,15 @@ export const usePanelStore = create<PanelState>()(
       // Default sizes - optimized for responsiveness
       ...DEFAULT_PANEL_SIZES,
 
+      mediaViewMode: "grid" as const,
+
       // Actions
       setToolsPanel: (size) => set({ toolsPanel: size }),
       setPreviewPanel: (size) => set({ previewPanel: size }),
       setPropertiesPanel: (size) => set({ propertiesPanel: size }),
       setMainContent: (size) => set({ mainContent: size }),
       setTimeline: (size) => set({ timeline: size }),
+      setMediaViewMode: (mode) => set({ mediaViewMode: mode }),
     }),
     {
       name: "panel-sizes",
-- 
cgit v1.3.1


From dd09bf2949b63d17b3e7311a688d7d84c5d6dc52 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 2 Aug 2025 01:41:46 +0200
Subject: feat: add project settings

---
 .../src/components/editor/media-panel/index.tsx    |   2 +
 .../web/src/components/editor/media-panel/store.ts |   8 +-
 .../editor/media-panel/views/settings.tsx          | 246 +++++++++++++++++++++
 .../editor/properties-panel/property-item.tsx      |  10 +-
 apps/web/src/components/icons.tsx                  |  22 ++
 apps/web/src/components/ui/select.tsx              |   4 +-
 apps/web/src/components/ui/tabs.tsx                |   4 +-
 7 files changed, 288 insertions(+), 8 deletions(-)
 create mode 100644 apps/web/src/components/editor/media-panel/views/settings.tsx

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
index a5cd6686..4d80b642 100644
--- a/apps/web/src/components/editor/media-panel/index.tsx
+++ b/apps/web/src/components/editor/media-panel/index.tsx
@@ -6,6 +6,7 @@ import { useMediaPanelStore, Tab } from "./store";
 import { TextView } from "./views/text";
 import { AudioView } from "./views/audio";
 import { Separator } from "@/components/ui/separator";
+import { SettingsView } from "./views/settings";
 
 export function MediaPanel() {
   const { activeTab } = useMediaPanelStore();
@@ -44,6 +45,7 @@ export function MediaPanel() {
         Adjustment view coming soon...
       </div>
     ),
+    settings: <SettingsView />,
   };
 
   return (
diff --git a/apps/web/src/components/editor/media-panel/store.ts b/apps/web/src/components/editor/media-panel/store.ts
index c661f51e..577417a9 100644
--- a/apps/web/src/components/editor/media-panel/store.ts
+++ b/apps/web/src/components/editor/media-panel/store.ts
@@ -9,6 +9,7 @@ import {
   SlidersHorizontalIcon,
   LucideIcon,
   TypeIcon,
+  SettingsIcon,
 } from "lucide-react";
 import { create } from "zustand";
 
@@ -21,7 +22,8 @@ export type Tab =
   | "transitions"
   | "captions"
   | "filters"
-  | "adjustment";
+  | "adjustment"
+  | "settings";
 
 export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {
   media: {
@@ -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 {
diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx
new file mode 100644
index 00000000..54387dd7
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/views/settings.tsx
@@ -0,0 +1,246 @@
+"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,
+} 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";
+import { PipetteIcon } from "lucide-react";
+import { useMemo, memo, useCallback } from "react";
+
+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 { canvasSize, 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 hover:outline-2 hover:outline-primary relative overflow-hidden",
+        isSelected && "outline-2 outline-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)` }}
+        priority
+      />
+      <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";
+
+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]
+  );
+
+  const colorPreviews = useMemo(
+    () =>
+      colors.map((color) => (
+        <div
+          key={color}
+          className={cn(
+            "w-full aspect-square rounded-sm cursor-pointer hover:border-2 hover:border-primary",
+            isColorBackground &&
+              color === currentBackgroundColor &&
+              "border-2 border-primary"
+          )}
+          style={{ backgroundColor: color }}
+          onClick={() => handleColorSelect(color)}
+        />
+      )),
+    [isColorBackground, currentBackgroundColor, handleColorSelect]
+  );
+
+  return (
+    <div className="flex flex-col gap-4">
+      <PropertyItem direction="column" className="gap-2">
+        <PropertyItemLabel>Blur</PropertyItemLabel>
+        <PropertyItemValue>
+          <div className="grid grid-cols-4 gap-2 w-full">{blurPreviews}</div>
+        </PropertyItemValue>
+      </PropertyItem>
+      <PropertyItem direction="column" className="gap-2">
+        <PropertyItemLabel>Color</PropertyItemLabel>
+        <PropertyItemValue>
+          <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>
+            {colorPreviews}
+          </div>
+        </PropertyItemValue>
+      </PropertyItem>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/editor/properties-panel/property-item.tsx b/apps/web/src/components/editor/properties-panel/property-item.tsx
index 804ffb39..86a8d378 100644
--- a/apps/web/src/components/editor/properties-panel/property-item.tsx
+++ b/apps/web/src/components/editor/properties-panel/property-item.tsx
@@ -17,7 +17,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 +33,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 +47,5 @@ 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>;
 }
diff --git a/apps/web/src/components/icons.tsx b/apps/web/src/components/icons.tsx
index 43f953e8..065a123d 100644
--- a/apps/web/src/components/icons.tsx
+++ b/apps/web/src/components/icons.tsx
@@ -163,3 +163,25 @@ export function DataBuddyIcon({
     </svg>
   );
 }
+
+export function SquareSlashIcon({
+  className,
+  size = 24,
+}: {
+  className?: string;
+  size?: number;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={size}
+      height={size}
+      className={className}
+      fill="none"
+      viewBox="0 0 256 256"
+    >
+      <rect width="18" height="18" x="3" y="3" rx="2" />
+      <line x1="9" x2="15" y1="15" y2="9" />
+    </svg>
+  );
+}
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
index ce4f340d..53ca27cb 100644
--- a/apps/web/src/components/ui/select.tsx
+++ b/apps/web/src/components/ui/select.tsx
@@ -35,14 +35,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-xs ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex gap-1 h-7 cursor-pointer w-auto items-center justify-between whitespace-nowrap rounded-md bg-accent px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="size-3 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ));
diff --git a/apps/web/src/components/ui/tabs.tsx b/apps/web/src/components/ui/tabs.tsx
index e5384daf..ea628959 100644
--- a/apps/web/src/components/ui/tabs.tsx
+++ b/apps/web/src/components/ui/tabs.tsx
@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      "inline-flex h-auto items-center justify-center gap-2 rounded-lg bg-transparent p-0 text-muted-foreground",
       className
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+      "inline-flex items-center cursor-pointer justify-center whitespace-nowrap rounded-lg px-3 py-1 text-sm font-medium ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-card data-[state=active]:text-foreground",
       className
     )}
     {...props}
-- 
cgit v1.3.1


From 7891ed2cc1487270a847081c4ad93be1900adc8e Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 2 Aug 2025 12:21:24 +0200
Subject: feat: make settings items expandable

---
 .../editor/media-panel/views/settings.tsx          | 34 ++++++++++------------
 .../editor/properties-panel/property-item.tsx      | 33 +++++++++++++++++++++
 2 files changed, 48 insertions(+), 19 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx
index 54387dd7..cdfa36f2 100644
--- a/apps/web/src/components/editor/media-panel/views/settings.tsx
+++ b/apps/web/src/components/editor/media-panel/views/settings.tsx
@@ -14,6 +14,7 @@ import {
   PropertyItem,
   PropertyItemLabel,
   PropertyItemValue,
+  PropertyGroup,
 } from "../../properties-panel/property-item";
 import { FPS_PRESETS } from "@/constants/timeline-constants";
 import { useProjectStore } from "@/stores/project-store";
@@ -55,7 +56,7 @@ function ProjectSettingsTabs() {
 
 function ProjectInfoView() {
   const { activeProject, updateProjectFps } = useProjectStore();
-  const { canvasSize, canvasPresets, setCanvasSize } = useEditorStore();
+  const { canvasPresets, setCanvasSize } = useEditorStore();
   const { getDisplayName } = useAspectRatio();
 
   const handleAspectRatioChange = (value: string) => {
@@ -147,7 +148,7 @@ const BlurPreview = memo(
         fill
         className="object-cover"
         style={{ filter: `blur(${blur.value}px)` }}
-        priority
+        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">
@@ -223,24 +224,19 @@ function BackgroundView() {
   );
 
   return (
-    <div className="flex flex-col gap-4">
-      <PropertyItem direction="column" className="gap-2">
-        <PropertyItemLabel>Blur</PropertyItemLabel>
-        <PropertyItemValue>
-          <div className="grid grid-cols-4 gap-2 w-full">{blurPreviews}</div>
-        </PropertyItemValue>
-      </PropertyItem>
-      <PropertyItem direction="column" className="gap-2">
-        <PropertyItemLabel>Color</PropertyItemLabel>
-        <PropertyItemValue>
-          <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>
-            {colorPreviews}
+    <div className="flex flex-col gap-5">
+      <PropertyGroup title="Blur">
+        <div className="grid grid-cols-4 gap-2 w-full">{blurPreviews}</div>
+      </PropertyGroup>
+
+      <PropertyGroup title="Color">
+        <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>
-        </PropertyItemValue>
-      </PropertyItem>
+          {colorPreviews}
+        </div>
+      </PropertyGroup>
     </div>
   );
 }
diff --git a/apps/web/src/components/editor/properties-panel/property-item.tsx b/apps/web/src/components/editor/properties-panel/property-item.tsx
index 86a8d378..dc6b6d74 100644
--- a/apps/web/src/components/editor/properties-panel/property-item.tsx
+++ b/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";
@@ -49,3 +51,34 @@ export function PropertyItemValue({
 }) {
   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>
+  );
+}
-- 
cgit v1.3.1


From 14393c559da7e5d402d8fad5e4959919160fc293 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 2 Aug 2025 12:23:30 +0200
Subject: fix: grammar

---
 apps/web/src/components/editor/media-panel/views/settings.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx
index cdfa36f2..8667b9d1 100644
--- a/apps/web/src/components/editor/media-panel/views/settings.tsx
+++ b/apps/web/src/components/editor/media-panel/views/settings.tsx
@@ -229,7 +229,7 @@ function BackgroundView() {
         <div className="grid grid-cols-4 gap-2 w-full">{blurPreviews}</div>
       </PropertyGroup>
 
-      <PropertyGroup title="Color">
+      <PropertyGroup title="Colors">
         <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" />
-- 
cgit v1.3.1


From e5a5b76ece6c09ddfbb761bdafd7c01e762bc5b3 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 2 Aug 2025 12:37:21 +0200
Subject: style: add hover effect to tabs

---
 apps/web/src/components/editor/media-panel/tabbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx
index a3733e4d..dcf5c8e7 100644
--- a/apps/web/src/components/editor/media-panel/tabbar.tsx
+++ b/apps/web/src/components/editor/media-panel/tabbar.tsx
@@ -76,8 +76,8 @@ export function TabBar() {
           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}
-- 
cgit v1.3.1


From 2c0423667cf3c8fedb194c7b34b5edd5657628f4 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 2 Aug 2025 16:09:20 +0200
Subject: feat: background gradients to project settings

---
 apps/web/src/components/background-settings.tsx    |   2 +-
 .../editor/media-panel/views/settings.tsx          | 111 ++++++++--
 apps/web/src/components/editor/preview-panel.tsx   |   4 +-
 apps/web/src/data/colors.ts                        | 244 ---------------------
 apps/web/src/data/colors/pattern-craft.ts          |  30 +++
 apps/web/src/data/colors/solid.ts                  | 244 +++++++++++++++++++++
 apps/web/src/data/colors/syntax-ui.tsx             |  32 +++
 7 files changed, 396 insertions(+), 271 deletions(-)
 delete mode 100644 apps/web/src/data/colors.ts
 create mode 100644 apps/web/src/data/colors/pattern-craft.ts
 create mode 100644 apps/web/src/data/colors/solid.ts
 create mode 100644 apps/web/src/data/colors/syntax-ui.tsx

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/background-settings.tsx b/apps/web/src/components/background-settings.tsx
index 7e27e574..0457cb05 100644
--- a/apps/web/src/components/background-settings.tsx
+++ b/apps/web/src/components/background-settings.tsx
@@ -3,7 +3,7 @@ import { Button } from "./ui/button";
 import { BackgroundIcon } from "./icons";
 import { cn } from "@/lib/utils";
 import Image from "next/image";
-import { colors } from "@/data/colors";
+import { colors } from "@/data/colors/solid";
 import { useProjectStore } from "@/stores/project-store";
 import { PipetteIcon } from "lucide-react";
 
diff --git a/apps/web/src/components/editor/media-panel/views/settings.tsx b/apps/web/src/components/editor/media-panel/views/settings.tsx
index 8667b9d1..3bce1753 100644
--- a/apps/web/src/components/editor/media-panel/views/settings.tsx
+++ b/apps/web/src/components/editor/media-panel/views/settings.tsx
@@ -22,9 +22,11 @@ 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";
+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 />;
@@ -137,8 +139,8 @@ const BlurPreview = memo(
   }) => (
     <div
       className={cn(
-        "w-full aspect-square rounded-sm cursor-pointer hover:outline-2 hover:outline-primary relative overflow-hidden",
-        isSelected && "outline-2 outline-primary"
+        "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}
     >
@@ -161,6 +163,57 @@ const BlurPreview = memo(
 
 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();
 
@@ -205,36 +258,46 @@ function BackgroundView() {
     [blurLevels, isBlurBackground, currentBlurIntensity, handleBlurSelect]
   );
 
-  const colorPreviews = useMemo(
-    () =>
-      colors.map((color) => (
-        <div
-          key={color}
-          className={cn(
-            "w-full aspect-square rounded-sm cursor-pointer hover:border-2 hover:border-primary",
-            isColorBackground &&
-              color === currentBackgroundColor &&
-              "border-2 border-primary"
-          )}
-          style={{ backgroundColor: color }}
-          onClick={() => handleColorSelect(color)}
-        />
-      )),
-    [isColorBackground, currentBackgroundColor, handleColorSelect]
-  );
-
   return (
     <div className="flex flex-col gap-5">
-      <PropertyGroup title="Blur">
+      <PropertyGroup title="Blur" defaultExpanded={false}>
         <div className="grid grid-cols-4 gap-2 w-full">{blurPreviews}</div>
       </PropertyGroup>
 
-      <PropertyGroup title="Colors">
+      <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>
-          {colorPreviews}
+          <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>
diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 3a962025..58cc5d5b 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -480,7 +480,7 @@ export function PreviewPanel() {
               style={{
                 width: previewDimensions.width,
                 height: previewDimensions.height,
-                backgroundColor:
+                background:
                   activeProject?.backgroundType === "blur"
                     ? "transparent"
                     : activeProject?.backgroundColor || "#000000",
@@ -742,7 +742,7 @@ function FullscreenPreview({
           style={{
             width: previewDimensions.width,
             height: previewDimensions.height,
-            backgroundColor:
+            background:
               activeProject?.backgroundType === "blur"
                 ? "#1a1a1a"
                 : activeProject?.backgroundColor || "#1a1a1a",
diff --git a/apps/web/src/data/colors.ts b/apps/web/src/data/colors.ts
deleted file mode 100644
index 9a12a587..00000000
--- a/apps/web/src/data/colors.ts
+++ /dev/null
@@ -1,244 +0,0 @@
-export const colors = [
-  "#ffffff",
-  "#000000",
-  "#ffe2e2",
-  "#ffc9c9",
-  "#ffa2a2",
-  "#ff6467",
-  "#fb2c36",
-  "#e7000b",
-  "#c10007",
-  "#9f0712",
-  "#82181a",
-  "#460809",
-  "#fff7ed",
-  "#ffedd4",
-  "#ffd6a7",
-  "#ffb86a",
-  "#ff8904",
-  "#ff6900",
-  "#f54900",
-  "#ca3500",
-  "#9f2d00",
-  "#7e2a0c",
-  "#441306",
-  "#fffbeb",
-  "#fef3c6",
-  "#fee685",
-  "#ffd230",
-  "#ffb900",
-  "#fe9a00",
-  "#e17100",
-  "#bb4d00",
-  "#973c00",
-  "#7b3306",
-  "#461901",
-  "#fefce8",
-  "#fef9c2",
-  "#fff085",
-  "#ffdf20",
-  "#fdc700",
-  "#f0b100",
-  "#d08700",
-  "#a65f00",
-  "#894b00",
-  "#733e0a",
-  "#432004",
-  "#f7fee7",
-  "#ecfcca",
-  "#d8f999",
-  "#bbf451",
-  "#9ae600",
-  "#7ccf00",
-  "#5ea500",
-  "#497d00",
-  "#3c6300",
-  "#35530e",
-  "#192e03",
-  "#f0fdf4",
-  "#dcfce7",
-  "#b9f8cf",
-  "#7bf1a8",
-  "#05df72",
-  "#00c950",
-  "#00a63e",
-  "#008236",
-  "#016630",
-  "#0d542b",
-  "#032e15",
-  "#ecfdf5",
-  "#d0fae5",
-  "#a4f4cf",
-  "#5ee9b5",
-  "#00d492",
-  "#00bc7d",
-  "#009966",
-  "#007a55",
-  "#006045",
-  "#004f3b",
-  "#002c22",
-  "#f0fdfa",
-  "#cbfbf1",
-  "#96f7e4",
-  "#46ecd5",
-  "#00d5be",
-  "#00bba7",
-  "#009689",
-  "#00786f",
-  "#005f5a",
-  "#0b4f4a",
-  "#022f2e",
-  "#ecfeff",
-  "#cefafe",
-  "#a2f4fd",
-  "#53eafd",
-  "#00d3f2",
-  "#00b8db",
-  "#0092b8",
-  "#007595",
-  "#005f78",
-  "#104e64",
-  "#053345",
-  "#f0f9ff",
-  "#dff2fe",
-  "#b8e6fe",
-  "#74d4ff",
-  "#00bcff",
-  "#00a6f4",
-  "#0084d1",
-  "#0069a8",
-  "#00598a",
-  "#024a70",
-  "#052f4a",
-  "#eff6ff",
-  "#dbeafe",
-  "#bedbff",
-  "#8ec5ff",
-  "#51a2ff",
-  "#2b7fff",
-  "#155dfc",
-  "#1447e6",
-  "#193cb8",
-  "#1c398e",
-  "#162456",
-  "#eef2ff",
-  "#e0e7ff",
-  "#c6d2ff",
-  "#a3b3ff",
-  "#7c86ff",
-  "#615fff",
-  "#4f39f6",
-  "#432dd7",
-  "#372aac",
-  "#312c85",
-  "#1e1a4d",
-  "#f5f3ff",
-  "#ede9fe",
-  "#ddd6ff",
-  "#c4b4ff",
-  "#a684ff",
-  "#8e51ff",
-  "#7f22fe",
-  "#7008e7",
-  "#5d0ec0",
-  "#4d179a",
-  "#2f0d68",
-  "#faf5ff",
-  "#f3e8ff",
-  "#e9d4ff",
-  "#dab2ff",
-  "#c27aff",
-  "#ad46ff",
-  "#9810fa",
-  "#8200db",
-  "#6e11b0",
-  "#59168b",
-  "#3c0366",
-  "#fdf4ff",
-  "#fae8ff",
-  "#f6cfff",
-  "#f4a8ff",
-  "#ed6aff",
-  "#e12afb",
-  "#c800de",
-  "#a800b7",
-  "#8a0194",
-  "#721378",
-  "#4b004f",
-  "#fdf2f8",
-  "#fce7f3",
-  "#fccee8",
-  "#fda5d5",
-  "#fb64b6",
-  "#f6339a",
-  "#e60076",
-  "#c6005c",
-  "#a3004c",
-  "#861043",
-  "#510424",
-  "#fff1f2",
-  "#ffe4e6",
-  "#ffccd3",
-  "#ffa1ad",
-  "#ff637e",
-  "#ff2056",
-  "#ec003f",
-  "#c70036",
-  "#a50036",
-  "#8b0836",
-  "#4d0218",
-  "#f8fafc",
-  "#f1f5f9",
-  "#e2e8f0",
-  "#cad5e2",
-  "#90a1b9",
-  "#62748e",
-  "#45556c",
-  "#314158",
-  "#1d293d",
-  "#0f172b",
-  "#020618",
-  "#f9fafb",
-  "#f3f4f6",
-  "#e5e7eb",
-  "#d1d5dc",
-  "#99a1af",
-  "#6a7282",
-  "#4a5565",
-  "#364153",
-  "#1e2939",
-  "#101828",
-  "#030712",
-  "#fafafa",
-  "#f4f4f5",
-  "#e4e4e7",
-  "#d4d4d8",
-  "#9f9fa9",
-  "#71717b",
-  "#52525c",
-  "#3f3f46",
-  "#27272a",
-  "#18181b",
-  "#09090b",
-  "#f5f5f5",
-  "#e5e5e5",
-  "#d4d4d4",
-  "#a1a1a1",
-  "#737373",
-  "#525252",
-  "#404040",
-  "#262626",
-  "#171717",
-  "#0a0a0a",
-  "#fafaf9",
-  "#f5f5f4",
-  "#e7e5e4",
-  "#d6d3d1",
-  "#a6a09b",
-  "#79716b",
-  "#57534d",
-  "#44403b",
-  "#292524",
-  "#1c1917",
-  "#0c0a09",
-];
diff --git a/apps/web/src/data/colors/pattern-craft.ts b/apps/web/src/data/colors/pattern-craft.ts
new file mode 100644
index 00000000..56c49b34
--- /dev/null
+++ b/apps/web/src/data/colors/pattern-craft.ts
@@ -0,0 +1,30 @@
+// These are the gradients from Pattern Craft (https://patterncraft.fun/)
+
+export const patternCraftGradients = [
+  // Dreamy Sky Pink Glow
+  "radial-gradient(circle at 30% 70%, rgba(173, 216, 230, 0.35), transparent 60%), radial-gradient(circle at 70% 30%, rgba(255, 182, 193, 0.4), transparent 60%)",
+
+  // Soft Warm Pastel Texture
+  "radial-gradient(circle at 20% 80%, rgba(255, 182, 153, 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 244, 214, 0.5) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 182, 153, 0.1) 0%, transparent 50%), #fff8f0",
+
+  // Warm Soft Coral & Cream
+  "radial-gradient(circle at 20% 80%, rgba(255, 160, 146, 0.25) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(255, 244, 228, 0.3) 0%, transparent 50%), radial-gradient(circle at 40% 40%, rgba(255, 160, 146, 0.15) 0%, transparent 50%), #fef9f7",
+
+  // Soft Green Glow
+  "radial-gradient(circle at center, #8FFFB0, transparent), white",
+
+  // Purple Glow Right
+  "radial-gradient(circle at top right, rgba(173, 109, 244, 0.5), transparent 70%)",
+
+  // Teal Glow Right
+  "radial-gradient(circle at top right, rgba(56, 193, 182, 0.5), transparent 70%)",
+
+  // Warm Orange Glow Right
+  "radial-gradient(circle at top right, rgba(255, 140, 60, 0.5), transparent 70%)",
+
+  // Cool Blue Glow Right
+  "radial-gradient(circle at top right, rgba(70, 130, 180, 0.5), transparent 70%)",
+
+  // Purple Glow Left
+  "radial-gradient(circle at top left, rgba(173, 109, 244, 0.5), transparent 70%)",
+];
diff --git a/apps/web/src/data/colors/solid.ts b/apps/web/src/data/colors/solid.ts
new file mode 100644
index 00000000..9a12a587
--- /dev/null
+++ b/apps/web/src/data/colors/solid.ts
@@ -0,0 +1,244 @@
+export const colors = [
+  "#ffffff",
+  "#000000",
+  "#ffe2e2",
+  "#ffc9c9",
+  "#ffa2a2",
+  "#ff6467",
+  "#fb2c36",
+  "#e7000b",
+  "#c10007",
+  "#9f0712",
+  "#82181a",
+  "#460809",
+  "#fff7ed",
+  "#ffedd4",
+  "#ffd6a7",
+  "#ffb86a",
+  "#ff8904",
+  "#ff6900",
+  "#f54900",
+  "#ca3500",
+  "#9f2d00",
+  "#7e2a0c",
+  "#441306",
+  "#fffbeb",
+  "#fef3c6",
+  "#fee685",
+  "#ffd230",
+  "#ffb900",
+  "#fe9a00",
+  "#e17100",
+  "#bb4d00",
+  "#973c00",
+  "#7b3306",
+  "#461901",
+  "#fefce8",
+  "#fef9c2",
+  "#fff085",
+  "#ffdf20",
+  "#fdc700",
+  "#f0b100",
+  "#d08700",
+  "#a65f00",
+  "#894b00",
+  "#733e0a",
+  "#432004",
+  "#f7fee7",
+  "#ecfcca",
+  "#d8f999",
+  "#bbf451",
+  "#9ae600",
+  "#7ccf00",
+  "#5ea500",
+  "#497d00",
+  "#3c6300",
+  "#35530e",
+  "#192e03",
+  "#f0fdf4",
+  "#dcfce7",
+  "#b9f8cf",
+  "#7bf1a8",
+  "#05df72",
+  "#00c950",
+  "#00a63e",
+  "#008236",
+  "#016630",
+  "#0d542b",
+  "#032e15",
+  "#ecfdf5",
+  "#d0fae5",
+  "#a4f4cf",
+  "#5ee9b5",
+  "#00d492",
+  "#00bc7d",
+  "#009966",
+  "#007a55",
+  "#006045",
+  "#004f3b",
+  "#002c22",
+  "#f0fdfa",
+  "#cbfbf1",
+  "#96f7e4",
+  "#46ecd5",
+  "#00d5be",
+  "#00bba7",
+  "#009689",
+  "#00786f",
+  "#005f5a",
+  "#0b4f4a",
+  "#022f2e",
+  "#ecfeff",
+  "#cefafe",
+  "#a2f4fd",
+  "#53eafd",
+  "#00d3f2",
+  "#00b8db",
+  "#0092b8",
+  "#007595",
+  "#005f78",
+  "#104e64",
+  "#053345",
+  "#f0f9ff",
+  "#dff2fe",
+  "#b8e6fe",
+  "#74d4ff",
+  "#00bcff",
+  "#00a6f4",
+  "#0084d1",
+  "#0069a8",
+  "#00598a",
+  "#024a70",
+  "#052f4a",
+  "#eff6ff",
+  "#dbeafe",
+  "#bedbff",
+  "#8ec5ff",
+  "#51a2ff",
+  "#2b7fff",
+  "#155dfc",
+  "#1447e6",
+  "#193cb8",
+  "#1c398e",
+  "#162456",
+  "#eef2ff",
+  "#e0e7ff",
+  "#c6d2ff",
+  "#a3b3ff",
+  "#7c86ff",
+  "#615fff",
+  "#4f39f6",
+  "#432dd7",
+  "#372aac",
+  "#312c85",
+  "#1e1a4d",
+  "#f5f3ff",
+  "#ede9fe",
+  "#ddd6ff",
+  "#c4b4ff",
+  "#a684ff",
+  "#8e51ff",
+  "#7f22fe",
+  "#7008e7",
+  "#5d0ec0",
+  "#4d179a",
+  "#2f0d68",
+  "#faf5ff",
+  "#f3e8ff",
+  "#e9d4ff",
+  "#dab2ff",
+  "#c27aff",
+  "#ad46ff",
+  "#9810fa",
+  "#8200db",
+  "#6e11b0",
+  "#59168b",
+  "#3c0366",
+  "#fdf4ff",
+  "#fae8ff",
+  "#f6cfff",
+  "#f4a8ff",
+  "#ed6aff",
+  "#e12afb",
+  "#c800de",
+  "#a800b7",
+  "#8a0194",
+  "#721378",
+  "#4b004f",
+  "#fdf2f8",
+  "#fce7f3",
+  "#fccee8",
+  "#fda5d5",
+  "#fb64b6",
+  "#f6339a",
+  "#e60076",
+  "#c6005c",
+  "#a3004c",
+  "#861043",
+  "#510424",
+  "#fff1f2",
+  "#ffe4e6",
+  "#ffccd3",
+  "#ffa1ad",
+  "#ff637e",
+  "#ff2056",
+  "#ec003f",
+  "#c70036",
+  "#a50036",
+  "#8b0836",
+  "#4d0218",
+  "#f8fafc",
+  "#f1f5f9",
+  "#e2e8f0",
+  "#cad5e2",
+  "#90a1b9",
+  "#62748e",
+  "#45556c",
+  "#314158",
+  "#1d293d",
+  "#0f172b",
+  "#020618",
+  "#f9fafb",
+  "#f3f4f6",
+  "#e5e7eb",
+  "#d1d5dc",
+  "#99a1af",
+  "#6a7282",
+  "#4a5565",
+  "#364153",
+  "#1e2939",
+  "#101828",
+  "#030712",
+  "#fafafa",
+  "#f4f4f5",
+  "#e4e4e7",
+  "#d4d4d8",
+  "#9f9fa9",
+  "#71717b",
+  "#52525c",
+  "#3f3f46",
+  "#27272a",
+  "#18181b",
+  "#09090b",
+  "#f5f5f5",
+  "#e5e5e5",
+  "#d4d4d4",
+  "#a1a1a1",
+  "#737373",
+  "#525252",
+  "#404040",
+  "#262626",
+  "#171717",
+  "#0a0a0a",
+  "#fafaf9",
+  "#f5f5f4",
+  "#e7e5e4",
+  "#d6d3d1",
+  "#a6a09b",
+  "#79716b",
+  "#57534d",
+  "#44403b",
+  "#292524",
+  "#1c1917",
+  "#0c0a09",
+];
diff --git a/apps/web/src/data/colors/syntax-ui.tsx b/apps/web/src/data/colors/syntax-ui.tsx
new file mode 100644
index 00000000..6a7677b4
--- /dev/null
+++ b/apps/web/src/data/colors/syntax-ui.tsx
@@ -0,0 +1,32 @@
+// These are the gradients from Syntax UI (https://syntaxui.com/effects/gradients)
+
+export const syntaxUIGradients = [
+  // Cyan to Blue gradients
+  "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)",
+  "linear-gradient(to right, #bfdbfe, #a5f3fc)",
+  "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)",
+
+  // Purple gradients
+  "linear-gradient(to right, #e9d5ff, #d8b4fe, #c084fc)",
+  "linear-gradient(to right, #c4b5fd, #a78bfa, #8b5cf6)",
+
+  // Blue gradients
+  "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)",
+  "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)",
+
+  // Green gradients
+  "linear-gradient(to right, #6ee7b7, #34d399, #10b981)",
+  "linear-gradient(to right, #d1fae5, #a7f3d0, #6ee7b7)",
+
+  // Red gradient
+  "linear-gradient(to right, #fca5a5, #f87171, #ef4444)",
+
+  // Yellow/Orange gradient
+  "linear-gradient(to right, #fde68a, #fbbf24, #f59e0b)",
+
+  // Pink gradient
+  "linear-gradient(to right, #fbcfe8, #f9a8d4, #f472b6)",
+
+  // Neon radial gradient
+  "radial-gradient(circle at bottom left, #ff00ff, #00ffff)",
+];
-- 
cgit v1.3.1


From ae54aff1a9762ceb9e42a534c29c584bbf18d6d5 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 2 Aug 2025 16:12:50 +0200
Subject: style: padding in media panel tabs

---
 apps/web/src/components/editor/media-panel/tabbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor/media-panel/tabbar.tsx b/apps/web/src/components/editor/media-panel/tabbar.tsx
index dcf5c8e7..fc4f677d 100644
--- a/apps/web/src/components/editor/media-panel/tabbar.tsx
+++ b/apps/web/src/components/editor/media-panel/tabbar.tsx
@@ -61,7 +61,7 @@ export function TabBar() {
   }, []);
 
   return (
-    <div className="flex pt-4">
+    <div className="flex">
       <ScrollButton
         direction="left"
         onClick={scrollToStart}
@@ -69,7 +69,7 @@ export function TabBar() {
       />
       <div
         ref={scrollContainerRef}
-        className="h-full px-4 flex flex-col 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];
-- 
cgit v1.3.1


From 02a50d12de10849605f11ce0ab0a41e2e1c112ba Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 2 Aug 2025 19:22:06 +0200
Subject: feat: empty state on properties panel

---
 apps/web/src/app/editor/[project_id]/page.tsx      |   2 +-
 .../components/editor/properties-panel/index.tsx   | 109 ++++++---------------
 apps/web/src/components/icons.tsx                  |  22 -----
 3 files changed, 29 insertions(+), 104 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 03579144..cae8e779 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -199,7 +199,7 @@ export default function Editor() {
                   minSize={15}
                   maxSize={40}
                   onResize={setPropertiesPanel}
-                  className="min-w-0"
+                  className="min-w-0 rounded-sm"
                 >
                   <PropertiesPanel />
                 </ResizablePanel>
diff --git a/apps/web/src/components/editor/properties-panel/index.tsx b/apps/web/src/components/editor/properties-panel/index.tsx
index f1b3f6a3..6c79327e 100644
--- a/apps/web/src/components/editor/properties-panel/index.tsx
+++ b/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 || "N/A").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>
   );
 }
diff --git a/apps/web/src/components/icons.tsx b/apps/web/src/components/icons.tsx
index 065a123d..43f953e8 100644
--- a/apps/web/src/components/icons.tsx
+++ b/apps/web/src/components/icons.tsx
@@ -163,25 +163,3 @@ export function DataBuddyIcon({
     </svg>
   );
 }
-
-export function SquareSlashIcon({
-  className,
-  size = 24,
-}: {
-  className?: string;
-  size?: number;
-}) {
-  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width={size}
-      height={size}
-      className={className}
-      fill="none"
-      viewBox="0 0 256 256"
-    >
-      <rect width="18" height="18" x="3" y="3" rx="2" />
-      <line x1="9" x2="15" y1="15" y2="9" />
-    </svg>
-  );
-}
-- 
cgit v1.3.1


From c0651fec193bcea9a1764ca8435d7191c5d3980d Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sun, 3 Aug 2025 12:29:06 +0200
Subject: feat: replace scroll-area from radix with one that actually works and
 doesn't cause layout issues

---
 apps/web/src/app/globals.css               |  2 +-
 apps/web/src/components/ui/scroll-area.tsx | 55 ++++++------------------------
 2 files changed, 11 insertions(+), 46 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index b25f2c1e..a6b86ae4 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -229,7 +229,7 @@
 
 @utility scrollbar-thin {
   &::-webkit-scrollbar {
-    width: 8px;
+    width: 6px;
     height: 8px;
   }
   &::-webkit-scrollbar-track {
diff --git a/apps/web/src/components/ui/scroll-area.tsx b/apps/web/src/components/ui/scroll-area.tsx
index d5aaf2ee..1fc227b0 100644
--- a/apps/web/src/components/ui/scroll-area.tsx
+++ b/apps/web/src/components/ui/scroll-area.tsx
@@ -1,53 +1,18 @@
-"use client";
-
 import * as React from "react";
-import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
-
-import { cn } from "../../lib/utils";
+import { cn } from "@/lib/utils";
 
 const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
-    type?: "auto" | "always" | "scroll" | "hover";
-    showHorizontalScrollbar?: boolean;
-  }
->(({ className, children, type, showHorizontalScrollbar, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    type={type}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    {showHorizontalScrollbar && <ScrollBar orientation="horizontal" />}
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => (
+  <div
     ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-px",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-px",
-      className
-    )}
+    className={cn("overflow-auto scrollbar-thin", className)}
     {...props}
   >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+    {children}
+  </div>
 ));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
+ScrollArea.displayName = "ScrollArea";
 
-export { ScrollArea, ScrollBar };
+export { ScrollArea };
-- 
cgit v1.3.1


From b52a9ca3e27782f84c2a916120e82e81e48cd7d5 Mon Sep 17 00:00:00 2001
From: Eshan Das <eshandas2002@gmail.com>
Date: Sun, 3 Aug 2025 17:14:23 +0530
Subject: fix: preserve line breaks in text element rendering (#461)

- Change whiteSpace from 'nowrap' to 'pre-wrap' in preview panel
- Allows multi-line text content to display correctly
- Maintains existing text wrapping behavior
---
 apps/web/src/components/editor/preview-panel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx
index 58cc5d5b..b9c03382 100644
--- a/apps/web/src/components/editor/preview-panel.tsx
+++ b/apps/web/src/components/editor/preview-panel.tsx
@@ -381,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 }),
             }}
-- 
cgit v1.3.1


From 48b694bbd875740bbdb350001bb688c2fbf4ad1f Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 4 Aug 2025 01:30:33 +0200
Subject: feat: sound effects functionality with freesound's api

---
 apps/web/.env.example                              |   6 +-
 apps/web/src/app/api/sounds/search/route.ts        | 254 +++++++++++
 apps/web/src/app/editor/[project_id]/layout.tsx    |  13 +
 apps/web/src/app/globals.css                       |   2 +-
 .../src/components/editor/media-panel/index.tsx    |   4 +-
 .../web/src/components/editor/media-panel/store.ts |   6 +-
 .../components/editor/media-panel/views/audio.tsx  |  19 -
 .../components/editor/media-panel/views/sounds.tsx | 463 +++++++++++++++++++++
 apps/web/src/components/editor/timeline/index.tsx  |   9 +-
 .../src/components/providers/global-prefetcher.ts  |  78 ++++
 apps/web/src/components/ui/input.tsx               |  62 ++-
 apps/web/src/env.ts                                |   4 +
 apps/web/src/hooks/use-sound-search.ts             | 155 +++++++
 apps/web/src/lib/storage/storage-service.ts        |  92 ++++
 apps/web/src/lib/storage/types.ts                  |   1 +
 apps/web/src/stores/sounds-store.ts                | 273 ++++++++++++
 apps/web/src/stores/timeline-store.ts              |  22 +-
 apps/web/src/types/sounds.ts                       |  39 ++
 18 files changed, 1457 insertions(+), 45 deletions(-)
 create mode 100644 apps/web/src/app/api/sounds/search/route.ts
 create mode 100644 apps/web/src/app/editor/[project_id]/layout.tsx
 delete mode 100644 apps/web/src/components/editor/media-panel/views/audio.tsx
 create mode 100644 apps/web/src/components/editor/media-panel/views/sounds.tsx
 create mode 100644 apps/web/src/components/providers/global-prefetcher.ts
 create mode 100644 apps/web/src/hooks/use-sound-search.ts
 create mode 100644 apps/web/src/stores/sounds-store.ts
 create mode 100644 apps/web/src/types/sounds.ts

(limited to 'apps/web/src/components')

diff --git a/apps/web/.env.example b/apps/web/.env.example
index b21f9a92..af84fd77 100644
--- a/apps/web/.env.example
+++ b/apps/web/.env.example
@@ -16,4 +16,8 @@ UPSTASH_REDIS_REST_TOKEN=example_token
 
 # Marble Blog
 MARBLE_WORKSPACE_KEY=cm6ytuq9x0000i803v0isidst # example organization key
-NEXT_PUBLIC_MARBLE_API_URL=https://api.marblecms.com
\ No newline at end of file
+NEXT_PUBLIC_MARBLE_API_URL=https://api.marblecms.com
+
+# Freesound (generate at https://freesound.org/apiv2/apply/)
+FREESOUND_CLIENT_ID=...
+FREESOUND_API_KEY=...
\ No newline at end of file
diff --git a/apps/web/src/app/api/sounds/search/route.ts b/apps/web/src/app/api/sounds/search/route.ts
new file mode 100644
index 00000000..15954140
--- /dev/null
+++ b/apps/web/src/app/api/sounds/search/route.ts
@@ -0,0 +1,254 @@
+import { NextRequest, NextResponse } from "next/server";
+import { z } from "zod";
+import { env } from "@/env";
+import { baseRateLimit } from "@/lib/rate-limit";
+
+const searchParamsSchema = z.object({
+  q: z.string().max(500, "Query too long").optional(),
+  type: z.enum(["songs", "effects"]).optional(),
+  page: z.coerce.number().int().min(1).max(1000).default(1),
+  page_size: z.coerce.number().int().min(1).max(150).default(20),
+  sort: z
+    .enum(["downloads", "rating", "created", "score"])
+    .default("downloads"),
+  min_rating: z.coerce.number().min(0).max(5).default(3),
+});
+
+const freesoundResultSchema = z.object({
+  id: z.number(),
+  name: z.string(),
+  description: z.string(),
+  url: z.string().url(),
+  previews: z
+    .object({
+      "preview-hq-mp3": z.string().url(),
+      "preview-lq-mp3": z.string().url(),
+      "preview-hq-ogg": z.string().url(),
+      "preview-lq-ogg": z.string().url(),
+    })
+    .optional(),
+  download: z.string().url().optional(),
+  duration: z.number(),
+  filesize: z.number(),
+  type: z.string(),
+  channels: z.number(),
+  bitrate: z.number(),
+  bitdepth: z.number(),
+  samplerate: z.number(),
+  username: z.string(),
+  tags: z.array(z.string()),
+  license: z.string(),
+  created: z.string(),
+  num_downloads: z.number().optional(),
+  avg_rating: z.number().optional(),
+  num_ratings: z.number().optional(),
+});
+
+const freesoundResponseSchema = z.object({
+  count: z.number(),
+  next: z.string().url().nullable(),
+  previous: z.string().url().nullable(),
+  results: z.array(freesoundResultSchema),
+});
+
+const transformedResultSchema = z.object({
+  id: z.number(),
+  name: z.string(),
+  description: z.string(),
+  url: z.string(),
+  previewUrl: z.string().optional(),
+  downloadUrl: z.string().optional(),
+  duration: z.number(),
+  filesize: z.number(),
+  type: z.string(),
+  channels: z.number(),
+  bitrate: z.number(),
+  bitdepth: z.number(),
+  samplerate: z.number(),
+  username: z.string(),
+  tags: z.array(z.string()),
+  license: z.string(),
+  created: z.string(),
+  downloads: z.number().optional(),
+  rating: z.number().optional(),
+  ratingCount: z.number().optional(),
+});
+
+const apiResponseSchema = z.object({
+  count: z.number(),
+  next: z.string().nullable(),
+  previous: z.string().nullable(),
+  results: z.array(transformedResultSchema),
+  query: z.string().optional(),
+  type: z.string(),
+  page: z.number(),
+  pageSize: z.number(),
+  sort: z.string(),
+  minRating: z.number().optional(),
+});
+
+export async function GET(request: NextRequest) {
+  try {
+    const ip = request.headers.get("x-forwarded-for") ?? "anonymous";
+    const { success } = await baseRateLimit.limit(ip);
+
+    if (!success) {
+      return NextResponse.json({ error: "Too many requests" }, { status: 429 });
+    }
+
+    const { searchParams } = new URL(request.url);
+
+    const validationResult = searchParamsSchema.safeParse({
+      q: searchParams.get("q") || undefined,
+      type: searchParams.get("type") || undefined,
+      page: searchParams.get("page") || undefined,
+      page_size: searchParams.get("page_size") || undefined,
+      sort: searchParams.get("sort") || undefined,
+      min_rating: searchParams.get("min_rating") || undefined,
+    });
+
+    if (!validationResult.success) {
+      return NextResponse.json(
+        {
+          error: "Invalid parameters",
+          details: validationResult.error.flatten().fieldErrors,
+        },
+        { status: 400 }
+      );
+    }
+
+    const {
+      q: query,
+      type,
+      page,
+      page_size: pageSize,
+      sort,
+      min_rating,
+    } = validationResult.data;
+
+    if (type === "songs") {
+      return NextResponse.json(
+        {
+          error: "Songs are not available yet",
+          message:
+            "Song search functionality is coming soon. Try searching for sound effects instead.",
+        },
+        { status: 501 }
+      );
+    }
+
+    const baseUrl = "https://freesound.org/apiv2/search/text/";
+
+    // Use score sorting for search queries, downloads for top sounds
+    const sortParam = query
+      ? sort === "score"
+        ? "score"
+        : `${sort}_desc`
+      : `${sort}_desc`;
+
+    const params = new URLSearchParams({
+      query: query || "",
+      token: env.FREESOUND_API_KEY,
+      page: page.toString(),
+      page_size: pageSize.toString(),
+      sort: sortParam,
+      fields:
+        "id,name,description,url,previews,download,duration,filesize,type,channels,bitrate,bitdepth,samplerate,username,tags,license,created,num_downloads,avg_rating,num_ratings",
+    });
+
+    // Always apply sound effect filters (since we're primarily a sound effects search)
+    if (type === "effects" || !type) {
+      params.append("filter", "duration:[* TO 30.0]");
+      params.append("filter", `avg_rating:[${min_rating} TO *]`);
+      params.append(
+        "filter",
+        "tag:sound-effect OR tag:sfx OR tag:foley OR tag:ambient OR tag:nature OR tag:mechanical OR tag:electronic OR tag:impact OR tag:whoosh OR tag:explosion"
+      );
+    }
+
+    const response = await fetch(`${baseUrl}?${params.toString()}`);
+
+    if (!response.ok) {
+      const errorText = await response.text();
+      console.error("Freesound API error:", response.status, errorText);
+      return NextResponse.json(
+        { error: "Failed to search sounds" },
+        { status: response.status }
+      );
+    }
+
+    const rawData = await response.json();
+
+    const freesoundValidation = freesoundResponseSchema.safeParse(rawData);
+    if (!freesoundValidation.success) {
+      console.error(
+        "Invalid Freesound API response:",
+        freesoundValidation.error
+      );
+      return NextResponse.json(
+        { error: "Invalid response from Freesound API" },
+        { status: 502 }
+      );
+    }
+
+    const data = freesoundValidation.data;
+
+    const transformedResults = data.results.map((result) => ({
+      id: result.id,
+      name: result.name,
+      description: result.description,
+      url: result.url,
+      previewUrl:
+        result.previews?.["preview-hq-mp3"] ||
+        result.previews?.["preview-lq-mp3"],
+      downloadUrl: result.download,
+      duration: result.duration,
+      filesize: result.filesize,
+      type: result.type,
+      channels: result.channels,
+      bitrate: result.bitrate,
+      bitdepth: result.bitdepth,
+      samplerate: result.samplerate,
+      username: result.username,
+      tags: result.tags,
+      license: result.license,
+      created: result.created,
+      downloads: result.num_downloads || 0,
+      rating: result.avg_rating || 0,
+      ratingCount: result.num_ratings || 0,
+    }));
+
+    const responseData = {
+      count: data.count,
+      next: data.next,
+      previous: data.previous,
+      results: transformedResults,
+      query: query || "",
+      type: type || "effects",
+      page,
+      pageSize,
+      sort,
+      minRating: min_rating,
+    };
+
+    const responseValidation = apiResponseSchema.safeParse(responseData);
+    if (!responseValidation.success) {
+      console.error(
+        "Invalid API response structure:",
+        responseValidation.error
+      );
+      return NextResponse.json(
+        { error: "Internal response formatting error" },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json(responseValidation.data);
+  } catch (error) {
+    console.error("Error searching sounds:", error);
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    );
+  }
+}
diff --git a/apps/web/src/app/editor/[project_id]/layout.tsx b/apps/web/src/app/editor/[project_id]/layout.tsx
new file mode 100644
index 00000000..151f7f94
--- /dev/null
+++ b/apps/web/src/app/editor/[project_id]/layout.tsx
@@ -0,0 +1,13 @@
+"use client";
+
+import { useGlobalPrefetcher } from "@/components/providers/global-prefetcher";
+
+export default function EditorLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  useGlobalPrefetcher();
+
+  return <div>{children}</div>;
+}
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index a6b86ae4..ca78ee26 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -23,7 +23,7 @@
   --muted-foreground: hsl(0 0% 50%);
   --accent: hsl(216, 13%, 92%);
   --accent-foreground: hsl(0 0% 2%);
-  --destructive: hsl(0 100% 40%);
+  --destructive: hsl(0, 83%, 50%);
   --destructive-foreground: hsl(0, 0%, 100%);
   --border: hsl(0 0% 83%);
   --input: hsl(0 0% 85.1%);
diff --git a/apps/web/src/components/editor/media-panel/index.tsx b/apps/web/src/components/editor/media-panel/index.tsx
index 4d80b642..70eb69dd 100644
--- a/apps/web/src/components/editor/media-panel/index.tsx
+++ b/apps/web/src/components/editor/media-panel/index.tsx
@@ -4,7 +4,7 @@ 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";
 
@@ -13,7 +13,7 @@ export function MediaPanel() {
 
   const viewMap: Record<Tab, React.ReactNode> = {
     media: <MediaView />,
-    audio: <AudioView />,
+    sounds: <SoundsView />,
     text: <TextView />,
     stickers: (
       <div className="p-4 text-muted-foreground">
diff --git a/apps/web/src/components/editor/media-panel/store.ts b/apps/web/src/components/editor/media-panel/store.ts
index 577417a9..e1212030 100644
--- a/apps/web/src/components/editor/media-panel/store.ts
+++ b/apps/web/src/components/editor/media-panel/store.ts
@@ -15,7 +15,7 @@ import { create } from "zustand";
 
 export type Tab =
   | "media"
-  | "audio"
+  | "sounds"
   | "text"
   | "stickers"
   | "effects"
@@ -30,9 +30,9 @@ export const tabs: { [key in Tab]: { icon: LucideIcon; label: string } } = {
     icon: VideoIcon,
     label: "Media",
   },
-  audio: {
+  sounds: {
     icon: MusicIcon,
-    label: "Audio",
+    label: "Sounds",
   },
   text: {
     icon: TypeIcon,
diff --git a/apps/web/src/components/editor/media-panel/views/audio.tsx b/apps/web/src/components/editor/media-panel/views/audio.tsx
deleted file mode 100644
index 0d3c3f1e..00000000
--- a/apps/web/src/components/editor/media-panel/views/audio.tsx
+++ /dev/null
@@ -1,19 +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"
-        className="bg-panel-accent"
-        value={search}
-        onChange={(e) => setSearch(e.target.value)}
-      />
-      <div className="flex flex-col gap-2" />
-    </div>
-  );
-}
diff --git a/apps/web/src/components/editor/media-panel/views/sounds.tsx b/apps/web/src/components/editor/media-panel/views/sounds.tsx
new file mode 100644
index 00000000..306b81d3
--- /dev/null
+++ b/apps/web/src/components/editor/media-panel/views/sounds.tsx
@@ -0,0 +1,463 @@
+"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 } 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 {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  PropertyGroup,
+  PropertyItem,
+  PropertyItemValue,
+} from "@/components/editor/properties-panel/property-item";
+
+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,
+  } = useSoundsStore();
+  const {
+    results: searchResults,
+    isLoading: isSearching,
+    loadMore,
+    hasNextPage,
+    isLoadingMore,
+  } = useSoundSearch(searchQuery);
+
+  // 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">
+      <Input
+        placeholder="Search sound effects"
+        className="bg-panel-accent"
+        value={searchQuery}
+        onChange={(e) => setSearchQuery(e.target.value)}
+        showClearIcon
+        onClear={() => setSearchQuery("")}
+      />
+
+      <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>
+  );
+}
diff --git a/apps/web/src/components/editor/timeline/index.tsx b/apps/web/src/components/editor/timeline/index.tsx
index 8f41fbf3..7a2cc7f2 100644
--- a/apps/web/src/components/editor/timeline/index.tsx
+++ b/apps/web/src/components/editor/timeline/index.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { ScrollArea } from "../../ui/scroll-area";
+import { ScrollArea } from "@/components/ui/scroll-area";
 import { Button } from "../../ui/button";
 import {
   Scissors,
@@ -746,12 +746,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={{
diff --git a/apps/web/src/components/providers/global-prefetcher.ts b/apps/web/src/components/providers/global-prefetcher.ts
new file mode 100644
index 00000000..2d7c684c
--- /dev/null
+++ b/apps/web/src/components/providers/global-prefetcher.ts
@@ -0,0 +1,78 @@
+"use client";
+
+import { useEffect } from "react";
+import { useSoundsStore } from "@/stores/sounds-store";
+
+export function useGlobalPrefetcher() {
+  const {
+    hasLoaded,
+    setTopSoundEffects,
+    setLoading,
+    setError,
+    setHasLoaded,
+    setCurrentPage,
+    setHasNextPage,
+    setTotalCount,
+  } = useSoundsStore();
+
+  useEffect(() => {
+    if (hasLoaded) return;
+
+    let ignore = false;
+
+    const prefetchTopSounds = async () => {
+      try {
+        if (!ignore) {
+          setLoading(true);
+          setError(null);
+        }
+
+        const response = await fetch(
+          "/api/sounds/search?page_size=50&sort=downloads"
+        );
+
+        if (!ignore) {
+          if (!response.ok) {
+            throw new Error(`Failed to fetch: ${response.status}`);
+          }
+
+          const data = await response.json();
+          setTopSoundEffects(data.results);
+          setHasLoaded(true);
+
+          // Set pagination state for top sounds
+          setCurrentPage(1);
+          setHasNextPage(!!data.next);
+          setTotalCount(data.count);
+        }
+      } catch (error) {
+        if (!ignore) {
+          console.error("Failed to prefetch top sounds:", error);
+          setError(
+            error instanceof Error ? error.message : "Failed to load sounds"
+          );
+        }
+      } finally {
+        if (!ignore) {
+          setLoading(false);
+        }
+      }
+    };
+
+    const timeoutId = setTimeout(prefetchTopSounds, 100);
+
+    return () => {
+      clearTimeout(timeoutId);
+      ignore = true;
+    };
+  }, [
+    hasLoaded,
+    setTopSoundEffects,
+    setLoading,
+    setError,
+    setHasLoaded,
+    setCurrentPage,
+    setHasNextPage,
+    setTotalCount,
+  ]);
+}
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index d4cd57a1..4fb0f5b4 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Eye, EyeOff } from "lucide-react";
+import { Eye, EyeOff, X } from "lucide-react";
 
 import { cn } from "../../lib/utils";
 import { Button } from "./button";
@@ -7,39 +7,91 @@ import { Button } from "./button";
 interface InputProps extends React.ComponentProps<"input"> {
   showPassword?: boolean;
   onShowPasswordChange?: (show: boolean) => void;
+  showClearIcon?: boolean;
+  onClear?: () => void;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
-    { className, type, showPassword, onShowPasswordChange, value, ...props },
+    {
+      className,
+      type,
+      showPassword,
+      onShowPasswordChange,
+      showClearIcon,
+      onClear,
+      value,
+      onFocus,
+      onBlur,
+      ...props
+    },
     ref
   ) => {
+    const [isFocused, setIsFocused] = React.useState(false);
+
     const isPassword = type === "password";
     const showPasswordToggle = isPassword && onShowPasswordChange;
+    const showClear =
+      showClearIcon &&
+      onClear &&
+      value &&
+      String(value).length > 0 &&
+      isFocused;
     const inputType = isPassword && showPassword ? "text" : type;
 
+    const hasIcons = showPasswordToggle || showClear;
+    const iconCount = Number(showPasswordToggle) + Number(showClear);
+    const paddingRight =
+      iconCount === 2 ? "pr-20" : iconCount === 1 ? "pr-10" : "";
+
     return (
-      <div className={showPassword ? "relative w-full" : ""}>
+      <div className={hasIcons ? "relative w-full" : ""}>
         <input
           type={inputType}
           className={cn(
             "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
             "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[2px]",
             "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-            showPasswordToggle && "pr-10",
+            paddingRight,
             className
           )}
           ref={ref}
           value={value}
+          onFocus={(e) => {
+            setIsFocused(true);
+            onFocus?.(e);
+          }}
+          onBlur={(e) => {
+            setIsFocused(false);
+            onBlur?.(e);
+          }}
           {...props}
         />
+        {showClear && (
+          <Button
+            type="button"
+            variant="text"
+            size="icon"
+            onMouseDown={(e) => {
+              e.preventDefault();
+              onClear?.();
+            }}
+            className="absolute right-0 top-0 h-full px-3 text-muted-foreground !opacity-100"
+            aria-label="Clear input"
+          >
+            <X className="!size-[0.85]" />
+          </Button>
+        )}
         {showPasswordToggle && (
           <Button
             type="button"
             variant="text"
             size="icon"
             onClick={() => onShowPasswordChange?.(!showPassword)}
-            className="absolute right-0 top-0 h-full px-3 text-muted-foreground hover:text-foreground"
+            className={cn(
+              "absolute top-0 h-full px-3 text-muted-foreground hover:text-foreground",
+              showClear ? "right-10" : "right-0"
+            )}
             aria-label={showPassword ? "Hide password" : "Show password"}
           >
             {showPassword ? (
diff --git a/apps/web/src/env.ts b/apps/web/src/env.ts
index 8071107e..fd4ad523 100644
--- a/apps/web/src/env.ts
+++ b/apps/web/src/env.ts
@@ -15,6 +15,8 @@ export const env = createEnv({
       .default("development"),
     UPSTASH_REDIS_REST_URL: z.string().url(),
     UPSTASH_REDIS_REST_TOKEN: z.string(),
+    FREESOUND_CLIENT_ID: z.string(),
+    FREESOUND_API_KEY: z.string(),
   },
   client: {},
   runtimeEnv: {
@@ -23,5 +25,7 @@ export const env = createEnv({
     NODE_ENV: process.env.NODE_ENV,
     UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL,
     UPSTASH_REDIS_REST_TOKEN: process.env.UPSTASH_REDIS_REST_TOKEN,
+    FREESOUND_CLIENT_ID: process.env.FREESOUND_CLIENT_ID,
+    FREESOUND_API_KEY: process.env.FREESOUND_API_KEY,
   },
 });
diff --git a/apps/web/src/hooks/use-sound-search.ts b/apps/web/src/hooks/use-sound-search.ts
new file mode 100644
index 00000000..e815a668
--- /dev/null
+++ b/apps/web/src/hooks/use-sound-search.ts
@@ -0,0 +1,155 @@
+import { useEffect } from "react";
+import { useSoundsStore } from "@/stores/sounds-store";
+
+/**
+ * Custom hook for searching sound effects with race condition protection.
+ * Uses global Zustand store to persist search state across tab switches.
+ * - Debounced search (300ms)
+ * - Race condition protection with cleanup
+ * - Proper error handling
+ */
+
+export function useSoundSearch(query: string) {
+  const {
+    searchResults,
+    isSearching,
+    searchError,
+    lastSearchQuery,
+    currentPage,
+    hasNextPage,
+    isLoadingMore,
+    totalCount,
+    setSearchResults,
+    setSearching,
+    setSearchError,
+    setLastSearchQuery,
+    setCurrentPage,
+    setHasNextPage,
+    setTotalCount,
+    setLoadingMore,
+    appendSearchResults,
+    appendTopSounds,
+    resetPagination,
+  } = useSoundsStore();
+
+  // Load more function for infinite scroll
+  const loadMore = async () => {
+    if (isLoadingMore || !hasNextPage) return;
+
+    try {
+      setLoadingMore(true);
+      const nextPage = currentPage + 1;
+
+      const searchParams = new URLSearchParams({
+        page: nextPage.toString(),
+        type: "effects",
+      });
+
+      if (query.trim()) {
+        searchParams.set("q", query);
+      }
+
+      const response = await fetch(
+        `/api/sounds/search?${searchParams.toString()}`
+      );
+
+      if (response.ok) {
+        const data = await response.json();
+
+        // Append to appropriate array based on whether we have a query
+        if (query.trim()) {
+          appendSearchResults(data.results);
+        } else {
+          appendTopSounds(data.results);
+        }
+
+        setCurrentPage(nextPage);
+        setHasNextPage(!!data.next);
+        setTotalCount(data.count);
+      } else {
+        setSearchError(`Load more failed: ${response.status}`);
+      }
+    } catch (err) {
+      setSearchError(err instanceof Error ? err.message : "Load more failed");
+    } finally {
+      setLoadingMore(false);
+    }
+  };
+
+  useEffect(() => {
+    if (!query.trim()) {
+      setSearchResults([]);
+      setSearchError(null);
+      setLastSearchQuery("");
+      // Don't reset pagination here - top sounds pagination is managed by prefetcher
+      return;
+    }
+
+    // If we already searched for this query and have results, don't search again
+    if (query === lastSearchQuery && searchResults.length > 0) {
+      return;
+    }
+
+    let ignore = false;
+
+    const timeoutId = setTimeout(async () => {
+      try {
+        setSearching(true);
+        setSearchError(null);
+        resetPagination();
+
+        const response = await fetch(
+          `/api/sounds/search?q=${encodeURIComponent(query)}&type=effects&page=1`
+        );
+
+        if (!ignore) {
+          if (response.ok) {
+            const data = await response.json();
+            setSearchResults(data.results);
+            setLastSearchQuery(query);
+            setHasNextPage(!!data.next);
+            setTotalCount(data.count);
+            setCurrentPage(1);
+          } else {
+            setSearchError(`Search failed: ${response.status}`);
+          }
+        }
+      } catch (err) {
+        if (!ignore) {
+          setSearchError(err instanceof Error ? err.message : "Search failed");
+        }
+      } finally {
+        if (!ignore) {
+          setSearching(false);
+        }
+      }
+    }, 300);
+
+    return () => {
+      clearTimeout(timeoutId);
+      ignore = true;
+    };
+  }, [
+    query,
+    lastSearchQuery,
+    searchResults.length,
+    setSearchResults,
+    setSearching,
+    setSearchError,
+    setLastSearchQuery,
+    setCurrentPage,
+    setHasNextPage,
+    setTotalCount,
+    resetPagination,
+  ]);
+
+  return {
+    results: searchResults,
+    isLoading: isSearching,
+    error: searchError,
+    loadMore,
+    hasNextPage,
+    isLoadingMore,
+    totalCount,
+  };
+}
diff --git a/apps/web/src/lib/storage/storage-service.ts b/apps/web/src/lib/storage/storage-service.ts
index 2ff63ac7..98001591 100644
--- a/apps/web/src/lib/storage/storage-service.ts
+++ b/apps/web/src/lib/storage/storage-service.ts
@@ -9,9 +9,11 @@ import {
   TimelineData,
 } from "./types";
 import { TimelineTrack } from "@/types/timeline";
+import { SavedSoundsData, SavedSound, SoundEffect } from "@/types/sounds";
 
 class StorageService {
   private projectsAdapter: IndexedDBAdapter<SerializedProject>;
+  private savedSoundsAdapter: IndexedDBAdapter<SavedSoundsData>;
   private config: StorageConfig;
 
   constructor() {
@@ -19,6 +21,7 @@ class StorageService {
       projectsDb: "video-editor-projects",
       mediaDb: "video-editor-media",
       timelineDb: "video-editor-timelines",
+      savedSoundsDb: "video-editor-saved-sounds",
       version: 1,
     };
 
@@ -27,6 +30,12 @@ class StorageService {
       "projects",
       this.config.version
     );
+
+    this.savedSoundsAdapter = new IndexedDBAdapter<SavedSoundsData>(
+      this.config.savedSoundsDb,
+      "saved-sounds",
+      this.config.version
+    );
   }
 
   // Helper to get project-specific media adapters
@@ -264,6 +273,89 @@ class StorageService {
     };
   }
 
+  async loadSavedSounds(): Promise<SavedSoundsData> {
+    try {
+      const savedSoundsData = await this.savedSoundsAdapter.get("user-sounds");
+      return (
+        savedSoundsData || {
+          sounds: [],
+          lastModified: new Date().toISOString(),
+        }
+      );
+    } catch (error) {
+      console.error("Failed to load saved sounds:", error);
+      return { sounds: [], lastModified: new Date().toISOString() };
+    }
+  }
+
+  async saveSoundEffect(soundEffect: SoundEffect): Promise<void> {
+    try {
+      const currentData = await this.loadSavedSounds();
+
+      // Check if sound is already saved
+      if (currentData.sounds.some((sound) => sound.id === soundEffect.id)) {
+        return; // Already saved
+      }
+
+      const savedSound: SavedSound = {
+        id: soundEffect.id,
+        name: soundEffect.name,
+        username: soundEffect.username,
+        previewUrl: soundEffect.previewUrl,
+        downloadUrl: soundEffect.downloadUrl,
+        duration: soundEffect.duration,
+        tags: soundEffect.tags,
+        license: soundEffect.license,
+        savedAt: new Date().toISOString(),
+      };
+
+      const updatedData: SavedSoundsData = {
+        sounds: [...currentData.sounds, savedSound],
+        lastModified: new Date().toISOString(),
+      };
+
+      await this.savedSoundsAdapter.set("user-sounds", updatedData);
+    } catch (error) {
+      console.error("Failed to save sound effect:", error);
+      throw error;
+    }
+  }
+
+  async removeSavedSound(soundId: number): Promise<void> {
+    try {
+      const currentData = await this.loadSavedSounds();
+
+      const updatedData: SavedSoundsData = {
+        sounds: currentData.sounds.filter((sound) => sound.id !== soundId),
+        lastModified: new Date().toISOString(),
+      };
+
+      await this.savedSoundsAdapter.set("user-sounds", updatedData);
+    } catch (error) {
+      console.error("Failed to remove saved sound:", error);
+      throw error;
+    }
+  }
+
+  async isSoundSaved(soundId: number): Promise<boolean> {
+    try {
+      const currentData = await this.loadSavedSounds();
+      return currentData.sounds.some((sound) => sound.id === soundId);
+    } catch (error) {
+      console.error("Failed to check if sound is saved:", error);
+      return false;
+    }
+  }
+
+  async clearSavedSounds(): Promise<void> {
+    try {
+      await this.savedSoundsAdapter.remove("user-sounds");
+    } catch (error) {
+      console.error("Failed to clear saved sounds:", error);
+      throw error;
+    }
+  }
+
   // Check browser support
   isOPFSSupported(): boolean {
     return OPFSAdapter.isSupported();
diff --git a/apps/web/src/lib/storage/types.ts b/apps/web/src/lib/storage/types.ts
index 0cfafd47..127b1690 100644
--- a/apps/web/src/lib/storage/types.ts
+++ b/apps/web/src/lib/storage/types.ts
@@ -30,6 +30,7 @@ export interface StorageConfig {
   projectsDb: string;
   mediaDb: string;
   timelineDb: string;
+  savedSoundsDb: string;
   version: number;
 }
 
diff --git a/apps/web/src/stores/sounds-store.ts b/apps/web/src/stores/sounds-store.ts
new file mode 100644
index 00000000..3771c07e
--- /dev/null
+++ b/apps/web/src/stores/sounds-store.ts
@@ -0,0 +1,273 @@
+import { create } from "zustand";
+import type { SoundEffect, SavedSound } from "@/types/sounds";
+import { storageService } from "@/lib/storage/storage-service";
+import { toast } from "sonner";
+import { useMediaStore } from "./media-store";
+import { useTimelineStore } from "./timeline-store";
+import { useProjectStore } from "./project-store";
+import { usePlaybackStore } from "./playback-store";
+
+interface SoundsStore {
+  topSoundEffects: SoundEffect[];
+  isLoading: boolean;
+  error: string | null;
+  hasLoaded: boolean;
+
+  // Search state
+  searchQuery: string;
+  searchResults: SoundEffect[];
+  isSearching: boolean;
+  searchError: string | null;
+  lastSearchQuery: string;
+  scrollPosition: number;
+
+  // Pagination state
+  currentPage: number;
+  hasNextPage: boolean;
+  totalCount: number;
+  isLoadingMore: boolean;
+
+  // Saved sounds state
+  savedSounds: SavedSound[];
+  isSavedSoundsLoaded: boolean;
+  isLoadingSavedSounds: boolean;
+  savedSoundsError: string | null;
+
+  // Timeline integration
+  addSoundToTimeline: (sound: SoundEffect) => Promise<boolean>;
+
+  setTopSoundEffects: (sounds: SoundEffect[]) => void;
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  setHasLoaded: (loaded: boolean) => void;
+
+  // Search actions
+  setSearchQuery: (query: string) => void;
+  setSearchResults: (results: SoundEffect[]) => void;
+  setSearching: (searching: boolean) => void;
+  setSearchError: (error: string | null) => void;
+  setLastSearchQuery: (query: string) => void;
+  setScrollPosition: (position: number) => void;
+
+  // Pagination actions
+  setCurrentPage: (page: number) => void;
+  setHasNextPage: (hasNext: boolean) => void;
+  setTotalCount: (count: number) => void;
+  setLoadingMore: (loading: boolean) => void;
+  appendSearchResults: (results: SoundEffect[]) => void;
+  appendTopSounds: (results: SoundEffect[]) => void;
+  resetPagination: () => void;
+
+  // Saved sounds actions
+  loadSavedSounds: () => Promise<void>;
+  saveSoundEffect: (soundEffect: SoundEffect) => Promise<void>;
+  removeSavedSound: (soundId: number) => Promise<void>;
+  isSoundSaved: (soundId: number) => boolean;
+  toggleSavedSound: (soundEffect: SoundEffect) => Promise<void>;
+  clearSavedSounds: () => Promise<void>;
+}
+
+export const useSoundsStore = create<SoundsStore>((set, get) => ({
+  topSoundEffects: [],
+  isLoading: false,
+  error: null,
+  hasLoaded: false,
+
+  // Search state
+  searchQuery: "",
+  searchResults: [],
+  isSearching: false,
+  searchError: null,
+  lastSearchQuery: "",
+  scrollPosition: 0,
+
+  // Pagination state
+  currentPage: 1,
+  hasNextPage: false,
+  totalCount: 0,
+  isLoadingMore: false,
+
+  // Saved sounds state
+  savedSounds: [],
+  isSavedSoundsLoaded: false,
+  isLoadingSavedSounds: false,
+  savedSoundsError: null,
+
+  setTopSoundEffects: (sounds) => set({ topSoundEffects: sounds }),
+  setLoading: (loading) => set({ isLoading: loading }),
+  setError: (error) => set({ error }),
+  setHasLoaded: (loaded) => set({ hasLoaded: loaded }),
+
+  // Search actions
+  setSearchQuery: (query) => set({ searchQuery: query }),
+  setSearchResults: (results) =>
+    set({ searchResults: results, currentPage: 1 }),
+  setSearching: (searching) => set({ isSearching: searching }),
+  setSearchError: (error) => set({ searchError: error }),
+  setLastSearchQuery: (query) => set({ lastSearchQuery: query }),
+  setScrollPosition: (position) => set({ scrollPosition: position }),
+
+  // Pagination actions
+  setCurrentPage: (page) => set({ currentPage: page }),
+  setHasNextPage: (hasNext) => set({ hasNextPage: hasNext }),
+  setTotalCount: (count) => set({ totalCount: count }),
+  setLoadingMore: (loading) => set({ isLoadingMore: loading }),
+  appendSearchResults: (results) =>
+    set((state) => ({
+      searchResults: [...state.searchResults, ...results],
+    })),
+  appendTopSounds: (results) =>
+    set((state) => ({
+      topSoundEffects: [...state.topSoundEffects, ...results],
+    })),
+  resetPagination: () =>
+    set({
+      currentPage: 1,
+      hasNextPage: false,
+      totalCount: 0,
+      isLoadingMore: false,
+    }),
+
+  // Saved sounds actions
+  loadSavedSounds: async () => {
+    if (get().isSavedSoundsLoaded) return;
+
+    try {
+      set({ isLoadingSavedSounds: true, savedSoundsError: null });
+      const savedSoundsData = await storageService.loadSavedSounds();
+      set({
+        savedSounds: savedSoundsData.sounds,
+        isSavedSoundsLoaded: true,
+        isLoadingSavedSounds: false,
+      });
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Failed to load saved sounds";
+      set({
+        savedSoundsError: errorMessage,
+        isLoadingSavedSounds: false,
+      });
+      console.error("Failed to load saved sounds:", error);
+    }
+  },
+
+  saveSoundEffect: async (soundEffect: SoundEffect) => {
+    try {
+      await storageService.saveSoundEffect(soundEffect);
+
+      // Refresh saved sounds
+      const savedSoundsData = await storageService.loadSavedSounds();
+      set({ savedSounds: savedSoundsData.sounds });
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Failed to save sound";
+      set({ savedSoundsError: errorMessage });
+      toast.error("Failed to save sound");
+      console.error("Failed to save sound:", error);
+    }
+  },
+
+  removeSavedSound: async (soundId: number) => {
+    try {
+      await storageService.removeSavedSound(soundId);
+
+      // Update local state immediately
+      set((state) => ({
+        savedSounds: state.savedSounds.filter((sound) => sound.id !== soundId),
+      }));
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Failed to remove sound";
+      set({ savedSoundsError: errorMessage });
+      toast.error("Failed to remove sound");
+      console.error("Failed to remove sound:", error);
+    }
+  },
+
+  isSoundSaved: (soundId: number) => {
+    const { savedSounds } = get();
+    return savedSounds.some((sound) => sound.id === soundId);
+  },
+
+  toggleSavedSound: async (soundEffect: SoundEffect) => {
+    const { isSoundSaved, saveSoundEffect, removeSavedSound } = get();
+
+    if (isSoundSaved(soundEffect.id)) {
+      await removeSavedSound(soundEffect.id);
+    } else {
+      await saveSoundEffect(soundEffect);
+    }
+  },
+
+  clearSavedSounds: async () => {
+    try {
+      await storageService.clearSavedSounds();
+      set({
+        savedSounds: [],
+        savedSoundsError: null,
+      });
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Failed to clear saved sounds";
+      set({ savedSoundsError: errorMessage });
+      toast.error("Failed to clear saved sounds");
+      console.error("Failed to clear saved sounds:", error);
+    }
+  },
+
+  addSoundToTimeline: async (sound) => {
+    const activeProject = useProjectStore.getState().activeProject;
+    if (!activeProject) {
+      toast.error("No active project");
+      return false;
+    }
+
+    const audioUrl = sound.previewUrl;
+    if (!audioUrl) {
+      toast.error("Sound file not available");
+      return false;
+    }
+
+    try {
+      const response = await fetch(audioUrl);
+      if (!response.ok)
+        throw new Error(`Failed to download audio: ${response.statusText}`);
+
+      const blob = await response.blob();
+      const file = new File([blob], `${sound.name}.mp3`, {
+        type: "audio/mpeg",
+      });
+
+      await useMediaStore.getState().addMediaItem(activeProject.id, {
+        name: sound.name,
+        type: "audio",
+        file,
+        duration: sound.duration,
+        url: URL.createObjectURL(file),
+      });
+
+      const mediaItem = useMediaStore
+        .getState()
+        .mediaItems.find((item) => item.file === file);
+      if (!mediaItem) throw new Error("Failed to create media item");
+
+      const success = useTimelineStore
+        .getState()
+        .addMediaAtTime(mediaItem, usePlaybackStore.getState().currentTime);
+
+      if (success) {
+        return true;
+      }
+      throw new Error("Failed to add to timeline - check for overlaps");
+    } catch (error) {
+      console.error("Failed to add sound to timeline:", error);
+      toast.error(
+        error instanceof Error
+          ? error.message
+          : "Failed to add sound to timeline",
+        { id: `sound-${sound.id}` }
+      );
+      return false;
+    }
+  },
+}));
diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index 0f441176..71ddedca 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -1445,16 +1445,24 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
 
     addMediaAtTime: (item, currentTime = 0) => {
       const trackType = item.type === "audio" ? "audio" : "media";
-      const targetTrackId = get().findOrCreateTrack(trackType);
-
       const duration =
         item.duration || TIMELINE_CONSTANTS.DEFAULT_IMAGE_DURATION;
 
-      if (get().checkElementOverlap(targetTrackId, currentTime, duration)) {
-        toast.error(
-          "Cannot place element here - it would overlap with existing elements"
-        );
-        return false;
+      // Get all tracks of the right type
+      const tracks = get()._tracks.filter((t) => t.type === trackType);
+
+      // Try to find a track with no overlap
+      let targetTrackId = null;
+      for (const track of tracks) {
+        if (!get().checkElementOverlap(track.id, currentTime, duration)) {
+          targetTrackId = track.id;
+          break;
+        }
+      }
+
+      // If no free track found, create a new one
+      if (!targetTrackId) {
+        targetTrackId = get().addTrack(trackType);
       }
 
       get().addElementToTrack(targetTrackId, {
diff --git a/apps/web/src/types/sounds.ts b/apps/web/src/types/sounds.ts
new file mode 100644
index 00000000..faa485eb
--- /dev/null
+++ b/apps/web/src/types/sounds.ts
@@ -0,0 +1,39 @@
+export interface SoundEffect {
+  id: number;
+  name: string;
+  description: string;
+  url: string;
+  previewUrl?: string;
+  downloadUrl?: string;
+  duration: number;
+  filesize: number;
+  type: string;
+  channels: number;
+  bitrate: number;
+  bitdepth: number;
+  samplerate: number;
+  username: string;
+  tags: string[];
+  license: string;
+  created: string;
+  downloads: number;
+  rating: number;
+  ratingCount: number;
+}
+
+export interface SavedSound {
+  id: number; // freesound id
+  name: string;
+  username: string;
+  previewUrl?: string;
+  downloadUrl?: string;
+  duration: number;
+  tags: string[];
+  license: string;
+  savedAt: string; // iso date string
+}
+
+export interface SavedSoundsData {
+  sounds: SavedSound[];
+  lastModified: string;
+}
-- 
cgit v1.3.1


From 35ade4b25f417e0d7c4d155b8afc51fb94ebcdd7 Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 4 Aug 2025 01:40:24 +0200
Subject: refactor: remove unused import

---
 apps/web/src/components/editor/media-panel/views/sounds.tsx | 5 -----
 1 file changed, 5 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/components/editor/media-panel/views/sounds.tsx b/apps/web/src/components/editor/media-panel/views/sounds.tsx
index 306b81d3..5ffa51a9 100644
--- a/apps/web/src/components/editor/media-panel/views/sounds.tsx
+++ b/apps/web/src/components/editor/media-panel/views/sounds.tsx
@@ -19,11 +19,6 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
-import {
-  PropertyGroup,
-  PropertyItem,
-  PropertyItemValue,
-} from "@/components/editor/properties-panel/property-item";
 
 export function SoundsView() {
   return (
-- 
cgit v1.3.1


From acc2089d0d6975d9cede833b083f9d1d2f78504d Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Mon, 4 Aug 2025 02:59:07 +0200
Subject: feat: add license filtering for sound effects

---
 apps/web/src/app/api/sounds/search/route.ts        | 11 ++++
 .../components/editor/media-panel/views/sounds.tsx | 62 ++++++++++++++++++----
 apps/web/src/components/ui/dropdown-menu.tsx       | 10 ++--
 apps/web/src/components/ui/input.tsx               |  4 +-
 apps/web/src/hooks/use-sound-search.ts             |  3 +-
 apps/web/src/stores/sounds-store.ts                |  9 ++++
 6 files changed, 84 insertions(+), 15 deletions(-)

(limited to 'apps/web/src/components')

diff --git a/apps/web/src/app/api/sounds/search/route.ts b/apps/web/src/app/api/sounds/search/route.ts
index 15954140..c89bc76c 100644
--- a/apps/web/src/app/api/sounds/search/route.ts
+++ b/apps/web/src/app/api/sounds/search/route.ts
@@ -12,6 +12,7 @@ const searchParamsSchema = z.object({
     .enum(["downloads", "rating", "created", "score"])
     .default("downloads"),
   min_rating: z.coerce.number().min(0).max(5).default(3),
+  commercial_only: z.coerce.boolean().default(true),
 });
 
 const freesoundResultSchema = z.object({
@@ -124,6 +125,7 @@ export async function GET(request: NextRequest) {
       page_size: pageSize,
       sort,
       min_rating,
+      commercial_only,
     } = validationResult.data;
 
     if (type === "songs") {
@@ -160,6 +162,15 @@ export async function GET(request: NextRequest) {
     if (type === "effects" || !type) {
       params.append("filter", "duration:[* TO 30.0]");
       params.append("filter", `avg_rating:[${min_rating} TO *]`);
+
+      // Filter by license if commercial_only is true
+      if (commercial_only) {
+        params.append(
+          "filter",
+          'license:("Attribution" OR "Creative Commons 0" OR "Attribution Noncommercial" OR "Attribution Commercial")'
+        );
+      }
+
       params.append(
         "filter",
         "tag:sound-effect OR tag:sfx OR tag:foley OR tag:ambient OR tag:nature OR tag:mechanical OR tag:electronic OR tag:impact OR tag:whoosh OR tag:explosion"
diff --git a/apps/web/src/components/editor/media-panel/views/sounds.tsx b/apps/web/src/components/editor/media-panel/views/sounds.tsx
index 5ffa51a9..ed0db8ab 100644
--- a/apps/web/src/components/editor/media-panel/views/sounds.tsx
+++ b/apps/web/src/components/editor/media-panel/views/sounds.tsx
@@ -5,11 +5,23 @@ 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 } from "lucide-react";
+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,
@@ -19,6 +31,7 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
 
 export function SoundsView() {
   return (
@@ -66,6 +79,8 @@ function SoundEffectsView() {
     loadSavedSounds,
     isSoundSaved,
     toggleSavedSound,
+    showCommercialOnly,
+    toggleCommercialFilter,
   } = useSoundsStore();
   const {
     results: searchResults,
@@ -73,7 +88,7 @@ function SoundEffectsView() {
     loadMore,
     hasNextPage,
     isLoadingMore,
-  } = useSoundSearch(searchQuery);
+  } = useSoundSearch(searchQuery, showCommercialOnly);
 
   // Audio playback state
   const [playingId, setPlayingId] = useState<number | null>(null);
@@ -144,14 +159,41 @@ function SoundEffectsView() {
 
   return (
     <div className="flex flex-col gap-5 mt-1 h-full">
-      <Input
-        placeholder="Search sound effects"
-        className="bg-panel-accent"
-        value={searchQuery}
-        onChange={(e) => setSearchQuery(e.target.value)}
-        showClearIcon
-        onClear={() => setSearchQuery("")}
-      />
+      <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
diff --git a/apps/web/src/components/ui/dropdown-menu.tsx b/apps/web/src/components/ui/dropdown-menu.tsx
index bdd86d58..823d48a3 100644
--- a/apps/web/src/components/ui/dropdown-menu.tsx
+++ b/apps/web/src/components/ui/dropdown-menu.tsx
@@ -126,20 +126,24 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       dropdownMenuItemVariants({ variant }),
-      "pl-8 pr-2",
+      "pl-2 pr-8",
       className
     )}
     checked={checked}
+    onSelect={(e) => {
+      e.preventDefault();
+    }}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    {children}
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
         <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
-    {children}
   </DropdownMenuPrimitive.CheckboxItem>
 ));
+
 DropdownMenuCheckboxItem.displayName =
   DropdownMenuPrimitive.CheckboxItem.displayName;
 
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
index 4fb0f5b4..440191f2 100644
--- a/apps/web/src/components/ui/input.tsx
+++ b/apps/web/src/components/ui/input.tsx
@@ -9,6 +9,7 @@ interface InputProps extends React.ComponentProps<"input"> {
   onShowPasswordChange?: (show: boolean) => void;
   showClearIcon?: boolean;
   onClear?: () => void;
+  containerClassName?: string;
 }
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
@@ -16,6 +17,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     {
       className,
       type,
+      containerClassName,
       showPassword,
       onShowPasswordChange,
       showClearIcon,
@@ -45,7 +47,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       iconCount === 2 ? "pr-20" : iconCount === 1 ? "pr-10" : "";
 
     return (
-      <div className={hasIcons ? "relative w-full" : ""}>
+      <div className={cn(hasIcons ? "relative w-full" : "", containerClassName)}>
         <input
           type={inputType}
           className={cn(
diff --git a/apps/web/src/hooks/use-sound-search.ts b/apps/web/src/hooks/use-sound-search.ts
index e815a668..db9a7e8e 100644
--- a/apps/web/src/hooks/use-sound-search.ts
+++ b/apps/web/src/hooks/use-sound-search.ts
@@ -9,7 +9,7 @@ import { useSoundsStore } from "@/stores/sounds-store";
  * - Proper error handling
  */
 
-export function useSoundSearch(query: string) {
+export function useSoundSearch(query: string, commercialOnly: boolean) {
   const {
     searchResults,
     isSearching,
@@ -49,6 +49,7 @@ export function useSoundSearch(query: string) {
         searchParams.set("q", query);
       }
 
+      searchParams.set("commercial_only", commercialOnly.toString());
       const response = await fetch(
         `/api/sounds/search?${searchParams.toString()}`
       );
diff --git a/apps/web/src/stores/sounds-store.ts b/apps/web/src/stores/sounds-store.ts
index 3771c07e..215253fb 100644
--- a/apps/web/src/stores/sounds-store.ts
+++ b/apps/web/src/stores/sounds-store.ts
@@ -13,6 +13,10 @@ interface SoundsStore {
   error: string | null;
   hasLoaded: boolean;
 
+  // Filter state
+  showCommercialOnly: boolean;
+  toggleCommercialFilter: () => void;
+
   // Search state
   searchQuery: string;
   searchResults: SoundEffect[];
@@ -72,6 +76,11 @@ export const useSoundsStore = create<SoundsStore>((set, get) => ({
   isLoading: false,
   error: null,
   hasLoaded: false,
+  showCommercialOnly: true,
+
+  toggleCommercialFilter: () => {
+    set((state) => ({ showCommercialOnly: !state.showCommercialOnly }));
+  },
 
   // Search state
   searchQuery: "",
-- 
cgit v1.3.1