move editFavoritesMode to store

src/stores/favorite.js

@@ -122,6 +122,8 @@ export const useFavoriteStore = defineStore('Favorite', () => {
 
     const localAvatarFavorites = ref({});
 
+    const editFavoritesMode = ref(false);
+
     const favoriteDialog = ref({
         visible: false,
         loading: false,
@@ -1583,6 +1585,7 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         currentFavoriteTab,
         localWorldFavGroupLength,
         localAvatarFavGroupLength,
+        editFavoritesMode,
 
         initFavorites,
         applyFavorite,

src/views/Favorites/Favorites.vue

@@ -29,19 +29,13 @@
         </div>
         <el-tabs v-model="currentFavoriteTab" v-loading="isFavoriteLoading" type="card" style="height: 100%">
             <el-tab-pane name="friend" :label="t('view.favorite.friends.header')">
-                <FavoritesFriendTab
+                <FavoritesFriendTab @change-favorite-group-name="changeFavoriteGroupName" />
-                    :edit-favorites-mode="editFavoritesMode"
-                    @change-favorite-group-name="changeFavoriteGroupName" />
             </el-tab-pane>
             <el-tab-pane name="world" :label="t('view.favorite.worlds.header')" lazy>
-                <FavoritesWorldTab
+                <FavoritesWorldTab @change-favorite-group-name="changeFavoriteGroupName" />
-                    :edit-favorites-mode="editFavoritesMode"
-                    @change-favorite-group-name="changeFavoriteGroupName" />
             </el-tab-pane>
             <el-tab-pane name="avatar" :label="t('view.favorite.avatars.header')" lazy>
-                <FavoritesAvatarTab
+                <FavoritesAvatarTab @change-favorite-group-name="changeFavoriteGroupName" />
-                    :edit-favorites-mode="editFavoritesMode"
-                    @change-favorite-group-name="changeFavoriteGroupName" />
             </el-tab-pane>
         </el-tabs>
     </div>
@@ -50,7 +44,6 @@
 <script setup>
     import { ElMessage, ElMessageBox } from 'element-plus';
     import { Refresh } from '@element-plus/icons-vue';
-    import { ref } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
@@ -70,7 +63,8 @@
         avatarImportDialogInput,
         worldImportDialogInput,
         friendImportDialogInput,
-        currentFavoriteTab
+        currentFavoriteTab,
+        editFavoritesMode
     } = storeToRefs(useFavoriteStore());
     const {
         refreshFavorites,
@@ -83,8 +77,6 @@
         showAvatarImportDialog
     } = useFavoriteStore();
 
-    const editFavoritesMode = ref(false);
-
     function showBulkUnfavoriteSelectionConfirm() {
         const elementsTicked = [];
         // check favorites type

src/views/Favorites/components/FavoritesAvatarItem.vue

@@ -9,7 +9,7 @@
                     <span class="name" v-text="localFavFakeRef.name"></span>
                     <span class="extra" v-text="localFavFakeRef.authorName"></span>
                 </div>
-                <div class="editing">
+                <div v-if="editFavoritesMode">
                     <FavoritesMoveDropdown
                         :favoriteGroup="favoriteAvatarGroups"
                         :currentFavorite="props.favorite"
@@ -19,82 +19,42 @@
                         <el-checkbox v-model="isSelected"></el-checkbox>
                     </el-button>
                 </div>
-                <div class="default">
+                <template v-else-if="!isLocalFavorite">
-                    <template v-if="!isLocalFavorite">
-                        <el-tooltip
-                            v-if="favorite.deleted"
-                            placement="left"
-                            :content="t('view.favorite.unavailable_tooltip')"
-                            :teleported="false">
-                            <el-icon><Warning /></el-icon>
-                        </el-tooltip>
-                        <el-tooltip
-                            v-if="favorite.ref.releaseStatus === 'private'"
-                            placement="left"
-                            :content="t('view.favorite.private')"
-                            :teleported="false">
-                            <el-icon><Warning /></el-icon>
-                        </el-tooltip>
-                        <el-tooltip
-                            v-if="favorite.ref.releaseStatus !== 'private' && !favorite.deleted"
-                            placement="left"
-                            :content="t('view.favorite.select_avatar_tooltip')"
-                            :teleported="false">
-                            <el-button
-                                :disabled="currentUser.currentAvatar === favorite.id"
-                                size="small"
-                                :icon="Check"
-                                circle
-                                style="margin-left: 5px"
-                                @click.stop="selectAvatarWithConfirmation(favorite.id)"></el-button>
-                        </el-tooltip>
-                        <el-tooltip
-                            placement="right"
-                            :content="t('view.favorite.unfavorite_tooltip')"
-                            :teleported="false">
-                            <el-button
-                                v-if="shiftHeld"
-                                size="small"
-                                :icon="Close"
-                                circle
-                                style="color: #f56c6c; margin-left: 5px"
-                                @click.stop="deleteFavorite(favorite.id)"></el-button>
-                            <el-button
-                                v-else
-                                type="default"
-                                :icon="Star"
-                                size="small"
-                                circle
-                                style="margin-left: 5px"
-                                @click.stop="showFavoriteDialog('avatar', favorite.id)"></el-button>
-                        </el-tooltip>
-                    </template>
-                    <template v-else>
-                        <el-tooltip
-                            placement="left"
-                            :content="t('view.favorite.select_avatar_tooltip')"
-                            :teleported="false">
-                            <el-button
-                                :disabled="currentUser.currentAvatar === favorite.id"
-                                size="small"
-                                circle
-                                style="margin-left: 5px"
-                                :icon="Check"
-                                @click.stop="selectAvatarWithConfirmation(favorite.id)" />
-                        </el-tooltip>
-                    </template>
                     <el-tooltip
-                        v-if="isLocalFavorite"
+                        v-if="favorite.deleted"
-                        placement="right"
+                        placement="left"
-                        :content="t('view.favorite.unfavorite_tooltip')"
+                        :content="t('view.favorite.unavailable_tooltip')"
                         :teleported="false">
+                        <el-icon><Warning /></el-icon>
+                    </el-tooltip>
+                    <el-tooltip
+                        v-if="favorite.ref.releaseStatus === 'private'"
+                        placement="left"
+                        :content="t('view.favorite.private')"
+                        :teleported="false">
+                        <el-icon><Warning /></el-icon>
+                    </el-tooltip>
+                    <el-tooltip
+                        v-if="favorite.ref.releaseStatus !== 'private' && !favorite.deleted"
+                        placement="left"
+                        :content="t('view.favorite.select_avatar_tooltip')"
+                        :teleported="false">
+                        <el-button
+                            :disabled="currentUser.currentAvatar === favorite.id"
+                            size="small"
+                            :icon="Check"
+                            circle
+                            style="margin-left: 5px"
+                            @click.stop="selectAvatarWithConfirmation(favorite.id)"></el-button>
+                    </el-tooltip>
+                    <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
                         <el-button
                             v-if="shiftHeld"
                             size="small"
                             :icon="Close"
                             circle
                             style="color: #f56c6c; margin-left: 5px"
-                            @click.stop="removeLocalAvatarFavorite(favorite.id, favoriteGroupName)" />
+                            @click.stop="deleteFavorite(favorite.id)"></el-button>
                         <el-button
                             v-else
                             type="default"
@@ -102,9 +62,44 @@
                             size="small"
                             circle
                             style="margin-left: 5px"
-                            @click.stop="showFavoriteDialog('avatar', favorite.id)" />
+                            @click.stop="showFavoriteDialog('avatar', favorite.id)"></el-button>
                     </el-tooltip>
-                </div>
+                </template>
+                <template v-else>
+                    <el-tooltip
+                        placement="left"
+                        :content="t('view.favorite.select_avatar_tooltip')"
+                        :teleported="false">
+                        <el-button
+                            :disabled="currentUser.currentAvatar === favorite.id"
+                            size="small"
+                            circle
+                            style="margin-left: 5px"
+                            :icon="Check"
+                            @click.stop="selectAvatarWithConfirmation(favorite.id)" />
+                    </el-tooltip>
+                </template>
+                <el-tooltip
+                    v-if="isLocalFavorite"
+                    placement="right"
+                    :content="t('view.favorite.unfavorite_tooltip')"
+                    :teleported="false">
+                    <el-button
+                        v-if="shiftHeld"
+                        size="small"
+                        :icon="Close"
+                        circle
+                        style="color: #f56c6c; margin-left: 5px"
+                        @click.stop="removeLocalAvatarFavorite(favorite.id, favoriteGroupName)" />
+                    <el-button
+                        v-else
+                        type="default"
+                        :icon="Star"
+                        size="small"
+                        circle
+                        style="margin-left: 5px"
+                        @click.stop="showFavoriteDialog('avatar', favorite.id)" />
+                </el-tooltip>
             </template>
             <template v-else>
                 <div class="avatar"></div>
@@ -150,7 +145,7 @@
 
     const { t } = useI18n();
 
-    const { favoriteAvatarGroups } = storeToRefs(useFavoriteStore());
+    const { favoriteAvatarGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
     const { removeLocalAvatarFavorite, showFavoriteDialog } = useFavoriteStore();
     const { selectAvatarWithConfirmation } = useAvatarStore();
     const { shiftHeld } = storeToRefs(useUiStore());

src/views/Favorites/components/FavoritesAvatarTab.vue

@@ -82,11 +82,7 @@
                             @click.stop="clearFavoriteGroup(group)" />
                     </el-tooltip>
                 </template>
-                <div
+                <div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
-                    v-if="group.count"
-                    class="x-friend-list"
-                    :class="{ 'is-editing': editFavoritesMode }"
-                    style="margin-top: 10px">
                     <FavoritesAvatarItem
                         v-for="favorite in groupedByGroupKeyFavoriteAvatars[group.key]"
                         :key="favorite.id"
@@ -184,11 +180,7 @@
                             @click.stop="promptLocalAvatarFavoriteGroupDelete(group)"></el-button>
                     </el-tooltip>
                 </template>
-                <div
+                <div v-if="localAvatarFavorites[group].length" class="x-friend-list" :style="{ marginTop: '10px' }">
-                    v-if="localAvatarFavorites[group].length"
-                    class="x-friend-list"
-                    :class="{ 'is-editing': editFavoritesMode }"
-                    :style="{ marginTop: '10px' }">
                     <FavoritesAvatarItem
                         v-for="favorite in localAvatarFavorites[group]"
                         :key="favorite.id"
@@ -233,13 +225,6 @@
 
     import * as workerTimers from 'worker-timers';
 
-    defineProps({
-        editFavoritesMode: {
-            type: Boolean,
-            default: false
-        }
-    });
-
     const emit = defineEmits(['change-favorite-group-name', 'refresh-local-avatar-favorites']);
 
     const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
@@ -488,15 +473,3 @@
         cancelLocalAvatarRefresh();
     });
 </script>
-
-<style scoped>
-    .x-friend-list :deep(.editing) {
-        display: none;
-    }
-    .x-friend-list.is-editing :deep(.editing) {
-        display: block;
-    }
-    .x-friend-list.is-editing :deep(.default) {
-        display: none;
-    }
-</style>

src/views/Favorites/components/FavoritesFriendItem.vue

@@ -18,7 +18,7 @@
                         :link="false" />
                     <span v-else v-text="favorite.ref.statusDescription"></span>
                 </div>
-                <div class="editing">
+                <div v-if="editFavoritesMode">
                     <FavoritesMoveDropdown
                         :favoriteGroup="favoriteFriendGroups"
                         :currentGroup="group"
@@ -28,7 +28,8 @@
                         <el-checkbox v-model="favorite.$selected"></el-checkbox>
                     </el-button>
                 </div>
-                <div class="default">
+
+                <template v-else>
                     <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
                         <el-button
                             v-if="shiftHeld"
@@ -46,7 +47,7 @@
                             style="margin-left: 5px"
                             @click.stop="showFavoriteDialog('friend', favorite.id)"></el-button>
                     </el-tooltip>
-                </div>
+                </template>
             </template>
             <template v-else>
                 <div class="avatar"></div>
@@ -82,7 +83,7 @@
 
     defineEmits(['click']);
 
-    const { favoriteFriendGroups } = storeToRefs(useFavoriteStore());
+    const { favoriteFriendGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
     const { showFavoriteDialog } = useFavoriteStore();
     const { shiftHeld } = storeToRefs(useUiStore());
     const { t } = useI18n();

src/views/Favorites/components/FavoritesFriendTab.vue

@@ -46,11 +46,7 @@
                             @click.stop="clearFavoriteGroup(group)"></el-button>
                     </el-tooltip>
                 </template>
-                <div
+                <div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
-                    v-if="group.count"
-                    class="x-friend-list"
-                    :class="{ 'is-editing': editFavoritesMode }"
-                    style="margin-top: 10px">
                     <FavoritesFriendItem
                         v-for="favorite in groupedByGroupKeyFavoriteFriends[group.key]"
                         :key="favorite.id"
@@ -90,13 +86,6 @@
     import FavoritesFriendItem from './FavoritesFriendItem.vue';
     import FriendExportDialog from '../dialogs/FriendExportDialog.vue';
 
-    defineProps({
-        editFavoritesMode: {
-            type: Boolean,
-            default: false
-        }
-    });
-
     const emit = defineEmits(['change-favorite-group-name']);
 
     const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
@@ -142,15 +131,3 @@
         emit('change-favorite-group-name', group);
     }
 </script>
-
-<style scoped>
-    .x-friend-list :deep(.editing) {
-        display: none;
-    }
-    .x-friend-list.is-editing :deep(.editing) {
-        display: block;
-    }
-    .x-friend-list.is-editing :deep(.default) {
-        display: none;
-    }
-</style>

src/views/Favorites/components/FavoritesWorldItem.vue

@@ -12,7 +12,7 @@
                     </span>
                     <span v-else class="extra">{{ props.favorite.ref.authorName }}</span>
                 </div>
-                <div class="editing">
+                <div v-if="editFavoritesMode">
                     <FavoritesMoveDropdown
                         :favoriteGroup="favoriteWorldGroups"
                         :currentFavorite="props.favorite"
@@ -22,7 +22,7 @@
                         <el-checkbox v-model="isSelected"></el-checkbox>
                     </el-button>
                 </div>
-                <div class="default">
+                <template v-else>
                     <el-tooltip
                         v-if="favorite.deleted"
                         placement="left"
@@ -69,7 +69,7 @@
                             type="default"
                             @click.stop="showFavoriteDialog('world', favorite.id)"></el-button>
                     </el-tooltip>
-                </div>
+                </template>
             </template>
             <template v-else>
                 <div class="avatar"></div>
@@ -112,7 +112,7 @@
     });
 
     const emit = defineEmits(['handle-select', 'remove-local-world-favorite', 'click']);
-    const { favoriteWorldGroups } = storeToRefs(useFavoriteStore());
+    const { favoriteWorldGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
     const { showFavoriteDialog } = useFavoriteStore();
     const { newInstanceSelfInvite } = useInviteStore();
     const { shiftHeld } = storeToRefs(useUiStore());

src/views/Favorites/components/FavoritesWorldLocalItem.vue

@@ -12,14 +12,13 @@
                     </span>
                     <span v-else class="extra">{{ props.favorite.authorName }}</span>
                 </div>
-                <div class="editing">
+                <FavoritesMoveDropdown
-                    <FavoritesMoveDropdown
+                    v-if="editFavoritesMode"
-                        :favoriteGroup="favoriteWorldGroups"
+                    :favoriteGroup="favoriteWorldGroups"
-                        :currentFavorite="props.favorite"
+                    :currentFavorite="props.favorite"
-                        isLocalFavorite
+                    isLocalFavorite
-                        type="world" />
+                    type="world" />
-                </div>
+                <template v-else>
-                <div class="default">
                     <el-tooltip placement="left">
                         <template #content>
                             {{
@@ -35,24 +34,24 @@
                             @click.stop="newInstanceSelfInvite(favorite.id)"
                             circle></el-button>
                     </el-tooltip>
-                </div>
+                    <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
-                <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
+                        <el-button
-                    <el-button
+                            v-if="shiftHeld"
-                        v-if="shiftHeld"
+                            size="small"
-                        size="small"
+                            :icon="Close"
-                        :icon="Close"
+                            circle
-                        circle
+                            style="color: #f56c6c; margin-left: 5px"
-                        style="color: #f56c6c; margin-left: 5px"
+                            @click.stop="$emit('remove-local-world-favorite', favorite.id, group)"></el-button>
-                        @click.stop="$emit('remove-local-world-favorite', favorite.id, group)"></el-button>
+                        <el-button
-                    <el-button
+                            v-else
-                        v-else
+                            :icon="Star"
-                        :icon="Star"
+                            size="small"
-                        size="small"
+                            circle
-                        circle
+                            style="margin-left: 5px"
-                        style="margin-left: 5px"
+                            type="default"
-                        type="default"
+                            @click.stop="showFavoriteDialog('world', favorite.id)"></el-button>
-                        @click.stop="showFavoriteDialog('world', favorite.id)"></el-button>
+                    </el-tooltip>
-                </el-tooltip>
+                </template>
             </template>
             <template v-else>
                 <div class="avatar"></div>
@@ -86,7 +85,7 @@
     });
 
     const emit = defineEmits(['handle-select', 'remove-local-world-favorite', 'click']);
-    const { favoriteWorldGroups } = storeToRefs(useFavoriteStore());
+    const { favoriteWorldGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
     const { showFavoriteDialog } = useFavoriteStore();
     const { newInstanceSelfInvite } = useInviteStore();
     const { shiftHeld } = storeToRefs(useUiStore());

src/views/Favorites/components/FavoritesWorldTab.vue

@@ -111,11 +111,7 @@
                         </el-tooltip>
                     </div>
                 </template>
-                <div
+                <div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
-                    v-if="group.count"
-                    class="x-friend-list"
-                    :class="{ 'is-editing': editFavoritesMode }"
-                    style="margin-top: 10px">
                     <el-scrollbar height="700px" @end-reached="worldFavoritesLoadMore">
                         <FavoritesWorldItem
                             v-for="favorite in sliceWorldFavorites(group.key)"
@@ -180,11 +176,7 @@
                             @click.stop="promptLocalWorldFavoriteGroupDelete(group)" />
                     </el-tooltip>
                 </template>
-                <div
+                <div v-if="localWorldFavorites[group].length" class="x-friend-list" style="margin-top: 10px">
-                    v-if="localWorldFavorites[group].length"
-                    class="x-friend-list"
-                    :class="{ 'is-editing': editFavoritesMode }"
-                    style="margin-top: 10px">
                     <el-scrollbar height="700px" @end-reached="localWorldFavoritesLoadMore">
                         <FavoritesWorldLocalItem
                             v-for="favorite in sliceLocalWorldFavorites(group)"
@@ -229,13 +221,6 @@
 
     import * as workerTimers from 'worker-timers';
 
-    defineProps({
-        editFavoritesMode: {
-            type: Boolean,
-            default: false
-        }
-    });
-
     const emit = defineEmits([
         'change-favorite-group-name',
         'save-sort-favorites-option',
@@ -549,15 +534,3 @@
         cancelLocalWorldRefresh();
     });
 </script>
-
-<style scoped>
-    .x-friend-list :deep(.editing) {
-        display: none;
-    }
-    .x-friend-list.is-editing :deep(.editing) {
-        display: block;
-    }
-    .x-friend-list.is-editing :deep(.default) {
-        display: none;
-    }
-</style>