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,6 +1,4 @@
 <template>
-  <div class="text-center">
-    <!-- Recipe Share Dialog -->
   <RecipeDialogShare v-model="shareDialog" :recipe-id="recipeId" :name="name" />
   <RecipeDialogPrintPreferences v-model="printPreferencesDialog" :recipe="recipeRef" />
   <BaseDialog
@@ -88,37 +86,7 @@
     :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">
     <v-list-item v-for="(item, index) in menuItems" :key="index" @click="contextMenuEventHandler(item.event)">
       <template #prepend>
@@ -146,14 +114,12 @@
       </v-list-item>
     </div>
   </v-list>
-    </v-menu>
-  </div>
 </template>
 
 <script setup lang="ts">
-import RecipeDialogAddToShoppingList from "./RecipeDialogAddToShoppingList.vue";
-import RecipeDialogPrintPreferences from "./RecipeDialogPrintPreferences.vue";
-import RecipeDialogShare from "./RecipeDialogShare.vue";
+import RecipeDialogAddToShoppingList from "~/components/Domain/Recipe/RecipeDialogAddToShoppingList.vue";
+import RecipeDialogPrintPreferences from "~/components/Domain/Recipe/RecipeDialogPrintPreferences.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