@pylonsync/create-pylon 0.3.357 → 0.3.359

package/templates/marketplace/client/SellForm.tsx

@@ -2,12 +2,32 @@
 
 import React, { useState } from "react";
 import { db, useRouter } from "@pylonsync/react";
-import { Button } from "../ui/button";
-import { Input } from "../ui/input";
-import { Textarea } from "../ui/textarea";
-import { Label } from "../ui/label";
+import { ImagePlus } from "lucide-react";
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldSeparator,
+} from "@/components/ui/field";
+import { Input } from "@/components/ui/input";
+import {
+  NativeSelect,
+  NativeSelectOption,
+} from "@/components/ui/native-select";
+import { Spinner } from "@/components/ui/spinner";
+import { Textarea } from "@/components/ui/textarea";
 import { AuthGate, MarketProvider, useIdentity } from "./MarketProvider";
-import { makeSlug } from "./market";
+import { conditionLabel, makeSlug } from "./market";
 
 const CATEGORIES = [
   "furniture", "electronics", "cameras", "bikes", "audio", "kitchen",
@@ -15,8 +35,34 @@ const CATEGORIES = [
 ];
 const CONDITIONS = ["new", "like-new", "good", "fair"];
 
-const selectClass =
-  "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm outline-none focus-visible:ring-1 focus-visible:ring-ring";
+async function uploadListingPhoto(file: File) {
+  const initResponse = await fetch("/api/files/init", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      filename: file.name,
+      mimeType: file.type,
+      size: file.size,
+    }),
+  });
+  if (!initResponse.ok) throw new Error("Could not prepare that upload.");
+  const init = await initResponse.json() as { assetId: string; uploadUrl: string };
+
+  const uploadResponse = await fetch(init.uploadUrl, {
+    method: "PUT",
+    headers: { "Content-Type": file.type },
+    body: file,
+  });
+  if (!uploadResponse.ok) throw new Error("Could not upload that photo.");
+
+  const confirmResponse = await fetch("/api/files/confirm", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ assetId: init.assetId }),
+  });
+  if (!confirmResponse.ok) throw new Error("Could not finish that upload.");
+  return confirmResponse.json() as Promise<{ id: string; url: string; size: number }>;
+}
 
 function Form() {
   // Rendered inside <AuthGate>, so identity is guaranteed non-null here.
@@ -26,16 +72,50 @@ function Form() {
   const router = useRouter();
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
+  const [imageUrl, setImageUrl] = useState("");
   const [price, setPrice] = useState("");
   const [category, setCategory] = useState(CATEGORIES[0]);
   const [condition, setCondition] = useState("good");
+  const [photoBusy, setPhotoBusy] = useState(false);
   const [busy, setBusy] = useState(false);
   const [err, setErr] = useState<string | null>(null);
 
+  async function selectPhoto(e: React.ChangeEvent<HTMLInputElement>) {
+    const file = e.target.files?.[0];
+    e.target.value = "";
+    if (!file) return;
+    if (!file.type.startsWith("image/")) {
+      setErr("Choose an image file.");
+      return;
+    }
+    if (file.size > 8 * 1024 * 1024) {
+      setErr("Choose an image smaller than 8 MB.");
+      return;
+    }
+    setPhotoBusy(true);
+    setErr(null);
+    try {
+      const uploaded = await uploadListingPhoto(file);
+      setImageUrl(uploaded.url);
+    } catch (e) {
+      setErr((e as Error).message ?? "Could not upload that photo.");
+    } finally {
+      setPhotoBusy(false);
+    }
+  }
+
   async function submit(e: React.FormEvent) {
     e.preventDefault();
     const value = Number.parseFloat(price);
     if (!title.trim()) return setErr("Give your item a title.");
+    if (!imageUrl.startsWith("/")) {
+      try {
+        const photo = new URL(imageUrl);
+        if (!["http:", "https:"].includes(photo.protocol)) throw new Error();
+      } catch {
+        return setErr("Upload a photo or add a valid photo URL.");
+      }
+    }
     if (!Number.isFinite(value) || value < 0) return setErr("Set a price.");
     setBusy(true);
     setErr(null);
@@ -59,6 +139,7 @@ function Form() {
         category,
         condition,
         status: "active",
+        imageUrl,
         seed,
         createdAt: new Date().toISOString(),
       });
@@ -70,78 +151,145 @@ function Form() {
   }
 
   return (
-    <form onSubmit={submit} className="space-y-5">
-      <div className="space-y-1.5">
-        <Label htmlFor="title">Title</Label>
+    <form onSubmit={submit}>
+      <FieldGroup className="gap-5">
+      <Field>
+        <FieldLabel htmlFor="title">Title</FieldLabel>
         <Input
           id="title"
+          name="title"
+          autoComplete="off"
           value={title}
           onChange={(e) => setTitle(e.target.value)}
           placeholder="e.g. Herman Miller Aeron, size B"
         />
-      </div>
-      <div className="space-y-1.5">
-        <Label htmlFor="description">Description</Label>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="description">Description</FieldLabel>
         <Textarea
           id="description"
+          name="description"
+          autoComplete="off"
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           placeholder="Condition details, dimensions, why you're selling…"
           rows={4}
         />
-      </div>
+      </Field>
+      <Field>
+        <FieldLabel htmlFor="listing-photo">Photo</FieldLabel>
+        <label
+          htmlFor="listing-photo"
+          className="flex min-h-28 cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border border-dashed border-border bg-muted/40 px-5 py-6 text-center transition-colors hover:bg-muted/70 focus-within:ring-2 focus-within:ring-ring"
+        >
+          <ImagePlus aria-hidden="true" className="size-5 text-muted-foreground" />
+          <span className="text-sm font-medium">
+            {photoBusy ? "Uploading photo…" : imageUrl ? "Replace photo" : "Upload a photo"}
+          </span>
+          <span className="text-xs text-muted-foreground">JPG, PNG, or WebP up to 8 MB</span>
+          <Input
+            id="listing-photo"
+            name="photo"
+            type="file"
+            accept="image/jpeg,image/png,image/webp"
+            onChange={selectPhoto}
+            disabled={photoBusy}
+            className="sr-only"
+          />
+        </label>
+        <FieldSeparator>or use a link</FieldSeparator>
+        <FieldLabel htmlFor="imageUrl" className="sr-only">
+          Photo URL
+        </FieldLabel>
+        <Input
+          id="imageUrl"
+          name="imageUrl"
+          type="url"
+          autoComplete="off"
+          spellCheck={false}
+          value={imageUrl}
+          onChange={(e) => setImageUrl(e.target.value)}
+          placeholder="https://example.com/item.jpg"
+          aria-describedby="image-help"
+        />
+        <FieldDescription id="image-help">
+          Clear, well-lit photos get more interest.
+        </FieldDescription>
+        {imageUrl ? (
+          <div className="mt-3 aspect-[16/10] overflow-hidden rounded-xl bg-muted shadow-[var(--shadow-border)]">
+            <img
+              src={imageUrl}
+              alt="Listing photo preview"
+              width="1200"
+              height="750"
+              className="h-full w-full object-cover outline outline-1 -outline-offset-1 outline-border"
+            />
+          </div>
+        ) : null}
+      </Field>
       <div className="grid grid-cols-2 gap-4">
-        <div className="space-y-1.5">
-          <Label htmlFor="price">Price ($)</Label>
+        <Field>
+          <FieldLabel htmlFor="price">Price ($)</FieldLabel>
           <Input
             id="price"
+            name="price"
             type="number"
+            inputMode="decimal"
+            autoComplete="off"
             min="0"
             step="1"
             value={price}
             onChange={(e) => setPrice(e.target.value)}
             placeholder="0"
           />
-        </div>
-        <div className="space-y-1.5">
-          <Label htmlFor="condition">Condition</Label>
-          <select
+        </Field>
+        <Field>
+          <FieldLabel htmlFor="condition">Condition</FieldLabel>
+          <NativeSelect
             id="condition"
+            name="condition"
             value={condition}
             onChange={(e) => setCondition(e.target.value)}
-            className={selectClass}
           >
             {CONDITIONS.map((c) => (
-              <option key={c} value={c}>
-                {c}
-              </option>
+              <NativeSelectOption key={c} value={c}>
+                {conditionLabel(c)}
+              </NativeSelectOption>
             ))}
-          </select>
-        </div>
+          </NativeSelect>
+        </Field>
       </div>
-      <div className="space-y-1.5">
-        <Label htmlFor="category">Category</Label>
-        <select
+      <Field>
+        <FieldLabel htmlFor="category">Category</FieldLabel>
+        <NativeSelect
           id="category"
+          name="category"
           value={category}
           onChange={(e) => setCategory(e.target.value)}
-          className={selectClass}
         >
           {CATEGORIES.map((c) => (
-            <option key={c} value={c}>
-              {c}
-            </option>
+            <NativeSelectOption key={c} value={c}>
+              {c[0]?.toUpperCase()}{c.slice(1)}
+            </NativeSelectOption>
           ))}
-        </select>
+        </NativeSelect>
+      </Field>
+      <div aria-live="polite">
+        {err ? (
+          <Alert variant="destructive">
+            <AlertDescription>{err}</AlertDescription>
+          </Alert>
+        ) : null}
       </div>
-      {err ? <p className="text-sm text-destructive">{err}</p> : null}
-      <Button type="submit" disabled={busy} className="w-full">
+      <Button type="submit" disabled={busy || photoBusy} className="w-full">
+        {busy ? <Spinner data-icon="inline-start" /> : null}
         {busy ? "Posting…" : "Post listing"}
       </Button>
       <p className="text-center text-xs text-muted-foreground">
-        Posting as <span className="font-medium">{name}</span> — buyers'
-        offers land in <a href="/me" className="underline">My Market</a>.
+        Posting as <span className="font-medium">{name}</span>. Buyers'
+        offers land in <a href="/me" className="underline">Dashboard</a>.
       </p>
+      </FieldGroup>
     </form>
   );
 }
@@ -151,9 +299,19 @@ export function SellForm() {
     <MarketProvider>
       <AuthGate
         title="Sign in to list an item"
-        blurb="Selling needs an account so your listings are tied to you. The demo account is prefilled — just hit Log in."
+        blurb="Selling needs an account so your listings stay tied to you. The demo account is ready; just select Log in."
       >
-        <Form />
+        <Card>
+          <CardHeader>
+            <CardTitle>Item details</CardTitle>
+            <CardDescription>
+              Add a clear photo and enough detail for buyers to decide quickly.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Form />
+          </CardContent>
+        </Card>
       </AuthGate>
     </MarketProvider>
   );

package/templates/marketplace/client/ThemeToggle.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import React from "react";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+const storageKey = "reprise:theme";
+
+type Theme = "light" | "dark";
+
+function preferredTheme(): Theme {
+  const stored = window.localStorage.getItem(storageKey);
+  if (stored === "light" || stored === "dark") return stored;
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+function applyTheme(theme: Theme) {
+  document.documentElement.dataset.theme = theme;
+  document
+    .querySelectorAll<HTMLMetaElement>('meta[name="theme-color"]')
+    .forEach((meta) => {
+      meta.content = theme === "dark" ? "#181817" : "#f8f6f2";
+    });
+}
+
+export function ThemeToggle() {
+  const [theme, setTheme] = React.useState<Theme | null>(null);
+
+  React.useEffect(() => {
+    const nextTheme = preferredTheme();
+    applyTheme(nextTheme);
+    setTheme(nextTheme);
+  }, []);
+
+  function toggleTheme() {
+    const nextTheme = theme === "dark" ? "light" : "dark";
+    applyTheme(nextTheme);
+    window.localStorage.setItem(storageKey, nextTheme);
+    setTheme(nextTheme);
+  }
+
+  const isDark = theme === "dark";
+
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      aria-label={isDark ? "Use light theme" : "Use dark theme"}
+      title={isDark ? "Use light theme" : "Use dark theme"}
+      onClick={toggleTheme}
+    >
+      {isDark ? (
+        <Sun aria-hidden="true" />
+      ) : (
+        <Moon aria-hidden="true" />
+      )}
+    </Button>
+  );
+}

package/templates/marketplace/client/WatchButton.tsx

@@ -3,7 +3,8 @@
 import React, { useEffect, useState } from "react";
 import { db } from "@pylonsync/react";
 import { Heart } from "lucide-react";
-import { cn } from "../ui/utils";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 import { bootClient, readIdentity, type Watch } from "./market";
 
 // Heart toggle that saves a listing to your private watchlist. Self-contained
@@ -47,8 +48,13 @@ function Inner({
 
   // Policy scopes reads to the caller, so this returns only MY watch (if any)
   // for this listing.
-  const { data } = db.useQuery<Watch>("Watch", { where: { listingId } });
-  const mine = identity ? data?.find((w) => w.userId === identity.userId) : undefined;
+  const { data } = db.useQuery<Watch>("Watch", {});
+  const mine = identity
+    ? data?.find(
+        (watch) =>
+          watch.userId === identity.userId && watch.listingId === listingId,
+      )
+    : undefined;
   const watched = !!mine;
 
   // No heart for signed-out visitors.
@@ -66,23 +72,28 @@ function Inner({
   }
 
   return (
-    <button
+    <Button
       type="button"
+      variant="outline"
+      size="icon"
       onClick={toggle}
       aria-pressed={watched}
       aria-label={watched ? "Remove from watchlist" : "Save to watchlist"}
       title={watched ? "Saved" : "Save to watchlist"}
       className={cn(
-        "grid size-9 place-items-center rounded-full bg-background/80 backdrop-blur transition hover:bg-background",
+        "rounded-full bg-background/85 backdrop-blur",
         className,
       )}
     >
       <Heart
+        aria-hidden="true"
         className={cn(
-          "size-5 transition",
-          watched ? "fill-rose-500 text-rose-500" : "text-foreground/70",
+          "transition-[color,fill,scale] duration-200",
+          watched
+            ? "scale-100 fill-foreground text-foreground"
+            : "scale-95 fill-transparent text-foreground/70",
         )}
       />
-    </button>
+    </Button>
   );
 }

package/templates/marketplace/client/market.ts

@@ -38,6 +38,7 @@ export interface Listing {
   category: string;
   condition: string;
   status: "active" | "sold";
+  imageUrl?: string;
   seed: string;
   createdAt: string;
 }
@@ -81,7 +82,7 @@ function hash(s: string): number {
   return h >>> 0;
 }
 
-/** Deterministic gradient "photo" from a seed — no image hosting needed. */
+/** Deterministic visual fallback for listings whose remote image is unavailable. */
 export function gradient(seed: string): string {
   const h = hash(seed);
   const a = h % 360;
@@ -263,7 +264,10 @@ export function readIdentity(): Identity | null {
 
 /** Cache the freshest displayName (from the live User query) for instant UI. */
 export function cacheDisplayName(name: string): void {
-  if (name) localStorage.setItem(DISPLAY_NAME, name);
+  if (name && localStorage.getItem(DISPLAY_NAME) !== name) {
+    localStorage.setItem(DISPLAY_NAME, name);
+    window.dispatchEvent(new Event("pylon-auth-changed"));
+  }
 }
 
 /** Register an account (or log in if it already exists). Returns its token,
@@ -313,10 +317,12 @@ async function ensureAccount(
 // and a premature reload could abort it mid-flight.
 let seedPromise: Promise<void> | null = null;
 
-export function ensureDemoSeed(): Promise<void> {
+export function ensureDemoSeed(options: { force?: boolean } = {}): Promise<void> {
   // Already seeded in a previous visit (accounts + catalog persist
   // server-side) — nothing to do.
-  if (localStorage.getItem("market:demo-seeded") === "1") return Promise.resolve();
+  if (!options.force && localStorage.getItem("market:demo-seeded") === "1") {
+    return Promise.resolve();
+  }
   if (seedPromise) return seedPromise;
 
   seedPromise = (async () => {

package/templates/marketplace/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

package/templates/marketplace/components/ui/badge.tsx

@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring",
   {
     variants: {
       variant: {
@@ -12,6 +12,10 @@ const badgeVariants = cva(
         secondary: "border-transparent bg-secondary text-secondary-foreground",
         destructive: "border-transparent bg-destructive text-white",
         outline: "text-foreground",
+        success:
+          "border-transparent bg-success/15 text-success-foreground",
+        warning:
+          "border-transparent bg-warning/15 text-warning-foreground",
       },
     },
     defaultVariants: {

package/templates/marketplace/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex min-h-10 items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-[background-color,color,box-shadow,scale] duration-150 active:not-disabled:scale-[0.96] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -13,17 +13,18 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-white hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "bg-background shadow-[var(--shadow-border)] hover:bg-accent hover:text-accent-foreground hover:shadow-[var(--shadow-border-hover)]",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
+        default: "px-4 py-2",
+        sm: "min-h-10 px-3 text-xs",
+        lg: "min-h-11 px-6",
+        icon: "size-10",
+        xs: "min-h-9 px-2 text-xs",
       },
     },
     defaultVariants: {
@@ -44,7 +45,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const Comp = asChild ? Slot : "button";
     return (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        data-slot="button"
+        className={cn(buttonVariants({ variant, size }), className)}
         ref={ref}
         {...props}
       />

package/templates/marketplace/components/ui/card.tsx

@@ -7,7 +7,7 @@ function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
     <div
       data-slot="card"
       className={cn(
-        "rounded-xl border bg-card text-card-foreground shadow-sm",
+        "rounded-2xl bg-card text-card-foreground shadow-[var(--shadow-border)]",
         className,
       )}
       {...props}
@@ -22,7 +22,7 @@ function CardHeader({
   return (
     <div
       data-slot="card-header"
-      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      className={cn("flex flex-col gap-1.5 p-6", className)}
       {...props}
     />
   );