[Init] Initial commit - NetMesh terminal manager

components/keychain/ViewKeyPanel.tsx

@@ -0,0 +1,94 @@
+/**
+ * View Key Panel - Display SSH key details
+ */
+
+import { Check, Copy, Info } from 'lucide-react';
+import React, { useCallback, useState } from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { SSHKey } from '../../types';
+import { Button } from '../ui/button';
+import { Label } from '../ui/label';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+import { copyToClipboard } from './utils';
+
+interface ViewKeyPanelProps {
+    keyItem: SSHKey;
+    onExport: () => void;
+}
+
+export const ViewKeyPanel: React.FC<ViewKeyPanelProps> = ({
+    keyItem,
+    onExport,
+}) => {
+    const { t } = useI18n();
+    const [copied, setCopied] = useState(false);
+
+    const handleCopyPublicKey = useCallback(async () => {
+        const ok = await copyToClipboard(keyItem.publicKey || '');
+        if (!ok) return;
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }, [keyItem.publicKey]);
+
+    return (
+        <>
+            <div className="space-y-2">
+                <Label className="text-muted-foreground">{t('keychain.field.label')}</Label>
+                <p className="text-sm">{keyItem.label}</p>
+            </div>
+
+            {keyItem.publicKey && (
+                <div className="space-y-2">
+                    <Label className="text-muted-foreground">{t('keychain.field.publicKey')}</Label>
+                    <div className="flex rounded-lg border border-border/80 bg-card overflow-hidden">
+                        <div className="flex-1 min-w-0 p-3 font-mono text-xs break-all max-h-32 overflow-y-auto">
+                            {keyItem.publicKey}
+                        </div>
+                        <div className="shrink-0 flex flex-col border-l border-border/60 p-1">
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Button
+                                        size="icon"
+                                        variant="ghost"
+                                        className="h-7 w-7"
+                                        onClick={() => void handleCopyPublicKey()}
+                                        aria-label={
+                                            copied
+                                                ? t('cloudSync.githubFlow.copied')
+                                                : t('action.copyPublicKey')
+                                        }
+                                    >
+                                        {copied ? <Check size={12} /> : <Copy size={12} />}
+                                    </Button>
+                                </TooltipTrigger>
+                                <TooltipContent side="left">
+                                    {copied
+                                        ? t('cloudSync.githubFlow.copied')
+                                        : t('action.copyPublicKey')}
+                                </TooltipContent>
+                            </Tooltip>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            <div className="space-y-1">
+                <Label className="text-muted-foreground">{t('field.type')}</Label>
+                <p className="text-sm">{keyItem.type}</p>
+            </div>
+
+            {/* Key Export section */}
+            <div className="pt-4 mt-4 border-t border-border/60">
+                <div className="flex items-center gap-2 mb-3">
+                    <span className="text-sm font-medium">{t('keychain.export.title')}</span>
+                    <div className="h-4 w-4 rounded-full bg-muted flex items-center justify-center">
+                        <Info size={10} className="text-muted-foreground" />
+                    </div>
+                </div>
+                <Button className="w-full h-11" onClick={onExport}>
+                    {t('keychain.export.exportToHost')}
+                </Button>
+            </div>
+        </>
+    );
+};