wip: fix rtc on mobile

shadow-cljs.edn

@@ -2,7 +2,7 @@
 {:deps true
  :nrepl {:port 8701}
 
- :ssl   {:password "logseq"}
+ ;; :ssl   {:password "logseq"}
  ;; "." for /static
  :dev-http {3001 ["static" "."]
             3002 "static/capacitor"

src/main/capacitor/components/app.cljs

@@ -9,16 +9,20 @@
             [capacitor.state :as state]
             [clojure.string :as string]
             [frontend.components.journal :as journal]
+            [frontend.components.rtc.indicator :as rtc-indicator]
+            [frontend.config :as config]
             [frontend.date :as date]
             [frontend.db :as db]
             [frontend.db.conn :as db-conn]
             [frontend.handler.page :as page-handler]
             [frontend.handler.repo :as repo-handler]
-            [frontend.mobile.mobile-bar :as mobile-bar ]
+            [frontend.handler.user :as user-handler]
+            [frontend.mobile.mobile-bar :as mobile-bar]
             [frontend.mobile.util :as mobile-util]
             [frontend.rum :as frum]
             [frontend.state :as fstate]
             [goog.date :as gdate]
+            [logseq.db :as ldb]
             [logseq.shui.dialog.core :as shui-dialog]
             [logseq.shui.hooks :as hooks]
             [logseq.shui.popup.core :as shui-popup]
@@ -57,11 +61,11 @@
                                                            (repo-handler/new-db! db-name)))
                                                        (when (string/starts-with? role "logseq_db_")
                                                          (fstate/pub-event! [:graph/switch role])))))})))}
-       [:span.flex.items-center.gap-2.opacity-95.pt-1
-        (ion/tabler-icon "database" {:size 22})
-        [:strong.overflow-hidden.text-ellipsis.block.font-semibold
-         {:style {:max-width "40vw"}}
-         short-repo-name]])]))
+      [:span.flex.items-center.gap-2.opacity-95.pt-1
+       (ion/tabler-icon "database" {:size 22})
+       [:strong.overflow-hidden.text-ellipsis.block.font-semibold
+        {:style {:max-width "40vw"}}
+        short-repo-name]])]))
 
 (rum/defc bottom-tabs
   []
@@ -85,9 +89,9 @@
 
 (rum/defc journals []
   (ion/content
-    (ui/classic-app-container-wrap
-      [:div.pt-3
-       (journal/all-journals)])))
+   (ui/classic-app-container-wrap
+    [:div.pt-3
+     (journal/all-journals)])))
 
 (rum/defc home < rum/reactive
   []
@@ -99,6 +103,22 @@
        (ion/buttons {:slot "start"}
                     (app-graphs-select))
 
+       (let [repo (fstate/get-current-repo)]
+         [:div.flex.flex-row.items-center.gap-2
+          (when (and repo
+                     (ldb/get-graph-rtc-uuid (db/get-db))
+                     (user-handler/logged-in?)
+                     (config/db-based-graph? repo)
+                     (user-handler/team-member?))
+            [:<>
+            ;; (rum/with-key (rtc-collaborators)
+            ;;   (str "collab-" repo))
+             (rtc-indicator/indicator)
+             (when (user-handler/logged-in?)
+               (rtc-indicator/downloading-detail))
+             (when (user-handler/logged-in?)
+               (rtc-indicator/uploading-detail))])])
+
        (ion/buttons {:slot "end"}
                     (ion/button
                      {:size "small"
@@ -213,10 +233,10 @@
 
                  :else
                  (-> (nav/nav-length?)
-                   (p/then (fn [len]
-                             (if (= len 1)
-                               (.exitApp App)
-                               (nav/nav-pop!))))))
+                     (p/then (fn [len]
+                               (if (= len 1)
+                                 (.exitApp App)
+                                 (nav/nav-pop!))))))
                (fstate/clear-edit!))
              ^js back-listener (.addListener App "backButton" handle-back!)]
          #(.remove back-listener)))

src/main/capacitor/components/settings.cljs

@@ -1,28 +1,25 @@
 (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.db-based.rtc :as rtc-handler]
             [frontend.handler.user :as user-handler]
             [frontend.state :as fstate]
-            [logseq.shui.ui :as ui]
             [logseq.shui.ui :as shui]
             [rum.core :as rum]))
 
-(rum/defc all-pages
-  [])
-
 (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
-       (ui/tabler-icon "server" {:size 22}) "Your RTC graphs"]
+       (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")]
+       {:mode "ios" :size "small" :color "secondary"
+        :on-click (fn [] (rtc-handler/<get-remote-graphs))} "refresh")]
 
      [:ul
       (for [{:keys [url GraphName GraphSchemaVersion]} graphs]
@@ -36,9 +33,9 @@
     (if-not login?
       [:h1.text-3xl.font-bold.underline
        [:a {:on-click #(shui/dialog-open! login/page-impl
-                         {:close-btn? false
-                          :align :top
-                          :content-props {:class "app-login-modal"}})} "login"]]
+                                          {:close-btn? false
+                                           :align :top
+                                           :content-props {:class "app-login-modal"}})} "login"]]
       [:div.py-2
        [:h2.py-3.flex.justify-between.items-center
         [:strong.text-4xl.font-semibold (user-handler/username)]
@@ -49,24 +46,24 @@
   []
   (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/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/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)
-        (all-graphs)))))
+     (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)
+                  (repo/repos-cp)))))

src/main/frontend/components/repo.cljs

@@ -83,7 +83,8 @@
                                      (state/pub-event! [:rtc/download-remote-graph GraphName GraphUUID GraphSchemaVersion])
 
                                      :else
-                                     (state/pub-event! [:graph/pull-down-remote-graph repo])))))]
+                                     (when-not (util/capacitor-new?)
+                                       (state/pub-event! [:graph/pull-down-remote-graph repo]))))))]
       (when-let [time (some-> (or last-seen-at created-at) (safe-locale-date))]
         [:small.text-gray-400.opacity-50 (str "Last opened at: " time)])]
 
@@ -170,18 +171,19 @@
        (when (seq local-graphs)
          (repos-inner local-graphs))
 
-       [:div.flex.flex-row.my-4
-        (if util/web-platform?
-          [:div.mr-8
-           (ui/button
-            "Create a new graph"
-            :on-click #(state/pub-event! [:graph/new-db-graph]))]
-          (when (or (nfs-handler/supported?)
-                    (mobile-util/native-platform?))
+       (when-not (util/capacitor-new?)
+         [:div.flex.flex-row.my-4
+          (if util/web-platform?
             [:div.mr-8
              (ui/button
-              (t :open-a-directory)
-              :on-click #(state/pub-event! [:graph/setup-a-repo]))]))]]
+              "Create a new graph"
+              :on-click #(state/pub-event! [:graph/new-db-graph]))]
+            (when (or (nfs-handler/supported?)
+                      (mobile-util/native-platform?))
+              [:div.mr-8
+               (ui/button
+                (t :open-a-directory)
+                :on-click #(state/pub-event! [:graph/setup-a-repo]))]))])]
 
       (when (and (or (file-sync/enable-sync?)
                      (state/enable-rtc?))
@@ -197,7 +199,8 @@
             :background "gray"
             :disabled remotes-loading?
             :on-click (fn []
-                        (file-sync/load-session-graphs)
+                        (when-not (util/capacitor-new?)
+                          (file-sync/load-session-graphs))
                         (p/do!
                          (rtc-handler/<get-remote-graphs)
                          (repo-handler/refresh-repos!))))]]

tailwind.capacitor.css

@@ -24,5 +24,6 @@
 @import "src/main/frontend/components/block/views.css";
 @import "src/main/frontend/components/journal.css";
 @import "src/main/frontend/components/user/login.css";
+@import "src/main/frontend/components/file_sync.css";
 
 @import-glob "src/main/capacitor/**/[!_]*.css";