feat: Add folder customization support to sidebar

Updates the left sidebar to display custom folder colors and icons:
- FolderCard component now accepts folderColor and folderIcon props
- LeftSidebar fetches folder metadata and passes to FolderCard
- Supports same 10 icons as host manager (Folder, Server, Cloud, Database, Box, Package, Layers, Archive, HardDrive, Globe)
- Folder metadata refreshes with host data and on ssh-hosts:changed events

This ensures the sidebar reflects folder appearance changes made in the host manager.

src/ui/desktop/navigation/LeftSidebar.tsx

@@ -34,8 +34,9 @@ import {
 import { Input } from "@/components/ui/input.tsx";
 import { Button } from "@/components/ui/button.tsx";
 import { FolderCard } from "@/ui/desktop/navigation/hosts/FolderCard.tsx";
-import { getSSHHosts } from "@/ui/main-axios.ts";
+import { getSSHHosts, getSSHFolders } from "@/ui/main-axios.ts";
 import { useTabs } from "@/ui/desktop/navigation/tabs/TabContext.tsx";
+import type { SSHFolder } from "@/types/index.ts";
 
 interface SSHHost {
   id: number;
@@ -145,6 +146,20 @@ export function LeftSidebar({
   const prevHostsRef = React.useRef<SSHHost[]>([]);
   const [search, setSearch] = useState("");
   const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [folderMetadata, setFolderMetadata] = useState<Map<string, SSHFolder>>(new Map());
+
+  const fetchFolderMetadata = React.useCallback(async () => {
+    try {
+      const folders = await getSSHFolders();
+      const metadataMap = new Map<string, SSHFolder>();
+      folders.forEach((folder) => {
+        metadataMap.set(folder.name, folder);
+      });
+      setFolderMetadata(metadataMap);
+    } catch (error) {
+      console.error("Failed to fetch folder metadata:", error);
+    }
+  }, []);
 
   const fetchHosts = React.useCallback(async () => {
     try {
@@ -210,13 +225,18 @@ export function LeftSidebar({
 
   React.useEffect(() => {
     fetchHosts();
-    const interval = setInterval(fetchHosts, 300000);
+    fetchFolderMetadata();
+    const interval = setInterval(() => {
+      fetchHosts();
+      fetchFolderMetadata();
+    }, 300000);
     return () => clearInterval(interval);
-  }, [fetchHosts]);
+  }, [fetchHosts, fetchFolderMetadata]);
 
   React.useEffect(() => {
     const handleHostsChanged = () => {
       fetchHosts();
+      fetchFolderMetadata();
     };
     const handleCredentialsChanged = () => {
       fetchHosts();
@@ -239,7 +259,7 @@ export function LeftSidebar({
         handleCredentialsChanged as EventListener,
       );
     };
-  }, [fetchHosts]);
+  }, [fetchHosts, fetchFolderMetadata]);
 
   React.useEffect(() => {
     const handler = setTimeout(() => setDebouncedSearch(search), 200);
@@ -437,15 +457,20 @@ export function LeftSidebar({
                   </div>
                 )}
 
-                {sortedFolders.map((folder, idx) => (
+                {sortedFolders.map((folder, idx) => {
-                  <FolderCard
+                  const metadata = folderMetadata.get(folder);
-                    key={`folder-${folder}-${hostsByFolder[folder]?.length || 0}`}
+                  return (
-                    folderName={folder}
+                    <FolderCard
-                    hosts={getSortedHosts(hostsByFolder[folder])}
+                      key={`folder-${folder}-${hostsByFolder[folder]?.length || 0}`}
-                    isFirst={idx === 0}
+                      folderName={folder}
-                    isLast={idx === sortedFolders.length - 1}
+                      hosts={getSortedHosts(hostsByFolder[folder])}
-                  />
+                      isFirst={idx === 0}
-                ))}
+                      isLast={idx === sortedFolders.length - 1}
+                      folderColor={metadata?.color}
+                      folderIcon={metadata?.icon}
+                    />
+                  );
+                })}
               </SidebarGroup>
             </SidebarContent>
             <Separator className="p-0.25 mt-1 mb-1" />

src/ui/desktop/navigation/hosts/FolderCard.tsx

@@ -1,6 +1,18 @@
 import React, { useState } from "react";
 import { CardTitle } from "@/components/ui/card.tsx";
-import { ChevronDown, Folder } from "lucide-react";
+import {
+  ChevronDown,
+  Folder,
+  Server,
+  Cloud,
+  Database,
+  Box,
+  Package,
+  Layers,
+  Archive,
+  HardDrive,
+  Globe,
+} from "lucide-react";
 import { Button } from "@/components/ui/button.tsx";
 import { Host } from "@/ui/desktop/navigation/hosts/Host.tsx";
 import { Separator } from "@/components/ui/separator.tsx";
@@ -40,11 +52,15 @@ interface FolderCardProps {
   hosts: SSHHost[];
   isFirst: boolean;
   isLast: boolean;
+  folderColor?: string;
+  folderIcon?: string;
 }
 
 export function FolderCard({
   folderName,
   hosts,
+  folderColor,
+  folderIcon,
 }: FolderCardProps): React.ReactElement {
   const [isExpanded, setIsExpanded] = useState(true);
 
@@ -52,6 +68,21 @@ export function FolderCard({
     setIsExpanded(!isExpanded);
   };
 
+  const iconMap: Record<string, React.ComponentType<{ size?: number; strokeWidth?: number; className?: string; style?: React.CSSProperties }>> = {
+    Folder,
+    Server,
+    Cloud,
+    Database,
+    Box,
+    Package,
+    Layers,
+    Archive,
+    HardDrive,
+    Globe,
+  };
+
+  const FolderIcon = folderIcon && iconMap[folderIcon] ? iconMap[folderIcon] : Folder;
+
   return (
     <div className="bg-dark-bg-darker border-2 border-dark-border rounded-lg overflow-hidden p-0 m-0">
       <div
@@ -59,7 +90,11 @@ export function FolderCard({
       >
         <div className="flex gap-2 pr-10">
           <div className="flex-shrink-0 flex items-center">
-            <Folder size={16} strokeWidth={3} />
+            <FolderIcon
+              size={16}
+              strokeWidth={3}
+              style={folderColor ? { color: folderColor } : undefined}
+            />
           </div>
           <div className="flex-1 min-w-0">
             <CardTitle className="mb-0 leading-tight break-words text-md">