using a kebab options for deck tree node

web/src/components/flashcard-decks/FlashcardDeckTreeNode.vue

@@ -30,20 +30,14 @@
       >
         {{ deck.name }}
       </span>
-      <v-btn
-        icon
-        variant="text"
-        density="comfortable"
-        size="default"
-        title="Add sub-deck"
-        class="add-btn"
-        @click.stop="$emit('add-child', deck.id)"
-      >
-        <v-icon
-          size="default"
-          icon="mdi-plus"
-        />
-      </v-btn>
+      <FlashcardDeckKebab
+        class="kebab-btn"
+        :flashcard-deck-id="deck.id"
+        @click.stop
+        @created="$emit('created', $event)"
+        @updated="$emit('updated', $event)"
+        @deleted="$emit('deleted', $event)"
+      />
     </div>
 
     <div
@@ -63,7 +57,9 @@
             :selected-id="selectedId"
             @select="$emit('select', $event)"
             @move="$emit('move', $event)"
-            @add-child="$emit('add-child', $event)"
+            @created="$emit('created', $event)"
+            @updated="$emit('updated', $event)"
+            @deleted="$emit('deleted', $event)"
           />
         </template>
       </draggable>
@@ -76,6 +72,7 @@ import { ref, computed } from "vue"
 import draggable from "vuedraggable"
 
 import type { DeckNode } from "@/components/flashcard-decks/FlashcardDeckTree.vue"
+import FlashcardDeckKebab from "@/components/flashcard-decks/FlashcardDeckKebab.vue"
 
 const props = defineProps<{
   deck: DeckNode
@@ -87,7 +84,9 @@ const children = defineModel<DeckNode[]>("children", { required: true })
 const emit = defineEmits<{
   select: [deck: DeckNode]
   move: [payload: { deckId: number; newParentId: number | null }]
-  "add-child": [parentId: number]
+  created: [flashcardDeckId: number]
+  updated: [flashcardDeckId: number]
+  deleted: [flashcardDeckId: number]
 }>()
 
 const expanded = ref(false)
@@ -115,12 +114,12 @@ function onChange(event: { added?: { element: DeckNode } }) {
   background: rgb(var(--v-theme-lightprimary));
 }
 
-.add-btn {
+.kebab-btn {
   opacity: 0;
   transition: opacity 0.15s;
 }
 
-.deck-node:hover .add-btn {
+.deck-node:hover .kebab-btn {
   opacity: 1;
 }
 </style>