chore: move cached zone assets in modman ui to store

src/ModManUi/src/stores/AssetStore.ts

@@ -0,0 +1,26 @@
+import { computed, ref } from "vue";
+import { defineStore } from "pinia";
+import type { ZoneAssetsDto } from "@/native/AssetBinds";
+import { webviewBinds } from "@/native";
+
+export const useAssetStore = defineStore("asset", () => {
+  const zoneName = ref<string | null>(null);
+  const assetsOfZone = ref<ZoneAssetsDto | null>(null);
+
+  const isLoading = computed(() => Boolean(assetsOfZone.value));
+  const assetCount = computed(() => assetsOfZone.value?.assets.length ?? 0);
+  const referenceCount = computed(() => assetsOfZone.value?.references.length ?? 0);
+
+  function loadAssetsForZone(newZoneName: string | null) {
+    zoneName.value = newZoneName;
+    assetsOfZone.value = null;
+    if (!newZoneName) return;
+    webviewBinds.getAssetsForZone(newZoneName).then((res) => {
+      if (zoneName.value === newZoneName) {
+        assetsOfZone.value = res;
+      }
+    });
+  }
+
+  return { zoneName, isLoading, assetsOfZone, assetCount, referenceCount, loadAssetsForZone };
+});

src/ModManUi/src/view/inspect/ZoneInspectorDetails.vue

@@ -6,23 +6,23 @@ import Skeleton from "primevue/skeleton";
 import { dt } from "@primeuix/themes";
 import type { ZoneDto } from "@/native/ZoneBinds";
 import { useZoneStore } from "@/stores/ZoneStore";
-import { computed, ref, watch } from "vue";
+import { computed, watch } from "vue";
-import type { CommonAssetType, ZoneAssetsDto } from "@/native/AssetBinds";
+import type { CommonAssetType } from "@/native/AssetBinds";
-import { webviewBinds } from "@/native";
 import { getAssetTypeNameCapitalized } from "@/utils/AssetTypeName";
 import { useRouter } from "vue-router";
 import { PAGE } from "@/router/Page";
+import { useAssetStore } from "@/stores/AssetStore";
+import { storeToRefs } from "pinia";
 
+const assetStore = useAssetStore();
 const zoneStore = useZoneStore();
 
+const { assetsOfZone, assetCount, referenceCount } = storeToRefs(assetStore);
+
 const props = defineProps<{
   selectedZone: string | null;
 }>();
 
-const assets = ref<ZoneAssetsDto | null>(null);
-const assetCount = computed(() => assets.value?.assets.length ?? 0);
-const referenceCount = computed(() => assets.value?.references.length ?? 0);
-
 const METER_COLORS = [
   dt("blue.600"),
   dt("red.600"),
@@ -37,7 +37,7 @@ const METER_COLORS = [
 const meterItems = computed<MeterItem[]>(() => {
   const assetTypeCounts: Partial<Record<CommonAssetType, number>> = {};
 
-  for (const asset of assets.value?.assets ?? []) {
+  for (const asset of assetsOfZone.value?.assets ?? []) {
     if (!assetTypeCounts[asset.type]) {
       assetTypeCounts[asset.type] = 1;
     } else {
@@ -94,13 +94,7 @@ function onClickShowAssets() {
 watch(
   () => props.selectedZone,
   (newValue) => {
-    assets.value = null;
+    assetStore.loadAssetsForZone(newValue);
-    if (!newValue) return;
-    webviewBinds.getAssetsForZone(newValue).then((res) => {
-      if (props.selectedZone === newValue) {
-        assets.value = res;
-      }
-    });
   },
   { immediate: true },
 );
@@ -115,7 +109,7 @@ watch(
       <Tag :value="selectedZoneDetails.platform" />
     </div>
     <div class="zone-assets">
-      <template v-if="assets">
+      <template v-if="assetsOfZone">
         <div>{{ assetCount }} assets</div>
         <div>{{ referenceCount }} references</div>
         <MeterGroup class="asset-meter" :value="meterItems" />