Galery nearly finished. only access rights aren't loaded for editin

frontend/src/components/FolderItem.vue

@@ -1,16 +1,22 @@
 <template>
-    <div>
+    <div class="folder-item">
         <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>
+            <template v-for="i in depth">
+                <span v-if="showPipe(i)" class="marker filler">|</span>
+                <span v-else class="marker filler">&nbsp;</span>
+            </template>
+            <span v-if="isLastItem" class="end-marker marker">⌞</span>
+            <span v-else class="marker">&#x251C;</span>
+            <span>&nbsp;{{ 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)">
+        <template v-if="folder.children && folder.children.length" class="children">
+            <folder-item v-for="(child, index) in folder.children" :key="child.id" :folder="child"
+                :selected-folder="selectedFolder" @select-folder="forwardSelectFolderEvent"
+                :depth="depth + 1"
+                :isLastItem="index === folder.children.length - 1"
+                :parentsWithChildren="getNewParentsWithChildrenList(index)">
             </folder-item>
-        </div>
+        </template>
     </div>
 </template>
 
@@ -18,15 +24,34 @@
 export default {
     props: {
         folder: Object,
-        prefix: {
-            type: String,
-            default: ''
+        isLastItem: {
+            type: Boolean,
+            default: false
         },
-        selectedFolder: Object, // Den aktuellen ausgewählten Ordner als Prop übergeben
+        depth: {
+            type: Number,
+            default: 0
+        },
+        parentsWithChildren: {
+            type: Array,
+            default: () => []
+        },
+        selectedFolder: Object,
     },
     methods: {
         selectFolder() {
-            this.$emit('select-folder', this.folder); // Ordner auswählen und nach oben emitten
+            this.$emit('select-folder', this.folder);
+        },
+        forwardSelectFolderEvent(selectedFolder) {
+            this.$emit('select-folder', selectedFolder);
+        },
+        showPipe(index) {
+            return this.parentsWithChildren[index - 1];
+        },
+        getNewParentsWithChildrenList(index) {
+            const newParentsWithChildren = [...this.parentsWithChildren];
+            newParentsWithChildren.push(index < this.folder.children.length - 1);
+            return newParentsWithChildren;
         }
     }
 };
@@ -48,5 +73,20 @@ export default {
 .end-marker {
     font-size: 1.2em;
     vertical-align: middle;
+    margin-top: -22px;
+    padding-left: 3px;
+}
+
+.marker {
+    display: inline-block;
+    width: 10px;
+}
+
+.filler {
+    padding-left: 3.5px;
+}
+
+.folder-item {
+    margin: -2px 0;
 }
 </style>