Update file naming and structure for mobile support

src/ui/Desktop/Navigation/Hosts/FolderCard.tsx

@@ -0,0 +1,81 @@
+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/Desktop/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;
+    enableFileManager: 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>
+    )
+}