create-nevela 0.7.1 → 0.8.0

package/template/web/app/globals.css

@@ -253,3 +253,49 @@
     letter-spacing: var(--heading-tracking);
   }
 }
+
+/*
+ * Rich text: what a rich text field's editor holds and what a record's page shows of it.
+ * Tailwind's reset takes the looks off headings, lists and quotes; this gives them back.
+ */
+.rich-text {
+  line-height: 1.6;
+  overflow-wrap: anywhere;
+}
+.rich-text > * + * {
+  margin-top: 0.75em;
+}
+.rich-text h2 {
+  font-size: 1.25em;
+  line-height: 1.3;
+}
+.rich-text h3 {
+  font-size: 1.1em;
+  line-height: 1.35;
+}
+.rich-text ul,
+.rich-text ol {
+  padding-left: 1.5em;
+}
+.rich-text ul {
+  list-style: disc;
+}
+.rich-text ol {
+  list-style: decimal;
+}
+.rich-text li + li {
+  margin-top: 0.25em;
+}
+.rich-text blockquote {
+  border-left: 3px solid var(--border);
+  padding-left: 1em;
+  color: var(--muted-foreground);
+}
+.rich-text a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.rich-text s {
+  text-decoration: line-through;
+}

package/template/web/components/access/role-form.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { useRouter } from "next/navigation";
-import { useMemo, useState, useTransition } from "react";
+import { Fragment, useMemo, useState, useTransition } from "react";
 import { toast } from "sonner";
 import { createRoleAction, deleteRoleAction, updateRoleAction } from "@/app/dashboard/access/actions";
 import {
@@ -27,6 +27,12 @@ import type { ManagedRole, PermissionCatalog, PermissionFeature } from "@/lib/ac
 const LIST = "/dashboard/access/roles";
 const ACTIONS = ["create", "view", "edit", "delete"] as const;
 const ACTION_LABELS: Record<string, string> = { create: "Create", view: "View", edit: "Edit", delete: "Delete" };
+/**
+ * Whether a permission is one of a resource's own actions ("applications.accept") and not
+ * one of the four. Those are given by name only: a whole section, or a pattern, doesn't
+ * carry them, which is how Laravel reads a grant too.
+ */
+const isOwn = (key: string) => !(ACTIONS as readonly string[]).includes(key.split(".")[1] ?? "");
 
 /**
  * A role's name and what it allows.
@@ -84,8 +90,9 @@ export function RoleForm({
   }, [kept.length]);
 
   const holds = (key: string) => mine === null || mine.includes(key);
-  const on = (key: string) => everything || whole.has(moduleOf.get(key.split(".")[0]!) ?? "") || byPattern.has(key) || picked.has(key);
-  const fixed = (key: string) => locked || whole.has(moduleOf.get(key.split(".")[0]!) ?? "") || byPattern.has(key) || (!picked.has(key) && !holds(key));
+  const inWhole = (key: string) => !isOwn(key) && whole.has(moduleOf.get(key.split(".")[0]!) ?? "");
+  const on = (key: string) => everything || inWhole(key) || byPattern.has(key) || picked.has(key);
+  const fixed = (key: string) => locked || inWhole(key) || byPattern.has(key) || (!picked.has(key) && !holds(key));
 
   const total = catalog.total;
   const count = useMemo(() => {
@@ -116,7 +123,7 @@ export function RoleForm({
     // A permission already covered by a whole section doesn't need saying twice.
     const grants = everything
       ? ["*"]
-      : [...[...whole].map((section) => `@${section}.*`), ...kept, ...[...picked].filter((key) => !whole.has(moduleOf.get(key.split(".")[0]!) ?? ""))];
+      : [...[...whole].map((section) => `@${section}.*`), ...kept, ...[...picked].filter((key) => !inWhole(key))];
     const input = { name: name.trim(), description: description.trim() || null, grants };
 
     startTransition(async () => {
@@ -349,8 +356,11 @@ function FeatureRows({
         const keys = feature.actions.map((action) => `${feature.key}.${action}`);
         const every = keys.every(on);
         const some = keys.some(on);
+        // The resource's own actions: accept, send an announcement. They have no column, so they get a line.
+        const own = feature.actions.filter((action) => !(ACTIONS as readonly string[]).includes(action));
         return (
-          <tr key={feature.key} className="border-b last:border-b-0">
+          <Fragment key={feature.key}>
+          <tr className={own.length > 0 ? undefined : "border-b last:border-b-0"}>
             <th scope="row" className="px-3 py-2 text-left font-normal">
               {feature.name}
             </th>
@@ -382,6 +392,31 @@ function FeatureRows({
               />
             </td>
           </tr>
+          {own.length > 0 && (
+            <tr className="border-b last:border-b-0">
+              <td colSpan={ACTIONS.length + 2} className="px-3 pt-0 pb-2">
+                <span className="flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-muted-foreground">
+                  <span className="text-xs">Also</span>
+                  {own.map((action) => {
+                    const key = `${feature.key}.${action}`;
+                    return (
+                      <label key={action} className="flex items-center gap-2">
+                        {/* Named with its resource, as the four are: two resources can both have an "Archive". */}
+                        <Checkbox
+                          aria-label={`${feature.labels?.[action] ?? action} ${feature.name.toLowerCase()}`}
+                          checked={on(key)}
+                          disabled={fixed(key)}
+                          onCheckedChange={(value) => set([key], value === true)}
+                        />
+                        {feature.labels?.[action] ?? action}
+                      </label>
+                    );
+                  })}
+                </span>
+              </td>
+            </tr>
+          )}
+          </Fragment>
         );
       })}
     </>

package/template/web/components/dashboard/bulk-create-grid.tsx

@@ -12,6 +12,7 @@ import { Checkbox } from "@/components/ui/checkbox";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { Input } from "@/components/ui/input";
 import { Spinner } from "@/components/ui/spinner";
+import { isRich } from "@/lib/rich";
 import { cn } from "@/lib/utils";
 import { FieldWidget, type RelationMeta } from "./fields/field-widget";
 
@@ -41,6 +42,8 @@ const MOST_ROWS = 500;
 
 /** Kinds that fit in a cell: one control, one value. A file needs its own upload, so it is left to the form. */
 const IN_A_CELL = new Set(["string", "text", "int", "float", "boolean", "date", "datetime", "enum", "belongsTo"]);
+/** A file needs an upload and rich text needs an editor: neither is something to type into a cell. */
+const fitsACell = (def: { kind: string }) => IN_A_CELL.has(def.kind) && !isRich(def);
 
 /**
  * Add several records at once, in a grid.
@@ -82,10 +85,10 @@ function Grid({ resource, relations, onDone }: { resource: ClientResource; relat
   const [pending, startTransition] = useTransition();
   const validators = useMemo(() => createValidators(resource), [resource]);
   const all = useMemo(() => storedFields(resource) as [string, FieldDef][], [resource]);
-  const fields = useMemo(() => all.filter(([, def]) => IN_A_CELL.has(def.kind)), [all]);
+  const fields = useMemo(() => all.filter(([, def]) => fitsACell(def)), [all]);
   // A field this grid can't show and Laravel requires would fail every row, with nothing
   // on screen to fix. Say so, and leave those records to the form.
-  const missing = useMemo(() => all.filter(([, def]) => !IN_A_CELL.has(def.kind) && def.required !== false), [all]);
+  const missing = useMemo(() => all.filter(([, def]) => !fitsACell(def) && def.required !== false), [all]);
 
   const blank = useMemo(() => initialFormValues(resource, null) as Values, [resource]);
   const nextKey = useRef(STARTING_ROWS);

package/template/web/components/dashboard/fields/field-widget.tsx

@@ -10,12 +10,14 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 import { groupDigits, ungroup } from "@/lib/number";
+import { isRich } from "@/lib/rich";
 import { DateField, DateTimeField } from "./date-field";
 import { CountryField } from "./country-field";
 import { FileField } from "./file-field";
 import { MultiSelectField } from "./multi-select-field";
 import { PhoneField } from "./phone-field";
 import { RelationField } from "./relation-field";
+import { RichTextField } from "./rich-text-field";
 
 export interface RelationMeta {
   name: string;
@@ -56,6 +58,9 @@ export function FieldWidget(props: WidgetProps) {
 
   switch (field.kind) {
     case "text":
+      if (isRich(field)) {
+        return <RichTextField id={id} value={text} onChange={onChange} invalid={invalid} disabled={disabled} placeholder={field.placeholder} />;
+      }
       return <Textarea {...common} value={text} rows={4} onChange={(event) => onChange(event.target.value)} />;
 
     case "int":

package/template/web/components/dashboard/fields/file-cell.tsx

@@ -1,5 +1,5 @@
-import { FileIcon } from "lucide-react";
-import { fileName, fileUrl, isImageKey } from "@/lib/files";
+import { DownloadIcon, FileIcon, LockIcon } from "lucide-react";
+import { fileName, fileUrl, isImageKey, isPrivateKey } from "@/lib/files";
 
 /**
  * A stored file in a table cell or a record's detail.
@@ -8,8 +8,29 @@ import { fileName, fileUrl, isImageKey } from "@/lib/files";
  * uploaded, so a table of fifty products downloads fifty small pictures, not fifty
  * full-size ones. Anything else is its filename, which is the useful part of a key
  * nobody wants to read in full.
+ *
+ * A private file is its name and a lock, picture or not: it has no thumbnail and no
+ * address of its own. With `download`, where it is fetched through its record, the name
+ * is the link that saves it.
  */
-export function FileCell({ value, size = 36 }: { resourceName?: string; fieldKey?: string; value: string; size?: number }) {
+export function FileCell({ value, size = 36, download }: { resourceName?: string; fieldKey?: string; value: string; size?: number; download?: string }) {
+  if (isPrivateKey(value)) {
+    const name = <span className="max-w-[24ch] truncate">{fileName(value)}</span>;
+    return (
+      <span className="inline-flex items-center gap-1.5 text-muted-foreground">
+        <LockIcon aria-label="Private" className="size-3.5" />
+        {download ? (
+          <a href={download} download className="inline-flex items-center gap-1.5 text-primary hover:underline">
+            {name}
+            <DownloadIcon aria-hidden="true" className="size-3.5" />
+          </a>
+        ) : (
+          name
+        )}
+      </span>
+    );
+  }
+
   if (!isImageKey(value)) {
     return (
       <span className="inline-flex items-center gap-1.5 text-muted-foreground">

package/template/web/components/dashboard/fields/file-field.tsx

@@ -14,7 +14,7 @@ import {
 import { createUploadUrlAction } from "@/app/dashboard/actions";
 import { Button } from "@/components/ui/button";
 import { Progress } from "@/components/ui/progress";
-import { fileName, fileUrl, isImageKey } from "@/lib/files";
+import { fileName, fileUrl, isImageKey, isPrivateKey } from "@/lib/files";
 import { cn } from "@/lib/utils";
 
 interface Props {
@@ -107,7 +107,8 @@ export function FileField({ id, value, onChange, invalid, disabled, field, resou
 
   // Thumbnail for a stored image (a local preview replaces it while uploading).
   useEffect(() => {
-    setPreview(value && isImageKey(value) ? fileUrl(value, "thumb") : null);
+    // A private file has no thumbnail, and nothing to fetch one from.
+    setPreview(value && isImageKey(value) && !isPrivateKey(value) ? fileUrl(value, "thumb") : null);
   }, [value]);
 
   async function check(file: File): Promise<string | null> {
@@ -236,9 +237,12 @@ export function FileField({ id, value, onChange, invalid, disabled, field, resou
           {thumbnail}
           <span className="min-w-0 flex-1 truncate text-sm font-medium">{fileName(value)}</span>
           <div className="flex shrink-0 gap-1">
-            <Button type="button" variant="ghost" size="sm" onClick={open}>
-              Open<span className="sr-only"> {fileName(value)}</span>
-            </Button>
+            {/* A private file is fetched through its record, from the record's page, not from here. */}
+            {!isPrivateKey(value) && (
+              <Button type="button" variant="ghost" size="sm" onClick={open}>
+                Open<span className="sr-only"> {fileName(value)}</span>
+              </Button>
+            )}
             {/* The field label points here; aria-label keeps the button named for what it does. */}
             <Button
               id={id}

package/template/web/components/dashboard/fields/rich-text-field.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { BoldIcon, Heading2Icon, Heading3Icon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon, Redo2Icon, StrikethroughIcon, TextQuoteIcon, Undo2Icon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { isBlankHtml, linkAddress, tidyHtml } from "@/lib/rich";
+import { cn } from "@/lib/utils";
+
+type Mark = "bold" | "italic" | "strike" | "link" | "h2" | "h3" | "bullets" | "numbers" | "quote";
+
+/**
+ * The editor for a rich text field: a page to type on, and a toolbar of the eleven
+ * things that can be done to it.
+ *
+ * It is the browser's own editing (`contentEditable` and `document.execCommand`), with
+ * no editor library behind it, so it adds nothing to install or to keep up to date.
+ * Browsers disagree on the HTML they write (`<b>` or `<strong>`, `<div>` or `<p>`);
+ * Laravel settles that when it cleans what is saved, and sends back the one spelling.
+ */
+export function RichTextField({
+  id,
+  value,
+  onChange,
+  invalid,
+  disabled,
+  placeholder,
+}: {
+  id: string;
+  value: string;
+  onChange: (value: string) => void;
+  invalid?: boolean;
+  disabled?: boolean;
+  placeholder?: string;
+}) {
+  const page = useRef<HTMLDivElement>(null);
+  /** What the page last said it holds. A value that differs came from outside: a record loading, a form resetting. */
+  const said = useRef<string | null>(null);
+  /** Where the cursor was when the link box opened, since typing an address moves it away. */
+  const place = useRef<Range | null>(null);
+  const [marks, setMarks] = useState<Partial<Record<Mark, boolean>>>({});
+  const [linking, setLinking] = useState(false);
+  const [address, setAddress] = useState("");
+
+  useEffect(() => {
+    const element = page.current;
+    if (element && value !== said.current) {
+      element.innerHTML = value;
+      said.current = value;
+    }
+  }, [value]);
+
+  /** The nearest tag of this name around the cursor, inside the page. */
+  const around = useCallback((tag: string): Element | null => {
+    const selection = window.getSelection();
+    const node = selection && selection.rangeCount > 0 ? selection.anchorNode : null;
+    const element = node instanceof Element ? node : (node?.parentElement ?? null);
+    const found = element?.closest(tag) ?? null;
+    return found && page.current?.contains(found) ? found : null;
+  }, []);
+
+  const look = useCallback(() => {
+    if (!page.current || !page.current.contains(window.getSelection()?.anchorNode ?? null)) return;
+    setMarks({
+      bold: document.queryCommandState("bold"),
+      italic: document.queryCommandState("italic"),
+      strike: document.queryCommandState("strikeThrough"),
+      bullets: document.queryCommandState("insertUnorderedList"),
+      numbers: document.queryCommandState("insertOrderedList"),
+      link: around("a") !== null,
+      h2: around("h2") !== null,
+      h3: around("h3") !== null,
+      quote: around("blockquote") !== null,
+    });
+  }, [around]);
+
+  useEffect(() => {
+    document.addEventListener("selectionchange", look);
+    return () => document.removeEventListener("selectionchange", look);
+  }, [look]);
+
+  const say = useCallback(() => {
+    const element = page.current;
+    if (!element) return;
+    // Emptied, a page still holds the paragraph the cursor sits in.
+    const html = isBlankHtml(element.innerHTML) ? "" : element.innerHTML;
+    said.current = html;
+    onChange(html);
+  }, [onChange]);
+
+  const run = useCallback(
+    (command: string, argument?: string) => {
+      page.current?.focus();
+      document.execCommand(command, false, argument);
+      say();
+      look();
+    },
+    [say, look],
+  );
+
+  /** A heading is a kind of line: pressed again, the line goes back to being a paragraph. */
+  const heading = (tag: "h2" | "h3") => run("formatBlock", around(tag) ? "p" : tag);
+  const quote = () => (around("blockquote") ? run("outdent") : run("formatBlock", "blockquote"));
+
+  function openLink(open: boolean) {
+    if (open) {
+      const selection = window.getSelection();
+      place.current = selection && selection.rangeCount > 0 && page.current?.contains(selection.anchorNode) ? selection.getRangeAt(0).cloneRange() : null;
+      setAddress(around("a")?.getAttribute("href") ?? "");
+    }
+    setLinking(open);
+  }
+
+  function applyLink(typed: string) {
+    setLinking(false);
+    const href = linkAddress(typed);
+    // After the box has closed and handed the cursor back.
+    window.setTimeout(() => {
+      const element = page.current;
+      if (!element) return;
+      element.focus();
+      const selection = window.getSelection();
+      if (place.current && selection) {
+        selection.removeAllRanges();
+        selection.addRange(place.current);
+      }
+      if (href === "") {
+        run("unlink");
+      } else if (selection?.isCollapsed && !around("a")) {
+        // Nothing selected to make a link of: the address is its own words.
+        const text = href.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/"/g, "&quot;");
+        run("insertHTML", `<a href="${text}">${text}</a>`);
+      } else {
+        run("createLink", href);
+      }
+    }, 0);
+  }
+
+  const tools: { mark?: Mark; label: string; icon: React.ReactNode; press: () => void }[][] = [
+    [
+      { mark: "bold", label: "Bold", icon: <BoldIcon />, press: () => run("bold") },
+      { mark: "italic", label: "Italic", icon: <ItalicIcon />, press: () => run("italic") },
+      { mark: "strike", label: "Strikethrough", icon: <StrikethroughIcon />, press: () => run("strikeThrough") },
+    ],
+    [
+      { mark: "h2", label: "Heading", icon: <Heading2Icon />, press: () => heading("h2") },
+      { mark: "h3", label: "Smaller heading", icon: <Heading3Icon />, press: () => heading("h3") },
+      { mark: "bullets", label: "Bullet list", icon: <ListIcon />, press: () => run("insertUnorderedList") },
+      { mark: "numbers", label: "Numbered list", icon: <ListOrderedIcon />, press: () => run("insertOrderedList") },
+      { mark: "quote", label: "Quote", icon: <TextQuoteIcon />, press: quote },
+    ],
+  ];
+  const history = [
+    { label: "Undo", icon: <Undo2Icon />, press: () => run("undo") },
+    { label: "Redo", icon: <Redo2Icon />, press: () => run("redo") },
+  ];
+
+  const tool = (item: { mark?: Mark; label: string; icon: React.ReactNode; press: () => void }) => (
+    <Button
+      key={item.label}
+      type="button"
+      variant="ghost"
+      size="icon-sm"
+      title={item.label}
+      aria-label={item.label}
+      aria-pressed={item.mark ? Boolean(marks[item.mark]) : undefined}
+      disabled={disabled}
+      className={cn("size-7", item.mark && marks[item.mark] && "bg-accent text-accent-foreground")}
+      // Pressing a tool must not take the cursor out of the page.
+      onMouseDown={(event) => event.preventDefault()}
+      onClick={item.press}
+    >
+      {item.icon}
+    </Button>
+  );
+
+  return (
+    <div
+      className={cn(
+        "rounded-md border border-input shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50 dark:bg-input/30",
+        invalid && "border-destructive ring-destructive/20 dark:ring-destructive/40",
+        disabled && "cursor-not-allowed opacity-50",
+      )}
+    >
+      <div role="toolbar" aria-label="Formatting" className="flex flex-wrap items-center gap-0.5 border-b border-input px-1.5 py-1">
+        {tools[0].map(tool)}
+        <Popover open={linking} onOpenChange={openLink}>
+          <PopoverTrigger asChild>
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon-sm"
+              title="Link"
+              aria-label="Link"
+              aria-pressed={Boolean(marks.link)}
+              disabled={disabled}
+              className={cn("size-7", marks.link && "bg-accent text-accent-foreground")}
+              onMouseDown={(event) => event.preventDefault()}
+            >
+              <LinkIcon />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent align="start" className="w-80">
+            {/* Not a form: this sits inside the record's own form, and a form can't hold another. */}
+            <div className="flex flex-col gap-2">
+              <Input
+                autoFocus
+                value={address}
+                placeholder="https://example.com"
+                aria-label="Link address"
+                onChange={(event) => setAddress(event.target.value)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    applyLink(address);
+                  }
+                }}
+              />
+              <div className="flex justify-end gap-2">
+                {marks.link && (
+                  <Button type="button" variant="ghost" size="sm" onClick={() => applyLink("")}>
+                    Remove link
+                  </Button>
+                )}
+                <Button type="button" size="sm" onClick={() => applyLink(address)}>
+                  Apply
+                </Button>
+              </div>
+            </div>
+          </PopoverContent>
+        </Popover>
+        <span aria-hidden className="mx-1 h-5 w-px bg-border" />
+        {tools[1].map(tool)}
+        <span aria-hidden className="mx-1 h-5 w-px bg-border" />
+        {history.map(tool)}
+      </div>
+      <div
+        ref={page}
+        id={id}
+        role="textbox"
+        aria-multiline="true"
+        aria-invalid={invalid || undefined}
+        aria-placeholder={placeholder}
+        data-placeholder={placeholder}
+        contentEditable={!disabled}
+        suppressContentEditableWarning
+        className="rich-text max-h-[32rem] min-h-40 overflow-y-auto px-3 py-2 text-base outline-none empty:before:pointer-events-none empty:before:text-muted-foreground empty:before:content-[attr(data-placeholder)] md:text-sm"
+        onFocus={() => document.execCommand("defaultParagraphSeparator", false, "p")}
+        onInput={say}
+        onBlur={say}
+        onPaste={(event) => {
+          event.preventDefault();
+          const html = event.clipboardData.getData("text/html");
+          if (html) run("insertHTML", tidyHtml(html));
+          else run("insertText", event.clipboardData.getData("text/plain"));
+        }}
+      />
+    </div>
+  );
+}

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

@@ -19,7 +19,9 @@ import {
 } from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { Spinner } from "@/components/ui/spinner";
+import type { ResourceAction } from "@/lib/extras";
 import { keptFor, type TrashInfo } from "@/lib/trash-info";
+import { ActionButtons } from "./resource-action";
 import { ResourceFormSheet, type FormRelations } from "./resource-form-sheet";
 import { toastMovedToTrash } from "./trash-actions";
 
@@ -36,10 +38,12 @@ interface Props {
   overlayForms: 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 record as it is. */
+  actions?: ResourceAction[];
 }
 
-/** 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, overlayForms, trash }: Props) {
+/** The resource's own actions, then 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, overlayForms, trash, actions = [] }: Props) {
   const router = useRouter();
   const [editing, setEditing] = useState(false);
   const [confirming, setConfirming] = useState(false);
@@ -63,6 +67,7 @@ export function RecordActions({ resource, id, record, relations, listHref, editH
 
   return (
     <>
+      <ActionButtons resourceName={resource.name} actions={actions} id={id} />
       {canUpdate &&
         (overlayForms ? (
           <Button variant="outline" onClick={() => setEditing(true)}>

package/template/web/components/dashboard/record-detail.tsx

@@ -5,7 +5,10 @@ import { Badge } from "@/components/ui/badge";
 import { FileCell } from "@/components/dashboard/fields/file-cell";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { adminPermissions, allResources, dashboardStore, requireAccess, resourcePath } from "@/lib/dashboard";
+import { adminPermissions, allowedActions, allResources, dashboardStore, requireAccess, resourcePath } from "@/lib/dashboard";
+import { actionApplies } from "@/lib/extras";
+import { privateFileUrl } from "@/lib/files";
+import { isRich } from "@/lib/rich";
 import { site } from "@/lib/site";
 import { trashFor } from "@/lib/trash";
 import { LocalTime } from "./local-time";
@@ -93,6 +96,7 @@ export async function RecordDetail({ resource, id }: { resource: Resource; id: s
             canDelete={permissions.delete}
             overlayForms={site.dashboard.forms === "sheet"}
             trash={trash}
+            actions={(await allowedActions(resource.name)).filter((action) => action.on === "record" && actionApplies(action, record))}
           />
         }
       />
@@ -111,9 +115,12 @@ export async function RecordDetail({ resource, id }: { resource: Resource; id: s
               } else if (def.kind === "enum" && value != null) {
                 const tone = statusTone(value);
                 content = <Badge variant={tone === "neutral" ? "secondary" : tone}>{content}</Badge>;
+              } else if (isRich(def) && typeof value === "string" && value) {
+                // Shown as it was written. Laravel cleaned it when it was saved and again when it was read.
+                content = <div className="rich-text" dangerouslySetInnerHTML={{ __html: value }} />;
               } else if (def.kind === "file" && typeof value === "string" && value) {
                 // Bigger here than in the table: this is the page for looking at one record.
-                content = <FileCell resourceName={resource.name} fieldKey={key} value={value} size={96} />;
+                content = <FileCell resourceName={resource.name} fieldKey={key} value={value} size={96} download={privateFileUrl(resource.slug, id, key)} />;
               } else if (def.kind === "multiselect" && Array.isArray(value) && value.length > 0) {
                 content = (
                   <span className="flex flex-wrap gap-1">