From 6333f4d8db56e26d384de9901cf0c990f8befec7 Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bensima.com>
Date: Sat, 29 Nov 2025 22:31:49 -0500
Subject: Add clickable priority dropdown on task detail pages

The build passes successfully. Let me provide a summary of the
changes m

I implemented the clickable priority dropdown on task detail pages,
mirr

1. **Added new API route** for priority updates:
   ```haskell "tasks" :> Capture "id" Text :> "priority" :> ReqBody
   '[FormUrlEncode ```

2. **Added new types**:
   - `PriorityBadgePartial` - partial response for HTMX updates -
   `PriorityForm` - form data for priority changes with `FromForm` ins

3. **Added handler** `taskPriorityHandler` that updates task
priority vi

4. **Added priority dropdown components**:
   - `priorityBadgeWithForm` - container with clickable badge and
   dropdo - `clickablePriorityBadge` - the clickable badge showing
   current prio - `priorityDropdownOptions` - dropdown menu with
   P0-P4 options - `priorityOption` - individual priority option with
   HTMX form

5. **Added JavaScript** `priorityDropdownJs` for dropdown toggle/close
b

6. **Updated task detail page** to use `priorityBadgeWithForm`
instead o

7. **Added `ToHtml` instance** for `PriorityBadgePartial`

1. **Added priority badge styles** for P0-P4 with appropriate colors
2. **Added priority dropdown styles** (mirroring status dropdown)
3. **Added dark mode styles** for priority badges and dropdown

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

(limited to 'Omni/Jr/Web')

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index 02352ec..fbaaa82 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -623,6 +623,66 @@ statusBadges = do
   ".status-badge-clickable" # focus ? do
     Stylesheet.key "outline" ("2px solid #0066cc" :: Text)
     Stylesheet.key "outline-offset" ("2px" :: Text)
+  ".badge-p0" ? do
+    backgroundColor "#fee2e2"
+    color "#991b1b"
+  ".badge-p1" ? do
+    backgroundColor "#fef3c7"
+    color "#92400e"
+  ".badge-p2" ? do
+    backgroundColor "#dbeafe"
+    color "#1e40af"
+  ".badge-p3" ? do
+    backgroundColor "#e5e7eb"
+    color "#4b5563"
+  ".badge-p4" ? do
+    backgroundColor "#f3f4f6"
+    color "#6b7280"
+  ".priority-badge-dropdown" ? do
+    position relative
+    display inlineBlock
+  ".priority-badge-clickable" ? do
+    cursor pointer
+    Stylesheet.key "user-select" ("none" :: Text)
+  ".priority-badge-clickable" # hover ? do
+    opacity 0.85
+  ".priority-dropdown-menu" ? do
+    display none
+    position absolute
+    left (px 0)
+    top (pct 100)
+    marginTop (px 2)
+    backgroundColor white
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+    Stylesheet.key "box-shadow" ("0 2px 8px rgba(0,0,0,0.15)" :: Text)
+    zIndex 100
+    padding (px 4) (px 4) (px 4) (px 4)
+    minWidth (px 100)
+  ".priority-badge-dropdown.open" |> ".priority-dropdown-menu" ? do
+    display block
+  ".priority-option-form" ? do
+    margin (px 0) (px 0) (px 0) (px 0)
+    padding (px 0) (px 0) (px 0) (px 0)
+  ".priority-dropdown-option" ? do
+    display block
+    width (pct 100)
+    textAlign (alignSide sideLeft)
+    margin (px 2) (px 0) (px 2) (px 0)
+    border (px 0) none transparent
+    cursor pointer
+    transition "opacity" (ms 150) ease (sec 0)
+  ".priority-dropdown-option" # hover ? do
+    opacity 0.7
+  ".priority-dropdown-option" # focus ? do
+    opacity 0.85
+    Stylesheet.key "outline" ("2px solid #0066cc" :: Text)
+    Stylesheet.key "outline-offset" ("1px" :: Text)
+  ".priority-dropdown-option.selected" ? do
+    Stylesheet.key "outline" ("2px solid #0066cc" :: Text)
+    Stylesheet.key "outline-offset" ("1px" :: Text)
+  ".priority-badge-clickable" # focus ? do
+    Stylesheet.key "outline" ("2px solid #0066cc" :: Text)
+    Stylesheet.key "outline-offset" ("2px" :: Text)
 
 buttonStyles :: Css
 buttonStyles = do
@@ -1445,6 +1505,24 @@ darkModeStyles =
     ".badge-done" ? do
       backgroundColor "#064e3b"
       color "#6ee7b7"
+    ".badge-p0" ? do
+      backgroundColor "#7f1d1d"
+      color "#fca5a5"
+    ".badge-p1" ? do
+      backgroundColor "#78350f"
+      color "#fcd34d"
+    ".badge-p2" ? do
+      backgroundColor "#1e3a8a"
+      color "#93c5fd"
+    ".badge-p3" ? do
+      backgroundColor "#374151"
+      color "#d1d5db"
+    ".badge-p4" ? do
+      backgroundColor "#1f2937"
+      color "#9ca3af"
+    ".priority-dropdown-menu" ? do
+      backgroundColor "#1f2937"
+      Stylesheet.key "box-shadow" ("0 2px 8px rgba(0,0,0,0.3)" :: Text)
     ".action-btn" ? do
       backgroundColor "#374151"
       borderColor "#4b5563"
-- 
cgit v1.2.3