fix: use the new popover instead of custom dropdown for whiteboards

src/main/frontend/components/page.cljs

@@ -287,12 +287,11 @@
                      (page-handler/rename! (:block/uuid page) @*title-value)
                      (js/setTimeout #(reset! *edit? false) 100)))
                   (util/stop e))]
-    [:input.edit-input.p-0.focus:outline-none.ring-none
+    [:input.edit-input.p-0.outline-none.focus:outline-none.no-ring
      {:type          "text"
       :ref           input-ref
       :auto-focus    true
-      :style         {:outline "none"
+      :style         {:width "100%"
-                      :width "100%"
                       :font-weight "inherit"}
       :auto-complete (if (util/chrome?) "chrome-off" "off") ; off not working here
       :value         (rum/react *input-value)

src/main/frontend/components/page.css

@@ -421,3 +421,7 @@ html.is-native-ios {
 .info-title a.tag:hover, .multi-values a.tag:hover {
     text-decoration: none;
 }
+
+.no-ring {
+  @apply focus:ring-0 focus:ring-offset-0;
+}

src/main/frontend/components/whiteboard.cljs

@@ -10,8 +10,7 @@
             [frontend.handler.route :as route-handler]
             [frontend.handler.whiteboard :as whiteboard-handler]
             [frontend.modules.shortcut.core :as shortcut]
-            [frontend.rum :refer [use-bounding-client-rect use-breakpoint
+            [frontend.rum :refer [use-bounding-client-rect use-breakpoint]]
-                                  use-click-outside]]
             [frontend.state :as state]
             [frontend.ui :as ui]
             [frontend.util :as util]
@@ -21,7 +20,8 @@
             [frontend.config :as config]
             [frontend.db.async :as db-async]
             [logseq.common.util :as common-util]
-            [frontend.db :as db]))
+            [frontend.db :as db]
+            [logseq.shui.ui :as shui]))
 
 (defonce tldraw-loaded? (atom false))
 (rum/defc tldraw-app < rum/reactive
@@ -52,90 +52,33 @@
       (when (and generate-preview (not (state/sub-async-query-loading page-uuid)))
         (generate-preview tldr)))))
 
-;; TODO: use frontend.ui instead of making a new one
-(rum/defc dropdown
-  [label children show? outside-click-handler portal?]
-  (let [[anchor-ref anchor-rect] (use-bounding-client-rect show?)
-        [content-ref content-rect] (use-bounding-client-rect show?)
-        offset-x (when (and anchor-rect content-rect)
-                   (if portal?
-                     (let [offset-x (+ (* 0.5 (- (.-width anchor-rect) (.-width content-rect)))
-                                       (.-x anchor-rect))
-                           vp-w (.-innerWidth js/window)
-                           right (+ offset-x (.-width content-rect) 16)
-                           offset-x (if (> right vp-w) (- offset-x (- right vp-w)) offset-x)]
-                       offset-x)
-                     (* 0.5 (- (.-width anchor-rect) (.-width content-rect)))))
-        offset-y (when (and anchor-rect content-rect)
-                   (+ (.-y anchor-rect) (.-height anchor-rect) 8))
-        click-outside-ref (use-click-outside outside-click-handler)
-        [d-open set-d-open] (rum/use-state false)
-        _ (rum/use-effect! (fn [] (js/setTimeout #(set-d-open show?) 100))
-                           [show?])]
-    [:div.inline-block.dropdown-anchor {:ref anchor-ref}
-     label
-     (if portal?
-       ;; FIXME: refactor the following code ...
-       (ui/portal
-        [:div.fixed.shadow-lg.color-level.px-2.rounded-lg.transition.md:w-64.lg:w-128.overflow-auto
-         {:ref (juxt content-ref click-outside-ref)
-          :style {:opacity (if d-open 1 0)
-                  :pointer-events (if d-open "auto" "none")
-                  :transform (str "translateY(" (if d-open 0 10) "px)")
-                  :min-height "40px"
-                  :max-height "420px"
-                  :left offset-x
-                  :top offset-y}}
-         (when d-open children)])
-       [:div.absolute.shadow-lg.color-level.px-2.rounded-lg.transition.md:w-64.lg:w-128.overflow-auto
-        {:ref (juxt content-ref click-outside-ref)
-         :style {:opacity (if d-open 1 0)
-                 :pointer-events (if d-open "auto" "none")
-                 :transform (str "translateY(" (if d-open 0 10) "px)")
-                 :min-height "40px"
-                 :max-height "420px"
-                 :left offset-x}}
-        (when d-open children)])]))
-
-(rum/defc dropdown-menu
-  [{:keys [label children classname hover? portal?]}]
-  (let [[open-flag set-open-flag] (rum/use-state 0)
-        open? (> open-flag (if hover? 0 1))
-        d-open-flag (rum/use-memo #(util/debounce 200 set-open-flag) [])]
-    (dropdown
-     [:div {:class (str classname (when open? " open"))
-            :on-mouse-enter (fn [] (d-open-flag #(if (= % 0) 1 %)))
-            :on-mouse-leave (fn [] (d-open-flag #(if (= % 2) % 0)))
-            :on-click (fn [e]
-                        (util/stop e)
-                        (d-open-flag (fn [o] (if (not= o 2) 2 0))))}
-      (if (fn? label) (label open?) label)]
-     children open? #(set-open-flag 0) portal?)))
-
 ;; TODO: move to frontend.components.reference
-(rum/defc references-count < rum/reactive db-mixins/query
+(rum/defcs references-count < rum/reactive db-mixins/query
+  (rum/local false ::open?)
   "Shows a references count for any block or page.
    When clicked, a dropdown menu will show the reference details"
-  ([page-name-or-uuid classname]
+  ([state page-name-or-uuid classname]
    (references-count page-name-or-uuid classname nil))
-  ([page-name-or-uuid classname {:keys [render-fn
+  ([state page-name-or-uuid classname _opts]
-                                        hover?
-                                        portal?]
-                                 :or {portal? true}}]
    (when page-name-or-uuid
-     (let [page-entity (model/get-page page-name-or-uuid)
+     (let [*open? (::open? state)
+           page-entity (model/get-page page-name-or-uuid)
            page (model/sub-block (:db/id page-entity))
            block-uuid (:block/uuid page-entity)
            refs-count (count (:block/_refs page))]
        (when (> refs-count 0)
-         (dropdown-menu {:classname classname
+         (shui/popover
-                         :label (fn [open?]
+          {:open @*open?
-                                  [:div.inline-flex.items-center.gap-2
+           :on-open-change (fn [o] (reset! *open? o))}
-                                   [:div.open-page-ref-link refs-count]
+          (shui/popover-trigger
-                                   (when render-fn (render-fn open? refs-count))])
+           {}
-                         :hover? hover?
+           (shui/button {:variant :ghost :size :sm
-                         :portal? portal?
+                         :class "opacity-75 hover:opacity-100"}
-                         :children (reference/block-linked-references block-uuid)}))))))
+             refs-count))
+          (shui/popover-content
+           {:on-open-auto-focus #(.preventDefault %)}
+           [:div {:class classname}
+            (reference/block-linked-references block-uuid)])))))))
 
 ;; This is not accurate yet
 (defn- get-page-human-update-time
@@ -171,7 +114,7 @@
     [:div.flex.w-full.opacity-50
      [:div (get-page-human-update-time whiteboard)]
      [:div.flex-1]
-     (references-count (:block/uuid whiteboard) nil {:hover? true})]]
+     (references-count (:block/uuid whiteboard) nil {})]]
    (ui/lazy-visible
     (fn [] [:div.p-4.h-64.flex.justify-center
             (tldraw-preview (:block/uuid whiteboard))]))])
@@ -262,14 +205,7 @@
                 :user-select "none"}}
        (page/page-title page {:*hover? (atom false)})]
 
-      [:div.whiteboard-page-refs
+      (references-count (:block/uuid page) "text-md cursor-pointer" {})]
-       (references-count (:block/uuid page)
-                         "text-md px-3 py-2 cursor-default whiteboard-page-refs-count"
-                         {:hover? true
-                          :render-fn (fn [open? refs-count] [:span.whiteboard-page-refs-count-label
-                                                             (t :whiteboard/reference-count refs-count)
-                                                             (ui/icon (if open? "references-hide" "references-show")
-                                                                      {:extension? true})])})]]
      (tldraw-app page-uuid block-id)]))
 
 (rum/defc whiteboard-route <

src/main/frontend/components/whiteboard.css

@@ -144,14 +144,12 @@ input.tl-text-input {
 }
 
 .whiteboard-page-title-root {
-  @apply shadow-md flex items-center;
+  @apply shadow-md flex items-center gap-1;
   position: absolute;
   left: 2.5rem;
   top: 0;
-  padding: 4px;
   border-radius: 0 0 12px 12px;
   z-index: 2000;
-  gap: 4px;
   line-height: 1.4;
   background: var(--lx-gray-01, var(--ls-primary-background-color, hsl(var(--background))));
 }
@@ -175,7 +173,7 @@ input.tl-text-input {
 
   .ls-page-title {
      @apply p-0 m-0;
-     
+
       .page-title {
         font-size: 16px;
       }
@@ -190,11 +188,6 @@ input.tl-text-input {
   background-color: var(--ls-tertiary-background-color);
 }
 
-.whiteboard-page-title:focus-within {
-  border: 1px solid var(--ls-border-color);
-  box-shadow: 0 0 0 4px var(--ls-focus-ring-color);
-}
-
 .whiteboard-page-refs-count-label {
   @apply flex gap-1 items-center;
 }

src/main/frontend/ui.css

@@ -314,8 +314,6 @@ html.is-mobile {
 
 .form-input {
   @apply block w-full mt-1 pl-2 sm:text-sm sm:leading-5 rounded bg-background border border-gray-07;
-  @apply focus:border-input focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-offset-2;
-  @apply focus-visible:ring-2 ring-offset-background;
 
   &.is-small {
     @apply py-1.5 sm:leading-4 sm:text-xs;
@@ -374,4 +372,4 @@ html.is-mobile {
 
 input[type='range'] {
   accent-color: var(--lx-accent-10, var(--rx-blue-10));
-}
+}