From b442eac69b92af0acd7bca5f44b7d7fdc94eb540 Mon Sep 17 00:00:00 2001
From: root <root@adhd.sh>
Date: Thu, 1 Jan 2026 19:31:57 +0100
Subject: [PATCH] [FEAT] Finish auth and project saving

---
 public/CHANGELOG.md                           |   4 +
 src/components/layout/Navbar.vue              |  22 +-
 src/components/layout/navbar/NavbarLogo.vue   |   2 +-
 .../layout/navbar/NavbarMobileMenu.vue        |  56 +++--
 .../layout/navbar/NavbarProjectActions.vue    |   5 +-
 src/components/project/ProjectList.vue        | 226 +++++++++++-------
 src/composables/useProjectManager.ts          |  17 ++
 src/stores/useProjectStore.ts                 |   8 +-
 src/views/HomeView.vue                        |  13 +-
 9 files changed, 223 insertions(+), 130 deletions(-)

diff --git a/public/CHANGELOG.md b/public/CHANGELOG.md
index 18d5e2f..d5859ea 100644
--- a/public/CHANGELOG.md
+++ b/public/CHANGELOG.md
@@ -1,5 +1,9 @@
 All notable changes to this project will be documented in this file.
 
+## [2.3.0] - 2026-01-01
+- Add authentication
+- You can now save projects and open them
+
 ## [2.2.0] - 2026-01-01
 - Add move sprite with arrow keys in preview
 - Add replace sprite to context menu
diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue
index 7a5f961..2be1952 100644
--- a/src/components/layout/Navbar.vue
+++ b/src/components/layout/Navbar.vue
@@ -16,19 +16,14 @@
         <div class="hidden md:flex items-center gap-5">
           <!-- Auth & Projects -->
           <template v-if="authStore.user">
-            <NavbarProjectActions 
-              @save-project="handleQuickSave" 
-              @open-save-modal="openSaveModal" 
-              @open-new-project-modal="isNewProjectModalOpen = true" 
-              @open-project-list="isProjectListOpen = true" 
-            />
+            <NavbarProjectActions @save-project="handleQuickSave" @open-save-modal="openSaveModal" @open-new-project-modal="isNewProjectModalOpen = true" @open-project-list="isProjectListOpen = true" />
 
             <div class="h-4 w-px bg-gray-200 dark:bg-gray-700"></div>
 
             <!-- User Dropdown -->
             <NavbarUserMenu @open-auth-modal="isAuthModalOpen = true" />
           </template>
-          
+
           <div v-else>
             <button @click="isAuthModalOpen = true" class="btn btn-primary btn-sm shadow-indigo-500/20 shadow-lg">Login / Register</button>
           </div>
@@ -49,15 +44,7 @@
     </div>
 
     <!-- Mobile Menu -->
-    <NavbarMobileMenu 
-      :is-open="isMobileMenuOpen" 
-      @close="isMobileMenuOpen = false" 
-      @open-help="$emit('open-help')"
-      @save-project="handleQuickSave"
-      @open-save-modal="openSaveModal"
-      @open-new-project-modal="isNewProjectModalOpen = true"
-      @open-project-list="isProjectListOpen = true"
-    />
+    <NavbarMobileMenu :is-open="isMobileMenuOpen" @close="isMobileMenuOpen = false" @open-help="$emit('open-help')" @save-project="handleQuickSave" @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" />
@@ -108,7 +95,7 @@
 
   const saveModalInitialName = computed(() => {
     if (saveMode.value === 'save-as') {
-      return (projectStore.currentProject?.name ? projectStore.currentProject.name + ' (copy)' : '');
+      return projectStore.currentProject?.name ? projectStore.currentProject.name + ' (copy)' : '';
     }
     return projectStore.currentProject?.name;
   });
@@ -133,7 +120,6 @@
     }
   };
 
-
   const handleCreateNewProject = (config: { width: number; height: number; columns: number; rows: number }) => {
     createProject(config);
   };
diff --git a/src/components/layout/navbar/NavbarLogo.vue b/src/components/layout/navbar/NavbarLogo.vue
index 520a79b..a5ef266 100644
--- a/src/components/layout/navbar/NavbarLogo.vue
+++ b/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>
diff --git a/src/components/layout/navbar/NavbarMobileMenu.vue b/src/components/layout/navbar/NavbarMobileMenu.vue
index 376e993..2635e69 100644
--- a/src/components/layout/navbar/NavbarMobileMenu.vue
+++ b/src/components/layout/navbar/NavbarMobileMenu.vue
@@ -14,26 +14,52 @@
         <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('save-project'); $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>
+          <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', 'save-as'); $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-clone w-5"></i> Save as...
-            </button>
+          <button
+            v-if="isEditorActive"
+            @click="
+              $emit('save-project');
+              $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 project
-            </button>
+          <button
+            v-if="isEditorActive"
+            @click="
+              $emit('open-save-modal', 'save-as');
+              $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-clone w-5"></i> Save as...
+          </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>
+          <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 project
+          </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">
diff --git a/src/components/layout/navbar/NavbarProjectActions.vue b/src/components/layout/navbar/NavbarProjectActions.vue
index 53d6b40..301cd03 100644
--- a/src/components/layout/navbar/NavbarProjectActions.vue
+++ b/src/components/layout/navbar/NavbarProjectActions.vue
@@ -30,13 +30,13 @@
           <i class="fas fa-clone"></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>
@@ -56,4 +56,3 @@
   const projectStore = useProjectStore();
   const { isEditorActive } = useProjectManager();
 </script>
-
diff --git a/src/components/project/ProjectList.vue b/src/components/project/ProjectList.vue
index 7bc953d..6d68d7c 100644
--- a/src/components/project/ProjectList.vue
+++ b/src/components/project/ProjectList.vue
@@ -1,22 +1,33 @@
 <template>
   <Teleport to="body">
     <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4" @click.self="close">
-      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-3xl overflow-hidden border border-gray-200 dark:border-gray-800 flex flex-col max-h-[85vh] animate-fade-in-up">
-        
+      <div class="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-4xl overflow-hidden border border-gray-200 dark:border-gray-800 flex flex-col h-[85vh] animate-fade-in-up">
         <!-- Header -->
-        <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between bg-gray-50/50 dark:bg-gray-800/20">
-          <div>
-            <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">My Projects</h2>
-            <p class="text-sm text-gray-500 dark:text-gray-400">Manage your saved sprite sheets</p>
+        <div class="px-6 py-5 border-b border-gray-100 dark:border-gray-800 flex flex-col gap-4 bg-gray-50/50 dark:bg-gray-800/20">
+          <div class="flex items-center justify-between">
+            <div>
+              <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100">My Projects</h2>
+              <p class="text-sm text-gray-500 dark:text-gray-400">Manage your saved sprite sheets</p>
+            </div>
+            <button @click="close" class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+              <i class="fas fa-times"></i>
+            </button>
+          </div>
+
+          <!-- Search Bar -->
+          <div class="relative">
+            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
+            <input
+              v-model="searchQuery"
+              type="text"
+              placeholder="Search projects..."
+              class="w-full pl-10 pr-4 py-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-indigo-500/50 focus:border-indigo-500 dark:focus:border-indigo-500 outline-none transition-all text-sm"
+            />
           </div>
-          <button @click="close" class="w-8 h-8 rounded-full flex items-center justify-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
-            <i class="fas fa-times"></i>
-          </button>
         </div>
 
         <!-- Content -->
         <div class="flex-1 overflow-y-auto custom-scrollbar p-6 bg-gray-50 dark:bg-black/20">
-          
           <!-- Loading State -->
           <div v-if="loading" class="flex flex-col items-center justify-center py-12">
             <div class="w-10 h-10 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mb-4"></div>
@@ -24,71 +35,88 @@
           </div>
 
           <!-- Empty State -->
-          <div v-else-if="projects.length === 0" class="flex flex-col items-center justify-center py-12 text-center">
+          <div v-else-if="projects.length === 0" class="flex flex-col items-center justify-center py-12 text-center h-full">
             <div class="w-20 h-20 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
               <i class="fas fa-folder-open text-3xl text-gray-400 dark:text-gray-500"></i>
             </div>
             <h3 class="text-lg font-bold text-gray-900 dark:text-gray-100 mb-2">No projects yet</h3>
             <p class="text-gray-500 dark:text-gray-400 max-w-xs mb-6">Create your first project or load an example to get started with Sprite Sheet Generator.</p>
-            
+
             <div class="flex gap-3">
-              <button @click="loadExample" class="btn btn-secondary flex items-center gap-2">
-                <i class="fas fa-lightbulb"></i> Load Example
-              </button>
+              <button @click="loadExample" class="btn btn-secondary flex items-center gap-2"><i class="fas fa-lightbulb"></i> Load Example</button>
             </div>
           </div>
 
-          <!-- Project Grid -->
-          <div v-else class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-            <div 
-              v-for="project in projects" 
-              :key="project.id" 
-              class="group bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-indigo-500 dark:hover:border-indigo-500 hover:shadow-lg dark:hover:shadow-indigo-500/10 transition-all cursor-pointer overflow-hidden flex flex-col h-[180px]"
+          <!-- No Search Results -->
+          <div v-else-if="filteredProjects.length === 0" class="flex flex-col items-center justify-center py-12 text-center">
+            <div class="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mb-4">
+              <i class="fas fa-search text-2xl text-gray-400 dark:text-gray-500"></i>
+            </div>
+            <h3 class="text-md font-bold text-gray-900 dark:text-gray-100 mb-1">No matches found</h3>
+            <p class="text-gray-500 dark:text-gray-400 text-sm">No projects match "{{ searchQuery }}"</p>
+          </div>
+
+          <!-- Project List -->
+          <div v-else class="flex flex-col gap-3">
+            <div
+              v-for="project in filteredProjects"
+              :key="project.id"
+              class="group bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-indigo-500 dark:hover:border-indigo-500 hover:shadow-md dark:hover:shadow-indigo-500/10 transition-all cursor-pointer overflow-hidden flex flex-col sm:flex-row h-auto sm:h-32"
               @click="selectProject(project)"
             >
-              <!-- Card Header -->
-              <div class="p-4 flex-1">
-                <div class="flex items-start justify-between mb-2">
-                  <div class="w-10 h-10 rounded-lg bg-indigo-50 dark:bg-indigo-900/30 flex items-center justify-center text-indigo-500 dark:text-indigo-400 font-bold text-lg shrink-0">
-                    {{ project.name.charAt(0).toUpperCase() }}
+              <!-- Left: Preview Stripe -->
+              <div class="w-full sm:w-48 bg-gray-100 dark:bg-black/30 flex items-center justify-center relative overflow-hidden border-b sm:border-b-0 sm:border-r border-gray-100 dark:border-gray-700/50 p-2">
+                <div class="absolute inset-0 bg-checkerboard opacity-50"></div>
+
+                <!-- Sprite Stack for Preview -->
+                <div v-if="getProjectSprites(project, 1).length > 0" class="relative z-10 flex -space-x-4">
+                  <div
+                    v-for="(sprite, idx) in getProjectSprites(project, 3)"
+                    :key="idx"
+                    class="w-16 h-16 rounded-lg bg-white dark:bg-gray-700 border-2 border-white dark:border-gray-600 shadow-lg flex items-center justify-center overflow-hidden transform transition-transform group-hover:scale-105 group-hover:first:-rotate-6 group-hover:last:rotate-6"
+                    :style="{ zIndex: 10 - idx }"
+                  >
+                    <img :src="sprite.base64" class="w-full h-full object-contain" style="image-rendering: pixelated" />
                   </div>
+                </div>
+
+                <!-- Fallback Icon -->
+                <div v-else class="relative z-10 w-16 h-16 rounded-lg bg-white dark:bg-gray-700 border-2 border-white dark:border-gray-600 shadow-lg flex items-center justify-center text-indigo-300 dark:text-indigo-400/50 font-bold text-2xl">
+                  {{ project.name.charAt(0).toUpperCase() }}
+                </div>
+              </div>
+
+              <!-- content -->
+              <div class="flex-1 p-4 flex flex-col justify-center min-w-0">
+                <div class="flex items-start justify-between">
+                  <div>
+                    <h3 class="font-bold text-gray-900 dark:text-gray-100 truncate text-lg mb-1 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors">{{ project.name }}</h3>
+                    <div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
+                      <span class="flex items-center gap-1"><i class="fas fa-layer-group opacity-70"></i> {{ project.data?.layers?.length || 0 }} layers</span>
+                      <span class="flex items-center gap-1"><i class="fas fa-border-all opacity-70"></i> {{ project.data?.columns }} columns</span>
+                      <span class="flex items-center gap-1"><i class="fas fa-images opacity-70"></i> {{ getSpriteCount(project) }} sprites</span>
+                    </div>
+                  </div>
+
                   <button @click.stop="deleteProject(project.id)" class="opacity-0 group-hover:opacity-100 text-gray-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 p-2 rounded-lg transition-all" title="Delete Project">
                     <i class="fas fa-trash"></i>
                   </button>
                 </div>
-                
-                <h3 class="font-bold text-gray-900 dark:text-gray-100 truncate mb-1">{{ project.name }}</h3>
-                <p class="text-xs text-gray-500 dark:text-gray-400 line-clamp-2">
-                  {{ project.data?.layers?.length || 0 }} layers • {{ project.data?.columns }}x{{ project.data?.columns }} grid
-                </p>
-              </div>
 
-              <!-- Card Footer -->
-              <div class="px-4 py-3 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-100 dark:border-gray-700/50 flex items-center justify-between text-xs">
-                <span class="text-gray-500 dark:text-gray-400 font-medium group-hover:text-indigo-500 transition-colors">
-                  {{ formatDate(project.updated) }}
-                </span>
-                <span class="text-indigo-600 dark:text-indigo-400 font-bold opacity-0 group-hover:opacity-100 transform translate-x-2 group-hover:translate-x-0 transition-all">
-                  Open <i class="fas fa-arrow-right ml-1"></i>
-                </span>
+                <div class="mt-auto pt-3 flex items-center justify-between">
+                  <span class="text-xs text-gray-400"> Updated {{ formatDate(project.updated) }} </span>
+                  <span class="text-xs font-bold text-indigo-600 dark:text-indigo-400 flex items-center gap-1 transform translate-x-2 opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all"> Open Project <i class="fas fa-arrow-right"></i> </span>
+                </div>
               </div>
             </div>
-            
-             <!-- Load Example Card (Visible even if lists are present, as a small helper at the end?) -->
-             <!-- OR keep it separate. Let's keep it simple for now and rely on empty state for the big button, 
-                  but maybe add a small text link at the bottom or top? -->
           </div>
         </div>
-        
+
         <!-- Footer -->
         <div class="px-6 py-4 border-t border-gray-100 dark:border-gray-800 flex justify-between items-center bg-white dark:bg-gray-900">
-          <p class="text-xs text-gray-400" v-if="projects.length > 0">
-            Showing {{ projects.length }} project{{ projects.length !== 1 ? 's' : '' }}
-          </p>
+          <p class="text-xs text-gray-400" v-if="projects.length > 0">Showing {{ filteredProjects.length }} of {{ projects.length }} project{{ projects.length !== 1 ? 's' : '' }}</p>
           <div class="flex gap-2 ml-auto">
-             <button v-if="projects.length > 0" @click="loadExample" class="text-xs font-medium text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400 px-3 py-2">
-                Load Example
-             </button>
+            <button v-if="projects.length > 0" @click="loadExample" class="text-xs font-medium text-gray-500 hover:text-indigo-600 dark:hover:text-indigo-400 px-3 py-2">Load Example</button>
             <button @click="close" class="btn btn-secondary text-sm">Close</button>
           </div>
         </div>
@@ -98,7 +126,7 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, toRefs, watch } from 'vue';
+  import { onMounted, toRefs, watch, ref, computed } from 'vue';
   import { useProjectStore, type Project } from '@/stores/useProjectStore';
   import { useProjectManager } from '@/composables/useProjectManager';
 
@@ -115,11 +143,20 @@
   const { projects, isLoading: loading } = toRefs(projectStore);
   const { createProject, loadProjectData } = useProjectManager();
 
+  const searchQuery = ref('');
+
+  const filteredProjects = computed(() => {
+    if (!searchQuery.value) return projects.value;
+    const query = searchQuery.value.toLowerCase();
+    return projects.value.filter(p => p.name.toLowerCase().includes(query));
+  });
+
   watch(
     () => props.isOpen,
     isOpen => {
       if (isOpen) {
         projectStore.fetchProjects();
+        searchQuery.value = ''; // Reset search on open
       }
     }
   );
@@ -145,50 +182,69 @@
     return new Date(dateString).toLocaleDateString(undefined, {
       month: 'short',
       day: 'numeric',
-      year: 'numeric'
+      year: 'numeric',
     });
   };
 
   const loadExample = async () => {
-    // 1. Create a clean base project (this sets the grid size)
     createProject({ width: 32, height: 32, columns: 8, rows: 8 });
-    
-    // 2. Load some dummy data if we want more than just an empty grid
-    // For now, let's just make sure it creates a fresh state and closes the modal
-    // Ideally we would inject some sprites here but since we don't have easy access to sprite IDs without looking them up
-    // We will just init an empty 8x8 project called "Example Project" if helpful, 
-    // or strictly Unsaved (createProject does that).
-    
-    // If we want to populate it:
-    /*
-    const exampleData = {
-        layers: [
-            { id: 'l1', name: 'Body', visible: true, sprites: [] }, // etc
-        ],
-        // ...
-    };
-    await loadProjectData(exampleData);
-    */
-    
-    // For now, an empty 8x8 grid is a good "Example" starting point compared to nothing.
-    
     close();
   };
+
+  const getProjectSprites = (project: Project, limit: number) => {
+    const sprites: any[] = [];
+    if (!project.data || !project.data.layers) return sprites;
+
+    // Iterate through layers to find sprites
+    for (const layer of project.data.layers as any[]) {
+      if (layer.sprites && layer.sprites.length > 0) {
+        for (const sprite of layer.sprites) {
+          if (sprites.length < limit) {
+            sprites.push(sprite);
+          } else {
+            return sprites;
+          }
+        }
+      }
+    }
+    return sprites;
+  };
+
+  const getSpriteCount = (project: Project) => {
+    if (!project.data || !project.data.layers) return 0;
+    return (project.data.layers as any[]).reduce((acc: number, layer: any) => acc + (layer.sprites?.length || 0), 0);
+  };
 </script>
 
 <style scoped>
-.animate-fade-in-up {
-  animation: fadeInUp 0.3s ease-out;
-}
+  .bg-checkerboard {
+    background-color: #fff;
+    background-image: linear-gradient(45deg, #e5e5e5 25%, transparent 25%), linear-gradient(-45deg, #e5e5e5 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e5e5 75%), linear-gradient(-45deg, transparent 75%, #e5e5e5 75%);
+    background-size: 8px 8px;
+    background-position:
+      0 0,
+      0 4px,
+      4px -4px,
+      -4px 0px;
+  }
 
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
+  .dark .bg-checkerboard {
+    background-color: #374151;
+    background-image: linear-gradient(45deg, #4b5563 25%, transparent 25%), linear-gradient(-45deg, #4b5563 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #4b5563 75%), linear-gradient(-45deg, transparent 75%, #4b5563 75%);
   }
-  to {
-    opacity: 1;
-    transform: translateY(0);
+
+  .animate-fade-in-up {
+    animation: fadeInUp 0.3s ease-out;
+  }
+
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translateY(20px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
-}
 </style>
diff --git a/src/composables/useProjectManager.ts b/src/composables/useProjectManager.ts
index dbb1151..f2a6721 100644
--- a/src/composables/useProjectManager.ts
+++ b/src/composables/useProjectManager.ts
@@ -99,6 +99,22 @@ export const useProjectManager = () => {
     isEditorActive.value = false;
   };
 
+  const closeProject = () => {
+    // Reset Layers
+    const newLayer = createEmptyLayer('Base');
+    layers.value = [newLayer];
+    activeLayerId.value = newLayer.id;
+
+    // Reset columns
+    columns.value = 4;
+
+    // Reset Project Store
+    projectStore.currentProject = null;
+
+    // Close Editor
+    isEditorActive.value = false;
+  };
+
   return {
     isEditorActive,
     createProject,
@@ -106,6 +122,7 @@ export const useProjectManager = () => {
     saveProject,
     saveAsProject,
     closeEditor,
+    closeProject,
     loadProjectData,
   };
 };
diff --git a/src/stores/useProjectStore.ts b/src/stores/useProjectStore.ts
index 1155e9e..bcfa13f 100644
--- a/src/stores/useProjectStore.ts
+++ b/src/stores/useProjectStore.ts
@@ -70,11 +70,11 @@ export const useProjectStore = defineStore('project', () => {
         name,
         data,
       });
-      currentProject.value = { 
-        ...currentProject.value!, 
+      currentProject.value = {
+        ...currentProject.value!,
         name: record.name,
-        data: record.data, 
-        updated: record.updated 
+        data: record.data,
+        updated: record.updated,
       };
       await fetchProjects();
     } catch (error) {
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 0dd842d..c361fbf 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -128,7 +128,12 @@
           <!-- Sidebar Header -->
           <div class="px-5 py-4 border-b border-gray-200/50 dark:border-gray-700/50 flex items-center justify-between shrink-0 bg-gray-50/50 dark:bg-gray-800/10">
             <h2 class="text-sm font-bold uppercase tracking-wider text-gray-500 dark:text-gray-400">Editor Tools</h2>
-            <button @click="openFileDialog" class="btn btn-primary btn-sm shadow-indigo-500/20" title="Add more sprites"><i class="fas fa-plus mr-1"></i> Add</button>
+            <div class="flex items-center gap-2">
+              <button @click="closeProject" class="btn btn-secondary btn-sm w-8 h-8 p-0 justify-center border-gray-200 dark:border-gray-700 hover:bg-red-50 hover:text-red-500 dark:hover:bg-red-900/20 dark:hover:text-red-400 dark:text-gray-400" title="Close Project">
+                <i class="fas fa-times"></i>
+              </button>
+              <button @click="openFileDialog" class="btn btn-primary btn-sm shadow-indigo-500/20" title="Add more sprites"><i class="fas fa-plus mr-1"></i> Add</button>
+            </div>
           </div>
 
           <!-- Scrollable Content -->
@@ -317,14 +322,14 @@
           </div>
 
           <!-- Sidebar Footer (Export) -->
-          <div class="p-4 border-t border-gray-200/50 dark:border-gray-700/50 bg-gray-50/50 dark:bg-gray-800/10 space-y-3 shrink-0">
+          <div class="p-4 border-t border-gray-200/50 dark:border-gray-700/50 bg-gray-50/50 dark:bg-gray-800/10 space-y-2 shrink-0">
             <div class="grid grid-cols-2 gap-2">
               <button @click="downloadSpritesheet" class="btn btn-secondary btn-sm justify-start" title="Download PNG"><i class="fas fa-image text-indigo-500 w-4"></i> PNG</button>
               <button @click="exportSpritesheetJSON" class="btn btn-secondary btn-sm justify-start" title="Download JSON"><i class="fas fa-code text-indigo-500 w-4"></i> JSON</button>
               <button @click="openGifFpsModal" class="btn btn-secondary btn-sm justify-start" title="Export GIF"><i class="fas fa-film text-pink-500 w-4"></i> GIF</button>
               <button @click="downloadAsZip" class="btn btn-secondary btn-sm justify-start" title="Download ZIP"><i class="fas fa-file-archive text-yellow-500 w-4"></i> ZIP</button>
             </div>
-            <button @click="openShareModal" class="btn btn-secondary w-full justify-start"><i class="fas fa-share-alt mr-2 text-indigo-500"></i> Share Project</button>
+            <button @click="openShareModal" class="btn btn-secondary w-full justify-start"><i class="fas fa-share-alt mr-2 text-indigo-500"></i> Share project</button>
           </div>
         </div>
       </aside>
@@ -462,7 +467,7 @@
 
   useHomeViewSEO();
 
-  const { isEditorActive } = useProjectManager();
+  const { isEditorActive, closeProject } = useProjectManager();
   const settingsStore = useSettingsStore();
   const { layers, visibleLayers, activeLayer, activeLayerId, columns, updateSpritePosition, updateSpriteInLayer, updateSpriteCell, removeSprite, removeSprites, replaceSprite, addSprite, processImageFiles, alignSprites, addLayer, removeLayer, moveLayer, rotateSprite, flipSprite, copySpriteToFrame } =
     useLayers();