@pylonsync/create-pylon 0.3.343 → 0.3.345

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

@@ -0,0 +1,164 @@
+"use client";
+
+import React from "react";
+import { Link, callFn, useRouter } from "@pylonsync/react";
+import { ArrowLeft } 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 { SlaIndicator } from "@/components/sla-indicator";
+import { Avatar } from "@/components/avatar";
+import { relativeTime } from "@/lib/format";
+import { PRIORITIES, STATUSES, ticketNumber } from "@/lib/tickets";
+import { Workspace } from "../../workspace";
+
+export function TicketView({
+  email,
+  ticketId,
+}: {
+  email: string;
+  ticketId: string;
+}) {
+  const router = useRouter();
+
+  return (
+    <Workspace email={email} pathname="/">
+      {(data) => {
+        const ticket = data.tickets.find((t) => t.id === ticketId);
+
+        if (!ticket) {
+          return (
+            <>
+              <PageHeader title="Ticket" />
+              <EmptyState
+                title={data.loading ? "Loading…" : "Ticket not found"}
+                description={
+                  data.loading
+                    ? undefined
+                    : "It may have been deleted, or the link is wrong."
+                }
+                action={
+                  data.loading ? undefined : (
+                    <Button size="sm" variant="secondary" asChild>
+                      <Link href="/">Back to inbox</Link>
+                    </Button>
+                  )
+                }
+              />
+            </>
+          );
+        }
+
+        const customer = data.customers.find((c) => c.id === ticket.customerId);
+        const messages = data.messages.filter((m) => m.ticketId === ticket.id);
+
+        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,
+                    })
+                  }
+                >
+                  {STATUSES.map((s) => (
+                    <option key={s.id} value={s.id}>
+                      {s.label}
+                    </option>
+                  ))}
+                </Select>
+              </div>
+            </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="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,
+                    })
+                  }
+                >
+                  <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 })
+              }
+            />
+          </>
+        );
+      }}
+    </Workspace>
+  );
+}

package/templates/helpdesk/app/workspace.tsx

@@ -0,0 +1,210 @@
+"use client";
+
+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 { CommandPalette } from "@/components/command-palette";
+import type { SearchItem } from "@/lib/search";
+import { counts, isOpen } from "@/lib/tickets";
+
+export interface CustomerRow {
+  id: string;
+  name: string;
+  email: string;
+  company?: string | null;
+  createdAt?: string | null;
+}
+export interface TicketRow {
+  id: string;
+  subject: string;
+  status: string;
+  priority: string;
+  customerId?: string | null;
+  assigneeId?: string | null;
+  firstRespondedAt?: string | null;
+  createdAt?: string | null;
+  updatedAt?: string | null;
+}
+export interface MessageRow {
+  id: string;
+  ticketId: string;
+  body: string;
+  fromCustomer?: boolean | null;
+  internal?: boolean | null;
+  authorId?: string | null;
+  createdAt?: string | null;
+}
+export interface UserRow {
+  id: string;
+  email: string;
+  displayName?: string | null;
+}
+
+export interface WorkspaceData {
+  customers: CustomerRow[];
+  tickets: TicketRow[];
+  messages: MessageRow[];
+  agents: UserRow[];
+  customerName: (id: string | null | undefined) => string | null;
+  agentName: (id: string | null | undefined) => string | null;
+  loading: boolean;
+}
+
+/**
+ * The app shell, and the ONLY place that touches `db`.
+ *
+ * Every view below receives plain data through the render prop and reports
+ * changes through callbacks, which is what lets the components in `components/`
+ * render from fixtures in a test with nothing mocked.
+ *
+ * Each `db.useQuery` is live: a ticket another agent assigns, or a reply they
+ * send, arrives here and re-renders the queue. Your own writes take the same
+ * path, so there's one behaviour to reason about rather than two.
+ */
+export function Workspace({
+  email,
+  pathname,
+  children,
+}: {
+  email: string;
+  pathname: string;
+  children: (data: WorkspaceData) => React.ReactNode;
+}) {
+  const router = useRouter();
+  const { signOut } = useAuth();
+  const { data: tickets, loading } = db.useQuery<TicketRow>("Ticket");
+  const { data: customers } = db.useQuery<CustomerRow>("Customer");
+  const { data: messages } = db.useQuery<MessageRow>("Message");
+  const { data: users } = db.useQuery<UserRow>("User");
+
+  const [paletteOpen, setPaletteOpen] = useState(false);
+  const seeded = useRef(false);
+
+  const ticketList = tickets ?? [];
+  const customerList = customers ?? [];
+  const agentList = users ?? [];
+
+  // A brand-new helpdesk gets a realistic queue once, so the inbox never opens
+  // empty. `seedWorkspace` no-ops when anything exists; the ref stops a
+  // re-render from firing a second call mid-flight.
+  useEffect(() => {
+    if (loading || seeded.current) return;
+    if (ticketList.length > 0) {
+      seeded.current = true;
+      return;
+    }
+    seeded.current = true;
+    callFn("seedWorkspace", {}).catch(() => {
+      // A failed seed leaves an empty inbox, which is usable — the queue has an
+      // empty state that offers to open the first ticket.
+      seeded.current = false;
+    });
+  }, [loading, ticketList.length]);
+
+  useEffect(() => {
+    function onKey(event: KeyboardEvent) {
+      const target = event.target as HTMLElement | null;
+      const typing =
+        !!target &&
+        (target.tagName === "INPUT" ||
+          target.tagName === "TEXTAREA" ||
+          target.isContentEditable);
+      if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
+        event.preventDefault();
+        setPaletteOpen((open) => !open);
+      } else if (event.key === "/" && !typing) {
+        event.preventDefault();
+        setPaletteOpen(true);
+      }
+    }
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+
+  const lookups = useMemo(() => {
+    const customerById = new Map(customerList.map((c) => [c.id, c] as const));
+    const userById = new Map(agentList.map((u) => [u.id, u] as const));
+    return { customerById, userById };
+  }, [customerList, agentList]);
+
+  const searchIndex = useMemo<SearchItem[]>(
+    () => [
+      ...ticketList.map((ticket) => ({
+        id: `ticket:${ticket.id}`,
+        type: "deal" as const,
+        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,
+        title: customer.name,
+        subtitle: customer.company ?? undefined,
+        href: "/customers",
+        keywords: customer.email,
+      })),
+    ],
+    [ticketList, customerList, lookups],
+  );
+
+  const queue = counts(ticketList);
+
+  const data: WorkspaceData = {
+    customers: customerList,
+    tickets: ticketList,
+    messages: messages ?? [],
+    agents: agentList,
+    customerName: (id) => lookups.customerById.get(id ?? "")?.name ?? null,
+    agentName: (id) => {
+      const user = lookups.userById.get(id ?? "");
+      return user?.displayName || user?.email || null;
+    },
+    loading,
+  };
+
+  return (
+    <div className="flex h-screen overflow-hidden">
+      <Sidebar
+        workspace="Helpdesk"
+        email={email}
+        pathname={pathname}
+        counts={{
+          "/": ticketList.filter(isOpen).length,
+          "/customers": customerList.length,
+        }}
+        onOpenCommand={() => setPaletteOpen(true)}
+        onSignOut={async () => {
+          await signOut();
+          window.location.assign("/login");
+        }}
+      />
+      <main className="flex min-w-0 flex-1 flex-col">{children(data)}</main>
+
+      <CommandPalette
+        open={paletteOpen}
+        items={searchIndex}
+        actions={[
+          {
+            id: "new-ticket",
+            label: "New ticket",
+            run: () => router.push("/?new=ticket"),
+          },
+          {
+            id: "unassigned",
+            label: `Unassigned (${queue.unassigned})`,
+            run: () => router.push("/?filter=unassigned"),
+          },
+          {
+            id: "go-customers",
+            label: "Go to Customers",
+            run: () => router.push("/customers"),
+          },
+        ]}
+        onClose={() => setPaletteOpen(false)}
+        onSelect={(item) => router.push(item.href)}
+      />
+    </div>
+  );
+}

package/templates/helpdesk/app.ts

@@ -0,0 +1,142 @@
+import {
+  entity,
+  field,
+  policy,
+  auth,
+  buildManifest,
+  discoverAppRoutes,
+  font,
+} from "@pylonsync/sdk";
+
+// ---------------------------------------------------------------------------
+// helpdesk — 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
+// the top of everyone's inbox as it arrives, and an assignment shows up before
+// two agents start the same reply.
+//
+//   • Customer — the person who wrote in. Holds email, so never public.
+//   • Ticket   — subject, status, priority, assignee. The queue.
+//   • Message  — one entry on a thread; `internal` marks an agent-only note.
+//   • User     — an agent (email/password).
+//
+// TRUST MODEL: an internal tool for ONE support team. Every entity is readable
+// and writable by any SIGNED-IN user and by nobody else. There is no customer
+// portal here — adding one means a separate, narrower policy scoped to the
+// customer's own tickets, NOT loosening these.
+// ---------------------------------------------------------------------------
+
+const TEAM = "auth.userId != null";
+
+const Customer = entity(
+  "Customer",
+  {
+    name: field.string(),
+    email: field.string(),
+    company: field.string().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_email", fields: ["email"], unique: false }] },
+);
+
+const Ticket = entity(
+  "Ticket",
+  {
+    subject: field.string(),
+    // "open" | "pending" | "solved" | "closed" — see STATUSES in lib/tickets.ts.
+    status: field.string().default("open"),
+    // "urgent" | "high" | "normal" | "low" — sets the first-response window.
+    priority: field.string().default("normal"),
+    customerId: field.id("Customer").optional(),
+    assigneeId: field.id("User").optional(),
+    // When an agent first replied. Null means the customer is still waiting,
+    // which is what the SLA state is computed from.
+    firstRespondedAt: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+    updatedAt: field.datetime().defaultNow(),
+  },
+  {
+    indexes: [
+      { name: "by_status", fields: ["status"], unique: false },
+      { name: "by_assignee", fields: ["assigneeId"], unique: false },
+    ],
+  },
+);
+
+const Message = entity(
+  "Message",
+  {
+    ticketId: field.id("Ticket"),
+    body: field.string(),
+    // True when the customer wrote it rather than an agent.
+    fromCustomer: field.boolean().default(false),
+    // An internal note stays with the team if you later add a customer portal.
+    internal: field.boolean().default(false),
+    authorId: field.id("User").readonly().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_ticket", fields: ["ticketId"], unique: false }] },
+);
+
+const User = entity(
+  "User",
+  {
+    email: field.string(),
+    displayName: field.string().optional(),
+    passwordHash: field.string().serverOnly().optional(),
+    avatarColor: field.string().optional(),
+    emailVerified: field.datetime().optional(),
+    createdAt: field.datetime().defaultNow(),
+  },
+  { indexes: [{ name: "by_email", fields: ["email"], unique: true }] },
+);
+
+const teamPolicy = (name: string, entityName: string) =>
+  policy({
+    name,
+    entity: entityName,
+    allowRead: TEAM,
+    allowInsert: TEAM,
+    allowUpdate: TEAM,
+    allowDelete: TEAM,
+  });
+
+const userPolicy = policy({
+  name: "user_team_read",
+  entity: "User",
+  allowRead: TEAM,
+  allowInsert: "false",
+  allowUpdate: "false",
+  allowDelete: "false",
+});
+
+const manifest = buildManifest({
+  name: "__APP_NAME__",
+  version: "0.1.0",
+  entities: [Customer, Ticket, Message, User],
+  queries: [],
+  actions: [],
+  policies: [
+    teamPolicy("customer_team", "Customer"),
+    teamPolicy("ticket_team", "Ticket"),
+    teamPolicy("message_team", "Message"),
+    userPolicy,
+  ],
+  auth: auth(),
+  fonts: [
+    font({
+      family: "Inter",
+      variable: "--font-sans",
+      weights: ["400", "500", "600", "700"],
+      subsets: ["latin"],
+      display: "swap",
+      preload: true,
+    }),
+  ],
+  routes: await discoverAppRoutes(),
+});
+
+console.log(JSON.stringify(manifest, null, 2));
+
+export default manifest;

package/templates/helpdesk/bunfig

@@ -0,0 +1,4 @@
+[test]
+# Register a DOM (happy-dom) before any test runs so React component tests can
+# render under `pylon test` / `bun test`. Harmless for pure-logic tests.
+preload = ["./tests/setup.ts"]

package/templates/helpdesk/components/avatar.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { accentIndex, initials } from "@/lib/format";
+
+// Deterministic accent per record — the same company keeps its colour across
+// sessions and machines without storing one. Hues are muted so a dense list
+// doesn't turn into confetti.
+const ACCENTS = [
+  "bg-indigo-500/15 text-indigo-500 dark:text-indigo-300",
+  "bg-emerald-500/15 text-emerald-600 dark:text-emerald-300",
+  "bg-amber-500/15 text-amber-600 dark:text-amber-300",
+  "bg-rose-500/15 text-rose-500 dark:text-rose-300",
+  "bg-sky-500/15 text-sky-600 dark:text-sky-300",
+  "bg-violet-500/15 text-violet-500 dark:text-violet-300",
+];
+
+export function Avatar({
+  name,
+  size = "md",
+  className,
+}: {
+  name: string | null | undefined;
+  size?: "sm" | "md";
+  className?: string;
+}) {
+  const label = initials(name);
+  return (
+    <span
+      aria-hidden="true"
+      className={cn(
+        "inline-flex shrink-0 select-none items-center justify-center rounded-full font-medium",
+        size === "sm" ? "size-5 text-[9px]" : "size-6 text-[10px]",
+        ACCENTS[accentIndex(name ?? "?", ACCENTS.length)],
+        className,
+      )}
+    >
+      {label}
+    </span>
+  );
+}