Update status refreshing to have a better interval and updated sidebar UI

src/backend/ssh/server-stats.ts

@@ -370,7 +370,9 @@ async function pollStatusesOnce(): Promise<void> {
 
     const checks = hosts.map(async (h) => {
         const isOnline = await tcpPing(h.ip, h.port, 5000);
-        hostStatuses.set(h.id, {status: isOnline ? 'online' : 'offline', lastChecked: now});
+        const now = new Date().toISOString();
+        const statusEntry: StatusEntry = {status: isOnline ? 'online' : 'offline', lastChecked: now};
+        hostStatuses.set(h.id, statusEntry);
         return isOnline;
     });
 
@@ -396,15 +398,22 @@ app.get('/status/:id', async (req, res) => {
         return res.status(400).json({error: 'Invalid id'});
     }
 
-    if (!hostStatuses.has(id)) {
-        await pollStatusesOnce();
+    try {
+        const host = await fetchHostById(id);
+        if (!host) {
+            return res.status(404).json({error: 'Host not found'});
+        }
+        
+        const isOnline = await tcpPing(host.ip, host.port, 5000);
+        const now = new Date().toISOString();
+        const statusEntry: StatusEntry = {status: isOnline ? 'online' : 'offline', lastChecked: now};
+        
+        hostStatuses.set(id, statusEntry);
+        res.json(statusEntry);
+    } catch (err) {
+        logger.error('Failed to check host status', err);
+        res.status(500).json({error: 'Failed to check host status'});
     }
-
-    const entry = hostStatuses.get(id);
-    if (!entry) {
-        return res.status(404).json({error: 'Host not found'});
-    }
-    res.json(entry);
 });
 
 app.post('/refresh', async (req, res) => {

src/ui/Apps/Server/Server.tsx

@@ -6,7 +6,7 @@ import {Button} from "@/components/ui/button.tsx";
 import {Progress} from "@/components/ui/progress"
 import {Cpu, HardDrive, MemoryStick} from "lucide-react";
 import {Tunnel} from "@/ui/Apps/Tunnel/Tunnel.tsx";
-import {getServerStatusById, getServerMetricsById, ServerMetrics} from "@/ui/main-axios.ts";
+import {getServerStatusById, getServerMetricsById, type ServerMetrics} from "@/ui/main-axios.ts";
 import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx";
 
 interface ServerProps {
@@ -102,7 +102,7 @@ export function Server({
                     fetchStatus();
                     fetchMetrics();
                 }
-            }, 300_000);
+            }, 30000);
         }
 
         return () => {

src/ui/Navigation/Hosts/Host.tsx

@@ -58,7 +58,7 @@ export function Host({host}: HostProps): React.ReactElement {
 
         fetchStatus();
 
-        intervalId = window.setInterval(fetchStatus, 30000);
+        intervalId = window.setInterval(fetchStatus, 10000);
 
         return () => {
             cancelled = true;

src/ui/Navigation/LeftSidebar.tsx

@@ -429,7 +429,7 @@ export function LeftSidebar({
                     <Separator className="p-0.25"/>
                     <SidebarContent>
                         <SidebarGroup className="!m-0 !p-0 !-mb-2">
-                            <Button className="m-2 flex flex-row font-semibold" variant="outline"
+                            <Button className="m-2 flex flex-row font-semibold border-2 !border-[#303032]" variant="outline"
                                     onClick={openSshManagerTab} disabled={!!sshManagerTab || isSplitScreenActive}
                                     title={sshManagerTab ? 'SSH Manager already open' : isSplitScreenActive ? 'Disabled during split screen' : undefined}>
                                 <HardDrive strokeWidth="2.5"/>
@@ -438,12 +438,12 @@ export function LeftSidebar({
                         </SidebarGroup>
                         <Separator className="p-0.25"/>
                         <SidebarGroup className="flex flex-col gap-y-2 !-mt-2">
-                            <div className="bg-[#131316] rounded-lg">
+                            <div className="!bg-[#222225] 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"
+                                    className="w-full h-8 text-sm border-2 !bg-[#222225] border-[#303032] rounded-md"
                                     autoComplete="off"
                                 />
                             </div>