This commit is contained in:
pa
2026-01-18 18:52:31 +09:00
committed by Natsumi
parent 1de16dc699
commit 9081dbe2b1
19 changed files with 113 additions and 454 deletions
+8 -172
View File
@@ -150,7 +150,9 @@
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuItem variant="destructive" @click="handleRemoteClear(group)">
<DropdownMenuItem
variant="destructive"
@click="handleRemoteClear(group)">
<span>{{ t('view.favorite.clear') }}</span>
</DropdownMenuItem>
</DropdownMenuContent>
@@ -231,7 +233,9 @@
<DropdownMenuItem @click="handleCheckInvalidAvatars(group)">
<span>{{ t('view.favorite.avatars.check_invalid') }}</span>
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" @click="handleLocalDelete(group)">
<DropdownMenuItem
variant="destructive"
@click="handleLocalDelete(group)">
<span>{{ t('view.favorite.delete_tooltip') }}</span>
</DropdownMenuItem>
</DropdownMenuContent>
@@ -433,10 +437,7 @@
</div>
</template>
<template v-else-if="activeLocalGroupName">
<ScrollArea
ref="localAvatarScrollbarRef"
class="favorites-content__scroll"
@scroll="handleLocalAvatarScroll">
<ScrollArea class="favorites-content__scroll">
<template v-if="currentLocalFavorites.length">
<div
class="favorites-card-list"
@@ -539,10 +540,6 @@
displayName: `Group ${index + 1}`
}));
const LOCAL_AVATAR_PAGE_SIZE = 20;
const LOCAL_AVATAR_SCROLL_THRESHOLD = 120;
const LOCAL_AVATAR_VIEWPORT_BUFFER = 32;
const avatarGroupVisibilityOptions = ref(['public', 'friends', 'private']);
const historyGroupKey = 'local-history';
const avatarSplitterSize = ref(260);
@@ -640,12 +637,9 @@
const isCreatingLocalGroup = ref(false);
const newLocalGroupName = ref('');
const newLocalGroupInput = ref(null);
const sliceLocalAvatarFavoritesLoadMoreNumber = ref(60);
const refreshingLocalFavorites = ref(false);
const worker = ref(null);
const refreshCancelToken = ref(null);
const localAvatarScrollbarRef = ref(null);
const localAvatarLoadingMore = ref(false);
const avatarGroupPlaceholders = AVATAR_GROUP_PLACEHOLDERS;
const hasUserSelectedAvatarGroup = ref(false);
const remoteAvatarGroupsResolved = ref(false);
@@ -805,16 +799,6 @@
return grouped;
});
const sliceLocalAvatarFavorites = computed(() => {
return (group) => {
const favorites = localAvatarFavorites.value[group];
if (!favorites) {
return [];
}
return favorites.slice(0, sliceLocalAvatarFavoritesLoadMoreNumber.value);
};
});
const activeRemoteGroup = computed(() => {
if (!isRemoteGroupSelected.value) {
return null;
@@ -848,7 +832,7 @@
if (!activeLocalGroupName.value) {
return [];
}
return sliceLocalAvatarFavorites.value(activeLocalGroupName.value);
return localAvatarFavorites.value[activeLocalGroupName.value] || [];
});
const isAllAvatarsSelected = computed(() => {
@@ -886,11 +870,6 @@
if (active && avatarEditMode.value) {
avatarEditMode.value = false;
}
if (!active) {
nextTick(() => {
maybeFillLocalAvatarViewport();
});
}
});
watch(
@@ -902,30 +881,6 @@
}
);
watch(
() => ({
group: activeLocalGroupName.value,
visible: currentLocalFavorites.value.length,
total: activeLocalGroupCount.value,
slice: sliceLocalAvatarFavoritesLoadMoreNumber.value,
isLocal: isLocalGroupSelected.value
}),
() => {
nextTick(() => {
maybeFillLocalAvatarViewport();
});
}
);
onMounted(() => {
if (typeof window !== 'undefined') {
window.addEventListener('resize', maybeFillLocalAvatarViewport);
}
nextTick(() => {
maybeFillLocalAvatarViewport();
});
});
function handleGroupMenuVisible(key, visible) {
if (visible) {
activeGroupMenu.value = key;
@@ -999,18 +954,7 @@
if (options.userInitiated) {
hasUserSelectedAvatarGroup.value = true;
}
resetLoadMoreCounters();
clearSelectedAvatars();
if (type === 'local') {
nextTick(() => {
maybeFillLocalAvatarViewport();
});
}
}
function resetLoadMoreCounters() {
sliceLocalAvatarFavoritesLoadMoreNumber.value = 60;
localAvatarLoadingMore.value = false;
}
function isGroupActive(type, key) {
@@ -1056,59 +1000,6 @@
});
}
function handleLocalAvatarScroll() {
if (!isLocalGroupSelected.value || isSearchActive.value) {
return;
}
const wrap = localAvatarScrollbarRef.value?.viewportEl?.value;
if (!wrap) {
return;
}
const { scrollTop, clientHeight, scrollHeight } = wrap;
if (scrollTop + clientHeight >= scrollHeight - LOCAL_AVATAR_SCROLL_THRESHOLD) {
if (loadMoreLocalAvatarFavorites()) {
nextTick(() => {
maybeFillLocalAvatarViewport();
});
}
}
}
function loadMoreLocalAvatarFavorites() {
if (localAvatarLoadingMore.value) {
return false;
}
if (sliceLocalAvatarFavoritesLoadMoreNumber.value >= activeLocalGroupCount.value) {
return false;
}
localAvatarLoadingMore.value = true;
sliceLocalAvatarFavoritesLoadMoreNumber.value += LOCAL_AVATAR_PAGE_SIZE;
nextTick(() => {
localAvatarLoadingMore.value = false;
});
return true;
}
function maybeFillLocalAvatarViewport() {
nextTick(() => {
if (!isLocalGroupSelected.value || isSearchActive.value) {
return;
}
const wrap = localAvatarScrollbarRef.value?.viewportEl?.value;
if (!wrap) {
return;
}
if (wrap.scrollHeight > wrap.clientHeight + LOCAL_AVATAR_VIEWPORT_BUFFER) {
return;
}
if (loadMoreLocalAvatarFavorites()) {
nextTick(() => {
maybeFillLocalAvatarViewport();
});
}
});
}
function toggleAvatarSelection(id, value) {
if (value) {
if (!selectedFavoriteAvatars.value.includes(id)) {
@@ -1119,58 +1010,6 @@
}
}
function clearSelectedAvatars() {
selectedFavoriteAvatars.value = [];
}
function toggleSelectAllAvatars() {
if (!activeRemoteGroup.value) {
return;
}
if (isAllAvatarsSelected.value) {
selectedFavoriteAvatars.value = [];
} else {
selectedFavoriteAvatars.value = currentRemoteFavorites.value.map((fav) => fav.id);
}
}
function copySelectedAvatars() {
if (!selectedFavoriteAvatars.value.length) {
return;
}
const idList = selectedFavoriteAvatars.value.map((id) => `${id}\n`).join('');
avatarImportDialogInput.value = idList;
showAvatarImportDialog();
}
async function showAvatarBulkUnfavoriteSelectionConfirm() {
if (!selectedFavoriteAvatars.value.length) {
return;
}
const total = selectedFavoriteAvatars.value.length;
const result = await modalStore.confirm({
description: `Are you sure you want to unfavorite ${total} favorites?\nThis action cannot be undone.`,
title: `Trash2 ${total} favorites?`
});
if (!result.ok) {
return;
}
bulkUnfavoriteSelectedAvatars([...selectedFavoriteAvatars.value]);
}
function bulkUnfavoriteSelectedAvatars(ids) {
ids.forEach((id) => {
favoriteRequest.deleteFavorite({
objectId: id
});
});
selectedFavoriteAvatars.value = [];
avatarEditMode.value = false;
}
function showAvatarExportDialog() {
avatarExportDialogVisible.value = true;
}
@@ -1525,9 +1364,6 @@
onBeforeUnmount(() => {
cancelLocalAvatarRefresh();
if (typeof window !== 'undefined') {
window.removeEventListener('resize', maybeFillLocalAvatarViewport);
}
if (avatarSplitterObserver) {
avatarSplitterObserver.disconnect();
avatarSplitterObserver = null;
+13 -119
View File
@@ -138,7 +138,10 @@
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent side="right" align="start" class="w-[200px]">
<DropdownMenuSubContent
side="right"
align="start"
class="w-[200px]">
<DropdownMenuCheckboxItem
v-for="visibility in worldGroupVisibilityOptions"
:key="visibility"
@@ -150,7 +153,9 @@
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenuSub>
<DropdownMenuItem variant="destructive" @click="handleRemoteClear(group)">
<DropdownMenuItem
variant="destructive"
@click="handleRemoteClear(group)">
<span>{{ t('view.favorite.clear') }}</span>
</DropdownMenuItem>
</DropdownMenuContent>
@@ -227,7 +232,9 @@
<DropdownMenuItem @click="handleLocalRename(group)">
<span>{{ t('view.favorite.rename_tooltip') }}</span>
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" @click="handleLocalDelete(group)">
<DropdownMenuItem
variant="destructive"
@click="handleLocalDelete(group)">
<span>{{ t('view.favorite.delete_tooltip') }}</span>
</DropdownMenuItem>
</DropdownMenuContent>
@@ -374,9 +381,7 @@
</div>
<ScrollArea
v-else-if="activeLocalGroupName && isLocalGroupSelected"
ref="localFavoritesScrollbarRef"
class="favorites-content__scroll"
@scroll="handleLocalFavoritesScroll">
class="favorites-content__scroll">
<template v-if="currentLocalFavorites.length">
<div
class="favorites-card-list"
@@ -454,10 +459,6 @@
displayName: `Group ${index + 1}`
}));
const LOCAL_FAVORITES_PAGE_SIZE = 20;
const LOCAL_FAVORITES_SCROLL_THRESHOLD = 120;
const LOCAL_FAVORITES_VIEWPORT_BUFFER = 32;
const { t } = useI18n();
const { sortFavorites } = storeToRefs(useAppearanceSettingsStore());
const { setSortFavorites } = useAppearanceSettingsStore();
@@ -550,15 +551,12 @@
const worldGroupPlaceholders = WORLD_GROUP_PLACEHOLDERS;
const hasUserSelectedWorldGroup = ref(false);
const remoteGroupsResolved = ref(false);
const sliceLocalWorldFavoritesLoadMoreNumber = ref(60);
const refreshingLocalFavorites = ref(false);
const worker = ref(null);
const refreshCancelToken = ref(null);
const worldEditMode = ref(false);
const activeGroupMenu = ref(null);
const localFavoritesScrollbarRef = ref(null);
const worldToolbarMenuOpen = ref(false);
const localFavoritesLoadingMore = ref(false);
const hasWorldSelection = computed(() => selectedFavoriteWorlds.value.length > 0);
const hasSearchInput = computed(() => worldFavoriteSearch.value.trim().length > 0);
const isSearchActive = computed(() => worldFavoriteSearch.value.trim().length >= 3);
@@ -723,16 +721,6 @@
return entries;
});
const sliceLocalWorldFavorites = computed(() => {
return (group) => {
const favorites = localWorldFavorites.value[group];
if (!favorites) {
return [];
}
return favorites.slice(0, sliceLocalWorldFavoritesLoadMoreNumber.value);
};
});
const activeRemoteGroup = computed(() => {
if (!isRemoteGroupSelected.value) {
return null;
@@ -766,7 +754,7 @@
if (!activeLocalGroupName.value) {
return [];
}
return sliceLocalWorldFavorites.value(activeLocalGroupName.value);
return localWorldFavorites.value[activeLocalGroupName.value] || [];
});
function handleSortFavoritesChange(value) {
@@ -807,11 +795,6 @@
if (active && worldEditMode.value) {
worldEditMode.value = false;
}
if (!active) {
nextTick(() => {
maybeFillLocalFavoritesViewport();
});
}
});
watch(
@@ -823,29 +806,7 @@
}
);
watch(
() => ({
group: activeLocalGroupName.value,
visible: currentLocalFavorites.value.length,
total: activeLocalGroupCount.value,
slice: sliceLocalWorldFavoritesLoadMoreNumber.value,
isLocal: isLocalGroupSelected.value
}),
() => {
nextTick(() => {
maybeFillLocalFavoritesViewport();
});
}
);
onMounted(() => {
if (typeof window !== 'undefined') {
window.addEventListener('resize', maybeFillLocalFavoritesViewport);
}
nextTick(() => {
maybeFillLocalFavoritesViewport();
});
});
onMounted(() => {});
function handleGroupMenuVisible(key, visible) {
if (visible) {
@@ -916,18 +877,7 @@
if (options.userInitiated) {
hasUserSelectedWorldGroup.value = true;
}
resetLocalFavoritesLoadMoreCounter();
clearSelectedWorlds();
if (type === 'local') {
nextTick(() => {
maybeFillLocalFavoritesViewport();
});
}
}
function resetLocalFavoritesLoadMoreCounter() {
sliceLocalWorldFavoritesLoadMoreNumber.value = 60;
localFavoritesLoadingMore.value = false;
}
function isGroupActive(type, key) {
@@ -970,24 +920,6 @@
});
}
function handleLocalFavoritesScroll() {
if (!isLocalGroupSelected.value || isSearchActive.value) {
return;
}
const wrap = localFavoritesScrollbarRef.value?.viewportEl?.value;
if (!wrap) {
return;
}
const { scrollTop, clientHeight, scrollHeight } = wrap;
if (scrollTop + clientHeight >= scrollHeight - LOCAL_FAVORITES_SCROLL_THRESHOLD) {
if (loadMoreLocalWorldFavorites()) {
nextTick(() => {
maybeFillLocalFavoritesViewport();
});
}
}
}
function toggleWorldSelection(id, value) {
if (value) {
if (!selectedFavoriteWorlds.value.includes(id)) {
@@ -1047,41 +979,6 @@
worldEditMode.value = false;
}
function loadMoreLocalWorldFavorites() {
if (localFavoritesLoadingMore.value) {
return false;
}
if (sliceLocalWorldFavoritesLoadMoreNumber.value >= activeLocalGroupCount.value) {
return false;
}
localFavoritesLoadingMore.value = true;
sliceLocalWorldFavoritesLoadMoreNumber.value += LOCAL_FAVORITES_PAGE_SIZE;
nextTick(() => {
localFavoritesLoadingMore.value = false;
});
return true;
}
function maybeFillLocalFavoritesViewport() {
nextTick(() => {
if (!isLocalGroupSelected.value || isSearchActive.value) {
return;
}
const wrap = localFavoritesScrollbarRef.value?.viewportEl?.value;
if (!wrap) {
return;
}
if (wrap.scrollHeight > wrap.clientHeight + LOCAL_FAVORITES_VIEWPORT_BUFFER) {
return;
}
if (loadMoreLocalWorldFavorites()) {
nextTick(() => {
maybeFillLocalFavoritesViewport();
});
}
});
}
function showExportDialog() {
worldExportDialogVisible.value = true;
}
@@ -1306,9 +1203,6 @@
onBeforeUnmount(() => {
cancelLocalWorldRefresh();
if (typeof window !== 'undefined') {
window.removeEventListener('resize', maybeFillLocalFavoritesViewport);
}
if (worldSplitterObserver) {
worldSplitterObserver.disconnect();
worldSplitterObserver = null;
@@ -55,7 +55,7 @@
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
class="rounded-full text-xs h-6 w-6"
@click.stop="handlePrimaryDeleteAction">
<Trash2 class="h-4 w-4" />
</Button>
@@ -69,9 +69,9 @@
<TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
<Button
size="icon-sm"
variant="outline"
variant="ghost"
:disabled="currentUser.currentAvatar === favorite.id"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
class="rounded-full text-xs h-6 w-6"
@click.stop="selectAvatarWithConfirmation(favorite.id)"
><Check class="h-4 w-4"
/></Button>
@@ -85,7 +85,7 @@
<Button
size="icon-sm"
variant="destructive"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
class="rounded-full text-xs h-6 w-6"
@click.stop="handlePrimaryDeleteAction"
><Trash2 class="h-4 w-4"
/></Button>
@@ -93,8 +93,8 @@
<TooltipWrapper v-else side="bottom" :content="t('view.favorite.edit_favorite_tooltip')">
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
variant="ghost"
class="rounded-full text-xs h-6 w-6"
@click.stop="showFavoriteDialog('avatar', favorite.id)"
><Star class="h-4 w-4"
/></Button>
@@ -116,7 +116,7 @@
<Button
class="rounded-full text-xs h-6 w-6"
size="icon-sm"
variant="outline"
variant="ghost"
@click.stop="handlePrimaryDeleteAction">
<Trash2 class="h-4 w-4" />
</Button>
@@ -17,9 +17,9 @@
<TooltipWrapper side="top" :content="t('view.favorite.select_avatar_tooltip')">
<Button
size="icon-sm"
variant="outline"
variant="ghost"
:disabled="currentUser.currentAvatar === favorite.id"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
class="rounded-full text-xs h-6 w-6"
@click.stop="selectAvatarWithConfirmation(favorite.id)">
<Check class="h-4 w-4" />
></Button
@@ -31,15 +31,16 @@
<Button
v-if="favoriteExists"
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
variant="ghost"
class="rounded-full text-xs h-6 w-6"
@click.stop="showFavoriteDialog('avatar', favorite.id)">
<Star class="h-4 w-4" />
</Button>
<Button
v-else
size="icon-sm"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
variant="ghost"
class="rounded-full text-xs h-6 w-6"
@click.stop="showFavoriteDialog('avatar', favorite.id)">
<Star class="h-4 w-4" />
</Button>
@@ -36,8 +36,8 @@
<TooltipWrapper side="left" :content="t('view.favorite.unfavorite_tooltip')">
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
variant="ghost"
class="rounded-full text-xs h-6 w-6"
@click.stop="handleDeleteFavorite">
<Trash2 class="h-4 w-4" />
</Button>
@@ -50,8 +50,8 @@
<TooltipWrapper side="right" :content="t('view.favorite.edit_favorite_tooltip')">
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
variant="ghost"
class="rounded-full text-xs h-6 w-6"
@click.stop="showFavoriteDialog('friend', favorite.id)"
><Star class="h-4 w-4"
/></Button>
@@ -52,8 +52,8 @@
<div class="favorites-search-card__action">
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
variant="ghost"
class="rounded-full text-xs h-6 w-6"
@click.stop="handleDeleteFavorite">
<Trash2 class="h-4 w-4" />
</Button>
@@ -66,8 +66,8 @@
<TooltipWrapper side="top" :content="inviteOrLaunchText">
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
variant="ghost"
class="rounded-full text-xs h-6 w-6"
@click.stop="newInstanceSelfInvite(favorite.id)"
><Mail class="h-4 w-4"
/></Button>
@@ -81,7 +81,7 @@
<Button
size="icon-sm"
variant="destructive"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
class="rounded-full text-xs h-6 w-6"
@click.stop="handleDeleteFavorite"
><Trash2 class="h-4 w-4"
/></Button>
@@ -89,8 +89,8 @@
<TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
variant="ghost"
class="rounded-full text-xs h-6 w-6"
@click.stop="showFavoriteDialog('world', favorite.id)"
><Star class="h-4 w-4"
/></Button>
@@ -116,7 +116,7 @@
<Button
class="rounded-full text-xs h-6 w-6"
size="icon-sm"
variant="outline"
variant="ghost"
@click.stop="handleDeleteFavorite">
<Trash2 class="h-4 w-4" />
</Button>
@@ -35,7 +35,7 @@
<Button
size="icon-sm"
:variant="shiftHeld ? 'destructive' : 'outline'"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
class="rounded-full text-xs h-6 w-6"
@click.stop="handlePrimaryDeleteAction">
<Trash2 class="h-4 w-4" />
</Button>
@@ -48,8 +48,8 @@
<TooltipWrapper side="top" :content="inviteOrLaunchText">
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
variant="ghost"
class="rounded-full text-xs h-6 w-6"
@click.stop="newInstanceSelfInvite(favorite.id)"
><Mail class="h-4 w-4"
/></Button>
@@ -63,7 +63,7 @@
<Button
size="icon-sm"
variant="destructive"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
class="rounded-full text-xs h-6 w-6"
@click.stop="handleDeleteFavorite"
><Trash2 class="h-4 w-4"
/></Button>
@@ -71,8 +71,8 @@
<TooltipWrapper v-else side="top" :content="t('view.favorite.edit_favorite_tooltip')">
<Button
size="icon-sm"
variant="outline"
class="favorites-search-card__action-btn rounded-full text-xs h-6 w-6"
variant="ghost"
class="rounded-full text-xs h-6 w-6"
@click.stop="showFavoriteDialog('world', favorite.id)"
><Star class="h-4 w-4"
/></Button>