[Init] Initial commit - NetMesh terminal manager

components/port-forwarding/PortForwardHostKeyTrayPrompt.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import type { KnownHost } from "../../domain/models";
+import { usePortForwardHostKeyVerification } from "../../application/state/usePortForwardHostKeyVerification";
+import { useI18n } from "../../application/i18n/I18nProvider";
+import { cn } from "../../lib/utils";
+import { Button } from "../ui/button";
+
+interface PortForwardHostKeyTrayPromptProps {
+  onAddKnownHost?: (knownHost: KnownHost) => void;
+}
+
+export const PortForwardHostKeyTrayPrompt: React.FC<PortForwardHostKeyTrayPromptProps> = ({
+  onAddKnownHost,
+}) => {
+  const { t } = useI18n();
+  const {
+    hostKeyVerification,
+    rejectHostKeyVerification,
+    acceptHostKeyVerification,
+    acceptAndSaveHostKeyVerification,
+  } = usePortForwardHostKeyVerification(onAddKnownHost);
+
+  if (!hostKeyVerification) return null;
+
+  const { hostKeyInfo } = hostKeyVerification;
+  const isChanged = hostKeyInfo.status === "changed";
+
+  return (
+    <div
+      data-port-forward-host-key-tray-prompt="true"
+      className={cn(
+        "px-3 py-2",
+        isChanged ? "bg-destructive/8" : "bg-muted/45",
+      )}
+    >
+      <div className="flex items-start justify-between gap-3">
+        <div className="min-w-0 flex-1">
+          <div
+            className={cn(
+              "truncate text-xs font-semibold",
+              isChanged ? "text-destructive" : "text-foreground",
+            )}
+          >
+            {isChanged
+              ? t("terminal.hostKey.changedTitle")
+              : t("terminal.hostKey.unknownTitle")}
+          </div>
+          <div className="truncate text-xs text-muted-foreground">
+            {hostKeyInfo.hostname}:{hostKeyInfo.port}
+          </div>
+        </div>
+      </div>
+
+      <div className="mt-1.5 text-[10px] leading-4 text-muted-foreground">
+        {t("terminal.hostKey.fingerprintLabel", { keyType: hostKeyInfo.keyType })}
+        <code className="ml-1 break-all font-mono text-[11px] text-foreground/90">
+          {hostKeyInfo.fingerprint}
+        </code>
+      </div>
+
+      {isChanged && hostKeyInfo.knownFingerprint && (
+        <div className="mt-1.5 text-[10px] leading-4 text-muted-foreground">
+          <span className="font-medium text-destructive">
+            {t("terminal.hostKey.savedFingerprintLabel")}
+          </span>
+          <code className="ml-1 break-all font-mono text-[11px] text-foreground/90">
+            {hostKeyInfo.knownFingerprint}
+          </code>
+        </div>
+      )}
+
+      <div className="mt-2 grid grid-cols-[auto_auto_1fr] gap-1">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="h-6 px-1.5 text-[10px]"
+          onClick={rejectHostKeyVerification}
+        >
+          {t("common.close")}
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-6 px-1.5 text-[10px]"
+          onClick={acceptHostKeyVerification}
+        >
+          {t("common.continue")}
+        </Button>
+        <Button
+          size="sm"
+          className="h-6 min-w-0 px-1.5 text-[10px]"
+          onClick={acceptAndSaveHostKeyVerification}
+        >
+          <span className="truncate">
+            {isChanged
+              ? t("terminal.hostKey.updateAndContinue")
+              : t("terminal.hostKey.addAndContinue")}
+          </span>
+        </Button>
+      </div>
+    </div>
+  );
+};