create-nevela 0.7.1 → 0.9.1

package/template/web/components/dashboard/resource-action.tsx

@@ -0,0 +1,281 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import {
+  ArchiveIcon,
+  BanIcon,
+  BellIcon,
+  CheckIcon,
+  CopyIcon,
+  DownloadIcon,
+  FlagIcon,
+  LockIcon,
+  MailIcon,
+  MegaphoneIcon,
+  PauseIcon,
+  PlayIcon,
+  RefreshCwIcon,
+  SendIcon,
+  StarIcon,
+  UnlockIcon,
+  UploadIcon,
+  XIcon,
+  ZapIcon,
+  type LucideIcon,
+} from "lucide-react";
+import { toast } from "sonner";
+import { field as build, type StoredField } from "@flaredev/core";
+import { runResourceAction } from "@/app/dashboard/actions";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Field, FieldError, FieldLabel } from "@/components/ui/field";
+import { Sheet, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "@/components/ui/sheet";
+import { Spinner } from "@/components/ui/spinner";
+import type { ActionField, ResourceAction } from "@/lib/extras";
+import { FieldWidget } from "./fields/field-widget";
+
+const ICONS: Record<string, LucideIcon> = {
+  archive: ArchiveIcon,
+  ban: BanIcon,
+  bell: BellIcon,
+  check: CheckIcon,
+  copy: CopyIcon,
+  download: DownloadIcon,
+  flag: FlagIcon,
+  lock: LockIcon,
+  mail: MailIcon,
+  megaphone: MegaphoneIcon,
+  pause: PauseIcon,
+  play: PlayIcon,
+  refresh: RefreshCwIcon,
+  send: SendIcon,
+  star: StarIcon,
+  unlock: UnlockIcon,
+  upload: UploadIcon,
+  x: XIcon,
+};
+
+/** The icon an action names, or a general one for "do something". */
+export function actionIcon(name: string | undefined): LucideIcon {
+  return (name && ICONS[name]) || ZapIcon;
+}
+
+/** What an action is run on: one record, the rows selected, or nothing in particular (the list as a whole). */
+export interface ActionTarget {
+  id?: string;
+  ids?: string[];
+}
+
+const words = (key: string) => {
+  const spaced = key.replace(/([a-z0-9])([A-Z])/g, "$1 $2").toLowerCase();
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+};
+
+/** A field an action asks for, as the form's widgets know fields. */
+function widgetField(key: string, def: ActionField): StoredField & { label: string } {
+  const options = { required: def.required !== false, ...(def.maxLength ? { maxLength: def.maxLength } : {}) };
+  const made =
+    def.kind === "enum"
+      ? build.enum((def.options?.length ? def.options : [""]) as [string, ...string[]], { required: options.required })
+      : def.kind === "string" && def.format === "email"
+        ? build.email(options)
+        : def.kind === "string" && def.format === "url"
+          ? build.url(options)
+          : def.kind === "string" && def.format === "tel"
+            ? build.tel(options)
+            : def.kind === "string"
+              ? build.string(options)
+              : def.kind === "text"
+                ? build.text(options)
+                : def.kind === "int"
+                  ? build.int({ required: options.required })
+                  : def.kind === "float"
+                    ? build.float({ required: options.required })
+                    : def.kind === "boolean"
+                      ? build.boolean({ required: options.required })
+                      : def.kind === "date"
+                        ? build.date({ required: options.required })
+                        : build.datetime({ required: options.required });
+  return { ...made, label: def.label ?? words(key) } as StoredField & { label: string };
+}
+
+/** What the widgets hold while typing, as the API wants it: a number as a number, nothing as nothing. */
+function asInput(fields: Record<string, ActionField>, values: Record<string, string | boolean>): Record<string, unknown> {
+  const input: Record<string, unknown> = {};
+  for (const [key, def] of Object.entries(fields)) {
+    const value = values[key];
+    if (def.kind === "boolean") input[key] = value === true;
+    else if (value === undefined || value === "") continue;
+    else if (def.kind === "int" || def.kind === "float") input[key] = Number(value);
+    else input[key] = value;
+  }
+  return input;
+}
+
+/**
+ * Running a resource's own actions from wherever their buttons are: a record's page, a
+ * row's menu, beside New, the selection bar.
+ *
+ * `start` does what the action calls for first. One with something to fill in opens a
+ * sheet; one with a question asks it, in the dialog Delete uses; one with neither runs.
+ * Then the message its class returned is the toast, and the page is asked for again.
+ * `dialogs` is the sheet and the dialog, to be rendered once by whoever holds the buttons.
+ */
+export function useResourceActions(resourceName: string, nouns: { one: string; many: string }, onDone?: () => void) {
+  const router = useRouter();
+  const [current, setCurrent] = useState<{ action: ResourceAction; target: ActionTarget } | null>(null);
+  const [values, setValues] = useState<Record<string, string | boolean>>({});
+  const [issues, setIssues] = useState<Record<string, string>>({});
+  const [pending, startTransition] = useTransition();
+
+  function run(action: ResourceAction, target: ActionTarget, input: Record<string, unknown>) {
+    startTransition(async () => {
+      const result = await runResourceAction(resourceName, action.key, target, input);
+      if (result.ok) {
+        toast.success(result.data.message);
+        setCurrent(null);
+        onDone?.();
+        router.refresh();
+        return;
+      }
+      const byField: Record<string, string> = {};
+      for (const issue of result.issues ?? []) byField[issue.path] ??= issue.message;
+      // A problem with something that was filled in is shown where it was filled in.
+      if (action.fields && Object.keys(byField).some((key) => key in action.fields!)) {
+        setIssues(byField);
+        return;
+      }
+      toast.error(result.error);
+      setCurrent(null);
+      // It may have stopped applying while the page was open: show the page as it is now.
+      if (result.status === 409 || result.status === 404) router.refresh();
+    });
+  }
+
+  function start(action: ResourceAction, target: ActionTarget = {}) {
+    setIssues({});
+    setValues(Object.fromEntries(Object.entries(action.fields ?? {}).map(([key, def]) => [key, def.kind === "boolean" ? false : ""])));
+    if (!action.fields && !action.confirm) run(action, target, {});
+    else setCurrent({ action, target });
+  }
+
+  const action = current?.action;
+  const count = current?.target.ids?.length;
+  // "the 1 article you selected", "the 3 articles you selected"
+  const selected = count ? ` This is for the ${count} ${count === 1 ? nouns.one : nouns.many} you selected.` : "";
+  const asking = Boolean(action && !action.fields);
+  const filling = Boolean(action?.fields);
+
+  const dialogs = (
+    <>
+      <AlertDialog open={asking} onOpenChange={(open) => !open && !pending && setCurrent(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{action?.label}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {action?.confirm}
+              {selected}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={pending}>Cancel</AlertDialogCancel>
+            <Button onClick={() => current && run(current.action, current.target, {})} disabled={pending}>
+              {pending && <Spinner data-icon="inline-start" />}
+              {action?.label}
+            </Button>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      <Sheet open={filling} onOpenChange={(open) => !open && !pending && setCurrent(null)}>
+        <SheetContent className="flex w-full flex-col gap-0 sm:max-w-md">
+          <SheetHeader>
+            <SheetTitle>{action?.label}</SheetTitle>
+            <SheetDescription>
+              {action?.confirm ?? `Fill this in, then ${action?.label.toLowerCase()}.`}
+              {selected}
+            </SheetDescription>
+          </SheetHeader>
+          <form
+            className="flex min-h-0 flex-1 flex-col"
+            onSubmit={(event) => {
+              event.preventDefault();
+              if (current?.action.fields) run(current.action, current.target, asInput(current.action.fields, values));
+            }}
+          >
+            <div className="flex flex-1 flex-col gap-4 overflow-y-auto px-4 pb-4">
+              {Object.entries(action?.fields ?? {}).map(([key, def]) => {
+                const widget = widgetField(key, def);
+                const id = `action-${action?.key}-${key}`;
+                return (
+                  <Field key={key} data-invalid={issues[key] ? true : undefined} orientation={def.kind === "boolean" ? "horizontal" : "vertical"}>
+                    <FieldLabel htmlFor={id}>
+                      {widget.label}
+                      {def.required !== false && def.kind !== "boolean" && <span className="text-destructive"> *</span>}
+                    </FieldLabel>
+                    <FieldWidget
+                      id={id}
+                      name={key}
+                      resourceName={resourceName}
+                      fieldKey={key}
+                      field={widget}
+                      value={values[key] ?? ""}
+                      onChange={(value) => setValues((before) => ({ ...before, [key]: value }))}
+                      invalid={Boolean(issues[key])}
+                      disabled={pending}
+                    />
+                    {issues[key] && <FieldError>{issues[key]}</FieldError>}
+                  </Field>
+                );
+              })}
+            </div>
+            <SheetFooter className="flex-row justify-end border-t">
+              <Button type="button" variant="outline" onClick={() => setCurrent(null)} disabled={pending}>
+                Cancel
+              </Button>
+              <Button type="submit" disabled={pending}>
+                {pending && <Spinner data-icon="inline-start" />}
+                {action?.label}
+              </Button>
+            </SheetFooter>
+          </form>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+
+  return { start, pending, dialogs };
+}
+
+/**
+ * Buttons for a resource's actions: on a record's page (with the record's id), or beside
+ * New for actions on the list as a whole (with none).
+ */
+export function ActionButtons({ resourceName, actions, id }: { resourceName: string; actions: ResourceAction[]; id?: string }) {
+  // Buttons here are for one record or for the list as a whole: never for a selection, so no noun is needed.
+  const { start, pending, dialogs } = useResourceActions(resourceName, { one: "record", many: "records" });
+  if (actions.length === 0) return null;
+  return (
+    <>
+      {actions.map((action) => {
+        const Icon = actionIcon(action.icon);
+        return (
+          <Button key={action.key} variant="outline" disabled={pending} onClick={() => start(action, id ? { id } : {})}>
+            <Icon data-icon="inline-start" />
+            {action.label}
+          </Button>
+        );
+      })}
+      {dialogs}
+    </>
+  );
+}

package/template/web/components/dashboard/resource-form.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useMemo, useState, useTransition, type FormEvent, type MouseEvent } from "react";
-import { createValidators, formValuesToInput, initialFormValues, issuesByField, storedFields, type ClientResource, type StoredField } from "@flaredev/core";
+import { createValidators, formValuesToInput, initialFormValues, issuesByField, slugify, storedFields, type ClientResource, type StoredField } from "@flaredev/core";
 import { toast } from "sonner";
 import { createRecordAction, updateRecordAction } from "@/app/dashboard/actions";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -70,8 +70,25 @@ export function ResourceForm({ resource, mode, id, record, relations = {}, listH
   const last = step === steps.length - 1;
   const visible = steps[step] ?? [];
 
+  /**
+   * Fields made from another (a slug from a title) and not yet typed in by hand. On a new
+   * record they follow their source as it is typed, so what Laravel would make is on
+   * show; once someone types in one, it is theirs. Never on an edit: a slug that is
+   * already an address doesn't move.
+   */
+  const [following, setFollowing] = useState<Set<string>>(
+    () => new Set(mode === "create" ? fields.filter(([, def]) => typeof (def as { from?: string }).from === "string").map(([key]) => key) : []),
+  );
+
   const setValue = (key: string, value: string | boolean) => {
-    setValues((current) => ({ ...current, [key]: value }));
+    setValues((current) => {
+      const next = { ...current, [key]: value };
+      for (const [made, def] of fields) {
+        if (following.has(made) && (def as { from?: string }).from === key) next[made] = slugify(String(value));
+      }
+      return next;
+    });
+    if (following.has(key)) setFollowing((current) => new Set([...current].filter((made) => made !== key)));
     if (errors[key]) setErrors(({ [key]: _removed, ...rest }) => rest);
   };
 

package/template/web/components/dashboard/resource-table-toolbar.tsx

@@ -12,7 +12,7 @@ import { hrefWith } from "./query";
 const ALL = "__all__";
 
 /** Search box and enum/boolean filters for ResourceTable; all state goes into the URL. */
-export function ResourceTableToolbar({ resource }: { resource: ClientResource }) {
+export function ResourceTableToolbar({ resource, publish }: { resource: ClientResource; publish?: { field: string; label: string } }) {
   const router = useRouter();
   const pathname = usePathname();
   const params = new URLSearchParams(useSearchParams().toString());
@@ -31,7 +31,7 @@ export function ResourceTableToolbar({ resource }: { resource: ClientResource })
     go({ q: q.trim() || null });
   }
 
-  if (!searchable && filters.length === 0) return null;
+  if (!searchable && filters.length === 0 && !publish) return null;
 
   return (
     <div className="flex flex-wrap items-center gap-2">
@@ -52,6 +52,24 @@ export function ResourceTableToolbar({ resource }: { resource: ClientResource })
         </form>
       )}
 
+      {/* For a resource with a publish date: which of the three a record is, not a date to match. */}
+      {publish && (
+        <Select value={params.get(`filter[${publish.field}]`) ?? ALL} onValueChange={(value) => go({ [`filter[${publish.field}]`]: value === ALL ? null : value })}>
+          <SelectTrigger className="min-w-36" aria-label="Filter by whether it is published">
+            <span className="text-muted-foreground">Status:</span>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value={ALL}>Any</SelectItem>
+              <SelectItem value="published">Published</SelectItem>
+              <SelectItem value="scheduled">Scheduled</SelectItem>
+              <SelectItem value="draft">Draft</SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      )}
+
       {filters.map(([key, def]) => {
         const param = `filter[${key}]`;
         const options = def.kind === "enum" ? def.options.map((value) => ({ value, label: optionLabel(def, value) })) : [

package/template/web/components/dashboard/resource-table.tsx

@@ -3,6 +3,8 @@ import { FileCell } from "@/components/dashboard/fields/file-cell";
 import { ArrowDownIcon, ArrowUpIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsUpDownIcon, PlusIcon } from "lucide-react";
 import { clientResource, formatValue, optionLabel, statusTone, storedFields, type Resource, type StoredField } from "@flaredev/core";
 import { isSortable } from "@/lib/resource/query";
+import { privateFileUrl } from "@/lib/files";
+import { isRich, richToText } from "@/lib/rich";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -16,16 +18,19 @@ import {
   PaginationPrevious,
 } from "@/components/ui/pagination";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
-import { resourcePath, adminPermissions, allResources, dashboardStore, requireAccess } from "@/lib/dashboard";
+import { resourcePath, adminPermissions, allowedActions, allResources, dashboardStore, requireAccess } from "@/lib/dashboard";
+import { actionApplies, formOf, PUBLISH_LABELS, publishFieldOf, publishState } from "@/lib/extras";
 import { site } from "@/lib/site";
 import { trashFor } from "@/lib/trash";
 import { cn } from "@/lib/utils";
 import { ColumnMenu } from "./column-menu";
 import { ExportButton } from "./export-button";
+import { FormActivity } from "./form-activity";
 import { isInlineEditable } from "./editable";
 import { InlineCell } from "./inline-cell";
 import type { RelationMeta } from "./fields/field-widget";
 import { BulkCreateButton } from "./bulk-create-grid";
+import { ActionButtons } from "./resource-action";
 import { ResourceInsights } from "./resource-insights";
 import { ImportDialog } from "./import-dialog";
 import { LocalTime } from "./local-time";
@@ -96,6 +101,14 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
   }
 
   const overlayForms = site.dashboard.forms === "sheet";
+  // The field this resource's records are published by, where it has one, and the time to judge them by.
+  const publishField = publishFieldOf(resource.name);
+  const now = new Date();
+  // The field holding an address its owner has to prove, where the public form asks for that.
+  const confirmField = formOf(resource.name)?.confirm;
+  // The resource's own actions this person may run: on the list as a whole, and on a record.
+  const actions = await allowedActions(resource.name);
+  const onRecords = actions.filter((action) => action.on === "record");
   const rowIds = rows.map((row) => String(row.id));
   const exportColumns = [{ key: "id", label: "Id" }, ...fields.filter(([, def]) => def.kind !== "file").map(([key, def]) => ({ key, label: def.label }))];
 
@@ -110,11 +123,13 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
     <TableSelection ids={rowIds}>
       <div className="flex flex-col gap-4">
       <ResourceInsights resource={forClient} total={meta.total} />
+      <FormActivity resource={resource} />
       <div className="flex flex-wrap items-center justify-between gap-2">
-        <ResourceTableToolbar resource={forClient} />
+        <ResourceTableToolbar resource={forClient} publish={publishField ? { field: publishField, label: resource.fields[publishField]?.label ?? "Published" } : undefined} />
         <div className="flex flex-wrap items-center gap-2">
           <ColumnMenu columns={allColumns.map(({ key, label }) => ({ key, label }))} visible={columns.map((column) => column.key)} />
           <ExportButton resourceName={resource.name} pluralLabel={resource.pluralLabel} />
+          <ActionButtons resourceName={resource.name} actions={actions.filter((action) => action.on === "collection")} />
           {permissions.create && <ImportDialog resource={forClient} />}
           {permissions.create && <BulkCreateButton resource={forClient} relations={relations} />}
           {permissions.create &&
@@ -208,15 +223,39 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
                       let content: React.ReactNode = formatValue(column.def, value);
                       // Timestamps are formatted in the browser: the Worker's clock is UTC,
                       // so a date rendered here would be in nobody's timezone.
-                      if ((column.def.kind === "timestamp" || column.def.kind === "datetime") && value != null) {
+                      if (column.key === publishField) {
+                        // Not the raw date: what it means. A post is published, waiting for its time, or neither.
+                        const state = publishState(value, now);
+                        content = (
+                          <span className="inline-flex items-center gap-2">
+                            <Badge variant={state === "published" ? "success" : state === "scheduled" ? "warning" : "secondary"}>{PUBLISH_LABELS[state]}</Badge>
+                            {state !== "draft" && (
+                              <span className="text-xs text-muted-foreground">
+                                <LocalTime value={value as string} />
+                              </span>
+                            )}
+                          </span>
+                        );
+                      } else if (column.key === confirmField && row.confirmedAt == null) {
+                        // Joined through the form and hasn't followed the link yet: listed, and not counted or exported.
+                        content = (
+                          <span className="inline-flex items-center gap-2">
+                            {content}
+                            <Badge variant="warning">Not confirmed</Badge>
+                          </span>
+                        );
+                      } else if ((column.def.kind === "timestamp" || column.def.kind === "datetime") && value != null) {
                         content = <LocalTime value={value as string | number | Date} />;
                       } else if (column.def.kind === "enum" && value != null) {
                         const tone = statusTone(value);
                         content = <Badge variant={tone === "neutral" ? "secondary" : tone}>{content}</Badge>;
+                      } else if (isRich(column.def) && typeof value === "string") {
+                        // The start of it, as words: markup is noise in a table.
+                        content = richToText(value, 120);
                       } else if (column.def.kind === "file" && typeof value === "string" && value) {
                         // A thumbnail for an image, a filename for anything else — the raw
                         // object key is noise in a table.
-                        content = <FileCell resourceName={resource.name} fieldKey={column.key} value={value} />;
+                        content = <FileCell resourceName={resource.name} fieldKey={column.key} value={value} download={privateFileUrl(resource.slug, String(row.id), column.key)} />;
                       } else if (column.def.kind === "multiselect" && Array.isArray(value) && value.length) {
                         const def = column.def;
                         content = (
@@ -304,6 +343,8 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
                         canUpdate={permissions.update}
                         canDelete={permissions.delete}
                         trash={trash}
+                        actions={onRecords.filter((action) => actionApplies(action, row))}
+                        published={publishField ? publishState(row[publishField], now) : undefined}
                       />
                     </TableCell>
                   </TableRow>
@@ -398,6 +439,7 @@ export async function ResourceTable({ resource, searchParams }: { resource: Reso
         label={resource.label}
         pluralLabel={resource.pluralLabel}
         canDelete={permissions.delete}
+        actions={onRecords.filter((action) => action.many)}
         rows={rows}
         columns={exportColumns}
         slug={resource.slug}

package/template/web/components/dashboard/row-actions.tsx

@@ -3,10 +3,10 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState, useTransition } from "react";
-import { ExternalLinkIcon, MoreHorizontalIcon, PencilIcon, Trash2Icon } from "lucide-react";
+import { ExternalLinkIcon, EyeOffIcon, MoreHorizontalIcon, PencilIcon, SendIcon, Trash2Icon } from "lucide-react";
 import { toast } from "sonner";
 import type { ClientResource } from "@flaredev/core";
-import { deleteRecordAction } from "@/app/dashboard/actions";
+import { deleteRecordAction, publishRecordAction } from "@/app/dashboard/actions";
 import { restoreRecordAction } from "@/app/dashboard/trash/actions";
 import {
   AlertDialog,
@@ -27,7 +27,9 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Spinner } from "@/components/ui/spinner";
+import type { PublishState, ResourceAction } from "@/lib/extras";
 import { keptFor, type TrashInfo } from "@/lib/trash-info";
+import { actionIcon, useResourceActions } from "./resource-action";
 import { ResourceFormSheet, type FormRelations } from "./resource-form-sheet";
 import { toastMovedToTrash } from "./trash-actions";
 
@@ -46,6 +48,8 @@ export function RowActions({
   canUpdate = true,
   canDelete = true,
   trash,
+  actions = [],
+  published,
 }: {
   resource: ClientResource;
   id: string;
@@ -60,8 +64,22 @@ export function RowActions({
   canDelete?: boolean;
   /** This resource's trash, when a deleted record goes there instead of going for good. */
   trash?: TrashInfo;
+  /** The resource's own actions that this person may run and that apply to this row. */
+  actions?: ResourceAction[];
+  /** For a resource with a publish date: what this row is now. */
+  published?: PublishState;
 }) {
   const router = useRouter();
+  const [, startPublishing] = useTransition();
+  const publish = (now: boolean) => {
+    startPublishing(async () => {
+      const result = await publishRecordAction(resource.name, id, now);
+      if (result.ok) toast.success(now ? `${resource.label} published.` : `${resource.label} is a draft again.`);
+      else toast.error(result.error);
+      router.refresh();
+    });
+  };
+  const own = useResourceActions(resource.name, { one: resource.label.toLowerCase(), many: resource.pluralLabel.toLowerCase() });
   const [confirming, setConfirming] = useState(false);
   const [editing, setEditing] = useState(false);
   const [pending, startTransition] = useTransition();
@@ -99,6 +117,40 @@ export function RowActions({
             </DropdownMenuItem>
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
+          {canUpdate && published && (
+            <>
+              <DropdownMenuGroup>
+                {published === "published" ? (
+                  <DropdownMenuItem onSelect={() => publish(false)}>
+                    <EyeOffIcon />
+                    Unpublish
+                  </DropdownMenuItem>
+                ) : (
+                  <DropdownMenuItem onSelect={() => publish(true)}>
+                    <SendIcon />
+                    {published === "scheduled" ? "Publish now" : "Publish"}
+                  </DropdownMenuItem>
+                )}
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+            </>
+          )}
+          {actions.length > 0 && (
+            <>
+              <DropdownMenuGroup>
+                {actions.map((action) => {
+                  const Icon = actionIcon(action.icon);
+                  return (
+                    <DropdownMenuItem key={action.key} disabled={own.pending} onSelect={() => own.start(action, { id })}>
+                      <Icon />
+                      {action.label}
+                    </DropdownMenuItem>
+                  );
+                })}
+              </DropdownMenuGroup>
+              {(canUpdate || canDelete) && <DropdownMenuSeparator />}
+            </>
+          )}
           {canUpdate && (
             <DropdownMenuGroup>
               {record ? (
@@ -128,6 +180,8 @@ export function RowActions({
         </DropdownMenuContent>
       </DropdownMenu>
 
+      {own.dialogs}
+
       {record && canUpdate && (
         <ResourceFormSheet
           resource={resource}

package/template/web/components/dashboard/table-selection.tsx

@@ -20,7 +20,9 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Spinner } from "@/components/ui/spinner";
 import { toCsv } from "@/lib/csv";
+import { actionApplies, type ResourceAction } from "@/lib/extras";
 import { keptFor, type TrashInfo } from "@/lib/trash-info";
+import { actionIcon, useResourceActions } from "./resource-action";
 import { toastMovedToTrash } from "./trash-actions";
 
 interface SelectionValue {
@@ -100,15 +102,18 @@ interface BarProps {
   /** The resource's address, and its trash when deleted records go there instead of going for good. */
   slug: string;
   trash?: TrashInfo;
+  /** The resource's own actions that can be run on several records at once, and that this person may run. */
+  actions?: ResourceAction[];
 }
 
 /**
  * What you can do with the rows you've ticked. Appears only when something is selected,
  * pinned to the bottom so it's reachable in a long table.
  */
-export function SelectionBar({ resourceName, label, pluralLabel, canDelete, rows, columns, slug, trash }: BarProps) {
+export function SelectionBar({ resourceName, label, pluralLabel, canDelete, rows, columns, slug, trash, actions = [] }: BarProps) {
   const { selected, clear } = useSelection();
   const router = useRouter();
+  const own = useResourceActions(resourceName, { one: label.toLowerCase(), many: pluralLabel.toLowerCase() }, clear);
   const [confirming, setConfirming] = useState(false);
   const [pending, startTransition] = useTransition();
   const count = selected.size;
@@ -157,6 +162,17 @@ export function SelectionBar({ resourceName, label, pluralLabel, canDelete, rows
           <DownloadIcon data-icon="inline-start" />
           Export
         </Button>
+        {actions.map((action) => {
+          const Icon = actionIcon(action.icon);
+          // Offered when it applies to at least one of the rows ticked. Laravel passes over the rest.
+          const applicable = rows.filter((row) => selected.has(String(row.id)) && actionApplies(action, row)).map((row) => String(row.id));
+          return (
+            <Button key={action.key} variant="ghost" size="sm" disabled={own.pending || applicable.length === 0} onClick={() => own.start(action, { ids: applicable })}>
+              <Icon data-icon="inline-start" />
+              {action.label}
+            </Button>
+          );
+        })}
         {canDelete && (
           <Button variant="ghost" size="sm" className="text-destructive hover:text-destructive" onClick={() => setConfirming(true)}>
             <Trash2Icon data-icon="inline-start" />
@@ -168,6 +184,8 @@ export function SelectionBar({ resourceName, label, pluralLabel, canDelete, rows
         </Button>
       </div>
 
+      {own.dialogs}
+
       <AlertDialog open={confirming} onOpenChange={setConfirming}>
         <AlertDialogContent>
           <AlertDialogHeader>

package/template/web/components/marketing/site-header.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 import { BrandMark } from "@/components/auth/auth-shell";
+import { siteLinks } from "@/lib/extras";
 import { site } from "@/lib/site";
 
 /** The public site's top bar. Static on purpose: it doesn't read the session, so the home page can be cached. */
@@ -12,12 +13,18 @@ export function SiteHeader() {
           {site.name}
         </Link>
         <nav aria-label="Main" className="hidden items-center gap-7 text-sm text-foreground-muted md:flex">
-          <a href="#features" className="hover:text-foreground">
+          <a href="/#features" className="hover:text-foreground">
             Features
           </a>
-          <a href="#customers" className="hover:text-foreground">
+          <a href="/#customers" className="hover:text-foreground">
             Customers
           </a>
+          {/* What the app's resources have put on the site: a blog, when `nevela blog` has made one. */}
+          {siteLinks().map((link) => (
+            <Link key={link.href} href={link.href} className="hover:text-foreground">
+              {link.label}
+            </Link>
+          ))}
           <a href={site.links.support} className="hover:text-foreground">
             Contact
           </a>