Finished guestbook and gallery. started diary

frontend/src/components/FolderItem.vue

@@ -1,20 +1,25 @@
 <template>
     <div class="folder-item">
-        <span @click="selectFolder" class="folder-name" :class="{ selected: folder.id === selectedFolder?.id }">
+        <div @click="selectFolder" class="folder-name" :class="{ selected: folder.id === selectedFolder?.id }">
+            <span v-if="!noActionItems" class="action-items">
+                <span @click="$emit('edit-folder', folder)" class="icon edit-icon" title="Edit folder">✎</span>
+                <span @click="$emit('delete-folder', folder)" class="icon delete-icon" title="Delete folder">✖</span>
+            </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>
+            <span class="folder-name-text">&nbsp;{{ folder.name }}</span>
+        </div>
+
         <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)">
+                @edit-folder="$emit('edit-folder', $event)" @delete-folder="$emit('delete-folder', $event)"
+                :depth="depth + 1" :isLastItem="index === folder.children.length - 1"
+                :parentsWithChildren="getNewParentsWithChildrenList(index)" :noActionItems="noActionItems">
             </folder-item>
         </template>
     </div>
@@ -36,6 +41,10 @@ export default {
             type: Array,
             default: () => []
         },
+        noActionItems: {
+            type: Boolean,
+            default: false
+        },
         selectedFolder: Object,
     },
     methods: {
@@ -58,10 +67,6 @@ export default {
 </script>
 
 <style scoped>
-.folder-name {
-    cursor: pointer;
-}
-
 .selected {
     font-weight: bold;
 }
@@ -89,4 +94,25 @@ export default {
 .folder-item {
     margin: -2px 0;
 }
+
+.folder-actions {
+    display: flex;
+    gap: 10px;
+}
+
+.icon {
+    cursor: pointer;
+}
+
+.edit-icon {
+    color: green;
+}
+
+.delete-icon {
+    color: red;
+}
+
+.folder-name-text {
+    cursor: pointer;
+}
 </style>