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

improve friendlist ui

Browse Source
This commit is contained in:
pa
2026-03-16 17:20:06 +09:00
parent 12e47cc246
commit 1b3e292883
5 changed files with 33 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
package-lock.json generated
View File

@@ -29,7 +29,7 @@
"@tailwindcss/vite": "^4.2.1",
"@tanstack/vue-query": "^5.92.9",
"@tanstack/vue-table": "^8.21.3",
"@tanstack/vue-virtual": "^3.13.22",
"@tanstack/vue-virtual": "^3.13.23",
"@types/node": "^24.12.0",
"@vee-validate/zod": "^4.15.1",
"@vitejs/plugin-vue": "^6.0.5",
@@ -3909,9 +3909,9 @@
}
},
"node_modules/@tanstack/virtual-core": {
"version": "3.13.22",
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.22.tgz",
"integrity": "sha512-isuUGKsc5TAPDoHSbWTbl1SCil54zOS2MiWz/9GCWHPUQOvNTQx8qJEWC7UWR0lShhbK0Lmkcf0SZYxvch7G3g==",
"version": "3.13.23",
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.23.tgz",
"integrity": "sha512-zSz2Z2HNyLjCplANTDyl3BcdQJc2k1+yyFoKhNRmCr7V7dY8o8q5m8uFTI1/Pg1kL+Hgrz6u3Xo6eFUB7l66cg==",
"dev": true,
"license": "MIT",
"funding": {
@@ -4000,13 +4000,13 @@
}
},
"node_modules/@tanstack/vue-virtual": {
"version": "3.13.22",
"resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.22.tgz",
"integrity": "sha512-GiUwGKJADlCoTD7PaEfgSTAnQ9JW7KAmV98d5yFQf+vT2bSs52BPC22ZTXnNhe8PViTVqqRERNRKaWlut7tMPQ==",
"version": "3.13.23",
"resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.23.tgz",
"integrity": "sha512-b5jPluAR6U3eOq6GWAYSpj3ugnAIZgGR0e6aGAgyRse0Yu6MVQQ0ZWm9SArSXWtageogn6bkVD8D//c4IjW3xQ==",
"dev": true,
"license": "MIT",
"dependencies": {
"@tanstack/virtual-core": "3.13.22"
"@tanstack/virtual-core": "3.13.23"
},
"funding": {
"type": "github",

2
package.json
View File

@@ -49,7 +49,7 @@
"@tailwindcss/vite": "^4.2.1",
"@tanstack/vue-query": "^5.92.9",
"@tanstack/vue-table": "^8.21.3",
"@tanstack/vue-virtual": "^3.13.22",
"@tanstack/vue-virtual": "^3.13.23",
"@types/node": "^24.12.0",
"@vee-validate/zod": "^4.15.1",
"@vitejs/plugin-vue": "^6.0.5",

9
src/components/dialogs/UserDialog/UserDialogMutualFriendsTab.vue
View File

@@ -10,9 +10,10 @@
<Spinner v-if="userDialog.isMutualFriendsLoading" />
<RefreshCw v-else />
</Button>
<span style="margin-left: 6px">{{
t('dialog.user.groups.total_count', { count: userDialog.mutualFriends.length })
}}</span>
<span class="inline-flex items-center gap-1 ml-1.5">
<Users class="size-3.5 text-muted-foreground" />
{{ t('dialog.user.groups.total_count', { count: userDialog.mutualFriends.length }) }}
</span>
</div>
<div style="display: flex; align-items: center">
<Input v-model="searchQuery" class="h-8 w-40 mr-2" placeholder="Search friends" @click.stop />
@@ -63,7 +64,7 @@
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Button } from '@/components/ui/button';
import { RefreshCw, User } from 'lucide-vue-next';
import { RefreshCw, User, Users } from 'lucide-vue-next';
import { Spinner } from '@/components/ui/spinner';
import { Input } from '@/components/ui/input';
import { computed, ref, watch } from 'vue';

2
src/styles/options-container.css
View File

@@ -4,7 +4,7 @@
*/
.options-container {
margin-top: 30px;
margin-top: 10px;
padding: 0 8px 8px 8px;
}

26
src/views/FriendList/columns.jsx
View File

@@ -1,4 +1,9 @@
import { ArrowUpDown, UserMinus } from 'lucide-vue-next';
import { ArrowUpDown, User, UserMinus } from 'lucide-vue-next';
import {
Avatar,
AvatarFallback,
AvatarImage
} from '../../components/ui/avatar';
import { Button } from '../../components/ui/button';
import { Checkbox } from '../../components/ui/checkbox';
@@ -163,15 +168,20 @@ export const createColumns = ({
meta: { label: () => t('table.friendList.avatar') },
cell: ({ row }) => {
const src = userImage(row.original, true);
return src ? (
return (
<div class="flex items-center">
<img
src={src}
class="friends-list-avatar object-cover w-6! h-6"
loading="lazy"
/>
<Avatar class="size-6 rounded-full">
<AvatarImage
src={src}
class="friends-list-avatar object-cover"
loading="lazy"
/>
<AvatarFallback>
<User class="size-3 text-muted-foreground" />
</AvatarFallback>
</Avatar>
</div>
) : null;
);
}
},
{