@pylonsync/create-pylon 0.19.1 → 0.20.0

package/templates/helpdesk/app/tickets/[id]/ticket-view.tsx

@@ -2,17 +2,17 @@
 
 import React from "react";
 import { Link, callFn, useRouter } from "@pylonsync/react";
-import { ArrowLeft } from "lucide-react";
+import { ChevronRight } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Select } from "@/components/ui/select";
 import { PageHeader } from "@/components/page-header";
 import { EmptyState } from "@/components/empty-state";
 import { Thread } from "@/components/thread";
-import { PriorityBadge } from "@/components/priority-badge";
+import { PriorityBadge, StatusBadge } from "@/components/priority-badge";
 import { SlaIndicator } from "@/components/sla-indicator";
 import { Avatar } from "@/components/avatar";
 import { relativeTime } from "@/lib/format";
-import { PRIORITIES, STATUSES, ticketNumber } from "@/lib/tickets";
+import { PRIORITIES, STATUSES, isOpen, ticketNumber } from "@/lib/tickets";
 import { RequireAuth } from "@/components/require-auth";
 import { Workspace } from "../../workspace";
 
@@ -24,7 +24,7 @@ export function TicketView({
   const router = useRouter();
 
   return (
-    <RequireAuth title="Helpdesk" description="Your team shares one queue. Anyone with an account sees it.">
+    <RequireAuth>
       <Workspace pathname="/">
       {(data) => {
         const ticket = data.tickets.find((t) => t.id === ticketId);
@@ -34,7 +34,7 @@ export function TicketView({
             <>
               <PageHeader title="Ticket" />
               <EmptyState
-                title={data.loading ? "Loading…" : "Ticket not found"}
+                title={data.loading ? "Loading ticket…" : "Ticket not found"}
                 description={
                   data.loading
                     ? undefined
@@ -54,108 +54,136 @@ export function TicketView({
 
         const customer = data.customers.find((c) => c.id === ticket.customerId);
         const messages = data.messages.filter((m) => m.ticketId === ticket.id);
+        const openForCustomer = customer
+          ? data.tickets.filter((t) => t.customerId === customer.id && isOpen(t)).length
+          : 0;
+
+        const setState = (patch: Record<string, string>) =>
+          void callFn("setTicketState", { ticketId: ticket.id, ...patch });
+
+        const properties = (
+          <>
+            <Field label="Status">
+              <Select
+                aria-label="Status"
+                value={ticket.status}
+                className="h-8 bg-background md:h-7.5"
+                onChange={(event) => setState({ status: event.target.value })}
+              >
+                {STATUSES.map((s) => (
+                  <option key={s.id} value={s.id}>
+                    {s.label}
+                  </option>
+                ))}
+              </Select>
+            </Field>
+            <Field label="Priority">
+              <Select
+                aria-label="Priority"
+                value={ticket.priority}
+                className="h-8 bg-background md:h-7.5"
+                onChange={(event) => setState({ priority: event.target.value })}
+              >
+                {PRIORITIES.map((p) => (
+                  <option key={p.id} value={p.id}>
+                    {p.label}
+                  </option>
+                ))}
+              </Select>
+            </Field>
+            <Field label="Assignee">
+              <Select
+                aria-label="Assignee"
+                value={ticket.assigneeId ?? ""}
+                className="h-8 bg-background md:h-7.5"
+                onChange={(event) => setState({ assigneeId: event.target.value })}
+              >
+                <option value="">Unassigned</option>
+                {data.agents.map((agent) => (
+                  <option key={agent.id} value={agent.id}>
+                    {agent.displayName || agent.email}
+                    {agent.id === data.userId ? " (you)" : ""}
+                  </option>
+                ))}
+              </Select>
+            </Field>
+          </>
+        );
 
         return (
           <>
-            <PageHeader title={ticket.subject}>
-              <SlaIndicator ticket={ticket} />
-              <div className="w-28">
-                <Select
-                  aria-label="Priority"
-                  value={ticket.priority}
-                  className="h-7 text-[12px]"
-                  onChange={(event) =>
-                    void callFn("setTicketState", {
-                      ticketId: ticket.id,
-                      priority: event.target.value,
-                    })
-                  }
-                >
-                  {PRIORITIES.map((p) => (
-                    <option key={p.id} value={p.id}>
-                      {p.label}
-                    </option>
-                  ))}
-                </Select>
-              </div>
-              <div className="w-28">
-                <Select
-                  aria-label="Status"
-                  value={ticket.status}
-                  className="h-7 text-[12px]"
-                  onChange={(event) =>
-                    void callFn("setTicketState", {
-                      ticketId: ticket.id,
-                      status: event.target.value,
-                    })
-                  }
+            <PageHeader
+              title={ticket.subject}
+              leading={
+                <Link
+                  href="/"
+                  className="hidden items-center gap-1 text-[13px] text-muted-foreground transition-colors hover:text-foreground md:inline-flex"
                 >
-                  {STATUSES.map((s) => (
-                    <option key={s.id} value={s.id}>
-                      {s.label}
-                    </option>
-                  ))}
-                </Select>
-              </div>
+                  Inbox
+                  <ChevronRight className="size-3.5" />
+                </Link>
+              }
+            >
+              <SlaIndicator ticket={ticket} />
             </PageHeader>
 
-            <div className="flex items-center gap-3 border-b border-border px-6 py-2.5 text-[12px] text-muted-foreground">
-              <Link
-                href="/"
-                className="inline-flex items-center gap-1.5 transition-colors hover:text-foreground"
-              >
-                <ArrowLeft className="size-3.5" />
-                Inbox
-              </Link>
-              <span aria-hidden="true">·</span>
-              <span className="tabular">
-                {ticketNumber(ticket.id, ticket.createdAt)}
-              </span>
-              <span aria-hidden="true">·</span>
-              <PriorityBadge priority={ticket.priority} />
-              {customer ? (
-                <>
-                  <span aria-hidden="true">·</span>
-                  <span className="flex items-center gap-1.5">
-                    <Avatar name={customer.name} size="sm" />
-                    {customer.name}
-                    {customer.company ? ` · ${customer.company}` : ""}
-                  </span>
-                </>
-              ) : null}
-              <span aria-hidden="true">·</span>
-              <span>Opened {relativeTime(ticket.createdAt)}</span>
+            <div className="flex min-h-0 flex-1">
+              <div className="flex min-w-0 flex-1 flex-col">
+                <div className="border-b border-border px-4 py-3 md:px-6 md:py-4">
+                  <div className="flex items-center gap-2 text-[12.5px] text-muted-foreground">
+                    <span className="tabular">{ticketNumber(ticket.id, ticket.createdAt)}</span>
+                    <span aria-hidden="true">·</span>
+                    <StatusBadge status={ticket.status} />
+                    <PriorityBadge priority={ticket.priority} />
+                    <span aria-hidden="true">·</span>
+                    <span className="truncate">Opened {relativeTime(ticket.createdAt)}</span>
+                  </div>
+                  <h2 className="mt-1.5 text-[18px] font-semibold leading-snug tracking-[-0.015em] md:text-[20px]">
+                    {ticket.subject}
+                  </h2>
+                  <dl className="mt-3 grid grid-cols-3 gap-2 lg:hidden">{properties}</dl>
+                </div>
 
-              <div className="ml-auto w-40">
-                <Select
-                  aria-label="Assignee"
-                  value={ticket.assigneeId ?? ""}
-                  className="h-7 text-[12px]"
-                  onChange={(event) =>
-                    void callFn("setTicketState", {
-                      ticketId: ticket.id,
-                      assigneeId: event.target.value,
-                    })
+                <Thread
+                  messages={messages}
+                  authorName={data.agentName}
+                  customerName={customer?.name ?? null}
+                  onSend={(body, internal) =>
+                    callFn("replyToTicket", { ticketId: ticket.id, body, internal })
                   }
-                >
-                  <option value="">Unassigned</option>
-                  {data.agents.map((agent) => (
-                    <option key={agent.id} value={agent.id}>
-                      {agent.displayName || agent.email}
-                    </option>
-                  ))}
-                </Select>
+                />
               </div>
-            </div>
 
-            <Thread
-              messages={messages}
-              authorName={data.agentName}
-              customerName={customer?.name ?? null}
-              onSend={(body, internal) =>
-                callFn("replyToTicket", { ticketId: ticket.id, body, internal })
-              }
-            />
+              <aside className="hidden w-[288px] shrink-0 flex-col gap-5 overflow-y-auto border-l border-border bg-surface-1 p-5 lg:flex">
+                <dl className="space-y-4">{properties}</dl>
+
+                {customer ? (
+                  <section className="border-t border-border pt-5">
+                    <h3 className="text-[12px] font-medium text-muted-foreground">Customer</h3>
+                    <div className="mt-3 flex items-center gap-2.5">
+                      <Avatar name={customer.name} />
+                      <div className="min-w-0 leading-tight">
+                        <p className="truncate text-[13px] font-medium">{customer.name}</p>
+                        {customer.company ? (
+                          <p className="truncate text-[12px] text-muted-foreground">
+                            {customer.company}
+                          </p>
+                        ) : null}
+                      </div>
+                    </div>
+                    <a
+                      href={`mailto:${customer.email}`}
+                      className="mt-3 block truncate text-[12.5px] text-muted-foreground hover:text-foreground"
+                    >
+                      {customer.email}
+                    </a>
+                    <p className="mt-1 text-[12.5px] text-muted-foreground">
+                      {openForCustomer} open ticket{openForCustomer === 1 ? "" : "s"}
+                    </p>
+                  </section>
+                ) : null}
+              </aside>
+            </div>
           </>
         );
       }}
@@ -163,3 +191,12 @@ export function TicketView({
     </RequireAuth>
   );
 }
+
+function Field({ label, children }: { label: string; children: React.ReactNode }) {
+  return (
+    <div className="min-w-0">
+      <dt className="mb-1 text-[11.5px] font-medium text-muted-foreground">{label}</dt>
+      <dd className="min-w-0">{children}</dd>
+    </div>
+  );
+}

package/templates/helpdesk/app/workspace.tsx

@@ -3,10 +3,11 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { callFn, db, useRouter } from "@pylonsync/react";
 import { useAuth } from "@pylonsync/client";
-import { Sidebar } from "@/components/sidebar";
+import { Inbox, User } from "lucide-react";
+import { AppShell } from "@/components/app-shell";
 import { CommandPalette } from "@/components/command-palette";
 import type { SearchItem } from "@/lib/search";
-import { counts, isOpen } from "@/lib/tickets";
+import { DEFAULT_INBOX_TAB, inboxCount } from "@/lib/tickets";
 
 export interface CustomerRow {
   id: string;
@@ -48,6 +49,13 @@ export interface WorkspaceData {
   agents: UserRow[];
   customerName: (id: string | null | undefined) => string | null;
   agentName: (id: string | null | undefined) => string | null;
+  /** The signed-in agent's user id. */
+  userId: string | null;
+  /**
+   * The number beside each nav link, keyed by href. Page headers and tabs
+   * read the same numbers, so the sidebar and the page can't disagree.
+   */
+  navCounts: Record<string, number>;
   loading: boolean;
 }
 
@@ -82,8 +90,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);
@@ -139,14 +146,14 @@ export function Workspace({
     () => [
       ...ticketList.map((ticket) => ({
         id: `ticket:${ticket.id}`,
-        type: "deal" as const,
+        type: "ticket",
         title: ticket.subject,
         subtitle: lookups.customerById.get(ticket.customerId ?? "")?.name,
         href: `/tickets/${ticket.id}`,
       })),
       ...customerList.map((customer) => ({
         id: `customer:${customer.id}`,
-        type: "contact" as const,
+        type: "customer",
         title: customer.name,
         subtitle: customer.company ?? undefined,
         href: "/customers",
@@ -156,7 +163,10 @@ export function Workspace({
     [ticketList, customerList, lookups],
   );
 
-  const queue = counts(ticketList);
+  const navCounts = {
+    "/": inboxCount(ticketList, DEFAULT_INBOX_TAB),
+    "/customers": customerList.length,
+  };
 
   const data: WorkspaceData = {
     customers: customerList,
@@ -168,23 +178,22 @@ export function Workspace({
       const user = lookups.userById.get(id ?? "");
       return user?.displayName || user?.email || null;
     },
+    userId: userId ?? null,
+    navCounts,
     loading,
   };
 
   return (
-    <div className="flex h-screen overflow-hidden">
-      <Sidebar
-        workspace="Helpdesk"
-        email={signedInEmail}
-        pathname={pathname}
-        counts={{
-          "/": ticketList.filter(isOpen).length,
-          "/customers": customerList.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}
@@ -197,7 +206,7 @@ export function Workspace({
           },
           {
             id: "unassigned",
-            label: `Unassigned (${queue.unassigned})`,
+            label: `Unassigned open tickets (${inboxCount(ticketList, DEFAULT_INBOX_TAB, true)})`,
             run: () => router.push("/?filter=unassigned"),
           },
           {
@@ -206,9 +215,11 @@ export function Workspace({
             run: () => router.push("/customers"),
           },
         ]}
+        placeholder="Search tickets and customers…"
+        icons={{ ticket: <Inbox />, customer: <User /> }}
         onClose={() => setPaletteOpen(false)}
         onSelect={(item) => router.push(item.href)}
       />
-    </div>
+    </AppShell>
   );
 }

package/templates/helpdesk/app.ts

@@ -10,7 +10,7 @@ import {
 } from "@pylonsync/sdk";
 
 // ---------------------------------------------------------------------------
-// helpdesk — a support inbox for a small team: customers write in, agents triage
+// Frontdesk (the helpdesk template) — a support inbox for a small team: customers write in, agents triage
 // by priority and SLA, and every reply lands on a shared thread.
 //
 // The realtime hook: the queue subscribes to Ticket, so a new ticket appears at
@@ -132,7 +132,7 @@ const manifest = buildManifest({
   auth: auth(),
   fonts: [
     font({
-      family: "Inter",
+      family: "Public Sans",
       variable: "--font-sans",
       weights: ["400", "500", "600", "700"],
       subsets: ["latin"],

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

@@ -0,0 +1,28 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+
+/**
+ * The Frontdesk mark: a speech bubble with two lines of text, 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.5 2.5h9a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2H8l-3 2.5v-2.5H3.5a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2Z"
+          fill="currentColor"
+        />
+        <rect x="4.5" y="5.2" width="7" height="1.4" rx="0.7" fill="var(--primary)" />
+        <rect x="4.5" y="7.6" width="4.5" height="1.4" rx="0.7" fill="var(--primary)" />
+      </svg>
+    </span>
+  );
+}