first initialization gallery

frontend/src/components/FolderItem.vue

@@ -0,0 +1,52 @@
+<template>
+    <div>
+        <span @click="selectFolder" class="folder-name" :class="{ selected: folder.id === selectedFolder?.id }">
+            <span v-if="!folder.children || !folder.children.length" class="end-marker">⌞</span>
+            <span v-else>{{ prefix }}</span>
+            <span> {{ folder.name }}</span>
+        </span>
+        <div v-if="folder.children && folder.children.length" class="children">
+            <folder-item v-for="child in folder.children" :key="child.id" :folder="child"
+                :selected-folder="selectedFolder" 
+                @select-folder="$emit('select-folder', child)">
+            </folder-item>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        folder: Object,
+        prefix: {
+            type: String,
+            default: ''
+        },
+        selectedFolder: Object, // Den aktuellen ausgewählten Ordner als Prop übergeben
+    },
+    methods: {
+        selectFolder() {
+            this.$emit('select-folder', this.folder); // Ordner auswählen und nach oben emitten
+        }
+    }
+};
+</script>
+
+<style scoped>
+.folder-name {
+    cursor: pointer;
+}
+
+.selected {
+    font-weight: bold;
+}
+
+.children {
+    margin-left: 20px;
+}
+
+.end-marker {
+    font-size: 1.2em;
+    vertical-align: middle;
+}
+</style>