language files combined, settings fixed, "new" badge integrated

resources/js/Components/GalleryGrid.vue

@@ -8,20 +8,31 @@
         @click="$emit('imageTapped', image, $event)"
       >
         <img :src="image.path" :alt="'Image ' + image.name" />
+        <div v-if="image.is_new" class="new-badge">{{ __('new') }}</div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
+import { defineProps, defineEmits } from 'vue';
+
 const props = defineProps({
   images: {
     type: Array,
     required: true,
   },
+  translations: {
+    type: Object,
+    required: true,
+  },
 });
 
 const emits = defineEmits(['imageTapped']);
+
+const __ = (key) => {
+  return props.translations[key] || key;
+};
 </script>
 
 <style scoped>
@@ -46,6 +57,7 @@ const emits = defineEmits(['imageTapped']);
   overflow: hidden;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  position: relative; /* Added for badge positioning */
 }
 
 .grid-item img {
@@ -54,4 +66,17 @@ const emits = defineEmits(['imageTapped']);
   object-fit: cover; /* Bilder zuschneiden, um den Bereich zu füllen */
   display: block;
 }
+
+.new-badge {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background-color: red;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  font-size: 0.8em;
+  font-weight: bold;
+  z-index: 10;
+}
 </style>