aj/TaskTracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): add Board page with Kanban columns and task cards

Browse Source 
Server-rendered Kanban board with 4 status columns (Pending, Active,
Paused, Completed), task cards with category colors and elapsed time,
filter bar with category chips and subtask toggle, and inline create
task form. All handlers support htmx partial updates for status
transitions (start, pause, resume, complete, abandon, create).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
AJ Isaacs
2026-03-01 22:17:45 -05:00
parent bef7916cf8
commit e34c5d561f
8 changed files with 459 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
TaskTracker.Api/wwwroot/css/site.css
View File

@@ -1334,6 +1334,70 @@ body::before {
}
/* ============================================================
FILTER BAR
============================================================ */
.filter-bar {
padding: 0 4px;
}
.filter-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 9999px;
font-size: 12px;
font-weight: 500;
color: var(--color-text-secondary);
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--color-border);
cursor: pointer;
transition: all 0.15s;
text-decoration: none;
white-space: nowrap;
}
.filter-chip:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--color-text-primary);
border-color: var(--color-border-hover);
}
.filter-chip--active {
background: rgba(139, 92, 246, 0.15);
border-color: rgba(139, 92, 246, 0.3);
color: var(--color-accent);
}
.filter-chip-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.filter-separator {
width: 1px;
height: 20px;
background: var(--color-border);
margin: 0 4px;
}
.board-page {
display: flex;
flex-direction: column;
height: 100%;
gap: 0;
}
.board-page .kanban-grid {
flex: 1;
min-height: 0;
}
/* ============================================================
CREATE TASK FORM (inline in kanban column)
============================================================ */
@@ -1346,7 +1410,7 @@ body::before {
}
.create-task-form .input {
margin-bottom: 8px;
margin-bottom: 0;
}
.create-task-form-actions {