feat: Allow drag-to-create dependencies between any non-completed features (#656)

* feat: Allow drag-to-create dependencies between any non-completed features

Previously, the card drag-to-create-dependency feature only worked between
backlog features. This expands the functionality to allow creating dependency
links between features in any status (except completed).

Changes:
- Make all non-completed cards droppable for dependency linking
- Update drag-drop hook to allow links between any status
- Add status badges to the dependency link dialog for better context

* refactor: use barrel export for StatusBadge import

---------

Co-authored-by: Claude <noreply@anthropic.com>

apps/ui/src/components/views/board-view/components/kanban-card/kanban-card.tsx

@@ -136,8 +136,9 @@ export const KanbanCard = memo(function KanbanCard({
   });
 
   // Make the card a drop target for creating dependency links
-  // Only backlog cards can be link targets (to avoid complexity with running features)
+  // All non-completed cards can be link targets to allow flexible dependency creation
-  const isDroppable = !isOverlay && feature.status === 'backlog' && !isSelectionMode;
+  // (completed features are excluded as they're already done)
+  const isDroppable = !isOverlay && feature.status !== 'completed' && !isSelectionMode;
   const { setNodeRef: setDroppableRef, isOver } = useDroppable({
     id: `card-drop-${feature.id}`,
     disabled: !isDroppable,

apps/ui/src/components/views/board-view/dialogs/dependency-link-dialog.tsx

@@ -12,6 +12,8 @@ import { Button } from '@/components/ui/button';
 import { ArrowDown, ArrowUp, Link2, X } from 'lucide-react';
 import type { Feature } from '@/store/app-store';
 import { cn } from '@/lib/utils';
+import { StatusBadge } from '../components';
+import type { FeatureStatusWithPipeline } from '@automaker/types';
 
 export type DependencyLinkType = 'parent' | 'child';
 
@@ -57,7 +59,10 @@ export function DependencyLinkDialog({
         <div className="py-4 space-y-4">
           {/* Dragged feature */}
           <div className="p-3 rounded-lg border bg-muted/30">
-            <div className="text-xs text-muted-foreground mb-1">Dragged Feature</div>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-xs text-muted-foreground">Dragged Feature</span>
+              <StatusBadge status={draggedFeature.status as FeatureStatusWithPipeline} size="sm" />
+            </div>
             <div className="text-sm font-medium line-clamp-3 break-words">
               {draggedFeature.description}
             </div>
@@ -71,7 +76,10 @@ export function DependencyLinkDialog({
 
           {/* Target feature */}
           <div className="p-3 rounded-lg border bg-muted/30">
-            <div className="text-xs text-muted-foreground mb-1">Target Feature</div>
+            <div className="flex items-center justify-between mb-1">
+              <span className="text-xs text-muted-foreground">Target Feature</span>
+              <StatusBadge status={targetFeature.status as FeatureStatusWithPipeline} size="sm" />
+            </div>
             <div className="text-sm font-medium line-clamp-3 break-words">
               {targetFeature.description}
             </div>

apps/ui/src/components/views/board-view/hooks/use-board-drag-drop.ts

@@ -88,10 +88,10 @@ export function useBoardDragDrop({
           const targetFeature = features.find((f) => f.id === targetFeatureId);
           if (!targetFeature) return;
 
-          // Only allow linking backlog features (both must be in backlog)
+          // Don't allow linking completed features (they're already done)
-          if (draggedFeature.status !== 'backlog' || targetFeature.status !== 'backlog') {
+          if (draggedFeature.status === 'completed' || targetFeature.status === 'completed') {
             toast.error('Cannot link features', {
-              description: 'Both features must be in the backlog to create a dependency link.',
+              description: 'Completed features cannot be linked.',
             });
             return;
           }