feat: adds navigation bar component and restructure app layout #5220
Conversation
- Add new Navbar component for consistent navigation - Restructure App.tsx to use flex layout with proper container - Update ChatView to include navbar and reorganize imports - Enhance ExtensionStateContext with navbar-related state management
|
Coverage ReportExtension CoverageBase branch: 46% PR branch: 47% ✅ Coverage increased or remained the same Webview CoverageBase branch: 17% PR branch: 17% Consider adding tests to cover your changes. Overall AssessmentPlease consider adding tests to maintain or improve coverage. Last updated: 2025-07-29T16:35:20.843965 |
Check for data-showNavbar attribute on document element and update navbar state accordingly
There was a problem hiding this comment.
Pull Request Overview
This PR adds a navigation bar component and restructures the app layout to support conditional navbar display based on a document attribute.
- Adds a new Navbar component with navigation icons for different app sections
- Updates the ExtensionStateContext to manage navbar visibility state
- Restructures App.tsx to use flexbox layout for better container management
Reviewed Changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| webview-ui/src/context/ExtensionStateContext.tsx | Adds navbar state management and reorganizes imports |
| webview-ui/src/components/menu/Navbar.tsx | Creates new navigation bar component with icon buttons |
| webview-ui/src/components/chat/ChatView.tsx | Integrates navbar into chat view and reorganizes imports |
| webview-ui/src/App.tsx | Restructures layout to flex container and adds navbar initialization logic |
Comments suppressed due to low confidence (2)
webview-ui/src/components/menu/Navbar.tsx:51
- The ID 'navbar-header' is misleading since this appears to be the entire navbar component, not just a header section. Consider renaming to 'navbar' or 'navigation-bar' for clarity.
id="navbar-header"
webview-ui/src/components/menu/Navbar.tsx:10
- The constant name 'SETTINGS_TABS' is inaccurate as it includes navigation items beyond just settings (Chat, MCP, History, Account). Consider renaming to 'NAVIGATION_ITEMS' or 'NAV_TABS' to better reflect its purpose.
const SETTINGS_TABS = useMemo(
|
There is already a property you use to tell if the webview is running inside of vscode or not, there is a property on the window cline/webview-ui/src/utils/vscode.ts Line 15 in 6cbfb2b |
Remove showNavbar state management and related useEffect from App.tsx. Replace conditional navbar rendering with IS_STANDALONE window property check. Update Navbar component to use semantic nav element and remove conditional rendering logic.
Related Issue
Issue: #XXXX
Description
Test Procedure
When data-show-navbar attribute on document element is set to true (e.g.
<html data-show-navbar="true">, the nav bar will be displayed in the Chat View. Otherwise, the navbar should never be shown.Type of Change
Pre-flight Checklist
npm test) and code is formatted and linted (npm run format && npm run lint)npm run changeset(required for user-facing changes)Screenshots
Additional Notes
Important
Add
Navbarcomponent and restructure app layout to include it, updating state management and navigation functions accordingly.Navbarcomponent inNavbar.tsxfor consistent navigation across views.App.tsxto use a flex layout and includeNavbar.ChatView.tsxto conditionally renderNavbarbased onIS_STANDALONEflag.ExtensionStateContext.tsxto manage navbar-related state and navigation functions.navigateToHistory,navigateToSettings,navigateToAccount,navigateToMcp,navigateToChat.ChatView.tsxfor better structure.This description was created by
for 8e0c889. You can customize this summary. It will automatically update as commits are pushed.