Improve top bar and main graph stats UI

[sanne-san]

Changes

Top bar

• Add consistent styling and spacing for all buttons in the top bar
• Move period arrows into the period picker visually instead of displaying them as separate buttons
• Add selected state to buttons; when dropdown is open, the trigger background is light gray. This is also true when comparison is enabled.
• Change filter button icon from magnifying glass to a filter icon
• Change period picker button icons from chevron on the right to calendar icons on the left
• Make top bar scroll horizontally on mobile

New options menu (⋮)

• Move interval picker, export button, imported data toggle and notices out of the graph and into a new options menu in the top bar
• Hide menu in realtime mode
• Render button immediately as a non-interactive placeholder on page load to prevent layout shift
• Change interval picker dropdown to a segmented control
• Change the imported data toggle to an actual toggle button
• Change notice icon + tooltip to an inline notice component
• The i keyboard shortcut now cycles through graph intervals rather than opening the dropdown menu – also when the options menu is closed

Top stats

• Change selected metric background highlight to a subtle background instead of a coloured underline on the label
• Refine stat labels and values typography and colors
• Ensure change arrows and percentages are shown also when in comparison mode (and removed from tooltip)
• Show "until HH:MM" when "Today" is the comparison date range to indicate a partial day

Code organisation

• Introduce a shared React context (DashboardOptionsProvider) to pass graph state (intervals, import settings) up to the top bar without prop drilling
• Move custom icons to a shared icons file
• Extract segmented control, toggle button and notice as reusable components
• Old standalone StatsExport, WithImportedSwitch, and NoticesIcon components removed; functionality consolidated into the options menu

Before and after:
https://github.com/user-attachments/assets/ec519314-629f-4034-87d9-9cded458f646

New options menu:

Tests

• Automated tests have been added

Changelog

• Entry has been added to changelog

Documentation

• Docs have been updated

Dark mode

• The UI has been tested both in dark and light mode

[github-actions]

Preview environment👷🏼‍♀️🏗️
PR-6245

[ukutaht]

Tested on preview. Feels great to me overall. A couple things I noticed while testing:

1. Date picker has uneven padding when arrows not shown

The padding looks good with arrows.

2. Date picker dropdown has some weirdness

I cannot close the dropdown by clicking outside of it just above the datepicker: https://cap.so/s/8dg13mgn12zk6bb

Also I cannot replicate this for some reason but once I did manage to get it into this state where the focus ring shows and does not look great

[ukutaht]

Don't want to get too much into small matters of taste, but I couldn't help but notice that in the new variant the 'current visitors' text looks noticeably heavier than the site domain:

As opposed to the current version where the domain is heavier than current visitors:

The new version looks a bit strange to me but I can't put my finger on why or justify it too much :) did you choose it deliberately and prefer it this way?