From bbd5fa2b21baf5c45986a95c3fcb8e33f60a37da Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Sun, 9 Nov 2025 21:59:24 +0900
Subject: [PATCH] refactor: favorites tab

---
 src/components/NavMenu.vue                    |   64 +-
 src/plugin/router.js                          |   20 +-
 src/shared/utils/base/array.js                |   14 +-
 src/stores/favorite.js                        |  203 +-
 src/stores/ui.js                              |   20 +-
 src/views/Favorites/Favorites.vue             |  221 ---
 src/views/Favorites/FavoritesAvatar.vue       | 1688 +++++++++++++++++
 src/views/Favorites/FavoritesFriend.vue       | 1040 ++++++++++
 src/views/Favorites/FavoritesWorld.vue        | 1544 +++++++++++++++
 .../components/FavoritesAvatarItem.vue        |  289 +--
 .../FavoritesAvatarLocalHistoryItem.vue       |   82 +-
 .../components/FavoritesAvatarTab.vue         |  475 -----
 .../components/FavoritesFriendItem.vue        |  165 +-
 .../components/FavoritesFriendTab.vue         |  133 --
 .../components/FavoritesWorldItem.vue         |  178 +-
 .../components/FavoritesWorldLocalItem.vue    |  160 +-
 .../components/FavoritesWorldTab.vue          |  532 ------
 17 files changed, 4987 insertions(+), 1841 deletions(-)
 delete mode 100644 src/views/Favorites/Favorites.vue
 create mode 100644 src/views/Favorites/FavoritesAvatar.vue
 create mode 100644 src/views/Favorites/FavoritesFriend.vue
 create mode 100644 src/views/Favorites/FavoritesWorld.vue
 delete mode 100644 src/views/Favorites/components/FavoritesAvatarTab.vue
 delete mode 100644 src/views/Favorites/components/FavoritesFriendTab.vue
 delete mode 100644 src/views/Favorites/components/FavoritesWorldTab.vue

diff --git a/src/components/NavMenu.vue b/src/components/NavMenu.vue
index 81a5a268..261eff68 100644
--- a/src/components/NavMenu.vue
+++ b/src/components/NavMenu.vue
@@ -47,11 +47,11 @@
                                 :key="entry.label"
                                 type="button"
                                 class="nav-menu-popover__menu-item"
-                                @click="handleSubmenuClick(entry.path, item.index)">
+                                @click="handleSubmenuClick(entry, item.index)">
                                 <span class="nav-menu-popover__menu-label"
                                     >{{ t(entry.label)
                                     }}<span
-                                        v-if="notifiedMenus.includes(entry.path.split('/').pop())"
+                                        v-if="notifiedMenus.includes(entry.routeName || entry.path.split('/').pop())"
                                         class="nav-menu-popover__menu-label-dot"></span
                                 ></span>
                             </button>
@@ -250,7 +250,25 @@
         {
             index: 'favorites',
             icon: 'ri-star-line',
-            tooltip: 'nav_tooltip.favorites'
+            tooltip: '',
+            title: 'nav_tooltip.favorites',
+            entries: [
+                {
+                    label: 'view.favorite.friends.header',
+                    path: '/favorites/friends',
+                    routeName: 'favorite-friends'
+                },
+                {
+                    label: 'view.favorite.worlds.header',
+                    path: '/favorites/worlds',
+                    routeName: 'favorite-worlds'
+                },
+                {
+                    label: 'view.favorite.avatars.header',
+                    path: '/favorites/avatars',
+                    routeName: 'favorite-avatars'
+                }
+            ]
         },
         {
             index: 'social',
@@ -258,9 +276,21 @@
             tooltip: '',
             title: 'nav_tooltip.social',
             entries: [
-                { label: 'nav_tooltip.friend_log', path: '/social/friend-log' },
-                { label: 'nav_tooltip.friend_list', path: '/social/friend-list' },
-                { label: 'nav_tooltip.moderation', path: '/social/moderation' }
+                {
+                    label: 'nav_tooltip.friend_log',
+                    path: '/social/friend-log',
+                    routeName: 'friend-log'
+                },
+                {
+                    label: 'nav_tooltip.friend_list',
+                    path: '/social/friend-list',
+                    routeName: 'friend-list'
+                },
+                {
+                    label: 'nav_tooltip.moderation',
+                    path: '/social/moderation',
+                    routeName: 'moderation'
+                }
             ]
         },
 
@@ -301,7 +331,7 @@
         storeToRefs(VRCXUpdaterStore);
     const { showVRCXUpdateDialog, updateProgressText, showChangeLogDialog } = VRCXUpdaterStore;
     const uiStore = useUiStore();
-    const { notifiedMenus } = storeToRefs(uiStore);
+    const { notifiedMenus, lastVisitedSocialRoute, lastVisitedFavoritesRoute } = storeToRefs(uiStore);
     const { directAccessPaste } = useSearchStore();
     const { sentryErrorReporting } = storeToRefs(useAdvancedSettingsStore());
     const { setSentryErrorReporting } = useAdvancedSettingsStore();
@@ -358,11 +388,16 @@
         }
     };
 
-    const handleSubmenuClick = (path, index) => {
-        if (path) {
-            router.push(path);
-            navMenuRef.value?.updateActiveIndex(index);
+    const handleSubmenuClick = (entry, index) => {
+        if (!entry) {
+            return;
         }
+        if (entry.routeName) {
+            router.push({ name: entry.routeName });
+        } else if (entry.path) {
+            router.push(entry.path);
+        }
+        navMenuRef.value?.updateActiveIndex(index);
     };
 
     const handleSubMenuBeforeEnter = () => {
@@ -372,10 +407,13 @@
     };
 
     const handleRouteChange = (index) => {
+        let targetName = index;
         if (index === 'social') {
-            index = 'friend-log';
+            targetName = lastVisitedSocialRoute.value || 'friend-log';
+        } else if (index === 'favorites') {
+            targetName = lastVisitedFavoritesRoute.value || 'favorite-friends';
         }
-        router.push({ name: index });
+        router.push({ name: targetName });
         navMenuRef.value?.updateActiveIndex(index);
     };
 
diff --git a/src/plugin/router.js b/src/plugin/router.js
index a1998cc7..b3cd13d6 100644
--- a/src/plugin/router.js
+++ b/src/plugin/router.js
@@ -1,7 +1,9 @@
 import { createRouter, createWebHashHistory } from 'vue-router';
 
 import Charts from './../views/Charts/Charts.vue';
-import Favorites from './../views/Favorites/Favorites.vue';
+import FavoritesAvatar from './../views/Favorites/FavoritesAvatar.vue';
+import FavoritesFriend from './../views/Favorites/FavoritesFriend.vue';
+import FavoritesWorld from './../views/Favorites/FavoritesWorld.vue';
 import Feed from './../views/Feed/Feed.vue';
 import FriendList from './../views/FriendList/FriendList.vue';
 import FriendLocation from './../views/FriendLocation/FriendLocation.vue';
@@ -24,7 +26,21 @@ const routes = [
     { path: '/game-log', name: 'game-log', component: GameLog },
     { path: '/player-list', name: 'player-list', component: PlayerList },
     { path: '/search', name: 'search', component: Search },
-    { path: '/favorites', name: 'favorites', component: Favorites },
+    {
+        path: '/favorites/friends',
+        name: 'favorite-friends',
+        component: FavoritesFriend
+    },
+    {
+        path: '/favorites/worlds',
+        name: 'favorite-worlds',
+        component: FavoritesWorld
+    },
+    {
+        path: '/favorites/avatars',
+        name: 'favorite-avatars',
+        component: FavoritesAvatar
+    },
     { path: '/social/friend-log', name: 'friend-log', component: FriendLog },
     { path: '/social/moderation', name: 'moderation', component: Moderation },
     { path: '/notification', name: 'notification', component: Notification },
diff --git a/src/shared/utils/base/array.js b/src/shared/utils/base/array.js
index 60c4b71f..4540c9cf 100644
--- a/src/shared/utils/base/array.js
+++ b/src/shared/utils/base/array.js
@@ -56,4 +56,16 @@ function moveArrayItem(array, fromIndex, toIndex) {
     array.splice(toIndex, 0, item);
 }
 
-export { removeFromArray, arraysMatch, moveArrayItem };
+function replaceReactiveObject(target, source) {
+    for (const key in target) {
+        if (Object.prototype.hasOwnProperty.call(target, key)) {
+            delete target[key];
+        }
+    }
+
+    for (const key in source) {
+        target[key] = source[key];
+    }
+}
+
+export { removeFromArray, arraysMatch, moveArrayItem, replaceReactiveObject };
diff --git a/src/stores/favorite.js b/src/stores/favorite.js
index 62eb72ae..046bccbb 100644
--- a/src/stores/favorite.js
+++ b/src/stores/favorite.js
@@ -3,7 +3,11 @@ import { ElMessage } from 'element-plus';
 import { defineStore } from 'pinia';
 import { useI18n } from 'vue-i18n';
 
-import { compareByName, removeFromArray } from '../shared/utils';
+import {
+    compareByName,
+    removeFromArray,
+    replaceReactiveObject
+} from '../shared/utils';
 import { database } from '../service/database';
 import { favoriteRequest } from '../api';
 import { processBulk } from '../service/request';
@@ -34,8 +38,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
 
     const cachedFavorites = reactive(new Map());
 
-    const currentFavoriteTab = ref('friend');
-
     const cachedFavoriteGroups = ref({});
 
     const isFavoriteGroupLoading = ref(false);
@@ -72,11 +74,13 @@ export const useFavoriteStore = defineStore('Favorite', () => {
 
     const friendImportDialogVisible = ref(false);
 
-    const localWorldFavorites = ref({});
+    const localWorldFavorites = reactive({});
 
-    const localAvatarFavorites = ref({});
+    const localAvatarFavorites = reactive({});
 
-    const editFavoritesMode = ref(false);
+    const selectedFavoriteFriends = ref([]);
+    const selectedFavoriteWorlds = ref([]);
+    const selectedFavoriteAvatars = ref([]);
 
     const favoriteDialog = ref({
         visible: false,
@@ -113,22 +117,46 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         return sorted;
     });
 
+    watch(
+        favoriteFriends,
+        (list) => {
+            syncFavoriteSelection(list, selectedFavoriteFriends);
+        },
+        { immediate: true }
+    );
+
+    watch(
+        favoriteWorlds,
+        (list) => {
+            syncFavoriteSelection(list, selectedFavoriteWorlds);
+        },
+        { immediate: true }
+    );
+
+    watch(
+        favoriteAvatars,
+        (list) => {
+            syncFavoriteSelection(list, selectedFavoriteAvatars);
+        },
+        { immediate: true }
+    );
+
     const localAvatarFavoriteGroups = computed(() =>
-        Object.keys(localAvatarFavorites.value).sort()
+        Object.keys(localAvatarFavorites).sort()
     );
 
     const localWorldFavoriteGroups = computed(() =>
-        Object.keys(localWorldFavorites.value).sort()
+        Object.keys(localWorldFavorites).sort()
     );
 
     const localWorldFavoritesList = computed(() =>
-        Object.values(localWorldFavorites.value)
+        Object.values(localWorldFavorites)
             .flat()
             .map((fav) => fav.id)
     );
 
     const localAvatarFavoritesList = computed(() =>
-        Object.values(localAvatarFavorites.value)
+        Object.values(localAvatarFavorites)
             .flat()
             .map((fav) => fav.id)
     );
@@ -147,7 +175,7 @@ export const useFavoriteStore = defineStore('Favorite', () => {
     });
 
     const localWorldFavGroupLength = computed(() => (group) => {
-        const favoriteGroup = localWorldFavorites.value[group];
+        const favoriteGroup = localWorldFavorites[group];
         if (!favoriteGroup) {
             return 0;
         }
@@ -155,13 +183,27 @@ export const useFavoriteStore = defineStore('Favorite', () => {
     });
 
     const localAvatarFavGroupLength = computed(() => (group) => {
-        const favoriteGroup = localAvatarFavorites.value[group];
+        const favoriteGroup = localAvatarFavorites[group];
         if (!favoriteGroup) {
             return 0;
         }
         return favoriteGroup.length;
     });
 
+    function syncFavoriteSelection(list, selectionRef) {
+        if (!Array.isArray(list)) {
+            selectionRef.value = [];
+            return;
+        }
+        const availableIds = new Set(list.map((item) => item.id));
+        const filtered = selectionRef.value.filter((id) =>
+            availableIds.has(id)
+        );
+        if (filtered.length !== selectionRef.value.length) {
+            selectionRef.value = filtered;
+        }
+    }
+
     watch(
         () => watchState.isLoggedIn,
         (isLoggedIn) => {
@@ -177,7 +219,11 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             state.favoriteFriends_ = [];
             state.favoriteWorlds_ = [];
             state.favoriteAvatars_ = [];
-            localAvatarFavorites.value = {};
+            replaceReactiveObject(localWorldFavorites, {});
+            replaceReactiveObject(localAvatarFavorites, {});
+            selectedFavoriteFriends.value = [];
+            selectedFavoriteWorlds.value = [];
+            selectedFavoriteAvatars.value = [];
             favoriteDialog.value.visible = false;
             worldImportDialogVisible.value = false;
             avatarImportDialogVisible.value = false;
@@ -353,8 +399,7 @@ export const useFavoriteStore = defineStore('Favorite', () => {
                     type,
                     groupKey: favorite.$groupKey,
                     ref: null,
-                    name: '',
-                    $selected: false
+                    name: ''
                 };
                 if (type === 'friend') {
                     ref = userStore.cachedUsers.get(objectId);
@@ -807,19 +852,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         }
     }
 
-    function clearBulkFavoriteSelection() {
-        let ctx;
-        for (ctx of state.favoriteFriends_) {
-            ctx.$selected = false;
-        }
-        for (ctx of state.favoriteWorlds_) {
-            ctx.$selected = false;
-        }
-        for (ctx of state.favoriteAvatars_) {
-            ctx.$selected = false;
-        }
-    }
-
     function showWorldImportDialog() {
         worldImportDialogVisible.value = true;
     }
@@ -845,11 +877,11 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         if (typeof ref === 'undefined') {
             return;
         }
-        if (!localWorldFavorites.value[group]) {
-            localWorldFavorites.value[group] = [];
+        if (!localWorldFavorites[group]) {
+            localWorldFavorites[group] = [];
         }
 
-        localWorldFavorites.value[group].unshift(ref);
+        localWorldFavorites[group].unshift(ref);
         database.addWorldToCache(ref);
         database.addWorldToFavorites(worldId, group);
         if (
@@ -876,7 +908,7 @@ export const useFavoriteStore = defineStore('Favorite', () => {
      * @returns {boolean}
      */
     function hasLocalWorldFavorite(worldId, group) {
-        const favoriteGroup = localWorldFavorites.value[group];
+        const favoriteGroup = localWorldFavorites[group];
         if (!favoriteGroup) {
             return false;
         }
@@ -901,10 +933,10 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         if (typeof ref === 'undefined') {
             return;
         }
-        if (!localAvatarFavorites.value[group]) {
-            localAvatarFavorites.value[group] = [];
+        if (!localAvatarFavorites[group]) {
+            localAvatarFavorites[group] = [];
         }
-        localAvatarFavorites.value[group].unshift(ref);
+        localAvatarFavorites[group].unshift(ref);
         database.addAvatarToCache(ref);
         database.addAvatarToFavorites(avatarId, group);
         if (
@@ -931,7 +963,7 @@ export const useFavoriteStore = defineStore('Favorite', () => {
      * @returns {boolean}
      */
     function hasLocalAvatarFavorite(avatarId, group) {
-        const favoriteGroup = localAvatarFavorites.value[group];
+        const favoriteGroup = localAvatarFavorites[group];
         if (!favoriteGroup) {
             return false;
         }
@@ -981,25 +1013,21 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         let i;
         // remove from cache if no longer in favorites
         const avatarIdRemoveList = new Set();
-        const favoriteGroup = localAvatarFavorites.value[group];
+        const favoriteGroup = localAvatarFavorites[group];
         for (i = 0; i < favoriteGroup.length; ++i) {
             avatarIdRemoveList.add(favoriteGroup[i].id);
         }
 
-        delete localAvatarFavorites.value[group];
+        delete localAvatarFavorites[group];
         database.deleteAvatarFavoriteGroup(group);
 
         for (i = 0; i < localAvatarFavoriteGroups.value.length; ++i) {
             const groupName = localAvatarFavoriteGroups.value[i];
-            if (!localAvatarFavorites.value[groupName]) {
+            if (!localAvatarFavorites[groupName]) {
                 continue;
             }
-            for (
-                let j = 0;
-                j < localAvatarFavorites.value[groupName].length;
-                ++j
-            ) {
-                const avatarId = localAvatarFavorites.value[groupName][j].id;
+            for (let j = 0; j < localAvatarFavorites[groupName].length; ++j) {
+                const avatarId = localAvatarFavorites[groupName][j].id;
                 if (avatarIdRemoveList.has(avatarId)) {
                     avatarIdRemoveList.delete(avatarId);
                     break;
@@ -1016,19 +1044,15 @@ export const useFavoriteStore = defineStore('Favorite', () => {
                 ++i
             ) {
                 const groupName = localAvatarFavoriteGroups.value[i];
-                if (
-                    !localAvatarFavorites.value[groupName] ||
-                    group === groupName
-                ) {
+                if (!localAvatarFavorites[groupName] || group === groupName) {
                     continue loop;
                 }
                 for (
                     let j = 0;
-                    j < localAvatarFavorites.value[groupName].length;
+                    j < localAvatarFavorites[groupName].length;
                     ++j
                 ) {
-                    const avatarId =
-                        localAvatarFavorites.value[groupName][j].id;
+                    const avatarId = localAvatarFavorites[groupName][j].id;
                     if (id === avatarId) {
                         avatarInFavorites = true;
                         break loop;
@@ -1047,8 +1071,8 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         if (!appearanceSettingsStore.sortFavorites) {
             for (let i = 0; i < localAvatarFavoriteGroups.value.length; ++i) {
                 const group = localAvatarFavoriteGroups.value[i];
-                if (localAvatarFavorites.value[group]) {
-                    localAvatarFavorites.value[group].sort(compareByName);
+                if (localAvatarFavorites[group]) {
+                    localAvatarFavorites[group].sort(compareByName);
                 }
             }
         }
@@ -1069,9 +1093,9 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             });
             return;
         }
-        localAvatarFavorites.value[newName] = localAvatarFavorites.value[group];
+        localAvatarFavorites[newName] = localAvatarFavorites[group];
 
-        delete localAvatarFavorites.value[group];
+        delete localAvatarFavorites[group];
         database.renameAvatarFavoriteGroup(newName, group);
         sortLocalAvatarFavorites();
     }
@@ -1090,8 +1114,8 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             });
             return;
         }
-        if (!localAvatarFavorites.value[group]) {
-            localAvatarFavorites.value[group] = [];
+        if (!localAvatarFavorites[group]) {
+            localAvatarFavorites[group] = [];
         }
         sortLocalAvatarFavorites();
     }
@@ -1138,7 +1162,7 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             groupsArr = ['Favorites'];
         }
 
-        localAvatarFavorites.value = localFavorites;
+        replaceReactiveObject(localAvatarFavorites, localFavorites);
 
         sortLocalAvatarFavorites();
     }
@@ -1150,7 +1174,7 @@ export const useFavoriteStore = defineStore('Favorite', () => {
      */
     function removeLocalAvatarFavorite(avatarId, group) {
         let i;
-        const favoriteGroup = localAvatarFavorites.value[group];
+        const favoriteGroup = localAvatarFavorites[group];
         for (i = 0; i < favoriteGroup.length; ++i) {
             if (favoriteGroup[i].id === avatarId) {
                 favoriteGroup.splice(i, 1);
@@ -1161,15 +1185,11 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         let avatarInFavorites = false;
         for (i = 0; i < localAvatarFavoriteGroups.value.length; ++i) {
             const groupName = localAvatarFavoriteGroups.value[i];
-            if (!localAvatarFavorites.value[groupName] || group === groupName) {
+            if (!localAvatarFavorites[groupName] || group === groupName) {
                 continue;
             }
-            for (
-                let j = 0;
-                j < localAvatarFavorites.value[groupName].length;
-                ++j
-            ) {
-                const id = localAvatarFavorites.value[groupName][j].id;
+            for (let j = 0; j < localAvatarFavorites[groupName].length; ++j) {
+                const id = localAvatarFavorites[groupName][j].id;
                 if (id === avatarId) {
                     avatarInFavorites = true;
                     break;
@@ -1208,25 +1228,21 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         let i;
         // remove from cache if no longer in favorites
         const worldIdRemoveList = new Set();
-        const favoriteGroup = localWorldFavorites.value[group];
+        const favoriteGroup = localWorldFavorites[group];
         for (i = 0; i < favoriteGroup.length; ++i) {
             worldIdRemoveList.add(favoriteGroup[i].id);
         }
 
-        delete localWorldFavorites.value[group];
+        delete localWorldFavorites[group];
         database.deleteWorldFavoriteGroup(group);
 
         for (i = 0; i < localWorldFavoriteGroups.value.length; ++i) {
             const groupName = localWorldFavoriteGroups.value[i];
-            if (!localWorldFavorites.value[groupName]) {
+            if (!localWorldFavorites[groupName]) {
                 continue;
             }
-            for (
-                let j = 0;
-                j < localWorldFavorites.value[groupName].length;
-                ++j
-            ) {
-                const worldId = localWorldFavorites.value[groupName][j].id;
+            for (let j = 0; j < localWorldFavorites[groupName].length; ++j) {
+                const worldId = localWorldFavorites[groupName][j].id;
                 if (worldIdRemoveList.has(worldId)) {
                     worldIdRemoveList.delete(worldId);
                     break;
@@ -1243,8 +1259,8 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         if (!appearanceSettingsStore.sortFavorites) {
             for (let i = 0; i < localWorldFavoriteGroups.value.length; ++i) {
                 const group = localWorldFavoriteGroups.value[i];
-                if (localWorldFavorites.value[group]) {
-                    localWorldFavorites.value[group].sort(compareByName);
+                if (localWorldFavorites[group]) {
+                    localWorldFavorites[group].sort(compareByName);
                 }
             }
         }
@@ -1265,9 +1281,9 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             });
             return;
         }
-        localWorldFavorites.value[newName] = localWorldFavorites.value[group];
+        localWorldFavorites[newName] = localWorldFavorites[group];
 
-        delete localWorldFavorites.value[group];
+        delete localWorldFavorites[group];
         database.renameWorldFavoriteGroup(newName, group);
         sortLocalWorldFavorites();
     }
@@ -1279,7 +1295,7 @@ export const useFavoriteStore = defineStore('Favorite', () => {
      */
     function removeLocalWorldFavorite(worldId, group) {
         let i;
-        const favoriteGroup = localWorldFavorites.value[group];
+        const favoriteGroup = localWorldFavorites[group];
         for (i = 0; i < favoriteGroup.length; ++i) {
             if (favoriteGroup[i].id === worldId) {
                 favoriteGroup.splice(i, 1);
@@ -1290,15 +1306,11 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         let worldInFavorites = false;
         for (i = 0; i < localWorldFavoriteGroups.value.length; ++i) {
             const groupName = localWorldFavoriteGroups.value[i];
-            if (!localWorldFavorites.value[groupName] || group === groupName) {
+            if (!localWorldFavorites[groupName] || group === groupName) {
                 continue;
             }
-            for (
-                let j = 0;
-                j < localWorldFavorites.value[groupName].length;
-                ++j
-            ) {
-                const id = localWorldFavorites.value[groupName][j].id;
+            for (let j = 0; j < localWorldFavorites[groupName].length; ++j) {
+                const id = localWorldFavorites[groupName][j].id;
                 if (id === worldId) {
                     worldInFavorites = true;
                     break;
@@ -1369,7 +1381,7 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             groupsArr = ['Favorites'];
         }
 
-        localWorldFavorites.value = localFavorites;
+        replaceReactiveObject(localWorldFavorites, localFavorites);
 
         sortLocalWorldFavorites();
     }
@@ -1388,11 +1400,8 @@ export const useFavoriteStore = defineStore('Favorite', () => {
             });
             return;
         }
-        if (!localWorldFavorites.value[group]) {
-            localWorldFavorites.value[group] = [];
-        }
-        if (!localWorldFavoriteGroups.value.includes(group)) {
-            localWorldFavoriteGroups.value.push(group);
+        if (!localWorldFavorites[group]) {
+            localWorldFavorites[group] = [];
         }
         sortLocalWorldFavorites();
     }
@@ -1466,10 +1475,11 @@ export const useFavoriteStore = defineStore('Favorite', () => {
 
         localWorldFavoriteGroups,
         groupedByGroupKeyFavoriteFriends,
-        currentFavoriteTab,
+        selectedFavoriteFriends,
+        selectedFavoriteWorlds,
+        selectedFavoriteAvatars,
         localWorldFavGroupLength,
         localAvatarFavGroupLength,
-        editFavoritesMode,
 
         initFavorites,
         applyFavorite,
@@ -1477,7 +1487,6 @@ export const useFavoriteStore = defineStore('Favorite', () => {
         refreshFavorites,
         applyFavoriteGroup,
         refreshFavoriteAvatars,
-        clearBulkFavoriteSelection,
         showWorldImportDialog,
         showAvatarImportDialog,
         showFriendImportDialog,
diff --git a/src/stores/ui.js b/src/stores/ui.js
index aa47d036..5b8ded08 100644
--- a/src/stores/ui.js
+++ b/src/stores/ui.js
@@ -24,6 +24,14 @@ export const useUiStore = defineStore('Ui', () => {
     const notifiedMenus = ref([]);
     const shiftHeld = ref(false);
     const trayIconNotify = ref(false);
+    const socialRouteNames = ['friend-log', 'friend-list', 'moderation'];
+    const favoriteRouteNames = [
+        'favorite-friends',
+        'favorite-worlds',
+        'favorite-avatars'
+    ];
+    const lastVisitedSocialRoute = ref(socialRouteNames[0]);
+    const lastVisitedFavoritesRoute = ref(favoriteRouteNames[0]);
 
     watch(
         () => watchState.isLoggedIn,
@@ -50,10 +58,16 @@ export const useUiStore = defineStore('Ui', () => {
         () => router.currentRoute.value.name,
         (routeName) => {
             if (routeName) {
-                removeNotify(routeName);
-                if (routeName === 'notification') {
+                const name = String(routeName);
+                removeNotify(name);
+                if (name === 'notification') {
                     notificationStore.unseenNotifications = [];
                 }
+                if (socialRouteNames.includes(name)) {
+                    lastVisitedSocialRoute.value = name;
+                } else if (favoriteRouteNames.includes(name)) {
+                    lastVisitedFavoritesRoute.value = name;
+                }
             }
         }
     );
@@ -82,6 +96,8 @@ export const useUiStore = defineStore('Ui', () => {
     return {
         notifiedMenus,
         shiftHeld,
+        lastVisitedSocialRoute,
+        lastVisitedFavoritesRoute,
 
         notifyMenu,
         removeNotify
diff --git a/src/views/Favorites/Favorites.vue b/src/views/Favorites/Favorites.vue
deleted file mode 100644
index e6d8f2c2..00000000
--- a/src/views/Favorites/Favorites.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<template>
-    <div class="x-container">
-        <div class="header">
-            <div v-if="editFavoritesMode" style="display: inline-block; margin-right: 10px">
-                <el-button size="small" @click="clearBulkFavoriteSelection">{{ t('view.favorite.clear') }}</el-button>
-                <el-button size="small" @click="handleBulkCopyFavoriteSelection">{{
-                    t('view.favorite.copy')
-                }}</el-button>
-                <el-button size="small" @click="showBulkUnfavoriteSelectionConfirm">{{
-                    t('view.favorite.bulk_unfavorite')
-                }}</el-button>
-            </div>
-            <div style="display: flex; align-items: center; margin-right: 10px">
-                <span class="name">{{ t('view.favorite.edit_mode') }}</span>
-                <el-switch v-model="editFavoritesMode" style="margin-left: 5px"></el-switch>
-            </div>
-            <el-tooltip placement="bottom" :content="t('view.favorite.refresh_favorites_tooltip')" :teleported="false">
-                <el-button
-                    type="default"
-                    :loading="isFavoriteLoading"
-                    size="small"
-                    :icon="Refresh"
-                    circle
-                    @click="
-                        refreshFavorites();
-                        getLocalWorldFavorites();
-                    "></el-button>
-            </el-tooltip>
-        </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 @change-favorite-group-name="changeFavoriteGroupName" />
-            </el-tab-pane>
-            <el-tab-pane name="world" :label="t('view.favorite.worlds.header')" lazy>
-                <FavoritesWorldTab @change-favorite-group-name="changeFavoriteGroupName" />
-            </el-tab-pane>
-            <el-tab-pane name="avatar" :label="t('view.favorite.avatars.header')" lazy>
-                <FavoritesAvatarTab @change-favorite-group-name="changeFavoriteGroupName" />
-            </el-tab-pane>
-        </el-tabs>
-    </div>
-</template>
-
-<script setup>
-    import { ElMessage, ElMessageBox } from 'element-plus';
-    import { Refresh } from '@element-plus/icons-vue';
-    import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n';
-
-    import { favoriteRequest } from '../../api';
-    import { useFavoriteStore } from '../../stores';
-
-    import FavoritesAvatarTab from './components/FavoritesAvatarTab.vue';
-    import FavoritesFriendTab from './components/FavoritesFriendTab.vue';
-    import FavoritesWorldTab from './components/FavoritesWorldTab.vue';
-
-    const { t } = useI18n();
-    const {
-        favoriteFriends,
-        favoriteWorlds,
-        favoriteAvatars,
-        isFavoriteLoading,
-        avatarImportDialogInput,
-        worldImportDialogInput,
-        friendImportDialogInput,
-        currentFavoriteTab,
-        editFavoritesMode
-    } = storeToRefs(useFavoriteStore());
-    const {
-        refreshFavorites,
-        refreshFavoriteGroups,
-        clearBulkFavoriteSelection,
-        getLocalWorldFavorites,
-        handleFavoriteGroup,
-        showFriendImportDialog,
-        showWorldImportDialog,
-        showAvatarImportDialog
-    } = useFavoriteStore();
-
-    function showBulkUnfavoriteSelectionConfirm() {
-        const elementsTicked = [];
-        // check favorites type
-        for (const ctx of favoriteFriends.value) {
-            if (ctx.$selected) {
-                elementsTicked.push(ctx.id);
-            }
-        }
-        for (const ctx of favoriteWorlds.value) {
-            if (ctx.$selected) {
-                elementsTicked.push(ctx.id);
-            }
-        }
-        for (const ctx of favoriteAvatars.value) {
-            if (ctx.$selected) {
-                elementsTicked.push(ctx.id);
-            }
-        }
-        if (elementsTicked.length === 0) {
-            return;
-        }
-        ElMessageBox.confirm(
-            `Are you sure you want to unfavorite ${elementsTicked.length} favorites?
-            This action cannot be undone.`,
-            `Delete ${elementsTicked.length} favorites?`,
-            {
-                confirmButtonText: 'Confirm',
-                cancelButtonText: 'Cancel',
-                type: 'info'
-            }
-        )
-            .then((action) => {
-                if (action === 'confirm') {
-                    bulkUnfavoriteSelection(elementsTicked);
-                }
-            })
-            .catch(() => {});
-    }
-
-    function bulkUnfavoriteSelection(elementsTicked) {
-        for (const id of elementsTicked) {
-            favoriteRequest.deleteFavorite({
-                objectId: id
-            });
-        }
-        editFavoritesMode.value = false;
-    }
-
-    function changeFavoriteGroupName(ctx) {
-        ElMessageBox.prompt(
-            t('prompt.change_favorite_group_name.description'),
-            t('prompt.change_favorite_group_name.header'),
-            {
-                distinguishCancelAndClose: true,
-                cancelButtonText: t('prompt.change_favorite_group_name.cancel'),
-                confirmButtonText: t('prompt.change_favorite_group_name.change'),
-                inputPlaceholder: t('prompt.change_favorite_group_name.input_placeholder'),
-                inputValue: ctx.displayName,
-                inputPattern: /\S+/,
-                inputErrorMessage: t('prompt.change_favorite_group_name.input_error')
-            }
-        )
-            .then(({ value }) => {
-                favoriteRequest
-                    .saveFavoriteGroup({
-                        type: ctx.type,
-                        group: ctx.name,
-                        displayName: value
-                    })
-                    .then((args) => {
-                        handleFavoriteGroup({
-                            json: args.json,
-                            params: {
-                                favoriteGroupId: args.json.id
-                            }
-                        });
-                        ElMessage({
-                            message: t('prompt.change_favorite_group_name.message.success'),
-                            type: 'success'
-                        });
-                        // load new group name
-                        refreshFavoriteGroups();
-                    });
-            })
-            .catch(() => {});
-    }
-
-    function handleBulkCopyFavoriteSelection() {
-        let idList = '';
-        switch (currentFavoriteTab.value) {
-            case 'friend':
-                for (const ctx of favoriteFriends.value) {
-                    if (ctx.$selected) {
-                        idList += `${ctx.id}\n`;
-                    }
-                }
-                friendImportDialogInput.value = idList;
-                showFriendImportDialog();
-
-                break;
-
-            case 'world':
-                for (const ctx of favoriteWorlds.value) {
-                    if (ctx.$selected) {
-                        idList += `${ctx.id}\n`;
-                    }
-                }
-                worldImportDialogInput.value = idList;
-                showWorldImportDialog();
-
-                break;
-
-            case 'avatar':
-                for (const ctx of favoriteAvatars.value) {
-                    if (ctx.$selected) {
-                        idList += `${ctx.id}\n`;
-                    }
-                }
-                avatarImportDialogInput.value = idList;
-                showAvatarImportDialog();
-
-                break;
-
-            default:
-                break;
-        }
-
-        console.log('Favorite selection\n', idList);
-    }
-</script>
-
-<style scoped>
-    .header {
-        font-size: 13px;
-        position: absolute;
-        display: flex;
-        align-items: center;
-        right: 0;
-        z-index: 1;
-        margin-right: 15px;
-    }
-</style>
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
new file mode 100644
index 00000000..30485d1a
--- /dev/null
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -0,0 +1,1688 @@
+<template>
+    <div class="favorites-page x-container" v-loading="isFavoriteLoading">
+        <div class="favorites-toolbar">
+            <div>
+                <el-select v-model="sortFav" class="favorites-toolbar__select">
+                    <template #prefix>
+                        <i class="ri-sort-asc"></i>
+                    </template>
+                    <el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_name')" :value="false" />
+                    <el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_date')" :value="true" />
+                </el-select>
+            </div>
+            <div class="favorites-toolbar__right">
+                <el-input
+                    v-model="avatarFavoriteSearch"
+                    clearable
+                    class="favorites-toolbar__search"
+                    :placeholder="t('view.favorite.avatars.search')"
+                    @input="searchAvatarFavorites" />
+                <el-dropdown trigger="click" :hide-on-click="true">
+                    <el-button :icon="MoreFilled" size="small" circle />
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item @click="showAvatarImportDialog">
+                                {{ t('view.favorite.import') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item divided @click="showAvatarExportDialog">
+                                {{ t('view.favorite.export') }}
+                            </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </div>
+        </div>
+        <el-splitter class="favorites-splitter">
+            <el-splitter-panel :size="260" :min="0" :max="360" collapsible>
+                <div class="favorites-groups-panel">
+                    <div class="group-section">
+                        <div class="group-section__header">
+                            <span>{{ t('view.favorite.avatars.vrchat_favorites') }}</span>
+                            <el-tooltip placement="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
+                                <el-button
+                                    :loading="isFavoriteLoading"
+                                    size="small"
+                                    :icon="Refresh"
+                                    circle
+                                    @click.stop="handleRefreshFavorites" />
+                            </el-tooltip>
+                        </div>
+                        <div class="group-section__list">
+                            <template v-if="favoriteAvatarGroups.length">
+                                <div
+                                    v-for="group in favoriteAvatarGroups"
+                                    :key="group.key"
+                                    :class="[
+                                        'group-item',
+                                        { 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
+                                    ]"
+                                    @click="handleGroupClick('remote', group.key)">
+                                    <div class="group-item__top">
+                                        <span class="group-item__name">{{ group.displayName }}</span>
+                                        <span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
+                                    </div>
+                                    <div class="group-item__bottom">
+                                        <el-tag
+                                            size="small"
+                                            effect="plain"
+                                            :type="userFavoriteAvatarsStatusForFavTab(group.visibility)">
+                                            {{ formatVisibility(group.visibility) }}
+                                        </el-tag>
+                                        <el-popover
+                                            :visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
+                                            @update:visible="
+                                                handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
+                                            "
+                                            placement="right"
+                                            trigger="click"
+                                            :hide-after="0"
+                                            :width="220"
+                                            popper-style="padding: 4px; border-radius: 8px;">
+                                            <template #reference>
+                                                <el-button
+                                                    text
+                                                    size="small"
+                                                    :icon="MoreFilled"
+                                                    circle
+                                                    @click.stop></el-button>
+                                            </template>
+                                            <div class="favorites-group-menu">
+                                                <button
+                                                    type="button"
+                                                    class="favorites-group-menu__item"
+                                                    @click="handleRemoteRename(group)">
+                                                    <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                </button>
+                                                <el-popover
+                                                    popper-class="favorites-group-menu__popover"
+                                                    placement="right"
+                                                    trigger="hover"
+                                                    :width="180"
+                                                    popper-style="padding: 4px; border-radius: 8px;">
+                                                    <div class="group-visibility-menu">
+                                                        <button
+                                                            v-for="visibility in avatarGroupVisibilityOptions"
+                                                            :key="visibility"
+                                                            type="button"
+                                                            :class="[
+                                                                'group-visibility-menu__item',
+                                                                { 'is-active': group.visibility === visibility }
+                                                            ]"
+                                                            @click="handleVisibilitySelection(group, visibility)">
+                                                            <span>{{ formatVisibility(visibility) }}</span>
+                                                            <span
+                                                                v-if="group.visibility === visibility"
+                                                                class="group-visibility-menu__check">
+                                                                <i class="ri-check-line"></i>
+                                                            </span>
+                                                        </button>
+                                                    </div>
+                                                    <template #reference>
+                                                        <button
+                                                            type="button"
+                                                            class="favorites-group-menu__item favorites-group-menu__item--submenu">
+                                                            <span>{{ t('view.favorite.visibility_tooltip') }}</span>
+                                                            <span class="favorites-group-menu__arrow">›</span>
+                                                        </button>
+                                                    </template>
+                                                </el-popover>
+                                                <button
+                                                    type="button"
+                                                    class="favorites-group-menu__item favorites-group-menu__item--danger"
+                                                    @click="handleRemoteClear(group)">
+                                                    <span>{{ t('view.favorite.clear') }}</span>
+                                                </button>
+                                            </div>
+                                        </el-popover>
+                                    </div>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <div
+                                    v-for="group in avatarGroupPlaceholders"
+                                    :key="group.key"
+                                    :class="[
+                                        'group-item',
+                                        'group-item--placeholder',
+                                        { 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
+                                    ]">
+                                    <div class="group-item__top">
+                                        <span class="group-item__name">{{ group.displayName }}</span>
+                                        <span class="group-item__count">--/--</span>
+                                    </div>
+                                    <div class="group-item__bottom">
+                                        <div class="group-item__placeholder-tag"></div>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                    <div class="group-section">
+                        <div class="group-section__header">
+                            <span>{{ t('view.favorite.avatars.local_favorites') }}</span>
+                            <template v-if="!refreshingLocalFavorites">
+                                <el-button
+                                    size="small"
+                                    :icon="Refresh"
+                                    circle
+                                    @click.stop="refreshLocalAvatarFavorites" />
+                            </template>
+                            <el-button v-else size="small" type="text" @click.stop="cancelLocalAvatarRefresh">
+                                <el-icon class="is-loading"><Loading /></el-icon>
+                                {{ t('view.favorite.avatars.cancel_refresh') }}
+                            </el-button>
+                        </div>
+                        <div class="group-section__list">
+                            <template v-if="localAvatarFavoriteGroups.length">
+                                <div
+                                    v-for="group in localAvatarFavoriteGroups"
+                                    :key="group"
+                                    :class="[
+                                        'group-item',
+                                        { 'is-active': !hasSearchInput && isGroupActive('local', group) }
+                                    ]"
+                                    @click="handleGroupClick('local', group)">
+                                    <div class="group-item__top">
+                                        <span class="group-item__name">{{ group }}</span>
+                                        <div class="group-item__right">
+                                            <span class="group-item__count">{{
+                                                localAvatarFavGroupLength(group)
+                                            }}</span>
+                                            <el-popover
+                                                :visible="activeGroupMenu === localGroupMenuKey(group)"
+                                                @update:visible="
+                                                    handleGroupMenuVisible(localGroupMenuKey(group), $event)
+                                                "
+                                                placement="right"
+                                                trigger="click"
+                                                :hide-after="0"
+                                                :width="200"
+                                                popper-style="padding: 4px; border-radius: 8px;">
+                                                <template #reference>
+                                                    <el-button
+                                                        text
+                                                        size="small"
+                                                        :icon="MoreFilled"
+                                                        circle
+                                                        @click.stop></el-button>
+                                                </template>
+                                                <div class="favorites-group-menu">
+                                                    <button
+                                                        type="button"
+                                                        class="favorites-group-menu__item"
+                                                        @click="handleLocalRename(group)">
+                                                        <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                    </button>
+                                                    <button
+                                                        type="button"
+                                                        class="favorites-group-menu__item favorites-group-menu__item--danger"
+                                                        @click="handleLocalDelete(group)">
+                                                        <span>{{ t('view.favorite.delete_tooltip') }}</span>
+                                                    </button>
+                                                </div>
+                                            </el-popover>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                            <div v-else class="group-empty">No Data</div>
+                            <el-tooltip
+                                v-if="!isCreatingLocalGroup"
+                                :disabled="isLocalUserVrcPlusSupporter"
+                                :content="t('view.favorite.avatars.local_avatar_favorites')">
+                                <div
+                                    :class="[
+                                        'group-item',
+                                        'group-item--new',
+                                        { 'is-disabled': !isLocalUserVrcPlusSupporter }
+                                    ]"
+                                    @click="startLocalGroupCreation">
+                                    <el-icon><Plus /></el-icon>
+                                    <span>{{ t('view.favorite.avatars.new_group') }}</span>
+                                </div>
+                            </el-tooltip>
+                            <el-input
+                                v-else
+                                ref="newLocalGroupInput"
+                                v-model="newLocalGroupName"
+                                size="small"
+                                class="group-item__input"
+                                :placeholder="t('view.favorite.avatars.new_group')"
+                                @keyup.enter="handleLocalGroupCreationConfirm"
+                                @keyup.esc="cancelLocalGroupCreation"
+                                @blur="cancelLocalGroupCreation" />
+                        </div>
+                    </div>
+                    <div class="group-section">
+                        <div class="group-section__header">
+                            <span>Local History</span>
+                            <el-popover
+                                :visible="activeGroupMenu === historyGroupMenuKey"
+                                @update:visible="handleGroupMenuVisible(historyGroupMenuKey, $event)"
+                                placement="right"
+                                trigger="click"
+                                :hide-after="0"
+                                :width="180"
+                                popper-style="padding: 4px; border-radius: 8px;">
+                                <template #reference>
+                                    <el-button text size="small" :icon="MoreFilled" circle @click.stop></el-button>
+                                </template>
+                                <div class="favorites-group-menu">
+                                    <button
+                                        type="button"
+                                        class="favorites-group-menu__item favorites-group-menu__item--danger"
+                                        @click="handleHistoryClear">
+                                        <span>{{ t('view.favorite.clear_tooltip') }}</span>
+                                    </button>
+                                </div>
+                            </el-popover>
+                        </div>
+                        <div class="group-section__list">
+                            <div
+                                :class="[
+                                    'group-item',
+                                    { 'is-active': !hasSearchInput && isGroupActive('history', historyGroupKey) }
+                                ]"
+                                @click="handleGroupClick('history', historyGroupKey)">
+                                <div class="group-item__top">
+                                    <span class="group-item__name">Local History</span>
+                                    <span class="group-item__count">{{ avatarHistory.length }}/100</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </el-splitter-panel>
+            <el-splitter-panel>
+                <div class="favorites-content">
+                    <div class="favorites-content__header">
+                        <div class="favorites-content__title">
+                            <span v-if="isSearchActive">{{ t('view.favorite.avatars.search') }}</span>
+                            <template v-else-if="activeRemoteGroup">
+                                <span>
+                                    {{ activeRemoteGroup.displayName }}
+                                    <small>{{ activeRemoteGroup.count }}/{{ activeRemoteGroup.capacity }}</small>
+                                </span>
+                            </template>
+                            <template v-else-if="activeLocalGroupName">
+                                <span>
+                                    {{ activeLocalGroupName }}
+                                    <small>{{ activeLocalGroupCount }}</small>
+                                </span>
+                            </template>
+                            <template v-else-if="isHistorySelected">
+                                <span>
+                                    Local History
+                                    <small>{{ avatarHistory.length }}/100</small>
+                                </span>
+                            </template>
+                            <span v-else>No Group Selected</span>
+                        </div>
+                        <div class="favorites-content__edit">
+                            <span>{{ t('view.favorite.edit_mode') }}</span>
+                            <el-switch
+                                v-model="avatarEditMode"
+                                size="small"
+                                :disabled="isSearchActive || !activeRemoteGroup"></el-switch>
+                        </div>
+                    </div>
+                    <div class="favorites-content__edit-actions">
+                        <div
+                            v-if="avatarEditMode && !isSearchActive && activeRemoteGroup"
+                            class="favorites-content__actions">
+                            <el-button size="small" :disabled="!hasAvatarSelection" @click="clearSelectedAvatars">
+                                {{ t('view.favorite.clear') }}
+                            </el-button>
+                            <el-button size="small" :disabled="!hasAvatarSelection" @click="copySelectedAvatars">
+                                {{ t('view.favorite.copy') }}
+                            </el-button>
+                            <el-button
+                                size="small"
+                                :disabled="!hasAvatarSelection"
+                                @click="showAvatarBulkUnfavoriteSelectionConfirm">
+                                {{ t('view.favorite.bulk_unfavorite') }}
+                            </el-button>
+                        </div>
+                    </div>
+                    <div class="favorites-content__list">
+                        <template v-if="isSearchActive">
+                            <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <div v-if="avatarFavoriteSearchResults.length" class="favorites-search-grid">
+                                    <div
+                                        v-for="favorite in avatarFavoriteSearchResults"
+                                        :key="favorite.id"
+                                        class="favorites-search-card"
+                                        @click="showAvatarDialog(favorite.id)">
+                                        <div class="favorites-search-card__content">
+                                            <div
+                                                class="favorites-search-card__avatar"
+                                                :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
+                                                <img
+                                                    v-if="favorite.thumbnailImageUrl"
+                                                    :src="favorite.thumbnailImageUrl"
+                                                    loading="lazy" />
+                                            </div>
+                                            <div class="favorites-search-card__detail">
+                                                <div class="favorites-search-card__title">
+                                                    <span class="name">{{ favorite.name }}</span>
+                                                </div>
+                                                <span class="extra">{{ favorite.authorName }}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div v-else class="favorites-empty">No Data</div>
+                            </div>
+                        </template>
+                        <template v-else-if="activeRemoteGroup">
+                            <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <template v-if="currentRemoteFavorites.length">
+                                    <div class="favorites-card-list">
+                                        <FavoritesAvatarItem
+                                            v-for="favorite in currentRemoteFavorites"
+                                            :key="favorite.id"
+                                            :favorite="favorite"
+                                            :group="activeRemoteGroup"
+                                            :selected="selectedFavoriteAvatars.includes(favorite.id)"
+                                            :edit-mode="avatarEditMode"
+                                            @toggle-select="toggleAvatarSelection(favorite.id, $event)"
+                                            @click="showAvatarDialog(favorite.id)" />
+                                    </div>
+                                </template>
+                                <div v-else class="favorites-empty">No Data</div>
+                            </div>
+                        </template>
+                        <template v-else-if="!remoteAvatarGroupsResolved">
+                            <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <div class="favorites-card-list favorites-card-list--placeholder">
+                                    <div
+                                        v-for="group in avatarGroupPlaceholders"
+                                        :key="group.key"
+                                        class="favorites-card-placeholder-box"></div>
+                                </div>
+                            </div>
+                        </template>
+                        <template v-else-if="!remoteAvatarGroupsResolved">
+                            <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <div class="favorites-card-list">
+                                    <div
+                                        v-for="group in avatarGroupPlaceholders"
+                                        :key="group.key"
+                                        class="favorites-card-list__placeholder"></div>
+                                </div>
+                            </div>
+                        </template>
+                        <template v-else-if="activeLocalGroupName">
+                            <el-scrollbar
+                                ref="localAvatarScrollbarRef"
+                                class="favorites-content__scroll"
+                                @scroll="handleLocalAvatarScroll">
+                                <template v-if="currentLocalFavorites.length">
+                                    <div class="favorites-card-list">
+                                        <FavoritesAvatarItem
+                                            v-for="favorite in currentLocalFavorites"
+                                            :key="favorite.id"
+                                            :favorite="favorite"
+                                            :group="activeLocalGroupName"
+                                            is-local-favorite
+                                            :edit-mode="avatarEditMode"
+                                            @click="showAvatarDialog(favorite.id)" />
+                                    </div>
+                                </template>
+                                <div v-else class="favorites-empty">No Data</div>
+                            </el-scrollbar>
+                        </template>
+                        <template v-else-if="isHistorySelected">
+                            <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <template v-if="avatarHistory.length">
+                                    <div class="favorites-card-list">
+                                        <FavoritesAvatarLocalHistoryItem
+                                            v-for="favorite in avatarHistory"
+                                            :key="favorite.id"
+                                            :favorite="favorite"
+                                            @click="showAvatarDialog(favorite.id)" />
+                                    </div>
+                                </template>
+                                <div v-else class="favorites-empty">No Data</div>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div class="favorites-empty">No Group Selected</div>
+                        </template>
+                    </div>
+                </div>
+            </el-splitter-panel>
+        </el-splitter>
+        <AvatarExportDialog v-model:avatarExportDialogVisible="avatarExportDialogVisible" />
+    </div>
+</template>
+
+<script setup>
+    import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+    import { Loading, MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
+    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
+
+    import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../stores';
+    import { avatarRequest, favoriteRequest } from '../../api';
+
+    import AvatarExportDialog from './dialogs/AvatarExportDialog.vue';
+    import FavoritesAvatarItem from './components/FavoritesAvatarItem.vue';
+    import FavoritesAvatarLocalHistoryItem from './components/FavoritesAvatarLocalHistoryItem.vue';
+
+    import * as workerTimers from 'worker-timers';
+
+    const AVATAR_GROUP_PLACEHOLDERS = Array.from({ length: 5 }, (_, index) => ({
+        key: `avatar:avatars${index + 1}`,
+        displayName: `Group ${index + 1}`
+    }));
+
+    const LOCAL_AVATAR_PAGE_SIZE = 20;
+    const LOCAL_AVATAR_SCROLL_THRESHOLD = 120;
+    const LOCAL_AVATAR_VIEWPORT_BUFFER = 32;
+
+    const avatarGroupVisibilityOptions = ref(['public', 'friends', 'private']);
+    const historyGroupKey = 'local-history';
+
+    const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
+    const { setSortFavorites } = useAppearanceSettingsStore();
+    const favoriteStore = useFavoriteStore();
+    const {
+        favoriteAvatars,
+        favoriteAvatarGroups,
+        localAvatarFavorites,
+        selectedFavoriteAvatars,
+        avatarImportDialogInput,
+        isFavoriteLoading,
+        localAvatarFavoriteGroups
+    } = storeToRefs(favoriteStore);
+    const {
+        showAvatarImportDialog,
+        localAvatarFavGroupLength,
+        deleteLocalAvatarFavoriteGroup,
+        renameLocalAvatarFavoriteGroup,
+        newLocalAvatarFavoriteGroup,
+        localAvatarFavoritesList,
+        refreshFavorites,
+        getLocalWorldFavorites,
+        handleFavoriteGroup
+    } = favoriteStore;
+    const { avatarHistory } = storeToRefs(useAvatarStore());
+    const { promptClearAvatarHistory, showAvatarDialog, applyAvatar } = useAvatarStore();
+    const { isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
+    const { t } = useI18n();
+
+    const avatarExportDialogVisible = ref(false);
+    const avatarFavoriteSearch = ref('');
+    const avatarFavoriteSearchResults = ref([]);
+    const avatarEditMode = ref(false);
+    const selectedGroup = ref(null);
+    const activeGroupMenu = ref(null);
+    const isCreatingLocalGroup = ref(false);
+    const newLocalGroupName = ref('');
+    const newLocalGroupInput = ref(null);
+    const sliceLocalAvatarFavoritesLoadMoreNumber = ref(60);
+    const refreshingLocalFavorites = ref(false);
+    const worker = ref(null);
+    const refreshCancelToken = ref(null);
+    const localAvatarScrollbarRef = ref(null);
+    const localAvatarLoadingMore = ref(false);
+    const avatarGroupPlaceholders = AVATAR_GROUP_PLACEHOLDERS;
+    const hasUserSelectedAvatarGroup = ref(false);
+    const remoteAvatarGroupsResolved = ref(false);
+
+    const sortFav = computed({
+        get() {
+            return sortFavorites.value;
+        },
+        set() {
+            setSortFavorites();
+        }
+    });
+
+    const hasAvatarSelection = computed(() => selectedFavoriteAvatars.value.length > 0);
+    const hasSearchInput = computed(() => avatarFavoriteSearch.value.trim().length > 0);
+    const isSearchActive = computed(() => avatarFavoriteSearch.value.trim().length >= 3);
+    const isRemoteGroupSelected = computed(() => selectedGroup.value?.type === 'remote');
+    const isLocalGroupSelected = computed(() => selectedGroup.value?.type === 'local');
+    const isHistorySelected = computed(() => selectedGroup.value?.type === 'history');
+
+    const remoteGroupMenuKey = (key) => `remote:${key}`;
+    const localGroupMenuKey = (key) => `local:${key}`;
+    const historyGroupMenuKey = 'history';
+
+    const groupedAvatarFavorites = computed(() => {
+        const grouped = {};
+        favoriteAvatars.value.forEach((avatar) => {
+            if (!avatar.groupKey) {
+                return;
+            }
+            if (!grouped[avatar.groupKey]) {
+                grouped[avatar.groupKey] = [];
+            }
+            grouped[avatar.groupKey].push(avatar);
+        });
+        return grouped;
+    });
+
+    const sliceLocalAvatarFavorites = computed(() => {
+        return (group) => {
+            const favorites = localAvatarFavorites.value[group];
+            if (!favorites) {
+                return [];
+            }
+            return favorites.slice(0, sliceLocalAvatarFavoritesLoadMoreNumber.value);
+        };
+    });
+
+    const activeRemoteGroup = computed(() => {
+        if (!isRemoteGroupSelected.value) {
+            return null;
+        }
+        return favoriteAvatarGroups.value.find((group) => group.key === selectedGroup.value.key) || null;
+    });
+
+    const activeLocalGroupName = computed(() => {
+        if (!isLocalGroupSelected.value) {
+            return '';
+        }
+        return selectedGroup.value.key;
+    });
+
+    const activeLocalGroupCount = computed(() => {
+        if (!activeLocalGroupName.value) {
+            return 0;
+        }
+        const favorites = localAvatarFavorites.value[activeLocalGroupName.value];
+        return favorites ? favorites.length : 0;
+    });
+
+    const currentRemoteFavorites = computed(() => {
+        if (!activeRemoteGroup.value) {
+            return [];
+        }
+        return groupedAvatarFavorites.value[activeRemoteGroup.value.key] || [];
+    });
+
+    const currentLocalFavorites = computed(() => {
+        if (!activeLocalGroupName.value) {
+            return [];
+        }
+        return sliceLocalAvatarFavorites.value(activeLocalGroupName.value);
+    });
+
+    watch(
+        () => ({
+            remote: favoriteAvatarGroups.value.map((group) => group.key),
+            local: [...localAvatarFavoriteGroups.value],
+            history: avatarHistory.value.length
+        }),
+        () => {
+            remoteAvatarGroupsResolved.value = favoriteAvatarGroups.value.length > 0;
+            if (!hasUserSelectedAvatarGroup.value) {
+                const preferred =
+                    favoriteAvatarGroups.value.find((group) => group.count > 0) ||
+                    favoriteAvatarGroups.value[0] ||
+                    avatarGroupPlaceholders[0];
+                if (preferred) {
+                    selectGroup('remote', preferred.key);
+                }
+            }
+            ensureSelectedGroup();
+        },
+        { immediate: true }
+    );
+
+    watch(isSearchActive, (active) => {
+        if (active && avatarEditMode.value) {
+            avatarEditMode.value = false;
+        }
+        if (!active) {
+            nextTick(() => {
+                maybeFillLocalAvatarViewport();
+            });
+        }
+    });
+
+    watch(
+        () => avatarEditMode.value,
+        (value) => {
+            if (!value) {
+                clearSelectedAvatars();
+            }
+        }
+    );
+
+    watch(
+        () => ({
+            group: activeLocalGroupName.value,
+            visible: currentLocalFavorites.value.length,
+            total: activeLocalGroupCount.value,
+            slice: sliceLocalAvatarFavoritesLoadMoreNumber.value,
+            isLocal: isLocalGroupSelected.value
+        }),
+        () => {
+            nextTick(() => {
+                maybeFillLocalAvatarViewport();
+            });
+        }
+    );
+
+    onMounted(() => {
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', maybeFillLocalAvatarViewport);
+        }
+        nextTick(() => {
+            maybeFillLocalAvatarViewport();
+        });
+    });
+
+    function handleGroupMenuVisible(key, visible) {
+        if (visible) {
+            activeGroupMenu.value = key;
+            return;
+        }
+        if (activeGroupMenu.value === key) {
+            activeGroupMenu.value = null;
+        }
+    }
+
+    function ensureSelectedGroup() {
+        if (selectedGroup.value && isGroupAvailable(selectedGroup.value)) {
+            return;
+        }
+        selectDefaultGroup();
+    }
+
+    function selectDefaultGroup() {
+        if (!hasUserSelectedAvatarGroup.value) {
+            const remote =
+                favoriteAvatarGroups.value.find((group) => group.count > 0) ||
+                favoriteAvatarGroups.value[0] ||
+                avatarGroupPlaceholders[0];
+            if (remote) {
+                selectGroup('remote', remote.key);
+                return;
+            }
+        } else if (favoriteAvatarGroups.value.length) {
+            const remote = favoriteAvatarGroups.value.find((group) => group.count > 0) || favoriteAvatarGroups.value[0];
+            if (remote) {
+                selectGroup('remote', remote.key);
+                return;
+            }
+        }
+        if (localAvatarFavoriteGroups.value.length) {
+            selectGroup('local', localAvatarFavoriteGroups.value[0]);
+            return;
+        }
+        if (avatarHistory.value.length) {
+            selectGroup('history', historyGroupKey);
+            return;
+        }
+        selectedGroup.value = null;
+        clearSelectedAvatars();
+    }
+
+    function isGroupAvailable(group) {
+        if (!group) {
+            return false;
+        }
+        if (group.type === 'remote') {
+            if (!remoteAvatarGroupsResolved.value) {
+                return true;
+            }
+            return favoriteAvatarGroups.value.some((item) => item.key === group.key);
+        }
+        if (group.type === 'local') {
+            return localAvatarFavoriteGroups.value.includes(group.key);
+        }
+        if (group.type === 'history') {
+            return avatarHistory.value.length > 0;
+        }
+        return false;
+    }
+
+    function selectGroup(type, key, options = {}) {
+        if (selectedGroup.value?.type === type && selectedGroup.value?.key === key) {
+            return;
+        }
+        selectedGroup.value = { type, key };
+        if (options.userInitiated) {
+            hasUserSelectedAvatarGroup.value = true;
+        }
+        resetLoadMoreCounters();
+        clearSelectedAvatars();
+        if (type === 'local') {
+            nextTick(() => {
+                maybeFillLocalAvatarViewport();
+            });
+        }
+    }
+
+    function resetLoadMoreCounters() {
+        sliceLocalAvatarFavoritesLoadMoreNumber.value = 60;
+        localAvatarLoadingMore.value = false;
+    }
+
+    function isGroupActive(type, key) {
+        return selectedGroup.value?.type === type && selectedGroup.value?.key === key;
+    }
+
+    function handleGroupClick(type, key) {
+        if (hasSearchInput.value) {
+            avatarFavoriteSearch.value = '';
+            searchAvatarFavorites('');
+        }
+        selectGroup(type, key, { userInitiated: true });
+    }
+
+    function startLocalGroupCreation() {
+        if (!isLocalUserVrcPlusSupporter.value || isCreatingLocalGroup.value) {
+            return;
+        }
+        isCreatingLocalGroup.value = true;
+        newLocalGroupName.value = '';
+        nextTick(() => {
+            newLocalGroupInput.value?.focus?.();
+        });
+    }
+
+    function cancelLocalGroupCreation() {
+        isCreatingLocalGroup.value = false;
+        newLocalGroupName.value = '';
+    }
+
+    function handleLocalGroupCreationConfirm() {
+        const name = newLocalGroupName.value.trim();
+        if (!name) {
+            cancelLocalGroupCreation();
+            return;
+        }
+        newLocalAvatarFavoriteGroup(name);
+        cancelLocalGroupCreation();
+        nextTick(() => {
+            if (localAvatarFavoriteGroups.value.includes(name)) {
+                selectGroup('local', name, { userInitiated: true });
+            }
+        });
+    }
+
+    function handleLocalAvatarScroll() {
+        if (!isLocalGroupSelected.value || isSearchActive.value) {
+            return;
+        }
+        const wrap = localAvatarScrollbarRef.value?.wrapRef;
+        if (!wrap) {
+            return;
+        }
+        const { scrollTop, clientHeight, scrollHeight } = wrap;
+        if (scrollTop + clientHeight >= scrollHeight - LOCAL_AVATAR_SCROLL_THRESHOLD) {
+            if (loadMoreLocalAvatarFavorites()) {
+                nextTick(() => {
+                    maybeFillLocalAvatarViewport();
+                });
+            }
+        }
+    }
+
+    function loadMoreLocalAvatarFavorites() {
+        if (localAvatarLoadingMore.value) {
+            return false;
+        }
+        if (sliceLocalAvatarFavoritesLoadMoreNumber.value >= activeLocalGroupCount.value) {
+            return false;
+        }
+        localAvatarLoadingMore.value = true;
+        sliceLocalAvatarFavoritesLoadMoreNumber.value += LOCAL_AVATAR_PAGE_SIZE;
+        nextTick(() => {
+            localAvatarLoadingMore.value = false;
+        });
+        return true;
+    }
+
+    function maybeFillLocalAvatarViewport() {
+        nextTick(() => {
+            if (!isLocalGroupSelected.value || isSearchActive.value) {
+                return;
+            }
+            const wrap = localAvatarScrollbarRef.value?.wrapRef;
+            if (!wrap) {
+                return;
+            }
+            if (wrap.scrollHeight > wrap.clientHeight + LOCAL_AVATAR_VIEWPORT_BUFFER) {
+                return;
+            }
+            if (loadMoreLocalAvatarFavorites()) {
+                nextTick(() => {
+                    maybeFillLocalAvatarViewport();
+                });
+            }
+        });
+    }
+
+    function toggleAvatarSelection(id, value) {
+        if (value) {
+            if (!selectedFavoriteAvatars.value.includes(id)) {
+                selectedFavoriteAvatars.value.push(id);
+            }
+        } else {
+            selectedFavoriteAvatars.value = selectedFavoriteAvatars.value.filter((selectedId) => selectedId !== id);
+        }
+    }
+
+    function clearSelectedAvatars() {
+        selectedFavoriteAvatars.value = [];
+    }
+
+    function copySelectedAvatars() {
+        if (!selectedFavoriteAvatars.value.length) {
+            return;
+        }
+        const idList = selectedFavoriteAvatars.value.map((id) => `${id}\n`).join('');
+        avatarImportDialogInput.value = idList;
+        showAvatarImportDialog();
+    }
+
+    function showAvatarBulkUnfavoriteSelectionConfirm() {
+        if (!selectedFavoriteAvatars.value.length) {
+            return;
+        }
+        const total = selectedFavoriteAvatars.value.length;
+        ElMessageBox.confirm(
+            `Are you sure you want to unfavorite ${total} favorites?\n            This action cannot be undone.`,
+            `Delete ${total} favorites?`,
+            {
+                confirmButtonText: 'Confirm',
+                cancelButtonText: 'Cancel',
+                type: 'info'
+            }
+        )
+            .then((action) => {
+                if (action === 'confirm') {
+                    bulkUnfavoriteSelectedAvatars([...selectedFavoriteAvatars.value]);
+                }
+            })
+            .catch(() => {});
+    }
+
+    function bulkUnfavoriteSelectedAvatars(ids) {
+        ids.forEach((id) => {
+            favoriteRequest.deleteFavorite({
+                objectId: id
+            });
+        });
+        selectedFavoriteAvatars.value = [];
+        avatarEditMode.value = false;
+    }
+
+    function showAvatarExportDialog() {
+        avatarExportDialogVisible.value = true;
+    }
+
+    function handleRefreshFavorites() {
+        refreshFavorites();
+        getLocalWorldFavorites();
+    }
+
+    function handleVisibilitySelection(group, visibility) {
+        const menuKey = remoteGroupMenuKey(group.key);
+        changeAvatarGroupVisibility(group.name, visibility, menuKey);
+    }
+
+    function handleRemoteRename(group) {
+        handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
+        changeFavoriteGroupName(group);
+    }
+
+    function handleRemoteClear(group) {
+        handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
+        clearFavoriteGroup(group);
+    }
+
+    function handleLocalRename(groupName) {
+        handleGroupMenuVisible(localGroupMenuKey(groupName), false);
+        promptLocalAvatarFavoriteGroupRename(groupName);
+    }
+
+    function handleLocalDelete(groupName) {
+        handleGroupMenuVisible(localGroupMenuKey(groupName), false);
+        promptLocalAvatarFavoriteGroupDelete(groupName);
+    }
+
+    function handleHistoryClear() {
+        handleGroupMenuVisible(historyGroupMenuKey, false);
+        promptClearAvatarHistory();
+    }
+
+    function changeFavoriteGroupName(group) {
+        const currentName = group.displayName || group.name;
+        ElMessageBox.prompt(
+            t('prompt.change_favorite_group_name.description'),
+            t('prompt.change_favorite_group_name.header'),
+            {
+                confirmButtonText: t('prompt.change_favorite_group_name.change'),
+                cancelButtonText: t('prompt.change_favorite_group_name.cancel'),
+                inputPlaceholder: t('prompt.change_favorite_group_name.input_placeholder'),
+                inputPattern: /\S+/,
+                inputValue: currentName,
+                inputErrorMessage: t('prompt.change_favorite_group_name.input_error')
+            }
+        )
+            .then(({ value }) => {
+                const newName = value.trim();
+                if (!newName || newName === currentName) {
+                    return;
+                }
+                favoriteRequest
+                    .saveFavoriteGroup({
+                        type: 'avatar',
+                        group: group.name,
+                        displayName: newName
+                    })
+                    .then((args) => {
+                        handleFavoriteGroup({
+                            json: args.json,
+                            params: {
+                                favoriteGroupId: args.json.id
+                            }
+                        });
+                        ElMessage({
+                            message: t('prompt.change_favorite_group_name.message.success'),
+                            type: 'success'
+                        });
+                        refreshFavorites();
+                    });
+            })
+            .catch(() => {});
+    }
+
+    function changeAvatarGroupVisibility(name, visibility, menuKey = null) {
+        const params = {
+            type: 'avatar',
+            group: name,
+            visibility
+        };
+        favoriteRequest.saveFavoriteGroup(params).then((args) => {
+            handleFavoriteGroup({
+                json: args.json,
+                params: {
+                    favoriteGroupId: args.json.id
+                }
+            });
+            ElMessage({
+                message: 'Group visibility changed',
+                type: 'success'
+            });
+            if (menuKey) {
+                handleGroupMenuVisible(menuKey, false);
+            }
+            refreshFavorites();
+            return args;
+        });
+    }
+
+    function clearFavoriteGroup(ctx) {
+        ElMessageBox.confirm('Continue? Clear Group', 'Confirm', {
+            confirmButtonText: 'Confirm',
+            cancelButtonText: 'Cancel',
+            type: 'info'
+        })
+            .then((action) => {
+                if (action === 'confirm') {
+                    favoriteRequest.clearFavoriteGroup({
+                        type: ctx.type,
+                        group: ctx.name
+                    });
+                }
+            })
+            .catch(() => {});
+    }
+
+    function promptLocalAvatarFavoriteGroupRename(group) {
+        ElMessageBox.prompt(
+            t('prompt.local_favorite_group_rename.description'),
+            t('prompt.local_favorite_group_rename.header'),
+            {
+                distinguishCancelAndClose: true,
+                confirmButtonText: t('prompt.local_favorite_group_rename.save'),
+                cancelButtonText: t('prompt.local_favorite_group_rename.cancel'),
+                inputPattern: /\S+/,
+                inputErrorMessage: t('prompt.local_favorite_group_rename.input_error'),
+                inputValue: group
+            }
+        )
+            .then(({ value }) => {
+                if (value) {
+                    renameLocalAvatarFavoriteGroup(value, group);
+                    nextTick(() => {
+                        if (localAvatarFavoriteGroups.value.includes(value)) {
+                            selectGroup('local', value);
+                        }
+                    });
+                }
+            })
+            .catch(() => {});
+    }
+
+    function promptLocalAvatarFavoriteGroupDelete(group) {
+        ElMessageBox.confirm(`Delete Group? ${group}`, 'Confirm', {
+            confirmButtonText: 'Confirm',
+            cancelButtonText: 'Cancel',
+            type: 'info'
+        })
+            .then((action) => {
+                if (action === 'confirm') {
+                    deleteLocalAvatarFavoriteGroup(group);
+                }
+            })
+            .catch(() => {});
+    }
+
+    function searchAvatarFavorites(value) {
+        if (typeof value === 'string') {
+            avatarFavoriteSearch.value = value;
+        }
+        const search = avatarFavoriteSearch.value.trim().toLowerCase();
+        if (search.length < 3) {
+            avatarFavoriteSearchResults.value = [];
+            return;
+        }
+        const results = [];
+        localAvatarFavoriteGroups.value.forEach((group) => {
+            const favorites = localAvatarFavorites.value[group];
+            if (!favorites) {
+                return;
+            }
+            favorites.forEach((ref) => {
+                if (
+                    !ref ||
+                    typeof ref.id === 'undefined' ||
+                    typeof ref.name === 'undefined' ||
+                    typeof ref.authorName === 'undefined'
+                ) {
+                    return;
+                }
+                if (ref.name.toLowerCase().includes(search) || ref.authorName.toLowerCase().includes(search)) {
+                    if (!results.some((r) => r.id === ref.id)) {
+                        results.push(ref);
+                    }
+                }
+            });
+        });
+        favoriteAvatars.value.forEach((favorite) => {
+            const ref = favorite.ref;
+            if (
+                !ref ||
+                typeof ref.id === 'undefined' ||
+                typeof ref.name === 'undefined' ||
+                typeof ref.authorName === 'undefined'
+            ) {
+                return;
+            }
+            if (ref.name.toLowerCase().includes(search) || ref.authorName.toLowerCase().includes(search)) {
+                if (!results.some((r) => r.id === ref.id)) {
+                    results.push(ref);
+                }
+            }
+        });
+        avatarFavoriteSearchResults.value = results;
+    }
+
+    async function refreshLocalAvatarFavorites() {
+        if (refreshingLocalFavorites.value) {
+            return;
+        }
+        refreshingLocalFavorites.value = true;
+        const token = {
+            cancelled: false,
+            resolve: null
+        };
+        refreshCancelToken.value = token;
+        try {
+            for (const avatarId of localAvatarFavoritesList) {
+                if (token.cancelled) {
+                    break;
+                }
+                try {
+                    const args = await avatarRequest.getAvatar({
+                        avatarId
+                    });
+                    applyAvatar(args.json);
+                } catch (err) {
+                    console.error(err);
+                }
+                if (token.cancelled) {
+                    break;
+                }
+                await new Promise((resolve) => {
+                    token.resolve = resolve;
+                    worker.value = workerTimers.setTimeout(() => {
+                        worker.value = null;
+                        resolve();
+                    }, 1000);
+                });
+            }
+        } finally {
+            if (worker.value) {
+                workerTimers.clearTimeout(worker.value);
+                worker.value = null;
+            }
+            if (refreshCancelToken.value === token) {
+                refreshCancelToken.value = null;
+            }
+            refreshingLocalFavorites.value = false;
+        }
+    }
+
+    function cancelLocalAvatarRefresh() {
+        if (!refreshingLocalFavorites.value) {
+            return;
+        }
+        if (refreshCancelToken.value) {
+            refreshCancelToken.value.cancelled = true;
+            if (typeof refreshCancelToken.value.resolve === 'function') {
+                refreshCancelToken.value.resolve();
+            }
+        }
+        if (worker.value) {
+            workerTimers.clearTimeout(worker.value);
+            worker.value = null;
+        }
+        refreshingLocalFavorites.value = false;
+    }
+
+    onBeforeUnmount(() => {
+        cancelLocalAvatarRefresh();
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', maybeFillLocalAvatarViewport);
+        }
+    });
+
+    function userFavoriteAvatarsStatusForFavTab(visibility) {
+        if (visibility === 'public') {
+            return 'primary';
+        }
+        if (visibility === 'friends') {
+            return 'success';
+        }
+        return 'info';
+    }
+
+    function formatVisibility(value) {
+        if (!value) {
+            return '';
+        }
+        return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+</script>
+
+<style scoped>
+    .favorites-page {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+        padding-bottom: 0;
+    }
+
+    .favorites-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+    }
+
+    .favorites-toolbar__select {
+        min-width: 200px;
+    }
+
+    .favorites-toolbar__right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex: 1;
+    }
+
+    .favorites-toolbar__search {
+        flex: 1;
+    }
+
+    .favorites-splitter {
+        flex: 1;
+        min-height: 0;
+    }
+
+    .favorites-groups-panel {
+        height: 100%;
+        padding-right: 8px;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .group-section {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .group-section__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-weight: 600;
+        font-size: 14px;
+    }
+
+    .group-section__list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .group-item {
+        border: 1px solid var(--el-border-color);
+        border-radius: 8px;
+        padding: 8px;
+        cursor: pointer;
+        box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
+        transition:
+            box-shadow 0.2s ease,
+            transform 0.2s ease;
+    }
+
+    .group-item:hover {
+        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
+        transform: translateY(-2px);
+    }
+
+    .group-item__top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 4px;
+        font-size: 13px;
+    }
+
+    .group-item__name {
+        font-weight: 600;
+    }
+
+    .group-item__right {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    .group-item__count {
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+    }
+
+    .group-item__bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+    }
+
+    .group-item.is-active {
+        border-color: var(--el-color-primary);
+        background-color: var(--el-color-primary-light-9, rgba(64, 158, 255, 0.12));
+    }
+
+    .group-item--placeholder {
+        pointer-events: none;
+        opacity: 0.7;
+    }
+
+    .group-item__placeholder-tag {
+        width: 64px;
+        height: 18px;
+        border-radius: 999px;
+        background-color: var(--el-fill-color);
+    }
+
+    .group-item--new {
+        border-style: dashed;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        color: var(--el-color-primary);
+        font-size: 14px;
+    }
+
+    .group-item--new.is-disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .group-item__input {
+        width: 100%;
+    }
+
+    .group-item__input :deep(.el-input__wrapper) {
+        width: 100%;
+    }
+
+    .group-empty {
+        text-align: center;
+        color: var(--el-text-color-secondary);
+        font-size: 12px;
+        padding: 12px 0;
+    }
+
+    .favorites-group-menu {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .favorites-group-menu__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        border: none;
+        background: transparent;
+        border-radius: 8px;
+        padding: 6px 12px;
+        font-size: 13px;
+        cursor: pointer;
+        color: inherit;
+        transition: background-color 0.15s ease;
+        height: 32px;
+    }
+
+    .favorites-group-menu__item:hover {
+        background-color: var(--el-menu-hover-bg-color);
+    }
+
+    .favorites-group-menu__item--danger {
+        color: var(--el-color-danger);
+    }
+
+    .favorites-group-menu__item--submenu {
+        padding-right: 8px;
+    }
+
+    .favorites-group-menu__arrow {
+        margin-left: auto;
+        color: var(--el-text-color-secondary);
+        font-size: 12px;
+    }
+
+    .group-visibility-menu {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .group-visibility-menu__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        border: none;
+        background: transparent;
+        padding: 6px 10px;
+        border-radius: 8px;
+        cursor: pointer;
+        color: inherit;
+        font-size: 13px;
+        transition: background-color 0.15s ease;
+        height: 32px;
+    }
+
+    .group-visibility-menu__item:hover,
+    .group-visibility-menu__item.is-active {
+        background-color: var(--el-menu-hover-bg-color);
+    }
+
+    .group-visibility-menu__check {
+        font-size: 12px;
+        color: var(--el-color-primary);
+    }
+
+    .favorites-content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+        padding-left: 26px;
+    }
+
+    .favorites-content__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 12px;
+    }
+
+    .favorites-content__title {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        font-size: 16px;
+        font-weight: 600;
+        padding-left: 2px;
+    }
+
+    .favorites-content__title small {
+        font-size: 12px;
+        font-weight: normal;
+        color: var(--el-text-color-secondary);
+    }
+
+    .favorites-content__edit {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        color: var(--el-text-color-regular);
+    }
+
+    .favorites-content__edit-actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+    }
+
+    .favorites-content__actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-bottom: 12px;
+    }
+
+    .favorites-content__list {
+        flex: 1;
+        min-height: 0;
+    }
+
+    .favorites-content__scroll {
+        height: 100%;
+        padding-right: 8px;
+    }
+
+    .favorites-content__scroll--native {
+        overflow: auto;
+    }
+
+    .favorites-search-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 12px;
+        padding-bottom: 12px;
+    }
+
+    .favorites-card-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+        gap: 12px;
+        padding: 4px 2px 12px 2px;
+    }
+
+    .favorites-card-list::after {
+        content: '';
+    }
+
+    :deep(.favorites-search-card--avatar) {
+        flex: 0 1 280px;
+        min-width: 240px;
+    }
+
+    :deep(.favorites-search-card) {
+        display: flex;
+        align-items: center;
+        border: 1px solid var(--el-border-color);
+        border-radius: 8px;
+        padding: 8px 10px;
+        cursor: pointer;
+        background: var(--el-bg-color);
+        transition:
+            border-color 0.2s ease,
+            box-shadow 0.2s ease;
+        box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
+    }
+
+    :deep(.favorites-search-card:hover) {
+        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
+        transform: translateY(-2px);
+    }
+
+    :deep(.favorites-search-card.is-selected) {
+        border-color: var(--el-color-primary);
+        box-shadow: 0 0 0 1px var(--el-color-primary-light-3, rgba(64, 158, 255, 0.4));
+    }
+
+    :deep(.favorites-search-card__content) {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex: 1;
+        min-width: 0;
+    }
+
+    :deep(.favorites-search-card__avatar) {
+        width: 48px;
+        height: 48px;
+        border-radius: 6px;
+        overflow: hidden;
+        background: var(--el-fill-color-lighter);
+        flex-shrink: 0;
+    }
+
+    :deep(.favorites-search-card__avatar img) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    :deep(.favorites-search-card__avatar.is-empty) {
+        background: repeating-linear-gradient(
+            -45deg,
+            rgba(148, 163, 184, 0.25),
+            rgba(148, 163, 184, 0.25) 10px,
+            rgba(255, 255, 255, 0.35) 10px,
+            rgba(255, 255, 255, 0.35) 20px
+        );
+    }
+
+    :deep(.favorites-search-card__detail) {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-size: 13px;
+        min-width: 0;
+    }
+
+    :deep(.favorites-search-card__detail .name) {
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    :deep(.favorites-search-card__detail .extra) {
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    :deep(.favorites-search-card__title) {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    :deep(.favorites-search-card__badges) {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        color: var(--el-text-color-secondary);
+        font-size: 14px;
+    }
+
+    :deep(.favorites-search-card__actions) {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-left: 8px;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        min-width: 48px;
+    }
+
+    :deep(.favorites-search-card__action) {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+    }
+
+    :deep(.favorites-search-card__dropdown) {
+        width: 100%;
+    }
+
+    :deep(.favorites-search-card__action-group) {
+        display: flex;
+        gap: 6px;
+        width: 100%;
+    }
+
+    :deep(.favorites-search-card__action-group .favorites-search-card__action--full) {
+        flex: 1;
+    }
+
+    :deep(.favorites-search-card__action--checkbox) {
+        align-items: center;
+        justify-content: flex-end;
+        margin-right: 10px;
+    }
+
+    :deep(.favorites-search-card__action--checkbox .el-checkbox) {
+        margin: 0;
+    }
+
+    :deep(.favorites-search-card__actions:empty) {
+        display: none;
+    }
+
+    .favorites-empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--el-text-color-secondary);
+        font-size: 13px;
+        height: 100%;
+    }
+</style>
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
new file mode 100644
index 00000000..009dee3e
--- /dev/null
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -0,0 +1,1040 @@
+<template>
+    <div class="favorites-page x-container" v-loading="isFavoriteLoading">
+        <div class="favorites-toolbar">
+            <div>
+                <el-select v-model="sortFav" class="favorites-toolbar__select">
+                    <template #prefix>
+                        <i class="ri-sort-asc"></i>
+                    </template>
+                    <el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_name')" :value="false" />
+                    <el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_date')" :value="true" />
+                </el-select>
+            </div>
+            <div class="favorites-toolbar__right">
+                <el-input
+                    v-model="friendFavoriteSearch"
+                    clearable
+                    class="favorites-toolbar__search"
+                    :placeholder="t('view.favorite.worlds.search')"
+                    @input="searchFriendFavorites" />
+                <el-dropdown trigger="click" :hide-on-click="true">
+                    <el-button :icon="MoreFilled" size="small" circle />
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item @click="showFriendImportDialog">
+                                {{ t('view.favorite.import') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item divided @click="showFriendExportDialog">
+                                {{ t('view.favorite.export') }}
+                            </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </div>
+        </div>
+        <el-splitter class="favorites-splitter">
+            <el-splitter-panel :size="260" :min="0" :max="360" collapsible>
+                <div class="favorites-groups-panel">
+                    <div class="group-section">
+                        <div class="group-section__header">
+                            <span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
+                            <el-tooltip placement="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
+                                <el-button
+                                    :loading="isFavoriteLoading"
+                                    size="small"
+                                    :icon="Refresh"
+                                    circle
+                                    @click.stop="handleRefreshFavorites" />
+                            </el-tooltip>
+                        </div>
+                        <div class="group-section__list">
+                            <template v-if="favoriteFriendGroups.length">
+                                <div
+                                    v-for="group in favoriteFriendGroups"
+                                    :key="group.key"
+                                    :class="[
+                                        'group-item',
+                                        { 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
+                                    ]"
+                                    @click="handleGroupClick('remote', group.key)">
+                                    <div class="group-item__top">
+                                        <span class="group-item__name">{{ group.displayName }}</span>
+                                        <span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
+                                    </div>
+                                    <div class="group-item__bottom">
+                                        <el-tag
+                                            size="small"
+                                            effect="plain"
+                                            :type="userFavoriteFriendsStatusForFavTab(group.visibility)">
+                                            {{ formatVisibility(group.visibility) }}
+                                        </el-tag>
+                                        <el-popover
+                                            :visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
+                                            @update:visible="
+                                                handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
+                                            "
+                                            placement="right"
+                                            trigger="click"
+                                            :hide-after="0"
+                                            :width="220"
+                                            popper-style="padding: 4px; border-radius: 8px;">
+                                            <template #reference>
+                                                <el-button
+                                                    text
+                                                    size="small"
+                                                    :icon="MoreFilled"
+                                                    circle
+                                                    @click.stop></el-button>
+                                            </template>
+                                            <div class="favorites-group-menu">
+                                                <button
+                                                    type="button"
+                                                    class="favorites-group-menu__item"
+                                                    @click="handleRemoteRename(group)">
+                                                    <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                </button>
+                                                <el-popover
+                                                    popper-class="favorites-group-menu__popover"
+                                                    placement="right"
+                                                    trigger="hover"
+                                                    :width="180"
+                                                    popper-style="padding: 4px; border-radius: 8px;">
+                                                    <div class="group-visibility-menu">
+                                                        <button
+                                                            v-for="visibility in friendGroupVisibilityOptions"
+                                                            :key="visibility"
+                                                            type="button"
+                                                            :class="[
+                                                                'group-visibility-menu__item',
+                                                                { 'is-active': group.visibility === visibility }
+                                                            ]"
+                                                            @click="handleVisibilitySelection(group, visibility)">
+                                                            <span>{{ formatVisibility(visibility) }}</span>
+                                                            <span
+                                                                v-if="group.visibility === visibility"
+                                                                class="group-visibility-menu__check">
+                                                                <i class="ri-check-line"></i>
+                                                            </span>
+                                                        </button>
+                                                    </div>
+                                                    <template #reference>
+                                                        <button
+                                                            type="button"
+                                                            class="favorites-group-menu__item favorites-group-menu__item--submenu">
+                                                            <span>{{ t('view.favorite.visibility_tooltip') }}</span>
+                                                            <span class="favorites-group-menu__arrow">›</span>
+                                                        </button>
+                                                    </template>
+                                                </el-popover>
+                                                <button
+                                                    type="button"
+                                                    class="favorites-group-menu__item favorites-group-menu__item--danger"
+                                                    @click="handleRemoteClear(group)">
+                                                    <span>{{ t('view.favorite.clear') }}</span>
+                                                </button>
+                                            </div>
+                                        </el-popover>
+                                    </div>
+                                </div>
+                            </template>
+                            <div v-else class="group-empty">No Data</div>
+                        </div>
+                    </div>
+                </div>
+            </el-splitter-panel>
+            <el-splitter-panel>
+                <div class="favorites-content">
+                    <div class="favorites-content__header">
+                        <div class="favorites-content__title">
+                            <span v-if="isSearchActive">{{ t('view.favorite.worlds.search') }}</span>
+                            <template v-else-if="activeRemoteGroup">
+                                <span>
+                                    {{ activeRemoteGroup.displayName }}
+                                    <small>{{ activeRemoteGroup.count }}/{{ activeRemoteGroup.capacity }}</small>
+                                </span>
+                            </template>
+                            <span v-else>No Group Selected</span>
+                        </div>
+                        <div class="favorites-content__edit">
+                            <span>{{ t('view.favorite.edit_mode') }}</span>
+                            <el-switch
+                                v-model="friendEditMode"
+                                size="small"
+                                :disabled="isSearchActive || !activeRemoteGroup"></el-switch>
+                        </div>
+                    </div>
+                    <div class="favorites-content__edit-actions">
+                        <div v-if="friendEditMode && !isSearchActive" class="favorites-content__actions">
+                            <el-button size="small" :disabled="!hasFriendSelection" @click="clearSelectedFriends">
+                                {{ t('view.favorite.clear') }}
+                            </el-button>
+                            <el-button size="small" :disabled="!hasFriendSelection" @click="copySelectedFriends">
+                                {{ t('view.favorite.copy') }}
+                            </el-button>
+                            <el-button
+                                size="small"
+                                :disabled="!hasFriendSelection"
+                                @click="showFriendBulkUnfavoriteSelectionConfirm">
+                                {{ t('view.favorite.bulk_unfavorite') }}
+                            </el-button>
+                        </div>
+                    </div>
+                    <div class="favorites-content__list">
+                        <template v-if="activeRemoteGroup && !isSearchActive">
+                            <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <template v-if="currentFriendFavorites.length">
+                                    <div class="favorites-card-list">
+                                        <FavoritesFriendItem
+                                            v-for="favorite in currentFriendFavorites"
+                                            :key="favorite.id"
+                                            :favorite="favorite"
+                                            :group="activeRemoteGroup"
+                                            :selected="selectedFavoriteFriends.includes(favorite.id)"
+                                            :edit-mode="friendEditMode"
+                                            @toggle-select="toggleFriendSelection(favorite.id, $event)"
+                                            @click="showUserDialog(favorite.id)" />
+                                    </div>
+                                </template>
+                                <div v-else class="favorites-empty">No Data</div>
+                            </div>
+                        </template>
+                        <template v-else-if="!isSearchActive">
+                            <div class="favorites-empty">No Group Selected</div>
+                        </template>
+                        <template v-else>
+                            <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <div v-if="friendFavoriteSearchResults.length" class="favorites-search-grid">
+                                    <div
+                                        v-for="favorite in friendFavoriteSearchResults"
+                                        :key="favorite.id"
+                                        class="favorites-search-card"
+                                        @click="showUserDialog(favorite.id)">
+                                        <div class="favorites-search-card__content">
+                                            <div class="favorites-search-card__avatar">
+                                                <img :src="userImage(favorite, true)" loading="lazy" />
+                                            </div>
+                                            <div class="favorites-search-card__detail">
+                                                <div class="favorites-search-card__title">
+                                                    <span class="name">{{ favorite.displayName }}</span>
+                                                </div>
+                                                <div
+                                                    v-if="favorite.location && favorite.location !== 'offline'"
+                                                    class="favorites-search-card__location">
+                                                    <Location
+                                                        :location="favorite.location"
+                                                        :traveling="favorite.travelingToLocation"
+                                                        :link="false" />
+                                                </div>
+                                                <span v-else class="extra">{{ favorite.statusDescription }}</span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div v-else class="favorites-empty">No Data</div>
+                            </div>
+                        </template>
+                    </div>
+                </div>
+            </el-splitter-panel>
+        </el-splitter>
+        <FriendExportDialog v-model:friendExportDialogVisible="friendExportDialogVisible" />
+    </div>
+</template>
+
+<script setup>
+    import { computed, ref, watch } from 'vue';
+    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { MoreFilled, Refresh } from '@element-plus/icons-vue';
+    import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
+
+    import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../stores';
+    import { favoriteRequest } from '../../api';
+    import { userImage } from '../../shared/utils';
+
+    import FavoritesFriendItem from './components/FavoritesFriendItem.vue';
+    import FriendExportDialog from './dialogs/FriendExportDialog.vue';
+
+    const friendGroupVisibilityOptions = ref(['public', 'friends', 'private']);
+
+    const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
+    const { setSortFavorites } = useAppearanceSettingsStore();
+    const favoriteStore = useFavoriteStore();
+    const {
+        favoriteFriends,
+        favoriteFriendGroups,
+        groupedByGroupKeyFavoriteFriends,
+        selectedFavoriteFriends,
+        friendImportDialogInput,
+        isFavoriteLoading
+    } = storeToRefs(favoriteStore);
+    const { showFriendImportDialog, refreshFavorites, getLocalWorldFavorites, handleFavoriteGroup } = favoriteStore;
+    const { showUserDialog } = useUserStore();
+    const { t } = useI18n();
+
+    const friendExportDialogVisible = ref(false);
+    const friendFavoriteSearch = ref('');
+    const friendFavoriteSearchResults = ref([]);
+    const friendEditMode = ref(false);
+    const selectedGroup = ref(null);
+    const activeGroupMenu = ref(null);
+
+    const sortFav = computed({
+        get() {
+            return sortFavorites.value;
+        },
+        set() {
+            setSortFavorites();
+        }
+    });
+
+    const hasFriendSelection = computed(() => selectedFavoriteFriends.value.length > 0);
+    const hasSearchInput = computed(() => friendFavoriteSearch.value.trim().length > 0);
+    const isSearchActive = computed(() => friendFavoriteSearch.value.trim().length >= 3);
+    const isRemoteGroupSelected = computed(() => selectedGroup.value?.type === 'remote');
+
+    const remoteGroupMenuKey = (key) => `remote:${key}`;
+
+    const searchableFriendEntries = computed(() => {
+        const seen = new Set();
+        const entries = [];
+        favoriteFriends.value.forEach((favorite) => {
+            if (!favorite?.ref || !favorite.id || seen.has(favorite.id)) {
+                return;
+            }
+            seen.add(favorite.id);
+            entries.push(favorite.ref);
+        });
+        return entries;
+    });
+
+    const activeRemoteGroup = computed(() => {
+        if (!isRemoteGroupSelected.value) {
+            return null;
+        }
+        return favoriteFriendGroups.value.find((group) => group.key === selectedGroup.value.key) || null;
+    });
+
+    const currentFriendFavorites = computed(() => {
+        if (!activeRemoteGroup.value) {
+            return [];
+        }
+        return groupedByGroupKeyFavoriteFriends.value[activeRemoteGroup.value.key] || [];
+    });
+
+    watch(
+        () => favoriteFriendGroups.value.map((group) => `${group.key}:${group.count}`),
+        () => {
+            ensureSelectedGroup();
+        },
+        { immediate: true }
+    );
+
+    watch(isSearchActive, (active) => {
+        if (active && friendEditMode.value) {
+            friendEditMode.value = false;
+        }
+    });
+
+    watch(
+        () => friendEditMode.value,
+        (value) => {
+            if (!value) {
+                clearSelectedFriends();
+            }
+        }
+    );
+
+    function showFriendExportDialog() {
+        friendExportDialogVisible.value = true;
+    }
+
+    function handleRefreshFavorites() {
+        refreshFavorites();
+        getLocalWorldFavorites();
+    }
+
+    function handleGroupMenuVisible(key, visible) {
+        if (visible) {
+            activeGroupMenu.value = key;
+            return;
+        }
+        if (activeGroupMenu.value === key) {
+            activeGroupMenu.value = null;
+        }
+    }
+
+    function ensureSelectedGroup() {
+        if (selectedGroup.value && isGroupAvailable(selectedGroup.value)) {
+            return;
+        }
+        selectDefaultGroup();
+    }
+
+    function selectDefaultGroup() {
+        if (favoriteFriendGroups.value.length) {
+            const nextGroup =
+                favoriteFriendGroups.value.find((group) => group.count > 0) || favoriteFriendGroups.value[0];
+            if (nextGroup) {
+                selectGroup('remote', nextGroup.key);
+                return;
+            }
+        }
+        selectedGroup.value = null;
+        clearSelectedFriends();
+    }
+
+    function isGroupAvailable(group) {
+        if (!group) {
+            return false;
+        }
+        if (group.type === 'remote') {
+            return favoriteFriendGroups.value.some((item) => item.key === group.key);
+        }
+        return false;
+    }
+
+    function selectGroup(type, key) {
+        if (selectedGroup.value?.type === type && selectedGroup.value?.key === key) {
+            return;
+        }
+        selectedGroup.value = { type, key };
+        clearSelectedFriends();
+    }
+
+    function isGroupActive(type, key) {
+        return selectedGroup.value?.type === type && selectedGroup.value?.key === key;
+    }
+
+    function handleGroupClick(type, key) {
+        if (hasSearchInput.value) {
+            friendFavoriteSearch.value = '';
+            searchFriendFavorites('');
+        }
+        selectGroup(type, key);
+    }
+
+    function searchFriendFavorites(searchTerm) {
+        const search = searchTerm.trim().toLowerCase();
+        if (search.length < 3) {
+            friendFavoriteSearchResults.value = [];
+            return;
+        }
+        const filtered = searchableFriendEntries.value.filter((ref) => {
+            if (!ref || typeof ref.id === 'undefined' || typeof ref.displayName === 'undefined') {
+                return false;
+            }
+            const username = ref.username || '';
+            return ref.displayName.toLowerCase().includes(search) || username.toLowerCase().includes(search);
+        });
+        friendFavoriteSearchResults.value = filtered;
+    }
+
+    function toggleFriendSelection(id, value) {
+        if (value) {
+            if (!selectedFavoriteFriends.value.includes(id)) {
+                selectedFavoriteFriends.value.push(id);
+            }
+        } else {
+            selectedFavoriteFriends.value = selectedFavoriteFriends.value.filter((selectedId) => selectedId !== id);
+        }
+    }
+
+    function clearSelectedFriends() {
+        selectedFavoriteFriends.value = [];
+    }
+
+    function copySelectedFriends() {
+        if (!selectedFavoriteFriends.value.length) {
+            return;
+        }
+        const idList = selectedFavoriteFriends.value.map((id) => `${id}\n`).join('');
+        friendImportDialogInput.value = idList;
+        showFriendImportDialog();
+    }
+
+    function showFriendBulkUnfavoriteSelectionConfirm() {
+        if (!selectedFavoriteFriends.value.length) {
+            return;
+        }
+        const total = selectedFavoriteFriends.value.length;
+        ElMessageBox.confirm(
+            `Are you sure you want to unfavorite ${total} favorites?\n            This action cannot be undone.`,
+            `Delete ${total} favorites?`,
+            {
+                confirmButtonText: 'Confirm',
+                cancelButtonText: 'Cancel',
+                type: 'info'
+            }
+        )
+            .then((action) => {
+                if (action === 'confirm') {
+                    bulkUnfavoriteSelectedFriends([...selectedFavoriteFriends.value]);
+                }
+            })
+            .catch(() => {});
+    }
+
+    function bulkUnfavoriteSelectedFriends(ids) {
+        ids.forEach((id) => {
+            favoriteRequest.deleteFavorite({
+                objectId: id
+            });
+        });
+        selectedFavoriteFriends.value = [];
+        friendEditMode.value = false;
+    }
+
+    function clearFavoriteGroup(ctx) {
+        ElMessageBox.confirm('Continue? Clear Group', 'Confirm', {
+            confirmButtonText: 'Confirm',
+            cancelButtonText: 'Cancel',
+            type: 'info'
+        })
+            .then((action) => {
+                if (action === 'confirm') {
+                    favoriteRequest.clearFavoriteGroup({
+                        type: ctx.type,
+                        group: ctx.name
+                    });
+                }
+            })
+            .catch(() => {});
+    }
+
+    function handleVisibilitySelection(group, visibility) {
+        const menuKey = remoteGroupMenuKey(group.key);
+        changeFriendGroupVisibility(group.name, visibility, menuKey);
+    }
+
+    function handleRemoteRename(group) {
+        handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
+        changeFavoriteGroupName(group);
+    }
+
+    function handleRemoteClear(group) {
+        handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
+        clearFavoriteGroup(group);
+    }
+
+    function changeFavoriteGroupName(group) {
+        const currentName = group.displayName || group.name;
+        ElMessageBox.prompt(
+            t('prompt.change_favorite_group_name.description'),
+            t('prompt.change_favorite_group_name.header'),
+            {
+                confirmButtonText: t('prompt.change_favorite_group_name.change'),
+                cancelButtonText: t('prompt.change_favorite_group_name.cancel'),
+                inputPlaceholder: t('prompt.change_favorite_group_name.input_placeholder'),
+                inputPattern: /\S+/,
+                inputValue: currentName,
+                inputErrorMessage: t('prompt.change_favorite_group_name.input_error')
+            }
+        )
+            .then(({ value }) => {
+                const newName = value.trim();
+                if (!newName || newName === currentName) {
+                    return;
+                }
+                favoriteRequest
+                    .saveFavoriteGroup({
+                        type: 'friend',
+                        group: group.name,
+                        displayName: newName
+                    })
+                    .then((args) => {
+                        handleFavoriteGroup({
+                            json: args.json,
+                            params: {
+                                favoriteGroupId: args.json.id
+                            }
+                        });
+                        ElMessage({
+                            message: t('prompt.change_favorite_group_name.message.success'),
+                            type: 'success'
+                        });
+                        refreshFavorites();
+                    });
+            })
+            .catch(() => {});
+    }
+
+    function changeFriendGroupVisibility(name, visibility, menuKey = null) {
+        const params = {
+            type: 'friend',
+            group: name,
+            visibility
+        };
+        favoriteRequest.saveFavoriteGroup(params).then((args) => {
+            handleFavoriteGroup({
+                json: args.json,
+                params: {
+                    favoriteGroupId: args.json.id
+                }
+            });
+            ElMessage({
+                message: 'Group visibility changed',
+                type: 'success'
+            });
+            if (menuKey) {
+                handleGroupMenuVisible(menuKey, false);
+            }
+            refreshFavorites();
+            return args;
+        });
+    }
+
+    function userFavoriteFriendsStatusForFavTab(visibility) {
+        if (visibility === 'public') {
+            return 'primary';
+        }
+        if (visibility === 'friends') {
+            return 'success';
+        }
+        return 'info';
+    }
+
+    function formatVisibility(value) {
+        if (!value) {
+            return '';
+        }
+        return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+</script>
+
+<style scoped>
+    .favorites-page {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+        padding-bottom: 0;
+    }
+
+    .favorites-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+    }
+
+    .favorites-toolbar__select {
+        min-width: 200px;
+    }
+
+    .favorites-toolbar__right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex: 1;
+    }
+
+    .favorites-toolbar__search {
+        flex: 1;
+    }
+
+    .favorites-splitter {
+        flex: 1;
+        min-height: 0;
+    }
+
+    .favorites-groups-panel {
+        height: 100%;
+        padding-right: 8px;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .group-section {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .group-section__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-weight: 600;
+        font-size: 14px;
+    }
+
+    .group-section__list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .group-item {
+        border: 1px solid var(--el-border-color);
+        border-radius: 8px;
+        padding: 8px;
+        cursor: pointer;
+        box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
+        transition:
+            box-shadow 0.2s ease,
+            transform 0.2s ease;
+    }
+
+    .group-item:hover {
+        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
+        transform: translateY(-2px);
+    }
+
+    .group-item__top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 4px;
+        font-size: 13px;
+    }
+
+    .group-item__name {
+        font-weight: 600;
+    }
+
+    .group-item__count {
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+    }
+
+    .group-item__bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+    }
+
+    .group-item.is-active {
+        border-color: var(--el-color-primary);
+        background-color: var(--el-color-primary-light-9, rgba(64, 158, 255, 0.12));
+    }
+
+    .group-empty {
+        text-align: center;
+        color: var(--el-text-color-secondary);
+        font-size: 12px;
+        padding: 12px 0;
+    }
+
+    .favorites-group-menu {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .favorites-group-menu__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        border: none;
+        background: transparent;
+        border-radius: 8px;
+        padding: 6px 12px;
+        font-size: 13px;
+        cursor: pointer;
+        color: inherit;
+        transition: background-color 0.15s ease;
+        height: 32px;
+    }
+
+    .favorites-group-menu__item:hover {
+        background-color: var(--el-menu-hover-bg-color);
+    }
+
+    .favorites-group-menu__item--danger {
+        color: var(--el-color-danger);
+    }
+
+    .favorites-group-menu__item--submenu {
+        padding-right: 8px;
+    }
+
+    .favorites-group-menu__arrow {
+        margin-left: auto;
+        color: var(--el-text-color-secondary);
+        font-size: 12px;
+    }
+
+    .group-visibility-menu {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .group-visibility-menu__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        border: none;
+        background: transparent;
+        padding: 6px 10px;
+        border-radius: 8px;
+        cursor: pointer;
+        color: inherit;
+        font-size: 13px;
+        transition: background-color 0.15s ease;
+        height: 32px;
+    }
+
+    .group-visibility-menu__item:hover,
+    .group-visibility-menu__item.is-active {
+        background-color: var(--el-menu-hover-bg-color);
+    }
+
+    .group-visibility-menu__check {
+        font-size: 12px;
+        color: var(--el-color-primary);
+    }
+
+    .favorites-content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+        padding-left: 26px;
+    }
+
+    .favorites-content__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 12px;
+    }
+
+    .favorites-content__title {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        font-size: 16px;
+        font-weight: 600;
+        padding-left: 2px;
+    }
+
+    .favorites-content__title small {
+        font-size: 12px;
+        font-weight: normal;
+        color: var(--el-text-color-secondary);
+    }
+
+    .favorites-content__edit {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        color: var(--el-text-color-regular);
+    }
+
+    .favorites-content__edit-actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+    }
+
+    .favorites-content__actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-bottom: 12px;
+    }
+
+    .favorites-content__list {
+        flex: 1;
+        min-height: 0;
+    }
+
+    .favorites-content__scroll {
+        height: 100%;
+        padding-right: 8px;
+    }
+
+    .favorites-content__scroll--native {
+        overflow: auto;
+    }
+
+    .favorites-search-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 12px;
+        padding-bottom: 12px;
+    }
+
+    .favorites-card-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+        gap: 12px;
+        padding: 4px 2px 12px 2px;
+    }
+
+    .favorites-card-list::after {
+        content: '';
+    }
+
+    :deep(.favorites-search-card--friend) {
+        flex: 0 1 280px;
+        min-width: 240px;
+    }
+
+    :deep(.favorites-search-card) {
+        display: flex;
+        align-items: center;
+        border: 1px solid var(--el-border-color);
+        border-radius: 8px;
+        padding: 8px 10px;
+        cursor: pointer;
+        background: var(--el-bg-color);
+        transition:
+            border-color 0.2s ease,
+            box-shadow 0.2s ease;
+        box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
+    }
+
+    :deep(.favorites-search-card:hover) {
+        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
+        transform: translateY(-2px);
+    }
+
+    :deep(.favorites-search-card.is-selected) {
+        border-color: var(--el-color-primary);
+        box-shadow: 0 0 0 1px var(--el-color-primary-light-3, rgba(64, 158, 255, 0.4));
+    }
+
+    :deep(.favorites-search-card__content) {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex: 1;
+        min-width: 0;
+    }
+
+    :deep(.favorites-search-card__avatar) {
+        width: 48px;
+        height: 48px;
+        border-radius: 6px;
+        overflow: hidden;
+        background: var(--el-fill-color-lighter);
+        flex-shrink: 0;
+    }
+
+    :deep(.favorites-search-card__avatar img) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    :deep(.favorites-search-card__avatar.is-empty) {
+        background: repeating-linear-gradient(
+            -45deg,
+            rgba(148, 163, 184, 0.25),
+            rgba(148, 163, 184, 0.25) 10px,
+            rgba(255, 255, 255, 0.35) 10px,
+            rgba(255, 255, 255, 0.35) 20px
+        );
+    }
+
+    :deep(.favorites-search-card__detail) {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-size: 13px;
+        min-width: 0;
+    }
+
+    :deep(.favorites-search-card__detail .name) {
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    :deep(.favorites-search-card__detail .extra) {
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    :deep(.favorites-search-card__title) {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    :deep(.favorites-search-card__badges) {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        color: var(--el-text-color-secondary);
+        font-size: 14px;
+    }
+
+    :deep(.favorites-search-card__actions) {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-left: 8px;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        min-width: 48px;
+    }
+
+    :deep(.favorites-search-card__action) {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+    }
+
+    :deep(.favorites-search-card__dropdown) {
+        width: 100%;
+    }
+
+    :deep(.favorites-search-card__action-group) {
+        display: flex;
+        gap: 6px;
+        width: 100%;
+    }
+
+    :deep(.favorites-search-card__action-group .favorites-search-card__action--full) {
+        flex: 1;
+    }
+
+    :deep(.favorites-search-card__action--checkbox) {
+        align-items: center;
+        justify-content: flex-end;
+        margin-right: 10px;
+    }
+
+    :deep(.favorites-search-card__action--checkbox .el-checkbox) {
+        margin: 0;
+    }
+
+    :deep(.favorites-search-card__actions:empty) {
+        display: none;
+    }
+
+    :deep(.favorites-search-card__location) {
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .favorites-empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--el-text-color-secondary);
+        font-size: 13px;
+        height: 100%;
+    }
+</style>
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
new file mode 100644
index 00000000..c03d6137
--- /dev/null
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -0,0 +1,1544 @@
+<template>
+    <div class="favorites-page x-container" v-loading="isFavoriteLoading">
+        <div class="favorites-toolbar">
+            <div>
+                <el-select v-model="sortFav" class="favorites-toolbar__select">
+                    <template #prefix>
+                        <i class="ri-sort-asc"></i>
+                    </template>
+                    <el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_name')" :value="false" />
+                    <el-option :label="t('view.settings.appearance.appearance.sort_favorite_by_date')" :value="true" />
+                </el-select>
+            </div>
+            <div class="favorites-toolbar__right">
+                <el-input
+                    v-model="worldFavoriteSearch"
+                    clearable
+                    class="favorites-toolbar__search"
+                    :placeholder="t('view.favorite.worlds.search')"
+                    @input="searchWorldFavorites" />
+                <el-dropdown trigger="click" :hide-on-click="true">
+                    <el-button :icon="MoreFilled" size="small" circle />
+                    <template #dropdown>
+                        <el-dropdown-menu>
+                            <el-dropdown-item @click="showWorldImportDialog">
+                                {{ t('view.favorite.import') }}
+                            </el-dropdown-item>
+                            <el-dropdown-item divided @click="showExportDialog">
+                                {{ t('view.favorite.export') }}
+                            </el-dropdown-item>
+                        </el-dropdown-menu>
+                    </template>
+                </el-dropdown>
+            </div>
+        </div>
+        <el-splitter class="favorites-splitter">
+            <el-splitter-panel :size="260" :min="0" :max="360" collapsible>
+                <div class="favorites-groups-panel">
+                    <div class="group-section">
+                        <div class="group-section__header">
+                            <span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
+                            <el-tooltip placement="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
+                                <el-button
+                                    :loading="isFavoriteLoading"
+                                    size="small"
+                                    :icon="Refresh"
+                                    circle
+                                    @click.stop="handleRefreshFavorites" />
+                            </el-tooltip>
+                        </div>
+                        <div class="group-section__list">
+                            <template v-if="favoriteWorldGroups.length">
+                                <div
+                                    v-for="group in favoriteWorldGroups"
+                                    :key="group.key"
+                                    :class="[
+                                        'group-item',
+                                        { 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
+                                    ]"
+                                    @click="handleGroupClick('remote', group.key)">
+                                    <div class="group-item__top">
+                                        <span class="group-item__name">{{ group.displayName }}</span>
+                                        <span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
+                                    </div>
+                                    <div class="group-item__bottom">
+                                        <el-tag
+                                            size="small"
+                                            effect="plain"
+                                            :type="userFavoriteWorldsStatusForFavTab(group.visibility)">
+                                            {{ formatVisibility(group.visibility) }}
+                                        </el-tag>
+                                        <el-popover
+                                            :visible="activeGroupMenu === remoteGroupMenuKey(group.key)"
+                                            @update:visible="
+                                                handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
+                                            "
+                                            placement="right"
+                                            trigger="click"
+                                            :hide-after="0"
+                                            :width="200"
+                                            popper-style="padding: 4px; border-radius: 8px;">
+                                            <template #reference>
+                                                <el-button
+                                                    text
+                                                    size="small"
+                                                    :icon="MoreFilled"
+                                                    circle
+                                                    @click.stop></el-button>
+                                            </template>
+                                            <div class="favorites-group-menu">
+                                                <button
+                                                    type="button"
+                                                    class="favorites-group-menu__item"
+                                                    @click="handleRemoteRename(group)">
+                                                    <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                </button>
+                                                <el-popover
+                                                    placement="right-start"
+                                                    trigger="hover"
+                                                    :width="200"
+                                                    popper-style="padding: 4px; border-radius: 8px;">
+                                                    <div class="group-visibility-menu">
+                                                        <button
+                                                            v-for="visibility in worldGroupVisibilityOptions"
+                                                            :key="visibility"
+                                                            type="button"
+                                                            class="group-visibility-menu__item"
+                                                            :class="{ 'is-active': group.visibility === visibility }"
+                                                            @click="handleVisibilitySelection(group, visibility)">
+                                                            <span>{{ formatVisibility(visibility) }}</span>
+                                                            <span
+                                                                v-if="group.visibility === visibility"
+                                                                class="group-visibility-menu__check"
+                                                                >✔</span
+                                                            >
+                                                        </button>
+                                                    </div>
+                                                    <template #reference>
+                                                        <button
+                                                            type="button"
+                                                            class="favorites-group-menu__item favorites-group-menu__item--submenu">
+                                                            <span>{{ t('view.favorite.visibility_tooltip') }}</span>
+                                                            <span class="favorites-group-menu__arrow">›</span>
+                                                        </button>
+                                                    </template>
+                                                </el-popover>
+                                                <button
+                                                    type="button"
+                                                    class="favorites-group-menu__item favorites-group-menu__item--danger"
+                                                    @click="handleRemoteClear(group)">
+                                                    <span>{{ t('view.favorite.clear') }}</span>
+                                                </button>
+                                            </div>
+                                        </el-popover>
+                                    </div>
+                                </div>
+                            </template>
+                            <template v-else>
+                                <div
+                                    v-for="group in worldGroupPlaceholders"
+                                    :key="group.key"
+                                    :class="[
+                                        'group-item',
+                                        'group-item--placeholder',
+                                        { 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
+                                    ]">
+                                    <div class="group-item__top">
+                                        <span class="group-item__name">{{ group.displayName }}</span>
+                                        <span class="group-item__count">--/--</span>
+                                    </div>
+                                    <div class="group-item__bottom">
+                                        <div class="group-item__placeholder-tag"></div>
+                                    </div>
+                                </div>
+                            </template>
+                        </div>
+                    </div>
+                    <div class="group-section">
+                        <div class="group-section__header">
+                            <span>{{ t('view.favorite.worlds.local_favorites') }}</span>
+                            <el-button
+                                v-if="!refreshingLocalFavorites"
+                                size="small"
+                                @click.stop="refreshLocalWorldFavorites"
+                                :icon="Refresh"
+                                circle />
+                            <el-button v-else size="small" type="text" @click.stop="cancelLocalWorldRefresh">
+                                <el-icon class="is-loading"><Loading /></el-icon>
+                                {{ t('view.favorite.worlds.cancel_refresh') }}
+                            </el-button>
+                        </div>
+                        <div class="group-section__list">
+                            <template v-if="localWorldFavoriteGroups.length">
+                                <div
+                                    v-for="group in localWorldFavoriteGroups"
+                                    :key="group"
+                                    :class="[
+                                        'group-item',
+                                        { 'is-active': !hasSearchInput && isGroupActive('local', group) }
+                                    ]"
+                                    @click="handleGroupClick('local', group)">
+                                    <div class="group-item__top">
+                                        <span class="group-item__name">{{ group }}</span>
+                                        <div class="group-item__right">
+                                            <span class="group-item__count">{{ localWorldFavGroupLength(group) }}</span>
+                                            <div class="group-item__bottom">
+                                                <el-popover
+                                                    :visible="activeGroupMenu === localGroupMenuKey(group)"
+                                                    @update:visible="
+                                                        handleGroupMenuVisible(localGroupMenuKey(group), $event)
+                                                    "
+                                                    placement="right"
+                                                    trigger="click"
+                                                    :hide-after="0"
+                                                    :width="200"
+                                                    popper-style="padding: 4px; border-radius: 8px;">
+                                                    <template #reference>
+                                                        <el-button
+                                                            text
+                                                            size="small"
+                                                            :icon="MoreFilled"
+                                                            circle
+                                                            @click.stop></el-button>
+                                                    </template>
+                                                    <div class="favorites-group-menu">
+                                                        <button
+                                                            type="button"
+                                                            class="favorites-group-menu__item"
+                                                            @click="handleLocalRename(group)">
+                                                            <span>{{ t('view.favorite.rename_tooltip') }}</span>
+                                                        </button>
+                                                        <button
+                                                            type="button"
+                                                            class="favorites-group-menu__item favorites-group-menu__item--danger"
+                                                            @click="handleLocalDelete(group)">
+                                                            <span>{{ t('view.favorite.delete_tooltip') }}</span>
+                                                        </button>
+                                                    </div>
+                                                </el-popover>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </template>
+                            <div v-else class="group-empty">No Data</div>
+                            <div
+                                v-if="!isCreatingLocalGroup"
+                                class="group-item group-item--new"
+                                @click="startLocalGroupCreation">
+                                <el-icon><Plus /></el-icon>
+                                <span>{{ t('view.favorite.worlds.new_group') }}</span>
+                            </div>
+                            <el-input
+                                v-else
+                                ref="newLocalGroupInput"
+                                v-model="newLocalGroupName"
+                                size="small"
+                                class="group-item__input"
+                                :placeholder="t('view.favorite.worlds.new_group')"
+                                @keyup.enter="handleLocalGroupCreationConfirm"
+                                @keyup.esc="cancelLocalGroupCreation"
+                                @blur="cancelLocalGroupCreation" />
+                        </div>
+                    </div>
+                </div>
+            </el-splitter-panel>
+            <el-splitter-panel>
+                <div class="favorites-content">
+                    <div class="favorites-content__header">
+                        <div class="favorites-content__title">
+                            <span v-if="isSearchActive">{{ t('view.favorite.worlds.search') }}</span>
+                            <template v-else-if="activeRemoteGroup">
+                                <span
+                                    >{{ activeRemoteGroup.displayName }} &nbsp;<small
+                                        >{{ activeRemoteGroup.count }}/{{ activeRemoteGroup.capacity }}</small
+                                    ></span
+                                >
+                            </template>
+                            <span v-else-if="activeLocalGroupName">
+                                {{ activeLocalGroupName }}
+                                <small>{{ activeLocalGroupCount }}</small>
+                            </span>
+                            <span v-else>No Group Selected</span>
+                        </div>
+                        <div class="favorites-content__edit">
+                            <span>{{ t('view.favorite.edit_mode') }}</span>
+                            <el-switch v-model="worldEditMode" size="small" :disabled="isSearchActive"></el-switch>
+                        </div>
+                    </div>
+                    <div class="favorites-content__edit-actions">
+                        <div v-if="worldEditMode && !isSearchActive" class="favorites-content__actions">
+                            <el-button size="small" :disabled="!hasWorldSelection" @click="clearSelectedWorlds">
+                                {{ t('view.favorite.clear') }}
+                            </el-button>
+                            <el-button size="small" :disabled="!hasWorldSelection" @click="copySelectedWorlds">
+                                {{ t('view.favorite.copy') }}
+                            </el-button>
+                            <el-button
+                                size="small"
+                                :disabled="!hasWorldSelection"
+                                @click="showWorldBulkUnfavoriteSelectionConfirm">
+                                {{ t('view.favorite.bulk_unfavorite') }}
+                            </el-button>
+                        </div>
+                    </div>
+                    <div class="favorites-content__list">
+                        <template v-if="isSearchActive">
+                            <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <div v-if="worldFavoriteSearchResults.length" class="favorites-search-grid">
+                                    <div
+                                        v-for="favorite in worldFavoriteSearchResults"
+                                        :key="favorite.id"
+                                        class="favorites-search-card"
+                                        @click="showWorldDialog(favorite.id)">
+                                        <div class="favorites-search-card__content">
+                                            <div
+                                                class="favorites-search-card__avatar"
+                                                :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
+                                                <img
+                                                    v-if="favorite.thumbnailImageUrl"
+                                                    :src="favorite.thumbnailImageUrl"
+                                                    loading="lazy" />
+                                            </div>
+                                            <div class="favorites-search-card__detail">
+                                                <span class="name">{{ favorite.name || favorite.id }}</span>
+                                                <span class="extra">
+                                                    {{ favorite.authorName }}
+                                                    <template v-if="favorite.occupants">
+                                                        ({{ favorite.occupants }})
+                                                    </template>
+                                                </span>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                                <div v-else class="favorites-empty">No Data</div>
+                            </div>
+                        </template>
+                        <template v-else>
+                            <div
+                                v-if="activeRemoteGroup && isRemoteGroupSelected"
+                                class="favorites-content__scroll favorites-content__scroll--native">
+                                <template v-if="currentRemoteFavorites.length">
+                                    <div class="favorites-card-list">
+                                        <FavoritesWorldItem
+                                            v-for="favorite in currentRemoteFavorites"
+                                            :key="favorite.id"
+                                            :group="activeRemoteGroup"
+                                            :favorite="favorite"
+                                            :edit-mode="worldEditMode"
+                                            :selected="selectedFavoriteWorlds.includes(favorite.id)"
+                                            @toggle-select="toggleWorldSelection(favorite.id, $event)"
+                                            @click="showWorldDialog(favorite.id)" />
+                                    </div>
+                                </template>
+                                <div v-else class="favorites-empty">No Data</div>
+                            </div>
+                            <el-scrollbar
+                                v-else-if="activeLocalGroupName && isLocalGroupSelected"
+                                ref="localFavoritesScrollbarRef"
+                                class="favorites-content__scroll"
+                                @scroll="handleLocalFavoritesScroll">
+                                <template v-if="currentLocalFavorites.length">
+                                    <div class="favorites-card-list">
+                                        <FavoritesWorldLocalItem
+                                            v-for="favorite in currentLocalFavorites"
+                                            :key="favorite.id"
+                                            :group="activeLocalGroupName"
+                                            :favorite="favorite"
+                                            :edit-mode="worldEditMode"
+                                            @remove-local-world-favorite="removeLocalWorldFavorite"
+                                            @click="showWorldDialog(favorite.id)" />
+                                    </div>
+                                </template>
+                                <div v-else class="favorites-empty">No Data</div>
+                            </el-scrollbar>
+                            <div v-else class="favorites-empty">No Data</div>
+                        </template>
+                    </div>
+                </div>
+            </el-splitter-panel>
+        </el-splitter>
+        <WorldExportDialog v-model:worldExportDialogVisible="worldExportDialogVisible" />
+    </div>
+</template>
+
+<script setup>
+    import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+    import { Loading, MoreFilled, Plus, Refresh } from '@element-plus/icons-vue';
+    import { ElMessage, ElMessageBox } from 'element-plus';
+    import { storeToRefs } from 'pinia';
+    import { useI18n } from 'vue-i18n';
+
+    import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../stores';
+    import { favoriteRequest, worldRequest } from '../../api';
+
+    import FavoritesWorldItem from './components/FavoritesWorldItem.vue';
+    import FavoritesWorldLocalItem from './components/FavoritesWorldLocalItem.vue';
+    import WorldExportDialog from './dialogs/WorldExportDialog.vue';
+
+    import * as workerTimers from 'worker-timers';
+
+    const WORLD_GROUP_PLACEHOLDERS = Array.from({ length: 4 }, (_, index) => ({
+        key: `world:worlds${index + 1}`,
+        displayName: `Group ${index + 1}`
+    }));
+
+    const LOCAL_FAVORITES_PAGE_SIZE = 20;
+    const LOCAL_FAVORITES_SCROLL_THRESHOLD = 120;
+    const LOCAL_FAVORITES_VIEWPORT_BUFFER = 32;
+
+    const { t } = useI18n();
+    const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
+    const { setSortFavorites } = useAppearanceSettingsStore();
+    const favoriteStore = useFavoriteStore();
+    const {
+        favoriteWorlds,
+        favoriteWorldGroups,
+        localWorldFavorites,
+        selectedFavoriteWorlds,
+        worldImportDialogInput,
+        isFavoriteLoading,
+        localWorldFavoriteGroups
+    } = storeToRefs(favoriteStore);
+    const {
+        showWorldImportDialog,
+        localWorldFavGroupLength,
+        deleteLocalWorldFavoriteGroup,
+        renameLocalWorldFavoriteGroup,
+        removeLocalWorldFavorite,
+        newLocalWorldFavoriteGroup,
+        handleFavoriteGroup,
+        localWorldFavoritesList,
+        refreshFavorites,
+        getLocalWorldFavorites
+    } = favoriteStore;
+    const { showWorldDialog } = useWorldStore();
+
+    const worldGroupVisibilityOptions = ref(['public', 'friends', 'private']);
+    const worldExportDialogVisible = ref(false);
+    const worldFavoriteSearch = ref('');
+    const worldFavoriteSearchResults = ref([]);
+    const selectedGroup = ref(null);
+    const isCreatingLocalGroup = ref(false);
+    const newLocalGroupName = ref('');
+    const newLocalGroupInput = ref(null);
+    const worldGroupPlaceholders = WORLD_GROUP_PLACEHOLDERS;
+    const hasUserSelectedWorldGroup = ref(false);
+    const remoteGroupsResolved = ref(false);
+    const sliceLocalWorldFavoritesLoadMoreNumber = ref(60);
+    const refreshingLocalFavorites = ref(false);
+    const worker = ref(null);
+    const refreshCancelToken = ref(null);
+    const worldEditMode = ref(false);
+    const activeGroupMenu = ref(null);
+    const localFavoritesScrollbarRef = ref(null);
+    const localFavoritesLoadingMore = ref(false);
+    const hasWorldSelection = computed(() => selectedFavoriteWorlds.value.length > 0);
+    const hasSearchInput = computed(() => worldFavoriteSearch.value.trim().length > 0);
+    const isSearchActive = computed(() => worldFavoriteSearch.value.trim().length >= 3);
+    const isRemoteGroupSelected = computed(() => selectedGroup.value?.type === 'remote');
+    const isLocalGroupSelected = computed(() => selectedGroup.value?.type === 'local');
+    const remoteGroupMenuKey = (key) => `remote:${key}`;
+    const localGroupMenuKey = (key) => `local:${key}`;
+
+    const groupedWorldFavorites = computed(() => {
+        const grouped = {};
+        favoriteWorlds.value.forEach((world) => {
+            if (!world.groupKey) {
+                return;
+            }
+            if (!grouped[world.groupKey]) {
+                grouped[world.groupKey] = [];
+            }
+            grouped[world.groupKey].push(world);
+        });
+        return grouped;
+    });
+
+    const flattenedLocalWorldFavorites = computed(() => {
+        return Object.values(localWorldFavorites.value).flat();
+    });
+
+    const searchableWorldEntries = computed(() => {
+        const seen = new Set();
+        const entries = [];
+        const pushIfNew = (ref) => {
+            if (!ref || !ref.id || seen.has(ref.id)) {
+                return;
+            }
+            seen.add(ref.id);
+            entries.push(ref);
+        };
+        flattenedLocalWorldFavorites.value.forEach(pushIfNew);
+        favoriteWorlds.value.forEach((favorite) => {
+            pushIfNew(favorite.ref);
+        });
+        return entries;
+    });
+
+    const sliceLocalWorldFavorites = computed(() => {
+        return (group) => {
+            const favorites = localWorldFavorites.value[group];
+            if (!favorites) {
+                return [];
+            }
+            return favorites.slice(0, sliceLocalWorldFavoritesLoadMoreNumber.value);
+        };
+    });
+
+    const activeRemoteGroup = computed(() => {
+        if (!isRemoteGroupSelected.value) {
+            return null;
+        }
+        return favoriteWorldGroups.value.find((group) => group.key === selectedGroup.value.key) || null;
+    });
+
+    const activeLocalGroupName = computed(() => {
+        if (!isLocalGroupSelected.value) {
+            return '';
+        }
+        return selectedGroup.value.key;
+    });
+
+    const activeLocalGroupCount = computed(() => {
+        if (!activeLocalGroupName.value) {
+            return 0;
+        }
+        const favorites = localWorldFavorites.value[activeLocalGroupName.value];
+        return favorites ? favorites.length : 0;
+    });
+
+    const currentRemoteFavorites = computed(() => {
+        if (!activeRemoteGroup.value) {
+            return [];
+        }
+        return groupedWorldFavorites.value[activeRemoteGroup.value.key] || [];
+    });
+
+    const currentLocalFavorites = computed(() => {
+        if (!activeLocalGroupName.value) {
+            return [];
+        }
+        return sliceLocalWorldFavorites.value(activeLocalGroupName.value);
+    });
+
+    const sortFav = computed({
+        get() {
+            return sortFavorites.value;
+        },
+        set() {
+            setSortFavorites();
+        }
+    });
+
+    watch(
+        () => ({
+            remote: favoriteWorldGroups.value.map((group) => group.key),
+            local: [...localWorldFavoriteGroups.value]
+        }),
+        () => {
+            remoteGroupsResolved.value = favoriteWorldGroups.value.length > 0;
+            if (!hasUserSelectedWorldGroup.value) {
+                const preferredKey = favoriteWorldGroups.value[0]?.key || worldGroupPlaceholders[0]?.key || null;
+                if (preferredKey) {
+                    selectGroup('remote', preferredKey);
+                }
+            }
+            ensureSelectedGroup();
+        },
+        { immediate: true }
+    );
+
+    watch(isSearchActive, (active) => {
+        if (active && worldEditMode.value) {
+            worldEditMode.value = false;
+        }
+        if (!active) {
+            nextTick(() => {
+                maybeFillLocalFavoritesViewport();
+            });
+        }
+    });
+
+    watch(
+        () => worldEditMode.value,
+        (value) => {
+            if (!value) {
+                clearSelectedWorlds();
+            }
+        }
+    );
+
+    watch(
+        () => ({
+            group: activeLocalGroupName.value,
+            visible: currentLocalFavorites.value.length,
+            total: activeLocalGroupCount.value,
+            slice: sliceLocalWorldFavoritesLoadMoreNumber.value,
+            isLocal: isLocalGroupSelected.value
+        }),
+        () => {
+            nextTick(() => {
+                maybeFillLocalFavoritesViewport();
+            });
+        }
+    );
+
+    onMounted(() => {
+        if (typeof window !== 'undefined') {
+            window.addEventListener('resize', maybeFillLocalFavoritesViewport);
+        }
+        nextTick(() => {
+            maybeFillLocalFavoritesViewport();
+        });
+    });
+
+    function handleGroupMenuVisible(key, visible) {
+        if (visible) {
+            activeGroupMenu.value = key;
+            return;
+        }
+        if (activeGroupMenu.value === key) {
+            activeGroupMenu.value = null;
+        }
+    }
+
+    function ensureSelectedGroup() {
+        if (selectedGroup.value && isGroupAvailable(selectedGroup.value)) {
+            return;
+        }
+        selectDefaultGroup();
+    }
+
+    function handleGroupClick(type, key) {
+        if (hasSearchInput.value) {
+            worldFavoriteSearch.value = '';
+            searchWorldFavorites('');
+        }
+        selectGroup(type, key, { userInitiated: true });
+    }
+
+    function selectDefaultGroup() {
+        if (!hasUserSelectedWorldGroup.value) {
+            const remoteKey = favoriteWorldGroups.value[0]?.key || worldGroupPlaceholders[0]?.key || null;
+            if (remoteKey) {
+                selectGroup('remote', remoteKey);
+                return;
+            }
+        }
+        if (favoriteWorldGroups.value.length) {
+            selectGroup('remote', favoriteWorldGroups.value[0].key);
+            return;
+        }
+        if (localWorldFavoriteGroups.value.length) {
+            selectGroup('local', localWorldFavoriteGroups.value[0]);
+            return;
+        }
+        selectedGroup.value = null;
+        clearSelectedWorlds();
+    }
+
+    function isGroupAvailable(group) {
+        if (!group) {
+            return false;
+        }
+        if (group.type === 'remote') {
+            if (!remoteGroupsResolved.value) {
+                return true;
+            }
+            return favoriteWorldGroups.value.some((item) => item.key === group.key);
+        }
+        if (group.type === 'local') {
+            return localWorldFavoriteGroups.value.includes(group.key);
+        }
+        return false;
+    }
+
+    function selectGroup(type, key, options = {}) {
+        if (selectedGroup.value?.type === type && selectedGroup.value?.key === key) {
+            return;
+        }
+        selectedGroup.value = { type, key };
+        if (options.userInitiated) {
+            hasUserSelectedWorldGroup.value = true;
+        }
+        resetLocalFavoritesLoadMoreCounter();
+        clearSelectedWorlds();
+        if (type === 'local') {
+            nextTick(() => {
+                maybeFillLocalFavoritesViewport();
+            });
+        }
+    }
+
+    function resetLocalFavoritesLoadMoreCounter() {
+        sliceLocalWorldFavoritesLoadMoreNumber.value = 60;
+        localFavoritesLoadingMore.value = false;
+    }
+
+    function isGroupActive(type, key) {
+        return selectedGroup.value?.type === type && selectedGroup.value?.key === key;
+    }
+
+    function formatVisibility(value) {
+        if (!value) {
+            return '';
+        }
+        return value.charAt(0).toUpperCase() + value.slice(1);
+    }
+
+    function startLocalGroupCreation() {
+        if (isCreatingLocalGroup.value) {
+            return;
+        }
+        isCreatingLocalGroup.value = true;
+        newLocalGroupName.value = '';
+        nextTick(() => {
+            newLocalGroupInput.value?.focus?.();
+        });
+    }
+
+    function cancelLocalGroupCreation() {
+        isCreatingLocalGroup.value = false;
+        newLocalGroupName.value = '';
+    }
+
+    function handleLocalGroupCreationConfirm() {
+        const name = newLocalGroupName.value.trim();
+        if (!name) {
+            cancelLocalGroupCreation();
+            return;
+        }
+        newLocalWorldFavoriteGroup(name);
+        cancelLocalGroupCreation();
+        nextTick(() => {
+            selectGroup('local', name, { userInitiated: true });
+        });
+    }
+
+    function handleLocalFavoritesScroll() {
+        if (!isLocalGroupSelected.value || isSearchActive.value) {
+            return;
+        }
+        const wrap = localFavoritesScrollbarRef.value?.wrapRef;
+        if (!wrap) {
+            return;
+        }
+        const { scrollTop, clientHeight, scrollHeight } = wrap;
+        if (scrollTop + clientHeight >= scrollHeight - LOCAL_FAVORITES_SCROLL_THRESHOLD) {
+            if (loadMoreLocalWorldFavorites()) {
+                nextTick(() => {
+                    maybeFillLocalFavoritesViewport();
+                });
+            }
+        }
+    }
+
+    function toggleWorldSelection(id, value) {
+        if (value) {
+            if (!selectedFavoriteWorlds.value.includes(id)) {
+                selectedFavoriteWorlds.value.push(id);
+            }
+        } else {
+            selectedFavoriteWorlds.value = selectedFavoriteWorlds.value.filter((selectedId) => selectedId !== id);
+        }
+    }
+
+    function clearSelectedWorlds() {
+        selectedFavoriteWorlds.value = [];
+    }
+
+    function copySelectedWorlds() {
+        if (!selectedFavoriteWorlds.value.length) {
+            return;
+        }
+        const idList = selectedFavoriteWorlds.value.map((id) => `${id}\n`).join('');
+        worldImportDialogInput.value = idList;
+        showWorldImportDialog();
+    }
+
+    function showWorldBulkUnfavoriteSelectionConfirm() {
+        if (!selectedFavoriteWorlds.value.length) {
+            return;
+        }
+        const total = selectedFavoriteWorlds.value.length;
+        ElMessageBox.confirm(
+            `Are you sure you want to unfavorite ${total} favorites?
+            This action cannot be undone.`,
+            `Delete ${total} favorites?`,
+            {
+                confirmButtonText: 'Confirm',
+                cancelButtonText: 'Cancel',
+                type: 'info'
+            }
+        )
+            .then((action) => {
+                if (action === 'confirm') {
+                    bulkUnfavoriteSelectedWorlds([...selectedFavoriteWorlds.value]);
+                }
+            })
+            .catch(() => {});
+    }
+
+    function bulkUnfavoriteSelectedWorlds(ids) {
+        ids.forEach((id) => {
+            favoriteRequest.deleteFavorite({
+                objectId: id
+            });
+        });
+        selectedFavoriteWorlds.value = [];
+        worldEditMode.value = false;
+    }
+
+    function loadMoreLocalWorldFavorites() {
+        if (localFavoritesLoadingMore.value) {
+            return false;
+        }
+        if (sliceLocalWorldFavoritesLoadMoreNumber.value >= activeLocalGroupCount.value) {
+            return false;
+        }
+        localFavoritesLoadingMore.value = true;
+        sliceLocalWorldFavoritesLoadMoreNumber.value += LOCAL_FAVORITES_PAGE_SIZE;
+        nextTick(() => {
+            localFavoritesLoadingMore.value = false;
+        });
+        return true;
+    }
+
+    function maybeFillLocalFavoritesViewport() {
+        nextTick(() => {
+            if (!isLocalGroupSelected.value || isSearchActive.value) {
+                return;
+            }
+            const wrap = localFavoritesScrollbarRef.value?.wrapRef;
+            if (!wrap) {
+                return;
+            }
+            if (wrap.scrollHeight > wrap.clientHeight + LOCAL_FAVORITES_VIEWPORT_BUFFER) {
+                return;
+            }
+            if (loadMoreLocalWorldFavorites()) {
+                nextTick(() => {
+                    maybeFillLocalFavoritesViewport();
+                });
+            }
+        });
+    }
+
+    function showExportDialog() {
+        worldExportDialogVisible.value = true;
+    }
+
+    function handleRefreshFavorites() {
+        refreshFavorites();
+        getLocalWorldFavorites();
+    }
+
+    function userFavoriteWorldsStatusForFavTab(visibility) {
+        if (visibility === 'public') {
+            return 'primary';
+        }
+        if (visibility === 'friends') {
+            return 'success';
+        }
+        return 'info';
+    }
+
+    function changeWorldGroupVisibility(name, visibility, menuKey = null) {
+        const params = {
+            type: 'world',
+            group: name,
+            visibility
+        };
+        favoriteRequest.saveFavoriteGroup(params).then((args) => {
+            handleFavoriteGroup({
+                json: args.json,
+                params: {
+                    favoriteGroupId: args.json.id
+                }
+            });
+            ElMessage({
+                message: 'Group visibility changed',
+                type: 'success'
+            });
+            if (menuKey) {
+                handleGroupMenuVisible(menuKey, false);
+            }
+            refreshFavorites();
+            return args;
+        });
+    }
+
+    function promptLocalWorldFavoriteGroupRename(group) {
+        ElMessageBox.prompt(
+            t('prompt.local_favorite_group_rename.description'),
+            t('prompt.local_favorite_group_rename.header'),
+            {
+                distinguishCancelAndClose: true,
+                confirmButtonText: t('prompt.local_favorite_group_rename.save'),
+                cancelButtonText: t('prompt.local_favorite_group_rename.cancel'),
+                inputPattern: /\S+/,
+                inputErrorMessage: t('prompt.local_favorite_group_rename.input_error'),
+                inputValue: group
+            }
+        )
+            .then(({ value }) => {
+                if (value) {
+                    renameLocalWorldFavoriteGroup(value, group);
+                    nextTick(() => {
+                        if (localWorldFavoriteGroups.value.includes(value)) {
+                            selectGroup('local', value, { userInitiated: true });
+                        }
+                    });
+                }
+            })
+            .catch(() => {});
+    }
+
+    function promptLocalWorldFavoriteGroupDelete(group) {
+        ElMessageBox.confirm(`Delete Group? ${group}`, 'Confirm', {
+            confirmButtonText: 'Confirm',
+            cancelButtonText: 'Cancel',
+            type: 'info'
+        })
+            .then((action) => {
+                if (action === 'confirm') {
+                    deleteLocalWorldFavoriteGroup(group);
+                }
+            })
+            .catch(() => {});
+    }
+
+    function clearFavoriteGroup(ctx) {
+        ElMessageBox.confirm('Continue? Clear Group', 'Confirm', {
+            confirmButtonText: 'Confirm',
+            cancelButtonText: 'Cancel',
+            type: 'info'
+        })
+            .then((action) => {
+                if (action === 'confirm') {
+                    favoriteRequest.clearFavoriteGroup({
+                        type: ctx.type,
+                        group: ctx.name
+                    });
+                }
+            })
+            .catch(() => {});
+    }
+
+    function searchWorldFavorites(worldFavoriteSearch) {
+        const search = worldFavoriteSearch.trim().toLowerCase();
+        if (search.length < 3) {
+            worldFavoriteSearchResults.value = [];
+            return;
+        }
+        const filtered = searchableWorldEntries.value.filter((ref) => {
+            if (!ref || typeof ref.id === 'undefined' || typeof ref.name === 'undefined') {
+                return false;
+            }
+            const authorName = ref.authorName || '';
+            return ref.name.toLowerCase().includes(search) || authorName.toLowerCase().includes(search);
+        });
+        worldFavoriteSearchResults.value = filtered;
+    }
+
+    function handleVisibilitySelection(group, visibility) {
+        const menuKey = remoteGroupMenuKey(group.key);
+        changeWorldGroupVisibility(group.name, visibility, menuKey);
+    }
+
+    function handleRemoteRename(group) {
+        handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
+        changeFavoriteGroupName(group);
+    }
+
+    function handleRemoteClear(group) {
+        handleGroupMenuVisible(remoteGroupMenuKey(group.key), false);
+        clearFavoriteGroup(group);
+    }
+
+    function handleLocalRename(groupName) {
+        handleGroupMenuVisible(localGroupMenuKey(groupName), false);
+        promptLocalWorldFavoriteGroupRename(groupName);
+    }
+
+    function handleLocalDelete(groupName) {
+        handleGroupMenuVisible(localGroupMenuKey(groupName), false);
+        promptLocalWorldFavoriteGroupDelete(groupName);
+    }
+
+    function changeFavoriteGroupName(group) {
+        const currentName = group.displayName || group.name;
+        ElMessageBox.prompt(
+            t('prompt.change_favorite_group_name.description'),
+            t('prompt.change_favorite_group_name.header'),
+            {
+                confirmButtonText: t('prompt.change_favorite_group_name.change'),
+                cancelButtonText: t('prompt.change_favorite_group_name.cancel'),
+                inputPlaceholder: t('prompt.change_favorite_group_name.input_placeholder'),
+                inputPattern: /\S+/,
+                inputValue: currentName,
+                inputErrorMessage: t('prompt.change_favorite_group_name.input_error')
+            }
+        )
+            .then(({ value }) => {
+                const newName = value.trim();
+                if (!newName || newName === currentName) {
+                    return;
+                }
+                favoriteRequest
+                    .saveFavoriteGroup({
+                        type: 'world',
+                        group: group.name,
+                        displayName: newName
+                    })
+                    .then((args) => {
+                        handleFavoriteGroup({
+                            json: args.json,
+                            params: {
+                                favoriteGroupId: args.json.id
+                            }
+                        });
+                        ElMessage({
+                            message: t('prompt.change_favorite_group_name.message.success'),
+                            type: 'success'
+                        });
+                        refreshFavorites();
+                    });
+            })
+            .catch(() => {});
+    }
+
+    async function refreshLocalWorldFavorites() {
+        if (refreshingLocalFavorites.value) {
+            return;
+        }
+        refreshingLocalFavorites.value = true;
+        const token = {
+            cancelled: false,
+            resolve: null
+        };
+        refreshCancelToken.value = token;
+        try {
+            for (const worldId of localWorldFavoritesList) {
+                if (token.cancelled) {
+                    break;
+                }
+                try {
+                    await worldRequest.getWorld({
+                        worldId
+                    });
+                } catch (err) {
+                    console.error(err);
+                }
+                if (token.cancelled) {
+                    break;
+                }
+                await new Promise((resolve) => {
+                    token.resolve = resolve;
+                    worker.value = workerTimers.setTimeout(() => {
+                        worker.value = null;
+                        resolve();
+                    }, 1000);
+                });
+            }
+        } finally {
+            if (worker.value) {
+                workerTimers.clearTimeout(worker.value);
+                worker.value = null;
+            }
+            if (refreshCancelToken.value === token) {
+                refreshCancelToken.value = null;
+            }
+            refreshingLocalFavorites.value = false;
+        }
+    }
+
+    function cancelLocalWorldRefresh() {
+        if (!refreshingLocalFavorites.value) {
+            return;
+        }
+        if (refreshCancelToken.value) {
+            refreshCancelToken.value.cancelled = true;
+            if (typeof refreshCancelToken.value.resolve === 'function') {
+                refreshCancelToken.value.resolve();
+            }
+        }
+        if (worker.value) {
+            workerTimers.clearTimeout(worker.value);
+            worker.value = null;
+        }
+        refreshingLocalFavorites.value = false;
+    }
+
+    onBeforeUnmount(() => {
+        cancelLocalWorldRefresh();
+        if (typeof window !== 'undefined') {
+            window.removeEventListener('resize', maybeFillLocalFavoritesViewport);
+        }
+    });
+</script>
+
+<style scoped>
+    .favorites-page {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+        padding-bottom: 0;
+    }
+
+    .favorites-toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 12px;
+        flex-wrap: wrap;
+    }
+
+    .favorites-toolbar__select {
+        min-width: 200px;
+    }
+
+    .favorites-toolbar__right {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex: 1;
+    }
+
+    .favorites-toolbar__search {
+        flex: 1;
+    }
+
+    .favorites-splitter {
+        flex: 1;
+        min-height: 0;
+    }
+
+    .favorites-groups-panel {
+        height: 100%;
+        padding-right: 8px;
+        overflow: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
+
+    .group-section {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .group-section__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        font-weight: 600;
+        font-size: 14px;
+    }
+
+    .group-section__list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .group-item {
+        border: 1px solid var(--el-border-color);
+        border-radius: 8px;
+        padding: 8px;
+        cursor: pointer;
+        box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
+        transition:
+            box-shadow 0.2s ease,
+            transform 0.2s ease;
+    }
+
+    .group-item:hover {
+        box-shadow: 0 2px 6px rgba(15, 23, 42, 0.07);
+        transform: translateY(-2px);
+    }
+
+    .group-item__top {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 4px;
+        font-size: 13px;
+    }
+
+    .group-item__name {
+        font-weight: 600;
+    }
+
+    .group-item__right {
+        display: flex;
+        align-items: center;
+    }
+
+    .group-item__count {
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+    }
+
+    .group-item__bottom {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 8px;
+    }
+
+    .group-item.is-active {
+        border-color: var(--el-color-primary);
+        background-color: var(--el-color-primary-light-9, rgba(64, 158, 255, 0.12));
+    }
+
+    .group-item--placeholder {
+        pointer-events: none;
+        opacity: 0.7;
+    }
+
+    .group-item__placeholder-tag {
+        width: 64px;
+        height: 18px;
+        border-radius: 999px;
+        background-color: var(--el-fill-color);
+    }
+
+    .group-item--new {
+        border-style: dashed;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 6px;
+        color: var(--el-color-primary);
+        font-size: 14px;
+    }
+
+    .group-item__input {
+        width: 100%;
+    }
+
+    .group-item__input :deep(.el-input__wrapper) {
+        width: 100%;
+    }
+
+    .group-empty {
+        text-align: center;
+        color: var(--el-text-color-secondary);
+        font-size: 12px;
+        padding: 12px 0;
+    }
+
+    .favorites-group-menu {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .favorites-group-menu__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        border: none;
+        background: transparent;
+        border-radius: 8px;
+        padding: 6px 12px;
+        font-size: 13px;
+        cursor: pointer;
+        color: inherit;
+        transition: background-color 0.15s ease;
+        height: 32px;
+    }
+    .favorites-group-menu__item:hover {
+        background-color: var(--el-menu-hover-bg-color);
+    }
+
+    .favorites-group-menu__item--danger {
+        color: var(--el-color-danger);
+    }
+
+    .favorites-group-menu__item--submenu {
+        padding-right: 8px;
+    }
+
+    .favorites-group-menu__arrow {
+        margin-left: auto;
+        color: var(--el-text-color-secondary);
+        font-size: 12px;
+    }
+
+    .group-visibility-menu {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+    }
+
+    .group-visibility-menu__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+        border: none;
+        background: transparent;
+        padding: 6px 10px;
+        border-radius: 8px;
+        cursor: pointer;
+        color: inherit;
+        font-size: 13px;
+        transition: background-color 0.15s ease;
+        height: 32px;
+    }
+
+    .group-visibility-menu__item:hover,
+    .group-visibility-menu__item.is-active {
+        background-color: var(--el-menu-hover-bg-color);
+    }
+
+    .group-visibility-menu__check {
+        font-size: 12px;
+        color: var(--el-color-primary);
+    }
+
+    .favorites-content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        min-height: 0;
+        padding-left: 26px;
+    }
+
+    .favorites-content__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        margin-bottom: 12px;
+    }
+
+    .favorites-content__title {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        font-size: 16px;
+        font-weight: 600;
+        padding-left: 2px;
+    }
+
+    .favorites-content__title small {
+        font-size: 12px;
+        font-weight: normal;
+        color: var(--el-text-color-secondary);
+    }
+
+    .favorites-content__edit {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+        color: var(--el-text-color-regular);
+    }
+
+    .favorites-content__edit-actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+    }
+
+    .favorites-content__actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
+        margin-bottom: 12px;
+    }
+
+    .favorites-content__list {
+        flex: 1;
+        min-height: 0;
+    }
+
+    .favorites-content__scroll {
+        height: 100%;
+        padding-right: 8px;
+    }
+
+    .favorites-content__scroll--native {
+        overflow: auto;
+    }
+
+    .favorites-search-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 12px;
+        padding-bottom: 12px;
+    }
+
+    .favorites-card-list {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+        gap: 12px;
+        padding: 4px 2px 12px 2px;
+    }
+
+    .favorites-card-list::after {
+        content: '';
+    }
+
+    :deep(.favorites-search-card--world) {
+        flex: 0 1 280px;
+        min-width: 240px;
+    }
+
+    :deep(.favorites-search-card) {
+        display: flex;
+        align-items: center;
+        border: 1px solid var(--el-border-color);
+        border-radius: 8px;
+        padding: 8px 10px;
+        cursor: pointer;
+        background: var(--el-bg-color);
+        transition:
+            border-color 0.2s ease,
+            box-shadow 0.2s ease;
+        box-shadow: 0 0 6px rgba(15, 23, 42, 0.04);
+    }
+
+    :deep(.favorites-search-card:hover) {
+        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
+        transform: translateY(-2px);
+    }
+
+    :deep(.favorites-search-card.is-selected) {
+        border-color: var(--el-color-primary);
+        box-shadow: 0 0 0 1px var(--el-color-primary-light-3, rgba(64, 158, 255, 0.4));
+    }
+
+    :deep(.favorites-search-card__content) {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        flex: 1;
+        min-width: 0;
+    }
+
+    :deep(.favorites-search-card__avatar) {
+        width: 48px;
+        height: 48px;
+        border-radius: 6px;
+        overflow: hidden;
+        background: var(--el-fill-color-lighter);
+        flex-shrink: 0;
+    }
+
+    :deep(.favorites-search-card__avatar img) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+
+    :deep(.favorites-search-card__avatar.is-empty) {
+        background: repeating-linear-gradient(
+            -45deg,
+            rgba(148, 163, 184, 0.25),
+            rgba(148, 163, 184, 0.25) 10px,
+            rgba(255, 255, 255, 0.35) 10px,
+            rgba(255, 255, 255, 0.35) 20px
+        );
+    }
+
+    :deep(.favorites-search-card__detail) {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        font-size: 13px;
+        min-width: 0;
+    }
+
+    :deep(.favorites-search-card__detail .name) {
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    :deep(.favorites-search-card__detail .extra) {
+        font-size: 12px;
+        color: var(--el-text-color-secondary);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    :deep(.favorites-search-card__title) {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+    }
+
+    :deep(.favorites-search-card__badges) {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        color: var(--el-text-color-secondary);
+        font-size: 14px;
+    }
+
+    :deep(.favorites-search-card__actions) {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        margin-left: 8px;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        min-width: 48px;
+    }
+
+    :deep(.favorites-search-card__action) {
+        display: flex;
+        justify-content: center;
+        width: 100%;
+    }
+
+    :deep(.favorites-search-card__dropdown) {
+        width: 100%;
+    }
+
+    :deep(.favorites-search-card__action-group) {
+        display: flex;
+        gap: 6px;
+        width: 100%;
+    }
+
+    :deep(.favorites-search-card__action-group .favorites-search-card__action--full) {
+        flex: 1;
+    }
+
+    :deep(.favorites-search-card__action--checkbox) {
+        align-items: center;
+        justify-content: flex-end;
+        margin-right: 10px;
+    }
+
+    :deep(.favorites-search-card__action--checkbox .el-checkbox) {
+        margin: 0;
+    }
+
+    :deep(.favorites-search-card__actions:empty) {
+        display: none;
+    }
+
+    .favorites-empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: var(--el-text-color-secondary);
+        font-size: 13px;
+        height: 100%;
+    }
+</style>
diff --git a/src/views/Favorites/components/FavoritesAvatarItem.vue b/src/views/Favorites/components/FavoritesAvatarItem.vue
index 6f3c0713..9aabc915 100644
--- a/src/views/Favorites/components/FavoritesAvatarItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarItem.vue
@@ -1,132 +1,126 @@
 <template>
-    <div @click="$emit('click')">
-        <div class="x-friend-item">
-            <template v-if="isLocalFavorite ? favorite.name : favorite.ref">
-                <div class="avatar">
-                    <img :src="smallThumbnail" loading="lazy" />
+    <div :class="cardClasses" @click="$emit('click')">
+        <template v-if="localFavFakeRef">
+            <div class="favorites-search-card__content">
+                <div class="favorites-search-card__avatar" :class="{ 'is-empty': !localFavFakeRef.thumbnailImageUrl }">
+                    <img v-if="localFavFakeRef.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
                 </div>
-                <div class="detail">
-                    <span class="name" v-text="localFavFakeRef.name"></span>
-                    <span class="extra" v-text="localFavFakeRef.authorName"></span>
+                <div class="favorites-search-card__detail">
+                    <div class="favorites-search-card__title">
+                        <span class="name">{{ localFavFakeRef.name }}</span>
+                        <span class="favorites-search-card__badges">
+                            <el-tooltip
+                                v-if="favorite.deleted"
+                                placement="top"
+                                :content="t('view.favorite.unavailable_tooltip')">
+                                <i class="ri-error-warning-line"></i>
+                            </el-tooltip>
+                            <el-tooltip
+                                v-if="!isLocalFavorite && favorite.ref?.releaseStatus === 'private'"
+                                placement="top"
+                                :content="t('view.favorite.private')">
+                                <i class="ri-lock-line"></i>
+                            </el-tooltip>
+                        </span>
+                    </div>
+                    <span class="extra">{{ localFavFakeRef.authorName }}</span>
                 </div>
-                <div v-if="editFavoritesMode">
-                    <FavoritesMoveDropdown
-                        :favoriteGroup="favoriteAvatarGroups"
-                        :currentFavorite="props.favorite"
-                        :currentGroup="group"
-                        type="avatar" />
-                    <el-button v-if="!isLocalFavorite" type="text" size="small" style="margin-left: 5px" @click.stop>
+            </div>
+            <div class="favorites-search-card__actions">
+                <template v-if="editMode">
+                    <div
+                        v-if="!isLocalFavorite"
+                        class="favorites-search-card__action favorites-search-card__action--checkbox"
+                        @click.stop>
                         <el-checkbox v-model="isSelected"></el-checkbox>
-                    </el-button>
-                </div>
-                <template v-else-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>
+                    </div>
+                    <div class="favorites-search-card__action-group">
+                        <div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
+                            <FavoritesMoveDropdown
+                                :favoriteGroup="favoriteAvatarGroups"
+                                :currentFavorite="props.favorite"
+                                :currentGroup="group"
+                                class="favorites-search-card__dropdown"
+                                :is-local-favorite="isLocalFavorite"
+                                type="avatar" />
+                        </div>
+                        <div class="favorites-search-card__action">
+                            <el-tooltip
+                                placement="left"
+                                :content="
+                                    isLocalFavorite
+                                        ? t('view.favorite.delete_tooltip')
+                                        : t('view.favorite.unfavorite_tooltip')
+                                ">
+                                <el-button
+                                    size="small"
+                                    circle
+                                    class="favorites-search-card__action-btn"
+                                    :type="isLocalFavorite ? 'default' : 'default'"
+                                    @click.stop="handlePrimaryDeleteAction">
+                                    <i class="ri-delete-bin-line"></i>
+                                </el-button>
+                            </el-tooltip>
+                        </div>
+                    </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>
+                    <div class="favorites-search-card__action-group">
+                        <div class="favorites-search-card__action" v-if="canSelectAvatar">
+                            <el-tooltip placement="top" :content="t('view.favorite.select_avatar_tooltip')">
+                                <el-button
+                                    :disabled="currentUser.currentAvatar === favorite.id"
+                                    size="small"
+                                    :icon="Check"
+                                    circle
+                                    class="favorites-search-card__action-btn"
+                                    @click.stop="selectAvatarWithConfirmation(favorite.id)" />
+                            </el-tooltip>
+                        </div>
+                        <div class="favorites-search-card__action">
+                            <el-tooltip placement="bottom" :content="t('view.favorite.unfavorite_tooltip')">
+                                <el-button
+                                    v-if="showDangerUnfavorite"
+                                    size="small"
+                                    :icon="Close"
+                                    circle
+                                    class="favorites-search-card__action-btn"
+                                    type="danger"
+                                    @click.stop="handlePrimaryDeleteAction" />
+                                <el-button
+                                    v-else
+                                    type="default"
+                                    :icon="Star"
+                                    size="small"
+                                    circle
+                                    class="favorites-search-card__action-btn"
+                                    @click.stop="showFavoriteDialog('avatar', favorite.id)" />
+                            </el-tooltip>
+                        </div>
+                    </div>
                 </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>
-                <div class="detail">
-                    <span class="name" v-text="favorite.name || favorite.id"></span>
+            </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 class="name">{{ favorite.name || favorite.id }}</span>
                 </div>
-                <el-button
-                    v-if="isLocalFavorite"
-                    type="text"
-                    :icon="Close"
-                    size="small"
-                    style="margin-left: 5px"
-                    @click.stop="removeLocalAvatarFavorite(favorite.id, favoriteGroupName)"></el-button>
-                <el-button
-                    v-else
-                    type="text"
-                    :icon="Close"
-                    size="small"
-                    style="margin-left: 5px"
-                    @click.stop="deleteFavorite(favorite.id)"></el-button>
-            </template>
-        </div>
+            </div>
+            <div class="favorites-search-card__actions">
+                <div class="favorites-search-card__action">
+                    <el-button circle type="default" size="small" @click.stop="handlePrimaryDeleteAction">
+                        <i class="ri-delete-bin-line"></i>
+                    </el-button>
+                </div>
+            </div>
+        </template>
     </div>
 </template>
 
 <script setup>
-    import { Check, Close, Star, Warning } from '@element-plus/icons-vue';
+    import { Check, Close, Star } from '@element-plus/icons-vue';
     import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
@@ -139,35 +133,74 @@
     const props = defineProps({
         favorite: Object,
         group: [Object, String],
-        isLocalFavorite: Boolean
+        isLocalFavorite: Boolean,
+        editMode: { type: Boolean, default: false },
+        selected: { type: Boolean, default: false }
     });
-    const emit = defineEmits(['click', 'handle-select']);
+    const emit = defineEmits(['click', 'toggle-select']);
 
     const { t } = useI18n();
 
-    const { favoriteAvatarGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
+    const { favoriteAvatarGroups } = storeToRefs(useFavoriteStore());
     const { removeLocalAvatarFavorite, showFavoriteDialog } = useFavoriteStore();
     const { selectAvatarWithConfirmation } = useAvatarStore();
     const { shiftHeld } = storeToRefs(useUiStore());
     const { currentUser } = storeToRefs(useUserStore());
 
     const isSelected = computed({
-        get: () => props.favorite.$selected,
-        set: (value) => emit('handle-select', value)
+        get: () => props.selected,
+        set: (value) => emit('toggle-select', value)
+    });
+    const localFavFakeRef = computed(() => (props.isLocalFavorite ? props.favorite : props.favorite?.ref));
+
+    const cardClasses = computed(() => [
+        'favorites-search-card',
+        'favorites-search-card--avatar',
+        {
+            'is-selected': props.selected,
+            'is-edit-mode': props.editMode
+        }
+    ]);
+
+    const smallThumbnail = computed(() => {
+        if (!localFavFakeRef.value?.thumbnailImageUrl) {
+            return '';
+        }
+        return localFavFakeRef.value.thumbnailImageUrl.replace('256', '128');
     });
-    const localFavFakeRef = computed(() => (props.isLocalFavorite ? props.favorite : props.favorite.ref));
 
-    const smallThumbnail = computed(
-        () => localFavFakeRef.value.thumbnailImageUrl?.replace('256', '128') || localFavFakeRef.value.thumbnailImageUrl
-    );
     const favoriteGroupName = computed(() => {
         if (typeof props.group === 'string') {
             return props.group;
-        } else {
-            return props.group?.name;
         }
+        return props.group?.name;
     });
 
+    const canSelectAvatar = computed(() => {
+        if (props.isLocalFavorite) {
+            return true;
+        }
+        if (props.favorite?.deleted) {
+            return false;
+        }
+        return props.favorite?.ref?.releaseStatus !== 'private';
+    });
+
+    const showDangerUnfavorite = computed(() => {
+        if (props.isLocalFavorite) {
+            return shiftHeld.value;
+        }
+        return shiftHeld.value;
+    });
+
+    function handlePrimaryDeleteAction() {
+        if (props.isLocalFavorite) {
+            removeLocalAvatarFavorite(props.favorite.id, favoriteGroupName.value);
+            return;
+        }
+        deleteFavorite(props.favorite.id);
+    }
+
     function deleteFavorite(objectId) {
         favoriteRequest.deleteFavorite({ objectId });
     }
diff --git a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
index ec0db144..8f771360 100644
--- a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
@@ -1,44 +1,41 @@
 <template>
-    <div @click="$emit('click')">
-        <div class="x-friend-item">
-            <div class="avatar">
-                <img :src="smallThumbnail" loading="lazy" />
+    <div :class="cardClasses" @click="$emit('click')">
+        <div class="favorites-search-card__content">
+            <div class="favorites-search-card__avatar" :class="{ 'is-empty': !favorite.thumbnailImageUrl }">
+                <img v-if="favorite.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
             </div>
-            <div class="detail">
-                <span class="name" v-text="favorite.name"></span>
-                <span class="extra" v-text="favorite.authorName"></span>
+            <div class="favorites-search-card__detail">
+                <div class="favorites-search-card__title">
+                    <span class="name">{{ favorite.name }}</span>
+                </div>
+                <span class="extra">{{ favorite.authorName }}</span>
+            </div>
+        </div>
+        <div class="favorites-search-card__actions">
+            <div class="favorites-search-card__action-group">
+                <div class="favorites-search-card__action">
+                    <el-tooltip placement="top" :content="t('view.favorite.select_avatar_tooltip')">
+                        <el-button
+                            :disabled="currentUser.currentAvatar === favorite.id"
+                            size="small"
+                            :icon="Check"
+                            circle
+                            class="favorites-search-card__action-btn"
+                            @click.stop="selectAvatarWithConfirmation(favorite.id)" />
+                    </el-tooltip>
+                </div>
+                <div class="favorites-search-card__action">
+                    <el-tooltip placement="bottom" :content="t('view.favorite.favorite_tooltip')">
+                        <el-button
+                            type="default"
+                            :icon="favoriteExists ? Star : StarFilled"
+                            size="small"
+                            circle
+                            class="favorites-search-card__action-btn"
+                            @click.stop="showFavoriteDialog('avatar', favorite.id)" />
+                    </el-tooltip>
+                </div>
             </div>
-            <el-tooltip 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>
-            <template v-if="getCachedFavoritesByObjectId(favorite.id)">
-                <el-tooltip placement="right" content="Favorite" :teleported="false">
-                    <el-button
-                        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="right" content="Favorite" :teleported="false">
-                    <el-button
-                        type="default"
-                        :icon="StarFilled"
-                        size="small"
-                        circle
-                        style="margin-left: 5px"
-                        @click.stop="showFavoriteDialog('avatar', favorite.id)"></el-button>
-                </el-tooltip>
-            </template>
         </div>
     </div>
 </template>
@@ -66,7 +63,14 @@
 
     defineEmits(['click']);
 
+    const favoriteExists = computed(() => Boolean(getCachedFavoritesByObjectId(props.favorite.id)));
+
+    const cardClasses = computed(() => ['favorites-search-card', 'favorites-search-card--avatar']);
+
     const smallThumbnail = computed(() => {
-        return props.favorite.thumbnailImageUrl?.replace('256', '128') || props.favorite.thumbnailImageUrl;
+        if (!props.favorite.thumbnailImageUrl) {
+            return '';
+        }
+        return props.favorite.thumbnailImageUrl.replace('256', '128');
     });
 </script>
diff --git a/src/views/Favorites/components/FavoritesAvatarTab.vue b/src/views/Favorites/components/FavoritesAvatarTab.vue
deleted file mode 100644
index 35904753..00000000
--- a/src/views/Favorites/components/FavoritesAvatarTab.vue
+++ /dev/null
@@ -1,475 +0,0 @@
-<template>
-    <div>
-        <div style="display: flex; align-items: center; justify-content: space-between">
-            <div>
-                <el-button size="small" @click="showAvatarExportDialog">
-                    {{ t('view.favorite.export') }}
-                </el-button>
-                <el-button size="small" style="margin-left: 5px" @click="showAvatarImportDialog">
-                    {{ t('view.favorite.import') }}
-                </el-button>
-            </div>
-            <div style="display: flex; align-items: center; font-size: 13px; margin-right: 10px">
-                <span class="name" style="margin-right: 5px; line-height: 10px">
-                    {{ t('view.favorite.sort_by') }}
-                </span>
-                <el-radio-group v-model="sortFav" style="margin-right: 12px">
-                    <el-radio :label="false">
-                        {{ t('view.settings.appearance.appearance.sort_favorite_by_name') }}
-                    </el-radio>
-                    <el-radio :label="true">
-                        {{ t('view.settings.appearance.appearance.sort_favorite_by_date') }}
-                    </el-radio>
-                </el-radio-group>
-                <el-input
-                    v-model="avatarFavoriteSearch"
-                    clearable
-                    size="small"
-                    :placeholder="t('view.favorite.avatars.search')"
-                    style="width: 200px"
-                    @input="searchAvatarFavorites" />
-            </div>
-        </div>
-        <div class="x-friend-list" style="margin-top: 10px">
-            <div
-                v-for="favorite in avatarFavoriteSearchResults"
-                :key="favorite.id"
-                style="display: inline-block; width: 300px; margin-right: 15px"
-                @click="showAvatarDialog(favorite.id)">
-                <div class="x-friend-item">
-                    <template v-if="favorite.name">
-                        <div class="avatar">
-                            <img :src="favorite.thumbnailImageUrl" loading="lazy" />
-                        </div>
-                        <div class="detail">
-                            <span class="name" v-text="favorite.name" />
-                            <span class="extra" v-text="favorite.authorName" />
-                        </div>
-                    </template>
-                    <template v-else>
-                        <div class="avatar"></div>
-                        <div class="detail">
-                            <span class="name" v-text="favorite.id" />
-                        </div>
-                    </template>
-                </div>
-            </div>
-        </div>
-        <span style="display: block; margin-top: 20px">
-            {{ t('view.favorite.avatars.vrchat_favorites') }}
-        </span>
-        <el-collapse style="border: 0">
-            <el-collapse-item v-for="group in favoriteAvatarGroups" :key="group.name">
-                <template #title>
-                    <span style="font-weight: bold; font-size: 14px; margin-left: 10px" v-text="group.displayName" />
-                    <span style="color: #909399; font-size: 12px; margin-left: 10px">
-                        {{ group.count }}/{{ group.capacity }}
-                    </span>
-                    <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
-                        <el-button
-                            size="small"
-                            :icon="Edit"
-                            circle
-                            style="margin-left: 10px"
-                            @click.stop="changeFavoriteGroupName(group)" />
-                    </el-tooltip>
-                    <el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')" :teleported="false">
-                        <el-button
-                            size="small"
-                            :icon="Delete"
-                            circle
-                            style="margin-left: 5px"
-                            @click.stop="clearFavoriteGroup(group)" />
-                    </el-tooltip>
-                </template>
-                <div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
-                    <FavoritesAvatarItem
-                        v-for="favorite in groupedByGroupKeyFavoriteAvatars[group.key]"
-                        :key="favorite.id"
-                        :favorite="favorite"
-                        :group="group"
-                        style="display: inline-block; width: 300px; margin-right: 15px"
-                        @handle-select="favorite.$selected = $event"
-                        @click="showAvatarDialog(favorite.id)" />
-                </div>
-                <div
-                    v-else
-                    style="
-                        padding-top: 25px;
-                        width: 100%;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: rgb(144, 147, 153);
-                    ">
-                    <span>No Data</span>
-                </div>
-            </el-collapse-item>
-            <el-collapse-item>
-                <template #title>
-                    <span style="font-weight: bold; font-size: 14px; margin-left: 10px">Local History</span>
-                    <span style="color: #909399; font-size: 12px; margin-left: 10px"
-                        >{{ avatarHistory.length }}/100</span
-                    >
-                    <el-tooltip placement="right" content="Clear" :teleported="false">
-                        <el-button
-                            size="small"
-                            :icon="Delete"
-                            circle
-                            style="margin-left: 5px"
-                            @click.stop="promptClearAvatarHistory"></el-button>
-                    </el-tooltip>
-                </template>
-                <div v-if="avatarHistory.length" class="x-friend-list" style="margin-top: 10px">
-                    <FavoritesAvatarLocalHistoryItem
-                        v-for="favorite in avatarHistory"
-                        :key="favorite.id"
-                        style="display: inline-block; width: 300px; margin-right: 15px"
-                        :favorite="favorite"
-                        @click="showAvatarDialog(favorite.id)" />
-                </div>
-                <div
-                    v-else
-                    style="
-                        padding-top: 25px;
-                        width: 100%;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: rgb(144, 147, 153);
-                    ">
-                    <span>No Data</span>
-                </div>
-            </el-collapse-item>
-            <span style="display: block; margin-top: 20px">{{ t('view.favorite.avatars.local_favorites') }}</span>
-            <br />
-            <el-button size="small" :disabled="!isLocalUserVrcPlusSupporter" @click="promptNewLocalAvatarFavoriteGroup">
-                {{ t('view.favorite.avatars.new_group') }}
-            </el-button>
-            <el-button
-                v-if="!refreshingLocalFavorites"
-                size="small"
-                style="margin-left: 5px"
-                @click="refreshLocalAvatarFavorites">
-                {{ t('view.favorite.avatars.refresh') }}
-            </el-button>
-            <el-button v-else size="small" style="margin-left: 5px" @click="cancelLocalAvatarRefresh">
-                <el-icon class="is-loading"><Loading /></el-icon>
-                <span>{{ t('view.favorite.avatars.cancel_refresh') }}</span>
-            </el-button>
-            <el-collapse-item v-for="group in localAvatarFavoriteGroups" :key="group">
-                <template #title v-if="localAvatarFavorites[group]">
-                    <span :style="{ fontWeight: 'bold', fontSize: '14px', marginLeft: '10px' }">{{ group }}</span>
-                    <span :style="{ color: '#909399', fontSize: '12px', marginLeft: '10px' }">{{
-                        localAvatarFavGroupLength(group)
-                    }}</span>
-                    <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
-                        <el-button
-                            size="small"
-                            :icon="Edit"
-                            circle
-                            :style="{ marginLeft: '5px' }"
-                            @click.stop="promptLocalAvatarFavoriteGroupRename(group)"></el-button>
-                    </el-tooltip>
-                    <el-tooltip placement="right" :content="t('view.favorite.delete_tooltip')" :teleported="false">
-                        <el-button
-                            size="small"
-                            :icon="Delete"
-                            circle
-                            :style="{ marginLeft: '5px' }"
-                            @click.stop="promptLocalAvatarFavoriteGroupDelete(group)"></el-button>
-                    </el-tooltip>
-                </template>
-                <div v-if="localAvatarFavorites[group]?.length" class="x-friend-list" :style="{ marginTop: '10px' }">
-                    <FavoritesAvatarItem
-                        v-for="favorite in localAvatarFavorites[group]"
-                        :key="favorite.id"
-                        is-local-favorite
-                        :style="{ display: 'inline-block', width: '300px', marginRight: '15px' }"
-                        :favorite="favorite"
-                        :group="group"
-                        @handle-select="favorite.$selected = $event"
-                        @click="showAvatarDialog(favorite.id)" />
-                </div>
-                <div
-                    v-else
-                    :style="{
-                        paddingTop: '25px',
-                        width: '100%',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        color: 'rgb(144, 147, 153)'
-                    }">
-                    <span>No Data</span>
-                </div>
-            </el-collapse-item>
-        </el-collapse>
-        <AvatarExportDialog v-model:avatarExportDialogVisible="avatarExportDialogVisible" />
-    </div>
-</template>
-
-<script setup>
-    import { Delete, Edit, Loading } from '@element-plus/icons-vue';
-    import { computed, onBeforeUnmount, ref } from 'vue';
-    import { ElMessageBox } from 'element-plus';
-    import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n';
-
-    import { useAppearanceSettingsStore, useAvatarStore, useFavoriteStore, useUserStore } from '../../../stores';
-    import { avatarRequest, favoriteRequest } from '../../../api';
-
-    import AvatarExportDialog from '../dialogs/AvatarExportDialog.vue';
-    import FavoritesAvatarItem from './FavoritesAvatarItem.vue';
-    import FavoritesAvatarLocalHistoryItem from './FavoritesAvatarLocalHistoryItem.vue';
-
-    import * as workerTimers from 'worker-timers';
-
-    const emit = defineEmits(['change-favorite-group-name', 'refresh-local-avatar-favorites']);
-
-    const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
-    const { setSortFavorites } = useAppearanceSettingsStore();
-    const { favoriteAvatars, favoriteAvatarGroups, localAvatarFavorites } = storeToRefs(useFavoriteStore());
-    const {
-        showAvatarImportDialog,
-        localAvatarFavGroupLength,
-        deleteLocalAvatarFavoriteGroup,
-        renameLocalAvatarFavoriteGroup,
-        newLocalAvatarFavoriteGroup,
-        localAvatarFavoritesList,
-        localAvatarFavoriteGroups
-    } = useFavoriteStore();
-    const { avatarHistory } = storeToRefs(useAvatarStore());
-    const { promptClearAvatarHistory, showAvatarDialog, applyAvatar } = useAvatarStore();
-    const { isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
-    const { t } = useI18n();
-
-    const avatarExportDialogVisible = ref(false);
-    const avatarFavoriteSearch = ref('');
-    const avatarFavoriteSearchResults = ref([]);
-    const refreshingLocalFavorites = ref(false);
-    const worker = ref(null);
-    const refreshCancelToken = ref(null);
-
-    const sortFav = computed({
-        get() {
-            return sortFavorites.value;
-        },
-        set() {
-            setSortFavorites();
-        }
-    });
-
-    const groupedByGroupKeyFavoriteAvatars = computed(() => {
-        const groupedByGroupKeyFavoriteAvatars = {};
-        favoriteAvatars.value.forEach((avatar) => {
-            if (avatar.groupKey) {
-                if (!groupedByGroupKeyFavoriteAvatars[avatar.groupKey]) {
-                    groupedByGroupKeyFavoriteAvatars[avatar.groupKey] = [];
-                }
-                groupedByGroupKeyFavoriteAvatars[avatar.groupKey].push(avatar);
-            }
-        });
-
-        return groupedByGroupKeyFavoriteAvatars;
-    });
-
-    function searchAvatarFavorites() {
-        let ref = null;
-        const search = avatarFavoriteSearch.value.toLowerCase();
-        if (search.length < 3) {
-            avatarFavoriteSearchResults.value = [];
-            return;
-        }
-
-        const results = [];
-        for (let i = 0; i < localAvatarFavoriteGroups.length; ++i) {
-            const group = localAvatarFavoriteGroups[i];
-            if (!localAvatarFavorites.value[group]) {
-                continue;
-            }
-            for (let j = 0; j < localAvatarFavorites.value[group].length; ++j) {
-                ref = localAvatarFavorites.value[group][j];
-                if (
-                    !ref ||
-                    typeof ref.id === 'undefined' ||
-                    typeof ref.name === 'undefined' ||
-                    typeof ref.authorName === 'undefined'
-                ) {
-                    continue;
-                }
-                if (ref.name.toLowerCase().includes(search) || ref.authorName.toLowerCase().includes(search)) {
-                    if (!results.some((r) => r.id === ref.id)) {
-                        results.push(ref);
-                    }
-                }
-            }
-        }
-
-        for (let i = 0; i < favoriteAvatars.value.length; ++i) {
-            ref = favoriteAvatars.value[i].ref;
-            if (
-                !ref ||
-                typeof ref.id === 'undefined' ||
-                typeof ref.name === 'undefined' ||
-                typeof ref.authorName === 'undefined'
-            ) {
-                continue;
-            }
-            if (ref.name.toLowerCase().includes(search) || ref.authorName.toLowerCase().includes(search)) {
-                if (!results.some((r) => r.id === ref.id)) {
-                    results.push(ref);
-                }
-            }
-        }
-
-        avatarFavoriteSearchResults.value = results;
-    }
-
-    function clearFavoriteGroup(ctx) {
-        ElMessageBox.confirm('Continue? Clear Group', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    favoriteRequest.clearFavoriteGroup({
-                        type: ctx.type,
-                        group: ctx.name
-                    });
-                }
-            })
-            .catch(() => {});
-    }
-
-    function showAvatarExportDialog() {
-        avatarExportDialogVisible.value = true;
-    }
-
-    function changeFavoriteGroupName(group) {
-        emit('change-favorite-group-name', group);
-    }
-
-    function promptNewLocalAvatarFavoriteGroup() {
-        ElMessageBox.prompt(
-            t('prompt.new_local_favorite_group.description'),
-            t('prompt.new_local_favorite_group.header'),
-            {
-                distinguishCancelAndClose: true,
-                confirmButtonText: t('prompt.new_local_favorite_group.ok'),
-                cancelButtonText: t('prompt.new_local_favorite_group.cancel'),
-                inputPattern: /\S+/,
-                inputErrorMessage: t('prompt.new_local_favorite_group.input_error')
-            }
-        )
-            .then(({ value }) => {
-                if (value) {
-                    newLocalAvatarFavoriteGroup(value);
-                }
-            })
-            .catch(() => {});
-    }
-
-    function promptLocalAvatarFavoriteGroupRename(group) {
-        ElMessageBox.prompt(
-            t('prompt.local_favorite_group_rename.description'),
-            t('prompt.local_favorite_group_rename.header'),
-            {
-                distinguishCancelAndClose: true,
-                confirmButtonText: t('prompt.local_favorite_group_rename.save'),
-                cancelButtonText: t('prompt.local_favorite_group_rename.cancel'),
-                inputPattern: /\S+/,
-                inputErrorMessage: t('prompt.local_favorite_group_rename.input_error'),
-                inputValue: group
-            }
-        )
-            .then(({ value }) => {
-                if (value) {
-                    renameLocalAvatarFavoriteGroup(value, group);
-                }
-            })
-            .catch(() => {});
-    }
-
-    function promptLocalAvatarFavoriteGroupDelete(group) {
-        ElMessageBox.confirm(`Delete Group? ${group}`, 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    deleteLocalAvatarFavoriteGroup(group);
-                }
-            })
-            .catch(() => {});
-    }
-
-    async function refreshLocalAvatarFavorites() {
-        if (refreshingLocalFavorites.value) {
-            return;
-        }
-        refreshingLocalFavorites.value = true;
-        const token = {
-            cancelled: false,
-            resolve: null
-        };
-        refreshCancelToken.value = token;
-        try {
-            for (const avatarId of localAvatarFavoritesList) {
-                if (token.cancelled) {
-                    break;
-                }
-                try {
-                    const args = await avatarRequest.getAvatar({
-                        avatarId
-                    });
-                    applyAvatar(args.json);
-                } catch (err) {
-                    console.error(err);
-                }
-                if (token.cancelled) {
-                    break;
-                }
-                await new Promise((resolve) => {
-                    token.resolve = resolve;
-                    worker.value = workerTimers.setTimeout(() => {
-                        worker.value = null;
-                        resolve();
-                    }, 1000);
-                });
-            }
-        } finally {
-            if (worker.value) {
-                workerTimers.clearTimeout(worker.value);
-                worker.value = null;
-            }
-            if (refreshCancelToken.value === token) {
-                refreshCancelToken.value = null;
-            }
-            refreshingLocalFavorites.value = false;
-        }
-    }
-
-    function cancelLocalAvatarRefresh() {
-        if (!refreshingLocalFavorites.value) {
-            return;
-        }
-        if (refreshCancelToken.value) {
-            refreshCancelToken.value.cancelled = true;
-            if (typeof refreshCancelToken.value.resolve === 'function') {
-                refreshCancelToken.value.resolve();
-            }
-        }
-        if (worker.value) {
-            workerTimers.clearTimeout(worker.value);
-            worker.value = null;
-        }
-        refreshingLocalFavorites.value = false;
-    }
-
-    onBeforeUnmount(() => {
-        cancelLocalAvatarRefresh();
-    });
-</script>
diff --git a/src/views/Favorites/components/FavoritesFriendItem.vue b/src/views/Favorites/components/FavoritesFriendItem.vue
index e5faae7a..6ea9554d 100644
--- a/src/views/Favorites/components/FavoritesFriendItem.vue
+++ b/src/views/Favorites/components/FavoritesFriendItem.vue
@@ -1,85 +1,134 @@
 <template>
-    <div @click="$emit('click')">
-        <div class="x-friend-item">
-            <template v-if="favorite.ref">
-                <div class="avatar" :class="userStatusClass(favorite.ref)">
+    <div :class="cardClasses" @click="$emit('click')">
+        <template v-if="favorite.ref">
+            <div class="favorites-search-card__content">
+                <div class="favorites-search-card__avatar">
                     <img :src="userImage(favorite.ref, true)" loading="lazy" />
                 </div>
-                <div class="detail">
-                    <span
-                        class="name"
-                        :style="{ color: favorite.ref.$userColour }"
-                        v-text="favorite.ref.displayName"></span>
-                    <Location
-                        class="extra"
-                        v-if="favorite.ref.location !== 'offline'"
-                        :location="favorite.ref.location"
-                        :traveling="favorite.ref.travelingToLocation"
-                        :link="false" />
-                    <span v-else v-text="favorite.ref.statusDescription"></span>
+                <div class="favorites-search-card__detail">
+                    <div class="favorites-search-card__title">
+                        <span class="name" :style="displayNameStyle">{{ favorite.ref.displayName }}</span>
+                    </div>
+                    <div v-if="favorite.ref.location !== 'offline'" class="favorites-search-card__location">
+                        <Location
+                            :location="favorite.ref.location"
+                            :traveling="favorite.ref.travelingToLocation"
+                            :link="false" />
+                    </div>
+                    <span v-else class="extra">{{ favorite.ref.statusDescription }}</span>
                 </div>
-                <div v-if="editFavoritesMode">
-                    <FavoritesMoveDropdown
-                        :favoriteGroup="favoriteFriendGroups"
-                        :currentGroup="group"
-                        :currentFavorite="favorite"
-                        type="friend" />
-                    <el-button type="text" size="small" style="margin-left: 5px" @click.stop>
-                        <el-checkbox v-model="favorite.$selected"></el-checkbox>
+            </div>
+            <div class="favorites-search-card__actions">
+                <template v-if="editMode">
+                    <div class="favorites-search-card__action favorites-search-card__action--checkbox" @click.stop>
+                        <el-checkbox v-model="isSelected"></el-checkbox>
+                    </div>
+                    <div class="favorites-search-card__action-group">
+                        <div class="favorites-search-card__action favorites-search-card__action--full" @click.stop>
+                            <FavoritesMoveDropdown
+                                :favoriteGroup="favoriteFriendGroups"
+                                :currentGroup="group"
+                                :currentFavorite="favorite"
+                                class="favorites-search-card__dropdown"
+                                type="friend" />
+                        </div>
+                        <div class="favorites-search-card__action">
+                            <el-tooltip placement="left" :content="t('view.favorite.unfavorite_tooltip')">
+                                <el-button
+                                    size="small"
+                                    circle
+                                    class="favorites-search-card__action-btn"
+                                    type="default"
+                                    @click.stop="handleDeleteFavorite">
+                                    <i class="ri-delete-bin-line"></i>
+                                </el-button>
+                            </el-tooltip>
+                        </div>
+                    </div>
+                </template>
+                <template v-else>
+                    <div class="favorites-search-card__action">
+                        <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')">
+                            <el-button
+                                size="small"
+                                :icon="Star"
+                                circle
+                                class="favorites-search-card__action-btn"
+                                @click.stop="showFavoriteDialog('friend', favorite.id)" />
+                        </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">
+                    <span class="name">{{ favorite.name || favorite.id }}</span>
+                </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>
-
-                <template v-else>
-                    <el-tooltip placement="right" :content="t('view.favorite.unfavorite_tooltip')" :teleported="false">
-                        <el-button
-                            type="default"
-                            :icon="Star"
-                            size="small"
-                            circle
-                            style="margin-left: 5px"
-                            @click.stop="showFavoriteDialog('friend', favorite.id)"></el-button>
-                    </el-tooltip>
-                </template>
-            </template>
-            <template v-else>
-                <div class="avatar"></div>
-                <div class="detail">
-                    <span v-text="favorite.name || favorite.id"></span>
-                </div>
-                <el-button
-                    type="text"
-                    :icon="Close"
-                    size="small"
-                    style="margin-left: 5px"
-                    @click.stop="deleteFavorite(favorite.id)"></el-button>
-            </template>
-        </div>
+            </div>
+        </template>
     </div>
 </template>
 
 <script setup>
-    import { Close, Star } from '@element-plus/icons-vue';
+    import { Star } from '@element-plus/icons-vue';
+    import { computed } from 'vue';
     import { storeToRefs } from 'pinia';
     import { useI18n } from 'vue-i18n';
 
-    import { userImage, userStatusClass } from '../../../shared/utils';
     import { favoriteRequest } from '../../../api';
     import { useFavoriteStore } from '../../../stores';
+    import { userImage } from '../../../shared/utils';
 
     import FavoritesMoveDropdown from './FavoritesMoveDropdown.vue';
 
-    defineProps({
+    const props = defineProps({
         favorite: { type: Object, required: true },
-        group: { type: Object, required: true }
+        group: { type: Object, default: null },
+        editMode: { type: Boolean, default: false },
+        selected: { type: Boolean, default: false }
     });
 
-    defineEmits(['click']);
+    const emit = defineEmits(['click', 'toggle-select']);
 
-    const { favoriteFriendGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
+    const { favoriteFriendGroups } = storeToRefs(useFavoriteStore());
     const { showFavoriteDialog } = useFavoriteStore();
     const { t } = useI18n();
 
-    function deleteFavorite(objectId) {
-        favoriteRequest.deleteFavorite({ objectId });
+    const isSelected = computed({
+        get: () => props.selected,
+        set: (value) => emit('toggle-select', value)
+    });
+
+    const cardClasses = computed(() => [
+        'favorites-search-card',
+        'favorites-search-card--friend',
+        {
+            'is-selected': props.selected,
+            'is-edit-mode': props.editMode
+        }
+    ]);
+
+    const displayNameStyle = computed(() => {
+        if (props.favorite?.ref?.$userColour) {
+            return {
+                color: props.favorite.ref.$userColour
+            };
+        }
+        return {};
+    });
+
+    function handleDeleteFavorite() {
+        favoriteRequest.deleteFavorite({
+            objectId: props.favorite.id
+        });
     }
 </script>
diff --git a/src/views/Favorites/components/FavoritesFriendTab.vue b/src/views/Favorites/components/FavoritesFriendTab.vue
deleted file mode 100644
index 71e0f256..00000000
--- a/src/views/Favorites/components/FavoritesFriendTab.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<template>
-    <div>
-        <div style="display: flex; align-items: center; justify-content: space-between">
-            <div>
-                <el-button size="small" @click="showFriendExportDialog">{{ t('view.favorite.export') }}</el-button>
-                <el-button size="small" style="margin-left: 5px" @click="showFriendImportDialog">{{
-                    t('view.favorite.import')
-                }}</el-button>
-            </div>
-            <div style="display: flex; align-items: center; font-size: 13px; margin-right: 10px">
-                <span class="name" style="margin-right: 5px; line-height: 10px">{{ t('view.favorite.sort_by') }}</span>
-                <el-radio-group v-model="sortFav">
-                    <el-radio :label="false">{{
-                        t('view.settings.appearance.appearance.sort_favorite_by_name')
-                    }}</el-radio>
-                    <el-radio :label="true">{{
-                        t('view.settings.appearance.appearance.sort_favorite_by_date')
-                    }}</el-radio>
-                </el-radio-group>
-            </div>
-        </div>
-        <span style="display: block; margin-top: 30px">{{ t('view.favorite.avatars.vrchat_favorites') }}</span>
-        <el-collapse style="border: 0">
-            <el-collapse-item v-for="group in favoriteFriendGroups" :key="group.name">
-                <template #title>
-                    <span
-                        style="font-weight: bold; font-size: 14px; margin-left: 10px"
-                        v-text="group.displayName"></span>
-                    <span style="color: #909399; font-size: 12px; margin-left: 10px"
-                        >{{ group.count }}/{{ group.capacity }}</span
-                    >
-                    <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
-                        <el-button
-                            size="small"
-                            :icon="Edit"
-                            circle
-                            style="margin-left: 10px"
-                            @click.stop="changeFavoriteGroupName(group)"></el-button>
-                    </el-tooltip>
-                    <el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')" :teleported="false">
-                        <el-button
-                            size="small"
-                            :icon="Delete"
-                            circle
-                            style="margin-left: 5px"
-                            @click.stop="clearFavoriteGroup(group)"></el-button>
-                    </el-tooltip>
-                </template>
-                <div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
-                    <FavoritesFriendItem
-                        v-for="favorite in groupedByGroupKeyFavoriteFriends[group.key]"
-                        :key="favorite.id"
-                        style="display: inline-block; width: 300px; margin-right: 15px"
-                        :favorite="favorite"
-                        :group="group"
-                        @click="showUserDialog(favorite.id)" />
-                </div>
-                <div
-                    v-else
-                    style="
-                        padding-top: 25px;
-                        width: 100%;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: rgb(144, 147, 153);
-                    ">
-                    <span>No Data</span>
-                </div>
-            </el-collapse-item>
-        </el-collapse>
-        <FriendExportDialog v-model:friendExportDialogVisible="friendExportDialogVisible" />
-    </div>
-</template>
-
-<script setup>
-    import { Delete, Edit } from '@element-plus/icons-vue';
-    import { computed, ref } from 'vue';
-    import { ElMessageBox } from 'element-plus';
-    import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n';
-
-    import { useAppearanceSettingsStore, useFavoriteStore, useUserStore } from '../../../stores';
-    import { favoriteRequest } from '../../../api';
-
-    import FavoritesFriendItem from './FavoritesFriendItem.vue';
-    import FriendExportDialog from '../dialogs/FriendExportDialog.vue';
-
-    const emit = defineEmits(['change-favorite-group-name']);
-
-    const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
-    const { setSortFavorites } = useAppearanceSettingsStore();
-    const { showUserDialog } = useUserStore();
-    const { favoriteFriendGroups, groupedByGroupKeyFavoriteFriends } = storeToRefs(useFavoriteStore());
-    const { showFriendImportDialog } = useFavoriteStore();
-    const { t } = useI18n();
-
-    const friendExportDialogVisible = ref(false);
-
-    const sortFav = computed({
-        get() {
-            return sortFavorites.value;
-        },
-        set() {
-            setSortFavorites();
-        }
-    });
-
-    function showFriendExportDialog() {
-        friendExportDialogVisible.value = true;
-    }
-
-    function clearFavoriteGroup(ctx) {
-        ElMessageBox.confirm('Continue? Clear Group', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    favoriteRequest.clearFavoriteGroup({
-                        type: ctx.type,
-                        group: ctx.name
-                    });
-                }
-            })
-            .catch(() => {});
-    }
-
-    function changeFavoriteGroupName(group) {
-        emit('change-favorite-group-name', group);
-    }
-</script>
diff --git a/src/views/Favorites/components/FavoritesWorldItem.vue b/src/views/Favorites/components/FavoritesWorldItem.vue
index 3e911aa7..8303bb67 100644
--- a/src/views/Favorites/components/FavoritesWorldItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldItem.vue
@@ -1,68 +1,99 @@
 <template>
-    <div class="fav-world-item" @click="$emit('click')">
-        <div class="x-friend-item">
-            <template v-if="favorite.ref">
-                <div class="avatar" v-once>
-                    <img :src="smallThumbnail" loading="lazy" decoding="async" fetchpriority="low" />
+    <div :class="cardClasses" @click="$emit('click')">
+        <template v-if="favorite.ref">
+            <div class="favorites-search-card__content">
+                <div
+                    class="favorites-search-card__avatar"
+                    :class="{ 'is-empty': !favorite.ref.thumbnailImageUrl }"
+                    v-once>
+                    <img
+                        v-if="favorite.ref.thumbnailImageUrl"
+                        :src="smallThumbnail"
+                        loading="lazy"
+                        decoding="async"
+                        fetchpriority="low" />
                 </div>
-                <div class="detail" v-once>
-                    <span class="name">{{ props.favorite.ref.name }}</span>
-                    <span v-if="props.favorite.ref.occupants" class="extra">
-                        {{ props.favorite.ref.authorName }} ({{ props.favorite.ref.occupants }})
+                <div class="favorites-search-card__detail" v-once>
+                    <div class="favorites-search-card__title">
+                        <span class="name">{{ props.favorite.ref.name }}</span>
+                        <span
+                            v-if="favorite.deleted || favorite.ref.releaseStatus === 'private'"
+                            class="favorites-search-card__badges">
+                            <i
+                                v-if="favorite.deleted"
+                                :title="t('view.favorite.unavailable_tooltip')"
+                                class="ri-error-warning-line"></i>
+                            <i
+                                v-if="favorite.ref.releaseStatus === 'private'"
+                                :title="t('view.favorite.private')"
+                                class="ri-lock-line"></i>
+                        </span>
+                    </div>
+                    <span class="extra">
+                        {{ props.favorite.ref.authorName }}
+                        <template v-if="props.favorite.ref.occupants"> ({{ props.favorite.ref.occupants }}) </template>
                     </span>
-                    <span v-else class="extra">{{ props.favorite.ref.authorName }}</span>
                 </div>
-                <div v-if="editFavoritesMode">
-                    <FavoritesMoveDropdown
-                        :favoriteGroup="favoriteWorldGroups"
-                        :currentFavorite="props.favorite"
-                        :currentGroup="group"
-                        type="world" />
-                    <el-button type="text" size="small" @click.stop style="margin-left: 5px">
+            </div>
+            <div class="favorites-search-card__actions">
+                <template v-if="editMode">
+                    <div class="favorites-search-card__action favorites-search-card__action--checkbox" @click.stop>
                         <el-checkbox v-model="isSelected"></el-checkbox>
+                    </div>
+                    <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"
+                                :currentGroup="group"
+                                class="favorites-search-card__dropdown"
+                                type="world" />
+                        </div>
+                        <div class="favorites-search-card__action">
+                            <el-button
+                                size="small"
+                                circle
+                                class="favorites-search-card__action-btn"
+                                type="default"
+                                @click.stop="handleDeleteFavorite">
+                                <i class="ri-delete-bin-line"></i>
+                            </el-button>
+                        </div>
+                    </div>
+                </template>
+                <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>
+                    <i
+                        v-if="favorite.deleted"
+                        :title="t('view.favorite.unavailable_tooltip')"
+                        class="ri-error-warning-line"></i>
+                </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>
-                <template v-else>
-                    <i
-                        v-if="favorite.deleted"
-                        :title="t('view.favorite.unavailable_tooltip')"
-                        class="ri-error-warning-line"></i>
-                    <i
-                        v-if="favorite.ref.releaseStatus === 'private'"
-                        :title="t('view.favorite.private')"
-                        class="ri-lock-line"></i>
-                    <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
-                        size="small"
-                        circle
-                        style="margin-left: 5px"
-                        type="default"
-                        @click.stop="showFavoriteDialog('world', favorite.id)"
-                        ><i class="ri-delete-bin-line"></i
-                    ></el-button>
-                </template>
-            </template>
-            <template v-else>
-                <div class="avatar"></div>
-                <div class="detail" v-once>
-                    <span>{{ favorite.name || favorite.id }}</span>
-                    <i
-                        v-if="favorite.deleted"
-                        :title="t('view.favorite.unavailable_tooltip')"
-                        class="ri-error-warning-line"></i>
-                    <el-button type="text" size="small" style="margin-left: 5px" @click.stop="handleDeleteFavorite"
-                        ><i class="ri-delete-bin-line"></i
-                    ></el-button>
-                </div>
-            </template>
-        </div>
+            </div>
+        </template>
     </div>
 </template>
 
@@ -80,21 +111,31 @@
     const props = defineProps({
         group: [Object, String],
         favorite: Object,
-        isLocalFavorite: { type: Boolean, default: false }
+        isLocalFavorite: { type: Boolean, default: false },
+        editMode: { type: Boolean, default: false },
+        selected: { type: Boolean, default: false }
     });
 
-    const emit = defineEmits(['handle-select', 'remove-local-world-favorite', 'click']);
-    const { favoriteWorldGroups, editFavoritesMode } = storeToRefs(useFavoriteStore());
-    const { showFavoriteDialog } = useFavoriteStore();
+    const emit = defineEmits(['toggle-select', 'remove-local-world-favorite', 'click']);
+    const { favoriteWorldGroups } = storeToRefs(useFavoriteStore());
     const { newInstanceSelfInvite } = useInviteStore();
     const { t } = useI18n();
     const { canOpenInstanceInGame } = useInviteStore();
 
     const isSelected = computed({
-        get: () => props.favorite.$selected,
-        set: (value) => emit('handle-select', value)
+        get: () => props.selected,
+        set: (value) => emit('toggle-select', value)
     });
 
+    const cardClasses = computed(() => [
+        'favorites-search-card',
+        'favorites-search-card--world',
+        {
+            'is-selected': props.selected,
+            'is-edit-mode': props.editMode
+        }
+    ]);
+
     const smallThumbnail = computed(() => {
         const url = props.favorite.ref.thumbnailImageUrl?.replace('256', '128');
         return url || props.favorite.ref.thumbnailImageUrl;
@@ -119,11 +160,4 @@
     }
 </script>
 
-<style scoped>
-    .fav-world-item {
-        display: inline-block;
-        width: 300px;
-        margin-right: 15px;
-        height: 53px;
-    }
-</style>
+<style scoped></style>
diff --git a/src/views/Favorites/components/FavoritesWorldLocalItem.vue b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
index 00beffaa..ae66dd4e 100644
--- a/src/views/Favorites/components/FavoritesWorldLocalItem.vue
+++ b/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>
diff --git a/src/views/Favorites/components/FavoritesWorldTab.vue b/src/views/Favorites/components/FavoritesWorldTab.vue
deleted file mode 100644
index 2674d4ab..00000000
--- a/src/views/Favorites/components/FavoritesWorldTab.vue
+++ /dev/null
@@ -1,532 +0,0 @@
-<template>
-    <div>
-        <div style="display: flex; align-items: center; justify-content: space-between">
-            <div>
-                <el-button size="small" @click="showExportDialog">{{ t('view.favorite.export') }}</el-button>
-                <el-button size="small" style="margin-left: 5px" @click="showWorldImportDialog">{{
-                    t('view.favorite.import')
-                }}</el-button>
-            </div>
-            <div style="display: flex; align-items: center; font-size: 13px; margin-right: 10px">
-                <span class="name" style="margin-right: 5px; line-height: 10px">{{ t('view.favorite.sort_by') }}</span>
-                <el-radio-group v-model="sortFav" style="margin-right: 12px">
-                    <el-radio :label="false">{{
-                        t('view.settings.appearance.appearance.sort_favorite_by_name')
-                    }}</el-radio>
-                    <el-radio :label="true">{{
-                        t('view.settings.appearance.appearance.sort_favorite_by_date')
-                    }}</el-radio>
-                </el-radio-group>
-                <el-input
-                    v-model="worldFavoriteSearch"
-                    clearable
-                    size="small"
-                    :placeholder="t('view.favorite.worlds.search')"
-                    style="width: 200px"
-                    @input="searchWorldFavorites" />
-            </div>
-        </div>
-        <div class="x-friend-list" style="margin-top: 10px">
-            <div
-                v-for="favorite in worldFavoriteSearchResults"
-                :key="favorite.id"
-                style="display: inline-block; width: 300px; margin-right: 15px"
-                @click="showWorldDialog(favorite.id)">
-                <div class="x-friend-item">
-                    <template v-if="favorite.name">
-                        <div class="avatar">
-                            <img :src="favorite.thumbnailImageUrl" loading="lazy" />
-                        </div>
-                        <div class="detail">
-                            <span class="name" v-text="favorite.name"></span>
-                            <span v-if="favorite.occupants" class="extra"
-                                >{{ favorite.authorName }} ({{ favorite.occupants }})</span
-                            >
-                            <span v-else class="extra" v-text="favorite.authorName"></span>
-                        </div>
-                    </template>
-                    <template v-else>
-                        <div class="avatar"></div>
-                        <div class="detail">
-                            <span v-text="favorite.id"></span>
-                        </div>
-                    </template>
-                </div>
-            </div>
-        </div>
-        <span style="display: block; margin-top: 20px">{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
-        <el-collapse style="border: 0">
-            <el-collapse-item v-for="group in favoriteWorldGroups" :key="group.name">
-                <template #title>
-                    <div style="display: flex; align-items: center">
-                        <span
-                            style="font-weight: bold; font-size: 14px; margin-left: 10px"
-                            v-text="group.displayName" />
-                        <el-tag
-                            style="margin: 1px 0 0 5px"
-                            size="small"
-                            :type="userFavoriteWorldsStatusForFavTab(group.visibility)"
-                            effect="plain"
-                            >{{ group.visibility.charAt(0).toUpperCase() + group.visibility.slice(1) }}</el-tag
-                        >
-                        <span style="color: #909399; font-size: 12px; margin-left: 10px"
-                            >{{ group.count }}/{{ group.capacity }}</span
-                        ><el-tooltip
-                            placement="top"
-                            :content="t('view.favorite.visibility_tooltip')"
-                            :teleported="false">
-                            <el-dropdown trigger="click" size="small" style="margin-left: 10px" :persistent="false">
-                                <el-button type="default" :icon="View" size="small" circle @click.stop />
-                                <template #dropdown>
-                                    <el-dropdown-menu>
-                                        <template v-for="visibility in worldGroupVisibilityOptions" :key="visibility">
-                                            <el-dropdown-item
-                                                v-if="group.visibility !== visibility"
-                                                style="display: block; margin: 10px 0"
-                                                @click="changeWorldGroupVisibility(group.name, visibility)"
-                                                >{{
-                                                    visibility.charAt(0).toUpperCase() + visibility.slice(1)
-                                                }}</el-dropdown-item
-                                            >
-                                        </template>
-                                    </el-dropdown-menu>
-                                </template>
-                            </el-dropdown>
-                        </el-tooltip>
-                        <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
-                            <el-button
-                                size="small"
-                                :icon="Edit"
-                                circle
-                                style="margin-left: 5px"
-                                @click.stop="changeFavoriteGroupName(group)" />
-                        </el-tooltip>
-                        <el-tooltip placement="right" :content="t('view.favorite.clear_tooltip')" :teleported="false">
-                            <el-button
-                                size="small"
-                                :icon="Delete"
-                                circle
-                                style="margin-left: 5px"
-                                @click.stop="clearFavoriteGroup(group)" />
-                        </el-tooltip>
-                    </div>
-                </template>
-                <div v-if="group.count" class="x-friend-list" style="margin-top: 10px">
-                    <el-scrollbar height="700px" @end-reached="worldFavoritesLoadMore">
-                        <FavoritesWorldItem
-                            v-for="favorite in sliceWorldFavorites(group.key)"
-                            :key="favorite.id"
-                            :group="group"
-                            :favorite="favorite"
-                            @click="showWorldDialog(favorite.id)"
-                            @handle-select="favorite.$selected = $event" />
-                    </el-scrollbar>
-                </div>
-                <div
-                    v-else
-                    style="
-                        padding-top: 25px;
-                        width: 100%;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: rgb(144, 147, 153);
-                    ">
-                    <span>No Data</span>
-                </div>
-            </el-collapse-item>
-        </el-collapse>
-        <span style="display: block; margin-top: 20px">{{ t('view.favorite.worlds.local_favorites') }}</span>
-        <br />
-        <el-button size="small" @click="promptNewLocalWorldFavoriteGroup">{{
-            t('view.favorite.worlds.new_group')
-        }}</el-button>
-        <el-button
-            v-if="!refreshingLocalFavorites"
-            size="small"
-            style="margin-left: 5px"
-            @click="refreshLocalWorldFavorites"
-            >{{ t('view.favorite.worlds.refresh') }}</el-button
-        >
-        <el-button v-else size="small" style="margin-left: 5px" @click="cancelLocalWorldRefresh">
-            <el-icon style="margin-right: 5px"><Loading /></el-icon>
-            <span>{{ t('view.favorite.worlds.cancel_refresh') }}</span>
-        </el-button>
-        <el-collapse style="border: 0">
-            <el-collapse-item v-for="group in localWorldFavoriteGroups" :key="group">
-                <template #title>
-                    <span style="font-weight: bold; font-size: 14px; margin-left: 10px" v-text="group" />
-                    <span style="color: #909399; font-size: 12px; margin-left: 10px">{{
-                        localWorldFavGroupLength(group)
-                    }}</span>
-                    <el-tooltip placement="top" :content="t('view.favorite.rename_tooltip')" :teleported="false">
-                        <el-button
-                            size="small"
-                            :icon="Edit"
-                            circle
-                            style="margin-left: 10px"
-                            @click.stop="promptLocalWorldFavoriteGroupRename(group)" />
-                    </el-tooltip>
-                    <el-tooltip placement="right" :content="t('view.favorite.delete_tooltip')" :teleported="false">
-                        <el-button
-                            size="small"
-                            :icon="Delete"
-                            circle
-                            style="margin-left: 5px"
-                            @click.stop="promptLocalWorldFavoriteGroupDelete(group)" />
-                    </el-tooltip>
-                </template>
-                <div v-if="localWorldFavorites[group]?.length" class="x-friend-list" style="margin-top: 10px">
-                    <el-scrollbar height="700px" @end-reached="localWorldFavoritesLoadMore">
-                        <FavoritesWorldLocalItem
-                            v-for="favorite in sliceLocalWorldFavorites(group)"
-                            :key="favorite.id"
-                            :group="group"
-                            :favorite="favorite"
-                            @click="showWorldDialog(favorite.id)"
-                            @remove-local-world-favorite="removeLocalWorldFavorite"
-                    /></el-scrollbar>
-                </div>
-                <div
-                    v-else
-                    style="
-                        padding-top: 25px;
-                        width: 100%;
-                        display: flex;
-                        align-items: center;
-                        justify-content: center;
-                        color: rgb(144, 147, 153);
-                    ">
-                    <span>No Data</span>
-                </div>
-            </el-collapse-item>
-        </el-collapse>
-        <WorldExportDialog v-model:worldExportDialogVisible="worldExportDialogVisible" />
-    </div>
-</template>
-
-<script setup>
-    import { Delete, Edit, Loading, View } from '@element-plus/icons-vue';
-    import { computed, onBeforeUnmount, ref } from 'vue';
-    import { ElMessage, ElMessageBox } from 'element-plus';
-    import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n';
-
-    import { useAppearanceSettingsStore, useFavoriteStore, useWorldStore } from '../../../stores';
-    import { favoriteRequest, worldRequest } from '../../../api';
-
-    import FavoritesWorldItem from './FavoritesWorldItem.vue';
-    import FavoritesWorldLocalItem from './FavoritesWorldLocalItem.vue';
-    import WorldExportDialog from '../dialogs/WorldExportDialog.vue';
-
-    import * as workerTimers from 'worker-timers';
-
-    const emit = defineEmits([
-        'change-favorite-group-name',
-        'save-sort-favorites-option',
-        'refresh-local-world-favorite'
-    ]);
-
-    const { t } = useI18n();
-    const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
-    const { setSortFavorites } = useAppearanceSettingsStore();
-    const { favoriteWorlds, favoriteWorldGroups, localWorldFavorites } = storeToRefs(useFavoriteStore());
-    const {
-        showWorldImportDialog,
-        localWorldFavGroupLength,
-        deleteLocalWorldFavoriteGroup,
-        renameLocalWorldFavoriteGroup,
-        removeLocalWorldFavorite,
-        newLocalWorldFavoriteGroup,
-        handleFavoriteGroup,
-        localWorldFavoritesList,
-        localWorldFavoriteGroups
-    } = useFavoriteStore();
-    const { showWorldDialog } = useWorldStore();
-
-    const worldGroupVisibilityOptions = ref(['private', 'friends', 'public']);
-    const worldExportDialogVisible = ref(false);
-    const worldFavoriteSearch = ref('');
-    const worldFavoriteSearchResults = ref([]);
-    const sliceLocalWorldFavoritesLoadMoreNumber = ref(60);
-    const sliceWorldFavoritesLoadMoreNumber = ref(60);
-    const refreshingLocalFavorites = ref(false);
-    const worker = ref(null);
-    const refreshCancelToken = ref(null);
-
-    const sliceLocalWorldFavorites = computed(() => {
-        return (group) => {
-            return localWorldFavorites.value[group].slice(0, sliceLocalWorldFavoritesLoadMoreNumber.value);
-        };
-    });
-
-    const sliceWorldFavorites = computed(() => {
-        return (group) => {
-            const groupedByGroupKeyFavoriteWorlds = {};
-
-            favoriteWorlds.value.forEach((world) => {
-                if (world.groupKey) {
-                    if (!groupedByGroupKeyFavoriteWorlds[world.groupKey]) {
-                        groupedByGroupKeyFavoriteWorlds[world.groupKey] = [];
-                    }
-                    groupedByGroupKeyFavoriteWorlds[world.groupKey].push(world);
-                }
-            });
-
-            if (groupedByGroupKeyFavoriteWorlds[group]) {
-                return groupedByGroupKeyFavoriteWorlds[group].slice(0, sliceWorldFavoritesLoadMoreNumber.value);
-            }
-            return [];
-        };
-    });
-
-    const sortFav = computed({
-        get() {
-            return sortFavorites.value;
-        },
-        set() {
-            setSortFavorites();
-        }
-    });
-
-    function localWorldFavoritesLoadMore(direction) {
-        if (direction === 'bottom') {
-            sliceLocalWorldFavoritesLoadMoreNumber.value += 20;
-        }
-    }
-
-    function worldFavoritesLoadMore(direction) {
-        if (direction === 'bottom') {
-            sliceWorldFavoritesLoadMoreNumber.value += 20;
-        }
-    }
-
-    function showExportDialog() {
-        worldExportDialogVisible.value = true;
-    }
-
-    function userFavoriteWorldsStatusForFavTab(visibility) {
-        if (visibility === 'public') {
-            return 'primary';
-        }
-        if (visibility === 'friends') {
-            return 'success';
-        }
-        return 'info';
-    }
-
-    function changeWorldGroupVisibility(name, visibility) {
-        const params = {
-            type: 'world',
-            group: name,
-            visibility
-        };
-        favoriteRequest.saveFavoriteGroup(params).then((args) => {
-            handleFavoriteGroup({
-                json: args.json,
-                params: {
-                    favoriteGroupId: args.json.id
-                }
-            });
-            ElMessage({
-                message: 'Group visibility changed',
-                type: 'success'
-            });
-            return args;
-        });
-    }
-
-    function promptNewLocalWorldFavoriteGroup() {
-        ElMessageBox.prompt(
-            t('prompt.new_local_favorite_group.description'),
-            t('prompt.new_local_favorite_group.header'),
-            {
-                distinguishCancelAndClose: true,
-                confirmButtonText: t('prompt.new_local_favorite_group.ok'),
-                cancelButtonText: t('prompt.new_local_favorite_group.cancel'),
-                inputPattern: /\S+/,
-                inputErrorMessage: t('prompt.new_local_favorite_group.input_error')
-            }
-        )
-            .then(({ value }) => {
-                if (value) {
-                    newLocalWorldFavoriteGroup(value);
-                }
-            })
-            .catch(() => {});
-    }
-
-    function promptLocalWorldFavoriteGroupRename(group) {
-        ElMessageBox.prompt(
-            t('prompt.local_favorite_group_rename.description'),
-            t('prompt.local_favorite_group_rename.header'),
-            {
-                distinguishCancelAndClose: true,
-                confirmButtonText: t('prompt.local_favorite_group_rename.save'),
-                cancelButtonText: t('prompt.local_favorite_group_rename.cancel'),
-                inputPattern: /\S+/,
-                inputErrorMessage: t('prompt.local_favorite_group_rename.input_error'),
-                inputValue: group
-            }
-        )
-            .then(({ value }) => {
-                if (value) {
-                    renameLocalWorldFavoriteGroup(value, group);
-                }
-            })
-            .catch(() => {});
-    }
-
-    function promptLocalWorldFavoriteGroupDelete(group) {
-        ElMessageBox.confirm(`Delete Group? ${group}`, 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    deleteLocalWorldFavoriteGroup(group);
-                }
-            })
-            .catch(() => {});
-    }
-
-    function clearFavoriteGroup(ctx) {
-        ElMessageBox.confirm('Continue? Clear Group', 'Confirm', {
-            confirmButtonText: 'Confirm',
-            cancelButtonText: 'Cancel',
-            type: 'info'
-        })
-            .then((action) => {
-                if (action === 'confirm') {
-                    favoriteRequest.clearFavoriteGroup({
-                        type: ctx.type,
-                        group: ctx.name
-                    });
-                }
-            })
-            .catch(() => {});
-    }
-
-    function searchWorldFavorites(worldFavoriteSearch) {
-        let ref = null;
-        const search = worldFavoriteSearch.toLowerCase();
-        if (search.length < 3) {
-            worldFavoriteSearchResults.value = [];
-            return;
-        }
-
-        const results = [];
-        for (let i = 0; i < localWorldFavoriteGroups.length; ++i) {
-            const group = localWorldFavoriteGroups[i];
-            if (!localWorldFavorites.value[group]) {
-                continue;
-            }
-            for (let j = 0; j < localWorldFavorites.value[group].length; ++j) {
-                ref = localWorldFavorites.value[group][j];
-                if (
-                    !ref ||
-                    typeof ref.id === 'undefined' ||
-                    typeof ref.name === 'undefined' ||
-                    typeof ref.authorName === 'undefined'
-                ) {
-                    continue;
-                }
-                if (ref.name.toLowerCase().includes(search) || ref.authorName.toLowerCase().includes(search)) {
-                    if (!results.some((r) => r.id === ref.id)) {
-                        results.push(ref);
-                    }
-                }
-            }
-        }
-
-        for (let i = 0; i < favoriteWorlds.value.length; ++i) {
-            ref = favoriteWorlds.value[i].ref;
-            if (
-                !ref ||
-                typeof ref.id === 'undefined' ||
-                typeof ref.name === 'undefined' ||
-                typeof ref.authorName === 'undefined'
-            ) {
-                continue;
-            }
-            if (ref.name.toLowerCase().includes(search) || ref.authorName.toLowerCase().includes(search)) {
-                if (!results.some((r) => r.id === ref.id)) {
-                    results.push(ref);
-                }
-            }
-        }
-
-        worldFavoriteSearchResults.value = results;
-    }
-
-    function changeFavoriteGroupName(group) {
-        emit('change-favorite-group-name', group);
-    }
-
-    async function refreshLocalWorldFavorites() {
-        if (refreshingLocalFavorites.value) {
-            return;
-        }
-        refreshingLocalFavorites.value = true;
-        const token = {
-            cancelled: false,
-            resolve: null
-        };
-        refreshCancelToken.value = token;
-        try {
-            for (const worldId of localWorldFavoritesList) {
-                if (token.cancelled) {
-                    break;
-                }
-                try {
-                    await worldRequest.getWorld({
-                        worldId
-                    });
-                } catch (err) {
-                    console.error(err);
-                }
-                if (token.cancelled) {
-                    break;
-                }
-                await new Promise((resolve) => {
-                    token.resolve = resolve;
-                    worker.value = workerTimers.setTimeout(() => {
-                        worker.value = null;
-                        resolve();
-                    }, 1000);
-                });
-            }
-        } finally {
-            if (worker.value) {
-                workerTimers.clearTimeout(worker.value);
-                worker.value = null;
-            }
-            if (refreshCancelToken.value === token) {
-                refreshCancelToken.value = null;
-            }
-            refreshingLocalFavorites.value = false;
-        }
-    }
-
-    function cancelLocalWorldRefresh() {
-        if (!refreshingLocalFavorites.value) {
-            return;
-        }
-        if (refreshCancelToken.value) {
-            refreshCancelToken.value.cancelled = true;
-            if (typeof refreshCancelToken.value.resolve === 'function') {
-                refreshCancelToken.value.resolve();
-            }
-        }
-        if (worker.value) {
-            workerTimers.clearTimeout(worker.value);
-            worker.value = null;
-        }
-        refreshingLocalFavorites.value = false;
-    }
-
-    onBeforeUnmount(() => {
-        cancelLocalWorldRefresh();
-    });
-</script>