Compact task detail metadata into inline Gerrit-style layout

Problem

Task detail metadata takes too much vertical space. Each field is on its own row:

ID:
t-123
Type:
WorkTask
Status:
[Open]
...

Solution

Redesign as inline flow with dot separators (Gerrit-style):

t-123 · WorkTask · [Open ▼] · P1 · Omni/Jr
Parent: t-150 · Created 2h ago · Updated 5m ago

HTML Structure

Replace the series of detail-row divs with:

Lucid.div_ [Lucid.class_ "task-meta"] <| do
  -- Primary line: ID, type, status, priority, namespace
  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)
  
  -- Secondary line: parent, timestamps
  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)

-- Helper for separator
metaSep :: (Monad m) => Lucid.HtmlT m ()
metaSep = Lucid.span_ [Lucid.class_ "meta-sep"] "·"

CSS (Style.hs)

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"
    userSelect none
  ".priority-desc" ? do
    color "#6b7280"
    marginLeft (px 2)
    fontSize (px 12)

Dark mode additions:

".task-meta-id" ? do
  backgroundColor "#374151"
  color "#e5e7eb"
".task-meta-secondary" ? color "#9ca3af"
".meta-sep" ? color "#4b5563"
".task-meta-label" ? color "#9ca3af"

Files to Modify

1. Omni/Jr/Web.hs:

• Replace detail-row structure with task-meta structure (lines ~988-1027)
• Add metaSep helper function
• Keep dependencies section as-is (below the meta)

2. Omni/Jr/Web/Style.hs:

• Add taskMetaStyles
• Add to stylesheet list
• Add dark mode overrides
• Can remove unused .detail-row, .detail-label, .detail-value if not used elsewhere

Testing

1. View task detail page for a task with all fields (parent, namespace) 2. View task detail page for a task with minimal fields (no parent, no namespace) 3. Check light and dark themes 4. Check mobile viewport - should wrap gracefully 5. Verify status dropdown still works inline