From a008c0433174bc75212636aa56e552dce351d371 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 16 May 2025 15:43:28 +0800
Subject: [PATCH] refactor: standardize naming for load more handlers and
 navigation items across components

---
 web/app/components/header/app-nav/index.tsx    |  6 +++---
 .../components/header/dataset-nav/index.tsx    | 18 ++++++++++++------
 web/app/components/header/nav/index.tsx        |  8 ++++----
 .../header/nav/nav-selector/index.tsx          | 14 +++++++-------
 4 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/web/app/components/header/app-nav/index.tsx b/web/app/components/header/app-nav/index.tsx
index 3b902811fc..fb794f6b56 100644
--- a/web/app/components/header/app-nav/index.tsx
+++ b/web/app/components/header/app-nav/index.tsx
@@ -57,7 +57,7 @@ const AppNav = () => {
     { revalidateFirstPage: false },
   )
 
-  const handleLoadmore = useCallback(() => {
+  const handleLoadMore = useCallback(() => {
     setSize(size => size + 1)
   }, [setSize])
 
@@ -123,10 +123,10 @@ const AppNav = () => {
         activeSegment={['apps', 'app']}
         link='/apps'
         curNav={appDetail}
-        navs={navItems}
+        navigationItems={navItems}
         createText={t('common.menus.newApp')}
         onCreate={openModal}
-        onLoadmore={handleLoadmore}
+        onLoadMore={handleLoadMore}
       />
       <CreateAppModal
         show={showNewAppDialog}
diff --git a/web/app/components/header/dataset-nav/index.tsx b/web/app/components/header/dataset-nav/index.tsx
index 8c997f2115..28e94271fc 100644
--- a/web/app/components/header/dataset-nav/index.tsx
+++ b/web/app/components/header/dataset-nav/index.tsx
@@ -36,28 +36,34 @@ const DatasetNav = () => {
   const { data: datasetsData, setSize } = useSWRInfinite(datasetId ? getKey : () => null, fetchDatasets, { revalidateFirstPage: false, revalidateAll: true })
   const datasetItems = flatten(datasetsData?.map(datasetData => datasetData.data))
 
-  const handleLoadmore = useCallback(() => {
+  const handleLoadMore = useCallback(() => {
     setSize(size => size + 1)
   }, [setSize])
 
   return (
     <Nav
+      isApp={false}
       icon={<RiBook2Line className='h-4 w-4' />}
       activeIcon={<RiBook2Fill className='h-4 w-4' />}
       text={t('common.menus.datasets')}
       activeSegment='datasets'
       link='/datasets'
-      curNav={currentDataset as Omit<NavItem, 'link'>}
-      navs={datasetItems.map(dataset => ({
+      curNav={currentDataset && {
+        id: currentDataset.id,
+        name: currentDataset.name,
+        icon: currentDataset.icon_info.icon,
+        icon_background: currentDataset.icon_info.icon_background,
+      } as Omit<NavItem, 'link'>}
+      navigationItems={datasetItems.map(dataset => ({
         id: dataset.id,
         name: dataset.name,
         link: dataset.provider === 'external' ? `/datasets/${dataset.id}/hitTesting` : `/datasets/${dataset.id}/documents`,
-        icon: dataset.icon,
-        icon_background: dataset.icon_background,
+        icon: dataset.icon_info.icon,
+        icon_background: dataset.icon_info.icon_background,
       })) as NavItem[]}
       createText={t('common.menus.newDataset')}
       onCreate={() => router.push('/datasets/create')}
-      onLoadmore={handleLoadmore}
+      onLoadMore={handleLoadMore}
     />
   )
 }
diff --git a/web/app/components/header/nav/index.tsx b/web/app/components/header/nav/index.tsx
index 293c66a7b0..edb4ee45c2 100644
--- a/web/app/components/header/nav/index.tsx
+++ b/web/app/components/header/nav/index.tsx
@@ -25,10 +25,10 @@ const Nav = ({
   activeSegment,
   link,
   curNav,
-  navs,
+  navigationItems,
   createText,
   onCreate,
-  onLoadmore,
+  onLoadMore,
   isApp,
 }: INavProps) => {
   const setAppDetail = useAppStore(state => state.setAppDetail)
@@ -80,10 +80,10 @@ const Nav = ({
             <NavSelector
               isApp={isApp}
               curNav={curNav}
-              navs={navs}
+              navigationItems={navigationItems}
               createText={createText}
               onCreate={onCreate}
-              onLoadmore={onLoadmore}
+              onLoadMore={onLoadMore}
             />
           </>
         )
diff --git a/web/app/components/header/nav/nav-selector/index.tsx b/web/app/components/header/nav/nav-selector/index.tsx
index 65c7cb163f..bc8938d9ad 100644
--- a/web/app/components/header/nav/nav-selector/index.tsx
+++ b/web/app/components/header/nav/nav-selector/index.tsx
@@ -24,31 +24,31 @@ export type NavItem = {
   link: string
   icon_type: AppIconType | null
   icon: string
-  icon_background: string
+  icon_background: string | null
   icon_url: string | null
   mode?: string
 }
 export type INavSelectorProps = {
-  navs: NavItem[]
+  navigationItems: NavItem[]
   curNav?: Omit<NavItem, 'link'>
   createText: string
   isApp?: boolean
   onCreate: (state: string) => void
-  onLoadmore?: () => void
+  onLoadMore?: () => void
 }
 
-const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }: INavSelectorProps) => {
+const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onLoadMore }: INavSelectorProps) => {
   const { t } = useTranslation()
   const router = useRouter()
   const { isCurrentWorkspaceEditor } = useAppContext()
   const setAppDetail = useAppStore(state => state.setAppDetail)
 
   const handleScroll = useCallback(debounce((e) => {
-    if (typeof onLoadmore === 'function') {
+    if (typeof onLoadMore === 'function') {
       const { clientHeight, scrollHeight, scrollTop } = e.target
 
       if (clientHeight + scrollTop > scrollHeight - 50)
-        onLoadmore()
+        onLoadMore()
     }
   }, 50), [])
 
@@ -76,7 +76,7 @@ const NavSelector = ({ curNav, navs, createText, isApp, onCreate, onLoadmore }:
             >
               <div className="overflow-auto px-1 py-1" style={{ maxHeight: '50vh' }} onScroll={handleScroll}>
                 {
-                  navs.map(nav => (
+                  navigationItems.map(nav => (
                     <MenuItem key={nav.id}>
                       <div className='flex w-full cursor-pointer items-center truncate rounded-lg px-3 py-[6px] text-[14px] font-normal text-gray-700 hover:bg-gray-100' onClick={() => {
                         if (curNav?.id === nav.id)