@anymux/ui-kit 0.1.0

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

@@ -0,0 +1,185 @@
+import { makeAutoObservable, observable } from 'mobx';
+import { ViewModeDefinition } from '../types/ViewModeTypes';
+import { FilterCriteria } from '../types/FileBrowserTypes';
+import { TreeViewUIModel } from './ui/TreeViewUIModel';
+import { ListViewUIModel, SortCriteria } from './ui/ListViewUIModel';
+import { ThumbnailViewUIModel } from './ui/ThumbnailViewUIModel';
+import { TreemapViewUIModel } from './ui/TreemapViewUIModel';
+
+export class ViewModeManagerModel {
+  // View modes
+  availableViewModes = observable.map<string, ViewModeDefinition>();
+  currentViewMode = 'tree';
+  
+  // Filtering and sorting
+  currentFilters: FilterCriteria = {};
+  currentSortCriteria: SortCriteria | null = null;
+  
+  // View-specific UI models
+  treeViewUI: TreeViewUIModel;
+  listViewUI: ListViewUIModel;
+  thumbnailViewUI: ThumbnailViewUIModel;
+  treemapViewUI: TreemapViewUIModel;
+  
+  // Owner reference for logging
+  private owner: any;
+
+  constructor(owner: any) {
+    makeAutoObservable(this);
+    
+    this.owner = owner;
+    
+    // Initialize view-specific UI models
+    this.treeViewUI = new TreeViewUIModel(this);
+    this.listViewUI = new ListViewUIModel(this);
+    this.thumbnailViewUI = new ThumbnailViewUIModel(this);
+    this.treemapViewUI = new TreemapViewUIModel(this);
+    
+    // Initialize with default view modes
+    this.initializeDefaultViewModes();
+  }
+
+  get logger() {
+    return this.owner.logger;
+  }
+  
+  // Computed values
+  get currentViewModeDefinition() {
+    return this.availableViewModes.get(this.currentViewMode);
+  }
+  
+  get availableViewModesArray() {
+    return Array.from(this.availableViewModes.values())
+      .sort((a, b) => (a.priority || 0) - (b.priority || 0));
+  }
+  
+  get currentViewUI() {
+    switch (this.currentViewMode) {
+      case 'tree':
+        return this.treeViewUI;
+      case 'list':
+        return this.listViewUI;
+      case 'thumbnail':
+        return this.thumbnailViewUI;
+      case 'treemap':
+        return this.treemapViewUI;
+      default:
+        return this.treeViewUI;
+    }
+  }
+  
+  get hasFilters() {
+    return Object.keys(this.currentFilters).length > 0;
+  }
+  
+  get hasSorting() {
+    return this.currentSortCriteria !== null;
+  }
+
+  // Actions
+  setCurrentViewMode = (viewModeId: string) => {
+    this.logger?.info(`setCurrentViewMode: ${viewModeId}`);
+    
+    if (this.availableViewModes.has(viewModeId)) {
+      this.currentViewMode = viewModeId;
+      
+      // Apply default sorting for the view mode if none exists
+      const viewMode = this.availableViewModes.get(viewModeId);
+      if (viewMode?.settings?.defaultSortField && !this.currentSortCriteria) {
+        this.setSortCriteria(
+          viewMode.settings.defaultSortField,
+          viewMode.settings.defaultSortDirection || 'asc'
+        );
+      }
+    } else {
+      this.logger?.warn(`Unknown view mode: ${viewModeId}`);
+    }
+  };
+
+  registerViewMode = (definition: ViewModeDefinition) => {
+    this.logger?.info(`registerViewMode: ${definition.id}`);
+    this.availableViewModes.set(definition.id, definition);
+  };
+
+  unregisterViewMode = (viewModeId: string) => {
+    this.logger?.info(`unregisterViewMode: ${viewModeId}`);
+    this.availableViewModes.delete(viewModeId);
+    
+    // Switch to default if current view mode was removed
+    if (this.currentViewMode === viewModeId) {
+      const defaultViewMode = this.availableViewModesArray[0];
+      if (defaultViewMode) {
+        this.setCurrentViewMode(defaultViewMode.id);
+      }
+    }
+  };
+
+  setFilter = (key: keyof FilterCriteria, value: any) => {
+    this.logger?.info(`setFilter: ${key} = ${value}`);
+    
+    if (value === undefined || value === null || value === '') {
+      // Remove filter if value is empty
+      const newFilters = { ...this.currentFilters };
+      delete newFilters[key];
+      this.currentFilters = newFilters;
+    } else {
+      this.currentFilters = {
+        ...this.currentFilters,
+        [key]: value,
+      };
+    }
+  };
+
+  clearFilters = () => {
+    this.logger?.info('clearFilters');
+    this.currentFilters = {};
+  };
+
+  setSortCriteria = (field: string, direction: 'asc' | 'desc') => {
+    this.logger?.info(`setSortCriteria: ${field} ${direction}`);
+    this.currentSortCriteria = { field, direction };
+  };
+
+  clearSort = () => {
+    this.logger?.info('clearSort');
+    this.currentSortCriteria = null;
+  };
+
+  toggleSortDirection = () => {
+    if (this.currentSortCriteria) {
+      this.setSortCriteria(
+        this.currentSortCriteria.field,
+        this.currentSortCriteria.direction === 'asc' ? 'desc' : 'asc'
+      );
+    }
+  };
+
+  // View mode capabilities
+  supportsCapability = (capability: string): boolean => {
+    const viewMode = this.currentViewModeDefinition;
+    if (!viewMode) return false;
+    
+    return (viewMode.capabilities as any)[capability] === true;
+  };
+
+  // Private methods
+  private initializeDefaultViewModes() {
+    // Default view modes will be registered by providers
+    // This is just setting up the initial state
+    this.logger?.info('initializeDefaultViewModes');
+  }
+
+  // Cleanup
+  dispose() {
+    this.logger?.info('ViewModeManagerModel disposing');
+    
+    // Dispose of UI models
+    this.treeViewUI.dispose?.();
+    this.listViewUI.dispose?.();
+    this.thumbnailViewUI.dispose?.();
+    this.treemapViewUI.dispose?.();
+    
+    // Clear collections
+    this.availableViewModes.clear();
+  }
+} 

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

@@ -0,0 +1,44 @@
+import React from 'react';
+import { makeAutoObservable } from 'mobx';
+
+/**
+ * MobX model for ViewerHost component state.
+ * Manages the transient UI state for a specific viewer session:
+ * dirty tracking, toolbar extras from the plugin, and loading state.
+ */
+export class ViewerHostModel {
+  isDirty = false;
+  isLoading = false;
+  error: string | null = null;
+  toolbarExtras: React.ReactNode = null;
+
+  constructor() {
+    makeAutoObservable(this, {
+      // toolbarExtras is ReactNode, not deeply observable
+      toolbarExtras: false,
+    });
+  }
+
+  setDirty(dirty: boolean): void {
+    this.isDirty = dirty;
+  }
+
+  setToolbarExtras(extras: React.ReactNode): void {
+    this.toolbarExtras = extras;
+  }
+
+  setLoading(loading: boolean): void {
+    this.isLoading = loading;
+  }
+
+  setError(error: string | null): void {
+    this.error = error;
+  }
+
+  reset(): void {
+    this.isDirty = false;
+    this.isLoading = false;
+    this.error = null;
+    this.toolbarExtras = null;
+  }
+}

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

@@ -0,0 +1,265 @@
+import { makeAutoObservable, observable } from 'mobx';
+import { ListViewSettings } from '../../types/ViewModeTypes';
+
+export interface SortCriteria {
+  field: string;
+  direction: 'asc' | 'desc';
+}
+
+export interface ColumnDefinition {
+  id: string;
+  label: string;
+  field: string;
+  width: number;
+  minWidth: number;
+  maxWidth?: number;
+  resizable: boolean;
+  sortable: boolean;
+  visible: boolean;
+  align?: 'left' | 'center' | 'right';
+  format?: (value: any) => string;
+}
+
+interface ListViewOwner {
+  logger?: { info: (message: string) => void } | null;
+}
+
+export class ListViewUIModel {
+  // Column management
+  columns = observable.map<string, ColumnDefinition>();
+  columnOrder: string[] = [];
+  
+  // Sorting state
+  currentSort: SortCriteria | null = null;
+  
+  // Settings
+  settings: ListViewSettings = {};
+  
+  // UI state
+  showHeader = true;
+  striped = true;
+  compact = false;
+  hoverable = true;
+  
+  // Owner reference for logging
+  private owner: ListViewOwner;
+
+  constructor(owner: ListViewOwner) {
+    makeAutoObservable(this);
+    
+    this.owner = owner;
+    this.initializeDefaultColumns();
+  }
+
+  get logger() {
+    return this.owner.logger;
+  }
+
+  // Computed values
+  get visibleColumns() {
+    return this.columnOrder
+      .map(id => this.columns.get(id))
+      .filter(col => col && col.visible) as ColumnDefinition[];
+  }
+
+  get sortableColumns() {
+    return Array.from(this.columns.values()).filter(col => col.sortable);
+  }
+
+  get allColumns() {
+    return Array.from(this.columns.values());
+  }
+
+  get totalWidth() {
+    return this.visibleColumns.reduce((sum, col) => sum + col.width, 0);
+  }
+
+  // Actions
+  addColumn = (column: ColumnDefinition) => {
+    this.logger?.info(`addColumn: ${column.id}`);
+    this.columns.set(column.id, column);
+    if (!this.columnOrder.includes(column.id)) {
+      this.columnOrder.push(column.id);
+    }
+  };
+
+  removeColumn = (columnId: string) => {
+    this.logger?.info(`removeColumn: ${columnId}`);
+    this.columns.delete(columnId);
+    this.columnOrder = this.columnOrder.filter(id => id !== columnId);
+  };
+
+  updateColumn = (columnId: string, updates: Partial<ColumnDefinition>) => {
+    const existing = this.columns.get(columnId);
+    if (existing) {
+      this.logger?.info(`updateColumn: ${columnId}`);
+      this.columns.set(columnId, { ...existing, ...updates });
+    }
+  };
+
+  resizeColumn = (columnId: string, width: number) => {
+    const column = this.columns.get(columnId);
+    if (column && column.resizable) {
+      const constrainedWidth = Math.max(
+        column.minWidth,
+        column.maxWidth ? Math.min(width, column.maxWidth) : width
+      );
+      this.updateColumn(columnId, { width: constrainedWidth });
+    }
+  };
+
+  reorderColumns = (fromIndex: number, toIndex: number) => {
+    this.logger?.info(`reorderColumns: ${fromIndex} -> ${toIndex}`);
+    const newOrder = [...this.columnOrder];
+    const [moved] = newOrder.splice(fromIndex, 1);
+    if (moved) {
+      newOrder.splice(toIndex, 0, moved);
+      this.columnOrder = newOrder;
+    }
+  };
+
+  showColumn = (columnId: string) => {
+    this.updateColumn(columnId, { visible: true });
+  };
+
+  hideColumn = (columnId: string) => {
+    this.updateColumn(columnId, { visible: false });
+  };
+
+  toggleColumnVisibility = (columnId: string) => {
+    const column = this.columns.get(columnId);
+    if (column) {
+      this.updateColumn(columnId, { visible: !column.visible });
+    }
+  };
+
+  // Sorting
+  setSortCriteria = (field: string, direction: 'asc' | 'desc') => {
+    this.logger?.info(`setSortCriteria: ${field} ${direction}`);
+    this.currentSort = { field, direction };
+  };
+
+  toggleSort = (field: string) => {
+    if (this.currentSort?.field === field) {
+      // Toggle direction
+      const newDirection = this.currentSort.direction === 'asc' ? 'desc' : 'asc';
+      this.setSortCriteria(field, newDirection);
+    } else {
+      // Set new field with ascending direction
+      this.setSortCriteria(field, 'asc');
+    }
+  };
+
+  clearSort = () => {
+    this.logger?.info('clearSort');
+    this.currentSort = null;
+  };
+
+  // Settings management
+  updateSettings = (newSettings: Partial<ListViewSettings>) => {
+    this.logger?.info('updateSettings');
+    this.settings = { ...this.settings, ...newSettings };
+  };
+
+  // Column presets
+  resetToDefaults = () => {
+    this.logger?.info('resetToDefaults');
+    this.columns.clear();
+    this.columnOrder = [];
+    this.currentSort = null;
+    this.initializeDefaultColumns();
+  };
+
+  saveColumnLayout = (name: string) => {
+    this.logger?.info(`saveColumnLayout: ${name}`);
+    // This would save the current column configuration
+    // Implementation depends on persistence layer
+  };
+
+  loadColumnLayout = (name: string) => {
+    this.logger?.info(`loadColumnLayout: ${name}`);
+    // This would load a saved column configuration
+    // Implementation depends on persistence layer
+  };
+
+  // Private methods
+  private initializeDefaultColumns() {
+    const defaultColumns: ColumnDefinition[] = [
+      {
+        id: 'name',
+        label: 'Name',
+        field: 'name',
+        width: 200,
+        minWidth: 120,
+        resizable: true,
+        sortable: true,
+        visible: true,
+        align: 'left',
+      },
+      {
+        id: 'size',
+        label: 'Size',
+        field: 'size',
+        width: 100,
+        minWidth: 80,
+        resizable: true,
+        sortable: true,
+        visible: true,
+        align: 'right',
+        format: (value: number) => {
+          if (value == null) return '-';
+          const units = ['B', 'KB', 'MB', 'GB'];
+          let size = value;
+          let unitIndex = 0;
+          while (size >= 1024 && unitIndex < units.length - 1) {
+            size /= 1024;
+            unitIndex++;
+          }
+          return `${size.toFixed(1)} ${units[unitIndex]}`;
+        },
+      },
+      {
+        id: 'lastModified',
+        label: 'Modified',
+        field: 'lastModified',
+        width: 150,
+        minWidth: 120,
+        resizable: true,
+        sortable: true,
+        visible: true,
+        align: 'left',
+        format: (value: Date) => {
+          if (!value) return '-';
+          return value.toLocaleDateString();
+        },
+      },
+      {
+        id: 'type',
+        label: 'Type',
+        field: 'type',
+        width: 80,
+        minWidth: 60,
+        resizable: true,
+        sortable: true,
+        visible: false, // Hidden by default
+        align: 'left',
+      },
+    ];
+
+    defaultColumns.forEach(col => {
+      this.columns.set(col.id, col);
+      this.columnOrder.push(col.id);
+    });
+
+    // Set default sort
+    this.currentSort = { field: 'name', direction: 'asc' };
+  }
+
+  // Cleanup
+  dispose() {
+    this.logger?.info('ListViewUIModel disposing');
+    this.columns.clear();
+    this.columnOrder = [];
+    this.currentSort = null;
+  }
+}