@pylonsync/create-pylon 0.3.344 → 0.3.346

package/templates/projects/components/task-board.tsx

@@ -0,0 +1,109 @@
+import React, { useState } from "react";
+import { cn } from "@/lib/utils";
+import { TaskCard } from "@/components/task-card";
+import { duration, groupByStatus, type Task } from "@/lib/work";
+
+/**
+ * The task board.
+ *
+ * Presentational: it renders whatever tasks it\'s handed and reports a move
+ * through `onMove`. The container writes, the write syncs, and the new rows
+ * arrive back here — which is also how a teammate\'s move appears, so there is
+ * exactly one code path for "a task changed column".
+ */
+export function TaskBoard({
+  tasks,
+  assigneeName,
+  minutesFor,
+  onMove,
+  onOpen,
+}: {
+  tasks: Task[];
+  assigneeName: (id: string | null | undefined) => string | null;
+  minutesFor: (taskId: string) => number;
+  onMove: (taskId: string, status: string) => void;
+  onOpen: (taskId: string) => void;
+}) {
+  const [dragging, setDragging] = useState<string | null>(null);
+  const [over, setOver] = useState<string | null>(null);
+  const columns = groupByStatus(tasks);
+
+  return (
+    <div className="flex h-full gap-3 overflow-x-auto p-4">
+      {columns.map((column) => {
+        const isTarget = over === column.status.id;
+        const logged = column.tasks.reduce(
+          (sum, task) => sum + minutesFor(task.id),
+          0,
+        );
+        return (
+          <section
+            key={column.status.id}
+            onDragOver={(event) => {
+              // Preventing default is what marks this a valid drop target.
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "move";
+              if (over !== column.status.id) setOver(column.status.id);
+            }}
+            onDragLeave={(event) => {
+              // Ignore bubbling from children, or the highlight flickers.
+              if (event.currentTarget.contains(event.relatedTarget as Node)) return;
+              setOver((current) => (current === column.status.id ? null : current));
+            }}
+            onDrop={(event) => {
+              event.preventDefault();
+              const id = event.dataTransfer.getData("text/plain") || dragging;
+              setOver(null);
+              setDragging(null);
+              if (!id) return;
+              const task = tasks.find((t) => t.id === id);
+              // A drop back on the same column is a no-op, not a write.
+              if (!task || task.status === column.status.id) return;
+              onMove(id, column.status.id);
+            }}
+            className={cn(
+              "flex w-[268px] shrink-0 flex-col rounded-xl border transition-colors",
+              isTarget ? "border-ring/60 bg-surface-2/60" : "border-border bg-surface-1/50",
+            )}
+            aria-label={column.status.label}
+          >
+            <header className="flex items-center gap-2 px-3 py-2.5">
+              <h2 className="text-[12px] font-medium">{column.status.label}</h2>
+              <span className="tabular text-[11px] text-muted-foreground">
+                {column.tasks.length}
+              </span>
+              {logged > 0 ? (
+                <span className="tabular ml-auto text-[11px] text-muted-foreground">
+                  {duration(logged)}
+                </span>
+              ) : null}
+            </header>
+
+            <div className="flex min-h-24 flex-1 flex-col gap-2 overflow-y-auto px-2 pb-2">
+              {column.tasks.map((task) => (
+                <TaskCard
+                  key={task.id}
+                  task={task}
+                  assignee={assigneeName(task.assigneeId)}
+                  loggedMinutes={minutesFor(task.id)}
+                  dragging={dragging === task.id}
+                  onOpen={onOpen}
+                  onDragStart={setDragging}
+                  onDragEnd={() => {
+                    setDragging(null);
+                    setOver(null);
+                  }}
+                />
+              ))}
+              {column.tasks.length === 0 ? (
+                <p className="px-1 py-6 text-center text-[11px] text-muted-foreground">
+                  {isTarget ? "Drop here" : "Nothing here"}
+                </p>
+              ) : null}
+            </div>
+          </section>
+        );
+      })}
+    </div>
+  );
+}

package/templates/projects/components/task-card.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Avatar } from "@/components/avatar";
+import { duration, type Task } from "@/lib/work";
+
+/**
+ * One task on the board. Draggable, but never the source of truth for which
+ * column it sits in — the parent decides that from the synced row, so a
+ * teammate\'s move lands here through the same path as your own.
+ */
+export function TaskCard({
+  task,
+  assignee,
+  loggedMinutes,
+  onOpen,
+  onDragStart,
+  onDragEnd,
+  dragging,
+}: {
+  task: Task;
+  assignee?: string | null;
+  loggedMinutes: number;
+  onOpen: (id: string) => void;
+  onDragStart: (id: string) => void;
+  onDragEnd: () => void;
+  dragging?: boolean;
+}) {
+  const estimate = Number(task.estimateMinutes) || 0;
+  // Only flag an overrun — showing "3h / 8h" on every card is noise, but a task
+  // that has blown its estimate is worth seeing from the board.
+  const over = estimate > 0 && loggedMinutes > estimate;
+
+  return (
+    <article
+      draggable
+      onDragStart={(event) => {
+        // setData is required for Firefox to start a drag at all.
+        event.dataTransfer.setData("text/plain", task.id);
+        event.dataTransfer.effectAllowed = "move";
+        onDragStart(task.id);
+      }}
+      onDragEnd={onDragEnd}
+      onClick={() => onOpen(task.id)}
+      onKeyDown={(event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onOpen(task.id);
+        }
+      }}
+      role="button"
+      tabIndex={0}
+      aria-label={task.title}
+      className={cn(
+        "group cursor-pointer rounded-lg border border-border bg-card p-2.5 transition-all",
+        "hover:border-ring/40 focus-visible:border-ring",
+        dragging && "opacity-40",
+      )}
+    >
+      <p className="line-clamp-2 text-[13px] font-medium leading-snug">{task.title}</p>
+      <div className="mt-2.5 flex items-center justify-between gap-2">
+        {assignee ? <Avatar name={assignee} size="sm" /> : <span />}
+        {loggedMinutes > 0 ? (
+          <span
+            className={cn(
+              "tabular text-[11px]",
+              over ? "text-destructive" : "text-muted-foreground",
+            )}
+            title={estimate > 0 ? `Estimate ${duration(estimate)}` : undefined}
+          >
+            {duration(loggedMinutes)}
+            {over ? ` / ${duration(estimate)}` : ""}
+          </span>
+        ) : null}
+      </div>
+    </article>
+  );
+}

package/templates/projects/components/time-dialog.tsx

@@ -0,0 +1,114 @@
+import React, { useEffect, useState } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { duration, parseDuration } from "@/lib/work";
+
+/**
+ * Log time against a task.
+ *
+ * The field accepts however people write time — "90", "1.5h", "1h30", "45m".
+ * Rejecting "1h30" because it isn\'t "90" is the kind of friction that stops
+ * time being logged at all, which costs far more than a lenient parser.
+ */
+export function TimeDialog({
+  open,
+  taskTitle,
+  onOpenChange,
+  onLog,
+}: {
+  open: boolean;
+  taskTitle: string;
+  onOpenChange: (open: boolean) => void;
+  onLog: (minutes: number, note: string) => void | Promise<void>;
+}) {
+  const [value, setValue] = useState("");
+  const [note, setNote] = useState("");
+  const [busy, setBusy] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+    setValue("");
+    setNote("");
+    setBusy(false);
+  }, [open]);
+
+  const minutes = parseDuration(value);
+  const tooMuch = minutes !== null && Math.abs(minutes) > 1440;
+  const canSubmit = minutes !== null && minutes !== 0 && !tooMuch && !busy;
+
+  async function submit(event: React.FormEvent) {
+    event.preventDefault();
+    if (!canSubmit) return;
+    setBusy(true);
+    try {
+      await onLog(minutes as number, note.trim());
+      onOpenChange(false);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Log time</DialogTitle>
+        </DialogHeader>
+        <form onSubmit={submit} className="grid gap-4">
+          <p className="truncate text-[12px] text-muted-foreground">{taskTitle}</p>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="time-value">Time</Label>
+            <Input
+              id="time-value"
+              autoFocus
+              placeholder="1h30, 90, or 45m"
+              value={value}
+              onChange={(event) => setValue(event.target.value)}
+            />
+            {minutes !== null && !tooMuch ? (
+              <p className="text-[11px] text-muted-foreground">{duration(minutes)}</p>
+            ) : null}
+            {tooMuch ? (
+              <p className="text-[11px] text-destructive">
+                That\'s more than a day — check the value.
+              </p>
+            ) : null}
+            {minutes === null && value.trim() ? (
+              <p className="text-[11px] text-destructive">
+                Try 90, 1.5h, 1h30, or 45m.
+              </p>
+            ) : null}
+          </div>
+
+          <div className="space-y-1.5">
+            <Label htmlFor="time-note">Note</Label>
+            <Input
+              id="time-note"
+              placeholder="Optional"
+              value={note}
+              onChange={(event) => setNote(event.target.value)}
+            />
+          </div>
+
+          <DialogFooter>
+            <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={!canSubmit}>
+              {busy ? "Logging…" : "Log time"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/templates/projects/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/projects/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/projects/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/projects/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,
+};

package/templates/projects/components/ui/input.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Input({
+  className,
+  type,
+  ...props
+}: React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors",
+        "placeholder:text-muted-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        // Date/time inputs render a native picker indicator that ignores the
+        // text color; nudge it so it stays visible in dark mode.
+        "[&::-webkit-calendar-picker-indicator]:opacity-60 dark:[&::-webkit-calendar-picker-indicator]:invert",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };

package/templates/projects/components/ui/label.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Label({
+  className,
+  ...props
+}: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return (
+    <label
+      data-slot="label"
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };

package/templates/projects/components/ui/select.tsx

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * A styled native `<select>`.
+ *
+ * shadcn's Select is a Radix listbox; this deliberately isn't. A native select
+ * needs no extra dependency, is keyboard- and screen-reader-correct for free,
+ * and opens as the platform picker on mobile — which is what you want for the
+ * plain "pick one value" case that scaffolded forms are full of. Reach for
+ * `npx shadcn add select` when you need custom option rendering or search.
+ */
+function Select({
+  className,
+  children,
+  ...props
+}: React.SelectHTMLAttributes<HTMLSelectElement>) {
+  return (
+    <div className="relative">
+      <select
+        data-slot="select"
+        className={cn(
+          "flex h-9 w-full appearance-none rounded-md border border-input bg-transparent py-1 pl-3 pr-8 text-sm shadow-sm transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </select>
+      <ChevronDown className="pointer-events-none absolute right-2.5 top-1/2 size-4 -translate-y-1/2 opacity-50" />
+    </div>
+  );
+}
+
+export { Select };