refactor(notes): move notes settings to popup in NotesPage (#12075)

* refactor(notes): move notes settings to popup in NotesPage

- Move NotesSettings.tsx from settings directory to notes directory
- Add "More Settings" menu item to notes dropdown menu
- Show settings in GeneralPopup when clicking "More Settings"
- Remove notes settings entry from SettingsPage sidebar and routes

* fix(notes): adjust margin in NotesSidebar component for improved layout

- Update margin-bottom from 20px to 12px in the NotesSidebar component to enhance visual spacing.

* refactor(notes): simplify styles object in HeaderNavbar component

- Consolidate styles object for body padding in HeaderNavbar to improve readability and maintainability.

---------

Co-authored-by: Claude <noreply@anthropic.com>

src/renderer/src/pages/notes/HeaderNavbar.tsx

@@ -1,6 +1,7 @@
 import { loggerService } from '@logger'
 import { NavbarCenter, NavbarHeader, NavbarRight } from '@renderer/components/app/Navbar'
 import { HStack } from '@renderer/components/Layout'
+import GeneralPopup from '@renderer/components/Popups/GeneralPopup'
 import { useActiveNode } from '@renderer/hooks/useNotesQuery'
 import { useNotesSettings } from '@renderer/hooks/useNotesSettings'
 import { useShowWorkspace } from '@renderer/hooks/useShowWorkspace'
@@ -12,6 +13,7 @@ import { useCallback, useEffect, useRef, useState } from 'react'
 import styled from 'styled-components'
 
 import { menuItems } from './MenuConfig'
+import NotesSettings from './NotesSettings'
 
 const logger = loggerService.withContext('HeaderNavbar')
 
@@ -51,6 +53,16 @@ const HeaderNavbar = ({ notesTree, getCurrentNoteContent, onToggleStar, onExpand
     }
   }, [getCurrentNoteContent])
 
+  const handleShowSettings = useCallback(() => {
+    GeneralPopup.show({
+      title: t('notes.settings.title'),
+      content: <NotesSettings />,
+      footer: null,
+      width: 600,
+      styles: { body: { padding: 0 } }
+    })
+  }, [])
+
   const handleBreadcrumbClick = useCallback(
     (item: { treePath: string; isFolder: boolean }) => {
       if (item.isFolder && onExpandPath) {
@@ -130,6 +142,8 @@ const HeaderNavbar = ({ notesTree, getCurrentNoteContent, onToggleStar, onExpand
       onClick: () => {
         if (item.copyAction) {
           handleCopyContent()
+        } else if (item.showSettingsPopup) {
+          handleShowSettings()
         } else if (item.action) {
           item.action(settings, updateSettings)
         }
@@ -308,7 +322,7 @@ export const StarButton = styled.div`
   transition: all 0.2s ease-in-out;
   cursor: pointer;
   svg {
-    color: inherit;
+    color: var(--color-icon);
   }
 
   &:hover {

src/renderer/src/pages/notes/MenuConfig.tsx

@@ -1,5 +1,5 @@
 import type { NotesSettings } from '@renderer/store/note'
-import { Copy, MonitorSpeaker, Type } from 'lucide-react'
+import { Copy, MonitorSpeaker, Settings, Type } from 'lucide-react'
 import type { ReactNode } from 'react'
 
 export interface MenuItem {
@@ -12,6 +12,7 @@ export interface MenuItem {
   isActive?: (settings: NotesSettings) => boolean
   component?: (settings: NotesSettings, updateSettings: (newSettings: Partial<NotesSettings>) => void) => ReactNode
   copyAction?: boolean
+  showSettingsPopup?: boolean
 }
 
 export const menuItems: MenuItem[] = [
@@ -86,5 +87,16 @@ export const menuItems: MenuItem[] = [
         isActive: (settings) => settings.fontSize === 20
       }
     ]
+  },
+  {
+    key: 'divider-settings',
+    type: 'divider',
+    labelKey: ''
+  },
+  {
+    key: 'more-settings',
+    labelKey: 'settings.moresetting.label',
+    icon: Settings,
+    showSettingsPopup: true
   }
 ]

src/renderer/src/pages/notes/NotesSettings.tsx

@@ -2,14 +2,6 @@ import { loggerService } from '@logger'
 import Selector from '@renderer/components/Selector'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { useNotesSettings } from '@renderer/hooks/useNotesSettings'
-import type { EditorView } from '@renderer/types'
-import { Button, Input, message, Slider, Switch } from 'antd'
-import { FolderOpen } from 'lucide-react'
-import type { FC } from 'react'
-import { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
-
 import {
   SettingContainer,
   SettingDivider,
@@ -18,7 +10,14 @@ import {
   SettingRow,
   SettingRowTitle,
   SettingTitle
-} from '.'
+} from '@renderer/pages/settings'
+import type { EditorView } from '@renderer/types'
+import { Button, Input, message, Slider, Switch } from 'antd'
+import { FolderOpen } from 'lucide-react'
+import type { FC } from 'react'
+import { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import styled from 'styled-components'
 
 const logger = loggerService.withContext('NotesSettings')
 
@@ -92,7 +91,7 @@ const NotesSettings: FC = () => {
   const isPathChanged = tempPath !== notesPath
 
   return (
-    <SettingContainer theme={theme}>
+    <SettingContainer theme={theme} style={{ background: 'transparent' }}>
       <SettingGroup theme={theme}>
         <SettingTitle>{t('notes.settings.data.title')}</SettingTitle>
         <SettingDivider />

src/renderer/src/pages/notes/NotesSidebar.tsx

@@ -412,7 +412,7 @@ const NotesSidebar: FC<NotesSidebarProps> = ({
                       </DynamicVirtualList>
                     </Dropdown>
                     {!isShowStarred && !isShowSearch && (
-                      <div style={{ padding: '0 8px', marginTop: '6px', marginBottom: '20px' }}>
+                      <div style={{ padding: '0 8px', marginTop: '6px', marginBottom: '12px' }}>
                         <TreeNode
                           node={{
                             id: 'hint-node',

src/renderer/src/pages/settings/SettingsPage.tsx

@@ -11,7 +11,6 @@ import {
   HardDrive,
   Info,
   MonitorCog,
-  NotebookPen,
   Package,
   PictureInPicture2,
   Search,
@@ -32,7 +31,6 @@ import DocProcessSettings from './DocProcessSettings'
 import GeneralSettings from './GeneralSettings'
 import MCPSettings from './MCPSettings'
 import MemorySettings from './MemorySettings'
-import NotesSettings from './NotesSettings'
 import { ProviderList } from './ProviderSettings'
 import QuickAssistantSettings from './QuickAssistantSettings'
 import QuickPhraseSettings from './QuickPhraseSettings'
@@ -171,7 +169,6 @@ const SettingsPage: FC = () => {
             <Route path="quickAssistant" element={<QuickAssistantSettings />} />
             <Route path="selectionAssistant" element={<SelectionAssistantSettings />} />
             <Route path="data" element={<DataSettings />} />
-            <Route path="notes" element={<NotesSettings />} />
             <Route path="about" element={<AboutSettings />} />
           </Routes>
         </SettingContent>