[FEAT] Add new project modal

src/components/layout/Navbar.vue

@@ -18,6 +18,7 @@
           <template v-if="authStore.user">
               <NavbarProjectActions 
                 @open-save-modal="openSaveModal"
+                @open-new-project-modal="isNewProjectModalOpen = true"
                 @open-project-list="isProjectListOpen = true"
               />
               
@@ -55,6 +56,26 @@
       @open-help="$emit('open-help')"
     />
   </nav>
+    <AuthModal 
+      :is-open="isAuthModalOpen" 
+      @close="isAuthModalOpen = false" 
+    />
+    <ProjectList 
+      :is-open="isProjectListOpen" 
+      @close="isProjectListOpen = false" 
+      @open-project="handleOpenProject"
+    />
+    <SaveProjectModal 
+      :is-open="isSaveProjectModalOpen" 
+      :initial-name="projectStore.currentProject?.name"
+      @close="isSaveProjectModalOpen = false" 
+      @save="handleSaveProject"
+    />
+    <NewProjectModal
+        :is-open="isNewProjectModalOpen"
+        @close="isNewProjectModalOpen = false"
+        @create="handleCreateNewProject"
+    />
 </template>
 
 <script setup lang="ts">
@@ -64,10 +85,11 @@
   import AuthModal from '@/components/auth/AuthModal.vue';
   import ProjectList from '@/components/project/ProjectList.vue';
   import SaveProjectModal from '@/components/project/SaveProjectModal.vue';
+  import NewProjectModal from '@/components/project/NewProjectModal.vue';
   import { useProjectStore, type Project } from '@/stores/useProjectStore';
   import { useSettingsStore } from '@/stores/useSettingsStore';
   import { useExportLayers } from '@/composables/useExportLayers';
-  import { useLayers } from '@/composables/useLayers';
+  import { useLayers, createEmptyLayer } from '@/composables/useLayers';
 
   // Sub-components
   import NavbarLogo from './navbar/NavbarLogo.vue';
@@ -83,6 +105,7 @@
   const isAuthModalOpen = ref(false);
   const isProjectListOpen = ref(false);
   const isSaveProjectModalOpen = ref(false);
+  const isNewProjectModalOpen = ref(false);
 
   const authStore = useAuthStore();
   const projectStore = useProjectStore();
@@ -130,5 +153,22 @@
           alert("Failed to save project");
       }
   };
+
+  const handleCreateNewProject = (config: { width: number; height: number; columns: number; rows: number }) => {
+      // 1. Reset Settings
+      settingsStore.setManualCellSize(config.width, config.height);
+      settingsStore.manualCellSizeEnabled = true;
+      
+      // 2. Reset Layers
+      const newLayer = createEmptyLayer('Base');
+      layers.value = [newLayer];
+      activeLayerId.value = newLayer.id;
+      
+      // 3. Set Columns
+      columns.value = config.columns;
+
+      // 4. Reset Project Store
+      projectStore.currentProject = null;
+  };
 </script>