@anymux/ui-kit 0.1.0

package/src/list/components/ListItem.tsx

@@ -0,0 +1,761 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { getItemAccessibilityProps } from '../utils/ListAccessibility';
+import { ListItemData, ListViewType } from '../types/ListTypes';
+import { ListItemsProvider } from '../providers/ListItemsProvider';
+import { ListItemsModel } from '../models/ListItemsModel';
+import { File } from 'lucide-react';
+import { lucideIconMap, iconColorMap } from '../../icons/iconMap';
+import { useFileBrowserContext } from '../../file-browser/context/FileBrowserContext';
+
+// AICODE-NOTE: Basic list item component with click handling and flexible rendering
+
+export interface ListItemProps {
+  item: ListItemData;
+  index: number;
+  totalItems: number;
+  viewType: ListViewType;
+  provider?: ListItemsProvider;
+  model?: ListItemsModel; // AICODE-NOTE: Model for debug visualization and other reactive state
+  itemWidth?: number;
+  itemHeight?: number;
+  thumbnailSize?: number; // AICODE-NOTE: Precise thumbnail size from calculator
+  isSelected?: boolean;
+  isFocused?: boolean;
+  isDraggedOver?: boolean;
+  dragOverPosition?: 'before' | 'after' | 'inside' | null;
+  canDrag?: boolean;
+  onClick?: (item: ListItemData, event: React.MouseEvent) => void;
+  onDoubleClick?: (item: ListItemData, event: React.MouseEvent) => void;
+  onContextMenu?: (item: ListItemData, event: React.MouseEvent) => void;
+  onDragStart?: (item: ListItemData, event: React.DragEvent) => void;
+  onDragOver?: (item: ListItemData, event: React.DragEvent) => void;
+  onDragLeave?: (item: ListItemData, event: React.DragEvent) => void;
+  onDrop?: (item: ListItemData, event: React.DragEvent) => void;
+}
+
+// Inline rename input component
+const InlineRenameInput: React.FC<{
+  currentName: string;
+  onCommit: (newName: string) => void;
+  onCancel: () => void;
+  className?: string;
+}> = ({ currentName, onCommit, onCancel, className }) => {
+  const [value, setValue] = useState(currentName);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const mountTimeRef = useRef(Date.now());
+  const committedRef = useRef(false);
+
+  useEffect(() => {
+    mountTimeRef.current = Date.now();
+    const raf = requestAnimationFrame(() => {
+      const input = inputRef.current;
+      if (input) {
+        input.focus();
+        const dotIndex = currentName.lastIndexOf('.');
+        input.setSelectionRange(0, dotIndex > 0 ? dotIndex : currentName.length);
+      }
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [currentName]);
+
+  const commit = () => {
+    if (committedRef.current) return;
+    committedRef.current = true;
+    const trimmed = value.trim();
+    if (trimmed && trimmed !== currentName) {
+      onCommit(trimmed);
+    } else {
+      onCancel();
+    }
+  };
+
+  const handleBlur = () => {
+    if (Date.now() - mountTimeRef.current < 200) return;
+    commit();
+  };
+
+  return (
+    <input
+      ref={inputRef}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === 'Enter') { e.preventDefault(); commit(); }
+        if (e.key === 'Escape') { e.preventDefault(); onCancel(); }
+      }}
+      onBlur={handleBlur}
+      onClick={(e) => e.stopPropagation()}
+      onDoubleClick={(e) => e.stopPropagation()}
+      className={`bg-background border border-primary rounded px-1 py-0 text-sm outline-none ${className || ''}`}
+      style={{ minWidth: 60, maxWidth: '100%' }}
+    />
+  );
+};
+
+// AICODE-NOTE: Memoized component for performance optimization
+const ListItemComponent = observer<ListItemProps>(({
+  item,
+  index,
+  totalItems,
+  viewType,
+  provider,
+  model,
+  itemWidth,
+  itemHeight,
+  thumbnailSize,
+  isSelected = false,
+  isFocused = false,
+  isDraggedOver = false,
+  dragOverPosition = null,
+  canDrag = false,
+  onClick,
+  onDoubleClick,
+  onContextMenu,
+  onDragStart,
+  onDragOver,
+  onDragLeave,
+  onDrop
+}) => {
+  // Inline rename support
+  const fileBrowserCtx = useFileBrowserContext();
+  const isRenaming = fileBrowserCtx?.renameState?.itemId === item.id && fileBrowserCtx?.renameState?.source === 'list';
+
+  // Resolve thumbnail blob URL from provider cache (reactive via MobX)
+  const resolvedThumbnailUrl = item.thumbnailUrl && model ? model.resolveThumbnailUrl(item) : item.imageUrl;
+
+  const renderNameOrRename = (extraClass?: string) => {
+    if (isRenaming && fileBrowserCtx) {
+      return (
+        <InlineRenameInput
+          currentName={fileBrowserCtx.renameState!.currentName}
+          onCommit={fileBrowserCtx.onRenameCommit}
+          onCancel={fileBrowserCtx.onRenameCancel}
+          className={extraClass}
+        />
+      );
+    }
+    return null;
+  };
+
+  // AICODE-NOTE: Generate accessibility props
+  const accessibilityProps = getItemAccessibilityProps({
+    item,
+    index,
+    totalItems,
+    isSelected,
+    isFocused,
+    viewType: viewType.id
+  });
+
+  // AICODE-NOTE: Handle clicks with proper event handling and modifiers
+  const handleClick = (event: React.MouseEvent) => {
+    if (onClick) {
+      onClick(item, event);
+    }
+  };
+
+  const handleDoubleClick = (event: React.MouseEvent) => {
+    if (onDoubleClick) {
+      onDoubleClick(item, event);
+    }
+  };
+
+  const handleContextMenu = (event: React.MouseEvent) => {
+    event.preventDefault();
+    if (onContextMenu) {
+      onContextMenu(item, event);
+    }
+  };
+
+  // AICODE-NOTE: Drag and drop event handlers
+  const handleDragStart = (event: React.DragEvent) => {
+    if (onDragStart) {
+      onDragStart(item, event);
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent) => {
+    event.preventDefault();
+    if (onDragOver) {
+      onDragOver(item, event);
+    }
+  };
+
+  const handleDragLeave = (event: React.DragEvent) => {
+    if (onDragLeave) {
+      onDragLeave(item, event);
+    }
+  };
+
+  const handleDrop = (event: React.DragEvent) => {
+    event.preventDefault();
+    if (onDrop) {
+      onDrop(item, event);
+    }
+  };
+
+  // AICODE-NOTE: Import shared resolveIcon for consistent icon rendering
+  const resolveItemIcon = (iconName: string | undefined, sizeClass = 'w-4 h-4') => {
+    const name = iconName || 'file';
+    const MappedIcon = lucideIconMap[name] || File;
+    const colorClass = iconColorMap[name] || 'text-gray-400';
+    return <MappedIcon className={`${sizeClass} ${colorClass}`} />;
+  };
+
+  // AICODE-NOTE: Render icon using provider's getItemIcon method
+  const renderIcon = (sizeClass = 'w-4 h-4') => {
+    const customIcon = provider?.getItemIcon?.(item);
+    if (customIcon) {
+      if (typeof customIcon === 'string') {
+        return resolveItemIcon(customIcon, sizeClass);
+      } else {
+        const IconComponent = customIcon;
+        return <IconComponent className={sizeClass} />;
+      }
+    }
+    if (item.icon) {
+      return resolveItemIcon(item.icon, sizeClass);
+    }
+    return <File className={`${sizeClass} text-muted-foreground`} />;
+  };
+
+  // AICODE-NOTE: Render image or icon for list/details views
+  const renderImageOrIcon = (size: 'small' | 'medium' | 'large' = 'medium') => {
+    const iconSizeClasses = {
+      small: 'w-4 h-4',
+      medium: 'w-8 h-8',
+      large: 'w-12 h-12'
+    };
+
+    const containerClasses = {
+      small: 'h-6 w-6',
+      medium: 'h-12 w-12',
+      large: 'h-16 w-16'
+    };
+
+    const imgSrc = resolvedThumbnailUrl || item.imageUrl;
+    const pxSizes = { small: 24, medium: 48, large: 64 };
+    const px = pxSizes[size];
+    if (imgSrc) {
+      return (
+        <img
+          src={imgSrc}
+          alt={item.name}
+          className="object-cover rounded flex-shrink-0"
+          style={{ width: px, height: px, maxWidth: px, maxHeight: px }}
+          loading="lazy"
+          onError={(e) => {
+            const target = e.target as HTMLImageElement;
+            target.style.display = 'none';
+            target.nextElementSibling?.classList.remove('hidden');
+          }}
+        />
+      );
+    }
+
+    return (
+      <div className={`${containerClasses[size]} flex items-center justify-center`}>
+        {renderIcon(iconSizeClasses[size])}
+      </div>
+    );
+  };
+
+  // AICODE-NOTE: Get item dimensions for variable sizing
+  const getItemDimensions = () => {
+    if (item.getDimensions) {
+      return item.getDimensions();
+    }
+    
+    if (item.aspectRatio && itemWidth) {
+      return {
+        width: itemWidth,
+        height: itemWidth / item.aspectRatio
+      };
+    }
+    
+    return null;
+  };
+
+  // AICODE-NOTE: Enhanced styles with better selection and focus states
+  const baseClasses = `
+    flex items-center gap-2 py-1 px-2 text-[13px] cursor-default select-none transition-colors duration-200
+    hover:bg-muted/50 border border-transparent rounded-md
+    ${isSelected ? 'bg-primary/10 border-primary/20' : ''}
+    ${isFocused ? 'ring-2 ring-primary/50' : ''}
+    ${isDraggedOver ? 'bg-accent/20 border-accent' : ''}
+    ${dragOverPosition === 'before' ? 'border-t-2 border-t-primary' : ''}
+    ${dragOverPosition === 'after' ? 'border-b-2 border-b-primary' : ''}
+    ${dragOverPosition === 'inside' ? 'bg-primary/5 border-primary/30' : ''}
+  `;
+
+  // AICODE-NOTE: Grid-specific styles with better spacing and sizing
+  const gridClasses = `
+    flex flex-col items-center justify-start p-3 cursor-default select-none transition-colors duration-200
+    hover:bg-muted/50 border border-transparent rounded-lg min-h-[140px] max-w-full
+    ${isSelected ? 'bg-primary/10 border-primary/20 shadow-sm' : ''}
+    ${isFocused ? 'ring-2 ring-primary/50' : ''}
+    ${isDraggedOver ? 'bg-accent/20 border-accent' : ''}
+    ${dragOverPosition === 'before' ? 'border-t-2 border-t-primary' : ''}
+    ${dragOverPosition === 'after' ? 'border-b-2 border-b-primary' : ''}
+    ${dragOverPosition === 'inside' ? 'bg-primary/5 border-primary/30' : ''}
+  `;
+
+  // AICODE-NOTE: Debug styles for layout visualization
+  const isDebugMode = model?.debugVisualization ?? false;
+  
+  const debugStyles = isDebugMode ? {
+    container: { backgroundColor: 'rgba(0, 255, 255, 0.05)', border: '2px solid rgba(0, 255, 255, 0.3)' },
+    imageContainer: { backgroundColor: 'rgba(255, 0, 0, 0.1)', border: '1px solid rgba(255, 0, 0, 0.3)' },
+    image: { backgroundColor: 'rgba(0, 255, 0, 0.1)', border: '1px solid rgba(0, 255, 0, 0.5)' },
+    icon: { backgroundColor: 'rgba(0, 0, 255, 0.1)', border: '1px solid rgba(0, 0, 255, 0.3)' },
+    textContainer: { backgroundColor: 'rgba(255, 255, 0, 0.1)', border: '1px solid rgba(255, 255, 0, 0.3)' },
+    text: { backgroundColor: 'rgba(255, 165, 0, 0.1)', border: '1px solid rgba(255, 165, 0, 0.3)' },
+    metadata: { backgroundColor: 'rgba(128, 0, 128, 0.1)', border: '1px solid rgba(128, 0, 128, 0.3)' }
+  } : {
+    container: {},
+    imageContainer: {},
+    image: {},
+    icon: {},
+    textContainer: {},
+    text: {},
+    metadata: {}
+  };
+
+  // AICODE-NOTE: Grid view layout — cell dimensions are uniform, thumbnail adapts to image aspect ratio
+  if (viewType.id === 'grid') {
+    const containerWidth = itemWidth || 200;
+    const containerHeight = itemHeight || 140;
+    const maxThumbWidth = containerWidth - 16;
+    const maxThumbHeight = thumbnailSize ?? Math.min(maxThumbWidth, containerHeight - 48);
+
+    // Get image aspect ratio (w/h) from provider cache if available
+    const imageAspectRatio = model?.provider?.getAspectRatio?.(item.path);
+    // Fit thumbnail to image aspect ratio within the available cell space
+    let thumbWidth = maxThumbWidth;
+    let thumbHeight = maxThumbHeight;
+    if (resolvedThumbnailUrl && imageAspectRatio && imageAspectRatio > 0) {
+      // Start with full width, calculate height
+      const heightFromWidth = maxThumbWidth / imageAspectRatio;
+      if (heightFromWidth <= maxThumbHeight) {
+        // Landscape or moderate: full width, shorter height
+        thumbWidth = maxThumbWidth;
+        thumbHeight = Math.round(heightFromWidth);
+      } else {
+        // Portrait: full height, narrower width
+        thumbHeight = maxThumbHeight;
+        thumbWidth = Math.round(maxThumbHeight * imageAspectRatio);
+      }
+    }
+
+    return (
+      <div
+        className={`${gridClasses} flex flex-col items-center`}
+        style={{
+          width: containerWidth,
+          height: containerHeight,
+          minHeight: containerHeight,
+          boxSizing: 'border-box',
+          ...debugStyles.container
+        }}
+        role={accessibilityProps.role}
+        aria-label={accessibilityProps.ariaLabel}
+        aria-selected={accessibilityProps.ariaSelected}
+        aria-setsize={accessibilityProps.ariaSetSize}
+        aria-posinset={accessibilityProps.ariaPosInSet}
+        tabIndex={accessibilityProps.tabIndex}
+        draggable={canDrag}
+        onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
+        onContextMenu={handleContextMenu}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        {/* AICODE-NOTE: Thumbnail container sized to image aspect ratio */}
+        <div
+          className="relative rounded-lg overflow-hidden mb-2 flex-shrink-0 flex items-center justify-center"
+          style={{
+            width: thumbWidth,
+            height: thumbHeight,
+            ...debugStyles.imageContainer
+          }}
+        >
+          {resolvedThumbnailUrl ? (
+            <img
+              src={resolvedThumbnailUrl}
+              alt={item.name}
+              className="object-cover"
+              loading="lazy"
+              style={{
+                width: '100%',
+                height: '100%',
+                ...debugStyles.image
+              }}
+            />
+          ) : (
+            <div
+              className="w-full h-full flex items-center justify-center bg-muted/30 rounded-lg"
+              style={{
+                ...debugStyles.icon
+              }}
+            >
+              {renderIcon('w-12 h-12')}
+            </div>
+          )}
+
+          {/* AICODE-NOTE: Selection overlay */}
+          {isSelected && (
+            <div className="absolute inset-0 bg-primary/20 border-2 border-primary rounded-lg" />
+          )}
+
+          {/* Checkbox overlay for grid items */}
+          {(model?.showCheckboxes) && (
+            <div className="absolute top-1 left-1 z-10">
+              <input
+                type="checkbox"
+                checked={isSelected}
+                onChange={() => {}}
+                onClick={(e) => {
+                  e.stopPropagation();
+                  model?.selectItem(item, { ctrl: true });
+                }}
+                className="h-4 w-4 rounded border-muted-foreground/50 accent-primary cursor-pointer bg-background shadow-sm"
+              />
+            </div>
+          )}
+        </div>
+        
+        {/* AICODE-NOTE: Item name with debug background */}
+        <div 
+          className="text-sm font-medium text-center px-2 leading-tight"
+          style={{ 
+            width: containerWidth - 16,
+            maxWidth: containerWidth - 16,
+            ...debugStyles.textContainer
+          }}
+        >
+          <div 
+            className="truncate"
+            style={{ 
+              width: '100%',
+              maxWidth: '100%',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              ...debugStyles.text
+            }}
+            title={item.name}
+          >
+            {isRenaming ? renderNameOrRename('text-center') : item.name}
+          </div>
+        </div>
+
+        {/* AICODE-NOTE: Optional metadata with debug background */}
+        {item.size && (
+          <div 
+            className="text-xs text-muted-foreground mt-1 text-center truncate"
+            style={{ 
+              width: containerWidth - 16,
+              maxWidth: containerWidth - 16,
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              ...debugStyles.metadata
+            }}
+          >
+            {item.size > 1024 * 1024 
+              ? `${(item.size / (1024 * 1024)).toFixed(1)} MB`
+              : `${(item.size / 1024).toFixed(1)} KB`
+            }
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // AICODE-NOTE: Masonry view layout (similar to grid but with flexible height)
+  if (viewType.id === 'masonry-horizontal' || viewType.id === 'masonry-vertical') {
+    const customDimensions = getItemDimensions();
+    const containerWidth = customDimensions?.width || itemWidth || 200;
+    const containerHeight = customDimensions?.height || itemHeight || 140;
+    
+    return (
+      <div
+        className={gridClasses}
+        style={{ 
+          width: containerWidth, 
+          minHeight: containerHeight + 80,
+          boxSizing: 'border-box',
+          ...debugStyles.container
+        }}
+        role={accessibilityProps.role}
+        aria-label={accessibilityProps.ariaLabel}
+        aria-selected={accessibilityProps.ariaSelected}
+        aria-setsize={accessibilityProps.ariaSetSize}
+        aria-posinset={accessibilityProps.ariaPosInSet}
+        tabIndex={accessibilityProps.tabIndex}
+        draggable={canDrag}
+        onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
+        onContextMenu={handleContextMenu}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        {/* AICODE-NOTE: Image or icon with variable size */}
+        <div 
+          className="flex items-center justify-center mb-3 flex-1 overflow-hidden rounded-lg"
+          style={{
+            width: containerWidth - 16,
+            height: containerHeight - 20,
+            maxWidth: containerWidth - 16,
+            maxHeight: containerHeight - 20,
+            ...debugStyles.imageContainer
+          }}
+        >
+          {resolvedThumbnailUrl ? (
+            <img
+              src={resolvedThumbnailUrl}
+              alt={item.name}
+              className="object-contain rounded"
+              style={{
+                width: 'auto',
+                height: 'auto',
+                maxWidth: '100%',
+                maxHeight: '100%',
+                ...debugStyles.image
+              }}
+              loading="lazy"
+            />
+          ) : (
+            <div 
+              className="text-4xl flex items-center justify-center w-full h-full"
+              style={{
+                ...debugStyles.icon
+              }}
+            >
+              {renderIcon()}
+            </div>
+          )}
+        </div>
+        
+        {/* AICODE-NOTE: Item name with flexible height for masonry */}
+        <div 
+          className="text-sm font-medium text-center px-2 leading-tight"
+          style={{
+            width: containerWidth - 16,
+            maxWidth: containerWidth - 16,
+            ...debugStyles.textContainer
+          }}
+        >
+          <div 
+            className="break-words"
+            style={{
+              width: '100%',
+              maxWidth: '100%',
+              ...debugStyles.text
+            }}
+            title={item.name}
+          >
+            {isRenaming ? renderNameOrRename('text-center') : item.name}
+          </div>
+        </div>
+
+        {/* AICODE-NOTE: Extended metadata for masonry view */}
+        <div 
+          className="text-xs text-muted-foreground mt-2 space-y-1 text-center"
+          style={{
+            width: containerWidth - 16,
+            maxWidth: containerWidth - 16,
+            ...debugStyles.metadata
+          }}
+        >
+          {item.size && (
+            <div className="truncate">
+              {item.size > 1024 * 1024 
+                ? `${(item.size / (1024 * 1024)).toFixed(1)} MB`
+                : `${(item.size / 1024).toFixed(1)} KB`
+              }
+            </div>
+          )}
+          {item.modified && (
+            <div className="truncate">{item.modified.toLocaleDateString()}</div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // AICODE-NOTE: Details view layout — uses CSS grid matching the header in VirtualizedDetailsView
+  if (viewType.id === 'details') {
+    // Selection/focus classes without flex/gap from baseClasses
+    const detailsStateClasses = `
+      items-center py-1 px-4 text-[13px] cursor-default select-none transition-colors duration-200
+      hover:bg-muted/50 border border-transparent
+      ${isSelected ? 'bg-primary/10 border-primary/20' : ''}
+      ${isFocused ? 'ring-2 ring-primary/50' : ''}
+      ${isDraggedOver ? 'bg-accent/20 border-accent' : ''}
+      ${dragOverPosition === 'before' ? 'border-t-2 border-t-primary' : ''}
+      ${dragOverPosition === 'after' ? 'border-b-2 border-b-primary' : ''}
+      ${dragOverPosition === 'inside' ? 'bg-primary/5 border-primary/30' : ''}
+    `;
+
+    const isCompact = model?.compactMode ?? false;
+    const colVis = model?.columnVisibility ?? { type: true, modified: true, size: true };
+    const gridCols = model?.detailsGridTemplateColumns ?? '24px 1fr 96px 128px 80px';
+    const showCb = model?.showCheckboxes ?? false;
+
+    return (
+      <div
+        className={`grid ${detailsStateClasses}`}
+        style={{
+          gridTemplateColumns: gridCols,
+          columnGap: 16,
+          ...debugStyles.container
+        }}
+        draggable={canDrag}
+        onClick={handleClick}
+        onDoubleClick={handleDoubleClick}
+        onContextMenu={handleContextMenu}
+        onDragStart={handleDragStart}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        {showCb && (
+          <div className="flex items-center justify-center">
+            <input
+              type="checkbox"
+              checked={isSelected}
+              onChange={() => {}}
+              onClick={(e) => {
+                e.stopPropagation();
+                model?.selectItem(item, { ctrl: true });
+              }}
+              className="h-3.5 w-3.5 rounded border-muted-foreground/50 accent-primary cursor-pointer"
+            />
+          </div>
+        )}
+
+        <div className="flex items-center justify-center" style={debugStyles.icon}>
+          {renderImageOrIcon('small')}
+        </div>
+
+        <div className="truncate font-medium min-w-0" style={debugStyles.text} title={item.name}>
+          {isRenaming ? renderNameOrRename() : item.name}
+        </div>
+
+        {!isCompact && colVis.type && (
+          <div className="text-sm text-muted-foreground truncate min-w-0" style={debugStyles.metadata}>
+            {item.type || 'Unknown'}
+          </div>
+        )}
+
+        {!isCompact && colVis.modified && (
+          <div className="text-sm text-muted-foreground truncate min-w-0" style={debugStyles.metadata}>
+            {item.modified ? item.modified.toLocaleDateString() : '-'}
+          </div>
+        )}
+
+        {!isCompact && colVis.size && (
+          <div className="text-sm text-muted-foreground text-right truncate min-w-0" style={debugStyles.metadata}>
+            {item.size ? `${(item.size / 1024).toFixed(1)} KB` : '-'}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // AICODE-NOTE: Default list view layout
+  const listCompact = model?.compactMode ?? false;
+  const listShowCb = model?.showCheckboxes ?? false;
+  return (
+    <div
+      className={baseClasses}
+      style={{
+        ...debugStyles.container
+      }}
+      draggable={canDrag}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      onContextMenu={handleContextMenu}
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDragLeave={handleDragLeave}
+      onDrop={handleDrop}
+    >
+      {listShowCb && (
+        <div className="flex items-center flex-shrink-0">
+          <input
+            type="checkbox"
+            checked={isSelected}
+            onChange={() => {}}
+            onClick={(e) => {
+              e.stopPropagation();
+              model?.selectItem(item, { ctrl: true });
+            }}
+            className="h-3.5 w-3.5 rounded border-muted-foreground/50 accent-primary cursor-pointer"
+          />
+        </div>
+      )}
+
+      <div
+        className="text-lg flex-shrink-0 flex items-center"
+        style={{
+          ...debugStyles.icon
+        }}
+      >
+        {renderImageOrIcon()}
+      </div>
+
+      <div
+        className="flex-1 min-w-0"
+        style={{
+          ...debugStyles.textContainer
+        }}
+      >
+        <div
+          className="font-medium truncate"
+          style={{
+            ...debugStyles.text
+          }}
+          title={item.name}
+        >
+          {isRenaming ? renderNameOrRename() : item.name}
+        </div>
+        {!listCompact && item.size && (
+          <div
+            className="text-sm text-muted-foreground"
+            style={{
+              ...debugStyles.metadata
+            }}
+          >
+            {(item.size / 1024).toFixed(1)} KB
+          </div>
+        )}
+      </div>
+
+      {!listCompact && item.modified && (
+        <div
+          className="text-xs text-muted-foreground flex-shrink-0"
+          style={{
+            ...debugStyles.metadata
+          }}
+        >
+          {item.modified.toLocaleDateString()}
+        </div>
+      )}
+    </div>
+  );
+});
+
+ListItemComponent.displayName = 'ListItem';
+
+// AICODE-NOTE: observer handles efficient re-rendering via MobX observable tracking.
+// Custom React.memo was removed because it blocked MobX-triggered re-renders
+// (e.g., thumbnail cache updates) since resolvedThumbnailUrl is computed inside render.
+export const ListItem = ListItemComponent;