feat: continued improvements

src/ui/features/tunnel/TunnelApp.tsx

@@ -1,22 +1,55 @@
 import React from "react";
-import { TunnelManager } from "@/features/tunnel/TunnelManager.tsx";
+import { useTranslation } from "react-i18next";
 import { FullScreenAppWrapper } from "@/features/FullScreenAppWrapper.tsx";
+import { TunnelTab } from "@/features/tunnel/TunnelTab.tsx";
+import type { Host } from "@/types/ui-types";
+import type { SSHHost } from "@/types";
 
 interface TunnelAppProps {
   hostId?: string;
 }
 
+function sshHostToMinimalHost(h: SSHHost): Host {
+  return {
+    id: String(h.id),
+    name: h.name,
+    ip: h.ip,
+    port: h.port,
+    username: h.username,
+    folder: h.folder ?? "",
+    online: false,
+    cpu: null,
+    ram: null,
+    lastAccess: "",
+    tags: h.tags ?? [],
+    pin: h.pin ?? false,
+    authType: h.authType,
+    enableTerminal: h.enableTerminal ?? false,
+    enableTunnel: h.enableTunnel ?? false,
+    enableFileManager: h.enableFileManager ?? false,
+    enableDocker: h.enableDocker ?? false,
+    enableSsh: h.enableSsh ?? true,
+    enableRdp: h.enableRdp ?? false,
+    enableVnc: h.enableVnc ?? false,
+    enableTelnet: h.enableTelnet ?? false,
+    sshPort: h.sshPort ?? h.port,
+    rdpPort: h.rdpPort ?? 3389,
+    vncPort: h.vncPort ?? 5900,
+    telnetPort: h.telnetPort ?? 23,
+    serverTunnels: [],
+    quickActions: [],
+  };
+}
+
 const TunnelApp: React.FC<TunnelAppProps> = ({ hostId }) => {
+  const { t } = useTranslation();
   return (
     <FullScreenAppWrapper hostId={hostId}>
       {(hostConfig, loading) => {
         if (loading) {
           return (
             <div className="flex items-center justify-center h-full">
-              <div className="text-center">
-                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto mb-2"></div>
-                <p className="text-muted-foreground">Loading host...</p>
-              </div>
+              <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-white mx-auto" />
             </div>
           );
         }
@@ -24,20 +57,15 @@ const TunnelApp: React.FC<TunnelAppProps> = ({ hostId }) => {
         if (!hostConfig) {
           return (
             <div className="flex items-center justify-center h-full">
-              <div className="text-center">
-                <p className="text-red-500 mb-4">Host not found</p>
-              </div>
+              <p className="text-muted-foreground">{t("hosts.hostNotFound")}</p>
             </div>
           );
         }
 
         return (
-          <TunnelManager
-            hostConfig={hostConfig}
-            title={hostConfig.name || `${hostConfig.username}@${hostConfig.ip}`}
-            isVisible={true}
-            isTopbarOpen={false}
-            embedded={true}
+          <TunnelTab
+            label={hostConfig.name}
+            host={sshHostToMinimalHost(hostConfig)}
           />
         );
       }}