@pylonsync/create-pylon 0.19.0 → 0.20.0

package/templates/invoices/components/sidebar.tsx

@@ -1,111 +1,117 @@
 import React from "react";
 import { Link } from "@pylonsync/react";
-import { Command, FileText, LogOut, Users } from "lucide-react";
+import { LogOut, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { BRAND } from "@/lib/brand";
+import { NAV } from "@/components/nav";
 import { Avatar } from "@/components/avatar";
+import { BrandMark } from "@/components/brand-mark";
 import { Kbd } from "@/components/kbd";
 
-export interface NavItem {
-  href: string;
-  label: string;
-  icon: React.ReactNode;
-  count?: number;
+/** True when `href` is the section `pathname` belongs to. */
+export function isActive(href: string, pathname: string): boolean {
+  if (href === "/") return pathname === "/";
+  return pathname === href || pathname.startsWith(`${href}/`);
 }
 
-export const NAV: Array<Omit<NavItem, "count">> = [
-  { href: "/", label: "Invoices", icon: <FileText /> },
-  { href: "/clients", label: "Clients", icon: <Users /> },
-];
-
 /**
- * The fixed left rail. Presentational: the active path, the counts, and the
- * sign-out handler all arrive as props, so it renders identically in a test.
+ * The navigation rail: brand, search, links with counts, and the signed-in
+ * person. The same component renders as the fixed rail on wide screens and
+ * inside the drawer on phones (see components/app-shell.tsx).
+ *
+ * Presentational: the path, counts, and handlers arrive as props, so it
+ * renders the same in a test.
  */
 export function Sidebar({
-  workspace,
-  email,
+  user,
   pathname,
   counts,
   onOpenCommand,
+  onNavigate,
   onSignOut,
+  className,
 }: {
-  workspace: string;
-  email: string;
+  user: { name: string; email: string };
   pathname: string;
+  /** Badge per nav href. Omit a key to show no number. */
   counts?: Record<string, number>;
   onOpenCommand: () => void;
+  /** Called after a link is chosen, so the phone drawer can close. */
+  onNavigate?: () => void;
   onSignOut: () => void;
+  className?: string;
 }) {
   return (
-    <aside className="flex w-[224px] shrink-0 flex-col border-r border-border bg-surface-1">
-      <div className="flex h-12 items-center gap-2 px-3">
-        <span className="flex size-6 shrink-0 items-center justify-center rounded-md bg-primary text-[11px] font-bold text-primary-foreground">
-          {workspace.slice(0, 1).toUpperCase()}
+    <div className={cn("flex h-full w-full flex-col bg-surface-1", className)}>
+      <div className="flex h-13 shrink-0 items-center gap-2.5 px-4">
+        <BrandMark />
+        <span className="truncate text-[14px] font-semibold tracking-[-0.01em]">
+          {BRAND.name}
         </span>
-        <span className="truncate text-[13px] font-semibold">{workspace}</span>
       </div>
 
-      <div className="px-2 pb-2">
+      <div className="px-3 pb-3">
         <button
           type="button"
           onClick={onOpenCommand}
           className={cn(
-            "flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5",
-            "text-[12px] text-muted-foreground transition-colors hover:border-ring/40 hover:text-foreground",
+            "flex h-8 w-full items-center gap-2 rounded-md border border-border bg-background px-2.5",
+            "text-[12.5px] text-muted-foreground shadow-[0_1px_1px_rgb(0_0_0/0.03)] transition-colors",
+            "hover:border-foreground/15 hover:text-foreground",
           )}
         >
-          <Command className="size-3.5" />
-          <span className="flex-1 text-left">Search…</span>
-          <Kbd>⌘K</Kbd>
+          <Search className="size-3.5" />
+          <span className="flex-1 text-left">Search</span>
+          <Kbd className="max-md:hidden">⌘K</Kbd>
         </button>
       </div>
 
-      <nav className="flex-1 space-y-0.5 px-2" aria-label="Main">
+      <nav className="flex-1 space-y-px overflow-y-auto px-3" aria-label="Main">
         {NAV.map((item) => {
-          const active =
-            item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+          const active = isActive(item.href, pathname);
+          const count = counts?.[item.href];
           return (
             <Link
               key={item.href}
               href={item.href}
+              onClick={onNavigate}
               aria-current={active ? "page" : undefined}
               className={cn(
-                "flex h-7 items-center gap-2 rounded-md px-2 text-[13px] transition-colors",
-                "[&_svg]:size-3.5 [&_svg]:shrink-0",
+                "flex h-8 items-center gap-2.5 rounded-md px-2.5 text-[13px] transition-colors md:h-7.5",
+                "[&_svg]:size-4 [&_svg]:shrink-0",
                 active
-                  ? "bg-surface-2 font-medium text-foreground"
-                  : "text-muted-foreground hover:bg-surface-2/60 hover:text-foreground",
+                  ? "bg-foreground/[0.06] font-medium text-foreground [&_svg]:text-primary"
+                  : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
               )}
             >
               {item.icon}
               <span className="flex-1 truncate">{item.label}</span>
-              {counts?.[item.href] ? (
-                <span className="tabular text-[11px] text-muted-foreground">
-                  {counts[item.href]}
-                </span>
+              {typeof count === "number" ? (
+                <span className="tabular text-[11.5px] text-muted-foreground">{count}</span>
               ) : null}
             </Link>
           );
         })}
       </nav>
 
-      <div className="border-t border-border p-2">
-        <div className="flex items-center gap-2 rounded-md px-1.5 py-1">
-          <Avatar name={email} size="sm" />
-          <span className="min-w-0 flex-1 truncate text-[12px] text-muted-foreground">
-            {email}
-          </span>
+      <div className="border-t border-border p-3">
+        <div className="flex items-center gap-2.5">
+          <Avatar name={user.name || user.email} />
+          <div className="min-w-0 flex-1 leading-tight">
+            <p className="truncate text-[12.5px] font-medium">{user.name || "Signed in"}</p>
+            <p className="truncate text-[11.5px] text-muted-foreground">{user.email}</p>
+          </div>
           <button
             type="button"
             onClick={onSignOut}
             title="Sign out"
             aria-label="Sign out"
-            className="rounded p-1 text-muted-foreground transition-colors hover:bg-surface-2 hover:text-foreground"
+            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-foreground/[0.06] hover:text-foreground"
           >
-            <LogOut className="size-3.5" />
+            <LogOut className="size-4" />
           </button>
         </div>
       </div>
-    </aside>
+    </div>
   );
 }

package/templates/invoices/components/status-badge.tsx

@@ -5,11 +5,11 @@ import { statusById } from "@/lib/billing";
 // "overdue" isn't a stored status — it's derived in lib/billing.ts — but it's
 // the one the eye needs to find first, so it gets the only alarming colour.
 const STYLE: Record<string, string> = {
-  draft: "border-border text-muted-foreground",
-  sent: "border-stage-qualified/40 text-stage-qualified",
-  overdue: "border-destructive/50 text-destructive",
-  paid: "border-stage-won/40 text-stage-won",
-  void: "border-border text-muted-foreground line-through",
+  draft: "bg-foreground/[0.06] text-muted-foreground",
+  sent: "bg-stage-qualified/10 text-stage-qualified",
+  overdue: "bg-destructive/10 text-destructive",
+  paid: "bg-stage-won/10 text-stage-won",
+  void: "bg-foreground/[0.06] text-muted-foreground line-through",
 };
 
 const LABEL: Record<string, string> = { overdue: "Overdue" };
@@ -24,8 +24,8 @@ export function StatusBadge({
   return (
     <span
       className={cn(
-        "inline-flex h-5 items-center rounded border px-1.5 text-[11px] font-medium whitespace-nowrap",
-        STYLE[status] ?? "border-border text-muted-foreground",
+        "inline-flex h-5 items-center rounded px-1.5 text-[11.5px] font-medium whitespace-nowrap",
+        STYLE[status] ?? "bg-foreground/[0.06] text-muted-foreground",
         className,
       )}
     >

package/templates/invoices/components/summary-bar.tsx

@@ -19,7 +19,7 @@ export function SummaryBar({
 }) {
   const s = summarize(invoices, items, payments, now);
   return (
-    <dl className="grid grid-cols-2 gap-px border-b border-border bg-border sm:grid-cols-4">
+    <dl className="grid shrink-0 grid-cols-2 gap-px border-b border-border bg-border lg:grid-cols-4">
       <Metric label="Outstanding" value={money(s.outstandingCents)} hint="sent, unpaid" />
       <Metric
         label="Overdue"
@@ -49,17 +49,17 @@ function Metric({
   alarming?: boolean;
 }) {
   return (
-    <div className="bg-background px-4 py-3">
-      <dt className="text-[11px] text-muted-foreground">{label}</dt>
+    <div className="min-w-0 bg-background px-4 py-2.5 md:px-5 md:py-3.5">
+      <dt className="truncate text-[12px] text-muted-foreground">{label}</dt>
       <dd
         className={
-          "tabular mt-0.5 text-[18px] font-semibold tracking-tight" +
+          "tabular mt-1 text-[18px] font-semibold leading-none tracking-[-0.02em] md:text-[22px]" +
           (alarming ? " text-destructive" : "")
         }
       >
         {value}
       </dd>
-      <p className="mt-0.5 text-[11px] text-muted-foreground">{hint}</p>
+      <p className="mt-1 truncate text-[11.5px] text-muted-foreground md:mt-1.5">{hint}</p>
     </div>
   );
 }

package/templates/invoices/components/ui/button.tsx

@@ -5,15 +5,16 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-[13px] font-medium transition-[color,background-color,box-shadow,transform] duration-150 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary text-primary-foreground shadow-[inset_0_1px_0_rgb(255_255_255/0.15),0_1px_2px_rgb(0_0_0/0.1)] hover:bg-primary/90",
         destructive:
           "bg-destructive text-white hover:bg-destructive/90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-background shadow-[0_1px_1px_rgb(0_0_0/0.03)] hover:bg-accent hover:text-accent-foreground",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
@@ -21,7 +22,7 @@ const buttonVariants = cva(
       },
       size: {
         default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
+        sm: "h-8 rounded-md px-3 text-[12.5px] md:h-7.5 [&_svg]:size-3.5",
         lg: "h-10 rounded-md px-8",
         icon: "h-9 w-9",
       },

package/templates/invoices/components/ui/dialog.tsx

@@ -35,7 +35,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 rounded-xl border bg-background p-6 shadow-lg duration-200",
+        "fixed left-[50%] top-[50%] z-50 grid max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 overflow-y-auto rounded-xl border bg-background p-5 shadow-[0_24px_48px_-12px_rgb(0_0_0/0.25)] duration-200 sm:p-6",
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
         className,
       )}

package/templates/invoices/components/ui/input.tsx

@@ -12,7 +12,7 @@ function Input({
       type={type}
       data-slot="input"
       className={cn(
-        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-[13px] transition-colors",
         "placeholder:text-muted-foreground",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "disabled:cursor-not-allowed disabled:opacity-50",

package/templates/invoices/components/ui/select.tsx

@@ -22,7 +22,7 @@ function Select({
       <select
         data-slot="select"
         className={cn(
-          "flex h-9 w-full appearance-none rounded-md border border-input bg-transparent py-1 pl-3 pr-8 text-sm shadow-sm transition-colors",
+          "flex h-9 w-full appearance-none rounded-md border border-input bg-transparent py-1 pl-3 pr-8 text-base shadow-sm md:text-[13px] transition-colors",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
           "disabled:cursor-not-allowed disabled:opacity-50",
           className,

package/templates/invoices/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ function Textarea({
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors",
+        "flex min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm md:text-[13px] transition-colors",
         "placeholder:text-muted-foreground",
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
         "disabled:cursor-not-allowed disabled:opacity-50",

package/templates/invoices/functions/recordPayment.ts

@@ -35,6 +35,9 @@ export default mutation<
     if (invoice.status === "void") {
       throw ctx.error("INVALID_ARGS", "That invoice is void.");
     }
+    if (invoice.status === "draft") {
+      throw ctx.error("INVALID_ARGS", "Send the invoice before recording a payment.");
+    }
 
     const items = (await ctx.db.query("LineItem", {
       invoiceId: args.invoiceId,

package/templates/invoices/lib/billing.ts

@@ -141,6 +141,46 @@ export function displayStatus(
   return invoice.status;
 }
 
+export interface InvoiceTab {
+  id: string;
+  label: string;
+}
+
+/** The invoice list's tabs, left to right. Each matches a `displayStatus`. */
+export const INVOICE_TABS: InvoiceTab[] = [
+  { id: "all", label: "All" },
+  { id: "draft", label: "Draft" },
+  { id: "sent", label: "Sent" },
+  { id: "overdue", label: "Overdue" },
+  { id: "paid", label: "Paid" },
+];
+
+/** Whether an invoice showing `status` (from `displayStatus`) belongs on a tab. */
+export function inInvoiceTab(tabId: string, status: string): boolean {
+  return tabId === "all" || tabId === status;
+}
+
+/**
+ * How many invoices each tab lists. The list, the tab counts, and the sidebar
+ * badge all go through `displayStatus`, so an invoice that just went overdue
+ * moves between tabs and every count follows.
+ */
+export function invoiceTabCounts(
+  invoices: Invoice[],
+  items: LineItem[],
+  payments: Payment[],
+  now: number = Date.now(),
+): Record<string, number> {
+  const counts: Record<string, number> = Object.fromEntries(INVOICE_TABS.map((t) => [t.id, 0]));
+  for (const invoice of invoices) {
+    const status = displayStatus(invoice, totals(invoice, items, payments).balanceCents, now);
+    for (const tab of INVOICE_TABS) {
+      if (inInvoiceTab(tab.id, status)) counts[tab.id] += 1;
+    }
+  }
+  return counts;
+}
+
 export function daysOverdue(
   invoice: Invoice,
   now: number = Date.now(),

package/templates/invoices/lib/brand.ts

@@ -0,0 +1,9 @@
+// The product name, in one place. The sidebar, the sign-in screen, the page
+// title, and the drawer on phones all read it. Rename the product here; the
+// mark is in components/brand-mark.tsx and the favicon is app/icon.svg.
+
+export const BRAND = {
+  name: "Billfold",
+  /** One line on the sign-in screen: what the app holds and who sees it. */
+  description: "Your team's invoices, clients, and payments. Everyone works from the same books.",
+} as const;

package/templates/invoices/lib/search.ts

@@ -1,15 +1,16 @@
 // Client-side search powering the ⌘K palette.
 //
-// A small team's CRM fits in the synced replica, so search runs locally against
+// A small team's workspace fits in the synced replica, so search runs locally against
 // data already in memory: results appear as you type, with no request per
 // keystroke. Swap in `db.useSearch` (Pylon's FTS) when a workspace outgrows
 // that — the component boundary doesn't change, only this file.
 
 export interface SearchItem {
   id: string;
-  type: "deal" | "company" | "contact";
+  /** The record kind, such as "deal". The palette picks its icon from this. */
+  type: string;
   title: string;
-  /** Second line: the company for a contact, the domain for a company. */
+  /** Shown on the right of the row: the company for a contact, say. */
   subtitle?: string;
   href: string;
   /** Extra text matched but not displayed — an email, say. */

package/templates/invoices/tests/billing.test.ts

@@ -1,6 +1,9 @@
 import { describe, expect, test } from "bun:test";
 import {
+  INVOICE_TABS,
   daysOverdue,
+  inInvoiceTab,
+  invoiceTabCounts,
   displayStatus,
   isOverdue,
   isValidStatus,
@@ -281,3 +284,27 @@ describe("statuses", () => {
     expect(isValidStatus("void")).toBe(true);
   });
 });
+
+describe("invoice tabs", () => {
+  const invoices = [
+    invoice({ id: "a", status: "draft" }),
+    invoice({ id: "b", status: "sent", dueDate: at(10) }),
+    invoice({ id: "c", status: "sent", dueDate: at(-5) }),
+    invoice({ id: "d", status: "paid" }),
+    invoice({ id: "e", status: "sent", dueDate: at(-5) }),
+  ];
+  const items = invoices.map((inv, i) => line({ id: `l${i}`, invoiceId: inv.id }));
+  // "e" is past due but fully paid, so it reads as paid, not overdue.
+  const payments: Payment[] = [{ id: "p1", invoiceId: "e", amountCents: 10_000 }];
+
+  test("each tab's count is exactly the rows it lists", () => {
+    const counts = invoiceTabCounts(invoices, items, payments, NOW);
+    for (const tab of INVOICE_TABS) {
+      const listed = invoices.filter((inv) =>
+        inInvoiceTab(tab.id, displayStatus(inv, totals(inv, items, payments).balanceCents, NOW)),
+      );
+      expect(counts[tab.id]).toBe(listed.length);
+    }
+    expect(counts).toEqual({ all: 5, draft: 1, sent: 1, overdue: 1, paid: 2 });
+  });
+});

package/templates/ios/consumer/apps/ios/Package.swift

@@ -1,14 +1,15 @@
 // swift-tools-version:5.9
 import PackageDescription
 
+// SwiftPM manifest for the app sources. Xcode builds use project.yml
+// (xcodegen); this file lets `swift build` resolve the Pylon packages.
 let package = Package(
 	name: "__APP_NAME_PASCAL__",
 	platforms: [
-		.iOS(.v16),
-		.macOS(.v13),
+		.iOS(.v17),
 	],
 	dependencies: [
-		.package(url: "https://github.com/pylonsync/pylon.git", from: "0.3.0"),
+		.package(url: "https://github.com/pylonsync/pylon.git", from: "__PYLON_VERSION__"),
 	],
 	targets: [
 		.executableTarget(

package/templates/ios/consumer/apps/ios/Sources/__APP_NAME_PASCAL__/ActivityView.swift

@@ -0,0 +1,107 @@
+import SwiftUI
+
+/// Likes and comments on the user's posts, and new followers. Live.
+struct ActivityView: View {
+	@EnvironmentObject private var social: SocialStore
+
+	var body: some View {
+		let items = social.activity
+		ScrollView {
+			if items.isEmpty {
+				ContentUnavailableView(
+					"No activity yet",
+					systemImage: "heart",
+					description: Text("When people like or comment on your posts, or follow you, it shows up here.")
+				)
+				.padding(.top, 80)
+			} else {
+				LazyVStack(alignment: .leading, spacing: 0, pinnedViews: []) {
+					ForEach(sections(items), id: \.title) { section in
+						Text(section.title)
+							.font(.headline)
+							.padding(.horizontal, 16)
+							.padding(.top, 18)
+							.padding(.bottom, 6)
+						ForEach(section.items) { item in
+							ActivityRow(item: item)
+						}
+					}
+				}
+				.animation(.snappy, value: items.map(\.id))
+			}
+		}
+		.navigationTitle("Activity")
+		.appRoutes()
+	}
+
+	private struct Section {
+		let title: String
+		let items: [ActivityItem]
+	}
+
+	private func sections(_ items: [ActivityItem]) -> [Section] {
+		let calendar = Calendar.current
+		let weekAgo = Date.now.addingTimeInterval(-7 * 86_400)
+		let today = items.filter { calendar.isDateInToday($0.date) }
+		let week = items.filter { !calendar.isDateInToday($0.date) && $0.date > weekAgo }
+		let earlier = items.filter { $0.date <= weekAgo }
+		return [
+			Section(title: "Today", items: today),
+			Section(title: "This week", items: week),
+			Section(title: "Earlier", items: earlier),
+		].filter { !$0.items.isEmpty }
+	}
+}
+
+private struct ActivityRow: View {
+	@EnvironmentObject private var social: SocialStore
+	let item: ActivityItem
+
+	private var actor: Profile? { social.profile(item.actorId) }
+
+	var body: some View {
+		NavigationLink(value: item.postId.map { Route.post($0) } ?? Route.profile(item.actorId)) {
+			HStack(spacing: 12) {
+				StoryAvatar(profile: actor, size: 44, ringed: social.hasRecentPost(item.actorId))
+				sentence
+					.font(.subheadline)
+					.lineLimit(3)
+					.frame(maxWidth: .infinity, alignment: .leading)
+				trailing
+			}
+			.padding(.horizontal, 16)
+			.padding(.vertical, 8)
+			.contentShape(Rectangle())
+		}
+		.buttonStyle(.plain)
+	}
+
+	private var sentence: Text {
+		let name = Text(actor?.handle ?? "Someone").fontWeight(.semibold)
+		let time = Text(" " + Timestamp.short(item.date)).foregroundColor(.secondary)
+		switch item.kind {
+		case .like:
+			return name + Text(" liked your photo.") + time
+		case .comment:
+			return name + Text(" commented: \(item.text ?? "")") + time
+		case .follow:
+			return name + Text(" started following you.") + time
+		}
+	}
+
+	@ViewBuilder
+	private var trailing: some View {
+		if let postId = item.postId, let post = social.post(postId) {
+			RemoteImage(url: social.media.thumbnailURL(for: post.imageUrl, width: 128))
+				.frame(width: 44, height: 44)
+				.clipShape(RoundedRectangle(cornerRadius: 6, style: .continuous))
+		} else if item.kind == .follow {
+			let following = social.isFollowing(item.actorId)
+			Button(following ? "Following" : "Follow back") {
+				social.toggleFollow(item.actorId)
+			}
+			.buttonStyle(ProfileButtonStyle(prominent: !following))
+			.frame(width: 112)
+		}
+	}
+}