@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/marketplace/app.ts

@@ -8,9 +8,10 @@
  *   - The browse grid (`/`) and each listing page (`/listing/:id`) are
  *     SERVER-RENDERED with real rows from the database (good for SEO + LCP) —
  *     view source and the products are in the HTML, not fetched later.
- *   - The interactive, realtime bits — the "just listed" ticker, the live
- *     offers on a listing, your inbox on `/me` — ride the sync engine: a
- *     single `useQuery` fans every write out to every open tab instantly.
+ *   - The realtime parts ride the sync engine: the browse grid (new
+ *     listings, offer counts, sold status), the activity feed, the offers on
+ *     a listing, and your dashboard on `/me`. One `useQuery` per view fans
+ *     every write out to every open tab.
  *   - One binary, one port. SSR + REST + WebSockets all from `pylon dev`.
  *     No Next.js app, no separate realtime service.
  */
@@ -21,6 +22,7 @@ import {
   buildManifest,
   discoverAppRoutes,
   discoverFunctions,
+  font,
 } from "@pylonsync/sdk";
 
 // Accounts. Email/password auth is built in: registering through
@@ -41,13 +43,13 @@ const User = entity(
   },
 );
 
-// A thing for sale. `imageUrl` is optional so listings created before the
-// photo field was added still render with a deterministic fallback.
+// A thing for sale. A listing without `imageUrl` renders a deterministic
+// gradient placeholder.
 // `status` flips active → sold when an offer is accepted.
 //
 // `sellerId: field.owner()` is what lets SellForm create a listing with a
-// plain, optimistic `db.insert` (it shows in the live ticker the instant
-// you post — no server round-trip) while the seller id stays unspoofable:
+// plain, optimistic `db.insert` (it shows in every open browse grid the
+// instant you post, before the server round-trip) while the seller id stays unspoofable:
 // the framework stamps it from the session and rejects any forged value.
 // No createListing function needed. `status` + `createdAt` default
 // server-side so the client doesn't have to send them.
@@ -56,6 +58,8 @@ const Listing = entity(
   {
     sellerId: field.string().owner(),
     sellerName: field.string(),
+    // Where the item is, as the seller wrote it ("Brooklyn, NY").
+    location: field.string().optional(),
     title: field.string(),
     // Human-readable URL key: "herman-miller-aeron-size-b-a1f3". Unique so it
     // addresses exactly one listing; the detail route resolves by it.
@@ -190,6 +194,27 @@ const manifest = buildManifest({
   // File-based SSR routing: app/**/page.tsx. One binary serves the frontend
   // and the API on one port.
   routes: await discoverAppRoutes(),
+  // Self-hosted web fonts. globals.css maps them onto Tailwind's font-sans
+  // and font-display.
+  fonts: [
+    font({
+      family: "Geist",
+      variable: "--font-geist",
+      weights: ["400", "500", "600"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: true,
+    }),
+    font({
+      family: "Instrument Serif",
+      variable: "--font-instrument",
+      weights: ["400"],
+      styles: ["normal", "italic"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: true,
+    }),
+  ],
 });
 
 // Not a debug leftover: the CLI runs `bun run app.ts` and parses stdout as

package/templates/marketplace/client/ActivityFeed.tsx

@@ -0,0 +1,311 @@
+"use client";
+
+import React, { useRef } from "react";
+import { Link, db } from "@pylonsync/react";
+import { cn } from "@/lib/utils";
+import { listingSrcSet } from "../lib/catalog";
+import { MarketProvider } from "./MarketProvider";
+import { gradient, money, timeAgo, type Listing, type Offer } from "./market";
+
+// Live marketplace activity: new listings, offers, and sales, merged from two
+// live queries. A row written in any tab (by any visitor) slides in at the
+// top with a short highlight. Reads are public, so this runs for signed-out
+// visitors on the guest session.
+
+type ActivityEvent = {
+  key: string;
+  kind: "listed" | "offer" | "sold";
+  at: string;
+  listing?: Listing;
+  title: string;
+  href: string;
+  who: string;
+  amount: number;
+};
+
+function useEvents(limit: number): {
+  events: ActivityEvent[];
+  forSale: number;
+  openOffers: number;
+  loading: boolean;
+} {
+  const { data: listingRows, loading } = db.useQuery<Listing>("Listing", {
+    orderBy: { createdAt: "desc" },
+  });
+  const { data: offerRows } = db.useQuery<Offer>("Offer", {
+    orderBy: { createdAt: "desc" },
+    limit: 40,
+  });
+  const listings = listingRows ?? [];
+  const offers = offerRows ?? [];
+  const byId = new Map(listings.map((l) => [l.id, l]));
+
+  const events: ActivityEvent[] = [
+    ...listings.slice(0, 20).map((l) => ({
+      key: `l-${l.id}`,
+      kind: "listed" as const,
+      at: l.createdAt,
+      listing: l,
+      title: l.title,
+      href: `/listing/${l.slug || l.id}`,
+      who: l.sellerName,
+      amount: l.price,
+    })),
+    ...offers.map((o) => {
+      const listing = byId.get(o.listingId);
+      return {
+        key: `o-${o.id}`,
+        kind: o.status === "accepted" ? ("sold" as const) : ("offer" as const),
+        at: o.createdAt,
+        listing,
+        title: o.listingTitle,
+        href: `/listing/${listing?.slug || o.listingId}`,
+        who: o.buyerName,
+        amount: o.amount,
+      };
+    }),
+  ]
+    .sort((a, b) => Date.parse(b.at) - Date.parse(a.at))
+    .slice(0, limit);
+
+  return {
+    events,
+    forSale: listings.filter((l) => l.status === "active").length,
+    openOffers: offers.filter((o) => o.status === "pending").length,
+    loading,
+  };
+}
+
+function Thumb({ listing, className }: { listing?: Listing; className?: string }) {
+  return (
+    <span
+      className={cn(
+        "relative block shrink-0 overflow-hidden rounded-lg bg-muted",
+        className,
+      )}
+      style={
+        listing && !listing.imageUrl
+          ? { background: gradient(listing.seed || listing.id) }
+          : undefined
+      }
+    >
+      {listing?.imageUrl ? (
+        <img
+          src={listing.imageUrl}
+          srcSet={listingSrcSet(listing.imageUrl)}
+          sizes="48px"
+          alt=""
+          width="48"
+          height="60"
+          loading="lazy"
+          className="size-full object-cover"
+        />
+      ) : null}
+      <span
+        aria-hidden="true"
+        className="absolute inset-0 rounded-lg ring-1 ring-inset ring-black/5"
+      />
+    </span>
+  );
+}
+
+function Sentence({ event }: { event: ActivityEvent }) {
+  if (event.kind === "listed") {
+    return (
+      <>
+        <span className="font-medium text-foreground">{event.who}</span> listed{" "}
+        <span className="text-foreground">{event.title}</span>
+      </>
+    );
+  }
+  if (event.kind === "sold") {
+    return (
+      <>
+        <span className="text-foreground">{event.title}</span> sold for{" "}
+        <span className="font-medium tabular-nums text-foreground">
+          {money(event.amount)}
+        </span>
+      </>
+    );
+  }
+  return (
+    <>
+      <span className="font-medium text-foreground">{event.who}</span> offered{" "}
+      <span className="font-medium tabular-nums text-foreground">
+        {money(event.amount)}
+      </span>{" "}
+      on <span className="text-foreground">{event.title}</span>
+    </>
+  );
+}
+
+function Tag({ kind }: { kind: ActivityEvent["kind"] }) {
+  const label = { listed: "Listed", offer: "Offer", sold: "Sold" }[kind];
+  return (
+    <span
+      className={cn(
+        "rounded-full px-1.5 py-px text-[10px] font-semibold",
+        kind === "offer" && "bg-signal/12 text-signal-foreground",
+        kind === "sold" && "bg-foreground text-background",
+        kind === "listed" && "bg-muted text-muted-foreground",
+      )}
+    >
+      {label}
+    </span>
+  );
+}
+
+function LiveDot() {
+  return (
+    <span className="relative flex size-2" aria-hidden="true">
+      <span className="market-ping absolute inline-flex size-full rounded-full bg-signal" />
+      <span className="relative inline-flex size-2 rounded-full bg-signal" />
+    </span>
+  );
+}
+
+function Rail() {
+  const { events, forSale, openOffers, loading } = useEvents(9);
+  // Keys rendered on the first settled pass. Later keys arrived live.
+  const seen = useRef<Set<string> | null>(null);
+  if (seen.current === null && !loading) {
+    seen.current = new Set(events.map((e) => e.key));
+  }
+
+  return (
+    <section
+      aria-labelledby="activity-heading"
+      className="rounded-2xl bg-card shadow-[var(--shadow-border)]"
+    >
+      <div className="flex items-center justify-between px-4 pb-3 pt-4">
+        <h2
+          id="activity-heading"
+          className="flex items-center gap-2 text-sm font-semibold"
+        >
+          <LiveDot />
+          Live activity
+        </h2>
+      </div>
+      <dl className="mx-4 grid grid-cols-2 gap-px overflow-hidden rounded-xl bg-border">
+        <div className="bg-card px-3 py-2.5">
+          <dt className="text-xs text-muted-foreground">For sale</dt>
+          <dd className="font-display text-[28px] leading-8 tabular-nums">
+            {forSale}
+          </dd>
+        </div>
+        <div className="bg-card px-3 py-2.5">
+          <dt className="text-xs text-muted-foreground">Open offers</dt>
+          <dd className="font-display text-[28px] leading-8 tabular-nums">
+            {openOffers}
+          </dd>
+        </div>
+      </dl>
+      <ol aria-live="polite" className="mt-2 flex flex-col px-2 pb-2">
+        {events.map((event) => {
+          const fresh = seen.current !== null && !seen.current.has(event.key);
+          return (
+            <li key={event.key} className={cn(fresh && "market-rise")}>
+              <Link
+                href={event.href}
+                seed={event.listing}
+                className={cn(
+                  "flex items-start gap-3 rounded-xl px-2 py-2 transition-colors hover:bg-accent",
+                  fresh && "market-flash",
+                )}
+              >
+                <Thumb listing={event.listing} className="h-[50px] w-10" />
+                <span className="min-w-0 flex-1">
+                  <span className="line-clamp-2 text-[13px] leading-[18px] text-muted-foreground">
+                    <Sentence event={event} />
+                  </span>
+                  <span className="mt-1 flex items-center gap-2">
+                    <Tag kind={event.kind} />
+                    <span className="text-[11px] text-muted-foreground">
+                      {timeAgo(event.at)}
+                    </span>
+                  </span>
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ol>
+    </section>
+  );
+}
+
+function Strip() {
+  const { events, loading } = useEvents(8);
+  const seen = useRef<Set<string> | null>(null);
+  if (seen.current === null && !loading) {
+    seen.current = new Set(events.map((e) => e.key));
+  }
+  if (events.length === 0) return null;
+
+  return (
+    <section aria-label="Live activity" className="-mx-4 sm:-mx-8">
+      <ol className="hide-scrollbar flex gap-2 overflow-x-auto px-4 sm:px-8">
+        <li className="flex shrink-0 items-center gap-2 pr-1 text-xs font-semibold">
+          <LiveDot />
+          Live
+        </li>
+        {events.map((event) => {
+          const fresh = seen.current !== null && !seen.current.has(event.key);
+          return (
+            <li key={event.key} className={cn("shrink-0", fresh && "market-rise")}>
+              <Link
+                href={event.href}
+                seed={event.listing}
+                className={cn(
+                  "flex w-64 items-center gap-2.5 rounded-xl bg-card p-1.5 pr-3 shadow-[var(--shadow-border)]",
+                  fresh && "market-flash",
+                )}
+              >
+                <Thumb listing={event.listing} className="h-10 w-8" />
+                <span className="min-w-0 flex-1 truncate text-xs text-muted-foreground">
+                  <Sentence event={event} />
+                </span>
+              </Link>
+            </li>
+          );
+        })}
+      </ol>
+    </section>
+  );
+}
+
+export function ActivityRail() {
+  return (
+    <MarketProvider fallback={<RailSkeleton />}>
+      <Rail />
+    </MarketProvider>
+  );
+}
+
+export function ActivityStrip() {
+  return (
+    <MarketProvider fallback={<div className="h-[52px]" />}>
+      <Strip />
+    </MarketProvider>
+  );
+}
+
+function RailSkeleton() {
+  return (
+    <div className="rounded-2xl bg-card p-4 shadow-[var(--shadow-border)]">
+      <div className="h-4 w-28 rounded bg-muted" />
+      <div className="mt-4 h-16 rounded-xl bg-muted" />
+      <div className="mt-4 flex flex-col gap-3">
+        {Array.from({ length: 6 }).map((_, i) => (
+          <div key={i} className="flex gap-3">
+            <div className="h-[50px] w-10 rounded-lg bg-muted" />
+            <div className="flex flex-1 flex-col gap-2 pt-1">
+              <div className="h-3 rounded bg-muted" />
+              <div className="h-3 w-1/2 rounded bg-muted" />
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/marketplace/client/AuthNav.tsx

@@ -2,40 +2,48 @@
 
 import React from "react";
 import { Link } from "@pylonsync/react";
-import { Button } from "@/components/ui/button";
 import { MarketProvider, useAuth } from "./MarketProvider";
+import { avatarColor, initials } from "./market";
 
-// Compact sign-in state for the header. Signed out → a link to /sell (which
-// gates with the prefilled demo login). Signed in → your name + a sign-out
-// button. Lives behind MarketProvider like every other island.
+// Sign-in state for the header. Signed out: a link to the dashboard, which
+// shows the prefilled demo sign-in. Signed in: an avatar and a sign-out button.
 function Nav() {
   const { identity, signOut } = useAuth();
   if (!identity) {
     return (
-      <Button asChild variant="outline" size="sm">
-        <Link href="/sell">Sign in</Link>
-      </Button>
+      <Link
+        href="/me"
+        className="inline-flex min-h-10 items-center rounded-full px-3.5 text-sm font-medium shadow-[var(--shadow-border)] transition-shadow hover:shadow-[var(--shadow-border-hover)]"
+      >
+        Sign in
+      </Link>
     );
   }
   return (
-    <div className="flex items-center gap-2 text-sm">
-      <span className="hidden text-muted-foreground sm:inline">
-        {identity.name}
-      </span>
-      <Button
-        variant="ghost"
-        size="sm"
+    <div className="flex items-center gap-1">
+      <Link
+        href="/me"
+        aria-label={`Your market (${identity.name})`}
+        title={identity.name}
+        className="grid size-9 place-items-center rounded-full text-xs font-semibold text-white"
+        style={{ background: avatarColor(identity.name) }}
+      >
+        {initials(identity.name)}
+      </Link>
+      <button
+        type="button"
         onClick={() => void signOut()}
+        className="hidden min-h-10 items-center rounded-full px-3 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-foreground lg:inline-flex"
       >
         Sign out
-      </Button>
+      </button>
     </div>
   );
 }
 
 export function AuthNav() {
   return (
-    <MarketProvider fallback={<span className="w-16" />}>
+    <MarketProvider fallback={<span className="inline-block w-[72px]" />}>
       <Nav />
     </MarketProvider>
   );

package/templates/marketplace/client/ListingCard.tsx

@@ -0,0 +1,118 @@
+import React from "react";
+import { Link } from "@pylonsync/react";
+import { cn } from "@/lib/utils";
+import { listingSrcSet } from "../lib/catalog";
+import { CategoryIcon } from "../app/_components/CategoryIcon";
+import { WatchButton } from "./WatchButton";
+import {
+  conditionLabel,
+  gradient,
+  money,
+  timeAgo,
+  type Listing,
+} from "./market";
+
+// One tile in the browse grid. Pure render (no data hooks), so the server
+// grid and the live client grid draw the same markup.
+export function ListingCard({
+  listing,
+  pendingOffers = 0,
+  fresh = false,
+  eager = false,
+  sizes = "(min-width: 1280px) 20vw, (min-width: 768px) 30vw, 50vw",
+  className,
+}: {
+  listing: Listing;
+  /** Live count of pending offers; 0 hides the pill. */
+  pendingOffers?: number;
+  /** Arrived over sync after first paint. */
+  fresh?: boolean;
+  /** Load the photo eagerly (first row). */
+  eager?: boolean;
+  sizes?: string;
+  className?: string;
+}) {
+  const sold = listing.status === "sold";
+  const href = `/listing/${listing.slug || listing.id}`;
+
+  return (
+    <article
+      className={cn(
+        "group relative min-w-0",
+        fresh && "market-rise",
+        className,
+      )}
+    >
+      <Link href={href} seed={listing} className="block rounded-xl">
+        <div className="relative aspect-[4/5] overflow-hidden rounded-xl bg-muted">
+          {listing.imageUrl ? (
+            <img
+              src={listing.imageUrl}
+              srcSet={listingSrcSet(listing.imageUrl)}
+              sizes={sizes}
+              alt={listing.title}
+              width="640"
+              height="800"
+              loading={eager ? "eager" : "lazy"}
+              fetchPriority={eager ? "high" : undefined}
+              decoding="async"
+              className="size-full object-cover transition-transform duration-700 ease-[var(--ease-out-soft)] group-hover:scale-[1.035]"
+            />
+          ) : (
+            <div
+              className="flex size-full items-center justify-center text-white/85"
+              style={{ background: gradient(listing.seed || listing.id) }}
+            >
+              <CategoryIcon category={listing.category} className="size-12" />
+            </div>
+          )}
+          <span
+            aria-hidden="true"
+            className="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-black/5"
+          />
+
+          {sold ? (
+            <span className="absolute inset-0 grid place-items-center bg-black/45">
+              <span className="rounded-full bg-white px-3.5 py-1 text-xs font-semibold text-neutral-900">
+                Sold
+              </span>
+            </span>
+          ) : fresh ? (
+            <span className="absolute left-2.5 top-2.5 inline-flex items-center gap-1.5 rounded-full bg-signal px-2.5 py-1 text-[11px] font-semibold text-white shadow-[var(--shadow-float)]">
+              Just listed
+            </span>
+          ) : pendingOffers > 0 ? (
+            <span className="absolute left-2.5 top-2.5 inline-flex items-center gap-1.5 rounded-full bg-white/92 px-2.5 py-1 text-[11px] font-medium text-neutral-900 shadow-[var(--shadow-float)] backdrop-blur">
+              <span className="size-1.5 rounded-full bg-signal" aria-hidden="true" />
+              {pendingOffers} {pendingOffers === 1 ? "offer" : "offers"}
+            </span>
+          ) : null}
+        </div>
+
+        <div className="flex flex-col gap-0.5 px-0.5 pt-2.5">
+          <div className="flex items-baseline justify-between gap-2">
+            <p className="text-[15px] font-semibold tabular-nums tracking-[-0.01em]">
+              {money(listing.price)}
+            </p>
+            <p className="shrink-0 text-xs text-muted-foreground" suppressHydrationWarning>
+              {timeAgo(listing.createdAt)}
+            </p>
+          </div>
+          <h3 className="truncate text-sm leading-5 text-foreground/90">
+            {listing.title}
+          </h3>
+          <p className="truncate text-[13px] leading-5 text-muted-foreground">
+            {[listing.location, conditionLabel(listing.condition)]
+              .filter(Boolean)
+              .join(" · ")}
+          </p>
+        </div>
+      </Link>
+      <WatchButton
+        listingId={listing.id}
+        listingTitle={listing.title}
+        className="absolute right-2.5 top-2.5"
+      />
+    </article>
+  );
+}

package/templates/marketplace/client/LiveGrid.tsx

@@ -0,0 +1,92 @@
+"use client";
+
+import React, { useRef } from "react";
+import { db } from "@pylonsync/react";
+import { browseListings, pendingOfferCounts } from "../lib/catalog";
+import { ListingCard } from "./ListingCard";
+import { MarketProvider } from "./MarketProvider";
+import type { Listing, Offer } from "./market";
+
+interface GridProps {
+  /** Active listings the server rendered. */
+  initial: Listing[];
+  /** Pending offers the server rendered, for the offer-count pills. */
+  initialOffers: Offer[];
+  category: string;
+  query: string;
+  sort: string;
+}
+
+const GRID =
+  "grid grid-cols-2 gap-x-3 gap-y-6 sm:gap-x-4 sm:gap-y-8 md:grid-cols-3 xl:grid-cols-4";
+
+// The browse grid. The server renders it from `initial`; once the sync
+// engine connects, the same grid switches to two live queries:
+//   - Listing: a listing posted in any tab rises into place with a
+//     "Just listed" pill, and one that sells gets a Sold overlay.
+//   - Offer: the "N offers" pill on each card follows pending offers.
+export function LiveGrid(props: GridProps) {
+  return (
+    <MarketProvider fallback={<StaticGrid {...props} />}>
+      <Live {...props} />
+    </MarketProvider>
+  );
+}
+
+function StaticGrid({ initial, initialOffers, category, query, sort }: GridProps) {
+  const rows = browseListings(initial, { category, query, sort });
+  const counts = pendingOfferCounts(initialOffers);
+  return (
+    <div className={GRID}>
+      {rows.map((listing, index) => (
+        <ListingCard
+          key={listing.id}
+          listing={listing}
+          pendingOffers={counts.get(listing.id) ?? 0}
+          eager={index < 4}
+        />
+      ))}
+    </div>
+  );
+}
+
+function Live({ initial, initialOffers, category, query, sort }: GridProps) {
+  // Ids present at first paint. Anything else arrived live.
+  const firstIds = useRef<Set<string>>(new Set(initial.map((l) => l.id)));
+
+  const { data: liveListings } = db.useQuery<Listing>("Listing", {
+    orderBy: { createdAt: "desc" },
+  });
+  const { data: liveOffers, loading: offersLoading } = db.useQuery<Offer>(
+    "Offer",
+    { where: { status: "pending" } },
+  );
+
+  const byId = new Map(initial.map((l) => [l.id, l]));
+  for (const listing of liveListings ?? []) byId.set(listing.id, listing);
+  // Keep a listing that sells while on screen (it shows the Sold overlay);
+  // skip listings that were already sold before this page loaded.
+  const rows = browseListings(
+    [...byId.values()].filter(
+      (l) => l.status === "active" || firstIds.current.has(l.id),
+    ),
+    { category, query, sort },
+  );
+  const counts = pendingOfferCounts(
+    offersLoading ? initialOffers : (liveOffers ?? []),
+  );
+
+  return (
+    <div className={GRID}>
+      {rows.map((listing, index) => (
+        <ListingCard
+          key={listing.id}
+          listing={listing}
+          pendingOffers={counts.get(listing.id) ?? 0}
+          fresh={!firstIds.current.has(listing.id)}
+          eager={index < 4}
+        />
+      ))}
+    </div>
+  );
+}