@pylonsync/create-pylon 0.3.321 → 0.3.322

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pylonsync/create-pylon",
-  "version": "0.3.321",
+  "version": "0.3.322",
   "description": "Scaffold a new Pylon app — realtime backend + web/mobile/expo frontends in one command. Run via `npm create @pylonsync/pylon@latest`.",
   "publishConfig": {
     "access": "public"

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

@@ -14,11 +14,26 @@ import {
   type PendingInvite,
 } from "@pylonsync/client";
 import { Button } from "@/components/ui/button";
+import {
+  FolderKanban,
+  Users2,
+  CreditCard,
+  ArrowRight,
+  FolderPlus,
+  Plus,
+  Pencil,
+  Archive,
+  ArchiveRestore,
+  Trash2,
+  Check,
+} from "lucide-react";
 
 export interface Project {
   id: string;
   orgId: string;
   name: string;
+  description?: string;
+  status?: string;
   createdAt: string;
 }
 
@@ -78,17 +93,89 @@ function Card({
   );
 }
 
-function Stat({ label, value }: { label: string; value: React.ReactNode }) {
+// A stat tile: icon + label, a big value, and a small context line.
+function StatCard({
+  icon,
+  label,
+  value,
+  hint,
+}: {
+  icon: React.ReactNode;
+  label: string;
+  value: React.ReactNode;
+  hint?: React.ReactNode;
+}) {
   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 className="flex items-center gap-2 text-zinc-400">
+        {icon}
+        <span className="text-[11px] font-medium uppercase tracking-wide">
+          {label}
+        </span>
       </div>
-      <div className="mt-1 text-2xl font-semibold text-zinc-900">{value}</div>
+      <div className="mt-2 text-2xl font-semibold text-zinc-900">{value}</div>
+      {hint != null && <div className="mt-0.5 text-xs text-zinc-400">{hint}</div>}
     </div>
   );
 }
 
+// Deterministic, timezone-independent date (UTC parts) so the SSR render and
+// client hydration always agree — a locale/tz-dependent format would mismatch
+// and throw a React #418 hydration error.
+const MONTHS = [
+  "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+  "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+];
+function fmtDate(iso: string) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return "";
+  return `${MONTHS[d.getUTCMonth()]} ${d.getUTCDate()}, ${d.getUTCFullYear()}`;
+}
+
+// A stable accent per project (hashed from its id) so each card/monogram gets a
+// consistent color without persisting one.
+const ACCENTS = [
+  "bg-blue-50 text-blue-600",
+  "bg-violet-50 text-violet-600",
+  "bg-emerald-50 text-emerald-600",
+  "bg-amber-50 text-amber-600",
+  "bg-rose-50 text-rose-600",
+  "bg-cyan-50 text-cyan-600",
+];
+function accentFor(id: string) {
+  let h = 0;
+  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) >>> 0;
+  return ACCENTS[h % ACCENTS.length];
+}
+function monogram(name: string) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  const s =
+    parts.length >= 2 ? parts[0][0] + parts[1][0] : name.trim()[0] ?? "?";
+  return s.toUpperCase();
+}
+
+function StatusPill({ status }: { status: string }) {
+  const archived = status === "archived";
+  return (
+    <span
+      className={
+        "inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-[11px] font-medium " +
+        (archived
+          ? "bg-zinc-100 text-zinc-500"
+          : "bg-emerald-50 text-emerald-600")
+      }
+    >
+      <span
+        className={
+          "size-1.5 rounded-full " +
+          (archived ? "bg-zinc-400" : "bg-emerald-500")
+        }
+      />
+      {archived ? "Archived" : "Active"}
+    </span>
+  );
+}
+
 const inputCls =
   "h-9 w-full rounded-md border border-zinc-300 bg-white px-3 text-sm text-zinc-900 outline-none transition placeholder:text-zinc-400 focus:border-zinc-900 focus:ring-2 focus:ring-zinc-900/10";
 
@@ -96,46 +183,118 @@ const inputCls =
 
 export function Overview({
   tenantId,
+  orgName,
+  userEmail,
   projects,
   memberCount,
   plan,
 }: {
   tenantId: string | null;
+  orgName?: string;
+  userEmail?: string;
   projects: Project[];
   memberCount: number;
   plan: string;
 }) {
   if (!tenantId) return <NoOrg />;
+  const activeCount = projects.filter(
+    (p) => (p.status ?? "active") !== "archived",
+  ).length;
+  const archivedCount = projects.length - activeCount;
+  const recent = [...projects]
+    .sort((a, b) => (a.createdAt < b.createdAt ? 1 : -1))
+    .slice(0, 5);
+  const firstName = (userEmail ?? "").split("@")[0];
+
   return (
     <div className="space-y-6">
+      <div>
+        <h1 className="text-xl font-semibold tracking-tight text-zinc-900">
+          {orgName ? `${orgName} overview` : "Overview"}
+        </h1>
+        <p className="mt-1 text-sm text-zinc-500">
+          {firstName ? `Welcome back, ${firstName}. ` : ""}Here&apos;s what&apos;s
+          happening in your workspace.
+        </p>
+      </div>
+
       <div className="grid gap-4 sm:grid-cols-3">
-        <Stat label="Projects" value={projects.length} />
-        <Stat label="Members" value={memberCount} />
-        <Stat
+        <StatCard
+          icon={<FolderKanban className="size-4" />}
+          label="Projects"
+          value={activeCount}
+          hint={archivedCount > 0 ? `${archivedCount} archived` : "active"}
+        />
+        <StatCard
+          icon={<Users2 className="size-4" />}
+          label="Members"
+          value={memberCount}
+          hint={memberCount === 1 ? "just you" : "in this workspace"}
+        />
+        <StatCard
+          icon={<CreditCard className="size-4" />}
           label="Plan"
           value={<span className="capitalize">{plan}</span>}
+          hint={
+            plan === "free" ? (
+              <a
+                href="/dashboard/billing"
+                className="text-brand hover:underline"
+              >
+                Upgrade to Pro →
+              </a>
+            ) : (
+              "thanks for the support"
+            )
+          }
         />
       </div>
+
       <Card
         title="Recent projects"
         action={
           <a
             href="/dashboard/projects"
-            className="text-[13px] font-medium text-brand hover:underline"
+            className="inline-flex items-center gap-1 text-[13px] font-medium text-brand hover:underline"
           >
-            View all →
+            View all <ArrowRight className="size-3.5" />
           </a>
         }
       >
-        {projects.length === 0 ? (
-          <p className="text-sm text-zinc-500">
-            No projects yet — create one on the Projects tab.
-          </p>
+        {recent.length === 0 ? (
+          <div className="flex flex-col items-center gap-2 py-8 text-center">
+            <span className="flex size-10 items-center justify-center rounded-xl bg-zinc-50 text-zinc-400">
+              <FolderPlus className="size-5" />
+            </span>
+            <p className="text-sm text-zinc-500">No projects yet.</p>
+            <a
+              href="/dashboard/projects"
+              className="text-[13px] font-medium text-brand hover:underline"
+            >
+              Create your first project →
+            </a>
+          </div>
         ) : (
-          <ul className="divide-y divide-zinc-100">
-            {projects.slice(0, 5).map((p) => (
-              <li key={p.id} className="py-2.5 text-sm text-zinc-700">
-                {p.name}
+          <ul className="-my-1 divide-y divide-zinc-100">
+            {recent.map((p) => (
+              <li key={p.id} className="flex items-center gap-3 py-2.5">
+                <span
+                  className={
+                    "flex size-8 shrink-0 items-center justify-center rounded-lg text-[12px] font-semibold " +
+                    accentFor(p.id)
+                  }
+                >
+                  {monogram(p.name)}
+                </span>
+                <div className="min-w-0 flex-1">
+                  <div className="truncate text-sm font-medium text-zinc-900">
+                    {p.name}
+                  </div>
+                  <div className="truncate text-xs text-zinc-400">
+                    Created {fmtDate(p.createdAt)}
+                  </div>
+                </div>
+                <StatusPill status={p.status ?? "active"} />
               </li>
             ))}
           </ul>
@@ -171,58 +330,246 @@ function ProjectsList({
   initial: Project[];
 }) {
   const [name, setName] = useState("");
+  const [desc, setDesc] = useState("");
+  // Render the server-seeded `initial` rows on the server AND the client's
+  // first paint, then swap to the live reactive query once mounted. Gating the
+  // swap on a post-mount flag (rather than `loading`, which is already settled
+  // during SSR) keeps the server HTML and the first client render identical —
+  // no hydration mismatch, and still no empty-state flash.
+  const [hydrated, setHydrated] = useState(false);
+  useEffect(() => setHydrated(true), []);
   const { data, loading } = db.useQuery<Project>("Project");
-  const projects = loading ? initial : data.filter((p) => p.orgId === orgId);
+  const rows =
+    !hydrated || loading ? initial : data.filter((p) => p.orgId === orgId);
+  const projects = rows
+    .slice()
+    .sort((a, b) => {
+      // Active first, then newest first.
+      const aa = (a.status ?? "active") === "archived" ? 1 : 0;
+      const bb = (b.status ?? "active") === "archived" ? 1 : 0;
+      if (aa !== bb) return aa - bb;
+      return a.createdAt < b.createdAt ? 1 : -1;
+    });
 
   async function add(e: React.FormEvent) {
     e.preventDefault();
     const value = name.trim();
     if (!value) return;
+    const description = desc.trim();
     setName("");
-    await db.insert("Project", { orgId, name: value });
+    setDesc("");
+    await db.insert("Project", {
+      orgId,
+      name: value,
+      status: "active",
+      ...(description ? { description } : {}),
+    });
   }
 
   return (
-    <Card title="Projects">
-      <form onSubmit={add} className="flex items-center gap-2">
+    <div className="space-y-5">
+      <div className="rounded-xl border border-zinc-200 bg-white p-4">
+        <form
+          onSubmit={add}
+          className="flex flex-col gap-2 sm:flex-row sm:items-center"
+        >
+          <input
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            placeholder="Project name"
+            aria-label="Project name"
+            className={inputCls + " sm:flex-1"}
+          />
+          <input
+            value={desc}
+            onChange={(e) => setDesc(e.target.value)}
+            placeholder="Short description (optional)"
+            aria-label="Project description"
+            className={inputCls + " sm:flex-1"}
+          />
+          <Button type="submit" size="sm" className="shrink-0">
+            <Plus className="size-4" /> New project
+          </Button>
+        </form>
+        <p className="mt-2 text-xs text-zinc-400">
+          Tenant-scoped + live — only this workspace&apos;s projects (enforced by
+          policy), and every change syncs across tabs instantly.
+        </p>
+      </div>
+
+      {projects.length === 0 ? (
+        <div className="flex flex-col items-center gap-2 rounded-xl border border-dashed border-zinc-300 py-14 text-center">
+          <span className="flex size-11 items-center justify-center rounded-xl bg-zinc-50 text-zinc-400">
+            <FolderPlus className="size-5" />
+          </span>
+          <p className="text-sm font-medium text-zinc-700">No projects yet</p>
+          <p className="text-xs text-zinc-400">
+            Create your first project above to get started.
+          </p>
+        </div>
+      ) : (
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {projects.map((p) => (
+            <ProjectCard key={p.id} p={p} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function IconBtn({
+  label,
+  danger,
+  onClick,
+  children,
+}: {
+  label: string;
+  danger?: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}) {
+  return (
+    <button
+      type="button"
+      aria-label={label}
+      title={label}
+      onClick={onClick}
+      className={
+        "flex size-7 items-center justify-center rounded-md text-zinc-400 transition-colors hover:bg-zinc-100 " +
+        (danger ? "hover:text-red-600" : "hover:text-zinc-700")
+      }
+    >
+      {children}
+    </button>
+  );
+}
+
+// One project card. Reads/writes live via the reactive `db` — rename, archive,
+// and delete are optimistic and sync across tabs (all gated by the tenant
+// policy). Editing swaps the card for an inline name + description form.
+function ProjectCard({ p }: { p: Project }) {
+  const archived = (p.status ?? "active") === "archived";
+  const [editing, setEditing] = useState(false);
+  const [name, setName] = useState(p.name);
+  const [desc, setDesc] = useState(p.description ?? "");
+
+  async function save(e: React.FormEvent) {
+    e.preventDefault();
+    const n = name.trim();
+    if (!n) return;
+    setEditing(false);
+    await db.update("Project", p.id, {
+      name: n,
+      description: desc.trim() || undefined,
+    });
+  }
+  function cancel() {
+    setEditing(false);
+    setName(p.name);
+    setDesc(p.description ?? "");
+  }
+
+  if (editing) {
+    return (
+      <form
+        onSubmit={save}
+        className="flex flex-col gap-2 rounded-xl border border-zinc-300 bg-white p-4"
+      >
         <input
+          autoFocus
           value={name}
           onChange={(e) => setName(e.target.value)}
-          placeholder="New project…"
           aria-label="Project name"
           className={inputCls}
         />
-        <Button type="submit" size="sm">
-          Add
-        </Button>
+        <textarea
+          value={desc}
+          onChange={(e) => setDesc(e.target.value)}
+          rows={2}
+          placeholder="Add a description…"
+          aria-label="Project description"
+          className={inputCls + " h-auto resize-none py-2"}
+        />
+        <div className="flex items-center gap-2">
+          <Button type="submit" size="sm">
+            <Check className="size-3.5" /> Save
+          </Button>
+          <button
+            type="button"
+            onClick={cancel}
+            className="text-[13px] font-medium text-zinc-500 transition-colors hover:text-zinc-800"
+          >
+            Cancel
+          </button>
+        </div>
       </form>
-      {projects.length === 0 ? (
-        <p className="mt-3 text-sm text-zinc-500">No projects yet.</p>
-      ) : (
-        <ul className="mt-3 space-y-1.5">
-          {projects.map((p) => (
-            <li
-              key={p.id}
-              className="flex items-center justify-between rounded-md border border-zinc-200 px-3 py-2 text-sm"
-            >
-              <span className="truncate">{p.name}</span>
-              <button
-                type="button"
-                aria-label="Delete project"
-                onClick={() => db.delete("Project", p.id)}
-                className="text-zinc-300 transition-colors hover:text-red-600"
-              >
-                ✕
-              </button>
-            </li>
-          ))}
-        </ul>
-      )}
-      <p className="mt-3 text-xs text-zinc-400">
-        Tenant-scoped + live: only this org&apos;s projects (enforced by policy),
-        seeded from the server so there&apos;s no load flash.
-      </p>
-    </Card>
+    );
+  }
+
+  return (
+    <div
+      className={
+        "flex flex-col rounded-xl border border-zinc-200 bg-white p-4 transition-colors hover:border-zinc-300 " +
+        (archived ? "opacity-60" : "")
+      }
+    >
+      <div className="flex items-start gap-3">
+        <span
+          className={
+            "flex size-9 shrink-0 items-center justify-center rounded-lg text-sm font-semibold " +
+            accentFor(p.id)
+          }
+        >
+          {monogram(p.name)}
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="truncate text-sm font-semibold text-zinc-900">
+            {p.name}
+          </div>
+          <p
+            className={
+              "mt-0.5 line-clamp-2 text-xs " +
+              (p.description ? "text-zinc-500" : "text-zinc-300")
+            }
+          >
+            {p.description || "No description"}
+          </p>
+        </div>
+        <div className="-mr-1 flex shrink-0 items-center">
+          <IconBtn label="Edit project" onClick={() => setEditing(true)}>
+            <Pencil className="size-3.5" />
+          </IconBtn>
+          <IconBtn
+            label={archived ? "Unarchive project" : "Archive project"}
+            onClick={() =>
+              db.update("Project", p.id, {
+                status: archived ? "active" : "archived",
+              })
+            }
+          >
+            {archived ? (
+              <ArchiveRestore className="size-3.5" />
+            ) : (
+              <Archive className="size-3.5" />
+            )}
+          </IconBtn>
+          <IconBtn
+            label="Delete project"
+            danger
+            onClick={() => db.delete("Project", p.id)}
+          >
+            <Trash2 className="size-3.5" />
+          </IconBtn>
+        </div>
+      </div>
+      <div className="mt-4 flex items-center justify-between">
+        <StatusPill status={p.status ?? "active"} />
+        <span className="text-[11px] text-zinc-400">
+          Created {fmtDate(p.createdAt)}
+        </span>
+      </div>
+    </div>
   );
 }
 

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

@@ -58,6 +58,8 @@ export default function DashboardPage({
     >
       <Overview
         tenantId={auth.tenant_id}
+        orgName={org?.name}
+        userEmail={me?.email}
         projects={projects}
         memberCount={memberCount}
         plan={plan}

package/templates/default/app.ts

@@ -107,6 +107,10 @@ const Project = entity(
   {
     orgId: field.id("Org"),
     name: field.string(),
+    description: field.string().optional(),
+    // "active" | "archived" — archived projects stay in the workspace but drop
+    // out of the default view. Toggled from the Projects tab.
+    status: field.string().default("active"),
     createdAt: field.datetime().defaultNow(),
   },
   { indexes: [{ name: "by_org", fields: ["orgId"], unique: false }] },