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

1 files changed, 37 insertions, 0 deletions

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 1fc74b0..84e01ed 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"