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/app/blog/[slug]/page.tsx    |  4 ++--
 apps/web/src/app/blog/page.tsx           |  4 ++--
 apps/web/src/app/contributors/page.tsx   | 10 +++++-----
 apps/web/src/app/globals.css             | 24 +++++++++++++++++++++---
 apps/web/src/app/privacy/page.tsx        |  6 +++---
 apps/web/src/app/projects/page.tsx       | 18 +++++++++---------
 apps/web/src/app/roadmap/page.tsx        | 14 +++++++-------
 apps/web/src/app/terms/page.tsx          |  6 +++---
 apps/web/src/app/why-not-capcut/page.tsx |  4 ++--
 9 files changed, 54 insertions(+), 36 deletions(-)

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

diff --git a/apps/web/src/app/blog/[slug]/page.tsx b/apps/web/src/app/blog/[slug]/page.tsx
index 0de1e0a8..d759050b 100644
--- a/apps/web/src/app/blog/[slug]/page.tsx
+++ b/apps/web/src/app/blog/[slug]/page.tsx
@@ -87,8 +87,8 @@ async function Page({ params }: PageProps) {
 
       <main className="relative">
         <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
-          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
+          <div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
+          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
         </div>
 
         <div className="relative container max-w-3xl mx-auto px-4 py-16">
diff --git a/apps/web/src/app/blog/page.tsx b/apps/web/src/app/blog/page.tsx
index ca553a67..08da9fd7 100644
--- a/apps/web/src/app/blog/page.tsx
+++ b/apps/web/src/app/blog/page.tsx
@@ -28,8 +28,8 @@ export default async function BlogPage() {
 
       <main className="relative">
         <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
-          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
+          <div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
+          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
         </div>
 
         <div className="relative container max-w-3xl mx-auto px-4 py-16">
diff --git a/apps/web/src/app/contributors/page.tsx b/apps/web/src/app/contributors/page.tsx
index 29151bd8..3ad99023 100644
--- a/apps/web/src/app/contributors/page.tsx
+++ b/apps/web/src/app/contributors/page.tsx
@@ -77,8 +77,8 @@ export default async function ContributorsPage() {
 
       <main className="relative">
         <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
-          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
+          <div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
+          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
         </div>
 
         <div className="relative container mx-auto px-4 py-16">
@@ -138,8 +138,8 @@ export default async function ContributorsPage() {
                       className="group block flex-1"
                     >
                       <div className="relative mx-auto max-w-md">
-                        <div className="absolute inset-0 bg-gradient-to-r from-muted/50 to-muted/30 rounded-2xl blur group-hover:blur-md transition-all duration-300" />
-                        <Card className="relative bg-background/80 backdrop-blur-sm border-2 group-hover:border-muted-foreground/20 transition-all duration-300 group-hover:shadow-xl">
+                        <div className="absolute inset-0 bg-linear-to-r from-muted/50 to-muted/30 rounded-2xl blur-sm group-hover:blur-md transition-all duration-300" />
+                        <Card className="relative bg-background/80 backdrop-blur-xs border-2 group-hover:border-muted-foreground/20 transition-all duration-300 group-hover:shadow-xl">
                           <CardContent className="p-8 text-center">
                             <div className="relative mb-6">
                               <Avatar className="h-24 w-24 mx-auto ring-4 ring-background shadow-2xl">
@@ -268,7 +268,7 @@ export default async function ContributorsPage() {
                         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">
+                      <Card className="h-full bg-background/80 backdrop-blur-xs 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">
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 2f7158cc..9cc7ed6b 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -1,6 +1,24 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import 'tailwindcss';
+
+@config '../../tailwind.config.ts';
+
+/*
+  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.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
 
 @layer base {
   :root {
diff --git a/apps/web/src/app/privacy/page.tsx b/apps/web/src/app/privacy/page.tsx
index b7d700b5..4bb1e023 100644
--- a/apps/web/src/app/privacy/page.tsx
+++ b/apps/web/src/app/privacy/page.tsx
@@ -24,8 +24,8 @@ export default function PrivacyPage() {
       <Header />
       <main className="relative">
         <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
-          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
+          <div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
+          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
         </div>
         <div className="relative container mx-auto px-4 py-16">
           <div className="max-w-4xl mx-auto">
@@ -47,7 +47,7 @@ export default function PrivacyPage() {
                 have any questions.
               </p>
             </div>
-            <Card className="bg-background/80 backdrop-blur-sm border-2 border-muted/30">
+            <Card className="bg-background/80 backdrop-blur-xs border-2 border-muted/30">
               <CardContent className="p-8 text-base leading-relaxed space-y-8">
                 <section>
                   <h2 className="text-2xl font-semibold mb-4">
diff --git a/apps/web/src/app/projects/page.tsx b/apps/web/src/app/projects/page.tsx
index 4b68791b..37c1ced2 100644
--- a/apps/web/src/app/projects/page.tsx
+++ b/apps/web/src/app/projects/page.tsx
@@ -142,7 +142,7 @@ export default function ProjectsPage() {
           href="/"
           className="flex items-center gap-1 hover:text-muted-foreground transition-colors"
         >
-          <ChevronLeft className="!size-5 shrink-0" />
+          <ChevronLeft className="size-5! shrink-0" />
           <span className="text-sm font-medium">Back</span>
         </Link>
         <div className="block md:hidden">
@@ -153,7 +153,7 @@ export default function ProjectsPage() {
                 size="sm"
                 onClick={handleCancelSelection}
               >
-                <X className="!size-4" />
+                <X className="size-4!" />
                 Cancel
               </Button>
               {selectedProjects.size > 0 && (
@@ -162,7 +162,7 @@ export default function ProjectsPage() {
                   size="sm"
                   onClick={() => setIsBulkDeleteDialogOpen(true)}
                 >
-                  <Trash2 className="!size-4" />
+                  <Trash2 className="size-4!" />
                   Delete ({selectedProjects.size})
                 </Button>
               )}
@@ -192,7 +192,7 @@ export default function ProjectsPage() {
             {isSelectionMode ? (
               <div className="flex items-center gap-2">
                 <Button variant="outline" onClick={handleCancelSelection}>
-                  <X className="!size-4" />
+                  <X className="size-4!" />
                   Cancel
                 </Button>
                 {selectedProjects.size > 0 && (
@@ -200,7 +200,7 @@ export default function ProjectsPage() {
                     variant="destructive"
                     onClick={() => setIsBulkDeleteDialogOpen(true)}
                   >
-                    <Trash2 className="!size-4" />
+                    <Trash2 className="size-4!" />
                     Delete Selected ({selectedProjects.size})
                   </Button>
                 )}
@@ -399,7 +399,7 @@ function ProjectCard({
       >
         {isSelectionMode && (
           <div className="absolute top-3 left-3 z-10">
-            <div className="w-5 h-5 rounded bg-background/80 backdrop-blur-sm border flex items-center justify-center">
+            <div className="w-5 h-5 rounded bg-background/80 backdrop-blur-xs border flex items-center justify-center">
               <Checkbox
                 checked={isSelected}
                 onCheckedChange={(checked) =>
@@ -426,7 +426,7 @@ function ProjectCard({
             />
           ) : (
             <div className="w-full h-full bg-muted/50 flex items-center justify-center">
-              <Video className="h-12 w-12 flex-shrink-0 text-muted-foreground" />
+              <Video className="h-12 w-12 shrink-0 text-muted-foreground" />
             </div>
           )}
         </div>
@@ -501,7 +501,7 @@ function ProjectCard({
 
         <div className="space-y-1">
           <div className="flex items-center gap-1.5 text-sm text-muted-foreground">
-            <Calendar className="!size-4" />
+            <Calendar className="size-4!" />
             <span>Created {formatDate(project.createdAt)}</span>
           </div>
         </div>
@@ -543,7 +543,7 @@ function ProjectCard({
 function CreateButton({ onClick }: { onClick?: () => void }) {
   return (
     <Button className="flex" onClick={onClick}>
-      <Plus className="!size-4" />
+      <Plus className="size-4!" />
       <span className="text-sm font-medium">New project</span>
     </Button>
   );
diff --git a/apps/web/src/app/roadmap/page.tsx b/apps/web/src/app/roadmap/page.tsx
index 5c003cf0..b26da5aa 100644
--- a/apps/web/src/app/roadmap/page.tsx
+++ b/apps/web/src/app/roadmap/page.tsx
@@ -122,8 +122,8 @@ export default function RoadmapPage() {
       <Header />
       <main className="relative">
         <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
-          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
+          <div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
+          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
         </div>
         <div className="relative container mx-auto px-4 py-16">
           <div className="max-w-4xl mx-auto">
@@ -148,7 +148,7 @@ export default function RoadmapPage() {
               {roadmapItems.map((item, index) => (
                 <div key={index} className="relative">
                   <div className="flex items-start gap-2">
-                    <span className="text-lg font-medium text-muted-foreground select-none leading-[1.5]">
+                    <span className="text-lg font-medium text-muted-foreground select-none leading-normal">
                       {index + 1}.
                     </span>
                     <div className="flex-1 pt-[2px]">
@@ -156,13 +156,13 @@ export default function RoadmapPage() {
                         <h3 className="font-medium text-lg">{item.title}</h3>
                         <Badge
                           className={cn("shadow-none", {
-                            "!bg-green-500 text-white":
+                            "bg-green-500! text-white":
                               item.status.type === "complete",
-                            "!bg-yellow-500 text-white":
+                            "bg-yellow-500! text-white":
                               item.status.type === "pending",
-                            "!bg-blue-500 text-white":
+                            "bg-blue-500! text-white":
                               item.status.type === "info",
-                            "!bg-foreground/10 text-accent-foreground":
+                            "bg-foreground/10! text-accent-foreground":
                               item.status.type === "default",
                           })}
                         >
diff --git a/apps/web/src/app/terms/page.tsx b/apps/web/src/app/terms/page.tsx
index 7d1fda7f..ee202d8b 100644
--- a/apps/web/src/app/terms/page.tsx
+++ b/apps/web/src/app/terms/page.tsx
@@ -24,8 +24,8 @@ export default function TermsPage() {
       <Header />
       <main className="relative">
         <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
-          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
+          <div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
+          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
         </div>
         <div className="relative container mx-auto px-4 py-16">
           <div className="max-w-4xl mx-auto">
@@ -47,7 +47,7 @@ export default function TermsPage() {
                 editor.
               </p>
             </div>
-            <Card className="bg-background/80 backdrop-blur-sm border-2 border-muted/30">
+            <Card className="bg-background/80 backdrop-blur-xs border-2 border-muted/30">
               <CardContent className="p-8 text-base leading-relaxed space-y-8">
                 <section>
                   <h2 className="text-2xl font-semibold mb-4">
diff --git a/apps/web/src/app/why-not-capcut/page.tsx b/apps/web/src/app/why-not-capcut/page.tsx
index 7fe6df66..b05860a6 100644
--- a/apps/web/src/app/why-not-capcut/page.tsx
+++ b/apps/web/src/app/why-not-capcut/page.tsx
@@ -7,8 +7,8 @@ export default function WhyNotCapcut() {
 
       <main className="relative mt-12">
         <div className="absolute inset-0 overflow-hidden pointer-events-none">
-          <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
-          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
+          <div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
+          <div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
         </div>
 
         <div className="relative container mx-auto px-4 py-16">
-- 
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/app')

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 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/app')

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 5f4f3cc6c420d5fe37bf8f8dffa9368e75b9b60e Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Thu, 31 Jul 2025 13:10:37 +0200
Subject: Merge pull request
 [#499](https://github.com/mazeincoding/AppCut/issues/499)

---
 apps/web/src/app/editor/[project_id]/page.tsx | 98 ++++++++++++++++++++++++---
 apps/web/src/stores/project-store.ts          | 26 +++++++
 2 files changed, 116 insertions(+), 8 deletions(-)

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

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 26fdcf8a..5e294fe7 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -32,39 +32,121 @@ export default function Editor() {
     setPropertiesPanel,
   } = usePanelStore();
 
-  const { activeProject, loadProject, createNewProject } = useProjectStore();
+  const {
+    activeProject,
+    loadProject,
+    createNewProject,
+    isInvalidProjectId,
+    markProjectIdAsInvalid,
+  } = useProjectStore();
   const params = useParams();
   const router = useRouter();
   const projectId = params.project_id as string;
   const handledProjectIds = useRef<Set<string>>(new Set());
+  const isInitializingRef = useRef<boolean>(false);
 
   usePlaybackControls();
 
   useEffect(() => {
+    let isCancelled = false;
+
     const initProject = async () => {
-      if (!projectId) return;
+      if (!projectId) {
+        return;
+      }
 
+      // Prevent duplicate initialization
+      if (isInitializingRef.current) {
+        return;
+      }
+
+      // Check if project is already loaded
       if (activeProject?.id === projectId) {
         return;
       }
 
+      // Check global invalid tracking first (most important for preventing duplicates)
+      if (isInvalidProjectId(projectId)) {
+        return;
+      }
+
+      // Check if we've already handled this project ID locally
       if (handledProjectIds.current.has(projectId)) {
         return;
       }
 
+      // Mark as initializing to prevent race conditions
+      isInitializingRef.current = true;
+      handledProjectIds.current.add(projectId);
+
       try {
         await loadProject(projectId);
-      } catch (error) {
-        handledProjectIds.current.add(projectId);
 
-        const newProjectId = await createNewProject("Untitled Project");
-        router.replace(`/editor/${newProjectId}`);
-        return;
+        // Check if component was unmounted during async operation
+        if (isCancelled) {
+          return;
+        }
+
+        // Project loaded successfully
+        isInitializingRef.current = false;
+      } catch (error) {
+        // Check if component was unmounted during async operation
+        if (isCancelled) {
+          return;
+        }
+
+        // More specific error handling - only create new project for actual "not found" errors
+        const isProjectNotFound =
+          error instanceof Error &&
+          (error.message.includes("not found") ||
+            error.message.includes("does not exist") ||
+            error.message.includes("Project not found"));
+
+        if (isProjectNotFound) {
+          // Mark this project ID as invalid globally BEFORE creating project
+          markProjectIdAsInvalid(projectId);
+
+          try {
+            const newProjectId = await createNewProject("Untitled Project");
+
+            // Check again if component was unmounted
+            if (isCancelled) {
+              return;
+            }
+
+            router.replace(`/editor/${newProjectId}`);
+          } catch (createError) {
+            console.error("Failed to create new project:", createError);
+          }
+        } else {
+          // For other errors (storage issues, corruption, etc.), don't create new project
+          console.error(
+            "Project loading failed with recoverable error:",
+            error
+          );
+          // Remove from handled set so user can retry
+          handledProjectIds.current.delete(projectId);
+        }
+
+        isInitializingRef.current = false;
       }
     };
 
     initProject();
-  }, [projectId, activeProject?.id, loadProject, createNewProject, router]);
+
+    // Cleanup function to cancel async operations
+    return () => {
+      isCancelled = true;
+      isInitializingRef.current = false;
+    };
+  }, [
+    projectId,
+    loadProject,
+    createNewProject,
+    router,
+    isInvalidProjectId,
+    markProjectIdAsInvalid,
+  ]);
 
   return (
     <EditorProvider>
diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index 7bb38039..6744bdec 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -11,6 +11,7 @@ interface ProjectStore {
   savedProjects: TProject[];
   isLoading: boolean;
   isInitialized: boolean;
+  invalidProjectIds?: Set<string>;
 
   // Actions
   createNewProject: (name: string) => Promise<string>;
@@ -32,6 +33,11 @@ interface ProjectStore {
     searchQuery: string,
     sortOption: string
   ) => TProject[];
+
+  // Global invalid project ID tracking
+  isInvalidProjectId: (id: string) => boolean;
+  markProjectIdAsInvalid: (id: string) => void;
+  clearInvalidProjectIds: () => void;
 }
 
 export const useProjectStore = create<ProjectStore>((set, get) => ({
@@ -39,6 +45,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
   savedProjects: [],
   isLoading: true,
   isInitialized: false,
+  invalidProjectIds: new Set<string>(),
 
   createNewProject: async (name: string) => {
     const newProject: TProject = {
@@ -357,4 +364,23 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
 
     return sortedProjects;
   },
+
+  // Global invalid project ID tracking implementation
+  isInvalidProjectId: (id: string) => {
+    const invalidIds = get().invalidProjectIds || new Set();
+    return invalidIds.has(id);
+  },
+
+  markProjectIdAsInvalid: (id: string) => {
+    set((state) => ({
+      invalidProjectIds: new Set([
+        ...(state.invalidProjectIds || new Set()),
+        id,
+      ]),
+    }));
+  },
+
+  clearInvalidProjectIds: () => {
+    set({ invalidProjectIds: new Set() });
+  },
 }));
-- 
cgit v1.3.1


From c5baa3fed16a296b5722c0cd0f25a38fdc4c31bf Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Thu, 31 Jul 2025 23:04:17 +0200
Subject: style: new primary color

---
 apps/web/src/app/globals.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index ac14f007..96fef9b0 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -53,7 +53,7 @@
   --card-foreground: hsl(0 0% 98%);
   --popover: hsl(0 0% 14.9%);
   --popover-foreground: hsl(0 0% 98%);
-  --primary: hsl(180 95% 40%);
+  --primary: hsl(205, 84%, 53%);
   --primary-foreground: hsl(0 0% 9%);
   --secondary: hsl(0 0% 14.9%);
   --secondary-foreground: hsl(0 0% 98%);
-- 
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/app')

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 cd593d1b982eec3e575a921dc6d921bfdea07bfe Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 2 Aug 2025 00:52:31 +0200
Subject: style: global colors

---
 apps/web/src/app/globals.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index d612e27e..b25f2c1e 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -11,7 +11,7 @@
   /* Custom colors - light mode (default) */
   --background: hsl(0, 0%, 100%);
   --foreground: hsl(0 0% 11%);
-  --card: hsl(0 0% 85.1%);
+  --card: hsl(216, 8%, 86%);
   --card-foreground: hsl(0 0% 2%);
   --popover: hsl(0, 0%, 100%);
   --popover-foreground: hsl(0 0% 2%);
@@ -20,7 +20,7 @@
   --secondary: hsl(216, 13%, 92%);
   --secondary-foreground: hsl(0 0% 2%);
   --muted: hsl(0 0% 85.1%);
-  --muted-foreground: hsl(0 0% 36.1%);
+  --muted-foreground: hsl(0 0% 50%);
   --accent: hsl(216, 13%, 92%);
   --accent-foreground: hsl(0 0% 2%);
   --destructive: hsl(0 100% 40%);
-- 
cgit v1.3.1


From c8980de41a64922eb27e3b43be1ba1dcfe5a274c Mon Sep 17 00:00:00 2001
From: Maze Winther <mazewinther@gmail.com>
Date: Sat, 2 Aug 2025 17:28:01 +0200
Subject: refactor: remove all waitlist-related code

---
 apps/web/src/app/api/waitlist/route.ts       | 105 ---------------------------
 apps/web/src/app/api/waitlist/token/route.ts |  61 ----------------
 apps/web/src/app/layout.tsx                  |   4 +-
 apps/web/src/lib/rate-limit.ts               |   6 +-
 apps/web/src/lib/waitlist.ts                 |  13 ----
 packages/db/src/schema.ts                    |   8 --
 6 files changed, 5 insertions(+), 192 deletions(-)
 delete mode 100644 apps/web/src/app/api/waitlist/route.ts
 delete mode 100644 apps/web/src/app/api/waitlist/token/route.ts
 delete mode 100644 apps/web/src/lib/waitlist.ts

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

diff --git a/apps/web/src/app/api/waitlist/route.ts b/apps/web/src/app/api/waitlist/route.ts
deleted file mode 100644
index 9f00f221..00000000
--- a/apps/web/src/app/api/waitlist/route.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { db, eq, waitlist } from "@opencut/db";
-import { checkBotId } from "botid/server";
-import { nanoid } from "nanoid";
-import { waitlistRateLimit } from "@/lib/rate-limit";
-import { z } from "zod";
-import { env } from "@/env";
-import { cookies } from "next/headers";
-import crypto from "crypto";
-
-const waitlistSchema = z.object({
-  email: z.string().email("Invalid email format").min(1, "Email is required"),
-});
-
-const CSRF_TOKEN_NAME = "waitlist-csrf";
-const TOKEN_EXPIRY = 60 * 60 * 1000;
-
-async function validateCSRFToken(request: NextRequest): Promise<boolean> {
-  const clientToken = request.headers.get("x-csrf-token");
-  if (!clientToken) return false;
-
-  const cookieStore = await cookies();
-  const cookieValue = cookieStore.get(CSRF_TOKEN_NAME)?.value;
-  if (!cookieValue) return false;
-
-  const [token, timestamp, signature] = cookieValue.split(":");
-  if (!token || !timestamp || !signature) return false;
-
-  if (clientToken !== token) return false;
-
-  const now = Date.now();
-  const tokenTime = parseInt(timestamp);
-  if (now - tokenTime > TOKEN_EXPIRY) return false;
-
-  const expectedSignature = crypto
-    .createHmac("sha256", env.BETTER_AUTH_SECRET)
-    .update(`${token}:${timestamp}`)
-    .digest("hex");
-
-  return signature === expectedSignature;
-}
-
-export async function POST(request: NextRequest) {
-  const verification = await checkBotId();
-
-  if (verification.isBot) {
-    return NextResponse.json({ error: "Access denied" }, { status: 403 });
-  }
-
-  const identifier = request.headers.get("x-forwarded-for") ?? "127.0.0.1";
-  const { success } = await waitlistRateLimit.limit(identifier);
-
-  if (!success) {
-    return NextResponse.json(
-      { error: "Too many requests. Please try again later." },
-      { status: 429 }
-    );
-  }
-  const isValidToken = await validateCSRFToken(request);
-  if (!isValidToken) {
-    return NextResponse.json(
-      { error: "Invalid security token" },
-      { status: 403 }
-    );
-  }
-
-  try {
-    const body = await request.json();
-    const { email } = waitlistSchema.parse(body);
-
-    const existingEmail = await db
-      .select()
-      .from(waitlist)
-      .where(eq(waitlist.email, email.toLowerCase()))
-      .limit(1);
-
-    if (existingEmail.length > 0) {
-      return NextResponse.json(
-        { error: "Email already registered" },
-        { status: 409 }
-      );
-    }
-
-    await db.insert(waitlist).values({
-      id: nanoid(),
-      email: email.toLowerCase(),
-    });
-
-    return NextResponse.json(
-      { message: "Successfully joined waitlist!" },
-      { status: 201 }
-    );
-  } catch (error) {
-    if (error instanceof z.ZodError) {
-      const firstError = error.errors[0];
-      return NextResponse.json({ error: firstError.message }, { status: 400 });
-    }
-
-    console.error("Waitlist signup error:", error);
-    return NextResponse.json(
-      { error: "Internal server error" },
-      { status: 500 }
-    );
-  }
-}
diff --git a/apps/web/src/app/api/waitlist/token/route.ts b/apps/web/src/app/api/waitlist/token/route.ts
deleted file mode 100644
index fc2ff32c..00000000
--- a/apps/web/src/app/api/waitlist/token/route.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { NextRequest, NextResponse } from "next/server";
-import { cookies } from "next/headers";
-import crypto from "crypto";
-import { env } from "@/env";
-
-const CSRF_TOKEN_NAME = "waitlist-csrf";
-const TOKEN_EXPIRY = 60 * 60 * 1000;
-const allowedHosts =
-  env.NODE_ENV === "development"
-    ? ["localhost:3000", "127.0.0.1:3000"]
-    : ["opencut.app", "www.opencut.app"];
-
-export async function GET(request: NextRequest) {
-  const referer = request.headers.get("referer");
-  const host = request.headers.get("host");
-
-  if (referer) {
-    const refererUrl = new URL(referer);
-
-    if (
-      !allowedHosts.some(
-        (allowed) =>
-          refererUrl.host === allowed || refererUrl.host.endsWith(allowed)
-      )
-    ) {
-      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
-    }
-  } else if (host) {
-    if (
-      !allowedHosts.some(
-        (allowed) => host === allowed || host.endsWith(allowed)
-      )
-    ) {
-      return NextResponse.json({ error: "Forbidden" }, { status: 403 });
-    }
-  } else {
-    return NextResponse.json({ error: "Forbidden" }, { status: 403 });
-  }
-
-  if (!env.BETTER_AUTH_SECRET) {
-    throw new Error("BETTER_AUTH_SECRET must be configured");
-  }
-
-  const token = crypto.randomBytes(32).toString("hex");
-  const timestamp = Date.now();
-  const signature = crypto
-    .createHmac("sha256", env.BETTER_AUTH_SECRET)
-    .update(`${token}:${timestamp}`)
-    .digest("hex");
-
-  const cookieStore = await cookies();
-  cookieStore.set(CSRF_TOKEN_NAME, `${token}:${timestamp}:${signature}`, {
-    httpOnly: true,
-    secure: env.NODE_ENV === "production",
-    sameSite: "strict",
-    maxAge: TOKEN_EXPIRY / 1000,
-    path: "/",
-  });
-
-  return NextResponse.json({ token });
-}
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index a64c4440..c5a9bf45 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -14,8 +14,8 @@ export const metadata = baseMetaData;
 
 const protectedRoutes = [
   {
-    path: "/api/waitlist",
-    method: "POST",
+    path: "/none",
+    method: "GET",
   },
 ];
 
diff --git a/apps/web/src/lib/rate-limit.ts b/apps/web/src/lib/rate-limit.ts
index e1996cf5..92f70805 100644
--- a/apps/web/src/lib/rate-limit.ts
+++ b/apps/web/src/lib/rate-limit.ts
@@ -8,9 +8,9 @@ const redis = new Redis({
   token: env.UPSTASH_REDIS_REST_TOKEN,
 });
 
-export const waitlistRateLimit = new Ratelimit({
+export const baseRateLimit = new Ratelimit({
   redis,
-  limiter: Ratelimit.slidingWindow(5, "1 m"), // 5 requests per minute
+  limiter: Ratelimit.slidingWindow(100, "1 m"), // 100 requests per minute
   analytics: true,
-  prefix: "waitlist-rate-limit",
+  prefix: "rate-limit",
 });
diff --git a/apps/web/src/lib/waitlist.ts b/apps/web/src/lib/waitlist.ts
deleted file mode 100644
index 43a620b0..00000000
--- a/apps/web/src/lib/waitlist.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { db, sql, waitlist } from "@opencut/db";
-
-export async function getWaitlistCount() {
-  try {
-    const result = await db
-      .select({ count: sql<number>`count(*)` })
-      .from(waitlist);
-    return result[0]?.count || 0;
-  } catch (error) {
-    console.error("Failed to fetch waitlist count:", error);
-    return 0;
-  }
-}
diff --git a/packages/db/src/schema.ts b/packages/db/src/schema.ts
index bb92a14e..c32d6c2a 100644
--- a/packages/db/src/schema.ts
+++ b/packages/db/src/schema.ts
@@ -57,11 +57,3 @@ export const verifications = pgTable("verifications", {
     () => /* @__PURE__ */ new Date()
   ),
 }).enableRLS();
-
-export const waitlist = pgTable("waitlist", {
-  id: text("id").primaryKey(),
-  email: text("email").notNull().unique(),
-  createdAt: timestamp("created_at")
-    .$defaultFn(() => /* @__PURE__ */ new Date())
-    .notNull(),
-}).enableRLS();
-- 
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/app')

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/app')

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 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/app')

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 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/app')

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