refactor: use item component for favorites avatar item

src/views/Favorites/FavoritesAvatar.vue

@@ -352,8 +352,7 @@
                                                 :group="activeRemoteGroup"
                                                 :selected="selectedFavoriteAvatars.includes(favorite.id)"
                                                 :edit-mode="avatarEditMode"
-                                                @toggle-select="toggleAvatarSelection(favorite.id, $event)"
+                                                @toggle-select="toggleAvatarSelection(favorite.id, $event)" />
-                                                @click="showAvatarDialog(favorite.id)" />
                                         </div>
                                     </template>
                                     <div v-else class="flex items-center justify-center text-[13px] h-full">
@@ -385,8 +384,7 @@
                                                 :favorite="favorite"
                                                 :group="activeLocalGroupName"
                                                 is-local-favorite
-                                                :edit-mode="avatarEditMode"
+                                                :edit-mode="avatarEditMode" />
-                                                @click="showAvatarDialog(favorite.id)" />
                                         </div>
                                     </template>
                                     <div v-else class="flex items-center justify-center text-[13px] h-full">
@@ -403,8 +401,7 @@
                                             <FavoritesAvatarLocalHistoryItem
                                                 v-for="favorite in avatarHistory"
                                                 :key="favorite.id"
-                                                :favorite="favorite"
+                                                :favorite="favorite" />
-                                                @click="showAvatarDialog(favorite.id)" />
                                         </div>
                                     </template>
                                     <div v-else class="flex items-center justify-center text-[13px] h-full">

src/views/Favorites/components/FavoritesAvatarItem.vue

@@ -1,161 +1,126 @@
 <template>
+    <template v-if="localFavFakeRef">
         <ContextMenu>
             <ContextMenuTrigger as-child>
-            <div :class="cardClasses" @click="$emit('click')">
+                <Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleViewDetails">
-                <template v-if="localFavFakeRef">
+                    <ItemMedia variant="image">
-                    <div class="favorites-search-card__content">
+                        <img
-                        <div
+                            v-if="smallThumbnail"
-                            class="favorites-search-card__avatar"
+                            :src="smallThumbnail"
-                            :class="{ 'is-empty': !localFavFakeRef.thumbnailImageUrl }">
+                            loading="lazy"
-                            <img v-if="localFavFakeRef.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
+                            decoding="async"
-                        </div>
+                            fetchpriority="low"
-                        <div class="favorites-search-card__detail">
+                            class="object-cover" />
-                            <div class="flex items-center gap-2">
+                        <Avatar v-else>
-                                <span class="name text-sm">{{ localFavFakeRef.name }}</span>
+                            <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
-                                <span class="inline-flex items-center gap-1 text-sm">
+                        </Avatar>
-                                    <TooltipWrapper
+                    </ItemMedia>
-                                        v-if="favorite.deleted"
+                    <ItemContent class="min-w-0">
-                                        side="top"
+                        <ItemTitle class="truncate max-w-full">
-                                        :content="t('view.favorite.unavailable_tooltip')">
+                            {{ localFavFakeRef.name }}
-                                        <AlertTriangle class="h-4 w-4" />
+                            <AlertTriangle
-                                    </TooltipWrapper>
+                                v-if="showUnavailable"
-                                    <TooltipWrapper
+                                :title="t('view.favorite.unavailable_tooltip')"
-                                        v-if="!isLocalFavorite && favorite.ref?.releaseStatus === 'private'"
+                                class="h-4 w-4" />
-                                        side="top"
+                            <Lock v-if="isPrivateAvatar" :title="t('view.favorite.private')" class="h-4 w-4" />
-                                        :content="t('view.favorite.private')">
+                        </ItemTitle>
-                                        <Lock class="h-4 w-4" />
+                        <ItemDescription class="truncate line-clamp-1 text-xs">
-                                    </TooltipWrapper>
+                            {{ localFavFakeRef.authorName }}
-                                </span>
+                        </ItemDescription>
-                            </div>
+                    </ItemContent>
-                            <span class="text-xs text-muted-foreground">{{ localFavFakeRef.authorName }}</span>
+                    <ItemActions v-if="editMode && !isLocalFavorite" @click.stop>
-                        </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">
+                    <ItemActions v-else-if="!editMode">
-                                <div class="flex justify-end w-full flex-1" @click.stop>
+                        <DropdownMenu>
-                                    <FavoritesMoveDropdown
+                            <DropdownMenuTrigger as-child>
-                                        :favoriteGroup="favoriteAvatarGroups"
+                                <Button size="icon-sm" variant="ghost" class="rounded-full" @click.stop>
-                                        :currentFavorite="props.favorite"
+                                    <MoreHorizontal class="h-4 w-4" />
-                                        :currentGroup="group"
-                                        class="w-full"
-                                        :is-local-favorite="isLocalFavorite"
-                                        type="avatar" />
-                                </div>
-                                <div class="flex justify-end w-full">
-                                    <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>
+                            </DropdownMenuTrigger>
-                                </div>
+                            <DropdownMenuContent align="end">
-                            </div>
+                                <DropdownMenuItem @click="handleViewDetails">
-                        </template>
+                                    {{ t('common.actions.view_details') }}
-                        <template v-else>
+                                </DropdownMenuItem>
-                            <div class="flex gap-(--favorites-card-action-group-gap,8px) w-full">
+                                <DropdownMenuItem
-                                <div class="flex justify-end w-full" v-if="canSelectAvatar">
+                                    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="selectAvatarWithConfirmation(favorite.id)">
-                                            @click.stop="selectAvatarWithConfirmation(favorite.id)"
+                                    {{ t('view.favorite.select_avatar_tooltip') }}
-                                            ><Check class="h-4 w-4"
+                                </DropdownMenuItem>
-                                        /></Button>
+                                <DropdownMenuSeparator v-if="canSelectAvatar" />
-                                    </TooltipWrapper>
+                                <DropdownMenuItem @click="showFavoriteDialog('avatar', favorite.id)">
-                                </div>
+                                    {{ t('view.favorite.edit_favorite_tooltip') }}
-                                <div class="flex justify-end w-full">
+                                </DropdownMenuItem>
-                                    <TooltipWrapper
+                                <DropdownMenuItem variant="destructive" @click="handleDeleteFavorite">
-                                        v-if="showDangerUnfavorite"
+                                    {{ deleteMenuLabel }}
-                                        side="bottom"
+                                </DropdownMenuItem>
-                                        :content="t('view.favorite.unfavorite_tooltip')">
+                            </DropdownMenuContent>
-                                        <Button
+                        </DropdownMenu>
-                                            size="icon-sm"
+                    </ItemActions>
-                                            variant="destructive"
+                </Item>
-                                            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__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="flex justify-end w-full">
-                            <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 @click="handleViewDetails">{{ t('common.actions.view_details') }}</ContextMenuItem>
                 <ContextMenuItem
+                    v-if="canSelectAvatar"
                     :disabled="currentUser.currentAvatar === favorite.id"
                     @click="selectAvatarWithConfirmation(favorite.id)">
                     {{ t('view.favorite.select_avatar_tooltip') }}
                 </ContextMenuItem>
+                <ContextMenuSeparator v-if="canSelectAvatar" />
+                <ContextMenuItem @click="showFavoriteDialog('avatar', 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" />
+            <ItemContent class="min-w-0">
+                <ItemTitle class="truncate max-w-full">{{ favorite.name || favorite.id }}</ItemTitle>
+            </ItemContent>
+            <ItemActions>
+                <Button class="rounded-full h-6 w-6" size="icon-sm" variant="ghost" @click.stop="handleDeleteFavorite">
+                    <Trash2 class="h-4 w-4" />
+                </Button>
+            </ItemActions>
+        </Item>
+    </template>
 </template>
 
 <script setup>
-    import { AlertTriangle, Check, Lock, Star, Trash2 } from 'lucide-vue-next';
+    import { AlertTriangle, Lock, MoreHorizontal, Trash2 } from 'lucide-vue-next';
-    import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
+    import { Avatar, AvatarFallback } from '@/components/ui/avatar';
     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 { Item, ItemActions, ItemContent, ItemDescription, ItemMedia, ItemTitle } from '@/components/ui/item';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { useAvatarStore, useFavoriteStore, useUiStore, useUserStore } from '../../../stores';
-    import { removeLocalAvatarFavorite } from '../../../coordinators/favoriteCoordinator';
     import { favoriteRequest } from '../../../api';
-
+    import { selectAvatarWithConfirmation, showAvatarDialog } from '../../../coordinators/avatarCoordinator';
-    import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
+    import { removeLocalAvatarFavorite } from '../../../coordinators/favoriteCoordinator';
+    import { useFavoriteStore, useUserStore } from '../../../stores';
 
     const props = defineProps({
         favorite: Object,
@@ -164,30 +129,39 @@
         editMode: { type: Boolean, default: false },
         selected: { type: Boolean, default: false }
     });
-    const emit = defineEmits(['click', 'toggle-select']);
+    const emit = defineEmits(['toggle-select']);
 
     const { t } = useI18n();
-
-    const { favoriteAvatarGroups } = storeToRefs(useFavoriteStore());
     const { showFavoriteDialog } = useFavoriteStore();
-    import { selectAvatarWithConfirmation } from '../../../coordinators/avatarCoordinator';
-    const { shiftHeld } = storeToRefs(useUiStore());
     const { currentUser } = storeToRefs(useUserStore());
 
     const isSelected = computed({
         get: () => props.selected,
         set: (value) => emit('toggle-select', value)
     });
+
     const localFavFakeRef = computed(() => (props.isLocalFavorite ? props.favorite : props.favorite?.ref));
 
-    const cardClasses = computed(() => [
+    const displayName = computed(() => localFavFakeRef.value?.name || props.favorite?.name || props.favorite?.id);
-        'favorites-search-card',
+
-        'favorites-search-card--avatar',
+    const avatarFallback = computed(() => displayName.value?.charAt(0)?.toUpperCase() || '?');
-        {
+
-            'is-selected': props.selected,
+    const showUnavailable = computed(() => !props.isLocalFavorite && props.favorite?.deleted);
-            'is-edit-mode': props.editMode
+
-        }
+    const isPrivateAvatar = computed(() => !props.isLocalFavorite && props.favorite?.ref?.releaseStatus === 'private');
-    ]);
+
+    const deleteMenuLabel = computed(() =>
+        props.isLocalFavorite ? t('view.favorite.delete_tooltip') : t('view.favorite.unfavorite_tooltip')
+    );
+
+    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 smallThumbnail = computed(() => {
         if (!localFavFakeRef.value?.thumbnailImageUrl) {
@@ -200,7 +174,7 @@
         if (typeof props.group === 'string') {
             return props.group;
         }
-        return props.group?.name;
+        return props.group?.name ?? props.group?.key;
     });
 
     const canSelectAvatar = computed(() => {
@@ -213,30 +187,15 @@
         return props.favorite?.ref?.releaseStatus !== 'private';
     });
 
-    const showDangerUnfavorite = computed(() => {
+    function handleViewDetails() {
-        return shiftHeld.value;
+        showAvatarDialog(props.favorite.id);
-    });
+    }
 
-    /**
+    function handleDeleteFavorite() {
-     *
-     */
-    function handlePrimaryDeleteAction() {
         if (props.isLocalFavorite) {
             removeLocalAvatarFavorite(props.favorite.id, favoriteGroupName.value);
             return;
         }
-        deleteFavorite(props.favorite.id);
+        favoriteRequest.deleteFavorite({ objectId: props.favorite.id });
-    }
-
-    /**
-     *
-     * @param objectId
-     */
-    function deleteFavorite(objectId) {
-        favoriteRequest.deleteFavorite({ objectId });
     }
 </script>
-
-<style>
-    @import './favorites-card.css';
-</style>

src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue

@@ -1,81 +1,94 @@
 <template>
     <ContextMenu>
         <ContextMenuTrigger as-child>
-            <div :class="cardClasses" @click="$emit('click')">
+            <Item variant="outline" class="cursor-pointer" :style="itemStyle" @click="handleViewDetails">
-                <div class="favorites-search-card__content">
+                <ItemMedia variant="image">
-                    <div class="favorites-search-card__avatar" :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
+                    <img
-                        <img v-if="favorite.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
+                        v-if="smallThumbnail"
-                    </div>
+                        :src="smallThumbnail"
-                    <div class="favorites-search-card__detail">
+                        loading="lazy"
-                        <div class="flex items-center gap-2">
+                        decoding="async"
-                            <span class="name text-sm">{{ favorite.name }}</span>
+                        fetchpriority="low"
-                        </div>
+                        class="object-cover" />
-                        <span class="text-xs">{{ favorite.authorName }}</span>
+                    <Avatar v-else>
-                    </div>
+                        <AvatarFallback>{{ avatarFallback }}</AvatarFallback>
-                </div>
+                    </Avatar>
-                <div class="favorites-search-card__actions">
+                </ItemMedia>
-                    <div class="flex gap-(--favorites-card-action-group-gap,8px) w-full">
+                <ItemContent class="min-w-0">
-                        <div class="flex justify-end w-full">
+                    <ItemTitle class="truncate max-w-full">{{ favorite.name }}</ItemTitle>
-                            <TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
+                    <ItemDescription class="truncate line-clamp-1 text-xs">
-                                <Button
+                        {{ favorite.authorName }}
-                                    size="icon-sm"
+                    </ItemDescription>
-                                    variant="ghost"
+                </ItemContent>
+                <ItemActions>
+                    <DropdownMenu>
+                        <DropdownMenuTrigger as-child>
+                            <Button size="icon-sm" variant="ghost" class="rounded-full" @click.stop>
+                                <MoreHorizontal class="h-4 w-4" />
+                            </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                            <DropdownMenuItem @click="handleViewDetails">
+                                {{ t('common.actions.view_details') }}
+                            </DropdownMenuItem>
+                            <DropdownMenuItem
                                 :disabled="currentUser.currentAvatar === favorite.id"
-                                    class="rounded-full text-xs h-6 w-6"
+                                @click="selectAvatarWithConfirmation(favorite.id)">
-                                    @click.stop="selectAvatarWithConfirmation(favorite.id)">
+                                {{ t('view.favorite.select_avatar_tooltip') }}
-                                    <Check class="h-4 w-4" />
+                            </DropdownMenuItem>
-                                    ></Button
+                            <DropdownMenuSeparator />
-                                >
+                            <DropdownMenuItem @click="showFavoriteDialog('avatar', favorite.id)">
-                            </TooltipWrapper>
+                                {{ t('view.favorite.edit_favorite_tooltip') }}
-                        </div>
+                            </DropdownMenuItem>
-                        <div class="flex justify-end w-full">
+                        </DropdownMenuContent>
-                            <TooltipWrapper side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
+                    </DropdownMenu>
-                                <Button
+                </ItemActions>
-                                    v-if="favoriteExists"
+            </Item>
-                                    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>
         </ContextMenuTrigger>
         <ContextMenuContent>
+            <ContextMenuItem @click="handleViewDetails">{{ t('common.actions.view_details') }}</ContextMenuItem>
             <ContextMenuItem
                 :disabled="currentUser.currentAvatar === favorite.id"
                 @click="selectAvatarWithConfirmation(favorite.id)">
                 {{ t('view.favorite.select_avatar_tooltip') }}
             </ContextMenuItem>
+            <ContextMenuSeparator />
+            <ContextMenuItem @click="showFavoriteDialog('avatar', favorite.id)">
+                {{ t('view.favorite.edit_favorite_tooltip') }}
+            </ContextMenuItem>
         </ContextMenuContent>
     </ContextMenu>
 </template>
 
 <script setup>
-    import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from '@/components/ui/context-menu';
+    import { MoreHorizontal } from 'lucide-vue-next';
-    import { Check, Star } from 'lucide-vue-next';
+    import { Avatar, AvatarFallback } from '@/components/ui/avatar';
     import { Button } from '@/components/ui/button';
+    import {
+        ContextMenu,
+        ContextMenuContent,
+        ContextMenuItem,
+        ContextMenuSeparator,
+        ContextMenuTrigger
+    } from '@/components/ui/context-menu';
+    import {
+        DropdownMenu,
+        DropdownMenuContent,
+        DropdownMenuItem,
+        DropdownMenuSeparator,
+        DropdownMenuTrigger
+    } from '@/components/ui/dropdown-menu';
+    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 { useAvatarStore, useFavoriteStore, useUserStore } from '../../../stores';
+    import { useFavoriteStore, useUserStore } from '../../../stores';
+    import { selectAvatarWithConfirmation, showAvatarDialog } from '../../../coordinators/avatarCoordinator';
 
     const { t } = useI18n();
 
-    const { showFavoriteDialog, getCachedFavoritesByObjectId } = useFavoriteStore();
+    const { showFavoriteDialog } = useFavoriteStore();
-    import { selectAvatarWithConfirmation } from '../../../coordinators/avatarCoordinator';
     const { currentUser } = storeToRefs(useUserStore());
 
     const props = defineProps({
@@ -85,11 +98,16 @@
         }
     });
 
-    defineEmits(['click']);
+    const avatarFallback = computed(() => props.favorite.name?.charAt(0)?.toUpperCase() || '?');
 
-    const favoriteExists = computed(() => Boolean(getCachedFavoritesByObjectId(props.favorite.id)));
+    const itemStyle = computed(() => ({
-
+        padding: 'var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 10px)',
-    const cardClasses = computed(() => ['favorites-search-card', 'favorites-search-card--avatar']);
+        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 smallThumbnail = computed(() => {
         if (!props.favorite.thumbnailImageUrl) {
@@ -97,8 +115,8 @@
         }
         return props.favorite.thumbnailImageUrl.replace('256', '128');
     });
-</script>
 
-<style>
+    function handleViewDetails() {
-    @import './favorites-card.css';
+        showAvatarDialog(props.favorite.id);
-</style>
+    }
+</script>