phase 1 & 2 first

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>