@pylonsync/create-pylon 0.3.343 → 0.3.345

package/templates/helpdesk/components/sidebar.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { Link } from "@pylonsync/react";
+import { Command, Inbox, LogOut, Users } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/avatar";
+import { Kbd } from "@/components/kbd";
+
+export interface NavItem {
+  href: string;
+  label: string;
+  icon: React.ReactNode;
+  count?: number;
+}
+
+export const NAV: Array<Omit<NavItem, "count">> = [
+  { href: "/", label: "Inbox", icon: <Inbox /> },
+  { href: "/customers", label: "Customers", 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.
+ */
+export function Sidebar({
+  workspace,
+  email,
+  pathname,
+  counts,
+  onOpenCommand,
+  onSignOut,
+}: {
+  workspace: string;
+  email: string;
+  pathname: string;
+  counts?: Record<string, number>;
+  onOpenCommand: () => void;
+  onSignOut: () => void;
+}) {
+  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()}
+        </span>
+        <span className="truncate text-[13px] font-semibold">{workspace}</span>
+      </div>
+
+      <div className="px-2 pb-2">
+        <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",
+          )}
+        >
+          <Command className="size-3.5" />
+          <span className="flex-1 text-left">Search…</span>
+          <Kbd>⌘K</Kbd>
+        </button>
+      </div>
+
+      <nav className="flex-1 space-y-0.5 px-2" aria-label="Main">
+        {NAV.map((item) => {
+          const active =
+            item.href === "/" ? pathname === "/" : pathname.startsWith(item.href);
+          return (
+            <Link
+              key={item.href}
+              href={item.href}
+              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",
+                active
+                  ? "bg-surface-2 font-medium text-foreground"
+                  : "text-muted-foreground hover:bg-surface-2/60 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>
+              ) : 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>
+          <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"
+          >
+            <LogOut className="size-3.5" />
+          </button>
+        </div>
+      </div>
+    </aside>
+  );
+}

package/templates/helpdesk/components/sla-indicator.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { duration } from "@/lib/format";
+import { minutesToBreach, slaState, type Ticket } from "@/lib/tickets";
+
+/**
+ * How long is left to reply, or how long we're already late.
+ *
+ * Renders nothing once a ticket has been answered or closed — a queue where
+ * every row carries a badge is a queue where none of them mean anything.
+ */
+export function SlaIndicator({
+  ticket,
+  now,
+  className,
+}: {
+  ticket: Ticket;
+  /** Injectable so the value is deterministic in a test. */
+  now?: number;
+  className?: string;
+}) {
+  const state = slaState(ticket, now);
+  if (state === "none" || state === "met") return null;
+
+  const minutes = minutesToBreach(ticket, now);
+  if (minutes === null) return null;
+
+  const breached = state === "breached";
+  return (
+    <span
+      title={breached ? "First response overdue" : "First response due"}
+      className={cn(
+        "tabular inline-flex items-center gap-1 text-[11px] whitespace-nowrap",
+        breached ? "text-destructive" : "text-muted-foreground",
+        className,
+      )}
+    >
+      <span
+        className={cn(
+          "size-1.5 rounded-full",
+          breached ? "bg-destructive" : "bg-muted-foreground/60",
+        )}
+      />
+      {breached ? `${duration(minutes)} over` : `${duration(minutes)} left`}
+    </span>
+  );
+}

package/templates/helpdesk/components/thread.tsx

@@ -0,0 +1,143 @@
+import React, { useState } from "react";
+import { Lock } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/avatar";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { relativeTime } from "@/lib/format";
+
+export interface MessageRow {
+  id: string;
+  body: string;
+  fromCustomer?: boolean | null;
+  internal?: boolean | null;
+  authorId?: string | null;
+  createdAt?: string | null;
+}
+
+/**
+ * The conversation, oldest first, with the reply box pinned at the bottom.
+ *
+ * Internal notes are visually distinct because sending one to the customer by
+ * mistake is the expensive error in a helpdesk — the composer says which mode
+ * it's in, and the note keeps that marking in the thread forever.
+ */
+export function Thread({
+  messages,
+  authorName,
+  customerName,
+  now,
+  onSend,
+}: {
+  messages: MessageRow[];
+  authorName: (id: string | null | undefined) => string | null;
+  customerName: string | null;
+  now?: number;
+  onSend: (body: string, internal: boolean) => void | Promise<void>;
+}) {
+  const [body, setBody] = useState("");
+  const [internal, setInternal] = useState(false);
+  const [busy, setBusy] = useState(false);
+
+  const ordered = [...messages].sort((a, b) =>
+    (a.createdAt ?? "").localeCompare(b.createdAt ?? ""),
+  );
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    const text = body.trim();
+    if (!text || busy) return;
+    setBusy(true);
+    try {
+      await onSend(text, internal);
+      setBody("");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="flex min-h-0 flex-1 flex-col">
+      <div className="min-h-0 flex-1 space-y-4 overflow-y-auto px-6 py-5">
+        {ordered.length === 0 ? (
+          <p className="py-8 text-center text-[12px] text-muted-foreground">
+            No messages on this ticket yet.
+          </p>
+        ) : (
+          ordered.map((message) => {
+            const who = message.fromCustomer
+              ? customerName
+              : authorName(message.authorId);
+            return (
+              <article
+                key={message.id}
+                className={cn(
+                  "rounded-lg border p-3",
+                  message.internal
+                    ? "border-stage-proposal/30 bg-stage-proposal/5"
+                    : message.fromCustomer
+                      ? "border-border bg-surface-1"
+                      : "border-border bg-card",
+                )}
+              >
+                <div className="mb-1.5 flex items-center gap-2 text-[11px] text-muted-foreground">
+                  <Avatar name={who ?? "?"} size="sm" />
+                  <span className="font-medium text-foreground">{who ?? "Unknown"}</span>
+                  {message.internal ? (
+                    <span className="inline-flex items-center gap-1 text-stage-proposal">
+                      <Lock className="size-3" />
+                      Internal note
+                    </span>
+                  ) : null}
+                  <time
+                    className="ml-auto"
+                    dateTime={message.createdAt ?? undefined}
+                  >
+                    {relativeTime(message.createdAt, now)}
+                  </time>
+                </div>
+                <p className="whitespace-pre-wrap text-[13px] leading-6">
+                  {message.body}
+                </p>
+              </article>
+            );
+          })
+        )}
+      </div>
+
+      <form
+        onSubmit={submit}
+        className={cn(
+          "shrink-0 border-t p-3 transition-colors",
+          internal ? "border-stage-proposal/40 bg-stage-proposal/5" : "border-border",
+        )}
+      >
+        <Textarea
+          value={body}
+          rows={3}
+          placeholder={internal ? "Internal note — the customer won't see this…" : "Reply to the customer…"}
+          aria-label={internal ? "Internal note" : "Reply"}
+          onChange={(event) => setBody(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && (event.metaKey || event.ctrlKey)) submit(event);
+          }}
+          className="min-h-20 resize-none"
+        />
+        <div className="mt-2 flex items-center justify-between gap-2">
+          <label className="flex items-center gap-2 text-[12px] text-muted-foreground">
+            <input
+              type="checkbox"
+              checked={internal}
+              onChange={(event) => setInternal(event.target.checked)}
+              className="size-3.5 accent-[var(--stage-proposal)]"
+            />
+            Internal note
+          </label>
+          <Button type="submit" size="sm" disabled={!body.trim() || busy}>
+            {busy ? "Sending…" : internal ? "Add note" : "Send reply"}
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}

package/templates/helpdesk/components/ticket-list.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/avatar";
+import { PriorityBadge, StatusBadge } from "@/components/priority-badge";
+import { SlaIndicator } from "@/components/sla-indicator";
+import { relativeTime } from "@/lib/format";
+import { queueOrder, ticketNumber, type Ticket } from "@/lib/tickets";
+
+/**
+ * The queue. Rows are ordered by lib/tickets.queueOrder — breached first, then
+ * priority, then oldest — so the top of the list is genuinely the next thing to
+ * work on rather than just the newest arrival.
+ *
+ * Presentational: ordering is pure and tested, and selection is delegated.
+ */
+export function TicketList({
+  tickets,
+  customerName,
+  assigneeName,
+  selectedId,
+  now,
+  onSelect,
+}: {
+  tickets: Ticket[];
+  customerName: (id: string | null | undefined) => string | null;
+  assigneeName: (id: string | null | undefined) => string | null;
+  selectedId?: string | null;
+  now?: number;
+  onSelect: (id: string) => void;
+}) {
+  const ordered = queueOrder(tickets, now);
+
+  return (
+    <ul className="min-h-0 flex-1 overflow-y-auto">
+      {ordered.map((ticket) => {
+        const assignee = assigneeName(ticket.assigneeId);
+        return (
+          <li key={ticket.id}>
+            <button
+              type="button"
+              onClick={() => onSelect(ticket.id)}
+              aria-current={ticket.id === selectedId ? "true" : undefined}
+              className={cn(
+                "flex w-full flex-col gap-1 border-b border-border/60 px-4 py-2.5 text-left transition-colors",
+                ticket.id === selectedId ? "bg-surface-2" : "hover:bg-surface-1",
+              )}
+            >
+              <div className="flex items-center gap-2">
+                <span className="tabular shrink-0 text-[11px] text-muted-foreground">
+                  {ticketNumber(ticket.id, ticket.createdAt)}
+                </span>
+                <span className="min-w-0 flex-1 truncate text-[13px] font-medium">
+                  {ticket.subject}
+                </span>
+                <SlaIndicator ticket={ticket} now={now} />
+              </div>
+              <div className="flex items-center gap-2 text-[11px] text-muted-foreground">
+                <StatusBadge status={ticket.status} />
+                <PriorityBadge priority={ticket.priority} />
+                <span className="truncate">{customerName(ticket.customerId) ?? "—"}</span>
+                <span className="ml-auto flex shrink-0 items-center gap-1.5">
+                  {assignee ? (
+                    <Avatar name={assignee} size="sm" />
+                  ) : (
+                    <span className="text-muted-foreground">Unassigned</span>
+                  )}
+                  <time dateTime={ticket.createdAt ?? undefined}>
+                    {relativeTime(ticket.createdAt, now)}
+                  </time>
+                </span>
+              </div>
+            </button>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/templates/helpdesk/components/ui/badge.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-white",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <span
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

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

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground 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",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/templates/helpdesk/components/ui/card.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "rounded-xl border bg-card text-card-foreground shadow-sm",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col space-y-1.5 p-6", className)}
+      {...props}
+    />
+  );
+}
+
+function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function CardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("p-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+function CardFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center p-6 pt-0", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};

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

@@ -0,0 +1,110 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      "fixed inset-0 z-50 bg-black/50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className,
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <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",
+        "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,
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="absolute right-3 top-3 rounded-md p-1 text-muted-foreground opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring">
+        <X className="size-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+function DialogHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("flex flex-col gap-1.5 text-left", className)} {...props} />
+  );
+}
+
+function DialogFooter({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn("text-base font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};