From 780dc7389bebce538b6a5e80efba0ea295be5aff Mon Sep 17 00:00:00 2001
From: Naiyuan Qing <145280634+NevilleQingNY@users.noreply.github.com>
Date: Fri, 16 Jan 2026 17:59:55 +0800
Subject: [PATCH] style: update Tooltip to modern popover style

- Remove arrow for cleaner popover aesthetic
- Add backdrop blur and subtle shadow for depth
- Use rounded-lg for rounder corners
- Default to top positioning with 4px offset
- Disable tooltip on active sidebar items
- Update shrink-0 class names (linter auto-fix)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 src/renderer/src/components/AgentSelector.tsx |  2 +-
 src/renderer/src/components/AppSidebar.tsx    | 12 ++++++------
 src/renderer/src/components/ui/sidebar.tsx    |  1 -
 src/renderer/src/components/ui/tooltip.tsx    | 10 +++++++---
 4 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/renderer/src/components/AgentSelector.tsx b/src/renderer/src/components/AgentSelector.tsx
index 69fdf608f..baf67a75d 100644
--- a/src/renderer/src/components/AgentSelector.tsx
+++ b/src/renderer/src/components/AgentSelector.tsx
@@ -127,7 +127,7 @@ export function AgentSelector({
                     </DropdownMenuItem>
                   </div>
                 </TooltipTrigger>
-                <TooltipContent side="right">Setup required in Settings</TooltipContent>
+                <TooltipContent>Setup required in Settings</TooltipContent>
               </Tooltip>
             )
           }
diff --git a/src/renderer/src/components/AppSidebar.tsx b/src/renderer/src/components/AppSidebar.tsx
index 6c086f0a9..a8952549a 100644
--- a/src/renderer/src/components/AppSidebar.tsx
+++ b/src/renderer/src/components/AppSidebar.tsx
@@ -77,7 +77,7 @@ function SessionItem({
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
-      <Tooltip delayDuration={600}>
+      <Tooltip delayDuration={600} open={isActive ? false : undefined}>
         <TooltipTrigger asChild>
           <SidebarMenuButton
             isActive={isActive}
@@ -95,11 +95,11 @@ function SessionItem({
                 <span className="truncate text-sm font-medium">{getSessionTitle(session)}</span>
                 {/* Status indicators - invalid directory has highest priority */}
                 {isInvalid ? (
-                  <AlertTriangle className="h-3.5 w-3.5 flex-shrink-0 text-amber-500" />
+                  <AlertTriangle className="h-3.5 w-3.5 shrink-0 text-amber-500" />
                 ) : needsPermission ? (
-                  <CirclePause className="h-3.5 w-3.5 flex-shrink-0 text-amber-500" />
+                  <CirclePause className="h-3.5 w-3.5 shrink-0 text-amber-500" />
                 ) : isProcessing ? (
-                  <Loader2 className="h-3 w-3 flex-shrink-0 animate-spin text-primary" />
+                  <Loader2 className="h-3 w-3 shrink-0 animate-spin text-primary" />
                 ) : null}
               </div>
 
@@ -116,7 +116,7 @@ function SessionItem({
                 onDelete()
               }}
               className={cn(
-                'flex-shrink-0 self-start rounded p-1 transition-opacity duration-150',
+                'shrink-0 self-start rounded p-1 transition-opacity duration-150',
                 'hover:bg-muted active:bg-muted',
                 isHovered ? 'opacity-50 hover:opacity-100' : 'opacity-0'
               )}
@@ -125,7 +125,7 @@ function SessionItem({
             </button>
           </SidebarMenuButton>
         </TooltipTrigger>
-        <TooltipContent side="right">
+        <TooltipContent>
           {isInvalid ? (
             <p className="text-amber-500">Directory not found: {session.workingDirectory}</p>
           ) : (
diff --git a/src/renderer/src/components/ui/sidebar.tsx b/src/renderer/src/components/ui/sidebar.tsx
index 2673d15fb..973ff54f9 100644
--- a/src/renderer/src/components/ui/sidebar.tsx
+++ b/src/renderer/src/components/ui/sidebar.tsx
@@ -546,7 +546,6 @@ function SidebarMenuButton({
     <Tooltip>
       <TooltipTrigger asChild>{button}</TooltipTrigger>
       <TooltipContent
-        side="right"
         align="center"
         hidden={state !== 'collapsed' || isMobile}
         {...tooltip}
diff --git a/src/renderer/src/components/ui/tooltip.tsx b/src/renderer/src/components/ui/tooltip.tsx
index dfcc8a62b..ecc154c18 100644
--- a/src/renderer/src/components/ui/tooltip.tsx
+++ b/src/renderer/src/components/ui/tooltip.tsx
@@ -30,7 +30,8 @@ function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimiti
 
 function TooltipContent({
   className,
-  sideOffset = 0,
+  side = 'top',
+  sideOffset = 4,
   children,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
@@ -38,15 +39,18 @@ function TooltipContent({
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
         data-slot="tooltip-content"
+        side={side}
         sideOffset={sideOffset}
         className={cn(
-          'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+          'bg-popover/95 text-popover-foreground backdrop-blur-sm',
+          'shadow-lg shadow-black/10 border border-border/50',
+          'animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-lg px-3 py-1.5 text-xs text-balance',
           className
         )}
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )