From 8747a84453c2ecdb0331a8f416c6bdb1c64787c6 Mon Sep 17 00:00:00 2001
From: Test <test@test.com>
Date: Mon, 2 Mar 2026 20:06:57 +0100
Subject: [PATCH] style: remove drag handle icon from sidebar sections

---
 src/components/Sidebar.test.tsx | 7 +++----
 src/components/SidebarParts.tsx | 8 ++------
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/Sidebar.test.tsx b/src/components/Sidebar.test.tsx
index de9e41b9..821b1ce2 100644
--- a/src/components/Sidebar.test.tsx
+++ b/src/components/Sidebar.test.tsx
@@ -809,11 +809,10 @@ describe('Sidebar', () => {
       expect(topicsIdx).toBeLessThan(peopleIdx)
     })
 
-    it('renders drag handle on section headers', () => {
+    it('does not render drag handle icons on section headers', () => {
       render(<Sidebar entries={mockEntries} selection={defaultSelection} onSelect={() => {}} />)
-      const dragHandles = screen.getAllByLabelText(/^Drag to reorder/)
-      // Should have one drag handle per visible section group
-      expect(dragHandles.length).toBeGreaterThan(0)
+      const dragHandles = screen.queryAllByLabelText(/^Drag to reorder/)
+      expect(dragHandles.length).toBe(0)
     })
   })
 })
diff --git a/src/components/SidebarParts.tsx b/src/components/SidebarParts.tsx
index de45cba1..4b58cba9 100644
--- a/src/components/SidebarParts.tsx
+++ b/src/components/SidebarParts.tsx
@@ -1,7 +1,7 @@
 import { type ComponentType } from 'react'
 import type { VaultEntry, SidebarSelection } from '../types'
 import { cn } from '@/lib/utils'
-import { ChevronRight, ChevronDown, Plus, GripVertical } from 'lucide-react'
+import { ChevronRight, ChevronDown, Plus } from 'lucide-react'
 import { getTypeColor, getTypeLightColor } from '../utils/typeColors'
 import { type IconProps } from '@phosphor-icons/react'
 
@@ -145,12 +145,11 @@ function SectionChildList({ items, type, selection, sectionColor, sectionLightCo
   )
 }
 
-function SectionHeader({ label, type, Icon, sectionColor, isCollapsed, isActive, showCreate, onSelect, onContextMenu, onToggle, onCreate, dragHandleProps }: {
+function SectionHeader({ label, type, Icon, sectionColor, isCollapsed, isActive, showCreate, onSelect, onContextMenu, onToggle, onCreate }: {
   label: string; type: string; Icon: ComponentType<IconProps>
   sectionColor: string; isCollapsed: boolean; isActive: boolean; showCreate: boolean
   onSelect: () => void; onContextMenu: (e: React.MouseEvent) => void
   onToggle: () => void; onCreate: (e: React.MouseEvent) => void
-  dragHandleProps?: Record<string, unknown>
 }) {
   return (
     <div
@@ -163,9 +162,6 @@ function SectionHeader({ label, type, Icon, sectionColor, isCollapsed, isActive,
       }} onContextMenu={onContextMenu}
     >
       <div className="flex items-center" style={{ gap: 4 }}>
-        <div className="flex shrink-0 items-center justify-center text-muted-foreground opacity-0 group-hover/section:opacity-50 hover:!opacity-100 cursor-grab" style={{ width: 16, height: 16, marginLeft: -16 }} {...dragHandleProps} aria-label={`Drag to reorder ${label}`}>
-          <GripVertical size={12} />
-        </div>
         <Icon size={16} style={{ color: sectionColor }} />
         <span className="text-[13px] font-medium text-foreground" style={{ marginLeft: 4 }}>{label}</span>
       </div>