@fonlan/dsh-quick-commands 0.1.5 → 0.1.7

package/src/client/header.tsx

@@ -8,20 +8,18 @@
  */
 import { useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import {
-  IconPlayOutline16,
-  IconCloseOutline16,
-  IconStopFill16,
-} from '@deepseek-ai/dsh-client-ui-primitives'
+import { PlayIcon, CloseIcon, StopIcon } from './icons'
 import { quickApi } from './api'
 import { useRunPopover, openMenu, closeMenu, openRun, closeRun } from './run-state'
-import type { QuickPopupSize } from '../shared/contract'
+import { anchorOf, type QuickPopupSize } from '../shared/contract'
 
 /** Workspace row shape the standard useWorkspaces hook exposes. */
 interface WorkspaceRow {
   workspaceId: string
   path: string
   title: string
+  /** Session membership; the canonical link DSH itself resolves Workspaces by. */
+  sessionIds?: string[]
 }
 
 /** Session list state subset we read (cwd + id). */
@@ -91,7 +89,12 @@ function useCurrentWorkspace(
 ): { workspace: WorkspaceRow | undefined; cwd: string | undefined } {
   const row = useSessions?.((s) => s.byId[sessionId]) as SessionRow | undefined
   const workspaces = useWorkspaces?.((s) => s.items) as WorkspaceRow[] | undefined
-  return { workspace: matchWorkspace(row?.cwd, workspaces ?? []), cwd: row?.cwd }
+  const items = workspaces ?? []
+  // Membership first (how DSH core resolves a session's Workspace, and the only
+  // link that survives when a session runs outside the Workspace root), then
+  // the longest cwd prefix as the fallback for hosts without membership data.
+  const byMembership = items.find((ws) => ws.sessionIds?.includes(sessionId) === true)
+  return { workspace: byMembership ?? matchWorkspace(row?.cwd, items), cwd: row?.cwd }
 }
 
 /** Header icon button + command menu + live output popup. */
@@ -159,7 +162,7 @@ export function QuickCommandsHeaderAction(props: HeaderProps): JSX.Element {
         const own = entries.find((e) => e.workspaceId === workspace?.workspaceId)
         setCommands(own === undefined ? [] : own.commands)
         setMenuRemoteHost(own?.remoteHost ?? null)
-        setAnchor(settings.popupAnchor)
+        setAnchor(anchorOf(settings.popupAnchor))
         setPopupSize(settings.popupSize)
         setMenuLoadError(null)
       } catch (e) {
@@ -201,7 +204,7 @@ export function QuickCommandsHeaderAction(props: HeaderProps): JSX.Element {
         disabled={workspace === undefined}
         onClick={() => { popover.menuOpen ? closeMenu() : openMenu() }}
       >
-        <IconPlayOutline16 size={15} />
+        <PlayIcon size={15} />
       </button>
 
       {popover.menuOpen && workspace !== undefined && menuPosition !== null && createPortal(
@@ -216,7 +219,7 @@ export function QuickCommandsHeaderAction(props: HeaderProps): JSX.Element {
             {menuRemoteHost !== null && <span className="qc-menu-remote" title={`SSH · ${menuRemoteHost}`}>SSH</span>}
             <span className="qc-menu-ws">{workspace.title}</span>
             <button type="button" className="qc-menu-close" aria-label={t('runClose')} onClick={closeMenu}>
-              <IconCloseOutline16 size={12} />
+              <CloseIcon size={12} />
             </button>
           </div>
           {commands.length === 0 && (
@@ -495,7 +498,7 @@ function RunPopup(props: {
           aria-label={t('runKill')}
           onClick={() => void kill()}
         >
-          <IconStopFill16 size={14} />
+          <StopIcon size={14} />
         </button>
         <button
           type="button"
@@ -505,7 +508,7 @@ function RunPopup(props: {
           onPointerUp={onClosePointerUp}
           onClick={closeOutput}
         >
-          <IconCloseOutline16 size={14} />
+          <CloseIcon size={14} />
         </button>
       </header>
 

package/src/client/icons.tsx

@@ -0,0 +1,106 @@
+/**
+ * Icon compatibility layer over `@deepseek-ai/dsh-client-ui-primitives`.
+ *
+ * DSH renamed this package's icon exports in 0.1.7: the size-suffixed names
+ * (`IconPlayOutline16`) became weight-suffixed ones (`IconPlayOutlineRegular` /
+ * `IconPlayOutlineMedium`, matching what the official header plugins use).
+ *
+ * A client bundle that statically imports a name the host no longer exports
+ * receives `undefined`; rendering that element throws, the slot's per-entry
+ * error boundary swallows the whole entry, and the surface silently vanishes —
+ * exactly how the header ▶ button disappeared on 0.1.7.
+ *
+ * Resolving by name at runtime (new scheme → legacy scheme → bundled artwork)
+ * keeps every surface rendering across DSH alphas. The bundled artwork is only
+ * a last resort, so a future rename can never blank a control again.
+ */
+import type { ReactElement, ReactNode } from 'react'
+import * as primitives from '@deepseek-ai/dsh-client-ui-primitives'
+
+/** Props both naming schemes accept (the legacy exports ignore extra fields). */
+export interface IconProps {
+  /** Rendered square size in CSS pixels. */
+  size?: number
+  className?: string
+}
+
+type IconComponent = (props: IconProps) => ReactElement
+
+const ICON_EXPORTS = primitives as unknown as Record<string, IconComponent | undefined>
+
+/** First export name that exists on the running host, else the bundled artwork. */
+function pickIcon(exportNames: readonly string[], fallback: IconComponent): IconComponent {
+  for (const name of exportNames) {
+    const candidate = ICON_EXPORTS[name]
+    if (typeof candidate === 'function') return candidate
+  }
+  return fallback
+}
+
+/** Wrap one locally drawn 16×16 artwork as an icon component. */
+function localIcon(children: ReactNode): IconComponent {
+  return function LocalIcon({ size = 16, className }: IconProps): ReactElement {
+    return (
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 16 16"
+        fill="none"
+        className={className}
+        aria-hidden="true"
+      >
+        {children}
+      </svg>
+    )
+  }
+}
+
+/** Run/play glyph for the header quick-run button. */
+export const PlayIcon = pickIcon(
+  ['IconPlayOutlineRegular', 'IconPlayOutlineMedium', 'IconPlayOutline16'],
+  localIcon(
+    <>
+      <circle cx="8" cy="8" r="6.5" stroke="currentColor" />
+      <path d="M6.6 5.9 10.4 8l-3.8 2.1Z" fill="currentColor" />
+    </>,
+  ),
+)
+
+/** Dismiss glyph (menu header and popup close). */
+export const CloseIcon = pickIcon(
+  ['IconCloseOutlineRegular', 'IconCloseOutlineMedium', 'IconCloseOutline16'],
+  localIcon(
+    <path d="M4.2 4.2 11.8 11.8M11.8 4.2 4.2 11.8" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />,
+  ),
+)
+
+/** Stop/kill glyph for a running command. */
+export const StopIcon = pickIcon(
+  ['IconStopFillRegular', 'IconStopFillMedium', 'IconStopFill16'],
+  localIcon(<rect x="4.6" y="4.6" width="6.8" height="6.8" rx="1.6" fill="currentColor" />),
+)
+
+/** Add-row glyph in the settings page. */
+export const PlusIcon = pickIcon(
+  ['IconPlusOutlineRegular', 'IconPlusOutlineMedium', 'IconPlusOutline16'],
+  localIcon(
+    <path d="M8 3.4v9.2M3.4 8h9.2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />,
+  ),
+)
+
+/** Remove-command glyph in the settings page. */
+export const TrashIcon = pickIcon(
+  ['IconTrashOutlineRegular', 'IconTrashOutlineMedium', 'IconTrashOutline16'],
+  localIcon(
+    <>
+      <path d="M3.4 4.4h9.2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
+      <path
+        d="M6.4 4.4V3.1h3.2v1.3M4.9 4.4l.6 8.5h5l.6-8.5"
+        stroke="currentColor"
+        strokeWidth="1.2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </>,
+  ),
+)

package/src/client/index.tsx

@@ -2,9 +2,10 @@
  * @fonlan/dsh-quick-commands client half.
  *
  * Registers:
- *  - `settings.plugin.item` card (keyed by the `quick-commands` settings
- *    namespace) — per-workspace command CRUD + popup anchor preference.
- *  - `conversation.session.header.utilities` entry (id `quick-commands`,
+ *  - "settings.section" page (id "quick-commands", order 330) — per-workspace
+ *    command CRUD + popup anchor preference, rendered as its own page in the
+ *    settings sidebar.
+ *  - "conversation.session.header.utilities" entry (id "quick-commands",
  *    order -1 → left of the Session log pill) — the quick-run ▶ button, command
  *    menu, and live output popup.
  */
@@ -12,9 +13,8 @@ import type { Context } from '@deepseek-ai/cordis'
 type ClientContext = Context
 import type {} from '@deepseek-ai/dsh-client-locale/client'
 import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
-import type {} from '@deepseek-ai/dsh-client-ui-settings-plugins/client'
 import { QuickCommandsHeaderAction } from './header'
-import { QuickCommandsSettingsCard } from './settings-card'
+import { QuickCommandsSettingsSection } from './settings-section'
 import { LOCALE_NS, zh, en } from './locales'
 import './quick-commands.css'
 
@@ -22,7 +22,7 @@ import './quick-commands.css'
 interface Slots {
   inject(name: string, callback: () => unknown): unknown
   register(
-    def: { name: string; key?: string; id?: string; order?: number; locale?: string },
+    def: { name: string; id?: string; order?: number; label?: string | (() => string); locale?: string },
     component: unknown,
   ): unknown
 }
@@ -36,16 +36,17 @@ export function apply(ctx: ClientContext): void {
   const t = ctx.locale.bind(LOCALE_NS)
   const slots = (ctx as unknown as { slots: Slots }).slots
 
-  // The plugin's own Settings Card (设置 → 插件配置) rides the `quick-commands`
-  // settings namespace: registering into the keyed `settings.plugin.item` slot
-  // with the namespace string makes the configurable-plugins tab dispatch the
-  // card next to the built-in ones (bash / agent loop / web search).
-  slots.inject('settings.plugin.item', () =>
+  // The plugin's own settings page (设置 → 侧栏「快捷命令」) rides the
+  // "quick-commands" locale namespace: a "settings.section" list entry gives it
+  // one row in the settings sidebar and renders the page in the content column.
+  slots.inject('settings.section', () =>
     slots.register({
-      name: 'settings.plugin.item',
-      key: LOCALE_NS,
+      name: 'settings.section',
+      id: 'quick-commands',
+      order: 330,
+      label: () => t('settingsTitle'),
       locale: LOCALE_NS,
-    }, QuickCommandsSettingsCard as never),
+    }, QuickCommandsSettingsSection as never),
   )
 
   // Session-header util: order -1 renders LEFT of the Session log pill

package/src/client/locales.ts

@@ -37,10 +37,10 @@ export const zh = {
   runLost: '运行记录已失效',
   runNotFound: '工作区或命令未找到',
 
-  // settings card
+  // settings page (设置 → 侧栏「快捷命令」)
+  settingsTitle: '快捷命令',
   cardTitle: '快速命令',
-  cardDescription: '为每个工作区配置常用命令，会话头部一键运行',
-  collapseOrExpand: '展开 / 收起',
+  sectionSub: '为每个工作区配置常用命令，会话头部一键运行',
   cardIntro: '为每个工作区配置常用命令，运行于工作区目录。支持占位符：{workspace} 工作区路径，{cwd} 会话目录，{title} 工作区标题。',
   cardWorkspaces: '工作区',
   cardNoWorkspaces: '没有工作区。请在侧边栏先添加工作区。',
@@ -54,9 +54,9 @@ export const zh = {
   cardAnchor: '输出弹窗位置',
   cardAnchorCorner: '右下角',
   cardAnchorButton: '锚定按钮下方',
-}
+} as const
 
-export const en = {
+export const en: Record<keyof typeof zh, string> = {
   buttonTitle: 'Quick commands',
   buttonTooltip: 'Quick commands (current workspace)',
   noWorkspace: 'This session is not in any configured workspace',
@@ -87,9 +87,9 @@ export const en = {
   runLost: 'Run record expired',
   runNotFound: 'Workspace or command not found',
 
+  settingsTitle: 'Quick Commands',
   cardTitle: 'Quick commands',
-  cardDescription: 'Configure common commands per workspace, run them from the session header',
-  collapseOrExpand: 'Expand / collapse',
+  sectionSub: 'Configure common commands per workspace, run them from the session header',
   cardIntro: 'Configure common commands per workspace; they run in the workspace directory. Placeholders: {workspace} workspace path, {cwd} session cwd, {title} workspace title.',
   cardWorkspaces: 'Workspaces',
   cardNoWorkspaces: 'No workspaces. Add one in the sidebar first.',

package/src/client/quick-commands.css

@@ -370,196 +370,6 @@
   opacity: 1;
 }
 
-/* ── settings card (设置 → 插件配置) — mirrors official PluginCard disclosure ── */
-.qc-settings-card {
-  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
-  background: var(--dsw-alias-bg-layer-2, #1f1f21);
-  border-radius: 12px;
-  list-style: none;
-  transition: border-color .16s, background .16s;
-}
-.qc-settings-card:hover {
-  border-color: var(--dsw-alias-label-secondary, #cfd3d6);
-}
-.qc-settings-card-open {
-  background: var(--dsw-alias-bg-layer-1, #27272a);
-  border-color: var(--dsw-alias-label-secondary, #cfd3d6);
-}
-.qc-settings-header {
-  appearance: none;
-  width: 100%;
-  font: inherit;
-  color: inherit;
-  text-align: left;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: 12px;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
-  display: flex;
-}
-.qc-settings-header:focus-visible {
-  outline: 2px solid var(--dsw-alias-brand-primary, #4a9eff);
-  outline-offset: -2px;
-}
-.qc-settings-head-text {
-  flex-direction: column;
-  flex: 1;
-  gap: 4px;
-  min-width: 0;
-  display: flex;
-}
-.qc-settings-name {
-  color: var(--dsw-alias-label-primary, #f2f2f2);
-  font-size: 15px;
-  font-weight: 600;
-  line-height: 1.4;
-}
-.qc-settings-description {
-  color: var(--dsw-alias-label-secondary, #cfd3d6);
-  font-size: 13px;
-  line-height: 1.5;
-}
-.qc-settings-chevron {
-  color: var(--dsw-alias-label-secondary, #cfd3d6);
-  flex: none;
-  transition: transform .16s;
-}
-.qc-settings-chevron-open {
-  transform: rotate(180deg);
-}
-.qc-settings-body {
-  border-top: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
-  margin: 0 16px;
-  padding-bottom: 12px;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-.qc-settings-intro {
-  font-size: 12px;
-  color: var(--dsw-alias-label-secondary, #cfd3d6);
-  margin: 8px 0 0;
-  line-height: 1.5;
-}
-.qc-settings-anchor {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  font-size: 12px;
-}
-.qc-settings-anchor-label {
-  color: var(--dsw-alias-label-primary, #f2f2f2);
-  font-weight: 500;
-}
-.qc-settings-radio {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  color: var(--dsw-alias-label-secondary, #cfd3d6);
-  cursor: pointer;
-}
-.qc-settings-error {
-  font-size: 12px;
-  color: var(--dsw-alias-state-error-primary, #e5484d);
-}
-.qc-settings-empty {
-  font-size: 12px;
-  color: var(--dsw-alias-label-secondary, #cfd3d6);
-  margin: 0;
-}
-.qc-settings-workspace {
-  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
-  border-radius: 10px;
-  padding: 10px;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.qc-settings-workspace-head {
-  display: flex;
-  align-items: baseline;
-  gap: 8px;
-}
-.qc-settings-workspace-title {
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--dsw-alias-label-primary, #f2f2f2);
-}
-.qc-settings-workspace-path {
-  font-size: 11px;
-  font-family: var(--dsw-font-family-mono, monospace);
-  color: var(--dsw-alias-label-tertiary, #adb2b8);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.qc-settings-no-commands {
-  font-size: 12px;
-  color: var(--dsw-alias-label-tertiary, #adb2b8);
-  margin: 0;
-}
-.qc-settings-command {
-  display: flex;
-  gap: 6px;
-  align-items: center;
-}
-.qc-settings-field {
-  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
-  border-radius: 8px;
-  background: var(--dsw-alias-bg-layer-1, #2a2a2d);
-  color: var(--dsw-alias-label-primary, #f2f2f2);
-  font-size: 12px;
-  padding: 6px 8px;
-  outline: none;
-}
-.qc-settings-field::placeholder {
-  color: var(--dsw-alias-label-tertiary, #adb2b8);
-}
-.qc-settings-field:focus {
-  border-color: var(--dsw-alias-brand-primary, #4a9eff);
-}
-.qc-settings-field-name {
-  width: 160px;
-  flex: none;
-}
-.qc-settings-field-command {
-  flex: 1;
-  font-family: var(--dsw-font-family-mono, monospace);
-}
-.qc-settings-icon-btn {
-  border: 0;
-  background: transparent;
-  color: var(--dsw-alias-label-tertiary, #adb2b8);
-  cursor: pointer;
-  padding: 4px;
-  display: inline-flex;
-  align-items: center;
-  border-radius: 6px;
-}
-.qc-settings-icon-btn:hover {
-  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
-  color: var(--dsw-alias-state-error-primary, #e5484d);
-}
-.qc-settings-add-btn {
-  align-self: flex-start;
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
-  border-radius: 8px;
-  background: transparent;
-  color: var(--dsw-alias-label-primary, #f2f2f2);
-  font-size: 12px;
-  padding: 4px 10px;
-  cursor: pointer;
-}
-.qc-settings-add-btn:hover {
-  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
-}
-
 /* ── mobile fallback (dsh-mobile-nav) ──────────────────────────────────────
    The dsh-mobile-nav plugin (≤1023px) hides the ENTIRE header utilities seat
    with `[data-mobile-nav="frame"] [data-phase] header > :first-child >
@@ -605,4 +415,4 @@
     min-height: 44px;
     justify-content: center;
   }
-}
+}

package/src/client/settings-section.css

@@ -0,0 +1,163 @@
+/**
+ * Styles for the quick-commands settings page.
+ *
+ * The page occupies the settings panel content column: a static header
+ * (title plus a one-line summary) over the always-visible command editor.
+ * Inner controls follow the built-in settings language.
+ */
+
+/* page layout */
+
+.qc-page {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 720px;
+}
+.qc-page-head {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.qc-page-title {
+  margin: 0;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
+}
+.qc-page-sub {
+  margin: 0;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/* body: workspace / command-set editor */
+
+.qc-settings-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.qc-settings-intro {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  margin: 0;
+  line-height: 1.5;
+}
+.qc-settings-anchor {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  font-size: 12px;
+}
+.qc-settings-anchor-label {
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  font-weight: 500;
+}
+.qc-settings-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  cursor: pointer;
+}
+.qc-settings-error {
+  font-size: 12px;
+  color: var(--dsw-alias-state-error-primary, #e5484d);
+}
+.qc-settings-empty {
+  font-size: 12px;
+  color: var(--dsw-alias-label-secondary, #cfd3d6);
+  margin: 0;
+}
+.qc-settings-workspace {
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  border-radius: 10px;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.qc-settings-workspace-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+.qc-settings-workspace-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+}
+.qc-settings-workspace-path {
+  font-size: 11px;
+  font-family: var(--dsw-font-family-mono, monospace);
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.qc-settings-no-commands {
+  font-size: 12px;
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  margin: 0;
+}
+.qc-settings-command {
+  display: flex;
+  gap: 6px;
+  align-items: center;
+}
+.qc-settings-field {
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-1, #2a2a2d);
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  font-size: 12px;
+  padding: 6px 8px;
+  outline: none;
+}
+.qc-settings-field::placeholder {
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+}
+.qc-settings-field:focus {
+  border-color: var(--dsw-alias-brand-primary, #4a9eff);
+}
+.qc-settings-field-name {
+  width: 160px;
+  flex: none;
+}
+.qc-settings-field-command {
+  flex: 1;
+  font-family: var(--dsw-font-family-mono, monospace);
+}
+.qc-settings-icon-btn {
+  border: 0;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary, #adb2b8);
+  cursor: pointer;
+  padding: 4px;
+  display: inline-flex;
+  align-items: center;
+  border-radius: 6px;
+}
+.qc-settings-icon-btn:hover {
+  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
+  color: var(--dsw-alias-state-error-primary, #e5484d);
+}
+.qc-settings-add-btn {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  border: 1px solid var(--dsw-alias-border-l2, rgba(128, 128, 128, 0.35));
+  border-radius: 8px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary, #f2f2f2);
+  font-size: 12px;
+  padding: 4px 10px;
+  cursor: pointer;
+}
+.qc-settings-add-btn:hover {
+  background: color-mix(in srgb, var(--dsw-alias-label-primary, #f2f2f2) 10%, transparent);
+}