@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/marketplace/client/OfferPanel.tsx

@@ -1,33 +1,14 @@
 "use client";
 
-import React, { useState } from "react";
+import React, { useRef, useState } from "react";
 import { callFn, db } from "@pylonsync/react";
-import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
-import {
-  Empty,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyTitle,
-} from "@/components/ui/empty";
-import {
-  Field,
-  FieldGroup,
-  FieldLabel,
-  FieldSeparator,
-} from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
+import { Check, X } from "lucide-react";
+import { cn } from "@/lib/utils";
 import { Spinner } from "@/components/ui/spinner";
-import { Textarea } from "@/components/ui/textarea";
-import { AuthGate, MarketProvider, useIdentity } from "./MarketProvider";
-import { money, timeAgo, type Offer } from "./market";
+import { percentOfAsk, suggestedOffers } from "../lib/catalog";
+import { LoginCard } from "./LoginCard";
+import { MarketProvider, useIdentity } from "./MarketProvider";
+import { avatarColor, initials, money, timeAgo, type Offer } from "./market";
 
 interface Props {
   listingId: string;
@@ -39,74 +20,151 @@ interface Props {
   initialOffers?: Offer[];
 }
 
-type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning";
-
-const statusVariant: Record<string, BadgeVariant> = {
-  pending: "warning",
-  accepted: "success",
-  declined: "outline",
-};
-
+// Buy box + live offers for one listing. One live query (every offer on this
+// listing) drives all of it: the buyer's own offer status, the public offer
+// list, and the seller's accept/decline queue. An offer sent from any tab
+// shows up here without a refresh.
 function Panel(props: Props) {
-  const { listingId, sellerId, price } = props;
+  const { listingId, sellerId } = props;
   const identity = useIdentity();
   const isSeller = !!identity && identity.userId === sellerId;
 
-  // The live query — every offer on this listing, newest first. Reads are
-  // public, so this runs for signed-out visitors too; it just lights up the
-  // moment a buyer in another tab makes an offer.
-  const { data } = db.useQuery<Offer>("Offer", {
+  const { data, loading } = db.useQuery<Offer>("Offer", {
+    where: { listingId },
     orderBy: { createdAt: "desc" },
   });
-  const offers = Array.from(
-    new Map(
-      [...(props.initialOffers ?? []), ...(data ?? [])].map((offer) => [
-        offer.id,
-        offer,
-      ]),
-    ).values(),
-  ).filter((offer) => offer.listingId === listingId);
+  const offers =
+    loading && (data ?? []).length === 0
+      ? [...(props.initialOffers ?? [])].sort((a, b) =>
+          b.createdAt.localeCompare(a.createdAt),
+        )
+      : (data ?? []);
   const isSold =
     props.status === "sold" || offers.some((offer) => offer.status === "accepted");
+
+  if (isSeller) {
+    return <SellerView offers={offers} price={props.price} />;
+  }
+
   const myOffer = identity
     ? offers.find((o) => o.buyerId === identity.userId)
     : undefined;
 
-  if (isSeller) {
-    return <SellerView offers={offers} />;
-  }
-  // Making an offer needs a real account — gate it (prefilled demo login).
   return (
-    <AuthGate
-      title="Sign in to make an offer"
-      blurb="Offers are tied to a real account so the seller knows who is bidding. The demo account is ready; just select Log in."
+    <div className="flex flex-col gap-8">
+      <BuyBox {...props} myOffer={myOffer} isSold={isSold} />
+      <OfferHistory offers={offers} price={props.price} />
+    </div>
+  );
+}
+
+// Offer keys seen on the first settled render; later keys arrived live.
+function useArrivals(offers: Offer[]): (id: string) => boolean {
+  const seen = useRef<Set<string> | null>(null);
+  if (seen.current === null) seen.current = new Set(offers.map((o) => o.id));
+  return (id) => !seen.current!.has(id);
+}
+
+function StatusTag({ status }: { status: Offer["status"] }) {
+  return (
+    <span
+      className={cn(
+        "rounded-full px-2 py-0.5 text-[11px] font-semibold capitalize",
+        status === "pending" && "bg-signal/12 text-signal-foreground",
+        status === "accepted" && "bg-success/14 text-success-foreground",
+        status === "declined" && "bg-muted text-muted-foreground",
+      )}
     >
-      <BuyerView
-        {...props}
-        myOffer={myOffer}
-        isSold={isSold}
-        suggestedPrice={price}
-      />
-    </AuthGate>
+      {status}
+    </span>
+  );
+}
+
+function Avatar({ name, className }: { name: string; className?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "grid size-9 shrink-0 place-items-center rounded-full text-xs font-semibold text-white",
+        className,
+      )}
+      style={{ background: avatarColor(name) }}
+    >
+      {initials(name)}
+    </span>
+  );
+}
+
+function OfferHistory({ offers, price }: { offers: Offer[]; price: number }) {
+  const isNew = useArrivals(offers);
+  const pending = offers.filter((o) => o.status === "pending").length;
+
+  return (
+    <section aria-labelledby="offers-heading">
+      <div className="flex items-baseline justify-between">
+        <h2 id="offers-heading" className="text-base font-semibold">
+          Offers
+        </h2>
+        <p className="text-[13px] text-muted-foreground">
+          {pending} open · {offers.length} total
+        </p>
+      </div>
+      {offers.length === 0 ? (
+        <p className="mt-3 rounded-2xl bg-muted/60 px-4 py-5 text-sm text-muted-foreground">
+          No offers yet. New offers appear here as buyers send them.
+        </p>
+      ) : (
+        <ol aria-live="polite" className="mt-3 flex flex-col">
+          {offers.slice(0, 6).map((o) => (
+            <li
+              key={o.id}
+              className={cn(
+                "flex items-center gap-3 rounded-xl border-b border-border/60 px-2 py-2.5 last:border-b-0",
+                isNew(o.id) && "market-rise market-flash",
+              )}
+            >
+              <Avatar name={o.buyerName} />
+              <div className="min-w-0 flex-1">
+                <p className="truncate text-sm">
+                  <span className="font-medium">{o.buyerName}</span>{" "}
+                  <span className="text-muted-foreground">
+                    {o.message === "Bought at list price" ? "bought it" : "offered"}
+                  </span>
+                </p>
+                <p className="text-xs text-muted-foreground">{timeAgo(o.createdAt)}</p>
+              </div>
+              <div className="text-right">
+                <p className="text-sm font-semibold tabular-nums">{money(o.amount)}</p>
+                <p className="text-[11px] tabular-nums text-muted-foreground">
+                  {percentOfAsk(o.amount, price)}% of ask
+                </p>
+              </div>
+              <StatusTag status={o.status} />
+            </li>
+          ))}
+        </ol>
+      )}
+    </section>
   );
 }
 
-function SellerView({ offers }: { offers: Offer[] }) {
+function SellerView({ offers, price }: { offers: Offer[]; price: number }) {
   const [busy, setBusy] = useState<string | null>(null);
   const [confirming, setConfirming] = useState<string | null>(null);
   const [err, setErr] = useState<string | null>(null);
+  const isNew = useArrivals(offers);
   const pending = offers.filter((o) => o.status === "pending");
 
   async function respond(offerId: string, accept: boolean) {
     setBusy(offerId);
     setErr(null);
     try {
-      // Use the direct function transport for seller decisions. It remains
-      // reliable across dev-server reconnects, while the live query applies
-      // the atomic offer + listing updates as soon as the server broadcasts.
+      // The direct function call stays reliable across dev-server
+      // reconnects; the live query applies the offer + listing updates when
+      // the server broadcasts them.
       await callFn("respondToOffer", { offerId, accept });
     } catch (e) {
-      setErr((e as Error).message ?? "Could not respond to offer.");
+      setErr((e as Error).message ?? "Could not answer the offer.");
     } finally {
       setBusy(null);
       setConfirming(null);
@@ -114,45 +172,50 @@ function SellerView({ offers }: { offers: Offer[] }) {
   }
 
   return (
-    <div className="flex flex-col gap-3">
-      <div className="flex items-center justify-between">
-        <h2 className="font-semibold">Offers on your listing</h2>
-        <Badge variant="outline">{pending.length} pending</Badge>
+    <section
+      aria-labelledby="seller-offers-heading"
+      className="rounded-2xl bg-card p-4 shadow-[var(--shadow-border)] sm:p-5"
+    >
+      <div className="flex items-baseline justify-between">
+        <h2 id="seller-offers-heading" className="text-base font-semibold">
+          Offers on your listing
+        </h2>
+        <span className="text-[13px] text-muted-foreground">
+          {pending.length} waiting
+        </span>
       </div>
       <div aria-live="polite">
         {err ? (
-          <Alert variant="destructive">
-            <AlertDescription>{err}</AlertDescription>
-          </Alert>
+          <p className="mt-3 rounded-xl bg-destructive/10 px-3 py-2 text-sm text-destructive">
+            {err}
+          </p>
         ) : null}
       </div>
       {offers.length === 0 ? (
-        <Empty className="border-0 bg-muted py-6">
-          <EmptyHeader>
-            <EmptyTitle className="text-base">No offers yet</EmptyTitle>
-            <EmptyDescription>
-              They will appear here as soon as a buyer sends one.
-            </EmptyDescription>
-          </EmptyHeader>
-        </Empty>
+        <p className="mt-3 text-sm text-muted-foreground">
+          No offers yet. They appear here the moment a buyer sends one.
+        </p>
       ) : (
-        <ul className="flex flex-col gap-2">
+        <ul className="mt-3 flex flex-col gap-2">
           {offers.map((o) => (
-            <li key={o.id}>
-            <Card className="flex items-center justify-between gap-3 rounded-lg p-3">
-              <div className="min-w-0">
-                <div className="flex items-center gap-2">
+            <li
+              key={o.id}
+              className={cn(
+                "flex flex-wrap items-center gap-3 rounded-xl bg-background/60 p-3 ring-1 ring-border/60",
+                isNew(o.id) && "market-rise market-flash",
+              )}
+            >
+              <Avatar name={o.buyerName} />
+              <div className="min-w-0 flex-1">
+                <p className="flex items-center gap-2">
                   <span className="text-lg font-semibold tabular-nums">
                     {money(o.amount)}
                   </span>
-                  <Badge
-                    variant={statusVariant[o.status] ?? "outline"}
-                    className="capitalize"
-                  >
-                    {o.status}
-                  </Badge>
-                </div>
-                <p className="truncate text-sm text-muted-foreground">
+                  <span className="text-xs tabular-nums text-muted-foreground">
+                    {percentOfAsk(o.amount, price)}% of ask
+                  </span>
+                </p>
+                <p className="truncate text-[13px] text-muted-foreground">
                   {o.buyerName} · {timeAgo(o.createdAt)}
                   {o.message ? ` · “${o.message}”` : ""}
                 </p>
@@ -161,76 +224,80 @@ function SellerView({ offers }: { offers: Offer[] }) {
                 <div className="flex shrink-0 gap-2">
                   {confirming === o.id ? (
                     <>
-                      <Button
-                        size="sm"
+                      <button
+                        type="button"
                         disabled={busy === o.id}
                         onClick={() => respond(o.id, true)}
+                        className="inline-flex min-h-9 items-center gap-1.5 rounded-full bg-primary px-3.5 text-[13px] font-medium text-primary-foreground disabled:opacity-60"
                       >
-                        Confirm
-                      </Button>
-                      <Button
-                        size="sm"
-                        variant="ghost"
+                        {busy === o.id ? <Spinner /> : <Check className="size-3.5" />}
+                        Sell for {money(o.amount)}
+                      </button>
+                      <button
+                        type="button"
                         disabled={busy === o.id}
                         onClick={() => setConfirming(null)}
+                        className="inline-flex min-h-9 items-center rounded-full px-3 text-[13px] font-medium text-muted-foreground hover:text-foreground"
                       >
                         Cancel
-                      </Button>
+                      </button>
                     </>
                   ) : (
-                    <Button
-                      size="sm"
-                      disabled={busy === o.id}
-                      onClick={() => setConfirming(o.id)}
-                    >
-                      Accept
-                    </Button>
+                    <>
+                      <button
+                        type="button"
+                        disabled={busy === o.id}
+                        onClick={() => setConfirming(o.id)}
+                        className="inline-flex min-h-9 items-center rounded-full bg-primary px-3.5 text-[13px] font-medium text-primary-foreground transition-[scale] active:scale-[0.97] disabled:opacity-60"
+                      >
+                        Accept
+                      </button>
+                      <button
+                        type="button"
+                        disabled={busy === o.id}
+                        onClick={() => respond(o.id, false)}
+                        aria-label={`Decline ${money(o.amount)} offer from ${o.buyerName}`}
+                        className="inline-flex min-h-9 items-center gap-1 rounded-full bg-card px-3 text-[13px] font-medium shadow-[var(--shadow-border)] transition-[scale] active:scale-[0.97] disabled:opacity-60"
+                      >
+                        <X className="size-3.5" />
+                        Decline
+                      </button>
+                    </>
                   )}
-                  {confirming !== o.id ? (
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      disabled={busy === o.id}
-                      onClick={() => respond(o.id, false)}
-                    >
-                      Decline
-                    </Button>
-                  ) : null}
                 </div>
-              ) : null}
-            </Card>
+              ) : (
+                <StatusTag status={o.status} />
+              )}
             </li>
           ))}
         </ul>
       )}
-    </div>
+    </section>
   );
 }
 
-function BuyerView({
+function BuyBox({
   listingId,
   title,
   sellerId,
   sellerName,
+  price,
   myOffer,
   isSold,
-  suggestedPrice,
-}: Props & { myOffer?: Offer; isSold: boolean; suggestedPrice: number }) {
-  // Rendered inside <AuthGate>, so identity is non-null here.
+}: Props & { myOffer?: Offer; isSold: boolean }) {
   const identity = useIdentity();
   const userId = identity?.userId ?? "";
   const name = identity?.name ?? "you";
-  const [amount, setAmount] = useState(String(suggestedPrice));
+  const [mode, setMode] = useState<"idle" | "offer" | "buy" | "signin">("idle");
+  const [amount, setAmount] = useState(String(suggestedOffers(price)[1] ?? price));
   const [message, setMessage] = useState("");
-  const [confirmingBuy, setConfirmingBuy] = useState(false);
   const [err, setErr] = useState<string | null>(null);
 
-  // Local-first optimism, baked in: db.useMutation paints the Offer into the
-  // local store the instant you click (the `optimistic` ghost), so the live
-  // query below renders "Your offer" immediately — no waiting on the server,
-  // no hand-rolled state. The server's makeOffer reuses the same id (threaded
-  // as _optimisticId), so its broadcast merges in place; on failure the engine
-  // rolls the ghost back on its own.
+  // db.useMutation paints the Offer into the local store the moment the
+  // buyer submits (the `optimistic` row), so "Your offer" renders before the
+  // server answers. makeOffer reuses the same id (threaded as
+  // _optimisticId), so the server row replaces it in place; on failure the
+  // engine rolls it back.
   const makeOffer = db.useMutation<
     { listingId: string; amount: number; message: string; buyerName: string },
     { id: string }
@@ -252,9 +319,8 @@ function BuyerView({
     }),
   });
 
-  // Buy now: same optimistic pattern, but the ghost is an *accepted* offer at
-  // the list price — the buyer sees "🎉 Accepted" instantly while the server
-  // marks the listing sold + declines other bids.
+  // Buy now: the optimistic row is an accepted offer at the asking price;
+  // the server marks the listing sold and declines the other offers.
   const buyNow = db.useMutation<{ listingId: string; buyerName: string }, { id: string }>(
     "buyNow",
     {
@@ -267,7 +333,7 @@ function BuyerView({
           sellerId,
           buyerId: userId,
           buyerName: name,
-          amount: suggestedPrice,
+          amount: price,
           message: "Bought at list price",
           status: "accepted",
           createdAt: ctx.now,
@@ -276,6 +342,11 @@ function BuyerView({
     },
   );
 
+  function start(next: "offer" | "buy") {
+    setErr(null);
+    setMode(identity ? next : "signin");
+  }
+
   async function buy() {
     setErr(null);
     try {
@@ -285,49 +356,6 @@ function BuyerView({
     }
   }
 
-  // `myOffer` now includes the optimistic ghost, so this flips the instant
-  // the offer is made.
-  if (myOffer) {
-    return (
-      <Card>
-        <CardHeader className="pb-3">
-          <CardTitle>Your offer</CardTitle>
-        </CardHeader>
-        <CardContent className="flex flex-col gap-2">
-          <div className="flex items-center gap-2">
-            <span className="text-2xl font-semibold tabular-nums">
-              {money(myOffer.amount)}
-            </span>
-            <Badge
-              variant={statusVariant[myOffer.status] ?? "outline"}
-              className="capitalize"
-            >
-              {myOffer.status}
-            </Badge>
-          </div>
-          <p className="text-sm text-muted-foreground">
-          {myOffer.status === "pending"
-            ? `Sent to ${sellerName}. Their answer will appear here live.`
-            : myOffer.status === "accepted"
-              ? "Accepted. Confirm payment and delivery with the seller."
-              : "This offer was declined."}
-          </p>
-        </CardContent>
-      </Card>
-    );
-  }
-
-  if (isSold) {
-    return (
-      <Alert>
-        <AlertTitle>This item has sold</AlertTitle>
-        <AlertDescription>
-          Browse other finds to discover something similar.
-        </AlertDescription>
-      </Alert>
-    );
-  }
-
   async function submit(e: React.FormEvent) {
     e.preventDefault();
     const value = Number.parseFloat(amount);
@@ -337,129 +365,235 @@ function BuyerView({
     }
     setErr(null);
     try {
-      // The ghost is painted synchronously here; the view has already flipped
-      // to "Your offer" by the time this awaits.
       await makeOffer.mutate({ listingId, amount: value, message, buyerName: name });
+      setMode("idle");
     } catch (e) {
-      setErr((e as Error).message ?? "Could not send offer.");
+      setErr((e as Error).message ?? "Could not send the offer.");
     }
   }
 
+  if (myOffer && !(myOffer.status === "declined" && mode === "offer")) {
+    const bought = myOffer.message === "Bought at list price";
+    return (
+      <div className="rounded-2xl bg-card p-5 shadow-[var(--shadow-border)]">
+        <div className="flex items-center justify-between gap-3">
+          <p className="text-sm font-medium">
+            {bought ? "You bought this item" : "Your offer"}
+          </p>
+          <StatusTag status={myOffer.status} />
+        </div>
+        <p className="mt-2 text-[32px] font-semibold leading-none tabular-nums tracking-[-0.02em]">
+          {money(myOffer.amount)}
+        </p>
+        <p className="mt-3 text-sm text-muted-foreground">
+          {myOffer.status === "pending"
+            ? `Sent to ${sellerName}. Their answer appears here as soon as they respond.`
+            : myOffer.status === "accepted"
+              ? `${bought ? "Purchase confirmed." : `${sellerName} accepted.`} Arrange payment and pickup with the seller.`
+              : `${sellerName} declined this offer.`}
+        </p>
+        {myOffer.status === "declined" && !isSold ? (
+          <button
+            type="button"
+            onClick={() => setMode("offer")}
+            className="mt-4 inline-flex min-h-10 items-center rounded-full bg-card px-4 text-sm font-medium shadow-[var(--shadow-border)]"
+          >
+            Make a new offer
+          </button>
+        ) : null}
+      </div>
+    );
+  }
+
+  if (isSold) {
+    return (
+      <div className="rounded-2xl bg-card p-5 shadow-[var(--shadow-border)]">
+        <p className="font-display text-2xl">This item sold</p>
+        <p className="mt-1 text-sm text-muted-foreground">
+          The seller accepted an offer. Other listings are on the home page.
+        </p>
+      </div>
+    );
+  }
+
+  if (mode === "signin") {
+    return (
+      <LoginCard
+        title="Sign in to buy or make an offer"
+        blurb="The demo account is filled in. Select Log in to continue."
+        onDone={() => setMode("idle")}
+        className="max-w-none"
+      />
+    );
+  }
+
+  const suggestions = suggestedOffers(price);
+  const offerValue = Number.parseFloat(amount) || 0;
+
   return (
-    <Card>
-      <CardContent className="flex flex-col gap-4 p-5">
-      <div className="flex flex-col gap-2">
-        {confirmingBuy ? (
-          <Alert>
-            <AlertTitle>
-              Buy this item for {money(suggestedPrice)}?
-            </AlertTitle>
-            <AlertDescription>
-              This accepts the asking price and marks the listing sold.
-            </AlertDescription>
-            <div className="mt-3 flex gap-2">
-              <Button
-                type="button"
-                size="sm"
-                onClick={buy}
-                disabled={buyNow.loading}
-                className="flex-1"
-              >
-                {buyNow.loading ? <Spinner data-icon="inline-start" /> : null}
-                {buyNow.loading ? "Buying…" : "Confirm purchase"}
-              </Button>
-              <Button
-                type="button"
-                size="sm"
-                variant="outline"
-                onClick={() => setConfirmingBuy(false)}
-                disabled={buyNow.loading}
-              >
-                Cancel
-              </Button>
-            </div>
-          </Alert>
-        ) : (
-          <>
-            <Button
+    <div className="rounded-2xl bg-card p-4 shadow-[var(--shadow-border)] sm:p-5">
+      {mode === "buy" ? (
+        <div className="market-rise">
+          <p className="text-sm font-medium">Buy {title} for {money(price)}?</p>
+          <p className="mt-1 text-sm text-muted-foreground">
+            This pays the asking price and marks the listing sold.
+          </p>
+          <div className="mt-4 flex gap-2">
+            <button
               type="button"
-              onClick={() => setConfirmingBuy(true)}
-              className="w-full"
+              onClick={buy}
+              disabled={buyNow.loading}
+              className="inline-flex min-h-12 flex-1 items-center justify-center gap-2 rounded-full bg-primary px-5 text-[15px] font-medium text-primary-foreground transition-[scale] active:scale-[0.98] disabled:opacity-60"
             >
-              Buy now for {money(suggestedPrice)}
-            </Button>
-            <p className="text-center text-xs text-muted-foreground">
-              Instant purchase at the asking price.
-            </p>
-          </>
-        )}
-      </div>
-
-      <FieldSeparator>or make an offer</FieldSeparator>
+              {buyNow.loading ? <Spinner /> : null}
+              {buyNow.loading ? "Buying" : `Confirm purchase`}
+            </button>
+            <button
+              type="button"
+              onClick={() => setMode("idle")}
+              disabled={buyNow.loading}
+              className="inline-flex min-h-12 items-center rounded-full px-5 text-sm font-medium text-muted-foreground hover:text-foreground"
+            >
+              Cancel
+            </button>
+          </div>
+        </div>
+      ) : (
+        <div className="flex flex-col gap-2 sm:flex-row">
+          <button
+            type="button"
+            onClick={() => start("buy")}
+            className="inline-flex min-h-12 flex-1 items-center justify-center rounded-full bg-primary px-5 text-[15px] font-medium text-primary-foreground transition-[background-color,scale] duration-150 hover:bg-primary/88 active:scale-[0.98]"
+          >
+            Buy now
+          </button>
+          <button
+            type="button"
+            onClick={() => start("offer")}
+            aria-expanded={mode === "offer"}
+            className={cn(
+              "inline-flex min-h-12 flex-1 items-center justify-center rounded-full px-5 text-[15px] font-medium transition-[background-color,box-shadow,scale] duration-150 active:scale-[0.98]",
+              mode === "offer"
+                ? "bg-muted"
+                : "bg-card shadow-[var(--shadow-border)] hover:shadow-[var(--shadow-border-hover)]",
+            )}
+          >
+            Make an offer
+          </button>
+        </div>
+      )}
 
-      <form onSubmit={submit}>
-        <FieldGroup className="gap-3">
-          <Field>
-            <FieldLabel htmlFor="offer-amount">Your offer ($)</FieldLabel>
-            <Input
-              id="offer-amount"
-              name="offerAmount"
-              type="number"
-              inputMode="decimal"
+      {mode === "offer" ? (
+        <form onSubmit={submit} className="market-rise mt-5 flex flex-col gap-4">
+          <div>
+            <label htmlFor="offer-amount" className="text-sm font-medium">
+              Your offer
+            </label>
+            <div className="mt-2 flex items-center rounded-xl bg-background px-4 ring-1 ring-input focus-within:ring-2 focus-within:ring-ring">
+              <span className="text-2xl font-semibold text-muted-foreground">$</span>
+              <input
+                id="offer-amount"
+                name="offerAmount"
+                type="number"
+                inputMode="decimal"
+                autoComplete="off"
+                min="1"
+                step="1"
+                value={amount}
+                onChange={(e) => setAmount(e.target.value)}
+                className="h-14 w-full bg-transparent pl-1 text-2xl font-semibold tabular-nums outline-none focus-visible:outline-none"
+              />
+              <span className="shrink-0 text-xs tabular-nums text-muted-foreground">
+                {percentOfAsk(offerValue, price)}% of {money(price)}
+              </span>
+            </div>
+            {suggestions.length > 0 ? (
+              <div className="mt-2 flex flex-wrap gap-1.5">
+                {suggestions.map((value) => (
+                  <button
+                    key={value}
+                    type="button"
+                    onClick={() => setAmount(String(value))}
+                    aria-pressed={offerValue === value}
+                    className={cn(
+                      "inline-flex min-h-8 items-center rounded-full px-3 text-[13px] font-medium tabular-nums transition-colors",
+                      offerValue === value
+                        ? "bg-foreground text-background"
+                        : "bg-muted text-foreground hover:bg-accent",
+                    )}
+                  >
+                    {money(value)}
+                  </button>
+                ))}
+              </div>
+            ) : null}
+          </div>
+          <div>
+            <label htmlFor="offer-note" className="text-sm font-medium">
+              Note to {sellerName}{" "}
+              <span className="font-normal text-muted-foreground">(optional)</span>
+            </label>
+            <textarea
+              id="offer-note"
+              name="offerNote"
               autoComplete="off"
-              min="1"
-              step="1"
-              value={amount}
-              onChange={(e) => setAmount(e.target.value)}
-              className="max-w-32"
+              rows={2}
+              value={message}
+              onChange={(e) => setMessage(e.target.value)}
+              placeholder="Pickup time, questions about condition"
+              className="mt-2 w-full resize-none rounded-xl bg-background px-4 py-3 text-sm ring-1 ring-input outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus-visible:outline-none"
             />
-          </Field>
-          <Field>
-            <FieldLabel htmlFor="offer-note">
-            Note <span className="font-normal text-muted-foreground">(optional)</span>
-            </FieldLabel>
-          <Textarea
-            id="offer-note"
-            name="offerNote"
-            autoComplete="off"
-            placeholder="Share any useful details…"
-            value={message}
-            onChange={(e) => setMessage(e.target.value)}
-            rows={2}
-          />
-          </Field>
-        <div aria-live="polite">
-          {err ? (
-            <Alert variant="destructive">
-              <AlertDescription>{err}</AlertDescription>
-            </Alert>
-          ) : null}
-        </div>
-        <Button
-          type="submit"
-          variant="outline"
-          disabled={makeOffer.loading}
-          className="w-full"
-        >
-          {makeOffer.loading ? <Spinner data-icon="inline-start" /> : null}
-          {makeOffer.loading
-            ? "Sending…"
-            : `Offer ${money(Number.parseFloat(amount) || 0)}`}
-        </Button>
-        <p className="text-center text-xs text-muted-foreground">
-          You're bidding as <span className="font-medium">{name}</span>
-        </p>
-        </FieldGroup>
-      </form>
-      </CardContent>
-    </Card>
+          </div>
+          <button
+            type="submit"
+            disabled={makeOffer.loading}
+            className="inline-flex min-h-12 items-center justify-center gap-2 rounded-full bg-signal px-5 text-[15px] font-medium text-white transition-[filter,scale] duration-150 hover:brightness-95 active:scale-[0.98] disabled:opacity-60"
+          >
+            {makeOffer.loading ? <Spinner /> : null}
+            {makeOffer.loading ? "Sending" : `Send offer of ${money(offerValue)}`}
+          </button>
+          <p className="text-center text-xs text-muted-foreground">
+            Sending as <span className="font-medium text-foreground">{name}</span>.
+            The seller can accept or decline.
+          </p>
+        </form>
+      ) : null}
+
+      <div aria-live="polite">
+        {err ? (
+          <p className="mt-3 rounded-xl bg-destructive/10 px-3 py-2 text-sm text-destructive">
+            {err}
+          </p>
+        ) : null}
+      </div>
+    </div>
   );
 }
 
 export function OfferPanel(props: Props) {
   return (
-    <MarketProvider>
+    <MarketProvider
+      fallback={
+        <div className="flex flex-col gap-8">
+          <div className="rounded-2xl bg-card p-4 shadow-[var(--shadow-border)] sm:p-5">
+            <div className="flex flex-col gap-2 sm:flex-row">
+              <div className="h-12 flex-1 rounded-full bg-muted" />
+              <div className="h-12 flex-1 rounded-full bg-muted" />
+            </div>
+          </div>
+          <StaticHistory {...props} />
+        </div>
+      }
+    >
       <Panel {...props} />
     </MarketProvider>
   );
 }
+
+// Server-rendered offer list shown until the sync engine connects.
+function StaticHistory({ initialOffers = [], price }: Props) {
+  const offers = [...initialOffers].sort((a, b) =>
+    b.createdAt.localeCompare(a.createdAt),
+  );
+  return <OfferHistory offers={offers} price={price} />;
+}