ColaFlow/docs/plans/sprint_1_story_3_task_2.md

Task 10: Add Hierarchy Indicators

Task ID: TASK-010 | Story: STORY-003 | Sprint: Sprint 1 Estimated Hours: 2h | Assignee: Frontend Developer 1 | Priority: P1 | Status: Not Started

Task Description

Add visual indicators on Kanban cards to show Epic/Story/Task hierarchy relationships.

Implementation

Update KanbanCard.tsx (1.5h)

export const KanbanCard: React.FC<{ item: Epic | Story | Task }> = ({ item }) => {
  const getTypeIcon = () => {
    switch (item.type) {
      case 'Epic': return <span className="text-purple-600">📊</span>;
      case 'Story': return <span className="text-blue-600">📝</span>;
      case 'Task': return <span className="text-green-600">✓</span>;
    }
  };

  const renderParentBreadcrumb = () => {
    if (item.type === 'Story' && item.parentEpic) {
      return (
        <div className="text-xs text-gray-500 flex items-center gap-1">
          <span>📊</span>
          <span>{item.parentEpic.title}</span>
        </div>
      );
    }
    if (item.type === 'Task' && item.parentStory) {
      return (
        <div className="text-xs text-gray-500 flex items-center gap-1">
          <span>📝</span>
          <span>{item.parentStory.title}</span>
        </div>
      );
    }
    return null;
  };

  const renderChildCount = () => {
    if (item.childCount > 0) {
      return (
        <span className="px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded">
          {item.childCount} {item.type === 'Epic' ? 'stories' : 'tasks'}
        </span>
      );
    }
    return null;
  };

  return (
    <div className="kanban-card border rounded p-3 bg-white shadow-sm hover:shadow-md">
      <div className="flex items-center justify-between mb-2">
        {getTypeIcon()}
        {renderChildCount()}
      </div>

      {renderParentBreadcrumb()}

      <h3 className="font-semibold text-sm mt-2">{item.title}</h3>
      <p className="text-xs text-gray-600 mt-1">{item.description}</p>
    </div>
  );
};

Add CSS styles (30 min)

.kanban-card {
  min-height: 100px;
  transition: all 0.2s ease;
}

.kanban-card:hover {
  transform: translateY(-2px);
}

.hierarchy-breadcrumb {
  font-size: 0.75rem;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.child-count-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.5rem;
  background-color: #dbeafe;
  color: #1e40af;
  border-radius: 0.25rem;
  font-size: 0.75rem;
}

Acceptance Criteria

• Type icons displayed (Epic/Story/Task)
• Parent breadcrumb visible on child items
• Child count badge shown
• Hover effects working
• Responsive on mobile

Deliverables

1. Updated KanbanCard.tsx
2. CSS styles
3. Unit tests (5+ tests)

Status: Not Started | Created: 2025-11-04