gsadmin/sencho
1
0
Fork 0
mirror of https://github.com/Studio-Saelix/sencho.git synced 2026-08-13 04:06:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: replace native title tooltips with Radix tooltips on Fleet toolbar

Browse Source 
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.
This commit is contained in:
SaelixCode
2026-07-03 19:13:37 -04:00
parent 9546334946
commit 244f10fcec
2 changed files with 101 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/FleetView.tsx
+35 -22
View File
@@ -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>
frontend/src/components/FleetView/OverviewToolbar.tsx
+66 -41
View File
@@ -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>
);