Skip to content
Tasuku

Mobile Shell & Navigation

The mobile experience (S16, specs 014–016) layers a navigation shell over the same islands and data, giving a single-screen-at-a-time flow on small viewports.

The diagram below shows the nav helpers, the mobile components, and the desktop islands/data path they reuse.

flowchart TD
  Shell["AppShell.astro<br/>(prerendered shell)"]
  Nav["MobileNav.tsx<br/>(nav shell)"]
  Back["MobileBackButton.tsx<br/>TaskScreenBack.tsx"]
  Screen["screen.ts<br/>(deriveScreen)"]
  Url["url.ts<br/>(scope ↔ URL)"]
  BackEvt["back-event.ts<br/>(tasuku:nav-back)"]
  Islands["TaskCollection / TaskDetailPanel / ListCollection"]
  Dexie[("Dexie cache")]

  Shell --> Nav
  Shell --> Islands
  Nav --> Screen
  Screen --> Url
  Back -->|requestMobileBack| BackEvt
  BackEvt --> Nav
  Islands -->|liveQuery| Dexie
Section titled “Navigation model”
  • src/lib/nav/screen.ts — deriveScreen(selection) maps the current selection to a mobile screen; src/lib/nav/url.ts — parseScopeFromSearch, urlForScope, scopeEquals keep scope in the URL so navigation is shareable/back-able.
  • src/lib/nav/back-event.ts — a NAV_BACK_EVENT (tasuku:nav-back) + requestMobileBack() decouple back gestures from components.

Components

Section titled “Components”
  • MobileNav.tsx — bottom/section navigation shell (S16 Epic A).
  • MobileBackButton.tsx / TaskScreenBack.tsx — back affordances for list → task-list → task-detail drill-down (S16 Epics C/D), driven by the back event.
  • The shell reuses the desktop islands (TaskCollection, TaskDetailPanel, ListCollection) and the same offline data path; it changes layout/navigation, not the domain or sync model.

src/layouts/AppShell.astro is the prerendered shell both desktop and mobile hydrate into.

The sequence below traces a back gesture from MobileBackButton.tsx through the nav event to screen derivation.

sequenceDiagram
  participant User
  participant Back as MobileBackButton.tsx
  participant Evt as back-event.ts
  participant Nav as MobileNav.tsx
  participant Screen as screen.ts
  participant Url as url.ts
  User->>Back: tap back
  Back->>Evt: requestMobileBack()
  Evt-->>Nav: tasuku:nav-back
  Nav->>Screen: deriveScreen(selection)
  Screen->>Url: urlForScope(scope)
  Url-->>Nav: updated URL / screen

Related: Astro Pages & Islands, List Sidebar & Drag-Drop, Client Sync & Steps Islands.