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

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

@@ -0,0 +1,274 @@
+import {
+  CheckCircle2Icon,
+  ChevronRightIcon,
+  MoreHorizontalIcon,
+} from 'lucide-react';
+import { createElement, type KeyboardEvent, type ReactElement } from 'react';
+
+import { Button } from '#components/ui/button';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from '#components/ui/context-menu';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '#components/ui/dropdown-menu';
+import { cn } from 'cn';
+
+import {
+  actionLabel,
+  useInboxFrameText,
+  type InboxFrameText,
+} from './frame.js';
+import {
+  INBOX_ACTION_ICON,
+  inboxActionsFor,
+  type InboxAction,
+} from './inbox-actions.js';
+import { isSettled, kindOf, relativeTime, type InboxEntry } from './model.js';
+import { ContributorScope } from './registry-scope.js';
+import {
+  rendererKey,
+  useRendererOf,
+  type InboxEntryRenderer,
+} from './registry.js';
+
+export interface InboxTypeIconProps {
+  readonly entry: InboxEntry;
+  readonly renderer: InboxEntryRenderer<never>;
+}
+
+/**
+ * The icon of an item: its contributor's, amber for a decision that still waits, a check once its decision is
+ * settled.
+ */
+export function InboxTypeIcon({
+  entry,
+  renderer,
+}: InboxTypeIconProps): ReactElement {
+  if (isSettled(entry))
+    return (
+      <CheckCircle2Icon
+        className='size-4 shrink-0 text-emerald-600 dark:text-emerald-400'
+        aria-hidden='true'
+      />
+    );
+  // The contributor's icon component, chosen per item.
+  return createElement(renderer.icon(entry), {
+    'aria-hidden': true,
+    className: cn(
+      'size-4 shrink-0',
+      kindOf(entry) === 'decision'
+        ? 'text-amber-600 dark:text-amber-400'
+        : 'text-muted-foreground',
+    ),
+  });
+}
+
+export interface InboxItemCardProps {
+  readonly entry: InboxEntry;
+  readonly selected: boolean;
+  readonly busy: boolean;
+  /** Arrived by a realtime push after the list first loaded: slides in. */
+  readonly fresh?: boolean;
+  readonly onSelect: (entry: InboxEntry) => void;
+  readonly onOpen: (entry: InboxEntry) => void;
+  readonly onAction: (entry: InboxEntry, action: InboxAction) => void;
+}
+
+/** A card, worded by the item's contributor in its own namespace (`registry.ts`). */
+export function InboxItemCard(props: InboxItemCardProps): ReactElement {
+  const renderer = useRendererOf()(props.entry);
+  const frame = useInboxFrameText();
+  return (
+    <ContributorScope
+      key={rendererKey(renderer)}
+      namespace={renderer.namespace}
+      resources={renderer.resources}
+    >
+      <ItemCard {...props} renderer={renderer} frame={frame} />
+    </ContributorScope>
+  );
+}
+
+/**
+ * One compact card of the inbox list. Clicking anywhere on it shows it in the detail pane (and marks it read), as its
+ * chevron says; Enter on a focused card opens its route. The card reads: what it is about (an issue's identifier), type, ×N and time, then its title,
+ * then one sentence, as its contributor words them. A decision that still waits carries an amber bar, an unread card a
+ * dot and a bold title, a settled decision is dimmed with a check, and an item that arrived after the list loaded
+ * slides in. The menu button and a right-click offer read / unread and delete.
+ */
+function ItemCard({
+  entry,
+  renderer,
+  frame,
+  selected,
+  busy,
+  fresh,
+  onSelect,
+  onOpen,
+  onAction,
+}: InboxItemCardProps & {
+  readonly renderer: InboxEntryRenderer<never>;
+  readonly frame: InboxFrameText;
+}): ReactElement {
+  const { t, language } = frame;
+  const wording = renderer.useWording();
+  const { item, notice } = entry;
+  const { title, sentence } = wording.text(entry);
+  const unread = !item.readAt;
+  const settled = isSettled(entry);
+  const waiting = kindOf(entry) === 'decision' && !settled;
+  const actions = inboxActionsFor(entry);
+
+  function onKeyDown(event: KeyboardEvent<HTMLButtonElement>): void {
+    if (event.key === 'Enter' && !event.metaKey && !event.ctrlKey) {
+      event.preventDefault();
+      onOpen(entry);
+    }
+  }
+
+  const menuItems = (
+    Item: typeof DropdownMenuItem | typeof ContextMenuItem,
+  ): ReactElement[] =>
+    actions.map((action) => {
+      const Icon = INBOX_ACTION_ICON[action];
+      return (
+        <Item
+          key={action}
+          disabled={busy}
+          onClick={() => onAction(entry, action)}
+        >
+          <Icon />
+          {actionLabel(t, action)}
+        </Item>
+      );
+    });
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger
+        data-inbox-item={item.id}
+        data-selected={selected ? 'true' : undefined}
+        className={cn(
+          'group relative flex items-start gap-3 rounded-lg border border-transparent p-3 pr-2 transition-[background-color,border-color,opacity] duration-200',
+          selected ? 'border-border bg-card shadow-xs' : 'hover:bg-accent/60',
+          settled && 'opacity-55',
+          fresh &&
+            'animate-in duration-200 fade-in slide-in-from-top-1 motion-reduce:animate-none',
+        )}
+      >
+        <span
+          aria-hidden='true'
+          className={cn(
+            'absolute top-3 bottom-3 left-0 w-0.5 rounded-full',
+            selected
+              ? 'bg-primary'
+              : waiting
+                ? 'bg-amber-500'
+                : 'bg-transparent',
+          )}
+        />
+        <span className='mt-0.5 flex shrink-0'>
+          <InboxTypeIcon entry={entry} renderer={renderer} />
+        </span>
+        <button
+          type='button'
+          aria-current={selected ? 'true' : undefined}
+          // Stretched over the whole card, so a click anywhere on it selects the item.
+          className="block min-w-0 flex-1 cursor-pointer space-y-1 text-left after:absolute after:inset-0 after:rounded-lg after:content-[''] focus-visible:outline-none"
+          onClick={() => onSelect(entry)}
+          onKeyDown={onKeyDown}
+        >
+          <span className='flex items-center gap-1.5 text-xs text-muted-foreground'>
+            {notice?.subject?.label ? (
+              <span className='shrink-0 font-mono'>{notice.subject.label}</span>
+            ) : null}
+            <span className='truncate'>{wording.label(entry)}</span>
+            {notice && notice.count > 1 ? (
+              <span className='shrink-0 tabular-nums'>
+                {t('inbox.count', {
+                  count: notice.count,
+                  defaultValue: '×{{count}}',
+                })}
+              </span>
+            ) : null}
+            {settled ? (
+              <span className='shrink-0'>
+                {t('inbox.resolved', { defaultValue: 'Handled' })}
+              </span>
+            ) : null}
+            {/* The latest notice's time: a merged item (×N) is sent anew, replacing the previous one. */}
+            <time
+              className='ml-auto shrink-0 tabular-nums'
+              dateTime={item.createdAt}
+              title={new Date(item.createdAt).toLocaleString(language)}
+            >
+              {relativeTime(item.createdAt, language)}
+            </time>
+          </span>
+          <span
+            className={cn(
+              'flex items-center gap-1.5 text-sm group-focus-within:underline',
+              unread ? 'font-semibold' : 'font-normal',
+            )}
+          >
+            {unread ? (
+              <span className='size-1.5 shrink-0 rounded-full bg-primary'>
+                <span className='sr-only'>
+                  {t('inbox.unread', { defaultValue: 'Unread' })}
+                </span>
+              </span>
+            ) : null}
+            <span className='truncate'>{title}</span>
+          </span>
+          {sentence ? (
+            <span className='line-clamp-1 text-sm text-muted-foreground wrap-anywhere'>
+              {sentence}
+            </span>
+          ) : null}
+        </button>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            render={
+              <Button
+                variant='ghost'
+                size='icon-xs'
+                disabled={busy}
+                className='relative opacity-0 group-hover:opacity-100 focus-visible:opacity-100 data-popup-open:opacity-100'
+                aria-label={t('inbox.actionsFor', {
+                  title,
+                  defaultValue: 'Actions for {{title}}',
+                })}
+              />
+            }
+          >
+            <MoreHorizontalIcon />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align='end' className='w-auto min-w-40'>
+            <DropdownMenuGroup>{menuItems(DropdownMenuItem)}</DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <ChevronRightIcon
+          aria-hidden='true'
+          className={cn(
+            'size-4 shrink-0 self-center transition-colors',
+            selected
+              ? 'text-foreground'
+              : 'text-muted-foreground group-hover:text-foreground',
+          )}
+        />
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuGroup>{menuItems(ContextMenuItem)}</ContextMenuGroup>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

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

@@ -0,0 +1,433 @@
+import { AlertCircleIcon, InboxIcon } from 'lucide-react';
+import type { ReactElement, ReactNode } from 'react';
+
+import {
+  Alert,
+  AlertAction,
+  AlertDescription,
+  AlertTitle,
+} from '#components/ui/alert';
+import { Badge } from '#components/ui/badge';
+import { Button } from '#components/ui/button';
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from '#components/ui/empty';
+import { Kbd } from '#components/ui/kbd';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '#components/ui/select';
+import { Skeleton } from '#components/ui/skeleton';
+import { Spinner } from '#components/ui/spinner';
+import { Tabs, TabsList, TabsTrigger } from '#components/ui/tabs';
+import { cn } from 'cn';
+
+import { useInboxFrameText } from './frame.js';
+import type { InboxAction } from './inbox-actions.js';
+import { InboxItemCard } from './inbox-item.js';
+import {
+  categoriesOf,
+  INBOX_VIEWS,
+  kindsOf,
+  shownGroups,
+  type InboxEntry,
+  type InboxFilter,
+  type InboxGroups,
+  type InboxView,
+} from './model.js';
+import { categoriesOfRegistry, useInboxRegistry } from './registry.js';
+
+export interface InboxListQuery {
+  readonly isError: boolean;
+  readonly error: unknown;
+  readonly hasNextPage: boolean;
+  readonly isFetchingNextPage: boolean;
+  refetch(): unknown;
+  fetchNextPage(): unknown;
+}
+
+/** What a collection category shows in the list: its group while every kind shows, its list while selected. */
+export interface InboxListCollection {
+  /** Its group, after the category it follows. */
+  readonly group?: ReactNode;
+  /** How many records its group lists; the group shows only above zero. */
+  readonly count?: number;
+  /** Its list, in place of the items while the kind filter selects it. */
+  readonly list?: ReactNode;
+}
+
+export interface InboxListProps {
+  readonly filter: InboxFilter;
+  /** Unread items among those loaded, the count on All. */
+  readonly unread: number;
+  /** What waits on the viewer, the count on To do and the header badge's. */
+  readonly pending: number;
+  /** What waits in each waiting category, beside its group's heading; its unsettled items when left out. */
+  readonly waiting?: Readonly<Record<string, number>>;
+  readonly groups: InboxGroups;
+  readonly loaded: boolean;
+  readonly query: InboxListQuery;
+  readonly selectedId: string | null;
+  /** Items that arrived after the list first loaded. */
+  readonly fresh?: ReadonlySet<string>;
+  readonly busy: boolean;
+  readonly onFilter: (filter: InboxFilter) => void;
+  readonly onSelect: (entry: InboxEntry) => void;
+  readonly onOpen: (entry: InboxEntry) => void;
+  readonly onAction: (entry: InboxEntry, action: InboxAction) => void;
+  /** The feeds' sections (decisions kept in a contributor's own API), shown first with every kind or decisions. */
+  readonly feeds?: ReactNode;
+  readonly feedCount?: number;
+  /** What each collection category shows, by its id. */
+  readonly collections?: Readonly<Record<string, InboxListCollection>>;
+  /** Beside the kind filter, such as a sound reminder switch. */
+  readonly footer?: ReactNode;
+  /** The prefix of the element ids it renders. */
+  readonly idPrefix?: string;
+}
+
+/**
+ * The inbox's left column: two views — All, and To do with the count of what waits on the viewer, the same number
+ * as the header badge — then one filter by kind (every kind, then the registry's categories) and the `footer` slot.
+ * Below, the items in groups: the feeds' sections, each entry category's group with each collection's group after the
+ * category it follows, and "load more". To do lists only what still waits; its kind filter offers only the waiting
+ * categories and the collections offered there. A collection selected by the kind filter lists its own records in
+ * place of the items. The keyboard hint sits at the bottom.
+ */
+export function InboxList({
+  filter,
+  unread,
+  pending,
+  waiting,
+  groups,
+  loaded,
+  query,
+  selectedId,
+  fresh,
+  busy,
+  onFilter,
+  onSelect,
+  onOpen,
+  onAction,
+  feeds,
+  feedCount = 0,
+  collections = {},
+  footer,
+  idPrefix = 'nocobase-inbox',
+}: InboxListProps): ReactElement {
+  const { t } = useInboxFrameText();
+  const categories = categoriesOfRegistry(useInboxRegistry());
+  const { view, kind } = filter;
+  const shown = shownGroups(filter, groups, categories);
+  const selectedCollection = categories.find(
+    (category) => category.type === 'collection' && category.id === kind,
+  );
+  const shownCollections =
+    kind === 'all'
+      ? categoriesOf(view, categories).filter(
+          (category) =>
+            category.type === 'collection' &&
+            (collections[category.id]?.count ?? 0) > 0,
+        )
+      : [];
+  const firstEntries = shown[0]?.category.id;
+  const showFeeds = (kind === 'all' || kind === firstEntries) && feedCount > 0;
+  const empty =
+    loaded &&
+    !showFeeds &&
+    shownCollections.length === 0 &&
+    shown.every(({ entries }) => entries.length === 0);
+  const kinds = kindsOf(view, categories).map((value) => ({
+    value,
+    label:
+      value === 'all'
+        ? t('inbox.kinds.all', { defaultValue: 'All types' })
+        : (categories.find((category) => category.id === value)?.label(t) ??
+          value),
+  }));
+  // Each collection's group follows the category it names; one naming no category shown comes last.
+  const shownIds = new Set(shown.map(({ category }) => category.id));
+  const after = (id: string | null): ReactNode =>
+    shownCollections
+      .filter((category) => {
+        const target =
+          category.type === 'collection' ? category.after : undefined;
+        return id === null
+          ? target === undefined || !shownIds.has(target)
+          : target === id;
+      })
+      .map((category) => (
+        <CollectionSlot key={category.id}>
+          {collections[category.id]?.group}
+        </CollectionSlot>
+      ));
+
+  let content: ReactNode;
+  if (selectedCollection) content = collections[selectedCollection.id]?.list;
+  else if (query.isError && !loaded)
+    content = (
+      <div className='px-1'>
+        <Alert variant='destructive'>
+          <AlertCircleIcon />
+          <AlertTitle>
+            {t('inbox.loadFailed', {
+              defaultValue: 'Unable to load the inbox',
+            })}
+          </AlertTitle>
+          <AlertDescription>
+            {t('inbox.loadFailedDescription', {
+              defaultValue: 'Check your connection and try again.',
+            })}
+          </AlertDescription>
+          <AlertAction>
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={() => void query.refetch()}
+            >
+              {t('inbox.retry', { defaultValue: 'Retry' })}
+            </Button>
+          </AlertAction>
+        </Alert>
+      </div>
+    );
+  else if (!loaded)
+    content = (
+      <div
+        role='status'
+        aria-label={t('inbox.loading', { defaultValue: 'Loading' })}
+        className='space-y-2 px-1'
+      >
+        {Array.from({ length: 5 }, (_, index) => (
+          <Skeleton key={index} className='h-16 w-full rounded-lg' />
+        ))}
+      </div>
+    );
+  else if (empty)
+    content =
+      kind === 'all' ? (
+        <ListEmpty
+          title={
+            view === 'todo'
+              ? t('inbox.empty.todo', {
+                  defaultValue: 'Nothing waiting for you',
+                })
+              : t('inbox.emptyAll', { defaultValue: 'Nothing here' })
+          }
+          description={t('inbox.emptyDescription', {
+            defaultValue:
+              'Notifications and requests sent to you show up here.',
+          })}
+        />
+      ) : (
+        <ListEmpty
+          title={shown[0]?.category.empty(t) ?? ''}
+          description={t('inbox.noMatchDescription', {
+            defaultValue: 'Clear the filter to see every type.',
+          })}
+          action={
+            <Button
+              variant='outline'
+              size='sm'
+              onClick={() => onFilter({ view, kind: 'all' })}
+            >
+              {t('inbox.clearFilter', { defaultValue: 'Clear filter' })}
+            </Button>
+          }
+        />
+      );
+  else
+    content = (
+      <div className='space-y-5'>
+        {showFeeds ? feeds : null}
+        {shown.map(({ category, entries }) => {
+          const heading = `${idPrefix}-group-${category.id}`;
+          const count = category.waits
+            ? (waiting?.[category.id] ??
+              entries.filter((entry) => entry.notice?.resolvedAt == null)
+                .length)
+            : entries.length;
+          return (
+            <CollectionSlot key={category.id}>
+              {entries.length === 0 && kind === 'all' ? null : (
+                <section aria-labelledby={heading} className='space-y-1'>
+                  <h2
+                    id={heading}
+                    className='flex items-center gap-2 px-3 text-xs font-medium tracking-wider text-muted-foreground uppercase'
+                  >
+                    {category.title(t)}
+                    {/* What still waits, as To do counts it; handled items stay listed in All but are not counted. */}
+                    {count > 0 ? (
+                      <span className='tabular-nums'>{count}</span>
+                    ) : null}
+                  </h2>
+                  <ul aria-label={category.title(t)} className='space-y-0.5'>
+                    {entries.map((entry) => (
+                      <li key={entry.item.id}>
+                        <InboxItemCard
+                          entry={entry}
+                          selected={entry.item.id === selectedId}
+                          busy={busy}
+                          fresh={fresh?.has(entry.item.id)}
+                          onSelect={onSelect}
+                          onOpen={onOpen}
+                          onAction={onAction}
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                </section>
+              )}
+              {after(category.id)}
+            </CollectionSlot>
+          );
+        })}
+        {after(null)}
+        {query.hasNextPage ? (
+          <div className='flex justify-center pt-1'>
+            <Button
+              variant='ghost'
+              size='sm'
+              disabled={query.isFetchingNextPage}
+              onClick={() => void query.fetchNextPage()}
+            >
+              {query.isFetchingNextPage ? (
+                <Spinner data-icon='inline-start' />
+              ) : null}
+              {t('inbox.loadMore', { defaultValue: 'Load more' })}
+            </Button>
+          </div>
+        ) : null}
+      </div>
+    );
+
+  return (
+    <>
+      <div className='shrink-0 space-y-2 border-b px-3 py-2.5'>
+        <Tabs
+          value={view}
+          onValueChange={(value) => {
+            const next = value as InboxView;
+            onFilter({
+              view: next,
+              kind: kindsOf(next, categories).includes(kind) ? kind : 'all',
+            });
+          }}
+        >
+          <TabsList variant='line' className='w-full'>
+            {INBOX_VIEWS.map((value) => {
+              const count = value === 'todo' ? pending : unread;
+              return (
+                <TabsTrigger key={value} value={value}>
+                  {value === 'todo'
+                    ? t('inbox.views.todo', { defaultValue: 'To do' })
+                    : t('inbox.views.all', { defaultValue: 'All' })}
+                  {count > 0 ? (
+                    <Badge
+                      variant={value === 'todo' ? 'outline' : 'secondary'}
+                      className={cn(
+                        'h-4 px-1.5 tabular-nums',
+                        value === 'todo' &&
+                          'border-transparent bg-amber-500/15 text-amber-700 dark:text-amber-300',
+                      )}
+                      aria-label={
+                        value === 'todo'
+                          ? t('inbox.pendingDecisions', {
+                              count,
+                              defaultValue: '{{count}} waiting',
+                            })
+                          : t('inbox.unreadCount', {
+                              count,
+                              defaultValue: '{{count}} unread',
+                            })
+                      }
+                    >
+                      {count}
+                    </Badge>
+                  ) : null}
+                </TabsTrigger>
+              );
+            })}
+          </TabsList>
+        </Tabs>
+        <div className='flex flex-wrap items-center justify-between gap-2'>
+          <Select
+            items={kinds}
+            value={kind}
+            onValueChange={(next: string | null) => {
+              if (next) onFilter({ view, kind: next });
+            }}
+          >
+            <SelectTrigger
+              size='sm'
+              className='w-40'
+              aria-label={t('inbox.kinds.label', { defaultValue: 'Type' })}
+            >
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent className='w-auto max-w-[min(var(--container-sm),var(--available-width))] min-w-(--anchor-width) [&_[data-slot=select-item]>:first-child]:whitespace-normal'>
+              {kinds.map((item) => (
+                <SelectItem key={item.value} value={item.value}>
+                  {item.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+          {footer}
+        </div>
+      </div>
+      <div className='min-h-0 flex-1 overflow-y-auto px-2 py-3'>{content}</div>
+      <p className='hidden shrink-0 items-center gap-3 border-t px-4 py-2 text-xs text-muted-foreground lg:flex'>
+        <span className='inline-flex items-center gap-1'>
+          <Kbd>J</Kbd>
+          <Kbd>K</Kbd>
+          {t('inbox.keyMove', { defaultValue: 'Move' })}
+        </span>
+        <span className='inline-flex items-center gap-1'>
+          <Kbd>Enter</Kbd>
+          {t('inbox.keyOpen', { defaultValue: 'Open' })}
+        </span>
+      </p>
+    </>
+  );
+}
+
+function ListEmpty({
+  title,
+  description,
+  action,
+}: {
+  readonly title: string;
+  readonly description: string;
+  readonly action?: ReactNode;
+}): ReactElement {
+  return (
+    <Empty className='mx-1 min-h-48'>
+      <EmptyHeader>
+        <EmptyMedia variant='icon'>
+          <InboxIcon />
+        </EmptyMedia>
+        <EmptyTitle>{title}</EmptyTitle>
+        <EmptyDescription>{description}</EmptyDescription>
+      </EmptyHeader>
+      {action ? <EmptyContent>{action}</EmptyContent> : null}
+    </Empty>
+  );
+}
+
+/** A group of the list, followed by what comes right after it. */
+function CollectionSlot({
+  children,
+}: {
+  readonly children: ReactNode;
+}): ReactElement {
+  return <>{children}</>;
+}