From 4ccd1ada825395654a9e6053d9d7e6cd4986b1c0 Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bensima.com>
Date: Thu, 27 Nov 2025 18:34:10 -0500
Subject: Convert dashboard ready queue and recent activity to list-group
 pattern

All the changes are in place: 1. Created `renderListGroupItem` function
for compact list-style task di 2. Updated the dashboard's Ready
Queue section to use `list-group` with 3. Updated the dashboard's
Recent Activity section to use `list-group` w 4. Updated the
`RecentActivityPartial` (HTMX partial) to also use the li 5. Added CSS
styles for `.list-group`, `.list-group-item`, etc. in Style 6. Added
dark mode styles for the list-group components

The build and tests pass successfully.

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

(limited to 'Omni/Jr/Web')

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 8b1946a..51c3fd5 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -25,6 +25,7 @@ stylesheet = do
   layoutStyles
   navigationStyles
   cardStyles
+  listGroupStyles
   statusBadges
   buttonStyles
   formStyles
@@ -443,6 +444,52 @@ cardStyles = do
     padding (px 8) (px 10) (px 8) (px 10)
     margin (px 8) (px 0) (px 8) (px 0)
 
+listGroupStyles :: Css
+listGroupStyles = do
+  ".list-group" ? do
+    display flex
+    flexDirection column
+    backgroundColor white
+    borderRadius (px 2) (px 2) (px 2) (px 2)
+    border (px 1) solid "#d0d0d0"
+    overflow hidden
+  ".list-group-item" ? do
+    display flex
+    alignItems center
+    justifyContent spaceBetween
+    padding (px 8) (px 10) (px 8) (px 10)
+    borderBottom (px 1) solid "#e5e7eb"
+    textDecoration none
+    color inherit
+    transition "background-color" (ms 150) ease (sec 0)
+  ".list-group-item" # lastChild ? borderBottom (px 0) none transparent
+  ".list-group-item" # hover ? do
+    backgroundColor "#f9fafb"
+    textDecoration none
+  ".list-group-item-content" ? do
+    display flex
+    alignItems center
+    Stylesheet.key "gap" ("8px" :: Text)
+    Stylesheet.key "flex" ("1" :: Text)
+    minWidth (px 0)
+    overflow hidden
+  ".list-group-item-id" ? do
+    fontFamily ["SF Mono", "Monaco", "monospace"] [monospace]
+    color "#0066cc"
+    fontSize (px 12)
+    flexShrink 0
+  ".list-group-item-title" ? do
+    fontSize (px 13)
+    color "#374151"
+    overflow hidden
+    Stylesheet.key "text-overflow" ("ellipsis" :: Text)
+    whiteSpace nowrap
+  ".list-group-item-meta" ? do
+    display flex
+    alignItems center
+    Stylesheet.key "gap" ("6px" :: Text)
+    flexShrink 0
+
 statusBadges :: Css
 statusBadges = do
   ".badge" ? do
@@ -961,9 +1008,14 @@ darkModeStyles =
       <> ".status-form"
       <> ".diff-section"
       <> ".review-actions"
+      <> ".list-group"
       ? do
         backgroundColor "#1f2937"
         borderColor "#374151"
+    ".list-group-item" ? borderBottomColor "#374151"
+    ".list-group-item" # hover ? backgroundColor "#374151"
+    ".list-group-item-id" ? color "#60a5fa"
+    ".list-group-item-title" ? color "#d1d5db"
     header ? do
       backgroundColor "#1f2937"
       borderColor "#374151"
-- 
cgit v1.2.3