@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/expo/consumer/apps/expo/app.json

@@ -20,6 +20,14 @@
     },
     "web": {
       "bundler": "metro"
-    }
+    },
+    "plugins": [
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "Choose photos from your library to share."
+        }
+      ]
+    ]
   }
 }

package/templates/expo/consumer/apps/expo/package.json

@@ -11,13 +11,14 @@
     "web": "expo start --web"
   },
   "dependencies": {
-    "@pylonsync/sdk": "^__PYLON_VERSION__",
     "@pylonsync/react": "^__PYLON_VERSION__",
     "@pylonsync/react-native": "^__PYLON_VERSION__",
+    "@pylonsync/sdk": "^__PYLON_VERSION__",
     "@pylonsync/sync": "^__PYLON_VERSION__",
     "@react-native-async-storage/async-storage": "2.2.0",
     "@react-native-community/netinfo": "~12.0.0",
     "expo": "~56.0.0",
+    "expo-image-picker": "~56.0.25",
     "expo-status-bar": "~56.0.0",
     "react": "19.2.0",
     "react-dom": "19.2.0",

package/templates/helpdesk/README.md

@@ -15,6 +15,11 @@ realistic queue — including one urgent ticket already past its first-response
 window, so the breach state is visible rather than theoretical. Delete
 `functions/seedWorkspace.ts` and `lib/seed.ts` once real tickets arrive.
 
+The tickets are spread across you and four demo teammates. Each is a User
+row with a `@demo.invalid` address and no password, so outside dev mode nobody
+can sign in as one (see `lib/demo-team.ts`). Delete those users along with the
+seed.
+
 ## What's interesting here
 
 **The queue answers "what next".** Rows are ordered by `queueOrder` in
@@ -37,6 +42,22 @@ the note stays marked in the thread, and — deliberately — an internal note d
 **not** stop the SLA clock. A team that could clear its SLA by talking to itself
 would have an SLA worth nothing.
 
+## Brand and layout
+
+The product ships as **Frontdesk**. The name lives in `lib/brand.ts`, and the
+sidebar, sign-in screen, page titles, and phone drawer all read it. The mark is
+`components/brand-mark.tsx`; `app/icon.svg`, `app/apple-icon.png`, and
+`public/favicon.ico` draw the same shape for browsers and home screens. The
+accent colour is `--brand` at the top of `app/globals.css`, and the typeface
+(Public Sans) is set in `fonts` in `app.ts`.
+
+The frame is `components/app-shell.tsx`. From 768px up the sidebar is a fixed
+rail; below that it opens as a drawer from the menu button in each page header,
+tables drop their lower-priority columns (`hideBelow` in
+`components/data-table.tsx`), and boards scroll one column at a time. The nav
+links are in `components/nav.tsx`. Every nav count comes from `navCounts` in
+`app/workspace.tsx`, and page headers and tabs read the same numbers.
+
 ## Layout
 
 ```

package/templates/helpdesk/app/customers/customers-view.tsx

@@ -19,7 +19,7 @@ export function CustomersView() {
   const [open, setOpen] = useState(false);
 
   return (
-    <RequireAuth title="Helpdesk" description="Your team shares one queue. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/customers">
       {(data) => {
         // Ticket counts per customer, derived rather than stored — one less
@@ -33,16 +33,23 @@ export function CustomersView() {
           {
             key: "name",
             header: "Customer",
+            className: "w-[62%] md:w-[24%]",
             cell: (row) => (
-              <span className="flex items-center gap-2">
-                <Avatar name={row.name} size="sm" />
-                <span className="truncate font-medium">{row.name}</span>
+              <span className="flex min-w-0 items-center gap-2.5">
+                <Avatar name={row.name} />
+                <span className="min-w-0">
+                  <span className="block truncate font-medium">{row.name}</span>
+                  <span className="block truncate text-[12px] text-muted-foreground md:hidden">
+                    {row.company ?? row.email}
+                  </span>
+                </span>
               </span>
             ),
           },
           {
             key: "company",
             header: "Company",
+            hideBelow: "md",
             cell: (row) => (
               <span className="text-muted-foreground">{row.company ?? "—"}</span>
             ),
@@ -50,6 +57,8 @@ export function CustomersView() {
           {
             key: "email",
             header: "Email",
+            hideBelow: "lg",
+            className: "w-[26%]",
             cell: (row) => (
               <a
                 href={`mailto:${row.email}`}
@@ -62,19 +71,24 @@ export function CustomersView() {
           },
           {
             key: "open",
-            header: "Open",
+            header: "Unresolved",
             numeric: true,
+            className: "w-[104px]",
             cell: (row) => openCount(row.id),
           },
           {
             key: "total",
             header: "Total",
             numeric: true,
+            hideBelow: "sm",
+            className: "w-[80px]",
             cell: (row) => totalCount(row.id),
           },
           {
             key: "created",
             header: "Added",
+            hideBelow: "xl",
+            className: "w-[100px]",
             cell: (row) => (
               <span className="text-muted-foreground">
                 {relativeTime(row.createdAt)}
@@ -87,16 +101,18 @@ export function CustomersView() {
 
         return (
           <>
-            <PageHeader title="Customers" count={rows.length}>
+            <PageHeader title="Customers" count={data.navCounts["/customers"]}>
               <Button size="sm" onClick={() => setOpen(true)}>
                 <Plus />
-                New customer
+                <span className="max-sm:sr-only">New customer</span>
               </Button>
             </PageHeader>
 
             <DataTable
               rows={rows}
               columns={columns}
+              loading={data.loading}
+              label="Customers"
               empty={
                 <EmptyState
                   icon={<Users />}

package/templates/helpdesk/app/customers/page.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { CustomersView } from "./customers-view";
 
 export const metadata: Metadata = {
-  title: "Customers",
+  title: `Customers · ${BRAND.name}`,
   robots: "noindex",
 };
 

package/templates/helpdesk/app/globals.css

@@ -9,15 +9,21 @@
 /* ---------------------------------------------------------------------------
    Design tokens.
 
-   Tuned for a dense internal tool rather than a marketing page: a near-neutral
-   surface ramp, hairline borders instead of shadows, and one accent used
-   sparingly so status colour still means something. Dark is the primary theme —
-   `app/layout.tsx` sets `class="dark"` — and light is a real, tested
-   alternative, not an afterthought.
+   Tuned for a dense internal tool: a near-neutral surface ramp, hairline
+   borders instead of shadows, and one accent used sparingly so status colour
+   still means something. Light is the default; `.dark` holds a complete dark
+   set (add `class="dark"` to <html> in app/layout.tsx to switch).
 
-   These are the same variable names shadcn/ui generates against, so
+   These are the variable names shadcn/ui generates against, so
    `npx shadcn@latest add <component>` drops in already themed.
 --------------------------------------------------------------------------- */
+:root {
+  /* The brand accent: primary buttons, the brand mark, focus rings, and the
+     active nav icon. Change these two lines to re-colour the product. */
+  --brand: oklch(0.53 0.1 195);
+  --brand-dark: oklch(0.66 0.1 195);
+}
+
 :root {
   --radius: 0.5rem;
 
@@ -28,7 +34,7 @@
   --popover: oklch(1 0 0);
   --popover-foreground: var(--foreground);
 
-  --primary: oklch(0.55 0.204 274.5);
+  --primary: var(--brand);
   --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.968 0.002 286.4);
   --secondary-foreground: oklch(0.27 0.006 286);
@@ -40,7 +46,7 @@
 
   --border: oklch(0.918 0.004 286.3);
   --input: oklch(0.918 0.004 286.3);
-  --ring: oklch(0.55 0.204 274.5);
+  --ring: var(--brand);
 
   /* Surfaces above the page: sidebar, popovers, hover rows. */
   --surface-1: oklch(0.985 0.001 286.4);
@@ -51,6 +57,7 @@
   --stage-lead: oklch(0.62 0.03 264);
   --stage-qualified: oklch(0.6 0.13 240);
   --stage-proposal: oklch(0.68 0.15 78);
+  --stage-negotiation: oklch(0.64 0.16 45);
   --stage-won: oklch(0.6 0.15 155);
   --stage-lost: oklch(0.6 0.11 25);
 }
@@ -63,7 +70,7 @@
   --popover: oklch(0.216 0.006 285.9);
   --popover-foreground: var(--foreground);
 
-  --primary: oklch(0.62 0.19 274.5);
+  --primary: var(--brand-dark);
   --primary-foreground: oklch(1 0 0);
   --secondary: oklch(0.25 0.006 286);
   --secondary-foreground: oklch(0.93 0.002 286.3);
@@ -75,7 +82,7 @@
 
   --border: oklch(1 0 0 / 9%);
   --input: oklch(1 0 0 / 12%);
-  --ring: oklch(0.62 0.19 274.5);
+  --ring: var(--brand-dark);
 
   --surface-1: oklch(0.186 0.004 285.9);
   --surface-2: oklch(0.216 0.006 285.9);
@@ -83,6 +90,7 @@
   --stage-lead: oklch(0.68 0.03 264);
   --stage-qualified: oklch(0.68 0.13 240);
   --stage-proposal: oklch(0.75 0.14 78);
+  --stage-negotiation: oklch(0.72 0.15 45);
   --stage-won: oklch(0.7 0.15 155);
   --stage-lost: oklch(0.68 0.14 25);
 }
@@ -118,6 +126,7 @@
   --color-stage-lead: var(--stage-lead);
   --color-stage-qualified: var(--stage-qualified);
   --color-stage-proposal: var(--stage-proposal);
+  --color-stage-negotiation: var(--stage-negotiation);
   --color-stage-won: var(--stage-won);
   --color-stage-lost: var(--stage-lost);
 }
@@ -143,15 +152,21 @@
     height: 100%;
     background-color: var(--color-background);
     color: var(--color-foreground);
-    /* 13px is the density these screens are designed at; the slight negative
-       tracking is what keeps Inter from looking loose at that size. */
-    font-size: 13px;
+    /* 14px on phones, 13px from the md breakpoint up: the density these
+       screens are designed at on a desktop. */
+    font-size: 14px;
     line-height: 1.5;
-    letter-spacing: -0.006em;
+    letter-spacing: -0.003em;
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
   }
 
+  @media (min-width: 768px) {
+    body {
+      font-size: 13px;
+    }
+  }
+
   button {
     cursor: pointer;
   }

package/templates/helpdesk/app/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><rect width="32" height="32" rx="8" fill="#007d7e"/><path d="M9 7h14a3.5 3.5 0 0 1 3.5 3.5v7.5a3.5 3.5 0 0 1-3.5 3.5h-6.5L11.5 25v-3.5H9A3.5 3.5 0 0 1 5.5 18v-7.5A3.5 3.5 0 0 1 9 7Z" fill="#fff"/><rect x="10" y="11.3" width="12" height="2.4" rx="1.2" fill="#007d7e"/><rect x="10" y="15.3" width="7.5" height="2.4" rx="1.2" fill="#007d7e"/></svg>

package/templates/helpdesk/app/inbox-view.tsx

@@ -2,15 +2,21 @@
 
 import React, { useEffect, useState } from "react";
 import { callFn, useRouter } from "@pylonsync/react";
-import { Inbox, Plus } from "lucide-react";
+import { Inbox, Plus, UserX } from "lucide-react";
 import { Button } from "@/components/ui/button";
-import { Select } from "@/components/ui/select";
 import { Kbd } from "@/components/kbd";
 import { PageHeader } from "@/components/page-header";
 import { EmptyState } from "@/components/empty-state";
-import { TicketList } from "@/components/ticket-list";
+import { TicketList, TicketListSkeleton } from "@/components/ticket-list";
 import { NewTicketDialog } from "@/components/new-ticket-dialog";
-import { STATUSES, applyFilter, counts, type Filter } from "@/lib/tickets";
+import { FilterTabs } from "@/components/filter-tabs";
+import {
+  DEFAULT_INBOX_TAB,
+  INBOX_TABS,
+  applyFilter,
+  inboxCount,
+  inboxFilter,
+} from "@/lib/tickets";
 import { RequireAuth } from "@/components/require-auth";
 import { Workspace } from "./workspace";
 
@@ -23,9 +29,18 @@ export function InboxView({
 }) {
   const router = useRouter();
   const [dialogOpen, setDialogOpen] = useState(Boolean(openNew));
-  const [status, setStatus] = useState<string>("open");
+  const [tab, setTab] = useState<string>(DEFAULT_INBOX_TAB);
   const [unassigned, setUnassigned] = useState(initialFilter === "unassigned");
 
+  // ⌘K "Unassigned open tickets" navigates here with ?filter=unassigned while
+  // the inbox may already be mounted.
+  useEffect(() => {
+    if (initialFilter === "unassigned") {
+      setTab(DEFAULT_INBOX_TAB);
+      setUnassigned(true);
+    }
+  }, [initialFilter]);
+
   // "c" opens a ticket, the way an issue tracker does. Ignored while typing so
   // it never swallows a character in the reply box.
   useEffect(() => {
@@ -46,66 +61,69 @@ export function InboxView({
   }, []);
 
   return (
-    <RequireAuth title="Helpdesk" description="Your team shares one queue. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/">
       {(data) => {
-        const filter: Filter = {
-          ...(status === "all" ? {} : { status }),
-          ...(unassigned ? { unassigned: true } : {}),
-        };
-        const visible = applyFilter(data.tickets, filter);
-        const queue = counts(data.tickets);
+        const visible = applyFilter(data.tickets, inboxFilter(tab, unassigned));
 
         return (
           <>
-            <PageHeader title="Inbox" count={visible.length}>
-              <div className="w-32">
-                <Select
-                  aria-label="Status"
-                  value={status}
-                  onChange={(event) => setStatus(event.target.value)}
-                  className="h-7 text-[12px]"
-                >
-                  <option value="all">All statuses</option>
-                  {STATUSES.map((s) => (
-                    <option key={s.id} value={s.id}>
-                      {s.label}
-                    </option>
-                  ))}
-                </Select>
-              </div>
-              <Button
-                size="sm"
-                variant={unassigned ? "default" : "secondary"}
-                onClick={() => setUnassigned((on) => !on)}
-                title="Show only tickets with no agent"
-              >
-                Unassigned
-                <span className="tabular ml-1 opacity-70">{queue.unassigned}</span>
-              </Button>
-              <Button size="sm" onClick={() => setDialogOpen(true)}>
+            <PageHeader title="Inbox" count={data.navCounts["/"]}>
+              <Button size="sm" onClick={() => setDialogOpen(true)} title="New ticket (c)">
                 <Plus />
                 New ticket
-                <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>
 
-            {visible.length === 0 ? (
+            <FilterTabs
+              label="Ticket status"
+              value={tab}
+              onChange={setTab}
+              tabs={INBOX_TABS.map((t) => ({
+                id: t.id,
+                label: t.label,
+                count: inboxCount(data.tickets, t.id, unassigned),
+              }))}
+              trailing={
+                <button
+                  type="button"
+                  aria-pressed={unassigned}
+                  onClick={() => setUnassigned((on) => !on)}
+                  title="Show only tickets with no agent"
+                  className={
+                    "flex h-7 items-center gap-1.5 rounded-md border px-2.5 text-[12.5px] transition-colors " +
+                    (unassigned
+                      ? "border-primary/40 bg-primary/10 font-medium text-primary"
+                      : "border-border text-muted-foreground hover:text-foreground")
+                  }
+                >
+                  <UserX className="size-3.5" />
+                  <span className="max-sm:sr-only">Unassigned</span>
+                </button>
+              }
+            />
+
+            {data.loading ? (
+              <TicketListSkeleton />
+            ) : visible.length === 0 ? (
               <EmptyState
                 icon={<Inbox />}
                 title={
-                  data.loading
-                    ? "Loading…"
-                    : data.tickets.length === 0
-                      ? "No tickets yet"
-                      : "Nothing matches this filter"
+                  data.tickets.length === 0
+                    ? "No tickets yet"
+                    : unassigned
+                      ? "Every ticket here has an agent"
+                      : "No tickets with this status"
                 }
                 description={
                   data.tickets.length === 0
                     ? "When a customer writes in, their ticket lands here. You can also open one yourself after a phone call."
-                    : "Try a different status, or clear the unassigned filter."
+                    : unassigned
+                      ? "Turn off the Unassigned filter to see the tickets your team is working."
+                      : "Pick another tab to see the rest of the queue."
                 }
                 action={
                   data.tickets.length === 0 ? (
@@ -119,6 +137,7 @@ export function InboxView({
             ) : (
               <TicketList
                 tickets={visible}
+                showStatus={tab === "all"}
                 customerName={data.customerName}
                 assigneeName={data.agentName}
                 onSelect={(id) => router.push(`/tickets/${id}`)}

package/templates/helpdesk/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/helpdesk/app/page.tsx

@@ -1,21 +1,18 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { InboxView } from "./inbox-view";
 
 export const metadata: Metadata = {
-  title: "Inbox",
+  title: `Inbox · ${BRAND.name}`,
   robots: "noindex",
 };
 
-/**
- * `/` — the support queue.
- *
- */
+/** `/` — the support queue. */
 export default function InboxPage({ searchParams }: PageProps) {
-
   return (
     <InboxView
-          openNew={searchParams?.new === "ticket"}
+      openNew={searchParams?.new === "ticket"}
       initialFilter={searchParams?.filter}
     />
   );

package/templates/helpdesk/app/tickets/[id]/page.tsx

@@ -1,9 +1,10 @@
 import React from "react";
 import type { Metadata, PageProps } from "@pylonsync/react";
+import { BRAND } from "@/lib/brand";
 import { TicketView } from "./ticket-view";
 
 export const metadata: Metadata = {
-  title: "Ticket",
+  title: `Ticket · ${BRAND.name}`,
   robots: "noindex",
 };