Working system

src/app/workspace/page.tsx

@@ -31,35 +31,44 @@ export default function Workspace() {
     else Cookies.remove("workspace");
   }, [currentWorkspace]);
 
-  return workspace ? (
-    <AppSidebar
-      workspace={workspace}
-      setRoute={setRoute}
-      updateEntity={updateEntity}
-      setWorkspace={setWorkspace}
-    >
+  if (!workspace) {
+    return (
+      <main
+        className="flex h-svh items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-slate-900 dark:to-slate-800"
+        onClick={() => {
+          const w = createDefaultWorkspace();
+          saveWorkspaceToLocalStorage(w);
+          setCurrentWorkspace(w.id);
+        }}
+      >
+        <div className="text-center space-y-6">
+          <h1 className="text-4xl font-bold">Welcome to Drift</h1>
+          <p className="text-lg text-muted-foreground">
+            Your personal productivity workspace
+          </p>
+          <Button size="lg" className="text-base">
+            Create a new workspace
+          </Button>
+        </div>
+      </main>
+    );
+  }
+
+  return (
+    <AppSidebar workspace={workspace} setRoute={setRoute}>
       <SidebarTrigger className="w-full px-4">
         <div className="px-4">
-          <header className="w-full border-b-2 pb-3 pt-2 hover:bg-accent/20 flex items-center text-foreground/90">
-            {workspace.name}
-            <ChevronRight className="h-5" />
-            {workspace.entities[route.entity || ""]?.name}
+          <header className="w-full border-b pb-3 pt-2 hover:bg-accent/20 flex items-center text-foreground/90 gap-2">
+            <span className="font-semibold">{workspace.name}</span>
+            <ChevronRight className="h-5 text-muted-foreground" />
+            <span className="text-muted-foreground">
+              {workspace.entities[route.entity || ""]?.name || "Select an item"}
+            </span>
           </header>
         </div>
       </SidebarTrigger>
 
       <Router workspace={workspace} route={route} updateEntity={updateEntity} />
     </AppSidebar>
-  ) : (
-    <main
-      className="flex h-svh items-center justify-center"
-      onClick={() => {
-        const w = createDefaultWorkspace();
-        saveWorkspaceToLocalStorage(w);
-        setCurrentWorkspace(w.id);
-      }}
-    >
-      <Button>Create a new workspace</Button>
-    </main>
   );
 }