Skip to main content

6. Multi-Project Kanban Board

6.1 Swimlane Pattern - Horizontal Project Rows​

Purpose: Visualize tasks across all 46 projects with drag-drop status management.

Swimlane Structure Diagram​

Key Features:

  • Horizontal swimlanes - One row per project
  • 3 status columns - To Do, In Progress, Done
  • Collapsible rows - Hide projects to focus on active work
  • Drag-and-drop - Move tasks between columns to update status
  • Visual indicators - Green/yellow/red status circles, progress %

Full Specification:

┌─────────────────────────────────────────────────────────────────────────────┐
│  Multi-Project Kanban Board                                                 │
│  ┌─────────────┬─────────────┬─────────────┐  [⚙️ Board Settings]          │
│  │ All Projects│ All Phases ▼│ All Priority│  [Show: Active (12) ▼]        │
│  └─────────────┴─────────────┴─────────────┘                                │
├──────────────────┬──────────────────┬──────────────────┬───────────────────┤
│ Project          │ To Do            │ In Progress      │ Done              │
├──────────────────┼──────────────────┼──────────────────┼───────────────────┤
│ 🟢 coditect-core │ ┌──────────────┐ │ ┌──────────────┐ │ ┌──────────────┐│
│ [-] Collapse     │ │ Create TASK  │ │ │ Update gen-  │ │ │ Fix messages │││
│ 78% • 530 tasks  │ │ parser       │ │ │ dashboard.py │ │ │ not showing  │││
│                  │ │ P1 • 2h      │ │ │ P1 • 4h      │ │ │ P0 • Done ✓  │││
│                  │ └──────────────┘ │ └──────────────┘ │ └──────────────┘││
│                  │ ┌──────────────┐ │ ┌──────────────┐ │ (415 tasks)     ││
│                  │ │ Write tests  │ │ │ Add task     │ │                 ││
│                  │ │ P2 • 3h      │ │ │ board UI     │ │ [Load more...] ││
│                  │ └──────────────┘ │ │ P1 • 8h      │ │                 ││
│                  │ (45 tasks)       │ └──────────────┘ │                 ││
│                  │                  │ ┌──────────────┐ │                 ││
│                  │ [Add task +]     │ │ Database     │ │                 ││
│                  │                  │ │ schema       │ │                 ││
│                  │                  │ │ P1 • 6h      │ │                 ││
│                  │                  │ └──────────────┘ │                 ││
│                  │                  │ (70 tasks)       │                 ││
│                  │                  │                  │                 ││
│                  │                  │ [Add task +]     │                 ││
├──────────────────┼──────────────────┼──────────────────┼───────────────────┤
│ 🟡 cloud-backend │ ┌──────────────┐ │ ┌──────────────┐ │ ┌──────────────┐│
│ [-] Collapse     │ │ API endpoint │ │ │ Auth middle  │ │ │ User model   │││
│ 65% • 89 tasks   │ │ P0 • 5h      │ │ │ ware         │ │ │ P1 • Done ✓  │││
│                  │ └──────────────┘ │ │ P1 • 3h      │ │ └──────────────┘││
│                  │ (31 tasks)       │ └──────────────┘ │ (38 tasks)      ││
│                  │                  │ (20 tasks)       │                 ││
├──────────────────┴──────────────────┴──────────────────┴───────────────────┤
│ [+] Show 44 more projects...                                                │
└─────────────────────────────────────────────────────────────────────────────┘

Swimlane Collapsed State:

├──────────────────┬──────────────────┬──────────────────┬───────────────────┤
│ 🟡 cloud-ide     │      74 tasks    │      40 tasks    │      20 tasks     │
│ [+] Expand       │                  │                  │                   │
│ 45% • 134 tasks  │                  │                  │                   │
├──────────────────┴──────────────────┴──────────────────┴───────────────────┤

6.2 Task Card Design​

Standard Card:

┌────────────────────────────────┐
│ Create tasklist.md parser      │ ← Title (14px, semibold, truncate 2 lines)
│                                │
│ 🏷️ P1  ⏱️ 2h  📅 Dec 5        │ ← Metadata badges
│                                │
│ 👤 @hal  ⚠️ 1 blocker          │ ← Assignee, dependency count
│                                │
│ [▼] Move to In Progress        │ ← Quick action (hover only)
└────────────────────────────────┘

Dragging State:

┌────────────────────────────────┐
│ Create tasklist.md parser      │ ← Semi-transparent (opacity: 0.6)
│ ...                            │ ← Slightly rotated (transform: rotate(2deg))
└────────────────────────────────┘
                 ↓ Cursor shows drag icon

Drop Target Indicator:

┌────────────────────────────────┐
│ To Do Column                   │
│ ┌────────────────────────────┐ │
│ │ Existing task              │ │
│ └────────────────────────────┘ │
│ ┌────────────────────────────┐ │ ← Blue dashed border (2px, blue)
│ │ Drop here                  │ │ ← Drop zone highlighted
│ └────────────────────────────┘ │
└────────────────────────────────┘

6.3 Implementation Prompt - Kanban Board​

Prompt for AI/Developer:

Create a multi-project Kanban board with swimlane pattern (horizontal rows per project).

OVERALL LAYOUT:
- Table-like structure: <div> with CSS Grid
- Columns: Project name (250px) | To Do (flex:1) | In Progress (flex:1) | Done (flex:1)
- Rows: 1 row per project (dynamic height based on card count)
- Sticky header: Column labels stick to top on scroll
- Sticky first column: Project names stick to left on horizontal scroll
- Max height: calc(100vh - 120px) with vertical scroll

FILTERS (Top Bar):
- Project filter: Multi-select dropdown (All | Core | Cloud | Dev | etc.)
- Phase filter: Multi-select dropdown (All | Phase 0 | Phase 1 | Dashboard 2.0)
- Priority filter: Multi-select dropdown (All | P0 | P1 | P2 | P3)
- Show dropdown: Radio select (All 46 | Active 12 | My Projects 5)
- Clear filters button: Reset all to "All"

SWIMLANE DESIGN:
HTML Structure:
<div class="kanban-board">
  <div class="swimlane" data-project-id="coditect-core">
    <div class="swimlane-header">
      <button class="collapse-toggle" aria-expanded="true">[-]</button>
      <span class="status-indicator status-green"></span>
      <span class="project-name">coditect-core</span>
      <span class="project-stats">78% • 530 tasks</span>
    </div>
    <div class="swimlane-columns">
      <div class="column" data-status="pending">
        <div class="task-card" draggable="true" data-task-id="123">
          <!-- Task card content -->
        </div>
        <!-- More cards -->
        <button class="add-task-btn">+ Add task</button>
      </div>
      <div class="column" data-status="in_progress">
        <!-- In Progress cards -->
      </div>
      <div class="column" data-status="complete">
        <!-- Done cards -->
      </div>
    </div>
  </div>
  <!-- More swimlanes -->
</div>

CSS:
.kanban-board {
  display: grid;
  grid-template-columns: 250px 1fr 1fr 1fr;
  gap: 16px;
  overflow: auto;
  max-height: calc(100vh - 120px);
}

.swimlane {
  display: contents; /* Children participate in grid */
}

.swimlane-header {
  position: sticky;
  left: 0;
  background: var(--gray-100);
  padding: 12px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}

.swimlane-columns {
  display: contents;
}

.column {
  background: var(--gray-50);
  border-radius: 4px;
  padding: 12px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.task-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  padding: 12px;
  cursor: grab;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.task-card:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}

.task-card.dragging {
  opacity: 0.6;
  transform: rotate(2deg);
  cursor: grabbing;
}

.column.drag-over {
  background: var(--primary-blue-light);
  border: 2px dashed var(--primary-blue);
}

TASK CARD DESIGN:
Content Elements:
1. Title: 14px, semibold, line-clamp: 2 (truncate after 2 lines)
2. Priority badge: P0/P1/P2/P3 with colored circle
3. Effort estimate: ⏱️ icon + hours (e.g., "2h")
4. Due date: 📅 icon + date (e.g., "Dec 5")
5. Assignee: 👤 icon + username or avatar
6. Dependency count: ⚠️ icon + count if >0 (e.g., "1 blocker")
7. Quick action (hover only): Dropdown menu (▼ icon)

Priority Colors:
- P0: Red circle (#DC3545)
- P1: Orange circle (#FF6B00)
- P2: Yellow circle (#FFB700)
- P3: Gray circle (#6C757D)

DRAG-DROP BEHAVIOR:
1. Dragstart: Add .dragging class, set dataTransfer
2. Dragover: Prevent default, add .drag-over class to column
3. Drop:
   - Get task ID from dataTransfer
   - Get new status from column data-status
   - Validate: Check if move allowed (e.g., can't move to Done if has blockers)
   - If valid: Update task status in database, move DOM element, show success toast
   - If invalid: Show error toast, return to original position
4. Dragend: Remove .dragging class

Validation Rules:
- Can't move to Done if task has active blockers
- Can't move to In Progress if dependencies not complete
- Warn if moving P0 task back to To Do (confirm dialog)

COLLAPSE/EXPAND:
- Click [-]: Collapse swimlane (hide columns, show task counts)
- Click [+]: Expand swimlane (show columns and cards)
- Animation: 300ms ease transition for height
- State: Save in localStorage (key: swimlane-collapsed-{projectId})

LAZY LOADING:
- Initial load: Show 10 projects (sorted by recent activity)
- Load more: Click "[+] Show 36 more projects..." button
- Infinite scroll: Load 10 more when scrolled to bottom
- Performance: Virtualize cards (render only visible cards)

CARD CLICK:
- Click card: Open task detail modal (see Section 10)
- Right-click: Show context menu (Edit, Delete, Copy link)

ADD TASK:
- Click "+ Add task": Show inline form in column
- Form fields: Title (required), Priority, Effort, Due date, Assignee
- Submit: Create task with status = column status, add to DOM
- Cancel: Hide form

ACCESSIBILITY:
- Keyboard: Tab to navigate cards, Enter to open detail modal
- Drag-drop: Alternative keyboard controls (Space to grab, Arrow keys to move, Space to drop)
- ARIA: aria-label for columns ("To Do column for coditect-core")
- Focus: Visible focus indicator on all cards

RESPONSIVE:
Desktop (≥1024px): 3 columns + project name
Tablet (768px-1023px): 2 columns (To Do+In Progress | Done), collapse project name to icon
Mobile (<768px): 1 column, tabs for To Do/In Progress/Done, vertical project list

DATA SOURCE:
- Fetch from data/tasks-with-deps.json
- Group by project_id
- Sort cards within column by: Priority (P0 first) → Due date (ascending)
- Filter based on active filters

PERFORMANCE:
- Virtual scrolling: Render only visible swimlanes (10 at a time)
- Card limit: Show max 20 cards per column, "[Load more...]" button for rest
- Debounce drag-drop: Wait 300ms before saving to database
- Optimistic updates: Update UI immediately, rollback if save fails