@nocobase/client-v2 3.0.0-alpha.1 → 3.0.0-alpha.12

package/src/layout-manager/__tests__/LayoutRoute.test.tsx

@@ -8,7 +8,7 @@
  */
 
 import { FlowEngine, FlowEngineProvider, observer } from '@nocobase/flow-engine';
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import { createMemoryRouter, Outlet, RouterProvider, useOutlet } from 'react-router-dom';
 import { describe, expect, it, vi } from 'vitest';
@@ -106,6 +106,64 @@ describe('LayoutRoute', () => {
     });
   });
 
+  it('syncs updated router state when navigating to the same layout pathname', async () => {
+    const syncLayoutRoute = vi.fn();
+
+    class StateTrackingLayoutModel extends TestLayoutModel {
+      syncLayoutRoute(routeLike: Parameters<BaseLayoutModel['syncLayoutRoute']>[0]) {
+        syncLayoutRoute(routeLike);
+        return super.syncLayoutRoute(routeLike);
+      }
+    }
+
+    const stateTrackingLayout: LayoutDefinition = {
+      ...layout,
+      layoutModelClass: 'StateTrackingLayoutModel',
+    };
+    const engine = new FlowEngine();
+    engine.registerModels({ StateTrackingLayoutModel });
+    engine.context.defineProperty('app', {
+      value: {
+        layoutManager: {
+          getLayout: () => stateTrackingLayout,
+        },
+      },
+    });
+
+    const router = createMemoryRouter(
+      [
+        {
+          id: layout.routeName,
+          path: layout.routePath,
+          element: <LayoutRoute layoutRouteName="test" />,
+        },
+      ],
+      {
+        initialEntries: ['/test'],
+      },
+    );
+
+    render(
+      <FlowEngineProvider engine={engine}>
+        <RouterProvider router={router} />
+      </FlowEngineProvider>,
+    );
+
+    expect(await screen.findByTestId('layout-route')).toHaveTextContent('test');
+    syncLayoutRoute.mockClear();
+
+    const routeState = {
+      __nocobaseOpenViewInputArgs: { popup: { formData: { status: 'todo' } } },
+    };
+    await act(async () => {
+      await router.navigate('/test', { state: routeState });
+    });
+
+    await waitFor(() => {
+      expect(syncLayoutRoute).toHaveBeenCalledWith(expect.objectContaining({ state: routeState }));
+    });
+  });
+
   it('does not activate desktop route loading for generic layouts', async () => {
     const activateLayout = vi.fn(() => vi.fn());
     const engine = new FlowEngine();
@@ -413,6 +471,34 @@ describe('LayoutContentRoute', () => {
     });
   });
 
+  it('syncs updated router state when navigating to the same content pathname', async () => {
+    const syncLayoutRoute = vi.fn();
+
+    class StateTrackingLayoutModel extends TestLayoutModel {
+      syncLayoutRoute(routeLike: Parameters<BaseLayoutModel['syncLayoutRoute']>[0]) {
+        syncLayoutRoute(routeLike);
+        return super.syncLayoutRoute(routeLike);
+      }
+    }
+
+    const { router } = setup('/test/page-1/view/popup', layout, StateTrackingLayoutModel);
+    await waitFor(() => {
+      expect(syncLayoutRoute).toHaveBeenCalled();
+    });
+    syncLayoutRoute.mockClear();
+
+    const routeState = {
+      __nocobaseOpenViewInputArgs: { popup: { formData: { status: 'todo' } } },
+    };
+    await act(async () => {
+      await router.navigate('/test/page-1/view/popup', { state: routeState });
+    });
+
+    await waitFor(() => {
+      expect(syncLayoutRoute).toHaveBeenCalledWith(expect.objectContaining({ state: routeState }));
+    });
+  });
+
   it('parses nested layout route by matched layout pathname', async () => {
     const nestedLayout: LayoutDefinition = {
       ...layout,

package/src/nocobase-buildin-plugin/index.tsx

@@ -181,6 +181,18 @@ const DataSourceBootstrapProvider: FC = ({ children }) => {
   return <>{children}</>;
 };
 
+export function resolveUnauthenticatedSignInRoute(app: Application, pathname: string) {
+  const matchedRoutes = app.router.matchRoutes(pathname) || [];
+  for (let index = matchedRoutes.length - 1; index >= 0; index -= 1) {
+    const pathnameBase = matchedRoutes[index].pathnameBase.replace(/\/+$/g, '');
+    const candidate = `${pathnameBase}/signin`;
+    if (app.router.isSkippedAuthCheckRoute(candidate)) {
+      return candidate;
+    }
+  }
+  return '/signin';
+}
+
 function redirectUnauthenticatedRoute(
   app: Application,
   location: { pathname: string; search?: string; hash?: string },
@@ -191,7 +203,8 @@ function redirectUnauthenticatedRoute(
     redirectToV2Signin(app, redirectPath);
     return;
   }
-  navigate(`/signin?redirect=${encodeURIComponent(redirectPath)}`, { replace: true });
+  const signInPath = resolveUnauthenticatedSignInRoute(app, location.pathname);
+  navigate(`${signInPath}?redirect=${encodeURIComponent(redirectPath)}`, { replace: true });
 }
 
 const CurrentUserProvider: FC = ({ children }) => {

package/src/settings-app/SettingsGroupNav.tsx

@@ -12,6 +12,7 @@ import { ConfigProvider, Menu, theme as antdTheme } from 'antd';
 import React, { useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { useACLCheckReady } from '../acl/aclCheckReadiness';
 import { useApp } from '../hooks/useApp';
 import { useSettingsGroups } from '../settings-center/useSettingsGroups';
 import { buildSettingsHeaderMenuTheme } from './settingsTheme';
@@ -27,8 +28,9 @@ const navStyle: React.CSSProperties = {
 /**
  * 设置中心顶栏的一级导航。
  *
- * 应用、插件管理各自只有一个页面，直接当一级入口；其余全部收在「系统设置」下，
- * 鼠标移上去展开下拉，也可以点进去从左栏走。
+ * Applications and the plugin manager have a single page each and act as top-level
+ * entries; everything else sits under "other settings" and expands on hover — that
+ * group has no sidebar, so the dropdown is the only way into its pages.
  */
 export const SettingsGroupNav: React.FC = observer(() => {
   const { t } = useTranslation();
@@ -37,6 +39,7 @@ export const SettingsGroupNav: React.FC = observer(() => {
   const location = useLocation();
   const { token } = antdTheme.useToken();
   const { groups, activeGroupKey, currentTopLevelSetting, getGroupEntryPath } = useSettingsGroups();
+  const isACLReady = useACLCheckReady(app);
   const headerMenuTheme = useMemo(() => buildSettingsHeaderMenuTheme(token), [token]);
   // 登录 / 找回密码等免鉴权页面共用同一个 shell，这些页面上不该出现设置导航。
   const isAuthRoute = app.router.isSkippedAuthCheckRoute(location.pathname);
@@ -68,11 +71,8 @@ export const SettingsGroupNav: React.FC = observer(() => {
           };
         }
 
-        // 已经站在这个分组里时不再弹下拉：左栏已经把同一份内容铺开了，再浮一层纯属打扰。
-        if (group.key === activeGroupKey) {
-          return { key: group.key, label: t(group.title) };
-        }
-
+        // The dropdown still opens while standing inside the group: with the sidebar
+        // gone, this is the only way to reach the other pages in it.
         return {
           key: group.key,
           label: t(group.title),
@@ -83,11 +83,11 @@ export const SettingsGroupNav: React.FC = observer(() => {
               label: setting.label ?? setting.title,
               icon: setting.icon,
             })),
-          // 点标题本身也要能进去，而不是只能从下拉里挑。
-          onTitleClick: handleClick,
+          // The group title only expands the dropdown and is not clickable: it is not a
+          // page, so clicking it has no well-defined destination. Pick a page instead.
         };
       }),
-    [activeGroupKey, groups, handleClick, t],
+    [groups, handleClick, t],
   );
 
   // 子菜单标题只有在它的某个子项被选中时才会高亮，所以两个 key 都要给。
@@ -100,7 +100,7 @@ export const SettingsGroupNav: React.FC = observer(() => {
       : [activeGroupKey];
   }, [activeGroupKey, currentTopLevelSetting?.name]);
 
-  if (isAuthRoute || items.length <= 1) {
+  if (isAuthRoute || !isACLReady || items.length <= 1) {
     return <div style={{ flex: 'auto' }} />;
   }
 

package/src/settings-app/SettingsSearch.tsx

@@ -15,12 +15,13 @@ import type { InputRef } from 'antd';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { useACLCheckReady } from '../acl/aclCheckReadiness';
 import { useApp } from '../hooks/useApp';
 import { useSettingsSearch, type SettingsSearchItem } from '../settings-center/useSettingsSearch';
 import { getSettingsHeaderColors } from './settingsTheme';
 
 const isMac = typeof navigator !== 'undefined' && /Mac|iPhone|iPad/.test(navigator.platform || '');
-const SHORTCUT_LABEL = isMac ? '⌘K' : 'Ctrl K';
+const SHORTCUT_LABEL = isMac ? '⌘F' : 'Ctrl F';
 
 const triggerClassName = css`
   align-items: center;
@@ -54,7 +55,7 @@ const resultItemClassName = css`
  * 设置中心的搜索入口。
  *
  * 顶栏放一个轻量触发器，真正的搜索在弹层里进行；关键词为空时展示最近访问，
- * 这样分组化之后被收进左侧栏的深层页面仍然一步可达。支持 `Cmd/Ctrl + K` 唤起。
+ * 这样分组化之后被收进左侧栏的深层页面仍然一步可达。支持 `Cmd/Ctrl + F` 唤起。
  */
 export const SettingsSearch: React.FC = observer(() => {
   const { t } = useTranslation();
@@ -63,11 +64,15 @@ export const SettingsSearch: React.FC = observer(() => {
   const location = useLocation();
   const { token } = antdTheme.useToken();
   const headerColors = getSettingsHeaderColors(token);
+  const isACLReady = useACLCheckReady(app);
   const { recentItems, search } = useSettingsSearch();
   const [open, setOpen] = useState(false);
   const [keyword, setKeyword] = useState('');
   const [activeIndex, setActiveIndex] = useState(0);
   const inputRef = useRef<InputRef>(null);
+  const triggerRef = useRef<HTMLDivElement>(null);
+  const lastActiveElementRef = useRef<HTMLElement | null>(null);
+  const isPointerDownRef = useRef(false);
 
   // 登录 / 找回密码等免鉴权页面共用同一个 shell，这些页面上没有可搜索的配置项。
   const isAuthRoute = app.router.isSkippedAuthCheckRoute(location.pathname);
@@ -78,10 +83,33 @@ export const SettingsSearch: React.FC = observer(() => {
     setActiveIndex(0);
   }, [keyword]);
 
+  useEffect(() => {
+    if (isAuthRoute || !isACLReady) {
+      setOpen(false);
+      setKeyword('');
+    }
+  }, [isACLReady, isAuthRoute]);
+
+  const restoreLastActiveElement = useCallback(() => {
+    const lastActiveElement = lastActiveElementRef.current;
+    lastActiveElementRef.current = null;
+    if (lastActiveElement?.isConnected) {
+      lastActiveElement.focus({ preventScroll: true });
+    }
+  }, []);
+
   const openPalette = useCallback(() => {
     setKeyword('');
+
+    if (open) {
+      inputRef.current?.focus();
+      return;
+    }
+
+    lastActiveElementRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    triggerRef.current?.focus();
     setOpen(true);
-  }, []);
+  }, [open]);
 
   const go = useCallback(
     (item?: SettingsSearchItem) => {
@@ -104,29 +132,76 @@ export const SettingsSearch: React.FC = observer(() => {
   );
 
   useEffect(() => {
-    if (isAuthRoute) {
+    if (isAuthRoute || !isACLReady) {
       return;
     }
 
     const onKeyDown = (event: KeyboardEvent) => {
-      // 页面内组件（代码编辑器之类）可能自己就用 Cmd/Ctrl+K；它们 preventDefault 之后
+      // 页面内组件可能自己就用 Cmd/Ctrl+F；它们 preventDefault 之后
       // 这个 window 级监听器不该再抢一次。
       if (event.defaultPrevented) {
         return;
       }
 
-      if (event.key?.toLowerCase() === 'k' && (event.metaKey || event.ctrlKey)) {
+      const hasPlatformModifier = isMac ? event.metaKey && !event.ctrlKey : event.ctrlKey && !event.metaKey;
+
+      if (event.key?.toLowerCase() === 'f' && hasPlatformModifier && !event.altKey && !event.shiftKey) {
         event.preventDefault();
-        openPalette();
+        if (!event.repeat) {
+          openPalette();
+        }
       }
     };
 
     window.addEventListener('keydown', onKeyDown);
     return () => window.removeEventListener('keydown', onKeyDown);
-  }, [isAuthRoute, openPalette]);
+  }, [isACLReady, isAuthRoute, openPalette]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const onEscapeKeyDown = (event: KeyboardEvent) => {
+      if (event.key !== 'Escape' || event.target !== inputRef.current?.input) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      setOpen(false);
+    };
+
+    const onPointerDown = () => {
+      isPointerDownRef.current = true;
+    };
+
+    const onPointerUp = () => {
+      isPointerDownRef.current = false;
+    };
+
+    window.addEventListener('keydown', onEscapeKeyDown, true);
+    window.addEventListener('pointerdown', onPointerDown, true);
+    window.addEventListener('pointerup', onPointerUp, true);
+    window.addEventListener('pointercancel', onPointerUp, true);
+    return () => {
+      isPointerDownRef.current = false;
+      window.removeEventListener('keydown', onEscapeKeyDown, true);
+      window.removeEventListener('pointerdown', onPointerDown, true);
+      window.removeEventListener('pointerup', onPointerUp, true);
+      window.removeEventListener('pointercancel', onPointerUp, true);
+    };
+  }, [open]);
 
   const onInputKeyDown = useCallback(
     (event: React.KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(false);
+        return;
+      }
+
       if (event.key === 'ArrowDown') {
         event.preventDefault();
         setActiveIndex((index) => (results.length ? (index + 1) % results.length : 0));
@@ -147,13 +222,14 @@ export const SettingsSearch: React.FC = observer(() => {
     [activeIndex, go, results],
   );
 
-  if (isAuthRoute) {
+  if (isAuthRoute || !isACLReady) {
     return null;
   }
 
   return (
     <>
       <div
+        ref={triggerRef}
         className={triggerClassName}
         role="button"
         tabIndex={0}
@@ -161,6 +237,14 @@ export const SettingsSearch: React.FC = observer(() => {
         style={{ color: headerColors.text }}
         onClick={openPalette}
         onKeyDown={(event) => {
+          if (event.key === 'Escape' && open) {
+            event.preventDefault();
+            event.stopPropagation();
+            setOpen(false);
+            restoreLastActiveElement();
+            return;
+          }
+
           if (event.key === 'Enter' || event.key === ' ') {
             event.preventDefault();
             openPalette();
@@ -182,9 +266,17 @@ export const SettingsSearch: React.FC = observer(() => {
         footer={null}
         closable={false}
         destroyOnClose
+        focusTriggerAfterClose={false}
         width={520}
         styles={{ body: { paddingTop: 4 } }}
-        afterOpenChange={(opened) => opened && inputRef.current?.focus()}
+        afterOpenChange={(opened) => {
+          if (opened) {
+            inputRef.current?.focus();
+            return;
+          }
+
+          restoreLastActiveElement();
+        }}
         onCancel={() => setOpen(false)}
       >
         <Input
@@ -196,6 +288,19 @@ export const SettingsSearch: React.FC = observer(() => {
           size="large"
           value={keyword}
           onChange={(event) => setKeyword(event.target.value)}
+          onBlur={(event) => {
+            // Browser keyboard handlers may consume Escape before the page sees keydown and only blur the input.
+            const nextActiveElement = event.relatedTarget;
+            const dialog = event.currentTarget.closest('[role="dialog"]');
+            if (
+              isPointerDownRef.current ||
+              (nextActiveElement instanceof Node && dialog?.contains(nextActiveElement))
+            ) {
+              return;
+            }
+
+            setOpen(false);
+          }}
           onKeyDown={onInputKeyDown}
         />
         <div style={{ borderTop: `${token.lineWidth}px solid ${token.colorSplit}`, margin: '8px -24px 0' }} />

package/src/settings-app/SettingsShell.tsx

@@ -18,6 +18,7 @@ import {
 } from '../flow/models/topbar/UserCenterTopbarActionModel';
 import { useApp } from '../hooks/useApp';
 import { useCurrentUserAuthStatus } from '../nocobase-buildin-plugin/currentUserAuthStatus';
+import { addCustomAlgorithmToTheme } from '../theme/customAlgorithm';
 import { SettingsBrand } from './SettingsBrand';
 import { SettingsGroupNav } from './SettingsGroupNav';
 import { SettingsSearch } from './SettingsSearch';
@@ -79,25 +80,41 @@ export const SettingsShell: FC = ({ children }) => {
   const { token } = antdTheme.useToken();
   // 设置中心的外观由主题编辑器里那条「简约」主题记录约束；读不到才用代码里的中性配色兜底。
   const storedThemeConfig = useSettingsThemeConfig();
+  const normalizedStoredThemeConfig = useMemo(
+    () =>
+      storedThemeConfig
+        ? addCustomAlgorithmToTheme({
+            ...storedThemeConfig,
+            algorithm: Array.isArray(storedThemeConfig.algorithm)
+              ? [...storedThemeConfig.algorithm]
+              : storedThemeConfig.algorithm,
+          })
+        : storedThemeConfig,
+    [storedThemeConfig],
+  );
   // 顶栏和补丁样式要按**设置中心自己这套主题**算色，不能直接用上面那个 `token`——
   // 这个组件在自己的 ConfigProvider 外面，`token` 是业务端主题的。用它的话，业务端一切暗黑，
   // 顶栏就跟着变黑，而内容区还是简约的白，一半黑一半白。
   const settingsToken = useMemo(
-    () => (storedThemeConfig ? antdTheme.getDesignToken(storedThemeConfig) : token),
-    [storedThemeConfig, token],
+    () => (normalizedStoredThemeConfig ? antdTheme.getDesignToken(normalizedStoredThemeConfig) : token),
+    [normalizedStoredThemeConfig, token],
   );
   const settingsShellTheme = useMemo<ThemeConfig>(
     () =>
-      storedThemeConfig ? withSettingsHeaderTheme(storedThemeConfig, settingsToken) : buildSettingsNeutralTheme(token),
-    [settingsToken, storedThemeConfig, token],
+      normalizedStoredThemeConfig
+        ? withSettingsHeaderTheme(normalizedStoredThemeConfig, settingsToken)
+        : buildSettingsNeutralTheme(token),
+    [normalizedStoredThemeConfig, settingsToken, token],
   );
   const headerColors = useMemo(() => getSettingsHeaderColors(settingsToken), [settingsToken]);
   const settingsGlobalCss = useMemo(() => buildSettingsGlobalCss(settingsToken), [settingsToken]);
   const authStatus = useCurrentUserAuthStatus(app);
-  const isAuthenticationRoute = (app.router.matchRoutes(location.pathname) || []).some((match) => {
+  const routeMatches = app.router.matchRoutes(location.pathname) || [];
+  const isAuthenticationRoute = routeMatches.some((match) => {
     const routeId = match.route.id;
     return routeId === 'auth' || routeId?.startsWith('auth.') || routeId === '2fa' || routeId?.startsWith('2fa.');
   });
+  const shouldHideHeader = routeMatches.some((match) => match.route.id === 'settingsDetails.idpOAuth.device');
 
   if (isAuthenticationRoute) {
     // 登录 / 二次验证页也要套设置中心自己的主题，否则它跟的是业务端主题：
@@ -114,7 +131,7 @@ export const SettingsShell: FC = ({ children }) => {
     );
   }
 
-  const shouldShowHeader = authStatus === 'authenticated';
+  const shouldShowHeader = authStatus === 'authenticated' && !shouldHideHeader;
   const hasUserCenterModel = Boolean(app.flowEngine.getModelClass('UserCenterTopbarActionModel'));
   const userCenter = hasUserCenterModel
     ? app.flowEngine.getModel<UserCenterTopbarActionModel>(`topbar-action-${USER_CENTER_ACTION_ID}`) ||

package/src/settings-app/runtimePaths.ts

@@ -26,7 +26,6 @@ type SettingsRuntimeApp = Pick<BaseApplication<any>, 'name'> & {
 const LEGACY_EMAIL_OAUTH_PATH = '/admin/settings/mail/oauth2';
 
 const ROUTE_MAPPINGS = [
-  { from: '/admin/ai/knowledge-base/detail', to: '/settings/ai/knowledge-base/detail' },
   { from: '/admin/workflow/executions', to: '/settings/workflow/executions' },
   { from: '/admin/workflow/workflows', to: '/settings/workflow/workflows' },
   { from: '/admin/settings', to: '/settings' },

package/src/settings-app/settingsTheme.ts

@@ -236,6 +236,14 @@ export function withSettingsHeaderTheme(theme: ThemeConfig, token: GlobalToken):
   };
 }
 
+/**
+ * Height of one entry in the top bar dropdown.
+ *
+ * Taken from the user center dropdown (`nb-user-center-item`, 30px) so that the
+ * two dropdowns hanging off the same top bar line up.
+ */
+const SETTINGS_MENU_ITEM_HEIGHT = 30;
+
 /**
  * 设置中心的全局补丁样式。
  *
@@ -251,20 +259,26 @@ export function withSettingsHeaderTheme(theme: ThemeConfig, token: GlobalToken):
  */
 export function buildSettingsGlobalCss(token: GlobalToken): string {
   return `
+/* The rules below deliberately drop the .nb-settings-shell prefix: antd renders
+   drawers, modals and dropdowns into portals under body, where a shell-scoped
+   selector never matches — that is how the edit link inside the collection drawer
+   kept antd's default blue. This stylesheet is only injected by the standalone
+   settings SPA, so unscoped selectors cannot reach the business side. */
+
 /* 最外层 body 的底色来自业务端主题（暗黑下是 #141414）。内容区一般把它整块盖住，
    但内容不满屏、或者滚动橡皮筋回弹时会漏出来，所以这里一并接管。
    设置中心是独立入口的单页应用，这条全局规则不会影响业务端。 */
 body {
   background: ${token.colorBgLayout};
 }
-.nb-settings-shell a:not(.ant-btn):not(.ant-menu-item):not(.ant-tabs-tab-btn):not([class*="ant-"]) {
+a:not(.ant-btn):not(.ant-menu-item):not(.ant-tabs-tab-btn):not([class*="ant-"]) {
   color: ${token.colorTextSecondary};
 }
-.nb-settings-shell a:not(.ant-btn):not(.ant-menu-item):not(.ant-tabs-tab-btn):not([class*="ant-"]):hover {
+a:not(.ant-btn):not(.ant-menu-item):not(.ant-tabs-tab-btn):not([class*="ant-"]):hover {
   color: ${token.colorText};
 }
-.nb-settings-shell a:not(.ant-btn):not(.ant-menu-item):not(.ant-tabs-tab-btn),
-.nb-settings-shell .ant-btn-link:not(:disabled) {
+a:not(.ant-btn):not(.ant-menu-item):not(.ant-tabs-tab-btn),
+.ant-btn-link:not(:disabled) {
   text-decoration: underline;
   text-underline-offset: 2px;
 }
@@ -284,18 +298,72 @@ body {
 .nb-settings-shell .ant-layout-sider .ant-menu-submenu-title::after {
   display: none !important;
 }
-/* 未启用态保持 antd 默认的实心灰滑轨：之前做成白底描边太淡，和「禁用」几乎看不出差别。
-   禁用态不用整体压暗（插件管理器里一整屏都是不可操作的内置插件，压狠了像坏了），
-   而是把滑轨调到跟「未启用」同一档灰、滑块的小白圆点也压成浅灰——
-   整体退成一片同色系的浅灰，跟纯黑的「开着且能关」拉开距离。 */
-.nb-settings-shell .ant-switch-disabled {
-  opacity: 1;
+/* Entry height matches the other dropdown on the same top bar (the user center,
+   whose nb-user-center-item is 30px). antd sizes menu entries with
+   controlHeightLG (35px under compact), which is the height of a single clickable
+   control; this dropdown is a list of a dozen links and reads loose at 35.
+
+   Scoped to entries inside the popup only: the horizontal top bar menu shares the
+   same Menu tokens, so changing tokens would eat its horizontal padding too. The
+   selector needs three classes; two do not outweigh antd's own rule. */
+.ant-menu-submenu-popup .ant-menu.ant-menu-sub.ant-menu-vertical {
+  /* With the 4px margin between entries gone, the first and last would sit flush
+     against the popup edge, so the container gives the padding back. */
+  padding-block: ${token.paddingXXS}px;
 }
-.nb-settings-shell .ant-switch-disabled.ant-switch-checked {
-  background: ${token.colorTextQuaternary};
+.ant-menu-submenu-popup .ant-menu-sub > .ant-menu-item,
+.ant-menu-submenu-popup .ant-menu-sub > .ant-menu-submenu > .ant-menu-submenu-title {
+  height: ${SETTINGS_MENU_ITEM_HEIGHT}px;
+  line-height: ${SETTINGS_MENU_ITEM_HEIGHT}px;
+  margin-block: 0;
 }
-.nb-settings-shell .ant-switch-disabled .ant-switch-handle::before {
-  background: ${token.colorBorderSecondary};
+
+/* Info alerts: with the primary color collapsed to black and white, their derived
+   background lands on rgba(0,0,0,0.02) — faint enough to read as empty space.
+   Rather than reaching for color (which would drag the palette back in), the shape
+   carries the weight: a 4px bar on the left, a firmer background and border, a
+   bold title and a larger icon. Warning / error / success keep their semantic
+   colors and are left alone. */
+.ant-alert-info {
+  background: ${token.colorFillSecondary};
+  border: ${token.lineWidth}px solid ${token.colorBorder};
+  border-inline-start: 4px solid ${token.colorText};
+  padding-block: ${token.paddingSM}px;
+}
+.ant-alert-info .ant-alert-icon,
+.ant-alert-info .ant-alert-message {
+  color: ${token.colorText};
+}
+.ant-alert-info .ant-alert-icon {
+  font-size: ${token.fontSizeLG}px;
+}
+.ant-alert-info .ant-alert-message {
+  font-weight: 600;
+}
+.ant-alert-info .ant-alert-description {
+  color: ${token.colorTextSecondary};
+}
+/* Three switch shades: off is light grey (colorFill, 0.15), disabled is dark grey
+   (colorTextTertiary, 0.45), on is black. Disabled being darker than off is
+   deliberate — here "darker" reads as "pinned", not "stronger" — and one light
+   against one dark is told apart at a glance, without comparing subtle
+   brightness steps. Disabled is not dimmed as a whole: the plugin manager shows
+   over a hundred built-in plugins in that state, and dimming makes the page look
+   broken. */
+.ant-switch {
+  background: ${token.colorFill};
+}
+.ant-switch.ant-switch-checked {
+  background: ${token.colorText};
+}
+/* This selector has to outweigh antd's own .ant-switch.ant-switch-disabled (a
+   single class no longer does, now that the shell prefix is gone), otherwise its
+   opacity: 0.65 survives and washes the dark grey out onto the off state, where
+   the two read as the same color. */
+.ant-switch.ant-switch-disabled,
+.ant-switch.ant-switch-disabled.ant-switch-checked {
+  background: ${token.colorTextTertiary};
+  opacity: 1;
 }
 `;
 }