enhance(ux): show page actions when hovering title only

src/main/frontend/components/block.cljs

@@ -3047,7 +3047,6 @@
      (block-content config block edit-input-id block-id *show-query?))))
 
 (rum/defcs ^:large-vars/cleanup-todo block-content-or-editor < rum/reactive
-  (rum/local false ::hover?)
   [state config {:block/keys [uuid] :as block} {:keys [edit-input-id block-id edit? hide-block-refs-count? refs-count *hide-block-refs? *show-query?]}]
   (let [format (if (config/db-based-graph? (state/get-current-repo))
                  :markdown
@@ -3084,7 +3083,10 @@
                         :format format}
                        edit-input-id
                        config))]
-         [:div.flex.flex-1.w-full.block-content-wrapper {:style {:display "flex"}}
+         [:div.flex.flex-1.w-full.block-content-wrapper
+          {:style {:display "flex"}}
+          (when-let [actions-cp (:page-title-actions-cp config)]
+            (actions-cp block))
           (block-content-with-error config block edit-input-id block-id *show-query? editor-box)
 
           (when (and (not hide-block-refs-count?)
@@ -3639,8 +3641,6 @@
 
         [:div.flex.flex-col.w-full
          [:div.block-main-content.flex.flex-row.gap-2
-          (when-let [actions-cp (:page-title-actions-cp config)]
-            (actions-cp block))
           (when page-icon
             page-icon)
 

src/main/frontend/components/block.css

@@ -524,10 +524,16 @@
   }
 }
 
-.block-main-content {
+.ls-page-title-container .block-content-wrapper {
+  .ls-page-title-actions {
+    @apply absolute -top-4 opacity-0;
+    left: -2px;
+  }
+
   &:hover {
-    & > .db-page-title-actions {
+    & > .ls-page-title-actions {
       @apply delay-300 transition-opacity opacity-100;
+
     }
   }
 }

src/main/frontend/components/page.cljs

@@ -192,13 +192,13 @@
 (rum/defcs page-blocks-cp < rum/reactive db-mixins/query
   {:will-mount (fn [state]
                  (when-not (config/db-based-graph?)
-                  (let [page-e (first (:rum/args state))
-                        page-name (:block/name page-e)]
-                    (when (and page-name
-                               (db/journal-page? page-name)
-                               (>= (date/journal-title->int page-name)
-                                   (date/journal-title->int (date/today))))
-                      (state/pub-event! [:journal/insert-template page-name]))))
+                   (let [page-e (first (:rum/args state))
+                         page-name (:block/name page-e)]
+                     (when (and page-name
+                                (db/journal-page? page-name)
+                                (>= (date/journal-title->int page-name)
+                                    (date/journal-title->int (date/today))))
+                       (state/pub-event! [:journal/insert-template page-name]))))
                  state)}
   [state block* {:keys [sidebar? whiteboard?] :as config}]
   (when-let [id (:db/id block*)]
@@ -420,11 +420,11 @@
 
 (rum/defc db-page-title-actions
   [page]
-  [:div.absolute.-top-4.left-0.opacity-0.db-page-title-actions
+  [:div.ls-page-title-actions
    [:div.flex.flex-row.items-center.gap-2
     (when-not (:logseq.property/icon (db/entity (:db/id page)))
       (shui/button
-       {:variant :outline
+       {:variant :ghost
         :size :sm
         :class "px-2 py-0 h-6 text-xs text-muted-foreground"
         :on-click (fn [e]
@@ -434,7 +434,7 @@
        "Add icon"))
 
     (shui/button
-     {:variant :outline
+     {:variant :ghost
       :size :sm
       :class "px-2 py-0 h-6 text-xs text-muted-foreground"
       :on-click (fn [e]

src/main/frontend/components/page.css

@@ -92,7 +92,7 @@
     }
   }
 
-  .db-page-title-actions {
+  .ls-page-title-actions {
     &:has(button[data-popup-active]) {
       @apply opacity-100;
     }