Mobile: the native apps on a phone — one tap, one pane, pinch, and a self-updating PWA

[AllTerrainDeveloper]

Why

The phone layer (#739, #746, #747) puts every window full-screen, but the apps inside still assumed a desk: double-click to open, two-pane splits, pinned columns, 32px insets, a Corkboard that only zoomed with a wheel. And two gaps in the layer itself made the shell feel stuck: closing the last app left an empty "Open apps" sheet over a hidden home, and an installed app on an iPhone never learned about a new release without being deleted and reinstalled.

What

Phone layer

• The switcher closes itself when its last card is closed; home shows. Opening it from an empty home still shows the empty message.
• Both edges carry a zone that cancels the touchstart behind the browser's history swipe (mobile Safari, Chrome for Android), on home too. Pointer Events are unaffected, so the edge-Back gesture keeps working.
• The home grid is always a scroller by one pixel (.os-mobile-home__content), so a screen that fits gets the platform's own rubber band. No JS tracking.

Installed app — how a release reaches it

• includes/pwa.php puts OPENSTATION_VERSION in the self.__OS_SW_CONFIG preamble, so a release is a byte change in the served worker even when nothing under src/pwa/ changed (the bundle itself is content-hashed on purpose).
• src/pwa/sw-register.ts calls registration.update() whenever the page comes back to the foreground (visibilitychange, pageshow), at most once every five minutes and never while hidden. The existing controllerchange handler reloads once. New section in docs/pwa.md.

Apps

• Corkboard pinches: two fingers zoom about their midpoint and pan with it (src/content-graph/pinch.ts, the wheel's anchoring). The canvas takes touch-action: none; a finger lifting off a pinch is not a tap on the node it rested on.
• WP Explorer opens on one tap on a phone (mode stamp) or under a coarse primary pointer: rows, tiles, folder tiles, dossier relation tiles. Modifier clicks still only select; an item with no editor still opens its pane.
• Code Blue page-scrolls as one surface under 640px instead of pinning toolbar, tiles and chart around a 120px issue list.
• Preferences swaps the sidebar for an <os-select> of the same pages under 640px (both bind tab; the strip stays in the DOM to drive the panes) and drops the pane inset from 32px to 12px.
• Posts, Pages, Users offer the status filter as an <os-select> on a phone (src/posts-window/status-control.ts, same data attribute, same os-pick), wrap the toolbar, and show title + date (users: name, role, actions). Trimming runs after the hidden-column preference and the columns filter, so nothing is hidden on the desk.
• Plugins shows name, status, actions on a phone with no sticky column; the search takes its own row.
• Comments shows one pane at a time under 720px: the list, then the conversation on a tap, with a Back control in its head; the five tabs become an <os-select> with the counts in the labels. The @media (max-width: 720px) rule that hid the rail outright is replaced by a container query.

Tests

New: sw-register-resume, content-graph-pinch, posts-window-status-control; extended: mobile-layer, mobile-gestures, os-settings.test.ts, list-table.test.ts, openStationPwaAdminAssetCache.php. npm run typecheck, lint, test:js (455 files), lint:php, the PHPUnit class and npm run build are green.

Unverified on device

The history-swipe guard relies on cancelling touchstart at the edge zones, which is the documented way to suppress Safari's gesture but has not been tried on a real iPhone here. Please test it first.

🤖 Generated with Claude Code