From 33fd7ae6801d892ddbee7b76a964a4b2c6ff0416 Mon Sep 17 00:00:00 2001
From: bowenliang123 <liang.bowen.123@qq.com>
Date: Mon, 14 Sep 2026 14:25:51 +0800
Subject: [PATCH] feat(client): hold the hover tint on the expanded browser
 category header

The Context browser's category header carried only the hover utility, so
the tint vanished the moment the pointer left an expanded card and the
header melted into its body. The open state now keeps the hover
background via a lc-br-cat-open state class - the same token as the
hover and hover-link tints - on every category card alike.
---
 src/client/components/browser.tsx       | 4 +++-
 src/client/styles/browser.css           | 3 +++
 tests/client/components/browser.spec.ts | 3 +++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/client/components/browser.tsx b/src/client/components/browser.tsx
index 52c251d..ad5c878 100644
--- a/src/client/components/browser.tsx
+++ b/src/client/components/browser.tsx
@@ -1170,7 +1170,9 @@ export function makeContextBrowser(
               <div key={c.key} className={'lc-br-cat' + (openable ? '' : ' lc-br-cat-empty')}>
                 <button
                   type="button"
-                  className={'lc-br-cat-row hover:bg-(--dsw-alias-interactive-bg-hover)' + (linked && props.hoverKey === c.key ? ' lc-br-cat-on' : '')}
+                  className={'lc-br-cat-row hover:bg-(--dsw-alias-interactive-bg-hover)'
+                    + (open ? ' lc-br-cat-open' : '')
+                    + (linked && props.hoverKey === c.key ? ' lc-br-cat-on' : '')}
                   /* v8 ignore start -- the handlers exist only when linked,
                      and linked already requires onHoverKey defined (above). */
                   onMouseEnter={linked ? () => { if (props.onHoverKey !== undefined) props.onHoverKey(c.key) } : undefined}
diff --git a/src/client/styles/browser.css b/src/client/styles/browser.css
index aac80a3..8c20f45 100644
--- a/src/client/styles/browser.css
+++ b/src/client/styles/browser.css
@@ -23,6 +23,9 @@
  */
 .lc-br-cat-on { background: var(--dsw-alias-interactive-bg-hover); }
 .lc-br-cat-on i { box-shadow: 0 0 0 1px var(--dsw-alias-brand-primary); }
+/* Expanded category: the open header holds the hover tint, so the header keeps
+   reading as the raised face over its body — every category card alike. */
+.lc-br-cat-open { background: var(--dsw-alias-interactive-bg-hover); }
 .lc-br-cat-row i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; flex: none; transition: box-shadow var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
 .lc-br-cat-label { font-weight: 600; }
 .lc-br-cat-count { color: var(--dsw-alias-label-secondary); font-size: 12px; white-space: nowrap; }
diff --git a/tests/client/components/browser.spec.ts b/tests/client/components/browser.spec.ts
index 1f79d02..2d64e83 100644
--- a/tests/client/components/browser.spec.ts
+++ b/tests/client/components/browser.spec.ts
@@ -314,6 +314,8 @@ describe('ContextBrowser header epochs', () => {
     const body = query(m.container, '.lc-br-body')
     assert.ok(text(body).includes('SYS B'), 'the newest epoch’s prompt shows on the live surface')
     assert.ok(text(body).includes('2 lines'), 'line count rides the section head')
+    // The open header holds the hover tint, every category alike.
+    assert.ok(catRow(m, 'system').className.includes('lc-br-cat-open'))
     // The single system row is already expanded.
     assert.equal(queryAll(m.container, '.lc-br-content').length, 1)
     assert.ok(queryAll(m.container, '.lc-ts-desc-md').length >= 1, 'markdown view by default')
@@ -326,6 +328,7 @@ describe('ContextBrowser header epochs', () => {
     assert.ok(queryAll(m.container, '.lc-ts-desc-md').length >= 1, 'markdown restored')
     await click(catRow(m, 'system'))
     assert.equal(queryAll(m.container, '.lc-br-body').length, 0)
+    assert.ok(!catRow(m, 'system').className.includes('lc-br-cat-open'))
     await m.unmount()
   })