fix: match view items to section items style in sidebar

Removed the `compact` prop from view NavItems so they render with the
same icon size (16px), font size (13px), and vertical padding (6px) as
SectionHeader items. Views and sections now align visually.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/components/FolderTree.tsx

@@ -102,7 +102,7 @@ export const FolderTree = memo(function FolderTree({ folders, selection, onSelec
   if (folders.length === 0 && !isCreating) return null
 
   return (
-    <div style={{ padding: '4px 6px 0' }}>
+    <div style={{ padding: '4px 6px' }}>
       {/* Header */}
       <button
         className="flex w-full cursor-pointer select-none items-center justify-between border-none bg-transparent text-muted-foreground"

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)
+    })
+  })
 })

src/components/Sidebar.tsx

@@ -223,7 +223,7 @@ function FavoritesSection({ entries, selection, onSelect, onSelectNote, onReorde
   if (favorites.length === 0) return null
 
   return (
-    <div style={{ padding: '4px 6px 0' }}>
+    <div style={{ 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' }}
@@ -430,7 +430,7 @@ export const Sidebar = memo(function Sidebar({
 
         {/* Views */}
         {hasViews && (
-          <div className="border-b border-border" style={{ padding: '4px 6px 0' }}>
+          <div className="border-b border-border" style={{ 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' }}
@@ -457,7 +457,6 @@ export const Sidebar = memo(function Sidebar({
                       label={v.definition.name}
                       isActive={isSelectionActive(selection, { kind: 'view', filename: v.filename })}
                       onClick={() => onSelect({ kind: 'view', filename: v.filename })}
-                      compact
                     />
                     {onDeleteView && (
                       <button
@@ -475,39 +474,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 0' }}>
-          <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')} />