From 4eae48690884b5439da8c339cd3d94ba1a977065 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ars=C3=A8ne=20Reymond?=
 <66876397+p0lycarpio@users.noreply.github.com>
Date: Fri, 17 Jul 2026 20:41:35 +0200
Subject: [PATCH] feat: ui fixes & backup link on onboarding screen (#7743)

---
 .../Domain/Group/GroupAIProviderDialog.vue    |  2 +-
 .../Domain/Recipe/RecipeCardSection.vue       |  1 +
 .../Domain/Recipe/RecipeLastMade.vue          | 20 +++++-----
 .../RecipePageParts/RecipePageInfoCard.vue    |  6 +--
 .../RecipePageParts/RecipePageOrganizers.vue  |  3 +-
 .../RecipePageParts/RecipePageParseDialog.vue |  2 +-
 .../Domain/Recipe/RecipeTimeCard.vue          |  4 +-
 .../Domain/Recipe/RecipeTimeline.vue          | 39 +++++++++----------
 .../Domain/Recipe/RecipeTimelineBadge.vue     |  1 -
 .../components/Domain/Recipe/RecipeYield.vue  |  2 +-
 .../Layout/LayoutParts/AppScrollToTop.vue     |  2 +-
 frontend/app/components/global/AppLoader.vue  | 31 +++++----------
 frontend/app/lang/messages/en-US.json         |  2 +-
 frontend/app/pages/admin/setup.vue            | 15 ++++++-
 frontend/app/pages/admin/site-settings.vue    |  4 +-
 .../g/[groupSlug]/recipes/finder/index.vue    |  8 +---
 16 files changed, 67 insertions(+), 75 deletions(-)

diff --git a/frontend/app/components/Domain/Group/GroupAIProviderDialog.vue b/frontend/app/components/Domain/Group/GroupAIProviderDialog.vue
index 53797dd18..1a4278f67 100644
--- a/frontend/app/components/Domain/Group/GroupAIProviderDialog.vue
+++ b/frontend/app/components/Domain/Group/GroupAIProviderDialog.vue
@@ -89,7 +89,7 @@
         </v-expansion-panels>
       </v-form>
     </v-card-text>
-    <AppLoader v-else waiting-text="" />
+    <AppLoader v-else />
   </BaseDialog>
 </template>
 
diff --git a/frontend/app/components/Domain/Recipe/RecipeCardSection.vue b/frontend/app/components/Domain/Recipe/RecipeCardSection.vue
index fabbec49b..a0d66182a 100644
--- a/frontend/app/components/Domain/Recipe/RecipeCardSection.vue
+++ b/frontend/app/components/Domain/Recipe/RecipeCardSection.vue
@@ -158,6 +158,7 @@
       <AppLoader
         v-if="loading"
         :loading="loading"
+        :waiting-text="$t('general.loading-recipes')"
       />
     </v-fade-transition>
     <AppScrollToTop />
diff --git a/frontend/app/components/Domain/Recipe/RecipeLastMade.vue b/frontend/app/components/Domain/Recipe/RecipeLastMade.vue
index c1c37ca0f..90478dcb1 100644
--- a/frontend/app/components/Domain/Recipe/RecipeLastMade.vue
+++ b/frontend/app/components/Domain/Recipe/RecipeLastMade.vue
@@ -22,7 +22,7 @@
               rows="4"
             />
             <div v-if="childRecipes?.length">
-              <v-card-text class="pt-6 pb-0">
+              <v-card-text class="pt-6 pb-0 text-title-medium">
                 {{ $t('recipe.include-linked-recipes') }}
               </v-card-text>
               <v-list>
@@ -45,14 +45,13 @@
               </v-list>
             </div>
             <v-container>
-              <v-row>
-                <v-col cols="6">
+              <v-row class="mt-4">
+                <v-col cols="5">
                   <v-menu
                     v-model="datePickerMenu"
                     :close-on-content-click="false"
                     transition="scale-transition"
                     offset-y
-                    max-width="290px"
                   >
                     <template #activator="{ props: activatorProps }">
                       <v-text-field
@@ -60,6 +59,8 @@
                         :prepend-icon="$globals.icons.calendar"
                         v-bind="activatorProps"
                         readonly
+                        density="compact"
+                        min-width="160"
                       />
                     </template>
                     <v-date-picker
@@ -72,7 +73,7 @@
                   </v-menu>
                 </v-col>
                 <v-spacer />
-                <v-col cols="auto" align-self="center">
+                <v-col cols="auto">
                   <AppButtonUpload
                     v-if="!newTimelineEventImage"
                     class="ml-auto"
@@ -93,7 +94,7 @@
                 </v-col>
               </v-row>
               <v-row v-if="newTimelineEventImage && newTimelineEventImagePreviewUrl">
-                <v-col cols="12" align-self="center">
+                <v-col cols="12">
                   <ImageCropper
                     :img="newTimelineEventImagePreviewUrl"
                     cropper-height="20vh"
@@ -115,16 +116,17 @@
               <v-btn
                 rounded
                 variant="outlined"
-                size="x-large"
+                size="large"
                 v-bind="tooltipProps"
+                class="font-weight-400"
                 style="border-color: rgb(var(--v-theme-primary));"
                 @click="madeThisDialog = true"
               >
                 <v-icon start size="large" color="primary">
                   {{ $globals.icons.calendar }}
                 </v-icon>
-                <span class="text-body-1 opacity-80">
-                  <b>{{ $t("general.last-made") }}</b>
+                <span class="opacity-80">
+                  <strong>{{ $t("general.last-made") }}</strong>
                   <br>
                   {{ lastMade ? $d(new Date(lastMade)) : $t("general.never") }}
                 </span>
diff --git a/frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue b/frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
index 0591c1ce6..b62623b85 100644
--- a/frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
+++ b/frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoCard.vue
@@ -6,11 +6,11 @@
         :recipe="recipe"
       />
       <v-card
-        :width="landscape ? '100%' : '50%'"
+        :width="landscape || !recipe.image ? '100%' : '50%'"
         flat
         class="d-flex flex-column justify-center align-center"
       >
-        <v-card-text class="w-100">
+        <v-card-text>
           <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 }}
@@ -67,7 +67,7 @@
         </v-card-text>
       </v-card>
       <RecipePageInfoCardImage
-        v-if="!landscape"
+        v-if="!landscape && recipe.image"
         :recipe="recipe"
         max-width="50%"
         class="my-auto"
diff --git a/frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue b/frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
index 6334fa808..65d6e03a0 100644
--- a/frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
+++ b/frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageOrganizers.vue
@@ -54,7 +54,7 @@
     <!-- Recipe Tools Edit -->
     <v-card
       v-if="isEditForm"
-      class="mt-2"
+      class="mt-4"
     >
       <v-card-title class="py-2">
         {{ $t('tool.required-tools') }}
@@ -64,7 +64,6 @@
         <RecipeOrganizerSelector
           v-model="recipe.tools"
           selector-type="tools"
-          v-bind="$attrs"
         />
       </v-card-text>
     </v-card>
diff --git a/frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageParseDialog.vue b/frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageParseDialog.vue
index 20fe48c02..2284bbf45 100644
--- a/frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageParseDialog.vue
+++ b/frontend/app/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageParseDialog.vue
@@ -8,7 +8,7 @@
   >
     <v-container fluid class="pa-2 ma-0" style="background-color: rgb(var(--v-theme-background));">
       <div v-if="state.loading.parser" class="my-6">
-        <AppLoader waiting-text="" class="my-6" />
+        <AppLoader class="my-6" />
       </div>
       <div v-else>
         <BaseCardSectionTitle :title="$t('recipe.parser.ingredient-parser')">
diff --git a/frontend/app/components/Domain/Recipe/RecipeTimeCard.vue b/frontend/app/components/Domain/Recipe/RecipeTimeCard.vue
index db339595c..d15661ad1 100644
--- a/frontend/app/components/Domain/Recipe/RecipeTimeCard.vue
+++ b/frontend/app/components/Domain/Recipe/RecipeTimeCard.vue
@@ -44,7 +44,7 @@
         >
           <v-icon
             :size="small ? 'small' : 'large'"
-            left
+            start
             color="primary"
           >
             {{ $globals.icons.knife }}
@@ -64,7 +64,7 @@
         >
           <v-icon
             :size="small ? 'small' : 'large'"
-            left
+            start
             color="primary"
           >
             {{ $globals.icons.potSteam }}
diff --git a/frontend/app/components/Domain/Recipe/RecipeTimeline.vue b/frontend/app/components/Domain/Recipe/RecipeTimeline.vue
index 170e33db0..c3d40434f 100644
--- a/frontend/app/components/Domain/Recipe/RecipeTimeline.vue
+++ b/frontend/app/components/Domain/Recipe/RecipeTimeline.vue
@@ -18,13 +18,11 @@
               bordered
             >
               <v-btn
-                class="rounded-circle"
-                size="small"
-                color="info"
+                variant="text"
                 v-bind="activatorProps"
-                icon
+                :prepend-icon="$globals.icons.filter"
               >
-                <v-icon> {{ $globals.icons.filter }} </v-icon>
+                {{ $t("general.filter") }}
               </v-btn>
             </v-badge>
           </template>
@@ -39,28 +37,24 @@
               <v-list-item
                 v-for="option, idx in eventTypeFilterState"
                 :key="idx"
+                :active="option.checked"
+                :color="option.checked ? 'primary' : undefined"
+                @click="toggleEventTypeOption(option.value)"
               >
-                <v-checkbox
-                  :model-value="option.checked"
-                  color="primary"
-                  readonly
-                  hide-details
-                  @click="toggleEventTypeOption(option.value)"
-                >
-                  <template #label>
-                    <v-icon start>
-                      {{ option.icon }}
-                    </v-icon>
-                    {{ option.label }}
-                  </template>
-                </v-checkbox>
+                <template #prepend>
+                  <v-icon>
+                    {{ option.icon }}
+                  </v-icon>
+                </template>
+                <v-list-item-title>
+                  {{ option.label }}
+                </v-list-item-title>
               </v-list-item>
             </v-list>
           </v-card>
         </v-menu>
       </v-col>
     </v-row>
-    <v-divider class="mx-2" />
     <div
       v-if="timelineEvents.length"
       id="timeline-container"
@@ -213,7 +207,10 @@ async function deleteTimelineEvent(index: number) {
 }
 
 async function getRecipes(recipeIds: string[]): Promise<Recipe[]> {
-  const qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
+  let qf = "";
+  if (recipeIds.length) {
+    qf = "id IN [" + recipeIds.map(id => `"${id}"`).join(", ") + "]";
+  }
   const { data } = await api.recipes.getAll(1, -1, { queryFilter: qf });
   return data?.items || [];
 }
diff --git a/frontend/app/components/Domain/Recipe/RecipeTimelineBadge.vue b/frontend/app/components/Domain/Recipe/RecipeTimelineBadge.vue
index ae3f5924a..c5dceb0af 100644
--- a/frontend/app/components/Domain/Recipe/RecipeTimelineBadge.vue
+++ b/frontend/app/components/Domain/Recipe/RecipeTimelineBadge.vue
@@ -31,7 +31,6 @@
         <RecipeTimeline
           v-model="showTimeline"
           :query-filter="timelineAttrs.queryFilter"
-          max-height="60vh"
         />
       </BaseDialog>
     </template>
diff --git a/frontend/app/components/Domain/Recipe/RecipeYield.vue b/frontend/app/components/Domain/Recipe/RecipeYield.vue
index 892b74fbe..bc9b1fb59 100644
--- a/frontend/app/components/Domain/Recipe/RecipeYield.vue
+++ b/frontend/app/components/Domain/Recipe/RecipeYield.vue
@@ -9,7 +9,7 @@
       style="font-size: larger;"
     >
       <v-icon
-        size="x-large"
+        size="large"
         start
         color="primary"
       >
diff --git a/frontend/app/components/Layout/LayoutParts/AppScrollToTop.vue b/frontend/app/components/Layout/LayoutParts/AppScrollToTop.vue
index eaddd2627..f5d335166 100644
--- a/frontend/app/components/Layout/LayoutParts/AppScrollToTop.vue
+++ b/frontend/app/components/Layout/LayoutParts/AppScrollToTop.vue
@@ -25,7 +25,7 @@ function onScroll() {
 }
 
 function scrollToTop() {
-  document.documentElement.scrollTop = 0;
+  window.scrollTo({ top: 0, behavior: "smooth" });
 }
 
 onMounted(() => {
diff --git a/frontend/app/components/global/AppLoader.vue b/frontend/app/components/global/AppLoader.vue
index f5a0d8af6..9b2ee6040 100644
--- a/frontend/app/components/global/AppLoader.vue
+++ b/frontend/app/components/global/AppLoader.vue
@@ -3,34 +3,21 @@
     class="mx-auto my-3 justify-center"
     style="display: flex;"
   >
-    <div style="display: inline;">
+    <div class="text-center">
       <v-progress-circular
         :width="size.width"
         :size="size.size"
         color="primary-lighten-2"
         indeterminate
       >
-        <div class="text-center">
-          <v-icon
-            :size="size.icon"
-            color="primary-lighten-2"
-          >
-            {{ $globals.icons.primary }}
-          </v-icon>
-          <div
-            v-if="large"
-            class="text-small"
-          >
-            <slot>
-              {{ (small || tiny) ? "" : waitingText }}
-            </slot>
-          </div>
-        </div>
+        <v-icon
+          :size="size.icon"
+          color="primary-lighten-2"
+        >
+          {{ $globals.icons.primary }}
+        </v-icon>
       </v-progress-circular>
-      <div
-        v-if="!large"
-        class="text-small"
-      >
+      <div :class="large ? 'text-title-large mt-5' : 'text-body-large mt-3'">
         <slot>
           {{ (small || tiny) ? "" : waitingTextCalculated }}
         </slot>
@@ -97,5 +84,5 @@ const size = computed(() => {
 });
 
 const i18n = useI18n();
-const waitingTextCalculated = props.waitingText == null ? i18n.t("general.loading-recipes") : props.waitingText;
+const waitingTextCalculated = props.waitingText == null ? i18n.t("general.loading") : props.waitingText;
 </script>
diff --git a/frontend/app/lang/messages/en-US.json b/frontend/app/lang/messages/en-US.json
index 572be17c1..1deb85b2d 100644
--- a/frontend/app/lang/messages/en-US.json
+++ b/frontend/app/lang/messages/en-US.json
@@ -1399,10 +1399,10 @@
     "setup": {
       "first-time-setup": "First Time Setup",
       "welcome-to-mealie-get-started": "Welcome to Mealie! Let's get started",
+      "previous-mealie-instance": "Did you have a previous Mealie instance?",
       "already-set-up-bring-to-homepage": "I'm already set up, just bring me to the homepage",
       "common-settings-for-new-sites": "Here are some common settings for new sites",
       "setup-complete": "Setup Complete!",
-
       "ai-providers-description": "Optionally configure AI providers for your group. AI providers enable features like creating recipes from images, importing recipes from videos, and enhanced ingredient parsing. You can always configure this later from your group settings.",
       "here-are-a-few-things-to-help-you-get-started": "Here are a few things to help you get started with Mealie",
       "restore-from-v1-backup": "Have a backup from a previous instance of Mealie v1? You can restore it here.",
diff --git a/frontend/app/pages/admin/setup.vue b/frontend/app/pages/admin/setup.vue
index 87bf27336..048d27eb7 100644
--- a/frontend/app/pages/admin/setup.vue
+++ b/frontend/app/pages/admin/setup.vue
@@ -81,9 +81,22 @@
           <v-stepper-window-item :value="Pages.LANDING">
             <v-container class="mb-12">
               <AppLogo />
-              <v-card-title class="text-h4 justify-center text-center text-break text-pre-wrap">
+              <v-card-title class="text-headline-medium my-5 justify-center text-center text-break text-pre-wrap">
                 {{ $t('admin.setup.welcome-to-mealie-get-started') }}
               </v-card-title>
+              <p class="text-body-1 text-center">
+                {{ $t('admin.setup.previous-mealie-instance') }}
+              </p>
+              <v-btn
+                to="backups"
+                rounded
+                variant="outlined"
+                color="primary"
+                class="text-subtitle-2 d-flex mx-auto my-3"
+                style="width: fit-content;"
+              >
+                {{ $t('settings.backup.restore-backup') }}
+              </v-btn>
               <v-btn
                 :to="groupSlug ? `/g/${groupSlug}` : '/login'"
                 rounded
diff --git a/frontend/app/pages/admin/site-settings.vue b/frontend/app/pages/admin/site-settings.vue
index 4438d9708..aada76525 100644
--- a/frontend/app/pages/admin/site-settings.vue
+++ b/frontend/app/pages/admin/site-settings.vue
@@ -248,9 +248,7 @@
           </template>
         </template>
         <template v-else>
-          <div class="mb-3 text-center">
-            <AppLoader :waiting-text="$t('general.loading')" />
-          </div>
+          <AppLoader />
         </template>
       </v-card>
     </section>
diff --git a/frontend/app/pages/g/[groupSlug]/recipes/finder/index.vue b/frontend/app/pages/g/[groupSlug]/recipes/finder/index.vue
index 4bfca2f86..d8f86a009 100644
--- a/frontend/app/pages/g/[groupSlug]/recipes/finder/index.vue
+++ b/frontend/app/pages/g/[groupSlug]/recipes/finder/index.vue
@@ -372,9 +372,7 @@
                 cols="12"
                 class="d-flex justify-center"
               >
-                <div class="text-center">
-                  <AppLoader waiting-text="" />
-                </div>
+                <AppLoader :waiting-text="$t('general.loading-recipes')" />
               </v-col>
             </v-row>
           </v-container>
@@ -402,9 +400,7 @@
           cols="12"
           class="d-flex justify-center"
         >
-          <div class="text-center">
-            <AppLoader waiting-text="" />
-          </div>
+          <AppLoader :waiting-text="$t('general.loading-recipes')" />
         </v-col>
       </v-row>
     </v-container>