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">
-          {{
+          {{ expanded ? "mdi-chevron-down" : "mdi-chevron-right" }}
-            hasChildren ? (expanded ? "mdi-chevron-down" : "mdi-chevron-right") : "mdi-circle-small"
-          }}
         </v-icon>
       </v-btn>
       <v-icon
@@ -30,15 +28,18 @@
       >
         {{ deck.name }}
       </span>
-      <FlashcardDeckKebab
+      <div
         class="kebab-btn"
-        :flashcard-deck-id="deck.id"
         @click.stop
+      >
+        <FlashcardDeckKebab
+          :flashcard-deck-id="deck.id"
           @created="$emit('created', $event)"
           @updated="$emit('updated', $event)"
           @deleted="$emit('deleted', $event)"
         />
       </div>
+    </div>
 
     <div
       v-show="expanded"

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)"
       />

web/src/pages/FlashcardsPage.vue

@@ -21,7 +21,9 @@
     >
       <template v-if="selectedDeck">
         <div class="d-flex align-center justify-space-between mb-4">
-          <h2 class="text-h3">{{ selectedDeck.name }}</h2>
+          <span class="text-h3">{{ selectedDeck.name }}</span>
+          <span class="ml-2">({{ totalCount }})</span>
+
           <v-spacer />
           <v-btn
             color="primary"

web/src/pages/flashcard-deck-reviews/FlashcardDeckReviewPage.vue

@@ -7,6 +7,7 @@
         variant="tonal"
         prepend-icon="mdi-shuffle"
         text="Shuffle"
+        @click="shuffle"
       />
     </div>
 
@@ -166,6 +167,14 @@ function markCurrentCardCorrect() {
 function markCurrentCardIncorrect() {
   markCurrentCard("incorrect")
 }
+
+function shuffle() {
+  for (let i = queue.value.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1))
+    ;[queue.value[i], queue.value[j]] = [queue.value[j], queue.value[i]]
+  }
+  currentIndex.value = 0
+}
 </script>
 
 <style scoped>