Skip to content

Commit 5d210e2

Browse files
thetronjohnson123vivekr
thetronjohnson
authored and
123vivekr
committed
added custom tooltips
1 parent 7498906 commit 5d210e2

4 files changed

Lines changed: 282 additions & 225 deletions

File tree

‎src/components/ClaudeCodeSession.tsx‎

Lines changed: 83 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ import { TimelineNavigator } from "./TimelineNavigator";
2929
import { CheckpointSettings } from "./CheckpointSettings";
3030
import { SlashCommandsManager } from "./SlashCommandsManager";
3131
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog";
32-
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
32+
import { TooltipProvider, TooltipSimple } from "@/components/ui/tooltip-modern";
3333
import { SplitPane } from "@/components/ui/split-pane";
3434
import { WebviewPreview } from "./WebviewPreview";
3535
import type { ClaudeStreamMessage } from "./AgentExecution";
@@ -1245,8 +1245,9 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
12451245
}
12461246

12471247
return (
1248-
<div className={cn("flex flex-col h-full bg-background", className)}>
1249-
<div className="w-full h-full flex flex-col">
1248+
<TooltipProvider>
1249+
<div className={cn("flex flex-col h-full bg-background", className)}>
1250+
<div className="w-full h-full flex flex-col">
12501251

12511252
{/* Main Content Area */}
12521253
<div className={cn(
@@ -1313,14 +1314,16 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
13131314
<div className="text-xs font-medium text-muted-foreground mb-1">
13141315
Queued Prompts ({queuedPrompts.length})
13151316
</div>
1316-
<motion.div
1317-
whileTap={{ scale: 0.97 }}
1318-
transition={{ duration: 0.15 }}
1319-
>
1320-
<Button variant="ghost" size="icon" onClick={() => setQueuedPromptsCollapsed(prev => !prev)}>
1321-
{queuedPromptsCollapsed ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
1322-
</Button>
1323-
</motion.div>
1317+
<TooltipSimple content={queuedPromptsCollapsed ? "Expand queue" : "Collapse queue"} side="top">
1318+
<motion.div
1319+
whileTap={{ scale: 0.97 }}
1320+
transition={{ duration: 0.15 }}
1321+
>
1322+
<Button variant="ghost" size="icon" onClick={() => setQueuedPromptsCollapsed(prev => !prev)}>
1323+
{queuedPromptsCollapsed ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
1324+
</Button>
1325+
</motion.div>
1326+
</TooltipSimple>
13241327
</div>
13251328
{!queuedPromptsCollapsed && queuedPrompts.map((queuedPrompt, index) => (
13261329
<motion.div
@@ -1370,14 +1373,15 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
13701373
className="fixed bottom-32 right-6 z-50"
13711374
>
13721375
<div className="flex items-center bg-background/95 backdrop-blur-md border rounded-full shadow-lg overflow-hidden">
1373-
<motion.div
1374-
whileTap={{ scale: 0.97 }}
1375-
transition={{ duration: 0.15 }}
1376-
>
1377-
<Button
1378-
variant="ghost"
1379-
size="sm"
1380-
onClick={() => {
1376+
<TooltipSimple content="Scroll to top" side="top">
1377+
<motion.div
1378+
whileTap={{ scale: 0.97 }}
1379+
transition={{ duration: 0.15 }}
1380+
>
1381+
<Button
1382+
variant="ghost"
1383+
size="sm"
1384+
onClick={() => {
13811385
// Use virtualizer to scroll to the first item
13821386
if (displayableMessages.length > 0) {
13831387
// Scroll to top of the container
@@ -1400,21 +1404,22 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
14001404
}, 500); // Wait for smooth scroll to complete
14011405
}
14021406
}}
1403-
className="px-3 py-2 hover:bg-accent rounded-none"
1404-
title="Scroll to top"
1405-
>
1406-
<ChevronUp className="h-4 w-4" />
1407-
</Button>
1408-
</motion.div>
1407+
className="px-3 py-2 hover:bg-accent rounded-none"
1408+
>
1409+
<ChevronUp className="h-4 w-4" />
1410+
</Button>
1411+
</motion.div>
1412+
</TooltipSimple>
14091413
<div className="w-px h-4 bg-border" />
1410-
<motion.div
1411-
whileTap={{ scale: 0.97 }}
1412-
transition={{ duration: 0.15 }}
1413-
>
1414-
<Button
1415-
variant="ghost"
1416-
size="sm"
1417-
onClick={() => {
1414+
<TooltipSimple content="Scroll to bottom" side="top">
1415+
<motion.div
1416+
whileTap={{ scale: 0.97 }}
1417+
transition={{ duration: 0.15 }}
1418+
>
1419+
<Button
1420+
variant="ghost"
1421+
size="sm"
1422+
onClick={() => {
14181423
// Use virtualizer to scroll to the last item
14191424
if (displayableMessages.length > 0) {
14201425
// Scroll to bottom of the container
@@ -1427,12 +1432,12 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
14271432
}
14281433
}
14291434
}}
1430-
className="px-3 py-2 hover:bg-accent rounded-none"
1431-
title="Scroll to bottom"
1432-
>
1433-
<ChevronDown className="h-4 w-4" />
1434-
</Button>
1435-
</motion.div>
1435+
className="px-3 py-2 hover:bg-accent rounded-none"
1436+
>
1437+
<ChevronDown className="h-4 w-4" />
1438+
</Button>
1439+
</motion.div>
1440+
</TooltipSimple>
14361441
</div>
14371442
</motion.div>
14381443
)}
@@ -1451,53 +1456,39 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
14511456
extraMenuItems={
14521457
<>
14531458
{effectiveSession && (
1454-
<TooltipProvider>
1455-
<Tooltip>
1456-
<TooltipTrigger asChild>
1459+
<TooltipSimple content="Session Timeline" side="top">
1460+
<motion.div
1461+
whileTap={{ scale: 0.97 }}
1462+
transition={{ duration: 0.15 }}
1463+
>
1464+
<Button
1465+
variant="ghost"
1466+
size="icon"
1467+
onClick={() => setShowTimeline(!showTimeline)}
1468+
className="h-9 w-9 text-muted-foreground hover:text-foreground"
1469+
>
1470+
<GitBranch className={cn("h-3.5 w-3.5", showTimeline && "text-primary")} />
1471+
</Button>
1472+
</motion.div>
1473+
</TooltipSimple>
1474+
)}
1475+
{messages.length > 0 && (
1476+
<Popover
1477+
trigger={
1478+
<TooltipSimple content="Copy conversation" side="top">
14571479
<motion.div
14581480
whileTap={{ scale: 0.97 }}
14591481
transition={{ duration: 0.15 }}
14601482
>
14611483
<Button
14621484
variant="ghost"
14631485
size="icon"
1464-
onClick={() => setShowTimeline(!showTimeline)}
14651486
className="h-9 w-9 text-muted-foreground hover:text-foreground"
14661487
>
1467-
<GitBranch className={cn("h-3.5 w-3.5", showTimeline && "text-primary")} />
1488+
<Copy className="h-3.5 w-3.5" />
14681489
</Button>
14691490
</motion.div>
1470-
</TooltipTrigger>
1471-
<TooltipContent>
1472-
<p className="text-xs">Timeline</p>
1473-
</TooltipContent>
1474-
</Tooltip>
1475-
</TooltipProvider>
1476-
)}
1477-
{messages.length > 0 && (
1478-
<Popover
1479-
trigger={
1480-
<TooltipProvider>
1481-
<Tooltip>
1482-
<TooltipTrigger asChild>
1483-
<motion.div
1484-
whileTap={{ scale: 0.97 }}
1485-
transition={{ duration: 0.15 }}
1486-
>
1487-
<Button
1488-
variant="ghost"
1489-
size="icon"
1490-
className="h-9 w-9 text-muted-foreground hover:text-foreground"
1491-
>
1492-
<Copy className="h-3.5 w-3.5" />
1493-
</Button>
1494-
</motion.div>
1495-
</TooltipTrigger>
1496-
<TooltipContent>
1497-
<p className="text-xs">Copy</p>
1498-
</TooltipContent>
1499-
</Tooltip>
1500-
</TooltipProvider>
1491+
</TooltipSimple>
15011492
}
15021493
content={
15031494
<div className="w-44 p-1">
@@ -1525,28 +1516,21 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
15251516
align="end"
15261517
/>
15271518
)}
1528-
<TooltipProvider>
1529-
<Tooltip>
1530-
<TooltipTrigger asChild>
1531-
<motion.div
1532-
whileTap={{ scale: 0.97 }}
1533-
transition={{ duration: 0.15 }}
1534-
>
1535-
<Button
1536-
variant="ghost"
1537-
size="icon"
1538-
onClick={() => setShowSettings(!showSettings)}
1539-
className="h-8 w-8 text-muted-foreground hover:text-foreground"
1540-
>
1541-
<Wrench className={cn("h-3.5 w-3.5", showSettings && "text-primary")} />
1542-
</Button>
1543-
</motion.div>
1544-
</TooltipTrigger>
1545-
<TooltipContent>
1546-
<p className="text-xs">Checkpoint Settings</p>
1547-
</TooltipContent>
1548-
</Tooltip>
1549-
</TooltipProvider>
1519+
<TooltipSimple content="Checkpoint Settings" side="top">
1520+
<motion.div
1521+
whileTap={{ scale: 0.97 }}
1522+
transition={{ duration: 0.15 }}
1523+
>
1524+
<Button
1525+
variant="ghost"
1526+
size="icon"
1527+
onClick={() => setShowSettings(!showSettings)}
1528+
className="h-8 w-8 text-muted-foreground hover:text-foreground"
1529+
>
1530+
<Wrench className={cn("h-3.5 w-3.5", showSettings && "text-primary")} />
1531+
</Button>
1532+
</motion.div>
1533+
</TooltipSimple>
15501534
</>
15511535
}
15521536
/>
@@ -1693,6 +1677,7 @@ export const ClaudeCodeSession: React.FC<ClaudeCodeSessionProps> = ({
16931677
</DialogContent>
16941678
</Dialog>
16951679
)}
1696-
</div>
1680+
</div>
1681+
</TooltipProvider>
16971682
);
16981683
};

‎src/components/CustomTitlebar.tsx‎

Lines changed: 43 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useState, useRef, useEffect } from 'react';
22
import { motion } from 'framer-motion';
33
import { Settings, Minus, Square, X, Bot, BarChart3, FileText, Network, Info, MoreVertical } from 'lucide-react';
44
import { getCurrentWindow } from '@tauri-apps/api/window';
5+
import { TooltipProvider, TooltipSimple } from '@/components/ui/tooltip-modern';
56

67
interface CustomTitlebarProps {
78
onSettingsClick?: () => void;
@@ -72,6 +73,7 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
7273
};
7374

7475
return (
76+
<TooltipProvider>
7577
<div
7678
className="h-11 bg-background flex items-center justify-between select-none border-b border-border/50"
7779
style={{ borderTopLeftRadius: '12px', borderTopRightRadius: '12px' }}
@@ -139,27 +141,29 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
139141
{/* Primary actions group */}
140142
<div className="flex items-center gap-1">
141143
{onAgentsClick && (
142-
<motion.button
143-
onClick={onAgentsClick}
144-
whileTap={{ scale: 0.97 }}
145-
transition={{ duration: 0.15 }}
146-
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
147-
title="Agents"
148-
>
149-
<Bot size={16} />
150-
</motion.button>
144+
<TooltipSimple content="Agents" side="bottom">
145+
<motion.button
146+
onClick={onAgentsClick}
147+
whileTap={{ scale: 0.97 }}
148+
transition={{ duration: 0.15 }}
149+
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
150+
>
151+
<Bot size={16} />
152+
</motion.button>
153+
</TooltipSimple>
151154
)}
152155

153156
{onUsageClick && (
154-
<motion.button
155-
onClick={onUsageClick}
156-
whileTap={{ scale: 0.97 }}
157-
transition={{ duration: 0.15 }}
158-
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
159-
title="Usage Dashboard"
160-
>
161-
<BarChart3 size={16} />
162-
</motion.button>
157+
<TooltipSimple content="Usage Dashboard" side="bottom">
158+
<motion.button
159+
onClick={onUsageClick}
160+
whileTap={{ scale: 0.97 }}
161+
transition={{ duration: 0.15 }}
162+
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
163+
>
164+
<BarChart3 size={16} />
165+
</motion.button>
166+
</TooltipSimple>
163167
)}
164168
</div>
165169

@@ -169,28 +173,30 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
169173
{/* Secondary actions group */}
170174
<div className="flex items-center gap-1">
171175
{onSettingsClick && (
172-
<motion.button
173-
onClick={onSettingsClick}
174-
whileTap={{ scale: 0.97 }}
175-
transition={{ duration: 0.15 }}
176-
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
177-
title="Settings"
178-
>
179-
<Settings size={16} />
180-
</motion.button>
176+
<TooltipSimple content="Settings" side="bottom">
177+
<motion.button
178+
onClick={onSettingsClick}
179+
whileTap={{ scale: 0.97 }}
180+
transition={{ duration: 0.15 }}
181+
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors"
182+
>
183+
<Settings size={16} />
184+
</motion.button>
185+
</TooltipSimple>
181186
)}
182187

183188
{/* Dropdown menu for additional options */}
184189
<div className="relative" ref={dropdownRef}>
185-
<motion.button
186-
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
187-
whileTap={{ scale: 0.97 }}
188-
transition={{ duration: 0.15 }}
189-
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors flex items-center gap-1"
190-
title="More options"
191-
>
192-
<MoreVertical size={16} />
193-
</motion.button>
190+
<TooltipSimple content="More options" side="bottom">
191+
<motion.button
192+
onClick={() => setIsDropdownOpen(!isDropdownOpen)}
193+
whileTap={{ scale: 0.97 }}
194+
transition={{ duration: 0.15 }}
195+
className="p-2 rounded-md hover:bg-accent hover:text-accent-foreground transition-colors flex items-center gap-1"
196+
>
197+
<MoreVertical size={16} />
198+
</motion.button>
199+
</TooltipSimple>
194200

195201
{isDropdownOpen && (
196202
<div className="absolute right-0 mt-2 w-48 bg-popover border border-border rounded-lg shadow-lg z-50">
@@ -240,5 +246,6 @@ export const CustomTitlebar: React.FC<CustomTitlebarProps> = ({
240246
</div>
241247
</div>
242248
</div>
249+
</TooltipProvider>
243250
);
244251
};

0 commit comments

Comments
 (0)