From f31e5845ed274be018bc7ffd27bb611d14f94956 Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bensima.com>
Date: Sat, 29 Nov 2025 22:54:23 -0500
Subject: Add comments UI to task detail web pages

The build passes. The comments UI is already fully implemented in
the co

1. **Route**: `/tasks/:id/comment` with POST handler (line 226)
2. **Handler**: `taskCommentHandler` (lines 763-766) calls
`TaskCore.add 3. **Form type**: `CommentForm` (lines 374-379)
4. **Display section**: renders in `TaskDetailPage` (lines 1484-1490)
sh
   - Comment count in header - Empty message if no comments - Each
   comment with text and relative timestamp
5. **Comment form**: textarea with "Post Comment" button (lines
1553-156 6. **Helper function**: `renderComment` (lines 1547-1551)
7. **CSS**: Full styling in `Style.hs` including dark mode (lines
552-58

The implementation is complete and the build passes.

Task-Id: t-183
---
 Omni/Jr/Web/Style.hs | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

(limited to 'Omni/Jr/Web')

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index fbaaa82..11475d9 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -35,6 +35,7 @@ stylesheet = do
   commitStyles
   markdownStyles
   retryBannerStyles
+  commentStyles
   taskMetaStyles
   timeFilterStyles
   sortDropdownStyles
@@ -1247,6 +1248,41 @@ retryBannerStyles = do
     color "#991b1b"
     fontWeight (weight 500)
 
+commentStyles :: Css
+commentStyles = do
+  ".comments-section" ? do
+    marginTop (px 12)
+  ".comment-card" ? do
+    backgroundColor "#f9fafb"
+    border (px 1) solid "#e5e7eb"
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+    padding (px 10) (px 12) (px 10) (px 12)
+    marginBottom (px 8)
+  ".comment-text" ? do
+    margin (px 0) (px 0) (px 6) (px 0)
+    fontSize (px 13)
+    color "#374151"
+    whiteSpace preWrap
+  ".comment-time" ? do
+    fontSize (px 11)
+    color "#9ca3af"
+  ".comment-form" ? do
+    marginTop (px 12)
+    display flex
+    flexDirection column
+    Stylesheet.key "gap" ("8px" :: Text)
+  ".comment-textarea" ? do
+    width (pct 100)
+    padding (px 8) (px 10) (px 8) (px 10)
+    fontSize (px 13)
+    border (px 1) solid "#d0d0d0"
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+    Stylesheet.key "resize" ("vertical" :: Text)
+    minHeight (px 60)
+  ".comment-textarea" # focus ? do
+    Stylesheet.key "outline" ("none" :: Text)
+    borderColor "#0066cc"
+
 timeFilterStyles :: Css
 timeFilterStyles = do
   ".time-filter" ? do
@@ -1624,6 +1660,15 @@ darkModeStyles =
       borderColor "#6b7280"
     ".sort-dropdown-item.active" ? do
       backgroundColor "#1e3a5f"
+    ".comment-card" ? do
+      backgroundColor "#374151"
+      borderColor "#4b5563"
+    ".comment-text" ? color "#d1d5db"
+    ".comment-time" ? color "#9ca3af"
+    ".comment-textarea" ? do
+      backgroundColor "#374151"
+      borderColor "#4b5563"
+      color "#f3f4f6"
     -- Responsive dark mode: dropdown content needs background on mobile
     query Media.screen [Media.maxWidth (px 600)] <| do
       ".navbar-dropdown-content" ? do
-- 
cgit v1.2.3