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**
```typescript
import { KanbanBoardComponent } from '../../../blocks/kanban/kanban-board.component';
```

2. **Add to Switch Case**
```typescript
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)
```css
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)
```css
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
- [x] Types & Interfaces
- [x] All 7 Services
- [x] Main Board Component
- [x] 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