improve mutual friends settings add clear button to virtual combobox

src/components/ui/virtual-combobox/VirtualCombobox.vue

@@ -8,7 +8,14 @@
                     </span>
                 </slot>
 
-                <div class="flex items-center gap-2">
+                <div class="flex items-center gap-1">
+                    <button
+                        v-if="clearable && selectedValueSet.size > 0"
+                        type="button"
+                        class="flex items-center justify-center rounded-sm opacity-50 hover:opacity-100"
+                        @click.stop.prevent="clearSelection">
+                        <X class="size-3.5" />
+                    </button>
                     <span class="opacity-60">▾</span>
                 </div>
             </Button>
@@ -78,6 +85,7 @@
     import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
     import { Button } from '@/components/ui/button';
     import { Input } from '@/components/ui/input';
+    import { X } from 'lucide-vue-next';
     import { useVirtualizer } from '@tanstack/vue-virtual';
 
     const props = defineProps({
@@ -131,13 +139,24 @@
 
             if (!filteredItems.length) continue;
 
+            const selected = [];
+            const unselected = [];
+            for (const item of filteredItems) {
+                if (selectedValueSet.value.has(String(item.value))) {
+                    selected.push(item);
+                } else {
+                    unselected.push(item);
+                }
+            }
+            const sortedItems = [...selected, ...unselected];
+
             entries.push({
                 type: 'group',
                 key: `group:${group?.key ?? ''}`,
                 group
             });
 
-            for (const item of filteredItems) {
+            for (const item of sortedItems) {
                 entries.push({
                     type: 'item',
                     key: `item:${group?.key ?? ''}:${item?.value}`,

src/localization/en.json

@@ -570,7 +570,7 @@
                 "context_menu": {
                     "view_details": "View Details",
                     "hide_friend": "Hide from Graph",
-                    "refresh_mutuals": "Refresh Mutuals",
+                    "refresh_mutuals": "Refresh Their Mutuals",
                     "confirm_non_friend_title": "Not a Friend",
                     "confirm_non_friend_message": "This user is no longer your friend. Do you still want to fetch their mutual friends data?",
                     "refresh_success": "Mutual friends data updated for {name}",

src/views/Charts/components/MutualFriends.vue

@@ -246,17 +246,17 @@
                 </ContextMenuTrigger>
                 <ContextMenuContent v-if="contextMenuNodeId" class="min-w-40">
                     <ContextMenuItem @click="handleNodeMenuViewDetails">
-                        <UserIcon class="mr-2 size-4" />
+                        <UserIcon class="size-4" />
                         {{ t('view.charts.mutual_friend.context_menu.view_details') }}
                     </ContextMenuItem>
                     <ContextMenuSeparator />
                     <ContextMenuItem @click="handleNodeMenuRefresh">
-                        <RefreshCwIcon class="mr-2 size-4" />
+                        <RefreshCwIcon class="size-4" />
                         {{ t('view.charts.mutual_friend.context_menu.refresh_mutuals') }}
                     </ContextMenuItem>
                     <ContextMenuSeparator />
                     <ContextMenuItem @click="handleNodeMenuHide">
-                        <EyeOffIcon class="mr-2 size-4" />
+                        <EyeOffIcon class="size-4" />
                         {{ t('view.charts.mutual_friend.context_menu.hide_friend') }}
                     </ContextMenuItem>
                 </ContextMenuContent>