@pylonsync/create-pylon 0.3.274 → 0.3.276

package/templates/marketplace/client/OfferPanel.tsx

@@ -0,0 +1,355 @@
+"use client";
+
+import React, { useState } from "react";
+import { db } from "@pylonsync/react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import { Badge } from "../ui/badge";
+import { AuthGate, MarketProvider, useIdentity } from "./MarketProvider";
+import { money, timeAgo, type Offer } from "./market";
+
+interface Props {
+  listingId: string;
+  sellerId: string;
+  sellerName: string;
+  title: string;
+  price: number;
+  status: "active" | "sold";
+}
+
+type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning";
+
+const statusVariant: Record<string, BadgeVariant> = {
+  pending: "warning",
+  accepted: "success",
+  declined: "outline",
+};
+
+function Panel(props: Props) {
+  const { listingId, sellerId, price } = props;
+  const identity = useIdentity();
+  const isSeller = !!identity && identity.userId === sellerId;
+  const isSold = props.status === "sold";
+
+  // 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", {
+    where: { listingId },
+    orderBy: { createdAt: "desc" },
+  });
+  const offers = data ?? [];
+  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's bidding. The demo account is prefilled — just hit Log in."
+    >
+      <BuyerView
+        {...props}
+        myOffer={myOffer}
+        isSold={isSold}
+        suggestedPrice={price}
+      />
+    </AuthGate>
+  );
+}
+
+function SellerView({ offers }: { offers: Offer[] }) {
+  const [busy, setBusy] = useState<string | null>(null);
+  const [err, setErr] = useState<string | null>(null);
+  const pending = offers.filter((o) => o.status === "pending");
+
+  // Optimistic accept/decline: flip the offer's status in the local store
+  // immediately so the seller's list updates the instant they click. The
+  // server (respondToOffer) reconciles the rest — marking the listing sold and
+  // declining the sibling offers — when its broadcast lands.
+  const respondMutation = db.useMutation<{ offerId: string; accept: boolean }>(
+    "respondToOffer",
+    {
+      optimistic: (args) => {
+        const o = offers.find((x) => x.id === args.offerId);
+        return o
+          ? [
+              {
+                entity: "Offer",
+                data: { ...o, status: args.accept ? "accepted" : "declined" },
+              },
+            ]
+          : [];
+      },
+    },
+  );
+
+  async function respond(offerId: string, accept: boolean) {
+    setBusy(offerId);
+    setErr(null);
+    try {
+      await respondMutation.mutate({ offerId, accept });
+    } catch (e) {
+      setErr((e as Error).message ?? "Could not respond to offer.");
+    } finally {
+      setBusy(null);
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h2 className="font-semibold">Offers on your listing</h2>
+        <Badge variant="outline">{pending.length} pending</Badge>
+      </div>
+      {err ? <p className="text-sm text-destructive">{err}</p> : null}
+      {offers.length === 0 ? (
+        <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
+          No offers yet. They'll show up here the moment a buyer makes one —
+          live, no refresh.
+        </p>
+      ) : (
+        <ul className="space-y-2">
+          {offers.map((o) => (
+            <li
+              key={o.id}
+              className="flex items-center justify-between gap-3 rounded-lg border bg-card p-3"
+            >
+              <div className="min-w-0">
+                <div className="flex items-center gap-2">
+                  <span className="text-lg font-semibold tabular-nums">
+                    {money(o.amount)}
+                  </span>
+                  <Badge variant={statusVariant[o.status] ?? "outline"}>
+                    {o.status}
+                  </Badge>
+                </div>
+                <p className="truncate text-sm text-muted-foreground">
+                  {o.buyerName} · {timeAgo(o.createdAt)}
+                  {o.message ? ` · "${o.message}"` : ""}
+                </p>
+              </div>
+              {o.status === "pending" ? (
+                <div className="flex shrink-0 gap-2">
+                  <Button
+                    size="sm"
+                    disabled={busy === o.id}
+                    onClick={() => respond(o.id, true)}
+                  >
+                    Accept
+                  </Button>
+                  <Button
+                    size="sm"
+                    variant="outline"
+                    disabled={busy === o.id}
+                    onClick={() => respond(o.id, false)}
+                  >
+                    Decline
+                  </Button>
+                </div>
+              ) : null}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+function BuyerView({
+  listingId,
+  title,
+  sellerId,
+  sellerName,
+  myOffer,
+  isSold,
+  suggestedPrice,
+}: Props & { myOffer?: Offer; isSold: boolean; suggestedPrice: number }) {
+  // Rendered inside <AuthGate>, so identity is non-null here.
+  const identity = useIdentity();
+  const userId = identity?.userId ?? "";
+  const name = identity?.name ?? "you";
+  const [amount, setAmount] = useState(String(suggestedPrice));
+  const [message, setMessage] = useState("");
+  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.
+  const makeOffer = db.useMutation<
+    { listingId: string; amount: number; message: string; buyerName: string },
+    { id: string }
+  >("makeOffer", {
+    optimistic: (args, ctx) => ({
+      entity: "Offer",
+      data: {
+        id: ctx.id,
+        listingId,
+        listingTitle: title,
+        sellerId,
+        buyerId: userId,
+        buyerName: name,
+        amount: args.amount,
+        message: args.message,
+        status: "pending",
+        createdAt: ctx.now,
+      },
+    }),
+  });
+
+  // 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.
+  const buyNow = db.useMutation<{ listingId: string; buyerName: string }, { id: string }>(
+    "buyNow",
+    {
+      optimistic: (_args, ctx) => ({
+        entity: "Offer",
+        data: {
+          id: ctx.id,
+          listingId,
+          listingTitle: title,
+          sellerId,
+          buyerId: userId,
+          buyerName: name,
+          amount: suggestedPrice,
+          message: "Bought at list price",
+          status: "accepted",
+          createdAt: ctx.now,
+        },
+      }),
+    },
+  );
+
+  async function buy() {
+    setErr(null);
+    try {
+      await buyNow.mutate({ listingId, buyerName: name });
+    } catch (e) {
+      setErr((e as Error).message ?? "Could not complete the purchase.");
+    }
+  }
+
+  // `myOffer` now includes the optimistic ghost, so this flips the instant
+  // the offer is made.
+  if (myOffer) {
+    return (
+      <div className="space-y-2 rounded-lg border bg-card p-4">
+        <h2 className="font-semibold">Your offer</h2>
+        <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"}>
+            {myOffer.status}
+          </Badge>
+        </div>
+        <p className="text-sm text-muted-foreground">
+          {myOffer.status === "pending"
+            ? `Sent to ${sellerName} — you'll see their answer here live.`
+            : myOffer.status === "accepted"
+              ? "🎉 Accepted! Arrange pickup with the seller."
+              : "This offer was declined."}
+        </p>
+      </div>
+    );
+  }
+
+  if (isSold) {
+    return (
+      <div className="rounded-lg border bg-card p-4 text-sm text-muted-foreground">
+        This item has sold.
+      </div>
+    );
+  }
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    const value = Number.parseFloat(amount);
+    if (!Number.isFinite(value) || value <= 0) {
+      setErr("Enter an offer amount.");
+      return;
+    }
+    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 });
+    } catch (e) {
+      setErr((e as Error).message ?? "Could not send offer.");
+    }
+  }
+
+  return (
+    <div className="space-y-4 rounded-lg border bg-card p-4">
+      <div className="space-y-2">
+        <Button
+          type="button"
+          onClick={buy}
+          disabled={buyNow.loading}
+          className="w-full"
+        >
+          {buyNow.loading ? "Buying…" : `Buy now — ${money(suggestedPrice)}`}
+        </Button>
+        <p className="text-center text-xs text-muted-foreground">
+          Instant purchase at the asking price.
+        </p>
+      </div>
+
+      <div className="flex items-center gap-3 text-xs uppercase tracking-wide text-muted-foreground">
+        <span className="h-px flex-1 bg-border" />
+        or make an offer
+        <span className="h-px flex-1 bg-border" />
+      </div>
+
+      <form onSubmit={submit} className="space-y-3">
+        <div className="flex items-center gap-2">
+          <span className="text-muted-foreground">$</span>
+          <Input
+            type="number"
+            min="1"
+            step="1"
+            value={amount}
+            onChange={(e) => setAmount(e.target.value)}
+            className="w-32"
+            aria-label="Offer amount"
+          />
+        </div>
+        <Textarea
+          placeholder="Add a note (optional)…"
+          value={message}
+          onChange={(e) => setMessage(e.target.value)}
+          rows={2}
+        />
+        {err ? <p className="text-sm text-destructive">{err}</p> : null}
+        <Button
+          type="submit"
+          variant="outline"
+          disabled={makeOffer.loading}
+          className="w-full"
+        >
+          {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>
+      </form>
+    </div>
+  );
+}
+
+export function OfferPanel(props: Props) {
+  return (
+    <MarketProvider>
+      <Panel {...props} />
+    </MarketProvider>
+  );
+}

package/templates/marketplace/client/SeedOnEmpty.tsx

@@ -0,0 +1,26 @@
+"use client";
+
+import React, { useEffect, useRef } from "react";
+import { ensureDemoSeed, ensureReadSession } from "./market";
+
+// First-run convenience: if the marketplace is empty, ensure the demo account
+// + seed a dozen listings under it, then reload once so the server-rendered
+// grid picks them up. Guarded by a session flag so it never loops. Real apps
+// wouldn't ship this; it just makes `pylon dev` show something on first visit.
+export function SeedOnEmpty({ count }: { count: number }) {
+  const fired = useRef(false);
+  useEffect(() => {
+    if (count > 0 || fired.current) return;
+    if (sessionStorage.getItem("market:seeded") === "1") return;
+    fired.current = true;
+    sessionStorage.setItem("market:seeded", "1");
+    void (async () => {
+      await ensureReadSession();
+      await ensureDemoSeed();
+      // The seed inserts listings owned by the demo user; reload so the SSR
+      // grid renders them. The session flag prevents a reload loop.
+      window.location.reload();
+    })();
+  }, [count]);
+  return null;
+}

package/templates/marketplace/client/SellForm.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import React, { useState } from "react";
+import { db, useRouter } from "@pylonsync/react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+import { Label } from "../ui/label";
+import { AuthGate, MarketProvider, useIdentity } from "./MarketProvider";
+import { makeSlug } from "./market";
+
+const CATEGORIES = [
+  "furniture", "electronics", "cameras", "bikes", "audio", "kitchen",
+  "instruments", "outdoor", "apparel", "other",
+];
+const CONDITIONS = ["new", "like-new", "good", "fair"];
+
+const selectClass =
+  "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring";
+
+function Form() {
+  // Rendered inside <AuthGate>, so identity is guaranteed non-null here.
+  const identity = useIdentity();
+  const userId = identity?.userId ?? "";
+  const name = identity?.name ?? "you";
+  const router = useRouter();
+  const [title, setTitle] = useState("");
+  const [description, setDescription] = useState("");
+  const [price, setPrice] = useState("");
+  const [category, setCategory] = useState(CATEGORIES[0]);
+  const [condition, setCondition] = useState("good");
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    const value = Number.parseFloat(price);
+    if (!title.trim()) return setErr("Give your item a title.");
+    if (!Number.isFinite(value) || value < 0) return setErr("Set a price.");
+    setBusy(true);
+    setErr(null);
+    // Local-first by default — no createListing function, no opt-in
+    // optimism flag. `db.insert` paints the listing into the local store
+    // synchronously (it's in the "just listed" ticker before the network
+    // call even leaves the tab) and pushes in the background. `sellerId`
+    // is declared `field.owner()` in app.ts, so the server stamps and
+    // verifies it from the session — we send our own id only so the
+    // optimistic row is complete; a forged seller id would be rejected.
+    const seed = Math.random().toString(36).slice(2, 8);
+    const slug = makeSlug(title.trim(), seed);
+    try {
+      await db.insert("Listing", {
+        sellerId: userId,
+        sellerName: name,
+        title: title.trim(),
+        slug,
+        description: description.trim(),
+        price: Math.max(0, Math.round(value * 100) / 100),
+        category,
+        condition,
+        status: "active",
+        seed,
+        createdAt: new Date().toISOString(),
+      });
+      router.push(`/listing/${slug}`);
+    } catch (e) {
+      setErr((e as Error).message ?? "Could not post your listing.");
+      setBusy(false);
+    }
+  }
+
+  return (
+    <form onSubmit={submit} className="space-y-5">
+      <div className="space-y-1.5">
+        <Label htmlFor="title">Title</Label>
+        <Input
+          id="title"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="e.g. Herman Miller Aeron, size B"
+        />
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="description">Description</Label>
+        <Textarea
+          id="description"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="Condition details, dimensions, why you're selling…"
+          rows={4}
+        />
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-1.5">
+          <Label htmlFor="price">Price ($)</Label>
+          <Input
+            id="price"
+            type="number"
+            min="0"
+            step="1"
+            value={price}
+            onChange={(e) => setPrice(e.target.value)}
+            placeholder="0"
+          />
+        </div>
+        <div className="space-y-1.5">
+          <Label htmlFor="condition">Condition</Label>
+          <select
+            id="condition"
+            value={condition}
+            onChange={(e) => setCondition(e.target.value)}
+            className={selectClass}
+          >
+            {CONDITIONS.map((c) => (
+              <option key={c} value={c}>
+                {c}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+      <div className="space-y-1.5">
+        <Label htmlFor="category">Category</Label>
+        <select
+          id="category"
+          value={category}
+          onChange={(e) => setCategory(e.target.value)}
+          className={selectClass}
+        >
+          {CATEGORIES.map((c) => (
+            <option key={c} value={c}>
+              {c}
+            </option>
+          ))}
+        </select>
+      </div>
+      {err ? <p className="text-sm text-destructive">{err}</p> : null}
+      <Button type="submit" disabled={busy} className="w-full">
+        {busy ? "Posting…" : "Post listing"}
+      </Button>
+      <p className="text-center text-xs text-muted-foreground">
+        Posting as <span className="font-medium">{name}</span> — buyers'
+        offers land in <a href="/me" className="underline">My Market</a>.
+      </p>
+    </form>
+  );
+}
+
+export function SellForm() {
+  return (
+    <MarketProvider>
+      <AuthGate
+        title="Sign in to list an item"
+        blurb="Selling needs an account so your listings are tied to you. The demo account is prefilled — just hit Log in."
+      >
+        <Form />
+      </AuthGate>
+    </MarketProvider>
+  );
+}

package/templates/marketplace/client/WatchButton.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { db } from "@pylonsync/react";
+import { Heart } from "lucide-react";
+import { cn } from "../ui/utils";
+import { bootClient, readIdentity, type Watch } from "./market";
+
+// Heart toggle that saves a listing to your private watchlist. Self-contained
+// (no provider needed): boots the client, reads identity, and toggles the
+// Watch row with optimistic db.insert / db.delete — the live query below flips
+// the fill instantly. Hidden for signed-out visitors (watchlists are a
+// logged-in feature). The mounted gate keeps db.useQuery off the SSR pass.
+export function WatchButton(props: {
+  listingId: string;
+  listingTitle: string;
+  className?: string;
+}) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    bootClient();
+    setMounted(true);
+  }, []);
+  if (!mounted) return null;
+  return <Inner {...props} />;
+}
+
+function Inner({
+  listingId,
+  listingTitle,
+  className,
+}: {
+  listingId: string;
+  listingTitle: string;
+  className?: string;
+}) {
+  const [identity, setIdentity] = useState(() => readIdentity());
+  useEffect(() => {
+    const on = () => setIdentity(readIdentity());
+    window.addEventListener("pylon-auth-changed", on);
+    window.addEventListener("storage", on);
+    return () => {
+      window.removeEventListener("pylon-auth-changed", on);
+      window.removeEventListener("storage", on);
+    };
+  }, []);
+
+  // Policy scopes reads to the caller, so this returns only MY watch (if any)
+  // for this listing.
+  const { data } = db.useQuery<Watch>("Watch", { where: { listingId } });
+  const mine = identity ? data?.find((w) => w.userId === identity.userId) : undefined;
+  const watched = !!mine;
+
+  // No heart for signed-out visitors.
+  if (!identity) return null;
+
+  function toggle(e: React.MouseEvent) {
+    // Stop the click from bubbling into the surrounding card link.
+    e.preventDefault();
+    e.stopPropagation();
+    if (mine) {
+      void db.delete("Watch", mine.id);
+    } else {
+      void db.insert("Watch", { userId: identity!.userId, listingId, listingTitle });
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={toggle}
+      aria-pressed={watched}
+      aria-label={watched ? "Remove from watchlist" : "Save to watchlist"}
+      title={watched ? "Saved" : "Save to watchlist"}
+      className={cn(
+        "grid size-9 place-items-center rounded-full bg-background/80 backdrop-blur transition hover:bg-background",
+        className,
+      )}
+    >
+      <Heart
+        className={cn(
+          "size-5 transition",
+          watched ? "fill-rose-500 text-rose-500" : "text-foreground/70",
+        )}
+      />
+    </button>
+  );
+}