✨ feat(ui): move new topic button to navigation panel (#11325)

✨ feat: move new topic button to navigation panel

- Move "Add New Topic" button from header to navigation panel for better UX
- Integrate with existing NavItem component for consistent styling
- Add loading state during topic creation
- Auto-navigate from agent profile back to chat when creating new topic

src/app/[variants]/(main)/chat/_layout/Sidebar/Header/Nav.tsx

@@ -2,7 +2,7 @@
 
 import { Flexbox } from '@lobehub/ui';
 import { BotPromptIcon } from '@lobehub/ui/icons';
-import { SearchIcon } from 'lucide-react';
+import { MessageSquarePlusIcon, SearchIcon } from 'lucide-react';
 import { usePathname } from 'next/navigation';
 import { memo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -11,6 +11,7 @@ import urlJoin from 'url-join';
 
 import NavItem from '@/features/NavPanel/components/NavItem';
 import { useQueryRoute } from '@/hooks/useQueryRoute';
+import { useActionSWR } from '@/libs/swr';
 import { useAgentStore } from '@/store/agent';
 import { builtinAgentSelectors } from '@/store/agent/selectors';
 import { useChatStore } from '@/store/chat';
@@ -19,6 +20,7 @@ import { featureFlagsSelectors, useServerConfigStore } from '@/store/serverConfi
 
 const Nav = memo(() => {
   const { t } = useTranslation('chat');
+  const { t: tTopic } = useTranslation('topic');
   const isInbox = useAgentStore(builtinAgentSelectors.isInboxAgent);
   const params = useParams();
   const agentId = params.aid;
@@ -29,9 +31,25 @@ const Nav = memo(() => {
   const toggleCommandMenu = useGlobalStore((s) => s.toggleCommandMenu);
   const hideProfile = isInbox || !isAgentEditable;
   const switchTopic = useChatStore((s) => s.switchTopic);
+  const [openNewTopicOrSaveTopic] = useChatStore((s) => [s.openNewTopicOrSaveTopic]);
+
+  const { mutate, isValidating } = useActionSWR('openNewTopicOrSaveTopic', openNewTopicOrSaveTopic);
+  const handleNewTopic = () => {
+    // If in agent sub-route, navigate back to agent chat first
+    if (isProfileActive && agentId) {
+      router.push(urlJoin('/agent', agentId));
+    }
+    mutate();
+  };
 
   return (
     <Flexbox gap={1} paddingInline={4}>
+      <NavItem
+        icon={MessageSquarePlusIcon}
+        loading={isValidating}
+        onClick={handleNewTopic}
+        title={tTopic('actions.addNewTopic')}
+      />
       {!hideProfile && (
         <NavItem
           active={isProfileActive}

src/app/[variants]/(main)/chat/_layout/Sidebar/Header/index.tsx

@@ -4,14 +4,13 @@ import { type PropsWithChildren, memo } from 'react';
 
 import SideBarHeaderLayout from '@/features/NavPanel/SideBarHeaderLayout';
 
-import AddTopicButon from './AddTopicButon';
 import Agent from './Agent';
 import Nav from './Nav';
 
 const HeaderInfo = memo<PropsWithChildren>(() => {
   return (
     <>
-      <SideBarHeaderLayout left={<Agent />} right={<AddTopicButon />} />
+      <SideBarHeaderLayout left={<Agent />} />
       <Nav />
     </>
   );