@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/invoices/app/invoices-view.tsx

@@ -10,9 +10,14 @@ import { DataTable, type ColumnDef } from "@/components/data-table";
 import { EmptyState } from "@/components/empty-state";
 import { SummaryBar } from "@/components/summary-bar";
 import { StatusBadge } from "@/components/status-badge";
+import { FilterTabs } from "@/components/filter-tabs";
+import { Avatar } from "@/components/avatar";
 import {
+  INVOICE_TABS,
   daysOverdue,
   displayStatus,
+  inInvoiceTab,
+  invoiceTabCounts,
   money,
   totals,
 } from "@/lib/billing";
@@ -26,6 +31,7 @@ export function InvoicesView({
 }) {
   const router = useRouter();
   const [creating, setCreating] = useState(false);
+  const [tab, setTab] = useState("all");
 
   async function create() {
     if (creating) return;
@@ -66,42 +72,65 @@ export function InvoicesView({
   }, [creating]);
 
   return (
-    <RequireAuth title="Invoices" description="Your team shares one set of books. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/">
       {(data) => {
+        const now = Date.now();
+        const view = new Map(
+          data.invoices.map((invoice) => {
+            const t = totals(invoice, data.items, data.payments);
+            return [invoice.id, { t, status: displayStatus(invoice, t.balanceCents, now) }] as const;
+          }),
+        );
+        const info = (row: InvoiceRow) => view.get(row.id)!;
+
         const columns: ColumnDef<InvoiceRow>[] = [
           {
             key: "number",
             header: "Invoice",
-            cell: (row) => <span className="tabular font-medium">{row.number}</span>,
+            className: "w-[46%] md:w-[130px]",
+            cell: (row) => (
+              <span className="min-w-0">
+                <span className="tabular block truncate font-medium">{row.number}</span>
+                <span className="block truncate text-[12px] text-muted-foreground md:hidden">
+                  {data.clientName(row.clientId) ?? "No client"}
+                </span>
+              </span>
+            ),
           },
           {
             key: "client",
             header: "Client",
-            cell: (row) => (
-              <span className="text-muted-foreground">
-                {data.clientName(row.clientId) ?? "—"}
-              </span>
-            ),
+            hideBelow: "md",
+            cell: (row) => {
+              const name = data.clientName(row.clientId);
+              return name ? (
+                <span className="flex min-w-0 items-center gap-2.5">
+                  <Avatar name={name} size="sm" shape="square" />
+                  <span className="truncate">{name}</span>
+                </span>
+              ) : (
+                <span className="text-muted-foreground">—</span>
+              );
+            },
           },
           {
             key: "status",
             header: "Status",
-            cell: (row) => {
-              const t = totals(row, data.items, data.payments);
-              return <StatusBadge status={displayStatus(row, t.balanceCents)} />;
-            },
+            className: "w-[104px] md:w-[120px]",
+            cell: (row) => <StatusBadge status={info(row).status} />,
           },
           {
             key: "due",
             header: "Due",
+            hideBelow: "lg",
+            className: "w-[120px]",
             cell: (row) => {
-              const t = totals(row, data.items, data.payments);
-              const late = displayStatus(row, t.balanceCents) === "overdue";
-              const days = daysOverdue(row);
+              const late = info(row).status === "overdue";
+              const days = daysOverdue(row, now);
               if (!row.dueDate) return <span className="text-muted-foreground">—</span>;
               return (
-                <span className={late ? "text-destructive" : "text-muted-foreground"}>
+                <span className={late ? "font-medium text-destructive" : "text-muted-foreground"}>
                   {late && days !== null
                     ? `${days}d overdue`
                     : new Date(row.dueDate).toLocaleDateString("en-US", {
@@ -116,37 +145,41 @@ export function InvoicesView({
             key: "total",
             header: "Total",
             numeric: true,
-            cell: (row) => money(totals(row, data.items, data.payments).totalCents),
+            hideBelow: "sm",
+            className: "w-[120px]",
+            cell: (row) => money(info(row).t.totalCents),
           },
           {
             key: "balance",
             header: "Balance",
             numeric: true,
+            className: "w-[104px] md:w-[120px]",
             cell: (row) => {
-              const t = totals(row, data.items, data.payments);
+              const balance = info(row).t.balanceCents;
               return (
-                <span className={t.balanceCents > 0 ? "" : "text-muted-foreground"}>
-                  {money(t.balanceCents)}
+                <span className={balance > 0 ? "font-medium" : "text-muted-foreground"}>
+                  {money(balance)}
                 </span>
               );
             },
           },
         ];
 
+        const tabCounts = invoiceTabCounts(data.invoices, data.items, data.payments, now);
         // Newest first — an invoice list is read from the top, and the number
         // series already encodes the order.
-        const rows = [...data.invoices].sort((a, b) =>
-          b.number.localeCompare(a.number),
-        );
+        const rows = data.invoices
+          .filter((invoice) => inInvoiceTab(tab, view.get(invoice.id)!.status))
+          .sort((a, b) => b.number.localeCompare(a.number));
 
         return (
           <>
-            <PageHeader title="Invoices" count={rows.length}>
-              <Button size="sm" onClick={() => void create()} disabled={creating}>
+            <PageHeader title="Invoices" count={data.navCounts["/"]}>
+              <Button size="sm" onClick={() => void create()} disabled={creating} title="New invoice (c)">
                 <Plus />
                 {creating ? "Creating…" : "New invoice"}
-                <Kbd className="ml-1 border-primary-foreground/25 bg-primary-foreground/10 text-primary-foreground/70">
-                  c
+                <Kbd className="ml-0.5 hidden border-primary-foreground/25 bg-primary-foreground/10 text-primary-foreground/75 md:inline-flex">
+                  C
                 </Kbd>
               </Button>
             </PageHeader>
@@ -155,22 +188,38 @@ export function InvoicesView({
               invoices={data.invoices}
               items={data.items}
               payments={data.payments}
+              now={now}
+            />
+
+            <FilterTabs
+              label="Invoice status"
+              value={tab}
+              onChange={setTab}
+              tabs={INVOICE_TABS.map((t) => ({ id: t.id, label: t.label, count: tabCounts[t.id] }))}
             />
 
             <DataTable
               rows={rows}
               columns={columns}
+              loading={data.loading}
+              label="Invoices"
               onRowClick={(row) => router.push(`/invoices/${row.id}`)}
               empty={
                 <EmptyState
                   icon={<FileText />}
-                  title={data.loading ? "Loading…" : "No invoices yet"}
-                  description="Create one, add the billable lines, then send it. Totals and ageing are derived — there's nothing to keep in sync."
+                  title={tab === "all" ? "No invoices yet" : "No invoices with this status"}
+                  description={
+                    tab === "all"
+                      ? "Create one, add the billable lines, then send it. Totals and ageing are derived from the lines and payments."
+                      : "Pick another tab to see the rest of your invoices."
+                  }
                   action={
-                    <Button size="sm" onClick={() => void create()}>
-                      <Plus />
-                      New invoice
-                    </Button>
+                    tab === "all" ? (
+                      <Button size="sm" onClick={() => void create()}>
+                        <Plus />
+                        New invoice
+                      </Button>
+                    ) : undefined
                   }
                 />
               }

package/templates/invoices/app/layout.tsx

@@ -18,12 +18,14 @@ export default function RootLayout({ children }: LayoutProps) {
     <html lang="en">
       <head>
         <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <title>__APP_NAME__</title>
+        <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+        {/* No <title> here: each page's `metadata` sets "<Page> · <Brand>".
+            A title in the layout renders first and wins over the page's. */}
         {/* Tailwind is compiled by Pylon from app/globals.css and the
-            stylesheet link is injected here automatically. Inter is declared in
-            app.ts (fonts: [...]) and self-hosted by the build — @font-face, the
-            preload link, and a size-adjusted fallback are injected too. */}
+            stylesheet link is injected here automatically. The typeface is
+            declared in app.ts (fonts: [...]) and self-hosted by the build;
+            @font-face, the preload link, and a size-adjusted fallback are
+            injected too. */}
       </head>
       <body className="h-full">{children}</body>
     </html>

package/templates/invoices/app/page.tsx

@@ -1,20 +1,18 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { InvoicesView } from "./invoices-view";
 
 export const metadata: Metadata = {
-  title: "Invoices",
+  title: `Invoices · ${BRAND.name}`,
   robots: "noindex",
 };
 
-/**
- * `/` — the invoice list.
- *
- */
+/** `/` — the invoice list. */
 export default function InvoicesPage({ searchParams }: PageProps) {
   return (
     <InvoicesView
-          openNew={searchParams?.new === "invoice"}
+      openNew={searchParams?.new === "invoice"}
     />
   );
 }

package/templates/invoices/app/workspace.tsx

@@ -3,7 +3,8 @@
 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 { FileText, User } from "lucide-react";
+import { AppShell } from "@/components/app-shell";
 import { CommandPalette } from "@/components/command-palette";
 import type { SearchItem } from "@/lib/search";
 import type { Invoice, LineItem, Payment } from "@/lib/billing";
@@ -31,6 +32,11 @@ export interface WorkspaceData {
   items: LineItemRow[];
   payments: PaymentRow[];
   clientName: (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;
 }
 
@@ -66,8 +72,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);
@@ -119,14 +124,14 @@ export function Workspace({
     () => [
       ...invoiceList.map((invoice) => ({
         id: `invoice:${invoice.id}`,
-        type: "deal" as const,
+        type: "invoice",
         title: invoice.number,
         subtitle: clientById.get(invoice.clientId ?? "")?.name,
         href: `/invoices/${invoice.id}`,
       })),
       ...clientList.map((client) => ({
         id: `client:${client.id}`,
-        type: "company" as const,
+        type: "client",
         title: client.name,
         subtitle: client.email ?? undefined,
         href: "/clients",
@@ -135,26 +140,29 @@ export function Workspace({
     [invoiceList, clientList, clientById],
   );
 
+  const navCounts = { "/": invoiceList.length, "/clients": clientList.length };
+
   const data: WorkspaceData = {
     clients: clientList,
     invoices: invoiceList,
     items: items ?? [],
     payments: payments ?? [],
     clientName: (id) => clientById.get(id ?? "")?.name ?? null,
+    navCounts,
     loading,
   };
 
   return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar
-        workspace="Invoices"
-        email={signedInEmail}
-        pathname={pathname}
-        counts={{ "/": invoiceList.length, "/clients": clientList.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}
@@ -171,9 +179,11 @@ export function Workspace({
             run: () => router.push("/clients"),
           },
         ]}
+        placeholder="Search invoices and clients…"
+        icons={{ invoice: <FileText />, client: <User /> }}
         onClose={() => setPaletteOpen(false)}
         onSelect={(item) => router.push(item.href)}
       />
-    </div>
+    </AppShell>
   );
 }

package/templates/invoices/app.ts

@@ -10,7 +10,7 @@ import {
 } from "@pylonsync/sdk";
 
 // ---------------------------------------------------------------------------
-// invoices — billing for a small business: clients, invoices with line items,
+// Billfold (the invoices template) — billing for a small business: clients, invoices with line items,
 // and payments against them.
 //
 // The realtime hook: recording a payment updates the balance and flips the
@@ -159,7 +159,7 @@ const manifest = buildManifest({
   auth: auth(),
   fonts: [
     font({
-      family: "Inter",
+      family: "Hanken Grotesk",
       variable: "--font-sans",
       weights: ["400", "500", "600", "700"],
       subsets: ["latin"],

package/templates/invoices/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/invoices/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/invoices/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/invoices/components/brand-mark.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * The Billfold mark: an invoice with a folded corner and two lines, 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-[64%]" fill="none">
+        <path d="M3 2.5A1.5 1.5 0 0 1 4.5 1h5l3.5 3.5v9A1.5 1.5 0 0 1 11.5 15h-7A1.5 1.5 0 0 1 3 13.5v-11Z" fill="currentColor" />
+        <path d="M9.5 1v2.5a1 1 0 0 0 1 1H13" fill="var(--primary)" opacity="0.35" />
+        <rect x="5.2" y="7.4" width="5.6" height="1.3" rx="0.65" fill="var(--primary)" />
+        <rect x="5.2" y="10" width="3.6" height="1.3" rx="0.65" fill="var(--primary)" />
+      </svg>
+    </span>
+  );
+}