Parent: #171 (Mobile support: iOS and Android via Tauri v2)
Depends on: Device ID migration (#172)
Summary
Scaffold Tauri iOS and Android targets from the existing krillnotes-desktop package and implement adaptive layout with three breakpoints: phone (stack navigation), tablet portrait (compact sidebar), and tablet landscape/desktop (full side-by-side).
Plan
See docs/superpowers/plans/2026-04-29-mobile-scaffolding-layout.md on the mobile branch.
Key Changes
Tauri Scaffolding
tauri ios init + tauri android init — generate platform projects
#[cfg(desktop)] guards on native menu, close_window, multi-window logic
- Mobile capabilities file
Adaptive Layout
useLayout() hook — returns "phone" | "tablet" | "desktop" based on viewport width
MobileNav.tsx — stack navigator for phone: full-screen tree ↔ full-screen note with slide transitions
BottomNavBar.tsx — phone bottom bar: Tree, Search, Tags (bottom sheet), More
TagCloudSheet.tsx — slide-up bottom sheet for tag cloud on phone
ToolbarMenu.tsx — hamburger menu (☰) replacing native menu on tablet/mobile
- WorkspaceView integration — layout-aware rendering, existing desktop unchanged
Touch UX
- Touch-enabled resizable panels (wider hit target, touch events)
- 44px minimum tap targets on tree nodes
- Long-press context menu (bottom sheet on phone, floating on tablet)
- Safe area padding (notch, dynamic island, home indicator)
- Swipe-back gesture on phone
i18n
- New keys across all 7 locale files for mobile UI elements
Target Devices
- Android phone (user's device)
- iPad (user's device)
- Desktop (regression testing)
Acceptance Criteria
Parent: #171 (Mobile support: iOS and Android via Tauri v2)
Depends on: Device ID migration (#172)
Summary
Scaffold Tauri iOS and Android targets from the existing
krillnotes-desktoppackage and implement adaptive layout with three breakpoints: phone (stack navigation), tablet portrait (compact sidebar), and tablet landscape/desktop (full side-by-side).Plan
See
docs/superpowers/plans/2026-04-29-mobile-scaffolding-layout.mdon themobilebranch.Key Changes
Tauri Scaffolding
tauri ios init+tauri android init— generate platform projects#[cfg(desktop)]guards on native menu,close_window, multi-window logicAdaptive Layout
useLayout()hook — returns"phone" | "tablet" | "desktop"based on viewport widthMobileNav.tsx— stack navigator for phone: full-screen tree ↔ full-screen note with slide transitionsBottomNavBar.tsx— phone bottom bar: Tree, Search, Tags (bottom sheet), MoreTagCloudSheet.tsx— slide-up bottom sheet for tag cloud on phoneToolbarMenu.tsx— hamburger menu (☰) replacing native menu on tablet/mobileTouch UX
i18n
Target Devices
Acceptance Criteria
npm run tauri ios devlaunches on iPad simulatornpm run tauri android devlaunches on Android device