chore: upgrade to vuetify v4 (#7432)

frontend/app/components/global/BannerExperimental.vue

@@ -10,6 +10,7 @@
       <a
         :href="issue"
         target="_blank"
+        color="primary"
       >{{ $t("banner-experimental.issue-link-text") }}</a>
     </template>
   </BannerWarning>

frontend/app/components/global/ContextMenu.vue

@@ -12,16 +12,13 @@
   >
     <template #activator="{ props }">
       <v-btn
-        :class="{ 'rounded-circle': fab }"
-        :small="fab"
-        :color="color"
-        :icon="!fab"
+        size="small"
+        :icon="$globals.icons.dotsVertical"
+        variant="text"
         dark
         v-bind="props"
         @click.prevent
-      >
-        <v-icon>{{ $globals.icons.dotsVertical }}</v-icon>
-      </v-btn>
+      />
     </template>
     <v-list density="compact">
       <v-list-item
@@ -52,13 +49,5 @@ defineProps({
     type: Boolean,
     default: true,
   },
-  fab: {
-    type: Boolean,
-    default: false,
-  },
-  color: {
-    type: String,
-    default: "grey-darken-2",
-  },
 });
 </script>

frontend/app/components/global/LanguageDialog.vue

@@ -22,9 +22,9 @@
             v-bind="props"
             class="px-2 py-2"
           >
-            <v-list-item-title> {{ item.raw.name }} </v-list-item-title>
+            <v-list-item-title> {{ item.name }} </v-list-item-title>
             <v-list-item-subtitle>
-              {{ item.raw.progress }}% {{ $t("language-dialog.translated") }}
+              {{ item.progress }}% {{ $t("language-dialog.translated") }}
             </v-list-item-subtitle>
           </div>
         </template>
@@ -34,6 +34,7 @@
           <a
             href="https://docs.mealie.io/contributors/translating/"
             target="_blank"
+            class="text-primary"
           >
             {{ $t("language-dialog.read-the-docs") }}
           </a>