@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/directory/app/(marketing)/directory-browse.tsx

@@ -6,7 +6,7 @@ import { EnsureGuest } from "@pylonsync/client";
 import { ArrowUpRight, ChevronUp } from "lucide-react";
 import { siteConfig } from "@/lib/site.config";
 import { LINK } from "@/components/marketing";
-import { parseTags, type ListingRow } from "@/lib/directory";
+import { monogram, parseTags, type ListingRow } from "@/lib/directory";
 
 // The browse island: search box, category rail, and the list.
 // `db.useSearch("Listing", …)` is a LIVE faceted full-text search: it re-runs
@@ -89,18 +89,18 @@ function BrowseInner() {
         className="h-10 w-full border border-zinc-300 bg-white px-3 font-mono text-[13px] text-zinc-900 outline-none placeholder:text-zinc-400 focus:border-brand"
       />
 
-      <div className="mt-6 grid gap-8 lg:grid-cols-[180px_1fr]">
+      <div className="mt-6 grid grid-cols-[minmax(0,1fr)] gap-6 lg:grid-cols-[180px_minmax(0,1fr)] lg:gap-8">
         {/* Category rail. Live counts per category come from the search. On
-            narrow screens the same links run in a horizontal row. */}
-        <aside>
+            narrow screens the same links wrap as a row of chips. */}
+        <aside className="min-w-0">
           <p className="border-b border-zinc-200 pb-2 text-[12px] font-medium uppercase tracking-wide text-zinc-500">
             Category
           </p>
-          <ul className="mt-2 flex gap-x-4 gap-y-1 overflow-x-auto pb-1 lg:flex-col lg:overflow-visible">{facetLinks}</ul>
+          <ul className="mt-3 flex flex-wrap gap-2 lg:mt-2 lg:flex-col lg:gap-0">{facetLinks}</ul>
         </aside>
 
         {/* Results */}
-        <div>
+        <div className="min-w-0">
           <div className="flex items-center justify-between border-b border-zinc-200 pb-2 text-[13px] text-zinc-500">
             <span className={MONO_SMALL}>
               {search.total} {search.total === 1 ? "tool" : "tools"}
@@ -163,14 +163,16 @@ function FacetLink({
   onClick: () => void;
 }) {
   return (
-    <li className="shrink-0">
+    <li>
       <button
         type="button"
         onClick={onClick}
         aria-pressed={active}
         className={
-          "flex w-full items-baseline gap-2 py-0.5 text-left text-[14px] lg:justify-between " +
-          (active ? "font-medium text-zinc-900" : "text-brand hover:underline")
+          "flex w-full items-baseline gap-2 border px-2.5 py-1 text-left text-[13px] lg:justify-between lg:border-0 lg:px-0 lg:py-0.5 lg:text-[14px] " +
+          (active
+            ? "border-zinc-900 font-medium text-zinc-900"
+            : "border-zinc-200 text-brand hover:border-zinc-300 lg:hover:underline")
         }
       >
         <span>{label}</span>
@@ -183,8 +185,9 @@ function FacetLink({
 function ListingRowItem({ listing }: { listing: ListingRow }) {
   const tags = parseTags(listing.tags);
   return (
-    <li className="grid grid-cols-[44px_1fr_20px] items-start gap-3 border-b border-zinc-200 py-3">
+    <li className="grid grid-cols-[44px_36px_minmax(0,1fr)_20px] items-start gap-3 border-b border-zinc-200 py-3">
       <VoteButton listingId={listing.id} votes={listing.votes} />
+      <ToolMark name={listing.name} />
       <div className="min-w-0">
         <div className="flex flex-wrap items-baseline gap-x-2">
           <a href={listing.url} target="_blank" rel="noopener noreferrer" className="text-[14px] font-semibold text-zinc-900 hover:text-brand">
@@ -211,6 +214,20 @@ function ListingRowItem({ listing }: { listing: ListingRow }) {
   );
 }
 
+// A tool's monogram mark (see monogram in lib/directory.ts).
+function ToolMark({ name }: { name: string }) {
+  const m = monogram(name);
+  return (
+    <span
+      aria-hidden
+      className="flex size-9 items-center justify-center rounded-md font-mono text-[13px] font-semibold tracking-tight"
+      style={{ backgroundColor: m.bg, color: m.fg }}
+    >
+      {m.letters}
+    </span>
+  );
+}
+
 // 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".
@@ -267,8 +284,9 @@ function BrowseSkeleton({ bare }: { bare?: boolean }) {
   const list = (
     <ul>
       {Array.from({ length: 6 }).map((_, i) => (
-        <li key={i} className="grid grid-cols-[44px_1fr_20px] gap-3 border-b border-zinc-200 py-3">
+        <li key={i} className="grid grid-cols-[44px_36px_minmax(0,1fr)_20px] gap-3 border-b border-zinc-200 py-3">
           <div className="mx-auto h-8 w-6 animate-pulse bg-zinc-100" />
+          <div className="size-9 animate-pulse rounded-md bg-zinc-100" />
           <div className="space-y-2 py-0.5">
             <div className="h-3.5 w-1/3 animate-pulse bg-zinc-100" />
             <div className="h-3 w-2/3 animate-pulse bg-zinc-100" />
@@ -281,7 +299,7 @@ function BrowseSkeleton({ bare }: { bare?: boolean }) {
   return (
     <div>
       <div className="h-10 w-full animate-pulse border border-zinc-200 bg-zinc-50" />
-      <div className="mt-6 grid gap-8 lg:grid-cols-[180px_1fr]">
+      <div className="mt-6 grid grid-cols-[minmax(0,1fr)] gap-8 lg:grid-cols-[180px_minmax(0,1fr)]">
         <div className="hidden h-40 animate-pulse bg-zinc-50 lg:block" />
         {list}
       </div>

package/templates/directory/app/(marketing)/page.tsx

@@ -16,11 +16,13 @@ export const metadata: Metadata = {
 // Listing table. Copy comes from siteConfig; the listings seed on first visit.
 // Doesn't read `auth`, so the public page stays cacheable.
 export default function LandingPage() {
-  const { brand, intro } = siteConfig;
+  const { intro } = siteConfig;
   return (
-    <div className={`${WRAP} pb-20 pt-8`}>
-      <h1 className="font-display text-[22px] leading-tight text-zinc-900">{brand.name}</h1>
-      <p className="mt-1 max-w-2xl text-[14px] leading-relaxed text-zinc-600">{intro.description}</p>
+    <div className={`${WRAP} pb-20 pt-10 sm:pt-14`}>
+      <h1 className="text-balance text-[1.75rem] font-semibold leading-tight tracking-[-0.02em] text-zinc-900 sm:text-[2.25rem]">
+        {intro.headline}
+      </h1>
+      <p className="mt-2 max-w-2xl text-[15px] leading-relaxed text-zinc-600">{intro.description}</p>
       <div id="browse" className="mt-5">
         <DirectoryBrowse />
       </div>

package/templates/directory/app/auth-form.tsx

@@ -59,7 +59,7 @@ export function AuthForm() {
             required
             autoComplete="email"
             placeholder="you@yourbusiness.com"
-            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+            className="h-10 w-full border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand"
           />
         </label>
         <label className="block">
@@ -71,18 +71,18 @@ export function AuthForm() {
             required
             autoComplete={mode === "login" ? "current-password" : "new-password"}
             placeholder={mode === "login" ? "Your password" : "At least 10 characters"}
-            className="h-10 w-full rounded-lg border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand focus:ring-2 focus:ring-brand/20"
+            className="h-10 w-full border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-brand"
           />
         </label>
         {error ? (
-          <p className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-[13px] leading-snug text-red-700">
+          <p className="border border-red-200 bg-red-50 px-3 py-2 text-[13px] leading-snug text-red-700">
             {error}
           </p>
         ) : null}
         <button
           type="submit"
           disabled={pending}
-          className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60"
+          className="inline-flex h-10 w-full items-center justify-center bg-zinc-900 text-sm font-medium text-white transition-colors hover:bg-zinc-700 disabled:opacity-60"
         >
           {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
         </button>

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

@@ -3,13 +3,27 @@
 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";
+import { ArrowUpRight, Check, LogOut, X } from "lucide-react";
+import {
+  monogram,
+  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
+// `submissionsForOwner`, so the queue stays current without a reload, while
 // submitter PII only ever travels through the gated call.
+type Filter = "new" | "approved" | "rejected";
+
+const FILTERS: { id: Filter; label: string }[] = [
+  { id: "new", label: "Pending" },
+  { id: "approved", label: "Approved" },
+  { id: "rejected", label: "Rejected" },
+];
+
 export function DirectoryDashboard({ userEmail }: { userEmail: string }) {
   const { data: listings } = db.useQuery<{ id: string }>("Listing");
   const liveCount = listings.length;
@@ -18,6 +32,8 @@ export function DirectoryDashboard({ userEmail }: { userEmail: string }) {
   const [denied, setDenied] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [busyId, setBusyId] = useState<string | null>(null);
+  const [filter, setFilter] = useState<Filter>("new");
+  const [seedDone, setSeedDone] = useState(false);
 
   async function load() {
     try {
@@ -33,10 +49,20 @@ export function DirectoryDashboard({ userEmail }: { userEmail: string }) {
     }
   }
 
+  // In `pylon dev` an empty queue gets demo submissions (functions/seedDemo.ts)
+  // before the first load. On a deploy, or for a non-owner, the call writes
+  // nothing.
   useEffect(() => {
+    void callFn("seedDemo", {})
+      .catch(() => {})
+      .finally(() => setSeedDone(true));
+  }, []);
+
+  useEffect(() => {
+    if (!seedDone) return;
     void load();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [liveCount]);
+  }, [liveCount, seedDone]);
 
   async function act(id: string, fn: "approveSubmission" | "rejectSubmission") {
     setBusyId(id);
@@ -50,113 +76,170 @@ export function DirectoryDashboard({ userEmail }: { userEmail: string }) {
 
   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>;
+    return <div className="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;
+  const counts: Record<Filter, number> = { new: 0, approved: 0, rejected: 0 };
+  for (const s of submissions) {
+    if (s.status === "new" || s.status === "approved" || s.status === "rejected") counts[s.status]++;
+  }
+  const shown = submissions.filter((s) => s.status === filter);
 
   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.
+        <h1 className="text-[1.75rem] font-semibold leading-tight tracking-[-0.02em] text-zinc-900 sm:text-[2rem]">
+          Review queue
+        </h1>
+        <p className="mt-2 max-w-xl text-[14px] leading-relaxed text-zinc-600">
+          New submissions land here. Approving one publishes it to the directory right away.
         </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>
+      <dl className="grid grid-cols-3 divide-x divide-zinc-200 border-y border-zinc-200">
+        <Stat label="Pending" value={counts.new} accent={counts.new > 0} />
+        <Stat label="Approved" value={counts.approved} />
+        <Stat label="Live listings" value={liveCount} />
+      </dl>
 
-      <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>
+      <section>
+        <div className="flex items-center gap-4 border-b border-zinc-200">
+          {FILTERS.map((f) => (
+            <button
+              key={f.id}
+              type="button"
+              onClick={() => setFilter(f.id)}
+              aria-pressed={filter === f.id}
+              className={
+                "-mb-px border-b-2 pb-2 text-[14px] transition-colors " +
+                (filter === f.id
+                  ? "border-zinc-900 font-medium text-zinc-900"
+                  : "border-transparent text-zinc-500 hover:text-zinc-900")
+              }
+            >
+              {f.label} <span className="font-mono text-[12px] text-zinc-400">{counts[f.id]}</span>
+            </button>
+          ))}
         </div>
-        {submissions.length === 0 ? (
-          <p className="p-8 text-center text-sm text-zinc-500">No submissions yet.</p>
+
+        {shown.length === 0 ? (
+          <p className="py-12 text-center text-[14px] text-zinc-500">
+            {filter === "new"
+              ? "Nothing to review. New submissions appear here as they arrive."
+              : `No ${filter} submissions.`}
+          </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>
+            {shown.map((s) => (
+              <QueueItem key={s.id} s={s} busy={busyId === s.id} onAct={act} />
             ))}
           </ul>
         )}
-      </div>
+      </section>
     </div>
   );
 }
 
-function Stat({ label, value }: { label: string; value: string }) {
+function QueueItem({
+  s,
+  busy,
+  onAct,
+}: {
+  s: SubmissionRow;
+  busy: boolean;
+  onAct: (id: string, fn: "approveSubmission" | "rejectSubmission") => void;
+}) {
+  const m = monogram(s.name);
+  const tags = parseTags(s.tags);
   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>
+    <li className="grid grid-cols-[36px_minmax(0,1fr)] gap-x-3 gap-y-3 border-b border-zinc-200 py-4 sm:grid-cols-[36px_minmax(0,1fr)_auto]">
+      <span
+        aria-hidden
+        className="flex size-9 items-center justify-center rounded-md font-mono text-[13px] font-semibold"
+        style={{ backgroundColor: m.bg, color: m.fg }}
+      >
+        {m.letters}
+      </span>
+      <div className="min-w-0">
+        <div className="flex flex-wrap items-baseline gap-x-2">
+          <a
+            href={s.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1 text-[15px] font-semibold text-zinc-900 hover:text-brand"
+          >
+            {s.name}
+            <ArrowUpRight aria-hidden className="size-3.5 text-zinc-400" />
+          </a>
+          <span className="font-mono text-[12px] text-zinc-400">{s.category}</span>
+        </div>
+        <p className="mt-0.5 text-[14px] leading-snug text-zinc-700">{s.tagline}</p>
+        {s.description ? (
+          <p className="mt-1 max-w-2xl text-[13px] leading-relaxed text-zinc-500">{s.description}</p>
+        ) : null}
+        <p className="mt-1.5 truncate font-mono text-[12px] text-zinc-400">
+          {s.submitterName} · {s.submitterEmail} · {ago(s.createdAt)}
+          {tags.length ? ` · ${tags.join(", ")}` : ""}
+        </p>
+      </div>
+      {s.status === "new" ? (
+        <div className="col-start-2 flex items-center gap-2 sm:col-start-3 sm:self-start">
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => onAct(s.id, "approveSubmission")}
+            className="inline-flex h-8 items-center gap-1.5 bg-brand px-3 text-[13px] font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-50"
+          >
+            <Check aria-hidden className="size-3.5" />
+            Approve
+          </button>
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => onAct(s.id, "rejectSubmission")}
+            className="inline-flex h-8 items-center gap-1.5 border border-zinc-300 px-3 text-[13px] font-medium text-zinc-600 transition-colors hover:border-zinc-500 hover:text-zinc-900 disabled:opacity-50"
+          >
+            <X aria-hidden className="size-3.5" />
+            Reject
+          </button>
+        </div>
+      ) : null}
+    </li>
   );
 }
 
-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 ago(iso: string): string {
+  const mins = Math.max(0, Math.round((Date.now() - Date.parse(iso)) / 60_000));
+  if (mins < 60) return `${mins}m ago`;
+  const hours = Math.round(mins / 60);
+  if (hours < 48) return `${hours}h ago`;
+  return `${Math.round(hours / 24)}d ago`;
+}
+
+function Stat({ label, value, accent }: { label: string; value: number; accent?: boolean }) {
+  return (
+    <div className="px-4 py-4 first:pl-0">
+      <dt className="text-[12px] font-medium uppercase tracking-wide text-zinc-500">{label}</dt>
+      <dd className={"mt-1 font-mono text-[1.75rem] leading-none tabular-nums " + (accent ? "text-brand" : "text-zinc-900")}>
+        {value}
+      </dd>
+    </div>
+  );
 }
 
 function OwnerOnly({ email }: { email: string }) {
   return (
-    <div className="rounded-xl border border-dashed border-zinc-300 px-6 py-12 text-center">
+    <div className="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.
+        You are signed in as <span className="font-medium text-zinc-700">{email || "this account"}</span>.
+        Only the directory owner can review submissions. Set{" "}
+        <code className="bg-zinc-100 px-1.5 py-0.5 font-mono text-[12px]">
+          PYLON_OWNER_EMAIL={email || "you@yourdirectory.com"}
+        </code>{" "}
+        in <code className="bg-zinc-100 px-1.5 py-0.5 font-mono text-[12px]">.env</code>, restart, and
+        reload. Or sign in with the owner account.
       </p>
     </div>
   );
@@ -171,18 +254,22 @@ export function UserMenu({ email }: { email: string }) {
   }
   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">
+      <summary
+        aria-label="Account"
+        className="flex size-7 cursor-pointer select-none list-none items-center justify-center bg-zinc-900 font-mono 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 className="absolute right-0 top-full z-40 mt-2 w-60 border border-zinc-200 bg-white py-1 shadow-[0_16px_40px_-20px_rgba(0,0,0,0.3)]">
+        <div className="truncate border-b border-zinc-100 px-3 py-2 font-mono text-[12px] text-zinc-700">
+          {email || "Signed in"}
         </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"
+          className="flex w-full items-center gap-2 px-3 py-2 text-left text-[13px] text-zinc-700 transition-colors hover:bg-zinc-50"
         >
+          <LogOut aria-hidden className="size-3.5" />
           Sign out
         </button>
       </div>
@@ -193,13 +280,13 @@ export function UserMenu({ email }: { email: string }) {
 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 className="h-8 w-48 animate-pulse bg-zinc-100" />
+      <div className="h-20 animate-pulse bg-zinc-50" />
+      <div className="space-y-3">
+        {[0, 1, 2, 3].map((i) => (
+          <div key={i} className="h-16 animate-pulse bg-zinc-50" />
         ))}
       </div>
-      <div className="h-48 animate-pulse rounded-xl bg-zinc-100" />
     </div>
   );
 }

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

@@ -1,6 +1,8 @@
 import React, { use } from "react";
 import { Link, type Metadata, type PageProps } from "@pylonsync/react";
+import { ArrowUpRight } from "lucide-react";
 import { siteConfig } from "@/lib/site.config";
+import { WRAP } from "@/components/marketing";
 import { UserMenu, DirectoryDashboard } from "./dashboard-client";
 
 export const metadata: Metadata = {
@@ -35,35 +37,35 @@ export default function DashboardPage({ auth, response, serverData }: PageProps)
   );
 }
 
-// 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).
+// Dashboard chrome in the site's own look: the same slim white nav with the
+// directory name, a link back to the 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 className={`${WRAP} flex h-12 items-center justify-between`}>
+          <div className="flex items-baseline gap-2.5">
+            <Link href="/" className="text-[15px] font-semibold text-zinc-900">
+              {brand.name}
+            </Link>
+            <span className="font-mono text-[12px] text-zinc-400">curator</span>
           </div>
-          <div className="flex items-center gap-4">
+          <div className="flex items-center gap-5">
             <Link
               href="/"
-              className="text-[13px] text-zinc-500 transition-colors hover:text-zinc-900"
+              className="hidden items-center gap-1 text-[14px] text-zinc-600 hover:text-zinc-900 sm:inline-flex"
             >
-              View site ↗
+              View site
+              <ArrowUpRight aria-hidden className="size-3.5" />
             </Link>
             <UserMenu email={email} />
           </div>
         </div>
       </header>
       <main className="flex-1">
-        <div className="mx-auto max-w-4xl px-6 py-8">{children}</div>
+        <div className={`${WRAP} py-10`}>{children}</div>
       </main>
     </div>
   );

package/templates/directory/app/icon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="12" fill="#1d4ed8"/>
+<rect x="14" y="14" width="36" height="9" rx="2" fill="#ffffff"/>
+<rect x="14" y="27.5" width="28" height="9" rx="2" fill="#ffffff" opacity="0.8"/>
+<rect x="14" y="41" width="20" height="9" rx="2" fill="#ffffff" opacity="0.6"/></svg>

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

@@ -2,6 +2,7 @@ import React from "react";
 import { Link, type Metadata, type PageProps } from "@pylonsync/react";
 import { AuthForm } from "../auth-form";
 import { siteConfig } from "@/lib/site.config";
+import { WRAP } from "@/components/marketing";
 
 export const metadata: Metadata = {
   title: `Sign in — ${siteConfig.brand.name}`,
@@ -18,21 +19,21 @@ export default function LoginPage({ auth, response }: PageProps) {
   if (auth.user_id && !auth.user_id.startsWith("guest_")) response.redirect("/dashboard");
   const { brand } = siteConfig;
   return (
-    <div className="flex min-h-screen items-center justify-center bg-white px-6 py-12">
-      <div className="w-full max-w-[400px] rounded-2xl border border-zinc-200/70 p-8">
-        <Link href="/" className="inline-flex">
-          <span className="flex size-9 items-center justify-center rounded-xl bg-zinc-900 text-base font-bold text-white">
-            {brand.letter}
-          </span>
-        </Link>
-        <h1 className="mt-5 text-[22px] font-semibold tracking-tight text-zinc-900">
-          {brand.name} dashboard
-        </h1>
-        <p className="mt-1 text-[13px] text-zinc-500">
-          Sign in to manage your inquiries.
-        </p>
-        <div className="mt-6">
-          <AuthForm />
+    <div className="flex min-h-screen flex-col bg-white text-zinc-900">
+      <div className="border-b border-zinc-200">
+        <div className={`${WRAP} flex h-12 items-center`}>
+          <Link href="/" className="text-[15px] font-semibold">
+            {brand.name}
+          </Link>
+        </div>
+      </div>
+      <div className="flex flex-1 items-center justify-center px-5 py-16">
+        <div className="w-full max-w-[380px]">
+          <h1 className="text-[1.75rem] font-semibold tracking-[-0.02em]">Curator sign in</h1>
+          <p className="mt-2 text-[14px] text-zinc-600">Review submissions and publish them to {brand.name}.</p>
+          <div className="mt-8 border border-zinc-200 p-6">
+            <AuthForm />
+          </div>
         </div>
       </div>
     </div>