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

improve: Group all friends by the same instance (#1097)

Browse Source 
* improve: Group all friends by the same instance

* style
This commit is contained in:
pa
2025-01-25 03:09:57 +09:00
committed by GitHub
parent 51a1897a76
commit 85c6cb6f4f
4 changed files with 145 additions and 223 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
src/app.js
View File

@@ -23140,22 +23140,48 @@ console.log(`isLinux: ${LINUX}`);
'VRCX_sidebarGroupByInstance',
true
);
$app.computed.onlineFriendsInSameInstance = function () {
const groupedItems = {};
this.onlineFriends.forEach((item) => {
const key = item.ref?.$location.tag;
$app.methods.handleSwitchGroupByInstance = function () {
this.isSidebarGroupByInstance = !this.isSidebarGroupByInstance;
configRepository.setBool(
'VRCX_sidebarGroupByInstance',
this.isSidebarGroupByInstance
);
};
$app.data.isSidebarGroupByInstanceCollapsed =
await configRepository.getBool(
'VRCX_sidebarGroupByInstanceCollapsed',
false
);
$app.methods.toggleSwitchGroupByInstanceCollapsed = function () {
this.isSidebarGroupByInstanceCollapsed =
!this.isSidebarGroupByInstanceCollapsed;
configRepository.setBool(
'VRCX_sidebarGroupByInstanceCollapsed',
this.isSidebarGroupByInstanceCollapsed
);
};
$app.computed.friendsInSameInstance = function () {
const friendsList = {};
const allFriends = [...this.vipFriends, ...this.onlineFriends];
allFriends.forEach((friend) => {
const key = friend.ref?.$location.tag;
if (!key || key === 'private' || key === 'offline') return;
if (!groupedItems[key]) {
groupedItems[key] = [];
if (!friendsList[key]) {
friendsList[key] = [];
}
groupedItems[key].push(item);
friendsList[key].push(friend);
});
const sortedGroups = [];
for (const group of Object.values(groupedItems)) {
const sortedFriendsList = [];
for (const group of Object.values(friendsList)) {
if (group.length > 1) {
sortedGroups.push(
sortedFriendsList.push(
group.sort(
(a, b) => a.ref?.$location_at - b.ref?.$location_at
)
@@ -23163,55 +23189,39 @@ console.log(`isLinux: ${LINUX}`);
}
}
return sortedGroups.sort((a, b) => b.length - a.length);
return sortedFriendsList.sort((a, b) => b.length - a.length);
};
$app.computed.onlineFriendsNotInSameInstance = function () {
const friendsInSameInstance = new Set(
this.onlineFriendsInSameInstance.flat().map((friend) => friend.id)
$app.computed.onlineFriendsByGroupStatus = function () {
const sameInstanceTag = new Set(
this.friendsInSameInstance.flatMap((item) =>
item.map((friend) => friend.ref?.$location.tag)
)
);
return this.onlineFriends.filter(
(friend) => !friendsInSameInstance.has(friend.id)
(item) => !sameInstanceTag.has(item.ref?.$location.tag)
);
};
$app.computed.vipFriendsInSameInstance = function () {
const groupedItems = {};
this.vipFriends.forEach((item) => {
const key = item.ref?.$location.tag;
if (!key || key === 'private' || key === 'offline') return;
if (!groupedItems[key]) {
groupedItems[key] = [];
}
groupedItems[key].push(item);
});
const sortedGroups = [];
for (const group of Object.values(groupedItems)) {
if (group.length > 1) {
sortedGroups.push(
group.sort(
(a, b) => a.ref?.$location_at - b.ref?.$location_at
)
);
}
}
return sortedGroups.sort((a, b) => b.length - a.length);
};
$app.computed.vipFriendsNotInSameInstance = function () {
const friendsInSameInstance = new Set(
this.vipFriendsInSameInstance.flat().map((friend) => friend.id)
$app.computed.vipFriendsByGroupStatus = function () {
const sameInstanceTag = new Set(
this.friendsInSameInstance.flatMap((item) =>
item.map((friend) => friend.ref?.$location.tag)
)
);
return this.vipFriends.filter(
(friend) => !friendsInSameInstance.has(friend.id)
(item) => !sameInstanceTag.has(item.ref?.$location.tag)
);
};
$app.methods.getFriendsLocations = function (friendsArr) {
// prevent the instance title display as "Traveling".
return friendsArr.find((friend) => !friend.ref?.$location?.isTraveling)
?.ref?.location;
};
// #endregion
// #region | Electron

1
src/localization/en/en.json
View File

@@ -633,6 +633,7 @@
"friends": "Friends",
"me": "ME",
"favorite": "FAVORITES",
"same_instance": "Same Instance",
"online": "ONLINE",
"active": "ACTIVE",
"offline": "OFFLINE",

3
src/localization/zh-CN/en.json
View File

@@ -633,6 +633,7 @@
"friends": "好友",
"me": "我",
"favorite": "星标好友",
"same_instance": "同一房间",
"online": "在线",
"active": "活跃中（仅登录网页端）",
"offline": "离线",
@@ -2014,4 +2015,4 @@
}
}
}
}
}

264
src/mixins/friendsListSidebar.pug
View File

@@ -70,34 +70,72 @@ mixin friendsListSidebar
span.extra(v-else v-text='API.currentUser.statusDescription')
.x-friend-group.x-link(
@click='isVIPFriends = !isVIPFriends; saveFriendsGroupStates()'
v-show='vipFriends.length')
v-show='vipFriendsByGroupStatus.length')
i.el-icon-arrow-right(:class='{ rotate: isVIPFriends }')
span(style='margin-left: 5px') {{ $t('side_panel.favorite') }} ― {{ vipFriends.length }}
span(style='margin-left: 5px') {{ $t('side_panel.favorite') }} ― {{ vipFriendsByGroupStatus.length }}
div(v-show='isVIPFriends')
template(v-if='isSidebarGroupByInstance')
div(
v-for='(friendArr, idx) in vipFriendsInSameInstance'
:key='friendArr[0].ref?.location.tag')
.x-friend-item(
v-for='friend in vipFriendsByGroupStatus'
:key='friend.id'
@click='showUserDialog(friend.id)')
template(v-if='friend.ref')
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
img(v-lazy='userImage(friend.ref)')
.detail
span.name(
v-if='!hideNicknames && friend.$nickName'
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
span.name(
v-else
v-text='friend.ref.displayName'
:style='{ color: friend.ref.$userColour }')
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
location.extra(
v-else
:location='friend.ref.location'
:traveling='friend.ref.travelingToLocation'
:link='false')
template(v-else)
span(v-text='friend.name || friend.id')
el-button(
type='text'
icon='el-icon-close'
size='mini'
@click.stop='confirmDeleteFriend(friend.id)'
style='margin-left: 5px')
//- Group By Instance
template(v-if='isSidebarGroupByInstance && friendsInSameInstance.length')
.x-friend-group.x-link(@click='toggleSwitchGroupByInstanceCollapsed')
i.el-icon-arrow-right(:class='{ rotate: isSidebarGroupByInstanceCollapsed }')
span(style='margin-left: 5px') {{ $t('side_panel.same_instance') }} ― {{ friendsInSameInstance.length }}
div(v-show='!isSidebarGroupByInstanceCollapsed')
div(v-for='friendArr in friendsInSameInstance' :key='friendArr[0].ref?.location.tag')
div(style='margin-bottom: 3px')
location.extra(:location='friendArr[0].ref?.location' style='color: #c7c7c7')
location.extra(:location='getFriendsLocations(friendArr)' style='color: #c7c7c7')
span(style='margin-left: 5px') {{ `(${friendArr.length})` }}
div(style='margin-bottom: 10px')
div
.x-friend-item(
v-if='friendArr && friendArr.length'
v-for='friend in friendArr'
v-for='(friend, idx) in friendArr'
:key='friend.id'
@click='showUserDialog(friend.id)')
@click='showUserDialog(friend.id)'
:style='{ "margin-bottom": idx === friendArr.length - 1 ? "5px" : undefined }')
template(v-if='friend.ref')
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
img(v-lazy='userImage(friend.ref)')
.detail
span.name(
v-if='!hideNicknames && friend.$nickName'
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
span.name(
v-else
v-text='friend.ref.displayName'
:style='{ color: friend.ref.$userColour }')
div(style='display: flex; align-items: center')
span.name(
v-if='!hideNicknames && friend.$nickName'
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
span.name(
v-else
v-text='friend.ref.displayName'
:style='{ color: friend.ref.$userColour }')
i.el-icon-star-on(
v-if='friend.isVIP'
style='color: #ffd700; margin: 1px 0 0 2px')
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
template(v-else)
i.el-icon.el-icon-loading(
@@ -112,170 +150,42 @@ mixin friendsListSidebar
size='mini'
@click.stop='confirmDeleteFriend(friend.id)'
style='margin-left: 5px')
div(v-if='idx === vipFriendsInSameInstance.length - 1' style='color: #c7c7c7') {{ 'Others' }}
.x-friend-item(
v-for='friend in vipFriendsNotInSameInstance'
:key='friend.id'
@click='showUserDialog(friend.id)')
template(v-if='friend.ref')
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
img(v-lazy='userImage(friend.ref)')
.detail
span.name(
v-if='!hideNicknames && friend.$nickName'
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
span.name(
v-else
v-text='friend.ref.displayName'
:style='{ color: friend.ref.$userColour }')
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
location.extra(
v-else
:location='friend.ref.location'
:traveling='friend.ref.travelingToLocation'
:link='false')
template(v-else)
span(v-text='friend.name || friend.id')
el-button(
type='text'
icon='el-icon-close'
size='mini'
@click.stop='confirmDeleteFriend(friend.id)'
style='margin-left: 5px')
template(v-else)
.x-friend-item(
v-for='friend in vipFriends'
:key='friend.id'
@click='showUserDialog(friend.id)')
template(v-if='friend.ref')
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
img(v-lazy='userImage(friend.ref)')
.detail
span.name(
v-if='!hideNicknames && friend.$nickName'
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
span.name(
v-else
v-text='friend.ref.displayName'
:style='{ color: friend.ref.$userColour }')
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
location.extra(
v-else
:location='friend.ref.location'
:traveling='friend.ref.travelingToLocation'
:link='false')
template(v-else)
span(v-text='friend.name || friend.id')
el-button(
type='text'
icon='el-icon-close'
size='mini'
@click.stop='confirmDeleteFriend(friend.id)'
style='margin-left: 5px')
.x-friend-group.x-link(
@click='isOnlineFriends = !isOnlineFriends; saveFriendsGroupStates()'
v-show='onlineFriends.length')
v-show='onlineFriendsByGroupStatus.length')
i.el-icon-arrow-right(:class='{ rotate: isOnlineFriends }')
span(style='margin-left: 5px') {{ $t('side_panel.online') }} ― {{ onlineFriends.length }}
span(style='margin-left: 5px') {{ $t('side_panel.online') }} ― {{ onlineFriendsByGroupStatus.length }}
div(v-show='isOnlineFriends')
template(v-if='isSidebarGroupByInstance')
div(
v-for='(friendArr, idx) in onlineFriendsInSameInstance'
:key='friendArr[0].ref?.location.tag')
div(style='margin-bottom: 3px')
location.extra(:location='friendArr[0].ref?.location' style='color: #c7c7c7')
span(style='margin-left: 5px') {{ `(${friendArr.length})` }}
div(style='margin-bottom: 10px')
.x-friend-item(
v-if='friendArr && friendArr.length'
v-for='friend in friendArr'
:key='friend.id'
@click='showUserDialog(friend.id)')
template(v-if='friend.ref')
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
img(v-lazy='userImage(friend.ref)')
.detail
span.name(
v-if='!hideNicknames && friend.$nickName'
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
span.name(
v-else
v-text='friend.ref.displayName'
:style='{ color: friend.ref.$userColour }')
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
template(v-else)
i.el-icon.el-icon-loading(
v-if='friend.ref.travelingToLocation'
style='display: inline-block; margin-right: 5px')
timer(:epoch='friend.ref?.$location_at' style='color: #c7c7c7')
template(v-else)
span(v-text='friend.name || friend.id')
el-button(
type='text'
icon='el-icon-close'
size='mini'
@click.stop='confirmDeleteFriend(friend.id)'
style='margin-left: 5px')
div(v-if='idx === onlineFriendsInSameInstance.length - 1' style='color: #c7c7c7') {{ 'Others' }}
.x-friend-item(
v-for='friend in onlineFriendsNotInSameInstance'
:key='friend.id'
@click='showUserDialog(friend.id)')
template(v-if='friend.ref')
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
img(v-lazy='userImage(friend.ref)')
.detail
span.name(
v-if='!hideNicknames && friend.$nickName'
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
span.name(
v-else
v-text='friend.ref.displayName'
:style='{ color: friend.ref.$userColour }')
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
location.extra(
v-else
:location='friend.ref.location'
:traveling='friend.ref.travelingToLocation'
:link='false')
template(v-else)
span(v-text='friend.name || friend.id')
el-button(
type='text'
icon='el-icon-close'
size='mini'
@click.stop='confirmDeleteFriend(friend.id)'
style='margin-left: 5px')
template(v-else)
.x-friend-item(
v-for='friend in onlineFriends'
:key='friend.id'
@click='showUserDialog(friend.id)')
template(v-if='friend.ref')
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
img(v-lazy='userImage(friend.ref)')
.detail
span.name(
v-if='!hideNicknames && friend.$nickName'
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
span.name(
v-else
v-text='friend.ref.displayName'
:style='{ color: friend.ref.$userColour }')
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
location.extra(
v-else
:location='friend.ref.location'
:traveling='friend.ref.travelingToLocation'
:link='false')
template(v-else)
span(v-text='friend.name || friend.id')
el-button(
type='text'
icon='el-icon-close'
size='mini'
@click.stop='confirmDeleteFriend(friend.id)'
style='margin-left: 5px')
.x-friend-item(
v-for='friend in onlineFriendsByGroupStatus'
:key='friend.id'
@click='showUserDialog(friend.id)')
template(v-if='friend.ref')
.avatar(:class='userStatusClass(friend.ref, friend.pendingOffline)')
img(v-lazy='userImage(friend.ref)')
.detail
span.name(
v-if='!hideNicknames && friend.$nickName'
:style='{ color: friend.ref.$userColour }') {{ friend.ref.displayName }} ({{ friend.$nickName }})
span.name(
v-else
v-text='friend.ref.displayName'
:style='{ color: friend.ref.$userColour }')
span.extra(v-if='friend.pendingOffline') #[i.el-icon-warning-outline] {{ $t('side_panel.pending_offline') }}
location.extra(
v-else
:location='friend.ref.location'
:traveling='friend.ref.travelingToLocation'
:link='false')
template(v-else)
span(v-text='friend.name || friend.id')
el-button(
type='text'
icon='el-icon-close'
size='mini'
@click.stop='confirmDeleteFriend(friend.id)'
style='margin-left: 5px')
.x-friend-group.x-link(
@click='isActiveFriends = !isActiveFriends; saveFriendsGroupStates()'
v-show='activeFriends.length')