Add comments UI to task detail web pages

Task comments exist in the data model (t-167 Done) but are not displayed or editable in the web UI.

Current State

• Task type has taskComments :: [Comment] field
• Comment type: { commentText :: Text, commentCreatedAt :: UTCTime }
• CLI has jr task comment <id> 'message' command
• Web UI shows nothing

Design

Add a Comments section below Description on /tasks/<id> pages:

Comments (3)

┌─────────────────────────────────────────┐
│ Fixed the merge conflict by rebasing    │
│ 2 hours ago                             │
└─────────────────────────────────────────┘

┌─────────────────────────────────────────┐
│ Note: use the new API v2 endpoint       │
│ yesterday                               │
└─────────────────────────────────────────┘

[textarea: Add a comment...]
[Post Comment]

Implementation

1. In TaskDetailPage ToHtml, add comments section:

Lucid.div_ [Lucid.class_ "comments-section"] <| do
  Lucid.h3_ ("Comments (" <> tshow (length comments) <> ")")
  if null comments
    then Lucid.p_ [Lucid.class_ "empty-msg"] "No comments yet."
    else traverse_ (renderComment now) comments
  commentForm tid

2. Add renderComment helper:

renderComment :: UTCTime -> TaskCore.Comment -> Lucid.HtmlT m ()
renderComment now c =
  Lucid.div_ [Lucid.class_ "comment-card"] <| do
    Lucid.p_ [Lucid.class_ "comment-text"] (Lucid.toHtml (TaskCore.commentText c))
    Lucid.span_ [Lucid.class_ "comment-time"] (renderRelativeTimestamp now (TaskCore.commentCreatedAt c))

3. Add comment form:

commentForm :: Text -> Lucid.HtmlT m ()
commentForm tid =
  Lucid.form_
    [ Lucid.method_ "POST",
      Lucid.action_ ("/tasks/" <> tid <> "/comment"),
      Lucid.class_ "comment-form"
    ]
    <| do
      Lucid.textarea_
        [ Lucid.name_ "comment",
          Lucid.placeholder_ "Add a comment...",
          Lucid.rows_ "3"
        ]
        ""
      Lucid.button_ [Lucid.type_ "submit", Lucid.class_ "btn btn-primary"] "Post Comment"

4. Add route and handler:

:<|> "tasks" :> Capture "id" Text :> "comment" :> ReqBody '[FormUrlEncoded] CommentForm :> PostRedirect

commentHandler :: Text -> CommentForm -> Handler (Headers '[Header "Location" Text] NoContent)
commentHandler tid (CommentForm text) = do
  liftIO (TaskCore.addComment tid text)
  pure (addHeader ("/tasks/" <> tid) NoContent)

5. Add CSS for .comment-card, .comment-text, .comment-time, .comment-form

Files: Omni/Jr/Web.hs, Omni/Jr/Web/Style.hs