fix: merge conflicts & updated more URLs following our new path

4 files changed, 421 insertions, 6 deletions

diff --git a/apps/web/src/components/auth-form.tsx b/apps/web/src/components/auth-form.tsx
new file mode 100644
index 00000000..3dd56036
--- /dev/null
+++ b/apps/web/src/components/auth-form.tsx
@@ -0,0 +1,398 @@
+"use client";

+

+import { useRouter } from "next/navigation";

+import { signUp, signIn } from "@/lib/auth-client";

+import { Button } from "@/components/ui/button";

+import {

+  Card,

+  CardContent,

+  CardDescription,

+  CardHeader,

+  CardTitle,

+} from "@/components/ui/card";

+import { useState } from "react";

+import { Input } from "@/components/ui/input";

+import { Separator } from "@/components/ui/separator";

+import Link from "next/link";

+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

+import { ArrowLeft, Loader2 } from "lucide-react";

+import { GoogleIcon } from "@/components/icons";

+import { useForm } from "react-hook-form";

+import { zodResolver } from "@hookform/resolvers/zod";

+import { z } from "zod";

+import {

+  Form,

+  FormControl,

+  FormField,

+  FormItem,

+  FormLabel,

+  FormMessage,

+} from "@/components/ui/form";

+

+// Zod schemas

+const loginSchema = z.object({

+  email: z.string().email("Please enter a valid email address"),

+  password: z.string().min(1, "Password is required"),

+});

+

+const signupSchema = z.object({

+  name: z.string().min(2, "Name must be at least 2 characters"),

+  email: z.string().email("Please enter a valid email address"),

+  password: z.string().min(8, "Password must be at least 8 characters"),

+});

+

+type LoginFormData = z.infer<typeof loginSchema>;

+type SignupFormData = z.infer<typeof signupSchema>;

+

+interface AuthFormProps {

+  mode: "login" | "signup";

+}

+

+const authConfig = {

+  login: {

+    title: "Welcome back",

+    description: "Sign in to your account to continue",

+    buttonText: "Sign in",

+    linkText: "Don't have an account?",

+    linkHref: "/signup",

+    linkLabel: "Sign up",

+    successRedirect: "/editor",

+  },

+  signup: {

+    title: "Create your account",

+    description: "Get started with your free account today",

+    buttonText: "Create account",

+    linkText: "Already have an account?",

+    linkHref: "/login",

+    linkLabel: "Sign in",

+    successRedirect: "/login",

+  },

+} as const;

+

+interface AuthFormContentProps {

+  error: string | null;

+  setError: (error: string | null) => void;

+  isGoogleLoading: boolean;

+  config: typeof authConfig.login | typeof authConfig.signup;

+  router: ReturnType<typeof useRouter>;

+}

+

+function LoginFormContent({

+  error,

+  setError,

+  isGoogleLoading,

+  config,

+  router,

+}: AuthFormContentProps) {

+  const form = useForm<LoginFormData>({

+    resolver: zodResolver(loginSchema),

+    defaultValues: { email: "", password: "" },

+  });

+

+  const { isSubmitting } = form.formState;

+  const isAnyLoading = isSubmitting || isGoogleLoading;

+

+  const onSubmit = async (data: LoginFormData) => {

+    setError(null);

+

+    try {

+      const { error } = await signIn.email({

+        email: data.email,

+        password: data.password,

+      });

+

+      if (error) {

+        setError(error.message || "An unexpected error occurred.");

+        return;

+      }

+

+      router.push(config.successRedirect);

+    } catch (error) {

+      setError("An unexpected error occurred. Please try again.");

+    }

+  };

+

+  return (

+    <Form {...form}>

+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">

+        <FormField

+          control={form.control}

+          name="email"

+          render={({ field }) => (

+            <FormItem>

+              <FormLabel>Email</FormLabel>

+              <FormControl>

+                <Input

+                  type="email"

+                  placeholder="m@example.com"

+                  disabled={isAnyLoading}

+                  className="h-11"

+                  {...field}

+                />

+              </FormControl>

+              <FormMessage />

+            </FormItem>

+          )}

+        />

+

+        <FormField

+          control={form.control}

+          name="password"

+          render={({ field }) => (

+            <FormItem>

+              <FormLabel>Password</FormLabel>

+              <FormControl>

+                <Input

+                  type="password"

+                  disabled={isAnyLoading}

+                  className="h-11"

+                  {...field}

+                />

+              </FormControl>

+              <FormMessage />

+            </FormItem>

+          )}

+        />

+

+        <Button

+          type="submit"

+          disabled={isAnyLoading}

+          className="w-full h-11"

+          size="lg"

+        >

+          {isSubmitting ? (

+            <Loader2 className="animate-spin" />

+          ) : (

+            config.buttonText

+          )}

+        </Button>

+      </form>

+    </Form>

+  );

+}

+

+function SignupFormContent({

+  error,

+  setError,

+  isGoogleLoading,

+  config,

+  router,

+}: AuthFormContentProps) {

+  const form = useForm<SignupFormData>({

+    resolver: zodResolver(signupSchema),

+    defaultValues: { email: "", password: "", name: "" },

+  });

+

+  const { isSubmitting } = form.formState;

+  const isAnyLoading = isSubmitting || isGoogleLoading;

+

+  const onSubmit = async (data: SignupFormData) => {

+    setError(null);

+

+    try {

+      const { error } = await signUp.email({

+        name: data.name,

+        email: data.email,

+        password: data.password,

+      });

+

+      if (error) {

+        setError(error.message || "An unexpected error occurred.");

+        return;

+      }

+

+      router.push(config.successRedirect);

+    } catch (error) {

+      setError("An unexpected error occurred. Please try again.");

+    }

+  };

+

+  return (

+    <Form {...form}>

+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">

+        <FormField

+          control={form.control}

+          name="name"

+          render={({ field }) => (

+            <FormItem>

+              <FormLabel>Full Name</FormLabel>

+              <FormControl>

+                <Input

+                  placeholder="John Doe"

+                  disabled={isAnyLoading}

+                  className="h-11"

+                  {...field}

+                />

+              </FormControl>

+              <FormMessage />

+            </FormItem>

+          )}

+        />

+

+        <FormField

+          control={form.control}

+          name="email"

+          render={({ field }) => (

+            <FormItem>

+              <FormLabel>Email</FormLabel>

+              <FormControl>

+                <Input

+                  type="email"

+                  placeholder="m@example.com"

+                  disabled={isAnyLoading}

+                  className="h-11"

+                  {...field}

+                />

+              </FormControl>

+              <FormMessage />

+            </FormItem>

+          )}

+        />

+

+        <FormField

+          control={form.control}

+          name="password"

+          render={({ field }) => (

+            <FormItem>

+              <FormLabel>Password</FormLabel>

+              <FormControl>

+                <Input

+                  type="password"

+                  placeholder="Create a strong password"

+                  disabled={isAnyLoading}

+                  className="h-11"

+                  {...field}

+                />

+              </FormControl>

+              <FormMessage />

+            </FormItem>

+          )}

+        />

+

+        <Button

+          type="submit"

+          disabled={isAnyLoading}

+          className="w-full h-11"

+          size="lg"

+        >

+          {isSubmitting ? (

+            <Loader2 className="animate-spin" />

+          ) : (

+            config.buttonText

+          )}

+        </Button>

+      </form>

+    </Form>

+  );

+}

+

+export function AuthForm({ mode }: AuthFormProps) {

+  const router = useRouter();

+  const [error, setError] = useState<string | null>(null);

+  const [isGoogleLoading, setIsGoogleLoading] = useState(false);

+  const config = authConfig[mode];

+

+  const handleGoogleAuth = async () => {

+    setError(null);

+    setIsGoogleLoading(true);

+

+    try {

+      await signIn.social({

+        provider: "google",

+      });

+

+      router.push(config.successRedirect);

+    } catch (error) {

+      setError(

+        `Failed to ${mode === "login" ? "sign in" : "sign up"} with Google. Please try again.`

+      );

+      setIsGoogleLoading(false);

+    }

+  };

+

+  return (

+    <div className="flex h-screen items-center justify-center relative">

+      <Button

+        variant="ghost"

+        onClick={() => router.back()}

+        className="absolute top-6 left-6"

+      >

+        <ArrowLeft className="h-5 w-5" /> Back

+      </Button>

+

+      <Card className="w-[400px] shadow-lg border-0">

+        <CardHeader className="text-center pb-4">

+          <CardTitle className="text-2xl font-semibold">

+            {config.title}

+          </CardTitle>

+          <CardDescription className="text-base">

+            {config.description}

+          </CardDescription>

+        </CardHeader>

+        <CardContent className="pt-0">

+          <div className="flex flex-col space-y-6">

+            {error && (

+              <Alert variant="destructive">

+                <AlertTitle>Error</AlertTitle>

+                <AlertDescription>{error}</AlertDescription>

+              </Alert>

+            )}

+

+            <Button

+              onClick={handleGoogleAuth}

+              variant="outline"

+              size="lg"

+              disabled={isGoogleLoading}

+            >

+              {isGoogleLoading ? (

+                <Loader2 className="animate-spin" />

+              ) : (

+                <GoogleIcon />

+              )}

+              Continue with Google

+            </Button>

+

+            <div className="relative">

+              <div className="absolute inset-0 flex items-center">

+                <Separator className="w-full" />

+              </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>

+

+            {mode === "login" ? (

+              <LoginFormContent

+                error={error}

+                setError={setError}

+                isGoogleLoading={isGoogleLoading}

+                config={config}

+                router={router}

+              />

+            ) : (

+              <SignupFormContent

+                error={error}

+                setError={setError}

+                isGoogleLoading={isGoogleLoading}

+                config={config}

+                router={router}

+              />

+            )}

+          </div>

+

+          <div className="mt-6 text-center text-sm">

+            {config.linkText}{" "}

+            <Link

+              href={config.linkHref}

+              className="font-medium text-primary underline-offset-4 hover:underline"

+            >

+              {config.linkLabel}

+            </Link>

+          </div>

+        </CardContent>

+      </Card>

+    </div>

+  );

+}

diff --git a/apps/web/src/components/editor/properties-panel.tsx b/apps/web/src/components/editor/properties-panel.tsx
index 2b211c21..c784dab8 100644
--- a/apps/web/src/components/editor/properties-panel.tsx
+++ b/apps/web/src/components/editor/properties-panel.tsx
@@ -38,7 +38,6 @@ export function PropertiesPanel() {
     ? mediaItems.find((item) => item.id === firstVideoClip.mediaId)
     : null;
 
-  // Get the first image clip for preview (simplified)
   const firstImageClip = tracks
     .flatMap((track) => track.clips)
     .find((clip) => {
diff --git a/apps/web/src/components/editor/timeline.tsx b/apps/web/src/components/editor/timeline.tsx
index 675b398c..9af7a204 100644
--- a/apps/web/src/components/editor/timeline.tsx
+++ b/apps/web/src/components/editor/timeline.tsx
@@ -557,8 +557,26 @@ export function Timeline() {
 

                 {/* Playhead in ruler */}

                 <div

-                  className="absolute top-0 bottom-0 w-0.5 bg-red-500 pointer-events-none z-10"

+                  className="absolute top-0 bottom-0 w-0.5 bg-red-500 cursor-ew-resize z-1000" // Remove pointer-events-none to allow dragging

                   style={{ left: `${currentTime * 50 * zoomLevel}px` }}

+                  onMouseDown={(e) => {

+                    e.preventDefault();

+                    e.stopPropagation();

+                    const handleMouseMove = (e: MouseEvent) => {

+                      const timeline = timelineRef.current; // Get timeline element ref to track the position

+                      if (!timeline) return; // If no timeline element, exit

+                      const rect = timeline.getBoundingClientRect(); // Get the bounding rect of the timeline element

+                      const mouseX = Math.max(0, e.clientX - rect.left); // Calculate the mouse position relative to the timeline element 

+                      const newTime = mouseX / (50 * zoomLevel); // Calculate the time based on the mouse position

+                      seek(newTime); // Set the current time 

+                    };

+                    const handleMouseUp = () => {

+                      window.removeEventListener("mousemove", handleMouseMove); // Remove the mousemove event listener

+                      window.removeEventListener("mouseup", handleMouseUp); // Remove the mouseup event listener

+                    };

+                    window.addEventListener("mousemove", handleMouseMove); // Add the mousemove event listener

+                    window.addEventListener("mouseup", handleMouseUp); // Add the mouseup event listener

+                  }}

                 >

                   <div className="absolute top-1 left-1/2 transform -translate-x-1/2 w-3 h-3 bg-red-500 rounded-full border-2 border-white shadow-sm" />

                 </div>

@@ -670,7 +688,7 @@ export function Timeline() {
 

                     {/* Playhead for tracks area */}

                     <div

-                      className="absolute top-0 w-0.5 bg-red-500 pointer-events-none z-20"

+                      className="absolute top-0 w-0.5 bg-red-500 cursor-ew-resize z-20"

                       style={{

                         left: `${currentTime * 50 * zoomLevel}px`,

                         height: `${tracks.length * 60}px`,

@@ -1510,4 +1528,4 @@ function TimelineTrackContent({
       </div>

     </div>

   );

-}
\ No newline at end of file
+}

diff --git a/apps/web/src/components/landing/hero.tsx b/apps/web/src/components/landing/hero.tsx
index f2c70f5d..714d432b 100644
--- a/apps/web/src/components/landing/hero.tsx
+++ b/apps/web/src/components/landing/hero.tsx
@@ -84,12 +84,12 @@ export function Hero({ signupCount }: HeroProps) {
             The open source

           </h1>

           <h1 className="text-5xl sm:text-7xl font-bold tracking-tighter mt-2">

-            CapCut alternative.

+            video editor

           </h1>

         </motion.div>

 

         <motion.p

-          className="mt-12 text-lg sm:text-xl text-muted-foreground font-light tracking-wide max-w-xl mx-auto"

+          className="mt-10 text-lg sm:text-xl text-muted-foreground font-light tracking-wide max-w-xl mx-auto"

           initial={{ opacity: 0 }}

           animate={{ opacity: 1 }}

           transition={{ delay: 0.4, duration: 0.8 }}