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:
@@ -18,6 +18,7 @@ import {
|
||||
import FrustrationSummaryCards from '@/components/behavior/FrustrationSummaryCards'
|
||||
import FrustrationTable from '@/components/behavior/FrustrationTable'
|
||||
import FrustrationByPageTable from '@/components/behavior/FrustrationByPageTable'
|
||||
import FrustrationTrend from '@/components/behavior/FrustrationTrend'
|
||||
import { useDashboard } from '@/lib/swr/dashboard'
|
||||
|
||||
const ScrollDepth = dynamic(() => import('@/components/dashboard/ScrollDepth'))
|
||||
@@ -91,8 +92,9 @@ export default function BehaviorPage() {
|
||||
}, [fetchData])
|
||||
|
||||
useEffect(() => {
|
||||
document.title = 'Behavior | Pulse'
|
||||
}, [])
|
||||
const domain = dashboard?.site?.domain
|
||||
document.title = domain ? `Behavior · ${domain} | Pulse` : 'Behavior | Pulse'
|
||||
}, [dashboard?.site?.domain])
|
||||
|
||||
const fetchAllRage = useCallback(
|
||||
() => getRageClicks(siteId, dateRange.start, dateRange.end, 100),
|
||||
@@ -181,12 +183,13 @@ export default function BehaviorPage() {
|
||||
{/* By page breakdown */}
|
||||
<FrustrationByPageTable pages={byPage} loading={loading} />
|
||||
|
||||
{/* Scroll depth */}
|
||||
{/* Scroll depth + Frustration trend */}
|
||||
<div className="grid gap-6 lg:grid-cols-2 mb-8">
|
||||
<ScrollDepth
|
||||
goalCounts={dashboard?.goal_counts ?? []}
|
||||
totalPageviews={dashboard?.stats?.pageviews ?? 0}
|
||||
/>
|
||||
<FrustrationTrend summary={summary} loading={loading} />
|
||||
</div>
|
||||
|
||||
<DatePicker
|
||||
|
||||
Reference in New Issue
Block a user