enhance(ui): persist widen mode state

src/main/frontend/components/sidebar.cljs

@@ -468,6 +468,7 @@
         sidebar-open?  (state/sub :ui/sidebar-open?)
         settings-open? (state/sub :ui/settings-open?)
         left-sidebar-open?  (state/sub :ui/left-sidebar-open?)
+        wide-mode? (state/sub :ui/wide-mode?)
         right-sidebar-blocks (state/sub-right-sidebar-blocks)
         route-name (get-in route-match [:data :name])
         global-graph-pages? (= :graph route-name)
@@ -496,7 +497,8 @@
 
      [:div.theme-inner
       {:class (util/classnames [{:ls-left-sidebar-open left-sidebar-open?
-                                 :ls-right-sidebar-open sidebar-open?}])}
+                                 :ls-right-sidebar-open sidebar-open?
+                                 :ls-wide-mode wide-mode?}])}
 
       [:div.#app-container
        [:div#left-container

src/main/frontend/components/sidebar.css

@@ -298,6 +298,12 @@
   }
 }
 
+.ls-wide-mode {
+ .cp__sidebar-main-content {
+   max-width: var(--ls-main-content-max-width-wide);
+ }
+}
+
 html[data-theme='dark'] {
   #left-sidebar {
     > .shade-mask {

src/main/frontend/handler/ui.cljs

@@ -169,12 +169,8 @@
 
 (defn toggle-wide-mode!
   []
-  (let [wide? (state/get-wide-mode?)
-        elements (array-seq (js/document.getElementsByClassName "cp__sidebar-main-content"))
-        max-width (if wide? "var(--ls-main-content-max-width)" "var(--ls-main-content-max-width-wide)")]
-    (when-let [element (first elements)]
-      (dom/set-style! element :max-width max-width))
-    (state/toggle-wide-mode!)))
+  (storage/set :ui/wide-mode (not (state/get-wide-mode?)))
+  (state/toggle-wide-mode!))
 
 ;; auto-complete
 (defn auto-complete-prev

src/main/frontend/state.cljs

@@ -72,7 +72,7 @@
      :ui/left-sidebar-open?                 (boolean (storage/get "ls-left-sidebar-open?"))
      :ui/theme                              (or (storage/get :ui/theme) (if (mobile-util/is-native-platform?) "light" "dark"))
      :ui/system-theme?                      ((fnil identity (or util/mac? util/win32? false)) (storage/get :ui/system-theme?))
-     :ui/wide-mode?                         false
+     :ui/wide-mode?                         (storage/get :ui/wide-mode)
 
      ;; ui/collapsed-blocks is to separate the collapse/expand state from db for:
      ;; 1. right sidebar