From bc5db58b8995e09fb6965f0f10233991b708d93d Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Mon, 9 Mar 2026 12:37:49 +0900
Subject: [PATCH] refactor favorites tab

---
 eslint.config.mjs                             |    7 +-
 src/views/Favorites/FavoritesAvatar.vue       | 1091 +++--------------
 src/views/Favorites/FavoritesFriend.vue       | 1023 ++--------------
 src/views/Favorites/FavoritesWorld.vue        | 1047 ++--------------
 .../components/FavoritesAvatarItem.vue        |   35 +-
 .../FavoritesAvatarLocalHistoryItem.vue       |   19 +-
 .../components/FavoritesContentHeader.vue     |   54 +
 .../components/FavoritesFriendItem.vue        |   35 +-
 .../components/FavoritesMoveDropdown.vue      |    2 +-
 .../Favorites/components/FavoritesToolbar.vue |  118 ++
 .../components/FavoritesWorldItem.vue         |   93 +-
 .../components/FavoritesWorldLocalItem.vue    |   33 +-
 .../__tests__/FavoritesWorldItem.test.js      |  175 +++
 .../Favorites/components/favorites-card.css   |  119 ++
 .../__tests__/useFavoritesGroupPanel.test.js  |   86 ++
 .../composables/useFavoritesGroupPanel.js     |  206 ++++
 .../composables/useFavoritesLocalGroups.js    |   64 +
 .../composables/useFavoritesSplitter.js       |  176 +++
 src/views/Favorites/favorites-layout.css      |   76 ++
 19 files changed, 1590 insertions(+), 2869 deletions(-)
 create mode 100644 src/views/Favorites/components/FavoritesContentHeader.vue
 create mode 100644 src/views/Favorites/components/FavoritesToolbar.vue
 create mode 100644 src/views/Favorites/components/__tests__/FavoritesWorldItem.test.js
 create mode 100644 src/views/Favorites/components/favorites-card.css
 create mode 100644 src/views/Favorites/composables/__tests__/useFavoritesGroupPanel.test.js
 create mode 100644 src/views/Favorites/composables/useFavoritesGroupPanel.js
 create mode 100644 src/views/Favorites/composables/useFavoritesLocalGroups.js
 create mode 100644 src/views/Favorites/composables/useFavoritesSplitter.js
 create mode 100644 src/views/Favorites/favorites-layout.css

diff --git a/eslint.config.mjs b/eslint.config.mjs
index 2325f807..a34c061a 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -101,7 +101,12 @@ export default defineConfig([
         }
     },
     jsdoc({
-        config: 'flat/recommended'
+        config: 'flat/recommended',
+        rules: {
+            'jsdoc/require-param-description': 'off',
+            'jsdoc/require-returns-description': 'off',
+            'jsdoc/reject-function-type': 'off'
+        }
     }),
     {
         ignores: [
diff --git a/src/views/Favorites/FavoritesAvatar.vue b/src/views/Favorites/FavoritesAvatar.vue
index 71a181eb..2a655c69 100644
--- a/src/views/Favorites/FavoritesAvatar.vue
+++ b/src/views/Favorites/FavoritesAvatar.vue
@@ -1,96 +1,37 @@
 <template>
     <div class="x-container">
-        <div class="favorites-page">
-            <div class="favorites-toolbar">
-                <div>
-                    <Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
-                        <SelectTrigger size="sm" class="favorites-toolbar__select">
-                            <span class="flex items-center gap-2">
-                                <ArrowUpDown class="h-4 w-4" />
-                                <SelectValue
-                                    :placeholder="t('view.settings.appearance.appearance.sort_favorite_by_name')" />
-                            </span>
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem
-                                    :value="false"
-                                    :text-value="t('view.settings.appearance.appearance.sort_favorite_by_name')">
-                                    {{ t('view.settings.appearance.appearance.sort_favorite_by_name') }}
-                                </SelectItem>
-                                <SelectItem
-                                    :value="true"
-                                    :text-value="t('view.settings.appearance.appearance.sort_favorite_by_date')">
-                                    {{ t('view.settings.appearance.appearance.sort_favorite_by_date') }}
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                </div>
-                <div class="favorites-toolbar__right">
-                    <InputGroupSearch
-                        v-model="avatarFavoriteSearch"
-                        class="favorites-toolbar__search"
-                        :placeholder="t('view.favorite.avatars.search')"
-                        @input="searchAvatarFavorites" />
-                    <DropdownMenu v-model:open="avatarToolbarMenuOpen">
-                        <DropdownMenuTrigger as-child>
-                            <Button class="rounded-full" size="icon-sm" variant="ghost"> <Ellipsis /> </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent class="favorites-dropdown">
-                            <li class="favorites-dropdown__control" @click.stop>
-                                <div class="favorites-dropdown__control-header">
-                                    <span>{{ t('view.friends_locations.scale') }}</span>
-                                    <span class="favorites-dropdown__control-value">{{ avatarCardScalePercent }}%</span>
-                                </div>
-                                <Slider
-                                    v-model="avatarCardScaleValue"
-                                    class="favorites-dropdown__slider"
-                                    :min="avatarCardScaleSlider.min"
-                                    :max="avatarCardScaleSlider.max"
-                                    :step="avatarCardScaleSlider.step" />
-                            </li>
-                            <li class="favorites-dropdown__control" @click.stop>
-                                <div class="favorites-dropdown__control-header">
-                                    <span>{{ t('view.friends_locations.spacing') }}</span>
-                                    <span class="favorites-dropdown__control-value">
-                                        {{ avatarCardSpacingPercent }}%
-                                    </span>
-                                </div>
-                                <Slider
-                                    v-model="avatarCardSpacingValue"
-                                    class="favorites-dropdown__slider"
-                                    :min="avatarCardSpacingSlider.min"
-                                    :max="avatarCardSpacingSlider.max"
-                                    :step="avatarCardSpacingSlider.step" />
-                            </li>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem @click="handleAvatarImportClick">
-                                {{ t('view.favorite.import') }}
-                            </DropdownMenuItem>
-                            <DropdownMenuItem @click="handleAvatarExportClick">
-                                {{ t('view.favorite.export') }}
-                            </DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                </div>
-            </div>
+        <div class="flex flex-col h-full min-h-0 pb-0">
+            <FavoritesToolbar
+                :sort-favorites="sortFavorites"
+                v-model:search-query="avatarFavoriteSearch"
+                :search-placeholder="t('view.favorite.avatars.search')"
+                v-model:toolbar-menu-open="avatarToolbarMenuOpen"
+                v-model:card-scale-value="avatarCardScaleValue"
+                :card-scale-percent="avatarCardScalePercent"
+                :card-scale-slider="avatarCardScaleSlider"
+                v-model:card-spacing-value="avatarCardSpacingValue"
+                :card-spacing-percent="avatarCardSpacingPercent"
+                :card-spacing-slider="avatarCardSpacingSlider"
+                @update:sort-favorites="handleSortFavoritesChange"
+                @search="searchAvatarFavorites"
+                @import="handleAvatarImportClick"
+                @export="handleAvatarExportClick" />
             <ResizablePanelGroup
-                ref="avatarSplitterGroupRef"
+                ref="splitterGroupRef"
                 direction="horizontal"
-                class="favorites-splitter"
-                @layout="handleAvatarSplitterLayout">
+                class="flex-1 min-h-0 favorites-splitter"
+                @layout="handleLayout">
                 <ResizablePanel
-                    ref="avatarSplitterPanelRef"
-                    :default-size="avatarSplitterDefaultSize"
-                    :min-size="avatarSplitterMinSize"
-                    :max-size="avatarSplitterMaxSize"
+                    ref="splitterPanelRef"
+                    :default-size="splitterDefaultSize"
+                    :min-size="splitterMinSize"
+                    :max-size="splitterMaxSize"
                     :collapsed-size="0"
                     collapsible
                     :order="1">
-                    <div class="favorites-groups-panel">
-                        <div class="group-section">
-                            <div class="group-section__header">
+                    <div class="h-full pr-2 overflow-auto flex flex-col gap-3">
+                        <div class="flex flex-col gap-2">
+                            <div class="flex items-center justify-between font-semibold text-sm mb-[9px]">
                                 <span>{{ t('view.favorite.avatars.vrchat_favorites') }}</span>
                                 <TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
                                     <Button
@@ -104,7 +45,7 @@
                                     </Button>
                                 </TooltipWrapper>
                             </div>
-                            <div class="group-section__list">
+                            <div class="flex flex-col gap-2">
                                 <template v-if="favoriteAvatarGroups.length">
                                     <div
                                         v-for="group in favoriteAvatarGroups"
@@ -115,15 +56,13 @@
                                             { '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 class="flex items-start justify-between mb-1 text-[13px]">
+                                            <span class="font-semibold">{{ group.displayName }}</span>
+                                            <span class="text-xs">{{ group.count }}/{{ group.capacity }}</span>
                                         </div>
-                                        <div class="group-item__bottom">
-                                            <span class="group-item__visibility">
-                                                <span class="group-item__visibility-text">{{
+                                        <div class="flex items-center justify-between gap-2">
+                                            <span class="flex items-center gap-1.5">
+                                                <span class="text-[11px] text-muted-foreground">{{
                                                     t(`view.favorite.visibility.${group.visibility}`)
                                                 }}</span>
                                             </span>
@@ -185,22 +124,22 @@
                                         :key="group.key"
                                         :class="[
                                             'group-item hover:shadow-sm',
-                                            'group-item--placeholder',
+                                            'pointer-events-none opacity-70',
                                             { '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 class="flex items-start justify-between mb-1 text-[13px]">
+                                            <span class="font-semibold">{{ group.displayName }}</span>
+                                            <span class="text-xs">--/--</span>
                                         </div>
-                                        <div class="group-item__bottom">
-                                            <div class="group-item__placeholder-tag rounded-full"></div>
+                                        <div class="flex items-center justify-between gap-2">
+                                            <div class="w-16 h-[18px] rounded-full"></div>
                                         </div>
                                     </div>
                                 </template>
                             </div>
                         </div>
-                        <div class="group-section">
-                            <div class="group-section__header">
+                        <div class="flex flex-col gap-2">
+                            <div class="flex items-center justify-between font-semibold text-sm mb-[9px]">
                                 <span>{{ t('view.favorite.avatars.local_favorites') }}</span>
                                 <template v-if="!refreshingLocalFavorites">
                                     <Button
@@ -217,7 +156,7 @@
                                     {{ t('view.favorite.avatars.cancel_refresh') }}
                                 </Button>
                             </div>
-                            <div class="group-section__list">
+                            <div class="flex flex-col gap-2">
                                 <template v-if="localAvatarFavoriteGroups.length">
                                     <div
                                         v-for="group in localAvatarFavoriteGroups"
@@ -227,12 +166,10 @@
                                             { '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>
+                                        <div class="flex items-start justify-between mb-1 text-[13px]">
+                                            <span class="font-semibold">{{ group }}</span>
+                                            <div class="flex items-center flex-col">
+                                                <span class="text-xs">{{ localAvatarFavGroupLength(group) }}</span>
                                                 <DropdownMenu
                                                     :open="activeGroupMenu === localGroupMenuKey(group)"
                                                     @update:open="
@@ -265,7 +202,7 @@
                                         </div>
                                     </div>
                                 </template>
-                                <div v-else class="group-empty">
+                                <div v-else class="text-center text-xs py-3">
                                     <DataTableEmpty type="nodata" />
                                 </div>
                                 <TooltipWrapper
@@ -275,8 +212,8 @@
                                     <div
                                         :class="[
                                             'group-item hover:shadow-sm',
-                                            'group-item--new',
-                                            { 'is-disabled': !isLocalUserVrcPlusSupporter }
+                                            'border-dashed flex items-center justify-center gap-2 text-sm',
+                                            { 'opacity-50 cursor-not-allowed': !isLocalUserVrcPlusSupporter }
                                         ]"
                                         @click="startLocalGroupCreation">
                                         <Plus />
@@ -288,15 +225,15 @@
                                     ref="newLocalGroupInput"
                                     v-model="newLocalGroupName"
                                     size="sm"
-                                    class="group-item__input"
+                                    class="w-full"
                                     :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">
+                        <div class="flex flex-col gap-2">
+                            <div class="flex items-center justify-between font-semibold text-sm mb-[9px]">
                                 <span>{{ t('view.favorite.avatars.local_history') }}</span>
                                 <DropdownMenu
                                     :open="activeGroupMenu === historyGroupMenuKey"
@@ -313,29 +250,38 @@
                                     </DropdownMenuContent>
                                 </DropdownMenu>
                             </div>
-                            <div class="group-section__list">
+                            <div class="flex flex-col gap-2">
                                 <div
                                     :class="[
                                         'group-item hover:shadow-sm',
                                         { 'is-active': !hasSearchInput && isGroupActive('history', historyGroupKey) }
                                     ]"
                                     @click="handleGroupClick('history', historyGroupKey)">
-                                    <div class="group-item__top">
-                                        <span class="group-item__name">{{
+                                    <div class="flex items-start justify-between mb-1 text-[13px]">
+                                        <span class="font-semibold">{{
                                             t('view.favorite.avatars.local_history')
                                         }}</span>
-                                        <span class="group-item__count">{{ avatarHistory.length }}/100</span>
+                                        <span class="text-xs">{{ avatarHistory.length }}/100</span>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </ResizablePanel>
-                <ResizableHandle @dragging="setAvatarSplitterDragging" />
+                <ResizableHandle @dragging="splitterSetDragging" />
                 <ResizablePanel :order="2">
-                    <div class="favorites-content">
-                        <div class="favorites-content__header">
-                            <div class="favorites-content__title">
+                    <div class="flex flex-col h-full min-h-0 pl-[26px]">
+                        <FavoritesContentHeader
+                            v-model:edit-mode="avatarEditMode"
+                            :edit-mode-disabled="isSearchActive || !activeRemoteGroup"
+                            :edit-mode-visible="avatarEditMode && !isSearchActive && activeRemoteGroup"
+                            :is-all-selected="isAllAvatarsSelected"
+                            :has-selection="hasAvatarSelection"
+                            @toggle-select-all="toggleSelectAllAvatars"
+                            @clear-selection="clearSelectedAvatars"
+                            @copy-selection="copySelectedAvatars"
+                            @bulk-unfavorite="showAvatarBulkUnfavoriteSelectionConfirm">
+                            <template #title>
                                 <span v-if="isSearchActive">{{ t('view.favorite.avatars.search') }}</span>
                                 <template v-else-if="activeRemoteGroup">
                                     <span>
@@ -356,47 +302,9 @@
                                     </span>
                                 </template>
                                 <span v-else>{{ t('view.favorite.avatars.no_group_selected') }}</span>
-                            </div>
-                            <div class="favorites-content__edit">
-                                <span>{{ t('view.favorite.edit_mode') }}</span>
-                                <Switch v-model="avatarEditMode" :disabled="isSearchActive || !activeRemoteGroup" />
-                            </div>
-                        </div>
-                        <div class="favorites-content__edit-actions">
-                            <div
-                                v-if="avatarEditMode && !isSearchActive && activeRemoteGroup"
-                                class="favorites-content__actions">
-                                <Button size="sm" variant="outline" @click="toggleSelectAllAvatars">
-                                    {{
-                                        isAllAvatarsSelected
-                                            ? t('view.favorite.deselect_all')
-                                            : t('view.favorite.select_all')
-                                    }}
-                                </Button>
-                                <Button
-                                    size="sm"
-                                    variant="secondary"
-                                    :disabled="!hasAvatarSelection"
-                                    @click="clearSelectedAvatars">
-                                    {{ t('view.favorite.clear') }}
-                                </Button>
-                                <Button
-                                    size="sm"
-                                    variant="outline"
-                                    :disabled="!hasAvatarSelection"
-                                    @click="copySelectedAvatars">
-                                    {{ t('view.favorite.copy') }}
-                                </Button>
-                                <Button
-                                    size="sm"
-                                    variant="outline"
-                                    :disabled="!hasAvatarSelection"
-                                    @click="showAvatarBulkUnfavoriteSelectionConfirm">
-                                    {{ t('view.favorite.bulk_unfavorite') }}
-                                </Button>
-                            </div>
-                        </div>
-                        <div ref="avatarFavoritesContainerRef" class="favorites-content__list">
+                            </template>
+                        </FavoritesContentHeader>
+                        <div ref="avatarFavoritesContainerRef" class="flex-1 min-h-0">
                             <template v-if="isSearchActive">
                                 <div class="favorites-content__scroll favorites-content__scroll--native">
                                     <div
@@ -418,7 +326,7 @@
                                                         loading="lazy" />
                                                 </div>
                                                 <div class="favorites-search-card__detail">
-                                                    <div class="favorites-search-card__title">
+                                                    <div class="flex items-center gap-2">
                                                         <span class="name">{{ favorite.name }}</span>
                                                     </div>
                                                     <span class="text-xs">{{ favorite.authorName }}</span>
@@ -432,7 +340,7 @@
                                 </div>
                             </template>
                             <template v-else-if="activeRemoteGroup">
-                                <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <div class="h-full pr-2 overflow-auto">
                                     <template v-if="currentRemoteFavorites.length">
                                         <div
                                             class="favorites-card-list"
@@ -448,13 +356,13 @@
                                                 @click="showAvatarDialog(favorite.id)" />
                                         </div>
                                     </template>
-                                    <div v-else class="favorites-empty">
+                                    <div v-else class="flex items-center justify-center text-[13px] h-full">
                                         <DataTableEmpty type="nodata" />
                                     </div>
                                 </div>
                             </template>
                             <template v-else-if="!remoteAvatarGroupsResolved">
-                                <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <div class="h-full pr-2 overflow-auto">
                                     <div
                                         class="favorites-card-list"
                                         :style="avatarFavoritesGridStyle(avatarGroupPlaceholders.length)">
@@ -466,7 +374,7 @@
                                 </div>
                             </template>
                             <template v-else-if="activeLocalGroupName">
-                                <ScrollArea class="favorites-content__scroll">
+                                <ScrollArea class="h-full pr-2">
                                     <template v-if="currentLocalFavorites.length">
                                         <div
                                             class="favorites-card-list"
@@ -481,13 +389,13 @@
                                                 @click="showAvatarDialog(favorite.id)" />
                                         </div>
                                     </template>
-                                    <div v-else class="favorites-empty">
+                                    <div v-else class="flex items-center justify-center text-[13px] h-full">
                                         <DataTableEmpty type="nodata" />
                                     </div>
                                 </ScrollArea>
                             </template>
                             <template v-else-if="isHistorySelected">
-                                <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <div class="h-full pr-2 overflow-auto">
                                     <template v-if="avatarHistory.length">
                                         <div
                                             class="favorites-card-list"
@@ -499,13 +407,15 @@
                                                 @click="showAvatarDialog(favorite.id)" />
                                         </div>
                                     </template>
-                                    <div v-else class="favorites-empty">
+                                    <div v-else class="flex items-center justify-center text-[13px] h-full">
                                         <DataTableEmpty type="nodata" />
                                     </div>
                                 </div>
                             </template>
                             <template v-else>
-                                <div class="favorites-empty">{{ t('view.favorite.avatars.no_group_selected') }}</div>
+                                <div class="flex items-center justify-center text-[13px] h-full">
+                                    {{ t('view.favorite.avatars.no_group_selected') }}
+                                </div>
                             </template>
                         </div>
                     </div>
@@ -517,11 +427,11 @@
 </template>
 
 <script setup>
-    import { computed, markRaw, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
-    import { ArrowUpDown, Ellipsis, Loader, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
-    import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
+    import { computed, markRaw, nextTick, onBeforeUnmount, reactive, ref, watch } from 'vue';
+    import { Ellipsis, Loader, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { DataTableEmpty } from '@/components/ui/data-table';
+    import { InputGroupField } from '@/components/ui/input-group';
     import { ScrollArea } from '@/components/ui/scroll-area';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
@@ -534,20 +444,11 @@
         DropdownMenuContent,
         DropdownMenuItem,
         DropdownMenuPortal,
-        DropdownMenuSeparator,
         DropdownMenuSub,
         DropdownMenuSubContent,
         DropdownMenuSubTrigger,
         DropdownMenuTrigger
     } from '../../components/ui/dropdown-menu';
-    import {
-        Select,
-        SelectContent,
-        SelectGroup,
-        SelectItem,
-        SelectTrigger,
-        SelectValue
-    } from '../../components/ui/select';
     import {
         useAppearanceSettingsStore,
         useAvatarStore,
@@ -557,16 +458,18 @@
     } from '../../stores';
     import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
     import { avatarRequest, favoriteRequest } from '../../api';
-    import { Slider } from '../../components/ui/slider';
-    import { Switch } from '../../components/ui/switch';
     import { debounce } from '../../shared/utils';
     import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
+    import { useFavoritesGroupPanel } from './composables/useFavoritesGroupPanel.js';
+    import { useFavoritesLocalGroups } from './composables/useFavoritesLocalGroups.js';
+    import { useFavoritesSplitter } from './composables/useFavoritesSplitter.js';
 
     import AvatarExportDialog from './dialogs/AvatarExportDialog.vue';
     import FavoritesAvatarItem from './components/FavoritesAvatarItem.vue';
     import FavoritesAvatarLocalHistoryItem from './components/FavoritesAvatarLocalHistoryItem.vue';
+    import FavoritesContentHeader from './components/FavoritesContentHeader.vue';
+    import FavoritesToolbar from './components/FavoritesToolbar.vue';
     import InvalidAvatarsProgressToast from './components/InvalidAvatarsProgressToast.jsx';
-    import configRepository from '../../service/config.js';
 
     import * as workerTimers from 'worker-timers';
 
@@ -575,20 +478,17 @@
         displayName: `Group ${index + 1}`
     }));
 
-    const avatarGroupVisibilityDotColors = {
-        public: 'bg-green-500',
-        friends: 'bg-sky-500',
-        private: 'bg-red-500'
-    };
     const avatarGroupVisibilityOptions = ref(['public', 'friends', 'private']);
     const historyGroupKey = 'local-history';
-    const avatarSplitterSize = ref(260);
-    const avatarSplitterFallbackWidth = typeof window !== 'undefined' && window.innerWidth ? window.innerWidth : 1200;
-    const avatarSplitterGroupRef = ref(null);
-    const avatarSplitterPanelRef = ref(null);
-    const avatarSplitterWidth = ref(avatarSplitterFallbackWidth);
-    const avatarSplitterDraggingCount = ref(0);
-    let avatarSplitterObserver = null;
+    const {
+        splitterGroupRef,
+        splitterPanelRef,
+        defaultSize: splitterDefaultSize,
+        minSize: splitterMinSize,
+        maxSize: splitterMaxSize,
+        handleLayout,
+        setDragging: splitterSetDragging
+    } = useFavoritesSplitter({ configKey: 'VRCX_FavoritesAvatarSplitter' });
 
     const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
     const { setSortFavorites } = useAppearanceSettingsStore();
@@ -671,18 +571,40 @@
     const avatarFavoriteSearch = ref('');
     const avatarFavoriteSearchResults = ref([]);
     const avatarEditMode = ref(false);
-    const selectedGroup = ref(null);
-    const activeGroupMenu = ref(null);
     const avatarToolbarMenuOpen = ref(false);
-    const isCreatingLocalGroup = ref(false);
-    const newLocalGroupName = ref('');
-    const newLocalGroupInput = ref(null);
     const refreshingLocalFavorites = ref(false);
     const worker = ref(null);
     const refreshCancelToken = ref(null);
     const avatarGroupPlaceholders = AVATAR_GROUP_PLACEHOLDERS;
-    const hasUserSelectedAvatarGroup = ref(false);
-    const remoteAvatarGroupsResolved = ref(false);
+
+    const {
+        activeGroupMenu,
+        hasUserSelectedGroup: hasUserSelectedAvatarGroup,
+        remoteGroupsResolved: remoteAvatarGroupsResolved,
+
+        isHistorySelected,
+        remoteGroupMenuKey,
+        localGroupMenuKey,
+        activeRemoteGroup,
+        activeLocalGroupName,
+        activeLocalGroupCount,
+        handleGroupMenuVisible,
+        selectGroup,
+        isGroupActive,
+        ensureSelectedGroup
+    } = useFavoritesGroupPanel({
+        remoteGroups: favoriteAvatarGroups,
+        localGroups: localAvatarFavoriteGroups,
+        localFavorites: localAvatarFavorites,
+        clearSelection: () => {
+            selectedFavoriteAvatars.value = [];
+        },
+        placeholders: AVATAR_GROUP_PLACEHOLDERS,
+        hasHistory: true,
+        historyItems: avatarHistory
+    });
+
+    const historyGroupMenuKey = 'history';
 
     /**
      *
@@ -698,13 +620,6 @@
     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 closeAvatarToolbarMenu = () => {
         avatarToolbarMenuOpen.value = false;
@@ -726,118 +641,6 @@
         showAvatarExportDialog();
     }
 
-    onBeforeMount(() => {
-        loadAvatarSplitterPreferences();
-    });
-
-    /**
-     *
-     */
-    async function loadAvatarSplitterPreferences() {
-        const storedSize = await configRepository.getString('VRCX_FavoritesAvatarSplitter', '260');
-        const parsedSize = Number(storedSize);
-        if (Number.isFinite(parsedSize) && parsedSize >= 0) {
-            avatarSplitterSize.value = parsedSize;
-        }
-    }
-
-    const getAvatarSplitterWidthRaw = () => {
-        const element = avatarSplitterGroupRef.value?.$el ?? avatarSplitterGroupRef.value;
-        const width = element?.getBoundingClientRect?.().width;
-        return Number.isFinite(width) ? width : null;
-    };
-
-    const getAvatarSplitterWidth = () => {
-        const width = getAvatarSplitterWidthRaw();
-        return Number.isFinite(width) && width > 0 ? width : avatarSplitterFallbackWidth;
-    };
-
-    const resolveDraggingPayload = (payload) => {
-        if (typeof payload === 'boolean') {
-            return payload;
-        }
-        if (payload && typeof payload === 'object') {
-            if (typeof payload.detail === 'boolean') {
-                return payload.detail;
-            }
-            if (typeof payload.dragging === 'boolean') {
-                return payload.dragging;
-            }
-        }
-        return Boolean(payload);
-    };
-
-    const setAvatarSplitterDragging = (payload) => {
-        const isDragging = resolveDraggingPayload(payload);
-        const next = avatarSplitterDraggingCount.value + (isDragging ? 1 : -1);
-        avatarSplitterDraggingCount.value = Math.max(0, next);
-    };
-
-    const pxToPercent = (px, groupWidth, min = 0) => {
-        const width = groupWidth ?? getAvatarSplitterWidth();
-        return Math.min(100, Math.max(min, (px / width) * 100));
-    };
-
-    const percentToPx = (percent, groupWidth) => (percent / 100) * groupWidth;
-
-    const avatarSplitterDefaultSize = computed(() =>
-        pxToPercent(avatarSplitterSize.value, avatarSplitterWidth.value, 0)
-    );
-    const avatarSplitterMinSize = computed(() => pxToPercent(0, avatarSplitterWidth.value, 0));
-    const avatarSplitterMaxSize = computed(() => pxToPercent(360, avatarSplitterWidth.value, 0));
-
-    const handleAvatarSplitterLayout = (sizes) => {
-        if (!Array.isArray(sizes) || !sizes.length) {
-            return;
-        }
-
-        if (avatarSplitterDraggingCount.value === 0) {
-            return;
-        }
-
-        const rawWidth = getAvatarSplitterWidthRaw();
-        if (!Number.isFinite(rawWidth) || rawWidth <= 0) {
-            return;
-        }
-
-        const nextSize = sizes[0];
-        if (!Number.isFinite(nextSize)) {
-            return;
-        }
-
-        const nextPx = Math.round(percentToPx(nextSize, rawWidth));
-        const clampedPx = Math.min(360, Math.max(0, nextPx));
-        avatarSplitterSize.value = clampedPx;
-        configRepository.setString('VRCX_FavoritesAvatarSplitter', clampedPx.toString());
-    };
-
-    const updateAvatarSplitterWidth = () => {
-        const width = getAvatarSplitterWidth();
-        avatarSplitterWidth.value = width;
-        const targetSize = pxToPercent(avatarSplitterSize.value, width, 0);
-        avatarSplitterPanelRef.value?.resize?.(targetSize);
-    };
-
-    onMounted(async () => {
-        await nextTick();
-        updateAvatarSplitterWidth();
-        const element = avatarSplitterGroupRef.value?.$el ?? avatarSplitterGroupRef.value;
-        if (element && typeof ResizeObserver !== 'undefined') {
-            avatarSplitterObserver = new ResizeObserver(updateAvatarSplitterWidth);
-            avatarSplitterObserver.observe(element);
-        }
-    });
-
-    watch(avatarSplitterSize, (value, previous) => {
-        if (value === previous) {
-            return;
-        }
-        if (avatarSplitterDraggingCount.value > 0) {
-            return;
-        }
-        updateAvatarSplitterWidth();
-    });
-
     const groupedAvatarFavorites = computed(() => {
         const grouped = {};
         favoriteAvatars.value.forEach((avatar) => {
@@ -852,28 +655,6 @@
         return grouped;
     });
 
-    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 [];
@@ -934,119 +715,6 @@
         }
     );
 
-    /**
-     *
-     * @param key
-     * @param visible
-     */
-    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();
-    }
-
-    /**
-     *
-     * @param group
-     */
-    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;
-    }
-
-    /**
-     *
-     * @param type
-     * @param key
-     * @param options
-     */
-    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;
-        }
-        clearSelectedAvatars();
-    }
-
-    /**
-     *
-     */
-    function clearSelectedAvatars() {
-        selectedFavoriteAvatars.value = [];
-    }
-
-    /**
-     *
-     * @param type
-     * @param key
-     */
-    function isGroupActive(type, key) {
-        return selectedGroup.value?.type === type && selectedGroup.value?.key === key;
-    }
-
     /**
      *
      * @param type
@@ -1063,42 +731,18 @@
     /**
      *
      */
-    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 });
-            }
-        });
-    }
+    const {
+        isCreatingLocalGroup,
+        newLocalGroupName,
+        newLocalGroupInput,
+        startLocalGroupCreation,
+        cancelLocalGroupCreation,
+        handleLocalGroupCreationConfirm
+    } = useFavoritesLocalGroups({
+        createGroup: newLocalAvatarFavoriteGroup,
+        selectGroup,
+        canCreate: () => isLocalUserVrcPlusSupporter.value
+    });
 
     /**
      *
@@ -1115,6 +759,13 @@
         }
     }
 
+    /**
+     *
+     */
+    function clearSelectedAvatars() {
+        selectedFavoriteAvatars.value = [];
+    }
+
     /**
      *
      */
@@ -1607,10 +1258,6 @@
 
     onBeforeUnmount(() => {
         cancelLocalAvatarRefresh();
-        if (avatarSplitterObserver) {
-            avatarSplitterObserver.disconnect();
-            avatarSplitterObserver = null;
-        }
     });
 
     /**
@@ -1625,444 +1272,6 @@
     }
 </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-splitter :deep([data-slot='resizable-handle']) {
-        opacity: 0;
-        transition: opacity 0.2s ease;
-    }
-
-    .favorites-splitter :deep([data-slot='resizable-handle']:hover),
-    .favorites-splitter :deep([data-slot='resizable-handle']:focus-visible) {
-        opacity: 1;
-    }
-
-    .favorites-groups-panel {
-        height: 100%;
-        padding-right: 8px;
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-    }
-
-    .favorites-dropdown {
-        padding: 8px;
-    }
-
-    .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;
-        margin-bottom: 9px;
-    }
-
-    .group-section__list {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-    }
-
-    .group-item {
-        border-radius: var(--radius-lg);
-        border: 1px solid var(--border);
-        padding: 8px;
-        cursor: pointer;
-        transition: background-color 0.15s ease;
-    }
-
-    .group-item:hover {
-        background-color: var(--accent);
-    }
-
-    .group-item__top {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        margin-bottom: 4px;
-        font-size: 13px;
-    }
-
-    .group-item__name {
-        font-weight: 600;
-    }
-
-    .group-item__right {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-    }
-
-    .group-item__count {
-        font-size: 12px;
-    }
-
-    .group-item__bottom {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-    }
-
-    .group-item__visibility {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-    }
-
-    .group-item__visibility-text {
-        font-size: 11px;
-        color: var(--muted-foreground);
-    }
-
-    .group-item__visibility-dot {
-        display: none;
-    }
-
-    .group-item--public {
-        border-left: 3px solid var(--visibility-public);
-    }
-
-    .group-item--friends {
-        border-left: 3px solid var(--visibility-friends);
-    }
-
-    .group-item--private {
-        border-left: 3px solid var(--visibility-private);
-    }
-
-    .group-item--placeholder {
-        pointer-events: none;
-        opacity: 0.7;
-    }
-
-    .group-item__placeholder-tag {
-        width: 64px;
-        height: 18px;
-    }
-
-    .group-item--new {
-        border-style: dashed;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        font-size: 14px;
-    }
-
-    .group-item--new.is-disabled {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-
-    .group-item__input {
-        width: 100%;
-    }
-
-    .group-empty {
-        text-align: center;
-        font-size: 12px;
-        padding: 12px 0;
-    }
-
-    .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;
-    }
-
-    .favorites-content__edit {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 13px;
-    }
-
-    .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(
-            var(--favorites-grid-columns, 1),
-            minmax(var(--favorites-card-min-width, 240px), var(--favorites-card-target-width, 1fr))
-        );
-        gap: var(--favorites-card-gap, 12px);
-        justify-content: start;
-        padding-bottom: 12px;
-    }
-
-    .favorites-card-list {
-        display: grid;
-        grid-template-columns: repeat(
-            var(--favorites-grid-columns, 1),
-            minmax(var(--favorites-card-min-width, 260px), var(--favorites-card-target-width, 1fr))
-        );
-        gap: var(--favorites-card-gap, 12px);
-        justify-content: start;
-        padding: 4px 2px 12px 2px;
-    }
-
-    .favorites-card-list::after {
-        content: '';
-    }
-
-    :deep(.favorites-search-card--avatar) {
-        min-width: var(--favorites-card-min-width, 240px);
-        max-width: var(--favorites-card-target-width, 320px);
-    }
-
-    :deep(.favorites-search-card) {
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        border: 1px solid var(--border);
-        border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
-        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 8px);
-        cursor: pointer;
-        transition: background-color 0.15s ease;
-        width: 100%;
-        min-width: var(--favorites-card-min-width, 240px);
-        max-width: var(--favorites-card-target-width, 320px);
-    }
-
-    :deep(.favorites-search-card:hover) {
-        background-color: var(--accent);
-    }
-
-    :deep(.favorites-search-card__content) {
-        display: flex;
-        align-items: center;
-        gap: var(--favorites-card-content-gap, 8px);
-        flex: 1;
-        min-width: 0;
-    }
-
-    :deep(.favorites-search-card__avatar) {
-        width: calc(48px * var(--favorites-card-scale, 1));
-        height: calc(48px * var(--favorites-card-scale, 1));
-        border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
-        overflow: hidden;
-        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: calc(13px * var(--favorites-card-scale, 1));
-        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: calc(12px * var(--favorites-card-scale, 1));
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    :deep(.favorites-search-card__title) {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-
-    :deep(.favorites-search-card__badges) {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        font-size: 14px;
-    }
-
-    :deep(.favorites-search-card__actions) {
-        display: flex;
-        flex-direction: column;
-        gap: var(--favorites-card-action-gap, 8px);
-        margin-left: var(--favorites-card-action-margin, 8px);
-        align-items: center;
-        justify-content: center;
-        flex: 0 0 auto;
-        min-width: 48px;
-    }
-
-    :deep(.favorites-search-card__action) {
-        display: flex;
-        justify-content: flex-end;
-        width: 100%;
-    }
-
-    :deep(.favorites-search-card__dropdown) {
-        width: 100%;
-    }
-
-    :deep(.favorites-search-card__action-group) {
-        display: flex;
-        gap: var(--favorites-card-action-group-gap, 8px);
-        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: var(--favorites-card-checkbox-margin, 8px);
-    }
-
-    :deep(.favorites-search-card__action--checkbox [data-slot='checkbox']) {
-        margin: 0;
-    }
-
-    :deep(.favorites-search-card__actions:empty) {
-        display: none;
-    }
-
-    .favorites-empty {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 13px;
-        height: 100%;
-    }
-
-    .favorites-dropdown__control {
-        list-style: none;
-        padding: 12px 16px 8px;
-        min-width: 220px;
-        cursor: default;
-    }
-
-    .favorites-dropdown__control-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 13px;
-        font-weight: 600;
-        margin-bottom: 8px;
-    }
-
-    .favorites-dropdown__control-value {
-        font-size: 12px;
-    }
-
-    .favorites-dropdown__slider {
-        padding: 0 4px 4px;
-    }
+<style>
+    @import './favorites-layout.css';
 </style>
diff --git a/src/views/Favorites/FavoritesFriend.vue b/src/views/Favorites/FavoritesFriend.vue
index b9fb52f9..d135e006 100644
--- a/src/views/Favorites/FavoritesFriend.vue
+++ b/src/views/Favorites/FavoritesFriend.vue
@@ -1,98 +1,37 @@
 <template>
     <div class="x-container">
-        <div class="favorites-page">
-            <div class="favorites-toolbar">
-                <div>
-                    <Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
-                        <SelectTrigger size="sm" class="favorites-toolbar__select">
-                            <span class="flex items-center gap-2">
-                                <ArrowUpDown class="h-4 w-4" />
-                                <SelectValue
-                                    :placeholder="t('view.settings.appearance.appearance.sort_favorite_by_name')" />
-                            </span>
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem
-                                    :value="false"
-                                    :text-value="t('view.settings.appearance.appearance.sort_favorite_by_name')">
-                                    {{ t('view.settings.appearance.appearance.sort_favorite_by_name') }}
-                                </SelectItem>
-                                <SelectItem
-                                    :value="true"
-                                    :text-value="t('view.settings.appearance.appearance.sort_favorite_by_date')">
-                                    {{ t('view.settings.appearance.appearance.sort_favorite_by_date') }}
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                </div>
-                <div class="favorites-toolbar__right">
-                    <InputGroupSearch
-                        v-model="friendFavoriteSearch"
-                        class="favorites-toolbar__search"
-                        :placeholder="t('view.favorite.worlds.search')"
-                        @input="searchFriendFavorites" />
-                    <DropdownMenu v-model:open="friendToolbarMenuOpen">
-                        <DropdownMenuTrigger as-child>
-                            <Button class="rounded-full" size="icon-sm" variant="ghost"><Ellipsis /></Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent class="favorites-dropdown">
-                            <li class="favorites-dropdown__control" @click.stop>
-                                <div class="favorites-dropdown__control-header">
-                                    <span>Scale</span>
-                                    <span class="favorites-dropdown__control-value">
-                                        {{ friendCardScalePercent }}%
-                                    </span>
-                                </div>
-                                <Slider
-                                    v-model="friendCardScaleValue"
-                                    class="favorites-dropdown__slider"
-                                    :min="friendCardScaleSlider.min"
-                                    :max="friendCardScaleSlider.max"
-                                    :step="friendCardScaleSlider.step" />
-                            </li>
-                            <li class="favorites-dropdown__control" @click.stop>
-                                <div class="favorites-dropdown__control-header">
-                                    <span>Spacing</span>
-                                    <span class="favorites-dropdown__control-value">
-                                        {{ friendCardSpacingPercent }}%
-                                    </span>
-                                </div>
-                                <Slider
-                                    v-model="friendCardSpacingValue"
-                                    class="favorites-dropdown__slider"
-                                    :min="friendCardSpacingSlider.min"
-                                    :max="friendCardSpacingSlider.max"
-                                    :step="friendCardSpacingSlider.step" />
-                            </li>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem @click="handleFriendImportClick">
-                                {{ t('view.favorite.import') }}
-                            </DropdownMenuItem>
-                            <DropdownMenuItem @click="handleFriendExportClick">
-                                {{ t('view.favorite.export') }}
-                            </DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                </div>
-            </div>
+        <div class="flex flex-col h-full min-h-0 pb-0">
+            <FavoritesToolbar
+                :sort-favorites="sortFavorites"
+                v-model:search-query="friendFavoriteSearch"
+                :search-placeholder="t('view.favorite.worlds.search')"
+                v-model:toolbar-menu-open="friendToolbarMenuOpen"
+                v-model:card-scale-value="friendCardScaleValue"
+                :card-scale-percent="friendCardScalePercent"
+                :card-scale-slider="friendCardScaleSlider"
+                v-model:card-spacing-value="friendCardSpacingValue"
+                :card-spacing-percent="friendCardSpacingPercent"
+                :card-spacing-slider="friendCardSpacingSlider"
+                @update:sort-favorites="handleSortFavoritesChange"
+                @search="searchFriendFavorites"
+                @import="handleFriendImportClick"
+                @export="handleFriendExportClick" />
             <ResizablePanelGroup
-                ref="friendSplitterGroupRef"
+                ref="splitterGroupRef"
                 direction="horizontal"
-                class="favorites-splitter"
-                @layout="handleFriendSplitterLayout">
+                class="flex-1 min-h-0 favorites-splitter"
+                @layout="handleLayout">
                 <ResizablePanel
-                    ref="friendSplitterPanelRef"
-                    :default-size="friendSplitterDefaultSize"
-                    :min-size="friendSplitterMinSize"
-                    :max-size="friendSplitterMaxSize"
+                    ref="splitterPanelRef"
+                    :default-size="splitterDefaultSize"
+                    :min-size="splitterMinSize"
+                    :max-size="splitterMaxSize"
                     :collapsed-size="0"
                     collapsible
                     :order="1">
-                    <div class="favorites-groups-panel">
-                        <div class="group-section">
-                            <div class="group-section__header">
+                    <div class="h-full pr-2 overflow-auto flex flex-col gap-3">
+                        <div class="flex flex-col gap-2">
+                            <div class="flex items-center justify-between font-semibold text-sm mb-[9px]">
                                 <span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
                                 <TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
                                     <Button
@@ -106,7 +45,7 @@
                                     </Button>
                                 </TooltipWrapper>
                             </div>
-                            <div class="group-section__list">
+                            <div class="flex flex-col gap-2">
                                 <template v-if="favoriteFriendGroups.length">
                                     <div
                                         v-for="group in favoriteFriendGroups"
@@ -117,15 +56,13 @@
                                             { '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 class="flex items-start justify-between mb-1 text-[13px]">
+                                            <span class="font-semibold">{{ group.displayName }}</span>
+                                            <span class="text-xs">{{ group.count }}/{{ group.capacity }}</span>
                                         </div>
-                                        <div class="group-item__bottom">
-                                            <span class="group-item__visibility">
-                                                <span class="group-item__visibility-text">{{
+                                        <div class="flex items-center justify-between gap-2">
+                                            <span class="flex items-center gap-1.5">
+                                                <span class="text-[11px] text-muted-foreground">{{
                                                     t(`view.favorite.visibility.${group.visibility}`)
                                                 }}</span>
                                             </span>
@@ -181,13 +118,13 @@
                                         </div>
                                     </div>
                                 </template>
-                                <div v-else class="group-empty">
+                                <div v-else class="text-center text-xs py-3">
                                     <DataTableEmpty type="nodata" />
                                 </div>
                             </div>
                         </div>
-                        <div class="group-section">
-                            <div class="group-section__header">
+                        <div class="flex flex-col gap-2">
+                            <div class="flex items-center justify-between font-semibold text-sm mb-[9px]">
                                 <span>{{ t('view.favorite.worlds.local_favorites') }}</span>
                                 <Button
                                     class="rounded-full"
@@ -197,7 +134,7 @@
                                     ><RefreshCcw />
                                 </Button>
                             </div>
-                            <div class="group-section__list">
+                            <div class="flex flex-col gap-2">
                                 <template v-if="localFriendFavoriteGroups.length">
                                     <div
                                         v-for="group in localFriendFavoriteGroups"
@@ -207,13 +144,11 @@
                                             { '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">{{
-                                                    localFriendFavGroupLength(group)
-                                                }}</span>
-                                                <div class="group-item__bottom">
+                                        <div class="flex items-start justify-between mb-1 text-[13px]">
+                                            <span class="font-semibold">{{ group }}</span>
+                                            <div class="flex items-center flex-col">
+                                                <span class="text-xs">{{ localFriendFavGroupLength(group) }}</span>
+                                                <div class="flex items-center justify-between gap-2">
                                                     <DropdownMenu
                                                         :open="activeGroupMenu === localGroupMenuKey(group)"
                                                         @update:open="
@@ -244,12 +179,12 @@
                                         </div>
                                     </div>
                                 </template>
-                                <div v-else class="group-empty">
+                                <div v-else class="text-center text-xs py-3">
                                     <DataTableEmpty type="nodata" />
                                 </div>
                                 <div
                                     v-if="!isCreatingLocalGroup"
-                                    class="group-item hover:shadow-sm group-item--new"
+                                    class="group-item hover:shadow-sm border-dashed flex items-center justify-center gap-2 text-sm"
                                     @click="startLocalGroupCreation">
                                     <Plus />
                                     <span>{{ t('view.favorite.worlds.new_group') }}</span>
@@ -259,7 +194,7 @@
                                     ref="newLocalGroupInput"
                                     v-model="newLocalGroupName"
                                     size="sm"
-                                    class="group-item__input"
+                                    class="w-full"
                                     :placeholder="t('view.favorite.worlds.new_group')"
                                     @keyup.enter="handleLocalGroupCreationConfirm"
                                     @keyup.esc="cancelLocalGroupCreation"
@@ -268,11 +203,21 @@
                         </div>
                     </div>
                 </ResizablePanel>
-                <ResizableHandle @dragging="setFriendSplitterDragging" />
+                <ResizableHandle @dragging="splitterSetDragging" />
                 <ResizablePanel :order="2">
-                    <div class="favorites-content">
-                        <div class="favorites-content__header">
-                            <div class="favorites-content__title">
+                    <div class="flex flex-col h-full min-h-0 pl-[26px]">
+                        <FavoritesContentHeader
+                            v-model:edit-mode="friendEditMode"
+                            :edit-mode-disabled="isSearchActive || (!activeRemoteGroup && !activeLocalGroupName)"
+                            :edit-mode-visible="friendEditMode && !isSearchActive"
+                            :is-all-selected="isAllFriendsSelected"
+                            :has-selection="hasFriendSelection"
+                            :show-copy-button="!isLocalGroupSelected"
+                            @toggle-select-all="toggleSelectAllFriends"
+                            @clear-selection="clearSelectedFriends"
+                            @copy-selection="copySelectedFriends"
+                            @bulk-unfavorite="showFriendBulkUnfavoriteSelectionConfirm">
+                            <template #title>
                                 <span v-if="isSearchActive">{{ t('view.favorite.worlds.search') }}</span>
                                 <template v-else-if="activeRemoteGroup">
                                     <span>
@@ -285,50 +230,11 @@
                                     <small>{{ activeLocalGroupCount }}</small>
                                 </span>
                                 <span v-else>No Group Selected</span>
-                            </div>
-                            <div class="favorites-content__edit">
-                                <span>{{ t('view.favorite.edit_mode') }}</span>
-                                <Switch
-                                    v-model="friendEditMode"
-                                    :disabled="isSearchActive || (!activeRemoteGroup && !activeLocalGroupName)" />
-                            </div>
-                        </div>
-                        <div class="favorites-content__edit-actions">
-                            <div v-if="friendEditMode && !isSearchActive" class="favorites-content__actions">
-                                <Button size="sm" variant="outline" @click="toggleSelectAllFriends">
-                                    {{
-                                        isAllFriendsSelected
-                                            ? t('view.favorite.deselect_all')
-                                            : t('view.favorite.select_all')
-                                    }}
-                                </Button>
-                                <Button
-                                    size="sm"
-                                    variant="secondary"
-                                    :disabled="!hasFriendSelection"
-                                    @click="clearSelectedFriends">
-                                    {{ t('view.favorite.clear') }}
-                                </Button>
-                                <Button
-                                    v-if="!isLocalGroupSelected"
-                                    size="sm"
-                                    variant="outline"
-                                    :disabled="!hasFriendSelection"
-                                    @click="copySelectedFriends">
-                                    {{ t('view.favorite.copy') }}
-                                </Button>
-                                <Button
-                                    size="sm"
-                                    variant="outline"
-                                    :disabled="!hasFriendSelection"
-                                    @click="showFriendBulkUnfavoriteSelectionConfirm">
-                                    {{ t('view.favorite.bulk_unfavorite') }}
-                                </Button>
-                            </div>
-                        </div>
-                        <div ref="friendFavoritesContainerRef" class="favorites-content__list">
+                            </template>
+                        </FavoritesContentHeader>
+                        <div ref="friendFavoritesContainerRef" class="flex-1 min-h-0">
                             <template v-if="activeRemoteGroup && !isSearchActive">
-                                <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <div class="h-full pr-2 overflow-auto">
                                     <template v-if="currentFriendFavorites.length">
                                         <div
                                             class="favorites-card-list"
@@ -344,13 +250,13 @@
                                                 @click="showUserDialog(favorite.id)" />
                                         </div>
                                     </template>
-                                    <div v-else class="favorites-empty">
+                                    <div v-else class="flex items-center justify-center text-[13px] h-full">
                                         <DataTableEmpty type="nodata" />
                                     </div>
                                 </div>
                             </template>
                             <template v-else-if="!isSearchActive && activeLocalGroupName && isLocalGroupSelected">
-                                <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <div class="h-full pr-2 overflow-auto">
                                     <template v-if="currentLocalFriendFavorites.length">
                                         <div
                                             class="favorites-card-list"
@@ -366,16 +272,16 @@
                                                 @click="showUserDialog(favorite.id)" />
                                         </div>
                                     </template>
-                                    <div v-else class="favorites-empty">
+                                    <div v-else class="flex items-center justify-center text-[13px] h-full">
                                         <DataTableEmpty type="nodata" />
                                     </div>
                                 </div>
                             </template>
                             <template v-else-if="!isSearchActive">
-                                <div class="favorites-empty">No Group Selected</div>
+                                <div class="flex items-center justify-center text-[13px] h-full">No Group Selected</div>
                             </template>
                             <template v-else>
-                                <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <div class="h-full pr-2 overflow-auto">
                                     <div
                                         v-if="friendFavoriteSearchResults.length"
                                         class="favorites-search-grid"
@@ -390,12 +296,12 @@
                                                     <img :src="userImage(favorite, true)" loading="lazy" />
                                                 </div>
                                                 <div class="favorites-search-card__detail">
-                                                    <div class="favorites-search-card__title">
+                                                    <div class="flex items-center gap-2">
                                                         <span class="name">{{ favorite.displayName }}</span>
                                                     </div>
                                                     <div
                                                         v-if="favorite.location && favorite.location !== 'offline'"
-                                                        class="favorites-search-card__location">
+                                                        class="text-xs truncate">
                                                         <Location
                                                             :location="favorite.location"
                                                             :traveling="favorite.travelingToLocation"
@@ -406,7 +312,7 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <div v-else class="favorites-empty">
+                                    <div v-else class="flex items-center justify-center text-[13px] h-full">
                                         <DataTableEmpty type="nomatch" />
                                     </div>
                                 </div>
@@ -421,11 +327,11 @@
 </template>
 
 <script setup>
-    import { ArrowUpDown, Check, Ellipsis, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
-    import { computed, nextTick, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue';
-    import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
+    import { Ellipsis, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
+    import { computed, ref, watch } from 'vue';
     import { Button } from '@/components/ui/button';
     import { DataTableEmpty } from '@/components/ui/data-table';
+    import { InputGroupField } from '@/components/ui/input-group';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -437,46 +343,36 @@
         DropdownMenuContent,
         DropdownMenuItem,
         DropdownMenuPortal,
-        DropdownMenuSeparator,
         DropdownMenuSub,
         DropdownMenuSubContent,
         DropdownMenuSubTrigger,
         DropdownMenuTrigger
     } from '../../components/ui/dropdown-menu';
-    import {
-        Select,
-        SelectContent,
-        SelectGroup,
-        SelectItem,
-        SelectTrigger,
-        SelectValue
-    } from '../../components/ui/select';
     import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useUserStore } from '../../stores';
     import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
     import { debounce, userImage } from '../../shared/utils';
-    import { Slider } from '../../components/ui/slider';
-    import { Switch } from '../../components/ui/switch';
     import { favoriteRequest } from '../../api';
     import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
+    import { useFavoritesGroupPanel } from './composables/useFavoritesGroupPanel.js';
+    import { useFavoritesLocalGroups } from './composables/useFavoritesLocalGroups.js';
+    import { useFavoritesSplitter } from './composables/useFavoritesSplitter.js';
 
+    import FavoritesContentHeader from './components/FavoritesContentHeader.vue';
     import FavoritesFriendItem from './components/FavoritesFriendItem.vue';
+    import FavoritesToolbar from './components/FavoritesToolbar.vue';
     import FriendExportDialog from './dialogs/FriendExportDialog.vue';
-    import configRepository from '../../service/config.js';
 
     const friendGroupVisibilityOptions = ref(['public', 'friends', 'private']);
-    const friendGroupVisibilityDotColors = {
-        public: 'bg-green-500',
-        friends: 'bg-sky-500',
-        private: 'bg-red-500'
-    };
 
-    const friendSplitterSize = ref(260);
-    const friendSplitterFallbackWidth = typeof window !== 'undefined' && window.innerWidth ? window.innerWidth : 1200;
-    const friendSplitterGroupRef = ref(null);
-    const friendSplitterPanelRef = ref(null);
-    const friendSplitterWidth = ref(friendSplitterFallbackWidth);
-    const friendSplitterDraggingCount = ref(0);
-    let friendSplitterObserver = null;
+    const {
+        splitterGroupRef,
+        splitterPanelRef,
+        defaultSize: splitterDefaultSize,
+        minSize: splitterMinSize,
+        maxSize: splitterMaxSize,
+        handleLayout,
+        setDragging: splitterSetDragging
+    } = useFavoritesSplitter({ configKey: 'VRCX_FavoritesFriendSplitter' });
 
     const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
     const { setSortFavorites } = useAppearanceSettingsStore();
@@ -559,12 +455,31 @@
     const friendFavoriteSearch = ref('');
     const friendFavoriteSearchResults = ref([]);
     const friendEditMode = ref(false);
-    const selectedGroup = ref(null);
-    const activeGroupMenu = ref(null);
     const friendToolbarMenuOpen = ref(false);
-    const isCreatingLocalGroup = ref(false);
-    const newLocalGroupName = ref('');
-    const newLocalGroupInput = ref(null);
+
+    const {
+        selectedGroup,
+        activeGroupMenu,
+        isRemoteGroupSelected,
+        isLocalGroupSelected,
+        remoteGroupMenuKey,
+        localGroupMenuKey,
+        activeRemoteGroup,
+        activeLocalGroupName,
+        activeLocalGroupCount,
+        handleGroupMenuVisible,
+        selectGroup,
+        selectDefaultGroup,
+        isGroupActive,
+        ensureSelectedGroup
+    } = useFavoritesGroupPanel({
+        remoteGroups: favoriteFriendGroups,
+        localGroups: localFriendFavoriteGroups,
+        localFavorites: localFriendFavorites,
+        clearSelection: () => {
+            selectedFavoriteFriends.value = [];
+        }
+    });
 
     /**
      *
@@ -580,9 +495,6 @@
     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 isLocalGroupSelected = computed(() => selectedGroup.value?.type === 'local');
-    const localGroupMenuKey = (key) => `local:${key}`;
 
     const closeFriendToolbarMenu = () => {
         friendToolbarMenuOpen.value = false;
@@ -604,127 +516,6 @@
         showFriendExportDialog();
     }
 
-    onBeforeMount(() => {
-        loadFriendSplitterPreferences();
-    });
-
-    /**
-     *
-     */
-    async function loadFriendSplitterPreferences() {
-        const storedSize = await configRepository.getString('VRCX_FavoritesFriendSplitter', '260');
-        const parsedSize = Number(storedSize);
-        if (Number.isFinite(parsedSize) && parsedSize >= 0) {
-            friendSplitterSize.value = parsedSize;
-        }
-    }
-
-    const getFriendSplitterWidthRaw = () => {
-        const element = friendSplitterGroupRef.value?.$el ?? friendSplitterGroupRef.value;
-        const width = element?.getBoundingClientRect?.().width;
-        return Number.isFinite(width) ? width : null;
-    };
-
-    const getFriendSplitterWidth = () => {
-        const width = getFriendSplitterWidthRaw();
-        return Number.isFinite(width) && width > 0 ? width : friendSplitterFallbackWidth;
-    };
-
-    const resolveDraggingPayload = (payload) => {
-        if (typeof payload === 'boolean') {
-            return payload;
-        }
-        if (payload && typeof payload === 'object') {
-            if (typeof payload.detail === 'boolean') {
-                return payload.detail;
-            }
-            if (typeof payload.dragging === 'boolean') {
-                return payload.dragging;
-            }
-        }
-        return Boolean(payload);
-    };
-
-    const setFriendSplitterDragging = (payload) => {
-        const isDragging = resolveDraggingPayload(payload);
-        const next = friendSplitterDraggingCount.value + (isDragging ? 1 : -1);
-        friendSplitterDraggingCount.value = Math.max(0, next);
-    };
-
-    const pxToPercent = (px, groupWidth, min = 0) => {
-        const width = groupWidth ?? getFriendSplitterWidth();
-        return Math.min(100, Math.max(min, (px / width) * 100));
-    };
-
-    const percentToPx = (percent, groupWidth) => (percent / 100) * groupWidth;
-
-    const friendSplitterDefaultSize = computed(() =>
-        pxToPercent(friendSplitterSize.value, friendSplitterWidth.value, 0)
-    );
-    const friendSplitterMinSize = computed(() => pxToPercent(0, friendSplitterWidth.value, 0));
-    const friendSplitterMaxSize = computed(() => pxToPercent(360, friendSplitterWidth.value, 0));
-
-    const handleFriendSplitterLayout = (sizes) => {
-        if (!Array.isArray(sizes) || !sizes.length) {
-            return;
-        }
-
-        if (friendSplitterDraggingCount.value === 0) {
-            return;
-        }
-
-        const rawWidth = getFriendSplitterWidthRaw();
-        if (!Number.isFinite(rawWidth) || rawWidth <= 0) {
-            return;
-        }
-
-        const nextSize = sizes[0];
-        if (!Number.isFinite(nextSize)) {
-            return;
-        }
-
-        const nextPx = Math.round(percentToPx(nextSize, rawWidth));
-        const clampedPx = Math.min(360, Math.max(0, nextPx));
-        friendSplitterSize.value = clampedPx;
-        configRepository.setString('VRCX_FavoritesFriendSplitter', clampedPx.toString());
-    };
-
-    const updateFriendSplitterWidth = () => {
-        const width = getFriendSplitterWidth();
-        friendSplitterWidth.value = width;
-        const targetSize = pxToPercent(friendSplitterSize.value, width, 0);
-        friendSplitterPanelRef.value?.resize?.(targetSize);
-    };
-
-    onMounted(async () => {
-        await nextTick();
-        updateFriendSplitterWidth();
-        const element = friendSplitterGroupRef.value?.$el ?? friendSplitterGroupRef.value;
-        if (element && typeof ResizeObserver !== 'undefined') {
-            friendSplitterObserver = new ResizeObserver(updateFriendSplitterWidth);
-            friendSplitterObserver.observe(element);
-        }
-    });
-
-    onUnmounted(() => {
-        if (friendSplitterObserver) {
-            friendSplitterObserver.disconnect();
-            friendSplitterObserver = null;
-        }
-    });
-
-    watch(friendSplitterSize, (value, previous) => {
-        if (value === previous) {
-            return;
-        }
-        if (friendSplitterDraggingCount.value > 0) {
-            return;
-        }
-        updateFriendSplitterWidth();
-    });
-
-    const remoteGroupMenuKey = (key) => `remote:${key}`;
-
     const searchableFriendEntries = computed(() => {
         const seen = new Set();
         const entries = [];
@@ -738,13 +529,6 @@
         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 [];
@@ -752,21 +536,6 @@
         return groupedByGroupKeyFavoriteFriends.value[activeRemoteGroup.value.key] || [];
     });
 
-    const activeLocalGroupName = computed(() => {
-        if (!isLocalGroupSelected.value) {
-            return '';
-        }
-        return selectedGroup.value.key;
-    });
-
-    const activeLocalGroupCount = computed(() => {
-        if (!activeLocalGroupName.value) {
-            return 0;
-        }
-        const favorites = localFriendFavorites.value[activeLocalGroupName.value];
-        return favorites ? favorites.length : 0;
-    });
-
     const currentLocalFriendFavorites = computed(() => {
         if (!activeLocalGroupName.value) {
             return [];
@@ -845,90 +614,6 @@
         getLocalFriendFavorites();
     }
 
-    /**
-     *
-     * @param key
-     * @param visible
-     */
-    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;
-            }
-        }
-        if (localFriendFavoriteGroups.value.length) {
-            selectGroup('local', localFriendFavoriteGroups.value[0]);
-            return;
-        }
-        selectedGroup.value = null;
-        clearSelectedFriends();
-    }
-
-    /**
-     *
-     * @param group
-     */
-    function isGroupAvailable(group) {
-        if (!group) {
-            return false;
-        }
-        if (group.type === 'remote') {
-            return favoriteFriendGroups.value.some((item) => item.key === group.key);
-        }
-        if (group.type === 'local') {
-            return localFriendFavoriteGroups.value.includes(group.key);
-        }
-        return false;
-    }
-
-    /**
-     *
-     * @param type
-     * @param key
-     */
-    function selectGroup(type, key) {
-        if (selectedGroup.value?.type === type && selectedGroup.value?.key === key) {
-            return;
-        }
-        selectedGroup.value = { type, key };
-        clearSelectedFriends();
-    }
-
-    /**
-     *
-     * @param type
-     * @param key
-     */
-    function isGroupActive(type, key) {
-        return selectedGroup.value?.type === type && selectedGroup.value?.key === key;
-    }
-
     /**
      *
      * @param type
@@ -1181,36 +866,17 @@
     /**
      *
      */
-    function startLocalGroupCreation() {
-        isCreatingLocalGroup.value = true;
-        newLocalGroupName.value = '';
-        nextTick(() => {
-            newLocalGroupInput.value?.$el?.focus?.();
-        });
-    }
-
-    /**
-     *
-     */
-    function cancelLocalGroupCreation() {
-        isCreatingLocalGroup.value = false;
-        newLocalGroupName.value = '';
-    }
-
-    /**
-     *
-     */
-    function handleLocalGroupCreationConfirm() {
-        const name = newLocalGroupName.value.trim();
-        if (!name) {
-            cancelLocalGroupCreation();
-            return;
-        }
-        newLocalFriendFavoriteGroup(name);
-        isCreatingLocalGroup.value = false;
-        newLocalGroupName.value = '';
-        selectGroup('local', name);
-    }
+    const {
+        isCreatingLocalGroup,
+        newLocalGroupName,
+        newLocalGroupInput,
+        startLocalGroupCreation,
+        cancelLocalGroupCreation,
+        handleLocalGroupCreationConfirm
+    } = useFavoritesLocalGroups({
+        createGroup: newLocalFriendFavoriteGroup,
+        selectGroup
+    });
 
     /**
      *
@@ -1265,445 +931,6 @@
     }
 </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-splitter :deep([data-slot='resizable-handle']) {
-        opacity: 0;
-        transition: opacity 0.2s ease;
-    }
-
-    .favorites-splitter :deep([data-slot='resizable-handle']:hover),
-    .favorites-splitter :deep([data-slot='resizable-handle']:focus-visible) {
-        opacity: 1;
-    }
-
-    .favorites-groups-panel {
-        height: 100%;
-        padding-right: 8px;
-        overflow: auto;
-        display: flex;
-        flex-direction: column;
-        gap: 12px;
-    }
-
-    .favorites-dropdown {
-        padding: 8px;
-    }
-
-    .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;
-        margin-bottom: 9px;
-    }
-
-    .group-section__list {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-    }
-
-    .group-item {
-        border-radius: var(--radius-lg);
-        border: 1px solid var(--border);
-        padding: 8px;
-        cursor: pointer;
-        transition: background-color 0.15s ease;
-    }
-
-    .group-item:hover {
-        background-color: var(--accent);
-    }
-
-    .group-item__top {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        margin-bottom: 4px;
-        font-size: 13px;
-    }
-
-    .group-item__name {
-        font-weight: 600;
-    }
-
-    .group-item__right {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-    }
-
-    .group-item__count {
-        font-size: 12px;
-    }
-
-    .group-item__bottom {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-    }
-
-    .group-item__visibility {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-    }
-
-    .group-item__visibility-text {
-        font-size: 11px;
-        color: var(--muted-foreground);
-    }
-
-    .group-item__visibility-dot {
-        display: none;
-    }
-
-    .group-item--public {
-        border-left: 3px solid var(--visibility-public);
-    }
-
-    .group-item--friends {
-        border-left: 3px solid var(--visibility-friends);
-    }
-
-    .group-item--private {
-        border-left: 3px solid var(--visibility-private);
-    }
-
-    .group-item.is-active {
-    }
-
-    .group-empty {
-        text-align: center;
-        font-size: 12px;
-        padding: 12px 0;
-    }
-
-    .group-item--new {
-        border-style: dashed;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        font-size: 14px;
-    }
-
-    .group-item__input {
-        width: 100%;
-    }
-
-    .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;
-    }
-
-    .favorites-content__edit {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 13px;
-    }
-
-    .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(
-            var(--favorites-grid-columns, 1),
-            minmax(var(--favorites-card-min-width, 240px), var(--favorites-card-target-width, 1fr))
-        );
-        gap: var(--favorites-card-gap, 12px);
-        justify-content: start;
-        padding-bottom: 12px;
-    }
-
-    .favorites-card-list {
-        display: grid;
-        grid-template-columns: repeat(
-            var(--favorites-grid-columns, 1),
-            minmax(var(--favorites-card-min-width, 260px), var(--favorites-card-target-width, 1fr))
-        );
-        gap: var(--favorites-card-gap, 12px);
-        justify-content: start;
-        padding: 4px 2px 12px 2px;
-    }
-
-    .favorites-card-list::after {
-        content: '';
-    }
-
-    :deep(.favorites-search-card--friend) {
-        min-width: var(--favorites-card-min-width, 240px);
-        max-width: var(--favorites-card-target-width, 320px);
-    }
-
-    :deep(.favorites-search-card) {
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        border: 1px solid var(--border);
-        border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
-        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 8px);
-        cursor: pointer;
-        transition: background-color 0.15s ease;
-        width: 100%;
-        min-width: var(--favorites-card-min-width, 240px);
-        max-width: var(--favorites-card-target-width, 320px);
-    }
-
-    :deep(.favorites-search-card:hover) {
-        background-color: var(--accent);
-    }
-
-    :deep(.favorites-search-card.is-selected) {
-    }
-
-    :deep(.favorites-search-card__content) {
-        display: flex;
-        align-items: center;
-        gap: var(--favorites-card-content-gap, 8px);
-        flex: 1;
-        min-width: 0;
-    }
-
-    :deep(.favorites-search-card__avatar) {
-        width: calc(48px * var(--favorites-card-scale, 1));
-        height: calc(48px * var(--favorites-card-scale, 1));
-        border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
-        overflow: hidden;
-        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: calc(13px * var(--favorites-card-scale, 1));
-        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: calc(12px * var(--favorites-card-scale, 1));
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    :deep(.favorites-search-card__title) {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-
-    :deep(.favorites-search-card__badges) {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        font-size: 14px;
-    }
-
-    :deep(.favorites-search-card__actions) {
-        display: flex;
-        flex-direction: column;
-        gap: var(--favorites-card-action-gap, 8px);
-        margin-left: var(--favorites-card-action-margin, 8px);
-        align-items: center;
-        justify-content: center;
-        flex: 0 0 auto;
-        min-width: 48px;
-    }
-
-    :deep(.favorites-search-card__action) {
-        display: flex;
-        justify-content: flex-end;
-        width: 100%;
-    }
-
-    :deep(.favorites-search-card__dropdown) {
-        width: 100%;
-    }
-
-    :deep(.favorites-search-card__action-group) {
-        display: flex;
-        gap: var(--favorites-card-action-group-gap, 8px);
-        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: var(--favorites-card-checkbox-margin, 8px);
-    }
-
-    :deep(.favorites-search-card__action--checkbox [data-slot='checkbox']) {
-        margin: 0;
-    }
-
-    :deep(.favorites-search-card__actions:empty) {
-        display: none;
-    }
-
-    :deep(.favorites-search-card__location) {
-        font-size: 12px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    .favorites-empty {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 13px;
-        height: 100%;
-    }
-
-    .favorites-dropdown__control {
-        list-style: none;
-        padding: 12px 16px 8px;
-        min-width: 220px;
-        cursor: default;
-    }
-
-    .favorites-dropdown__control:not(:last-child) {
-    }
-
-    .favorites-dropdown__control-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 13px;
-        font-weight: 600;
-        margin-bottom: 8px;
-    }
-
-    .favorites-dropdown__control-value {
-        font-size: 12px;
-    }
-
-    .favorites-dropdown__slider {
-        padding: 0 4px 4px;
-    }
+<style>
+    @import './favorites-layout.css';
 </style>
diff --git a/src/views/Favorites/FavoritesWorld.vue b/src/views/Favorites/FavoritesWorld.vue
index 35e43b49..4c6c2e47 100644
--- a/src/views/Favorites/FavoritesWorld.vue
+++ b/src/views/Favorites/FavoritesWorld.vue
@@ -1,98 +1,37 @@
 <template>
     <div class="x-container">
-        <div class="favorites-page">
-            <div class="favorites-toolbar">
-                <div>
-                    <Select :model-value="sortFavorites" @update:modelValue="handleSortFavoritesChange">
-                        <SelectTrigger size="sm" class="favorites-toolbar__select">
-                            <span class="flex items-center gap-2">
-                                <ArrowUpDown class="h-4 w-4" />
-                                <SelectValue
-                                    :placeholder="t('view.settings.appearance.appearance.sort_favorite_by_name')" />
-                            </span>
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem
-                                    :value="false"
-                                    :text-value="t('view.settings.appearance.appearance.sort_favorite_by_name')">
-                                    {{ t('view.settings.appearance.appearance.sort_favorite_by_name') }}
-                                </SelectItem>
-                                <SelectItem
-                                    :value="true"
-                                    :text-value="t('view.settings.appearance.appearance.sort_favorite_by_date')">
-                                    {{ t('view.settings.appearance.appearance.sort_favorite_by_date') }}
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                </div>
-                <div class="favorites-toolbar__right">
-                    <InputGroupSearch
-                        v-model="worldFavoriteSearch"
-                        class="favorites-toolbar__search"
-                        :placeholder="t('view.favorite.worlds.search')"
-                        @input="searchWorldFavorites" />
-                    <DropdownMenu v-model:open="worldToolbarMenuOpen">
-                        <DropdownMenuTrigger as-child>
-                            <Button class="rounded-full" size="icon" variant="ghost"><Ellipsis /></Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent class="favorites-dropdown">
-                            <li class="favorites-dropdown__control" @click.stop>
-                                <div class="favorites-dropdown__control-header">
-                                    <span>Scale</span>
-                                    <span class="favorites-dropdown__control-value">
-                                        {{ worldCardScalePercent }}%
-                                    </span>
-                                </div>
-                                <Slider
-                                    v-model="worldCardScaleValue"
-                                    class="favorites-dropdown__slider"
-                                    :min="worldCardScaleSlider.min"
-                                    :max="worldCardScaleSlider.max"
-                                    :step="worldCardScaleSlider.step" />
-                            </li>
-                            <li class="favorites-dropdown__control" @click.stop>
-                                <div class="favorites-dropdown__control-header">
-                                    <span>Spacing</span>
-                                    <span class="favorites-dropdown__control-value">
-                                        {{ worldCardSpacingPercent }}%
-                                    </span>
-                                </div>
-                                <Slider
-                                    v-model="worldCardSpacingValue"
-                                    class="favorites-dropdown__slider"
-                                    :min="worldCardSpacingSlider.min"
-                                    :max="worldCardSpacingSlider.max"
-                                    :step="worldCardSpacingSlider.step" />
-                            </li>
-                            <DropdownMenuSeparator />
-                            <DropdownMenuItem @click="handleWorldImportClick">
-                                {{ t('view.favorite.import') }}
-                            </DropdownMenuItem>
-                            <DropdownMenuItem @click="handleWorldExportClick">
-                                {{ t('view.favorite.export') }}
-                            </DropdownMenuItem>
-                        </DropdownMenuContent>
-                    </DropdownMenu>
-                </div>
-            </div>
+        <div class="flex flex-col h-full min-h-0 pb-0">
+            <FavoritesToolbar
+                :sort-favorites="sortFavorites"
+                v-model:search-query="worldFavoriteSearch"
+                :search-placeholder="t('view.favorite.worlds.search')"
+                v-model:toolbar-menu-open="worldToolbarMenuOpen"
+                v-model:card-scale-value="worldCardScaleValue"
+                :card-scale-percent="worldCardScalePercent"
+                :card-scale-slider="worldCardScaleSlider"
+                v-model:card-spacing-value="worldCardSpacingValue"
+                :card-spacing-percent="worldCardSpacingPercent"
+                :card-spacing-slider="worldCardSpacingSlider"
+                @update:sort-favorites="handleSortFavoritesChange"
+                @search="searchWorldFavorites"
+                @import="handleWorldImportClick"
+                @export="handleWorldExportClick" />
             <ResizablePanelGroup
-                ref="worldSplitterGroupRef"
+                ref="splitterGroupRef"
                 direction="horizontal"
-                class="favorites-splitter"
-                @layout="handleWorldSplitterLayout">
+                class="flex-1 min-h-0 favorites-splitter"
+                @layout="handleLayout">
                 <ResizablePanel
-                    ref="worldSplitterPanelRef"
-                    :default-size="worldSplitterDefaultSize"
-                    :min-size="worldSplitterMinSize"
-                    :max-size="worldSplitterMaxSize"
+                    ref="splitterPanelRef"
+                    :default-size="splitterDefaultSize"
+                    :min-size="splitterMinSize"
+                    :max-size="splitterMaxSize"
                     :collapsed-size="0"
                     collapsible
                     :order="1">
-                    <div class="favorites-groups-panel">
-                        <div class="group-section">
-                            <div class="group-section__header">
+                    <div class="h-full pr-2 overflow-auto flex flex-col gap-3">
+                        <div class="flex flex-col gap-2">
+                            <div class="flex items-center justify-between font-semibold text-sm mb-[9px]">
                                 <span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
                                 <TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
                                     <Button
@@ -106,7 +45,7 @@
                                     </Button>
                                 </TooltipWrapper>
                             </div>
-                            <div class="group-section__list">
+                            <div class="flex flex-col gap-2">
                                 <template v-if="favoriteWorldGroups.length">
                                     <div
                                         v-for="group in favoriteWorldGroups"
@@ -117,15 +56,13 @@
                                             { '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 class="flex items-start justify-between mb-1 text-[13px]">
+                                            <span class="font-semibold">{{ group.displayName }}</span>
+                                            <span class="text-xs">{{ group.count }}/{{ group.capacity }}</span>
                                         </div>
-                                        <div class="group-item__bottom">
-                                            <span class="group-item__visibility">
-                                                <span class="group-item__visibility-text">{{
+                                        <div class="flex items-center justify-between gap-2">
+                                            <span class="flex items-center gap-1.5">
+                                                <span class="text-[11px] text-muted-foreground">{{
                                                     t(`view.favorite.visibility.${group.visibility}`)
                                                 }}</span>
                                             </span>
@@ -187,22 +124,22 @@
                                         :key="group.key"
                                         :class="[
                                             'group-item hover:shadow-sm',
-                                            'group-item--placeholder',
+                                            'pointer-events-none opacity-70',
                                             { '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 class="flex items-start justify-between mb-1 text-[13px]">
+                                            <span class="font-semibold">{{ group.displayName }}</span>
+                                            <span class="text-xs">--/--</span>
                                         </div>
-                                        <div class="group-item__bottom">
-                                            <div class="group-item__placeholder-tag rounded-full"></div>
+                                        <div class="flex items-center justify-between gap-2">
+                                            <div class="w-16 h-[18px] rounded-full"></div>
                                         </div>
                                     </div>
                                 </template>
                             </div>
                         </div>
-                        <div class="group-section">
-                            <div class="group-section__header">
+                        <div class="flex flex-col gap-2">
+                            <div class="flex items-center justify-between font-semibold text-sm mb-[9px]">
                                 <span>{{ t('view.favorite.worlds.local_favorites') }}</span>
                                 <Button
                                     class="rounded-full"
@@ -217,7 +154,7 @@
                                     {{ t('view.favorite.worlds.cancel_refresh') }}
                                 </Button>
                             </div>
-                            <div class="group-section__list">
+                            <div class="flex flex-col gap-2">
                                 <template v-if="localWorldFavoriteGroups.length">
                                     <div
                                         v-for="group in localWorldFavoriteGroups"
@@ -227,13 +164,11 @@
                                             { '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">
+                                        <div class="flex items-start justify-between mb-1 text-[13px]">
+                                            <span class="font-semibold">{{ group }}</span>
+                                            <div class="flex items-center flex-col">
+                                                <span class="text-xs">{{ localWorldFavGroupLength(group) }}</span>
+                                                <div class="flex items-center justify-between gap-2">
                                                     <DropdownMenu
                                                         :open="activeGroupMenu === localGroupMenuKey(group)"
                                                         @update:open="
@@ -264,12 +199,12 @@
                                         </div>
                                     </div>
                                 </template>
-                                <div v-else class="group-empty">
+                                <div v-else class="text-center text-xs py-3">
                                     <DataTableEmpty type="nodata" />
                                 </div>
                                 <div
                                     v-if="!isCreatingLocalGroup"
-                                    class="group-item hover:shadow-sm group-item--new"
+                                    class="group-item hover:shadow-sm border-dashed flex items-center justify-center gap-2 text-sm"
                                     @click="startLocalGroupCreation">
                                     <Plus />
                                     <span>{{ t('view.favorite.worlds.new_group') }}</span>
@@ -279,7 +214,7 @@
                                     ref="newLocalGroupInput"
                                     v-model="newLocalGroupName"
                                     size="sm"
-                                    class="group-item__input"
+                                    class="w-full"
                                     :placeholder="t('view.favorite.worlds.new_group')"
                                     @keyup.enter="handleLocalGroupCreationConfirm"
                                     @keyup.esc="cancelLocalGroupCreation"
@@ -288,11 +223,20 @@
                         </div>
                     </div>
                 </ResizablePanel>
-                <ResizableHandle @dragging="setWorldSplitterDragging" />
+                <ResizableHandle @dragging="splitterSetDragging" />
                 <ResizablePanel :order="2">
-                    <div class="favorites-content">
-                        <div class="favorites-content__header">
-                            <div class="favorites-content__title">
+                    <div class="flex flex-col h-full min-h-0 pl-[26px]">
+                        <FavoritesContentHeader
+                            v-model:edit-mode="worldEditMode"
+                            :edit-mode-disabled="isSearchActive"
+                            :edit-mode-visible="worldEditMode && !isSearchActive"
+                            :is-all-selected="isAllWorldsSelected"
+                            :has-selection="hasWorldSelection"
+                            @toggle-select-all="toggleSelectAllWorlds"
+                            @clear-selection="clearSelectedWorlds"
+                            @copy-selection="copySelectedWorlds"
+                            @bulk-unfavorite="showWorldBulkUnfavoriteSelectionConfirm">
+                            <template #title>
                                 <span v-if="isSearchActive">{{ t('view.favorite.worlds.search') }}</span>
                                 <template v-else-if="activeRemoteGroup">
                                     <span
@@ -306,47 +250,11 @@
                                     <small>{{ activeLocalGroupCount }}</small>
                                 </span>
                                 <span v-else>No Group Selected</span>
-                            </div>
-                            <div class="favorites-content__edit">
-                                <span>{{ t('view.favorite.edit_mode') }}</span>
-                                <Switch v-model="worldEditMode" :disabled="isSearchActive" />
-                            </div>
-                        </div>
-                        <div class="favorites-content__edit-actions">
-                            <div v-if="worldEditMode && !isSearchActive" class="favorites-content__actions">
-                                <Button size="sm" variant="outline" @click="toggleSelectAllWorlds">
-                                    {{
-                                        isAllWorldsSelected
-                                            ? t('view.favorite.deselect_all')
-                                            : t('view.favorite.select_all')
-                                    }}
-                                </Button>
-                                <Button
-                                    size="sm"
-                                    variant="secondary"
-                                    :disabled="!hasWorldSelection"
-                                    @click="clearSelectedWorlds">
-                                    {{ t('view.favorite.clear') }}
-                                </Button>
-                                <Button
-                                    size="sm"
-                                    variant="outline"
-                                    :disabled="!hasWorldSelection"
-                                    @click="copySelectedWorlds">
-                                    {{ t('view.favorite.copy') }}
-                                </Button>
-                                <Button
-                                    size="sm"
-                                    variant="outline"
-                                    :disabled="!hasWorldSelection"
-                                    @click="showWorldBulkUnfavoriteSelectionConfirm">
-                                    {{ t('view.favorite.bulk_unfavorite') }}
-                                </Button>
-                            </div>
-                        </div>
-                        <div ref="worldFavoritesContainerRef" class="favorites-content__list">
+                            </template>
+                        </FavoritesContentHeader>
+                        <div ref="worldFavoritesContainerRef" class="flex-1 min-h-0">
                             <template v-if="isSearchActive">
-                                <div class="favorites-content__scroll favorites-content__scroll--native">
+                                <div class="h-full pr-2 overflow-auto">
                                     <div
                                         v-if="worldFavoriteSearchResults.length"
                                         class="favorites-search-grid"
@@ -377,7 +285,7 @@
                                             </div>
                                         </div>
                                     </div>
-                                    <div v-else class="favorites-empty">
+                                    <div v-else class="flex items-center justify-center text-[13px] h-full">
                                         <DataTableEmpty type="nomatch" />
                                     </div>
                                 </div>
@@ -385,7 +293,7 @@
                             <template v-else>
                                 <div
                                     v-if="activeRemoteGroup && isRemoteGroupSelected"
-                                    class="favorites-content__scroll favorites-content__scroll--native">
+                                    class="h-full pr-2 overflow-auto">
                                     <template v-if="currentRemoteFavorites.length">
                                         <div
                                             class="favorites-card-list"
@@ -401,14 +309,14 @@
                                                 @click="showWorldDialog(favorite.id)" />
                                         </div>
                                     </template>
-                                    <div v-else class="favorites-empty">
+                                    <div v-else class="flex items-center justify-center text-[13px] h-full">
                                         <DataTableEmpty type="nodata" />
                                     </div>
                                 </div>
                                 <div
                                     v-else-if="activeLocalGroupName && isLocalGroupSelected"
                                     ref="localFavoritesViewportRef"
-                                    class="favorites-content__scroll favorites-content__scroll--native favorites-content__scroll--local focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+                                    class="h-full pr-2 overflow-auto favorites-content__scroll--local focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
                                     data-reka-scroll-area-viewport=""
                                     data-slot="scroll-area-viewport"
                                     tabindex="0"
@@ -425,12 +333,13 @@
                                                     :ref="localVirtualizer.measureElement"
                                                     :style="{ transform: `translateY(${item.virtualItem.start}px)` }">
                                                     <div class="favorites-card-virtual-row-grid">
-                                                        <FavoritesWorldLocalItem
+                                                        <FavoritesWorldItem
                                                             v-for="favorite in getLocalRowItems(item.row)"
                                                             :key="favorite.key"
                                                             :group="activeLocalGroupName"
                                                             :favorite="favorite.favorite"
                                                             :edit-mode="worldEditMode"
+                                                            is-local-favorite
                                                             @remove-local-world-favorite="removeLocalWorldFavorite"
                                                             @click="showWorldDialog(favorite.favorite.id)" />
                                                     </div>
@@ -438,11 +347,11 @@
                                             </template>
                                         </div>
                                     </template>
-                                    <div v-else class="favorites-empty">
+                                    <div v-else class="flex items-center justify-center text-[13px] h-full">
                                         <DataTableEmpty type="nodata" />
                                     </div>
                                 </div>
-                                <div v-else class="favorites-empty">
+                                <div v-else class="flex items-center justify-center text-[13px] h-full">
                                     <DataTableEmpty type="nodata" />
                                 </div>
                             </template>
@@ -456,11 +365,11 @@
 </template>
 
 <script setup>
-    import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-    import { ArrowUpDown, Ellipsis, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
-    import { InputGroupField, InputGroupSearch } from '@/components/ui/input-group';
+    import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+    import { Ellipsis, MoreHorizontal, Plus, RefreshCcw, RefreshCw } from 'lucide-vue-next';
     import { Button } from '@/components/ui/button';
     import { DataTableEmpty } from '@/components/ui/data-table';
+    import { InputGroupField } from '@/components/ui/input-group';
     import { Spinner } from '@/components/ui/spinner';
     import { storeToRefs } from 'pinia';
     import { toast } from 'vue-sonner';
@@ -473,32 +382,24 @@
         DropdownMenuContent,
         DropdownMenuItem,
         DropdownMenuPortal,
-        DropdownMenuSeparator,
         DropdownMenuSub,
         DropdownMenuSubContent,
         DropdownMenuSubTrigger,
         DropdownMenuTrigger
     } from '../../components/ui/dropdown-menu';
-    import {
-        Select,
-        SelectContent,
-        SelectGroup,
-        SelectItem,
-        SelectTrigger,
-        SelectValue
-    } from '../../components/ui/select';
     import { useAppearanceSettingsStore, useFavoriteStore, useModalStore, useWorldStore } from '../../stores';
     import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '../../components/ui/resizable';
     import { favoriteRequest, worldRequest } from '../../api';
-    import { Slider } from '../../components/ui/slider';
-    import { Switch } from '../../components/ui/switch';
     import { debounce } from '../../shared/utils';
     import { useFavoritesCardScaling } from './composables/useFavoritesCardScaling.js';
+    import { useFavoritesGroupPanel } from './composables/useFavoritesGroupPanel.js';
+    import { useFavoritesLocalGroups } from './composables/useFavoritesLocalGroups.js';
+    import { useFavoritesSplitter } from './composables/useFavoritesSplitter.js';
 
+    import FavoritesContentHeader from './components/FavoritesContentHeader.vue';
+    import FavoritesToolbar from './components/FavoritesToolbar.vue';
     import FavoritesWorldItem from './components/FavoritesWorldItem.vue';
-    import FavoritesWorldLocalItem from './components/FavoritesWorldLocalItem.vue';
     import WorldExportDialog from './dialogs/WorldExportDialog.vue';
-    import configRepository from '../../service/config.js';
 
     import * as workerTimers from 'worker-timers';
 
@@ -580,42 +481,55 @@
             }
         }
     });
-    const worldGroupVisibilityDotColors = {
-        public: 'bg-green-500',
-        friends: 'bg-sky-500',
-        private: 'bg-red-500'
-    };
+
     const worldGroupVisibilityOptions = ref(['public', 'friends', 'private']);
-    const worldSplitterSize = ref(260);
-    const worldSplitterFallbackWidth = typeof window !== 'undefined' && window.innerWidth ? window.innerWidth : 1200;
-    const worldSplitterGroupRef = ref(null);
-    const worldSplitterPanelRef = ref(null);
-    const worldSplitterWidth = ref(worldSplitterFallbackWidth);
-    const worldSplitterDraggingCount = ref(0);
-    let worldSplitterObserver = null;
+    const {
+        splitterGroupRef,
+        splitterPanelRef,
+        defaultSize: splitterDefaultSize,
+        minSize: splitterMinSize,
+        maxSize: splitterMaxSize,
+        handleLayout,
+        setDragging: splitterSetDragging
+    } = useFavoritesSplitter({ configKey: 'VRCX_FavoritesWorldSplitter' });
     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 refreshingLocalFavorites = ref(false);
     const worker = ref(null);
     const refreshCancelToken = ref(null);
     const worldEditMode = ref(false);
-    const activeGroupMenu = ref(null);
     const worldToolbarMenuOpen = ref(false);
+
+    const {
+        activeGroupMenu,
+        hasUserSelectedGroup: hasUserSelectedWorldGroup,
+        remoteGroupsResolved,
+        isRemoteGroupSelected,
+        isLocalGroupSelected,
+        remoteGroupMenuKey,
+        localGroupMenuKey,
+        activeRemoteGroup,
+        activeLocalGroupName,
+        activeLocalGroupCount,
+        handleGroupMenuVisible,
+        selectGroup,
+        isGroupActive,
+        ensureSelectedGroup
+    } = useFavoritesGroupPanel({
+        remoteGroups: favoriteWorldGroups,
+        localGroups: localWorldFavoriteGroups,
+        localFavorites: localWorldFavorites,
+        clearSelection: () => {
+            selectedFavoriteWorlds.value = [];
+        },
+        placeholders: WORLD_GROUP_PLACEHOLDERS
+    });
+
     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 closeWorldToolbarMenu = () => {
         worldToolbarMenuOpen.value = false;
@@ -637,116 +551,6 @@
         showExportDialog();
     }
 
-    onBeforeMount(() => {
-        loadWorldSplitterPreferences();
-    });
-
-    /**
-     *
-     */
-    async function loadWorldSplitterPreferences() {
-        const storedSize = await configRepository.getString('VRCX_FavoritesWorldSplitter', '260');
-        const parsedSize = Number(storedSize);
-        if (Number.isFinite(parsedSize) && parsedSize >= 0) {
-            worldSplitterSize.value = parsedSize;
-        }
-    }
-
-    const getWorldSplitterWidthRaw = () => {
-        const element = worldSplitterGroupRef.value?.$el ?? worldSplitterGroupRef.value;
-        const width = element?.getBoundingClientRect?.().width;
-        return Number.isFinite(width) ? width : null;
-    };
-
-    const getWorldSplitterWidth = () => {
-        const width = getWorldSplitterWidthRaw();
-        return Number.isFinite(width) && width > 0 ? width : worldSplitterFallbackWidth;
-    };
-
-    const resolveDraggingPayload = (payload) => {
-        if (typeof payload === 'boolean') {
-            return payload;
-        }
-        if (payload && typeof payload === 'object') {
-            if (typeof payload.detail === 'boolean') {
-                return payload.detail;
-            }
-            if (typeof payload.dragging === 'boolean') {
-                return payload.dragging;
-            }
-        }
-        return Boolean(payload);
-    };
-
-    const setWorldSplitterDragging = (payload) => {
-        const isDragging = resolveDraggingPayload(payload);
-        const next = worldSplitterDraggingCount.value + (isDragging ? 1 : -1);
-        worldSplitterDraggingCount.value = Math.max(0, next);
-    };
-
-    const pxToPercent = (px, groupWidth, min = 0) => {
-        const width = groupWidth ?? getWorldSplitterWidth();
-        return Math.min(100, Math.max(min, (px / width) * 100));
-    };
-
-    const percentToPx = (percent, groupWidth) => (percent / 100) * groupWidth;
-
-    const worldSplitterDefaultSize = computed(() => pxToPercent(worldSplitterSize.value, worldSplitterWidth.value, 0));
-    const worldSplitterMinSize = computed(() => pxToPercent(0, worldSplitterWidth.value, 0));
-    const worldSplitterMaxSize = computed(() => pxToPercent(360, worldSplitterWidth.value, 0));
-
-    const handleWorldSplitterLayout = (sizes) => {
-        if (!Array.isArray(sizes) || !sizes.length) {
-            return;
-        }
-
-        if (worldSplitterDraggingCount.value === 0) {
-            return;
-        }
-
-        const rawWidth = getWorldSplitterWidthRaw();
-        if (!Number.isFinite(rawWidth) || rawWidth <= 0) {
-            return;
-        }
-
-        const nextSize = sizes[0];
-        if (!Number.isFinite(nextSize)) {
-            return;
-        }
-
-        const nextPx = Math.round(percentToPx(nextSize, rawWidth));
-        const clampedPx = Math.min(360, Math.max(0, nextPx));
-        worldSplitterSize.value = clampedPx;
-        configRepository.setString('VRCX_FavoritesWorldSplitter', clampedPx.toString());
-    };
-
-    const updateWorldSplitterWidth = () => {
-        const width = getWorldSplitterWidth();
-        worldSplitterWidth.value = width;
-        const targetSize = pxToPercent(worldSplitterSize.value, width, 0);
-        worldSplitterPanelRef.value?.resize?.(targetSize);
-    };
-
-    onMounted(async () => {
-        await nextTick();
-        updateWorldSplitterWidth();
-        const element = worldSplitterGroupRef.value?.$el ?? worldSplitterGroupRef.value;
-        if (element && typeof ResizeObserver !== 'undefined') {
-            worldSplitterObserver = new ResizeObserver(updateWorldSplitterWidth);
-            worldSplitterObserver.observe(element);
-        }
-    });
-
-    watch(worldSplitterSize, (value, previous) => {
-        if (value === previous) {
-            return;
-        }
-        if (worldSplitterDraggingCount.value > 0) {
-            return;
-        }
-        updateWorldSplitterWidth();
-    });
-
     const groupedWorldFavorites = computed(() => {
         const grouped = {};
         favoriteWorlds.value.forEach((world) => {
@@ -782,28 +586,6 @@
         return entries;
     });
 
-    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 [];
@@ -959,31 +741,6 @@
 
     onMounted(() => {});
 
-    /**
-     *
-     * @param key
-     * @param visible
-     */
-    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();
-    }
-
     /**
      *
      * @param type
@@ -997,75 +754,6 @@
         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();
-    }
-
-    /**
-     *
-     * @param group
-     */
-    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;
-    }
-
-    /**
-     *
-     * @param type
-     * @param key
-     * @param options
-     */
-    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;
-        }
-        clearSelectedWorlds();
-    }
-
-    /**
-     *
-     * @param type
-     * @param key
-     */
-    function isGroupActive(type, key) {
-        return selectedGroup.value?.type === type && selectedGroup.value?.key === key;
-    }
-
     /**
      *
      * @param value
@@ -1080,40 +768,17 @@
     /**
      *
      */
-    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 });
-        });
-    }
+    const {
+        isCreatingLocalGroup,
+        newLocalGroupName,
+        newLocalGroupInput,
+        startLocalGroupCreation,
+        cancelLocalGroupCreation,
+        handleLocalGroupCreationConfirm
+    } = useFavoritesLocalGroups({
+        createGroup: newLocalWorldFavoriteGroup,
+        selectGroup
+    });
 
     /**
      *
@@ -1489,259 +1154,13 @@
 
     onBeforeUnmount(() => {
         cancelLocalWorldRefresh();
-        if (worldSplitterObserver) {
-            worldSplitterObserver.disconnect();
-            worldSplitterObserver = null;
-        }
     });
 </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-splitter :deep([data-slot='resizable-handle']) {
-        opacity: 0;
-        transition: opacity 0.2s ease;
-    }
-
-    .favorites-splitter :deep([data-slot='resizable-handle']:hover),
-    .favorites-splitter :deep([data-slot='resizable-handle']:focus-visible) {
-        opacity: 1;
-    }
-
-    .favorites-dropdown {
-        padding: 8px;
-    }
-
-    .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;
-        margin-bottom: 9px;
-    }
-
-    .group-section__list {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-    }
-
-    .group-item {
-        border-radius: var(--radius-lg);
-        border: 1px solid var(--border);
-        padding: 8px;
-        cursor: pointer;
-        transition: background-color 0.15s ease;
-    }
-
-    .group-item:hover {
-        background-color: var(--accent);
-    }
-
-    .group-item__top {
-        display: flex;
-        align-items: flex-start;
-        justify-content: space-between;
-        margin-bottom: 4px;
-        font-size: 13px;
-    }
-
-    .group-item__name {
-        font-weight: 600;
-    }
-
-    .group-item__right {
-        display: flex;
-        align-items: center;
-        flex-direction: column;
-    }
-
-    .group-item__count {
-        font-size: 12px;
-    }
-
-    .group-item__bottom {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        gap: 8px;
-    }
-
-    .group-item__visibility {
-        display: flex;
-        align-items: center;
-        gap: 6px;
-    }
-
-    .group-item__visibility-text {
-        font-size: 11px;
-        color: var(--muted-foreground);
-    }
-
-    .group-item__visibility-dot {
-        display: none;
-    }
-
-    .group-item--public {
-        border-left: 3px solid var(--visibility-public);
-    }
-
-    .group-item--friends {
-        border-left: 3px solid var(--visibility-friends);
-    }
-
-    .group-item--private {
-        border-left: 3px solid var(--visibility-private);
-    }
-
-    .group-item.is-active {
-    }
-
-    .group-item--placeholder {
-        pointer-events: none;
-        opacity: 0.7;
-    }
-
-    .group-item__placeholder-tag {
-        width: 64px;
-        height: 18px;
-    }
-
-    .group-item--new {
-        border-style: dashed;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 8px;
-        font-size: 14px;
-    }
-
-    .group-item__input {
-        width: 100%;
-    }
-
-    .group-empty {
-        text-align: center;
-        font-size: 12px;
-        padding: 12px 0;
-    }
-
-    .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;
-    }
-
-    .favorites-content__edit {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-        font-size: 13px;
-    }
-
-    .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;
-    }
+<style>
+    @import './favorites-layout.css';
 
+    /* World-specific: scrollbar for local favorites */
     .favorites-content__scroll--local {
         scrollbar-width: thin;
         scrollbar-color: var(--border) transparent;
@@ -1762,28 +1181,7 @@
         background-clip: content-box;
     }
 
-    .favorites-search-grid {
-        display: grid;
-        grid-template-columns: repeat(
-            var(--favorites-grid-columns, 1),
-            minmax(var(--favorites-card-min-width, 240px), var(--favorites-card-target-width, 1fr))
-        );
-        gap: var(--favorites-card-gap, 12px);
-        justify-content: start;
-        padding-bottom: 12px;
-    }
-
-    .favorites-card-list {
-        display: grid;
-        grid-template-columns: repeat(
-            var(--favorites-grid-columns, 1),
-            minmax(var(--favorites-card-min-width, 260px), var(--favorites-card-target-width, 1fr))
-        );
-        gap: var(--favorites-card-gap, 12px);
-        justify-content: start;
-        padding: 4px 2px 12px 2px;
-    }
-
+    /* World-specific: virtual row layout */
     .favorites-card-virtual {
         width: 100%;
         position: relative;
@@ -1810,181 +1208,4 @@
         padding: 4px 2px 0 2px;
         box-sizing: border-box;
     }
-
-    .favorites-card-list::after {
-        content: '';
-    }
-
-    :deep(.favorites-search-card--world) {
-        min-width: var(--favorites-card-min-width, 240px);
-        max-width: var(--favorites-card-target-width, 320px);
-    }
-
-    :deep(.favorites-search-card) {
-        display: flex;
-        align-items: center;
-        box-sizing: border-box;
-        border: 1px solid var(--border);
-        border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
-        padding: var(--favorites-card-padding-y, 8px) var(--favorites-card-padding-x, 8px);
-        cursor: pointer;
-        transition: background-color 0.15s ease;
-        width: 100%;
-        min-width: var(--favorites-card-min-width, 240px);
-        max-width: var(--favorites-card-target-width, 320px);
-    }
-
-    :deep(.favorites-search-card:hover) {
-        background-color: var(--accent);
-    }
-
-    :deep(.favorites-search-card.is-selected) {
-    }
-
-    :deep(.favorites-search-card__content) {
-        display: flex;
-        align-items: center;
-        gap: var(--favorites-card-content-gap, 8px);
-        flex: 1;
-        min-width: 0;
-    }
-
-    :deep(.favorites-search-card__avatar) {
-        width: calc(48px * var(--favorites-card-scale, 1));
-        height: calc(48px * var(--favorites-card-scale, 1));
-        border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
-        overflow: hidden;
-        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: calc(13px * var(--favorites-card-scale, 1));
-        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: calc(12px * var(--favorites-card-scale, 1));
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-    }
-
-    :deep(.favorites-search-card__title) {
-        display: flex;
-        align-items: center;
-        gap: 8px;
-    }
-
-    :deep(.favorites-search-card__badges) {
-        display: inline-flex;
-        align-items: center;
-        gap: 4px;
-        font-size: 14px;
-    }
-
-    :deep(.favorites-search-card__actions) {
-        display: flex;
-        flex-direction: column;
-        gap: var(--favorites-card-action-gap, 8px);
-        margin-left: var(--favorites-card-action-margin, 8px);
-        align-items: center;
-        justify-content: center;
-        flex: 0 0 auto;
-        min-width: 48px;
-    }
-
-    :deep(.favorites-search-card__action) {
-        display: flex;
-        justify-content: flex-end;
-        width: 100%;
-    }
-
-    :deep(.favorites-search-card__dropdown) {
-        width: 100%;
-    }
-
-    :deep(.favorites-search-card__action-group) {
-        display: flex;
-        gap: var(--favorites-card-action-group-gap, 8px);
-        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: var(--favorites-card-checkbox-margin, 8px);
-    }
-
-    :deep(.favorites-search-card__action--checkbox [data-slot='checkbox']) {
-        margin: 0;
-    }
-
-    :deep(.favorites-search-card__actions:empty) {
-        display: none;
-    }
-
-    .favorites-empty {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 13px;
-        height: 100%;
-    }
-
-    .favorites-dropdown__control {
-        list-style: none;
-        padding: 12px 16px 8px;
-        min-width: 220px;
-        cursor: default;
-    }
-
-    .favorites-dropdown__control:not(:last-child) {
-    }
-
-    .favorites-dropdown__control-header {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: 13px;
-        font-weight: 600;
-        margin-bottom: 8px;
-    }
-
-    .favorites-dropdown__control-value {
-        font-size: 12px;
-    }
-
-    .favorites-dropdown__slider {
-        padding: 0 4px 4px;
-    }
 </style>
diff --git a/src/views/Favorites/components/FavoritesAvatarItem.vue b/src/views/Favorites/components/FavoritesAvatarItem.vue
index bdea32a2..1c7b2f2e 100644
--- a/src/views/Favorites/components/FavoritesAvatarItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarItem.vue
@@ -10,9 +10,9 @@
                             <img v-if="localFavFakeRef.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
                         </div>
                         <div class="favorites-search-card__detail">
-                            <div class="favorites-search-card__title">
+                            <div class="flex items-center gap-2">
                                 <span class="name text-sm">{{ localFavFakeRef.name }}</span>
-                                <span class="favorites-search-card__badges">
+                                <span class="inline-flex items-center gap-1 text-sm">
                                     <TooltipWrapper
                                         v-if="favorite.deleted"
                                         side="top"
@@ -34,23 +34,21 @@
                         <template v-if="editMode">
                             <div
                                 v-if="!isLocalFavorite"
-                                class="favorites-search-card__action favorites-search-card__action--checkbox"
+                                class="flex justify-end w-full favorites-search-card__action--checkbox"
                                 @click.stop>
                                 <Checkbox v-model="isSelected" />
                             </div>
-                            <div class="favorites-search-card__action-group">
-                                <div
-                                    class="favorites-search-card__action favorites-search-card__action--full"
-                                    @click.stop>
+                            <div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
+                                <div class="flex justify-end w-full flex-1" @click.stop>
                                     <FavoritesMoveDropdown
                                         :favoriteGroup="favoriteAvatarGroups"
                                         :currentFavorite="props.favorite"
                                         :currentGroup="group"
-                                        class="favorites-search-card__dropdown"
+                                        class="w-full"
                                         :is-local-favorite="isLocalFavorite"
                                         type="avatar" />
                                 </div>
-                                <div class="favorites-search-card__action">
+                                <div class="flex justify-end w-full">
                                     <TooltipWrapper
                                         side="left"
                                         :content="
@@ -70,8 +68,8 @@
                             </div>
                         </template>
                         <template v-else>
-                            <div class="favorites-search-card__action-group">
-                                <div class="favorites-search-card__action" v-if="canSelectAvatar">
+                            <div class="flex gap-(--favorites-card-action-group-gap,8px) w-full">
+                                <div class="flex justify-end w-full" v-if="canSelectAvatar">
                                     <TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
                                         <Button
                                             size="icon-sm"
@@ -83,7 +81,7 @@
                                         /></Button>
                                     </TooltipWrapper>
                                 </div>
-                                <div class="favorites-search-card__action">
+                                <div class="flex justify-end w-full">
                                     <TooltipWrapper
                                         v-if="showDangerUnfavorite"
                                         side="bottom"
@@ -121,7 +119,7 @@
                         </div>
                     </div>
                     <div class="favorites-search-card__actions">
-                        <div class="favorites-search-card__action">
+                        <div class="flex justify-end w-full">
                             <Button
                                 class="rounded-full text-xs h-6 w-6"
                                 size="icon-sm"
@@ -238,13 +236,6 @@
     }
 </script>
 
-<style scoped>
-    .favorites-search-card img {
-        filter: saturate(0.8) contrast(0.8);
-        transition: filter 0.2s ease;
-    }
-
-    .favorites-search-card:hover img {
-        filter: saturate(1) contrast(1);
-    }
+<style>
+    @import './favorites-card.css';
 </style>
diff --git a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
index 5a4a0e1c..edf5ce69 100644
--- a/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
+++ b/src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
@@ -7,15 +7,15 @@
                         <img v-if="favorite.thumbnailImageUrl" :src="smallThumbnail" loading="lazy" />
                     </div>
                     <div class="favorites-search-card__detail">
-                        <div class="favorites-search-card__title">
+                        <div class="flex items-center gap-2">
                             <span class="name text-sm">{{ favorite.name }}</span>
                         </div>
                         <span class="text-xs">{{ favorite.authorName }}</span>
                     </div>
                 </div>
                 <div class="favorites-search-card__actions">
-                    <div class="favorites-search-card__action-group">
-                        <div class="favorites-search-card__action">
+                    <div class="flex gap-(--favorites-card-action-group-gap,8px) w-full">
+                        <div class="flex justify-end w-full">
                             <TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
                                 <Button
                                     size="icon-sm"
@@ -28,7 +28,7 @@
                                 >
                             </TooltipWrapper>
                         </div>
-                        <div class="favorites-search-card__action">
+                        <div class="flex justify-end w-full">
                             <TooltipWrapper side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
                                 <Button
                                     v-if="favoriteExists"
@@ -99,13 +99,6 @@
     });
 </script>
 
-<style scoped>
-    .favorites-search-card img {
-        filter: saturate(0.8) contrast(0.8);
-        transition: filter 0.2s ease;
-    }
-
-    .favorites-search-card:hover img {
-        filter: saturate(1) contrast(1);
-    }
+<style>
+    @import './favorites-card.css';
 </style>
diff --git a/src/views/Favorites/components/FavoritesContentHeader.vue b/src/views/Favorites/components/FavoritesContentHeader.vue
new file mode 100644
index 00000000..fcec308b
--- /dev/null
+++ b/src/views/Favorites/components/FavoritesContentHeader.vue
@@ -0,0 +1,54 @@
+<template>
+    <div class="flex items-center justify-between gap-3 mb-3">
+        <div class="flex flex-col gap-0.5 text-base font-semibold pl-0.5 [&_small]:text-xs [&_small]:font-normal">
+            <slot name="title" />
+        </div>
+        <div class="flex items-center gap-2 text-[13px]">
+            <span>{{ t('view.favorite.edit_mode') }}</span>
+            <Switch
+                :model-value="editMode"
+                :disabled="editModeDisabled"
+                @update:modelValue="$emit('update:editMode', $event)" />
+        </div>
+    </div>
+    <div class="flex items-center justify-end">
+        <div v-if="editModeVisible" class="flex flex-wrap gap-2 mb-3">
+            <Button size="sm" variant="outline" @click="$emit('toggle-select-all')">
+                {{ isAllSelected ? t('view.favorite.deselect_all') : t('view.favorite.select_all') }}
+            </Button>
+            <Button size="sm" variant="secondary" :disabled="!hasSelection" @click="$emit('clear-selection')">
+                {{ t('view.favorite.clear') }}
+            </Button>
+            <Button
+                v-if="showCopyButton"
+                size="sm"
+                variant="outline"
+                :disabled="!hasSelection"
+                @click="$emit('copy-selection')">
+                {{ t('view.favorite.copy') }}
+            </Button>
+            <Button size="sm" variant="outline" :disabled="!hasSelection" @click="$emit('bulk-unfavorite')">
+                {{ t('view.favorite.bulk_unfavorite') }}
+            </Button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { Button } from '@/components/ui/button';
+    import { Switch } from '@/components/ui/switch';
+    import { useI18n } from 'vue-i18n';
+
+    defineProps({
+        editMode: { type: Boolean, default: false },
+        editModeDisabled: { type: Boolean, default: false },
+        editModeVisible: { type: Boolean, default: false },
+        isAllSelected: { type: Boolean, default: false },
+        hasSelection: { type: Boolean, default: false },
+        showCopyButton: { type: Boolean, default: true }
+    });
+
+    defineEmits(['update:editMode', 'toggle-select-all', 'clear-selection', 'copy-selection', 'bulk-unfavorite']);
+
+    const { t } = useI18n();
+</script>
diff --git a/src/views/Favorites/components/FavoritesFriendItem.vue b/src/views/Favorites/components/FavoritesFriendItem.vue
index f1747b95..a9da4654 100644
--- a/src/views/Favorites/components/FavoritesFriendItem.vue
+++ b/src/views/Favorites/components/FavoritesFriendItem.vue
@@ -6,10 +6,10 @@
                     <img :src="userImage(favorite.ref, true)" loading="lazy" />
                 </div>
                 <div class="favorites-search-card__detail">
-                    <div class="favorites-search-card__title">
+                    <div class="flex items-center gap-2">
                         <span class="name text-sm" :style="displayNameStyle">{{ favorite.ref.displayName }}</span>
                     </div>
-                    <div v-if="favorite.ref.location !== 'offline'" class="favorites-search-card__location">
+                    <div v-if="favorite.ref.location !== 'offline'" class="text-xs truncate">
                         <Location
                             :location="favorite.ref.location"
                             :traveling="favorite.ref.travelingToLocation"
@@ -20,22 +20,19 @@
             </div>
             <div class="favorites-search-card__actions">
                 <template v-if="editMode">
-                    <div class="favorites-search-card__action favorites-search-card__action--checkbox" @click.stop>
+                    <div class="flex justify-end w-full favorites-search-card__action--checkbox" @click.stop>
                         <Checkbox v-model="isSelected" />
                     </div>
-                    <div class="favorites-search-card__action-group">
-                        <div
-                            v-if="group?.type !== 'local'"
-                            class="favorites-search-card__action favorites-search-card__action--full"
-                            @click.stop>
+                    <div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
+                        <div v-if="group?.type !== 'local'" class="flex justify-end w-full flex-1" @click.stop>
                             <FavoritesMoveDropdown
                                 :favoriteGroup="favoriteFriendGroups"
                                 :currentGroup="group"
                                 :currentFavorite="favorite"
-                                class="favorites-search-card__dropdown"
+                                class="w-full"
                                 type="friend" />
                         </div>
-                        <div class="favorites-search-card__action">
+                        <div class="flex justify-end w-full">
                             <TooltipWrapper side="left" :content="t('view.favorite.unfavorite_tooltip')">
                                 <Button
                                     size="icon-sm"
@@ -49,7 +46,7 @@
                     </div>
                 </template>
                 <template v-else>
-                    <div class="favorites-search-card__action">
+                    <div class="flex justify-end w-full">
                         <TooltipWrapper side="right" :content="t('view.favorite.edit_favorite_tooltip')">
                             <Button
                                 size="icon-sm"
@@ -71,7 +68,7 @@
                 </div>
             </div>
             <div class="favorites-search-card__actions">
-                <div class="favorites-search-card__action">
+                <div class="flex justify-end w-full">
                     <Button
                         class="rounded-full text-xs h-6 w-6"
                         size="icon-sm"
@@ -135,6 +132,9 @@
         return {};
     });
 
+    /**
+     * @returns {void}
+     */
     function handleDeleteFavorite() {
         if (props.group?.type === 'local') {
             removeLocalFriendFavorite(props.favorite.id, props.group.key);
@@ -146,13 +146,6 @@
     }
 </script>
 
-<style scoped>
-    .favorites-search-card img {
-        filter: saturate(0.8) contrast(0.8);
-        transition: filter 0.2s ease;
-    }
-
-    .favorites-search-card:hover img {
-        filter: saturate(1) contrast(1);
-    }
+<style>
+    @import './favorites-card.css';
 </style>
diff --git a/src/views/Favorites/components/FavoritesMoveDropdown.vue b/src/views/Favorites/components/FavoritesMoveDropdown.vue
index 14c5e975..c0414425 100644
--- a/src/views/Favorites/components/FavoritesMoveDropdown.vue
+++ b/src/views/Favorites/components/FavoritesMoveDropdown.vue
@@ -5,7 +5,7 @@
                 ><ArrowLeft class="h-4 w-4"
             /></Button>
         </DropdownMenuTrigger>
-        <DropdownMenuContent class="favorites-dropdown">
+        <DropdownMenuContent class="p-2">
             <span style="font-weight: bold; display: block; text-align: center">
                 {{ t(tooltipContent) }}
             </span>
diff --git a/src/views/Favorites/components/FavoritesToolbar.vue b/src/views/Favorites/components/FavoritesToolbar.vue
new file mode 100644
index 00000000..3e846dce
--- /dev/null
+++ b/src/views/Favorites/components/FavoritesToolbar.vue
@@ -0,0 +1,118 @@
+<template>
+    <div class="flex items-center justify-between gap-3 mb-3 flex-wrap">
+        <div>
+            <Select :model-value="sortFavorites" @update:modelValue="$emit('update:sortFavorites', $event)">
+                <SelectTrigger size="sm" class="min-w-[200px]">
+                    <span class="flex items-center gap-2">
+                        <ArrowUpDown class="h-4 w-4" />
+                        <SelectValue :placeholder="t('view.settings.appearance.appearance.sort_favorite_by_name')" />
+                    </span>
+                </SelectTrigger>
+                <SelectContent>
+                    <SelectGroup>
+                        <SelectItem
+                            :value="false"
+                            :text-value="t('view.settings.appearance.appearance.sort_favorite_by_name')">
+                            {{ t('view.settings.appearance.appearance.sort_favorite_by_name') }}
+                        </SelectItem>
+                        <SelectItem
+                            :value="true"
+                            :text-value="t('view.settings.appearance.appearance.sort_favorite_by_date')">
+                            {{ t('view.settings.appearance.appearance.sort_favorite_by_date') }}
+                        </SelectItem>
+                    </SelectGroup>
+                </SelectContent>
+            </Select>
+        </div>
+        <div class="flex items-center gap-2 flex-1">
+            <InputGroupSearch
+                :model-value="searchQuery"
+                class="flex-1"
+                :placeholder="searchPlaceholder"
+                @update:modelValue="$emit('update:searchQuery', $event)"
+                @input="$emit('search')" />
+            <DropdownMenu :open="toolbarMenuOpen" @update:open="$emit('update:toolbarMenuOpen', $event)">
+                <DropdownMenuTrigger as-child>
+                    <Button class="rounded-full" size="icon-sm" variant="ghost"><Ellipsis /></Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent class="p-2">
+                    <li class="list-none px-4 pt-3 pb-2 min-w-[220px] cursor-default" @click.stop>
+                        <div class="flex items-center justify-between text-[13px] font-semibold mb-2">
+                            <span>{{ t('view.friends_locations.scale') }}</span>
+                            <span class="text-xs">{{ cardScalePercent }}%</span>
+                        </div>
+                        <Slider
+                            :model-value="cardScaleValue"
+                            class="px-1 pb-1"
+                            :min="cardScaleSlider.min"
+                            :max="cardScaleSlider.max"
+                            :step="cardScaleSlider.step"
+                            @update:modelValue="$emit('update:cardScaleValue', $event)" />
+                    </li>
+                    <li class="list-none px-4 pt-3 pb-2 min-w-[220px] cursor-default" @click.stop>
+                        <div class="flex items-center justify-between text-[13px] font-semibold mb-2">
+                            <span>{{ t('view.friends_locations.spacing') }}</span>
+                            <span class="text-xs"> {{ cardSpacingPercent }}% </span>
+                        </div>
+                        <Slider
+                            :model-value="cardSpacingValue"
+                            class="px-1 pb-1"
+                            :min="cardSpacingSlider.min"
+                            :max="cardSpacingSlider.max"
+                            :step="cardSpacingSlider.step"
+                            @update:modelValue="$emit('update:cardSpacingValue', $event)" />
+                    </li>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem @click="$emit('import')">
+                        {{ t('view.favorite.import') }}
+                    </DropdownMenuItem>
+                    <DropdownMenuItem @click="$emit('export')">
+                        {{ t('view.favorite.export') }}
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+    import {
+        DropdownMenu,
+        DropdownMenuContent,
+        DropdownMenuItem,
+        DropdownMenuSeparator,
+        DropdownMenuTrigger
+    } from '@/components/ui/dropdown-menu';
+    import { ArrowUpDown, Ellipsis } from 'lucide-vue-next';
+    import { Button } from '@/components/ui/button';
+    import { InputGroupSearch } from '@/components/ui/input-group';
+    import { Slider } from '@/components/ui/slider';
+    import { useI18n } from 'vue-i18n';
+
+    defineProps({
+        sortFavorites: { type: Boolean, default: false },
+        searchQuery: { type: String, default: '' },
+        searchPlaceholder: { type: String, default: '' },
+        toolbarMenuOpen: { type: Boolean, default: false },
+        cardScaleValue: { type: Array, default: () => [50] },
+        cardScalePercent: { type: Number, default: 100 },
+        cardScaleSlider: { type: Object, default: () => ({ min: 0, max: 100, step: 1 }) },
+        cardSpacingValue: { type: Array, default: () => [50] },
+        cardSpacingPercent: { type: Number, default: 100 },
+        cardSpacingSlider: { type: Object, default: () => ({ min: 0, max: 100, step: 1 }) }
+    });
+
+    defineEmits([
+        'update:sortFavorites',
+        'update:searchQuery',
+        'update:toolbarMenuOpen',
+        'update:cardScaleValue',
+        'update:cardSpacingValue',
+        'search',
+        'import',
+        'export'
+    ]);
+
+    const { t } = useI18n();
+</script>
diff --git a/src/views/Favorites/components/FavoritesWorldItem.vue b/src/views/Favorites/components/FavoritesWorldItem.vue
index ec821310..91eaa776 100644
--- a/src/views/Favorites/components/FavoritesWorldItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldItem.vue
@@ -2,75 +2,82 @@
     <ContextMenu>
         <ContextMenuTrigger as-child>
             <div :class="cardClasses" @click="$emit('click')">
-                <template v-if="favorite.ref">
+                <template v-if="localFavRef?.name">
                     <div class="favorites-search-card__content">
                         <div
                             class="favorites-search-card__avatar"
-                            :class="{ 'is-empty': !favorite.ref.thumbnailImageUrl }"
+                            :class="{ 'is-empty': !localFavRef.thumbnailImageUrl }"
                             v-once>
                             <img
-                                v-if="favorite.ref.thumbnailImageUrl"
+                                v-if="localFavRef.thumbnailImageUrl"
                                 :src="smallThumbnail"
                                 loading="lazy"
                                 decoding="async"
                                 fetchpriority="low" />
                         </div>
                         <div class="favorites-search-card__detail">
-                            <div class="favorites-search-card__title">
-                                <span class="name text-sm">{{ props.favorite.ref.name }}</span>
+                            <div class="flex items-center gap-2">
+                                <span class="name text-sm">{{ localFavRef.name }}</span>
                                 <span
-                                    v-if="favorite.deleted || favorite.ref.releaseStatus === 'private'"
-                                    class="favorites-search-card__badges">
+                                    v-if="
+                                        !isLocalFavorite &&
+                                        (favorite.deleted || localFavRef.releaseStatus === 'private')
+                                    "
+                                    class="inline-flex items-center gap-1 text-sm">
                                     <AlertTriangle
                                         v-if="favorite.deleted"
                                         :title="t('view.favorite.unavailable_tooltip')"
                                         class="h-4 w-4" />
                                     <Lock
-                                        v-if="favorite.ref.releaseStatus === 'private'"
+                                        v-if="localFavRef.releaseStatus === 'private'"
                                         :title="t('view.favorite.private')"
                                         class="h-4 w-4" />
                                 </span>
                             </div>
                             <span class="text-xs text-muted-foreground">
-                                {{ props.favorite.ref.authorName }}
-                                <template v-if="props.favorite.ref.occupants">
-                                    ({{ props.favorite.ref.occupants }})
-                                </template>
+                                {{ localFavRef.authorName }}
+                                <template v-if="localFavRef.occupants"> ({{ localFavRef.occupants }}) </template>
                             </span>
                         </div>
                     </div>
                     <div class="favorites-search-card__actions">
                         <template v-if="editMode">
                             <div
-                                class="favorites-search-card__action favorites-search-card__action--checkbox"
+                                v-if="!isLocalFavorite"
+                                class="flex justify-end w-full favorites-search-card__action--checkbox"
                                 @click.stop>
                                 <Checkbox v-model="isSelected" />
                             </div>
-                            <div class="favorites-search-card__action-group">
-                                <div
-                                    class="favorites-search-card__action favorites-search-card__action--full"
-                                    @click.stop>
+                            <div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
+                                <div class="flex justify-end w-full flex-1" @click.stop>
                                     <FavoritesMoveDropdown
                                         :favoriteGroup="favoriteWorldGroups"
                                         :currentFavorite="props.favorite"
                                         :currentGroup="group"
-                                        class="favorites-search-card__dropdown"
+                                        class="w-full"
+                                        :is-local-favorite="isLocalFavorite"
                                         type="world" />
                                 </div>
-                                <div class="favorites-search-card__action">
+                                <div class="flex justify-end w-full">
                                     <Button
                                         size="icon-sm"
-                                        variant="ghost"
+                                        :variant="
+                                            isLocalFavorite && shiftHeld
+                                                ? 'destructive'
+                                                : isLocalFavorite
+                                                  ? 'outline'
+                                                  : 'ghost'
+                                        "
                                         class="rounded-full text-xs h-6 w-6"
-                                        @click.stop="handleDeleteFavorite">
+                                        @click.stop="handlePrimaryDeleteAction">
                                         <Trash2 class="h-4 w-4" />
                                     </Button>
                                 </div>
                             </div>
                         </template>
                         <template v-else>
-                            <div class="favorites-search-card__action-group">
-                                <div class="favorites-search-card__action">
+                            <div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
+                                <div class="flex justify-end w-full">
                                     <TooltipWrapper side="top" :content="inviteOrLaunchText">
                                         <Button
                                             size="icon-sm"
@@ -81,7 +88,7 @@
                                         /></Button>
                                     </TooltipWrapper>
                                 </div>
-                                <div class="favorites-search-card__action">
+                                <div class="flex justify-end w-full">
                                     <TooltipWrapper
                                         v-if="showDangerUnfavorite"
                                         side="top"
@@ -117,17 +124,17 @@
                         <div class="favorites-search-card__detail" v-once>
                             <span>{{ favorite.name || favorite.id }}</span>
                             <AlertTriangle
-                                v-if="favorite.deleted"
+                                v-if="!isLocalFavorite && favorite.deleted"
                                 :title="t('view.favorite.unavailable_tooltip')"
                                 class="h-4 w-4" />
                         </div>
                     </div>
                     <div class="favorites-search-card__actions">
-                        <div class="favorites-search-card__action">
+                        <div class="flex justify-end w-full">
                             <Button
                                 class="rounded-full text-xs h-6 w-6"
                                 size="icon-sm"
-                                variant="ghost"
+                                :variant="isLocalFavorite ? 'outline' : 'ghost'"
                                 @click.stop="handleDeleteFavorite">
                                 <Trash2 class="h-4 w-4" />
                             </Button>
@@ -184,6 +191,8 @@
         set: (value) => emit('toggle-select', value)
     });
 
+    const localFavRef = computed(() => (props.isLocalFavorite ? props.favorite : props.favorite?.ref));
+
     const showDangerUnfavorite = computed(() => {
         return shiftHeld.value;
     });
@@ -198,8 +207,8 @@
     ]);
 
     const smallThumbnail = computed(() => {
-        const url = props.favorite.ref.thumbnailImageUrl?.replace('256', '128');
-        return url || props.favorite.ref.thumbnailImageUrl;
+        const url = localFavRef.value?.thumbnailImageUrl?.replace('256', '128');
+        return url || localFavRef.value?.thumbnailImageUrl;
     });
 
     const inviteOrLaunchText = computed(() => {
@@ -208,6 +217,21 @@
             : t('dialog.world.actions.new_instance_and_self_invite');
     });
 
+    /**
+     * @returns {void}
+     */
+    function handlePrimaryDeleteAction() {
+        if (props.isLocalFavorite) {
+            if (shiftHeld.value) {
+                emit('remove-local-world-favorite', props.favorite.id, props.group);
+                return;
+            }
+            showFavoriteDialog('world', props.favorite.id);
+            return;
+        }
+        deleteFavorite(props.favorite.id);
+    }
+
     /**
      *
      */
@@ -237,13 +261,6 @@
     }
 </script>
 
-<style scoped>
-    .favorites-search-card img {
-        filter: saturate(0.8) contrast(0.8);
-        transition: filter 0.2s ease;
-    }
-
-    .favorites-search-card:hover img {
-        filter: saturate(1) contrast(1);
-    }
+<style>
+    @import './favorites-card.css';
 </style>
diff --git a/src/views/Favorites/components/FavoritesWorldLocalItem.vue b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
index 632a4a73..1b714dc3 100644
--- a/src/views/Favorites/components/FavoritesWorldLocalItem.vue
+++ b/src/views/Favorites/components/FavoritesWorldLocalItem.vue
@@ -13,7 +13,7 @@
                                 fetchpriority="low" />
                         </div>
                         <div class="favorites-search-card__detail">
-                            <div class="favorites-search-card__title">
+                            <div class="flex items-center gap-2">
                                 <span class="name text-sm">{{ props.favorite.name }}</span>
                             </div>
                             <span class="text-xs">
@@ -24,18 +24,16 @@
                     </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>
+                            <div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
+                                <div class="flex justify-end w-full flex-1" @click.stop>
                                     <FavoritesMoveDropdown
                                         :favoriteGroup="favoriteWorldGroups"
                                         :currentFavorite="props.favorite"
-                                        class="favorites-search-card__dropdown"
+                                        class="w-full"
                                         isLocalFavorite
                                         type="world" />
                                 </div>
-                                <div class="favorites-search-card__action">
+                                <div class="flex justify-end w-full">
                                     <Button
                                         size="icon-sm"
                                         :variant="shiftHeld ? 'destructive' : 'outline'"
@@ -47,8 +45,8 @@
                             </div>
                         </template>
                         <template v-else>
-                            <div class="favorites-search-card__action-group">
-                                <div class="favorites-search-card__action">
+                            <div class="flex gap-[var(--favorites-card-action-group-gap,8px)] w-full">
+                                <div class="flex justify-end w-full">
                                     <TooltipWrapper side="top" :content="inviteOrLaunchText">
                                         <Button
                                             size="icon-sm"
@@ -59,7 +57,7 @@
                                         /></Button>
                                     </TooltipWrapper>
                                 </div>
-                                <div class="favorites-search-card__action">
+                                <div class="flex justify-end w-full">
                                     <TooltipWrapper
                                         v-if="showDangerUnfavorite"
                                         side="top"
@@ -97,7 +95,7 @@
                         </div>
                     </div>
                     <div class="favorites-search-card__actions">
-                        <div class="favorites-search-card__action">
+                        <div class="flex justify-end w-full">
                             <Button
                                 class="rounded-full text-xs h-6 w-6"
                                 size="icon-sm"
@@ -173,7 +171,7 @@
     });
 
     /**
-     *
+     * @returns {void}
      */
     function handlePrimaryDeleteAction() {
         if (shiftHeld.value) {
@@ -200,13 +198,6 @@
     }
 </script>
 
-<style scoped>
-    .favorites-search-card img {
-        filter: saturate(0.8) contrast(0.8);
-        transition: filter 0.2s ease;
-    }
-
-    .favorites-search-card:hover img {
-        filter: saturate(1) contrast(1);
-    }
+<style>
+    @import './favorites-card.css';
 </style>
diff --git a/src/views/Favorites/components/__tests__/FavoritesWorldItem.test.js b/src/views/Favorites/components/__tests__/FavoritesWorldItem.test.js
new file mode 100644
index 00000000..b6bd52dd
--- /dev/null
+++ b/src/views/Favorites/components/__tests__/FavoritesWorldItem.test.js
@@ -0,0 +1,175 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { ref } from 'vue';
+
+const mocks = vi.hoisted(() => ({
+    favoriteWorldGroups: null,
+    shiftHeld: null,
+    showFavoriteDialog: vi.fn(),
+    deleteFavorite: vi.fn(),
+    newInstanceSelfInvite: vi.fn(),
+    createNewInstance: vi.fn()
+}));
+
+vi.mock('pinia', () => ({
+    storeToRefs: (store) => store
+}));
+
+vi.mock('vue-i18n', () => ({
+    useI18n: () => ({
+        t: (key) => key
+    })
+}));
+
+vi.mock('@/components/ui/context-menu', () => ({
+    ContextMenu: {
+        template: '<div><slot /></div>'
+    },
+    ContextMenuTrigger: {
+        template: '<div><slot /></div>'
+    },
+    ContextMenuContent: {
+        template: '<div><slot /></div>'
+    },
+    ContextMenuItem: {
+        emits: ['click'],
+        template: '<button @click="$emit(\'click\')"><slot /></button>'
+    }
+}));
+
+vi.mock('@/components/ui/button', () => ({
+    Button: {
+        emits: ['click'],
+        template:
+            '<button data-testid="btn" @click="$emit(\'click\', $event)"><slot /></button>'
+    }
+}));
+
+vi.mock('@/components/ui/checkbox', () => ({
+    Checkbox: {
+        props: ['modelValue'],
+        emits: ['update:modelValue'],
+        template:
+            '<input type="checkbox" :checked="modelValue" @change="$emit(\'update:modelValue\', $event.target.checked)" />'
+    }
+}));
+
+vi.mock('lucide-vue-next', () => ({
+    AlertTriangle: { template: '<i />' },
+    Lock: { template: '<i />' },
+    Mail: { template: '<i />' },
+    Plus: { template: '<i />' },
+    Star: { template: '<i />' },
+    Trash2: { template: '<i />' }
+}));
+
+vi.mock('../../../../stores', () => ({
+    useFavoriteStore: () => ({
+        favoriteWorldGroups: mocks.favoriteWorldGroups,
+        showFavoriteDialog: (...args) => mocks.showFavoriteDialog(...args)
+    }),
+    useInviteStore: () => ({
+        newInstanceSelfInvite: (...args) => mocks.newInstanceSelfInvite(...args),
+        canOpenInstanceInGame: false
+    }),
+    useInstanceStore: () => ({
+        createNewInstance: (...args) => mocks.createNewInstance(...args)
+    }),
+    useUiStore: () => ({
+        shiftHeld: mocks.shiftHeld
+    })
+}));
+
+vi.mock('../../../../api', () => ({
+    favoriteRequest: {
+        deleteFavorite: (...args) => mocks.deleteFavorite(...args)
+    }
+}));
+
+import FavoritesWorldItem from '../FavoritesWorldItem.vue';
+
+/**
+ *
+ * @param props
+ */
+function mountItem(props = {}) {
+    return mount(FavoritesWorldItem, {
+        props: {
+            favorite: {
+                id: 'wrld_default',
+                name: 'Default World',
+                authorName: 'Author'
+            },
+            group: 'Favorites',
+            isLocalFavorite: true,
+            editMode: false,
+            ...props
+        },
+        global: {
+            stubs: {
+                TooltipWrapper: {
+                    template: '<div><slot /></div>'
+                },
+                FavoritesMoveDropdown: {
+                    template: '<div />'
+                }
+            }
+        }
+    });
+}
+
+describe('FavoritesWorldItem.vue', () => {
+    beforeEach(() => {
+        mocks.favoriteWorldGroups = ref([]);
+        mocks.shiftHeld = ref(false);
+        mocks.showFavoriteDialog.mockReset();
+        mocks.deleteFavorite.mockReset();
+        mocks.newInstanceSelfInvite.mockReset();
+        mocks.createNewInstance.mockReset();
+    });
+
+    it('renders fallback text when local favorite has no name', () => {
+        const wrapper = mountItem({
+            favorite: {
+                id: 'wrld_missing_name'
+            }
+        });
+
+        expect(wrapper.text()).toContain('wrld_missing_name');
+    });
+
+    it('emits local remove event in fallback mode when delete is clicked', async () => {
+        const wrapper = mountItem({
+            favorite: {
+                id: 'wrld_missing_name'
+            },
+            group: 'LocalGroup'
+        });
+
+        await wrapper.get('[data-testid="btn"]').trigger('click');
+
+        expect(wrapper.emitted('remove-local-world-favorite')).toEqual([
+            ['wrld_missing_name', 'LocalGroup']
+        ]);
+        expect(mocks.deleteFavorite).not.toHaveBeenCalled();
+    });
+
+    it('opens local favorite dialog in edit mode when shift is not held', async () => {
+        const wrapper = mountItem({
+            favorite: {
+                id: 'wrld_local_1',
+                name: 'Local World',
+                authorName: 'Author'
+            },
+            editMode: true
+        });
+
+        await wrapper.get('[data-testid="btn"]').trigger('click');
+
+        expect(mocks.showFavoriteDialog).toHaveBeenCalledWith(
+            'world',
+            'wrld_local_1'
+        );
+        expect(wrapper.emitted('remove-local-world-favorite')).toBeUndefined();
+    });
+});
diff --git a/src/views/Favorites/components/favorites-card.css b/src/views/Favorites/components/favorites-card.css
new file mode 100644
index 00000000..69939122
--- /dev/null
+++ b/src/views/Favorites/components/favorites-card.css
@@ -0,0 +1,119 @@
+/**
+ * Shared card styles for all Favorites item components.
+ * FavoritesAvatar.vue, FavoritesFriend.vue, and FavoritesWorld.vue.
+ */
+
+.favorites-search-card {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    border: 1px solid var(--border);
+    border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
+    padding: var(--favorites-card-padding-y, 8px)
+        var(--favorites-card-padding-x, 8px);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    width: 100%;
+    min-width: var(--favorites-card-min-width, 240px);
+    max-width: var(--favorites-card-target-width, 320px);
+}
+
+.favorites-search-card:hover {
+    background-color: var(--accent);
+}
+
+.favorites-search-card__content {
+    display: flex;
+    align-items: center;
+    gap: var(--favorites-card-content-gap, 8px);
+    flex: 1;
+    min-width: 0;
+}
+
+.favorites-search-card__avatar {
+    width: calc(48px * var(--favorites-card-scale, 1));
+    height: calc(48px * var(--favorites-card-scale, 1));
+    border-radius: calc(var(--radius-lg) * var(--favorites-card-scale, 1));
+    overflow: hidden;
+    flex-shrink: 0;
+}
+
+.favorites-search-card__avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    filter: saturate(0.8) contrast(0.8);
+    transition: filter 0.2s ease;
+}
+
+.favorites-search-card:hover .favorites-search-card__avatar img {
+    filter: saturate(1) contrast(1);
+}
+
+.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
+    );
+}
+
+.favorites-search-card__detail {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-size: calc(13px * var(--favorites-card-scale, 1));
+    min-width: 0;
+}
+
+.favorites-search-card__detail .name {
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.favorites-search-card__detail .extra {
+    font-size: calc(12px * var(--favorites-card-scale, 1));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.favorites-search-card__actions {
+    display: flex;
+    flex-direction: column;
+    gap: var(--favorites-card-action-gap, 8px);
+    margin-left: var(--favorites-card-action-margin, 8px);
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
+    min-width: 48px;
+}
+
+.favorites-search-card__actions:empty {
+    display: none;
+}
+
+.favorites-search-card__action-group .favorites-search-card__action--full {
+    flex: 1;
+}
+
+.favorites-search-card__action--checkbox {
+    align-items: center;
+    justify-content: flex-end;
+    margin-right: var(--favorites-card-checkbox-margin, 8px);
+}
+
+.favorites-search-card__action--checkbox [data-slot='checkbox'] {
+    margin: 0;
+}
+
+/* Entity-specific overrides */
+
+.favorites-search-card--avatar {
+    min-width: var(--favorites-card-min-width, 240px);
+    max-width: var(--favorites-card-target-width, 320px);
+}
diff --git a/src/views/Favorites/composables/__tests__/useFavoritesGroupPanel.test.js b/src/views/Favorites/composables/__tests__/useFavoritesGroupPanel.test.js
new file mode 100644
index 00000000..c7dcc658
--- /dev/null
+++ b/src/views/Favorites/composables/__tests__/useFavoritesGroupPanel.test.js
@@ -0,0 +1,86 @@
+import { describe, expect, it, vi } from 'vitest';
+import { ref } from 'vue';
+
+import { useFavoritesGroupPanel } from '../useFavoritesGroupPanel';
+
+/**
+ *
+ * @param options
+ */
+function createPanel(options = {}) {
+    const remoteGroups = options.remoteGroups ?? ref([]);
+    const localGroups = options.localGroups ?? ref([]);
+    const localFavorites = options.localFavorites ?? ref({});
+    const clearSelection = options.clearSelection ?? vi.fn();
+    const placeholders = options.placeholders ?? [];
+    const hasHistory = options.hasHistory ?? false;
+    const historyItems = options.historyItems ?? null;
+
+    const panel = useFavoritesGroupPanel({
+        remoteGroups,
+        localGroups,
+        localFavorites,
+        clearSelection,
+        placeholders,
+        hasHistory,
+        historyItems
+    });
+
+    return {
+        panel,
+        remoteGroups,
+        localGroups,
+        localFavorites,
+        clearSelection,
+        historyItems
+    };
+}
+
+describe('useFavoritesGroupPanel', () => {
+    it('selects remote placeholder by default when remote groups are unresolved', () => {
+        const placeholders = [{ key: 'avatar:avatars1', displayName: 'Group 1' }];
+        const { panel, clearSelection } = createPanel({ placeholders });
+
+        panel.ensureSelectedGroup();
+
+        expect(panel.selectedGroup.value).toEqual({
+            type: 'remote',
+            key: 'avatar:avatars1'
+        });
+        expect(clearSelection).toHaveBeenCalledTimes(1);
+    });
+
+    it('falls back to another local group when selected local group is removed', () => {
+        const { panel, localGroups, clearSelection } = createPanel({
+            localGroups: ref(['A', 'B']),
+            localFavorites: ref({
+                A: [{ id: 'a1' }],
+                B: [{ id: 'b1' }]
+            })
+        });
+
+        panel.selectGroup('local', 'A', { userInitiated: true });
+        clearSelection.mockClear();
+
+        localGroups.value = ['B'];
+        panel.ensureSelectedGroup();
+
+        expect(panel.selectedGroup.value).toEqual({ type: 'local', key: 'B' });
+        expect(clearSelection).toHaveBeenCalledTimes(1);
+    });
+
+    it('falls back to history group when no remote/local groups are available', () => {
+        const historyItems = ref([{ id: 'avtr_1' }]);
+        const { panel } = createPanel({
+            hasHistory: true,
+            historyItems
+        });
+
+        panel.ensureSelectedGroup();
+
+        expect(panel.selectedGroup.value).toEqual({
+            type: 'history',
+            key: 'local-history'
+        });
+    });
+});
diff --git a/src/views/Favorites/composables/useFavoritesGroupPanel.js b/src/views/Favorites/composables/useFavoritesGroupPanel.js
new file mode 100644
index 00000000..4f6cbe5b
--- /dev/null
+++ b/src/views/Favorites/composables/useFavoritesGroupPanel.js
@@ -0,0 +1,206 @@
+import { computed, ref } from 'vue';
+
+/**
+ * @param {object} options
+ * @param {import('vue').Ref<Array>} options.remoteGroups - remote groups ref
+ * @param {import('vue').Ref<Array>} options.localGroups - local groups ref (string keys)
+ * @param {import('vue').Ref<object>} options.localFavorites - local favorites map { groupKey: items[] }
+ * @param {Function} options.clearSelection - callback to clear entity selection
+ * @param {Array} [options.placeholders] - placeholder groups when remote data not yet loaded
+ * @param {boolean} [options.hasHistory] - whether history group type is supported (Avatar only)
+ * @param {import('vue').Ref<Array>} [options.historyItems] - items for history group
+ * @returns {object}
+ */
+export function useFavoritesGroupPanel(options = {}) {
+    const {
+        remoteGroups,
+        localGroups,
+        localFavorites,
+        clearSelection,
+        placeholders = [],
+        hasHistory = false,
+        historyItems = null
+    } = options;
+
+    const selectedGroup = ref(null);
+    const activeGroupMenu = ref(null);
+    const hasUserSelectedGroup = ref(false);
+    const remoteGroupsResolved = ref(false);
+
+    const isRemoteGroupSelected = computed(
+        () => selectedGroup.value?.type === 'remote'
+    );
+    const isLocalGroupSelected = computed(
+        () => selectedGroup.value?.type === 'local'
+    );
+    const isHistorySelected = computed(
+        () => hasHistory && selectedGroup.value?.type === 'history'
+    );
+
+    const remoteGroupMenuKey = (key) => `remote:${key}`;
+    const localGroupMenuKey = (key) => `local:${key}`;
+
+    const activeRemoteGroup = computed(() => {
+        if (!isRemoteGroupSelected.value) {
+            return null;
+        }
+        return (
+            remoteGroups.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 = localFavorites.value[activeLocalGroupName.value];
+        return favorites ? favorites.length : 0;
+    });
+
+    /**
+     *
+     * @param key {string}
+     * @param visible {boolean}
+     */
+    function handleGroupMenuVisible(key, visible) {
+        if (visible) {
+            activeGroupMenu.value = key;
+            return;
+        }
+        if (activeGroupMenu.value === key) {
+            activeGroupMenu.value = null;
+        }
+    }
+
+    /**
+     *
+     * @param type {string}
+     * @param key {string}
+     * @param options {object}
+     * @param opts {object}
+     */
+    function selectGroup(type, key, opts = {}) {
+        if (
+            selectedGroup.value?.type === type &&
+            selectedGroup.value?.key === key
+        ) {
+            return;
+        }
+        selectedGroup.value = { type, key };
+        if (opts.userInitiated) {
+            hasUserSelectedGroup.value = true;
+        }
+        clearSelection();
+    }
+
+    /**
+     *
+     * @param type {string}
+     * @param key {string}
+     * @returns {boolean}
+     */
+    function isGroupActive(type, key) {
+        return (
+            selectedGroup.value?.type === type &&
+            selectedGroup.value?.key === key
+        );
+    }
+
+    /**
+     *
+     * @param group {object}
+     * @returns {boolean}
+     */
+    function isGroupAvailable(group) {
+        if (!group) {
+            return false;
+        }
+        if (group.type === 'remote') {
+            if (placeholders.length && !remoteGroupsResolved.value) {
+                return true;
+            }
+            return remoteGroups.value.some((item) => item.key === group.key);
+        }
+        if (group.type === 'local') {
+            return localGroups.value.includes(group.key);
+        }
+        if (group.type === 'history' && hasHistory && historyItems) {
+            return historyItems.value.length > 0;
+        }
+        return false;
+    }
+
+    /**
+     * @returns {void}
+     */
+    function selectDefaultGroup() {
+        if (!hasUserSelectedGroup.value && placeholders.length) {
+            const remote =
+                remoteGroups.value.find((group) => group.count > 0) ||
+                remoteGroups.value[0] ||
+                placeholders[0];
+            if (remote) {
+                selectGroup('remote', remote.key);
+                return;
+            }
+        } else if (remoteGroups.value.length) {
+            const remote =
+                remoteGroups.value.find((group) => group.count > 0) ||
+                remoteGroups.value[0];
+            if (remote) {
+                selectGroup('remote', remote.key);
+                return;
+            }
+        }
+        if (localGroups.value.length) {
+            selectGroup('local', localGroups.value[0]);
+            return;
+        }
+        if (hasHistory && historyItems && historyItems.value.length) {
+            selectGroup('history', 'local-history');
+            return;
+        }
+        selectedGroup.value = null;
+        clearSelection();
+    }
+
+    /**
+     * @returns {void}
+     */
+    function ensureSelectedGroup() {
+        if (selectedGroup.value && isGroupAvailable(selectedGroup.value)) {
+            return;
+        }
+        selectDefaultGroup();
+    }
+
+    return {
+        selectedGroup,
+        activeGroupMenu,
+        hasUserSelectedGroup,
+        remoteGroupsResolved,
+        isRemoteGroupSelected,
+        isLocalGroupSelected,
+        isHistorySelected,
+        remoteGroupMenuKey,
+        localGroupMenuKey,
+        activeRemoteGroup,
+        activeLocalGroupName,
+        activeLocalGroupCount,
+        handleGroupMenuVisible,
+        selectGroup,
+        isGroupActive,
+        isGroupAvailable,
+        selectDefaultGroup,
+        ensureSelectedGroup
+    };
+}
diff --git a/src/views/Favorites/composables/useFavoritesLocalGroups.js b/src/views/Favorites/composables/useFavoritesLocalGroups.js
new file mode 100644
index 00000000..b1ab40ac
--- /dev/null
+++ b/src/views/Favorites/composables/useFavoritesLocalGroups.js
@@ -0,0 +1,64 @@
+import { nextTick, ref } from 'vue';
+
+/**
+ * @param {object} options
+ * @param {Function} options.createGroup - store function to create a new local group
+ * @param {Function} options.selectGroup - function to select a group after creation
+ * @returns {object}
+ */
+export function useFavoritesLocalGroups(options = {}) {
+    const { createGroup, selectGroup, canCreate = () => true } = options;
+
+    const isCreatingLocalGroup = ref(false);
+    const newLocalGroupName = ref('');
+    const newLocalGroupInput = ref(null);
+
+    /**
+     * @returns {void}
+     */
+    function startLocalGroupCreation() {
+        if (!canCreate() || isCreatingLocalGroup.value) {
+            return;
+        }
+        isCreatingLocalGroup.value = true;
+        newLocalGroupName.value = '';
+        nextTick(() => {
+            const el =
+                newLocalGroupInput.value?.$el ?? newLocalGroupInput.value;
+            el?.focus?.();
+        });
+    }
+
+    /**
+     * @returns {void}
+     */
+    function cancelLocalGroupCreation() {
+        isCreatingLocalGroup.value = false;
+        newLocalGroupName.value = '';
+    }
+
+    /**
+     * @returns {void}
+     */
+    function handleLocalGroupCreationConfirm() {
+        const name = newLocalGroupName.value.trim();
+        if (!name) {
+            cancelLocalGroupCreation();
+            return;
+        }
+        createGroup(name);
+        cancelLocalGroupCreation();
+        nextTick(() => {
+            selectGroup('local', name, { userInitiated: true });
+        });
+    }
+
+    return {
+        isCreatingLocalGroup,
+        newLocalGroupName,
+        newLocalGroupInput,
+        startLocalGroupCreation,
+        cancelLocalGroupCreation,
+        handleLocalGroupCreationConfirm
+    };
+}
diff --git a/src/views/Favorites/composables/useFavoritesSplitter.js b/src/views/Favorites/composables/useFavoritesSplitter.js
new file mode 100644
index 00000000..4c8dfe02
--- /dev/null
+++ b/src/views/Favorites/composables/useFavoritesSplitter.js
@@ -0,0 +1,176 @@
+import {
+    computed,
+    nextTick,
+    onBeforeMount,
+    onBeforeUnmount,
+    onMounted,
+    ref,
+    watch
+} from 'vue';
+
+import configRepository from '../../../service/config.js';
+
+/**
+ * @param {object} options
+ * @param {string} options.configKey
+ * @param {number} [options.defaultSize]
+ * @param {number} [options.maxPx]
+ * @param {number} [options.minPx]
+ * @returns {object}
+ */
+export function useFavoritesSplitter(options = {}) {
+    const configKey = options.configKey ?? '';
+    const defaultSize = options.defaultSize ?? 260;
+    const maxPx = options.maxPx ?? 360;
+    const minPx = options.minPx ?? 0;
+
+    const splitterFallbackWidth =
+        typeof window !== 'undefined' && window.innerWidth
+            ? window.innerWidth
+            : 1200;
+
+    const splitterSize = ref(defaultSize);
+    const splitterGroupRef = ref(null);
+    const splitterPanelRef = ref(null);
+    const splitterWidth = ref(splitterFallbackWidth);
+    const splitterDraggingCount = ref(0);
+    let splitterObserver = null;
+
+    /**
+     *
+     */
+    async function loadSplitterPreferences() {
+        const storedSize = await configRepository.getString(
+            configKey,
+            String(defaultSize)
+        );
+        const parsedSize = Number(storedSize);
+        if (Number.isFinite(parsedSize) && parsedSize >= 0) {
+            splitterSize.value = parsedSize;
+        }
+    }
+
+    const getSplitterWidthRaw = () => {
+        const element = splitterGroupRef.value?.$el ?? splitterGroupRef.value;
+        const width = element?.getBoundingClientRect?.().width;
+        return Number.isFinite(width) ? width : null;
+    };
+
+    const getSplitterWidth = () => {
+        const width = getSplitterWidthRaw();
+        return Number.isFinite(width) && width > 0
+            ? width
+            : splitterFallbackWidth;
+    };
+
+    const resolveDraggingPayload = (payload) => {
+        if (typeof payload === 'boolean') {
+            return payload;
+        }
+        if (payload && typeof payload === 'object') {
+            if (typeof payload.detail === 'boolean') {
+                return payload.detail;
+            }
+            if (typeof payload.dragging === 'boolean') {
+                return payload.dragging;
+            }
+        }
+        return Boolean(payload);
+    };
+
+    const setDragging = (payload) => {
+        const isDragging = resolveDraggingPayload(payload);
+        const next = splitterDraggingCount.value + (isDragging ? 1 : -1);
+        splitterDraggingCount.value = Math.max(0, next);
+    };
+
+    const pxToPercent = (px, groupWidth, min = 0) => {
+        const width = groupWidth ?? getSplitterWidth();
+        return Math.min(100, Math.max(min, (px / width) * 100));
+    };
+
+    const percentToPx = (percent, groupWidth) => (percent / 100) * groupWidth;
+
+    const defaultSizePercent = computed(() =>
+        pxToPercent(splitterSize.value, splitterWidth.value, 0)
+    );
+    const minSizePercent = computed(() =>
+        pxToPercent(minPx, splitterWidth.value, 0)
+    );
+    const maxSizePercent = computed(() =>
+        pxToPercent(maxPx, splitterWidth.value, 0)
+    );
+
+    const handleLayout = (sizes) => {
+        if (!Array.isArray(sizes) || !sizes.length) {
+            return;
+        }
+
+        if (splitterDraggingCount.value === 0) {
+            return;
+        }
+
+        const rawWidth = getSplitterWidthRaw();
+        if (!Number.isFinite(rawWidth) || rawWidth <= 0) {
+            return;
+        }
+
+        const nextSize = sizes[0];
+        if (!Number.isFinite(nextSize)) {
+            return;
+        }
+
+        const nextPx = Math.round(percentToPx(nextSize, rawWidth));
+        const clampedPx = Math.min(maxPx, Math.max(minPx, nextPx));
+        splitterSize.value = clampedPx;
+        configRepository.setString(configKey, clampedPx.toString());
+    };
+
+    const updateSplitterWidth = () => {
+        const width = getSplitterWidth();
+        splitterWidth.value = width;
+        const targetSize = pxToPercent(splitterSize.value, width, 0);
+        splitterPanelRef.value?.resize?.(targetSize);
+    };
+
+    onBeforeMount(() => {
+        loadSplitterPreferences();
+    });
+
+    onMounted(async () => {
+        await nextTick();
+        updateSplitterWidth();
+        const element = splitterGroupRef.value?.$el ?? splitterGroupRef.value;
+        if (element && typeof ResizeObserver !== 'undefined') {
+            splitterObserver = new ResizeObserver(updateSplitterWidth);
+            splitterObserver.observe(element);
+        }
+    });
+
+    watch(splitterSize, (value, previous) => {
+        if (value === previous) {
+            return;
+        }
+        if (splitterDraggingCount.value > 0) {
+            return;
+        }
+        updateSplitterWidth();
+    });
+
+    onBeforeUnmount(() => {
+        if (splitterObserver) {
+            splitterObserver.disconnect();
+            splitterObserver = null;
+        }
+    });
+
+    return {
+        splitterGroupRef,
+        splitterPanelRef,
+        defaultSize: defaultSizePercent,
+        minSize: minSizePercent,
+        maxSize: maxSizePercent,
+        handleLayout,
+        setDragging
+    };
+}
diff --git a/src/views/Favorites/favorites-layout.css b/src/views/Favorites/favorites-layout.css
new file mode 100644
index 00000000..74bd2b18
--- /dev/null
+++ b/src/views/Favorites/favorites-layout.css
@@ -0,0 +1,76 @@
+/**
+ * Shared layout styles for Favorites tab pages.
+ * FavoritesAvatar.vue, FavoritesFriend.vue, and FavoritesWorld.vue.
+ */
+
+/* ============ Splitter ============ */
+
+.favorites-splitter [data-slot='resizable-handle'] {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.favorites-splitter [data-slot='resizable-handle']:hover,
+.favorites-splitter [data-slot='resizable-handle']:focus-visible {
+    opacity: 1;
+}
+
+/* ============ Group Item ============ */
+
+.group-item {
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--border);
+    padding: 8px;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+}
+
+.group-item:hover {
+    background-color: var(--accent);
+}
+
+.group-item--public {
+    border-left: 3px solid var(--visibility-public);
+}
+
+.group-item--friends {
+    border-left: 3px solid var(--visibility-friends);
+}
+
+.group-item--private {
+    border-left: 3px solid var(--visibility-private);
+}
+
+/* ============ Grid Layouts ============ */
+
+.favorites-search-grid {
+    display: grid;
+    grid-template-columns: repeat(
+        var(--favorites-grid-columns, 1),
+        minmax(
+            var(--favorites-card-min-width, 240px),
+            var(--favorites-card-target-width, 1fr)
+        )
+    );
+    gap: var(--favorites-card-gap, 12px);
+    justify-content: start;
+    padding-bottom: 12px;
+}
+
+.favorites-card-list {
+    display: grid;
+    grid-template-columns: repeat(
+        var(--favorites-grid-columns, 1),
+        minmax(
+            var(--favorites-card-min-width, 260px),
+            var(--favorites-card-target-width, 1fr)
+        )
+    );
+    gap: var(--favorites-card-gap, 12px);
+    justify-content: start;
+    padding: 4px 2px 12px 2px;
+}
+
+.favorites-card-list::after {
+    content: '';
+}