mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-16 05:13:51 +02:00
Fix favs scrolling
This commit is contained in:
Natsumi
pa
@@ -1,495 +1,512 @@
|
||||
<template>
|
||||
<div class="favorites-page x-container">
|
||||
<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>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>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>
|
||||
<ResizablePanelGroup
|
||||
ref="avatarSplitterGroupRef"
|
||||
direction="horizontal"
|
||||
class="favorites-splitter"
|
||||
@layout="handleAvatarSplitterLayout">
|
||||
<ResizablePanel
|
||||
ref="avatarSplitterPanelRef"
|
||||
:default-size="avatarSplitterDefaultSize"
|
||||
:min-size="avatarSplitterMinSize"
|
||||
:max-size="avatarSplitterMaxSize"
|
||||
:collapsed-size="0"
|
||||
collapsible
|
||||
:order="1">
|
||||
<div class="favorites-groups-panel">
|
||||
<div class="group-section">
|
||||
<div class="group-section__header">
|
||||
<span>{{ t('view.favorite.avatars.vrchat_favorites') }}</span>
|
||||
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
:disabled="isFavoriteLoading"
|
||||
@click.stop="handleRefreshFavorites">
|
||||
<Spinner v-if="isFavoriteLoading" />
|
||||
<RefreshCw v-else />
|
||||
</Button>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<div class="group-section__list">
|
||||
<template v-if="favoriteAvatarGroups.length">
|
||||
<div
|
||||
v-for="group in favoriteAvatarGroups"
|
||||
:key="group.key"
|
||||
:class="[
|
||||
'group-item',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
|
||||
]"
|
||||
@click="handleGroupClick('remote', group.key)">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group.displayName }}</span>
|
||||
<span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
|
||||
</div>
|
||||
<div class="group-item__bottom">
|
||||
<Badge variant="outline">
|
||||
{{ t(`view.favorite.visibility.${group.visibility}`) }}
|
||||
</Badge>
|
||||
<DropdownMenu
|
||||
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||
@update:open="
|
||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||
">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
|
||||
<MoreHorizontal />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" class="w-55">
|
||||
<DropdownMenuItem @click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuSubContent side="right" align="start" class="w-45">
|
||||
<DropdownMenuCheckboxItem
|
||||
v-for="visibility in avatarGroupVisibilityOptions"
|
||||
:key="visibility"
|
||||
:model-value="group.visibility === visibility"
|
||||
indicator-position="right"
|
||||
@select="handleVisibilitySelection(group, visibility)">
|
||||
<span>{{
|
||||
t(`view.favorite.visibility.${visibility}`)
|
||||
}}</span>
|
||||
</DropdownMenuCheckboxItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
@click="handleRemoteClear(group)">
|
||||
<span>{{ t('view.favorite.clear') }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<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>Scale</span>
|
||||
<span class="favorites-dropdown__control-value">{{ avatarCardScalePercent }}%</span>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="group in avatarGroupPlaceholders"
|
||||
:key="group.key"
|
||||
:class="[
|
||||
'group-item',
|
||||
'group-item--placeholder',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
|
||||
]">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group.displayName }}</span>
|
||||
<span class="group-item__count">--/--</span>
|
||||
</div>
|
||||
<div class="group-item__bottom">
|
||||
<div class="group-item__placeholder-tag"></div>
|
||||
</div>
|
||||
<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>Spacing</span>
|
||||
<span class="favorites-dropdown__control-value">
|
||||
{{ avatarCardSpacingPercent }}%
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-section">
|
||||
<div class="group-section__header">
|
||||
<span>{{ t('view.favorite.avatars.local_favorites') }}</span>
|
||||
<template v-if="!refreshingLocalFavorites">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon"
|
||||
variant="outline"
|
||||
@click.stop="refreshLocalAvatarFavorites"
|
||||
><RefreshCcw
|
||||
/></Button>
|
||||
</template>
|
||||
<Button size="sm" variant="ghost" v-else @click.stop="cancelLocalAvatarRefresh">
|
||||
<Loader />
|
||||
|
||||
{{ t('view.favorite.avatars.cancel_refresh') }}
|
||||
</Button>
|
||||
</div>
|
||||
<div class="group-section__list">
|
||||
<template v-if="localAvatarFavoriteGroups.length">
|
||||
<div
|
||||
v-for="group in localAvatarFavoriteGroups"
|
||||
:key="group"
|
||||
:class="[
|
||||
'group-item',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('local', group) }
|
||||
]"
|
||||
@click="handleGroupClick('local', group)">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group }}</span>
|
||||
<div class="group-item__right">
|
||||
<span class="group-item__count">{{
|
||||
localAvatarFavGroupLength(group)
|
||||
}}</span>
|
||||
<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>
|
||||
<ResizablePanelGroup
|
||||
ref="avatarSplitterGroupRef"
|
||||
direction="horizontal"
|
||||
class="favorites-splitter"
|
||||
@layout="handleAvatarSplitterLayout">
|
||||
<ResizablePanel
|
||||
ref="avatarSplitterPanelRef"
|
||||
:default-size="avatarSplitterDefaultSize"
|
||||
:min-size="avatarSplitterMinSize"
|
||||
:max-size="avatarSplitterMaxSize"
|
||||
:collapsed-size="0"
|
||||
collapsible
|
||||
:order="1">
|
||||
<div class="favorites-groups-panel">
|
||||
<div class="group-section">
|
||||
<div class="group-section__header">
|
||||
<span>{{ t('view.favorite.avatars.vrchat_favorites') }}</span>
|
||||
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
:disabled="isFavoriteLoading"
|
||||
@click.stop="handleRefreshFavorites">
|
||||
<Spinner v-if="isFavoriteLoading" />
|
||||
<RefreshCw v-else />
|
||||
</Button>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<div class="group-section__list">
|
||||
<template v-if="favoriteAvatarGroups.length">
|
||||
<div
|
||||
v-for="group in favoriteAvatarGroups"
|
||||
:key="group.key"
|
||||
:class="[
|
||||
'group-item',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
|
||||
]"
|
||||
@click="handleGroupClick('remote', group.key)">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group.displayName }}</span>
|
||||
<span class="group-item__count"
|
||||
>{{ group.count }}/{{ group.capacity }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="group-item__bottom">
|
||||
<Badge variant="outline">
|
||||
{{ t(`view.favorite.visibility.${group.visibility}`) }}
|
||||
</Badge>
|
||||
<DropdownMenu
|
||||
:open="activeGroupMenu === localGroupMenuKey(group)"
|
||||
@update:open="handleGroupMenuVisible(localGroupMenuKey(group), $event)">
|
||||
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||
@update:open="
|
||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||
">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click.stop
|
||||
><Ellipsis
|
||||
/></Button>
|
||||
size="icon-sm"
|
||||
@click.stop>
|
||||
<MoreHorizontal />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" class="w-50">
|
||||
<DropdownMenuItem @click="handleLocalRename(group)">
|
||||
<DropdownMenuContent side="right" class="w-55">
|
||||
<DropdownMenuItem @click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="handleCheckInvalidAvatars(group)">
|
||||
<span>{{ t('view.favorite.avatars.check_invalid') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuSubContent
|
||||
side="right"
|
||||
align="start"
|
||||
class="w-45">
|
||||
<DropdownMenuCheckboxItem
|
||||
v-for="visibility in avatarGroupVisibilityOptions"
|
||||
:key="visibility"
|
||||
:model-value="group.visibility === visibility"
|
||||
indicator-position="right"
|
||||
@select="
|
||||
handleVisibilitySelection(group, visibility)
|
||||
">
|
||||
<span>{{
|
||||
t(`view.favorite.visibility.${visibility}`)
|
||||
}}</span>
|
||||
</DropdownMenuCheckboxItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
@click="handleLocalDelete(group)">
|
||||
<span>{{ t('view.favorite.delete_tooltip') }}</span>
|
||||
@click="handleRemoteClear(group)">
|
||||
<span>{{ t('view.favorite.clear') }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="group-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
<TooltipWrapper
|
||||
v-if="!isCreatingLocalGroup"
|
||||
:disabled="isLocalUserVrcPlusSupporter"
|
||||
:content="t('view.favorite.avatars.local_favorites')">
|
||||
<div
|
||||
:class="[
|
||||
'group-item',
|
||||
'group-item--new',
|
||||
{ 'is-disabled': !isLocalUserVrcPlusSupporter }
|
||||
]"
|
||||
@click="startLocalGroupCreation">
|
||||
<Plus />
|
||||
<span>{{ t('view.favorite.avatars.new_group') }}</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
<InputGroupField
|
||||
v-else
|
||||
ref="newLocalGroupInput"
|
||||
v-model="newLocalGroupName"
|
||||
size="sm"
|
||||
class="group-item__input"
|
||||
:placeholder="t('view.favorite.avatars.new_group')"
|
||||
@keyup.enter="handleLocalGroupCreationConfirm"
|
||||
@keyup.esc="cancelLocalGroupCreation"
|
||||
@blur="cancelLocalGroupCreation" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-section">
|
||||
<div class="group-section__header">
|
||||
<span>Local History</span>
|
||||
<DropdownMenu
|
||||
:open="activeGroupMenu === historyGroupMenuKey"
|
||||
@update:open="handleGroupMenuVisible(historyGroupMenuKey, $event)">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button class="rounded-full" size="icon-sm" variant="ghost" @click.stop
|
||||
><Ellipsis
|
||||
/></Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" class="w-45">
|
||||
<DropdownMenuItem variant="destructive" @click="handleHistoryClear">
|
||||
<span>{{ t('view.favorite.clear_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<div class="group-section__list">
|
||||
<div
|
||||
:class="[
|
||||
'group-item',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('history', historyGroupKey) }
|
||||
]"
|
||||
@click="handleGroupClick('history', historyGroupKey)">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">Local History</span>
|
||||
<span class="group-item__count">{{ avatarHistory.length }}/100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle @dragging="setAvatarSplitterDragging" />
|
||||
<ResizablePanel :order="2">
|
||||
<div class="favorites-content">
|
||||
<div class="favorites-content__header">
|
||||
<div class="favorites-content__title">
|
||||
<span v-if="isSearchActive">{{ t('view.favorite.avatars.search') }}</span>
|
||||
<template v-else-if="activeRemoteGroup">
|
||||
<span>
|
||||
{{ activeRemoteGroup.displayName }}
|
||||
<small>{{ activeRemoteGroup.count }}/{{ activeRemoteGroup.capacity }}</small>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="activeLocalGroupName">
|
||||
<span>
|
||||
{{ activeLocalGroupName }}
|
||||
<small>{{ activeLocalGroupCount }}</small>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="isHistorySelected">
|
||||
<span>
|
||||
Local History
|
||||
<small>{{ avatarHistory.length }}/100</small>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else>No Group Selected</span>
|
||||
</div>
|
||||
<div class="favorites-content__edit">
|
||||
<span>{{ t('view.favorite.edit_mode') }}</span>
|
||||
<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 v-if="isSearchActive">
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<div
|
||||
v-if="avatarFavoriteSearchResults.length"
|
||||
class="favorites-search-grid"
|
||||
:style="avatarFavoritesGridStyle(avatarFavoriteSearchResults.length)">
|
||||
<div
|
||||
v-for="favorite in avatarFavoriteSearchResults"
|
||||
:key="favorite.id"
|
||||
class="favorites-search-card"
|
||||
@click="showAvatarDialog(favorite.id)">
|
||||
<div class="favorites-search-card__content">
|
||||
<div
|
||||
class="favorites-search-card__avatar"
|
||||
:class="{ 'is-empty': !favorite.thumbnailImageUrl }">
|
||||
<img
|
||||
v-if="favorite.thumbnailImageUrl"
|
||||
:src="favorite.thumbnailImageUrl"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
<div class="favorites-search-card__detail">
|
||||
<div class="favorites-search-card__title">
|
||||
<span class="name">{{ favorite.name }}</span>
|
||||
</div>
|
||||
<span class="text-xs">{{ favorite.authorName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nomatch" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="activeRemoteGroup">
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<template v-if="currentRemoteFavorites.length">
|
||||
<div
|
||||
class="favorites-card-list"
|
||||
:style="avatarFavoritesGridStyle(currentRemoteFavorites.length)">
|
||||
<FavoritesAvatarItem
|
||||
v-for="favorite in currentRemoteFavorites"
|
||||
:key="favorite.id"
|
||||
:favorite="favorite"
|
||||
:group="activeRemoteGroup"
|
||||
:selected="selectedFavoriteAvatars.includes(favorite.id)"
|
||||
:edit-mode="avatarEditMode"
|
||||
@toggle-select="toggleAvatarSelection(favorite.id, $event)"
|
||||
@click="showAvatarDialog(favorite.id)" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="!remoteAvatarGroupsResolved">
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<div
|
||||
class="favorites-card-list"
|
||||
:style="avatarFavoritesGridStyle(avatarGroupPlaceholders.length)">
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="group in avatarGroupPlaceholders"
|
||||
:key="group.key"
|
||||
class="favorites-card-placeholder-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="activeLocalGroupName">
|
||||
<ScrollArea class="favorites-content__scroll">
|
||||
<template v-if="currentLocalFavorites.length">
|
||||
<div
|
||||
class="favorites-card-list"
|
||||
:style="avatarFavoritesGridStyle(currentLocalFavorites.length)">
|
||||
<FavoritesAvatarItem
|
||||
v-for="favorite in currentLocalFavorites"
|
||||
:key="favorite.id"
|
||||
:favorite="favorite"
|
||||
:group="activeLocalGroupName"
|
||||
is-local-favorite
|
||||
:edit-mode="avatarEditMode"
|
||||
@click="showAvatarDialog(favorite.id)" />
|
||||
:class="[
|
||||
'group-item',
|
||||
'group-item--placeholder',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
|
||||
]">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group.displayName }}</span>
|
||||
<span class="group-item__count">--/--</span>
|
||||
</div>
|
||||
<div class="group-item__bottom">
|
||||
<div class="group-item__placeholder-tag"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</template>
|
||||
<template v-else-if="isHistorySelected">
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<template v-if="avatarHistory.length">
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-section">
|
||||
<div class="group-section__header">
|
||||
<span>{{ t('view.favorite.avatars.local_favorites') }}</span>
|
||||
<template v-if="!refreshingLocalFavorites">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon"
|
||||
variant="outline"
|
||||
@click.stop="refreshLocalAvatarFavorites"
|
||||
><RefreshCcw
|
||||
/></Button>
|
||||
</template>
|
||||
<Button size="sm" variant="ghost" v-else @click.stop="cancelLocalAvatarRefresh">
|
||||
<Loader />
|
||||
|
||||
{{ t('view.favorite.avatars.cancel_refresh') }}
|
||||
</Button>
|
||||
</div>
|
||||
<div class="group-section__list">
|
||||
<template v-if="localAvatarFavoriteGroups.length">
|
||||
<div
|
||||
class="favorites-card-list"
|
||||
:style="avatarFavoritesGridStyle(avatarHistory.length)">
|
||||
<FavoritesAvatarLocalHistoryItem
|
||||
v-for="favorite in avatarHistory"
|
||||
:key="favorite.id"
|
||||
:favorite="favorite"
|
||||
@click="showAvatarDialog(favorite.id)" />
|
||||
v-for="group in localAvatarFavoriteGroups"
|
||||
:key="group"
|
||||
:class="[
|
||||
'group-item',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('local', group) }
|
||||
]"
|
||||
@click="handleGroupClick('local', group)">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group }}</span>
|
||||
<div class="group-item__right">
|
||||
<span class="group-item__count">{{
|
||||
localAvatarFavGroupLength(group)
|
||||
}}</span>
|
||||
<DropdownMenu
|
||||
:open="activeGroupMenu === localGroupMenuKey(group)"
|
||||
@update:open="
|
||||
handleGroupMenuVisible(localGroupMenuKey(group), $event)
|
||||
">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click.stop
|
||||
><Ellipsis
|
||||
/></Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" class="w-50">
|
||||
<DropdownMenuItem @click="handleLocalRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="handleCheckInvalidAvatars(group)">
|
||||
<span>{{ t('view.favorite.avatars.check_invalid') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
@click="handleLocalDelete(group)">
|
||||
<span>{{ t('view.favorite.delete_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">
|
||||
<div v-else class="group-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
<TooltipWrapper
|
||||
v-if="!isCreatingLocalGroup"
|
||||
:disabled="isLocalUserVrcPlusSupporter"
|
||||
:content="t('view.favorite.avatars.local_favorites')">
|
||||
<div
|
||||
:class="[
|
||||
'group-item',
|
||||
'group-item--new',
|
||||
{ 'is-disabled': !isLocalUserVrcPlusSupporter }
|
||||
]"
|
||||
@click="startLocalGroupCreation">
|
||||
<Plus />
|
||||
<span>{{ t('view.favorite.avatars.new_group') }}</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
<InputGroupField
|
||||
v-else
|
||||
ref="newLocalGroupInput"
|
||||
v-model="newLocalGroupName"
|
||||
size="sm"
|
||||
class="group-item__input"
|
||||
:placeholder="t('view.favorite.avatars.new_group')"
|
||||
@keyup.enter="handleLocalGroupCreationConfirm"
|
||||
@keyup.esc="cancelLocalGroupCreation"
|
||||
@blur="cancelLocalGroupCreation" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="favorites-empty">No Group Selected</div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="group-section">
|
||||
<div class="group-section__header">
|
||||
<span>Local History</span>
|
||||
<DropdownMenu
|
||||
:open="activeGroupMenu === historyGroupMenuKey"
|
||||
@update:open="handleGroupMenuVisible(historyGroupMenuKey, $event)">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button class="rounded-full" size="icon-sm" variant="ghost" @click.stop
|
||||
><Ellipsis
|
||||
/></Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" class="w-45">
|
||||
<DropdownMenuItem variant="destructive" @click="handleHistoryClear">
|
||||
<span>{{ t('view.favorite.clear_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
<div class="group-section__list">
|
||||
<div
|
||||
:class="[
|
||||
'group-item',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('history', historyGroupKey) }
|
||||
]"
|
||||
@click="handleGroupClick('history', historyGroupKey)">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">Local History</span>
|
||||
<span class="group-item__count">{{ avatarHistory.length }}/100</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle @dragging="setAvatarSplitterDragging" />
|
||||
<ResizablePanel :order="2">
|
||||
<div class="favorites-content">
|
||||
<div class="favorites-content__header">
|
||||
<div class="favorites-content__title">
|
||||
<span v-if="isSearchActive">{{ t('view.favorite.avatars.search') }}</span>
|
||||
<template v-else-if="activeRemoteGroup">
|
||||
<span>
|
||||
{{ activeRemoteGroup.displayName }}
|
||||
<small>{{ activeRemoteGroup.count }}/{{ activeRemoteGroup.capacity }}</small>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="activeLocalGroupName">
|
||||
<span>
|
||||
{{ activeLocalGroupName }}
|
||||
<small>{{ activeLocalGroupCount }}</small>
|
||||
</span>
|
||||
</template>
|
||||
<template v-else-if="isHistorySelected">
|
||||
<span>
|
||||
Local History
|
||||
<small>{{ avatarHistory.length }}/100</small>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else>No Group Selected</span>
|
||||
</div>
|
||||
<div class="favorites-content__edit">
|
||||
<span>{{ t('view.favorite.edit_mode') }}</span>
|
||||
<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 v-if="isSearchActive">
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<div
|
||||
v-if="avatarFavoriteSearchResults.length"
|
||||
class="favorites-search-grid"
|
||||
:style="avatarFavoritesGridStyle(avatarFavoriteSearchResults.length)">
|
||||
<div
|
||||
v-for="favorite in avatarFavoriteSearchResults"
|
||||
:key="favorite.id"
|
||||
class="favorites-search-card"
|
||||
@click="showAvatarDialog(favorite.id)">
|
||||
<div class="favorites-search-card__content">
|
||||
<div
|
||||
class="favorites-search-card__avatar"
|
||||
:class="{ 'is-empty': !favorite.thumbnailImageUrl }">
|
||||
<img
|
||||
v-if="favorite.thumbnailImageUrl"
|
||||
:src="favorite.thumbnailImageUrl"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
<div class="favorites-search-card__detail">
|
||||
<div class="favorites-search-card__title">
|
||||
<span class="name">{{ favorite.name }}</span>
|
||||
</div>
|
||||
<span class="text-xs">{{ favorite.authorName }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nomatch" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="activeRemoteGroup">
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<template v-if="currentRemoteFavorites.length">
|
||||
<div
|
||||
class="favorites-card-list"
|
||||
:style="avatarFavoritesGridStyle(currentRemoteFavorites.length)">
|
||||
<FavoritesAvatarItem
|
||||
v-for="favorite in currentRemoteFavorites"
|
||||
:key="favorite.id"
|
||||
:favorite="favorite"
|
||||
:group="activeRemoteGroup"
|
||||
:selected="selectedFavoriteAvatars.includes(favorite.id)"
|
||||
:edit-mode="avatarEditMode"
|
||||
@toggle-select="toggleAvatarSelection(favorite.id, $event)"
|
||||
@click="showAvatarDialog(favorite.id)" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="!remoteAvatarGroupsResolved">
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<div
|
||||
class="favorites-card-list"
|
||||
:style="avatarFavoritesGridStyle(avatarGroupPlaceholders.length)">
|
||||
<div
|
||||
v-for="group in avatarGroupPlaceholders"
|
||||
:key="group.key"
|
||||
class="favorites-card-placeholder-box"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="activeLocalGroupName">
|
||||
<ScrollArea class="favorites-content__scroll">
|
||||
<template v-if="currentLocalFavorites.length">
|
||||
<div
|
||||
class="favorites-card-list"
|
||||
:style="avatarFavoritesGridStyle(currentLocalFavorites.length)">
|
||||
<FavoritesAvatarItem
|
||||
v-for="favorite in currentLocalFavorites"
|
||||
:key="favorite.id"
|
||||
:favorite="favorite"
|
||||
:group="activeLocalGroupName"
|
||||
is-local-favorite
|
||||
:edit-mode="avatarEditMode"
|
||||
@click="showAvatarDialog(favorite.id)" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</template>
|
||||
<template v-else-if="isHistorySelected">
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<template v-if="avatarHistory.length">
|
||||
<div
|
||||
class="favorites-card-list"
|
||||
:style="avatarFavoritesGridStyle(avatarHistory.length)">
|
||||
<FavoritesAvatarLocalHistoryItem
|
||||
v-for="favorite in avatarHistory"
|
||||
:key="favorite.id"
|
||||
:favorite="favorite"
|
||||
@click="showAvatarDialog(favorite.id)" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="favorites-empty">No Group Selected</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
<AvatarExportDialog v-model:avatarExportDialogVisible="avatarExportDialogVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,295 +1,309 @@
|
||||
<template>
|
||||
<div class="favorites-page x-container">
|
||||
<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>
|
||||
<ResizablePanelGroup
|
||||
ref="friendSplitterGroupRef"
|
||||
direction="horizontal"
|
||||
class="favorites-splitter"
|
||||
@layout="handleFriendSplitterLayout">
|
||||
<ResizablePanel
|
||||
ref="friendSplitterPanelRef"
|
||||
:default-size="friendSplitterDefaultSize"
|
||||
:min-size="friendSplitterMinSize"
|
||||
:max-size="friendSplitterMaxSize"
|
||||
:collapsed-size="0"
|
||||
collapsible
|
||||
:order="1">
|
||||
<div class="favorites-groups-panel">
|
||||
<div class="group-section">
|
||||
<div class="group-section__header">
|
||||
<span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
|
||||
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
:disabled="isFavoriteLoading"
|
||||
@click.stop="handleRefreshFavorites">
|
||||
<Spinner v-if="isFavoriteLoading" />
|
||||
<RefreshCw v-else />
|
||||
</Button>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<div class="group-section__list">
|
||||
<template v-if="favoriteFriendGroups.length">
|
||||
<div
|
||||
v-for="group in favoriteFriendGroups"
|
||||
:key="group.key"
|
||||
:class="[
|
||||
'group-item',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
|
||||
]"
|
||||
@click="handleGroupClick('remote', group.key)">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group.displayName }}</span>
|
||||
<span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
|
||||
</div>
|
||||
<div class="group-item__bottom">
|
||||
<Badge variant="outline">
|
||||
{{ t(`view.favorite.visibility.${group.visibility}`) }}
|
||||
</Badge>
|
||||
<DropdownMenu
|
||||
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||
@update:open="
|
||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||
">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
|
||||
<MoreHorizontal />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" class="w-55">
|
||||
<DropdownMenuItem @click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuSubContent
|
||||
side="right"
|
||||
align="start"
|
||||
class="w-[180px]">
|
||||
<DropdownMenuCheckboxItem
|
||||
v-for="visibility in friendGroupVisibilityOptions"
|
||||
:key="visibility"
|
||||
:model-value="group.visibility === visibility"
|
||||
indicator-position="right"
|
||||
@select="handleVisibilitySelection(group, visibility)">
|
||||
<span>{{
|
||||
t(`view.favorite.visibility.${visibility}`)
|
||||
}}</span>
|
||||
</DropdownMenuCheckboxItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
@click="handleRemoteClear(group)">
|
||||
<span>{{ t('view.favorite.clear') }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="group-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle @dragging="setFriendSplitterDragging" />
|
||||
<ResizablePanel :order="2">
|
||||
<div class="favorites-content">
|
||||
<div class="favorites-content__header">
|
||||
<div class="favorites-content__title">
|
||||
<span v-if="isSearchActive">{{ t('view.favorite.worlds.search') }}</span>
|
||||
<template v-else-if="activeRemoteGroup">
|
||||
<span>
|
||||
{{ activeRemoteGroup.displayName }}
|
||||
<small>{{ activeRemoteGroup.count }}/{{ activeRemoteGroup.capacity }}</small>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else>No Group Selected</span>
|
||||
</div>
|
||||
<div class="favorites-content__edit">
|
||||
<span>{{ t('view.favorite.edit_mode') }}</span>
|
||||
<Switch v-model="friendEditMode" :disabled="isSearchActive || !activeRemoteGroup" />
|
||||
</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
|
||||
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 v-if="activeRemoteGroup && !isSearchActive">
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<template v-if="currentFriendFavorites.length">
|
||||
<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>
|
||||
<ResizablePanelGroup
|
||||
ref="friendSplitterGroupRef"
|
||||
direction="horizontal"
|
||||
class="favorites-splitter"
|
||||
@layout="handleFriendSplitterLayout">
|
||||
<ResizablePanel
|
||||
ref="friendSplitterPanelRef"
|
||||
:default-size="friendSplitterDefaultSize"
|
||||
:min-size="friendSplitterMinSize"
|
||||
:max-size="friendSplitterMaxSize"
|
||||
:collapsed-size="0"
|
||||
collapsible
|
||||
:order="1">
|
||||
<div class="favorites-groups-panel">
|
||||
<div class="group-section">
|
||||
<div class="group-section__header">
|
||||
<span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
|
||||
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
:disabled="isFavoriteLoading"
|
||||
@click.stop="handleRefreshFavorites">
|
||||
<Spinner v-if="isFavoriteLoading" />
|
||||
<RefreshCw v-else />
|
||||
</Button>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<div class="group-section__list">
|
||||
<template v-if="favoriteFriendGroups.length">
|
||||
<div
|
||||
class="favorites-card-list"
|
||||
:style="friendFavoritesGridStyle(currentFriendFavorites.length)">
|
||||
<FavoritesFriendItem
|
||||
v-for="favorite in currentFriendFavorites"
|
||||
:key="favorite.id"
|
||||
:favorite="favorite"
|
||||
:group="activeRemoteGroup"
|
||||
:selected="selectedFavoriteFriends.includes(favorite.id)"
|
||||
:edit-mode="friendEditMode"
|
||||
@toggle-select="toggleFriendSelection(favorite.id, $event)"
|
||||
@click="showUserDialog(favorite.id)" />
|
||||
v-for="group in favoriteFriendGroups"
|
||||
:key="group.key"
|
||||
:class="[
|
||||
'group-item',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
|
||||
]"
|
||||
@click="handleGroupClick('remote', group.key)">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group.displayName }}</span>
|
||||
<span class="group-item__count"
|
||||
>{{ group.count }}/{{ group.capacity }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="group-item__bottom">
|
||||
<Badge variant="outline">
|
||||
{{ t(`view.favorite.visibility.${group.visibility}`) }}
|
||||
</Badge>
|
||||
<DropdownMenu
|
||||
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||
@update:open="
|
||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||
">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
@click.stop>
|
||||
<MoreHorizontal />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" class="w-55">
|
||||
<DropdownMenuItem @click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuSubContent
|
||||
side="right"
|
||||
align="start"
|
||||
class="w-[180px]">
|
||||
<DropdownMenuCheckboxItem
|
||||
v-for="visibility in friendGroupVisibilityOptions"
|
||||
:key="visibility"
|
||||
:model-value="group.visibility === visibility"
|
||||
indicator-position="right"
|
||||
@select="
|
||||
handleVisibilitySelection(group, visibility)
|
||||
">
|
||||
<span>{{
|
||||
t(`view.favorite.visibility.${visibility}`)
|
||||
}}</span>
|
||||
</DropdownMenuCheckboxItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
@click="handleRemoteClear(group)">
|
||||
<span>{{ t('view.favorite.clear') }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">
|
||||
<div v-else class="group-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="!isSearchActive">
|
||||
<div class="favorites-empty">No Group Selected</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<div
|
||||
v-if="friendFavoriteSearchResults.length"
|
||||
class="favorites-search-grid"
|
||||
:style="friendFavoritesGridStyle(friendFavoriteSearchResults.length)">
|
||||
</div>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle @dragging="setFriendSplitterDragging" />
|
||||
<ResizablePanel :order="2">
|
||||
<div class="favorites-content">
|
||||
<div class="favorites-content__header">
|
||||
<div class="favorites-content__title">
|
||||
<span v-if="isSearchActive">{{ t('view.favorite.worlds.search') }}</span>
|
||||
<template v-else-if="activeRemoteGroup">
|
||||
<span>
|
||||
{{ activeRemoteGroup.displayName }}
|
||||
<small>{{ activeRemoteGroup.count }}/{{ activeRemoteGroup.capacity }}</small>
|
||||
</span>
|
||||
</template>
|
||||
<span v-else>No Group Selected</span>
|
||||
</div>
|
||||
<div class="favorites-content__edit">
|
||||
<span>{{ t('view.favorite.edit_mode') }}</span>
|
||||
<Switch v-model="friendEditMode" :disabled="isSearchActive || !activeRemoteGroup" />
|
||||
</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
|
||||
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 v-if="activeRemoteGroup && !isSearchActive">
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<template v-if="currentFriendFavorites.length">
|
||||
<div
|
||||
class="favorites-card-list"
|
||||
:style="friendFavoritesGridStyle(currentFriendFavorites.length)">
|
||||
<FavoritesFriendItem
|
||||
v-for="favorite in currentFriendFavorites"
|
||||
:key="favorite.id"
|
||||
:favorite="favorite"
|
||||
:group="activeRemoteGroup"
|
||||
:selected="selectedFavoriteFriends.includes(favorite.id)"
|
||||
:edit-mode="friendEditMode"
|
||||
@toggle-select="toggleFriendSelection(favorite.id, $event)"
|
||||
@click="showUserDialog(favorite.id)" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else-if="!isSearchActive">
|
||||
<div class="favorites-empty">No Group Selected</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<div
|
||||
v-for="favorite in friendFavoriteSearchResults"
|
||||
:key="favorite.id"
|
||||
class="favorites-search-card"
|
||||
@click="showUserDialog(favorite.id)">
|
||||
<div class="favorites-search-card__content">
|
||||
<div class="favorites-search-card__avatar">
|
||||
<img :src="userImage(favorite, true)" loading="lazy" />
|
||||
</div>
|
||||
<div class="favorites-search-card__detail">
|
||||
<div class="favorites-search-card__title">
|
||||
<span class="name">{{ favorite.displayName }}</span>
|
||||
v-if="friendFavoriteSearchResults.length"
|
||||
class="favorites-search-grid"
|
||||
:style="friendFavoritesGridStyle(friendFavoriteSearchResults.length)">
|
||||
<div
|
||||
v-for="favorite in friendFavoriteSearchResults"
|
||||
:key="favorite.id"
|
||||
class="favorites-search-card"
|
||||
@click="showUserDialog(favorite.id)">
|
||||
<div class="favorites-search-card__content">
|
||||
<div class="favorites-search-card__avatar">
|
||||
<img :src="userImage(favorite, true)" loading="lazy" />
|
||||
</div>
|
||||
<div
|
||||
v-if="favorite.location && favorite.location !== 'offline'"
|
||||
class="favorites-search-card__location">
|
||||
<Location
|
||||
:location="favorite.location"
|
||||
:traveling="favorite.travelingToLocation"
|
||||
:link="false" />
|
||||
<div class="favorites-search-card__detail">
|
||||
<div class="favorites-search-card__title">
|
||||
<span class="name">{{ favorite.displayName }}</span>
|
||||
</div>
|
||||
<div
|
||||
v-if="favorite.location && favorite.location !== 'offline'"
|
||||
class="favorites-search-card__location">
|
||||
<Location
|
||||
:location="favorite.location"
|
||||
:traveling="favorite.travelingToLocation"
|
||||
:link="false" />
|
||||
</div>
|
||||
<span v-else class="text-xs">{{ favorite.statusDescription }}</span>
|
||||
</div>
|
||||
<span v-else class="text-xs">{{ favorite.statusDescription }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nomatch" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nomatch" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
<FriendExportDialog v-model:friendExportDialogVisible="friendExportDialogVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,435 +1,453 @@
|
||||
<template>
|
||||
<div class="favorites-page x-container">
|
||||
<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 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="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>
|
||||
<ResizablePanelGroup
|
||||
ref="worldSplitterGroupRef"
|
||||
direction="horizontal"
|
||||
class="favorites-splitter"
|
||||
@layout="handleWorldSplitterLayout">
|
||||
<ResizablePanel
|
||||
ref="worldSplitterPanelRef"
|
||||
:default-size="worldSplitterDefaultSize"
|
||||
:min-size="worldSplitterMinSize"
|
||||
:max-size="worldSplitterMaxSize"
|
||||
:collapsed-size="0"
|
||||
collapsible
|
||||
:order="1">
|
||||
<div class="favorites-groups-panel">
|
||||
<div class="group-section">
|
||||
<div class="group-section__header">
|
||||
<span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
|
||||
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
:disabled="isFavoriteLoading"
|
||||
@click.stop="handleRefreshFavorites">
|
||||
<Spinner v-if="isFavoriteLoading" />
|
||||
<RefreshCw v-else />
|
||||
</Button>
|
||||
</TooltipWrapper>
|
||||
</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 class="group-section__list">
|
||||
<template v-if="favoriteWorldGroups.length">
|
||||
<div
|
||||
v-for="group in favoriteWorldGroups"
|
||||
:key="group.key"
|
||||
:class="[
|
||||
'group-item',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
|
||||
]"
|
||||
@click="handleGroupClick('remote', group.key)">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group.displayName }}</span>
|
||||
<span class="group-item__count"
|
||||
>{{ group.count }}/{{ group.capacity }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="group-item__bottom">
|
||||
<Badge variant="outline">
|
||||
{{ t(`view.favorite.visibility.${group.visibility}`) }}
|
||||
</Badge>
|
||||
<DropdownMenu
|
||||
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||
@update:open="
|
||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||
">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="ghost"
|
||||
size="icon-sm"
|
||||
@click.stop>
|
||||
<MoreHorizontal />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" class="w-50">
|
||||
<DropdownMenuItem @click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuSubContent
|
||||
side="right"
|
||||
align="start"
|
||||
class="w-[200px]">
|
||||
<DropdownMenuCheckboxItem
|
||||
v-for="visibility in worldGroupVisibilityOptions"
|
||||
:key="visibility"
|
||||
:model-value="group.visibility === visibility"
|
||||
indicator-position="right"
|
||||
@select="
|
||||
handleVisibilitySelection(group, visibility)
|
||||
">
|
||||
<span>{{
|
||||
t(`view.favorite.visibility.${visibility}`)
|
||||
}}</span>
|
||||
</DropdownMenuCheckboxItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
@click="handleRemoteClear(group)">
|
||||
<span>{{ t('view.favorite.clear') }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="group in worldGroupPlaceholders"
|
||||
:key="group.key"
|
||||
:class="[
|
||||
'group-item',
|
||||
'group-item--placeholder',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
|
||||
]">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group.displayName }}</span>
|
||||
<span class="group-item__count">--/--</span>
|
||||
</div>
|
||||
<div class="group-item__bottom">
|
||||
<div class="group-item__placeholder-tag"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<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>
|
||||
<ResizablePanelGroup
|
||||
ref="worldSplitterGroupRef"
|
||||
direction="horizontal"
|
||||
class="favorites-splitter"
|
||||
@layout="handleWorldSplitterLayout">
|
||||
<ResizablePanel
|
||||
ref="worldSplitterPanelRef"
|
||||
:default-size="worldSplitterDefaultSize"
|
||||
:min-size="worldSplitterMinSize"
|
||||
:max-size="worldSplitterMaxSize"
|
||||
:collapsed-size="0"
|
||||
collapsible
|
||||
:order="1">
|
||||
<div class="favorites-groups-panel">
|
||||
<div class="group-section">
|
||||
<div class="group-section__header">
|
||||
<span>{{ t('view.favorite.worlds.vrchat_favorites') }}</span>
|
||||
<TooltipWrapper side="bottom" :content="t('view.favorite.refresh_favorites_tooltip')">
|
||||
</div>
|
||||
<div class="group-section">
|
||||
<div class="group-section__header">
|
||||
<span>{{ t('view.favorite.worlds.local_favorites') }}</span>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
variant="outline"
|
||||
size="icon-sm"
|
||||
:disabled="isFavoriteLoading"
|
||||
@click.stop="handleRefreshFavorites">
|
||||
<Spinner v-if="isFavoriteLoading" />
|
||||
<RefreshCw v-else />
|
||||
variant="outline"
|
||||
v-if="!refreshingLocalFavorites"
|
||||
@click.stop="refreshLocalWorldFavorites"
|
||||
><RefreshCcw
|
||||
/></Button>
|
||||
<Button size="icon-sm" variant="ghost" v-else @click.stop="cancelLocalWorldRefresh">
|
||||
<RefreshCcw />
|
||||
{{ t('view.favorite.worlds.cancel_refresh') }}
|
||||
</Button>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<div class="group-section__list">
|
||||
<template v-if="favoriteWorldGroups.length">
|
||||
<div
|
||||
v-for="group in favoriteWorldGroups"
|
||||
:key="group.key"
|
||||
:class="[
|
||||
'group-item',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
|
||||
]"
|
||||
@click="handleGroupClick('remote', group.key)">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group.displayName }}</span>
|
||||
<span class="group-item__count">{{ group.count }}/{{ group.capacity }}</span>
|
||||
</div>
|
||||
<div class="group-section__list">
|
||||
<template v-if="localWorldFavoriteGroups.length">
|
||||
<div
|
||||
v-for="group in localWorldFavoriteGroups"
|
||||
:key="group"
|
||||
:class="[
|
||||
'group-item',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('local', group) }
|
||||
]"
|
||||
@click="handleGroupClick('local', group)">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group }}</span>
|
||||
<div class="group-item__right">
|
||||
<span class="group-item__count">{{
|
||||
localWorldFavGroupLength(group)
|
||||
}}</span>
|
||||
<div class="group-item__bottom">
|
||||
<DropdownMenu
|
||||
:open="activeGroupMenu === localGroupMenuKey(group)"
|
||||
@update:open="
|
||||
handleGroupMenuVisible(localGroupMenuKey(group), $event)
|
||||
">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click.stop
|
||||
><Ellipsis
|
||||
/></Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" class="w-50">
|
||||
<DropdownMenuItem @click="handleLocalRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
@click="handleLocalDelete(group)">
|
||||
<span>{{ t('view.favorite.delete_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-item__bottom">
|
||||
<Badge variant="outline">
|
||||
{{ t(`view.favorite.visibility.${group.visibility}`) }}
|
||||
</Badge>
|
||||
<DropdownMenu
|
||||
:open="activeGroupMenu === remoteGroupMenuKey(group.key)"
|
||||
@update:open="
|
||||
handleGroupMenuVisible(remoteGroupMenuKey(group.key), $event)
|
||||
">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button class="rounded-full" variant="ghost" size="icon-sm" @click.stop>
|
||||
<MoreHorizontal />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" class="w-50">
|
||||
<DropdownMenuItem @click="handleRemoteRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSub>
|
||||
<DropdownMenuSubTrigger>
|
||||
<span>{{ t('view.favorite.visibility_tooltip') }}</span>
|
||||
</DropdownMenuSubTrigger>
|
||||
<DropdownMenuPortal>
|
||||
<DropdownMenuSubContent
|
||||
side="right"
|
||||
align="start"
|
||||
class="w-[200px]">
|
||||
<DropdownMenuCheckboxItem
|
||||
v-for="visibility in worldGroupVisibilityOptions"
|
||||
:key="visibility"
|
||||
:model-value="group.visibility === visibility"
|
||||
indicator-position="right"
|
||||
@select="handleVisibilitySelection(group, visibility)">
|
||||
<span>{{
|
||||
t(`view.favorite.visibility.${visibility}`)
|
||||
}}</span>
|
||||
</DropdownMenuCheckboxItem>
|
||||
</DropdownMenuSubContent>
|
||||
</DropdownMenuPortal>
|
||||
</DropdownMenuSub>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
@click="handleRemoteClear(group)">
|
||||
<span>{{ t('view.favorite.clear') }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</template>
|
||||
<div v-else class="group-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
<div
|
||||
v-if="!isCreatingLocalGroup"
|
||||
class="group-item group-item--new"
|
||||
@click="startLocalGroupCreation">
|
||||
<Plus />
|
||||
<span>{{ t('view.favorite.worlds.new_group') }}</span>
|
||||
</div>
|
||||
<InputGroupField
|
||||
v-else
|
||||
ref="newLocalGroupInput"
|
||||
v-model="newLocalGroupName"
|
||||
size="sm"
|
||||
class="group-item__input"
|
||||
:placeholder="t('view.favorite.worlds.new_group')"
|
||||
@keyup.enter="handleLocalGroupCreationConfirm"
|
||||
@keyup.esc="cancelLocalGroupCreation"
|
||||
@blur="cancelLocalGroupCreation" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle @dragging="setWorldSplitterDragging" />
|
||||
<ResizablePanel :order="2">
|
||||
<div class="favorites-content">
|
||||
<div class="favorites-content__header">
|
||||
<div class="favorites-content__title">
|
||||
<span v-if="isSearchActive">{{ t('view.favorite.worlds.search') }}</span>
|
||||
<template v-else-if="activeRemoteGroup">
|
||||
<span
|
||||
>{{ activeRemoteGroup.displayName }} <small
|
||||
>{{ activeRemoteGroup.count }}/{{ activeRemoteGroup.capacity }}</small
|
||||
></span
|
||||
>
|
||||
</template>
|
||||
<span v-else-if="activeLocalGroupName">
|
||||
{{ activeLocalGroupName }}
|
||||
<small>{{ activeLocalGroupCount }}</small>
|
||||
</span>
|
||||
<span v-else>No Group Selected</span>
|
||||
</div>
|
||||
<div class="favorites-content__edit">
|
||||
<span>{{ t('view.favorite.edit_mode') }}</span>
|
||||
<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 v-if="isSearchActive">
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<div
|
||||
v-if="worldFavoriteSearchResults.length"
|
||||
class="favorites-search-grid"
|
||||
:style="worldFavoritesGridStyle(worldFavoriteSearchResults.length)">
|
||||
<div
|
||||
v-for="favorite in worldFavoriteSearchResults"
|
||||
:key="favorite.id"
|
||||
class="favorites-search-card"
|
||||
@click="showWorldDialog(favorite.id)">
|
||||
<div class="favorites-search-card__content">
|
||||
<div
|
||||
class="favorites-search-card__avatar"
|
||||
:class="{ 'is-empty': !favorite.thumbnailImageUrl }">
|
||||
<img
|
||||
v-if="favorite.thumbnailImageUrl"
|
||||
:src="favorite.thumbnailImageUrl"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
<div class="favorites-search-card__detail">
|
||||
<span class="name">{{ favorite.name || favorite.id }}</span>
|
||||
<span class="text-xs">
|
||||
{{ favorite.authorName }}
|
||||
<template v-if="favorite.occupants">
|
||||
({{ favorite.occupants }})
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nomatch" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-for="group in worldGroupPlaceholders"
|
||||
:key="group.key"
|
||||
:class="[
|
||||
'group-item',
|
||||
'group-item--placeholder',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('remote', group.key) }
|
||||
]">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group.displayName }}</span>
|
||||
<span class="group-item__count">--/--</span>
|
||||
</div>
|
||||
<div class="group-item__bottom">
|
||||
<div class="group-item__placeholder-tag"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
<div class="group-section">
|
||||
<div class="group-section__header">
|
||||
<span>{{ t('view.favorite.worlds.local_favorites') }}</span>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon-sm"
|
||||
variant="outline"
|
||||
v-if="!refreshingLocalFavorites"
|
||||
@click.stop="refreshLocalWorldFavorites"
|
||||
><RefreshCcw
|
||||
/></Button>
|
||||
<Button size="icon-sm" variant="ghost" v-else @click.stop="cancelLocalWorldRefresh">
|
||||
<RefreshCcw />
|
||||
{{ t('view.favorite.worlds.cancel_refresh') }}
|
||||
</Button>
|
||||
</div>
|
||||
<div class="group-section__list">
|
||||
<template v-if="localWorldFavoriteGroups.length">
|
||||
<div
|
||||
v-for="group in localWorldFavoriteGroups"
|
||||
:key="group"
|
||||
:class="[
|
||||
'group-item',
|
||||
{ 'is-active': !hasSearchInput && isGroupActive('local', group) }
|
||||
]"
|
||||
@click="handleGroupClick('local', group)">
|
||||
<div class="group-item__top">
|
||||
<span class="group-item__name">{{ group }}</span>
|
||||
<div class="group-item__right">
|
||||
<span class="group-item__count">{{ localWorldFavGroupLength(group) }}</span>
|
||||
<div class="group-item__bottom">
|
||||
<DropdownMenu
|
||||
:open="activeGroupMenu === localGroupMenuKey(group)"
|
||||
@update:open="
|
||||
handleGroupMenuVisible(localGroupMenuKey(group), $event)
|
||||
">
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
class="rounded-full"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click.stop
|
||||
><Ellipsis
|
||||
/></Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent side="right" class="w-50">
|
||||
<DropdownMenuItem @click="handleLocalRename(group)">
|
||||
<span>{{ t('view.favorite.rename_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem
|
||||
variant="destructive"
|
||||
@click="handleLocalDelete(group)">
|
||||
<span>{{ t('view.favorite.delete_tooltip') }}</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
v-if="activeRemoteGroup && isRemoteGroupSelected"
|
||||
class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<template v-if="currentRemoteFavorites.length">
|
||||
<div
|
||||
class="favorites-card-list"
|
||||
:style="worldFavoritesGridStyle(currentRemoteFavorites.length)">
|
||||
<FavoritesWorldItem
|
||||
v-for="favorite in currentRemoteFavorites"
|
||||
:key="favorite.id"
|
||||
:group="activeRemoteGroup"
|
||||
:favorite="favorite"
|
||||
:edit-mode="worldEditMode"
|
||||
:selected="selectedFavoriteWorlds.includes(favorite.id)"
|
||||
@toggle-select="toggleWorldSelection(favorite.id, $event)"
|
||||
@click="showWorldDialog(favorite.id)" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="group-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
<div
|
||||
v-if="!isCreatingLocalGroup"
|
||||
class="group-item group-item--new"
|
||||
@click="startLocalGroupCreation">
|
||||
<Plus />
|
||||
<span>{{ t('view.favorite.worlds.new_group') }}</span>
|
||||
</div>
|
||||
<InputGroupField
|
||||
v-else
|
||||
ref="newLocalGroupInput"
|
||||
v-model="newLocalGroupName"
|
||||
size="sm"
|
||||
class="group-item__input"
|
||||
:placeholder="t('view.favorite.worlds.new_group')"
|
||||
@keyup.enter="handleLocalGroupCreationConfirm"
|
||||
@keyup.esc="cancelLocalGroupCreation"
|
||||
@blur="cancelLocalGroupCreation" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle @dragging="setWorldSplitterDragging" />
|
||||
<ResizablePanel :order="2">
|
||||
<div class="favorites-content">
|
||||
<div class="favorites-content__header">
|
||||
<div class="favorites-content__title">
|
||||
<span v-if="isSearchActive">{{ t('view.favorite.worlds.search') }}</span>
|
||||
<template v-else-if="activeRemoteGroup">
|
||||
<span
|
||||
>{{ activeRemoteGroup.displayName }} <small
|
||||
>{{ activeRemoteGroup.count }}/{{ activeRemoteGroup.capacity }}</small
|
||||
></span
|
||||
>
|
||||
</template>
|
||||
<span v-else-if="activeLocalGroupName">
|
||||
{{ activeLocalGroupName }}
|
||||
<small>{{ activeLocalGroupCount }}</small>
|
||||
</span>
|
||||
<span v-else>No Group Selected</span>
|
||||
</div>
|
||||
<div class="favorites-content__edit">
|
||||
<span>{{ t('view.favorite.edit_mode') }}</span>
|
||||
<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 v-if="isSearchActive">
|
||||
<div class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<div
|
||||
v-if="worldFavoriteSearchResults.length"
|
||||
class="favorites-search-grid"
|
||||
:style="worldFavoritesGridStyle(worldFavoriteSearchResults.length)">
|
||||
<div
|
||||
v-for="favorite in worldFavoriteSearchResults"
|
||||
:key="favorite.id"
|
||||
class="favorites-search-card"
|
||||
@click="showWorldDialog(favorite.id)">
|
||||
<div class="favorites-search-card__content">
|
||||
<div
|
||||
class="favorites-search-card__avatar"
|
||||
:class="{ 'is-empty': !favorite.thumbnailImageUrl }">
|
||||
<img
|
||||
v-if="favorite.thumbnailImageUrl"
|
||||
:src="favorite.thumbnailImageUrl"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
<div class="favorites-search-card__detail">
|
||||
<span class="name">{{ favorite.name || favorite.id }}</span>
|
||||
<span class="text-xs">
|
||||
{{ favorite.authorName }}
|
||||
<template v-if="favorite.occupants">
|
||||
({{ favorite.occupants }})
|
||||
</template>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nomatch" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div
|
||||
v-if="activeRemoteGroup && isRemoteGroupSelected"
|
||||
class="favorites-content__scroll favorites-content__scroll--native">
|
||||
<template v-if="currentRemoteFavorites.length">
|
||||
<div
|
||||
class="favorites-card-list"
|
||||
:style="worldFavoritesGridStyle(currentRemoteFavorites.length)">
|
||||
<FavoritesWorldItem
|
||||
v-for="favorite in currentRemoteFavorites"
|
||||
:key="favorite.id"
|
||||
:group="activeRemoteGroup"
|
||||
:favorite="favorite"
|
||||
:edit-mode="worldEditMode"
|
||||
:selected="selectedFavoriteWorlds.includes(favorite.id)"
|
||||
@toggle-select="toggleWorldSelection(favorite.id, $event)"
|
||||
@click="showWorldDialog(favorite.id)" />
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">
|
||||
<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"
|
||||
data-reka-scroll-area-viewport=""
|
||||
data-slot="scroll-area-viewport"
|
||||
tabindex="0"
|
||||
style="overflow: hidden scroll">
|
||||
<template v-if="currentLocalFavorites.length">
|
||||
<div class="favorites-card-virtual" :style="localVirtualContainerStyle">
|
||||
<template v-for="item in localVirtualItems" :key="String(item.virtualItem.key)">
|
||||
<div
|
||||
v-if="item.row"
|
||||
class="favorites-card-virtual-row"
|
||||
:data-index="item.virtualItem.index"
|
||||
:ref="localVirtualizer.measureElement"
|
||||
:style="{ transform: `translateY(${item.virtualItem.start}px)` }">
|
||||
<div class="favorites-card-virtual-row-grid">
|
||||
<FavoritesWorldLocalItem
|
||||
v-for="favorite in getLocalRowItems(item.row)"
|
||||
:key="favorite.key"
|
||||
:group="activeLocalGroupName"
|
||||
:favorite="favorite.favorite"
|
||||
:edit-mode="worldEditMode"
|
||||
@remove-local-world-favorite="removeLocalWorldFavorite"
|
||||
@click="showWorldDialog(favorite.favorite.id)" />
|
||||
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"
|
||||
data-reka-scroll-area-viewport=""
|
||||
data-slot="scroll-area-viewport"
|
||||
tabindex="0"
|
||||
style="overflow: hidden scroll">
|
||||
<template v-if="currentLocalFavorites.length">
|
||||
<div class="favorites-card-virtual" :style="localVirtualContainerStyle">
|
||||
<template
|
||||
v-for="item in localVirtualItems"
|
||||
:key="String(item.virtualItem.key)">
|
||||
<div
|
||||
v-if="item.row"
|
||||
class="favorites-card-virtual-row"
|
||||
:data-index="item.virtualItem.index"
|
||||
:ref="localVirtualizer.measureElement"
|
||||
:style="{ transform: `translateY(${item.virtualItem.start}px)` }">
|
||||
<div class="favorites-card-virtual-row-grid">
|
||||
<FavoritesWorldLocalItem
|
||||
v-for="favorite in getLocalRowItems(item.row)"
|
||||
:key="favorite.key"
|
||||
:group="activeLocalGroupName"
|
||||
:favorite="favorite.favorite"
|
||||
:edit-mode="worldEditMode"
|
||||
@remove-local-world-favorite="removeLocalWorldFavorite"
|
||||
@click="showWorldDialog(favorite.favorite.id)" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="favorites-empty">
|
||||
<DataTableEmpty type="nodata" />
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
<WorldExportDialog v-model:worldExportDialogVisible="worldExportDialogVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="x-container" ref="playerListRef">
|
||||
<div class="flex h-full min-h-0 flex-col">
|
||||
<div class="flex h-full min-h-0 flex-col overflow-auto">
|
||||
<div
|
||||
v-if="currentInstanceWorld.ref.id"
|
||||
ref="playerListHeaderRef"
|
||||
|
||||
Reference in New Issue
Block a user