[FEAT] More menu and UI enhancements

src/components/layout/Navbar.vue

@@ -44,7 +44,14 @@
     </div>
 
     <!-- Mobile Menu -->
-    <NavbarMobileMenu :is-open="isMobileMenuOpen" @close="isMobileMenuOpen = false" @open-help="$emit('open-help')" />
+    <NavbarMobileMenu 
+      :is-open="isMobileMenuOpen" 
+      @close="isMobileMenuOpen = false" 
+      @open-help="$emit('open-help')"
+      @open-save-modal="openSaveModal"
+      @open-new-project-modal="isNewProjectModalOpen = true"
+      @open-project-list="isProjectListOpen = true"
+    />
   </nav>
   <AuthModal :is-open="isAuthModalOpen" @close="isAuthModalOpen = false" />
   <ProjectList :is-open="isProjectListOpen" @close="isProjectListOpen = false" @open-project="handleOpenProject" />

src/components/layout/navbar/NavbarLogo.vue

@@ -4,7 +4,7 @@
       <div class="w-8 h-8 rounded-lg bg-gray-900 dark:bg-white flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform duration-200">
         <i class="fas fa-layer-group text-white dark:text-gray-900 text-sm"></i>
       </div>
-      <span class="font-bold text-xl tracking-tight text-gray-900 dark:text-white group-hover:opacity-80 transition-opacity"> Spritesheet generator </span>
+<!--      <span class="font-bold text-xl tracking-tight text-gray-900 dark:text-white group-hover:opacity-80 transition-opacity"> Spritesheet generator </span>-->
     </router-link>
   </div>
 </template>

src/components/layout/navbar/NavbarMobileMenu.vue

@@ -13,6 +13,25 @@
         <router-link to="/blog" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">Blog</router-link>
         <router-link to="/about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">About</router-link>
         <router-link to="/faq" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">FAQ</router-link>
+        <router-link to="/faq" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors" @click="$emit('close')">FAQ</router-link>
+        
+        <!-- Project Actions -->
+        <div class="border-t border-gray-200 dark:border-gray-800 my-2 pt-2 px-3">
+            <p class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-2">Project</p>
+            
+            <button v-if="isEditorActive" @click="$emit('open-save-modal'); $emit('close')" class="w-full text-left flex items-center gap-3 px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+              <i class="fas fa-save w-5"></i> Save project
+            </button>
+
+            <button @click="$emit('open-new-project-modal'); $emit('close')" class="w-full text-left flex items-center gap-3 px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+              <i class="fas fa-plus w-5"></i> New poject
+            </button>
+
+            <button @click="$emit('open-project-list'); $emit('close')" class="w-full text-left flex items-center gap-3 px-3 py-2 rounded-md text-base font-medium text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors">
+              <i class="fas fa-folder-open w-5"></i> My projects
+            </button>
+        </div>
+
         <div class="border-t border-gray-200 dark:border-gray-800 my-2 pt-2 flex gap-4 px-3">
           <a href="https://gitea.adhd.sh/root/spritesheet-generator" target="_blank" class="text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
             <i class="fab fa-github text-xl"></i>
@@ -37,10 +56,13 @@
 
 <script setup lang="ts">
   import { RouterLink } from 'vue-router';
+  import { useProjectManager } from '@/composables/useProjectManager';
+
+  const { isEditorActive } = useProjectManager();
 
   defineProps<{
     isOpen: boolean;
   }>();
 
-  defineEmits(['close', 'open-help']);
+  defineEmits(['close', 'open-help', 'open-save-modal', 'open-new-project-modal', 'open-project-list']);
 </script>

src/components/layout/navbar/NavbarProjectActions.vue

@@ -1,11 +1,13 @@
 <template>
-  <div class="flex items-center gap-3 mr-2">
-    <div class="flex items-center gap-2 group">
+  <div class="flex items-center gap-3">
+    <div v-if="isEditorActive" class="flex items-center gap-2 group">
       <div class="text-right hidden lg:block">
         <p class="text-[10px] uppercase tracking-wider font-bold text-gray-400 dark:text-gray-500 mb-[-2px]">Current Project</p>
-        <button @click="$emit('open-save-modal')" class="text-sm font-bold text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors truncate max-w-[160px]" title="Rename Project">
-          {{ projectStore.currentProject?.name || 'Untitled Project' }}
-        </button>
+        <Tooltip text="Rename project">
+          <button @click="$emit('open-save-modal')" class="text-sm font-bold text-gray-800 dark:text-gray-200 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors truncate max-w-[160px]">
+            {{ projectStore.currentProject?.name || 'Untitled project' }}
+          </button>
+        </Tooltip>
       </div>
 
       <!-- Mobile/Tablet simplified view -->
@@ -14,26 +16,38 @@
       </button>
     </div>
 
-    <div class="h-8 w-px bg-gray-200 dark:bg-gray-700 mx-1"></div>
+    <div v-if="isEditorActive" class="h-8 w-px bg-gray-200 dark:bg-gray-700 mx-1"></div>
 
     <div class="flex items-center gap-1">
-      <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>
+      <Tooltip v-if="isEditorActive" text="Save project">
+        <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">
+          <i class="fas fa-save"></i>
+        </button>
+      </Tooltip>
+      
+      <Tooltip text="New project">
+        <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">
+          <i class="fas fa-plus"></i>
+        </button>
+      </Tooltip>
+      
+      <Tooltip text="My projects">
+        <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">
+          <i class="fas fa-folder-open"></i>
+        </button>
+      </Tooltip>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
   import { useProjectStore } from '@/stores/useProjectStore';
+  import { useProjectManager } from '@/composables/useProjectManager';
+  import Tooltip from '@/components/utilities/Tooltip.vue';
 
   defineEmits(['open-save-modal', 'open-project-list', 'open-new-project-modal']);
 
   const projectStore = useProjectStore();
+  const { isEditorActive } = useProjectManager();
 </script>
+

src/components/project/NewProjectModal.vue

@@ -2,7 +2,7 @@
   <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>
+        <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>

src/components/project/ProjectList.vue

@@ -3,7 +3,7 @@
     <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-2xl w-full max-w-2xl p-6 relative border border-gray-200 dark:border-gray-700 max-h-[80vh] flex flex-col">
         <div class="flex items-center justify-between mb-6 shrink-0">
-          <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">My Projects</h2>
+          <h2 class="text-2xl font-bold text-gray-900 dark:text-gray-100">My projects</h2>
           <button @click="close" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
             <i class="fas fa-times"></i>
           </button>

src/components/project/SaveProjectModal.vue

@@ -2,7 +2,7 @@
   <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">Save Project</h2>
+        <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-gray-100">Save project</h2>
         <form @submit.prevent="handleSubmit">
           <div class="mb-4">
             <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Project Name</label>