🐛 Make collapsible sidebar titles clickable to toggle (#8547)

Fixes #5168

CHANGES.md

@@ -34,6 +34,7 @@
 
 - Fix Alt/Option to draw shapes from center point (by @offreal) [Github #8361](https://github.com/penpot/penpot/pull/8361)
 - Add token name on broken token pill on sidebar [Taiga #13527](https://tree.taiga.io/project/penpot/issue/13527)
+- Fix collapsible sidebar property titles not toggling on click [Github #5168](https://github.com/penpot/penpot/issues/5168)
 
 
 ## 2.14.0 (Unreleased)

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

@@ -13,30 +13,21 @@
 
 (mf/defc title-bar*
   [{:keys [class collapsable collapsed title children
-           btn-icon btn-title all-clickable add-icon-gap
+           btn-icon btn-title add-icon-gap
            title-class on-collapsed on-btn-click]}]
-  [:div {:class [(stl/css-case :title-bar true
-                               :all-clickable all-clickable)
+  [:div {:class [(stl/css :title-bar)
                  class]}
 
    (if ^boolean collapsable
      [:div {:class [(stl/css :title-wrapper) title-class]}
 
       (let [icon-id (if collapsed "arrow-right" "arrow-down")]
-        (if ^boolean all-clickable
-          [:button {:class (stl/css :icon-text-btn)
-                    :on-click on-collapsed}
-           [:> icon* {:icon-id icon-id
-                      :size "s"
-                      :class (stl/css :icon)}]
-           [:div {:class (stl/css :title)} title]]
-          [:*
-           [:button {:class (stl/css :icon-btn)
-                     :on-click on-collapsed}
-            [:> icon* {:icon-id icon-id
-                       :size "s"
-                       :class (stl/css :icon)}]]
-           [:div {:class (stl/css :title)} title]]))]
+        [:button {:class (stl/css :icon-text-btn)
+                  :on-click on-collapsed}
+         [:> icon* {:icon-id icon-id
+                    :size "s"
+                    :class (stl/css :icon)}]
+         [:div {:class (stl/css :title)} title]])]
 
      [:div {:class [(stl/css-case :title-only true
                                   :title-only-icon-gap add-icon-gap)

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

@@ -75,12 +75,3 @@
     --title-color: var(--title-foreground-color-hover);
   }
 }
-
-.icon-btn {
-  @include deprecated.buttonStyle;
-  @include deprecated.flexCenter;
-
-  &:hover {
-    --arrow-icon-color: var(--icon-foreground-hover);
-  }
-}

frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs

@@ -172,7 +172,6 @@
      [:> title-bar*
       {:collapsable   (< 0 assets-count)
        :collapsed     (not is-open)
-       :all-clickable true
        :on-collapsed  on-collapsed
        :add-icon-gap  (= 0 assets-count)
        :title         title}

frontend/src/app/main/ui/workspace/sidebar/assets/file_library.cljs

@@ -101,7 +101,6 @@
                    :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)}

frontend/src/app/main/ui/workspace/sidebar/assets/groups.cljs

@@ -51,7 +51,6 @@
               :on-context-menu on-context-menu}
         [:> title-bar* {:collapsable    true
                         :collapsed      (not is-group-open)
-                        :all-clickable  true
                         :on-collapsed   on-fold-group
                         :title          (mf/html [:* (when-not (empty? other-path)
                                                        [:span {:class (stl/css :pre-path)

frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs

@@ -260,7 +260,6 @@
      [:> 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)}