From daac6a204ace7f1004d6df660338f731a963679c Mon Sep 17 00:00:00 2001
From: Dusk <pxiaorong@gmail.com>
Date: Sat, 25 Apr 2026 14:59:51 +0800
Subject: [PATCH] feat(settings): use sticky section header bars
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

中文: 将设置页卡片标题改为整行 sticky 条幅，滚动时提供有背景遮挡的分组标题效果。

English: Turn settings card toggles into full-width sticky section header bars with background coverage while scrolling.
---
 .../settings/PluginSettingTab.test.ts           |  9 ++++++---
 src/presentation/settings/PluginSettingTab.ts   | 17 ++++++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/presentation/settings/PluginSettingTab.test.ts b/src/presentation/settings/PluginSettingTab.test.ts
index 9805b18..5de9e54 100644
--- a/src/presentation/settings/PluginSettingTab.test.ts
+++ b/src/presentation/settings/PluginSettingTab.test.ts
@@ -521,10 +521,13 @@ describe("PluginSettingTab", () => {
     for (const cardId of ["card-types", "sync-content", "scope", "deck", "commands"] as const) {
       const header = queryByDataset(tab.containerEl, "settingsCardToggle", cardId);
       expect(header.style.position).toBe("sticky");
-      expect(header.style.top).toBe("8px");
-      expect(header.style.zIndex).toBe("20");
+      expect(header.style.top).toBe("0");
+      expect(header.style.zIndex).toBe("30");
+      expect(header.style.display).toBe("flex");
+      expect(header.style.width).toBe("100%");
       expect(header.style.background).toBe("var(--background-primary)");
-      expect(header.style.boxShadow).toBe("0 2px 8px rgba(0, 0, 0, 0.08)");
+      expect(header.style.borderBottom).toBe("1px solid var(--background-modifier-border)");
+      expect(header.style.boxShadow).toBe("0 6px 14px rgba(0, 0, 0, 0.08)");
     }
   });
 
diff --git a/src/presentation/settings/PluginSettingTab.ts b/src/presentation/settings/PluginSettingTab.ts
index fec4c19..d5a5b5a 100644
--- a/src/presentation/settings/PluginSettingTab.ts
+++ b/src/presentation/settings/PluginSettingTab.ts
@@ -118,11 +118,22 @@ export class AnkiHeadingSyncSettingTab extends PluginSettingTab {
       headerEl.type = "button";
       headerEl.dataset.settingsCardToggle = cardId;
       headerEl.style.position = "sticky";
-      headerEl.style.top = "8px";
-      headerEl.style.zIndex = "20";
+      headerEl.style.top = "0";
+      headerEl.style.zIndex = "30";
+      headerEl.style.display = "flex";
+      headerEl.style.alignItems = "center";
+      headerEl.style.justifyContent = "flex-start";
+      headerEl.style.width = "100%";
+      headerEl.style.maxWidth = "100%";
+      headerEl.style.padding = "10px 14px";
       headerEl.style.background = "var(--background-primary)";
+      headerEl.style.backdropFilter = "blur(8px)";
+      headerEl.style.border = "none";
+      headerEl.style.borderBottom = "1px solid var(--background-modifier-border)";
+      headerEl.style.borderRadius = "0";
       headerEl.style.marginBottom = "8px";
-      headerEl.style.boxShadow = "0 2px 8px rgba(0, 0, 0, 0.08)";
+      headerEl.style.textAlign = "left";
+      headerEl.style.boxShadow = "0 6px 14px rgba(0, 0, 0, 0.08)";
       headerEl.addEventListener("click", () => {
         this.toggleCard(cardId);
       });