[FEAT] Re-organize files

src/composables/useProjectManager.ts

@@ -1,16 +1,15 @@
-import { ref, toRef, watch } from 'vue';
-import { useLayers, createEmptyLayer, getMaxDimensionsAcrossLayers } from '@/composables/useLayers';
+import { useRouter } from 'vue-router';
+import { toRef } from 'vue';
+import { useLayers, createEmptyLayer } from '@/composables/useLayers';
 import { useSettingsStore } from '@/stores/useSettingsStore';
 import { useProjectStore, type Project } from '@/stores/useProjectStore';
 import { useExportLayers } from '@/composables/useExportLayers';
 
-// Global state for editor visibility
-const isEditorActive = ref(false);
-
 export const useProjectManager = () => {
+  const router = useRouter();
   const settingsStore = useSettingsStore();
   const projectStore = useProjectStore();
-  const { layers, columns, activeLayerId, visibleLayers } = useLayers();
+  const { layers, columns, activeLayerId } = useLayers();
 
   const { generateProjectJSON, loadProjectData } = useExportLayers(
     layers,
@@ -23,15 +22,6 @@ export const useProjectManager = () => {
     toRef(settingsStore, 'manualCellHeight')
   );
 
-  // Watch for sprites to automatically open editor (legacy behavior support)
-  watch(
-    () => layers.value.some(l => l.sprites.length > 0),
-    hasSprites => {
-      if (hasSprites) isEditorActive.value = true;
-    },
-    { immediate: true }
-  );
-
   const createProject = (config: { width: number; height: number; columns: number; rows: number }) => {
     // 1. Reset Settings
     settingsStore.setManualCellSize(config.width, config.height);
@@ -48,8 +38,8 @@ export const useProjectManager = () => {
     // 4. Reset Project Store
     projectStore.currentProject = null;
 
-    // 5. Force Editor Active
-    isEditorActive.value = true;
+    // 5. Navigate to Editor
+    router.push('/editor');
   };
 
   const openProject = async (project: Project) => {
@@ -58,7 +48,7 @@ export const useProjectManager = () => {
         await loadProjectData(project.data);
       }
       projectStore.currentProject = project;
-      isEditorActive.value = true;
+      router.push({ name: 'editor', params: { id: project.id } });
     } catch (e) {
       console.error('Failed to open project', e);
       alert('Failed to open project data');
@@ -75,6 +65,10 @@ export const useProjectManager = () => {
       } else {
         // Create new project if none exists
         await projectStore.createProject(name, data);
+        // After creating, we should update route to include ID so subsequent saves update it
+        if (projectStore.currentProject) {
+          router.replace({ name: 'editor', params: { id: projectStore.currentProject.id } });
+        }
       }
     } catch (e) {
       console.error(e);
@@ -88,6 +82,10 @@ export const useProjectManager = () => {
       const data = await generateProjectJSON();
       // Always create new
       await projectStore.createProject(name, data);
+      // Navigate to new project
+      if (projectStore.currentProject) {
+        router.push({ name: 'editor', params: { id: projectStore.currentProject.id } });
+      }
     } catch (e) {
       console.error(e);
       alert('Failed to save project as new');
@@ -95,10 +93,6 @@ export const useProjectManager = () => {
     }
   };
 
-  const closeEditor = () => {
-    isEditorActive.value = false;
-  };
-
   const closeProject = () => {
     // Reset Layers
     const newLayer = createEmptyLayer('Base');
@@ -111,12 +105,15 @@ export const useProjectManager = () => {
     // Reset Project Store
     projectStore.currentProject = null;
 
-    // Close Editor
-    isEditorActive.value = false;
+    // Navigate Home
+    router.push('/');
+  };
+
+  const closeEditor = () => {
+    closeProject();
   };
 
   return {
-    isEditorActive,
     createProject,
     openProject,
     saveProject,