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] :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*])]]