@pylonsync/create-pylon 0.19.1 → 0.21.0

package/templates/crm/app/workspace.tsx

@@ -3,9 +3,11 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { callFn, db, useRouter } from "@pylonsync/react";
 import { useAuth } from "@pylonsync/client";
-import { Sidebar } from "@/components/sidebar";
+import { Building2, CircleDollarSign, User } from "lucide-react";
+import { AppShell } from "@/components/app-shell";
 import { CommandPalette } from "@/components/command-palette";
 import type { SearchItem } from "@/lib/search";
+import { isOpen } from "@/lib/pipeline";
 
 export interface CompanyRow {
   id: string;
@@ -58,6 +60,11 @@ export interface WorkspaceData {
   activities: ActivityRow[];
   companyName: (id: string | null | undefined) => string | null;
   ownerName: (id: string | null | undefined) => string | null;
+  /**
+   * The number beside each nav link, keyed by href. Page headers read the same
+   * map, so the sidebar and the page can't disagree.
+   */
+  navCounts: Record<string, number>;
   loading: boolean;
 }
 
@@ -94,8 +101,7 @@ export function Workspace({
 
   // Whoever is signed in, named from the synced User row rather than an
   // SSR prop — see the note on useAuth above.
-  const signedInEmail =
-    (users ?? []).find((user) => user.id === userId)?.email ?? "";
+  const me = (users ?? []).find((user) => user.id === userId);
 
   const [paletteOpen, setPaletteOpen] = useState(false);
   const seeded = useRef(false);
@@ -177,6 +183,12 @@ export function Workspace({
     [dealList, companyList, contactList, byId],
   );
 
+  const navCounts = {
+    "/": dealList.filter(isOpen).length,
+    "/companies": companyList.length,
+    "/contacts": contactList.length,
+  };
+
   const data: WorkspaceData = {
     companies: companyList,
     contacts: contactList,
@@ -187,23 +199,21 @@ export function Workspace({
       const user = byId.userById.get(id ?? "");
       return user?.displayName || user?.email || null;
     },
+    navCounts,
     loading: loadingCompanies,
   };
 
   return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar
-        workspace="CRM"
-        email={signedInEmail}
-        pathname={pathname}
-        counts={{
-          "/companies": companyList.length,
-          "/contacts": contactList.length,
-        }}
-        onOpenCommand={() => setPaletteOpen(true)}
-        onSignOut={() => void signOut()}
-      />
-      <main className="flex min-w-0 flex-1 flex-col">{children(data)}</main>
+    <AppShell
+      sidebar={{
+        user: { name: me?.displayName ?? "", email: me?.email ?? "" },
+        pathname,
+        counts: navCounts,
+        onOpenCommand: () => setPaletteOpen(true),
+        onSignOut: () => void signOut(),
+      }}
+    >
+      {children(data)}
 
       <CommandPalette
         open={paletteOpen}
@@ -225,9 +235,11 @@ export function Workspace({
             run: () => router.push("/contacts"),
           },
         ]}
+        placeholder="Search deals, companies, contacts…"
+        icons={{ deal: <CircleDollarSign />, company: <Building2 />, contact: <User /> }}
         onClose={() => setPaletteOpen(false)}
         onSelect={(item) => router.push(item.href)}
       />
-    </div>
+    </AppShell>
   );
 }

package/templates/crm/app.ts

@@ -10,7 +10,7 @@ import {
 } from "@pylonsync/sdk";
 
 // ---------------------------------------------------------------------------
-// crm — a sales CRM for a small team: companies, contacts, deals moving through
+// Dealbook (the crm template) — a sales CRM for a small team: companies, contacts, deals moving through
 // a pipeline, and an activity log.
 //
 // The realtime hook: the board subscribes to Deal, so when a teammate drags a
@@ -156,12 +156,12 @@ const manifest = buildManifest({
     userPolicy,
   ],
   auth: auth(),
-  // Self-hosted Inter: the build fetches the woff2, serves it same-origin (no
-  // third-party request, no FOUT), preloads it, and synthesizes a size-adjusted
-  // fallback so there's no layout shift.
+  // Self-hosted Instrument Sans: the build fetches the woff2, serves it
+  // same-origin, preloads it, and synthesizes a size-adjusted fallback so
+  // there's no layout shift.
   fonts: [
     font({
-      family: "Inter",
+      family: "Instrument Sans",
       variable: "--font-sans",
       weights: ["400", "500", "600", "700"],
       subsets: ["latin"],

package/templates/crm/components/activity-timeline.tsx

@@ -22,6 +22,13 @@ const ICON: Record<string, React.ReactNode> = {
   meeting: <CalendarDays />,
 };
 
+const VERB: Record<string, string> = {
+  note: "added a note",
+  call: "logged a call",
+  email: "logged an email",
+  meeting: "logged a meeting",
+};
+
 /**
  * What happened on this deal, newest first, with the composer on top so logging
  * a call takes one click from landing on the page.
@@ -100,7 +107,7 @@ export function ActivityTimeline({
           No activity yet. Log the first call or note above.
         </p>
       ) : (
-        <ol className="space-y-3">
+        <ol className="space-y-4">
           {ordered.map((activity) => (
             <li key={activity.id} className="flex gap-2.5">
               <div
@@ -112,15 +119,18 @@ export function ActivityTimeline({
                 {ICON[activity.kind] ?? ICON.note}
               </div>
               <div className="min-w-0 flex-1">
-                <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                <div className="flex items-center gap-1.5 text-[12px] text-muted-foreground">
                   <Avatar name={ownerName(activity.ownerId) ?? "?"} size="sm" />
-                  <span className="capitalize">{activity.kind}</span>
+                  <span className="truncate font-medium text-foreground">
+                    {ownerName(activity.ownerId) ?? "Someone"}
+                  </span>
+                  <span className="shrink-0">{VERB[activity.kind] ?? "added a note"}</span>
                   <span aria-hidden="true">·</span>
                   <time dateTime={activity.createdAt ?? undefined}>
                     {relativeTime(activity.createdAt)}
                   </time>
                 </div>
-                <p className="mt-1 whitespace-pre-wrap text-[13px] leading-5">
+                <p className="mt-1 whitespace-pre-wrap text-[13px] leading-[1.55]">
                   {activity.body}
                 </p>
               </div>

package/templates/crm/components/app-shell.tsx

@@ -0,0 +1,94 @@
+"use client";
+
+import React, { createContext, useContext, useEffect, useState } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { BRAND } from "@/lib/brand";
+import { Sidebar } from "@/components/sidebar";
+
+interface ShellControls {
+  /** Opens the navigation drawer. Only reachable on narrow screens. */
+  openNav: () => void;
+  openCommand: () => void;
+}
+
+const ShellContext = createContext<ShellControls | null>(null);
+
+/** The shell's controls, or null outside a shell (a component test). */
+export function useShell(): ShellControls | null {
+  return useContext(ShellContext);
+}
+
+type SidebarProps = React.ComponentProps<typeof Sidebar>;
+
+/**
+ * The page frame. From the `md` breakpoint up, the sidebar is a fixed
+ * 240px rail and the main column scrolls on its own. Below it, the rail
+ * is hidden and the same sidebar opens as a drawer from the menu button
+ * in each page header, so a phone gets the full width for content.
+ */
+export function AppShell({
+  sidebar,
+  children,
+}: {
+  sidebar: Omit<SidebarProps, "onNavigate" | "className">;
+  children: React.ReactNode;
+}) {
+  const [navOpen, setNavOpen] = useState(false);
+  const { pathname, onOpenCommand } = sidebar;
+
+  // A route change closes the drawer, including one made from ⌘K.
+  useEffect(() => {
+    setNavOpen(false);
+  }, [pathname]);
+
+  // Widening past md hides the drawer, so close it rather than leave an
+  // invisible modal holding focus.
+  useEffect(() => {
+    const wide = window.matchMedia("(min-width: 768px)");
+    const onChange = () => {
+      if (wide.matches) setNavOpen(false);
+    };
+    wide.addEventListener("change", onChange);
+    return () => wide.removeEventListener("change", onChange);
+  }, []);
+
+  return (
+    <ShellContext.Provider
+      value={{ openNav: () => setNavOpen(true), openCommand: onOpenCommand }}
+    >
+      <div className="flex h-dvh overflow-hidden bg-background">
+        <aside className="hidden w-[240px] shrink-0 border-r border-border md:flex">
+          <Sidebar {...sidebar} />
+        </aside>
+
+        <DialogPrimitive.Root open={navOpen} onOpenChange={setNavOpen}>
+          <DialogPrimitive.Portal>
+            <DialogPrimitive.Overlay className="fixed inset-0 z-40 bg-black/40 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 md:hidden" />
+            <DialogPrimitive.Content
+              className={
+                "fixed inset-y-0 left-0 z-40 flex w-[min(300px,86vw)] border-r border-border shadow-xl outline-none md:hidden " +
+                "duration-200 data-[state=open]:animate-in data-[state=open]:slide-in-from-left " +
+                "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-left"
+              }
+            >
+              <DialogPrimitive.Title className="sr-only">{BRAND.name} navigation</DialogPrimitive.Title>
+              <DialogPrimitive.Description className="sr-only">
+                Links to every section, search, and your account.
+              </DialogPrimitive.Description>
+              <Sidebar
+                {...sidebar}
+                onNavigate={() => setNavOpen(false)}
+                onOpenCommand={() => {
+                  setNavOpen(false);
+                  onOpenCommand();
+                }}
+              />
+            </DialogPrimitive.Content>
+          </DialogPrimitive.Portal>
+        </DialogPrimitive.Root>
+
+        <main className="flex min-w-0 flex-1 flex-col">{children}</main>
+      </div>
+    </ShellContext.Provider>
+  );
+}

package/templates/crm/components/auth-form.tsx

@@ -21,8 +21,16 @@ import { Label } from "@/components/ui/label";
  * SSR cookie, which browsers withhold inside the builder's cross-site preview
  * iframe — that's the sign-in loop this avoids.
  */
-export function AuthForm() {
-  const [mode, setMode] = useState<"login" | "signup">("login");
+export type AuthMode = "login" | "signup";
+
+export function AuthForm({
+  mode,
+  onModeChange,
+}: {
+  mode: AuthMode;
+  onModeChange: (mode: AuthMode) => void;
+}) {
+  const [name, setName] = useState("");
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
@@ -36,7 +44,11 @@ export function AuthForm() {
       const session =
         mode === "login"
           ? await passwordLogin({ email, password })
-          : await passwordRegister({ email, password });
+          : await passwordRegister({
+              email,
+              password,
+              ...(name.trim() ? { displayName: name.trim() } : {}),
+            });
       // No navigation: persistSession notifies the sync engine, RequireAuth
       // re-renders, and the app appears in place. A full page load here would
       // depend on the SSR session cookie, which a cross-site iframe withholds.
@@ -50,6 +62,18 @@ export function AuthForm() {
   return (
     <div className="space-y-5">
       <form onSubmit={onSubmit} className="space-y-3.5">
+        {mode === "signup" ? (
+          <div className="space-y-1.5">
+            <Label htmlFor="name">Name</Label>
+            <Input
+              id="name"
+              value={name}
+              onChange={(event) => setName(event.target.value)}
+              autoComplete="name"
+              placeholder="Jordan Lee"
+            />
+          </div>
+        ) : null}
         <div className="space-y-1.5">
           <Label htmlFor="email">Email</Label>
           <Input
@@ -80,7 +104,13 @@ export function AuthForm() {
           </p>
         ) : null}
         <Button type="submit" disabled={pending} className="w-full">
-          {pending ? "…" : mode === "login" ? "Sign in" : "Create account"}
+          {pending
+            ? mode === "login"
+              ? "Signing in…"
+              : "Creating account…"
+            : mode === "login"
+              ? "Sign in"
+              : "Create account"}
         </Button>
       </form>
 
@@ -89,7 +119,7 @@ export function AuthForm() {
         <button
           type="button"
           onClick={() => {
-            setMode(mode === "login" ? "signup" : "login");
+            onModeChange(mode === "login" ? "signup" : "login");
             setError(null);
           }}
           className="font-medium text-foreground underline underline-offset-2"

package/templates/crm/components/avatar.tsx

@@ -17,10 +17,13 @@ const ACCENTS = [
 export function Avatar({
   name,
   size = "md",
+  shape = "round",
   className,
 }: {
   name: string | null | undefined;
   size?: "sm" | "md";
+  /** Square for an organisation, round for a person. */
+  shape?: "round" | "square";
   className?: string;
 }) {
   const label = initials(name);
@@ -28,7 +31,8 @@ export function Avatar({
     <span
       aria-hidden="true"
       className={cn(
-        "inline-flex shrink-0 select-none items-center justify-center rounded-full font-medium",
+        "inline-flex shrink-0 select-none items-center justify-center font-semibold",
+        shape === "square" ? "rounded-md" : "rounded-full",
         size === "sm" ? "size-5 text-[9px]" : "size-6 text-[10px]",
         ACCENTS[accentIndex(name ?? "?", ACCENTS.length)],
         className,

package/templates/crm/components/board-skeleton.tsx

@@ -12,14 +12,14 @@ import { BOARD_STAGES } from "@/lib/pipeline";
  */
 export function BoardSkeleton() {
   return (
-    <div className="flex h-full gap-3 overflow-hidden p-4" aria-hidden="true">
+    <div className="flex h-full gap-3 overflow-hidden p-4 md:px-5" aria-hidden="true">
       {BOARD_STAGES.map((stage, column) => (
         <section
           key={stage.id}
-          className="flex w-[268px] shrink-0 flex-col rounded-xl border border-border bg-surface-1/50"
+          className="flex w-[84vw] shrink-0 flex-col rounded-xl border border-border/70 bg-surface-1 md:w-auto md:min-w-[208px] md:max-w-[340px] md:flex-1"
         >
-          <header className="flex items-center gap-2 px-3 py-2.5">
-            <span className="text-[12px] font-medium text-muted-foreground">
+          <header className="flex items-center gap-2 px-3 pb-2 pt-3">
+            <span className="text-[12.5px] font-semibold text-muted-foreground">
               {stage.label}
             </span>
           </header>
@@ -29,7 +29,7 @@ export function BoardSkeleton() {
             {Array.from({ length: Math.max(1, 3 - column) }).map((_, card) => (
               <div
                 key={card}
-                className="animate-pulse rounded-lg border border-border bg-card p-2.5"
+                className="animate-pulse rounded-lg border border-border/80 bg-card p-3"
               >
                 <div className="h-3 w-3/4 rounded bg-muted" />
                 <div className="mt-2 h-2.5 w-1/2 rounded bg-muted" />

package/templates/crm/components/brand-mark.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * The Dealbook mark: three stacked bars that narrow like a sales funnel, on
+ * the accent square. app/icon.svg draws the same shape for the favicon.
+ */
+export function BrandMark({ className }: { className?: string }) {
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "inline-flex size-6 shrink-0 items-center justify-center rounded-[7px] bg-primary text-primary-foreground",
+        "shadow-[inset_0_1px_0_rgb(255_255_255/0.18),0_1px_2px_rgb(0_0_0/0.12)]",
+        className,
+      )}
+    >
+      <svg viewBox="0 0 16 16" className="size-[62%]" fill="currentColor">
+        <rect x="1.5" y="2.5" width="13" height="2.6" rx="1.3" />
+        <rect x="3.5" y="6.7" width="9" height="2.6" rx="1.3" />
+        <rect x="5.5" y="10.9" width="5" height="2.6" rx="1.3" />
+      </svg>
+    </span>
+  );
+}

package/templates/crm/components/command-palette.tsx

@@ -1,15 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
-import { Building2, Plus, Search, User } from "lucide-react";
+import { ArrowRight, FileText, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Kbd } from "@/components/kbd";
 import { moveSelection, searchItems, type SearchItem } from "@/lib/search";
 
-const TYPE_ICON: Record<SearchItem["type"], React.ReactNode> = {
-  deal: <Search />,
-  company: <Building2 />,
-  contact: <User />,
-};
-
 export interface CommandAction {
   id: string;
   label: string;
@@ -28,12 +22,18 @@ export function CommandPalette({
   open,
   items,
   actions = [],
+  placeholder = "Search…",
+  icons = {},
   onClose,
   onSelect,
 }: {
   open: boolean;
   items: SearchItem[];
   actions?: CommandAction[];
+  /** Input placeholder naming what can be found, such as "Search deals…". */
+  placeholder?: string;
+  /** Icon per `SearchItem.type`. Unknown types get a document icon. */
+  icons?: Record<string, React.ReactNode>;
   onClose: () => void;
   onSelect: (item: SearchItem) => void;
 }) {
@@ -76,7 +76,7 @@ export function CommandPalette({
 
   return (
     <div
-      className="fixed inset-0 z-50 flex items-start justify-center bg-black/50 pt-[12vh]"
+      className="fixed inset-0 z-50 flex items-start justify-center bg-black/40 px-3 pt-[10vh] md:pt-[14vh]"
       // Clicking the backdrop dismisses; clicks inside the panel must not.
       onMouseDown={(event) => {
         if (event.target === event.currentTarget) onClose();
@@ -85,8 +85,8 @@ export function CommandPalette({
       <div
         role="dialog"
         aria-modal="true"
-        aria-label="Search"
-        className="w-full max-w-lg overflow-hidden rounded-xl border border-border bg-popover shadow-2xl"
+        aria-label="Command menu"
+        className="w-full max-w-xl overflow-hidden rounded-xl border border-border bg-popover shadow-[0_24px_64px_-12px_rgb(0_0_0/0.3)]"
         onKeyDown={(event) => {
           if (event.key === "Escape") {
             event.preventDefault();
@@ -109,14 +109,14 @@ export function CommandPalette({
             ref={inputRef}
             value={query}
             onChange={(event) => setQuery(event.target.value)}
-            placeholder="Search deals, companies, contacts…"
-            aria-label="Search deals, companies and contacts"
-            className="h-11 flex-1 bg-transparent text-[13px] outline-none placeholder:text-muted-foreground"
+            placeholder={placeholder}
+            aria-label={placeholder.replace(/…$/, "")}
+            className="h-12 flex-1 bg-transparent text-base outline-none placeholder:text-muted-foreground md:text-[14px]"
           />
-          <Kbd>esc</Kbd>
+          <Kbd className="max-md:hidden">esc</Kbd>
         </div>
 
-        <div className="max-h-80 overflow-y-auto p-1.5">
+        <div className="max-h-[min(360px,60dvh)] overflow-y-auto p-1.5">
           {rows.length === 0 ? (
             <p className="px-3 py-6 text-center text-[12px] text-muted-foreground">
               No matches for “{query}”
@@ -138,12 +138,12 @@ export function CommandPalette({
               >
                 {row.kind === "action" ? (
                   <>
-                    <Plus />
+                    <ArrowRight />
                     <span className="flex-1 truncate">{row.action.label}</span>
                   </>
                 ) : (
                   <>
-                    {TYPE_ICON[row.item.type]}
+                    {icons[row.item.type] ?? <FileText />}
                     <span className="flex-1 truncate">{row.item.title}</span>
                     {row.item.subtitle ? (
                       <span className="truncate text-[12px] text-muted-foreground">