@lobehub/lobehub 2.0.0-next.249 → 2.0.0-next.250

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

@@ -34,8 +34,11 @@ const MasonryViewSkeleton = memo<MasonrySkeletonProps>(({ columnCount }) => {
   // Generate varying heights for more natural masonry look
   const heights = [180, 220, 200, 190, 240, 210, 200, 230, 180, 220, 210, 190];
 
-  // Calculate number of items based on viewport and column count
-  const itemCount = Math.min(columnCount * 3, 12);
+  // Calculate number of items based on viewport and column count, minimum 6 items
+  const itemCount = Math.max(Math.min(columnCount * 3, 12), 6);
+
+  // Calculate opacity gradient from 100% to 20%
+  const getOpacity = (index: number) => 1 - (index / (itemCount - 1)) * 0.8;
 
   return (
     <div
@@ -50,6 +53,7 @@ const MasonryViewSkeleton = memo<MasonrySkeletonProps>(({ columnCount }) => {
           key={index}
           style={{
             height: heights[index % heights.length],
+            opacity: getOpacity(index),
           }}
         />
       ))}

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

@@ -6,12 +6,10 @@ import { cssVar } from 'antd-style';
 import { type UIEvent, memo, useCallback, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { useFolderPath } from '@/app/[variants]/(main)/resource/features/hooks/useFolderPath';
-import {
-  useResourceManagerFetchKnowledgeItems,
-  useResourceManagerStore,
-} from '@/app/[variants]/(main)/resource/features/store';
+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 { type FileListItem } from '@/types/files';
 
 import { useMasonryColumnCount } from '../useMasonryColumnCount';
 import MasonryItemWrapper from './MasonryFileItem/MasonryItemWrapper';
@@ -20,8 +18,6 @@ const MasonryView = memo(() => {
   // Access all state from Resource Manager store
   const [
     libraryId,
-    category,
-    searchQuery,
     selectedFileIds,
     setSelectedFileIds,
     loadMoreKnowledgeItems,
@@ -31,8 +27,6 @@ const MasonryView = memo(() => {
     sortType,
   ] = useResourceManagerStore((s) => [
     s.libraryId,
-    s.category,
-    s.searchQuery,
     s.selectedFileIds,
     s.setSelectedFileIds,
     s.loadMoreKnowledgeItems,
@@ -46,16 +40,33 @@ const MasonryView = memo(() => {
   const columnCount = useMasonryColumnCount();
   const [isLoadingMore, setIsLoadingMore] = useState(false);
 
-  const { currentFolderSlug } = useFolderPath();
+  // NEW: Read from resource store instead of fetching independently
+  const resourceList = useFileStore((s) => s.resourceList);
 
-  // Fetch data with SWR
-  const { data: rawData } = useResourceManagerFetchKnowledgeItems({
-    category,
-    knowledgeBaseId: libraryId,
-    parentId: currentFolderSlug || null,
-    q: searchQuery ?? undefined,
-    showFilesInKnowledgeBase: false,
-  });
+  // Map ResourceItem[] to FileListItem[] for compatibility
+  const rawData = resourceList?.map(
+    (item): FileListItem => ({
+      chunkCount: item.chunkCount ?? null,
+      chunkingError: item.chunkingError ?? null,
+      chunkingStatus: (item.chunkingStatus as any) ?? null,
+      content: item.content,
+      createdAt: item.createdAt,
+      editorData: item.editorData,
+      embeddingError: item.embeddingError ?? null,
+      embeddingStatus: (item.embeddingStatus as any) ?? null,
+      fileType: item.fileType,
+      finishEmbedding: item.finishEmbedding ?? false,
+      id: item.id,
+      metadata: item.metadata,
+      name: item.name,
+      parentId: item.parentId,
+      size: item.size,
+      slug: item.slug,
+      sourceType: item.sourceType,
+      updatedAt: item.updatedAt,
+      url: item.url ?? '',
+    }),
+  );
 
   // Sort data using current sort settings
   const data = sortFileList(rawData, sorter, sortType);

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

@@ -11,14 +11,13 @@ import { useFileStore } from '@/store/file';
 
 interface MoveToFolderModalProps {
   fileId: string;
-  fileType?: string;
   knowledgeBaseId?: string;
   onClose: () => void;
   open: boolean;
 }
 
 const MoveToFolderModal = memo<MoveToFolderModalProps>(
-  ({ open, onClose, fileId, fileType, knowledgeBaseId }) => {
+  ({ open, onClose, fileId, knowledgeBaseId }) => {
     const { t } = useTranslation('components');
     const { message } = App.useApp();
 
@@ -29,11 +28,9 @@ const MoveToFolderModal = memo<MoveToFolderModalProps>(
     const [loadedFolders, setLoadedFolders] = useState<Set<string>>(new Set());
     const [isCreatingFolder, setIsCreatingFolder] = useState(false);
 
-    const [moveFileToFolder, refreshFileList, createFolder, updateDocument] = useFileStore((s) => [
-      s.moveFileToFolder,
-      s.refreshFileList,
+    const [moveResource, createFolder] = useFileStore((s) => [
+      s.moveResource,
       s.createFolder,
-      s.updateDocument,
     ]);
 
     // Sort items: folders only
@@ -226,20 +223,8 @@ const MoveToFolderModal = memo<MoveToFolderModalProps>(
 
     const handleMove = async () => {
       try {
-        // Detect if item is a document/folder (vs regular file)
-        const isDocument =
-          fileType === 'custom/document' || fileType === 'custom/folder';
-
-        if (isDocument) {
-          // Use updateDocument for Pages and folders
-          await updateDocument(fileId, { parentId: selectedFolderId });
-        } else {
-          // Use moveFileToFolder for regular files
-          await moveFileToFolder(fileId, selectedFolderId);
-        }
-
-        // Refresh file list to invalidate SWR cache for both Explorer and Tree
-        await refreshFileList();
+        // Use optimistic moveResource for instant UI update
+        await moveResource(fileId, selectedFolderId);
 
         // Clear and reload all expanded folders in Tree's module-level cache
         if (knowledgeBaseId) {
@@ -256,20 +241,8 @@ const MoveToFolderModal = memo<MoveToFolderModalProps>(
 
     const handleMoveToRoot = async () => {
       try {
-        // Detect if item is a document/folder (vs regular file)
-        const isDocument =
-          fileType === 'custom/document' || fileType === 'custom/folder';
-
-        if (isDocument) {
-          // Use updateDocument for Pages and folders
-          await updateDocument(fileId, { parentId: null });
-        } else {
-          // Use moveFileToFolder for regular files
-          await moveFileToFolder(fileId, null);
-        }
-
-        // Refresh file list to invalidate SWR cache for both Explorer and Tree
-        await refreshFileList();
+        // Use optimistic moveResource for instant UI update
+        await moveResource(fileId, null);
 
         // Clear and reload all expanded folders in Tree's module-level cache
         if (knowledgeBaseId) {

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

@@ -12,7 +12,7 @@ import { useTranslation } from 'react-i18next';
 
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
 import RepoIcon from '@/components/LibIcon';
-import { useKnowledgeBaseStore } from '@/store/knowledgeBase';
+import { useKnowledgeBaseStore } from '@/store/library';
 
 import ActionIconWithChevron from './ActionIconWithChevron';
 

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

@@ -1,15 +1,13 @@
 'use client';
 
 import { Flexbox } from '@lobehub/ui';
-import { memo, useEffect } from 'react';
+import { memo, useEffect, useMemo } from 'react';
 
 import { useFolderPath } from '@/app/[variants]/(main)/resource/features/hooks/useFolderPath';
 import { useResourceManagerUrlSync } from '@/app/[variants]/(main)/resource/features/hooks/useResourceManagerUrlSync';
-import {
-  useResourceManagerFetchKnowledgeItems,
-  useResourceManagerStore,
-} from '@/app/[variants]/(main)/resource/features/store';
+import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
 import { sortFileList } from '@/app/[variants]/(main)/resource/features/store/selectors';
+import { useFetchResources, useResourceStore } from '@/store/file/slices/resource/hooks';
 
 import EmptyPlaceholder from './EmptyPlaceholder';
 import Header from './Header';
@@ -59,14 +57,53 @@ const ResourceExplorer = memo(() => {
   // Get folder path for empty state check
   const { currentFolderSlug } = useFolderPath();
 
-  // Fetch data with SWR - uses built-in cache for instant category switching
-  const { data: rawData, isLoading } = useResourceManagerFetchKnowledgeItems({
-    category,
-    knowledgeBaseId: libraryId,
-    parentId: currentFolderSlug || null,
-    q: searchQuery ?? undefined,
-    showFilesInKnowledgeBase: false,
-  });
+  // Build query params for SWR
+  const queryParams = useMemo(
+    () => ({
+      // Only use category filter when NOT in a specific library
+      // When viewing a library, show all items regardless of category
+      category: libraryId ? undefined : category,
+      libraryId,
+      parentId: currentFolderSlug || null,
+      q: searchQuery ?? undefined,
+      showFilesInKnowledgeBase: false,
+      sortType,
+      sorter,
+    }),
+    [category, libraryId, currentFolderSlug, searchQuery, sortType, sorter],
+  );
+
+  // Use SWR for data fetching with automatic caching and revalidation
+  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]);
+
+  // Map ResourceItem[] to FileListItem[] for compatibility
+  // TODO: Eventually update all consumers to use ResourceItem directly
+  const rawData = resourceList?.map((item) => ({
+    ...item,
+    // Ensure all FileListItem fields are present with proper types
+    chunkCount: item.chunkCount ?? null,
+    chunkingError: item.chunkingError ?? null,
+    chunkingStatus: (item.chunkingStatus ?? null) as any,
+    embeddingError: item.embeddingError ?? null,
+    embeddingStatus: (item.embeddingStatus ?? null) as any,
+    finishEmbedding: item.finishEmbedding ?? false,
+    url: item.url ?? '',
+  }));
 
   // Sort data using current sort settings
   const data = sortFileList(rawData, sorter, sortType);
@@ -83,17 +120,20 @@ const ResourceExplorer = memo(() => {
   }, [category, libraryId, searchQuery, setSelectedFileIds]);
 
   // Computed values
-  const showEmptyStatus = !isLoading && data?.length === 0 && !currentFolderSlug;
-
   const columnCount = useMasonryColumnCount();
 
-  // Only show skeleton on INITIAL load or view transitions, not during revalidation
-  // This allows cached data to show instantly while revalidating in background
+  // 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) || // Only show skeleton if truly loading with no cached data
+    (isLoading && (!data || data.length >= 5)) ||
+    (isNavigating && isValidating) ||
     (viewMode === 'list' && isTransitioning) ||
     (viewMode === 'masonry' && (isTransitioning || !isMasonryReady));
 
+  const showEmptyStatus = !isLoading && !isValidating && data?.length === 0 && !currentFolderSlug;
+
   return (
     <Flexbox height={'100%'}>
       <Header />

package/src/features/ResourceManager/components/Explorer/useCheckTaskStatus.ts

@@ -1,11 +1,10 @@
 import { useEffect } from 'react';
 
-import { useFileStore } from '@/store/file';
 import { AsyncTaskStatus } from '@/types/asyncTask';
+import { revalidateResources } from '@/store/file/slices/resource/hooks';
 import { type FileListItem } from '@/types/files';
 
 export const useCheckTaskStatus = (data: FileListItem[] | undefined) => {
-  const [refreshFileList] = useFileStore((s) => [s.refreshFileList]);
   const hasProcessingChunkTask = data?.some(
     (item) => item.chunkingStatus === AsyncTaskStatus.Processing,
   );
@@ -15,11 +14,14 @@ export const useCheckTaskStatus = (data: FileListItem[] | undefined) => {
 
   const isProcessing = hasProcessingChunkTask || hasProcessingEmbeddingTask;
 
-  // every 3s to check if the chunking status is changed
+  // Poll every 5s to check if chunking/embedding status has changed
   useEffect(() => {
     if (!isProcessing) return;
 
-    const interval = setInterval(refreshFileList, 5000);
+    const interval = setInterval(() => {
+      // Re-fetch with the same query params used for initial load
+      revalidateResources();
+    }, 5000);
     return () => {
       clearInterval(interval);
     };

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

@@ -9,11 +9,11 @@ import { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useResourceManagerStore } from '@/app/[variants]/(main)/resource/features/store';
+import { message } from '@/components/AntdStaticMethods';
 import DragUpload from '@/components/DragUpload';
 import GuideModal from '@/components/GuideModal';
 import GuideVideo from '@/components/GuideVideo';
 import { useFileStore } from '@/store/file';
-import { DocumentSourceType } from '@/types/document';
 
 import useNotionImport from './hooks/useNotionImport';
 import useUploadFolder from './hooks/useUploadFolder';
@@ -22,9 +22,12 @@ const AddButton = () => {
   const { t } = useTranslation('file');
   const pushDockFileList = useFileStore((s) => s.pushDockFileList);
   const uploadFolderWithStructure = useFileStore((s) => s.uploadFolderWithStructure);
-  const createFolder = useFileStore((s) => s.createFolder);
+  const createResource = useFileStore((s) => s.createResource);
+  const createResourceAndSync = useFileStore((s) => s.createResourceAndSync);
+
+  // TODO: Migrate Notion import to use createResource
+  // Keep old functions temporarily for components not yet migrated
   const createDocument = useFileStore((s) => s.createDocument);
-  const refreshFileList = useFileStore((s) => s.refreshFileList);
 
   const [libraryId, currentFolderId, setCurrentViewItemId, setMode, setPendingRenameItemId] =
     useResourceManagerStore((s) => [
@@ -36,47 +39,64 @@ const AddButton = () => {
     ]);
 
   const handleOpenPageEditor = useCallback(async () => {
-    // Create a new page directly and switch to page view
+    // Create a new page with optimistic update - instant UI feedback
     const untitledTitle = t('pageList.untitled');
-    const newPage = await createDocument({
+    const tempId = await createResource({
       content: '',
+      fileType: 'custom/document',
       knowledgeBaseId: libraryId,
       parentId: currentFolderId ?? undefined,
+      sourceType: 'document',
       title: untitledTitle,
     });
 
-    // Add to local document map for immediate availability
-    const newDocumentMap = new Map(useFileStore.getState().localDocumentMap);
-    newDocumentMap.set(newPage.id, {
-      content: newPage.content || '',
-      createdAt: newPage.createdAt ? new Date(newPage.createdAt) : new Date(),
-      editorData:
-        typeof newPage.editorData === 'string'
-          ? JSON.parse(newPage.editorData)
-          : newPage.editorData || null,
-      fileType: 'custom/document',
-      filename: newPage.title || untitledTitle,
-      id: newPage.id,
-      metadata: newPage.metadata || {},
-      source: 'document',
-      sourceType: DocumentSourceType.EDITOR,
-      title: newPage.title || untitledTitle,
-      totalCharCount: newPage.content?.length || 0,
-      totalLineCount: 0,
-      updatedAt: newPage.updatedAt ? new Date(newPage.updatedAt) : new Date(),
-    });
-    useFileStore.setState({ localDocumentMap: newDocumentMap });
-
-    // Switch to page view mode
-    setCurrentViewItemId(newPage.id);
+    // Switch to page view mode immediately (temp ID works)
+    setCurrentViewItemId(tempId);
     setMode('page');
-  }, [createDocument, currentFolderId, libraryId, setCurrentViewItemId, setMode, t]);
+  }, [createResource, currentFolderId, libraryId, setCurrentViewItemId, setMode, t]);
 
   const handleCreateFolder = useCallback(async () => {
-    const folderId = await createFolder('Untitled', currentFolderId ?? undefined, libraryId);
-    // Trigger auto-rename
-    setPendingRenameItemId(folderId);
-  }, [createFolder, currentFolderId, libraryId, setPendingRenameItemId]);
+    // Create folder and wait for sync to complete before triggering rename
+    try {
+      // Get current resource list to check for duplicate folder names
+      const resourceList = useFileStore.getState().resourceList || [];
+
+      // Filter for folders at the same level
+      const foldersAtSameLevel = resourceList.filter(
+        (item) =>
+          item.fileType === 'custom/folder' &&
+          (item.parentId ?? null) === (currentFolderId ?? null),
+      );
+
+      // Generate unique folder name
+      const baseName = 'Untitled';
+      const existingNames = new Set(foldersAtSameLevel.map((folder) => folder.name));
+
+      let uniqueName = baseName;
+      let counter = 1;
+
+      while (existingNames.has(uniqueName)) {
+        uniqueName = `${baseName} ${counter}`;
+        counter++;
+      }
+
+      // Wait for sync to complete to get the real ID
+      const realId = await createResourceAndSync({
+        content: '',
+        fileType: 'custom/folder',
+        knowledgeBaseId: libraryId,
+        parentId: currentFolderId ?? undefined,
+        sourceType: 'document',
+        title: uniqueName,
+      });
+
+      // Trigger auto-rename with the real ID (after sync completes)
+      setPendingRenameItemId(realId);
+    } catch (error) {
+      message.error(t('header.actions.createFolderError'));
+      console.error('Failed to create folder:', error);
+    }
+  }, [createResourceAndSync, currentFolderId, libraryId, setPendingRenameItemId, t]);
 
   const {
     handleCloseNotionGuide,
@@ -89,7 +109,10 @@ const AddButton = () => {
     createDocument,
     currentFolderId,
     libraryId,
-    refreshFileList,
+    refetchResources: async () => {
+      const { revalidateResources } = await import('@/store/file/slices/resource/hooks');
+      await revalidateResources();
+    },
     t,
   });
 

package/src/features/ResourceManager/components/Header/hooks/useNotionImport.ts

@@ -11,7 +11,7 @@ interface UseNotionImportOptions {
   createDocument: DocumentAction['createDocument'];
   currentFolderId?: string | null;
   libraryId?: string | null;
-  refreshFileList: () => Promise<void>;
+  refetchResources: () => Promise<void>;
   t: TFunction<'file'>;
 }
 
@@ -19,7 +19,7 @@ const useNotionImport = ({
   createDocument,
   currentFolderId,
   libraryId,
-  refreshFileList,
+  refetchResources,
   t,
 }: UseNotionImportOptions) => {
   const notionInputRef = useRef<HTMLInputElement>(null);
@@ -171,8 +171,8 @@ const useNotionImport = ({
           );
         }
 
-        // Refresh file list to show imported documents
-        await refreshFileList();
+        // Refetch resources to show imported documents
+        await refetchResources();
       } catch (error) {
         console.error('Failed to import Notion export:', error);
         const { message } = await import('antd');
@@ -182,7 +182,7 @@ const useNotionImport = ({
       // Reset input to allow re-uploading
       event.target.value = '';
     },
-    [createDocument, currentFolderId, libraryId, refreshFileList, t],
+    [createDocument, currentFolderId, libraryId, refetchResources, t],
   );
 
   return {

package/src/features/ResourceManager/components/Tree/TreeSkeleton.tsx

@@ -17,9 +17,13 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
   `,
 }));
 
-const TreeSkeletonItem = memo(() => {
+interface TreeSkeletonItemProps {
+  opacity?: number;
+}
+
+const TreeSkeletonItem = memo<TreeSkeletonItemProps>(({ opacity = 1 }) => {
   return (
-    <Flexbox className={styles.container} horizontal>
+    <Flexbox className={styles.container} horizontal style={{ opacity }}>
       <Skeleton.Button
         active
         size={'small'}
@@ -43,13 +47,19 @@ const TreeSkeletonItem = memo(() => {
 
 TreeSkeletonItem.displayName = 'TreeSkeletonItem';
 
-const TreeSkeleton = memo(() => (
-  <Flexbox gap={2}>
-    {Array.from({ length: 8 }).map((_, i) => (
-      <TreeSkeletonItem key={i} />
-    ))}
-  </Flexbox>
-));
+const TreeSkeleton = memo(() => {
+  const count = 6;
+  // Calculate opacity gradient from 100% to 20%
+  const getOpacity = (index: number) => 1 - (index / (count - 1)) * 0.8;
+
+  return (
+    <Flexbox gap={2}>
+      {Array.from({ length: count }).map((_, i) => (
+        <TreeSkeletonItem key={i} opacity={getOpacity(i)} />
+      ))}
+    </Flexbox>
+  );
+});
 
 TreeSkeleton.displayName = 'TreeSkeleton';