[Init] Initial commit - NetMesh terminal manager

components/sftp/SftpBreadcrumb.tsx

@@ -0,0 +1,338 @@
+/**
+ * SFTP Breadcrumb navigation component
+ */
+
+import { ChevronDown, ChevronRight, Home, MoreHorizontal } from 'lucide-react';
+import React, { memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useI18n } from '../../application/i18n/I18nProvider';
+import { getSftpBreadcrumbSegments, getSftpPathRoot, isWindowsPath, isWindowsRoot } from '../../application/state/sftp/utils';
+import type { SftpWindowsPathOptions } from '../../application/state/sftp/utils';
+import { Dropdown, DropdownContent, DropdownTrigger } from '../ui/dropdown';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
+import { cn } from '../../lib/utils';
+
+interface SftpBreadcrumbProps {
+    path: string;
+    onNavigate: (path: string) => void;
+    onHome: () => void;
+    /** Maximum number of visible path segments before truncation (default: 4) */
+    maxVisibleParts?: number;
+    isLocal?: boolean;
+    onListDrives?: () => Promise<string[]>;
+    /** When true, treat //host/share as Windows UNC (Windows-style panes). */
+    acceptForwardSlashUnc?: boolean;
+}
+
+type BreadcrumbSegment = ReturnType<typeof getSftpBreadcrumbSegments>['segments'][number];
+
+export type SftpBreadcrumbVisiblePart = {
+    segment: BreadcrumbSegment;
+    originalIndex: number;
+};
+
+/** Clamp the visible-segment budget to a positive integer. */
+export function normalizeSftpBreadcrumbMaxVisibleParts(maxVisibleParts: number): number {
+    if (!Number.isFinite(maxVisibleParts)) return 1;
+    return Math.max(1, Math.floor(maxVisibleParts));
+}
+
+/**
+ * Prefer the path tail when truncating, but always keep the first segment so the
+ * root / drive / UNC share stays clickable. Budget of 1 shows only the first segment.
+ */
+export function resolveSftpBreadcrumbVisibleParts({
+    segments,
+    maxVisibleParts,
+}: {
+    segments: BreadcrumbSegment[];
+    maxVisibleParts: number;
+}): {
+    visibleParts: SftpBreadcrumbVisiblePart[];
+    hiddenParts: SftpBreadcrumbVisiblePart[];
+    needsTruncation: boolean;
+} {
+    const budget = normalizeSftpBreadcrumbMaxVisibleParts(maxVisibleParts);
+    if (segments.length <= budget) {
+        return {
+            visibleParts: segments.map((segment, idx) => ({ segment, originalIndex: idx })),
+            hiddenParts: [],
+            needsTruncation: false,
+        };
+    }
+
+    if (budget === 1) {
+        return {
+            visibleParts: [{ segment: segments[0], originalIndex: 0 }],
+            hiddenParts: segments.slice(1).map((segment, idx) => ({
+                segment,
+                originalIndex: idx + 1,
+            })),
+            needsTruncation: true,
+        };
+    }
+
+    const lastPartsCount = budget - 1;
+    const lastParts = segments.slice(-lastPartsCount).map((segment, idx) => ({
+        segment,
+        originalIndex: segments.length - lastPartsCount + idx,
+    }));
+    const hiddenParts = segments.slice(1, -lastPartsCount).map((segment, idx) => ({
+        segment,
+        originalIndex: idx + 1,
+    }));
+
+    return {
+        visibleParts: [{ segment: segments[0], originalIndex: 0 }, ...lastParts],
+        hiddenParts,
+        needsTruncation: true,
+    };
+}
+
+/** Split pinned leading chrome from the scrollable trailing chips. */
+export function splitSftpBreadcrumbPinnedParts(visibleParts: SftpBreadcrumbVisiblePart[]): {
+    leadingPart: SftpBreadcrumbVisiblePart | null;
+    trailingParts: SftpBreadcrumbVisiblePart[];
+} {
+    if (visibleParts.length === 0) {
+        return { leadingPart: null, trailingParts: [] };
+    }
+    return {
+        leadingPart: visibleParts[0],
+        trailingParts: visibleParts.slice(1),
+    };
+}
+
+/** True when truncated middle segments need an ellipsis affordance. */
+export function shouldShowSftpBreadcrumbEllipsis({
+    needsTruncation,
+    hiddenPartsCount,
+}: {
+    needsTruncation: boolean;
+    hiddenPartsCount: number;
+}): boolean {
+    return needsTruncation && hiddenPartsCount > 0;
+}
+
+/** Scroll a breadcrumb viewport so overflow keeps the trailing path visible. */
+export function scrollSftpBreadcrumbViewportToTail(viewport: HTMLElement | null): void {
+    if (!viewport) return;
+    viewport.scrollLeft = Math.max(0, viewport.scrollWidth - viewport.clientWidth);
+}
+
+const SftpBreadcrumbInner: React.FC<SftpBreadcrumbProps> = ({
+    path,
+    onNavigate,
+    onHome,
+    maxVisibleParts = 4,
+    isLocal,
+    onListDrives,
+    acceptForwardSlashUnc = false,
+}) => {
+    const { t } = useI18n();
+
+    const [drives, setDrives] = useState<string[]>([]);
+    const [driveDropdownOpen, setDriveDropdownOpen] = useState(false);
+    const viewportRef = useRef<HTMLDivElement>(null);
+    const trackRef = useRef<HTMLDivElement>(null);
+
+    const handleDriveDropdownOpen = useCallback(async (open: boolean) => {
+        setDriveDropdownOpen(open);
+        if (open && onListDrives) {
+            const result = await onListDrives();
+            setDrives(result);
+        }
+    }, [onListDrives]);
+
+    const pathOptions = useMemo<SftpWindowsPathOptions>(
+        () => ({ acceptForwardSlashUnc }),
+        [acceptForwardSlashUnc],
+    );
+
+    const { segments, isWindowsDrive } = useMemo(
+        () => getSftpBreadcrumbSegments(path, pathOptions),
+        [path, pathOptions],
+    );
+
+    const { visibleParts, hiddenParts, needsTruncation } = useMemo(
+        () =>
+            resolveSftpBreadcrumbVisibleParts({
+                segments,
+                maxVisibleParts,
+            }),
+        [segments, maxVisibleParts],
+    );
+
+    const { leadingPart, trailingParts } = useMemo(
+        () => splitSftpBreadcrumbPinnedParts(visibleParts),
+        [visibleParts],
+    );
+
+    const showEllipsis = shouldShowSftpBreadcrumbEllipsis({
+        needsTruncation,
+        hiddenPartsCount: hiddenParts.length,
+    });
+
+    const syncTailScroll = useCallback(() => {
+        scrollSftpBreadcrumbViewportToTail(viewportRef.current);
+    }, []);
+
+    useLayoutEffect(() => {
+        syncTailScroll();
+        const viewport = viewportRef.current;
+        if (!viewport || typeof ResizeObserver === 'undefined') return;
+        const ro = new ResizeObserver(() => syncTailScroll());
+        ro.observe(viewport);
+        const track = trackRef.current;
+        if (track) ro.observe(track);
+        return () => ro.disconnect();
+    }, [syncTailScroll, path, trailingParts, showEllipsis]);
+
+    const showDriveDropdown = isWindowsDrive && isLocal && !!onListDrives;
+
+    // Dedicated "go to filesystem root" target: "/" on POSIX, drive / share root on Windows.
+    const rootPath = useMemo(
+        () => getSftpPathRoot(path, pathOptions),
+        [path, pathOptions],
+    );
+    const atRoot = useMemo(() => {
+        if (rootPath === null) return false;
+        return isWindowsPath(path, pathOptions)
+            ? isWindowsRoot(path, pathOptions)
+            : path === rootPath;
+    }, [path, pathOptions, rootPath]);
+
+    const renderSegmentButton = (
+        part: SftpBreadcrumbVisiblePart,
+        { showTrailingChevron }: { showTrailingChevron: boolean },
+    ) => {
+        const { segment, originalIndex } = part;
+        const isLast = originalIndex === segments.length - 1;
+        const node = originalIndex === 0 && showDriveDropdown ? (
+            <Dropdown open={driveDropdownOpen} onOpenChange={handleDriveDropdownOpen}>
+                <DropdownTrigger asChild>
+                    <button className="hover:text-foreground px-1 py-0.5 rounded hover:bg-secondary/60 shrink-0 flex items-center gap-0.5">
+                        {segment.label}
+                        <ChevronDown size={10} className="opacity-60" />
+                    </button>
+                </DropdownTrigger>
+                <DropdownContent align="start" className="w-16 p-1">
+                    {drives.map(drive => (
+                        <button
+                            key={drive}
+                            onClick={() => { onNavigate(drive + '\\'); setDriveDropdownOpen(false); }}
+                            className={cn(
+                                "w-full text-left px-2 py-1 text-xs rounded hover:bg-secondary/60",
+                                drive === segment.label && "bg-secondary font-medium"
+                            )}
+                        >
+                            {drive}
+                        </button>
+                    ))}
+                </DropdownContent>
+            </Dropdown>
+        ) : (
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <button
+                        onClick={() => onNavigate(segment.path)}
+                        className={cn(
+                            "hover:text-foreground px-1 py-0.5 rounded hover:bg-secondary/60 truncate max-w-[160px] shrink-0",
+                            isLast && "text-foreground font-medium"
+                        )}
+                    >
+                        {segment.label}
+                    </button>
+                </TooltipTrigger>
+                <TooltipContent>{segment.label}</TooltipContent>
+            </Tooltip>
+        );
+
+        return (
+            <React.Fragment key={segment.path}>
+                {node}
+                {showTrailingChevron && <ChevronRight size={12} className="opacity-40 shrink-0" />}
+            </React.Fragment>
+        );
+    };
+
+    // Pin Home + leading root + ellipsis outside the scrollport so narrow panes
+    // can still navigate prefixes while the trailing chips scroll toward the end.
+    return (
+        <Tooltip>
+            <TooltipTrigger asChild>
+                <div className="flex w-full min-w-0 items-center gap-1 text-xs text-muted-foreground cursor-default">
+                    <div className="flex items-center gap-1 shrink-0">
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <button
+                                    onClick={onHome}
+                                    className="hover:text-foreground p-1 rounded hover:bg-secondary/60 shrink-0"
+                                >
+                                    <Home size={12} />
+                                </button>
+                            </TooltipTrigger>
+                            <TooltipContent>{t("sftp.goHome")}</TooltipContent>
+                        </Tooltip>
+                        {rootPath && (
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <button
+                                        onClick={() => onNavigate(rootPath)}
+                                        disabled={atRoot}
+                                        className="hover:text-foreground p-1 rounded hover:bg-secondary/60 shrink-0 text-[10px] leading-none font-semibold disabled:pointer-events-none disabled:opacity-40"
+                                    >
+                                        /
+                                    </button>
+                                </TooltipTrigger>
+                                <TooltipContent>{t("sftp.goRoot")}</TooltipContent>
+                            </Tooltip>
+                        )}
+                        <ChevronRight size={12} className="opacity-40 shrink-0" />
+                        {leadingPart && renderSegmentButton(leadingPart, {
+                            showTrailingChevron: showEllipsis || trailingParts.length > 0,
+                        })}
+                        {showEllipsis && (
+                            <>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <span className="px-1 py-0.5 shrink-0 flex items-center text-muted-foreground cursor-default">
+                                            <MoreHorizontal size={14} />
+                                        </span>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        {`${t("sftp.showHiddenPaths")}: ${hiddenParts.map(h => h.segment.label).join(' > ')}`}
+                                    </TooltipContent>
+                                </Tooltip>
+                                {trailingParts.length > 0 && (
+                                    <ChevronRight size={12} className="opacity-40 shrink-0" />
+                                )}
+                            </>
+                        )}
+                    </div>
+
+                    {trailingParts.length > 0 && (
+                        <div
+                            ref={viewportRef}
+                            className="min-w-0 flex-1 overflow-hidden"
+                        >
+                            <div
+                                ref={trackRef}
+                                className="flex w-max max-w-none items-center gap-1"
+                            >
+                                {trailingParts.map((part, idx) =>
+                                    renderSegmentButton(part, {
+                                        showTrailingChevron: idx < trailingParts.length - 1,
+                                    }),
+                                )}
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </TooltipTrigger>
+            <TooltipContent>{path}</TooltipContent>
+        </Tooltip>
+    );
+};
+
+export const SftpBreadcrumb = memo(SftpBreadcrumbInner);
+SftpBreadcrumb.displayName = 'SftpBreadcrumb';