feat(web): combine plugin settings into tabs

packages/client/ui-plugins/src/client/PluginSettingsSection.module.css

@@ -7,19 +7,12 @@
   color: var(--dsw-alias-label-primary);
 }
 
-.heading h2,
 .catalogHeading h3,
 .status,
 .failure p {
   margin: 0;
 }
 
-.heading h2 {
-  font-size: 16px;
-  line-height: 24px;
-  font-weight: 600;
-}
-
 .status,
 .failure {
   font-size: 13px;

packages/client/ui-plugins/src/client/PluginSettingsSection.tsx

@@ -19,7 +19,7 @@ type PluginFiberPhase = PluginInventoryEntry['fiberPhase']
 
 /** Full component props assembled by the Settings slot renderer. */
 export type PluginSettingsSectionProps =
-  PropsRuntime<'settings.section'>
+  PropsRuntime<'settings.plugins.tab'>
   & PropsLocale<'settings.plugins'>
   & InjectFace<PluginSettingsSectionInjected>
 
@@ -62,7 +62,7 @@ function matches(entry: PluginInventoryEntry, normalizedQuery: string): boolean
 
 /** Render the read-only current Loader inventory. */
 export function PluginSettingsSection({ list, t }: PluginSettingsSectionProps): ReactNode {
-  const titleId = useId()
+  const catalogId = useId()
   const [request, setRequest] = useState(0)
   const [query, setQuery] = useState('')
   const [expanded, setExpanded] = useState<PluginInventoryEntry['entryId'] | null>(null)
@@ -97,10 +97,7 @@ export function PluginSettingsSection({ list, t }: PluginSettingsSectionProps):
   }
 
   return (
-    <section className={css.section} aria-labelledby={titleId} aria-busy={state.status === 'loading'}>
-      <header className={css.heading}>
-        <h2 id={titleId}>{t('title')}</h2>
-      </header>
+    <div className={css.section} aria-busy={state.status === 'loading'}>
       {state.status === 'loading' ? <p className={css.status}>{t('loading')}</p> : null}
       {state.status === 'error' ? (
         <div className={css.failure}>
@@ -134,8 +131,9 @@ export function PluginSettingsSection({ list, t }: PluginSettingsSectionProps):
               {filteredEntries.map((entry) => {
                 const status = phaseLabel(entry.fiberPhase, t)
                 const title = moduleShortName(entry.moduleName)
+                const configuration = t(entry.enabled ? 'enabledTag' : 'disabledTag')
                 const open = expanded === entry.entryId
-                const detailId = `${titleId}-details-${encodeURIComponent(entry.entryId)}`
+                const detailId = `${catalogId}-details-${encodeURIComponent(entry.entryId)}`
                 return (
                   <li
                     className={css.card}
@@ -148,22 +146,24 @@ export function PluginSettingsSection({ list, t }: PluginSettingsSectionProps):
                       type="button"
                       aria-expanded={open}
                       aria-controls={detailId}
-                      aria-label={`${title}, ${status}, ${t(entry.enabled ? 'enabledTag' : 'disabledTag')}`}
+                      aria-label={entry.enabled ? `${title}, ${status}, ${configuration}` : `${title}, ${configuration}`}
                       onClick={() => {
                         setExpanded(current => current === entry.entryId ? null : entry.entryId)
                       }}
                     >
                       <strong className={css.cardTitle} title={entry.moduleName}>{title}</strong>
                       <span className={css.cardTrailing}>
-                        <span
-                          className={css.statusDot}
-                          data-phase={entry.fiberPhase ?? 'unobserved'}
-                          role="img"
-                          aria-label={status}
-                          title={status}
-                        />
+                        {entry.enabled ? (
+                          <span
+                            className={css.statusDot}
+                            data-phase={entry.fiberPhase ?? 'unobserved'}
+                            role="img"
+                            aria-label={status}
+                            title={status}
+                          />
+                        ) : null}
                         <span className={css.configTag} data-enabled={entry.enabled ? 'true' : 'false'}>
-                          {t(entry.enabled ? 'enabledTag' : 'disabledTag')}
+                          {configuration}
                         </span>
                         <IconChevronDownOutline14 className={css.chevron} size={12} aria-hidden="true" />
                       </span>
@@ -174,12 +174,14 @@ export function PluginSettingsSection({ list, t }: PluginSettingsSectionProps):
                         <dl className={css.details}>
                           <div>
                             <dt>{t('configuration')}</dt>
-                            <dd>{t(entry.enabled ? 'enabledTag' : 'disabledTag')}</dd>
-                          </div>
-                          <div>
-                            <dt>{t('cordis')}</dt>
-                            <dd>{status}</dd>
+                            <dd>{configuration}</dd>
                           </div>
+                          {entry.enabled ? (
+                            <div>
+                              <dt>{t('cordis')}</dt>
+                              <dd>{status}</dd>
+                            </div>
+                          ) : null}
                         </dl>
                       </div>
                     ) : null}
@@ -190,6 +192,6 @@ export function PluginSettingsSection({ list, t }: PluginSettingsSectionProps):
           ) : null}
         </div>
       ) : null}
-    </section>
+    </div>
   )
 }

packages/client/ui-plugins/src/client/index.ts

@@ -22,7 +22,7 @@ export const NS = 'settings.plugins'
 /** Services required by the Settings registration and generated Remote face. */
 export const inject = ['slots', 'locale', 'remote', 'remote.pluginInventory']
 
-/** Register the lazy plugin inventory page below Models in Settings. */
+/** Contribute the lazy inventory tab to the Plugins settings section. */
 export function apply(ctx: ClientContext): void {
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'ui-plugins: dictionaries')
 
@@ -36,11 +36,11 @@ export function apply(ctx: ClientContext): void {
   }
   const injected = (): PluginSettingsSectionInjected => ({ list })
 
-  ctx.slots.inject('settings.section', () => ctx.slots.register({
-    name: 'settings.section',
-    id: 'plugin-inventory',
-    order: 15,
-    label: () => t('nav'),
+  ctx.slots.inject('settings.plugins.tab', () => ctx.slots.register({
+    name: 'settings.plugins.tab',
+    id: 'all',
+    order: 10,
+    label: () => t('tab'),
     locale: NS,
     inject: injected,
   }, PluginSettingsSection))

packages/client/ui-plugins/src/client/locales.ts

@@ -2,8 +2,7 @@
 
 /** Simplified Chinese dictionary and key source of truth. */
 export const zh = {
-  nav: '插件',
-  title: '插件',
+  tab: '插件列表',
   loading: '正在读取插件…',
   error: '暂时无法读取插件。',
   retry: '重试',
@@ -28,8 +27,7 @@ export type PluginsKey = keyof typeof zh
 
 /** English dictionary checked against the Chinese key set. */
 export const en = {
-  nav: 'Plugins',
-  title: 'Plugins',
+  tab: 'Plugin list',
   loading: 'Reading plugins…',
   error: 'Plugins are temporarily unavailable.',
   retry: 'Retry',

packages/client/ui-plugins/src/index.ts

@@ -1,4 +1,4 @@
-/** Host loader entry for the browser implementation exported from `./client`. */
+/** Host loader entry for the inventory-tab browser implementation exported from `./client`. */
 
-/** Host plugin body — no host-side behavior for the plugin settings section. */
+/** Host plugin body — no host-side behavior for the plugin inventory tab. */
 export function apply(): void {}