space
0c49b132ee
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>
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import { useEffect } from "react";
|
|
|
|
// `overflow: hidden` on <body> is not enough on iOS Safari — the page still
|
|
// rubber-bands behind the overlay. Pinning the body and restoring scroll on
|
|
// release is the only approach that holds across engines.
|
|
|
|
let locks = 0;
|
|
let savedScrollY = 0;
|
|
let saved: Partial<CSSStyleDeclaration> = {};
|
|
|
|
function lock() {
|
|
if (locks++ > 0) return;
|
|
const body = document.body;
|
|
savedScrollY = window.scrollY;
|
|
saved = {
|
|
position: body.style.position,
|
|
top: body.style.top,
|
|
left: body.style.left,
|
|
right: body.style.right,
|
|
width: body.style.width,
|
|
overflow: body.style.overflow,
|
|
};
|
|
body.style.position = "fixed";
|
|
body.style.top = `-${savedScrollY}px`;
|
|
body.style.left = "0";
|
|
body.style.right = "0";
|
|
body.style.width = "100%";
|
|
body.style.overflow = "hidden";
|
|
}
|
|
|
|
function unlock() {
|
|
if (--locks > 0) return;
|
|
locks = 0;
|
|
Object.assign(document.body.style, saved);
|
|
window.scrollTo(0, savedScrollY);
|
|
}
|
|
|
|
export function useScrollLock(active: boolean) {
|
|
useEffect(() => {
|
|
if (!active) return;
|
|
lock();
|
|
return unlock;
|
|
}, [active]);
|
|
}
|