From a5180facf2375cf629ce7d90f851e6c667f66197 Mon Sep 17 00:00:00 2001
From: Ben Sima <ben@bensima.com>
Date: Sat, 29 Nov 2025 22:09:56 -0500
Subject: Add time range filter to homepage Task Status section

The build and tests pass with no errors. The time range filter
feature f

**Implementation summary:** - Route accepts
`?range=today|week|month|all` query param - `TimeRange` type with
`Today`, `Week`, `Month`, `AllTime` variants - `homeHandler` filters
both tasks and activities by time range - Toggle buttons rendered
with `timeFilterBtn` helper - Full CSS styling in `timeFilterStyles`
with dark mode support - Default selection: "All Time"

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

(limited to 'Omni/Jr/Web/Style.hs')

diff --git a/Omni/Jr/Web/Style.hs b/Omni/Jr/Web/Style.hs
index ad1ff02..e0cc51e 100644
--- a/Omni/Jr/Web/Style.hs
+++ b/Omni/Jr/Web/Style.hs
@@ -36,6 +36,7 @@ stylesheet = do
   markdownStyles
   retryBannerStyles
   taskMetaStyles
+  timeFilterStyles
   responsiveStyles
   darkModeStyles
 
@@ -1185,6 +1186,37 @@ retryBannerStyles = do
     color "#991b1b"
     fontWeight (weight 500)
 
+timeFilterStyles :: Css
+timeFilterStyles = do
+  ".time-filter" ? do
+    display flex
+    Stylesheet.key "gap" ("6px" :: Text)
+    marginBottom (px 12)
+    flexWrap Flexbox.wrap
+  ".time-filter-btn" ? do
+    display inlineBlock
+    padding (px 4) (px 12) (px 4) (px 12)
+    fontSize (px 12)
+    fontWeight (weight 500)
+    textDecoration none
+    borderRadius (px 12) (px 12) (px 12) (px 12)
+    border (px 1) solid "#d0d0d0"
+    backgroundColor white
+    color "#374151"
+    transition "all" (ms 150) ease (sec 0)
+    cursor pointer
+  ".time-filter-btn" # hover ? do
+    borderColor "#999"
+    backgroundColor "#f3f4f6"
+    textDecoration none
+  ".time-filter-btn.active" ? do
+    backgroundColor "#0066cc"
+    borderColor "#0066cc"
+    color white
+  ".time-filter-btn.active" # hover ? do
+    backgroundColor "#0055aa"
+    borderColor "#0055aa"
+
 taskMetaStyles :: Css
 taskMetaStyles = do
   ".task-meta" ? do
@@ -1443,6 +1475,20 @@ darkModeStyles =
     ".fact-create-form" ? do
       backgroundColor "#1f2937"
       borderColor "#374151"
+    ".time-filter-btn" ? do
+      backgroundColor "#374151"
+      borderColor "#4b5563"
+      color "#d1d5db"
+    ".time-filter-btn" # hover ? do
+      backgroundColor "#4b5563"
+      borderColor "#6b7280"
+    ".time-filter-btn.active" ? do
+      backgroundColor "#3b82f6"
+      borderColor "#3b82f6"
+      color white
+    ".time-filter-btn.active" # hover ? do
+      backgroundColor "#2563eb"
+      borderColor "#2563eb"
     -- 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