mirror of
https://github.com/jhbruhn/respira.git
synced 2026-01-27 10:23:41 +00:00
feature: Add shadcn Tooltips to AppHeader for better UX
- Migrated serial number tooltip from native title to shadcn Tooltip - Shows formatted machine details (serial, MAC, total stitches, service count) - Better multi-line formatting with proper spacing - Added tooltip to machine status badge - Shows state description explaining current status - Added tooltip to auto-refresh spinner - Shows "Auto-refreshing machine status" - Removed redundant title attributes - Disconnect button already has clear label - Error button has Popover for details Benefits: - Consistent tooltip styling across the app - Better accessibility with ARIA attributes - Improved readability with proper formatting - Better positioning and animations 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
Jan-Henrik Bruhn
parent
e1a64e9459
commit
8b6eb593d9
1 changed files with 167 additions and 135 deletions
|
|
@ -15,6 +15,12 @@ import {
|
|||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Popover, PopoverTrigger } from "@/components/ui/popover";
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipProvider,
|
||||
TooltipTrigger,
|
||||
} from "@/components/ui/tooltip";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export function AppHeader() {
|
||||
|
|
@ -61,6 +67,7 @@ export function AppHeader() {
|
|||
const StatusIcon = stateIcons[stateVisual.iconName];
|
||||
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<header className="bg-gradient-to-r from-primary-600 via-primary-700 to-primary-800 dark:from-primary-700 dark:via-primary-800 dark:to-primary-900 px-4 sm:px-6 lg:px-8 py-3 shadow-lg border-b-2 border-primary-900/20 dark:border-primary-800/30 flex-shrink-0">
|
||||
<div className="grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-4 lg:gap-8 items-center">
|
||||
{/* Machine Connection Status - Responsive width column */}
|
||||
|
|
@ -79,30 +86,49 @@ export function AppHeader() {
|
|||
Respira
|
||||
</h1>
|
||||
{isConnected && machineInfo?.serialNumber && (
|
||||
<span
|
||||
className="text-xs text-primary-200 cursor-help"
|
||||
title={`Serial: ${machineInfo.serialNumber}${
|
||||
machineInfo.macAddress
|
||||
? `\nMAC: ${machineInfo.macAddress}`
|
||||
: ""
|
||||
}${
|
||||
machineInfo.totalCount !== undefined
|
||||
? `\nTotal stitches: ${machineInfo.totalCount.toLocaleString()}`
|
||||
: ""
|
||||
}${
|
||||
machineInfo.serviceCount !== undefined
|
||||
? `\nStitches since service: ${machineInfo.serviceCount.toLocaleString()}`
|
||||
: ""
|
||||
}`}
|
||||
>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<span className="text-xs text-primary-200 cursor-help">
|
||||
• {machineInfo.serialNumber}
|
||||
</span>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent className="max-w-xs">
|
||||
<div className="text-sm space-y-1">
|
||||
<p className="font-semibold">
|
||||
Serial: {machineInfo.serialNumber}
|
||||
</p>
|
||||
{machineInfo.macAddress && (
|
||||
<p className="text-xs">
|
||||
MAC: {machineInfo.macAddress}
|
||||
</p>
|
||||
)}
|
||||
{machineInfo.totalCount !== undefined && (
|
||||
<p className="text-xs">
|
||||
Total stitches:{" "}
|
||||
{machineInfo.totalCount.toLocaleString()}
|
||||
</p>
|
||||
)}
|
||||
{machineInfo.serviceCount !== undefined && (
|
||||
<p className="text-xs">
|
||||
Stitches since service:{" "}
|
||||
{machineInfo.serviceCount.toLocaleString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
{isPolling && (
|
||||
<ArrowPathIcon
|
||||
className="w-3.5 h-3.5 text-primary-200 animate-spin"
|
||||
title="Auto-refreshing status"
|
||||
/>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<div>
|
||||
<ArrowPathIcon className="w-3.5 h-3.5 text-primary-200 animate-spin" />
|
||||
</div>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="text-xs">Auto-refreshing machine status</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-1 min-h-[32px]">
|
||||
|
|
@ -113,19 +139,25 @@ export function AppHeader() {
|
|||
size="sm"
|
||||
variant="outline"
|
||||
className="gap-1.5 bg-white/10 hover:bg-danger-600 text-primary-100 hover:text-white border-white/20 hover:border-danger-600 flex-shrink-0"
|
||||
title="Disconnect from machine"
|
||||
aria-label="Disconnect from machine"
|
||||
>
|
||||
<XMarkIcon className="w-3 h-3" />
|
||||
Disconnect
|
||||
</Button>
|
||||
<Tooltip>
|
||||
<TooltipTrigger asChild>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="gap-1.5 px-2.5 py-1.5 sm:py-1 text-sm font-semibold bg-white/20 text-white border-white/30 flex-shrink-0"
|
||||
className="gap-1.5 px-2.5 py-1.5 sm:py-1 text-sm font-semibold bg-white/20 text-white border-white/30 flex-shrink-0 cursor-help"
|
||||
>
|
||||
<StatusIcon className="w-3 h-3" />
|
||||
{machineStatusName}
|
||||
</Badge>
|
||||
</TooltipTrigger>
|
||||
<TooltipContent>
|
||||
<p className="text-xs">{stateVisual.description}</p>
|
||||
</TooltipContent>
|
||||
</Tooltip>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xs text-primary-200">Not Connected</p>
|
||||
|
|
@ -143,7 +175,6 @@ export function AppHeader() {
|
|||
? "animate-pulse hover:animate-none"
|
||||
: "invisible pointer-events-none",
|
||||
)}
|
||||
title="Click to view error details"
|
||||
aria-label="View error details"
|
||||
disabled={!(machineErrorMessage || pyodideError)}
|
||||
>
|
||||
|
|
@ -201,5 +232,6 @@ export function AppHeader() {
|
|||
</div>
|
||||
</div>
|
||||
</header>
|
||||
</TooltipProvider>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue