wip: use ionic modal instead of shui popup on mobile

src/main/capacitor/components/app.cljs

@@ -1,6 +1,7 @@
 (ns capacitor.components.app
   (:require ["../externals.js"]
             [capacitor.components.modal :as modal]
+            [capacitor.components.popup :as popup]
             [capacitor.components.search :as search]
             [capacitor.components.settings :as settings]
             [capacitor.components.ui :as ui-component]
@@ -228,7 +229,8 @@
      (shui-toaster/install-toaster)
      (shui-dialog/install-modals)
      (shui-popup/install-popups)
-     (modal/modal presenting-element))))
+     (modal/modal presenting-element)
+     (popup/popup))))
 
 (rum/defc main < rum/reactive
   []

src/main/capacitor/components/popup.cljs

@@ -0,0 +1,28 @@
+(ns capacitor.components.popup
+  (:require [capacitor.ionic :as ion]
+            [capacitor.state :as state]
+            [logseq.shui.ui :as shui]
+            [rum.core :as rum]))
+
+(defn popup-show!
+  [_event content-fn opts]
+  (when (fn? content-fn)
+    (state/set-popup! {:open? true
+                       :content-fn content-fn
+                       :opts opts})))
+
+(set! shui/popup-show! popup-show!)
+
+(rum/defc popup < rum/reactive
+  []
+  (let [{:keys [open? content-fn _opts]} (rum/react state/*popup-data)]
+    (ion/modal
+     {:isOpen (boolean open?)
+      :initialBreakpoint 0.75
+      :breakpoints #js [0 0.75 1]
+      :onDidDismiss (fn [] (state/set-popup! nil))
+      :expand "block"}
+     (ion/content
+      {:class "ion-padding"}
+      (when content-fn
+        (content-fn))))))

src/main/capacitor/core.cljs

@@ -1,11 +1,9 @@
 (ns capacitor.core
   (:require ["react-dom/client" :as rdc]
             [capacitor.components.app :as app]
-            [capacitor.nav :as nav]
             [capacitor.state :as state]
             [frontend.background-tasks]
             [frontend.components.page :as page]
-            [frontend.components.user.login :as login]
             [frontend.handler :as fhandler]
             [frontend.handler.db-based.rtc-background-tasks]
             [frontend.handler.route :as route-handler]

src/main/capacitor/nav.cljs

@@ -1,21 +0,0 @@
-(ns capacitor.nav
-  (:require [capacitor.components.page :as page]
-            [capacitor.state :as state]
-            [cljs-bean.core :as bean]))
-
-;; https://ionicframework.com/docs/api/nav#push
-(defn nav-push!
-  [component & opts]
-  (some-> @state/*nav-root
-          (.push component (bean/->js opts))))
-
-(defn nav-pop! []
-  (some-> @state/*nav-root (.pop)))
-
-(defn nav-length? []
-  (some-> ^js @state/*nav-root (.getLength)))
-
-(comment
-  (defn nav-to-block!
-    [page-or-block]
-    (nav-push! #(page/page page-or-block))))

src/main/capacitor/state.cljs

@@ -15,8 +15,12 @@
 (defn set-modal!
   [data]
   (reset! *modal-data data))
-
 (defn open-block-modal!
   [block]
   (set-modal! {:open? true
                :block block}))
+
+(defonce *popup-data (atom nil))
+(defn set-popup!
+  [data]
+  (reset! *popup-data data))