Merge branch 'mealie-next' into feat/announcements

2026-04-11 15:35:36 -04:00 · 2026-04-10 10:56:50 -05:00
parent 5574418526 731e3aef37
commit e319fdcabc
29 changed files with 197 additions and 223 deletions
--- a/frontend/app/assets/main.css
+++ b/frontend/app/assets/main.css
@@ -61,10 +61,6 @@
  max-width: 100%;
 }

-a {
-  color: rgb(var(--v-theme-primary));
-}
-
 .fill-height {
  min-height: 100vh;
 }
@@ -72,3 +68,8 @@ a {
 .vue-simple-handler {
  background-color: rgb(var(--v-theme-primary)) !important;
 }
+
+p {
+  margin-top: 0;
+  margin-bottom: 0;
+}
--- a/frontend/app/components/Domain/Recipe/RecipeCard.vue
+++ b/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">
--- a/frontend/app/components/Domain/Recipe/RecipeCardSection.vue
+++ b/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
--- a/frontend/app/components/Domain/Recipe/RecipeIngredientEditor.vue
+++ b/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
--- a/frontend/app/components/Domain/Recipe/RecipeOrganizerPage.vue
+++ b/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"
--- a/frontend/app/components/Domain/Recipe/RecipeOrganizerSelector.vue
+++ b/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"
--- a/frontend/app/components/Domain/Recipe/RecipePage/RecipePage.vue
+++ b/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"
--- a/frontend/app/components/Layout/DefaultLayout.vue
+++ b/frontend/app/components/Layout/DefaultLayout.vue
@@ -13,7 +13,6 @@

    <AppSidebar
      v-model="sidebar"
-      absolute
      :top-link="topLinks"
      :secondary-links="cookbookLinks || []"
    >
--- a/frontend/app/components/Layout/LayoutParts/AppFooter.vue
+++ b/frontend/app/components/Layout/LayoutParts/AppFooter.vue
@@ -7,7 +7,7 @@
    <v-row
      justify="center"
      align="center"
-      dense
+      density="comfortable"
      no-gutters
    >
      <v-col
--- a/frontend/app/components/global/BannerExperimental.vue
+++ b/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>
--- a/frontend/app/components/global/BaseDialog.vue
+++ b/frontend/app/components/global/BaseDialog.vue
@@ -40,9 +40,9 @@
        </div>

        <v-spacer />
-        <v-divider class="mx-2" />
+        <v-divider />

-        <v-card-actions>
+        <v-card-actions :class="$vuetify.display.xs ? 'pb-4' : 'undefined'">
          <slot name="card-actions">
            <v-btn
              variant="text"
@@ -93,13 +93,6 @@
            </BaseButton>
          </slot>
        </v-card-actions>
-
-        <div
-          v-if="$slots['below-actions']"
-          class="pb-4"
-        >
-          <slot name="below-actions" />
-        </div>
      </v-card>
    </v-dialog>
  </div>
--- a/frontend/app/components/global/ContextMenu.vue
+++ b/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>
--- a/frontend/app/components/global/LanguageDialog.vue
+++ b/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>
--- a/frontend/app/layouts/admin.vue
+++ b/frontend/app/layouts/admin.vue
@@ -13,7 +13,6 @@

    <AppSidebar
      v-model="sidebar"
-      absolute
      :top-link="topLinks"
      :user="{ data: true }"
      :secondary-header="$t('sidebar.developer')"
--- a/frontend/app/pages/admin/backups.vue
+++ b/frontend/app/pages/admin/backups.vue
@@ -33,7 +33,7 @@
          <p class="mt-3">
            <i18n-t keypath="settings.backup.postgresql-note">
              <template #backup-restore-process>
-                <a href="https://nightly.mealie.io/documentation/getting-started/usage/backups-and-restoring/">{{
+                <a class="text-primary" href="https://nightly.mealie.io/documentation/getting-started/usage/backups-and-restoring/">{{
                  $t('settings.backup.backup-restore-process-in-the-documentation') }}</a>
              </template>
            </i18n-t>
@@ -146,7 +146,7 @@
      </section>
    </section>
    <v-container class="mt-4 d-flex justify-center text-center">
-      <nuxt-link :to="`/group/migrations`"> {{ $t('recipe.looking-for-migrations') }} </nuxt-link>
+      <nuxt-link class="text-primary" :to="`/group/migrations`"> {{ $t('recipe.looking-for-migrations') }} </nuxt-link>
    </v-container>
  </v-container>
 </template>
--- a/frontend/app/pages/admin/site-settings.vue
+++ b/frontend/app/pages/admin/site-settings.vue
@@ -177,6 +177,7 @@
              <template v-if="property.slot === 'recipe-scraper'">
                <v-list-item-subtitle>
                  <a
+                    class="text-primary"
                    target="_blank"
                    :href="`https://github.com/hhursev/recipe-scrapers/releases/tag/${property.value}`"
                  >
@@ -187,6 +188,7 @@
              <template v-else-if="property.slot === 'build'">
                <v-list-item-subtitle>
                  <a
+                    class="text-primary"
                    target="_blank"
                    :href="`https://github.com/mealie-recipes/mealie/commit/${property.value}`"
                  >
@@ -197,6 +199,7 @@
              <template v-else-if="property.slot === 'version' && property.value !== 'develop' && property.value !== 'nightly'">
                <v-list-item-subtitle>
                  <a
+                    class="text-primary"
                    target="_blank"
                    :href="`https://github.com/mealie-recipes/mealie/releases/tag/${property.value}`"
                  >
--- a/frontend/app/pages/g/[groupSlug]/r/create/html.vue
+++ b/frontend/app/pages/g/[groupSlug]/r/create/html.vue
@@ -16,6 +16,7 @@
          <a
            href="https://schema.org/Recipe"
            target="_blank"
+            class="text-primary"
          >https://schema.org/Recipe</a>
        </p>
        <v-switch
--- a/frontend/app/pages/g/[groupSlug]/r/create/url.vue
+++ b/frontend/app/pages/g/[groupSlug]/r/create/url.vue
@@ -18,11 +18,11 @@
          <v-card-text class="px-0">
            <p>
              {{ $t('recipe.scrape-recipe-have-a-lot-of-recipes') }}
-              <router-link :to="bulkImporterTarget">{{ $t('recipe.scrape-recipe-suggest-bulk-importer') }}</router-link>.
+              <router-link :to="bulkImporterTarget" class="text-primary">{{ $t('recipe.scrape-recipe-suggest-bulk-importer') }}</router-link>.
            </p>
            <p>
              {{ $t('recipe.scrape-recipe-have-raw-html-or-json-data') }}
-              <router-link :to="htmlOrJsonImporterTarget">{{ $t('recipe.scrape-recipe-you-can-import-from-raw-data-directly') }}</router-link>.
+              <router-link :to="htmlOrJsonImporterTarget" class="text-primary">{{ $t('recipe.scrape-recipe-you-can-import-from-raw-data-directly') }}</router-link>.
            </p>
          </v-card-text>
          <v-text-field
@@ -113,7 +113,7 @@
        </div>
        <div class="d-flex row justify-space-around my-3 force-url-white">
          <a
-            class="dark"
+            class="dark text-primary"
            href="https://developers.google.com/search/docs/data-types/recipe"
            target="_blank"
            rel="noreferrer nofollow"
@@ -121,6 +121,7 @@
            {{ $t("new-recipe.google-ld-json-info") }}
          </a>
          <a
+            class="text-primary"
            href="https://github.com/mealie-recipes/mealie/issues"
            target="_blank"
            rel="noreferrer nofollow"
@@ -128,6 +129,7 @@
            {{ $t("new-recipe.github-issues") }}
          </a>
          <a
+            class="text-primary"
            href="https://schema.org/Recipe"
            target="_blank"
            rel="noreferrer nofollow"
--- a/frontend/app/pages/household/mealplan/planner/edit.vue
+++ b/frontend/app/pages/household/mealplan/planner/edit.vue
@@ -71,9 +71,10 @@
        :key="index"
        cols="12"
        sm="12"
-        md="3"
-        lg="3"
-        xl="2"
+        md="6"
+        lg="4"
+        xl="3"
+        xxl="2"
        class="col-borders my-1 d-flex flex-column"
      >
        <v-card class="mb-2 border-left-primary rounded-sm pa-2">
--- a/frontend/app/pages/household/mealplan/planner/view.vue
+++ b/frontend/app/pages/household/mealplan/planner/view.vue
@@ -6,9 +6,10 @@
        :key="index"
        cols="12"
        sm="12"
-        md="4"
+        md="6"
        lg="4"
-        xl="2"
+        xl="3"
+        xxl="2"
        class="col-borders my-1 d-flex flex-column"
      >
        <v-card class="mb-2 border-left-primary rounded-sm px-2">
--- a/frontend/app/pages/household/members.vue
+++ b/frontend/app/pages/household/members.vue
@@ -22,7 +22,7 @@
      </i18n-t>
      <v-container class="mt-1 px-0">
        <nuxt-link
-          class="text-center"
+          class="text-center text-primary"
          :to="`/user/profile/edit`"
        > {{ $t('group.looking-to-update-your-profile') }}
        </nuxt-link>
--- a/frontend/app/pages/household/notifiers.vue
+++ b/frontend/app/pages/household/notifiers.vue
@@ -49,34 +49,34 @@
        <a
          href="https://github.com/caronc/apprise/wiki"
          target="_blanks"
-          class="mx-2"
+          class="mx-2 text-primary"
        > Apprise </a>
        <a
          href="https://github.com/caronc/apprise/wiki/Notify_gotify"
          target="_blanks"
-          class="mx-2"
+          class="mx-2 text-primary"
        > Gotify </a>
        <a
          href="https://github.com/caronc/apprise/wiki/Notify_discord"
          target="_blanks"
-          class="mx-2"
+          class="mx-2 text-primary"
        > Discord </a>
        <a
          href="https://github.com/caronc/apprise/wiki/Notify_homeassistant"
          target="_blanks"
-          class="mx-2"
+          class="mx-2 text-primary"
        > Home
          Assistant
        </a>
        <a
          href="https://github.com/caronc/apprise/wiki/Notify_matrix"
          target="_blanks"
-          class="mx-2"
+          class="mx-2 text-primary"
        > Matrix </a>
        <a
          href="https://github.com/caronc/apprise/wiki/Notify_pushover"
          target="_blanks"
-          class="mx-2"
+          class="mx-2 text-primary"
        > Pushover </a>
      </div>
    </BasePageTitle>
--- a/frontend/app/pages/user/profile/edit.vue
+++ b/frontend/app/pages/user/profile/edit.vue
@@ -200,7 +200,7 @@
        </v-card-text>
      </v-card>
      <nuxt-link
-        class="mt-5 d-flex flex-column justify-center text-center"
+        class="mt-5 d-flex flex-column justify-center text-center text-primary"
        :to="`/group`"
      > {{
        $t('profile.looking-for-privacy-settings') }} </nuxt-link>
--- a/frontend/app/plugins/dark-mode.client.ts
+++ b/frontend/app/plugins/dark-mode.client.ts
@@ -6,12 +6,12 @@ export default defineNuxtPlugin((nuxtApp) => {
      console.log(`changing theme to ${v ? "dark" : "light"} using @vueuse/useDark`);
      const $vuetify = nuxtApp.vueApp.$nuxt.$vuetify;
      if ($vuetify)
-        $vuetify.theme.global.name.value = v ? "dark" : "light";
+        $vuetify.theme.toggle();
    },
  });

  nuxtApp.hook("vuetify:ready", (vuetify) => {
-    vuetify.theme.global.name.value = isDark.value ? "dark" : "light";
+    vuetify.theme.change(isDark.value ? "dark" : "light");
  });

  return {