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:
+50
-32
@@ -3,9 +3,10 @@ import { Link } from "react-router-dom";
|
||||
import { requests as requestsApi, agents as agentsApi } from "../api/client";
|
||||
import type { Agent, ChangeRequest, RequestState } from "../api/types";
|
||||
import { useNotifications } from "../context/NotificationsContext";
|
||||
import { Card, EmptyState, PageHeader, Spinner } from "../components/ui";
|
||||
import { Card, EmptyState, PageHeader, Spinner, textLinkClass } from "../components/ui";
|
||||
import { StateBadge } from "../components/StateBadge";
|
||||
import { AgentAvatar } from "../components/AgentAvatar";
|
||||
import { ChevronRightIcon } from "../components/icons";
|
||||
import { expiresIn, relativeTime } from "../utils";
|
||||
|
||||
const summaryTiles: { state: RequestState; label: string }[] = [
|
||||
@@ -56,20 +57,25 @@ export function DashboardPage() {
|
||||
subtitle="Requests awaiting your review, and your connected agents."
|
||||
/>
|
||||
|
||||
<div className="mb-8 grid grid-cols-2 gap-3 sm:grid-cols-4">
|
||||
<div className="mb-7 grid grid-cols-2 gap-2.5 sm:mb-8 sm:grid-cols-4 sm:gap-3">
|
||||
{summaryTiles.map((t) => (
|
||||
<Card key={t.state} className="p-4">
|
||||
<p className="text-3xl font-bold text-text">{counts[t.state] ?? 0}</p>
|
||||
<p className="mt-1 text-xs text-muted">{t.label}</p>
|
||||
<Card key={t.state} className="p-3.5 sm:p-4">
|
||||
<p className="text-2xl font-bold text-text tabular-nums sm:text-3xl">
|
||||
{counts[t.state] ?? 0}
|
||||
</p>
|
||||
<p className="mt-0.5 text-xs text-muted sm:mt-1">{t.label}</p>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-8 lg:grid-cols-3">
|
||||
<div className="lg:col-span-2">
|
||||
{/* min-w-0 on both tracks: grid items default to min-width:auto, so the
|
||||
truncated meta lines below would otherwise widen the column past the
|
||||
viewport on narrow phones. */}
|
||||
<div className="grid gap-7 lg:grid-cols-3 lg:gap-8">
|
||||
<div className="min-w-0 lg:col-span-2">
|
||||
<div className="mb-3 flex items-center justify-between gap-3">
|
||||
<h2 className="text-lg font-semibold">Awaiting review</h2>
|
||||
<Link to="/requests" className="text-sm text-primary hover:underline">
|
||||
<Link to="/requests" className={textLinkClass}>
|
||||
View all →
|
||||
</Link>
|
||||
</div>
|
||||
@@ -80,7 +86,7 @@ export function DashboardPage() {
|
||||
subtitle="No requests are waiting for your review right now."
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2.5">
|
||||
{pending.map((r) => (
|
||||
<PendingRow key={r.request_id} request={r} />
|
||||
))}
|
||||
@@ -88,15 +94,19 @@ export function DashboardPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="min-w-0">
|
||||
<div className="mb-3 flex items-center justify-between gap-3">
|
||||
<h2 className="text-lg font-semibold">Agents</h2>
|
||||
<Link to="/agents" className="text-sm text-primary hover:underline">
|
||||
<Link to="/agents" className={textLinkClass}>
|
||||
Manage →
|
||||
</Link>
|
||||
</div>
|
||||
{agents.length === 0 ? (
|
||||
<EmptyState icon="🤖" title="No agents yet" subtitle="Create an agent to start receiving requests." />
|
||||
<EmptyState
|
||||
icon="🤖"
|
||||
title="No agents yet"
|
||||
subtitle="Create an agent to start receiving requests."
|
||||
/>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{agents.map((a) => (
|
||||
@@ -123,30 +133,38 @@ function PendingRow({ request }: { request: ChangeRequest }) {
|
||||
const exp = expiresIn(request.expires_at);
|
||||
return (
|
||||
<Link to={`/requests/${request.request_id}`} className="block">
|
||||
<Card className="p-4 transition hover:border-border-strong hover:bg-surface-raised/40">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-3">
|
||||
<div className="flex min-w-0 items-start gap-3">
|
||||
<AgentAvatar name={request.agent?.name ?? "?"} iconUrl={request.agent?.icon_url} size={32} />
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<p className="break-words font-medium text-text">{request.title}</p>
|
||||
{request.resubmitted && (
|
||||
<span className="animate-pulse-ring rounded-full bg-changes/20 px-2 py-0.5 text-[10px] font-semibold text-changes">
|
||||
UPDATED
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-0.5 truncate text-xs text-muted">
|
||||
{request.agent?.name} · {request.changes.length} change
|
||||
{request.changes.length === 1 ? "" : "s"} · {relativeTime(request.created_at)}
|
||||
</p>
|
||||
</div>
|
||||
<Card className="tap flex items-start gap-3 p-3.5 hover:border-border-strong hover:bg-surface-raised/40 active:bg-surface-raised/60 sm:p-4">
|
||||
<AgentAvatar name={request.agent?.name ?? "?"} iconUrl={request.agent?.icon_url} size={32} />
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex flex-wrap items-center gap-x-2 gap-y-1">
|
||||
<p className="min-w-0 break-words font-medium leading-snug text-text">{request.title}</p>
|
||||
{request.resubmitted && (
|
||||
<span className="animate-pulse-ring rounded-full bg-changes/20 px-2 py-0.5 text-[10px] font-semibold text-changes">
|
||||
UPDATED
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex self-start sm:shrink-0 sm:flex-col sm:items-end sm:gap-1">
|
||||
<p className="mt-1 truncate text-xs text-muted">
|
||||
{request.agent?.name} · {request.changes.length} change
|
||||
{request.changes.length === 1 ? "" : "s"} · {relativeTime(request.created_at)}
|
||||
</p>
|
||||
{/* Stacked under the title on phones, where a side column would
|
||||
squeeze the text to a couple of words per line. */}
|
||||
<div className="mt-2 flex flex-wrap items-center gap-2 sm:hidden">
|
||||
<StateBadge state={request.state} />
|
||||
<span className={`text-[11px] ${exp.urgent ? "text-pending" : "text-faint"}`}>{exp.text}</span>
|
||||
<span className={`text-[11px] ${exp.urgent ? "text-pending" : "text-faint"}`}>
|
||||
{exp.text}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hidden shrink-0 flex-col items-end gap-1 sm:flex">
|
||||
<StateBadge state={request.state} />
|
||||
<span className={`text-[11px] ${exp.urgent ? "text-pending" : "text-faint"}`}>{exp.text}</span>
|
||||
</div>
|
||||
|
||||
<ChevronRightIcon className="mt-1 h-5 w-5 shrink-0 text-faint sm:hidden" />
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user