diff --git a/package.json b/package.json
index 36fe62337c..4aa393804b 100644
--- a/package.json
+++ b/package.json
@@ -215,8 +215,8 @@
     "@types/mime-types": "^3",
     "@types/node": "^22.17.1",
     "@types/pako": "^1.0.2",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
     "@types/react-infinite-scroll-component": "^5.0.0",
     "@types/react-transition-group": "^4.4.12",
     "@types/react-window": "^1",
diff --git a/src/renderer/src/components/VirtualList/__tests__/DynamicVirtualList.test.tsx b/src/renderer/src/components/VirtualList/__tests__/DynamicVirtualList.test.tsx
index c9cbbf7ddc..cf1ff29544 100644
--- a/src/renderer/src/components/VirtualList/__tests__/DynamicVirtualList.test.tsx
+++ b/src/renderer/src/components/VirtualList/__tests__/DynamicVirtualList.test.tsx
@@ -140,11 +140,11 @@ describe('DynamicVirtualList', () => {
       // Should call isSticky function during rendering
       expect(isSticky).toHaveBeenCalled()
 
-      // Should apply sticky styles to sticky items
+      // Sticky items within visible range should have proper z-index but may be absolute until scrolled
       const stickyItem = document.querySelector('[data-index="0"]') as HTMLElement
       expect(stickyItem).toBeInTheDocument()
-      expect(stickyItem).toHaveStyle('position: sticky')
-      expect(stickyItem).toHaveStyle('z-index: 1')
+      // When sticky item is in visible range, it gets z-index but may not be sticky yet
+      expect(stickyItem).toHaveStyle('z-index: 999')
     })
 
     it('should apply absolute positioning to non-sticky items', () => {
diff --git a/src/renderer/src/components/VirtualList/__tests__/__snapshots__/DynamicVirtualList.test.tsx.snap b/src/renderer/src/components/VirtualList/__tests__/__snapshots__/DynamicVirtualList.test.tsx.snap
index c5567f9b08..7bf4582822 100644
--- a/src/renderer/src/components/VirtualList/__tests__/__snapshots__/DynamicVirtualList.test.tsx.snap
+++ b/src/renderer/src/components/VirtualList/__tests__/__snapshots__/DynamicVirtualList.test.tsx.snap
@@ -24,7 +24,7 @@ exports[`DynamicVirtualList > basic rendering > snapshot test 1`] = `
     >
       <div
         data-index="0"
-        style="position: absolute; top: 0px; left: 0px; transform: translateY(0px); width: 100%;"
+        style="position: absolute; top: 0px; left: 0px; z-index: 0; pointer-events: auto; transform: translateY(0px); width: 100%;"
       >
         <div
           data-testid="item-0"
@@ -34,7 +34,7 @@ exports[`DynamicVirtualList > basic rendering > snapshot test 1`] = `
       </div>
       <div
         data-index="1"
-        style="position: absolute; top: 0px; left: 0px; transform: translateY(50px); width: 100%;"
+        style="position: absolute; top: 0px; left: 0px; z-index: 0; pointer-events: auto; transform: translateY(50px); width: 100%;"
       >
         <div
           data-testid="item-1"
@@ -44,7 +44,7 @@ exports[`DynamicVirtualList > basic rendering > snapshot test 1`] = `
       </div>
       <div
         data-index="2"
-        style="position: absolute; top: 0px; left: 0px; transform: translateY(100px); width: 100%;"
+        style="position: absolute; top: 0px; left: 0px; z-index: 0; pointer-events: auto; transform: translateY(100px); width: 100%;"
       >
         <div
           data-testid="item-2"
diff --git a/src/renderer/src/components/VirtualList/dynamic.tsx b/src/renderer/src/components/VirtualList/dynamic.tsx
index e2644fea35..0f5d08c6ee 100644
--- a/src/renderer/src/components/VirtualList/dynamic.tsx
+++ b/src/renderer/src/components/VirtualList/dynamic.tsx
@@ -62,6 +62,12 @@ export interface DynamicVirtualListProps<T> extends InheritedVirtualizerOptions
    */
   isSticky?: (index: number) => boolean
 
+  /**
+   * Get the depth/level of an item for hierarchical sticky positioning
+   * Used with isSticky to determine ancestor relationships
+   */
+  getItemDepth?: (index: number) => number
+
   /**
    * Range extractor function, cannot be used with isSticky
    */
@@ -101,6 +107,7 @@ function DynamicVirtualList<T>(props: DynamicVirtualListProps<T>) {
     size,
     estimateSize,
     isSticky,
+    getItemDepth,
     rangeExtractor: customRangeExtractor,
     itemContainerStyle,
     scrollerStyle,
@@ -115,7 +122,7 @@ function DynamicVirtualList<T>(props: DynamicVirtualListProps<T>) {
   const internalScrollerRef = useRef<HTMLDivElement>(null)
   const scrollerRef = internalScrollerRef
 
-  const activeStickyIndexRef = useRef(0)
+  const activeStickyIndexesRef = useRef<number[]>([])
 
   const stickyIndexes = useMemo(() => {
     if (!isSticky) return []
@@ -124,21 +131,55 @@ function DynamicVirtualList<T>(props: DynamicVirtualListProps<T>) {
 
   const internalStickyRangeExtractor = useCallback(
     (range: Range) => {
-      // The active sticky index is the last one that is before or at the start of the visible range
-      const newActiveStickyIndex =
-        [...stickyIndexes].reverse().find((index) => range.startIndex >= index) ?? stickyIndexes[0] ?? 0
+      // VSCode-like sticky behavior: show ancestor chain of current visible items
+      const activeStickies: number[] = []
 
-      if (newActiveStickyIndex !== activeStickyIndexRef.current) {
-        activeStickyIndexRef.current = newActiveStickyIndex
+      if (getItemDepth) {
+        // With depth information, we can build a proper ancestor chain
+        // Find all sticky items before the visible range
+        const stickiesBeforeRange = stickyIndexes.filter((index) => index < range.startIndex)
+
+        if (stickiesBeforeRange.length > 0) {
+          // Find the depth of the first visible item (or last sticky before it)
+          const firstVisibleIndex = range.startIndex
+          const referenceDepth = getItemDepth(firstVisibleIndex)
+
+          // Build ancestor chain: include all sticky parents
+          const ancestorChain: number[] = []
+          let minDepth = referenceDepth
+
+          // Walk backwards from the last sticky before visible range
+          for (let i = stickiesBeforeRange.length - 1; i >= 0; i--) {
+            const stickyIndex = stickiesBeforeRange[i]
+            const stickyDepth = getItemDepth(stickyIndex)
+
+            // Include this sticky if it's a parent (smaller depth) of our reference
+            if (stickyDepth < minDepth) {
+              ancestorChain.unshift(stickyIndex)
+              minDepth = stickyDepth
+            }
+          }
+
+          activeStickies.push(...ancestorChain)
+        }
+      } else {
+        // Fallback: without depth info, just use the last sticky before range
+        const lastStickyBeforeRange = [...stickyIndexes].reverse().find((index) => index < range.startIndex)
+        if (lastStickyBeforeRange !== undefined) {
+          activeStickies.push(lastStickyBeforeRange)
+        }
       }
 
-      // Merge the active sticky index and the default range extractor
-      const next = new Set([activeStickyIndexRef.current, ...defaultRangeExtractor(range)])
+      // Update the ref with current active stickies
+      activeStickyIndexesRef.current = activeStickies
+
+      // Merge the active sticky indexes and the default range extractor
+      const next = new Set([...activeStickyIndexesRef.current, ...defaultRangeExtractor(range)])
 
       // Sort the set to maintain proper order
       return [...next].sort((a, b) => a - b)
     },
-    [stickyIndexes]
+    [stickyIndexes, getItemDepth]
   )
 
   const rangeExtractor = customRangeExtractor ?? (isSticky ? internalStickyRangeExtractor : undefined)
@@ -221,14 +262,53 @@ function DynamicVirtualList<T>(props: DynamicVirtualListProps<T>) {
         }}>
         {virtualItems.map((virtualItem) => {
           const isItemSticky = stickyIndexes.includes(virtualItem.index)
-          const isItemActiveSticky = isItemSticky && activeStickyIndexRef.current === virtualItem.index
+          const isItemActiveSticky = isItemSticky && activeStickyIndexesRef.current.includes(virtualItem.index)
+
+          // Calculate the sticky offset for multi-level sticky headers
+          const activeStickyIndex = isItemActiveSticky ? activeStickyIndexesRef.current.indexOf(virtualItem.index) : -1
+
+          // Calculate cumulative offset based on actual sizes of previous sticky items
+          let stickyOffset = 0
+          if (activeStickyIndex >= 0) {
+            for (let i = 0; i < activeStickyIndex; i++) {
+              const prevStickyIndex = activeStickyIndexesRef.current[i]
+              stickyOffset += estimateSize(prevStickyIndex)
+            }
+          }
+
+          // Check if this item is visually covered by sticky items
+          // If covered, disable pointer events to prevent hover/click bleeding through
+          const isCoveredBySticky = (() => {
+            if (!activeStickyIndexesRef.current.length) return false
+            if (isItemActiveSticky) return false // Sticky items themselves are not covered
+
+            // Calculate if this item's visual position is under any sticky header
+            const itemVisualTop = virtualItem.start
+            let totalStickyHeight = 0
+            for (const stickyIdx of activeStickyIndexesRef.current) {
+              totalStickyHeight += estimateSize(stickyIdx)
+            }
+
+            // If item starts within the sticky area, it's covered
+            return itemVisualTop < totalStickyHeight
+          })()
 
           const style: React.CSSProperties = {
             ...itemContainerStyle,
             position: isItemActiveSticky ? 'sticky' : 'absolute',
-            top: 0,
+            top: isItemActiveSticky ? stickyOffset : 0,
             left: 0,
-            zIndex: isItemSticky ? 1 : undefined,
+            // Critical: Sticky items need higher z-index than non-sticky items
+            // Ancestors (lower activeStickyIndex) should have HIGHER z-index
+            // Non-sticky items get z-index 0 to ensure they render below sticky items
+            zIndex: isItemActiveSticky ? 1000 + (100 - activeStickyIndex) : isItemSticky ? 999 : 0,
+            // CRITICAL: Disable pointer events for items covered by sticky headers
+            // This prevents hover/click events from bleeding through
+            pointerEvents: isCoveredBySticky ? 'none' : 'auto',
+            // Add background and shadow for active sticky items
+            ...(isItemActiveSticky && {
+              backgroundColor: 'var(--color-background)'
+            }),
             ...(horizontal
               ? {
                   transform: isItemActiveSticky ? undefined : `translateX(${virtualItem.start}px)`,
diff --git a/src/renderer/src/hooks/useInPlaceEdit.ts b/src/renderer/src/hooks/useInPlaceEdit.ts
index 675de75c7c..874c1fbc11 100644
--- a/src/renderer/src/hooks/useInPlaceEdit.ts
+++ b/src/renderer/src/hooks/useInPlaceEdit.ts
@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useRef, useState } from 'react'
-
-import { useTimer } from './useTimer'
+import { loggerService } from '@logger'
+import { useCallback, useLayoutEffect, useRef, useState } from 'react'
 
+const logger = loggerService.withContext('useInPlaceEdit')
 export interface UseInPlaceEditOptions {
   onSave: ((value: string) => void) | ((value: string) => Promise<void>)
   onCancel?: () => void
@@ -12,14 +12,10 @@ export interface UseInPlaceEditOptions {
 export interface UseInPlaceEditReturn {
   isEditing: boolean
   isSaving: boolean
-  editValue: string
-  inputRef: React.RefObject<HTMLInputElement | null>
   startEdit: (initialValue: string) => void
   saveEdit: () => void
   cancelEdit: () => void
-  handleKeyDown: (e: React.KeyboardEvent) => void
-  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void
-  handleValueChange: (value: string) => void
+  inputProps: React.InputHTMLAttributes<HTMLInputElement> & { ref: React.RefObject<HTMLInputElement | null> }
 }
 
 /**
@@ -37,58 +33,55 @@ export function useInPlaceEdit(options: UseInPlaceEditOptions): UseInPlaceEditRe
   const [isSaving, setIsSaving] = useState(false)
   const [isEditing, setIsEditing] = useState(false)
   const [editValue, setEditValue] = useState('')
-  const [originalValue, setOriginalValue] = useState('')
+  const originalValueRef = useRef('')
   const inputRef = useRef<HTMLInputElement>(null)
-  const { setTimeoutTimer } = useTimer()
 
-  const startEdit = useCallback(
-    (initialValue: string) => {
-      setIsEditing(true)
-      setEditValue(initialValue)
-      setOriginalValue(initialValue)
+  const startEdit = useCallback((initialValue: string) => {
+    setIsEditing(true)
+    setEditValue(initialValue)
+    originalValueRef.current = initialValue
+  }, [])
 
-      setTimeoutTimer(
-        'startEdit',
-        () => {
-          inputRef.current?.focus()
-          if (autoSelectOnStart) {
-            inputRef.current?.select()
-          }
-        },
-        0
-      )
-    },
-    [autoSelectOnStart, setTimeoutTimer]
-  )
+  useLayoutEffect(() => {
+    if (isEditing) {
+      inputRef.current?.focus()
+      if (autoSelectOnStart) {
+        inputRef.current?.select()
+      }
+    }
+  }, [autoSelectOnStart, isEditing])
 
   const saveEdit = useCallback(async () => {
     if (isSaving) return
 
+    const finalValue = trimOnSave ? editValue.trim() : editValue
+    if (finalValue === originalValueRef.current) {
+      setIsEditing(false)
+      return
+    }
+
     setIsSaving(true)
 
     try {
-      const finalValue = trimOnSave ? editValue.trim() : editValue
-      if (finalValue !== originalValue) {
-        await onSave(finalValue)
-      }
+      await onSave(finalValue)
       setIsEditing(false)
       setEditValue('')
-      setOriginalValue('')
-    } finally {
+    } catch (error) {
+      logger.error('Error saving in-place edit', { error })
       setIsSaving(false)
     }
-  }, [isSaving, trimOnSave, editValue, originalValue, onSave])
+  }, [isSaving, trimOnSave, editValue, onSave])
 
   const cancelEdit = useCallback(() => {
     setIsEditing(false)
     setEditValue('')
-    setOriginalValue('')
     onCancel?.()
   }, [onCancel])
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' && !e.nativeEvent.isComposing) {
+      if (e.nativeEvent.isComposing) return
+      if (e.key === 'Enter') {
         e.preventDefault()
         saveEdit()
       } else if (e.key === 'Escape') {
@@ -104,37 +97,29 @@ export function useInPlaceEdit(options: UseInPlaceEditOptions): UseInPlaceEditRe
     setEditValue(e.target.value)
   }, [])
 
-  const handleValueChange = useCallback((value: string) => {
-    setEditValue(value)
-  }, [])
-
-  // Handle clicks outside the input to save
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      if (isEditing && inputRef.current && !inputRef.current.contains(event.target as Node)) {
-        saveEdit()
-      }
+  const handleBlur = useCallback(() => {
+    // 这里的逻辑需要注意：
+    // 如果点击了“取消”按钮，可能会先触发 Blur 保存。
+    // 通常 InPlaceEdit 的逻辑是 Blur 即 Save。
+    // 如果不想 Blur 保存，可以去掉这一行，或者判断 relatedTarget。
+    if (!isSaving) {
+      saveEdit()
     }
-
-    if (isEditing) {
-      document.addEventListener('mousedown', handleClickOutside)
-      return () => {
-        document.removeEventListener('mousedown', handleClickOutside)
-      }
-    }
-    return
-  }, [isEditing, saveEdit])
+  }, [saveEdit, isSaving])
 
   return {
     isEditing,
     isSaving,
-    editValue,
-    inputRef,
     startEdit,
     saveEdit,
     cancelEdit,
-    handleKeyDown,
-    handleInputChange,
-    handleValueChange
+    inputProps: {
+      ref: inputRef,
+      value: editValue,
+      onChange: handleInputChange,
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur,
+      disabled: isSaving // 保存时禁用输入
+    }
   }
 }
diff --git a/src/renderer/src/i18n/locales/en-us.json b/src/renderer/src/i18n/locales/en-us.json
index 507a8d13aa..08a1b53455 100644
--- a/src/renderer/src/i18n/locales/en-us.json
+++ b/src/renderer/src/i18n/locales/en-us.json
@@ -2175,6 +2175,8 @@
     "untitled_folder": "New Folder",
     "untitled_note": "Untitled Note",
     "upload_failed": "Note upload failed",
+    "upload_files": "Upload Files",
+    "upload_folder": "Upload Folder",
     "upload_success": "Note uploaded success",
     "uploading_files": "Uploading {{count}} files..."
   },
diff --git a/src/renderer/src/i18n/locales/zh-cn.json b/src/renderer/src/i18n/locales/zh-cn.json
index b3c6c9515f..66cc1db399 100644
--- a/src/renderer/src/i18n/locales/zh-cn.json
+++ b/src/renderer/src/i18n/locales/zh-cn.json
@@ -2175,6 +2175,8 @@
     "untitled_folder": "新文件夹",
     "untitled_note": "无标题笔记",
     "upload_failed": "笔记上传失败",
+    "upload_files": "上传文件",
+    "upload_folder": "上传文件夹",
     "upload_success": "笔记上传成功",
     "uploading_files": "正在上传 {{count}} 个文件..."
   },
diff --git a/src/renderer/src/i18n/locales/zh-tw.json b/src/renderer/src/i18n/locales/zh-tw.json
index cefdf0f826..6078072899 100644
--- a/src/renderer/src/i18n/locales/zh-tw.json
+++ b/src/renderer/src/i18n/locales/zh-tw.json
@@ -2175,6 +2175,8 @@
     "untitled_folder": "新資料夾",
     "untitled_note": "無標題筆記",
     "upload_failed": "筆記上傳失敗",
+    "upload_files": "[to be translated]:Upload Files",
+    "upload_folder": "[to be translated]:Upload Folder",
     "upload_success": "筆記上傳成功",
     "uploading_files": "正在上傳 {{count}} 個檔案..."
   },
diff --git a/src/renderer/src/i18n/translate/de-de.json b/src/renderer/src/i18n/translate/de-de.json
index 597259d919..34d4cce4e3 100644
--- a/src/renderer/src/i18n/translate/de-de.json
+++ b/src/renderer/src/i18n/translate/de-de.json
@@ -2175,7 +2175,10 @@
     "untitled_folder": "Neuer Ordner",
     "untitled_note": "Unbenannte Notiz",
     "upload_failed": "Notizen-Upload fehlgeschlagen",
-    "upload_success": "Notizen erfolgreich hochgeladen"
+    "upload_files": "[to be translated]:Upload Files",
+    "upload_folder": "[to be translated]:Upload Folder",
+    "upload_success": "Notizen erfolgreich hochgeladen",
+    "uploading_files": "[to be translated]:Uploading {{count}} files..."
   },
   "notification": {
     "assistant": "Assistenten-Antwort",
diff --git a/src/renderer/src/i18n/translate/el-gr.json b/src/renderer/src/i18n/translate/el-gr.json
index d7cf3b8cff..466e3c0092 100644
--- a/src/renderer/src/i18n/translate/el-gr.json
+++ b/src/renderer/src/i18n/translate/el-gr.json
@@ -2175,7 +2175,10 @@
     "untitled_folder": "Νέος φάκελος",
     "untitled_note": "σημείωση χωρίς τίτλο",
     "upload_failed": "Η σημείωση δεν ανέβηκε",
-    "upload_success": "Οι σημειώσεις μεταφορτώθηκαν με επιτυχία"
+    "upload_files": "[to be translated]:Upload Files",
+    "upload_folder": "[to be translated]:Upload Folder",
+    "upload_success": "Οι σημειώσεις μεταφορτώθηκαν με επιτυχία",
+    "uploading_files": "[to be translated]:Uploading {{count}} files..."
   },
   "notification": {
     "assistant": "Απάντηση Βοηθού",
diff --git a/src/renderer/src/i18n/translate/es-es.json b/src/renderer/src/i18n/translate/es-es.json
index 7c857e9efc..d0dd4387e2 100644
--- a/src/renderer/src/i18n/translate/es-es.json
+++ b/src/renderer/src/i18n/translate/es-es.json
@@ -2175,7 +2175,10 @@
     "untitled_folder": "Nueva carpeta",
     "untitled_note": "Nota sin título",
     "upload_failed": "Error al cargar la nota",
-    "upload_success": "Nota cargada con éxito"
+    "upload_files": "[to be translated]:Upload Files",
+    "upload_folder": "[to be translated]:Upload Folder",
+    "upload_success": "Nota cargada con éxito",
+    "uploading_files": "[to be translated]:Uploading {{count}} files..."
   },
   "notification": {
     "assistant": "Respuesta del asistente",
diff --git a/src/renderer/src/i18n/translate/fr-fr.json b/src/renderer/src/i18n/translate/fr-fr.json
index a9025e404e..ec5bf49e46 100644
--- a/src/renderer/src/i18n/translate/fr-fr.json
+++ b/src/renderer/src/i18n/translate/fr-fr.json
@@ -2175,7 +2175,10 @@
     "untitled_folder": "nouveau dossier",
     "untitled_note": "Note sans titre",
     "upload_failed": "Échec du téléchargement de la note",
-    "upload_success": "Note téléchargée avec succès"
+    "upload_files": "[to be translated]:Upload Files",
+    "upload_folder": "[to be translated]:Upload Folder",
+    "upload_success": "Note téléchargée avec succès",
+    "uploading_files": "[to be translated]:Uploading {{count}} files..."
   },
   "notification": {
     "assistant": "Réponse de l'assistant",
diff --git a/src/renderer/src/i18n/translate/ja-jp.json b/src/renderer/src/i18n/translate/ja-jp.json
index 1559b450da..f1807c2ed7 100644
--- a/src/renderer/src/i18n/translate/ja-jp.json
+++ b/src/renderer/src/i18n/translate/ja-jp.json
@@ -2175,7 +2175,10 @@
     "untitled_folder": "新ファイル夹",
     "untitled_note": "無題のメモ",
     "upload_failed": "ノートのアップロードに失敗しました",
-    "upload_success": "ノートのアップロードが成功しました"
+    "upload_files": "[to be translated]:Upload Files",
+    "upload_folder": "[to be translated]:Upload Folder",
+    "upload_success": "ノートのアップロードが成功しました",
+    "uploading_files": "[to be translated]:Uploading {{count}} files..."
   },
   "notification": {
     "assistant": "助手回應",
diff --git a/src/renderer/src/i18n/translate/pt-pt.json b/src/renderer/src/i18n/translate/pt-pt.json
index eb55076143..6371277ca6 100644
--- a/src/renderer/src/i18n/translate/pt-pt.json
+++ b/src/renderer/src/i18n/translate/pt-pt.json
@@ -2175,7 +2175,10 @@
     "untitled_folder": "Nova pasta",
     "untitled_note": "Nota sem título",
     "upload_failed": "Falha ao carregar a nota",
-    "upload_success": "Nota carregada com sucesso"
+    "upload_files": "[to be translated]:Upload Files",
+    "upload_folder": "[to be translated]:Upload Folder",
+    "upload_success": "Nota carregada com sucesso",
+    "uploading_files": "[to be translated]:Uploading {{count}} files..."
   },
   "notification": {
     "assistant": "Resposta do assistente",
diff --git a/src/renderer/src/i18n/translate/ru-ru.json b/src/renderer/src/i18n/translate/ru-ru.json
index c9e4fc6fc4..00b432e3f5 100644
--- a/src/renderer/src/i18n/translate/ru-ru.json
+++ b/src/renderer/src/i18n/translate/ru-ru.json
@@ -2175,7 +2175,10 @@
     "untitled_folder": "Новая папка",
     "untitled_note": "Незаглавленная заметка",
     "upload_failed": "Не удалось загрузить заметку",
-    "upload_success": "Заметка успешно загружена"
+    "upload_files": "[to be translated]:Upload Files",
+    "upload_folder": "[to be translated]:Upload Folder",
+    "upload_success": "Заметка успешно загружена",
+    "uploading_files": "[to be translated]:Uploading {{count}} files..."
   },
   "notification": {
     "assistant": "Ответ ассистента",
diff --git a/src/renderer/src/pages/home/Tabs/components/SessionItem.tsx b/src/renderer/src/pages/home/Tabs/components/SessionItem.tsx
index 2c719fa132..2fb9652d46 100644
--- a/src/renderer/src/pages/home/Tabs/components/SessionItem.tsx
+++ b/src/renderer/src/pages/home/Tabs/components/SessionItem.tsx
@@ -42,7 +42,7 @@ const SessionItem: FC<SessionItemProps> = ({ session, agentId, onDelete, onPress
   const targetSession = useDeferredValue(_targetSession)
   const dispatch = useAppDispatch()
 
-  const { isEditing, isSaving, editValue, inputRef, startEdit, handleKeyDown, handleValueChange } = useInPlaceEdit({
+  const { isEditing, isSaving, startEdit, inputProps } = useInPlaceEdit({
     onSave: async (value) => {
       if (value !== session.name) {
         await updateSession({ id: session.id, name: value })
@@ -179,14 +179,7 @@ const SessionItem: FC<SessionItemProps> = ({ session, agentId, onDelete, onPress
         {isFulfilled && !isActive && <FulfilledIndicator />}
         <SessionNameContainer>
           {isEditing ? (
-            <SessionEditInput
-              ref={inputRef}
-              value={editValue}
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleValueChange(e.target.value)}
-              onKeyDown={handleKeyDown}
-              onClick={(e: React.MouseEvent) => e.stopPropagation()}
-              style={{ opacity: isSaving ? 0.5 : 1 }}
-            />
+            <SessionEditInput {...inputProps} style={{ opacity: isSaving ? 0.5 : 1 }} />
           ) : (
             <>
               <SessionName>
diff --git a/src/renderer/src/pages/home/Tabs/components/Topics.tsx b/src/renderer/src/pages/home/Tabs/components/Topics.tsx
index e5fce191e3..a61629d9e7 100644
--- a/src/renderer/src/pages/home/Tabs/components/Topics.tsx
+++ b/src/renderer/src/pages/home/Tabs/components/Topics.tsx
@@ -79,7 +79,7 @@ export const Topics: React.FC<Props> = ({ assistant: _assistant, activeTopic, se
   const deleteTimerRef = useRef<NodeJS.Timeout>(null)
   const [editingTopicId, setEditingTopicId] = useState<string | null>(null)
 
-  const topicEdit = useInPlaceEdit({
+  const { startEdit, isEditing, inputProps } = useInPlaceEdit({
     onSave: (name: string) => {
       const topic = assistant.topics.find((t) => t.id === editingTopicId)
       if (topic && name !== topic.name) {
@@ -520,29 +520,23 @@ export const Topics: React.FC<Props> = ({ assistant: _assistant, activeTopic, se
             <TopicListItem
               onContextMenu={() => setTargetTopic(topic)}
               className={classNames(isActive ? 'active' : '', singlealone ? 'singlealone' : '')}
-              onClick={editingTopicId === topic.id && topicEdit.isEditing ? undefined : () => onSwitchTopic(topic)}
+              onClick={editingTopicId === topic.id && isEditing ? undefined : () => onSwitchTopic(topic)}
               style={{
                 borderRadius,
-                cursor: editingTopicId === topic.id && topicEdit.isEditing ? 'default' : 'pointer'
+                cursor: editingTopicId === topic.id && isEditing ? 'default' : 'pointer'
               }}>
               {isPending(topic.id) && !isActive && <PendingIndicator />}
               {isFulfilled(topic.id) && !isActive && <FulfilledIndicator />}
               <TopicNameContainer>
-                {editingTopicId === topic.id && topicEdit.isEditing ? (
-                  <TopicEditInput
-                    ref={topicEdit.inputRef}
-                    value={topicEdit.editValue}
-                    onChange={topicEdit.handleInputChange}
-                    onKeyDown={topicEdit.handleKeyDown}
-                    onClick={(e) => e.stopPropagation()}
-                  />
+                {editingTopicId === topic.id && isEditing ? (
+                  <TopicEditInput {...inputProps} onClick={(e) => e.stopPropagation()} />
                 ) : (
                   <TopicName
                     className={getTopicNameClassName()}
                     title={topicName}
                     onDoubleClick={() => {
                       setEditingTopicId(topic.id)
-                      topicEdit.startEdit(topic.name)
+                      startEdit(topic.name)
                     }}>
                     {topicName}
                   </TopicName>
diff --git a/src/renderer/src/pages/notes/NotesSidebar.tsx b/src/renderer/src/pages/notes/NotesSidebar.tsx
index 8663d9625d..cf4d2fee86 100644
--- a/src/renderer/src/pages/notes/NotesSidebar.tsx
+++ b/src/renderer/src/pages/notes/NotesSidebar.tsx
@@ -1,47 +1,31 @@
-import { loggerService } from '@logger'
-import HighlightText from '@renderer/components/HighlightText'
-import { DeleteIcon } from '@renderer/components/Icons'
-import SaveToKnowledgePopup from '@renderer/components/Popups/SaveToKnowledgePopup'
-import Scrollbar from '@renderer/components/Scrollbar'
-import { useInPlaceEdit } from '@renderer/hooks/useInPlaceEdit'
-import { useKnowledgeBases } from '@renderer/hooks/useKnowledge'
+import { DynamicVirtualList } from '@renderer/components/VirtualList'
 import { useActiveNode } from '@renderer/hooks/useNotesQuery'
 import NotesSidebarHeader from '@renderer/pages/notes/NotesSidebarHeader'
-import { fetchNoteSummary } from '@renderer/services/ApiService'
-import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
-import type { SearchMatch, SearchResult } from '@renderer/services/NotesSearchService'
-import type { RootState } from '@renderer/store'
 import { useAppSelector } from '@renderer/store'
 import { selectSortType } from '@renderer/store/note'
 import type { NotesSortType, NotesTreeNode } from '@renderer/types/note'
-import { exportNote } from '@renderer/utils/export'
-import { useVirtualizer } from '@tanstack/react-virtual'
-import type { InputRef, MenuProps } from 'antd'
-import { Dropdown, Input } from 'antd'
-import type { ItemType, MenuItemType } from 'antd/es/menu/interface'
-import {
-  ChevronDown,
-  ChevronRight,
-  Edit3,
-  File,
-  FilePlus,
-  FileSearch,
-  Folder,
-  FolderOpen,
-  Loader2,
-  Sparkles,
-  Star,
-  StarOff,
-  UploadIcon,
-  X
-} from 'lucide-react'
-import type { FC, Ref } from 'react'
+import type { MenuProps } from 'antd'
+import { Dropdown } from 'antd'
+import { FilePlus, Folder, FolderUp, Loader2, Upload, X } from 'lucide-react'
+import type { FC } from 'react'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useSelector } from 'react-redux'
 import styled from 'styled-components'
 
+import TreeNode from './components/TreeNode'
+import {
+  NotesActionsContext,
+  NotesDragContext,
+  NotesEditingContext,
+  NotesSearchContext,
+  NotesSelectionContext,
+  NotesUIContext
+} from './context/NotesContexts'
 import { useFullTextSearch } from './hooks/useFullTextSearch'
+import { useNotesDragAndDrop } from './hooks/useNotesDragAndDrop'
+import { useNotesEditing } from './hooks/useNotesEditing'
+import { useNotesFileUpload } from './hooks/useNotesFileUpload'
+import { useNotesMenu } from './hooks/useNotesMenu'
 
 interface NotesSidebarProps {
   onCreateFolder: (name: string, targetFolderId?: string) => void
@@ -58,278 +42,6 @@ interface NotesSidebarProps {
   selectedFolderId?: string | null
 }
 
-const logger = loggerService.withContext('NotesSidebar')
-
-interface TreeNodeProps {
-  node: NotesTreeNode | SearchResult
-  depth: number
-  selectedFolderId?: string | null
-  activeNodeId?: string
-  editingNodeId: string | null
-  renamingNodeIds: Set<string>
-  newlyRenamedNodeIds: Set<string>
-  draggedNodeId: string | null
-  dragOverNodeId: string | null
-  dragPosition: 'before' | 'inside' | 'after'
-  inPlaceEdit: any
-  getMenuItems: (node: NotesTreeNode) => any[]
-  onSelectNode: (node: NotesTreeNode) => void
-  onToggleExpanded: (nodeId: string) => void
-  onDragStart: (e: React.DragEvent, node: NotesTreeNode) => void
-  onDragOver: (e: React.DragEvent, node: NotesTreeNode) => void
-  onDragLeave: () => void
-  onDrop: (e: React.DragEvent, node: NotesTreeNode) => void
-  onDragEnd: () => void
-  renderChildren?: boolean // 控制是否渲染子节点
-  searchKeyword?: string // 搜索关键词,用于高亮
-  showMatches?: boolean // 是否显示匹配预览
-  openDropdownKey: string | null
-  onDropdownOpenChange: (key: string | null) => void
-}
-
-const TreeNode = memo<TreeNodeProps>(
-  ({
-    node,
-    depth,
-    selectedFolderId,
-    activeNodeId,
-    editingNodeId,
-    renamingNodeIds,
-    newlyRenamedNodeIds,
-    draggedNodeId,
-    dragOverNodeId,
-    dragPosition,
-    inPlaceEdit,
-    getMenuItems,
-    onSelectNode,
-    onToggleExpanded,
-    onDragStart,
-    onDragOver,
-    onDragLeave,
-    onDrop,
-    onDragEnd,
-    renderChildren = true,
-    searchKeyword = '',
-    showMatches = false,
-    openDropdownKey,
-    onDropdownOpenChange
-  }) => {
-    const { t } = useTranslation()
-    const [showAllMatches, setShowAllMatches] = useState(false)
-
-    // 检查是否是搜索结果
-    const searchResult = 'matchType' in node ? (node as SearchResult) : null
-    const hasMatches = searchResult && searchResult.matches && searchResult.matches.length > 0
-
-    // 处理匹配项点击
-    const handleMatchClick = useCallback(
-      (match: SearchMatch) => {
-        // 发送定位事件
-        EventEmitter.emit(EVENT_NAMES.LOCATE_NOTE_LINE, {
-          noteId: node.id,
-          lineNumber: match.lineNumber,
-          lineContent: match.lineContent
-        })
-      },
-      [node]
-    )
-
-    const isActive = selectedFolderId
-      ? node.type === 'folder' && node.id === selectedFolderId
-      : node.id === activeNodeId
-    const isEditing = editingNodeId === node.id && inPlaceEdit.isEditing
-    const isRenaming = renamingNodeIds.has(node.id)
-    const isNewlyRenamed = newlyRenamedNodeIds.has(node.id)
-    const hasChildren = node.children && node.children.length > 0
-    const isDragging = draggedNodeId === node.id
-    const isDragOver = dragOverNodeId === node.id
-    const isDragBefore = isDragOver && dragPosition === 'before'
-    const isDragInside = isDragOver && dragPosition === 'inside'
-    const isDragAfter = isDragOver && dragPosition === 'after'
-
-    const getNodeNameClassName = () => {
-      if (isRenaming) return 'shimmer'
-      if (isNewlyRenamed) return 'typing'
-      return ''
-    }
-
-    const displayName = useMemo(() => {
-      if (!searchKeyword) {
-        return node.name
-      }
-
-      const name = node.name ?? ''
-      if (!name) {
-        return name
-      }
-
-      const keyword = searchKeyword
-      const nameLower = name.toLowerCase()
-      const keywordLower = keyword.toLowerCase()
-      const matchStart = nameLower.indexOf(keywordLower)
-
-      if (matchStart === -1) {
-        return name
-      }
-
-      const matchEnd = matchStart + keyword.length
-      const beforeMatch = Math.min(2, matchStart)
-      const contextStart = matchStart - beforeMatch
-      const contextLength = 50
-      const contextEnd = Math.min(name.length, matchEnd + contextLength)
-
-      const prefix = contextStart > 0 ? '...' : ''
-      const suffix = contextEnd < name.length ? '...' : ''
-
-      return prefix + name.substring(contextStart, contextEnd) + suffix
-    }, [node.name, searchKeyword])
-
-    return (
-      <div key={node.id}>
-        <Dropdown
-          menu={{ items: getMenuItems(node) }}
-          trigger={['contextMenu']}
-          open={openDropdownKey === node.id}
-          onOpenChange={(open) => onDropdownOpenChange(open ? node.id : null)}>
-          <div onContextMenu={(e) => e.stopPropagation()}>
-            <TreeNodeContainer
-              active={isActive}
-              depth={depth}
-              isDragging={isDragging}
-              isDragOver={isDragOver}
-              isDragBefore={isDragBefore}
-              isDragInside={isDragInside}
-              isDragAfter={isDragAfter}
-              draggable={!isEditing}
-              data-node-id={node.id}
-              onDragStart={(e) => onDragStart(e, node)}
-              onDragOver={(e) => onDragOver(e, node)}
-              onDragLeave={onDragLeave}
-              onDrop={(e) => onDrop(e, node)}
-              onDragEnd={onDragEnd}>
-              <TreeNodeContent onClick={() => onSelectNode(node)}>
-                <NodeIndent depth={depth} />
-
-                {node.type === 'folder' && (
-                  <ExpandIcon
-                    onClick={(e) => {
-                      e.stopPropagation()
-                      onToggleExpanded(node.id)
-                    }}
-                    title={node.expanded ? t('notes.collapse') : t('notes.expand')}>
-                    {node.expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-                  </ExpandIcon>
-                )}
-
-                <NodeIcon>
-                  {node.type === 'folder' ? (
-                    node.expanded ? (
-                      <FolderOpen size={16} />
-                    ) : (
-                      <Folder size={16} />
-                    )
-                  ) : (
-                    <File size={16} />
-                  )}
-                </NodeIcon>
-
-                {isEditing ? (
-                  <EditInput
-                    ref={inPlaceEdit.inputRef as Ref<InputRef>}
-                    value={inPlaceEdit.editValue}
-                    onChange={inPlaceEdit.handleInputChange}
-                    onBlur={inPlaceEdit.saveEdit}
-                    onKeyDown={inPlaceEdit.handleKeyDown}
-                    onClick={(e) => e.stopPropagation()}
-                    autoFocus
-                    size="small"
-                  />
-                ) : (
-                  <NodeNameContainer>
-                    <NodeName className={getNodeNameClassName()}>
-                      {searchKeyword ? <HighlightText text={displayName} keyword={searchKeyword} /> : node.name}
-                    </NodeName>
-                    {searchResult && searchResult.matchType && searchResult.matchType !== 'filename' && (
-                      <MatchBadge matchType={searchResult.matchType}>
-                        {searchResult.matchType === 'both' ? t('notes.search.both') : t('notes.search.content')}
-                      </MatchBadge>
-                    )}
-                  </NodeNameContainer>
-                )}
-              </TreeNodeContent>
-            </TreeNodeContainer>
-          </div>
-        </Dropdown>
-
-        {showMatches && hasMatches && (
-          <SearchMatchesContainer depth={depth}>
-            {(showAllMatches ? searchResult!.matches! : searchResult!.matches!.slice(0, 3)).map((match, idx) => (
-              <MatchItem key={idx} onClick={() => handleMatchClick(match)}>
-                <MatchLineNumber>{match.lineNumber}</MatchLineNumber>
-                <MatchContext>
-                  <HighlightText text={match.context} keyword={searchKeyword} />
-                </MatchContext>
-              </MatchItem>
-            ))}
-            {searchResult!.matches!.length > 3 && (
-              <MoreMatches
-                depth={depth}
-                onClick={(e) => {
-                  e.stopPropagation()
-                  setShowAllMatches(!showAllMatches)
-                }}>
-                {showAllMatches ? (
-                  <>
-                    <ChevronDown size={12} style={{ marginRight: 4 }} />
-                    {t('notes.search.show_less')}
-                  </>
-                ) : (
-                  <>
-                    <ChevronRight size={12} style={{ marginRight: 4 }} />+{searchResult!.matches!.length - 3}{' '}
-                    {t('notes.search.more_matches')}
-                  </>
-                )}
-              </MoreMatches>
-            )}
-          </SearchMatchesContainer>
-        )}
-
-        {renderChildren && node.type === 'folder' && node.expanded && hasChildren && (
-          <div>
-            {node.children!.map((child) => (
-              <TreeNode
-                key={child.id}
-                node={child}
-                depth={depth + 1}
-                selectedFolderId={selectedFolderId}
-                activeNodeId={activeNodeId}
-                editingNodeId={editingNodeId}
-                renamingNodeIds={renamingNodeIds}
-                newlyRenamedNodeIds={newlyRenamedNodeIds}
-                draggedNodeId={draggedNodeId}
-                dragOverNodeId={dragOverNodeId}
-                dragPosition={dragPosition}
-                inPlaceEdit={inPlaceEdit}
-                getMenuItems={getMenuItems}
-                onSelectNode={onSelectNode}
-                onToggleExpanded={onToggleExpanded}
-                onDragStart={onDragStart}
-                onDragOver={onDragOver}
-                onDragLeave={onDragLeave}
-                onDrop={onDrop}
-                onDragEnd={onDragEnd}
-                renderChildren={renderChildren}
-                openDropdownKey={openDropdownKey}
-                onDropdownOpenChange={onDropdownOpenChange}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    )
-  }
-)
-
 const NotesSidebar: FC<NotesSidebarProps> = ({
   onCreateFolder,
   onCreateNote,
@@ -345,28 +57,60 @@ const NotesSidebar: FC<NotesSidebarProps> = ({
   selectedFolderId
 }) => {
   const { t } = useTranslation()
-  const { bases } = useKnowledgeBases()
   const { activeNode } = useActiveNode(notesTree)
   const sortType = useAppSelector(selectSortType)
-  const exportMenuOptions = useSelector((state: RootState) => state.settings.exportMenuOptions)
-  const [editingNodeId, setEditingNodeId] = useState<string | null>(null)
-  const [renamingNodeIds, setRenamingNodeIds] = useState<Set<string>>(new Set())
-  const [newlyRenamedNodeIds, setNewlyRenamedNodeIds] = useState<Set<string>>(new Set())
-  const [draggedNodeId, setDraggedNodeId] = useState<string | null>(null)
-  const [dragOverNodeId, setDragOverNodeId] = useState<string | null>(null)
-  const [dragPosition, setDragPosition] = useState<'before' | 'inside' | 'after'>('inside')
+
+  // --- State ---
   const [isShowStarred, setIsShowStarred] = useState(false)
   const [isShowSearch, setIsShowSearch] = useState(false)
   const [searchKeyword, setSearchKeyword] = useState('')
   const [isDragOverSidebar, setIsDragOverSidebar] = useState(false)
   const [openDropdownKey, setOpenDropdownKey] = useState<string | null>(null)
-  const dragNodeRef = useRef<HTMLDivElement | null>(null)
-  const scrollbarRef = useRef<any>(null)
+
   const notesTreeRef = useRef<NotesTreeNode[]>(notesTree)
+  const virtualListRef = useRef<any>(null)
   const trimmedSearchKeyword = useMemo(() => searchKeyword.trim(), [searchKeyword])
   const hasSearchKeyword = trimmedSearchKeyword.length > 0
 
-  // 全文搜索配置
+  // --- Hooks ---
+
+  // Editing Hook
+  const { editingNodeId, renamingNodeIds, newlyRenamedNodeIds, inPlaceEdit, handleStartEdit, handleAutoRename } =
+    useNotesEditing({ onRenameNode })
+
+  // Drag and Drop Hook
+  const {
+    draggedNodeId,
+    dragOverNodeId,
+    dragPosition,
+    handleDragStart,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    handleDragEnd
+  } = useNotesDragAndDrop({ onMoveNode })
+
+  // File Upload Hook
+  const { handleDropFiles, handleSelectFiles, handleSelectFolder } = useNotesFileUpload({
+    onUploadFiles,
+    setIsDragOverSidebar
+  })
+
+  // Menu Hook
+  const { getMenuItems } = useNotesMenu({
+    renamingNodeIds,
+    onCreateNote,
+    onCreateFolder,
+    onRenameNode,
+    onToggleStar,
+    onDeleteNode,
+    onSelectNode,
+    handleStartEdit,
+    handleAutoRename,
+    activeNode
+  })
+
+  // Search Hook
   const searchOptions = useMemo(
     () => ({
       debounceMs: 300,
@@ -388,268 +132,14 @@ const NotesSidebar: FC<NotesSidebarProps> = ({
     stats: searchStats
   } = useFullTextSearch(searchOptions)
 
-  const inPlaceEdit = useInPlaceEdit({
-    onSave: (newName: string) => {
-      if (editingNodeId && newName) {
-        onRenameNode(editingNodeId, newName)
-        logger.debug(`Renamed node ${editingNodeId} to "${newName}"`)
-      }
-      setEditingNodeId(null)
-    },
-    onCancel: () => {
-      setEditingNodeId(null)
-    }
-  })
+  // --- Effects ---
 
-  // 滚动到活动节点
-  useEffect(() => {
-    if (activeNode?.id && !isShowStarred && !isShowSearch && scrollbarRef.current) {
-      // 延迟一下确保DOM已更新
-      setTimeout(() => {
-        const scrollContainer = scrollbarRef.current as HTMLElement
-        if (scrollContainer) {
-          const activeElement = scrollContainer.querySelector(`[data-node-id="${activeNode.id}"]`) as HTMLElement
-          if (activeElement) {
-            // 获取元素相对于滚动容器的位置
-            const containerHeight = scrollContainer.clientHeight
-            const elementOffsetTop = activeElement.offsetTop
-            const elementHeight = activeElement.offsetHeight
-            const currentScrollTop = scrollContainer.scrollTop
-
-            // 检查元素是否在可视区域内
-            const elementTop = elementOffsetTop
-            const elementBottom = elementOffsetTop + elementHeight
-            const viewTop = currentScrollTop
-            const viewBottom = currentScrollTop + containerHeight
-
-            // 如果元素不在可视区域内，滚动到中心位置
-            if (elementTop < viewTop || elementBottom > viewBottom) {
-              const targetScrollTop = elementOffsetTop - (containerHeight - elementHeight) / 2
-              scrollContainer.scrollTo({
-                top: Math.max(0, targetScrollTop),
-                behavior: 'instant'
-              })
-            }
-          }
-        }
-      }, 200)
-    }
-  }, [activeNode?.id, isShowStarred, isShowSearch])
-
-  const handleCreateFolder = useCallback(() => {
-    onCreateFolder(t('notes.untitled_folder'))
-  }, [onCreateFolder, t])
-
-  const handleCreateNote = useCallback(() => {
-    onCreateNote(t('notes.untitled_note'))
-  }, [onCreateNote, t])
-
-  const handleSelectSortType = useCallback(
-    (selectedSortType: NotesSortType) => {
-      onSortNodes(selectedSortType)
-    },
-    [onSortNodes]
-  )
-
-  const handleStartEdit = useCallback(
-    (node: NotesTreeNode) => {
-      setEditingNodeId(node.id)
-      inPlaceEdit.startEdit(node.name)
-    },
-    [inPlaceEdit]
-  )
-
-  const handleDeleteNode = useCallback(
-    (node: NotesTreeNode) => {
-      const confirmText =
-        node.type === 'folder'
-          ? t('notes.delete_folder_confirm', { name: node.name })
-          : t('notes.delete_note_confirm', { name: node.name })
-
-      window.modal.confirm({
-        title: t('notes.delete'),
-        content: confirmText,
-        centered: true,
-        okButtonProps: { danger: true },
-        onOk: () => {
-          onDeleteNode(node.id)
-        }
-      })
-    },
-    [onDeleteNode, t]
-  )
-
-  const handleExportKnowledge = useCallback(
-    async (note: NotesTreeNode) => {
-      try {
-        if (bases.length === 0) {
-          window.toast.warning(t('chat.save.knowledge.empty.no_knowledge_base'))
-          return
-        }
-
-        const result = await SaveToKnowledgePopup.showForNote(note)
-
-        if (result?.success) {
-          window.toast.success(t('notes.export_success', { count: result.savedCount }))
-        }
-      } catch (error) {
-        window.toast.error(t('notes.export_failed'))
-        logger.error(`Failed to export note to knowledge base: ${error}`)
-      }
-    },
-    [bases.length, t]
-  )
-
-  const handleImageAction = useCallback(
-    async (node: NotesTreeNode, platform: 'copyImage' | 'exportImage') => {
-      try {
-        if (activeNode?.id !== node.id) {
-          onSelectNode(node)
-          await new Promise((resolve) => setTimeout(resolve, 500))
-        }
-
-        await exportNote({ node, platform })
-      } catch (error) {
-        logger.error(`Failed to ${platform === 'copyImage' ? 'copy' : 'export'} as image:`, error as Error)
-        window.toast.error(t('common.copy_failed'))
-      }
-    },
-    [activeNode, onSelectNode, t]
-  )
-
-  const handleAutoRename = useCallback(
-    async (note: NotesTreeNode) => {
-      if (note.type !== 'file') return
-
-      setRenamingNodeIds((prev) => new Set(prev).add(note.id))
-      try {
-        const content = await window.api.file.readExternal(note.externalPath)
-        if (!content || content.trim().length === 0) {
-          window.toast.warning(t('notes.auto_rename.empty_note'))
-          return
-        }
-
-        const summaryText = await fetchNoteSummary({ content })
-        if (summaryText) {
-          onRenameNode(note.id, summaryText)
-          window.toast.success(t('notes.auto_rename.success'))
-        } else {
-          window.toast.error(t('notes.auto_rename.failed'))
-        }
-      } catch (error) {
-        window.toast.error(t('notes.auto_rename.failed'))
-        logger.error(`Failed to auto-rename note: ${error}`)
-      } finally {
-        setRenamingNodeIds((prev) => {
-          const next = new Set(prev)
-          next.delete(note.id)
-          return next
-        })
-
-        setNewlyRenamedNodeIds((prev) => new Set(prev).add(note.id))
-
-        setTimeout(() => {
-          setNewlyRenamedNodeIds((prev) => {
-            const next = new Set(prev)
-            next.delete(note.id)
-            return next
-          })
-        }, 700)
-      }
-    },
-    [onRenameNode, t]
-  )
-
-  const handleDragStart = useCallback((e: React.DragEvent, node: NotesTreeNode) => {
-    setDraggedNodeId(node.id)
-    e.dataTransfer.effectAllowed = 'move'
-    e.dataTransfer.setData('text/plain', node.id)
-
-    dragNodeRef.current = e.currentTarget as HTMLDivElement
-
-    if (e.currentTarget.parentElement) {
-      const rect = e.currentTarget.getBoundingClientRect()
-      const ghostElement = e.currentTarget.cloneNode(true) as HTMLElement
-      ghostElement.style.width = `${rect.width}px`
-      ghostElement.style.opacity = '0.7'
-      ghostElement.style.position = 'absolute'
-      ghostElement.style.top = '-1000px'
-      document.body.appendChild(ghostElement)
-      e.dataTransfer.setDragImage(ghostElement, 10, 10)
-      setTimeout(() => {
-        document.body.removeChild(ghostElement)
-      }, 0)
-    }
-  }, [])
-
-  const handleDragOver = useCallback(
-    (e: React.DragEvent, node: NotesTreeNode) => {
-      e.preventDefault()
-      e.dataTransfer.dropEffect = 'move'
-
-      if (draggedNodeId === node.id) {
-        return
-      }
-
-      setDragOverNodeId(node.id)
-
-      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
-      const mouseY = e.clientY
-      const thresholdTop = rect.top + rect.height * 0.3
-      const thresholdBottom = rect.bottom - rect.height * 0.3
-
-      if (mouseY < thresholdTop) {
-        setDragPosition('before')
-      } else if (mouseY > thresholdBottom) {
-        setDragPosition('after')
-      } else {
-        setDragPosition(node.type === 'folder' ? 'inside' : 'after')
-      }
-    },
-    [draggedNodeId]
-  )
-
-  const handleDragLeave = useCallback(() => {
-    setDragOverNodeId(null)
-    setDragPosition('inside')
-  }, [])
-
-  const handleDrop = useCallback(
-    (e: React.DragEvent, targetNode: NotesTreeNode) => {
-      e.preventDefault()
-      const draggedId = e.dataTransfer.getData('text/plain')
-
-      if (draggedId && draggedId !== targetNode.id) {
-        onMoveNode(draggedId, targetNode.id, dragPosition)
-      }
-
-      setDraggedNodeId(null)
-      setDragOverNodeId(null)
-      setDragPosition('inside')
-    },
-    [onMoveNode, dragPosition]
-  )
-
-  const handleDragEnd = useCallback(() => {
-    setDraggedNodeId(null)
-    setDragOverNodeId(null)
-    setDragPosition('inside')
-  }, [])
-
-  const handleToggleStarredView = useCallback(() => {
-    setIsShowStarred(!isShowStarred)
-  }, [isShowStarred])
-
-  const handleToggleSearchView = useCallback(() => {
-    setIsShowSearch(!isShowSearch)
-  }, [isShowSearch])
-
-  // 同步 notesTree 到 ref
+  // Sync notesTree to ref
   useEffect(() => {
     notesTreeRef.current = notesTree
   }, [notesTree])
 
-  // 触发全文搜索
+  // Trigger Search
   useEffect(() => {
     if (!isShowSearch) {
       reset()
@@ -663,6 +153,61 @@ const NotesSidebar: FC<NotesSidebarProps> = ({
     }
   }, [isShowSearch, hasSearchKeyword, trimmedSearchKeyword, search, reset])
 
+  // --- Logic ---
+
+  const handleCreateFolder = useCallback(() => {
+    onCreateFolder(t('notes.untitled_folder'))
+  }, [onCreateFolder, t])
+
+  const handleCreateNote = useCallback(() => {
+    onCreateNote(t('notes.untitled_note'))
+  }, [onCreateNote, t])
+
+  const handleToggleStarredView = useCallback(() => {
+    setIsShowStarred(!isShowStarred)
+  }, [isShowStarred])
+
+  const handleToggleSearchView = useCallback(() => {
+    setIsShowSearch(!isShowSearch)
+  }, [isShowSearch])
+
+  const handleSelectSortType = useCallback(
+    (selectedSortType: NotesSortType) => {
+      onSortNodes(selectedSortType)
+    },
+    [onSortNodes]
+  )
+
+  const getEmptyAreaMenuItems = useCallback((): MenuProps['items'] => {
+    return [
+      {
+        label: t('notes.new_note'),
+        key: 'new_note',
+        icon: <FilePlus size={14} />,
+        onClick: handleCreateNote
+      },
+      {
+        label: t('notes.new_folder'),
+        key: 'new_folder',
+        icon: <Folder size={14} />,
+        onClick: handleCreateFolder
+      },
+      { type: 'divider' },
+      {
+        label: t('notes.upload_files'),
+        key: 'upload_files',
+        icon: <Upload size={14} />,
+        onClick: handleSelectFiles
+      },
+      {
+        label: t('notes.upload_folder'),
+        key: 'upload_folder',
+        icon: <FolderUp size={14} />,
+        onClick: handleSelectFolder
+      }
+    ]
+  }, [t, handleCreateNote, handleCreateFolder, handleSelectFiles, handleSelectFolder])
+
   // Flatten tree nodes for virtualization and filtering
   const flattenedNodes = useMemo(() => {
     const flattenForVirtualization = (
@@ -706,493 +251,210 @@ const NotesSidebar: FC<NotesSidebarProps> = ({
     }
 
     if (isShowStarred) {
-      // For filtered views, return flat list without virtualization for simplicity
       const filteredNodes = flattenForFiltering(notesTree)
       return filteredNodes.map((node) => ({ node, depth: 0 }))
     }
 
-    // For normal tree view, use hierarchical flattening for virtualization
     return flattenForVirtualization(notesTree)
   }, [notesTree, isShowStarred, isShowSearch, hasSearchKeyword, searchResults])
 
-  // Use virtualization only for normal tree view with many items
-  const shouldUseVirtualization = !isShowStarred && !isShowSearch && flattenedNodes.length > 100
-
-  const parentRef = useRef<HTMLDivElement>(null)
-
-  const virtualizer = useVirtualizer({
-    count: flattenedNodes.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => 28, // Estimated height of each tree item
-    overscan: 10
-  })
-
-  const filteredTree = useMemo(() => {
-    if (isShowStarred || isShowSearch) {
-      return flattenedNodes.map(({ node }) => node)
+  // Scroll to active node
+  useEffect(() => {
+    if (activeNode?.id && !isShowStarred && !isShowSearch && virtualListRef.current) {
+      setTimeout(() => {
+        const activeIndex = flattenedNodes.findIndex(({ node }) => node.id === activeNode.id)
+        if (activeIndex !== -1) {
+          virtualListRef.current?.scrollToIndex(activeIndex, {
+            align: 'center',
+            behavior: 'auto'
+          })
+        }
+      }, 200)
     }
-    return notesTree
-  }, [flattenedNodes, isShowStarred, isShowSearch, notesTree])
+  }, [activeNode?.id, isShowStarred, isShowSearch, flattenedNodes])
 
-  const getMenuItems = useCallback(
-    (node: NotesTreeNode) => {
-      const baseMenuItems: MenuProps['items'] = []
+  // Determine which items should be sticky (only folders in normal view)
+  const isSticky = useCallback(
+    (index: number) => {
+      const item = flattenedNodes[index]
+      if (!item) return false
 
-      // only show auto rename for file for now
-      if (node.type !== 'folder') {
-        baseMenuItems.push({
-          label: t('notes.auto_rename.label'),
-          key: 'auto-rename',
-          icon: <Sparkles size={14} />,
-          disabled: renamingNodeIds.has(node.id),
-          onClick: () => {
-            handleAutoRename(node)
-          }
-        })
-      }
-
-      if (node.type === 'folder') {
-        baseMenuItems.push(
-          {
-            label: t('notes.new_note'),
-            key: 'new_note',
-            icon: <FilePlus size={14} />,
-            onClick: () => {
-              onCreateNote(t('notes.untitled_note'), node.id)
-            }
-          },
-          {
-            label: t('notes.new_folder'),
-            key: 'new_folder',
-            icon: <Folder size={14} />,
-            onClick: () => {
-              onCreateFolder(t('notes.untitled_folder'), node.id)
-            }
-          },
-          { type: 'divider' }
-        )
-      }
-
-      baseMenuItems.push(
-        {
-          label: t('notes.rename'),
-          key: 'rename',
-          icon: <Edit3 size={14} />,
-          onClick: () => {
-            handleStartEdit(node)
-          }
-        },
-        {
-          label: t('notes.open_outside'),
-          key: 'open_outside',
-          icon: <FolderOpen size={14} />,
-          onClick: () => {
-            window.api.openPath(node.externalPath)
-          }
-        }
-      )
-      if (node.type !== 'folder') {
-        baseMenuItems.push(
-          {
-            label: node.isStarred ? t('notes.unstar') : t('notes.star'),
-            key: 'star',
-            icon: node.isStarred ? <StarOff size={14} /> : <Star size={14} />,
-            onClick: () => {
-              onToggleStar(node.id)
-            }
-          },
-          {
-            label: t('notes.export_knowledge'),
-            key: 'export_knowledge',
-            icon: <FileSearch size={14} />,
-            onClick: () => {
-              handleExportKnowledge(node)
-            }
-          },
-          {
-            label: t('chat.topics.export.title'),
-            key: 'export',
-            icon: <UploadIcon size={14} />,
-            children: [
-              exportMenuOptions.image && {
-                label: t('chat.topics.copy.image'),
-                key: 'copy-image',
-                onClick: () => handleImageAction(node, 'copyImage')
-              },
-              exportMenuOptions.image && {
-                label: t('chat.topics.export.image'),
-                key: 'export-image',
-                onClick: () => handleImageAction(node, 'exportImage')
-              },
-              exportMenuOptions.markdown && {
-                label: t('chat.topics.export.md.label'),
-                key: 'markdown',
-                onClick: () => exportNote({ node, platform: 'markdown' })
-              },
-              exportMenuOptions.docx && {
-                label: t('chat.topics.export.word'),
-                key: 'word',
-                onClick: () => exportNote({ node, platform: 'docx' })
-              },
-              exportMenuOptions.notion && {
-                label: t('chat.topics.export.notion'),
-                key: 'notion',
-                onClick: () => exportNote({ node, platform: 'notion' })
-              },
-              exportMenuOptions.yuque && {
-                label: t('chat.topics.export.yuque'),
-                key: 'yuque',
-                onClick: () => exportNote({ node, platform: 'yuque' })
-              },
-              exportMenuOptions.obsidian && {
-                label: t('chat.topics.export.obsidian'),
-                key: 'obsidian',
-                onClick: () => exportNote({ node, platform: 'obsidian' })
-              },
-              exportMenuOptions.joplin && {
-                label: t('chat.topics.export.joplin'),
-                key: 'joplin',
-                onClick: () => exportNote({ node, platform: 'joplin' })
-              },
-              exportMenuOptions.siyuan && {
-                label: t('chat.topics.export.siyuan'),
-                key: 'siyuan',
-                onClick: () => exportNote({ node, platform: 'siyuan' })
-              }
-            ].filter(Boolean) as ItemType<MenuItemType>[]
-          }
-        )
-      }
-      baseMenuItems.push(
-        { type: 'divider' },
-        {
-          label: t('notes.delete'),
-          danger: true,
-          key: 'delete',
-          icon: <DeleteIcon size={14} className="lucide-custom" />,
-          onClick: () => {
-            handleDeleteNode(node)
-          }
-        }
-      )
-
-      return baseMenuItems
+      // Only folders should be sticky, and only in normal view (not search or starred)
+      return item.node.type === 'folder' && !isShowSearch && !isShowStarred
     },
-    [
-      t,
-      handleStartEdit,
-      onToggleStar,
-      handleExportKnowledge,
-      handleImageAction,
-      handleDeleteNode,
+    [flattenedNodes, isShowSearch, isShowStarred]
+  )
+
+  // Get the depth of an item for hierarchical sticky positioning
+  const getItemDepth = useCallback(
+    (index: number) => {
+      const item = flattenedNodes[index]
+      return item?.depth ?? 0
+    },
+    [flattenedNodes]
+  )
+
+  const actionsValue = useMemo(
+    () => ({
+      getMenuItems,
+      onSelectNode,
+      onToggleExpanded,
+      onDropdownOpenChange: setOpenDropdownKey
+    }),
+    [getMenuItems, onSelectNode, onToggleExpanded]
+  )
+
+  const selectionValue = useMemo(
+    () => ({
+      selectedFolderId,
+      activeNodeId: activeNode?.id
+    }),
+    [selectedFolderId, activeNode?.id]
+  )
+
+  const editingValue = useMemo(
+    () => ({
+      editingNodeId,
       renamingNodeIds,
-      handleAutoRename,
-      exportMenuOptions,
-      onCreateNote,
-      onCreateFolder
+      newlyRenamedNodeIds,
+      inPlaceEdit
+    }),
+    [editingNodeId, renamingNodeIds, newlyRenamedNodeIds, inPlaceEdit]
+  )
+
+  const dragValue = useMemo(
+    () => ({
+      draggedNodeId,
+      dragOverNodeId,
+      dragPosition,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      onDragEnd: handleDragEnd
+    }),
+    [
+      draggedNodeId,
+      dragOverNodeId,
+      dragPosition,
+      handleDragStart,
+      handleDragOver,
+      handleDragLeave,
+      handleDrop,
+      handleDragEnd
     ]
   )
 
-  const handleDropFiles = useCallback(
-    async (e: React.DragEvent) => {
-      e.preventDefault()
-      setIsDragOverSidebar(false)
-
-      // 处理文件夹拖拽：从 dataTransfer.items 获取完整的文件路径信息
-      const items = Array.from(e.dataTransfer.items)
-      const files: File[] = []
-
-      const processEntry = async (entry: FileSystemEntry, path: string = '') => {
-        if (entry.isFile) {
-          const fileEntry = entry as FileSystemFileEntry
-          return new Promise<void>((resolve) => {
-            fileEntry.file((file) => {
-              // 手动设置 webkitRelativePath 以保持文件夹结构
-              Object.defineProperty(file, 'webkitRelativePath', {
-                value: path + file.name,
-                writable: false
-              })
-              files.push(file)
-              resolve()
-            })
-          })
-        } else if (entry.isDirectory) {
-          const dirEntry = entry as FileSystemDirectoryEntry
-          const reader = dirEntry.createReader()
-          return new Promise<void>((resolve) => {
-            reader.readEntries(async (entries) => {
-              const promises = entries.map((subEntry) => processEntry(subEntry, path + entry.name + '/'))
-              await Promise.all(promises)
-              resolve()
-            })
-          })
-        }
-      }
-
-      // 如果支持 DataTransferItem API（文件夹拖拽）
-      if (items.length > 0 && items[0].webkitGetAsEntry()) {
-        const promises = items.map((item) => {
-          const entry = item.webkitGetAsEntry()
-          return entry ? processEntry(entry) : Promise.resolve()
-        })
-
-        await Promise.all(promises)
-
-        if (files.length > 0) {
-          onUploadFiles(files)
-        }
-      } else {
-        const regularFiles = Array.from(e.dataTransfer.files)
-        if (regularFiles.length > 0) {
-          onUploadFiles(regularFiles)
-        }
-      }
-    },
-    [onUploadFiles]
+  const searchValue = useMemo(
+    () => ({
+      searchKeyword: isShowSearch ? trimmedSearchKeyword : '',
+      showMatches: isShowSearch
+    }),
+    [isShowSearch, trimmedSearchKeyword]
   )
 
-  const handleClickToSelectFiles = useCallback(() => {
-    const fileInput = document.createElement('input')
-    fileInput.type = 'file'
-    fileInput.multiple = true
-    fileInput.accept = '.md,.markdown'
-    fileInput.webkitdirectory = false
-
-    fileInput.onchange = (e) => {
-      const target = e.target as HTMLInputElement
-      if (target.files && target.files.length > 0) {
-        const selectedFiles = Array.from(target.files)
-        onUploadFiles(selectedFiles)
-      }
-      fileInput.remove()
-    }
-
-    fileInput.click()
-  }, [onUploadFiles])
-
-  const getEmptyAreaMenuItems = useCallback((): MenuProps['items'] => {
-    return [
-      {
-        label: t('notes.new_note'),
-        key: 'new_note',
-        icon: <FilePlus size={14} />,
-        onClick: handleCreateNote
-      },
-      {
-        label: t('notes.new_folder'),
-        key: 'new_folder',
-        icon: <Folder size={14} />,
-        onClick: handleCreateFolder
-      }
-    ]
-  }, [t, handleCreateNote, handleCreateFolder])
-
   return (
-    <SidebarContainer
-      onDragOver={(e) => {
-        e.preventDefault()
-        if (!draggedNodeId) {
-          setIsDragOverSidebar(true)
-        }
-      }}
-      onDragLeave={() => setIsDragOverSidebar(false)}
-      onDrop={(e) => {
-        if (!draggedNodeId) {
-          handleDropFiles(e)
-        }
-      }}>
-      <NotesSidebarHeader
-        isShowStarred={isShowStarred}
-        isShowSearch={isShowSearch}
-        searchKeyword={searchKeyword}
-        sortType={sortType}
-        onCreateFolder={handleCreateFolder}
-        onCreateNote={handleCreateNote}
-        onToggleStarredView={handleToggleStarredView}
-        onToggleSearchView={handleToggleSearchView}
-        onSetSearchKeyword={setSearchKeyword}
-        onSelectSortType={handleSelectSortType}
-      />
+    <NotesActionsContext value={actionsValue}>
+      <NotesSelectionContext value={selectionValue}>
+        <NotesEditingContext value={editingValue}>
+          <NotesDragContext value={dragValue}>
+            <NotesSearchContext value={searchValue}>
+              <NotesUIContext value={{ openDropdownKey }}>
+                <SidebarContainer
+                  onDragOver={(e) => {
+                    e.preventDefault()
+                    if (!draggedNodeId) {
+                      setIsDragOverSidebar(true)
+                    }
+                  }}
+                  onDragLeave={() => setIsDragOverSidebar(false)}
+                  onDrop={(e) => {
+                    if (!draggedNodeId) {
+                      handleDropFiles(e)
+                    }
+                  }}>
+                  <NotesSidebarHeader
+                    isShowStarred={isShowStarred}
+                    isShowSearch={isShowSearch}
+                    searchKeyword={searchKeyword}
+                    sortType={sortType}
+                    onCreateFolder={handleCreateFolder}
+                    onCreateNote={handleCreateNote}
+                    onToggleStarredView={handleToggleStarredView}
+                    onToggleSearchView={handleToggleSearchView}
+                    onSetSearchKeyword={setSearchKeyword}
+                    onSelectSortType={handleSelectSortType}
+                  />
 
-      <NotesTreeContainer>
-        {isShowSearch && isSearching && (
-          <SearchStatusBar>
-            <Loader2 size={14} className="animate-spin" />
-            <span>{t('notes.search.searching')}</span>
-            <CancelButton onClick={cancel} title={t('common.cancel')}>
-              <X size={14} />
-            </CancelButton>
-          </SearchStatusBar>
-        )}
-        {isShowSearch && !isSearching && hasSearchKeyword && searchStats.total > 0 && (
-          <SearchStatusBar>
-            <span>
-              {t('notes.search.found_results', {
-                count: searchStats.total,
-                nameCount: searchStats.fileNameMatches,
-                contentCount: searchStats.contentMatches + searchStats.bothMatches
-              })}
-            </span>
-          </SearchStatusBar>
-        )}
-        {shouldUseVirtualization ? (
-          <Dropdown
-            menu={{ items: getEmptyAreaMenuItems() }}
-            trigger={['contextMenu']}
-            open={openDropdownKey === 'empty-area'}
-            onOpenChange={(open) => setOpenDropdownKey(open ? 'empty-area' : null)}>
-            <VirtualizedTreeContainer ref={parentRef}>
-              <div
-                style={{
-                  height: `${virtualizer.getTotalSize()}px`,
-                  width: '100%',
-                  position: 'relative'
-                }}>
-                {virtualizer.getVirtualItems().map((virtualItem) => {
-                  const { node, depth } = flattenedNodes[virtualItem.index]
-                  return (
-                    <div
-                      key={virtualItem.key}
-                      data-index={virtualItem.index}
-                      ref={virtualizer.measureElement}
-                      style={{
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        width: '100%',
-                        transform: `translateY(${virtualItem.start}px)`
-                      }}>
-                      <div style={{ padding: '0 8px' }}>
+                  <NotesTreeContainer>
+                    {isShowSearch && isSearching && (
+                      <SearchStatusBar>
+                        <Loader2 size={14} className="animate-spin" />
+                        <span>{t('notes.search.searching')}</span>
+                        <CancelButton onClick={cancel} title={t('common.cancel')}>
+                          <X size={14} />
+                        </CancelButton>
+                      </SearchStatusBar>
+                    )}
+                    {isShowSearch && !isSearching && hasSearchKeyword && searchStats.total > 0 && (
+                      <SearchStatusBar>
+                        <span>
+                          {t('notes.search.found_results', {
+                            count: searchStats.total,
+                            nameCount: searchStats.fileNameMatches,
+                            contentCount: searchStats.contentMatches + searchStats.bothMatches
+                          })}
+                        </span>
+                      </SearchStatusBar>
+                    )}
+                    <Dropdown
+                      menu={{ items: getEmptyAreaMenuItems() }}
+                      trigger={['contextMenu']}
+                      open={openDropdownKey === 'empty-area'}
+                      onOpenChange={(open) => setOpenDropdownKey(open ? 'empty-area' : null)}>
+                      <DynamicVirtualList
+                        ref={virtualListRef}
+                        list={flattenedNodes}
+                        estimateSize={() => 28}
+                        itemContainerStyle={{ padding: '0 8px' }}
+                        overscan={10}
+                        isSticky={isSticky}
+                        getItemDepth={getItemDepth}>
+                        {({ node, depth }) => <TreeNode node={node} depth={depth} renderChildren={false} />}
+                      </DynamicVirtualList>
+                    </Dropdown>
+                    {!isShowStarred && !isShowSearch && (
+                      <div style={{ padding: '0 8px', marginTop: '6px', marginBottom: '20px' }}>
                         <TreeNode
-                          node={node}
-                          depth={depth}
-                          selectedFolderId={selectedFolderId}
-                          activeNodeId={activeNode?.id}
-                          editingNodeId={editingNodeId}
-                          renamingNodeIds={renamingNodeIds}
-                          newlyRenamedNodeIds={newlyRenamedNodeIds}
-                          draggedNodeId={draggedNodeId}
-                          dragOverNodeId={dragOverNodeId}
-                          dragPosition={dragPosition}
-                          inPlaceEdit={inPlaceEdit}
-                          getMenuItems={getMenuItems}
-                          onSelectNode={onSelectNode}
-                          onToggleExpanded={onToggleExpanded}
-                          onDragStart={handleDragStart}
-                          onDragOver={handleDragOver}
-                          onDragLeave={handleDragLeave}
-                          onDrop={handleDrop}
-                          onDragEnd={handleDragEnd}
+                          node={{
+                            id: 'hint-node',
+                            name: '',
+                            type: 'hint',
+                            treePath: '',
+                            externalPath: '',
+                            createdAt: '',
+                            updatedAt: ''
+                          }}
+                          depth={0}
                           renderChildren={false}
-                          openDropdownKey={openDropdownKey}
-                          onDropdownOpenChange={setOpenDropdownKey}
+                          onHintClick={handleSelectFolder}
                         />
                       </div>
-                    </div>
-                  )
-                })}
-              </div>
-              {!isShowStarred && !isShowSearch && (
-                <DropHintNode>
-                  <TreeNodeContainer active={false} depth={0}>
-                    <TreeNodeContent>
-                      <NodeIcon>
-                        <FilePlus size={16} />
-                      </NodeIcon>
-                      <DropHintText onClick={handleClickToSelectFiles}>{t('notes.drop_markdown_hint')}</DropHintText>
-                    </TreeNodeContent>
-                  </TreeNodeContainer>
-                </DropHintNode>
-              )}
-            </VirtualizedTreeContainer>
-          </Dropdown>
-        ) : (
-          <Dropdown
-            menu={{ items: getEmptyAreaMenuItems() }}
-            trigger={['contextMenu']}
-            open={openDropdownKey === 'empty-area'}
-            onOpenChange={(open) => setOpenDropdownKey(open ? 'empty-area' : null)}>
-            <StyledScrollbar ref={scrollbarRef}>
-              <TreeContent>
-                {isShowStarred || isShowSearch
-                  ? filteredTree.map((node) => (
-                      <TreeNode
-                        key={node.id}
-                        node={node}
-                        depth={0}
-                        selectedFolderId={selectedFolderId}
-                        activeNodeId={activeNode?.id}
-                        editingNodeId={editingNodeId}
-                        renamingNodeIds={renamingNodeIds}
-                        newlyRenamedNodeIds={newlyRenamedNodeIds}
-                        draggedNodeId={draggedNodeId}
-                        dragOverNodeId={dragOverNodeId}
-                        dragPosition={dragPosition}
-                        inPlaceEdit={inPlaceEdit}
-                        getMenuItems={getMenuItems}
-                        onSelectNode={onSelectNode}
-                        onToggleExpanded={onToggleExpanded}
-                        onDragStart={handleDragStart}
-                        onDragOver={handleDragOver}
-                        onDragLeave={handleDragLeave}
-                        onDrop={handleDrop}
-                        onDragEnd={handleDragEnd}
-                        openDropdownKey={openDropdownKey}
-                        onDropdownOpenChange={setOpenDropdownKey}
-                        searchKeyword={isShowSearch ? trimmedSearchKeyword : ''}
-                        showMatches={isShowSearch}
-                      />
-                    ))
-                  : notesTree.map((node) => (
-                      <TreeNode
-                        key={node.id}
-                        node={node}
-                        depth={0}
-                        selectedFolderId={selectedFolderId}
-                        activeNodeId={activeNode?.id}
-                        editingNodeId={editingNodeId}
-                        renamingNodeIds={renamingNodeIds}
-                        newlyRenamedNodeIds={newlyRenamedNodeIds}
-                        draggedNodeId={draggedNodeId}
-                        dragOverNodeId={dragOverNodeId}
-                        dragPosition={dragPosition}
-                        inPlaceEdit={inPlaceEdit}
-                        getMenuItems={getMenuItems}
-                        onSelectNode={onSelectNode}
-                        onToggleExpanded={onToggleExpanded}
-                        onDragStart={handleDragStart}
-                        onDragOver={handleDragOver}
-                        onDragLeave={handleDragLeave}
-                        onDrop={handleDrop}
-                        onDragEnd={handleDragEnd}
-                        openDropdownKey={openDropdownKey}
-                        onDropdownOpenChange={setOpenDropdownKey}
-                      />
-                    ))}
-                {!isShowStarred && !isShowSearch && (
-                  <DropHintNode>
-                    <TreeNodeContainer active={false} depth={0}>
-                      <TreeNodeContent>
-                        <NodeIcon>
-                          <FilePlus size={16} />
-                        </NodeIcon>
-                        <DropHintText onClick={handleClickToSelectFiles}>{t('notes.drop_markdown_hint')}</DropHintText>
-                      </TreeNodeContent>
-                    </TreeNodeContainer>
-                  </DropHintNode>
-                )}
-              </TreeContent>
-            </StyledScrollbar>
-          </Dropdown>
-        )}
-      </NotesTreeContainer>
+                    )}
+                  </NotesTreeContainer>
 
-      {isDragOverSidebar && <DragOverIndicator />}
-    </SidebarContainer>
+                  {isDragOverSidebar && <DragOverIndicator />}
+                </SidebarContainer>
+              </NotesUIContext>
+            </NotesSearchContext>
+          </NotesDragContext>
+        </NotesEditingContext>
+      </NotesSelectionContext>
+    </NotesActionsContext>
   )
 }
 
-const SidebarContainer = styled.div`
+export const SidebarContainer = styled.div`
   width: 250px;
   min-width: 250px;
   height: calc(100vh - var(--navbar-height));
@@ -1204,7 +466,7 @@ const SidebarContainer = styled.div`
   position: relative;
 `
 
-const NotesTreeContainer = styled.div`
+export const NotesTreeContainer = styled.div`
   flex: 1;
   overflow: hidden;
   display: flex;
@@ -1212,183 +474,7 @@ const NotesTreeContainer = styled.div`
   height: calc(100vh - var(--navbar-height) - 45px);
 `
 
-const VirtualizedTreeContainer = styled.div`
-  flex: 1;
-  height: 100%;
-  overflow: auto;
-  position: relative;
-  padding-top: 10px;
-`
-
-const StyledScrollbar = styled(Scrollbar)`
-  flex: 1;
-  height: 100%;
-  min-height: 0;
-`
-
-const TreeContent = styled.div`
-  padding: 8px;
-`
-
-const TreeNodeContainer = styled.div<{
-  active: boolean
-  depth: number
-  isDragging?: boolean
-  isDragOver?: boolean
-  isDragBefore?: boolean
-  isDragInside?: boolean
-  isDragAfter?: boolean
-}>`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 4px 6px;
-  border-radius: 4px;
-  cursor: pointer;
-  margin-bottom: 2px;
-  background-color: ${(props) => {
-    if (props.isDragInside) return 'var(--color-primary-background)'
-    if (props.active) return 'var(--color-background-soft)'
-    return 'transparent'
-  }};
-  border: 0.5px solid
-    ${(props) => {
-      if (props.isDragInside) return 'var(--color-primary)'
-      if (props.active) return 'var(--color-border)'
-      return 'transparent'
-    }};
-  opacity: ${(props) => (props.isDragging ? 0.5 : 1)};
-  transition: all 0.2s ease;
-  position: relative;
-
-  &:hover {
-    background-color: var(--color-background-soft);
-
-    .node-actions {
-      opacity: 1;
-    }
-  }
-
-  /* 添加拖拽指示线 */
-  ${(props) =>
-    props.isDragBefore &&
-    `
-    &::before {
-      content: '';
-      position: absolute;
-      top: -2px;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background-color: var(--color-primary);
-      border-radius: 1px;
-    }
-  `}
-
-  ${(props) =>
-    props.isDragAfter &&
-    `
-    &::after {
-      content: '';
-      position: absolute;
-      bottom: -2px;
-      left: 0;
-      right: 0;
-      height: 2px;
-      background-color: var(--color-primary);
-      border-radius: 1px;
-    }
-  `}
-`
-
-const TreeNodeContent = styled.div`
-  display: flex;
-  align-items: center;
-  flex: 1;
-  min-width: 0;
-`
-
-const NodeIndent = styled.div<{ depth: number }>`
-  width: ${(props) => props.depth * 16}px;
-  flex-shrink: 0;
-`
-
-const ExpandIcon = styled.div`
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--color-text-2);
-  margin-right: 4px;
-
-  &:hover {
-    color: var(--color-text);
-  }
-`
-
-const NodeIcon = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 8px;
-  color: var(--color-text-2);
-  flex-shrink: 0;
-`
-
-const NodeName = styled.div`
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 13px;
-  color: var(--color-text);
-  position: relative;
-  will-change: background-position, width;
-
-  --color-shimmer-mid: var(--color-text-1);
-  --color-shimmer-end: color-mix(in srgb, var(--color-text-1) 25%, transparent);
-
-  &.shimmer {
-    background: linear-gradient(to left, var(--color-shimmer-end), var(--color-shimmer-mid), var(--color-shimmer-end));
-    background-size: 200% 100%;
-    background-clip: text;
-    color: transparent;
-    animation: shimmer 3s linear infinite;
-  }
-
-  &.typing {
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    animation: typewriter 0.5s steps(40, end);
-  }
-
-  @keyframes shimmer {
-    0% {
-      background-position: 200% 0;
-    }
-    100% {
-      background-position: -200% 0;
-    }
-  }
-
-  @keyframes typewriter {
-    from {
-      width: 0;
-    }
-    to {
-      width: 100%;
-    }
-  }
-`
-
-const EditInput = styled(Input)`
-  flex: 1;
-  font-size: 13px;
-`
-
-const DragOverIndicator = styled.div`
+export const DragOverIndicator = styled.div`
   position: absolute;
   top: 0;
   right: 0;
@@ -1400,31 +486,14 @@ const DragOverIndicator = styled.div`
   pointer-events: none;
 `
 
-const DropHintNode = styled.div`
-  margin: 6px 0;
-  margin-bottom: 20px;
-
-  ${TreeNodeContainer} {
-    background-color: transparent;
-    border: 1px dashed var(--color-border);
-    cursor: default;
-    opacity: 0.6;
-
-    &:hover {
-      background-color: var(--color-background-soft);
-      opacity: 0.8;
-    }
-  }
-`
-
-const DropHintText = styled.div`
+export const DropHintText = styled.div`
   color: var(--color-text-3);
   font-size: 12px;
   font-style: italic;
 `
 
 // 搜索相关样式
-const SearchStatusBar = styled.div`
+export const SearchStatusBar = styled.div`
   display: flex;
   align-items: center;
   gap: 8px;
@@ -1448,7 +517,7 @@ const SearchStatusBar = styled.div`
   }
 `
 
-const CancelButton = styled.button`
+export const CancelButton = styled.button`
   margin-left: auto;
   display: flex;
   align-items: center;
@@ -1473,98 +542,4 @@ const CancelButton = styled.button`
   }
 `
 
-const NodeNameContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex: 1;
-  min-width: 0;
-`
-
-const MatchBadge = styled.span<{ matchType: string }>`
-  display: inline-flex;
-  align-items: center;
-  padding: 0 4px;
-  height: 16px;
-  font-size: 10px;
-  line-height: 1;
-  border-radius: 2px;
-  background-color: ${(props) =>
-    props.matchType === 'both' ? 'var(--color-primary-soft)' : 'var(--color-background-mute)'};
-  color: ${(props) => (props.matchType === 'both' ? 'var(--color-primary)' : 'var(--color-text-3)')};
-  font-weight: 500;
-  flex-shrink: 0;
-`
-
-const SearchMatchesContainer = styled.div<{ depth: number }>`
-  margin-left: ${(props) => props.depth * 16 + 40}px;
-  margin-top: 4px;
-  margin-bottom: 8px;
-  padding: 6px 8px;
-  background-color: var(--color-background-mute);
-  border-radius: 4px;
-  border-left: 2px solid var(--color-primary-soft);
-`
-
-const MatchItem = styled.div`
-  display: flex;
-  gap: 8px;
-  margin-bottom: 4px;
-  font-size: 12px;
-  padding: 4px 6px;
-  margin-left: -6px;
-  margin-right: -6px;
-  border-radius: 3px;
-  cursor: pointer;
-  transition: all 0.15s ease;
-
-  &:hover {
-    background-color: var(--color-background-soft);
-    transform: translateX(2px);
-  }
-
-  &:active {
-    background-color: var(--color-active);
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-`
-
-const MatchLineNumber = styled.span`
-  color: var(--color-text-3);
-  font-family: monospace;
-  flex-shrink: 0;
-  width: 30px;
-`
-
-const MatchContext = styled.div`
-  color: var(--color-text-2);
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  font-family: monospace;
-`
-
-const MoreMatches = styled.div<{ depth: number }>`
-  margin-top: 4px;
-  padding: 4px 6px;
-  margin-left: -6px;
-  margin-right: -6px;
-  font-size: 11px;
-  color: var(--color-text-3);
-  border-radius: 3px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  transition: all 0.15s ease;
-
-  &:hover {
-    color: var(--color-text-2);
-    background-color: var(--color-background-soft);
-  }
-`
-
 export default memo(NotesSidebar)
diff --git a/src/renderer/src/pages/notes/components/TreeNode.tsx b/src/renderer/src/pages/notes/components/TreeNode.tsx
new file mode 100644
index 0000000000..0801d31050
--- /dev/null
+++ b/src/renderer/src/pages/notes/components/TreeNode.tsx
@@ -0,0 +1,498 @@
+import HighlightText from '@renderer/components/HighlightText'
+import {
+  useNotesActions,
+  useNotesDrag,
+  useNotesEditing,
+  useNotesSearch,
+  useNotesSelection,
+  useNotesUI
+} from '@renderer/pages/notes/context/NotesContexts'
+import { EVENT_NAMES, EventEmitter } from '@renderer/services/EventService'
+import type { SearchMatch, SearchResult } from '@renderer/services/NotesSearchService'
+import type { NotesTreeNode } from '@renderer/types/note'
+import { Dropdown } from 'antd'
+import { ChevronDown, ChevronRight, File, FilePlus, Folder, FolderOpen } from 'lucide-react'
+import { memo, useCallback, useMemo, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
+
+interface TreeNodeProps {
+  node: NotesTreeNode | SearchResult
+  depth: number
+  renderChildren?: boolean
+  onHintClick?: () => void
+}
+
+const TreeNode = memo<TreeNodeProps>(({ node, depth, renderChildren = true, onHintClick }) => {
+  const { t } = useTranslation()
+
+  // Use split contexts - only subscribe to what this node needs
+  const { selectedFolderId, activeNodeId } = useNotesSelection()
+  const { editingNodeId, renamingNodeIds, newlyRenamedNodeIds, inPlaceEdit } = useNotesEditing()
+  const { draggedNodeId, dragOverNodeId, dragPosition, onDragStart, onDragOver, onDragLeave, onDrop, onDragEnd } =
+    useNotesDrag()
+  const { searchKeyword, showMatches } = useNotesSearch()
+  const { openDropdownKey } = useNotesUI()
+  const { getMenuItems, onSelectNode, onToggleExpanded, onDropdownOpenChange } = useNotesActions()
+
+  const [showAllMatches, setShowAllMatches] = useState(false)
+  const { isEditing: isInputEditing, inputProps } = inPlaceEdit
+
+  // 检查是否是 hint 节点
+  const isHintNode = node.type === 'hint'
+
+  // 检查是否是搜索结果
+  const searchResult = 'matchType' in node ? (node as SearchResult) : null
+  const hasMatches = searchResult && searchResult.matches && searchResult.matches.length > 0
+
+  // 处理匹配项点击
+  const handleMatchClick = useCallback(
+    (match: SearchMatch) => {
+      // 发送定位事件
+      EventEmitter.emit(EVENT_NAMES.LOCATE_NOTE_LINE, {
+        noteId: node.id,
+        lineNumber: match.lineNumber,
+        lineContent: match.lineContent
+      })
+    },
+    [node]
+  )
+
+  const isActive = selectedFolderId ? node.type === 'folder' && node.id === selectedFolderId : node.id === activeNodeId
+  const isEditing = editingNodeId === node.id && isInputEditing
+  const isRenaming = renamingNodeIds.has(node.id)
+  const isNewlyRenamed = newlyRenamedNodeIds.has(node.id)
+  const hasChildren = node.children && node.children.length > 0
+  const isDragging = draggedNodeId === node.id
+  const isDragOver = dragOverNodeId === node.id
+  const isDragBefore = isDragOver && dragPosition === 'before'
+  const isDragInside = isDragOver && dragPosition === 'inside'
+  const isDragAfter = isDragOver && dragPosition === 'after'
+
+  const getNodeNameClassName = () => {
+    if (isRenaming) return 'shimmer'
+    if (isNewlyRenamed) return 'typing'
+    return ''
+  }
+
+  const displayName = useMemo(() => {
+    if (!searchKeyword) {
+      return node.name
+    }
+
+    const name = node.name ?? ''
+    if (!name) {
+      return name
+    }
+
+    const keyword = searchKeyword
+    const nameLower = name.toLowerCase()
+    const keywordLower = keyword.toLowerCase()
+    const matchStart = nameLower.indexOf(keywordLower)
+
+    if (matchStart === -1) {
+      return name
+    }
+
+    const matchEnd = matchStart + keyword.length
+    const beforeMatch = Math.min(2, matchStart)
+    const contextStart = matchStart - beforeMatch
+    const contextLength = 50
+    const contextEnd = Math.min(name.length, matchEnd + contextLength)
+
+    const prefix = contextStart > 0 ? '...' : ''
+    const suffix = contextEnd < name.length ? '...' : ''
+
+    return prefix + name.substring(contextStart, contextEnd) + suffix
+  }, [node.name, searchKeyword])
+
+  // Special render for hint nodes
+  if (isHintNode) {
+    return (
+      <div key={node.id}>
+        <TreeNodeContainer active={false} depth={depth}>
+          <TreeNodeContent>
+            <NodeIcon>
+              <FilePlus size={16} />
+            </NodeIcon>
+            <DropHintText onClick={onHintClick}>{t('notes.drop_markdown_hint')}</DropHintText>
+          </TreeNodeContent>
+        </TreeNodeContainer>
+      </div>
+    )
+  }
+
+  return (
+    <div key={node.id}>
+      <Dropdown
+        menu={{ items: getMenuItems(node as NotesTreeNode) }}
+        trigger={['contextMenu']}
+        open={openDropdownKey === node.id}
+        onOpenChange={(open) => onDropdownOpenChange(open ? node.id : null)}>
+        <div onContextMenu={(e) => e.stopPropagation()}>
+          <TreeNodeContainer
+            active={isActive}
+            depth={depth}
+            isDragging={isDragging}
+            isDragOver={isDragOver}
+            isDragBefore={isDragBefore}
+            isDragInside={isDragInside}
+            isDragAfter={isDragAfter}
+            draggable={!isEditing}
+            data-node-id={node.id}
+            onDragStart={(e) => onDragStart(e, node as NotesTreeNode)}
+            onDragOver={(e) => onDragOver(e, node as NotesTreeNode)}
+            onDragLeave={onDragLeave}
+            onDrop={(e) => onDrop(e, node as NotesTreeNode)}
+            onDragEnd={onDragEnd}>
+            <TreeNodeContent onClick={() => onSelectNode(node as NotesTreeNode)}>
+              <NodeIndent depth={depth} />
+
+              {node.type === 'folder' && (
+                <ExpandIcon
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    onToggleExpanded(node.id)
+                  }}
+                  title={node.expanded ? t('notes.collapse') : t('notes.expand')}>
+                  {node.expanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                </ExpandIcon>
+              )}
+
+              <NodeIcon>
+                {node.type === 'folder' ? (
+                  node.expanded ? (
+                    <FolderOpen size={16} />
+                  ) : (
+                    <Folder size={16} />
+                  )
+                ) : (
+                  <File size={16} />
+                )}
+              </NodeIcon>
+
+              {isEditing ? (
+                <EditInput {...inputProps} onClick={(e) => e.stopPropagation()} autoFocus />
+              ) : (
+                <NodeNameContainer>
+                  <NodeName className={getNodeNameClassName()}>
+                    {searchKeyword ? <HighlightText text={displayName} keyword={searchKeyword} /> : node.name}
+                  </NodeName>
+                  {searchResult && searchResult.matchType && searchResult.matchType !== 'filename' && (
+                    <MatchBadge matchType={searchResult.matchType}>
+                      {searchResult.matchType === 'both' ? t('notes.search.both') : t('notes.search.content')}
+                    </MatchBadge>
+                  )}
+                </NodeNameContainer>
+              )}
+            </TreeNodeContent>
+          </TreeNodeContainer>
+        </div>
+      </Dropdown>
+
+      {showMatches && hasMatches && (
+        <SearchMatchesContainer depth={depth}>
+          {(showAllMatches ? searchResult!.matches! : searchResult!.matches!.slice(0, 3)).map((match, idx) => (
+            <MatchItem key={idx} onClick={() => handleMatchClick(match)}>
+              <MatchLineNumber>{match.lineNumber}</MatchLineNumber>
+              <MatchContext>
+                <HighlightText text={match.context} keyword={searchKeyword} />
+              </MatchContext>
+            </MatchItem>
+          ))}
+          {searchResult!.matches!.length > 3 && (
+            <MoreMatches
+              depth={depth}
+              onClick={(e) => {
+                e.stopPropagation()
+                setShowAllMatches(!showAllMatches)
+              }}>
+              {showAllMatches ? (
+                <>
+                  <ChevronDown size={12} style={{ marginRight: 4 }} />
+                  {t('notes.search.show_less')}
+                </>
+              ) : (
+                <>
+                  <ChevronRight size={12} style={{ marginRight: 4 }} />+{searchResult!.matches!.length - 3}{' '}
+                  {t('notes.search.more_matches')}
+                </>
+              )}
+            </MoreMatches>
+          )}
+        </SearchMatchesContainer>
+      )}
+
+      {renderChildren && node.type === 'folder' && node.expanded && hasChildren && (
+        <div>
+          {node.children!.map((child) => (
+            <TreeNode key={child.id} node={child} depth={depth + 1} renderChildren={renderChildren} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+})
+
+export const TreeNodeContainer = styled.div<{
+  active: boolean
+  depth: number
+  isDragging?: boolean
+  isDragOver?: boolean
+  isDragBefore?: boolean
+  isDragInside?: boolean
+  isDragAfter?: boolean
+}>`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 6px;
+  border-radius: 4px;
+  cursor: pointer;
+  margin-bottom: 2px;
+  /* CRITICAL: Must have fully opaque background for sticky to work properly */
+  /* Transparent/semi-transparent backgrounds will show content bleeding through when sticky */
+  background-color: ${(props) => {
+    if (props.isDragInside) return 'var(--color-primary-background)'
+    // Use hover color for active state - it's guaranteed to be opaque
+    if (props.active) return 'var(--color-hover, var(--color-background-mute))'
+    return 'var(--color-background)'
+  }};
+  border: 0.5px solid
+    ${(props) => {
+      if (props.isDragInside) return 'var(--color-primary)'
+      if (props.active) return 'var(--color-border)'
+      return 'transparent'
+    }};
+  opacity: ${(props) => (props.isDragging ? 0.5 : 1)};
+  transition: all 0.2s ease;
+  position: relative;
+
+  &:hover {
+    background-color: var(--color-background-soft);
+
+    .node-actions {
+      opacity: 1;
+    }
+  }
+
+  /* 添加拖拽指示线 */
+  ${(props) =>
+    props.isDragBefore &&
+    `
+    &::before {
+      content: '';
+      position: absolute;
+      top: -2px;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-color: var(--color-primary);
+      border-radius: 1px;
+    }
+  `}
+
+  ${(props) =>
+    props.isDragAfter &&
+    `
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -2px;
+      left: 0;
+      right: 0;
+      height: 2px;
+      background-color: var(--color-primary);
+      border-radius: 1px;
+    }
+  `}
+`
+
+export const TreeNodeContent = styled.div`
+  display: flex;
+  align-items: center;
+  flex: 1;
+  min-width: 0;
+`
+
+export const NodeIndent = styled.div<{ depth: number }>`
+  width: ${(props) => props.depth * 16}px;
+  flex-shrink: 0;
+`
+
+export const ExpandIcon = styled.div`
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-2);
+  margin-right: 4px;
+
+  &:hover {
+    color: var(--color-text);
+  }
+`
+
+export const NodeIcon = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+  color: var(--color-text-2);
+  flex-shrink: 0;
+`
+
+export const NodeName = styled.div`
+  flex: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 13px;
+  color: var(--color-text);
+  position: relative;
+  will-change: background-position, width;
+
+  --color-shimmer-mid: var(--color-text-1);
+  --color-shimmer-end: color-mix(in srgb, var(--color-text-1) 25%, transparent);
+
+  &.shimmer {
+    background: linear-gradient(to left, var(--color-shimmer-end), var(--color-shimmer-mid), var(--color-shimmer-end));
+    background-size: 200% 100%;
+    background-clip: text;
+    color: transparent;
+    animation: shimmer 3s linear infinite;
+  }
+
+  &.typing {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    animation: typewriter 0.5s steps(40, end);
+  }
+
+  @keyframes shimmer {
+    0% {
+      background-position: 200% 0;
+    }
+    100% {
+      background-position: -200% 0;
+    }
+  }
+
+  @keyframes typewriter {
+    from {
+      width: 0;
+    }
+    to {
+      width: 100%;
+    }
+  }
+`
+
+export const SearchMatchesContainer = styled.div<{ depth: number }>`
+  margin-left: ${(props) => props.depth * 16 + 40}px;
+  margin-top: 4px;
+  margin-bottom: 8px;
+  padding: 6px 8px;
+  background-color: var(--color-background-mute);
+  border-radius: 4px;
+  border-left: 2px solid var(--color-primary-soft);
+`
+
+export const NodeNameContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+  min-width: 0;
+`
+
+export const MatchBadge = styled.span<{ matchType: string }>`
+  display: inline-flex;
+  align-items: center;
+  padding: 0 4px;
+  height: 16px;
+  font-size: 10px;
+  line-height: 1;
+  border-radius: 2px;
+  background-color: ${(props) =>
+    props.matchType === 'both' ? 'var(--color-primary-soft)' : 'var(--color-background-mute)'};
+  color: ${(props) => (props.matchType === 'both' ? 'var(--color-primary)' : 'var(--color-text-3)')};
+  font-weight: 500;
+  flex-shrink: 0;
+`
+
+export const MatchItem = styled.div`
+  display: flex;
+  gap: 8px;
+  margin-bottom: 4px;
+  font-size: 12px;
+  padding: 4px 6px;
+  margin-left: -6px;
+  margin-right: -6px;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+
+  &:hover {
+    background-color: var(--color-background-soft);
+    transform: translateX(2px);
+  }
+
+  &:active {
+    background-color: var(--color-active);
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`
+
+export const MatchLineNumber = styled.span`
+  color: var(--color-text-3);
+  font-family: monospace;
+  flex-shrink: 0;
+  width: 30px;
+`
+
+export const MatchContext = styled.div`
+  color: var(--color-text-2);
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: monospace;
+`
+
+export const MoreMatches = styled.div<{ depth: number }>`
+  margin-top: 4px;
+  padding: 4px 6px;
+  margin-left: -6px;
+  margin-right: -6px;
+  font-size: 11px;
+  color: var(--color-text-3);
+  border-radius: 3px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  transition: all 0.15s ease;
+
+  &:hover {
+    color: var(--color-text-2);
+    background-color: var(--color-background-soft);
+  }
+`
+
+const EditInput = styled.input`
+  flex: 1;
+  font-size: 13px;
+`
+
+const DropHintText = styled.div`
+  color: var(--color-text-3);
+  font-size: 12px;
+  font-style: italic;
+`
+
+export default TreeNode
diff --git a/src/renderer/src/pages/notes/context/NotesContexts.tsx b/src/renderer/src/pages/notes/context/NotesContexts.tsx
new file mode 100644
index 0000000000..6bbb86c8d1
--- /dev/null
+++ b/src/renderer/src/pages/notes/context/NotesContexts.tsx
@@ -0,0 +1,109 @@
+import type { UseInPlaceEditReturn } from '@renderer/hooks/useInPlaceEdit'
+import type { NotesTreeNode } from '@renderer/types/note'
+import type { MenuProps } from 'antd'
+import { createContext, use } from 'react'
+
+// ==================== 1. Actions Context (Static, rarely changes) ====================
+export interface NotesActionsContextType {
+  getMenuItems: (node: NotesTreeNode) => MenuProps['items']
+  onSelectNode: (node: NotesTreeNode) => void
+  onToggleExpanded: (nodeId: string) => void
+  onDropdownOpenChange: (key: string | null) => void
+}
+
+export const NotesActionsContext = createContext<NotesActionsContextType | null>(null)
+
+export const useNotesActions = () => {
+  const context = use(NotesActionsContext)
+  if (!context) {
+    throw new Error('useNotesActions must be used within NotesActionsContext.Provider')
+  }
+  return context
+}
+
+// ==================== 2. Selection Context (Low frequency updates) ====================
+export interface NotesSelectionContextType {
+  selectedFolderId?: string | null
+  activeNodeId?: string
+}
+
+export const NotesSelectionContext = createContext<NotesSelectionContextType | null>(null)
+
+export const useNotesSelection = () => {
+  const context = use(NotesSelectionContext)
+  if (!context) {
+    throw new Error('useNotesSelection must be used within NotesSelectionContext.Provider')
+  }
+  return context
+}
+
+// ==================== 3. Editing Context (Medium frequency updates) ====================
+export interface NotesEditingContextType {
+  editingNodeId: string | null
+  renamingNodeIds: Set<string>
+  newlyRenamedNodeIds: Set<string>
+  inPlaceEdit: UseInPlaceEditReturn
+}
+
+export const NotesEditingContext = createContext<NotesEditingContextType | null>(null)
+
+export const useNotesEditing = () => {
+  const context = use(NotesEditingContext)
+  if (!context) {
+    throw new Error('useNotesEditing must be used within NotesEditingContext.Provider')
+  }
+  return context
+}
+
+// ==================== 4. Drag Context (High frequency updates) ====================
+export interface NotesDragContextType {
+  draggedNodeId: string | null
+  dragOverNodeId: string | null
+  dragPosition: 'before' | 'inside' | 'after'
+  onDragStart: (e: React.DragEvent, node: NotesTreeNode) => void
+  onDragOver: (e: React.DragEvent, node: NotesTreeNode) => void
+  onDragLeave: () => void
+  onDrop: (e: React.DragEvent, node: NotesTreeNode) => void
+  onDragEnd: () => void
+}
+
+export const NotesDragContext = createContext<NotesDragContextType | null>(null)
+
+export const useNotesDrag = () => {
+  const context = use(NotesDragContext)
+  if (!context) {
+    throw new Error('useNotesDrag must be used within NotesDragContext.Provider')
+  }
+  return context
+}
+
+// ==================== 5. Search Context (Medium frequency updates) ====================
+export interface NotesSearchContextType {
+  searchKeyword: string
+  showMatches: boolean
+}
+
+export const NotesSearchContext = createContext<NotesSearchContextType | null>(null)
+
+export const useNotesSearch = () => {
+  const context = use(NotesSearchContext)
+  if (!context) {
+    throw new Error('useNotesSearch must be used within NotesSearchContext.Provider')
+  }
+  return context
+}
+
+// ==================== 6. UI Context (Medium frequency updates) ====================
+export interface NotesUIContextType {
+  openDropdownKey: string | null
+}
+
+export const NotesUIContext = createContext<NotesUIContextType | null>(null)
+
+export const useNotesUI = () => {
+  const context = use(NotesUIContext)
+  if (!context) {
+    throw new Error('useNotesUI must be used within NotesUIContext.Provider')
+  }
+  return context
+}
diff --git a/src/renderer/src/pages/notes/hooks/useNotesDragAndDrop.ts b/src/renderer/src/pages/notes/hooks/useNotesDragAndDrop.ts
new file mode 100644
index 0000000000..1822c00e9d
--- /dev/null
+++ b/src/renderer/src/pages/notes/hooks/useNotesDragAndDrop.ts
@@ -0,0 +1,101 @@
+import type { NotesTreeNode } from '@renderer/types/note'
+import { useCallback, useRef, useState } from 'react'
+
+interface UseNotesDragAndDropProps {
+  onMoveNode: (sourceNodeId: string, targetNodeId: string, position: 'before' | 'after' | 'inside') => void
+}
+
+export const useNotesDragAndDrop = ({ onMoveNode }: UseNotesDragAndDropProps) => {
+  const [draggedNodeId, setDraggedNodeId] = useState<string | null>(null)
+  const [dragOverNodeId, setDragOverNodeId] = useState<string | null>(null)
+  const [dragPosition, setDragPosition] = useState<'before' | 'inside' | 'after'>('inside')
+  const dragNodeRef = useRef<HTMLDivElement | null>(null)
+
+  const handleDragStart = useCallback((e: React.DragEvent, node: NotesTreeNode) => {
+    setDraggedNodeId(node.id)
+    e.dataTransfer.effectAllowed = 'move'
+    e.dataTransfer.setData('text/plain', node.id)
+
+    dragNodeRef.current = e.currentTarget as HTMLDivElement
+
+    // Create ghost element
+    if (e.currentTarget.parentElement) {
+      const rect = e.currentTarget.getBoundingClientRect()
+      const ghostElement = e.currentTarget.cloneNode(true) as HTMLElement
+      ghostElement.style.width = `${rect.width}px`
+      ghostElement.style.opacity = '0.7'
+      ghostElement.style.position = 'absolute'
+      ghostElement.style.top = '-1000px'
+      document.body.appendChild(ghostElement)
+      e.dataTransfer.setDragImage(ghostElement, 10, 10)
+      setTimeout(() => {
+        document.body.removeChild(ghostElement)
+      }, 0)
+    }
+  }, [])
+
+  const handleDragOver = useCallback(
+    (e: React.DragEvent, node: NotesTreeNode) => {
+      e.preventDefault()
+      e.dataTransfer.dropEffect = 'move'
+
+      if (draggedNodeId === node.id) {
+        return
+      }
+
+      setDragOverNodeId(node.id)
+
+      const rect = (e.currentTarget as HTMLElement).getBoundingClientRect()
+      const mouseY = e.clientY
+      const thresholdTop = rect.top + rect.height * 0.3
+      const thresholdBottom = rect.bottom - rect.height * 0.3
+
+      if (mouseY < thresholdTop) {
+        setDragPosition('before')
+      } else if (mouseY > thresholdBottom) {
+        setDragPosition('after')
+      } else {
+        setDragPosition(node.type === 'folder' ? 'inside' : 'after')
+      }
+    },
+    [draggedNodeId]
+  )
+
+  const handleDragLeave = useCallback(() => {
+    setDragOverNodeId(null)
+    setDragPosition('inside')
+  }, [])
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent, targetNode: NotesTreeNode) => {
+      e.preventDefault()
+      const draggedId = e.dataTransfer.getData('text/plain')
+
+      if (draggedId && draggedId !== targetNode.id) {
+        onMoveNode(draggedId, targetNode.id, dragPosition)
+      }
+
+      setDraggedNodeId(null)
+      setDragOverNodeId(null)
+      setDragPosition('inside')
+    },
+    [onMoveNode, dragPosition]
+  )
+
+  const handleDragEnd = useCallback(() => {
+    setDraggedNodeId(null)
+    setDragOverNodeId(null)
+    setDragPosition('inside')
+  }, [])
+
+  return {
+    draggedNodeId,
+    dragOverNodeId,
+    dragPosition,
+    handleDragStart,
+    handleDragOver,
+    handleDragLeave,
+    handleDrop,
+    handleDragEnd
+  }
+}
diff --git a/src/renderer/src/pages/notes/hooks/useNotesEditing.ts b/src/renderer/src/pages/notes/hooks/useNotesEditing.ts
new file mode 100644
index 0000000000..58cbdee9e3
--- /dev/null
+++ b/src/renderer/src/pages/notes/hooks/useNotesEditing.ts
@@ -0,0 +1,94 @@
+import { loggerService } from '@logger'
+import { useInPlaceEdit } from '@renderer/hooks/useInPlaceEdit'
+import { fetchNoteSummary } from '@renderer/services/ApiService'
+import type { NotesTreeNode } from '@renderer/types/note'
+import { useCallback, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+
+const logger = loggerService.withContext('UseNotesEditing')
+
+interface UseNotesEditingProps {
+  onRenameNode: (nodeId: string, newName: string) => void
+}
+
+export const useNotesEditing = ({ onRenameNode }: UseNotesEditingProps) => {
+  const { t } = useTranslation()
+  const [editingNodeId, setEditingNodeId] = useState<string | null>(null)
+  const [renamingNodeIds, setRenamingNodeIds] = useState<Set<string>>(new Set())
+  const [newlyRenamedNodeIds, setNewlyRenamedNodeIds] = useState<Set<string>>(new Set())
+
+  const inPlaceEdit = useInPlaceEdit({
+    onSave: (newName: string) => {
+      if (editingNodeId && newName) {
+        onRenameNode(editingNodeId, newName)
+        window.toast.success(t('common.saved'))
+        logger.debug(`Renamed node ${editingNodeId} to "${newName}"`)
+      }
+      setEditingNodeId(null)
+    },
+    onCancel: () => {
+      setEditingNodeId(null)
+    }
+  })
+
+  const handleStartEdit = useCallback(
+    (node: NotesTreeNode) => {
+      setEditingNodeId(node.id)
+      inPlaceEdit.startEdit(node.name)
+    },
+    [inPlaceEdit]
+  )
+
+  const handleAutoRename = useCallback(
+    async (note: NotesTreeNode) => {
+      if (note.type !== 'file') return
+
+      setRenamingNodeIds((prev) => new Set(prev).add(note.id))
+      try {
+        const content = await window.api.file.readExternal(note.externalPath)
+        if (!content || content.trim().length === 0) {
+          window.toast.warning(t('notes.auto_rename.empty_note'))
+          return
+        }
+
+        const summaryText = await fetchNoteSummary({ content })
+        if (summaryText) {
+          onRenameNode(note.id, summaryText)
+          window.toast.success(t('notes.auto_rename.success'))
+        } else {
+          window.toast.error(t('notes.auto_rename.failed'))
+        }
+      } catch (error) {
+        window.toast.error(t('notes.auto_rename.failed'))
+        logger.error(`Failed to auto-rename note: ${error}`)
+      } finally {
+        setRenamingNodeIds((prev) => {
+          const next = new Set(prev)
+          next.delete(note.id)
+          return next
+        })
+
+        setNewlyRenamedNodeIds((prev) => new Set(prev).add(note.id))
+
+        setTimeout(() => {
+          setNewlyRenamedNodeIds((prev) => {
+            const next = new Set(prev)
+            next.delete(note.id)
+            return next
+          })
+        }, 700)
+      }
+    },
+    [onRenameNode, t]
+  )
+
+  return {
+    editingNodeId,
+    renamingNodeIds,
+    newlyRenamedNodeIds,
+    inPlaceEdit,
+    handleStartEdit,
+    handleAutoRename,
+    setEditingNodeId
+  }
+}
diff --git a/src/renderer/src/pages/notes/hooks/useNotesFileUpload.ts b/src/renderer/src/pages/notes/hooks/useNotesFileUpload.ts
new file mode 100644
index 0000000000..aba1a90992
--- /dev/null
+++ b/src/renderer/src/pages/notes/hooks/useNotesFileUpload.ts
@@ -0,0 +1,112 @@
+import { useCallback } from 'react'
+
+interface UseNotesFileUploadProps {
+  onUploadFiles: (files: File[]) => void
+  setIsDragOverSidebar: (isDragOver: boolean) => void
+}
+
+export const useNotesFileUpload = ({ onUploadFiles, setIsDragOverSidebar }: UseNotesFileUploadProps) => {
+  const handleDropFiles = useCallback(
+    async (e: React.DragEvent) => {
+      e.preventDefault()
+      setIsDragOverSidebar(false)
+
+      // 处理文件夹拖拽：从 dataTransfer.items 获取完整文件路径信息
+      const items = Array.from(e.dataTransfer.items)
+      const files: File[] = []
+
+      const processEntry = async (entry: FileSystemEntry, path: string = '') => {
+        if (entry.isFile) {
+          const fileEntry = entry as FileSystemFileEntry
+          return new Promise<void>((resolve) => {
+            fileEntry.file((file) => {
+              // 手动设置 webkitRelativePath 以保持文件夹结构
+              Object.defineProperty(file, 'webkitRelativePath', {
+                value: path + file.name,
+                writable: false
+              })
+              files.push(file)
+              resolve()
+            })
+          })
+        } else if (entry.isDirectory) {
+          const dirEntry = entry as FileSystemDirectoryEntry
+          const reader = dirEntry.createReader()
+          return new Promise<void>((resolve) => {
+            reader.readEntries(async (entries) => {
+              const promises = entries.map((subEntry) => processEntry(subEntry, path + entry.name + '/'))
+              await Promise.all(promises)
+              resolve()
+            })
+          })
+        }
+      }
+
+      // 如果支持 DataTransferItem API（文件夹拖拽）
+      if (items.length > 0 && items[0].webkitGetAsEntry()) {
+        const promises = items.map((item) => {
+          const entry = item.webkitGetAsEntry()
+          return entry ? processEntry(entry) : Promise.resolve()
+        })
+
+        await Promise.all(promises)
+
+        if (files.length > 0) {
+          onUploadFiles(files)
+        }
+      } else {
+        const regularFiles = Array.from(e.dataTransfer.files)
+        if (regularFiles.length > 0) {
+          onUploadFiles(regularFiles)
+        }
+      }
+    },
+    [onUploadFiles, setIsDragOverSidebar]
+  )
+
+  const handleSelectFiles = useCallback(() => {
+    const fileInput = document.createElement('input')
+    fileInput.type = 'file'
+    fileInput.multiple = true
+    fileInput.accept = '.md,.markdown'
+    fileInput.webkitdirectory = false
+
+    fileInput.onchange = (e) => {
+      const target = e.target as HTMLInputElement
+      if (target.files && target.files.length > 0) {
+        const selectedFiles = Array.from(target.files)
+        onUploadFiles(selectedFiles)
+      }
+      fileInput.remove()
+    }
+
+    fileInput.click()
+  }, [onUploadFiles])
+
+  const handleSelectFolder = useCallback(() => {
+    const folderInput = document.createElement('input')
+    folderInput.type = 'file'
+    // @ts-ignore - webkitdirectory is a non-standard attribute
+    folderInput.webkitdirectory = true
+    // @ts-ignore - directory is a non-standard attribute
+    folderInput.directory = true
+    folderInput.multiple = true
+
+    folderInput.onchange = (e) => {
+      const target = e.target as HTMLInputElement
+      if (target.files && target.files.length > 0) {
+        const selectedFiles = Array.from(target.files)
+        onUploadFiles(selectedFiles)
+      }
+      folderInput.remove()
+    }
+
+    folderInput.click()
+  }, [onUploadFiles])
+
+  return {
+    handleDropFiles,
+    handleSelectFiles,
+    handleSelectFolder
+  }
+}
diff --git a/src/renderer/src/pages/notes/hooks/useNotesMenu.tsx b/src/renderer/src/pages/notes/hooks/useNotesMenu.tsx
new file mode 100644
index 0000000000..f08f9b1505
--- /dev/null
+++ b/src/renderer/src/pages/notes/hooks/useNotesMenu.tsx
@@ -0,0 +1,263 @@
+import { loggerService } from '@logger'
+import { DeleteIcon } from '@renderer/components/Icons'
+import SaveToKnowledgePopup from '@renderer/components/Popups/SaveToKnowledgePopup'
+import { useKnowledgeBases } from '@renderer/hooks/useKnowledge'
+import type { RootState } from '@renderer/store'
+import type { NotesTreeNode } from '@renderer/types/note'
+import { exportNote } from '@renderer/utils/export'
+import type { MenuProps } from 'antd'
+import type { ItemType, MenuItemType } from 'antd/es/menu/interface'
+import { Edit3, FilePlus, FileSearch, Folder, FolderOpen, Sparkles, Star, StarOff, UploadIcon } from 'lucide-react'
+import { useCallback } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useSelector } from 'react-redux'
+
+const logger = loggerService.withContext('UseNotesMenu')
+
+interface UseNotesMenuProps {
+  renamingNodeIds: Set<string>
+  onCreateNote: (name: string, targetFolderId?: string) => void
+  onCreateFolder: (name: string, targetFolderId?: string) => void
+  onRenameNode: (nodeId: string, newName: string) => void
+  onToggleStar: (nodeId: string) => void
+  onDeleteNode: (nodeId: string) => void
+  onSelectNode: (node: NotesTreeNode) => void
+  handleStartEdit: (node: NotesTreeNode) => void
+  handleAutoRename: (node: NotesTreeNode) => void
+  activeNode?: NotesTreeNode | null
+}
+
+export const useNotesMenu = ({
+  renamingNodeIds,
+  onCreateNote,
+  onCreateFolder,
+  onToggleStar,
+  onDeleteNode,
+  onSelectNode,
+  handleStartEdit,
+  handleAutoRename,
+  activeNode
+}: UseNotesMenuProps) => {
+  const { t } = useTranslation()
+  const { bases } = useKnowledgeBases()
+  const exportMenuOptions = useSelector((state: RootState) => state.settings.exportMenuOptions)
+
+  const handleExportKnowledge = useCallback(
+    async (note: NotesTreeNode) => {
+      try {
+        if (bases.length === 0) {
+          window.toast.warning(t('chat.save.knowledge.empty.no_knowledge_base'))
+          return
+        }
+
+        const result = await SaveToKnowledgePopup.showForNote(note)
+
+        if (result?.success) {
+          window.toast.success(t('notes.export_success', { count: result.savedCount }))
+        }
+      } catch (error) {
+        window.toast.error(t('notes.export_failed'))
+        logger.error(`Failed to export note to knowledge base: ${error}`)
+      }
+    },
+    [bases.length, t]
+  )
+
+  const handleImageAction = useCallback(
+    async (node: NotesTreeNode, platform: 'copyImage' | 'exportImage') => {
+      try {
+        if (activeNode?.id !== node.id) {
+          onSelectNode(node)
+          await new Promise((resolve) => setTimeout(resolve, 500))
+        }
+
+        await exportNote({ node, platform })
+      } catch (error) {
+        logger.error(`Failed to ${platform === 'copyImage' ? 'copy' : 'export'} as image:`, error as Error)
+        window.toast.error(t('common.copy_failed'))
+      }
+    },
+    [activeNode, onSelectNode, t]
+  )
+
+  const handleDeleteNodeWrapper = useCallback(
+    (node: NotesTreeNode) => {
+      const confirmText =
+        node.type === 'folder'
+          ? t('notes.delete_folder_confirm', { name: node.name })
+          : t('notes.delete_note_confirm', { name: node.name })
+
+      window.modal.confirm({
+        title: t('notes.delete'),
+        content: confirmText,
+        centered: true,
+        okButtonProps: { danger: true },
+        onOk: () => {
+          onDeleteNode(node.id)
+        }
+      })
+    },
+    [onDeleteNode, t]
+  )
+
+  const getMenuItems = useCallback(
+    (node: NotesTreeNode) => {
+      const baseMenuItems: MenuProps['items'] = []
+
+      // only show auto rename for file for now
+      if (node.type !== 'folder') {
+        baseMenuItems.push({
+          label: t('notes.auto_rename.label'),
+          key: 'auto-rename',
+          icon: <Sparkles size={14} />,
+          disabled: renamingNodeIds.has(node.id),
+          onClick: () => {
+            handleAutoRename(node)
+          }
+        })
+      }
+
+      if (node.type === 'folder') {
+        baseMenuItems.push(
+          {
+            label: t('notes.new_note'),
+            key: 'new_note',
+            icon: <FilePlus size={14} />,
+            onClick: () => {
+              onCreateNote(t('notes.untitled_note'), node.id)
+            }
+          },
+          {
+            label: t('notes.new_folder'),
+            key: 'new_folder',
+            icon: <Folder size={14} />,
+            onClick: () => {
+              onCreateFolder(t('notes.untitled_folder'), node.id)
+            }
+          },
+          { type: 'divider' }
+        )
+      }
+
+      baseMenuItems.push(
+        {
+          label: t('notes.rename'),
+          key: 'rename',
+          icon: <Edit3 size={14} />,
+          onClick: () => {
+            handleStartEdit(node)
+          }
+        },
+        {
+          label: t('notes.open_outside'),
+          key: 'open_outside',
+          icon: <FolderOpen size={14} />,
+          onClick: () => {
+            window.api.openPath(node.externalPath)
+          }
+        }
+      )
+      if (node.type !== 'folder') {
+        baseMenuItems.push(
+          {
+            label: node.isStarred ? t('notes.unstar') : t('notes.star'),
+            key: 'star',
+            icon: node.isStarred ? <StarOff size={14} /> : <Star size={14} />,
+            onClick: () => {
+              onToggleStar(node.id)
+            }
+          },
+          {
+            label: t('notes.export_knowledge'),
+            key: 'export_knowledge',
+            icon: <FileSearch size={14} />,
+            onClick: () => {
+              handleExportKnowledge(node)
+            }
+          },
+          {
+            label: t('chat.topics.export.title'),
+            key: 'export',
+            icon: <UploadIcon size={14} />,
+            children: [
+              exportMenuOptions.image && {
+                label: t('chat.topics.copy.image'),
+                key: 'copy-image',
+                onClick: () => handleImageAction(node, 'copyImage')
+              },
+              exportMenuOptions.image && {
+                label: t('chat.topics.export.image'),
+                key: 'export-image',
+                onClick: () => handleImageAction(node, 'exportImage')
+              },
+              exportMenuOptions.markdown && {
+                label: t('chat.topics.export.md.label'),
+                key: 'markdown',
+                onClick: () => exportNote({ node, platform: 'markdown' })
+              },
+              exportMenuOptions.docx && {
+                label: t('chat.topics.export.word'),
+                key: 'word',
+                onClick: () => exportNote({ node, platform: 'docx' })
+              },
+              exportMenuOptions.notion && {
+                label: t('chat.topics.export.notion'),
+                key: 'notion',
+                onClick: () => exportNote({ node, platform: 'notion' })
+              },
+              exportMenuOptions.yuque && {
+                label: t('chat.topics.export.yuque'),
+                key: 'yuque',
+                onClick: () => exportNote({ node, platform: 'yuque' })
+              },
+              exportMenuOptions.obsidian && {
+                label: t('chat.topics.export.obsidian'),
+                key: 'obsidian',
+                onClick: () => exportNote({ node, platform: 'obsidian' })
+              },
+              exportMenuOptions.joplin && {
+                label: t('chat.topics.export.joplin'),
+                key: 'joplin',
+                onClick: () => exportNote({ node, platform: 'joplin' })
+              },
+              exportMenuOptions.siyuan && {
+                label: t('chat.topics.export.siyuan'),
+                key: 'siyuan',
+                onClick: () => exportNote({ node, platform: 'siyuan' })
+              }
+            ].filter(Boolean) as ItemType<MenuItemType>[]
+          }
+        )
+      }
+      baseMenuItems.push(
+        { type: 'divider' },
+        {
+          label: t('notes.delete'),
+          danger: true,
+          key: 'delete',
+          icon: <DeleteIcon size={14} className="lucide-custom" />,
+          onClick: () => {
+            handleDeleteNodeWrapper(node)
+          }
+        }
+      )
+
+      return baseMenuItems
+    },
+    [
+      t,
+      handleStartEdit,
+      onToggleStar,
+      handleExportKnowledge,
+      handleImageAction,
+      handleDeleteNodeWrapper,
+      renamingNodeIds,
+      handleAutoRename,
+      exportMenuOptions,
+      onCreateNote,
+      onCreateFolder
+    ]
+  )
+
+  return { getMenuItems }
+}
diff --git a/src/renderer/src/types/note.ts b/src/renderer/src/types/note.ts
index fda85e63d8..83bbd74e5d 100644
--- a/src/renderer/src/types/note.ts
+++ b/src/renderer/src/types/note.ts
@@ -13,7 +13,7 @@ export type NotesSortType =
 export interface NotesTreeNode {
   id: string
   name: string // 不包含扩展名
-  type: 'folder' | 'file'
+  type: 'folder' | 'file' | 'hint'
   treePath: string // 相对路径
   externalPath: string // 绝对路径
   children?: NotesTreeNode[]
diff --git a/yarn.lock b/yarn.lock
index 18bde2062e..f6c5315835 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8744,12 +8744,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react-dom@npm:^19.0.4":
-  version: 19.1.2
-  resolution: "@types/react-dom@npm:19.1.2"
+"@types/react-dom@npm:^19.2.3":
+  version: 19.2.3
+  resolution: "@types/react-dom@npm:19.2.3"
   peerDependencies:
-    "@types/react": ^19.0.0
-  checksum: 10c0/100c341cacba9ec8ae1d47ee051072a3450e9573bf8eeb7262490e341cb246ea0f95a07a1f2077e61cf92648f812a0324c602fcd811bd87b7ce41db2811510cd
+    "@types/react": ^19.2.0
+  checksum: 10c0/b486ebe0f4e2fb35e2e108df1d8fc0927ca5d6002d5771e8a739de11239fe62d0e207c50886185253c99eb9dedfeeb956ea7429e5ba17f6693c7acb4c02f8cd1
   languageName: node
   linkType: hard
 
@@ -8789,12 +8789,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/react@npm:^19.0.12":
-  version: 19.1.2
-  resolution: "@types/react@npm:19.1.2"
+"@types/react@npm:^19.2.6":
+  version: 19.2.6
+  resolution: "@types/react@npm:19.2.6"
   dependencies:
-    csstype: "npm:^3.0.2"
-  checksum: 10c0/76ffe71395c713d4adc3c759465012d3c956db00af35ab7c6d0d91bd07b274b7ce69caa0478c0760311587bd1e38c78ffc9688ebc629f2b266682a19d8750947
+    csstype: "npm:^3.2.2"
+  checksum: 10c0/23b1100f88662ce9f9e4fcca3a2b4ef9fff1ecde24ede2b2dcbd07731e48d6946fd7fd156cd133f5b25321694b0569cd9b8dd30b22c4e076d1cf4c8cdd9a75cb
   languageName: node
   linkType: hard
 
@@ -10015,8 +10015,8 @@ __metadata:
     "@types/mime-types": "npm:^3"
     "@types/node": "npm:^22.17.1"
     "@types/pako": "npm:^1.0.2"
-    "@types/react": "npm:^19.0.12"
-    "@types/react-dom": "npm:^19.0.4"
+    "@types/react": "npm:^19.2.6"
+    "@types/react-dom": "npm:^19.2.3"
     "@types/react-infinite-scroll-component": "npm:^5.0.0"
     "@types/react-transition-group": "npm:^4.4.12"
     "@types/react-window": "npm:^1"
@@ -12283,6 +12283,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"csstype@npm:^3.2.2":
+  version: 3.2.3
+  resolution: "csstype@npm:3.2.3"
+  checksum: 10c0/cd29c51e70fa822f1cecd8641a1445bed7063697469d35633b516e60fe8c1bde04b08f6c5b6022136bb669b64c63d4173af54864510fbb4ee23281801841a3ce
+  languageName: node
+  linkType: hard
+
 "csv-parse@npm:^5.6.0":
   version: 5.6.0
   resolution: "csv-parse@npm:5.6.0"