tons of feature

app/page.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Map from "@/components/Map";
+import Editor from "@/components/Editor";
+import {
+    FeatureCollection,
+    useEditorState,
+} from "@/lib/useEditorState";
+
+const EMPTY_FC: FeatureCollection = { type: "FeatureCollection", features: [] };
+
+export default function Page() {
+    const [mode, setMode] = useState<"idle" | "draw" | "select" | "add-point">("idle");
+    const [initialData, setInitialData] = useState<FeatureCollection>(EMPTY_FC);
+    const [isSaving, setIsSaving] = useState(false);
+
+    const editor = useEditorState(initialData);
+
+    useEffect(() => {
+        async function loadInitial() {
+            try {
+                const params = new URLSearchParams({
+                    minLng: "-180",
+                    minLat: "-90",
+                    maxLng: "180",
+                    maxLat: "90",
+                });
+
+                const res = await fetch(`http://localhost:3000/geometries?${params.toString()}`);
+                if (!res.ok) return;
+                const data = await res.json();
+                setInitialData(data);
+            } catch (err) {
+                console.error("Load initial data failed", err);
+            }
+        }
+
+        loadInitial();
+    }, []);
+
+    const handleSave = async () => {
+        const payload = editor.buildPayload();
+        if (!payload.length) return;
+        setIsSaving(true);
+        try {
+            const res = await fetch("http://localhost:3000/geometries/batch", {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ changes: payload }),
+            });
+            if (!res.ok) {
+                const text = await res.text();
+                console.error("Save failed", text);
+                return;
+            }
+            editor.clearChanges();
+        } catch (err) {
+            console.error("Save error", err);
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    return (
+        <div style={{ display: "flex" }}>
+            <Editor
+                mode={mode}
+                setMode={setMode}
+                onUndo={editor.undo}
+                onSave={handleSave}
+                isSaving={isSaving}
+                changesCount={editor.changeCount}
+                undoStack={editor.undoStack}
+            />
+
+            <Map
+                mode={mode}
+                draft={editor.draft}
+                onCreateFeature={editor.createFeature}
+                onDeleteFeature={editor.deleteFeature}
+                onUpdateFeature={editor.updateFeature}
+            />
+        </div>
+    );
+}