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

package/tests/logic/client-shell.test.tsx

@@ -11,7 +11,6 @@ import {
 } from '@nocobase/app-plugin-authentication/client';
 import {
   AuthorizationClient,
-  type AuthorizationCheck,
   authorizationClientToken,
 } from '@nocobase/app-plugin-authorization/client';
 import {
@@ -29,12 +28,6 @@ import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { AppRouter } from '../../client/routing/app-router.tsx';
 import { AppThemeProvider } from '../../client/theme/index.ts';
 
-// The header's inbox button reads the in-app notification plugin's API, which these tests do not serve; it is
-// covered by tests/components/inbox.test.tsx.
-vi.mock('../../client/components/inbox-header-button', () => ({
-  InboxHeaderButton: () => null,
-}));
-
 afterEach(() => vi.unstubAllGlobals());
 
 /** The sidebar's entries; the header's breadcrumb names the current page as well. */
@@ -109,47 +102,16 @@ describe('application shell', () => {
     ).toBeVisible();
   });
 
-  it.each([true, false])(
-    'shows the Settings entry only when a page is accessible (%s)',
-    async (allowed) => {
-      const can = vi.fn(
-        async ({ resource }: AuthorizationCheck) =>
-          resource.id !== 'preferences' || allowed,
-      );
-      renderApplication('/', true, [], {
-        authorization: { can },
-        settingsRouteTree: [
-          createRoute(
-            'preferences',
-            '/settings/preferences',
-            'required',
-            () => <h2>Preferences</h2>,
-            'plugin',
-            'Preferences',
-            true,
-          ),
-        ],
-      });
-      await screen.findByRole('heading', { name: 'App client is ready' });
-      await waitFor(() =>
-        expect(can).toHaveBeenCalledWith(
-          expect.objectContaining({
-            resource: { type: 'page', id: 'preferences' },
-            action: 'access',
-          }),
-        ),
-      );
-      if (allowed) {
-        expect(
-          await screen.findByRole('link', { name: 'Settings' }),
-        ).toBeVisible();
-      } else {
-        expect(
-          screen.queryByRole('link', { name: 'Settings' }),
-        ).not.toBeInTheDocument();
-      }
-    },
-  );
+  it('renders no Settings or Inbox entry in the header', async () => {
+    renderApplication('/', true);
+    await screen.findByRole('heading', { name: 'App client is ready' });
+    expect(
+      screen.queryByRole('link', { name: 'Settings' }),
+    ).not.toBeInTheDocument();
+    expect(
+      screen.queryByRole('link', { name: /inbox/i }),
+    ).not.toBeInTheDocument();
+  });
 
   it('renders nested pages through manual outlets and selects the nearest menu ancestor', async () => {
     const child = createRoute('detail', '/orders/42', 'required', () => (
@@ -286,57 +248,6 @@ describe('application shell', () => {
     );
   });
 
-  it('renders dev pages inside the application shell, outside its navigation', async () => {
-    const playground = createRoute(
-      'playground',
-      '/dev/playground',
-      'required',
-      () => <h2>Playground page</h2>,
-      'plugin',
-      'Playground',
-    );
-    const demos: AppClientRegisteredRoute = {
-      ...createRoute('demos', '/dev/demos', 'required', () => null),
-      componentLoader: undefined,
-      navigation: { title: 'Demos' },
-      children: [
-        createRoute('chat', '/dev/demos/chat', 'required', () => (
-          <h2>Chat demo page</h2>
-        )),
-      ],
-    };
-    renderApplication('/dev/playground', true, [], {
-      devRouteTree: [playground, demos],
-    });
-
-    expect(await screen.findByText('Playground page')).toBeVisible();
-    expect(
-      screen.getByRole('navigation', { name: 'Application navigation' }),
-    ).toBeVisible();
-    expect(
-      within(sidebar()).queryByRole('link', { name: 'Playground' }),
-    ).not.toBeInTheDocument();
-    expect(screen.queryByText('Demos')).not.toBeInTheDocument();
-    expect(
-      screen.queryByRole('link', { name: 'Settings' }),
-    ).not.toBeInTheDocument();
-  });
-
-  it('renders a dev page nested under a dev group', async () => {
-    const demos: AppClientRegisteredRoute = {
-      ...createRoute('demos', '/dev/demos', 'required', () => null),
-      componentLoader: undefined,
-      children: [
-        createRoute('chat', '/dev/demos/chat', 'required', () => (
-          <h2>Chat demo page</h2>
-        )),
-      ],
-    };
-    renderApplication('/dev/demos/chat', true, [], { devRouteTree: [demos] });
-
-    expect(await screen.findByText('Chat demo page')).toBeVisible();
-  });
-
   it('keeps guest pages outside the application shell', async () => {
     renderApplication('/login', false, [
       createRoute('login', '/login', 'guest', GuestPage),
@@ -356,8 +267,6 @@ function renderApplication(
   routes: readonly AppClientRegisteredRoute[] = [],
   options: {
     readonly authorization?: Pick<AuthorizationClient, 'can'>;
-    readonly settingsRouteTree?: readonly AppClientRegisteredRoute[];
-    readonly devRouteTree?: readonly AppClientRegisteredRoute[];
   } = {},
 ): void {
   const clientRoutes = [
@@ -383,7 +292,6 @@ function renderApplication(
   ]);
   const app = {
     config: createAppClientConfig({ rawConfig: {} }),
-    runtime: { settingsRouteTree: options.settingsRouteTree ?? [] },
     services: {
       has: (token: unknown) => registered.has(token),
       resolve: (token: unknown) => {
@@ -397,11 +305,7 @@ function renderApplication(
       <AuthenticationProvider>
         <MemoryRouter initialEntries={[initialEntry]}>
           <AppThemeProvider>
-            <AppRouter
-              devRouteTree={options.devRouteTree ?? []}
-              clientRoutes={clientRoutes}
-              settingsRouteTree={options.settingsRouteTree ?? []}
-            />
+            <AppRouter clientRoutes={clientRoutes} />
           </AppThemeProvider>
         </MemoryRouter>
       </AuthenticationProvider>

package/tests/logic/client-theme.test.tsx

@@ -70,12 +70,28 @@ describe('app client theme', () => {
       );
       await openAppearance(appearance);
       const option = await screen.findByRole('radio', { name: label });
-      expect(option).toHaveAttribute('value', 'default');
       await userEvent.click(option);
+      expect(option).toBeChecked();
       expect(localStorage.getItem('nocobase:crm:theme:preset')).toBe('default');
     },
   );
 
+  it('changes presets with arrow keys and returns focus on Escape', async () => {
+    render(
+      <AppThemeProvider>
+        <ThemeSettings />
+      </AppThemeProvider>,
+    );
+    await openAppearance();
+    const compact = await screen.findByRole('radio', { name: 'Compact' });
+    act(() => compact.focus());
+    await userEvent.keyboard('{ArrowRight}');
+    expect(screen.getByRole('radio', { name: 'Default' })).toBeChecked();
+    expect(localStorage.getItem('nocobase:crm:theme:preset')).toBe('default');
+    await userEvent.keyboard('{Escape}');
+    expect(screen.getByRole('button', { name: 'Appearance' })).toHaveFocus();
+  });
+
   it('falls back from the removed Ant Design preset without changing mode', async () => {
     localStorage.setItem('nocobase:crm:theme:preset', 'ant-design');
     localStorage.setItem('nocobase:crm:theme:color-scheme', 'light');

package/tests/logic/config.test.ts

@@ -187,7 +187,6 @@ describe('application config', () => {
     expect(runtime.config.get('session.stores.redis.host')).toBe('127.0.0.1');
     expect(runtime.config.get('logging.console.pretty')).toBe(false);
     expect(runtime.config.get('session.cookie.secure')).toBe(true);
-    expect(runtime.config.get('workflow')).toBeUndefined();
     delete runtime.env.APP_SERVER_PORT;
     delete runtime.env.APP_SERVER_START_LOG;
     await runtime.config.reload();

package/tests/logic/plugin-commands.test.ts

@@ -1,7 +1,7 @@
 // @vitest-environment node
 
 // Users develop, build and start their app through these scripts. Nothing at runtime depends on them, so dropping or
-// renaming one — a bad merge resolution did exactly that once — breaks the documented workflow silently: the app still
+// renaming one — a bad merge resolution did exactly that once — breaks the documented development steps silently: the app still
 // builds, starts, and passes every other test. These assertions are the alarm.
 import { existsSync, readFileSync } from 'node:fs';
 import path from 'node:path';

package/tsconfig.json

@@ -3,9 +3,6 @@
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.tsbuildinfo"
   },
-  // A workflow package's client form is browser code that the application's
-  // Vite build resolves through the workflow plugin's virtual module, so it is
-  // typechecked here rather than by the server build.
-  "include": ["client", "workflows/*/client"],
+  "include": ["client"],
   "exclude": ["registry"]
 }

package/tsconfig.server.json

@@ -10,10 +10,5 @@
     "outDir": "dist"
   },
   "tsc-alias": { "resolveFullPaths": true },
-  "include": [
-    "server/**/*.ts",
-    "database/**/*.ts",
-    "cli/**/*.ts",
-    "workflows/**/*.ts"
-  ]
+  "include": ["server/**/*.ts", "database/**/*.ts", "cli/**/*.ts"]
 }

package/vitest.config.ts

@@ -24,14 +24,7 @@ export default createReactVitestConfig({
     // those tests were never run at all.
     include: ['tests/**/*.test.{ts,tsx}'],
     // Playwright runs tests/playwright/ against a built application; its files are named *.test.ts too.
-    exclude: [
-      'tests/playwright/**',
-      // TODO: Re-enable Workflow examples and page tests with the capability tests.
-      'tests/components/workflow-waiting-task.test.tsx',
-      'tests/logic/workflow-examples.test.ts',
-      'tests/logic/quotation-review-routes.test.ts',
-      'tests/logic/analytics-report-date.test.ts',
-    ],
+    exclude: ['tests/playwright/**'],
     setupFiles: ['./tests/setup/client-config.ts'],
     // Keep the command usable if an application intentionally removes all scaffold tests before adding its own.
     passWithNoTests: true,

package/client/components/inbox-badge.ts

@@ -1,49 +0,0 @@
-import { useEffect } from 'react';
-
-/**
- * What the inbox button shows: the count of what waits on the viewer (`decisions`), or, with none waiting, the count
- * of unread items; nothing otherwise.
- *
- * What waits wins outright rather than adding up with the unread items. The two overlap: a waiting decision is also an
- * unread item until opened, so a sum would count it twice. And a sum would blur what the badge means: amber says
- * "needs you", which an unread notification does not.
- */
-export type InboxBadge = {
-  readonly kind: 'decisions' | 'unread';
-  readonly count: number;
-  readonly text: string;
-} | null;
-
-/** The badge's text for `count`: "99+" above 99 so the badge keeps its size, none at zero. */
-export function inboxBadgeText(count: number): string | null {
-  if (!Number.isFinite(count) || count <= 0) return null;
-  return count > 99 ? '99+' : String(count);
-}
-
-export function inboxBadge(decisions: number, unread: number): InboxBadge {
-  const pending = inboxBadgeText(decisions);
-  if (pending) return { kind: 'decisions', count: decisions, text: pending };
-  const text = inboxBadgeText(unread);
-  return text ? { kind: 'unread', count: unread, text } : null;
-}
-
-const TITLE_COUNT = /^\(\d+\+?\) /;
-
-/**
- * The browser tab title with the badge text in front (`(3) Inbox`), or without it when `text` is null. Any earlier
- * count prefix is replaced, so applying it again never stacks prefixes.
- */
-export function inboxTitle(title: string, text: string | null): string {
-  const base = title.replace(TITLE_COUNT, '');
-  return text ? `(${text}) ${base}` : base;
-}
-
-/** Puts the badge text in front of the browser tab title while mounted, and takes it off again. */
-export function useDocumentTitleBadge(text: string | null): void {
-  useEffect(() => {
-    document.title = inboxTitle(document.title, text);
-    return () => {
-      document.title = inboxTitle(document.title, null);
-    };
-  }, [text]);
-}

package/client/components/inbox-button.tsx

@@ -1,132 +0,0 @@
-import { useTranslation } from '@nocobase/i18n/client';
-import { InboxIcon } from 'lucide-react';
-import type { ReactElement } from 'react';
-import { Link, useLocation } from 'react-router';
-
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from '#components/ui/tooltip';
-import { cn } from 'cn';
-
-import type { InboxBadge } from './inbox-badge.js';
-
-/** Other words for the button, in place of its `inboxButton.*` translations. */
-export interface InboxButtonLabels {
-  readonly title?: string;
-  readonly pending?: (count: number) => string;
-  readonly unread?: (count: number) => string;
-  readonly pendingHint?: (count: number) => string;
-  readonly unreadHint?: (count: number) => string;
-}
-
-export interface InboxButtonProps {
-  /** Where the inbox is. */
-  readonly to?: string;
-  /** What the badge shows (`inboxBadge`); none when null. */
-  readonly badge: InboxBadge;
-  /** Marks the button current; on `to` and below it when left out. */
-  readonly active?: boolean;
-  readonly labels?: InboxButtonLabels;
-  /** The prefix of its test ids: `<prefix>-button` and `<prefix>-badge`. */
-  readonly idPrefix?: string;
-  readonly className?: string;
-}
-
-/**
- * A header button linking to the inbox, with a badge: amber with the count of what waits on the viewer, or in the
- * primary color with the unread count when nothing waits. The label and the tooltip say which count it is.
- */
-export function InboxButton({
-  to = '/inbox',
-  badge,
-  active,
-  labels,
-  idPrefix = 'nocobase-inbox',
-  className,
-}: InboxButtonProps): ReactElement {
-  const { t } = useTranslation();
-  const { pathname } = useLocation();
-  const current = active ?? (pathname === to || pathname.startsWith(`${to}/`));
-  const title =
-    labels?.title ?? t('inboxButton.title', { defaultValue: 'Inbox' });
-  const label = !badge
-    ? title
-    : badge.kind === 'decisions'
-      ? (labels?.pending?.(badge.count) ??
-        t('inboxButton.pending', {
-          count: badge.count,
-          defaultValue: 'Inbox, {{count}} waiting',
-        }))
-      : (labels?.unread?.(badge.count) ??
-        t('inboxButton.unread', {
-          count: badge.count,
-          defaultValue: 'Inbox, {{count}} unread',
-        }));
-
-  return (
-    <Tooltip>
-      <TooltipTrigger
-        render={
-          <Link
-            to={to}
-            aria-current={current ? 'page' : undefined}
-            className={cn(
-              'relative inline-flex size-9 shrink-0 items-center justify-center rounded-lg border transition-colors focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50',
-              // On the inbox itself: filled and outlined in the text color, apart from the plain buttons beside it.
-              current
-                ? 'border-foreground/40 bg-accent text-foreground hover:bg-accent'
-                : 'border-border/70 bg-background/60 text-foreground hover:bg-muted',
-              className,
-            )}
-            data-testid={`${idPrefix}-button`}
-          />
-        }
-        aria-label={label}
-      >
-        <InboxIcon className='size-4.5' aria-hidden='true' />
-        {/* Amber means "needs you"; the primary color (the brand's, in a themed application) only that something is
-            unread. Ringed in the header's color so it stays apart from the border. */}
-        {badge ? (
-          <span
-            className={cn(
-              // Anchored to the corner and pushed a third of its size out, whatever its width.
-              'absolute top-0 right-0 flex h-4.5 min-w-4.5 translate-x-1/3 -translate-y-1/3 items-center justify-center rounded-full px-1 leading-none font-semibold tabular-nums ring-2 ring-background',
-              // "99+" in smaller type, so the badge stays a pill rather than covering the icon.
-              badge.text.length > 2 ? 'text-[9px]' : 'text-[11px]',
-              badge.kind === 'decisions'
-                ? 'bg-amber-500 text-white'
-                : 'bg-primary text-primary-foreground',
-            )}
-            data-testid={`${idPrefix}-badge`}
-            data-kind={badge.kind}
-            aria-hidden='true'
-          >
-            {badge.text}
-          </span>
-        ) : null}
-      </TooltipTrigger>
-      <TooltipContent side='bottom' className='max-w-64 flex-col items-start'>
-        <span>{title}</span>
-        {badge ? (
-          <span className='opacity-80'>
-            {badge.kind === 'decisions'
-              ? (labels?.pendingHint?.(badge.count) ??
-                t('inboxButton.pendingHint', {
-                  count: badge.count,
-                  defaultValue:
-                    '{{count}} waiting for you; it goes down once they are handled.',
-                }))
-              : (labels?.unreadHint?.(badge.count) ??
-                t('inboxButton.unreadHint', {
-                  count: badge.count,
-                  defaultValue:
-                    '{{count}} unread; it goes down as you read them.',
-                }))}
-          </span>
-        ) : null}
-      </TooltipContent>
-    </Tooltip>
-  );
-}

package/client/components/inbox-header-button.tsx

@@ -1,25 +0,0 @@
-import { useAuthentication } from '@nocobase/app-plugin-authentication/client';
-import {
-  useInboxRefresh,
-  useInboxUnreadCount,
-} from '@nocobase/app-plugin-notification-in-app/client/inbox';
-import type { ReactElement } from 'react';
-
-import { inboxBadge, useDocumentTitleBadge } from '#components/inbox-badge';
-import { InboxButton } from '#components/inbox-button';
-
-/** The header's link to `/inbox` with the unread count, for a signed-in person only. */
-export function InboxHeaderButton(): ReactElement | null {
-  const { session, isPending } = useAuthentication();
-  if (isPending || !session?.user) return null;
-  return <SignedInInboxButton key={session.user.id} />;
-}
-
-function SignedInInboxButton(): ReactElement {
-  useInboxRefresh();
-  const unread = useInboxUnreadCount();
-  // Nothing in this application asks the viewer to decide, so the badge counts what is unread.
-  const badge = inboxBadge(0, unread.data ?? 0);
-  useDocumentTitleBadge(badge?.text ?? null);
-  return <InboxButton badge={badge} />;
-}

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

@@ -1,35 +0,0 @@
-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/settings-layout.tsx

@@ -1,172 +0,0 @@
-import { useTranslation } from '@nocobase/i18n/client';
-import type { AppClientRegisteredRoute } from '@nocobase/app-client/plugins';
-import { ArrowLeft } from 'lucide-react';
-import { useMemo, type ReactElement } from 'react';
-import { Link, Navigate, Routes, useLocation, useNavigate } from 'react-router';
-
-import { PageBreadcrumbProvider } from '@nocobase/app-client';
-
-import { Breadcrumbs } from '#components/breadcrumbs';
-import { Loading } from '#components/loading';
-import { EMPTY_ARRAY } from '#lib/constants';
-
-import { renderRouteTree } from '../routing/route-tree.js';
-import { RouteTreeProvider } from '../routing/route-context.js';
-import {
-  routeKey,
-  matchRouteTree,
-  navigationPages,
-  selectedNavigationId,
-  useRouteNavigation,
-} from '../routing/route-navigation.js';
-import { NavigationMenu } from './components/navigation-menu.js';
-import { LayoutHeader } from './components/layout-header.js';
-import {
-  AppSidebar,
-  AppSidebarProvider,
-  AppSidebarToggle,
-} from './components/app-sidebar.js';
-import { SurfaceEmpty, type SurfaceCopy } from './components/surface-empty.js';
-import { HeaderActions } from './components/header-actions.js';
-
-export interface SettingsLayoutProps {
-  readonly routeTree: readonly AppClientRegisteredRoute[];
-  readonly routes?: readonly AppClientRegisteredRoute[];
-}
-
-export function SettingsLayout({
-  routeTree,
-  routes = EMPTY_ARRAY,
-}: SettingsLayoutProps): ReactElement {
-  const location = useLocation();
-  const navigate = useNavigate();
-  const { t } = useTranslation();
-  const copy: SurfaceCopy = {
-    pathPrefix: '/settings',
-    title: t('settings.title', { defaultValue: 'Settings' }),
-    emptyTitle: t('settings.emptyTitle', {
-      defaultValue: 'No settings available',
-    }),
-    emptyDescription: t('settings.emptyDescription', {
-      defaultValue:
-        'No enabled plugin contributes a settings page you have access to.',
-    }),
-  };
-
-  const { items: navEntries, loading, denied } = useRouteNavigation(routeTree);
-  const selectedKey = selectedNavigationId(
-    routeTree,
-    location.pathname,
-    denied,
-  );
-  const visible = navigationPages(navEntries);
-  // The match below and every consumer of the route tree key off this, so it keeps its identity.
-  const allRoutes = useMemo(
-    () => [...routeTree, ...routes],
-    [routeTree, routes],
-  );
-  const matches = matchRouteTree(allRoutes, location.pathname);
-  if (loading)
-    return (
-      <Loading
-        className='min-h-svh'
-        label={t('surface.loading', {
-          title: copy.title,
-          defaultValue: `Loading ${copy.title}`,
-        })}
-      />
-    );
-  if (
-    matches
-      ?.filter(({ route }) => route.componentLoader)
-      .slice(0, 1)
-      .some(({ route }) => denied.has(routeKey(route))) ||
-    !matches?.some(({ route }) => route.componentLoader)
-  ) {
-    return visible[0] ? (
-      <Navigate to={visible[0].path} replace />
-    ) : (
-      <SurfaceEmpty copy={copy} />
-    );
-  }
-
-  return (
-    // The header's trail reads the same route tree as the pages, and the trail a page declares.
-    <RouteTreeProvider routes={allRoutes}>
-      <PageBreadcrumbProvider>
-        <AppSidebarProvider>
-          <AppSidebar
-            label={t('surface.navigation', {
-              title: copy.title,
-              defaultValue: `${copy.title} navigation`,
-            })}
-          >
-            <NavigationMenu
-              items={navEntries}
-              label={copy.title}
-              selectedKey={selectedKey}
-            />
-          </AppSidebar>
-          <div className='flex min-w-0 flex-1 flex-col'>
-            <LayoutHeader className='sticky top-0 z-40 justify-between'>
-              <div className='flex min-w-0 items-center gap-3'>
-                <AppSidebarToggle />
-                <div className='hidden h-5 w-px bg-border md:block' />
-                <Link
-                  className='inline-flex min-w-0 items-center gap-2 text-sm font-medium text-muted-foreground transition-colors hover:text-foreground'
-                  to='/'
-                >
-                  <ArrowLeft className='size-4 shrink-0' />
-                  <span className='truncate'>
-                    {t('surface.backToApp', { defaultValue: 'Back to app' })}
-                  </span>
-                </Link>
-                <div className='hidden h-5 w-px shrink-0 bg-border md:block' />
-                <Breadcrumbs className='hidden md:block' denied={denied} />
-              </div>
-              <HeaderActions
-                showSettings={navigationPages(navEntries).length > 0}
-              />
-            </LayoutHeader>
-            <main className='relative min-w-0 flex-1 overflow-hidden'>
-              {/* main only positions; the page scrolls in here, so a child page layer laid over main is neither
-            moved by the page's scrolling nor stretched by its height. */}
-              <div className='h-full overflow-y-auto'>
-                <label className='sr-only' htmlFor='surface-page'>
-                  {t('surface.page', {
-                    title: copy.title,
-                    defaultValue: `${copy.title} page`,
-                  })}
-                </label>
-                <select
-                  id='surface-page'
-                  className='m-3 h-9 w-[calc(100%-1.5rem)] min-w-0 rounded-xl border border-border/70 bg-background px-3 text-sm md:hidden'
-                  value={
-                    visible.find((route) => routeKey(route) === selectedKey)
-                      ?.path ?? ''
-                  }
-                  onChange={(event) => {
-                    void navigate(event.target.value);
-                  }}
-                >
-                  {visible.map((route) => (
-                    <option key={routeKey(route)} value={route.path}>
-                      {t(route.navigation!.title, {
-                        ns: route.packageName,
-                        defaultValue: route.navigation!.title,
-                      })}
-                    </option>
-                  ))}
-                </select>
-                <Routes>
-                  {renderRouteTree(routeTree, copy.pathPrefix)}
-                  {renderRouteTree(routes, copy.pathPrefix)}
-                </Routes>
-              </div>
-            </main>
-          </div>
-        </AppSidebarProvider>
-      </PageBreadcrumbProvider>
-    </RouteTreeProvider>
-  );
-}