[Init] Initial commit - NetMesh terminal manager

components/sftp/SftpTabBar.tsx

@@ -0,0 +1,518 @@
+/**
+ * SFTP Tab Bar Component
+ *
+ * A tab bar for managing multiple SFTP connections in a single pane.
+ * Features:
+ * - Tab items with close button
+ * - Add button (+) to open HostSelectModal
+ * - Scrollable when many tabs are open
+ * - Drag-and-drop reordering of tabs
+ */
+
+import { Copy, HardDrive, Monitor, Plus, X } from "lucide-react";
+import React, {
+  memo,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { useI18n } from "../../application/i18n/I18nProvider";
+import { logger } from "../../lib/logger";
+import { handleTabMiddleClickClose, handleTabMiddleMouseDown } from "../../lib/tabInteractions";
+import { useRenderTracker } from "../../lib/useRenderTracker";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+import { cn } from "../../lib/utils";
+import { useActiveTabId } from "./SftpContext";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "../ui/context-menu";
+import {
+  canDuplicateSftpTab,
+  isSftpTabKeyboardContextMenuShortcut,
+  isSftpTabKeyboardSelectShortcut,
+  shouldHandleSftpTabKeyboardEvent,
+  SFTP_TAB_DUPLICATE_MENU_ITEMS,
+  type SftpTabDuplicateMode,
+} from "./sftpTabDuplication";
+
+export interface SftpTab {
+  id: string;
+  label: string;
+  isLocal: boolean;
+  hostId: string | null;
+  canDuplicate?: boolean;
+}
+
+interface SftpTabBarProps {
+  tabs: SftpTab[];
+  side: "left" | "right";
+  onSelectTab: (tabId: string) => void;
+  onCloseTab: (tabId: string) => void;
+  onAddTab: () => void;
+  onReorderTabs: (
+    draggedId: string,
+    targetId: string,
+    position: "before" | "after",
+  ) => void;
+  /** Called when a tab is dragged to the other side */
+  onMoveTabToOtherSide?: (tabId: string) => void;
+  onDuplicateTab?: (
+    tabId: string,
+    mode: SftpTabDuplicateMode,
+  ) => void | Promise<void>;
+}
+
+const SftpTabBarInner: React.FC<SftpTabBarProps> = ({
+  tabs,
+  side,
+  onSelectTab,
+  onCloseTab,
+  onAddTab,
+  onReorderTabs,
+  onMoveTabToOtherSide,
+  onDuplicateTab,
+}) => {
+  // Subscribe to activeTabId from store (isolated subscription)
+  const activeTabId = useActiveTabId(side);
+
+  // 渲染追踪 - 追踪所有 props 包括回调函数
+  useRenderTracker(`SftpTabBar[${side}]`, {
+    side,
+    tabsCount: tabs.length,
+    activeTabId,
+    // 追踪回调函数引用是否变化
+    onSelectTab,
+    onCloseTab,
+    onAddTab,
+    onReorderTabs,
+    onMoveTabToOtherSide,
+  });
+
+  const { t } = useI18n();
+
+  // Refs for scrollable tab container
+  const tabsContainerRef = useRef<HTMLDivElement>(null);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+
+  // Drag state
+  const [dropIndicator, setDropIndicator] = useState<{
+    tabId: string;
+    position: "before" | "after";
+  } | null>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const [isCrossPaneDragOver, setIsCrossPaneDragOver] = useState(false);
+  const draggedTabIdRef = useRef<string | null>(null);
+
+  // Global dragend listener to ensure state is reset even if the dragged element is removed
+  useEffect(() => {
+    const handleGlobalDragEnd = () => {
+      if (draggedTabIdRef.current) {
+        draggedTabIdRef.current = null;
+        setDropIndicator(null);
+        setIsDragging(false);
+        setIsCrossPaneDragOver(false);
+      }
+    };
+
+    document.addEventListener("dragend", handleGlobalDragEnd);
+    return () => document.removeEventListener("dragend", handleGlobalDragEnd);
+  }, []);
+
+  // Check scroll state
+  const updateScrollState = useCallback(() => {
+    const container = tabsContainerRef.current;
+    if (container) {
+      setCanScrollLeft(container.scrollLeft > 0);
+      setCanScrollRight(
+        container.scrollLeft < container.scrollWidth - container.clientWidth - 1,
+      );
+    }
+  }, []);
+
+  // Update scroll state on mount and resize
+  useEffect(() => {
+    updateScrollState();
+    const container = tabsContainerRef.current;
+    if (container) {
+      container.addEventListener("scroll", updateScrollState);
+      const resizeObserver = new ResizeObserver(updateScrollState);
+      resizeObserver.observe(container);
+      return () => {
+        container.removeEventListener("scroll", updateScrollState);
+        resizeObserver.disconnect();
+      };
+    }
+  }, [updateScrollState, tabs]);
+
+  // Scroll to active tab when it changes
+  useLayoutEffect(() => {
+    if (!activeTabId) return;
+    const container = tabsContainerRef.current;
+    if (!container) return;
+
+    const activeTabElement = container.querySelector(
+      `[data-tab-id="${activeTabId}"]`,
+    ) as HTMLElement | null;
+    if (activeTabElement) {
+      const containerRect = container.getBoundingClientRect();
+      const tabRect = activeTabElement.getBoundingClientRect();
+
+      if (tabRect.left < containerRect.left) {
+        container.scrollLeft -= containerRect.left - tabRect.left + 8;
+      } else if (tabRect.right > containerRect.right) {
+        container.scrollLeft += tabRect.right - containerRect.right + 8;
+      }
+    }
+    const timer = setTimeout(updateScrollState, 100);
+    return () => clearTimeout(timer);
+  }, [activeTabId, updateScrollState]);
+
+  // Drag handlers
+  const handleTabDragStart = useCallback(
+    (e: React.DragEvent, tabId: string) => {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("sftp-tab-id", tabId);
+      e.dataTransfer.setData("sftp-tab-side", side);
+      draggedTabIdRef.current = tabId;
+      setTimeout(() => {
+        setIsDragging(true);
+      }, 0);
+    },
+    [side],
+  );
+
+  const handleTabDragEnd = useCallback(() => {
+    draggedTabIdRef.current = null;
+    setDropIndicator(null);
+    setIsDragging(false);
+  }, []);
+
+  const handleTabDragOver = useCallback(
+    (e: React.DragEvent, tabId: string) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+
+      if (!draggedTabIdRef.current || draggedTabIdRef.current === tabId) {
+        return;
+      }
+
+      const rect = e.currentTarget.getBoundingClientRect();
+      const midpoint = rect.left + rect.width / 2;
+      const position: "before" | "after" =
+        e.clientX < midpoint ? "before" : "after";
+
+      setDropIndicator({ tabId, position });
+    },
+    [],
+  );
+
+  const handleTabDrop = useCallback(
+    (e: React.DragEvent, targetTabId: string) => {
+      e.preventDefault();
+      const draggedId =
+        e.dataTransfer.getData("sftp-tab-id") || draggedTabIdRef.current;
+
+      if (draggedId && draggedId !== targetTabId && dropIndicator) {
+        onReorderTabs(draggedId, targetTabId, dropIndicator.position);
+      }
+
+      setDropIndicator(null);
+      setIsDragging(false);
+    },
+    [dropIndicator, onReorderTabs],
+  );
+
+  const handleCloseTab = useCallback(
+    (e: React.MouseEvent, tabId: string) => {
+      e.stopPropagation();
+      onCloseTab(tabId);
+    },
+    [onCloseTab],
+  );
+
+  const handleSelectTabClick = useCallback(
+    (e: React.MouseEvent, tabId: string) => {
+      e.stopPropagation();
+      onSelectTab(tabId);
+    },
+    [onSelectTab],
+  );
+
+  const handleAddTabClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onAddTab();
+    },
+    [onAddTab],
+  );
+
+  const handleTabKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>, tabId: string) => {
+      if (!shouldHandleSftpTabKeyboardEvent(e.target, e.currentTarget)) {
+        return;
+      }
+
+      if (isSftpTabKeyboardSelectShortcut(e.key)) {
+        e.preventDefault();
+        onSelectTab(tabId);
+        return;
+      }
+
+      if (isSftpTabKeyboardContextMenuShortcut(e.key, e.shiftKey)) {
+        e.preventDefault();
+        const rect = e.currentTarget.getBoundingClientRect();
+        e.currentTarget.dispatchEvent(
+          new MouseEvent("contextmenu", {
+            bubbles: true,
+            cancelable: true,
+            button: 2,
+            clientX: rect.left + Math.min(rect.width / 2, 24),
+            clientY: rect.bottom,
+          }),
+        );
+      }
+    },
+    [onSelectTab],
+  );
+
+  // Cross-pane drag handlers
+  const handleCrossPaneDragOver = useCallback(
+    (e: React.DragEvent) => {
+      const draggedFromSide = e.dataTransfer.types.includes("sftp-tab-side");
+      if (!draggedFromSide) return;
+
+      // Check if this is from the other side (we can't read the data during dragover due to browser security)
+      // We'll set the indicator and validate on drop
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      setIsCrossPaneDragOver(true);
+    },
+    [],
+  );
+
+  const handleCrossPaneDragLeave = useCallback(() => {
+    setIsCrossPaneDragOver(false);
+  }, []);
+
+  const handleCrossPaneDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsCrossPaneDragOver(false);
+
+      const draggedId = e.dataTransfer.getData("sftp-tab-id");
+      const draggedFromSide = e.dataTransfer.getData("sftp-tab-side");
+
+      // Only accept drops from the other side
+      if (draggedId && draggedFromSide && draggedFromSide !== side && onMoveTabToOtherSide) {
+        logger.info("[SftpTabBar] Cross-pane drop", {
+          tabId: draggedId,
+          fromSide: draggedFromSide,
+          toSide: side,
+        });
+        onMoveTabToOtherSide(draggedId);
+      }
+
+      // Always reset drag state on drop
+      draggedTabIdRef.current = null;
+      setDropIndicator(null);
+      setIsDragging(false);
+    },
+    [side, onMoveTabToOtherSide],
+  );
+
+  return (
+    <div
+      className={cn(
+        "flex items-stretch h-8 bg-secondary/30 border-b border-border/40 transition-colors",
+        isCrossPaneDragOver && "bg-primary/10 ring-1 ring-inset ring-primary/40",
+      )}
+      onDragOver={handleCrossPaneDragOver}
+      onDragLeave={handleCrossPaneDragLeave}
+      onDrop={handleCrossPaneDrop}
+    >
+      {/* Scrollable tabs container */}
+      <div className="relative flex-1 min-w-0 flex">
+        {/* Left fade mask */}
+        {canScrollLeft && (
+          <div
+            className="absolute left-0 top-0 bottom-0 w-6 pointer-events-none z-10"
+            style={{
+              background:
+                "linear-gradient(to right, hsl(var(--secondary) / 0.9), transparent)",
+            }}
+          />
+        )}
+
+        <div
+          ref={tabsContainerRef}
+          className="flex items-stretch overflow-x-auto scrollbar-none max-w-full"
+          style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+        >
+          {tabs.map((tab) => {
+            const isActive = activeTabId === tab.id;
+            const canDuplicateTab = canDuplicateSftpTab(tab, !!onDuplicateTab);
+            const isBeingDragged =
+              isDragging && draggedTabIdRef.current === tab.id;
+            const showDropIndicatorBefore =
+              dropIndicator?.tabId === tab.id &&
+              dropIndicator.position === "before";
+            const showDropIndicatorAfter =
+              dropIndicator?.tabId === tab.id &&
+              dropIndicator.position === "after";
+
+            return (
+              <ContextMenu key={tab.id}>
+                <ContextMenuTrigger asChild>
+                  <div
+                    data-tab-id={tab.id}
+                    data-tab-type="sftp"
+                    data-state={isActive ? 'active' : 'inactive'}
+                    tabIndex={0}
+                    aria-haspopup="menu"
+                    aria-label={tab.label}
+                    onClick={(e) => handleSelectTabClick(e, tab.id)}
+                    onKeyDown={(e) => handleTabKeyDown(e, tab.id)}
+                    onMouseDown={handleTabMiddleMouseDown}
+                    onAuxClick={(e) => handleTabMiddleClickClose(e, () => onCloseTab(tab.id))}
+                    draggable
+                    onDragStart={(e) => handleTabDragStart(e, tab.id)}
+                    onDragEnd={handleTabDragEnd}
+                    onDragOver={(e) => handleTabDragOver(e, tab.id)}
+                    onDrop={(e) => handleTabDrop(e, tab.id)}
+                    className={cn(
+                      "netcatty-tab relative px-3 min-w-[100px] max-w-[180px] text-xs font-medium cursor-pointer flex items-center justify-between gap-2 flex-shrink-0 border-r border-border/40",
+                      "transition-[color,opacity,transform] duration-100 ease-out focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary/50 focus-visible:ring-inset",
+                      isActive
+                        ? "text-foreground border-b-2"
+                        : "text-muted-foreground hover:text-foreground",
+                      isBeingDragged && "opacity-50",
+                    )}
+                    style={
+                      isActive
+                        ? { borderBottomColor: "hsl(var(--accent))" }
+                        : undefined
+                    }
+                  >
+                    {/* Drop indicator line - before */}
+                    {showDropIndicatorBefore && isDragging && (
+                      <div className="absolute left-0 top-1 bottom-1 w-0.5 bg-primary shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                    )}
+                    {/* Drop indicator line - after */}
+                    {showDropIndicatorAfter && isDragging && (
+                      <div className="absolute right-0 top-1 bottom-1 w-0.5 bg-primary shadow-[0_0_8px_2px] shadow-primary/50 animate-pulse" />
+                    )}
+
+                    <div className="flex items-center gap-1.5 min-w-0 flex-1">
+                      {tab.isLocal ? (
+                        <Monitor
+                          size={12}
+                          className={cn(
+                            "shrink-0",
+                            isActive ? "text-primary" : "text-muted-foreground",
+                          )}
+                        />
+                      ) : (
+                        <HardDrive
+                          size={12}
+                          className={cn(
+                            "shrink-0",
+                            isActive ? "text-primary" : "text-muted-foreground",
+                          )}
+                        />
+                      )}
+                      <span className="truncate">{tab.label}</span>
+                    </div>
+
+                    <button
+                      onClick={(e) => handleCloseTab(e, tab.id)}
+                      className="p-0.5 hover:bg-destructive/10 hover:text-destructive transition-colors shrink-0"
+                      aria-label={t("common.close")}
+                    >
+                      <X size={12} />
+                    </button>
+                  </div>
+                </ContextMenuTrigger>
+                <ContextMenuContent>
+                  {SFTP_TAB_DUPLICATE_MENU_ITEMS.map((item) => (
+                    <ContextMenuItem
+                      key={item.mode}
+                      disabled={!canDuplicateTab}
+                      onClick={() => {
+                        void onDuplicateTab?.(tab.id, item.mode);
+                      }}
+                    >
+                      <Copy size={14} className="mr-2" />
+                      {t(item.labelKey)}
+                    </ContextMenuItem>
+                  ))}
+                </ContextMenuContent>
+              </ContextMenu>
+            );
+          })}
+        </div>
+
+        {/* Right fade mask */}
+        {canScrollRight && (
+          <div
+            className="absolute right-0 top-0 bottom-0 w-6 pointer-events-none z-10"
+            style={{
+              background:
+                "linear-gradient(to left, hsl(var(--secondary) / 0.9), transparent)",
+            }}
+          />
+        )}
+      </div>
+
+      {/* Add tab button */}
+      <Tooltip>
+        <TooltipTrigger asChild>
+          <button
+            className="px-2 flex items-center justify-center text-muted-foreground hover:text-foreground hover:bg-[linear-gradient(135deg,_hsl(var(--accent)_/_0.18),_hsl(var(--primary)_/_0.18))] transition-all duration-150 border-l border-border/40 cursor-pointer"
+            onClick={handleAddTabClick}
+          >
+            <Plus size={14} />
+          </button>
+        </TooltipTrigger>
+        <TooltipContent>{t("sftp.tabs.addTab")}</TooltipContent>
+      </Tooltip>
+    </div>
+  );
+};
+
+// Custom comparison - only re-render when data props change, ignore callback refs
+// Note: activeTabId is now subscribed internally, not passed as prop
+const sftpTabBarAreEqual = (
+  prev: SftpTabBarProps,
+  next: SftpTabBarProps,
+): boolean => {
+  // Compare data props only
+  if (prev.side !== next.side) return false;
+  if (prev.tabs.length !== next.tabs.length) return false;
+
+  // Deep compare tabs array
+  for (let i = 0; i < prev.tabs.length; i++) {
+    const prevTab = prev.tabs[i];
+    const nextTab = next.tabs[i];
+    if (
+      prevTab.id !== nextTab.id ||
+      prevTab.label !== nextTab.label ||
+      prevTab.isLocal !== nextTab.isLocal ||
+      prevTab.hostId !== nextTab.hostId ||
+      prevTab.canDuplicate !== nextTab.canDuplicate
+    ) {
+      return false;
+    }
+  }
+
+  // Ignore callback function refs - they may change but behavior is stable
+  return true;
+};
+
+export const SftpTabBar = memo(SftpTabBarInner, sftpTabBarAreEqual);
+SftpTabBar.displayName = "SftpTabBar";