Skip to content

Navigation UX redesign: auto-hiding toolbar, natural-scroll nav, unified widget gestures #183

Description

@mairas

Navigation UX redesign (tracking)

Replace Skip's gesture-driven, undiscoverable navigation with a discoverable, robust model built on natural inputs, keeping edit mode. Full plan lives in the clone at _local/plans/2026-07-04-001-feat-navigation-ux-redesign-plan.md (not committed); this epic and its sub-issues carry the executable detail.

The model

  • One auto-hiding top toolbar (overlay, no permanent chrome) replaces both swipe-summoned sidenavs. Revealed by vertical scroll-up / swipe-up / wheel-up, or by tapping the transient edge-peek; cued by that edge-peek on any tap or mouse-move; hidden on scroll-down, tap-away, or idle. Auto-hides in edit mode too (never covers the top row being edited).
  • A persistent alarm badge — the single sanctioned exception to "no permanent chrome" — shows active alarms independent of the toolbar (safety).
  • Page navigation via horizontal two-finger scroll / swipe / wheel-deltaX, plus a persistent page-icon control in the toolbar (each page's assigned icon; tap to jump; no prev/next).
  • Widgets get exactly two gestures: long-press (locked → open history plot directly, non-core/unadvertised) and single-tap (edit → one action popup). Interactive widgets keep single-tap for their own control in locked mode.
  • Edit mode retained as the accidental-change guard.
  • Notifications downgraded; terminology + route shift to "page" (/dashboard/:id/page/:id with redirect; whole surface stays the "dashboard").

Retired: vertical-swipe page nav, double-tap, right-click, two-finger tap, click-drag mouse "swipe", top-edge pull-down, all permanent nav chrome (except the alarm badge).

Key decisions

  • Two input sources → shared intents: a dedicated wheel handler (deltaX→page, deltaY→toolbar) + repointed touch-swipe axes; both call one DashboardService nav API.
  • Reveal/peek handler is shell-level (not the grid's editor-gated GestureDirective), suppressed while isDragging; edge-peek is tappable to expand.
  • Horizontal wheel must be non-passive + preventDefault (blocks browser back/forward on macOS).
  • Vertical handler yields to scrollable widget content before revealing.
  • Persistent alarm badge = repurposed NotificationOverlayService, visible only while an alarm is active.
  • Nav methods are misnamed (not inverted pairs) + swipe/hotkey bindings disagree — fixed first, standalone (PR-0), with all direct callers (three iframe widgets) updated in lockstep and pinned tests re-pinned.
  • Terminology/route → "page" user-facing + route (+ redirect); wire-format key dashboards and TS identifiers unchanged (avoid a config migration).
  • Long-press → plot stays non-core, unadvertised, docs-only.

Requirements (from the brainstorm)

R1–R4 toolbar; R5 notifications downgrade + alarm badge; R6–R12 widget interaction; R13–R15 page nav; R16–R18 edit mode; R19–R22 cross-cutting (no critical action gesture-only — plot is the explicit exception; viewing/operating works without ever entering edit mode; natural not simulated gestures; keyboard accelerators surfaced).

Landing / PR strategy (one logical change per PR)

  • PR-0 — nav-semantics fix (standalone, first; de-risks the rest)
  • PR-1 — navigation chrome (toolbar, scroll-intent, page-icon control, notifications + alarm badge, hotkeys)
  • PR-2 — widget gestures + edit popup
  • PR-3 — terminology + route rename
  • PR-4 — dashboards-editor alignment (separable)

Sub-issues below track each PR.

Provenance

Brainstorm → plan → 6-persona document-review (findings applied; safety/design decisions resolved with the maintainer). Notable corrections folded in: the nav bug is misnamed methods + inconsistent bindings (not inverted pairs); three iframe widgets inject a swipe script coupled to the old nav model; widget-tutorial teaches retired gestures.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area:uxUX & interaction designenhancementNew feature or requesttrackingTracking / meta issue

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions