Refactor project structure

webui/src/App.tsx

@@ -0,0 +1,61 @@
+import { useState } from "react";
+import Header from "@/components/Header";
+import InstanceList from "@/components/InstanceList";
+import InstanceModal from "@/components/InstanceModal";
+import { CreateInstanceOptions, Instance } from "@/types/instance";
+import { useInstances } from "@/contexts/InstancesContext";
+import SystemInfoModal from "./components/SystemInfoModal";
+
+function App() {
+  const [isInstanceModalOpen, setIsInstanceModalOpen] = useState(false);
+  const [isSystemInfoModalOpen, setIsSystemInfoModalOpen] = useState(false);
+  const [editingInstance, setEditingInstance] = useState<Instance | undefined>(
+    undefined
+  );
+  const { createInstance, updateInstance } = useInstances();
+
+  const handleCreateInstance = () => {
+    setEditingInstance(undefined);
+    setIsInstanceModalOpen(true);
+  };
+
+  const handleEditInstance = (instance: Instance) => {
+    setEditingInstance(instance);
+    setIsInstanceModalOpen(true);
+  };
+
+  const handleSaveInstance = (name: string, options: CreateInstanceOptions) => {
+    if (editingInstance) {
+      updateInstance(editingInstance.name, options);
+    } else {
+      createInstance(name, options);
+    }
+  };
+
+  const handleShowSystemInfo = () => {
+    setIsSystemInfoModalOpen(true);
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-50">
+      <Header onCreateInstance={handleCreateInstance} onShowSystemInfo={handleShowSystemInfo} />
+      <main className="container mx-auto max-w-4xl px-4 py-8">
+        <InstanceList editInstance={handleEditInstance} />
+      </main>
+
+      <InstanceModal
+        open={isInstanceModalOpen}
+        onOpenChange={setIsInstanceModalOpen}
+        onSave={handleSaveInstance}
+        instance={editingInstance}
+      />
+
+      <SystemInfoModal
+        open={isSystemInfoModalOpen}
+        onOpenChange={setIsSystemInfoModalOpen}
+      />
+    </div>
+  );
+}
+
+export default App;