1 files changed, 2 insertions, 41 deletions
diff --git a/ui/src/components/InstancesView.svelte b/ui/src/components/InstancesView.svelte
index a4881e6..e42f813 100644
--- a/ui/src/components/InstancesView.svelte
+++ b/ui/src/components/InstancesView.svelte
@@ -3,6 +3,7 @@
   import { instancesState } from "../stores/instances.svelte";
   import { Plus, Trash2, Edit2, Copy, Check, X } from "lucide-svelte";
   import type { Instance } from "../types";
+  import InstanceCreationModal from "./InstanceCreationModal.svelte";
 
   let showCreateModal = $state(false);
   let showEditModal = $state(false);
@@ -17,7 +18,6 @@
   });
 
   function handleCreate() {
-    newInstanceName = "";
     showCreateModal = true;
   }
 
@@ -38,13 +38,6 @@
     showDuplicateModal = true;
   }
 
-  async function confirmCreate() {
-    if (!newInstanceName.trim()) return;
-    await instancesState.createInstance(newInstanceName.trim());
-    showCreateModal = false;
-    newInstanceName = "";
-  }
-
   async function confirmEdit() {
     if (!selectedInstance || !newInstanceName.trim()) return;
     await instancesState.updateInstance({
@@ -195,39 +188,7 @@
 </div>
 
 <!-- Create Modal -->
-{#if showCreateModal}
-  <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
-    <div class="bg-white dark:bg-gray-800 rounded-lg p-6 w-96">
-      <h2 class="text-xl font-bold mb-4 text-gray-900 dark:text-white">Create Instance</h2>
-      <input
-        type="text"
-        bind:value={newInstanceName}
-        placeholder="Instance name"
-        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white mb-4"
-        onkeydown={(e) => e.key === "Enter" && confirmCreate()}
-        autofocus
-      />
-      <div class="flex gap-2 justify-end">
-        <button
-          onclick={() => {
-            showCreateModal = false;
-            newInstanceName = "";
-          }}
-          class="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-white rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-        >
-          Cancel
-        </button>
-        <button
-          onclick={confirmCreate}
-          disabled={!newInstanceName.trim()}
-          class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
-        >
-          Create
-        </button>
-      </div>
-    </div>
-  </div>
-{/if}
+<InstanceCreationModal isOpen={showCreateModal} onClose={() => (showCreateModal = false)} />
 
 <!-- Edit Modal -->
 {#if showEditModal && selectedInstance}