@vgai/editor 0.4.0 → 0.4.1

package/src/components/AssetBrowser.tsx

@@ -1,6 +1,7 @@
 import {
   faArrowLeft,
   faBoxArchive,
+  faChevronRight,
   faCubes,
   faEllipsis,
   faFile,
@@ -12,6 +13,7 @@ import {
   faPaintbrush,
   faPuzzlePiece,
   faImage as faSceneIcon,
+  faTable,
   faTableCellsLarge,
 } from '@fortawesome/free-solid-svg-icons';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
@@ -22,6 +24,7 @@ import {
   assetDocumentKind,
 } from '../asset-workflow/asset-capabilities';
 import { confirmAssetAction } from '../asset-workflow/asset-workflow-quality';
+import { importRecipePath } from '../asset-workflow/import-contract';
 import {
   PROJECT_ASSET_COMMANDS,
   projectAssetBrowserStateKey,
@@ -56,6 +59,7 @@ import { getModelThumbnailRenderer, modelThumbnailFormat } from '../model-thumbn
 import { getCurrentProject } from '../project-manager';
 import { getStorageBackend } from '../storage';
 import { openAssetDocument } from './asset-documents';
+import { reimportStoredProjectAssets } from './asset-editor-persistence';
 import './asset-workflow.css';
 
 // --- Helpers ---
@@ -81,16 +85,16 @@ function getAssetKind(entry: AssetEntry): AssetKind {
 }
 
 const assetIconColors: Record<BrowserKind, string> = {
-  folder: '#e8a740',
-  model: '#6bc5f7',
-  scene: '#8b5cf6',
-  prefab: '#3b82f6',
-  material: '#e879f9',
-  audio: '#34d399',
-  image: '#f472b6',
-  json: '#fbbf24',
-  unknown: '#6b7280',
-  source: '#fb923c',
+  folder: 'var(--asset-icon-folder)',
+  model: 'var(--asset-icon-model)',
+  scene: 'var(--asset-icon-scene)',
+  prefab: 'var(--asset-icon-prefab)',
+  material: 'var(--asset-icon-material)',
+  audio: 'var(--asset-icon-audio)',
+  image: 'var(--asset-icon-image)',
+  json: 'var(--asset-icon-json)',
+  unknown: 'var(--asset-icon-unknown)',
+  source: 'var(--asset-icon-source)',
 };
 
 const assetIconMap: Record<BrowserKind, typeof faFolder> = {
@@ -250,6 +254,7 @@ interface PersistedAssetBrowserState {
   sort: AssetSort;
   filter: AssetFilter;
   density: number;
+  expanded: string[];
 }
 
 const DEFAULT_BROWSER_STATE: PersistedAssetBrowserState = {
@@ -258,6 +263,7 @@ const DEFAULT_BROWSER_STATE: PersistedAssetBrowserState = {
   sort: 'name',
   filter: 'all',
   density: 96,
+  expanded: ['public'],
 };
 
 function readAssetBrowserState(): PersistedAssetBrowserState {
@@ -276,7 +282,7 @@ function readAssetBrowserState(): PersistedAssetBrowserState {
       // public asset root, so those old locations migrate home once.
       currentPath:
         legacyRoot === undefined || legacyRoot === 'public' ? (parsed.currentPath ?? '') : '',
-      viewMode: legacyViewMode === 'columns' ? 'list' : legacyViewMode === 'list' ? 'list' : 'grid',
+      viewMode: legacyViewMode === 'columns' || legacyViewMode === 'list' ? legacyViewMode : 'grid',
     };
   } catch {
     return DEFAULT_BROWSER_STATE;
@@ -290,8 +296,8 @@ interface AssetBrowserProps {
 }
 
 type AssetRoot = 'public';
-type AssetViewMode = 'grid' | 'list';
-type AssetSort = 'name' | 'type' | 'size' | 'health';
+type AssetViewMode = 'grid' | 'list' | 'columns';
+type AssetSort = 'name' | 'type' | 'size' | 'modified' | 'health';
 type AssetFilter =
   | 'all'
   | 'runtime-ready'
@@ -367,6 +373,8 @@ function compareAssetEntries(
   if (left.entry.type !== right.entry.type) return left.entry.type === 'directory' ? -1 : 1;
   if (sort === 'size' && left.entry.size !== right.entry.size)
     return right.entry.size - left.entry.size;
+  if (sort === 'modified' && left.entry.modifiedAt !== right.entry.modifiedAt)
+    return right.entry.modifiedAt - left.entry.modifiedAt;
   if (sort === 'type') {
     const order = getAssetKind(left.entry).localeCompare(getAssetKind(right.entry));
     if (order !== 0) return order;
@@ -468,7 +476,7 @@ function TypedAssetThumbnail({ kind, name }: { kind: BrowserKind; name: string }
           height: 44,
           borderRadius: '50%',
           background: `radial-gradient(circle at 32% 28%, white 0, ${color} 18%, var(--vgai-bg-inset) 72%)`,
-          boxShadow: 'inset -5px -7px 10px rgb(0 0 0 / 35%)',
+          boxShadow: 'var(--vgai-shadow-md)',
         }}
       />
     );
@@ -819,6 +827,16 @@ function AssetBrowserToolbar({
               <EditorIcon icon={faList} />
             </IconButton>
           </Tooltip>
+          <Tooltip text="Column view" position="top">
+            <IconButton
+              aria-label="Column view"
+              data-testid="asset-view-columns"
+              aria-pressed={viewMode === 'columns'}
+              onClick={() => onViewModeChange('columns')}
+            >
+              <EditorIcon icon={faTable} />
+            </IconButton>
+          </Tooltip>
         </ToolbarGroup>
         <Select
           className="vgai-select vgai-project-assets-toolbar__select"
@@ -829,6 +847,7 @@ function AssetBrowserToolbar({
           <option value="name">Name</option>
           <option value="type">Type</option>
           <option value="size">Size</option>
+          <option value="modified">Modified</option>
           <option value="health">Health</option>
         </Select>
         <Select
@@ -913,6 +932,98 @@ function AssetBrowserToolbar({
   );
 }
 
+function ProjectAssetTree(props: {
+  currentPath: string;
+  expanded: ReadonlySet<string>;
+  revision: number;
+  onExpanded(path: string): void;
+  onNavigate(path: string): void;
+}) {
+  const [folders, setFolders] = useState(new Map<string, string[]>());
+
+  useEffect(() => {
+    setFolders(new Map());
+  }, [props.revision]);
+
+  useEffect(() => {
+    for (const key of props.expanded) {
+      if (!key.startsWith('public') || folders.has(key)) continue;
+      const path = key === 'public' ? '' : key.slice('public/'.length);
+      void listAssets('public', path).then((entries) => {
+        setFolders((current) => {
+          const next = new Map(current);
+          next.set(
+            key,
+            entries.filter((entry) => entry.type === 'directory').map((entry) => entry.name),
+          );
+          return next;
+        });
+      });
+    }
+  }, [folders, props.expanded]);
+
+  const renderFolder = (path: string, depth: number): React.ReactNode => {
+    const key = path ? `public/${path}` : 'public';
+    const open = props.expanded.has(key);
+    const name = path.split('/').pop() || 'public';
+    return (
+      <div key={key}>
+        <div className="vgai-asset-tree-row" style={{ paddingLeft: 6 + depth * 14 }}>
+          <IconButton
+            className="vgai-asset-tree-toggle"
+            aria-label={`${open ? 'Collapse' : 'Expand'} ${name}`}
+            aria-expanded={open}
+            onClick={() => props.onExpanded(key)}
+          >
+            <EditorIcon
+              icon={faChevronRight}
+              style={{ transform: open ? 'rotate(90deg)' : undefined }}
+            />
+          </IconButton>
+          <Button
+            variant="ghost"
+            size="compact"
+            className="vgai-asset-tree-target"
+            aria-current={props.currentPath === path ? 'page' : undefined}
+            onClick={() => props.onNavigate(path)}
+          >
+            <EditorIcon icon={faFolder} />
+            {name}
+          </Button>
+        </div>
+        {open &&
+          folders
+            .get(key)
+            ?.map((child) => renderFolder(path ? `${path}/${child}` : child, depth + 1))}
+      </div>
+    );
+  };
+
+  return (
+    <aside className="vgai-asset-tree" aria-label="Project asset sources">
+      <div className="vgai-asset-facet-title">Project</div>
+      {renderFolder('', 0)}
+      <div className="vgai-asset-facet-title">References</div>
+      <Button
+        variant="ghost"
+        size="compact"
+        className="vgai-asset-tree-target"
+        onClick={() => props.onNavigate('asset-library/local')}
+      >
+        Imported
+      </Button>
+      <Button
+        variant="ghost"
+        size="compact"
+        className="vgai-asset-tree-target"
+        onClick={() => props.onNavigate('.generated')}
+      >
+        Generated
+      </Button>
+    </aside>
+  );
+}
+
 export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
   const store = useEditorStore();
   const history = useHistoryService();
@@ -925,8 +1036,12 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
   const [density, setDensity] = useState(initial.density);
   const [searchOpen, setSearchOpen] = useState(false);
   const [entries, setEntries] = useState<AssetEntry[]>([]);
+  const [expanded, setExpanded] = useState(new Set(initial.expanded));
+  const [treeRevision, setTreeRevision] = useState(0);
   const [searchQuery, setSearchQuery] = useState('');
   const [selectedFiles, setSelectedFiles] = useState(new Set<string>());
+  const [reimportableSelectedPaths, setReimportableSelectedPaths] = useState<string[]>([]);
+  const [operationError, setOperationError] = useState<string | null>(null);
   const [selectionAnchor, setSelectionAnchor] = useState<string | null>(null);
   const [contextMenu, setContextMenu] = useState<{
     x: number;
@@ -946,9 +1061,10 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
         sort,
         filter,
         density,
+        expanded: [...expanded],
       } satisfies PersistedAssetBrowserState),
     );
-  }, [currentPath, density, filter, sort, viewMode]);
+  }, [currentPath, density, expanded, filter, sort, viewMode]);
 
   const fetchEntries = useCallback(async (root: AssetRoot, dir: string) => {
     const key = `${root}:${dir}`;
@@ -1110,6 +1226,7 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
 
   // --- Refresh ---
   const onRefresh = useCallback(() => {
+    setTreeRevision((revision) => revision + 1);
     cacheRef.current.clear();
     fetchEntries(currentRoot, currentPath);
   }, [currentRoot, currentPath, fetchEntries]);
@@ -1146,11 +1263,38 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
       ),
     [currentPath, selectedItems],
   );
+  const selectedProjectPaths = useMemo(
+    () => selectedAssetPaths.map((path) => `public/${path}`),
+    [selectedAssetPaths],
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    void Promise.all(
+      selectedAssetPaths.map(async (path) => ({
+        path,
+        reimportable: await getStorageBackend().exists(importRecipePath(path)),
+      })),
+    ).then((checks) => {
+      if (!cancelled) {
+        setReimportableSelectedPaths(
+          checks.filter((check) => check.reimportable).map((check) => check.path),
+        );
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedAssetPaths]);
 
   useEffect(() => {
     const available = new Set(browserEntries.map((item) => item.key));
     setSelectedFiles((current) => {
       const next = new Set([...current].filter((key) => available.has(key)));
+      if (current.size > 0 && next.size === 0) {
+        setSelectionAnchor(null);
+        clearSelectedAsset();
+      }
       return next.size === current.size ? current : next;
     });
   }, [browserEntries]);
@@ -1174,8 +1318,42 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
     )
       return;
     await finishOperation({ type: 'delete', paths: selectedAssetPaths });
+    setSelectedFiles(new Set());
+    setSelectionAnchor(null);
+    clearSelectedAsset();
   }, [finishOperation, selectedAssetPaths]);
 
+  const moveSelected = useCallback(async () => {
+    if (selectedAssetPaths.length === 0) return;
+    const destinationFolder = window.prompt('Move selected assets to folder', currentPath);
+    if (destinationFolder === null) return;
+    const folder = destinationFolder.replace(/^\/+|\/+$/g, '');
+    setOperationError(null);
+    try {
+      await finishOperation({
+        type: 'move-many',
+        moves: selectedAssetPaths.map((source) => ({
+          source,
+          destination: folder ? `${folder}/${source.split('/').pop()}` : source.split('/').pop()!,
+        })),
+      });
+    } catch (error) {
+      setOperationError(error instanceof Error ? error.message : String(error));
+    }
+  }, [currentPath, finishOperation, selectedAssetPaths]);
+
+  const reimportSelected = useCallback(async () => {
+    if (reimportableSelectedPaths.length === 0) return;
+    setOperationError(null);
+    try {
+      await reimportStoredProjectAssets(reimportableSelectedPaths);
+      cacheRef.current.clear();
+      await fetchEntries(currentRoot, currentPath);
+    } catch (error) {
+      setOperationError(error instanceof Error ? error.message : String(error));
+    }
+  }, [currentPath, currentRoot, fetchEntries, reimportableSelectedPaths]);
+
   const createFolder = useCallback(async () => {
     if (currentRoot !== 'public') return;
     const name = window.prompt('Folder name');
@@ -1225,6 +1403,15 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
     [currentPath, finishOperation],
   );
 
+  const toggleExpanded = useCallback((path: string) => {
+    setExpanded((current) => {
+      const next = new Set(current);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  }, []);
+
   useEffect(() => {
     const handler = (event: Event) => {
       const id = (event as CustomEvent<{ id?: string }>).detail?.id;
@@ -1232,13 +1419,15 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
       if (id === PROJECT_ASSET_COMMANDS.refresh.id) onRefresh();
       else if (id === PROJECT_ASSET_COMMANDS.import.id) importInputRef.current?.click();
       else if (id === PROJECT_ASSET_COMMANDS.createFolder.id) void createFolder();
+      else if (id === PROJECT_ASSET_COMMANDS.move.id) void moveSelected();
+      else if (id === PROJECT_ASSET_COMMANDS.reimport.id) void reimportSelected();
       else if (id === PROJECT_ASSET_COMMANDS.delete.id) void deleteSelected();
       else if (id === PROJECT_ASSET_COMMANDS.rename.id && item) void renameItem(item);
       else if (id === PROJECT_ASSET_COMMANDS.duplicate.id && item) void duplicateItem(item);
-      else if (id === PROJECT_ASSET_COMMANDS.copyPath.id && selectedAssetPaths[0])
-        void navigator.clipboard.writeText(selectedAssetPaths[0]);
-      else if (id === PROJECT_ASSET_COMMANDS.reveal.id)
-        void revealInFinder(`public/${currentPath}`);
+      else if (id === PROJECT_ASSET_COMMANDS.copyPath.id && selectedProjectPaths[0])
+        void navigator.clipboard.writeText(selectedProjectPaths[0]);
+      else if (id === PROJECT_ASSET_COMMANDS.reveal.id && selectedProjectPaths[0])
+        void revealInFinder(selectedProjectPaths[0]);
     };
     window.addEventListener('editor:project-asset-command', handler);
     return () => window.removeEventListener('editor:project-asset-command', handler);
@@ -1247,14 +1436,17 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
     currentPath,
     deleteSelected,
     duplicateItem,
+    moveSelected,
     onRefresh,
+    reimportSelected,
     renameItem,
-    selectedAssetPaths,
     selectedItems,
+    selectedProjectPaths,
   ]);
 
   return (
     <div
+      className="vgai-asset-browser"
       onPointerDown={() => setActiveScope('asset-browser')}
       onKeyDown={(event) => {
         if (isEditableTarget(event.target)) return;
@@ -1273,12 +1465,18 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
       }}
       style={{
         display: 'flex',
-        flexDirection: 'column',
         flex: 1,
         minHeight: 0,
         position: 'relative',
       }}
     >
+      <ProjectAssetTree
+        currentPath={currentPath}
+        expanded={expanded}
+        revision={treeRevision}
+        onExpanded={toggleExpanded}
+        onNavigate={(path) => navigate('public', path)}
+      />
       <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0, minHeight: 0 }}>
         <TextInput
           ref={importInputRef}
@@ -1313,19 +1511,62 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
           onRefresh={onRefresh}
         />
 
+        {operationError && (
+          <div role="alert" className="vgai-asset-operation-error">
+            {operationError}
+          </div>
+        )}
+        {selectedAssetPaths.length > 0 && (
+          <EditorToolbar label="Selected asset actions" compact>
+            <span>{selectedAssetPaths.length} selected</span>
+            <Button variant="ghost" size="compact" onClick={() => void moveSelected()}>
+              Move selected
+            </Button>
+            <Button
+              variant="ghost"
+              size="compact"
+              disabled={reimportableSelectedPaths.length === 0}
+              title={
+                reimportableSelectedPaths.length
+                  ? 'Run the saved recipes as one batch'
+                  : 'No selected asset has a saved import recipe'
+              }
+              onClick={() => void reimportSelected()}
+            >
+              Reimport selected
+            </Button>
+            <Button
+              variant="ghost"
+              size="compact"
+              aria-label="Delete selected assets"
+              onClick={() => void deleteSelected()}
+            >
+              Delete
+            </Button>
+          </EditorToolbar>
+        )}
+
         {/* One file-browser surface; grid/list are presentation modes, not navigation. */}
         <div
           className="vgai-project-assets-results"
           data-view={viewMode}
+          data-testid="project-asset-results"
+          role="listbox"
+          aria-label="Project assets"
+          aria-multiselectable="true"
           style={{
             flex: 1,
             overflowY: 'auto',
             padding: 8,
-            display: viewMode === 'grid' ? 'grid' : 'flex',
+            display: viewMode === 'list' ? 'flex' : 'grid',
             gridTemplateColumns:
-              viewMode === 'grid' ? `repeat(auto-fill, minmax(${density}px, 1fr))` : undefined,
+              viewMode === 'grid'
+                ? `repeat(auto-fill, minmax(${density}px, 1fr))`
+                : viewMode === 'columns'
+                  ? 'repeat(auto-fill, minmax(190px, 1fr))'
+                  : undefined,
             gridAutoRows: viewMode === 'grid' ? 'min-content' : undefined,
-            flexDirection: viewMode === 'grid' ? undefined : 'column',
+            flexDirection: viewMode === 'list' ? 'column' : undefined,
             gap: viewMode === 'grid' ? 6 : 1,
             alignContent: 'start',
           }}
@@ -1409,12 +1650,45 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
           >
             Duplicate <kbd>⌘D</kbd>
           </MenuItem>
+          <MenuItem
+            type="button"
+            role="menuitem"
+            data-command-id={PROJECT_ASSET_COMMANDS.move.id}
+            disabled={selectedAssetPaths.length === 0}
+            title={selectedAssetPaths.length ? 'Move selected assets' : 'Select a file to move'}
+            onClick={() => {
+              void moveSelected();
+              setContextMenu(null);
+            }}
+          >
+            Move selected…
+          </MenuItem>
+          <MenuItem
+            type="button"
+            role="menuitem"
+            data-command-id={PROJECT_ASSET_COMMANDS.reimport.id}
+            disabled={reimportableSelectedPaths.length === 0}
+            title={
+              reimportableSelectedPaths.length
+                ? 'Run the saved recipes as one batch'
+                : 'No selected asset has a saved import recipe'
+            }
+            onClick={() => {
+              void reimportSelected();
+              setContextMenu(null);
+            }}
+          >
+            Reimport selected
+          </MenuItem>
           <MenuItem
             type="button"
             role="menuitem"
             data-command-id={PROJECT_ASSET_COMMANDS.copyPath.id}
+            disabled={!selectedProjectPaths[0]}
             onClick={() => {
-              void navigator.clipboard.writeText(contextMenu.item.name);
+              if (selectedProjectPaths[0]) {
+                void navigator.clipboard.writeText(selectedProjectPaths[0]);
+              }
               setContextMenu(null);
             }}
           >
@@ -1424,8 +1698,9 @@ export function AssetBrowser({ onOpenScene }: AssetBrowserProps) {
             type="button"
             role="menuitem"
             data-command-id={PROJECT_ASSET_COMMANDS.reveal.id}
+            disabled={!selectedProjectPaths[0]}
             onClick={() => {
-              void revealInFinder(`public/${currentPath}`);
+              if (selectedProjectPaths[0]) void revealInFinder(selectedProjectPaths[0]);
               setContextMenu(null);
             }}
           >