@anymux/ui-kit 0.1.0

package/src/file-browser/components/views/ThumbnailView/ThumbnailView.tsx

@@ -0,0 +1,323 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { cn } from '../../../../lib/utils';
+import { FileBrowserItem } from '../../../types/FileBrowserTypes';
+import { ThumbnailViewUIModel } from '../../../models/ui/ThumbnailViewUIModel';
+import { ResponsiveLayoutManagerModel } from '../../../models/ResponsiveLayoutManagerModel';
+import FileBrowserItemComponent from '../../shared/FileBrowserItem';
+import { LoadingSpinner } from '@anymux/ui/components/loading-spinner';
+import { EmptyState } from '@anymux/ui/components/empty-state';
+
+export interface ThumbnailViewProps {
+  items: FileBrowserItem[];
+  thumbnailModel: ThumbnailViewUIModel;
+  responsiveManager?: ResponsiveLayoutManagerModel;
+  onItemClick?: (item: FileBrowserItem) => void;
+  onItemDoubleClick?: (item: FileBrowserItem) => void;
+  onItemActivate?: (item: FileBrowserItem) => void;
+  onSelectionChange?: (selectedItems: FileBrowserItem[]) => void;
+  selectedItemIds?: Set<string>;
+  focusedItemId?: string;
+  className?: string;
+  getThumbnail?: (item: FileBrowserItem) => Promise<string | null>;
+  virtualization?: boolean;
+  maxHeight?: number;
+}
+
+const ThumbnailView: React.FC<ThumbnailViewProps> = observer(({
+  items,
+  thumbnailModel,
+  responsiveManager,
+  onItemClick,
+  onItemDoubleClick,
+  onItemActivate,
+  onSelectionChange,
+  selectedItemIds = new Set<string>(),
+  focusedItemId,
+  className,
+  getThumbnail,
+  virtualization = false,
+  maxHeight,
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [thumbnailUrls, setThumbnailUrls] = useState<Map<string, string>>(new Map());
+
+  const isMobile = responsiveManager?.isMobile ?? false;
+  const isTablet = responsiveManager?.isTablet ?? false;
+
+  // Calculate responsive grid layout
+  const gridLayout = React.useMemo(() => {
+    if (containerWidth === 0) return { columns: 1, itemsPerRow: 1 };
+    
+    // Mobile-specific layout adjustments
+    if (isMobile) {
+      // Force 2-3 columns on mobile for better touch targets
+      const mobileColumns = Math.min(3, Math.max(2, Math.floor(containerWidth / 120)));
+      return { columns: mobileColumns, itemsPerRow: mobileColumns };
+    } else if (isTablet) {
+      // Tablet gets 3-4 columns
+      const tabletColumns = Math.min(4, Math.max(3, Math.floor(containerWidth / 150)));
+      return { columns: tabletColumns, itemsPerRow: tabletColumns };
+    }
+    
+    // Desktop uses model calculation
+    return thumbnailModel.calculateGridLayout(containerWidth);
+  }, [containerWidth, thumbnailModel.itemWidth, isMobile, isTablet]);
+
+  // Mobile-optimized thumbnail size
+  const effectiveThumbnailSize = React.useMemo(() => {
+    if (isMobile) {
+      // Larger thumbnails on mobile for better touch targets
+      return Math.max(80, Math.min(120, (containerWidth - (gridLayout.columns + 1) * 8) / gridLayout.columns));
+    } else if (isTablet) {
+      return Math.max(100, Math.min(140, (containerWidth - (gridLayout.columns + 1) * 12) / gridLayout.columns));
+    }
+    return thumbnailModel.thumbnailSize;
+  }, [isMobile, isTablet, containerWidth, gridLayout.columns, thumbnailModel.thumbnailSize]);
+
+  // Handle container resize
+  useEffect(() => {
+    const updateContainerWidth = () => {
+      if (containerRef.current) {
+        setContainerWidth(containerRef.current.clientWidth);
+      }
+    };
+
+    updateContainerWidth();
+    
+    const resizeObserver = new ResizeObserver(updateContainerWidth);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, []);
+
+  // Load thumbnails for visible items
+  useEffect(() => {
+    if (!getThumbnail || !thumbnailModel.loadThumbnails) return;
+
+    const loadThumbnailsForItems = async () => {
+      const imageItems = items.filter(item => 
+        item.type === 'file' && 
+        isImageFile(item.name) &&
+        !thumbnailUrls.has(item.id) &&
+        !thumbnailModel.isThumbnailLoading(item.id) &&
+        !thumbnailModel.isThumbnailFailed(item.id)
+      );
+
+      for (const item of imageItems) {
+        try {
+          thumbnailModel.setThumbnailLoading(item.id, true);
+          const thumbnailUrl = await getThumbnail(item);
+          
+          if (thumbnailUrl) {
+            setThumbnailUrls(prev => new Map(prev).set(item.id, thumbnailUrl));
+            thumbnailModel.setThumbnailSuccess(item.id);
+          } else {
+            thumbnailModel.setThumbnailFailed(item.id);
+          }
+        } catch (error) {
+          thumbnailModel.logger?.info(`Failed to load thumbnail for ${item.name}: ${error}`);
+          thumbnailModel.setThumbnailFailed(item.id);
+        }
+      }
+    };
+
+    loadThumbnailsForItems();
+  }, [items, getThumbnail, thumbnailModel.loadThumbnails]);
+
+  const isImageFile = (filename: string): boolean => {
+    const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.webp', '.svg'];
+    const ext = filename.toLowerCase().substring(filename.lastIndexOf('.'));
+    return imageExtensions.includes(ext);
+  };
+
+  const handleItemClick = (item: FileBrowserItem, event: React.MouseEvent) => {
+    onItemClick?.(item);
+  };
+
+  const handleItemDoubleClick = (item: FileBrowserItem, event: React.MouseEvent) => {
+    onItemDoubleClick?.(item);
+    onItemActivate?.(item);
+  };
+
+  const renderThumbnailItem = (item: FileBrowserItem, index: number) => {
+    const isSelected = selectedItemIds.has(item.id);
+    const isFocused = focusedItemId === item.id;
+    const thumbnailUrl = thumbnailUrls.get(item.id);
+    const isLoadingThumbnail = thumbnailModel.isThumbnailLoading(item.id);
+    const thumbnailFailed = thumbnailModel.isThumbnailFailed(item.id);
+
+    return (
+      <div
+        key={item.id}
+        className={cn(
+          'relative group',
+          // Mobile-friendly touch interactions
+          isMobile ? 'active:scale-95 transition-transform' : 'transition-transform hover:scale-105',
+          isSelected && 'ring-2 ring-primary ring-offset-2',
+          // Touch-friendly minimum size
+          isMobile && 'min-w-[80px] min-h-[80px]'
+        )}
+        style={{
+          width: effectiveThumbnailSize,
+          height: effectiveThumbnailSize + (thumbnailModel.showFilenames ? 40 : 0),
+        }}
+      >
+        {/* Thumbnail container */}
+        <div
+          className={cn(
+            'relative overflow-hidden rounded-lg border border-border bg-muted/30',
+            'flex items-center justify-center',
+            isSelected && 'border-primary'
+          )}
+          style={{
+            width: effectiveThumbnailSize,
+            height: effectiveThumbnailSize / (thumbnailModel.aspectRatio || 1),
+          }}
+        >
+          {/* Thumbnail image */}
+          {thumbnailUrl && !thumbnailFailed && (
+            <img
+              src={thumbnailUrl}
+              alt={item.name}
+              className="w-full h-full object-cover"
+              loading="lazy"
+              onError={() => thumbnailModel.setThumbnailFailed(item.id)}
+            />
+          )}
+
+          {/* Loading state */}
+          {isLoadingThumbnail && (
+            <div className="absolute inset-0 flex items-center justify-center bg-muted/50">
+              <LoadingSpinner size="sm" />
+            </div>
+          )}
+
+          {/* File icon fallback */}
+          {!thumbnailUrl && !isLoadingThumbnail && (
+            <FileBrowserItemComponent
+              item={item}
+              showIcon={true}
+              showDetails={false}
+              iconSize="lg"
+              layout="vertical"
+              className="border-0 bg-transparent hover:bg-transparent p-0"
+              onClick={handleItemClick}
+              onDoubleClick={handleItemDoubleClick}
+            />
+          )}
+
+          {/* Selection overlay */}
+          {isSelected && (
+            <div className="absolute inset-0 bg-primary/20 border-2 border-primary rounded-lg" />
+          )}
+
+          {/* Focus indicator */}
+          {isFocused && (
+            <div className="absolute inset-0 ring-2 ring-offset-2 ring-primary rounded-lg" />
+          )}
+        </div>
+
+        {/* File name */}
+        {thumbnailModel.showFilenames && (
+          <div className="mt-2 text-center">
+            <div className="text-xs font-medium text-foreground truncate px-1">
+              {item.name}
+            </div>
+          </div>
+        )}
+
+        {/* File details */}
+        {(thumbnailModel.showFileSize || thumbnailModel.showDate) && (
+          <div className="mt-1 text-center">
+            {thumbnailModel.showFileSize && item.size && (
+              <div className="text-xs text-muted-foreground">
+                {formatFileSize(item.size)}
+              </div>
+            )}
+            {thumbnailModel.showDate && item.lastModified && (
+              <div className="text-xs text-muted-foreground">
+                {formatDate(item.lastModified)}
+              </div>
+            )}
+          </div>
+        )}
+
+        {/* Click handler overlay */}
+        <div
+          className="absolute inset-0 cursor-pointer"
+          onClick={(e) => handleItemClick(item, e)}
+          onDoubleClick={(e) => handleItemDoubleClick(item, e)}
+          tabIndex={0}
+          role="button"
+          aria-label={`${item.type === 'directory' ? 'Folder' : 'File'}: ${item.name}`}
+          aria-selected={isSelected}
+        />
+      </div>
+    );
+  };
+
+  const 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(unitIndex === 0 ? 0 : 1)} ${units[unitIndex]}`;
+  };
+
+  const formatDate = (date: Date): string => {
+    return date.toLocaleDateString(undefined, {
+      month: 'short',
+      day: 'numeric',
+    });
+  };
+
+  if (!items || items.length === 0) {
+    return (
+      <div className={cn('h-full', className)}>
+        <EmptyState
+          preset="empty-folder"
+          className="h-full"
+        />
+      </div>
+    );
+  }
+
+  // Mobile-optimized grid spacing
+  const effectiveGridSpacing = isMobile ? 8 : (isTablet ? 12 : thumbnailModel.gridSpacing);
+
+  const gridStyle: React.CSSProperties = {
+    display: 'grid',
+    gridTemplateColumns: `repeat(${gridLayout.columns}, 1fr)`,
+    gap: effectiveGridSpacing,
+    padding: effectiveGridSpacing,
+    ...(maxHeight && { maxHeight, overflowY: 'auto' }),
+  };
+
+  return (
+    <div 
+      ref={containerRef}
+      className={cn('thumbnail-view h-full', className)}
+      role="grid"
+      aria-label="Thumbnail view"
+    >
+      <div style={gridStyle}>
+        {items.map((item, index) => renderThumbnailItem(item, index))}
+      </div>
+    </div>
+  );
+});
+
+ThumbnailView.displayName = 'ThumbnailView';
+
+export default ThumbnailView; 

package/src/file-browser/components/views/TreeView/TreeNode.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { ChevronRight, ChevronDown } from 'lucide-react';
+import { cn } from '../../../../lib/utils';
+import { FileBrowserItem } from '../../../types/FileBrowserTypes';
+import { TreeViewUIModel } from '../../../models/ui/TreeViewUIModel';
+import FileIcon from '../../shared/FileIcon';
+
+export interface TreeNodeProps {
+  item: FileBrowserItem;
+  treeModel: TreeViewUIModel;
+  level: number;
+  onItemClick?: (item: FileBrowserItem) => void;
+  onItemDoubleClick?: (item: FileBrowserItem) => void;
+  isSelected?: boolean;
+  isFocused?: boolean;
+  getItemIcon?: (item: FileBrowserItem) => any;
+}
+
+const TreeNode: React.FC<TreeNodeProps> = observer(({
+  item,
+  treeModel,
+  level,
+  onItemClick,
+  onItemDoubleClick,
+  isSelected = false,
+  isFocused = false,
+  getItemIcon,
+}) => {
+  const isDirectory = item.type === 'directory';
+  const hasChildren = isDirectory && treeModel.hasChildren(item);
+  const isExpanded = isDirectory && treeModel.isFolderExpanded(item.path);
+  const indentSize = treeModel.indentSize;
+
+  const handleExpanderClick = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    if (hasChildren) {
+      treeModel.toggleFolder(item.path);
+    }
+  };
+
+  const handleItemClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    
+    // Handle expand on single click if enabled
+    if (isDirectory && treeModel.expandOnSingleClick) {
+      treeModel.toggleFolder(item.path);
+    }
+    
+    onItemClick?.(item);
+  };
+
+  const handleItemDoubleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    
+    // Handle collapse on second click if enabled
+    if (isDirectory && treeModel.collapseOnSecondClick && isExpanded) {
+      treeModel.collapseFolder(item.path);
+    }
+    
+    onItemDoubleClick?.(item);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    switch (e.key) {
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        handleItemClick(e as any);
+        break;
+      case 'ArrowRight':
+        if (isDirectory && !isExpanded && hasChildren) {
+          e.preventDefault();
+          treeModel.expandFolder(item.path);
+        }
+        break;
+      case 'ArrowLeft':
+        if (isDirectory && isExpanded) {
+          e.preventDefault();
+          treeModel.collapseFolder(item.path);
+        }
+        break;
+    }
+  };
+
+  return (
+    <div
+      className={cn(
+        'flex items-center group relative select-none',
+        'hover:bg-muted/50 transition-colors cursor-pointer',
+        isSelected && 'bg-primary/10 text-primary',
+        isFocused && 'ring-2 ring-primary ring-inset'
+      )}
+      style={{ paddingLeft: `${level * indentSize}px` }}
+      onClick={handleItemClick}
+      onDoubleClick={handleItemDoubleClick}
+      onKeyDown={handleKeyDown}
+      tabIndex={0}
+      role="treeitem"
+      aria-expanded={isDirectory ? isExpanded : undefined}
+      aria-level={level + 1}
+      aria-selected={isSelected}
+      aria-label={`${item.type === 'directory' ? 'Folder' : 'File'}: ${item.name}`}
+    >
+      {/* Tree connectors */}
+      {treeModel.showConnectors && level > 0 && (
+        <div className="absolute left-0 top-0 h-full">
+          {/* Vertical line for parent levels */}
+          <div 
+            className="absolute bg-border"
+            style={{
+              left: `${(level - 1) * indentSize + indentSize / 2 - 0.5}px`,
+              top: 0,
+              width: '1px',
+              height: '100%',
+            }}
+          />
+          {/* Horizontal line to item */}
+          <div 
+            className="absolute bg-border"
+            style={{
+              left: `${(level - 1) * indentSize + indentSize / 2}px`,
+              top: '50%',
+              width: `${indentSize / 2}px`,
+              height: '1px',
+            }}
+          />
+        </div>
+      )}
+
+      {/* Expander icon */}
+      <div className="flex items-center justify-center w-5 h-5 mr-1">
+        {hasChildren && (
+          <button
+            onClick={handleExpanderClick}
+            className={cn(
+              'flex items-center justify-center w-4 h-4 rounded-sm',
+              'hover:bg-muted transition-colors',
+              'focus:outline-none focus:ring-1 focus:ring-primary'
+            )}
+            tabIndex={-1}
+            aria-label={isExpanded ? 'Collapse folder' : 'Expand folder'}
+          >
+            {isExpanded ? (
+              <ChevronDown className="w-3 h-3" />
+            ) : (
+              <ChevronRight className="w-3 h-3" />
+            )}
+          </button>
+        )}
+      </div>
+
+      {/* File/folder icon */}
+      <div className="flex items-center justify-center w-5 h-5 mr-2">
+        <FileIcon
+          item={item}
+          getItemIcon={getItemIcon}
+          size="sm"
+          isExpanded={isExpanded}
+        />
+      </div>
+
+      {/* Item name */}
+      <span 
+        className={cn(
+          'flex-1 text-sm truncate',
+          item.isLoading && 'opacity-50'
+        )}
+        title={item.name}
+      >
+        {item.name}
+      </span>
+
+      {/* Loading indicator */}
+      {item.isLoading && (
+        <div className="flex items-center justify-center w-4 h-4 ml-2">
+          <div className="w-3 h-3 border border-primary border-t-transparent rounded-full animate-spin" />
+        </div>
+      )}
+    </div>
+  );
+});
+
+TreeNode.displayName = 'TreeNode';
+
+export default TreeNode; 

package/src/file-browser/components/views/TreeView/TreeNodeList.tsx

@@ -0,0 +1,191 @@
+import React, { useCallback, useMemo } from 'react';
+import { observer } from 'mobx-react-lite';
+import { cn } from '../../../../lib/utils';
+import { FileBrowserItem } from '../../../types/FileBrowserTypes';
+import { TreeViewUIModel } from '../../../models/ui/TreeViewUIModel';
+import TreeNode from './TreeNode';
+
+export interface TreeNodeListProps {
+  items: FileBrowserItem[];
+  treeModel: TreeViewUIModel;
+  onItemClick?: (item: FileBrowserItem) => void;
+  onItemDoubleClick?: (item: FileBrowserItem) => void;
+  onSelectionChange?: (selectedItems: FileBrowserItem[]) => void;
+  selectedItemIds?: Set<string>;
+  focusedItemId?: string;
+  className?: string;
+  getItemIcon?: (item: FileBrowserItem) => any;
+  virtualization?: boolean;
+  maxHeight?: number;
+}
+
+interface TreeNodeFlat {
+  item: FileBrowserItem;
+  level: number;
+  key: string;
+}
+
+const TreeNodeList: React.FC<TreeNodeListProps> = observer(({
+  items,
+  treeModel,
+  onItemClick,
+  onItemDoubleClick,
+  onSelectionChange,
+  selectedItemIds = new Set(),
+  focusedItemId,
+  className,
+  getItemIcon,
+  virtualization = false,
+  maxHeight = 400,
+}) => {
+  // Flatten tree structure for rendering
+  const flattenedNodes = useMemo(() => {
+    const result: TreeNodeFlat[] = [];
+    
+    const processItems = (items: FileBrowserItem[], level = 0) => {
+      const sortedItems = treeModel.sortTreeNodes(items);
+      
+      for (const item of sortedItems) {
+        result.push({
+          item,
+          level,
+          key: `${item.path}-${level}`,
+        });
+        
+        // Add children if folder is expanded
+        if (item.type === 'directory' && 
+            treeModel.isFolderExpanded(item.path) && 
+            item.children && 
+            item.children.length > 0) {
+          processItems(item.children, level + 1);
+        }
+      }
+    };
+    
+    processItems(items);
+    return result;
+  }, [items, treeModel, treeModel.expandedFoldersArray]);
+
+  const handleItemClick = useCallback((item: FileBrowserItem) => {
+    onItemClick?.(item);
+  }, [onItemClick]);
+
+  const handleItemDoubleClick = useCallback((item: FileBrowserItem) => {
+    onItemDoubleClick?.(item);
+  }, [onItemDoubleClick]);
+
+  const handleKeyDown = useCallback((e: React.KeyboardEvent, currentIndex: number) => {
+    const nodeCount = flattenedNodes.length;
+    
+    switch (e.key) {
+      case 'ArrowDown':
+        e.preventDefault();
+        if (currentIndex < nodeCount - 1) {
+          const nextNode = flattenedNodes[currentIndex + 1];
+          if (nextNode) {
+            handleItemClick(nextNode.item);
+          }
+        }
+        break;
+        
+      case 'ArrowUp':
+        e.preventDefault();
+        if (currentIndex > 0) {
+          const prevNode = flattenedNodes[currentIndex - 1];
+          if (prevNode) {
+            handleItemClick(prevNode.item);
+          }
+        }
+        break;
+        
+      case 'Home':
+        e.preventDefault();
+        if (nodeCount > 0) {
+          const firstNode = flattenedNodes[0];
+          if (firstNode) {
+            handleItemClick(firstNode.item);
+          }
+        }
+        break;
+        
+      case 'End':
+        e.preventDefault();
+        if (nodeCount > 0) {
+          const lastNode = flattenedNodes[nodeCount - 1];
+          if (lastNode) {
+            handleItemClick(lastNode.item);
+          }
+        }
+        break;
+    }
+  }, [flattenedNodes, handleItemClick]);
+
+  // Regular rendering (non-virtualized)
+  const renderNodes = () => {
+    return flattenedNodes.map((node, index) => (
+      <TreeNode
+        key={node.key}
+        item={node.item}
+        treeModel={treeModel}
+        level={node.level}
+        onItemClick={handleItemClick}
+        onItemDoubleClick={handleItemDoubleClick}
+        isSelected={selectedItemIds.has(node.item.id)}
+        isFocused={focusedItemId === node.item.id}
+        getItemIcon={getItemIcon}
+      />
+    ));
+  };
+
+  // Virtualized rendering for large lists
+  const renderVirtualizedNodes = () => {
+    // Basic virtualization implementation
+    // For production, consider using react-window or react-virtualized
+    const itemHeight = 24; // Approximate height per tree node
+    const containerHeight = Math.min(maxHeight, flattenedNodes.length * itemHeight);
+    const visibleCount = Math.ceil(containerHeight / itemHeight);
+    
+    // For now, render all items - proper virtualization would require scroll handling
+    return (
+      <div 
+        className="overflow-auto"
+        style={{ maxHeight: containerHeight }}
+        role="tree"
+        aria-label="File tree"
+      >
+        {renderNodes()}
+      </div>
+    );
+  };
+
+  if (flattenedNodes.length === 0) {
+    return (
+      <div className={cn('p-4 text-center text-muted-foreground', className)}>
+        <p className="text-sm">No items to display</p>
+      </div>
+    );
+  }
+
+  return (
+    <div 
+      className={cn('focus-within:outline-none', className)}
+      role="tree"
+      aria-label="File tree"
+      onKeyDown={(e) => {
+        // Find currently focused item index
+        const focusedIndex = flattenedNodes.findIndex(node => 
+          node.item.id === focusedItemId
+        );
+        if (focusedIndex >= 0) {
+          handleKeyDown(e, focusedIndex);
+        }
+      }}
+    >
+      {virtualization ? renderVirtualizedNodes() : renderNodes()}
+    </div>
+  );
+});
+
+TreeNodeList.displayName = 'TreeNodeList';
+
+export default TreeNodeList;