✨ Separate inspect-title-bar from title-bar

This now makes the component a bit less overloaded and
the implementation simplified without bracking too much
the modularization

frontend/src/app/main/ui/components/title_bar.cljs

@@ -15,9 +15,13 @@
   (i/icon-xref :arrow-refactor (stl/css :chevron-icon)))
 
 (mf/defc title-bar
-  {::mf/wrap-props false}
-  [{:keys [collapsable collapsed on-collapsed title children on-btn-click btn-children class all-clickable add-icon-gap origin]}]
-  (let [klass (dm/str (stl/css-case :title-bar true :all-clickable all-clickable) " " class)]
+  {::mf/props :obj}
+  [{:keys [class collapsable collapsed title children
+           btn-children all-clickable add-icon-gap
+           on-collapsed on-btn-click]}]
+  (let [klass     (stl/css-case :title-bar true
+                                :all-clickable all-clickable)
+        klass     (dm/str klass " " class)]
     [:div {:class klass}
      (if ^boolean collapsable
        [:div {:class (stl/css :title-wrapper)}
@@ -35,13 +39,20 @@
                              :collapsed collapsed)
                      :on-click on-collapsed}
             chevron-icon]
-           [:div {:class (stl/css :title)} title]])]
-       [:div {:class (stl/css-case :title-only true
-                                   :title-only-icon-gap add-icon-gap
-                                   :title-only (not= :inspect origin)
-                                   :inspect-title (= :inspect origin))} title])
+           [:div {:class (stl/css :title)}
+            title]])]
+       [:div {:class (stl/css-case
+                      :title-only true
+                      :title-only-icon-gap add-icon-gap)}
+        title])
      children
      (when (some? on-btn-click)
        [:button {:class (stl/css :title-button)
                  :on-click on-btn-click}
         btn-children])]))
+
+(mf/defc inspect-title-bar
+  {::mf/props :obj}
+  [{:keys [class title]}]
+  [:div {:class (dm/str (stl/css :title-bar) " " class)}
+   [:div {:class (stl/css :title-only :inspect-title)} title]])

frontend/src/app/main/ui/viewer/inspect/attributes/blur.cljs

@@ -9,7 +9,7 @@
   (:require
    [app.common.data.macros :as dm]
    [app.main.ui.components.copy-button :refer [copy-button]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [inspect-title-bar]]
    [app.util.code-gen.style-css :as css]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
@@ -22,10 +22,9 @@
   (let [shapes (->> shapes (filter has-blur?))]
     (when (seq shapes)
       [:div {:class (stl/css :attributes-block)}
-       [:& title-bar {:collapsable false
-                      :title       (tr "inspect.attributes.blur")
-                      :origin      :inspect
-                      :class       (stl/css :title-spacing-blur)}
+       [:& inspect-title-bar
+        {:title (tr "inspect.attributes.blur")
+         :class (stl/css :title-spacing-blur)}
         (when (= (count shapes) 1)
           [:& copy-button {:data  (css/get-css-property objects (first shapes) :filter)
                            :class (stl/css :copy-btn-title)}])]

frontend/src/app/main/ui/viewer/inspect/attributes/fill.cljs

@@ -7,7 +7,7 @@
 (ns app.main.ui.viewer.inspect.attributes.fill
   (:require-macros [app.main.style :as stl])
   (:require
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [inspect-title-bar]]
    [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
    [app.util.code-gen.style-css :as css]
    [app.util.i18n :refer [tr]]
@@ -53,10 +53,9 @@
   (let [shapes (filter has-fill? shapes)]
     (when (seq shapes)
       [:div {:class (stl/css :attributes-block)}
-       [:& title-bar {:collapsable false
-                      :origin      :inspect
-                      :title       (tr "inspect.attributes.fill")
-                      :class       (stl/css :title-spacing-fill)}]
+       [:& inspect-title-bar
+        {:title (tr "inspect.attributes.fill")
+         :class (stl/css :title-spacing-fill)}]
 
        [:div {:class (stl/css :attributes-content)}
         (for [shape shapes]

frontend/src/app/main/ui/viewer/inspect/attributes/geometry.cljs

@@ -10,7 +10,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.main.ui.components.copy-button :refer [copy-button]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [inspect-title-bar]]
    [app.main.ui.viewer.inspect.attributes.common :as cmm]
    [app.util.code-gen.style-css :as css]
    [app.util.i18n :refer [tr]]
@@ -36,10 +36,9 @@
 (mf/defc geometry-panel
   [{:keys [objects shapes]}]
   [:div {:class (stl/css :attributes-block)}
-   [:& title-bar {:collapsable false
-                  :title       (tr "inspect.attributes.size")
-                  :origin      :inspect
-                  :class       (stl/css :title-spacing-geometry)}
+   [:& inspect-title-bar
+    {:title (tr "inspect.attributes.size")
+     :class (stl/css :title-spacing-geometry)}
 
     (when (= (count shapes) 1)
       [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)

frontend/src/app/main/ui/viewer/inspect/attributes/layout.cljs

@@ -11,7 +11,7 @@
    [app.common.data.macros :as dm]
    [app.common.types.shape.layout :as ctl]
    [app.main.ui.components.copy-button :refer [copy-button]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [inspect-title-bar]]
    [app.main.ui.viewer.inspect.attributes.common :as cmm]
    [app.util.code-gen.style-css :as css]
    [rumext.v2 :as mf]))
@@ -52,10 +52,9 @@
 
     (when (seq shapes)
       [:div {:class (stl/css :attributes-block)}
-       [:& title-bar {:collapsable false
-                      :origin      :inspect
-                      :title       "Layout"
-                      :class       (stl/css :title-spacing-layout)}
+       [:& inspect-title-bar
+        {:title "Layout"
+         :class (stl/css :title-spacing-layout)}
 
         (when (= (count shapes) 1)
           [:& copy-button {:data (css/get-shape-properties-css objects (first shapes) properties)

frontend/src/app/main/ui/viewer/inspect/attributes/shadow.cljs

@@ -10,7 +10,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.main.ui.components.copy-button :refer [copy-button]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [inspect-title-bar]]
    [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
    [app.util.code-gen.style-css :as css]
    [app.util.i18n :refer [tr]]
@@ -53,10 +53,9 @@
 
     (when (and (seq shapes) (> (count shapes) 0))
       [:div {:class (stl/css :attributes-block)}
-       [:& title-bar {:collapsable false
-                      :origin      :inspect
-                      :title       (tr "inspect.attributes.shadow")
-                      :class       (stl/css :title-spacing-shadow)}]
+       [:& inspect-title-bar
+        {:title (tr "inspect.attributes.shadow")
+         :class (stl/css :title-spacing-shadow)}]
 
        [:div {:class (stl/css :attributes-content)}
         (for [shape shapes]

frontend/src/app/main/ui/viewer/inspect/attributes/stroke.cljs

@@ -10,7 +10,7 @@
    [app.common.data :as d]
    [app.common.data.macros :as dm]
    [app.main.ui.components.copy-button :refer [copy-button]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [inspect-title-bar]]
    [app.main.ui.formats :as fmt]
    [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
    [app.util.code-gen.style-css-formats :as cssf]
@@ -61,10 +61,9 @@
   (let [shapes (->> shapes (filter has-stroke?))]
     (when (seq shapes)
       [:div {:class (stl/css :attributes-block)}
-       [:& title-bar {:collapsable false
-                      :origin      :inspect
-                      :title       (tr "inspect.attributes.stroke")
-                      :class       (stl/css :title-spacing-stroke)}]
+       [:& inspect-title-bar
+        {:title (tr "inspect.attributes.stroke")
+         :class (stl/css :title-spacing-stroke)}]
 
        [:div {:class (stl/css :attributes-content)}
         (for [shape shapes]

frontend/src/app/main/ui/viewer/inspect/attributes/svg.cljs

@@ -9,7 +9,7 @@
   (:require
    [app.common.data :as d]
    [app.main.ui.components.copy-button :refer [copy-button]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [inspect-title-bar]]
    [app.util.i18n :refer [tr]]
    [cuerdas.core :as str]
    [rumext.v2 :as mf]))
@@ -53,8 +53,7 @@
   (let [shape (first shapes)]
     (when (seq (:svg-attrs shape))
       [:div {:class (stl/css :attributes-block)}
-       [:& title-bar {:collapsable false
-                      :origin      :inspect
-                      :title       (tr "workspace.sidebar.options.svg-attrs.title")
-                      :class       (stl/css :title-spacing-svg)}]
+       [:& inspect-title-bar
+        {:title (tr "workspace.sidebar.options.svg-attrs.title")
+         :class (stl/css :title-spacing-svg)}]
        [:& svg-block {:shape shape}]])))

frontend/src/app/main/ui/viewer/inspect/attributes/text.cljs

@@ -14,7 +14,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.copy-button :refer [copy-button]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [inspect-title-bar]]
    [app.main.ui.formats :as fmt]
    [app.main.ui.viewer.inspect.attributes.common :refer [color-row]]
    [app.util.i18n :refer [tr]]
@@ -190,10 +190,9 @@
   [{:keys [shapes]}]
   (when-let [shapes (seq (filter has-text? shapes))]
     [:div {:class (stl/css :attributes-block)}
-     [:& title-bar {:collapsable false
-                    :origin      :inspect
-                    :title       (tr "inspect.attributes.typography")
-                    :class       (stl/css :title-spacing-text)}]
+     [:& inspect-title-bar
+      {:title (tr "inspect.attributes.typography")
+       :class (stl/css :title-spacing-text)}]
 
      (for [shape shapes]
        [:& text-block {:shape shape

frontend/src/app/main/ui/viewer/inspect/code.cljs

@@ -181,29 +181,29 @@
         (use-resize-hook :code 400 100 800 :y false :bottom)
 
         ;; set-style
-        ;; (mf/use-callback
+        ;; (mf/use-fn
         ;;  (fn [value]
         ;;    (reset! style-type* value)))
 
         set-markup
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps markup-type*)
          (fn [value]
            (reset! markup-type* value)))
 
         handle-copy-all-code
-        (mf/use-callback
+        (mf/use-fn
          (mf/deps style-code markup-code images-data)
          (fn []
            (wapi/write-to-clipboard (gen-all-code style-code markup-code images-data))))
 
         ;;handle-open-review
-        ;;(mf/use-callback
+        ;;(mf/use-fn
         ;; (fn []
         ;;   (st/emit! (dp/open-preview-selected))))
 
         handle-collapse
-        (mf/use-callback
+        (mf/use-fn
          (fn [e]
            (let [panel-type (keyword (dom/get-data (dom/get-current-target e) "type"))]
              (swap! collapsed*
@@ -257,11 +257,11 @@
 
        [:div {:class (stl/css :code-lang-option)}
         "CSS"]
-      ;; We will have a select when we have more than one option
-      ;;  [:& select {:default-value style-type
-      ;;              :class (stl/css :code-lang-select)
-      ;;              :on-change set-style
-      ;;              :options [{:label "CSS" :value "css"}]}]
+       ;; We will have a select when we have more than one option
+       ;;  [:& select {:default-value style-type
+       ;;              :class (stl/css :code-lang-select)
+       ;;              :on-change set-style
+       ;;              :options [{:label "CSS" :value "css"}]}]
 
        [:div {:class (stl/css :action-btns)}
         [:button {:class (stl/css :expand-button)