@anymux/ui-kit 0.1.0

package/src/file-browser/components/DeleteConfirmDialog.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+} from '@anymux/ui/components/alert-dialog';
+import { Button } from '@anymux/ui/components/button';
+
+interface DeleteConfirmDialogProps {
+  targets: Array<{ path: string; isDirectory: boolean; name: string }>;
+  onConfirm: () => void;
+  onCancel: () => void;
+}
+
+export const DeleteConfirmDialog: React.FC<DeleteConfirmDialogProps> = ({
+  targets,
+  onConfirm,
+  onCancel,
+}) => {
+  return (
+    <AlertDialog open onOpenChange={(open) => { if (!open) onCancel(); }}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            Delete {targets.length === 1 ? `"${targets[0]?.name}"` : `${targets.length} items`}?
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            {targets.length === 1 ? (
+              <>This will permanently delete <strong>{targets[0]?.name}</strong>.</>
+            ) : (
+              <span>
+                This will permanently delete the following items:
+                <ul className="mt-2 list-disc list-inside text-sm">
+                  {targets.map((t) => (
+                    <li key={t.path}>{t.name}</li>
+                  ))}
+                </ul>
+              </span>
+            )}
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <Button
+            variant="destructive"
+            onClick={onConfirm}
+          >
+            Delete
+          </Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};

package/src/file-browser/components/FileBrowser.tsx

@@ -0,0 +1,473 @@
+import React, { useState, useEffect, useCallback, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import { cn } from '../../lib/utils';
+import { Badge } from '@anymux/ui/components/badge';
+import { Button } from '@anymux/ui/components/button';
+import { PathBreadcrumb } from '@anymux/ui/components/path-breadcrumb';
+import { ArrowUp, RotateCw, FolderTree, Files, X, ChevronLeft, ChevronRight, Upload, Loader2, PanelRightOpen, PanelRightClose, CheckSquare } from 'lucide-react';
+import { BrowserError } from '@anymux/ui/components/browser-error';
+import { Tree } from '../../tree';
+import { ListItems, ViewTypeSelector, SearchFilter } from '../../list';
+import { ExplorerLayout } from '../../layout/components/ExplorerLayout/ExplorerLayout';
+import { FileBrowserModel } from '../models/FileBrowserModel';
+import type { IFileSystem } from '@anymux/file-system';
+import { registerDefaultViewers } from '../viewers';
+import { globalViewerRegistry } from '../registry/ViewerRegistry';
+import { DeleteConfirmDialog } from './DeleteConfirmDialog';
+import { CreateItemDialog } from './CreateItemDialog';
+import { UploadProgress } from './UploadProgress';
+import { PreviewPane } from './PreviewPane';
+import { ViewerHost } from './ViewerHost';
+import { FileBrowserContext } from '../context/FileBrowserContext';
+
+export interface FileBrowserProps {
+  fileSystem: IFileSystem;
+  initialPath?: string;
+  className?: string;
+  showBreadcrumbs?: boolean;
+  showNavigation?: boolean;
+  onError?: (error: { message: string }) => void;
+  onPathChange?: (path: string) => void;
+  onNotify?: (type: 'success' | 'error' | 'warning', message: string) => void;
+  /** Structured action callback with undo support (preferred over onNotify for success actions) */
+  onAction?: (action: { type: 'create' | 'rename' | 'delete' | 'upload'; message: string; undo?: () => Promise<void> }) => void;
+}
+
+export const FileBrowser: React.FC<FileBrowserProps> = observer(({
+  fileSystem,
+  initialPath = '/',
+  className,
+  showBreadcrumbs = true,
+  showNavigation = true,
+  onError,
+  onPathChange,
+  onNotify,
+  onAction,
+}) => {
+  const [model] = useState(() => new FileBrowserModel(fileSystem));
+
+  // Propagate errors to parent (e.g., auth errors for reconnect UI)
+  useEffect(() => {
+    if (model.error && onError) {
+      onError({ message: model.error });
+    }
+  }, [model.error, onError]);
+
+  // Wire callbacks into model (called directly from navigation/operation methods)
+  model.onPathChange = onPathChange;
+  model.onNotify = onNotify;
+  model.onAction = onAction;
+
+  // Native file drop support (drag files from OS into browser)
+  const [isDragOver, setIsDragOver] = useState(false);
+  const dragCounterRef = useRef(0);
+
+  const handleNativeDragOver = useCallback((e: React.DragEvent) => {
+    // Only handle native file drops, not internal DnD
+    if (e.dataTransfer.types.includes('Files')) {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = 'copy';
+    }
+  }, []);
+
+  const handleNativeDragEnter = useCallback((e: React.DragEvent) => {
+    if (e.dataTransfer.types.includes('Files')) {
+      e.preventDefault();
+      dragCounterRef.current++;
+      setIsDragOver(true);
+    }
+  }, []);
+
+  const handleNativeDragLeave = useCallback((e: React.DragEvent) => {
+    dragCounterRef.current--;
+    if (dragCounterRef.current <= 0) {
+      dragCounterRef.current = 0;
+      setIsDragOver(false);
+    }
+  }, []);
+
+  const handleNativeDrop = useCallback(async (e: React.DragEvent) => {
+    e.preventDefault();
+    dragCounterRef.current = 0;
+    setIsDragOver(false);
+
+    const files = e.dataTransfer.files;
+    if (!files || files.length === 0) return;
+
+    // Delegate to the upload model for progress tracking
+    model.uploadFiles(files);
+  }, [model]);
+
+  const isInitialMount = useRef(true);
+  useEffect(() => {
+    // On initial mount, always load. On subsequent renders, only navigate if path changed.
+    if (!isInitialMount.current && initialPath === model.currentPath) return;
+    isInitialMount.current = false;
+    model.setInitialPath(initialPath);
+  }, [initialPath, model]);
+
+  useEffect(() => {
+    registerDefaultViewers();
+  }, []);
+
+  // Keyboard navigation for viewer (left/right arrows, Escape)
+  useEffect(() => {
+    if (!model.openFile) return;
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') { model.closeFileViewer(); return; }
+      if (e.key === 'ArrowRight') { model.navigateToNextFile(); return; }
+      if (e.key === 'ArrowLeft') { model.navigateToPrevFile(); return; }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [model, model.openFile]);
+
+  const handleBreadcrumbClick = (path: string) => {
+    model.navigateToPath(path);
+  };
+
+  // Show loading overlay while file is being read from remote
+  if (model.isLoadingFile && !model.openFile) {
+    return (
+      <div className={cn("h-full w-full flex items-center justify-center bg-background", className)}>
+        <div className="flex flex-col items-center gap-2 text-muted-foreground">
+          <Loader2 className="w-6 h-6 animate-spin" />
+          <p className="text-sm">Loading file...</p>
+        </div>
+      </div>
+    );
+  }
+
+  // If a file is open, show the inline ACDSee-style viewer via ViewerHost
+  if (model.openFile) {
+    const files = model.viewableFiles;
+    const idx = model.currentFileIndex;
+
+    // Resolve viewer from registry using the new plugin API
+    const fileCtx = globalViewerRegistry.buildFileMatchContext(
+      model.openFile.name,
+      {
+        path: model.openFile.path,
+        mimeType: model.openFile.mimeType,
+        size: model.openFile.size,
+      }
+    );
+    const resolvedViewer = globalViewerRegistry.resolveViewer(fileCtx);
+
+    // Fallback: use the legacy viewer from openFile state if no plugin match
+    const viewer = resolvedViewer ?? {
+      plugin: {
+        id: model.openFile.viewer.id,
+        name: model.openFile.viewer.name,
+        capabilities: { canPreview: true, canFullscreen: true },
+        component: model.openFile.viewer.component,
+      },
+      Component: model.openFile.viewer.component,
+      confidence: 0,
+    };
+
+    // Host-level toolbar: close button, file name, prev/next navigation
+    const hostToolbar = (
+      <>
+        {files.length > 1 && (
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => model.navigateToPrevFile()}
+              disabled={!model.canNavigatePrev}
+              title="Previous file (left arrow)"
+            >
+              <ChevronLeft className="w-4 h-4" />
+            </Button>
+            <span className="text-xs text-muted-foreground min-w-[4rem] text-center">
+              {idx + 1} / {files.length}
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => model.navigateToNextFile()}
+              disabled={!model.canNavigateNext}
+              title="Next file (right arrow)"
+            >
+              <ChevronRight className="w-4 h-4" />
+            </Button>
+          </>
+        )}
+      </>
+    );
+
+    return (
+      <FileBrowserContext.Provider value={{
+        renameState: null,
+        onRenameCommit: () => {},
+        onRenameCancel: () => {},
+      }}>
+        <div className={cn("h-full w-full flex flex-col bg-background", className)}>
+          {/* Host-level toolbar with close/file info */}
+          <div className="flex items-center justify-between px-2 sm:px-3 py-1.5 sm:py-2 border-b bg-muted/30 flex-shrink-0">
+            <div className="flex items-center gap-1 sm:gap-2 min-w-0">
+              <Button variant="ghost" size="sm" onClick={() => model.closeFileViewer()} title="Back to files (Esc)" className="flex-shrink-0">
+                <X className="w-4 h-4 sm:mr-1" /> <span className="hidden sm:inline">Close</span>
+              </Button>
+              <span className="text-xs sm:text-sm font-medium truncate max-w-[120px] sm:max-w-[300px]" title={model.openFile.path}>
+                {model.openFile.name}
+              </span>
+              {model.openFile.size != null && (
+                <span className="text-xs text-muted-foreground hidden sm:inline">
+                  ({model.openFile.size > 1024 * 1024
+                    ? `${(model.openFile.size / (1024 * 1024)).toFixed(1)} MB`
+                    : `${(model.openFile.size / 1024).toFixed(1)} KB`
+                  })
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* ViewerHost renders the plugin component + its toolbar */}
+          <div className="flex-1 min-h-0">
+            <ViewerHost
+              viewer={viewer}
+              file={{
+                path: model.openFile.path,
+                name: model.openFile.name,
+                content: model.openFile.content,
+                size: model.openFile.size,
+                mimeType: model.openFile.mimeType,
+              }}
+              mode="full"
+              onClose={() => model.closeFileViewer()}
+              hostToolbar={hostToolbar}
+              className="h-full"
+            />
+          </div>
+        </div>
+      </FileBrowserContext.Provider>
+    );
+  }
+
+  // Header content
+  const headerContent = (showBreadcrumbs || showNavigation) ? (
+    <div className="flex items-center justify-between px-2 py-1.5 bg-muted/10">
+      <div className="flex items-center gap-2">
+        {showNavigation && (
+          <>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => model.navigateUp()}
+              disabled={!model.canNavigateUp}
+              title="Navigate up"
+            >
+              <ArrowUp className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => model.refresh()}
+              disabled={model.isLoading}
+              title="Refresh"
+            >
+              <RotateCw className="w-4 h-4" />
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => model.triggerFileUpload()}
+              disabled={model.uploadModel.isUploading}
+              title="Upload files"
+            >
+              <Upload className="w-4 h-4" />
+            </Button>
+            {model.listModel.isLoading && (
+              <Loader2 className="w-4 h-4 animate-spin text-muted-foreground" />
+            )}
+          </>
+        )}
+
+        {showBreadcrumbs && (
+          <PathBreadcrumb
+            path={model.currentPath}
+            onNavigate={handleBreadcrumbClick}
+            showHome
+            editable
+            className="text-[13px]"
+          />
+        )}
+      </div>
+    </div>
+  ) : undefined;
+
+  // Sidebar content (Tree Navigation)
+  const sidebarContent = (
+    <Tree
+      provider={model.treeProvider}
+      model={model.treeModel}
+      className="h-full"
+    />
+  );
+
+  const sidebarToolbar = (
+    <h3 className="text-sm font-medium flex items-center gap-1.5"><FolderTree className="w-4 h-4 text-muted-foreground" />Folders</h3>
+  );
+
+  // Main content (List Items + optional Preview Pane)
+  const listContent = model.error ? (
+    <BrowserError
+      error={model.error}
+      context="File Browser"
+      onRetry={() => model.refresh()}
+      onGoBack={model.canNavigateUp ? () => model.navigateUp() : undefined}
+    />
+  ) : (
+    <ListItems
+      model={model.listModel}
+      className="h-full"
+    />
+  );
+
+  const previewWidth = model.previewEnabled && model.previewFile ? 360 : 0;
+
+  const mainContent = model.previewEnabled ? (
+    <div className="flex h-full w-full">
+      <div className="flex-1 min-w-0 h-full overflow-hidden">
+        {listContent}
+      </div>
+      <div
+        className={cn(
+          "flex-shrink-0 h-full overflow-hidden transition-[width] duration-200 ease-in-out",
+          previewWidth > 0 && "border-l"
+        )}
+        style={{ width: previewWidth }}
+      >
+        {previewWidth > 0 && (
+          <PreviewPane
+            previewFile={model.previewFile}
+            className="h-full"
+          />
+        )}
+      </div>
+    </div>
+  ) : listContent;
+
+  const mainToolbar = (
+    <div className="flex items-center justify-between">
+      <div className="flex items-center gap-2">
+        <h3 className="text-sm font-medium flex items-center gap-1.5"><Files className="w-4 h-4 text-muted-foreground" />Contents</h3>
+        {model.listModel.totalItemCount > 0 && (
+          <Badge variant="secondary" className="text-xs">
+            {model.listModel.hasSearchQuery
+              ? `${model.listModel.items.length} / ${model.listModel.totalItemCount}`
+              : model.listModel.totalItemCount} items
+          </Badge>
+        )}
+        <SearchFilter model={model.listModel} />
+      </div>
+      <div className="flex items-center gap-1">
+        <ViewTypeSelector
+          viewTypes={model.listProvider.supportedViewTypes}
+          currentViewType={model.listModel.currentViewType}
+          onViewTypeChange={(viewType) => model.listModel.setViewType(viewType)}
+        />
+        <Button
+          variant={model.listModel.showCheckboxes ? 'secondary' : 'ghost'}
+          size="icon"
+          className="h-7 w-7"
+          onClick={() => model.listModel.toggleCheckboxes()}
+          title={model.listModel.showCheckboxes ? 'Hide checkboxes' : 'Show checkboxes for multi-select'}
+        >
+          <CheckSquare className="h-4 w-4" />
+        </Button>
+        <Button
+          variant={model.previewEnabled ? 'secondary' : 'ghost'}
+          size="icon"
+          className="h-7 w-7"
+          onClick={() => model.togglePreview()}
+          title={model.previewEnabled ? 'Hide preview pane' : 'Show preview pane'}
+        >
+          {model.previewEnabled ? (
+            <PanelRightClose className="h-4 w-4" />
+          ) : (
+            <PanelRightOpen className="h-4 w-4" />
+          )}
+        </Button>
+      </div>
+    </div>
+  );
+
+  const contextValue = {
+    renameState: model.renameState ? { itemId: model.renameState.itemId, currentName: model.renameState.currentName, source: model.renameState.source } : null,
+    onRenameCommit: (newName: string) => model.confirmRename(newName),
+    onRenameCancel: () => model.cancelRename(),
+  };
+
+  return (
+    <FileBrowserContext.Provider value={contextValue}>
+      <div
+        className={cn("h-full w-full relative", className)}
+        onDragOver={handleNativeDragOver}
+        onDragEnter={handleNativeDragEnter}
+        onDragLeave={handleNativeDragLeave}
+        onDrop={handleNativeDrop}
+      >
+        {/* Native file drop overlay */}
+        {isDragOver && (
+          <div className="absolute inset-0 z-50 bg-blue-500/10 border-2 border-dashed border-blue-500 rounded-lg flex items-center justify-center pointer-events-none">
+            <div className="flex flex-col items-center gap-2 text-blue-600 dark:text-blue-400">
+              <Upload className="w-8 h-8" />
+              <p className="text-sm font-medium">Drop files here to upload</p>
+              <p className="text-xs text-muted-foreground">Files will be added to {model.currentPath}</p>
+            </div>
+          </div>
+        )}
+        <ExplorerLayout
+          sections={{
+            header: headerContent,
+            sidebar: {
+              content: sidebarContent,
+              toolbar: sidebarToolbar,
+              width: 260
+            },
+            main: {
+              content: mainContent,
+              toolbar: mainToolbar
+            }
+          }}
+        />
+
+        {/* Delete confirmation dialog */}
+        {model.deleteState && (
+          <DeleteConfirmDialog
+            targets={model.deleteState.targets}
+            onConfirm={() => model.confirmDelete()}
+            onCancel={() => model.cancelDelete()}
+          />
+        )}
+
+        {/* Create item dialog */}
+        {model.createState && (
+          <CreateItemDialog
+            type={model.createState.type}
+            onConfirm={(name) => model.confirmCreate(name)}
+            onCancel={() => model.cancelCreate()}
+          />
+        )}
+
+        {/* Upload progress panel */}
+        <UploadProgress uploadModel={model.uploadModel} />
+
+        {/* Loading overlay */}
+        {model.isLoading && !model.hasListItems && (
+          <div className="absolute inset-0 bg-background/80 flex items-center justify-center z-50">
+            <div className="text-center">
+              <div className="animate-spin w-6 h-6 border-2 border-primary border-t-transparent rounded-full mx-auto"></div>
+              <p className="text-sm text-muted-foreground mt-2">Loading...</p>
+            </div>
+          </div>
+        )}
+      </div>
+    </FileBrowserContext.Provider>
+  );
+});
+
+FileBrowser.displayName = 'FileBrowser';