From d58b2f547f474648edbacdf2ffdfdef6e019fe7d Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bensima.com>
Date: Sat, 29 Nov 2025 22:18:46 -0500
Subject: Add sorting options to task list pages

The implementation is complete and all tests pass. Here's a summary
of w

1. Added `SortOrder` data type with 5 options: `SortNewest`,
`SortOldest 2. Added helper functions: `parseSortOrder`,
`sortOrderToParam`, `sortOr 3. Updated API routes to include `?sort=`
query param for `/ready`, `/bl 4. Updated page data types to include
`SortOrder` 5. Updated all list handlers to parse sort param and apply
sorting 6. Added `sortDropdown` component that renders a dropdown
with all sort 7. Added `sortOption` helper to render individual sort
options with acti 8. Updated all `ToHtml` instances for list pages
to render the sort drop

1. Added `sortDropdownStyles` for the page header row and sort dropdown
2. Added dark mode styles for the sort dropdown

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

(limited to 'Omni/Jr/Web')

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index e0cc51e..02352ec 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -37,6 +37,7 @@ stylesheet = do
   retryBannerStyles
   taskMetaStyles
   timeFilterStyles
+  sortDropdownStyles
   responsiveStyles
   darkModeStyles
 
@@ -1217,6 +1218,52 @@ timeFilterStyles = do
     backgroundColor "#0055aa"
     borderColor "#0055aa"
 
+sortDropdownStyles :: Css
+sortDropdownStyles = do
+  ".page-header-row" ? do
+    display flex
+    alignItems center
+    justifyContent spaceBetween
+    flexWrap Flexbox.wrap
+    Stylesheet.key "gap" ("12px" :: Text)
+    marginBottom (px 8)
+  ".page-header-row" |> "h1" ? do
+    margin (px 0) (px 0) (px 0) (px 0)
+  ".sort-dropdown" ? do
+    display flex
+    alignItems center
+    Stylesheet.key "gap" ("6px" :: Text)
+    fontSize (px 13)
+  ".sort-label" ? do
+    color "#6b7280"
+    fontWeight (weight 500)
+  ".sort-dropdown-wrapper" ? do
+    position relative
+  ".sort-dropdown-btn" ? do
+    padding (px 4) (px 10) (px 4) (px 10)
+    fontSize (px 13)
+    fontWeight (weight 500)
+    border (px 1) solid "#d0d0d0"
+    borderRadius (px 4) (px 4) (px 4) (px 4)
+    backgroundColor white
+    color "#374151"
+    cursor pointer
+    transition "all" (ms 150) ease (sec 0)
+    whiteSpace nowrap
+  ".sort-dropdown-btn" # hover ? do
+    borderColor "#999"
+    backgroundColor "#f3f4f6"
+  ".sort-dropdown-content" ? do
+    minWidth (px 160)
+    right (px 0)
+    left auto
+  ".sort-dropdown-item" ? do
+    padding (px 8) (px 12) (px 8) (px 12)
+    fontSize (px 13)
+  ".sort-dropdown-item.active" ? do
+    backgroundColor "#e0f2fe"
+    fontWeight (weight 600)
+
 taskMetaStyles :: Css
 taskMetaStyles = do
   ".task-meta" ? do
@@ -1489,6 +1536,16 @@ darkModeStyles =
     ".time-filter-btn.active" # hover ? do
       backgroundColor "#2563eb"
       borderColor "#2563eb"
+    ".sort-label" ? color "#9ca3af"
+    ".sort-dropdown-btn" ? do
+      backgroundColor "#374151"
+      borderColor "#4b5563"
+      color "#d1d5db"
+    ".sort-dropdown-btn" # hover ? do
+      backgroundColor "#4b5563"
+      borderColor "#6b7280"
+    ".sort-dropdown-item.active" ? do
+      backgroundColor "#1e3a5f"
     -- Responsive dark mode: dropdown content needs background on mobile
     query Media.screen [Media.maxWidth (px 600)] <| do
       ".navbar-dropdown-content" ? do
-- 
cgit v1.2.3