feat(board): show upcoming deadline tasks

2026-08-13 16:54:13 -04:00
parent 48a749fde3
commit 94f85731ef
6 changed files with 256 additions and 14 deletions
@@ -474,6 +474,99 @@ body::before {
 }


+/* ============================================================
+   UPCOMING TASKS
+   ============================================================ */
+
+.upcoming-tasks {
+    margin-bottom: 20px;
+    padding: 14px;
+    border: 1px solid var(--color-border);
+    border-radius: 12px;
+    background: var(--color-surface);
+}
+
+.upcoming-tasks-header {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 12px;
+    margin-bottom: 12px;
+}
+
+.upcoming-tasks-header h2 {
+    margin: 0;
+    font-size: 12px;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+}
+
+.upcoming-tasks-header span {
+    color: var(--color-text-secondary);
+    font-size: 11px;
+}
+
+.upcoming-task-list {
+    display: flex;
+    gap: 10px;
+    overflow-x: auto;
+    padding-bottom: 2px;
+}
+
+.upcoming-task {
+    display: grid;
+    flex: 0 0 210px;
+    gap: 6px;
+    padding: 10px;
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    background: var(--color-elevated);
+    cursor: pointer;
+    transition: border-color 0.15s, transform 0.15s;
+}
+
+.upcoming-task:hover {
+    border-color: var(--color-border-hover);
+    transform: translateY(-1px);
+}
+
+.upcoming-task-title {
+    overflow: hidden;
+    color: var(--color-text-primary);
+    font-size: 13px;
+    font-weight: 500;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.upcoming-task-meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    min-width: 0;
+    color: var(--color-text-secondary);
+    font-size: 11px;
+}
+
+.upcoming-task-status {
+    color: var(--color-status-pending);
+}
+
+.upcoming-task-status--active { color: var(--color-status-active); }
+.upcoming-task-status--paused { color: var(--color-status-paused); }
+.upcoming-task-status--completed { color: var(--color-status-completed); }
+.upcoming-task-status--abandoned { color: var(--color-status-abandoned); }
+
+.task-countdown {
+    color: var(--color-text-secondary);
+    font-size: 11px;
+}
+
+.task-countdown--overdue {
+    color: var(--color-status-abandoned);
+}
+
 /* ============================================================
   KANBAN LAYOUT
   ============================================================ */