@nocobase/app-template-default 1.0.0-beta.67 → 1.0.0-beta.69

package/client/components/ui/table.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { cn } from 'cn';
+
+function Table({ className, ...props }: React.ComponentProps<'table'>) {
+  return (
+    <div
+      data-slot='table-container'
+      className='relative w-full overflow-x-auto'
+    >
+      <table
+        data-slot='table'
+        className={cn('w-full caption-bottom text-sm', className)}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {
+  return (
+    <thead
+      data-slot='table-header'
+      className={cn('[&_tr]:border-b', className)}
+      {...props}
+    />
+  );
+}
+
+function TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {
+  return (
+    <tbody
+      data-slot='table-body'
+      className={cn('[&_tr:last-child]:border-0', className)}
+      {...props}
+    />
+  );
+}
+
+function TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {
+  return (
+    <tfoot
+      data-slot='table-footer'
+      className={cn(
+        'border-t bg-muted/50 font-medium [&>tr]:last:border-b-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableRow({ className, ...props }: React.ComponentProps<'tr'>) {
+  return (
+    <tr
+      data-slot='table-row'
+      className={cn(
+        'border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableHead({ className, ...props }: React.ComponentProps<'th'>) {
+  return (
+    <th
+      data-slot='table-head'
+      className={cn(
+        'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCell({ className, ...props }: React.ComponentProps<'td'>) {
+  return (
+    <td
+      data-slot='table-cell'
+      className={cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TableCaption({
+  className,
+  ...props
+}: React.ComponentProps<'caption'>) {
+  return (
+    <caption
+      data-slot='table-caption'
+      className={cn('mt-4 text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+};

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

@@ -1,8 +1,4 @@
-import {
-  CheckCircle2Icon,
-  ChevronRightIcon,
-  MoreHorizontalIcon,
-} from 'lucide-react';
+import { CheckCircle2Icon, MoreHorizontalIcon } from 'lucide-react';
 import { createElement, type KeyboardEvent, type ReactElement } from 'react';
 
 import { Button } from '#components/ui/button';
@@ -99,11 +95,12 @@ export function InboxItemCard(props: InboxItemCardProps): ReactElement {
 }
 
 /**
- * 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.
+ * One compact card of the inbox list. Clicking anywhere on it shows it in the detail pane (and marks it read); Enter on
+ * a focused card opens its route. The card reads: its title, ×N and time, then one line of particulars: whether it was
+ * handled, its type, what it is about (an issue's identifier) and one sentence, as its contributor words them. A
+ * decision that still waits carries an amber bar, an unread card a fainter bar 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, in the time's place
+ * while the card is hovered, and a right-click offer read / unread and delete.
  */
 function ItemCard({
   entry,
@@ -158,8 +155,10 @@ function ItemCard({
         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',
+          // Pulled out by its padding and border, so its words start where the tabs' labels do and its bar sits in the
+          // list's gutter.
+          'group relative -mx-[calc(--spacing(3)+1px)] flex items-start gap-3 rounded-lg border border-transparent p-3 transition-[background-color,border-color,opacity] duration-200',
+          selected ? 'bg-hover' : 'hover:bg-hover',
           settled && 'opacity-55',
           fresh &&
             'animate-in duration-200 fade-in slide-in-from-top-1 motion-reduce:animate-none',
@@ -168,73 +167,69 @@ function ItemCard({
         <span
           aria-hidden='true'
           className={cn(
-            'absolute top-3 bottom-3 left-0 w-0.5 rounded-full',
+            'absolute top-3 bottom-3 -left-px w-0.5 rounded-full',
             selected
               ? 'bg-primary'
               : waiting
                 ? 'bg-amber-500'
-                : 'bg-transparent',
+                : unread
+                  ? 'bg-primary/70'
+                  : 'bg-transparent',
           )}
         />
-        <span className='mt-0.5 flex shrink-0'>
-          <InboxTypeIcon entry={entry} renderer={renderer} />
-        </span>
         <Button
           variant='ghost'
           type='button'
           aria-current={selected ? 'true' : undefined}
           // Stretched over the whole card, so a click anywhere on it selects the item.
-          className="block h-auto min-w-0 flex-1 cursor-pointer space-y-1 rounded-none border-0 bg-transparent p-0 text-left font-normal whitespace-normal hover:bg-transparent active:translate-y-0 after:absolute after:inset-0 after:rounded-lg after:content-[''] focus-visible:outline-none"
+          className="grid h-auto min-w-0 flex-1 cursor-pointer grid-cols-[minmax(0,1fr)] gap-1 rounded-none border-0 bg-transparent p-0 text-left font-normal whitespace-normal hover:bg-transparent active:translate-y-0 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>
+          {/* The title, bold while unread, with the time at the right; the menu button takes the time's place while
+              the card is hovered or its menu open. */}
+          <span className='flex min-w-0 items-baseline gap-1.5'>
+            <span
+              className={cn(
+                'min-w-0 truncate text-sm group-has-focus-visible:underline',
+                unread ? 'font-semibold' : 'font-medium',
+              )}
+            >
+              {title}
+              {unread ? (
+                <span className='sr-only'>
+                  {t('inbox.unread', { defaultValue: 'Unread' })}
+                </span>
+              ) : null}
+            </span>
             {notice && notice.count > 1 ? (
-              <span className='shrink-0 tabular-nums'>
+              <span className='shrink-0 text-xs text-muted-foreground 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'
+              className='ml-auto shrink-0 text-xs text-muted-foreground tabular-nums group-has-focus-visible:invisible group-hover:invisible group-has-data-popup-open:invisible'
               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>
+          {/* Then one line of particulars: whether it was handled, its kind and what it is about, and its sentence. */}
+          <span className='line-clamp-1 text-xs text-muted-foreground wrap-anywhere'>
+            {settled
+              ? `${t('inbox.resolved', { defaultValue: 'Handled' })} · `
+              : null}
+            {wording.label(entry)}
+            {notice?.subject?.label ? (
+              <span className='font-mono'> {notice.subject.label}</span>
             ) : null}
-            <span className='truncate'>{title}</span>
+            {sentence ? ` · ${sentence}` : null}
           </span>
-          {sentence ? (
-            <span className='line-clamp-1 text-sm text-muted-foreground wrap-anywhere'>
-              {sentence}
-            </span>
-          ) : null}
         </Button>
         <DropdownMenu>
           <DropdownMenuTrigger
@@ -243,7 +238,7 @@ function ItemCard({
                 variant='ghost'
                 size='icon-xs'
                 disabled={busy}
-                className='relative opacity-0 group-hover:opacity-100 focus-visible:opacity-100 data-popup-open:opacity-100'
+                className='absolute top-2 right-2 opacity-0 group-hover:opacity-100 group-has-focus-visible:opacity-100 focus-visible:opacity-100 data-popup-open:opacity-100'
                 aria-label={t('inbox.actionsFor', {
                   title,
                   defaultValue: 'Actions for {{title}}',
@@ -257,15 +252,6 @@ function ItemCard({
             <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>

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

@@ -1,4 +1,4 @@
-import { AlertCircleIcon, InboxIcon } from 'lucide-react';
+import { AlertCircleIcon, InboxIcon, ListTodoIcon } from 'lucide-react';
 import type { ReactElement, ReactNode } from 'react';
 
 import {
@@ -7,7 +7,6 @@ import {
   AlertDescription,
   AlertTitle,
 } from '#components/ui/alert';
-import { Badge } from '#components/ui/badge';
 import { Button } from '#components/ui/button';
 import {
   Empty,
@@ -28,7 +27,6 @@ import {
 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';
@@ -261,7 +259,7 @@ export function InboxList({
                 <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'
+                    className='flex items-center gap-2 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. */}
@@ -311,80 +309,80 @@ export function InboxList({
 
   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',
-            });
+      {/* The views as line tabs (client/styles.css draws them as a record page's), each led by its icon, a count in
+          muted figures. */}
+      <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='shrink-0 [--tabs-inset:--spacing(6)]'
+        >
+          {INBOX_VIEWS.map((value) => {
+            const count = value === 'todo' ? pending : unread;
+            const Icon = value === 'todo' ? ListTodoIcon : InboxIcon;
+            return (
+              <TabsTrigger key={value} value={value}>
+                <Icon aria-hidden='true' />
+                {value === 'todo'
+                  ? t('inbox.views.todo', { defaultValue: 'To do' })
+                  : t('inbox.views.all', { defaultValue: 'All' })}
+                {count > 0 ? (
+                  <span
+                    className='text-xs text-muted-foreground tabular-nums'
+                    aria-label={
+                      value === 'todo'
+                        ? t('inbox.pendingDecisions', {
+                            count,
+                            defaultValue: '{{count}} waiting',
+                          })
+                        : t('inbox.unreadCount', {
+                            count,
+                            defaultValue: '{{count}} unread',
+                          })
+                    }
+                  >
+                    {count}
+                  </span>
+                ) : null}
+              </TabsTrigger>
+            );
+          })}
+        </TabsList>
+      </Tabs>
+      <div className='flex shrink-0 flex-wrap items-center justify-between gap-2 border-b border-border px-6 py-2.5'>
+        <Select
+          items={kinds}
+          value={kind}
+          onValueChange={(next: string | null) => {
+            if (next) onFilter({ view, kind: next });
           }}
         >
-          <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' })}
           >
-            <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>
+            <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 className='min-h-0 flex-1 overflow-y-auto px-2 py-3'>{content}</div>
+      <div className='min-h-0 flex-1 overflow-y-auto px-6 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>
@@ -410,7 +408,7 @@ function ListEmpty({
   readonly action?: ReactNode;
 }): ReactElement {
   return (
-    <Empty className='mx-1 min-h-48'>
+    <Empty className='min-h-48'>
       <EmptyHeader>
         <EmptyMedia variant='icon'>
           <InboxIcon />

package/client/index.tsx

@@ -7,6 +7,7 @@ import {
 import { resolveAppRuntime } from '@nocobase/app-client/runtime';
 import { createRoot } from 'react-dom/client';
 
+import { revealScrollbarsWhileScrolling } from './lib/scrollbar';
 import appRuntime from './runtime';
 import { AppStartupError } from './startup';
 import './styles.css';
@@ -19,6 +20,9 @@ if (!container) {
   throw new Error('Missing application root element.');
 }
 
+// Scrollbars show only while their element scrolls (client/styles.css).
+revealScrollbarsWhileScrolling();
+
 const root = createRoot(container);
 let app: ClientApplication | undefined;
 let applicationStarted = false;

package/client/layouts/components/app-sidebar.tsx

@@ -33,7 +33,7 @@ import { AppBrand } from './app-brand.js';
 
 /**
  * The shell's sidebar state: shadcn's provider, with the desktop icon mode kept in the shared sidebar preference
- * (`use-sidebar-preference.ts`) so every layout on this origin opens it the same way. Whether the phone's sheet is
+ * (`use-sidebar-preference.ts`) so every layout of this application opens it the same way. Whether the phone's sheet is
  * open stays local to the layout.
  */
 export function AppSidebarProvider({
@@ -48,11 +48,11 @@ export function AppSidebarProvider({
       open={!collapsed}
       onOpenChange={(open) => setCollapsed(!open)}
       className='h-svh bg-background'
-      // Give expanded navigation more breathing room while retaining density-aware sizing
-      // and the existing compact icon rail (the provider's documented width override).
+      // shadcn's 16rem in spacing units, so a density preset that changes the unit scales the sidebar together with
+      // the items inside it (the provider's documented width override).
       style={
         {
-          '--sidebar-width': 'calc(var(--spacing) * 75)',
+          '--sidebar-width': 'calc(var(--spacing) * 64)',
           '--sidebar-width-icon': 'calc(var(--spacing) * 12)',
         } as CSSProperties
       }
@@ -102,7 +102,7 @@ export function AppSidebar({
   }, [isMobile, openMobile, setOpenMobile]);
 
   const header = (
-    <SidebarHeader className='h-16 shrink-0 flex-row items-center justify-between border-b border-sidebar-border/70 px-5 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0'>
+    <SidebarHeader className='h-16 shrink-0 flex-row items-center justify-between border-b border-sidebar-border px-5 group-data-[collapsible=icon]:justify-center group-data-[collapsible=icon]:px-0'>
       <AppBrand compact={state === 'collapsed' && !isMobile} />
       {isMobile ? (
         <Button
@@ -123,7 +123,7 @@ export function AppSidebar({
     <>
       {header}
       {/* The primitive hides the icon mode's overflow; a long menu still scrolls there. */}
-      <SidebarContent className='app-navigation group-data-[collapsible=icon]:overflow-y-auto [&_[data-slot=sidebar-menu-button]]:h-10 [&_[data-slot=sidebar-menu-button]]:px-3'>
+      <SidebarContent className='app-navigation group-data-[collapsible=icon]:overflow-y-auto'>
         {children}
       </SidebarContent>
       {footer}

package/client/layouts/components/layout-header.tsx

@@ -8,7 +8,7 @@ export function LayoutHeader({
   return (
     <header
       className={cn(
-        'flex h-16 shrink-0 items-center border-b border-border/70 bg-background/85 px-3 backdrop-blur-xl md:px-4',
+        'flex h-16 shrink-0 items-center border-b border-border bg-background/85 px-3 backdrop-blur-xl md:px-4',
         className,
       )}
       {...props}