Revert "feat(webui): pin sidebar collapse button to the resize divider"

This reverts commit adc59ba. The divider-mounted tab broke the header's
visual consistency; the collapse toggle stays in the top header.
This commit is contained in:
m4
2026-08-11 07:22:20 +08:00
parent adc59ba9a9
commit b75de8b5e6
2 changed files with 25 additions and 52 deletions
+25 -50
View File
@@ -315,36 +315,30 @@ function HomePageInner({ authEnabled }: HomePageInnerProps) {
)}
</div>
<div className="flex items-center gap-0.5">
{/* On desktop the expanded sidebar's collapse button lives on the
resize handle (it tracks the divider as the panel is resized);
the header keeps the toggle only for the collapsed and mobile
(overlay) states. */}
{(!sidebar || isDesktopLayout === false) && (
<Button
variant="ghost"
size="icon"
onClick={toggleSidebar}
aria-label={sidebarToggleLabel}
className="relative size-8"
>
{sidebar ? (
<PanelLeftClose
className="size-5"
aria-hidden="true"
/>
) : (
<PanelLeft
className="size-5"
aria-hidden="true"
/>
)}
{interruptCount > 0 && (
<span className="absolute right-0 top-0 inline-flex min-h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] text-destructive-foreground">
{interruptCount}
</span>
)}
</Button>
)}
<Button
variant="ghost"
size="icon"
onClick={toggleSidebar}
aria-label={sidebarToggleLabel}
className="relative size-8"
>
{sidebar ? (
<PanelLeftClose
className="size-5"
aria-hidden="true"
/>
) : (
<PanelLeft
className="size-5"
aria-hidden="true"
/>
)}
{interruptCount > 0 && (
<span className="absolute right-0 top-0 inline-flex min-h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] text-destructive-foreground">
{interruptCount}
</span>
)}
</Button>
{!sidebar && (
<Button
variant="ghost"
@@ -526,26 +520,7 @@ function HomePageInner({ authEnabled }: HomePageInnerProps) {
onInterruptCountChange={setInterruptCount}
/>
</ResizablePanel>
<ResizableHandle>
<Button
variant="ghost"
size="icon"
onClick={toggleSidebar}
onPointerDown={(event) => event.stopPropagation()}
aria-label={sidebarToggleLabel}
className="absolute left-1/2 top-0 z-10 size-8 -translate-x-1/2 rounded-none rounded-b-md border border-t-0 border-border bg-background shadow-sm"
>
<PanelLeftClose
className="size-5"
aria-hidden="true"
/>
{interruptCount > 0 && (
<span className="absolute right-0 top-0 inline-flex min-h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] text-destructive-foreground">
{interruptCount}
</span>
)}
</Button>
</ResizableHandle>
<ResizableHandle />
</>
)}
-2
View File
@@ -23,7 +23,6 @@ const ResizablePanel = ResizablePrimitive.Panel;
const ResizableHandle = ({
withHandle,
className,
children,
...props
}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
withHandle?: boolean;
@@ -40,7 +39,6 @@ const ResizableHandle = ({
<GripVertical className="h-2.5 w-2.5" />
</div>
)}
{children}
</ResizablePrimitive.PanelResizeHandle>
);