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

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

@@ -0,0 +1,196 @@
+import { useTranslation } from '@nocobase/i18n/client';
+import { PanelLeft, X } from 'lucide-react';
+import {
+  useEffect,
+  type CSSProperties,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+
+import { Button } from '#components/ui/button';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from '#components/ui/sheet';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarHeader,
+  SidebarProvider,
+  SidebarRail,
+  useSidebar,
+} from '#components/ui/sidebar';
+import { TooltipProvider } from '#components/ui/tooltip';
+
+import { useSidebarPreference } from '../use-sidebar-preference.js';
+import { AppBrand } from './app-brand.js';
+
+// The layouts compose shadcn's Sidebar without editing `components/ui/sidebar.tsx`, so the primitive stays as the
+// shadcn CLI writes it and can be updated from the registry. Everything the template needs differently is done here.
+
+/**
+ * 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
+ * open stays local to the layout.
+ */
+export function AppSidebarProvider({
+  children,
+}: {
+  readonly children: ReactNode;
+}): ReactElement {
+  const [collapsed, setCollapsed] = useSidebarPreference();
+  useSuppressSidebarShortcut();
+  return (
+    <SidebarProvider
+      open={!collapsed}
+      onOpenChange={(open) => setCollapsed(!open)}
+      className='h-svh bg-background'
+      // shadcn's 16rem and 3rem, in spacing units: a density preset that changes the unit scales the sidebar together
+      // with the items inside it (the provider's documented way to set the widths).
+      style={
+        {
+          '--sidebar-width': 'calc(var(--spacing) * 64)',
+          '--sidebar-width-icon': 'calc(var(--spacing) * 12)',
+        } as CSSProperties
+      }
+    >
+      {/* Icon-mode labels appear as soon as the pointer reaches an entry, like the header's hints. */}
+      <TooltipProvider delay={0}>{children}</TooltipProvider>
+    </SidebarProvider>
+  );
+}
+
+/**
+ * shadcn's provider toggles the sidebar on Ctrl/Cmd+B from a `window` keydown listener. The template has no such
+ * shortcut (it is bold in every rich-text editor), so a `document` listener in the bubble phase stops the event
+ * before it reaches `window`. Whatever is focused, an editor included, still receives the key first.
+ */
+function useSuppressSidebarShortcut(): void {
+  useEffect(() => {
+    const stop = (event: KeyboardEvent) => {
+      if (event.key === 'b' && (event.metaKey || event.ctrlKey))
+        event.stopPropagation();
+    };
+    document.addEventListener('keydown', stop);
+    return () => document.removeEventListener('keydown', stop);
+  }, []);
+}
+
+/**
+ * The sidebar: the brand, the given navigation and an optional footer. On a desktop it is shadcn's `Sidebar` in icon
+ * mode; on a phone it is a Sheet rendered here with the same slots, because the primitive's own mobile sheet carries
+ * an untranslated title.
+ */
+export function AppSidebar({
+  children,
+  footer,
+  label,
+}: {
+  readonly children: ReactNode;
+  readonly footer?: ReactNode;
+  /** The accessible name of the sidebar, and the title of the phone's sheet. */
+  readonly label: string;
+}): ReactElement {
+  const { t } = useTranslation();
+  const { isMobile, openMobile, setOpenMobile, state } = useSidebar();
+  // A sheet left open on a phone must not reappear when the window narrows again after widening.
+  useEffect(() => {
+    if (!isMobile && openMobile) setOpenMobile(false);
+  }, [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'>
+      <AppBrand compact={state === 'collapsed' && !isMobile} />
+      {isMobile ? (
+        <Button
+          aria-label={t('navigation.close', {
+            defaultValue: 'Close navigation',
+          })}
+          className='hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:border-sidebar-ring focus-visible:ring-sidebar-ring dark:hover:bg-sidebar-accent'
+          onClick={() => setOpenMobile(false)}
+          size='icon'
+          variant='ghost'
+        >
+          <X />
+        </Button>
+      ) : null}
+    </SidebarHeader>
+  );
+  const content = (
+    <>
+      {header}
+      {/* The primitive hides the icon mode's overflow; a long menu still scrolls there. */}
+      <SidebarContent className='group-data-[collapsible=icon]:overflow-y-auto'>
+        {children}
+      </SidebarContent>
+      {footer}
+    </>
+  );
+
+  const railLabel = t('navigation.toggle', {
+    defaultValue: 'Expand or collapse navigation',
+  });
+
+  if (isMobile)
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile}>
+        {/* The attributes and classes of the primitive's own mobile branch, so `sidebar-*` styles apply alike. */}
+        <SheetContent
+          data-sidebar='sidebar'
+          data-slot='sidebar'
+          data-mobile='true'
+          className='w-(--sidebar-width) gap-0 bg-sidebar p-0 text-sidebar-foreground'
+          showCloseButton={false}
+          side='left'
+          style={
+            { '--sidebar-width': 'calc(var(--spacing) * 72)' } as CSSProperties
+          }
+        >
+          <SheetHeader className='sr-only'>
+            <SheetTitle>{label}</SheetTitle>
+            <SheetDescription>
+              {t('navigation.description', {
+                defaultValue: 'Go to a page of this application.',
+              })}
+            </SheetDescription>
+          </SheetHeader>
+          <div className='flex h-full w-full flex-col'>{content}</div>
+        </SheetContent>
+      </Sheet>
+    );
+
+  return (
+    <Sidebar collapsible='icon' role='complementary' aria-label={label}>
+      {content}
+      {/* The primitive's edge handle; its built-in label is untranslated, and the props given here replace it. */}
+      <SidebarRail aria-label={railLabel} title={railLabel} />
+    </Sidebar>
+  );
+}
+
+/** The header's sidebar button: opens the sheet on a phone, and switches the icon mode on a desktop. */
+export function AppSidebarToggle(): ReactElement {
+  const { t } = useTranslation();
+  const { isMobile, state, toggleSidebar } = useSidebar();
+  const collapsed = state === 'collapsed';
+  const label = isMobile
+    ? t('navigation.open', { defaultValue: 'Open navigation' })
+    : collapsed
+      ? t('navigation.expand', { defaultValue: 'Expand navigation' })
+      : t('navigation.collapse', { defaultValue: 'Collapse navigation' });
+  return (
+    <Button
+      aria-label={label}
+      aria-pressed={isMobile ? undefined : collapsed}
+      className='size-9 rounded-xl text-muted-foreground hover:text-foreground'
+      onClick={toggleSidebar}
+      size='icon'
+      variant='ghost'
+    >
+      <PanelLeft />
+    </Button>
+  );
+}

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

@@ -0,0 +1,50 @@
+import { useTranslation } from '@nocobase/i18n/client';
+import { Settings } from 'lucide-react';
+import type { ReactElement } from 'react';
+import { Link } from 'react-router';
+import {
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+} from '#components/ui/tooltip';
+
+import { ThemeSettings } from '../../theme/index.js';
+import { UserMenu } from './user-menu.js';
+import { InboxHeaderButton } from '#components/inbox-header-button';
+
+const ACTION_LINK_CLASS =
+  'inline-flex size-10 items-center justify-center rounded-xl border border-border/70 bg-background/60 text-foreground transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50';
+
+/** Keep header entries visible on their destination pages so navigation stays consistent across surfaces. */
+export function HeaderActions({
+  showSettings,
+}: {
+  readonly showSettings: boolean;
+}): ReactElement {
+  const { t } = useTranslation();
+
+  return (
+    <TooltipProvider>
+      <div className='flex shrink-0 items-center gap-2'>
+        {/* The inbox's entry, from the UI Library; keep its unread shortcut on every authenticated surface. */}
+        <InboxHeaderButton />
+        {showSettings ? (
+          <Tooltip>
+            <TooltipTrigger
+              render={<Link to='/settings' className={ACTION_LINK_CLASS} />}
+              aria-label={t('settings.title', { defaultValue: 'Settings' })}
+            >
+              <Settings className='size-5' />
+            </TooltipTrigger>
+            <TooltipContent side='bottom'>
+              {t('settings.title', { defaultValue: 'Settings' })}
+            </TooltipContent>
+          </Tooltip>
+        ) : null}
+        <ThemeSettings />
+        <UserMenu />
+      </div>
+    </TooltipProvider>
+  );
+}

package/client/layouts/components/language-switcher.tsx

@@ -0,0 +1,95 @@
+import { useToaster } from '@nocobase/app-client';
+import { useAppLocale } from '@nocobase/app-plugin-i18n/client';
+import { useTranslation } from '@nocobase/i18n/client';
+import { Languages } from 'lucide-react';
+import type { ReactElement } from 'react';
+
+import {
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+} from '#components/ui/dropdown-menu';
+import { cn } from 'cn';
+
+export interface LanguageSwitcherProps {
+  readonly className?: string;
+}
+
+/** Account-menu language choices; the plugin owns persistence and resource loading. */
+export function LanguageSwitcher({
+  className,
+}: LanguageSwitcherProps): ReactElement | null {
+  const { locale, locales, setLocale, switching } = useAppLocale();
+  const { t } = useTranslation();
+  const toaster = useToaster();
+
+  async function applyLocaleChange(value: string): Promise<void> {
+    const result = await setLocale(value);
+    if (result.fallback) {
+      toaster.show({
+        type: 'info',
+        title: t('notices.serverLocaleFallback', {
+          lng: value,
+          defaultValue:
+            'The server does not support this language, so server messages will use English.',
+        }),
+      });
+    }
+  }
+
+  function handleLocaleChange(value: unknown): void {
+    if (typeof value !== 'string' || value === locale) return;
+
+    const localeChange = applyLocaleChange(value);
+    localeChange.catch(() => {
+      toaster.show({
+        type: 'error',
+        title: t('notices.languageChangeFailed', {
+          lng: value,
+          defaultValue:
+            'Unable to complete the language change. Please try again.',
+        }),
+      });
+    });
+  }
+
+  // With one language there is nothing to choose.
+  if (locales.length < 2) return null;
+
+  return (
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger
+        className={cn('gap-2', className)}
+        disabled={switching}
+      >
+        <Languages aria-hidden='true' className='size-4' />
+        <span className='flex-1'>
+          {t('actions.language', { defaultValue: 'Language' })}
+        </span>
+        <span className='text-muted-foreground'>
+          {locales.find((definition) => definition.locale === locale)?.label ??
+            locale}
+        </span>
+      </DropdownMenuSubTrigger>
+      <DropdownMenuSubContent>
+        <DropdownMenuRadioGroup
+          value={locale}
+          onValueChange={handleLocaleChange}
+        >
+          {locales.map((definition) => (
+            <DropdownMenuRadioItem
+              closeOnClick
+              key={definition.locale}
+              value={definition.locale}
+              disabled={switching}
+            >
+              {definition.label}
+            </DropdownMenuRadioItem>
+          ))}
+        </DropdownMenuRadioGroup>
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+  );
+}

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

@@ -0,0 +1,17 @@
+import type { ComponentProps } from 'react';
+import { cn } from 'cn';
+
+export function LayoutHeader({
+  className,
+  ...props
+}: ComponentProps<'header'>) {
+  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',
+        className,
+      )}
+      {...props}
+    />
+  );
+}