From c09662d78e804201b5070351e8963e1bb9ff4590 Mon Sep 17 00:00:00 2001
From: zipg <geeky@foxmail.com>
Date: Tue, 27 Oct 2026 20:18:37 +0800
Subject: [PATCH] fix(tabs): clarify the active group in horizontal tab layouts
 (#13675)

* fix(tabs): distinguish the active two-row group

* fix(tabs): apply group focus styling to single-row headers

* fix(tabs): retain faint group rails and outline collapsed counts

* fix(tabs): soften collapsed group count outline

---------

Co-authored-by: zipg <4047349+zipg@users.noreply.github.com>
---
 .../src/components/layout/appTabBar.css       | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/apps/desktop/src/components/layout/appTabBar.css b/apps/desktop/src/components/layout/appTabBar.css
index 6f15067b74..2f4a5d74a4 100644
--- a/apps/desktop/src/components/layout/appTabBar.css
+++ b/apps/desktop/src/components/layout/appTabBar.css
@@ -1516,6 +1516,56 @@ html.dbx-legacy-webview .vertical-tab-layout .app-tab-pill:not(.tab-group-tab)[d
   box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tab-group-color) 28%, transparent);
 }
 
+/* Horizontal group headers share the same focus treatment in both row modes:
+ * reserve the colored fill and strong underline for the active group while
+ * retaining a small identity marker and faint underline on peers. */
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active) {
+  color: var(--muted-foreground);
+  font-weight: 500;
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active) .tab-group-header-content {
+  background: transparent;
+  box-shadow: none;
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active):hover .tab-group-header-content {
+  color: var(--foreground);
+  background: var(--muted);
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active)::after {
+  opacity: 0.3;
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active) .tab-group-marker {
+  opacity: 0.35;
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active) .tab-group-database-icon {
+  filter: grayscale(1);
+  opacity: 0.7;
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active) .tab-group-count {
+  color: var(--muted-foreground);
+  background: color-mix(in srgb, var(--muted-foreground) 12%, transparent);
+}
+
+/* A colored ring distinguishes a collapsed group's hidden-tab count. */
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header--collapsed .tab-group-count {
+  box-shadow: inset 0 0 0 0.6px var(--tab-group-color);
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header:not(.tab-group-header--active) .tab-group-chevron {
+  color: inherit;
+}
+
+.app-tab-bar:not(.vertical-tab-layout) .tab-group-header--active::after {
+  height: 2.5px;
+  opacity: 1;
+}
+
 /* Vertical bars use the same neutral-label rule for the active group header. */
 .vertical-tab-layout .tab-group-header,
 .vertical-tab-layout .tab-group-header--active {