@pylonsync/create-pylon 0.3.274 → 0.3.275

package/templates/directory/app/dashboard/dashboard-client.tsx

@@ -0,0 +1,205 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import { db, callFn } from "@pylonsync/react";
+import { useAuth } from "@pylonsync/client";
+import { parseTags, type SubmissionRow, type OwnerSubmissionsResult } from "@/lib/directory";
+
+// The curator's moderation queue. Liveness rides the public Listing table:
+// `db.useQuery("Listing")` re-renders when listings change (approving a
+// submission creates one), and that same signal re-fetches the owner-gated
+// `submissionsForOwner` — so the queue stays current without a reload, while
+// submitter PII only ever travels through the gated call.
+export function DirectoryDashboard({ userEmail }: { userEmail: string }) {
+  const { data: listings } = db.useQuery<{ id: string }>("Listing");
+  const liveCount = listings.length;
+
+  const [submissions, setSubmissions] = useState<SubmissionRow[] | null>(null);
+  const [denied, setDenied] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  async function load() {
+    try {
+      const r = await callFn<OwnerSubmissionsResult>("submissionsForOwner", {});
+      if (!r.authorized) setDenied(true);
+      else {
+        setSubmissions(r.submissions);
+        setDenied(false);
+        setError(null);
+      }
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  }
+
+  useEffect(() => {
+    void load();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [liveCount]);
+
+  async function act(id: string, fn: "approveSubmission" | "rejectSubmission") {
+    setBusyId(id);
+    try {
+      await callFn(fn, { submissionId: id });
+      await load();
+    } finally {
+      setBusyId(null);
+    }
+  }
+
+  if (denied) return <OwnerOnly email={userEmail} />;
+  if (error) {
+    return <div className="rounded-xl border border-red-200 bg-red-50 px-5 py-4 text-sm text-red-700">{error}</div>;
+  }
+  if (!submissions) return <Skeleton />;
+
+  const pending = submissions.filter((s) => s.status === "new");
+  const approved = submissions.filter((s) => s.status === "approved").length;
+
+  return (
+    <div className="space-y-8">
+      <div>
+        <h1 className="text-xl font-semibold tracking-tight">Submissions</h1>
+        <p className="mt-1 text-sm text-zinc-500">
+          Live — new submissions land here; approving one publishes it to the directory instantly.
+        </p>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        <Stat label="Pending" value={String(pending.length)} />
+        <Stat label="Approved" value={String(approved)} />
+        <Stat label="Live listings" value={String(liveCount)} />
+      </div>
+
+      <div className="rounded-xl border border-zinc-200 bg-white">
+        <div className="border-b border-zinc-100 px-4 py-3 text-sm font-semibold text-zinc-900">
+          Queue <span className="font-normal text-zinc-400">({submissions.length})</span>
+        </div>
+        {submissions.length === 0 ? (
+          <p className="p-8 text-center text-sm text-zinc-500">No submissions yet.</p>
+        ) : (
+          <ul className="divide-y divide-zinc-100">
+            {submissions.map((s) => (
+              <li key={s.id} className="px-4 py-3.5">
+                <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-2">
+                  <div className="min-w-0 flex-1">
+                    <div className="flex flex-wrap items-center gap-2">
+                      <a href={s.url} target="_blank" rel="noopener noreferrer" className="text-[14px] font-medium text-zinc-900 hover:text-brand">
+                        {s.name}
+                      </a>
+                      <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[11px] font-medium text-zinc-500">{s.category}</span>
+                      <StatusBadge status={s.status} />
+                    </div>
+                    {s.tagline ? <p className="mt-1 text-[13.5px] text-zinc-600">{s.tagline}</p> : null}
+                    <div className="mt-1 truncate text-[12px] text-zinc-400">
+                      {s.submitterName} · {s.submitterEmail}
+                      {parseTags(s.tags).length ? ` · ${parseTags(s.tags).map((t) => "#" + t).join(" ")}` : ""}
+                    </div>
+                  </div>
+                  {s.status === "new" ? (
+                    <div className="flex items-center gap-2">
+                      <button
+                        type="button"
+                        disabled={busyId === s.id}
+                        onClick={() => act(s.id, "approveSubmission")}
+                        className="rounded-md bg-brand px-3 py-1.5 text-[12.5px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+                      >
+                        {busyId === s.id ? "…" : "Approve"}
+                      </button>
+                      <button
+                        type="button"
+                        disabled={busyId === s.id}
+                        onClick={() => act(s.id, "rejectSubmission")}
+                        className="rounded-md border border-zinc-300 px-3 py-1.5 text-[12.5px] font-medium text-zinc-600 transition-colors hover:border-red-300 hover:text-red-600 disabled:opacity-50"
+                      >
+                        Reject
+                      </button>
+                    </div>
+                  ) : null}
+                </div>
+              </li>
+            ))}
+          </ul>
+        )}
+      </div>
+    </div>
+  );
+}
+
+function Stat({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-xl border border-zinc-200 bg-white p-4">
+      <div className="text-[11px] font-medium uppercase tracking-wide text-zinc-400">{label}</div>
+      <div className="mt-1 text-2xl font-semibold tabular-nums text-zinc-900">{value}</div>
+    </div>
+  );
+}
+
+function StatusBadge({ status }: { status: string }) {
+  const tone =
+    status === "approved"
+      ? "bg-green-50 text-green-700"
+      : status === "rejected"
+        ? "bg-zinc-100 text-zinc-400"
+        : "bg-amber-50 text-amber-700"; // new
+  const label = status === "new" ? "pending" : status;
+  return <span className={"rounded-full px-2 py-0.5 text-[10px] font-medium capitalize " + tone}>{label}</span>;
+}
+
+function OwnerOnly({ email }: { email: string }) {
+  return (
+    <div className="rounded-xl border border-dashed border-zinc-300 px-6 py-12 text-center">
+      <h1 className="text-lg font-semibold">This dashboard is owner-only</h1>
+      <p className="mx-auto mt-2 max-w-md text-sm text-zinc-500">
+        You&apos;re signed in as <span className="font-medium text-zinc-700">{email || "this account"}</span>.
+        Only the curator can review submissions. Set{" "}
+        <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">PYLON_OWNER_EMAIL={email || "you@yourdirectory.com"}</code>{" "}
+        in your <code className="rounded bg-zinc-100 px-1.5 py-0.5 text-[12px]">.env</code>, restart, and reload —
+        or sign in with the owner account.
+      </p>
+    </div>
+  );
+}
+
+export function UserMenu({ email }: { email: string }) {
+  const { signOut } = useAuth();
+  const initial = (email.trim()[0] || "?").toUpperCase();
+  async function onSignOut() {
+    await signOut();
+    window.location.assign("/");
+  }
+  return (
+    <details className="group relative">
+      <summary className="flex size-8 cursor-pointer select-none list-none items-center justify-center rounded-full bg-zinc-900 text-[12px] font-semibold text-white marker:hidden [&::-webkit-details-marker]:hidden">
+        {initial}
+      </summary>
+      <div className="absolute right-0 top-full z-40 mt-2 w-56 overflow-hidden rounded-xl border border-zinc-200 bg-white py-1 shadow-[0_16px_48px_-16px_rgba(0,0,0,0.25)]">
+        <div className="border-b border-zinc-100 px-3 py-2">
+          <div className="truncate text-[13px] font-medium text-zinc-900">{email || "Signed in"}</div>
+        </div>
+        <button
+          type="button"
+          onClick={onSignOut}
+          className="flex w-full items-center px-3 py-2 text-left text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
+        >
+          Sign out
+        </button>
+      </div>
+    </details>
+  );
+}
+
+function Skeleton() {
+  return (
+    <div className="space-y-8">
+      <div className="h-6 w-32 animate-pulse rounded bg-zinc-100" />
+      <div className="grid gap-4 sm:grid-cols-3">
+        {[0, 1, 2].map((i) => (
+          <div key={i} className="h-20 animate-pulse rounded-xl bg-zinc-100" />
+        ))}
+      </div>
+      <div className="h-48 animate-pulse rounded-xl bg-zinc-100" />
+    </div>
+  );
+}

package/templates/directory/app/dashboard/page.tsx

@@ -0,0 +1,70 @@
+import React, { use } from "react";
+import { Link, type Metadata, type PageProps } from "@pylonsync/react";
+import { siteConfig } from "@/lib/site.config";
+import { UserMenu, DirectoryDashboard } from "./dashboard-client";
+
+export const metadata: Metadata = {
+  title: `Dashboard — ${siteConfig.brand.name}`,
+  robots: "noindex",
+};
+
+// `app/dashboard/page.tsx` → `/dashboard`. Server-side auth gate only — any
+// signed-in user can load the shell. The OWNER gate (a directory is single-
+// tenant: only PYLON_OWNER_EMAIL may see submissions) lives in the
+// `submissionsForOwner` function, which checks `ctx.env.PYLON_OWNER_EMAIL` — the
+// authoritative server env. Non-owners get a clean "owner-only" card from the
+// client when that call is denied. (Env-based config is read in the function,
+// not here: an SSR page render can't reliably read arbitrary `process.env`.)
+export default function DashboardPage({ auth, response, serverData }: PageProps) {
+  // Anonymous visitors and guest sessions (guest_… ids) get bounced to login —
+  // the dashboard is for the real, signed-in owner only.
+  if (!auth.user_id || auth.user_id.startsWith("guest_")) {
+    response.redirect("/login");
+    return null;
+  }
+
+  // The User self-read policy lets the signed-in user read their own row → the
+  // email shown in the account menu (and on the owner-only card).
+  const me = use(serverData.get<{ email?: string }>("User", auth.user_id));
+  const email = me?.email ?? "";
+
+  return (
+    <Shell email={email}>
+      <DirectoryDashboard userEmail={email} />
+    </Shell>
+  );
+}
+
+// Dashboard chrome: a slim top bar with the logo, a link back to the public
+// site, and the account menu (a client island for sign-out).
+function Shell({ email, children }: { email: string; children: React.ReactNode }) {
+  const { brand } = siteConfig;
+  return (
+    <div className="flex min-h-screen flex-col bg-white text-zinc-900">
+      <header className="border-b border-zinc-200">
+        <div className="mx-auto flex h-14 max-w-4xl items-center justify-between px-6">
+          <div className="flex items-center gap-2">
+            <span className="flex size-6 items-center justify-center rounded-[7px] bg-zinc-900 text-[13px] font-bold text-white">
+              {brand.letter}
+            </span>
+            <span className="text-[15px] font-semibold tracking-tight">
+              {brand.name} <span className="text-zinc-400">/ curator</span>
+            </span>
+          </div>
+          <div className="flex items-center gap-4">
+            <Link
+              href="/"
+              className="text-[13px] text-zinc-500 transition-colors hover:text-zinc-900"
+            >
+              View site ↗
+            </Link>
+            <UserMenu email={email} />
+          </div>
+        </div>
+      </header>
+      <main className="flex-1">
+        <div className="mx-auto max-w-4xl px-6 py-8">{children}</div>
+      </main>
+    </div>
+  );
+}

package/templates/directory/app/directory-browse.tsx

@@ -0,0 +1,328 @@
+"use client";
+
+import React, { useEffect, useMemo, useState } from "react";
+import { db, callFn } from "@pylonsync/react";
+import { EnsureGuest } from "@pylonsync/client";
+import { siteConfig } from "@/lib/site.config";
+import { parseTags, type ListingRow } from "@/lib/directory";
+
+// The browse experience — the FTS showcase + the realtime heart of the template.
+// `db.useSearch("Listing", …)` is a LIVE faceted full-text search: it re-runs
+// the moment the box changes AND whenever the Listing table is written, so the
+// vote counts tick up across every open tab the instant anyone upvotes (the
+// `upvote` mutation is the write). No search service, no polling.
+//
+// Wrapped in <EnsureGuest> so the sync connection (which makes useSearch live)
+// is established for anonymous visitors, and so seedListings can run on first
+// load. The guest session holds no PII; Listings carry none.
+
+const SORTS: { label: string; value: [string, "asc" | "desc"] }[] = [
+  { label: "Top voted", value: ["votes", "desc"] },
+  { label: "Newest", value: ["createdAt", "desc"] },
+];
+
+export function DirectoryBrowse() {
+  return (
+    <EnsureGuest fallback={<BrowseSkeleton />}>
+      <BrowseInner />
+    </EnsureGuest>
+  );
+}
+
+function BrowseInner() {
+  const [query, setQuery] = useState("");
+  const [debounced, setDebounced] = useState("");
+  const [category, setCategory] = useState<string | null>(null);
+  const [sortIdx, setSortIdx] = useState(0);
+
+  // Seed the directory from config on first visit (idempotent server-side).
+  useEffect(() => {
+    void callFn("seedListings", {});
+  }, []);
+
+  // Debounce the query so we're not firing a search on every keystroke.
+  useEffect(() => {
+    const t = setTimeout(() => setDebounced(query.trim()), 180);
+    return () => clearTimeout(t);
+  }, [query]);
+
+  const search = db.useSearch<ListingRow>("Listing", {
+    query: debounced,
+    filters: category ? { category } : {},
+    facets: ["category"],
+    sort: SORTS[sortIdx].value,
+    pageSize: 100,
+  });
+
+  const categoryCounts = search.facetCounts.category ?? {};
+  const categories = useMemo(
+    () => Object.keys(categoryCounts).sort((a, b) => categoryCounts[b] - categoryCounts[a]),
+    [categoryCounts],
+  );
+
+  return (
+    <div>
+      {/* Search bar */}
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div className="relative flex-1">
+          <SearchIcon />
+          <input
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={siteConfig.hero.searchPlaceholder}
+            aria-label="Search the directory"
+            className="h-11 w-full rounded-full border border-zinc-300 bg-white pl-10 pr-4 text-[15px] text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+          />
+        </div>
+        <div className="flex items-center gap-1 rounded-full border border-zinc-200 bg-white p-1">
+          {SORTS.map((s, i) => (
+            <button
+              key={s.label}
+              type="button"
+              onClick={() => setSortIdx(i)}
+              className={
+                "rounded-full px-3 py-1.5 text-[13px] font-medium transition-colors " +
+                (i === sortIdx ? "bg-brand text-white" : "text-zinc-600 hover:text-zinc-900")
+              }
+            >
+              {s.label}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-6 grid gap-8 lg:grid-cols-[200px_1fr]">
+        {/* Facet sidebar — live counts per category from the search */}
+        <aside className="hidden lg:block">
+          <h3 className="font-mono text-[11px] uppercase tracking-[0.14em] text-zinc-400">Category</h3>
+          <ul className="mt-3 space-y-0.5">
+            <FacetItem
+              label="All"
+              count={search.total}
+              active={category === null}
+              onClick={() => setCategory(null)}
+            />
+            {categories.map((c) => (
+              <FacetItem
+                key={c}
+                label={c}
+                count={categoryCounts[c]}
+                active={category === c}
+                onClick={() => setCategory(category === c ? null : c)}
+              />
+            ))}
+          </ul>
+        </aside>
+
+        {/* Results */}
+        <div>
+          <div className="mb-3 flex items-center justify-between text-[13px] text-zinc-500">
+            <span>
+              <span className="font-medium text-zinc-900">{search.total}</span>{" "}
+              {search.total === 1 ? "tool" : "tools"}
+              {category ? <> in {category}</> : null}
+              {debounced ? <> matching “{debounced}”</> : null}
+            </span>
+            {category ? (
+              <button type="button" onClick={() => setCategory(null)} className="text-brand hover:underline">
+                Clear filter
+              </button>
+            ) : null}
+          </div>
+
+          {search.loading && search.hits.length === 0 ? (
+            <BrowseSkeleton bare />
+          ) : search.hits.length === 0 ? (
+            <p className="rounded-xl border border-dashed border-zinc-300 px-6 py-12 text-center text-sm text-zinc-500">
+              No tools match. Try a different search — or{" "}
+              <a href="/submit" className="font-medium text-brand hover:underline">submit one</a>.
+            </p>
+          ) : (
+            <ul className="space-y-3">
+              {search.hits.map((l) => (
+                <ListingCard key={l.id} listing={l} />
+              ))}
+            </ul>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function FacetItem({
+  label,
+  count,
+  active,
+  onClick,
+}: {
+  label: string;
+  count: number;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <li>
+      <button
+        type="button"
+        onClick={onClick}
+        className={
+          "flex w-full items-center justify-between rounded-lg px-2.5 py-1.5 text-left text-[13.5px] transition-colors " +
+          (active ? "bg-brand-soft font-medium text-brand" : "text-zinc-600 hover:bg-zinc-100")
+        }
+      >
+        <span>{label}</span>
+        <span className="tabular-nums text-[12px] text-zinc-400">{count ?? 0}</span>
+      </button>
+    </li>
+  );
+}
+
+function ListingCard({ listing }: { listing: ListingRow }) {
+  const tags = parseTags(listing.tags);
+  return (
+    <li className="flex items-start gap-4 rounded-2xl border border-zinc-200 bg-white p-4 transition-shadow hover:shadow-sm">
+      <VoteButton listingId={listing.id} votes={listing.votes} />
+      <div className="min-w-0 flex-1">
+        <div className="flex flex-wrap items-center gap-2">
+          <a
+            href={listing.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-[15px] font-semibold text-zinc-900 hover:text-brand"
+          >
+            {listing.name}
+          </a>
+          {listing.featured ? (
+            <span className="rounded-full bg-brand-soft px-2 py-0.5 text-[10px] font-medium uppercase tracking-wide text-brand">
+              Featured
+            </span>
+          ) : null}
+          <span className="rounded-full bg-zinc-100 px-2 py-0.5 text-[11px] font-medium text-zinc-500">
+            {listing.category}
+          </span>
+        </div>
+        <p className="mt-1 text-[14px] leading-relaxed text-zinc-600">{listing.tagline}</p>
+        {tags.length > 0 ? (
+          <div className="mt-2 flex flex-wrap gap-1.5">
+            {tags.map((t) => (
+              <span key={t} className="rounded bg-zinc-50 px-1.5 py-0.5 text-[11px] text-zinc-400">
+                #{t}
+              </span>
+            ))}
+          </div>
+        ) : null}
+      </div>
+      <a
+        href={listing.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        aria-label={`Visit ${listing.name}`}
+        className="mt-1 shrink-0 text-zinc-300 transition-colors hover:text-brand"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+          <path d="M7 17 17 7M7 7h10v10" />
+        </svg>
+      </a>
+    </li>
+  );
+}
+
+// The upvote control. Clicking calls the public `upvote` mutation; the count
+// you see comes from the LIVE search, so it ticks up here and in every other
+// open tab. localStorage remembers your votes so the arrow stays "voted".
+function VoteButton({ listingId, votes }: { listingId: string; votes: number }) {
+  const [voted, setVoted] = useState(false);
+
+  useEffect(() => {
+    try {
+      setVoted(localStorage.getItem(`voted:${listingId}`) === "1");
+    } catch {
+      /* ignore */
+    }
+  }, [listingId]);
+
+  async function onVote() {
+    if (voted) return;
+    setVoted(true);
+    try {
+      localStorage.setItem(`voted:${listingId}`, "1");
+    } catch {
+      /* ignore */
+    }
+    try {
+      await callFn("upvote", { listingId });
+    } catch {
+      setVoted(false);
+      try {
+        localStorage.removeItem(`voted:${listingId}`);
+      } catch {
+        /* ignore */
+      }
+    }
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onVote}
+      disabled={voted}
+      aria-label="Upvote"
+      className={
+        "flex h-14 w-12 shrink-0 flex-col items-center justify-center rounded-xl border text-center transition-colors " +
+        (voted
+          ? "border-brand bg-brand-soft text-brand"
+          : "border-zinc-200 text-zinc-500 hover:border-brand hover:text-brand")
+      }
+    >
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
+        <path d="m18 15-6-6-6 6" />
+      </svg>
+      <span className="text-[13px] font-semibold tabular-nums">{votes}</span>
+    </button>
+  );
+}
+
+function SearchIcon() {
+  return (
+    <svg
+      className="pointer-events-none absolute left-3.5 top-1/2 size-4 -translate-y-1/2 text-zinc-400"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden
+    >
+      <circle cx="11" cy="11" r="8" />
+      <path d="m21 21-4.3-4.3" />
+    </svg>
+  );
+}
+
+function BrowseSkeleton({ bare }: { bare?: boolean }) {
+  const list = (
+    <ul className="space-y-3">
+      {Array.from({ length: 6 }).map((_, i) => (
+        <li key={i} className="flex items-start gap-4 rounded-2xl border border-zinc-200 bg-white p-4">
+          <div className="h-14 w-12 animate-pulse rounded-xl bg-zinc-100" />
+          <div className="flex-1 space-y-2 py-1">
+            <div className="h-4 w-1/3 animate-pulse rounded bg-zinc-100" />
+            <div className="h-3 w-2/3 animate-pulse rounded bg-zinc-100" />
+          </div>
+        </li>
+      ))}
+    </ul>
+  );
+  if (bare) return list;
+  return (
+    <div>
+      <div className="h-11 w-full animate-pulse rounded-full bg-zinc-100" />
+      <div className="mt-6 grid gap-8 lg:grid-cols-[200px_1fr]">
+        <div className="hidden h-40 animate-pulse rounded-xl bg-zinc-100 lg:block" />
+        {list}
+      </div>
+    </div>
+  );
+}

package/templates/directory/app/error.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { type ErrorBoundaryProps } from "@pylonsync/react";
+
+// `app/error.tsx` → the error boundary for this segment. Hydrated + interactive:
+// `reset()` re-attempts the route. The thrown error reaches the client as
+// `{ message, digest }` only — the stack stays in the dev overlay / server logs.
+export default function Error({ error, reset }: ErrorBoundaryProps) {
+  return (
+    <div className="mx-auto flex min-h-[60vh] max-w-3xl flex-col items-center justify-center px-6 text-center">
+      <h1 className="text-2xl font-semibold tracking-tight">Something went wrong</h1>
+      <p className="mt-2 text-zinc-500">{error.message}</p>
+      {error.digest ? (
+        <p className="mt-1 text-xs text-zinc-400">
+          Reference: <code>{error.digest}</code>
+        </p>
+      ) : null}
+      <button
+        type="button"
+        onClick={reset}
+        className="mt-6 inline-flex h-10 items-center rounded-full bg-zinc-900 px-5 text-sm font-medium text-white transition-colors hover:bg-zinc-700"
+      >
+        Try again
+      </button>
+    </div>
+  );
+}