Commit b5ac1e59

commit b5ac1e5984ee69b54414ef3c98ece1f143021de5
Author: Ben Sima <ben@bensima.com>
Date:   Thu Nov 27 18:52:28 2025

    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

diff --git a/Omni/Jr/Web.hs b/Omni/Jr/Web.hs
index e1933e2a..ce77bcaa 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 cf2dcd63..e768cda1 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