refactor: migrate appDetail from Zustand to TanStack Query

- Remove appDetail and setAppDetail from Zustand store
- Use useAppDetail hook for server state management
- Child components now call useAppDetail(appId) directly via useParams()
- Replace setAppDetail calls with useInvalidateAppDetail for cache invalidation
- Keep only client UI state in Zustand (sidebar, modals)
- Split sidebar initialization useEffect for clearer separation of concerns
- Update test mocks to use TanStack Query pattern
- Fix missing dependencies in use-checklist.ts useMemo/useCallback hooks

web/app/components/header/app-nav/index.tsx

@@ -6,16 +6,14 @@ import {
   RiRobot2Line,
 } from '@remixicon/react'
 import { flatten } from 'es-toolkit/compat'
-import { produce } from 'immer'
 import { useParams } from 'next/navigation'
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import CreateAppTemplateDialog from '@/app/components/app/create-app-dialog'
 import CreateAppModal from '@/app/components/app/create-app-modal'
 import CreateFromDSLModal from '@/app/components/app/create-from-dsl-modal'
-import { useStore as useAppStore } from '@/app/components/app/store'
 import { useAppContext } from '@/context/app-context'
-import { useInfiniteAppList } from '@/service/use-apps'
+import { useAppDetail, useInfiniteAppList } from '@/service/use-apps'
 import { AppModeEnum } from '@/types/app'
 import Nav from '../nav'
 
@@ -23,11 +21,10 @@ const AppNav = () => {
   const { t } = useTranslation()
   const { appId } = useParams()
   const { isCurrentWorkspaceEditor } = useAppContext()
-  const appDetail = useAppStore(state => state.appDetail)
+  const { data: appDetail } = useAppDetail(appId as string)
   const [showNewAppDialog, setShowNewAppDialog] = useState(false)
   const [showNewAppTemplateDialog, setShowNewAppTemplateDialog] = useState(false)
   const [showCreateFromDSLModal, setShowCreateFromDSLModal] = useState(false)
-  const [navItems, setNavItems] = useState<NavItem[]>([])
 
   const {
     data: appsData,
@@ -55,48 +52,34 @@ const AppNav = () => {
       setShowCreateFromDSLModal(true)
   }
 
-  useEffect(() => {
-    if (appsData) {
-      const appItems = flatten((appsData.pages ?? []).map(appData => appData.data))
-      const navItems = appItems.map((app) => {
-        const link = ((isCurrentWorkspaceEditor, app) => {
-          if (!isCurrentWorkspaceEditor) {
-            return `/app/${app.id}/overview`
-          }
-          else {
-            if (app.mode === AppModeEnum.WORKFLOW || app.mode === AppModeEnum.ADVANCED_CHAT)
-              return `/app/${app.id}/workflow`
-            else
-              return `/app/${app.id}/configuration`
-          }
-        })(isCurrentWorkspaceEditor, app)
-        return {
-          id: app.id,
-          icon_type: app.icon_type,
-          icon: app.icon,
-          icon_background: app.icon_background,
-          icon_url: app.icon_url,
-          name: app.name,
-          mode: app.mode,
-          link,
-        }
-      })
-      setNavItems(navItems as any)
-    }
-  }, [appsData, isCurrentWorkspaceEditor, setNavItems])
+  const navItems = useMemo(() => {
+    if (!appsData)
+      return []
 
-  // update current app name
-  useEffect(() => {
-    if (appDetail) {
-      const newNavItems = produce(navItems, (draft: NavItem[]) => {
-        navItems.forEach((app, index) => {
-          if (app.id === appDetail.id)
-            draft[index].name = appDetail.name
-        })
-      })
-      setNavItems(newNavItems)
-    }
-  }, [appDetail, navItems])
+    const appItems = flatten((appsData.pages ?? []).map(appData => appData.data))
+    return appItems.map((app) => {
+      const link = (() => {
+        if (!isCurrentWorkspaceEditor)
+          return `/app/${app.id}/overview`
+
+        if (app.mode === AppModeEnum.WORKFLOW || app.mode === AppModeEnum.ADVANCED_CHAT)
+          return `/app/${app.id}/workflow`
+
+        return `/app/${app.id}/configuration`
+      })()
+
+      return {
+        id: app.id,
+        icon_type: app.icon_type,
+        icon: app.icon,
+        icon_background: app.icon_background,
+        icon_url: app.icon_url,
+        name: app.id === appDetail?.id ? appDetail.name : app.name,
+        mode: app.mode,
+        link,
+      }
+    }) as NavItem[]
+  }, [appsData, isCurrentWorkspaceEditor, appDetail])
 
   return (
     <>

web/app/components/header/nav/index.tsx

@@ -5,7 +5,6 @@ import Link from 'next/link'
 import { useSelectedLayoutSegment } from 'next/navigation'
 import * as React from 'react'
 import { useState } from 'react'
-import { useStore as useAppStore } from '@/app/components/app/store'
 import { ArrowNarrowLeft } from '@/app/components/base/icons/src/vender/line/arrows'
 import { cn } from '@/utils/classnames'
 import NavSelector from './nav-selector'
@@ -33,7 +32,6 @@ const Nav = ({
   isLoadingMore,
   isApp,
 }: INavProps) => {
-  const setAppDetail = useAppStore(state => state.setAppDetail)
   const [hovered, setHovered] = useState(false)
   const segment = useSelectedLayoutSegment()
   const isActivated = Array.isArray(activeSegment) ? activeSegment.includes(segment!) : segment === activeSegment
@@ -47,12 +45,6 @@ const Nav = ({
     >
       <Link href={link}>
         <div
-          onClick={(e) => {
-            // Don't clear state if opening in new tab/window
-            if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0)
-              return
-            setAppDetail()
-          }}
           className={cn('flex h-7 cursor-pointer items-center rounded-[10px] px-2.5', isActivated ? 'text-components-main-nav-nav-button-text-active' : 'text-components-main-nav-nav-button-text', curNav && isActivated && 'hover:bg-components-main-nav-nav-button-bg-active-hover')}
           onMouseEnter={() => setHovered(true)}
           onMouseLeave={() => setHovered(false)}

web/app/components/header/nav/nav-selector/index.tsx

@@ -10,7 +10,6 @@ import { debounce } from 'es-toolkit/compat'
 import { useRouter } from 'next/navigation'
 import { Fragment, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useStore as useAppStore } from '@/app/components/app/store'
 import { AppTypeIcon } from '@/app/components/app/type-selector'
 import AppIcon from '@/app/components/base/app-icon'
 import { FileArrow01, FilePlus01, FilePlus02 } from '@/app/components/base/icons/src/vender/line/files'
@@ -42,7 +41,6 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
   const { t } = useTranslation()
   const router = useRouter()
   const { isCurrentWorkspaceEditor } = useAppContext()
-  const setAppDetail = useAppStore(state => state.setAppDetail)
 
   const handleScroll = useCallback(debounce((e) => {
     if (typeof onLoadMore === 'function') {
@@ -84,7 +82,6 @@ const NavSelector = ({ curNav, navigationItems, createText, isApp, onCreate, onL
                       onClick={() => {
                         if (curNav?.id === nav.id)
                           return
-                        setAppDetail()
                         router.push(nav.link)
                       }}
                       title={nav.name}