Big quaility of life changes

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

@@ -12,6 +12,11 @@
       </v-btn>
     </template>
     <v-list density="compact">
+      <v-list-item
+        prepend-icon="mdi-book-open-blank-variant-outline"
+        title="Start Review"
+        @click="goToReviewPage"
+      />
       <v-list-item
         prepend-icon="mdi-folder-plus-outline"
         title="Add subdeck"
@@ -134,6 +139,7 @@
 <script setup lang="ts">
 import { ref } from "vue"
 import { VForm } from "vuetify/components"
+import { useRouter } from "vue-router"
 
 import { required } from "@/utils/validators"
 import flashcardDecksApi from "@/api/flashcard-decks-api"
@@ -152,6 +158,17 @@ const emit = defineEmits<{
 const snack = useSnack()
 const isSubmitting = ref(false)
 
+const router = useRouter()
+
+function goToReviewPage() {
+  router.push({
+    name: "FlashcardDeckReviewPage",
+    params: {
+      flashcardDeckId: props.flashcardDeckId,
+    },
+  })
+}
+
 // Add subdeck
 const showAddSubdeck = ref(false)
 const newDeckName = ref("")

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

@@ -14,9 +14,7 @@
         @click.stop="expanded = !expanded"
       >
         <v-icon size="default">
-          {{
-            hasChildren ? (expanded ? "mdi-chevron-down" : "mdi-chevron-right") : "mdi-circle-small"
-          }}
+          {{ expanded ? "mdi-chevron-down" : "mdi-chevron-right" }}
         </v-icon>
       </v-btn>
       <v-icon
@@ -30,14 +28,17 @@
       >
         {{ deck.name }}
       </span>
-      <FlashcardDeckKebab
+      <div
         class="kebab-btn"
-        :flashcard-deck-id="deck.id"
         @click.stop
-        @created="$emit('created', $event)"
-        @updated="$emit('updated', $event)"
-        @deleted="$emit('deleted', $event)"
-      />
+      >
+        <FlashcardDeckKebab
+          :flashcard-deck-id="deck.id"
+          @created="$emit('created', $event)"
+          @updated="$emit('updated', $event)"
+          @deleted="$emit('deleted', $event)"
+        />
+      </div>
     </div>
 
     <div

web/src/components/flashcards/FlashcardCard.vue

@@ -4,10 +4,12 @@
       class="face-content text-h5 text-center"
       v-html="renderMarkdown(flashcard.front)"
     />
-    <div class="kebab-wrapper">
+    <div
+      class="kebab-wrapper"
+      @click.stop
+    >
       <FlashcardKebab
         :flashcard="flashcard"
-        @click.stop
         @updated="$emit('updated', $event)"
         @deleted="$emit('deleted', $event)"
       />