@pylonsync/create-pylon 0.3.356 → 0.3.358

package/templates/marketplace/app/listing/[id]/page.tsx

@@ -1,21 +1,34 @@
 import React, { Suspense, use } from "react";
 import {
   Link,
+  useRouteData,
   type GenerateMetadata,
   type Metadata,
   type PageProps,
   type ServerData,
   type SsrResponse,
 } from "@pylonsync/react";
-import { Badge } from "../../../ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card } from "@/components/ui/card";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty";
+import { Separator } from "@/components/ui/separator";
+import { Skeleton } from "@/components/ui/skeleton";
 import { OfferPanel } from "../../../client/OfferPanel";
 import { CategoryIcon } from "../../_components/CategoryIcon";
 import { WatchButton } from "../../../client/WatchButton";
+import { LiveListingStatus } from "../../../client/LiveListingStatus";
 import {
   gradient,
   money,
   conditionLabel,
   type Listing,
+  type Offer,
 } from "../../../client/market";
 
 // Resolve a listing from the URL segment, which is its slug
@@ -47,12 +60,12 @@ export const generateMetadata: GenerateMetadata = async ({
   serverData,
 }): Promise<Metadata> => {
   const l = await resolveListing(serverData, params.id);
-  if (!l) return { title: "Listing not found · Pylon Market" };
+  if (!l) return { title: "Listing not found | Reprise" };
   return {
-    title: `${l.title} — ${money(l.price)} · Pylon Market`,
+    title: `${l.title} | ${money(l.price)} | Reprise`,
     description:
       l.description?.slice(0, 155) ||
-      `${l.title} for sale on Pylon Market (${conditionLabel(l.condition)}).`,
+      `${l.title} for sale on Reprise (${conditionLabel(l.condition)}).`,
   };
 };
 
@@ -65,88 +78,170 @@ function Detail({
   response: SsrResponse;
   id: string;
 }) {
-  const listing = use(resolveListing(serverData, id));
+  // Listing cards seed this route with the row they already rendered.
+  // useRouteData paints that real content immediately, resets scroll at the
+  // start of navigation, then upgrades it to the authoritative server row in
+  // place. Direct loads still suspend for SSR as normal.
+  const listing = useRouteData<Listing | null>(
+    () => resolveListing(serverData, id),
+    [serverData, id],
+  );
 
   if (!listing) {
     response.setStatus(404);
     return (
-      <div className="rounded-xl border border-dashed p-12 text-center">
-        <p className="font-medium">This listing is gone.</p>
-        <Link href="/" className="mt-2 inline-block text-sm underline">
-          Back to the market
-        </Link>
-      </div>
+      <Empty className="mx-auto min-h-[60vh] max-w-xl border-0">
+        <EmptyHeader>
+          <p className="text-sm font-medium text-muted-foreground">Unavailable</p>
+          <EmptyTitle className="text-3xl tracking-[-0.03em]">
+            This listing is no longer available
+          </EmptyTitle>
+          <EmptyDescription className="max-w-md">
+            It may have sold or been removed by the seller. Browse the latest
+            finds to discover something similar.
+          </EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+          <Button asChild size="lg">
+            <Link href="/">Browse latest finds</Link>
+          </Button>
+        </EmptyContent>
+      </Empty>
     );
   }
 
   return (
-    <div className="space-y-6">
+    <div className="flex flex-col gap-6 pb-10">
       <Link
         href="/"
-        className="text-sm text-muted-foreground hover:text-foreground"
+        className="inline-flex min-h-10 items-center text-sm text-muted-foreground transition-colors hover:text-foreground"
       >
-        ← Back to the market
+        ← Back to browse
       </Link>
 
-      <div className="grid gap-8 md:grid-cols-2">
-        <div
-          className="relative flex aspect-square items-center justify-center rounded-2xl text-white/90"
-          style={{ background: gradient(listing.seed || listing.id) }}
-        >
-          <CategoryIcon category={listing.category} className="size-28" />
+      <div className="grid gap-8 lg:grid-cols-[minmax(0,1.16fr)_minmax(360px,.84fr)] lg:gap-12">
+        <div className="relative aspect-[4/5] overflow-hidden rounded-[24px] bg-muted shadow-[var(--shadow-border)] sm:aspect-[6/5] lg:aspect-[4/5]">
+          {listing.imageUrl ? (
+            <img
+              src={listing.imageUrl}
+              alt={listing.title}
+              width="1200"
+              height="1500"
+              fetchPriority="high"
+              decoding="async"
+              className="h-full w-full object-cover outline outline-1 -outline-offset-1 outline-border"
+            />
+          ) : (
+            <div
+              className="flex h-full w-full items-center justify-center text-white/90"
+              style={{ background: gradient(listing.seed || listing.id) }}
+            >
+              <CategoryIcon category={listing.category} className="size-28" />
+            </div>
+          )}
           <WatchButton
             listingId={listing.id}
             listingTitle={listing.title}
-            className="absolute right-3 top-3"
+            className="absolute right-4 top-4"
+          />
+          <LiveListingStatus
+            listingId={listing.id}
+            initialStatus={listing.status}
+            mode="overlay"
           />
-          {listing.status === "sold" ? (
-            <span className="absolute inset-0 grid place-items-center rounded-2xl bg-black/55 text-2xl font-bold uppercase tracking-wide">
-              Sold
-            </span>
-          ) : null}
         </div>
 
-        <div className="flex flex-col gap-4">
-          <div className="space-y-1">
-            <div className="flex items-center gap-2 text-xs uppercase tracking-wider text-muted-foreground">
-              <span>{listing.category}</span>
-              <span>·</span>
-              <Badge variant="outline" className="text-[10px]">
-                {conditionLabel(listing.condition)}
-              </Badge>
-            </div>
-            <h1 className="text-2xl font-semibold tracking-tight">
+        <div className="flex min-w-0 flex-col">
+          <div>
+            <p className="text-sm capitalize text-muted-foreground">
+              {listing.category} / {conditionLabel(listing.condition)}
+            </p>
+            <h1 className="mt-2 text-balance text-3xl font-semibold leading-tight tracking-[-0.035em] sm:text-4xl">
               {listing.title}
             </h1>
-            <p className="text-3xl font-semibold tabular-nums">{money(listing.price)}</p>
-            <p className="text-sm text-muted-foreground">
-              Listed by <span className="font-medium">{listing.sellerName}</span>
+            <p className="mt-3 text-4xl font-semibold tracking-[-0.03em] tabular-nums">
+              {money(listing.price)}
+            </p>
+            <p className="mt-2 text-sm text-muted-foreground">
+              Listed by{" "}
+              <span className="font-medium text-foreground">{listing.sellerName}</span>
             </p>
           </div>
 
-          {listing.description ? (
-            <p className="whitespace-pre-wrap text-sm leading-relaxed text-foreground/80">
-              {listing.description}
+          <Separator className="my-6" />
+
+          <section>
+            <h2 className="text-sm font-medium">About this item</h2>
+            <p className="mt-2 whitespace-pre-wrap text-pretty text-sm leading-6 text-muted-foreground">
+              {listing.description || "The seller has not added a description yet."}
             </p>
-          ) : null}
-
-          {/* Realtime client island: live offers, accept/decline. */}
-          <div className="mt-2">
-            <OfferPanel
-              listingId={listing.id}
-              sellerId={listing.sellerId}
-              sellerName={listing.sellerName}
-              title={listing.title}
-              price={listing.price}
-              status={listing.status}
-            />
+          </section>
+
+          <Card className="my-6 grid grid-cols-2 gap-px overflow-hidden rounded-xl bg-border">
+            <div className="bg-card p-4">
+              <p className="text-xs text-muted-foreground">Condition</p>
+              <p className="mt-1 text-sm font-medium">{conditionLabel(listing.condition)}</p>
+            </div>
+            <div className="bg-card p-4">
+              <p className="text-xs text-muted-foreground">Offer status</p>
+              <p className="mt-1 text-sm font-medium">
+                <LiveListingStatus
+                  listingId={listing.id}
+                  initialStatus={listing.status}
+                />
+              </p>
+            </div>
+          </Card>
+
+          <div className="mt-6">
+            <Suspense fallback={<ListingOffers listing={listing} />}>
+              <LoadedListingOffers serverData={serverData} listing={listing} />
+            </Suspense>
           </div>
+
+          <p className="mt-4 text-pretty text-xs leading-5 text-muted-foreground">
+            Reprise keeps offers and listing status in sync. Confirm payment and
+            delivery details with the seller before completing a transaction.
+          </p>
         </div>
       </div>
     </div>
   );
 }
 
+function ListingOffers({
+  listing,
+  initialOffers,
+}: {
+  listing: Listing;
+  initialOffers?: Offer[];
+}) {
+  return (
+    <OfferPanel
+      listingId={listing.id}
+      sellerId={listing.sellerId}
+      sellerName={listing.sellerName}
+      title={listing.title}
+      price={listing.price}
+      status={listing.status}
+      initialOffers={initialOffers}
+    />
+  );
+}
+
+function LoadedListingOffers({
+  serverData,
+  listing,
+}: {
+  serverData: ServerData;
+  listing: Listing;
+}) {
+  const initialOffers = use(
+    serverData.query<Offer>("Offer", { listingId: listing.id }),
+  );
+  return <ListingOffers listing={listing} initialOffers={initialOffers} />;
+}
+
 export default function ListingPage({
   params,
   serverData,
@@ -156,16 +251,21 @@ export default function ListingPage({
     <Suspense
       fallback={
         <div className="grid gap-8 md:grid-cols-2">
-          <div className="aspect-square animate-pulse rounded-2xl bg-muted" />
-          <div className="space-y-3">
-            <div className="h-6 w-2/3 animate-pulse rounded bg-muted" />
-            <div className="h-8 w-1/3 animate-pulse rounded bg-muted" />
-            <div className="h-24 animate-pulse rounded bg-muted" />
+          <Skeleton className="aspect-[4/5] rounded-[24px]" />
+          <div className="flex flex-col gap-3">
+            <Skeleton className="h-6 w-2/3" />
+            <Skeleton className="h-8 w-1/3" />
+            <Skeleton className="h-24" />
           </div>
         </div>
       }
     >
-      <Detail serverData={serverData} response={response} id={params.id} />
+      <Detail
+        key={params.id}
+        serverData={serverData}
+        response={response}
+        id={params.id}
+      />
     </Suspense>
   );
 }

package/templates/marketplace/app/me/page.tsx

@@ -3,9 +3,9 @@ import { type Metadata } from "@pylonsync/react";
 import { MyMarket } from "../../client/MyMarket";
 
 export const metadata: Metadata = {
-  title: "My Market · Pylon Market",
-  description: "Your listings and offers.",
-  robots: "noindex", // personal dashboard — keep it out of search
+  title: "Dashboard | Reprise",
+  description: "Your listings, saved finds, and offers.",
+  robots: "noindex", // personal dashboard; keep it out of search
 };
 
 // Fully interactive dashboard (three live queries scoped to you), so the

package/templates/marketplace/app/not-found.tsx

@@ -1,20 +1,29 @@
 import React from "react";
 import { Link, type NotFoundProps } from "@pylonsync/react";
+import { Button } from "@/components/ui/button";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyTitle,
+} from "@/components/ui/empty";
 
 // `app/not-found.tsx` → rendered at HTTP 404 for any unmatched URL (and when a
 // page calls `response.notFound()` — e.g. a listing slug that doesn't resolve).
 // Hydrated, so the link is a client nav.
 export default function NotFound(_props: NotFoundProps) {
   return (
-    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
-      <h1 className="text-3xl font-semibold tracking-tight">404</h1>
-      <p className="mt-2 text-muted-foreground">We couldn&apos;t find that listing.</p>
-      <Link
-        href="/"
-        className="mt-6 inline-flex h-10 items-center rounded-md bg-foreground px-5 text-sm font-medium text-background transition hover:opacity-90"
-      >
-        Back to browse
-      </Link>
-    </div>
+    <Empty className="mx-auto min-h-[60vh] max-w-3xl border-0 px-6">
+      <EmptyHeader>
+        <EmptyTitle className="text-3xl">404</EmptyTitle>
+        <EmptyDescription>We couldn&apos;t find that page.</EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button asChild>
+          <Link href="/">Back to browse</Link>
+        </Button>
+      </EmptyContent>
+    </Empty>
   );
 }