refactor: use item for favorite friend item

src/localization/en.json

@@ -12,7 +12,8 @@
             "open": "Open",
             "confirm": "Confirm",
             "clear": "Clear",
-            "reset": "Reset"
+            "reset": "Reset",
+            "view_details": "View Details"
         },
         "time_units": {
             "y": "y",

src/views/Favorites/FavoritesFriend.vue

@@ -246,8 +246,7 @@
                                                 :group="activeRemoteGroup"
                                                 :selected="selectedFavoriteFriends.includes(favorite.id)"
                                                 :edit-mode="friendEditMode"
-                                                @toggle-select="toggleFriendSelection(favorite.id, $event)"
+                                                @toggle-select="toggleFriendSelection(favorite.id, $event)" />
-                                                @click="showUserDialog(favorite.id)" />
                                         </div>
                                     </template>
                                     <div v-else class="flex items-center justify-center text-[13px] h-full">
@@ -268,8 +267,7 @@
                                                 :group="{ key: activeLocalGroupName, type: 'local' }"
                                                 :selected="selectedFavoriteFriends.includes(favorite.id)"
                                                 :edit-mode="friendEditMode"
-                                                @toggle-select="toggleFriendSelection(favorite.id, $event)"
+                                                @toggle-select="toggleFriendSelection(favorite.id, $event)" />
-                                                @click="showUserDialog(favorite.id)" />
                                         </div>
                                     </template>
                                     <div v-else class="flex items-center justify-center text-[13px] h-full">

src/views/Favorites/components/FavoritesFriendItem.vue

@@ -1,101 +1,162 @@
 <template>
-    <div :class="cardClasses" @click="$emit('click')">
+    <template v-if="favorite.ref">
-        <template v-if="favorite.ref">
+        <ContextMenu>
-            <div class="favorites-search-card__content">
+            <ContextMenuTrigger as-child>
-                <div class="favorites-search-card__avatar">
+                <Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleOpenProfile">
-                    <img :src="userImage(favorite.ref, true)" loading="lazy" />
+                    <ItemMedia variant="image">
-                </div>
+                        <Avatar>
-                <div class="favorites-search-card__detail">
+                            <AvatarImage :src="userImage(favorite.ref, true)" loading="lazy" />
-                    <div class="flex items-center gap-2">
+                            <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
-                        <span class="name text-sm" :style="displayNameStyle">{{ favorite.ref.displayName }}</span>
+                        </Avatar>
-                    </div>
+                    </ItemMedia>
-                    <div v-if="favorite.ref.location !== 'offline'" class="text-xs truncate">
+                    <ItemContent class="min-w-0">
-                        <Location
+                        <ItemTitle class="truncate max-w-full" :style="displayNameStyle">{{ displayName }}</ItemTitle>
-                            :location="favorite.ref.location"
+                        <ItemDescription class="truncate line-clamp-1">
-                            :traveling="favorite.ref.travelingToLocation"
+                            <template v-if="favorite.ref.location !== 'offline'">
-                            :link="false" />
+                                <Location
-                    </div>
+                                    :location="favorite.ref.location"
-                    <span v-else class="text-xs text-muted-foreground">{{ favorite.ref.statusDescription }}</span>
+                                    :traveling="favorite.ref.travelingToLocation"
-                </div>
+                                    :link="false" />
-            </div>
+                            </template>
-            <div class="favorites-search-card__actions">
+                            <template v-else>
-                <template v-if="editMode">
+                                {{ favorite.ref.statusDescription }}
-                    <div class="flex justify-end w-full favorites-search-card__action--checkbox" @click.stop>
+                            </template>
+                        </ItemDescription>
+                    </ItemContent>
+                    <ItemActions v-if="editMode" @click.stop>
                         <Checkbox v-model="isSelected" />
-                    </div>
+                    </ItemActions>
-                    <div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
+                    <DropdownMenu v-else>
-                        <div v-if="group?.type !== 'local'" 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="favoriteFriendGroups"
+                                <MoreHorizontal class="h-4 w-4" />
-                                :currentGroup="group"
+                            </Button>
-                                :currentFavorite="favorite"
+                        </DropdownMenuTrigger>
-                                class="w-full"
+                        <DropdownMenuContent align="end">
-                                type="friend" />
+                            <DropdownMenuItem @click="handleOpenProfile">
-                        </div>
+                                {{ t('common.actions.view_details') }}
-                        <div class="flex justify-end w-full">
+                            </DropdownMenuItem>
-                            <TooltipWrapper side="left" :content="t('view.favorite.unfavorite_tooltip')">
+                            <DropdownMenuItem v-if="favorite.ref.state === 'online'" @click="friendRequestInvite">
-                                <Button
+                                {{ t('dialog.user.actions.request_invite') }}
-                                    size="icon-sm"
+                            </DropdownMenuItem>
-                                    variant="ghost"
+                            <DropdownMenuItem v-if="isGameRunning" :disabled="!canInviteToMyLocation" @click="friendInvite">
-                                    class="rounded-full text-xs h-6 w-6"
+                                {{ t('dialog.user.actions.invite') }}
-                                    @click.stop="handleDeleteFavorite">
+                            </DropdownMenuItem>
-                                    <Trash2 class="h-4 w-4" />
+                            <DropdownMenuItem :disabled="!currentUser?.isBoopingEnabled" @click="friendSendBoop">
-                                </Button>
+                                {{ t('dialog.user.actions.send_boop') }}
-                            </TooltipWrapper>
+                            </DropdownMenuItem>
-                        </div>
+                            <DropdownMenuSeparator v-if="favorite.ref.state === 'online' && hasFriendLocation" />
-                    </div>
+                            <DropdownMenuItem
-                </template>
+                                v-if="favorite.ref.state === 'online' && hasFriendLocation"
-                <template v-else>
+                                :disabled="!canJoinFriend"
-                    <div class="flex justify-end w-full">
+                                @click="friendJoin">
-                        <TooltipWrapper side="right" :content="t('view.favorite.edit_favorite_tooltip')">
+                                {{ t('dialog.user.info.launch_invite_tooltip') }}
-                            <Button
+                            </DropdownMenuItem>
-                                size="icon-sm"
+                            <DropdownMenuItem
-                                variant="ghost"
+                                v-if="favorite.ref.state === 'online' && hasFriendLocation"
-                                class="rounded-full text-xs h-6 w-6"
+                                :disabled="!canJoinFriend"
-                                @click.stop="showFavoriteDialog('friend', favorite.id)"
+                                @click="friendInviteSelf">
-                                ><Star class="h-4 w-4"
+                                {{ t('dialog.user.info.self_invite_tooltip') }}
-                            /></Button>
+                            </DropdownMenuItem>
-                        </TooltipWrapper>
+                            <DropdownMenuSeparator />
-                    </div>
+                            <DropdownMenuItem @click="showFavoriteDialog('friend', favorite.id)">
-                </template>
+                                {{ t('view.favorite.edit_favorite_tooltip') }}
-            </div>
+                            </DropdownMenuItem>
-        </template>
+                            <DropdownMenuItem variant="destructive" @click="handleDeleteFavorite">
-        <template v-else>
+                                {{ deleteMenuLabel }}
-            <div class="favorites-search-card__content">
+                            </DropdownMenuItem>
-                <div class="favorites-search-card__avatar is-empty"></div>
+                        </DropdownMenuContent>
-                <div class="favorites-search-card__detail">
+                    </DropdownMenu>
-                    <span>{{ favorite.name || favorite.id }}</span>
+                </Item>
-                </div>
+            </ContextMenuTrigger>
-            </div>
+            <ContextMenuContent>
-            <div class="favorites-search-card__actions">
+                <ContextMenuItem @click="handleOpenProfile">{{ t('common.actions.view_details') }}</ContextMenuItem>
-                <div class="flex justify-end w-full">
+                <ContextMenuItem v-if="favorite.ref.state === 'online'" @click="friendRequestInvite">
-                    <Button
+                    {{ t('dialog.user.actions.request_invite') }}
-                        class="rounded-full text-xs h-6 w-6"
+                </ContextMenuItem>
-                        size="icon-sm"
+                <ContextMenuItem v-if="isGameRunning" :disabled="!canInviteToMyLocation" @click="friendInvite">
-                        variant="outline"
+                    {{ t('dialog.user.actions.invite') }}
-                        @click.stop="handleDeleteFavorite">
+                </ContextMenuItem>
-                        <Trash2 class="h-4 w-4" />
+                <ContextMenuItem :disabled="!currentUser?.isBoopingEnabled" @click="friendSendBoop">
-                    </Button>
+                    {{ t('dialog.user.actions.send_boop') }}
-                </div>
+                </ContextMenuItem>
-            </div>
+                <ContextMenuSeparator v-if="favorite.ref.state === 'online' && hasFriendLocation" />
-        </template>
+                <ContextMenuItem
-    </div>
+                    v-if="favorite.ref.state === 'online' && hasFriendLocation"
+                    :disabled="!canJoinFriend"
+                    @click="friendJoin">
+                    {{ t('dialog.user.info.launch_invite_tooltip') }}
+                </ContextMenuItem>
+                <ContextMenuItem
+                    v-if="favorite.ref.state === 'online' && hasFriendLocation"
+                    :disabled="!canJoinFriend"
+                    @click="friendInviteSelf">
+                    {{ t('dialog.user.info.self_invite_tooltip') }}
+                </ContextMenuItem>
+                <ContextMenuSeparator />
+                <ContextMenuItem @click="showFavoriteDialog('friend', favorite.id)">
+                    {{ t('view.favorite.edit_favorite_tooltip') }}
+                </ContextMenuItem>
+                <ContextMenuItem variant="destructive" @click="handleDeleteFavorite">
+                    {{ deleteMenuLabel }}
+                </ContextMenuItem>
+            </ContextMenuContent>
+        </ContextMenu>
+    </template>
+    <template v-else>
+        <Item variant="outline" :style="itemStyle">
+            <ItemMedia variant="image">
+                <Avatar>
+                    <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
+                </Avatar>
+            </ItemMedia>
+            <ItemContent class="min-w-0">
+                <ItemTitle class="truncate max-w-full">{{ favorite.name || favorite.id }}</ItemTitle>
+                <ItemDescription class="truncate line-clamp-1">{{ favorite.id }}</ItemDescription>
+            </ItemContent>
+            <ItemActions>
+                <Button class="rounded-full h-6 w-6" size="icon-sm" variant="outline" @click.stop="handleDeleteFavorite">
+                    <Trash2 class="h-4 w-4" />
+                </Button>
+            </ItemActions>
+        </Item>
+    </template>
 </template>
 
 <script setup>
-    import { Star, Trash2 } from 'lucide-vue-next';
+    import { MoreHorizontal, Trash2 } from 'lucide-vue-next';
     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, AvatarImage } from '@/components/ui/avatar';
+    import { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
+    import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
-    import { favoriteRequest } from '../../../api';
+    import { favoriteRequest, instanceRequest, notificationRequest, queryRequest } from '../../../api';
+    import { useInviteChecks } from '../../../composables/useInviteChecks';
     import { removeLocalFriendFavorite } from '../../../coordinators/favoriteCoordinator';
-    import { useFavoriteStore } from '../../../stores';
+    import { showUserDialog } from '../../../coordinators/userCoordinator';
+    import { parseLocation, isRealInstance } from '../../../shared/utils';
+    import { useFavoriteStore, useGameStore, useLocationStore, useLaunchStore, useUserStore } from '../../../stores';
     import { useUserDisplay } from '../../../composables/useUserDisplay';
 
-    import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
+    import Location from '../../../components/Location.vue';
 
     const { userImage } = useUserDisplay();
     const props = defineProps({
@@ -105,25 +166,25 @@
         selected: { type: Boolean, default: false }
     });
 
-    const emit = defineEmits(['click', 'toggle-select']);
+    const emit = defineEmits(['toggle-select']);
 
-    const { favoriteFriendGroups } = storeToRefs(useFavoriteStore());
     const { showFavoriteDialog } = useFavoriteStore();
+    const launchStore = useLaunchStore();
     const { t } = useI18n();
+    const { showSendBoopDialog } = useUserStore();
+    const { checkCanInvite, checkCanInviteSelf } = useInviteChecks();
+    const { currentUser } = storeToRefs(useUserStore());
+    const { isGameRunning } = storeToRefs(useGameStore());
+    const { lastLocation, lastLocationDestination } = storeToRefs(useLocationStore());
 
     const isSelected = computed({
         get: () => props.selected,
         set: (value) => emit('toggle-select', value)
     });
 
-    const cardClasses = computed(() => [
+    const displayName = computed(() => props.favorite?.ref?.displayName || props.favorite?.name || props.favorite?.id);
-        'favorites-search-card',
+
-        'favorites-search-card--friend',
+    const avatarFallback = computed(() => displayName.value?.charAt(0)?.toUpperCase() || '?');
-        {
-            'is-selected': props.selected,
-            'is-edit-mode': props.editMode
-        }
-    ]);
 
     const displayNameStyle = computed(() => {
         if (props.favorite?.ref?.$userColour) {
@@ -134,6 +195,94 @@
         return {};
     });
 
+    const itemStyle = computed(() => ({
+        padding: 'var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px)',
+        gap: 'var(--favorites-card-content-gap, 10px)',
+        minWidth: 'var(--favorites-card-min-width, 220px)',
+        maxWidth: 'var(--favorites-card-target-width, 220px)',
+        width: '100%',
+        fontSize: 'calc(0.875rem * var(--favorites-card-scale, 1))'
+    }));
+
+    const deleteMenuLabel = computed(() =>
+        props.group?.type === 'local' ? t('view.favorite.delete_tooltip') : t('view.favorite.unfavorite_tooltip')
+    );
+
+    const canInviteToMyLocation = computed(() => checkCanInvite(lastLocation.value.location));
+
+    const hasFriendLocation = computed(() => {
+        const loc = props.favorite?.ref?.location;
+        return !!loc && isRealInstance(loc);
+    });
+
+    const canJoinFriend = computed(() => {
+        const loc = props.favorite?.ref?.location;
+        if (!loc || !isRealInstance(loc)) {
+            return false;
+        }
+        return checkCanInviteSelf(loc);
+    });
+
+    function handleOpenProfile() {
+        showUserDialog(props.favorite.id);
+    }
+
+    function friendRequestInvite() {
+        notificationRequest.sendRequestInvite({ platform: 'standalonewindows' }, props.favorite.id).then(() => {
+            toast.success('Request invite sent');
+        });
+    }
+
+    function friendInvite() {
+        let currentLocation = lastLocation.value.location;
+        if (currentLocation === 'traveling') {
+            currentLocation = lastLocationDestination.value;
+        }
+        const location = parseLocation(currentLocation);
+        queryRequest.fetch('world.location', { worldId: location.worldId }).then((args) => {
+            notificationRequest
+                .sendInvite(
+                    {
+                        instanceId: location.tag,
+                        worldId: location.tag,
+                        worldName: args.ref.name
+                    },
+                    props.favorite.id
+                )
+                .then(() => {
+                    toast.success(t('message.invite.sent'));
+                });
+        });
+    }
+
+    function friendSendBoop() {
+        showSendBoopDialog(props.favorite.id);
+    }
+
+    function friendJoin() {
+        const loc = props.favorite?.ref?.location;
+        if (!loc) {
+            return;
+        }
+        launchStore.showLaunchDialog(loc);
+    }
+
+    function friendInviteSelf() {
+        const loc = props.favorite?.ref?.location;
+        if (!loc) {
+            return;
+        }
+        const location = parseLocation(loc);
+        instanceRequest
+            .selfInvite({
+                instanceId: location.instanceId,
+                worldId: location.worldId
+            })
+            .then(() => {
+                toast.success(t('message.invite.self_sent'));
+            });
+    }
+
     /**
      * @returns {void}
      */
@@ -148,6 +297,3 @@
     }
 </script>
 
-<style>
-    @import './favorites-card.css';
-</style>

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

@@ -0,0 +1,313 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+
+const mocks = vi.hoisted(() => ({
+    showFavoriteDialog: vi.fn(),
+    showUserDialog: vi.fn(),
+    showSendBoopDialog: vi.fn(),
+    removeLocalFriendFavorite: vi.fn(),
+    deleteFavorite: vi.fn(),
+    sendRequestInvite: vi.fn(() => Promise.resolve()),
+    sendInvite: vi.fn(() => Promise.resolve()),
+    selfInvite: vi.fn(() => Promise.resolve()),
+    fetch: vi.fn(() => Promise.resolve({ ref: { name: 'World Name' } })),
+    showLaunchDialog: vi.fn(),
+    checkCanInvite: vi.fn(() => true),
+    checkCanInviteSelf: vi.fn(() => true),
+    isRealInstance: vi.fn(() => true),
+    currentUser: { isBoopingEnabled: true },
+    isGameRunning: { value: true },
+    lastLocation: { value: { location: 'wrld_here:123~private' } },
+    lastLocationDestination: { value: 'wrld_destination:456~private' },
+    toastSuccess: vi.fn()
+}));
+
+vi.mock('pinia', async (importOriginal) => {
+    const actual = await importOriginal();
+    return {
+        ...actual,
+        storeToRefs: (store) => store
+    };
+});
+
+vi.mock('vue-i18n', () => ({
+    useI18n: () => ({
+        t: (key) => key
+    })
+}));
+
+vi.mock('vue-sonner', () => ({
+    toast: {
+        success: (...args) => mocks.toastSuccess(...args)
+    }
+}));
+
+vi.mock('../../../../stores', () => ({
+    useFavoriteStore: () => ({
+        showFavoriteDialog: (...args) => mocks.showFavoriteDialog(...args)
+    }),
+    useUserStore: () => ({
+        showSendBoopDialog: (...args) => mocks.showSendBoopDialog(...args),
+        currentUser: mocks.currentUser
+    }),
+    useGameStore: () => ({
+        isGameRunning: mocks.isGameRunning
+    }),
+    useLocationStore: () => ({
+        lastLocation: mocks.lastLocation,
+        lastLocationDestination: mocks.lastLocationDestination
+    }),
+    useLaunchStore: () => ({
+        showLaunchDialog: (...args) => mocks.showLaunchDialog(...args)
+    })
+}));
+
+vi.mock('../../../../api', () => ({
+    favoriteRequest: {
+        deleteFavorite: (...args) => mocks.deleteFavorite(...args)
+    },
+    notificationRequest: {
+        sendRequestInvite: (...args) => mocks.sendRequestInvite(...args),
+        sendInvite: (...args) => mocks.sendInvite(...args)
+    },
+    instanceRequest: {
+        selfInvite: (...args) => mocks.selfInvite(...args)
+    },
+    queryRequest: {
+        fetch: (...args) => mocks.fetch(...args)
+    }
+}));
+
+vi.mock('../../../../coordinators/favoriteCoordinator', () => ({
+    removeLocalFriendFavorite: (...args) => mocks.removeLocalFriendFavorite(...args)
+}));
+
+vi.mock('../../../../coordinators/userCoordinator', () => ({
+    showUserDialog: (...args) => mocks.showUserDialog(...args)
+}));
+
+vi.mock('../../../../composables/useInviteChecks', () => ({
+    useInviteChecks: () => ({
+        checkCanInvite: (...args) => mocks.checkCanInvite(...args),
+        checkCanInviteSelf: (...args) => mocks.checkCanInviteSelf(...args)
+    })
+}));
+
+vi.mock('../../../../composables/useUserDisplay', () => ({
+    useUserDisplay: () => ({
+        userImage: () => 'https://example.com/avatar.png'
+    })
+}));
+
+vi.mock('../../../../shared/utils', () => ({
+    parseLocation: () => ({ worldId: 'wrld_123', instanceId: '123', tag: '123~private' }),
+    isRealInstance: (...args) => mocks.isRealInstance(...args)
+}));
+
+vi.mock('../../../../components/Location.vue', () => ({
+    default: {
+        template: '<span data-testid="location" />'
+    }
+}));
+
+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/avatar', () => ({
+    Avatar: { template: '<div><slot /></div>' },
+    AvatarImage: { template: '<img />' },
+    AvatarFallback: { template: '<span><slot /></span>' }
+}));
+
+vi.mock('@/components/ui/button', () => ({
+    Button: {
+        emits: ['click'],
+        template: '<button data-testid="btn" @click="$emit(\'click\', $event)"><slot /></button>'
+    }
+}));
+
+vi.mock('@/components/ui/checkbox', () => ({
+    Checkbox: {
+        props: ['modelValue'],
+        emits: ['update:modelValue'],
+        template:
+            '<input data-testid="checkbox" type="checkbox" :checked="modelValue" @change="$emit(\'update:modelValue\', $event.target.checked)" />'
+    }
+}));
+
+vi.mock('@/components/ui/context-menu', () => ({
+    ContextMenu: { template: '<div><slot /></div>' },
+    ContextMenuTrigger: { template: '<div><slot /></div>' },
+    ContextMenuContent: { template: '<div><slot /></div>' },
+    ContextMenuSeparator: { template: '<hr />' },
+    ContextMenuItem: {
+        emits: ['click'],
+        template: '<button data-testid="context-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="dropdown-item" @click="$emit(\'click\')"><slot /></button>'
+    }
+}));
+
+vi.mock('lucide-vue-next', () => ({
+    MoreHorizontal: { template: '<i />' },
+    Trash2: { template: '<i />' }
+}));
+
+import FavoritesFriendItem from '../FavoritesFriendItem.vue';
+
+/**
+ *
+ * @param {Record<string, any>} props
+ */
+function mountItem(props = {}) {
+    return mount(FavoritesFriendItem, {
+        props: {
+            favorite: {
+                id: 'usr_1',
+                ref: {
+                    id: 'usr_1',
+                    displayName: 'Alice',
+                    statusDescription: 'Hello',
+                    location: 'wrld_aaa:1~private',
+                    travelingToLocation: '',
+                    state: 'online'
+                }
+            },
+            group: { key: 'g1', type: 'remote' },
+            editMode: false,
+            selected: false,
+            ...props
+        }
+    });
+}
+
+/**
+ *
+ * @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('FavoritesFriendItem.vue', () => {
+    beforeEach(() => {
+        mocks.showFavoriteDialog.mockReset();
+        mocks.showUserDialog.mockReset();
+        mocks.showSendBoopDialog.mockReset();
+        mocks.removeLocalFriendFavorite.mockReset();
+        mocks.deleteFavorite.mockReset();
+        mocks.sendRequestInvite.mockClear();
+        mocks.sendInvite.mockClear();
+        mocks.selfInvite.mockClear();
+        mocks.fetch.mockClear();
+        mocks.showLaunchDialog.mockReset();
+        mocks.checkCanInvite.mockReturnValue(true);
+        mocks.checkCanInviteSelf.mockReturnValue(true);
+        mocks.isRealInstance.mockReturnValue(true);
+        mocks.currentUser.isBoopingEnabled = true;
+        mocks.isGameRunning.value = true;
+        mocks.lastLocation.value = { location: 'wrld_here:123~private' };
+        mocks.lastLocationDestination.value = 'wrld_destination:456~private';
+    });
+
+    it('opens user dialog when item is clicked', async () => {
+        const wrapper = mountItem();
+
+        await wrapper.get('[data-testid="item"]').trigger('click');
+
+        expect(mocks.showUserDialog).toHaveBeenCalledWith('usr_1');
+    });
+
+    it('emits toggle-select in edit mode checkbox', async () => {
+        const wrapper = mountItem({ editMode: true });
+
+        await wrapper.get('[data-testid="checkbox"]').setValue(true);
+
+        expect(wrapper.emitted('toggle-select')).toEqual([[true]]);
+    });
+
+    it('uses local delete flow for local favorites', async () => {
+        const wrapper = mountItem({ group: { key: 'Local', type: 'local' } });
+
+        await clickMenuItem(wrapper, 'view.favorite.delete_tooltip');
+
+        expect(mocks.removeLocalFriendFavorite).toHaveBeenCalledWith('usr_1', 'Local');
+        expect(mocks.deleteFavorite).not.toHaveBeenCalled();
+    });
+
+    it('uses remote delete flow for remote favorites', async () => {
+        const wrapper = mountItem({ group: { key: 'Remote', type: 'remote' } });
+
+        await clickMenuItem(wrapper, 'view.favorite.unfavorite_tooltip');
+
+        expect(mocks.deleteFavorite).toHaveBeenCalledWith({ objectId: 'usr_1' });
+        expect(mocks.removeLocalFriendFavorite).not.toHaveBeenCalled();
+    });
+
+    it('renders invite/join actions only when online with instance', () => {
+        const wrapper = mountItem();
+
+        expect(wrapper.text()).toContain('dialog.user.actions.request_invite');
+        expect(wrapper.text()).toContain('dialog.user.actions.invite');
+        expect(wrapper.text()).toContain('dialog.user.info.launch_invite_tooltip');
+        expect(wrapper.text()).toContain('dialog.user.info.self_invite_tooltip');
+    });
+
+    it('hides invite/join actions when offline', () => {
+        const wrapper = mountItem({
+            favorite: {
+                id: 'usr_1',
+                ref: {
+                    id: 'usr_1',
+                    displayName: 'Alice',
+                    statusDescription: 'Offline',
+                    location: 'offline',
+                    travelingToLocation: '',
+                    state: 'offline'
+                }
+            }
+        });
+
+        expect(wrapper.text()).not.toContain('dialog.user.actions.request_invite');
+        expect(wrapper.text()).not.toContain('dialog.user.info.launch_invite_tooltip');
+        expect(wrapper.text()).not.toContain('dialog.user.info.self_invite_tooltip');
+    });
+
+    it('triggers request invite action', async () => {
+        const wrapper = mountItem();
+
+        await clickMenuItem(wrapper, 'dialog.user.actions.request_invite');
+
+        expect(mocks.sendRequestInvite).toHaveBeenCalledWith({ platform: 'standalonewindows' }, 'usr_1');
+    });
+
+    it('triggers join action', async () => {
+        const wrapper = mountItem();
+
+        await clickMenuItem(wrapper, 'dialog.user.info.launch_invite_tooltip');
+
+        expect(mocks.showLaunchDialog).toHaveBeenCalledWith('wrld_aaa:1~private');
+    });
+});