@pylonsync/create-pylon 0.3.357 → 0.3.358

package/templates/marketplace/client/LiveTicker.tsx

@@ -3,6 +3,7 @@
 import React from "react";
 import { Link, db } from "@pylonsync/react";
 import { Tag, BadgeCheck } from "lucide-react";
+import { Card } from "@/components/ui/card";
 import { MarketProvider } from "./MarketProvider";
 import { money, timeAgo, type Listing, type Offer } from "./market";
 
@@ -18,13 +19,13 @@ type Activity = {
   href: string;
   amount?: number;
   at: string;
+  seed?: Listing;
 };
 
 function Ticker() {
   const { data: listingData } = db.useQuery<Listing>("Listing", {
-    where: { status: "active" },
     orderBy: { createdAt: "desc" },
-    limit: 8,
+    limit: 16,
   });
   const { data: saleData } = db.useQuery<Offer>("Offer", {
     where: { status: "accepted" },
@@ -32,13 +33,16 @@ function Ticker() {
     limit: 8,
   });
 
+  const listings = listingData ?? [];
+  const listingById = new Map(listings.map((listing) => [listing.id, listing]));
   const events: Activity[] = [
-    ...(listingData ?? []).map((l) => ({
+    ...listings.filter((l) => l.status === "active").map((l) => ({
       key: `l-${l.id}`,
       kind: "listed" as const,
       title: l.title,
       href: `/listing/${l.slug || l.id}`,
       at: l.createdAt,
+      seed: l,
     })),
     ...(saleData ?? []).map((o) => ({
       key: `s-${o.id}`,
@@ -47,6 +51,7 @@ function Ticker() {
       href: `/listing/${o.listingId}`,
       amount: o.amount,
       at: o.createdAt,
+      seed: listingById.get(o.listingId),
     })),
   ]
     .sort((a, b) => Date.parse(b.at) - Date.parse(a.at))
@@ -55,11 +60,11 @@ function Ticker() {
   if (events.length === 0) return null;
 
   return (
-    <div className="flex items-center gap-3 overflow-hidden rounded-lg border bg-card px-3 py-2 text-sm">
-      <span className="flex shrink-0 items-center gap-1.5 font-medium text-emerald-600">
+    <Card className="flex min-h-11 items-center gap-3 overflow-hidden px-4 py-2 text-sm">
+      <span className="flex shrink-0 items-center gap-1.5 font-medium text-success-foreground">
         <span className="relative flex size-2">
-          <span className="absolute inline-flex size-full animate-ping rounded-full bg-emerald-400 opacity-75" />
-          <span className="relative inline-flex size-2 rounded-full bg-emerald-500" />
+          <span className="absolute inline-flex size-full animate-ping rounded-full bg-success opacity-75" />
+          <span className="relative inline-flex size-2 rounded-full bg-success" />
         </span>
         Live
       </span>
@@ -72,14 +77,21 @@ function Ticker() {
             <Link
               key={`${e.key}-${i}`}
               href={e.href}
+              seed={e.seed}
               className="flex shrink-0 items-center gap-1.5 whitespace-nowrap hover:underline"
               aria-hidden={i >= events.length}
               tabIndex={i >= events.length ? -1 : undefined}
             >
               {e.kind === "sold" ? (
-                <BadgeCheck className="size-3.5 text-emerald-600" />
+                <BadgeCheck
+                  className="size-3.5 text-success-foreground"
+                  aria-hidden="true"
+                />
               ) : (
-                <Tag className="size-3.5 text-muted-foreground" />
+                <Tag
+                  className="size-3.5 text-muted-foreground"
+                  aria-hidden="true"
+                />
               )}
               <span className="font-medium">{e.title}</span>
               <span className="text-muted-foreground">
@@ -91,7 +103,7 @@ function Ticker() {
           ))}
         </div>
       </div>
-    </div>
+    </Card>
   );
 }
 

package/templates/marketplace/client/LoginCard.tsx

@@ -1,9 +1,22 @@
 "use client";
 
 import React, { useState } from "react";
-import { Button } from "../ui/button";
-import { Input } from "../ui/input";
-import { Label } from "../ui/label";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+} from "@/components/ui/card";
+import {
+  Field,
+  FieldGroup,
+  FieldLabel,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import { Spinner } from "@/components/ui/spinner";
 import { useAuth } from "./MarketProvider";
 import { DEMO } from "./market";
 
@@ -12,10 +25,12 @@ import { DEMO } from "./market";
 // with the seeded demo account so it's one click to a working session.
 export function LoginCard({
   title = "Sign in to continue",
-  blurb = "Real email/password auth — no verification email. The demo account is prefilled; just hit Log in.",
+  blurb = "Use the ready demo account or create your own. No verification email is required.",
+  headingLevel = 2,
 }: {
   title?: string;
   blurb?: string;
+  headingLevel?: 1 | 2;
 }) {
   const { signIn, signUp } = useAuth();
   const [mode, setMode] = useState<"login" | "register">("login");
@@ -25,6 +40,7 @@ export function LoginCard({
   const [name, setName] = useState("");
   const [busy, setBusy] = useState(false);
   const [err, setErr] = useState<string | null>(null);
+  const Heading = headingLevel === 1 ? "h1" : "h2";
 
   async function submit(e: React.FormEvent) {
     e.preventDefault();
@@ -41,62 +57,90 @@ export function LoginCard({
   }
 
   return (
-    <div className="mx-auto max-w-sm space-y-4 rounded-xl border bg-card p-6">
-      <div>
-        <h2 className="text-lg font-semibold tracking-tight">{title}</h2>
-        <p className="mt-1 text-sm text-muted-foreground">{blurb}</p>
-      </div>
-      <form onSubmit={submit} className="space-y-3">
-        {mode === "register" ? (
-          <div className="space-y-1.5">
-            <Label htmlFor="lc-name">Name</Label>
-            <Input
-              id="lc-name"
-              value={name}
-              onChange={(e) => setName(e.target.value)}
-              placeholder="Pat Pylon"
-            />
-          </div>
-        ) : null}
-        <div className="space-y-1.5">
-          <Label htmlFor="lc-email">Email</Label>
-          <Input
-            id="lc-email"
-            type="email"
-            required
-            value={email}
-            onChange={(e) => setEmail(e.target.value)}
-            placeholder="you@example.com"
-          />
-        </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="lc-password">Password</Label>
-          <Input
-            id="lc-password"
-            type="password"
-            required
-            minLength={8}
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder={mode === "register" ? "8+ characters" : ""}
-          />
-        </div>
-        {err ? <p className="text-sm text-destructive">{err}</p> : null}
-        <Button type="submit" disabled={busy} className="w-full">
-          {busy
-            ? "…"
-            : mode === "login"
-              ? "Log in"
-              : "Create account"}
-        </Button>
-      </form>
-      <p className="text-center text-xs text-muted-foreground">
+    <Card className="mx-auto max-w-sm">
+      <CardHeader>
+        <Heading className="text-xl font-semibold tracking-[-0.02em]">
+          {title}
+        </Heading>
+        <CardDescription className="text-pretty leading-5">
+          {blurb}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={submit}>
+          <FieldGroup className="gap-4">
+            {mode === "register" ? (
+              <Field>
+                <FieldLabel htmlFor="lc-name">Name</FieldLabel>
+                <Input
+                  id="lc-name"
+                  name="name"
+                  autoComplete="name"
+                  value={name}
+                  onChange={(e) => setName(e.target.value)}
+                  placeholder="Pat Pylon"
+                />
+              </Field>
+            ) : null}
+            <Field>
+              <FieldLabel htmlFor="lc-email">Email</FieldLabel>
+              <Input
+                id="lc-email"
+                name="email"
+                type="email"
+                required
+                autoComplete="email"
+                spellCheck={false}
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="you@example.com"
+              />
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="lc-password">Password</FieldLabel>
+              <Input
+                id="lc-password"
+                name="password"
+                type="password"
+                required
+                minLength={8}
+                autoComplete={
+                  mode === "login" ? "current-password" : "new-password"
+                }
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder={mode === "register" ? "8+ characters" : ""}
+              />
+            </Field>
+            <div aria-live="polite">
+              {err ? (
+                <Alert variant="destructive">
+                  <AlertDescription>{err}</AlertDescription>
+                </Alert>
+              ) : null}
+            </div>
+            <Button type="submit" disabled={busy} className="w-full">
+              {busy ? <Spinner data-icon="inline-start" /> : null}
+              {busy
+                ? mode === "login"
+                  ? "Logging in…"
+                  : "Creating account…"
+                : mode === "login"
+                  ? "Log in"
+                  : "Create account"}
+            </Button>
+          </FieldGroup>
+        </form>
+      </CardContent>
+      <CardFooter className="justify-center text-xs text-muted-foreground">
         {mode === "login" ? (
           <>
             No account?{" "}
-            <button
+            <Button
               type="button"
-              className="font-medium text-foreground hover:underline"
+              variant="link"
+              size="sm"
+              className="px-1"
               onClick={() => {
                 setMode("register");
                 setEmail("");
@@ -105,14 +149,16 @@ export function LoginCard({
               }}
             >
               Sign up
-            </button>
+            </Button>
           </>
         ) : (
           <>
             Have an account?{" "}
-            <button
+            <Button
               type="button"
-              className="font-medium text-foreground hover:underline"
+              variant="link"
+              size="sm"
+              className="px-1"
               onClick={() => {
                 setMode("login");
                 setEmail(DEMO.email);
@@ -121,10 +167,10 @@ export function LoginCard({
               }}
             >
               Log in
-            </button>
+            </Button>
           </>
         )}
-      </p>
-    </div>
+      </CardFooter>
+    </Card>
   );
 }

package/templates/marketplace/client/MarketProvider.tsx

@@ -19,6 +19,7 @@ import {
   type Identity,
 } from "./market";
 import { LoginCard } from "./LoginCard";
+import { Spinner } from "@/components/ui/spinner";
 
 // The sync engine (live queries, WebSocket) is browser-only, so every
 // interactive island mounts behind this provider. It boots the client, keeps
@@ -100,7 +101,10 @@ export function MarketProvider({
     return (
       <>
         {fallback ?? (
-          <span className="text-xs text-muted-foreground">connecting…</span>
+          <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
+            <Spinner />
+            Connecting…
+          </span>
         )}
       </>
     );
@@ -137,12 +141,22 @@ export function AuthGate({
   children,
   title,
   blurb,
+  headingLevel,
 }: {
   children: React.ReactNode;
   title?: string;
   blurb?: string;
+  headingLevel?: 1 | 2;
 }) {
   const { identity } = useAuth();
-  if (!identity) return <LoginCard title={title} blurb={blurb} />;
+  if (!identity) {
+    return (
+      <LoginCard
+        title={title}
+        blurb={blurb}
+        headingLevel={headingLevel}
+      />
+    );
+  }
   return <>{children}</>;
 }

package/templates/marketplace/client/MyMarket.tsx

@@ -2,8 +2,17 @@
 
 import React from "react";
 import { Link, db } from "@pylonsync/react";
-import { Badge } from "../ui/badge";
-import { Button } from "../ui/button";
+import { Badge } from "@/components/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 { Spinner } from "@/components/ui/spinner";
 import { AuthGate, MarketProvider, useIdentity } from "./MarketProvider";
 import { Heart } from "lucide-react";
 import { money, timeAgo, type Listing, type Offer, type Watch } from "./market";
@@ -16,46 +25,53 @@ const statusVariant: Record<string, BadgeVariant> = {
   declined: "outline",
 };
 
+function uniqueById<T extends { id: string }>(rows: T[]): T[] {
+  return Array.from(new Map(rows.map((row) => [row.id, row])).values());
+}
+
 function Dashboard() {
   // Rendered inside <AuthGate>, so identity is non-null here.
   const identity = useIdentity();
   const userId = identity?.userId ?? "";
   const name = identity?.name ?? "you";
 
-  // Three live queries, all scoped to me. Everything updates in place: a new
-  // offer on my listing, a seller answering my bid — no refresh.
+  // Three live queries. Listings + offers are public-read, then narrowed to
+  // the signed-in user in memory; Watch remains policy-scoped to its owner.
+  // Everything updates in place: a new offer on my listing, a seller
+  // answering my bid — no refresh.
   const { data: listings } = db.useQuery<Listing>("Listing", {
-    where: { sellerId: userId },
     orderBy: { createdAt: "desc" },
   });
-  const { data: received } = db.useQuery<Offer>("Offer", {
-    where: { sellerId: userId },
+  const { data: offers } = db.useQuery<Offer>("Offer", {
     orderBy: { createdAt: "desc" },
   });
   const { data: watching } = db.useQuery<Watch>("Watch", {
     where: { userId },
     orderBy: { createdAt: "desc" },
   });
-  const { data: sent } = db.useQuery<Offer>("Offer", {
-    where: { buyerId: userId },
-    orderBy: { createdAt: "desc" },
-  });
 
-  const myListings = listings ?? [];
-  const myOffers = sent ?? [];
-  const watchlist = watching ?? [];
-  const inbound = received ?? [];
+  const allListings = uniqueById(listings ?? []);
+  const listingById = new Map(
+    allListings.map((listing) => [listing.id, listing]),
+  );
+  const myListings = allListings.filter(
+    (listing) => listing.sellerId === userId,
+  );
+  const allOffers = uniqueById(offers ?? []);
+  const myOffers = allOffers.filter((offer) => offer.buyerId === userId);
+  const watchlist = uniqueById(watching ?? []);
+  const inbound = allOffers.filter((offer) => offer.sellerId === userId);
   const pendingFor = (listingId: string) =>
     inbound.filter((o) => o.listingId === listingId && o.status === "pending")
       .length;
 
   return (
-    <div className="space-y-10">
-      <header className="flex items-center justify-between">
+    <div className="flex flex-col gap-10 py-2 sm:py-6">
+      <header className="flex flex-col items-start justify-between gap-5 sm:flex-row sm:items-end">
         <div>
-          <h1 className="text-2xl font-semibold tracking-tight">My Market</h1>
-          <p className="text-sm text-muted-foreground">
-            You're trading as <span className="font-medium">{name}</span>.
+          <h1 className="text-3xl font-semibold tracking-[-0.03em]">Dashboard</h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Signed in as <span className="font-medium text-foreground">{name}</span>.
           </p>
         </div>
         <Button asChild>
@@ -63,21 +79,42 @@ function Dashboard() {
         </Button>
       </header>
 
-      <section className="space-y-3">
+      <section className="flex flex-col gap-3">
         <h2 className="font-semibold">Your listings ({myListings.length})</h2>
         {myListings.length === 0 ? (
-          <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
-            Nothing listed yet.{" "}
-            <Link href="/sell" className="underline">
-              Post your first item
-            </Link>
-            .
-          </p>
+          <Empty className="border-0 bg-card py-8 shadow-[var(--shadow-border)]">
+            <EmptyHeader>
+              <EmptyTitle className="text-base">Nothing listed yet</EmptyTitle>
+              <EmptyDescription>
+                Post your first item and it will appear here.
+              </EmptyDescription>
+            </EmptyHeader>
+            <EmptyContent>
+              <Button asChild variant="outline">
+                <Link href="/sell">Post your first item</Link>
+              </Button>
+            </EmptyContent>
+          </Empty>
         ) : (
-          <ul className="divide-y rounded-lg border">
+          <Card>
+          <ul className="divide-y overflow-hidden">
             {myListings.map((l) => (
               <li key={l.id} className="flex items-center justify-between gap-3 p-3">
-                <Link href={`/listing/${l.slug || l.id}`} className="min-w-0 hover:underline">
+                <Link
+                  href={`/listing/${l.slug || l.id}`}
+                  seed={l}
+                  className="flex min-w-0 items-center gap-3 hover:underline"
+                >
+                  {l.imageUrl ? (
+                    <img
+                      src={l.imageUrl}
+                      alt=""
+                      width="48"
+                      height="48"
+                      loading="lazy"
+                      className="size-12 shrink-0 rounded-lg object-cover outline outline-1 -outline-offset-1 outline-border"
+                    />
+                  ) : null}
                   <span className="truncate font-medium">{l.title}</span>
                 </Link>
                 <div className="flex shrink-0 items-center gap-2 text-sm">
@@ -95,61 +132,85 @@ function Dashboard() {
               </li>
             ))}
           </ul>
+          </Card>
         )}
       </section>
 
-      <section className="space-y-3">
+      <section className="flex flex-col gap-3">
         <h2 className="font-semibold">Offers you've made ({myOffers.length})</h2>
         {myOffers.length === 0 ? (
-          <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
-            No offers out.{" "}
-            <Link href="/" className="underline">
-              Browse the market
-            </Link>
-            .
-          </p>
+          <Empty className="border-0 bg-card py-8 shadow-[var(--shadow-border)]">
+            <EmptyHeader>
+              <EmptyTitle className="text-base">No offers out</EmptyTitle>
+              <EmptyDescription>
+                When you make an offer, its status will stay synced here.
+              </EmptyDescription>
+            </EmptyHeader>
+            <EmptyContent>
+              <Button asChild variant="outline">
+                <Link href="/">Browse the market</Link>
+              </Button>
+            </EmptyContent>
+          </Empty>
         ) : (
-          <ul className="divide-y rounded-lg border">
+          <Card>
+          <ul className="divide-y overflow-hidden">
             {myOffers.map((o) => (
-              <li key={o.id} className="flex items-center justify-between gap-3 p-3">
+              <li
+                key={o.id}
+                className="flex flex-col items-start gap-2 p-3 sm:flex-row sm:items-center sm:justify-between"
+              >
                 <Link
                   href={`/listing/${o.listingId}`}
-                  className="min-w-0 hover:underline"
+                  seed={listingById.get(o.listingId)}
+                  className="min-w-0 max-w-full hover:underline"
                 >
-                  <span className="truncate font-medium">{o.listingTitle}</span>
-                  <span className="ml-2 text-sm text-muted-foreground">
+                  <span className="block truncate font-medium">{o.listingTitle}</span>
+                  <span className="block text-sm text-muted-foreground sm:mt-0 sm:inline sm:pl-2">
                     {timeAgo(o.createdAt)}
                   </span>
                 </Link>
-                <div className="flex shrink-0 items-center gap-2 text-sm">
+                <div className="flex shrink-0 self-end items-center gap-2 text-sm sm:self-auto">
                   <span className="font-semibold tabular-nums">{money(o.amount)}</span>
-                  <Badge variant={statusVariant[o.status] ?? "outline"}>
+                  <Badge
+                    variant={statusVariant[o.status] ?? "outline"}
+                    className="capitalize"
+                  >
                     {o.status}
                   </Badge>
                 </div>
               </li>
             ))}
           </ul>
+          </Card>
         )}
       </section>
 
-      <section className="space-y-3">
+      <section className="flex flex-col gap-3">
         <h2 className="flex items-center gap-2 font-semibold">
-          <Heart className="size-4 text-rose-500" />
+          <Heart
+            aria-hidden="true"
+            className="size-4 fill-foreground text-foreground"
+          />
           Watching ({watchlist.length})
         </h2>
         {watchlist.length === 0 ? (
-          <p className="rounded-lg border border-dashed p-6 text-center text-sm text-muted-foreground">
-            Nothing saved yet. Tap the{" "}
-            <Heart className="inline size-3.5 align-text-bottom" /> on any
-            listing to watch it — your watchlist is private and syncs live.
-          </p>
+          <Empty className="border-0 bg-card py-8 shadow-[var(--shadow-border)]">
+            <EmptyHeader>
+              <EmptyTitle className="text-base">Nothing saved yet</EmptyTitle>
+              <EmptyDescription>
+                Use the heart on any listing to save it privately here.
+              </EmptyDescription>
+            </EmptyHeader>
+          </Empty>
         ) : (
-          <ul className="divide-y rounded-lg border">
+          <Card>
+          <ul className="divide-y overflow-hidden">
             {watchlist.map((w) => (
               <li key={w.id} className="flex items-center justify-between gap-3 p-3">
                 <Link
                   href={`/listing/${w.listingId}`}
+                  seed={listingById.get(w.listingId)}
                   className="min-w-0 truncate font-medium hover:underline"
                 >
                   {w.listingTitle}
@@ -160,6 +221,7 @@ function Dashboard() {
               </li>
             ))}
           </ul>
+          </Card>
         )}
       </section>
     </div>
@@ -168,10 +230,18 @@ function Dashboard() {
 
 export function MyMarket() {
   return (
-    <MarketProvider fallback={<p className="text-sm text-muted-foreground">Loading your market…</p>}>
+    <MarketProvider
+      fallback={
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Spinner />
+          Loading your market…
+        </div>
+      }
+    >
       <AuthGate
-        title="Sign in to see your market"
-        blurb="Your listings, offers received, and bids you've sent — all live. The demo account is prefilled; just hit Log in."
+        title="Sign in to open your dashboard"
+        blurb="Your listings, saved finds, and offers stay synced here. The demo account is ready; just select Log in."
+        headingLevel={1}
       >
         <Dashboard />
       </AuthGate>