← Back to task

Commit 897fa189

commit 897fa1891c7fbb09b82a7d3e5f3b2a5acd863341
Author: Ben Sima <ben@bensima.com>
Date:   Thu Nov 27 10:13:19 2025

    Make task cards fully clickable
    
    The build and tests pass. The task is complete:
    
    1. Changed `renderTaskCard` to wrap the entire card in an `<a>`
    element 2. Changed the inner task-id from an `<a>` to a `<span>`
    since the whole 3. Added CSS styles for `.task-card-link` to ensure
    proper display (bloc
    
    Task-Id: t-149.4

diff --git a/Omni/Jr/Web.hs b/Omni/Jr/Web.hs
index 6d2c1634..759f42e2 100644
--- a/Omni/Jr/Web.hs
+++ b/Omni/Jr/Web.hs
@@ -136,16 +136,16 @@ statusBadge status =
 
 renderTaskCard :: (Monad m) => TaskCore.Task -> Lucid.HtmlT m ()
 renderTaskCard t =
-  Lucid.div_ [Lucid.class_ "task-card"] <| do
-    Lucid.div_ [Lucid.class_ "task-header"] <| do
-      Lucid.a_
-        [ Lucid.class_ "task-id",
-          Lucid.href_ ("/tasks/" <> TaskCore.taskId t)
-        ]
-        (Lucid.toHtml (TaskCore.taskId t))
-      statusBadge (TaskCore.taskStatus t)
-      Lucid.span_ [Lucid.class_ "priority"] (Lucid.toHtml (tshow (TaskCore.taskPriority t)))
-    Lucid.p_ [Lucid.class_ "task-title"] (Lucid.toHtml (TaskCore.taskTitle t))
+  Lucid.a_
+    [ Lucid.class_ "task-card task-card-link",
+      Lucid.href_ ("/tasks/" <> TaskCore.taskId t)
+    ]
+    <| do
+      Lucid.div_ [Lucid.class_ "task-header"] <| do
+        Lucid.span_ [Lucid.class_ "task-id"] (Lucid.toHtml (TaskCore.taskId t))
+        statusBadge (TaskCore.taskStatus t)
+        Lucid.span_ [Lucid.class_ "priority"] (Lucid.toHtml (tshow (TaskCore.taskPriority t)))
+      Lucid.p_ [Lucid.class_ "task-title"] (Lucid.toHtml (TaskCore.taskTitle t))
 
 instance Lucid.ToHtml HomePage where
   toHtmlRaw = Lucid.toHtml
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 5aa9b623..5d95e423 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -242,6 +242,12 @@ cardStyles = do
     transition "box-shadow" (ms 150) ease (sec 0)
   ".task-card" # hover ? do
     boxShadow (NE.singleton (bsColor (rgba 0 0 0 0.15) (shadow (px 0) (px 4))))
+  ".task-card-link" ? do
+    display block
+    textDecoration none
+    color inherit
+    cursor pointer
+  ".task-card-link" # hover ? textDecoration none
   ".task-header" ? do
     display flex
     flexWrap Flexbox.wrap