feat: good mobile view - Phase 2 - main application

[jherforth]

Easy calendar. Quick access to chores. No 12 grid squares. No photos. Plug-ins set to screen width.

Questions?

[jherforth]

Architecture designed — see docs/architecture/mobile-experience.md

Full design doc: docs/architecture/mobile-experience.md (lands with the next push). Summary below.

The core idea: one fork, total reuse

app.jsx already separates what to render (the per-tab widgets array — self-contained components) from how to lay it out (<WidgetContainer>, the react-grid-layout 12-column grid). The mobile experience is a single isMobile ? branch at that seam:

{isMobile ? <MobileDashboard … /> : <WidgetContainer … />}

• Detection = the existing Phase 1 primitive useIsMobile (<600px), same "pixel-identical at ≥600px" guarantee — the kiosk experience cannot change, because the grid/drag/resize/lock/screensaver code never even mounts on mobile.
• All widgets (Chore/Calendar/Weather/plugins) are reused as-is; they already fill 100% of their container. No server changes — the per-device settings model covers everything.

How each requirement is met

Requirement	How
No 12 grid squares	MobileDashboard renders each tab's widgets as a vertical scroll stack; grid metadata ignored; grid code not mounted
Quick access to chores	Fixed stack order: chores first, then calendar, weather, plugins
Easy calendar	Calendar defaults to the existing week view on mobile (already touch-friendly); agenda/list view deferred to a later phase
No photos	Photo widget hard-excluded on mobile even if enabled (kiosk ambient feature); /photos upload page untouched
Plug-ins set to screen width	Plugin iframes render full-width at a fixed height (~60vh initial; per-plugin height possible later)

Decisions made (with Jason)

1. Tabs stay on mobile — dock tab switcher works as on kiosk; each tab stacks its assigned widgets.
2. First-run auto-defaults — a phone is its own device (new UUID → empty welcome screen today). On mobile first-run the client seeds chores + calendar + weather onto the Home tab automatically; adjustable in Settings afterward.
3. Week view = "easy calendar" v1; dedicated agenda view is Phase 2c.

Phasing

• 2a (core of this issue): MobileDashboard + fork, ordered stack, photos exclusion, plugin full-width, first-run defaults, hide Move/Resize in the dock on mobile.
• 2b: calendar week-default, 360px spacing/typography polish in both themes.
• 2c (out of scope here): agenda calendar view, swipe between tabs, PWA install, mobile chore-sound policy.

Verification will follow the Phase 1 playbook: Playwright walk at 360×740 for the mobile path + a ≥600px kiosk regression check.