[Init] Initial commit - NetMesh terminal manager

components/terminal/ZmodemProgressIndicator.tsx

@@ -0,0 +1,100 @@
+import { ArrowDownToLine, ArrowUpFromLine, X } from 'lucide-react';
+import React from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+
+interface ZmodemProgressIndicatorProps {
+  transferType: 'upload' | 'download' | null;
+  filename: string | null;
+  transferred: number;
+  total: number;
+  fileIndex: number;
+  fileCount: number;
+  finalizing: boolean;
+  bytesPerSecond: number | null;
+  onCancel: () => void;
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes <= 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.min(Math.floor(Math.log(bytes) / Math.log(k)), sizes.length - 1);
+  return `${(bytes / Math.pow(k, i)).toFixed(1)} ${sizes[i]}`;
+}
+
+function formatSpeed(bytesPerSecond: number | null): string | null {
+  if (!bytesPerSecond || bytesPerSecond <= 0) return null;
+  return `${formatBytes(bytesPerSecond)}/s`;
+}
+
+export const ZmodemProgressIndicator: React.FC<ZmodemProgressIndicatorProps> = ({
+  transferType,
+  filename,
+  transferred,
+  total,
+  fileIndex,
+  fileCount,
+  finalizing,
+  bytesPerSecond,
+  onCancel,
+}) => {
+  const { t } = useI18n();
+  const percent = total > 0 ? Math.min(100, Math.round((transferred / total) * 100)) : 0;
+  const Icon = transferType === 'upload' ? ArrowUpFromLine : ArrowDownToLine;
+  const label = finalizing
+    ? t('zmodem.waitingForRemote')
+    : transferType === 'upload'
+      ? t('zmodem.uploading')
+      : t('zmodem.downloading');
+  const fileInfo = fileCount > 0 ? ` (${fileIndex + 1}/${fileCount})` : '';
+  const speed = formatSpeed(bytesPerSecond);
+
+  return (
+    <div
+      className="flex items-center gap-2.5 px-3 py-2 rounded-lg shadow-lg backdrop-blur-sm min-w-[240px] max-w-[360px]"
+      style={{
+        backgroundColor: 'color-mix(in srgb, var(--terminal-ui-bg, #000000) 90%, transparent)',
+        border: '1px solid color-mix(in srgb, var(--terminal-ui-fg, #ffffff) 15%, var(--terminal-ui-bg, #000000))',
+        color: 'var(--terminal-ui-fg, #ffffff)',
+      }}
+      onClick={(e) => e.stopPropagation()}
+      onMouseDown={(e) => e.stopPropagation()}
+    >
+      <Icon className="h-4 w-4 flex-shrink-0 opacity-60" />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-center justify-between gap-2 mb-1">
+          <span className="text-xs font-medium truncate">
+            {filename || label}{fileInfo}
+          </span>
+          <span className="text-[10px] opacity-60 flex-shrink-0">{percent}%</span>
+        </div>
+        <div className="w-full h-1 rounded-full overflow-hidden" style={{ backgroundColor: 'color-mix(in srgb, var(--terminal-ui-fg, #ffffff) 10%, transparent)' }}>
+          <div
+            className="h-full rounded-full transition-all duration-150"
+            style={{
+              width: `${percent}%`,
+              backgroundColor: transferType === 'upload' ? '#3b82f6' : '#22c55e',
+            }}
+          />
+        </div>
+        <div className="text-[10px] opacity-50 mt-0.5">
+          {finalizing
+            ? label
+            : `${formatBytes(transferred)} / ${formatBytes(total)}${speed ? ` · ${speed}` : ''}`}
+        </div>
+      </div>
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            onClick={onCancel}
+            className="flex-shrink-0 p-1 rounded transition-colors hover:bg-white/10"
+          >
+            <X className="h-3.5 w-3.5 opacity-60" />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>{t('zmodem.cancelTransfer')}</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};