[FEAT] Auth. and user projects

src/components/layout/Navbar.vue

@@ -23,6 +23,29 @@
 
           <div class="h-4 w-px bg-gray-200 dark:bg-gray-700"></div>
 
+          <!-- Auth & Projects -->
+          <div v-if="authStore.user" class="flex items-center gap-3">
+             <span class="text-sm font-medium text-gray-700 dark:text-gray-300 truncate max-w-[150px]">
+                 {{ authStore.user.email }}
+             </span>
+             <button @click="openSaveModal" class="btn btn-primary btn-sm">
+                 <i class="fas fa-save mr-1.5"></i> Save
+             </button>
+             <button @click="isProjectListOpen = true" class="btn btn-secondary btn-sm">
+                 <i class="fas fa-folder-open mr-1.5"></i> Projects
+             </button>
+             <button @click="authStore.logout()" class="text-sm text-gray-500 hover:text-red-500 transition-colors" title="Logout">
+                <i class="fas fa-sign-out-alt"></i>
+             </button>
+          </div>
+          <div v-else>
+              <button @click="isAuthModalOpen = true" class="btn btn-primary btn-sm">
+                  Login / Register
+              </button>
+          </div>
+
+          <div class="h-4 w-px bg-gray-200 dark:bg-gray-700"></div>
+
           <div class="flex items-center gap-3">
             <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" rel="noopener noreferrer" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white transition-colors" title="Source Code">
               <i class="fab fa-github text-lg"></i>
@@ -37,6 +60,15 @@
           </div>
         </div>
 
+        <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" 
+        />
+
         <!-- Mobile Menu Button -->
         <div class="flex md:hidden">
           <DarkModeToggle />
@@ -80,8 +112,73 @@
   import { ref } from 'vue';
   import { RouterLink } from 'vue-router';
   import DarkModeToggle from '../utilities/DarkModeToggle.vue';
+  import { useAuthStore } from '@/stores/useAuthStore';
+  import AuthModal from '@/components/auth/AuthModal.vue';
+  import ProjectList from '@/components/project/ProjectList.vue';
+  import SaveProjectModal from '@/components/project/SaveProjectModal.vue';
+  import { useProjectStore, type Project } from '@/stores/useProjectStore';
+  import { useSettingsStore } from '@/stores/useSettingsStore';
+  import { useExportLayers } from '@/composables/useExportLayers';
+  import { useLayers } from '@/composables/useLayers';
+  import { toRef } from 'vue';
 
-  defineEmits(['open-help']);
+  defineEmits(['open-help']); // Removed 'open-project' since we handle it here
 
   const isMobileMenuOpen = ref(false);
+  const isAuthModalOpen = ref(false);
+  const isProjectListOpen = ref(false);
+  const isSaveProjectModalOpen = ref(false);
+
+  const authStore = useAuthStore();
+  const projectStore = useProjectStore();
+  const settingsStore = useSettingsStore();
+  const { layers, columns, activeLayerId } = useLayers();
+
+  const { generateProjectJSON, loadProjectData } = useExportLayers(
+      layers,
+      columns,
+      toRef(settingsStore, 'negativeSpacingEnabled'),
+      activeLayerId,
+      toRef(settingsStore, 'backgroundColor'),
+      toRef(settingsStore, 'manualCellSizeEnabled'),
+      toRef(settingsStore, 'manualCellWidth'),
+      toRef(settingsStore, 'manualCellHeight')
+  );
+
+  const handleOpenProject = async (project: Project) => {
+    try {
+      if (project.data) {
+        await loadProjectData(project.data);
+      }
+      projectStore.currentProject = project;
+    } catch (e) {
+      console.error("Failed to open project", e);
+      alert("Failed to open project data");
+    }
+  };
+
+  const openSaveModal = () => {
+      isSaveProjectModalOpen.value = true;
+  }
+
+  const handleSaveProject = async (name: string) => {
+      try {
+          const data = await generateProjectJSON();
+          
+          if (projectStore.currentProject && projectStore.currentProject.name === name) { // Simple check, ideally check ID but UI only exposes name edit on save for new projects or overwrite? 
+              // Actually SaveProjectModal allows editing name.
+              // If it's the same project, we update.
+              await projectStore.updateProject(projectStore.currentProject.id, data);
+              // Update name if changed? updateProject signature might need name.
+              // current implementation of updateProject only updates data.
+              // To update name we need to change store or backend. 
+              // For now, let's just update data.
+          } else {
+              await projectStore.createProject(name, data);
+          }
+      } catch (e) {
+          console.error(e);
+          alert("Failed to save project");
+      }
+  };
 </script>