@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/marketplace/client/SellForm.tsx

@@ -3,37 +3,15 @@
 import React, { useState } from "react";
 import { db, useRouter } from "@pylonsync/react";
 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 { cn } from "@/lib/utils";
 import { Spinner } from "@/components/ui/spinner";
-import { Textarea } from "@/components/ui/textarea";
+import { CATEGORIES, CONDITIONS } from "../lib/catalog";
+import { ListingCard } from "./ListingCard";
 import { AuthGate, MarketProvider, useIdentity } from "./MarketProvider";
-import { conditionLabel, makeSlug } from "./market";
+import { conditionLabel, makeSlug, type Listing } from "./market";
 
-const CATEGORIES = [
-  "furniture", "electronics", "cameras", "bikes", "audio", "kitchen",
-  "instruments", "outdoor", "apparel", "other",
-];
-const CONDITIONS = ["new", "like-new", "good", "fair"];
+const INPUT =
+  "h-11 w-full rounded-xl bg-card px-3.5 text-[15px] shadow-[var(--shadow-border)] outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus-visible:outline-none";
 
 async function uploadListingPhoto(file: File) {
   const initResponse = await fetch("/api/files/init", {
@@ -48,7 +26,7 @@ async function uploadListingPhoto(file: File) {
     }),
   });
   if (!initResponse.ok) throw new Error("Could not prepare that upload.");
-  const init = await initResponse.json() as { assetId: string; uploadUrl: string };
+  const init = (await initResponse.json()) as { assetId: string; uploadUrl: string };
 
   const uploadResponse = await fetch(init.uploadUrl, {
     method: "PUT",
@@ -66,18 +44,39 @@ async function uploadListingPhoto(file: File) {
   return confirmResponse.json() as Promise<{ id: string; url: string; size: number }>;
 }
 
+function isPhotoUrl(value: string): boolean {
+  if (value.startsWith("/")) return true;
+  try {
+    return ["http:", "https:"].includes(new URL(value).protocol);
+  } catch {
+    return false;
+  }
+}
+
+function Label({ htmlFor, children }: { htmlFor?: string; children: React.ReactNode }) {
+  return (
+    <label htmlFor={htmlFor} className="text-sm font-medium">
+      {children}
+    </label>
+  );
+}
+
 function Form() {
-  // Rendered inside <AuthGate>, so identity is guaranteed non-null here.
+  // Rendered inside <AuthGate>, so identity is non-null here.
   const identity = useIdentity();
   const userId = identity?.userId ?? "";
   const name = identity?.name ?? "you";
   const router = useRouter();
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
+  // The photo is either an upload (a same-origin /api/files path) or a link
+  // the seller pastes. An upload clears the link field.
   const [imageUrl, setImageUrl] = useState("");
+  const uploaded = imageUrl.startsWith("/");
   const [price, setPrice] = useState("");
-  const [category, setCategory] = useState(CATEGORIES[0]);
+  const [category, setCategory] = useState(CATEGORIES[0]!.id);
   const [condition, setCondition] = useState("good");
+  const [location, setLocation] = useState("");
   const [photoBusy, setPhotoBusy] = useState(false);
   const [busy, setBusy] = useState(false);
   const [err, setErr] = useState<string | null>(null);
@@ -110,30 +109,21 @@ function Form() {
     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 (!isPhotoUrl(imageUrl)) return setErr("Upload a photo or add a photo link.");
     if (!Number.isFinite(value) || value < 0) return setErr("Set a price.");
     setBusy(true);
     setErr(null);
-    // Local-first by default — no createListing function, no opt-in
-    // optimism flag. `db.insert` paints the listing into the local store
-    // synchronously (it's in the "just listed" ticker before the network
-    // call even leaves the tab) and pushes in the background. `sellerId`
-    // is declared `field.owner()` in app.ts, so the server stamps and
-    // verifies it from the session — we send our own id only so the
-    // optimistic row is complete; a forged seller id would be rejected.
+    // db.insert writes the listing to the local store at once (it shows in
+    // every open browse grid and activity feed) and pushes to the server in
+    // the background. `sellerId` is `field.owner()` in app.ts, so the server
+    // stamps and verifies it from the session; a forged id is rejected.
     const seed = Math.random().toString(36).slice(2, 8);
     const slug = makeSlug(title.trim(), seed);
     try {
       await db.insert("Listing", {
         sellerId: userId,
         sellerName: name,
+        location: location.trim(),
         title: title.trim(),
         slug,
         description: description.trim(),
@@ -152,147 +142,246 @@ function Form() {
     }
   }
 
+  const draft: Listing = {
+    id: "preview",
+    sellerId: userId,
+    sellerName: name,
+    location: location.trim() || undefined,
+    title: title.trim() || "Your item title",
+    slug: "",
+    description,
+    price: Number.parseFloat(price) || 0,
+    category,
+    condition,
+    status: "active",
+    imageUrl: isPhotoUrl(imageUrl) ? imageUrl : undefined,
+    seed: "preview",
+    createdAt: new Date().toISOString(),
+  };
+
   return (
-    <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"
-        />
-      </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}
-        />
-      </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 className="grid gap-10 lg:grid-cols-[minmax(0,1fr)_300px] xl:gap-16">
+      <form
+        onSubmit={submit}
+        // Fields are checked in submit(). Native validation would reject the
+        // same-origin path of an uploaded photo in the type="url" field.
+        noValidate
+        className="flex min-w-0 flex-col gap-7"
+      >
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="listing-photo">Photo</Label>
+          <label
+            htmlFor="listing-photo"
+            className="group flex min-h-44 cursor-pointer flex-col items-center justify-center gap-2 rounded-2xl border border-dashed border-input bg-card/60 px-5 py-8 text-center transition-colors hover:bg-card focus-within:ring-2 focus-within:ring-ring"
+          >
+            {isPhotoUrl(imageUrl) && !photoBusy ? (
+              <img
+                src={imageUrl}
+                alt="Listing photo"
+                width="96"
+                height="120"
+                className="h-[120px] w-24 rounded-lg object-cover shadow-[var(--shadow-float)]"
+              />
+            ) : (
+            <span className="grid size-11 place-items-center rounded-full bg-muted transition-transform duration-300 group-hover:scale-105">
+              {photoBusy ? (
+                <Spinner />
+              ) : (
+                <ImagePlus aria-hidden="true" strokeWidth={1.5} className="size-5" />
+              )}
+            </span>
+            )}
+            <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. Natural light and a plain background work best.
+            </span>
+            <input
+              id="listing-photo"
+              name="photo"
+              type="file"
+              accept="image/jpeg,image/png,image/webp"
+              onChange={selectPhoto}
+              disabled={photoBusy}
+              className="sr-only"
             />
-          </div>
-        ) : null}
-      </Field>
-      <div className="grid grid-cols-2 gap-4">
-        <Field>
-          <FieldLabel htmlFor="price">Price ($)</FieldLabel>
-          <Input
-            id="price"
-            name="price"
-            type="number"
-            inputMode="decimal"
+          </label>
+          <label htmlFor="imageUrl" className="sr-only">
+            Photo link
+          </label>
+          <input
+            id="imageUrl"
+            name="imageUrl"
+            type="url"
             autoComplete="off"
-            min="0"
-            step="1"
-            value={price}
-            onChange={(e) => setPrice(e.target.value)}
-            placeholder="0"
+            spellCheck={false}
+            value={uploaded ? "" : imageUrl}
+            onChange={(e) => setImageUrl(e.target.value)}
+            placeholder="Or paste a photo link: https://…"
+            className={INPUT}
           />
-        </Field>
-        <Field>
-          <FieldLabel htmlFor="condition">Condition</FieldLabel>
-          <NativeSelect
-            id="condition"
-            name="condition"
-            value={condition}
-            onChange={(e) => setCondition(e.target.value)}
-          >
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="title">Title</Label>
+          <input
+            id="title"
+            name="title"
+            autoComplete="off"
+            value={title}
+            onChange={(e) => setTitle(e.target.value)}
+            placeholder="Walnut desk lamp, 1970s"
+            maxLength={80}
+            className={INPUT}
+          />
+        </div>
+
+        <fieldset className="flex flex-col gap-2">
+          <legend className="mb-2 text-sm font-medium">Category</legend>
+          <div className="flex flex-wrap gap-1.5">
+            {CATEGORIES.map((c) => (
+              <label
+                key={c.id}
+                className={cn(
+                  "inline-flex min-h-9 cursor-pointer items-center rounded-full px-3.5 text-[13px] font-medium transition-[background-color,color,box-shadow] duration-200 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring",
+                  category === c.id
+                    ? "bg-foreground text-background"
+                    : "bg-card shadow-[var(--shadow-border)] hover:shadow-[var(--shadow-border-hover)]",
+                )}
+              >
+                <input
+                  type="radio"
+                  name="category"
+                  value={c.id}
+                  checked={category === c.id}
+                  onChange={() => setCategory(c.id)}
+                  className="sr-only"
+                />
+                {c.label}
+              </label>
+            ))}
+          </div>
+        </fieldset>
+
+        <fieldset className="flex flex-col gap-2">
+          <legend className="mb-2 text-sm font-medium">Condition</legend>
+          <div className="grid grid-cols-4 gap-1 rounded-full bg-muted p-1">
             {CONDITIONS.map((c) => (
-              <NativeSelectOption key={c} value={c}>
+              <label
+                key={c}
+                className={cn(
+                  "flex min-h-9 cursor-pointer items-center justify-center rounded-full text-[13px] font-medium transition-[background-color,color,box-shadow] duration-200 has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-ring",
+                  condition === c
+                    ? "bg-card text-foreground shadow-[var(--shadow-border)]"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                <input
+                  type="radio"
+                  name="condition"
+                  value={c}
+                  checked={condition === c}
+                  onChange={() => setCondition(c)}
+                  className="sr-only"
+                />
                 {conditionLabel(c)}
-              </NativeSelectOption>
+              </label>
             ))}
-          </NativeSelect>
-        </Field>
-      </div>
-      <Field>
-        <FieldLabel htmlFor="category">Category</FieldLabel>
-        <NativeSelect
-          id="category"
-          name="category"
-          value={category}
-          onChange={(e) => setCategory(e.target.value)}
-        >
-          {CATEGORIES.map((c) => (
-            <NativeSelectOption key={c} value={c}>
-              {c[0]?.toUpperCase()}{c.slice(1)}
-            </NativeSelectOption>
-          ))}
-        </NativeSelect>
-      </Field>
-      <div aria-live="polite">
-        {err ? (
-          <Alert variant="destructive">
-            <AlertDescription>{err}</AlertDescription>
-          </Alert>
-        ) : null}
-      </div>
-      <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">Dashboard</a>.
-      </p>
-      </FieldGroup>
-    </form>
+          </div>
+        </fieldset>
+
+        <div className="grid gap-5 sm:grid-cols-2">
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="price">Price</Label>
+            <div className="flex h-11 items-center rounded-xl bg-card px-3.5 shadow-[var(--shadow-border)] focus-within:ring-2 focus-within:ring-ring">
+              <span className="text-[15px] text-muted-foreground">$</span>
+              <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"
+                className="h-full w-full bg-transparent pl-1 text-[15px] tabular-nums outline-none focus-visible:outline-none"
+              />
+            </div>
+          </div>
+          <div className="flex flex-col gap-2">
+            <Label htmlFor="location">Location</Label>
+            <input
+              id="location"
+              name="location"
+              autoComplete="address-level2"
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+              placeholder="Denver, CO"
+              className={INPUT}
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-2">
+          <Label htmlFor="description">Description</Label>
+          <textarea
+            id="description"
+            name="description"
+            autoComplete="off"
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            placeholder="Condition, measurements, what is included, pickup or shipping"
+            rows={5}
+            className="w-full resize-y rounded-xl bg-card px-3.5 py-3 text-[15px] leading-6 shadow-[var(--shadow-border)] outline-none placeholder:text-muted-foreground focus:ring-2 focus:ring-ring focus-visible:outline-none"
+          />
+        </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>
+
+        <div className="flex flex-col gap-3 border-t border-border/70 pt-6 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-sm text-muted-foreground">
+            Posting as <span className="font-medium text-foreground">{name}</span>.
+            Offers arrive on your{" "}
+            <a href="/me" className="underline underline-offset-4">
+              dashboard
+            </a>
+            .
+          </p>
+          <button
+            type="submit"
+            disabled={busy || photoBusy}
+            className="inline-flex min-h-12 items-center justify-center gap-2 rounded-full bg-primary px-7 text-[15px] font-medium text-primary-foreground transition-[scale] active:scale-[0.98] disabled:opacity-60"
+          >
+            {busy ? <Spinner /> : null}
+            {busy ? "Posting" : "Post listing"}
+          </button>
+        </div>
+      </form>
+
+      <aside className="hidden lg:block">
+        <div className="sticky top-24">
+          <h2 className="mb-3 text-sm font-medium text-muted-foreground">
+            Preview in the grid
+          </h2>
+          <div className="pointer-events-none" inert>
+            <ListingCard listing={draft} sizes="300px" />
+          </div>
+        </div>
+      </aside>
+    </div>
   );
 }
 
@@ -301,19 +390,9 @@ export function SellForm() {
     <MarketProvider>
       <AuthGate
         title="Sign in to list an item"
-        blurb="Selling needs an account so your listings stay tied to you. The demo account is ready; just select Log in."
+        blurb="Listings belong to an account so offers reach you. The demo account is filled in."
       >
-        <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>
+        <Form />
       </AuthGate>
     </MarketProvider>
   );

package/templates/marketplace/client/ThemeToggle.tsx

@@ -48,6 +48,7 @@ export function ThemeToggle() {
       type="button"
       variant="ghost"
       size="icon"
+      className="rounded-full text-muted-foreground hover:text-foreground"
       aria-label={isDark ? "Use light theme" : "Use dark theme"}
       title={isDark ? "Use light theme" : "Use dark theme"}
       onClick={toggleTheme}

package/templates/marketplace/client/WatchButton.tsx

@@ -3,15 +3,14 @@
 import React, { useEffect, useState } from "react";
 import { db } from "@pylonsync/react";
 import { Heart } from "lucide-react";
-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
 // (no provider needed): boots the client, reads identity, and toggles the
-// Watch row with optimistic db.insert / db.delete — the live query below flips
-// the fill instantly. Hidden for signed-out visitors (watchlists are a
-// logged-in feature). The mounted gate keeps db.useQuery off the SSR pass.
+// Watch row with optimistic db.insert / db.delete; the live query below flips
+// the fill instantly. Signed-out visitors are sent to the sign-in card on
+// /me. The mounted gate keeps db.useQuery off the SSR pass.
 export function WatchButton(props: {
   listingId: string;
   listingTitle: string;
@@ -57,43 +56,44 @@ function Inner({
     : undefined;
   const watched = !!mine;
 
-  // No heart for signed-out visitors.
-  if (!identity) return null;
-
   function toggle(e: React.MouseEvent) {
     // Stop the click from bubbling into the surrounding card link.
     e.preventDefault();
     e.stopPropagation();
+    if (!identity) {
+      // Watchlists belong to an account; the dashboard shows the sign-in card.
+      window.location.assign("/me");
+      return;
+    }
     if (mine) {
       void db.delete("Watch", mine.id);
     } else {
-      void db.insert("Watch", { userId: identity!.userId, listingId, listingTitle });
+      void db.insert("Watch", { userId: identity.userId, listingId, listingTitle });
     }
   }
 
   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(
-        "rounded-full bg-background/85 backdrop-blur",
+        "grid size-9 place-items-center rounded-full bg-white/92 text-neutral-900 shadow-[var(--shadow-float)] backdrop-blur transition-[scale,background-color] duration-200 hover:bg-white active:scale-90",
         className,
       )}
     >
       <Heart
         aria-hidden="true"
+        strokeWidth={1.75}
         className={cn(
-          "transition-[color,fill,scale] duration-200",
+          "size-[17px] transition-[color,fill,scale] duration-300 ease-[var(--ease-out-soft)]",
           watched
-            ? "scale-100 fill-foreground text-foreground"
-            : "scale-95 fill-transparent text-foreground/70",
+            ? "scale-100 fill-signal text-signal"
+            : "scale-95 fill-transparent text-neutral-900",
         )}
       />
-    </Button>
+    </button>
   );
 }