phase 1 & 2 first

src/components/HeroView.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { useGalleryStore } from "../stores/gallery";
+import { convertFileSrc } from "@tauri-apps/api/core";
+
+const store = useGalleryStore();
+</script>
+
+<template>
+  <div class="w-full h-full flex items-center justify-center bg-black relative">
+    <div v-if="store.selectedImage" class="relative max-w-full max-h-full">
+      <img 
+        :src="convertFileSrc(store.selectedImage.path)" 
+        class="max-w-full max-h-full object-contain"
+        alt="Hero Image"
+      />
+      <!-- Watermark Overlay Placeholder -->
+      <div 
+        v-if="store.selectedImage.zcaSuggestion"
+        class="absolute border-2 border-dashed border-green-400 text-green-400 px-4 py-2 bg-black/50 pointer-events-none transition-all duration-500"
+        :style="{
+            left: (store.selectedImage.zcaSuggestion.x * 100) + '%',
+            top: (store.selectedImage.zcaSuggestion.y * 100) + '%',
+            transform: 'translate(-50%, -50%)'
+        }"
+      >
+        Smart Watermark ({{ store.selectedImage.zcaSuggestion.zone }})
+      </div>
+      <div 
+        v-else
+        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 border-2 border-dashed border-white text-white px-4 py-2 bg-black/50 pointer-events-none"
+      >
+        Calculating...
+      </div>
+    </div>
+    <div v-else class="text-gray-500">
+      No image selected
+    </div>
+  </div>
+</template>

src/components/ThumbnailStrip.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { useGalleryStore } from "../stores/gallery";
+// @ts-ignore
+import { RecycleScroller } from 'vue-virtual-scroller';
+import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
+import { convertFileSrc } from "@tauri-apps/api/core";
+
+const store = useGalleryStore();
+
+const onSelect = (index: number) => {
+    store.selectImage(index);
+};
+</script>
+
+<template>
+  <div class="h-full w-full bg-gray-900">
+    <RecycleScroller
+      class="h-full"
+      :items="store.images"
+      :item-size="100"
+      key-field="path"
+      direction="horizontal"
+    >
+      <template #default="{ item, index }">
+        <div 
+            class="h-full w-[100px] p-2 cursor-pointer transition-colors"
+            :class="{'bg-blue-600': store.selectedIndex === index, 'hover:bg-gray-700': store.selectedIndex !== index}"
+            @click="onSelect(index)"
+        >
+          <div class="h-full w-full bg-gray-800 flex items-center justify-center overflow-hidden rounded border border-gray-600">
+             <!-- Use actual thumbnail path later -->
+             <img :src="convertFileSrc(item.path)" class="w-full h-full object-cover" loading="lazy" />
+          </div>
+        </div>
+      </template>
+    </RecycleScroller>
+  </div>
+</template>