@lobehub/lobehub 2.0.0-next.266 → 2.0.0-next.268

package/src/features/ResourceManager/components/Editor/index.tsx

@@ -4,7 +4,7 @@ import { BUILTIN_AGENT_SLUGS } from '@lobechat/builtin-agents';
 import { ActionIcon, Flexbox } from '@lobehub/ui';
 import { Modal } from 'antd';
 import { cssVar, useTheme } from 'antd-style';
-import { ArrowLeftIcon, BotMessageSquareIcon, DownloadIcon, InfoIcon } from 'lucide-react';
+import { ArrowLeftIcon, DownloadIcon, InfoIcon } from 'lucide-react';
 import { memo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -13,7 +13,6 @@ import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/featur
 import Loading from '@/components/Loading/BrandTextLoading';
 import NavHeader from '@/features/NavHeader';
 import PageAgentProvider from '@/features/PageEditor/PageAgentProvider';
-import ToggleRightPanelButton from '@/features/RightPanel/ToggleRightPanelButton';
 import { useAgentStore } from '@/store/agent';
 import { builtinAgentSelectors } from '@/store/agent/selectors';
 import { fileManagerSelectors, useFileStore } from '@/store/file';
@@ -56,7 +55,7 @@ const FileEditorCanvas = memo<FileEditorProps>(({ onBack }) => {
             }
             right={
               <Flexbox gap={8} horizontal>
-                <ToggleRightPanelButton icon={BotMessageSquareIcon} showActive={true} size={20} />
+                {/* <ToggleRightPanelButton icon={BotMessageSquareIcon} showActive={true} size={20} /> */}
                 {fileDetail?.url && (
                   <ActionIcon
                     icon={DownloadIcon}

package/src/features/ResourceManager/components/Explorer/Header/index.tsx

@@ -29,18 +29,18 @@ const Header = memo(() => {
   ]);
   const toggleCommandMenu = useGlobalStore((s) => s.toggleCommandMenu);
 
-  // Disable batch actions dropdown when no items selected and not in any library
-  const isBatchActionsDisabled = selectFileIds.length === 0 && !libraryId;
-
-  // If no libraryId, show just the category name
-  const leftContent =
-    !libraryId && category && category !== FilesTabs.All ? (
-      <Flexbox style={{ marginLeft: 8 }}>{t(`tab.${category as FilesTabs}` as any)}</Flexbox>
-    ) : (
-      <Flexbox style={{ marginLeft: 8 }}>
-        <Breadcrumb category={category} knowledgeBaseId={libraryId} />
-      </Flexbox>
-    );
+  // If no libraryId, show category name or "Resource" for All
+  const leftContent = !libraryId ? (
+    <Flexbox style={{ marginLeft: 8 }}>
+      {category === FilesTabs.All
+        ? t('resource', { defaultValue: 'Resource' })
+        : t(`tab.${category as FilesTabs}` as any)}
+    </Flexbox>
+  ) : (
+    <Flexbox style={{ marginLeft: 8 }}>
+      <Breadcrumb category={category} knowledgeBaseId={libraryId} />
+    </Flexbox>
+  );
 
   return (
     <NavHeader
@@ -49,11 +49,7 @@ const Header = memo(() => {
         <>
           <ActionIcon icon={SearchIcon} onClick={() => toggleCommandMenu(true)} />
           <SortDropdown />
-          <BatchActionsDropdown
-            disabled={isBatchActionsDisabled}
-            onActionClick={onActionClick}
-            selectCount={selectFileIds.length}
-          />
+          <BatchActionsDropdown onActionClick={onActionClick} selectCount={selectFileIds.length} />
           <ViewSwitcher />
           <Flexbox style={{ marginLeft: 8 }}>
             <AddButton />

package/src/features/ResourceManager/components/Explorer/ItemDropdown/useFileItemDropdown.tsx

@@ -15,7 +15,7 @@ import { useTranslation } from 'react-i18next';
 import { shallow } from 'zustand/shallow';
 
 import RepoIcon from '@/components/LibIcon';
-import { clearTreeFolderCache } from '@/features/ResourceManager/components/Tree';
+import { clearTreeFolderCache } from '@/features/ResourceManager/components/LibraryHierarchy';
 import { PAGE_FILE_TYPE } from '@/features/ResourceManager/constants';
 import { documentService } from '@/services/document';
 import { useFileStore } from '@/store/file';

package/src/features/ResourceManager/components/Explorer/ListView/ListItem/TruncatedFileName.tsx

@@ -0,0 +1,130 @@
+import { memo, useEffect, useRef, useState } from 'react';
+
+interface TruncatedFileNameProps {
+  className?: string;
+  name: string;
+}
+
+/**
+ * Truncates file name from the center, preserving the extension at the end
+ * Similar to macOS Finder behavior
+ */
+const TruncatedFileName = memo<TruncatedFileNameProps>(({ name, className }) => {
+  const containerRef = useRef<HTMLSpanElement>(null);
+  const [displayName, setDisplayName] = useState(name);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const updateTruncation = () => {
+      const containerWidth = container.offsetWidth;
+      if (containerWidth === 0) return;
+
+      // Create a temporary span to measure text width
+      const measureSpan = document.createElement('span');
+      measureSpan.style.visibility = 'hidden';
+      measureSpan.style.position = 'absolute';
+      measureSpan.style.whiteSpace = 'nowrap';
+      measureSpan.style.font = window.getComputedStyle(container).font;
+      document.body.append(measureSpan);
+
+      // Measure full name
+      measureSpan.textContent = name;
+      const fullWidth = measureSpan.offsetWidth;
+
+      // If it fits, show the full name
+      if (fullWidth <= containerWidth) {
+        setDisplayName(name);
+        measureSpan.remove();
+        return;
+      }
+
+      // Split filename and extension
+      const lastDotIndex = name.lastIndexOf('.');
+      let baseName = name;
+      let extension = '';
+
+      // Only treat as extension if dot is not at the start and there's content after it
+      if (lastDotIndex > 0 && lastDotIndex < name.length - 1) {
+        baseName = name.slice(0, lastDotIndex);
+        extension = name.slice(lastDotIndex); // includes the dot
+      }
+
+      // Measure ellipsis width
+      measureSpan.textContent = '...';
+      const ellipsisWidth = measureSpan.offsetWidth;
+
+      // Measure extension width
+      measureSpan.textContent = extension;
+      const extensionWidth = measureSpan.offsetWidth;
+
+      // Calculate available width for base name
+      const availableWidth = containerWidth - ellipsisWidth - extensionWidth;
+
+      if (availableWidth <= 0) {
+        // Not enough space, just show ellipsis + extension
+        setDisplayName(`...${extension}`);
+        measureSpan.remove();
+        return;
+      }
+
+      // Binary search to find the optimal split point
+      let left = 0;
+      let right = baseName.length;
+      let bestFit = '';
+
+      while (left <= right) {
+        const mid = Math.floor((left + right) / 2);
+        const startChars = Math.ceil(mid / 2);
+        const endChars = Math.floor(mid / 2);
+
+        const truncated =
+          baseName.slice(0, startChars) + (mid > 0 ? baseName.slice(-endChars) : '');
+
+        measureSpan.textContent = truncated;
+        const truncatedWidth = measureSpan.offsetWidth;
+
+        if (truncatedWidth <= availableWidth) {
+          bestFit = truncated;
+          left = mid + 1;
+        } else {
+          right = mid - 1;
+        }
+      }
+
+      measureSpan.remove();
+
+      // Construct final truncated name
+      if (bestFit.length === 0) {
+        setDisplayName(`...${extension}`);
+      } else {
+        const startChars = Math.ceil(bestFit.length / 2);
+        const endChars = Math.floor(bestFit.length / 2);
+        setDisplayName(
+          `${baseName.slice(0, startChars)}...${baseName.slice(-endChars)}${extension}`,
+        );
+      }
+    };
+
+    updateTruncation();
+
+    // Use ResizeObserver to handle container size changes
+    const resizeObserver = new ResizeObserver(updateTruncation);
+    resizeObserver.observe(container);
+
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [name]);
+
+  return (
+    <span className={className} ref={containerRef} title={name}>
+      {displayName}
+    </span>
+  );
+});
+
+TruncatedFileName.displayName = 'TruncatedFileName';
+
+export default TruncatedFileName;

package/src/features/ResourceManager/components/Explorer/ListView/ListItem/index.tsx

@@ -17,7 +17,7 @@ import {
 } from '@/app/[variants]/(main)/resource/features/DndContextWrapper';
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
 import FileIcon from '@/components/FileIcon';
-import { clearTreeFolderCache } from '@/features/ResourceManager/components/Tree';
+import { clearTreeFolderCache } from '@/features/ResourceManager/components/LibraryHierarchy';
 import { PAGE_FILE_TYPE } from '@/features/ResourceManager/constants';
 import { fileManagerSelectors, useFileStore } from '@/store/file';
 import { type FileListItem as FileListItemType } from '@/types/files';
@@ -27,6 +27,7 @@ import { isChunkingUnsupported } from '@/utils/isChunkingUnsupported';
 import DropdownMenu from '../../ItemDropdown/DropdownMenu';
 import { useFileItemDropdown } from '../../ItemDropdown/useFileItemDropdown';
 import ChunksBadge from './ChunkTag';
+import TruncatedFileName from './TruncatedFileName';
 
 // Initialize dayjs plugin once at module level
 dayjs.extend(relativeTime);
@@ -40,6 +41,7 @@ const styles = createStaticStyles(({ css }) => {
       cursor: pointer;
       min-width: 800px;
 
+      /* Hover effect for individual rows */
       &:hover {
         background: ${cssVar.colorFillTertiary};
       }
@@ -59,6 +61,25 @@ const styles = createStaticStyles(({ css }) => {
       opacity: 0.5;
     `,
 
+    evenRow: css`
+      background: ${cssVar.colorFillQuaternary};
+
+      /* Hover effect overrides zebra striping on the hovered row only */
+      &:hover {
+        background: ${cssVar.colorFillTertiary};
+      }
+
+      /* Hide zebra striping when any row is hovered */
+      .any-row-hovered & {
+        background: transparent;
+      }
+
+      /* But keep hover effect on the actual hovered row */
+      .any-row-hovered &:hover {
+        background: ${cssVar.colorFillTertiary};
+      }
+    `,
+
     hover: css`
       opacity: 0;
 
@@ -80,7 +101,6 @@ const styles = createStaticStyles(({ css }) => {
       margin-inline-start: 12px;
 
       color: ${cssVar.colorText};
-      text-overflow: ellipsis;
       white-space: nowrap;
     `,
     nameContainer: css`
@@ -105,6 +125,8 @@ interface FileListItemProps extends FileListItemType {
     size: number;
   };
   index: number;
+  isAnyRowHovered: boolean;
+  onHoverChange: (isHovered: boolean) => void;
   onSelectedChange: (id: string, selected: boolean, shiftKey: boolean, index: number) => void;
   pendingRenameItemId?: string | null;
   selected?: boolean;
@@ -133,6 +155,7 @@ const FileListItem = memo<FileListItemProps>(
     sourceType,
     slug,
     pendingRenameItemId,
+    onHoverChange,
   }) => {
     const { t } = useTranslation(['components', 'file']);
     const { message } = App.useApp();
@@ -376,12 +399,14 @@ const FileListItem = memo<FileListItemProps>(
           className={cx(
             styles.container,
             'file-list-item-group',
+            index % 2 === 0 && styles.evenRow,
             selected && styles.selected,
             isDragging && styles.dragging,
             isOver && styles.dragOver,
           )}
           data-drop-target-id={id}
           data-is-folder={String(isFolder)}
+          data-row-index={index}
           draggable={!!resourceManagerState.libraryId}
           height={48}
           horizontal
@@ -390,6 +415,8 @@ const FileListItem = memo<FileListItemProps>(
           onDragOver={handleDragOver}
           onDragStart={handleDragStart}
           onDrop={handleDrop}
+          onMouseEnter={() => onHoverChange(true)}
+          onMouseLeave={() => onHoverChange(false)}
           paddingInline={8}
           style={{
             borderBlockEnd: `1px solid ${cssVar.colorBorderSecondary}`,
@@ -469,7 +496,10 @@ const FileListItem = memo<FileListItemProps>(
                   value={renamingValue}
                 />
               ) : (
-                <span className={styles.name}>{name || t('file:pageList.untitled')}</span>
+                <TruncatedFileName
+                  className={styles.name}
+                  name={name || t('file:pageList.untitled')}
+                />
               )}
             </Flexbox>
             <Flexbox
@@ -482,6 +512,7 @@ const FileListItem = memo<FileListItemProps>(
               onPointerDown={(e) => e.stopPropagation()}
             >
               {!isFolder &&
+                !isPage &&
                 (fileStoreState.isCreatingFileParseTask ||
                 isNull(chunkingStatus) ||
                 !chunkingStatus ? (
@@ -562,7 +593,8 @@ const FileListItem = memo<FileListItemProps>(
       prevProps.url === nextProps.url &&
       prevProps.columnWidths.name === nextProps.columnWidths.name &&
       prevProps.columnWidths.date === nextProps.columnWidths.date &&
-      prevProps.columnWidths.size === nextProps.columnWidths.size
+      prevProps.columnWidths.size === nextProps.columnWidths.size &&
+      prevProps.isAnyRowHovered === nextProps.isAnyRowHovered
     );
   },
 );

package/src/features/ResourceManager/components/Explorer/ListView/Skeleton.tsx

@@ -29,6 +29,7 @@ const ListViewSkeleton = ({
           key={index}
           paddingInline={8}
           style={{
+            background: index % 2 === 0 ? cssVar.colorFillQuaternary : 'transparent',
             borderBlockEnd: `1px solid ${cssVar.colorBorderSecondary}`,
             opacity: getOpacity(index),
           }}
@@ -39,21 +40,21 @@ const ListViewSkeleton = ({
         <Flexbox
           align={'center'}
           horizontal
-          paddingInline={8}
           style={{
             flexShrink: 0,
             maxWidth: columnWidths.name,
             minWidth: columnWidths.name,
+            paddingInline: 8,
             width: columnWidths.name,
           }}
         >
           <Skeleton.Avatar active shape={'square'} size={24} style={{ marginInline: 8 }} />
           <Skeleton.Button active style={{ height: 16, width: '60%' }} />
         </Flexbox>
-        <Flexbox paddingInline={24} style={{ flexShrink: 0 }} width={columnWidths.date}>
+        <Flexbox style={{ flexShrink: 0, paddingInline: '0 24px' }} width={columnWidths.date}>
           <Skeleton.Button active style={{ height: 16, width: '80%' }} />
         </Flexbox>
-        <Flexbox paddingInline={24} style={{ flexShrink: 0 }} width={columnWidths.size}>
+        <Flexbox style={{ flexShrink: 0, paddingInline: '0 24px' }} width={columnWidths.size}>
           <Skeleton.Button active style={{ height: 16, width: '60%' }} />
         </Flexbox>
       </Flexbox>

package/src/features/ResourceManager/components/Explorer/ListView/index.tsx

@@ -15,6 +15,7 @@ import {
 } from '@/app/[variants]/(main)/resource/features/store';
 import { sortFileList } from '@/app/[variants]/(main)/resource/features/store/selectors';
 import { useFileStore } from '@/store/file';
+import { useFetchResources } from '@/store/file/slices/resource/hooks';
 import { useGlobalStore } from '@/store/global';
 import { INITIAL_STATUS } from '@/store/global/initialState';
 import { type AsyncTaskStatus } from '@/types/asyncTask';
@@ -53,8 +54,11 @@ const styles = createStaticStyles(({ css }) => ({
   `,
 }));
 
-const ListView = memo(() => {
+const ListView = memo(function ListView() {
   const [
+    libraryId,
+    category,
+    searchQuery,
     selectFileIds,
     setSelectedFileIds,
     pendingRenameItemId,
@@ -62,7 +66,11 @@ const ListView = memo(() => {
     loadMoreKnowledgeItems,
     sorter,
     sortType,
+    storeIsTransitioning,
   ] = useResourceManagerStore((s) => [
+    s.libraryId,
+    s.category,
+    s.searchQuery,
     s.selectedFileIds,
     s.setSelectedFileIds,
     s.pendingRenameItemId,
@@ -70,6 +78,7 @@ const ListView = memo(() => {
     s.loadMoreKnowledgeItems,
     s.sorter,
     s.sortType,
+    s.isTransitioning,
   ]);
 
   // Access column widths from Global store
@@ -83,6 +92,7 @@ const ListView = memo(() => {
   const [isLoadingMore, setIsLoadingMore] = useState(false);
   const isDragActive = useDragActive();
   const [isDropZoneActive, setIsDropZoneActive] = useState(false);
+  const [isAnyRowHovered, setIsAnyRowHovered] = useState(false);
   const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const autoScrollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -94,6 +104,33 @@ const ListView = memo(() => {
   // Get current folder ID - either from breadcrumb or null for root
   const currentFolderId = folderBreadcrumb?.at(-1)?.id || null;
 
+  const queryParams = useMemo(
+    () => ({
+      category: libraryId ? undefined : category,
+      libraryId,
+      parentId: currentFolderSlug || null,
+      q: searchQuery ?? undefined,
+      showFilesInKnowledgeBase: false,
+      sortType,
+      sorter,
+    }),
+    [category, currentFolderSlug, libraryId, searchQuery, sorter, sortType],
+  );
+
+  const { isLoading, isValidating } = useFetchResources(queryParams);
+  const { queryParams: currentQueryParams } = useFileStore();
+
+  const isNavigating = useMemo(() => {
+    if (!currentQueryParams || !queryParams) return false;
+
+    return (
+      currentQueryParams.libraryId !== queryParams.libraryId ||
+      currentQueryParams.parentId !== queryParams.parentId ||
+      currentQueryParams.category !== queryParams.category ||
+      currentQueryParams.q !== queryParams.q
+    );
+  }, [currentQueryParams, queryParams]);
+
   const resourceList = useFileStore((s) => s.resourceList);
 
   // Map ResourceItem[] to FileListItem[] for compatibility
@@ -112,6 +149,17 @@ const ListView = memo(() => {
   // Sort data using current sort settings
   const data = sortFileList(rawData, sorter, sortType) || [];
 
+  const dataLength = data.length;
+  const effectiveIsLoading = isLoading ?? false;
+  const effectiveIsNavigating = isNavigating ?? false;
+  const effectiveIsTransitioning = storeIsTransitioning ?? false;
+  const effectiveIsValidating = isValidating ?? false;
+
+  const showSkeleton =
+    (effectiveIsLoading && dataLength === 0) ||
+    (effectiveIsNavigating && effectiveIsValidating) ||
+    effectiveIsTransitioning;
+
   const dataRef = useRef<FileListItemType[]>(data);
 
   useEffect(() => {
@@ -286,6 +334,8 @@ const ListView = memo(() => {
     return <ListViewSkeleton columnWidths={columnWidths} />;
   }, [isLoadingMore, fileListHasMore, columnWidths]);
 
+  if (showSkeleton) return <ListViewSkeleton columnWidths={columnWidths} />;
+
   return (
     <Flexbox height={'100%'}>
       <div className={styles.scrollContainer}>
@@ -360,7 +410,11 @@ const ListView = memo(() => {
           </Flexbox>
         </Flexbox>
         <div
-          className={cx(styles.dropZone, isDropZoneActive && styles.dropZoneActive)}
+          className={cx(
+            styles.dropZone,
+            isDropZoneActive && styles.dropZoneActive,
+            isAnyRowHovered && 'any-row-hovered',
+          )}
           data-drop-target-id={currentFolderId || undefined}
           data-is-folder="true"
           onDragLeave={handleDropZoneDragLeave}
@@ -385,7 +439,9 @@ const ListView = memo(() => {
                 <FileListItem
                   columnWidths={columnWidths}
                   index={index}
+                  isAnyRowHovered={isAnyRowHovered}
                   key={item.id}
+                  onHoverChange={setIsAnyRowHovered}
                   onSelectedChange={handleSelectionChange}
                   pendingRenameItemId={pendingRenameItemId}
                   selected={selectFileIds.includes(item.id)}

package/src/features/ResourceManager/components/Explorer/MasonryView/index.tsx

@@ -9,24 +9,31 @@ import { useTranslation } from 'react-i18next';
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
 import { sortFileList } from '@/app/[variants]/(main)/resource/features/store/selectors';
 import { useFileStore } from '@/store/file';
+import { useFetchResources } from '@/store/file/slices/resource/hooks';
 import { type FileListItem } from '@/types/files';
 
 import { useMasonryColumnCount } from '../useMasonryColumnCount';
 import MasonryItemWrapper from './MasonryFileItem/MasonryItemWrapper';
+import MasonryViewSkeleton from './Skeleton';
 
-const MasonryView = memo(() => {
+const MasonryView = memo(function MasonryView() {
   // Access all state from Resource Manager store
   const [
     libraryId,
+    category,
+    searchQuery,
     selectedFileIds,
     setSelectedFileIds,
     loadMoreKnowledgeItems,
     fileListHasMore,
-    isMasonryReady,
+    storeIsMasonryReady,
     sorter,
     sortType,
+    storeIsTransitioning,
   ] = useResourceManagerStore((s) => [
     s.libraryId,
+    s.category,
+    s.searchQuery,
     s.selectedFileIds,
     s.setSelectedFileIds,
     s.loadMoreKnowledgeItems,
@@ -34,6 +41,7 @@ const MasonryView = memo(() => {
     s.isMasonryReady,
     s.sorter,
     s.sortType,
+    s.isTransitioning,
   ]);
 
   const { t } = useTranslation('file');
@@ -43,6 +51,33 @@ const MasonryView = memo(() => {
   // NEW: Read from resource store instead of fetching independently
   const resourceList = useFileStore((s) => s.resourceList);
 
+  const queryParams = useMemo(
+    () => ({
+      category: libraryId ? undefined : category,
+      libraryId,
+      parentId: null,
+      q: searchQuery ?? undefined,
+      showFilesInKnowledgeBase: false,
+      sortType,
+      sorter,
+    }),
+    [category, libraryId, searchQuery, sorter, sortType],
+  );
+
+  const { isLoading, isValidating } = useFetchResources(queryParams);
+  const { queryParams: currentQueryParams } = useFileStore();
+
+  const isNavigating = useMemo(() => {
+    if (!currentQueryParams || !queryParams) return false;
+
+    return (
+      currentQueryParams.libraryId !== queryParams.libraryId ||
+      currentQueryParams.parentId !== queryParams.parentId ||
+      currentQueryParams.category !== queryParams.category ||
+      currentQueryParams.q !== queryParams.q
+    );
+  }, [currentQueryParams, queryParams]);
+
   // Map ResourceItem[] to FileListItem[] for compatibility
   const rawData = resourceList?.map(
     (item): FileListItem => ({
@@ -69,7 +104,20 @@ const MasonryView = memo(() => {
   );
 
   // Sort data using current sort settings
-  const data = sortFileList(rawData, sorter, sortType);
+  const data = sortFileList(rawData, sorter, sortType) || [];
+
+  const dataLength = data.length;
+  const effectiveIsLoading = isLoading ?? false;
+  const effectiveIsNavigating = isNavigating ?? false;
+  const effectiveIsValidating = isValidating ?? false;
+  const effectiveIsTransitioning = storeIsTransitioning ?? false;
+  const effectiveIsMasonryReady = storeIsMasonryReady;
+
+  const showSkeleton =
+    (effectiveIsLoading && dataLength === 0) ||
+    (effectiveIsNavigating && effectiveIsValidating) ||
+    effectiveIsTransitioning ||
+    !effectiveIsMasonryReady;
 
   const masonryContext = useMemo(
     () => ({
@@ -108,13 +156,15 @@ const MasonryView = memo(() => {
     [handleLoadMore],
   );
 
-  return (
+  return showSkeleton ? (
+    <MasonryViewSkeleton columnCount={columnCount} />
+  ) : (
     <div
       onScroll={handleScroll}
       style={{
         flex: 1,
         height: '100%',
-        opacity: isMasonryReady ? 1 : 0,
+        opacity: effectiveIsMasonryReady ? 1 : 0,
         overflowY: 'auto',
         transition: 'opacity 0.2s ease-in-out',
       }}
@@ -124,7 +174,7 @@ const MasonryView = memo(() => {
           ItemContent={MasonryItemWrapper}
           columnCount={columnCount}
           context={masonryContext}
-          data={data || []}
+          data={data}
           style={{
             gap: '16px',
             overflow: 'hidden',
@@ -147,4 +197,6 @@ const MasonryView = memo(() => {
   );
 });
 
+MasonryView.displayName = 'MasonryView';
+
 export default MasonryView;

package/src/features/ResourceManager/components/Explorer/MoveToFolderModal.tsx

@@ -5,7 +5,7 @@ import { memo, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import FolderTree, { type FolderTreeItem } from '@/features/ResourceManager/components/FolderTree';
-import { clearTreeFolderCache } from '@/features/ResourceManager/components/Tree';
+import { clearTreeFolderCache } from '@/features/ResourceManager/components/LibraryHierarchy';
 import { fileService } from '@/services/file';
 import { useFileStore } from '@/store/file';
 
@@ -28,10 +28,7 @@ const MoveToFolderModal = memo<MoveToFolderModalProps>(
     const [loadedFolders, setLoadedFolders] = useState<Set<string>>(new Set());
     const [isCreatingFolder, setIsCreatingFolder] = useState(false);
 
-    const [moveResource, createFolder] = useFileStore((s) => [
-      s.moveResource,
-      s.createFolder,
-    ]);
+    const [moveResource, createFolder] = useFileStore((s) => [s.moveResource, s.createFolder]);
 
     // Sort items: folders only
     const sortItems = useCallback((items: FolderTreeItem[]): FolderTreeItem[] => {