refactor: favorites tab

src/views/Favorites/components/FavoritesWorldLocalItem.vue

@@ -1,70 +1,82 @@
 <template>
-    <div class="fav-world-item" @click="$emit('click')">
-        <div class="x-friend-item">
-            <template v-if="favorite.name">
-                <div class="avatar" v-once>
-                    <img :src="smallThumbnail" loading="lazy" decoding="async" fetchpriority="low" />
+    <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 }" v-once>
+                    <img
+                        v-if="favorite.thumbnailImageUrl"
+                        :src="smallThumbnail"
+                        loading="lazy"
+                        decoding="async"
+                        fetchpriority="low" />
                 </div>
-                <div class="detail" v-once>
-                    <span class="name">{{ props.favorite.name }}</span>
-                    <span v-if="props.favorite.occupants" class="extra">
-                        {{ props.favorite.authorName }} ({{ props.favorite.occupants }})
+                <div class="favorites-search-card__detail" v-once>
+                    <div class="favorites-search-card__title">
+                        <span class="name">{{ props.favorite.name }}</span>
+                    </div>
+                    <span class="extra">
+                        {{ props.favorite.authorName }}
+                        <template v-if="props.favorite.occupants"> ({{ props.favorite.occupants }}) </template>
                     </span>
-                    <span v-else class="extra">{{ props.favorite.authorName }}</span>
                 </div>
-                <FavoritesMoveDropdown
-                    v-if="editFavoritesMode"
-                    :favoriteGroup="favoriteWorldGroups"
-                    :currentFavorite="props.favorite"
-                    isLocalFavorite
-                    type="world" />
-                <template v-else>
-                    <el-tooltip placement="left" :content="inviteOrLaunchText" :teleported="false">
-                        <el-button
-                            size="small"
-                            :icon="Message"
-                            style="margin-left: 5px"
-                            @click.stop="newInstanceSelfInvite(favorite.id)"
-                            circle></el-button>
-                    </el-tooltip>
-                    <el-button
-                        v-if="shiftHeld"
-                        size="small"
-                        :icon="Close"
-                        circle
-                        style="color: #f56c6c; margin-left: 5px"
-                        @click.stop="$emit('remove-local-world-favorite', favorite.id, group)"
-                        ><i class="ri-delete-bin-line"></i
-                    ></el-button>
-                    <el-button
-                        v-else
-                        size="small"
-                        circle
-                        style="margin-left: 5px"
-                        type="default"
-                        @click.stop="showFavoriteDialog('world', favorite.id)"
-                        ><i class="ri-delete-bin-line"></i
-                    ></el-button>
+            </div>
+            <div class="favorites-search-card__actions">
+                <template v-if="editMode">
+                    <div class="favorites-search-card__action-group">
+                        <div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
+                            <FavoritesMoveDropdown
+                                :favoriteGroup="favoriteWorldGroups"
+                                :currentFavorite="props.favorite"
+                                class="favorites-search-card__dropdown"
+                                isLocalFavorite
+                                type="world" />
+                        </div>
+                        <div class="favorites-search-card__action">
+                            <el-button
+                                size="small"
+                                circle
+                                class="favorites-search-card__action-btn"
+                                :type="deleteButtonType"
+                                @click.stop="handlePrimaryDeleteAction">
+                                <i class="ri-delete-bin-line"></i>
+                            </el-button>
+                        </div>
+                    </div>
                 </template>
-            </template>
-            <template v-else>
-                <div class="avatar"></div>
-                <div class="detail" v-once>
-                    <span>{{ favorite.name || favorite.id }}</span>
-                    <el-button
-                        type="text"
-                        :icon="Close"
-                        size="small"
-                        style="margin-left: 5px"
-                        @click.stop="handleDeleteFavorite"></el-button>
+                <template v-else>
+                    <div class="favorites-search-card__action">
+                        <el-tooltip placement="top" :content="inviteOrLaunchText">
+                            <el-button
+                                size="small"
+                                :icon="Message"
+                                class="favorites-search-card__action-btn"
+                                @click.stop="newInstanceSelfInvite(favorite.id)"
+                                circle />
+                        </el-tooltip>
+                    </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>
-            </template>
-        </div>
+            </div>
+            <div class="favorites-search-card__actions">
+                <div class="favorites-search-card__action">
+                    <el-button circle type="default" size="small" @click.stop="handleDeleteFavorite">
+                        <i class="ri-delete-bin-line"></i>
+                    </el-button>
+                </div>
+            </div>
+        </template>
     </div>
 </template>
 
 <script setup>
-    import { Close, Message } from '@element-plus/icons-vue';
+    import { Message } from '@element-plus/icons-vue';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -75,38 +87,50 @@
 
     const props = defineProps({
         group: [Object, String],
-        favorite: Object
+        favorite: Object,
+        editMode: { type: Boolean, default: false }
     });
 
-    const emit = defineEmits(['handle-select', 'remove-local-world-favorite', 'click']);
-    const { favoriteWorldGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
+    const emit = defineEmits(['remove-local-world-favorite', 'click']);
+    const { favoriteWorldGroups } = storeToRefs(useFavoriteStore());
     const { showFavoriteDialog } = useFavoriteStore();
     const { newInstanceSelfInvite } = useInviteStore();
     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 deleteButtonType = computed(() => (shiftHeld.value ? 'danger' : 'default'));
+
     const inviteOrLaunchText = computed(() => {
         return canOpenInstanceInGame
             ? t('dialog.world.actions.new_instance_and_open_ingame')
             : t('dialog.world.actions.new_instance_and_self_invite');
     });
 
+    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);
     }
 </script>
 
-<style scoped>
-    .fav-world-item {
-        display: inline-block;
-        width: 300px;
-        margin-right: 15px;
-        height: 53px;
-    }
-</style>
+<style scoped></style>