fixed multi tab feature

Signed-off-by: RAWx18 <rawx18.dev@gmail.com>

Author: RAWx18

frontend/src/modules/layout/components/layout.vue

@@ -4,7 +4,7 @@
     <tab-bar />
 
     <!-- Main Content Area with top padding to account for fixed tab bar -->
-    <el-container class="flex-1 overflow-hidden bg-black relative pt-[45px]">
+    <el-container class="flex-1 overflow-hidden bg-black relative pt-[56px]">
       <!-- Mobile Overlay -->
       <div 
         v-if="isMobile && !collapsed" 
@@ -48,23 +48,22 @@
           </banner>
         </div>
         <router-view v-slot="{ Component }">
-          <keep-alive :include="cachedViews" :max="10">
-            <component :is="Component" :key="route.fullPath" />
-          </keep-alive>
+          <component :is="Component" :key="route.fullPath" />
         </router-view>
         </el-main>
       </el-container>
     </el-container>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapActions, mapGetters } from 'vuex';
 import AppMenu from '@/modules/layout/components/menu.vue';
 import TabBar from '@/modules/layout/components/tab-bar.vue';
-import { useTabsStore } from '@/modules/layout/store/tabs';
-import { onMounted, onUnmounted } from 'vue';
-import { useRoute } from 'vue-router';
+import { onMounted, onUnmounted, watch } from 'vue';
+import { useTopNavStore } from '@/modules/layout/store/topNav';
+import { signalsMainMenu, chatMenu, devtelMenu } from '@/modules/layout/config/menu';
+import { useRoute, useRouter } from 'vue-router';
 
 export default {
   name: 'AppLayout',
@@ -75,22 +74,56 @@ export default {
   },
 
   setup() {
-    const tabsStore = useTabsStore();
     const route = useRoute();
+    const router = useRouter();
+    const topNav = useTopNavStore();
+    topNav.init();
+
+    // Initialize top selection based on current route
+    // Robustly check by route name and resolved paths to avoid misclassification on refresh
+    const findGroupForRoute = (r: any) => {
+      const name = r.name;
+      const fullPath = r.fullPath || '';
+
+      const matches = (menu: any[]) => {
+        return menu.some((m: any) => {
+          if (!m) return false;
+          if (m.routeName && name && m.routeName === name) return true;
+          if (m.path && fullPath && fullPath.startsWith(m.path)) return true;
+          if (m.routeName) {
+            try {
+              const resolved = router.resolve({ name: m.routeName });
+              if (resolved && resolved.href && fullPath.startsWith(resolved.href)) return true;
+            } catch (e) {
+              // ignore resolution errors
+            }
+          }
+          return false;
+        });
+      };
 
-    // Check inactivity every minute
-    let timer;
-    onMounted(() => {
-      timer = setInterval(() => {
-        tabsStore.checkInactivity();
-      }, 60000);
-    });
+      if (matches(chatMenu)) return 'chat';
+      if (matches(devtelMenu)) return 'devtel';
+      return 'signals';
+    };
 
-    onUnmounted(() => {
-      if (timer) clearInterval(timer);
+    // Set initial top to match route (so sidebar and content align on refresh)
+    onMounted(() => {
+      const group = findGroupForRoute(route);
+      topNav.set(group as any);
     });
 
-    return { tabsStore, route };
+    // Persist last visited for the active top when route changes
+    watch(
+      () => route.fullPath,
+      (p) => {
+        const selected = topNav.selected as 'signals' | 'chat' | 'devtel';
+        if (selected) topNav.setLastVisited(selected, p || '/');
+      },
+      { immediate: true },
+    );
+
+    return { route, topNav };
   },
 
   data() {
@@ -109,9 +142,7 @@ export default {
       integrationsInProgress: 'integration/inProgress',
     }),
 
-    cachedViews() {
-      return this.tabsStore.tabs.map((t) => t.name);
-    },
+    // No cached views: keep-alive removed to prevent background tab pages
   },
 
   created() {
@@ -175,7 +206,7 @@ export default {
 // Global override for Element Plus drawers and dialogs
 // This ensures they respect the top bar height and don't overlap it
 .el-overlay {
-  top: 45px !important; // Height of the tab bar
-  height: calc(100% - 45px) !important;
+  top: 56px !important; // Height of the tab bar
+  height: calc(100% - 56px) !important;
 }
 </style>

frontend/src/modules/layout/components/menu.vue

@@ -14,11 +14,11 @@
         <cr-menu-quickstart v-if="isQuickstartEnabled" :collapsed="isCollapsed" />
 
         <!-- Menu items -->
-        <cr-menu-links class="mb-2" :links="mainMenu" :collapsed="isCollapsed" link-class="text-sm" />
+        <cr-menu-links class="mb-2" :links="currentMainMenu" :collapsed="isCollapsed" link-class="text-sm" />
 
         <div class="border-t border-zinc-700 mb-4" />
 
-        <cr-menu-links :links="bottomMenu" :collapsed="isCollapsed" link-class="text-sm" />
+        <cr-menu-links :links="currentBottomMenu" :collapsed="isCollapsed" link-class="text-sm" />
 
         <div class="grow" />
         <!-- Support popover and Toggle -->
@@ -46,13 +46,19 @@
 
 <script setup>
 import { useStore } from 'vuex';
-import { computed, watch } from 'vue';
+import { computed, watch, ref } from 'vue';
 
 import { mapGetters } from '@/shared/vuex/vuex.helpers';
 import { useActivityTypeStore } from '@/modules/activity/store/type';
 import CrMenuWorkspace from '@/modules/layout/components/menu/menu-workspace.vue';
 import CrMenuLinks from '@/modules/layout/components/menu/menu-links.vue';
-import { bottomMenu, mainMenu } from '@/modules/layout/config/menu';
+import {
+  signalsMainMenu,
+  signalsBottomMenu,
+  chatMenu,
+  devtelMenu,
+} from '@/modules/layout/config/menu';
+import { useTopNavStore } from '@/modules/layout/store/topNav';
 import CrMenuSupport from '@/modules/layout/components/menu/menu-support.vue';
 import CrMenuQuickstart from '@/modules/layout/components/menu/menu-quickstart.vue';
 import { FeatureFlag } from '@/utils/featureFlag';
@@ -74,11 +80,30 @@ watch(
 const isCollapsed = computed(
   () => store.getters['layout/menuCollapsed'],
 );
+const topNav = useTopNavStore();
+
+const selectedTop = computed(() => topNav.selected);
+
+const currentMainMenu = computed(() => {
+  if (selectedTop.value === 'chat') return chatMenu;
+  if (selectedTop.value === 'devtel') return devtelMenu;
+  return signalsMainMenu;
+});
+
+const currentBottomMenu = computed(() => {
+  if (selectedTop.value === 'chat') return [];
+  if (selectedTop.value === 'devtel') return [];
+  return signalsBottomMenu;
+});
 function toggleMenu() {
   store.dispatch('layout/toggleMenu');
 }
 
 const isQuickstartEnabled = computed(() => FeatureFlag.isFlagEnabled(FeatureFlag.flags.quickstartV2));
+
+function setTop(tab) {
+  topNav.set(tab);
+}
 </script>
 
 <script>
@@ -90,7 +115,48 @@ export default {
 <style lang="scss">
 .gitmesh-menu{
   .el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) {
-    width: 281px;
+    width: 260px;
+    background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.55));
+    border-right: 1px solid rgba(255,255,255,0.03);
+    backdrop-filter: blur(6px);
+  }
+
+  .cr-menu-workspace, .cr-menu-quickstart {
+    padding: 8px 12px;
+    margin-bottom: 6px;
+  }
+
+  .menu-link {
+    border-left: 3px solid transparent;
+    align-items: center;
+    transition: background 150ms ease, color 150ms ease;
+    color: rgba(255,255,255,0.86);
+  }
+
+  .menu-link i {
+    color: rgba(255,255,255,0.66);
+    transition: color 150ms ease, transform 150ms ease;
+  }
+
+  .menu-link .menu-label{
+    color: rgba(255,255,255,0.88);
+    font-weight: 500;
+    letter-spacing: 0.2px;
+  }
+
+  .menu-link:hover {
+    background: rgba(255,255,255,0.02) !important;
+  }
+
+  .active-menu-link{
+    background: rgba(255,255,255,0.06) !important; /* slightly greyish */
+    color: rgba(255,255,255,0.92) !important;
+    border-left: none !important;
+    font-weight: 600 !important;
+  }
+
+  .active-menu-link i {
+    color: rgba(255,255,255,0.94) !important;
   }
 }
 .no-scrollbar::-webkit-scrollbar {

frontend/src/modules/layout/components/menu/menu-links.vue

@@ -24,30 +24,30 @@
             user: currentUser,
             tenant: currentTenant,
           })"
-          class="rounded-md h-8 transition !text-zinc-400 flex items-center whitespace-nowrap
-          flex-nowrap px-1.5 hover:bg-zinc-800 hover:!text-zinc-100 mb-2 overflow-hidden"
-          :active-class="!disableActiveClass ? '!bg-zinc-800 font-medium !text-white' : ''"
-          :class="[props.linkClass, props.collapsed ? 'justify-center' : '']"
+            class="menu-link h-10 transition !text-zinc-300 flex items-center whitespace-nowrap
+            flex-nowrap px-3 hover:bg-zinc-800 mb-2 overflow-hidden"
+            active-class="active-menu-link"
+            :class="[props.linkClass, props.collapsed ? 'justify-center' : '']"
         >
-          <i v-if="link.icon" :class="[link.icon, props.iconClass, props.collapsed ? 'mr-0' : 'mr-3']" class="text-lg" />
-          <span v-if="!props.collapsed" class="">
-            {{ link.label }}
-          </span>
+            <i v-if="link.icon" :class="[link.icon, props.iconClass, props.collapsed ? 'mr-0' : 'mr-3']" class="text-lg" />
+            <span v-if="!props.collapsed" class="menu-label">
+              {{ link.label }}
+            </span>
         </router-link>
         <a
           v-else-if="link.href || link.click"
           :id="`menu-${link.id}`"
           :href="link.href"
           target="_blank"
           rel="noopener noreferrer"
-          class="rounded-md h-8 transition !text-zinc-400 flex items-center justify-between
-          group whitespace-nowrap flex-nowrap px-1.5 hover:bg-zinc-800 hover:!text-zinc-100 mb-2 cursor-pointer overflow-hidden"
+          class="menu-link h-10 transition !text-zinc-300 flex items-center justify-between
+          group whitespace-nowrap flex-nowrap px-3 hover:bg-zinc-800 mb-2 cursor-pointer overflow-hidden"
           :class="[props.linkClass, props.collapsed ? 'justify-center' : '']"
           @click="link.click && link.click()"
         >
           <div class="flex items-center" :class="{ 'justify-center w-full': props.collapsed }">
             <i v-if="link.icon" :class="[link.icon, props.iconClass, props.collapsed ? 'mr-0' : 'mr-3']" class="text-lg" />
-            <span v-if="!props.collapsed" class="">
+            <span v-if="!props.collapsed" class="menu-label">
               {{ link.label }}
             </span>
           </div>