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 });
+                if (chartsKeys.includes(item.key)) {
-                usedKeys.add(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',
+        key: 'charts-instance',
-        icon: 'ri-bar-chart-line',
+        icon: 'ri-bar-chart-horizontal-line',
-        tooltip: 'nav_tooltip.charts',
+        tooltip: 'view.charts.instance_activity.header',
-        labelKey: 'nav_tooltip.charts',
+        labelKey: 'view.charts.instance_activity.header',
-        routeName: 'charts'
+        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 !(
+            return ![
-                currentRouteName === 'friends-locations' ||
+                'friends-locations',
-                currentRouteName === 'friend-list' ||
+                'friend-list',
-                currentRouteName === 'charts'
+                '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,4 +1,5 @@
 <template>
+    <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">
@@ -33,7 +34,9 @@
                     <Popover>
                         <PopoverTrigger asChild>
                             <div>
-                            <TooltipWrapper :content="t('view.charts.instance_activity.settings.header')" side="top">
+                                <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>
@@ -57,7 +60,8 @@
                                     <Switch
                                         v-model="isDetailVisible"
                                         @update:modelValue="
-                                        (value) => changeIsDetailInstanceVisible(value, () => handleSettingsChange())
+                                            (value) =>
+                                                changeIsDetailInstanceVisible(value, () => handleSettingsChange())
                                         " />
                                 </div>
                                 <div v-if="isDetailVisible">
@@ -69,11 +73,14 @@
                                         " />
                                 </div>
                                 <div v-if="isDetailVisible">
-                                <span>{{ t('view.charts.instance_activity.settings.show_no_friend_instance') }}</span>
+                                    <span>{{
+                                        t('view.charts.instance_activity.settings.show_no_friend_instance')
+                                    }}</span>
                                     <Switch
                                         v-model="isNoFriendInstanceVisible"
                                         @update:modelValue="
-                                        (value) => changeIsNoFriendInstanceVisible(value, () => handleSettingsChange())
+                                            (value) =>
+                                                changeIsNoFriendInstanceVisible(value, () => handleSettingsChange())
                                         " />
                                 </div>
                             </div>
@@ -157,9 +164,12 @@
                     :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,5 +1,8 @@
 <template>
-    <div class="mt-0 flex min-h-[calc(100vh-140px)] flex-col items-center justify-betweenpt-12" ref="mutualGraphRef">
+    <div id="chart" class="x-container">
+        <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">
@@ -46,9 +49,13 @@
                 </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') {
+            if (isFriendsLoaded) loadGraphFromDatabase();
-                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>