From 10068667c7255facc5cdd10d71d437b5a0e4eea2 Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bensima.com>
Date: Sat, 29 Nov 2025 18:44:52 -0500
Subject: Add breadcrumbs navigation for task hierarchy

The implementation is complete. Here's a summary of the changes made:

1. Added `Breadcrumb` data type and `Breadcrumbs` type alias
2. Added `pageBodyWithCrumbs` function that renders the page with
breadc 3. Added `renderBreadcrumbs` function to render the breadcrumb
navigatio 4. Added `getAncestors` helper to traverse task parent chain
5. Added `taskBreadcrumbs` helper to build breadcrumbs including parent

Updated all page ToHtml instances to use breadcrumbs: -
`ReadyQueuePage`: Jr > Ready Queue - `BlockedPage`: Jr > Blocked -
`InterventionPage`: Jr > Needs Intervention - `KBPage`: Jr > Knowledge
Base - `FactDetailPage`: Jr > Knowledge Base > Fact #N - `EpicsPage`:
Jr > Epics - `TaskListPage`: Jr > Tasks - `TaskDetailPage`: Jr >
Tasks > (parent chain) > task-id - `TaskReviewPage`: Jr > Tasks >
task-id > Review - `TaskDiffPage`: Jr > Tasks > task-id > Diff (short
hash) - `StatsPage`: Jr > Stats - `HomePage`: Uses regular `pageBody`
(no breadcrumbs)

Added `breadcrumbStyles` function with CSS for: -
`.breadcrumb-container`: Light gray background, subtle bottom border -
`.breadcrumb-list`: Flex layout with wrapping - `.breadcrumb-item`:
Flex items with gap - `.breadcrumb-sep`: Gray separator ">" -
`.breadcrumb-current`: Current page label (no link) - Link styling
for breadcrumb links

Added dark mode overrides for breadcrumbs in `darkModeStyles`.

Task-Id: t-172
---
 Omni/Jr/Web/Style.hs | 36 ++++++++++++++++++++++++++++++++++++
 1 file changed, 36 insertions(+)

(limited to 'Omni/Jr/Web/Style.hs')

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 84e01ed..49f7976 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -24,6 +24,7 @@ stylesheet = do
   baseStyles
   layoutStyles
   navigationStyles
+  breadcrumbStyles
   cardStyles
   listGroupStyles
   statusBadges
@@ -264,6 +265,36 @@ navigationStyles = do
     Stylesheet.key "gap" ("6px" :: Text)
     marginBottom (px 8)
 
+breadcrumbStyles :: Css
+breadcrumbStyles = do
+  ".breadcrumb-container" ? do
+    backgroundColor "#f9fafb"
+    borderBottom (px 1) solid "#e5e7eb"
+    padding (px 6) (px 0) (px 6) (px 0)
+  ".breadcrumb-list" ? do
+    display flex
+    alignItems center
+    flexWrap Flexbox.wrap
+    Stylesheet.key "gap" ("4px" :: Text)
+    margin (px 0) (px 0) (px 0) (px 0)
+    padding (px 0) (px 0) (px 0) (px 0)
+    listStyleType none
+    fontSize (px 12)
+  ".breadcrumb-item" ? do
+    display flex
+    alignItems center
+    Stylesheet.key "gap" ("4px" :: Text)
+  ".breadcrumb-sep" ? do
+    color "#9ca3af"
+    Stylesheet.key "user-select" ("none" :: Text)
+  ".breadcrumb-current" ? do
+    color "#6b7280"
+    fontWeight (weight 500)
+  (".breadcrumb-list" ** a) ? do
+    color "#0066cc"
+    textDecoration none
+  (".breadcrumb-list" ** a) # hover ? textDecoration underline
+
 cardStyles :: Css
 cardStyles = do
   ".card"
@@ -1273,6 +1304,11 @@ darkModeStyles =
     ".nav-brand" ? color "#f3f4f6"
     "h2" <> "h3" ? color "#d1d5db"
     a ? color "#60a5fa"
+    ".breadcrumb-container" ? do
+      backgroundColor "#1f2937"
+      borderBottomColor "#374151"
+    ".breadcrumb-sep" ? color "#6b7280"
+    ".breadcrumb-current" ? color "#9ca3af"
 
     ".detail-label"
       <> ".priority"
-- 
cgit v1.2.3