From b44a6c7900cd0a233b9f517f7976ca4faa3e8ef9 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Sat, 4 Apr 2026 01:08:23 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20move=20separator=20outside=20SECTIONS=20?=
 =?UTF-8?q?group=20=E2=80=94=20between=20groups,=20not=20inside?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The border-b was on the SECTIONS header div only, creating a visible
separator between the header and its type entries. Wrapped both header
and sortable entries in a single border-b container so the divider
appears between SECTIONS and FOLDERS instead.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/Sidebar.test.tsx | 13 +++++++
 src/components/Sidebar.tsx      | 64 +++++++++++++++++----------------
 2 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx
index 28560c96..3cdf4d99 100644
--- a/src/components/Sidebar.test.tsx
+++ b/src/components/Sidebar.test.tsx
@@ -958,4 +958,17 @@ describe('Sidebar', () => {
       expect(onSelect).toHaveBeenCalledWith({ kind: 'filter', filter: 'favorites' })
     })
   })
+
+  describe('group separators', () => {
+    it('SECTIONS header and its entries share the same border-b container (no separator inside group)', () => {
+      render(<Sidebar entries={mockEntries} selection={defaultSelection} onSelect={() => {}} />)
+      const sectionsHeader = screen.getByText('SECTIONS')
+      const projectsSection = screen.getByText('Projects')
+      // Walk up from SECTIONS header to find the border-b container
+      const borderContainer = sectionsHeader.closest('.border-b')
+      expect(borderContainer).not.toBeNull()
+      // The section entry should be inside the same border-b container
+      expect(borderContainer!.contains(projectsSection)).toBe(true)
+    })
+  })
 })
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index a685de24..21a62825 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -475,39 +475,41 @@ export const Sidebar = memo(function Sidebar({
           </div>
         )}
 
-        {/* Sections header + visibility popover */}
-        <div ref={customizeRef} className="border-b border-border" style={{ position: 'relative', padding: '4px 6px' }}>
-          <button
-            className="flex w-full cursor-pointer select-none items-center justify-between border-none bg-transparent text-muted-foreground"
-            style={{ padding: '6px 14px 6px 16px' }}
-            onClick={() => toggleGroup('sections')}
-          >
-            <div className="flex items-center gap-1">
-              {groupCollapsed.sections ? <CaretRight size={12} /> : <CaretDown size={12} />}
-              <span className="text-[10px] font-semibold" style={{ letterSpacing: 0.5 }}>SECTIONS</span>
-            </div>
-            <span
-              role="button"
-              title="Customize sections"
-              aria-label="Customize sections"
-              onClick={(e) => { e.stopPropagation(); setShowCustomize((v) => !v) }}
+        {/* Sections header + entries */}
+        <div className="border-b border-border">
+          <div ref={customizeRef} style={{ position: 'relative', padding: '4px 6px' }}>
+            <button
+              className="flex w-full cursor-pointer select-none items-center justify-between border-none bg-transparent text-muted-foreground"
+              style={{ padding: '6px 14px 6px 16px' }}
+              onClick={() => toggleGroup('sections')}
             >
-              <SlidersHorizontal size={12} className="text-muted-foreground hover:text-foreground" />
-            </span>
-          </button>
-          {showCustomize && <VisibilityPopover sections={allSectionGroups} isSectionVisible={isSectionVisible} onToggle={toggleVisibility} />}
-        </div>
+              <div className="flex items-center gap-1">
+                {groupCollapsed.sections ? <CaretRight size={12} /> : <CaretDown size={12} />}
+                <span className="text-[10px] font-semibold" style={{ letterSpacing: 0.5 }}>SECTIONS</span>
+              </div>
+              <span
+                role="button"
+                title="Customize sections"
+                aria-label="Customize sections"
+                onClick={(e) => { e.stopPropagation(); setShowCustomize((v) => !v) }}
+              >
+                <SlidersHorizontal size={12} className="text-muted-foreground hover:text-foreground" />
+              </span>
+            </button>
+            {showCustomize && <VisibilityPopover sections={allSectionGroups} isSectionVisible={isSectionVisible} onToggle={toggleVisibility} />}
+          </div>
 
-        {/* Sortable section groups */}
-        {!groupCollapsed.sections && (
-          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-            <SortableContext items={sectionIds} strategy={verticalListSortingStrategy}>
-              {visibleSections.map((g) => (
-                <SortableSection key={g.type} group={g} sectionProps={sectionProps} />
-              ))}
-            </SortableContext>
-          </DndContext>
-        )}
+          {/* Sortable section groups */}
+          {!groupCollapsed.sections && (
+            <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+              <SortableContext items={sectionIds} strategy={verticalListSortingStrategy}>
+                {visibleSections.map((g) => (
+                  <SortableSection key={g.type} group={g} sectionProps={sectionProps} />
+                ))}
+              </SortableContext>
+            </DndContext>
+          )}
+        </div>
 
         {/* Folder tree */}
         <FolderTree folders={folders} selection={selection} onSelect={onSelect} onCreateFolder={onCreateFolder} collapsed={groupCollapsed.folders} onToggle={() => toggleGroup('folders')} />