add context menu to favorite world avatar item

src/views/Favorites/components/FavoritesAvatarItem.vue

@@ -1,8 +1,12 @@
 <template>
+    <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 }">
+                        <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">
@@ -35,7 +39,9 @@
                                 <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>
+                                <div
+                                    class="favorites-search-card__action favorites-search-card__action--full"
+                                    @click.stop>
                                     <FavoritesMoveDropdown
                                         :favoriteGroup="favoriteAvatarGroups"
                                         :currentFavorite="props.favorite"
@@ -90,7 +96,10 @@
                                             ><Trash2 class="h-4 w-4"
                                         /></Button>
                                     </TooltipWrapper>
-                            <TooltipWrapper v-else side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
+                                    <TooltipWrapper
+                                        v-else
+                                        side="bottom"
+                                        :content="t('view.favorite.edit_favorite_tooltip')">
                                         <Button
                                             size="icon-sm"
                                             variant="ghost"
@@ -124,10 +133,20 @@
                     </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 });
     }

src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue

@@ -1,4 +1,6 @@
 <template>
+    <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 }">
@@ -49,9 +51,19 @@
                     </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';

src/views/Favorites/components/FavoritesWorldItem.vue

@@ -1,4 +1,6 @@
 <template>
+    <ContextMenu>
+        <ContextMenuTrigger as-child>
             <div :class="cardClasses" @click="$emit('click')">
                 <template v-if="favorite.ref">
                     <div class="favorites-search-card__content">
@@ -31,17 +33,23 @@
                             </div>
                             <span class="text-xs text-muted-foreground">
                                 {{ props.favorite.ref.authorName }}
-                        <template v-if="props.favorite.ref.occupants"> ({{ props.favorite.ref.occupants }}) </template>
+                                <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>
+                            <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>
+                                <div
+                                    class="favorites-search-card__action favorites-search-card__action--full"
+                                    @click.stop>
                                     <FavoritesMoveDropdown
                                         :favoriteGroup="favoriteWorldGroups"
                                         :currentFavorite="props.favorite"
@@ -86,7 +94,10 @@
                                             ><Trash2 class="h-4 w-4"
                                         /></Button>
                                     </TooltipWrapper>
-                            <TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
+                                    <TooltipWrapper
+                                        v-else
+                                        side="top"
+                                        :content="t('view.favorite.edit_favorite_tooltip')">
                                         <Button
                                             size="icon-sm"
                                             variant="ghost"
@@ -124,17 +135,30 @@
                     </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>

src/views/Favorites/components/FavoritesWorldLocalItem.vue

@@ -1,4 +1,6 @@
 <template>
+    <ContextMenu>
+        <ContextMenuTrigger as-child>
             <div :class="cardClasses" @click="$emit('click')">
                 <template v-if="favorite.name">
                     <div class="favorites-search-card__content">
@@ -23,7 +25,9 @@
                     <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>
+                                <div
+                                    class="favorites-search-card__action favorites-search-card__action--full"
+                                    @click.stop>
                                     <FavoritesMoveDropdown
                                         :favoriteGroup="favoriteWorldGroups"
                                         :currentFavorite="props.favorite"
@@ -68,7 +72,10 @@
                                             ><Trash2 class="h-4 w-4"
                                         /></Button>
                                     </TooltipWrapper>
-                            <TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
+                                    <TooltipWrapper
+                                        v-else
+                                        side="top"
+                                        :content="t('view.favorite.edit_favorite_tooltip')">
                                         <Button
                                             size="icon-sm"
                                             variant="ghost"
@@ -102,16 +109,29 @@
                     </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>