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

package/client/layouts/components/navigation-menu.tsx

@@ -1,6 +1,12 @@
 import { useTranslation } from '@nocobase/i18n/client';
 import { ChevronRight } from 'lucide-react';
-import { useRef, useState, type ReactElement } from 'react';
+import {
+  createContext,
+  useContext,
+  useRef,
+  useState,
+  type ReactElement,
+} from 'react';
 import { Link } from 'react-router';
 
 import {
@@ -17,8 +23,10 @@ import {
 import {
   SidebarGroup,
   SidebarGroupContent,
+  SidebarGroupLabel,
   SidebarMenu,
   SidebarMenuAction,
+  SidebarMenuBadge,
   SidebarMenuButton,
   SidebarMenuItem,
   SidebarMenuSub,
@@ -38,35 +46,164 @@ const SELECTED =
   'data-active:bg-sidebar-primary data-active:text-sidebar-primary-foreground data-active:hover:bg-sidebar-primary data-active:hover:text-sidebar-primary-foreground';
 
 /**
- * A permission-filtered route tree as the sidebar's menu, drawn with shadcn's Sidebar primitives. Groups and parents
- * with a page are collapsible sub-menus. In the desktop icon mode the labels hide, every entry carries its label as a
- * tooltip, and an entry with children opens them in a popover.
+ * A count beside a menu entry. A number is what waits on the viewer, such as unread messages or requests to decide;
+ * `live` is work under way, such as runs in progress, with `hint` as its words for the tooltip and screen readers. Zero
+ * shows nothing.
+ */
+export type NavigationBadge =
+  | number
+  | { readonly count: number; readonly live: true; readonly hint: string };
+
+/** Counts keyed by the route name of the entry they stand beside. */
+export type NavigationBadges = Readonly<Record<string, NavigationBadge>>;
+
+const NavigationBadgesContext = createContext<NavigationBadges>({});
+
+function useNavigationBadge(item: RouteNavigationItem): {
+  readonly count: number;
+  readonly live: boolean;
+  readonly text: string;
+} {
+  const badge = useContext(NavigationBadgesContext)[item.route.name];
+  if (typeof badge === 'object')
+    return { count: badge.count, live: true, text: badge.hint };
+  const count = badge ?? 0;
+  return { count, live: false, text: String(count) };
+}
+
+/**
+ * A permission-filtered route tree as the sidebar's menu, drawn with shadcn's Sidebar primitives. A top-level group
+ * with no page of its own is a section: a sidebar group under a small heading, its entries always shown. Nested groups
+ * and parents with a page are collapsible sub-menus. In the desktop icon mode the labels and headings hide, every entry
+ * carries its label as a tooltip, and an entry with children opens them in a popover.
  */
 export function NavigationMenu({
   items,
   label,
   selectedKey,
+  sections = true,
+  badges = {},
 }: {
   readonly items: readonly RouteNavigationItem[];
   readonly label: string;
   readonly selectedKey: string | undefined;
+  /** `false` draws top-level groups as collapsible sub-menus too. */
+  readonly sections?: boolean;
+  /**
+   * Counts beside entries, keyed by route name, for a page entry that is not a sub-menu's: a top-level entry or a
+   * section's. They change while the page is open, so the layout passes them rather than the route declaring them.
+   */
+  readonly badges?: NavigationBadges;
+}): ReactElement {
+  // A group already divided into `section`s by the navigation stays one collapsible entry over them.
+  const isSection = (item: RouteNavigationItem): boolean =>
+    sections &&
+    item.children.length > 0 &&
+    !item.route.componentLoader &&
+    !item.children.some((child) => child.section);
+  // Consecutive plain entries share one sidebar group; each section is a group of its own.
+  const runs: (RouteNavigationItem | RouteNavigationItem[])[] = [];
+  for (const item of items) {
+    const last = runs.at(-1);
+    if (isSection(item)) runs.push(item);
+    else if (Array.isArray(last)) last.push(item);
+    else runs.push([item]);
+  }
+  return (
+    <NavigationBadgesContext value={badges}>
+      <nav aria-label={label}>
+        {runs.map((run) =>
+          Array.isArray(run) ? (
+            <SidebarGroup key={routeKey(run[0].route)}>
+              <SidebarGroupContent>
+                <SidebarMenu>
+                  {run.map((item) => (
+                    <NavigationItem
+                      key={routeKey(item.route)}
+                      item={item}
+                      selectedKey={selectedKey}
+                    />
+                  ))}
+                </SidebarMenu>
+              </SidebarGroupContent>
+            </SidebarGroup>
+          ) : (
+            <NavigationGroup
+              key={routeKey(run.route)}
+              item={run}
+              selectedKey={selectedKey}
+            />
+          ),
+        )}
+      </nav>
+    </NavigationBadgesContext>
+  );
+}
+
+/**
+ * A top-level group with no page of its own, as a sidebar group under a heading, its entries always shown. A section
+ * the navigation marks deeper in the tree (`section`) is a `NavigationSection` inside its menu instead.
+ */
+function NavigationGroup({
+  item,
+  selectedKey,
+}: {
+  readonly item: RouteNavigationItem;
+  readonly selectedKey: string | undefined;
 }): ReactElement {
+  const label = useItemLabel(item);
   return (
-    <nav aria-label={label}>
-      <SidebarGroup>
+    <SidebarGroup aria-label={label}>
+      <SidebarGroupLabel>{label}</SidebarGroupLabel>
+      <SidebarGroupContent>
+        <SidebarMenu>
+          {item.children.map((child) => (
+            <NavigationItem
+              key={routeKey(child.route)}
+              item={child}
+              selectedKey={selectedKey}
+            />
+          ))}
+        </SidebarMenu>
+      </SidebarGroupContent>
+    </SidebarGroup>
+  );
+}
+
+/** Navigation sections are labels with direct links, rather than another collapsible menu level. */
+function NavigationSection({
+  item,
+  selectedKey,
+  onNavigate,
+  inPopover = false,
+}: ItemProps): ReactElement {
+  const label = useItemLabel(item);
+  return (
+    <SidebarMenuItem>
+      <SidebarGroup role='group' aria-label={label} className='p-0'>
+        <SidebarGroupLabel
+          className={
+            inPopover
+              ? 'text-sidebar-foreground/50 group-data-[collapsible=icon]:mt-0 group-data-[collapsible=icon]:opacity-100'
+              : 'text-sidebar-foreground/50'
+          }
+        >
+          {label}
+        </SidebarGroupLabel>
         <SidebarGroupContent>
           <SidebarMenu>
-            {items.map((item) => (
-              <NavigationItem
-                key={routeKey(item.route)}
-                item={item}
+            {item.children.map((child) => (
+              <NavigationSubItem
+                key={routeKey(child.route)}
+                item={child}
                 selectedKey={selectedKey}
+                onNavigate={onNavigate}
               />
             ))}
           </SidebarMenu>
         </SidebarGroupContent>
       </SidebarGroup>
-    </nav>
+    </SidebarMenuItem>
   );
 }
 
@@ -107,10 +244,22 @@ function NavigationItem({
   const isSelected = routeKey(item.route) === selectedKey;
   const children = item.children;
   const disclosure = useDisclosure(item, selectedKey);
+  const badge = useNavigationBadge(item);
+  const counted = badge.count > 0 ? `${label} · ${badge.text}` : null;
   const tooltip = inPopover
     ? undefined
     : { children: label, role: 'tooltip', sideOffset: 8 };
 
+  if (item.section)
+    return (
+      <NavigationSection
+        item={item}
+        selectedKey={selectedKey}
+        onNavigate={navigate}
+        inPopover={inPopover}
+      />
+    );
+
   if (children.length > 0 && state === 'collapsed' && !isMobile && !inPopover)
     return (
       <SidebarMenuItem>
@@ -138,12 +287,22 @@ function NavigationItem({
         <SidebarMenuButton
           render={link}
           isActive={isSelected}
-          tooltip={tooltip}
+          // A counted entry is named with its count, as its tooltip shows it.
+          aria-label={counted ?? undefined}
+          tooltip={
+            tooltip && counted ? { ...tooltip, children: counted } : tooltip
+          }
           className={SELECTED}
         >
           {Icon ? <Icon /> : null}
           <span>{label}</span>
         </SidebarMenuButton>
+        {badge.count > 0 && (
+          <EntryBadge
+            {...badge}
+            dot={state === 'collapsed' && !isMobile && !inPopover}
+          />
+        )}
       </SidebarMenuItem>
     );
 
@@ -195,6 +354,50 @@ function NavigationItem({
   );
 }
 
+/**
+ * An entry's count at the row's end, on a round ground of its own; work under way in the primary color behind a
+ * pulsing dot. The primitive hides it in the icon mode, where a dot on the icon's corner keeps it noticed and the
+ * tooltip carries the count. The words are the entry's, so this is hidden from screen readers.
+ */
+function EntryBadge({
+  count,
+  live,
+  text,
+  dot,
+}: {
+  readonly count: number;
+  readonly live: boolean;
+  readonly text: string;
+  readonly dot: boolean;
+}): ReactElement {
+  const pulse = 'animate-pulse motion-reduce:animate-none';
+  return (
+    <>
+      <SidebarMenuBadge
+        aria-hidden
+        title={live ? text : undefined}
+        className={
+          live
+            ? 'gap-1 rounded-full bg-primary/10 px-1.5 text-primary dark:bg-primary/20'
+            : 'rounded-full bg-foreground/8 px-1.5 dark:bg-foreground/15'
+        }
+      >
+        {live && (
+          <span className={`size-1.5 rounded-full bg-primary ${pulse}`} />
+        )}
+        {count > 99 ? '99+' : count}
+      </SidebarMenuBadge>
+      {dot && (
+        <span
+          aria-hidden
+          data-slot='navigation-badge-dot'
+          className={`pointer-events-none absolute top-1 right-1 size-2 rounded-full bg-primary ${live ? pulse : ''}`}
+        />
+      )}
+    </>
+  );
+}
+
 /** An entry inside a sub-menu: a link, or a collapsible sub-menu of its own. */
 function NavigationSubItem({
   item,
@@ -206,6 +409,14 @@ function NavigationSubItem({
   const isSelected = routeKey(item.route) === selectedKey;
   const disclosure = useDisclosure(item, selectedKey);
   const children = item.children;
+  if (item.section)
+    return (
+      <NavigationSection
+        item={item}
+        selectedKey={selectedKey}
+        onNavigate={onNavigate}
+      />
+    );
   if (children.length === 0 && !item.route.componentLoader) return null;
 
   const link = item.route.componentLoader ? (

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

@@ -44,7 +44,7 @@ export function AppSidebarFooter(): ReactElement {
   );
 
   return (
-    <SidebarFooter className='shrink-0 border-t border-sidebar-border/70'>
+    <SidebarFooter className='shrink-0 border-t border-sidebar-border'>
       {/* The menu button's inset (`p-2`, `gap-2`), so the shield lines up with the menu icons above. */}
       <div className='flex min-w-0 items-start gap-2 p-2 text-xs leading-5'>
         <Tooltip>

package/client/layouts/components/user-menu.tsx

@@ -49,7 +49,7 @@ export function UserMenu(): ReactElement {
         aria-label={t('account.openMenu', {
           defaultValue: 'Open account menu',
         })}
-        className='flex size-10 cursor-pointer items-center justify-center rounded-full border border-border/70 bg-background/60 text-left text-sm outline-none transition-colors hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50'
+        className='flex size-10 cursor-pointer items-center justify-center rounded-full border border-border bg-background/60 text-left text-sm outline-none transition-colors hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50'
       >
         {identity?.avatar ? (
           <img

package/client/layouts/use-sidebar-preference.ts

@@ -1,57 +1,77 @@
-import { useSyncExternalStore, type SetStateAction } from 'react';
-
-// All applications and layout surfaces on this origin share this preference.
-const storageKey = 'nocobase:sidebar:collapsed';
-const changeEvent = 'nocobase:sidebar-preference-change';
-let memoryValue = false;
-let memoryOnly = false;
-
-function getSnapshot(): boolean {
-  if (memoryOnly) return memoryValue;
-  try {
-    memoryValue = localStorage.getItem(storageKey) === 'true';
-  } catch {
-    // Storage may be unavailable; keep the current session's preference.
+import {
+  createContext,
+  useContext,
+  useSyncExternalStore,
+  type SetStateAction,
+} from 'react';
+
+// Each application shares its preference across layouts and tabs, never across scopes.
+export function createSidebarPreferenceStore(scope: string) {
+  const storageKey = `nocobase:sidebar:collapsed:${scope}`;
+  const changeEvent = `nocobase:sidebar-preference-change:${scope}`;
+  let memoryValue = false;
+  let memoryOnly = false;
+
+  function getSnapshot(): boolean {
+    if (memoryOnly) return memoryValue;
+    try {
+      memoryValue = localStorage.getItem(storageKey) === 'true';
+    } catch {
+      // Storage may be unavailable; keep this application's session preference.
+    }
+    return memoryValue;
   }
-  return memoryValue;
-}
 
-function subscribe(notify: () => void): () => void {
-  const onStorage = (event: StorageEvent) => {
-    if (event.key === storageKey || event.key === null) notify();
-  };
-  window.addEventListener('storage', onStorage);
-  window.addEventListener(changeEvent, notify);
-  return () => {
-    window.removeEventListener('storage', onStorage);
-    window.removeEventListener(changeEvent, notify);
-  };
-}
+  function subscribe(notify: () => void): () => void {
+    const onStorage = (event: StorageEvent) => {
+      if (event.key === storageKey || event.key === null) notify();
+    };
+    window.addEventListener('storage', onStorage);
+    window.addEventListener(changeEvent, notify);
+    return () => {
+      window.removeEventListener('storage', onStorage);
+      window.removeEventListener(changeEvent, notify);
+    };
+  }
 
-function setCollapsed(update: SetStateAction<boolean>): void {
-  const current = getSnapshot();
-  memoryValue = typeof update === 'function' ? update(current) : update;
-  try {
-    localStorage.setItem(storageKey, String(memoryValue));
-  } catch {
-    memoryOnly = true;
-    // The toggle remains usable when storage is blocked.
+  function setCollapsed(update: SetStateAction<boolean>): void {
+    const current = getSnapshot();
+    memoryValue = typeof update === 'function' ? update(current) : update;
+    try {
+      localStorage.setItem(storageKey, String(memoryValue));
+    } catch {
+      memoryOnly = true;
+      // The toggle remains usable when storage is blocked.
+    }
+    window.dispatchEvent(new Event(changeEvent));
   }
-  window.dispatchEvent(new Event(changeEvent));
+
+  return { getSnapshot, subscribe, setCollapsed };
 }
 
-function getServerSnapshot(): boolean {
-  return false;
+type SidebarPreferenceStore = ReturnType<typeof createSidebarPreferenceStore>;
+
+export function createAppSidebarPreferenceStore(basename: string = '') {
+  const normalizedBasename = `/${basename.replace(/^\/+|\/+$/g, '')}`;
+  return createSidebarPreferenceStore(`app:${normalizedBasename}`);
 }
 
+const SidebarPreferenceContext = createContext<SidebarPreferenceStore | null>(
+  null,
+);
+
+export const SidebarPreferenceProvider = SidebarPreferenceContext.Provider;
+
 export function useSidebarPreference(): readonly [
   boolean,
   (update: SetStateAction<boolean>) => void,
 ] {
+  const store = useContext(SidebarPreferenceContext);
+  if (!store) throw new Error('SidebarPreferenceProvider is required.');
   const collapsed = useSyncExternalStore(
-    subscribe,
-    getSnapshot,
-    getServerSnapshot,
+    store.subscribe,
+    store.getSnapshot,
+    () => false,
   );
-  return [collapsed, setCollapsed];
+  return [collapsed, store.setCollapsed];
 }

package/client/lib/navigation-transform.ts

@@ -0,0 +1,8 @@
+import type { RouteNavigationItem } from '../routing/route-navigation.js';
+
+/** Application-owned navigation customization, applied after permission filtering. */
+export function transformNavigation(
+  items: RouteNavigationItem[],
+): RouteNavigationItem[] {
+  return items;
+}

package/client/lib/scrollbar.ts

@@ -0,0 +1,88 @@
+// Every scrollbar in the application shows only while what it belongs to scrolls, or while the mouse is near the
+// edge it runs along, so it can be found and grabbed (client/styles.css draws a bar under `[data-scrolling]` alone).
+// One listener on the document, in the capture phase since a scroll does not bubble, marks the element that scrolls,
+// or the page's root for the page itself, until it has been still for a moment; a second marks the scroller the mouse
+// is within EDGE_PX of the right or bottom edge of, at most once a frame. Installed once, as the client starts
+// (client/index.tsx).
+const STILL_MS = 800;
+const EDGE_PX = 16;
+const timers = new WeakMap<Element, number>();
+
+function reveal(element: HTMLElement): void {
+  element.dataset.scrolling = '';
+  window.clearTimeout(timers.get(element));
+  timers.set(
+    element,
+    window.setTimeout(() => {
+      delete element.dataset.scrolling;
+    }, STILL_MS),
+  );
+}
+
+function scrolls(element: Element, axis: 'x' | 'y'): boolean {
+  const overflow =
+    getComputedStyle(element)[axis === 'y' ? 'overflowY' : 'overflowX'];
+  if (overflow !== 'auto' && overflow !== 'scroll') return false;
+  return axis === 'y'
+    ? element.scrollHeight > element.clientHeight
+    : element.scrollWidth > element.clientWidth;
+}
+
+/** The scroller whose right or bottom edge the point is near: the nearest such ancestor of the target, or the page. */
+function scrollerAtEdge(
+  target: Element | null,
+  x: number,
+  y: number,
+): HTMLElement | undefined {
+  for (
+    let element = target;
+    element && element !== document.body;
+    element = element.parentElement
+  ) {
+    if (element === document.documentElement) break;
+    const box = element.getBoundingClientRect();
+    if (scrolls(element, 'y') && x >= box.right - EDGE_PX && x <= box.right)
+      return element as HTMLElement;
+    if (scrolls(element, 'x') && y >= box.bottom - EDGE_PX && y <= box.bottom)
+      return element as HTMLElement;
+  }
+  const page = (document.scrollingElement ??
+    document.documentElement) as HTMLElement;
+  if (page.scrollHeight > page.clientHeight && x >= window.innerWidth - EDGE_PX)
+    return page;
+  if (page.scrollWidth > page.clientWidth && y >= window.innerHeight - EDGE_PX)
+    return page;
+  return undefined;
+}
+
+export function revealScrollbarsWhileScrolling(): void {
+  document.addEventListener(
+    'scroll',
+    (event) => {
+      const element =
+        event.target instanceof Element
+          ? event.target
+          : (document.scrollingElement ?? document.documentElement);
+      if (element instanceof HTMLElement) reveal(element);
+    },
+    { capture: true, passive: true },
+  );
+  let frame = 0;
+  document.addEventListener(
+    'pointermove',
+    (event) => {
+      if (event.pointerType !== 'mouse' || frame) return;
+      const { clientX, clientY, target } = event;
+      frame = window.requestAnimationFrame(() => {
+        frame = 0;
+        const element = scrollerAtEdge(
+          target instanceof Element ? target : null,
+          clientX,
+          clientY,
+        );
+        if (element) reveal(element);
+      });
+    },
+    { passive: true },
+  );
+}

package/client/locales/system/en-US.ts

@@ -1,3 +1,4 @@
+import settings from './settings-en-US.js';
 import type { LocaleResource } from '@nocobase/i18n';
 import deviceApprovalEnUS from '#extensions/nocobase-device-approval/locales/en-US';
 import inboxEnUS from '#extensions/nocobase-inbox/locales/en-US';
@@ -7,6 +8,16 @@ import inboxEnUS from '#extensions/nocobase-inbox/locales/en-US';
  * upgrade replaces this file, so put the application's own copy in `../en-US.ts` rather than here.
  */
 const systemEnUS = {
+  settings,
+  'auth.preparingSession': 'Preparing your session…',
+  'auth.connectionFailed': 'Unable to connect',
+  'auth.connectionFailedDescription':
+    'The realtime connection could not be prepared. Retry to enter the application, or sign out.',
+
+  'auth.passwordResetSuccess':
+    'Your password has been reset. Sign in with your new password.',
+  'auth.requestNewResetLink': 'Request a new reset link',
+
   // The UI Library block of the `/device` page; the keys below may reword it.
   ...deviceApprovalEnUS,
   // The UI Library block of the `/inbox` page; the keys below may reword it.