mirror of
https://github.com/tiennm99/ccs.git
synced 2026-09-03 04:17:54 +00:00
fix(analytics): collapse profile-scope disclaimer into tooltip icon
The disclaimer paragraph rendered as a two-line block under the controls row, eating vertical real-estate while the cards stayed empty. Replace it with a small Info icon beside the profile dropdown that surfaces the same copy in a tooltip on hover/focus. - Same copy preserved verbatim; no informational loss - Icon only renders when a non-All profile is selected - Reclaims ~32px of vertical space on the analytics header Closes #1390
This commit is contained in:
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
@@ -15,8 +15,9 @@ import {
|
|||||||
SelectTrigger,
|
SelectTrigger,
|
||||||
SelectValue,
|
SelectValue,
|
||||||
} from '@/components/ui/select';
|
} from '@/components/ui/select';
|
||||||
import { RefreshCw } from 'lucide-react';
|
import { Info, RefreshCw } from 'lucide-react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
|
||||||
import type { AnalyticsProfileOption } from '../hooks';
|
import type { AnalyticsProfileOption } from '../hooks';
|
||||||
|
|
||||||
interface AnalyticsHeaderProps {
|
interface AnalyticsHeaderProps {
|
||||||
@@ -53,21 +54,42 @@ export function AnalyticsHeader({
|
|||||||
<p className="text-sm text-muted-foreground">{t('analytics.subtitle')}</p>
|
<p className="text-sm text-muted-foreground">{t('analytics.subtitle')}</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex flex-wrap items-center gap-2 xl:justify-end">
|
<div className="flex flex-wrap items-center gap-2 xl:justify-end">
|
||||||
<Select value={selectedProfile} onValueChange={onProfileChange}>
|
<div className="flex items-center gap-1">
|
||||||
<SelectTrigger className="h-8 w-[190px]" aria-label="Analytics profile">
|
<Select value={selectedProfile} onValueChange={onProfileChange}>
|
||||||
<SelectValue placeholder="All profiles" />
|
<SelectTrigger className="h-8 w-[190px]" aria-label="Analytics profile">
|
||||||
</SelectTrigger>
|
<SelectValue placeholder="All profiles" />
|
||||||
<SelectContent>
|
</SelectTrigger>
|
||||||
{profileOptions.map((option) => (
|
<SelectContent>
|
||||||
<SelectItem key={option.value} value={option.value} disabled={!option.supported}>
|
{profileOptions.map((option) => (
|
||||||
<span className="flex flex-col">
|
<SelectItem key={option.value} value={option.value} disabled={!option.supported}>
|
||||||
<span>{option.label}</span>
|
<span className="flex flex-col">
|
||||||
<span className="text-xs text-muted-foreground">{option.description}</span>
|
<span>{option.label}</span>
|
||||||
</span>
|
<span className="text-xs text-muted-foreground">{option.description}</span>
|
||||||
</SelectItem>
|
</span>
|
||||||
))}
|
</SelectItem>
|
||||||
</SelectContent>
|
))}
|
||||||
</Select>
|
</SelectContent>
|
||||||
|
</Select>
|
||||||
|
{selectedProfile !== 'all' && (
|
||||||
|
<TooltipProvider delayDuration={150}>
|
||||||
|
<Tooltip>
|
||||||
|
<TooltipTrigger asChild>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
aria-label="Selected-profile analytics scope"
|
||||||
|
className="inline-flex size-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||||
|
>
|
||||||
|
<Info className="size-4" aria-hidden="true" />
|
||||||
|
</button>
|
||||||
|
</TooltipTrigger>
|
||||||
|
<TooltipContent side="bottom" align="start" className="max-w-xs text-xs">
|
||||||
|
Selected-profile analytics include only default/account data with stable profile
|
||||||
|
attribution. CLIProxy and native runtime snapshots remain in All profiles.
|
||||||
|
</TooltipContent>
|
||||||
|
</Tooltip>
|
||||||
|
</TooltipProvider>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
<Button
|
<Button
|
||||||
variant={viewMode === 'hourly' ? 'default' : 'outline'}
|
variant={viewMode === 'hourly' ? 'default' : 'outline'}
|
||||||
size="sm"
|
size="sm"
|
||||||
@@ -106,12 +128,6 @@ export function AnalyticsHeader({
|
|||||||
<RefreshCw className={`w-3.5 h-3.5 ${isRefreshing ? 'animate-spin' : ''}`} />
|
<RefreshCw className={`w-3.5 h-3.5 ${isRefreshing ? 'animate-spin' : ''}`} />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
{selectedProfile !== 'all' && (
|
|
||||||
<p className="text-xs text-muted-foreground xl:text-right">
|
|
||||||
Selected-profile analytics include only default/account data with stable profile
|
|
||||||
attribution. CLIProxy and native runtime snapshots remain in All profiles.
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user