@pylonsync/create-pylon 0.19.0 → 0.20.0

package/templates/marketplace/client/LiveListingStatus.tsx

@@ -4,6 +4,10 @@ import React, { useEffect, useState } from "react";
 import { db } from "@pylonsync/react";
 import { bootClient, type Listing } from "./market";
 
+type Mode = "text" | "pill" | "overlay";
+
+// A listing's sale status, live. Renders the server value first, then follows
+// the Listing row over sync, so a sale in another tab flips it in place.
 export function LiveListingStatus({
   listingId,
   initialStatus,
@@ -11,7 +15,7 @@ export function LiveListingStatus({
 }: {
   listingId: string;
   initialStatus: Listing["status"];
-  mode?: "text" | "overlay";
+  mode?: Mode;
 }) {
   const [mounted, setMounted] = useState(false);
   useEffect(() => {
@@ -19,20 +23,9 @@ export function LiveListingStatus({
     setMounted(true);
   }, []);
 
-  if (!mounted) {
-    return initialStatus === "sold" ? (
-      mode === "overlay" ? <SoldOverlay /> : <>Sold</>
-    ) : mode === "text" ? (
-      <>Open to offers</>
-    ) : null;
-  }
-
+  if (!mounted) return <Status sold={initialStatus === "sold"} mode={mode} />;
   return (
-    <LiveStatus
-      listingId={listingId}
-      initialStatus={initialStatus}
-      mode={mode}
-    />
+    <LiveStatus listingId={listingId} initialStatus={initialStatus} mode={mode} />
   );
 }
 
@@ -43,18 +36,33 @@ function LiveStatus({
 }: {
   listingId: string;
   initialStatus: Listing["status"];
-  mode: "text" | "overlay";
+  mode: Mode;
 }) {
   const { data } = db.useQueryOne<Listing>("Listing", listingId);
-  const sold = (data?.status ?? initialStatus) === "sold";
-  if (mode === "overlay") return sold ? <SoldOverlay /> : null;
-  return <>{sold ? "Sold" : "Open to offers"}</>;
+  return <Status sold={(data?.status ?? initialStatus) === "sold"} mode={mode} />;
 }
 
-function SoldOverlay() {
-  return (
-    <span className="absolute inset-0 grid place-items-center bg-black/55 text-2xl font-semibold text-white">
-      Sold
-    </span>
-  );
+function Status({ sold, mode }: { sold: boolean; mode: Mode }) {
+  if (mode === "overlay") {
+    return sold ? (
+      <span className="market-rise absolute inset-0 grid place-items-center bg-black/45">
+        <span className="rounded-full bg-white px-5 py-2 font-display text-2xl text-neutral-900">
+          Sold
+        </span>
+      </span>
+    ) : null;
+  }
+  if (mode === "pill") {
+    return sold ? (
+      <span className="inline-flex items-center rounded-full bg-foreground px-3 py-1 text-xs font-semibold text-background">
+        Sold
+      </span>
+    ) : (
+      <span className="inline-flex items-center gap-1.5 rounded-full bg-success/12 px-3 py-1 text-xs font-semibold text-success-foreground">
+        <span className="size-1.5 rounded-full bg-success" aria-hidden="true" />
+        Available
+      </span>
+    );
+  }
+  return <>{sold ? "Sold" : "Available"}</>;
 }

package/templates/marketplace/client/LoginCard.tsx

@@ -1,40 +1,33 @@
 "use client";
 
 import React, { useState } from "react";
-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 { cn } from "@/lib/utils";
 import { Spinner } from "@/components/ui/spinner";
 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.
+const INPUT =
+  "h-11 w-full rounded-xl bg-background px-3.5 text-[15px] ring-1 ring-input outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus-visible:outline-none";
+
+// The sign-in form shown wherever a write needs a real user (sell, make an
+// offer, the dashboard). Email and password, no verification email.
+// Prefilled with the seeded demo account.
 export function LoginCard({
   title = "Sign in to continue",
-  blurb = "Use the ready demo account or create your own. No verification email is required.",
+  blurb = "Use the demo account or create your own. No verification email.",
   headingLevel = 2,
+  onDone,
+  className,
 }: {
   title?: string;
   blurb?: string;
   headingLevel?: 1 | 2;
+  /** Called after a successful sign-in or sign-up. */
+  onDone?: () => void;
+  className?: 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("");
@@ -49,128 +42,113 @@ export function LoginCard({
     try {
       if (mode === "login") await signIn(email, password);
       else await signUp(email, password, name);
+      onDone?.();
     } catch (e) {
-      setErr((e as Error).message ?? "Auth failed");
+      setErr((e as Error).message ?? "Sign-in failed");
     } finally {
       setBusy(false);
     }
   }
 
+  function switchMode(next: "login" | "register") {
+    setMode(next);
+    setErr(null);
+    setEmail(next === "login" ? DEMO.email : "");
+    setPassword(next === "login" ? DEMO.password : "");
+  }
+
   return (
-    <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
-              type="button"
-              variant="link"
-              size="sm"
-              className="px-1"
-              onClick={() => {
-                setMode("register");
-                setEmail("");
-                setPassword("");
-                setErr(null);
-              }}
-            >
-              Sign up
-            </Button>
-          </>
-        ) : (
-          <>
-            Have an account?{" "}
-            <Button
-              type="button"
-              variant="link"
-              size="sm"
-              className="px-1"
-              onClick={() => {
-                setMode("login");
-                setEmail(DEMO.email);
-                setPassword(DEMO.password);
-                setErr(null);
-              }}
-            >
-              Log in
-            </Button>
-          </>
-        )}
-      </CardFooter>
-    </Card>
+    <div
+      className={cn(
+        "market-rise mx-auto w-full max-w-sm rounded-2xl bg-card p-6 shadow-[var(--shadow-border)]",
+        className,
+      )}
+    >
+      <Heading className="font-display text-[28px] leading-tight">{title}</Heading>
+      <p className="mt-1.5 text-sm leading-5 text-muted-foreground">{blurb}</p>
+      <form onSubmit={submit} className="mt-5 flex flex-col gap-3.5">
+        {mode === "register" ? (
+          <div className="flex flex-col gap-1.5">
+            <label htmlFor="lc-name" className="text-sm font-medium">
+              Name
+            </label>
+            <input
+              id="lc-name"
+              name="name"
+              autoComplete="name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="Pat Lee"
+              className={INPUT}
+            />
+          </div>
+        ) : null}
+        <div className="flex flex-col gap-1.5">
+          <label htmlFor="lc-email" className="text-sm font-medium">
+            Email
+          </label>
+          <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"
+            className={INPUT}
+          />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <label htmlFor="lc-password" className="text-sm font-medium">
+            Password
+          </label>
+          <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 or more characters" : ""}
+            className={INPUT}
+          />
+        </div>
+        <div aria-live="polite">
+          {err ? (
+            <p className="rounded-xl bg-destructive/10 px-3 py-2 text-sm text-destructive">
+              {err}
+            </p>
+          ) : null}
+        </div>
+        <button
+          type="submit"
+          disabled={busy}
+          className="inline-flex min-h-11 items-center justify-center gap-2 rounded-full bg-primary px-5 text-sm font-medium text-primary-foreground transition-[scale] active:scale-[0.98] disabled:opacity-60"
+        >
+          {busy ? <Spinner /> : null}
+          {mode === "login"
+            ? busy
+              ? "Logging in"
+              : "Log in"
+            : busy
+              ? "Creating account"
+              : "Create account"}
+        </button>
+      </form>
+      <p className="mt-4 text-center text-xs text-muted-foreground">
+        {mode === "login" ? "No account?" : "Have an account?"}{" "}
+        <button
+          type="button"
+          onClick={() => switchMode(mode === "login" ? "register" : "login")}
+          className="font-medium text-foreground underline-offset-4 hover:underline"
+        >
+          {mode === "login" ? "Sign up" : "Log in"}
+        </button>
+      </p>
+    </div>
   );
 }

package/templates/marketplace/client/MarketProvider.tsx

@@ -151,11 +151,9 @@ export function AuthGate({
   const { identity } = useAuth();
   if (!identity) {
     return (
-      <LoginCard
-        title={title}
-        blurb={blurb}
-        headingLevel={headingLevel}
-      />
+      <div className="py-6">
+        <LoginCard title={title} blurb={blurb} headingLevel={headingLevel} />
+      </div>
     );
   }
   return <>{children}</>;