From f8fcf7c74b449f61d374d2b77cdcb275ed5bf9b1 Mon Sep 17 00:00:00 2001
From: hailin <hailin.zhao@gdzx.xyz>
Date: Fri, 9 Jan 2026 22:09:52 -0800
Subject: [PATCH] fix(web): integrate menu toggle into ChatWindow header,
 remove duplicate headers

---
 .../presentation/components/ChatWindow.tsx    | 15 ++++++++--
 .../chat/presentation/pages/ChatPage.tsx      | 28 +------------------
 2 files changed, 13 insertions(+), 30 deletions(-)

diff --git a/packages/web-client/src/features/chat/presentation/components/ChatWindow.tsx b/packages/web-client/src/features/chat/presentation/components/ChatWindow.tsx
index 3023724..80a1b4a 100644
--- a/packages/web-client/src/features/chat/presentation/components/ChatWindow.tsx
+++ b/packages/web-client/src/features/chat/presentation/components/ChatWindow.tsx
@@ -4,11 +4,11 @@ import { InputArea } from './InputArea';
 import { TypingIndicator } from './TypingIndicator';
 import { useChatStore } from '../stores/chatStore';
 import { useChat } from '../hooks/useChat';
-import { MessageSquare } from 'lucide-react';
+import { MessageSquare, Menu } from 'lucide-react';
 
 export function ChatWindow() {
   const messagesEndRef = useRef<HTMLDivElement>(null);
-  const { messages, currentConversationId, isStreaming, streamContent } = useChatStore();
+  const { messages, currentConversationId, isStreaming, streamContent, sidebarOpen, toggleSidebar } = useChatStore();
   const { sendMessage } = useChat();
 
   // Auto-scroll to bottom
@@ -23,8 +23,17 @@ export function ChatWindow() {
   return (
     <div className="flex flex-col h-full">
       {/* Header */}
-      <header className="flex items-center justify-between px-6 py-4 border-b border-secondary-200 bg-white">
+      <header className="flex items-center justify-between px-4 py-4 border-b border-secondary-200 bg-white">
         <div className="flex items-center gap-3">
+          {/* Menu toggle button - shown when sidebar is closed */}
+          {!sidebarOpen && (
+            <button
+              onClick={toggleSidebar}
+              className="p-2 hover:bg-secondary-100 rounded-lg transition-colors"
+            >
+              <Menu className="w-5 h-5 text-secondary-600" />
+            </button>
+          )}
           <div className="w-10 h-10 rounded-full bg-primary-100 flex items-center justify-center">
             <MessageSquare className="w-5 h-5 text-primary-600" />
           </div>
diff --git a/packages/web-client/src/features/chat/presentation/pages/ChatPage.tsx b/packages/web-client/src/features/chat/presentation/pages/ChatPage.tsx
index db9e1ed..e04269f 100644
--- a/packages/web-client/src/features/chat/presentation/pages/ChatPage.tsx
+++ b/packages/web-client/src/features/chat/presentation/pages/ChatPage.tsx
@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { Menu, X } from 'lucide-react';
 import { clsx } from 'clsx';
 import { ChatWindow } from '../components/ChatWindow';
 import { ChatSidebar } from '../components/ChatSidebar';
@@ -10,7 +9,7 @@ import { useAnonymousAuth } from '@/shared/hooks/useAnonymousAuth';
 export default function ChatPage() {
   const { conversationId } = useParams();
   const { userId, isLoading: authLoading } = useAnonymousAuth();
-  const { setCurrentConversation, loadConversations, sidebarOpen, toggleSidebar, setSidebarOpen } = useChatStore();
+  const { setCurrentConversation, loadConversations, sidebarOpen, setSidebarOpen } = useChatStore();
 
   useEffect(() => {
     if (userId) {
@@ -64,31 +63,6 @@ export default function ChatPage() {
 
       {/* Main chat area */}
       <div className="flex-1 flex flex-col min-w-0">
-        {/* Mobile header with menu button */}
-        <div className="flex items-center gap-3 p-3 border-b border-secondary-200 md:hidden">
-          <button
-            onClick={toggleSidebar}
-            className="p-2 hover:bg-secondary-100 rounded-lg transition-colors"
-          >
-            {sidebarOpen ? (
-              <X className="w-5 h-5 text-secondary-600" />
-            ) : (
-              <Menu className="w-5 h-5 text-secondary-600" />
-            )}
-          </button>
-          <span className="font-medium text-secondary-800">香港移民咨询</span>
-        </div>
-
-        {/* Desktop toggle button */}
-        {!sidebarOpen && (
-          <button
-            onClick={toggleSidebar}
-            className="hidden md:flex absolute left-0 top-4 z-10 p-2 bg-white border border-secondary-200 rounded-r-lg shadow-sm hover:bg-secondary-50 transition-colors"
-          >
-            <Menu className="w-5 h-5 text-secondary-600" />
-          </button>
-        )}
-
         <ChatWindow />
       </div>
     </div>