@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/invoices/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">

package/templates/invoices/components/data-table.tsx

@@ -8,41 +8,81 @@ export interface ColumnDef<Row> {
   cell: (row: Row) => React.ReactNode;
   /** Right-align and tabular-figure a numeric column. */
   numeric?: boolean;
+  /**
+   * Hide the column below a breakpoint. Phones keep the first column and the
+   * one or two numbers that matter; the rest appear as the screen widens.
+   */
+  hideBelow?: "sm" | "md" | "lg" | "xl";
+  /** Width and other classes, applied to the header and every cell. */
   className?: string;
 }
 
+const HIDE: Record<NonNullable<ColumnDef<unknown>["hideBelow"]>, string> = {
+  sm: "hidden sm:table-cell",
+  md: "hidden md:table-cell",
+  lg: "hidden lg:table-cell",
+  xl: "hidden xl:table-cell",
+};
+
 /**
- * A dense list view. Rows are 36px so a screenful is a screenful of data, and
- * the header sticks while the body scrolls.
+ * A dense list view. Rows are 40px on desktop and 48px on touch screens, the
+ * header sticks while the body scrolls, and the table uses a fixed layout so
+ * column widths come from the column definitions, not the content.
  *
- * Generic and presentational — every view here uses the same one, which is why
- * companies and contacts look like the same product.
+ * Keyboard: every clickable row is a Tab stop; ↑/↓ (or j/k) move between rows
+ * and Enter opens one.
  */
 export function DataTable<Row extends { id: string }>({
   rows,
   columns,
   onRowClick,
+  loading,
   empty,
+  label,
 }: {
   rows: Row[];
   columns: ColumnDef<Row>[];
   onRowClick?: (row: Row) => void;
+  /** Show placeholder rows while the first sync is in flight. */
+  loading?: boolean;
   empty?: React.ReactNode;
+  /** Accessible name for the table. */
+  label?: string;
 }) {
-  if (rows.length === 0 && empty) return <>{empty}</>;
+  if (!loading && rows.length === 0 && empty) return <>{empty}</>;
+
+  function onRowKey(event: React.KeyboardEvent<HTMLTableRowElement>, row: Row) {
+    const key = event.key;
+    if (key === "Enter" && onRowClick) {
+      event.preventDefault();
+      onRowClick(row);
+      return;
+    }
+    const down = key === "ArrowDown" || key === "j";
+    const up = key === "ArrowUp" || key === "k";
+    if (!down && !up) return;
+    event.preventDefault();
+    const target = (
+      down ? event.currentTarget.nextElementSibling : event.currentTarget.previousElementSibling
+    ) as HTMLElement | null;
+    target?.focus();
+  }
 
   return (
     <div className="min-h-0 flex-1 overflow-auto">
-      <table className="w-full border-collapse text-[13px]">
-        <thead className="sticky top-0 z-10 bg-background">
+      <table aria-label={label} className="w-full table-fixed border-collapse text-[13px]">
+        <thead className="sticky top-0 z-10 bg-background/95 backdrop-blur-sm">
           <tr className="hairline">
-            {columns.map((column) => (
+            {columns.map((column, index) => (
               <th
                 key={column.key}
                 scope="col"
                 className={cn(
-                  "h-8 px-4 text-left text-[11px] font-medium text-muted-foreground",
+                  "h-9 px-3 text-left text-[11px] font-medium uppercase tracking-[0.04em] text-muted-foreground",
+                  index === 0 && "pl-4 md:pl-5",
+                  index === columns.length - 1 && "pr-4 md:pr-5",
                   column.numeric && "text-right",
+                  column.hideBelow && HIDE[column.hideBelow],
                   column.className,
                 )}
               >
@@ -52,37 +92,58 @@ export function DataTable<Row extends { id: string }>({
           </tr>
         </thead>
         <tbody>
-          {rows.map((row) => (
-            <tr
-              key={row.id}
-              onClick={onRowClick ? () => onRowClick(row) : undefined}
-              tabIndex={onRowClick ? 0 : undefined}
-              onKeyDown={
-                onRowClick
-                  ? (event) => {
-                      if (event.key === "Enter") onRowClick(row);
-                    }
-                  : undefined
-              }
-              className={cn(
-                "border-b border-border/60 transition-colors",
-                onRowClick && "cursor-pointer hover:bg-surface-1",
-              )}
-            >
-              {columns.map((column) => (
-                <td
-                  key={column.key}
+          {loading
+            ? Array.from({ length: 8 }).map((_, index) => (
+                <tr key={`skeleton-${index}`} aria-hidden="true" className="border-b border-border/60">
+                  {columns.map((column, c) => (
+                    <td
+                      key={column.key}
+                      className={cn(
+                        "h-12 px-3 md:h-10",
+                        c === 0 && "pl-4 md:pl-5",
+                        column.hideBelow && HIDE[column.hideBelow],
+                        column.className,
+                      )}
+                    >
+                      <div
+                        className={cn(
+                          "h-2.5 animate-pulse rounded-full bg-foreground/[0.07]",
+                          column.numeric ? "ml-auto w-10" : c === 0 ? "w-3/4" : "w-1/2",
+                        )}
+                      />
+                    </td>
+                  ))}
+                </tr>
+              ))
+            : rows.map((row) => (
+                <tr
+                  key={row.id}
+                  onClick={onRowClick ? () => onRowClick(row) : undefined}
+                  tabIndex={onRowClick ? 0 : undefined}
+                  onKeyDown={onRowClick ? (event) => onRowKey(event, row) : undefined}
                   className={cn(
-                    "h-9 max-w-0 truncate px-4",
-                    column.numeric && "tabular text-right",
-                    column.className,
+                    "border-b border-border/60 transition-colors",
+                    onRowClick &&
+                      "cursor-pointer hover:bg-foreground/[0.025] focus-visible:bg-primary/[0.06] focus-visible:outline-none",
                   )}
                 >
-                  {column.cell(row)}
-                </td>
+                  {columns.map((column, index) => (
+                    <td
+                      key={column.key}
+                      className={cn(
+                        "h-12 truncate px-3 md:h-10",
+                        index === 0 && "pl-4 md:pl-5",
+                        index === columns.length - 1 && "pr-4 md:pr-5",
+                        column.numeric && "tabular text-right",
+                        column.hideBelow && HIDE[column.hideBelow],
+                        column.className,
+                      )}
+                    >
+                      {column.cell(row)}
+                    </td>
+                  ))}
+                </tr>
               ))}
-            </tr>
-          ))}
         </tbody>
       </table>
     </div>

package/templates/invoices/components/filter-tabs.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+export interface FilterTab {
+  id: string;
+  label: string;
+  count?: number;
+}
+
+/**
+ * A row of view filters under the page header, each with its count. On a
+ * phone the row scrolls sideways inside itself instead of widening the page.
+ *
+ * Each filter is a toggle button in a labelled group; ←/→ move between them
+ * and Home/End jump to the ends.
+ */
+export function FilterTabs({
+  tabs,
+  value,
+  onChange,
+  label,
+  trailing,
+  className,
+}: {
+  tabs: FilterTab[];
+  value: string;
+  onChange: (id: string) => void;
+  /** Accessible name for the group, such as "Ticket status". */
+  label: string;
+  /** Extra controls at the end of the row, such as a toggle. */
+  trailing?: React.ReactNode;
+  className?: string;
+}) {
+  function onKeyDown(event: React.KeyboardEvent<HTMLButtonElement>, index: number) {
+    const target =
+      event.key === "ArrowRight"
+        ? (index + 1) % tabs.length
+        : event.key === "ArrowLeft"
+          ? (index - 1 + tabs.length) % tabs.length
+          : event.key === "Home"
+            ? 0
+            : event.key === "End"
+              ? tabs.length - 1
+              : -1;
+    if (target < 0) return;
+    event.preventDefault();
+    const next = tabs[target];
+    onChange(next.id);
+    const list = event.currentTarget.parentElement;
+    list?.querySelector<HTMLButtonElement>(`[data-tab="${next.id}"]`)?.focus();
+  }
+
+  return (
+    <div
+      className={cn(
+        "flex h-11 shrink-0 items-center gap-3 border-b border-border px-3 md:px-5",
+        className,
+      )}
+    >
+      <div
+        role="group"
+        aria-label={label}
+        className="-mx-1 flex min-w-0 flex-1 items-center gap-0.5 overflow-x-auto px-1 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+      >
+        {tabs.map((tab, index) => {
+          const selected = tab.id === value;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              data-tab={tab.id}
+              aria-pressed={selected}
+              tabIndex={selected ? 0 : -1}
+              onClick={() => onChange(tab.id)}
+              onKeyDown={(event) => onKeyDown(event, index)}
+              className={cn(
+                "flex h-7 shrink-0 items-center gap-1.5 rounded-md px-2.5 text-[12.5px] transition-colors",
+                selected
+                  ? "bg-foreground/[0.07] font-medium text-foreground"
+                  : "text-muted-foreground hover:bg-foreground/[0.04] hover:text-foreground",
+              )}
+            >
+              {tab.label}
+              {typeof tab.count === "number" ? (
+                <span
+                  className={cn(
+                    "tabular text-[11.5px]",
+                    selected ? "text-foreground/60" : "text-muted-foreground/80",
+                  )}
+                >
+                  {tab.count}
+                </span>
+              ) : null}
+            </button>
+          );
+        })}
+      </div>
+      {trailing ? <div className="flex shrink-0 items-center gap-2">{trailing}</div> : null}
+    </div>
+  );
+}

package/templates/invoices/components/line-items.tsx

@@ -76,20 +76,20 @@ export function LineItems({
   );
 
   return (
-    <div className="rounded-lg border border-border bg-card">
+    <div className="overflow-hidden rounded-xl border border-border bg-card">
       <table className="w-full border-collapse text-[13px]">
         <thead>
           <tr className="hairline">
-            <th scope="col" className="h-8 px-3 text-left text-[11px] font-medium text-muted-foreground">
+            <th scope="col" className="h-9 px-3.5 text-left text-[11px] font-medium uppercase tracking-[0.04em] text-muted-foreground">
               Description
             </th>
-            <th scope="col" className="h-8 w-20 px-3 text-right text-[11px] font-medium text-muted-foreground">
+            <th scope="col" className="hidden h-9 w-20 px-3 text-right text-[11px] font-medium uppercase tracking-[0.04em] text-muted-foreground sm:table-cell">
               Qty
             </th>
-            <th scope="col" className="h-8 w-28 px-3 text-right text-[11px] font-medium text-muted-foreground">
+            <th scope="col" className="hidden h-9 w-28 px-3 text-right text-[11px] font-medium uppercase tracking-[0.04em] text-muted-foreground sm:table-cell">
               Unit
             </th>
-            <th scope="col" className="h-8 w-28 px-3 text-right text-[11px] font-medium text-muted-foreground">
+            <th scope="col" className="h-9 w-28 px-3.5 text-right text-[11px] font-medium uppercase tracking-[0.04em] text-muted-foreground">
               Amount
             </th>
             {editable ? <th className="w-10" /> : null}
@@ -108,14 +108,19 @@ export function LineItems({
           ) : (
             ordered.map((item) => (
               <tr key={item.id} className="border-b border-border/60 last:border-0">
-                <td className="px-3 py-2">{item.description}</td>
-                <td className="tabular px-3 py-2 text-right text-muted-foreground">
+                <td className="px-3.5 py-2.5">
+                  {item.description}
+                  <span className="tabular block text-[12px] text-muted-foreground sm:hidden">
+                    {quantity(item.quantityMilli)} × {money(item.unitPriceCents)}
+                  </span>
+                </td>
+                <td className="tabular hidden px-3 py-2.5 text-right text-muted-foreground sm:table-cell">
                   {quantity(item.quantityMilli)}
                 </td>
-                <td className="tabular px-3 py-2 text-right text-muted-foreground">
+                <td className="tabular hidden px-3 py-2.5 text-right text-muted-foreground sm:table-cell">
                   {money(item.unitPriceCents)}
                 </td>
-                <td className="tabular px-3 py-2 text-right">
+                <td className="tabular px-3.5 py-2.5 text-right font-medium">
                   {money(lineTotalCents(item))}
                 </td>
                 {editable ? (
@@ -138,20 +143,20 @@ export function LineItems({
       </table>
 
       {editable ? (
-        <form onSubmit={add} className="flex items-end gap-2 border-t border-border p-2">
+        <form onSubmit={add} className="flex flex-wrap items-end gap-2 border-t border-border bg-surface-1 p-2.5">
           <Input
             aria-label="Description"
             placeholder="Senior engineering"
             value={description}
             onChange={(event) => setDescription(event.target.value)}
-            className="h-8 flex-1"
+            className="h-9 min-w-[12rem] flex-1 bg-background md:h-8"
           />
           <Input
             aria-label="Quantity"
             inputMode="decimal"
             value={qty}
             onChange={(event) => setQty(event.target.value)}
-            className="h-8 w-20 text-right"
+            className="h-9 w-20 bg-background text-right md:h-8"
           />
           <Input
             aria-label="Unit price"
@@ -159,9 +164,9 @@ export function LineItems({
             placeholder="165.00"
             value={price}
             onChange={(event) => setPrice(event.target.value)}
-            className="h-8 w-28 text-right"
+            className="h-9 w-28 flex-1 bg-background text-right sm:flex-none md:h-8"
           />
-          <Button type="submit" size="sm" disabled={!canAdd} className="h-8">
+          <Button type="submit" size="sm" disabled={!canAdd} className="h-9 md:h-8">
             <Plus />
             Add
           </Button>

package/templates/invoices/components/nav.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+import { FileText, Users } from "lucide-react";
+
+export interface NavEntry {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+}
+
+/** The sidebar's links, top to bottom. Add a view here to put it in the nav. */
+export const NAV: NavEntry[] = [
+  { href: "/", label: "Invoices", icon: <FileText /> },
+  { href: "/clients", label: "Clients", icon: <Users /> },
+];

package/templates/invoices/components/page-header.tsx

@@ -1,36 +1,72 @@
+"use client";
+
 import React from "react";
+import { Menu, Search } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { useShell } from "@/components/app-shell";
 
 /**
  * The bar at the top of every view: title on the left, actions on the right.
- * Fixed height so switching pages doesn't shift the content below it.
+ * Fixed height, so switching pages doesn't shift the content below it.
+ *
+ * Below the `md` breakpoint it also carries the menu button that opens the
+ * navigation drawer and a search button, since the sidebar is hidden there.
  */
 export function PageHeader({
   title,
   count,
+  leading,
   children,
   className,
 }: {
   title: string;
-  /** Shown beside the title — the number of rows in view. */
+  /** Shown beside the title. Pass the same number the sidebar shows. */
   count?: number;
+  /** Rendered before the title, such as a back link on a detail page. */
+  leading?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
 }) {
+  const shell = useShell();
   return (
     <header
       className={cn(
-        "flex h-12 shrink-0 items-center justify-between gap-3 border-b border-border px-4",
+        "flex h-13 shrink-0 items-center justify-between gap-2 border-b border-border px-3 md:gap-3 md:px-5",
         className,
       )}
     >
-      <div className="flex min-w-0 items-baseline gap-2">
-        <h1 className="truncate text-[13px] font-semibold">{title}</h1>
+      <div className="flex min-w-0 items-center gap-1.5">
+        {shell ? (
+          <button
+            type="button"
+            onClick={shell.openNav}
+            aria-label="Open navigation"
+            className="-ml-1 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-foreground/[0.05] hover:text-foreground md:hidden"
+          >
+            <Menu className="size-[18px]" />
+          </button>
+        ) : null}
+        {leading}
+        <h1 className="truncate text-[14px] font-semibold tracking-[-0.01em]">{title}</h1>
         {typeof count === "number" ? (
-          <span className="tabular text-[12px] text-muted-foreground">{count}</span>
+          <span className="tabular ml-0.5 rounded-full bg-foreground/[0.06] px-1.5 py-px text-[11.5px] font-medium text-muted-foreground">
+            {count}
+          </span>
+        ) : null}
+      </div>
+      <div className="flex shrink-0 items-center gap-1.5 md:gap-2">
+        {shell ? (
+          <button
+            type="button"
+            onClick={shell.openCommand}
+            aria-label="Search"
+            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-foreground/[0.05] hover:text-foreground md:hidden"
+          >
+            <Search className="size-[18px]" />
+          </button>
         ) : null}
+        {children}
       </div>
-      <div className="flex items-center gap-2">{children}</div>
     </header>
   );
 }

package/templates/invoices/components/require-auth.tsx

@@ -1,8 +1,10 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import { useAuth } from "@pylonsync/client";
-import { AuthForm } from "@/components/auth-form";
+import { BRAND } from "@/lib/brand";
+import { AuthForm, type AuthMode } from "@/components/auth-form";
+import { BrandMark } from "@/components/brand-mark";
 
 /**
  * Client-side auth gate.
@@ -18,44 +20,40 @@ import { AuthForm } from "@/components/auth-form";
  * It also removes a full page load from the sign-in path: authenticating swaps
  * this component's children in place instead of navigating.
  */
-export function RequireAuth({
-  title,
-  description,
-  children,
-}: {
-  title: string;
-  description: string;
-  children: React.ReactNode;
-}) {
+export function RequireAuth({ children }: { children: React.ReactNode }) {
   const { isSignedIn, isLoaded } = useAuth();
+  const [mode, setMode] = useState<AuthMode>("login");
 
   // `isLoaded` covers the beat before the engine has resolved the stored token.
   // Rendering the form during it would flash a sign-in screen at someone who is
   // already signed in.
   if (!isLoaded) {
     return (
-      <main className="flex min-h-screen items-center justify-center">
-        <span className="text-[13px] text-muted-foreground">Loading…</span>
+      <main className="flex min-h-dvh items-center justify-center" aria-busy="true">
+        <BrandMark className="size-8 animate-pulse" />
+        <span className="sr-only">Loading {BRAND.name}</span>
       </main>
     );
   }
 
   if (!isSignedIn) {
     return (
-      <main className="flex min-h-screen items-center justify-center px-6">
-        <div className="w-full max-w-[320px]">
-          <div className="mb-7 flex items-center gap-2">
-            <span className="flex size-7 items-center justify-center rounded-md bg-primary text-[12px] font-bold text-primary-foreground">
-              {title.slice(0, 1).toUpperCase()}
-            </span>
-            <span className="text-[15px] font-semibold tracking-tight">{title}</span>
+      <main className="flex min-h-dvh items-center justify-center bg-surface-1 px-4 py-10">
+        <div className="w-full max-w-[380px]">
+          <div className="mb-6 flex items-center justify-center gap-2.5">
+            <BrandMark className="size-8 rounded-[9px]" />
+            <span className="text-[17px] font-semibold tracking-[-0.015em]">{BRAND.name}</span>
           </div>
-          <h1 className="text-[19px] font-semibold tracking-tight">
-            Sign in to your workspace
-          </h1>
-          <p className="mt-1 text-[13px] text-muted-foreground">{description}</p>
-          <div className="mt-6">
-            <AuthForm />
+          <div className="rounded-xl border border-border bg-background p-6 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_12px_32px_-12px_rgb(0_0_0/0.12)] sm:p-7">
+            <h1 className="text-[18px] font-semibold tracking-[-0.015em]">
+              {mode === "login" ? `Sign in to ${BRAND.name}` : `Create your ${BRAND.name} account`}
+            </h1>
+            <p className="mt-1.5 text-[13px] leading-5 text-muted-foreground">
+              {BRAND.description}
+            </p>
+            <div className="mt-6">
+              <AuthForm mode={mode} onModeChange={setMode} />
+            </div>
           </div>
         </div>
       </main>