Kanban Phase 4 - Advanced Customization and Collaboration

Advanced features based on vibe-kanban, adapted for Viben Design System

---

Overview

Attribute	Value
Module ID	M-KANBAN-PHASE4
Dependencies	kanban-features (Phase 1-3)
Priority	P1
Status	📝 Specification

---

Feature List

P0 - Board Customization

#	Feature	Description	vibe-kanban Reference
F24	Board Display Settings	Column reordering, colors, visibility	KanbanDisplaySettingsContainer
F25	Column Configuration Panel	Column name editing, color selection, WIP limits	ColumnSettings
F26	User Preference Persistence	Save collapsed state, sort preferences	localStorage/preferences

P1 - Collaboration Features

#	Feature	Description	vibe-kanban Reference
F27	Comment System	Rich text comments, emoji reactions	IssueCommentsSection
F28	Activity Timeline	Task change history records	ActivityFeed
F29	Notification System	Comments, status change notifications	NotificationTypes

P2 - Enhanced Features

#	Feature	Description	vibe-kanban Reference
F30	Advanced List View	Collapsible groups, dedicated drag handles	IssueListView
F31	View Navigation Tabs	Dynamic tabs, URL deep linking	ViewNavTabs
F32	Drag Enhancement	Portal preview, multi-select drag	DnD enhancements
F33	Board Templates	Preset templates, quick creation	BoardTemplates

---

F24: Board Display Settings

Feature Description

Provide visual interface to configure board column display and order.

Component Design

BoardSettingsDialog - Board settings dialog:

interface BoardSettingsDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  columns: ColumnConfig[];
  onColumnsChange: (columns: ColumnConfig[]) => void;
}

interface ColumnConfig {
  id: string;
  name: string;
  color: string;
  visible: boolean;
  wipLimit?: number;
  order: number;
}

Interaction Design

• Drag to reorder columns
• Click color block to select color
• Toggle visibility switch
• Edit column name (double-click or pencil icon)

---

F25: Column Configuration Panel

Component Design

ColumnSettingsPanel:

interface ColumnSettingsPanelProps {
  column: ColumnConfig;
  onChange: (column: ColumnConfig) => void;
  onDelete?: () => void;
  canDelete?: boolean;
}

// Color presets
const COLUMN_COLORS = [
  { name: "Gray", value: "hsl(var(--muted))" },
  { name: "Blue", value: "hsl(var(--primary))" },
  { name: "Yellow", value: "hsl(var(--warning))" },
  { name: "Green", value: "hsl(var(--success))" },
  { name: "Red", value: "hsl(var(--destructive))" },
  { name: "Purple", value: "hsl(280 60% 50%)" },
  { name: "Orange", value: "hsl(25 90% 50%)" },
  { name: "Cyan", value: "hsl(180 60% 45%)" },
];

---

F26: User Preference Persistence

Hook Design

useKanbanPreferences:

interface KanbanPreferences {
  // View preferences
  viewMode: ViewMode;
  sortMode: SortMode;
  sortDirection: SortDirection;

  // Column state
  collapsedColumns: string[];
  columnOrder: string[];
  hiddenColumns: string[];

  // Panel state
  detailPanelWidth: number;
  showStats: boolean;

  // Filters
  savedFilters: KanbanFilter[];
}

interface UseKanbanPreferencesOptions {
  projectId: string;
  storageKey?: string;
}

function useKanbanPreferences(options: UseKanbanPreferencesOptions): {
  preferences: KanbanPreferences;
  updatePreference: <K extends keyof KanbanPreferences>(
    key: K,
    value: KanbanPreferences[K]
  ) => void;
  resetPreferences: () => void;
};

---

F27: Comment System

Feature Description

• Rich text comment input
• Emoji reactions (thumbs up, heart, celebration, etc.)
• Comment edit/delete
• Relative time display

Component Design

CommentList + CommentItem + CommentInput:

interface Comment {
  id: string;
  content: string;
  author: {
    id: string;
    name: string;
    avatar?: string;
  };
  createdAt: string;
  updatedAt?: string;
  reactions: CommentReaction[];
}

interface CommentReaction {
  emoji: string;
  users: { id: string; name: string }[];
  count: number;
}

interface CommentListProps {
  taskId: string;
  comments: Comment[];
  onAddComment: (content: string) => void;
  onEditComment: (id: string, content: string) => void;
  onDeleteComment: (id: string) => void;
  onToggleReaction: (commentId: string, emoji: string) => void;
}

Emoji Reaction Presets

const REACTION_EMOJIS = ["👍", "👎", "❤️", "🎉", "😄", "🤔", "👀", "🚀"];

---

F28: Activity Timeline

Feature Description

Record all change history for tasks.

Component Design

ActivityFeed:

interface ActivityEvent {
  id: string;
  type: ActivityType;
  actor: { id: string; name: string; avatar?: string };
  timestamp: string;
  data: Record<string, unknown>;
}

type ActivityType =
  | "created"
  | "status_changed"
  | "priority_changed"
  | "assignee_changed"
  | "title_changed"
  | "description_changed"
  | "tag_added"
  | "tag_removed"
  | "due_date_changed"
  | "comment_added";

interface ActivityFeedProps {
  events: ActivityEvent[];
  className?: string;
}

---

F30: Advanced List View

Feature Description

• Group by status, collapsible
• Dedicated drag handles
• Relative time format

Component Design

GroupedListView:

interface ListGroup {
  id: string;
  name: string;
  color: string;
  count: number;
  collapsed?: boolean;
}

interface GroupedListViewProps<T> {
  items: T[];
  groups: ListGroup[];
  groupBy: (item: T) => string;
  collapsedGroups: Set<string>;
  onToggleGroup: (groupId: string) => void;
  renderItem: (item: T) => React.ReactNode;
  onDragEnd: (event: DragEndEvent) => void;
}

---

F32: Drag Enhancement

Feature Description

• Portal drag preview (prevent clipping)
• Multi-select drag support
• Animation optimization

Hook Design

useDragPreview:

interface UseDragPreviewOptions {
  enabled?: boolean;
  renderPreview: (ids: string[]) => React.ReactNode;
}

function useDragPreview(options: UseDragPreviewOptions): {
  DragOverlay: React.FC;
  isDragging: boolean;
  draggedIds: string[];
};

---

Implementation Order

Phase 4A (Parallel)

Task ID	Feature	Dependencies
T24	Board Display Settings	None
T25	Column Configuration Panel	None
T26	User Preference Persistence	None
T27	Comment System Types	None

Phase 4B (Parallel, depends on 4A)

Task ID	Feature	Dependencies
T28	Comment Component Implementation	T27
T29	Activity Timeline	None
T30	Advanced List View	None
T31	Drag Enhancement	None

Phase 4C (depends on 4B)

Task ID	Feature	Dependencies
T32	Desktop Integration	T24-T31

---

Acceptance Criteria

F24: Board Display Settings

• Can drag to reorder columns
• Color picker works correctly
• Visibility toggle takes effect
• Settings persist after refresh

F25: Column Configuration Panel

• Double-click to edit column name
• Color preset selection
• WIP limit configurable
• Warning when deleting column with tasks

F26: User Preference Persistence

• Collapsed state persists
• Sort preferences persist
• Persists across sessions

F27: Comment System

• Can add comments
• Can add emoji reactions
• Can edit/delete own comments
• Shows relative time

---

Last Updated: 2026-02-07 Version: 1.0.0 Status: 📝 Specification