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

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

@@ -0,0 +1,411 @@
+import { useTranslation } from '@nocobase/i18n/client';
+import { ChevronRight } from 'lucide-react';
+import { useRef, useState, type ReactElement } from 'react';
+import { Link } from 'react-router';
+
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '#components/ui/collapsible';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTitle,
+  PopoverTrigger,
+} from '#components/ui/popover';
+import {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  useSidebar,
+} from '#components/ui/sidebar';
+
+import {
+  routeKey,
+  type RouteNavigationItem,
+} from '../../routing/route-navigation.js';
+
+// The selected entry uses the theme's `--sidebar-primary` pair (`theme.md`), where shadcn's menu buttons use the
+// hover color; the class is passed in, the primitive stays unchanged.
+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.
+ */
+export function NavigationMenu({
+  items,
+  label,
+  selectedKey,
+}: {
+  readonly items: readonly RouteNavigationItem[];
+  readonly label: string;
+  readonly selectedKey: string | undefined;
+}): ReactElement {
+  return (
+    <nav aria-label={label}>
+      <SidebarGroup>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            {items.map((item) => (
+              <NavigationItem
+                key={routeKey(item.route)}
+                item={item}
+                selectedKey={selectedKey}
+              />
+            ))}
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    </nav>
+  );
+}
+
+function useItemLabel(item: RouteNavigationItem): string {
+  const { t } = useTranslation(item.route.packageName);
+  const title = item.route.navigation?.title ?? '';
+  return t(title, { defaultValue: title });
+}
+
+/** Closes the phone's sheet once an entry is chosen; the desktop sidebar stays as it is. */
+function useCloseOnNavigate(): () => void {
+  const { isMobile, setOpenMobile } = useSidebar();
+  return () => {
+    if (isMobile) setOpenMobile(false);
+  };
+}
+
+interface ItemProps {
+  readonly item: RouteNavigationItem;
+  readonly selectedKey: string | undefined;
+  /** Rendered inside the icon mode's popover, where tooltips and the icon mode's popovers do not apply. */
+  readonly inPopover?: boolean;
+  readonly onNavigate?: () => void;
+}
+
+/** One top-level entry of a menu: a link, a collapsible sub-menu, or in the icon mode a popover of its children. */
+function NavigationItem({
+  item,
+  selectedKey,
+  inPopover = false,
+  onNavigate,
+}: ItemProps): ReactElement | null {
+  const { state, isMobile } = useSidebar();
+  const closeSheet = useCloseOnNavigate();
+  const navigate = onNavigate ?? closeSheet;
+  const label = useItemLabel(item);
+  const Icon = item.route.navigation?.icon;
+  const isSelected = routeKey(item.route) === selectedKey;
+  const children = item.children;
+  const disclosure = useDisclosure(item, selectedKey);
+  const tooltip = inPopover
+    ? undefined
+    : { children: label, role: 'tooltip', sideOffset: 8 };
+
+  if (children.length > 0 && state === 'collapsed' && !isMobile && !inPopover)
+    return (
+      <SidebarMenuItem>
+        <NavigationPopover
+          item={item}
+          label={label}
+          selectedKey={selectedKey}
+        />
+      </SidebarMenuItem>
+    );
+
+  if (children.length === 0 && !item.route.componentLoader) return null;
+
+  const link = item.route.componentLoader ? (
+    <Link
+      to={item.route.path}
+      onClick={navigate}
+      aria-current={isSelected ? 'page' : undefined}
+    />
+  ) : undefined;
+
+  if (children.length === 0)
+    return (
+      <SidebarMenuItem>
+        <SidebarMenuButton
+          render={link}
+          isActive={isSelected}
+          tooltip={tooltip}
+          className={SELECTED}
+        >
+          {Icon ? <Icon /> : null}
+          <span>{label}</span>
+        </SidebarMenuButton>
+      </SidebarMenuItem>
+    );
+
+  return (
+    <Collapsible
+      open={disclosure.expanded}
+      onOpenChange={disclosure.setExpanded}
+      render={<SidebarMenuItem />}
+    >
+      {link ? (
+        <>
+          <SidebarMenuButton
+            render={link}
+            isActive={isSelected}
+            tooltip={tooltip}
+            className={SELECTED}
+          >
+            {Icon ? <Icon /> : null}
+            <span>{label}</span>
+          </SidebarMenuButton>
+          <SidebarMenuAction
+            render={<CollapsibleTrigger />}
+            aria-label={label}
+            className='data-panel-open:rotate-90'
+          >
+            <ChevronRight />
+          </SidebarMenuAction>
+        </>
+      ) : (
+        <SidebarMenuButton render={<CollapsibleTrigger />} tooltip={tooltip}>
+          {Icon ? <Icon /> : null}
+          <span>{label}</span>
+          <ChevronRight className='ml-auto transition-transform group-data-panel-open/menu-button:rotate-90' />
+        </SidebarMenuButton>
+      )}
+      <CollapsibleContent>
+        <SidebarMenuSub>
+          {children.map((child) => (
+            <NavigationSubItem
+              key={routeKey(child.route)}
+              item={child}
+              selectedKey={selectedKey}
+              onNavigate={navigate}
+            />
+          ))}
+        </SidebarMenuSub>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+/** An entry inside a sub-menu: a link, or a collapsible sub-menu of its own. */
+function NavigationSubItem({
+  item,
+  selectedKey,
+  onNavigate,
+}: ItemProps): ReactElement | null {
+  const label = useItemLabel(item);
+  const Icon = item.route.navigation?.icon;
+  const isSelected = routeKey(item.route) === selectedKey;
+  const disclosure = useDisclosure(item, selectedKey);
+  const children = item.children;
+  if (children.length === 0 && !item.route.componentLoader) return null;
+
+  const link = item.route.componentLoader ? (
+    <Link
+      to={item.route.path}
+      onClick={onNavigate}
+      aria-current={isSelected ? 'page' : undefined}
+    />
+  ) : undefined;
+  const content = (
+    <>
+      {Icon ? <Icon /> : null}
+      <span>{label}</span>
+    </>
+  );
+
+  if (children.length === 0)
+    return (
+      <SidebarMenuSubItem>
+        <SidebarMenuSubButton
+          render={link}
+          isActive={isSelected}
+          className={SELECTED}
+        >
+          {content}
+        </SidebarMenuSubButton>
+      </SidebarMenuSubItem>
+    );
+
+  return (
+    <Collapsible
+      open={disclosure.expanded}
+      onOpenChange={disclosure.setExpanded}
+      render={<SidebarMenuSubItem />}
+    >
+      {link ? (
+        <>
+          <SidebarMenuSubButton
+            render={link}
+            isActive={isSelected}
+            className={`${SELECTED} pr-8`}
+          >
+            {content}
+          </SidebarMenuSubButton>
+          <SidebarMenuAction
+            render={<CollapsibleTrigger />}
+            aria-label={label}
+            className='top-1 data-panel-open:rotate-90'
+          >
+            <ChevronRight />
+          </SidebarMenuAction>
+        </>
+      ) : (
+        <SidebarMenuSubButton render={<CollapsibleTrigger />}>
+          {Icon ? <Icon /> : null}
+          <span>{label}</span>
+          <ChevronRight className='ml-auto transition-transform in-data-panel-open:rotate-90' />
+        </SidebarMenuSubButton>
+      )}
+      <CollapsibleContent>
+        <SidebarMenuSub>
+          {children.map((child) => (
+            <NavigationSubItem
+              key={routeKey(child.route)}
+              item={child}
+              selectedKey={selectedKey}
+              onNavigate={onNavigate}
+            />
+          ))}
+        </SidebarMenuSub>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+/**
+ * A disclosure that opens when the selection moves into it and otherwise keeps what the person chose, so navigating
+ * elsewhere does not discard other groups' state.
+ */
+function useDisclosure(
+  item: RouteNavigationItem,
+  selectedKey: string | undefined,
+): { expanded: boolean; setExpanded: (expanded: boolean) => void } {
+  const selected = containsSelection(item, selectedKey);
+  const [disclosure, setDisclosure] = useState({
+    key: selectedKey,
+    expanded: selected,
+  });
+  if (disclosure.key !== selectedKey)
+    setDisclosure({
+      key: selectedKey,
+      expanded: selected || disclosure.expanded,
+    });
+  return {
+    expanded: disclosure.expanded,
+    setExpanded: (expanded) => setDisclosure({ key: selectedKey, expanded }),
+  };
+}
+
+function containsSelection(
+  item: RouteNavigationItem,
+  id: string | undefined,
+): boolean {
+  return (
+    routeKey(item.route) === id ||
+    item.children.some((child) => containsSelection(child, id))
+  );
+}
+
+/**
+ * The icon mode's entry with children: the icon opens its children in a popover on hover or keyboard focus, as a
+ * tooltip cannot hold links. A parent with a page of its own stays a link, and a group holding the selected page is
+ * highlighted.
+ */
+function NavigationPopover({
+  item,
+  label,
+  selectedKey,
+}: {
+  readonly item: RouteNavigationItem;
+  readonly label: string;
+  readonly selectedKey: string | undefined;
+}): ReactElement {
+  const [open, setOpen] = useState(false);
+  const restoringFocusRef = useRef(false);
+  const Icon = item.route.navigation?.icon;
+  const page = Boolean(item.route.componentLoader);
+  const close = () => setOpen(false);
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <SidebarMenuButton
+        isActive={containsSelection(item, selectedKey)}
+        className={`${SELECTED} data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground`}
+        render={
+          <PopoverTrigger
+            openOnHover
+            delay={0}
+            closeDelay={0}
+            onClick={
+              page
+                ? (event) => {
+                    event.preventBaseUIHandler();
+                    close();
+                  }
+                : undefined
+            }
+            onFocus={(event) => {
+              if (restoringFocusRef.current) {
+                restoringFocusRef.current = false;
+                return;
+              }
+              if (event.currentTarget.matches(':focus-visible')) setOpen(true);
+            }}
+            nativeButton={!page}
+            role={page ? 'link' : undefined}
+            render={
+              page ? (
+                <Link
+                  to={item.route.path}
+                  aria-current={
+                    routeKey(item.route) === selectedKey ? 'page' : undefined
+                  }
+                />
+              ) : (
+                <button type='button' />
+              )
+            }
+          />
+        }
+        aria-label={label}
+      >
+        {Icon ? <Icon /> : <span>{label}</span>}
+      </SidebarMenuButton>
+      <PopoverContent
+        side='right'
+        align='start'
+        sideOffset={8}
+        initialFocus={false}
+        // Returning focus after Escape must not reopen the popup.
+        finalFocus={(interaction) => {
+          restoringFocusRef.current = interaction === 'keyboard';
+          return interaction === 'keyboard';
+        }}
+        className='max-h-(--available-height) w-max min-w-40 max-w-sm gap-0.5 overflow-y-auto border border-sidebar-border bg-sidebar p-1.5 text-sidebar-foreground shadow-lg'
+      >
+        <PopoverTitle className='px-2 pt-1 pb-0.5 text-xs font-medium whitespace-nowrap text-muted-foreground'>
+          {label}
+        </PopoverTitle>
+        <SidebarMenu>
+          {item.children.map((child) => (
+            <NavigationItem
+              key={routeKey(child.route)}
+              item={child}
+              selectedKey={selectedKey}
+              inPopover
+              onNavigate={close}
+            />
+          ))}
+        </SidebarMenu>
+      </PopoverContent>
+    </Popover>
+  );
+}

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

@@ -0,0 +1,107 @@
+import { Trans } from 'react-i18next';
+import { useClientApplication } from '@nocobase/app-client';
+import { useTranslation } from '@nocobase/i18n/client';
+import { ShieldCheck } from 'lucide-react';
+import type { ReactElement } from 'react';
+
+import { SidebarFooter, useSidebar } from '#components/ui/sidebar';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '#components/ui/tooltip';
+
+/**
+ * The application's sidebar footer: the NocoBase slogan's two lines, then the template's name and its version, each
+ * on its own line. In icon mode only the shield remains, and a tooltip carries the same text.
+ */
+export function AppSidebarFooter(): ReactElement {
+  const { t } = useTranslation();
+  const { isMobile, state } = useSidebar();
+  const iconOnly = state === 'collapsed' && !isMobile;
+  // Published by the server from the application's package.json.
+  const publicConfig = useClientApplication().config.public;
+  const templateName = publicConfig.get('app.displayName', 'Default Template');
+  const templateVersion = publicConfig.get('app.version', '0.0.0');
+  const versionLabel = `v${templateVersion}`;
+  const buildFreely = t('shell.buildFreely', {
+    defaultValue: 'AI builds freely.',
+  });
+  // The tooltip and the icon's accessible name have no link, so the brand's markup is dropped there.
+  const reliability = t('shell.reliability', {
+    defaultValue: '<brand>NocoBase</brand> keeps it reliable.',
+  }).replace(/<\/?brand>/g, '');
+
+  const brandLink = (
+    <a
+      className='rounded-sm text-sidebar-foreground outline-none hover:underline focus-visible:ring-2 focus-visible:ring-sidebar-ring'
+      href='https://www.nocobase.com'
+      rel='noopener noreferrer'
+      target='_blank'
+    >
+      NocoBase
+    </a>
+  );
+
+  return (
+    <SidebarFooter className='shrink-0 border-t border-sidebar-border/70'>
+      {/* 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>
+          <TooltipTrigger
+            render={
+              <span
+                aria-label={
+                  iconOnly
+                    ? `${buildFreely} ${reliability} ${templateName} ${versionLabel}`
+                    : undefined
+                }
+                className='flex h-5 shrink-0 items-center rounded-sm text-sidebar-foreground/80 outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring'
+                role={iconOnly ? 'img' : undefined}
+                tabIndex={iconOnly ? 0 : undefined}
+              />
+            }
+          >
+            <ShieldCheck aria-hidden className='size-4' />
+          </TooltipTrigger>
+          <TooltipContent
+            className='max-w-56 flex-col items-start gap-0.5'
+            hidden={!iconOnly}
+            side='right'
+          >
+            <span className='font-medium'>{buildFreely}</span>
+            <span>{reliability}</span>
+            <span className='mt-1 opacity-70'>
+              {templateName} {versionLabel}
+            </span>
+          </TooltipContent>
+        </Tooltip>
+        <div className='min-w-0 flex-1 group-data-[collapsible=icon]:hidden'>
+          <p className='font-medium text-balance text-sidebar-foreground'>
+            {buildFreely}
+          </p>
+          <p className='text-balance text-muted-foreground'>
+            <Trans
+              t={t}
+              i18nKey='shell.reliability'
+              defaults='<brand>NocoBase</brand> keeps it reliable.'
+              components={{ brand: brandLink }}
+            >
+              {brandLink} keeps it reliable.
+            </Trans>
+          </p>
+          {/* Name and version stay on one line each; a long name is cut off, with the whole name as its title. */}
+          <p
+            className='mt-1 truncate text-muted-foreground'
+            title={templateName}
+          >
+            {templateName}
+          </p>
+          <p className='truncate text-muted-foreground' title={versionLabel}>
+            {versionLabel}
+          </p>
+        </div>
+      </div>
+    </SidebarFooter>
+  );
+}

package/client/layouts/components/surface-empty.tsx

@@ -0,0 +1,35 @@
+import { useTranslation } from '@nocobase/i18n/client';
+import { ArrowLeft } from 'lucide-react';
+import { Link } from 'react-router';
+import type { ReactElement } from 'react';
+export interface SurfaceCopy {
+  /** Labels the navigation landmark and the loading state, such as `Settings` or `Dev tools`. */
+  readonly title: string;
+  /** The path this surface mounts at, used to strip the prefix from nested route paths. */
+  readonly pathPrefix: string;
+  readonly emptyTitle: string;
+  readonly emptyDescription: string;
+}
+
+export function SurfaceEmpty({
+  copy,
+}: {
+  readonly copy: SurfaceCopy;
+}): ReactElement {
+  const { t } = useTranslation();
+  return (
+    <main className='grid min-h-svh place-items-center px-6'>
+      <section className='w-full max-w-lg space-y-3 text-center'>
+        <h1 className='text-xl font-semibold'>{copy.emptyTitle}</h1>
+        <p className='text-sm text-muted-foreground'>{copy.emptyDescription}</p>
+        <Link
+          className='inline-flex items-center gap-2 text-sm font-medium text-primary hover:underline'
+          to='/'
+        >
+          <ArrowLeft className='size-4' />
+          {t('surface.backToApp', { defaultValue: 'Back to app' })}
+        </Link>
+      </section>
+    </main>
+  );
+}

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

@@ -0,0 +1,127 @@
+import { useToaster } from '@nocobase/app-client';
+import { useTranslation } from '@nocobase/i18n/client';
+import { useAuthentication } from '@nocobase/app-plugin-authentication/client';
+import { LogOut, UserRound } from 'lucide-react';
+import { useState, type ReactElement } from 'react';
+
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '#components/ui/dropdown-menu';
+
+import { LanguageSwitcher } from './language-switcher.js';
+
+export function UserMenu(): ReactElement {
+  const {
+    client,
+    session,
+    isPending: isLoading,
+    refresh,
+  } = useAuthentication();
+  const identity = session?.user
+    ? {
+        id: session.user.id,
+        fullName: session.user.name,
+        email: session.user.email,
+        avatar: session.user.image ?? undefined,
+      }
+    : null;
+  const [isLoggingOut, setIsLoggingOut] = useState(false);
+  const { t } = useTranslation();
+  const toaster = useToaster();
+
+  const name =
+    identity?.fullName ||
+    identity?.email ||
+    t('account.fallback', { defaultValue: 'Account' });
+  const initials = getInitials(name);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        openOnHover
+        delay={0}
+        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'
+      >
+        {identity?.avatar ? (
+          <img
+            src={identity.avatar}
+            alt=''
+            className='size-full rounded-full object-cover'
+          />
+        ) : (
+          <span className='grid size-full place-items-center rounded-full bg-muted text-xs font-medium text-muted-foreground'>
+            {isLoading ? <UserRound className='size-4' /> : initials}
+          </span>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end' className='w-64'>
+        <div className='px-2 py-1.5'>
+          <p className='truncate text-sm font-medium'>{name}</p>
+          {identity?.email ? (
+            <p className='truncate text-xs text-muted-foreground'>
+              {identity.email}
+            </p>
+          ) : null}
+        </div>
+        <DropdownMenuSeparator />
+        <LanguageSwitcher />
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          disabled={isLoggingOut}
+          onClick={() => {
+            void (async () => {
+              setIsLoggingOut(true);
+              try {
+                // Better Auth returns API failures as data rather than throwing.
+                const result = await client.signOut();
+                if (result.error) {
+                  toaster.show({
+                    type: 'error',
+                    title: t('account.signOutFailed', {
+                      defaultValue: 'Unable to sign out. Please try again.',
+                    }),
+                  });
+                  return;
+                }
+                await refresh();
+              } catch {
+                toaster.show({
+                  type: 'error',
+                  title: t('account.signOutFailed', {
+                    defaultValue: 'Unable to sign out. Please try again.',
+                  }),
+                });
+              } finally {
+                setIsLoggingOut(false);
+              }
+            })();
+          }}
+          className='gap-2'
+        >
+          <LogOut className='size-4' />
+          {isLoggingOut
+            ? t('account.signingOut', { defaultValue: 'Signing out…' })
+            : t('account.signOut', { defaultValue: 'Sign out' })}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function getInitials(name: string): string {
+  const words = name.trim().split(/\s+/).filter(Boolean);
+  if (words.length === 0) {
+    return '?';
+  }
+  return words
+    .slice(0, 2)
+    .map((word) => word[0]?.toUpperCase() ?? '')
+    .join('');
+}

package/client/layouts/index.ts

@@ -0,0 +1,2 @@
+export { AppLayout, type AppLayoutProps } from './app-layout.js';
+export { SettingsLayout, type SettingsLayoutProps } from './settings-layout.js';