add chevron icon

frontend/src/app/main/ui/workspace/tokens/sets.cljs

@@ -3,16 +3,12 @@
   (:require
    [app.common.data.macros :as dm]
    [app.main.store :as st]
-   [app.main.ui.components.title-bar :refer [title-bar]]
    [app.main.ui.icons :as i]
    [app.util.dom :as dom]
    [okulary.core :as l]
    [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
-(def current-set-id
-  (l/derived :current-set-id st/state))
-
 (def active-sets #{#uuid "2858b330-828e-4131-86ed-e4d1c0f4b3e3"
                    #uuid "d608877b-842a-473b-83ca-b5f8305caf83"})
 
@@ -39,6 +35,9 @@
            #uuid "0381446e-1f1d-423f-912c-ab577d61b79b" {:type :set
                                                          :name "Set Root 2"}})
 
+(def ^:private chevron-icon
+  (i/icon-xref :arrow (stl/css :chevron-icon)))
+
 (defn set-current-set
   [set-id]
   (dm/assert! (uuid? set-id))
@@ -54,10 +53,7 @@
       (let [{:keys [type name children]} set
             visible? (mf/use-state (contains? active-sets set-id))
             collapsed? (mf/use-state false)
-            icon (cond
+            icon (if (= type :set) i/document i/group)
-                   (= type :set) i/document
-                   (and (= type :group) @collapsed?) i/group
-                   :else i/folder-open)
             selected? (mf/use-state (= set-id current-set-id))
 
             on-click
@@ -71,8 +67,13 @@
          [:div {:class (stl/css-case :set-item-group (= type :group)
                                      :set-item-set  (= type :set)
                                      :selected-set  (and (= type :set) @selected?))}
-          [:span {:class (stl/css :icon)
+          (when (= type :group)
-                  :on-click #(when (= type :group) (swap! collapsed? not))} icon]
+          [:span {:class (stl/css-case
+                           :collapsabled-icon true
+                           :collapsed @collapsed?)
+                  :on-click #(when (= type :group) (swap! collapsed? not))}
+            chevron-icon])
+          [:span {:class (stl/css :icon)} icon]
           [:div {:class (stl/css :set-name)} name]
           (when (= type :set)
             [:span {:class (stl/css :action-btn)
@@ -96,20 +97,4 @@
      (for [set-id sets-root-order]
        ^{:key (str set-id)}
        [:& sets-tree {:key (str set-id) :set-id set-id :current-set-id current-set-id}])]))
-
+       
-(mf/defc sets-sidebar
-  []
-  (let [current-set-id (mf/deref current-set-id)
-        open? (mf/use-state true)]
-    [:div {:key (str "sidebar-" current-set-id)
-           :class (stl/css :sets-sidebar)}
-     [:div {:class (stl/css :sidebar-header)}
-      [:& title-bar {:collapsable true
-                     :collapsed (not @open?)
-                     :title "SETS"
-                     :on-collapsed #(swap! open? not)}]
-      [:button {:class (stl/css :add-set)
-                :on-click #(println "Add Set")}
-       i/add]]
-     (when @open?
-       [:& sets-list {:current-set-id current-set-id}])]))

frontend/src/app/main/ui/workspace/tokens/sets.scss

@@ -6,37 +6,6 @@
 
 @import "refactor/common-refactor.scss";
 
-.sets-sidebar {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  width: 100%;
-  height: var(--height, $s-200);
-  overflow-y: auto;
-}
-
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-left: $s-2;
-  color: var(--layer-row-foreground-color);
-}
-
-.add-set {
-  @extend .button-tertiary;
-  height: $s-32;
-  width: $s-28;
-  padding: 0;
-  margin-right: $s-12;
-  svg {
-    @extend .button-icon;
-    stroke: var(--icon-foreground);
-    transform: rotate(90deg);
-  }
-}
-
 .sets-list {
   width: 100%;
   margin-bottom: $s-12;
@@ -106,3 +75,28 @@
     height: 12px;
   }
 }
+
+.collapsabled-icon {
+  @include buttonStyle;
+  @include flexCenter;
+  height: $s-24;
+  border-radius: $br-8;
+
+  --chevron-icon-rotation: 90deg;
+
+  &.collapsed {
+    --chevron-icon-rotation: 0deg;
+  }
+
+  &:hover {
+    --chevron-icon-color: var(--title-foreground-color-hover);
+  }
+}
+
+.chevron-icon {
+  @extend .button-icon-small;
+  //color: var(--icon-foreground);
+  margin-right: 5px;
+  transform: rotate(var(--chevron-icon-rotation));
+  stroke: var(--icon-foreground);
+}