split charts into separate routes (#1605)

src/components/NavMenu.vue

@@ -374,7 +374,14 @@
             items: ['friend-log', 'friend-list', 'moderation']
         },
         { type: 'item', key: 'notification' },
-        { type: 'item', key: 'charts' },
+        {
+            type: 'folder',
+            id: 'default-folder-charts',
+            nameKey: 'nav_tooltip.charts',
+            name: t('nav_tooltip.charts'),
+            icon: 'ri-pie-chart-line',
+            items: ['charts-instance', 'charts-mutual']
+        },
         { type: 'item', key: 'tools' },
         { type: 'item', key: 'direct-access' }
     ];
@@ -504,6 +511,7 @@
     const sanitizeLayout = (layout) => {
         const usedKeys = new Set();
         const normalized = [];
+        const chartsKeys = ['charts-instance', 'charts-mutual'];
 
         const appendItemEntry = (key, target = normalized) => {
             if (!key || usedKeys.has(key) || !navDefinitionMap.has(key)) {
@@ -513,9 +521,31 @@
             usedKeys.add(key);
         };
 
+        const appendChartsFolder = (target = normalized) => {
+            if (chartsKeys.some((key) => usedKeys.has(key))) {
+                return;
+            }
+            if (!chartsKeys.every((key) => navDefinitionMap.has(key))) {
+                return;
+            }
+            chartsKeys.forEach((key) => usedKeys.add(key));
+            target.push({
+                type: 'folder',
+                id: 'default-folder-charts',
+                nameKey: 'nav_tooltip.charts',
+                name: t('nav_tooltip.charts'),
+                icon: 'ri-pie-chart-line',
+                items: [...chartsKeys]
+            });
+        };
+
         if (Array.isArray(layout)) {
             layout.forEach((entry) => {
                 if (entry?.type === 'item') {
+                    if (entry.key === 'charts') {
+                        appendChartsFolder();
+                        return;
+                    }
                     appendItemEntry(entry.key);
                     return;
                 }
@@ -550,11 +580,17 @@
 
         navDefinitions.forEach((item) => {
             if (!usedKeys.has(item.key)) {
-                normalized.push({ type: 'item', key: item.key });
-                usedKeys.add(item.key);
+                if (chartsKeys.includes(item.key)) {
+                    return;
+                }
+                appendItemEntry(item.key);
             }
         });
 
+        if (!chartsKeys.some((key) => usedKeys.has(key))) {
+            appendChartsFolder();
+        }
+
         return normalized;
     };
 
@@ -670,7 +706,11 @@
             console.error('Failed to load custom nav', error);
         } finally {
             const fallbackLayout = layoutData?.length ? layoutData : createDefaultNavLayout();
-            navLayout.value = sanitizeLayout(fallbackLayout);
+            const sanitized = sanitizeLayout(fallbackLayout);
+            navLayout.value = sanitized;
+            if (layoutData?.length && JSON.stringify(sanitized) !== JSON.stringify(fallbackLayout)) {
+                await saveNavLayout(sanitized);
+            }
             navLayoutReady.value = true;
             navigateToFirstNavEntry();
         }

src/plugin/router.js

@@ -2,8 +2,6 @@ import { createRouter, createWebHashHistory } from 'vue-router';
 
 import { watchState } from './../service/watchState';
 
-import MainLayout from '../views/Layout/MainLayout.vue';
-import Charts from './../views/Charts/Charts.vue';
 import FavoritesAvatar from './../views/Favorites/FavoritesAvatar.vue';
 import FavoritesFriend from './../views/Favorites/FavoritesFriend.vue';
 import FavoritesWorld from './../views/Favorites/FavoritesWorld.vue';
@@ -11,16 +9,17 @@ import Feed from './../views/Feed/Feed.vue';
 import FriendList from './../views/FriendList/FriendList.vue';
 import FriendLog from './../views/FriendLog/FriendLog.vue';
 import FriendsLocations from './../views/FriendsLocations/FriendsLocations.vue';
+import Gallery from './../views/Tools/Gallery.vue';
 import GameLog from './../views/GameLog/GameLog.vue';
 import Login from './../views/Login/Login.vue';
+import MainLayout from '../views/Layout/MainLayout.vue';
 import Moderation from './../views/Moderation/Moderation.vue';
 import Notification from './../views/Notifications/Notification.vue';
 import PlayerList from './../views/PlayerList/PlayerList.vue';
+import ScreenshotMetadata from './../views/Tools/ScreenshotMetadata.vue';
 import Search from './../views/Search/Search.vue';
 import Settings from './../views/Settings/Settings.vue';
 import Tools from './../views/Tools/Tools.vue';
-import Gallery from './../views/Tools/Gallery.vue';
-import ScreenshotMetadata from './../views/Tools/ScreenshotMetadata.vue';
 
 const routes = [
     {
@@ -82,7 +81,19 @@ const routes = [
             {
                 path: 'charts',
                 name: 'charts',
-                component: Charts
+                redirect: { name: 'charts-instance' }
+            },
+            {
+                path: 'charts/instance',
+                name: 'charts-instance',
+                component: () =>
+                    import('./../views/Charts/components/InstanceActivity.vue')
+            },
+            {
+                path: 'charts/mutual',
+                name: 'charts-mutual',
+                component: () =>
+                    import('./../views/Charts/components/MutualFriends.vue')
             },
             { path: 'tools', name: 'tools', component: Tools },
             {

src/shared/constants/ui.js

@@ -84,11 +84,18 @@ const navDefinitions = [
         routeName: 'notification'
     },
     {
-        key: 'charts',
-        icon: 'ri-bar-chart-line',
-        tooltip: 'nav_tooltip.charts',
-        labelKey: 'nav_tooltip.charts',
-        routeName: 'charts'
+        key: 'charts-instance',
+        icon: 'ri-bar-chart-horizontal-line',
+        tooltip: 'view.charts.instance_activity.header',
+        labelKey: 'view.charts.instance_activity.header',
+        routeName: 'charts-instance'
+    },
+    {
+        key: 'charts-mutual',
+        icon: 'ri-group-2-line',
+        tooltip: 'view.charts.mutual_friend.tab_label',
+        labelKey: 'view.charts.mutual_friend.tab_label',
+        routeName: 'charts-mutual'
     },
     {
         key: 'tools',

src/stores/charts.js

@@ -1,4 +1,4 @@
-import { computed, reactive, ref, watch } from 'vue';
+import { computed, reactive, watch } from 'vue';
 import { defineStore } from 'pinia';
 import { toast } from 'vue-sonner';
 import { useI18n } from 'vue-i18n';
@@ -16,7 +16,6 @@ export const useChartsStore = defineStore('Charts', () => {
 
     const { t } = useI18n();
 
-    const activeTab = ref('instance');
     const mutualGraphFetchState = reactive(createDefaultFetchState());
     const mutualGraphStatus = reactive({
         isFetching: false,
@@ -94,7 +93,6 @@ export const useChartsStore = defineStore('Charts', () => {
     }
 
     return {
-        activeTab,
         mutualGraphFetchState,
         mutualGraphStatus,
         resetMutualGraphState

src/stores/settings/appearance.js

@@ -97,11 +97,13 @@ export const useAppearanceSettingsStore = defineStore(
         const isNavCollapsed = ref(true);
         const isSideBarTabShow = computed(() => {
             const currentRouteName = router.currentRoute.value?.name;
-            return !(
-                currentRouteName === 'friends-locations' ||
-                currentRouteName === 'friend-list' ||
-                currentRouteName === 'charts'
-            );
+            return ![
+                'friends-locations',
+                'friend-list',
+                'charts',
+                'charts-instance',
+                'charts-mutual'
+            ].includes(currentRouteName);
         });
 
         const isDataTableStriped = ref(false);

src/views/Charts/Charts.vue

@@ -1,41 +0,0 @@
-<template>
-    <div id="chart" class="x-container">
-        <TabsUnderline v-model="activeTab" :items="chartTabs" :unmount-on-hide="false" class="charts-tabs">
-            <template #instance>
-                <InstanceActivity />
-            </template>
-            <template #mutual>
-                <MutualFriends />
-            </template>
-        </TabsUnderline>
-        <BackToTop target="#chart" :right="30" :bottom="30" />
-    </div>
-</template>
-
-<script setup>
-    import { computed, defineAsyncComponent } from 'vue';
-    import { TabsUnderline } from '@/components/ui/tabs';
-    import { storeToRefs } from 'pinia';
-    import { useI18n } from 'vue-i18n';
-
-    import BackToTop from '@/components/BackToTop.vue';
-
-    import { useChartsStore } from '../../stores';
-
-    const InstanceActivity = defineAsyncComponent(() => import('./components/InstanceActivity.vue'));
-    const MutualFriends = defineAsyncComponent(() => import('./components/MutualFriends.vue'));
-
-    const { t } = useI18n();
-    const chartsStore = useChartsStore();
-    const { activeTab } = storeToRefs(chartsStore);
-    const chartTabs = computed(() => [
-        { value: 'instance', label: t('view.charts.instance_activity.header') },
-        { value: 'mutual', label: t('view.charts.mutual_friend.tab_label') }
-    ]);
-</script>
-
-<style scoped>
-    :deep(.charts-tabs [data-slot='tabs-list']) {
-        margin: 0;
-    }
-</style>

src/views/Charts/components/InstanceActivity.vue

@@ -1,165 +1,175 @@
 <template>
-    <div ref="instanceActivityRef" class="pt-12">
-        <BackToTop :target="instanceActivityRef" :right="30" :bottom="30" :teleport="false" />
-        <div class="options-container instance-activity" style="margin-top: 0">
-            <div>
-                <span>{{ t('view.charts.instance_activity.header') }}</span>
-                <HoverCard>
-                    <HoverCardTrigger as-child>
-                        <Info style="margin-left: 4px; font-size: 12px; opacity: 0.7" />
-                    </HoverCardTrigger>
-                    <HoverCardContent side="bottom" align="start" class="w-75">
-                        <div class="tips-popover">
-                            <div>{{ t('view.charts.instance_activity.tips.online_time') }}</div>
-                            <div>{{ t('view.charts.instance_activity.tips.click_Y_axis') }}</div>
-                            <div>{{ t('view.charts.instance_activity.tips.click_instance_name') }}</div>
-                        </div>
-                    </HoverCardContent>
-                </HoverCard>
-            </div>
+    <div id="chart" class="x-container">
+        <div ref="instanceActivityRef" class="pt-12">
+            <BackToTop :target="instanceActivityRef" :right="30" :bottom="30" :teleport="false" />
+            <div class="options-container instance-activity" style="margin-top: 0">
+                <div>
+                    <span>{{ t('view.charts.instance_activity.header') }}</span>
+                    <HoverCard>
+                        <HoverCardTrigger as-child>
+                            <Info style="margin-left: 4px; font-size: 12px; opacity: 0.7" />
+                        </HoverCardTrigger>
+                        <HoverCardContent side="bottom" align="start" class="w-75">
+                            <div class="tips-popover">
+                                <div>{{ t('view.charts.instance_activity.tips.online_time') }}</div>
+                                <div>{{ t('view.charts.instance_activity.tips.click_Y_axis') }}</div>
+                                <div>{{ t('view.charts.instance_activity.tips.click_instance_name') }}</div>
+                            </div>
+                        </HoverCardContent>
+                    </HoverCard>
+                </div>
 
-            <div>
-                <TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top">
-                    <Button
-                        class="rounded-full"
-                        size="icon"
-                        variant="ghost"
-                        style="margin-right: 5px"
-                        @click="reloadData">
-                        <RefreshCcw />
-                    </Button>
-                </TooltipWrapper>
+                <div>
+                    <TooltipWrapper :content="t('view.charts.instance_activity.refresh')" side="top">
+                        <Button
+                            class="rounded-full"
+                            size="icon"
+                            variant="ghost"
+                            style="margin-right: 5px"
+                            @click="reloadData">
+                            <RefreshCcw />
+                        </Button>
+                    </TooltipWrapper>
 
-                <Popover>
-                    <PopoverTrigger asChild>
-                        <div>
-                            <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
-                                <Button class="rounded-full" size="icon" variant="ghost" style="margin-right: 5px">
-                                    <Settings />
-                                </Button>
-                            </TooltipWrapper>
-                        </div>
-                    </PopoverTrigger>
-                    <PopoverContent side="bottom" class="w-62.5">
-                        <div class="settings">
+                    <Popover>
+                        <PopoverTrigger asChild>
                             <div>
-                                <span>{{ t('view.charts.instance_activity.settings.bar_width') }}</span>
+                                <TooltipWrapper
+                                    :content="t('view.charts.instance_activity.settings.header')"
+                                    side="top">
+                                    <Button class="rounded-full" size="icon" variant="ghost" style="margin-right: 5px">
+                                        <Settings />
+                                    </Button>
+                                </TooltipWrapper>
+                            </div>
+                        </PopoverTrigger>
+                        <PopoverContent side="bottom" class="w-62.5">
+                            <div class="settings">
                                 <div>
-                                    <Slider
-                                        v-model="barWidthDraftValue"
-                                        :max="50"
-                                        :min="1"
-                                        @valueCommit="handleBarWidthCommit"></Slider>
+                                    <span>{{ t('view.charts.instance_activity.settings.bar_width') }}</span>
+                                    <div>
+                                        <Slider
+                                            v-model="barWidthDraftValue"
+                                            :max="50"
+                                            :min="1"
+                                            @valueCommit="handleBarWidthCommit"></Slider>
+                                    </div>
+                                </div>
+                                <div>
+                                    <span>{{ t('view.charts.instance_activity.settings.show_detail') }}</span>
+                                    <Switch
+                                        v-model="isDetailVisible"
+                                        @update:modelValue="
+                                            (value) =>
+                                                changeIsDetailInstanceVisible(value, () => handleSettingsChange())
+                                        " />
+                                </div>
+                                <div v-if="isDetailVisible">
+                                    <span>{{ t('view.charts.instance_activity.settings.show_solo_instance') }}</span>
+                                    <Switch
+                                        v-model="isSoloInstanceVisible"
+                                        @update:modelValue="
+                                            (value) => changeIsSoloInstanceVisible(value, () => handleSettingsChange())
+                                        " />
+                                </div>
+                                <div v-if="isDetailVisible">
+                                    <span>{{
+                                        t('view.charts.instance_activity.settings.show_no_friend_instance')
+                                    }}</span>
+                                    <Switch
+                                        v-model="isNoFriendInstanceVisible"
+                                        @update:modelValue="
+                                            (value) =>
+                                                changeIsNoFriendInstanceVisible(value, () => handleSettingsChange())
+                                        " />
                                 </div>
                             </div>
-                            <div>
-                                <span>{{ t('view.charts.instance_activity.settings.show_detail') }}</span>
-                                <Switch
-                                    v-model="isDetailVisible"
-                                    @update:modelValue="
-                                        (value) => changeIsDetailInstanceVisible(value, () => handleSettingsChange())
-                                    " />
-                            </div>
-                            <div v-if="isDetailVisible">
-                                <span>{{ t('view.charts.instance_activity.settings.show_solo_instance') }}</span>
-                                <Switch
-                                    v-model="isSoloInstanceVisible"
-                                    @update:modelValue="
-                                        (value) => changeIsSoloInstanceVisible(value, () => handleSettingsChange())
-                                    " />
-                            </div>
-                            <div v-if="isDetailVisible">
-                                <span>{{ t('view.charts.instance_activity.settings.show_no_friend_instance') }}</span>
-                                <Switch
-                                    v-model="isNoFriendInstanceVisible"
-                                    @update:modelValue="
-                                        (value) => changeIsNoFriendInstanceVisible(value, () => handleSettingsChange())
-                                    " />
-                            </div>
-                        </div>
-                    </PopoverContent>
-                </Popover>
-                <ButtonGroup class="mr-2">
-                    <TooltipWrapper :content="t('view.charts.instance_activity.previous_day')" side="top">
-                        <Button
-                            variant="outline"
-                            size="icon-sm"
-                            :disabled="isPrevDayBtnDisabled"
-                            @click="changeSelectedDateFromBtn(false)">
-                            <ArrowLeft />
-                        </Button>
-                    </TooltipWrapper>
-                    <TooltipWrapper :content="t('view.charts.instance_activity.next_day')" side="top">
-                        <Button
-                            variant="outline"
-                            size="icon-sm"
-                            :disabled="isNextDayBtnDisabled"
-                            @click="changeSelectedDateFromBtn(true)">
-                            <ArrowRight />
-                        </Button>
-                    </TooltipWrapper>
-                </ButtonGroup>
-                <Popover v-model:open="isDatePickerOpen">
-                    <PopoverTrigger asChild>
-                        <div>
+                        </PopoverContent>
+                    </Popover>
+                    <ButtonGroup class="mr-2">
+                        <TooltipWrapper :content="t('view.charts.instance_activity.previous_day')" side="top">
                             <Button
                                 variant="outline"
-                                class="w-50 justify-start text-left font-normal"
-                                :disabled="isLoading">
-                                <CalendarIcon class="mr-2 h-4 w-4" />
-                                {{ dayjs(selectedDate).format('YYYY-MM-DD') }}
+                                size="icon-sm"
+                                :disabled="isPrevDayBtnDisabled"
+                                @click="changeSelectedDateFromBtn(false)">
+                                <ArrowLeft />
                             </Button>
-                        </div>
-                    </PopoverTrigger>
-                    <PopoverContent class="w-auto p-0" align="end">
-                        <Calendar
-                            :model-value="calendarModelValue"
-                            :default-placeholder="defaultCalendarPlaceholder"
-                            :is-date-disabled="isCalendarDateDisabled"
-                            :prevent-deselect="true"
-                            initial-focus
-                            @update:modelValue="handleCalendarModelUpdate" />
-                    </PopoverContent>
-                </Popover>
-            </div>
-        </div>
-        <div class="status-online">
-            <div class="text-center">
-                <div class="text-sm text-muted-foreground">
-                    {{ t('view.charts.instance_activity.online_time') }}
-                </div>
-                <div class="text-2xl font-semibold">
-                    {{ timeToText(totalOnlineTime, true) }}
+                        </TooltipWrapper>
+                        <TooltipWrapper :content="t('view.charts.instance_activity.next_day')" side="top">
+                            <Button
+                                variant="outline"
+                                size="icon-sm"
+                                :disabled="isNextDayBtnDisabled"
+                                @click="changeSelectedDateFromBtn(true)">
+                                <ArrowRight />
+                            </Button>
+                        </TooltipWrapper>
+                    </ButtonGroup>
+                    <Popover v-model:open="isDatePickerOpen">
+                        <PopoverTrigger asChild>
+                            <div>
+                                <Button
+                                    variant="outline"
+                                    class="w-50 justify-start text-left font-normal"
+                                    :disabled="isLoading">
+                                    <CalendarIcon class="mr-2 h-4 w-4" />
+                                    {{ dayjs(selectedDate).format('YYYY-MM-DD') }}
+                                </Button>
+                            </div>
+                        </PopoverTrigger>
+                        <PopoverContent class="w-auto p-0" align="end">
+                            <Calendar
+                                :model-value="calendarModelValue"
+                                :default-placeholder="defaultCalendarPlaceholder"
+                                :is-date-disabled="isCalendarDateDisabled"
+                                :prevent-deselect="true"
+                                initial-focus
+                                @update:modelValue="handleCalendarModelUpdate" />
+                        </PopoverContent>
+                    </Popover>
+                </div>
+            </div>
+            <div class="status-online">
+                <div class="text-center">
+                    <div class="text-sm text-muted-foreground">
+                        {{ t('view.charts.instance_activity.online_time') }}
+                    </div>
+                    <div class="text-2xl font-semibold">
+                        {{ timeToText(totalOnlineTime, true) }}
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <div ref="activityChartRef" style="width: 100%"></div>
-        <div v-if="!isLoading && activityData.length === 0" class="nodata">
-            <DataTableEmpty type="nodata" />
-        </div>
-
-        <transition name="el-fade-in-linear">
-            <div v-show="isDetailVisible && !isLoading && activityData.length !== 0" class="divider">
-                <div class="flex items-center">
-                    <Separator class="flex-1" />
-                    <span class="px-2 text-muted-foreground">·</span>
-                    <Separator class="flex-1" />
-                </div>
+            <div ref="activityChartRef" style="width: 100%"></div>
+            <div v-if="!isLoading && activityData.length === 0" class="nodata">
+                <DataTableEmpty type="nodata" />
             </div>
-        </transition>
-        <template v-if="isDetailVisible && activityData.length !== 0">
-            <InstanceActivityDetail
-                v-for="arr in filteredActivityDetailData"
-                :key="arr[0].location + arr[0].created_at"
-                ref="activityDetailChartRef"
-                :activity-detail-data="arr"
-                :bar-width="barWidth" />
-        </template>
+
+            <transition name="el-fade-in-linear">
+                <div v-show="isDetailVisible && !isLoading && activityData.length !== 0" class="divider">
+                    <div class="flex items-center">
+                        <Separator class="flex-1" />
+                        <span class="px-2 text-muted-foreground">·</span>
+                        <Separator class="flex-1" />
+                    </div>
+                </div>
+            </transition>
+            <template v-if="isDetailVisible && activityData.length !== 0">
+                <InstanceActivityDetail
+                    v-for="arr in filteredActivityDetailData"
+                    :key="arr[0].location + arr[0].created_at"
+                    ref="activityDetailChartRef"
+                    :activity-detail-data="arr"
+                    :bar-width="barWidth" />
+            </template>
+        </div>
     </div>
 </template>
 
 <script setup>
+    defineOptions({ name: 'ChartsInstance' });
+
     import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
     import { ArrowLeft, ArrowRight, Calendar as CalendarIcon, Info, RefreshCcw, Settings } from 'lucide-vue-next';
     import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card';

src/views/Charts/components/MutualFriends.vue

@@ -1,54 +1,61 @@
 <template>
-    <div class="mt-0 flex min-h-[calc(100vh-140px)] flex-col items-center justify-betweenpt-12" ref="mutualGraphRef">
-        <div class="flex items-center w-full">
-            <div
-                class="options-container mt-2 mb-0 flex flex-wrap items-center gap-3 bg-transparent px-0 pb-2 shadow-none">
-                <div class="flex flex-wrap items-center gap-2">
-                    <TooltipWrapper :content="fetchButtonLabel" side="top">
-                        <Button :disabled="fetchButtonDisabled" @click="startFetch">
-                            <Spinner v-if="isFetching" />
-                            {{ fetchButtonLabel }}
-                        </Button>
-                    </TooltipWrapper>
-
-                    <TooltipWrapper
-                        v-if="isFetching"
-                        :content="t('view.charts.mutual_friend.actions.stop_fetching')"
-                        side="top">
-                        <Button variant="destructive" :disabled="status.cancelRequested" @click="cancelFetch">
-                            {{ t('view.charts.mutual_friend.actions.stop') }}
-                        </Button>
-                    </TooltipWrapper>
-                </div>
-            </div>
-            <div
-                v-if="isFetching"
-                class="mt-3 grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] items-center gap-x-3 gap-y-2 rounded-md bg-transparent p-3 ml-auto">
-                <div class="flex justify-between text-[13px]">
-                    <span>{{ t('view.charts.mutual_friend.progress.friends_processed') }}</span>
-                    <strong>{{ fetchState.processedFriends }} / {{ totalFriends }}</strong>
-                </div>
-                <Progress :model-value="progressPercent" class="h-3" />
-            </div>
-        </div>
-
+    <div id="chart" class="x-container">
         <div
-            v-show="!(hasFetched && !isFetching && !graphReady)"
-            ref="graphContainerRef"
-            class="mt-3 h-[calc(100vh-260px)] min-h-[520px] w-full flex-1 rounded-lg bg-transparent"
-            :style="{ backgroundColor: canvasBackground }"></div>
+            class="mt-0 flex min-h-[calc(100vh-140px)] flex-col items-center justify-betweenpt-12"
+            ref="mutualGraphRef">
+            <div class="flex items-center w-full">
+                <div
+                    class="options-container mt-2 mb-0 flex flex-wrap items-center gap-3 bg-transparent px-0 pb-2 shadow-none">
+                    <div class="flex flex-wrap items-center gap-2">
+                        <TooltipWrapper :content="fetchButtonLabel" side="top">
+                            <Button :disabled="fetchButtonDisabled" @click="startFetch">
+                                <Spinner v-if="isFetching" />
+                                {{ fetchButtonLabel }}
+                            </Button>
+                        </TooltipWrapper>
 
-        <Empty v-if="hasFetched && !isFetching && !graphReady" class="mt-3 w-full flex-1">
-            <EmptyHeader>
-                <EmptyDescription>
-                    {{ t('view.charts.mutual_friend.progress.no_relationships_discovered') }}
-                </EmptyDescription>
-            </EmptyHeader>
-        </Empty>
+                        <TooltipWrapper
+                            v-if="isFetching"
+                            :content="t('view.charts.mutual_friend.actions.stop_fetching')"
+                            side="top">
+                            <Button variant="destructive" :disabled="status.cancelRequested" @click="cancelFetch">
+                                {{ t('view.charts.mutual_friend.actions.stop') }}
+                            </Button>
+                        </TooltipWrapper>
+                    </div>
+                </div>
+                <div
+                    v-if="isFetching"
+                    class="mt-3 grid grid-cols-[repeat(auto-fit,minmax(150px,1fr))] items-center gap-x-3 gap-y-2 rounded-md bg-transparent p-3 ml-auto">
+                    <div class="flex justify-between text-[13px]">
+                        <span>{{ t('view.charts.mutual_friend.progress.friends_processed') }}</span>
+                        <strong>{{ fetchState.processedFriends }} / {{ totalFriends }}</strong>
+                    </div>
+                    <Progress :model-value="progressPercent" class="h-3" />
+                </div>
+            </div>
+
+            <div
+                v-show="!(hasFetched && !isFetching && !graphReady)"
+                ref="graphContainerRef"
+                class="mt-3 h-[calc(100vh-260px)] min-h-[520px] w-full flex-1 rounded-lg bg-transparent"
+                :style="{ backgroundColor: canvasBackground }"></div>
+
+            <Empty v-if="hasFetched && !isFetching && !graphReady" class="mt-3 w-full flex-1">
+                <EmptyHeader>
+                    <EmptyDescription>
+                        {{ t('view.charts.mutual_friend.progress.no_relationships_discovered') }}
+                    </EmptyDescription>
+                </EmptyHeader>
+            </Empty>
+        </div>
+        <BackToTop target="#chart" :right="30" :bottom="30" />
     </div>
 </template>
 
 <script setup>
+    defineOptions({ name: 'ChartsMutual' });
+
     import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
     import { Empty, EmptyDescription, EmptyHeader } from '@/components/ui/empty';
     import { Button } from '@/components/ui/button';
@@ -60,6 +67,7 @@
     import { toast } from 'vue-sonner';
     import { useI18n } from 'vue-i18n';
 
+    import BackToTop from '@/components/BackToTop.vue';
     import Graph from 'graphology';
     import Sigma from 'sigma';
     import forceAtlas2 from 'graphology-layout-forceatlas2';
@@ -86,7 +94,6 @@
     const appearanceStore = useAppearanceSettingsStore();
     const { friends } = storeToRefs(friendStore);
     const { currentUser } = storeToRefs(userStore);
-    const { activeTab } = storeToRefs(chartsStore);
     const { isDarkMode } = storeToRefs(appearanceStore);
     const cachedUsers = userStore.cachedUsers;
     const showUserDialog = (userId) => userStore.showUserDialog(userId);
@@ -201,21 +208,12 @@
         if (mutualGraphResizeObserver) mutualGraphResizeObserver.disconnect();
     });
 
-    watch(
-        activeTab,
-        (tab) => {
-            if (tab === 'mutual') loadGraphFromDatabase();
-        },
-        { immediate: true }
-    );
-
     watch(
         () => watchState.isFriendsLoaded,
         (isFriendsLoaded) => {
-            if (isFriendsLoaded && activeTab.value === 'mutual') {
-                loadGraphFromDatabase();
-            }
-        }
+            if (isFriendsLoaded) loadGraphFromDatabase();
+        },
+        { immediate: true }
     );
 
     function showStatusMessage(message, type = 'info') {

src/views/Layout/MainLayout.vue

@@ -23,7 +23,7 @@
                     <template #default="{ layout }">
                         <ResizablePanel :default-size="mainDefaultSize" :order="1">
                             <RouterView v-slot="{ Component }">
-                                <KeepAlive exclude="Charts">
+                                <KeepAlive exclude="ChartsInstance, ChartsMutual">
                                     <component :is="Component" />
                                 </KeepAlive>
                             </RouterView>