[dyad] Applied Geist font globally - wrote 1 file(s)

next.config.mjs

@@ -1,6 +1,5 @@
-import type { NextConfig } from "next";
+/** @type {import('next').NextConfig} */
-
+const nextConfig = {
-const nextConfig: NextConfig = {
   webpack: (config) => {
     if (process.env.NODE_ENV === "development") {
       config.module.rules.push({

package.json

@@ -38,18 +38,22 @@
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
+    "@supabase/auth-ui-react": "^0.4.7",
+    "@supabase/auth-ui-shared": "^0.1.8",
+    "@supabase/supabase-js": "^2.93.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.6.0",
+    "geist": "^1.5.1",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.511.0",
-    "next": "15.3.8",
+    "next": "14.2.3",
     "next-themes": "^0.4.6",
-    "react": "^19.2.1",
+    "react": "^18.2.0",
     "react-day-picker": "^8.10.1",
-    "react-dom": "^19.2.1",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.56.4",
     "react-resizable-panels": "^3.0.2",
     "recharts": "^2.15.3",
@@ -62,8 +66,8 @@
   "devDependencies": {
     "@dyad-sh/nextjs-webpack-component-tagger": "^0.8.0",
     "@types/node": "^20",
-    "@types/react": "^19",
+    "@types/react": "^18.2.0",
-    "@types/react-dom": "^19",
+    "@types/react-dom": "^18.2.0",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"

src/app/account/page.tsx

@@ -0,0 +1,83 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { supabase } from '@/integrations/supabase/client';
+import { Loader2, Video } from 'lucide-react';
+import { UserClips } from '@/components/user-clips';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+
+export type Clip = {
+  id: string;
+  short_id: string;
+  title: string;
+  storage_path: string;
+  thumbnail_storage_path: string;
+  created_at: string;
+};
+
+export default function AccountPage() {
+  const router = useRouter();
+  const [isLoading, setIsLoading] = useState(true);
+  const [clips, setClips] = useState<Clip[]>([]);
+
+  useEffect(() => {
+    const fetchUserAndClips = async () => {
+      const { data: { user } } = await supabase.auth.getUser();
+      if (!user) {
+        router.push('/login');
+        return;
+      }
+
+      const { data, error } = await supabase
+        .from('clips')
+        .select('id, short_id, title, storage_path, thumbnail_storage_path, created_at')
+        .eq('user_id', user.id)
+        .order('created_at', { ascending: false });
+
+      if (error) {
+        console.error('Error fetching clips:', error);
+      } else {
+        setClips(data as Clip[]);
+      }
+      setIsLoading(false);
+    };
+
+    fetchUserAndClips();
+  }, [router]);
+
+  const onClipDeleted = (clipId: string) => {
+    setClips(prevClips => prevClips.filter(clip => clip.id !== clipId));
+  };
+
+  const onClipUpdated = (updatedClip: Clip) => {
+    setClips(prevClips => prevClips.map(clip => clip.id === updatedClip.id ? updatedClip : clip));
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <Loader2 className="w-12 h-12 animate-spin text-primary" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="container mx-auto max-w-5xl py-24 px-4">
+      <h1 className="text-4xl font-bold tracking-tight mb-8">My Clips</h1>
+      {clips.length > 0 ? (
+        <UserClips clips={clips} onClipDeleted={onClipDeleted} onClipUpdated={onClipUpdated} />
+      ) : (
+        <div className="flex flex-col items-center justify-center text-center py-16 px-6 border-2 border-dashed rounded-lg">
+          <Video className="w-16 h-16 mb-4 text-muted-foreground" />
+          <h2 className="text-2xl font-semibold mb-2">No clips yet</h2>
+          <p className="text-muted-foreground mb-6">You haven't created any clips. Go ahead and make your first one!</p>
+          <Button asChild>
+            <Link href="/">Create a Clip</Link>
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+}

src/app/clips/[id]/page.tsx

@@ -0,0 +1,61 @@
+import { supabase } from "@/integrations/supabase/client";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import { ArrowLeft } from "lucide-react";
+
+type ClipPageProps = {
+  params: { id: string };
+};
+
+export default async function ClipPage({ params }: ClipPageProps) {
+  const { data: clip, error } = await supabase
+    .from('clips')
+    .select('storage_path, original_file_name, title')
+    .eq('short_id', params.id)
+    .single();
+
+  if (error || !clip) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen text-center">
+        <h1 className="text-4xl font-bold mb-4">Clip Not Found</h1>
+        <p className="text-muted-foreground mb-8">The link may be broken or the clip may have been removed.</p>
+        <Button asChild>
+          <Link href="/">
+            <ArrowLeft className="mr-2 h-4 w-4" />
+            Back to Editor
+          </Link>
+        </Button>
+      </div>
+    );
+  }
+
+  const { data: video } = supabase.storage.from('clips').getPublicUrl(clip.storage_path);
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen bg-background p-4">
+      <Card className="w-full max-w-3xl">
+        <CardHeader>
+          <CardTitle className="truncate">
+            {clip.title || clip.original_file_name || "Shared Clip"}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="aspect-video w-full overflow-hidden rounded-lg border bg-black">
+            <video
+              src={video.publicUrl}
+              controls
+              autoPlay
+              className="w-full h-full object-contain"
+            />
+          </div>
+        </CardContent>
+      </Card>
+       <Button asChild variant="link" className="mt-8">
+          <Link href="/">
+            Create your own clip
+          </Link>
+        </Button>
+    </div>
+  );
+}

src/app/layout.tsx

@@ -1,20 +1,12 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { GeistSans } from "geist/font/sans";
 import "./globals.css";
-
+import { Header } from "@/components/header";
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
 
 export const metadata: Metadata = {
-  title: "Create Next App",
+  metadataBase: new URL("https://clips.linxweiler.xyz"),
-  description: "Generated by create next app",
+  title: "Video Clip Cutter",
+  description: "Trim and share video clips",
 };
 
 export default function RootLayout({
@@ -23,10 +15,11 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en" className={`${GeistSans.variable} dark`}>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className="antialiased"
       >
+        <Header />
         {children}
       </body>
     </html>

src/app/login/page.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { supabase } from "@/integrations/supabase/client";
+import { Auth } from "@supabase/auth-ui-react";
+import { ThemeSupa } from "@supabase/auth-ui-shared";
+import { useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { Button } from "@/components/ui/button";
+import { KeyRound } from "lucide-react";
+import type { AuthChangeEvent, Session, Provider } from "@supabase/supabase-js";
+
+export default function LoginPage() {
+  const router = useRouter();
+
+  useEffect(() => {
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event: AuthChangeEvent, session: Session | null) => {
+      if (session) {
+        router.push('/');
+      }
+    });
+
+    return () => subscription.unsubscribe();
+  }, [router]);
+
+  const handleOidcSignIn = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: 'pocket_id' as Provider,
+    });
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen bg-background">
+      <div className="w-full max-w-md p-8 space-y-8">
+        <div>
+          <h1 className="text-3xl font-bold text-center">Welcome Back</h1>
+          <p className="text-center text-muted-foreground">Sign in to continue to the Video Editor</p>
+        </div>
+        <Auth
+          supabaseClient={supabase}
+          appearance={{ theme: ThemeSupa }}
+          providers={[]}
+          theme="dark"
+          view="sign_in"
+          showLinks={true}
+        />
+        <div className="relative">
+          <div className="absolute inset-0 flex items-center">
+            <span className="w-full border-t" />
+          </div>
+          <div className="relative flex justify-center text-xs uppercase">
+            <span className="bg-background px-2 text-muted-foreground">
+              Or continue with
+            </span>
+          </div>
+        </div>
+        <Button variant="outline" className="w-full" onClick={handleOidcSignIn}>
+          <KeyRound className="mr-2 h-4 w-4" />
+          Sign in with Pocket ID
+        </Button>
+      </div>
+    </div>
+  );
+}

src/app/page.tsx

@@ -1,8 +1,47 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { supabase } from '@/integrations/supabase/client';
 import { VideoEditor } from "@/components/video-editor";
+import { Loader2 } from 'lucide-react';
+import type { AuthChangeEvent, Session } from '@supabase/supabase-js';
 
 export default function Home() {
+  const router = useRouter();
+  const [isAuthenticating, setIsAuthenticating] = useState(true);
+
+  useEffect(() => {
+    const checkSession = async () => {
+      const { data: { session } } = await supabase.auth.getSession();
+      if (!session) {
+        router.push('/login');
+      } else {
+        setIsAuthenticating(false);
+      }
+    };
+
+    checkSession();
+
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((event: AuthChangeEvent, _session: Session | null) => {
+      if (event === 'SIGNED_OUT') {
+        router.push('/login');
+      }
+    });
+
+    return () => subscription.unsubscribe();
+  }, [router]);
+
+  if (isAuthenticating) {
+    return (
+      <div className="flex flex-col items-center justify-center min-h-screen bg-background">
+        <Loader2 className="w-12 h-12 animate-spin text-primary" />
+      </div>
+    );
+  }
+
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-background p-4 sm:p-6 md:p-8 font-[family-name:var(--font-geist-sans)]">
+    <div className="flex flex-col items-center justify-center min-h-screen bg-background p-4 sm:p-6 md:p-8">
       <main className="w-full max-w-4xl">
         <VideoEditor />
       </main>

src/components/header.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { useEffect, useState } from 'react';
+import { supabase } from '@/integrations/supabase/client';
+import { User as SupabaseUser, AuthChangeEvent, Session } from '@supabase/supabase-js';
+import { Button } from './ui/button';
+import { LogOut, User } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+
+export function Header() {
+  const [user, setUser] = useState<SupabaseUser | null>(null);
+  const router = useRouter();
+
+  useEffect(() => {
+    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event: AuthChangeEvent, session: Session | null) => {
+      setUser(session?.user ?? null);
+    });
+
+    supabase.auth.getUser().then(({ data }) => {
+        setUser(data.user);
+    });
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  const handleSignOut = async () => {
+    await supabase.auth.signOut();
+    router.push('/login');
+  };
+
+  if (!user) {
+    return null;
+  }
+
+  return (
+    <header className="absolute top-0 right-0 p-4">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="relative h-8 w-8 rounded-full">
+            <User className="h-5 w-5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="w-56" align="end" forceMount>
+          <DropdownMenuLabel className="font-normal">
+            <div className="flex flex-col space-y-1">
+              <p className="text-sm font-medium leading-none">My Account</p>
+              <p className="text-xs leading-none text-muted-foreground truncate">
+                {user.email}
+              </p>
+            </div>
+          </DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem asChild>
+            <Link href="/account">
+              My Clips
+            </Link>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={handleSignOut}>
+            <LogOut className="mr-2 h-4 w-4" />
+            <span>Log out</span>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </header>
+  );
+}

src/components/user-clips.tsx

@@ -0,0 +1,215 @@
+"use client";
+
+import { useState } from 'react';
+import { Clip } from '@/app/account/page';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogClose } from '@/components/ui/dialog';
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';
+import { supabase } from '@/integrations/supabase/client';
+import { toast } from 'sonner';
+import { Toaster } from '@/components/ui/sonner';
+import { formatDistanceToNow } from 'date-fns';
+import { MoreVertical, Edit, Trash2, Loader2, Copy, Check } from 'lucide-react';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import Link from 'next/link';
+import Image from 'next/image';
+
+type UserClipsProps = {
+  clips: Clip[];
+  onClipDeleted: (clipId: string) => void;
+  onClipUpdated: (clip: Clip) => void;
+};
+
+export function UserClips({ clips, onClipDeleted, onClipUpdated }: UserClipsProps) {
+  const [clipToEdit, setClipToEdit] = useState<Clip | null>(null);
+  const [clipToDelete, setClipToDelete] = useState<Clip | null>(null);
+  const [newTitle, setNewTitle] = useState('');
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [hasCopied, setHasCopied] = useState<string | null>(null);
+
+  const handleEditClick = (clip: Clip) => {
+    setClipToEdit(clip);
+    setNewTitle(clip.title);
+  };
+
+  const handleSaveChanges = async () => {
+    if (!clipToEdit || !newTitle.trim()) return;
+    setIsSaving(true);
+    try {
+      const { data, error } = await supabase
+        .from('clips')
+        .update({ title: newTitle.trim() })
+        .eq('id', clipToEdit.id)
+        .select()
+        .single();
+
+      if (error) throw error;
+
+      onClipUpdated(data as Clip);
+      toast.success('Title updated successfully!');
+      setClipToEdit(null);
+    } catch (error) {
+      toast.error('Failed to update title.');
+      console.error(error);
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  const handleDeleteClip = async (clip: Clip) => {
+    setIsDeleting(true);
+    try {
+      const pathsToRemove = [clip.storage_path];
+      if (clip.thumbnail_storage_path) {
+        pathsToRemove.push(clip.thumbnail_storage_path);
+      }
+      const { error: storageError } = await supabase.storage.from('clips').remove(pathsToRemove);
+      if (storageError) throw storageError;
+
+      const { error: dbError } = await supabase.from('clips').delete().eq('id', clip.id);
+      if (dbError) throw dbError;
+
+      onClipDeleted(clip.id);
+      toast.success('Clip deleted successfully!');
+      setClipToDelete(null);
+    } catch (error) {
+      toast.error('Failed to delete clip.');
+      console.error(error);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const copyToClipboard = (shortId: string) => {
+    const link = `${window.location.origin}/clips/${shortId}`;
+    navigator.clipboard.writeText(link);
+    setHasCopied(shortId);
+    setTimeout(() => setHasCopied(null), 2000);
+  };
+
+  const getThumbnailUrl = (path: string) => {
+    const { data } = supabase.storage.from('clips').getPublicUrl(path);
+    return data.publicUrl;
+  }
+
+  return (
+    <>
+      <Toaster />
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        {clips.map((clip) => (
+          <Card key={clip.id} className="flex flex-col">
+            <CardHeader>
+              <CardTitle className="truncate flex justify-between items-start">
+                <Link href={`/clips/${clip.short_id}`} className="hover:underline flex-1 pr-2">
+                  {clip.title || 'Untitled Clip'}
+                </Link>
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon" className="flex-shrink-0">
+                      <MoreVertical className="h-5 w-5" />
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem onSelect={() => handleEditClick(clip)}>
+                      <Edit className="mr-2 h-4 w-4" />
+                      <span>Edit Title</span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem
+                      className="text-destructive focus:text-destructive"
+                      onSelect={() => setClipToDelete(clip)}
+                    >
+                      <Trash2 className="mr-2 h-4 w-4" />
+                      <span>Delete</span>
+                    </DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="flex-grow">
+              <Link href={`/clips/${clip.short_id}`}>
+                <div className="aspect-video w-full bg-muted rounded-md overflow-hidden relative">
+                  {clip.thumbnail_storage_path ? (
+                    <Image
+                      src={getThumbnailUrl(clip.thumbnail_storage_path)}
+                      alt={clip.title || 'Clip thumbnail'}
+                      layout="fill"
+                      objectFit="cover"
+                      className="transition-transform duration-300 hover:scale-105"
+                    />
+                  ) : (
+                    <div className="w-full h-full flex items-center justify-center text-muted-foreground">
+                      No thumbnail
+                    </div>
+                  )}
+                </div>
+              </Link>
+            </CardContent>
+            <CardFooter className="flex justify-between items-center text-sm text-muted-foreground">
+              <span>{formatDistanceToNow(new Date(clip.created_at), { addSuffix: true })}</span>
+              <Button variant="outline" size="sm" onClick={() => copyToClipboard(clip.short_id)}>
+                {hasCopied === clip.short_id ? <Check className="mr-2 h-4 w-4 text-green-500" /> : <Copy className="mr-2 h-4 w-4" />}
+                {hasCopied === clip.short_id ? 'Copied!' : 'Copy Link'}
+              </Button>
+            </CardFooter>
+          </Card>
+        ))}
+      </div>
+
+      {/* Edit Title Dialog */}
+      <Dialog open={!!clipToEdit} onOpenChange={(isOpen) => !isOpen && setClipToEdit(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit Clip Title</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="grid grid-cols-4 items-center gap-4">
+              <Label htmlFor="title" className="text-right">
+                Title
+              </Label>
+              <Input
+                id="title"
+                value={newTitle}
+                onChange={(e) => setNewTitle(e.target.value)}
+                className="col-span-3"
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="button" variant="secondary" disabled={isSaving}>
+                Cancel
+              </Button>
+            </DialogClose>
+            <Button type="submit" onClick={handleSaveChanges} disabled={isSaving}>
+              {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Save changes
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={!!clipToDelete} onOpenChange={(isOpen) => !isOpen && setClipToDelete(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action cannot be undone. This will permanently delete your clip and its thumbnail from our servers.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={() => clipToDelete && handleDeleteClip(clipToDelete)} disabled={isDeleting} className="bg-destructive hover:bg-destructive/90">
+              {isDeleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}

src/components/video-editor.tsx

@@ -7,22 +7,26 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Slider } from "@/components/ui/slider";
 import { Progress } from "@/components/ui/progress";
-import { UploadCloud, Scissors, Download, Loader2 } from "lucide-react";
+import { UploadCloud, Share2, Copy, Loader2, RotateCcw, Trash2, Check } from "lucide-react";
 import { getFFmpeg } from "@/lib/ffmpeg";
 import { fetchFile } from "@ffmpeg/util";
+import { supabase } from "@/integrations/supabase/client";
+import { toast } from "sonner";
+import { Toaster } from "@/components/ui/sonner";
 
 export function VideoEditor() {
   const [videoSrc, setVideoSrc] = useState<string | null>(null);
   const [videoFile, setVideoFile] = useState<File | null>(null);
+  const [videoTitle, setVideoTitle] = useState("");
   const [duration, setDuration] = useState(0);
   const [trimValues, setTrimValues] = useState([0, 0]);
-  const [isTrimming, setIsTrimming] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
-  const [trimmedVideoUrl, setTrimmedVideoUrl] = useState<string | null>(null);
+  const [shareableLink, setShareableLink] = useState<string | null>(null);
   const [progress, setProgress] = useState(0);
+  const [hasCopied, setHasCopied] = useState(false);
   const videoRef = useRef<HTMLVideoElement>(null);
 
   useEffect(() => {
-    // Eagerly load FFmpeg
     getFFmpeg();
   }, []);
 
@@ -31,14 +35,11 @@ export function VideoEditor() {
     if (!video) return;
 
     const handleTimeUpdate = () => {
-      // When the video plays past the end of the trim selection, loop back to the start
       if (video.currentTime >= trimValues[1]) {
         video.currentTime = trimValues[0];
       }
     };
-
     const handlePlay = () => {
-      // If the video is outside the trim range when play is clicked, jump to the start of the trim
       if (video.currentTime < trimValues[0] || video.currentTime >= trimValues[1]) {
         video.currentTime = trimValues[0];
       }
@@ -59,9 +60,10 @@ export function VideoEditor() {
     const file = event.target.files?.[0];
     if (file) {
       setVideoFile(file);
+      setVideoTitle(file.name.replace(/\.[^/.]+$/, ""));
       const url = URL.createObjectURL(file);
       setVideoSrc(url);
-      setTrimmedVideoUrl(null);
+      setShareableLink(null);
       setProgress(0);
     }
   };
@@ -74,25 +76,18 @@ export function VideoEditor() {
 
   const handleTrimValueChange = (newValues: number[]) => {
     if (videoRef.current) {
-      if (newValues[0] !== trimValues[0]) {
+      if (newValues[0] !== trimValues[0]) videoRef.current.currentTime = newValues[0];
-        videoRef.current.currentTime = newValues[0];
+      else if (newValues[1] !== trimValues[1]) videoRef.current.currentTime = newValues[1];
-      } else if (newValues[1] !== trimValues[1]) {
-        videoRef.current.currentTime = newValues[1];
-      }
     }
     setTrimValues(newValues);
   };
 
   const formatTime = (timeInSeconds: number) => {
-    if (isNaN(timeInSeconds) || timeInSeconds < 0) {
+    if (isNaN(timeInSeconds) || timeInSeconds < 0) return "00:00.000";
-      return "00:00.000";
-    }
     const minutes = Math.floor(timeInSeconds / 60);
     const seconds = Math.floor(timeInSeconds % 60);
     const milliseconds = Math.floor((timeInSeconds % 1) * 1000);
-    return `${String(minutes).padStart(2, "0")}:${String(
+    return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}.${String(milliseconds).padStart(3, "0")}`;
-      seconds
-    ).padStart(2, "0")}.${String(milliseconds).padStart(3, "0")}`;
   };
   
   const formatTimeForFFmpeg = (timeInSeconds: number) => {
@@ -100,136 +95,170 @@ export function VideoEditor() {
     const minutes = Math.floor((timeInSeconds % 3600) / 60);
     const seconds = Math.floor(timeInSeconds % 60);
     const milliseconds = Math.floor((timeInSeconds % 1) * 1000);
-    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(
+    return `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}.${String(milliseconds).padStart(3, "0")}`;
-      seconds
-    ).padStart(2, "0")}.${String(milliseconds).padStart(3, "0")}`;
   };
 
-  const handleCutVideo = async () => {
+  const handleCutAndShare = async () => {
     if (!videoFile) return;
 
-    setIsTrimming(true);
+    setIsProcessing(true);
-    setTrimmedVideoUrl(null);
+    setShareableLink(null);
     setProgress(0);
 
-    const ffmpeg = await getFFmpeg();
+    try {
+      const { data: { user } } = await supabase.auth.getUser();
+      if (!user) throw new Error("User not authenticated.");
 
-    ffmpeg.on('progress', ({ progress }) => {
+      const ffmpeg = await getFFmpeg();
-      setProgress(Math.round(progress * 100));
+      ffmpeg.on('progress', ({ progress }) => setProgress(Math.round(progress * 100)));
-    });
+      await ffmpeg.writeFile(videoFile.name, await fetchFile(videoFile));
 
-    await ffmpeg.writeFile(videoFile.name, await fetchFile(videoFile));
+      const [startTime, endTime] = trimValues;
+      await ffmpeg.exec(['-i', videoFile.name, '-ss', formatTimeForFFmpeg(startTime), '-to', formatTimeForFFmpeg(endTime), '-c', 'copy', 'output.mp4']);
 
-    const [startTime, endTime] = trimValues;
+      const data = await ffmpeg.readFile('output.mp4');
+      const trimmedBlob = new Blob([(data as any).buffer], { type: 'video/mp4' });
       
-    await ffmpeg.exec([
+      // Generate thumbnail
-      '-i',
+      await ffmpeg.exec(['-i', 'output.mp4', '-ss', '00:00:00.001', '-vframes', '1', 'thumbnail.jpg']);
-      videoFile.name,
+      const thumbnailData = await ffmpeg.readFile('thumbnail.jpg');
-      '-ss',
+      const thumbnailBlob = new Blob([(thumbnailData as any).buffer], { type: 'image/jpeg' });
-      formatTimeForFFmpeg(startTime),
-      '-to',
-      formatTimeForFFmpeg(endTime),
-      '-c',
-      'copy',
-      'output.mp4',
-    ]);
 
-    const data = await ffmpeg.readFile('output.mp4');
+      const shortId = Math.random().toString(36).substring(2, 8);
-    const url = URL.createObjectURL(new Blob([(data as any).buffer], { type: 'video/mp4' }));
+      const storagePath = `${user.id}/${shortId}-${videoFile.name}`;
+      const thumbnailStoragePath = `${user.id}/${shortId}-thumbnail.jpg`;
       
-    setTrimmedVideoUrl(url);
+      const { error: uploadError } = await supabase.storage.from('clips').upload(storagePath, trimmedBlob);
-    setIsTrimming(false);
+      if (uploadError) throw new Error(`Storage Error: ${uploadError.message}`);
+
+      const { error: thumbnailUploadError } = await supabase.storage.from('clips').upload(thumbnailStoragePath, thumbnailBlob);
+      if (thumbnailUploadError) throw new Error(`Thumbnail Upload Error: ${thumbnailUploadError.message}`);
+
+      const { error: dbError } = await supabase.from('clips').insert({
+        user_id: user.id,
+        storage_path: storagePath,
+        thumbnail_storage_path: thumbnailStoragePath,
+        short_id: shortId,
+        original_file_name: videoFile.name,
+        title: videoTitle,
+      });
+      if (dbError) throw new Error(`Database Error: ${dbError.message}`);
+
+      const newShareableLink = `${window.location.origin}/clips/${shortId}`;
+      setShareableLink(newShareableLink);
+      toast.success("Your clip is ready to be shared!");
+    } catch (error) {
+      console.error(error);
+      toast.error((error as Error).message || "An unexpected error occurred.");
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleReset = () => {
+    setTrimValues([0, duration]);
+    if (videoRef.current) videoRef.current.currentTime = 0;
+  };
+
+  const handleClear = () => {
+    if (videoSrc) URL.revokeObjectURL(videoSrc);
+    setVideoSrc(null); setVideoFile(null); setDuration(0);
+    setTrimValues([0, 0]); setIsProcessing(false);
+    setShareableLink(null); setProgress(0);
+    setVideoTitle("");
+  };
+
+  const copyToClipboard = () => {
+    if (shareableLink) {
+      navigator.clipboard.writeText(shareableLink);
+      setHasCopied(true);
+      setTimeout(() => setHasCopied(false), 2000);
+    }
   };
 
   return (
-    <Card className="w-full shadow-lg rounded-2xl border">
+    <>
-      <CardHeader className="text-center">
+      <Toaster />
-        <CardTitle className="text-3xl font-bold tracking-tight">
+      <Card className="w-full shadow-lg rounded-2xl border">
-          Video Clip Cutter
+        <CardHeader className="text-center">
-        </CardTitle>
+          <CardTitle className="text-3xl font-bold tracking-tight">Video Clip Cutter</CardTitle>
-        <CardDescription className="text-lg text-muted-foreground pt-2">
+          <CardDescription className="text-lg text-muted-foreground pt-2">Upload, trim, and share your video in seconds.</CardDescription>
-          Upload, trim, and export your video in seconds.
+        </CardHeader>
-        </CardDescription>
+        <CardContent className="p-6">
-      </CardHeader>
+          {videoSrc ? (
-      <CardContent className="p-6">
+            <div className="space-y-6">
-        {videoSrc ? (
+              <div className="aspect-video w-full overflow-hidden rounded-lg border">
-          <div className="space-y-6">
+                <video ref={videoRef} src={videoSrc} controls className="w-full h-full object-contain bg-black" onLoadedMetadata={handleLoadedMetadata} />
-            <div className="aspect-video w-full overflow-hidden rounded-lg border">
+              </div>
-              <video
+              <div className="space-y-2">
-                ref={videoRef}
+                <Label htmlFor="video-title">Title</Label>
-                src={videoSrc}
+                <Input
-                controls
+                  id="video-title"
-                className="w-full h-full object-contain bg-black"
+                  value={videoTitle}
-                onLoadedMetadata={handleLoadedMetadata}
+                  onChange={(e) => setVideoTitle(e.target.value)}
-              />
+                  placeholder="Enter a title for your clip"
-            </div>
+                  disabled={isProcessing}
-            <div>
-              <h3 className="text-lg font-semibold mb-4">Trim Video</h3>
-              <div className="space-y-4">
-                <Slider
-                  value={trimValues}
-                  onValueChange={handleTrimValueChange}
-                  max={duration}
-                  step={0.1}
-                  aria-label="Video trimmer"
-                  disabled={isTrimming}
                 />
-                <div className="flex justify-between text-sm font-mono text-muted-foreground">
+              </div>
-                  <span>Start: {formatTime(trimValues[0])}</span>
+              <div>
-                  <span>End: {formatTime(trimValues[1])}</span>
+                <h3 className="text-lg font-semibold mb-4">Trim Video</h3>
+                <div className="space-y-4">
+                  <Slider value={trimValues} onValueChange={handleTrimValueChange} max={duration} step={0.1} aria-label="Video trimmer" disabled={isProcessing} />
+                  <div className="flex justify-between text-sm font-mono text-muted-foreground">
+                    <span>Start: {formatTime(trimValues[0])}</span>
+                    <span>End: {formatTime(trimValues[1])}</span>
+                  </div>
                 </div>
               </div>
+              {isProcessing && (
+                <div className="space-y-2">
+                  <Label>Processing your clip...</Label>
+                  <Progress value={progress} />
+                  <p className="text-sm text-muted-foreground text-center">{progress}% complete</p>
+                </div>
+              )}
+              {shareableLink && (
+                <div className="space-y-2">
+                  <Label>Share your clip!</Label>
+                  <div className="flex items-center space-x-2">
+                    <Input value={shareableLink} readOnly className="font-mono" />
+                    <Button size="icon" variant="outline" onClick={copyToClipboard}>
+                      {hasCopied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+                    </Button>
+                  </div>
+                </div>
+              )}
             </div>
-            {isTrimming && (
+          ) : (
-              <div className="space-y-2">
+            <div className="flex items-center justify-center w-full">
-                <Label>Trimming in progress...</Label>
+              <Label htmlFor="video-upload" className="flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer bg-transparent hover:bg-secondary transition-colors">
-                <Progress value={progress} />
+                <div className="flex flex-col items-center justify-center pt-5 pb-6">
-                <p className="text-sm text-muted-foreground text-center">{progress}% complete</p>
+                  <UploadCloud className="w-10 h-10 mb-4 text-muted-foreground" />
+                  <p className="mb-2 text-sm text-muted-foreground"><span className="font-semibold text-foreground">Click to upload</span> or drag and drop</p>
+                  <p className="text-xs text-muted-foreground">MP4, WebM, or OGG</p>
+                </div>
+                <Input id="video-upload" type="file" className="hidden" accept="video/*" onChange={handleFileChange} />
+              </Label>
+            </div>
+          )}
+        </CardContent>
+        {videoSrc && (
+          <CardFooter className="flex justify-between items-center p-6">
+              <Button variant="destructive" size="lg" onClick={handleClear} disabled={isProcessing}>
+                  <Trash2 className="mr-2 h-5 w-5" /> Clear
+              </Button>
+              <div className="flex space-x-4">
+                  <Button variant="ghost" size="lg" onClick={handleReset} disabled={isProcessing}>
+                      <RotateCcw className="mr-2 h-5 w-5" /> Reset
+                  </Button>
+                  <Button variant="default" size="lg" onClick={handleCutAndShare} disabled={isProcessing}>
+                      {isProcessing ? <Loader2 className="mr-2 h-5 w-5 animate-spin" /> : <Share2 className="mr-2 h-5 w-5" />}
+                      {isProcessing ? "Processing..." : "Cut & Share"}
+                  </Button>
               </div>
-            )}
+          </CardFooter>
-          </div>
-        ) : (
-          <div className="flex items-center justify-center w-full">
-            <Label
-              htmlFor="video-upload"
-              className="flex flex-col items-center justify-center w-full h-64 border-2 border-dashed rounded-lg cursor-pointer bg-transparent hover:bg-secondary transition-colors"
-            >
-              <div className="flex flex-col items-center justify-center pt-5 pb-6">
-                <UploadCloud className="w-10 h-10 mb-4 text-muted-foreground" />
-                <p className="mb-2 text-sm text-muted-foreground">
-                  <span className="font-semibold text-foreground">Click to upload</span> or drag and drop
-                </p>
-                <p className="text-xs text-muted-foreground">MP4, WebM, or OGG</p>
-              </div>
-              <Input
-                id="video-upload"
-                type="file"
-                className="hidden"
-                accept="video/*"
-                onChange={handleFileChange}
-              />
-            </Label>
-          </div>
         )}
-      </CardContent>
+      </Card>
-      {videoSrc && (
+    </>
-        <CardFooter className="flex justify-end space-x-4 p-6">
-            <Button variant="outline" size="lg" onClick={handleCutVideo} disabled={isTrimming}>
-                {isTrimming ? (
-                    <Loader2 className="mr-2 h-5 w-5 animate-spin" />
-                ) : (
-                    <Scissors className="mr-2 h-5 w-5" />
-                )}
-                {isTrimming ? "Trimming..." : "Cut Video"}
-            </Button>
-            <Button asChild variant="default" size="lg" disabled={!trimmedVideoUrl || isTrimming}>
-                <a href={trimmedVideoUrl!} download={`trimmed-${videoFile?.name || 'video.mp4'}`}>
-                    <Download className="mr-2 h-5 w-5" />
-                    Export
-                </a>
-            </Button>
-        </CardFooter>
-      )}
-    </Card>
   );
 }

src/integrations/supabase/client.ts

@@ -0,0 +1,6 @@
+import { createClient } from '@supabase/supabase-js';
+
+const SUPABASE_URL = "https://namdprfashsbjyzwmidk.supabase.co";
+const SUPABASE_PUBLISHABLE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im5hbWRwcmZhc2hzYmp5endtaWRrIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NjQwNDEwMDIsImV4cCI6MjA3OTYxNzAwMn0.fO5Cael49Q4RDeXcYMmdhld65qAgND9SWn6pnwjx63g";
+
+export const supabase = createClient(SUPABASE_URL, SUPABASE_PUBLISHABLE_KEY);

tailwind.config.ts

@@ -9,6 +9,9 @@ export default {
   ],
   theme: {
   	extend: {
+      fontFamily: {
+        sans: ["var(--font-geist-sans)"],
+      },
   		colors: {
   			background: 'hsl(var(--background))',
   			foreground: 'hsl(var(--foreground))',