Refactor Galerie component to use image IDs for keys and update image loading logic; add new scripts for generating previews and migrating public gallery to metadata with authentication checks.

components/Gallery.vue

@@ -18,12 +18,12 @@
       <div class="grid sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2">
         <div
           v-for="image in images"
-          :key="image.filename"
+          :key="image.id"
           class="group relative w-20 h-20 rounded-md overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer"
           @click="openLightbox(image)"
         >
           <img 
-            :src="`/galerie/${image.filename}`"
+            :src="getPreviewUrl(image)"
             :alt="image.title"
             class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
           >
@@ -49,7 +49,7 @@
             <X :size="24" />
           </button>
           <img
-            :src="`/galerie/${lightboxImage.filename}`"
+            :src="getOriginalUrl(lightboxImage)"
             :alt="lightboxImage.title"
             class="max-w-[80vw] max-h-[80vh] object-contain rounded-lg"
             @click.stop
@@ -66,16 +66,19 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { X } from 'lucide-vue-next'
 
 const images = ref([])
 const lightboxImage = ref(null)
 
+const getPreviewUrl = (img) => `/api/media/galerie/${img.id}?preview=true`
+const getOriginalUrl = (img) => `/api/media/galerie/${img.id}`
+
 const loadImages = async () => {
   try {
-    const response = await $fetch('/api/galerie')
-    images.value = response || []
+  const response = await $fetch('/api/galerie/list')
+  images.value = response?.images || []
   } catch (error) {
     console.error('Fehler beim Laden der Galerie-Bilder:', error)
     images.value = []