enhance(mobile): improve the editor scroll view

src/main/frontend/mobile/index.css

@@ -26,15 +26,13 @@
 }
 
 #mobile-editor-toolbar {
-  @apply fixed -bottom-1 left-0 w-full z-[99999] flex justify-between bg-gray-100 border-t border-gray-200
+  @apply absolute bottom-0 left-0 w-full z-[99999] flex justify-between bg-gray-100 border-t border-gray-200
   dark:border-gray-800 dark:bg-[#222];
 
-  /*
   will-change: transform;
   transform: translateY(calc(-1 * var(--ls-native-kb-height, 0)));
   opacity: var(--ls-native-toolbar-opacity, 0);
   transition: transform 250ms ease-out, opacity 50ms ease-out;
-   */
 
   button {
     @apply flex items-center py-2 px-2 opacity-95;

src/main/mobile/components/app.cljs

@@ -143,6 +143,17 @@
       (some-> js/window.externalsjs (.settleStatusBar)))
     [current-repo]))
 
+(defn use-screen-size-effects!
+  []
+  (hooks/use-effect!
+    (fn []
+      (let [handle-size! (fn []
+                           (.setProperty (.-style js/document.body) "--ls-full-screen-height" (str js/window.screen.height "px")))]
+        (handle-size!)
+        (.addEventListener js/window "orientationchange" handle-size!)
+        #(.removeEventListener js/window "orientationchange" handle-size!)))
+    []))
+
 (rum/defc journal-calendar-btn
   []
   (shui/button
@@ -174,14 +185,15 @@
   (let [[tab] (mobile-state/use-tab)
         *home (rum/use-ref nil)
         *search-page (rum/use-ref nil)]
+    (use-screen-size-effects!)
     (use-theme-effects! current-repo)
     (silkhq/depth-sheet-stack {:as-child true}
       (silkhq/depth-sheet-scenery-outlets
         (silkhq/scroll {:as-child true}
           (silkhq/scroll-view
-            {:class "silk-scroll-view"
+            {:class "app-silk-index-scroll-view"
              :pageScroll true
-             :nativePageScrollReplacement true}
+             :nativePageScrollReplacement false}
             (silkhq/scroll-content
               {:class "app-silk-index-scroll-content"}
               [:div.app-silk-index-container

src/main/mobile/components/app.css

@@ -20,15 +20,9 @@ html.is-native-android {
 }
 
 #mobile-editor-toolbar {
-  @apply opacity-0 delay-100;
-  bottom: calc(var(--safe-area-inset-bottom) - 2px);
 }
 
 html.has-mobile-keyboard {
-  .app-silk-tabs {
-    display: none;
-  }
-
   #mobile-editor-toolbar {
     @apply opacity-100;
   }
@@ -50,6 +44,14 @@ html {
   }
 }
 
+body {
+  position: relative;
+
+  .SheetWithDepth-stackSceneryContainer, > .SheetWithDepth-view {
+    height: var(--ls-full-screen-height, "auto");
+  }
+}
+
 ul {
   @apply !list-disc ml-1 mt-2 list-inside;
 
@@ -62,7 +64,6 @@ ul {
   @apply bg-gray-01;
 }
 
-
 .pswp__top-bar {
   @apply top-8;
 }
@@ -230,8 +231,6 @@ ul {
 
 .app-silk-sheet-scroll-content {
   @apply flex flex-col items-center;
-
-
 }
 
 .BottomSheet-bleedingBackground,
@@ -255,6 +254,13 @@ ul {
   display: grid;
 }
 
+html[data-silk-native-page-scroll-replaced=false] .app-silk-index-scroll-view {
+  & > div:first-child {
+    height: var(--ls-full-screen-height, "auto") !important;
+    overflow-y: auto !important;
+  }
+}
+
 .app-silk-index-container {
   @apply p-4 flex flex-col gap-3 bg-gray-01;
 
@@ -300,11 +306,11 @@ ul {
 }
 
 .app-silk-tabs {
-  @apply flex border-t overflow-hidden
-  bg-gray-02 fixed left-0 bottom-0 w-full z-[1] dark:bg-gray-01;
+  @apply flex border-t overflow-hidden select-none
+  bg-gray-02 absolute left-0 -bottom-0 w-full z-[1] dark:bg-gray-01;
 
-  padding-top: 4px;
-  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
+  padding-top: 6px;
+  padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
 
   > .as-item {
     @apply flex flex-1 flex-col items-center pb-1 transition-opacity;

src/main/mobile/components/demos.cljs

@@ -18,6 +18,7 @@
             {:class "app-silk-scroll-content"}
             [:div.app-silk-scroll-content-inner
              [:h1.my-4.text-3xl.font-semibold "hello silk depth view"]
+             (shui/input)
              (when (not nested?)
                (silkhq/depth-sheet
                  (silkhq/depth-sheet-trigger

src/main/mobile/components/editor_toolbar.cljs

@@ -77,6 +77,7 @@
                  (= "app-keep-keyboard-open-input" (some-> js/document.activeElement (.-id)))))
     (let [commands' (commands)]
       [:div#mobile-editor-toolbar
+       {:on-click #(util/stop %)}
        [:div.toolbar-commands
         ;; (command (editor-handler/move-up-down true) {:icon "arrow-bar-to-up"})
         ;; (command (editor-handler/move-up-down false) {:icon "arrow-bar-to-down"})

src/main/mobile/components/modal.cljs

@@ -41,8 +41,7 @@
             {:class "app-silk-sheet-scroll-content"}
             (silkhq/scroll {:as-child true}
               (silkhq/scroll-view
-                {:class "app-silk-scroll-view"
-                 :scrollGestureTrap {:yEnd true}}
+                {:class "app-silk-scroll-view"}
                 (silkhq/scroll-content
                   {:class "app-silk-scroll-content"}
                   [:div.app-silk-scroll-content-inner