From 136ceff9629fd4d5b90ac2ede48ca05d40cce82e Mon Sep 17 00:00:00 2001 From: Usman Baig Date: Wed, 11 Mar 2026 23:47:52 +0100 Subject: [PATCH] feat: add dividers to period selector dropdown --- CHANGELOG.md | 1 + app/sites/[id]/page.tsx | 4 +++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 43636ae..0b632cd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), ### Improved - **Dashboard blocks are now consistent in height.** The Goals & Events and Scroll Depth panels now match the height of every other block on the dashboard. +- **Cleaner period picker.** The date range dropdown now has visual separators between the rolling windows (Today, Last 7 days, Last 30 days), the calendar periods (This week, This month), and Custom — so it's easy to tell them apart at a glance. - **New date range options.** The period selector now includes "This week" (Monday to today) and "This month" (1st to today) alongside the existing rolling windows. Your selection is remembered between sessions. - **Smarter comparison labels.** The "vs …" label under each stat now matches the period you're viewing — "vs yesterday" for today, "vs last week" for this week, "vs last month" for this month, and "vs previous N days" for rolling windows. - **Refreshed stat headers.** The Unique Visitors, Total Pageviews, Bounce Rate, and Visit Duration stats at the top of the chart have a new look — uppercase labels, the percentage change shown inline next to the number, and an orange underline on whichever metric you're currently graphing. diff --git a/app/sites/[id]/page.tsx b/app/sites/[id]/page.tsx index 9bb8a15..4392886 100644 --- a/app/sites/[id]/page.tsx +++ b/app/sites/[id]/page.tsx @@ -513,9 +513,11 @@ export default function SiteDashboardPage() { options={[ { value: 'today', label: 'Today' }, { value: '7', label: 'Last 7 days' }, - { value: 'week', label: 'This week' }, { value: '30', label: 'Last 30 days' }, + { value: 'divider-1', label: '', divider: true }, + { value: 'week', label: 'This week' }, { value: 'month', label: 'This month' }, + { value: 'divider-2', label: '', divider: true }, { value: 'custom', label: 'Custom' }, ]} />