From 7f2af1c355b2b6fec3a353f04d43d95dd011c8e1 Mon Sep 17 00:00:00 2001
From: Luis de Dios <luis.dedios@kaleidos.net>
Date: Tue, 19 Aug 2025 09:43:35 +0200
Subject: [PATCH 1/3] :sparkles: Adjust component title

---
 .../sidebar/options/menus/component.cljs      | 141 ++++++++++--------
 .../sidebar/options/menus/component.scss      |   2 +-
 2 files changed, 77 insertions(+), 66 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
index aaa8d808a1..feb058b4da 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
@@ -1032,6 +1032,9 @@
         properties         (mf/with-memo [data objects variant-id]
                              (cfv/extract-properties-values data objects (:id shape)))
 
+        open*              (mf/use-state true)
+        open?              (deref open*)
+
         menu-open*         (mf/use-state false)
         menu-open?         (deref menu-open*)
 
@@ -1041,6 +1044,10 @@
                             {:title (tr "workspace.shape.menu.add-variant")
                              :action #(st/emit! (dwv/add-new-variant (:id shape)))}]
 
+        toggle-content
+        (mf/use-fn
+         #(swap! open* not))
+
         on-menu-click
         (mf/use-fn
          (mf/deps menu-open* menu-open?)
@@ -1096,9 +1103,12 @@
        [:div {:class (stl/css :element-title)}
 
 
-        [:& title-bar {:collapsable  false
+        [:& title-bar {:collapsable  true
+                       :collapsed    (not open?)
+                       :on-collapsed toggle-content
                        :title        (tr "workspace.options.component")
-                       :class        (stl/css :title-spacing-component)}
+                       :class        (stl/css :title-spacing-component)
+                       :title-class  (stl/css :title-bar-variant)}
 
          [:span {:class (stl/css :copy-text)}
           (tr "workspace.options.component.main")]
@@ -1109,78 +1119,79 @@
                             :on-click on-click-variant-title-help
                             :icon "help"}]]]]
 
-       [:div {:class (stl/css :element-content)}
-        [:div {:class (stl/css-case :component-wrapper true
-                                    :with-actions (not multi?)
-                                    :without-actions multi?)}
-         [:button {:class (stl/css-case :component-name-wrapper true
-                                        :with-main true
-                                        :swappeable false)}
+       (when open?
+         [:div {:class (stl/css :element-content)}
+          [:div {:class (stl/css-case :component-wrapper true
+                                      :with-actions (not multi?)
+                                      :without-actions multi?)}
+           [:button {:class (stl/css-case :component-name-wrapper true
+                                          :with-main true
+                                          :swappeable false)}
 
-          [:span {:class (stl/css :component-icon)} i/component]
+            [:span {:class (stl/css :component-icon)} i/component]
 
-          [:div {:class (stl/css :name-wrapper)}
-           [:div {:class (stl/css :component-name)}
-            [:span {:class (stl/css :component-name-inside)}
-             (if multi?
-               (tr "settings.multiple")
-               (cfh/last-path shape-name))]]]]
+            [:div {:class (stl/css :name-wrapper)}
+             [:div {:class (stl/css :component-name)}
+              [:span {:class (stl/css :component-name-inside)}
+               (if multi?
+                 (tr "settings.multiple")
+                 (cfh/last-path shape-name))]]]]
 
 
-         (when-not multi?
-           [:div {:class (stl/css :component-actions)}
-            [:button {:class (stl/css-case :menu-btn true
-                                           :selected menu-open?)
-                      :on-click on-menu-click}
-             i/menu]
+           (when-not multi?
+             [:div {:class (stl/css :component-actions)}
+              [:button {:class (stl/css-case :menu-btn true
+                                             :selected menu-open?)
+                        :on-click on-menu-click}
+               i/menu]
 
-            [:& component-ctx-menu {:show menu-open?
-                                    :on-close on-menu-close
-                                    :menu-entries menu-entries
-                                    :main-instance true}]])]
+              [:& component-ctx-menu {:show menu-open?
+                                      :on-close on-menu-close
+                                      :menu-entries menu-entries
+                                      :main-instance true}]])]
 
-        (when-not multi?
-          [:div {:class (stl/css :variant-property-list)}
-           (for [[pos property] (map-indexed vector properties)]
-             (let [last-prop? (<= (count properties) 1)
-                   values     (->> (:value property)
-                                   (move-empty-items-to-end)
-                                   (replace {"" "--"})
-                                   (str/join ", "))
-                   is-editing (:editing? (meta property))]
-               [:div {:key (str (:id shape) pos)
-                      :class (stl/css :variant-property-row)}
-                [:> input-with-meta* {:value (:name property)
-                                      :meta values
-                                      :is-editing is-editing
-                                      :max-length ctv/property-max-length
-                                      :data-position pos
-                                      :on-blur update-property-name}]
-                [:> icon-button* {:variant "ghost"
-                                  :aria-label (if last-prop?
-                                                (tr "workspace.shape.menu.remove-variant-property.last-property")
-                                                (tr "workspace.shape.menu.remove-variant-property"))
-                                  :on-click remove-property
-                                  :data-position pos
-                                  :icon "remove"
-                                  :disabled last-prop?}]]))])
+          (when-not multi?
+            [:div {:class (stl/css :variant-property-list)}
+             (for [[pos property] (map-indexed vector properties)]
+               (let [last-prop? (<= (count properties) 1)
+                     values     (->> (:value property)
+                                     (move-empty-items-to-end)
+                                     (replace {"" "--"})
+                                     (str/join ", "))
+                     is-editing (:editing? (meta property))]
+                 [:div {:key (str (:id shape) pos)
+                        :class (stl/css :variant-property-row)}
+                  [:> input-with-meta* {:value (:name property)
+                                        :meta values
+                                        :is-editing is-editing
+                                        :max-length ctv/property-max-length
+                                        :data-position pos
+                                        :on-blur update-property-name}]
+                  [:> icon-button* {:variant "ghost"
+                                    :aria-label (if last-prop?
+                                                  (tr "workspace.shape.menu.remove-variant-property.last-property")
+                                                  (tr "workspace.shape.menu.remove-variant-property"))
+                                    :on-click remove-property
+                                    :data-position pos
+                                    :icon "remove"
+                                    :disabled last-prop?}]]))])
 
-        (if malformed?
-          [:div {:class (stl/css :variant-warning-wrapper)}
-           [:> icon* {:icon-id "msg-neutral"
-                      :class (stl/css :variant-warning-darken)}]
-           [:div {:class (stl/css :variant-warning-highlight)}
-            (tr "workspace.options.component.variant.malformed.group.title")]
-           [:button {:class (stl/css :variant-warning-button)
-                     :on-click select-shapes-with-malformed}
-            (tr "workspace.options.component.variant.malformed.group.locate")]]
-
-          (when duplicated?
+          (if malformed?
             [:div {:class (stl/css :variant-warning-wrapper)}
              [:> icon* {:icon-id "msg-neutral"
                         :class (stl/css :variant-warning-darken)}]
              [:div {:class (stl/css :variant-warning-highlight)}
-              (tr "workspace.options.component.variant.duplicated.group.title")]
+              (tr "workspace.options.component.variant.malformed.group.title")]
              [:button {:class (stl/css :variant-warning-button)
-                       :on-click select-shapes-with-duplicated}
-              (tr "workspace.options.component.variant.duplicated.group.locate")]]))]])))
+                       :on-click select-shapes-with-malformed}
+              (tr "workspace.options.component.variant.malformed.group.locate")]]
+
+            (when duplicated?
+              [:div {:class (stl/css :variant-warning-wrapper)}
+               [:> icon* {:icon-id "msg-neutral"
+                          :class (stl/css :variant-warning-darken)}]
+               [:div {:class (stl/css :variant-warning-highlight)}
+                (tr "workspace.options.component.variant.duplicated.group.title")]
+               [:button {:class (stl/css :variant-warning-button)
+                         :on-click select-shapes-with-duplicated}
+                (tr "workspace.options.component.variant.duplicated.group.locate")]]))])])))
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
index 2a87597a69..ebc6b8219a 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
@@ -34,7 +34,7 @@
 
 .title-spacing-component {
   justify-content: flex-start;
-  gap: $s-4;
+  gap: $s-8;
   margin-bottom: $s-4;
 }
 

From e7e7d576b2da6b2f9953966bc16b3e31f02aae2e Mon Sep 17 00:00:00 2001
From: Luis de Dios <luis.dedios@kaleidos.net>
Date: Tue, 19 Aug 2025 09:49:18 +0200
Subject: [PATCH 2/3] :recycle: Adapt title-bar component

---
 .../src/app/main/ui/components/title_bar.cljs |  3 +-
 .../src/app/main/ui/inspect/annotation.cljs   |  8 ++---
 .../ui/inspect/attributes/layout_element.cljs |  8 ++---
 frontend/src/app/main/ui/inspect/exports.cljs |  8 ++---
 .../src/app/main/ui/workspace/libraries.cljs  | 14 ++++-----
 .../src/app/main/ui/workspace/plugins.cljs    |  6 ++--
 .../ui/workspace/sidebar/assets/common.cljs   |  4 +--
 .../sidebar/assets/file_library.cljs          | 20 ++++++-------
 .../ui/workspace/sidebar/assets/groups.cljs   | 30 +++++++++----------
 .../app/main/ui/workspace/sidebar/layers.cljs | 10 +++----
 .../workspace/sidebar/options/menus/blur.cljs | 18 +++++------
 .../options/menus/color_selection.cljs        | 12 ++++----
 .../sidebar/options/menus/component.cljs      | 26 ++++++++--------
 .../sidebar/options/menus/constraints.cljs    | 10 +++----
 .../sidebar/options/menus/exports.cljs        | 12 ++++----
 .../workspace/sidebar/options/menus/fill.cljs | 12 ++++----
 .../sidebar/options/menus/frame_grid.cljs     | 12 ++++----
 .../sidebar/options/menus/grid_cell.cljs      | 10 +++----
 .../sidebar/options/menus/interactions.cljs   | 20 ++++++-------
 .../options/menus/layout_container.cljs       |  4 +--
 .../sidebar/options/menus/layout_item.cljs    | 14 ++++-----
 .../sidebar/options/menus/shadow.cljs         | 18 +++++------
 .../sidebar/options/menus/stroke.cljs         | 12 ++++----
 .../sidebar/options/menus/svg_attrs.cljs      | 12 ++++----
 .../workspace/sidebar/options/menus/text.cljs | 12 ++++----
 .../ui/workspace/sidebar/options/page.cljs    |  8 ++---
 .../main/ui/workspace/sidebar/sitemap.cljs    | 14 ++++-----
 .../app/main/ui/workspace/tokens/sidebar.cljs |  4 +--
 28 files changed, 170 insertions(+), 171 deletions(-)

diff --git a/frontend/src/app/main/ui/components/title_bar.cljs b/frontend/src/app/main/ui/components/title_bar.cljs
index de973199db..94a89f4800 100644
--- a/frontend/src/app/main/ui/components/title_bar.cljs
+++ b/frontend/src/app/main/ui/components/title_bar.cljs
@@ -14,8 +14,7 @@
 (def ^:private chevron-icon
   (i/icon-xref :arrow (stl/css :chevron-icon)))
 
-(mf/defc title-bar
-  {::mf/props :obj}
+(mf/defc title-bar*
   [{:keys [class collapsable collapsed title children
            btn-children all-clickable add-icon-gap
            title-class on-collapsed on-btn-click]}]
diff --git a/frontend/src/app/main/ui/inspect/annotation.cljs b/frontend/src/app/main/ui/inspect/annotation.cljs
index 7bfd9805cd..f959af13bb 100644
--- a/frontend/src/app/main/ui/inspect/annotation.cljs
+++ b/frontend/src/app/main/ui/inspect/annotation.cljs
@@ -8,16 +8,16 @@
   (:require-macros [app.main.style :as stl])
   (:require
    [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 [title-bar*]]
    [app.util.i18n :as i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
 (mf/defc annotation
   [{:keys [content] :as props}]
   [:div {:class (stl/css :attributes-block)}
-   [:& title-bar {:collapsable false
-                  :title       (tr "workspace.options.component.annotation")
-                  :class       (stl/css :title-spacing-annotation)}
+   [:> title-bar* {:collapsable false
+                   :title       (tr "workspace.options.component.annotation")
+                   :class       (stl/css :title-spacing-annotation)}
     [:> copy-button* {:data content
                       :class (stl/css :copy-btn-title)}]]
 
diff --git a/frontend/src/app/main/ui/inspect/attributes/layout_element.cljs b/frontend/src/app/main/ui/inspect/attributes/layout_element.cljs
index 190a53ee75..599b8b5cbf 100644
--- a/frontend/src/app/main/ui/inspect/attributes/layout_element.cljs
+++ b/frontend/src/app/main/ui/inspect/attributes/layout_element.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 [title-bar*]]
    [app.main.ui.inspect.attributes.common :as cmm]
    [app.util.code-gen.style-css :as css]
    [rumext.v2 :as mf]))
@@ -67,9 +67,9 @@
 
     (when some-layout-prop?
       [:div {:class (stl/css :attributes-block)}
-       [:& title-bar {:collapsable false
-                      :title       menu-title
-                      :class       (stl/css :title-spacing-layout-element)}
+       [:> title-bar* {:collapsable false
+                       :title       menu-title
+                       :class       (stl/css :title-spacing-layout-element)}
         (when (= (count shapes) 1)
           [:> copy-button* {:data  (css/get-shape-properties-css objects (first shapes) properties)
                             :class (stl/css :copy-btn-title)}])]
diff --git a/frontend/src/app/main/ui/inspect/exports.cljs b/frontend/src/app/main/ui/inspect/exports.cljs
index 5f1aa2118e..60df045988 100644
--- a/frontend/src/app/main/ui/inspect/exports.cljs
+++ b/frontend/src/app/main/ui/inspect/exports.cljs
@@ -12,7 +12,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :refer [tr c]]
@@ -136,9 +136,9 @@
                            vec))))
     [:div {:class (stl/css :element-set)}
      [:div {:class (stl/css :element-title)}
-      [:& title-bar {:collapsable false
-                     :title       (tr "workspace.options.export")
-                     :class       (stl/css :title-spacing-export-viewer)}
+      [:> title-bar* {:collapsable false
+                      :title       (tr "workspace.options.export")
+                      :class       (stl/css :title-spacing-export-viewer)}
        [:button {:class (stl/css :add-export)
                  :on-click add-export} i/add]]]
 
diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs
index dd609e7a34..ba6a82c085 100644
--- a/frontend/src/app/main/ui/workspace/libraries.cljs
+++ b/frontend/src/app/main/ui/workspace/libraries.cljs
@@ -27,7 +27,7 @@
    [app.main.ui.components.color-bullet :as cb]
    [app.main.ui.components.link-button :as lb]
    [app.main.ui.components.search-bar :refer [search-bar]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.layout.tab-switcher :refer [tab-switcher*]]
    [app.main.ui.hooks :as h]
@@ -287,9 +287,9 @@
 
     [:div {:class (stl/css :libraries-content)}
      [:div {:class (stl/css :lib-section)}
-      [:& title-bar {:collapsable false
-                     :title       (tr "workspace.libraries.in-this-file")
-                     :class       (stl/css :title-spacing-lib)}]
+      [:> title-bar* {:collapsable false
+                      :title       (tr "workspace.libraries.in-this-file")
+                      :class       (stl/css :title-spacing-lib)}]
       [:div {:class (stl/css :section-list)}
 
        [:div {:class (stl/css :section-list-item)}
@@ -326,9 +326,9 @@
            detach-icon]])]]
 
      [:div {:class (stl/css :shared-section)}
-      [:& title-bar {:collapsable false
-                     :title       (tr "workspace.libraries.shared-libraries")
-                     :class       (stl/css :title-spacing-lib)}]
+      [:> title-bar* {:collapsable false
+                      :title       (tr "workspace.libraries.shared-libraries")
+                      :class       (stl/css :title-spacing-lib)}]
       [:& search-bar {:on-change change-search-term
                       :value search-term
                       :placeholder (tr "workspace.libraries.search-shared-libraries")
diff --git a/frontend/src/app/main/ui/workspace/plugins.cljs b/frontend/src/app/main/ui/workspace/plugins.cljs
index 8ea1e76496..3d36d7b0a4 100644
--- a/frontend/src/app/main/ui/workspace/plugins.cljs
+++ b/frontend/src/app/main/ui/workspace/plugins.cljs
@@ -16,7 +16,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.search-bar :refer [search-bar]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
@@ -209,8 +209,8 @@
            (tr "workspace.plugins.plugin-list-link") i/external-link]]
 
          [:*
-          [:& title-bar {:collapsable false
-                         :title (tr "workspace.plugins.installed-plugins")}]
+          [:> title-bar* {:collapsable false
+                          :title (tr "workspace.plugins.installed-plugins")}]
 
           [:div {:class (stl/css :plugins-list)}
            (for [[idx manifest] (d/enumerate plugins-state)]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
index 868304fd80..7e65e670ed 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
@@ -28,7 +28,7 @@
    [app.main.render :refer [component-svg component-svg-thumbnail]]
    [app.main.store :as st]
    [app.main.ui.components.context-menu-a11y :refer [context-menu*]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.foundations.assets.icon :refer [icon*]]
    [app.util.array :as array]
@@ -176,7 +176,7 @@
                                 :opened (and (< 0 assets-count)
                                              open?))
            :on-click on-click}
-     [:& title-bar
+     [:> title-bar*
       {:collapsable   (< 0 assets-count)
        :collapsed     (not open?)
        :all-clickable true
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
index 8529a65b2d..eb421dd77f 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs
@@ -18,7 +18,7 @@
    [app.main.refs :as refs]
    [app.main.router :as rt]
    [app.main.store :as st]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.colors :refer [colors-section]]
@@ -97,16 +97,16 @@
     [:div {:class (stl/css-case
                    :library-title true
                    :open is-open)}
-     [:& title-bar {:collapsable    true
-                    :collapsed      (not is-open)
-                    :all-clickable  true
-                    :on-collapsed   toggle-open
-                    :title          (if is-local
-                                      (mf/html [:div {:class (stl/css :special-title)}
-                                                (tr "workspace.assets.local-library")])
+     [:> title-bar* {:collapsable    true
+                     :collapsed      (not is-open)
+                     :all-clickable  true
+                     :on-collapsed   toggle-open
+                     :title          (if is-local
+                                       (mf/html [:div {:class (stl/css :special-title)}
+                                                 (tr "workspace.assets.local-library")])
                                       ;; Do we need to add shared info here?
-                                      (mf/html [:div {:class (stl/css :special-title)}
-                                                file-name]))}
+                                       (mf/html [:div {:class (stl/css :special-title)}
+                                                 file-name]))}
       (when-not ^boolean is-local
         [:span {:title (tr "workspace.assets.open-library")}
          [:a {:class (stl/css :file-link)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
index 9ef16fae5b..10a5dec9a3 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs
@@ -13,7 +13,7 @@
    [app.main.data.workspace :as dw]
    [app.main.store :as st]
    [app.main.ui.components.forms :as fm]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.assets.common :as cmm]
@@ -48,20 +48,20 @@
       [:div {:class (stl/css :group-title-wrapper)}
        [:div {:class (stl/css :group-title)
               :on-context-menu on-context-menu}
-        [:& title-bar {:collapsable    true
-                       :collapsed      (not group-open?)
-                       :all-clickable  true
-                       :on-collapsed   on-fold-group
-                       :title          (mf/html [:* (when-not (empty? other-path)
-                                                      [:span {:class (stl/css :pre-path)
-                                                              :title (when truncated path)}
-                                                       other-path "\u00A0\u2022\u00A0"])
-                                                 [:span {:class (stl/css :path)
-                                                         :title (when truncated path)}
-                                                  last-path]
-                                                 #_[:span {:class (stl/css :title-menu)
-                                                           :on-click on-context-menu}
-                                                    "aaa"]])}]
+        [:> title-bar* {:collapsable    true
+                        :collapsed      (not group-open?)
+                        :all-clickable  true
+                        :on-collapsed   on-fold-group
+                        :title          (mf/html [:* (when-not (empty? other-path)
+                                                       [:span {:class (stl/css :pre-path)
+                                                               :title (when truncated path)}
+                                                        other-path "\u00A0\u2022\u00A0"])
+                                                  [:span {:class (stl/css :path)
+                                                          :title (when truncated path)}
+                                                   last-path]
+                                                  #_[:span {:class (stl/css :title-menu)
+                                                            :on-click on-context-menu}
+                                                     "aaa"]])}]
 
         [:& cmm/assets-context-menu
          {:on-close on-close-menu
diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
index eb4537dd10..9c18c29eef 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs
@@ -17,7 +17,7 @@
    [app.main.store :as st]
    [app.main.ui.components.search-bar :refer [search-bar]]
    [app.main.ui.components.shape-icon :as sic]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
@@ -430,10 +430,10 @@
                  i/tick])]])]
 
          [:div {:class (stl/css :tool-window-bar)}
-          [:& title-bar {:collapsable  false
-                         :title        (:name page)
-                         :on-btn-click toggle-search
-                         :btn-children i/search}]]))]))
+          [:> title-bar* {:collapsable  false
+                          :title        (:name page)
+                          :on-btn-click toggle-search
+                          :btn-children i/search}]]))]))
 
 
 (defn- on-scroll
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
index bbc6b7f0da..c8661fbf13 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/blur.cljs
@@ -12,7 +12,7 @@
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.util.i18n :as i18n :refer [tr]]
@@ -83,14 +83,14 @@
 
     [:div {:class (stl/css :element-set)}
      [:div {:class (stl/css :element-title)}
-      [:& title-bar {:collapsable  has-value?
-                     :collapsed    (not open?)
-                     :on-collapsed toggle-content
-                     :title        (case type
-                                     :multiple (tr "workspace.options.blur-options.title.multiple")
-                                     :group (tr "workspace.options.blur-options.title.group")
-                                     (tr "workspace.options.blur-options.title"))
-                     :class        (stl/css-case :title-spacing-blur (not has-value?))}
+      [:> title-bar* {:collapsable  has-value?
+                      :collapsed    (not open?)
+                      :on-collapsed toggle-content
+                      :title        (case type
+                                      :multiple (tr "workspace.options.blur-options.title.multiple")
+                                      :group (tr "workspace.options.blur-options.title.group")
+                                      (tr "workspace.options.blur-options.title"))
+                      :class        (stl/css-case :title-spacing-blur (not has-value?))}
        (when-not has-value?
          [:> icon-button* {:variant "ghost"
                            :aria-label (tr "workspace.options.blur-options.add-blur")
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
index a9978188ae..64a34297a1 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/color_selection.cljs
@@ -11,7 +11,7 @@
    [app.main.data.workspace.colors :as dwc]
    [app.main.data.workspace.selection :as dws]
    [app.main.store :as st]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
    [app.util.i18n :as i18n :refer [tr]]
@@ -107,11 +107,11 @@
 
     [:div {:class (stl/css :element-set)}
      [:div {:class (stl/css :element-title)}
-      [:& title-bar {:collapsable  has-colors?
-                     :collapsed    (not open?)
-                     :on-collapsed toggle-content
-                     :title        (tr "workspace.options.selection-color")
-                     :class        (stl/css-case :title-spacing-selected-colors (not has-colors?))}]]
+      [:> title-bar* {:collapsable  has-colors?
+                      :collapsed    (not open?)
+                      :on-collapsed toggle-content
+                      :title        (tr "workspace.options.selection-color")
+                      :class        (stl/css-case :title-spacing-selected-colors (not has-colors?))}]]
 
      (when open?
        [:div {:class (stl/css :element-content)}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
index feb058b4da..338493acfb 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
@@ -28,7 +28,7 @@
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.components.search-bar :refer [search-bar]]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.ds.controls.combobox :refer [combobox*]]
@@ -901,12 +901,12 @@
            [:span {:class (stl/css :icon-back)} i/arrow]
            [:span (tr "workspace.options.component")]]
 
-          [:& title-bar {:collapsable  true
-                         :collapsed    (not open?)
-                         :on-collapsed toggle-content
-                         :title        (tr "workspace.options.component")
-                         :class        (stl/css :title-spacing-component)
-                         :title-class (stl/css-case :title-bar-variant is-variant?)}
+          [:> title-bar* {:collapsable  true
+                          :collapsed    (not open?)
+                          :on-collapsed toggle-content
+                          :title        (tr "workspace.options.component")
+                          :class        (stl/css :title-spacing-component)
+                          :title-class (stl/css-case :title-bar-variant is-variant?)}
            [:span {:class (stl/css :copy-text)}
             (if main-instance?
               (if is-variant?
@@ -1103,12 +1103,12 @@
        [:div {:class (stl/css :element-title)}
 
 
-        [:& title-bar {:collapsable  true
-                       :collapsed    (not open?)
-                       :on-collapsed toggle-content
-                       :title        (tr "workspace.options.component")
-                       :class        (stl/css :title-spacing-component)
-                       :title-class  (stl/css :title-bar-variant)}
+        [:> title-bar* {:collapsable  true
+                        :collapsed    (not open?)
+                        :on-collapsed toggle-content
+                        :title        (tr "workspace.options.component")
+                        :class        (stl/css :title-spacing-component)
+                        :title-class  (stl/css :title-bar-variant)}
 
          [:span {:class (stl/css :copy-text)}
           (tr "workspace.options.component.main")]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs
index f9ec1f8896..5ed03279f7 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/constraints.cljs
@@ -15,7 +15,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -157,10 +157,10 @@
     (when in-frame?
       [:div {:class (stl/css :element-set)}
        [:div {:class (stl/css :element-title)}
-        [:& title-bar {:collapsable  true
-                       :collapsed    (not open?)
-                       :on-collapsed toggle-content
-                       :title        (tr "workspace.options.constraints")}]]
+        [:> title-bar* {:collapsable  true
+                        :collapsed    (not open?)
+                        :on-collapsed toggle-content
+                        :title        (tr "workspace.options.constraints")}]]
        (when open?
          [:div {:class (stl/css :element-set-content)}
           [:div {:class (stl/css :constraints-widget)}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
index 415d0295a1..dd486cfece 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/exports.cljs
@@ -14,7 +14,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.exports.assets]
    [app.util.dom :as dom]
@@ -179,11 +179,11 @@
 
     [:div {:class (stl/css :element-set)}
      [:div {:class (stl/css :element-title)}
-      [:& title-bar {:collapsable  has-exports?
-                     :collapsed    (not open?)
-                     :on-collapsed toggle-content
-                     :title        (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export"))
-                     :class        (stl/css-case :title-spacing-export (not has-exports?))}
+      [:> title-bar* {:collapsable  has-exports?
+                      :collapsed    (not open?)
+                      :on-collapsed toggle-content
+                      :title        (tr (if (> (count ids) 1) "workspace.options.export-multiple" "workspace.options.export"))
+                      :class        (stl/css-case :title-spacing-export (not has-exports?))}
        [:> icon-button* {:variant "ghost"
                          :aria-label (tr "workspace.options.export.add-export")
                          :on-click add-export
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
index a22f552034..f4415b49a6 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/fill.cljs
@@ -14,7 +14,7 @@
    [app.main.data.workspace :as udw]
    [app.main.data.workspace.colors :as dc]
    [app.main.store :as st]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
@@ -183,11 +183,11 @@
 
     [:div {:class (stl/css :element-set)}
      [:div {:class (stl/css :element-title)}
-      [:& title-bar {:collapsable  has-fills?
-                     :collapsed    (not open?)
-                     :on-collapsed toggle-content
-                     :title        label
-                     :class        (stl/css-case :title-spacing-fill (not has-fills?))}
+      [:> title-bar* {:collapsable  has-fills?
+                      :collapsed    (not open?)
+                      :on-collapsed toggle-content
+                      :title        label
+                      :class        (stl/css-case :title-spacing-fill (not has-fills?))}
 
        (when (not (= :multiple fills))
          [:> icon-button* {:variant "ghost"
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
index d593687e5f..5558aea627 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/frame_grid.cljs
@@ -15,7 +15,7 @@
    [app.main.ui.components.editable-select :refer [editable-select]]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.common :refer [advanced-options]]
@@ -313,11 +313,11 @@
          #(st/emit! (dw/add-frame-grid id)))]
 
     [:div {:class (stl/css :element-set)}
-     [:& title-bar {:collapsable  has-frame-grids?
-                    :collapsed    (not open?)
-                    :on-collapsed toggle-content
-                    :class        (stl/css-case :title-spacing-board-grid (not has-frame-grids?))
-                    :title        (tr "workspace.options.guides.title")}
+     [:> title-bar* {:collapsable  has-frame-grids?
+                     :collapsed    (not open?)
+                     :on-collapsed toggle-content
+                     :class        (stl/css-case :title-spacing-board-grid (not has-frame-grids?))
+                     :title        (tr "workspace.options.guides.title")}
 
       [:> icon-button* {:variant "ghost"
                         :aria-label (tr "workspace.options.guides.add-guide")
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
index db5de12bd5..db685ab65d 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/grid_cell.cljs
@@ -17,7 +17,7 @@
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.hooks :as hooks]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
@@ -174,10 +174,10 @@
 
     [:div {:class (stl/css :grid-cell-menu)}
      [:div {:class (stl/css :grid-cell-menu-title)}
-      [:& title-bar {:collapsable  true
-                     :collapsed    (not open?)
-                     :on-collapsed #(swap! state* update :open not)
-                     :title        "Grid cell"}]]
+      [:> title-bar* {:collapsable  true
+                      :collapsed    (not open?)
+                      :on-collapsed #(swap! state* update :open not)
+                      :title        "Grid cell"}]]
 
      (when open?
        [:div {:class (stl/css :grid-cell-menu-container)}
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
index 6d2a7d8393..d6a0c72e36 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/interactions.cljs
@@ -21,7 +21,7 @@
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.radio-buttons :refer [radio-buttons radio-button]]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
@@ -160,9 +160,9 @@
   [{:keys [flows]}]
   (when flows
     [:div {:class (stl/css :interaction-options)}
-     [:& title-bar {:collapsable false
-                    :title       (tr "workspace.options.flows.flow-starts")
-                    :class       (stl/css :title-spacing-layout-flow)}]
+     [:> title-bar* {:collapsable false
+                     :title       (tr "workspace.options.flows.flow-starts")
+                     :class       (stl/css :title-spacing-layout-flow)}]
      (for [[id flow] flows]
        [:& flow-item {:flow flow :key (dm/str id)}])]))
 
@@ -174,9 +174,9 @@
           add-flow (mf/use-fn #(st/emit! (dwi/add-flow-selected-frame)))]
 
       [:div {:class (stl/css :element-set)}
-       [:& title-bar {:collapsable false
-                      :title       (tr "workspace.options.flows.flow")
-                      :class       (stl/css :title-spacing-layout-flow)}
+       [:> title-bar* {:collapsable false
+                       :title       (tr "workspace.options.flows.flow")
+                       :class       (stl/css :title-spacing-layout-flow)}
         (when (nil? flow)
           [:> icon-button* {:variant "ghost"
                             :aria-label (tr "workspace.options.flows.add-flow-start")
@@ -727,9 +727,9 @@
      [:div {:class (stl/css :interaction-options)}
       (when (and shape (not (cfh/unframed-shape? shape)))
         [:div {:class (stl/css :element-title)}
-         [:& title-bar {:collapsable false
-                        :title       (tr "workspace.options.interactions")
-                        :class       (stl/css :title-spacing-layout-interactions)}
+         [:> title-bar* {:collapsable false
+                         :title       (tr "workspace.options.interactions")
+                         :class       (stl/css :title-spacing-layout-interactions)}
 
           [:> icon-button* {:variant "ghost"
                             :aria-label (tr "workspace.options.interactions.add-interaction")
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
index afbd1064ae..7230d76b41 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_container.cljs
@@ -22,7 +22,7 @@
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.formats :as fmt]
    [app.main.ui.hooks :as h]
@@ -1002,7 +1002,7 @@
 
     [:div {:class (stl/css :element-set) :data-testid "inspect-layout"}
      [:div {:class (stl/css :element-title)}
-      [:& title-bar
+      [:> title-bar*
        {:collapsable has-layout?
         :collapsed (not open?)
         :on-collapsed on-toggle-visibility
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
index 31d35d2062..f76c6a06fb 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/layout_item.cljs
@@ -15,7 +15,7 @@
    [app.main.store :as st]
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.icons :as i]
    [app.main.ui.workspace.sidebar.options.menus.layout-container :refer [get-layout-flex-icon]]
    [app.util.dom :as dom]
@@ -440,12 +440,12 @@
 
     [:div {:class (stl/css :element-set)}
      [:div {:class (stl/css :element-title)}
-      [:& title-bar {:collapsable  has-content?
-                     :collapsed    (not open?)
-                     :on-collapsed toggle-content
-                     :title        title
-                     :class        (stl/css-case :title-spacing-layout-element true
-                                                 :title-spacing-empty (not has-content?))}]]
+      [:> title-bar* {:collapsable  has-content?
+                      :collapsed    (not open?)
+                      :on-collapsed toggle-content
+                      :title        title
+                      :class        (stl/css-case :title-spacing-layout-element true
+                                                  :title-spacing-empty (not has-content?))}]]
      (when open?
        [:div {:class (stl/css :flex-element-menu)}
         (when (or is-layout-child? is-absolute?)
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
index 5372321259..aaf5f04770 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/shadow.cljs
@@ -20,7 +20,7 @@
    [app.main.ui.components.numeric-input :refer [numeric-input*]]
    [app.main.ui.components.reorder-handler :refer [reorder-handler*]]
    [app.main.ui.components.select :refer [select]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.icons :as i]
@@ -321,14 +321,14 @@
                                                               (ctss/check-shadow))))))))))]
     [:div {:class (stl/css :element-set)}
      [:div {:class (stl/css :element-title)}
-      [:& title-bar {:collapsable  has-shadows?
-                     :collapsed    (not show-content?)
-                     :on-collapsed toggle-content
-                     :title        (case type
-                                     :multiple (tr "workspace.options.shadow-options.title.multiple")
-                                     :group (tr "workspace.options.shadow-options.title.group")
-                                     (tr "workspace.options.shadow-options.title"))
-                     :class        (stl/css-case :title-spacing-shadow (not has-shadows?))}
+      [:> title-bar* {:collapsable  has-shadows?
+                      :collapsed    (not show-content?)
+                      :on-collapsed toggle-content
+                      :title        (case type
+                                      :multiple (tr "workspace.options.shadow-options.title.multiple")
+                                      :group (tr "workspace.options.shadow-options.title.group")
+                                      (tr "workspace.options.shadow-options.title"))
+                      :class        (stl/css-case :title-spacing-shadow (not has-shadows?))}
 
        (when-not (= :multiple shadows)
          [:> icon-button* {:variant "ghost"
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
index 456189b621..4d3f4d6210 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/stroke.cljs
@@ -13,7 +13,7 @@
    [app.main.data.workspace :as udw]
    [app.main.data.workspace.colors :as dc]
    [app.main.store :as st]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as h]
    [app.main.ui.workspace.sidebar.options.rows.stroke-row :refer [stroke-row]]
@@ -170,11 +170,11 @@
 
     [:div {:class (stl/css :element-set)}
      [:div {:class (stl/css :element-title)}
-      [:& title-bar {:collapsable  has-strokes?
-                     :collapsed    (not open?)
-                     :on-collapsed toggle-content
-                     :title        label
-                     :class        (stl/css-case :title-spacing-stroke (not has-strokes?))}
+      [:> title-bar* {:collapsable  has-strokes?
+                      :collapsed    (not open?)
+                      :on-collapsed toggle-content
+                      :title        label
+                      :class        (stl/css-case :title-spacing-stroke (not has-strokes?))}
        (when (not (= :multiple strokes))
          [:> icon-button* {:variant "ghost"
                            :aria-label (tr "workspace.options.stroke.add-stroke")
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
index a1a451c8f8..ea2ab0ce91 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/svg_attrs.cljs
@@ -10,7 +10,7 @@
    [app.common.data :as d]
    [app.main.data.workspace.shapes :as dwsh]
    [app.main.store :as st]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [app.util.functions :as uf]
@@ -95,11 +95,11 @@
     (when-not (empty? attrs)
       [:div {:class (stl/css :element-set)}
        [:div {:class (stl/css :element-set-title)}
-        [:& title-bar {:collapsable  has-attributes?
-                       :collapsed    (not open?)
-                       :on-collapsed toggle-content
-                       :title        (tr "workspace.sidebar.options.svg-attrs.title")
-                       :class        (stl/css-case :title-spacing-svg-attrs (not has-attributes?))}]]
+        [:> title-bar* {:collapsable  has-attributes?
+                        :collapsed    (not open?)
+                        :on-collapsed toggle-content
+                        :title        (tr "workspace.sidebar.options.svg-attrs.title")
+                        :class        (stl/css-case :title-spacing-svg-attrs (not has-attributes?))}]]
        (when open?
          [:div {:class (stl/css :element-set-content)}
           (for [[attr-key attr-value] attrs]
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
index daaee565ec..3f5c9ee4cd 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/text.cljs
@@ -19,7 +19,7 @@
    [app.main.refs :as refs]
    [app.main.store :as st]
    [app.main.ui.components.radio-buttons :refer [radio-button radio-buttons]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as hooks]
@@ -299,11 +299,11 @@
 
     [:div {:class (stl/css :element-set)}
      [:div {:class (stl/css :element-title)}
-      [:& title-bar {:collapsable  true
-                     :collapsed    (not main-menu-open?)
-                     :on-collapsed toggle-main-menu
-                     :title        label
-                     :class        (stl/css :title-spacing-text)}
+      [:> title-bar* {:collapsable  true
+                      :collapsed    (not main-menu-open?)
+                      :on-collapsed toggle-main-menu
+                      :title        label
+                      :class        (stl/css :title-spacing-text)}
        (when (and (not typography) (not multiple?))
          [:> icon-button* {:variant "ghost"
                            :aria-label (tr "labels.options")
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs
index db6c17d2c0..f68a90f356 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/page.cljs
@@ -14,7 +14,7 @@
    [app.main.data.workspace.undo :as dwu]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.workspace.sidebar.options.rows.color-row :refer [color-row*]]
    [app.util.i18n :as i18n :refer [tr]]
    [okulary.core :as l]
@@ -38,9 +38,9 @@
 
     [:div {:class (stl/css :element-set)}
      [:div {:class (stl/css :element-title)}
-      [:& title-bar {:collapsable false
-                     :title       (tr "workspace.options.canvas-background")
-                     :class       (stl/css :title-spacing-page)}]]
+      [:> title-bar* {:collapsable false
+                      :title       (tr "workspace.options.canvas-background")
+                      :class       (stl/css :title-spacing-page)}]]
      [:div {:class (stl/css :element-content)}
 
       [:> color-row*
diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
index 49ddedff3d..942320ec87 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
@@ -15,7 +15,7 @@
    [app.main.data.workspace :as dw]
    [app.main.refs :as refs]
    [app.main.store :as st]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
    [app.main.ui.hooks :as hooks]
@@ -231,12 +231,12 @@
     [:div {:class (stl/css :sitemap)
            :style {:--height (dm/str height "px")}}
 
-     [:& title-bar {:collapsable   true
-                    :collapsed     collapsed
-                    :on-collapsed  on-toggle-collapsed
-                    :all-clickable true
-                    :title         (tr "workspace.sidebar.sitemap")
-                    :class         (stl/css :title-spacing-sitemap)}
+     [:> title-bar* {:collapsable   true
+                     :collapsed     collapsed
+                     :on-collapsed  on-toggle-collapsed
+                     :all-clickable true
+                     :title         (tr "workspace.sidebar.sitemap")
+                     :class         (stl/css :title-spacing-sitemap)}
 
       (if ^boolean read-only?
         (when ^boolean (:can-edit permissions)
diff --git a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
index 7bffc618af..ac31db6008 100644
--- a/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/sidebar.cljs
@@ -13,7 +13,7 @@
    [app.main.refs :as refs]
    [app.main.ui.components.dropdown-menu :refer [dropdown-menu*
                                                  dropdown-menu-item*]]
-   [app.main.ui.components.title-bar :refer [title-bar]]
+   [app.main.ui.components.title-bar :refer [title-bar*]]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.button :refer [button*]]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
@@ -76,7 +76,7 @@
                 :style {"--resize-height" (str resize-height "px")}}
       [:> themes-header*]
       [:div {:class (stl/css :sidebar-header)}
-       [:& title-bar {:title (tr "labels.sets")}
+       [:> title-bar* {:title (tr "labels.sets")}
         (when can-edit?
           [:> tsetslist/add-button*])]]
 

From 4d8ad19eea9def8810964918fb3126683cdc4f49 Mon Sep 17 00:00:00 2001
From: Luis de Dios <luis.dedios@kaleidos.net>
Date: Wed, 20 Aug 2025 13:30:22 +0200
Subject: [PATCH 3/3] :lipstick: Improve the alignment, spaces and sizes of the
 variant elements

---
 .../sidebar/options/menus/component.cljs      | 77 ++++++++++---------
 .../sidebar/options/menus/component.scss      | 70 ++++++++++-------
 2 files changed, 82 insertions(+), 65 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
index 338493acfb..4d43da5c0d 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs
@@ -361,15 +361,17 @@
     [:*
      [:div {:class (stl/css :variant-property-list)}
       (for [[pos prop] (map-indexed vector properties)]
-        [:div {:key (str variant-id "-" pos) :class (stl/css :variant-property-container)}
-         [:*
-          [:div {:class (stl/css :variant-property-name-wrapper)}
-           [:> input-with-meta* {:value (:name prop)
-                                 :is-editing (:editing? (meta prop))
-                                 :max-length ctv/property-max-length
-                                 :data-position pos
-                                 :on-blur update-property-name}]]
+        [:div {:key (str variant-id "-" pos)
+               :class (stl/css :variant-property-container)}
 
+         [:div {:class (stl/css :variant-property-name-wrapper)}
+          [:> input-with-meta* {:value (:name prop)
+                                :is-editing (:editing? (meta prop))
+                                :max-length ctv/property-max-length
+                                :data-position pos
+                                :on-blur update-property-name}]]
+
+         [:div {:class (stl/css :variant-property-value-wrapper)}
           (let [mixed-value? (= (:value prop) false)]
             [:> combobox* {:id (str "variant-prop-" variant-id "-" pos)
                            :placeholder (if mixed-value? (tr "settings.multiple") "--")
@@ -463,12 +465,15 @@
     [:*
      [:div {:class (stl/css :variant-property-list)}
       (for [[pos prop] (map vector (range) properties)]
-        [:div {:key (str (:id shape) pos) :class (stl/css :variant-property-container)}
-         [:*
-          [:div {:class (stl/css :variant-property-name-wrapper-copy)
-                 :title (:name prop)}
-           [:span {:class (stl/css :variant-property-name)}
-            (:name prop)]]
+        [:div {:key (str (:id shape) pos)
+               :class (stl/css :variant-property-container)}
+
+         [:div {:class (stl/css :variant-property-name-wrapper)
+                :title (:name prop)}
+          [:div {:class (stl/css :variant-property-name)}
+           (:name prop)]]
+
+         [:div {:class (stl/css :variant-property-value-wrapper)}
           [:> select* {:default-selected (:value prop)
                        :options (get-options (:name prop))
                        :empty-to-end true
@@ -901,18 +906,19 @@
            [:span {:class (stl/css :icon-back)} i/arrow]
            [:span (tr "workspace.options.component")]]
 
-          [:> title-bar* {:collapsable  true
-                          :collapsed    (not open?)
-                          :on-collapsed toggle-content
-                          :title        (tr "workspace.options.component")
-                          :class        (stl/css :title-spacing-component)
-                          :title-class (stl/css-case :title-bar-variant is-variant?)}
-           [:span {:class (stl/css :copy-text)}
-            (if main-instance?
-              (if is-variant?
-                (tr "workspace.options.component.variant")
-                (tr "workspace.options.component.main"))
-              (tr "workspace.options.component.copy"))]
+          [:*
+           [:> title-bar* {:collapsable  true
+                           :collapsed    (not open?)
+                           :on-collapsed toggle-content
+                           :title        (tr "workspace.options.component")
+                           :class        (stl/css :title-spacing-component)
+                           :title-class  (stl/css :title-bar-variant)}
+            [:span {:class (stl/css :copy-text)}
+             (if main-instance?
+               (if is-variant?
+                 (tr "workspace.options.component.variant")
+                 (tr "workspace.options.component.main"))
+               (tr "workspace.options.component.copy"))]]
 
            (when is-variant?
              [:div {:class (stl/css :variants-help-modal-button)}
@@ -1102,16 +1108,15 @@
       [:div {:class (stl/css :element-set)}
        [:div {:class (stl/css :element-title)}
 
-
-        [:> title-bar* {:collapsable  true
-                        :collapsed    (not open?)
-                        :on-collapsed toggle-content
-                        :title        (tr "workspace.options.component")
-                        :class        (stl/css :title-spacing-component)
-                        :title-class  (stl/css :title-bar-variant)}
-
-         [:span {:class (stl/css :copy-text)}
-          (tr "workspace.options.component.main")]
+        [:*
+         [:> title-bar* {:collapsable  true
+                         :collapsed    (not open?)
+                         :on-collapsed toggle-content
+                         :title        (tr "workspace.options.component")
+                         :class        (stl/css :title-spacing-component)
+                         :title-class  (stl/css :title-bar-variant)}
+          [:span {:class (stl/css :copy-text)}
+           (tr "workspace.options.component.main")]]
 
          [:div {:class (stl/css :variants-help-modal-button)}
           [:> icon-button* {:variant "ghost"
diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
index ebc6b8219a..0d78845e3d 100644
--- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
+++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.scss
@@ -9,12 +9,21 @@
 
 .element-set {
   margin: 0;
-  padding-top: $s-8;
 }
 
 .element-content {
   @include flexColumn;
-  gap: var(--sp-m);
+  display: grid;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
+  row-gap: var(--sp-m);
+  padding-top: $s-4;
+  padding-bottom: $s-8;
+}
+
+.element-title {
+  display: grid;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
+  column-gap: var(--sp-xs);
 }
 
 .title-back {
@@ -35,7 +44,7 @@
 .title-spacing-component {
   justify-content: flex-start;
   gap: $s-8;
-  margin-bottom: $s-4;
+  grid-column: span 7;
 }
 
 .title-bar-variant {
@@ -44,6 +53,7 @@
 
 .variants-help-modal-button {
   margin-inline-start: auto;
+  grid-column: span 1;
 }
 
 .icon-back {
@@ -60,14 +70,14 @@
 }
 
 .component-wrapper {
+  grid-column: span 8;
   width: 100%;
   min-height: $s-32;
   border-radius: $br-8;
 
   &.with-actions {
-    display: grid;
-    grid-template-columns: 1fr $s-28;
-    gap: $s-2;
+    display: flex;
+    gap: $s-1;
   }
 
   &.without-actions {
@@ -83,8 +93,9 @@
 .component-name-wrapper {
   @include buttonStyle;
   cursor: default;
+  flex-grow: 1;
   display: grid;
-  grid-template-columns: $s-12 1fr;
+  grid-template-columns: $s-16 1fr;
   gap: $s-4;
   padding: 0 $s-8;
   border-radius: $br-8 0 0 $br-8;
@@ -100,7 +111,7 @@
 .component-icon {
   @include flexCenter;
   height: $s-32;
-  width: $s-12;
+  width: $s-16;
 
   svg {
     @extend .button-icon-small;
@@ -114,6 +125,7 @@
   padding: $s-8 0 $s-8 $s-2;
   border-radius: $br-8 0 0 $br-8;
   overflow: hidden;
+  gap: 0;
 }
 
 .component-name {
@@ -121,7 +133,7 @@
   @include textEllipsis;
   direction: rtl;
   text-align: left;
-  min-height: $s-16;
+  height: $s-16;
 }
 
 .component-name-inside {
@@ -134,19 +146,20 @@
   @include textEllipsis;
   direction: rtl;
   text-align: left;
-  min-height: $s-16;
+  height: $s-16;
   max-width: $s-184;
   color: var(--title-foreground-color);
 }
 
 .component-actions {
   position: relative;
+  width: $s-32;
 }
 
 .menu-btn {
   @extend .button-tertiary;
   height: 100%;
-  width: $s-28;
+  width: 100%;
   border-radius: 0 $br-8 $br-8 0;
   background-color: var(--assets-item-background-color);
   color: var(--assets-item-name-foreground-color-hover);
@@ -191,7 +204,7 @@
 }
 
 .not-main {
-  top: $s-56;
+  top: $s-48;
 }
 
 .dropdown-element {
@@ -450,6 +463,7 @@
 
 .component-swap {
   padding-top: $s-12;
+  grid-column: span 8;
 }
 
 .component-swap-content {
@@ -733,36 +747,32 @@
 }
 
 .variant-property-list {
-  display: flex;
+  grid-column: span 8;
+
+  display: grid;
   flex-direction: column;
   gap: var(--sp-xs);
 }
 
 .variant-property-container {
   @include t.use-typography("body-small");
-  width: 100%;
-  display: flex;
+  display: grid;
+  grid-template-columns: repeat(8, var(--sp-xxxl));
   gap: var(--sp-xs);
-  padding-right: var(--sp-xxs);
-}
-
-.variant-property-name-wrapper-copy {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  height: var(--sp-xxxl);
-  width: $s-104;
 }
 
 .variant-property-name-wrapper {
-  display: flex;
-  flex: 0 0 auto;
-  width: $s-104;
+  grid-column: span 3;
+  align-self: center;
+}
+
+.variant-property-value-wrapper {
+  grid-column: span 5;
+  align-self: center;
 }
 
 .variant-property-name {
-  color: var(--color-foreground-primary);
+  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -770,6 +780,8 @@
 
 .variant-warning-wrapper {
   @include bodySmallTypography;
+  grid-column: span 8;
+
   border: 1px solid var(--color-background-quaternary);
   border-radius: $s-8;
   padding: $s-12;