From 081f1e574326ccbf459e045e8228a8ebffc373fc Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Sat, 21 Feb 2026 18:40:06 +0100
Subject: [PATCH] feat: replace 'Customize Sections' label with 'Sections'
 header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Changed the sidebar section header from a button-style "Customize sections"
label with inline icon to a clean "Sections" heading with the settings icon
pushed to the far right. The settings icon still toggles the customize
popover — no functionality change.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/Sidebar.tsx | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 8e00818a..079d4812 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -461,18 +461,23 @@ export const Sidebar = memo(function Sidebar({ entries, selection, onSelect, onS
           </div>
         </div>
 
-        {/* Customize sections button + popover */}
+        {/* Sections header + customize popover */}
         <div ref={customizeRef} style={{ position: 'relative', padding: '4px 6px 0' }}>
-          <button
-            className="flex w-full cursor-pointer select-none items-center rounded border-none bg-transparent text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-            style={{ padding: '4px 16px', gap: 6 }}
-            onClick={() => setShowCustomize((v) => !v)}
-            aria-label="Customize sections"
-            title="Customize sections"
+          <div
+            className="flex w-full select-none items-center justify-between"
+            style={{ padding: '4px 16px' }}
           >
-            <SlidersHorizontal size={14} />
-            <span className="text-[12px]">Customize sections</span>
-          </button>
+            <span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Sections</span>
+            <button
+              className="flex shrink-0 cursor-pointer items-center justify-center rounded border-none bg-transparent p-0 text-muted-foreground transition-colors hover:text-foreground"
+              style={{ width: 20, height: 20 }}
+              onClick={() => setShowCustomize((v) => !v)}
+              aria-label="Customize sections"
+              title="Customize sections"
+            >
+              <SlidersHorizontal size={14} />
+            </button>
+          </div>
 
           {showCustomize && (
             <div