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>
This commit is contained in:
+35
-14
@@ -9,7 +9,7 @@ import { CodeBlock } from "../components/CodeBlock";
|
||||
|
||||
function Section({ title, description, children }: { title: string; description?: string; children: React.ReactNode }) {
|
||||
return (
|
||||
<Card className="p-4 sm:p-5">
|
||||
<Card className="min-w-0 p-4 sm:p-5">
|
||||
<h2 className="text-base font-semibold text-text">{title}</h2>
|
||||
{description && <p className="mb-4 mt-0.5 text-sm text-muted">{description}</p>}
|
||||
<div className={description ? "" : "mt-4"}>{children}</div>
|
||||
@@ -118,9 +118,11 @@ export function SettingsPage() {
|
||||
<div className="grid gap-5 lg:grid-cols-2">
|
||||
<Section title="Profile">
|
||||
<div className="space-y-3">
|
||||
<Input label="Username" value={user?.username ?? ""} disabled />
|
||||
<Input label="Username" value={user?.username ?? ""} disabled autoComplete="username" />
|
||||
<Input label="Display name" value={displayName} onChange={(e) => setDisplayName(e.target.value)} />
|
||||
<Button onClick={saveProfile}>Save profile</Button>
|
||||
<Button className="w-full sm:w-auto" onClick={saveProfile}>
|
||||
Save profile
|
||||
</Button>
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
@@ -129,17 +131,23 @@ export function SettingsPage() {
|
||||
<Input
|
||||
label="Current password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={curPw}
|
||||
onChange={(e) => setCurPw(e.target.value)}
|
||||
/>
|
||||
<Input
|
||||
label="New password"
|
||||
type="password"
|
||||
autoComplete="new-password"
|
||||
value={newPw}
|
||||
onChange={(e) => setNewPw(e.target.value)}
|
||||
hint="At least 8 characters."
|
||||
/>
|
||||
<Button onClick={savePassword} disabled={!curPw || newPw.length < 8}>
|
||||
<Button
|
||||
className="w-full sm:w-auto"
|
||||
onClick={savePassword}
|
||||
disabled={!curPw || newPw.length < 8}
|
||||
>
|
||||
Change password
|
||||
</Button>
|
||||
</div>
|
||||
@@ -165,8 +173,10 @@ export function SettingsPage() {
|
||||
onChange={(e) => setTotp(e.target.value.replace(/\D/g, "").slice(0, 6))}
|
||||
placeholder="123456"
|
||||
inputMode="numeric"
|
||||
autoComplete="one-time-code"
|
||||
pattern="[0-9]*"
|
||||
/>
|
||||
<div className="flex gap-2">
|
||||
<div className="flex gap-2 *:flex-1 sm:*:flex-none">
|
||||
<Button onClick={confirm2fa} disabled={totp.length !== 6}>
|
||||
Enable 2FA
|
||||
</Button>
|
||||
@@ -198,9 +208,11 @@ export function SettingsPage() {
|
||||
max={90}
|
||||
value={autoDeleteDays}
|
||||
onChange={(e) => setAutoDeleteDays(Number(e.target.value))}
|
||||
onMouseUp={() => saveAutoDelete(true, autoDeleteDays)}
|
||||
onTouchEnd={() => saveAutoDelete(true, autoDeleteDays)}
|
||||
// pointerup covers mouse, touch and pen in one handler.
|
||||
onPointerUp={() => saveAutoDelete(true, autoDeleteDays)}
|
||||
onKeyUp={() => saveAutoDelete(true, autoDeleteDays)}
|
||||
className="w-full accent-[var(--color-primary)]"
|
||||
aria-label="Retention window in days"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
@@ -208,13 +220,15 @@ export function SettingsPage() {
|
||||
</Section>
|
||||
|
||||
<Section title="Export your data" description="Download all your data (account, agents, requests, notifications) as JSON.">
|
||||
<a href={account.exportUrl} download>
|
||||
<Button variant="secondary">Download export</Button>
|
||||
<a href={account.exportUrl} download className="block sm:inline-block">
|
||||
<Button variant="secondary" className="w-full sm:w-auto">
|
||||
Download export
|
||||
</Button>
|
||||
</a>
|
||||
</Section>
|
||||
|
||||
<Section title="Danger zone" description="Permanently delete your account and all associated data. This cannot be undone.">
|
||||
<Button variant="danger" onClick={() => setDeleteOpen(true)}>
|
||||
<Button variant="danger" className="w-full sm:w-auto" onClick={() => setDeleteOpen(true)}>
|
||||
Delete account
|
||||
</Button>
|
||||
</Section>
|
||||
@@ -227,10 +241,10 @@ export function SettingsPage() {
|
||||
title="Disable 2FA"
|
||||
footer={
|
||||
<>
|
||||
<Button variant="ghost" onClick={() => setDisable2faOpen(false)}>
|
||||
<Button variant="ghost" className="flex-1 sm:flex-none" onClick={() => setDisable2faOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="danger" onClick={disable2fa}>
|
||||
<Button variant="danger" className="flex-1 sm:flex-none" onClick={disable2fa}>
|
||||
Disable
|
||||
</Button>
|
||||
</>
|
||||
@@ -239,6 +253,7 @@ export function SettingsPage() {
|
||||
<Input
|
||||
label="Confirm your password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={disablePw}
|
||||
onChange={(e) => setDisablePw(e.target.value)}
|
||||
/>
|
||||
@@ -251,10 +266,15 @@ export function SettingsPage() {
|
||||
title="Delete account"
|
||||
footer={
|
||||
<>
|
||||
<Button variant="ghost" onClick={() => setDeleteOpen(false)}>
|
||||
<Button variant="ghost" className="flex-1 sm:flex-none" onClick={() => setDeleteOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button variant="danger" onClick={deleteAccount} disabled={!deletePw}>
|
||||
<Button
|
||||
variant="danger"
|
||||
className="flex-1 sm:flex-none"
|
||||
onClick={deleteAccount}
|
||||
disabled={!deletePw}
|
||||
>
|
||||
Permanently delete
|
||||
</Button>
|
||||
</>
|
||||
@@ -268,6 +288,7 @@ export function SettingsPage() {
|
||||
<Input
|
||||
label="Confirm your password"
|
||||
type="password"
|
||||
autoComplete="current-password"
|
||||
value={deletePw}
|
||||
onChange={(e) => setDeletePw(e.target.value)}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user