[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>
 

src/components/layout/navbar/NavbarProjectActions.vue

@@ -27,6 +27,9 @@
        <button @click="$emit('open-save-modal')" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition-all" title="Save Project">
           <i class="fas fa-save"></i>
       </button>
+      <button @click="$emit('open-new-project-modal')" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition-all" title="New Project">
+          <i class="fas fa-plus"></i>
+      </button>
       <button @click="$emit('open-project-list')" class="w-8 h-8 rounded-lg flex items-center justify-center text-gray-500 hover:text-indigo-600 hover:bg-indigo-50 dark:hover:bg-indigo-900/30 transition-all" title="My Projects">
           <i class="fas fa-folder-open"></i>
       </button>
@@ -37,7 +40,7 @@
 <script setup lang="ts">
 import { useProjectStore } from '@/stores/useProjectStore';
 
-defineEmits(['open-save-modal', 'open-project-list']);
+defineEmits(['open-save-modal', 'open-project-list', 'open-new-project-modal']);
 
 const projectStore = useProjectStore();
 </script>

src/components/project/NewProjectModal.vue

@@ -0,0 +1,115 @@
+<template>
+  <Teleport to="body">
+    <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm" @click.self="close">
+      <div class="bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6 w-full max-w-sm border border-gray-200 dark:border-gray-700">
+        <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">New Project</h2>
+        <form @submit.prevent="handleSubmit">
+          
+          <div class="grid grid-cols-2 gap-4 mb-4">
+            <div>
+              <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Sprite Width</label>
+              <div class="relative">
+                <input
+                  v-model.number="width"
+                  type="number"
+                  min="1"
+                  required
+                  class="w-full pl-3 pr-8 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
+                />
+                <span class="absolute right-3 top-2 text-gray-400 text-xs">px</span>
+              </div>
+            </div>
+            <div>
+              <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Sprite Height</label>
+              <div class="relative">
+                <input
+                  v-model.number="height"
+                  type="number"
+                  min="1"
+                  required
+                  class="w-full pl-3 pr-8 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
+                />
+                <span class="absolute right-3 top-2 text-gray-400 text-xs">px</span>
+              </div>
+            </div>
+          </div>
+
+          <div class="grid grid-cols-2 gap-4 mb-6">
+             <div>
+              <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Columns</label>
+              <input
+                v-model.number="columns"
+                type="number"
+                min="1"
+                max="20"
+                required
+                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
+              />
+            </div>
+             <div>
+              <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1 uppercase tracking-wider">Rows</label>
+              <input
+                v-model.number="rows"
+                type="number"
+                min="1"
+                required
+                class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:text-white"
+                title="Rows are dynamic but this sets an initial expectation"
+              />
+            </div>
+          </div>
+
+          <div class="flex justify-end gap-3">
+            <button type="button" @click="close" class="btn btn-secondary">Cancel</button>
+            <button type="submit" class="btn btn-primary" :disabled="!isValid">Create Project</button>
+          </div>
+        </form>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+
+const props = defineProps<{
+  isOpen: boolean;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'create', config: { width: number; height: number; columns: number; rows: number }): void;
+}>();
+
+const width = ref(64);
+const height = ref(64);
+const columns = ref(8);
+const rows = ref(8);
+
+const isValid = computed(() => {
+  return width.value > 0 && height.value > 0 && columns.value > 0 && rows.value > 0;
+});
+
+// Reset to defaults when opened
+watch(() => props.isOpen, (val) => {
+  if (val) {
+    width.value = 64;
+    height.value = 64;
+    columns.value = 8;
+    rows.value = 8;
+  }
+});
+
+const close = () => emit('close');
+const handleSubmit = () => {
+  if (isValid.value) {
+    emit('create', {
+      width: width.value,
+      height: height.value,
+      columns: columns.value,
+      rows: rows.value
+    });
+    close();
+  }
+};
+</script>

src/views/HomeView.vue

@@ -2,7 +2,7 @@
   <main class="flex flex-col flex-1 h-full min-h-0 relative">
     <!-- Welcome / Empty State -->
     <div v-if="!layers.some(l => l.sprites.length)" class="flex-1 flex flex-col items-center justify-center pb-12">
-      <div class="w-full max-w-[90rem] px-4 sm:px-6 lg:px-8 flex flex-col gap-8 lg:gap-12 items-start pt-4 sm:pt-8 lg:pt-16">
+      <div class="w-full max-w-[90rem] px-4 sm:px-6 lg:px-8 flex flex-col gap-8 lg:gap-12 items-start">
         <!-- Top Row: Upload Field & Video Side by Side -->
         <div class="w-full grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8">
           <!-- File Uploader Component -->