feat(chat): add mobile top bar to /chat for sidebar navigation#89
Merged
Conversation
- New MobileChatHeader with hamburger, focused chat title (h1), + new chat button - ChatPage wraps ChatLayout in flex column; renders header only on mobile - Hamburger reuses useMobileSidebar context shared with AppHeader - focusedChatId and mobileTitle memoized to avoid per-render find() over chat list - web/CLAUDE.md mobile-sidebar limitations updated Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
On mobile (< 768px) the sidebar is hidden by CSS and the hamburger that toggles the mobile drawer lives only in
AppHeader, which isn't rendered on the/chatroute — so users had no way to navigate out of the chat. This adds a thin mobile-only top bar to/chatwith a hamburger (reusing the existinguseMobileSidebarcontext), the focused chat title, and a "+ new chat" button.MobileChatHeaderwith hamburger,<h1>chat title (screen-reader landmark), and + new chat buttonChatPagewrapsChatLayoutin a flex column; header rendered only whenisMobilefocusedChatId/mobileTitlememoized to avoid per-renderfind()overavailableChatsweb/CLAUDE.mdmobile-sidebar "Known limitations" updatedTest plan
npm run lint,npx tsc -b,npm testall clean (509/509 passed locally)/chatrenders unchanged — no header visible/chat; tapping hamburger opens sidebar drawer; selecting a chat or project from drawer auto-closes itNewChatDialogavailableChats🤖 Generated with Claude Code