Added SSH manager and terminals to tab system, now I need to do the server stats

src/ui/Navigation/TopNavbar.tsx

@@ -3,6 +3,7 @@ import {useSidebar} from "@/components/ui/sidebar";
 import {Button} from "@/components/ui/button.tsx";
 import {ChevronDown, ChevronUpIcon} from "lucide-react";
 import {Tab} from "@/ui/Navigation/Tabs/Tab.tsx";
+import {useTabs} from "@/contexts/TabContext";
 
 interface TopNavbarProps {
     isTopbarOpen: boolean;
@@ -11,8 +12,26 @@ interface TopNavbarProps {
 
 export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): React.ReactElement {
     const {state} = useSidebar();
+    const {tabs, currentTab, setCurrentTab, setSplitScreenTab, removeTab, allSplitScreenTab} = useTabs() as any;
     const leftPosition = state === "collapsed" ? "26px" : "264px";
 
+    const handleTabActivate = (tabId: number) => {
+        setCurrentTab(tabId);
+    };
+
+    const handleTabSplit = (tabId: number) => {
+        setSplitScreenTab(tabId);
+    };
+
+    const handleTabClose = (tabId: number) => {
+        removeTab(tabId);
+    };
+
+    const isSplitScreenActive = Array.isArray(allSplitScreenTab) && allSplitScreenTab.length > 0;
+    const currentTabObj = tabs.find((t: any) => t.id === currentTab);
+    const currentTabIsHome = currentTabObj?.type === 'home';
+    const currentTabIsSshManager = currentTabObj?.type === 'ssh_manager';
+
     return (
         <div>
             <div
@@ -27,15 +46,42 @@ export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): Reac
                     padding: "0"
                 }}
             >
-                <div className="h-full p-1 pr-2 border-r-2 border-[#303032] w-[calc(100%-3rem)] flex items-center overflow-x-scroll gap-2">
-                    <Tab/>
+                <div className="h-full p-1 pr-2 border-r-2 border-[#303032] w-[calc(100%-3rem)] flex items-center overflow-x-auto overflow-y-hidden gap-2 thin-scrollbar">
+                    {tabs.map((tab: any) => {
+                        const isActive = tab.id === currentTab;
+                        const isSplit = Array.isArray(allSplitScreenTab) && allSplitScreenTab.includes(tab.id);
+                        const isTerminal = tab.type === 'terminal';
+                        const isSshManager = tab.type === 'ssh_manager';
+                        // Old logic port:
+                        const isSplitButtonDisabled = (isActive && !isSplitScreenActive) || ((allSplitScreenTab?.length || 0) >= 3 && !isSplit);
+                        // Disable split entirely when on Home or SSH Manager
+                        const disableSplit = isSplitButtonDisabled || isActive || currentTabIsHome || currentTabIsSshManager || isSshManager;
+                        const disableActivate = isSplit || ((tab.type === 'home' || tab.type === 'ssh_manager') && isSplitScreenActive);
+                        const disableClose = (isSplitScreenActive && isActive) || isSplit;
+                        return (
+                            <Tab
+                                key={tab.id}
+                                tabType={tab.type}
+                                title={tab.title}
+                                isActive={isActive}
+                                onActivate={() => handleTabActivate(tab.id)}
+                                onClose={isTerminal || isSshManager ? () => handleTabClose(tab.id) : undefined}
+                                onSplit={isTerminal ? () => handleTabSplit(tab.id) : undefined}
+                                canSplit={isTerminal}
+                                canClose={isTerminal || isSshManager}
+                                disableActivate={disableActivate}
+                                disableSplit={disableSplit}
+                                disableClose={disableClose}
+                            />
+                        );
+                    })}
                 </div>
 
                 <div className="flex items-center justify-center flex-1">
                     <Button
                         variant="outline"
                         onClick={() => setIsTopbarOpen(false)}
-                        className="w-[28px] h-[28px]"
+                        className="w-[28px] h-[28]"
                     >
                         <ChevronUpIcon/>
                     </Button>