feat: highlight recent blocks

deps/shui/src/logseq/shui/ui.cljs

@@ -22,6 +22,9 @@
 (def alert-title (util/lsui-wrap "AlertTitle"))
 (def alert-description (util/lsui-wrap "AlertDescription"))
 (def slider (util/lsui-wrap "Slider"))
+(def slider-track (util/lsui-wrap "SliderTrack"))
+(def slider-range (util/lsui-wrap "SliderRange"))
+(def slider-thumb (util/lsui-wrap "SliderThumb"))
 (def badge (util/lsui-wrap "Badge"))
 (def skeleton (util/lsui-wrap "Skeleton"))
 (def calendar (util/lsui-wrap "Calendar"))

src/main/frontend/components/block.css

@@ -1061,3 +1061,7 @@ html.is-mac {
     }
   }
 }
+
+.recent-block .bullet-container .bullet {
+  border: 2px solid;
+}

src/main/frontend/components/header.cljs

@@ -28,7 +28,10 @@
             [logseq.shui.ui :as shui]
             [logseq.shui.util :as shui-util]
             [reitit.frontend.easy :as rfe]
-            [rum.core :as rum]))
+            [rum.core :as rum]
+            [dommy.core :as d]
+            [cljs-time.core :as t]
+            [cljs-time.coerce :as tc]))
 
 (rum/defc home-button
   < {:key-fn #(identity "home-button")}
@@ -240,6 +243,73 @@
          {:on-click #(handler/quit-and-install-new-version!)}
          (svg/reload 16) [:strong (t :updater/quit-and-install)]]]])))
 
+(defn- clear-recent-highlight!
+  []
+  (let [nodes (d/by-class "recent-block")]
+    (when (seq nodes)
+      (doseq [node nodes]
+        (d/remove-class! node "recent-block")))))
+
+(rum/defc recent-slider-inner
+  []
+  (let [[recent-days set-recent-days!] (rum/use-state (state/get-highlight-recent-days))
+        [thumb-ref set-thumb-ref!] (rum/use-state nil)]
+    (rum/use-effect!
+     (fn []
+       (when thumb-ref
+         (.focus ^js thumb-ref)))
+     [thumb-ref])
+    (rum/use-effect!
+     (fn []
+       (let [all-nodes (d/by-class "ls-block")
+             recent-node (fn [node]
+                           (let [id (some-> (d/attr node "blockid") uuid)
+                                 block (db/entity [:block/uuid id])]
+                             (when block
+                               (t/after?
+                                (tc/from-long (:block/updated-at block))
+                                (t/ago (t/days recent-days))))))
+             recent-nodes (filter recent-node all-nodes)
+             old-nodes (remove recent-node all-nodes)]
+         (when (seq recent-nodes)
+           (doseq [node recent-nodes]
+             (d/add-class! node "recent-block")))
+         (when (seq old-nodes)
+           (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")))))))))
+
+(rum/defc recent-slider < rum/reactive
+  {:will-update (fn [state]
+                  (when-not @(:ui/toggle-highlight-recent-blocks? @state/state)
+                    (clear-recent-highlight!))
+                  state)}
+  []
+  (when (state/sub :ui/toggle-highlight-recent-blocks?)
+    (recent-slider-inner)))
+
 (rum/defc ^:large-vars/cleanup-todo header < rum/reactive
   [{:keys [current-repo default-home new-block-mode]}]
   (let [_ (state/sub [:user/info :UserGroups])
@@ -284,6 +354,10 @@
               (ui/icon "search" {:size ui/icon-size})])))]]
 
      [:div.r.flex.drag-region
+      (when (and (config/db-based-graph? current-repo)
+                 (user-handler/team-member?))
+        (recent-slider))
+
       (when (and current-repo
                  (user-handler/logged-in?)
                  (config/db-based-graph? current-repo)

src/main/frontend/modules/shortcut/config.cljs

@@ -510,6 +510,8 @@
    :ui/toggle-document-mode                 {:binding "t d"
                                              :fn      state/toggle-document-mode!}
 
+   :ui/highlight-recent-blocks              {:fn      state/toggle-highlight-recent-blocks!}
+
    :ui/toggle-settings                      {:binding (if mac? ["t s" "mod+,"] "t s")
                                              :fn      ui-handler/toggle-settings-modal!}
 
@@ -777,6 +779,7 @@
           :go/next-journal
           :go/prev-journal
           :ui/toggle-document-mode
+          :ui/highlight-recent-blocks
           :ui/toggle-settings
           :ui/toggle-right-sidebar
           :ui/toggle-left-sidebar
@@ -921,7 +924,7 @@
      :editor/toggle-open-blocks
      :editor/toggle-number-list
      :ui/toggle-wide-mode
-     :ui/toggle-document-mode
+     :ui/highlight-recent-blocks
      :ui/toggle-brackets
      :ui/toggle-theme
      :ui/toggle-left-sidebar

src/main/frontend/state.cljs

@@ -318,6 +318,9 @@
       :system/info                           {}
       ;; Whether block is selected
       :ui/select-query-cache                 (atom {})
+      :ui/toggle-highlight-recent-blocks?    (atom false)
+      :ui/highlight-recent-days              (atom (or (storage/get :ui/highlight-recent-days)
+                                                       3))
       :favorites/updated?                    (atom 0)
       :db/async-query-loading                (atom #{})
       :db/async-queries                      (atom {})
@@ -1559,6 +1562,11 @@ Similar to re-frame subscriptions"
     (set-state! :document/mode? (not mode))
     (storage/set :document/mode? (not mode))))
 
+(defn toggle-highlight-recent-blocks!
+  []
+  (let [value @(:ui/toggle-highlight-recent-blocks? @state)]
+    (set-state! :ui/toggle-highlight-recent-blocks? (not value))))
+
 (defn shortcut-tooltip-enabled?
   []
   (get @state :ui/shortcut-tooltip?))
@@ -2353,3 +2361,13 @@ Similar to re-frame subscriptions"
   [ref-entity]
   (let [refs! (:editor/block-refs @state)]
     (swap! refs! conj ref-entity)))
+
+(defn get-highlight-recent-days
+  []
+  @(:ui/highlight-recent-days @state))
+
+(defn set-highlight-recent-days!
+  [days]
+  (prn :debug :set :days days)
+  (reset! (:ui/highlight-recent-days @state) days)
+  (storage/set :ui/highlight-recent-days days))

src/resources/dicts/en.edn

@@ -783,6 +783,7 @@
   :editor/copy-current-file "Copy current file"
   :editor/copy-page-url "Copy page url"
   :ui/toggle-wide-mode "Toggle wide mode"
+  :ui/highlight-recent-blocks "Toggle highlight recent blocks"
   :editor/toggle-display-all-properties "Toggle display all properties"
   :ui/select-theme-color "Select available theme colors"
   :ui/goto-plugins "Go to plugins dashboard"