From 58947f445555aeb0c7c632afec56cbf464790570 Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Fri, 15 Aug 2025 02:17:07 -0500
Subject: [PATCH] Added tab UI (initial)

---
 src/ui/Navigation/Tabs/Tab.tsx  | 22 ++++++++++++++++++++++
 src/ui/Navigation/TopNavbar.tsx | 15 +++------------
 2 files changed, 25 insertions(+), 12 deletions(-)
 create mode 100644 src/ui/Navigation/Tabs/Tab.tsx

diff --git a/src/ui/Navigation/Tabs/Tab.tsx b/src/ui/Navigation/Tabs/Tab.tsx
new file mode 100644
index 00000000..77f19280
--- /dev/null
+++ b/src/ui/Navigation/Tabs/Tab.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import {ButtonGroup} from "@/components/ui/button-group.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {SeparatorVertical, X} from "lucide-react";
+
+export function Tab(): React.ReactElement {
+    return (
+        <div>
+            <ButtonGroup>
+                <Button variant="outline" className="!px-2 border-1 border-[#303032]">
+                    Server Name
+                </Button>
+                <Button variant="outline" className="!px-2 border-1 border-[#303032]">
+                    <SeparatorVertical className="w-[28px] h-[28px]" />
+                </Button>
+                <Button variant="outline" className="!px-2 border-1 border-[#303032]">
+                    <X/>
+                </Button>
+            </ButtonGroup>
+        </div>
+    )
+}
diff --git a/src/ui/Navigation/TopNavbar.tsx b/src/ui/Navigation/TopNavbar.tsx
index bea8f3c0..12d98bd1 100644
--- a/src/ui/Navigation/TopNavbar.tsx
+++ b/src/ui/Navigation/TopNavbar.tsx
@@ -2,6 +2,7 @@ import React from "react";
 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";
 
 interface TopNavbarProps {
     isTopbarOpen: boolean;
@@ -10,17 +11,7 @@ interface TopNavbarProps {
 
 export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): React.ReactElement {
     const {state} = useSidebar();
-    
-    // Debug logging
-    console.log("TopNavbar - Sidebar state:", state);
-    console.log("TopNavbar - State type:", typeof state);
-    console.log("TopNavbar - State === 'collapsed':", state === "collapsed");
-    
-    // Adjust pixel values to get exactly 15px margins
-    // Current left margin when expanded is 15px (perfect), when collapsed is 38px (need to reduce by 23px)
-    // Current right margin is 15px (perfect)
     const leftPosition = state === "collapsed" ? "26px" : "264px";
-    console.log("TopNavbar - Calculated left position:", leftPosition);
 
     return (
         <div>
@@ -36,8 +27,8 @@ 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)]">
-                    test
+                <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>
 
                 <div className="flex items-center justify-center flex-1">