refactor(header, layout): simplify header component by removing unused tabs and mobile checks; enhance RightPanel and LayoutShell with improved styling and sidebar functionality

This commit is contained in:
Anish Sarkar 2026-04-29 03:46:40 +05:30
parent 360e21eee4
commit 65f3916fc3
6 changed files with 59 additions and 44 deletions

View file

@ -120,22 +120,45 @@ interface LayoutShellProps {
function MainContentPanel({
isChatPage,
isSidebarCollapsed,
onTabSwitch,
onNewChat,
leftActions,
showResizeHandle = false,
onResizeMouseDown,
children,
}: {
isChatPage: boolean;
isSidebarCollapsed: boolean;
onTabSwitch?: (tab: Tab) => void;
onNewChat?: () => void;
leftActions?: React.ReactNode;
showResizeHandle?: boolean;
onResizeMouseDown?: (e: React.MouseEvent) => void;
children: React.ReactNode;
}) {
const activeTab = useAtomValue(activeTabAtom);
const isDocumentTab = activeTab?.type === "document";
return (
<div className="relative flex flex-1 flex-col min-w-0">
<div
className={cn(
"relative flex flex-1 flex-col min-w-0 -ml-2",
isSidebarCollapsed ? "" : "border-l border-border/60"
)}
>
{showResizeHandle && onResizeMouseDown && (
<div
role="slider"
aria-label="Resize sidebar"
aria-valuemin={0}
aria-valuemax={100}
aria-valuenow={50}
tabIndex={0}
onMouseDown={onResizeMouseDown}
className="absolute left-0 top-0 hidden md:block h-full w-2 -translate-x-1/2 cursor-col-resize z-30 focus:outline-none"
/>
)}
<TabBar
onTabSwitch={onTabSwitch}
onNewChat={onNewChat}
@ -143,7 +166,7 @@ function MainContentPanel({
rightActions={<RightPanelExpandButton />}
className="min-w-0"
/>
<div className="relative flex flex-1 flex-col rounded-xl border bg-main-panel overflow-hidden min-w-0">
<div className="relative flex flex-1 flex-col border border-l-0 border-r-0 border-t-0 bg-main-panel overflow-hidden min-w-0">
<Header />
{isDocumentTab && activeTab.documentId && activeTab.searchSpaceId ? (
@ -515,26 +538,14 @@ export function LayoutShell({
</SidebarSlideOutPanel>
</div>
{/* Resize handle — negative margins eat the flex gap so spacing stays unchanged */}
{!isCollapsed && (
<div
role="slider"
aria-label="Resize sidebar"
aria-valuemin={0}
aria-valuemax={100}
aria-valuenow={50}
tabIndex={0}
onMouseDown={onResizeMouseDown}
className="hidden md:block h-full cursor-col-resize z-30 focus:outline-none"
style={{ width: 8, marginLeft: -8, marginRight: -8 }}
/>
)}
{/* Main content panel */}
<MainContentPanel
isChatPage={isChatPage}
isSidebarCollapsed={isCollapsed}
onTabSwitch={onTabSwitch}
onNewChat={onNewChat}
showResizeHandle={!isCollapsed}
onResizeMouseDown={onResizeMouseDown}
leftActions={
isCollapsed ? (
<SidebarCollapseButton isCollapsed={isCollapsed} onToggle={toggleCollapsed} />
@ -546,12 +557,14 @@ export function LayoutShell({
{/* Right panel — tabbed Sources/Report (desktop only) */}
{documentsPanel && (
<RightPanel
documentsPanel={{
open: documentsPanel.open,
onOpenChange: documentsPanel.onOpenChange,
}}
/>
<div className="-ml-2 -mr-2">
<RightPanel
documentsPanel={{
open: documentsPanel.open,
onOpenChange: documentsPanel.onOpenChange,
}}
/>
</div>
)}
</div>
</TooltipProvider>