diff --git a/components/backlog/story-panel.tsx b/components/backlog/story-panel.tsx index 054bebb..b333b11 100644 --- a/components/backlog/story-panel.tsx +++ b/components/backlog/story-panel.tsx @@ -15,7 +15,7 @@ import { import { SortableContext, useSortable, - horizontalListSortingStrategy, + rectSortingStrategy, arrayMove, sortableKeyboardCoordinates, } from '@dnd-kit/sortable' @@ -38,6 +38,12 @@ const PRIORITY_COLORS: Record = { 3: 'bg-priority-medium/15 text-priority-medium border-priority-medium/30', 4: 'bg-priority-low/15 text-priority-low border-priority-low/30', } +const PRIORITY_BORDER: Record = { + 1: 'border-l-4 border-l-priority-critical', + 2: 'border-l-4 border-l-priority-high', + 3: 'border-l-4 border-l-priority-medium', + 4: 'border-l-4 border-l-priority-low', +} const STATUS_COLORS: Record = { OPEN: 'bg-status-todo/15 text-status-todo border-status-todo/30', IN_SPRINT: 'bg-status-in-progress/15 text-status-in-progress border-status-in-progress/30', @@ -90,24 +96,14 @@ function SortableStoryBlock({ {...attributes} {...listeners} onClick={onClick} - title={story.title} - className="relative w-28 shrink-0 bg-surface-container-low border border-border rounded-lg p-2 cursor-pointer hover:border-primary transition-colors space-y-1.5 select-none" + className={cn( + 'bg-surface-container rounded border border-border px-3 py-2 select-none transition-colors cursor-pointer hover:bg-surface-container-high', + PRIORITY_BORDER[story.priority], + isDragging && 'opacity-40 shadow-lg', + )} > - -

- {story.title} -

-
- - {PRIORITY_LABELS[story.priority]} - +

{story.title}

+
{STATUS_LABELS[story.status] ?? story.status} @@ -275,9 +271,9 @@ export function StoryPanel({ productId, storiesByPbi, isDemo }: StoryPanelProps) s.id)} - strategy={horizontalListSortingStrategy} + strategy={rectSortingStrategy} > -
+
{grouped[priority].map(story => ( {activeDragId && storyMap[activeDragId] && ( -
-

{storyMap[activeDragId].title}

+
+

{storyMap[activeDragId].title}

)}