Add sample mind map option on new project creation and adjust editor initialization

Author: tlaukkanen

src/app/(projects)/editor/page.tsx

@@ -22,7 +22,7 @@ export default function EditorRootPage() {
         // Not logged in - create new project
         const newMindMapId = nanoid(10);
 
-        router.replace(`/editor/${newMindMapId}`);
+        router.replace(`/editor/${newMindMapId}?showSample=true`);
 
         return;
       }
@@ -36,7 +36,7 @@ export default function EditorRootPage() {
           // No existing projects - create new one
           const newMindMapId = nanoid(10);
 
-          router.replace(`/editor/${newMindMapId}`);
+          router.replace(`/editor/${newMindMapId}?showSample=true`);
         } else {
           // Show dialog to choose project
           setShouldShowDialog(true);

src/components/editor/editor.tsx

@@ -13,7 +13,7 @@ import {
   NodeChange, // Add this import
 } from "@xyflow/react";
 import { toast } from "sonner";
-import { useParams } from "next/navigation";
+import { useParams, useSearchParams } from "next/navigation";
 import { useSession } from "next-auth/react";
 import { nanoid } from "nanoid";
 
@@ -181,6 +181,8 @@ const findFreePosition = (
 };
 
 export default function Editor() {
+  const searchParams = useSearchParams();
+  const showSample = searchParams?.get("showSample") === "true";
   const { isFullScreen, setIsFullScreen } = useEditor();
   const {
     getIntersectingNodes,
@@ -193,8 +195,12 @@ export default function Editor() {
 
   const [isPropertiesPanelVisible, setIsPropertiesPanelVisible] =
     useState(false);
-  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
+  const [nodes, setNodes, onNodesChange] = useNodesState(
+    showSample ? initialNodes : [],
+  );
+  const [edges, setEdges, onEdgesChange] = useEdgesState(
+    showSample ? initialEdges : [],
+  );
   const [selectedNodeIds, setSelectedNodeIds] = useState<string[]>([]);
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
   const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);

src/components/editor/menubar.tsx

@@ -164,7 +164,7 @@ export const Menubar = ({
         position="sticky"
       >
         <MUIToolbar
-          className="bg-menuBar-background border-b  border-b-panels-border text-menuBar-text"
+          className="bg-menuBar-background border-b  border-b-panels-border text-menuBar-text pl-3"
           variant="dense"
         >
           <Box
@@ -182,12 +182,12 @@ export const Menubar = ({
             >
               <Image
                 alt="Logo"
-                className="w-8 h-8 object-contain"
-                height={28}
+                className="w-6 h-6 object-contain"
+                height={22}
                 src="/app_icon.svg"
-                width={28}
+                width={26}
               />
-              <Box width={1} />
+              <Box width={2} />
               <Typography className="hidden sm:block font-extrabold text-menuBar-text">
                 AivoMind
               </Typography>