feat: persist right sidebar state (#2948)

* feat: persist right sidebar state

* fix: storage operation

src/main/frontend/components/sidebar.cljs

@@ -457,6 +457,7 @@
         white? (= "white" (state/sub :ui/theme))
         sidebar-open?  (state/sub :ui/sidebar-open?)
         left-sidebar-open?  (state/sub :ui/left-sidebar-open?)
+        right-sidebar-blocks (state/sub :sidebar/blocks)
         route-name (get-in route-match [:data :name])
         global-graph-pages? (= :graph route-name)
         logged? (:name me)
@@ -474,6 +475,7 @@
         :nfs-granted?  granted?
         :db-restoring? db-restoring?
         :sidebar-open? sidebar-open?
+        :sidebar-blocks-len (count right-sidebar-blocks)
         :system-theme? system-theme?
         :on-click      (fn [e]
                          (editor-handler/unhighlight-blocks!)

src/main/frontend/components/theme.cljs

@@ -5,53 +5,66 @@
             [frontend.handler.ui :as ui-handler]
             [frontend.ui :as ui]
             [frontend.util :as util]
+            [frontend.rum :refer [use-mounted]]
             [rum.core :as rum]))
 
 (rum/defc container
-  [{:keys [t route theme on-click current-repo nfs-granted? db-restoring? sidebar-open? system-theme?] :as props} child]
-  (rum/use-effect!
-   #(let [doc js/document.documentElement
-          cls (.-classList doc)]
-      (.setAttribute doc "data-theme" (if (= theme "white") "light" theme))
-      (if (= theme "dark")                                 ;; for tailwind dark mode
-        (.add cls "dark")
-        (.remove cls "dark"))
-      (plugin-handler/hook-plugin-app :theme-mode-changed {:mode (if (= theme "white") "light" theme)} nil))
-   [theme])
+  [{:keys [t route theme on-click current-repo nfs-granted? db-restoring?
+           sidebar-open? system-theme? sidebar-blocks-len] :as props} child]
+  (let [mounted-fn (use-mounted)
+        [restored-sidebar? set-restored-sidebar?] (rum/use-state false)]
 
-  (rum/use-effect!
-   #(plugin-handler/hook-plugin-app :sidebar-visible-changed {:visible sidebar-open?})
-   [sidebar-open?])
+    (rum/use-effect!
+      #(let [doc js/document.documentElement
+             cls (.-classList doc)]
+         (.setAttribute doc "data-theme" (if (= theme "white") "light" theme))
+         (if (= theme "dark")                               ;; for tailwind dark mode
+           (.add cls "dark")
+           (.remove cls "dark"))
+         (plugin-handler/hook-plugin-app :theme-mode-changed {:mode (if (= theme "white") "light" theme)} nil))
+      [theme])
 
-  (rum/use-effect!
-   #(if lsp-enabled?
-      (plugin-handler/setup-install-listener! t))
-   [t])
+    (rum/use-effect!
+      #(when (and restored-sidebar?
+                  (mounted-fn))
+         (plugin-handler/hook-plugin-app :sidebar-visible-changed {:visible sidebar-open?})
+         (ui-handler/persist-right-sidebar-state!))
+      [sidebar-open? restored-sidebar? sidebar-blocks-len])
 
-  (rum/use-effect!
-   (fn []
-     (ui-handler/add-style-if-exists!)
-     (pdf/reset-current-pdf!)
-     (ui-handler/add-style-if-exists!)
-     (plugin-handler/hook-plugin-app :current-graph-changed {}))
-   [current-repo])
+    (rum/use-effect!
+      #(if lsp-enabled?
+         (plugin-handler/setup-install-listener! t))
+      [t])
 
-  (rum/use-effect!
-   #(let [db-restored? (false? db-restoring?)]
-      (if db-restoring?
-        (util/set-title! "Loading")
-        (when (or nfs-granted? db-restored?)
-          (route-handler/update-page-title! route))))
-   [nfs-granted? db-restoring? route])
+    (rum/use-effect!
+      (fn []
+        (ui-handler/add-style-if-exists!)
+        (pdf/reset-current-pdf!)
+        (plugin-handler/hook-plugin-app :current-graph-changed {}))
+      [current-repo])
 
-  (rum/use-effect!
-   #(when system-theme?
-      (ui/setup-system-theme-effect!))
-   [system-theme?])
+    (rum/use-effect!
+      #(let [db-restored? (false? db-restoring?)]
+         (if db-restoring?
+           (util/set-title! "Loading")
+           (when (or nfs-granted? db-restored?)
+             (route-handler/update-page-title! route))))
+      [nfs-granted? db-restoring? route])
 
-  [:div
-   {:class    (str theme "-theme")
-    :on-click on-click}
-   child
+    (rum/use-effect!
+      #(when-not db-restoring?
+         (ui-handler/restore-right-sidebar-state!)
+         (set-restored-sidebar? true))
+      [db-restoring?])
 
-   (pdf/playground)])
+    (rum/use-effect!
+      #(when system-theme?
+         (ui/setup-system-theme-effect!))
+      [system-theme?])
+
+    [:div
+     {:class    (str theme "-theme")
+      :on-click on-click}
+     child
+
+     (pdf/playground)]))

src/main/frontend/handler/ui.cljs

@@ -12,7 +12,9 @@
             [goog.dom :as gdom]
             [goog.object :as gobj]
             [clojure.string :as string]
-            [rum.core :as rum]))
+            [frontend.storage :as storage]
+            [rum.core :as rum]
+            [clojure.edn :as edn]))
 
 ;; sidebars
 (defn close-left-sidebar!
@@ -37,6 +39,23 @@
   []
   (state/toggle-sidebar-open?!))
 
+(defn persist-right-sidebar-state!
+  []
+  (let [sidebar-open? (:ui/sidebar-open? @state/state)
+        data (if sidebar-open? {:blocks (:sidebar/blocks @state/state)
+                                :collapsed (:ui/sidebar-collapsed-blocks @state/state)
+                                :open? true} {:open? false})]
+    (storage/set "ls-right-sidebar-state" data)))
+
+(defn restore-right-sidebar-state!
+  []
+  (when-let [data' (storage/get "ls-right-sidebar-state")]
+    (let [{:keys [open? collapsed blocks]} data']
+      (when open?
+        (state/set-state! :ui/sidebar-open? open?)
+        (state/set-state! :sidebar/blocks blocks)
+        (state/set-state! :ui/sidebar-collapsed-blocks collapsed)))))
+
 (defn toggle-contents!
   []
   (when-let [current-repo (state/get-current-repo)]

src/main/frontend/rum.cljs

@@ -2,7 +2,7 @@
   (:require [clojure.string :as s]
             [clojure.set :as set]
             [clojure.walk :as w]
-            [rum.core :refer [use-state use-effect!]]
+            [rum.core :refer [use-state use-effect!] :as rum]
             [cljs-bean.core :as bean]))
 
 ;; copy from https://github.com/priornix/antizer/blob/35ba264cf48b84e6597743e28b3570d8aa473e74/src/antizer/core.cljs
@@ -88,4 +88,14 @@
 (defn use-atom-in
   "(use-atom my-atom [:path :to :data])"
   [a path]
-  (use-atom-fn a #(get-in % path) #(assoc-in %1 path %2)))
+  (use-atom-fn a #(get-in % path) #(assoc-in %1 path %2)))
+
+(defn use-mounted
+  []
+  (let [*mounted (rum/use-ref false)]
+    (use-effect!
+      (fn []
+         (rum/set-ref! *mounted true)
+         #(rum/set-ref! *mounted false))
+       [])
+    #(rum/deref *mounted)))