From 6efa86f5a19490bf1dab1121e3545d9b7f119924 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sun, 8 Mar 2026 00:36:44 +0900
Subject: [PATCH] add context menu to favorite world avatar item

---
 .../components/FavoritesAvatarItem.vue        | 254 +++++++++--------
 .../FavoritesAvatarLocalHistoryItem.vue       | 106 +++----
 .../components/FavoritesWorldItem.vue         | 262 ++++++++++--------
 .../components/FavoritesWorldLocalItem.vue    | 225 ++++++++-------
 4 files changed, 480 insertions(+), 367 deletions(-)

diff --git a/src/views/Favorites/components/FavoritesAvatarItem.vue b/src/views/Favorites/components/FavoritesAvatarItem.vue
index 4ac186aa..07521094 100644
--- a/src/views/Favorites/components/FavoritesAvatarItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarItem.vue
@@ -1,133 +1,152 @@
 <template>
-    <div :class="cardClasses" @click="$emit('click')">
-        <template v-if="localFavFakeRef">
-            <div class="favorites-search-card__content">
-                <div class="favorites-search-card__avatar" :class="{ 'is-empty': !localFavFakeRef.thumbnailImageUrl }">
-                    <img v-if="localFavFakeRef.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
-                </div>
-                <div class="favorites-search-card__detail">
-                    <div class="favorites-search-card__title">
-                        <span class="name text-sm">{{ localFavFakeRef.name }}</span>
-                        <span class="favorites-search-card__badges">
-                            <TooltipWrapper
-                                v-if="favorite.deleted"
-                                side="top"
-                                :content="t('view.favorite.unavailable_tooltip')">
-                                <AlertTriangle class="h-4 w-4" />
-                            </TooltipWrapper>
-                            <TooltipWrapper
-                                v-if="!isLocalFavorite && favorite.ref?.releaseStatus === 'private'"
-                                side="top"
-                                :content="t('view.favorite.private')">
-                                <Lock class="h-4 w-4" />
-                            </TooltipWrapper>
-                        </span>
-                    </div>
-                    <span class="text-xs text-muted-foreground">{{ localFavFakeRef.authorName }}</span>
-                </div>
-            </div>
-            <div class="favorites-search-card__actions">
-                <template v-if="editMode">
-                    <div
-                        v-if="!isLocalFavorite"
-                        class="favorites-search-card__action favorites-search-card__action--checkbox"
-                        @click.stop>
-                        <Checkbox v-model="isSelected" />
-                    </div>
-                    <div class="favorites-search-card__action-group">
-                        <div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
-                            <FavoritesMoveDropdown
-                                :favoriteGroup="favoriteAvatarGroups"
-                                :currentFavorite="props.favorite"
-                                :currentGroup="group"
-                                class="favorites-search-card__dropdown"
-                                :is-local-favorite="isLocalFavorite"
-                                type="avatar" />
+    <ContextMenu>
+        <ContextMenuTrigger as-child>
+            <div :class="cardClasses" @click="$emit('click')">
+                <template v-if="localFavFakeRef">
+                    <div class="favorites-search-card__content">
+                        <div
+                            class="favorites-search-card__avatar"
+                            :class="{ 'is-empty': !localFavFakeRef.thumbnailImageUrl }">
+                            <img v-if="localFavFakeRef.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
                         </div>
-                        <div class="favorites-search-card__action">
-                            <TooltipWrapper
-                                side="left"
-                                :content="
-                                    isLocalFavorite
-                                        ? t('view.favorite.delete_tooltip')
-                                        : t('view.favorite.unfavorite_tooltip')
-                                ">
-                                <Button
-                                    size="icon-sm"
-                                    variant="outline"
-                                    class="rounded-full text-xs h-6 w-6"
-                                    @click.stop="handlePrimaryDeleteAction">
-                                    <Trash2 class="h-4 w-4" />
-                                </Button>
-                            </TooltipWrapper>
+                        <div class="favorites-search-card__detail">
+                            <div class="favorites-search-card__title">
+                                <span class="name text-sm">{{ localFavFakeRef.name }}</span>
+                                <span class="favorites-search-card__badges">
+                                    <TooltipWrapper
+                                        v-if="favorite.deleted"
+                                        side="top"
+                                        :content="t('view.favorite.unavailable_tooltip')">
+                                        <AlertTriangle class="h-4 w-4" />
+                                    </TooltipWrapper>
+                                    <TooltipWrapper
+                                        v-if="!isLocalFavorite && favorite.ref?.releaseStatus === 'private'"
+                                        side="top"
+                                        :content="t('view.favorite.private')">
+                                        <Lock class="h-4 w-4" />
+                                    </TooltipWrapper>
+                                </span>
+                            </div>
+                            <span class="text-xs text-muted-foreground">{{ localFavFakeRef.authorName }}</span>
                         </div>
                     </div>
+                    <div class="favorites-search-card__actions">
+                        <template v-if="editMode">
+                            <div
+                                v-if="!isLocalFavorite"
+                                class="favorites-search-card__action favorites-search-card__action--checkbox"
+                                @click.stop>
+                                <Checkbox v-model="isSelected" />
+                            </div>
+                            <div class="favorites-search-card__action-group">
+                                <div
+                                    class="favorites-search-card__action favorites-search-card__action--full"
+                                    @click.stop>
+                                    <FavoritesMoveDropdown
+                                        :favoriteGroup="favoriteAvatarGroups"
+                                        :currentFavorite="props.favorite"
+                                        :currentGroup="group"
+                                        class="favorites-search-card__dropdown"
+                                        :is-local-favorite="isLocalFavorite"
+                                        type="avatar" />
+                                </div>
+                                <div class="favorites-search-card__action">
+                                    <TooltipWrapper
+                                        side="left"
+                                        :content="
+                                            isLocalFavorite
+                                                ? t('view.favorite.delete_tooltip')
+                                                : t('view.favorite.unfavorite_tooltip')
+                                        ">
+                                        <Button
+                                            size="icon-sm"
+                                            variant="outline"
+                                            class="rounded-full text-xs h-6 w-6"
+                                            @click.stop="handlePrimaryDeleteAction">
+                                            <Trash2 class="h-4 w-4" />
+                                        </Button>
+                                    </TooltipWrapper>
+                                </div>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="favorites-search-card__action-group">
+                                <div class="favorites-search-card__action" v-if="canSelectAvatar">
+                                    <TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
+                                        <Button
+                                            size="icon-sm"
+                                            variant="ghost"
+                                            :disabled="currentUser.currentAvatar === favorite.id"
+                                            class="rounded-full text-xs h-6 w-6"
+                                            @click.stop="selectAvatarWithConfirmation(favorite.id)"
+                                            ><Check class="h-4 w-4"
+                                        /></Button>
+                                    </TooltipWrapper>
+                                </div>
+                                <div class="favorites-search-card__action">
+                                    <TooltipWrapper
+                                        v-if="showDangerUnfavorite"
+                                        side="bottom"
+                                        :content="t('view.favorite.unfavorite_tooltip')">
+                                        <Button
+                                            size="icon-sm"
+                                            variant="destructive"
+                                            class="rounded-full text-xs h-6 w-6"
+                                            @click.stop="handlePrimaryDeleteAction"
+                                            ><Trash2 class="h-4 w-4"
+                                        /></Button>
+                                    </TooltipWrapper>
+                                    <TooltipWrapper
+                                        v-else
+                                        side="bottom"
+                                        :content="t('view.favorite.edit_favorite_tooltip')">
+                                        <Button
+                                            size="icon-sm"
+                                            variant="ghost"
+                                            class="rounded-full text-xs h-6 w-6"
+                                            @click.stop="showFavoriteDialog('avatar', favorite.id)"
+                                            ><Star class="h-4 w-4"
+                                        /></Button>
+                                    </TooltipWrapper>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
                 </template>
                 <template v-else>
-                    <div class="favorites-search-card__action-group">
-                        <div class="favorites-search-card__action" v-if="canSelectAvatar">
-                            <TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
-                                <Button
-                                    size="icon-sm"
-                                    variant="ghost"
-                                    :disabled="currentUser.currentAvatar === favorite.id"
-                                    class="rounded-full text-xs h-6 w-6"
-                                    @click.stop="selectAvatarWithConfirmation(favorite.id)"
-                                    ><Check class="h-4 w-4"
-                                /></Button>
-                            </TooltipWrapper>
+                    <div class="favorites-search-card__content">
+                        <div class="favorites-search-card__avatar is-empty"></div>
+                        <div class="favorites-search-card__detail">
+                            <span>{{ favorite.name || favorite.id }}</span>
                         </div>
+                    </div>
+                    <div class="favorites-search-card__actions">
                         <div class="favorites-search-card__action">
-                            <TooltipWrapper
-                                v-if="showDangerUnfavorite"
-                                side="bottom"
-                                :content="t('view.favorite.unfavorite_tooltip')">
-                                <Button
-                                    size="icon-sm"
-                                    variant="destructive"
-                                    class="rounded-full text-xs h-6 w-6"
-                                    @click.stop="handlePrimaryDeleteAction"
-                                    ><Trash2 class="h-4 w-4"
-                                /></Button>
-                            </TooltipWrapper>
-                            <TooltipWrapper v-else side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
-                                <Button
-                                    size="icon-sm"
-                                    variant="ghost"
-                                    class="rounded-full text-xs h-6 w-6"
-                                    @click.stop="showFavoriteDialog('avatar', favorite.id)"
-                                    ><Star class="h-4 w-4"
-                                /></Button>
-                            </TooltipWrapper>
+                            <Button
+                                class="rounded-full text-xs h-6 w-6"
+                                size="icon-sm"
+                                variant="ghost"
+                                @click.stop="handlePrimaryDeleteAction">
+                                <Trash2 class="h-4 w-4" />
+                            </Button>
                         </div>
                     </div>
                 </template>
             </div>
-        </template>
-        <template v-else>
-            <div class="favorites-search-card__content">
-                <div class="favorites-search-card__avatar is-empty"></div>
-                <div class="favorites-search-card__detail">
-                    <span>{{ favorite.name || favorite.id }}</span>
-                </div>
-            </div>
-            <div class="favorites-search-card__actions">
-                <div class="favorites-search-card__action">
-                    <Button
-                        class="rounded-full text-xs h-6 w-6"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click.stop="handlePrimaryDeleteAction">
-                        <Trash2 class="h-4 w-4" />
-                    </Button>
-                </div>
-            </div>
-        </template>
-    </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+            <ContextMenuItem
+                :disabled="currentUser.currentAvatar === favorite.id"
+                @click="selectAvatarWithConfirmation(favorite.id)">
+                {{ t('view.favorite.select_avatar_tooltip') }}
+            </ContextMenuItem>
+        </ContextMenuContent>
+    </ContextMenu>
 </template>
 
 <script setup>
     import { AlertTriangle, Check, Lock, Star, Trash2 } from 'lucide-vue-next';
+    import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
     import { computed } from 'vue';
@@ -199,6 +218,9 @@
         return shiftHeld.value;
     });
 
+    /**
+     *
+     */
     function handlePrimaryDeleteAction() {
         if (props.isLocalFavorite) {
             removeLocalAvatarFavorite(props.favorite.id, favoriteGroupName.value);
@@ -207,6 +229,10 @@
         deleteFavorite(props.favorite.id);
     }
 
+    /**
+     *
+     * @param objectId
+     */
     function deleteFavorite(objectId) {
         favoriteRequest.deleteFavorite({ objectId });
     }
diff --git a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
index 5f0ee8dd..4063f238 100644
--- a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
@@ -1,57 +1,69 @@
 <template>
-    <div :class="cardClasses" @click="$emit('click')">
-        <div class="favorites-search-card__content">
-            <div class="favorites-search-card__avatar" :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
-                <img v-if="favorite.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
-            </div>
-            <div class="favorites-search-card__detail">
-                <div class="favorites-search-card__title">
-                    <span class="name text-sm">{{ favorite.name }}</span>
+    <ContextMenu>
+        <ContextMenuTrigger as-child>
+            <div :class="cardClasses" @click="$emit('click')">
+                <div class="favorites-search-card__content">
+                    <div class="favorites-search-card__avatar" :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
+                        <img v-if="favorite.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
+                    </div>
+                    <div class="favorites-search-card__detail">
+                        <div class="favorites-search-card__title">
+                            <span class="name text-sm">{{ favorite.name }}</span>
+                        </div>
+                        <span class="text-xs">{{ favorite.authorName }}</span>
+                    </div>
                 </div>
-                <span class="text-xs">{{ favorite.authorName }}</span>
-            </div>
-        </div>
-        <div class="favorites-search-card__actions">
-            <div class="favorites-search-card__action-group">
-                <div class="favorites-search-card__action">
-                    <TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
-                        <Button
-                            size="icon-sm"
-                            variant="ghost"
-                            :disabled="currentUser.currentAvatar === favorite.id"
-                            class="rounded-full text-xs h-6 w-6"
-                            @click.stop="selectAvatarWithConfirmation(favorite.id)">
-                            <Check class="h-4 w-4" />
-                            ></Button
-                        >
-                    </TooltipWrapper>
-                </div>
-                <div class="favorites-search-card__action">
-                    <TooltipWrapper side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
-                        <Button
-                            v-if="favoriteExists"
-                            size="icon-sm"
-                            variant="ghost"
-                            class="rounded-full text-xs h-6 w-6"
-                            @click.stop="showFavoriteDialog('avatar', favorite.id)">
-                            <Star class="h-4 w-4" />
-                        </Button>
-                        <Button
-                            v-else
-                            size="icon-sm"
-                            variant="ghost"
-                            class="rounded-full text-xs h-6 w-6"
-                            @click.stop="showFavoriteDialog('avatar', favorite.id)">
-                            <Star class="h-4 w-4" />
-                        </Button>
-                    </TooltipWrapper>
+                <div class="favorites-search-card__actions">
+                    <div class="favorites-search-card__action-group">
+                        <div class="favorites-search-card__action">
+                            <TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
+                                <Button
+                                    size="icon-sm"
+                                    variant="ghost"
+                                    :disabled="currentUser.currentAvatar === favorite.id"
+                                    class="rounded-full text-xs h-6 w-6"
+                                    @click.stop="selectAvatarWithConfirmation(favorite.id)">
+                                    <Check class="h-4 w-4" />
+                                    ></Button
+                                >
+                            </TooltipWrapper>
+                        </div>
+                        <div class="favorites-search-card__action">
+                            <TooltipWrapper side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
+                                <Button
+                                    v-if="favoriteExists"
+                                    size="icon-sm"
+                                    variant="ghost"
+                                    class="rounded-full text-xs h-6 w-6"
+                                    @click.stop="showFavoriteDialog('avatar', favorite.id)">
+                                    <Star class="h-4 w-4" />
+                                </Button>
+                                <Button
+                                    v-else
+                                    size="icon-sm"
+                                    variant="ghost"
+                                    class="rounded-full text-xs h-6 w-6"
+                                    @click.stop="showFavoriteDialog('avatar', favorite.id)">
+                                    <Star class="h-4 w-4" />
+                                </Button>
+                            </TooltipWrapper>
+                        </div>
+                    </div>
                 </div>
             </div>
-        </div>
-    </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+            <ContextMenuItem
+                :disabled="currentUser.currentAvatar === favorite.id"
+                @click="selectAvatarWithConfirmation(favorite.id)">
+                {{ t('view.favorite.select_avatar_tooltip') }}
+            </ContextMenuItem>
+        </ContextMenuContent>
+    </ContextMenu>
 </template>
 
 <script setup>
+    import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
     import { Check, Star } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { computed } from 'vue';
diff --git a/src/views/Favorites/components/FavoritesWorldItem.vue b/src/views/Favorites/components/FavoritesWorldItem.vue
index d638ed8d..d8a08a6d 100644
--- a/src/views/Favorites/components/FavoritesWorldItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldItem.vue
@@ -1,140 +1,164 @@
 <template>
-    <div :class="cardClasses" @click="$emit('click')">
-        <template v-if="favorite.ref">
-            <div class="favorites-search-card__content">
-                <div
-                    class="favorites-search-card__avatar"
-                    :class="{ 'is-empty': !favorite.ref.thumbnailImageUrl }"
-                    v-once>
-                    <img
-                        v-if="favorite.ref.thumbnailImageUrl"
-                        :src="smallThumbnail"
-                        loading="lazy"
-                        decoding="async"
-                        fetchpriority="low" />
-                </div>
-                <div class="favorites-search-card__detail">
-                    <div class="favorites-search-card__title">
-                        <span class="name text-sm">{{ props.favorite.ref.name }}</span>
-                        <span
-                            v-if="favorite.deleted || favorite.ref.releaseStatus === 'private'"
-                            class="favorites-search-card__badges">
+    <ContextMenu>
+        <ContextMenuTrigger as-child>
+            <div :class="cardClasses" @click="$emit('click')">
+                <template v-if="favorite.ref">
+                    <div class="favorites-search-card__content">
+                        <div
+                            class="favorites-search-card__avatar"
+                            :class="{ 'is-empty': !favorite.ref.thumbnailImageUrl }"
+                            v-once>
+                            <img
+                                v-if="favorite.ref.thumbnailImageUrl"
+                                :src="smallThumbnail"
+                                loading="lazy"
+                                decoding="async"
+                                fetchpriority="low" />
+                        </div>
+                        <div class="favorites-search-card__detail">
+                            <div class="favorites-search-card__title">
+                                <span class="name text-sm">{{ props.favorite.ref.name }}</span>
+                                <span
+                                    v-if="favorite.deleted || favorite.ref.releaseStatus === 'private'"
+                                    class="favorites-search-card__badges">
+                                    <AlertTriangle
+                                        v-if="favorite.deleted"
+                                        :title="t('view.favorite.unavailable_tooltip')"
+                                        class="h-4 w-4" />
+                                    <Lock
+                                        v-if="favorite.ref.releaseStatus === 'private'"
+                                        :title="t('view.favorite.private')"
+                                        class="h-4 w-4" />
+                                </span>
+                            </div>
+                            <span class="text-xs text-muted-foreground">
+                                {{ props.favorite.ref.authorName }}
+                                <template v-if="props.favorite.ref.occupants">
+                                    ({{ props.favorite.ref.occupants }})
+                                </template>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="favorites-search-card__actions">
+                        <template v-if="editMode">
+                            <div
+                                class="favorites-search-card__action favorites-search-card__action--checkbox"
+                                @click.stop>
+                                <Checkbox v-model="isSelected" />
+                            </div>
+                            <div class="favorites-search-card__action-group">
+                                <div
+                                    class="favorites-search-card__action favorites-search-card__action--full"
+                                    @click.stop>
+                                    <FavoritesMoveDropdown
+                                        :favoriteGroup="favoriteWorldGroups"
+                                        :currentFavorite="props.favorite"
+                                        :currentGroup="group"
+                                        class="favorites-search-card__dropdown"
+                                        type="world" />
+                                </div>
+                                <div class="favorites-search-card__action">
+                                    <Button
+                                        size="icon-sm"
+                                        variant="ghost"
+                                        class="rounded-full text-xs h-6 w-6"
+                                        @click.stop="handleDeleteFavorite">
+                                        <Trash2 class="h-4 w-4" />
+                                    </Button>
+                                </div>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="favorites-search-card__action-group">
+                                <div class="favorites-search-card__action">
+                                    <TooltipWrapper side="top" :content="inviteOrLaunchText">
+                                        <Button
+                                            size="icon-sm"
+                                            variant="ghost"
+                                            class="rounded-full text-xs h-6 w-6"
+                                            @click.stop="newInstanceSelfInvite(favorite.id)"
+                                            ><Mail class="h-4 w-4"
+                                        /></Button>
+                                    </TooltipWrapper>
+                                </div>
+                                <div class="favorites-search-card__action">
+                                    <TooltipWrapper
+                                        v-if="showDangerUnfavorite"
+                                        side="top"
+                                        :content="t('view.favorite.unfavorite_tooltip')">
+                                        <Button
+                                            size="icon-sm"
+                                            variant="destructive"
+                                            class="rounded-full text-xs h-6 w-6"
+                                            @click.stop="handleDeleteFavorite"
+                                            ><Trash2 class="h-4 w-4"
+                                        /></Button>
+                                    </TooltipWrapper>
+                                    <TooltipWrapper
+                                        v-else
+                                        side="top"
+                                        :content="t('view.favorite.edit_favorite_tooltip')">
+                                        <Button
+                                            size="icon-sm"
+                                            variant="ghost"
+                                            class="rounded-full text-xs h-6 w-6"
+                                            @click.stop="showFavoriteDialog('world', favorite.id)"
+                                            ><Star class="h-4 w-4"
+                                        /></Button>
+                                    </TooltipWrapper>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </template>
+                <template v-else>
+                    <div class="favorites-search-card__content">
+                        <div class="favorites-search-card__avatar is-empty"></div>
+                        <div class="favorites-search-card__detail" v-once>
+                            <span>{{ favorite.name || favorite.id }}</span>
                             <AlertTriangle
                                 v-if="favorite.deleted"
                                 :title="t('view.favorite.unavailable_tooltip')"
                                 class="h-4 w-4" />
-                            <Lock
-                                v-if="favorite.ref.releaseStatus === 'private'"
-                                :title="t('view.favorite.private')"
-                                class="h-4 w-4" />
-                        </span>
-                    </div>
-                    <span class="text-xs text-muted-foreground">
-                        {{ props.favorite.ref.authorName }}
-                        <template v-if="props.favorite.ref.occupants"> ({{ props.favorite.ref.occupants }}) </template>
-                    </span>
-                </div>
-            </div>
-            <div class="favorites-search-card__actions">
-                <template v-if="editMode">
-                    <div class="favorites-search-card__action favorites-search-card__action--checkbox" @click.stop>
-                        <Checkbox v-model="isSelected" />
-                    </div>
-                    <div class="favorites-search-card__action-group">
-                        <div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
-                            <FavoritesMoveDropdown
-                                :favoriteGroup="favoriteWorldGroups"
-                                :currentFavorite="props.favorite"
-                                :currentGroup="group"
-                                class="favorites-search-card__dropdown"
-                                type="world" />
                         </div>
+                    </div>
+                    <div class="favorites-search-card__actions">
                         <div class="favorites-search-card__action">
                             <Button
+                                class="rounded-full text-xs h-6 w-6"
                                 size="icon-sm"
                                 variant="ghost"
-                                class="rounded-full text-xs h-6 w-6"
                                 @click.stop="handleDeleteFavorite">
                                 <Trash2 class="h-4 w-4" />
                             </Button>
                         </div>
                     </div>
                 </template>
-                <template v-else>
-                    <div class="favorites-search-card__action-group">
-                        <div class="favorites-search-card__action">
-                            <TooltipWrapper side="top" :content="inviteOrLaunchText">
-                                <Button
-                                    size="icon-sm"
-                                    variant="ghost"
-                                    class="rounded-full text-xs h-6 w-6"
-                                    @click.stop="newInstanceSelfInvite(favorite.id)"
-                                    ><Mail class="h-4 w-4"
-                                /></Button>
-                            </TooltipWrapper>
-                        </div>
-                        <div class="favorites-search-card__action">
-                            <TooltipWrapper
-                                v-if="showDangerUnfavorite"
-                                side="top"
-                                :content="t('view.favorite.unfavorite_tooltip')">
-                                <Button
-                                    size="icon-sm"
-                                    variant="destructive"
-                                    class="rounded-full text-xs h-6 w-6"
-                                    @click.stop="handleDeleteFavorite"
-                                    ><Trash2 class="h-4 w-4"
-                                /></Button>
-                            </TooltipWrapper>
-                            <TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
-                                <Button
-                                    size="icon-sm"
-                                    variant="ghost"
-                                    class="rounded-full text-xs h-6 w-6"
-                                    @click.stop="showFavoriteDialog('world', favorite.id)"
-                                    ><Star class="h-4 w-4"
-                                /></Button>
-                            </TooltipWrapper>
-                        </div>
-                    </div>
-                </template>
             </div>
-        </template>
-        <template v-else>
-            <div class="favorites-search-card__content">
-                <div class="favorites-search-card__avatar is-empty"></div>
-                <div class="favorites-search-card__detail" v-once>
-                    <span>{{ favorite.name || favorite.id }}</span>
-                    <AlertTriangle
-                        v-if="favorite.deleted"
-                        :title="t('view.favorite.unavailable_tooltip')"
-                        class="h-4 w-4" />
-                </div>
-            </div>
-            <div class="favorites-search-card__actions">
-                <div class="favorites-search-card__action">
-                    <Button
-                        class="rounded-full text-xs h-6 w-6"
-                        size="icon-sm"
-                        variant="ghost"
-                        @click.stop="handleDeleteFavorite">
-                        <Trash2 class="h-4 w-4" />
-                    </Button>
-                </div>
-            </div>
-        </template>
-    </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+            <ContextMenuItem @click="handleNewInstance">
+                <Plus class="size-4" />
+                {{ t('dialog.world.actions.new_instance') }}
+            </ContextMenuItem>
+            <ContextMenuItem @click="newInstanceSelfInvite(favorite.id)">
+                <Mail class="size-4" />
+                {{ inviteOrLaunchText }}
+            </ContextMenuItem>
+        </ContextMenuContent>
+    </ContextMenu>
 </template>
 
 <script setup>
-    import { AlertTriangle, Lock, Mail, Star, Trash2 } from 'lucide-vue-next';
+    import { AlertTriangle, Lock, Mail, Plus, Star, Trash2 } from 'lucide-vue-next';
+    import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
     import { Button } from '@/components/ui/button';
     import { Checkbox } from '@/components/ui/checkbox';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { useFavoriteStore, useInviteStore, useUiStore } from '../../../stores';
+    import { useFavoriteStore, useInstanceStore, useInviteStore, useUiStore } from '../../../stores';
     import { favoriteRequest } from '../../../api';
 
     import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
@@ -184,6 +208,9 @@
             : t('dialog.world.actions.new_instance_and_self_invite');
     });
 
+    /**
+     *
+     */
     function handleDeleteFavorite() {
         if (props.isLocalFavorite) {
             emit('remove-local-world-favorite', props.favorite.id, props.group);
@@ -192,9 +219,22 @@
         }
     }
 
+    /**
+     *
+     * @param objectId
+     */
     function deleteFavorite(objectId) {
         favoriteRequest.deleteFavorite({ objectId });
     }
+
+    const { createNewInstance } = useInstanceStore();
+
+    /**
+     *
+     */
+    function handleNewInstance() {
+        createNewInstance(props.favorite.id);
+    }
 </script>
 
 <style scoped></style>
diff --git a/src/views/Favorites/components/FavoritesWorldLocalItem.vue b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
index 027969d9..e9dba637 100644
--- a/src/views/Favorites/components/FavoritesWorldLocalItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
@@ -1,117 +1,137 @@
 <template>
-    <div :class="cardClasses" @click="$emit('click')">
-        <template v-if="favorite.name">
-            <div class="favorites-search-card__content">
-                <div class="favorites-search-card__avatar" :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
-                    <img
-                        v-if="favorite.thumbnailImageUrl"
-                        :src="smallThumbnail"
-                        loading="lazy"
-                        decoding="async"
-                        fetchpriority="low" />
-                </div>
-                <div class="favorites-search-card__detail">
-                    <div class="favorites-search-card__title">
-                        <span class="name text-sm">{{ props.favorite.name }}</span>
-                    </div>
-                    <span class="text-xs">
-                        {{ props.favorite.authorName }}
-                        <template v-if="props.favorite.occupants"> ({{ props.favorite.occupants }}) </template>
-                    </span>
-                </div>
-            </div>
-            <div class="favorites-search-card__actions">
-                <template v-if="editMode">
-                    <div class="favorites-search-card__action-group">
-                        <div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
-                            <FavoritesMoveDropdown
-                                :favoriteGroup="favoriteWorldGroups"
-                                :currentFavorite="props.favorite"
-                                class="favorites-search-card__dropdown"
-                                isLocalFavorite
-                                type="world" />
+    <ContextMenu>
+        <ContextMenuTrigger as-child>
+            <div :class="cardClasses" @click="$emit('click')">
+                <template v-if="favorite.name">
+                    <div class="favorites-search-card__content">
+                        <div class="favorites-search-card__avatar" :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
+                            <img
+                                v-if="favorite.thumbnailImageUrl"
+                                :src="smallThumbnail"
+                                loading="lazy"
+                                decoding="async"
+                                fetchpriority="low" />
                         </div>
+                        <div class="favorites-search-card__detail">
+                            <div class="favorites-search-card__title">
+                                <span class="name text-sm">{{ props.favorite.name }}</span>
+                            </div>
+                            <span class="text-xs">
+                                {{ props.favorite.authorName }}
+                                <template v-if="props.favorite.occupants"> ({{ props.favorite.occupants }}) </template>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="favorites-search-card__actions">
+                        <template v-if="editMode">
+                            <div class="favorites-search-card__action-group">
+                                <div
+                                    class="favorites-search-card__action favorites-search-card__action--full"
+                                    @click.stop>
+                                    <FavoritesMoveDropdown
+                                        :favoriteGroup="favoriteWorldGroups"
+                                        :currentFavorite="props.favorite"
+                                        class="favorites-search-card__dropdown"
+                                        isLocalFavorite
+                                        type="world" />
+                                </div>
+                                <div class="favorites-search-card__action">
+                                    <Button
+                                        size="icon-sm"
+                                        :variant="shiftHeld ? 'destructive' : 'outline'"
+                                        class="rounded-full text-xs h-6 w-6"
+                                        @click.stop="handlePrimaryDeleteAction">
+                                        <Trash2 class="h-4 w-4" />
+                                    </Button>
+                                </div>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="favorites-search-card__action-group">
+                                <div class="favorites-search-card__action">
+                                    <TooltipWrapper side="top" :content="inviteOrLaunchText">
+                                        <Button
+                                            size="icon-sm"
+                                            variant="ghost"
+                                            class="rounded-full text-xs h-6 w-6"
+                                            @click.stop="newInstanceSelfInvite(favorite.id)"
+                                            ><Mail class="h-4 w-4"
+                                        /></Button>
+                                    </TooltipWrapper>
+                                </div>
+                                <div class="favorites-search-card__action">
+                                    <TooltipWrapper
+                                        v-if="showDangerUnfavorite"
+                                        side="top"
+                                        :content="t('view.favorite.unfavorite_tooltip')">
+                                        <Button
+                                            size="icon-sm"
+                                            variant="destructive"
+                                            class="rounded-full text-xs h-6 w-6"
+                                            @click.stop="handleDeleteFavorite"
+                                            ><Trash2 class="h-4 w-4"
+                                        /></Button>
+                                    </TooltipWrapper>
+                                    <TooltipWrapper
+                                        v-else
+                                        side="top"
+                                        :content="t('view.favorite.edit_favorite_tooltip')">
+                                        <Button
+                                            size="icon-sm"
+                                            variant="ghost"
+                                            class="rounded-full text-xs h-6 w-6"
+                                            @click.stop="showFavoriteDialog('world', favorite.id)"
+                                            ><Star class="h-4 w-4"
+                                        /></Button>
+                                    </TooltipWrapper>
+                                </div>
+                            </div>
+                        </template>
+                    </div>
+                </template>
+                <template v-else>
+                    <div class="favorites-search-card__content">
+                        <div class="favorites-search-card__avatar is-empty"></div>
+                        <div class="favorites-search-card__detail" v-once>
+                            <span class="name">{{ favorite.name || favorite.id }}</span>
+                        </div>
+                    </div>
+                    <div class="favorites-search-card__actions">
                         <div class="favorites-search-card__action">
                             <Button
-                                size="icon-sm"
-                                :variant="shiftHeld ? 'destructive' : 'outline'"
                                 class="rounded-full text-xs h-6 w-6"
-                                @click.stop="handlePrimaryDeleteAction">
+                                size="icon-sm"
+                                variant="outline"
+                                @click.stop="handleDeleteFavorite">
                                 <Trash2 class="h-4 w-4" />
                             </Button>
                         </div>
                     </div>
                 </template>
-                <template v-else>
-                    <div class="favorites-search-card__action-group">
-                        <div class="favorites-search-card__action">
-                            <TooltipWrapper side="top" :content="inviteOrLaunchText">
-                                <Button
-                                    size="icon-sm"
-                                    variant="ghost"
-                                    class="rounded-full text-xs h-6 w-6"
-                                    @click.stop="newInstanceSelfInvite(favorite.id)"
-                                    ><Mail class="h-4 w-4"
-                                /></Button>
-                            </TooltipWrapper>
-                        </div>
-                        <div class="favorites-search-card__action">
-                            <TooltipWrapper
-                                v-if="showDangerUnfavorite"
-                                side="top"
-                                :content="t('view.favorite.unfavorite_tooltip')">
-                                <Button
-                                    size="icon-sm"
-                                    variant="destructive"
-                                    class="rounded-full text-xs h-6 w-6"
-                                    @click.stop="handleDeleteFavorite"
-                                    ><Trash2 class="h-4 w-4"
-                                /></Button>
-                            </TooltipWrapper>
-                            <TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
-                                <Button
-                                    size="icon-sm"
-                                    variant="ghost"
-                                    class="rounded-full text-xs h-6 w-6"
-                                    @click.stop="showFavoriteDialog('world', favorite.id)"
-                                    ><Star class="h-4 w-4"
-                                /></Button>
-                            </TooltipWrapper>
-                        </div>
-                    </div>
-                </template>
             </div>
-        </template>
-        <template v-else>
-            <div class="favorites-search-card__content">
-                <div class="favorites-search-card__avatar is-empty"></div>
-                <div class="favorites-search-card__detail" v-once>
-                    <span class="name">{{ favorite.name || favorite.id }}</span>
-                </div>
-            </div>
-            <div class="favorites-search-card__actions">
-                <div class="favorites-search-card__action">
-                    <Button
-                        class="rounded-full text-xs h-6 w-6"
-                        size="icon-sm"
-                        variant="outline"
-                        @click.stop="handleDeleteFavorite">
-                        <Trash2 class="h-4 w-4" />
-                    </Button>
-                </div>
-            </div>
-        </template>
-    </div>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+            <ContextMenuItem @click="handleNewInstance">
+                <Plus class="size-4" />
+                {{ t('dialog.world.actions.new_instance') }}
+            </ContextMenuItem>
+            <ContextMenuItem @click="newInstanceSelfInvite(favorite.id)">
+                <Mail class="size-4" />
+                {{ inviteOrLaunchText }}
+            </ContextMenuItem>
+        </ContextMenuContent>
+    </ContextMenu>
 </template>
 
 <script setup>
-    import { Mail, Star, Trash2 } from 'lucide-vue-next';
+    import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
+    import { Mail, Plus, Star, Trash2 } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { useFavoriteStore, useInviteStore, useUiStore } from '../../../stores';
+    import { useFavoriteStore, useInstanceStore, useInviteStore, useUiStore } from '../../../stores';
 
     import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
 
@@ -152,6 +172,9 @@
         return shiftHeld.value;
     });
 
+    /**
+     *
+     */
     function handlePrimaryDeleteAction() {
         if (shiftHeld.value) {
             emit('remove-local-world-favorite', props.favorite.id, props.group);
@@ -160,9 +183,21 @@
         showFavoriteDialog('world', props.favorite.id);
     }
 
+    /**
+     *
+     */
     function handleDeleteFavorite() {
         emit('remove-local-world-favorite', props.favorite.id, props.group);
     }
+
+    const { createNewInstance } = useInstanceStore();
+
+    /**
+     *
+     */
+    function handleNewInstance() {
+        createNewInstance(props.favorite.id);
+    }
 </script>
 
 <style scoped></style>