Files
patchpass/UI/public/icon.svg
T
space 0c49b132ee
Deploy / Build (pull_request) Successful in 49s
Deploy / Build and Push Docker Image (pull_request) Has been skipped
Deploy / Test & Lint (pull_request) Successful in 34s
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

721 B