enhance(ux): show downloading modal on mobile

src/main/capacitor/components/popup.cljs

@@ -5,23 +5,37 @@
             [logseq.shui.ui :as shui]
             [rum.core :as rum]))
 
+(defonce *last-popup-modal? (atom nil))
+
 (defn popup-show!
   [event content-fn {:keys [id dropdown-menu?] :as opts}]
   (cond
     (and (keyword? id) (= "editor.commands" (namespace id)))
     ;; FIXME: Editing a block at bottom will scroll to top
-    (shui-popup/show! [0 86] content-fn opts)
+    (do
+      (shui-popup/show! [0 86] content-fn opts)
+      (reset! *last-popup-modal? false))
 
     dropdown-menu?
-    (shui-popup/show! event content-fn opts)
+    (do
+      (shui-popup/show! event content-fn opts)
+      (reset! *last-popup-modal? false))
 
     :else
     (when (fn? content-fn)
       (state/set-popup! {:open? true
                          :content-fn content-fn
-                         :opts opts}))))
+                         :opts opts})
+      (reset! *last-popup-modal? true))))
+
+(defn popup-hide!
+  [& args]
+  (if @*last-popup-modal?
+    (state/set-popup! nil)
+    (apply shui-popup/hide! args)))
 
 (set! shui/popup-show! popup-show!)
+(set! shui/popup-hide! popup-hide!)
 
 (rum/defc popup < rum/reactive
   []

src/main/capacitor/components/settings.cljs

@@ -1,6 +1,5 @@
 (ns capacitor.components.settings
   (:require [capacitor.ionic :as ion]
-            [capacitor.state :as state]
             [frontend.components.repo :as repo]
             [frontend.components.user.login :as login]
             [frontend.handler.user :as user-handler]
@@ -8,25 +7,6 @@
             [logseq.shui.ui :as shui]
             [rum.core :as rum]))
 
-(comment
-  (rum/defc all-graphs < rum/reactive
-    []
-    (let [graphs (fstate/sub :rtc/graphs)]
-      [:div.py-4
-       [:div.flex.justify-between.items-center
-        [:h2.text-xl.font-medium.my-3.flex.gap-2.items-center.opacity-80
-         (shui/tabler-icon "server" {:size 22}) "Your RTC graphs"]
-
-        (ion/button
-         {:mode "ios" :size "small" :color "secondary"
-          :on-click (fn [] (rtc-handler/<get-remote-graphs))} "refresh")]
-
-       [:ul
-        (for [{:keys [url GraphName GraphSchemaVersion]} graphs]
-          [:li
-           [:p.inline-flex.items-center.gap-1
-            [:a.text-lg.mr-2 GraphName]] [:code "ver." GraphSchemaVersion]])]])))
-
 (rum/defc user-profile < rum/reactive
   []
   (let [login? (and (fstate/sub :auth/id-token) (user-handler/logged-in?))]
@@ -48,27 +28,22 @@
 
 (rum/defc page
   []
-  (let [[^js nav] (state/use-nav-root)]
-    (ion/page
-     (ion/header
-      (ion/toolbar
-       (ion/title "Settings")
-       (ion/buttons {:slot "end"}
-                    (ion/button {:fill "clear"
-                                 :on-click #(.pop nav)}
-                                (ion/tabler-icon "help" {:size 26})))))
+  (ion/page
+   (ion/header
+    (ion/toolbar
+     (ion/title "Settings")))
 
-     (ion/content {:class "ion-padding"}
-                  (ion/refresher
-                   {:slot "fixed"
-                    :pull-factor 0.5
-                    :pull-min 100
-                    :pull-max 200
-                    :on-ion-refresh (fn [^js e]
-                                      (js/setTimeout
-                                       #(.complete (.-detail e))
-                                       3000))}
-                   (ion/refresher-content))
-                  (user-profile)
-                  [:div.mt-8
-                   (repo/repos-cp)]))))
+   (ion/content {:class "ion-padding"}
+                (ion/refresher
+                 {:slot "fixed"
+                  :pull-factor 0.5
+                  :pull-min 100
+                  :pull-max 200
+                  :on-ion-refresh (fn [^js e]
+                                    (js/setTimeout
+                                     #(.complete (.-detail e))
+                                     3000))}
+                 (ion/refresher-content))
+                (user-profile)
+                [:div.mt-8
+                 (repo/repos-cp)])))

src/main/capacitor/state.cljs

@@ -1,10 +1,6 @@
 (ns capacitor.state
   (:require [frontend.rum :as r]))
 
-(defonce *nav-root (atom nil))
-
-(defn use-nav-root [] (r/use-atom *nav-root))
-
 (defonce *tab (atom "home"))
 (defn set-tab!
   [tab]

src/main/frontend/handler/events.cljs

@@ -46,11 +46,13 @@
             [frontend.persist-db :as persist-db]
             [frontend.quick-capture :as quick-capture]
             [frontend.state :as state]
+            [frontend.ui :as ui]
             [frontend.util :as util]
             [frontend.util.persist-var :as persist-var]
             [goog.dom :as gdom]
             [lambdaisland.glogi :as log]
             [logseq.db.frontend.schema :as db-schema]
+            [logseq.shui.ui :as shui]
             [promesa.core :as p]))
 
 ;; TODO: should we move all events here?
@@ -376,10 +378,22 @@
 (defmethod handle :rtc/download-remote-graph [[_ graph-name graph-uuid graph-schema-version]]
   (->
    (p/do!
-    (rtc-handler/<rtc-download-graph! graph-name graph-uuid graph-schema-version 60000))
+    (when (util/mobile?)
+      (shui/popup-show!
+       nil
+       (fn []
+         [:div.flex.items-center.justify-center.mt-8.text-2xl
+          (ui/loading (str "Downloading " graph-name))])))
+    (rtc-handler/<rtc-download-graph! graph-name graph-uuid graph-schema-version 60000)
+    (when (util/mobile?)
+      (shui/popup-hide!)))
    (p/catch (fn [e]
               (println "RTC download graph failed, error:")
-              (js/console.error e)))))
+              (js/console.error e)
+              (when (util/mobile?)
+                (shui/popup-hide!)
+                ;; TODO: notify error
+                )))))
 
 ;; db-worker -> UI
 (defmethod handle :db/sync-changes [[_ data]]