Merge branch 'vadi25/main' into staging

3 files changed, 41 insertions, 3 deletions

diff --git a/apps/web/src/app/editor/[project_id]/page.tsx b/apps/web/src/app/editor/[project_id]/page.tsx
index 65667106..41bef8bd 100644
--- a/apps/web/src/app/editor/[project_id]/page.tsx
+++ b/apps/web/src/app/editor/[project_id]/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useParams, useRouter } from "next/navigation";
 import {
   ResizablePanelGroup,
@@ -16,6 +16,7 @@ import { usePanelStore } from "@/stores/panel-store";
 import { useProjectStore } from "@/stores/project-store";
 import { EditorProvider } from "@/components/editor-provider";
 import { usePlaybackControls } from "@/hooks/use-playback-controls";
+import { Onboarding } from "@/components/onboarding";
 
 export default function Editor() {
   const {
@@ -36,12 +37,12 @@ export default function Editor() {
   const router = useRouter();
   const projectId = params.project_id as string;
   const handledProjectIds = useRef<Set<string>>(new Set());
+  const [isOnboardingOpen, setIsOnboardingOpen] = useState(true);
 
   usePlaybackControls();
 
   useEffect(() => {
     const initProject = async () => {
-
       if (!projectId) return;
 
       if (activeProject?.id === projectId) {
@@ -139,6 +140,12 @@ export default function Editor() {
           </ResizablePanelGroup>
         </div>
       </div>
+      <Onboarding
+        isOpen={isOnboardingOpen}
+        onClose={() => {
+          setIsOnboardingOpen(false);
+        }}
+      />
     </EditorProvider>
   );
 }
diff --git a/apps/web/src/components/onboarding.tsx b/apps/web/src/components/onboarding.tsx
new file mode 100644
index 00000000..a2943677
--- /dev/null
+++ b/apps/web/src/components/onboarding.tsx
@@ -0,0 +1,29 @@
+"use client";

+

+import {

+  Dialog,

+  DialogContent,

+  DialogDescription,

+  DialogHeader,

+  DialogTitle,

+} from "./ui/dialog";

+

+interface OnboardingProps {

+  isOpen: boolean;

+  onClose: () => void;

+}

+

+export function Onboarding({ isOpen, onClose }: OnboardingProps) {

+  return (

+    <Dialog open={isOpen} onOpenChange={onClose}>

+      <DialogContent>

+        <DialogHeader>

+          <DialogTitle>Welcome to Clipture</DialogTitle>

+          <DialogDescription>

+            Let's get you started with the basics.

+          </DialogDescription>

+        </DialogHeader>

+      </DialogContent>

+    </Dialog>

+  );

+}

diff --git a/apps/web/src/middleware.ts b/apps/web/src/middleware.ts
index 1f229e6d..aabc302a 100644
--- a/apps/web/src/middleware.ts
+++ b/apps/web/src/middleware.ts
@@ -3,6 +3,8 @@ import type { NextRequest } from "next/server";
 import { env } from "./env";

 

 export async function middleware(request: NextRequest) {

+  const protectedPaths = ["/editor", "/projects"];

+

   // Handle fuckcapcut.com domain redirect

   if (request.headers.get("host") === "fuckcapcut.com") {

     return NextResponse.redirect("https://opencut.app/why-not-capcut", 301);

@@ -10,7 +12,7 @@ export async function middleware(request: NextRequest) {
 

   const path = request.nextUrl.pathname;

 

-  if (path.startsWith("/editor") && env.NODE_ENV === "production") {

+  if (protectedPaths.includes(path) && env.NODE_ENV === "production") {

     const homeUrl = new URL("/", request.url);

     homeUrl.searchParams.set("redirect", request.url);

     return NextResponse.redirect(homeUrl);