@nocobase/app-template-default 0.0.0-stage → 1.0.0-beta.57

package/client/extensions/nocobase-file-component-ui/lib/message-key.ts

@@ -0,0 +1,18 @@
+// Built-in errors remain readable when passed between Registry components.
+const messageKeys = new Map<string, string>([
+  ['File upload failed.', 'uploadFailed'],
+  ['The maximum number of files has been reached.', 'fileLimitReached'],
+  ['File exceeds the maximum size.', 'fileTooLarge'],
+  ['File type is not allowed.', 'fileTypeNotAllowed'],
+  ['File removal failed.', 'removalFailed'],
+  ['File URL is not allowed.', 'urlNotAllowed'],
+  ['File download failed.', 'downloadFailed'],
+  ['File URL is missing or not allowed.', 'invalidUrl'],
+  ['Unable to load the PDF preview.', 'pdfPreviewFailed'],
+  ['The file URL returned HTML or XML instead of a PDF.', 'pdfPreviewMarkup'],
+  ['Unable to load the file preview.', 'previewFailed'],
+]);
+
+export function messageKey(message: string): string {
+  return messageKeys.get(message) ?? message;
+}

package/client/extensions/nocobase-file-component-ui/types.ts

@@ -0,0 +1,69 @@
+import type { ReactNode } from 'react';
+import type {
+  ClientFileRepository,
+  FileRecord,
+} from '@nocobase/app-plugin-file/client';
+
+export type { FileRecord } from '@nocobase/app-plugin-file/client';
+export type FileUploadStatus = 'idle' | 'uploading' | 'error';
+
+export interface FileUiLabels {
+  readonly choose?: string;
+  readonly empty?: string;
+  readonly preview?: string;
+  readonly download?: string;
+  readonly remove?: string;
+  readonly retry?: string;
+}
+
+export interface FileUploadFieldProps {
+  readonly repository: ClientFileRepository;
+  readonly value: readonly FileRecord[];
+  readonly onChange: (value: readonly FileRecord[]) => void;
+  readonly onError?: (error: Error) => void;
+  readonly onStatusChange?: (status: FileUploadStatus) => void;
+  readonly multiple?: boolean;
+  readonly accept?: readonly string[];
+  readonly maxSize?: number;
+  readonly maxFiles?: number;
+  readonly disabled?: boolean;
+  /** Deletes metadata only; false removes the selection without deleting a record. */
+  readonly removeOnDelete?: boolean;
+  readonly labels?: FileUiLabels;
+}
+
+export interface FileListProps {
+  readonly files: readonly FileRecord[];
+  readonly onPreview?: (file: FileRecord) => void;
+  readonly onDownload?: (file: FileRecord) => void;
+  readonly onRemove?: (file: FileRecord) => void | Promise<void>;
+  readonly onError?: (error: Error) => void;
+  readonly labels?: FileUiLabels;
+  readonly emptyState?: ReactNode;
+}
+
+export interface FilePreviewDialogProps {
+  readonly files: readonly FileRecord[];
+  readonly initialIndex?: number;
+  readonly open: boolean;
+  readonly onOpenChange: (open: boolean) => void;
+  readonly onError?: (error: Error) => void;
+  readonly download?: boolean;
+  readonly labels?: FileUiLabels;
+}
+
+export interface FilePreviewFieldProps {
+  readonly files: readonly FileRecord[];
+  readonly labels?: FileUiLabels;
+  readonly emptyState?: ReactNode;
+  readonly showFilenames?: boolean;
+  readonly onError?: (error: Error) => void;
+}
+
+export interface FileThumbnailProps {
+  readonly file: FileRecord;
+  readonly url?: string;
+  readonly alt?: string;
+  /** Show the file-type icon without loading the image. */
+  readonly iconOnly?: boolean;
+}

package/client/extensions/nocobase-inbox/decision-actions-bar.tsx

@@ -0,0 +1,140 @@
+import { useTranslation } from '@nocobase/i18n/client';
+import { SendIcon } from 'lucide-react';
+import { type KeyboardEvent, type ReactElement, useState } from 'react';
+
+import { Button } from '#components/ui/button';
+import { Kbd } from '#components/ui/kbd';
+import { Spinner } from '#components/ui/spinner';
+import { Textarea } from '#components/ui/textarea';
+
+export type ApprovalDecision = 'approve' | 'reject';
+
+export interface DecisionActionsBarProps {
+  readonly itemTitle: string;
+  /** Other words for the two decisions, such as a design proposal's "Approve for development" and "Send back". */
+  readonly labels?: Partial<Record<ApprovalDecision, string>>;
+  /** The decision in flight. */
+  readonly pending: ApprovalDecision | null;
+  readonly disabled: boolean;
+  readonly onRun: (decision: ApprovalDecision, comment: string) => void;
+}
+
+/**
+ * The buttons of an approve-or-reject decision, for a renderer's `Actions`: approve (primary, first) decides at once;
+ * reject (outline) opens an inline comment field first, which it needs (Enter sends, Shift + Enter starts a new line,
+ * as the hint beside the buttons says). What the decision is about opens from the detail pane's title.
+ */
+export function DecisionActionsBar({
+  itemTitle,
+  pending,
+  disabled,
+  onRun,
+  labels,
+}: DecisionActionsBarProps): ReactElement {
+  const { t } = useTranslation();
+  const [commenting, setCommenting] = useState<ApprovalDecision | null>(null);
+  const [comment, setComment] = useState('');
+  const label = (decision: ApprovalDecision): string =>
+    labels?.[decision] ??
+    (decision === 'approve'
+      ? t('inbox.request.approve', { defaultValue: 'Approve' })
+      : t('inbox.request.reject', { defaultValue: 'Reject' }));
+
+  function reset(): void {
+    setCommenting(null);
+    setComment('');
+  }
+
+  function send(): void {
+    if (!commenting || !comment.trim()) return;
+    onRun(commenting, comment.trim());
+    reset();
+  }
+
+  if (commenting)
+    return (
+      <div className='w-full space-y-2' data-commenting={commenting}>
+        <Textarea
+          value={comment}
+          rows={3}
+          autoFocus
+          placeholder={t('inbox.request.commentPlaceholder', {
+            defaultValue: 'Write something…',
+          })}
+          aria-label={t('inbox.request.commentFor', {
+            action: label(commenting),
+            title: itemTitle,
+            defaultValue: '{{action}}: {{title}}',
+          })}
+          onChange={(event) => setComment(event.target.value)}
+          onKeyDown={(event) => {
+            if (isSubmitEnter(event)) {
+              event.preventDefault();
+              send();
+            }
+            if (event.key === 'Escape') {
+              event.stopPropagation();
+              reset();
+            }
+          }}
+        />
+        <div className='flex flex-wrap items-center justify-end gap-2'>
+          <SubmitHint />
+          <Button variant='outline' onClick={reset}>
+            {t('inbox.cancel', { defaultValue: 'Cancel' })}
+          </Button>
+          <Button disabled={disabled || !comment.trim()} onClick={send}>
+            <SendIcon data-icon='inline-start' />
+            {label(commenting)}
+          </Button>
+        </div>
+      </div>
+    );
+
+  return (
+    <div className='flex flex-wrap items-center gap-2'>
+      <Button
+        disabled={disabled || pending !== null}
+        data-action='approve'
+        onClick={() => onRun('approve', '')}
+      >
+        {pending === 'approve' ? <Spinner data-icon='inline-start' /> : null}
+        {label('approve')}
+      </Button>
+      <Button
+        variant='outline'
+        disabled={disabled || pending !== null}
+        data-action='reject'
+        onClick={() => setCommenting('reject')}
+      >
+        {pending === 'reject' ? <Spinner data-icon='inline-start' /> : null}
+        {label('reject')}
+      </Button>
+    </div>
+  );
+}
+
+/** Enter sends a message box; Shift + Enter starts a new line, Alt + Enter is left alone, and an IME's Enter only confirms. */
+function isSubmitEnter(event: KeyboardEvent): boolean {
+  return (
+    event.key === 'Enter' &&
+    !event.shiftKey &&
+    !event.altKey &&
+    !event.nativeEvent.isComposing &&
+    event.keyCode !== 229
+  );
+}
+
+/** The keys of the comment box. */
+function SubmitHint(): ReactElement {
+  const { t } = useTranslation();
+  return (
+    <span className='mr-auto inline-flex items-center gap-1 text-xs text-muted-foreground'>
+      <Kbd>Enter</Kbd>
+      {t('inbox.request.quickSend', { defaultValue: 'to send' })}
+      <Kbd className='ml-2'>Shift</Kbd>
+      <Kbd>Enter</Kbd>
+      {t('inbox.request.newLine', { defaultValue: 'for a new line' })}
+    </span>
+  );
+}

package/client/extensions/nocobase-inbox/frame.ts

@@ -0,0 +1,31 @@
+/**
+ * The inbox's own wording (the frame around each contributor's parts). It is taken outside a contributor's namespace
+ * (`ContributorScope`) and passed in, so the frame reads the same whichever namespace the contributor's parts use.
+ */
+import { useTranslation } from '@nocobase/i18n/client';
+
+import type { InboxAction } from './inbox-actions.js';
+import type { InboxTranslate } from './model.js';
+
+export interface InboxFrameText {
+  readonly t: InboxTranslate;
+  readonly language: string;
+}
+
+/** The inbox's own wording, in the namespace the inbox renders in. Call it outside `ContributorScope`. */
+export function useInboxFrameText(): InboxFrameText {
+  const { t, i18n } = useTranslation();
+  return { t, language: i18n.language };
+}
+
+/** The label of an action, in the inbox's wording. */
+export function actionLabel(t: InboxTranslate, action: InboxAction): string {
+  switch (action) {
+    case 'read':
+      return t('inbox.actions.read', { defaultValue: 'Mark as read' });
+    case 'unread':
+      return t('inbox.actions.unread', { defaultValue: 'Mark as unread' });
+    case 'delete':
+      return t('inbox.actions.delete', { defaultValue: 'Delete' });
+  }
+}

package/client/extensions/nocobase-inbox/inbox-actions.ts

@@ -0,0 +1,21 @@
+import {
+  MailIcon,
+  MailOpenIcon,
+  Trash2Icon,
+  type LucideIcon,
+} from 'lucide-react';
+
+import type { InboxEntry } from './model.js';
+
+/** What a card offers: read ↔ unread, and delete (the in-app inbox has no archive). */
+export type InboxAction = 'read' | 'unread' | 'delete';
+
+export const INBOX_ACTION_ICON: Readonly<Record<InboxAction, LucideIcon>> = {
+  read: MailOpenIcon,
+  unread: MailIcon,
+  delete: Trash2Icon,
+};
+
+export function inboxActionsFor(entry: InboxEntry): readonly InboxAction[] {
+  return [entry.item.readAt ? 'unread' : 'read', 'delete'];
+}

package/client/extensions/nocobase-inbox/inbox-detail.tsx

@@ -0,0 +1,386 @@
+import { ArrowLeftIcon, ArrowUpRightIcon, InboxIcon } from 'lucide-react';
+import type { ReactElement, ReactNode } from 'react';
+import { Link } from 'react-router';
+
+import { Button } from '#components/ui/button';
+import {
+  Empty,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '#components/ui/empty';
+import { Skeleton } from '#components/ui/skeleton';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '#components/ui/tooltip';
+
+import {
+  INBOX_ACTION_ICON,
+  inboxActionsFor,
+  type InboxAction,
+} from './inbox-actions.js';
+import {
+  actionLabel,
+  useInboxFrameText,
+  type InboxFrameText,
+} from './frame.js';
+import { InboxTypeIcon } from './inbox-item.js';
+import { entryLink, isSettled, type InboxEntry } from './model.js';
+import { ContributorScope } from './registry-scope.js';
+import {
+  rendererKey,
+  useRendererOf,
+  type InboxCanAct,
+  type InboxEntryContext,
+  type InboxEntryRenderer,
+} from './registry.js';
+
+/** What the detail pane's toolbar slot receives about the item shown. */
+export interface InboxDetailToolbarInput {
+  readonly entry: InboxEntry;
+  /** The title shown, as its contributor words it. */
+  readonly title: string;
+  /** What its contributor says the item is about (`InboxEntryRenderer.context`). */
+  readonly context: InboxEntryContext;
+}
+
+export interface InboxDetailProps {
+  readonly entry: InboxEntry | null;
+  readonly busy: boolean;
+  readonly onBack: () => void;
+  readonly onAction: (entry: InboxEntry, action: InboxAction) => void;
+  readonly onOpen: (entry: InboxEntry) => void;
+  /**
+   * What the application places before the read and delete buttons, such as an "Ask agent" button; rendered inside the
+   * item's contributor scope, so it may also register what the item is about with a page context.
+   */
+  readonly toolbar?: (input: InboxDetailToolbarInput) => ReactNode;
+  /** The prefix of the element ids it renders. */
+  readonly idPrefix?: string;
+}
+
+/**
+ * The inbox's detail pane: everything needed to decide without leaving the inbox. Its header (`InboxDetailHeader`)
+ * holds what kind of item it is, with read / delete icon buttons; the title, which opens what the item is about when it
+ * has somewhere to go; and right under it the contributor's decision actions while the viewer may still act. Below
+ * it, the contributor's body.
+ *
+ * What the item says and offers is its contributor's (`registry.ts`), rendered in the contributor's namespace; an item
+ * nobody renders shows its title and body as sent, and nothing to act on.
+ */
+export function InboxDetail({
+  entry,
+  idPrefix = 'nocobase-inbox',
+  ...props
+}: InboxDetailProps): ReactElement {
+  const frame = useInboxFrameText();
+  const rendererOf = useRendererOf();
+  if (!entry)
+    return (
+      <div className='flex h-full items-center justify-center p-6'>
+        <Empty className='min-h-48'>
+          <EmptyHeader>
+            <EmptyMedia variant='icon'>
+              <InboxIcon />
+            </EmptyMedia>
+            <EmptyTitle>
+              {frame.t('inbox.nothingSelected', {
+                defaultValue: 'Select an item to view it',
+              })}
+            </EmptyTitle>
+          </EmptyHeader>
+        </Empty>
+      </div>
+    );
+  const renderer = rendererOf(entry);
+  return (
+    <ContributorScope
+      key={`${entry.item.id}:${rendererKey(renderer)}`}
+      namespace={renderer.namespace}
+      resources={renderer.resources}
+    >
+      <EntryDetail
+        {...props}
+        entry={entry}
+        renderer={renderer}
+        frame={frame}
+        idPrefix={idPrefix}
+      />
+    </ContributorScope>
+  );
+}
+
+const noModel = (): never => null as never;
+const noAction = (): InboxCanAct => ({ state: 'none' });
+
+function EntryDetail({
+  entry,
+  renderer,
+  frame,
+  busy,
+  onBack,
+  onAction,
+  onOpen,
+  toolbar,
+  idPrefix,
+}: Omit<InboxDetailProps, 'entry'> & {
+  readonly entry: InboxEntry;
+  readonly renderer: InboxEntryRenderer<never>;
+  readonly frame: InboxFrameText;
+  readonly idPrefix: string;
+}): ReactElement {
+  const { t } = frame;
+  const { item, notice } = entry;
+  // The renderer is fixed for this component (keyed by it), so its hooks always run in the same order.
+  const wording = renderer.useWording();
+  const useModel = renderer.useModel ?? noModel;
+  const model = useModel(entry);
+  const useCanAct = renderer.useCanAct ?? noAction;
+  const canAct = useCanAct(entry, model);
+  const settled = isSettled(entry);
+  const { title, sentence } = wording.text(entry, model);
+  const link = entryLink(entry);
+  const context = renderer.context?.(entry, model) ?? {};
+  const { Actions, Body } = renderer;
+  const parts = {
+    entry,
+    model,
+    title,
+    onOpen: link ? () => onOpen(entry) : undefined,
+    onDecided: () => {
+      if (!item.readAt) onAction(entry, 'read');
+    },
+  };
+  const titleId = `${idPrefix}-detail-title`;
+  const outcome = notice?.outcome
+    ? (wording.outcome?.(notice.outcome) ??
+      t(`inbox.outcomes.${notice.outcome}`, { defaultValue: notice.outcome }))
+    : null;
+
+  return (
+    <article
+      className='flex min-h-full flex-col'
+      aria-labelledby={titleId}
+      data-testid={`${idPrefix}-detail`}
+    >
+      <InboxDetailHeader
+        titleId={titleId}
+        icon={<InboxTypeIcon entry={entry} renderer={renderer} />}
+        kind={wording.label(entry, 'detail')}
+        status={
+          settled
+            ? [t('inbox.resolved', { defaultValue: 'Handled' }), outcome]
+                .filter(Boolean)
+                .join(' · ')
+            : undefined
+        }
+        tools={
+          <>
+            {toolbar?.({ entry, title, context })}
+            {inboxActionsFor(entry).map((action) => {
+              const Icon = INBOX_ACTION_ICON[action];
+              return (
+                <IconAction
+                  key={action}
+                  label={actionLabel(t, action)}
+                  disabled={busy}
+                  onClick={() => onAction(entry, action)}
+                >
+                  <Icon />
+                </IconAction>
+              );
+            })}
+          </>
+        }
+        title={title}
+        href={link}
+        openLabel={wording.open ?? t('inbox.open', { defaultValue: 'Open' })}
+        onOpen={() => onOpen(entry)}
+        sentence={sentence}
+        actions={
+          canAct.state === 'loading' ? (
+            <div
+              role='status'
+              aria-label={t('inbox.loading', { defaultValue: 'Loading' })}
+              className='flex gap-2'
+            >
+              <Skeleton className='h-8 w-20' />
+              <Skeleton className='h-8 w-20' />
+            </div>
+          ) : canAct.state === 'no' ? (
+            <p className='text-sm text-muted-foreground'>{canAct.reason}</p>
+          ) : canAct.state === 'yes' && Actions ? (
+            <Actions {...parts} />
+          ) : null
+        }
+        onBack={onBack}
+        backLabel={t('inbox.back', { defaultValue: 'Back to the list' })}
+      />
+      <div className='flex flex-1 flex-col gap-6 p-5 md:px-6'>
+        {Body ? <Body {...parts} /> : null}
+      </div>
+    </article>
+  );
+}
+
+export interface InboxDetailHeaderProps {
+  /** The id of the title, for the pane's `aria-labelledby`. */
+  readonly titleId: string;
+  /** The kind's icon. */
+  readonly icon: ReactNode;
+  /** What kind of item it is, in words. */
+  readonly kind: string;
+  /** How it ended, beside the kind, such as "Handled · Approved". */
+  readonly status?: ReactNode;
+  /** Compact icon buttons at the end of the kind line: read, delete, and what the application adds. */
+  readonly tools?: ReactNode;
+  /** The title, or a placeholder for it while the item loads. */
+  readonly title: ReactNode;
+  /** Where the title goes; a plain heading without it. */
+  readonly href?: string | null;
+  /** What following the title does, such as "Open issue", shown on hover. */
+  readonly openLabel?: string;
+  /** Called on a plain click of the title instead of following `href`; a click with a modifier key still follows it. */
+  readonly onOpen?: () => void;
+  /** The one sentence under the title. */
+  readonly sentence?: ReactNode;
+  /** A line of facts under the sentence, such as a status and who proposed it. */
+  readonly meta?: ReactNode;
+  /** The decision's buttons, or why there are none, right under the title. */
+  readonly actions?: ReactNode;
+  readonly onBack: () => void;
+  readonly backLabel: string;
+}
+
+/**
+ * The header every kind of item shares in the detail pane: a small kind line (icon, kind, how it ended, and compact
+ * icon buttons at its end), then the title, which is itself the link to what the item is about (an arrow after it says
+ * so), the sentence, and the decision's buttons right under them. A category with a detail of its own (a collection's
+ * `Detail`) renders it too, so every kind reads the same.
+ */
+export function InboxDetailHeader({
+  titleId,
+  icon,
+  kind,
+  status,
+  tools,
+  title,
+  href,
+  openLabel,
+  onOpen,
+  sentence,
+  meta,
+  actions,
+  onBack,
+  backLabel,
+}: InboxDetailHeaderProps): ReactElement {
+  return (
+    <header className='sticky top-0 z-10 flex flex-col gap-3 border-b bg-background/95 p-5 backdrop-blur-md md:px-6'>
+      <div className='flex min-h-7 items-center gap-2'>
+        <Button
+          variant='ghost'
+          size='icon-sm'
+          className='-ml-1.5 lg:hidden'
+          aria-label={backLabel}
+          onClick={onBack}
+        >
+          <ArrowLeftIcon />
+        </Button>
+        {icon}
+        <span className='min-w-0 truncate text-sm text-muted-foreground'>
+          {kind}
+        </span>
+        {status ? (
+          <span className='shrink-0 text-xs text-muted-foreground'>
+            {status}
+          </span>
+        ) : null}
+        {tools ? (
+          <div className='ml-auto flex items-center gap-0.5'>{tools}</div>
+        ) : null}
+      </div>
+      <div className='flex flex-col gap-1'>
+        <h2
+          id={titleId}
+          className='font-heading text-lg font-semibold tracking-tight wrap-anywhere'
+        >
+          {href ? (
+            <Link
+              to={href}
+              title={openLabel}
+              data-slot='inbox-detail-link'
+              className='rounded-sm underline-offset-4 outline-none hover:underline focus-visible:ring-3 focus-visible:ring-ring/50'
+              onClick={(event) => {
+                if (
+                  !onOpen ||
+                  event.button !== 0 ||
+                  event.metaKey ||
+                  event.ctrlKey ||
+                  event.shiftKey ||
+                  event.altKey
+                )
+                  return;
+                event.preventDefault();
+                onOpen();
+              }}
+            >
+              {title}
+              <ArrowUpRightIcon
+                aria-hidden='true'
+                className='ml-1 inline size-4 align-baseline text-muted-foreground'
+              />
+            </Link>
+          ) : (
+            title
+          )}
+        </h2>
+        {sentence ? (
+          <p className='text-sm text-muted-foreground wrap-anywhere'>
+            {sentence}
+          </p>
+        ) : null}
+        {meta ? (
+          <div className='flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground'>
+            {meta}
+          </div>
+        ) : null}
+      </div>
+      {actions ? (
+        <div className='flex flex-wrap items-center gap-2'>{actions}</div>
+      ) : null}
+    </header>
+  );
+}
+
+function IconAction({
+  label,
+  disabled,
+  onClick,
+  children,
+}: {
+  readonly label: string;
+  readonly disabled?: boolean;
+  readonly onClick: () => void;
+  readonly children: ReactNode;
+}): ReactElement {
+  return (
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <Button
+            variant='ghost'
+            size='icon-sm'
+            aria-label={label}
+            disabled={disabled}
+            onClick={onClick}
+          />
+        }
+      >
+        {children}
+      </TooltipTrigger>
+      <TooltipContent side='bottom'>{label}</TooltipContent>
+    </Tooltip>
+  );
+}