enhance: move page configure trigger to the top of page title

src/main/frontend/components/db_based/page.cljs

@@ -157,26 +157,21 @@
 (rum/defcs page-info < rum/reactive
   (rum/local false ::hover?)
   (rum/local nil ::mode)
-  {:init (fn [state]
-           (assoc state ::collapsed? (atom true)))}
-  [state page *hover-title?]
+  [state page *show-info?]
   (let [page (db/sub-block (:db/id page))
-        *collapsed? (::collapsed? state)
         *hover? (::hover? state)
         *mode (::mode state)
         types (:block/type page)
         class? (contains? types "class")
-        hover-title? (rum/react *hover-title?)
-        collapsed? (rum/react *collapsed?)
+        collapsed? (not @*show-info?)
         has-tags? (seq (:block/tags page))
         has-properties? (seq (:block/properties page))
-        hover-or-expanded? (or @*hover? hover-title? (not collapsed?))
-        show-info? (or hover-or-expanded? has-tags? has-properties? class?)]
+        show-info? (or @*show-info? has-tags? has-properties?)]
     (when (if config/publishing?
             ;; Since publishing is read-only, hide this component if it has no info to show
             ;; as it creates a fair amount of empty vertical space
             (or has-tags? (some? types))
-            true)
+            (or show-info? has-tags? has-properties?))
       [:div.page-info
        {:class (util/classnames [{:is-collapsed collapsed?}])}
        [:div.py-2 {:class (if (or @*hover? (not collapsed?))
@@ -189,23 +184,21 @@
           :on-click (if config/publishing?
                       (fn [_]
                         (when (seq (set/intersection #{"class" "property"} types))
-                          (swap! *collapsed? not)))
-                      #(swap! *collapsed? not))}
+                          (swap! *show-info? not)))
+                      #(swap! *show-info? not))}
          (when show-info?
            [:<>
             [:div.flex.flex-row.items-center.gap-2
              (if collapsed?
-               (if (or has-tags? @*hover? config/publishing?)
-                 [:<>
-                  (if has-tags?
-                    [:div.px-1 {:style {:min-height 28}}]
-                    [:a.flex.fade-link.ml-2 (ui/icon "tags")])
-                  (if (and config/publishing? (seq (set/intersection #{"class" "property"} types)))
-                    [:div
-                     [:div.opacity-50.pointer.text-sm "Expand for more info"]]
-                    [:div {:on-click util/stop-propagation}
-                     (tags page)])]
-                 [:div.page-info-title-placeholder])
+               (when (or has-tags? @*hover? config/publishing?)
+                 (if (and config/publishing? (seq (set/intersection #{"class" "property"} types)))
+                   [:div
+                    [:div.opacity-50.pointer.text-sm "Expand for more info"]]
+                   (when has-tags?
+                     [:div.pl-3.page-info-tags
+                      {:style {:margin-left 2}
+                       :on-click util/stop-propagation}
+                      (tags page)])))
                [:div.flex.flex-row.items-center.gap-1
                 [:a.flex.fade-link.ml-3 (ui/icon "info-circle")]
                 (mode-switch types *mode)])]
@@ -221,7 +214,7 @@
           (if collapsed?
             (when (or (seq (:block/properties page))
                       (and class? (seq (:class/schema.properties page))))
-              [:div.px-4
+              [:div.px-2 {:style {:margin-left 2}}
                (page-properties page {:mode (if class? :class :page)})])
             [:div.pt-2.px-4
              (page-configure page *mode)]))]])))

src/main/frontend/components/page.cljs

@@ -297,6 +297,15 @@
       :on-focus (fn []
                   (when untitled? (reset! *title-value "")))}]))
 
+(rum/defc page-title-configure
+  [*show-page-info?]
+  [:div.absolute.-top-4.left-2.fade-in
+   (shui/button
+    {:variant :outline
+     :size :xs
+     :on-click #(swap! *show-page-info? not)}
+    "Configure")])
+
 (rum/defcs ^:large-vars/cleanup-todo page-title < rum/reactive
   (rum/local false ::edit?)
   (rum/local "" ::input-value)
@@ -305,7 +314,7 @@
                  original-name (:block/original-name page)
                  *title-value (atom original-name)]
              (assoc state ::title-value *title-value)))}
-  [state page {:keys [fmt-journal? preview? *hover?]}]
+  [state page {:keys [fmt-journal? preview? *hover? *show-page-info?]}]
   (when page
     (let [page (db/sub-block (:db/id page))
           title (:block/original-name page)]
@@ -385,7 +394,10 @@
                  (cond untitled? [:span.opacity-50 (t :untitled)]
                        nested? (component-block/map-inline {} (gp-mldoc/inline->edn title (mldoc/get-default-config
                                                                                            (:block/format page))))
-                       :else title))])]])))))
+                       :else title))])]
+
+           (when (and db-based? @*hover?)
+             (page-title-configure *show-page-info?))])))))
 
 (defn- page-mouse-over
   [e *control-show? *all-collapsed?]
@@ -447,6 +459,7 @@
   (rum/local false ::control-show?)
   (rum/local nil   ::current-page)
   (rum/local false ::hover-title?)
+  (rum/local false ::show-page-info?)
   {:init (fn [state]
            (let [page-name (:page-name (first (:rum/args state)))
                  page-name' (get-sanity-page-name state page-name)]
@@ -507,7 +520,8 @@
                        (page-title page {:journal? journal?
                                          :fmt-journal? fmt-journal?
                                          :preview? preview?
-                                         :*hover? (::hover-title? state)}))
+                                         :*hover? (::hover-title? state)
+                                         :*show-page-info? (::show-page-info? state)}))
                      (when (not config/publishing?)
                        (when config/lsp-enabled?
                          [:div.flex.flex-row
@@ -516,8 +530,8 @@
 
                   (cond
                     (and db-based? (not block?))
-                    [:div.pb-2
-                     (db-page/page-info page (::hover-title? state))]
+                    [:div.py-4
+                     (db-page/page-info page (::show-page-info? state))]
 
                     (and (not db-based?) (not block?))
                     [:div.pb-2])

src/main/frontend/components/page.css

@@ -322,16 +322,6 @@ html.is-native-iphone-without-notch {
 
   .page-info {
     @apply mx-2;
-
-    .ls-page-properties {}
-
-    &.is-collapsed {
-      @apply !py-0 -mb-1.5;
-
-      &:not(:has(.select-item)) {
-        @apply hidden;
-      }
-    }
   }
 }
 
@@ -407,10 +397,6 @@ html.is-native-ios {
     @apply py-2;
   }
 
-  .ls-page-properties {
-    @apply bg-gray-03 rounded-md px-3 gap-1;
-  }
-
   .configure-wrap {
     @apply px-2;
   }
@@ -420,23 +406,7 @@ html.is-native-ios {
   }
 
   &.is-collapsed {
-    @apply border-transparent mt-[-4px] -mb-[14px];
-
-    &:has(.select-item) {
-      @apply py-2 relative -left-1;
-
-      .info-title {
-        @apply relative -top-1;
-      }
-    }
-
-    .page-info-inner {
-      @apply py-0 relative -top-1.5 min-h-[26px];
-
-      &:has(.ls-page-properties) {
-        @apply mb-3 opacity-90;
-      }
-    }
+    @apply border-transparent;
 
     .ls-new-property {
       @apply hidden;
@@ -450,16 +420,14 @@ html.is-native-ios {
   }
 
   .info-title {
-    @apply relative min-h-[28px] flex items-center pl-1;
-  }
-
-  .ls-properties-area {
-    &:has(.property-pair) {
-      @apply pt-2.5;
-    }
+    @apply relative min-h-[28px] flex items-center;
   }
 }
 
 .page-info-title-placeholder {
   min-height: 28px;
 }
+
+.info-title a.tag:hover, .multi-values a.tag:hover {
+    text-decoration: none;
+}