added separate route groups for dashboard and editor

package-lock.json

@@ -27,6 +27,7 @@
                 "clsx": "^2.1.1",
                 "dexie": "^4.0.11",
                 "dexie-react-hooks": "^1.1.7",
+                "dockview": "^4.5.0",
                 "lucide-react": "^0.525.0",
                 "next": "^15.4.3",
                 "next-themes": "^0.4.6",
@@ -3547,6 +3548,24 @@
                 "react": ">=16"
             }
         },
+        "node_modules/dockview": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/dockview/-/dockview-4.5.0.tgz",
+            "integrity": "sha512-Qg504Vxj0Ivk57pvoXbzDUcUK5pXewFpKPQdH1WoznC+d5XbvuDISZlyMhJKEY+m75xtsiJLxOeE4HCxG1j0NQ==",
+            "license": "MIT",
+            "dependencies": {
+                "dockview-core": "^4.5.0"
+            },
+            "peerDependencies": {
+                "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+            }
+        },
+        "node_modules/dockview-core": {
+            "version": "4.5.0",
+            "resolved": "https://registry.npmjs.org/dockview-core/-/dockview-core-4.5.0.tgz",
+            "integrity": "sha512-onwWGSy5mUiVDQDjVMIMeTxFUkJGBLHxpfSefDd4R6/Qfkvp2I0qTczNNoEXgxQkrG8J/7hjPZ+p+R9M7ggkVw==",
+            "license": "MIT"
+        },
         "node_modules/doctrine": {
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",

package.json

@@ -28,6 +28,7 @@
         "clsx": "^2.1.1",
         "dexie": "^4.0.11",
         "dexie-react-hooks": "^1.1.7",
+        "dockview": "^4.5.0",
         "lucide-react": "^0.525.0",
         "next": "^15.4.3",
         "next-themes": "^0.4.6",

src/app/(dashboard)/layout.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { SidebarProvider } from "@/components/ui/sidebar";
+import Dashboard from "@/components/dashboard";
+import PersistenceProvider from "../persistence-provider";
+
+export default async function RootLayout({
+    children,
+}: Readonly<{
+    children: ReactNode
+}>) {
+    return (
+        <SidebarProvider>
+            <Dashboard />
+            <main className="relative h-screen">
+                <PersistenceProvider>
+                    {children}
+                </PersistenceProvider>
+            </main>
+        </SidebarProvider>
+    );
+}

src/app/(dashboard)/page.tsx

@@ -32,6 +32,7 @@ import StaticSidebarTrigger from "@/components/static-sidebar-trigger";
 import SidebarTriggerAdjustable from "@/components/sidebar-trigger-adjustable";
 import ScrollFadingTitle from "@/components/scroll-fading-title";
 import AscendingCard from "@/components/ascending-card";
+import Link from "next/link";
 
 type SortingType = "byCreationDate"
     | "byEditDate"
@@ -408,7 +409,7 @@ const ProjectContainer = ({
         }
     };
 
-    return (
+    const projectComponent = (
         <AspectRatio data-selectable="true" ratio={16 / 9} onClick={handleCheck}>
             <AscendingCard className="relative rounded-lg w-full h-full overflow-hidden" data-selectable="true">
                 <div className="absolute bottom-0 left-0 w-full h-full bg-gradient-to-t from-white dark:from-black to-transparent opacity-50" data-selectable="true" />
@@ -430,7 +431,11 @@ const ProjectContainer = ({
                 )}
             </AscendingCard>
         </AspectRatio>
-    )
+    );
+
+    return selecting
+        ? projectComponent
+        : (<Link href={`/editor/${project.uuid}`}>{projectComponent}</Link>);
 };
 
 export default function Home(): ReactNode {

src/app/(dashboard)/settings/storage/page.tsx

@@ -7,6 +7,7 @@ import SidebarTriggerAdjustable from "@/components/sidebar-trigger-adjustable";
 import StaticSidebarTrigger from "@/components/static-sidebar-trigger";
 import { Button } from "@/components/ui/button";
 import { Label } from "@/components/ui/label";
+import { useSidebar } from "@/components/ui/sidebar";
 import WideContainer from "@/components/wide-container";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { ArrowLeftIcon } from "lucide-react";

src/app/(editor)/editor/[uuid]/layout.tsx

@@ -0,0 +1,57 @@
+import type { Metadata, Viewport } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import { ReactNode } from "react";
+import "@/app/globals.css";
+import ThemeProvider from "@/app/theme-provider";
+import Analytics from "@/app/analytics";
+import PersistenceProvider from "@/app/persistence-provider";
+import { Toaster } from "@/components/ui/sonner";
+import PWAHead from "@/app/pwa-head";
+
+const geist = Geist({
+    variable: "--font-geist",
+    subsets: ["latin"]
+});
+
+const geistMono = Geist_Mono({
+    variable: "--font-geist-mono",
+    subsets: ["latin"]
+});
+
+export const metadata: Metadata = {
+    title: "ClipFusion",
+    description: "Desktop power right in your browser",
+};
+
+export const viewport: Viewport = {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 1,
+    userScalable: false,
+    viewportFit: "cover"
+};
+
+export default async function RootLayout({
+    children,
+}: Readonly<{
+    children: ReactNode;
+}>) {
+    return (
+        <html lang="en" suppressHydrationWarning>
+            <head>
+                <PWAHead />
+                <Analytics />
+            </head>
+            <body className={`${geist.variable} ${geistMono.variable} antialiased`}>
+                <ThemeProvider>
+                    <main className="relative h-screen">
+                        <PersistenceProvider>
+                            {children}
+                        </PersistenceProvider>
+                    </main>
+                    <Toaster />
+                </ThemeProvider>
+            </body>
+        </html>
+    );
+}

src/app/(editor)/editor/[uuid]/page.tsx

@@ -0,0 +1,7 @@
+export default function Editor() {
+    return (
+        <>
+            Hello, Editor Page!
+        </>
+    );
+}

src/app/layout.tsx

@@ -1,8 +1,6 @@
 import type { Metadata, Viewport } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { ReactNode } from "react";
-import { SidebarProvider } from "@/components/ui/sidebar";
-import Dashboard from "@/components/dashboard";
 import "./globals.css";
 import ThemeProvider from "./theme-provider";
 import Analytics from "./analytics";
@@ -46,14 +44,11 @@ export default async function RootLayout({
             </head>
             <body className={`${geist.variable} ${geistMono.variable} antialiased`}>
                 <ThemeProvider>
-                    <SidebarProvider>
-                        <Dashboard/>
                         <main className="relative h-screen">
                             <PersistenceProvider>
                                 {children}
                             </PersistenceProvider>
                         </main>
-                    </SidebarProvider>
                     <Toaster/>
                 </ThemeProvider>
             </body>