@noya-app/noya-file-explorer 0.0.15 → 0.0.17

package/src/ResourceExplorer.tsx

@@ -0,0 +1,1141 @@
+/* eslint-disable @shopify/prefer-early-return */
+import {
+  ActionMenu,
+  Chip,
+  CollectionProps,
+  CollectionRef,
+  CollectionRenderActionProps,
+  CollectionThumbnailProps,
+  CollectionViewType,
+  createSectionedMenu,
+  cssVars,
+  FileExplorerCollection,
+  FileExplorerDetail,
+  FileExplorerEmptyState,
+  FileExplorerLayout,
+  FileExplorerUploadButton,
+  formatByteSize,
+  ListView,
+  MediaThumbnail,
+  MediaThumbnailProps,
+  RelativeDropPosition,
+  useOpenConfirmationDialog,
+} from "@noya-app/noya-designsystem";
+import {
+  DownloadIcon,
+  FolderIcon,
+  InputIcon,
+  OpenInNewWindowIcon,
+  ResetIcon,
+  TrashIcon,
+  UpdateIcon,
+  UploadIcon,
+} from "@noya-app/noya-icons";
+import {
+  MultiplayerPatchMetadata,
+  useAsset,
+  useAssetManager,
+  useAssets,
+} from "@noya-app/noya-multiplayer-react";
+import {
+  AssetResourceCreate,
+  createAssetResource,
+  createDirectoryResource,
+  createResourceTree,
+  diffResourceMaps,
+  PLACEHOLDER_ITEM_NAME,
+  Resource,
+  ResourceCreateMap,
+  ResourceMap,
+  ResourceTree,
+  rootResource,
+  rootResourceName,
+} from "@noya-app/noya-schemas";
+import { Base64, groupBy, isDeepEqual, uuid } from "@noya-app/noya-utils";
+import {
+  AutoSizer,
+  downloadUrl,
+  memoGeneric,
+  useControlledOrUncontrolled,
+} from "@noya-app/react-utils";
+import { fileOpen } from "browser-fs-access";
+import {
+  forwardRef,
+  memo,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+
+import { Size } from "@noya-app/noya-geometry";
+import { path } from "imfs";
+import React from "react";
+import { handleDataTransfer } from "./utils/handleFileDrop";
+import {
+  deleteResources,
+  ExpandedMap,
+  FileKindFilter,
+  getDepthMap,
+  getVisibleItems,
+  moveMediaInsideFolder,
+  moveUpAFolder,
+  renameResourceAndDescendantPaths,
+  updateExpandedMap,
+  validateResourceRename,
+} from "./utils/resourceUtils";
+
+export const gridThumbnailDimension = {
+  width: 800,
+  height: 800,
+};
+
+export const ResourceThumbnail = memoGeneric(
+  ({
+    item,
+    selected,
+    size,
+    path: pathProp,
+    renderThumbnailIcon,
+    className,
+    url: urlProp,
+    contentType: contentTypeProp,
+    viewType,
+  }: CollectionThumbnailProps<Resource> & {
+    path?: string;
+    renderThumbnailIcon?: MediaThumbnailProps["renderThumbnailIcon"];
+    className?: string;
+    url?: string;
+    contentType?: string;
+    viewType?: CollectionViewType;
+  }) => {
+    const asset = useAsset(item.type === "asset" ? item.assetId : undefined);
+    const isRoot = item.id === rootResource.id;
+    const isFolder = item.type === "directory";
+
+    let contentType: string | undefined;
+    let url: string | undefined;
+    // let width: number | undefined;
+    // let height: number | undefined;
+
+    if (asset) {
+      contentType = asset.contentType;
+      // if (contentType?.startsWith("image/")) {
+      url = asset.url;
+      // }
+      // width = asset.width ?? undefined;
+      // height = asset.height ?? undefined;
+    } else if (urlProp) {
+      url = urlProp;
+      contentType = contentTypeProp;
+    }
+
+    const fileName = pathProp ? path.basename(pathProp) : undefined;
+    // const dimensions = width && height ? { width, height } : undefined;
+
+    return (
+      <MediaThumbnail
+        contentType={contentType}
+        iconName={isRoot ? "HomeIcon" : isFolder ? "FolderIcon" : undefined}
+        url={url}
+        selected={selected}
+        size={size}
+        fileName={fileName}
+        renderThumbnailIcon={renderThumbnailIcon}
+        dimensions={viewType === "grid" ? gridThumbnailDimension : undefined}
+        className={className}
+      />
+    );
+  }
+);
+
+type MenuAction =
+  | "preview"
+  | "download"
+  | "upload"
+  | "rename"
+  | "replace"
+  | "delete"
+  | "move"
+  | "addFolder";
+
+export type ResourceExplorerRef = {
+  upload: (selectedId: string) => void;
+  delete: (selectedIds: string[]) => void;
+  download: (selectedItems: Resource[]) => void;
+  rename: (selectedItemId: string) => void;
+  addFolder: (currentFolderId: string) => void;
+  moveUpAFolder: (selectedIds: string[]) => void;
+  replace: (selectedItem: Resource) => void;
+  preview: (selectedItems: Resource[]) => void;
+  getItemAtIndex: (index: number) => Resource | undefined;
+};
+
+type ResourceExplorerProps = {
+  parentFileId: string;
+  onSelectionChange?: (
+    selectedIds: string[],
+    event?: ListView.ClickInfo
+  ) => void;
+  selectedIds?: string[];
+  media: ResourceMap;
+  setMedia?: (
+    metadata: Partial<MultiplayerPatchMetadata>,
+    media: ResourceCreateMap
+  ) => void;
+  /** @default false */
+  readOnly?: boolean;
+  /** @default "list" */
+  viewType?: CollectionViewType;
+  /**
+   * Whether to show assets or directories or all media items
+   *
+   * @default "all"
+   * */
+  fileKindFilter?: FileKindFilter;
+  /**
+   * Whether to show the root item
+   *
+   * @default false
+   * */
+  showRootItem?: boolean;
+  /** Whether to expand all directories by default */
+  initialExpanded?: ExpandedMap;
+  /**
+   * Callback for when an item is double-clicked
+   */
+  onDoubleClickItem?: (resourceItemId: string) => void;
+  /**
+   * If provided, only show items that are descendants of this folder
+   */
+  rootItemId?: string;
+  title?: ReactNode;
+  right?: ReactNode;
+  className?: string;
+  showUploadButton?: boolean;
+  /**
+   * If true, show all descendants of all directories within a collection
+   * @default true
+   * */
+  showAllDescendants?: boolean;
+  renderAction?: Exclude<
+    CollectionProps<Resource, MenuAction>["renderAction"],
+    "menu"
+  >;
+  /** @default false */
+  sortable?: boolean;
+  renderThumbnailIcon?: MediaThumbnailProps["renderThumbnailIcon"];
+  onDidDeleteItems?: (items: [string, Resource][]) => void;
+  onAssetsUploaded?: (mediaMap: Record<string, AssetResourceCreate>) => void;
+
+  publishedResources?: Record<string, Resource>;
+  virtualized?: boolean;
+
+  renderUser?: (resource: Resource) => ReactNode;
+} & Pick<
+  CollectionProps<Resource, MenuAction>,
+  | "sortableId"
+  | "size"
+  | "expandable"
+  | "renamable"
+  | "scrollable"
+  | "renderEmptyState"
+  | "sharedDragProps"
+  | "onClickItem"
+  | "itemClassName"
+  | "itemStyle"
+>;
+
+export const ResourceExplorer = memo(
+  forwardRef<ResourceExplorerRef, ResourceExplorerProps>(
+    function ResourceExplorer(
+      {
+        parentFileId,
+        sortableId,
+        onSelectionChange,
+        selectedIds: selectedIdsProp,
+        media,
+        setMedia: setMediaProp,
+        readOnly = false,
+        viewType = "list",
+        fileKindFilter = "all",
+        showRootItem = false,
+        initialExpanded,
+        expandable = true,
+        renamable = true,
+        onDoubleClickItem,
+        rootItemId = rootResource.id,
+        title,
+        size = "medium",
+        right,
+        renderAction: renderActionProp,
+        className,
+        showUploadButton = true,
+        showAllDescendants = true,
+        scrollable = false,
+        sortable = false,
+        renderEmptyState,
+        sharedDragProps,
+        onClickItem,
+        renderThumbnailIcon,
+        onDidDeleteItems,
+        onAssetsUploaded,
+        itemClassName,
+        itemStyle,
+        publishedResources,
+        virtualized = false,
+        renderUser,
+      },
+      ref
+    ) {
+      const setMedia = useCallback(
+        (...args: Parameters<Extract<typeof setMediaProp, Function>>) => {
+          setMediaProp?.(...args);
+        },
+        [setMediaProp]
+      );
+      const tree = useMemo(() => createResourceTree(media), [media]);
+      const [tempItem, setTempItem] = useState<[string, Resource] | undefined>(
+        undefined
+      );
+      const mediaWithTempItem = useMemo(
+        () => ({
+          ...media,
+          ...(tempItem ? { [tempItem[0]]: tempItem[1] } : {}),
+        }),
+        [media, tempItem]
+      );
+      const treeWithTempItem = useMemo(
+        () => createResourceTree(mediaWithTempItem),
+        [mediaWithTempItem]
+      );
+      const temp = useMemo(
+        () => ({
+          media: mediaWithTempItem,
+          tree: treeWithTempItem,
+        }),
+        [mediaWithTempItem, treeWithTempItem]
+      );
+      const [selectedIds, setSelectedIds] = useControlledOrUncontrolled<
+        string[]
+      >({
+        defaultValue: [],
+        value: selectedIdsProp,
+        onChange: onSelectionChange,
+      });
+      const assetManager = useAssetManager();
+      const assets = useAssets();
+      const [expandedMap, setExpandedMap] = useState<ExpandedMap>({});
+      const visibleItems = useMemo(
+        () =>
+          getVisibleItems({
+            expandedMap,
+            fileKindFilter: fileKindFilter,
+            rootItemId,
+            tree: treeWithTempItem,
+            showAllDescendants,
+            showRootItem,
+          }),
+        [
+          expandedMap,
+          fileKindFilter,
+          rootItemId,
+          treeWithTempItem,
+          showAllDescendants,
+          showRootItem,
+        ]
+      );
+      const depthMap = useMemo(
+        () => getDepthMap(rootResource, treeWithTempItem, showAllDescendants),
+        [treeWithTempItem, showAllDescendants]
+      );
+      const collectionRef = useRef<CollectionRef>(null);
+      const selectedResources = useMemo(
+        () =>
+          treeWithTempItem.resourcesWithRoot.filter((item) =>
+            selectedIds.includes(item.id)
+          ),
+        [treeWithTempItem, selectedIds]
+      );
+
+      const groupedItems = groupBy(selectedResources, (item) => item.type);
+      const selectedAssetItems = groupedItems.asset ?? [];
+      const selectedFolderItems = groupedItems.folder ?? [];
+
+      const singleItemSelected = selectedResources.length === 1;
+      const onlyAssetsSelected =
+        selectedAssetItems.length > 0 &&
+        selectedAssetItems.length === selectedResources.length;
+      const onlyFoldersSelected =
+        selectedFolderItems.length > 0 &&
+        selectedFolderItems.length === selectedResources.length;
+      const onlySingleFolderSelected =
+        onlyFoldersSelected && selectedFolderItems.length === 1;
+      const onlySingleAssetSelected =
+        onlyAssetsSelected && selectedAssetItems.length === 1;
+      const rootSelected = selectedIds.includes(rootResource.id);
+      const sameParentSelected = selectedResources.every((item) => {
+        const itemPath = tree.idToPathMap.get(item.id);
+        const firstSelectedPath = tree.idToPathMap.get(selectedIds[0]);
+        if (!itemPath || !firstSelectedPath) return false;
+        return itemPath.startsWith(path.dirname(firstSelectedPath));
+      });
+
+      useEffect(() => {
+        if (initialExpanded) {
+          setExpandedMap(initialExpanded);
+        }
+      }, [initialExpanded]);
+
+      const getExpanded = useCallback(
+        (item: Resource) => {
+          if (!expandable) return undefined;
+          if (item.type !== "directory") return undefined;
+          if (item.id === rootResource.id) return undefined;
+          return expandedMap[item.id] ?? false;
+        },
+        [expandedMap, expandable]
+      );
+
+      const openConfirmationDialog = useOpenConfirmationDialog();
+
+      const handleDelete = useCallback(
+        async (selectedIds: string[]) => {
+          const ok = await openConfirmationDialog({
+            title: "Delete items",
+            description:
+              "Are you sure you want to delete these items? This action cannot be undone.",
+          });
+
+          if (!ok) return;
+
+          const deletedItems = Object.entries(media).flatMap(
+            ([path, item]): [string, Resource][] => {
+              if (selectedIds.includes(item.id)) {
+                return [[path, item]];
+              }
+              return [];
+            }
+          );
+
+          const newMedia = deleteResources({
+            selectedIds,
+            media,
+            tree,
+          });
+
+          setSelectedIds([rootResource.id]);
+          setMedia({ name: "Delete items", timestamp: Date.now() }, newMedia);
+
+          onDidDeleteItems?.(deletedItems);
+        },
+        [
+          media,
+          setMedia,
+          setSelectedIds,
+          tree,
+          onDidDeleteItems,
+          openConfirmationDialog,
+        ]
+      );
+
+      const onRename = useCallback(
+        (selectedItem: Resource, newName: string) => {
+          if (!renamable) return;
+          const selectedItemPath = treeWithTempItem.idToPathMap.get(
+            selectedItem.id
+          );
+          if (!selectedItemPath) return;
+          const renameIsValid = validateResourceRename({
+            basename: newName,
+            selectedItemPath,
+            media: temp.media,
+          });
+          if (!renameIsValid) {
+            setTempItem(undefined);
+            return;
+          }
+          const mediaWithRenamedDescendantPaths =
+            renameResourceAndDescendantPaths({
+              newName,
+              selectedItemPath,
+              media: temp.media,
+              tree: temp.tree,
+            });
+          setMedia(
+            { name: "Rename media item", timestamp: Date.now() },
+            mediaWithRenamedDescendantPaths
+          );
+          setTempItem(undefined);
+        },
+        [
+          renamable,
+          setMedia,
+          temp.media,
+          temp.tree,
+          treeWithTempItem.idToPathMap,
+        ]
+      );
+
+      const handleAddFolder = useCallback(
+        (currentFolderId: string) => {
+          const currentFolderPath = tree.idToPathMap.get(currentFolderId);
+          if (!currentFolderPath) return;
+          const newFolderPath = path.join(
+            currentFolderPath,
+            PLACEHOLDER_ITEM_NAME
+          );
+          const newFolder = createDirectoryResource({
+            path: newFolderPath,
+            accessibleByFileId: parentFileId,
+            id: newFolderPath,
+            stableId: uuid(),
+          });
+          setTempItem([newFolderPath, newFolder]);
+          setTimeout(() => {
+            collectionRef.current?.editName(newFolder.id);
+          }, 50);
+        },
+        [parentFileId, tree]
+      );
+
+      const handleMoveUpAFolder = useCallback(
+        (selectedIds: string[]) => {
+          const newMedia = moveUpAFolder({
+            tree,
+            media,
+            selectedIds,
+          });
+          if (!newMedia) return;
+          setMedia({ name: "Move items", timestamp: Date.now() }, newMedia);
+        },
+        [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);
+
+            if (!parentPath) return;
+
+            const uploadPromises = files.map(async (file) => {
+              const assetPath = path.join(parentPath, path.basename(file.name));
+
+              return {
+                assetPath,
+                asset: createAssetResource({
+                  id: uuid(),
+                  asset: {
+                    content: Base64.encode(await file.arrayBuffer()),
+                    contentType: file.type,
+                    encoding: "base64",
+                  },
+                  path: assetPath,
+                  accessibleByFileId: parentFileId,
+                  stableId: uuid(),
+                }),
+              };
+            });
+
+            setIsUploading(true);
+
+            const uploadedAssets = await Promise.all(uploadPromises);
+            const newMediaMap = Object.fromEntries(
+              uploadedAssets.map(({ assetPath, asset }) => [assetPath, asset])
+            );
+
+            setMedia(
+              { name: "Add media items", timestamp: Date.now() },
+              {
+                ...media,
+                ...newMediaMap,
+              }
+            );
+
+            onAssetsUploaded?.(newMediaMap);
+          } catch (error) {
+            if (error instanceof Error && error.name === "AbortError") {
+              // Ignore user-cancelled file picker
+            } else {
+              console.error("Failed to upload files:", error);
+            }
+          } finally {
+            setIsUploading(false);
+          }
+        },
+        [tree, setMedia, media, onAssetsUploaded, parentFileId]
+      );
+
+      const handleDownload = useCallback(
+        async (selectedItems: Resource[]) => {
+          const downloadPromises = selectedItems
+            .filter((item) => item.type === "asset")
+            .map(async (item) => {
+              const asset = assets.find((a) => a.id === item.assetId);
+              if (!asset?.url) return;
+              return downloadUrl(asset.url, tree.getNameForId(item.id));
+            });
+
+          await Promise.all(downloadPromises);
+        },
+        [assets, tree]
+      );
+
+      const handlePreview = useCallback(
+        async (selectedItems: Resource[]) => {
+          const previewPromises = selectedItems
+            .filter((item) => item.type === "asset")
+            .map(async (item) => {
+              const asset = assets.find((a) => a.id === item.assetId);
+              if (!asset?.url) return;
+              return window?.open(asset.url, "_blank");
+            });
+
+          await Promise.all(previewPromises);
+        },
+        [assets]
+      );
+
+      const handleReplace = useCallback(
+        async (selectedItem: Resource) => {
+          try {
+            const file = await fileOpen();
+            if (!file) return;
+            // Create the asset
+            const asset = await assetManager.create(file);
+            const oldFile = selectedItem;
+            const oldFilePath = tree.idToPathMap.get(oldFile.id);
+            if (!oldFilePath || oldFile.type !== "asset") return;
+            setMedia(
+              { name: "Replace media file", timestamp: Date.now() },
+              {
+                ...media,
+                [oldFilePath]: createAssetResource({
+                  ...oldFile,
+                  assetId: asset.id,
+                }),
+              }
+            );
+          } catch (error) {
+            if (error instanceof Error && error.name === "AbortError") {
+              // Ignore user-cancelled file picker
+            } else {
+              console.error("Failed to upload files:", error);
+            }
+          }
+        },
+        [media, setMedia, assetManager, tree]
+      );
+
+      const handleRename = useCallback(
+        (selectedItemId: string) => {
+          collectionRef.current?.editName(selectedItemId);
+        },
+        [collectionRef]
+      );
+
+      const handleMoveMediaInsideFolder = useCallback(
+        (sourceItems: Resource[], targetItem: Resource) => {
+          const newMedia = moveMediaInsideFolder({
+            sourceItemIds: sourceItems.map((item) => item.id),
+            targetItemId: targetItem.id,
+            media,
+            tree,
+          });
+
+          setMedia(
+            {
+              name: "Move media file inside folder",
+              timestamp: Date.now(),
+            },
+            newMedia
+          );
+        },
+        [media, setMedia, tree]
+      );
+
+      const assetContextMenuItems = useMemo(() => {
+        return createSectionedMenu<MenuAction>(
+          [
+            !rootSelected &&
+              singleItemSelected && {
+                title: "Rename",
+                value: "rename",
+                icon: <InputIcon />,
+              },
+            onlySingleAssetSelected && {
+              title: "Replace",
+              value: "replace",
+              icon: <UpdateIcon />,
+            },
+            !rootSelected && {
+              title: "Delete",
+              value: "delete",
+              icon: <TrashIcon />,
+            },
+          ],
+          [
+            onlySingleFolderSelected && {
+              title: "Upload Files",
+              value: "upload",
+              icon: <UploadIcon />,
+            },
+            onlySingleFolderSelected && {
+              title: "Add Folder",
+              value: "addFolder",
+              icon: <FolderIcon />,
+            },
+            onlyAssetsSelected &&
+              tree.resourcesWithRoot.length > 0 && {
+                title: "Download",
+                value: "download",
+                icon: <DownloadIcon />,
+              },
+            onlySingleAssetSelected && {
+              title: "Preview",
+              value: "preview",
+              icon: <OpenInNewWindowIcon />,
+            },
+          ],
+          [
+            !rootSelected &&
+              sameParentSelected && {
+                title: "Move up a folder",
+                value: "move",
+                icon: <ResetIcon />,
+              },
+          ]
+        );
+      }, [
+        rootSelected,
+        singleItemSelected,
+        onlySingleAssetSelected,
+        onlySingleFolderSelected,
+        onlyAssetsSelected,
+        tree.resourcesWithRoot.length,
+        sameParentSelected,
+      ]);
+
+      const handleMenuAction = useCallback(
+        async (action: MenuAction, selectedItems: Resource[]) => {
+          if (selectedItems.length === 0) return;
+
+          switch (action) {
+            case "rename":
+              handleRename(selectedItems[0].id);
+              return;
+            case "delete":
+              handleDelete(selectedIds);
+              return;
+            case "replace":
+              handleReplace(selectedItems[0]);
+              return;
+            case "upload":
+              handleUpload(selectedItems[0].id);
+              return;
+            case "addFolder":
+              handleAddFolder(selectedItems[0].id);
+              return;
+            case "preview":
+              handlePreview(selectedItems);
+              return;
+            case "download":
+              handleDownload(selectedItems);
+              return;
+            case "move":
+              handleMoveUpAFolder(selectedIds);
+              return;
+          }
+        },
+        [
+          handleRename,
+          handleDelete,
+          selectedIds,
+          handleReplace,
+          handleUpload,
+          handleAddFolder,
+          handlePreview,
+          handleDownload,
+          handleMoveUpAFolder,
+        ]
+      );
+
+      const handleSetExpanded = useCallback(
+        (item: Resource, expanded: boolean) => {
+          setExpandedMap((prev) =>
+            updateExpandedMap({
+              item,
+              expanded,
+              expandable,
+              expandedMap: prev,
+              tree,
+            })
+          );
+        },
+        [expandable, tree]
+      );
+
+      const renderAction = useMemo(() => {
+        if (renderActionProp) return renderActionProp;
+
+        return ({
+          selected,
+          onOpenChange,
+        }: CollectionRenderActionProps<Resource>) => (
+          <div
+            style={{
+              minWidth: "75px",
+              display: "flex",
+              justifyContent: "flex-end",
+            }}
+          >
+            <ActionMenu
+              menuItems={assetContextMenuItems}
+              onSelect={(action) => handleMenuAction(action, selectedResources)}
+              selected={selected}
+              onOpenChange={onOpenChange}
+              variant={viewType === "grid" ? "normal" : "bare"}
+              style={{
+                backgroundColor: selected
+                  ? cssVars.colors.selectedListItemBackground
+                  : "transparent",
+                color: selected
+                  ? cssVars.colors.selectedListItemText
+                  : undefined,
+              }}
+            />
+          </div>
+        );
+      }, [
+        assetContextMenuItems,
+        handleMenuAction,
+        renderActionProp,
+        selectedResources,
+        viewType,
+      ]);
+
+      useImperativeHandle(ref, () => ({
+        upload: (selectedId: string) => handleUpload(selectedId),
+        delete: handleDelete,
+        download: handleDownload,
+        rename: handleRename,
+        addFolder: handleAddFolder,
+        moveUpAFolder: handleMoveUpAFolder,
+        replace: handleReplace,
+        preview: handlePreview,
+        moveMediaInsideFolder: handleMoveMediaInsideFolder,
+        getItemAtIndex: (index) => visibleItems[index],
+      }));
+
+      const diffResources = useMemo(() => {
+        if (!publishedResources) return;
+
+        const diff = diffResourceMaps(publishedResources, media, "stableId");
+
+        return {
+          added: new Set(
+            diff.addedResources.map((resource) => resource.stableId)
+          ),
+          removed: new Set(
+            diff.removedResources.map((resource) => resource.stableId)
+          ),
+          modified: new Set(
+            diff.modifiedResources.map((resource) => resource.stableId)
+          ),
+        };
+      }, [media, publishedResources]);
+
+      const keyExtractor = useCallback((item: Resource) => item.id, []);
+
+      const renderCollection = (virtualizedSize: Size | undefined) => (
+        <FileExplorerCollection<Resource, MenuAction>
+          ref={collectionRef}
+          sortableId={sortableId}
+          scrollable={scrollable}
+          sharedDragProps={sharedDragProps}
+          items={visibleItems}
+          viewType={viewType}
+          size={size}
+          getId={keyExtractor}
+          getName={(file) => {
+            if (file.id === tempItem?.[1].id) {
+              return "";
+            }
+            return treeWithTempItem.getNameForId(file.id);
+          }}
+          expandable={expandable}
+          sortable={sortable}
+          getPlaceholder={(item) => {
+            switch (item.type) {
+              case "directory":
+                return "Enter folder name";
+              case "resource":
+              case "asset":
+              case "file":
+                return "Enter file name";
+            }
+          }}
+          getExpanded={getExpanded}
+          setExpanded={handleSetExpanded}
+          getRenamable={(item) => {
+            if (item.id === rootResource.id) return false;
+            return true;
+          }}
+          getDepth={(item) => depthMap[item.id]}
+          menuItems={assetContextMenuItems}
+          onSelectMenuItem={handleMenuAction}
+          onSelectionChange={setSelectedIds}
+          onClickItem={onClickItem}
+          onClick={() => {
+            setSelectedIds([]);
+          }}
+          onDoubleClickItem={onDoubleClickItem}
+          onRename={onRename}
+          renamable={renamable}
+          selectedIds={selectedIds}
+          itemClassName={itemClassName}
+          itemStyle={itemStyle}
+          virtualized={virtualizedSize}
+          renderThumbnail={(props) => (
+            <ResourceThumbnail
+              {...props}
+              path={tree.idToPathMap.get(props.item.id)}
+              renderThumbnailIcon={renderThumbnailIcon}
+              viewType={viewType}
+            />
+          )}
+          renderAction={renderAction}
+          renderRight={(file) => {
+            if (file.type !== "asset") return null;
+
+            const publishStatus = getPublishStatus({
+              resource: file,
+              diff: diffResources,
+            });
+
+            return (
+              <div
+                style={{ display: "flex", alignItems: "center", gap: "1.5px" }}
+              >
+                {publishStatus && (
+                  <Chip
+                    colorScheme={
+                      publishStatus === "Modified"
+                        ? "info"
+                        : publishStatus === "Added"
+                          ? "secondary"
+                          : "primary"
+                    }
+                  >
+                    {publishStatus}
+                  </Chip>
+                )}
+                {renderUser?.(file)}
+              </div>
+            );
+          }}
+          renderDetail={(file, selected) => {
+            if (file.type !== "asset") return null;
+
+            const asset = assets.find((a) => a.id === file.assetId);
+
+            if (!asset) return null;
+
+            return (
+              <FileExplorerDetail
+                selected={selected}
+                size={size}
+                style={{ minWidth: "75px", textAlign: "right" }}
+              >
+                {formatByteSize(asset.size)}
+              </FileExplorerDetail>
+            );
+          }}
+          renderEmptyState={() =>
+            renderEmptyState?.() ?? <FileExplorerEmptyState />
+          }
+          itemRoleDescription="clickable file item"
+          getDropTargetParentIndex={(overIndex) => {
+            const item = visibleItems[overIndex];
+            const parentIndex = visibleItems.findIndex(
+              (i) => i.id === tree.getParentIdForId(item.id)
+            );
+            return parentIndex === -1 ? undefined : parentIndex;
+          }}
+          acceptsDrop={({
+            sourceIndex,
+            targetIndex,
+            position,
+            sourceListId,
+            targetListId,
+          }) => {
+            if (sourceListId !== targetListId) {
+              return false;
+            }
+
+            if (sourceListId !== sortableId || targetListId !== sortableId) {
+              return false;
+            }
+
+            const sourceItem = visibleItems[sourceIndex];
+            const targetItem = visibleItems[targetIndex];
+
+            return acceptsResourceDrop({
+              position,
+              sourceItem,
+              targetItem,
+              tree,
+            });
+          }}
+          onMoveItem={({
+            sourceListId,
+            sourceIndex,
+            targetListId,
+            targetIndex,
+            position,
+          }) => {
+            if (
+              sourceListId !== sortableId ||
+              targetListId !== sortableId ||
+              position !== "inside"
+            ) {
+              return;
+            }
+
+            const selectedItems = visibleItems.filter((item) =>
+              selectedIds.includes(item.id)
+            );
+
+            const sourceItem = visibleItems[sourceIndex];
+
+            // if source is selected, move the selected items, otherwise move the source item
+            const itemsToMove = selectedIds.includes(sourceItem.id)
+              ? selectedItems
+              : [sourceItem];
+
+            const targetItem = visibleItems[targetIndex];
+
+            handleMoveMediaInsideFolder(itemsToMove, targetItem);
+          }}
+          onFilesDrop={async (event: React.DragEvent<Element>) => {
+            event.preventDefault();
+
+            const rootItemPath = tree.idToPathMap.get(rootItemId);
+
+            if (!rootItemPath) return;
+
+            const newMedia = await handleDataTransfer({
+              dataTransfer: event.dataTransfer,
+              rootItemPath,
+              resourceMap: media,
+              accessibleByFileId: parentFileId,
+            });
+
+            if (!newMedia) return;
+
+            setMedia(
+              { name: "Add media files", timestamp: Date.now() },
+              newMedia
+            );
+          }}
+        />
+      );
+
+      return (
+        <FileExplorerLayout
+          title={title ?? rootResourceName}
+          right={
+            !readOnly && (
+              <FileExplorerUploadButton
+                showUploadButton={showUploadButton}
+                onUpload={() => handleUpload(rootResource.id)}
+                isUploading={isUploading}
+              >
+                {right}
+              </FileExplorerUploadButton>
+            )
+          }
+          className={className}
+        >
+          {virtualized ? (
+            <AutoSizer>
+              {({ width, height }) =>
+                // add 24px to account for the -mx-3 on the Collection component
+                renderCollection({ width: width + 24, height })
+              }
+            </AutoSizer>
+          ) : (
+            renderCollection(undefined)
+          )}
+        </FileExplorerLayout>
+      );
+    }
+  )
+);
+
+export function acceptsResourceDrop(parameters: {
+  position: RelativeDropPosition;
+  sourceItem: Resource;
+  targetItem: Resource;
+  tree: ResourceTree;
+}) {
+  const { position, sourceItem, targetItem, tree } = parameters;
+
+  if (position !== "inside" || targetItem.type === "asset") {
+    return false;
+  }
+  const sourcePath = tree.findPath(
+    rootResource,
+    (item) => item.id === sourceItem.id
+  );
+  const targetPath = tree.findPath(
+    rootResource,
+    (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;
+}
+
+function getPublishStatus({
+  resource,
+  diff,
+}: {
+  resource: Resource;
+  diff:
+    | {
+        modified: Set<string>;
+        added: Set<string>;
+        removed: Set<string>;
+      }
+    | undefined;
+}) {
+  // If no diff, nothing has been published, so we don't need to show status
+  if (!diff) return undefined;
+
+  return diff.modified.has(resource.stableId)
+    ? "Modified"
+    : diff.added.has(resource.stableId)
+      ? "Added"
+      : diff.removed.has(resource.stableId)
+        ? "Removed"
+        : // We don't have to check for the specific ID, since if anything had been published
+          // but removed, it will be in the removed set
+          "Published";
+}