backend/web/app.js

import { createApiClient } from "./api.js";

const { createApp, ref, reactive, onMounted } = Vue;

createApp({
  setup() {
    const apiBase = ref(localStorage.getItem("geo_api_base") || "http://localhost:8122");
    const state = reactive({
      publicKey: "",
      privateKey: "",
      accessToken: "",
      collections: [],
      newCollectionName: "",
      status: "Ready",
    });

    let client = createApiClient(apiBase.value);

    const rebuildClient = () => {
      client = createApiClient(apiBase.value);
      localStorage.setItem("geo_api_base", apiBase.value);
      state.status = `API base set to ${apiBase.value}`;
    };

    const ensureKeys = async () => {
      try {
        const keys = await client.ensureKeysInStorage();
        state.publicKey = keys.publicKey;
        state.privateKey = keys.privateKey;
        state.status = "Keys loaded from localStorage.";
      } catch (err) {
        state.status = err.message;
      }
    };

    const login = async () => {
      try {
        state.accessToken = await client.loginWithSignature(state.publicKey, state.privateKey);
        client.setAccessToken(state.accessToken);
        state.status = "Authenticated.";
      } catch (err) {
        state.status = err.message;
      }
    };

    const listCollections = async () => {
      try {
        client.setAccessToken(state.accessToken);
        const data = await client.listCollections();
        state.collections = data.collections || [];
      } catch (err) {
        state.status = err.message;
      }
    };

    const createCollection = async () => {
      try {
        client.setAccessToken(state.accessToken);
        await client.createCollection(state.newCollectionName);
        state.newCollectionName = "";
        await listCollections();
      } catch (err) {
        state.status = err.message;
      }
    };

    onMounted(async () => {
      await ensureKeys();
    });

    return {
      apiBase,
      state,
      rebuildClient,
      ensureKeys,
      login,
      listCollections,
      createCollection,
    };
  },
}).use(Vuetify.createVuetify()).mount("#app");