@anymux/ui-kit 0.1.0

package/src/list/components/MasonryView.tsx

@@ -0,0 +1,241 @@
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import type { ListItemsModel } from '../models/ListItemsModel';
+import type { ListItemData } from '../types/ListTypes';
+import type { MasonryItemPosition } from '../utils/MasonryLayoutEngine';
+
+// AICODE-NOTE: Simplified masonry view showing only images without labels
+// Supports both horizontal and vertical masonry layouts with proper aspect ratio handling
+
+interface MasonryViewProps {
+  model: ListItemsModel;
+  items: ListItemData[];
+  containerWidth: number;
+  containerHeight: number;
+  isHorizontal?: boolean; // true for horizontal masonry, false for vertical
+}
+
+interface MasonryItemProps {
+  item: ListItemData;
+  position: MasonryItemPosition;
+  model: ListItemsModel;
+  onClick: (item: ListItemData) => void;
+  onDoubleClick: (item: ListItemData) => void;
+}
+
+const MasonryItem: React.FC<MasonryItemProps> = observer(({ item, position, model, onClick, onDoubleClick }) => {
+  const isSelected = model.isItemSelected(item.id);
+  const isFocused = model.focusedItem === item.id;
+  // Resolve blob URL from provider cache (reactive — re-renders when ready)
+  const thumbnailUrl = item.thumbnailUrl ? model.resolveThumbnailUrl(item) : undefined;
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onClick(item);
+  };
+
+  const handleDoubleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    onDoubleClick(item);
+  };
+
+  const debugStyles = model.debugVisualization ? {
+    border: '2px solid lightcyan',
+    boxSizing: 'border-box' as const
+  } : {};
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        left: position.x,
+        top: position.y,
+        width: position.width,
+        height: position.height,
+        cursor: 'pointer',
+        backgroundColor: isSelected ? 'rgba(0, 123, 255, 0.1)' : 'transparent',
+        borderRadius: model.debugVisualization ? '0px' : '2px',
+        overflow: 'hidden',
+        transition: 'background-color 0.15s ease, box-shadow 0.15s ease',
+        boxShadow: isSelected
+          ? '0 0 0 2px rgba(0, 123, 255, 0.5)'
+          : 'none',
+        ...debugStyles
+      }}
+      onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
+      data-item-id={item.id}
+    >
+      {thumbnailUrl ? (
+        <>
+          <img
+            src={thumbnailUrl}
+            alt={item.name}
+            style={{
+              width: '100%',
+              height: '100%',
+              objectFit: 'cover',
+              display: 'block',
+              pointerEvents: 'none',
+              ...(model.debugVisualization ? { border: '1px solid lightblue' } : {})
+            }}
+            loading="lazy"
+          />
+          
+          {/* Overlay label at the bottom */}
+          <div
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              background: 'linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3), transparent)',
+              color: 'white',
+              padding: '12px 8px 8px 8px',
+              fontSize: '12px',
+              fontWeight: '500',
+              textAlign: 'left',
+              lineHeight: '1.3',
+              maxHeight: '40px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              pointerEvents: 'none',
+              ...(model.debugVisualization ? { border: '1px solid yellow' } : {})
+            }}
+          >
+            {item.name}
+          </div>
+        </>
+      ) : (
+        // Fallback for items without thumbnails
+        <div
+          style={{
+            width: '100%',
+            height: '100%',
+            backgroundColor: '#f0f0f0',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '24px',
+            color: '#888',
+            position: 'relative',
+            ...(model.debugVisualization ? { border: '1px solid orange' } : {})
+          }}
+        >
+          <div>📄</div>
+          {/* Label for non-image items */}
+          <div
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              left: 0,
+              right: 0,
+              background: 'rgba(0, 0, 0, 0.6)',
+              color: 'white',
+              padding: '8px',
+              fontSize: '11px',
+              fontWeight: '500',
+              textAlign: 'center',
+              lineHeight: '1.3',
+              maxHeight: '32px',
+              overflow: 'hidden',
+              textOverflow: 'ellipsis',
+              whiteSpace: 'nowrap',
+              pointerEvents: 'none'
+            }}
+          >
+            {item.name}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+});
+
+export const MasonryView: React.FC<MasonryViewProps> = observer(({ 
+  model, 
+  items, 
+  containerWidth, 
+  containerHeight,
+  isHorizontal = false 
+}) => {
+  // Update container size in model via effect (not during render)
+  useEffect(() => {
+    if (containerWidth > 0 && containerHeight > 0) {
+      model.updateContainerSize(containerWidth, containerHeight);
+    }
+  }, [model, containerWidth, containerHeight]);
+
+  // Calculate masonry layout directly (no useMemo — MobX observer tracks dependencies)
+  // The useEffect above sets containerSize, which triggers updateLayoutCalculators
+  // and creates the masonry engines. MobX observer re-renders when those change.
+  let masonryLayout: { layout: MasonryItemPosition[]; totalHeight: number } = { layout: [], totalHeight: 0 };
+
+  if (items.length > 0 && containerWidth > 0 && model.containerSize.width > 0) {
+    const result = isHorizontal
+      ? model.getHorizontalMasonryLayout()
+      : model.getVerticalMasonryLayout();
+
+    if (result) {
+      masonryLayout = result;
+    }
+  }
+
+  const handleItemClick = (item: ListItemData) => {
+    model.selectItem(item);
+  };
+
+  const handleItemDoubleClick = (item: ListItemData) => {
+    if (model.provider.onItemDoubleClick) {
+      model.provider.onItemDoubleClick(item);
+    }
+  };
+
+  if (items.length === 0) {
+    return (
+      <div style={{ 
+        width: '100%', 
+        height: '100%', 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center',
+        color: '#6c757d',
+        fontSize: '16px'
+      }}>
+        No items to display
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: '100%',
+        maxWidth: containerWidth,
+        height: masonryLayout.totalHeight
+      }}
+    >
+      {masonryLayout.layout.map((position) => {
+        const item = items.find(i => i.id === position.id);
+        if (!item) return null;
+
+        return (
+          <MasonryItem
+            key={item.id}
+            item={item}
+            position={position}
+            model={model}
+            onClick={handleItemClick}
+            onDoubleClick={handleItemDoubleClick}
+          />
+        );
+      })}
+    </div>
+  );
+});
+
+MasonryItem.displayName = 'MasonryItem';
+MasonryView.displayName = 'MasonryView'; 

package/src/list/components/SearchFilter.tsx

@@ -0,0 +1,44 @@
+import React, { useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import { Search, X } from 'lucide-react';
+import { ListItemsModel } from '../models/ListItemsModel';
+
+export interface SearchFilterProps {
+  model: ListItemsModel;
+  placeholder?: string;
+  className?: string;
+}
+
+export const SearchFilter = observer<SearchFilterProps>(({ model, placeholder = 'Filter...', className }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  return (
+    <div className={`relative flex items-center ${className ?? ''}`}>
+      <Search className="absolute left-1.5 w-3 h-3 text-muted-foreground pointer-events-none" />
+      <input
+        ref={inputRef}
+        type="text"
+        placeholder={placeholder}
+        value={model.searchQuery}
+        onChange={(e) => model.setSearchQuery(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === 'Escape') {
+            model.clearSearch();
+            inputRef.current?.blur();
+          }
+        }}
+        className="h-6 w-[120px] focus:w-[160px] transition-all pl-5 pr-5 text-xs rounded border border-input bg-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring"
+      />
+      {model.searchQuery && (
+        <button
+          onClick={() => { model.clearSearch(); inputRef.current?.focus(); }}
+          className="absolute right-1 p-0.5 rounded-sm hover:bg-muted text-muted-foreground hover:text-foreground"
+        >
+          <X className="w-3 h-3" />
+        </button>
+      )}
+    </div>
+  );
+});
+
+SearchFilter.displayName = 'SearchFilter';