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

package/.agents/rules/components.md

@@ -29,6 +29,6 @@ Style with the semantic Tailwind tokens — `bg-background`, `text-foreground`,
 
 **Visual consistency is a whole-application property.** Match the surrounding code's spacing, typography, and component choices. If a change genuinely calls for a different look, change the application's design tokens in `client/theme/themes/*.css` so every page moves together. Never restyle only the part you are working on — a page that looks different from the rest is a defect, not a customization.
 
-The default brand palette and density live in `client/theme/themes/*.css`; shared hover/cursor and Badge geometry live in `client/styles.css`, outside generated shadcn primitives. For semantic status labels, use `StatusBadge` from `client/components/status-badge.tsx` with `neutral`, `info`, `warning`, or `success`; choose the tone by meaning and keep the visible status text. Reuse these shared components and tokens in new pages so template upgrades can carry the design consistently.
+The default brand palette and density live in `client/theme/themes/*.css`; shared hover/cursor and Badge geometry live in `client/styles.css`, outside generated shadcn primitives. For semantic status labels, use `StatusBadge` from `client/components/status-badge.tsx` with `neutral`, `info`, `warning`, or `success`; choose the tone by meaning and keep the visible status text. A badge beside a title or on a dense card is the small one, `size='sm'` on `StatusBadge` or `data-size='sm'` on `Badge`. Reuse these shared components and tokens in new pages so template upgrades can carry the design consistently.
 
 **Follow the UI guidelines.** [The UI guidelines](../skills/nocobase-app-development/references/frontend/ui-guidelines.md) set the conventions every page follows, among them the page header and the single placement of the primary action, empty states, row actions behind one "…" menu, dates picked from a `Calendar` in a `Popover` rather than a native date input, and medium-width drawers; the frontend workflow says how much of it to read for a change.

package/.agents/rules/shell.md

@@ -8,10 +8,12 @@ Layouts own breadcrumb route context and render the current page's trail in the
 
 ## 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*` and controlled `Collapsible` sub-menus. Leave `client/components/ui/sidebar.tsx` as the shadcn CLI writes it and 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 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` across applications on the same origin; whether the phone sheet is open stays local to each layout.
+`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. Leave `client/components/ui/sidebar.tsx` as the shadcn CLI writes it and 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` across applications on the same origin; whether the phone sheet is open stays local to each layout.
 
 The header carries no Settings or Inbox entry. An application has no separate settings area: a page that configures something is an ordinary route in `client/routes.ts` with `navigation`, placed in the sidebar like any other page, for example under a Settings navigation group. The `/inbox` page declares no navigation; give it an entry where the application wants one.
 
+`client/lib/navigation-transform.ts` is the application-owned hook for customizing the permission-filtered navigation tree. The shared sidebar supports static section labels with direct links as well as collapsible groups.
+
 Navigation groups retain their expanded or collapsed state while the navigation tree stays mounted. Selecting a new page expands its ancestor groups without collapsing other groups; users can still collapse the active group manually.
 
 ## Account menu and session

package/client/components/page-header.tsx

@@ -16,7 +16,7 @@ export function PageHeader({
   return (
     <header className='flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between'>
       <div className='min-w-0'>
-        <h1 className='font-heading text-3xl font-semibold tracking-[-0.035em]'>
+        <h1 className='font-heading text-2xl font-semibold tracking-[-0.035em]'>
           {title}
         </h1>
         {description ? (

package/client/components/status-badge.tsx

@@ -11,17 +11,23 @@ const tones = {
     'border-(--status-success)/20 bg-(--status-success-background) text-(--status-success)',
 };
 
-/** Quiet semantic status labels; reserve solid primary fills for actions. */
+/**
+ * Quiet semantic status labels; reserve solid primary fills for actions. `size='sm'` is the small badge, for a status
+ * beside a title or on a dense card (`data-size` in `client/styles.css`).
+ */
 export function StatusBadge({
   tone = 'neutral',
+  size,
   className,
   ...props
 }: Omit<ComponentProps<typeof Badge>, 'variant'> & {
   readonly tone?: keyof typeof tones;
+  readonly size?: 'sm';
 }): ReactElement {
   return (
     <Badge
       {...props}
+      data-size={size}
       variant='outline'
       className={cn(tones[tone], className)}
     />

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

@@ -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}