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.

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.

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