MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-04-17 22:03:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/ui/data-table/DataTableLayout.vue
View File

@@ -5,7 +5,7 @@
</div>
<div class="rounded-md border">
<ScrollArea class="max-w-full" :style="tableStyle">
<div class="max-w-full overflow-auto" :style="tableStyle">
<Table :class="tableClassValue" :style="tableElementStyle">
<colgroup>
<col v-for="col in table.getVisibleLeafColumns()" :key="col.id" :style="getColStyle(col)" />
@@ -65,7 +65,7 @@
</TableRow>
</TableBody>
</Table>
</ScrollArea>
</div>
</div>
<div v-if="showPagination" class="mt-4 flex w-full items-center gap-3">
@@ -125,7 +125,6 @@
} from '../pagination';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../select';
import { ScrollArea } from '../scroll-area';
const props = defineProps({
table: {
@@ -256,7 +255,7 @@
const meta = columnDef?.meta ?? {};
const pinned = getPinnedState(header?.column);
return joinClasses(
'sticky top-0 bg-background relative group',
'sticky top-0 bg-background dark:bg-sidebar border-b border-border group',
pinned ? 'z-30' : 'z-10',
isSpacer(header.column) && 'p-0',
resolveClassValue(meta.class, header?.getContext?.()),

3
src/styles/globals.css
View File

@@ -205,8 +205,7 @@
}
[data-slot='table-header'],
[data-slot='table-header'] [data-slot='table-row'],
[data-slot='table-head'] {
[data-slot='table-header'] [data-slot='table-row'] {
background-color: transparent;
}

180
src/views/Favorites/FavoritesAvatar.vue
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;

132
src/views/Favorites/FavoritesWorld.vue
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;

14
src/views/Favorites/components/FavoritesAvatarItem.vue
View File

@@ -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>

11
src/views/Favorites/components/FavoritesAvatarLocalHistoryItem.vue
View File

@@ -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>

8
src/views/Favorites/components/FavoritesFriendItem.vue
View File

@@ -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>

16
src/views/Favorites/components/FavoritesWorldItem.vue
View File

@@ -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>

12
src/views/Favorites/components/FavoritesWorldLocalItem.vue
View File

@@ -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>

4
src/views/Feed/Feed.vue
View File

@@ -11,7 +11,9 @@
<div style="margin: 0 0 10px; display: flex; align-items: center">
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
<TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
<Switch v-model="feedTable.vip" @update:modelValue="feedTableLookup" />
<span class="inline-flex">
<Switch v-model="feedTable.vip" @update:modelValue="feedTableLookup" />
</span>
</TooltipWrapper>
</div>
<Select

8
src/views/FriendList/FriendList.vue
View File

@@ -15,9 +15,11 @@
<div class="flex items-center justify-between">
<div class="flex flex-none mr-2 items-center">
<TooltipWrapper side="bottom" :content="t('view.friend_list.favorites_only_tooltip')">
<Switch
v-model="friendsListSearchFilterVIP"
@update:modelValue="friendsListSearchChange" />
<span class="inline-flex">
<Switch
v-model="friendsListSearchFilterVIP"
@update:modelValue="friendsListSearchChange" />
</span>
</TooltipWrapper>
<Select
multiple

56
src/views/FriendsLocations/FriendsLocations.vue
View File

@@ -484,36 +484,8 @@
scrollViewportRef.value = rootEl.querySelector('[data-slot="scroll-area-viewport"]');
}
const maxColumns = computed(() => {
const styleFn = gridStyle.value;
if (typeof styleFn !== 'function') {
return 1;
}
const containerWidth = Math.max(gridWidth.value ?? 0, 0);
const baseWidth = 220;
const baseGap = 14;
const scale = cardScale.value;
const spacing = cardSpacing.value;
const minWidth = baseWidth * scale;
const gap = Math.max(6, (baseGap + (scale - 1) * 10) * spacing);
return Math.max(1, Math.floor((containerWidth + gap) / (minWidth + gap)) || 1);
});
const chunk = (items = [], size = 1) => {
const out = [];
const n = Math.max(1, Math.floor(size) || 1);
for (let i = 0; i < items.length; i += n) {
out.push(items.slice(i, i + n));
}
return out;
};
const virtualRows = computed(() => {
const rows = [];
const columns = maxColumns.value;
if (isSameInstanceView.value) {
for (const group of sameInstanceGroupsForVirtual.value) {
@@ -525,13 +497,11 @@
});
const friends = Array.isArray(group.friends) ? group.friends : [];
for (const rowFriends of chunk(friends, Math.min(columns, friends.length || 1))) {
if (friends.length) {
rows.push({
type: 'cards',
key: `g:${group.instanceId}:${rowFriends
.map((f) => f?.id ?? f?.userId ?? f?.displayName ?? '')
.join('|')}`,
items: rowFriends.map((friend) => ({
key: `g:${group.instanceId}`,
items: friends.map((friend) => ({
key: `f:${friend?.id ?? friend?.userId ?? friend?.displayName ?? Math.random()}`,
friend,
displayInstanceInfo: true
@@ -553,13 +523,11 @@
});
const friends = Array.isArray(group.friends) ? group.friends : [];
for (const rowFriends of chunk(friends, Math.min(columns, friends.length || 1))) {
if (friends.length) {
rows.push({
type: 'cards',
key: `mg:${group.instanceId}:${rowFriends
.map((f) => f?.id ?? f?.userId ?? f?.displayName ?? '')
.join('|')}`,
items: rowFriends.map((friend) => ({
key: `mg:${group.instanceId}`,
items: friends.map((friend) => ({
key: `f:${friend?.id ?? friend?.userId ?? friend?.displayName ?? Math.random()}`,
friend,
displayInstanceInfo: false
@@ -573,11 +541,11 @@
}
const online = mergedOnlineEntries.value;
for (const rowEntries of chunk(online, Math.min(columns, online.length || 1))) {
if (online.length) {
rows.push({
type: 'cards',
key: `o:${rowEntries.map((e) => e?.id ?? '').join('|')}`,
items: rowEntries.map((entry) => ({
key: 'o:merged',
items: online.map((entry) => ({
key: `e:${entry?.id ?? entry?.friend?.id ?? entry?.friend?.displayName ?? Math.random()}`,
friend: entry.friend,
displayInstanceInfo: true
@@ -589,11 +557,11 @@
}
const entries = filteredFriends.value;
for (const rowEntries of chunk(entries, Math.min(columns, entries.length || 1))) {
if (entries.length) {
rows.push({
type: 'cards',
key: `r:${rowEntries.map((e) => e?.id ?? '').join('|')}`,
items: rowEntries.map((entry) => ({
key: 'r:all',
items: entries.map((entry) => ({
key: `e:${entry?.id ?? entry?.friend?.id ?? entry?.friend?.displayName ?? Math.random()}`,
friend: entry.friend,
displayInstanceInfo: true

4
src/views/GameLog/GameLog.vue
View File

@@ -11,7 +11,9 @@
<div style="margin: 0 0 10px; display: flex; align-items: center">
<div style="flex: none; margin-right: 10px; display: flex; align-items: center">
<TooltipWrapper side="bottom" :content="t('view.feed.favorites_only_tooltip')">
<Switch v-model="gameLogTable.vip" @update:modelValue="gameLogTableLookup" />
<span class="inline-flex">
<Switch v-model="gameLogTable.vip" @update:modelValue="gameLogTableLookup" />
</span>
</TooltipWrapper>
</div>
<Select

2
src/views/Notifications/columns.jsx
View File

@@ -183,7 +183,7 @@ export const createColumns = ({
location={original.location}
hint={original.worldName}
grouphint={original.groupName}
link={false}
link={true}
/>
) : null}
</TooltipContent>

41
src/views/Tools/Gallery.vue
View File

@@ -1,7 +1,8 @@
<template>
<div class="gallery-page x-container">
<div class="gallery-page__header">
<Button variant="ghost" class="gallery-page__back" @click="goBack">
<div class="flex items-center gap-2 ml-2">
<Button variant="ghost" size="sm" class="mr-3" @click="goBack">
<ArrowLeft />
{{ t('nav_tooltip.tools') }}
</Button>
<span class="header">{{ t('dialog.gallery_icons.header') }}</span>
@@ -441,7 +442,7 @@
<InputGroupTextareaField
v-model="printUploadNote"
:rows="1"
maxlength="32"
:maxlength="32"
style="margin-left: 10px; width: 300px"
:placeholder="t('dialog.gallery_icons.note')"
input-class="resize-none min-h-0" />
@@ -459,7 +460,10 @@
<div
class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-pointer"
@click="showFullscreenImageDialog(image.files.image, getPrintFileName(image))">
<img class="h-full w-full rounded-[15px] object-cover" :src="image.files.image" loading="lazy" />
<img
class="h-full w-full rounded-[15px] object-cover"
:src="image.files.image"
loading="lazy" />
</div>
<div style="margin-top: 5px; width: 208px">
<span class="block truncate" v-if="image.note" v-text="image.note"></span>
@@ -468,8 +472,7 @@
class="block truncate"
v-if="image.worldId"
:location="image.worldId"
:hint="image.worldName"
/>
:hint="image.worldName" />
<span v-else class="block">&nbsp;</span>
<DisplayName
class="block truncate gallery-meta"
@@ -525,15 +528,14 @@
:key="item.id"
style="display: inline-block; margin-top: 10px; width: unset; cursor: default">
<div class="h-[200px] w-[200px] rounded-[20px] overflow-hidden cursor-default">
<img class="h-full w-full rounded-[15px] object-cover" :src="item.imageUrl" loading="lazy" />
<img
class="h-full w-full rounded-[15px] object-cover"
:src="item.imageUrl"
loading="lazy" />
</div>
<div style="margin-top: 5px; width: 208px">
<span class="block truncate" v-text="item.name"></span>
<span
v-if="item.description"
class="block truncate"
v-text="item.description"
></span>
<span v-if="item.description" class="block truncate" v-text="item.description"></span>
<span v-else class="block">&nbsp;</span>
<span class="block truncate gallery-meta gallery-meta--small">
{{ formatDateFilter(item.created_at, 'long') }}
@@ -561,7 +563,7 @@
</template>
<script setup>
import { Gift, Maximize2, RefreshCw, Trash2, Upload, X } from 'lucide-vue-next';
import { ArrowLeft, Gift, Maximize2, RefreshCw, Trash2, Upload, X } from 'lucide-vue-next';
import {
NumberField,
NumberFieldContent,
@@ -603,12 +605,6 @@
const {
galleryTable,
galleryDialogVisible,
galleryDialogGalleryLoading,
galleryDialogIconsLoading,
galleryDialogEmojisLoading,
galleryDialogStickersLoading,
galleryDialogPrintsLoading,
galleryDialogInventoryLoading,
VRCPlusIconsTable,
printUploadNote,
printCropBorder,
@@ -1183,13 +1179,6 @@
</script>
<style scoped>
.gallery-page__header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
.gallery-tab-count {
font-size: 12px;
margin-left: 5px;

15
src/views/Tools/ScreenshotMetadata.vue
View File

@@ -1,7 +1,8 @@
<template>
<div class="screenshot-metadata-page x-container">
<div class="screenshot-metadata-page__header">
<Button variant="ghost" class="screenshot-metadata-page__back" @click="goBack">
<div class="flex items-center gap-2 ml-2">
<Button variant="ghost" size="sm" class="mr-3" @click="goBack">
<ArrowLeft />
{{ t('nav_tooltip.tools') }}
</Button>
<span class="header">{{ t('dialog.screenshot_metadata.header') }}</span>
@@ -151,6 +152,7 @@
import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
import { useGalleryStore, useUserStore, useVrcxStore } from '@/stores';
import { ArrowLeft } from 'lucide-vue-next';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { InputGroupSearch } from '@/components/ui/input-group';
@@ -533,12 +535,3 @@
}
}
</script>
<style scoped>
.screenshot-metadata-page__header {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
}
</style>

7
src/views/Tools/components/GroupCalendarEventCard.vue
View File

@@ -19,7 +19,7 @@
<PopoverContent
side="right"
align="start"
class="w-[500px] p-3"
class="w-125 p-3"
@mouseenter="openEventPopover"
@mouseleave="scheduleCloseEventPopover">
<div class="flex items-baseline justify-between gap-3 text-xs">
@@ -312,6 +312,7 @@
gap: 4px;
border-radius: 50%;
cursor: pointer;
background-color: var(--color-accent);
}
.event-card .badges .share-badge {
@@ -324,6 +325,7 @@
border-radius: 50%;
cursor: pointer;
margin-right: 5px;
background-color: var(--color-accent);
}
.event-card .event-content {
@@ -366,9 +368,6 @@
margin-bottom: 2px;
}
.event-card .event-title-content:hover {
}
.event-card .event-info {
display: flex;
justify-content: space-between;

13
src/views/Tools/components/GroupCalendarMonth.vue
View File

@@ -139,7 +139,7 @@
{{ dayLabel(weekDate) }}
<div
v-if="eventCountFor(weekDate) > 0"
class="calendar-event-badge"
class="calendar-event-badge text-zinc-900"
:class="hasFollowingFor(weekDate) ? 'has-following' : 'no-following'">
{{ eventCountFor(weekDate) }}
</div>
@@ -165,6 +165,7 @@
width: 100%;
display: flex;
align-items: flex-start;
padding: 0 12x 0 12px;
}
.date {
@@ -186,9 +187,6 @@
position: relative;
}
.calendar-date-content.has-events {
}
.calendar-event-badge {
position: absolute;
top: -4px;
@@ -203,12 +201,7 @@
z-index: 10;
padding: 0 5px;
line-height: 14px;
}
.calendar-event-badge.has-following {
}
.calendar-event-badge.no-following {
background-color: var(--color-accent);
}
.calendar-event-dot {

34
src/views/Tools/dialogs/GroupCalendarDialog.vue
View File

@@ -1,9 +1,13 @@
<template>
<Dialog :open="visible" @update:open="(open) => (open ? null : closeDialog())">
<DialogContent class="x-dialog sm:max-w-[50vw] h-[60vh] overflow-hidden">
<DialogContent class="x-dialog sm:max-w-[50vw] h-[70vh] overflow-hidden">
<DialogHeader>
<div class="dialog-title-container">
<DialogTitle>{{ t('dialog.group_calendar.header') }}</DialogTitle>
</div>
<div class="featured-switch">
<span class="featured-switch-text">{{ t('dialog.group_calendar.featured_events') }}</span>
<Switch v-model="showFeaturedEvents" @update:modelValue="toggleFeaturedEvents" class="mr-2" />
<Button size="sm" variant="outline" @click="toggleViewMode" class="view-toggle-btn">
{{
viewMode === 'timeline'
@@ -12,10 +16,6 @@
}}
</Button>
</div>
<div class="featured-switch">
<span class="featured-switch-text">{{ t('dialog.group_calendar.featured_events') }}</span>
<Switch v-model="showFeaturedEvents" @update:modelValue="toggleFeaturedEvents" />
</div>
</DialogHeader>
<div class="top-content">
<div v-if="viewMode === 'timeline'" key="timeline" class="timeline-view">
@@ -458,6 +458,7 @@
margin-left: 10px;
margin-right: 6px;
overflow: auto;
height: 50vh;
.timeline-list {
display: flex;
@@ -506,9 +507,7 @@
position: relative;
&.has-events {
background-color: var(
--group-calendar-event-bg,
);
background-color: var(--group-calendar-event-bg,);
}
.calendar-event-badge {
position: absolute;
@@ -525,10 +524,6 @@
z-index: 10;
padding: 0 4px;
line-height: 16px;
&.has-following {
}
&.no-following {
}
}
}
}
@@ -551,6 +546,7 @@
.featured-switch {
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 10px;
.featured-switch-text {
font-size: 13px;
@@ -559,24 +555,10 @@
}
.timeline-view {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
.timeline-container {
flex: 1;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
.calendar-container {
width: 609px;
height: 100%;
flex-shrink: 0;
}
}