fix: make the reference count reactive

src/main/frontend/components/whiteboard.cljs

@@ -5,6 +5,7 @@
             [frontend.components.page :as page]
             [frontend.components.reference :as reference]
             [frontend.context.i18n :refer [t]]
+            [frontend.db-mixins :as db-mixins]
             [frontend.db.model :as model]
             [frontend.handler.common :as common-handler]
             [frontend.handler.route :as route-handler]
@@ -108,7 +109,7 @@
 
 ;; TODO: move to frontend.components.reference
 ;; TODO: reactivity when ref count change
-(rum/defc references-count < rum/static
+(rum/defc references-count < rum/reactive db-mixins/query
   "Shows a references count for any block or page.
    When clicked, a dropdown menu will show the reference details"
   ([page-name-or-uuid classname]
@@ -119,7 +120,7 @@
                                  :or {portal? true}}]
    (let [page-entity (model/get-page page-name-or-uuid)
          block-uuid (:block/uuid page-entity)
-         refs-count (count (:block/_refs page-entity))]
+         refs-count (count (model/get-block-references-count block-uuid))]
      (when (> refs-count 0)
        (dropdown-menu {:classname classname
                        :label (fn [open?]

src/main/frontend/db/model.cljs

@@ -1306,6 +1306,24 @@
                                (sort-by-left-recursive))]
          (db-utils/group-by-page query-result))))))
 
+(defn get-block-references-count
+  [block-uuid]
+  (when-let [repo (state/get-current-repo)]
+    (when (conn/get-db repo)
+      (let [block (db-utils/entity [:block/uuid block-uuid])
+            query-result (->> (react/q repo [:frontend.db.react/refs
+                                             (:db/id block)]
+                                       {}
+                                       '[:find [(pull ?ref-block ?block-attrs) ...]
+                                         :in $ ?block-uuid ?block-attrs
+                                         :where
+                                         [?block :block/uuid ?block-uuid]
+                                         [?ref-block :block/refs ?block]]
+                                       block-uuid
+                                       block-attrs)
+                              react)]
+        count query-result))))
+
 (defn journal-page?
   "sanitized page-name only"
   [page-name]

tldraw/packages/react/src/components/ReferencesCountContainer/ReferencesCountContainer.tsx

@@ -37,7 +37,7 @@ export const ReferencesCountContainer = observer(function ReferencesCountContain
             left: '100%',
             pointerEvents: 'all',
             transformOrigin: 'left top',
-            transform: 'scale(var(--tl-scale)) translateY(8px)',
+            transform: 'translateY(6px)',
           }}
           onPointerDown={stop}
           onWheelCapture={stop}