chore: track loaded zones in ui

src/ModManUi/src/App.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import { webviewBinds } from "./native";
+import { webviewBinds } from "@/native";
+import { useZoneStore } from "@/stores/ZoneStore";
 
+const zoneStore = useZoneStore();
 const lastPath = ref("");
 const loadingFastFile = ref(false);
 
@@ -11,12 +13,19 @@ async function onOpenFastfileClick() {
 
   loadingFastFile.value = true;
 
-  webviewBinds.loadFastFile(lastPath.value)
-  .catch((e: string) => {
-    console.error("Failed to load fastfile:", e);
-  })
-  .finally(() => {
-    loadingFastFile.value = false;
+  webviewBinds
+    .loadFastFile(lastPath.value)
+    .catch((e: string) => {
+      console.error("Failed to load fastfile:", e);
+    })
+    .finally(() => {
+      loadingFastFile.value = false;
+    });
+}
+
+function onUnloadClicked(zoneName: string) {
+  webviewBinds.unloadZone(zoneName).catch((e: string) => {
+    console.error("Failed to unload zone:", e);
   });
 }
 </script>
@@ -28,9 +37,15 @@ async function onOpenFastfileClick() {
 
     <p>
       <button @click="onOpenFastfileClick">Open fastfile</button>
-      <span>The last path: {{ lastPath }}</span>
       <span>Loading: {{ loadingFastFile }}</span>
     </p>
+    <div>
+      <h3>Loaded zones:</h3>
+      <div v-for="zone in zoneStore.loadedZones" :key="zone">
+        <span>{{ zone }}</span>
+        <button @click="onUnloadClicked(zone)">Unload</button>
+      </div>
+    </div>
   </main>
 </template>
 

src/ModManUi/src/native/FastFileBinds.ts

@@ -1,3 +1,18 @@
+export interface ZoneLoadedDto {
+  zoneName: string;
+  filePath: string;
+}
+
+export interface ZoneUnloadedDto {
+  zoneName: string;
+}
+
 export interface FastFileBinds {
   loadFastFile(path: string): Promise<void>;
+  unloadZone(zoneName: string): Promise<void>;
+}
+
+export interface FastFileEventMap {
+  zoneLoaded: ZoneLoadedDto;
+  zoneUnloaded: ZoneUnloadedDto;
 }

src/ModManUi/src/native/index.ts

@@ -1,12 +1,9 @@
 import type { DialogBinds } from "./DialogBinds";
-import type { FastFileBinds } from "./FastFileBinds";
-
+import type { FastFileBinds, FastFileEventMap } from "./FastFileBinds";
 
 export type NativeMethods = DialogBinds & FastFileBinds;
 
-interface NativeEventMap {
-  
-}
+type NativeEventMap = FastFileEventMap;
 
 type WebViewExtensions = {
   webviewBinds: NativeMethods;

src/ModManUi/src/stores/ZoneStore.ts

@@ -0,0 +1,20 @@
+import { readonly, ref } from "vue";
+import { defineStore } from "pinia";
+import { webviewAddEventListener } from "@/native";
+
+export const useZoneStore = defineStore("zone", () => {
+  const loadedZones = ref<string[]>([]);
+
+  webviewAddEventListener("zoneLoaded", (dto) => {
+    loadedZones.value.push(dto.zoneName);
+  });
+
+  webviewAddEventListener("zoneUnloaded", (dto) => {
+    const index = loadedZones.value.indexOf(dto.zoneName);
+    if (index >= 0) {
+      loadedZones.value.splice(index, 1);
+    }
+  });
+
+  return { loadedZones: readonly(loadedZones) };
+});

src/ModManUi/src/stores/counter.ts

@@ -1,12 +0,0 @@
-import { ref, computed } from "vue";
-import { defineStore } from "pinia";
-
-export const useCounterStore = defineStore("counter", () => {
-  const count = ref(0);
-  const doubleCount = computed(() => count.value * 2);
-  function increment() {
-    count.value++;
-  }
-
-  return { count, doubleCount, increment };
-});