@flaredev/cli 0.3.0 → 0.4.1

package/templates/app/components/dashboard/fields/relation-field.tsx

@@ -33,7 +33,29 @@ export function RelationField({ id, value, onChange, invalid, disabled, required
   const [query, setQuery] = useState("");
   const [options, setOptions] = useState<Option[]>([]);
   const [loading, setLoading] = useState(false);
-  const [title, setTitle] = useState(relation.initialTitle ?? "");
+  // The title is remembered against the id it belongs to, so a value that changes
+  // underneath the field doesn't keep the name of the record it used to hold.
+  const [known, setKnown] = useState({ id: value, title: relation.initialTitle ?? "" });
+  const title = known.id === value ? known.title : "";
+
+  // A form opened from a table row is given the id but not the name behind it. Looking it
+  // up here means the field reads correctly wherever the form was rendered.
+  useEffect(() => {
+    if (!value || title) return;
+    const controller = new AbortController();
+    void (async () => {
+      try {
+        const response = await fetch(`/api/${relation.slug}/${value}`, { signal: controller.signal, credentials: "same-origin" });
+        if (!response.ok) return;
+        const record = (await response.json()) as Record<string, unknown>;
+        const found = record[relation.titleField];
+        if (found) setKnown({ id: value, title: String(found) });
+      } catch {
+        // Leave the id showing; the field still works.
+      }
+    })();
+    return () => controller.abort();
+  }, [value, title, relation.slug, relation.titleField]);
 
   useEffect(() => {
     if (!open) return;
@@ -99,7 +121,7 @@ export function RelationField({ id, value, onChange, invalid, disabled, required
                     value={option.id}
                     onSelect={() => {
                       onChange(option.id);
-                      setTitle(option.title);
+                      setKnown({ id: option.id, title: option.title });
                       setOpen(false);
                     }}
                   >
@@ -121,7 +143,7 @@ export function RelationField({ id, value, onChange, invalid, disabled, required
           disabled={disabled}
           onClick={() => {
             onChange("");
-            setTitle("");
+            setKnown({ id: "", title: "" });
           }}
         >
           <XIcon />

package/templates/app/components/dashboard/import-dialog.tsx

@@ -10,7 +10,7 @@ import {
   storedFields,
   type EnumField,
   type MultiSelectField,
-  type Resource,
+  type ClientResource,
   type StoredField,
 } from "@flaredev/core";
 import { importRecordsAction } from "@/app/dashboard/import-actions";
@@ -26,11 +26,48 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Field, FieldLabel } from "@/components/ui/field";
-import { Input } from "@/components/ui/input";
 import { Progress } from "@/components/ui/progress";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { Spinner } from "@/components/ui/spinner";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { toCsv } from "@/lib/csv";
+import { Dropzone } from "./dropzone";
+import { downloadCsv } from "./table-selection";
+
+/** What a column looks like in the downloadable template. */
+function exampleFor(key: string, def: StoredField & { label: string }): string {
+  switch (def.kind) {
+    case "string":
+      if (def.format === "email") return "ada@example.com";
+      if (def.format === "tel") return "+256772123456";
+      if (def.format === "url") return "https://example.com";
+      if (def.format === "domain") return "example.com";
+      if (def.format === "country") return "UG";
+      if (def.format === "color") return "#f2541d";
+      if (def.format === "slug") return "my-first-" + key.toLowerCase();
+      return def.label;
+    case "text":
+      return "A longer note about this record.";
+    case "int":
+      return "42";
+    case "float":
+      return "9.99";
+    case "boolean":
+      return "true";
+    case "date":
+      return new Date().toISOString().slice(0, 10);
+    case "datetime":
+      return new Date().toISOString();
+    case "enum":
+      return String((def as EnumField).options[0] ?? "");
+    case "multiselect":
+      return ((def as MultiSelectField).options.slice(0, 2) as string[]).join("; ");
+    case "belongsTo":
+      return "id of an existing " + (def as { target: string }).target;
+    default:
+      return "";
+  }
+}
 
 /** Sentinel for "don't import this field": a SelectItem can't carry an empty value. */
 const SKIP = "__skip__";
@@ -165,7 +202,7 @@ function guessMapping(fields: MappedField[], headers: string[]): Record<string,
  * schemas and again on the server, and sent in batches so a long file reports progress
  * and never depends on one very long request.
  */
-export function ImportDialog({ resource }: { resource: Resource }) {
+export function ImportDialog({ resource }: { resource: ClientResource }) {
   const router = useRouter();
   const validators = useMemo(() => createValidators(resource), [resource]);
   // Uploads need a signed URL per file, which a CSV cell can't stand in for.
@@ -186,6 +223,13 @@ export function ImportDialog({ resource }: { resource: Resource }) {
   const unmapped = fields.filter(([key, def]) => needsColumn(def) && (mapping[key] === undefined || mapping[key] === SKIP));
   const ready = rows.length > 0 && mapped.length > 0 && unmapped.length === 0;
 
+  /** A starter file: the header this import wants, and one row of what each column holds. */
+  function downloadTemplate() {
+    const columns = fields.map(([key, def]) => ({ key, label: def.label }));
+    const example = Object.fromEntries(fields.map(([key, def]) => [key, exampleFor(key, def)]));
+    downloadCsv(`${resource.slug}-template.csv`, toCsv([example], columns));
+  }
+
   function reset() {
     setFileName("");
     setHeaders([]);
@@ -197,8 +241,8 @@ export function ImportDialog({ resource }: { resource: Resource }) {
     setSummary(null);
   }
 
-  async function onFile(event: ChangeEvent<HTMLInputElement>) {
-    const file = event.target.files?.[0];
+  async function onFile(files: File[]) {
+    const file = files[0];
     if (!file) return;
     reset();
 
@@ -319,10 +363,19 @@ export function ImportDialog({ resource }: { resource: Resource }) {
         </DialogHeader>
 
         <div className="grid gap-6">
-          <Field data-invalid={fileError ? true : undefined}>
-            <FieldLabel htmlFor="import-file">CSV file</FieldLabel>
-            <Input id="import-file" type="file" accept=".csv,text/csv" disabled={running} onChange={onFile} />
-          </Field>
+          <div className="flex flex-col gap-2">
+            <Dropzone
+              onFiles={onFile}
+              accept=".csv,text/csv"
+              disabled={running}
+              label={fileName ? fileName : "Drop a CSV here"}
+              hint={fileName ? `${rows.length.toLocaleString()} rows ready to map` : "One row per " + resource.label.toLowerCase() + ", with a header row on top"}
+            />
+            <Button type="button" variant="link" size="sm" className="h-auto w-fit p-0" onClick={downloadTemplate}>
+              <DownloadIcon data-icon="inline-start" />
+              Download a template with an example row
+            </Button>
+          </div>
 
           {fileError && (
             <Alert variant="destructive">

package/templates/app/components/dashboard/inline-cell.tsx

@@ -0,0 +1,165 @@
+"use client";
+
+import { useEffect, useRef, useState, useTransition } from "react";
+import { useRouter } from "next/navigation";
+import { CheckIcon, ChevronDownIcon, PencilIcon, XIcon } from "lucide-react";
+import { toast } from "sonner";
+import { optionLabel, type StoredField } from "@flaredev/core";
+import { updateRecordAction } from "@/app/dashboard/actions";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Spinner } from "@/components/ui/spinner";
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+interface Props {
+  resourceName: string;
+  id: string;
+  fieldKey: string;
+  def: StoredField & { label: string };
+  value: unknown;
+  /** What the cell shows when it isn't being edited. */
+  children: React.ReactNode;
+}
+
+const NONE = "__none__";
+
+/**
+ * Edit one value without leaving the table.
+ *
+ * For the small changes — a status, a flag, a number — opening a form to change one
+ * field and closing it again is most of the work. Anything with a picker, an upload or
+ * a relation still goes through the form, where there's room to explain itself.
+ */
+export function InlineCell({ resourceName, id, fieldKey, def, value, children }: Props) {
+  const router = useRouter();
+  const [editing, setEditing] = useState(false);
+  const [draft, setDraft] = useState("");
+  const [pending, startTransition] = useTransition();
+  const input = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (editing) input.current?.focus();
+  }, [editing]);
+
+  const save = (next: unknown) => {
+    setEditing(false);
+    if (next === value || (next === null && value === null)) return;
+    startTransition(async () => {
+      const result = await updateRecordAction(resourceName, id, { [fieldKey]: next });
+      if (!result.ok) {
+        toast.error(result.issues?.[0]?.message ?? result.error);
+        return;
+      }
+      toast.success(`${def.label} saved.`);
+      router.refresh();
+    });
+  };
+
+  if (pending) {
+    return (
+      <span className="inline-flex items-center gap-2 text-muted-foreground">
+        <Spinner className="size-3.5" />
+        {children}
+      </span>
+    );
+  }
+
+  // A switch and a select are one click either way, so they're always live.
+  if (def.kind === "boolean") {
+    return (
+      <Switch
+        checked={value === true}
+        onCheckedChange={(checked) => save(checked)}
+        aria-label={`${def.label} for this record`}
+        className="data-[state=unchecked]:bg-muted-foreground/30"
+      />
+    );
+  }
+
+  if (def.kind === "enum") {
+    // The badge stays until it's clicked: a row of grey dropdowns loses the colour that
+    // makes a status column readable at a glance.
+    if (!editing) {
+      return (
+        <button
+          type="button"
+          onClick={() => setEditing(true)}
+          className="group/cell inline-flex items-center gap-1 rounded px-0.5 focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary"
+          aria-label={`Change ${def.label.toLowerCase()}`}
+        >
+          {children}
+          <ChevronDownIcon className="size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/cell:opacity-100" aria-hidden="true" />
+        </button>
+      );
+    }
+    return (
+      <Select
+        defaultOpen
+        value={typeof value === "string" ? value : NONE}
+        onValueChange={(next) => save(next === NONE ? null : next)}
+        onOpenChange={(open) => {
+          if (!open) setEditing(false);
+        }}
+      >
+        <SelectTrigger size="sm" className="h-7 w-auto px-1.5" aria-label={def.label}>
+          <SelectValue placeholder="—" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup>
+            {!def.required && <SelectItem value={NONE}>—</SelectItem>}
+            {def.options.map((option) => (
+              <SelectItem key={option} value={option}>
+                {optionLabel(def, option)}
+              </SelectItem>
+            ))}
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+    );
+  }
+
+  if (editing) {
+    const numeric = def.kind === "int" || def.kind === "float";
+    return (
+      <span className="flex items-center gap-1">
+        <Input
+          ref={input}
+          value={draft}
+          onChange={(event) => setDraft(event.target.value)}
+          type={numeric ? "number" : "text"}
+          step={def.kind === "float" ? "any" : undefined}
+          className="h-7 w-full min-w-24 px-1.5"
+          aria-label={def.label}
+          onKeyDown={(event) => {
+            if (event.key === "Enter") save(numeric ? (draft === "" ? null : Number(draft)) : draft);
+            if (event.key === "Escape") setEditing(false);
+          }}
+          onBlur={() => save(numeric ? (draft === "" ? null : Number(draft)) : draft)}
+        />
+        <Button variant="ghost" size="icon" className="size-6" aria-label="Save" onMouseDown={(event) => event.preventDefault()}>
+          <CheckIcon />
+        </Button>
+        <Button variant="ghost" size="icon" className="size-6" aria-label="Cancel" onMouseDown={(event) => { event.preventDefault(); setEditing(false); }}>
+          <XIcon />
+        </Button>
+      </span>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={() => {
+        setDraft(value === null || value === undefined ? "" : String(value));
+        setEditing(true);
+      }}
+      className={cn("group/cell inline-flex max-w-full items-center gap-1.5 rounded px-1 py-0.5 text-left hover:bg-muted", "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary")}
+      aria-label={`Edit ${def.label.toLowerCase()}`}
+    >
+      <span className="truncate">{children}</span>
+      <PencilIcon className="size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/cell:opacity-100" aria-hidden="true" />
+    </button>
+  );
+}

package/templates/app/components/dashboard/local-time.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * A timestamp in the reader's own timezone.
+ *
+ * Pages render on a Worker, where the clock is UTC, so a date formatted on the server is
+ * in the wrong timezone for everyone. The server's version is rendered first (so the
+ * markup isn't empty and search engines see something), then the browser replaces it
+ * with its own once it's running.
+ */
+export function LocalTime({
+  value,
+  dateStyle = "medium",
+  timeStyle = "short",
+  className,
+}: {
+  /** Milliseconds, an ISO string, or a Date. */
+  value: number | string | Date | null | undefined;
+  dateStyle?: Intl.DateTimeFormatOptions["dateStyle"];
+  timeStyle?: Intl.DateTimeFormatOptions["timeStyle"];
+  className?: string;
+}) {
+  const date = value === null || value === undefined ? null : value instanceof Date ? value : new Date(value);
+  const utc = date ? new Intl.DateTimeFormat("en-GB", { dateStyle, timeStyle, timeZone: "UTC" }).format(date) : "—";
+  const [text, setText] = useState(utc);
+
+  useEffect(() => {
+    if (!date) return;
+    setText(new Intl.DateTimeFormat(undefined, { dateStyle, timeStyle }).format(date));
+  }, [date?.getTime(), dateStyle, timeStyle]);
+
+  if (!date) return <span className={className}>—</span>;
+  return (
+    <time dateTime={date.toISOString()} title={date.toISOString()} className={className} suppressHydrationWarning>
+      {text}
+    </time>
+  );
+}
+
+/** "3 minutes ago", "yesterday", falling back to a date once it's a week old. */
+export function RelativeTime({ value, className }: { value: number | string | Date | null | undefined; className?: string }) {
+  const date = value === null || value === undefined ? null : value instanceof Date ? value : new Date(value);
+  const [text, setText] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!date) return;
+    const format = () => {
+      const seconds = Math.round((date.getTime() - Date.now()) / 1000);
+      const relative = new Intl.RelativeTimeFormat(undefined, { numeric: "auto" });
+      const units: [Intl.RelativeTimeFormatUnit, number][] = [
+        ["second", 60],
+        ["minute", 60],
+        ["hour", 24],
+        ["day", 7],
+      ];
+      let value = seconds;
+      for (const [unit, size] of units) {
+        if (Math.abs(value) < size) return relative.format(Math.round(value), unit);
+        value /= size;
+      }
+      return new Intl.DateTimeFormat(undefined, { dateStyle: "medium" }).format(date);
+    };
+    setText(format());
+    // Re-read every half minute, so "just now" doesn't stay "just now" all afternoon.
+    const timer = setInterval(() => setText(format()), 30_000);
+    return () => clearInterval(timer);
+  }, [date?.getTime()]);
+
+  if (!date) return <span className={className}>—</span>;
+  return (
+    <time dateTime={date.toISOString()} title={date.toISOString()} className={className} suppressHydrationWarning>
+      {text ?? new Intl.DateTimeFormat("en-GB", { dateStyle: "medium", timeZone: "UTC" }).format(date)}
+    </time>
+  );
+}

package/templates/app/components/dashboard/query.ts

@@ -19,7 +19,9 @@ export function hrefWith(path: string, current: URLSearchParams, changes: Record
     if (value === null || value === "") next.delete(key);
     else next.set(key, value);
   }
+  // A cursor belongs to the query that produced it, so changing anything else drops it.
   if (!("page" in changes)) next.delete("page");
+  if (!("cursor" in changes)) next.delete("cursor");
   const query = next.toString();
   return query ? `${path}?${query}` : path;
 }

package/templates/app/components/dashboard/record-actions.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { PencilIcon, Trash2Icon } from "lucide-react";
+import { toast } from "sonner";
+import type { ClientResource } from "@flaredev/core";
+import { deleteRecordAction } from "@/app/dashboard/actions";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Spinner } from "@/components/ui/spinner";
+import { ResourceFormDialog, type FormRelations } from "./resource-form-dialog";
+
+interface Props {
+  resource: ClientResource;
+  id: string;
+  record: Record<string, unknown>;
+  relations: FormRelations;
+  listHref: string;
+  editHref: string;
+  canUpdate: boolean;
+  canDelete: boolean;
+  /** Whether editing opens a dialog (site.dashboard.forms) or goes to the form page. */
+  modalForms: boolean;
+}
+
+/** Edit and delete, at the top of a record's own page. Deleting goes back to the list. */
+export function RecordActions({ resource, id, record, relations, listHref, editHref, canUpdate, canDelete, modalForms }: Props) {
+  const router = useRouter();
+  const [editing, setEditing] = useState(false);
+  const [confirming, setConfirming] = useState(false);
+  const [pending, startTransition] = useTransition();
+
+  const remove = () => {
+    startTransition(async () => {
+      const result = await deleteRecordAction(resource.name, id);
+      if (!result.ok) {
+        toast.error(result.error);
+        return;
+      }
+      toast.success(`${resource.label} deleted.`);
+      // The record this page is about is gone, so the list is the only place left to be.
+      router.push(listHref);
+      router.refresh();
+    });
+  };
+
+  return (
+    <>
+      {canUpdate &&
+        (modalForms ? (
+          <Button variant="outline" onClick={() => setEditing(true)}>
+            <PencilIcon data-icon="inline-start" />
+            Edit
+          </Button>
+        ) : (
+          <Button variant="outline" asChild>
+            <Link href={editHref}>
+              <PencilIcon data-icon="inline-start" />
+              Edit
+            </Link>
+          </Button>
+        ))}
+      {canDelete && (
+        <Button variant="outline" className="text-destructive hover:text-destructive" onClick={() => setConfirming(true)}>
+          <Trash2Icon data-icon="inline-start" />
+          Delete
+        </Button>
+      )}
+
+      {canUpdate && modalForms && (
+        <ResourceFormDialog
+          resource={resource}
+          relations={relations}
+          listHref={listHref}
+          mode="edit"
+          id={id}
+          record={record}
+          open={editing}
+          onOpenChange={(open) => {
+            setEditing(open);
+            if (!open) router.refresh();
+          }}
+        />
+      )}
+
+      <AlertDialog open={confirming} onOpenChange={setConfirming}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Delete this {resource.label.toLowerCase()}?</AlertDialogTitle>
+            <AlertDialogDescription>This can&apos;t be undone. Anything that belongs to it may be deleted too.</AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>Keep it</AlertDialogCancel>
+            <Button variant="destructive" onClick={remove} disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              Delete
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+}