From a03203ec4ef4048ff94e3ddb02ff7f124a762030 Mon Sep 17 00:00:00 2001
From: Claudomator Agent <agent@claudomator.local>
Date: Mon, 6 Jul 2026 04:49:35 +0000
Subject: feat(web): add Tasks tab nav entry point and CSS column layout

- Add <button data-tab="tasks"> to the nav bar (between Stories and Stats)
- Add <div data-panel="tasks" hidden><div class="tasks-board"></div></div>
  to main as the panel container for the Tasks board
- Add .tasks-board, .tasks-column, .tasks-column-header, .tasks-column-count,
  .tasks-column-list CSS rules (mirrors .stories-* layout; 300px columns to
  accommodate task card content)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/style.css | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

(limited to 'web/style.css')

diff --git a/web/style.css b/web/style.css
index a5fefb7..68b6f95 100644
--- a/web/style.css
+++ b/web/style.css
@@ -2164,6 +2164,58 @@ dialog label select:focus {
   overflow-y: auto;
 }
 
+/* Tasks board — mirrors stories-board layout, wider columns for task card content */
+.tasks-board {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  overflow-x: auto;
+  padding-bottom: 0.5rem;
+}
+
+.tasks-column {
+  flex: 0 0 300px;
+  width: 300px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 0.5rem;
+  padding: 0.625rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.tasks-column-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  color: var(--text-muted);
+  padding-bottom: 0.4rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.tasks-column-count {
+  font-weight: 700;
+  color: var(--text);
+  background: var(--surface);
+  border-radius: 999px;
+  padding: 0 0.45em;
+  font-size: 0.7rem;
+}
+
+.tasks-column-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 40px;
+  max-height: 60vh;
+  overflow-y: auto;
+}
+
 .story-card {
   cursor: grab;
 }
-- 
cgit v1.2.3