MrUnknownDE/VRCX
1
0
Fork 0
mirror of https://github.com/MrUnknownDE/VRCX.git synced 2026-05-07 06:56:04 +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
package-lock.json
Generated
+8 -8
View File
@@ -29,7 +29,7 @@
"@tailwindcss/vite": "^4.2.1", "@tailwindcss/vite": "^4.2.1",
"@tanstack/vue-query": "^5.92.9", "@tanstack/vue-query": "^5.92.9",
"@tanstack/vue-table": "^8.21.3", "@tanstack/vue-table": "^8.21.3",
"@tanstack/vue-virtual": "^3.13.22", "@tanstack/vue-virtual": "^3.13.23",
"@types/node": "^24.12.0", "@types/node": "^24.12.0",
"@vee-validate/zod": "^4.15.1", "@vee-validate/zod": "^4.15.1",
"@vitejs/plugin-vue": "^6.0.5", "@vitejs/plugin-vue": "^6.0.5",
@@ -3909,9 +3909,9 @@
} }
}, },
"node_modules/@tanstack/virtual-core": { "node_modules/@tanstack/virtual-core": {
"version": "3.13.22", "version": "3.13.23",
"resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.22.tgz", "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.23.tgz",
"integrity": "sha512-isuUGKsc5TAPDoHSbWTbl1SCil54zOS2MiWz/9GCWHPUQOvNTQx8qJEWC7UWR0lShhbK0Lmkcf0SZYxvch7G3g==", "integrity": "sha512-zSz2Z2HNyLjCplANTDyl3BcdQJc2k1+yyFoKhNRmCr7V7dY8o8q5m8uFTI1/Pg1kL+Hgrz6u3Xo6eFUB7l66cg==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"funding": { "funding": {
@@ -4000,13 +4000,13 @@
} }
}, },
"node_modules/@tanstack/vue-virtual": { "node_modules/@tanstack/vue-virtual": {
"version": "3.13.22", "version": "3.13.23",
"resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.22.tgz", "resolved": "https://registry.npmjs.org/@tanstack/vue-virtual/-/vue-virtual-3.13.23.tgz",
"integrity": "sha512-GiUwGKJADlCoTD7PaEfgSTAnQ9JW7KAmV98d5yFQf+vT2bSs52BPC22ZTXnNhe8PViTVqqRERNRKaWlut7tMPQ==", "integrity": "sha512-b5jPluAR6U3eOq6GWAYSpj3ugnAIZgGR0e6aGAgyRse0Yu6MVQQ0ZWm9SArSXWtageogn6bkVD8D//c4IjW3xQ==",
"dev": true, "dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@tanstack/virtual-core": "3.13.22" "@tanstack/virtual-core": "3.13.23"
}, },
"funding": { "funding": {
"type": "github", "type": "github",
package.json
+1 -1
View File
@@ -49,7 +49,7 @@
"@tailwindcss/vite": "^4.2.1", "@tailwindcss/vite": "^4.2.1",
"@tanstack/vue-query": "^5.92.9", "@tanstack/vue-query": "^5.92.9",
"@tanstack/vue-table": "^8.21.3", "@tanstack/vue-table": "^8.21.3",
"@tanstack/vue-virtual": "^3.13.22", "@tanstack/vue-virtual": "^3.13.23",
"@types/node": "^24.12.0", "@types/node": "^24.12.0",
"@vee-validate/zod": "^4.15.1", "@vee-validate/zod": "^4.15.1",
"@vitejs/plugin-vue": "^6.0.5", "@vitejs/plugin-vue": "^6.0.5",
src/components/dialogs/UserDialog/UserDialogMutualFriendsTab.vue
+5 -4
View File
@@ -10,9 +10,10 @@
<Spinner v-if="userDialog.isMutualFriendsLoading" /> <Spinner v-if="userDialog.isMutualFriendsLoading" />
<RefreshCw v-else /> <RefreshCw v-else />
</Button> </Button>
<span style="margin-left: 6px">{{ <span class="inline-flex items-center gap-1 ml-1.5">
t('dialog.user.groups.total_count', { count: userDialog.mutualFriends.length }) <Users class="size-3.5 text-muted-foreground" />
}}</span> {{ t('dialog.user.groups.total_count', { count: userDialog.mutualFriends.length }) }}
</span>
</div> </div>
<div style="display: flex; align-items: center"> <div style="display: flex; align-items: center">
<Input v-model="searchQuery" class="h-8 w-40 mr-2" placeholder="Search friends" @click.stop /> <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 { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Button } from '@/components/ui/button'; 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 { Spinner } from '@/components/ui/spinner';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
src/styles/options-container.css
+1 -1
View File
@@ -4,7 +4,7 @@
*/ */
.options-container { .options-container {
margin-top: 30px; margin-top: 10px;
padding: 0 8px 8px 8px; padding: 0 8px 8px 8px;
} }
src/views/FriendList/columns.jsx
+18 -8
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 { Button } from '../../components/ui/button';
import { Checkbox } from '../../components/ui/checkbox'; import { Checkbox } from '../../components/ui/checkbox';
@@ -163,15 +168,20 @@ export const createColumns = ({
meta: { label: () => t('table.friendList.avatar') }, meta: { label: () => t('table.friendList.avatar') },
cell: ({ row }) => { cell: ({ row }) => {
const src = userImage(row.original, true); const src = userImage(row.original, true);
return src ? ( return (
<div class="flex items-center"> <div class="flex items-center">
<img <Avatar class="size-6 rounded-full">
src={src} <AvatarImage
class="friends-list-avatar object-cover w-6! h-6" src={src}
loading="lazy" class="friends-list-avatar object-cover"
/> loading="lazy"
/>
<AvatarFallback>
<User class="size-3 text-muted-foreground" />
</AvatarFallback>
</Avatar>
</div> </div>
) : null; );
} }
}, },
{ {