From 82ea47382e763b7412deef3db9ae07fbbd80d9dd Mon Sep 17 00:00:00 2001
From: Tienson Qin <tiensonqin@gmail.com>
Date: Mon, 2 Dec 2024 22:06:54 +0800
Subject: [PATCH] enhance: add close button to quit highlight recent blocks

---
 src/main/frontend/components/block.css   |  5 ++-
 src/main/frontend/components/header.cljs | 53 ++++++++++++++----------
 2 files changed, 34 insertions(+), 24 deletions(-)

diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css
index ec9dac1065c..71f83744cce 100644
--- a/src/main/frontend/components/block.css
+++ b/src/main/frontend/components/block.css
@@ -1062,6 +1062,7 @@ html.is-mac {
   }
 }
 
-.recent-block .bullet-container .bullet {
-  border: 2px solid;
+.recent-block {
+  transition: background-color 0.2s cubic-bezier(0, 1, 0, 1);
+  background-color: var(--ls-secondary-background-color, var(--rx-gray-03));
 }
diff --git a/src/main/frontend/components/header.cljs b/src/main/frontend/components/header.cljs
index b51ed311b69..80ddac8aaa6 100644
--- a/src/main/frontend/components/header.cljs
+++ b/src/main/frontend/components/header.cljs
@@ -278,28 +278,37 @@
            (doseq [node old-nodes]
              (d/remove-class! node "recent-block")))))
      [recent-days])
-    (shui/slider
-     {:class "relative flex w-full touch-none select-none items-center w-[30%]"
-      :default-value #js [3 100]
-      :on-value-change (fn [result]
-                         (set-recent-days! (first result))
-                         (state/set-highlight-recent-days! (first result)))
-      :minStepsBetweenThumbs 1}
-     (shui/slider-track
-      {:class "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary"})
-     (shui/tooltip-provider
-      (shui/tooltip
-       (shui/tooltip-trigger
-        {:as-child true
-         :on-click (fn [e] (.preventDefault e))}
-        (shui/slider-thumb
-         {:ref set-thumb-ref!
-          :class "block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none"}))
-       (shui/tooltip-content
-        {:onPointerDownOutside (fn [e] (.preventDefault e))}
-        (str "Highlight recent blocks"
-             (when (not= recent-days 0)
-               (str ": " recent-days " days ago")))))))))
+    [:div.flex.flex-row.gap-1.items-center
+     {:class "w-[32%]"}
+     (shui/slider
+      {:class "relative flex w-full touch-none select-none items-center "
+       :default-value #js [3 100]
+       :on-value-change (fn [result]
+                          (set-recent-days! (first result))
+                          (state/set-highlight-recent-days! (first result)))
+       :minStepsBetweenThumbs 1}
+      (shui/slider-track
+       {:class "relative h-2 w-full grow overflow-hidden rounded-full bg-secondary"})
+      (shui/tooltip-provider
+       (shui/tooltip
+        (shui/tooltip-trigger
+         {:as-child true
+          :on-click (fn [e] (.preventDefault e))}
+         (shui/slider-thumb
+          {:ref set-thumb-ref!
+           :class "block h-4 w-4 rounded-full border-2 border-primary bg-background ring-offset-background transition-colors focus-visible:outline-none"}))
+        (shui/tooltip-content
+         {:onPointerDownOutside (fn [e] (.preventDefault e))}
+         (str "Highlight recent blocks"
+              (when (not= recent-days 0)
+                (str ": " recent-days " days ago")))))))
+     (shui/button
+      {:variant :ghost
+       :size :sm
+       :title "Quit highlight recent blocks"
+       :class "opacity-50 hover:opacity-100"
+       :on-click (fn [] (state/toggle-highlight-recent-blocks!))}
+      (ui/icon "x" {:size 16}))]))
 
 (rum/defc recent-slider < rum/reactive
   {:will-update (fn [state]