Unify date controls behind a single range picker (#749)

The date controls had drifted into four different shapes across views — Analytics/Usage's preset + input selector, Activity's segmented control plus a separate prev/next navigator, Trends' inline labelled from/to plus a granularity group, and Insights' mode-coupled inputs. Same job, four costumes: three input heights, three preset vocabularies, two active-state styles.

This replaces all of them with one shared `RangePicker`: a popover trigger plus a segmented panel (Relative / Calendar / Custom). Every view renders the identical control. Behavior that isn't date *selection* (Activity's period stepping) lives inside the panel, so the toolbars look the same everywhere.

A small selection model (`rangeSelection.ts`) resolves any selection to the `from/to` or `preset/anchor` each store already consumes, so existing behavior is preserved rather than reimplemented:

- Analytics and Usage keep rolling-vs-pinned windows, the "All" (earliest-session) preset, and URL persistence.
- Activity keeps day/week/month period stepping (now inside the panel) and the future-step guard.
- Trends keeps its granularity and normalize controls, relocated out of the date toolbar into the chart panel's header as a minimal "Group by" dropdown — they sat next to the picker and collided with its Calendar tab's day/week/month.
- Insights keeps single-day selection (Calendar · Day, the common default) and its insight-type select; the bespoke mode-coupled date inputs are gone.

Out of scope by design: Analytics' chart granularity and Activity's bucket stay as their own controls. Folding every resolution toggle into one shared control is a possible follow-up.

Where to look: `frontend/src/lib/components/shared/RangePicker.svelte` (the control) and `rangeSelection.ts` (the selection model + date math). Each page's adapter is the small `rangeSelection` / `applyRange` block added to its `*Page.svelte`. `DateRangeSelector`, `RangeControl`, and `RangeNavigator` are deleted.


Co-authored-by: Phillip Cloud <cpcloud@users.noreply.github.com>

Author: cpcloud

frontend/src/lib/components/activity/ActivityPage.svelte

@@ -6,11 +6,15 @@
     type Automation,
   } from "../../stores/activity.svelte.js";
   import { events } from "../../stores/events.svelte.js";
+  import { sync } from "../../stores/sync.svelte.js";
   import RefreshControl from "../shared/RefreshControl.svelte";
   import ProjectTypeahead from "../layout/ProjectTypeahead.svelte";
   import { ChevronDownIcon } from "../../icons.js";
-  import RangeControl from "./RangeControl.svelte";
-  import RangeNavigator from "./RangeNavigator.svelte";
+  import RangePicker from "../shared/RangePicker.svelte";
+  import {
+    resolveRange,
+    type RangeSelection,
+  } from "../shared/rangeSelection.js";
   import SummaryCards from "./SummaryCards.svelte";
   import ConcurrencyTimeline from "./ConcurrencyTimeline.svelte";
   import SessionsTable from "./SessionsTable.svelte";
@@ -48,6 +52,32 @@
     slotFilter = null;
   });
 
+  const earliestSession = $derived(sync.stats?.earliest_session ?? null);
+  const today = $derived(localDateStr(new Date()));
+
+  // The activity store is the source of truth: day/week/month map to a calendar
+  // period anchored on `date`; custom maps to from/to. Relative windows have no
+  // native equivalent here, so applyRange resolves them to a pinned custom range.
+  const rangeSelection = $derived.by((): RangeSelection => {
+    if (activity.preset === "custom") {
+      return { mode: "custom", from: activity.from, to: activity.to };
+    }
+    return { mode: "calendar", unit: activity.preset, anchor: activity.date };
+  });
+
+  function applyRange(sel: RangeSelection) {
+    if (sel.mode === "calendar") {
+      activity.setPreset(sel.unit);
+      activity.setDate(sel.anchor);
+    } else {
+      const range = resolveRange(sel, earliestSession);
+      activity.setPreset("custom");
+      activity.setFrom(range.from);
+      activity.setTo(range.to);
+    }
+    activity.load();
+  }
+
   function onProjectSelect(value: string) {
     activity.setProject(value);
     activity.load();
@@ -95,8 +125,13 @@
 
 <div class="activity-page">
   <div class="activity-toolbar">
-    <RangeControl />
-    <RangeNavigator />
+    <RangePicker
+      selection={rangeSelection}
+      busy={activity.loading}
+      {earliestSession}
+      maxDate={today}
+      onSelect={applyRange}
+    />
 
     <ProjectTypeahead
       projects={activity.projects}