@pylonsync/create-pylon 0.3.274 → 0.3.276

package/templates/marketplace/client/LiveTicker.tsx

@@ -0,0 +1,104 @@
+"use client";
+
+import React from "react";
+import { Link, db } from "@pylonsync/react";
+import { Tag, BadgeCheck } from "lucide-react";
+import { MarketProvider } from "./MarketProvider";
+import { money, timeAgo, type Listing, type Offer } from "./market";
+
+// Realtime activity strip. Two live queries — new listings AND completed sales
+// (accepted offers) — merged into one feed. The moment anyone lists an item or
+// a sale closes (in another tab, by another visitor), it slides in here. No
+// polling, no refetch. This is the part SSR can't do; it's why the marketplace
+// feels alive.
+type Activity = {
+  key: string;
+  kind: "listed" | "sold";
+  title: string;
+  href: string;
+  amount?: number;
+  at: string;
+};
+
+function Ticker() {
+  const { data: listingData } = db.useQuery<Listing>("Listing", {
+    where: { status: "active" },
+    orderBy: { createdAt: "desc" },
+    limit: 8,
+  });
+  const { data: saleData } = db.useQuery<Offer>("Offer", {
+    where: { status: "accepted" },
+    orderBy: { createdAt: "desc" },
+    limit: 8,
+  });
+
+  const events: Activity[] = [
+    ...(listingData ?? []).map((l) => ({
+      key: `l-${l.id}`,
+      kind: "listed" as const,
+      title: l.title,
+      href: `/listing/${l.slug || l.id}`,
+      at: l.createdAt,
+    })),
+    ...(saleData ?? []).map((o) => ({
+      key: `s-${o.id}`,
+      kind: "sold" as const,
+      title: o.listingTitle,
+      href: `/listing/${o.listingId}`,
+      amount: o.amount,
+      at: o.createdAt,
+    })),
+  ]
+    .sort((a, b) => Date.parse(b.at) - Date.parse(a.at))
+    .slice(0, 10);
+
+  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">
+        <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>
+        Live
+      </span>
+      {/* Auto-scrolling marquee — no scrollbar. Items are doubled so the loop
+          (translateX -50%) is seamless; hover pauses so you can click. The
+          edge mask fades items in/out for a clean "live feed" look. */}
+      <div className="relative flex-1 overflow-hidden [mask-image:linear-gradient(to_right,transparent,#000_1.5rem,#000_calc(100%-1.5rem),transparent)]">
+        <div className="market-marquee flex w-max items-center gap-6">
+          {[...events, ...events].map((e, i) => (
+            <Link
+              key={`${e.key}-${i}`}
+              href={e.href}
+              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" />
+              ) : (
+                <Tag className="size-3.5 text-muted-foreground" />
+              )}
+              <span className="font-medium">{e.title}</span>
+              <span className="text-muted-foreground">
+                {e.kind === "sold" && e.amount != null
+                  ? `sold · ${money(e.amount)}`
+                  : timeAgo(e.at)}
+              </span>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function LiveTicker() {
+  return (
+    <MarketProvider fallback={null}>
+      <Ticker />
+    </MarketProvider>
+  );
+}

package/templates/marketplace/client/LoginCard.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Label } from "../ui/label";
+import { useAuth } from "./MarketProvider";
+import { DEMO } from "./market";
+
+// The sign-in surface shown wherever a write needs a real user (sell, make an
+// offer, manage your market). Email/password, no verification email. Prefilled
+// 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.",
+}: {
+  title?: string;
+  blurb?: string;
+}) {
+  const { signIn, signUp } = useAuth();
+  const [mode, setMode] = useState<"login" | "register">("login");
+  // Prefill the demo credentials so a reviewer can sign in instantly.
+  const [email, setEmail] = useState<string>(DEMO.email);
+  const [password, setPassword] = useState<string>(DEMO.password);
+  const [name, setName] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [err, setErr] = useState<string | null>(null);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setBusy(true);
+    setErr(null);
+    try {
+      if (mode === "login") await signIn(email, password);
+      else await signUp(email, password, name);
+    } catch (e) {
+      setErr((e as Error).message ?? "Auth failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  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">
+        {mode === "login" ? (
+          <>
+            No account?{" "}
+            <button
+              type="button"
+              className="font-medium text-foreground hover:underline"
+              onClick={() => {
+                setMode("register");
+                setEmail("");
+                setPassword("");
+                setErr(null);
+              }}
+            >
+              Sign up
+            </button>
+          </>
+        ) : (
+          <>
+            Have an account?{" "}
+            <button
+              type="button"
+              className="font-medium text-foreground hover:underline"
+              onClick={() => {
+                setMode("login");
+                setEmail(DEMO.email);
+                setPassword(DEMO.password);
+                setErr(null);
+              }}
+            >
+              Log in
+            </button>
+          </>
+        )}
+      </p>
+    </div>
+  );
+}

package/templates/marketplace/client/MarketProvider.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { db } from "@pylonsync/react";
+import {
+  cacheDisplayName,
+  ensureDemoSeed,
+  ensureReadSession,
+  readIdentity,
+  signIn as doSignIn,
+  signOut as doSignOut,
+  signUp as doSignUp,
+  type Identity,
+} from "./market";
+import { LoginCard } from "./LoginCard";
+
+// The sync engine (live queries, WebSocket) is browser-only, so every
+// interactive island mounts behind this provider. It boots the client, keeps
+// a guest session for READ connectivity (so the public ticker/grid run live
+// for signed-out visitors), seeds the demo account, and exposes the current
+// identity + auth actions. `identity` is null until the visitor signs in.
+
+interface AuthContextValue {
+  /** The signed-in user, or null when browsing anonymously. */
+  identity: Identity | null;
+  /** True until the client has booted + read connectivity is established. */
+  ready: boolean;
+  signIn: (email: string, password: string) => Promise<void>;
+  signUp: (email: string, password: string, name: string) => Promise<void>;
+  signOut: () => Promise<void>;
+}
+
+const Ctx = createContext<AuthContextValue | null>(null);
+
+/** The signed-in user, or null when anonymous. */
+export function useIdentity(): Identity | null {
+  return useAuth().identity;
+}
+
+export function useAuth(): AuthContextValue {
+  const v = useContext(Ctx);
+  if (!v) throw new Error("useAuth must be used inside <MarketProvider>");
+  return v;
+}
+
+export function MarketProvider({
+  children,
+  fallback,
+}: {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}) {
+  const [ready, setReady] = useState(false);
+  const [identity, setIdentity] = useState<Identity | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    void (async () => {
+      await ensureReadSession();
+      // Fire-and-forget: makes the demo login work + seeds the catalog.
+      void ensureDemoSeed();
+      if (!alive) return;
+      setIdentity(readIdentity());
+      setReady(true);
+    })();
+
+    const onChange = () => setIdentity(readIdentity());
+    window.addEventListener("pylon-auth-changed", onChange);
+    window.addEventListener("storage", onChange);
+    return () => {
+      alive = false;
+      window.removeEventListener("pylon-auth-changed", onChange);
+      window.removeEventListener("storage", onChange);
+    };
+  }, []);
+
+  const signIn = useCallback(async (email: string, password: string) => {
+    await doSignIn(email, password);
+    setIdentity(readIdentity());
+  }, []);
+  const signUp = useCallback(
+    async (email: string, password: string, name: string) => {
+      await doSignUp(email, password, name);
+      setIdentity(readIdentity());
+    },
+    [],
+  );
+  const signOut = useCallback(async () => {
+    await doSignOut();
+    setIdentity(readIdentity());
+  }, []);
+
+  if (!ready) {
+    return (
+      <>
+        {fallback ?? (
+          <span className="text-xs text-muted-foreground">connecting…</span>
+        )}
+      </>
+    );
+  }
+
+  return (
+    <Ctx.Provider value={{ identity, ready, signIn, signUp, signOut }}>
+      {identity ? <DisplayNameSync userId={identity.userId} /> : null}
+      {children}
+    </Ctx.Provider>
+  );
+}
+
+// Keeps the cached displayName fresh from the live User row, so identity.name
+// upgrades from the email handle to the real name once the row syncs in.
+function DisplayNameSync({ userId }: { userId: string }) {
+  const { data } = db.useQueryOne<{ id: string; displayName?: string }>(
+    "User",
+    userId,
+  );
+  const name = data?.displayName;
+  useEffect(() => {
+    if (name) cacheDisplayName(name);
+  }, [name]);
+  return null;
+}
+
+/**
+ * Gate a write surface behind sign-in. Renders the children when the visitor
+ * is signed in; otherwise a prefilled demo login card. Reads (browse, ticker,
+ * listing detail) don't use this — they stay public.
+ */
+export function AuthGate({
+  children,
+  title,
+  blurb,
+}: {
+  children: React.ReactNode;
+  title?: string;
+  blurb?: string;
+}) {
+  const { identity } = useAuth();
+  if (!identity) return <LoginCard title={title} blurb={blurb} />;
+  return <>{children}</>;
+}

package/templates/marketplace/client/MyMarket.tsx

@@ -0,0 +1,180 @@
+"use client";
+
+import React from "react";
+import { Link, db } from "@pylonsync/react";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { AuthGate, MarketProvider, useIdentity } from "./MarketProvider";
+import { Heart } from "lucide-react";
+import { money, timeAgo, type Listing, type Offer, type Watch } from "./market";
+
+type BadgeVariant = "default" | "secondary" | "destructive" | "outline" | "success" | "warning";
+
+const statusVariant: Record<string, BadgeVariant> = {
+  pending: "warning",
+  accepted: "success",
+  declined: "outline",
+};
+
+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.
+  const { data: listings } = db.useQuery<Listing>("Listing", {
+    where: { sellerId: userId },
+    orderBy: { createdAt: "desc" },
+  });
+  const { data: received } = db.useQuery<Offer>("Offer", {
+    where: { sellerId: userId },
+    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 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>
+          <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>.
+          </p>
+        </div>
+        <Button asChild>
+          <Link href="/sell">Sell something</Link>
+        </Button>
+      </header>
+
+      <section className="space-y-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>
+        ) : (
+          <ul className="divide-y rounded-lg border">
+            {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">
+                  <span className="truncate font-medium">{l.title}</span>
+                </Link>
+                <div className="flex shrink-0 items-center gap-2 text-sm">
+                  <span className="font-semibold">{money(l.price)}</span>
+                  {l.status === "sold" ? (
+                    <Badge variant="success">Sold</Badge>
+                  ) : pendingFor(l.id) > 0 ? (
+                    <Badge variant="warning">
+                      {pendingFor(l.id)} offer{pendingFor(l.id) > 1 ? "s" : ""}
+                    </Badge>
+                  ) : (
+                    <Badge variant="outline">Active</Badge>
+                  )}
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section className="space-y-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>
+        ) : (
+          <ul className="divide-y rounded-lg border">
+            {myOffers.map((o) => (
+              <li key={o.id} className="flex items-center justify-between gap-3 p-3">
+                <Link
+                  href={`/listing/${o.listingId}`}
+                  className="min-w-0 hover:underline"
+                >
+                  <span className="truncate font-medium">{o.listingTitle}</span>
+                  <span className="ml-2 text-sm text-muted-foreground">
+                    {timeAgo(o.createdAt)}
+                  </span>
+                </Link>
+                <div className="flex shrink-0 items-center gap-2 text-sm">
+                  <span className="font-semibold tabular-nums">{money(o.amount)}</span>
+                  <Badge variant={statusVariant[o.status] ?? "outline"}>
+                    {o.status}
+                  </Badge>
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+
+      <section className="space-y-3">
+        <h2 className="flex items-center gap-2 font-semibold">
+          <Heart className="size-4 text-rose-500" />
+          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>
+        ) : (
+          <ul className="divide-y rounded-lg border">
+            {watchlist.map((w) => (
+              <li key={w.id} className="flex items-center justify-between gap-3 p-3">
+                <Link
+                  href={`/listing/${w.listingId}`}
+                  className="min-w-0 truncate font-medium hover:underline"
+                >
+                  {w.listingTitle}
+                </Link>
+                <span className="shrink-0 text-xs text-muted-foreground">
+                  saved {timeAgo(w.createdAt)}
+                </span>
+              </li>
+            ))}
+          </ul>
+        )}
+      </section>
+    </div>
+  );
+}
+
+export function MyMarket() {
+  return (
+    <MarketProvider fallback={<p className="text-sm text-muted-foreground">Loading your market…</p>}>
+      <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."
+      >
+        <Dashboard />
+      </AuthGate>
+    </MarketProvider>
+  );
+}