commit a449eaea19d19581c3a1898c8f142bd3868f4a57
Author: Ben Sima <ben@bensima.com>
Date: Sat Nov 29 18:32:27 2025
Compact task detail metadata into inline Gerrit-style layout
The implementation is complete. Here's a summary of changes:
**Omni/Jr/Web.hs:** - Added `metaSep` helper function for the `·`
separator - Added top-level `priorityDesc` function mapping priority
levels to hum - Replaced the vertical `detail-row` layout with compact
inline `task-me
- Primary line: ID · Type · Status · Priority · Namespace
(optional) - Secondary line: Parent (optional) · Created · Updated
- Removed the shadowing local `priorityDesc` from the `where` clause
**Omni/Jr/Web/Style.hs:** - Added `taskMetaStyles` function with
styles for `.task-meta`, `.task-m - Added dark mode overrides for the
new task-meta classes - Registered `taskMetaStyles` in the stylesheet
Task-Id: t-171
diff --git a/Omni/Jr/Web.hs b/Omni/Jr/Web.hs
index f65f0015..a479bf96 100644
--- a/Omni/Jr/Web.hs
+++ b/Omni/Jr/Web.hs
@@ -71,6 +71,16 @@ renderRelativeTimestamp now timestamp =
]
(Lucid.toHtml (formatRelativeTime now timestamp))
+metaSep :: (Monad m) => Lucid.HtmlT m ()
+metaSep = Lucid.span_ [Lucid.class_ "meta-sep"] "·"
+
+priorityDesc :: TaskCore.Priority -> Text
+priorityDesc TaskCore.P0 = "Critical"
+priorityDesc TaskCore.P1 = "High"
+priorityDesc TaskCore.P2 = "Normal"
+priorityDesc TaskCore.P3 = "Low"
+priorityDesc TaskCore.P4 = "Defer"
+
data TaskFilters = TaskFilters
{ filterStatus :: Maybe TaskCore.Status,
filterPriority :: Maybe TaskCore.Priority,
@@ -994,45 +1004,35 @@ instance Lucid.ToHtml TaskDetailPage where
renderRetryContextBanner (TaskCore.taskId task) maybeRetry
Lucid.div_ [Lucid.class_ "task-detail"] <| do
- Lucid.div_ [Lucid.class_ "detail-row"] <| do
- Lucid.span_ [Lucid.class_ "detail-label"] "ID:"
- Lucid.code_ [Lucid.class_ "detail-value"] (Lucid.toHtml (TaskCore.taskId task))
-
- Lucid.div_ [Lucid.class_ "detail-row"] <| do
- Lucid.span_ [Lucid.class_ "detail-label"] "Type:"
- Lucid.span_ [Lucid.class_ "detail-value"] (Lucid.toHtml (tshow (TaskCore.taskType task)))
-
- Lucid.div_ [Lucid.class_ "detail-row"] <| do
- Lucid.span_ [Lucid.class_ "detail-label"] "Status:"
- Lucid.span_ [Lucid.class_ "detail-value"] <| statusBadgeWithForm (TaskCore.taskStatus task) (TaskCore.taskId task)
-
- Lucid.div_ [Lucid.class_ "detail-row"] <| do
- Lucid.span_ [Lucid.class_ "detail-label"] "Priority:"
- Lucid.span_ [Lucid.class_ "detail-value"] <| do
- Lucid.toHtml (tshow (TaskCore.taskPriority task))
- Lucid.span_ [Lucid.class_ "priority-desc"] (Lucid.toHtml (priorityDesc (TaskCore.taskPriority task)))
-
- case TaskCore.taskNamespace task of
- Nothing -> pure ()
- Just ns ->
- Lucid.div_ [Lucid.class_ "detail-row"] <| do
- Lucid.span_ [Lucid.class_ "detail-label"] "Namespace:"
- Lucid.span_ [Lucid.class_ "detail-value"] (Lucid.toHtml ns)
-
- case TaskCore.taskParent task of
- Nothing -> pure ()
- Just pid ->
- Lucid.div_ [Lucid.class_ "detail-row"] <| do
- Lucid.span_ [Lucid.class_ "detail-label"] "Parent:"
- Lucid.a_ [Lucid.href_ ("/tasks/" <> pid), Lucid.class_ "detail-value task-link"] (Lucid.toHtml pid)
-
- Lucid.div_ [Lucid.class_ "detail-row"] <| do
- Lucid.span_ [Lucid.class_ "detail-label"] "Created:"
- Lucid.span_ [Lucid.class_ "detail-value"] (renderRelativeTimestamp now (TaskCore.taskCreatedAt task))
-
- Lucid.div_ [Lucid.class_ "detail-row"] <| do
- Lucid.span_ [Lucid.class_ "detail-label"] "Updated:"
- Lucid.span_ [Lucid.class_ "detail-value"] (renderRelativeTimestamp now (TaskCore.taskUpdatedAt task))
+ Lucid.div_ [Lucid.class_ "task-meta"] <| do
+ Lucid.div_ [Lucid.class_ "task-meta-primary"] <| do
+ Lucid.code_ [Lucid.class_ "task-meta-id"] (Lucid.toHtml (TaskCore.taskId task))
+ metaSep
+ Lucid.span_ [Lucid.class_ "task-meta-type"] (Lucid.toHtml (tshow (TaskCore.taskType task)))
+ metaSep
+ statusBadgeWithForm (TaskCore.taskStatus task) (TaskCore.taskId task)
+ metaSep
+ Lucid.span_ [Lucid.class_ "task-meta-priority"] <| do
+ Lucid.toHtml (tshow (TaskCore.taskPriority task))
+ Lucid.span_ [Lucid.class_ "priority-desc"] (Lucid.toHtml (priorityDesc (TaskCore.taskPriority task)))
+ case TaskCore.taskNamespace task of
+ Nothing -> pure ()
+ Just ns -> do
+ metaSep
+ Lucid.span_ [Lucid.class_ "task-meta-ns"] (Lucid.toHtml ns)
+
+ Lucid.div_ [Lucid.class_ "task-meta-secondary"] <| do
+ case TaskCore.taskParent task of
+ Nothing -> pure ()
+ Just pid -> do
+ Lucid.span_ [Lucid.class_ "task-meta-label"] "Parent:"
+ Lucid.a_ [Lucid.href_ ("/tasks/" <> pid), Lucid.class_ "task-link"] (Lucid.toHtml pid)
+ metaSep
+ Lucid.span_ [Lucid.class_ "task-meta-label"] "Created"
+ renderRelativeTimestamp now (TaskCore.taskCreatedAt task)
+ metaSep
+ Lucid.span_ [Lucid.class_ "task-meta-label"] "Updated"
+ renderRelativeTimestamp now (TaskCore.taskUpdatedAt task)
let deps = TaskCore.taskDependencies task
unless (null deps) <| do
@@ -1128,14 +1128,6 @@ instance Lucid.ToHtml TaskDetailPage where
]
"Review This Task"
where
- priorityDesc :: TaskCore.Priority -> Text
- priorityDesc p = case p of
- TaskCore.P0 -> " (Critical)"
- TaskCore.P1 -> " (High)"
- TaskCore.P2 -> " (Medium)"
- TaskCore.P3 -> " (Low)"
- TaskCore.P4 -> " (Backlog)"
-
renderDependency :: (Monad m) => TaskCore.Dependency -> Lucid.HtmlT m ()
renderDependency dep =
Lucid.li_ <| do
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 1fc74b04..84e01ede 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -34,6 +34,7 @@ stylesheet = do
commitStyles
markdownStyles
retryBannerStyles
+ taskMetaStyles
responsiveStyles
darkModeStyles
@@ -1132,6 +1133,36 @@ retryBannerStyles = do
color "#991b1b"
fontWeight (weight 500)
+taskMetaStyles :: Css
+taskMetaStyles = do
+ ".task-meta" ? do
+ marginBottom (px 12)
+ ".task-meta-primary" ? do
+ display flex
+ alignItems center
+ flexWrap Flexbox.wrap
+ Stylesheet.key "gap" ("6px" :: Text)
+ fontSize (px 14)
+ marginBottom (px 4)
+ ".task-meta-secondary" ? do
+ display flex
+ alignItems center
+ flexWrap Flexbox.wrap
+ Stylesheet.key "gap" ("6px" :: Text)
+ fontSize (px 12)
+ color "#6b7280"
+ ".task-meta-id" ? do
+ fontFamily ["SF Mono", "Monaco", "monospace"] [monospace]
+ fontSize (px 13)
+ backgroundColor "#f3f4f6"
+ padding (px 1) (px 4) (px 1) (px 4)
+ borderRadius (px 2) (px 2) (px 2) (px 2)
+ ".task-meta-label" ? do
+ color "#6b7280"
+ ".meta-sep" ? do
+ color "#d1d5db"
+ Stylesheet.key "user-select" ("none" :: Text)
+
responsiveStyles :: Css
responsiveStyles = do
query Media.screen [Media.maxWidth (px 600)] <| do
@@ -1255,6 +1286,12 @@ darkModeStyles =
code ? do
backgroundColor "#374151"
color "#f3f4f6"
+ ".task-meta-id" ? do
+ backgroundColor "#374151"
+ color "#e5e7eb"
+ ".task-meta-secondary" ? color "#9ca3af"
+ ".meta-sep" ? color "#4b5563"
+ ".task-meta-label" ? color "#9ca3af"
".detail-section" ? borderTopColor "#374151"
".description" ? do
backgroundColor "#374151"