feat: Add drag handle to SectionHeader, fix theme borders

Grip icon on hover. DragHandleProps typed. Theme-aware borders.

Author: alex-fedotyev

packages/app/src/components/SectionHeader.tsx

@@ -6,24 +6,29 @@ import {
   IconDotsVertical,
   IconEye,
   IconEyeOff,
+  IconGripVertical,
   IconPlus,
   IconTrash,
 } from '@tabler/icons-react';
 
+import { type DragHandleProps } from '@/components/DashboardDndContext';
+
 export default function SectionHeader({
   section,
   tileCount,
   onToggle,
   onRename,
   onDelete,
   onAddTile,
+  dragHandleProps,
 }: {
   section: DashboardContainer;
   tileCount: number;
   onToggle: () => void;
   onRename?: (newTitle: string) => void;
   onDelete?: () => void;
   onAddTile?: () => void;
+  dragHandleProps?: DragHandleProps;
 }) {
   const [editing, setEditing] = useState(false);
   const [editedTitle, setEditedTitle] = useState(section.title);
@@ -59,11 +64,32 @@ export default function SectionHeader({
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
       style={{
-        borderBottom: '1px solid var(--mantine-color-dark-4)',
+        borderBottom: '1px solid var(--mantine-color-default-border)',
         userSelect: 'none',
       }}
       data-testid={`section-header-${section.id}`}
     >
+      {dragHandleProps && (
+        <div
+          {...dragHandleProps}
+          style={{
+            cursor: 'grab',
+            display: 'flex',
+            alignItems: 'center',
+            padding: 2,
+            flexShrink: 0,
+            opacity: showControls ? 1 : 0,
+            transition: 'opacity 150ms',
+          }}
+          title="Drag to reorder sections"
+          data-testid={`section-drag-handle-${section.id}`}
+        >
+          <IconGripVertical
+            size={14}
+            style={{ color: 'var(--mantine-color-dimmed)' }}
+          />
+        </div>
+      )}
       <Flex
         align="center"
         gap="xs"