chore: upgrade to vuetify v4 (#7432)

frontend/app/components/Domain/Recipe/RecipeCard.vue

@@ -36,10 +36,8 @@
             </div>
           </v-expand-transition>
         </RecipeCardImage>
-        <v-card-title class="mb-n3 px-4">
-          <div class="headerClass">
-            {{ name }}
-          </div>
+        <v-card-title class="mb-n3 px-4" style="font-size: 1.25rem;">
+          {{ name }}
         </v-card-title>
 
         <slot name="actions">

frontend/app/components/Domain/Recipe/RecipeCardSection.vue

@@ -1,24 +1,17 @@
 <template>
   <div>
-    <v-app-bar
+    <v-row
       v-if="!disableToolbar"
-      color="transparent"
-      :absolute="false"
-      flat
-      class="mt-n1 flex-sm-wrap rounded position-relative w-100 left-0 top-0"
+      class="align-center pb-2"
     >
-      <slot name="title">
-        <v-icon
-          v-if="title"
-          size="large"
-          start
-        >
-          {{ displayTitleIcon }}
-        </v-icon>
-        <v-toolbar-title class="headline">
-          {{ title }}
-        </v-toolbar-title>
-      </slot>
+      <v-icon
+        v-if="title"
+        size="large"
+        start
+      >
+        {{ displayTitleIcon }}
+      </v-icon>
+      <span class="text-headline-small">{{ title }}</span>
       <v-spacer />
       <v-btn
         :icon="$vuetify.display.xs"
@@ -111,7 +104,7 @@
         ]"
         @toggle-dense-view="toggleMobileCards()"
       />
-    </v-app-bar>
+    </v-row>
     <div v-if="recipes && ready">
       <div class="mt-2">
         <v-row v-if="!useMobileCards">
@@ -136,7 +129,7 @@
         </v-row>
         <v-row
           v-else
-          dense
+          density="comfortable"
         >
           <v-col
             v-for="recipe in recipes"
@@ -159,7 +152,7 @@
           </v-col>
         </v-row>
       </div>
-      <v-card v-intersect="infiniteScroll" />
+      <v-card v-intersect="infiniteScroll" variant="flat" />
     </div>
     <v-fade-transition>
       <AppLoader

frontend/app/components/Domain/Recipe/RecipeIngredientEditor.vue

@@ -13,7 +13,7 @@
     />
     <v-row
       :no-gutters="mdAndUp"
-      dense
+      density="comfortable"
       class="d-flex flex-wrap my-1"
     >
       <v-col

frontend/app/components/Domain/Recipe/RecipeOrganizerPage.vue

@@ -43,7 +43,7 @@
       </v-card-text>
     </BaseDialog>
 
-    <v-row dense>
+    <v-row density="comfortable">
       <v-col>
         <v-text-field
           v-model="searchString"
@@ -57,7 +57,7 @@
       </v-col>
     </v-row>
 
-    <v-app-bar
+    <v-row
       color="transparent"
       flat
       class="mt-n1 rounded align-center position-relative w-100 left-0 top-0"
@@ -76,7 +76,7 @@
         create
         @click="dialogs.organizer = true"
       />
-    </v-app-bar>
+    </v-row>
     <section
       v-for="(itms, key, idx) in itemsSorted"
       :key="'header' + idx"

frontend/app/components/Domain/Recipe/RecipeOrganizerSelector.vue

@@ -27,12 +27,10 @@
         color="accent"
         variant="flat"
         label
-
+        :text="item.name"
         closable
         @click:close="removeByIndex(index)"
-      >
-        {{ item.value }}
-      </v-chip>
+      />
     </template>
     <template
       v-if="showAdd"

frontend/app/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -21,7 +21,7 @@
       @save="saveParsedIngredients"
     />
     <v-container v-show="!isCookMode" key="recipe-page" class="px-0" :class="{ 'pa-0': $vuetify.display.smAndDown }">
-      <v-card :flat="$vuetify.display.smAndDown" class="d-print-none">
+      <v-card flat class="d-print-none">
         <RecipePageHeader
           :recipe="recipe"
           :recipe-scale="scale"
@@ -68,17 +68,21 @@
             <!--
               The left column is conditionally rendered based on cook mode.
             -->
-            <v-col v-if="!isCookMode || isEditForm" cols="12" sm="12" md="4" lg="4">
-              <RecipePageIngredientToolsView v-if="!isEditForm" :recipe="recipe" :scale="scale" />
-              <RecipePageOrganizers v-if="$vuetify.display.mdAndUp" v-model="recipe" @item-selected="chipClicked" />
+            <v-col
+              v-if="!isCookMode || isEditForm"
+              cols="12"
+              sm="12"
+              md="4"
+              :class="$vuetify.display.mdAndUp ? 'border-e-thin' : null"
+            >
+              <RecipePageIngredientToolsView v-if="!isEditForm" :recipe="recipe" :scale="scale" class="pr-2" />
+              <RecipePageOrganizers v-if="$vuetify.display.mdAndUp" v-model="recipe" class="pr-2" @item-selected="chipClicked" />
             </v-col>
-            <v-divider v-if="$vuetify.display.mdAndUp && !isCookMode" class="my-divider" :vertical="true" />
-
             <!--
               the right column is always rendered, but it's layout width is determined by where the left column is
               rendered.
             -->
-            <v-col cols="12" sm="12" :md="8 + (isCookMode ? 1 : 0) * 4" :lg="8 + (isCookMode ? 1 : 0) * 4">
+            <v-col cols="12" sm="12" :md="8 + (isCookMode ? 1 : 0) * 4">
               <RecipePageInstructions
                 v-model="recipe.recipeInstructions"
                 v-model:assets="recipe.assets"

frontend/app/components/Layout/DefaultLayout.vue

@@ -13,7 +13,6 @@
 
     <AppSidebar
       v-model="sidebar"
-      absolute
       :top-link="topLinks"
       :secondary-links="cookbookLinks || []"
     >

frontend/app/components/Layout/LayoutParts/AppFooter.vue

@@ -7,7 +7,7 @@
     <v-row
       justify="center"
       align="center"
-      dense
+      density="comfortable"
       no-gutters
     >
       <v-col

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>