Skip to content

Plan 1b: Tauri mobile scaffolding + adaptive layout #173

@careck

Description

@careck

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

  • npm run tauri ios dev launches on iPad simulator
  • npm run tauri android dev launches on Android device
  • Phone layout: stack navigation works, bottom bar functional, tags sheet slides up
  • Tablet portrait: compact sidebar with draggable divider, hamburger menu works
  • Tablet landscape: full desktop-like layout with touch-friendly targets
  • iPad rotation: layout transitions between tablet portrait ↔ landscape
  • Desktop: zero regressions, native menu still works
  • All 7 locale files updated with new keys

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions