From 810f95f5ae9bc802c2411ffcaa7beefdb7c04fd2 Mon Sep 17 00:00:00 2001 From: Mega Yu Date: Tue, 14 Apr 2026 15:49:28 +0800 Subject: [PATCH] enhance(ui): left sidebar ui improve --- .../frontend/components/left_sidebar.cljs | 81 +++++++++++++------ src/main/frontend/handler/ui.cljs | 1 + 2 files changed, 57 insertions(+), 25 deletions(-) diff --git a/src/main/frontend/components/left_sidebar.cljs b/src/main/frontend/components/left_sidebar.cljs index 2936d3c739..6855cfd490 100644 --- a/src/main/frontend/components/left_sidebar.cljs +++ b/src/main/frontend/components/left_sidebar.cljs @@ -15,12 +15,12 @@ [frontend.handler.page :as page-handler] [frontend.handler.recent :as recent-handler] [frontend.handler.route :as route-handler] + [frontend.handler.ui :as ui-handler] [frontend.state :as state] [frontend.storage :as storage] [frontend.ui :as ui] [frontend.util :as util] [goog.object :as gobj] - [logseq.db :as ldb] [logseq.shui.hooks :as hooks] [logseq.shui.ui :as shui] [reitit.frontend.easy :as rfe] @@ -37,13 +37,53 @@ default-home (dissoc default-home :page))))) +(rum/defc page-title-content + [page-id display-title tooltip-title untitled? left-sidebar-resized-at] + (let [*title-ref (rum/use-ref nil) + [truncated? set-truncated?!] (rum/use-state false) + sync-truncated! (fn [] + (if-let [^js el (rum/deref *title-ref)] + (set-truncated?! (> (.-scrollWidth el) + (+ (.-clientWidth el) 1))) + (set-truncated?! false))) + title-el [:span.page-title {:ref *title-ref + :class (when untitled? "opacity-50")} + display-title]] + (hooks/use-effect! + (fn [] + (if-let [^js el (rum/deref *title-ref)] + (let [observer (js/ResizeObserver. (fn [_] (sync-truncated!)))] + (.observe observer el) + (sync-truncated!) + #(.disconnect observer)) + (do + (set-truncated?! false) + nil))) + [page-id display-title tooltip-title]) + (hooks/use-effect! + (fn [] + (let [raf-id (js/requestAnimationFrame sync-truncated!)] + #(js/cancelAnimationFrame raf-id))) + [left-sidebar-resized-at]) + (if (and truncated? (not (string/blank? tooltip-title))) + (ui/tooltip title-el tooltip-title) + title-el))) + (rum/defc ^:large-vars/cleanup-todo page-name < rum/reactive db-mixins/query [page recent?] (when-let [id (:db/id page)] (let [page (db/sub-block id) + left-sidebar-resized-at (rum/react ui-handler/*left-sidebar-resized-at) icon (icon/get-node-icon-cp page {:size 16}) title (:block/title page) untitled? (db-model/untitled-page? title) + display-title (cond + (not (db/page? page)) + (block/inline-text :markdown (string/replace (apply str (take 64 (:block/title page))) "\n" " ")) + untitled? (t :ui/untitled) + :else (block-handler/block-unique-title page)) + tooltip-title (or (block-handler/block-unique-title page) + (when untitled? (t :ui/untitled))) ctx-icon #(shui/tabler-icon %1 {:class "scale-90 pr-1 opacity-80"}) open-in-sidebar #(state/sidebar-add-block! (state/get-current-repo) @@ -72,28 +112,19 @@ {:on-pointer-down util/stop-propagation :on-pointer-up (fn [_e] (route-handler/redirect-to-page! (:block/uuid page) {:click-from-recent? recent?}))} - (cond-> - {:on-click - (fn [e] - (if (gobj/get e "shiftKey") - (open-in-sidebar) - (route-handler/redirect-to-page! (:block/uuid page) {:click-from-recent? recent?}))) - :on-context-menu (fn [^js e] - (shui/popup-show! e (x-menu-content) - {:as-dropdown? true - :content-props {:on-click (fn [] (shui/popup-hide!)) - :class "w-60"}}) - (util/stop e))} - (ldb/object? page) - (assoc :title (block-handler/block-unique-title page)))) + {:on-click + (fn [e] + (if (gobj/get e "shiftKey") + (open-in-sidebar) + (route-handler/redirect-to-page! (:block/uuid page) {:click-from-recent? recent?}))) + :on-context-menu (fn [^js e] + (shui/popup-show! e (x-menu-content) + {:as-dropdown? true + :content-props {:on-click (fn [] (shui/popup-hide!)) + :class "w-60"}}) + (util/stop e))}) [:span.page-icon {:key "page-icon"} icon] - [:span.page-title {:key "title" - :class (when untitled? "opacity-50")} - (cond - (not (db/page? page)) - (block/inline-text :markdown (string/replace (apply str (take 64 (:block/title page))) "\n" " ")) - untitled? (t :ui/untitled) - :else (block-handler/block-unique-title page))] + (page-title-content id display-title tooltip-title untitled? left-sidebar-resized-at) ;; dots trigger (shui/button @@ -315,8 +346,7 @@ [:ul.text-sm (for [page pages] [:li.recent-item.select-none.font-medium - {:key (str "recent-" (:db/id page)) - :title (block-handler/block-unique-title page)} + {:key (str "recent-" (:db/id page))} (page-name page true)])]))) (rum/defc ^:large-vars/cleanup-todo sidebar-container @@ -452,7 +482,8 @@ (.. el-doc -classList (add "is-resizing-buf")))) (.on "dragend" (fn [] (.. sidebar-el -classList (remove "is-resizing")) - (.. el-doc -classList (remove "is-resizing-buf")))))) + (.. el-doc -classList (remove "is-resizing-buf")) + (reset! ui-handler/*left-sidebar-resized-at (js/Date.now)))))) #())) []) [:span.left-sidebar-resizer {:ref *el-ref}])) diff --git a/src/main/frontend/handler/ui.cljs b/src/main/frontend/handler/ui.cljs index 2a44c4e180..11e0f7d554 100644 --- a/src/main/frontend/handler/ui.cljs +++ b/src/main/frontend/handler/ui.cljs @@ -19,6 +19,7 @@ [rum.core :as rum])) ;; sidebars +(def *left-sidebar-resized-at (atom (js/Date.now))) (def *right-sidebar-resized-at (atom (js/Date.now))) (defn persist-right-sidebar-width!