@anymux/ui-kit 0.1.0

package/src/file-browser/models/ui/PreviewUIModel.ts

@@ -0,0 +1,297 @@
+import { makeAutoObservable, flow } from 'mobx';
+import type { FileBrowserItem, PreviewData } from '../../types/FileBrowserTypes';
+
+interface PreviewOwner {
+  logger?: { info: (message: string) => void; warn: (message: string) => void; error: (message: string) => void } | null;
+}
+
+export class PreviewUIModel {
+  // Observable state
+  isLoading = false;
+  content: any = null;
+  error: string | null = null;
+  fileType: string | null = null;
+  zoom = 1;
+  canZoom = false;
+  
+  // Current item being previewed
+  currentItem: FileBrowserItem | null = null;
+  
+  // Preview settings
+  autoPreview = true;
+  previewTimeout = 1000; // ms
+  maxPreviewSize = 5 * 1024 * 1024; // 5MB
+  
+  private owner: PreviewOwner;
+  private previewTimer: NodeJS.Timeout | null = null;
+
+  constructor(owner: PreviewOwner) {
+    this.owner = owner;
+    makeAutoObservable(this);
+    this.owner.logger?.info('PreviewUIModel initialized');
+  }
+
+  // Computed values
+  get hasContent() {
+    return this.content !== null && !this.error;
+  }
+
+  get hasError() {
+    return this.error !== null;
+  }
+
+  get isPreviewable() {
+    return this.currentItem && this.getFileType(this.currentItem) !== 'unknown';
+  }
+
+  get zoomPercentage() {
+    return Math.round(this.zoom * 100);
+  }
+
+  get canZoomIn() {
+    return this.canZoom && this.zoom < 5;
+  }
+
+  get canZoomOut() {
+    return this.canZoom && this.zoom > 0.1;
+  }
+
+  // Actions
+  setCurrentItem = (item: FileBrowserItem | null) => {
+    this.currentItem = item;
+    
+    if (item && item.type === 'file') {
+      this.fileType = this.getFileType(item);
+      this.canZoom = this.isZoomableFileType(this.fileType);
+      
+      if (this.autoPreview) {
+        this.schedulePreviewLoad();
+      }
+    } else {
+      this.clearPreview();
+    }
+    
+    this.owner.logger?.info(`Preview item set: ${item?.name || 'none'}`);
+  };
+
+  schedulePreviewLoad = () => {
+    this.cancelPreviewLoad();
+    
+    if (this.currentItem) {
+      this.previewTimer = setTimeout(() => {
+        this.loadPreview();
+      }, this.previewTimeout);
+    }
+  };
+
+  cancelPreviewLoad = () => {
+    if (this.previewTimer) {
+      clearTimeout(this.previewTimer);
+      this.previewTimer = null;
+    }
+  };
+
+  loadPreview = flow(function* (this: PreviewUIModel) {
+    if (!this.currentItem) return;
+    
+    try {
+      this.setLoading(true);
+      this.clearError();
+      
+      // Check file size
+      if (this.currentItem.size && this.currentItem.size > this.maxPreviewSize) {
+        this.setError(`File too large for preview (${this.formatFileSize(this.currentItem.size)})`);
+        return;
+      }
+      
+      // Simulate preview loading - in real implementation, this would use the provider
+      yield new Promise(resolve => setTimeout(resolve, 500));
+      
+      const previewContent = this.generateDemoPreview(this.currentItem);
+      this.setContent(previewContent);
+      
+      this.owner.logger?.info(`Preview loaded for: ${this.currentItem.name}`);
+    } catch (error) {
+      this.owner.logger?.error('Preview loading failed: ' + (error instanceof Error ? error.message : error));
+      this.setError(error instanceof Error ? error.message : 'Failed to load preview');
+    } finally {
+      this.setLoading(false);
+    }
+  });
+
+  setLoading = (loading: boolean) => {
+    this.isLoading = loading;
+  };
+
+  setContent = (content: any) => {
+    this.content = content;
+    this.error = null;
+  };
+
+  setError = (error: string) => {
+    this.error = error;
+    this.content = null;
+    this.isLoading = false;
+  };
+
+  clearError = () => {
+    this.error = null;
+  };
+
+  clearPreview = () => {
+    this.cancelPreviewLoad();
+    this.content = null;
+    this.error = null;
+    this.isLoading = false;
+    this.fileType = null;
+    this.zoom = 1;
+    this.canZoom = false;
+  };
+
+  // Zoom actions
+  setZoom = (zoom: number) => {
+    if (this.canZoom) {
+      this.zoom = Math.max(0.1, Math.min(5, zoom));
+      this.owner.logger?.info(`Preview zoom set to: ${this.zoomPercentage}%`);
+    }
+  };
+
+  zoomIn = () => {
+    if (this.canZoomIn) {
+      this.setZoom(this.zoom * 1.2);
+    }
+  };
+
+  zoomOut = () => {
+    if (this.canZoomOut) {
+      this.setZoom(this.zoom / 1.2);
+    }
+  };
+
+  resetZoom = () => {
+    this.setZoom(1);
+  };
+
+  // Settings actions
+  setAutoPreview = (enabled: boolean) => {
+    this.autoPreview = enabled;
+    
+    if (enabled && this.currentItem && !this.hasContent && !this.isLoading) {
+      this.schedulePreviewLoad();
+    } else if (!enabled) {
+      this.cancelPreviewLoad();
+    }
+  };
+
+  setPreviewTimeout = (timeout: number) => {
+    this.previewTimeout = Math.max(0, timeout);
+  };
+
+  // Helper methods
+  private getFileType(item: FileBrowserItem): string {
+    if (!item.name) return 'unknown';
+    
+    const extension = item.name.split('.').pop()?.toLowerCase();
+    if (!extension) return 'unknown';
+    
+    // Group file types
+    const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp', 'svg'];
+    const textTypes = ['txt', 'md', 'json', 'xml', 'html', 'css', 'js', 'ts', 'jsx', 'tsx'];
+    const videoTypes = ['mp4', 'avi', 'mov', 'webm', 'mkv'];
+    const audioTypes = ['mp3', 'wav', 'ogg', 'flac', 'm4a'];
+    const documentTypes = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'];
+    
+    if (imageTypes.includes(extension)) return 'image';
+    if (textTypes.includes(extension)) return 'text';
+    if (videoTypes.includes(extension)) return 'video';
+    if (audioTypes.includes(extension)) return 'audio';
+    if (documentTypes.includes(extension)) return 'document';
+    
+    return 'unknown';
+  }
+
+  private isZoomableFileType(fileType: string | null): boolean {
+    return fileType === 'image' || fileType === 'text' || fileType === 'document';
+  }
+
+  private formatFileSize(bytes: number): string {
+    const units = ['B', 'KB', 'MB', 'GB'];
+    let size = bytes;
+    let unitIndex = 0;
+    
+    while (size >= 1024 && unitIndex < units.length - 1) {
+      size /= 1024;
+      unitIndex++;
+    }
+    
+    return `${size.toFixed(1)} ${units[unitIndex]}`;
+  }
+
+  private generateDemoPreview(item: FileBrowserItem): any {
+    const fileType = this.getFileType(item);
+    
+    switch (fileType) {
+      case 'text':
+        return {
+          type: 'text',
+          content: `// ${item.name}\n\n// This is a demo preview\nfunction example() {\n  console.log('Hello from ${item.name}');\n}\n\nexample();`,
+          language: this.getLanguageFromExtension(item.name)
+        };
+      
+      case 'image':
+        return {
+          type: 'image',
+          content: null, // Would be actual image data
+          metadata: {
+            width: 800,
+            height: 600,
+            format: item.name.split('.').pop()?.toUpperCase()
+          }
+        };
+      
+      case 'document':
+        return {
+          type: 'document',
+          content: `Preview of ${item.name}\n\nThis is a demo document preview. In a real implementation, this would show the actual document content.`,
+          metadata: {
+            pages: 1,
+            format: item.name.split('.').pop()?.toUpperCase()
+          }
+        };
+      
+      default:
+        return {
+          type: 'unknown',
+          content: `Cannot preview ${item.name}`,
+          metadata: {
+            size: item.size,
+            type: fileType
+          }
+        };
+    }
+  }
+
+  private getLanguageFromExtension(filename: string): string {
+    const extension = filename.split('.').pop()?.toLowerCase();
+    
+    const languageMap: Record<string, string> = {
+      'js': 'javascript',
+      'jsx': 'javascript',
+      'ts': 'typescript',
+      'tsx': 'typescript',
+      'json': 'json',
+      'html': 'html',
+      'css': 'css',
+      'md': 'markdown',
+      'xml': 'xml'
+    };
+    
+    return languageMap[extension || ''] || 'text';
+  }
+
+  dispose() {
+    this.cancelPreviewLoad();
+    this.clearPreview();
+    this.owner.logger?.info('PreviewUIModel disposed');
+  }
+} 

package/src/file-browser/models/ui/ThumbnailViewUIModel.ts

@@ -0,0 +1,254 @@
+import { makeAutoObservable } from 'mobx';
+import { ThumbnailViewSettings } from '../../types/ViewModeTypes';
+
+interface ThumbnailOwner {
+  logger?: { info: (message: string) => void } | null;
+}
+
+export class ThumbnailViewUIModel {
+  // Thumbnail settings
+  thumbnailSize = 128;
+  gridSpacing = 16;
+  aspectRatio = 1;
+  showFilenames = true;
+  showFileSize = false;
+  showDate = false;
+  loadThumbnails = true;
+  thumbnailQuality: 'low' | 'medium' | 'high' = 'medium';
+  
+  // Grid layout
+  columnsPerRow = 'auto' as number | 'auto';
+  
+  // Settings
+  settings: ThumbnailViewSettings = {};
+  
+  // Preview loading state
+  loadingThumbnails = new Set<string>();
+  failedThumbnails = new Set<string>();
+  
+  // Owner reference for logging
+  private owner: ThumbnailOwner;
+
+  constructor(owner: ThumbnailOwner) {
+    makeAutoObservable(this);
+    
+    this.owner = owner;
+    this.initializeSettings();
+  }
+
+  get logger() {
+    return this.owner.logger;
+  }
+
+  // Computed values
+  get itemWidth() {
+    return this.thumbnailSize + this.gridSpacing;
+  }
+
+  get itemHeight() {
+    return this.thumbnailSize / this.aspectRatio + 
+           (this.showFilenames ? 24 : 0) + 
+           (this.showFileSize || this.showDate ? 16 : 0) + 
+           this.gridSpacing;
+  }
+
+  get isLoadingAnyThumbnails() {
+    return this.loadingThumbnails.size > 0;
+  }
+
+  get thumbnailSizePresets() {
+    return [
+      { label: 'Small', value: 64 },
+      { label: 'Medium', value: 128 },
+      { label: 'Large', value: 192 },
+      { label: 'Extra Large', value: 256 },
+    ];
+  }
+
+  // Actions
+  setThumbnailSize = (size: number) => {
+    this.logger?.info(`setThumbnailSize: ${size}`);
+    this.thumbnailSize = Math.max(32, Math.min(512, size));
+  };
+
+  setGridSpacing = (spacing: number) => {
+    this.logger?.info(`setGridSpacing: ${spacing}`);
+    this.gridSpacing = Math.max(0, Math.min(32, spacing));
+  };
+
+  setAspectRatio = (ratio: number) => {
+    this.logger?.info(`setAspectRatio: ${ratio}`);
+    this.aspectRatio = Math.max(0.5, Math.min(2, ratio));
+  };
+
+  setColumnsPerRow = (columns: number | 'auto') => {
+    this.logger?.info(`setColumnsPerRow: ${columns}`);
+    this.columnsPerRow = columns;
+  };
+
+  toggleShowFilenames = () => {
+    this.logger?.info(`toggleShowFilenames: ${!this.showFilenames}`);
+    this.showFilenames = !this.showFilenames;
+  };
+
+  toggleShowFileSize = () => {
+    this.logger?.info(`toggleShowFileSize: ${!this.showFileSize}`);
+    this.showFileSize = !this.showFileSize;
+  };
+
+  toggleShowDate = () => {
+    this.logger?.info(`toggleShowDate: ${!this.showDate}`);
+    this.showDate = !this.showDate;
+  };
+
+  setThumbnailQuality = (quality: 'low' | 'medium' | 'high') => {
+    this.logger?.info(`setThumbnailQuality: ${quality}`);
+    this.thumbnailQuality = quality;
+  };
+
+  // Preview loading state management
+  setThumbnailLoading = (itemId: string, loading: boolean) => {
+    if (loading) {
+      this.loadingThumbnails.add(itemId);
+      this.failedThumbnails.delete(itemId);
+    } else {
+      this.loadingThumbnails.delete(itemId);
+    }
+  };
+
+  setThumbnailFailed = (itemId: string) => {
+    this.loadingThumbnails.delete(itemId);
+    this.failedThumbnails.add(itemId);
+  };
+
+  setThumbnailSuccess = (itemId: string) => {
+    this.loadingThumbnails.delete(itemId);
+    this.failedThumbnails.delete(itemId);
+  };
+
+  isThumbnailLoading = (itemId: string): boolean => {
+    return this.loadingThumbnails.has(itemId);
+  };
+
+  isThumbnailFailed = (itemId: string): boolean => {
+    return this.failedThumbnails.has(itemId);
+  };
+
+  clearThumbnailStates = () => {
+    this.logger?.info('clearThumbnailStates');
+    this.loadingThumbnails.clear();
+    this.failedThumbnails.clear();
+  };
+
+  // Layout calculation
+  calculateGridLayout = (containerWidth: number): { columns: number; itemsPerRow: number } => {
+    if (this.columnsPerRow === 'auto') {
+      const columns = Math.floor(containerWidth / this.itemWidth);
+      return {
+        columns: Math.max(1, columns),
+        itemsPerRow: Math.max(1, columns),
+      };
+    } else {
+      return {
+        columns: this.columnsPerRow,
+        itemsPerRow: this.columnsPerRow,
+      };
+    }
+  };
+
+  // Settings management
+  updateSettings = (newSettings: Partial<ThumbnailViewSettings>) => {
+    this.logger?.info('updateSettings');
+    this.settings = { ...this.settings, ...newSettings };
+    
+    // Apply settings to local properties
+    if (newSettings.thumbnailSize !== undefined) {
+      this.setThumbnailSize(newSettings.thumbnailSize);
+    }
+    if (newSettings.aspectRatio !== undefined) {
+      this.setAspectRatio(newSettings.aspectRatio);
+    }
+    if (newSettings.showFilenames !== undefined) {
+      this.showFilenames = newSettings.showFilenames;
+    }
+    if (newSettings.showFileSize !== undefined) {
+      this.showFileSize = newSettings.showFileSize;
+    }
+    if (newSettings.showDate !== undefined) {
+      this.showDate = newSettings.showDate;
+    }
+    if (newSettings.gridSpacing !== undefined) {
+      this.setGridSpacing(newSettings.gridSpacing);
+    }
+    if (newSettings.loadThumbnails !== undefined) {
+      this.loadThumbnails = newSettings.loadThumbnails;
+    }
+    if (newSettings.thumbnailQuality !== undefined) {
+      this.setThumbnailQuality(newSettings.thumbnailQuality);
+    }
+  };
+
+  // Presets
+  applyPreset = (preset: 'compact' | 'balanced' | 'detailed') => {
+    this.logger?.info(`applyPreset: ${preset}`);
+    
+    switch (preset) {
+      case 'compact':
+        this.setThumbnailSize(64);
+        this.setGridSpacing(8);
+        this.showFilenames = true;
+        this.showFileSize = false;
+        this.showDate = false;
+        break;
+      case 'balanced':
+        this.setThumbnailSize(128);
+        this.setGridSpacing(16);
+        this.showFilenames = true;
+        this.showFileSize = true;
+        this.showDate = false;
+        break;
+      case 'detailed':
+        this.setThumbnailSize(192);
+        this.setGridSpacing(24);
+        this.showFilenames = true;
+        this.showFileSize = true;
+        this.showDate = true;
+        break;
+    }
+  };
+
+  resetToDefaults = () => {
+    this.logger?.info('resetToDefaults');
+    this.thumbnailSize = 128;
+    this.gridSpacing = 16;
+    this.aspectRatio = 1;
+    this.showFilenames = true;
+    this.showFileSize = false;
+    this.showDate = false;
+    this.loadThumbnails = true;
+    this.thumbnailQuality = 'medium';
+    this.columnsPerRow = 'auto';
+    this.clearThumbnailStates();
+    this.initializeSettings();
+  };
+
+  // Private methods
+  private initializeSettings() {
+    this.settings = {
+      thumbnailSize: this.thumbnailSize,
+      aspectRatio: this.aspectRatio,
+      showFilenames: this.showFilenames,
+      showFileSize: this.showFileSize,
+      showDate: this.showDate,
+      gridSpacing: this.gridSpacing,
+      loadThumbnails: this.loadThumbnails,
+      thumbnailQuality: this.thumbnailQuality,
+    };
+  }
+
+  // Cleanup
+  dispose() {
+    this.logger?.info('ThumbnailViewUIModel disposing');
+    this.clearThumbnailStates();
+  }
+} 

package/src/file-browser/models/ui/TreeViewUIModel.ts

@@ -0,0 +1,128 @@
+import { makeAutoObservable, observable } from 'mobx';
+import { TreeViewSettings } from '../../types/ViewModeTypes';
+import { FileBrowserItem } from '../../types/FileBrowserTypes';
+
+export class TreeViewUIModel {
+  // Tree-specific state
+  expandedFolders = observable.map<string, boolean>();
+  indentSize = 20;
+  showConnectors = true;
+  expandOnSingleClick = false;
+  collapseOnSecondClick = true;
+  rememberExpansion = true;
+  
+  // Settings
+  settings: TreeViewSettings = {};
+  
+  // Owner reference for logging
+  private owner: any;
+
+  constructor(owner: any) {
+    makeAutoObservable(this);
+    
+    this.owner = owner;
+    this.initializeSettings();
+  }
+
+  get logger() {
+    return this.owner.logger;
+  }
+
+  // Computed values
+  get expandedFoldersArray() {
+    return Array.from(this.expandedFolders.keys()).filter(key => 
+      this.expandedFolders.get(key)
+    );
+  }
+
+  // Actions
+  expandFolder = (path: string) => {
+    this.logger?.info(`expandFolder: ${path}`);
+    this.expandedFolders.set(path, true);
+  };
+
+  collapseFolder = (path: string) => {
+    this.logger?.info(`collapseFolder: ${path}`);
+    this.expandedFolders.set(path, false);
+  };
+
+  toggleFolder = (path: string) => {
+    const isExpanded = this.isFolderExpanded(path);
+    if (isExpanded) {
+      this.collapseFolder(path);
+    } else {
+      this.expandFolder(path);
+    }
+  };
+
+  isFolderExpanded = (path: string): boolean => {
+    return this.expandedFolders.get(path) || false;
+  };
+
+  hasChildren = (item: FileBrowserItem): boolean => {
+    return item.type === 'directory' && (Boolean(item.hasChildren) || Boolean(item.children && item.children.length > 0));
+  };
+
+  sortTreeNodes = (nodes: FileBrowserItem[]): FileBrowserItem[] => {
+    return [...nodes].sort((a, b) => {
+      // Directories first
+      if (a.type === 'directory' && b.type !== 'directory') return -1;
+      if (b.type === 'directory' && a.type !== 'directory') return 1;
+      
+      // Then alphabetical
+      return a.name.localeCompare(b.name);
+    });
+  };
+
+  expandAll = () => {
+    this.logger?.info('expandAll');
+    // This would need access to all items to expand all folders
+    // Implementation depends on how we access the parent model's items
+  };
+
+  collapseAll = () => {
+    this.logger?.info('collapseAll');
+    this.expandedFolders.clear();
+  };
+
+  updateSettings = (newSettings: Partial<TreeViewSettings>) => {
+    this.logger?.info('updateSettings', newSettings);
+    this.settings = { ...this.settings, ...newSettings };
+    
+    // Apply settings to local properties
+    if (newSettings.indentSize !== undefined) {
+      this.indentSize = newSettings.indentSize;
+    }
+    if (newSettings.showConnectors !== undefined) {
+      this.showConnectors = newSettings.showConnectors;
+    }
+    if (newSettings.expandOnSingleClick !== undefined) {
+      this.expandOnSingleClick = newSettings.expandOnSingleClick;
+    }
+    if (newSettings.collapseOnSecondClick !== undefined) {
+      this.collapseOnSecondClick = newSettings.collapseOnSecondClick;
+    }
+    if (newSettings.rememberExpansion !== undefined) {
+      this.rememberExpansion = newSettings.rememberExpansion;
+    }
+  };
+
+  // Private methods
+  private initializeSettings() {
+    this.settings = {
+      indentSize: this.indentSize,
+      showConnectors: this.showConnectors,
+      expandOnSingleClick: this.expandOnSingleClick,
+      collapseOnSecondClick: this.collapseOnSecondClick,
+      rememberExpansion: this.rememberExpansion,
+      defaultSortField: 'name',
+      defaultSortDirection: 'asc',
+    };
+  }
+
+  // Cleanup
+  dispose() {
+    this.logger?.info('TreeViewUIModel disposing');
+    this.expandedFolders.clear();
+  }
+}