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

@@ -1,6 +1,7 @@
'use client'
import { formatNumber } from '@ciphera-net/ui'
import { Files } from '@phosphor-icons/react'
import type { FrustrationByPage } from '@/lib/api/stats'
interface FrustrationByPageTableProps {
@@ -96,9 +97,15 @@ export default function FrustrationByPageTable({ pages, loading }: FrustrationBy
</div>
</div>
) : (
<div className="flex flex-col items-center justify-center text-center px-6 py-8 gap-3">
<p className="text-sm text-neutral-500 dark:text-neutral-400">
No frustration signals detected in this period
<div className="flex flex-col items-center justify-center text-center px-6 py-8 gap-4 min-h-[200px]">
<div className="rounded-full bg-neutral-100 dark:bg-neutral-800 p-4">
<Files className="w-8 h-8 text-neutral-500 dark:text-neutral-400" />
</div>
<h4 className="font-semibold text-neutral-900 dark:text-white">
No frustration signals detected
</h4>
<p className="text-sm text-neutral-500 dark:text-neutral-400 max-w-md">
Page-level frustration data will appear here once rage clicks or dead clicks are detected on your site.
</p>
</div>
)}