enhance(mobile): use persistent sheet for left sidebar

packages/ui/src/silkhq/PersistentSheetWithDetent.tsx

@@ -109,9 +109,10 @@ const PersistentSheetWithDetentView = React.forwardRef<
   React.ComponentPropsWithoutRef<typeof Sheet.View> & {
     dimmingColor?: string;
   }
->(({ children, className, dimmingColor, ...restProps }, ref) => {
+>(({ children, className, dimmingColor, onTravel, ...restProps }, ref) => {
   const viewRef = useRef<HTMLDivElement>(null);
-  const [inertOutside, setInertOutside] = useState(false);
+  const [inertOutside, setInertOutside] = useState(restProps.inertOutside);
+  console.log('inertOutside' + inertOutside);
   const {
     range,
     setRange,
@@ -156,6 +157,8 @@ const PersistentSheetWithDetentView = React.forwardRef<
     };
   }, [range.start, range.end]);
 
+  useEffect(() => {setInertOutside(restProps.inertOutside)}, [restProps.inertOutside]);
+
   //
   // Travel handler
 
@@ -170,7 +173,12 @@ const PersistentSheetWithDetentView = React.forwardRef<
 
   const travelHandler: NonNullable<React.ComponentProps<typeof Sheet.View>["onTravel"]> =
     useCallback(
-      ({ progress, range, progressAtDetents }) => {
+      (data) => {
+        if (typeof onTravel === 'function') {
+          onTravel(data)
+        }
+
+        const { progress, range, progressAtDetents } = data
         if (!progressAtDetents) return;
 
         if (range.end > 1) {

src/main/mobile/components/app.cljs

@@ -99,40 +99,6 @@
        #(.removeEventListener js/window "orientationchange" handle-size!)))
    []))
 
-(defn setup-sidebar-touch-swipe! []
-  (let [touch-start-x (atom 0)
-        touch-start-y (atom 0)
-        has-triggered? (atom false)
-        edge-threshold 30
-        swipe-trigger-distance 50
-        max-vertical-drift 50
-
-        on-touch-start (fn [^js e]
-                         (let [touch (aget e "touches" 0)]
-                           (reset! touch-start-x (.-pageX touch))
-                           (reset! touch-start-y (.-pageY touch))
-                           (reset! has-triggered? false)))
-
-        on-touch-move (fn [^js e]
-                        (when-not @has-triggered?
-                          (let [touch (aget e "touches" 0)
-                                delta-x (- (.-pageX touch) @touch-start-x)
-                                delta-y (js/Math.abs (- (.-pageY touch) @touch-start-y))
-                                started-from-edge (<= @touch-start-x edge-threshold)
-                                is-horizontal-swipe (and (> delta-x swipe-trigger-distance)
-                                                         (< delta-y max-vertical-drift))]
-                            (when (and started-from-edge is-horizontal-swipe)
-                              (reset! has-triggered? true)
-                              (mobile-state/open-left-sidebar!)))))]
-
-    (.addEventListener js/document "touchstart" on-touch-start #js {:passive true})
-    (.addEventListener js/document "touchmove" on-touch-move #js {:passive true})
-
-    ;; Return cleanup function
-    #(do
-       (.removeEventListener js/document "touchstart" on-touch-start)
-       (.removeEventListener js/document "touchmove" on-touch-move))))
-
 (rum/defc app
   [current-repo {:keys [login?]}]
   (let [[tab] (mobile-state/use-tab)
@@ -141,7 +107,6 @@
     (use-theme-effects! current-repo)
     (hooks/use-effect!
      (fn []
-       (setup-sidebar-touch-swipe!)
        (when-let [element (util/mobile-page-scroll)]
          (common-handler/listen-to-scroll! element))) [])
     (silkhq/depth-sheet-stack

src/main/mobile/components/app.css

@@ -508,6 +508,14 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
 
 .app-silk-sidebar-sheet-content {
   @apply bg-gray-01 dark:bg-gray-02 flex flex-col items-center p-2;
+  box-sizing: border-box;
+  height: 100%;
+  max-width: 800px;
+
+  /* APPEARANCE */
+  border-radius: 0;
+  overflow: hidden;
+  background-color: white;
 }
 
 .left-sidebar-inner {
@@ -521,3 +529,8 @@ html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
     }
   }
 }
+
+.Sidebar-hidden {
+    box-shadow: none;
+    background: transparent;
+}

src/main/mobile/components/left_sidebar.cljs

@@ -1,31 +1,60 @@
 (ns mobile.components.left-sidebar
   "Mobile left sidebar"
-  (:require [frontend.components.container :as container]
+  (:require [cljs-bean.core :as bean]
+            [dommy.core :as dom]
+            [frontend.components.container :as container]
+            [logseq.shui.hooks :as hooks]
             [logseq.shui.silkhq :as silkhq]
             [mobile.state :as mobile-state]
             [rum.core :as rum]))
 
-(rum/defc left-sidebar < rum/reactive
+(rum/defc sidebar-content
   []
-  (let [open? (rum/react mobile-state/*left-sidebar-open?)]
-    (silkhq/sidebar-sheet
-      {:presented (boolean open?)
-       :onPresentedChange (fn [v]
-                            (when (false? v)
-                              (mobile-state/close-left-sidebar!)))}
-      (silkhq/sidebar-sheet-portal
-        (silkhq/sidebar-sheet-view
-          {:class "app-silk-sidebar-sheet-view"}
-          (silkhq/sidebar-sheet-backdrop)
-          (silkhq/sidebar-sheet-content
-            {:class "app-silk-sidebar-sheet-content"}
-            (silkhq/sidebar-sheet-handle)
-            [:div.w-full.app-silk-popup-content-inner.p-2
-             [:div.left-sidebar-inner
-              [:div.sidebar-contents-container.mt-8
-               {:on-pointer-down
-                (fn [^js e]
-                  (when (some-> (.-target e) (.closest ".link-item"))
-                    (mobile-state/toggle-left-sidebar!)))}
-               (container/sidebar-favorites)
-               (container/sidebar-recent-pages)]]]))))))
+  [:div.w-full.app-silk-popup-content-inner.p-2
+   [:div.left-sidebar-inner
+    [:div.sidebar-contents-container.mt-8
+     {:on-pointer-down
+      (fn [^js e]
+        (when (some-> (.-target e) (.closest ".link-item"))
+          (mobile-state/close-left-sidebar!)))}
+     (container/sidebar-favorites)
+     (container/sidebar-recent-pages)]]])
+
+(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)]
+    (hooks/use-effect!
+     (fn []
+       (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))))))))

src/main/mobile/state.cljs

@@ -19,19 +19,23 @@
   [data]
   (reset! *popup-data data))
 
-(defonce *left-sidebar-open? (atom false))
+(defonce *left-sidebar-detent (atom 0))
 
-(defn toggle-left-sidebar!
-  []
-  (swap! *left-sidebar-open? not))
+(defn use-left-sidebar-detent [] (r/use-atom *left-sidebar-detent))
 
 (defn open-left-sidebar!
   []
-  (reset! *left-sidebar-open? true))
+  (reset! *left-sidebar-detent 3))
 
 (defn close-left-sidebar!
   []
-  (reset! *left-sidebar-open? false))
+  (reset! *left-sidebar-detent 1))
+
+(defn toggle-left-sidebar!
+  []
+  (if (contains? #{0 1} @*left-sidebar-detent)
+    (open-left-sidebar!)
+    (close-left-sidebar!)))
 
 (defn redirect-to-tab! [name]
   (set-tab! (str name)))