@nocobase/app-template-default 1.0.0-beta.80 → 1.0.0-beta.82

package/.agents/rules/shell.md

@@ -6,6 +6,8 @@ Read this before changing the layouts, header, sidebar, breadcrumbs, account men
 
 Layouts own breadcrumb route context and render the current page's trail in the header after the sidebar toggle (`client/components/breadcrumbs.tsx`): the route trail by default, or the trail a page declares with `usePageBreadcrumb` from `@nocobase/app-client` when it names records. Pages do not render breadcrumbs themselves. `AppRouter` selects routes and layouts. See [pages and routes](../skills/nocobase-app-development/references/frontend/references/page.md) for each layout's scope.
 
+The route-tree provider remembers each visited ancestor's query while its descendants are open. Default breadcrumbs and back links restore that query, including an empty one, instead of applying detail-only parameters to the list. Keep this provider mounted above page navigation. Explicit breadcrumb/back destinations remain application-owned. See the linked pages-and-routes reference for deep-link and reload fallbacks.
+
 ## Header and sidebar
 
 `client/layouts/components/layout-header.tsx` is a presentation container accepting children. The sidebar is shadcn's Sidebar: `components/app-sidebar.tsx` wraps its provider, desktop icon mode and phone sheet, and `components/navigation-menu.tsx` draws the permission-filtered route tree with `SidebarMenu*`: a top-level group with no page of its own is a section, its entries always shown under a `SidebarGroupLabel` heading, while clickable parents and nested groups are controlled `Collapsible` sub-menus, and an item `client/lib/navigation-transform.ts` marks `section` deeper in the tree is a heading over its direct links inside that menu; a count beside an entry, such as unread items, is passed by the App layout in `NavigationMenu`'s `badges`, keyed by route name. Keep `client/components/ui/sidebar.tsx` as the shadcn CLI writes it except for removing its unused origin-wide `sidebar_state` cookie write; persistence belongs to the application-scoped preference. Customize from outside: widths go through the provider's `style` in spacing units, the phone sheet is rendered in `app-sidebar.tsx` with a translated title, and the provider's Ctrl/Cmd+B shortcut is stopped at `document`. The App layout owns menus, branding, permissions and redirects. Desktop icon mode hides top-level section headings and keeps their entries' icons, shows leaf labels as zero-delay tooltips and opens groups in hover and keyboard-focus popovers, preserving filtered navigation, parent-page links, nested groups and the selected group's highlight. Keep this behavior aligned across layouts. Desktop collapse state is shared through `useSidebarPreference` at `nocobase:sidebar:collapsed:app:<basename>` across layouts and tabs of the same application. `createApp(runtime)` provides a stable store using `runtime.basename`, with only empty/root and boundary slashes normalized; paths and case remain intact. Missing new keys default to expanded without migrating the old shared preference; whether the phone sheet is open stays local to each layout.

package/.agents/rules/workspace.md

@@ -0,0 +1,9 @@
+# Internal workspace packages
+
+The application stays at the workspace root: keep `client/`, `server/`, `cli/`, `database/`, configuration and storage here. New projects declare `packages/*` in their root `pnpm-workspace.yaml`; an existing project adds that pattern while preserving its other workspace and install settings. Run one `pnpm install` at the application root and commit its shared lockfile. Do not create another workspace or lockfile inside a child package.
+
+Use ordinary packages for shared types, utilities or UI. Application-specific pages, routes and migrations still belong in the application. A package boundary does not require publishing or plugin registration. Read [workspace package contracts](../skills/nocobase-app-development/references/dependencies.md#internal-workspace-packages) before adding one, and use the [runnable example](../skills/nocobase-app-development/references/internal-package-example.md) for configuration, application imports and declaration watching.
+
+`pnpm dev`, `pnpm build` and `pnpm build --tar` still run from this directory. `pnpm check` first runs each internal package's `check` script, then checks the application; a missing or empty package `check` script fails before any package checks run. An application with no internal packages succeeds. Root ESLint and Prettier exclude `packages/`, because every package owns its TypeScript, lint and formatting configuration. Run a package's `fix` with `pnpm --filter <package-name> fix`.
+
+Keep internal package directories, workspace patterns and `workspace:` dependencies when merging a newer template. Template upgrades evolve the root application; they do not recreate its internal packages.

package/.prettierignore

@@ -26,3 +26,6 @@ database/*/seeds/
 .agents/*
 !.agents/rules/
 .claude/skills/
+
+# Internal packages run their own formatting through check:packages.
+packages/

package/AGENTS.md

@@ -2,7 +2,7 @@
 
 This is a NocoBase 3 application. Do not apply globally installed NocoBase 2 Skills. You are building the application itself — its pages, its API, its database tables. Everything under this directory is application-owned source code that you may edit directly.
 
-Do not create a plugin to add a feature. Plugins are separately published packages for capabilities shared across several applications; building one for this application's own feature adds a package boundary, a version, and a release process to work that belongs in `client/` and `server/`. Create one only when the user explicitly asks for a reusable published package.
+Do not create a plugin to add a feature. Plugins are separately published packages for capabilities shared across several applications; building one for this application's own feature adds a package boundary, a version, and a release process to work that belongs in `client/` and `server/`. Create one only when the user explicitly asks for a reusable published package. Ordinary internal workspace packages under `packages/` may share code without becoming plugins or being published; follow [internal packages](.agents/rules/workspace.md) when the application needs that boundary.
 
 ## Default template scope
 
@@ -120,6 +120,7 @@ When the built-in mechanism genuinely cannot express what is being asked, changi
 
 | Read                                                                   | When                                                                                                         |
 | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------ |
+| [.agents/rules/workspace.md](.agents/rules/workspace.md)               | Adding internal packages or changing workspace development and validation                                    |
 | [.agents/rules/components.md](.agents/rules/components.md)             | Adding or changing a component, a shadcn primitive, a UI Library item, or the visual design                  |
 | [.agents/rules/shell.md](.agents/rules/shell.md)                       | Changing layouts, the header, sidebar, breadcrumbs, the account menu or loading indicators                   |
 | [.agents/rules/build-and-deploy.md](.agents/rules/build-and-deploy.md) | Changing the build, packing a deployment, the Docker image, `CDN_BASE_URL`, or building for another platform |

package/README.MD

@@ -441,3 +441,7 @@ MIT
 ## Strict startup verification
 
 Set `NOCOBASE_STRICT_STARTUP=true` when running `pnpm dev` or `pnpm start` in automated verification. Startup failures, including job import failures, exit nonzero after resource cleanup. Strict dev runs the server without watch mode so a failed server cannot remain hidden behind a watcher; restart the command after server or configuration changes. Client HMR remains available. Omit the variable or set it to `false` for normal development with server hot reload. Request errors and individual job execution failures do not terminate the application.
+
+## Internal workspace packages
+
+The application can also be the root of a pnpm workspace, with internal packages under `packages/*` and the existing `client/`, `server/` and `database/` directories unchanged. New projects receive this workspace pattern automatically. Internal packages use `workspace:*` dependencies and may remain private. Run installation, development and deployment builds from the application root; `pnpm check` includes the internal packages' own checks. See [internal packages](.agents/rules/workspace.md) for configuration and development conventions.

package/client/components/attachment-list.tsx

@@ -0,0 +1,589 @@
+/**
+ * Files on a record or a message, presented: safe images as thumbnails and everything else as a chip with its name,
+ * size and a download (`AttachmentList`); the files waiting to go with a message (`PendingAttachments`); and a section
+ * of a record's files that takes uploads by picking, pasting or dropping (`AttachmentPanel`). Purely presentational:
+ * the consumer gives the files and hears about previews, uploads and removals. Without `onPreview`, images open in
+ * the item's own dialog and other files download. Every word comes from `labels`, English by default; `{name}`-style
+ * placeholders are filled in here.
+ */
+import {
+  ChevronLeftIcon,
+  ChevronRightIcon,
+  DownloadIcon,
+  FileIcon,
+  Loader2Icon,
+  PaperclipIcon,
+  UploadIcon,
+  XIcon,
+} from 'lucide-react';
+import {
+  useRef,
+  useState,
+  type ClipboardEvent,
+  type DragEvent,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '#components/ui/alert-dialog';
+import { Button } from '#components/ui/button';
+import { Dialog, DialogContent, DialogTitle } from '#components/ui/dialog';
+import { cn } from 'cn';
+
+export interface AttachmentFile {
+  readonly id: string;
+  readonly name: string;
+  /** In bytes, when the source provides it. */
+  readonly size?: number;
+  /** Shown inline for an image. */
+  readonly url: string;
+  readonly downloadUrl: string;
+  /** A safe image the browser may show. */
+  readonly image: boolean;
+  /** The reader may remove it. */
+  readonly canRemove?: boolean;
+}
+
+export interface AttachmentLabels {
+  readonly title: string;
+  readonly images: string;
+  readonly files: string;
+  readonly pending: string;
+  readonly upload: string;
+  /** `{name}` is the file. */
+  readonly preview: string;
+  readonly download: string;
+  readonly remove: string;
+  readonly uploading: string;
+  readonly removeTitle: string;
+  readonly removeDescription: string;
+  readonly removeConfirm: string;
+  readonly cancel: string;
+  readonly previous: string;
+  readonly next: string;
+}
+
+const defaultLabels: AttachmentLabels = {
+  title: 'Attachments',
+  images: 'Images',
+  files: 'Files',
+  pending: 'Files to send',
+  upload: 'Upload',
+  preview: 'Preview {name}',
+  download: 'Download {name}',
+  remove: 'Remove {name}',
+  uploading: 'Uploading {name}…',
+  removeTitle: 'Remove this file?',
+  removeDescription: '“{name}” is deleted for everyone.',
+  removeConfirm: 'Remove',
+  cancel: 'Cancel',
+  previous: 'Previous file',
+  next: 'Next file',
+};
+
+function fill(text: string, values: Readonly<Record<string, string>>): string {
+  return text.replace(/\{(\w+)\}/gu, (whole, key: string) =>
+    key in values ? (values[key] ?? whole) : whole,
+  );
+}
+
+function bytes(size: number | undefined, locale: string | undefined): string {
+  if (size === undefined) return '';
+  const units = ['B', 'KB', 'MB', 'GB'] as const;
+  let value = size;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  const number = new Intl.NumberFormat(locale, {
+    maximumFractionDigits: unit === 0 ? 0 : 1,
+  }).format(value);
+  return `${number} ${units[unit] ?? 'B'}`;
+}
+
+export interface AttachmentListProps {
+  /** Override downloads, for example to validate URLs or authenticate a request. */
+  readonly onDownload?: (file: AttachmentFile) => void;
+  readonly files: readonly AttachmentFile[];
+  /** Previews a file the consumer's way, stepping through `files` from `index`; every file opens it. */
+  readonly onPreview?: (
+    files: readonly AttachmentFile[],
+    index: number,
+  ) => void;
+  /** Asks to remove a file the reader may remove; the consumer confirms it. */
+  readonly onRemove?: (file: AttachmentFile) => void;
+  readonly removingId?: string | null;
+  readonly locale?: string;
+  readonly labels?: AttachmentLabels;
+  readonly className?: string;
+}
+
+export function AttachmentList({
+  files,
+  onDownload,
+  onPreview,
+  onRemove,
+  removingId = null,
+  locale,
+  labels = defaultLabels,
+  className,
+}: AttachmentListProps): ReactElement | null {
+  const [shown, setShown] = useState<number | null>(null);
+  const images = files.filter((file) => file.image);
+  const others = files.filter((file) => !file.image);
+  // The consumer's preview steps through every file; the item's own only through the images.
+  const previewed = onPreview ? [...images, ...others] : images;
+  if (files.length === 0) return null;
+  const open = (file: AttachmentFile): void => {
+    const index = previewed.indexOf(file);
+    if (onPreview) onPreview(previewed, index);
+    else setShown(index);
+  };
+
+  const removeButton = (file: AttachmentFile, overlay: boolean): ReactNode =>
+    onRemove && file.canRemove ? (
+      <Button
+        variant={overlay ? 'secondary' : 'ghost'}
+        size='icon-xs'
+        className={cn(
+          overlay &&
+            'absolute top-1 right-1 opacity-90 shadow-sm sm:opacity-0 sm:group-hover:opacity-100 sm:focus-visible:opacity-100',
+        )}
+        aria-label={fill(labels.remove, { name: file.name })}
+        disabled={removingId === file.id}
+        onClick={() => onRemove(file)}
+      >
+        {removingId === file.id ? (
+          <Loader2Icon className='animate-spin' />
+        ) : (
+          <XIcon />
+        )}
+      </Button>
+    ) : null;
+
+  return (
+    <div
+      className={cn('flex min-w-0 flex-col gap-2', className)}
+      data-slot='attachment-list'
+    >
+      {images.length > 0 ? (
+        <ul className='flex flex-wrap gap-2' aria-label={labels.images}>
+          {images.map((file) => (
+            <li key={file.id} className='group relative'>
+              <button
+                type='button'
+                className='block size-20 overflow-hidden rounded-md border bg-muted focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none sm:size-24'
+                aria-label={fill(labels.preview, { name: file.name })}
+                title={
+                  file.size === undefined
+                    ? file.name
+                    : `${file.name} · ${bytes(file.size, locale)}`
+                }
+                onClick={() => open(file)}
+              >
+                <img
+                  src={file.url}
+                  alt={file.name}
+                  loading='lazy'
+                  className='size-full object-cover'
+                />
+              </button>
+              {removeButton(file, true)}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {others.length > 0 ? (
+        <ul className='flex min-w-0 flex-wrap gap-2' aria-label={labels.files}>
+          {others.map((file) => (
+            <li
+              key={file.id}
+              className='flex max-w-full min-w-0 items-center gap-1 rounded-md border bg-background py-1 pr-1 pl-2 text-sm'
+            >
+              <FileIcon
+                className='size-3.5 shrink-0 text-muted-foreground'
+                aria-hidden='true'
+              />
+              {onPreview ? (
+                <button
+                  type='button'
+                  className='min-w-0 truncate text-left hover:underline focus-visible:underline focus-visible:outline-none'
+                  aria-label={fill(labels.preview, { name: file.name })}
+                  onClick={() => open(file)}
+                >
+                  {file.name}
+                </button>
+              ) : (
+                <a
+                  href={file.downloadUrl}
+                  download={file.name}
+                  className='min-w-0 truncate hover:underline'
+                >
+                  {file.name}
+                </a>
+              )}
+              <span className='shrink-0 text-xs text-muted-foreground tabular-nums'>
+                {bytes(file.size, locale)}
+              </span>
+              <Button
+                variant='ghost'
+                size='icon-xs'
+                className='shrink-0 text-muted-foreground'
+                aria-label={fill(labels.download, { name: file.name })}
+                render={
+                  onDownload ? undefined : (
+                    <a href={file.downloadUrl} download={file.name} />
+                  )
+                }
+                nativeButton={Boolean(onDownload)}
+                onClick={onDownload ? () => onDownload(file) : undefined}
+              >
+                <DownloadIcon />
+              </Button>
+              {removeButton(file, false)}
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {shown !== null && shown >= 0 ? (
+        <ImagePreview
+          files={previewed}
+          index={shown}
+          labels={labels}
+          onClose={() => setShown(null)}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+/** The item's own preview: images one at a time, with stepping and a download. */
+function ImagePreview({
+  files,
+  index: initial,
+  labels,
+  onClose,
+}: {
+  readonly files: readonly AttachmentFile[];
+  readonly index: number;
+  readonly labels: AttachmentLabels;
+  readonly onClose: () => void;
+}): ReactElement | null {
+  const [index, setIndex] = useState(initial);
+  const file = files[index];
+  if (!file) return null;
+  const step = (by: number): void =>
+    setIndex((value) => (value + by + files.length) % files.length);
+  return (
+    <Dialog
+      open
+      onOpenChange={(open) => {
+        if (!open) onClose();
+      }}
+    >
+      <DialogContent className='flex max-h-[calc(100dvh-2rem)] max-w-[calc(100%-2rem)] flex-col gap-3 sm:max-w-4xl'>
+        <div className='flex min-w-0 items-center gap-2 pr-8'>
+          <DialogTitle className='min-w-0 flex-1 truncate'>
+            {file.name}
+          </DialogTitle>
+          {files.length > 1 ? (
+            <>
+              <Button
+                variant='ghost'
+                size='icon-sm'
+                aria-label={labels.previous}
+                onClick={() => step(-1)}
+              >
+                <ChevronLeftIcon />
+              </Button>
+              <Button
+                variant='ghost'
+                size='icon-sm'
+                aria-label={labels.next}
+                onClick={() => step(1)}
+              >
+                <ChevronRightIcon />
+              </Button>
+            </>
+          ) : null}
+          <Button
+            variant='ghost'
+            size='icon-sm'
+            aria-label={fill(labels.download, { name: file.name })}
+            render={<a href={file.downloadUrl} download={file.name} />}
+            nativeButton={false}
+          >
+            <DownloadIcon />
+          </Button>
+        </div>
+        <div className='flex min-h-0 flex-1 items-center justify-center overflow-auto'>
+          <img
+            src={file.url}
+            alt={file.name}
+            className='max-h-[75dvh] max-w-full object-contain'
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+/** A file being added: its name while it uploads, then a chip that can be taken back. */
+export interface PendingAttachment {
+  readonly key: string;
+  readonly name: string;
+  readonly size: number;
+  /** Uploaded: its thumbnail when it is an image. */
+  readonly done: boolean;
+  readonly thumbnailUrl?: string | null;
+}
+
+/** The files added to a message before it is sent. */
+export function PendingAttachments({
+  files,
+  onRemove,
+  locale,
+  labels = defaultLabels,
+}: {
+  readonly files: readonly PendingAttachment[];
+  readonly onRemove: (key: string) => void;
+  readonly locale?: string;
+  readonly labels?: AttachmentLabels;
+}): ReactElement | null {
+  if (files.length === 0) return null;
+  return (
+    <ul
+      className='flex min-w-0 flex-wrap gap-2'
+      aria-label={labels.pending}
+      data-testid='pending-attachments'
+    >
+      {files.map((file) => (
+        <li
+          key={file.key}
+          className='flex max-w-full min-w-0 items-center gap-1.5 rounded-md border bg-background py-1 pr-1 pl-2 text-sm'
+        >
+          {file.done && file.thumbnailUrl ? (
+            <img
+              src={file.thumbnailUrl}
+              alt=''
+              className='size-5 shrink-0 rounded-sm object-cover'
+            />
+          ) : file.done ? (
+            <FileIcon
+              className='size-3.5 shrink-0 text-muted-foreground'
+              aria-hidden='true'
+            />
+          ) : (
+            <Loader2Icon
+              className='size-3.5 shrink-0 animate-spin'
+              aria-label={fill(labels.uploading, { name: file.name })}
+            />
+          )}
+          <span className='min-w-0 truncate'>{file.name}</span>
+          <span className='shrink-0 text-xs text-muted-foreground tabular-nums'>
+            {bytes(file.size, locale)}
+          </span>
+          <Button
+            variant='ghost'
+            size='icon-xs'
+            aria-label={fill(labels.remove, { name: file.name })}
+            onClick={() => onRemove(file.key)}
+          >
+            <XIcon />
+          </Button>
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export interface AttachmentPanelProps extends Omit<
+  AttachmentListProps,
+  'onRemove' | 'className'
+> {
+  /** Takes picked, pasted or dropped files; without it, the panel only lists. Nothing renders without files then. */
+  readonly onUpload?: (files: readonly File[]) => void;
+  /** The names of the files uploading now. */
+  readonly uploading?: readonly string[];
+  /** Under the title, such as the size limit. */
+  readonly hint?: string;
+  /** Removes a file after the item confirmed it. */
+  readonly onRemove?: (file: AttachmentFile) => Promise<void>;
+  readonly className?: string;
+}
+
+/**
+ * A record's own files as a section: "Upload", or paste and drop while it has focus; removing asks first. Without
+ * files it is one compact row.
+ */
+export function AttachmentPanel({
+  files,
+  onUpload,
+  uploading = [],
+  hint,
+  onRemove,
+  labels = defaultLabels,
+  className,
+  ...list
+}: AttachmentPanelProps): ReactElement | null {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dragging, setDragging] = useState(false);
+  const [removing, setRemoving] = useState<AttachmentFile | null>(null);
+  const [busyId, setBusyId] = useState<string | null>(null);
+  if (files.length === 0 && !onUpload) return null;
+  const empty = files.length === 0;
+  const status =
+    uploading.length > 0
+      ? fill(labels.uploading, { name: uploading[0] ?? '' })
+      : hint;
+
+  const dropHandlers = onUpload
+    ? {
+        onDragOver: (event: DragEvent) => {
+          if (!event.dataTransfer.types.includes('Files')) return;
+          event.preventDefault();
+          setDragging(true);
+        },
+        onDragLeave: () => setDragging(false),
+        onDrop: (event: DragEvent) => {
+          setDragging(false);
+          if (event.dataTransfer.files.length === 0) return;
+          event.preventDefault();
+          onUpload([...event.dataTransfer.files]);
+        },
+        onPaste: (event: ClipboardEvent) => {
+          const pasted = [...event.clipboardData.files];
+          if (pasted.length === 0) return;
+          event.preventDefault();
+          onUpload(pasted);
+        },
+      }
+    : {};
+
+  const uploadButton = onUpload ? (
+    <>
+      <Button
+        variant='ghost'
+        size='sm'
+        disabled={uploading.length > 0}
+        onClick={() => inputRef.current?.click()}
+      >
+        {uploading.length > 0 ? (
+          <Loader2Icon data-icon='inline-start' className='animate-spin' />
+        ) : (
+          <UploadIcon data-icon='inline-start' />
+        )}
+        {labels.upload}
+      </Button>
+      <input
+        ref={inputRef}
+        type='file'
+        multiple
+        hidden
+        data-testid='attachment-file-input'
+        onChange={(event) => {
+          onUpload([...(event.target.files ?? [])]);
+          event.target.value = '';
+        }}
+      />
+    </>
+  ) : null;
+
+  return (
+    <section
+      aria-label={labels.title}
+      tabIndex={onUpload ? 0 : undefined}
+      className={cn(
+        'rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        empty
+          ? 'flex flex-wrap items-center justify-between gap-2 border border-dashed px-4 py-2'
+          : 'space-y-3 border bg-card p-4 text-card-foreground',
+        dragging && 'border-primary bg-primary/5',
+        className,
+      )}
+      data-slot='attachment-panel'
+      {...dropHandlers}
+    >
+      {empty ? (
+        <>
+          <div className='flex min-w-0 items-center gap-2 text-sm text-muted-foreground'>
+            <PaperclipIcon className='size-4 shrink-0' aria-hidden='true' />
+            <h2 className='font-medium'>{labels.title}</h2>
+            {status ? (
+              <span className='hidden truncate sm:inline'>{status}</span>
+            ) : null}
+          </div>
+          {uploadButton}
+        </>
+      ) : (
+        <>
+          <div className='flex items-start justify-between gap-2'>
+            <div className='min-w-0'>
+              <h2 className='flex items-center gap-2 text-sm font-semibold'>
+                {labels.title}
+                <span className='text-xs font-normal text-muted-foreground tabular-nums'>
+                  {files.length}
+                </span>
+              </h2>
+              {status ? (
+                <p className='text-xs text-muted-foreground'>{status}</p>
+              ) : null}
+            </div>
+            {uploadButton}
+          </div>
+          <AttachmentList
+            files={files}
+            labels={labels}
+            removingId={busyId}
+            {...list}
+            {...(onRemove ? { onRemove: setRemoving } : {})}
+          />
+        </>
+      )}
+      <AlertDialog
+        open={removing !== null}
+        onOpenChange={(open) => {
+          if (!open) setRemoving(null);
+        }}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{labels.removeTitle}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {fill(labels.removeDescription, { name: removing?.name ?? '' })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={busyId !== null}>
+              {labels.cancel}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              variant='destructive'
+              disabled={busyId !== null}
+              onClick={() => {
+                if (!removing || !onRemove) return;
+                setBusyId(removing.id);
+                void onRemove(removing)
+                  .then(() => setRemoving(null))
+                  .catch(() => undefined)
+                  .finally(() => setBusyId(null));
+              }}
+            >
+              {labels.removeConfirm}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </section>
+  );
+}