fix(mobile): editor and selection toolbar on quick add

src/main/frontend/components/block.cljs

@@ -93,7 +93,6 @@
             [logseq.shui.hooks :as hooks]
             [logseq.shui.ui :as shui]
             [medley.core :as medley]
-            [mobile.state :as mobile-state]
             [promesa.core :as p]
             [reitit.frontend.easy :as rfe]
             [rum.core :as rum]
@@ -3658,10 +3657,7 @@
                    (when original-block " embed-block"))
        :haschild (str (boolean has-child?))
        :on-touch-start (fn [event uuid]
-                         (when-not (or @*dragging?
-                                       (state/editing?)
-                                       (contains? #{:ls-quick-add}
-                                                  (get-in @mobile-state/*popup-data [:opts :id])))
+                         (when-not (or @*dragging? (state/editing?))
                            (block-handler/on-touch-start event uuid)))
        :on-touch-end (fn [event]
                        (when-not @*dragging?
@@ -4395,10 +4391,7 @@
 (rum/defc block-list
   [config blocks]
   (let [[virtualized? _] (rum/use-state (not (or (and (:journals? config) (< (count blocks) 50))
-                                                 (:block-children? config)
-                                                 (and (util/mobile?)
-                                                      (= common-config/quick-add-page-name
-                                                         (:block/title (:block/page (first blocks))))))))
+                                                 (:block-children? config))))
         render-item (fn [idx]
                       (let [top? (zero? idx)
                             bottom? (= (dec (count blocks)) idx)

src/main/frontend/components/quick_add.cljs

@@ -22,21 +22,25 @@
   []
   (when (db/get-page (date/today))
     (when-let [add-page (ldb/get-built-in-page (db/get-db) common-config/quick-add-page-name)]
-      (let [mobile? (util/mobile?)]
-        [:div.ls-quick-capture.flex.flex-1.flex-col.w-full.gap-4
-         [:div.font-medium.border-b.pb-4
-          {:class (when-not mobile? "text-xs")}
-          "Quick add"]
+      (let [mobile? (util/mobile?)
+            add-button [:div
+                        (shui/button
+                         {:variant (if mobile? :default :outline)
+                          :size :sm
+                          :on-click (fn [_e]
+                                      (editor-handler/quick-add-blocks!))}
+                         (when-not mobile? (shui/shortcut ["mod" "e"]))
+                         "Add to today")]]
+        [:div.ls-quick-add.flex.flex-1.flex-col.w-full.gap-4
+         [:div.border-b.pb-4.flex.flex-row.justify-between.gap-4.items-center
+          [:div.font-medium
+           {:class (when-not mobile? "text-xs")}
+           "Quick add"]
+          (when mobile? add-button)]
          [:div.content
           {:class (if mobile?
                     "flex flex-1 flex-col w-full"
                     "block -ml-6")}
-          (page/page-blocks-cp add-page {})]
-         [:div
-          (shui/button
-           {:variant (if mobile? :default :outline)
-            :size :sm
-            :on-click (fn [_e]
-                        (editor-handler/quick-add-blocks!))}
-           (when-not mobile? (shui/shortcut ["mod" "e"]))
-           "Add to today")]]))))
+          (page/page-blocks-cp add-page {})
+          (when-not mobile?
+            add-button)]]))))

src/main/frontend/mobile/index.css

@@ -1,6 +1,6 @@
 .action-bar {
   @apply fixed bottom-[100px] h-[70px] p-1.5 rounded-md overflow-y-hidden overflow-x-auto
-  shadow-md bg-[var(--ls-secondary-background-color)] z-[100];
+  shadow-md bg-[var(--ls-secondary-background-color)] z-[99999];
 
   .action-bar-commands {
     @apply relative flex w-full;
@@ -26,7 +26,7 @@
 }
 
 #mobile-editor-toolbar {
-  @apply fixed -bottom-1 left-0 w-full z-[9999] flex justify-between bg-gray-100 border-t border-gray-200
+  @apply fixed -bottom-1 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;

src/main/mobile/components/app.cljs

@@ -243,12 +243,9 @@
 (rum/defc main < rum/reactive
   []
   (let [current-repo (state/sub :git/current-repo)
-        show-action-bar? (state/sub :mobile/show-action-bar?)
-        {:keys [open?]} (rum/react mobile-state/*modal-data)]
+        show-action-bar? (state/sub :mobile/show-action-bar?)]
     (ion/app
      (tabs current-repo)
-     (when-not open?
-       [:<>
-        (editor-toolbar/mobile-bar)
-        (when show-action-bar?
-          (selection-toolbar/action-bar))]))))
+     (editor-toolbar/mobile-bar)
+     (when show-action-bar?
+       (selection-toolbar/action-bar)))))

src/main/mobile/components/modal.cljs

@@ -7,8 +7,6 @@
             [frontend.handler.page :as page-handler]
             [frontend.state :as state]
             [frontend.ui :as ui]
-            [mobile.components.editor-toolbar :as mobile-bar]
-            [mobile.components.selection-toolbar :as selection-toolbar]
             [mobile.components.ui :as mobile-ui]
             [mobile.init :as init]
             [mobile.ionic :as ion]
@@ -18,7 +16,6 @@
 (rum/defc block-modal < rum/reactive
   [presenting-element]
   (let [{:keys [open? block]} (rum/react mobile-state/*modal-data)
-        show-action-bar? (state/sub :mobile/show-action-bar?)
         close! #(swap! mobile-state/*modal-data assoc :open? false)
         block (when-let [id (:block/uuid block)]
                 (db/entity [:block/uuid id]))
@@ -78,7 +75,4 @@
 
       (ion/content {:class "ion-padding scrolling"}
                    (mobile-ui/classic-app-container-wrap
-                    (page/page-cp (db/entity [:block/uuid (:block/uuid block)])))
-                   (mobile-bar/mobile-bar)
-                   (when show-action-bar?
-                     (selection-toolbar/action-bar)))))))
+                    (page/page-cp (db/entity [:block/uuid (:block/uuid block)]))))))))

src/main/mobile/components/popup.cljs

@@ -67,20 +67,21 @@
 
 (rum/defc popup < rum/reactive
   []
-  (let [{:keys [open? content-fn opts]} (rum/react mobile-state/*popup-data)]
+  (let [{:keys [open? content-fn opts]} (rum/react mobile-state/*popup-data)
+        initial-breakpoint (if (= (:id opts) :ls-quick-add) 1 0.75)]
     (when open?
-      ;; (state/clear-edit!)
+      (state/clear-edit!)
       (init/keyboard-hide))
     (ion/modal
      (merge
       {:isOpen (boolean open?)
-       :initialBreakpoint 0.75
+       :initialBreakpoint initial-breakpoint
        :breakpoints #js [0 0.75 1]
        :onDidDismiss (fn [] (mobile-state/set-popup! nil))
        :expand "block"}
       (:modal-props opts))
      (ion/content
-      {:class "ion-padding"}
+      {:class "ion-padding scrolling"}
       [:<>
        (when-let [title (:title opts)]
          [:h2.py-2.opacity-40 title])

src/main/mobile/events.cljs

@@ -2,6 +2,7 @@
   "Mobile events"
   (:require [frontend.components.quick-add :as quick-add]
             [frontend.handler.events :as events]
+            [mobile.components.ui :as mobile-ui]
             [mobile.init :as init]
             [mobile.state :as mobile-state]
             [promesa.core :as p]))
@@ -14,5 +15,7 @@
 
 (defmethod events/handle :dialog/mobile-quick-add [_]
   (mobile-state/set-popup! {:open? true
-                            :content-fn (fn [] (quick-add/quick-add))
+                            :content-fn (fn []
+                                          (mobile-ui/classic-app-container-wrap
+                                           (quick-add/quick-add)))
                             :opts {:id :ls-quick-add}}))