enhance(mobile): back action ux for android

src/main/capacitor/components/app.cljs

@@ -165,10 +165,10 @@
 
 (defn use-theme-effects!
   [current-repo]
-  (let [_ (fstate/sync-system-theme!)
-        [theme] (frum/use-atom-in fstate/state :ui/theme)]
+  (let [[theme] (frum/use-atom-in fstate/state :ui/theme)]
     (hooks/use-effect!
      (fn []
+       (fstate/sync-system-theme!)
        (ui/setup-system-theme-effect!))
      [])
     (hooks/use-effect!

src/main/capacitor/externals.js

@@ -64,7 +64,7 @@ const settleStatusBar = async () => {
 }
 
 window.externalsjs = {
-  Keyboard, Capacitor,
+  Keyboard, Capacitor, StatusBar,
   initGlobalListeners,
   settleStatusBar,
 }

src/main/frontend/handler/events/ui.cljs

@@ -274,7 +274,8 @@
         :align :start}))))
 
 (defmethod events/handle :editor/hide-action-bar []
-  (shui/popup-hide! :selection-action-bar))
+  (shui/popup-hide! :selection-action-bar)
+  (state/set-state! :mobile/show-action-bar? false))
 
 (defmethod events/handle :user/logout [[_]]
   (file-sync-handler/reset-session-graphs)

src/main/frontend/mobile/core.cljs

@@ -8,6 +8,7 @@
             [frontend.mobile.flows :as mobile-flows]
             [frontend.mobile.intent :as intent]
             [frontend.mobile.util :as mobile-util]
+            [capacitor.state :as cc-state]
             [frontend.state :as state]
             [frontend.util :as util]))
 
@@ -34,6 +35,22 @@
 (defn- android-init
   "Initialize Android-specified event listeners"
   []
+  (.addListener App "backButton"
+    (fn []
+      (when (false?
+              (cond
+                (not-empty @cc-state/*modal-data)
+                :skip
+
+                (not-empty (state/get-selection-blocks))
+                (editor-handler/clear-selection!)
+
+                (state/editing?)
+                (editor-handler/escape-editing)
+
+                :else false))
+        (prn "TODO: handle back button in Android"))))
+
   (.addEventListener js/window "sendIntentReceived"
                      #(intent/handle-received)))
 

src/main/frontend/util.cljc

@@ -244,13 +244,17 @@
    (defn set-theme-light
      []
      (p/do!
-      (.setStyle StatusBar (clj->js {:style (.-Light Style)})))))
+       (.setStyle StatusBar (clj->js {:style (.-Light Style)}))
+       (when (mobile-util/native-android?)
+         (.setBackgroundColor StatusBar (clj->js {:color "#ffffff"}))))))
 
 #?(:cljs
    (defn set-theme-dark
      []
      (p/do!
-      (.setStyle StatusBar (clj->js {:style (.-Dark Style)})))))
+       (.setStyle StatusBar (clj->js {:style (.-Dark Style)}))
+       (when (mobile-util/native-android?)
+         (.setBackgroundColor StatusBar (clj->js {:color "#000000"}))))))
 
 (defn find-first
   [pred coll]