ObsiViewer/docs/KANBAN/KANBAN_BOARD_REFACTORING.md

Kanban Board Refactoring - FuseBase Style

Complete Implementation Guide

📊 Status

✅ Completed Files (11 files)

1. Types & Models

   • src/app/blocks/kanban/models/kanban.types.ts ✅

2. Services (7 services)

   • src/app/blocks/kanban/services/kanban-board.service.ts ✅
   • src/app/blocks/kanban/services/kanban-task.service.ts ✅
   • src/app/blocks/kanban/services/labels.service.ts ✅
   • src/app/blocks/kanban/services/attachments.service.ts ✅
   • src/app/blocks/kanban/services/time-tracking.service.ts ✅
   • src/app/blocks/kanban/services/date.service.ts ✅

3. Main Board Component

   • src/app/blocks/kanban/kanban-board.component.ts ✅
   • src/app/blocks/kanban/kanban-board.component.html ✅
   • src/app/blocks/kanban/kanban-board.component.css ✅

4. Column Component

   • src/app/blocks/kanban/components/kanban-column/kanban-column.component.ts ✅
   • src/app/blocks/kanban/components/kanban-column/kanban-column.component.html ✅
   • src/app/blocks/kanban/components/kanban-column/kanban-column.component.css ✅

---

🚧 Remaining Files to Create (25+ files)

Phase 1: Core Components (5 components)

1. Task Card Component

Files:

• src/app/blocks/kanban/components/kanban-task-card/kanban-task-card.component.ts
• src/app/blocks/kanban/components/kanban-task-card/kanban-task-card.component.html
• src/app/blocks/kanban/components/kanban-task-card/kanban-task-card.component.css

Features:

• Checkbox (completion toggle)
• Task title
• Labels display (pills)
• Due date with icon
• Estimated time icon + text
• Actual time icon + text
• Attachments count/thumbnail
• Selected state (blue border)
• Hover effects

2. Task Detail Panel

Files:

• src/app/blocks/kanban/components/task-detail-panel/task-detail-panel.component.ts
• src/app/blocks/kanban/components/task-detail-panel/task-detail-panel.component.html
• src/app/blocks/kanban/components/task-detail-panel/task-detail-panel.component.css

Features:

• Header with navigation (back/forward)
• Mark Complete button
• Close button
• Editable title
• Description editor (multiline)
• Created by section
• Action buttons: Assignee, Labels, Date, Attach, Estimated time, Time
• Comments section with avatar
• Attachment preview grid
• Slide-in animation from right

3. Column Context Menu

Files:

• src/app/blocks/kanban/components/column-context-menu/column-context-menu.component.ts
• src/app/blocks/kanban/components/column-context-menu/column-context-menu.component.html
• src/app/blocks/kanban/components/column-context-menu/column-context-menu.component.css

Menu Options:

• ✏️ Rename
• ☑️ Complete all
• 📋 Convert to Task list
• 📄 Duplicate
• ⬅️ Add column left
• ➡️ Add column right
• 🗑️ Delete

4. Task Context Menu

Files:

• src/app/blocks/kanban/components/task-context-menu/task-context-menu.component.ts
• src/app/blocks/kanban/components/task-context-menu/task-context-menu.component.html
• src/app/blocks/kanban/components/task-context-menu/task-context-menu.component.css

Menu Options:

• 📋 Copy task
• 🔗 Copy link to task
• 📄 Duplicate task
• ➕ Add new task
• 🗑️ Delete task

---

Phase 2: Dialog Components (5 dialogs)

5. Labels Dialog

Files:

• src/app/blocks/kanban/components/labels-dialog/labels-dialog.component.ts
• src/app/blocks/kanban/components/labels-dialog/labels-dialog.component.html
• src/app/blocks/kanban/components/labels-dialog/labels-dialog.component.css

Features:

• Input field "Type label name"
• Create on Enter
• Label pills with X button
• Color-coded (from LABEL_COLORS)
• Overlay backdrop
• Click outside to close

6. Date Picker Dialog

Files:

• src/app/blocks/kanban/components/date-picker-dialog/date-picker-dialog.component.ts
• src/app/blocks/kanban/components/date-picker-dialog/date-picker-dialog.component.html
• src/app/blocks/kanban/components/date-picker-dialog/date-picker-dialog.component.css

Features:

• Calendar grid (month view)
• Time picker (hours:minutes wheel)
• "Show time" toggle
• Alert dropdown (None, 5min, 10min, 15min, 30min, 1hour, 1day)
• Cancel / Done buttons
• Animated time wheel (FuseBase style)

7. Estimated Time Dialog

Files:

• src/app/blocks/kanban/components/estimated-time-dialog/estimated-time-dialog.component.ts
• src/app/blocks/kanban/components/estimated-time-dialog/estimated-time-dialog.component.html
• src/app/blocks/kanban/components/estimated-time-dialog/estimated-time-dialog.component.css

Features:

• 3 wheels: days (d), hours (h), minutes (m)
• Scroll picker style
• Cancel / Save buttons
• Blue highlight on selected value

8. Actual Time Dialog

Files:

• src/app/blocks/kanban/components/actual-time-dialog/actual-time-dialog.component.ts
• src/app/blocks/kanban/components/actual-time-dialog/actual-time-dialog.component.html
• src/app/blocks/kanban/components/actual-time-dialog/actual-time-dialog.component.css

Features:

• 3 wheels: days (d), hours (h), minutes (m)
• Work type section (chips)
• Editable work type tags (development, design, etc.)
• Work description textarea
• Billable toggle
• Cancel / Save buttons

9. Assignee Dialog

Files:

• src/app/blocks/kanban/components/assignee-dialog/assignee-dialog.component.ts
• src/app/blocks/kanban/components/assignee-dialog/assignee-dialog.component.html
• src/app/blocks/kanban/components/assignee-dialog/assignee-dialog.component.css

Features:

• User search input
• User list with avatars
• Selected state
• "Unassign" option

---

Phase 3: Utility Components (3 components)

10. Time Wheel Picker

Files:

• src/app/blocks/kanban/components/time-wheel-picker/time-wheel-picker.component.ts
• src/app/blocks/kanban/components/time-wheel-picker/time-wheel-picker.component.html
• src/app/blocks/kanban/components/time-wheel-picker/time-wheel-picker.component.css

Features:

• Reusable scroll wheel
• Configurable range (0-23 for hours, 0-59 for minutes, etc.)
• Center highlight
• Smooth scrolling
• Snap to value

11. Calendar Grid

Files:

• src/app/blocks/kanban/components/calendar-grid/calendar-grid.component.ts
• src/app/blocks/kanban/components/calendar-grid/calendar-grid.component.html
• src/app/blocks/kanban/components/calendar-grid/calendar-grid.component.css

Features:

• Month/year navigation
• 7-column grid (S M T W T F S)
• Selected date highlight (blue circle)
• Today indicator
• Previous/next month days (grayed out)

12. Attachment Preview

Files:

• src/app/blocks/kanban/components/attachment-preview/attachment-preview.component.ts
• src/app/blocks/kanban/components/attachment-preview/attachment-preview.component.html
• src/app/blocks/kanban/components/attachment-preview/attachment-preview.component.css

Features:

• Image thumbnail
• PDF icon with filename
• File size display
• Remove button (X)
• Download button
• Grid layout

---

🔧 Integration with BlockHostComponent

File to Modify

src/app/editor/components/block/block-host.component.ts

Changes Required

1. Import Kanban Component

import { KanbanBoardComponent } from '../../../blocks/kanban/kanban-board.component';

2. Add to Switch Case

case 'kanban':
  this.dynamicComponentRef = viewContainerRef.createComponent(KanbanBoardComponent);
  this.dynamicComponentRef.setInput('blockId', this.block.id);
  if (this.block.data) {
    this.dynamicComponentRef.setInput('initialData', JSON.parse(this.block.data));
  }
  break;

3. Update onMenuAction Method Add case for 'kanban' block type to handle save/export.

---

📐 Architecture Summary

Services Layer

KanbanBoardService
  ├─ Board state management
  ├─ Column operations
  └─ Serialization

KanbanTaskService
  ├─ Task CRUD
  ├─ Selection state
  └─ Task operations

LabelsService
  ├─ Label creation
  └─ Color assignment

AttachmentsService
  ├─ File upload
  ├─ Thumbnail generation
  └─ File type detection

TimeTrackingService
  ├─ Time formatting
  ├─ Time calculations
  └─ Work type management

DateService
  ├─ Date formatting
  ├─ Relative dates
  └─ Alert scheduling

Component Hierarchy

KanbanBoardComponent (Main)
  ├─ KanbanColumnComponent (Multiple)
  │   ├─ KanbanTaskCardComponent (Multiple)
  │   └─ ColumnContextMenuComponent
  │
  ├─ TaskDetailPanelComponent
  │   ├─ LabelsDialog
  │   ├─ DatePickerDialog
  │   ├─ EstimatedTimeDialog
  │   ├─ ActualTimeDialog
  │   ├─ AssigneeDialog
  │   └─ AttachmentPreview
  │
  └─ TaskContextMenuComponent

Data Flow

User Action
  ↓
Component Event
  ↓
Service Method
  ↓
Signal Update
  ↓
UI Re-render (OnPush)

---

🎨 Styling Guide

Color Palette (Dark Theme)

Background: #2b2b2b
Column Header: #404040
Column Body: #3a3a3a
Card Background: #353535
Border: #555555
Text Primary: #ffffff
Text Secondary: #a0a0a0
Accent Blue: #4a9eff
Hover: #4a4a4a

Color Palette (Light Theme)

Background: #f5f5f5
Column Header: #e0e0e0
Column Body: #f9f9f9
Card Background: #ffffff
Border: #d0d0d0
Text Primary: #1a1a1a
Text Secondary: #666666
Accent Blue: #2563eb
Hover: #eeeeee

Key Measurements

• Column width: 320px (w-80)
• Card min-height: 60px
• Gap between cards: 8px (space-y-2)
• Border radius: 12px (rounded-xl)
• Task card padding: 12px (p-3)

---

✅ Implementation Checklist

Phase 1: Core Components

• Types & Interfaces
• All 7 Services
• Main Board Component
• Column Component
• Task Card Component
• Task Detail Panel
• Column Context Menu
• Task Context Menu

Phase 2: Dialogs

• Labels Dialog
• Date Picker Dialog
• Estimated Time Dialog
• Actual Time Dialog
• Assignee Dialog

Phase 3: Utilities

• Time Wheel Picker
• Calendar Grid
• Attachment Preview

Phase 4: Integration

• Integrate with BlockHostComponent
• Add block type 'kanban' to menu
• Persistence (save/load from note frontmatter)

Phase 5: Testing

• Create new kanban block
• Add columns
• Add tasks
• Test drag & drop
• Test all dialogs
• Test context menus
• Test time tracking
• Test attachments

---

🚀 Next Steps

1. Create remaining 25+ component files (Task Card, Detail Panel, Dialogs, Menus)
2. Implement drag & drop (already scaffolded with Angular CDK)
3. Add persistence layer (save board state to block.data)
4. Test all interactions following the 10 images provided
5. Polish animations & transitions
6. Add keyboard shortcuts
7. Mobile responsiveness

---

📦 Dependencies

Already available in project:

• Angular 20 ✅
• Tailwind CSS 3.4 ✅
• Angular CDK Drag-Drop ✅
• Angular CDK Overlay ✅
• Angular Signals ✅

---

🎯 Result

A fully functional Kanban board identical to FuseBase with:

• ✅ Columns (add, rename, delete, reorder)
• ✅ Tasks (create, edit, complete, duplicate, delete)
• ✅ Labels (create, assign, colored pills)
• ✅ Due dates (calendar + time picker + alerts)
• ✅ Estimated time (d/h/m picker)
• ✅ Actual time tracking (with work types)
• ✅ Attachments (upload, preview, thumbnails)
• ✅ Comments
• ✅ Drag & drop (tasks + columns)
• ✅ Detail panel (slide-in from right)
• ✅ Context menus (column + task)
• ✅ Smooth animations (FuseBase style)

Total Files: 40+ files Total Lines: ~6000+ lines Effort: 2-3 days for full implementation