From 9b2eb7ea36909794a6371055f8640813c7186e2c Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Fri, 27 Mar 2026 13:03:13 +0900
Subject: [PATCH] improve ui

---
 src/components/dialogs/LaunchDialog.vue |  2 +-
 src/localization/en.json                |  3 +-
 src/views/FriendList/FriendList.vue     | 44 +++++++++++++++++--------
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/components/dialogs/LaunchDialog.vue b/src/components/dialogs/LaunchDialog.vue
index 99aea3b5..ed66ff0c 100644
--- a/src/components/dialogs/LaunchDialog.vue
+++ b/src/components/dialogs/LaunchDialog.vue
@@ -1,6 +1,6 @@
 <template>
     <Dialog v-model:open="isVisible">
-        <DialogContent>
+        <DialogContent class="sm:max-w-xl">
             <DialogHeader>
                 <DialogTitle>{{ t('dialog.launch.header') }}</DialogTitle>
                 <DialogDescription class="sr-only">{{ t('dialog.launch.header') }}</DialogDescription>
diff --git a/src/localization/en.json b/src/localization/en.json
index 2b2ece93..4092bc63 100644
--- a/src/localization/en.json
+++ b/src/localization/en.json
@@ -492,7 +492,8 @@
             "favorites_only_tooltip": "Filter favorites only",
             "search_placeholder": "Search",
             "filter_placeholder": "Filter",
-            "load_mutual_friends": "Load Mutual Friends"
+            "load_mutual_friends": "Load Mutual Friends",
+            "mutual_loading_hint": "View progress on the Mutual Friend Graph page"
         },
         "charts": {
             "instance_activity": {
diff --git a/src/views/FriendList/FriendList.vue b/src/views/FriendList/FriendList.vue
index 3d23f1ef..d1723a0f 100644
--- a/src/views/FriendList/FriendList.vue
+++ b/src/views/FriendList/FriendList.vue
@@ -78,7 +78,22 @@
                                     @update:modelValue="toggleFriendsListBulkUnfriendMode" />
                             </div>
                             <div class="flex items-center">
-                                <Button variant="outline" class="mr-2" :disabled="isMutualFetching || isMutualOptOut" @click="loadMutualFriends">
+                                <TooltipWrapper
+                                    v-if="isMutualFetching"
+                                    :content="t('view.friend_list.mutual_loading_hint')">
+                                    <span>
+                                        <Button variant="outline" class="mr-2" disabled>
+                                            <Loader2 class="h-4 w-4 animate-spin" />
+                                            {{ t('view.friend_list.load_mutual_friends') }}
+                                        </Button>
+                                    </span>
+                                </TooltipWrapper>
+                                <Button
+                                    v-else
+                                    variant="outline"
+                                    class="mr-2"
+                                    :disabled="isMutualOptOut"
+                                    @click="loadMutualFriends">
                                     {{ t('view.friend_list.load_mutual_friends') }}
                                 </Button>
 
@@ -130,6 +145,7 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
     import { useRoute } from 'vue-router';
+    import { Loader2 } from 'lucide-vue-next';
 
     import {
         useAppearanceSettingsStore,
@@ -143,6 +159,7 @@
     import { DataTableLayout } from '../../components/ui/data-table';
     import { Switch } from '../../components/ui/switch';
     import { Toggle } from '../../components/ui/toggle';
+    import { TooltipWrapper } from '../../components/ui/tooltip';
     import { createColumns } from './columns.jsx';
     import { localeIncludes } from '../../shared/utils';
     import removeConfusables, { removeWhitespace } from '../../services/confusables';
@@ -309,15 +326,17 @@
             getAllUserStats(),
             getAllUserMutualCount(),
             getAllUserMutualOptedOut()
-        ]).then((results) => {
-            if (results.every((result) => result.status === 'fulfilled')) {
-                lastFriendStatsRefreshAt = Date.now();
-                lastFriendStatsRefreshKey = friendStatsRefreshKey;
-            }
-            return results;
-        }).finally(() => {
-            friendStatsRefreshInFlight = null;
-        });
+        ])
+            .then((results) => {
+                if (results.every((result) => result.status === 'fulfilled')) {
+                    lastFriendStatsRefreshAt = Date.now();
+                    lastFriendStatsRefreshKey = friendStatsRefreshKey;
+                }
+                return results;
+            })
+            .finally(() => {
+                friendStatsRefreshInFlight = null;
+            });
         return friendStatsRefreshInFlight;
     }
 
@@ -564,10 +583,7 @@
     async function loadMutualFriends() {
         if (isMutualFetching.value) return;
         await chartsStore.fetchMutualGraph();
-        await Promise.allSettled([
-            getAllUserMutualCount(),
-            getAllUserMutualOptedOut()
-        ]);
+        await Promise.allSettled([getAllUserMutualCount(), getAllUserMutualOptedOut()]);
     }
 
     /**