fix(mobile): clicking item in left sidebar should close it quickly

packages/ui/src/silkhq/PersistentSheetWithDetent.tsx

@@ -112,7 +112,7 @@ const PersistentSheetWithDetentView = React.forwardRef<
 >(({ children, className, dimmingColor, onTravel, ...restProps }, ref) => {
   const viewRef = useRef<HTMLDivElement>(null);
   const [inertOutside, setInertOutside] = useState(restProps.inertOutside);
-  console.log('inertOutside' + inertOutside);
+
   const {
     range,
     setRange,

src/main/mobile/components/left_sidebar.cljs

@@ -3,6 +3,8 @@
   (:require [cljs-bean.core :as bean]
             [dommy.core :as dom]
             [frontend.components.container :as container]
+            [frontend.rum :as r]
+            [frontend.util :as util]
             [logseq.shui.hooks :as hooks]
             [logseq.shui.silkhq :as silkhq]
             [mobile.state :as mobile-state]
@@ -23,38 +25,51 @@
 (rum/defc left-sidebar
   []
   (let [*ref (hooks/use-ref nil)
-        [detent set-detent!] (mobile-state/use-left-sidebar-detent)
-        [inertOutside setInertOutside!] (hooks/use-state false)]
+        [detent set-detent!] (r/use-atom mobile-state/*left-sidebar-detent)
+        [{:keys [open? _block]}] (mobile-state/use-singleton-modal)
+        [inertOutside setInertOutside!] (r/use-atom mobile-state/*left-sidebar-inert-outside?)]
+
     (hooks/use-effect!
      (fn []
-       (set-detent! 1))
+       (when (zero? detent)
+         (set-detent! 1)))
      [])
-    (silkhq/persistent-sheet
-     {:presented true
-      :onPresentedChange (fn [_v])
-      :activeDetent (if (= detent 0) 1 detent)
-      :onActiveDetentChange (fn [_v])}
-     (silkhq/persistent-sheet-portal
-      (silkhq/persistent-sheet-view
-       {:class "app-silk-sidebar-sheet-view"
-        :contentPlacement "left"
-        :detents ["25px" "min(90vw, 325px)"]
-        :onTravel (fn [v]
-                    (let [{:keys [range]} (bean/->clj v)
-                          {:keys [start end]} range
-                          ref (.-current *ref)]
-                      (cond (and (= start 1) (= end 2))
-                            (do
-                              (dom/remove-class! ref "Sidebar-hidden")
-                              (setInertOutside! true))
 
-                            (and (= start 1) (= end 1))
-                            (do
-                              (dom/add-class! ref "Sidebar-hidden")
-                              (setInertOutside! false)))))
-        :inertOutside inertOutside}
-       (silkhq/persistent-sheet-content
-        {:ref *ref
-         :class "app-silk-sidebar-sheet-content Sidebar-content Sidebar-hidden"}
-        (silkhq/persistent-sheet-expanded-content
-         (sidebar-content))))))))
+    (when-not open?
+      (silkhq/persistent-sheet
+       {:presented true
+        :onPresentedChange (fn [_v])
+        :activeDetent detent
+        :onActiveDetentChange (fn [v]
+                                (when (and v (not= v detent))
+                                  (set-detent! v)))}
+       (silkhq/persistent-sheet-portal
+        (silkhq/persistent-sheet-view
+         {:class "app-silk-sidebar-sheet-view"
+          :contentPlacement "left"
+          :detents ["25px" "min(90vw, 325px)"]
+          :onTravel (fn [v]
+                      (when-not open?
+                        (let [{:keys [range]} (bean/->clj v)
+                              {:keys [start end]} range
+                              ref (.-current *ref)]
+                          (when ref
+                            (cond (and (= start 1) (= end 2))
+                                  (do
+                                    (dom/remove-class! ref "Sidebar-hidden")
+                                    (setInertOutside! true))
+
+                                  (and (<= start 1) (<= end 1))
+                                  (do
+                                    (dom/add-class! ref "Sidebar-hidden")
+                                    (setInertOutside! false)))))))
+          :onClickOutside (fn [e]
+                            (util/stop e)
+                            (bean/->js {:dismiss false}))
+
+          :inertOutside inertOutside}
+         (silkhq/persistent-sheet-content
+          {:ref *ref
+           :class "app-silk-sidebar-sheet-content Sidebar-content Sidebar-hidden"}
+          (silkhq/persistent-sheet-expanded-content
+           (sidebar-content)))))))))

src/main/mobile/state.cljs

@@ -20,16 +20,17 @@
   (reset! *popup-data data))
 
 (defonce *left-sidebar-detent (atom 0))
-
-(defn use-left-sidebar-detent [] (r/use-atom *left-sidebar-detent))
+(defonce *left-sidebar-inert-outside? (atom false))
 
 (defn open-left-sidebar!
   []
-  (reset! *left-sidebar-detent 3))
+  (reset! *left-sidebar-inert-outside? true)
+  (reset! *left-sidebar-detent 2))
 
 (defn close-left-sidebar!
   []
-  (reset! *left-sidebar-detent 1))
+  (reset! *left-sidebar-inert-outside? false)
+  (reset! *left-sidebar-detent 0))
 
 (defn toggle-left-sidebar!
   []