davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: remove drag handle icon from sidebar sections

Browse Source
This commit is contained in:
Test
2026-03-02 20:06:57 +01:00
parent 2eb3080050
commit 8747a84453
2 changed files with 5 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/Sidebar.test.tsx
View File

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

8
src/components/SidebarParts.tsx
View File

@@ -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>