[FEATURE] Improve chat panel and tab UI design

[michiosw]

Problem Description

The current chat panel design and tab close button visibility need visual improvements to create a more polished user interface. Currently, the chat panel is constrained by navigation and tab bars when opened, and tab close buttons are always visible regardless of tab state.

Proposed Solution

Implement the following UI/UX improvements:

1. Full-Height Chat Panel: Make the chat panel take over the entire viewport height when opened, extending behind/over the navigation bar and tab bar
2. Transparent Background with Left Padding: Add left-side padding to the chat panel to let the background shine through the transparent overlay
3. Conditional Tab Close Buttons: Hide close buttons on inactive tabs, only showing them on the currently active tab

Alternative Solutions

• Keep current chat panel height but improve visual hierarchy with better shadows/borders
• Use sliding animation instead of overlay for chat panel
• Show close buttons on hover instead of active-only state

Use Cases

• Use case 1: User wants to maximize chat panel space for lengthy conversations without navigation chrome taking up screen real estate
• Use case 2: User prefers cleaner tab appearance with close buttons only on active tabs to reduce visual clutter
• Use case 3: User wants the chat interface to feel immersive and full-screen while maintaining background visual continuity
• Use case 4: Designer wants to create a more modern, overlay-based chat experience similar to mobile messaging apps

Implementation Considerations

• Technical complexity: Medium
• Breaking changes: No
• Dependencies: CSS modifications to existing layout components

Current State Analysis

Chat Panel Layout:

• Currently constrained by .main-content-wrapper flexbox layout
• Navigation bar and tab bar are positioned above chat panel in vertical stack
• Chat panel has fixed width and sits beside browser content area
• No overlay or z-index positioning for full-height coverage

Tab Close Button Behavior:

• Close buttons are always visible on all tabs via closable: true property
• No conditional rendering based on active state
• Uses @sinm/react-chrome-tabs library for tab styling

Technical Implementation Plan

Phase 1: Full-Height Chat Panel

• Modify .chat-panel-sidebar CSS to use fixed positioning when opened
• Add z-index layering to position chat panel above navigation chrome
• Implement smooth transition animations for chat panel expansion
• Ensure chat panel extends to full viewport height (100vh)

Phase 2: Transparent Background with Padding

• Add left-side padding to chat panel content to reveal background
• Implement transparent or semi-transparent background overlay
• Ensure background gradient/pattern is visible through chat panel
• Maintain readability with appropriate contrast

Phase 3: Conditional Tab Close Buttons

• Modify TabBar.tsx to conditionally render close buttons based on active state
• Update tabPropertiesForLibrary mapping to set closable property dynamically
• Ensure only active tab shows close button while inactive tabs hide it
• Maintain accessibility for keyboard navigation

Phase 4: Polish and Testing

• Add smooth transitions for all state changes
• Test responsive behavior on different screen sizes
• Ensure proper interaction states (hover, focus, active)
• Verify accessibility standards compliance

Success Criteria

• Chat panel extends to full viewport height when opened
• Left padding on chat panel reveals background pattern/gradient
• Only active tabs show close buttons, inactive tabs hide them
• Smooth transitions between chat panel states
• No layout breaks or visual glitches during state changes
• Maintains responsive design principles

Additional Context

The current layout uses a clean flexbox architecture with:

• .browser-layout-root as the main container
• .browser-window containing chrome areas and content
• .main-content-wrapper for side-by-side layout of browser content and chat panel
• Chrome tabs library for tab styling with custom overrides

The chat panel is currently implemented as a sidebar with fixed width (300-600px) that appears beside the browser content. The proposed changes would transform this into an overlay-style interface that provides more immersive chat experience while maintaining visual continuity with the background design.