mirror of
https://github.com/MrUnknownDE/VRCX.git
synced 2026-04-22 08:13:52 +02:00
refactor
This commit is contained in:
pa
@@ -19,538 +19,7 @@
|
||||
:unmount-on-hide="false"
|
||||
@update:modelValue="userDialogTabClick">
|
||||
<template #Info>
|
||||
<template v-if="isFriendOnline(userDialog.friend) || currentUser.id === userDialog.id">
|
||||
<div
|
||||
class="mb-2 pb-2 border-b border-border"
|
||||
v-if="userDialog.ref.location"
|
||||
style="display: flex; flex-direction: column">
|
||||
<div style="flex: none">
|
||||
<template v-if="isRealInstance(userDialog.$location.tag)">
|
||||
<InstanceActionBar
|
||||
class="mb-1"
|
||||
:location="userDialog.$location.tag"
|
||||
:shortname="userDialog.$location.shortName"
|
||||
:currentlocation="lastLocation.location"
|
||||
:instance="userDialog.instance.ref"
|
||||
:friendcount="userDialog.instance.friendCount"
|
||||
:refresh-tooltip="t('dialog.user.info.refresh_instance_info')"
|
||||
:on-refresh="() => refreshInstancePlayerCount(userDialog.$location.tag)" />
|
||||
</template>
|
||||
<Location
|
||||
class="text-sm"
|
||||
:location="userDialog.ref.location"
|
||||
:traveling="userDialog.ref.travelingToLocation" />
|
||||
</div>
|
||||
<div
|
||||
class="flex flex-wrap items-start"
|
||||
style="flex: 1; margin-top: 8px; max-height: 150px; overflow: auto">
|
||||
<div
|
||||
v-if="userDialog.$location.userId"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
|
||||
@click="showUserDialog(userDialog.$location.userId)">
|
||||
<template v-if="userDialog.$location.user">
|
||||
<div
|
||||
class="relative inline-block flex-none size-9 mr-2.5"
|
||||
:class="userStatusClass(userDialog.$location.user)">
|
||||
<img
|
||||
class="size-full rounded-full object-cover"
|
||||
:src="userImage(userDialog.$location.user, true)"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span
|
||||
class="block truncate font-medium leading-[18px]"
|
||||
:style="{ color: userDialog.$location.user.$userColour }"
|
||||
v-text="userDialog.$location.user.displayName"></span>
|
||||
<span class="block truncate text-xs">{{
|
||||
t('dialog.user.info.instance_creator')
|
||||
}}</span>
|
||||
</div>
|
||||
</template>
|
||||
<span v-else v-text="userDialog.$location.userId"></span>
|
||||
</div>
|
||||
<div
|
||||
v-for="user in userDialog.users"
|
||||
:key="user.id"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px] hover:rounded-[25px_5px_5px_25px]"
|
||||
@click="showUserDialog(user.id)">
|
||||
<div
|
||||
class="relative inline-block flex-none size-9 mr-2.5"
|
||||
:class="userStatusClass(user)">
|
||||
<img
|
||||
class="size-full rounded-full object-cover"
|
||||
:src="userImage(user, true)"
|
||||
loading="lazy" />
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span
|
||||
class="block truncate font-medium leading-[18px]"
|
||||
:style="{ color: user.$userColour }"
|
||||
v-text="user.displayName"></span>
|
||||
<span v-if="user.location === 'traveling'" class="block truncate text-xs">
|
||||
<Spinner class="inline-block mr-1" />
|
||||
<Timer :epoch="user.$travelingToTime" />
|
||||
</span>
|
||||
<span v-else class="block truncate text-xs">
|
||||
<Timer :epoch="user.$location_at" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex flex-wrap items-start px-2.5" style="max-height: none">
|
||||
<div
|
||||
v-if="userDialog.note && !hideUserNotes"
|
||||
class="box-border flex items-center p-1.5 text-[13px] w-full cursor-pointer">
|
||||
<div class="flex-1 overflow-hidden" @click="isEditNoteAndMemoDialogVisible = true">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.note')
|
||||
}}</span>
|
||||
<pre
|
||||
class="text-xs"
|
||||
style="
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
margin: 0 0.5em 0 0;
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
"
|
||||
>{{ userDialog.note }}</pre
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="userDialog.memo && !hideUserMemos"
|
||||
class="box-border flex items-center p-1.5 text-[13px] w-full cursor-pointer">
|
||||
<div class="flex-1 overflow-hidden" @click="isEditNoteAndMemoDialogVisible = true">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.memo')
|
||||
}}</span>
|
||||
<pre
|
||||
class="text-xs"
|
||||
style="
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
margin: 0 0.5em 0 0;
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
"
|
||||
>{{ userDialog.memo }}</pre
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{
|
||||
userDialog.id !== currentUser.id &&
|
||||
userDialog.ref.profilePicOverride &&
|
||||
userDialog.ref.currentAvatarImageUrl
|
||||
? t('dialog.user.info.avatar_info_last_seen')
|
||||
: t('dialog.user.info.avatar_info')
|
||||
}}
|
||||
<TooltipWrapper
|
||||
v-if="userDialog.ref.profilePicOverride && !userDialog.ref.currentAvatarImageUrl"
|
||||
side="top"
|
||||
:content="t('dialog.user.info.vrcplus_hides_avatar')">
|
||||
<Info class="inline-block" />
|
||||
</TooltipWrapper>
|
||||
</span>
|
||||
<div class="text-xs">
|
||||
<AvatarInfo
|
||||
:key="userDialog.id"
|
||||
:imageurl="userDialog.ref.currentAvatarImageUrl"
|
||||
:userid="userDialog.id"
|
||||
:avatartags="userDialog.ref.currentAvatarTags"
|
||||
style="display: inline-block" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]" style="margin-bottom: 6px">{{
|
||||
t('dialog.user.info.represented_group')
|
||||
}}</span>
|
||||
<div
|
||||
v-if="
|
||||
userDialog.isRepresentedGroupLoading ||
|
||||
(userDialog.representedGroup && userDialog.representedGroup.isRepresenting)
|
||||
"
|
||||
class="text-xs">
|
||||
<div style="display: inline-block; flex: none; margin-right: 6px">
|
||||
<Avatar
|
||||
class="cursor-pointer size-15! rounded-lg!"
|
||||
:style="{
|
||||
background: userDialog.isRepresentedGroupLoading ? 'var(--muted)' : ''
|
||||
}"
|
||||
@click="showFullscreenImageDialog(userDialog.representedGroup.iconUrl)">
|
||||
<AvatarImage
|
||||
:src="userDialog.representedGroup.$thumbnailUrl"
|
||||
@load="userDialog.isRepresentedGroupLoading = false"
|
||||
@error="userDialog.isRepresentedGroupLoading = false" />
|
||||
<AvatarFallback class="rounded-lg!" />
|
||||
</Avatar>
|
||||
</div>
|
||||
<span
|
||||
v-if="userDialog.representedGroup.isRepresenting"
|
||||
style="vertical-align: top; cursor: pointer"
|
||||
@click="showGroupDialog(userDialog.representedGroup.groupId)">
|
||||
<span
|
||||
v-if="userDialog.representedGroup.ownerId === userDialog.id"
|
||||
style="margin-right: 6px"
|
||||
>👑</span
|
||||
>
|
||||
<span style="margin-right: 6px" v-text="userDialog.representedGroup.name"></span>
|
||||
<span>({{ userDialog.representedGroup.memberCount }})</span>
|
||||
</span>
|
||||
</div>
|
||||
<div v-else class="text-xs">-</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.bio')
|
||||
}}</span>
|
||||
<pre
|
||||
class="text-xs truncate"
|
||||
style="
|
||||
font-family: inherit;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
margin: 0 0.5em 0 0;
|
||||
max-height: 210px;
|
||||
overflow-y: auto;
|
||||
"
|
||||
>{{ bioCache.translated || userDialog.ref.bio || '-' }}</pre
|
||||
>
|
||||
<div style="float: right">
|
||||
<Button
|
||||
v-if="translationApi && userDialog.ref.bio"
|
||||
class="w-3 h-6 text-xs mr-0.5"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click="translateBio">
|
||||
<Spinner v-if="translateLoading" class="size-1" />
|
||||
<Languages v-else class="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
class="w-3 h-6 text-xs"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
v-if="userDialog.id === currentUser.id"
|
||||
style="margin-left: 6px; padding: 0"
|
||||
@click="showBioDialog"
|
||||
><Pencil class="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
<div style="margin-top: 6px" class="flex items-center">
|
||||
<TooltipWrapper v-for="(link, index) in userDialog.ref.bioLinks" :key="index">
|
||||
<template #content>
|
||||
<span v-text="link"></span>
|
||||
</template>
|
||||
<!-- onerror="this.onerror=null;this.class='icon-error'" -->
|
||||
<img
|
||||
:src="getFaviconUrl(link)"
|
||||
style="
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click.stop="openExternalLink(link)"
|
||||
loading="lazy" />
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="currentUser.id !== userDialog.id">
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.last_seen') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">{{
|
||||
formatDateFilter(userDialog.lastSeen, 'long')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="showPreviousInstancesListDialog(userDialog.ref)">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<div
|
||||
class="block truncate font-medium leading-[18px]"
|
||||
style="display: flex; justify-content: space-between; align-items: center">
|
||||
<div>
|
||||
{{ t('dialog.user.info.join_count') }}
|
||||
</div>
|
||||
|
||||
<TooltipWrapper side="top" :content="t('dialog.user.info.open_previous_instance')">
|
||||
<MoreHorizontal style="margin-right: 16px" />
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<span v-if="userDialog.joinCount === 0" class="block truncate text-xs">-</span>
|
||||
<span v-else class="block truncate text-xs" v-text="userDialog.joinCount"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.time_together') }}
|
||||
</span>
|
||||
<span v-if="userDialog.timeSpent === 0" class="block truncate text-xs">-</span>
|
||||
<span v-else class="block truncate text-xs">{{
|
||||
timeToText(userDialog.timeSpent)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<TooltipWrapper
|
||||
:disabled="currentUser.id !== userDialog.id"
|
||||
side="top"
|
||||
:content="t('dialog.user.info.open_previous_instance')">
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="showPreviousInstancesListDialog(userDialog.ref)">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.play_time') }}
|
||||
</span>
|
||||
<span v-if="userDialog.timeSpent === 0" class="block truncate text-xs">-</span>
|
||||
<span v-else class="block truncate text-xs">{{
|
||||
timeToText(userDialog.timeSpent)
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
</template>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
|
||||
<template #content>
|
||||
<span>{{ formatDateFilter(userOnlineForTimestamp(userDialog), 'short') }}</span>
|
||||
</template>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span
|
||||
v-if="userDialog.ref.state === 'online' && userDialog.ref.$online_for"
|
||||
class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.online_for') }}
|
||||
</span>
|
||||
<span v-else class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.offline_for') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">{{ userOnlineFor(userDialog.ref) }}</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<TooltipWrapper :side="currentUser.id !== userDialog.id ? 'bottom' : 'top'">
|
||||
<template #content>
|
||||
<span
|
||||
>{{ t('dialog.user.info.last_login') }}
|
||||
{{ formatDateFilter(userDialog.ref.last_login, 'long') }}</span
|
||||
>
|
||||
<br />
|
||||
<span
|
||||
>{{ t('dialog.user.info.last_activity') }}
|
||||
{{ formatDateFilter(userDialog.ref.last_activity, 'long') }}</span
|
||||
>
|
||||
</template>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.last_activity')
|
||||
}}</span>
|
||||
<span v-if="userDialog.ref.last_activity" class="block truncate text-xs">{{
|
||||
timeToText(Date.now() - Date.parse(userDialog.ref.last_activity))
|
||||
}}</span>
|
||||
<span v-else class="block truncate text-xs">-</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.date_joined')
|
||||
}}</span>
|
||||
<span class="block truncate text-xs" v-text="userDialog.ref.date_joined"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="currentUser.id !== userDialog.id"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<TooltipWrapper side="top" :disabled="userDialog.dateFriendedInfo.length < 2">
|
||||
<template #content>
|
||||
<template v-for="ref in userDialog.dateFriendedInfo" :key="ref.type">
|
||||
<span>{{ ref.type }}: {{ formatDateFilter(ref.created_at, 'long') }}</span
|
||||
><br />
|
||||
</template>
|
||||
</template>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span v-if="userDialog.unFriended" class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.unfriended') }}
|
||||
</span>
|
||||
<span v-else class="block truncate font-medium leading-[18px]">
|
||||
{{ t('dialog.user.info.friended') }}
|
||||
</span>
|
||||
<span class="block truncate text-xs">{{
|
||||
formatDateFilter(userDialog.dateFriended, 'long')
|
||||
}}</span>
|
||||
</div>
|
||||
</TooltipWrapper>
|
||||
</div>
|
||||
<template v-if="currentUser.id === userDialog.id">
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="toggleAvatarCopying">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.avatar_cloning')
|
||||
}}</span>
|
||||
<span v-if="currentUser.allowAvatarCopying" class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_allow')
|
||||
}}</span>
|
||||
<span v-else class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_deny')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="toggleAllowBooping">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.booping')
|
||||
}}</span>
|
||||
<span v-if="currentUser.isBoopingEnabled" class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_allow')
|
||||
}}</span>
|
||||
<span v-else class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_deny')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="toggleSharedConnectionsOptOut">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.show_mutual_friends')
|
||||
}}</span>
|
||||
<span v-if="!currentUser.hasSharedConnectionsOptOut" class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_allow')
|
||||
}}</span>
|
||||
<span v-else class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_deny')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="toggleDiscordFriendsOptOut">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.show_discord_connections')
|
||||
}}</span>
|
||||
<span v-if="!currentUser.hasDiscordFriendsOptOut" class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_allow')
|
||||
}}</span>
|
||||
<span v-else class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_deny')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] cursor-default w-[167px]">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.avatar_cloning')
|
||||
}}</span>
|
||||
<span v-if="userDialog.ref.allowAvatarCopying" class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_allow')
|
||||
}}</span>
|
||||
<span v-else class="block truncate text-xs">{{
|
||||
t('dialog.user.info.avatar_cloning_deny')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div
|
||||
v-if="userDialog.ref.id === currentUser.id"
|
||||
class="box-border flex items-center p-1.5 text-[13px] cursor-pointer w-[167px]"
|
||||
@click="getVRChatCredits()">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('view.profile.profile.vrchat_credits')
|
||||
}}</span>
|
||||
<span class="block truncate text-xs">{{
|
||||
vrchatCredit ?? t('view.profile.profile.refresh')
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="userDialog.ref.id === currentUser.id && currentUser.homeLocation"
|
||||
class="box-border flex items-center p-1.5 text-[13px] w-full cursor-pointer"
|
||||
@click="showWorldDialog(currentUser.homeLocation)">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.home_location')
|
||||
}}</span>
|
||||
<span class="block truncate text-xs">
|
||||
<span v-text="userDialog.$homeLocationName"></span>
|
||||
<Button
|
||||
class="rounded-full ml-1 text-xs"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click.stop="resetHome()"
|
||||
><Trash2 class="h-4 w-4" />
|
||||
</Button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-border flex items-center p-1.5 text-[13px] w-full cursor-default">
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<span class="block truncate font-medium leading-[18px]">{{
|
||||
t('dialog.user.info.id')
|
||||
}}</span>
|
||||
<span class="block truncate text-xs">
|
||||
{{ userDialog.id }}
|
||||
<TooltipWrapper side="top" :content="t('dialog.user.info.id_tooltip')">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger as-child>
|
||||
<Button
|
||||
class="rounded-full ml-1 text-xs"
|
||||
size="icon-sm"
|
||||
variant="ghost"
|
||||
@click.stop
|
||||
><Copy class="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent>
|
||||
<DropdownMenuItem @click="copyUserId(userDialog.id)">
|
||||
{{ t('dialog.user.info.copy_id') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="copyUserURL(userDialog.id)">
|
||||
{{ t('dialog.user.info.copy_url') }}
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem @click="copyUserDisplayName(userDialog.ref.displayName)">
|
||||
{{ t('dialog.user.info.copy_display_name') }}
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</TooltipWrapper>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<UserDialogInfoTab ref="infoTabRef" @show-bio-dialog="showBioDialog" />
|
||||
</template>
|
||||
|
||||
<template v-if="userDialog.id !== currentUser.id && !currentUser.hasSharedConnectionsOptOut" #mutual>
|
||||
@@ -597,31 +66,18 @@
|
||||
<BioDialog :bio-dialog="bioDialog" />
|
||||
<PronounsDialog :pronouns-dialog="pronounsDialog" />
|
||||
<ModerateGroupDialog />
|
||||
<EditNoteAndMemoDialog v-model:visible="isEditNoteAndMemoDialogVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { Copy, Info, Languages, MoreHorizontal, Pencil, Trash2 } from 'lucide-vue-next';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger
|
||||
} from '@/components/ui/dropdown-menu';
|
||||
import { computed, defineAsyncComponent, ref, watch } from 'vue';
|
||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
||||
import { DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Spinner } from '@/components/ui/spinner';
|
||||
import { TabsUnderline } from '@/components/ui/tabs';
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { toast } from 'vue-sonner';
|
||||
import { useI18n } from 'vue-i18n';
|
||||
|
||||
import {
|
||||
useAdvancedSettingsStore,
|
||||
useAppearanceSettingsStore,
|
||||
useAvatarStore,
|
||||
useFavoriteStore,
|
||||
useFriendStore,
|
||||
@@ -633,33 +89,19 @@
|
||||
useModalStore,
|
||||
useModerationStore,
|
||||
useNotificationStore,
|
||||
useUserStore,
|
||||
useWorldStore
|
||||
useUserStore
|
||||
} from '../../../stores';
|
||||
import {
|
||||
copyToClipboard,
|
||||
formatDateFilter,
|
||||
getFaviconUrl,
|
||||
isFriendOnline,
|
||||
isRealInstance,
|
||||
openExternalLink,
|
||||
refreshInstancePlayerCount,
|
||||
timeToText,
|
||||
userImage,
|
||||
userOnlineFor,
|
||||
userOnlineForTimestamp,
|
||||
userStatusClass
|
||||
} from '../../../shared/utils';
|
||||
import { miscRequest, userRequest } from '../../../api';
|
||||
import { copyToClipboard } from '../../../shared/utils';
|
||||
import { formatJsonVars } from '../../../shared/utils/base/ui';
|
||||
import { miscRequest } from '../../../api';
|
||||
import { useUserDialogCommands } from './useUserDialogCommands';
|
||||
|
||||
import DialogJsonTab from '../DialogJsonTab.vue';
|
||||
import InstanceActionBar from '../../InstanceActionBar.vue';
|
||||
import SendInviteDialog from '../InviteDialog/SendInviteDialog.vue';
|
||||
import UserDialogAvatarsTab from './UserDialogAvatarsTab.vue';
|
||||
import UserDialogFavoriteWorldsTab from './UserDialogFavoriteWorldsTab.vue';
|
||||
import UserDialogGroupsTab from './UserDialogGroupsTab.vue';
|
||||
import UserDialogInfoTab from './UserDialogInfoTab.vue';
|
||||
import UserDialogMutualFriendsTab from './UserDialogMutualFriendsTab.vue';
|
||||
import UserDialogWorldsTab from './UserDialogWorldsTab.vue';
|
||||
import UserSummaryHeader from './UserSummaryHeader.vue';
|
||||
@@ -670,7 +112,6 @@
|
||||
const SendInviteRequestDialog = defineAsyncComponent(() => import('./SendInviteRequestDialog.vue'));
|
||||
const SocialStatusDialog = defineAsyncComponent(() => import('./SocialStatusDialog.vue'));
|
||||
const ModerateGroupDialog = defineAsyncComponent(() => import('../ModerateGroupDialog.vue'));
|
||||
const EditNoteAndMemoDialog = defineAsyncComponent(() => import('./EditNoteAndMemoDialog.vue'));
|
||||
|
||||
const { t } = useI18n();
|
||||
const userDialogTabs = computed(() => {
|
||||
@@ -687,6 +128,7 @@
|
||||
}
|
||||
return tabs;
|
||||
});
|
||||
const infoTabRef = ref(null);
|
||||
const favoriteWorldsTabRef = ref(null);
|
||||
const mutualFriendsTabRef = ref(null);
|
||||
const worldsTabRef = ref(null);
|
||||
@@ -696,28 +138,18 @@
|
||||
const modalStore = useModalStore();
|
||||
const instanceStore = useInstanceStore();
|
||||
|
||||
const { hideUserNotes, hideUserMemos, isDarkMode } = storeToRefs(useAppearanceSettingsStore());
|
||||
const { bioLanguage, translationApi, translationApiType } = storeToRefs(useAdvancedSettingsStore());
|
||||
const { translateText } = useAdvancedSettingsStore();
|
||||
const { userDialog, languageDialog, currentUser, isLocalUserVrcPlusSupporter } = storeToRefs(useUserStore());
|
||||
const {
|
||||
cachedUsers,
|
||||
showUserDialog,
|
||||
refreshUserDialogAvatars,
|
||||
showSendBoopDialog,
|
||||
toggleSharedConnectionsOptOut,
|
||||
toggleDiscordFriendsOptOut
|
||||
} = useUserStore();
|
||||
const { cachedUsers, showUserDialog, refreshUserDialogAvatars, showSendBoopDialog } = useUserStore();
|
||||
const { showFavoriteDialog } = useFavoriteStore();
|
||||
const { showAvatarDialog, showAvatarAuthorDialog } = useAvatarStore();
|
||||
const { showWorldDialog } = useWorldStore();
|
||||
|
||||
const { showGroupDialog, showModerateGroupDialog } = useGroupStore();
|
||||
const { inviteGroupDialog } = storeToRefs(useGroupStore());
|
||||
const { lastLocation, lastLocationDestination } = storeToRefs(useLocationStore());
|
||||
const { refreshInviteMessageTableData } = useInviteStore();
|
||||
const { friendLogTable } = storeToRefs(useFriendStore());
|
||||
const { getFriendRequest, handleFriendDelete } = useFriendStore();
|
||||
const { clearInviteImageUpload, showFullscreenImageDialog, showGalleryPage } = useGalleryStore();
|
||||
const { clearInviteImageUpload, showGalleryPage } = useGalleryStore();
|
||||
|
||||
const { applyPlayerModeration, handlePlayerModerationDelete } = useModerationStore();
|
||||
|
||||
@@ -759,12 +191,6 @@
|
||||
() => {
|
||||
if (userDialog.value.visible) {
|
||||
!userDialog.value.loading && loadLastActiveTab();
|
||||
if (userDialog.value.id !== bioCache.value.userId) {
|
||||
bioCache.value = {
|
||||
userId: null,
|
||||
translated: null
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
@@ -794,21 +220,11 @@
|
||||
bioLinks: []
|
||||
});
|
||||
|
||||
const translateLoading = ref(false);
|
||||
|
||||
const pronounsDialog = ref({
|
||||
visible: false,
|
||||
loading: false,
|
||||
pronouns: ''
|
||||
});
|
||||
|
||||
const bioCache = ref({
|
||||
userId: null,
|
||||
translated: null
|
||||
});
|
||||
|
||||
const isEditNoteAndMemoDialogVisible = ref(false);
|
||||
const vrchatCredit = ref(null);
|
||||
const treeData = ref({});
|
||||
|
||||
/**
|
||||
@@ -873,9 +289,7 @@
|
||||
userDialog.value.lastActiveTab = tabName;
|
||||
const userId = userDialog.value.id;
|
||||
if (tabName === 'Info') {
|
||||
if (vrchatCredit.value === null) {
|
||||
getVRChatCredits();
|
||||
}
|
||||
infoTabRef.value?.onTabActivated();
|
||||
} else if (tabName === 'mutual') {
|
||||
if (userId === currentUser.value.id) {
|
||||
userDialog.value.activeTab = 'Info';
|
||||
@@ -962,7 +376,7 @@
|
||||
showBioDialog,
|
||||
showPronounsDialog,
|
||||
showEditNoteAndMemoDialog: () => {
|
||||
isEditNoteAndMemoDialogVisible.value = true;
|
||||
infoTabRef.value?.showEditNoteAndMemoDialog();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -1038,113 +452,6 @@
|
||||
D.visible = true;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
async function translateBio() {
|
||||
if (translateLoading.value) {
|
||||
return;
|
||||
}
|
||||
const bio = userDialog.value.ref.bio;
|
||||
if (!bio) {
|
||||
return;
|
||||
}
|
||||
|
||||
const targetLang = bioLanguage.value;
|
||||
|
||||
if (bioCache.value.userId !== userDialog.value.id) {
|
||||
bioCache.value.userId = userDialog.value.id;
|
||||
bioCache.value.translated = null;
|
||||
}
|
||||
|
||||
if (bioCache.value.translated) {
|
||||
bioCache.value.translated = null;
|
||||
return;
|
||||
}
|
||||
|
||||
translateLoading.value = true;
|
||||
try {
|
||||
const providerLabel = translationApiType.value === 'openai' ? 'OpenAI' : 'Google';
|
||||
const translated = await translateText(`${bio}\n\nTranslated by ${providerLabel}`, targetLang);
|
||||
if (!translated) {
|
||||
throw new Error('No translation returned');
|
||||
}
|
||||
|
||||
bioCache.value.translated = translated;
|
||||
} catch (err) {
|
||||
console.error('Translation failed:', err);
|
||||
} finally {
|
||||
translateLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param userRef
|
||||
*/
|
||||
function showPreviousInstancesListDialog(userRef) {
|
||||
instanceStore.showPreviousInstancesListDialog('user', userRef);
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function toggleAvatarCopying() {
|
||||
userRequest.saveCurrentUser({
|
||||
allowAvatarCopying: !currentUser.value.allowAvatarCopying
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function toggleAllowBooping() {
|
||||
userRequest.saveCurrentUser({
|
||||
isBoopingEnabled: !currentUser.value.isBoopingEnabled
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function resetHome() {
|
||||
modalStore
|
||||
.confirm({
|
||||
description: t('confirm.command_question', {
|
||||
command: t('dialog.user.actions.reset_home')
|
||||
}),
|
||||
title: t('confirm.title')
|
||||
})
|
||||
.then(({ ok }) => {
|
||||
if (!ok) return;
|
||||
userRequest
|
||||
.saveCurrentUser({
|
||||
homeLocation: ''
|
||||
})
|
||||
.then((args) => {
|
||||
toast.success('Home world has been reset');
|
||||
return args;
|
||||
});
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param userId
|
||||
*/
|
||||
function copyUserId(userId) {
|
||||
copyToClipboard(userId, 'User ID copied to clipboard');
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param userId
|
||||
*/
|
||||
function copyUserURL(userId) {
|
||||
copyToClipboard(`https://vrchat.com/home/user/${userId}`, 'User URL copied to clipboard');
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param displayName
|
||||
@@ -1159,11 +466,4 @@
|
||||
function closeInviteDialog() {
|
||||
clearInviteImageUpload();
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*/
|
||||
function getVRChatCredits() {
|
||||
miscRequest.getVRChatCredits().then((args) => (vrchatCredit.value = args.json?.balance));
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user