ux: click block references number to toggle references below the number

Shift+Click to open the references in the right sidebar

src/main/frontend/components/block.cljs

@@ -1955,24 +1955,28 @@
         nil)]]))
 
 (rum/defc block-refs-count < rum/static
-  [block]
+  [block *hide-block-refs?]
   (let [block-refs-count (count (:block/_refs block))]
     (when (> block-refs-count 0)
       [:div
        [:a.open-block-ref-link.bg-base-2.text-sm.ml-2.fade-link
         {:title "Open block references"
          :style {:margin-top -1}
-         :on-click (fn []
-                     (state/sidebar-add-block!
-                      (state/get-current-repo)
-                      (:db/id block)
-                      :block-ref
-                      {:block block}))}
+         :on-click (fn [e]
+                     (if (gobj/get e "shiftKey")
+                       (state/sidebar-add-block!
+                        (state/get-current-repo)
+                        (:db/id block)
+                        :block-ref
+                        {:block block})
+                       (swap! *hide-block-refs? not)))}
         block-refs-count]])))
 
-(rum/defc block-content-or-editor < rum/reactive
-  [config {:block/keys [uuid format] :as block} edit-input-id block-id heading-level edit?]
-  (let [editor-box (get config :editor-box)
+(rum/defcs block-content-or-editor < rum/reactive
+  (rum/local true :hide-block-refs?)
+  [state config {:block/keys [uuid format] :as block} edit-input-id block-id heading-level edit?]
+  (let [*hide-block-refs? (get state :hide-block-refs?)
+        editor-box (get config :editor-box)
         editor-id (str "editor-" edit-input-id)
         slide? (:slide? config)]
     (if (and edit? editor-box)
@@ -1991,25 +1995,31 @@
                                     (editor-handler/escape-editing select?))))}
                     edit-input-id
                     config))]
-      [:div.flex.flex-row.block-content-wrapper
-       [:div.flex-1.w-full {:style {:display (if (:slide? config) "block" "flex")}}
-        (ui/catch-error
-         (ui/block-error "Block Render Error:"
-                         {:content (:block/content block)
-                          :section-attrs
-                          {:on-click #(state/set-editing! edit-input-id (:block/content block) block "")}})
-         (block-content config block edit-input-id block-id slide?))]
-       [:div.flex.flex-row.items-center
-        (when (and (:embed? config)
-                   (:embed-parent config))
-          [:a.opacity-30.hover:opacity-100.svg-small.inline
-           {:on-mouse-down (fn [e]
-                             (util/stop e)
-                             (when-let [block (:embed-parent config)]
-                               (editor-handler/edit-block! block :max (:block/uuid block))))}
-           svg/edit])
-
-        (block-refs-count block)]])))
+      (let [refs-count (count (:block/_refs block))]
+        [:div.flex.flex-col.block-content-wrapper
+         [:div.flex.flex-row
+          [:div.flex-1.w-full {:style {:display (if (:slide? config) "block" "flex")}}
+           (ui/catch-error
+            (ui/block-error "Block Render Error:"
+                            {:content (:block/content block)
+                             :section-attrs
+                             {:on-click #(state/set-editing! edit-input-id (:block/content block) block "")}})
+            (block-content config block edit-input-id block-id slide?))]
+          [:div.flex.flex-row.items-center
+           (when (and (:embed? config)
+                      (:embed-parent config))
+             [:a.opacity-30.hover:opacity-100.svg-small.inline
+              {:on-mouse-down (fn [e]
+                                (util/stop e)
+                                (when-let [block (:embed-parent config)]
+                                  (editor-handler/edit-block! block :max (:block/uuid block))))}
+              svg/edit])
+
+           (block-refs-count block *hide-block-refs?)]]
+
+         (when (and (not @*hide-block-refs?) (> refs-count 0))
+           (let [refs-cp (state/get-component :block/linked-references)]
+             (refs-cp uuid)))]))))
 
 (defn non-dragging?
   [e]

src/main/frontend/components/reference.cljs

@@ -67,6 +67,23 @@
          [page (map #(block-with-ref-level % 1) blocks)])
     page-blocks))
 
+(rum/defc block-linked-references < rum/reactive db-mixins/query
+  [block-id]
+  (let [repo (state/get-current-repo)
+        refed-blocks-ids (model-db/get-referenced-blocks-ids (str block-id))]
+    (when (seq refed-blocks-ids)
+      (let [ref-blocks (db/get-block-referenced-blocks block-id)
+            ref-hiccup (block/->hiccup ref-blocks
+                                       {:id (str block-id)
+                                        :ref? true
+                                        :breadcrumb-show? true
+                                        :group-by-page? true
+                                        :editor-box editor/box}
+                                       {})]
+        [:div.references-blocks
+         (content/content block-id
+                          {:hiccup ref-hiccup})]))))
+
 (rum/defcs references* < rum/reactive db-mixins/query
   (rum/local nil ::n-ref)
   {:init (fn [state]

src/main/frontend/components/right_sidebar.cljs

@@ -69,7 +69,7 @@
        (let [block (:block block-data)
              block-id (:block/uuid block)
              format (:block/format block)]
-         [[:div.ml-2.mt-1
+         [[:div.ml-8.mt-1
            (block/block-parents {:id     "block-parent"
                                  :block? true} repo block-id {})]
           [:div.ml-2

src/main/frontend/dicts.cljc

@@ -62,7 +62,7 @@
         :right-side-bar/contents "Contents"
         :right-side-bar/favorites "Favorites"
         :right-side-bar/page-graph "Page graph"
-        :right-side-bar/block-ref "Block reference"
+        :right-side-bar/block-ref "Block references"
         :right-side-bar/graph-view "Graph view"
         :right-side-bar/all-pages "All pages"
         :right-side-bar/flashcards "Flashcards"
@@ -3059,7 +3059,7 @@
 
         :file-sync/other-user-graph "現在のローカルグラフは他のユーザーのリモートグラフにバインドされています。同期を開始できません。"
         :file-sync/graph-deleted "現在のリモートグラフが削除されました"}
-   
+
    :it {:tutorial/text #?(:cljs (rc/inline "tutorial-en.md")
                           :default "tutorial-en.md")
         :tutorial/dummy-notes #?(:cljs (rc/inline "dummy-notes-en.md")

src/main/frontend/handler.cljs

@@ -2,6 +2,7 @@
   (:require [electron.ipc :as ipc]
             [electron.listener :as el]
             [frontend.components.page :as page]
+            [frontend.components.reference :as reference]
             [frontend.config :as config]
             [frontend.context.i18n :as i18n]
             [frontend.db :as db]
@@ -164,6 +165,7 @@
 (defn- register-components-fns!
   []
   (state/set-page-blocks-cp! page/page-blocks-cp)
+  (state/set-component! :block/linked-references reference/block-linked-references)
   (command-palette/register-global-shortcut-commands))
 
 (defn start!

src/main/frontend/state.cljs

@@ -1490,6 +1490,15 @@
   []
   (get-in @state [:view/components :page-blocks]))
 
+;; To avoid circular dependencies
+(defn set-component!
+  [k value]
+  (set-state! [:view/components k] value))
+
+(defn get-component
+  [k]
+  (get-in @state [:view/components k]))
+
 (defn exit-editing-and-set-selected-blocks!
   ([blocks]
    (exit-editing-and-set-selected-blocks! blocks :down))