From 948c648ddff5faea31eff242cd3a2fe9b34a3ec3 Mon Sep 17 00:00:00 2001
From: Jiayuan <forrestchang7@gmail.com>
Date: Thu, 15 Jan 2026 01:56:48 +0800
Subject: [PATCH] feat(ui): show close button on right panel header hover

The close button appears on the right side of the header when
hovering over the right panel header area.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../src/components/layout/RightPanel.tsx       | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/layout/RightPanel.tsx b/src/renderer/src/components/layout/RightPanel.tsx
index 50b6f4328c..ec935d1e24 100644
--- a/src/renderer/src/components/layout/RightPanel.tsx
+++ b/src/renderer/src/components/layout/RightPanel.tsx
@@ -94,13 +94,27 @@ export function SidebarTrigger({
 // Sub-components for consistent structure
 export function RightPanelHeader({
   className,
+  children,
   ...props
 }: React.ComponentProps<'div'>) {
+  const toggle = useUIStore((s) => s.toggleRightPanel)
+
   return (
     <div
-      className={cn('flex h-11 items-center border-b px-4', className)}
+      className={cn('group flex h-11 items-center border-b px-4', className)}
       {...props}
-    />
+    >
+      {children}
+      <Button
+        variant="ghost"
+        size="icon"
+        className="ml-auto size-7 opacity-0 group-hover:opacity-100 transition-opacity"
+        onClick={toggle}
+      >
+        <PanelRightIcon className="h-4 w-4" />
+        <span className="sr-only">Close Right Panel</span>
+      </Button>
+    </div>
   )
 }