@anymux/ui-kit 0.1.0

package/src/file-browser/models/FileBrowserModel.ts

@@ -0,0 +1,623 @@
+import { makeAutoObservable, runInAction } from 'mobx';
+import { TreeModel } from '../../tree';
+import { ListItemsModel } from '../../list';
+import type { IFileSystem } from '@anymux/file-system';
+import { FileSystemBridge } from '../adapters/FileSystemBridge';
+import { FileSystemTreeProvider } from '../providers/FileSystemTreeProvider';
+import { FileSystemListProvider } from '../providers/FileSystemListProvider';
+import type { ListItemData } from '../../list/types/ListTypes';
+import type { TreeNodeData } from '../../tree/types/TreeTypes';
+import { globalViewerRegistry, type ViewerConfig, UnsupportedFileViewer } from '../viewers';
+import { UploadModel } from './UploadModel';
+
+export interface OpenFileState {
+  path: string;
+  name: string;
+  content?: string | ArrayBuffer;
+  size?: number;
+  mimeType?: string;
+  viewer: ViewerConfig;
+}
+
+export interface PreviewFileState {
+  path: string;
+  name: string;
+  content?: string | ArrayBuffer;
+  size?: number;
+  mimeType?: string;
+  viewer: ViewerConfig;
+  isLoading: boolean;
+}
+
+export class FileBrowserModel {
+  // File system integration
+  fileSystem: IFileSystem;
+  fileSystemBridge: FileSystemBridge;
+
+  // Component providers
+  treeProvider: FileSystemTreeProvider;
+  listProvider: FileSystemListProvider;
+
+  // Component models
+  treeModel: TreeModel;
+  listModel: ListItemsModel;
+
+  // Upload model
+  uploadModel: UploadModel;
+
+  // Synchronized state
+  currentPath: string = '/';
+  selectedPath: string | null = null;
+
+  // UI state
+  isLoading: boolean = false;
+  error: string | null = null;
+
+  // Callback for path changes (URL sync)
+  onPathChange?: (path: string) => void;
+
+  // Notification callbacks (wired by consuming code to toast/notifications)
+  onNotify?: (type: 'success' | 'error' | 'warning', message: string) => void;
+  /** Structured action callback with undo support */
+  onAction?: (action: { type: 'create' | 'rename' | 'delete' | 'upload'; message: string; undo?: () => Promise<void> }) => void;
+
+  // Viewer state
+  openFile: OpenFileState | null = null;
+  isLoadingFile: boolean = false;
+
+  // Preview pane state
+  previewEnabled: boolean = false;
+  previewFile: PreviewFileState | null = null;
+
+  // Dialog state for rename/delete/create operations
+  renameState: { itemId: string; currentName: string; path: string; source: 'list' | 'tree' } | null = null;
+  deleteState: { targets: Array<{ path: string; isDirectory: boolean; name: string }> } | null = null;
+  createState: { parentPath: string; type: 'file' | 'folder' } | null = null;
+
+  constructor(fileSystem: IFileSystem) {
+    makeAutoObservable(this, {
+      fileSystem: false,
+      fileSystemBridge: false,
+      onPathChange: false,
+      onNotify: false,
+      onAction: false,
+    });
+
+    this.fileSystem = fileSystem;
+    this.fileSystemBridge = new FileSystemBridge(fileSystem);
+
+    this.treeProvider = new FileSystemTreeProvider(this.fileSystemBridge, {
+      showFilesInTree: false,
+      onSelectionChange: this.handleTreeSelection,
+      onRefresh: () => this.refresh(),
+      onRenameRequest: (itemId, currentName, path, source) => this.requestRename(itemId, currentName, path, source),
+      onDeleteRequest: (targets) => this.requestDelete(targets),
+      onNewItemRequest: (parentPath, type) => this.requestCreate(parentPath, type)
+    });
+
+    this.listProvider = new FileSystemListProvider(this.fileSystemBridge, {
+      showAllItems: true,
+      onSelectionChange: this.handleListSelection,
+      onNavigation: this.handleListNavigation,
+      onNavigateUp: () => this.navigateUp(),
+      onOpenFile: (path, name, size) => this.openFileViewer(path, name, size),
+      onPreviewFile: (path, name, size) => this.loadPreviewFile(path, name, size),
+      onRefresh: () => this.refresh(),
+      onRenameRequest: (itemId, currentName, path, source) => this.requestRename(itemId, currentName, path, source),
+      onDeleteRequest: (targets) => this.requestDelete(targets),
+      onNewItemRequest: (parentPath, type) => this.requestCreate(parentPath, type)
+    });
+
+    this.treeModel = new TreeModel(this.treeProvider);
+    this.listModel = new ListItemsModel(this.listProvider);
+    this.uploadModel = new UploadModel(this.fileSystemBridge, (type, msg) => this.notify(type, msg));
+  }
+
+  private notify(type: 'success' | 'error' | 'warning', message: string): void {
+    this.onNotify?.(type, message);
+  }
+
+  async setInitialPath(path: string) {
+    this.currentPath = path;
+    this.selectedPath = path;
+
+    this.listProvider.setPath(path);
+
+    await Promise.all([
+      this.treeModel.loadNodes(),
+      this.listModel.loadItems()
+    ]);
+
+    this.selectPathInTree(path);
+  }
+
+  handleTreeSelection = async (path: string) => {
+    this.selectedPath = path;
+    this.currentPath = path;
+    this.previewFile = null;
+    this.error = null;
+    this.openFile = null;
+    this.onPathChange?.(path);
+
+    this.listProvider.setPath(path);
+    this.listModel.clearItems();
+    this.listModel.clearSearch();
+    this.listModel.totalItemCount = 0;
+    await this.listModel.loadItems();
+  };
+
+  handleListNavigation = async (path: string) => {
+    this.currentPath = path;
+    this.selectedPath = path;
+    this.previewFile = null;
+    this.error = null;
+    this.openFile = null;
+    this.onPathChange?.(path);
+
+    this.selectPathInTree(path);
+
+    this.listProvider.setPath(path);
+    this.listModel.clearItems();
+    this.listModel.clearSearch();
+    this.listModel.totalItemCount = 0;
+    await this.listModel.loadItems();
+  };
+
+  handleListSelection = (selectedItems: ListItemData[]) => {
+    // Optional: auto-navigate on single directory selection
+  };
+
+  private selectPathInTree(path: string) {
+    const node = this.findNodeByPath(path);
+    if (node) {
+      this.treeModel.selectNode(node);
+    }
+  }
+
+  private findNodeByPath(path: string): TreeNodeData | null {
+    const searchNodes = (nodes: TreeNodeData[]): TreeNodeData | null => {
+      for (const node of nodes) {
+        if (node.path === path) {
+          return node;
+        }
+        if (node.children) {
+          const found = searchNodes(node.children);
+          if (found) return found;
+        }
+      }
+      return null;
+    };
+
+    return searchNodes(this.treeModel.nodes);
+  }
+
+  async navigateUp() {
+    const parentPath = this.currentPath.split('/').slice(0, -1).join('/') || '/';
+    await this.handleListNavigation(parentPath);
+  }
+
+  async navigateToPath(path: string) {
+    await this.handleListNavigation(path);
+  }
+
+  async refresh() {
+    runInAction(() => {
+      this.isLoading = true;
+      this.error = null;
+      this.treeModel.errors.clear();
+    });
+
+    try {
+      await Promise.all([
+        this.treeModel.loadNodes(),
+        this.listModel.refresh()
+      ]);
+    } catch (error) {
+      runInAction(() => {
+        this.error = error instanceof Error ? error.message : 'Failed to refresh';
+      });
+    } finally {
+      runInAction(() => {
+        this.isLoading = false;
+      });
+    }
+  }
+
+  async navigateToBreadcrumb(path: string) {
+    await this.handleListNavigation(path);
+  }
+
+  get canNavigateUp(): boolean {
+    return this.currentPath !== '/';
+  }
+
+  get pathSegments(): Array<{ name: string; path: string }> {
+    if (this.currentPath === '/') {
+      return [{ name: 'Root', path: '/' }];
+    }
+
+    const segments = this.currentPath.split('/').filter(Boolean);
+    return [
+      { name: 'Root', path: '/' },
+      ...segments.map((segment, index) => ({
+        name: segment,
+        path: '/' + segments.slice(0, index + 1).join('/')
+      }))
+    ];
+  }
+
+  get isTreeLoading(): boolean {
+    return this.treeModel.isLoading;
+  }
+
+  get isListLoading(): boolean {
+    return this.listModel.isLoading;
+  }
+
+  get hasTreeNodes(): boolean {
+    return this.treeModel.hasNodes;
+  }
+
+  get hasListItems(): boolean {
+    return this.listModel.items.length > 0;
+  }
+
+  get hasError(): boolean {
+    return this.error !== null;
+  }
+
+  get hasItems(): boolean {
+    return this.hasListItems;
+  }
+
+  get itemsArray(): ListItemData[] {
+    return this.listModel.items;
+  }
+
+  async refreshItems(): Promise<void> {
+    await this.refresh();
+  }
+
+  clearError(): void {
+    this.error = null;
+  }
+
+  async setCurrentPath(path: string): Promise<void> {
+    await this.navigateToPath(path);
+  }
+
+  // Image extensions that should be read as binary
+  private static readonly BINARY_EXTENSIONS = new Set([
+    'png', 'jpg', 'jpeg', 'gif', 'webp', 'bmp', 'ico', 'tiff', 'tif', 'avif',
+    'pdf', 'zip', 'tar', 'gz',
+  ]);
+
+  private static readonly MIME_TYPES: Record<string, string> = {
+    'txt': 'text/plain', 'md': 'text/markdown', 'json': 'application/json',
+    'js': 'text/javascript', 'ts': 'text/typescript', 'css': 'text/css',
+    'html': 'text/html', 'png': 'image/png', 'jpg': 'image/jpeg',
+    'jpeg': 'image/jpeg', 'gif': 'image/gif', 'svg': 'image/svg+xml',
+    'webp': 'image/webp', 'bmp': 'image/bmp', 'ico': 'image/x-icon',
+    'avif': 'image/avif', 'tiff': 'image/tiff', 'tif': 'image/tiff',
+    'pdf': 'application/pdf',
+  };
+
+  async openFileViewer(path: string, name: string, size?: number): Promise<void> {
+    const extension = name.split('.').pop()?.toLowerCase() || '';
+    const isSupported = globalViewerRegistry.canHandle(name);
+    const viewer: ViewerConfig = isSupported
+      ? globalViewerRegistry.getViewer(name)!
+      : { id: 'unsupported', name: 'Unsupported', extensions: [], component: UnsupportedFileViewer };
+
+    const isBinary = !isSupported || FileBrowserModel.BINARY_EXTENSIONS.has(extension);
+
+    // Show loading state immediately so UI stays responsive
+    runInAction(() => {
+      this.isLoadingFile = true;
+    });
+
+    let content: string | ArrayBuffer | undefined;
+    try {
+      const raw = await this.fileSystemBridge.readFile(path);
+      if (typeof raw === 'string') {
+        if (isBinary) {
+          const bytes = new Uint8Array(raw.length);
+          for (let i = 0; i < raw.length; i++) {
+            bytes[i] = raw.charCodeAt(i) & 0xff;
+          }
+          content = bytes.buffer as ArrayBuffer;
+        } else {
+          content = raw;
+        }
+      } else if (raw instanceof ArrayBuffer) {
+        if (isBinary) {
+          content = raw;
+        } else {
+          content = new TextDecoder('utf-8').decode(raw);
+        }
+      } else if (ArrayBuffer.isView(raw)) {
+        if (isBinary) {
+          const copy = new Uint8Array(raw.byteLength);
+          copy.set(new Uint8Array(raw.buffer, raw.byteOffset, raw.byteLength));
+          content = copy.buffer as ArrayBuffer;
+        } else {
+          content = new TextDecoder('utf-8').decode(raw);
+        }
+      }
+    } catch (err) {
+      console.warn(`[FileBrowser] Failed to read file ${path}:`, err instanceof Error ? err.message : err);
+    }
+
+    runInAction(() => {
+      this.isLoadingFile = false;
+      this.openFile = {
+        path,
+        name,
+        content,
+        size,
+        mimeType: FileBrowserModel.MIME_TYPES[extension] || 'application/octet-stream',
+        viewer,
+      };
+    });
+  }
+
+  get viewableFiles(): Array<{ path: string; name: string; size?: number }> {
+    return this.listModel.items
+      .filter(item => !item.isDirectory && globalViewerRegistry.canHandle(item.name))
+      .map(item => ({ path: item.path, name: item.name, size: item.size }));
+  }
+
+  get currentFileIndex(): number {
+    if (!this.openFile) return -1;
+    return this.viewableFiles.findIndex(f => f.path === this.openFile!.path);
+  }
+
+  get canNavigateNext(): boolean {
+    return this.currentFileIndex >= 0 && this.currentFileIndex < this.viewableFiles.length - 1;
+  }
+
+  get canNavigatePrev(): boolean {
+    return this.currentFileIndex > 0;
+  }
+
+  async navigateToNextFile(): Promise<void> {
+    const files = this.viewableFiles;
+    const idx = this.currentFileIndex;
+    if (idx >= 0 && idx < files.length - 1) {
+      const next = files[idx + 1]!;
+      await this.openFileViewer(next.path, next.name, next.size);
+    }
+  }
+
+  async navigateToPrevFile(): Promise<void> {
+    const files = this.viewableFiles;
+    const idx = this.currentFileIndex;
+    if (idx > 0) {
+      const prev = files[idx - 1]!;
+      await this.openFileViewer(prev.path, prev.name, prev.size);
+    }
+  }
+
+  closeFileViewer(): void {
+    this.openFile = null;
+  }
+
+  // Preview pane
+  togglePreview(): void {
+    this.previewEnabled = !this.previewEnabled;
+    if (!this.previewEnabled) {
+      this.previewFile = null;
+    }
+  }
+
+  async loadPreviewFile(path: string, name: string, size?: number): Promise<void> {
+    if (!this.previewEnabled) return;
+
+    const extension = name.split('.').pop()?.toLowerCase() || '';
+    const isSupported = globalViewerRegistry.canHandle(name);
+    const viewer: ViewerConfig = isSupported
+      ? globalViewerRegistry.getViewer(name)!
+      : { id: 'unsupported', name: 'Unsupported', extensions: [], component: UnsupportedFileViewer };
+
+    runInAction(() => {
+      this.previewFile = {
+        path, name, size,
+        mimeType: FileBrowserModel.MIME_TYPES[extension] || 'application/octet-stream',
+        viewer, isLoading: true,
+      };
+    });
+
+    const isBinary = !isSupported || FileBrowserModel.BINARY_EXTENSIONS.has(extension);
+    let content: string | ArrayBuffer | undefined;
+    try {
+      const raw = await this.fileSystemBridge.readFile(path);
+      if (typeof raw === 'string') {
+        if (isBinary) {
+          const bytes = new Uint8Array(raw.length);
+          for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i) & 0xff;
+          content = bytes.buffer as ArrayBuffer;
+        } else {
+          content = raw;
+        }
+      } else if (raw instanceof ArrayBuffer) {
+        content = isBinary ? raw : new TextDecoder('utf-8').decode(raw);
+      } else if (ArrayBuffer.isView(raw)) {
+        if (isBinary) {
+          const copy = new Uint8Array(raw.byteLength);
+          copy.set(new Uint8Array(raw.buffer, raw.byteOffset, raw.byteLength));
+          content = copy.buffer as ArrayBuffer;
+        } else {
+          content = new TextDecoder('utf-8').decode(raw);
+        }
+      }
+    } catch (err) {
+      console.warn(`[FileBrowser] Failed to read preview for ${path}:`, err instanceof Error ? err.message : err);
+    }
+
+    runInAction(() => {
+      if (this.previewFile?.path === path) {
+        this.previewFile = {
+          path, name, content, size,
+          mimeType: FileBrowserModel.MIME_TYPES[extension] || 'application/octet-stream',
+          viewer, isLoading: false,
+        };
+      }
+    });
+  }
+
+  clearPreview(): void {
+    this.previewFile = null;
+  }
+
+  // Upload files
+  async uploadFiles(files: FileList | File[]): Promise<void> {
+    await this.uploadModel.uploadFiles(files, this.currentPath);
+    await this.refresh();
+  }
+
+  triggerFileUpload(): void {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.multiple = true;
+    input.onchange = () => {
+      if (input.files && input.files.length > 0) {
+        this.uploadFiles(input.files);
+      }
+    };
+    input.click();
+  }
+
+  // Rename dialog
+  requestRename(itemId: string, currentName: string, path: string, source: 'list' | 'tree' = 'list'): void {
+    this.renameState = { itemId, currentName, path, source };
+  }
+
+  async confirmRename(newName: string): Promise<void> {
+    if (!this.renameState) return;
+    const { path } = this.renameState;
+    runInAction(() => { this.renameState = null; });
+
+    for (const [key] of this.treeModel.expandedNodes) {
+      if (key === path || key.startsWith(path + '/')) {
+        this.treeModel.expandedNodes.delete(key);
+      }
+    }
+
+    const parentPath = path.split('/').slice(0, -1).join('/') || '/';
+    const newPath = `${parentPath}/${newName}`.replace(/\/\//g, '/');
+
+    if (this.currentPath === path) {
+      this.currentPath = newPath;
+      this.selectedPath = newPath;
+      this.listProvider.setPath(newPath);
+    } else if (this.currentPath.startsWith(path + '/')) {
+      const newCurrentPath = this.currentPath.replace(path, newPath);
+      this.currentPath = newCurrentPath;
+      this.selectedPath = newCurrentPath;
+      this.listProvider.setPath(newCurrentPath);
+    }
+
+    try {
+      const oldName = path.split('/').pop() || '';
+      await this.listProvider.executeRename(path, newName);
+      const message = `Renamed to "${newName}"`;
+      if (this.onAction) {
+        this.onAction({
+          type: 'rename',
+          message,
+          undo: async () => {
+            await this.listProvider.executeRename(newPath, oldName);
+            this.refresh();
+          },
+        });
+      } else {
+        this.notify('success', message);
+      }
+    } catch (err) {
+      this.notify('error', `Rename failed: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  }
+
+  cancelRename(): void {
+    this.renameState = null;
+  }
+
+  // Delete dialog
+  requestDelete(targets: Array<{ path: string; isDirectory: boolean; name: string }>): void {
+    this.deleteState = { targets };
+  }
+
+  async confirmDelete(): Promise<void> {
+    if (!this.deleteState) return;
+    const { targets } = this.deleteState;
+    runInAction(() => { this.deleteState = null; });
+
+    for (const target of targets) {
+      if (target.isDirectory) {
+        if (this.currentPath === target.path || this.currentPath.startsWith(target.path + '/')) {
+          const parentPath = target.path.split('/').slice(0, -1).join('/') || '/';
+          this.currentPath = parentPath;
+          this.selectedPath = parentPath;
+          this.listProvider.setPath(parentPath);
+          break;
+        }
+        for (const [key] of this.treeModel.expandedNodes) {
+          if (key === target.path || key.startsWith(target.path + '/')) {
+            this.treeModel.expandedNodes.delete(key);
+          }
+        }
+      }
+    }
+
+    try {
+      await this.listProvider.executeDelete(targets);
+      const count = targets.length;
+      const message = count === 1 ? `Deleted "${targets[0]!.name}"` : `Deleted ${count} items`;
+      if (this.onAction) {
+        this.onAction({ type: 'delete', message });
+      } else {
+        this.notify('success', message);
+      }
+    } catch (err) {
+      this.notify('error', `Delete failed: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  }
+
+  cancelDelete(): void {
+    this.deleteState = null;
+  }
+
+  // Create dialog
+  requestCreate(parentPath: string, type: 'file' | 'folder'): void {
+    this.createState = { parentPath, type };
+  }
+
+  async confirmCreate(name: string): Promise<void> {
+    if (!this.createState) return;
+    const { parentPath, type } = this.createState;
+    runInAction(() => { this.createState = null; });
+    try {
+      await this.listProvider.executeCreate(parentPath, name, type);
+      const message = `Created ${type} "${name}"`;
+      if (this.onAction) {
+        const itemPath = `${parentPath}/${name}`.replace(/\/\//g, '/');
+        this.onAction({
+          type: 'create',
+          message,
+          undo: async () => {
+            await this.listProvider.executeDelete([{ path: itemPath, isDirectory: type === 'folder', name }]);
+            this.refresh();
+          },
+        });
+      } else {
+        this.notify('success', message);
+      }
+    } catch (err) {
+      this.notify('error', `Create ${type} failed: ${err instanceof Error ? err.message : String(err)}`);
+    }
+  }
+
+  cancelCreate(): void {
+    this.createState = null;
+  }
+}