PageSpeed monitoring, Polar billing, sidebar polish, frontend consistency audit #68

2026-03-23T19:05:28Z

uz1mani commented

2026-03-23 19:05:28 +00:00

(Migrated from github.com)

Summary

Full PageSpeed Insights page with score gauges, Core Web Vitals, diagnostics, filmstrip, manual checks, and trend charts
Billing frontend migrated from Stripe to Polar
Sidebar animations, mobile transitions, CSS tooltips, shimmer loading state
Frontend consistency audit: 55 files cleaned up (redundant dark: classes, shared date utils, missing error boundaries, empty state CTAs, dead
packages removed)
Dashboard content panel redesigned as rounded floating card

Changes

PageSpeed Insights (new feature)

Score gauges (Performance, Accessibility, Best Practices, SEO) with animated rings
Core Web Vitals cards (LCP, CLS, TBT, FCP, SI, TTI) with status thresholds
Diagnostics split by category with expandable audit items and element screenshots
Page load filmstrip between hero and metrics
Trend chart (visx) with mobile/desktop toggle and 90-day history
Manual check trigger with async polling
Frequency selector moved to site settings
Check history navigation with prev/next arrows

Billing

Frontend updated for Polar migration (replacing Stripe)

Sidebar & Layout

Sidebar: dynamic collapse label, favicon fallback, escape key, mobile exit animation, site picker entrance, hover nudge, CSS tooltips, shimmer SSR
placeholder
Dashboard shell: content panel as rounded card (bg-neutral-950, rounded-2xl, border), sidebar border-r removed — content panel's left border acts as
separator

Referrers

Unified icon/display name/favicon into single registry
Fixed t.co substring match on reddit.com
Replaced low-res Google favicon globe with proper icons

Illustrations

Added undraw illustrations to all empty state screens
Remapped SVG colors to dark theme palette
Home page empty state illustration

Frontend Consistency Audit

Extracted getThisWeekRange/getThisMonthRange to shared lib/utils/dateRanges.ts (removed 4 identical copies)
Added error boundaries for behavior, cdn, search, pagespeed pages
Added "View setup guide" CTA to empty states on journeys and behavior
Fixed non-lazy useState in funnel detail, settings header font size, PageSpeed skeleton loading
Removed 438 redundant dark: class prefixes (app is dark-mode only)
Removed dead @stripe/react-stripe-js, @stripe/stripe-js, and motion packages
Fixed motion/react imports → framer-motion (4 files)

Test Plan

PageSpeed page loads with score gauges and diagnostics
Manual check triggers and polls for results
Billing page shows Polar subscription details
Sidebar collapse/expand works, mobile menu opens/closes
Dashboard content panel has rounded corners with gap from sidebar
All empty states show illustrations and CTAs
No TypeScript errors (npx tsc --noEmit passes)
Build succeeds on Dokploy staging

## Summary - Full PageSpeed Insights page with score gauges, Core Web Vitals, diagnostics, filmstrip, manual checks, and trend charts - Billing frontend migrated from Stripe to Polar - Sidebar animations, mobile transitions, CSS tooltips, shimmer loading state - Frontend consistency audit: 55 files cleaned up (redundant dark: classes, shared date utils, missing error boundaries, empty state CTAs, dead packages removed) - Dashboard content panel redesigned as rounded floating card ## Changes ### PageSpeed Insights (new feature) - Score gauges (Performance, Accessibility, Best Practices, SEO) with animated rings - Core Web Vitals cards (LCP, CLS, TBT, FCP, SI, TTI) with status thresholds - Diagnostics split by category with expandable audit items and element screenshots - Page load filmstrip between hero and metrics - Trend chart (visx) with mobile/desktop toggle and 90-day history - Manual check trigger with async polling - Frequency selector moved to site settings - Check history navigation with prev/next arrows ### Billing - Frontend updated for Polar migration (replacing Stripe) ### Sidebar & Layout - Sidebar: dynamic collapse label, favicon fallback, escape key, mobile exit animation, site picker entrance, hover nudge, CSS tooltips, shimmer SSR placeholder - Dashboard shell: content panel as rounded card (bg-neutral-950, rounded-2xl, border), sidebar border-r removed — content panel's left border acts as separator ### Referrers - Unified icon/display name/favicon into single registry - Fixed t.co substring match on reddit.com - Replaced low-res Google favicon globe with proper icons ### Illustrations - Added undraw illustrations to all empty state screens - Remapped SVG colors to dark theme palette - Home page empty state illustration ### Frontend Consistency Audit - Extracted getThisWeekRange/getThisMonthRange to shared lib/utils/dateRanges.ts (removed 4 identical copies) - Added error boundaries for behavior, cdn, search, pagespeed pages - Added "View setup guide" CTA to empty states on journeys and behavior - Fixed non-lazy useState in funnel detail, settings header font size, PageSpeed skeleton loading - Removed 438 redundant dark: class prefixes (app is dark-mode only) - Removed dead @stripe/react-stripe-js, @stripe/stripe-js, and motion packages - Fixed motion/react imports → framer-motion (4 files) ## Test Plan - [x] PageSpeed page loads with score gauges and diagnostics - [x] Manual check triggers and polls for results - [x] Billing page shows Polar subscription details - [x] Sidebar collapse/expand works, mobile menu opens/closes - [x] Dashboard content panel has rounded corners with gap from sidebar - [x] All empty states show illustrations and CTAs - [x] No TypeScript errors (`npx tsc --noEmit` passes) - [x] Build succeeds on Dokploy staging

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: ciphera-net/pulse#68