fix: Optimize Recipe Context Menu (#6071)

frontend/components/Domain/Recipe/RecipeActionMenu.vue

@@ -87,7 +87,7 @@
 </template>
 
 <script setup lang="ts">
-import RecipeContextMenu from "./RecipeContextMenu.vue";
+import RecipeContextMenu from "./RecipeContextMenu/RecipeContextMenu.vue";
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeTimelineBadge from "./RecipeTimelineBadge.vue";
 import type { Recipe } from "~/lib/api/types/recipe";

frontend/components/Domain/Recipe/RecipeCard.vue

@@ -72,9 +72,10 @@
 
               <!-- If we're not logged-in, no items display, so we hide this menu -->
               <RecipeContextMenu
-                v-if="isOwnGroup"
+                v-if="isOwnGroup && showRecipeContent"
                 color="grey-darken-2"
                 :slug="slug"
+                :menu-icon="$globals.icons.dotsVertical"
                 :name="name"
                 :recipe-id="recipeId"
                 :use-items="{
@@ -87,7 +88,7 @@
                   printPreferences: false,
                   share: true,
                 }"
-                @delete="$emit('delete', slug)"
+                @deleted="$emit('delete', slug)"
               />
             </v-card-actions>
           </slot>
@@ -100,7 +101,7 @@
 <script setup lang="ts">
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
 import RecipeChips from "./RecipeChips.vue";
-import RecipeContextMenu from "./RecipeContextMenu.vue";
+import RecipeContextMenu from "./RecipeContextMenu/RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
 import RecipeCardRating from "./RecipeCardRating.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";

frontend/components/Domain/Recipe/RecipeCardMobile.vue

@@ -126,7 +126,7 @@
 
 <script setup lang="ts">
 import RecipeFavoriteBadge from "./RecipeFavoriteBadge.vue";
-import RecipeContextMenu from "./RecipeContextMenu.vue";
+import RecipeContextMenu from "./RecipeContextMenu/RecipeContextMenu.vue";
 import RecipeCardImage from "./RecipeCardImage.vue";
 import RecipeCardRating from "./RecipeCardRating.vue";
 import RecipeChips from "./RecipeChips.vue";

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

@@ -0,0 +1,142 @@
+<template>
+  <div class="text-center">
+    <v-menu
+      offset-y
+      start
+      :bottom="!menuTop"
+      :nudge-bottom="!menuTop ? '5' : '0'"
+      :top="menuTop"
+      :nudge-top="menuTop ? '5' : '0'"
+      allow-overflow
+      close-delay="125"
+      :open-on-hover="$vuetify.display.mdAndUp"
+      content-class="d-print-none"
+      @update:model-value="onMenuToggle"
+    >
+      <template #activator="{ props: activatorProps }">
+        <v-btn
+          icon
+          :variant="fab ? 'flat' : undefined"
+          :rounded="fab ? 'circle' : undefined"
+          :size="fab ? 'small' : undefined"
+          :color="fab ? 'info' : 'secondary'"
+          :fab="fab"
+          v-bind="activatorProps"
+          @click.prevent
+          @mouseenter="onHover"
+        >
+          <v-icon
+            :size="!fab ? undefined : 'x-large'"
+            :color="fab ? 'white' : 'secondary'"
+          >
+            {{ icon }}
+          </v-icon>
+        </v-btn>
+      </template>
+
+      <RecipeContextMenuContent
+        v-if="isMenuContentLoaded"
+        v-bind="contentProps"
+        @deleted="$emit('deleted', $event)"
+      />
+    </v-menu>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Recipe } from "~/lib/api/types/recipe";
+
+interface ContextMenuIncludes {
+  delete?: boolean;
+  edit?: boolean;
+  download?: boolean;
+  duplicate?: boolean;
+  mealplanner?: boolean;
+  shoppingList?: boolean;
+  print?: boolean;
+  printPreferences?: boolean;
+  share?: boolean;
+  recipeActions?: boolean;
+}
+
+interface ContextMenuItem {
+  title: string;
+  icon: string;
+  color?: string;
+  event: string;
+  isPublic: boolean;
+}
+
+interface Props {
+  useItems?: ContextMenuIncludes;
+  appendItems?: ContextMenuItem[];
+  leadingItems?: ContextMenuItem[];
+  menuTop?: boolean;
+  fab?: boolean;
+  color?: string;
+  slug: string;
+  menuIcon?: string | null;
+  name: string;
+  recipe?: Recipe;
+  recipeId: string;
+  recipeScale?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  useItems: () => ({
+    delete: true,
+    edit: true,
+    download: true,
+    duplicate: false,
+    mealplanner: true,
+    shoppingList: true,
+    print: true,
+    printPreferences: true,
+    share: true,
+    recipeActions: true,
+  }),
+  appendItems: () => [],
+  leadingItems: () => [],
+  menuTop: true,
+  fab: false,
+  color: "primary",
+  menuIcon: null,
+  recipe: undefined,
+  recipeScale: 1,
+});
+
+defineEmits<{
+  [key: string]: any;
+  deleted: [slug: string];
+}>();
+
+const { $globals } = useNuxtApp();
+
+const isMenuContentLoaded = ref(false);
+
+const icon = computed(() => {
+  return props.menuIcon || $globals.icons.dotsVertical;
+});
+
+// Props to pass to the content component (excluding internal wrapper props)
+const contentProps = computed(() => {
+  const { ...rest } = props;
+  return rest;
+});
+
+function onHover() {
+  if (!isMenuContentLoaded.value) {
+    isMenuContentLoaded.value = true;
+  }
+}
+
+function onMenuToggle(isOpen: boolean) {
+  if (isOpen && !isMenuContentLoaded.value) {
+    isMenuContentLoaded.value = true;
+  }
+}
+
+const RecipeContextMenuContent = defineAsyncComponent(
+  () => import("./RecipeContextMenuContent.vue"),
+);
+</script>

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

@@ -1,159 +1,125 @@
 <template>
-  <div class="text-center">
+  <RecipeDialogShare v-model="shareDialog" :recipe-id="recipeId" :name="name" />
-    <!-- Recipe Share Dialog -->
+  <RecipeDialogPrintPreferences v-model="printPreferencesDialog" :recipe="recipeRef" />
-    <RecipeDialogShare v-model="shareDialog" :recipe-id="recipeId" :name="name" />
+  <BaseDialog
-    <RecipeDialogPrintPreferences v-model="printPreferencesDialog" :recipe="recipeRef" />
+    v-model="recipeDeleteDialog"
-    <BaseDialog
+    :title="$t('recipe.delete-recipe')"
-      v-model="recipeDeleteDialog"
+    color="error"
-      :title="$t('recipe.delete-recipe')"
+    :icon="$globals.icons.alertCircle"
-      color="error"
+    can-confirm
-      :icon="$globals.icons.alertCircle"
+    @confirm="deleteRecipe()"
-      can-confirm
+  >
-      @confirm="deleteRecipe()"
+    <v-card-text>
-    >
+      <template v-if="isAdminAndNotOwner">
-      <v-card-text>
+        {{ $t("recipe.admin-delete-confirmation") }}
-        <template v-if="isAdminAndNotOwner">
-          {{ $t("recipe.admin-delete-confirmation") }}
-        </template>
-        <template v-else>
-          {{ $t("recipe.delete-confirmation") }}
-        </template>
-      </v-card-text>
-    </BaseDialog>
-    <BaseDialog
-      v-model="recipeDuplicateDialog"
-      :title="$t('recipe.duplicate')"
-      color="primary"
-      :icon="$globals.icons.duplicate"
-      can-confirm
-      @confirm="duplicateRecipe()"
-    >
-      <v-card-text>
-        <v-text-field
-          v-model="recipeName"
-          density="compact"
-          :label="$t('recipe.recipe-name')"
-          autofocus
-          @keyup.enter="duplicateRecipe()"
-        />
-      </v-card-text>
-    </BaseDialog>
-    <BaseDialog
-      v-model="mealplannerDialog"
-      :title="$t('recipe.add-recipe-to-mealplan')"
-      color="primary"
-      :icon="$globals.icons.calendar"
-      can-confirm
-      @confirm="addRecipeToPlan()"
-    >
-      <v-card-text>
-        <v-menu
-          v-model="pickerMenu"
-          :close-on-content-click="false"
-          transition="scale-transition"
-          offset-y
-          max-width="290px"
-          min-width="auto"
-        >
-          <template #activator="{ props: activatorProps }">
-            <v-text-field
-              v-model="newMealdateString"
-              :label="$t('general.date')"
-              :prepend-icon="$globals.icons.calendar"
-              v-bind="activatorProps"
-              readonly
-            />
-          </template>
-          <v-date-picker
-            v-model="newMealdate"
-            hide-header
-            :first-day-of-week="firstDayOfWeek"
-            :local="$i18n.locale"
-             @update:model-value="pickerMenu = false"
-          />
-        </v-menu>
-        <v-select
-          v-model="newMealType"
-          :return-object="false"
-          :items="planTypeOptions"
-          :label="$t('recipe.entry-type')"
-          item-title="text"
-          item-value="value"
-        />
-      </v-card-text>
-    </BaseDialog>
-    <RecipeDialogAddToShoppingList
-      v-if="shoppingLists && recipeRefWithScale"
-      v-model="shoppingListDialog"
-      :recipes="[recipeRefWithScale]"
-      :shopping-lists="shoppingLists"
-    />
-    <v-menu
-      offset-y
-      start
-      :bottom="!menuTop"
-      :nudge-bottom="!menuTop ? '5' : '0'"
-      :top="menuTop"
-      :nudge-top="menuTop ? '5' : '0'"
-      allow-overflow
-      close-delay="125"
-      :open-on-hover="$vuetify.display.mdAndUp"
-      content-class="d-print-none"
-    >
-      <template #activator="{ props: activatorProps }">
-        <v-btn
-          icon
-          :variant="fab ? 'flat' : undefined"
-          :rounded="fab ? 'circle' : undefined"
-          :size="fab ? 'small' : undefined"
-          :color="fab ? 'info' : 'secondary'"
-          :fab="fab"
-          v-bind="activatorProps"
-          @click.prevent
-        >
-          <v-icon
-          :size="!fab ? undefined : 'x-large'"
-          :color="fab ? 'white' : 'secondary'"
-        >
-          {{ icon }}
-        </v-icon>
-        </v-btn>
       </template>
-      <v-list density="compact">
+      <template v-else>
-        <v-list-item v-for="(item, index) in menuItems" :key="index" @click="contextMenuEventHandler(item.event)">
+        {{ $t("recipe.delete-confirmation") }}
-          <template #prepend>
+      </template>
-            <v-icon :color="item.color">
+    </v-card-text>
-              {{ item.icon }}
+  </BaseDialog>
-            </v-icon>
+  <BaseDialog
-          </template>
+    v-model="recipeDuplicateDialog"
-          <v-list-item-title>{{ item.title }}</v-list-item-title>
+    :title="$t('recipe.duplicate')"
-        </v-list-item>
+    color="primary"
-        <div v-if="useItems.recipeActions && recipeActions && recipeActions.length">
+    :icon="$globals.icons.duplicate"
-          <v-divider />
+    can-confirm
-          <v-list-item
+    @confirm="duplicateRecipe()"
-            v-for="(action, index) in recipeActions"
+  >
-            :key="index"
+    <v-card-text>
-            @click="executeRecipeAction(action)"
+      <v-text-field
-          >
+        v-model="recipeName"
-            <template #prepend>
+        density="compact"
-              <v-icon color="undefined">
+        :label="$t('recipe.recipe-name')"
-                {{ $globals.icons.linkVariantPlus }}
+        autofocus
-              </v-icon>
+        @keyup.enter="duplicateRecipe()"
-            </template>
+      />
-            <v-list-item-title>
+    </v-card-text>
-              {{ action.title }}
+  </BaseDialog>
-            </v-list-item-title>
+  <BaseDialog
-          </v-list-item>
+    v-model="mealplannerDialog"
-        </div>
+    :title="$t('recipe.add-recipe-to-mealplan')"
-      </v-list>
+    color="primary"
-    </v-menu>
+    :icon="$globals.icons.calendar"
-  </div>
+    can-confirm
+    @confirm="addRecipeToPlan()"
+  >
+    <v-card-text>
+      <v-menu
+        v-model="pickerMenu"
+        :close-on-content-click="false"
+        transition="scale-transition"
+        offset-y
+        max-width="290px"
+        min-width="auto"
+      >
+        <template #activator="{ props: activatorProps }">
+          <v-text-field
+            v-model="newMealdateString"
+            :label="$t('general.date')"
+            :prepend-icon="$globals.icons.calendar"
+            v-bind="activatorProps"
+            readonly
+          />
+        </template>
+        <v-date-picker
+          v-model="newMealdate"
+          hide-header
+          :first-day-of-week="firstDayOfWeek"
+          :local="$i18n.locale"
+            @update:model-value="pickerMenu = false"
+        />
+      </v-menu>
+      <v-select
+        v-model="newMealType"
+        :return-object="false"
+        :items="planTypeOptions"
+        :label="$t('recipe.entry-type')"
+        item-title="text"
+        item-value="value"
+      />
+    </v-card-text>
+  </BaseDialog>
+  <RecipeDialogAddToShoppingList
+    v-if="shoppingLists && recipeRefWithScale"
+    v-model="shoppingListDialog"
+    :recipes="[recipeRefWithScale]"
+    :shopping-lists="shoppingLists"
+  />
+
+  <v-list density="compact">
+    <v-list-item v-for="(item, index) in menuItems" :key="index" @click="contextMenuEventHandler(item.event)">
+      <template #prepend>
+        <v-icon :color="item.color">
+          {{ item.icon }}
+        </v-icon>
+      </template>
+      <v-list-item-title>{{ item.title }}</v-list-item-title>
+    </v-list-item>
+    <div v-if="useItems.recipeActions && recipeActions && recipeActions.length">
+      <v-divider />
+      <v-list-item
+        v-for="(action, index) in recipeActions"
+        :key="index"
+        @click="executeRecipeAction(action)"
+      >
+        <template #prepend>
+          <v-icon color="undefined">
+            {{ $globals.icons.linkVariantPlus }}
+          </v-icon>
+        </template>
+        <v-list-item-title>
+          {{ action.title }}
+        </v-list-item-title>
+      </v-list-item>
+    </div>
+  </v-list>
 </template>
 
 <script setup lang="ts">
-import RecipeDialogAddToShoppingList from "./RecipeDialogAddToShoppingList.vue";
+import RecipeDialogAddToShoppingList from "~/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue";
-import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
+import RecipeDialogPrintPreferences from "~/components/Domain/Recipe/RecipeDialogPrintPreferences.vue";
-import RecipeDialogShare from "./RecipeDialogShare.vue";
+import RecipeDialogShare from "~/components/Domain/Recipe/RecipeDialogShare.vue";
 import { useLoggedInState } from "~/composables/use-logged-in-state";
 import { useUserApi } from "~/composables/api";
 import { useGroupRecipeActions } from "~/composables/use-group-recipe-actions";
@@ -336,8 +302,6 @@ const defaultItems: { [key: string]: ContextMenuItem } = {
 // Add leading and Appending Items
 menuItems.value = [...menuItems.value, ...props.leadingItems, ...props.appendItems];
 
-const icon = props.menuIcon || $globals.icons.dotsVertical;
-
 // ===========================================================================
 // Context Menu Event Handler