From 34d2bafe31a25fa5163190c4034e79b5a4b78dfc Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Wed, 17 Dec 2025 11:43:31 -0800
Subject: [PATCH 1/2] use shadcn tooltips

---
 .../PresetsSettings/PresetsSettings.tsx       | 48 ++++++++-------
 .../TabsContent/TabView/TabPane.tsx           | 45 +++++++++-----
 .../DirectoryNavigator/DirectoryNavigator.tsx | 21 ++++---
 .../TerminalSearch/TerminalSearch.tsx         | 60 +++++++++++--------
 .../components/FileItem/FileItem.tsx          |  5 +-
 .../Sidebar/ModeCarousel/ModeNavigation.tsx   | 32 ++++++----
 .../Sidebar/TabsView/TabItem/index.tsx        | 17 +++---
 7 files changed, 134 insertions(+), 94 deletions(-)

diff --git a/apps/desktop/src/renderer/screens/main/components/SettingsView/PresetsSettings/PresetsSettings.tsx b/apps/desktop/src/renderer/screens/main/components/SettingsView/PresetsSettings/PresetsSettings.tsx
index 2faed3e2ff2..2845a8fffd7 100644
--- a/apps/desktop/src/renderer/screens/main/components/SettingsView/PresetsSettings/PresetsSettings.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/SettingsView/PresetsSettings/PresetsSettings.tsx
@@ -1,4 +1,5 @@
 import { Button } from "@superset/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
 import { useEffect, useMemo, useState } from "react";
 import { HiOutlineCheck, HiOutlinePlus } from "react-icons/hi2";
 import {
@@ -200,28 +201,31 @@ export function PresetsSettings() {
 						const alreadyAdded = isTemplateAdded(template);
 						const presetIcon = getPresetIcon(template.name, isDark);
 						return (
-							<Button
-								key={template.name}
-								variant="outline"
-								size="sm"
-								className="gap-1.5 text-xs h-7"
-								onClick={() => handleAddTemplate(template)}
-								title={
-									alreadyAdded ? "Already added" : template.preset.description
-								}
-								disabled={alreadyAdded || createPreset.isPending}
-							>
-								{alreadyAdded ? (
-									<HiOutlineCheck className="h-3 w-3" />
-								) : presetIcon ? (
-									<img
-										src={presetIcon}
-										alt=""
-										className="h-3 w-3 object-contain"
-									/>
-								) : null}
-								{template.name}
-							</Button>
+							<Tooltip key={template.name}>
+								<TooltipTrigger asChild>
+									<Button
+										variant="outline"
+										size="sm"
+										className="gap-1.5 text-xs h-7"
+										onClick={() => handleAddTemplate(template)}
+										disabled={alreadyAdded || createPreset.isPending}
+									>
+										{alreadyAdded ? (
+											<HiOutlineCheck className="h-3 w-3" />
+										) : presetIcon ? (
+											<img
+												src={presetIcon}
+												alt=""
+												className="h-3 w-3 object-contain"
+											/>
+										) : null}
+										{template.name}
+									</Button>
+								</TooltipTrigger>
+								<TooltipContent side="bottom" showArrow={false}>
+									{alreadyAdded ? "Already added" : template.preset.description}
+								</TooltipContent>
+							</Tooltip>
 						);
 					})}
 				</div>
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx
index a327c054624..fe5d32dda1a 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/TabView/TabPane.tsx
@@ -1,3 +1,4 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
 import { useEffect, useRef, useState } from "react";
 import { HiMiniXMark } from "react-icons/hi2";
 import { TbLayoutColumns, TbLayoutRows } from "react-icons/tb";
@@ -138,22 +139,34 @@ export function TabPane({
 						/>
 					</div>
 					<div className="flex items-center gap-0.5">
-						<button
-							type="button"
-							onClick={handleSplitPane}
-							title="Split pane"
-							className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
-						>
-							{splitIcon}
-						</button>
-						<button
-							type="button"
-							onClick={handleClosePane}
-							title="Close pane"
-							className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
-						>
-							<HiMiniXMark className="size-4" />
-						</button>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<button
+									type="button"
+									onClick={handleSplitPane}
+									className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
+								>
+									{splitIcon}
+								</button>
+							</TooltipTrigger>
+							<TooltipContent side="bottom" showArrow={false}>
+								Split pane
+							</TooltipContent>
+						</Tooltip>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<button
+									type="button"
+									onClick={handleClosePane}
+									className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
+								>
+									<HiMiniXMark className="size-4" />
+								</button>
+							</TooltipTrigger>
+							<TooltipContent side="bottom" showArrow={false}>
+								Close pane
+							</TooltipContent>
+						</Tooltip>
 					</div>
 				</div>
 			)}
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/DirectoryNavigator/DirectoryNavigator.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/DirectoryNavigator/DirectoryNavigator.tsx
index c018feb001c..8b492b38ebd 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/DirectoryNavigator/DirectoryNavigator.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/DirectoryNavigator/DirectoryNavigator.tsx
@@ -1,4 +1,5 @@
 import { Popover, PopoverContent, PopoverTrigger } from "@superset/ui/popover";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
 import { useCallback, useState } from "react";
 import { HiChevronRight, HiFolder, HiFolderOpen } from "react-icons/hi2";
 import { trpc } from "renderer/lib/trpc";
@@ -191,14 +192,18 @@ export function DirectoryNavigator({
 									<HiFolder className="size-4 shrink-0 text-muted-foreground" />
 									<span className="truncate">{item.name}</span>
 								</button>
-								<button
-									type="button"
-									onClick={() => handleNavigateToDir(item.path)}
-									className="px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity"
-									title="Navigate here"
-								>
-									cd
-								</button>
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<button
+											type="button"
+											onClick={() => handleNavigateToDir(item.path)}
+											className="px-2 py-1.5 text-xs text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity"
+										>
+											cd
+										</button>
+									</TooltipTrigger>
+									<TooltipContent side="right">Navigate here</TooltipContent>
+								</Tooltip>
 							</div>
 						))
 					)}
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsx
index eded8acc800..6f01174755c 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/ContentView/TabsContent/Terminal/TerminalSearch/TerminalSearch.tsx
@@ -149,30 +149,42 @@ export function TerminalSearch({
 					</TooltipTrigger>
 					<TooltipContent side="bottom">Match case</TooltipContent>
 				</Tooltip>
-				<button
-					type="button"
-					onClick={() => handleSearch("previous")}
-					className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
-					title="Previous (Shift+Enter)"
-				>
-					<HiChevronUp className="size-3.5" />
-				</button>
-				<button
-					type="button"
-					onClick={() => handleSearch("next")}
-					className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
-					title="Next (Enter)"
-				>
-					<HiChevronDown className="size-3.5" />
-				</button>
-				<button
-					type="button"
-					onClick={handleClose}
-					className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
-					title="Close (Esc)"
-				>
-					<HiMiniXMark className="size-3.5" />
-				</button>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<button
+							type="button"
+							onClick={() => handleSearch("previous")}
+							className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
+						>
+							<HiChevronUp className="size-3.5" />
+						</button>
+					</TooltipTrigger>
+					<TooltipContent side="bottom">Previous (Shift+Enter)</TooltipContent>
+				</Tooltip>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<button
+							type="button"
+							onClick={() => handleSearch("next")}
+							className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
+						>
+							<HiChevronDown className="size-3.5" />
+						</button>
+					</TooltipTrigger>
+					<TooltipContent side="bottom">Next (Enter)</TooltipContent>
+				</Tooltip>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<button
+							type="button"
+							onClick={handleClose}
+							className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted-foreground/20 hover:text-foreground"
+						>
+							<HiMiniXMark className="size-3.5" />
+						</button>
+					</TooltipTrigger>
+					<TooltipContent side="bottom">Close (Esc)</TooltipContent>
+				</Tooltip>
 			</div>
 		</div>
 	);
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
index 551c08d3d60..c832c6eda58 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ChangesView/components/FileItem/FileItem.tsx
@@ -78,10 +78,7 @@ export function FileItem({
 				<span className="flex-1 min-w-0 flex items-center gap-1">
 					<Tooltip>
 						<TooltipTrigger asChild>
-							<span
-								className="text-xs text-start truncate overflow-hidden text-ellipsis"
-								title={file.path}
-							>
+							<span className="text-xs text-start truncate overflow-hidden text-ellipsis">
 								{fileName}
 							</span>
 						</TooltipTrigger>
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeNavigation.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeNavigation.tsx
index b161c526099..baf29acf988 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeNavigation.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/ModeCarousel/ModeNavigation.tsx
@@ -1,3 +1,4 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
 import type { MotionValue } from "framer-motion";
 import { AnimatedBackground } from "./AnimatedBackground";
 import { modeIcons, modeLabels } from "./constants";
@@ -30,19 +31,24 @@ export function ModeNavigation({
 					const label = modeLabels[mode];
 
 					return (
-						<button
-							key={mode}
-							type="button"
-							onClick={() => onModeSelect(mode)}
-							title={label}
-							className={`relative z-10 h-8 w-8 rounded-sm flex items-center justify-center transition-colors duration-150 ${
-								isActive
-									? "text-sidebar-foreground"
-									: "text-sidebar-foreground/60 hover:text-sidebar-foreground/80"
-							}`}
-						>
-							<Icon className="w-3.5 h-3.5" />
-						</button>
+						<Tooltip key={mode}>
+							<TooltipTrigger asChild>
+								<button
+									type="button"
+									onClick={() => onModeSelect(mode)}
+									className={`relative z-10 h-8 w-8 rounded-sm flex items-center justify-center transition-colors duration-150 ${
+										isActive
+											? "text-sidebar-foreground"
+											: "text-sidebar-foreground/60 hover:text-sidebar-foreground/80"
+									}`}
+								>
+									<Icon className="w-3.5 h-3.5" />
+								</button>
+							</TooltipTrigger>
+							<TooltipContent side="bottom" showArrow={false}>
+								{label}
+							</TooltipContent>
+						</Tooltip>
 					);
 				})}
 			</div>
diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx
index 84401620c67..ca9ea419676 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx
@@ -1,5 +1,6 @@
 import { Button } from "@superset/ui/button";
 import { Input } from "@superset/ui/input";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@superset/ui/tooltip";
 import { useRef, useState } from "react";
 import { useDrag, useDrop } from "react-dnd";
 import { HiMiniCommandLine, HiMiniXMark } from "react-icons/hi2";
@@ -151,13 +152,15 @@ export function TabItem({ tab, index, isActive }: TabItemProps) {
 							<>
 								<span className="truncate flex-1">{displayName}</span>
 								{needsAttention && (
-									<span
-										className="relative flex size-2 shrink-0 ml-1"
-										title="Agent completed"
-									>
-										<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75" />
-										<span className="relative inline-flex size-2 rounded-full bg-red-500" />
-									</span>
+									<Tooltip>
+										<TooltipTrigger asChild>
+											<span className="relative flex size-2 shrink-0 ml-1">
+												<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-red-400 opacity-75" />
+												<span className="relative inline-flex size-2 rounded-full bg-red-500" />
+											</span>
+										</TooltipTrigger>
+										<TooltipContent side="right">Agent completed</TooltipContent>
+									</Tooltip>
 								)}
 							</>
 						)}

From 2ea76481b16aeef859230706131ee43ef2df52e0 Mon Sep 17 00:00:00 2001
From: Kiet Ho <hoakiet98@gmail.com>
Date: Wed, 17 Dec 2025 11:44:36 -0800
Subject: [PATCH 2/2] fix lint

---
 .../WorkspaceView/Sidebar/TabsView/TabItem/index.tsx          | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx
index ca9ea419676..5c0a89f61ba 100644
--- a/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx
+++ b/apps/desktop/src/renderer/screens/main/components/WorkspaceView/Sidebar/TabsView/TabItem/index.tsx
@@ -159,7 +159,9 @@ export function TabItem({ tab, index, isActive }: TabItemProps) {
 												<span className="relative inline-flex size-2 rounded-full bg-red-500" />
 											</span>
 										</TooltipTrigger>
-										<TooltipContent side="right">Agent completed</TooltipContent>
+										<TooltipContent side="right">
+											Agent completed
+										</TooltipContent>
 									</Tooltip>
 								)}
 							</>