enhance(ux): show block breadcrumbs on header

src/main/frontend/components/block.cljs

@@ -666,7 +666,6 @@
         tag? (:tag? config)
         page-name (when (:block/title page-entity)
                     (util/page-name-sanity-lc (:block/title page-entity)))
-        breadcrumb? (:breadcrumb? config)
         config (assoc config :whiteboard-page? whiteboard-page?)
         untitled? (when page-name (model/untitled-page? (:block/title page-entity)))
         show-icon? (:show-icon? config)]
@@ -696,9 +695,6 @@
                             (and other-position? (not (util/shift-key? e)))
                             (some-> (.-target e) (.closest ".jtrigger") (.click))
 
-                            breadcrumb?
-                            (.preventDefault e)
-
                             :else
                             (do
                               (.preventDefault e)
@@ -3173,8 +3169,8 @@
 
 (rum/defc breadcrumb-separator
   []
-  (ui/icon "chevron-right" {:style {:font-size 20}
-                            :class "opacity-50"}))
+  [:span.opacity-50.px-1
+   "/"])
 
 ;; "block-id - uuid of the target block of breadcrumb. page uuid is also acceptable"
 (rum/defc breadcrumb-aux < rum/reactive
@@ -3204,12 +3200,12 @@
     (when show?
       (let [page-name-props (when (and show-page? (not (ldb/page? (db/entity [:block/uuid block-id]))))
                               [page
-                               (page-cp (dissoc config :breadcrumb? true) page)
+                               (page-cp {:disable-preview? true} page)
                                {:block/name (or page-title page-name)}])
             parents-props (doall
                            (for [{:block/keys [uuid name title] :as block} parents]
                              (if name
-                               [block (page-cp {:disable-preview? true} block)]
+                               [block (page-cp {:disable-preview? true} block) true]
                                (let [result (block/parse-title-and-body
                                              uuid
                                              (get block :block/format :markdown)
@@ -3222,16 +3218,19 @@
                                   (when ast-title
                                     (if (seq ast-title)
                                       (->elem :span (map-inline config ast-title))
-                                      (->elem :div (markup-elements-cp config ast-body))))]))))
+                                      (->elem :div (markup-elements-cp config ast-body))))
+                                  false]))))
             breadcrumbs (->> (into [] parents-props)
                              (concat [page-name-props]
                                      (when more? [:more]))
                              (filterv identity)
                              (map (fn [x]
                                     (if (and (vector? x) (second x))
-                                      (let [[block label] x]
-                                        (rum/with-key (breadcrumb-fragment config block label opts)
-                                          (str (:block/uuid block))))
+                                      (let [[block label page?] x
+                                            label' (if page?
+                                                     label
+                                                     (breadcrumb-fragment config block label opts))]
+                                        (rum/with-key label' (str (:block/uuid block))))
                                       [:span.opacity-70 {:key "dots"} "⋯"])))
                              (interpose (breadcrumb-separator)))]
         (when (seq breadcrumbs)

src/main/frontend/components/header.cljs

@@ -5,6 +5,7 @@
             [clojure.string :as string]
             [dommy.core :as d]
             [frontend.common.missionary :as c.m]
+            [frontend.components.block :as component-block]
             [frontend.components.export :as export]
             [frontend.components.file-sync :as fs-sync]
             [frontend.components.page-menu :as page-menu]
@@ -29,6 +30,7 @@
             [frontend.ui :as ui]
             [frontend.util :as util]
             [frontend.version :refer [version]]
+            [logseq.common.util :as common-util]
             [logseq.db :as ldb]
             [logseq.shui.hooks :as hooks]
             [logseq.shui.ui :as shui]
@@ -331,6 +333,19 @@
   (when (state/sub :ui/toggle-highlight-recent-blocks?)
     (recent-slider-inner)))
 
+(rum/defc block-breadcrumb
+  [page-name]
+  [:div.ls-block-breadcrumb.text-base.pl-2
+   (when-let [page (when (and page-name (common-util/uuid-string? page-name))
+                     (db/entity [:block/uuid (uuid page-name)]))]
+     (when (:block/parent page)
+       [:div.text-sm
+        (component-block/breadcrumb {}
+                                    (state/get-current-repo)
+                                    (:block/uuid page)
+                                    {:level-limit 2
+                                     :header? true})]))])
+
 (rum/defc ^:large-vars/cleanup-todo header-aux < rum/reactive
   [{:keys [current-repo default-home new-block-mode]}]
   (let [electron-mac? (and util/mac? (util/electron?))
@@ -356,7 +371,7 @@
      [:div.l.flex.items-center.drag-region
       [left-menu
        (if (mobile-util/native-platform?)
-                 ;; back button for mobile
+         ;; back button for mobile
          (when-not (or (state/home?) custom-home-page? (state/whiteboard-dashboard?))
            (ui/with-shortcut :go/backward "bottom"
              [:button.it.navigation.nav-left.button.icon.opacity-70
@@ -373,53 +388,56 @@
                               (state/pub-event! [:go/search]))}
               (ui/icon "search" {:size ui/icon-size})])))]]
 
-     [:div.r.flex.drag-region
-      (when (and current-repo
-                 (ldb/get-graph-rtc-uuid (db/get-db))
-                 (user-handler/logged-in?)
-                 (config/db-based-graph? current-repo)
-                 (user-handler/team-member?))
-        [:<>
-         (recent-slider)
-         (rum/with-key (rtc-collaborators)
-           (str "collab-" current-repo))
-         (rtc-indicator/indicator)])
-
-      (when (and current-repo
-                 (not (config/demo-graph? current-repo))
-                 (not (config/db-based-graph? current-repo))
-                 (user-handler/alpha-or-beta-user?))
-        (fs-sync/indicator))
-
-      (when (and (not= (state/get-current-route) :home)
-                 (not custom-home-page?))
-        (home-button))
-
-      (when config/lsp-enabled?
-        [:<>
-         (plugins/hook-ui-items :toolbar)
-         (plugins/updates-notifications)])
-
-      (when (state/feature-http-server-enabled?)
-        (server/server-indicator (state/sub :electron/server)))
-
-      (when (util/electron?)
-        (back-and-forward))
-
-      (when-not (mobile-util/native-platform?)
-        (new-block-mode))
-
-      (when config/publishing?
-        [:a.text-sm.font-medium.button {:href (rfe/href :graph)}
-         (t :graph)])
-
-      (toolbar-dots-menu {:t            t
-                          :current-repo current-repo
-                          :default-home default-home})
-
-      (sidebar/toggle)
-
-      (updater-tips-new-version t)]]))
+     [:div.r.flex.drag-region.justify-between.items-center.gap-2
+      [:div.flex.flex-1
+       (block-breadcrumb (state/get-current-page))]
+      [:div.flex
+       (when (and current-repo
+                  (ldb/get-graph-rtc-uuid (db/get-db))
+                  (user-handler/logged-in?)
+                  (config/db-based-graph? current-repo)
+                  (user-handler/team-member?))
+         [:<>
+          (recent-slider)
+          (rum/with-key (rtc-collaborators)
+            (str "collab-" current-repo))
+          (rtc-indicator/indicator)])
+
+       (when (and current-repo
+                  (not (config/demo-graph? current-repo))
+                  (not (config/db-based-graph? current-repo))
+                  (user-handler/alpha-or-beta-user?))
+         (fs-sync/indicator))
+
+       (when (and (not= (state/get-current-route) :home)
+                  (not custom-home-page?))
+         (home-button))
+
+       (when config/lsp-enabled?
+         [:<>
+          (plugins/hook-ui-items :toolbar)
+          (plugins/updates-notifications)])
+
+       (when (state/feature-http-server-enabled?)
+         (server/server-indicator (state/sub :electron/server)))
+
+       (when (util/electron?)
+         (back-and-forward))
+
+       (when-not (mobile-util/native-platform?)
+         (new-block-mode))
+
+       (when config/publishing?
+         [:a.text-sm.font-medium.button {:href (rfe/href :graph)}
+          (t :graph)])
+
+       (toolbar-dots-menu {:t            t
+                           :current-repo current-repo
+                           :default-home default-home})
+
+       (sidebar/toggle)
+
+       (updater-tips-new-version t)]]]))
 
 (def ^:private header-related-flow
   (m/latest

src/main/frontend/components/header.css

@@ -314,3 +314,28 @@ html.is-zoomed-native-ios {
     min-width: auto;
   }
 }
+
+
+.cp__header {
+    > .r > div:not(.ui__dropdown-trigger) a, button {
+        @apply opacity-70;
+
+        &:hover {
+            @apply opacity-100;
+        }
+    }
+}
+
+.cp__header {
+    .breadcrumb {
+        @apply flex items-center;
+    }
+
+    .breadcrumb a {
+        @apply !opacity-75 hover:!opacity-100;
+        span {
+            @apply whitespace-nowrap text-ellipsis inline-block overflow-x-hidden align-middle;
+            max-width: 34ch;
+        }
+    }
+}

src/main/frontend/components/page.cljs

@@ -646,12 +646,6 @@
          (if (and whiteboard-page? (not sidebar?))
            [:div ((state/get-component :whiteboard/tldraw-preview) (:block/uuid page))] ;; FIXME: this is not reactive
            [:div.relative.grid.gap-8.page-inner
-            (when (and (:block/parent page) (not sidebar?) (not whiteboard?))
-              (let [config (merge config {:id "block-parent"
-                                          :block? true})]
-                [:div.ml-1
-                 (component-block/breadcrumb config repo block-id {:level-limit 3})]))
-
             (when-not (or block? sidebar?)
               [:div.flex.flex-row.space-between
                (when (and (or (mobile-util/native-platform?) (util/mobile?)) (not db-based?))

src/main/frontend/components/right_sidebar.css

@@ -21,16 +21,6 @@ html[data-theme=light] {
   height: calc(100vh - 48px);
 }
 
-.cp__header {
-  > .r > div:not(.ui__dropdown-trigger) a, button {
-    @apply opacity-70;
-
-    &:hover {
-      @apply opacity-100;
-    }
-  }
-}
-
 .cp__right-sidebar-topbar {
   @apply px-1 h-12;