@lobehub/lobehub 2.0.0-next.267 → 2.0.0-next.269

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[] => {

package/src/features/ResourceManager/components/Explorer/ToolBar/BatchActionsDropdown.tsx

@@ -25,13 +25,12 @@ export type MultiSelectActionType =
   | 'removeFromKnowledgeBase';
 
 interface BatchActionsDropdownProps {
-  disabled?: boolean;
   onActionClick: (type: MultiSelectActionType) => Promise<void>;
   selectCount: number;
 }
 
 const BatchActionsDropdown = memo<BatchActionsDropdownProps>(
-  ({ selectCount, onActionClick, disabled }) => {
+  ({ selectCount, onActionClick }) => {
     const { t } = useTranslation(['components', 'common', 'file', 'knowledgeBase']);
     const { modal, message } = App.useApp();
 
@@ -54,7 +53,7 @@ const BatchActionsDropdown = memo<BatchActionsDropdownProps>(
           danger: true,
           icon: <Icon icon={Trash2Icon} />,
           key: 'deleteLibrary',
-          label: t('delete', { ns: 'common' }),
+          label: t('header.actions.deleteLibrary', { ns: 'file' }),
           onClick: async () => {
             modal.confirm({
               okButtonProps: {
@@ -74,6 +73,7 @@ const BatchActionsDropdown = memo<BatchActionsDropdownProps>(
       const availableKnowledgeBases = (knowledgeBases || []).filter((kb) => kb.id !== libraryId);
 
       const addToKnowledgeBaseSubmenu: DropdownItem[] = availableKnowledgeBases.map((kb) => ({
+        disabled: selectCount === 0,
         icon: <RepoIcon />,
         key: `add-to-kb-${kb.id}`,
         label: <span style={{ marginLeft: 8 }}>{kb.name}</span>,
@@ -95,6 +95,7 @@ const BatchActionsDropdown = memo<BatchActionsDropdownProps>(
 
       if (libraryId) {
         items.push({
+          disabled: selectCount === 0,
           icon: <Icon icon={BookMinusIcon} />,
           key: 'removeFromKnowledgeBase',
           label: t('FileManager.actions.removeFromKnowledgeBase'),
@@ -117,6 +118,7 @@ const BatchActionsDropdown = memo<BatchActionsDropdownProps>(
         if (availableKnowledgeBases.length > 0) {
           items.push({
             children: addToKnowledgeBaseSubmenu as any,
+            disabled: selectCount === 0,
             icon: <Icon icon={BookPlusIcon} />,
             key: 'addToOtherKnowledgeBase',
             label: t('FileManager.actions.addToOtherKnowledgeBase'),
@@ -125,6 +127,7 @@ const BatchActionsDropdown = memo<BatchActionsDropdownProps>(
       } else if (availableKnowledgeBases.length > 0) {
         items.push({
           children: addToKnowledgeBaseSubmenu as any,
+          disabled: selectCount === 0,
           icon: <Icon icon={BookPlusIcon} />,
           key: 'addToKnowledgeBase',
           label: t('FileManager.actions.addToKnowledgeBase'),
@@ -133,6 +136,7 @@ const BatchActionsDropdown = memo<BatchActionsDropdownProps>(
 
       items.push(
         {
+          disabled: selectCount === 0,
           icon: <Icon icon={FileBoxIcon} />,
           key: 'batchChunking',
           label: t('FileManager.actions.batchChunking'),
@@ -145,6 +149,7 @@ const BatchActionsDropdown = memo<BatchActionsDropdownProps>(
         },
         {
           danger: true,
+          disabled: selectCount === 0,
           icon: <Icon icon={Trash2Icon} />,
           key: 'delete',
           label: t('delete', { ns: 'common' }),
@@ -177,9 +182,8 @@ const BatchActionsDropdown = memo<BatchActionsDropdownProps>(
     ]);
 
     return (
-      <DropdownMenu items={menuItems} placement="bottomLeft" triggerProps={{ disabled }}>
+      <DropdownMenu items={menuItems} placement="bottomLeft">
         <ActionIconWithChevron
-          disabled={disabled}
           icon={CircleEllipsisIcon}
           title={t('FileManager.actions.batchActions', 'Batch actions')}
         />

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

@@ -12,11 +12,8 @@ import { useFetchResources, useResourceStore } from '@/store/file/slices/resourc
 import EmptyPlaceholder from './EmptyPlaceholder';
 import Header from './Header';
 import ListView from './ListView';
-import ListViewSkeleton from './ListView/Skeleton';
 import MasonryView from './MasonryView';
-import MasonryViewSkeleton from './MasonryView/Skeleton';
 import { useCheckTaskStatus } from './useCheckTaskStatus';
-import { useMasonryColumnCount } from './useMasonryColumnCount';
 import { useResourceExplorer } from './useResourceExplorer';
 
 /**
@@ -32,27 +29,16 @@ const ResourceExplorer = memo(() => {
   useResourceManagerUrlSync();
 
   // Get state from Resource Manager store
-  const [
-    libraryId,
-    category,
-    viewMode,
-    isTransitioning,
-    isMasonryReady,
-    searchQuery,
-    setSelectedFileIds,
-    sorter,
-    sortType,
-  ] = useResourceManagerStore((s) => [
-    s.libraryId,
-    s.category,
-    s.viewMode,
-    s.isTransitioning,
-    s.isMasonryReady,
-    s.searchQuery,
-    s.setSelectedFileIds,
-    s.sorter,
-    s.sortType,
-  ]);
+  const [libraryId, category, viewMode, searchQuery, setSelectedFileIds, sorter, sortType] =
+    useResourceManagerStore((s) => [
+      s.libraryId,
+      s.category,
+      s.viewMode,
+      s.searchQuery,
+      s.setSelectedFileIds,
+      s.sorter,
+      s.sortType,
+    ]);
 
   // Get folder path for empty state check
   const { currentFolderSlug } = useFolderPath();
@@ -77,19 +63,7 @@ const ResourceExplorer = memo(() => {
   const { isLoading, isValidating } = useFetchResources(queryParams);
 
   // Get resource data from store (updated by SWR hook)
-  const { resourceList, queryParams: currentQueryParams } = useResourceStore();
-
-  // Check if we're navigating to a different view (different query params)
-  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 } = useResourceStore();
 
   // Map ResourceItem[] to FileListItem[] for compatibility
   // TODO: Eventually update all consumers to use ResourceItem directly
@@ -119,19 +93,6 @@ const ResourceExplorer = memo(() => {
     setSelectedFileIds([]);
   }, [category, libraryId, searchQuery, setSelectedFileIds]);
 
-  // Computed values
-  const columnCount = useMasonryColumnCount();
-
-  // Show skeleton when:
-  // 1. Initial load with no data (isLoading && no data)
-  // 2. Navigating to different folder/category (isNavigating && isValidating)
-  // 3. View mode transitions
-  const showSkeleton =
-    (isLoading && (!data || data.length >= 5)) ||
-    (isNavigating && isValidating) ||
-    (viewMode === 'list' && isTransitioning) ||
-    (viewMode === 'masonry' && (isTransitioning || !isMasonryReady));
-
   const showEmptyStatus = !isLoading && !isValidating && data?.length === 0 && !currentFolderSlug;
 
   return (
@@ -139,12 +100,6 @@ const ResourceExplorer = memo(() => {
       <Header />
       {showEmptyStatus ? (
         <EmptyPlaceholder />
-      ) : showSkeleton ? (
-        viewMode === 'list' ? (
-          <ListViewSkeleton />
-        ) : (
-          <MasonryViewSkeleton columnCount={columnCount} />
-        )
       ) : viewMode === 'list' ? (
         <ListView />
       ) : (

package/src/features/ResourceManager/components/Header/AddButton.tsx

@@ -22,7 +22,6 @@ const AddButton = () => {
   const { t } = useTranslation('file');
   const pushDockFileList = useFileStore((s) => s.pushDockFileList);
   const uploadFolderWithStructure = useFileStore((s) => s.uploadFolderWithStructure);
-  const createResource = useFileStore((s) => s.createResource);
   const createResourceAndSync = useFileStore((s) => s.createResourceAndSync);
 
   // TODO: Migrate Notion import to use createResource
@@ -39,9 +38,9 @@ const AddButton = () => {
     ]);
 
   const handleOpenPageEditor = useCallback(async () => {
-    // Create a new page with optimistic update - instant UI feedback
+    // Create a new page and wait for server sync - ensures page editor can load the document
     const untitledTitle = t('pageList.untitled');
-    const tempId = await createResource({
+    const realId = await createResourceAndSync({
       content: '',
       fileType: 'custom/document',
       knowledgeBaseId: libraryId,
@@ -50,10 +49,10 @@ const AddButton = () => {
       title: untitledTitle,
     });
 
-    // Switch to page view mode immediately (temp ID works)
-    setCurrentViewItemId(tempId);
+    // Switch to page view mode with real ID
+    setCurrentViewItemId(realId);
     setMode('page');
-  }, [createResource, currentFolderId, libraryId, setCurrentViewItemId, setMode, t]);
+  }, [createResourceAndSync, currentFolderId, libraryId, setCurrentViewItemId, setMode, t]);
 
   const handleCreateFolder = useCallback(async () => {
     // Create folder and wait for sync to complete before triggering rename