improve friendlist ui

src/components/dialogs/UserDialog/UserDialogMutualFriendsTab.vue

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

src/styles/options-container.css

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

src/views/FriendList/columns.jsx

@@ -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;
+                );
             }
         },
         {