add more changes

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

@@ -20,7 +20,7 @@
                                                          :name "Set A / 1"}
            #uuid "d1754e56-3510-493f-8287-5ef3417d4141" {:type :group
                                                          :name "Group A / B"
-                                                         :children [#uuid "d608877b-842a-473b-83ca-b5f8305caf83"
+                                                         :children [#uuid "f608877b-842a-473b-83ca-b5f8305caf83"
                                                                     #uuid "7cc05389-9391-426e-bc0e-ba5cb8f425eb"]}
            #uuid "f608877b-842a-473b-83ca-b5f8305caf83" {:type :set
                                                          :name "Set A / B / 1"}
@@ -38,7 +38,7 @@
   (let [set (get sets set-id)]
     (when set
       (let [{:keys [type name children]} set
-            icon (if (= type :group) i/document i/document)] ;; Correct icon for groups
+            icon (if (= type :group) i/document i/document)]
         [:div {:class (stl/css-case :set-item true :group (= type :group))}
          [:div {:class (stl/css :set-icon)}
           [:svg {:class (stl/css :set-icon-svg)} icon]]
@@ -54,7 +54,7 @@
   {::mf/wrap-props false}
   []
   (println "Rendering Sets List with root order:" sets-root-order)
-  [:div.assets-bar
+  [:div {:class (stl/css :sets-list)}
    (for [set-id sets-root-order]
      ^{:key (str set-id)}
      [:& sets-tree {:key (str set-id) :set-id set-id}])])
@@ -66,7 +66,7 @@
   [:div {:class (stl/css :sets-sidebar)}
    [:div {:class (stl/css :sidebar-header)}
     "SETS"
-    [:button {:class (stl/css :add-button)
+    [:button {:class (stl/css :add-set)
               :on-click #(println "Add Set")} 
-     "Add"]]
+     i/add]]
    [:& sets-list]])

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

@@ -13,6 +13,7 @@
   flex: 1;
   width: 100%;
   height: var(--height, $s-200);
+  overflow-y: auto;
 }
 
 .sidebar-header {
@@ -23,7 +24,7 @@
   color: var(--layer-row-foreground-color);
 }
 
-.add-button {
+.add-set {
   @extend .button-tertiary;
   height: $s-32;
   width: $s-28;
@@ -32,13 +33,14 @@
   svg {
     @extend .button-icon;
     stroke: var(--icon-foreground);
+    transform: rotate(90deg);
   }
 }
 
 .sets-list {
   width: 100%;
-  max-height: $s-152;
   margin-bottom: $s-12;
+  overflow-y: auto;
 }
 
 .set-item {
@@ -57,14 +59,13 @@
   }
   .set-icon {
     @include flexCenter;
-    height: $s-32;
-    width: $s-24;
+    height: $s-20; 
+    width: $s-20;   
     padding: 0 $s-4 0 $s-8;
     svg {
-      @extend .button-icon-small;
-      height: $s-12;
-      width: $s-12;
-      color: transparent;
+      height: $s-20;  
+      width: $s-20;  
+      color: white;
       fill: none;
       stroke: var(--icon-foreground);
     }

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

@@ -172,8 +172,10 @@
    ::mf/wrap-props false}
   [_props]
   [:div {:class (stl/css :sidebar-tab-wrapper)}
-   [:& sets-sidebar]  ;; Add sets sidebar here
-   [:& tokens-explorer]
+   [:& sets-sidebar]
+   ;;[:div {:class (stl/css :divider)}]
+   [:div {:class (stl/css :tokens-section-wrapper)} 
+    [:& tokens-explorer]]
    [:button {:class (stl/css :download-json-button)
              :on-click wtc/download-tokens-as-json}
     download-icon

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

@@ -5,11 +5,33 @@
 // Copyright (c) KALEIDOS INC
 
 @import "refactor/common-refactor.scss";
-
 @import "./common.scss";
 
 .sidebar-tab-wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
   padding: $s-12;
+  //justify-content: space-evenly;
+//  align-items: flex-start;
+}
+
+.sets-sidebar {
+  flex-shrink: 0;
+  overflow-y: auto;
+  max-height: 40%;  // Adjust this value as needed
+}
+
+.tokens-section-wrapper {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.divider {
+  height: 1px;
+  background-color: var(--border-color);
+  margin: $s-8 0;
 }
 
 .token-pills-wrapper {