feat: polish behavior page UI with 8 improvements

- Add column headers to rage/dead click tables
- Rich empty states with icons matching dashboard pattern
- Add frustration trend comparison chart (current vs previous period)
- Show "New" badge instead of misleading "+100%" when previous period is 0
- Click-to-copy on CSS selectors with toast feedback
- Normalize min-height to 270px for consistent card sizing
- Fix page title to include site domain (Behavior · domain | Pulse)
- Add "last seen" column with relative timestamps
This commit is contained in:
Usman Baig
2026-03-12 18:03:22 +01:00
parent 585f37f444
commit 2f01be1c67
5 changed files with 256 additions and 29 deletions

View File

@@ -7,16 +7,23 @@ interface FrustrationSummaryCardsProps {
loading: boolean
}
function pctChange(current: number, previous: number): number | null {
function pctChange(current: number, previous: number): { type: 'pct'; value: number } | { type: 'new' } | null {
if (previous === 0 && current === 0) return null
if (previous === 0) return 100
return Math.round(((current - previous) / previous) * 100)
if (previous === 0) return { type: 'new' }
return { type: 'pct', value: Math.round(((current - previous) / previous) * 100) }
}
function ChangeIndicator({ change }: { change: number | null }) {
function ChangeIndicator({ change }: { change: ReturnType<typeof pctChange> }) {
if (change === null) return null
const isUp = change > 0
const isDown = change < 0
if (change.type === 'new') {
return (
<span className="text-xs font-medium bg-brand-orange/10 text-brand-orange px-1.5 py-0.5 rounded">
New
</span>
)
}
const isUp = change.value > 0
const isDown = change.value < 0
return (
<span
className={`text-xs font-medium ${
@@ -27,7 +34,7 @@ function ChangeIndicator({ change }: { change: number | null }) {
: 'text-neutral-500 dark:text-neutral-400'
}`}
>
{isUp ? '+' : ''}{change}%
{isUp ? '+' : ''}{change.value}%
</span>
)
}