UI upadte, added host system, better flex scaling, improved login.

src/ui/Homepage/Homepage.tsx

@@ -6,6 +6,10 @@ import {HomepageAlertManager} from "@/ui/Homepage/HomepageAlertManager.tsx";
 
 interface HomepageProps {
     onSelectView: (view: string) => void;
+    isAuthenticated: boolean;
+    authLoading: boolean;
+    onAuthSuccess: (authData: { isAdmin: boolean; username: string | null; userId: string | null }) => void;
+    isTopbarOpen?: boolean;
 }
 
 function getCookie(name: string) {
@@ -26,51 +30,51 @@ const API = axios.create({
     baseURL: apiBase,
 });
 
-export function Homepage({onSelectView}: HomepageProps): React.ReactElement {
-    const [loggedIn, setLoggedIn] = useState(false);
+export function Homepage({onSelectView, isAuthenticated, authLoading, onAuthSuccess, isTopbarOpen = true}: HomepageProps): React.ReactElement {
+    const [loggedIn, setLoggedIn] = useState(isAuthenticated);
     const [isAdmin, setIsAdmin] = useState(false);
     const [username, setUsername] = useState<string | null>(null);
     const [userId, setUserId] = useState<string | null>(null);
-    const [authLoading, setAuthLoading] = useState(true);
     const [dbError, setDbError] = useState<string | null>(null);
 
+    // Update local state when props change
     useEffect(() => {
-        const jwt = getCookie("jwt");
+        setLoggedIn(isAuthenticated);
+    }, [isAuthenticated]);
 
-        if (jwt) {
-            setAuthLoading(true);
-            Promise.all([
-                API.get("/me", {headers: {Authorization: `Bearer ${jwt}`}}),
-                API.get("/db-health")
-            ])
-                .then(([meRes]) => {
-                    setLoggedIn(true);
-                    setIsAdmin(!!meRes.data.is_admin);
-                    setUsername(meRes.data.username || null);
-                    setUserId(meRes.data.userId || null);
-                    setDbError(null);
-                })
-                .catch((err) => {
-                    setLoggedIn(false);
-                    setIsAdmin(false);
-                    setUsername(null);
-                    setUserId(null);
-                    setCookie("jwt", "", -1);
-                    if (err?.response?.data?.error?.includes("Database")) {
-                        setDbError("Could not connect to the database. Please try again later.");
-                    } else {
+    useEffect(() => {
+        if (isAuthenticated) {
+            const jwt = getCookie("jwt");
+            if (jwt) {
+                Promise.all([
+                    API.get("/me", {headers: {Authorization: `Bearer ${jwt}`}}),
+                    API.get("/db-health")
+                ])
+                    .then(([meRes]) => {
+                        setIsAdmin(!!meRes.data.is_admin);
+                        setUsername(meRes.data.username || null);
+                        setUserId(meRes.data.userId || null);
                         setDbError(null);
-                    }
-                })
-                .finally(() => setAuthLoading(false));
-        } else {
-            setAuthLoading(false);
+                    })
+                    .catch((err) => {
+                        setIsAdmin(false);
+                        setUsername(null);
+                        setUserId(null);
+                        if (err?.response?.data?.error?.includes("Database")) {
+                            setDbError("Could not connect to the database. Please try again later.");
+                        } else {
+                            setDbError(null);
+                        }
+                    });
+            }
         }
-    }, []);
+    }, [isAuthenticated]);
 
     return (
-        <div className="w-full min-h-svh grid place-items-center">
-            <div className="flex flex-row items-center justify-center gap-8">
+        <div className={`w-full min-h-svh grid place-items-center relative transition-[padding-top] duration-200 ease-linear ${
+            isTopbarOpen ? 'pt-[66px]' : 'pt-2'
+        }`}>
+            <div className="flex flex-row items-center justify-center gap-8 relative z-[10000]">
                 <HomepageAuth
                     setLoggedIn={setLoggedIn}
                     setIsAdmin={setIsAdmin}
@@ -80,6 +84,7 @@ export function Homepage({onSelectView}: HomepageProps): React.ReactElement {
                     authLoading={authLoading}
                     dbError={dbError}
                     setDbError={setDbError}
+                    onAuthSuccess={onAuthSuccess}
                 />
                 <HomepageUpdateLog
                     loggedIn={loggedIn}

src/ui/Homepage/HomepageAlertManager.tsx

@@ -121,19 +121,6 @@ export function HomepageAlertManager({userId, loggedIn}: AlertManagerProps): Rea
         return null;
     }
 
-    if (loading) {
-        return (
-            <div className="fixed top-4 right-4 z-50">
-                <div className="bg-background border rounded-lg p-3 shadow-lg">
-                    <div className="flex items-center gap-2">
-                        <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-primary"></div>
-                        <span className="text-sm text-muted-foreground">Loading alerts...</span>
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
     if (alerts.length === 0) {
         return null;
     }
@@ -152,7 +139,7 @@ export function HomepageAlertManager({userId, loggedIn}: AlertManagerProps): Rea
     const hasMultipleAlerts = alerts.length > 1;
 
     return (
-        <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-10">
+        <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-[99999]">
             <div className="relative w-full max-w-2xl mx-4">
                 <HomepageAlertCard
                     alert={currentAlert}

src/ui/Homepage/HomepageAuth.tsx

@@ -33,6 +33,7 @@ interface HomepageAuthProps extends React.ComponentProps<"div"> {
     authLoading: boolean;
     dbError: string | null;
     setDbError: (error: string | null) => void;
+    onAuthSuccess: (authData: { isAdmin: boolean; username: string | null; userId: string | null }) => void;
 }
 
 export function HomepageAuth({
@@ -45,6 +46,7 @@ export function HomepageAuth({
                                  authLoading,
                                  dbError,
                                  setDbError,
+                                 onAuthSuccess,
                                  ...props
                              }: HomepageAuthProps) {
     const [tab, setTab] = useState<"login" | "signup" | "external" | "reset">("login");
@@ -147,6 +149,14 @@ export function HomepageAuth({
             setUsername(meRes.data.username || null);
             setUserId(meRes.data.id || null);
             setDbError(null);
+            // Call onAuthSuccess to update App state
+            onAuthSuccess({
+                isAdmin: !!meRes.data.is_admin,
+                username: meRes.data.username || null,
+                userId: meRes.data.id || null
+            });
+            // Update internal state immediately
+            setInternalLoggedIn(true);
             if (tab === "signup") {
                 setSignupConfirmPassword("");
             }
@@ -255,10 +265,6 @@ export function HomepageAuth({
         setError(null);
     }
 
-    async function resetPassword() {
-
-    }
-
     async function handleOIDCLogin() {
         setError(null);
         setOidcLoading(true);
@@ -303,6 +309,14 @@ export function HomepageAuth({
                     setUsername(meRes.data.username || null);
                     setUserId(meRes.data.id || null);
                     setDbError(null);
+                    // Call onAuthSuccess to update App state
+                    onAuthSuccess({
+                        isAdmin: !!meRes.data.is_admin,
+                        username: meRes.data.username || null,
+                        userId: meRes.data.id || null
+                    });
+                    // Update internal state immediately
+                    setInternalLoggedIn(true);
                     window.history.replaceState({}, document.title, window.location.pathname);
                 })
                 .catch(err => {
@@ -331,12 +345,13 @@ export function HomepageAuth({
     return (
         <div
             className={cn(
+                "",
                 className
             )}
             {...props}
         >
             <div
-                className={`w-[420px] max-w-full bg-background rounded-xl shadow-lg p-6 flex flex-col ${internalLoggedIn ? '' : 'border border-border'}`}>
+                className={`w-[420px] max-w-full bg-background/95 backdrop-blur-md rounded-xl shadow-2xl p-6 flex flex-col relative ${internalLoggedIn ? '' : 'ring-1 ring-border/50'} focus-within:ring-2 focus-within:ring-primary/50 transition-all duration-200`}>
                 {dbError && (
                     <Alert variant="destructive" className="mb-4">
                         <AlertTitle>Error</AlertTitle>
@@ -369,16 +384,16 @@ export function HomepageAuth({
                         </AlertDescription>
                     </Alert>
                 )}
-                {(internalLoggedIn || (authLoading && getCookie("jwt"))) && (
+                {(internalLoggedIn || getCookie("jwt")) && (
                     <div className="flex flex-col items-center gap-4">
-                        <Alert className="my-2">
-                            <AlertTitle>Logged in!</AlertTitle>
-                            <AlertDescription>
+                        <div className="my-2 text-center bg-muted/50 border border-border rounded-lg p-4 w-full">
+                            <h3 className="text-lg font-semibold mb-2">Logged in!</h3>
+                            <p className="text-muted-foreground">
                                 You are logged in! Use the sidebar to access all available tools. To get started,
                                 create an SSH Host in the SSH Manager tab. Once created, you can connect to that
                                 host using the other apps in the sidebar.
-                            </AlertDescription>
-                        </Alert>
+                            </p>
+                        </div>
 
                         <div className="flex flex-row items-center gap-2">
                             <Button
@@ -607,17 +622,18 @@ export function HomepageAuth({
                                                     <p>Enter your new password for
                                                         user: <strong>{localUsername}</strong></p>
                                                 </div>
-                                                <div className="flex flex-col gap-4">
+                                                <div className="flex flex-col gap-5">
                                                     <div className="flex flex-col gap-2">
                                                         <Label htmlFor="new-password">New Password</Label>
                                                         <Input
                                                             id="new-password"
                                                             type="password"
                                                             required
-                                                            className="h-11 text-base"
+                                                            className="h-11 text-base focus:ring-2 focus:ring-primary/50 transition-all duration-200"
                                                             value={newPassword}
                                                             onChange={e => setNewPassword(e.target.value)}
                                                             disabled={resetLoading}
+                                                            autoComplete="new-password"
                                                         />
                                                     </div>
                                                     <div className="flex flex-col gap-2">
@@ -626,10 +642,11 @@ export function HomepageAuth({
                                                             id="confirm-password"
                                                             type="password"
                                                             required
-                                                            className="h-11 text-base"
+                                                            className="h-11 text-base focus:ring-2 focus:ring-primary/50 transition-all duration-200"
                                                             value={confirmPassword}
                                                             onChange={e => setConfirmPassword(e.target.value)}
                                                             disabled={resetLoading}
+                                                            autoComplete="new-password"
                                                         />
                                                     </div>
                                                     <Button
@@ -719,4 +736,4 @@ export function HomepageAuth({
             </div>
         </div>
     );
-}
+}

src/ui/Navigation/Hosts/FolderCard.tsx

@@ -0,0 +1,80 @@
+import React, { useState } from "react";
+import {CardTitle} from "@/components/ui/card.tsx";
+import {ChevronDown, Folder} from "lucide-react";
+import {Button} from "@/components/ui/button.tsx";
+import {Host} from "@/ui/Navigation/Hosts/Host.tsx";
+import {Separator} from "@/components/ui/separator.tsx";
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface FolderCardProps {
+    folderName: string;
+    hosts: SSHHost[];
+    isFirst: boolean;
+    isLast: boolean;
+}
+
+export function FolderCard({ folderName, hosts, isFirst, isLast }: FolderCardProps): React.ReactElement {
+    const [isExpanded, setIsExpanded] = useState(true);
+
+    const toggleExpanded = () => {
+        setIsExpanded(!isExpanded);
+    };
+
+    return (
+        <div className="bg-[#0e0e10] border-2 border-[#303032] rounded-lg overflow-hidden" style={{padding: '0', margin: '0'}}>
+            <div className={`px-4 py-3 relative ${isExpanded ? 'border-b-2' : ''} bg-[#131316]`}>
+                <div className="flex gap-2 pr-10">
+                    <div className="flex-shrink-0 flex items-center">
+                        <Folder size={16} strokeWidth={3}/>
+                    </div>
+                    <div className="flex-1 min-w-0">
+                        <CardTitle className="mb-0 leading-tight break-words text-md">{folderName}</CardTitle>
+                    </div>
+                </div>
+                <Button
+                    variant="outline"
+                    className="w-[28px] h-[28px] absolute right-4 top-1/2 -translate-y-1/2 flex-shrink-0"
+                    onClick={toggleExpanded}
+                >
+                    <ChevronDown className={`h-4 w-4 transition-transform ${isExpanded ? '' : 'rotate-180'}`}/>
+                </Button>
+            </div>
+            {isExpanded && (
+                <div className="flex flex-col p-2 gap-y-3">
+                    {hosts.map((host, index) => (
+                        <React.Fragment key={`${folderName}-host-${host.id}-${host.name || host.ip}`}>
+                            <Host host={host} />
+                            {index < hosts.length - 1 && (
+                                <div className="relative -mx-2">
+                                    <Separator className="p-0.25 absolute inset-x-0" />
+                                </div>
+                            )}
+                        </React.Fragment>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}

src/ui/Navigation/Hosts/Host.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import {Status, StatusIndicator} from "@/components/ui/shadcn-io/status";
+import {Button} from "@/components/ui/button.tsx";
+import {ButtonGroup} from "@/components/ui/button-group.tsx";
+import {Server, Terminal} from "lucide-react";
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
+
+interface HostProps {
+    host: SSHHost;
+}
+
+export function Host({ host }: HostProps): React.ReactElement {
+    const tags = Array.isArray(host.tags) ? host.tags : [];
+    const hasTags = tags.length > 0;
+    
+    return (
+        <div>
+            <div className="flex items-center gap-2">
+                <Status status={"online"} className="!bg-transparent !p-0.75 flex-shrink-0">
+                    <StatusIndicator/>
+                </Status>
+                <p className="font-semibold flex-1 min-w-0 break-words text-sm">
+                    {host.name || host.ip}
+                </p>
+                <ButtonGroup className="flex-shrink-0">
+                    <Button variant="outline" className="!px-2 border-1 border-[#303032]">
+                        <Server/>
+                    </Button>
+                    <Button variant="outline" className="!px-2 border-1 border-[#303032]">
+                        <Terminal/>
+                    </Button>
+                </ButtonGroup>
+            </div>
+            {hasTags && (
+                <div className="flex flex-wrap items-center gap-2 mt-1">
+                    {tags.map((tag: string) => (
+                        <div key={tag} className="bg-[#18181b] border-1 border-[#303032] pl-2 pr-2 rounded-[10px]">
+                            <p className="text-sm">{tag}</p>
+                        </div>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}

src/ui/Navigation/LeftSidebar.tsx

@@ -46,6 +46,32 @@ import {
     TableRow,
 } from "@/components/ui/table.tsx";
 import axios from "axios";
+import {Card} from "@/components/ui/card.tsx";
+import {FolderCard} from "@/ui/Navigation/Hosts/FolderCard.tsx";
+import {getSSHHosts} from "@/ui/SSH/ssh-axios";
+
+interface SSHHost {
+    id: number;
+    name: string;
+    ip: string;
+    port: number;
+    username: string;
+    folder: string;
+    tags: string[];
+    pin: boolean;
+    authType: string;
+    password?: string;
+    key?: string;
+    keyPassword?: string;
+    keyType?: string;
+    enableTerminal: boolean;
+    enableTunnel: boolean;
+    enableConfigEditor: boolean;
+    defaultPath: string;
+    tunnelConnections: any[];
+    createdAt: string;
+    updatedAt: string;
+}
 
 interface SidebarProps {
     onSelectView: (view: string) => void;
@@ -119,6 +145,14 @@ export function LeftSidebar({
 
     const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true);
 
+    // SSH Hosts state management
+    const [hosts, setHosts] = useState<SSHHost[]>([]);
+    const [hostsLoading, setHostsLoading] = useState(false);
+    const [hostsError, setHostsError] = useState<string | null>(null);
+    const prevHostsRef = React.useRef<SSHHost[]>([]);
+    const [search, setSearch] = useState("");
+    const [debouncedSearch, setDebouncedSearch] = useState("");
+
     React.useEffect(() => {
         if (adminSheetOpen) {
             const jwt = getCookie("jwt");
@@ -147,6 +181,117 @@ export function LeftSidebar({
         }
     }, [isAdmin]);
 
+    // SSH Hosts data fetching
+    const fetchHosts = React.useCallback(async () => {
+        try {
+            const newHosts = await getSSHHosts();
+            const terminalHosts = newHosts.filter(host => host.enableTerminal);
+
+            const prevHosts = prevHostsRef.current;
+            
+            // Create a stable map of existing hosts by ID for comparison
+            const existingHostsMap = new Map(prevHosts.map(h => [h.id, h]));
+            const newHostsMap = new Map(terminalHosts.map(h => [h.id, h]));
+            
+            // Check if there are any meaningful changes
+            let hasChanges = false;
+            
+            // Check for new hosts, removed hosts, or changed hosts
+            if (terminalHosts.length !== prevHosts.length) {
+                hasChanges = true;
+            } else {
+                for (const [id, newHost] of newHostsMap) {
+                    const existingHost = existingHostsMap.get(id);
+                    if (!existingHost) {
+                        hasChanges = true;
+                        break;
+                    }
+                    
+                    // Only check fields that affect the display
+                    if (
+                        newHost.name !== existingHost.name ||
+                        newHost.folder !== existingHost.folder ||
+                        newHost.ip !== existingHost.ip ||
+                        newHost.port !== existingHost.port ||
+                        newHost.username !== existingHost.username ||
+                        newHost.pin !== existingHost.pin ||
+                        newHost.enableTerminal !== existingHost.enableTerminal ||
+                        JSON.stringify(newHost.tags) !== JSON.stringify(existingHost.tags)
+                    ) {
+                        hasChanges = true;
+                        break;
+                    }
+                }
+            }
+            
+            if (hasChanges) {
+                // Use a small delay to batch updates and reduce jittering
+                setTimeout(() => {
+                    setHosts(terminalHosts);
+                    prevHostsRef.current = terminalHosts;
+                }, 50);
+            }
+        } catch (err: any) {
+            setHostsError('Failed to load hosts');
+        }
+    }, []);
+
+    React.useEffect(() => {
+        fetchHosts();
+        const interval = setInterval(fetchHosts, 10000);
+        return () => clearInterval(interval);
+    }, [fetchHosts]);
+
+    // Search debouncing
+    React.useEffect(() => {
+        const handler = setTimeout(() => setDebouncedSearch(search), 200);
+        return () => clearTimeout(handler);
+    }, [search]);
+
+    // Filter and organize hosts with stable references
+    const filteredHosts = React.useMemo(() => {
+        if (!debouncedSearch.trim()) return hosts;
+        const q = debouncedSearch.trim().toLowerCase();
+        return hosts.filter(h => {
+            const searchableText = [
+                h.name || '',
+                h.username,
+                h.ip,
+                h.folder || '',
+                ...(h.tags || []),
+                h.authType,
+                h.defaultPath || ''
+            ].join(' ').toLowerCase();
+            return searchableText.includes(q);
+        });
+    }, [hosts, debouncedSearch]);
+
+    const hostsByFolder = React.useMemo(() => {
+        const map: Record<string, SSHHost[]> = {};
+        filteredHosts.forEach(h => {
+            const folder = h.folder && h.folder.trim() ? h.folder : 'No Folder';
+            if (!map[folder]) map[folder] = [];
+            map[folder].push(h);
+        });
+        return map;
+    }, [filteredHosts]);
+
+    const sortedFolders = React.useMemo(() => {
+        const folders = Object.keys(hostsByFolder);
+        folders.sort((a, b) => {
+            if (a === 'No Folder') return -1;
+            if (b === 'No Folder') return 1;
+            return a.localeCompare(b);
+        });
+        return folders;
+    }, [hostsByFolder]);
+
+    const getSortedHosts = React.useCallback((arr: SSHHost[]) => {
+        const pinned = arr.filter(h => h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+        const rest = arr.filter(h => !h.pin).sort((a, b) => (a.name || '').localeCompare(b.name || ''));
+        return [...pinned, ...rest];
+    }, []);
+
     const handleToggle = async (checked: boolean) => {
         if (!isAdmin) {
             return;
@@ -344,7 +489,7 @@ export function LeftSidebar({
     return (
         <div className="min-h-svh">
             <SidebarProvider open={isSidebarOpen}>
-                <Sidebar variant="floating">
+                <Sidebar variant="floating" className="">
                     <SidebarHeader>
                         <SidebarGroupLabel className="text-lg font-bold text-white">
                             Termix
@@ -359,48 +504,53 @@ export function LeftSidebar({
                     </SidebarHeader>
                     <Separator className="p-0.25"/>
                     <SidebarContent>
-                        <SidebarGroup>
-                            <SidebarGroupContent>
-                                <SidebarMenu>
-                                    <SidebarMenuItem key={"SSH Manager"}>
-                                        <SidebarMenuButton onClick={() => onSelectView("ssh_manager")}
-                                                           disabled={disabled}>
-                                            <HardDrive/>
-                                            <span>SSH Manager</span>
-                                        </SidebarMenuButton>
-                                    </SidebarMenuItem>
-                                    <div className="ml-5">
-                                        <SidebarMenuItem key={"Terminal"}>
-                                            <SidebarMenuButton onClick={() => onSelectView("terminal")}
-                                                               disabled={disabled}>
-                                                <Computer/>
-                                                <span>Terminal</span>
-                                            </SidebarMenuButton>
-                                        </SidebarMenuItem>
-                                        <SidebarMenuItem key={"Tunnel"}>
-                                            <SidebarMenuButton onClick={() => onSelectView("tunnel")}
-                                                               disabled={disabled}>
-                                                <Server/>
-                                                <span>Tunnel</span>
-                                            </SidebarMenuButton>
-                                        </SidebarMenuItem>
-                                        <SidebarMenuItem key={"Config Editor"}>
-                                            <SidebarMenuButton onClick={() => onSelectView("config_editor")}
-                                                               disabled={disabled}>
-                                                <File/>
-                                                <span>Config Editor</span>
-                                            </SidebarMenuButton>
-                                        </SidebarMenuItem>
+                        <SidebarGroup className="!m-0 !p-0 !-mb-2">
+                            <Button className="m-2 flex flex-row font-semibold" variant="outline">
+                                <HardDrive strokeWidth="2.5"/>
+                                Host Manager
+                            </Button>
+                        </SidebarGroup>
+                        <Separator className="p-0.25"/>
+                        <SidebarGroup className="flex flex-col gap-y-2 !-mt-2">
+                            {/* Search Input */}
+                            <div className="bg-[#131316] rounded-lg">
+                                <Input
+                                    value={search}
+                                    onChange={e => setSearch(e.target.value)}
+                                    placeholder="Search hosts by any info..."
+                                    className="w-full h-8 text-sm border-2 border-[#272728] rounded-lg"
+                                    autoComplete="off"
+                                />
+                            </div>
+                            
+                            {/* Error Display */}
+                            {hostsError && (
+                                <div className="px-4 pb-2">
+                                    <div className="text-xs text-red-500 bg-red-500/10 rounded px-2 py-1 border border-red-500/20">
+                                        {hostsError}
                                     </div>
-                                    <SidebarMenuItem key={"Tools"}>
-                                        <SidebarMenuButton onClick={() => window.open("https://dashix.dev", "_blank")}
-                                                           disabled={disabled}>
-                                            <Hammer/>
-                                            <span>Tools</span>
-                                        </SidebarMenuButton>
-                                    </SidebarMenuItem>
-                                </SidebarMenu>
-                            </SidebarGroupContent>
+                                </div>
+                            )}
+
+                            {/* Loading State */}
+                            {hostsLoading && (
+                                <div className="px-4 pb-2">
+                                    <div className="text-xs text-muted-foreground text-center">
+                                        Loading hosts...
+                                    </div>
+                                </div>
+                            )}
+
+                            {/* Hosts by Folder */}
+                            {sortedFolders.map((folder, idx) => (
+                                <FolderCard
+                                    key={`folder-${folder}-${hostsByFolder[folder]?.length || 0}`}
+                                    folderName={folder}
+                                    hosts={getSortedHosts(hostsByFolder[folder])}
+                                    isFirst={idx === 0}
+                                    isLast={idx === sortedFolders.length - 1}
+                                />
+                            ))}
                         </SidebarGroup>
                     </SidebarContent>
                     <Separator className="p-0.25 mt-1 mb-1"/>
@@ -908,7 +1058,7 @@ export function LeftSidebar({
             {!isSidebarOpen && (
                 <div
                     onClick={() => setIsSidebarOpen(true)}
-                    className="absolute top-0 left-0 w-[10px] h-full bg-[#18181b] cursor-pointer z-20 flex items-center justify-center">
+                    className="absolute top-0 left-0 w-[10px] h-full bg-[#18181b] cursor-pointer z-20 flex items-center justify-center rounded-tr-md rounded-br-md">
                     <ChevronRight size={10} />
                 </div>
             )}

src/ui/Navigation/TopNavbar.tsx

@@ -1,19 +1,48 @@
 import React from "react";
-import { useSidebar } from "@/components/ui/sidebar";
+import {useSidebar} from "@/components/ui/sidebar";
+import {Button} from "@/components/ui/button.tsx";
+import {ChevronDown, ChevronUpIcon} from "lucide-react";
+
+interface TopNavbarProps {
+    isTopbarOpen: boolean;
+    setIsTopbarOpen: (open: boolean) => void;
+}
+
+export function TopNavbar({isTopbarOpen, setIsTopbarOpen}: TopNavbarProps): React.ReactElement {
+    const {state} = useSidebar();
 
-export function TopNavbar(): React.ReactElement {
-    const { state } = useSidebar();
-    
     return (
-        <div 
-            className="fixed z-10 h-[50px] bg-[#18181b] border border-[#303032] rounded-lg transition-[left] duration-200 ease-linear"
-            style={{
-                top: "0.5rem",
-                left: state === "collapsed" ? "calc(1.5rem + 0.5rem)" : "calc(16rem + 0.5rem)",
-                right: "0.5rem"
-            }}
-        >
+        <div>
+            <div
+                className="fixed z-10 h-[50px] bg-[#18181b] border-2 border-[#303032] rounded-lg transition-all duration-200 ease-linear flex flex-row"
+                style={{
+                    top: isTopbarOpen ? "0.5rem" : "-3rem",
+                    left: state === "collapsed" ? "calc(1.5rem + 0.5rem)" : "calc(16rem + 0.5rem)",
+                    right: "0.5rem"
+                }}
+            >
+                <div className="h-full p-1 pr-2 border-r-2 border-[#303032] w-[calc(100%-3rem)]">
+                    test
+                </div>
 
+                <div className="flex items-center justify-center flex-1">
+                    <Button
+                        variant="outline"
+                        onClick={() => setIsTopbarOpen(false)}
+                        className="w-[28px] h-[28px]"
+                    >
+                        <ChevronUpIcon/>
+                    </Button>
+                </div>
+            </div>
+
+            {!isTopbarOpen && (
+                <div
+                    onClick={() => setIsTopbarOpen(true)}
+                    className="absolute top-0 left-0 w-full h-[10px] bg-[#18181b] cursor-pointer z-20 flex items-center justify-center rounded-bl-md rounded-br-md">
+                    <ChevronDown size={10} />
+                </div>
+            )}
         </div>
     )
 }