@noya-app/noya-file-explorer 0.0.14 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-file-explorer",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
@@ -20,13 +20,13 @@
     "dev": "npm run build:main -- --watch"
   },
   "dependencies": {
-    "@noya-app/noya-designsystem": "0.1.62",
-    "@noya-app/noya-icons": "0.1.10",
-    "@noya-app/noya-multiplayer-react": "0.1.61",
-    "@noya-app/noya-keymap": "0.1.3",
-    "@noya-app/react-utils": "0.1.22",
-    "@noya-app/noya-utils": "0.1.5",
-    "@noya-app/noya-schemas": "0.1.5",
+    "@noya-app/noya-designsystem": "0.1.64",
+    "@noya-app/noya-icons": "0.1.12",
+    "@noya-app/noya-multiplayer-react": "0.1.63",
+    "@noya-app/noya-keymap": "0.1.4",
+    "@noya-app/react-utils": "0.1.24",
+    "@noya-app/noya-utils": "0.1.6",
+    "@noya-app/noya-schemas": "0.1.6",
     "imfs": "^0.1.0",
     "browser-fs-access": "0.35.0"
   },

package/src/MediaCollection.tsx

@@ -13,8 +13,11 @@ import {
   FileExplorerEmptyState,
   FileExplorerLayout,
   FileExplorerUploadButton,
+  formatByteSize,
   ListView,
   MediaThumbnail,
+  MediaThumbnailProps,
+  RelativeDropPosition,
 } from "@noya-app/noya-designsystem";
 import {
   DownloadIcon,
@@ -56,6 +59,7 @@ import {
   createMediaFile,
   createMediaFolder,
   createMediaItemTree,
+  MediaItemTree,
   PLACEHOLDER_ITEM_NAME,
   rootMediaItem,
   rootMediaItemName,
@@ -75,6 +79,7 @@ import {
   updateExpandedMap,
   validateMediaItemRename,
 } from "./utils/files";
+import { handleDataTransfer } from "./utils/handleFileDrop";
 
 const extensionToContentType = {
   svg: "image/svg+xml",
@@ -118,8 +123,10 @@ const MediaThumbnailInternal = memoGeneric(
     selected,
     size,
     path: pathProp,
+    renderThumbnailIcon,
   }: CollectionThumbnailProps<MediaItem> & {
     path?: string;
+    renderThumbnailIcon?: MediaThumbnailProps["renderThumbnailIcon"];
   }) => {
     const asset = useAsset(item.kind === "asset" ? item.assetId : undefined);
     const isRoot = item.id === rootMediaItem.id;
@@ -151,6 +158,7 @@ const MediaThumbnailInternal = memoGeneric(
         selected={selected}
         size={size}
         fileName={fileName}
+        renderThumbnailIcon={renderThumbnailIcon}
       />
     );
   }
@@ -176,6 +184,7 @@ export type MediaCollectionRef = {
   moveUpAFolder: (selectedIds: string[]) => void;
   replace: (selectedItem: MediaItem) => void;
   preview: (selectedItems: MediaItem[]) => void;
+  getItemAtIndex: (index: number) => MediaItem | undefined;
 };
 
 type MediaCollectionProps = {
@@ -230,6 +239,8 @@ type MediaCollectionProps = {
   >;
   /** @default false */
   sortable?: boolean;
+  renderThumbnailIcon?: MediaThumbnailProps["renderThumbnailIcon"];
+  onDidDeleteItems?: (items: [string, MediaItem][]) => void;
 } & Pick<
   CollectionProps<MediaItem, MenuAction>,
   | "sortableId"
@@ -239,6 +250,7 @@ type MediaCollectionProps = {
   | "scrollable"
   | "renderEmptyState"
   | "sharedDragProps"
+  | "onClickItem"
 >;
 
 export const MediaCollection = memo(
@@ -269,6 +281,9 @@ export const MediaCollection = memo(
       sortable = false,
       renderEmptyState,
       sharedDragProps,
+      onClickItem,
+      renderThumbnailIcon,
+      onDidDeleteItems,
     },
     ref
   ) {
@@ -371,8 +386,7 @@ export const MediaCollection = memo(
       }
     }, [initialExpanded]);
 
-    // Handle expansion state
-    const handleExpanded = useCallback(
+    const getExpanded = useCallback(
       (item: MediaItem) => {
         if (!expandable) return undefined;
         if (item.kind !== "folder") return undefined;
@@ -384,15 +398,27 @@ export const MediaCollection = memo(
 
     const handleDelete = useCallback(
       (selectedIds: string[]) => {
+        const deletedItems = Object.entries(media).flatMap(
+          ([path, item]): [string, MediaItem][] => {
+            if (selectedIds.includes(item.id)) {
+              return [[path, item]];
+            }
+            return [];
+          }
+        );
+
         const newMedia = deleteMediaItems({
           selectedIds,
           media,
           tree,
         });
+
         setSelectedIds([rootMediaItem.id]);
         setMedia({ name: "Delete items", timestamp: Date.now() }, newMedia);
+
+        onDidDeleteItems?.(deletedItems);
       },
-      [media, setMedia, setSelectedIds, tree]
+      [media, setMedia, setSelectedIds, tree, onDidDeleteItems]
     );
 
     const onRename = useCallback(
@@ -477,10 +503,13 @@ export const MediaCollection = memo(
       [media, tree, setMedia]
     );
 
+    const [isUploading, setIsUploading] = useState(false);
+
     const handleUpload = useCallback(
       async (selectedId: string) => {
         try {
           const files = await fileOpen({ multiple: true });
+
           if (!files || !Array.isArray(files) || files.length === 0) return;
 
           const parentPath = tree.idToPathMap.get(selectedId);
@@ -496,6 +525,8 @@ export const MediaCollection = memo(
             };
           });
 
+          setIsUploading(true);
+
           const newMediaMap = await Promise.all(uploadPromises);
 
           setMedia(
@@ -509,6 +540,8 @@ export const MediaCollection = memo(
           );
         } catch (error) {
           console.error("Failed to upload files:", error);
+        } finally {
+          setIsUploading(false);
         }
       },
       [tree.idToPathMap, setMedia, media, assetManager]
@@ -580,15 +613,13 @@ export const MediaCollection = memo(
 
     const handleMoveMediaInsideFolder = useCallback(
       (sourceItem: MediaItem, targetItem: MediaItem) => {
-        const sourceItemPath = tree.idToPathMap.get(sourceItem.id);
-        const targetItemPath = tree.idToPathMap.get(targetItem.id);
-        if (!sourceItemPath || !targetItemPath) return;
         const newMedia = moveMediaInsideFolder({
           sourceItemIds: [sourceItem.id],
           targetItemId: targetItem.id,
           media,
           tree,
         });
+
         setMedia(
           {
             name: "Move media file inside folder",
@@ -622,12 +653,12 @@ export const MediaCollection = memo(
         ],
         [
           onlySingleFolderSelected && {
-            title: "Add media",
+            title: "Upload Files",
             value: "upload",
             icon: <UploadIcon />,
           },
           onlySingleFolderSelected && {
-            title: "Add a Folder",
+            title: "Add Folder",
             value: "addFolder",
             icon: <FolderIcon />,
           },
@@ -760,6 +791,7 @@ export const MediaCollection = memo(
       replace: handleReplace,
       preview: handlePreview,
       moveMediaInsideFolder: handleMoveMediaInsideFolder,
+      getItemAtIndex: (index) => visibleItems[index],
     }));
 
     return (
@@ -771,6 +803,7 @@ export const MediaCollection = memo(
               <FileExplorerUploadButton
                 showUploadButton={showUploadButton}
                 onUpload={() => handleUpload(rootMediaItem.id)}
+                isUploading={isUploading}
               >
                 {right}
               </FileExplorerUploadButton>
@@ -801,10 +834,11 @@ export const MediaCollection = memo(
                   return "Enter folder name";
                 case "asset":
                 case "file":
+                case "noyaFile":
                   return "Enter file name";
               }
             }}
-            getExpanded={handleExpanded}
+            getExpanded={getExpanded}
             setExpanded={handleSetExpanded}
             getRenamable={(item) => {
               if (item.id === rootMediaItem.id) return false;
@@ -814,6 +848,7 @@ export const MediaCollection = memo(
             menuItems={assetContextMenuItems}
             onSelectMenuItem={handleMenuAction}
             onSelectionChange={setSelectedIds}
+            onClickItem={onClickItem}
             onDoubleClickItem={onDoubleClickItem}
             onRename={onRename}
             renamable={renamable}
@@ -822,6 +857,7 @@ export const MediaCollection = memo(
               <MediaThumbnailInternal
                 {...props}
                 path={tree.idToPathMap.get(props.item.id)}
+                renderThumbnailIcon={renderThumbnailIcon}
               />
             )}
             renderAction={renderAction}
@@ -831,7 +867,7 @@ export const MediaCollection = memo(
               if (!asset) return null;
               return (
                 <FileExplorerDetail selected={selected} size={size}>
-                  {(asset.size / 1024).toFixed(1)}KB
+                  {formatByteSize(asset.size)}
                 </FileExplorerDetail>
               );
             }}
@@ -839,7 +875,7 @@ export const MediaCollection = memo(
               renderEmptyState?.() ?? <FileExplorerEmptyState />
             }
             itemRoleDescription="clickable file item"
-            getDropTargetParentIndex={(overIndex: number) => {
+            getDropTargetParentIndex={(overIndex) => {
               const item = visibleItems[overIndex];
               const parentIndex = visibleItems.findIndex(
                 (i) => i.id === tree.getParentIdForId(item.id)
@@ -857,32 +893,31 @@ export const MediaCollection = memo(
                 return false;
               }
 
-              const sourceItem = visibleItems[sourceIndex];
-              const targetItem = visibleItems[targetIndex];
-
-              if (position !== "inside" || targetItem.kind === "asset") {
+              if (sourceListId !== sortableId || targetListId !== sortableId) {
                 return false;
               }
-              const sourcePath = tree.findPath(
-                rootMediaItem,
-                (item) => item.id === sourceItem.id
-              );
-              const targetPath = tree.findPath(
-                rootMediaItem,
-                (item) => item.id === targetItem.id
-              );
 
-              // Don't allow dragging into a descendant
-              if (!sourcePath || !targetPath) return false;
-              if (
-                isDeepEqual(sourcePath, targetPath.slice(0, sourcePath.length))
-              ) {
-                return false;
-              }
+              const sourceItem = visibleItems[sourceIndex];
+              const targetItem = visibleItems[targetIndex];
 
-              return true;
+              return acceptsMediaItemDrop({
+                position,
+                sourceItem,
+                targetItem,
+                tree,
+              });
             }}
-            onMoveItem={({ sourceIndex, targetIndex, position }) => {
+            onMoveItem={({
+              sourceListId,
+              sourceIndex,
+              targetListId,
+              targetIndex,
+              position,
+            }) => {
+              if (sourceListId !== sortableId || targetListId !== sortableId) {
+                return;
+              }
+
               const sourceItem = visibleItems[sourceIndex];
               const targetItem = visibleItems[targetIndex];
               if (position === "inside") {
@@ -892,40 +927,23 @@ export const MediaCollection = memo(
             onFilesDrop={async (event: React.DragEvent<Element>) => {
               event.preventDefault();
 
-              const files = Array.from(event.dataTransfer.files);
-              if (files.length === 0) return;
-
-              try {
-                // Upload all dropped files
-                const uploadPromises = files.map(async (file) => {
-                  const asset = await assetManager.create(file);
-                  return {
-                    asset: createMediaAsset({
-                      assetId: asset.id,
-                    }),
-                    name: file.name,
-                  };
-                });
-
-                const newMediaItems = await Promise.all(uploadPromises);
-                const rootItemPath = tree.idToPathMap.get(rootItemId);
-                if (!rootItemPath) return;
-                // Add all the media file references to our state
-                setMedia(
-                  { name: "Add media files", timestamp: Date.now() },
-                  {
-                    ...media,
-                    ...Object.fromEntries(
-                      newMediaItems.map((item) => [
-                        path.join(rootItemPath, item.name),
-                        item.asset,
-                      ])
-                    ),
-                  }
-                );
-              } catch (error) {
-                console.error("Failed to upload dropped files:", error);
-              }
+              const rootItemPath = tree.idToPathMap.get(rootItemId);
+
+              if (!rootItemPath) return;
+
+              const newMedia = await handleDataTransfer({
+                dataTransfer: event.dataTransfer,
+                rootItemPath,
+                media,
+                uploadAsset: (file) => assetManager.create(file),
+              });
+
+              if (!newMedia) return;
+
+              setMedia(
+                { name: "Add media files", timestamp: Date.now() },
+                newMedia
+              );
             }}
           />
         </FileExplorerLayout>
@@ -933,3 +951,33 @@ export const MediaCollection = memo(
     );
   })
 );
+
+export function acceptsMediaItemDrop(parameters: {
+  position: RelativeDropPosition;
+  sourceItem: MediaItem;
+  targetItem: MediaItem;
+  tree: MediaItemTree;
+}) {
+  const { position, sourceItem, targetItem, tree } = parameters;
+
+  if (position !== "inside" || targetItem.kind === "asset") {
+    return false;
+  }
+  const sourcePath = tree.findPath(
+    rootMediaItem,
+    (item) => item.id === sourceItem.id
+  );
+  const targetPath = tree.findPath(
+    rootMediaItem,
+    (item) => item.id === targetItem.id
+  );
+
+  // Don't allow dragging into a descendant
+  if (!sourcePath || !targetPath) return false;
+
+  if (isDeepEqual(sourcePath, targetPath.slice(0, sourcePath.length))) {
+    return false;
+  }
+
+  return true;
+}

package/src/utils/files.ts

@@ -38,6 +38,9 @@ export const getVisibleItems = ({
       }
       return;
     }
+    if (item.kind === "noyaFile" && fileKindFilter === "all") {
+      filteredItems.push(item);
+    }
     if (item.kind === "file" && fileKindFilter === "all") {
       filteredItems.push(item);
     }

package/src/utils/handleFileDrop.ts

@@ -0,0 +1,142 @@
+import { Asset, MediaItem, MediaMap } from "@noya-app/noya-schemas";
+import { path } from "imfs";
+import { createMediaAsset, createMediaFolder } from "./mediaItemTree";
+
+function isDirectoryEntry(
+  entry: FileSystemEntry
+): entry is FileSystemDirectoryEntry {
+  return entry.isDirectory;
+}
+
+function isFileEntry(entry: FileSystemEntry): entry is FileSystemFileEntry {
+  return entry.isFile;
+}
+
+export async function handleDataTransfer({
+  dataTransfer,
+  rootItemPath,
+  media,
+  uploadAsset,
+}: {
+  dataTransfer: DataTransfer;
+  rootItemPath: string;
+  media: MediaMap;
+  uploadAsset: (file: File) => Promise<Asset>;
+}): Promise<MediaMap | undefined> {
+  try {
+    const dataTransferItems = Array.from(dataTransfer.items ?? []);
+
+    const supportsEntries = dataTransferItems.some(
+      (item) => typeof item?.webkitGetAsEntry === "function"
+    );
+
+    type DroppedFile = { file: File; relativePath: string };
+
+    const collectFromEntry = async (
+      entry: FileSystemEntry,
+      basePath: string
+    ): Promise<DroppedFile[]> => {
+      if (!entry) return [];
+      if (isFileEntry(entry)) {
+        const file: File = await new Promise((resolve) =>
+          (entry as FileSystemFileEntry).file((f: File) => resolve(f))
+        );
+        return [
+          {
+            file,
+            relativePath: path.join(basePath, file.name),
+          },
+        ];
+      }
+      if (isDirectoryEntry(entry)) {
+        const reader = entry.createReader();
+        const readAll = async (): Promise<FileSystemEntry[]> => {
+          const all: FileSystemEntry[] = [];
+          // readEntries may return partial results; loop until empty
+          // eslint-disable-next-line no-constant-condition
+          while (true) {
+            const entries: FileSystemEntry[] = await new Promise((resolve) =>
+              reader.readEntries((ents: FileSystemEntry[]) => resolve(ents))
+            );
+            if (!entries.length) break;
+            all.push(...entries);
+          }
+          return all;
+        };
+        const children = await readAll();
+        const results = await Promise.all(
+          children.map((child) =>
+            collectFromEntry(child, path.join(basePath, entry.name))
+          )
+        );
+        return results.flat();
+      }
+      return [];
+    };
+
+    let dropped: DroppedFile[] = [];
+
+    if (supportsEntries) {
+      const topLevelEntries = dataTransferItems.flatMap((item) => {
+        const entry = item.webkitGetAsEntry?.();
+        if (!entry) return [];
+        return [entry];
+      });
+      const nested = await Promise.all(
+        topLevelEntries.map((entry) => collectFromEntry(entry, ""))
+      );
+      dropped = nested.flat();
+    } else {
+      const files = Array.from(dataTransfer.files);
+      if (files.length === 0) return;
+      dropped = files.map((file) => ({
+        file,
+        // Best effort: try webkitRelativePath; fall back to name
+        relativePath:
+          file.webkitRelativePath && file.webkitRelativePath.length > 0
+            ? file.webkitRelativePath
+            : file.name,
+      }));
+    }
+
+    if (dropped.length === 0) return;
+
+    const folderRelativePaths = new Set<string>();
+    for (const { relativePath } of dropped) {
+      const dir = path.dirname(relativePath);
+      if (dir && dir !== ".") {
+        const parts = dir.split("/").filter(Boolean);
+        let acc = "";
+        for (const part of parts) {
+          acc = acc ? path.join(acc, part) : part;
+          folderRelativePaths.add(acc);
+        }
+      }
+    }
+
+    const folderEntries: [string, MediaItem][] = Array.from(folderRelativePaths)
+      .map((rel) => path.join(rootItemPath, rel))
+      .filter((full) => !media[full])
+      .map((full) => [full, createMediaFolder() as MediaItem]);
+
+    const uploadResults = await Promise.all(
+      dropped.map(
+        async ({ file, relativePath }): Promise<[string, MediaItem]> => {
+          const asset = await uploadAsset(file);
+
+          return [
+            path.join(rootItemPath, relativePath),
+            createMediaAsset({ assetId: asset.id }) as MediaItem,
+          ];
+        }
+      )
+    );
+
+    return {
+      ...media,
+      ...Object.fromEntries([...folderEntries, ...uploadResults]),
+    };
+  } catch (error) {
+    console.error("Failed to upload dropped files:", error);
+  }
+}