refactor: use item component for favorites world item

src/views/Favorites/FavoritesWorld.vue

@@ -305,8 +305,7 @@
                                                 :favorite="favorite"
                                                 :edit-mode="worldEditMode"
                                                 :selected="selectedFavoriteWorlds.includes(favorite.id)"
-                                                @toggle-select="toggleWorldSelection(favorite.id, $event)"
+                                                @toggle-select="toggleWorldSelection(favorite.id, $event)" />
-                                                @click="showWorldDialog(favorite.id)" />
                                         </div>
                                     </template>
                                     <div v-else class="flex items-center justify-center text-[13px] h-full">
@@ -339,9 +338,7 @@
                                                             :group="activeLocalGroupName"
                                                             :favorite="favorite.favorite"
                                                             :edit-mode="worldEditMode"
-                                                            is-local-favorite
+                                                            is-local-favorite />
-                                                            @remove-local-world-favorite="removeLocalWorldFavorite"
-                                                            @click="showWorldDialog(favorite.favorite.id)" />
                                                     </div>
                                                 </div>
                                             </template>

src/views/Favorites/components/FavoritesWorldItem.vue

@@ -1,175 +1,105 @@
 <template>
     <ContextMenu>
         <ContextMenuTrigger as-child>
-            <div :class="cardClasses" @click="$emit('click')">
+            <Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleViewDetails">
-                <template v-if="localFavRef?.name">
+                <ItemMedia variant="image">
-                    <div class="favorites-search-card__content">
-                        <div
-                            class="favorites-search-card__avatar"
-                            :class="{ 'is-empty': !localFavRef.thumbnailImageUrl }"
-                            v-once>
                     <img
-                                v-if="localFavRef.thumbnailImageUrl"
+                        v-if="smallThumbnail"
                         :src="smallThumbnail"
                         loading="lazy"
                         decoding="async"
-                                fetchpriority="low" />
+                        fetchpriority="low"
-                        </div>
+                        class="object-cover" />
-                        <div class="favorites-search-card__detail">
+                    <Avatar v-else>
-                            <div class="flex items-center gap-2">
+                        <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
-                                <span class="name text-sm">{{ localFavRef.name }}</span>
+                    </Avatar>
-                                <span
+                </ItemMedia>
-                                    v-if="
+                <ItemContent class="min-w-0">
-                                        !isLocalFavorite &&
+                    <ItemTitle class="truncate max-w-full">
-                                        (favorite.deleted || localFavRef.releaseStatus === 'private')
+                        {{ displayName }}
-                                    "
-                                    class="inline-flex items-center gap-1 text-sm">
                         <AlertTriangle
-                                        v-if="favorite.deleted"
+                            v-if="showUnavailable"
                             :title="t('view.favorite.unavailable_tooltip')"
                             class="h-4 w-4" />
-                                    <Lock
+                        <Lock v-if="isPrivateWorld" :title="t('view.favorite.private')" class="h-4 w-4" />
-                                        v-if="localFavRef.releaseStatus === 'private'"
+                    </ItemTitle>
-                                        :title="t('view.favorite.private')"
+                    <ItemDescription class="truncate line-clamp-1 text-xs">
-                                        class="h-4 w-4" />
+                        {{ authorText }}
-                                </span>
+                    </ItemDescription>
-                            </div>
+                </ItemContent>
-                            <span class="text-xs text-muted-foreground">
+                <ItemActions v-if="editMode && !isLocalFavorite" @click.stop>
-                                {{ localFavRef.authorName }}
-                                <template v-if="localFavRef.occupants"> ({{ localFavRef.occupants }}) </template>
-                            </span>
-                        </div>
-                    </div>
-                    <div class="favorites-search-card__actions">
-                        <template v-if="editMode">
-                            <div
-                                v-if="!isLocalFavorite"
-                                class="flex justify-end w-full favorites-search-card__action--checkbox"
-                                @click.stop>
                     <Checkbox v-model="isSelected" />
-                            </div>
+                </ItemActions>
-                            <div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
+                <DropdownMenu v-else-if="!editMode">
-                                <div class="flex justify-end w-full flex-1" @click.stop>
+                    <DropdownMenuTrigger as-child>
-                                    <FavoritesMoveDropdown
+                        <Button size="icon-sm" variant="ghost" class="rounded-full" @click.stop>
-                                        :favoriteGroup="favoriteWorldGroups"
+                            <MoreHorizontal class="h-4 w-4" />
-                                        :currentFavorite="props.favorite"
-                                        :currentGroup="group"
-                                        class="w-full"
-                                        :is-local-favorite="isLocalFavorite"
-                                        type="world" />
-                                </div>
-                                <div class="flex justify-end w-full">
-                                    <Button
-                                        size="icon-sm"
-                                        :variant="
-                                            isLocalFavorite && shiftHeld
-                                                ? 'destructive'
-                                                : isLocalFavorite
-                                                  ? 'outline'
-                                                  : 'ghost'
-                                        "
-                                        class="rounded-full text-xs h-6 w-6"
-                                        @click.stop="handlePrimaryDeleteAction">
-                                        <Trash2 class="h-4 w-4" />
                         </Button>
-                                </div>
+                    </DropdownMenuTrigger>
-                            </div>
+                    <DropdownMenuContent align="end">
-                        </template>
+                        <DropdownMenuItem @click="handleViewDetails">
-                        <template v-else>
+                            {{ t('common.actions.view_details') }}
-                            <div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
+                        </DropdownMenuItem>
-                                <div class="flex justify-end w-full">
+                        <DropdownMenuItem @click="handleNewInstance">
-                                    <TooltipWrapper side="top" :content="inviteOrLaunchText">
+                            {{ t('dialog.world.actions.new_instance') }}
-                                        <Button
+                        </DropdownMenuItem>
-                                            size="icon-sm"
+                        <DropdownMenuItem @click="handleSelfInvite">
-                                            variant="ghost"
+                            {{ inviteOrLaunchText }}
-                                            class="rounded-full text-xs h-6 w-6"
+                        </DropdownMenuItem>
-                                            @click.stop="newInstanceSelfInvite(favorite.id)"
+                        <DropdownMenuSeparator />
-                                            ><Mail class="h-4 w-4"
+                        <DropdownMenuItem @click="showFavoriteDialog('world', favorite.id)">
-                                        /></Button>
+                            {{ t('view.favorite.edit_favorite_tooltip') }}
-                                    </TooltipWrapper>
+                        </DropdownMenuItem>
-                                </div>
+                        <DropdownMenuItem variant="destructive" @click="handleDeleteFavorite">
-                                <div class="flex justify-end w-full">
+                            {{ deleteMenuLabel }}
-                                    <TooltipWrapper
+                        </DropdownMenuItem>
-                                        v-if="showDangerUnfavorite"
+                    </DropdownMenuContent>
-                                        side="top"
+                </DropdownMenu>
-                                        :content="t('view.favorite.unfavorite_tooltip')">
+            </Item>
-                                        <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="!isLocalFavorite && favorite.deleted"
-                                :title="t('view.favorite.unavailable_tooltip')"
-                                class="h-4 w-4" />
-                        </div>
-                    </div>
-                    <div class="favorites-search-card__actions">
-                        <div class="flex justify-end w-full">
-                            <Button
-                                class="rounded-full text-xs h-6 w-6"
-                                size="icon-sm"
-                                :variant="isLocalFavorite ? 'outline' : 'ghost'"
-                                @click.stop="handleDeleteFavorite">
-                                <Trash2 class="h-4 w-4" />
-                            </Button>
-                        </div>
-                    </div>
-                </template>
-            </div>
         </ContextMenuTrigger>
         <ContextMenuContent>
-            <ContextMenuItem @click="handleNewInstance">
+            <ContextMenuItem @click="handleViewDetails">{{ t('common.actions.view_details') }}</ContextMenuItem>
-                <Plus class="size-4" />
+            <ContextMenuItem @click="handleNewInstance">{{ t('dialog.world.actions.new_instance') }}</ContextMenuItem>
-                {{ t('dialog.world.actions.new_instance') }}
+            <ContextMenuItem @click="handleSelfInvite">{{ inviteOrLaunchText }}</ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem @click="showFavoriteDialog('world', favorite.id)">
+                {{ t('view.favorite.edit_favorite_tooltip') }}
             </ContextMenuItem>
-            <ContextMenuItem @click="newInstanceSelfInvite(favorite.id)">
+            <ContextMenuItem variant="destructive" @click="handleDeleteFavorite">
-                <Mail class="size-4" />
+                {{ deleteMenuLabel }}
-                {{ inviteOrLaunchText }}
             </ContextMenuItem>
         </ContextMenuContent>
     </ContextMenu>
 </template>
 
 <script setup>
-    import { AlertTriangle, Lock, Mail, Plus, Star, Trash2 } from 'lucide-vue-next';
+    import { AlertTriangle, Lock, MoreHorizontal } 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 {
+        ContextMenu,
+        ContextMenuContent,
+        ContextMenuItem,
+        ContextMenuSeparator,
+        ContextMenuTrigger
+    } from '@/components/ui/context-menu';
+    import {
+        DropdownMenu,
+        DropdownMenuContent,
+        DropdownMenuItem,
+        DropdownMenuSeparator,
+        DropdownMenuTrigger
+    } from '@/components/ui/dropdown-menu';
+    import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+    import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
     import { computed } from 'vue';
-    import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { useFavoriteStore, useInstanceStore, useInviteStore, useUiStore } from '../../../stores';
-    import { runNewInstanceSelfInviteFlow as newInstanceSelfInvite } from '../../../coordinators/inviteCoordinator';
     import { favoriteRequest } from '../../../api';
-
+    import { removeLocalWorldFavorite } from '../../../coordinators/favoriteCoordinator';
-    import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
+    import { runNewInstanceSelfInviteFlow as newInstanceSelfInvite } from '../../../coordinators/inviteCoordinator';
+    import { showWorldDialog } from '../../../coordinators/worldCoordinator';
+    import { useFavoriteStore, useInstanceStore, useInviteStore } from '../../../stores';
 
     const props = defineProps({
         group: [Object, String],
@@ -179,13 +109,12 @@
         selected: { type: Boolean, default: false }
     });
 
-    const emit = defineEmits(['toggle-select', 'remove-local-world-favorite', 'click']);
+    const emit = defineEmits(['toggle-select']);
-    const { favoriteWorldGroups } = storeToRefs(useFavoriteStore());
     const { showFavoriteDialog } = useFavoriteStore();
 
     const { t } = useI18n();
     const { canOpenInstanceInGame } = useInviteStore();
-    const { shiftHeld } = storeToRefs(useUiStore());
+    const { createNewInstance } = useInstanceStore();
 
     const isSelected = computed({
         get: () => props.selected,
@@ -194,18 +123,19 @@
 
     const localFavRef = computed(() => (props.isLocalFavorite ? props.favorite : props.favorite?.ref));
 
-    const showDangerUnfavorite = computed(() => {
+    const displayName = computed(() => localFavRef.value?.name || props.favorite?.name || props.favorite?.id);
-        return shiftHeld.value;
-    });
 
-    const cardClasses = computed(() => [
+    const avatarFallback = computed(() => displayName.value?.charAt(0)?.toUpperCase() || '?');
-        'favorites-search-card',
+
-        'favorites-search-card--world',
+    const showUnavailable = computed(() => !props.isLocalFavorite && props.favorite?.deleted);
-        {
+
-            'is-selected': props.selected,
+    const isPrivateWorld = computed(() => localFavRef.value?.releaseStatus === 'private');
-            'is-edit-mode': props.editMode
+
-        }
+    const authorText = computed(() => {
-    ]);
+        const author = localFavRef.value?.authorName || '';
+        const occupants = localFavRef.value?.occupants;
+        return occupants ? `${author} (${occupants})` : author;
+    });
 
     const smallThumbnail = computed(() => {
         const url = localFavRef.value?.thumbnailImageUrl?.replace('256', '128');
@@ -218,50 +148,36 @@
             : t('dialog.world.actions.new_instance_and_self_invite');
     });
 
-    /**
+    const deleteMenuLabel = computed(() =>
-     * @returns {void}
+        props.isLocalFavorite ? t('view.favorite.delete_tooltip') : t('view.favorite.unfavorite_tooltip')
-     */
+    );
-    function handlePrimaryDeleteAction() {
+
-        if (props.isLocalFavorite) {
+    const itemStyle = computed(() => ({
-            if (shiftHeld.value) {
+        padding: 'var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px)',
-                emit('remove-local-world-favorite', props.favorite.id, props.group);
+        gap: 'var(--favorites-card-content-gap, 10px)',
-                return;
+        minWidth: 'var(--favorites-card-min-width, 220px)',
-            }
+        maxWidth: 'var(--favorites-card-target-width, 220px)',
-            showFavoriteDialog('world', props.favorite.id);
+        width: '100%',
-            return;
+        fontSize: 'calc(0.875rem * var(--favorites-card-scale, 1))'
-        }
+    }));
-        deleteFavorite(props.favorite.id);
+
+    function handleViewDetails() {
+        showWorldDialog(props.favorite.id);
     }
 
-    /**
-     *
-     */
-    function handleDeleteFavorite() {
-        if (props.isLocalFavorite) {
-            emit('remove-local-world-favorite', props.favorite.id, props.group);
-        } else {
-            deleteFavorite(props.favorite.id);
-        }
-    }
-
-    /**
-     *
-     * @param objectId
-     */
-    function deleteFavorite(objectId) {
-        favoriteRequest.deleteFavorite({ objectId });
-    }
-
-    const { createNewInstance } = useInstanceStore();
-
-    /**
-     *
-     */
     function handleNewInstance() {
         createNewInstance(props.favorite.id);
     }
-</script>
 
-<style>
+    function handleSelfInvite() {
-    @import './favorites-card.css';
+        newInstanceSelfInvite(props.favorite.id);
-</style>
+    }
+
+    function handleDeleteFavorite() {
+        if (props.isLocalFavorite) {
+            removeLocalWorldFavorite(props.favorite.id, props.group);
+            return;
+        }
+        favoriteRequest.deleteFavorite({ objectId: props.favorite.id });
+    }
+</script>

src/views/Favorites/components/FavoritesWorldLocalItem.vue

@@ -1,204 +0,0 @@
-<template>
-    <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="flex items-center gap-2">
-                                <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="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
-                                <div class="flex justify-end w-full flex-1" @click.stop>
-                                    <FavoritesMoveDropdown
-                                        :favoriteGroup="favoriteWorldGroups"
-                                        :currentFavorite="props.favorite"
-                                        class="w-full"
-                                        isLocalFavorite
-                                        type="world" />
-                                </div>
-                                <div class="flex justify-end w-full">
-                                    <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="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
-                                <div class="flex justify-end w-full">
-                                    <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="flex justify-end w-full">
-                                    <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="flex justify-end w-full">
-                            <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 { 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, useInstanceStore, useInviteStore, useUiStore } from '../../../stores';
-    import { runNewInstanceSelfInviteFlow as newInstanceSelfInvite } from '../../../coordinators/inviteCoordinator';
-
-    import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
-
-    const props = defineProps({
-        group: [Object, String],
-        favorite: Object,
-        editMode: { type: Boolean, default: false }
-    });
-
-    const emit = defineEmits(['remove-local-world-favorite', 'click']);
-    const { favoriteWorldGroups } = storeToRefs(useFavoriteStore());
-    const { showFavoriteDialog } = useFavoriteStore();
-
-    const { shiftHeld } = storeToRefs(useUiStore());
-    const { t } = useI18n();
-    const { canOpenInstanceInGame } = useInviteStore();
-
-    const cardClasses = computed(() => [
-        'favorites-search-card',
-        'favorites-search-card--world',
-        {
-            'is-edit-mode': props.editMode
-        }
-    ]);
-
-    const smallThumbnail = computed(() => {
-        const url = props.favorite.thumbnailImageUrl?.replace('256', '128');
-        return url || props.favorite.thumbnailImageUrl;
-    });
-
-    const inviteOrLaunchText = computed(() => {
-        return canOpenInstanceInGame
-            ? t('dialog.world.actions.new_instance_and_open_ingame')
-            : t('dialog.world.actions.new_instance_and_self_invite');
-    });
-
-    const showDangerUnfavorite = computed(() => {
-        return shiftHeld.value;
-    });
-
-    /**
-     * @returns {void}
-     */
-    function handlePrimaryDeleteAction() {
-        if (shiftHeld.value) {
-            emit('remove-local-world-favorite', props.favorite.id, props.group);
-            return;
-        }
-        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>
-    @import './favorites-card.css';
-</style>

src/views/Favorites/components/__tests__/FavoritesWorldItem.test.js

@@ -1,14 +1,14 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { mount } from '@vue/test-utils';
-import { ref } from 'vue';
 
 const mocks = vi.hoisted(() => ({
-    favoriteWorldGroups: null,
-    shiftHeld: null,
     showFavoriteDialog: vi.fn(),
     deleteFavorite: vi.fn(),
+    removeLocalWorldFavorite: vi.fn(),
     newInstanceSelfInvite: vi.fn(),
-    createNewInstance: vi.fn()
+    createNewInstance: vi.fn(),
+    showWorldDialog: vi.fn(),
+    canOpenInstanceInGame: false
 }));
 
 vi.mock('pinia', async (importOriginal) => {
@@ -21,9 +21,8 @@ vi.mock('pinia', async (importOriginal) => {
 
 vi.mock('vue-i18n', () => ({
     useI18n: () => ({
-        t: (key) => key
+        t: (key) => key,
-    ,
+        locale: { value: 'en' }
-            locale: require('vue').ref('en')
     })
 }));
 
@@ -37,17 +36,50 @@ vi.mock('@/components/ui/context-menu', () => ({
     ContextMenuContent: {
         template: '<div><slot /></div>'
     },
+    ContextMenuSeparator: {
+        template: '<hr />'
+    },
     ContextMenuItem: {
         emits: ['click'],
-        template: '<button @click="$emit(\'click\')"><slot /></button>'
+        template: '<button data-testid="ctx-item" @click="$emit(\'click\')"><slot /></button>'
     }
 }));
 
+vi.mock('@/components/ui/dropdown-menu', () => ({
+    DropdownMenu: {
+        template: '<div><slot /></div>'
+    },
+    DropdownMenuTrigger: {
+        template: '<div><slot /></div>'
+    },
+    DropdownMenuContent: {
+        template: '<div><slot /></div>'
+    },
+    DropdownMenuSeparator: {
+        template: '<hr />'
+    },
+    DropdownMenuItem: {
+        emits: ['click'],
+        template: '<button data-testid="dd-item" @click="$emit(\'click\')"><slot /></button>'
+    }
+}));
+
+vi.mock('@/components/ui/item', () => ({
+    Item: {
+        emits: ['click'],
+        template: '<div data-testid="item" @click="$emit(\'click\', $event)"><slot /></div>'
+    },
+    ItemActions: { template: '<div><slot /></div>' },
+    ItemMedia: { template: '<div><slot /></div>' },
+    ItemContent: { template: '<div><slot /></div>' },
+    ItemTitle: { template: '<div><slot /></div>' },
+    ItemDescription: { template: '<div><slot /></div>' }
+}));
+
 vi.mock('@/components/ui/button', () => ({
     Button: {
         emits: ['click'],
-        template:
+        template: '<button data-testid="btn" @click="$emit(\'click\', $event)"><slot /></button>'
-            '<button data-testid="btn" @click="$emit(\'click\', $event)"><slot /></button>'
     }
 }));
 
@@ -56,33 +88,25 @@ vi.mock('@/components/ui/checkbox', () => ({
         props: ['modelValue'],
         emits: ['update:modelValue'],
         template:
-            '<input type="checkbox" :checked="modelValue" @change="$emit(\'update:modelValue\', $event.target.checked)" />'
+            '<input data-testid="checkbox" type="checkbox" :checked="modelValue" @change="$emit(\'update:modelValue\', $event.target.checked)" />'
     }
 }));
 
 vi.mock('lucide-vue-next', () => ({
     AlertTriangle: { template: '<i />' },
     Lock: { template: '<i />' },
-    Mail: { template: '<i />' },
+    MoreHorizontal: { template: '<i />' }
-    Plus: { template: '<i />' },
-    Star: { template: '<i />' },
-    Trash2: { template: '<i />' }
 }));
 
 vi.mock('../../../../stores', () => ({
     useFavoriteStore: () => ({
-        favoriteWorldGroups: mocks.favoriteWorldGroups,
         showFavoriteDialog: (...args) => mocks.showFavoriteDialog(...args)
     }),
     useInviteStore: () => ({
-        newInstanceSelfInvite: (...args) => mocks.newInstanceSelfInvite(...args),
+        canOpenInstanceInGame: mocks.canOpenInstanceInGame
-        canOpenInstanceInGame: false
     }),
     useInstanceStore: () => ({
         createNewInstance: (...args) => mocks.createNewInstance(...args)
-    }),
-    useUiStore: () => ({
-        shiftHeld: mocks.shiftHeld
     })
 }));
 
@@ -92,90 +116,167 @@ vi.mock('../../../../api', () => ({
     }
 }));
 
+vi.mock('../../../../coordinators/inviteCoordinator', () => ({
+    runNewInstanceSelfInviteFlow: (...args) => mocks.newInstanceSelfInvite(...args)
+}));
+
+vi.mock('../../../../coordinators/worldCoordinator', () => ({
+    showWorldDialog: (...args) => mocks.showWorldDialog(...args)
+}));
+
+vi.mock('../../../../coordinators/favoriteCoordinator', () => ({
+    removeLocalWorldFavorite: (...args) => mocks.removeLocalWorldFavorite(...args)
+}));
+
 import FavoritesWorldItem from '../FavoritesWorldItem.vue';
 
 /**
  *
- * @param props
+ * @param {Record<string, any>} props
  */
 function mountItem(props = {}) {
     return mount(FavoritesWorldItem, {
         props: {
             favorite: {
                 id: 'wrld_default',
+                ref: {
                     name: 'Default World',
-                authorName: 'Author'
+                    authorName: 'Author',
+                    thumbnailImageUrl: '',
+                    releaseStatus: 'public'
+                }
             },
             group: 'Favorites',
-            isLocalFavorite: true,
+            isLocalFavorite: false,
             editMode: false,
+            selected: false,
             ...props
-        },
-        global: {
-            stubs: {
-                TooltipWrapper: {
-                    template: '<div><slot /></div>'
-                },
-                FavoritesMoveDropdown: {
-                    template: '<div />'
-                }
-            }
         }
     });
 }
 
+/**
+ *
+ * @param wrapper
+ * @param text
+ */
+async function clickMenuItem(wrapper, text) {
+    const buttons = wrapper.findAll('button');
+    const target = buttons.find((btn) => btn.text().includes(text));
+    expect(target, `menu item not found: ${text}`).toBeTruthy();
+    await target.trigger('click');
+}
+
 describe('FavoritesWorldItem.vue', () => {
     beforeEach(() => {
-        mocks.favoriteWorldGroups = ref([]);
-        mocks.shiftHeld = ref(false);
         mocks.showFavoriteDialog.mockReset();
         mocks.deleteFavorite.mockReset();
+        mocks.removeLocalWorldFavorite.mockReset();
         mocks.newInstanceSelfInvite.mockReset();
         mocks.createNewInstance.mockReset();
+        mocks.showWorldDialog.mockReset();
+        mocks.canOpenInstanceInGame = false;
     });
 
-    it('renders fallback text when local favorite has no name', () => {
+    it('opens world details when item is clicked', async () => {
+        const wrapper = mountItem();
+
+        await wrapper.get('[data-testid="item"]').trigger('click');
+
+        expect(mocks.showWorldDialog).toHaveBeenCalledWith('wrld_default');
+    });
+
+    it('renders the full 5-item action menu', () => {
+        const wrapper = mountItem();
+        const text = wrapper.text();
+
+        expect(text).toContain('common.actions.view_details');
+        expect(text).toContain('dialog.world.actions.new_instance');
+        expect(text).toContain('dialog.world.actions.new_instance_and_self_invite');
+        expect(text).toContain('view.favorite.edit_favorite_tooltip');
+        expect(text).toContain('view.favorite.unfavorite_tooltip');
+    });
+
+    it('opens world details from menu action', async () => {
+        const wrapper = mountItem();
+
+        await clickMenuItem(wrapper, 'common.actions.view_details');
+
+        expect(mocks.showWorldDialog).toHaveBeenCalledWith('wrld_default');
+    });
+
+    it('opens edit favorite dialog from menu action', async () => {
+        const wrapper = mountItem();
+
+        await clickMenuItem(wrapper, 'view.favorite.edit_favorite_tooltip');
+
+        expect(mocks.showFavoriteDialog).toHaveBeenCalledWith('world', 'wrld_default');
+    });
+
+    it('emits toggle-select in edit mode for remote favorites', async () => {
+        const wrapper = mountItem({ editMode: true });
+
+        await wrapper.get('[data-testid="checkbox"]').setValue(true);
+
+        expect(wrapper.emitted('toggle-select')).toEqual([[true]]);
+    });
+
+    it('does not show checkbox in edit mode for local favorites', () => {
         const wrapper = mountItem({
+            editMode: true,
+            isLocalFavorite: true,
             favorite: {
-                id: 'wrld_missing_name'
+                id: 'wrld_local_1',
+                name: 'Local World'
             }
         });
 
-        expect(wrapper.text()).toContain('wrld_missing_name');
+        expect(wrapper.find('[data-testid="checkbox"]').exists()).toBe(false);
     });
 
-    it('emits local remove event in fallback mode when delete is clicked', async () => {
+    it('renders fallback id when world ref is missing', () => {
         const wrapper = mountItem({
             favorite: {
-                id: 'wrld_missing_name'
+                id: 'wrld_missing_ref'
             },
-            group: 'LocalGroup'
+            isLocalFavorite: true
         });
 
-        await wrapper.get('[data-testid="btn"]').trigger('click');
+        expect(wrapper.text()).toContain('wrld_missing_ref');
-
-        expect(wrapper.emitted('remove-local-world-favorite')).toEqual([
-            ['wrld_missing_name', 'LocalGroup']
-        ]);
-        expect(mocks.deleteFavorite).not.toHaveBeenCalled();
     });
 
-    it('opens local favorite dialog in edit mode when shift is not held', async () => {
+    it('deletes local favorite via coordinator', async () => {
         const wrapper = mountItem({
             favorite: {
                 id: 'wrld_local_1',
-                name: 'Local World',
+                name: 'Local World'
-                authorName: 'Author'
             },
-            editMode: true
+            group: 'LocalGroup',
+            isLocalFavorite: true
         });
 
-        await wrapper.get('[data-testid="btn"]').trigger('click');
+        await clickMenuItem(wrapper, 'view.favorite.delete_tooltip');
 
-        expect(mocks.showFavoriteDialog).toHaveBeenCalledWith(
+        expect(mocks.removeLocalWorldFavorite).toHaveBeenCalledWith('wrld_local_1', 'LocalGroup');
-            'world',
+        expect(mocks.deleteFavorite).not.toHaveBeenCalled();
-            'wrld_local_1'
+    });
-        );
+
-        expect(wrapper.emitted('remove-local-world-favorite')).toBeUndefined();
+    it('deletes remote favorite via API', async () => {
+        const wrapper = mountItem({ isLocalFavorite: false });
+
+        await clickMenuItem(wrapper, 'view.favorite.unfavorite_tooltip');
+
+        expect(mocks.deleteFavorite).toHaveBeenCalledWith({ objectId: 'wrld_default' });
+        expect(mocks.removeLocalWorldFavorite).not.toHaveBeenCalled();
+    });
+
+    it('runs new instance and self invite actions from menu', async () => {
+        const wrapper = mountItem();
+
+        await clickMenuItem(wrapper, 'dialog.world.actions.new_instance');
+        await clickMenuItem(wrapper, 'dialog.world.actions.new_instance_and_self_invite');
+
+        expect(mocks.createNewInstance).toHaveBeenCalledWith('wrld_default');
+        expect(mocks.newInstanceSelfInvite).toHaveBeenCalledWith('wrld_default');
     });
 });