feat(context): global network & time-range URL context bar

[Kvngcisco]

Overview

Adds a global network + time-range context to the Stellar Dev Dashboard and
persists it in the URL query string (#987). A new header context bar selects the
network and a time range (presets such as 24h/7d/30d/all, or a custom
from/to window). All changes are written to the URL, so links are shareable
and browser back/forward restores the previous context. Invalid hand-edited
values never break the page: parsing is total and falls back to documented
defaults with an inline explanation.

Related Issue

• Issue: [2026 UX] Add a global network and time-range context bar persisted in the URL #987
• Target area: layout header, analytics views

Changes

Context parsing & validation

• [ADD] src/lib/context/url-context.ts
  • React-free parser/serialiser for the URL contract ?network=…&range=… (+
    from/to for custom ranges).
  • parseDashboardContext() validates the network and range, substitutes
    defaults, and records issues (unknown-network, invalid-range,
    incomplete-custom-range, reversed-custom-range) — it never throws.
  • buildContextParams() merges the context into an existing query string
    (preserving unrelated/deep-link params) and drops stale from/to when the
    range is a preset.
  • resolveTimeRange() turns a preset/custom range into concrete start/end
    dates (including the unbounded all preset).

React context + header bar

• [ADD] src/context/DashboardContext.tsx

  • DashboardProvider / useDashboardContext(); URL is canonical via
    useSearchParams.
  • Writes use setSearchParams (push) so back/forward restores context.
  • Mirrors the URL network into store.setNetwork(), so every existing
    analytics/chart view that reads store.network follows the context.
  • Exposes resolvedRange and timeRangeLabel for views.

• [ADD] src/components/layout/ContextBar.tsx

  • Header control: network <select>, time-range preset buttons, a custom
    from/to date picker with inline validation, a reset action, and a
    role="status" message for invalid URL values.

• [ADD] src/components/layout/ContextScopeNotice.tsx

  • Shows the active context inside a view and clearly flags a view-level
    local override with a one-click Use global reset.

Wiring

• [MODIFY] src/App.tsx

  • Wraps the app in DashboardProvider (inside BrowserRouter, outside the
    error boundary).

• [MODIFY] src/routes/DashboardLayout.tsx

  • Renders <ContextBar /> in the header.
  • Preserves location.search when syncing the active tab to the URL, so
    switching views no longer drops the context params.

• [MODIFY] src/components/dashboard/Analytics.tsx

  • Consumes useDashboardContext(), renders ContextScopeNotice, and adds a
    view-scoped range override that is surfaced as a labelled local override.

• [MODIFY] src/components/dashboard/ChartsTab.tsx

  • Renders ContextScopeNotice so chart views make their context explicit.

Tests

• [ADD] src/lib/context/__tests__/url-context.test.ts
  • Primary flow (valid network + preset, round-trip serialisation),
    boundary cases (all, equal custom bounds, epoch bounds, case-insensitive
    values) and failure cases (unknown network, invalid range, missing /
    unparseable / reversed custom bounds, malformed input).
• [ADD] src/context/__tests__/DashboardContext.test.tsx
  • Provider hydration from the URL, store synchronisation, URL writes,
    back-navigation restoration and safe fallbacks.

Documentation

• [ADD] docs/CONTEXT_BAR.md — full URL contract, validation/fallback table,
  consumption guidance, compatibility/migration/security notes and test
  instructions.
• [MODIFY] README.md — user-facing section for the global context.
• [MODIFY] docs/ROUTING.md — global context section + testing notes.

Verification Results

Implementation was produced through the GitHub REST API (no local clone of the
dashboard repo), so the repository's pnpm/Vitest suite could not be executed
here. Verification performed:

• Syntax: every added/changed .ts/.tsx file compiles cleanly with
  esbuild --loader:.ts=ts --loader:.tsx=tsx (no parse errors).
• Pure logic: src/lib/context/url-context.ts was transpiled and executed
  against a standalone assertion script covering the primary, boundary and
  failure cases listed below — all passed.
• No new dependencies / lockfile untouched (uses react-router-dom and
  vitest, both already present).

Tests added for the primary flow, at least one boundary case and at least one
failure case (run them with
pnpm run test -- src/lib/context/__tests__/url-context.test.ts src/context/__tests__/DashboardContext.test.tsx).

Acceptance Criterion	Status
Header context bar for network + time range (presets and custom), synced to URL query params	Implemented — ContextBar + DashboardProvider (?network, ?range, ?from, ?to)
All analytics/chart views read from the context; local overrides shown clearly	Network is mirrored into the store used by every view; Analytics and ChartsTab consume the shared context and ContextScopeNotice labels local overrides
Back/forward navigation restores context	Implemented — context mutations push history; provider reads from useSearchParams; covered by DashboardContext.test.tsx
Tests cover URL parsing of invalid ranges and unknown networks	url-context.test.ts failure cases for unknown-network, invalid-range, incomplete-custom-range, reversed-custom-range
Automated tests cover primary flow, a boundary case, and a failure case	Both new test files
User-facing / developer documentation updated, incl. compatibility, security, migration notes	docs/CONTEXT_BAR.md, README.md, docs/ROUTING.md

Note: CI (lint, tsc --noEmit, Vitest) has not been run locally against the
dashboard repo; the changes were written to match existing patterns and are
expected to be validated by the repository's pipelines.

Closes #987

[vercel]

@Kvngcisco is attempting to deploy a commit to the nanle-code's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@Kvngcisco Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits