feat: add rtc sync indicator

src/main/frontend/components/file_sync.css

@@ -4,7 +4,7 @@
   --ls-color-file-sync-idle: var(--color-green-600);
 }
 
-.cp__file-sync {
+.cp__file-sync, .cp__rtc-sync {
   &-indicator {
     a.cloud {
       position: relative;

src/main/frontend/components/header.cljs

@@ -11,6 +11,7 @@
             [frontend.handler :as handler]
             [frontend.handler.file-sync :as file-sync-handler]
             [frontend.components.file-sync :as fs-sync]
+            [frontend.components.rtc.indicator :as rtc-indicator]
             [frontend.handler.plugin :as plugin-handler]
             [frontend.handler.route :as route-handler]
             [frontend.handler.user :as user-handler]
@@ -235,6 +236,11 @@
               (ui/icon "search" {:size ui/icon-size})])))]]
 
      [:div.r.flex.drag-region
+      (when (and current-repo
+                 config/dev?
+                 (config/db-based-graph? current-repo))
+        (rtc-indicator/indicator))
+
       (when (and current-repo
                  (not (config/demo-graph? current-repo))
                  (not (config/db-based-graph? current-repo))

src/main/frontend/components/rtc/indicator.cljs

@@ -0,0 +1,34 @@
+(ns frontend.components.rtc.indicator
+  "RTC state indicator"
+  (:require [rum.core :as rum]
+            [frontend.ui :as ui]
+            [logseq.shui.ui :as shui]
+            [frontend.state :as state]
+            [frontend.util :as util]))
+
+(rum/defc details
+  [{:keys [unpushed-block-update-count]}]
+  [:div.cp__rtc-sync-details.text-sm
+   (cond
+     (zero? unpushed-block-update-count)
+     "All local changes have been synced."
+     (pos? unpushed-block-update-count)
+     (str "Unsaved local changes: " unpushed-block-update-count))])
+
+(rum/defc indicator < rum/reactive
+  []
+  (let [_                       (state/sub :auth/id-token)
+        online?                 (state/sub :network/online?)
+        {:keys [rtc-state unpushed-block-update-count] :as state}
+        (state/sub :rtc/state)]
+    [:div.cp__rtc-sync
+     [:div.cp__rtc-sync-indicator
+      [:a.button.cloud
+       {:on-click #(shui/popup-show! (.-target %)
+                                     (details state)
+                                     {:align "end"})
+        :class    (util/classnames [{:on (and online? (= :open rtc-state))
+                                     :idle (and online? (= :open rtc-state) (zero? unpushed-block-update-count))
+                                     :queuing (pos? unpushed-block-update-count)}])}
+       [:span.flex.items-center
+        (ui/icon "cloud" {:size ui/icon-size})]]]]))

src/main/frontend/db/rtc/debug_ui.cljs

@@ -14,7 +14,7 @@
             [logseq.shui.ui :as shui]
             [logseq.db :as ldb]))
 
-(defonce debug-state (atom nil))
+(defonce debug-state (:rtc/state @state/state))
 
 (defn- stop
   []
@@ -41,7 +41,7 @@
                              (let [repo (state/get-current-repo)
                                    ^object worker @db-browser/*worker]
                                (p/let [result (.rtc-get-debug-state worker repo)
-                                       new-state (bean/->clj result)]
+                                       new-state (ldb/read-transit-str result)]
                                  (swap! debug-state (fn [old] (merge old new-state)))))))
       (ui/button "graph-list"
                  :icon "refresh"

src/main/frontend/db_worker.cljs

@@ -638,7 +638,7 @@
 
   (rtc-get-debug-state
    [_this repo]
-   (bean/->js (rtc-core/get-debug-state repo)))
+   (ldb/write-transit-str (rtc-core/get-debug-state repo)))
 
   (rtc-get-block-update-log
    [_this block-uuid]

src/main/frontend/handler/events.cljs

@@ -971,7 +971,7 @@
   (state/set-modal! multi-tabs-dialog {:container-overflow-visible? true}))
 
 (defmethod handle :rtc/sync-state [[_ state]]
-  (swap! rtc-debug-ui/debug-state (fn [old] (merge old state))))
+  (state/update-state! :rtc/state (fn [old] (merge old state))))
 
 (defmethod handle :rtc/download-remote-graph [[_ graph-name graph-uuid]]
   (->

src/main/frontend/state.cljs

@@ -286,6 +286,7 @@
       :file-sync/graph-state                 {:current-graph-uuid nil}
       ;; graph-uuid -> ...
 
+      :rtc/state                             (atom {})
       :rtc/graphs                            []
       ;; graph-url -> {:in-transaction? Boolean :txs []}
       :rtc/remote-batch-tx-state             {}

src/main/frontend/worker/rtc/core.cljs

@@ -1175,3 +1175,8 @@
                  (when (or (not= new-state old-state)
                            (= :open (:rtc-state new-state)))
                    (worker-util/post-message :rtc-sync-state new-state))))))
+
+(add-watch op-mem-layer/*ops-store :update-rtc-state
+           (fn [_ _ _ _new]
+             (when (:*repo @*state)
+               (swap! *state update :counter (fnil inc 0)))))

src/main/frontend/worker/rtc/op_mem_layer.cljs

@@ -105,7 +105,7 @@
 (def ops-store-schema-coercer (m/coercer ops-store-schema))
 
 
-(defonce ^:private *ops-store (atom {} :validator ops-store-schema-coercer))
+(defonce *ops-store (atom {} :validator ops-store-schema-coercer))
 
 (defn- merge-add-retract-maps
   [m1 m2]
@@ -449,11 +449,13 @@
 
 (defn get-unpushed-block-update-count
   [repo]
+  (or
    (some-> (get @*ops-store repo)
            :current-branch
            :block-uuid->ops
            keys
-          count))
+           count)
+   0))
 
 (defn get-unpushed-asset-update-count
   [repo]