chore: Add Stricter Frontend Formatting (#6262)

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -5,8 +5,14 @@
     density="compact"
     elevation="0"
   >
-    <BaseDialog v-model="deleteDialog" :title="$t('recipe.delete-recipe')" color="error"
-      :icon="$globals.icons.alertCircle" can-confirm @confirm="emitDelete()">
+    <BaseDialog
+      v-model="deleteDialog"
+      :title="$t('recipe.delete-recipe')"
+      color="error"
+      :icon="$globals.icons.alertCircle"
+      can-confirm
+      @confirm="emitDelete()"
+    >
       <v-card-text>
         {{ $t("recipe.delete-confirmation") }}
       </v-card-text>
@@ -15,7 +21,14 @@
     <v-spacer />
     <div v-if="!open" class="custom-btn-group ma-1">
       <RecipeFavoriteBadge v-if="loggedIn" color="info" button-style :recipe-id="recipe.id!" show-always />
-      <RecipeTimelineBadge v-if="loggedIn" class="ml-1" color="info" button-style :slug="recipe.slug" :recipe-name="recipe.name!" />
+      <RecipeTimelineBadge
+        v-if="loggedIn"
+        class="ml-1"
+        color="info"
+        button-style
+        :slug="recipe.slug"
+        :recipe-name="recipe.name!"
+      />
       <div v-if="loggedIn">
         <v-tooltip v-if="canEdit" location="bottom" color="info">
           <template #activator="{ props: tooltipProps }">

frontend/components/Domain/Recipe/RecipeCard.vue

@@ -1,101 +1,101 @@
 <template>
   <!-- Wrap v-hover with a div to provide a proper DOM element for the transition -->
-    <div>
-      <v-hover
-        v-slot="{ isHovering, props: hoverProps }"
-        :open-delay="50"
+  <div>
+    <v-hover
+      v-slot="{ isHovering, props: hoverProps }"
+      :open-delay="50"
+    >
+      <v-card
+        v-bind="hoverProps"
+        :class="{ 'on-hover': isHovering }"
+        :style="{ cursor }"
+        :elevation="isHovering ? 12 : 2"
+        :to="recipeRoute"
+        :min-height="imageHeight + 75"
+        @click.self="$emit('click')"
       >
-        <v-card
-          v-bind="hoverProps"
-          :class="{ 'on-hover': isHovering }"
-          :style="{ cursor }"
-          :elevation="isHovering ? 12 : 2"
-          :to="recipeRoute"
-          :min-height="imageHeight + 75"
-          @click.self="$emit('click')"
+        <RecipeCardImage
+          :icon-size="imageHeight"
+          :height="imageHeight"
+          :slug="slug"
+          :recipe-id="recipeId"
+          size="small"
+          :image-version="image"
         >
-          <RecipeCardImage
-            :icon-size="imageHeight"
-            :height="imageHeight"
-            :slug="slug"
-            :recipe-id="recipeId"
-            size="small"
-            :image-version="image"
-          >
-            <v-expand-transition v-if="description">
-              <div
-                v-if="isHovering"
-                class="d-flex transition-fast-in-fast-out bg-secondary v-card--reveal"
-                style="height: 100%"
-              >
-                <v-card-text class="v-card--text-show white--text">
-                  <div class="descriptionWrapper">
-                    <SafeMarkdown :source="description" />
-                  </div>
-                </v-card-text>
-              </div>
-            </v-expand-transition>
-          </RecipeCardImage>
-          <v-card-title class="mb-n3 px-4">
-            <div class="headerClass">
-              {{ name }}
-            </div>
-          </v-card-title>
-
-          <slot name="actions">
-            <v-card-actions
-              v-if="showRecipeContent"
-              class="px-1"
+          <v-expand-transition v-if="description">
+            <div
+              v-if="isHovering"
+              class="d-flex transition-fast-in-fast-out bg-secondary v-card--reveal"
+              style="height: 100%"
             >
-              <RecipeFavoriteBadge
-                v-if="isOwnGroup"
-                class="absolute"
-                :recipe-id="recipeId"
-                show-always
-              />
-              <div v-else class="px-1" /> <!-- Empty div to keep the layout consistent -->
+              <v-card-text class="v-card--text-show white--text">
+                <div class="descriptionWrapper">
+                  <SafeMarkdown :source="description" />
+                </div>
+              </v-card-text>
+            </div>
+          </v-expand-transition>
+        </RecipeCardImage>
+        <v-card-title class="mb-n3 px-4">
+          <div class="headerClass">
+            {{ name }}
+          </div>
+        </v-card-title>
 
-              <RecipeCardRating
-                :model-value="rating"
-                :recipe-id="recipeId"
-              />
-              <v-spacer />
-              <RecipeChips
-                :truncate="true"
-                :items="tags"
-                :title="false"
-                :limit="2"
-                small
-                url-prefix="tags"
-                v-bind="$attrs"
-              />
+        <slot name="actions">
+          <v-card-actions
+            v-if="showRecipeContent"
+            class="px-1"
+          >
+            <RecipeFavoriteBadge
+              v-if="isOwnGroup"
+              class="absolute"
+              :recipe-id="recipeId"
+              show-always
+            />
+            <div v-else class="px-1" /> <!-- Empty div to keep the layout consistent -->
 
-              <!-- If we're not logged-in, no items display, so we hide this menu -->
-              <RecipeContextMenu
-                v-if="isOwnGroup && showRecipeContent"
-                color="grey-darken-2"
-                :slug="slug"
-                :menu-icon="$globals.icons.dotsVertical"
-                :name="name"
-                :recipe-id="recipeId"
-                :use-items="{
-                  delete: false,
-                  edit: false,
-                  download: true,
-                  mealplanner: true,
-                  shoppingList: true,
-                  print: false,
-                  printPreferences: false,
-                  share: true,
-                }"
-                @deleted="$emit('delete', slug)"
-              />
-            </v-card-actions>
-          </slot>
-          <slot />
-        </v-card>
-      </v-hover>
-    </div>
+            <RecipeCardRating
+              :model-value="rating"
+              :recipe-id="recipeId"
+            />
+            <v-spacer />
+            <RecipeChips
+              :truncate="true"
+              :items="tags"
+              :title="false"
+              :limit="2"
+              small
+              url-prefix="tags"
+              v-bind="$attrs"
+            />
+
+            <!-- If we're not logged-in, no items display, so we hide this menu -->
+            <RecipeContextMenu
+              v-if="isOwnGroup && showRecipeContent"
+              color="grey-darken-2"
+              :slug="slug"
+              :menu-icon="$globals.icons.dotsVertical"
+              :name="name"
+              :recipe-id="recipeId"
+              :use-items="{
+                delete: false,
+                edit: false,
+                download: true,
+                mealplanner: true,
+                shoppingList: true,
+                print: false,
+                printPreferences: false,
+                share: true,
+              }"
+              @deleted="$emit('delete', slug)"
+            />
+          </v-card-actions>
+        </slot>
+        <slot />
+      </v-card>
+    </v-hover>
+  </div>
 </template>
 
 <script setup lang="ts">

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -116,7 +116,7 @@
                 @deleted="$emit('delete', slug)"
               />
             </v-card-actions>
-            </slot>
+          </slot>
         </v-list-item>
         <slot />
       </v-card>

frontend/components/Domain/Recipe/RecipeContextMenu/RecipeContextMenuContent.vue

@@ -67,7 +67,7 @@
           hide-header
           :first-day-of-week="firstDayOfWeek"
           :local="$i18n.locale"
-            @update:model-value="pickerMenu = false"
+          @update:model-value="pickerMenu = false"
         />
       </v-menu>
       <v-select

frontend/components/Domain/Recipe/RecipeDataAliasManagerDialog.vue

@@ -1,8 +1,15 @@
 <template>
   <div>
-    <BaseDialog v-model="dialog" :title="$t('data-pages.manage-aliases')" :icon="$globals.icons.edit"
-      :submit-icon="$globals.icons.check" :submit-text="$t('general.confirm')" can-submit @submit="saveAliases"
-      @cancel="$emit('cancel')">
+    <BaseDialog
+      v-model="dialog"
+      :title="$t('data-pages.manage-aliases')"
+      :icon="$globals.icons.edit"
+      :submit-icon="$globals.icons.check"
+      :submit-text="$t('general.confirm')"
+      can-submit
+      @submit="saveAliases"
+      @cancel="$emit('cancel')"
+    >
       <v-card-text>
         <v-container>
           <v-row v-for="alias, i in aliases" :key="i">
@@ -10,13 +17,16 @@
               <v-text-field v-model="alias.name" :label="$t('general.name')" :rules="[validators.required]" />
             </v-col>
             <v-col cols="2">
-              <BaseButtonGroup :buttons="[
-                {
-                  icon: $globals.icons.delete,
-                  text: $t('general.delete'),
-                  event: 'delete',
-                },
-              ]" @delete="deleteAlias(i)" />
+              <BaseButtonGroup
+                :buttons="[
+                  {
+                    icon: $globals.icons.delete,
+                    text: $t('general.delete'),
+                    event: 'delete',
+                  },
+                ]"
+                @delete="deleteAlias(i)"
+              />
             </v-col>
           </v-row>
         </v-container>

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

@@ -113,9 +113,13 @@
           />
           <v-divider />
         </v-col>
-        <v-col class="overflow-y-auto"
-        :class="$vuetify.display.smAndDown ? 'py-2': 'py-6'"
-        style="height: 100%" cols="12" sm="7">
+        <v-col
+          class="overflow-y-auto"
+          :class="$vuetify.display.smAndDown ? 'py-2': 'py-6'"
+          style="height: 100%"
+          cols="12"
+          sm="7"
+        >
           <h2 class="text-h5 px-4 font-weight-medium opacity-80">
             {{ $t('recipe.instructions') }}
           </h2>

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageEditorToolbar.vue

@@ -13,25 +13,25 @@
       @upload="uploadImage"
     />
     <v-spacer />
-      <v-select
-        v-model="recipe.userId"
-        class="my-2"
-        max-width="300"
-        :items="allUsers"
-        :item-props="itemsProps"
-        :label="$t('general.owner')"
-        :disabled="!canEditOwner"
-        variant="outlined"
-        density="compact"
-      >
-        <template #prepend>
-          <UserAvatar
-            :user-id="recipe.userId"
-            :tooltip="false"
-          />
-        </template>
-      </v-select>
-</div>
+    <v-select
+      v-model="recipe.userId"
+      class="my-2"
+      max-width="300"
+      :items="allUsers"
+      :item-props="itemsProps"
+      :label="$t('general.owner')"
+      :disabled="!canEditOwner"
+      variant="outlined"
+      density="compact"
+    >
+      <template #prepend>
+        <UserAvatar
+          :user-id="recipe.userId"
+          :tooltip="false"
+        />
+      </template>
+    </v-select>
+  </div>
 </template>
 
 <script setup lang="ts">

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageFooter.vue

@@ -29,8 +29,8 @@
         class="mb-2 mx-n2"
       >
         <v-card-title class="text-h5 font-weight-medium opacity-80">
-{{ $t('recipe.api-extras') }}
-</v-card-title>
+          {{ $t('recipe.api-extras') }}
+        </v-card-title>
         <v-divider class="ml-4" />
         <v-card-text>
           {{ $t('recipe.api-extras-description') }}

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue

@@ -12,10 +12,10 @@
       >
         <v-card-text class="w-100">
           <div class="d-flex flex-column align-center">
-          <v-card-title class="text-h5 font-weight-regular pa-0 text-wrap text-center opacity-80">
-            {{ recipe.name }}
-          </v-card-title>
-          <RecipeRating
+            <v-card-title class="text-h5 font-weight-regular pa-0 text-wrap text-center opacity-80">
+              {{ recipe.name }}
+            </v-card-title>
+            <RecipeRating
               :key="recipe.slug"
               :value="recipe.rating"
               :recipe-id="recipe.id"

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageIngredientEditor.vue

@@ -1,4 +1,3 @@
-<!-- eslint-disable vue/no-mutating-props -->
 <template>
   <div>
     <div class="mb-4">

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageParseDialog.vue

@@ -79,8 +79,8 @@
               <BaseButton
                 v-if="
                   currentMissingUnit
-                  && currentIng.ingredient.unit?.id
-                  && currentMissingUnit.toLowerCase() != currentIng.ingredient.unit?.name.toLowerCase()
+                    && currentIng.ingredient.unit?.id
+                    && currentMissingUnit.toLowerCase() != currentIng.ingredient.unit?.name.toLowerCase()
                 "
                 color="warning"
                 size="small"
@@ -99,8 +99,8 @@
               <BaseButton
                 v-if="
                   currentMissingFood
-                  && currentIng.ingredient.food?.id
-                  && currentMissingFood.toLowerCase() != currentIng.ingredient.food?.name.toLowerCase()
+                    && currentIng.ingredient.food?.id
+                    && currentMissingFood.toLowerCase() != currentIng.ingredient.food?.name.toLowerCase()
                 "
                 color="warning"
                 size="small"
@@ -176,9 +176,9 @@
           :text="$t(currentIngShouldDelete ? 'recipe.parser.delete-item' : 'general.next')"
           @click="nextIngredient"
         />
-       </div>
+      </div>
       <!-- Review -->
-       <div v-else>
+      <div v-else>
         <BaseButton
           create
           :text="$t('general.save')"
@@ -186,7 +186,7 @@
           :loading="state.loading.save"
           @click="saveIngs"
         />
-       </div>
+      </div>
     </template>
   </BaseDialog>
 </template>

frontend/components/Domain/Recipe/RecipePrintView.vue

@@ -4,20 +4,23 @@
     <section>
       <v-container class="ma-0 pa-0">
         <v-row>
-          <v-col v-if="preferences.imagePosition && preferences.imagePosition != ImagePosition.hidden"
-                 :order="preferences.imagePosition == ImagePosition.left ? -1 : 1"
-                 cols="4"
-                 align-self="center"
+          <v-col
+            v-if="preferences.imagePosition && preferences.imagePosition != ImagePosition.hidden"
+            :order="preferences.imagePosition == ImagePosition.left ? -1 : 1"
+            cols="4"
+            align-self="center"
           >
-            <img :key="imageKey"
-                 :src="recipeImageUrl"
-                 style="min-height: 50; max-width: 100%;"
+            <img
+              :key="imageKey"
+              :src="recipeImageUrl"
+              style="min-height: 50; max-width: 100%;"
             >
           </v-col>
           <v-col order="0">
             <v-card-title class="headline pl-0">
-              <v-icon start
-                      color="primary"
+              <v-icon
+                start
+                color="primary"
               >
                 {{ $globals.icons.primary }}
               </v-icon>
@@ -36,17 +39,19 @@
               </div>
             </div>
             <v-row class="d-flex justify-start">
-              <RecipeTimeCard :prep-time="recipe.prepTime"
-                              :total-time="recipe.totalTime"
-                              :perform-time="recipe.performTime"
-                              small
-                              color="white"
-                              class="ml-4"
+              <RecipeTimeCard
+                :prep-time="recipe.prepTime"
+                :total-time="recipe.totalTime"
+                :perform-time="recipe.performTime"
+                small
+                color="white"
+                class="ml-4"
               />
             </v-row>
 
-            <v-card-text v-if="preferences.showDescription"
-                         class="px-0"
+            <v-card-text
+              v-if="preferences.showDescription"
+              class="px-0"
             >
               <SafeMarkdown :source="recipe.description" />
             </v-card-text>
@@ -60,24 +65,29 @@
       <v-card-title class="headline pl-0">
         {{ $t("recipe.ingredients") }}
       </v-card-title>
-      <div v-for="(ingredientSection, sectionIndex) in ingredientSections"
-           :key="`ingredient-section-${sectionIndex}`"
-           class="print-section"
+      <div
+        v-for="(ingredientSection, sectionIndex) in ingredientSections"
+        :key="`ingredient-section-${sectionIndex}`"
+        class="print-section"
       >
-        <h4 v-if="ingredientSection.ingredients[0].title"
-            class="ingredient-title mt-2"
+        <h4
+          v-if="ingredientSection.ingredients[0].title"
+          class="ingredient-title mt-2"
         >
           {{ ingredientSection.ingredients[0].title }}
         </h4>
-        <div class="ingredient-grid"
-             :style="{ gridTemplateRows: `repeat(${Math.ceil(ingredientSection.ingredients.length / 2)}, min-content)` }"
+        <div
+          class="ingredient-grid"
+          :style="{ gridTemplateRows: `repeat(${Math.ceil(ingredientSection.ingredients.length / 2)}, min-content)` }"
         >
-          <template v-for="(ingredient, ingredientIndex) in ingredientSection.ingredients"
-                    :key="`ingredient-${ingredientIndex}`"
+          <template
+            v-for="(ingredient, ingredientIndex) in ingredientSection.ingredients"
+            :key="`ingredient-${ingredientIndex}`"
           >
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <p class="ingredient-body"
-               v-html="parseText(ingredient)"
+            <p
+              class="ingredient-body"
+              v-html="parseText(ingredient)"
             />
           </template>
         </div>
@@ -86,22 +96,26 @@
 
     <!-- Instructions -->
     <section>
-      <div v-for="(instructionSection, sectionIndex) in instructionSections"
-           :key="`instruction-section-${sectionIndex}`"
-           :class="{ 'print-section': instructionSection.sectionName }"
+      <div
+        v-for="(instructionSection, sectionIndex) in instructionSections"
+        :key="`instruction-section-${sectionIndex}`"
+        :class="{ 'print-section': instructionSection.sectionName }"
       >
-        <v-card-title v-if="!sectionIndex"
-                      class="headline pl-0"
+        <v-card-title
+          v-if="!sectionIndex"
+          class="headline pl-0"
         >
           {{ $t("recipe.instructions") }}
         </v-card-title>
-        <div v-for="(step, stepIndex) in instructionSection.instructions"
-             :key="`instruction-${stepIndex}`"
+        <div
+          v-for="(step, stepIndex) in instructionSection.instructions"
+          :key="`instruction-${stepIndex}`"
         >
           <div class="print-section">
-            <h4 v-if="step.title"
-                :key="`instruction-title-${stepIndex}`"
-                class="instruction-title mb-2"
+            <h4
+              v-if="step.title"
+              :key="`instruction-title-${stepIndex}`"
+              class="instruction-title mb-2"
             >
               {{ step.title }}
             </h4>
@@ -112,8 +126,9 @@
                   + 1,
               }) }}
             </h5>
-            <SafeMarkdown :source="step.text"
-                          class="recipe-step-body"
+            <SafeMarkdown
+              :source="step.text"
+              class="recipe-step-body"
             />
           </div>
         </div>
@@ -122,18 +137,21 @@
 
     <!-- Notes -->
     <div v-if="preferences.showNotes">
-      <v-divider v-if="hasNotes"
-                 class="grey my-4"
+      <v-divider
+        v-if="hasNotes"
+        class="grey my-4"
       />
 
       <section>
-        <div v-for="(note, index) in recipe.notes"
-             :key="index + 'note'"
+        <div
+          v-for="(note, index) in recipe.notes"
+          :key="index + 'note'"
         >
           <div class="print-section">
             <h4>{{ note.title }}</h4>
-            <SafeMarkdown :source="note.text"
-                          class="note-body"
+            <SafeMarkdown
+              :source="note.text"
+              class="note-body"
             />
           </div>
         </div>
@@ -150,8 +168,9 @@
         <div class="print-section">
           <table class="nutrition-table">
             <tbody>
-              <tr v-for="(value, key) in recipe.nutrition"
-                  :key="key"
+              <tr
+                v-for="(value, key) in recipe.nutrition"
+                :key="key"
               >
                 <template v-if="value">
                   <td>{{ labels[key].label }}</td>

frontend/components/Domain/Recipe/RecipeRating.vue

@@ -2,7 +2,8 @@
   <div @click.prevent>
     <!-- User Rating -->
     <v-hover v-slot="{ isHovering, props }">
-      <v-rating v-if="isOwnGroup && (userRating || isHovering || !ratingsLoaded)"
+      <v-rating
+        v-if="isOwnGroup && (userRating || isHovering || !ratingsLoaded)"
         v-bind="props"
         :model-value="userRating"
         active-color="secondary"
@@ -15,7 +16,8 @@
         @update:model-value="updateRating(+$event)"
       />
       <!-- Group Rating -->
-      <v-rating v-else
+      <v-rating
+        v-else
         v-bind="props"
         :model-value="groupRating"
         :half-increments="true"