@anymux/ui-kit 0.1.0

package/src/file-browser/providers/FileSystemListProvider.ts

@@ -0,0 +1,552 @@
+import { makeAutoObservable, observable, runInAction } from 'mobx';
+import type {
+  ListItemsProvider,
+  ListItemsProviderListener
+} from '../../list/providers/ListItemsProvider';
+import type {
+  ListItemData,
+  ListLoadOptions,
+  ListLoadResult,
+  ListViewType,
+  ListContextMenuItem,
+  ListSelectionInfo,
+  VirtualizationConfig,
+  ListDragDropInfo
+} from '../../list/types/ListTypes';
+import { LIST_VIEW_TYPE, GRID_VIEW_TYPE, DETAILS_VIEW_TYPE } from '../../list';
+import { MASONRY_HORIZONTAL_VIEW_TYPE, MASONRY_VERTICAL_VIEW_TYPE, TREEMAP_VIEW_TYPE } from '../../list/providers/ListItemsProvider';
+import { FileSystemBridge, type FileSystemItem } from '../adapters/FileSystemBridge';
+import { getIconForFile } from '../../icons/iconMap';
+import { ThumbnailCacheService } from '../services/ThumbnailCacheService';
+
+interface FileSystemListProviderOptions {
+  showAllItems: boolean;
+  /** Service identifier for IndexedDB thumbnail cache key scoping */
+  serviceId?: string;
+  onSelectionChange: (items: ListItemData[]) => void;
+  onNavigation: (path: string) => void;
+  onNavigateUp?: () => void;
+  onOpenFile?: (path: string, name: string, size?: number) => void;
+  onPreviewFile?: (path: string, name: string, size?: number) => void;
+  onRefresh?: () => Promise<void>;
+  onRenameRequest?: (itemId: string, currentName: string, path: string, source: 'list' | 'tree') => void;
+  onDeleteRequest?: (targets: Array<{ path: string; isDirectory: boolean; name: string }>) => void;
+  onNewItemRequest?: (parentPath: string, type: 'file' | 'folder') => void;
+}
+
+export class FileSystemListProvider implements ListItemsProvider {
+  readonly id = 'filesystem-list';
+  readonly name = 'File System List';
+  readonly supportedViewTypes: ListViewType[] = [
+    LIST_VIEW_TYPE,
+    GRID_VIEW_TYPE,
+    DETAILS_VIEW_TYPE,
+    MASONRY_HORIZONTAL_VIEW_TYPE,
+    MASONRY_VERTICAL_VIEW_TYPE,
+    TREEMAP_VIEW_TYPE
+  ];
+  readonly isMultiSelectEnabled = true;
+  readonly isVirtualizationEnabled = false;
+  readonly isDragDropEnabled = true;
+
+  currentPath: string = '/';
+  private listeners: ListItemsProviderListener[] = [];
+
+  // Thumbnail blob URL cache: path → blob URL
+  thumbnailCache = observable.map<string, string>();
+  // Aspect ratio cache: path → width/height ratio
+  aspectRatioCache = observable.map<string, number>();
+  // Track in-flight loads to avoid duplicate requests
+  private thumbnailLoading = new Set<string>();
+
+  constructor(
+    private bridge: FileSystemBridge,
+    private options: FileSystemListProviderOptions
+  ) {
+    makeAutoObservable(this, {
+      bridge: false,
+      options: false,
+      listeners: false,
+      thumbnailLoading: false,
+    });
+    // Evict expired IndexedDB thumbnails on startup (non-blocking)
+    ThumbnailCacheService.evictOld();
+  }
+
+  /**
+   * Get a cached thumbnail blob URL, or trigger async load if not cached.
+   * Returns undefined while loading (MobX will re-render when cache updates).
+   */
+  getThumbnailBlobUrl(path: string): string | undefined {
+    const cached = this.thumbnailCache.get(path);
+    if (cached) return cached;
+
+    // Start async load if not already loading
+    if (!this.thumbnailLoading.has(path)) {
+      this.thumbnailLoading.add(path);
+      this.loadThumbnail(path);
+    }
+    return undefined;
+  }
+
+  private async loadThumbnail(path: string): Promise<void> {
+    const serviceId = this.options.serviceId ?? 'default';
+    try {
+      // Try IndexedDB cache first
+      const cached = await ThumbnailCacheService.get(serviceId, path);
+      if (cached) {
+        runInAction(() => {
+          this.thumbnailCache.set(path, cached.blobUrl);
+          this.aspectRatioCache.set(path, cached.aspectRatio);
+        });
+        return;
+      }
+
+      // Fall back to network load
+      const content = await this.bridge.readFile(path);
+      const ext = path.split('.').pop()?.toLowerCase() || '';
+      const mimeMap: Record<string, string> = {
+        jpg: 'image/jpeg', jpeg: 'image/jpeg', png: 'image/png',
+        gif: 'image/gif', svg: 'image/svg+xml', webp: 'image/webp'
+      };
+      const mime = mimeMap[ext] || 'image/png';
+      const rawData = typeof content === 'string' ? new TextEncoder().encode(content) : content;
+      const blob = new Blob([rawData], { type: mime });
+      const url = URL.createObjectURL(blob);
+      runInAction(() => {
+        this.thumbnailCache.set(path, url);
+      });
+      // Measure actual image dimensions for masonry aspect ratios
+      const img = new Image();
+      img.src = url;
+      img.onload = () => {
+        if (img.naturalWidth > 0 && img.naturalHeight > 0) {
+          const aspectRatio = img.naturalWidth / img.naturalHeight;
+          runInAction(() => {
+            this.aspectRatioCache.set(path, aspectRatio);
+          });
+          // Persist to IndexedDB for future page loads
+          const buffer = rawData instanceof ArrayBuffer ? rawData : (rawData as Uint8Array).buffer;
+          ThumbnailCacheService.put(serviceId, path, buffer, mime, aspectRatio);
+        }
+      };
+    } catch (error) {
+      console.warn('Failed to load thumbnail:', path, error);
+    } finally {
+      this.thumbnailLoading.delete(path);
+    }
+  }
+
+  /**
+   * Get cached aspect ratio for an image path.
+   * Returns undefined if not yet measured.
+   */
+  getAspectRatio(path: string): number | undefined {
+    return this.aspectRatioCache.get(path);
+  }
+
+  /**
+   * Revoke all cached blob URLs (call on path change / unmount)
+   */
+  clearThumbnailCache(): void {
+    for (const url of this.thumbnailCache.values()) {
+      URL.revokeObjectURL(url);
+    }
+    this.thumbnailCache.clear();
+    this.aspectRatioCache.clear();
+    this.thumbnailLoading.clear();
+  }
+
+  setPath(path: string) {
+    this.currentPath = path;
+    this.clearThumbnailCache();
+  }
+
+  async loadItems(options?: ListLoadOptions): Promise<ListLoadResult> {
+    const items = await this.bridge.loadDirectoryContents(this.currentPath);
+
+    const allItems: ListItemData[] = items.map(item => ({
+      id: item.id,
+      name: item.name,
+      type: item.type,
+      path: item.path,
+      size: item.size,
+      modified: item.modified,
+      isDirectory: item.isDirectory,
+      metadata: item,
+      thumbnailUrl: this.getThumbnailUrl(item),
+      icon: this.getFileIconString(item)
+    }));
+
+    const totalCount = allItems.length;
+    const offset = options?.offset ?? 0;
+    const limit = options?.limit ?? totalCount;
+    const paginatedItems = allItems.slice(offset, offset + limit);
+
+    return {
+      items: paginatedItems,
+      totalCount,
+      hasMore: offset + limit < totalCount
+    };
+  }
+
+  async getItemCount(): Promise<number> {
+    const result = await this.loadItems();
+    return result.totalCount || 0;
+  }
+
+  async loadItemRange(start: number, end: number): Promise<ListLoadResult> {
+    const result = await this.loadItems();
+    const rangeItems = result.items.slice(start, end);
+
+    return {
+      items: rangeItems,
+      totalCount: result.totalCount
+    };
+  }
+
+  async refresh(): Promise<ListLoadResult> {
+    const result = await this.loadItems();
+    this.listeners.forEach(listener => {
+      listener.onItemsCountChanged(result.totalCount || 0);
+    });
+    return result;
+  }
+
+  getItemHeight(viewType: ListViewType): number {
+    switch (viewType.id) {
+      case 'list': return 32;
+      case 'grid': return 200;
+      case 'details': return 32;
+      case 'masonry-horizontal': return 160;
+      default: return 40;
+    }
+  }
+
+  getItemWidth(viewType: ListViewType): number {
+    switch (viewType.id) {
+      case 'grid': return 240;
+      case 'masonry-horizontal': return 200;
+      default: return 0;
+    }
+  }
+
+  getVirtualizationConfig(): VirtualizationConfig {
+    return {
+      itemHeight: 40,
+      overscan: 5,
+      threshold: 50
+    };
+  }
+
+  onSelectionChange = (selectionInfo: ListSelectionInfo) => {
+    this.options.onSelectionChange(selectionInfo.selectedItems);
+
+    // Trigger preview on single file selection
+    if (
+      selectionInfo.selectedItems.length === 1 &&
+      selectionInfo.selectionType === 'single' &&
+      this.options.onPreviewFile
+    ) {
+      const item = selectionInfo.selectedItems[0]!;
+      if (!item.isDirectory) {
+        const fsItem = item.metadata as FileSystemItem;
+        this.options.onPreviewFile(item.path, fsItem.name, fsItem.size);
+      }
+    }
+  };
+
+  onViewTypeChange?(viewType: ListViewType): void {}
+
+  async loadTreemapData(onProgress?: (progress: import('../../list/providers/ListItemsProvider').TreemapScanProgress) => void) {
+    const items = await this.bridge.loadDirectoryRecursive(this.currentPath, 3, onProgress);
+    const convert = (fsItems: FileSystemItem[]): import('../../list/providers/ListItemsProvider').TreemapNodeData[] =>
+      fsItems.map(item => ({
+        name: item.name,
+        path: item.path,
+        size: item.size,
+        isDirectory: item.isDirectory,
+        children: item.children ? convert(item.children) : undefined,
+      }));
+    return convert(items);
+  }
+
+  onItemDoubleClick = (item: ListItemData) => {
+    if (item.isDirectory) {
+      this.options.onNavigation(item.path);
+    } else {
+      this.openFileWithViewer(item);
+    }
+  };
+
+  addListener(listener: ListItemsProviderListener): void {
+    this.listeners.push(listener);
+  }
+
+  removeListener(listener: ListItemsProviderListener): void {
+    const index = this.listeners.indexOf(listener);
+    if (index >= 0) {
+      this.listeners.splice(index, 1);
+    }
+  }
+
+  getItemIcon(item: ListItemData): string {
+    const fsItem = item.metadata as FileSystemItem;
+    return this.getFileIconString(fsItem);
+  }
+
+  getItemContextMenu(item: ListItemData): ListContextMenuItem[] {
+    const baseMenu: ListContextMenuItem[] = [
+      {
+        id: 'open',
+        label: item.isDirectory ? 'Open Folder' : 'Open',
+        icon: item.isDirectory ? 'folder-open' : 'eye',
+        type: 'item'
+      }
+    ];
+
+    if (!item.isDirectory) {
+      baseMenu.push(
+        { id: 'separator1', type: 'separator', label: '' },
+        { id: 'download', label: 'Download', icon: 'download', type: 'item' }
+      );
+    }
+
+    if (item.isDirectory) {
+      baseMenu.push(
+        { id: 'separator-new', type: 'separator', label: '' },
+        { id: 'new-folder', label: 'New Folder', icon: 'folder-plus', type: 'item' },
+        { id: 'new-file', label: 'New File', icon: 'file-plus', type: 'item' }
+      );
+    }
+
+    baseMenu.push(
+      { id: 'separator2', type: 'separator', label: '' },
+      { id: 'copy-path', label: 'Copy Path', icon: 'copy', type: 'item' },
+      { id: 'rename', label: 'Rename', icon: 'edit', type: 'item', shortcut: 'F2' },
+      { id: 'separator3', type: 'separator', label: '' },
+      { id: 'delete', label: 'Delete', icon: 'trash', type: 'item', destructive: true, shortcut: 'Del' }
+    );
+
+    return baseMenu;
+  }
+
+  getEmptySpaceContextMenu(): ListContextMenuItem[] {
+    return [
+      { id: 'new-folder', label: 'New Folder', icon: 'folder-plus', type: 'item' },
+      { id: 'new-file', label: 'New File', icon: 'file-plus', type: 'item' }
+    ];
+  }
+
+  getMultiItemContextMenu(items: ListItemData[]): ListContextMenuItem[] {
+    const hasFiles = items.some(i => !i.isDirectory);
+    const menu: ListContextMenuItem[] = [];
+
+    if (hasFiles) {
+      menu.push(
+        { id: 'download-multiple', label: `Download ${items.filter(i => !i.isDirectory).length} Files`, icon: 'download', type: 'item' }
+      );
+    }
+
+    menu.push(
+      { id: 'copy-path', label: 'Copy Paths', icon: 'copy', type: 'item' },
+      { id: 'separator-del', type: 'separator', label: '' },
+      { id: 'delete-multiple', label: `Delete ${items.length} Items`, icon: 'trash', type: 'item', destructive: true, shortcut: 'Del' }
+    );
+
+    return menu;
+  }
+
+  onContextMenuAction = (menuItemId: string, items: ListItemData[]) => {
+    if (items.length === 0) {
+      switch (menuItemId) {
+        case 'new-folder':
+          this.requestNewItem(this.currentPath, 'folder');
+          break;
+        case 'new-file':
+          this.requestNewItem(this.currentPath, 'file');
+          break;
+      }
+      return;
+    }
+
+    const item = items[0];
+    if (!item) return;
+
+    switch (menuItemId) {
+      case 'open':
+        this.onItemDoubleClick(item);
+        break;
+      case 'download':
+        this.downloadFile(item.path);
+        break;
+      case 'download-multiple':
+        items.filter(i => !i.isDirectory).forEach(i => this.downloadFile(i.path));
+        break;
+      case 'copy-path':
+        this.copyPaths(items);
+        break;
+      case 'rename':
+        this.requestRename(item);
+        break;
+      case 'delete':
+        this.requestDelete([item]);
+        break;
+      case 'delete-multiple':
+        this.requestDelete(items);
+        break;
+      case 'new-folder':
+        this.requestNewItem(item.isDirectory ? item.path : this.currentPath, 'folder');
+        break;
+      case 'new-file':
+        this.requestNewItem(item.isDirectory ? item.path : this.currentPath, 'file');
+        break;
+    }
+  }
+
+  canDragItem?(item: ListItemData): boolean {
+    return true;
+  }
+
+  canDropItems?(draggedItems: ListItemData[], targetItem: ListItemData | null, position: 'before' | 'after' | 'inside'): boolean {
+    // Can only drop into directories
+    if (!targetItem?.isDirectory) return false;
+    if (position !== 'inside') return false;
+    // Cannot drop a folder into itself or its own children
+    for (const item of draggedItems) {
+      if (targetItem.path === item.path) return false;
+      if (targetItem.path.startsWith(item.path + '/')) return false;
+    }
+    return true;
+  }
+
+  onDragStart?(draggedItems: ListItemData[], event: DragEvent): void {}
+
+  onDrop?(dragDropInfo: ListDragDropInfo): void {
+    const { draggedItems, targetItem } = dragDropInfo;
+    if (!targetItem?.isDirectory) return;
+
+    // Move each dragged item into the target directory
+    const moves = draggedItems.map(async (item) => {
+      const name = item.path.split('/').pop() || '';
+      const newPath = `${targetItem.path}/${name}`.replace(/\/\//g, '/');
+      try {
+        await this.bridge.renameItem(item.path, newPath);
+      } catch (e) {
+        console.error(`Failed to move ${item.path} → ${newPath}:`, e);
+      }
+    });
+
+    Promise.all(moves).then(() => this.options.onRefresh?.());
+  }
+
+  onDragEnd?(draggedItems: ListItemData[], success: boolean): void {}
+
+  resolveThumbnailUrl(item: ListItemData): string | undefined {
+    if (item.type === 'file' && this.isImageFile(item.name)) {
+      return this.getThumbnailBlobUrl(item.path);
+    }
+    return undefined;
+  }
+
+  private getThumbnailUrl(item: FileSystemItem): string | undefined {
+    // Return path as marker that this item has a thumbnail.
+    // Actual blob URL resolved via resolveThumbnailUrl/thumbnailCache.
+    if (item.type === 'file' && this.isImageFile(item.name)) {
+      return item.path;
+    }
+    return undefined;
+  }
+
+  private getFileIconString(item: FileSystemItem): string {
+    return getIconForFile(item.name, item.isDirectory);
+  }
+
+  private isImageFile(filename: string): boolean {
+    const ext = filename.split('.').pop()?.toLowerCase();
+    return ['jpg', 'jpeg', 'png', 'gif', 'svg', 'webp'].includes(ext || '');
+  }
+
+  private openFileWithViewer(item: ListItemData): void {
+    const fsItem = item.metadata as FileSystemItem;
+    if (this.options.onOpenFile) {
+      this.options.onOpenFile(item.path, fsItem.name, fsItem.size);
+    }
+  }
+
+  private copyPaths(items: ListItemData[]) {
+    const paths = items.map(i => i.path).join('\n');
+    navigator.clipboard.writeText(paths).catch((err) => {
+      console.error('Failed to copy paths:', err);
+    });
+  }
+
+  private async downloadFile(path: string) {
+    try {
+      const content = await this.bridge.readFile(path);
+      const filename = path.split('/').pop() || 'download';
+      const blob = new Blob(
+        [typeof content === 'string' ? content : content],
+        { type: 'application/octet-stream' }
+      );
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Download failed:', error);
+    }
+  }
+
+  private requestRename(item: ListItemData) {
+    if (this.options.onRenameRequest) {
+      const currentName = item.path.split('/').pop() || '';
+      this.options.onRenameRequest(item.id, currentName, item.path, 'list');
+    }
+  }
+
+  private requestDelete(items: ListItemData[]) {
+    if (this.options.onDeleteRequest) {
+      const targets = items.map(item => ({
+        path: item.path,
+        isDirectory: Boolean(item.isDirectory),
+        name: item.path.split('/').pop() || ''
+      }));
+      this.options.onDeleteRequest(targets);
+    }
+  }
+
+  private requestNewItem(parentPath: string, type: 'file' | 'folder') {
+    if (this.options.onNewItemRequest) {
+      this.options.onNewItemRequest(parentPath, type);
+    }
+  }
+
+  async executeRename(path: string, newName: string): Promise<void> {
+    const parentPath = path.split('/').slice(0, -1).join('/') || '/';
+    const newPath = `${parentPath}/${newName}`.replace(/\/\//g, '/');
+    await this.bridge.renameItem(path, newPath);
+    await this.options.onRefresh?.();
+  }
+
+  async executeDelete(targets: Array<{ path: string; isDirectory: boolean }>): Promise<void> {
+    await Promise.all(targets.map(t =>
+      this.bridge.deleteItem(t.path, t.isDirectory)
+    ));
+    await this.options.onRefresh?.();
+  }
+
+  async executeCreate(parentPath: string, name: string, type: 'file' | 'folder'): Promise<void> {
+    const newPath = `${parentPath}/${name}`.replace(/\/\//g, '/');
+    if (type === 'folder') {
+      await this.bridge.createDirectory(newPath);
+    } else {
+      await this.bridge.writeFile(newPath, '');
+    }
+    await this.options.onRefresh?.();
+  }
+}