[FEAT] Auth. and user projects

src/components/project/SaveProjectModal.vue

@@ -0,0 +1,64 @@
+<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">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>
+          <input
+            v-model="projectName"
+            type="text"
+            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"
+            placeholder="My Awesome Spritesheet"
+            ref="inputRef"
+          />
+        </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="!projectName.trim()">Save</button>
+        </div>
+      </form>
+    </div>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, nextTick } from 'vue';
+
+const props = defineProps<{
+  isOpen: boolean;
+  initialName?: string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+  (e: 'save', name: string): void;
+}>();
+
+const projectName = ref('');
+const inputRef = ref<HTMLInputElement | null>(null);
+
+watch(
+  () => props.isOpen,
+  (isOpen) => {
+    if (isOpen) {
+      projectName.value = props.initialName || '';
+      nextTick(() => {
+        inputRef.value?.focus();
+        inputRef.value?.select();
+      });
+    }
+  }
+);
+
+const close = () => emit('close');
+const handleSubmit = () => {
+    if (projectName.value.trim()) {
+        emit('save', projectName.value);
+        close();
+    }
+};
+</script>