phase 1 & 2 first

src/stores/gallery.ts

@@ -0,0 +1,54 @@
+import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import { invoke } from "@tauri-apps/api/core";
+
+export interface ImageItem {
+  path: string;
+  thumbnail?: string; 
+  name: string;
+  width?: number;
+  height?: number;
+  zcaSuggestion?: { x: number; y: number; zone: string };
+}
+
+export const useGalleryStore = defineStore("gallery", () => {
+  const images = ref<ImageItem[]>([]);
+  const selectedIndex = ref<number>(-1);
+
+  const selectedImage = computed(() => {
+    if (selectedIndex.value >= 0 && selectedIndex.value < images.value.length) {
+      return images.value[selectedIndex.value];
+    }
+    return null;
+  });
+
+  function setImages(newImages: ImageItem[]) {
+    images.value = newImages;
+    selectedIndex.value = -1;
+  }
+
+  async function selectImage(index: number) {
+    if (index < 0 || index >= images.value.length) return;
+    selectedIndex.value = index;
+
+    const img = images.value[index];
+    if (!img.zcaSuggestion) {
+        try {
+            const suggestion = await invoke<{x: number, y: number, zone: string}>("get_zca_suggestion", { path: img.path });
+            // Update the item in the array
+            // Note: Directly modifying the object inside ref array is reactive in Vue 3
+            img.zcaSuggestion = suggestion;
+        } catch (e) {
+            console.error("ZCA failed", e);
+        }
+    }
+  }
+
+  return {
+    images,
+    selectedIndex,
+    selectedImage,
+    setImages,
+    selectImage,
+  };
+});