From 0fe3f8d126ce8df81b2639cdb03d46baaefcb659 Mon Sep 17 00:00:00 2001
From: LukeGus <bugattiguy527@gmail.com>
Date: Tue, 26 May 2026 17:48:19 -0500
Subject: [PATCH] feat: sidebar saves state across mobile swtich, guacd hosts
 not migraitng passwords, terminal wrong size

---
 src/backend/database/routes/host.ts   |   3 +
 src/ui/AppShell.tsx                   |   9 +-
 src/ui/features/terminal/Terminal.tsx |  26 ++---
 src/ui/sidebar/HostShareModal.tsx     |  16 ++-
 src/ui/sidebar/SidebarTree.tsx        | 146 +++++++++-----------------
 5 files changed, 75 insertions(+), 125 deletions(-)

diff --git a/src/backend/database/routes/host.ts b/src/backend/database/routes/host.ts
index 454ef96c..a758dbba 100644
--- a/src/backend/database/routes/host.ts
+++ b/src/backend/database/routes/host.ts
@@ -1587,11 +1587,14 @@ router.get(
           vncPort: hosts.vncPort,
           telnetPort: hosts.telnetPort,
           rdpUser: hosts.rdpUser,
+          rdpPassword: hosts.rdpPassword,
           rdpDomain: hosts.rdpDomain,
           rdpSecurity: hosts.rdpSecurity,
           rdpIgnoreCert: hosts.rdpIgnoreCert,
           vncUser: hosts.vncUser,
+          vncPassword: hosts.vncPassword,
           telnetUser: hosts.telnetUser,
+          telnetPassword: hosts.telnetPassword,
 
           ownerId: hosts.userId,
           isShared: sql<boolean>`${hostAccess.id} IS NOT NULL AND ${hosts.userId} != ${userId}`,
diff --git a/src/ui/AppShell.tsx b/src/ui/AppShell.tsx
index 0742aac8..30c32000 100644
--- a/src/ui/AppShell.tsx
+++ b/src/ui/AppShell.tsx
@@ -146,9 +146,14 @@ export function AppShell({
 
   const isMobile = useIsMobile();
 
-  // Close the sidebar when switching to mobile (it becomes a sheet overlay)
+  const sidebarOpenBeforeMobile = useRef(sidebarOpen);
   useEffect(() => {
-    if (isMobile) setSidebarOpen(false);
+    if (isMobile) {
+      sidebarOpenBeforeMobile.current = sidebarOpen;
+      setSidebarOpen(false);
+    } else {
+      setSidebarOpen(sidebarOpenBeforeMobile.current);
+    }
   }, [isMobile]);
 
   useEffect(() => {
diff --git a/src/ui/features/terminal/Terminal.tsx b/src/ui/features/terminal/Terminal.tsx
index 8f3855ec..51edcd40 100644
--- a/src/ui/features/terminal/Terminal.tsx
+++ b/src/ui/features/terminal/Terminal.tsx
@@ -2015,14 +2015,14 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
       });
 
       fitAddonRef.current?.fit();
-      if (terminal.cols < 10 || terminal.rows < 3) {
+      // Double-rAF ensures layout is fully settled (fonts, flexbox, etc.) before
+      // committing the fitted size, preventing the "terminal too short" glitch.
+      requestAnimationFrame(() => {
         requestAnimationFrame(() => {
           fitAddonRef.current?.fit();
           setIsFitted(true);
         });
-      } else {
-        setIsFitted(true);
-      }
+      });
 
       const element = xtermRef.current;
       const handleContextMenu = (e: MouseEvent) => {
@@ -2475,26 +2475,16 @@ const TerminalInner = forwardRef<TerminalHandle, SSHTerminalProps>(
         return;
       }
 
-      if (terminal.cols < 10 || terminal.rows < 3) {
+      setIsConnecting(true);
+      fitAddonRef.current?.fit();
+      requestAnimationFrame(() => {
         requestAnimationFrame(() => {
+          fitAddonRef.current?.fit();
           if (terminal.cols > 0 && terminal.rows > 0) {
-            setIsConnecting(true);
-            fitAddonRef.current?.fit();
             scheduleNotify(terminal.cols, terminal.rows);
             connectToHost(terminal.cols, terminal.rows);
           }
         });
-        return;
-      }
-
-      setIsConnecting(true);
-      fitAddonRef.current?.fit();
-      requestAnimationFrame(() => {
-        fitAddonRef.current?.fit();
-        if (terminal.cols > 0 && terminal.rows > 0) {
-          scheduleNotify(terminal.cols, terminal.rows);
-          connectToHost(terminal.cols, terminal.rows);
-        }
       });
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [terminal, hostConfig.id, isVisible, isConnected, isConnecting]);
diff --git a/src/ui/sidebar/HostShareModal.tsx b/src/ui/sidebar/HostShareModal.tsx
index ce6a688d..62776212 100644
--- a/src/ui/sidebar/HostShareModal.tsx
+++ b/src/ui/sidebar/HostShareModal.tsx
@@ -94,15 +94,13 @@ export function HostShareModal({
   return (
     <div className="absolute inset-0 z-20 flex flex-col bg-sidebar">
       {/* Header */}
-      <div className="flex items-center gap-2 px-3 py-2 shrink-0 border-b border-border text-xs text-muted-foreground hover:text-foreground">
-        <button
-          onClick={onClose}
-          className="flex items-center gap-2 hover:text-foreground transition-colors"
-        >
-          <ArrowLeft className="size-3.5 shrink-0" />
-          <span>{t("hosts.shareHostTitle", { name: host?.name ?? "" })}</span>
-        </button>
-      </div>
+      <button
+        onClick={onClose}
+        className="flex items-center gap-2 px-3 py-2 shrink-0 border-b border-border text-xs text-muted-foreground hover:text-foreground transition-colors w-full text-left"
+      >
+        <ArrowLeft className="size-3.5 shrink-0" />
+        <span>{t("hosts.shareHostTitle", { name: host?.name ?? "" })}</span>
+      </button>
 
       {/* Scrollable content */}
       <div className="flex flex-col flex-1 min-h-0 overflow-y-auto p-3 gap-3">
diff --git a/src/ui/sidebar/SidebarTree.tsx b/src/ui/sidebar/SidebarTree.tsx
index 0b4c788e..d66757ad 100644
--- a/src/ui/sidebar/SidebarTree.tsx
+++ b/src/ui/sidebar/SidebarTree.tsx
@@ -1,6 +1,5 @@
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { useVirtualizer } from "@tanstack/react-virtual";
 import {
   Box,
   Check,
@@ -344,10 +343,9 @@ export function HostItem({
                   e.stopPropagation();
                   onOpenTab("rdp");
                 }}
-                className="flex items-center gap-1.5 px-2.5 h-6 rounded text-xs font-medium text-muted-foreground/70 hover:text-foreground hover:bg-muted-foreground/10 transition-colors border border-border/40"
+                className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
               >
-                <Monitor className="size-3" />
-                RDP
+                <Monitor className="size-3.5" />
               </button>
             )}
             {host.enableVnc && (
@@ -357,10 +355,9 @@ export function HostItem({
                   e.stopPropagation();
                   onOpenTab("vnc");
                 }}
-                className="flex items-center gap-1.5 px-2.5 h-6 rounded text-xs font-medium text-muted-foreground/70 hover:text-foreground hover:bg-muted-foreground/10 transition-colors border border-border/40"
+                className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
               >
-                <Monitor className="size-3" />
-                VNC
+                <Monitor className="size-3.5" />
               </button>
             )}
             {host.enableTelnet && (
@@ -370,10 +367,9 @@ export function HostItem({
                   e.stopPropagation();
                   onOpenTab("telnet");
                 }}
-                className="flex items-center gap-1.5 px-2.5 h-6 rounded text-xs font-medium text-muted-foreground/70 hover:text-foreground hover:bg-muted-foreground/10 transition-colors border border-border/40"
+                className="flex items-center justify-center size-7 rounded text-muted-foreground/50 hover:text-foreground hover:bg-muted-foreground/10 transition-colors"
               >
-                <Terminal className="size-3" />
-                Telnet
+                <Terminal className="size-3.5" />
               </button>
             )}
             {onEditHost && (
@@ -582,7 +578,6 @@ export function HostItem({
 export function FolderItem({
   folder,
   depth = 0,
-  flat = false,
   onOpenTab,
   onEditHost,
   onShareHost,
@@ -600,7 +595,6 @@ export function FolderItem({
 }: {
   folder: HostFolder;
   depth?: number;
-  flat?: boolean;
   onOpenTab: (host: Host, type: TabType) => void;
   onEditHost?: (host: Host) => void;
   onShareHost?: (host: Host) => void;
@@ -645,8 +639,7 @@ export function FolderItem({
           <span className="text-muted-foreground/40">/{total}</span>
         </span>
       </button>
-      {/* Children are rendered as separate virtual rows when flat=true */}
-      {!flat && isOpen && (
+      {isOpen && (
         <div className="border-l border-border/40 ml-[30px]">
           {folder.children.map((child, i) =>
             isFolder(child) ? (
@@ -716,7 +709,6 @@ export function SidebarTree({
   loading?: boolean;
 }) {
   const { t } = useTranslation();
-  const scrollRef = useRef<HTMLDivElement>(null);
   const [openFolders, setOpenFolders] = useState<Set<string>>(new Set());
   const [selectedHostIds, setSelectedHostIds] = useState<Set<string>>(
     new Set(),
@@ -790,13 +782,6 @@ export function SidebarTree({
     visibleRows.map((r, i) => [r.item, i]),
   );
 
-  const virtualizer = useVirtualizer({
-    count: visibleRows.length,
-    getScrollElement: () => scrollRef.current,
-    estimateSize: () => 52,
-    overscan: 8,
-  });
-
   if (loading) {
     return (
       <div className="relative flex flex-col flex-1 min-h-0">
@@ -824,7 +809,7 @@ export function SidebarTree({
 
   return (
     <div className="relative flex flex-col flex-1 min-h-0">
-      <div className="flex-1 min-h-0 overflow-y-auto" ref={scrollRef}>
+      <div className="flex-1 min-h-0 overflow-y-auto">
         {visibleRows.length === 0 ? (
           <div className="flex flex-col items-center justify-center py-12 text-center px-4">
             <Server className="size-8 text-muted-foreground/20 mb-2" />
@@ -833,78 +818,47 @@ export function SidebarTree({
             </span>
           </div>
         ) : (
-          <div
-            style={{
-              height: `${virtualizer.getTotalSize()}px`,
-              position: "relative",
-            }}
-          >
-            {virtualizer.getVirtualItems().map((vItem) => {
-              const { item, depth } = visibleRows[vItem.index];
-              const stripeIndex = stripeMap.get(item) ?? 0;
-              const indentPx = depth * 16;
-              return (
-                <div
-                  key={vItem.key}
-                  style={{
-                    position: "absolute",
-                    top: 0,
-                    left: 0,
-                    width: "100%",
-                    transform: `translateY(${vItem.start}px)`,
-                  }}
-                >
-                  <div
-                    style={
-                      depth > 0 ? { paddingLeft: `${indentPx}px` } : undefined
-                    }
-                  >
-                    {isFolder(item) ? (
-                      <FolderItem
-                        folder={item}
-                        flat={true}
-                        depth={depth}
-                        onOpenTab={onOpenTab}
-                        onEditHost={onEditHost}
-                        onShareHost={onShareHost}
-                        onDeleteHost={handleDeleteHost}
-                        onDuplicateHost={handleDuplicateHost}
-                        query={query}
-                        stripeMap={stripeMap}
-                        openFolders={openFolders}
-                        onToggleFolder={toggleFolder}
-                        selectionMode={selectionMode}
-                        selectedHostIds={selectedHostIds}
-                        onToggleSelect={toggleSelect}
-                        openMenuHostId={openMenuHostId}
-                        onMenuOpenChange={setOpenMenuHostId}
-                      />
-                    ) : (
-                      <HostItem
-                        host={item}
-                        onOpenTab={(type) => onOpenTab(item, type)}
-                        onEditHost={() => onEditHost(item)}
-                        onShareHost={
-                          onShareHost ? () => onShareHost(item) : undefined
-                        }
-                        onDelete={() => handleDeleteHost(item)}
-                        onDuplicate={() => handleDuplicateHost(item)}
-                        query={query}
-                        stripeIndex={stripeIndex}
-                        selectionMode={selectionMode}
-                        selected={selectedHostIds.has(item.id)}
-                        onToggleSelect={() => toggleSelect(item.id)}
-                        isMenuOpen={openMenuHostId === item.id}
-                        onMenuOpenChange={(open) =>
-                          setOpenMenuHostId(open ? item.id : null)
-                        }
-                      />
-                    )}
-                  </div>
-                </div>
-              );
-            })}
-          </div>
+          children.map((child, i) =>
+            isFolder(child) ? (
+              <FolderItem
+                key={i}
+                folder={child}
+                onOpenTab={onOpenTab}
+                onEditHost={onEditHost}
+                onShareHost={onShareHost}
+                onDeleteHost={handleDeleteHost}
+                onDuplicateHost={handleDuplicateHost}
+                query={query}
+                stripeMap={stripeMap}
+                openFolders={openFolders}
+                onToggleFolder={toggleFolder}
+                selectionMode={selectionMode}
+                selectedHostIds={selectedHostIds}
+                onToggleSelect={toggleSelect}
+                openMenuHostId={openMenuHostId}
+                onMenuOpenChange={setOpenMenuHostId}
+              />
+            ) : (
+              <HostItem
+                key={i}
+                host={child}
+                onOpenTab={(type) => onOpenTab(child, type)}
+                onEditHost={() => onEditHost(child)}
+                onShareHost={onShareHost ? () => onShareHost(child) : undefined}
+                onDelete={() => handleDeleteHost(child)}
+                onDuplicate={() => handleDuplicateHost(child)}
+                query={query}
+                stripeIndex={stripeMap.get(child) ?? 0}
+                selectionMode={selectionMode}
+                selected={selectedHostIds.has(child.id)}
+                onToggleSelect={() => toggleSelect(child.id)}
+                isMenuOpen={openMenuHostId === child.id}
+                onMenuOpenChange={(open) =>
+                  setOpenMenuHostId(open ? child.id : null)
+                }
+              />
+            ),
+          )
         )}
       </div>