feat(ui): make the UI feel native on mobile

Reworks the frontend around phone-first interaction patterns and makes the app installable to a home screen. Shell - Bottom tab bar (Home / Requests / Agents / Alerts / Settings) below `md`, with the unread badge moved onto the Alerts tab; the bell stays on desktop. - Account menu opens as a bottom sheet on phones, dropdown on desktop. - Safe-area insets throughout: `viewport-fit=cover` plus `env(safe-area-inset-*)` on the sticky header, tab bar and sheet footers. Sheets - New `Sheet` primitive: drag-to-dismiss bottom sheet on phones, centred dialog from `sm` up. `Modal` now delegates to it, so every dialog inherits the gesture, the scroll lock and the safe-area padding. - Portalled to `<body>` — an ancestor with a transform (the page fade-in) was otherwise becoming the containing block and displacing the fixed overlay. - Scroll lock pins `<body>` and restores position, which iOS needs; plain `overflow: hidden` still rubber-bands there. - `ConfirmSheet` replaces `window.confirm` for destructive actions. Screens - Request detail gets a sticky decision bar above the tab bar; the sidebar decision card is now desktop-only. - Requests state filter becomes a swipeable pill row instead of a select. - Agent cards show two primary actions plus an overflow sheet on phones. - Diffs and code blocks contain their horizontal overscroll so a sideways swipe no longer triggers browser back; diffs gain a line-wrap toggle. - `min-w-0` on grid tracks — items default to `min-width: auto`, so truncated meta lines were widening columns past the viewport at 320px. Touch and input - 44px minimum touch targets, `:active` press feedback, no tap highlight. - 16px inputs on coarse pointers so iOS stops zooming on focus. - autocomplete/inputmode hints so password managers and keyboards behave. - `overscroll-behavior-y: none` disables pull-to-refresh; motion respects `prefers-reduced-motion`. PWA - Manifest, generated app icons (192/512/apple-touch) and standalone display metadata, so the app installs to a home screen without browser chrome. - Backend serves `.webmanifest` as `application/manifest+json`; rjweb's type map has no entry for it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-01 00:43:48 +02:00
parent 5ddb56ef97
commit 0c49b132ee
32 changed files with 1892 additions and 567 deletions
@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+	<defs>
+		<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
+			<stop offset="0" stop-color="#172038" />
+			<stop offset="1" stop-color="#0a0e17" />
+		</linearGradient>
+		<radialGradient id="glow" cx="0.5" cy="0.5" r="0.5">
+			<stop offset="0" stop-color="#6d8bff" stop-opacity="0.28" />
+			<stop offset="1" stop-color="#6d8bff" stop-opacity="0" />
+		</radialGradient>
+	</defs>
+	<rect width="512" height="512" rx="113" fill="url(#bg)" />
+	<rect width="512" height="512" rx="113" fill="url(#glow)" />
+	<path
+		d="M141 264 L223 344 L376 172"
+		fill="none"
+		stroke="#8aa4ff"
+		stroke-width="100"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>
@@ -0,0 +1,24 @@
+{
+	"name": "PatchPass",
+	"short_name": "PatchPass",
+	"description": "A human approval layer for AI agents. Review changes, approve intent, let agents proceed.",
+	"start_url": "/",
+	"scope": "/",
+	"display": "standalone",
+	"display_override": ["standalone", "minimal-ui"],
+	"orientation": "any",
+	"background_color": "#0a0e17",
+	"theme_color": "#0a0e17",
+	"categories": ["developer", "productivity", "utilities"],
+	"icons": [
+		{ "src": "/icon-192.png", "sizes": "192x192", "type": "image/png", "purpose": "any" },
+		{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any" },
+		{ "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" },
+		{ "src": "/icon.svg", "sizes": "any", "type": "image/svg+xml", "purpose": "any" }
+	],
+	"shortcuts": [
+		{ "name": "Awaiting review", "url": "/", "description": "Requests waiting for your review" },
+		{ "name": "All requests", "url": "/requests", "description": "Full change request history" },
+		{ "name": "Agents", "url": "/agents", "description": "Manage your agents and API keys" }
+	]
+}