From b5ac1e5984ee69b54414ef3c98ece1f143021de5 Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bensima.com>
Date: Thu, 27 Nov 2025 18:52:28 -0500
Subject: Merge status badge display and dropdown into single element

The build and tests pass. The changes merge the status badge display
and

Task-Id: t-157.1
---
 Omni/Jr/Web.hs       | 35 ++++++++++++++++++++---------------
 Omni/Jr/Web/Style.hs | 21 +++++++++++++++++++++
 2 files changed, 41 insertions(+), 15 deletions(-)

(limited to 'Omni/Jr')

diff --git a/Omni/Jr/Web.hs b/Omni/Jr/Web.hs
index e1933e2..ce77bca 100644
--- a/Omni/Jr/Web.hs
+++ b/Omni/Jr/Web.hs
@@ -276,21 +276,26 @@ multiColorProgressBar stats =
 
 statusBadgeWithForm :: (Monad m) => TaskCore.Status -> Text -> Lucid.HtmlT m ()
 statusBadgeWithForm status tid =
-  Lucid.div_ [Lucid.id_ "status-badge-container", Lucid.class_ "status-badge-container"] <| do
-    statusBadge status
-    Lucid.select_
-      [ Lucid.name_ "status",
-        Lucid.class_ "status-select-inline",
-        Lucid.makeAttribute "hx-post" ("/tasks/" <> tid <> "/status"),
-        Lucid.makeAttribute "hx-target" "#status-badge-container",
-        Lucid.makeAttribute "hx-swap" "outerHTML"
-      ]
-      <| do
-        statusOptionHtmx TaskCore.Open status
-        statusOptionHtmx TaskCore.InProgress status
-        statusOptionHtmx TaskCore.Review status
-        statusOptionHtmx TaskCore.Approved status
-        statusOptionHtmx TaskCore.Done status
+  let badgeClass = case status of
+        TaskCore.Open -> "status-badge-select badge-open"
+        TaskCore.InProgress -> "status-badge-select badge-inprogress"
+        TaskCore.Review -> "status-badge-select badge-review"
+        TaskCore.Approved -> "status-badge-select badge-approved"
+        TaskCore.Done -> "status-badge-select badge-done"
+   in Lucid.select_
+        [ Lucid.id_ "status-badge-container",
+          Lucid.name_ "status",
+          Lucid.class_ badgeClass,
+          Lucid.makeAttribute "hx-post" ("/tasks/" <> tid <> "/status"),
+          Lucid.makeAttribute "hx-target" "#status-badge-container",
+          Lucid.makeAttribute "hx-swap" "outerHTML"
+        ]
+        <| do
+          statusOptionHtmx TaskCore.Open status
+          statusOptionHtmx TaskCore.InProgress status
+          statusOptionHtmx TaskCore.Review status
+          statusOptionHtmx TaskCore.Approved status
+          statusOptionHtmx TaskCore.Done status
   where
     statusOptionHtmx :: (Monad m2) => TaskCore.Status -> TaskCore.Status -> Lucid.HtmlT m2 ()
     statusOptionHtmx opt current =
diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index cf2dcd6..e768cda 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -519,6 +519,27 @@ statusBadges = do
   ".badge-done" ? do
     backgroundColor "#d1fae5"
     color "#065f46"
+  ".status-badge-select" ? do
+    Stylesheet.key "-webkit-appearance" ("none" :: Text)
+    Stylesheet.key "-moz-appearance" ("none" :: Text)
+    Stylesheet.key "appearance" ("none" :: Text)
+    display inlineBlock
+    padding (px 2) (px 18) (px 2) (px 6)
+    borderRadius (px 2) (px 2) (px 2) (px 2)
+    fontSize (px 11)
+    fontWeight (weight 500)
+    whiteSpace nowrap
+    border (px 0) none transparent
+    cursor pointer
+    Stylesheet.key "background-image" ("url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='currentColor' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E\")" :: Text)
+    Stylesheet.key "background-repeat" ("no-repeat" :: Text)
+    Stylesheet.key "background-position" ("right 4px center" :: Text)
+    Stylesheet.key "background-size" ("8px" :: Text)
+  ".status-badge-select" # hover ? do
+    opacity 0.8
+  ".status-badge-select" # focus ? do
+    Stylesheet.key "outline" ("2px solid #0066cc" :: Text)
+    Stylesheet.key "outline-offset" ("1px" :: Text)
 
 buttonStyles :: Css
 buttonStyles = do
-- 
cgit v1.2.3