Demo app, collections/features CRUD, QR codes, docs

Demo app (web/):
- Collections: select, rename, remove (x button per row), delete
- Features: add point (lon/lat validation), remove, list in selected collection
- QR codes for pk (private) and pb (public) keys
- Restore public key from private key
- 409 Conflict handled for already-registered login
- Title: Momswap Geo Backend Use-Cases Test

Backend:
- PATCH /v1/collections/{id} for rename
- DELETE /v1/collections/{id}
- Clearer lon/lat validation errors (-180..180, -90..90)

Client:
- updateCollection, deleteCollection, derivePublicKey

Docs:
- docs/frontend-development.md (demo app, local dev)
- README links to all docs

Made-with: Cursor

web/app.js

@@ -1,6 +1,7 @@
 import { createApiClient } from "./api.js";
+import { toDataURL } from "./qr.js";
 
-const { createApp, ref, reactive, onMounted } = Vue;
+const { createApp, ref, reactive, onMounted, watch } = Vue;
 
 createApp({
   setup() {
@@ -11,7 +12,16 @@ createApp({
       accessToken: "",
       collections: [],
       newCollectionName: "",
+      selectedCollectionId: "",
+      editingCollectionName: "",
+      featuresByCollection: {},
+      newFeatureLon: "",
+      newFeatureLat: "",
+      newFeatureName: "",
       status: "Ready",
+      qrPk: "",
+      qrPb: "",
+      showPrivateQR: false,
     });
 
     let client = createApiClient(apiBase.value);
@@ -22,12 +32,48 @@ createApp({
       state.status = `API base set to ${apiBase.value}`;
     };
 
+    const refreshQRCodes = async () => {
+      if (!state.publicKey) {
+        state.qrPk = "";
+        state.qrPb = "";
+        return;
+      }
+      try {
+        state.qrPb = await toDataURL(state.publicKey);
+        if (state.privateKey) {
+          state.qrPk = await toDataURL(state.privateKey, { dark: "#7f1d1d" });
+        } else {
+          state.qrPb = "";
+        }
+      } catch (err) {
+        state.qrPk = "";
+        state.qrPb = "";
+      }
+    };
+
     const ensureKeys = async () => {
       try {
         const keys = await client.ensureKeysInStorage();
         state.publicKey = keys.publicKey;
         state.privateKey = keys.privateKey;
         state.status = "Keys loaded from localStorage.";
+        await refreshQRCodes();
+      } catch (err) {
+        state.status = err.message;
+      }
+    };
+
+    const restorePublicKeyFromPrivate = async () => {
+      if (!state.privateKey?.trim()) {
+        state.status = "Enter private key (pk) first.";
+        return;
+      }
+      try {
+        const pb = await client.derivePublicKey(state.privateKey.trim());
+        state.publicKey = pb;
+        client.importKeys({ publicKey: pb, privateKey: state.privateKey.trim() });
+        await refreshQRCodes();
+        state.status = "Public key (pb) restored from private key (pk).";
       } catch (err) {
         state.status = err.message;
       }
@@ -47,13 +93,15 @@ createApp({
         try {
           await client.registerBySigningServiceKey(state.publicKey, state.privateKey);
         } catch (err) {
-          if (!err.message.includes("already registered") && !err.message.includes("not configured") && !err.message.includes("ADMIN_PUBLIC_KEY")) {
-            throw err;
-          }
+          const msg = (err?.message || "").toLowerCase();
+          const ignore = msg.includes("already registered") || msg.includes("not configured") ||
+            msg.includes("admin_public_key") || msg.includes("409") || msg.includes("conflict");
+          if (!ignore) throw err;
           // Proceed to login: already registered or registration disabled (invitation flow)
         }
         state.accessToken = await client.loginWithSignature(state.publicKey, state.privateKey);
         client.setAccessToken(state.accessToken);
+        await listCollections();
         state.status = "Authenticated.";
       } catch (err) {
         state.status = err.message;
@@ -81,19 +129,152 @@ createApp({
       }
     };
 
+    const removeCollection = async (collectionId) => {
+      try {
+        client.setAccessToken(state.accessToken);
+        await client.deleteCollection(collectionId);
+        if (state.selectedCollectionId === collectionId) {
+          state.selectedCollectionId = "";
+        }
+        delete state.featuresByCollection[collectionId];
+        await listCollections();
+      } catch (err) {
+        state.status = err.message;
+      }
+    };
+
+    const listFeatures = async (collectionId) => {
+      if (!collectionId) return;
+      try {
+        client.setAccessToken(state.accessToken);
+        const data = await client.listFeatures(collectionId);
+        state.featuresByCollection[collectionId] = data.features || [];
+      } catch (err) {
+        state.status = err.message;
+      }
+    };
+
+    const createFeature = async (collectionId) => {
+      if (!collectionId) return;
+      const lon = parseFloat(state.newFeatureLon);
+      const lat = parseFloat(state.newFeatureLat);
+      if (isNaN(lon) || isNaN(lat)) {
+        state.status = "Enter valid lon/lat numbers.";
+        return;
+      }
+      if (lon < -180 || lon > 180) {
+        state.status = "Longitude must be -180 to 180.";
+        return;
+      }
+      if (lat < -90 || lat > 90) {
+        state.status = "Latitude must be -90 to 90.";
+        return;
+      }
+      try {
+        client.setAccessToken(state.accessToken);
+        await client.createPointFeature(collectionId, lon, lat, {
+          name: state.newFeatureName || "Point",
+        });
+        state.newFeatureLon = "";
+        state.newFeatureLat = "";
+        state.newFeatureName = "";
+        await listFeatures(collectionId);
+      } catch (err) {
+        state.status = err.message;
+      }
+    };
+
+    const removeFeature = async (collectionId, featureId) => {
+      try {
+        client.setAccessToken(state.accessToken);
+        await client.deleteFeature(featureId);
+        await listFeatures(collectionId);
+      } catch (err) {
+        state.status = err.message;
+      }
+    };
+
+    const featuresFor = (collectionId) => state.featuresByCollection[collectionId] ?? [];
+
+    const formatFeature = (f) => {
+      const coords = f.geometry?.coordinates;
+      const lon = coords?.[0] ?? "—";
+      const lat = coords?.[1] ?? "—";
+      const name = f.properties?.name ?? f.id ?? "—";
+      return { id: f.id, name, lon, lat };
+    };
+
+    watch(
+      () => [state.publicKey, state.privateKey],
+      () => refreshQRCodes(),
+      { immediate: false }
+    );
+
+    watch(
+      () => state.selectedCollectionId,
+      (id) => {
+        if (id) listFeatures(id);
+      }
+    );
+
+    const selectCollection = (id) => {
+      state.selectedCollectionId = id;
+      const c = state.collections.find((x) => x.id === id);
+      state.editingCollectionName = c ? c.name : "";
+    };
+
+    const selectedCollection = () =>
+      state.collections.find((c) => c.id === state.selectedCollectionId);
+
+    const updateCollectionName = async (collectionId, newName) => {
+      if (!newName?.trim()) return;
+      try {
+        client.setAccessToken(state.accessToken);
+        const updated = await client.updateCollection(collectionId, newName.trim());
+        const idx = state.collections.findIndex((c) => c.id === collectionId);
+        if (idx >= 0) state.collections[idx] = updated;
+        state.editingCollectionName = updated.name;
+      } catch (err) {
+        state.status = err.message;
+      }
+    };
+
+    const onCollectionNameBlur = () => {
+      const c = selectedCollection();
+      if (c && state.editingCollectionName !== c.name) {
+        updateCollectionName(c.id, state.editingCollectionName);
+      }
+    };
+
     onMounted(async () => {
       await ensureKeys();
     });
 
+    const togglePrivateQR = () => {
+      state.showPrivateQR = !state.showPrivateQR;
+    };
+
     return {
       apiBase,
       state,
       rebuildClient,
       ensureKeys,
+      restorePublicKeyFromPrivate,
       register,
       login,
       listCollections,
       createCollection,
+      removeCollection,
+      listFeatures,
+      selectCollection,
+      selectedCollection,
+      updateCollectionName,
+      onCollectionNameBlur,
+      createFeature,
+      removeFeature,
+      formatFeature,
+      featuresFor,
+      togglePrivateQR,
     };
   },
 }).use(Vuetify.createVuetify()).mount("#app");