From 244f10fcec2c41be88c518a5e50c46c82414303e Mon Sep 17 00:00:00 2001
From: SaelixCode <dev@saelix.com>
Date: Fri, 3 Jul 2026 19:13:37 -0400
Subject: [PATCH] fix: replace native title tooltips with Radix tooltips on
 Fleet toolbar

Converted Refresh, Export Dossier, Search, Sort direction, Node Update,
and Manage Nodes buttons from native HTML title attributes to the shared
Radix Tooltip component so they match the app-wide glass tooltip design.
---
 frontend/src/components/FleetView.tsx         |  57 ++++++----
 .../components/FleetView/OverviewToolbar.tsx  | 107 +++++++++++-------
 2 files changed, 101 insertions(+), 63 deletions(-)

diff --git a/frontend/src/components/FleetView.tsx b/frontend/src/components/FleetView.tsx
index c15855f4..5532e9a2 100644
--- a/frontend/src/components/FleetView.tsx
+++ b/frontend/src/components/FleetView.tsx
@@ -4,6 +4,7 @@ import {
     Network, SlidersHorizontal,
     Send, KeyRound, ArrowLeftRight, Wrench, Workflow,
 } from 'lucide-react';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { FleetMasthead } from './fleet/FleetMasthead';
 import { ReconnectingOverlay } from './FleetView/ReconnectingOverlay';
 import { NodeUpdatesSheet } from './FleetView/NodeUpdatesSheet';
@@ -167,29 +168,41 @@ export function FleetView({ onNavigateToNode, onOpenSettingsSection, fleetUpdate
                         </TabsHighlight>
                     </TabsList>
                     <div className="flex items-center gap-2 shrink-0">
-                        <Button
-                            variant="outline"
-                            size="sm"
-                            onClick={() => overview.fetchOverview(true)}
-                            disabled={refreshing}
-                            className="h-9 w-9 p-0"
-                            title="Refresh"
-                            aria-label="Refresh"
-                        >
-                            <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin' : ''}`} />
-                        </Button>
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        onClick={() => overview.fetchOverview(true)}
+                                        disabled={refreshing}
+                                        className="h-9 w-9 p-0"
+                                        aria-label="Refresh"
+                                    >
+                                        <RefreshCw className={`w-4 h-4 ${refreshing ? 'animate-spin' : ''}`} />
+                                    </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>Refresh</TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
                         {isAdmin && (
-                            <Button
-                                variant="outline"
-                                size="sm"
-                                onClick={() => { void exportDossier(); }}
-                                disabled={exporting}
-                                className="h-9 w-9 p-0"
-                                title="Export Dossier"
-                                aria-label="Export Dossier"
-                            >
-                                <FileDown className={`w-4 h-4 ${exporting ? 'animate-pulse' : ''}`} />
-                            </Button>
+                            <TooltipProvider>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <Button
+                                            variant="outline"
+                                            size="sm"
+                                            onClick={() => { void exportDossier(); }}
+                                            disabled={exporting}
+                                            className="h-9 w-9 p-0"
+                                            aria-label="Export Dossier"
+                                        >
+                                            <FileDown className={`w-4 h-4 ${exporting ? 'animate-pulse' : ''}`} />
+                                        </Button>
+                                    </TooltipTrigger>
+                                    <TooltipContent>Export Dossier</TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
                         )}
                     </div>
                 </div>
diff --git a/frontend/src/components/FleetView/OverviewToolbar.tsx b/frontend/src/components/FleetView/OverviewToolbar.tsx
index 2df5cae2..f318eecb 100644
--- a/frontend/src/components/FleetView/OverviewToolbar.tsx
+++ b/frontend/src/components/FleetView/OverviewToolbar.tsx
@@ -9,6 +9,7 @@ import { Input } from '@/components/ui/input';
 import { Combobox } from '@/components/ui/combobox';
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
 import { MultiSelectCombobox } from '@/components/ui/multi-select-combobox';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { SegmentedControl, type SegmentedControlOption } from '@/components/ui/segmented-control';
 import { LabelDot } from '../LabelPill';
 import type { LabelColor } from '../label-types';
@@ -110,16 +111,22 @@ export function OverviewToolbar({
                             />
                         </div>
                     ) : (
-                        <Button
-                            variant="outline"
-                            size="sm"
-                            className="h-9 w-9 p-0 shrink-0"
-                            onClick={() => setSearchExpanded(true)}
-                            title="Search nodes or stacks"
-                            aria-label="Search nodes or stacks"
-                        >
-                            <Search className="w-4 h-4" />
-                        </Button>
+                        <TooltipProvider>
+                            <Tooltip>
+                                <TooltipTrigger asChild>
+                                    <Button
+                                        variant="outline"
+                                        size="sm"
+                                        className="h-9 w-9 p-0 shrink-0"
+                                        onClick={() => setSearchExpanded(true)}
+                                        aria-label="Search nodes or stacks"
+                                    >
+                                        <Search className="w-4 h-4" />
+                                    </Button>
+                                </TooltipTrigger>
+                                <TooltipContent>Search nodes or stacks</TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
                     )}
                     <div className="w-40">
                         <Combobox
@@ -130,15 +137,21 @@ export function OverviewToolbar({
                             className="[&>button]:!bg-background"
                         />
                     </div>
-                    <Button
-                        variant="outline"
-                        size="sm"
-                        className="h-9 w-9 p-0 shrink-0"
-                        onClick={() => onPrefsChange({ sortDir: prefs.sortDir === 'asc' ? 'desc' : 'asc' })}
-                        title={prefs.sortDir === 'asc' ? 'Switch to descending' : 'Switch to ascending'}
-                    >
-                        <ArrowUpDown className={`w-4 h-4 ${prefs.sortDir === 'desc' ? 'rotate-180' : ''} transition-transform`} />
-                    </Button>
+                    <TooltipProvider>
+                        <Tooltip>
+                            <TooltipTrigger asChild>
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="h-9 w-9 p-0 shrink-0"
+                                    onClick={() => onPrefsChange({ sortDir: prefs.sortDir === 'asc' ? 'desc' : 'asc' })}
+                                >
+                                    <ArrowUpDown className={`w-4 h-4 ${prefs.sortDir === 'desc' ? 'rotate-180' : ''} transition-transform`} />
+                                </Button>
+                            </TooltipTrigger>
+                            <TooltipContent>{prefs.sortDir === 'asc' ? 'Switch to descending' : 'Switch to ascending'}</TooltipContent>
+                        </Tooltip>
+                    </TooltipProvider>
                     <Popover>
                         <PopoverTrigger asChild>
                             <Button
@@ -256,31 +269,43 @@ export function OverviewToolbar({
             />
 
             {onCheckUpdates && (
-                <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-9 gap-2 shrink-0"
-                    onClick={onCheckUpdates}
-                    disabled={checkingUpdates}
-                    title="Check for node updates"
-                    aria-label="Check for node updates"
-                >
-                    <RefreshCcwDot className={`w-4 h-4 ${checkingUpdates ? 'animate-spin' : ''}`} />
-                    Node Update
-                </Button>
+                <TooltipProvider>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                className="h-9 gap-2 shrink-0"
+                                onClick={onCheckUpdates}
+                                disabled={checkingUpdates}
+                                aria-label="Check for node updates"
+                            >
+                                <RefreshCcwDot className={`w-4 h-4 ${checkingUpdates ? 'animate-spin' : ''}`} />
+                                Node Update
+                            </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Check for node updates</TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
             )}
 
             {onAddNode && (
-                <Button
-                    variant="outline"
-                    size="sm"
-                    className="h-9 w-9 p-0 shrink-0"
-                    onClick={onAddNode}
-                    title="Manage nodes"
-                    aria-label="Manage nodes"
-                >
-                    <ChartNetwork className="w-4 h-4" strokeWidth={1.5} />
-                </Button>
+                <TooltipProvider>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <Button
+                                variant="outline"
+                                size="sm"
+                                className="h-9 w-9 p-0 shrink-0"
+                                onClick={onAddNode}
+                                aria-label="Manage nodes"
+                            >
+                                <ChartNetwork className="w-4 h-4" strokeWidth={1.5} />
+                            </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Manage nodes</TooltipContent>
+                    </Tooltip>
+                </TooltipProvider>
             )}
         </div>
     );